@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */
	.informationWrap {	background-image: url("../images/roomplan/bottom.jpg");	background-position: 82% center;}
	.informationWrap::after {	content: "外観完成予想図"}
.contbox.sizeMaxWidthL {
	width: 100%;
	max-width: none;
}
@media screen and (min-width: 736.02px) {
}
@media screen and (max-width: 736px) {
	.txtBox {
	}
	.txtBox .SP_none {
		display: none;
	}
}


/* =======================================================================================
	COMMON
======================================================================================= */
	.contPicBox {
		position: relative;
	}
	.haveEn {
		display: flex;
		flex-direction: column;
	}
	.haveEn i {
		opacity: .5;
		font-size: 0.7em;
		letter-spacing: 0.2em;
	}
@media screen and (max-width: 1050px) {
	.haveEn {
		align-items: center;
		gap: var(--site-marpad-XXS);
	}
}
@media screen and (max-width: 736px) {
	.haveEn {
		align-items: center;
	}
	.mainElementHeaderWrap {
		padding-bottom: 0;
	}
}



/* =======================================================================================
	PAGE
======================================================================================= */
	.ptTtl {
		padding-bottom: var(--site-marpad-L);
	}
@media print, screen and (min-width: 1050.02px) {
	.ptTtl {
		display: grid;
		grid-template-columns: 70% 1fr;
		gap: min(var(--site-marpad-S), 3.4vw);
		align-items: end;
		margin-right: min(var(--site-marpad-S), 3.4vw);
	}
	.ptTtl .contPicBox {
		position: relative;
		order: -1;
	}
	.ptTtl .txtUnit {
		align-self: stretch;
	}
	.ptTtl .txtUnit > div {
		position: sticky;
		top: 50%;
	}
}
@media screen and (max-width: 1050px) {
	.ptTtl .txtUnit {
		width: 92%;
		margin: 0 auto;
	}
	.txtVr {
		writing-mode: vertical-rl;
		font-family: "Shippori Mincho", 'Noto Serif JP', 'Noto Serif', YuMincho,'Hiragino Mincho ProN','Yu Mincho',serif;
		letter-spacing: 0.2em;
	}
	.ptTtl .contPicBox {
		width: 92%;
		margin-top: var(--site-marpad-M);
	}
}


/* pt-facade
------------------------------------------------------------------------ */
	.facadeSubWrap {
		position: relative;
		padding: var(--site-marpad-M) 0;
		overflow: hidden;
		background: rgba(0, 0, 0, .8);
	}
	.facadeSubWrap::before {
		content: "";
		position: absolute;
		top: -2%;
		left: -2%;
		width: 105%;
		height: 105%;
		display: block;
		background: url("../images/roomplan/facade_p01.jpg") left top ;
		background-size: cover;
		filter: blur(5px);
		opacity: .20;
	}
	.facadeUnit {
		position: relative;
	}
	.facadeUnit + .facadeUnit {
		margin-top: var(--site-marpad-L);
	}

	.facadeUnit .contPicBox {
		position: relative;
	}

	.facadeUnit .haveEn {
		display: block;
	}
@media print, screen and (min-width: 736.02px) {
	.facadeUnit {
		display: grid;
		align-items: center;
		grid-template-columns: repeat(2, 1fr);
		gap: min(var(--site-marpad-S), 4vw);
		max-width: 1200px;
		margin-right: auto;
		margin-left: auto;
	}
	.facadeUnit .ptHeading {
		margin-bottom: var(--site-marpad-XXS);
	}
	.facadeUnit:nth-of-type(2n) {
		direction: rtl;
	}
	.facadeUnit:nth-of-type(2n) > * {
		direction: ltr;
	}
}
@media screen and (max-width: 736px) {
	#pt-facade .lNavWrap {
		margin-bottom: var(--site-marpad-XL) !important;
	}
	.facadeUnit .contPicBox {
		width: 80%;
	}
	.facadeUnit .facadeSwipe img {
		width: 250%;
	}
	.facadeUnit .txtUnit {
		width: 84%;
		margin: var(--site-marpad-S) auto 0;
	}
	.facadeUnit .haveEn i {
		writing-mode: vertical-rl;
		position: absolute;
		top: 0;
	}
	.facadeUnit:nth-of-type(2n+1) .contPicBox {
		margin-left: auto;
	}
	.facadeUnit:nth-of-type(2n+1) .haveEn i {
		left: 11%;
		transform: rotate(180deg);
	}
	.facadeUnit:nth-of-type(2n) .haveEn i {
		right: 11%;
	}
}
@media screen and (max-width: 480px) {
}

/* pt-space
------------------------------------------------------------------------ */
	
	#planning {
		background: rgba(0, 0, 0, .35);
	}
	#planning .ptTtl {
		grid-template-columns: 1fr;
	}

@media print, screen and (min-width: 1260.02px) {
	#planning {
		display: grid;
		grid-template-columns: 30% 1fr;
	}
	#planning .PC_none {
		display: none;
	}
	#planning .picBox {
		display: block;
		width: 100%;
		height: 100%;
	}
	#planning .contPicBox img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#planning .planningCont {
		padding: var(--site-marpad-M);
	}
	#planning .planningCont .txtUnit {
	}
}
@media screen and (max-width: 1260px) {
	#planning {
		position: relative;
	}
	#planning .contPicBox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		object-fit: contain;
		object-position: top left;
	}
	#planning .contPicBox .imgcapkeep {
		top: 0;
		bottom: auto;
	}
	#planning .ptTtl {
		width: 90%;
		max-width: 1000px;
		margin-right: auto;
		margin-left: auto;
	}
	#planning .planningCont {
		padding: 0 0 var(--site-marpad-M);
	}
	#planning .planningCont .txtUnit {
	}
	#planning .ptTtl {
		padding: var(--site-marpad-XL) 0;
	}
	#planning .ptTtl .ptHeading {
		margin-bottom: var(--site-marpad-M);
	}
	#planning .planningCont .captionWrap {
		padding: 0 20px 0;
	}
}
@media screen and (max-width: 736px) {
	#pt-space .lNavWrap {
		margin-top: var(--site-marpad-XL);
		margin-bottom: 0 !important;
	}
}

/* planLinkUnit
------------------------------------------------------------------------ */
	.planList {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--site-marpad-XXS);
		margin: var(--site-marpad-M) 0 0;
	}
	.planLinkUnit {
		position: relative;
	}

	.planLinkUnit a {
		position: relative;
		z-index: 1;
		display: block;
		padding: 0 5px var(--site-marpad-M);
		background: top center no-repeat;
		background-size: cover;
		
		transition: scale 0.3s ease;
	}
	.planLinkUnit a:not([href]) {
		opacity: 0.5;
	}
	.planLinkUnit a.planLintBtn-st1 {	background-image: url("../images/roomplan/st1.jpg")}
	.planLinkUnit a.planLintBtn-st2 {	background-image: url("../images/roomplan/st2.jpg")}
	.planLinkUnit a.planLintBtn-st3 {	background-image: url("../images/roomplan/st3.jpg")}
	.planLinkUnit a.planLintBtn-st4 {	background-image: url("../images/roomplan/st4.jpg")}
	.planLinkUnit:nth-of-type(2n+1) {
		position: relative;
		margin-top: calc(var(--site-marpad-M) * -1);
	}

	.stageTtl {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.stageTtl .stageNum {
		writing-mode: vertical-rl;
		color: rgba(255, 255, 255, .6);
		font-size: 0.9em;
		line-height: 1.8;
		background: #000;
		margin-bottom: 4em;
		padding: 1.3em 0 1.5em;
	}
	.stageTtl .stageName {
		font-size: 2.2em;
	}
	.stageLdk {
		display: block;
		font-size: 1.2em;
		line-height: 1.6;
		text-align: center;
		margin: var(--site-marpad-XS) auto 0;
	}
	.stageLdk:first-letter {
		font-size: 1.2em;
	}
	.stageLdk .element {
		display: inline-block;
	}
	.stageSpec {
		display: block;
		font-size: 0.9em;
		line-height: 1.6;
		text-align: center;
		margin: var(--site-marpad-XS) auto 0;
	}
	.stageSpec .areaBox {
		display: block;
	}
	.stageSpec .areaBox em {
		display: inline-block;
		font-size: 1.3em;
		margin-left: 0.2em;
	}
	.planLinkUnit a .entryOnly {
		display: block;
		width: 70%;
		line-height: 1.6;
		font-size: 0.9em;
		text-align: center;
		margin: var(--site-marpad-XS) auto 0;
		padding: 3px;
		border: 1px solid rgba(255, 255, 255, .8);
	}

	.planLinkUnit a[href]::before,
	.planLinkUnit a[href]::after {
		content: "";
		position: absolute;
	}
	.planLinkUnit a[href]::before {
		bottom: var(--site-marpad-XXS);
		right: 20%;
		width: 60%;
		height: 1px;
		background: rgba(255, 255, 255, .8);
		
		transition: width 0.3s ease;
	}
	.planLinkUnit a[href]::after {
		bottom: var(--site-marpad-XXS);
		right: 20%;
		width: 1em;
		height: 1px;
		background: rgba(255, 255, 255, .8);
		transform: rotate(45deg);
		transform-origin: right bottom;
	}
@media screen and (max-width: 1260px) {
	.planList {
		width: 90%;
		margin: calc(var(--site-marpad-XL)* 1.5) auto 0;
	}
}
@media screen and (max-width: 736px) {
	.planList {
		grid-template-columns: repeat(2, 1fr);
		direction: rtl;
		max-width: 1200px;
		margin: var(--site-marpad-M) auto 0;
	}
	.stageTtl .stageNum {
		font-size: 0.7em;
	}
	.stageTtl .stageName {
		font-size: 2.0em;
	}
	.stageLdk {
		font-size: 0.90em;
	}
	.stageSpec {
		font-size: 0.6em;
	}
	.stageSpec .areaBox em {
		font-size: 1.4em;
	}
	.planLinkUnit a .entryOnly {
		width: 90%;
		font-size: 0.7em;
	}
}

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


	.planLinkUnit a[href]:hover {
		scale: 1.1;
	}
	.planLinkUnit a[href]:hover::before {
		width: 55%;
	}
	/* hover, focus, current */
	@media (hover: hover) and (pointer: fine) {
		.planLinkUnit a[href]:hover {
		color: inherit;
			scale: 0.98;
		}
		.planLinkUnit a[href]:hover::before {
			width: 55%;
		}
	}
	.planLinkUnit a[href]:focus-visible {
		color: inherit;
		scale: 1.1;
	}
	.planLinkUnit a[href]:focus-visible::before {
		width: 55%;
	}



/* 
------------------------------------------------------------------------ */
	.equUnit + .equUnit {
		margin-top: var(--site-marpad-L);
	}
	.equUnit .equPic {
		position: relative;
	}
	.equUnit .hTxtStyh4{
		margin: var(--site-marpad-XS) 0 var(--site-marpad-XXS);
	}
	.equSubTxt {
		background: rgba(0, 0, 0, .6);
		margin-top: var(--site-marpad-S);
		padding: 2em 2em;
	}
	.equSubTxt dt {
		margin-bottom: 10px;
	}
@media print, screen and (min-width: 1050.02px) {
	#pt-equipment .ptHeading {
		text-align: center;
	}
	#pt-equipment .ptHeading br {
		display: none;
	}
}
@media print, screen and (min-width: 736.02px) {
	.equUnit {
		display: grid;
		align-items: center;
		grid-template-columns: repeat(2, 1fr);
		gap: min(var(--site-marpad-S), 4vw);
		max-width: 1200px;
		margin-right: auto;
		margin-left: auto;
	}
	.equUnit + .equUnit {
		margin-top: var(--site-marpad-XL);
	}
	.equUnit:nth-of-type(2n) {
		direction: rtl;
	}
	.equUnit:nth-of-type(2n) > * {
		direction: ltr;
	}
	.equSubTxt {
		display: grid;
		grid-template-columns: 1fr 1fr 2fr;
		gap: min(var(--site-marpad-XS), 4vw);
		max-width: 1200px;
		margin-right: auto;
		margin-left: auto;
	}
}
@media screen and (max-width: 1260px) {
	.bgReverse {
		padding-top: 2px !important;
	}
	/*#pt-equipment .ptTtl .contPicBox {
		margin-bottom: min(var(--site-marpad-S), 3.54vw);
	}*/
}
@media screen and (max-width: 736px) {
	#pt-equipment .lNavWrap {
		margin-bottom: var(--site-marpad-XL);
	}
	#pt-equipment .ptTtl .contPicBox {
		margin: 0 auto var(--site-marpad-M);
	}
	.equUnit .equPic {
		width: 92%;
	}
	.equUnit:nth-of-type(2n) .equPic {
		margin-left: auto;
	}
	.equUnit .equTxt {
		width: 84%;
		margin: 0 auto;
	}
	.equSubTxt {
		padding: 2em 2em;
	}
	.equSubTxt div + div {
		margin-top: var(--site-marpad-XS);
	}
	.equSubTxt dt {
		text-indent: -0.8em;
	}
}



/* =======================================================================================
	detailP
======================================================================================= */
/* detailP planConcept
--------------------------------------------*/
	#planConcept {
		display: grid;
		grid-template-columns: 45% 55%;
		grid-template-rows: repeat(2,auto);
		background-position: center center;
		background-size: cover;
		padding: var(--site-marpad-XXS) 0 var(--site-marpad-S);
	}
	#planConcept.concept-st1 {		background-image: url("../images/roomplan/popup/st1.jpg");	}
	#planConcept.concept-st2 {
		background-color: #0c376c;
		background-image: url("../images/roomplan/popup/st2.jpg?260619");
		background-position: 30% center;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	#planConcept.concept-st3 {		background-image: url("../images/roomplan/popup/st3.jpg?260619");	background-position: top center;	}
	#planConcept.concept-st4 {		background-image: url("../images/roomplan/popup/st4.jpg");	}

	#planConcept .stageName {
		font-size: min(3em, 16vw);
		writing-mode: vertical-rl;
	}
	#planConcept .stageName .kana {
		display: inline-block;
		font-size: 0.4em;
		opacity: .5;
	}


	#planConcept .planConceptTxt {
		font-size: 0.8em;
	}
	#planConcept .planConceptTxt dt {
		color: rgba(255, 255, 255, 1);
		font-size: 1.4em;
		margin-bottom: 0.7em;
	}
	#planConcept .planConceptTxt dt .PC_none {
		display: none;
	}


	#planConcept .specUnit {
		font-size: 1.4em;
	}
	#planConcept .specUnit .stageLdk:first-letter {
		font-size: 1.6em;
	}
	#planConcept .specUnit .stageLdk .element {
		position: relative;
		margin-left: -0.4em;
	}
	#planConcept .specUnit .stageSpec {
		font-size: 0.55em;
		background: rgba(255, 255, 255, .15);
	}
	#planConcept .specUnit .stageSpec .areaBox em {
		font-size: 2.0em;
	}
	#planConcept .specUnit .moreSpec {
		font-size: 0.6em;
	}
	#planConcept .specUnit .moreSpec span:not(:last-of-type)::after {
		content: " /";
	}


@media print, screen and (min-width: 1050.02px) {
	#planConcept .stageTtl {
		text-align: left;
		align-items: flex-start;
	}
	#planConcept .stageNum {
		writing-mode: horizontal-tb;
		padding: 0 1em 0 3em;
	}
	#planConcept .stageName {
		display: flex;
		align-items: center;
		writing-mode: horizontal-tb;
		padding-left: var(--site-marpad-XS);
	}
	#planConcept .stageName .kana {
		margin-left: 1em;
	}
	#planConcept .planConceptTxt {
		margin-top: var(--site-marpad-XS);
		padding-left: var(--site-marpad-XS);
	}
	#planConcept .specUnit {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
		margin-top: var(--site-marpad-XS);
		padding: 0 5%;;
		border-left: 1px solid rgba(255, 255, 255, .5);
	}
	#planConcept .specUnit .stageLdk {
		text-align: left;
	}
}
@media screen and (max-width: 1050px) {
	.detailP .pageTheme {
		padding-top: 0;
	}
	#planConcept.concept-st2 {
		background-position: -5% 24%;
		background-size: 230%;
	}
	#planConcept {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3,auto);
		padding: 0 var(--site-marpad-XXS) var(--site-marpad-S);
	}
	#planConcept .stageTtl {
		margin-bottom: var(--site-marpad-M);
	}
	#planConcept .stageName .kana {
		margin: 1em 0 0;
	}
	#planConcept .planConceptTxt {
		grid-row: 3;
		font-size: min(1em,4vw);
		margin-top: var(--site-marpad-S);
		padding-top: var(--site-marpad-S);
		border-top: 1px solid rgba(255, 255, 255, .5);
	}
	#planConcept .specUnit {
	}

}

	.planMeritList {
		background: rgba(0, 0, 0, .95);
		padding: var(--site-marpad-S) 0px;
	}
	.planMeritList li {
		width: 90%;
		max-width: 1000px;
		font-size: 0.82em;
		line-height: 1.8;
		letter-spacing: 0;
		margin: 0 auto;
		padding-left: 1.5em;
	}
	.planMeritList li::before {
		display: inline-block;
		content: "─";
		text-indent: -1.5em;
	}
	.planMeritList li + li {
		margin-top: 0.8em;
	}

	.madoriUnit {
		text-align: center;
		padding: var(--site-marpad-S) 0;
	}
	.madoriUnit .captionWrap {
		text-align: left;
		margin-top: var(--site-marpad-S);
	}
	.planDetailNavWrap {
		background: rgba(0, 0, 0, 1);
		padding-top: var(--site-marpad-S) !important;
	}
	.planDetailNavWrap .ptHeading {
		text-align: center;
		margin-bottom: var(--site-marpad-XXL);
	}
	.planDetailNavWrap .ptHeading .hWord {
		font-size: min(24px, 7vw);
	}
	.planDetailNavWrap .planList {
		max-width: 1100px;
		margin: var(--site-marpad-M) auto 0;
	}

@media print,screen and (min-width: 736.02px) {
	#planConcept .specUnit .stageSpec {
		display: flex;
		justify-content: space-around;
		margin-top: var(--site-marpad-XXS);
		padding: var(--site-marpad-XXS);
	}
	#planConcept .specUnit .stageSpec .areaBox {
		text-align: left;
		font-size: 1.2em;
	}
	#planConcept .specUnit .stageSpec .areaBox i {
		display: block;
	}
	#planConcept .specUnit .stageSpec .areaBox em {
		line-height: 1;
	}
}
@media screen and (max-width: 736px) {
	#planConcept .planConceptTxt dt .PC_none {
		display: block;
	}
	#planConcept .planConceptTxt dd br {
		display: none;
	}
}




.btn_etc {
	margin: 0 auto;
}