/* CSS Document */
#stay1,#stay2,#stay3{width:100%;}

.carousel-container,.carousel-container2 {
  position: relative;
  width: 85%;
  margin: auto 0 auto auto;
  overflow: hidden;
}
.carousel-container2 {
  margin: 5% auto auto 0;
}

.carousel {
  position: relative;
  display: flex;
}

.slides,.slides2 {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 400%;
}
.slides2 {
  width: 300%;
}

.slide,.slide2 {
  width: 100%;
  flex: 0 0 100%;
  background: transparent;
  color: #1a1a1a;
  display: flex;
  justify-content: right;
  align-items: center;
  font-size: 1.5rem;
	position:relative;
	user-select: none;
}
.slide2{
  justify-content: flex-start;}

.slide-image{
	width:73%!important;
	border-top-left-radius:2vw;
	border-bottom-left-radius:2vw;
	border: solid 1vw #fedb75;
	margin-right: 1px;
}
.slide-image2{
	width:73%!important;
	border-top-right-radius:2vw;
	border-bottom-right-radius:2vw;
	border: solid 1vw #fedb75;
	margin-left: 1px;
}
.slide-text-l{
	position: absolute;
	width: 20%;
	bottom: 1%;
	left: 28%;
	border-top-right-radius: 2vw;
	overflow: hidden;
}
.slide-text-r{
	position: absolute;
	width: 20%;
	bottom: 1%;
	right: 28%;
	border-top-left-radius: 2vw;
	overflow: hidden;
}

/* Hide radio buttons */
input[type="radio"] {
  display: none;
}

/* Slide positions */
input[id*="slider1-slide1"]:checked ~ .slides {
  transform: translateX(0%);
}
input[id*="slider1-slide2"]:checked ~ .slides {
  transform: translateX(-100%);
}
input[id*="slider1-slide3"]:checked ~ .slides {
  transform: translateX(-200%);
}
input[id*="slider1-slide4"]:checked ~ .slides {
  transform: translateX(-300%);
}
input[id*="slider1-slide5"]:checked ~ .slides {
  transform: translateX(-400%);
}

/*ここから２*/

input[id*="slider2-slide1"]:checked ~ .slides2 {
  transform: translateX(0%);
}
input[id*="slider2-slide2"]:checked ~ .slides2 {
  transform: translateX(-100%);
}
input[id*="slider2-slide3"]:checked ~ .slides2 {
  transform: translateX(-200%);
}
input[id*="slider2-slide4"]:checked ~ .slides2 {
  transform: translateX(-300%);
}
input[id*="slider2-slide5"]:checked ~ .slides2 {
  transform: translateX(-400%);
}

/* Duplicate for slider2, slider3, slider4 with updated IDs */

/* Navigation buttons */
.navigation {
  position: absolute;
  top: 87%;
	left: 9%;
  width: 11%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}
.navigation2 {
  position: absolute;
  top: 87%;
	right: 9%;
  width: 11%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.nav {
  width: 40%;
  aspect-ratio:277/419;
  background-size:cover;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

#syokuji{
	position:absolute;
	width:37%;
	left: 0;
	top:-21%;
	z-index: 2;
	transform: translateY(50%);
}
#desert{
	position:absolute;
	width:37%;
	right: 0;
	top:-21%;
	z-index: 2;
	transform: translateY(50%);
}


/*.nav::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}*/
/*.nav.prev::after {
  transform: rotate(135deg);
}*/

/*.nav.next::after {
  transform: rotate(-45deg);
}*/
.prev{
	background-image:url(https://m-ine.net/yunosaka/img/food/back.png);
}

.next{
	background-image:url(https://m-ine.net/yunosaka/img/food/next.png);
}

/* ラジオボタンを隠す */
input[type="radio"] {
  display: none;
}

/* スライドの位置設定 */
input[id*="slider1-slide1"]:checked ~ .slides {
  transform: translateX(0%);
}
input[id*="slider1-slide2"]:checked ~ .slides {
  transform: translateX(-100%);
}
input[id*="slider1-slide3"]:checked ~ .slides {
  transform: translateX(-200%);
}
input[id*="slider1-slide4"]:checked ~ .slides {
  transform: translateX(-300%);
}

/*ここから２*/

input[id*="slider2-slide1"]:checked ~ .slides {
  transform: translateX(0%);
}
input[id*="slider2-slide2"]:checked ~ .slides {
  transform: translateX(-100%);
}
input[id*="slider2-slide3"]:checked ~ .slides {
  transform: translateX(-200%);
}
input[id*="slider2-slide4"]:checked ~ .slides {
  transform: translateX(-300%);
}

/* ナビゲーションボタンをデフォルトで非表示 */
.nav {
  display: none;
}

/* スライド1がアクティブな場合 */
input[id*="slider1-slide1"]:checked ~ .navigation label[for="slider1-slide4"].prev,
input[id*="slider1-slide1"]:checked ~ .navigation label[for="slider1-slide2"].next {
  display: flex;
}

/* スライド2がアクティブな場合 */
input[id*="slider1-slide2"]:checked ~ .navigation label[for="slider1-slide1"].prev,
input[id*="slider1-slide2"]:checked ~ .navigation label[for="slider1-slide3"].next {
  display: flex;
}

/* スライド3がアクティブな場合 */
input[id*="slider1-slide3"]:checked ~ .navigation label[for="slider1-slide2"].prev,
input[id*="slider1-slide3"]:checked ~ .navigation label[for="slider1-slide4"].next {
  display: flex;
}

/* スライド4がアクティブな場合 */
input[id*="slider1-slide4"]:checked ~ .navigation label[for="slider1-slide3"].prev,
input[id*="slider1-slide4"]:checked ~ .navigation label[for="slider1-slide1"].next {
  display: flex;
}


/*ここから２*/
/* スライド1がアクティブな場合 */
input[id*="slider2-slide1"]:checked ~ .navigation2 label[for="slider2-slide4"].prev,
input[id*="slider2-slide1"]:checked ~ .navigation2 label[for="slider2-slide2"].next {
  display: flex;
}

/* スライド2がアクティブな場合 */
input[id*="slider2-slide2"]:checked ~ .navigation2 label[for="slider2-slide1"].prev,
input[id*="slider2-slide2"]:checked ~ .navigation2 label[for="slider2-slide3"].next {
  display: flex;
}

/* スライド3がアクティブな場合 */
input[id*="slider2-slide3"]:checked ~ .navigation2 label[for="slider2-slide2"].prev,
input[id*="slider2-slide3"]:checked ~ .navigation2 label[for="slider2-slide4"].next {
  display: flex;
}

/* スライド4がアクティブな場合 */
input[id*="slider2-slide4"]:checked ~ .navigation2 label[for="slider2-slide3"].prev,
input[id*="slider2-slide4"]:checked ~ .navigation2 label[for="slider2-slide1"].next {
  display: flex;
}

/* 同様に他のスライダー (slider2, slider3, slider4) のセレクタも追加 */

#washitsu,#syukuhaku-furo,#child{
	position: absolute;
    left: 1%;
    top: 13%;
    padding: 7%;
    z-index: 2;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    aspect-ratio: 2308 / 1717;
}
#youshitsu,#breakfast{
	position: absolute;
    right: 0;
    top: 16%;
    z-index: 2;
    padding: 7%;
    z-index: 2;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    aspect-ratio: 2308 / 1717;
}
#fv-img-region{
	margin:-2.5% auto auto 0;
}
#fv-en{top:2.5%;}
#fv-ja{top:9.5%;}

#syukuhaku-furo-region,#breakfast-region,#child-region{
	display:flex;
	justify-content: flex-end;
	margin-top: 5%;
}
#breakfast-region{
	justify-content: flex-start;
	margin: 10% auto auto 0;
}
#syukuhaku-furo-region img,#breakfast-region img,#child-region img{
	width: 73% !important;
    border-top-left-radius: 3.5vw;
    border-bottom-left-radius: 3.5vw;
    border: solid 1vw #fedb75;
}
#breakfast-region img{
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
    border-top-right-radius: 3.5vw;
    border-bottom-right-radius: 3.5vw;
}
#child-flex1{
	width:70%;
	margin: 5% auto 2.5%;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.child-flex2{
	width:49%;
	display:flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}
.child-flex2 img{
	width:48%;
	border-radius: 2vw;
	border: solid 0.75vw #fedb75;
	aspect-ratio:297/260;
}
#check-in-out{
	width:70%;
	margin: auto auto 5%;
	text-align:center;
	background-color:#fedb75;
	border-radius: 2vw;
	padding-top: 1%;
	padding-bottom: 1%;
}
#check-in-out h3,#check-in-out p{
	margin-bottom:0;
	text-align: center;
	text-align-last: center;
	white-space: nowrap;
	line-height:2.5vw!important;
	font-weight: 600;
}
.check-flex{
	display:flex;
	justify-content: center;
	align-items: baseline;
	column-gap:1vw;
}
.check-flex2{
	display:flex;
	justify-content:center;
	align-items:center;
	column-gap:1vw;
}
#amenity{
	background-color:#f5f0e7;
	padding-top:5%;
	padding-bottom: 10%;
}
#amenity-flex1{
	display:flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.4vw;
	width:70%;
	margin: 3% auto;
}
.amenity-flex2{
	display:flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.4vw;
}
.amenity-flex2 img{width:32.5%;}
#amenity-ichiran{
	width:53%;
	margin: auto auto 3%;
	text-align: justify!important;
	text-align-last: left!important;
}
#amenity h2,
#amenity h3,
#amenity p{
	margin-bottom:0;
	text-align: center;
	text-align-last: center;
}
#amenity-ichiran span{display:inline-block;}
#amenity h3{margin-top: 5%; margin-bottom:2%;}
#amenity-ichiran{text-align-last:left!important;}
.carousel-container h3,carousel-container2 h3{margin-bottom:0;}

#tenbou-jikan{
	position:absolute;
	bottom: 10%;
	left: 8%;
	text-align: center;
	margin-bottom:0;
	text-align-last: center;
	font-weight: 600;
}
@media(max-width:750px){
	#fv-en-sp {
        width: 50%;
    }
	#slider1,.carousel-container, .carousel-container2{
		width: 90%;
		margin: auto;
		border-radius: 4vw;
		padding-top: 35%;
		padding-bottom: 25%;
	}
	#washitsu, #syukuhaku-furo, #child, #youshitsu, #breakfast {
		position: absolute;
		left: 17%;
		top: 1%;
		padding: 17%;
		width: 65%;
	}
	@supports (-webkit-touch-callout: none) {
		
	#washitsu, #syukuhaku-furo, #child, #youshitsu, #breakfast {
		position: absolute;
		left: 17%;
		top: 1%;
		padding: 17%;
		width: 65%;
	}
		#child-region,#breakfast-region,#syukuhaku-furo-region{
				padding-top: 37.5%!important;
		}
	}
	#syukuhaku-furo{
		padding:17% 0 14%;
	}
	.slide-image,
	.slide-image2,#syukuhaku-furo-region img, #breakfast-region img, #child-region img {
		width: 100% !important;
    	border-radius: 4vw;
	}
	.navigation,
	.navigation2{
		top: 90%;
		left: 50%;
		width: 30%;
		transform: translate(-50%, 50%);
	}
	@supports (-webkit-touch-callout: none) {
		#slider1,.carousel-container{
			width: 90%!important;
			margin: auto!important;
			border-radius: 4vw!important;
			padding-top: 25%!important;
			padding-bottom: 20%!important;
		}
		.navigation{
			top: 75%!important;
			width: 30%!important;
			transform: translate(-50%, 50%)!important;
		}
		#washitsu{
			position: absolute!important;
			left: 17%!important;
			top: 5%!important;
			padding: 17%!important;
			width: 65%!important;
		}
	}
		#breakfast-region{margin:auto;}
	#awa-bottom {
        bottom: -10%;
    }
	#tenbou-jikan{
		transform:translateX(-50%);
		left:50%;
	}
	@supports (-webkit-touch-callout: none) {
		#tenbou-jikan{
			bottom: 8%;
		}
	}
	#syukuhaku-furo h3{line-height: 7vw!important;}
	#breakfast-region,#child-region{
		padding-bottom:0;
	}
	#breakfast-region{margin-bottom: 10%;}
	#child-flex1{width:90%;display: block;}
	.child-flex2{
		width:100%;
		margin-bottom: 5%;
	}
	.child-flex2 img{border-radius:5vw;}
	.check-flex {
		justify-content: flex-start;
		padding-left: 7.5%;
	}
	#check-in-out {
		width: 90%;
		border-radius:5vw;
		padding-top: 5%;
		padding-bottom: 4%;
		margin-bottom: 10%;
	}
	.check-flex2{display:block;}
	#check-in-out h3,#check-in-out p{
		line-height: 7.5vw!important;
	}
	#amenity{padding-top:10%;}
	#amenity-flex1 {
		display: block;
		width:90%;
	}
	.amenity-flex2{
		justify-content: space-between;
	}
	.amenity-flex2 img{
		width:31.5%;
		margin-bottom: 3%;
	}
	#amenity-ichiran{
		width:90%;
		text-align: center!important;
		text-align-last: center!important;
	}
}
