@layer page {
	/* 見出し */
	.template-detail-heading {
		background-color: var(--background-detail);
	}

	.template-detail-heading-inner {
		padding-top: 40px;
	}


	/* 号室詳細 */
	.template-detail-floor {
		background-color: var(--background-detail);
	}

	.template-detail-floor-gallery-splide-slide {
		position: relative;
	}

	.template-detail-floor-gallery-splide-slide-image {
		display: block;
		object-fit: contain;
		width: 100%;
		height: auto;
		background-color: var(--white);
		aspect-ratio: 1 / 1;
	}

	.template-detail-floor-gallery-splide-slide-note {
		position: absolute;
		bottom: 0;
		width: calc(100% - 8px);
		padding: 4px;
		background-color: rgba(0, 0, 0, .4);
		color: #fff;
		font-size: 12px;
		text-align: center;
	}

	.template-detail-floor-gallery-thumbnail {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
		padding-top: 20px;
	}

	.template-detail-floor-gallery-list-thumbnail-imagebox {
		width: calc(calc(100% - 8px) / 5);
		max-width: 66px;
		height: 40px;
	}

		.template-detail-floor-gallery-list-thumbnail-imagebox:hover {
			opacity: .8;
			cursor: pointer;
		}

	.template-detail-floor-gallery-list-thumbnail-imagebox-image
	, .template-detail-floor-gallery-list-thumbnail-imagebox-image-madorizu {
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--white);
		aspect-ratio: 1 / 1;
	}

		.template-detail-floor-gallery-list-thumbnail-imagebox-image {
			object-fit: cover;
		}

		.template-detail-floor-gallery-list-thumbnail-imagebox-image-madorizu {
			object-fit: contain;
		}

	.template-detail-floor-information-list {
		display: flex;
		flex-wrap: wrap;
	}

		.template-detail-floor-information-list > dt
		, .template-detail-floor-information-list > dd {
			border-bottom: solid 1px var(--border-main);
		}

		.template-detail-floor-information-list > dt {
			width: 25%;
			padding: 15px 0px;
			color: var(--template);
			font-weight: bold;
		}

		.template-detail-floor-information-list > dd {
			width: calc(75% - 40px);
			padding: 15px 0px 15px 40px;
		}

	.template-detail-floor-information-panorama {
		display: block;
		margin: 20px auto 0px;
		width: 100%;
		max-width: 336px;
	}

	.template-detail-floor-information-panorama-image {
		width: 100%;
		height: auto;
	}

	.template-detail-floor-information-annotation {
		margin-top: 40px;
	}

	.template-detail-floor-contact {
		display: block;
		margin: 40px auto 0px;
		padding: 16px 0px;
		width: 295px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: var(--white);
		background-color: var(--orange);
		box-shadow: 0px 3px 6px #00000029;
		border-radius: 4px;
	}

	.template-detail-floor-contact > img {
		margin: 0px 10px 3px 0px;
	}


	/* 同じ間取りの空室 */
	.template-detail-other {
		background-color: var(--background-main);
	}

	.template-detail-other-inner {
		padding: 40px 0px 80px;
	}

	.template-detail-other-title {
		font-size: var(--font-size-middle);
		font-weight: bold;
	}

	.template-detail-other-list {
		display: flex;
		flex-wrap: wrap;
		color: var(--white);
		margin: 20px auto 0px;
	}

	.template-detail-other-list-type {
		display: flex;
		flex-wrap: wrap;
	}

	.template-detail-other-list-type-information {
		width: 135px;
		padding: 20px;
		background-color: var(--template);
	}

	.template-detail-other-list-type-information-name {
		font-size: var(--font-size-middle);
		font-weight: bold;
	}

	.template-detail-other-list-type-information-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		padding-top: 10px;
		border-top: solid 1px;
	}

		.template-detail-other-list-type-information-list > dt {
			width: 37%;
			font-weight: bold;
		}

		.template-detail-other-list-type-information-list > dt + dd {
			margin-left: 20px;
		}

	.template-detail-other-list-type-imagebox {
		padding: 36px 5px;
		background-color: var(--white);
	}

		.template-detail-other-list-type-imagebox > img {
			width: 130px;
			height: 130px;
			object-fit: contain;
		}

	.template-detail-other-none {
		margin-top: 20px;
	}

	.template-detail-other-link {
		position: relative;
		display: block;
		width: 100%;
		max-width: 335px;
		height: 55px;
		line-height: 55px;
		margin: 80px auto 0px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		border-radius: 28px;
		border: solid 1px var(--black);
	}

		.template-detail-other-link::after {
			content: "";
			position: absolute;
			top: 11px;
			left: 10px;
			width: 33px;
			height: 33px;
			transform: scale(-1, -1);
			background-image: url(/big/pickup/images/button_enter_black.svg);
		}



	/* smp用css */
	@media screen and (max-width: 1024px) {
		/* 号室詳細 */
		.template-detail-floor {
			padding: 40px 0px 80px;
		}

		.template-detail-floor-gallery-splide
		, .template-detail-floor-gallery-thumbnail {
			width: var(--smp-content-width);
			max-width: 338px;
			margin: 0px auto;
		}

		.template-detail-floor-information {
			width: var(--smp-content-width);
			max-width: var(--smp-content-max-width);
			margin: 0 auto;
		}

		.template-detail-floor-information-list {
			margin-top: 50px;
		}


		/* 同じ間取りの空室 */
		.template-detail-other-list {
			gap: 20px 0px;
			max-width: 315px;
		}
	}



	/* tb用css */
	@media screen and (min-width: 767px) and (max-width: 1024px) {
		/* 号室詳細 */
		.template-detail-floor-gallery-thumbnail {
			max-width: 542px;
		}


		/* 同じ間取りの空室 */
		.template-detail-other-list {
			gap: 20px;
			max-width: 650px;
		}
	}



	/* pc用css */
	@media screen and (min-width: 1025px) {
		/* 号室詳細 */
		.template-detail-floor {
			padding: 40px 0px 120px;
		}

		.template-detail-floor-inner {
			display: flex;
			flex-wrap: wrap;
			gap: 0px 40px;
			width: 75%;
			max-width: var(--pc-content-width);
			margin: 0px auto;
		}

		.template-detail-floor-gallery {
			width: 340px;
		}

		.template-detail-floor-information {
			width: calc(100% - 380px);
		}


		/* 同じ間取りの空室 */
		.template-detail-other-list {
			gap: 20px;
			width: 985px;
		}
	}
}