@layer page {
	/* キービジュアル */
	.template-hero {
		width: 100%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.template-hero-contents {
		position: relative;
		color: var(--white);
		background-color: rgba(0, 0, 0, 0.2);
	}


	/* section共通 */
	.template-concept
	, .template-vacancy
	, .template-outline
	, .template-others {
		background-color: var(--background-main);
	}

	.template-count
	, .template-equipment
	, .template-location
	, .template-faq {
		background-color: var(--template);
	}

	.template-count {
		background-color: var(--white);
	}

	.template-section-contents-text {
		font-family: var(--mincho);
	}

		.template-section-contents-text.text-white {
			color: var(--white);
		}

	.template-section-contents-linkbox-link {
		display: inline-block;
	}


	/* 物件概要 */
	.template-outline-exterior {
		margin: 40px auto 0px;
	}

	.template-outline-exterior-image {
		width: 100%;
		height: auto;
	}

	.template-outline-information > dt {
		font-weight: bold;
	}

	.template-outline-information-link {
		text-decoration: underline; 
	}

	.template-outline-information-unit {
		display: flex;
		flex-wrap: wrap;
	}

		.template-outline-information-unit > dt {
			width: 120px;
		}

		.template-outline-information-unit > dd {
			width: calc(100% - 120px);
		}


	/* よくあるご質問 */
	.template-faq-list {
		margin-top: 40px;
	}

		.template-faq-list > dt
		, .template-faq-list > dd {
			position: relative;
			background-color: var(--white);
		}

		.template-faq-list > dt {
			border-radius: 5px;
		}

		.template-faq-list > dd {
			margin-top: -5px;
			padding-top: 5px;
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
		}

		.template-faq-list > dd + dt {
			margin-top: 15px;
		}

	.template-faq-list-questions {
		width: 100%;
		padding: 15px 30px 15px 10px;
		font-weight: bold;
		text-align: left;
	}

		.template-faq-list-questions::after {
			position: absolute;
			display: block;
			content: "";
			top: 20px;
			right: 13px;
			width: 8px;
			height: 8px;
			border-top: solid 1px var(--black);
			border-right: solid 1px var(--black);
			transform: rotate(135deg);
			transition: transform .3s;
		}

		.template-faq-list-questions.open-item::after {
			transform: rotate(315deg);
		}

	.template-faq-list-asked {
		overflow: hidden;
		max-height: 0;
	}

		.template-faq-list-asked.open-item {
			max-height: 100vh;
			padding: 0px 10px 15px 10px;
		}

	.template-faq-list-asked-link {
		text-decoration: underline; 
	}



	/* smp用css */
	@media screen and (max-width: 1024px) {
		/* キービジュアル */
		.template-hero {
			height: 610px;
		}

		.template-hero-contents {
			padding: 30px 20px 40px;
			height: 540px;
		}

		.template-hero-contents-catchphrase {
			margin-top: 380px;
			text-align: right;
		}


		/* section共通 */
		.template-section {
			padding: 40px 0px 80px;
		}

		.template-section-mini {
			padding: 40px 0px 20px;
		}

		.template-section-contents {
			max-width: 500px;
			margin: 40px auto 0px;
		}

		.template-section-contents-image {
			width: 100%;
			height: auto;
		}

		.template-section-contents-text {
			margin-top: 20px;
			font-size: 18px;
			line-height: 32px;
		}

		.template-section-contents-linkbox {
			margin-top: 40px;
			text-align: right;
		}


		/* 空室数 */
		.template-count {
			padding: 40px 0px;
			text-align: center;
			color: var(--template);
			background-color: var(--white);
		}

		.template-count-number-emphasis {
			margin-left: 20px;
			font-size: 30px;
		}

		.template-count-number-link {
			position: relative;
			display: block;
			width: 335px;
			margin: 10px auto 0px;
			padding: 15px 0px;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			background-color: var(--white);
			border-radius: 28px;
			box-shadow: 0px 3px 6px #00000029;
		}

			.template-count-number-link::after {
				position: absolute;
				display: block;
				content: "";
				top: 22px;
				right: 22px;
				width: 8px;
				height: 8px;
				border-top: solid 1px var(--black);
				border-right: solid 1px var(--black);
				transform: rotate(45deg);
			}


		/* 物件概要 */
		.template-outline-exterior {
			width: 220px;
		}

		.template-outline-information {
			padding-top: 10px;
		}

			.template-outline-information > dt {
				margin-top: 15px;
				padding-top: 15px;
			}

			.template-outline-information > dd {
				margin-top: 10px;
			}

			.template-outline-information > dd + dt {
				border-top: solid 1px var(--black);
			}
	}



	/* pc用css */
	@media screen and (min-width: 1025px) {
		/* キービジュアル */
		.template-hero {
			height: 700px;
		}

		.template-hero-contents {
			padding: 40px;
			height: 620px;
		}

		.template-hero-contents-catchphrase {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 380px;
		}

		/* 空室数 */
		.template-hero-contents-count {
			position: absolute;
			left: 40px;
			bottom: 40px;
			padding: 10px 0px;
			width: 480px;
			color: var(--black);
			background-color: rgba(255, 255, 255, 0.8);
		}

		.template-hero-contents-count-number {
			text-align: center;
			font-weight: bold;
		}

		.template-hero-contents-count-number-emphasis {
			margin-left: 20px;
			font-size: 30px;
		}

		.template-hero-contents-count-link {
			position: relative;
			display: block;
			width: 335px;
			margin: 10px auto 0px;
			padding: 15px 0px;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			border: solid 1px var(--black);
			border-radius: 28px;
			box-shadow: 0px 3px 6px #00000029;
		}

			.template-hero-contents-count-link::after {
				position: absolute;
				display: block;
				content: "";
				top: 22px;
				right: 22px;
				width: 8px;
				height: 8px;
				border-top: solid 1px var(--black);
				border-right: solid 1px var(--black);
				transform: rotate(45deg);
			}

		.template-hero-contents-catchphrase {
			position: absolute;
			right: 40px;
			bottom: 40px;
		}

			.template-hero-contents-catchphrase > img {
				width: 390px;
				height: auto;
			}


		/* section共通 */
		.template-section
		, .template-section-mini {
			padding: 40px 0px 80px;
		}

		.template-section-contents {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 40px;
		}

			.template-section-contents > div {
				position: relative;
				width: calc(50% - 40px);
			}
			

		.template-section-contents-image {
			width: 100%;
			height: auto;
		}

		.template-section-contents-text {
			font-size: 22px;
			line-height: 40px;
		}

		.template-section-contents-linkbox-link {
			position: absolute;
			right: 0;
			bottom: 0;
		}


		/* 物件概要 */
		.template-outline-exterior {
			width: 240px;
		}

		.template-outline-information {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10px;
		}

			.template-outline-information > dt {
				width: 320px;
				padding: 30px 0px;
				border-bottom: solid 1px var(--black);
			}

			.template-outline-information > dd {
				width: calc(100% - 320px);
				padding: 30px 0px;
				border-bottom: solid 1px var(--black);
			}

		.template-outline-information-equipment {
			display: flex;
			flex-wrap: wrap;
		}

			.template-outline-information-equipment > li {
				width: 50%;
			}
	}
}