@charset "UTF-8";
/* ============================================================
   トップページ：SP（1023px以下／基準幅390px）
   ============================================================ */

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

/* ===== 背景ガイドより前面に ===== */
.intro, .zeh, .sec { position: relative; }
.info { position: relative; }
.intro > :not(.bg-guide), .zeh > :not(.bg-guide), .sec > :not(.bg-guide) { position: relative; z-index: 1; }

/* ===== コンセプト ===== */
.intro { padding: clamp(2.4615rem, 12.3077vw, 4.5rem) 5.1282% clamp(2.6667rem, 13.3333vw, 4.875rem); text-align: center; }
.intro__en img { width: 78%; max-width: 1057px; margin: 0 auto; }
.intro__catch { margin-top: clamp(0.8205rem, 4.1026vw, 1.5rem); font-size: clamp(0.9231rem, 4.6154vw, 1.6875rem); letter-spacing: .4em; text-indent: .4em; }
.intro__txt { margin-top: clamp(0.9231rem, 4.6154vw, 1.6875rem); font-size: clamp(0.6667rem, 3.3333vw, 1.2188rem); line-height: 2; letter-spacing: .05em; text-align: left; }
.intro__txt br { display: none; }
.intro__addr { display: inline-block; margin-top: clamp(1.641rem, 8.2051vw, 3rem); text-align: left; }
.intro__addr-sub { padding-left: .9em; font-size: clamp(0.5128rem, 2.5641vw, 0.9375rem); letter-spacing: .1em; }
.intro__addr-main { display: flex; align-items: center; margin-top: clamp(0.4103rem, 2.0513vw, 0.75rem); font-size: clamp(0.9231rem, 4.6154vw, 1.6875rem); letter-spacing: .2em; white-space: nowrap; }
.intro__x { flex: none; width: clamp(0.6154rem, 3.0769vw, 1.125rem); height: clamp(0.6154rem, 3.0769vw, 1.125rem); margin: 0 .55em 0 .45em; }

/* ===== 特徴 ===== */
.feat { margin-bottom: clamp(0.3077rem, 1.5385vw, 0.5625rem); background: var(--c-k45); color: #fff; }
.feat__row { padding: 0 5.1282%; }
.feat__row li { position: relative; padding: clamp(0.7179rem, 3.5897vw, 1.3125rem) 0; font-size: clamp(0.7179rem, 3.5897vw, 1.3125rem); line-height: 1.5; letter-spacing: .1em; text-align: center; }
.feat__row li + li::before, .feat__row + .feat__row li:first-child::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 1px; background: #fff; }
.feat__row sup { font-size: clamp(0.4103rem, 2.0513vw, 0.75rem); vertical-align: .55em; line-height: 0; }

/* ===== ZEH帯 ===== */
.zeh { padding: clamp(1.8462rem, 9.2308vw, 3.375rem) 5.1282%; color: #fff; text-align: center; }
.is-bg-guide .bg-zeh { background-color: rgba(0, 0, 0, .55); }   /* ガイド表示中のみ：白文字用の仮の下地 */
.zeh__l1 { font-size: clamp(0.7179rem, 3.5897vw, 1.3125rem); letter-spacing: .2em; }
.zeh__l2 { margin-top: clamp(0.6154rem, 3.0769vw, 1.125rem); font-size: clamp(0.8205rem, 4.1026vw, 1.5rem); line-height: 1.6; letter-spacing: .1em; }
.zeh__txt, .zeh__cs { position: relative !important; }
.zeh__cs { display: flex; align-items: baseline; justify-content: center; margin-top: clamp(0.8205rem, 4.1026vw, 1.5rem); font-family: var(--font-en); font-size: clamp(0.7179rem, 3.5897vw, 1.3125rem); letter-spacing: .15em; }
.zeh__cs svg { width: clamp(4.1026rem, 20.5128vw, 7.5rem); height: clamp(0.2564rem, 1.2821vw, 0.4688rem); margin-left: .6em; }

/* ===== information（トップのみ） ===== */
.info { padding-bottom: clamp(2.8718rem, 14.359vw, 5.25rem); }

/* ===== 共通：写真＋テキスト ===== */
.sec { display: flex; flex-direction: column; padding: clamp(2.4615rem, 12.3077vw, 4.5rem) 5.1282%; }
.sec--access, .sec--kichijoji { background: var(--c-bg1); }
.sec--sustain { background: var(--c-bg2); }
.sec .txt { order: 1; }
.sec .photos, .sec .merit { order: 2; margin-top: clamp(1.641rem, 8.2051vw, 3rem); }
.photos, .merit { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.85%; row-gap: clamp(0.8205rem, 4.1026vw, 1.5rem); }
.photos img { width: 100%; max-width: 470px; }
.photos figcaption { margin-top: clamp(0.3077rem, 1.5385vw, 0.5625rem); font-size: clamp(0.5128rem, 2.5641vw, 0.9375rem); line-height: 1.5; letter-spacing: .05em; }
.txt__en { font-family: var(--font-en); font-size: clamp(0.7179rem, 3.5897vw, 1.3125rem); letter-spacing: .03em; }
.txt__h2 { margin-top: clamp(0.5128rem, 2.5641vw, 0.9375rem); font-size: clamp(1.2308rem, 6.1538vw, 2.25rem); font-weight: 400; letter-spacing: .4em; }
.txt__lead { margin-top: clamp(1.2308rem, 6.1538vw, 2.25rem); font-size: clamp(0.8205rem, 4.1026vw, 1.5rem); line-height: 1.9; letter-spacing: .1em; }
.txt__body { margin-top: clamp(0.7179rem, 3.5897vw, 1.3125rem); font-size: clamp(0.6667rem, 3.3333vw, 1.2188rem); line-height: 2; letter-spacing: .05em; text-align: justify; }
.txt__body--hang { text-indent: -.5em; }
.hang { margin-left: -.5em; }
.cs { display: flex; align-items: center; width: 57%; max-width: 240px; height: clamp(1.8462rem, 9.2308vw, 3.375rem); margin-top: clamp(1.4359rem, 7.1795vw, 2.625rem); padding-left: 4.1026%; background: var(--c-k45); color: #fff; font-family: var(--font-en); font-size: clamp(0.7692rem, 3.8462vw, 1.4062rem); letter-spacing: .15em; white-space: nowrap; }
.cs__arrow { flex: none; width: clamp(2.0513rem, 10.2564vw, 3.75rem); height: clamp(0.2564rem, 1.2821vw, 0.4688rem); margin-left: .4em; }

/* ===== 路線図（幅100%） ===== */
.route { padding: clamp(1.8462rem, 9.2308vw, 3.375rem) 4.1026%; }
.route img { width: 100%; max-width: 1086px; }

/* ===== 次代品質 ===== */
.sustain__logo { display: block; width: 61%; max-width: 497px; margin: clamp(1.2308rem, 6.1538vw, 2.25rem) auto 0; }
.sec--sustain .cs { margin-left: auto; margin-right: auto; }
.merit { row-gap: clamp(1.4359rem, 7.1795vw, 2.625rem); }
.merit__item { text-align: center; }
.merit__item img { width: 100%; max-width: 468px; }
.merit__ttl { margin-top: clamp(0.6154rem, 3.0769vw, 1.125rem); font-size: clamp(0.7692rem, 3.8462vw, 1.4062rem); font-weight: 400; letter-spacing: .3em; text-indent: .3em; }
.merit__ttl::after { content: ""; display: block; width: 60%; height: 1px; margin: clamp(0.4103rem, 2.0513vw, 0.75rem) auto 0; background: var(--c-text); }
.merit__txt { margin-top: clamp(0.4103rem, 2.0513vw, 0.75rem); font-size: clamp(0.5641rem, 2.8205vw, 1.0312rem); line-height: 1.7; letter-spacing: .05em; }
.merit__txt br { display: none; }

/* ===== 注記 ===== */
.notes { margin: clamp(2.0513rem, 10.2564vw, 3.75rem) 5.1282%; font-size: clamp(0.5128rem, 2.5641vw, 0.9375rem); line-height: 1.6; letter-spacing: .05em; text-align: justify; }

/* ===== 背景画像：縦に伸ばさず、下から表示。上が足りない分はセクションの背景色へグラデーション ===== */
.bg-guide { background-size: 100% 100%, 100% auto; background-position: 0 0, center bottom; }
.bg-intro     { background-image: url(../img/bg/bg_intro-s.webp); background-size: auto 100%; background-position: right top; }   /* スマホ用の縦長画像（1000×1200px） */
.bg-info      { background-image: url(../img/bg/bg_info-s.webp); background-size: auto 100%; background-position: right top; }    /* スマホ用の縦長画像（1000×1200px） */
.bg-access    { background-image: linear-gradient(var(--c-bg1) 0, rgba(243, 244, 244, 0) 40%), url(../img/bg/bg_access.webp); }
.bg-kichijoji { background-image: linear-gradient(var(--c-bg1) 0, rgba(243, 244, 244, 0) 40%), url(../img/bg/bg_kichijoji.webp); }
.bg-musashino { background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 40%), url(../img/bg/bg_musashino.webp); }
.bg-zeh       { background-image: url(../img/bg/bg_zeh.webp); background-size: auto 100%; background-position: center; }   /* 帯は高さ基準で中央 */