@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */
	.mainElementFooterWrap {
		padding-top: var(--site-marpad-XXS);
	}



/* =======================================================================================
	COMMON
======================================================================================= */
	:root {
		--landplan-landplanStyle-content-width: 1600;
	}



/* =======================================================================================
	PAGE
======================================================================================= */

/* ------------------------------------------------------------------------
	landscape
------------------------------------------------------------------------ */
/* landscapeContainer
------------------------------------------------------------------------ */
	.landscapeContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 50%;
		--default-bgWavyBox-pattern-scale:		-2 2;
		--default-bgWavyBox-pattern-rotate:		8deg;
		--default-bgWavyBox-pattern-opacity:	.35;
		--default-bgWavyBox-pattern-translateX:	5%;
		--default-bgWavyBox-pattern-translateY:	16%;
		--default-bgWavyBox-gradient-bottom-height:	min(20%, 400px);
	}
@media screen and (max-width: 1050px) {
	.landscapeContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 20%;
		--default-bgWavyBox-pattern-scale:		4 4;
		--default-bgWavyBox-pattern-rotate:		-8deg;
		--default-bgWavyBox-pattern-opacity:	.35;
		--default-bgWavyBox-pattern-translateX:	67%;
		--default-bgWavyBox-pattern-translateY:	56%;
	}
}
@media screen and (max-width: 736px) {
	.landscapeContainer {
		padding-top: 80px;
	}
}
@media screen and (max-width: 540px) {
	.landscapeContainer {
		padding-top: 60px;
	}
	.landscapeContainer .bgWavyBox {
		--default-bgWavyBox-pattern-translateX:	57%;
		--default-bgWavyBox-pattern-translateY:	64%;
	}
}

/* landscapeSection
------------------------------------------------------------------------ */
	.landscapeSection {
	}
	.landscapeSection[class*="SmkGridBox_A-"] {
		--__gtColumns-A_pic: max(400px, (1070 / 1600 * 100%));
		width: var(--site-sizeContentWide-M5);
		max-width: 1600px;
	}
	.landscapeSection .SmkGridBox_A__pic [class*="bgBoxShadow_"] {
	 	--default-bgBoxShadow_-padding: 0;
	 }
	.landscapeSection .SmkGridBox_A__pic [class*="bgBoxShadow_"] .imgcapkeep {
	 	padding: 2em;
	 }
@media screen and (max-width: 736px) {
	.landscapeSection .SmkGridBox_A__txt {
		margin-top: clamp(30px, (30 / 540 * 100vw), 40px); /* 微調整 */
	}
	.landscapeSection .SmkGridBox_A__pic [class*="bgBoxShadow_"] .imgcapkeep {
	 	padding: 1em;
	 }
}





/* ------------------------------------------------------------------------
	zoningDistrict
------------------------------------------------------------------------ */
/* zoningDistrictContainer
------------------------------------------------------------------------ */
	.zoningDistrictContainer .bgWavyBox {
		display: none;
	}
@media screen and (max-width: 1050px) {
	.zoningDistrictContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 66%;
		--default-bgWavyBox-pattern-scale:		-2.2 2.2;
		--default-bgWavyBox-pattern-rotate:		8deg;
		--default-bgWavyBox-pattern-opacity:	.35;
		--default-bgWavyBox-pattern-translateX:	0%;
		--default-bgWavyBox-pattern-translateY:	24%;
		--default-bgWavyBox-gradient-bottom-height:	min(15%, 300px);
		display: block;
	}
}
@media screen and (max-width: 600px) {
	.zoningDistrictContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 70%;
		--default-bgWavyBox-pattern-translateY:	10%;
	}
}
/* zoningDistrictSection
------------------------------------------------------------------------ */
	.zoningDistrictSection {
		width: var(--site-sizeContentWide-M5);
		max-width: calc(var(--landplan-landplanStyle-content-width) * 1px);
		margin-left: auto;
		margin-right: auto;
	}
	
	.zoningDistrictGridBox {
		--landplan-zoningDistrictGridBox-leftCell-width:	780;
		--landplan-zoningDistrictGridBox-rightCell-width:	685;
		display: grid;
		grid-template: 
			"enTitle enTitle" auto
			"txtBox  table" auto
			"map     legend" 1fr /
			calc(var(--landplan-zoningDistrictGridBox-leftCell-width) / var(--landplan-landplanStyle-content-width) * 100%) calc(var(--landplan-zoningDistrictGridBox-rightCell-width) / var(--landplan-landplanStyle-content-width) * 100%);
		justify-content: space-between;
	}
	.zoningDistrictGridBox [class*="ptItalicTitle_"] {	grid-area: enTitle;}
	.zoningDistrictGridBox .zoningFirstTxtBox {			grid-area: txtBox;}
	.zoningDistrictGridBox .zoningTableBox {			grid-area: table;}
	.zoningDistrictGridBox .zoningMapBox {				grid-area: map;}
	.zoningDistrictGridBox .zoningLegendBox {			grid-area: legend;}


	.zoningDistrictGridBox .zoningFirstTxtBox .txt {
		line-height: 2.25; /* 微調整 */
		padding-top: .5em; /* 微調整 */
	}
	.zoningDistrictGridBox .zoningMapBox,
	.zoningDistrictGridBox .zoningLegendBox {
		margin-top: var(--site-marpad-XS);
	}
	.zoningDistrictGridBox .zoningLegendBox {
		display: grid;
		grid-template-columns: calc(344 / var(--landplan-zoningDistrictGridBox-rightCell-width) * 100%) 1fr;
		justify-content: space-between;
		align-items: flex-end;
		gap: 0 15%;
	}
	.zoningDistrictGridBox .zoningLegendBox .phBox {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px 0;
		align-content: space-between;
		height: 100%;
	}
	.zoningDistrictGridBox .zoningLegendBox .phBox > * {
		position: relative;
		z-index: 0;
	}
	.zoningDistrictGridBox .zoningLegendBox .phBox small.bl {
		line-height: 1.5;
		font-size: .875em;
		margin-top: .25em;
	}
	.zoningDistrictGridBox .zoningLegendBox .phBox small.imgcapkeep {
		font-size: 1rem;
	}
	
	.zoningDistrictCaptionBox {
	}
@media screen and (max-width: 1200px) {
	.zoningDistrictGridBox {
		--landplan-zoningDistrictGridBox-rightCell-width:	710;
	}
	.zoningDistrictGridBox .zoningLegendBox .phBox small.bl {
		font-size: 1.1rem;
	}
}
@media screen and (max-width: 1050px) {
	.zoningDistrictGridBox {
		--landplan-zoningDistrictGridBox-centerCell-width:	min(75%, 650px);
		grid-template: 
			".    enTitle  ." auto
			".    txtBox   ." auto
			".    table    ." auto
			"map  map      map" auto
			".    legend   ." 1fr /
			auto var(--landplan-zoningDistrictGridBox-centerCell-width) auto;
	}

	.zoningDistrictGridBox .zoningFirstTxtBox .txt {
		line-height: 2; /* 微調整解除 */
		padding-top: 0; /* 微調整解除 */
	}
	.zoningDistrictGridBox .zoningTableBox,
	.zoningDistrictGridBox .zoningMapBox,
	.zoningDistrictGridBox .zoningLegendBox {
		margin-top: var(--site-marpad-XS);
	}
	.zoningDistrictGridBox .zoningMapBox img {
		width: 100%;
		max-width: none;
		height: auto;
	}
	.zoningDistrictGridBox .zoningLegendBox {
		grid-template-columns: 52% 1fr;
		align-items: flex-start;
		gap: 0 7%;
	}
	.zoningDistrictGridBox .zoningLegendBox .phBox small.bl,
	.zoningDistrictGridBox .zoningLegendBox .phBox small.imgcapkeep {
		font-size: 1rem;
	}
	.zoningDistrictGridBox .zoningLegendBox .legend {
		padding: 0 clamp(5px, 2.778vw, 35px);
	}
	
	.zoningDistrictGridBox .brHide {
		display: none;
	}
}
@media screen and (max-width: 736px) {
	.zoningDistrictGridBox {
		--landplan-zoningDistrictGridBox-centerCell-width:	min(100%, 500px);
	}
	.zoningDistrictGridBox .zoningMapBox {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
	}
	.zoningDistrictGridBox .zoningLegendBox .phBox {
		gap: 15px 0;
	}
}




/* ------------------------------------------------------------------------
	streetscape
------------------------------------------------------------------------ */
/* streetscapeContainer
------------------------------------------------------------------------ */
	.streetscapeContainer .bgWavyBox {
		--default-bgWavyBox-pattern-bgPosition:	center 50%;
		--default-bgWavyBox-pattern-scale:		-1.7 1.7;
		--default-bgWavyBox-pattern-rotate:		8deg;
		--default-bgWavyBox-pattern-opacity:	.35;
		--default-bgWavyBox-pattern-translateX:	5%;
		--default-bgWavyBox-pattern-translateY:	30%;
		--default-bgWavyBox-gradient-bottom-height:	min(20%, 400px);
	}
@media screen and (max-width: 540px) {
	.streetscapeContainer .bgWavyBox {
		--default-bgWavyBox-pattern-scale:		2.2 2.2;
		--default-bgWavyBox-pattern-rotate:		-8deg;
		--default-bgWavyBox-pattern-translateX:	0%;
		--default-bgWavyBox-pattern-translateY:	20%;
	}
}

/* streetscapeSection
------------------------------------------------------------------------ */
	.streetscapeSection {
		width: var(--site-sizeContentWide-M5);
		max-width: calc(var(--landplan-landplanStyle-content-width) * 1px);
		margin-left: auto;
		margin-right: auto;
	}
	.streetscapePhBox {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 2.5%;
		margin-top: var(--site-marpad-XS);
	}