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



/*ボタン*/

.btnlink{ background : #F2FDFC; border: solid 1px #00D1C4; height: 68px; text-align: center; width: 550px; margin: auto; position: relative;}
.btnlink a{line-height: 68px; width: 100%; font-size : 21px;  color:#00D1C4; display: block;}
.btnlink a:hover{background: rgba(0,209,196,.80); color: #fff;}

.btnlink::after{content: ''; display: inline-block; height: 17px; width: 17px; background-image:url("../img/btnlink.png"); background-size: 100%; position: absolute; right: -1px; bottom: -1px;}

.btnlink2{ background : #00D1C4;  height: 102px; text-align: center; width: 340px; margin: auto;}
.btnlink2 a{line-height: 102px; width: 100%; font-size : 23px;  color:#fff; display: inline-block;}
.btnlink2 a:hover{background: #fff; color:#00D1C4; border: 1px solid #00D1C4;}


/*a{color: #00b1b9;}*/

/*h1 mv*/

h1{width: 650px;margin: auto;}
#hero{}
#hero .box{position: relative; max-width: 1100px; margin: 0 auto 60px;}
#hero .pict1{width: 382px; position: absolute; top: 0; left: 0; z-index: 10;}
#hero .pict2{width: 1010px; position: relative; z-index: 0;}


#hero .pict1{ 
  opacity: 0;
  animation-name:into;
  animation-duration:5s; 
  animation-fill-mode: forwards;}
@keyframes into {
0% {
 opacity: 0;
  -ms-filter: blur(6px);
  filter: blur(6px);
  transform: scale(0.8);
}
  100%{
    opacity: 1;
  -ms-filter: blur(0px);
  filter: blur(0px);
  transform: scale(1);
  }
}

#hero .pict2{ 
  opacity: 0;
  animation-name:into2;
  animation-duration:7s; 
  animation-fill-mode: forwards;}
@keyframes into2 {
0% {
 opacity: 0;
  -ms-filter: blur(10px);
  filter: blur(10px);
  transform: scale(0.8);
}
  100%{
    opacity: 1;
  -ms-filter: blur(0px);
  filter: blur(0px);
  transform: scale(1);
  }
}

/*タブレット縦・スマホ横*/
@media screen and (max-width: 1024px){

.btnlink a{font-size: 18px;}

}


/*スマホ縦*/
@media screen and (max-width: 480px){

.btnlink{ height: 58px;  width: 90%; }
.btnlink a{line-height: 58px; width: 100%; font-size : 12px;  color:#00D1C4; display: block;}


.btnlink2{ background : #00D1C4;  height: 51px; text-align: center; width: 48%; margin: auto;}
.btnlink2 a{line-height: 51px; width: 100%; font-size : 14px;  color:#fff; display: inline-block;}

h1{width: 78%; padding-top: 50px;}
#hero .box{overflow: hidden;}
#hero .pict1{width: 40%; left: 1%;}
#hero .pict2{width: 99%;}

}

/**/

#top_lead{padding: 0 0 107px;}
#top_lead>p{  font-size : 23px;  line-height : 45.35px; text-align: center; padding-bottom: 35px;}

/**/
#intro{font-size : 19px; line-height: 42px; display: flex; justify-content: center; flex-direction: row-reverse; background : #DEFFEA; padding: 65px 0 45px;}
#intro h2{ /* font-size : 40px; color : #00D1C4; line-height: 1.8em;*/ width: 415px; margin: 50px 0  ;}

#intro .txt{margin-left: 60px;}
#intro .pict{width: 240px;}


/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#intro{display: block; font-size: 14px; line-height: 1.6em; padding: 40px 0 20px;}
#intro .txt{margin: auto; width: 77%;}
#intro h2{width: 100%; margin: 0 0 40px;}
#intro .pict{width: 95%; display: flex; margin: 25px auto 0;}
#intro .pict P{width: 33%;}

#top_lead{padding: 0 0 50px;}
#top_lead>p{font-size: 14px; line-height: 1.4em;}

}


/**/
#beginner{text-align: center; padding: 30px 0 120px;}
#beginner h2{width: 632px; margin: auto;}
/*#beginner .box{display: flex; justify-content: center;}
#beginner .box .pict{width: 534px; }
#beginner .box .txt{width: 360px; font-size : 20px;  line-height : 39.69px;}*/
#beginner .box .txt{padding-bottom: 75px;}
#beginner .box{font-size : 20px;  line-height : 39.69px;}

#beginner h3{font-size: 45px; color : #00D1C4; font-family: gill-sans-nova, sans-serif;font-weight: 500; text-align: center; margin-bottom: 20px;}
#beginner #point{display: flex; justify-content: space-between; width: 945px; margin: auto;}
#beginner #point li{width: calc((100% - 60px)/4); font-size: 17px;}
#beginner #point li span{font-size: 22px; color : #00D1C4; display: block; padding-top: 15px;}
#beginner #point .txt{padding: 15px 0 50px;}

#beginner .staytit{font-size: 25px; margin: 0 0 20px;}
#beginner .day{font-size : 25px; color : #00D1C4; margin: 0 0 35px;}
#beginner .price{ }
#beginner .price .data{font-size : 17px; margin-bottom: 15px;}
#beginner .price .data2{ font-size : 24px; line-height: 36px; margin-bottom: 35px;}
#beginner .price .data2 span{color : #00D1C4;}
#beginner .note1{font-size : 17px; margin-bottom: 85px;}
#beginner .note2{font-size : 13px; margin-top: 40px;}

#beginner .line{width: 820px; margin: 80px auto;}

#beginner .fst{margin: 0 auto 25px;}


/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#beginner{padding: 30px 0 60px;}
#beginner .box{font-size: 14px; line-height: 1.4em;}
#beginner h2{width: 70%; }
#beginner #point{width: 85%; flex-wrap: wrap;}
#beginner #point li{width: calc((100% - 20px)/2);}
#beginner #point li:nth-child(1),
#beginner #point li:nth-child(3){margin-right: 20px;}
#beginner .line{width: 100%; margin: 40px auto;}

#beginner #point li{font-size: 12px;}
#beginner #point li span{font-size:13px; padding-top: 8px;}

#beginner .day{font-size: 18px;}
#beginner .price .data{font-size: 13px; }
#beginner .price .data2{font-size: 17px; line-height: 1.4em;}

#beginner .note1{font-size: 13px; margin-bottom:45px;}

#beginner .box .txt{ width: 85%; margin: auto;}

}


/**/
#usio{text-align: center; padding: 45px 0 75px; background : #DEFFEA;}
#usio h2{width: 495px; margin: auto;}
#usio .lead{  font-size : 22px;  line-height : 36.85px; text-align: center; margin-bottom: 30px;}
#usio .box{background: #fff; width: 945px; margin: 0 auto 65px; padding: 60px 0; border-radius: 15px;}

#usio #mans li:last-child,
#usio #woman li:last-child{ margin-left: 25px;}

#usio #mans,
#usio #woman{width: 845px; margin: auto; display: flex; text-align: left;}
#usio .pict{width: 600px;}
#usio .data{width: 202px; margin-top: 15px;}
#usio h3{font-size : 22px; color : #00D1C4; margin-bottom: 15px; font-feature-settings: "palt";}
#usio .txt01{line-height: 25px; font-size: 15px;}

#usio .day_bnr{width: 640px; margin: auto;}
#usio .day_bnr_cup{font-size: 17px; margin: 10px 0 0;}
#usio .txt01{font-size : 17px;  line-height : 25.51px;}
#usio .txt02{ font-size : 20px; margin: 15px 0 75px;}
#usio .txt03{  font-size : 13px;  line-height : 22.68px;}

#usio #mans{margin-bottom: 53px;}
#usio #woman{margin-bottom: 77px;}


/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#usio h2{width: 60%;}
#usio .box{width: 90%; padding: 15px 5%;}
#usio #mans, #usio #woman{flex-direction: column-reverse; flex-wrap: wrap; width: 100%; margin-bottom: 10px;  }
#usio #woman{margin-top: 30px;}

#usio #mans li, #usio #woman li{width: 100%; }
#usio .data{display: none;}
#usio .day_bnr{width: 100%; margin-top: 20px;}
#usio #mans li:last-child, #usio #woman li:last-child{margin-left: 0;}

#usio .lead{font-size: 13px; line-height: 1.4em;}
#usio h3{ font-size: 22px; margin-bottom: 5px; }
#usio .txt01{font-size: 13px; line-height: 1.4em; margin-bottom: 10px;}
#usio .day_bnr_cup{font-size: 13px; margin: 10px 0 0;}
#usio .txt02{margin: 15px 0 35px;}
}

/**/

#totonoi{padding: 85px 0; background : #DEFFEA;}
#totonoi h2{ width: 590px; margin: auto;}
#totonoi .lead{font-size : 23px; margin-bottom: 40px; text-align: center;} 
#totonoi .box{display: flex; flex-wrap: wrap; justify-content: space-between; width: 970px; margin: auto;}
#totonoi .box li{width: calc((100% - 20px)/3); margin: 0 0 40px;}
#totonoi .box h3{color : #00D1C4;  font-size : 20px; margin: 10px 0; line-height: 25px;}
#totonoi .box h3 span{ font-size : 16px;}
#totonoi .box p{font-size : 14px; line-height : 25px; }
#totonoi .box p.pict img{border-radius: 15px;}

#totonoi .txt01{font-size : 22px; margin: 0 0 45px; text-align: center;}
#totonoi .cming{font-size : 45px; font-family: gill-sans-nova, sans-serif; text-align: center; margin: 0 0 45px;}
#totonoi .plan{text-align: center; margin: 40px 0 0; line-height: 25px;}
#totonoi a{color: #00b1b9; text-decoration: underline;}
#totonoi .btnlink a{text-decoration: none;}
#totonoi .btnlink a:hover{color: #fff;}

/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#totonoi {padding: 45px 0;}
#totonoi .box{width: 90%;}
#totonoi h2{width: 81%;}
#totonoi .lead{font-size: 14px;}
#totonoi .box li{width: calc((100% - 20px)/2); margin: 0 0 40px;}
#totonoi .box h3{font-size: 15px;}
#totonoi .box h3 span{font-size: 11px;}
#totonoi .box p{font-size: 12px; line-height: 1.6em;}
#totonoi .txt01{font-size: 15px;}
#totonoi .plan{font-size: 15px;}

#totonoi .cming{font-size: 25px;}
}

/**/
#foods{/*background : #DEFFEA;*/ padding: 40px 0 70px;}
#foods h2{width: 830px; margin: auto;}
#foods .lead{text-align: center; font-size : 22px; line-height: 26px; margin-bottom: 60px;}
#foods .box{display: flex; justify-content: space-between; width: 955px; margin: 0 auto 45px; }
#foods .box li{width: 470px;}
#foods .note{font-size : 13px; line-height : 19.84px; text-align: center; margin: 30px 0 0;}
#foods h3{color : #00D1C4; font-size : 24px; margin:  0 0 20px; font-weight: 500;}
#foods .box li .txt{padding: 0 10px 0;}
#foods .box .point{ font-size : 16px; line-height : 19.84px;  line-height : 26px;}
#foods .box .point ul{margin: 10px 0 0;}
#foods .box .point li{ padding-left: 1.4em;}
#foods .box .point li::before{content: '●';  margin-left: -1.2em; padding-right: 0.1em; color : #00D1C4;}

/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#foods h2{width: 100%;}
#foods .box{width: 90%;}
#foods .box li{width: 50%;}
#foods .point li{width: 100%;}
#foods .lead{font-size: 14px;}
#foods h3{font-size: 15px;}
#foods .box .point{font-size: 12px; line-height: 1.4em}

}


/**/

#story{padding: 50px 0 115px; border-bottom: #00D1C4 solid 3px;}
#story h2{width: 496px; margin: 0 auto 20px;}
#story .lead{text-align: center; font-size : 20px;
  line-height : 36.85px;}
#story .box{display: flex; justify-content: space-between; width: 950px; margin: 50px auto 0;}
#story .box li:first-child{width: 525px;}
#story .box li:last-child{width: 400px; margin-left: 20px;}
#story .box li p{margin-bottom: 18px; line-height:1em;  display: flex; align-items: center;}

#story .btnlink2 a{line-height:1em; font-size: 24px; height: 102px; display: flex; justify-content: center; align-items: center;}
/*#story .box li p a{line-height:1em; font-size: 24px;}*/
#story .btnlink2 a span.sup{font-size: 20px; display: block; color: #fff;}
/*#story .box li p a span{font-size: 20px; display: block; color: #fff;}*/
#story .btnlink2 a i{font-style: normal;}

#story .box li p.btnlink2 a:hover span{ color:#00D1C4;}
#story .box li p.nolink{background: #cdcdcd; pointer-events: none;}
#story .note{text-align: center; font-size: 12px;}

#story .tokuten{margin: 30px 0; text-align: center; font-size: 18px;}


/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#story{padding: 50px 0 30px;}
#story .lead{font-size: 14px; line-height: 26px;}
#story .box{width: 90%; display: block;}
#story .box li:first-child{width: 100%; margin-bottom: 20px;}
#story h2{width: 75%;}
#story .box li:last-child{width: 100%; margin-left: 0;}

#story .btnlink2 a{font-size: 12px; height: 100%;}
#story .btnlink2 a span.sup{font-size: 12px; }

}


/**/
#story2{padding: 120px 0 100px;}
#story2 .box{display: flex; justify-content: space-between; width: 825px; margin: auto;}
#story2 .box li{width: calc(100% - 425px);}
#story2 .box li:first-child{width: 375px;}

#story2 .inbox{position: relative; padding: 105px 0 0;}
#story2 .inbox .plan{position: absolute; top: -40px; right: 10px; width: 181px; z-index: 0;}
#story2 h3{font-size: 30px; font-weight: 400; letter-spacing: 0.01em; margin: 0 0 20px; z-index: 5; position: relative;}
#story2 p.txt{font-size : 20px;  line-height : 28.35px;  letter-spacing : 0.4px;  color : #3C3C3C;}

#story2 .prof{ display: flex; justify-content: space-between; width: 850px; margin: 55px auto 57px;}
#story2 .prof .box1,
#story2 .prof .box2{width: 50%;}

#story2 .prof .name{font-size: 20px;}
#story2 .prof .katagaki{font-size: 15px; margin: 10px 0;}
#story2 .prof .txt{font-size: 14px;}

#story2 a.unline{text-decoration: underline; color: #000;}
#story2 .note{  font-size : 16px;  line-height : 24.09px;}
#story2 .prof a{color: #00b1b9; text-decoration: underline;}



/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#story2{padding: 60px 0 50px;}
#story2 .box {width: 90%;}
#story2 .box li:first-child{width: 40%;}
#story2 .prof{width: 90%; display: block; margin: 25px auto;}
#story2 .prof .box1, #story2 .prof .box2{width: 100%; margin-bottom: 20px;}
#story2 .inbox{padding: 35px 0 0;}

#story2 .inbox .plan{width: 90px; top: -40px; right: 0px;}
#story2 .box li{width: 56%;}
#story2 .prof .txt{font-size: 11px;}

#story2 h3{font-size: 15px; margin: 0 0 5px;}
#story2 p.txt{font-size: 11px; line-height: 1.4em;}
#story2 .note{font-size: 11px;}

#story2 .prof .name{font-size: 14px;}
#story2 .prof .katagaki{font-size: 12px;}
}



/**/
#safety{background : #EAEAEA; padding: 90px 0;}
#safety ul{display: flex; width: 812px; margin: 0 auto 35px; justify-content: center; align-items: center;}
#safety ul .pict{width: 304px; margin-right: 28px;}
#safety ul .txt{width: calc(100% - 304px);}

#safety h2{font-size : 27px; margin-bottom: 20px;}
#safety h2 span{font-size : 20px; line-height : 36.85px; display: block;}
#safety{ font-size : 17px;  line-height : 28.35px;}

#safety .btnlink2{ background : #3C3C3C;}
#safety .btnlink2 a{font-size: 18px; padding: 0 12px 0;}

/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#safety{padding: 45px 0;}
#safety ul{width: 100%; display: block;}
#safety ul .txt{width: 100%; padding: 0 5%; font-size: 12px;}

#safety ul .pict{width: 43%; margin: 0 auto 15px;}
#safety h2{font-size: 15px; text-align: center;}
#safety h2 span{font-size: 16px;}
#safety .btnlink2 a{font-size: 12px;}
}

/**/

#inquiry{ text-align: center; padding: 97px 0 100px;}
#inquiry h2{font-family: gill-sans-nova, sans-serif;font-weight: 500; font-style: normal; font-size : 45px;   letter-spacing : 0.12em;   color : #00D1C4; text-align: center; margin: 0 0 15px;}
#inquiry .sub{font-size : 20px; margin: 0 0 25px;}
#inquiry .tell{font-family: gill-sans-nova, sans-serif; font-size: 50px; font-weight: 500; margin: 0 0 35px;}
#inquiry .hotel{font-size: 20px; margin: 0 0 30px; }
#inquiry .adds{font-size : 19px; line-height : 31.18px;}
#inquiry .btnlink{height: 69px; width: 330px; text-align: center;  margin: auto;}
#inquiry .btnlink a{color: #fff; font-size: 25px; background : #3C3C3C; line-height: 69px; width: 100%; display: block;}

.snsarea{width: 92px; display: flex; justify-content: space-between; margin: 40px auto;}
.snsarea li{width: 32px; }


#inquiry .btnlink2{ background : #3C3C3C; font-size: 21px;}
#inquiry .btnlink2 a{ font-size: 18px;}

/**/

.f_note{padding: 60px 0 100px; /*border-bottom: 3px solid #000;*/}
.f_note ul{font-size : 15px;  line-height : 25.51px; width: 960px; margin:  auto;}
.f_note li{padding-left: 1.4em;}
.f_note li::before{content: '※'; margin-left: -1.2em; padding-right: 0.2em;}


/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#inquiry{padding: 45px 0 50px;}
#inquiry h2{font-size: 22px;}
#inquiry .sub{font-size: 16px;}
#inquiry .tell{font-size: 25px;}
#inquiry .hotel{font-size: 15px;}
#inquiry .adds{font-size: 12px;}
#inquiry .btnlink2,
#inquiry .btnlink2 a{font-size: 12px;}

.f_note ul{width: 90%; font-size: 12px;}


}