@charset "UTF-8";
/* CSS Document */

#stay main #contents{max-width: 100%; overflow: hidden;}
#stay main{background: #fff;}

#stay #lead .leadlist1{ max-width: 920px;  display: flex; justify-content: center; flex-wrap: wrap; margin: 40px auto 0;}
#stay #lead .leadlist1 li{width:calc(100% / 4);}
#stay #lead h2{max-width: 980px; margin: auto;}

/*txt*/
#stay #lead  h1{text-align: center; margin: 70px 0 10px;}
#stay #lead  h2 {font-size: 2.8em; line-height: 1.2; text-align: center;}
#stay #lead  h2 span{color: #E6418C;}



#stay #lead .txt{text-align: center; font-size: 21px; line-height: 1.9em;}
#stay #lead .leadlist1 li a:hover{opacity: 0.5;}
#stay #lead .data{/*font-size: 40px;*/font-size: 32px; font-weight: 400; text-align: center; margin: 10px 0 50px;}

#stay .scene{margin-top: 100px;}
#stay .room span{ display: block; font-size: 80%; margin-top: 1.5em;}
#stay .price span{font-size: 40px;}

/*#stay #dinner .scene{margin-top: 200px;}*/
#stay #personal .scene{margin-top: 300px;}


/**/
#extra{
background-image: url("../img/stay/extra_bg.png"), url("../img/stay/long_bg.png");
background-repeat: no-repeat,no-repeat; 
background-position: left 450px,left 2000px; 
background-size: 100%,100%; position: relative; padding: 150px 0 0;}
#extra h2{/*width: 400px;*/}

#extra h2{
background-color: #009DE0;
height: 3px;
width: 100%;
position: relative;
margin: 60px 0 10px 0;
position: relative;
left: -72%;}

#extra h2 p{
position: absolute;
top: -55px;
right: 0;
width: 550px;
font-size: 50px;
text-align: right;
        }
#extra h2 span{color: #009DE0;}



#extra h3{width: 200px; margin: auto;}

#extra article{max-width: 1100px; margin: 0 auto 0; position: relative;}
#extra article .txt{font-size: 21px; line-height: 1.9;}
#extra article .txt p{padding-left: 50px;}
#extra article .img01{position: relative;  max-width: 575px; margin-left: 65px; z-index: 9;}
#extra article .img02{position: absolute; top: 230px; right: 0; max-width: 570px; z-index: 0;}

#extra .tokuten{display: flex; justify-content: center; flex-wrap: wrap; max-width: 770px; margin: auto;}
/*#extra .tokuten li{width: 50%; border: #009DE0 solid 5px; margin: 0 20px 0;}*/
#extra .tokuten li{width:  calc((100% - 80px)/2); border: #009DE0 solid 5px; margin: 0 20px 70px;}
/*#extra .tokuten li:first-child{width: 30%;}
#extra .tokuten li:last-child{width:calc((100% - 30%)/4);}*/

#extra .tokuten dl{position: relative;}
#extra .tokuten dt{background:#009DE0; color: #fff; font-size: 45px; width: 100px;
  height: 100px;  border-radius: 50%;margin: auto; position: absolute; top: -10px;
   left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#extra .tokuten dt span{font-size: 18px; display: block; padding: 25px 0 0px;}
#extra .tokuten dd{padding:50px 0 20px; color: #009DE0; line-height: 1.5; font-weight: 500;}
#extra .tokuten dd span{font-size: 21px; color: #000; display: block; padding-top: 10px;}


#extra .plan{text-align: center;}
#extra .plan01{ border-bottom: 3px #009DE0 solid;}
#extra .price{font-size: 50px; margin: 20px 0 0;}
#extra .room{font-size: 18px;}

#extra .linkbtn{max-width: 470px; margin: auto; padding: 47px 0;}
#extra .linkbtn a:hover{opacity: 0.5;}

#stay .btnnote{font-size: 13px; padding: 0.8em 0 0;}
#stay .blf{padding: 1em 0 0;}
#stay .blf2{padding: 0.5em 0 0;}

#extra .tabContents > p:first-child{color: #009DE0;}

/*label[for="tab01"]{background: url("../img/stay/extra_list01_on.png") no-repeat left top; background-size: auto 100%;}
label[for="tab02"]{background: url("../img/stay/extra_list02_on.png") no-repeat left top; background-size: auto 100%;}
label[for="tab03"]{background: url("../img/stay/extra_list03_on.png") no-repeat left top; background-size: auto 100%;}
label[for="tab04"]{background: url("../img/stay/extra_list04_on.png") no-repeat left top; background-size: auto 100%;}
*/


/**/
#mother{
background-image: url("../img/stay/mother_bg.png"), url("../img/stay/long_bg.png");
background-repeat: no-repeat,no-repeat; 
background-position: left 320px,left 2000px; 
background-size: 100%,100%;
position: relative;}
#mother h2{/*width: 400px;*/ /*text-align: right;*/ }
#mother h2{
background-color: #EE9D8B;
height: 3px;
width: 100%;
position: relative;
margin: 60px 0 10px 0;
position: relative;
right: -60%;}
#mother h2 p{
position: absolute;
top: -55px;
left: 0;
width: 400px;
font-size: 50px;
text-align: left;
        }
#mother h2 span{color: #EE9D8B;}




/*@media screen and (max-width: 480px){
#mother h2{right: -10%; width: 100%; margin: 50px 0 0;} 
#mother h2 p{width: 100%;}
}*/



#mother h3{width: 200px; margin: auto;}

#mother article{max-width: 1100px; margin: 0 auto 0; position: relative;}
#mother article .txt{font-size: 21px; line-height: 1.9; max-width: 550px; position: absolute; right: 0; top:10px;}
#mother article .txt p{padding-left: 50px;}

#mother article .img01{max-width: 480px; margin-left: 65px;  z-index: 9; padding-top: 125px;}

#mother .tokuten{display: flex; justify-content: center; flex-wrap: wrap; max-width: 770px; margin: auto;}
#mother .tokuten li{width:calc((100% - 80px)/2); border: #EE9D8B solid 5px; /*margin: 0 20px 0;*/ margin: 0 20px 70px;}
/*#mother .tokuten li:first-child{width:25%;}
#mother .tokuten li:last-child{width: 15%;}*/

#mother .tokuten dl{position: relative;}
#mother .tokuten dt{background:#EE9D8B; color: #fff; font-size: 45px; width: 100px;
  height: 100px;  border-radius: 50%;margin: auto; position: absolute; top: -10px;
   left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#mother .tokuten dt span{font-size: 18px; display: block; padding: 25px 0 0px;}
#mother .tokuten dd{padding:50px 0 10px; color: #EE9D8B; line-height: 1.5; font-weight: 500;}
#mother .tokuten dd span{font-size: 25px; color: #000; display: block; padding-top: 10px;}


#mother .plan{text-align: center;}
#mother .plan01{ border-bottom: 3px #EE9D8B solid;}
#mother .price{font-size: 50px; margin: 20px 0 0; line-height: 1.5em;}
#mother .room{font-size: 18px;}
#stay #mother .room{margin: -0.2em 0 10px;}

#mother .linkbtn{max-width: 470px; margin: auto; padding: 47px 0;}
#mother .linkbtn a:hover{opacity: 0.5;}

#mother .tabContents > p:first-child{color: #EE9D8B;}


/**/
#dinner{
background-image: url("../img/stay/mother_bg.png"), url("../img/stay/long_bg.png");
background-repeat: no-repeat,no-repeat; 
background-position: left 400px,left 2000px; 
background-size: 100%,100%;
position: relative;}
#dinner h2{/*width: 400px;*/}
#dinner h2{
background-color: #43B7B5;
height: 3px;
width: 100%;
position: relative;
margin: 60px 0 10px 0;
position: relative;
right: -62%;}

#dinner h2 p{
position: absolute;
top: -55px;
left: 0;
width: 550px;
font-size: 50px;
text-align: left;
        }
#dinner h2 span{color: #43B7B5;}


#dinner h3{width: 200px; margin: auto;}

#dinner article{max-width: 1100px; margin: 0 auto 0; position: relative;}
#dinner article .txt{font-size: 21px; line-height: 1.9; position: absolute; top: 10px; right: 60px;}
#dinner article .txt p{/*padding-left: 60px;*/}
#dinner article .img01{/*position: absolute; top: 0px; right: 0;  */max-width: 542px; margin-left: 65px; padding: 125px 0 0;}
#dinner .tokuten{display: flex; justify-content: space-between; max-width: 770px; margin: auto; flex-wrap: wrap;}
#dinner .tokuten li{}
#dinner .tokuten li{width:calc((100% - 80px)/2); border: #43B7B5 solid 5px; margin: 70px 20px 0;}

#dinner .tokuten dl{position: relative;}
#dinner .tokuten dt{background:#43B7B5; color: #fff; font-size: 45px; width: 100px;
  height: 100px;  border-radius: 50%;margin: auto; position: absolute; top: -10px;
   left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#dinner .tokuten dt span{font-size: 18px; display: block; padding: 25px 0 0px;}
#dinner .tokuten dd{padding:50px 0 10px; color: #43B7B5; line-height: 1.5; font-weight: 500;}
#dinner .tokuten dd span{font-size: 25px; color: #000; display: block; padding-top: 10px;}




#dinner .plan{text-align: center;}
#dinner .plan01{ border-bottom: 3px #43B7B5 solid;}
#dinner .price{font-size: 50px; margin: 20px 0 0;}
#dinner .room{font-size: 18px;}

#dinner .linkbtn{max-width: 470px; margin: auto; padding: 47px 0;}
#dinner .linkbtn a:hover{opacity: 0.5;}

#dinner .tabContents > p:first-child{color: #43B7B5;}

/**/
#personal{
background-image: url("../img/stay/extra_bg.png"), url("../img/stay/long_bg.png");
background-repeat: no-repeat,no-repeat; 
background-position: left 450px,left 2000px; 
background-size: 100%,100%; position: relative;}
#personal h2{/*width: 400px;*/ /*text-align: right;*/ }
#personal h2{
background-color: #815898;
height: 3px;
width: 100%;
position: relative;
margin: 60px 0 10px 0;
position: relative;
left: -62%;}
#personal h2 p{
position: absolute;
top: -55px;
right: 0;
width: 400px;
font-size: 50px;
text-align:right; }
#personal h2 span{color: #815898;}



#personal h3{width: 200px; margin: auto;}

#personal article{max-width: 1100px; margin:auto; position: relative;}
#personal article .txt{font-size: 21px; line-height: 1.9; max-width: 550px; /*position: absolute; right: 0; top:0;*/}
#personal article .txt p{padding-left: 75px; }
#personal article .img01{max-width: 480px; margin-left: 65px;  z-index: 9; padding-top: 125px; position: absolute; top: 0px; right: 0;  }
#personal .tokuten{display: flex; justify-content:center; flex-wrap: wrap; max-width: 770px; margin: auto;}
#personal .tokuten li .mini{font-size: 0.8em;}
#personal .tokuten li{/*width:33%;*/  width: calc((100% - 80px)/2); border: #815898 solid 5px; margin: 0 20px 70px; padding: 0 10px;}

#personal .tokuten dl{position: relative;}
#personal .tokuten dt{background:#815898; color: #fff; font-size: 45px; width: 100px;
  height: 100px;  border-radius: 50%;margin: auto; position: absolute; top: -10px;
   left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#personal .tokuten dt span{font-size: 18px; display: block; padding: 25px 0 0px;}
#personal .tokuten dd{padding:50px 0 10px; color: #815898; line-height: 1.5; font-weight: 500;}
#personal .tokuten dd span{font-size: 25px; color: #000; display: block; padding-bottom: 10px;}

#personal .plan{text-align: center;}
#personal .plan01{ border-bottom: 3px #815898 solid;}
#personal .price{font-size: 50px; margin: 20px 0 0;}
#personal .room{font-size: 18px;}

#personal .linkbtn{max-width: 470px; margin: auto; padding: 47px 0;}
#personal .linkbtn a:hover{opacity: 0.5;}

#personal .tabContents > p:first-child{color: #815898;}


#extra .tokuten,
#mother .tokuten,
#dinner .tokuten,
#personal .tokuten{ margin: 100px auto 60px;}

#stay .room{margin: 20px 0 0;}

/*#extra,
#mother,
#dinner,
#personal{background:linear-gradient(180deg,#fff 0%,#fff 50%,#e7e8e8 50%,#e7e8e8 100%);}*/

#subplan{background: #838F99; padding: 130px 0 120px;}
#subplan .itemwrap{display: flex; justify-content: space-between; max-width: 1020px; margin: auto; font-size: 16px; line-height: 1.5em;}
#subplan h2{color: #fff; font-size: 28px; text-align: center;  margin: 0 0 25px;}
#subplan h3{color: #fff; font-size: 28px; margin: 27px 0 20px;}
#subplan h3 span{font-size: 18px; display: block; margin-bottom: 0.3em;}
#subplan .itemwrap div{position: relative; padding: 0 60px 110px;}
#subplan .itemwrap .img{width: 397px;}
#subplan .linkbtn{width: 290px;  position: absolute;   bottom: 0;
  left: 50%;
  transform:  translateX(-50%);
  -webkit- transform: translateX(-50%);}
  
#subplan .itemwrap .item01{border-right: 1px #fff dotted;}
#subplan .itemwrap .item02{}


/*add*/

.priceimg{width: 800px; margin: 50px auto 70px;}

#extra .txtlink,
#mother .txtlink,
#personal .txtlink,
#dinner .txtlink{ margin: 1em 0; }

#extra .txtlink a,
#mother .txtlink a,
#personal .txtlink a,
#dinner .txtlink a{color: #140302; font-size: 18px;}

#staynavi{background: #e8e8e9; padding: 150px 0;}
#staynavi>div{background: #838F99; font-size: 18px; color: #fff; max-width: 960px; padding:43px 55px; margin: auto;}
#staynavi h2{font-size: 32px; border-bottom: 3px solid #fff; margin: 0 0 35px;}
#staynavi ul{}
#staynavi li{line-height: 1.5em; margin-bottom: 5px; margin-left: 1.3em; padding-left: 0.2em;}
#staynavi li::before{content: '●'; margin-left: -1.5em; padding-right: 0.4em;}
#staynavi .subtxt{font-size: 0.8em; line-height: 1.5em;}
#staynavi a{color: #fff;}

.planbtn3{margin: 40px 0 0;}
.planbtn3 a{color: #fff; text-decoration: none; text-align: center; font-size: 16px; padding: 10px 0;
 display:block; max-width: 450px; margin: auto; border: #fff solid 1px; position: relative;  }
.planbtn3 a:hover{ background:#5F8597; opacity: 1;}
.planbtn3 a::after {
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
	width: 0;	
  border-top: 8px solid transparent;
  border-right: 8px solid #fff;
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
}
.planbtn3  span{font-size: 0.9em; display: block;}


/* 20210121追加 */

.okomorimenu{width: 430px; margin: 30px auto 0;}

#okomori{padding: 0 0 80px;}
#okomori .mv{}
#okomori h2{font-size: 35px; color: #E6418C; text-align: center; margin: 85px 0 35px;}
#okomori .lead{font-size: 21px; line-height: 1.8em; text-align: center; margin-bottom: 70px;}
#okomori .item01{max-width: 1100px; margin: auto; position: relative;}

#okomori .item01 .itm01{width: 730px; margin: auto; padding-left: 80px; display: flex; justify-content: flex-end; align-items: center;}
#okomori .item01 .itm01 .pict{width: 447px; }
#okomori .item01 .itm01 .txt{width: calc(100% - 447px); font-size: 21px; padding-left: 23px; line-height: 1.5em;}
#okomori .item01 .itm01 .tit{display: block; color: #43B5B3;  position: relative; padding-bottom: 10px;}
#okomori .item01 .itm01 .tit::before{content:'●'; position: absolute; left: -45px;}

#okomori .item01 .itm02{width: 360px; position: relative; left: 50px; top: -60px;}
#okomori .item01 .itm02 .pict{width: 360px;}
#okomori .item01 .itm02 .txt{font-size: 21px; line-height: 1.5em; margin:  -18px 0 0 50px}
#okomori .item01 .itm02 .tit{display: block; color: #805896;  padding-bottom: 10px;}
#okomori .item01 .itm02 .tit::before{content:'●'; display: block; padding-bottom: 5px;}

#okomori .item01 .itm03{width: 433px; position: absolute; right:50px; top: 352px;}
#okomori .item01 .itm03 .pict{width: 443px;}
#okomori .item01 .itm03 .txt{font-size: 21px; line-height: 1.5em; margin:  -18px 0 0 220px}
#okomori .item01 .itm03 .tit{display: block; color: #EC9B89;  padding-bottom: 10px;}
#okomori .item01 .itm03 .tit::before{content:'●'; display: block; padding-bottom: 5px;}

#okomori .item01 .itm04{width: 960px; margin: 87px 50px 0 0; position: relative; z-index: 10; display: flex; justify-content: flex-end; align-items: center;}
#okomori .item01 .itm04 .pict{width: 603px;}
#okomori .item01 .itm04 .txt{width: calc(100% - 603px); font-size: 21px; padding-left: 23px; line-height: 1.5em;}
#okomori .item01 .itm04 .tit{display: block; color: #E6418C;  position: relative; padding-bottom: 10px;}
#okomori .item01 .itm04 .tit::before{content:'●'; position: absolute; left: -45px;}
#okomori .item01 .itm04 .note{font-size: 13px;}


#okomori .item01 .itm05{width: 829px; position: relative; top: -30px; left: 150px; z-index: 0;}
#okomori .item01 .itm05 .pict{width: 829px;}

#okomori .item01 .itm06{twidth: 770px; display: flex; justify-content: flex-end; align-items: center;}
#okomori .item01 .itm06 .pict{width: 464px; }
#okomori .item01 .itm06 .txt{font-size: 21px; line-height: 1.5em; text-align: right; padding-right: 25px;}
#okomori .item01 .itm06 .tit{display: block; color: #009BDE; position: relative; padding-bottom: 10px;}
#okomori .item01 .itm06 .tit::after{content:'●'; position: absolute; right: -45px;}
#okomori .item01 .itm06 .note{font-size: 13px;}


#okomori .item01 .itm07{width: 447px; position: relative; z-index: 10;}
#okomori .item01 .itm07 .pict{width: 447px;}
#okomori .item01 .itm07 .txt{font-size: 21px; line-height: 1.5em; margin:  -18px 0 0 62px}
#okomori .item01 .itm07 .tit{display: block; color: #43B5B3; padding-bottom: 10px;}
#okomori .item01 .itm07 .tit::before{content:'●'; display: block; padding-bottom: 5px;}


#okomori .item01 .itm08{width: 630px; position: relative; top: -205px; left: 420px; z-index: 0; display: flex; justify-content: flex-end; align-items: center;}
#okomori .item01 .itm08 .pict{width: 378px;}
#okomori .item01 .itm08 .txt{width: calc(100% - 378px); font-size: 21px; padding-left: 23px; line-height: 1.5em;}
#okomori .item01 .itm08 .tit{display: block; color: #EC9B89;  position: relative; padding-bottom: 10px;}
#okomori .item01 .itm08 .tit::before{content:'●'; position: absolute; left: -45px;}

#okomori .item01 .itm09{width: 780px; margin: auto; padding-left: 80px; display: flex; justify-content: flex-end;}
#okomori .item01 .itm09 .pict{width: 319px; position: relative; top: -150px;}
#okomori .item01 .itm09 .txt{font-size: 21px; line-height: 1.5em; text-align: right; padding-right: 25px; z-index: 10;}
#okomori .item01 .itm09 .tit{display: block; color: #805896;  position: relative; padding-bottom: 10px;}
#okomori .item01 .itm09 .tit::after{content:'●'; position: absolute; right: -45px;}

#okomori .item01 .itm10{ position: relative; top: -50px; left:50px; z-index: 0; display: flex; justify-content: flex-end; align-items: center;}
#okomori .item01 .itm10 .pict{width: 380px;}
#okomori .item01 .itm10 .txt{width: calc(100% - 380px); font-size: 21px; padding-left: 23px; line-height: 1.5em;}
#okomori .item01 .itm10 .tit{display: block; color: #009BDE;  position: relative; padding-bottom: 10px;}
#okomori .item01 .itm10 .tit::before{content:'●'; position: absolute; left: -45px;}
#okomori .item01 .itm10 .note{font-size: 13px;}

#okomori .item01 .tit{font-size: 40px;}

#okomori .line{margin: 115px auto 100px; max-width: 963px;}

#okomori h3{font-size: 60px; text-align: center;}
#okomori h3 span{color: #43ADAB;}
#okomori .lead02{font-size: 21px; text-align: center; margin: 25px 0 40px;}
#okomori .item02{display: flex; justify-content: space-between; width: 963px; margin: auto;}
#okomori .item02 li{width: 300px; position: relative; padding-bottom: 80px; font-size: 18px; line-height: 1.6em;}

#okomori .item02 h4{ font-size: 36px; margin: 20px 0 15px; line-height: 1em;}
#okomori .item02 .itm01 h4{color: #009BDE;}
#okomori .item02 .itm02 h4{color: #E6418C;}
#okomori .item02 .itm03 h4{color: #805896;}
#okomori .item02 .linkbtn{position: absolute; bottom: 0; width: 100%;}
#okomori .item02 .linkbtn a{color: #fff; font-size: 22px; text-align: center; background: #ccc; border-radius: 8px; display: block; padding: 20px 0; text-decoration: none; box-shadow: 2px 2px 4px gray;}

#okomori .item02 .itm01 .linkbtn a{background: #009BDE;}
#okomori .item02 .itm02 .linkbtn a{background: #E6418C;}
#okomori .item02 .itm03 .linkbtn a{background: #805896;}


/*----------------------------------------------------

　バーガーメニュー 追加/予約ボタン

----------------------------------------------------*/
section#globalNavi{position: fixed;width:100%;top:0;left:0;z-index: 900;font-size: 20px;}

.reserve {
width: 100%;
background:#fff; 
margin-left: 0;
position: fixed;
/* 開いてないときは画面外に配置 */
top: -820px;
left: 0;
width: 100%;
text-align: center;
padding: 100px 0 0;
transition: .4s ease-in-out;
z-index: 600;
box-sizing: border-box;
}
.reserve h2{font-size: 24px;margin-bottom: 15px;}
.reserve h2:before{content: '';display: inline-block;background:url(../img/tel_icon_bk.png)0 0 no-repeat;width: 30px;height: 30px;background-size: contain;margin-bottom: -5px; }
.res_ctn{max-width: 1000px;width: 90%;color:#fff;background: #3e3a39;margin:0 auto 20px;}
.res_ctn h3{padding: 20px 0;border-bottom:1px solid #fff;}
.res_ctn p.tel{font-size:32px;padding: 20px 0;}
.res_ctn p.tel a{font-size:32px;color: #fff;}
.support{width: 100%;background:#717071;color:#fff;padding: 30px 0 50px;font-size: 20px;}
.support .lead{margin-bottom: 20px;line-height: 1.3;}
.sup_ctn{max-width: 1000px;width: 90%;color:#fff;background: #3e3a39;margin:0 auto 30px;padding:20px 0;}
.sup_ctn p.tel{font-size:32px;margin-bottom: 20px;}
.sup_ctn p.tel a{font-size:32px;color: #fff;}
.res_ctn p.tel:before,.sup_ctn p.tel:before{content: '';display: inline-block;background:url(../img/tel_icon_wh.png)0 0 no-repeat;width: 30px;height: 30px;background-size: contain;margin-bottom: -5px; }
.sup_ctn p.lang{margin-bottom: 5px;}
.pr_res{max-width: 1000px;width: 90%;margin: 0 auto;}
.pr_res h3{margin-bottom: 20px;}
.pr_res ul li{text-align:left;text-indent: -1em;padding-left: 1em;line-height: 1.3;font-size: 17px;}
.reserve .contact a{color: #fff;text-decoration: underline;}
.reserve .contact{width: 400px;margin: 30px auto 0; display: flex;justify-content: space-between;flex-wrap: wrap;}
@media(max-width: 768px){
	.reserve h2{font-size: 17px;margin-bottom: 10px;}
	.reserve h2:before{width: 20px;height: 20px;background-size: contain;margin-bottom: -5px;}
	.res_ctn{margin:0 auto 10px;}
	.res_ctn h3{padding: 12px 0;border-bottom:1px solid #fff;font-size: 12px;}
	.res_ctn p.tel{font-size:24px;padding: 10px 0;}
	.res_ctn p.tel a{font-size:24px;}
	.support{width: 100%;background:#717071;color:#fff;padding: 15px 0 40px;font-size: 12px;}
	.support .lead{margin-bottom: 20px;line-height: 1.3;}
	.sup_ctn{margin:0 auto 20px;padding:10px 0;}
	.sup_ctn p.tel{font-size:24px;margin-bottom: 10px;}
	.sup_ctn p.tel a{font-size:24px;}
	.res_ctn p.tel:before,.sup_ctn p.tel:before{width: 20px;height: 20px;margin-bottom: -2px; }
	.pr_res h3{margin-bottom: 10px;font-size:14px;}
	.support .lead{margin-bottom: 10px;font-size:14px;}
	.pr_res ul li{font-size: 12px;}
	.reserve .contact a{font-size: 14px;}
	.reserve .contact{width: 300px;margin: 30px auto 0;}
}

#fix_head {position: fixed;display: flex;justify-content: space-between;max-width: 540px;width: 540px;height: 55px;padding:5px;z-index:1000;top:0;right:0;}
#fix_head a{position: relative;font-size: 18px;display: block;background:#1d1d1c;text-align:center;width:49%;color: #fff;padding: 17px 0; }
#fix_head a:before{content: '';display: inline-block;background:url(../img/bed_icon.png)0 0 no-repeat;width: 26px;height: 23px;background-size: contain;margin-bottom: -7px;margin-top: 1px;margin-right: 5px;}
#fix_head .arrow{position: absolute;width: 16px;right: 10px;top:20px;}
@media(max-width: 768px){
	#fix_head {width: calc(100% - 60px);height: 50px}
	#fix_head a{font-size:13px;padding: 12px 0; }
	#fix_head a:before{width: 22px;height: 20px;margin-bottom: -8px;margin-top: 6px;margin-right: 5px;}
	#fix_head .arrow{display: none;}
}

/* ----- オープンボタン ----- */

#nav-toggle {
  width: 49%;
  cursor: pointer;
  z-index: 9999;
  background:#dadad9;
  text-align:center;
  padding: 13px 0;
  position: relative; 
}
#nav-toggle p{font-size: 18px;}
#nav-toggle:hover {opacity: 0.8;}
#nav-toggle p:before {content: '';display: inline-block;background:url(../img/tel_icon_bk.png)0 0 no-repeat;width: 23px;height: 23px;background-size: contain;margin-bottom: -4px;margin-top: -2px; }

#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: none;
    position: absolute;
    height: 2px;
    width: 30px;
    border-radius: 0;
    background: #3e3a39;
    left: 50%;
    margin-left: -15px;
    transition: .3s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 10px;}
#nav-toggle span:nth-child(3) {top: 20px;}

@media(max-width: 768px){
	#nav-toggle{padding: 8px 0;}
	#nav-toggle p{font-size: 13px;}
	#nav-toggle p:before {width: 20px;height: 20px;margin-bottom: -5px;margin-top: 3px; }
	#nav-toggle span {width:24px;margin-left: -12px;}
	#nav-toggle:hover {opacity: 1;}
}

.open #nav-toggle span:nth-child(1) {
top: 10px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
display: block;
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
display: block;
}
.open #nav-toggle span:nth-child(3) {
top: 10px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
display: block;
}
.open #nav-toggle p, .open #nav-toggle img{display: none;}

@media(max-width: 768px){
	.open #nav-toggle span:nth-child(1),.open #nav-toggle span:nth-child(3){
		top:12px;
	}
}

/* スライドアニメーション */
.open .reserve {
  /* #global-nav top + #mobile-head height */
  -moz-transform: translateY(790px);
  -webkit-transform: translateY(790px);
  transform: translateY(790px);
  }
  .fixed{position: fixed;}
  
  @media(min-width: 768px){
    a[href^="tel:"]{
      pointer-events: none;
    }
  }





@media screen and (max-width: 768px){

.okomorimenu{width: 90%; margin: 30px auto 0;}


#okomori h2{font-size: 22px;  margin: 40px 0 20px;}
#okomori .lead{font-size: 15px; line-height: 1.4em;  margin-bottom: 30px;}


#okomori .item01 .itm01{width: 95%; margin: auto; padding-left: 0px;}
#okomori .item01 .itm01 .pict{width:50%;}
#okomori .item01 .itm01 .txt{width: 40%; padding-left: 10px;}
#okomori .item01 .itm01 .tit::before{content:'●'; position: absolute; left: -25px;}

#okomori .item01 .itm02{width: 40%; position: relative; left: 10px; top: -10px;}
#okomori .item01 .itm02 .pict{width: 100%; }
#okomori .item01 .itm02 .txt{margin:-10px 0 0 8px;}

#okomori .item01 .itm03{width: 50%; position:relative; right:-50%; top: -140px; }
#okomori .item01 .itm03 .pict{width: 90%; }
#okomori .item01 .itm03 .txt{margin:-10px 0 0 20px;}

#okomori .item01 .itm04{width: 98%; margin: -120px 0 0; position: relative; z-index: 10;}
#okomori .item01 .itm04 .pict{width:50%;}
#okomori .item01 .itm04 .txt{width: 50%; padding-left: 10px;}
#okomori .item01 .itm04 .tit::before{content:'●'; position: absolute; left: -25px;}
#okomori .item01 .itm04 .note{font-size: 11px;}

#okomori .item01 .itm05{width: 95%; position: relative; top: -10px; left: 5%; z-index: 0;}

#okomori .item01 .itm06{text-align: right; margin-bottom: 10px}
#okomori .item01 .itm06 .pict{width:50%;}
#okomori .item01 .itm06 .txt{padding-right: 15px;}
#okomori .item01 .itm06 .tit::after{content:'●'; position: absolute; right: -30px;}

#okomori .item01 .itm07{width: 95%; position: relative; z-index: 10; top: 20px; display: flex; align-items: center;}
#okomori .item01 .itm07 .pict{width:55%;}
#okomori .item01 .itm07 .txt{margin: -10px 0 0 10px}
#okomori .item01 .itm07 .tit{position: relative;}
#okomori .item01 .itm07 .tit::before{content:'●'; position: absolute; left: -25px;}

#okomori .item01 .itm08{width: 90%; position: relative; top: 10px; left: 5%; z-index: 0;}
#okomori .item01 .itm08 .pict{width:60%;}
#okomori .item01 .itm08 .txt{width: 40%; padding-left: 10px;}
#okomori .item01 .itm08 .tit{display: block; color: #EC9B89;  position: relative; padding-bottom: 10px;}
#okomori .item01 .itm08 .tit::before{content:'●'; position: absolute; left: -25px;}

#okomori .item01 .itm09{width: 90%; position: relative; bottom: 0; right: 0%; top: 30px; align-items: center;}
#okomori .item01 .itm09{padding-left: 0px; display: flex; justify-content: flex-end;}
#okomori .item01 .itm09 .pict{width: 40%; position: relative; top: 0px;}
#okomori .item01 .itm09 .txt{width: 60%; padding-right: 15px; z-index: 10;}
#okomori .item01 .itm09 .tit{display: block; color: #805896;  position: relative; padding-bottom: 10px;}
#okomori .item01 .itm09 .tit::after{content:'●'; position: absolute; right: -25px;}

#okomori .item01 .itm10{width: 90%; position: relative; top: 10px; left: 5%; z-index: 0;}
#okomori .item01 .itm10 .pict{width:40%;}
#okomori .item01 .itm10 .txt{width: 60%; padding-left: 10px; padding-top: 40px;}
#okomori .item01 .itm10 .tit{display: block; position: relative; padding-bottom: 10px;}
#okomori .item01 .itm10 .tit::before{left: -25px;}
#okomori .item01 .itm10 .note{font-size: 11px;}

#okomori .item01 .itm01 .txt,
#okomori .item01 .itm02 .txt,
#okomori .item01 .itm03 .txt,
#okomori .item01 .itm04 .txt,
#okomori .item01 .itm06 .txt,
#okomori .item01 .itm07 .txt,
#okomori .item01 .itm08 .txt,
#okomori .item01 .itm09 .txt,
#okomori .item01 .itm10 .txt{font-size: 12px;}

#okomori .item01 span.tit{font-size: 25px;}


#okomori .line{margin: 50px auto 50px; max-width: 90%;}

#stay #okomori h3{font-size: 38px; width: 100%;}
#okomori .lead02{font-size: 16px;}
#okomori .item02 h4{ font-size: 30px;}

#okomori .item02{display: block; justify-content: space-between; width: 95%; margin: auto;}
#okomori .item02 li{width: 100%; position: relative; padding-bottom: 80px; font-size: 14px; margin-bottom: 50px;}

}




@media screen and (max-width: 768px){

.priceimg{width: 90%; margin: 20px auto 30px;}

#extra .txtlink,
#mother .txtlink,
#personal .txtlink,
#dinner .txtlink{ margin: 1em 20px;}
#extra .txtlink a,
#mother .txtlink a,
#personal .txtlink a,
#dinner .txtlink a{font-size: 13px;}

#staynavi{padding: 70px 0;}
#staynavi>div{padding:43px 20px; }
#staynavi h2{font-size: 23px; text-align: center; padding-bottom: 0.5em;}
.planbtn3 a{font-size: 14px; line-height: 35px; display:block; max-width: 80%;}
}
/**/


li.tab001{background: url("../img/stay/extra_list01_on.png") no-repeat left top; background-size: auto 100%;}
li.tab002{background: url("../img/stay/extra_list02_on.png") no-repeat left top; background-size: auto 100%;}
li.tab003{background: url("../img/stay/extra_list03_on.png") no-repeat left top; background-size: auto 100%;}
li.tab004{background: url("../img/stay/extra_list04_on.png") no-repeat left top; background-size: auto 100%;}


li.tab005{background: url("../img/stay/mother_list01_on.png") no-repeat left top; background-size: auto 100%;}
li.tab006{background: url("../img/stay/mother_list02_on.png") no-repeat left top; background-size: auto 100%;}


li.tab007{background: url("../img/stay/dinner_list01_on.png") no-repeat left top; background-size: auto 100%;}
li.tab008{background: url("../img/stay/dinner_list02_on.png") no-repeat left top; background-size: auto 100%;}

li.tab009{background: url("../img/stay/personal_list01_on.png") no-repeat left top; background-size: auto 100%;}
li.tab010{background: url("../img/stay/personal_list02_on.png") no-repeat left top; background-size: auto 100%;}
li.tab011{background: url("../img/stay/personal_list03_on.png") no-repeat left top; background-size: auto 100%;}



/*tab_new*/
.tabContents {
  display: none;
  text-align: center; font-size: 21px; line-height: 1.5em; background: #fff;
}
.tabContents.active,
.tabContents.active2,
.tabContents.active3,
.tabContents.active4{
  display: block;
}

.tab,.tab02,.tab03,.tab04{display: flex; justify-content:center; flex-wrap: wrap; max-width: 960px; margin: auto;}

.tab li,
.tab02 li,
.tab03 li,
.tab04 li{max-width: 220px; position: relative; margin-left: 15px;}
.tabContents{
max-width: 870px; 
height: auto;
overflow: auto;
padding: 45px 15px;
margin: 25px auto 0;
opacity: 1;
transition: .5s opacity;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

}

.tab li.active img,
.tab02 li.active2 img,
.tab03 li.active3 img,
.tab04 li.active4 img{opacity: 0;}

.tab li.active::after,
.tab02 li.active2::after,
.tab03 li.active3::after,
.tab04 li.active4::after{
bottom: -30px;
    left: 40%;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;	
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #fff;}

@media screen and (max-width: 768px){
.tab li,
.tab02 li,
.tab03 li,
.tab04 li{max-width:calc((100% - 30px) / 4); margin-left: 5px;}
}


#mother .price .sub{font-size: 20px; display: block; line-height: 1em; margin:  -0.5em 0 0;}


/*footer*/
footer div{ padding: 160px 0 80px;}
footer .txtlink{margin: 40px 0 0;}
footer .txtlink a{ color: #fff;  text-decoration: none; font-size: 20px; max-width: 450px; border: 1px solid #fff; padding: 5px; display: block; margin:0 auto 30px;}
footer .txtlink a:hover{text-decoration: underline;}

footer .planbtn{margin-bottom: 30px; }
footer .planbtn a{color: #fff; text-decoration: none; text-align: center; font-size: 20px;
line-height: 70px; display:block; max-width: 450px; margin: auto; border: #fff solid 2px; position: relative;  }
footer .planbtn a:hover{ background:#5F8597; opacity: 1;}
footer .planbtn a::after {
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
	width: 0;	
  border-top: 10px solid transparent;
  border-right: 10px solid #fff;
  border-bottom: 10px solid #fff;
  border-left: 10px solid transparent;
}

footer .planbtn2{margin-bottom: 30px; }
footer .planbtn2 a{color: #fff; text-decoration: none; text-align: center; font-size: 16px;
line-height: 50px; display:block; max-width: 450px; margin: auto; border: #fff solid 1px; position: relative;  }
footer .planbtn2 a:hover{ background:#5F8597; opacity: 1;}
footer .planbtn2 a::after {
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
	width: 0;	
  border-top: 8px solid transparent;
  border-right: 8px solid #fff;
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
}


@media screen and (max-width: 768px){
footer div{ font-size: 0.8em;}
footer div{ padding: 80px 0 40px;}

footer .planbtn a,
footer .planbtn2 a{font-size: 14px; line-height: 35px; display:block; max-width: 80%;}
footer .txtlink a{font-size: 14px; max-width: 80%;}
}



/**/


@media screen and (max-width: 768px){
main{overflow: hidden;}

/*#stay #lead h2{width: 100%; margin: 40px 0 0;}*/
#stay #lead h2{width: 100%; margin: 0px 0 0;}

/*txt*/
#stay #lead  h1{ font-size: 14px; text-align: center;}
#stay #lead  h2 {font-size: 1.8em; line-height: 1.2; text-align: center;}
#stay #lead  h2 span{color: #E6418C;}


/* #stay h3{width: 50%;} */

#stay #lead .leadlist1{display: block; margin: 40px auto 0;}
#stay #lead .leadlist1 li{width:100%;}
#stay #lead .data{font-size: 20px; margin: 0 0 30px;}
#stay #lead .txt{font-size: 16px;}


/*#extra h2,
#dinner h2,
#mother h2,
#personal h2{ margin: 0 auto 20px;}*/

#stay .blf{padding: 0 0 0;}
#stay .blf2{padding: 0 0 0;}


#extra h2{left: 0%; width: 65%; margin: 50px 0 10px;} 
#extra h2 p{width: 100%; font-size: 36px; top: -35px;}

#dinner h2{left: 0%; width: 43%; margin: 50px 0 10px;} 
#dinner h2 p{width: 100%; font-size: 36px; top: -35px;  text-align: right;}


#mother h2{right: 0%; width: 70%; margin: 50px 0 10px;} 
#mother h2 p{width: 100%; font-size: 36px; top: -35px; text-align: right;}

#personal h2{left: 0%; width: 80%; margin: 50px 0 10px;} 
#personal h2 p{width: 100%; font-size: 36px; top: -35px; text-align: right;}



#extra{ padding: 50px 0 0;
background-position: left 450px,left 800px; }
#dinner{
background-position: left 450px,left 800px; }
#mother{
background-position: left 340px,left 660px;; }
#personal{
background-position: left 450px,left 800px; }



#extra article .img01{display: none;}
#extra article .img02{position: relative; top: 0;}

#extra article .txt,
#mother article .txt,
#dinner article .txt,
#personal article .txt{font-size: 16px;}


#extra .plan01,
#mother .plan01,
#dinner .plan01,
#personal .plan01{font-size:19px;}

#extra .price,
#mother .price,
#dinner .price,
#personal .price{ font-size: 40px;}

#extra .price span,
#mother .price span,
#dinner .price span,
#personal .price span{ font-size: 22px;}

#extra .room,
#mother .room,
#dinner .room,
#personal .room{font-size:16px;}

#extra article .txt p{padding: 0 0 0 10px;}
#dinner article .txt p{padding: 0 0 0 10px;}

.tabContents{font-size: 16px; padding:25px 0px; margin: 15px auto 0;}
.tab li.active::after,
.tab02 li.active2::after,
.tab03 li.active3::after,
.tab04 li.active4::after{
bottom: -20px;
    left: 40%;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;	
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #fff;}


#extra .linkbtn,
#mother .linkbtn,
#dinner .linkbtn,
#personal .linkbtn{width: 225px;}

#mother article .img01{padding-top:25px;}
#dinner article .img01{padding-top:25px; top: 0; margin-left: 65px;}
#personal article .img01{padding-top:25px;}

#stay .scene{margin-top: 30px;}
#stay #dinner .scene{margin-top: 30px;}
#stay #personal .scene{margin-top: 30px;}

#mother article .txt{position: relative; top: 0;}



/*#dinner article .img01{position: relative;}*/
#dinner article .txt{position: relative; right: 0; top: 0;}
#dinner article .txt p{padding-left: 10px;}

#personal article .img01{position: relative;}
#personal article .txt{position: relative;}


/*#extra .tokuten{ margin:  60px auto 60px;}*/

#extra .tokuten,
#dinner .tokuten,
#personal .tokuten{ display: block; margin:  30px auto 50px;}


#mother .tokuten{display: block; margin:  30px auto 60px; }

#mother .tokuten {max-width: 80%;}
#mother .tokuten li:first-child,
#mother .tokuten li:last-child,
#mother .tokuten li{width: 100%;}


/*#mother .tokuten li{float: left; width:calc((100% - 40px) / 2);}
#mother .tokuten li:first-child{width: calc(100% - 20px); float: none;}
#mother .tokuten::after{  content: "";  display: block;  clear: both;}
#mother .tokuten li:last-child{width:calc((100% - 40px) / 2);}
  */

#extra .tokuten li:first-child,
#extra .tokuten li:last-child,
#extra .tokuten li{width: 80%; margin: 50px auto 0;}
#extra .tokuten dt{ width: 50px; height: 50px;  border-radius: 50%; font-size: 20px;}  
#extra .tokuten dt span{font-size: 12px; padding: 10px 0 0px;}
#extra .tokuten dd{font-size: 16px; padding:25px 0 20px; line-height: 1;}
#extra .tokuten dd span{font-size: 14px;}
#extra .tokuten dd span.min{font-size: 11px;}

#mother .tokuten li{margin: 50px 0px 0;}
#mother .tokuten dt{ width: 50px; height: 50px;  border-radius: 50%; font-size: 20px;}  
#mother .tokuten dt span{font-size: 12px; padding: 10px 0 0px;}
#mother .tokuten dd{font-size: 16px; padding:25px 0 20px; line-height: 1;}
#mother .tokuten dd span{font-size: 14px;}

#dinner .tokuten li{width:80%; margin: 50px auto 0;}
#dinner .tokuten dt{ width: 50px; height: 50px;  border-radius: 50%; font-size: 20px;}  
#dinner .tokuten dt span{font-size: 12px; padding: 10px 0 0px;}
#dinner .tokuten dd{font-size: 16px; padding:25px 0 20px; line-height: 1;}
#dinner .tokuten dd span{font-size: 14px;}


#personal .tokuten li{width:80%;  margin: 50px auto 0;}
#personal .tokuten dt{ width: 50px; height: 50px;  border-radius: 50%; font-size: 20px;}  
#personal .tokuten dt span{font-size: 12px; padding: 10px 0 0px;}
#personal .tokuten dd{font-size: 16px; padding:25px 0 20px; line-height: 1;}
#personal .tokuten li .mini{font-size: 16px;}
#personal .tokuten dd span{font-size: 14px; padding: 10px 0 0px;}


/**/
#subplan{padding: 70px 0 80px;}
#subplan .itemwrap{display: block;  max-width: 95%; margin: auto; font-size: 16px; line-height: 1.5em;}

#subplan h3{width: 100%;}

#subplan .itemwrap div{position: relative; padding: 0 0 110px;}
#subplan .itemwrap .img{width: 100%;}
#subplan .linkbtn{width: 95%;  position: absolute;   bottom: 0;
  left: 50%;
  transform:  translateX(-50%);
  -webkit- transform: translateX(-50%);}
 
#subplan .itemwrap .item01{border-right:none; /*border-bottom: 1px #fff dotted;*/ margin-bottom: 60px;}
#subplan .itemwrap .item02{}


}