@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */
	.indexFooterWrap {	background-image: url("../images/index/bottom.jpg?260618"); position: relative;}
	/*.indexFooterPicBox::after {	content: "外観完成予想図"}*/
	.informationWrap::after,
	.indexFooterWrap::after {	display: none;}

	.indexFooterPicBox {
		position: relative;
		z-index: 12;
	}
	.indexFooterPicBox .picBox {
		width: 100%;
		height: 100%;
	}
	.indexFooterPicBox img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.informationCont {
		width: calc(100% - 60px);
		padding: 30px 0px;
	}
@media print, screen and (min-width: 840.02px) {
	.informationWrap,
	.indexFooterWrap {
		height: auto;
	}
	.indexFooterWrap {
		display: grid;
		grid-template-columns: 60% 1fr;
	}
}
@media screen and (max-width: 840px) {
	.informationWrap {
		height: 60vh;
	}
	.indexFooterWrap {
		height: auto;
	}
}



/* =======================================================================================
	COMMON
======================================================================================= */
.container {
	padding: var(--site-marpad-XXL) 0 !important;
}
@media screen and (max-width: 1050px) {
}



/* =======================================================================================
	PAGE
======================================================================================= */
@media print, screen and (min-width: 1050.02px) {
}
@media screen and (max-width: 1050px) {
}


/* mainVisual — 読み込み時アニメーション
------------------------------------------------------------------------ */
	/* ① 画像：blur+白飛び → 正常 */
	.mainPic {
		overflow: hidden;
		clip-path: inset(0);
		opacity: 1;
	}
	.mainPic img {
		filter: blur(12px) brightness(1.4);
		transform: scale(1.1);
		transition: transform 1.8s ease,filter 1.8s ease;
	}
	.mainPic.mv-pic--active {
		opacity: 1;
	}
	.mainPic.mv-pic--active img {
		filter: none;
		transform: scale(1.0);
	}

	/* ② ライン：上/下から伸びる */
	.mainVisual .mainCopy h2::before,
	.mainVisual .mainCopy h2::after {
		transform: scaleY(0) !important;
		transition: transform 0.8s ease;
	}
	.mainVisual .mainCopy h2.mv-line--active::before,
	.mainVisual .mainCopy h2.mv-line--active::after {
		transform: scaleY(1) !important;
	}
	.mainVisual .mainCopy h2.mv-line--active::before {	transform-origin: top left;	}
	.mainVisual .mainCopy h2.mv-line--active::after {	transform-origin: bottom left;	}

	/* ③ テキスト：JS実行前は非表示、spanに包んだ後に表示 */
	.mainCopy h2 {
		visibility: hidden;
	}
	.mainCopy h2.mv-text--ready {
		visibility: visible;
	}

	/* ③ テキスト：1文字ずつフェードイン */
	.mainCopy h2 .mv-char {
		display: inline-block;
		opacity: 0;
		filter: blur(2px);
		transition: opacity 1.2s ease, filter 1.2s ease;
	}
	.mainCopy h2 .mv-char.is-visible {
		opacity: 1;
		filter: blur(0);
	}


/* hTxt — 1文字ずつアニメーション
------------------------------------------------------------------------ */
	.ptHeading .hTxt .charUnit {
		display: inline-block;
		opacity: 0;
		filter: blur(2px);
		transition: opacity 1.2s ease, filter 1.2s ease;
	}
	.ptHeading .hTxt.is-animated .charUnit {
		opacity: 1;
		filter: blur(0);
	}


/* mainVisualWrap
------------------------------------------------------------------------ */
	.mainVisualWrap {
		position: relative;
		overflow: hidden;
		background: linear-gradient(to top, rgba(0, 0, 0, .6) 20%, rgba(0, 0, 0, 0) 100%);
		/*background: radial-gradient(circle at 85% -2%, transparent 34%, #000000a6);*/
	}
	/*.mainVisualWrap::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to left, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 80%);
	}*/
	.mainVisual {
		position: relative;
		/*display: flex;
		align-items: flex-end;
		width: 100%;
		max-width: 1600px;
		height: 100%;*/
		/*margin: 0 auto;*/
	}
	.mainVisual .mainCopy {
		color: rgba(255, 255, 255, .9);
		writing-mode: vertical-rl;
	}
	.mainVisual .mainCopy h2 {
		position: absolute;
		z-index: 2;
		top: 27%;
		left: 15%;
		transform: translate(-50%, -50%);
		font-size: 3vw;
		letter-spacing: 0.4em;
	}
	.mainVisual .mainCopy h2::before {
		content: "";
		position: absolute;
		top: 0;	right: 0;
		display: block;
		width: 1px;
		height: 100%;
		background: rgba(255, 255, 255, .6);
	}
	.mainVisual .mainCopy h2::after {
		content: "";
		position: absolute;
		top: 0;	left: 0;
		display: block;
		width: 1px;
		height: 100%;
		background: rgba(255, 255, 255, .6);
	}
	.mainVisual .mainCopy h2 .smlTxt {
		font-size: 0.8em;
	}
@media print, screen and (min-width: 1200.02px) {
	.mainVisual .mainCopy h2 {
		top: 30%;
	}
	.mainVisual img {
		width: 100%;
		max-height: calc(100vh - 122px);
		object-fit: contain;
	}
}
@media print, screen and (min-width: 736.02px) and (max-width: 1460px) {
	.mainVisual .mainCopy h2 {
		left: 11%;
	}
}
@media screen and (max-width: 1200px) {
	.mainVisual img {
		width: 100%;
		max-height: calc(100vh - var(--site-stickyHeader-height));
		object-fit: cover;
		object-position: bottom center;
	}
}
@media screen and (max-width: 736px) {
	.mainVisual .mainCopy h2 {
		top: 25%;
		left: 86%;
		font-size: 6.5vw;
	}
}

@media print, screen and (min-width: 700.02px) and (max-width: 736px) {
	.mainVisual .mainCopy h2 {
		font-size: 5.8vw;
		top: 22%;
	}
}

/* meritWrap
------------------------------------------------------------------------ */
	.meritWrap {
		color: rgba(0, 0, 0, .9);
		background: url("../images/index/bg_merit.jpg") bottom center no-repeat;
		background-size: cover;
		padding: var(--site-marpad-XS) 0;
	}
	.meritBox {
		letter-spacing: 0;
		font-size: min(1.4em, 4vw);
		font-weight: 500;
		text-shadow: 0 0 2px rgba(0, 0, 0, .15);
	}
	.meritBox p {
		position: relative;
		text-align: center;
		padding: 0 2em;
	}
	.meritBox p em {
		display: inline-block;
		line-height: 0.8;
		font-size: 1.6em !important;
		margin: 0 0.1em;
	}
	.meritBox p .txtColor {
		display: inline-block;
		font-family: "Cinzel";
		line-height: 0.8;
		background: linear-gradient(to bottom, #7c7754 0%, #b0a477 50%, #82734b 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		padding: 3px 0 0;
	}
	.meritBox p > span {
		display: inline-block;
	}
@media print, screen and (min-width: 736.02px) {
	.meritBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 96%;
		/*max-width: 1260px;*/
		margin: 0 auto;
	}
	.meritBox p {
		position: relative;
	}
	.meritBox p:not(:first-child)::before {
		position: absolute;
		top: 50%;
		left: -1px;
		transform: translate(0 ,-50%);
		content: "";
		display: block;
		width: 1px;
		height: 3em;
		background: rgba(0, 0, 0, .25);
		
	}
}
@media print, screen and (min-width: 736.02px) and (max-width: 1260px) {
	.meritBox p > span:not(.TB_none) {
		display: block;
	}
	.meritBox p span.TB_none {
		display: none;
	}
}
@media screen and (max-width: 940px) {
	.meritBox {
		font-size: 2vw;
	}
}
@media screen and (max-width: 736px) {
	.meritBox {
		font-size: 3.6vw;
	}
	.meritBox p {
		line-height: 2.2;
		padding: 0.7em 2vw;
	}
	.meritBox p:not(:first-child)::before {
		position: absolute;
		top: -1px;
		left: 5%;
		transform: translate(0 ,-50%);
		content: "";
		display: block;
		width: 90%;;
		height: 1px;
		background: rgba(0, 0, 0, .25);
		
	}
}
@media screen and (max-width: 480px) {
	.meritWrap {
		padding: var(--site-marpad-XXS) 0;
	}
	.meritBox {
		font-size: 5vw;
	}
	.meritBox p:nth-of-type(1) > span:not(.TB_none) {
		display: block;
	}
	.meritBox p span.TB_none {
		display: none;
	}
}


/* topInfoWrap
------------------------------------------------------------------------ */
	.topInfoWrap {
		position: relative;
		text-align: center;
		background: url("../images/index/bg_info.jpg?260618") center 100% no-repeat;
		background-size: cover;
		padding: var(--site-marpad-L) 3em;
	}
	.topInfoWrap::after {
		content: "駒沢オリンピック公園[最遠区画より約440m/徒歩6分]";
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		line-height: 1.5;
		letter-spacing: .04em;
		font-family: var(--site-font_family-caption);
		font-size: 1.1rem;

		background: rgba(0, 0, 0, .6);
		padding: 2px 6px;
	}
	.topInfoWrap > *:not(h3) {
		margin-top: 2em;
	}
	.topInfoWrap h3 {
		opacity: .9;
		font-size: 0.9em;
		letter-spacing: 0.2em;
		margin-bottom: var(--site-marpad-S);
	}
	.infoItem {
		font-size: 1.2em;
	}
	.infoItem .suc {
		max-width: 30em;
		display: block;
		background: rgba(255, 255, 255, .2);
		margin: 1em auto 0;
		padding: 0.2em 0.6em;
	}
	.infoItem strong.txtL {
		display: inline-block;
		font-size: 1.4em;
		margin-bottom: 0.8em;
	}
	.infoBtnBox {
		display: flex;
		justify-content: center;
		column-gap: 30px;
		margin: var(--site-marpad-S) 0 0 !important;
	}
	.infoBtnBox p {
		margin: 0;
	}
@media print, screen and (min-width: 736.02px) {
	.xxxxxxxxxxxxxxxxx {
	}
}
@media screen and (max-width: 736px) {
	.infoItem .suc {
		font-size: 0.9em;
	}
	.infoBtnBox {
		flex-direction: column;
		align-items: center;
		gap: 1em;
	}
	.infoItem {
		font-size: 4vw;
	}
}
@media screen and (max-width: 480px) {
}


/* innerLinkUnit
------------------------------------------------------------------------ */
	.innerLinkUnit {
	}
	.innerLinkTxt {
		align-self: stretch;
		display: flex;
		gap: var(--site-marpad-XS);
		flex-direction: column;
		font-size: 1.2em;
		writing-mode: vertical-rl;
		font-family: "Shippori Mincho", 'Noto Serif JP', 'Noto Serif', YuMincho,'Hiragino Mincho ProN','Yu Mincho',serif;
	}
	.innerLinkTxt .ptHeading {
		font-size: 1.4em;
	}
	.innerLinkTxt .ptHeading .hTxt {
		letter-spacing: 0.5em;
	}
	.innerLinkTxt .ptHeading .hTxt .br {
		display: block;
		padding-top: 8em;
	}
	.innerLinkTxt .decoLine {
		display: inline-block;
		width: 1px;
		height: 3em;
		background: rgba(255, 255, 255, .9);
		margin-bottom: 0.5em;
	}
	.innerLinkTxt .txtBox {
		align-self: flex-end;
		padding-bottom: 2em;
	}
	.innerLinkBtn {
		align-self: flex-end;
	}
	.innerLinkBtn a {
		position: relative;
		display: inline-block;
		padding: 0.8em 0;
		border: 1px solid rgba(255, 255, 255, .8);
	}
	.innerLinkBtn a::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		transform: scaleY(0);
		transform-origin: top center;
		background: rgba(255, 255, 255, .1);
		transition: transform 0.3s ease;
	}
	.innerLinkBtn a::after {
		content: "";
		display: inline-block;
		margin-top: 1.8em;
		border: 5px solid transparent;
		border-top-color: rgba(255, 255, 255, .8);
	}



	.innerLinkBtn a:hover::before {
		transform: scaleY(1);
	}
@media print, screen and (min-width: 736.02px) {
	.innerLinkUnit {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: var(--site-marpad-M);
		max-width: 819px;
		margin: 0 auto;
	}
	.container:nth-of-type(2n) .innerLinkUnit {
		flex-direction: row;
	}
}
@media screen and (max-width: 736px) {
	.container .picBox {
		width: 90%;
		max-width: 600px;
	}
	.container:nth-of-type(2n+1) .picBox {
		margin-left: auto;
	}
	.innerLinkTxt {
		min-height: 70vh;
		margin: var(--site-marpad-L) auto 0;
	}
	.innerLinkTxt .ptHeading .hTxt {
		font-size: 7vw;
	}
	.innerLinkTxt .txtBox {
		font-size: 5vw;
		line-height: 1.8;
	}
	.innerLinkBtn a {
		font-size: 4vw;
	}
}
@media screen and (max-width: 480px) {
}



/* ------------------------------------------------------------------------
 entryMeritSection
------------------------------------------------------------------------ */
	.entryMeritSection {
		width: 98%;
		max-width: 1400px;
		margin:0 auto;
		background: rgba(0, 0, 0, .6);
	}
	
/* ttl-------------*/
	.entryMeritSection .entryMeritWrap .ttl {
		margin-bottom: 2.2em;
	}

	.entryMeritSection .entryMeritWrap .ttl::after {
		content:"";
		display:block;
		margin:0.8em auto 0;
		height:1px;
		width:60px;
		background: var(--site-variationColor-gradient_silver);
	}	



	.entryMeritWrap .txtBox {
		font-size: 1.2em;
	}
@media screen and (max-width: 736px) {
	.entryMeritWrap .txtBox {
		font-size: 3vw;
	}
}



/*entryMeritSwipeWrap
-------------------------------*/
	.entryMeritSwiperWrap  {
		position: relative;
		margin-bottom:var(--site-marpad-M);
	}
	.entryMeritSwiperWrap .entryMeritSwiperBox .txtBox {
		text-align: center;
		font-size:1.1em;
		margin-top:1.2em;
		line-height: 1.4;
	}
/* ドットカスタマイズ */
	.entryMeritSwiperWrap .swiper-pagination-bullets.swiper-pagination-horizontal {
		bottom:-30px;
	}
	.entryMeritSwiperWrap .swiper-pagination-bullet-active {
		background: rgba(var(--site-variationColor-gold_1), 1);
	}

@media print, screen and (min-width: 736.02px) {
	.entryMeritSwiperWrap .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
/* ドットカスタマイズ */
	.entryMeritSwiperWrap .swiper-pagination {display: none;}
}

@media screen and (max-width: 736px) {

	.entryMeritSwiperWrap .entryMeritSwiperBox .txtBox {
		font-size: 3vw;
	}}