@charset "UTF-8";
/* ============================================================
   トップページ：PC（1024px以上）
   ============================================================ */

/* ===== メインビジュアル ===== */
.hero img { width: 100%; max-width: 1920px; }

/* ===== 背景ガイドより前面に ===== */
.intro > :not(.bg-guide), .zeh > :not(.bg-guide), .sec > :not(.bg-guide) { position: relative; z-index: 1; }
.intro, .zeh, .sec, .info { overflow: hidden; }   /* 背景の端数（1px）で横スクロールが出ないようにする */

/* ===== コンセプト ===== */
.intro { position: relative; padding: clamp(3.648rem, 5.7vw, 6.84rem) 0 clamp(3.3536rem, 5.24vw, 6.288rem); text-align: center; }
.bg-intro { left: 30.4333%; top: 0; width: 69.5667%; height: 100%; }
.intro__en img { width: 55.0333%; max-width: 1057px; margin: 0 auto; }   /* AUTHENTIC MUSASHINO（Trajan をSVG化） */
.intro__catch { margin-top: clamp(1.2331rem, 1.9267vw, 2.312rem); font-size: clamp(1.28rem, 2vw, 2.4rem); letter-spacing: .7em; text-indent: .7em; }
.intro__txt { margin-top: clamp(0.6613rem, 1.0333vw, 1.24rem); font-size: clamp(0.75rem, 1.0667vw, 1.28rem); line-height: 2.3125; letter-spacing: .05em; }
.intro__addr { display: inline-block; margin-top: clamp(2.4576rem, 3.84vw, 4.608rem); text-align: left; }
.intro__addr-sub { padding-left: 1.567em; font-size: clamp(0.625rem, 0.8vw, 0.96rem); letter-spacing: .1em; }
.intro__addr-main { display: flex; align-items: center; margin-top: clamp(0.4011rem, 0.6267vw, 0.752rem); font-size: clamp(1.28rem, 2vw, 2.4rem); letter-spacing: .2em; white-space: nowrap; }
.intro__x { flex: none; width: clamp(0.841rem, 1.314vw, 1.5768rem); height: clamp(0.841rem, 1.314vw, 1.5768rem); margin: 0 .57em 0 .527em; }

/* ===== 特徴 ===== */
.feat { margin-bottom: clamp(0.4011rem, 0.6267vw, 0.752rem); }
.feat__row { display: grid; grid-template-columns: 24% 21.3333% 24%; justify-content: center; height: clamp(4.2667rem, 6.6667vw, 8rem); background: var(--c-k45); color: #fff; }
.feat__row + .feat__row { margin-top: clamp(0.2133rem, 0.3333vw, 0.4rem); }
.feat__row li { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(0.8533rem, 1.3333vw, 1.6rem); line-height: 1.5; letter-spacing: .1em; }
.feat__row li span { padding-left: .1em; }
.feat__row li + li::before { content: ""; position: absolute; left: 0; top: clamp(0.8533rem, 1.3333vw, 1.6rem); bottom: clamp(0.8533rem, 1.3333vw, 1.6rem); width: 1px; background: #fff; }
.feat__row sup { font-size: clamp(0.4979rem, 0.778vw, 0.9336rem); vertical-align: .55em; line-height: 0; letter-spacing: 0; }

/* ===== ZEH帯 ===== */
.zeh { position: relative; height: clamp(7.744rem, 12.1vw, 14.52rem); color: #fff; }
.bg-zeh { inset: 0; }
.is-bg-guide .bg-zeh { background-color: rgba(0, 0, 0, .55); }   /* ガイド表示中のみ：白文字用の仮の下地 */
.zeh__txt { position: absolute !important; left: 30.2133%; top: clamp(2.1888rem, 3.42vw, 4.104rem); white-space: nowrap; }
.zeh__l1 { padding-left: .65em; font-size: clamp(0.8533rem, 1.3333vw, 1.6rem); letter-spacing: .2em; }
.zeh__l2 { margin-top: clamp(0.704rem, 1.1vw, 1.32rem); font-size: clamp(1.1093rem, 1.7333vw, 2.08rem); letter-spacing: .2em; }
.zeh__cs { position: absolute !important; left: 61.22%; top: clamp(5.7685rem, 9.0133vw, 10.816rem); display: flex; align-items: baseline; font-family: var(--font-en); font-size: clamp(0.8316rem, 1.2993vw, 1.5592rem); letter-spacing: .15em; white-space: nowrap; }
.zeh__cs svg { width: clamp(6.429rem, 10.0453vw, 12.0544rem); height: clamp(0.3682rem, 0.5753vw, 0.6904rem); margin-left: .58em; }

/* ===== information（トップのみ：下余白・背景） ===== */
.info { padding-bottom: clamp(3.7333rem, 5.8333vw, 7rem); }
.bg-info { left: 30.4333%; top: 0; width: 69.5667%; height: 100%; }

/* ===== 共通：写真＋テキストの2カラム ===== */
.sec { position: relative; display: grid; align-items: start; }
.photos { display: grid; row-gap: clamp(0.8533rem, 1.3333vw, 1.6rem); }
.photos img { width: 100%; max-width: 470px; }
.photos figcaption { margin-top: clamp(0.4139rem, 0.6467vw, 0.776rem); font-size: clamp(0.625rem, 0.9333vw, 1.12rem); letter-spacing: .05em; white-space: nowrap; }
.txt__en { font-family: var(--font-en); font-size: clamp(0.768rem, 1.2vw, 1.44rem); letter-spacing: .03em; }
.txt__h2 { margin-top: clamp(1.0837rem, 1.6933vw, 2.032rem); font-size: clamp(1.4933rem, 2.3333vw, 2.8rem); font-weight: 400; letter-spacing: .5em; white-space: nowrap; }
.txt__lead { margin-top: clamp(2.2827rem, 3.5667vw, 4.28rem); font-size: clamp(0.9813rem, 1.5333vw, 1.84rem); line-height: 2; letter-spacing: .2em; white-space: nowrap; }
.txt__body { margin-top: clamp(0.4864rem, 0.76vw, 0.912rem); font-size: clamp(0.75rem, 1.0667vw, 1.28rem); line-height: 2.375; letter-spacing: .05em; text-align: justify; }
.txt__body--hang { text-indent: -.5em; }
.hang { margin-left: -.5em; }
.txt--r .txt__en, .txt--r .txt__h2 { padding-left: 1.4545%; }
.txt--l .txt__en, .txt--l .txt__h2 { padding-left: 1.5441%; }

/* ===== Coming Soon（未制作のためリンクなし） ===== */
.cs { display: flex; align-items: center; width: 43.6364%; height: clamp(1.7067rem, 2.6667vw, 3.2rem); padding-left: 3.6364%; background: var(--c-k45); color: #fff; font-family: var(--font-en); font-size: clamp(0.8316rem, 1.2993vw, 1.5592rem); letter-spacing: .15em; white-space: nowrap; }
.cs__arrow { flex: none; width: clamp(2.2515rem, 3.518vw, 4.2216rem); height: clamp(0.2812rem, 0.4393vw, 0.5272rem); margin-left: .39em; }

/* ===== 都心直結 ===== */
.sec--access { grid-template-columns: 49.5933% 7.0733% 36.6667% 1fr; background: var(--c-bg1); }
.bg-access { left: 37.0667%; top: clamp(2.6112rem, 4.08vw, 4.896rem); width: 62.9333%; height: clamp(33.2672rem, 51.98vw, 62.376rem); }
.sec--access .photos { grid-column: 1; grid-template-columns: 49.1598% 49.2002%; column-gap: 1.64%; padding: clamp(3.4944rem, 5.46vw, 6.552rem) 0 clamp(2.4875rem, 3.8867vw, 4.664rem); }
.sec--access .photos figure:nth-child(odd) figcaption { padding-left: 5.469%; }
.sec--access .txt { grid-column: 3; padding-top: clamp(3.4816rem, 5.44vw, 6.528rem); }
.sec--access .cs { margin-top: clamp(6.3189rem, 9.8733vw, 11.848rem); }

/* ===== 路線図 ===== */
.route { padding: clamp(3.4816rem, 5.44vw, 6.528rem) 0 clamp(4.1685rem, 6.5133vw, 7.816rem) 21.4067%; }
.route img { width: 71.9654%; max-width: 1086px; }

/* ===== 吉祥寺近接 ===== */
.sec--kichijoji { grid-template-columns: 6.6667% 36.7% 7.04% 49.62%; background: var(--c-bg1); }
.bg-kichijoji { left: 0; top: clamp(2.7648rem, 4.32vw, 5.184rem); width: 72.5867%; height: clamp(33.1051rem, 51.7267vw, 62.072rem); }
.sec--kichijoji .txt { grid-column: 2; padding-top: clamp(2.9184rem, 4.56vw, 5.472rem); }
.sec--kichijoji .txt__body { margin-top: clamp(0.96rem, 1.5vw, 1.8rem); }
.sec--kichijoji .cs { width: 43.5967%; padding-left: 3.6331%; margin-top: clamp(6.3189rem, 9.8733vw, 11.848rem); }
.sec--kichijoji .photos { grid-column: 4; grid-template-columns: 49.1872% 49.1872%; column-gap: 1.6391%; padding: clamp(2.9312rem, 4.58vw, 5.496rem) 0 clamp(3.0507rem, 4.7667vw, 5.72rem); }

/* ===== 武蔵野中枢 ===== */
.sec--musashino { grid-template-columns: 49.6067% 7.06% 36.6667% 1fr; }
.bg-musashino { left: 39.82%; top: clamp(10.2827rem, 16.0667vw, 19.28rem); right: 0; height: clamp(25.5829rem, 39.9733vw, 47.968rem); }
.sec--musashino .photos { grid-column: 1; grid-template-columns: 49.1197% 49.1735%; column-gap: 1.6664%; padding: clamp(3.4987rem, 5.4667vw, 6.56rem) 0 clamp(2.4832rem, 3.88vw, 4.656rem); }
.sec--musashino .photos figure:nth-child(odd) figcaption { padding-left: 5.472%; }
.sec--musashino .photos figcaption { margin-top: clamp(0.4181rem, 0.6533vw, 0.784rem); }
.sec--musashino .txt { grid-column: 3; padding-top: clamp(3.4816rem, 5.44vw, 6.528rem); }
.sec--musashino .cs { margin-top: clamp(4.6933rem, 7.3333vw, 8.8rem); }

/* ===== 次代品質 ===== */
.sec--sustain { grid-template-columns: 6.6667% 36.7% 7.0333% 49.6267%; background: var(--c-bg2); }
.sec--sustain .txt { grid-column: 2; padding-top: clamp(2.8885rem, 4.5133vw, 5.416rem); }
.sec--sustain .txt__en { font-size: clamp(0.75rem, 1.134vw, 1.3608rem); }
.sec--sustain .txt__h2 { margin-top: clamp(1.1563rem, 1.8067vw, 2.168rem); }
.sec--sustain .txt__body { margin-top: clamp(0.6571rem, 1.0267vw, 1.232rem); }
.sustain__logo { width: 70.5359%; max-width: 497px; margin: clamp(1.5147rem, 2.3667vw, 2.84rem) 0 0 0.4178%; }
.sec--sustain .cs { width: 43.5967%; padding-left: 3.6331%; margin-top: clamp(2.3339rem, 3.6467vw, 4.376rem); }
.merit { grid-column: 4; display: grid; grid-template-columns: 49.2074% 49.2074%; column-gap: 1.5314%; row-gap: clamp(1.1947rem, 1.8667vw, 2.24rem); padding: clamp(2.9355rem, 4.5867vw, 5.504rem) 0 clamp(2.3125rem, 3.6133vw, 4.336rem); }
.merit__item { text-align: center; }
.merit__item img { width: 100%; max-width: 468px; }
.merit__ttl { margin-top: clamp(0.7253rem, 1.1333vw, 1.36rem); font-size: clamp(0.9813rem, 1.5333vw, 1.84rem); font-weight: 400; letter-spacing: .3em; text-indent: .3em; white-space: nowrap; }
.merit__ttl::after { content: ""; display: block; width: calc(var(--w) / 366.3 * 100%); height: 1px; margin: clamp(0.4096rem, 0.64vw, 0.768rem) auto 0; background: var(--c-text); }
.merit__txt { margin-top: clamp(0.3371rem, 0.5267vw, 0.632rem); font-size: clamp(0.6875rem, 1.0667vw, 1.28rem); line-height: 1.5625; letter-spacing: .05em; white-space: nowrap; }

/* ===== 注記 ===== */
.notes { width: 65.3333%; margin: clamp(7.5648rem, 11.82vw, 14.184rem) auto clamp(3.136rem, 4.9vw, 5.88rem); font-size: clamp(0.625rem, 0.8vw, 0.96rem); line-height: 1.3333; letter-spacing: .05em; text-align: justify; }

/* ===== 背景画像（仮）：PNGから文字ごと切り出したもの
   差し替えは img/bg/ 内の同じファイル名・同じサイズで上書き ===== */
.bg-intro     { background-image: url(../img/bg/bg_intro.webp); }      /* 1336×601px */
.bg-zeh       { background-image: url(../img/bg/bg_zeh.webp); }        /* 1920×232px */
.bg-info      { background-image: url(../img/bg/bg_info.webp); }       /* 1336×513px */
.bg-access    { background-image: url(../img/bg/bg_access.webp); }     /* 1208×998px */
.bg-kichijoji { background-image: url(../img/bg/bg_kichijoji.webp); }  /* 1394×993px */
.bg-musashino { background-image: url(../img/bg/bg_musashino.webp); }  /* 1156×768px */