@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/index/foot_entry@sp.webp");}
	.informationWrap::after {	content: "外観完成予想図"}
@media screen and (min-width: 736.02px) {
	.informationWrap {	background-image: url("../images/index/foot_entry@pc.webp");}
}


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

	.moviePlayerBox::after {
		content: "主寝室完成予想動画[stage1]";
	}


/* mainVisual
------------------------------------------------------------------------ */
	.mainVisualWrap {

	}
	.mainVisual {
		position: relative;
	}
	.mainVisual .mainCopy {
		position: absolute;
		bottom: 40%;
		right: 4.8%;
		width: calc(669 / 1124 * 100%);
		max-width: 669px;
	}
@media screen and (min-width: 736.02px) {
	.mainVisual .mainCopy {
		position: absolute;
		bottom: 46%;
		right: 15.3%;
		width: calc(400 / 1920 * 100%);
		max-width: 304px;
	}
}



/* conceptWordWrap
------------------------------------------------------------------------ */
	.conceptWordWrap {
		position: relative;
		width: 100%;
		height: 100vh;
	}
	.conceptWordWrap::before {
		content: "";
		position: absolute;
		top: 0;
		left: 10%;
		display: block;
		width: 1px;
		height: 100%;
		background: rgba(255, 255, 255, .3);
		transform: scaleY(0);
		transform-origin: top center;
		transition: 3s transform ease;
	}
	.conceptWordWrap::after {
		content: "エントランスホール完成予想図[stage1]";
		display: inline-block;
		position: absolute;
		z-index: 10000;
		bottom: 0.3em;
		right: 0.3em;
		font-size: 1.0rem;
		font-family: var(--site-font_family-sans);
	}
	.conceptWordBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.2;
		/*filter: blur(10px);*/
		background: url("../images/index/concept@sp.webp") center center no-repeat;
		/*background-attachment: fixed;*/
		background-size: auto 100vh;
	}
	.conceptWordUnit {
		overflow: hidden;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 90%;
		font-size: 4vw;
		padding: 2em 10% 2em 5%;
	}
	.conceptWordUnit > * {
		opacity: 0;
		transform: translateX(-20px);
		transition: opacity 1.2s ease 1.0s, transform 1.2s ease 1.0s; 
	}
	.conceptWord {
		display: block;
	}
	.conceptWord.en {
		font-family: var(--site-font_family-en_1);
		font-size: 3.2em;
		line-height: 1;
	}


	.conceptWordWrap.is-active::before {
		transform: scaleY(1);
	}
	.conceptWordWrap.is-active .conceptWordUnit > * {
		opacity: 1;
		transform: translateX(0);
	}


@media screen and (min-width: 736.02px) {
	.conceptWordWrap::before {
		left: 50%;
	}
	.conceptWordBg {
		background: url("../images/index/concept@pc.webp") center center no-repeat;
		background-attachment: fixed;
	}
	.conceptWordUnit {
		width: 50%;
		font-size: 1.3em;
	}
}



/* planningWrap
------------------------------------------------------------------------ */
	.planningWrap {
		position: relative;
		min-height: 100vh;
		background-attachment: fixed;
		background-size: cover;
		margin: var(--site-marpad-M) 0;
	}
	.planningWrap::after {
		content: "シャワールーム・3階洗面室完成予想図[stage1]";
		display: block;
		z-index: 10000;
		/*bottom: 0.3em;
		right: 0.3em;*/
		font-size: 1.0rem;
		font-family: var(--site-font_family-sans);
		text-align: right;
		margin-left: auto;
		
		background: rgba(0, 0, 0, .6);
		padding: 0 0.5em;
	}

	.planningBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: .2;
		background: url("../images/index/plan@pc.webp") center center no-repeat;
		background-size: auto 100vh;
	}
	.planningBg::before,
	.planningBg::after {
		position: absolute;
		top: 0px;
		left: 0;
		z-index: 10;
		content: "";
		display: block;
		width: 100%;
		height: 40vh;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 100%);
	}
	.planningBg::after {
		top: auto;
		bottom: 0;
		transform: scaleY(-1);
		margin-bottom: auto;
		margin-top: -10vh;
	}

	.planningUnit {
		position: relative;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 90%;
		max-width: 486px;
		height: 100vh;
		margin-right: auto;
		padding: 0 30px;
		border: solid rgba(255, 255, 255, .3);
		border-width: 0 1px 0 0;
	}
	.planningUnit h4 {
		position: absolute;
		top: 0;
		left: 100%;
		transform-origin: left 83%;
		transform: rotate(90deg);
		line-height: 1;
		font-family: var(--site-font_family-en_1);
		font-size: 3.2em;
	}
	.planningWrap .legendBox {
		justify-content: flex-end;
	}

@media screen and (min-width: 736.02px) {

	.planningBg {
		background-attachment: fixed;
	}
	.planningUnit {
		margin-left: auto;
		border-left-width: 1px;
	}
}



/* madoriUnit */
	.madoriUnit {
		letter-spacing: 0;
		margin-right: auto;
	}
	.madoriUnit div + div {
		margin-top: 1.8em;
	}
	.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.4em;
		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;
	}





	.planningUnit .btn {
			margin: 1.5em 0 0 auto;	
	}
	.planningUnit .btn a {
		display: block;
	}
	.planningUnit .btn a .ico {
		position: relative;
		display: block;
		width: 150px;
		height: 1px;
		border-bottom: 1px solid #FFF;
		margin: 1px 0 0;
		transition: transform 0.3s ease;
		transform-origin: left bottom;
	}
	.planningUnit .btn a .ico::after {
		content: "";
		position: absolute;
		bottom: -1px;
		right: 0;
		display: block;
		width: 15px;
		height: 1px;
		background: #FFF;
		transform-origin: bottom right;
		transform: rotate(45deg);
	}

	/* hover */
	@media (hover: hover) and (pointer: fine) {
		.planningUnit .btn a:hover .ico {
			transform: scaleX(1.1);
		}
	}