@charset "utf-8";
/* CSS Document */
	
#sliderCont {
	z-index:-99;
	background-color:#000;
	margin-top: 10px;
}

 /* 波 */
 
.editorial {
  display: block;
  width: 100%;
  height: 60px;
  max-height: 60px;
  margin: -50px 0 ;
  z-index:5;
  position:absolute;
  left:0px;
  float:left;
}

.parallax1 > use {
  animation: move-forever1 10s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax2 > use {
  animation: move-forever2 8s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax3 > use {
  animation: move-forever3 6s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
	background:url(../img/common/navBg.png);
  }
}
.parallax4 > use {
  animation: move-forever4 4s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

 /* 波ここまで */

nav#globalNavi { margin-top: -21px;}

#bnrSpace { margin-top: 10px!important;}/*宿泊予約の帯を削除したため、変更　margin-top: 50px*/
#bnrSpace img { width: 100%;}
ul.longBnr li { margin-bottom: 2%;}
ul.longBnr img { font-size: 0; line-height: 0;}
ul.shortBnr { display:flex; flex-direction: row; justify-content:space-between; flex-wrap:wrap; width: 100%; height:auto;}
ul.shortBnr li { flex:0 0 48%; height:100%;  margin: 0 0 2%;}
ul.shortBnr li.bnr:hover img { transform: translateY(2%); }
#bnrSpace h2 { margin: 7% 0 0 !important;; line-height: 50%; }/*宿泊予約の帯を削除したため、変更　変更前 margin: 10% 0 3%*/
.bnrIllumination { border-radius: 0 50px;}
ul.berryShortBnr { display:flex; flex-direction: row; justify-content:space-between; flex-wrap:wrap; width: 100%; height:auto;}
ul.berryShortBnr li { flex:0 0 48%; height:100%;  margin: 0 0 2%;}
ul.berryShortBnr li img { width: 100%;}

#h1-back img{ top: -20px;} 
h1 { margin: 10% 0 5% !important;}

#section01 h2 { margin: 0 0 3% ;}

 /* ループここから */


/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.slider-wrap {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

div.slider {
  display: flex;
  overflow: hidden;
}

ul.slider-list {
  display: flex;
  list-style: none;
}

ul.slider-list-left{
animation :infinity-scroll-left 70s infinite linear 0.5s both;
}

.slide {
  width: calc(100vw / 4);
}
.slide > img{
   width: 100%;
}

 /* ループここまで */

/* SP版イントロ 動画下に文字を追記202509*/
.box-intro { background-image: linear-gradient(0deg, rgba(200, 160, 99, 0) 0%, rgba(200, 160, 99, 0.34) 20%, rgb(209 163 92 / 50%) 30%, rgb(201 156 86 / 60%) 40%, rgb(201 155 86 / 70%) 50%, rgb(191 157 102 / 95%) 60%, rgba(149, 117, 69, 0.9) 70%, rgba(0, 0, 0, 1) 100%);
padding-bottom: 13%; }
.box-intro-text { width: 88%; height: auto; margin: 0 auto 3%; color: #fff; }
.box-intro-text h1 { margin: 0!important; padding: 8% 0 0; line-height: 1.8; letter-spacing: 2px; font-size: 160%;}
.box-intro-text h1 span:first-of-type { letter-spacing: 0.15em; }
.box-intro-text h1 span:nth-of-type(2) { letter-spacing: 0.25em; }
.box-intro-text p { font-size: 120%; line-height: 1.8; letter-spacing: 2px; padding-bottom: 6%; }
/* SP版イントロここまで*/


 /* 施設案内ここから */
#section01 .section01-bnr-center h2 { margin: 0% 0 3% ; font-size: 120%;}
#section01 #section01_04 .section01-bnr { width: 100%; display:flex;}
.section01-bnr-left , .section01-bnr-center , .section01-bnr-right {
	display:inline-block;
	flex:1;
	margin: 0;
}

.section01-bnr-left , .section01-bnr-right { width: 35%;}

.section01-bnr-center { width: 30%;}
.section01-bnr-center ul li { font-size:85% !important;}


#section01 #section01_04 .section01-bnr img { float:left; width: 100%;}
.section01-bnr-center { color:#FFF; padding: 2%; font-size:95%; line-height: 130%; 	background:url(../img/common/navBg.png); text-align:center;}
#section01 a { text-decoration: none;}
 /* 施設案内ここまで */

 /* おすすめプラン */
#premium-bnrSpace { margin: 10px auto 10px; }
#premium-bnrSpace img { width: 100%; }
#planBox li { border-radius: 10px; width: 130%; margin-bottom: 20px;}
#planBox .imgBox { border-radius: 10px 10px 0px 0px; height: 33vh;}
#planBox .planInner { 
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    flex-direction: column;
	width: 100%;
	height: 100%;
	}

#planBox .planTitle { height: auto; font-weight:800; margin: 1% 0 0; border-bottom: 1px solid #c7c7c7; padding: 7%;}
#planBox .planDetail {  padding: 7%;}
#planBox .planBtn { background:#000; color:#FFF; text-align:center; border-radius: 0 0 10px 10px;}
#planBox .planBtn:hover { opacity: 0.8;}


 /* おすすめプランここまで */

#section03 h2 , #section04 h2{ margin: 0 0 3% ;}

 /* おしらせここから */

#section03 ul.whiteBox { overflow-y:scroll; max-height:600px; padding: 3%;}
#section03 ul li { display:flex; border-bottom: #ddd 1px solid; padding-bottom: 3%; margin-bottom: 3%;}
#section03 ul li:last-child {  border-bottom: none; padding-bottom: 0; margin-bottom: 0%;}
#section03 ul li div.newsImg { width: 30%; font-size: 12px;}
#section03 ul li div.newsImg p { margin-bottom: 5%;font-size: 12px;}
#section03 ul li div.newsImg img { width: 100%; height:auto;}
#section03 ul li div.newsText { width: 68%; margin-left: 2%;}
#section03 ul li p { padding: 0 0 0 2%;}
#section03 ul li a:hover { text-decoration:underline;}


 /* おしらせここまで */

@media (max-width: 360px){ 
/* SP版イントロ 動画下に文字を追記202509*/
.box-intro-text h1 { font-size: 140%!important; letter-spacing: 1px; }
.box-intro-text p { letter-spacing: normal; }
}

@media (max-width: 390px){ 
.box-intro-text h1 { font-size: 145%!important; }
}

@media (max-width: 402px){ 
.box-intro-text h1 { font-size: 150%; }
.box-intro-text p { font-size: 110%; }
} 

@media (min-width: 450px) {
#planBox .fourPiece .imgBox { height: 35vh;}
}

@media (min-width: 480px) {
#planBox .fourPiece .imgBox { height: 38vh;}
}

@media (min-width: 500px) {
	
.section01-bnr-center { padding: 3%; }
#section01 .section01-bnr-center h2 { font-size: 130%;}
#planBox .fourPiece .imgBox { height: 39vh;}

}

@media (min-width: 550px) {
#planBox .fourPiece .imgBox { height: 42vh;}

}

@media (min-width: 550px) {
	
.section01-bnr-center { line-height: 150%; padding: 4%; }
.section01-bnr-center ul li { font-size: 100% !important;}
#planBox .fourPiece .imgBox { height: 44vh;}

}

@media (min-width: 600px) {
#planBox .fourPiece .imgBox { height: 47vh;}

}

@media (min-width: 650px) {
	
#section01 .section01-bnr-center h2 { font-size: 150%; margin: 1% 0 3% ;}
.section01-bnr-center { line-height: 170%; padding: 4%; }
.section01-bnr-center ul li { font-size: 100% !important;}
#planBox .fourPiece .imgBox { height: 49vh;}

}

@media (min-width: 730px) {
	
#planBox .fourPiece .imgBox { height: 55vh;}

}

@media (min-width: 768px) {

.bnrIllumination { border-radius: 0 100px;}

.slide {
  width: calc(100vw / 10);
}

 /* 施設案内 */
#section01 #section01_04 .section01-bnr { height: 180px;}
#section01 #section01_04 .section01-bnr img { float:left; width: 100%;}
.section01-bnr-center { line-height: 140%; padding: 5% 0;}
.section01-bnr-center ul li { font-size: 100% !important;}
 /* 施設案内 */


#bnrSpace {
	margin: 0 auto 7%;
}
#bnrSpace h2 { margin: 7% 0 0 !important; line-height: 150%; }/*宿泊予約の帯を削除したため、デザイン変更のため追加*/
#bnrSpace ul.shortBnr li { flex:0 0 32%; margin-bottom: 1%;}
	
ul.berryShortBnr { display:flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; height:auto;}
ul.berryShortBnr li { flex:0 0 24%; margin: 1% 0.5% 1%;}

#planBox .fourPiece  { justify-content:flex-start;}
#planBox .fourPiece li { width:48%; margin: 1% 1% 1%;}
#planBox .fourPiece .imgBox { height: 250px;}
#planBox .planTitle {  height: 110px; padding: 5%;}
#planBox .planDetail {  padding: 5%;}

#section03 ul.whiteBox { max-height:600px;}
#section03 ul li div.newsImg { width: 20%;}
#section03 ul li div.newsText { width: 78%;}

}

@media (min-width: 800px) {
	
.section01-bnr-center { line-height: 150%; padding: 3%;}
#planBox .fourPiece .imgBox { height: 255px;}

}

@media (min-width: 1000px) {
#h1-back img{ top: -60px;}
	
#section01 .section01-leftBox { width: 63%; font-size: 0; line-height: 0;}
#section01 .section01-rightBox { width: 35%; flex-direction: column; background: none; padding:0;}

 /* 施設案内 */
#section01 #section01_04 .section01-bnr { height: auto;}
#section01 .section01-bnr-center h2 { margin: 1.5% 0 3% ;}
#section01 #section01_04 .section01-bnr img { float:left; width: 50%;}
.section01-bnr-center { line-height: 150%; padding: 1.5%;}
 /* 施設案内 */
 
#planBox .fourPiece  { justify-content:flex-start;}
#planBox .fourPiece li { width:24%; margin: 1% 0.5% 1%;}
#planBox .fourPiece .imgBox { height: 170px;}

}

@media (min-width: 1070px) {
#planBox .fourPiece .imgBox { height: 180px;}
}

@media (min-width: 1100px) {
#planBox .fourPiece .imgBox { height: 185px;}
}