@layer layout {
main {
	/*display: grid;*/
	padding-top: 4rem;
}
.page-container {
	/* 最大幅の設定: 1200px */
	/*max-width: 1200px;
	margin: 0 auto;*/
	min-height: 100vh;
	/*display: grid;
	grid-template-areas: "header" "main" "footer";
	grid-template-rows: auto 1fr auto;
	*/
}
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
	z-index: 9999;

	nav.menu {
		position: fixed;
		top: 0;
		z-index: 100;
		right: -85vw;
		width: 84vw;
		height: 120vh;
		transition: all 0.3s ease-out;
	}
	nav.menu.is-open {
		right: 0;
		transition: all 0.3s ease-out;
	}
}

.footer {
	width: 100%;
	padding-top: 1.5rem;
}
/* こだわり条件を基準に全コンテンツ幅を統一（左右パディング0） */
:where(
	/* TOP */
	.map-link,
	.search-navigation,
	.search-future,
	.ranking,
	.property-news,
	.our-strengths,

	/* エリア検索 */
	.recommend-condition,
	.selected-ward,

	/* 物件詳細 */
	.google-map-area,

	/* ショートカットリンク */
	.tokyo-23,
	.train-lines
 	) {
	padding: 1rem 0;
}
:where(
	.do-search-btn-area,
	.btn-area
	) {
	padding: 2rem 1.5rem;
}

@media screen and (min-width: 768px) {
	.sp-only {
		display: none;
	}
	main {
		padding-top: 5rem;
	}
	main#detail {
		padding-bottom: 2rem;
	}
	.content-container {
		max-width: 1200px;
		margin: 0 auto;
	}
	.header {
		padding: 0.8rem;

		nav.menu {
			position: static;
			width: auto;
			height: auto;
		}
	}
	:is(
		/* 物件特集 */
		.google-map-area
		) {
		padding: 1rem 0;
	}

	/* TOP: こだわり条件を基準に全コンテンツの幅を統一（左右パディング0） */
	.search-future {
		padding: 2rem 0;
	}

	:is(
		/* エリア・路線 検索 */
		#area-search .from-area,
		#route-search .from-area
		) {
			padding: 2rem 0;
	}
	
	:is(
		/* エリア・路線 検索 */
		#area-search .from-area .container,
		#route-search .from-area .container
		) {
			padding: 0;
	}
	
	:is(
		/* TOP */
		.ranking,
		.faq-area,

		/* ショートカットリンク */
		.tokyo-23,
		.train-lines
		) {
			padding: 2rem 0;
	}

	:is(
		/* TOP */
		.our-strengths
		) {
		padding: 2rem 0;
	}

	:is(
		/* エリア・路線 検索 */
		.do-search-btn-area
		) {
		padding: 2rem 0;
	}

	:is(
		/* TOP */
		.search-navigation
		) {
		padding: 2rem 0;
	}

	:is(
		/* TOP */
		.np-carousel,
		.recent-history
	) {
		padding: 0;
	}
	
	:is(
		/* お問い合わせ */
		main#contact,
		main#contact-conf,
		main#contact-complete,
		main#reserve,
		main#reserve-conf,
		main#reserve-complete,
		main#waitlist,
		main#waitlist-conf
	) {
		max-width: 1200px;
		margin: 0 auto;
		padding: 5rem 0 0;
	}
}
}