@charset "UTF-8";
/*----------------------------- LOCAL NAVI
-------------------------------*/
.local-nav { position: relative; z-index: 2; }
.local-nav nav { width: 60%; }
.local-nav nav ul { width: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; }
.local-nav nav ul div, .local-nav nav ul li { min-height: 0%; }
.local-nav nav ul li { margin-right: 8%; margin-top: 8px; }
.local-nav nav ul li:nth-of-type(3n), .local-nav nav ul li:last-of-type { margin-right: 0; }
.local-nav nav ul li a { display: block; width: 100%; text-align: left; line-height: 1.2; color: #9fa0a0; padding-bottom: 0.4rem; transition: .4s all; position: relative; }
.local-nav nav ul li a::before { content: ""; display: block; min-width: 112%; height: 2px; background-color: #000; position: absolute; left: 0; bottom: 0; opacity: 0; pointer-events: none; }
.local-nav nav ul li a .en { font-size: min(3.5vw, 3.2rem); letter-spacing: 0.1em; font-weight: 100; }
.local-nav nav ul li.current a, .local-nav nav ul li a:hover { color: #000; }
.local-nav nav ul li.current a::before, .local-nav nav ul li a:hover::before { opacity: 1; }
.local-nav nav ul li:first-of-type a::before { min-width: 100%; }
@media screen and (max-width: 960px) { .local-nav nav { width: 56%; }
  .local-nav nav ul li:nth-of-type(2n) { margin-right: 0; }
  .local-nav nav ul li:nth-of-type(3n) { margin-right: 8%; } }
@media screen and (max-width: 600px) { .local-nav nav ul { display: block; }
  .local-nav nav ul li { margin-right: 0; }
  .local-nav nav ul li a { padding-bottom: 2px; }
  .local-nav nav ul li a::before { min-width: 100%; }
  .local-nav nav ul li a .en { font-size: min(5.4vw, 16px); }
  .local-nav nav ul li.current + li { padding-top: 4px; } }

/*----------------------------- common parts
-------------------------------*/
.spec .type { text-align: center; line-height: 1.44; }
.spec .type .em { font-size: 192%; margin-right: 4px; }
.spec .layout { line-height: 1.28; }
.spec .areasize { line-height: 1.2; }
.spec .areasize .em { margin: 0 4px; }
.spec .othersize { display: inline-block; width: auto; padding: 1.6rem 1.2rem 0; margin: auto; }
.spec .othersize > ul li { font-size: clamp(13px, 1.4vw, 1.5rem); line-height: 1.28; text-align: left; margin-bottom: 4px; padding-left: 15px; position: relative; }
.spec .othersize > ul li::before { content: ""; display: inline-block; width: 12px; aspect-ratio: 1/1; background-color: #000; position: absolute; top: 0.18em; left: 0; }

.plan-fig figure { margin: 0; }

.legend > ul li { display: inline-block; margin-right: 10px; font-size: 12px; text-align: left; line-height: 1.28; margin-bottom: 4px; }
.legend > ul li:last-of-type { margin-right: 0; }
.legend > ul li .icon { margin-right: 4px; vertical-align: text-bottom; }
.legend > ul li .icon img { width: auto; height: 8px; }
.legend > ul li .icon.outframe { vertical-align: middle; }
.legend > ul li .icon.outframe img { height: 20px; }

/*----------------------------- contents
-------------------------------*/
.cont-section-container { padding-top: 12rem; }
@media screen and (max-width: 864px) { .cont-section-container { padding-top: 8rem; } }

.cate-mv { text-align: center; margin: 4rem auto; position: relative; }
.cate-mv .cate-ttl { width: 100%; max-width: 1056px; position: absolute; left: 50%; top: -20rem; transform: translateX(-50%); z-index: 2; }
.cate-mv .cate-ttl p { width: calc((465/1056)*100%); max-width: 465px; margin: 0 0 0 auto; }
.cate-mv .image { max-height: 480px; overflow-y: hidden; }
.cate-mv .image .img { height: 100%; }
.cate-mv .image .img img { object-fit: cover; object-position: center top; }
@media screen and (max-width: 1056px) { .cate-mv { margin: 2.4rem auto; }
  .cate-mv .cate-ttl { top: -54%; } }
@media screen and (max-width: 864px) { .cate-mv .cate-ttl { top: -62%; }
  .cate-mv .cate-ttl p { width: calc((465/960)*100%); } }
@media screen and (max-width: 600px) { .cate-mv { margin: 24px auto; }
  .cate-mv .cate-ttl { top: -40%; }
  .cate-mv .cate-ttl p { width: calc((465/744)*100%); } }

.intro { margin-bottom: 4rem; }
@media screen and (max-width: 600px) { .intro { margin-bottom: 24px; } }

.plan-link-btns { --flex-padding: 2.75%; }
.plan-link-btns > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; justify-content: flex-start; align-items: stretch; }
.plan-link-btns > ul div, .plan-link-btns > ul li { min-height: 0%; }
.plan-link-btns > ul li { width: calc((100% - (var(--flex-padding)*2))/3); margin-right: var(--flex-padding); margin-bottom: 2.4rem; }
.plan-link-btns > ul li:nth-of-type(3n), .plan-link-btns > ul li:last-of-type { margin-right: 0; }
.plan-link-btns > ul li .spec { display: grid; grid-template-columns: 27.69230769% 1fr; gap: 0 3%; align-items: stretch; height: 100%; }
.plan-link-btns > ul li .spec .type { grid-row: span 4; border: thin solid #000; padding: 1rem; display: flex; justify-content: center; align-items: center; font-size: clamp(13px, 1.12vw, 1.6rem); transition: .4s all; }
.plan-link-btns > ul li .spec .layout { font-size: clamp(22px, 2vw, 2.4rem); }
.plan-link-btns > ul li .spec .areasize { font-size: clamp(11px, 1.2vw, 1.2rem); margin-bottom: 4px; }
.plan-link-btns > ul li .spec .areasize .em { font-size: 200%; }
.plan-link-btns > ul li .spec .btn { padding: 4px 8px; position: relative; transition: .4s all; display: flex; align-items: center; }
.plan-link-btns > ul li .spec .btn .txt { font-size: clamp(12px, 1.3vw, 1.3rem); text-align: left; line-height: 1.28; color: #fff; }
.plan-link-btns > ul li .spec .btn .txt::before { content: ""; white-space: pre-wrap; }
.plan-link-btns > ul li .spec .btn::before { content: ""; display: block; width: calc((12/222)*32%); aspect-ratio: 12/26; background: url("../images/plan/arrow01.png") center center/contain no-repeat; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.plan-link-btns > ul li:nth-of-type(2) .btn { background-color: #d28444; }
.plan-link-btns > ul li a .spec .btn .txt::before { content: "間取り詳細を見る"; }
.plan-link-btns > ul li a:hover .spec .type { background-color: #45333d; color: #fff; }
.plan-link-btns > ul li a:hover .spec .btn { filter: brightness(120%); }
.plan-link-btns > ul li a.for-entry .spec .btn { background-color: #808080; }
.plan-link-btns > ul li a.for-entry .spec .btn .txt::before { content: "物件エントリー者（アプリ）\A限定公開！"; }
.plan-link-btns > ul li a.for-entry:hover .spec .type { background-color: #8F8F8F; }
@media screen and (max-width: 960px) { .plan-link-btns > ul li { width: calc((100% - var(--flex-padding))/2); }
  .plan-link-btns > ul li:nth-of-type(3n) { margin-right: var(--flex-padding); }
  .plan-link-btns > ul li:nth-of-type(2n) { margin-right: 0; } }
@media screen and (max-width: 600px) { .plan-link-btns > ul li { width: 100%; margin-right: 0 !important; } }

.app-info { background-color: #f0f4f6; padding: 4rem 0; margin-top: 8rem; }
.app-info .frame { border: 2px solid #002F7B; padding: 2.4rem 3.2rem 4rem; }
.app-info .frame .copy { font-size: clamp(24px, 3.2vw, 3.2rem); text-align: center; line-height: 1.36; color: #002F7B; letter-spacing: 0.05em; }
.app-info .frame .copy .icon { display: inline-block; width: 4.8rem; height: 4.8rem; margin-right: 8px; line-height: 1.6; vertical-align: text-bottom; }
.app-info .frame .copy .icon img { width: auto; height: 100%; object-fit: cover; clip-path: inset(0 87.5331565% 0 0); }
.app-info .frame .conversion { margin: 1.6rem auto 0; }
@media screen and (max-width: 864px) { .app-info .frame .copy .icon { width: 4rem; height: 4rem; } }
@media screen and (max-width: 600px) { .app-info .frame { padding: 2.4rem 1.6rem 3.2rem; }
  .app-info .frame .copy .icon { width: 3.2rem; height: 3.2rem; line-height: 1.2; vertical-align: top; } }

.walldoor-wrap { margin-bottom: 8rem; }
.walldoor-wrap .walldoor-column { background-color: #f2edef; padding: 2.4rem 3.2rem 3.2rem; margin-bottom: 5.6rem; display: grid; grid-template-columns: 46% 52%; gap: 0 2%; align-items: flex-end; }
.walldoor-wrap .walldoor-column .image { order: 2; grid-row: span 3; }
.walldoor-wrap .walldoor-column .head { order: 1; font-size: clamp(20px, 1.7vw, 2.4rem); text-align: left; line-height: 1.28; margin-bottom: 12px; }
.walldoor-wrap .walldoor-column .head .en { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; }
.walldoor-wrap .walldoor-column .maincopy { order: 3; font-size: clamp(16px, 1.4vw, 2.4rem); }
.walldoor-wrap .walldoor-column .lead { order: 4; }
.walldoor-wrap .figure-container { display: grid; grid-template-columns: 40% 6% 40%; gap: 0 6%; }
.walldoor-wrap .figure-container .spec { order: 3; grid-column-start: 3; text-align: center; }
.walldoor-wrap .figure-container .spec .type { font-size: clamp(24px, 2.7vw, 3.2rem); padding: 0 1.6rem 0.8rem; border-bottom: thin solid #000; }
.walldoor-wrap .figure-container .spec .layout { font-size: clamp(28px, 3.8vw, 4rem); padding: 0.4rem 1.6rem 0.8rem; border-bottom: thin solid #000; }
.walldoor-wrap .figure-container .spec .areasize { font-size: clamp(14px, 1.2vw, 1.6rem); padding: 0.4rem 1.6rem; border-bottom: thin solid #000; }
.walldoor-wrap .figure-container .spec .areasize .em { font-size: 400%; }
.walldoor-wrap .figure-container .figure .head { font-size: clamp(15px, 1.9vw, 1.8rem); text-align: center; line-height: 1.28; margin-bottom: 1.6rem; }
.walldoor-wrap .figure-container .figure figure { margin: 0; }
.walldoor-wrap .figure-container .figure.wd-close { order: 1; grid-row: span 2; }
.walldoor-wrap .figure-container .figure.wd-open { order: 4; grid-column-start: 3; align-self: flex-end; }
.walldoor-wrap .figure-container .arrow { order: 2; grid-column-start: 2; grid-row-start: 2; align-self: center; }
.walldoor-wrap .figure-container .arrow p { transform: rotate(90deg); width: 80%; margin: 0 auto; }
.walldoor-wrap .figure-container .compass { width: calc((60/656)*100%); max-width: 48px; position: absolute; right: 0; bottom: -3%; }
.walldoor-wrap .figure-container .legend { order: 5; grid-column: span 3; margin-top: 1.6rem; }
@media screen and (max-width: 1024px) { .walldoor-wrap .walldoor-column { align-items: flex-start; }
  .walldoor-wrap .walldoor-column .head { grid-column: span 2; }
  .walldoor-wrap .walldoor-column .maincopy { order: 2; grid-column: span 2; }
  .walldoor-wrap .walldoor-column .lead { order: 3; }
  .walldoor-wrap .walldoor-column .image { order: 4; grid-row: span 1; } }
@media screen and (max-width: 768px) { .walldoor-wrap .walldoor-column .lead { grid-column: span 2; }
  .walldoor-wrap .walldoor-column .image { margin-top: 20px; grid-column: span 2; } }
@media screen and (max-width: 600px) { .walldoor-wrap .walldoor-column { display: block; padding: 16px 20px 20px; margin-bottom: 24px; }
  .walldoor-wrap .figure-container { display: block; }
  .walldoor-wrap .figure-container .spec { margin-bottom: 3rem; }
  .walldoor-wrap .figure-container .arrow p { transform: none; width: calc((56 /656)*100%); margin: 16px auto; }
  .walldoor-wrap .figure-container .compass { bottom: 0; } }

.comfortable-wrap { background-color: #f2edef; padding: 5rem 0 0; }

.comfortable-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.comfortable-list div, .comfortable-list li { min-height: 0%; }
.comfortable-list > li { width: 46%; padding: 1.6rem 0 4rem; margin-bottom: 4rem; border-bottom: thin solid #333; }
.comfortable-list > li.fullwidth { width: 100%; }
.comfortable-list > li:last-of-type { border-bottom: none; }
.comfortable-list > li .head { text-align: left; line-height: 1.44; margin-bottom: 1.6rem; display: flex; align-items: center; }
.comfortable-list > li .head .icon { display: inline-block; height: 56px; margin-right: 0.8rem; }
.comfortable-list > li .head .icon img { width: auto; height: 100%; }
.comfortable-list > li .head .txt { font-size: clamp(22px, 2.9vw, 3rem); text-align: left; line-height: 1.28; color: #7e4f63; flex-grow: 1; }
.comfortable-list > li .images { margin-top: 2.4rem; display: grid; }
.comfortable-list > li .image .name { font-size: clamp(12px, 1vw, 1.3rem); text-align: left; line-height: 1.28; margin-top: 4px; }
.comfortable-list > li .subconts-container { margin-top: 2.4rem; }
.comfortable-list > li .subconts-container .maincopy { font-size: clamp(18px, 2vw, 2rem); }
.comfortable-list > li .subhead { padding: 4px 8px; margin-bottom: 1.6rem; background-color: #7e4f63; }
.comfortable-list > li .subhead .en { font-size: clamp(12px, 1vw, 1.4rem); text-align: left; color: #fff; line-height: 1.28; letter-spacing: 0.05em; }
.comfortable-list #Comf01 .images { grid-template-columns: repeat(2, 1fr); gap: 0.6rem 4.61538462%; }
.comfortable-list #Comf01 .images .image:nth-of-type(1) { grid-column: span 2; margin-bottom: 1rem; }
.comfortable-list #Comf02 .image { margin-bottom: 1.6rem; }
.comfortable-list #Comf02 .lead { margin-bottom: 1.6rem; }
.comfortable-list #Comf02 .fl-r { width: 47.69230769%; float: right; padding-top: 1.2rem; margin-left: 0.6rem; margin-bottom: 0.8rem; }
.comfortable-list #Comf03 .image { margin-top: 2.4rem; }
.comfortable-list #Comf04 .images { grid-template-columns: 39.38461538% 1fr; gap: 0.6rem 4.92307692%; }
.comfortable-list #Comf04 .images .image:nth-of-type(2) { order: 3; }
.comfortable-list #Comf04 .images .image:nth-of-type(3) { order: 2; grid-row: span 2; }
.comfortable-list #Comf05 .storage-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 7%; }
.comfortable-list #Comf05 .storage-wrap .subconts-container:nth-of-type(1) .images { grid-template-columns: repeat(2, 1fr); gap: 0 2.76923077%; }
.comfortable-list #Comf05 .storage-wrap .subconts-container:nth-of-type(2) .images { grid-template-columns: 34.46153846% 34.46153846% 1fr; gap: 0 1.38461538%; }
@media screen and (max-width: 864px) { .comfortable-list > li { width: 47%; } }
@media screen and (max-width: 600px) { .comfortable-list > li { width: 100%; margin-bottom: 16px; }
  .comfortable-list #Comf02 { padding-bottom: 2rem; }
  .comfortable-list #Comf05 .storage-wrap { grid-template-columns: 1fr; } }

@media screen and (max-width: 1056px) { #Variation .cate-ttl { top: -30rem; } }
@media screen and (max-width: 960px) { #Variation .cate-mv .cate-ttl { top: -27rem; } }
@media screen and (max-width: 864px) { #Variation .cate-mv .cate-ttl { top: -23rem; } }
@media screen and (max-width: 520px) { #Variation .cate-mv .cate-ttl { top: -19rem; } }