/*
  Skin Name: 中央ホテルテンプレート
  Description: 心がふれあう民芸の宿 中央ホテル専用テーマデザインです。
  Skin URI: https://yanchado.com/
  Author: Shun
  Author URI: https://yanchado.com/
  Screenshot URI: 
  Version: 1.0.2
  Priority: Ho-001
*/
body { background-color: #fff; }
.main { border-radius: 0px; }
.home .article-header { display: none; }
.home .author-info { display: none; }
/************************
ヘッダーロゴ
/************************/
.logo-header img { max-width: 600px; max-height: auto; }
/*834px以下*/
@media screen and (max-width: 834px){
	.logo-header img { max-width: 300px; height: auto; }
	.logo-header img { margin-top: 10px; }
}
/************************
ヘッダー・グローバルナビ
/************************/
.header-container { background-color: #611510; padding: 0px; }
.logo a { color: #fff; }
.logo a:hover { color: #fff; }

.header-container .navi { background: #611510; }
/* .navi{
  border: 0;
  background-color: transparent;
}*/
#navi .navi-in a { font-size: 14px; color: #fff; }
#navi .navi-in>.menu-header .sub-menu { background:#89817f; }
#navi .navi-in a:hover { background-color:#a2231a; }
.header { color: #611510; }

/* アピールエリア背景色v */
.appeal-content { background-color:rgba(255,255,255,0.5); border-radius: 10px; max-width: 1000px; text-align: left; padding: 20px 40px; }
.appeal-content .box p { font-size: 14px; line-height: 16px; margin: 0; padding: 0; }
.appeal-content .box ul li { font-size: 14px; }


.apl-box { display: flex; justify-content: space-around; align-items: flex-start; }

/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width: 640px) {
	.appeal-content .appeal-message .box { margin: 0; padding: 10px; }
	.appeal-content .appeal-message .box p { font-size: 90%; line-height: 150%; }
	.appeal-content .appeal-message .box { margin: 0 -10px; padding: 10px 5px 7px 5px; }
}

/************************
フッター
/************************/
#footer { color: white; background: url("./images/foot_bg_img.jpg"); padding: 5px; background-color: #000; border-top: 10px solid #4a100c ; }
#footer h3 { font-size: 16px; }
#footer a { color: white; }
#footer .site-name-text { color: white; }
#footer #navi-footer a { color: white; background-color: black; }
#footer #navi-footer a:hover { background-color: #ff3300; color: #fff; }


.footer-left { background: ; }
.footer-center { background: ; }
.footer-right { background: ; }


/************************
フッターロゴ
/************************/
.footer-bottom-logo .logo-image img { max-width: 398px; max-height: 58px; }
.footer .logo-image { max-width: 400px; }
@media screen and (max-width: 834px){
	.footer-bottom-logo .logo-image img { max-width: 300px; height: auto;; }
}





/*************************************************************
** 全幅
*************************************************************/

body {
	overflow-x: hidden;
}
.haikei-top {
    margin-left: calc((50vw - 50%) * -1);
    margin-right: calc((50vw - 50%) * -1);
	padding: 0 29px 1em;
	background: #333;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background: url("./images/foot_bg_img.jpg");
}

.haikei-top > p,
.haikei-top > div,
.haikei-top > h2,
.haikei-top > h3 {
  margin-left: auto;
  margin-right: auto;
  max-width: 1256px;
}
.content{
  max-width: 1256px;
  margin:0 auto;

	padding: 0px 10px;
}
/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width: 640px) {
	.haikei-top { padding: 0 0px 0em; }
}

/************** 見出し CSS **************/
.haikei-top .content .article h2 { border-left:0px solid #fff; font-size:26px; clear:both; }
.haikei-top .content .article h2 { background-color: #ebebd6; }

.haikei-top h3{ font-size:23px; border-bottom:5px solid #e7e7e7; padding:10px 0; }
.haikei-top h3{ padding-bottom: .5em; border-bottom: 3px double #ccc; }

.haikei-top .content > h2 { background: #ebebd6; border: none; }
.haikei-top .content > h2 span{ font-size:80%; }




/*************************************************************
** イメージ全幅 ブロック
*************************************************************/
body {
	overflow-x: hidden;
}
.full-width {
    margin-left: calc((50vw - 50%) * -1);
    margin-right: calc((50vw - 50%) * -1);
	padding: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.full-width .flbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -2px;
  margin-right: -2px;
}
.full-width .flbox .box { color: #fff; background: #000; margin: 0px; padding: 0px; }
.full-width .flbox .box img { width: 100%; }
.full-width .flbox .box-l { padding: 0px; width: 55%; }
.full-width .flbox .box-r { padding: 0px; width: 45%; }

.full-width .flbox .box-r .c-button { margin-top: 10px; text-align: center; }
.full-width .flbox .box-r .button-2 {
  display: inline-block;
  padding: 0.4em 1.6em;
  color: #eee8aa;
  text-decoration: none;
  user-select: none;
  border: 1px #eee8aa solid;
  transition: 0.4s ease;
}
.full-width .flbox .box-r .button-2:hover { color: #fff; background: #333; }

.full-width .flbox h3 { font-size: 26px; margin: 50px 50px 0 50px; padding: 0; border: none; color: #eee8aa; font-family: serif; }
.full-width .flbox p { margin: 50px 50px 30px 50px; border: none; }

.full-width .flbox .order4 h3 { text-align: right; }
.full-width .flbox .order4 p { text-align: left; }
.full-width .flbox .order8 h3 { text-align: right; }
.full-width .flbox .order8 p { text-align: left; }

/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width: 640px) {
	.full-width { padding: 0 0px 0em; }
	.full-width .flbox .box { width: 100%; margin: 0px; }
	.full-width .flbox .box-r { font-size: 14px; margin: -10px 0px 0px 0px; padding: 20px; text-align: center; }
	.full-width .flbox h3 { margin: 10px; }
	.full-width .flbox p { margin: 10px; }
	.full-width .flbox .order4 h3 { text-align: center; }
	.full-width .flbox .order4 p { text-align: center; }
	.full-width .flbox .order8 h3 { text-align: center; }
	.full-width .flbox .order8 p { text-align: center; }


.order1 {
  order: 1;
}
.order2 {
  order: 2;
}
.order3 {
  order: 3;
}
.order4 {
  order: 4;
}
.order5 {
  order: 5;
}
.order6 {
  order: 6;
}
.order7 {
  order: 7;
}
.order8 {
  order: 8;
}
}




/*****************************************
 湯けむり情報
*****************************************/
.newsgrid { padding:0px; display : flex; flex-wrap: wrap;}
.element{ content:""; display: block; width:33%; padding:10px; }
.newsgrid > div { overflow:hidden; min-width: 0; padding: 0 10px 0 0; border-bottom: 1px dotted #ccc; }
.newsgrid > div:hover { background-color: #f2f2f2; }
.newsgrid > div h4 { font-size: 18px; margin: 0px 0px 5px 0px; padding: 0px; border: none; font-weight: bold; }
.newsgrid > div img { float: left; margin: 0 10px 0 0; }
.newsgrid > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 900; color: #333; }
.newsgrid > div a:hover { color: #ff0000; }
.newsgrid > div p { margin: 0; padding: 0; line-height: 130%; }
.newsgrid > div .mday { font-size: 12px; margin: 5px 0 5px 0; line-height: 120%; }
.newsgrid > div .fa-rss-square { color: red; }
.newsgrid > div .excer { font-size: 14px; }

@media screen and (max-width:640px){
  .newsgrid { display:block; }
  .element{ width:100%; }
  }
/************************
フッターロゴ
/************************/
.footer-bottom-logo .logo-image img { max-width: 250px; max-height: auto; }
.footer .logo-image { max-width: 250px; max-height: auto; }
@media screen and (max-width: 834px){
	.footer-bottom-logo .logo-image img { max-width: 250px; height: auto;; }
}






/************************
 湯けむり・イベント・周辺 ブロック
/************************/
.tab-wrap {

	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}
.tab-label {
	color: #999;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}
.tab-label:hover { background: rgba(97, 21, 16,.1); }
.tab-switch:checked + .tab-label { color: #611510; }
.tab-label::after {
	background: #611510;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}
.tab-switch:checked ~ .tab-label::after { transform: translateX(-100%); }
.tab-switch:checked + .tab-label::after { opacity: 1; transform: translateX(0); }
.tab-content {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content { transform: translateX(30%); }
.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}
.tab-wrap::after { content: ''; height: 20px; order: -1; width: 100%; }
.tab-switch { display: none; }

/* ============================== */