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

.floor_select_wrap {
	background: #FCFAF4;
	border-radius: 20px;
	padding: 2rem;
	font-size: clamp(20px, 4vw, 24px);
	color: var(--brown);
	.floor_select_ttl {
		text-align: center;
	}
	.floor_select_inner {
		display: grid;
		row-gap: 1rem;
		margin-block: 1rem;
		dl {
			display: grid;
			grid-template-columns: 100px auto;
			align-items: center;
			line-height: 1;
			dt {
				display: flex;
				align-items: center;
				column-gap: 10px;
				position: relative;
				&::before {
					content: '';
					background: var(--brown);
					display: inline-block;
					width: 9px;
					height: 30px;
					position: relative;
				}
			}
			dd {
				.floor-select {
					border: 1px solid var(--brown);
					appearance: none;           /* ブラウザ標準の矢印を消す */
					-webkit-appearance: none;
					-moz-appearance: none;
					border-radius: 10px;
					padding: 2px 1rem; /* 右側に余白を多めに確保 */
					font-size: clamp(20px, 4vw, 24px);
					font-family: '筑紫ARゴシックB', sans-serif;
					color: var(--brown);
					width: 100%;
					display: flex;
					align-items: center;
					position: relative;
					background: url("../images/common/arrow_brown_bottom.svg") #FFF;
					background-repeat: no-repeat;
					background-size: 12px 6px;
					background-position: center right 20px;
 				}
			}
		}
	}
	.all_floor {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border: 1px solid var(--brown);
		border-radius: 50px;
		padding: 12px 10px;
		color: var(--brown);
		line-height: 1;
		margin-top: 1rem;
		background: #FFF;
		&::after {
			content: '';
			background: url("../images/common/arrow_brown_right.svg");
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
			width: 8px;
			height: 14px;
			right: 20px;
			position: absolute;
		}
	}
}

.area_zoom {
	margin-block: 2rem;
	display: grid;
	row-gap: 1rem;
	dl {
		border: 1px solid var(--brown);
		dt {
			background: var(--brown);
			color: #FFF;
			font-size: clamp(14px, 2.66667vw, 16px);
			padding: 5px 1rem;
		}
		dd {
			font-family: '游ゴシックMedium';
			padding: 1rem;
			.area_fee {
				display: flex;
				flex-wrap: wrap;
				gap: 4px 10px;
				position: relative;
				li {
					font-size: clamp(14px, 2.66667vw, 16px);
					display: flex;
					align-items: center;
					column-gap: 2px;
					position: relative;
					line-height: 1;
					&::before {
						content: '■';
					}
					&.fee_gray::before {
						color: #C9C9CA;
					}
					&.fee_light-green::before {
						color: #CFDA6F;
					}
					&.fee_pale-blue::before {
						color: #B8DFE1;
					}
					&.fee_pink::before {
						color: #F3C1D8;
					}
					&.fee_yellow::before {
						color: #F3C1D8;
					}
					&.fee_lavender::before {
						color: #CCC2DF;
					}
					&.fee_red::before {
						color: #ED8C82;
					}
					&.fee_orange::before {
						color: #FFC453;
					}
					&.fee_green::before {
						color: #A2BC8D;
					}
					&.fee_navy::before {
						color: #8894C9;
					}
					&.fee_turquoise::before {
						color: #6FB5AE;
					}
				}
			}
			.area_txt {
				font-size: 14px;
				text-align: justify;
				line-height: 130%;
				margin-top: 1rem;
			}
		}
	}
} 


.floor_wrap {
	.floor_inner {
		margin-block: var(--design-vh-6);
		.floor_num {
			background: #FFF9CA;
			border: 2px solid var(--brown);
			color: var(--blown);
			font-size: clamp(20px, 5vw, 30px);
			border-radius: 100px;
			line-height: 1;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			padding: 16px;
			aspect-ratio: 1/1;
		}
		.floor_img {
			display: flex;
			margin-block: 2rem;
			position: relative;
			img {
				width: 100%;
				height: auto;
			}
			.over:hover {
				&::before {
					content: '';
					background: rgba(200,85,84,0.5);
					display: inline-block;
					position: absolute;
				}
				&.honkan:hover::before {
					bottom: 0px;
					right: 0px;
				}
				&.side1:hover::before {
					bottom: 0px;
					left: 0px;
				}
				&.side2:hover::before {
					top: 0px;
					left: 0px;
				}
				&.honkan-1f:hover::before {
					width: 55%;
					height: 110%;
					top: 0px;
					left: 0px;
				}
				&.side1-2f:hover::before {
					width: 40%;
					height: 50%;
				}
				&.side2-2f:hover::before {
					width: 40%;
					height: 50%;
				}
				&.honkan-2f:hover::before {
					width: 60%;
					height: 50%;
				}
				&.side1-3f:hover::before {
					width: 43%;
					height: 35%;
				}
				&.side2-3f:hover::before {
					width: 43%;
					height: 65%;
				}
				&.honkan-3f:hover::before {
					width: 57%;
					height: 55%;
				}
				&.side1-4f:hover::before {
					width: 41%;
					height: 35%;
				}
				&.side2-4f:hover::before {
					width: 41%;
					height: 65%;
				}
				&.honkan-4f:hover::before {
					width: 59%;
					height: 55%;
				}
				&.side2-5f:hover::before,
				&.side2-6f:hover::before {
					width: 43%;
					height: 100%;
				}
			}
		}
		.floor_link_wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 1rem;
			.floor_link {
				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 10px;
				font-size: clamp(18px, 3.66667vw, 22px);
				color: var(--brown);
				border: 1px solid var(--brown);
				border-radius: 50px;
				padding: 12px 20px;
				line-height: 1;
				position: relative;
				&::before {
					content: '';
					background: url("../images/common/icon_zoom.svg");
					background-repeat: no-repeat;
					background-size: contain;
					display: inline-block;
					width: 22px;
					height: 22px;
					position: relative;
				}
			}
		} 
	}
}


.movin_in_wrap {
	margin-bottom: 3rem;
	.movin_in_inner {
		background: #FCFAF4;
		border-radius: 20px;
		dl {
			margin-block: 1rem;
			dt {
				background: var(--brown);
				color: #FFF;
				font-size: clamp(16px, 3.33334vw, 20px);
				text-align: center;
				padding: 10px 1rem;
				line-height: 1;
			}
			dd {
				padding: 1rem;
				.movin_in_list {
					display: flex;
					flex-wrap: wrap;
					li {
						display: flex;
						align-items: center;
						column-gap: 5px;
						line-height: 1;
						position: relative;
						font-size: clamp(14px, 2.66667vw, 16px);
					}
					&.room_setsubi {
						gap: 5px 3em;
						li {
							&::before {
								content: '';
								background-repeat: no-repeat !important;
								background-size: contain !important;
								display: inline-block;
								width: 22px;
								height: 22px;
								position: relative;
							}
							&.shower::before {
								background: url("../images/search/icon_shower.svg");
							}
							&.bath::before {
								background: url("../images/search/icon_bath.svg");
							}
						}
					}
					&.room_type {
						gap: 10px 2em;
						max-width: 400px;
						width: 100%;
						li {
							span {
								background: var(--brown);
								color: #FFF;
								border-radius: 50px;
								aspect-ratio: 1/1;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 14px;
								width: 22px;
								height: 22px;
								letter-spacing: -1px;
							}
						}
					}
				}
			}
		}
	}
}

.room_list_table_wrap {
	.room_list_table {
		border-spacing: 0px;
		border-collapse: collapse;
		width: 100%;
		tr {
			& > * {
				border: 1px solid #707070;
				font-size: 14px;
				font-family: '游ゴシックBold';
				font-weight: bold;
				padding: 10px 5px;
				text-align: center;
				line-height: 120%;
			}
			th {
				background: #F4F3EF;
			}
			td {
				.entry_btn {
					background: #CE8C16;
					color: #FFF;
					display: flex;
					justify-content: center;
					border-radius: 30px;
					padding: 5px 10px;
					white-space: nowrap;
				}
			}
		}
	}
}

.floor_img_wrap {
	border: 1px solid #707070;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2rem;
	.floor_img {
		width: 80%;
	}
}

.search_room_list {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
	margin-block: 2rem 3rem;
	li {
		font-size: 14px;
		font-family: '游ゴシックMedium';
		padding: 10px 2rem;
		background: #BEBEBE;
		border: 1px solid #FFF;
		text-align: center;
	}
}

.search_top {
	@media screen and (min-width: 600px) {
		display: none;
	}
	@media screen and (max-width: 599px) {
		display: block;
	}
}

.each_floor_img {
	display: flex;
	position: relative;
	padding: 1rem;
	map {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
		position: absolute;
		.floor_in {
			display: flex;
			width: 100%;
			height: 100%;
			position: absolute;
			&::before {
				content: '';
				display: inline-block;
				position: absolute;
				cursor: pointer;
				z-index: 1;
			}
			
			/* 本館 */
			&.honkan::before {
				width: 4%;
				height: 10%;
				background: rgba(102,102,102,0.6);
			}
			&.honkan_top::before {
				bottom: 26%;
			}
			&.honkan_bottom::before {
				bottom: 13%;
			}
			&.honkan-room_01::before {
				left: 11%;
			}
			&.honkan-room_02::before {
				left: 15%;
			}
			&.honkan-room_03::before {
				left: 19%;
			}
			&.honkan-room_04::before,
			&.honkan-room_05::before {
				left: 22.8%;
			}
			&.honkan-room_06::before,
			&.honkan-room_07::before {
				left: 26.5%;
			}
			&.honkan-room_08::before,
			&.honkan-room_09::before {
				left: 30%;
			}
			&.honkan-room_10::before,
			&.honkan-room_11::before {
				left: 34%;
			}
			&.honkan-room_12::before,
			&.honkan-room_13::before {
				left: 38%;
				width: 3.5%;
			}
			&.honkan-room_14::before,
			&.honkan-room_15::before {
				left: 41%;
			}
			&.honkan-room_16::before,
			&.honkan-room_17::before {
				left: 45%;
			}
			&.honkan-room_18::before {
				left: 48.5%;
			}
			&.honkan-room_19::before {
				right: 43.5%;
			}
			&.honkan-room_20::before {
				right: 39.5%;
			}
			&.honkan-room_21::before {
				right: 36%;
				width: 3.5%;
			}
			&.honkan-room_22::before {
				right: 32.5%;
				width: 3.5%;
			}
			&.honkan-room_23::before,
			&.honkan-room_24::before {
				right: 28.9%;
			}
			&.honkan-room_25::before,
			&.honkan-room_26::before {
				right: 24.9%;
			}
			&.honkan-room_27::before,
			&.honkan-room_28::before {
				right: 21%;
			}
			&.honkan-room_29::before,
			&.honkan-room_30::before {
				right: 17.5%;
			}
			&.honkan-room_31::before,
			&.honkan-room_32::before {
				right: 13.5%;
			}
			&.honkan-room_33::before,
			&.honkan-room_34::before {
				right: 9.5%;
			}
			
			&.honkan_shower_left_tate::before {
				bottom: 35.5%;
				width: 4.5%;
				height: 9.5%;
			}
			&.honkan-room_35::before {
				left: 3%;
			}
			&.honkan-room_36::before {
				left: 7.5%;
			}
			
			&.honkan_shower_left::before {
				left: 3%;
				width: 8%;
				height: 5%;
			}
			&.honkan-room_53::before {
				top: 6.5%;
			}
			&.honkan-room_51::before {
				top: 17%;
			}
			&.honkan-room_49::before {
				top: 22%;
			}
			&.honkan-room_47::before {
				top: 27%;
				height: 4.5%;
			}
			&.honkan-room_45::before {
				top: 31%;
			}
			&.honkan-room_43::before {
				top: 36%;
			}
			
			&.honkan_bath_left::before {
				left: 14%;
				width: 9%;
				height: 5%;
			}
			&.honkan-room_50::before {
				top: 16.5%;
			}
			&.honkan-room_48::before {
				top: 21.5%;
			}
			&.honkan-room_46::before {
				top: 27%;
				height: 4.5%;
			}
			&.honkan-room_44::before {
				top: 31%;
			}
			&.honkan-room_42::before {
				top: 36%;
			}
			&.honkan-room_41::before {
				top: 41%;
				height: 4%;
			}
			&.honkan-room_40::before {
				top: 45%;
			}
			&.honkan-room_39::before {
				top: 50%;
				height: 4%;
			}
			&.honkan-room_38::before {
				top: 54%;
			}
			&.honkan-room_37::before {
				top: 59%;
			}
			
			&.honkan_bath_right::before {
				right: 43%;
				width: 9%;
				height: 5%;
			}
			&.honkan-room_66::before {
				top: 31%;
			}
			&.honkan-room_64::before {
				top: 36%;
			}
			&.honkan-room_62::before {
				top: 41%;
				height: 4%;
			}
			&.honkan-room_60::before {
				top: 45%;
			}
			&.honkan-room_58::before {
				top: 50%;
				height: 4%;
			}
			&.honkan-room_56::before {
				top: 54%;
			}
			&.honkan-room_54::before {
				top: 59%;
			}
			
			&.honkan_shower_right::before {
				right: 32%;
				width: 9%;
				height: 5%;
			}
			&.honkan-room_67::before {
				top: 31%;
			}
			&.honkan-room_65::before {
				top: 36%;
			}
			&.honkan-room_63::before {
				top: 41%;
				height: 4%;
			}
			&.honkan-room_61::before {
				top: 45%;
			}
			&.honkan-room_59::before {
				top: 50%;
				height: 4%;
			}
			&.honkan-room_57::before {
				top: 54%;
			}
			&.honkan-room_55::before {
				top: 59%;
			}
			
			&.honkan_bath_top::before {
				top: 10%;
				background-repeat: no-repeat !important;
				background-size: contain !important;
			}
			&.honkan-room_68::before {
				left: 25%;
				background: url("../images/search/floor_in/honkan_68.svg");
				width: 10%;
			}
			&.honkan-room_69::before {
				left: 33%;
				background: url("../images/search/floor_in/honkan_69.svg");
				width: 10%;
				height: 11%;
			}
			&.honkan-room_70::before {
				left: 39.5%;
				background: url("../images/search/floor_in/honkan_70.svg");
				width: 12%;
				height: 12%;
			}
			&.honkan-room_71::before {
				left: 44%;
				background: url("../images/search/floor_in/honkan_71.svg");
				width: 10%;
				height: 13%;
			}

			
			/* side1 */
			&.side1::before {
				width: 6%;
				height: 23.5%;
				background: rgba(102,102,102,0.6);
			}
			&.side1_top::before {
				top: 12%;
			}
			&.side1_bottom::before {
				bottom: 36%;
			}
			/* 上段 */
			&.side1-room_01::before {
				right: 11%;
				width: 8%;
			}
			&.side1-room_02::before {
				right: 19%;
			}
			&.side1-room_03::before {
				right: 24%;
			}
			&.side1-room_04::before {
				right: 30%;
			}
			&.side1-room_05::before {
				right: 36%;
			}
			&.side1-room_06::before {
				right: 42%;
				width: 5%;
			}
			&.side1-room_07::before {
				right: 47%;
			}
			&.side1-room_08::before {
				right: 53%;
			}
			&.side1-room_09::before {
				right: 59%;
				width: 5%;
			}
			&.side1-room_10::before {
				right: 64%;
			}
			&.side1-room_11::before {
				right: 70%;
				width: 5%;
			}
			&.side1-room_12::before {
				right: 75%;
			}
			&.side1-room_13::before {
				right: 81%;
			}
			/* 下段 */
			&.side1-room_27::before {
				right: 7%;
			}
			&.side1-room_26::before {
				right: 13%;
			}
			&.side1-room_25::before {
				right: 19%;
			}
			&.side1-room_24::before {
				right: 24%;
			}
			&.side1-room_23::before {
				right: 30%;
			}
			&.side1-room_22::before {
				right: 36%;
			}
			&.side1-room_21::before {
				right: 42%;
				width: 5%;
			}
			&.side1-room_20::before {
				right: 47%;
			}
			&.side1-room_19::before {
				right: 53%;
			}
			&.side1-room_18::before {
				right: 59%;
				width: 5%;
			}
			&.side1-room_17::before {
				right: 64%;
			}
			&.side1-room_16::before {
				right: 70%;
				width: 5%;
			}
			&.side1-room_15::before {
				right: 75%;
			}
			&.side1-room_14::before {
				right: 81%;
			}
			
			/* side2 */
			&.side2_A::before,
			&.side2_C::before {
				background-repeat: no-repeat !important;
				background-size: contain !important;
			}
			&.side2_B::before {
				left: 10%;
				width: 15.4%;
				height: 4.5%;
				background: rgba(102,102,102,0.6);
			}
			&.side2_D::before {
				left: 29%;
				width: 12%;
				height: 5.5%;
				background: rgba(102,102,102,0.6);
			}
			/* side2 Bタイプ */
			&.side2_B-room_27::before {
				top: 5.5%;
			}
			&.side2_B-room_26::before {
				top: 9.9%;
			}
			&.side2_B-room_25::before {
				top: 14.4%;
			}
			&.side2_B-room_24::before {
				top: 18.7%;
			}
			&.side2_B-room_23::before {
				top: 23.3%;
			}
			&.side2_B-room_22::before {
				top: 27.7%;
			}
			&.side2_B-room_21::before {
				top: 32.2%;
			}
			&.side2_B-room_20::before {
				top: 36.5%;
			}
			/* side2 Dタイプ */
			&.side2_D-room_32::before {
				top: 5.5%;
			}
			&.side2_D-room_31::before {
				top: 11%;
			}
			&.side2_D-room_30::before {
				top: 16.5%;
			}
			&.side2_D-room_29::before {
				top: 21.6%;
			}
			&.side2_D-room_28::before {
				top: 27%;
			}
			/* side2 Aタイプ */
			&.side2_A-room_13::before {
				background: url("../images/search/floor_in/side2_A-13.svg");
				width: 17%;
				height: 51%;
				top: 54%;
				left: 17%;
			}
			&.side2_A-room_12::before {
				background: url(../images/search/floor_in/side2_A-12.svg);
                width: 17%;
                height: 12%;
                top: 57%;
                left: 20%;
			}
			&.side2_A-room_11::before {
				background: url("../images/search/floor_in/side2_A-11.svg");
				width: 18%;
                height: 12%;
                top: 61%;
                left: 26%;
                rotate: 37deg;
			}
			&.side2_A-room_10::before {
				background: url("../images/search/floor_in/side2_A-10.svg");
				width: 17%;
                height: 11.5%;
                top: 64%;
                left: 30%;
                rotate: 22deg;
			}
			&.side2_A-room_09::before {
				background: url("../images/search/floor_in/side2_A-09.svg");
				width: 20%;
                height: 12%;
                top: 67.5%;
                left: 34.5%;
                rotate: 22deg;
			}
			&.side2_A-room_08::before {
				background: url("../images/search/floor_in/side2_A-08.svg");
				width: 18%;
                height: 11.5%;
                top: 71%;
                left: 40%;
                rotate: 25deg;
			}
			&.side2_A-room_07::before {
				background: url("../images/search/floor_in/side2_A-07.svg");
				width: 11%;
                height: 11%;
                top: 73%;
                left: 47%;
                rotate: 31deg;
			}
			&.side2_A-room_06::before {
				background: url("../images/search/floor_in/side2_A-06.svg");
				width: 10%;
                height: 11%;
                bottom: 14%;
                right: 38%;
                rotate: 20deg;
			}
			&.side2_A-room_05::before {
				background: url("../images/search/floor_in/side2_A-05.svg");
				width: 17%;
                height: 12%;
                bottom: 12%;
                right: 28.5%;
                rotate: -16deg;
			}
			&.side2_A-room_04::before {
				background: url("../images/search/floor_in/side2_A-04.svg");
				width: 17%;
                height: 11.5%;
                bottom: 10%;
                right: 22.5%;
                rotate: -36deg;
			}
			&.side2_A-room_03::before {
				background: url("../images/search/floor_in/side2_A-03.svg");
				width: 15%;
                height: 17%;
                bottom: 4%;
                right: 16%;
                rotate: -30deg;
			}
			&.side2_A-room_02::before {
				background: url("../images/search/floor_in/side2_A-02.svg");
				 width: 14%;
                height: 13%;
                bottom: 7.5%;
                right: 12.5%;
                rotate: -23deg;
			}
			&.side2_A-room_01::before {
				background: url("../images/search/floor_in/side2_A-01.svg");
				width: 16%;
                height: 18%;
                bottom: 2.5%;
                right: 1.5%;
                rotate: -45deg;
			}
			/* side2 Cタイプ */
			&.side2_C-room_19::before {
				background: url("../images/search/floor_in/side2_C-19.svg");
				width: 12.7%;
                height: 34.5%;
                top: 48.3%;
                left: 27%;
                rotate: 40deg;
			}
			&.side2_C-room_18::before {
				background: url("../images/search/floor_in/side2_C-18.svg");
				width: 14.5%;
                height: 33%;
                top: 55.5%;
                left: 38%;
                rotate: 20deg;
			}
			&.side2_C-room_17::before {
				background: url("../images/search/floor_in/side2_C-17.svg");
				width: 15.5%;
                height: 37%;
                top: 61%;
                right: 34%;
                rotate: -1deg;
			}
			&.side2_C-room_16::before {
				background: url("../images/search/floor_in/side2_C-16.svg");
				width: 15.7%;
                height: 38%;
                top: 63%;
                right: 15%;
                rotate: -31deg;
			}
			&.side2_C-room_15::before {
				background: url("../images/search/floor_in/side2_C-15.svg");
				width: 15.7%;
                height: 38%;
                top: 65%;
                right: 7%;
                rotate: -30deg;
			}
			&.side2_C-room_14::before {
				background: url("../images/search/floor_in/side2_C-14.svg");
				width: 10.8%;
                height: 30%;
                top: 68.6%;
                right: 9.9%;
                rotate: 1deg;
			}
		}
	}
}