@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

/* 共通部分
*****************************************************************/

.second-main{
	padding-bottom: 24px;
	@media (width < 810px) {
		padding-bottom: 20px;
	}
}
.second-comments__wrap{
	max-width: 1300px;
}

/* 詳細
*****************************************************************/
.roomplan-detail__outer{
	font-family: var(--font_min);
	padding: 80px 0 40px;
	@media (width < 810px) {
		padding: 32px 0 24px;
	}
}
.roomplan-detail__wrap{
	max-width: 1300px;
}
.roomplan-detail__container{
	display: flex;
	gap: 24px;
	@media (width < 810px) {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
}
.roomplan-detail__inner{
	width: 400px;
	flex-shrink: 0;
	@media (width < 1170px) {
		width: 380px;
	}
	@media (width < 810px) {
		display: contents;
	}
}

.roomplan-detail__modelroom{
	width: 100%;
	margin-bottom: 32px;
	@media (width < 810px) {
		margin-bottom: 24px;
		margin-inline: auto;
		max-width: 360px;
	}
}
.roomplan-detail__modelroom__txt{
	margin-top: 8px;
	text-align: left;
	font-size: clamp(14px, 4.082px + 1.224vw, 20px);/*20~14(1300~810)*/
	font-weight: 500;
	color: #A51B20;
}

.roomplan-detail__contents{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	@media (width < 810px) {
		gap: 10px;
		max-width: 360px;
		margin-inline: auto;
	}
}
.roomplan-detail__type{
	flex-shrink: 0;
	display: flex;
	font-size: clamp(18px, 8.082px + 1.224vw, 24px);/*24~18(1300~810)*/
	font-family: var(--font_eb);
	font-weight: 400;
	line-height: 1.1;
	dt, dd{
		display: inline-block;
		padding: 0.2em 0.4em;
	}
	dt{
		background: var(--main_c);
		color: #fff;
	}
	dd{
		background: #E7E7E6;
		color: var(--main_c);
	}
	.txt_large{
		font-size: 2.22em;
	}
	.txt_middle{
		font-size: 1.8em;
	}
}
.roomplan-detail__list{
	text-align: left;
	font-size: clamp(14px, 4.082px + 1.224vw, 20px);/*20~14(1300~810)*/
	font-weight: 500;
	line-height: 1.4;
	color: #494544;
	@media (width < 500px) {
		flex-grow: 1;
	}
	>li{
		padding-left: 1em;
		position: relative;
		&::before{
			content: "+";
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}

.roomplan-detail__area{
	width: 100%;
	margin-top: 16px;
	border-top: 1px solid #494544;;
	@media (width < 810px) {
		margin-inline: auto;
		max-width: 360px;
	}
}
.roomplan-detail__area__item{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	color: #494544;
	&:first-of-type{
		margin-top: 0;
	}
	&:last-of-type{
		border-top: 1px solid #494544;
		border-bottom: 1px solid #494544;
		padding: 4px 0;
	}
	dt{
		width: 7.5em;
		flex-shrink: 0;
		font-size: clamp(14px, 10.694px + 0.408vw, 16px);/*16~14(1300~810)*/
		font-weight: 500;
		line-height: 1.4;
		text-align: justify;
		text-align-last: justify;
	}
	dd{
		flex-grow: 1;
		font-size: clamp(17px, 12.041px + 0.612vw, 20px);/*20~17(1300~810)*/
		font-weight: 500;
		line-height: 1.4;
		text-align: right;
		.txt_large{
			font-size: 1.9em;
		}
		.txt_middle{
			font-size: 1.375em;
		}
	}
}
.roomplan-detail__place{
	width: 100%;
	margin-top: 48px;
	@media (width < 810px) {
		margin-top: 32px;
		order: 3;
	}
}

.roomplan-detail__facility{
	width: 100%;
	margin-top: 48px;
	@media (width < 810px) {
		margin-top: 32px;
		margin-inline: auto;
		max-width: 500px;
		order: 1;
	}
}
.roomplan-detail__facility__item{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	@media (width < 500px) {
		gap: 8px;
	}
	+.roomplan-detail__facility__item{
		margin-top: 32px;
		@media (width < 810px) {
			margin-top: 24px;
		}
	}
}
.roomplan-detail__facility__img{
	flex-shrink: 0;
	width: 40%;
	position: relative;
}
.roomplan-detail__facility__number{
	width: 28px;
	height: 28px;
	display: grid;
	place-content: center;
	font-size: 18px;
	font-family: var(--font_gothic);
	font-weight: 500;
	line-height: 1.2;
	background: #BF0008;
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 2px 2px 5px #00000066;
	position: absolute;
	top: 4px;
	left: 4px;
}
.roomplan-detail__facility__cap{
	text-align: right;
	font-family: var(--font_gothic);
	font-size: clamp(10px, 6.694px + 0.408vw, 12px);/*12~10(1300~810)*/
	font-weight: 500;
	line-height: 1.4;
	position: absolute;
	right: 8px;
	bottom: 12px;
}
.roomplan-detail__facility__block{
	flex-grow: 1;
}
.roomplan-detail__facility__ttl{
	text-align: left;
	font-size: clamp(18px, 8.082px + 1.224vw, 24px);/*24~18(1300~810)*/
	font-weight: 700;
	line-height: 1.4;
	color: var(--main_c);
}
.roomplan-detail__facility__list{
	margin-top: 10px;
	@media (width < 500px) {
		margin-top: 8px;
	}
	>li{
		padding: 0.3em 0.6em;
		background: #90D3EC;
		color: var(--main_c);
		word-break: keep-all;
		font-family: var(--font_gothic);
		font-size: clamp(13px, 8.041px + 0.612vw, 16px);/*16~13(1300~810)*/
		font-weight: 600;
		line-height: 1.3;
		border-radius: 6px;
		margin-top: 6px;
		@media (width < 810px) {
			border-radius: 4px;
		}
		@media (width < 500px) {
			margin-top: 4px;
		}
		&:first-of-type{
			margin-top: 0;
		}
	}
}
.roomplan-detail__facility__note{
	text-align: left;
	font-family: var(--font_gothic);
	font-size: clamp(8px, 4.694px + 0.408vw, 10px);/*10~8(1300~810)*/
	font-weight: 500;
	line-height: 1.4;
	color: #494544;
	margin-top: 6px;
	padding-left: 1em;
	text-indent: -1em;
}

.roomplan-detail__plan{
	flex-grow: 1;
	@media (width < 810px) {
		display: contents;
	}
}
.roomplan-detail__img{
	width: 100%;
	@media (width < 810px) {
		margin-top: 32px;
		margin-inline: auto;
		max-width: 500px;
	}
}
.roomplan-detail__pdf{
	margin-top: 56px;
	@media (width < 810px) {
		display: none;
	}
	>a {
		padding: 0.4em 1.8em;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.5em;
		background: var(--main_c);
		color: #fff;
		font-family: var(--font_gothic);
		font-size: clamp(20px, 6.776px + 1.633vw, 28px);/*28~20(1300~810)*/
		font-weight: 500;
		border-radius: 8px;
		transition: opacity .3s ease-out;
		&::before {
			flex-shrink: 0;
			content: "";
			display: inline-block;
			width: 1.2em;
			height: 1.2em;
			background: url("../../images/roomplan/mark_print.svg") center center/ 100% auto no-repeat;
		}
		&:hover {
			text-decoration: none;
			opacity: 0.7;
		}
	}
}
.roomplan-detail__bnr{
	width: 100%;
	margin-top: 56px;
	@media (width < 810px) {
		margin-top: 40px;
		margin-inline: auto;
		max-width: 600px;
		order: 5;
	}
	a{
		transition: opacity .3s ease-out;
		&:hover{
			opacity: 0.7;
		}
	}
}