#news-button{
	width: fit-content;
	color: #1a1a1a !important;
	margin: 1.5% 15% auto auto;
	display: block;
}
#logo2{
	width:28%;
	position: absolute;
	top: 46.5%; 
	left: 48.5%; 
	z-index: 11;
	transform: translate(-50%, -50%); 
}
#awa{
	width:60%;
	position: absolute;
	top: 26%; 
	left: 20%; 
	z-index: 11;
}
.slider-region{
	position:relative;
	width:100%;
	margin: auto;
	height:0;
	padding-bottom: 56%;/*要調整*/
}
.slider-region li{
	height:0;
	padding-bottom: 56%;/*要調整*/
	background-size: cover;/*背景画像をの全てを表示*/
}
.slider_fade {
	position: relative;
	padding: 0;
	margin: 0;
}
.slider_fade img{
	width: 100%;
}
.slider_fade > li {
    position: absolute;
    list-style: none;
    visibility: visible;
    opacity: 0;
    animation-name: anime_slider_fade;
    animation-duration: 20s;  /* アニメーション全体の時間を20秒に設定 */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    width: 100%;
	
}

/* それぞれのスライドに均等に遅延を設定 */
.slider_fade > li:nth-of-type(1) {
    animation-delay: 0s;
}
.slider_fade > li:nth-of-type(2) {
    animation-delay: 4s;  /* 4秒遅れて表示 */
}
.slider_fade > li:nth-of-type(3) {
    animation-delay: 8s;  /* 4秒遅れて表示 */
}
.slider_fade > li:nth-of-type(4) {
    animation-delay: 12s;  /* 4秒遅れて表示 */
}
.slider_fade > li:nth-of-type(5) {
    animation-delay: 16s;  /* 4秒遅れて表示 */
}
.slider_fade > li:nth-of-type(6) {
    animation-delay: 19s;  /* 3秒遅れて表示 */
}

@keyframes anime_slider_fade {
    0% {
        visibility: visible;
        opacity: 0;
    }
    12.25% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    33.33% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

#fv-txt{
	width:50%;
	position:absolute;
	bottom:0%;
	left: 5%;
	z-index: 30;
}


@keyframes slide-right {
  0% {
    transform: translateX(0);
     /* アニメーションの開始時点で少しフェードインさせる場合 */
  }
  50% {
    
  }
  100% {
    transform: translateX(100%); /* 右方向へ移動 */
  }
}
@keyframes slide-left {
  0% {
    transform: translateX(0);
     /* アニメーションの開始時点で少しフェードインさせる場合 */
  }
  50% {
    
  }
  100% {
    transform: translateX(-100%); /* 左方向へ移動 */
  }
}

/* 画像のスタイル */
.yuge-r {
	width:61%;
	height: 100vh;
	position: fixed;
	left: 38%; /* 中央に配置 */
	top: 0%;
	/*transform: translate(-50%, -50%);*/
	animation: slide-right 8s ease forwards; /* アニメーションの指定 */
	z-index: 9999;
	opacity: 1;
	pointer-events: none;
}
.yuge-r img,.yuge-l img{height:100%;}
.yuge-l {
	width:61%;
	height: 100vh;
	position: fixed;
	left: 3%; /* 中央に配置 */
	top: 0%;
	/*transform: translate(-50%, -50%);*/
	animation: slide-left 8s ease forwards; /* アニメーションの指定 */
	z-index: 9999;
	opacity: 1;
	pointer-events: none;
}
.yuge-fuwa,.yuge-fuwa2,.yuge-fuwa3,.yuge-fuwa4{
	transform: translate(-50%, -50%);
	position:absolute;
	z-index: 1;
	opacity: 0;
}
.fuwafuwa{
	animation: fuwafuwa 2s ease-in-out -13s infinite alternate;
}
.yuge-fuwa{
	animation: yuge linear 18s infinite 2s;
	left: 20%;
	top: 20%;
	width:7%;
}
.yuge-fuwa2{
	animation: yuge2 linear 18s infinite 4s;
	left: 62%;
	top: 20%;
	width:6.9%;
}
.yuge-fuwa3{
	animation: yuge linear 13s infinite 8s;
	left: 90%;
	top: 20%;
	width:4.9%;
}
.yuge-fuwa4{
	animation: yuge2 linear 13s infinite 9s;
	left: 5%;
	top: 20%;
	width:4%;
}
	

@keyframes yuge{
	0% {
		transform:translateY(40vh); 
		opacity: 0;
	}
	30%{opacity:0.7;}
	80% {opacity: 0.6;}
	100% {
		transform:translateY(0px);
		opacity: 0;
	}
}
@keyframes yuge2{
	0% {
		transform:translateY(40vh); 
		opacity: 0;
	}
	30%{opacity:0.7;}
	80% {opacity: 0.6;}
	100% {
		transform:translateY(  0px);
		opacity: 0;
	}
}
@keyframes fuwafuwa{
	0% {
		transform:translateY(-10px);
	}
	100% {
		transform:translateY(0px);
	}
}

#awa-bottom{position:absolute;bottom:-51.5%;width:100%;z-index:11;}

.section-class{
	position:relative;
	width:90%;
	margin: auto auto 4%;
}
#spa-region,#stay-region,#food-region,#relax-region{
	background-size:100% 100%;}
#spa-region{aspect-ratio:35/19.5;}
#stay-region{aspect-ratio:35/19.2;}
#food-region{aspect-ratio:35/17.9;}
#relax-region{aspect-ratio:35/18;}
/**/
#spa-region{
	margin: 10% auto 4%;
	z-index: 12;
}
.yoyaku-button1,.yoyaku-button2,.yoyaku-button3,.yoyaku-button4{
	position: absolute;
	width: 15%;
}
.yoyaku-button1{
	bottom: 19%;
	left: 23%;
}
.yoyaku-button2{
	bottom: 22%;
	left: 55%;
}
.yoyaku-button3{
	bottom: 21%;
	left: 23%;
}
.yoyaku-button4{
	bottom: 15%;
	left: 55%;
}
.yoyaku-button5{
	position: absolute;
	width: 35%;
	top: 80%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
}
#floor-access-region{
	display:flex;
	justify-content: space-between;
	margin: auto;
	width:70%;
	align-items: center;
}
#floor-region,#access-region{
	width:45%;
	position:relative;
}
#rekishi{
	width:100%;
	margin:5% auto -3% auto;
}
news-region{margin-top:5%;}
#news-region h2{    
	position: relative;
    z-index: 12;
    text-align: center;
}
#toukou-flex{
	width:70%;
	margin:auto;
	display:flex;
	position: relative;
	z-index: 12;
	align-items: flex-start;
	justify-content: space-between;
}
.eyecatch{
	width:100%;
	aspect-ratio:40/25;
	border-radius:20px;
}
.news-ymd{
	text-align: center;
    margin: 5% auto 1%;
    display: flex;
    justify-content: center;
	width: fit-content;
	position:relative;
}
.toukou-chi{width:31%;}
.news-region{
	
}
#toukou-flex h3{}
.section-txt-flex{
	display:flex;
	align-items: flex-start;
	justify-content: center;
	position: absolute;
	width:fit-content;
}
.section-txt-flex h2{
	writing-mode: vertical-rl;
	color: #fef0cd;
}
.section-txt-flex p{
	white-space: nowrap;
	line-height: 2vw;
}
#spa-txt-region{
    top: 32%;
	left: 18%;
}
#stay-txt-region{
	top: 29%;
	right: 16%;
}
#food-txt-region{
    top: 25%;
	left: 18%;
}
#relax-txt-region{
    top: 25%;
	right: 13%;
}
#spa-txt-region h2,
#food-txt-region h2{
	margin-right: 20%;
}
#stay-txt-region h2,
#relax-txt-region h2{
	margin-left: 15%;
}

#stay-txt-region,
#relax-txt-region{
	flex-direction: row-reverse;
}
.yoyaku-border{
	border-top: 1px solid #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
	padding:1.5% 0 1.5% 1%;
	line-height: 4vw;
}
#floor-access-region h3{
	position: absolute;
	top: 57%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*横スクロール****************************************/

#rekishi-region{
aspect-ratio:1921/1277;
position:relative;
background-size:100% 100%;
padding-bottom: 10%;
}
.rekishi-back-ue{margin-top:5%;}
#makimono-hidari {
	position: absolute;
	top: 3vw;
	left: 5vw;
	height: 93%;
	z-index: 10;
	width:10vw;
}

#makimono-hidari img{
height: 100%;
}

#rekishi-back-hidari{
position:absolute;
left: -60%;
top: 0;
z-index: 1;
}

#makimono-hidari-z{
position: relative;
z-index: 2;
}
.area {
	top: 5%!important;
	height: 90vh !important;
	max-height: 90vh !important;
	position: relative;
	/* padding-left は、巻物の左側固定部分の幅と合わせると管理しやすいです */
	/* 例えば、#makimono-hidari の left+width と合わせるなど */
	/* ここではJSで柔軟に対応するため一旦削除してもOKです */
	overflow: hidden; /* areaからはみ出た部分を隠す */
	pointer-events: none;
padding-top: 10%!important;
padding-bottom: 10%!important;
}

/* style.css (またはお使いのCSSファイル) */
.js-wrap {
	will-change: transform, width; /* transform と width の変更をブラウザに伝える */
}
.js-item {
	will-change: width, height; /* width と height の変更をブラウザに伝える */
}
.wrap {
	display: flex;
	position: absolute;
	/* top, left はJSで制御するため、ここでは基本設定のみ */
	top: 0;
	left: 0;
	height: 100%;
	align-items: center; /* アイテムを垂直中央に */
}
.item {
	position: relative; /* 子要素(文字など)の基準点として必要 */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0; /* アイテムが縮まないように */
	top:4%;
	 /*left: -26%; */ 
	width: 33.3% !important;
}
.item01,.item01 img{
	aspect-ratio: 6780 / 2512;
	font-size: 125%!important;
}
.item01 img{height:100%;}

@media(max-width:750px){
	/*.js-wrap {
		will-change: transform!important;
		transform: translateZ(0)!important; 
	}
	.js-area {
			transform: translateZ(0)!important;
			will-change: transform!important;
			touch-action: auto!important;
		overflow: visible!important;;
		}*/
	.area{pointer-events:auto!important;}
}
/*横スクロールここまで*********************************************/
.rekishi-back-ue{position:relative;}
#rekishi-region h2{
	position:absolute;
	top: 0; 
	left: 0;
	width:100%;
	text-align: center;
	z-index: 1;
	margin-bottom:0;
}
#makimono-p1,
#makimono-p2,
#makimono-p3,
#makimono-p4,
#makimono-p5,
#makimono-p6{
	position:absolute;
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	line-height: 200%;
	color:#603813;
	font-family: "DNP 秀英にじみ明朝 Std L", serif;
	letter-spacing: -0.01vw;
}
#makimono-p1{
	top: 40%;
	left: 66%;
}
#makimono-p2{
	top: 30%;
	left: 56.5%;
}
#makimono-p3{
	top: 17%;
	left: 44.5%;
}
#makimono-p4{
	top: 45%;
	left: 32.5%;
}
#makimono-p5{
	top: 32%;
	left: 19.5%;
}
#makimono-p6{
	top: 15%;
	left: 7%;
}

@media(max-width:750px){
	#makimono-hidari{
		top: 9vw;
		left: -10vw;
		height: 93%;
		width: 23vw;
	}
	.item{
		top:3%;
		left:-1%;
		height: 72vh !important;
	}
	.slider-region li ,.slider-region{
		padding-bottom: 142%;
	}
	#logo2 {
		width: 70%;
		top: 52.5%;
		left: 50%;
	}
	#awa-bottom{
		bottom:-16.5%;
	}
	#awa {
		width: 98%;
		top: 54%;
		left: 2%;
	}
	.yuge-fuwa {
		left: 13%;
		top: 20%;
		width: 16%;
	}
	.yuge-fuwa2 {
		left: 62%;
		top: 20%;
		width: 13%;
	}
	.yuge-fuwa3 {
		left: 90%;
		top: 20%;
		width: 9%;
	}
	.yuge-fuwa4 {
		left: -2%;
		top: 20%;
		width: 9%;
	}
	#toukou-flex{display:block;}
	.toukou-chi{
		width:100%;
		margin-bottom:20%;
	}
	.section-class{width:110%;}
	.section-class{
		margin-bottom:10%;
		margin-left: -10%!important;
	}
	#spa-region{aspect-ratio:1817/2602;}
	#stay-region{aspect-ratio:1753/2658;}
	#food-region{aspect-ratio:1817/2602;}
	#relax-region{aspect-ratio:1753/2625;}
	#spa-txt-region h2, #food-txt-region h2 {
		margin-right: 10%;
	}
	#spa-txt-region,#food-txt-region {
		top: 58%;
		left: 22%;
	}
	#stay-txt-region{
		top: 57%;
		right: 13%;
	}
	#relax-txt-region {
		top: 58%;
		right: 7%;
	}
	.yoyaku-button1, .yoyaku-button2, .yoyaku-button3, .yoyaku-button4 {
		width: 40%;
	}
	.yoyaku-button1,.yoyaku-button3 {
		bottom: 2.5%;
		left: 30%;
	}
	#stay-txt-region h2{
		margin-left: 10%;
	}#relax-txt-region h2 {
		margin-left: 0;
		z-index: 0;
		line-height: 13vw!important;
	}
	#relax-region p,#relax-region .fs18{
		position: relative!important;
        z-index: 1!important;
		text-rendering: optimizeLegibility!important;
		font-size:2.5vw!important;
		letter-spacing: 0.01vw !important;
	}
	@supports (-webkit-touch-callout: none) {
		#relax-region p,#relax-region .fs18{
			font-size:2.8vw!important;
		}
	}
	.section-class .fs18{
		font-size:2.8vw!important;
		letter-spacing: 0.01vw !important;
	}
	.section-class .fs140{font-size:13vw!important;}
	
	.yoyaku-button2 {
		bottom: 6%;
		left: 21%;
	}
	.yoyaku-button4 {
		bottom: 5%;
		left: 21%;
	}
	.yoyaku-border{
		position:absolute;
		top:-21%;
		right: 12%;
	}
	#floor-access-region{
		width:90%;
		display:block;
	}
	#floor-region, #access-region {
		width: 100%;
		margin-bottom:15%;
	}
	#makimono-p1, #makimono-p2, #makimono-p3, #makimono-p4, #makimono-p5, #makimono-p6 {
		line-height: 8vw!important;
	}
	.toukou-chi:last-of-type{margin-bottom:0;}
	#news-button{margin:5% 15% auto auto;}
	
	/*以下スマホサイズの巻物アニメーション*/
	#sp-makimono-region{
		        width: 95%;
        margin-right: 0;
        margin-left: auto;
        overflow-x: scroll;
        padding: 20% 35% 20% 0;
        direction: rtl;
	}
	#sp-makimono-region img{
		width:575%;
		max-width:unset;
	}
	#rekishi-region-sp{
		background-size:100% 100%;
		position: relative;
	}
	#sp-makimono-hidari{
		position: absolute;
        width: 15%;
        top: 7%;
        left: -6%;
        height: 85%;
	}
	#rekishi-region-sp h2{
		margin: auto auto -10%;
		text-align: center;
		padding-top: 10%;
	}
	.simplebar-track {/*使わないかも*/
		background-color: #84e5ef;
		/*border-radius: 10px;*/
		margin-top:5%;
	}
}