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

.FV_caution {
	font-size: 12px;
	font-family: '游ゴシックMedium';
}

.inner_wrap {
	z-index: 1;
	position: relative;
}



/* ----------------------------------------------
お部屋紹介
---------------------------------------------- */
.settleito_lineup {
	li {
		.settle_name {
			&::after {
				background: url("../images/common/arrow_green-circle-line_bottom.svg");
			}
		}
	}
}

.top_img {
	display: flex;
	z-index: 0;
	position: relative;
	top: 30px;
}

.sec_inner_box_desc {
	font-size: clamp(15px, 3vw, 18px);
	text-align: justify;
	line-height: 160%;
	width: 90%;
	margin: 1rem auto;
}

.room_wrap {
	width: 100%;
	margin-block: 1rem;
	.room_box {
		background: var(--main-green);
		border-radius: 20px;
		.room_ttl {
			font-size: clamp(20px, 4vw, 24px);
			padding-block: 1rem;
			color: #FFF;
		}
		.room_box_inner {
			background: var(--pale-green);
			border-radius: 20px;
			padding: 2rem 2rem 3rem;
			.madori {
				width: 100%;
				max-width: 500px;
				height: auto;
				aspect-ratio: 4 / 3;
				background: #FFF;
				margin: 1rem auto;
				position: relative;
				border-radius: 10px;
				overflow: hidden;
				a {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					position: relative;
					& > .madori_img {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;
						max-width: none;
						padding: clamp(12px, 3vw, 20px);
						&.type_vertical {
							max-width: none;
						}
						img {
							display: block;
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}
					&::before {
						content: '';
						background: url("../images/common/icon_zoom.svg");
						background-repeat: no-repeat;
						background-size: contain;
						display: inline-block;
						width: 24px;
						height: 24px;
						right: 20px;
						bottom: 20px;
						position: absolute;
						z-index: 2;
					}
				}
			}
			.room_inner_content {
				margin-top: 2rem;
				.sec_sub_ttl {
					margin-bottom: 1rem;
				}
				.room_inner_content_desc {
					font-size: clamp(15px, 3vw, 18px);
					font-family: '筑紫ARゴシックR';
					text-align: justify;
					line-height: 160%;
				}
			}
		}
	}
}

.setsubi_mark {
	display: grid;
	align-items: flex-start;
	width: 90%;
	margin: 3rem auto;
	li {
		display: flex;
		justify-content: center;
		position: relative;
		&::before {
			content: '';
			background-repeat: no-repeat !important;
			background-size: contain !important;
			display: inline-block;
			position: relative;
		}
		&.autolock {
			&::before {
				background: url("../images/room/mark_autolock.svg");
			}
		}
		&.aircon {
			&::before {
				background: url("../images/room/mark_aircon.svg");
			}
		}
		&.reizouko {
			&::before {
				background: url("../images/room/mark_reizouko.svg");
			}
		}
		&.light {
			&::before {
				background: url("../images/room/mark_light.svg");
			}
		}
		&.IH-1 {
			&::before {
				background: url("../images/room/mark_IH-1.svg");
			}
		}
		&.curtain {
			&::before {
				background: url("../images/room/mark_curtain.svg");
			}
		}
		&.shoes {
			&::before {
				background: url("../images/room/mark_shoes.svg");
			}
		}
		&.closet {
			&::before {
				background: url("../images/room/mark_closet.svg");
			}
		}
		&.washlet {
			&::before {
				background: url("../images/room/mark_washlet.svg");
			}
		}
		&.desk {
			&::before {
				background: url("../images/room/mark_desk.svg");
			}
		}
		&.bed {
			&::before {
				background: url("../images/room/mark_bed.svg");
			}
		}
		&.shampoo {
			&::before {
				background: url("../images/room/mark_shampoo.svg");
			}
		}
		&.internet {
			&::before {
				background: url("../images/room/mark_internet.svg");
			}
		}
		&.indoor-drying {
			&::before {
				background: url("../images/room/mark_indoor-drying.svg");
			}
		}
	}
	&.four_column {
		grid-template-columns: repeat(auto-fit,minmax(60px,1fr));
		gap: 20px;
		li {
			&::before {
				width: 70px !important;
				height: 91px !important;
			}
			&.autolock {
				&::before {
					width: 92px !important;
				}
			}
			&.washlet {
				&::before {
					height: 82px !important;
				}
			}
			&.desk {
				&::before {
					height: 100px !important;
				}
			}
			&.bed {
				&::before {
					width: 100% !important;
					height: 110px !important;
				}
			}
			&.internet {
				&::before {
					width: 100% !important;
					height: 100px !important;
				}
			}
		}
	}
	&.five_column {
		grid-template-columns: repeat(auto-fit,minmax(70px,1fr));
		gap: 1rem;
		li {
			&::before {
				width: 70px !important;
				height: 83px !important;
			}
			&.autolock {
				&::before {
					width: 72px !important;
					height: 83px !important;
				}
			}
			&.curtain {
				&::before {
					width: 65px !important;
				}
			}
			&.shampoo {
				&::before {
					width: 77px !important;
				}
			}
			&.washlet {
				&::before {
					width: 65px !important;
					height: 80px !important;
				}
			}
			&.shoes {
				&::before {
					width: 64px !important;
					height: 84px !important;
				}
			}
			&.closet {
				&::before {
					width: 66px !important;
					height: 84px !important;
				}
			}
			&.desk {
				&::before {
					height: 100px !important;
				}
			}
			&.bed {
				&::before {
					width: 90px !important;
					height: 94px !important;
				}
			}
			&.internet {
				&::before {
					width: 90px !important;
					height: 100px !important;
				}
			}
		}
	}
}

.fee_table_wrap {
	width: 500px;
	.fee_table_inner {
		overflow: hidden !important;
		&:nth-of-type(n+2) {
			margin-top: 1rem;
		}
		.building_name {
			font-size: 14px;
			font-family: '筑紫ARゴシックR';
			text-align: left;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 10px;
			column-gap: 5px;
			&::before {
				content: '■';
			}
			& > span {
				margin-left: 3em;
			}
		}
		.fee_table {
			background: #FFF;
			border-spacing: 0px;
			border-collapse: collapse;
			tr {
				& > * {
					border: 1px solid var(--brown);
					font-size: 14px;
					font-family: '游ゴシックMedium';
					padding: 5px 10px;
				}
				th {
					background: #E9E7E2;
				}
				td:first-child {
					text-align: left;
				}
			}
		}
	}
}

.fee_caution {
	font-size: 14px;
	font-family: '筑紫ARゴシックR';
	line-height: 140%;
	text-align: left;
	margin-top: 5px;
}

.sample_price {
	display: flex;
	margin-block: 2rem;
}

.room_link {
	max-width: 360px;
	width: 80%;
	margin: 0px auto;
	background: #CE8C16;
	border-radius: 10px;
	padding: 17px 10px;
	color: #FFF;
	font-size: clamp(16px, 3.33334vw, 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 10px;
	position: relative;
	&::before {
		content: '';
		background: url("../images/room/icon_room.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 32px;
		height: 32px;
		position: relative;
	}
}

.green_white_table {
    &.green_line_table {
        margin-top: 1rem;
    }
}

.main-slide {
	max-width: 500px;
	width: 100%;
	height: 300px;
	margin: 0px auto;
	overflow: hidden;
	li {
		padding-inline: 0;
	}
}

/* 599px以下：部屋詳細だけ可変。600px以上は元CSSのまま */
@media screen and (max-width: 599px) {
	/* お部屋紹介だけ、common.cssの左右30pxを解除する */
	body#room .sec_inner_box {
		padding-inline: 0;
	}

	/*
	 * .sec_inner_box is a centered grid in common.css. Its auto-sized column and
	 * percentage-width children form a cyclic size calculation below 600px,
	 * which can expand the grid track to millions of pixels and push the room
	 * content far off-screen. Give the mobile grid an explicit, shrinkable track.
	 */
	body#room .sec_inner_box {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}

	body#room .sec_inner_box > * {
		min-width: 0;
	}

	.room_wrap,
	.room_box,
	.room_box_inner {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.room_box_inner {
		padding: clamp(14px, 4vw, 20px)
		         clamp(12px, 4vw, 16px)
		         clamp(24px, 7vw, 32px);
	}

	/* Slider:
	   親に明確な比率を持たせるのでSlick内部のheight:100%でも0にならない */
	.main-slide {
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 5 / 3;
		margin-inline: auto;
	}

	.main-slide .slick-list,
	.main-slide .slick-track,
	.main-slide .slick-slide,
	.main-slide li {
		height: 100%;
	}

	.main-slide li {
		padding-inline: 0;
	}

	.main-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 間取り */
	.room_box_inner .madori {
		width: 100%;
		max-width: 100%;
		aspect-ratio: 4 / 3;
	}

	.room_box_inner .madori img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 500px固定を解除 */
	.fee_table_wrap {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
	}

	.fee_table_wrap .fee_table {
		width: 100%;
	}

	.sample_price,
	.sample_price img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}