@charset "utf-8";
/* =======================================================================================
TEMPLATE
======================================================================================= */
/* ============================================================================
CssCustomProperties 2022.04
============================================================================ */
/* SITE
---------------------------------------------------- */
:root {
/* テーマカラー */
--roomplan-themeColor-base: 121, 86, 37; /* rgb | #795625 | Dark_brown */
--roomplan-themeColor-base_text: 255, 255, 255; /* rgb | #ffffff | White */
--roomplan-landplot-legendColor01: #ecb9bc;
--roomplan-landplot-legendColor02: #eff26d;
--roomplan-landplot-legendColor03: #c8e3bf;
--roomplan-landplot-legendColor04: #afdcea;
}
/* =======================================================================================
COMMON
======================================================================================= */
/* -----------------------------------------------------------------------------
プランリスト
----------------------------------------------------------------------------- */
/* planDetailNavWrap
---------------------------------------------------------------------------
* カスタムプロパティの定義は削除せず目隠しにすること。
* [2026.07] flexbox調整（matchHeightなしでも可）
------------------------------------------------------------------------ */
.planDetailNavWrap {
/* --roomplan-planDetailNav-wrap-BgColor: transparent;*/
--roomplan-planDetailNav-a-color: #fff;
--roomplan-planDetailNav-a-BgColor: rgba(var(--site-themeColor-accent_1), 1);
--roomplan-planDetailNav-a-hover-BgColor: rgba(220, 220, 150, .2);
--roomplan-planDetailNav-a-current-color: #000;
--roomplan-planDetailNav-a-current-BgColor: #fff;
--roomplan-planDetailNav-a-BdColor: #939393;
/*background: var(--roomplan-planDetailNav-wrap-BgColor);*/ /* ※HTML側でクラスを設定した */
margin-top: 0;
padding-top: 50px;
padding-bottom: 50px;
}
.planDetailNavDeco {
}
.planDetailNavHeading {
line-height: 1.1;
color: rgba(var(--site-themeColor-accent_2), 1);
font-family: var(--site-font_family-en_1);
font-size: 1.428571em;
text-align: center;
letter-spacing: .2em;
margin-bottom: calc(var(--site-marpad-S) - 10px);
}
.planDetailNav ul {
display: flex;
flex-wrap: wrap;
gap: 10px calc(1.5%);
}
.navListCenter.planDetailNav ul { /* .navListCenter 追加でセンター揃えに（ラスト1つの場合等） */
justify-content: center;
}
.planDetailNav li {
flex: 0 0 calc((100% - (1.5% * 2)) / 3);
display: flex;
min-height: 53px; /* feeling. */
}
.planDetailNav li a {
display: flex;
position: relative;
z-index: 1;
width: 100%;
max-width: none;
min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
line-height: 1.35;
color: var(--roomplan-planDetailNav-a-color);
font-size: clamp(1.275rem, (14 / 1460 * 100vw), 1.4rem);
font-weight: 400;
letter-spacing: .03em;
background: var(--roomplan-planDetailNav-a-BgColor);
margin: 0;
padding: 9px 6px;
border: 1px solid var(--roomplan-planDetailNav-a-BdColor);
transition: color .2s ease-out, background .2s ease-out;
}
.planDetailNav li a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--roomplan-planDetailNav-a-hover-BgColor);
opacity: 0;
/*clip-path: inset(0 100% 0 0);*/
transition: opacity .12s ease-out, clip-path .08s ease-out;
}
.planDetailNav li .nameBox,
.planDetailNav li .specBox {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 3px 0;
}
.planDetailNav li .nameBox {
flex: 0 0 5.25em;
justify-content: center;
font-family: var(--site-font_family-en_2);
text-align: center;
letter-spacing: .045em;
margin-right: .8em;
padding-right: .2em;
border-right: 1px solid currentColor;
}
.planDetailNav li .nameBox .st {
font-size: 1.071428em;
}
.planDetailNav li .nameBox .num {
display: inline-block;
line-height: 1.1;
font-size: 1.285714em;
margin-left: -.13em;
}
.planDetailNav li .specBox {
flex: 1 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
overflow-wrap: break-word; /* 長い英語対策 */
}
.planDetailNav li .specBox .ldk {
color: inherit;
font: inherit;
}
.planDetailNav li .specBox .ja {
display: inline-block;
font-size: .928571em;
letter-spacing: .01em;
}
.planDetailNav li .specBox .ja .sml {
display: inline-block;
color: inherit;
font: inherit;
font-size: max(1rem, .769230em);
letter-spacing: normal;
/*margin: 0 -.35em;*/
}
/* hover, focus, current */
@media (hover: hover) and (pointer: fine) {
.planDetailNav li:not(.is-current) a[href]:hover::before {
opacity: 1;
clip-path: inset(0 0% 0 0);
}
}
.planDetailNav li:not(.is-current) a[href]:focus-visible::before {
opacity: 1;
clip-path: inset(0 0% 0 0);
}
.planDetailNav li.is-current a {
color: var(--roomplan-planDetailNav-a-current-color);
background: var(--roomplan-planDetailNav-a-current-BgColor);
}
@media screen and (max-width: 1200px) {
.planDetailNav li {
flex: 0 0 calc((100% - (1.5% * 1)) / 2);
}
.planDetailNav li a {
font-size: clamp(1.275rem, (14 / 1000 * 100vw), 1.4rem);
}
}
@media screen and (max-width: 680px) {
.planDetailNavWrap {
padding-top: 60px;
padding-bottom: 60px;
}
.planDetailNav ul {
gap: 7px 0;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
.planDetailNav li {
flex: 0 0 100%;
min-height: 1px;
}
.planDetailNav li a {
font-size: clamp(1.15rem, (13 / 375 * 100vw), 1.4rem);
}
}
/* returnPlanlistBtnWrap
---------------------------------------------------- */
.returnPlanlistBtnWrap {
--_columnGap: 25px;
display: grid;
grid-template-columns: repeat(auto-fit, clamp(250px, ((100% - var(--_columnGap)) / 2), 300px));
justify-content: center;
row-gap: 12px;
column-gap: var(--_columnGap);
margin-top: 60px;
}
.returnPlanlistBtnWrap a {
width: 100%;
max-width: none;
font-size: 1.7rem;
letter-spacing: .095em;
background-image: linear-gradient(135deg, #3f3f3f 0%, #626262 16%, #707070 29% 33%, #7b7b7b 67% 100%);
margin: 0;
}
.returnPlanlistBtnWrap a .label {
display: grid;
grid-template-columns: auto auto;
align-items: center;
gap: 0 .6em;
}
.returnPlanlistBtnWrap a .ico {
display: inline-block;
height: 1.118em; /*1.22em*/
background-color: #fff;
-webkit-mask: center center / contain no-repeat;
mask: center center / contain no-repeat;
-webkit-mask-image: var(--_icon);
mask-image: var(--_icon);
}
.returnPlanlistBtnWrap .returnPlanlistLink a .ico {
aspect-ratio: 19 / 19;
--_icon: url('data:image/svg+xml;charset=UTF-8,');
}
@media screen and (max-width: 736px) {
.returnPlanlistBtnWrap {
--_columnGap: 12px;
row-gap: 6px;
margin-top: clamp(30px, (40 / 600 * 100vw), 40px);
}
.returnPlanlistBtnWrap a {
font-size: clamp(1.45rem, (16 / 600 * 100vw), 1.6rem);
}
}
/* =======================================================================================
PAGE | index
======================================================================================= */
/* livingContainer
------------------------------------------------------------------------ */
.livingContainer {
--livingWrap-translateY: clamp(100px, (100 / 900 * 100vw), 160px);
background: url("../images/roomplan/living_bg_01.jpg") center center / cover no-repeat;
margin-top: calc(clamp(135px, (195 / 1600 * 100vw), 195px) + var(--livingWrap-translateY));
padding-bottom: clamp(40px, (80 / 1920 * 100vw), 80px);
}
.livingWrap {
display: grid;
grid-template-columns: 1fr calc(1300 / 1920 * 100%);
align-items: center;
gap: 0;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
translate: 0 calc(var(--livingWrap-translateY) * -1);
}
.livingPicBox {}
.livingPicBox .pic {
position: relative;
overflow: hidden;
}
.livingPicBox .pic .imgcapkeep.wh.bg {
background-color: rgba(65,45,20, .2);
backdrop-filter: blur(1px);
}
.livingTxtBox {
order: -1;
padding-left: clamp(40px, (94 / 1920 * 100vw), 94px);
padding-right: clamp(30px, (60 / 1920 * 100vw), 60px);
}
.livingTxtBox .heading {
line-height: 1.2;
color: rgba(var(--roomplan-themeColor-base), 1);
font-family: var(--site-font_family-en_1);
font-size: clamp(3.9rem, (57 / 1800 * 100vw), 5.7rem);
text-align: left;
letter-spacing: normal;
margin-bottom: .9em;
}
.livingTxtBox .txt {
max-width: 390px;
text-align: justify;
}
@media screen and (max-width: 900px) {
.livingContainer {
background: none;
margin-top: var(--site-marpad-XXXL);
padding-bottom: 0;
}
.livingWrap {
grid-template-columns: 1fr;
translate: 0 0;
}
.livingTxtBox {
order: 0;
background: url("../images/roomplan/living_bg_01@sp.jpg") center bottom / cover no-repeat;
padding: max(4em, 15vw) 0 clamp(6em, 20vw, 135px);
}
.livingTxtBox .heading {
font-size: clamp(2.9rem, (29 / 375 * 100vw), 3.2em);
text-align: center;
margin-bottom: .7em;
}
.livingTxtBox .txt {
width: 73.6%;
max-width: 550px;
margin-left: auto;
margin-right: auto;
}
}
/* ==========
ANIME
========== */
@media screen {
[data-js_show_target="livingPicBox"] {
opacity: 1;
}
[data-js_show_target="livingPicBox"] img {
filter: blur(3px); scale: 1.2;
}
[data-js_show_target-passed="livingPicBox"] img {
animation: 1500ms ease-out 200ms both ANIME-livingPicBoxImg;
}
}
@keyframes ANIME-livingPicBoxImg {
0% { filter: blur(3px); scale: 1.2;}
100% { filter: blur(0); scale: 1;}
}
/* landplotContainer | 全体区画図
------------------------------------------------------------------------ */
.landplotContainer {
}
.landplotSection {
}
.landplotBox {
display: grid;
grid-template-columns: calc(730 / 1400 * 100%) calc(590 / 1400 * 100%);
justify-content: space-between;
align-items: center;
}
.landplotMap {
}
.landplotMap img {
width: 100%;
max-width: none;
}
.landplotLegend {
line-height: 1.35;
font-size: clamp(1.3rem, (14 / 1400 * 100vw), 1.4rem);
letter-spacing: .05em;
}
.landplotLegendItem {
padding: 1.6em 0;
}
.landplotLegendItem + .landplotLegendItem {
border-top: 1px solid transparent;
border-image: repeating-linear-gradient(to right, #000 0, #000 2px, transparent 2px, transparent 4px);
border-image-slice: 1;
border-image-repeat: repeat;
}
.landplotLegendItem .heading {
display: grid;
grid-template-columns: 28px 1fr;
align-items: center;
column-gap: 12px;
}
.landplotLegendItem .heading .dot {
width: 100%;
aspect-ratio: 1;
border-radius: 50%;
}
.landplotLegendItem_01 .heading .dot { background-color: var(--roomplan-landplot-legendColor01); }
.landplotLegendItem_02 .heading .dot { background-color: var(--roomplan-landplot-legendColor02); }
.landplotLegendItem_03 .heading .dot { background-color: var(--roomplan-landplot-legendColor03); }
.landplotLegendItem_04 .heading .dot { background-color: var(--roomplan-landplot-legendColor04); }
.landplotLegendItem .heading .name {
display: block;
}
.landplotLegendItem .heading .name .ja {
display: block;
}
.landplotLegendItem .heading .name .en {
display: block;
font-family: var(--site-font_family-en_1);
font-size: 1.428571em;
letter-spacing: 0.1em;
margin-top: .04em;
}
.landplotLegendItem .description {
line-height: 1.785;
letter-spacing: .18em;
margin-top: .7em;
}
@media screen and (max-width: 900px) {
.landplotBox {
display: grid;
grid-template-columns: 1fr;
max-width: 730px;
margin-left: auto;
margin-right: auto;
}
.landplotLegend {
position: relative;
z-index: 0;
font-size: clamp(1.3rem, (13 / 375 * 100vw), 1.4rem);
margin-top: clamp(30px, (30 / 375 * 100vw), 60px);
padding-top: clamp(15px, (15 / 375 * 100vw), 45px);
padding-bottom: clamp(15px, (15 / 375 * 100vw), 45px);
}
.landplotLegend::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("../images/share/bg_02.jpg") center center / 560px 420px repeat;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
.landplotLegendItem {
padding: 1.2em 0;
}
.landplotLegendItem .heading {
grid-template-columns: 24px 1fr;
}
.landplotLegendItem .heading .name .en {
font-size: 1.4em;
}
.landplotLegendItem .description {
line-height: 1.6;
margin-top: .4em;
}
}
/* lotCategoryContainer | 区画カテゴリの紹介
------------------------------------------------------------------------ */
.lotCategoryContainer {
--lotCategoryNavWrap-marBottom: 128px;
}
@media screen and (max-width: 736px) {
.lotCategoryContainer {
--lotCategoryNavWrap-marBottom: clamp(40px, (40 / 375 * 100vw), 60px);
}
}
/* lotCategoryNavWrap
---------------------------------------------------- */
.lotCategoryNavWrap {
margin-bottom: calc(var(--lotCategoryNavWrap-marBottom) * -1);
}
.lotCategoryNav {}
.lotAncNavList {
display: grid;
grid-template-columns: repeat(4, 1fr); /* ★4ボタンver */
justify-content: center;
gap: 0 32px;
width: 95.5%;
max-width: 1100px; /* ★4ボタンver */
margin-left: auto;
margin-right: auto;
/* ★2ボタンver（文字サイズ調整有） */
grid-template-columns: repeat(2, 1fr);
max-width: calc((310px * 2) + (32px * 1));
}
.lotAncNavList li {
display: grid;
}
.lotAncNavList a {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
gap: .9rem 0;
line-height: 1.15;
color: #fff;
font-family: var(--site-font_family-en_1);
font-size: 1.4rem;
text-align: center;
letter-spacing: normal;
background: #444;
padding: 2.2em .5em 1.25em;
border-top: 6px solid #000;
transition: background .13s ease;
}
.lotAncNavList :where(.nav_lot01) a { border-color: var(--roomplan-landplot-legendColor01); }
.lotAncNavList :where(.nav_lot02) a { border-color: var(--roomplan-landplot-legendColor02); }
.lotAncNavList :where(.nav_lot03) a { border-color: var(--roomplan-landplot-legendColor03); }
.lotAncNavList :where(.nav_lot04) a { border-color: var(--roomplan-landplot-legendColor04); }
.lotAncNavList .note[role="note"] {
position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0;
}
.lotAncNavList .label {
display: grid;
/*align-items: center;
align-content: center;*/
}
.lotAncNavList .label .num {
align-self: start;
font-size: 1.714285em;
letter-spacing: .04em;
margin-bottom: .4em;
}
.lotAncNavList .label .ja {
align-self: end;
letter-spacing: .06em;
}
.lotAncNavList .label .en {
align-self: start;
color: #fdf0d0;
font-size: 1.214285em;
font-weight: 500;
letter-spacing: .08em;
margin-top: .3em;
margin-bottom: .85em;
}
.lotAncNavList .label .en br {
display: none;
}
.lotAncNavList .ico {}
.lotAncNavList .ico::before {
--_ico: url('data:image/svg+xml;charset=UTF-8,');
content: "";
display: block;
width: 1.5em;
aspect-ratio: 1 / 1;
background-color: #fff;
margin-left: auto;
margin-right: auto;
-webkit-mask: center center / contain no-repeat;
mask: center center / contain no-repeat;
-webkit-mask-image: var(--_ico);
mask-image: var(--_ico);
transition: translate .13s ease;
}
/* hover */
@media (hover: hover) and (pointer: fine) {
.lotAncNavList :not(.is-current) a:hover {
background: #666;
}
.lotAncNavList :not(.is-current) a:hover .ico::before {
translate: 0 13%;
}
}
.lotAncNavList :not(.is-current) a:focus-visible {
background: #666;
}
.lotAncNavList :not(.is-current) a:focus-visible .ico::before {
translate: 0 13%;
}
/* current */
.lotAncNavList .is-current a {
color: #444;
background: #e8e8e8;
}
.lotAncNavList .is-current .label .ja {
color: #a58535;
}
.lotAncNavList .is-current .ico::before {
background-color: #000;
}
@media screen and (max-width: 1200px) {
.lotAncNavList {
gap: 0 min((25 / 1200 * 100%), 25px);
}
.lotAncNavList a {
font-size: clamp(1rem, (14 / 950 * 100vw), 1.4rem); /* ★4ボタンver */
padding-top: 1.8em;
padding-bottom: 1em;
/* ★2ボタンver（文字サイズ調整有） */
font-size: 1.4rem;
}
.lotAncNavList .label .en br {
display: inline;
}
}
@media screen and (max-width: 736px) {
.lotAncNavList {
width: 100%;
gap: 0 clamp(2px, (2 / 480 * 100%), 8px);
padding-left: 3px;
padding-right: 3px;
}
.lotAncNavList a {
font-size: clamp(.8rem, (8 / 375 * 100vw), 1rem); /* ★4ボタンver */
padding: 1.8em .1em 2em;
/* ★2ボタンver（文字サイズ調整有） */
font-size: clamp(1rem, (10 / 375 * 100vw), 1.2rem);
}
.lotAncNavList .label .num {
font-size: 1.9em;
margin-bottom: .3em;
}
.lotAncNavList .label .ja {
letter-spacing: normal;
}
.lotAncNavList .label .en {
font-size: 1.375em;
letter-spacing: .07em;
margin-top: .3em;
margin-bottom: .3em;
}
.lotAncNavList .ico::before {
width: 1.625em;
}
}
@media screen and (max-width: 600px) {
.lotAncNavList .label .ja {
letter-spacing: -.15em;
scale: .92 1;
}
.lotAncNavList .label .en {
letter-spacing: .03em;
}
}
@media screen and (max-width: 374px) {
.lotAncNavList {
gap: 0 1px;
padding-left: 0;
padding-right: 0;
}
.lotAncNavList .label .ja {
scale: .9 1;
}
.lotAncNavList .label .en {
letter-spacing: normal;
scale: .95 1;
}
}
/* lotCategoryContent | 区画カテゴリ共通設定（'区画カテゴリ個別設定'は後述）
---------------------------------------------------- */
/* 交互レイアウト =============== */
/* 奇数 */
.lotCategoryContent:nth-of-type(odd) { /* bgPattern03 と同様（ベール＋灰） */
color: rgba(var(--site-themeColor-main_text), 1);
background: var(--site-variationColor-pattern_veil_PC),
var(--site-variationColor-pattern_gray),
rgba(var(--site-themeColor-main), 1);
background-position: center calc(max(50px, (50 / 1920 * 100vw)) * -1);
}
.lotCategoryContent:nth-of-type(odd) .lotPlanBox {
background: #fff;
}
.lotCategoryContent:nth-of-type(odd) .lotPlanFeatureBox .featureItem {
background: url("../images/share/bg_02.jpg") center center / 420px 315px repeat;
}
/* 偶数 */
.lotCategoryContent:nth-of-type(even) { /* bgPattern02 と同様（ベール） */
color: rgba(var(--site-themeColor-base_text), 1);
background: var(--site-variationColor-pattern_veil_PC);
background-position: center calc(max(50px, (50 / 1920 * 100vw)) * -1);
}
.lotCategoryContent:nth-of-type(even) .lotPlanBox {
background: url("../images/share/bg_02.jpg") center center / 420px 315px repeat;
}
.lotCategoryContent:nth-of-type(even) .lotPlanFeatureBox .featureItem {
background: #fff;
}
@media screen and (max-width: 736px) {
.lotCategoryContent.bgPattern02,
.lotCategoryContent.bgPattern03 { /* 背景パターンの位置調整 */
background-position: center max(20px, (20 / 375 * 100vw));
}
}
/* 基本設定 ===================== */
.lotCategoryContent {
padding-top: clamp(130px, (160 / 1500 * 100vw), 160px);
padding-bottom: clamp(130px, (160 / 1500 * 100vw), 160px);
}
.lotCategoryContent + .lotCategoryContent {
margin-top: clamp(40px, (60 / 1500 * 100vw), 60px);
}
.lotCategoryNavWrap + .lotCategoryContent { /* ナビと隣接するコンテンツ */
padding-top: calc(clamp(150px, (180 / 1500 * 100vw), 180px) + var(--lotCategoryNavWrap-marBottom));
}
.lotCategoryContentIntro {}
.lotCategoryContentIntro .introHeader {
text-align: center;
}
.lotCategoryContentIntro .introHeader .label {
display: inline-grid;
grid-template-columns: 1fr;
gap: .5rem 0;
max-width: 88%;
line-height: 1.15;
font-family: var(--site-font_family-en_1);
font-size: 1.6rem;
letter-spacing: .04em;
padding-left: 1.9em;
padding-right: 1.9em;
border: 0 solid currentColor;
border-width: 0 1px;
}
.lotCategoryContentIntro .introHeader .label .num {
font-size: 2.1875em;
letter-spacing: .16em;
margin-bottom: .07em;
}
.lotCategoryContentIntro .introHeader .label .ja {}
.lotCategoryContentIntro .introHeader .label .en {
color: rgba(var(--site-themeColor-accent_1), 1);
font-size: 1.8125em;
letter-spacing: .07em;
}
.lotCategoryContentIntro .introHeader .label .en br {
display: none;
}
.lotCategoryContentIntro .ptTextbox {
margin-top: var(--site-marpad-S);
}
@media screen and (max-width: 736px) {
.lotCategoryContent {
padding-top: clamp(100px, (100 / 375 * 100vw), 140px);
padding-bottom: clamp(130px, (130 / 375 * 100vw), 170px);
}
.lotCategoryContent + .lotCategoryContent {
margin-top: clamp(30px, (30 / 375 * 100vw), 80px);
}
.lotCategoryNavWrap + .lotCategoryContent { /* ナビと隣接するコンテンツ */
padding-top: calc(clamp(100px, (100 / 375 * 100vw), 140px) + var(--lotCategoryNavWrap-marBottom));
}
.lotCategoryContentIntro .introHeader .label {
font-size: clamp(1.3rem, (15 / 600 * 100vw), 1.5rem);
padding-left: 1.75em;
padding-right: 1.75em;
}
.lotCategoryContentIntro .ptTextbox {
letter-spacing: .12em;
}
}
@media screen and (max-width: 480px) {
.lotCategoryContentIntro .introHeader .label {
gap: .6rem 0;
padding-bottom: .25em;
}
.lotCategoryContentIntro .introHeader .label .num {
font-size: 2.307692em;
margin-bottom: 0;
}
.lotCategoryContentIntro .introHeader .label .ja {
margin-bottom: .5em;
}
.lotCategoryContentIntro .introHeader .label .en {
font-size: 1.384615em;
}
.lotCategoryContentIntro .introHeader .label .en br {
display: inline;
}
}
/* lotPlanSection | 特徴紹介コンテンツ
--------------------------------- */
.lotPlanSection {
margin-top: var(--site-marpad-XL);
}
.lotPlanSection + .lotPlanSection {
margin-top: var(--site-marpad-XXXL);
}
/* =================
PCTBSP共通
================= */
.lotPlanBox {
padding-bottom: var(--site-marpad-XS);
}
.lotPlanTypeName {
display: grid;
place-content: center;
line-height: 1.2;
font-family: var(--site-font_family-en_2);
font-size: clamp(2.3rem, (26 / 1200 * 100vw), 2.6rem);
text-align: center;
letter-spacing: .1em;
}
.lotPlanTypeName .label {
min-width: 235px;
color: rgba(var(--site-themeColor-accent_1_text), 1);
background: rgba(var(--site-themeColor-accent_1), 1);
padding: .444em 1.225em .576em 1.3em;
}
.lotPlanTypeName .st {}
.lotPlanTypeName .num {
font-size: 1.423076em;
margin-left: -.05em;
}
.lotPlanFeatureBox {
margin-top: var(--site-marpad-XL);
margin-left: auto;
margin-right: auto;
}
.lotPlanFeatureBox img {
width: 100%;
max-width: none;
}
.lotPlanFeatureBox .featurePlanPic {}
.lotPlanFeatureBox .featurePlanPic .planPicItem {}
.lotPlanFeatureBox .featureList {}
.lotPlanFeatureBox .featureItem {
line-height: 1.4167;
font-size: clamp(1.115rem, (12 / 1500 * 100vw), 1.2rem);
padding: clamp(12px, (25 / 330 * 100%), 25px);
}
.lotPlanFeatureBox .featureItem .ttlBox {
display: grid;
grid-template-columns: 1.4em 1fr;
/*align-items: baseline;*/
gap: 0 .3em;
font-size: 1.5em;
letter-spacing: normal;
}
.lotPlanFeatureBox .featureItem .is_ttlBox_numNone { /* 数字アイコンなしの場合 */
grid-template-columns: 1fr;
}
.lotPlanFeatureBox .featureItem .ttlBox .num {
display: grid;
place-content: center;
aspect-ratio: 1;
line-height: .8;
color: rgba(var(--site-themeColor-accent_1_text), 1);
font-family: var(--site-font_family-en_2);
font-size: 1.222222em;
text-align: center;
background: rgba(var(--site-themeColor-accent_1), 1);
}
.lotPlanFeatureBox .featureItem .ttlBox .ttl {
color: rgba(var(--site-themeColor-accent_1), 1);
}
.lotPlanFeatureBox .featureItem .txtBox {
margin-top: 1em;
}
.lotPlanFeatureBox .featureItem .picBox {
position: relative;
margin-top: 1.15em;
}
.lotPlanFeatureBox .featureItem .picBox .pic {
}
.lotPlanFeatureBox .featureItem .picBox .imgcapkeep {
font-size: 1rem;
letter-spacing: normal;
}
.lotPlanCaption {
margin-top: var(--site-marpad-L);
margin-left: auto;
margin-right: auto;
}
.lotPlanBtn {
margin-top: 50px;
}
.lotPlanBtn a {
overflow: hidden;
}
.lotPlanBtn a + a {
margin-top: 25px;
}
.lotPlanBtn a .label::before {} /* 光が走るエフェクト用（プランボタン） */
/* =================
PCレイアウト
================= */
@media screen and (min-width: 1200.02px) {
.lotPlanFeatureBox {
--lotPlanBox-width_value: 1400; /* 親要素の幅 */
--lotPlanFeatureBox-width_value: 1260; /* 自分の幅 */
--lotPlanFeatureBox-featurePlanPic-width_value: 600; /* 間取図エリアの幅 */
--_z_cellWidth: calc(var(--lotPlanFeatureBox-featurePlanPic-width_value) / var(--lotPlanFeatureBox-width_value) * 100%); /* 間取図エリアのセル幅(%) = 600/1260*100% = 47.619% */
width: calc(var(--lotPlanFeatureBox-width_value) / var(--lotPlanBox-width_value) * 100%); /* =1260/1400*100% = 90% */
max-width: calc(var(--lotPlanFeatureBox-width_value) * 1px); /* 1260px */
/* 子要素を重ねる設定（featurePlanPicとfeatureListを同じセルに重ねる） */
display: grid;
align-items: center;
}
.lotPlanFeatureBox .featurePlanPic,
.lotPlanFeatureBox .featureList { /* 子要素を重ねる設定（featurePlanPicとfeatureListを同じセルに重ねる） */
grid-column: 1;
grid-row: 1;
}
.lotPlanFeatureBox .featurePlanPic {
display: grid;
}
.lotPlanFeatureBox .featurePlanPic .planPicItem {
width: var(--_z_cellWidth);
margin-left: auto;
margin-right: auto;
}
.lotPlanFeatureBox .featureList {
display: grid;
grid-template:
"item1 item2" auto /
1fr 1fr;
align-items: center;
gap: 10px var(--_z_cellWidth); /* rowは最低限10px確保しておく。columnは間取図幅分スキマを空ける。 */
pointer-events: none; /* 間取図の為に一旦クリックを素通りさせる */
}
.lotPlanFeatureBox .featureItem_1 { grid-area: item1; }
.lotPlanFeatureBox .featureItem_2 { grid-area: item2; }
/* ////////////////////// 数を増やす例 //////////////////////
.lotPlanFeatureBox .featureList {
grid-template:
"item1 item2" auto
". item3" auto /
1fr 1fr;
}
.lotPlanFeatureBox .featureItem_3 { grid-area: item3; }
////////////////////////////////////////////////////////// */
.lotPlanFeatureBox .featureItem {
pointer-events: auto; /* クリック復活 */
}
.lotPlanCaption {
width: calc(1260 / 1400 * 100%);
}
}
/* =================
TBレイアウト
================= */
@media screen and (max-width: 1200px) {
.lotPlanFeatureBox {
display: block;
width: 90%;
}
.lotPlanFeatureBox .featurePlanPic {
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.lotPlanFeatureBox .featureList {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
gap: 0 clamp(10px, (40 / (330 * 2) * 100%), 40px);
width: 100%;
max-width: calc((330px * 2) + 40px);
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}
.lotPlanFeatureBox .featureItem {
font-size: clamp(1.115rem, (12 / 820 * 100vw), 1.2rem);
}
.lotPlanCaption {
width: 90%;
}
}
/* =================
SPレイアウト
================= */
@media screen and (max-width: 736px) {
.lotPlanTypeName {
font-size: clamp(1.55rem, (15.5 / 375 * 100vw), 2.3rem);
}
.lotPlanTypeName .label {
min-width: 180px;
}
.lotPlanFeatureBox {
width: 84.375%;
}
.lotPlanFeatureBox .featureList {
display: block; /* グリッド解除 */
}
.lotPlanFeatureBox .featureItem {
font-size: clamp(1.115rem, (11.15 / 375 * 100vw), 1.25rem);
letter-spacing: .12em;
}
.lotPlanFeatureBox .featureItem + .featureItem {
margin-top: 30px;
}
.lotPlanFeatureBox .featureItem .ttlBox {
font-size: 1.358744em;
}
.lotPlanCaption {
width: 84.375%;
}
.lotPlanBtn {
margin-top: 40px;
}
}
@media screen and (max-width: 480px) {
.lotPlanTypeName .label {
min-width: 140px;
}
}
/* premiumPlanBnSection | プレミアムプランバナー（default.css参照）
--------------------------------- */
.premiumPlanBnSection {}
/* ==========
ANIME
========== */
@media screen {
[data-js_show_target="lotPlanBtn"] {
opacity: 1;
}
[data-js_show_target="lotPlanBtn"] > * {
translate: 0 30px;
}
[data-js_show_target-passed="lotPlanBtn"] > * {
animation: 1100ms ease 100ms both ANIME-lotPlanBtn;
}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(1) { animation-delay: 100ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(2) { animation-delay: 200ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(3) { animation-delay: 300ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(4) { animation-delay: 400ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(5) { animation-delay: 500ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(6) { animation-delay: 600ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(7) { animation-delay: 700ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(8) { animation-delay: 800ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(9) { animation-delay: 900ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(10) { animation-delay: 1000ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(11) { animation-delay: 1100ms}
[data-js_show_target-passed="lotPlanBtn"] > *:nth-of-type(12) { animation-delay: 1200ms}
/* 光が走るエフェクト用（プランボタン） */
[data-js_show_target="lotPlanBtn"] a .label::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
height: 0;
width: 100%;
padding-top: 100%;
background: rgba(255, 255, 255, .5);
filter: blur(10px);
transform: translate(-100%, -100%) rotate(-45deg) scale(1);
transform-origin: center center;
pointer-events: none;
}
[data-js_show_target-passed="lotPlanBtn"] a .label::before {
animation: 6000ms ease-out 200ms infinite ANIME-lotPlanBtn_shinyEffect;
}
}
@keyframes ANIME-lotPlanBtn {
0% { translate: 0 30px;}
100% { translate: 0 0px;}
}
@keyframes ANIME-lotPlanBtn_shinyEffect {
0% { transform: translate(-100%, -100%) rotate(-45deg) scale(1); opacity: 1;}
18% { transform: translate(-100%, -100%) rotate(-45deg) scale(4);}
33%, 100% { transform: translate(-100%, -100%) rotate(-45deg) scale(4); opacity: 0;}
}
/* .lot00.lotCategoryContent | 区画カテゴリ個別設定（'区画カテゴリ共通設定'は前述）
---------------------------------------------------- */
/* ----------------------------------------------------
lot01 | グランド・マスターピース
---------------------------------------------------- */
.lot01.lotCategoryContent {}
/* ----------------------------------------------------
lot02 | サウス・ゲートウェイ
---------------------------------------------------- */
.lot02.lotCategoryContent {}
/* ----------------------------------------------------
lot03 | セントラル・プロムナード
---------------------------------------------------- */
.lot03.lotCategoryContent {}
/* ----------------------------------------------------
lot04 | アーバン・ミニマル
---------------------------------------------------- */
.lot04.lotCategoryContent {}
/* 紹介コンテンツのレイアウトがイレギュラーなので調整が必要
--------------------------------- */
@media screen and (min-width: 1200.02px) {
:where(.lot04.lotCategoryContent) .lotPlanFeatureBox {
--lotPlanFeatureBox-width_value: 1060; /* 自分の幅 */
--lotPlanFeatureBox-featurePlanPic-width_value: calc(660 + 70); /* 間取図エリアの幅 */ /* イレギュラー余白70px */
}
:where(.lot04.lotCategoryContent) .lotPlanFeatureBox .featurePlanPic .planPicItem {
margin-left: 0;
padding-right: calc(70 / var(--lotPlanFeatureBox-width_value) * 100%); /* イレギュラー余白70px */
}
:where(.lot04.lotCategoryContent) .lotPlanFeatureBox .featureList {
grid-template:
". item1" auto /
0 1fr;
}
}
@media screen and (max-width: 1200px) {
:where(.lot04.lotCategoryContent) .lotPlanFeatureBox .featureList {
grid-template-columns: 1fr;
max-width: 330px;
}
}
@media screen and (max-width: 736px) {
:where(.lot04.lotCategoryContent) .lotPlanFeatureBox .featureList {
max-width: none;
}
}
/* townscapePicWrap
------------------------------------------------------------------------ */
.townscapePicWrap {
margin-top: 20px;
}
.townscapePicBox {
position: relative;
z-index: 0;
}
.townscapePicBox .txt {
position: absolute;
inset: calc(160 / 1115 * 100%) 0 auto;
z-index: 0;
width: calc(1000 / 1920 * 100%);
line-height: 1.625;
color: #444;
font-size: max(2rem, (32 / 1920 * 100vw));
text-align: center;
text-shadow: 0 0 2px rgba(255, 255, 255, .8), 0 0 4px rgba(255, 255, 255, .6), 0 0 6px rgba(255, 255, 255, .4), 0 0 6px rgba(255, 255, 255, .24), 0 0 10px rgba(255, 255, 255, .24);
letter-spacing: .14em;
margin: auto;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .15) 20%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .15) 80%, rgba(255, 255, 255, 0) 100%);
padding: .65em .3em;
}
.townscapePicBox .txt br.SP {
display: none;
}
.townscapePicBox .pic {
overflow: hidden;
}
.townscapePicBox .pic img {
width: 100%;
max-width: none;
height: auto;
}
@media screen and (max-width: 900px) {
.townscapePicBox .txt {
top: calc(140 / 1115 * 100%);
font-size: max(1.9rem, (23 / 900 * 100vw));
}
.townscapePicBox .pic img {
width: 126%;
margin-left: -13%;
}
}
@media screen and (max-width: 736px) {
.townscapePicBox .txt {
top: calc(85 / 450 * 100%);
width: 100%;
color: #000;
font-size: clamp(1.9rem, (21 / 375 * 100vw), 3.4rem);
}
.townscapePicBox .pic img {
width: 100%;
margin-left: 0;
}
.townscapePicBox .txt br.SP {
display: inline;
}
}
/* performanceLabelWrap
------------------------------------------------------------------------ */
/*.performanceLabelWrap {
margin-top: 20px;
}*/
.performanceLabelBox {
display: grid;
grid-template-columns: min((472 / 1000 * 100%), 472px);
justify-content: center;
}
.performanceLabelunit {}
/* 環境性能表示 */
.kankyo.performanceLabelunit {
}
/* 省エネ性能ラベル */
.shoene.performanceLabelunit .cap {
display: block;
line-height: 1.6;
letter-spacing: .01em;
margin-top: .65em;
}
@media screen and (max-width: 736px) {
.performanceLabelBox {
grid-template-columns: min((221 / 320 * 100%), 320px);
}
}
/* digitalLibraryContainer
------------------------------------------------------------------------ */
.digitalLibraryContainer {
position: relative;
z-index: 0;
width: calc(1800 / 1920 * 100%);
background: #ebeff2 url("../images/roomplan/digitallibrary_p_01.jpg") 75% top / cover no-repeat;
/*margin-top: clamp(130px, (190 / 1600 * 100vw), 190px);*/
margin-left: auto;
margin-right: auto;
padding: clamp(60px, (100 / 1600 * 100vw), 100px) clamp(45px, (100 / 1920 * 100vw), 100px);
}
.digitalLibraryWrap {
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
.digitalLibraryWrap .txtBox {
line-height: 1.75;
font-size: 1.5rem;
text-shadow: 0 0 3px #ebeff2, 0 0 5px #ebeff2, 0 0 10px #c9d1d9, 0 0 30px #c9d1d9, 0 0 50px #c9d1d9;
letter-spacing: .065em;
}
.digitalLibraryWrap .txtBox .heading {
line-height: 1.35;
font-family: var(--site-font_family-en_1);
font-size: 3.133333em;
font-weight: 430;
letter-spacing: .065em;
}
.digitalLibraryWrap .txtBox .txt {
font-weight: 500;
margin-top: .86em;
}
.digitalLibraryWrap .txtBox .txt .bgColor {
backdrop-filter: blur(2px);
}
.digitalLibraryWrap .btnBox {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px calc(22 / 822 * 100%);
max-width: 822px;
margin-top: 40px;
}
.digitalLibraryWrap .btnBox > * {
display: grid;
box-shadow: 0 0 60px 0 rgba(0, 0, 0, .02);
}
.digitalLibraryWrap .btnBox .btn_req {}
.digitalLibraryWrap .btnBox .btn_entryGuide {}
.digitalLibraryWrap .btnBox a {
width: 100%;
margin-left: revert;
margin-right: revert;
padding-left: .4em;
padding-right: .4em;
}
.digitalLibraryWrap .btnBox .btn_entryGuide a .ja {
font-size: .888889em;
letter-spacing: -.01em;
}
@media screen and (max-width: 1500px) {
.digitalLibraryWrap .txtBox .txt {
color: #000;
}
}
@media screen and (max-width: 900px) {
.digitalLibraryContainer {
min-height: 500px;
background: #ebeff2 url("../images/roomplan/digitallibrary_p_01@sp.jpg") center bottom / 100% auto no-repeat;
padding: clamp(50px, (50 / 375 * 100vw), 100px) clamp(25px, (25 / 375 * 100vw), 50px) clamp(75px, (75 / 375 * 100vw), 120px);
}
.digitalLibraryContainer::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to bottom, rgba(235, 239, 242, .7) 10%, rgba(235, 239, 242, .8) 35% 45%, rgba(235, 239, 242, .7) 55%, rgba(235, 239, 242, 0) 95%);
}
.digitalLibraryWrap {
max-width: 550px;
}
.digitalLibraryWrap .txtBox {
font-size: 1.6rem;
}
.digitalLibraryWrap .txtBox .txt {
color: inherit;
}
.digitalLibraryWrap .txtBox .heading {
font-size: 2.4em;
letter-spacing: .05em;
}
.digitalLibraryWrap .txtBox .txt .bgColor {
backdrop-filter: none;
}
.digitalLibraryWrap .txtBox .txt br {
display: none;
}
.digitalLibraryWrap .btnBox {
grid-template-columns: 1fr;
max-width: 500px;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 600px) {
.digitalLibraryContainer {
display: grid;
place-content: center;
min-height: 1px;
aspect-ratio: auto;
}
.digitalLibraryContainer::before {
background: linear-gradient(to bottom, rgba(235, 239, 242, .3) 20em, rgba(235, 239, 242, 0) 25em, rgba(235, 239, 242, 0) 80%);
background: linear-gradient(to bottom, rgba(235, 239, 242, .15) 15%, rgba(235, 239, 242, .45) 30% 50%, rgba(235, 239, 242, .2) 60%, rgba(235, 239, 242, 0) 80%);
}
.digitalLibraryWrap .txtBox {
font-size: clamp(1.3rem, (13 / 375 * 100vw), 1.5rem);
}
.digitalLibraryWrap .txtBox .heading {
font-size: 1.846153em;
}
.digitalLibraryWrap .txtBox .txt {
margin-top: calc(.86em + 10px);
}
.digitalLibraryWrap .btnBox {
margin-top: 50px;
}
.digitalLibraryWrap .btnBox > * {
box-shadow: 0 0 30px 0 rgba(0, 0, 0, .03);
}
.digitalLibraryWrap .btnBox a {
font-size: 1.45rem;
}
.digitalLibraryWrap .btnBox .btn_entryGuide a .ja {
font-size: .896551em;
letter-spacing: -.02em;
}
}
/* =======================================================================================
PAGE | z_
======================================================================================= */
.pt-roomplanDetail_01 {
}
/* -----------------------------------------------------------------------------
プラン詳細の共通スタイル 2023.06
--------------------------------------------------------------------------------
* プレミアムプランページにも影響が出るため注意
* プレミアムプランページに影響させたくない設定は「body:not(premiumP) .floorPlanSection」で対応すること。
----------------------------------------------------------------------------- */
/* floorPlanSection - 外枠
------------------------------------------------------------------------ */
/*.floorPlanSection { // プレミアムプランページにも影響が出るため注意 //
background: rgba(255,255,255,1);
box-shadow: 0 0 0 1px #d3d3d3;
}
.floorPlanSection .planUnit {
width: 95%;
max-width: 1200px;
margin: 0 auto;
color: #333;
}*/
/* floorPlanSection - 内容
------------------------------------------------------------------------ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PlanDetail_Common_Styles START */
/* 文字/リストスタイル/微調整の余白 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* specWrap
---------------------------------------------------- */
.floorPlanSection .specWrap .spec1 {
line-height: 1.35;
font-size: 1.4rem;
letter-spacing: 0;
}
.floorPlanSection .specWrap .spec2 {
line-height: 1.35;
font-size: 1.4rem;
letter-spacing: .075em;
}
.floorPlanSection .specWrap small {
color: inherit;
font: inherit;
}
/* spec1
----------------------- */
.floorPlanSection .specWrap .spec1 {
text-align: center;
}
.floorPlanSection .specWrap .spec1 .spec-type {
--M-fluidFontSize-max-fontsize: 54;
--M-fluidFontSize-min-fontsize: 50;
--M-fluidFontSize-max-viewport: 1300;
--M-fluidFontSize-min-viewport: 1050;
--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
font-size: var(--M-fluidFontSize-fontSize);
min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
font-family: var(--site-font_family-en_2);
font-weight: 430;
letter-spacing: .035em;
/*white-space: nowrap;*/ /* 不要なら削除可 */
}
.floorPlanSection .specWrap .spec1 .spec-type .st {
font-size: 1em;
margin-right: -.175em;
}
.floorPlanSection .specWrap .spec1 .spec-type .num {
line-height: .8;
font-size: 1.259259em;
letter-spacing: -.01em;
}
/* spec2
----------------------- */
.floorPlanSection .specWrap .spec2 {
}
.floorPlanSection .specWrap .spec2 .spec-ldk {
line-height: 1.2;
font-size: 2.142857em;
letter-spacing: .05em;
font-family: var(--site-font_family-en_2);
font-weight: 500;
}
.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
/*.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit > b {
font-size: 1.546391em;
margin-right: 2px;
}*/
.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit .ldkNum {
line-height: .8;
font-size: 1.5em;
margin-right: .04em;
}
.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit > .element {
display: inline-block;
}
.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit > .element.floor {
font-size: .6775em;
letter-spacing: 0;
}
.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit > .element .plus {
display: inline-block;
font-size: .646667em;
margin-left: 1px;
margin-right: 1px;
translate: 0 -.25em;
}
/*.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit > .element b {
font-size: 1.546391em;
margin: 0 2px;
}*/
.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit > .element b.ja {
font-size: .849em;
letter-spacing: .04em;
}
.floorPlanSection .specWrap .spec2 .spec-ldk .kana {
letter-spacing: -.07em;
}
.floorPlanSection .specWrap .spec2 .spec-ldk .lrg {
/*line-height: 1;*/
font-size: 1.175em;
}
.floorPlanSection .specWrap .spec2 .spec-ldk .sml {
display: inline-block;
font-family: inherit;
font-size: max(1.1rem, .643em);
}
.floorPlanSection .specWrap .spec2 .value {
line-height: 1.15;
font-family: var(--site-font_family-en_2);
font-size: 2.429em;
letter-spacing: .03em;
margin-right: .04em;
}
/*.floorPlanSection .specWrap .spec2 .spec-lot .value,
.floorPlanSection .specWrap .spec2 .wrap-spec-building .value,
.floorPlanSection .specWrap .spec2 .spec-service .value {
line-height: 1;
font-family: var(--site-font_family-en_2);
font-size: 2.429em;
letter-spacing: -.01em;
margin-right: .04em;
}*/
.floorPlanSection .specWrap .spec2 .tsubo {
display: inline-block;
letter-spacing: .08em;
margin-left: -.3em;
margin-right: -.4em;
}
.floorPlanSection .specWrap .spec2 small {
display: inline-block;
/*font-size: .857em;*/
margin: .5em 0 .25em;
}
.floorPlanSection .specWrap .spec2 small .kana {
letter-spacing: -.07em;
}
/* 余白設定 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* specWrap
---------------------------------------------------- */
/* spec1
----------------------- */
.floorPlanSection .specWrap .spec1 {}
/* spec2
----------------------- */
.floorPlanSection .specWrap .spec2 .spec-ldk,
.floorPlanSection .specWrap .spec2 .spec-lot,
.floorPlanSection .specWrap .spec2 .spec-building,
/*.floorPlanSection .specWrap .spec2 .spec-building_caption,*/
.floorPlanSection .specWrap .spec2 .spec-service {
padding: .15em 0;
}
.floorPlanSection .specWrap .spec2 .spec-lot {
padding-top: .4em;
}
.floorPlanSection .specWrap .spec2 .spec-building_floorBox {
padding-top: 1em;
}
.floorPlanSection .specWrap .spec2 .spec-service {
padding-top: .4em;
}
.floorPlanSection .specWrap .spec2 .spec-building {
display: inline-block;
}
.floorPlanSection .specWrap .spec2 .spec-floor {
display: inline-block;
margin-right: 1.25em;
}
.floorPlanSection .specWrap .spec2 .spec-building_caption {
display: inline-block;
/*display: block;
margin-top: .3em;*/
}
/*.floorPlanSection .specWrap .spec2 .spec-ldk .etcUnit {
margin: 5px auto;
padding: 5px 0;
}*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PlanDetail_Common_Styles END */
/* =================
PCレイアウト
================= */
/* specWrap
---------------------------------------------------- */
.floorPlanSection .specWrapDeco {
text-align: center; /* inline-flex の中央揃えセット(1/3) */
/*background: rgba(var(--site-themeColor-main), 1);
color: rgba(var(--site-themeColor-main_text), 1);*/
padding: clamp(40px, (40 / 375 * 100vw), 60px) 0;
}
.floorPlanSection .specWrap {
display: inline-flex; /* inline-flex の中央揃えセット(2/3) */
justify-content: center;
text-align: left; /* inline-flex の中央揃えセット(3/3) */
/*max-width: 1150px;*/
margin: 0 auto;
}
/* spec1
----------------------- */
.floorPlanSection .specWrap .spec1 {
flex: 0 0 250px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
padding: 4px 10px 8px;
border-right: 1px solid currentColor;
}
/* spec2
----------------------- */
.floorPlanSection .specWrap .spec2 {
/*flex: 1 1;*/
flex: 0 1 auto;
padding: 5px 20px 5px 40px;
}
/* featureWrap
---------------------------------------------------- */
.featureWrap {
padding-top: clamp(50px, (50 / 375 * 100vw), 70px);
padding-bottom: clamp(90px, (90 / 375 * 100vw), 140px);
}
/* planMeritWrap
---------------------------------------------------- */
.floorPlanSection .planMeritWrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 900px;
border: 0 solid currentColor;
border-width: 1px 0;
}
.floorPlanSection .planMeritList {
width: 88%;
max-width: 700px;
line-height: 2;
font-size: 1.6rem;
letter-spacing: .15em;
margin: 2em auto;
}
.floorPlanSection .planMeritList li {
display: grid;
grid-template-columns: 1em 1fr;
align-items: baseline;
gap: 0 .6em;
/*margin: .5em 0;*/
}
.floorPlanSection .planMeritList li:before {
content: "";
display: block;
width: 100%;
height: 0;
border-top: 1px solid currentColor;
translate: 0 -.4em;
}
/* planPic
---------------------------------------------------- */
.floorPlanSection .planPic {
text-align: center;
background: #fff;
margin-top: clamp(50px, (100 / 736 * 100vw), 100px);
padding: clamp(50px, (50 / 375 * 100vw), 100px) clamp(15px, (15 / 375 * 100vw), 400px);
/*border: 1px solid #ccc;*/
}
.floorPlanSection .planPic img {
}
/* captionWrap
---------------------------------------------------- */
.floorPlanSection .captionWrap {
padding-top: clamp(20px, (20 / 375 * 100vw), 50px);
}
.floorPlanSection .captionWrap small {
color: #000;
font-size: 1.05rem;
letter-spacing: normal;
}
/* planPriceWrap
-------------------------------------------------------
div.planPriceWrap.sizeContentWideM>(div.planPriceBox>(div.ttl>div>(em.status{先着順}+{ 予定販売価格}))+(div.priceBox>span.price>(span.num{00000}+span.yen>({万円台}+small{（100万円単位）}))))+(div.planPriceCaptionBox>small{※先着順住戸につきましては、...}+small{※記載の販売価格は...})
---------------------------------------------------- */
.floorPlanSection .planPriceWrap {
font-size: 1.1em;
margin-bottom: clamp(60px, (80 / 736 * 100vw), 80px);
}
.floorPlanSection .planPriceBox {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
gap: .15em 1em;
max-width: 750px;
line-height: 1.35;
color: rgba(var(--site-themeColor-accent_2_text), 1);
letter-spacing: .13em;
background: rgba(var(--site-themeColor-accent_2), 1);
margin-left: auto;
margin-right: auto;
padding: .6em .7em .7em;
border-radius: 2px;
}
.floorPlanSection .planPriceBox .ttl {
display: grid;
place-content: center;
line-height: 1.2;
}
.floorPlanSection .planPriceBox .priceBox {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
gap: 0 .5em;
}
.floorPlanSection .planPriceBox .priceBox .floor {
display: inline-block;
line-height: 1.2;
color: rgba(var(--site-themeColor-accent_2), 1);
font-family: var(--site-font_family-en_2);
font-size: .9em;
padding: .05em .2em .05em .3em;
background: rgba(var(--site-themeColor-accent_2_text), 1);
}
.floorPlanSection .planPriceBox .priceBox .floor .num {
line-height: 1;
font-size: 1.2em;
}
.floorPlanSection .planPriceBox .priceBox .price {
}
.floorPlanSection .planPriceBox .priceBox .price .num {
line-height: 1;
font-size: 2.45em;
letter-spacing: normal;
}
.floorPlanSection .planPriceBox .priceBox .price .yen {
margin-left: .15em;
}
.floorPlanSection .planPriceBox .priceBox .price .yen small {
font-family: inherit;
}
.floorPlanSection .planPriceCaptionBox {
display: grid;
justify-content: center;
line-height: 1.6;
color: #444;
margin-top: .9em;
}
.floorPlanSection .planPriceCaptionBox small {
display: block;
line-height: inherit;
color: inherit;
letter-spacing: .01em;
}
/* =================
SPレイアウト
================= */
@media screen and (max-width: 1050px) {
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PlanDetail_Common_Styles START */
.floorPlanSection .specWrap .spec1,
.floorPlanSection .specWrap .spec2 {
font-size: 1.3rem;
}
.floorPlanSection .specWrap .spec1 .spec-type {
font-size: 4.5rem;
}
.floorPlanSection .specWrap .spec1 .spec-type {
letter-spacing: .07em;
}
.floorPlanSection .specWrap .spec1 .spec-type .num {
letter-spacing: .02em;
}
.floorPlanSection .specWrap .spec2 .spec-ldk .ldkUnit .ldkNum {
line-height: inherit;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PlanDetail_Common_Styles END */
/* specWrap
---------------------------------------------------- */
.floorPlanSection .specWrap {
display: block;
max-width: 780px; /* feeling. */
text-align: center; /* inline-block の中央揃えセット_forSP(1/3) */
}
/* spec1
----------------------- */
.floorPlanSection .specWrap .spec1 {
padding: .5em 0;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
border-right: none;
}
/* spec2
----------------------- */
.floorPlanSection .specWrap .spec2 {
display: inline-block; /* inline-block の中央揃えセット_forSP(2/3) */
text-align: left; /* inline-block の中央揃えセット_forSP(3/3) */
padding: 20px 0 0;
}
.floorPlanSection .specWrap .spec2 .spec-ldk,
.floorPlanSection .specWrap .spec2 .spec-lot,
.floorPlanSection .specWrap .spec2 .spec-building,
.floorPlanSection .specWrap .spec2 .spec-building_floorBox,
.floorPlanSection .specWrap .spec2 .spec-service {
display: block;
text-align: left;
padding: .5em 0 .3em;
/*border-bottom: 1px dotted #fff;*/
}
.floorPlanSection .specWrap .spec2 .spec-ldk {
padding-top: .1em;
/*border-top: 1px dotted #fff;*/
}
/* planMeritWrap
---------------------------------------------------- */
.floorPlanSection .planMeritList {
display: block;
font-size: 1.45rem;
}
}
@media screen and (max-width: 736px) {
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PlanDetail_Common_Styles START */
.floorPlanSection .specWrap .spec1 .spec-type {
font-size: 4rem;
}
.floorPlanSection .specWrap .spec2 .spec-ldk {
font-size: 1.8em;
}
.floorPlanSection .specWrap .spec2 .value {
font-size: 1.916667em;
}
.floorPlanSection .specWrap .spec2 small,
.floorPlanSection .specWrap .spec2 .spec-building_caption {
display: block; /* 「inline-block の中央揃えセット_forSP」を使う場合、早めにblockにしておくこと */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PlanDetail_Common_Styles END */
/* specWrap
---------------------------------------------------- */
/* spec1
----------------------- */
.floorPlanSection .specWrap .spec1 .spec-typeName {
font-size: 1.9em;
margin-top: .7em;
}
/* planMeritWrap
---------------------------------------------------- */
.floorPlanSection .planMeritList {
font-size: 1.3rem;
letter-spacing: .1em;
}
/* planPriceWrap
---------------------------------------------------- */
.floorPlanSection .planPriceWrap {
font-size: 1em;
}
.floorPlanSection .planPriceBox {
grid-template-columns: 1fr;
padding: .7em .6em .8em;
}
.floorPlanSection .planPriceBox .ttl {
font-size: .9em;
}
.floorPlanSection .planPriceBox .priceBox .price .num {
font-size: 2.3em;
}
}
@media screen and (max-width: 480px) { /*{SPs}*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PlanDetailText_Styles START */
.floorPlanSection .specWrap .spec1,
.floorPlanSection .specWrap .spec2 {
font-size: 1.2rem;
}
.floorPlanSection .specWrap .spec2 .spec-ldk {
font-size: 1.384615em;
}
/* planPriceWrap
---------------------------------------------------- */
.floorPlanSection .planPriceWrap {
font-size: .95em;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PlanDetailText_Styles END */
}
/* lllllllllllllllllllllllll
------------------------------------------------------------------------ */
.lllllllllllllllllllllllll {
}
/* mmmmmmm
---------------------------------------------------- */
.mmmmmmm {
}
.mmmmmmm .nnnnnn {
}
.mmmmmmm .nnnnnn {
}
.mmmmmmm .nnnnnn {
}
.mmmmmmm .nnnnnn .ooooo {
}
.mmmmmmm .nnnnnn .ooooo {
}
/* ppppppppppppppppppp
------------------------------------------------------------------------ */
.ppppppppppppppppppp {
}
/* rrrrrrr
---------------------------------------------------- */
.rrrrrrr {
}
.rrrrrrr .ssssss {
}
.rrrrrrr .ssssss {
}
.rrrrrrr .ssssss {
}
.rrrrrrr .ssssss .ttttt {
}
.rrrrrrr .ssssss .ttttt {
}