@charset "utf-8";

/* ***************************************************************************************************
	BASE
*************************************************************************************************** */
.tk_headerWrap {
	background: rgba(255, 255, 255, .5);
}

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;
	}
	.ptTitle .hWord {
		color: rgba(var(--site-themeColor),1);
		letter-spacing: 0.2em;
		font-family: var(--site-fontFamily);
		font-size: 0.6em;
	}



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


/* ------------------------------------------------------------------------
	pt-lead
------------------------------------------------------------------------ */
@media print, screen and (min-width: 1049px) {
	.pt-lead {
		margin-top: 0;
	}
	.leadCol.contbox {
		max-width: none;
		width: 100%;
		display: grid;
		grid-template-columns: 50% 1fr;
		
	}
	.leadCol .txtUnit {
		order: 2;
		align-self: center;
		padding: 60px;
	}
	.leadCol .picBox img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ------------------------------------------------------------------------
	slideWrap
------------------------------------------------------------------------ */
	.slideWrap {
		width: 96%;
		max-width: 1000px;
		margin: 120px auto;

		position: relative;
		/*background: #0a0a0a;*/
		user-select: none;
		-webkit-user-select: none;
	}

	/* slideMain
	--------------------------------- */
	.slideMain {
		position: relative;
		outline: none;
	}
	.slideMainInner {
		position: relative;
	}
	.slideItem {
		display: none;
		position: relative;
	}
	/* 表示中スライド：上層でフェードイン */
	.slideItem.is-active {
		display: block;
		position: relative;
		z-index: 2;
		animation: slideItemFadeIn 0.8s ease forwards;
	}
	/* 退場中スライド：下層で静止してから遅延フェードアウト */
	/* delay（0.35s）は FADE_OUT_DELAY_MS（roomplan.js）と合わせる */
	.slideItem.is-leaving {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
		pointer-events: none;
		animation: slideItemFadeOut 0.3s ease 0.35s forwards;
	}
	@keyframes slideItemFadeIn {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@keyframes slideItemFadeOut {
		from { opacity: 1; }
		to   { opacity: 0; }
	}
	.slideItem > img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* slideArrow
	--------------------------------- */
	.slideArrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 56px;
		padding: 0;
		background: rgba(0, 0, 0, .38);
		color: #fff;
		border: none;
		cursor: pointer;
		transition: background 0.2s;
		-webkit-tap-highlight-color: transparent;
	}
	.slideArrow:hover {
		background: rgba(0, 0, 0, .62);
	}
	.slideArrow svg {
		width: 22px;
		height: 22px;
		pointer-events: none;
	}
	.slideArrow--prev { left: 0; }
	.slideArrow--next { right: 0; }

	/* slideThumbs
	--------------------------------- */
	.slideThumbs {
		overflow: hidden;
		/*background: #111;*/
		padding: 8px 6px;
	}
	.slideThumbsInner {
		display: flex;
		gap: 6px;
		cursor: grab;
		will-change: transform;
	}
	.slideThumbsInner.is-dragging {
		cursor: grabbing;
	}
	.slideThumb {
		flex-shrink: 0;
		cursor: pointer;
		opacity: 0.42;
		transition: opacity 0.25s;
		-webkit-tap-highlight-color: transparent;
	}
	.slideThumb.is-active {
		opacity: 1;
	}
	.slideThumb > img {
		display: block;
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		pointer-events: none;
	}


/* ------------------------------------------------------------------------
	pt-plan
------------------------------------------------------------------------ */
/* floorPlanSection
---------------------------------------------------- */
/* floorPlanUnit
--------------------------------- */
	.floorPlanUnit {	font-size: 0.9em;}
	.floorPlanUnit.kado {/*	--site-accentColor: 195, 102, 57;*/}
	/* 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;}
	.floorPlanUnit .specWrap .spec-ldk .element.ja b {font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;}
	/* spec1 */
	.floorPlanUnit .specWrap .spec1 {
		line-height: 1.3;
		color: rgba(var(--site-accentColorText),1);
		font-size: 2.1875em;
		text-align: center;
		background: var(--site-accentGradient);
		padding: 0.35em 0.2em;
	}
	/*.floorPlanUnit.kado .specWrap .spec1 {	background: var(--site-accentGradient);}*/
	.floorPlanUnit .specWrap .spec-last {
        margin-bottom: 0.5em;
        padding: 0.5em;
        outline: 1px solid rgba(255, 255, 255, .47);
        outline-offset: -3px;
        border: 0 solid rgba(255, 255, 255, .47);
        border-width: 1px;
        font-size: 0.8em;
        letter-spacing: 0.06em;
    }
	.floorPlanUnit .specWrap .spec-last em {
        font-size: 1.714em;
        line-height: 0.7;
    }
	.floorPlanUnit .specWrap .spec-last .kagutuki {
        display: block;
        margin-top: 0.25em;
        font-size: 0.7em;
    }
	.floorPlanUnit .specWrap .spec-type {font-size: 1em;}
	.floorPlanUnit .specWrap .spec-type .num {line-height: 0.7;font-size: 1.714em;}
	.floorPlanUnit .specWrap .spec-type .kadoTxt {font-size: 0.7em;}
	.floorPlanUnit .specWrap .spec-type .kadoTxt em {	display: inline-block; margin: 0.3em 0.3em 0;}
	/* spec2 */
	.floorPlanUnit .specWrap .spec2 {
		color: #161616;
		border: 0 solid #161616;
		border-width: 1px 0;
	}
	.floorPlanUnit .specWrap .spec-ldk {line-height: 1.15;text-align: center;padding: 1em 0;}
	.floorPlanUnit .specWrap .spec-ldk .ldkUnit {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.ja b {font-size: 0.775em;}
	.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 #161616;}
	.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 [class*="Unit"] .capDesc {flex: 0 100%;/*padding: 0.3em 0;*/padding: 0.3em 0 0;}
	.floorPlanUnit .specWrap .spec-area [class*="Unit"] .capDesc small {color: #555;font-size: 1rem;}
	.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;}*/
	/* -- Individual -- */
	.floorPlanUnit .specWrap .spec-ldk .serviceRoom {font-weight: 500;letter-spacing: -0.025em;}
	
.floorPlanUnit .ldkChange {	display: inline-block;	font-size: 1em;	margin-top: 0.6em; color: rgba(var(--site-accentColor),1); font-weight: 500;}
	/* 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;}

	/* planCapWrap
	----------------------- */
	.floorPlanUnit .planCapWrap {max-width: 750px; /* feeling. */margin: 0 auto;margin-top: 20px;padding: 0 1em;border: 1px solid #ddd;}
	
@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.7em 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;}
}

/* divisionWrap
--------------------------------- */
	.divisionWrap .divisionPic {max-width: 720px;margin: 0 auto;}

/* floorPlanPointUnit
--------------------------------- */
	.floorPlanPointUnit {
		color: rgba(var(--site-accentColorText),1);
		background: rgba(var(--site-accentColor),.9);
		padding: 1.5em 2em 1.5em;
	}
	.floorPlanUnit.kado + .floorPlanPointUnit {
		/*background: #69523f;*/
	}
	.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 .ttl {display: none;}
	.floorPlanPointUnit .pointList {
		margin: 0 auto 0;
	}
	.floorPlanPointUnit .pointList li {
		column-gap: 1em;
	}
	.floorPlanPointUnit .pointList li i {
		width: auto;
	}
}
@media print, screen and (min-width: 600px) { /*{overTB}*/
	.floorPlanPointUnit .leadTxt {font-size: 1.5em;margin: 0.8em 2em;}
}
@media print, screen and (min-width: 1050px) { /*{overPC}*/
}



@media print, screen and (min-width: 1000.02px) {
	.freeWallBox .picbox {
		grid-template-rows: 1fr;
		grid-template-columns: 1fr min(580px, 60%);
		align-items: center;	
	}
}

@media screen and (max-width: 1000px) {
	.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-master */
	.pt-master {
		/*margin-top: 5em !important;*/
		/*padding-top: 0;*/
		margin-top: 8em !important;
		background: url("../img/roomplan/bg_master.jpg") center center no-repeat;
		background-size: cover;
	}
	.pt-master h4.ptHeading .heading {
		border-bottom: 0px;
	}
	.pt-master .txtBox {
		margin-bottom: 1.5em;
	}
	.masterSuitePicCol {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 0;

		margin: 5em 0 0;
	}
	.masterSuitePicCol .masterPic01 {	grid-column: 1 / 3;}
	.pt-master dl {
		background: rgba(var(--site-accentColor), 1);
	}


@media print, screen and (min-width: 840px) {
	.masterSuitePicCol {
		grid-template-columns: 1fr 1fr 55%;
		column-gap: 10px;

		margin: 5em 60px 0;
	}
	.masterSuitePicCol img {
		max-width: none;
		width: 100%;
	}
	.masterSuitePicCol .masterPic01 {		grid-column: 3 / 4; order: 5;}
	.masterSuitePicCol .masterPic02 {	align-self: start;}
	.masterSuitePicCol .masterPic03 {	align-self: end;}
}

	.masterSuiteSubCol {
		padding: 3em 0;
	}
	.masterSuiteSubCol .imgcapParent {
		position: relative;
		display: inline-block;
		width: 90%;
	}
	.masterSuiteSubCol div:nth-of-type(2) {
		text-align: right;
		margin-top: 3px;
	}

@media print, screen and (min-width: 736px) {
	.masterSuiteSubCol {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 0;

		margin: 0 0 5em;
		padding: 0;
	}
	.masterSuiteSubCol .imgcapParent {
		position: relative;
		display: inline-block;
		width: 100%;
	}
	.masterSuiteSubCol div:nth-of-type(2) {
		text-align: right;
		margin-top: 0px;
	}
}


	.entryBenefitWrap {
		position: relative;
		width: 96%;
		max-width: 1260px;
		color: #FFF;
		background: #2f3e42 ;
		margin: 30px auto;
		border: solid rgba(var(--site-accentColor),1);
		border-width: 1px 0;
	}
	.entryBenefitWrap::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: url("../img/roomplan/bg_benefit.png") top left no-repeat;
		mix-blend-mode: color-burn;
	}
	.entryBenefitCol {
		position: relative;
		padding: 25px 0;
	}
	.entryBenefitCol::before,
	.entryBenefitCol::after {
		content: "";
		position: absolute;
		z-index: 5;
		display: block;
		width: 100%;
		height: 5px;
		border: 1px solid;
		border-width: 1px 0;
		border-top-color: #e2ce9f;
		border-bottom-color: #b59f70;
	}
	.entryBenefitCol::before {		top: 10px;		left: 0;	}
	.entryBenefitCol::after {		bottom: 10px;	left: 0;	}
	.entryBenefitCol > div:nth-of-type(1) {
		padding: 50px 20px;
	}
	.entryBenefitCol .txtBox {
		font-size: 1.2em;
		text-align: center;
		margin: 0 auto 20px;
	}
	.entryBenefitCol .txtBox p {
		display: inline-block;
		text-align: center;
	}
	.entryBenefitCol .txtBox i {
		display: block;
		opacity: .6;
		letter-spacing: 0.2em;
		font-family: var(--site-fontFamily);
		font-size: 0.6em;
		margin-bottom: 0.5em;
	}
	.entryBenefitCol .txtBox i::after {
		content: "";
		display: block;
		width: 100px;
		height: 1px;
		background: #FFF;
		margin: 1.8em auto 1.6em;
	}
	.entryBenefitCol .noticeBtn {
		margin-right: auto;
		margin-left: auto;
	}
	.entryBenefitCol .noticeBtn [class*="generalItem_btn"] {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}


	.entryBenefitCol .picBox {
		position: relative;
	}

@media print, screen and (min-width: 736.02px) {
	.entryBenefitCol {
		display: grid;
		grid-template-columns: 1fr 48%;
		align-items: center;
		padding-right: 20px;
	}
	.entryBenefitCol > div:nth-of-type(1) {
		padding: 30px;
	}
	.entryBenefitCol .txtBox {
		font-size: 1.0em;
		margin-bottom: 30px;
	}
}
@media print, screen and (min-width: 1040.02px) {
	.entryBenefitCol {
		grid-template-columns: 1fr 52%;
	}
	.entryBenefitCol .txtBox {
		font-size: 1.3em;
	}
}

/* ***************************************************************************************************
	printOnly
*************************************************************************************************** */
@media print { /*{printOnly}*/
}