@charset "UTF-8";
/* ------------------------------------
				resort
--------------------------------------*/
#facilityArea h1{
 margin-bottom: 50px;
}
#facilityArea .facilityList{
 margin-top: 70px;
}
@media screen and (max-width: 768px) {
 #facilityArea h1{
 margin-bottom: 30px;
}
#facilityArea .facilityList{
 margin-top: 50px;
}
}/*-SP only-*/
/* ------------------------------------
				resort Detail
--------------------------------------*/
@media screen and (min-width: 769px) {
#resortDetail section{
 padding-top: 100px;
 padding-bottom: 100px;
}
}/*-PC only-*/


#resortHead h1{
 margin-bottom: 65px;
}
#resortHead h1 span{
 display: block;
 margin-bottom: 30px;
 font-size: 20px;
}
#resortHead h2{
 margin-bottom: 45px;
 font-size: 20px;
 line-height: 1.65;
}
@media screen and (min-width: 769px) {
 #resortDetail #resortHead{
  padding-top: 0;
  padding-bottom: 50px;
 }
 #resortHead .inner{
  position: relative;
  display: grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto auto auto;
 }
 #resortHead figure{
  grid-area: 1 / 2 / 5 / 3;
  display: flex;
  align-items: flex-end;
  width: 50vw;
  max-width: 702px;
  margin-right: -14vw;
 }
 #resortHead h1,
 #resortHead h2,
 #resortHead p{
  width: 35.8vw;
  max-width: 500px;
 }
 #resortHead h1{grid-area: 2 / 1 / 3 / 2;}
 #resortHead h2{ grid-area: 3 / 1 / 4 / 2;}
 #resortHead p{ grid-area: 4 / 1 / 5 / 2;}
}/*-PC only-*/

@media screen and (max-width: 768px) {/*SP head*/
 #resortDetail #resortHead{
  padding-top: 50px;
  padding-bottom: 10px;
 }
#resortHead h1{
 margin-bottom: 40px;
}
#resortHead h1 span{
 display: block;
 margin-bottom: 20px;
}
 #resortHead figure{
  margin: 0 0 40px;
 }
#resortHead h2{
 margin-bottom: 35px;
}
}/*-SP only-*/

/**/
#messageArea{
 overflow: hidden;
}
#messageArea h2{
 margin-bottom: 50px;
}
.sideSlider{
 margin-left: -20px;
 padding-right: 120px;
}
.sideSlider .slick-list {
 overflow: visible;
}
.sideSlider li{
 padding: 0 20px;
}

@media screen and (max-width: 768px) {
.sideSlider{
 margin-left: -15px;
 padding-right: 83px;
}
.sideSlider li{
 padding: 0 15px;
}

}/*-SP only-*/
#facilityFeature .ttlArea{
 margin-bottom: 50px;
}

@media screen and (max-width: 768px) {/*SP */
 #facilityFeature h2{
  margin-bottom: 30px;
 }
#facilityFeature .ttlArea{
 margin-bottom: 30px;
}
}/*-SP only-*/
/**/
#room h2{
 margin-bottom: 50px;
}
#room h3.acc{
 border-top: 1px #ccc solid;
}
#room h3:last-of-type:not(.active){
 border-bottom: 1px #ccc solid;
}

.acc{
 position: relative;
 display: flex;
 align-items: center;
 
 height: 75px;
 cursor: pointer;
}
.acc::before,.acc::after{
 content: "";
 display: block;
 background: var(--base);
 width: 15px;
 height: 1px;
 position: absolute;
 right: 20px;
 top: 0;
 bottom: 0;
 margin: auto;
}
.acc::after{
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
 transition: 0.2s ease-in-out; 
}
.acc.active::after{
 -webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.accBox{
 display: none;
}

@media screen and (min-width: 769px) {
#room .accBox{
 padding: 50px;
 margin-bottom: 50px;
}
#room .accBox .imgs{
 width: 50%;
}
#room .accBox .txts{
 width: 45.4%;
 }
}/*-PC only-*/
.roomSlider.slick-dotted.slick-slider,
.restaurantSlider.slick-dotted.slick-slider{
 margin: 0 0 26px;
}
.roomSlider .slick-prev,
.roomSlider .slick-next,
.restaurantSlider .slick-prev,
.restaurantSlider .slick-next{
 bottom: 0;
 top: auto;
 transform: translate(0, 0);
 width: 30px;
 height: 30px;
}
.roomSlider .slick-prev::before,
.roomSlider .slick-next::before,
.restaurantSlider .slick-prev::before,
.restaurantSlider .slick-next::before{
 content: "";
 display: block;
 background-color: #fff;
 background-repeat: no-repeat;
 background-size: 9px auto;
 background-position: center center;
 width: 30px;
 height: 30px;
}
.roomSlider .slick-prev::before,
.restaurantSlider .slick-prev::before{
 background-image: url("../images/arrow_prev.svg");
}
.roomSlider .slick-next::before,
.restaurantSlider .slick-next::before{
 background-image: url("../images/arrow.svg");
}
.roomSlider .slick-prev,
.restaurantSlider .slick-prev{
 left: auto;
 right: 31px;
}
.roomSlider .slick-next,
.restaurantSlider .slick-next{
 right: 0;
}
.roomSlider .slick-dots,
.restaurantSlider .slick-dots{
 bottom: -26px;
 line-height: 6px;
 text-align: right;
}
.slick-dots li{
 line-height: 6px;
}
#room .txts h4{
 margin-bottom: 40px;
}
#room .txts dl.flex{
 border-top: 1px #ccc solid;
 padding-top: 25px;
 margin-top: 25px;
 flex-flow: row wrap;
}
#room .txts dl.flex dt{
 width: 70px;
 padding-bottom: 5px;
}
#room .txts dl.flex dd{
 width: calc(100% - 70px);
 padding-bottom: 5px;
}


#room dl.pcFlex{
 margin-top: 45px;
}
#room dl.pcFlex dt{
 font-size: 20px;
}
@media screen and (min-width: 769px) {
 #room dl.pcFlex dt{
  width: 133px;
 }
 #room dl.pcFlex dd{
  width: calc(100% - 133px);
 }
}/*-PC only-*/

@media screen and (max-width: 768px) {/*SP room*/
 #room h2{
 margin-bottom: 30px;
}
 #room .accBox{
  background: none !important;
  padding-bottom: 70px;
}
#room .accBox .imgs{
 margin-bottom: 40px;
}
#room .txts h4{
 margin-bottom:30px;
}
 
#room dl.pcFlex{
 margin-top: 30px;
}
#room dl.pcFlex dt{
 margin-bottom: 15px;
}
}/*-SP only-*/
/**/
#restaurant h2{
 margin-bottom: 50px;
}
#restaurant h3{
 margin-bottom: 40px;
}
#restaurant .txts .btnWrap{
 margin-top: 40px;
}
#restaurant .txts .btnWrap + .btnWrap{
 margin-top: 10px;
}
@media screen and (min-width: 769px) {
 #restaurant .txts{
  width: 42%;
  max-width: 500px;
 }
 #restaurant .imgs{
  width:50%;
 }
}/*-PC only-*/

@media screen and (max-width: 768px) {/*SP restaurant*/
 #restaurant .inner{
  position: relative;
  padding-bottom: 84px;
 }
#restaurant h2{
 margin-bottom: 40px;
}
#restaurant h3{
 margin-bottom: 30px;
}
 #restaurant .imgs{
  margin: 30px 0 0 ;
 }
#restaurant .txts .btnWrap{
 margin-top: 0px;
 width: 100%;
 position: absolute;
 left: 0;
 bottom: 0;
}
}/*-SP only-*/
/**/
#access h2{
 margin-bottom: 50px;
}
@media screen and (min-width: 769px) {
 #access .txts{
  width: 42%;
  max-width: 500px;
 }
 #access .map{
  width:50%;
 }
}/*-PC only-*/
#access dl.flex{
 flex-flow: row wrap;
}
#access dl.flex dt{
 width: 70px;
 font-size: 13px;
 padding-bottom: 5px;
}
#access dl.flex dd{
 width: calc(100% - 70px);
 font-size: 13px;
 padding-bottom: 5px;
}
#access .btnWrap{
 margin-top: 40px;
}

#access h3.acc{
 border-top: 1px #ccc solid;
}
#access h3.acc:first-of-type{
 margin-top: 50px;
}
#access h3:last-of-type:not(.active){
 border-bottom: 1px #ccc solid;
}
#access .accBox{
 padding-bottom: 50px;
}

@media screen and (max-width: 768px) {/*SP access*/
 #access div.pcFlex{
  position: relative;
  padding-bottom: 84px;
 }
 #access h2{
 margin-bottom: 30px;
}
#access dl.flex dt{
 width: 50px;
}
#access dl.flex dd{
 width: calc(100% - 50px);
}
 #access .map{
  margin-top: 25px;
 }
 #access .map iframe{
  height: 57.2vw;
 }
#access .btnWrap{
 margin-top: 0px;
 width: 100%;
 position: absolute;
 left: 0;
 bottom: 0;
}
#access .accBox{
 padding-bottom: 30px;
}
}/*-SP only-*/


/**/
#overview h2{
 margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
 #overview dl{
  border-top: 1px #ccc solid;
  width: 80%;
  max-width: 950px;
  justify-content: space-around;
 }
 #overview dl dt{
  border-bottom: 1px #ccc solid;
  width: 31.6%;
  max-width: 300px;
  padding: 25px 0;
 }
 #overview dl dd{
  border-bottom: 1px #ccc solid;
  width: 68.4%;
  max-width: 650px;
  padding: 25px 0;
 }
}/*-PC only-*/

@media screen and (max-width: 768px) {/*SP overview*/
 #overview dl dt{
  border-top: 1px #ccc solid;
  padding: 25px 0;
 }
 #overview dl dd{
  padding: 0 0 25px ;
 }
}/*-SP only-*/


@media screen and (min-width: 769px) {
}/*-PC only-*/
@media screen and (max-width: 768px) {
}/*-SP only-*/