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

body{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; color: #231815;}

.gill{
  font-family : Gill Sans,'Lato', sans-serif;
  font-weight : 600;}



/*menu PCandSP*/
header {height: 73px; z-index: 50;}
.abc{position: absolute; top: 0; right: 0px;}
.in {position: fixed; top: 0; right: 0px;}

.menu-btn {
	display: block;
	transition: all .4s;
	box-sizing: border-box;
}
.opnebtn{}
.opnebtn a{	width: 230px;	height: 73px;	display: block}

/**/

.btnlink{ text-align: center;}
.btnlink a{ color: #fff; font-size: 25px; width: 430px; height: 94px; line-height: 94px; border: 2px solid #fff; border-radius: 47px; display: inline-block;}
.btnlink a:hover{background: rgba(255,255,255,.20);}

.sp-menu {display: none; position: absolute; top: 0; right: 0; font-size: 28px;}
.sp-menu ul{width: 400px; }
.sp-menu li {background: #E0E0E0;}
.sp-menu li a {color: #231815; width: 100%; border-bottom: solid 2px #fff; text-align: center; line-height: 90px; display: block; font-family : Gill Sans,'Lato', sans-serif; font-weight : 400;}
.closebtn{color: #fff; background: #909191; text-align: center; width: 100%; line-height: 90px;}
.sp-menu li a.gotop {color: #fff;}


/**/

.gd01
{
color: #fff;
  background : -moz-linear-gradient(0% 50% 0deg,rgba(65, 211, 198, 1) 0%,rgba(128, 255, 142, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(65, 211, 198, 1) 0%, rgba(128, 255, 142, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(65, 211, 198, 1) ),color-stop(1,rgba(128, 255, 142, 1) ));
  background : -o-linear-gradient(0deg, rgba(65, 211, 198, 1) 0%, rgba(128, 255, 142, 1) 100%);
  background : -ms-linear-gradient(0deg, rgba(65, 211, 198, 1) 0%, rgba(128, 255, 142, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#41D3C6', endColorstr='#80FF8E' ,GradientType=0)";
  background : linear-gradient(90deg, rgba(65, 211, 198, 1) 0%, rgba(128, 255, 142, 1) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#41D3C6',endColorstr='#80FF8E' , GradientType=1);
}


body a{text-decoration: none;}
body .txtlink a{text-decoration: underline;}

/**/


#hero{position: relative; max-width: 1100px; margin: 0 auto 0; padding-top: 280px;}
#hero .toptxt{position: absolute; left: 100px; top: 0; width: 129px;}
#hero h1{width: 570px; margin: 0 0  0 300px;}

#hero .lead{text-align: left;  margin: 40px 0 40px 300px;}
#hero .lead p{font-size : 20px; line-height : 47px;}
#hero .lead p:first-child{width: 310px;}



.gd02
{
  background : -moz-linear-gradient(4.54% 105.54% 45deg,rgba(65, 211, 198, 0.8) 0%,rgba(128, 255, 142, 0.8) 100%);
  background : -webkit-linear-gradient(45deg, rgba(65, 211, 198, 0.8) 0%, rgba(128, 255, 142, 0.8) 100%);
  background : -webkit-gradient(linear,4.54% 105.54% ,95.46% -5.54% ,color-stop(0,rgba(65, 211, 198, 0.8) ),color-stop(1,rgba(128, 255, 142, 1) ));
  background : -o-linear-gradient(45deg, rgba(65, 211, 198, 0.8) 0%, rgba(128, 255, 142, 0.8) 100%);
  background : -ms-linear-gradient(45deg, rgba(65, 211, 198, 0.8) 0%, rgba(128, 255, 142, 0.8) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#41D3C6', endColorstr='#80FF8E' ,GradientType=0)";
  background : linear-gradient(45deg, rgba(65, 211, 198, 0.8) 0%, rgba(128, 255, 142, 0.8) 100%);
  /*opacity : 0.8;*/
  filter: alpha(opacity=80) progid:DXImageTransform.Microsoft.Alpha(opacity=80) progid:DXImageTransform.Microsoft.gradient(startColorstr='#41D3C6',endColorstr='#80FF8E' , GradientType=1);
}


.spaplan{display: flex; justify-content: space-between; flex-wrap: wrap; width: 300px;}
.spaplan li{background: #000; color: #fff; width: calc((100% - 5px)/2); text-align: center; font-size: 15px; line-height: 25px; 
  font-family : Gill Sans,'Lato', sans-serif; font-weight: 400;}
.spaplan li.gry{background: #666;}
.spaplan li a{line-height: 25px; color: #fff; text-decoration: none; width: 100%; display: block;}
.spaplan li a:hover{background: #afefdb;}
.spaplan li:first-child{width: 100%; margin-bottom: 5px;}

#spa{padding: 140px 0 0;}

#spa h2{width: 595px; margin:0 auto 20px;}
#spa2{padding: 60px 0 60px;}

/*#spa .spaplan,
#spa3 .spaplan{display: flex; justify-content: space-between; flex-wrap: wrap; width: 300px;}
#spa .spaplan li,
#spa3 .spaplan li{background: #000; color: #fff; width: calc((100% - 5px)/2); text-align: center; font-size: 15px; line-height: 25px; }
#spa .spaplan li.gry,
#spa3 .spaplan li.gry{background: #666;}
#spa .spaplan li a,
#spa3 .spaplan li a{line-height: 25px; color: #fff; text-decoration: none; width: 100%; display: block;}
#spa .spaplan li a:hover,
#spa3 .spaplan li a:hover{background: #afefdb;}
#spa .spaplan li:first-child,
#spa3 .spaplan li:first-child{width: 100%; margin-bottom: 5px;}*/


#spa2 .box01{display: flex; justify-content: space-between; position: relative; width: 950px; margin: auto; }
/*#spa2 .box01 h3{width: 385px; margin-left: -70px;}*/
#spa2 .box01 h3{width: 385px; position: absolute; top: 0; left: -70px;}
#spa2 .box01 h4{font-size : 25px; line-height : 35px; font-weight: 600; padding: 30px 0 25px;}
#spa2 .box01 .txt{width: calc(100% - 575px); font-size : 16px; line-height : 30px; padding: 105px 0 0;}
#spa2 .box01 .pict{width: 560px;}
#spa2 .spaplan_ttl{margin: 30px 0 0px; font-weight: 600;}


#spa2 .box02{background: rgba(255,255,255,.40); display: flex; justify-content: space-between; position: relative; width: 950px; margin: 50px auto 0; padding: 30px 20px; position: relative;}
#spa2 .box02 .txt{width: calc(100% - 330px); display: flex; justify-content: space-between; flex-wrap: wrap;}
#spa2 .box02 .txt h4{background: #fff; width: 100%; text-align: center; height: 30px; align-items: center; display: flex; justify-content: center;}
#spa2 .box02 .txt h4 img{width: 228px;}
#spa2 .box02 .txt dl{width:calc((100% - 20px)/2);}
#spa2 .box02 .txt dt{font-size : 20px; font-weight: 600; border-bottom: 1px solid #000; padding: 10px 0;}
#spa2 .box02 .txt dd{font-size: 16px; line-height: 25px;}
#spa2 .box02 .txt dd span{ font-size : 14px; padding: 0 0 10px; display: inline-block;}
#spa2 .box02 .pict{width: 270px;}
#spa2 .box02 .cose{position: absolute; top: -25px; right: -25px; width: 100px;}
#spa3 .txtlink,
#spa3 .txtlink a{color: #036EA9;}

#spa3 {display: flex; justify-content: space-between; width: 950px; margin: 100px auto 0; flex-wrap: wrap; align-items: flex-end;}

#spa3 .pict ul{display: flex; justify-content: space-between; flex-wrap: wrap; width: 620px;}
#spa3 .pict ul li:first-child{width: 100%; margin-bottom: 5px;}
#spa3 .pict ul li:nth-child(2){width: 325px;}
#spa3 .pict ul li:nth-child(3){width: 290px;}
#spa3 .pict{position: relative;}
#spa3 .pict .tage{position: absolute; left: -12px; top: -40px; width: 150px;}

#spa3 .txt{width: calc(100% - 650px); font-size: 17px; font-weight: 300; line-height: 27px;}
#spa3 .txt .lead{line-height: 31px;}
#spa3 h4{font-size : 25px; font-weight: 600;  letter-spacing : 0.15em; margin-bottom: 25px;}
#spa3 h5{font-weight: 500; margin-top: 25px;}
#spa3 .shioyu_pc{}
#spa3 .shioyu_sp{display: none;}

#ingest{position: relative; width: 950px; margin: 100px auto 0;}
#ingest .pict{position: absolute; right: 0; top: 0; width: 563px; z-index: 0;}
#ingest .txt{z-index: 10; position: relative; /*padding: 20px 0 0; */line-height: 27px;}
#ingest h3{width: 290px; margin: 0 0 50px 150px; position: relative; z-index: 10; padding: 20px 0 0;}
#ingest .txt .lead{line-height: 31px;}
#ingest h4{font-size : 25px; line-height: 35px; font-weight: 600;  letter-spacing : 0.15em; margin-bottom: 25px;}
#ingest h5{font-weight: 500; margin-top: 25px;}


#unplug{display: flex; justify-content: space-between; flex-wrap: wrap; width: 950px; margin: auto; padding: 80px 0 0;}
#unplug h3{width: 100%;}
#unplug h3 p{width: 340px; margin-left: -75px;}
#unplug .box1,
#unplug .box2{width: 442px;}
#unplug .box1 .txt{position: relative; font-size: 18px; line-height: 35px;}
#unplug .txt{ font-size: 18px; line-height: 35px;}

#unplug .txt .tage{position: absolute; right: -15px; top: -35px; width: 150px;}
#unplug .txt h4{font-size : 25px; font-weight: 600; margin: 15px 0;}
#unplug .lead{font-size : 18px; line-height : 27px;}
#unplug .txt h5{font-weight: 500; margin-top: 20px;}

#stay{margin: 140px 0 0; padding: 50px 0 95px; background : #E0E0E0;}
#stay h2{width: 430px; margin: auto;}
#stay .plan01{width: 950px; margin: auto; text-align: center; padding: 40px 0 100px;}
#stay h3{font-size : 25px; font-weight: 600; margin: 15px 0;}
#stay .price{font-size: 25px; line-height: 35px;}
#stay .price p{font-size: 18px;}
#stay .lead{font-size: 18px; line-height: 31px; margin: 20px 0 40px;}
#stay .note{font-size : 16px; line-height : 35px; border: 1px solid #000; padding: 30px 0; margin-bottom: 30px;}

#stay .btnlink a{border: 5px solid #fff;
  background : -moz-linear-gradient(0% 50% 0deg,rgba(65, 211, 198, 1) 0%,rgba(128, 255, 142, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(65, 211, 198, 1) 0%, rgba(128, 255, 142, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(65, 211, 198, 1) ),color-stop(1,rgba(128, 255, 142, 1) ));
  background : -o-linear-gradient(0deg, rgba(65, 211, 198, 1) 0%, rgba(128, 255, 142, 1) 100%);
  background : -ms-linear-gradient(0deg, rgba(65, 211, 198, 1) 0%, rgba(128, 255, 142, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#41D3C6', endColorstr='#80FF8E' ,GradientType=0)";
  background : linear-gradient(90deg, rgba(65, 211, 198, 1) 0%, rgba(128, 255, 142, 1) 100%);  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#41D3C6',endColorstr='#80FF8E' , GradientType=1);
}

#stay .btnlink a:hover{background: #41D3C6;}

#stay .plan02{display: flex; justify-content: space-between; width: 950px; margin: auto;}
#stay .plan02 h3 span{display: block; font-size : 18px; line-height: 31px; font-weight: 300; }
#stay .plan02 .box01,
#stay .plan02 .box02{width: calc((100% - 70px)/2); position: relative;}
#stay .plan02 .note{text-align: left;}
#stay .box01 .note{padding: 15px;}
#stay .box02 .note{padding: 30px;}
#stay .plan02 .box01 .lead{letter-spacing: -0.1em;}
#stay .plan02 .box01 .btnlink{position: absolute; bottom: 0;}


#about{ background : #005E6C; color: #fff; padding: 85px 0 90px;} 
#about h2{width: 367px; margin: 0 auto 35px;}
#about ul{ display: flex; justify-content: center; align-items: center;}
#about ul li:first-child{width: 495px; margin-right: 25px;}
#about .lead{font-size : 18px;  line-height : 31px;}
#about .gentei{background: #fff; color: #005E6C; text-align: center; padding: 5px; margin: 10px 0 15px;}
#about dl{display: flex; justify-content: flex-start; flex-wrap: wrap; line-height: 27px;}

#safety{background: #231815; padding: 85px 0 0;}
#safety div:first-child{width: 308px; margin: auto;}
#safety h2{ font-size : 25px; line-height : 35px; color: #fff; text-align: center; padding: 35px 0;}
#safety .lead{width: 845px; margin: auto; border-bottom: 1px solid #fff; color: #fff; padding: 0 0 85px; text-align: center; font-size : 17px;
  line-height : 33px;}
#safety a{color: #fff;}
#safety .txtlink{margin: 10px 0 0;}

/**/


#info{background: #231815; color: #fff; text-align: center; padding: 90px 0 80px;}
.htl{font-size: 25px; font-weight: 600;}
.add{font-size: 20px; font-weight: 400; margin: 20px 0 40px;}

.notices{ font-size: 13px; line-height: 23px; text-align: left; margin: 80px auto 0; max-width: 950px;}
.notices li{padding-left: 1.2em;}
.notices li::before{content: '※'; margin-left: -1.2em;}
.notices li ul li::before{content: '・'; margin-left: -1.2em;}

#f_htlname{font-size: 24px; margin: 25px 0; text-align: center;}
#f_htlname a{color:#231815; font-weight: normal;}


/* @media : PC */
@media screen and (min-width: 769px) {
    .sp { display: none; }
}/* /@media */
/* @media : SP */
@media screen and (max-width: 768px) {
    .pc {display: none;}	
	#header table,	#copyright {width: 96%;}
	}

@media screen and (max-width: 768px) {
.opnebtn  a{width: 50px; height: 30px; margin: 10px;}
.sp-menu ul{width: 200px;  font-size: 14px;}
.sp-menu li a{ line-height: 50px;}
.closebtn{width: 200px;  font-size: 14px; line-height: 50px;}

#hero{padding-top: 98px; margin: 0 auto 0;}
#hero h1{width: 56%; margin: 0 0 0 22%;}
#hero .toptxt{left: 0; width: 14%;}
#hero .lead{margin: 0 0 0 18%;}
#hero .lead p:first-child{width: 56%;}
#hero .lead p{font-size: 12px; line-height: 2.2em;}
#hero div:last-child{padding: 40px 0 0;}

#spa{padding: 40px 0 0;}
#spa h2{width: 62%;}


#spa2{padding: 75px 0 30px;}
#spa2 .box01{flex-direction: column-reverse; flex-wrap: wrap; width: 90%;}
#spa2 .box01 h3{left: -5%; width: 51%; top: -55px;}
#spa2 .box01 .txt{width: 100%; padding: 0;} 
#spa2 .box01 .pict{width: 100%;}


#spa2 .box02{width: calc(90% - 20px); display: block; padding: 15px 10px;}
#spa2 .box02 .pict{display: none;}
#spa2 .box02 .txt{width: 100%;}
#spa2 .box02 .cose{right: auto; left: -2%; top: -12px; width: 50px;}
#spa2 .box02 .txt h4{height: 20px;}
#spa2 .box02 .txt h4 img{width: 40%;}
#spa2 .box02 .txt dl {width: calc((100% - 10px)/2);}



#spa3{width: 90%; display: block; margin: 50px auto 0;}
#spa3 .pict ul{width: 100%;}
#spa3 .pict ul li:nth-child(2){width: 52%;}
#spa3 .pict ul li:nth-child(3){width: 47%;}

#spa3 .txt{width: 100%;}
#spa3 ul.shioyu_pc{display: none;}
#spa3 .shioyu_sp{display: block;}
#spa3 .pict .tage{width: 22%; right: 0; top: -17px; left: auto;}


#ingest{width: 90%; margin: 50px auto 0;}
#ingest .pict{position: relative; width: 100%;}
#ingest h3{margin: 0 0 20px -5%; width: 38%;}

#unplug{width: 90%;}
#unplug .box1, #unplug .box2{width: calc((100% - 20px)/2); position: relative;}
#unplug h3 p{width: 45%; margin-left:-5%; margin-bottom: 10px;}

#unplug .box2 .txt div:last-child{position: absolute; bottom: 0; width: 100%;}

#stay{margin: 40px 0 0; padding: 25px 0 40px;}
#stay h2{width: 48%;}
#stay .plan01{width: 90%; padding: 20px 0 50px;}
#stay .plan02{width: 90%;}
#stay .plan02 .box01 .btnlink{position: relative;}
#stay .plan02 .box02 .btnlink{position: absolute; bottom: 0; width: 100%;}

#about{padding: 40px 0 30px;}
#about h2{width: 44%; margin: 0 auto 15px}
#about ul{display: block;}
#about ul li,
#about ul li:first-child{width: 75%; margin: 0 auto 10px;}

#safety .lead{width: 100%;}

.btnlink a{width: 45%; font-size: 12px; line-height: 3em; height: 3em;}
#stay .btnlink a{border: 2px solid #fff;}
#stay .plan02 .btnlink a{width: 90%;}

#stay .plan02 .box01, #stay .plan02 .box02{width: calc((100% - 10px)/2);}

.spaplan{display: flex; width: 100%; margin: 5px 0 0;}
.spaplan li:first-child,
.spaplan li{width: calc((100% - 4%)/3); margin-bottom: 0; font-size: 12px; line-height: 1.5em;}
.spaplan li a{line-height: 1.2em; padding: 0.8em 0;}
.spaplan li.gry{padding: 0.8em 0; line-height: 1.2em;}

#unplug .spaplan{display: block; width: 100%;}
#unplug .spaplan li:first-child,
#unplug .spaplan li{width: 100%; margin-bottom: 5px;}
#unplug .txt .tage{width: 40%;}





/*font*/
#spa div{font-size: 12px; line-height: 1.4em;}
#spa2 .box01 h4{font-size: 18px; line-height: 1.4em;}
#spa2 .box02 .txt dt{font-size: 18px;}
#spa2 .box02 .txt dd{font-size: 12px; line-height: 1.4em;}
#spa2 .box02 .txt dd span{font-size: 10px; font-feature-settings: "palt";}
#spa2 .box02 .txt dl:last-child dd span{letter-spacing: -0.01em;}


#spa3 h4{font-size: 18px; line-height: 1.4em; margin-bottom: 5px; margin-top: 15px;}
#spa3 .txt{font-size: 12px; line-height: 1.4em;}
#spa3 h5{margin-top: 10px;}

#ingest h4{font-size: 16px; line-height: 1.4em; margin-bottom: 15px; margin-top: 15px;}
#ingest .txt .lead,
#ingest .txt{line-height: 1.4em;}
#ingest h5{margin-top: 10px;}

#unplug p{font-size: 12px; line-height: 1.4em;}
#unplug .txt h4{font-size: 14px; line-height: 1.4em;}
#unplug .lead{font-size: 12px;  line-height: 1.4em;}

#unplug .txt h5{font-size: 12px; line-height: 1.4em;}

#unplug .notices{font-size: 10px; line-height: 1.4em;}

#stay h3{font-size: 18px; line-height: 1.4em;}
#stay .price{font-size: 16px; line-height: 1.4em;}
#stay .price p{font-size: 12px; }
#stay .lead{font-size: 12px; line-height: 1.4em;}
#stay .note{font-size: 12px; line-height: 1.5em; padding: 15px;}
#stay .plan02 h3 span{font-size: 10px; line-height: 1.4em;}
#stay .plan02 .price{font-size: 14px; line-height: 1.4em;}

#stay .box01 .note{padding: 12px;}
#stay .box02 .note{padding: 12px; position: absolute; bottom: 40px; }

#about .lead{font-size: 12px; line-height: 1.4em;}
#about .gentei{font-size: 12px;}
#about dl{font-size: 12px; line-height: 1.4em;}


#safety h2{font-size: 18px; line-height: 1.4em;}
#safety .lead{font-size: 12px;}

.htl{font-size: 18px; line-height: 1.4em;}
.add{font-size: 15px; line-height: 1.4em;}

#info .notices{width: 90%;}

#f_htlname{font-size: 18px;}

}

@media screen and (max-width: 750px) {
#stay .box01 .note,
#stay .box02 .note{min-height:270px;}
}

@media screen and (max-width: 360px) {
#stay .box01 .note,
#stay .box02 .note{min-height:290px;}
}


@media screen and (max-width: 320px) {
#stay .box01 .note,
#stay .box02 .note{min-height:auto;}
}