@charset "utf-8";

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

@media screen and (max-width: 1200px) {
/*    main {
        margin-top: 0;
    }*/
}
@media screen and (min-width: 736.02px) {
}
	/* hover, focus, current */
	@media (hover: hover) and (pointer: fine) {
	}
	.hogehoge a:focus {
	}


	.informationWrap {	background-image: url("../images/roomplan/foot_entry@sp.webp");}
	.informationWrap::after {	content: "主寝室完成予想図[stage1]"}
@media screen and (min-width: 736.02px) {
	.informationWrap {	background-image: url("../images/roomplan/foot_entry@pc.webp");}
}


/* =======================================================================================
	PAGE
======================================================================================= */
	.moviePlayerBox.roomMovie01::after {
		content: "リビング完成予想動画[stage1]";
	}
	.moviePlayerBox.roomMovie02::after {
		content: "エントランスホール完成予想動画[stage1]";
	}




	.planPhotoArea {
		--photoMargin-lr: 10%;
	}
	.planPhotoArea figure {
		position: relative;
	}
	.planPhotoArea figure .imgUnit {
		overflow: hidden;
		display: block;
	}
	.planPhotoArea figcaption,
	.movieTtl {
		display: block;
		position: absolute;
		left: -0.4em;
		bottom: calc(100% - 1em);
		font-family: var(--site-font_family-en_1);
		font-size: 5vw;
		font-weight: 700;
		transform: rotate(90deg);
		transform-origin: left bottom;
		
		text-shadow: 0 0 5px rgba(0, 0, 0, .6);
	}
	.planPhotoArea figcaption .PCTB {
		display: none;
	}

@media screen and (min-width: 736.02px) {
	.planPhotoArea figcaption .PCTB {
		display: block;
	}
	.planPhotoArea figcaption .SP {
		display: none;
	}
	.planPhotoArea figcaption,
	.movieTtl {
		font-size: 3.5em;
		font-weight: 400;
		
		text-shadow: 0 0 5px rgba(0, 0, 0, .1);
	}
}


/* .pt-01 */

@media screen and (min-width: 736.02px) {
	.pt-plan_01 {
		display: grid;
		grid-gap: 80px;
		grid-template-columns: 3fr 4fr 2fr;
		grid-template-rows: auto auto auto;
	}
	.pt-plan_01 .planPhotoUnit01 {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	.pt-plan_01 .planPhotoUnit02 {
		grid-column: 1 / 4;
		grid-row: 1 / 2;
	}
	.pt-plan_01 .planPhotoUnit03 {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		align-self: flex-start;
	}
	.pt-plan_01 .planPhotoUnit04 {
		grid-column: 1 / 4;
		grid-row: 3 / 4;
	}
}


	.pt-plan_01 .planPhotoUnit01 {
		/*margin-left: var(--photoMargin-lr);*/
		margin-right: calc(var(--photoMargin-lr)* 2 );
	}
	.pt-plan_01 .planPhotoUnit01 figcaption {
		left: calc(100% + var(--photoMargin-lr) - 0.4em);
		bottom: 60%;
	}
@media screen and (min-width: 736.02px) {
	.pt-plan_01 .planPhotoUnit01 figcaption {
		width: 100%;
		left: calc(100% - 0.45em);
		bottom: calc(100% - 0.6em);
	}
	.pt-plan_01 .planPhotoUnit01 {
		/*margin-left: var(--photoMargin-lr);*/
		margin-right: 0;
	}
}


	.pt-plan_01 .planPhotoUnit02 {
		overflow-x: hidden;
		margin-top: var(--site-marpad-XXL);
		/*margin-left: var(--photoMargin-lr);*/
		/*margin-right: calc(var(--photoMargin-lr)* 2 );*/
	}
	.pt-plan_01 .planPhotoUnit02 img {
		position: relativee;
		width: 110%;
		max-width: none;
		margin-left: -5%;
	}
@media screen and (min-width: 736.02px) {
	.pt-plan_01 .planPhotoUnit02 {
		width: 90%;
		max-width: 1600px;
		margin: var(--site-marpad-S) auto 0;
	}
}



	.pt-plan_01 .planPhotoUnit03 {
		margin-top: var(--site-marpad-XXL);
		/*margin-left: var(--photoMargin-lr);*/
		margin-left: calc(var(--photoMargin-lr)* 2.5 );
	}
	.pt-plan_01 .planPhotoUnit03 figcaption {
		left: auto;
		right: calc(100% + var(--photoMargin-lr) * .3);
		bottom: 65%;
	}
@media screen and (min-width: 736.02px) {
	.pt-plan_01 .planPhotoUnit03 {
		margin-top: 0;
		/*margin-left: var(--photoMargin-lr);*/
		margin-left: 0;
	}
	.pt-plan_01 .planPhotoUnit03 figcaption {
		left: calc(100% - 0.45em);
		right: auto;
		bottom: calc(100% - 0.6em);
	}
}



	.pt-plan_01 .planPhotoUnit04 {
		position: relative;
		margin-top: var(--site-marpad-XL);
	}
	.pt-plan_01 .planPhotoUnit04 .movieTtl {
		left: -0.7em;
	}
@media screen and (min-width: 736.02px) {
}





/* .pt-02 */
	.pt-plan_02 {
		position: relative;
		padding: var(--site-marpad-S) 1.5em;
		background: url("../images/index/main@pc.webp") top left no-repeat;
		background-size: cover;
	}
	.pt-plan_02::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0 ,.78);
	}
	.pt-plan_02 .captionWrap {
		position: relative;
		z-index: 10;
	}
@media screen and (min-width: 736.02px) {
}

/* madoriUnit */
	.madoriUnit {
		letter-spacing: 0;
		font-size: 2.6vw;
		margin-right: auto;
	}
	.madoriUnit + .madoriUnit {
		margin-top: var(--site-marpad-XL);
	}
@media screen and (min-width: 736.02px) {
	.madoriUnit {
		font-size: 0.9em;
	}
	.madoriUnit + .madoriUnit {
		margin-top: var(--site-marpad-L);
		flex-direction: row-reverse;
	}
}
@media screen and (min-width: 1050.02px) {
	.madoriUnit {
		display: flex;
		column-gap: 6vw;
		width: 86%;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}
	.madoriUnit + .madoriUnit {
		margin-top: var(--site-marpad-L);
		flex-direction: row-reverse;
	}
}

	.madoriUnit dl {
		position: relative;
		width: 90%;
		color:  rgba(255, 255, 255, 1);
		padding: 4em 1.6em 2em;
		border: 1px solid rgba(255, 255, 255, .6);
	}
	.madoriUnit dl::before {
		position: absolute;
		left: 100%;
		bottom: calc(100% - 1em);
		transform: rotate(90deg);
		transform-origin: left bottom;
		width: 100%;
		font-size: 2.5em;
		line-height: 0.98;
	}
	.madoriUnit.st1Unit dl::before {
		content: "stage 1";
	}
	.madoriUnit.st2Unit dl::before {
		content: "stage 2";
	}
@media screen and (min-width: 736.02px) {
	.madoriUnit dl {
		width: 60%;
		max-width: 600px;
		margin-left: 5%;
	}
	.madoriUnit dl::before {
		font-size: 2.2em;
	}
}
@media screen and (min-width: 1050.02px) {
	.madoriUnit dl {
		width: 60%;
		max-width: 600px;
	}
}


	.madoriUnit dt {
		display: inline-block;
		color: #000;
		background: rgba(255, 255, 255, 1);
		font-family: var(--site-font_family-en_1);
		font-variant-caps: small-caps;
		font-size: 1.3em;
		font-weight: 500;
		line-height: 1;
		padding: 0 0.4em;
	}
	.madoriUnit dt em {
		font-family: var(--site-font_family-serif);
	}
	.madoriUnit .ldkUnit {
		line-height: 1.4;
		margin-bottom: 0.4em;
	}
	.madoriUnit .ldkUnit em {
		display: inline-block;
		font-size: 1.2em;
		line-height: .8;
	}
	.madoriUnit .ldkUnit em::first-letter {
		font-size: 1.4em;
		line-height: 1;
	}
	.madoriUnit dd ul li {
		display: inline-block;
		font-size: 0.9em;
	}
	.madoriUnit dd ul li:not(:last-child) {
		margin-right: 1em;		
	}
	.madoriUnit dd ul + small {
		line-height: 1.2;
		margin-top: 0em;
	}

	.madoriUnit .madori {
		margin: var(--site-marpad-S) 0 var(--site-marpad-S);
		margin-left: 1.8em;
	}



@media screen and (min-width: 736.02px) {
	.madoriUnit .madori {
		margin-left: 0;
	}
	.madoriUnit dt {
		font-size: 1.1em;
	}
}




/* .pt-03 */


	.pt-plan_03 .planPhotoUnit01 {
		margin-left: 20px;
		margin-right: 20px;
	}
	.pt-plan_03 .planPhotoUnit01 figcaption {
		left: -0.15em;
		bottom: calc(100% - 0.4em);
		width: 41%;
		line-height: 1.0;
	}
@media screen and (min-width: 736.02px) {
	.pt-plan_03 .planPhotoUnit01 {
		margin-left: 5%;
		margin-right: 5%;
	}
}


	.pt-plan_03 .planPhotoUnit02 {
		position: relative;
		margin-top: var(--site-marpad-XXL);
		/*margin-left: var(--photoMargin-lr);*/
		margin-right: calc(var(--photoMargin-lr)* 3 );
	}
	.pt-plan_03 .planPhotoUnit02 .movieTtl {
		left: calc(100% + var(--photoMargin-lr) * 1.5 - 0.4em);
		bottom: 60%;
	}
@media screen and (min-width: 736.02px) {
	.pt-plan_03 .planPhotoUnit02 {
		margin-right: 40%;
	}
	.pt-plan_03 .planPhotoUnit02 .movieTtl {
		left: calc(100% - 0.8em);
		bottom: calc(100% - 0.6em);
	}
}



	.pt-plan_03 .planPhotoUnit03 {
		margin-top: var(--site-marpad-XL);
		/*margin-left: var(--photoMargin-lr);*/
		margin-left: calc(var(--photoMargin-lr)* 1.5 );
	}
	.pt-plan_03 .planPhotoUnit03 figcaption {
		left: auto;
		right: calc(100% - var(--photoMargin-lr) * .5);
		bottom: 65%;
	}
@media screen and (min-width: 736.02px) {
	.pt-plan_03 .planPhotoUnit03 {
		margin-left: 40%;
	}
	.pt-plan_03 .planPhotoUnit03 figcaption {
		left: -0.4em;
		bottom: calc(100% - 0.6em);
	}
}

	.pt-plan_03 .planPhotoUnit04 {
		margin-top: var(--site-marpad-XXL);
		margin-left: 20px;
		margin-right: 20px;
	}
@media screen and (min-width: 736.02px) {
	.pt-plan_03 .planPhotoUnit04 {
		margin-left: 5%;
		margin-right: 5%;
	}
}