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

/*オープニング*/
#opening {
	background: #eeebe5;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9000;
	display: none;
}
.srtclass_block {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.openingImg{
	position: relative;
	width: 200%;/*ロゴ大きく*/
	margin: 0 0;
	height:auto;
}
.openingImg img{
	position: absolute;
	left:-25%;/*ロゴ大きくしたので位置調整*/
	top:0;
	width:100%;
	height:auto;
	animation:strfixed 2s ease-out forwards;
}
@keyframes strfixed {
	0% {
		opacity:0;
		transform: scaleY(0);
	}
	100% {
		opacity:1;
		transform: scaleY(1);
	}
}
.openingTxt01{
	font-size:3em;
	margin: 0 0 2%;
	color: #0C032B;
	text-align: center;
	font-family: "Yu Mincho", "YuMincho", serif;
}
.openingTxt02{
	font-size:1em;
	margin: 0 0 2%;
	color: #0C032B;
	text-align: center;
	font-family: "Yu Mincho", "YuMincho", serif;
}
/*ここまでオープニング*/
/*TOPフェード画像*/
#fixContent{
	position: fixed;
	top:0;
	z-index: 0;
	width: 100%;
}

#video-box { 
	padding: 0 0 0;
	background-color: #eeebe5;
	border-bottom: #ccc 5px solid;
	filter: drop-shadow( 2px 2px 2px rgba(33, 33, 33, 0.6));
	}
 
#video-wrap { 
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	width: 100%;
	height: 100vh;
}
.top-slide{
	width:100%;
	background-image:linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)) ,url(../img/top/absurdity.png);
}
.sliderTop{
	display: none;
}
.sliderTopSP{
	position: relative;
	display: block;
	margin: 0 auto 0;
	
}
.sliderTopSP li{
	position:relative;
	height: 100vh;
	display: block!important;
}
.sliderTopSP li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}	
.sliderTopSP li.list01 img{
  object-position: center 70px;
}
.sliderTopSP li.list02 img{
  object-position: center center;
}
.sliderTopSP li.list03 img{
  object-position: center bottom;
}
.sliderTopSP.isChange {
visibility: hidden;
}

section.sec_top{
	position:relative;
	display: block;
	width:100%;
	padding:0;
	max-width:none;
	margin: 5% 0;
}
.overContent{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:100vw;
}
.leadText{
	line-height: 2.5; 
	font-size:1em;
	width: 100%;
	padding: 0 10% 20%; 
	color:#0C032B;
	text-align: center;
	background: #f7f4f3;
	font-family: "Yu Mincho", "YuMincho", serif;
	visibility:hidden;
}
.fadeInUpTop {
visibility: visible !important;
animation:fadeInDown01 2s ease-out 1 both;
}
@-webkit-keyframes fadeInDown01 {
 0% {  opacity: 0; transform: translateY(40px); }
 100% { opacity: 1; transform: translateY(0); }
}

.fadeInUpTop02 {
 visibility: visible !important;
 animation:fadeInDown01 3s ease-out 1 both;
}
@-webkit-keyframes fadeInDown02 {
 0% {  opacity: 0; transform: translateY(40px); }
 100% { opacity: 1; transform: translateY(0); }
}
#videoBg{
	display: block;
 	width: 100%;
	margin: 0 0;
	padding: 20% 0;
	background-color: #eeebe5;
	position: relative;
}
#videoBg .leadVideo{
	width: 100%;
}
.leadImg02{
	width: 70%;
	display: block;
	position: absolute;
	top: 10%;
    left: 0%;
}
.leadImg02 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
.leadText02{
	display: flex;
	flex-direction: column;
	position: absolute;
	top:50%;
	right: 0%;
	padding: 0% 0% 10%;/*背景の四角の高さ*/
	padding: 0% 0% 0%;/*背景の四角の高さ*/
	background:#01436f;
	width: 70%;
	z-index: 1;	
}
.leadText02-inner{
	display: block;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-size:1.4em;
	color:#fff;
	text-align: center;	
	padding: 10% 10% 10%;
	margin:0 0 10%;
}	

	
/*ホテルについて青ボタン*/
.leadText02-link{
	width:80%;
	margin:0.5em 0 ;
	position: absolute;
	bottom: 5%;
	left: 10%;
	background:#fff;
	text-align:center;
}
.leadText02-link a:hover{
	background:#0169AE;
	background:#d9dde1; 
}
.leadText02-linkinner{
	width:100%;
	display:inline-block;
}

.leadText02-linkinner:before,
.leadText02-linkinner:after{
	content:"";
	display:block;
	position:absolute;
}
.leadText02-linkinner:before{
	border-right:1px solid #333;
	border-top:1px solid #333;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	width:8px;height:8px;
	right:15%;top:50%;
	margin-top:-4px;
}
.leadText02-linkinner a{ 
	display: block; width:100%; 
	padding:0.2em 0;
}

.boxImgR1,.boxImgL1{
	display:flex;
	width:100%;
	margin:0 0 5%;
	padding:0;
	visibility:hidden;
}
.boxImgR1 img,.boxImgL1 img{
	width:100%;
	height: 100%;
	object-fit: cover;
}

/*右からスライドイン*/
.inR{
 visibility: visible !important;
 animation: slideInR 1.5s cubic-bezier(.35,.45,.55,1) 1 forwards;
}
 @keyframes slideInR {
  0% {
    transform: translateX(500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}
/*左からスライドイン*/
.inL{
 visibility: visible !important;
 animation: slideInL 1.5s cubic-bezier(.35,.45,.55,1) 1 forwards;
}
 @keyframes slideInL {
  0% {
    transform: translateX(-500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}
/*中心から拡大*/
.zoomin {
    animation: zoomIn 3s ease-in-out;
}
 @keyframes zoomIn{
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/****スクロールを促すライン****/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  left:50%;
  bottom:-10px;
    /*全体の高さ*/
  height:100px;
  z-index: 100;
}
/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  bottom: -10px;
    /*線の形状*/
  width: 1px;
  height: 100px;
  background: #000;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}
	 
/***NEWS　アコーディオン***/
.newsBox{
	width: 100%;
	background: #e2ded6;
	padding: 0 0 15%; margin: 0 0 0%;
	display: flex; justify-content: center;
	position: relative;
	z-index: 0;
}
.news01{width:100%; padding:0 5%;}
.news_title {
	font-weight: bold;
	color:#333;
	margin: 0;
	padding: 10px 48px 10px 20px;
	position: relative;
	cursor: pointer;
	transition: 0.3s;
	border-bottom: 1px solid #0c032b;
	line-height: 2;
}
.news_title:hover {
	color: #0169ae;
}
.news_title:after {
	content: "\f078";
	color: #0c032b;
	font-family: "Font Awesome 6 Free";
	font-weight: 900; 
	display: inline-block;
	width: 28px;
	height: 28px;
	position:absolute;
	bottom: 10px;
	right: 10px;
	-webkit-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	transition:all 0.2s ease;
}
.news_title.selected:after {
	transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
}

.newsCont {
	display: none;
	background: #f5f3f0;
	padding: 5%;
	color:#000;
	border-bottom: 1px solid #d9dde1;
}
.newsCont_inner{display: flex;flex-direction: column;justify-content:center;}
.newsPhoto{width: 90%; margin: 0 5% 5%;}	
.newsPhoto img{width: 100%; height:100%; object-fit: cover;}
.newsText{width: 100%;}
.newsText a{color: #0169ae;}

/***NEWS　特別な告知***/
#systemChange{height:auto; margin: 5% 0% 5%; padding: 0 5%; }
.attention-boxInner{padding:1em;}
.attention-boxInner dt{font-size:120%; font-weight: bold;color:#0c032b;}
/*.attention-boxInner dd{colof:#000;}*/
.toggle-top {
	display: none;
}
.summary-labelT {		/*タイトル*/
	padding: 0.6rem 1em;
	display: block;
	color: #0c032b;
	background: #dae7f0;
	cursor: pointer;
}
.summary-labelT::before{		/*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	border-top: 2px solid #0c032b;
	border-right: 2px solid #0c032b;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 6px );
	right: 20px;
	transform: rotate(135deg);
}
.summary-labelT,
.summary-contentT {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.summary-contentT {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
	background: #f5f3f0;
}
.toggle-top:checked + .summary-labelT + .summary-contentT {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle-top:checked + .summary-labelT::before {
	transform: rotate(-45deg) !important;
}

/* おすすめプラン slackスライダー */
#planBox ul.SliderBnr { width: 100%; display: flex;flex-direction: column;}
#planBox ul.SliderBnr li.planContent { width: 250px; display: flex; flex-direction: column;height: auto; margin-bottom: 20px;}
#planBox .imgBox { height: auto;}
#planBox .imgBox img { width: 100%; height: auto;}
#planBox .planTitle { height: 120px; margin: 0 0 0; padding: 7%; background: #f5f3f0; color: #000;}
#planBox .planBtn { background:#0169ae; color:#FFF; text-align:center; margin-top: auto; padding: 5px;}
#planBox .planBtn:hover { opacity: 0.8;}
.arrow-white { color:#FFF;}

/*サイト内バナー*/
ul.berryShortBnr { display:flex; flex-direction: row; justify-content:space-between; flex-wrap:wrap; width: 90%; height: auto; padding: 0 0; margin: 0 5%; }
ul.berryShortBnr li { margin: 0 0 2%; flex: 0 0 48%; height: 100%;}
ul.berryShortBnr li img{width: 100%; }

/*外部リンクバナー*/
.footerbnr-box{
	margin:5% 5%;
}
.footerbnr-box li{
	margin:2px;	
	}
.footerbnrSlide img {
	max-width: 220px;
	}


/*ACCESSのイラストマップのところ*/
#blinkpont{
animation: blinking 4s ease-in infinite alternate; } 
@keyframes blinking {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}
#mapcircle{
    animation: blinking02 2s ease-in infinite alternate; }
@keyframes blinking02 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.mapIllust-box{
	display:flex;
	flex-direction:column;	
	flex-wrap: wrap;
	width: 90%;
	margin: 0 5%;
	height:78vh;
	position: relative;
}
.mapIllust{
	width: 100%;
	height: 30vh;
	position: absolute;
	top:0;
	left:-10%;
	display: block;
}
.mapIllust svg{
	width:200%;
	height: 100%;
	object-fit: cover;
}
.mapText{
	width: 100%;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	margin: 0 0 0 0;
	padding: 30vh 2% ;/*マップの高さがなくなるので*/
	background: none;
	color: #333;
	z-index: 0;
}
.mapText dl{
	margin:3% 0; width:100%; padding: 3%;
}
.mapText dt{
	margin-bottom: 2%; width: 100%; padding: 0 0; color: #000; 
}
.mapText dd{margin-bottom: 5%;}
.linkBtn-W{
	width:100%;
	margin:0 0;
	padding: 1em;
	background:#01436f;
	text-align:center;
	position:relative;
}
.linkBtn-W_inner a{ 
	display: block; width:100%; color:#fff;
}
.linkBtn-W_inner:after{
	content: "\f105";
	color: #fff;
	font-family: "Font Awesome 6 Free";
	font-weight: 900; 
	display: block;
	width: 20px;
	height: 20px;
	position:absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
} 
/*客室スライダー*/
.roomSlide{
	display: block;
	width:100%;
	margin:0 0 20%;
}
.slider01 li{
	width: 360px;
	margin-right: 10px;
	
}

/*★★★768からはここから★★★*/
@media (min-width: 768px) {

/*TOPフェード画像*/
#video-box {
	padding: 0 0 0;
	background-color: #eeebe5;
	border-bottom: none;
	filter: none;
	} 
#video-wrap { 
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	width: 100%;
    height: 100vh;
	}

.leadImg02{
	width: 70%;
	display: block;
	position: absolute;
	top: 10%;
    left: 0%;
	visibility:hidden;
}
.leadImg02 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
.leadText02{
	display: flex;
	flex-direction: column;
	position: absolute;
	top:50%;
	right: 0%;
	padding: 0% 0% 10%;/*背景の四角の高さ*/
	padding: 0% 0% 0%;/*背景の四角の高さ*/
	background:#01436f;
	width: 70%;
	z-index: 1;
	visibility:hidden;	
}
.leadText02-inner{
	display: block;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-size:1.4em;
	color:#fff;
	text-align: center;	
	padding: 10% 10% 20%;
	margin:0 0 10%;
}	 
 /*動画の上右からスライドイン*/
.rightinOnV{
 visibility: visible !important;
 animation: ROnV 2s cubic-bezier(.35,.45,.55,1) 1 forwards;
}
 @keyframes ROnV {
  0% {
    transform: translateX(500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}
/*動画の上左からスライドイン*/
.leftinOnV{
 visibility: visible !important;
 animation: LOnV 2s cubic-bezier(.35,.45,.55,1) 1 forwards;
}
 @keyframes LOnV {
  0% {
    transform: translateX(-500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}

.top-slide{
	width:100%;
	height:100vh;
}
.sliderTop{
	position: relative;
	display: block;
	margin-top: 70px;
	max-width: 1200px;
	margin: 0 auto;
	}
.sliderTop li{
	position:relative;
	height: 100vh;
	display: block!important;
}
.sliderTop li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sliderTop li.list01 img{
  object-position: center 70px;
}
.sliderTopSP{display:none;}
	
#videoBg{
	padding: 0 0;
}
.news01{width:90%; }
.leadImg02{
	width: 60%;
	display: block;
	position: absolute;
	top: 5%;
    left: 0%;
}
.leadImg02 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 800px;
	}
.leadText02{
	display: flex;
	flex-direction: column;
	position: absolute;
	top:43%;
	/*bottom: 2%;*/
	right: 0%;
	padding: 0% 0% 10%;
	padding: 0% 0% 0%;	
	background:#01436f;
	width: 50%;
	z-index: 1;
}
.leadText02-inner{
	padding: 10% 10% 10%;
}	
	
.boxImgR1,.boxImgL1{
	display:flex;
	width:55%;
	margin:0;
	padding:0;
	max-height: 500px;
}
.boxImgR1 img,.boxImgL1 img{
	width:100%;
	object-fit: cover;
}

/***NEWS　アコーディオン***/
.newsBox{
	padding: 0 0 5%; 
}
.news_title {
	font-weight: bold;
	color:#333;
	margin: 0;
	padding: 10px 0 10px 20px;
	position: relative;
	cursor: pointer;
	transition: 0.3s;
	border-bottom: 1px solid #0c032b;
	line-height: 2;
}
.newsCont {
	padding: 2%;
}
.newsCont_inner{display: flex;flex-direction: row;justify-content:space-between;overflow: hidden;}	
.newsPhoto{width: 30%; margin: 0 2% 5% 0;
	}
.newsPhoto p{display: flex;flex-direction: column; width: 100%; margin-bottom: 2%; }
.newsPhoto img{width: 100%; height: 100%; object-fit: cover;}
.newsText{width:68%;}
	
/*客室スライダー*/
.roomSlide{
	margin:0 0 15%;
}	

/*サイト内バナー*/
ul.berryShortBnr { 
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	width: 90%;
	height:auto;
}
ul.berryShortBnr li { 
	flex:0 0 19%;
	margin: 0.9% 0.9% 0 0;
	flex: 1;
}
ul.berryShortBnr li:last-child { margin: 0.9% 0; }
	
/*ACCESSのイラストマップのところ*/
.mapIllust-box{
	display:flex;
	flex-direction:column;	
	width: 100%;
	margin: 0 0;
	height: auto;
}
.mapIllust{
	width: inherit;
	height: inherit;
	position: relative;
	margin: 0 0;
	padding: 0 0;
	top:0;
	left:0;
	}
.mapIllust svg{
	width:100%;
	}
.mapText{
	width: 50%;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	margin: -25% 0 0 50%;
	padding: 2% 10% 2% 2%;
	padding: 2% 2% 2% 2%;
	background: #01436f;
	color: #fff;
	z-index: 1;
	visibility: hidden;
}
.mapText dl{
	margin: 0 0 0 0;
	width: 100%;
	color: #fff;
}
.mapText a{
	color: #fff;
}
.mapText dt{ 
	margin-bottom: 0%; width: 100%; padding: 0 0px; color: #fff; }
.mapText dd{
	margin-bottom: 5%;	
	}
.linkBtn-W{
	background:none;
	display:flex;
	flex-direction:row;
	justify-content: flex-end;
	width:100%;
}
.linkBtn-W_inner{
	display:block;
	position: relative;
	padding:0 0 0 0;
	border-bottom:2px solid #ccc ;
	background-color: transparent;
	width:60%;
	color:#fff;
	text-align:center;
}
.linkBtn-W_inner:after{
  content: '';
  display:block;
  position: absolute;
  padding-bottom:0.2px;
  bottom:0;
  left:0;
  top:100%;/*768以下で50％指定したのでここは100％*/
  width: 100%;
  height: 2px;
  background: #0c032b;
  transition: all 0.5s;
  transform: scale(0,0);
  transform-origin: left;
}
.linkBtn-W_inner:hover::after{
  transform: scale(1,1);	
}
.linkBtn-W_inner:before{
	display:none;
}

 /*マップの上右からスライドイン*/
.maptextin{
 visibility: visible !important;
 animation: ROnV 2s cubic-bezier(.35,.45,.55,1) 1 forwards;
}
 @keyframes ROnV {
  0% {
    transform: translateX(500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}
/*外部リンクバナー*/
.footerbnr-box{
	width: 90%;
	max-width: 664px;
	margin:0 auto;
	padding: 3% 0;
}


	
	
}
/*★1000からはここから*/
@media (min-width: 1000px) {
.openingTxt01{font-size: 4em;}
.leadText02{top:50%;bottom: 5%;} 
.leadText02-inner{margin: 0 0 0;
	padding: 10% 10% 0;}
.leadText02-link{margin: 0 0 5%;}
	

}
/*★1300からはここから*/
@media (min-width: 1300px) {
.leadImg02 img{max-width: 900px;}
.leadText02{top:60%;bottom: 5%;} 
	
	
	
}
/*★1600からはここから*/
@media (min-width: 1600px) {
.leadImg02 img{max-width: 1000px;}
	
	
	
}