@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */



/* =======================================================================================
	COMMON
======================================================================================= */



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

/* townscapeIntroContainer
------------------------------------------------------------------------ */
	.townscapeIntroContainer {
	}

/* townscapeIntroPicBox
---------------------------------------------------- */
	.townscapeIntroPicBox {
	}
@media screen and (max-width: 736px) {
	.townscapeIntroPicBox {
		width: 100%;
	}
	.townscapeIntroPicBox small.bltr {
		padding-left: .5em;
		padding-right: .5em;
	}
}
@media screen and (max-width: 480px) {
	/* ===== jsSwipeIt ===== */
	.townscapeIntroPicBox .jsSwipeIt .pic {
		width: 275%;
	}
}



/* townPlanningWrap
------------------------------------------------------------------------ */
	.townPlanningWrap {
	}

/* landplotWrap
---------------------------------------------------- */
	.landplotWrap {
		display: grid;
		grid-template-columns: calc(720 / 1260 * 100%) 1fr;
		align-items: center;
		gap: 30px calc(40 / 1400 * 100%);
	}
	.landplotTxtBox {
		padding-bottom: 5em; /* 高さ調整 */
	}
	.landplotTxtBox .heading {
		line-height: 1.6;
		margin-bottom: 1.6em;
		padding: 1.05em 0 1.15em;
		border: 0 solid rgba(var(--site-themeColor-accent_2), 1);
		border-width: 1px 0;
	}
	.landplotTxtBox .txt {}
	.landplotPicBox {
		order: -1;
	}
	.landplotPicBox .pic {}
	/*.landplotPicBox .pic img {
		mix-blend-mode: darken;
	}*/
@media screen and (max-width: 1000px) {
	.landplotWrap {
		grid-template-columns: 1fr;
	}
	.landplotTxtBox {
		padding-bottom: revert;
	}
	.landplotPicBox {
		order: revert;
	}
	.landplotPicBox .pic {
		max-width: 650px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* planningDetailWrap
---------------------------------------------------- */
	.planningDetailWrap {
		--_bgColor-top-hamidasi: clamp(200px, (330 / 1400 * 100vw), 330px);
		background: linear-gradient(to bottom, transparent var(--_bgColor-top-hamidasi), #fff var(--_bgColor-top-hamidasi));
		margin-bottom: -1px; /* 微調整 */
		padding-bottom: var(--site-marpad-XXXL); /* 親コンテナの下余白は pb0 にし、こちらに下余白を付ける */
	}
	.planningDetailList {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 45px max(1.75em, (37.5 / 1260 * 100%));
	}
	.planningDetailListUnit {}
	.planningDetailListUnit .numBox {
		line-height: 1.2;
		color: rgba(var(--site-themeColor-accent_2), 1);
		font-family: var(--site-font_family-en_2);
		font-style: italic;
		font-size: clamp(4.5rem, (60 / 1400 * 100vw), 6rem);
		text-align: right;
		letter-spacing: normal;
		margin-bottom: 10px;
		border-bottom: 1px solid currentColor;
	}
	.planningDetailListUnit .picBox {
		position: relative;
	}
	.planningDetailListUnit .picBox .imgcapkeep {
		font-size: 1rem;
	}
	.planningDetailListUnit .txtBox {
		font-size: clamp(1.25rem, (14 / 1400 * 100vw), 1.4rem);
	}
	.planningDetailListUnit .txtBox .ttl {
		line-height: 1.35;
		color: rgba(var(--site-themeColor-accent_2), 1);
		font-size: 1.642857em;
		letter-spacing: .1em;
		padding: .85em 0 .65em;
	}
	.planningDetailListUnit .txtBox .ttl .kana {
		letter-spacing: -.03em;
	}
	.planningDetailListUnit .txtBox .txt {
		letter-spacing: .08em;
		text-align: justify;
		overflow-wrap: break-word; /* 長い英語対策 */
	}
	
	/* -- Individual -- */
	.unit01.planningDetailListUnit .txtBox .txt .takutimudentyuu_logo {
		float: right;
		width: clamp(65px, (150 / 395 * 100%), 150px);
		margin-left: 13px;
		margin-bottom: 4px;
	}
@media screen and (max-width: 1000px) {
	.planningDetailListUnit .txtBox .ttl {
		font-size: 1.55em;
	}
}
@media screen and (max-width: 736px) {
	.planningDetailWrap {
		background: none;
		margin-bottom: revert;
	}
	.planningDetailList {
		grid-template-columns: 1fr;
	}
	.planningDetailListUnit .numBox {
		font-size: clamp(4rem, (40 / 375 * 100vw), 5rem);
		text-align: right;
	}
	.planningDetailListUnit:nth-of-type(even) .numBox {
		text-align: left;
	}
	.planningDetailListUnit .txtBox {
		font-size: 1.3rem;
		background: #fff;
		padding: 1.9em 1.53em;
	}
	.planningDetailListUnit .txtBox .ttl {
		font-size: 1.384615em;
		padding-top: 0;
	}
	
	/* -- Individual -- */
	.unit01.planningDetailListUnit .txtBox .txt {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 7px 0;
	}
	.unit01.planningDetailListUnit .txtBox .txt .takutimudentyuu_text {
		order: -1;
	}
	.unit01.planningDetailListUnit .txtBox .txt .takutimudentyuu_logo {
		float: revert;
		width: 150px;
		margin-left: revert;
		margin-bottom: revert;
	}
}



/* facadeDesignContainer
------------------------------------------------------------------------ */
@media screen and (max-width: 736px) {
	.facadeDesignContainer {
		background-position: center calc(max(5px, (5 / 375 * 100vw)) * -1);
		margin-top: var(--site-marpad-XXXL);
	}
}

/* facadeDesignWrap
------------------------------------------------------------------------ */
	.facadeDesignWrap {}

/* facadeDesignWrapMainPic
---------------------------------------------------- */
	.facadeDesignWrapMainPic {
		width: calc(100% - ((calc(50 / 1920 * 100%) * 2)));
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
	}
	.facadeDesignWrapMainPic img {
		display: block;
		width: 100%;
	}
@media screen and (max-width: 736px) {
	.facadeDesignWrapMainPic {
		width: 100%;
	}
}
/* ==========
	ANIME
========== */
@media screen {
	[data-js_show_target="facadeDesignWrapMainPic"] {
		opacity: .03;	scale: .88;
	}
	[data-js_show_target-passed="facadeDesignWrapMainPic"] {
		animation: 3200ms var(--M-easing-easeOutQuint) 300ms both ANIME-facadeDesignWrapMainPic;
	}
}
@keyframes ANIME-facadeDesignWrapMainPic {
	0% {	opacity: .03;	scale: .88;}
	65% {					scale: 1;}
	100% {	opacity: 1;		scale: 1;}
}

/* ちょっと凝りすぎて他より浮く
@media screen {
	[data-js_show_target="facadeDesignWrapMainPic"] {
		opacity: .03;
		scale: .88;
	}
	[data-js_show_target-passed="facadeDesignWrapMainPic"] {
		animation:
			2200ms var(--M-easing-easeOutQuint) 300ms both ANIME-facadeDesignWrapMainPic,
			4500ms var(--M-easing-easeOutQuint) 300ms both ANIME-facadeDesignWrapMainPic_mask;
	}

	.facadeDesignWrapMainPic {
		-webkit-mask-image: radial-gradient(circle, black 0%, black 40%, transparent 100%);
		-webkit-mask-size: 250% 250%; // 100%より大きくして、四隅を確実に"black"側に逃がす //
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-image: radial-gradient(circle, black 0%, black 40%, transparent 100%);
		mask-size: 250% 250%;
		mask-repeat: no-repeat;
		mask-position: center;
	}
}
@keyframes ANIME-facadeDesignWrapMainPic {
	0%   { opacity: .03; scale: .88; }
	100% { opacity: 1;   scale: 1; }
}
@keyframes ANIME-facadeDesignWrapMainPic_mask {
	0%   { -webkit-mask-size: 1% 1%;     mask-size: 1% 1%; }
	100% { -webkit-mask-size: 250% 250%; mask-size: 250% 250%; }
}*/


/* fdDetailWrap
---------------------------------------------------- */
	.fdDetailWrap {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--site-marpad-XL) 0;
	}

/* fdDetailSection
--------------------------------- */
	.fdDetailSection {
		position: relative;
		z-index: 0;
	}
	.fdDetailSection::before {
		content: "";
		position: absolute;
		inset: 0 0 0 auto;
		z-index: -1;
		width: calc(var(--site-sizeContentWide-M) + (100% - var(--site-sizeContentWide-M)) / 2);
		max-width: calc(var(--site-sizeMaxWidth-M) + (100% - var(--site-sizeMaxWidth-M)) / 2);
		color: rgba(var(--site-themeColor-main_text), 1);
		background: rgba(var(--site-themeColor-main), 1) var(--site-variationColor-pattern_gray);
	}

	.fdDetailBox {
		/* 詳細ボックスの上下余白（画像のはみ出しにも使用） */
		--fdDetailBox-txtArea-padding_tb: clamp(60px, (90 / 1450 * 100vw), 90px);
		/* 左右とgapの余白を一気に減らすための設定 */
		--M-fluidSize-max-size: 130;
		--M-fluidSize-min-size: 50;
		--M-fluidSize-max-viewport: 1450;
		--M-fluidSize-min-viewport: 1200;
		--M-fluidSize-size: clamp( var(--M-fluidSize-min-size) * 1px, (var(--M-fluidSize-min-size) * 1px) + (1vw - (var(--M-fluidSize-min-viewport) / 100 * 1px)) * (100 * (var(--M-fluidSize-max-size) - var(--M-fluidSize-min-size)) / (var(--M-fluidSize-max-viewport) - var(--M-fluidSize-min-viewport))), var(--M-fluidSize-max-size) * 1px );
		
		/* レイアウト設定 */
		display: grid;
		grid-template-columns: 1fr calc(400 / 1000 * 100%);
		width: var(--site-sizeContentWide-M);
		max-width: var(--site-sizeMaxWidth-M);
		margin-left: auto;
		margin-right: auto;
		
		/* 左右とgapの余白設定 */
		gap: 0 clamp(40px, var(--M-fluidSize-size), 100px);
		padding: var(--fdDetailBox-txtArea-padding_tb) var(--M-fluidSize-size);
	}
	.fdDetailTxtBox {
		align-self: end;
		padding-bottom: 1em; /* 微調整 */
	}
	.fdDetailTxtBox .heading {}
	.fdDetailTxtBox .heading .headingEn {
		display: flex;
		align-items: center;
		gap: .4em;
		line-height: 1.2;
		font-family: var(--site-font_family-en_2);
		font-size: clamp(2.2rem, (30 / 1450 * 100vw), 3rem);
		font-style: italic;
		letter-spacing: .1em;
	}
	.fdDetailTxtBox .heading .headingEn::after {
		content: "";
		flex: 0 0 3.333em;
		border-top: 1px solid currentColor;
	}
	.fdDetailTxtBox .heading .headingTtl {
		line-height: 1.5;
		color: rgba(var(--site-themeColor-accent_2), 1);
		text-align: inherit;
		margin-top: 1.9em;
		margin-bottom: 1.15em;
	}
	.fdDetailTxtBox .txt {
		line-height: 1.78;
		text-align: justify;
		overflow-wrap: break-word; /* 長い英語対策 */
	}
	.fdDetailPicBox {
		margin-top: calc((var(--fdDetailBox-txtArea-padding_tb) * 1.444444) * -1); /* '*1.444'で'40px'はみ出す設定（40px+90px=130px。130/90=1.444） */
	}
	.fdDetailPicBox .pic {
		position: relative;
	}
	.fdDetailPicBox .pic img {
		width: 100%;
		max-width: none;
	}
	
	/* -- Individual -- */
	.fdDetailSection:nth-of-type(even)::before {
		inset: 0 auto 0 0;
	}
	:where(.fdDetailSection:nth-of-type(even)) .fdDetailBox {
		grid-template-columns: calc(400 / 1000 * 100%) 1fr;
	}
	:where(.fdDetailSection:nth-of-type(even)) .fdDetailPicBox {
		order: -1;
	}

@media screen and (max-width: 1000px) {
	.fdDetailBox {
		/* 左右とgapの余白を一気に減らすための設定 */
		--M-fluidSize-max-size: 50;
		--M-fluidSize-min-size: 35;
		--M-fluidSize-max-viewport: 1000;
		--M-fluidSize-min-viewport: 736;
	}
	.fdDetailPicBox {
		margin-top: 0;
	}
}
@media screen and (max-width: 736px) {
	.fdDetailSection::before {
		width: 80%;
	}

	.fdDetailBox {
		--fdDetailBox-txtArea-padding_tb: clamp(55px, (55 / 375 * 100vw), 75px);
		grid-template-columns: 1fr;
		gap: clamp(30px, (30 / 375 * 100vw), 40px) 0;
		width: 75.2%;
		padding: var(--fdDetailBox-txtArea-padding_tb) 
				 0
				 calc(var(--fdDetailBox-txtArea-padding_tb) + 20px);
	}
	.fdDetailTxtBox {
		align-self: end;
		padding-bottom: 1em; /* 微調整 */
	}
	.fdDetailPicBox {
		margin-top: revert;
	}
	
	/* -- Individual -- */
	.fdDetailSection:nth-of-type(even) .fdDetailPicBox {
		order: revert;
	}
}
/* ==========
	ANIME
========== */
@media screen {
	[data-js_show_target="fdDetailSection"] {
		opacity: 1;
	}
	[data-js_show_target="fdDetailSection"]::before {
		opacity: 0;
	}
	[data-js_show_target-passed="fdDetailSection"]::before {
		animation: 1000ms var(--M-easing-easeInOutCubic) 100ms both;
	}
	[data-js_show_target-passed="fdDetailSection"]:nth-of-type(odd)::before {	animation-name: ANIME-fdDetailSectionOdd_bgImg;}
	[data-js_show_target-passed="fdDetailSection"]:nth-of-type(even)::before {	animation-name: ANIME-fdDetailSectionEven_bgImg;}

	.fdDetailSection::before {
		-webkit-mask-size: 250% 100%;
		-webkit-mask-repeat: no-repeat;
				mask-size: 250% 100%;
				mask-repeat: no-repeat;
	}
	.fdDetailSection:nth-of-type(odd)::before {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 60%, black 100%);
 		 		mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 60%, black 100%);
	}
	.fdDetailSection:nth-of-type(even)::before {
		-webkit-mask-image: linear-gradient(to left, transparent 0%, transparent 40%, black 60%, black 100%);
 		 		mask-image: linear-gradient(to left, transparent 0%, transparent 40%, black 60%, black 100%);
	}
}
@keyframes ANIME-fdDetailSectionOdd_bgImg {
	0%   { opacity: 0; -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
	20%  { opacity: 1; }
	100% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes ANIME-fdDetailSectionEven_bgImg {
	0%   { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
	20%  { opacity: 1; }
	100% { opacity: 1; -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}