/* スライダーの共通部分 */
.slider-region {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1%;
}
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 10%;
}
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
    background: #fff;
}
.slide img {
    width: 100%;
    height: auto;
}
input[type="radio"] {
    display: none;
}/* ボタンのスタイル */
.slider-buttons {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    width: 100%;
}
.slider-buttons label {
    display: inline-block;
    aspect-ratio: 1200 / 675;
    width: 16%;
    margin: 0 0.1%;
    cursor: pointer;
    border: none;
    background-color: #dee2e2;
    background-size: 100% 100%;
    text-align: center;
}
.slider-buttons label:hover {
    background-color: #0056b3;
}



#room-ichiran{margin-top:10%;}

.room-kasou-section-region{
	margin: 5% auto;
	display: block;
}
.room-kasou-section-region:first-of-type{
	margin-top: 10%;
}
.room-kasou-section-content-region{
	width:68%;
	margin: auto;
}
.room-kasou-section-content-region h2{
	margin: 15% auto 5%;
	width:fit-content;
}
.room-kasou-flex{
	display:flex;
	justify-content: space-between;
	margin-bottom:5%;
}
.room-kasou-flex-chi{
	width:45%;
	text-align: justify;
	text-align-last:left;
	
}
.t-justfy{text-align:justify;text-align-last: left;}
.kasou-flex2{
	display:flex;
	justify-content: flex-start;
	column-gap: 5%;
}
.kasou-flex2 p:first-child{
	width:20%;
}
.room-kasou-flex-chi a{
	width: 50%;
	margin: 5% auto auto 0;
	background-color: #535119;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-bottom: 0;
	color: white;
	display: block;
	display: flex;
	justify-content: center;
}


.slider-region {
	display: flex;
	justify-content: center;
	align-items: center;
}
.css-slider-container {
	position: relative;
	width: 100%;
	aspect-ratio:20/19;
	overflow: hidden;
}
.slides {
	display: flex;
	transition: transform 0.5s ease-in-out;
}
.slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	display: none;
	text-align: center;
}
.slide img {
	width: 100%;
	height: auto;
}
input[type="radio"] {
	display: none;
}
/* 表示するスライドを切り替え */
#slide1:checked ~ .slides .slide:nth-child(1),
#slide2:checked ~ .slides .slide:nth-child(2),
#slide3:checked ~ .slides .slide:nth-child(3) {
	display: block;
}

/* ボタンのスタイル */
.slider-buttons {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    width: 100%;
}
.slider-buttons label {
    display: inline-block;
    aspect-ratio: 1200 / 675;
    width: 16%;
    margin: 0 0.1%;
    cursor: pointer;
    border: none;
    background-color: #dee2e2;
    background-size: 100% 100%;
    text-align: center;
}
.slider-buttons label:hover {
    background-color: #0056b3;
}
/* 選択されているスライドに対応するボタンのスタイル */
#slide1:checked ~ .slider-buttons label[for="slide1"],
#slide2:checked ~ .slider-buttons label[for="slide2"] {
    background-color: #868463;
}
#in-page-navigation{
	margin: 10% auto 5%;
	width:68%;
}
#in-page-navigation h2{
	text-align: center;
	margin-bottom:5%;
}
.in-page-flex{
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
	column-gap: 1%;
	text-align: center;
}
#in-page-navigation label{
	margin-top:5%;
	display: block;
}
#in-page-flex-container{
	display:flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 0.5%;
}
/*以下スマホ*/
@media(max-width:750px){
	.in-page-flex {
		display: grid;
		grid-template-columns: 1fr 1fr; /* 2列 */
		column-gap: 1%;
		text-align: center;
	}
	#in-page-navigation label {
		margin-top: 0;
		margin-bottom:5%!important;
	}


	#in-page-navigation{
		width:95%;
	}
	.room-kasou-section-content-region{
		width: 95%;
	}
	.slider-btn,.slider-btn2,.slider-btn3,.slider-btn4,.slider-btn5 {
		aspect-ratio:1/1;
		background-size:cover;
		background-position: center;
	}
	.room-kasou-flex{display:block;}
	.room-kasou-flex-chi{width:100%;}
	.room-kasou-flex-chi a {
		margin: 5% auto auto auto;
	}
	.slider-buttons label {
		width: 4vw;
		height: 4vw;
	}
}