@layer page {
	/* 見出し */
	.template-vacancy-heading {
		background-color: var(--background-main);
	}

	.template-vacancy-heading-inner {
		padding: 40px 0px 80px;
	}

	.template-vacancy-heading-title {
		font-weight: bold;
	}

	.template-vacancy-heading-text {
		margin-top: 40px;
	}


	/* 間取り */
	.template-vacancy-floor {
		background-color: var(--background-main);
	}

	.template-vacancy-floor-inner {
		padding-bottom: 80px;
	}

	.template-vacancy-floor-plan > li + li {
		margin-top: 40px;
	}

	.template-vacancy-floor-plan-name {
		position: relative;
		color: var(--template);
		font-size: 26px;
		font-family: var(--mincho);
	}

		.template-vacancy-floor-plan-name::after {
			content: "";
			position: absolute;
			display: block;
			top: 18px;
			left: 135px;
			width: calc(100% - 135px);
			border-top: solid 1px var(--template);
		}

	.template-vacancy-floor-plan-list {
		display: flex;
		flex-wrap: wrap;
		color: var(--white);
		margin: 20px auto 0px;
	}

	.template-vacancy-floor-plan-list-type {
		display: flex;
		flex-wrap: wrap;
	}

	.template-vacancy-floor-plan-list-type-information {
		width: 135px;
		padding: 20px;
		background-color: var(--template);
	}

	.template-vacancy-floor-plan-list-type-information-name {
		font-size: var(--font-size-middle);
		font-weight: bold;
	}

	.template-vacancy-floor-plan-list-type-information-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		padding-top: 10px;
		border-top: solid 1px;
	}

		.template-vacancy-floor-plan-list-type-information-list > dt {
			width: 37%;
			font-weight: bold;
		}

		.template-vacancy-floor-plan-list-type-information-list > dt + dd {
			margin-left: 12px;
		}

	.template-vacancy-floor-plan-list-type-imagebox {
		padding: 36px 5px;
		background-color: var(--white);
	}

		.template-vacancy-floor-plan-list-type-imagebox > img {
			width: 130px;
			height: 130px;
			object-fit: contain;
		}


	/* 共用部 */
	.template-vacancy-gallery {
		padding: 40px 0px 80px;
		background-color: var(--template);
	}

	.template-vacancy-gallery-title {
		text-align: center;
		color: var(--white);
		font-family: var(--mincho);
	}

	.template-vacancy-gallery-title-emphasis {
		display: block;
		font-size: 24px;
	}

	.template-vacancy-gallery-feature {
		width: var(--smp-content-width);
		max-width: 520px;
		margin: 40px auto 0px;
	}

	.template-vacancy-gallery-feature-image {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.template-vacancy-gallery-list {
		display: flex;
		flex-wrap: wrap;
		margin: 40px auto 0px;
	}

	.template-vacancy-gallery-list-image {
		width: 100%;
	}



	/* smp用css */
	@media screen and (max-width: 1024px) {
		/* 見出し */
		.template-vacancy-heading-hero {
			max-width: 450px;
			margin-top: 20px;
		}

			.template-vacancy-heading-hero > li + li {
				margin-top: 20px;
			}

		.template-vacancy-heading-hero-image {
			width: 100%;
			height: auto;
		}

		.template-vacancy-heading-title {
			margin-top: 20px;
			font-size: var(--font-size-middle);
		}


		/* 間取り */
		.template-vacancy-floor-plan-list {
			gap: 20px 0px;
			max-width: 315px;
		}


		/* 共用部 */
		.template-vacancy-gallery-list {
			justify-content: space-between;
			gap: 20px 0px;
			max-width: 330px;
		}

			.template-vacancy-gallery-list > li {
				width: 155px;
			}

		.template-vacancy-gallery-list-image {
			height: 105px;
		}
	}



	/* tb用css */
	@media screen and (min-width: 767px) and (max-width: 1024px) {
		/* 間取り */
		.template-vacancy-floor-plan-list {
			gap: 20px;
			max-width: 650px;
		}


		/* 共用部 */
		.template-vacancy-gallery-list {
			justify-content: flex-start;
			gap: 20px 20px;
			max-width: 680px;
		}
	}



	/* pc用css */
	@media screen and (min-width: 1025px) {
		/* 見出し */
		.template-vacancy-heading-hero {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 40px;
		}

			.template-vacancy-heading-hero > div {
				width: calc(50% - 40px);
			}

		.template-vacancy-heading-hero-image {
			width: 100%;
			height: auto;
		}

		.template-vacancy-heading-title {
			font-size: var(--font-size-max);
		}


		/* 間取り */
		.template-vacancy-floor-plan-list {
			gap: 20px;
			width: 985px;
		}


		/* 共用部 */
		.template-vacancy-gallery-list {
			gap: 40px 20px;
			max-width: 920px;
		}

			.template-vacancy-gallery-list > li {
				width: 215px;
			}

		.template-vacancy-gallery-list-image {
			height: 145px;
		}
	}
}