@charset "utf-8";

/* ***************************************************************************************************
	BASE
*************************************************************************************************** */
main {
		/*padding-top: 110px;*/
	}

@media screen and (max-width: 1049px) {
	main {
		/*padding-top: 50px;*/
	}
}

	/* ptTitle
	---------------------------------------------------- */
	.ptTitle {
		display: block;
		line-height: 1.4;
		font-size: 1.625em;
		text-align: center;
		letter-spacing: 0.15em;
	}
	.ptTitle .ttl {
		display: block;
	}

[class*="pt-"] .txtBox{
	line-height: 2.2;
}
[class*="pt-"]  .txtBox .row{
	display: block;
}
@media screen and (max-width: 599px) { /*{belowSP}*/
	[class*="pt-"] .txtBox{
		line-height: 1.8;
	}
}
@media screen and (max-width: 1049px) { /*{TB}*/
	[class*="pt-"]  .txtBox .inbl {
		display: inline;
	}
}
@media print, screen and (min-width: 1050px) {
	[class*="pt-"]  .txtBox {
		font-size: min(1.6rem, 1.4vw);
	}
}



/* ***************************************************************************************************
	PAGE
*************************************************************************************************** */


/* ------------------------------------------------------------------------
	pt-lead
------------------------------------------------------------------------ */
	/* leadCol：背景画像（p_01_bg.jpg） ※kodateの.tkKodateColと同じ作り（左右逆）
	   PC：画像左（左端まで）／テキスト右、SP：テキスト→画像 */
	.pt-lead {
		margin-top: 0;
	}
	.leadCol.contbox {
		max-width: none;
		width: 100%;
		position: relative;
		overflow: hidden;
		color: #FFF;
		background: #1e1e1e url("../img/roomplan/p_01_bg.jpg") center center / cover no-repeat;
		background-image: image-set(url("../img/roomplan/p_01_bg.webp") type("image/webp"), url("../img/roomplan/p_01_bg.jpg") type("image/jpeg"));	/* WebP対応ブラウザはWebP */
	}
	.leadCol .txtUnit {
		width: 90%;
		margin: 0 auto;
		padding: 60px 0 40px;
	}
	.leadCol .ptHeading {
		text-align: left;
		margin: 0 0 30px;
	}
	.leadCol .ptHeading .heading {
		text-align: left;
	}
	.leadCol .txtBox {
		/*line-height: 2.4;
		font-size: var(--txtBox-fontSize);
		letter-spacing: 0.05em;*/
		text-align: left;
		margin: 0;
	}
	.leadCol .picBox {
		position: relative;
	}
	.leadCol .picBox img {
		display: block;
		width: 100%;
		height: auto;
	}
@media screen and (max-width: 599px) {
	/* SP：自然に折り返す */
	.leadCol .txtBox br {
		display: none;
	}
}
@media print, screen and (min-width: 1200px) {
	.leadCol.contbox {
		display: grid;
		grid-template-columns: 62.5% 1fr;	/* 画像1200px／1920px */
		align-items: center;
		padding: 120px 0 130px;
	}
	.leadCol .txtUnit {
		order: 2;
		width: auto;
		margin: 0;
		padding: 0 min(130px, 4vw) 0 min(90px, 4vw);
	}
	.leadCol .picBox {
		order: 1;
	}
	.leadCol .ptHeading {
		margin-bottom: 60px;
	}
	.leadCol .txtBox {
		/*line-height: 2.6;*/
	}
}

/* ------------------------------------------------------------------------
	freeWallBox（家族の変化に対応する可変性のある空間）
	※基本スタイルは tk_base_high.css。参考（代沢）と同じレイアウト
------------------------------------------------------------------------ */
@media print, screen and (min-width: 1000.02px) { /*MinorBreakpoint*/
	.freeWallBox .picbox {
		grid-template-rows: 1fr;
		grid-template-columns: 1fr min(580px, 60%);
		align-items: center;
	}
}
@media screen and (max-width: 1000px) { /*MinorBreakpoint*/
	.freeWallBox .picbox {
		grid-template-columns: 1fr;
		align-items: center;
	}
	.freeWallBox .picbox .pic01 {
		grid-column: 1;
	}
	.freeWallBox .picbox .pic01 .bl {
		max-width: 580px;
		margin: 0 auto;
	}
}


/* ------------------------------------------------------------------------
	pt-plan
------------------------------------------------------------------------ */
/* floorPlanSection
---------------------------------------------------- */
/* floorPlanUnit
--------------------------------- */
	.floorPlanUnit {	font-size: 0.9em;}
	/* specWrap
	----------------------- */
	.floorPlanUnit .specWrap {
	}
	.floorPlanUnit .specWrap .spec-type em,
	.floorPlanUnit .specWrap .spec-type .st,
	.floorPlanUnit .specWrap .spec-type .num,
	.floorPlanUnit .specWrap .spec-ldk .ldkUnit,
	.floorPlanUnit .specWrap .spec-area .value {font-family: 'Crimson Text', serif;}
	/* spec1 */
	.floorPlanUnit .specWrap .spec1 {
		line-height: 1.3;
		font-size: 2.1875em;
		text-align: center;
		background: #726047;
		padding: 0.35em 0.2em;
	}
	.floorPlanUnit .specWrap .spec1 .spec-type{
		font-family: var(--site-fontFamily-en01);
		letter-spacing: 0.05em;
	}
	.floorPlanUnit .specWrap .spec-type {font-size: 1em;}
	.floorPlanUnit .specWrap .spec-type .num {line-height: 0.7;font-size: 1.714em;}
	/* spec2 */
	.floorPlanUnit .specWrap .spec2 {
		border: 0 solid #c1ad93;
		border-width: 1px 0;
	}
	.floorPlanUnit .specWrap .spec-ldk {line-height: 1.15;text-align: center;padding: 0 0 1em;}
	.floorPlanUnit .specWrap .spec-ldk .ldkUnit {font-size: 1.6em;}/*font-size: 2.1em;*/
	.floorPlanUnit .specWrap .spec-ldk sup {display: inline-block;	transform: scale(0.6); margin-left: -0.2em;}
	.floorPlanUnit .specWrap .spec-ldk .roomElement {display: inline-block;}
	/*.floorPlanUnit .specWrap .spec-ldk .roomElement .num {line-height: 0.7;font-size: 1.6em;}*/
	.floorPlanUnit .specWrap .spec-ldk .element {display: inline-block;	font-size: 0.9em;}
	.floorPlanUnit .specWrap .spec-ldk .element b {padding: 0 0.05em;}
	.floorPlanUnit .specWrap .spec-ldk .element .num {line-height: 0.9;font-size: 1.12em;}
	.floorPlanUnit .specWrap .spec-area {display: flex;flex-wrap: wrap;justify-content: center;line-height: 1.15;font-size: 0.925em;padding: 1em 0;border-top: 1px solid #c1ad93;}
	.floorPlanUnit .specWrap .spec-area [class*="Unit"] {display: flex;flex-wrap: wrap;justify-content: center;align-items: baseline;/*width: 20em; *//* feeling. */margin: 0 0.35em;padding: 0.5em 0;}
	.floorPlanUnit .specWrap .spec-area [class*="Unit"] .term {}
	.floorPlanUnit .specWrap .spec-area [class*="Unit"] .term::after {content: "／";margin-right: 0.3em;}
	.floorPlanUnit .specWrap .spec-area [class*="Unit"] .desc {flex: 1;}
	.floorPlanUnit .specWrap .spec-area .value {line-height: 0.8;font-size: 2.375em;}
	.floorPlanUnit .specWrap .spec-area .heibei {font-size: 1.375em;}
	.floorPlanUnit .specWrap .spec-area .tsubo {display: inline-block;margin: 0 -0.4em;}
	.floorPlanUnit .specWrap .spec-etc {line-height: 1.35;font-size: 0.925em;text-align: center;padding: 0 0 1em;}
	.floorPlanUnit .specWrap .spec-etc .floorDetailUnit {display: inline-table;text-align: left;} /* inline-block だと何故かsafariで崩れる… */
	.floorPlanUnit .specWrap .spec-etc .unitItem {display: inline-block;margin: 0.2em 0.5em 0.2em 0;}
	.floorPlanUnit .specWrap .spec-etc .unitItem::before {content: "■";display: inline-block;margin-right: 0.15em;}
	.floorPlanUnit .specWrap .spec-etc .unitItem.bl {display: block;}
/*	.floorPlanUnit .specWrap .spec-etc .unitItem:nth-of-type(1) {display: block;}*/
/*	.floorPlanUnit .specWrap .spec-etc .unitItem:nth-of-type(2) {margin-right: 0.5em;}*/
	
	/* planImgUnit
	----------------------- */
	.planImgUnit {
		background: #FFF;
		margin-top: 30px;
		padding: 1em 2% 3em;
	}
@media screen and (max-width: 599px) { /*{belowSP}*/
	.planImgUnit {
		padding-bottom: 2em;
	}
}

	/* planPicWrap
	----------------------- */
	.floorPlanUnit .planPicWrap {text-align: center;margin: 30px auto 0;}
	/* 間取図：SPはスワイプ（js_swipeMe）で拡大表示 */
	.floorPlanUnit .planPicWrap .js_swipeMe_active .js_swipeMeInnerBoxOverlay,
	.floorPlanUnit .planPicWrap .js_swipeMe_active .js_swipeMeInnerBox img {width: 200%;}

	/* planCapWrap
	----------------------- */
	.floorPlanUnit .planCapWrap {max-width: 750px; /* feeling. */margin: 0 auto;margin-top: 20px;padding: 0 1em;border: 1px solid #ddd;  color: #000;}
	
@media screen and (max-width: 599px) { /*{belowSP}*/
	/*.floorPlanUnit .specWrap .spec-ldk .roomElement {display: block;}*/
}
@media print, screen and (min-width: 340px) { /*{overSPl}*/
	.floorPlanUnit .specWrap .spec-area {font-size: 1em;}
}
@media screen and (min-width: 600px) and (max-width: 1049px) { /*{TB}*/
	.floorPlanUnit .specWrap {font-size: 0.9em;}
	.floorPlanUnit .planPicWrap {margin-top: 40px;}
	.floorPlanUnit .planCapWrap {margin-top: 30px;}
}
@media print, screen and (min-width: 1050px) { /*{overPC}*/
	.floorPlanUnit .specWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		column-gap: 50px;
	}
	.floorPlanUnit .specWrap .spec1 {flex: 0 250px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}
	.floorPlanUnit .specWrap .spec2 {flex: 1;padding: 1.2em 0 1.2em 1.75em;}
	.floorPlanUnit .specWrap .spec-ldk,
	.floorPlanUnit .specWrap .spec-area {text-align: left;padding: 0.1em 0;}
	/*.floorPlanUnit .specWrap .spec-ldk .ldkUnit {font-size: 2.4375em;}*/
	/*.floorPlanUnit .specWrap .spec-ldk .num {font-size: 1.4615em;}*/
	.floorPlanUnit .specWrap .spec-area {justify-content: flex-start;border-top: none;}
	.floorPlanUnit .specWrap .spec-area [class*="Unit"] {margin: 0;padding: 0.25em 0;}
	.floorPlanUnit .specWrap .spec-area .lotUnit {width: 20em; /* 微調整 */margin-right: 0.75em;}
	.floorPlanUnit .specWrap .spec-etc {text-align: left;padding: 0.4em 0 0;}
	.floorPlanUnit .specWrap .spec-etc .floorDetailUnit {display: inline;/*margin-right: 0.5em;*/}
	.floorPlanUnit .specWrap .spec-etc .unitItem {display: inline;margin-right: 0.7em;}
	.floorPlanUnit .planPicWrap {margin-top: 60px;}
	.floorPlanUnit .planCapWrap {margin-top: 40px;}
}

/* floorPlanPointUnit
--------------------------------- */
	.floorPlanPointUnit {
		color: rgba(var(--site-accentColorText),1);
		background: rgba(var(--site-accentColor),.9);
		padding: 1.5em 2em 1.5em;
	}
	.floorPlanPointUnit .ttl {
		width: 90%;
		max-width: 1060px;
		line-height: 1.6;
		text-align: center;
		letter-spacing: 0.1em;
		font-family: 'Oswald', serif;
		font-size: 1.15em;
		background: rgba(255, 255, 255, .2);
		margin: 0 auto;
	}
	.floorPlanPointUnit .pointList {
		width: 90%;
		max-width: 1060px;
		margin: 1.5em auto 0;
	}
	.floorPlanPointUnit .pointList li {
		display: flex;
		column-gap: 20px;
		justify-content: flex-start;
		align-items: flex-start;
		line-height: 1.6;
		font-size: 0.9em;
		margin: 1em 0 0;
		padding-bottom: 0.5em;
		border-bottom: 1px dotted rgba(var(--site-accentColorText), .4);
	}

	.floorPlanPointUnit .pointList li i {
		display: inline-block;
		width: 5em;
		text-align: center;
		font-family: 'Oswald', serif;
		padding: 0 1em;
		border: 1px solid rgba(var(--site-accentColorText), .9);
	}

@media screen and (max-width: 599px) { /*{belowSP}*/
	.floorPlanPointUnit {
		padding: 1.5em ;
	}
	/*.floorPlanPointUnit .ttl {display: none;}*/
	.floorPlanPointUnit .pointList {
		margin: 0 auto 0;
		width: 100%;
	}
	.floorPlanPointUnit .ttl {
		width: 100%;
	}
	.floorPlanPointUnit .pointList li {
		column-gap: 1em;
	}
	.floorPlanPointUnit .pointList li i {
		width: auto;
	}
}


/* freeWallBox
--------------------------------- */
.freeWallBox {
    padding: 2em;
    margin-top: 4em;
    background:rgb(190, 145, 115, .2);
}
@media print, screen and (min-width: 1000.02px) { /*MinorBreakpoint*/
	.freeWallBox .picbox {
		grid-template-rows: 1fr;
		grid-template-columns: 1fr min(580px, 60%);
		align-items: center;	
	}
}

@media screen and (max-width: 1000px) { /*MinorBreakpoint*/
	.freeWallBox .picbox {
		grid-template-columns: 1fr;
		align-items: center;	
	}
	.freeWallBox .picbox .pic01 {
		grid-column: 1;
	}
	.freeWallBox .picbox .pic01 .bl {
		max-width: 580px;
		margin: 0 auto;
	}
}




/* entryBenefitWrap：背景画像（entry_bg.jpg）全幅＋中央に半透明の暗いボックス
--------------------------------- */
	.entryBenefitWrap {
		position: relative;
		color: #FFF;
		background: #2a2c45 url("../img/roomplan/entry_bg.jpg") center center / cover no-repeat;
		background-image: image-set(url("../img/roomplan/entry_bg.webp") type("image/webp"), url("../img/roomplan/entry_bg.jpg") type("image/jpeg"));	/* WebP対応ブラウザはWebP */
	}
	.entryBenefitCol {
		position: relative;
		padding: 50px 5%;
	}
	.entryBenefitCol .noticeWrap {
		max-width: 1000px;
		background: rgba(0, 0, 0, .55);
		margin: 0 auto;
		padding: 45px 20px 50px;
	}
	.entryBenefitCol .txtBox {
		line-height: 2;
		font-size: 1.5rem;
		letter-spacing: 0.15em;
		text-align: center;
		margin: 0 auto 30px;
	}
	.entryBenefitCol .txtBox p {
		display: inline-block;
		text-align: center;
	}
	.entryBenefitCol .txtBox i {
		display: block;
		color: #c1ad93;
		font-style: normal;
		letter-spacing: 0.2em;
		font-family: var(--site-fontFamily-en01), var(--site-fontFamily);
		/*font-size: 0.9em;*/
	}
	.entryBenefitCol .txtBox i::after {
		content: "";
		display: block;
		width: 70px;
		height: 1px;
		background: rgba(255, 255, 255, .8);
		margin: 1.2em auto 1.6em;
	}
	.entryBenefitCol .noticeBtn {
		max-width: 400px;
		margin-right: auto;
		margin-left: auto;
	}
	.entryBenefitCol .noticeBtn [class*="generalItem_btn"] {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
		box-shadow: 0 0 8px 3px rgba(0, 0, 0, .65);
	}
	.entryBenefitCol .imgcapkeep {
		z-index: 2;
	}
@media screen and (max-width: 599px) {
	/* SP：自然に折り返す */
	.entryBenefitCol .txtBox br {
		display: none;
	}
}
@media print, screen and (min-width: 600px) {
	.entryBenefitCol {
		padding: 88px 5%;		/* 680pxの背景に対して、ボックス高さ約504px */
	}
	.entryBenefitCol .noticeWrap {
		padding: 100px 30px 100px;
	}
	.entryBenefitCol .txtBox {
		font-size: min(2.2rem, 3vw);
		margin-bottom: 60px;
	}
	.entryBenefitCol .txtBox i {
		font-size: max(0.9em, 1.4rem);
	}
}



/* labelWrap
--------------------------------- */
	.labelWrap{
		background: rgba(var(--site-accentColor), .5);
		margin: 4em auto 0 !important;
		padding: 5em 0;
	}
	.labelWrap .labelUnit {
		max-width: 500px;
		margin: 0 auto;
	}


/* equPhWrap
--------------------------------- */

	.equPhWrap .boshUnit {
		background: rgba(var(--site-accentColor), .5);
	}
	.equPhWrap .boshUnit dl {
		padding: 30px 60px;
	}
	.equPhWrap .boshUnit .name {
		color: #c1ad93;
		font-size: 1.8em;
		letter-spacing: 0.1em;
	}
	.equPhWrap .boshUnit .name .sTxt{
		font-size: .65em;
	}
	.equPhBox {
		margin-top: 4em;
	}

	.equPhBox .phUnit .name {
		color: #c1ad93;
	}
@media screen and (max-width: 599px) { /*{belowSP}*/
	.equPhWrap .boshUnit dl {
		padding: 30px ;
	}
	.boshUnit .name {
		padding: 0 0 1em;
	}
}