@charset "UTF-8";

/* =========================================================
   Sato住設工業 - common.css
   宮崎県宮崎市の水道・水廻り工事
   ========================================================= */

:root {
    /* ================================
       カラー
       ヒアリングのカラー案（水色ベース＋黄/橙/茶アクセント）より
    ================================ */
    --color-primary: #4788B2;
    /* メインカラー（くすみ青） */
    --color-primary-dark: #3F9DC2;
    /* メインカラー（暗め・#60BBDEを締めた値） */
    --color-primary-light: #80D6E7;
    /* メインカラー（明るめ・アクア） */
    --color-secondary: #98B8C1;
    /* サブカラー（くすみ水色） */
    --color-teal-deep: #46827F;
    /* くすみ青緑（ヘッダーのクイックボタン・ハンバーガー用） */
    --color-teal-deep-hover: #3F6A67;
    /* 上を一段暗くした値。青緑塗りボタンのホバー用（反転させず暗くする） */
    --color-accent: #ED9C2B;
    /* アクセント（オレンジ・CTA向き） */
    --color-accent-soft: #FAEAA2;
    /* アクセント（やわらかイエロー） */
    --color-brown: #966036;
    /* 引き締め用ブラウン */
    --color-gold-deep: #B6A97B;
    /* ゴールド（ヘッダー電話ボタンの枠線） */
    --color-cream-white: #FDF9F0;
    /* クリーム白（事業内容の写真の縁取り・番号バッジの枠線） */

    --color-sky-pale: #D6F1FC;
    /* 淡い水色（セクション背景） */
    --color-sky-soft: #C4E9F8;
    /* 淡い水色（sky-paleとprimary-lightの中間・FV上端用） */

    --color-text: #3a3a3a;
    /* 本文テキスト */
    --color-title: #3a3a3a;
    /* 見出しテキスト */
    --color-text-light: #5a5a5a;
    /* 補足・薄めテキスト */
    --color-bg: #FAFAFA;
    /* ページ背景（オフホワイト） */
    --color-bg-light: #F0F8FB;
    /* セクション背景（淡い水色寄りの白） */
    --color-bg-cream: #FEF9E3;
    /* セクション背景（薄い黄色・accent-softを白で薄めた値） */
    --color-bg-sky: #D6F1FC;
    /* セクション背景（淡い水色） */
    --color-border: #E4E7EB;
    /* ボーダー（ライトグレー） */
    --color-white: #FFFFFF;
    --color-white-hover: #F0F0F0;
    /* 白を一段暗くした値。白抜きボタンのホバー用（反転させず暗くする） */

    --color-footer-text: #6a6a6a;
    /* フッター白背景内のデフォルト文字色 */

    /* ================================
       フォント
       本文・見出しとも丸ゴシック（Zen Maru Gothic）で統一。
       ※ 読み込みは 500/700。本文は 500、見出し・強調は 700。
       ※ 600 は存在しない（指定しても 700 で代替される）。
    ================================ */
    --font-family: 'Zen Maru Gothic', sans-serif;
    /* 本文 */
    --font-heading: 'Zen Maru Gothic', sans-serif;
    /* 見出し */
    --font-en: 'Poppins', sans-serif;
    /* 英字装飾（仮） */

    --body-font-size-sp: 1.1rem;
    --body-font-size-pc: clamp(1.1rem, 2vw, 1.15rem);
    --body-line-height-sp: 1.8;
    --body-line-height-pc: 1.9;
    --body-letter-spacing: 0.05em;

    /* ================================
       角丸（ポップ・親しみ重視でやや大きめ）
    ================================ */
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    /* 丸ボタン・タグ用 */

    /* ================================
       落ち影
    ================================ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);

    /* ================================
       トランジション（基本はこれを使う）
       ※ 通常のリンク/ホバー/色変化はこの変数を使い、
         まとめてここで調整できるようにする。
    ================================ */
    --transition: 0.3s ease;

    /* ================================
       スペーシング
    ================================ */
    --spacing-xxs: 0.5rem;
    --spacing-xs: 0.75rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 5.5rem;
    --spacing-3xl: 8rem;

    /* ================================
       セクション幅
    ================================ */
    --section-width-sm: 576px;
    --section-width-sm-plus: 640px;
    --section-width-md-sm: 720px;
    --section-width-md: 768px;
    --section-width-narrow: 880px;
    --section-width-lg: 1024px;
    --section-width-xl: 1200px;

    /* ================================
       共通背景の水滴パターン
       bg-drops.svg（viewBox 240×240）を何px角でリピートさせるか。
       値を大きくするほど水滴・円が大きく、間隔も広くなる。
       ※ モバイルメニュー（.mobile-menu__drops）は別SVG（bg-drops-menu.svg）・
         別サイズ（--menu-drops-size）。ここを変えても影響しない。 */
    --bg-drops-size: 360px;

    /* ================================
       共通背景の水色グラデーション（ページ全高・上→下へ濃く）
       ※ パレットの --color-* とは切り離す。
         あちらはボタン・カード等でも使っているため、
         背景のつもりで変えると他所に波及する。
    ================================ */
    --bg-grad-top: #93D2E2;
    --bg-grad-mid: #6FBBD0;
    --bg-grad-bottom: #43899E;

    /* フッター背景。グラデーションの下端（--bg-grad-bottom）を
       もう一段深めた値。背景がそのまま下まで続いて
       フッターで落ち着く、という流れにする。
       ※ 波線ディバイダー（.wave-divider--footer）は
         フッターの背景色そのものを描くので、必ずこの値と揃える。 */
    --color-footer-bg: #3A7688;

    /* ================================
       水滴の濃さ（ページ上端 → 下端）
       背景のグラデーションが下へ行くほど濃くなるため、
       白い水滴が下で目立ちすぎるのを押さえる。
    ================================ */
    --drops-opacity-top: 0.7;
    --drops-opacity-bottom: 0.35;

    /* ================================
       テクスチャ（背景3層目）
       size    : タイルの大きさ。baseFrequency と二重に効くので、
                 見かけのムラの大きさは片方だけ動かす方が混乱しない
       opacity : テクスチャの強さ
    ================================ */
    --grain-size: 420px;
    --grain-opacity: 0.2;

    /* ================================
       コンテンツ幅の水滴フェード（1200px以上のみ）
       コンテンツ幅に入ると、端から中にかけて水滴パターンが
       フェードアウトして消える（中央は水色グラデーションのみになる）。

       width : 水滴を抜く帯の幅（＝コンテンツ幅）
       ramp  : 帯の端から内側へ、何pxかけて消し切るか
               （大きいほどじわっと消える）
    ================================ */
    --content-fade-width: 1024px;
    --content-fade-ramp: 280px;

    /* ================================
       下部固定タブ（〜767px）
       高さを変数化し、フッター下余白と共有
    ================================ */
    --fixed-bar-height: 4rem;

    /* ================================
       上部固定フレームの高さ
       左上のロゴフレーム（.header-frame）と
       右上のボタンフレーム（.header-bar）で共有する。
    ================================ */
    --header-bar-height: 80px;

    /* ================================
       フッター上端の波線ディバイダーの高さ
       ※ .wave-divider--footer が参照する。
         直上の .contact-cta はこの分だけ下パディングを加算し、
         波がコンテンツにかぶらないようにする。
    ================================ */
    --wave-divider-footer-height: 20px;
}

@media (min-width: 768px) {
    :root {
        --header-bar-height: 92px;
        --wave-divider-footer-height: 28px;
    }
}

@media (min-width: 1024px) {
    :root {
        --wave-divider-footer-height: 36px;
    }
}

@media (min-width: 1200px) {
    :root {
        --header-bar-height: 108px;
    }
}

/* =========================================================
   リセット / ベーススタイル
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    /* body の背景が canvas へ伝播するのを止める。
       伝播すると background-size:100% の基準が html の高さになり、
       ページ全高のグラデーションが成立しなくなる。 */
    background-color: var(--bg-grad-top);
}

/* Chrome のスクロール復元による初回表示ずれを防ぐ */
html:not(.js-ready) {
    scroll-behavior: auto;
}

/* 375px未満：375px幅でレイアウトして縮小表示
   （メニュー/オーバーレイの fixed 補正はファイル末尾で行う―
   ― .mobile-menu 本体定義より後に置かないと height:100dvh に上書きされるため） */
@media (max-width: 374px) {
    html {
        width: 375px;
        transform-origin: top left;
        transform: scale(calc(100vw / 375));
    }
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--body-font-size-sp);
    font-weight: 500;
    color: var(--color-text);
    line-height: var(--body-line-height-sp);
    letter-spacing: var(--body-letter-spacing);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;

    /* =========================================
       共通背景（全ページ）
       ここでは奥の水色グラデーション（ページ全高・上から下へ濃く）だけを持ち、
       手前の水滴パターンは body::before に分離する。
       → 背景レイヤーは個別に mask できないため、
         「水滴だけをコンテンツ幅でフェードアウトさせる」には分ける必要がある。

       ※ position: relative / z-index: 0 は body に重ね合わせコンテキストを作るため。
         これがないと ::before（z-index:-1）が body の背景より後ろに回り、
         水滴がグラデーションに隔されて見えなくなる。
       ※ セクション個別の背景色は廃止し、この2層で全ページを受ける。
       ※ 固定（fixed）にしないのは、「上から下にかけて濃くなる」には
         グラデーションがページ全高を張る必要があり、
         ビューポート基準の固定とは両立しないため。
       ========================================= */
    position: relative;
    z-index: 0;
    background-color: var(--bg-grad-top);
    background-image: linear-gradient(180deg,
            var(--bg-grad-top) 0%,
            var(--bg-grad-mid) 45%,
            var(--bg-grad-bottom) 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
}

/* 水滴パターン（ページ全面）。
   グラデーション（body の背景）の上、コンテンツの下に敷く。 */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url('../images/bg-drops.svg');
    background-repeat: repeat;
    background-size: var(--bg-drops-size) var(--bg-drops-size);
    background-position: center top;

    /* 縦マスク：下へ行くほど水滴を薄くする。
       ※ 1200px以上ではこれと横マスクを掛け合わせる（下の @media 参照）。 */
    --drops-mask-v: linear-gradient(to bottom,
            rgba(0, 0, 0, var(--drops-opacity-top)) 0%,
            rgba(0, 0, 0, var(--drops-opacity-bottom)) 100%);

    -webkit-mask-image: var(--drops-mask-v);
    mask-image: var(--drops-mask-v);
}

/* テクスチャ（背景3層目・雲状のにじみ）。

   SVGの feTurbulence で生成するので画像ファイルは不要。
     type          ：turbulence ＝雲・煩状のにじみ（fractalNoise だと均一な砂目）
     baseFrequency ：にじみの大きさ（小さいほど大きいムラになる）
     numOctaves    ：ムラの複雑さ。ここが素直に計算量に効く
     stitchTiles   ：タイルの継ぎ目を揃えてシームレスにリピートさせる
     feColorMatrix ：feTurbulence は RGB 各チャンネルにノイズが入り
                     そのままだと色ノイズになるので、彩度を落としてグレーにする

   ※ 生成されるのは背景画像なので、ブラウザが初回に一度ラスタライズしたら
     あとはただのビットマップとして扱われる（スクロールで再計算されない）。
   ※ baseFrequency が低い（＝にじみが大きい）ので、タイルは大きめに取る。
     小さいタイルだと模様が収まりきらず、繰り返しが見えてしまう。
   ※ ::before（水滴）と同じ z-index:-1 だが、::after の方が後に描かれるため
     テクスチャは水滴の上に乗る（＝グラデーションも水滴もまとめて揺らぐ）。
   ※ mix-blend-mode: overlay にすることで、白っぽく覆わずに
     下地の明暗を揺らすだけにする。 */
body::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23grain)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: var(--grain-size) var(--grain-size);
    opacity: var(--grain-opacity);
    mix-blend-mode: overlay;
}

@media (min-width: 768px) {
    body {
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
    }
}

/* 1200px以上：コンテンツ幅（--content-fade-width）の帯だけ水滴を抜く。
   帯の端ではまだ見えていて、内側へ --content-fade-ramp かけて消える。

   ※ マスクの % は ::before（＝ページ全幅）基準なので、50% が画面中央になる。
   ※ 途中に段階を刻んでいるのは、不透明度をカーブさせるため。
     2点だけの linear-gradient だと直線的に落ち、
     ランプの始点と終点が折れ線として見えて「きっぱり」感が出る。
   ※ グラデーションは変数に退避して -webkit- と共有する（長いため）。 */
@media (min-width: 1200px) {
    body::before {
        --fade-l: calc(50% - var(--content-fade-width) / 2);
        --fade-r: calc(50% + var(--content-fade-width) / 2);
        --drops-mask-h: linear-gradient(to right,
                rgba(0, 0, 0, 1) 0,
                rgba(0, 0, 0, 1) var(--fade-l),
                rgba(0, 0, 0, 0.9) calc(var(--fade-l) + var(--content-fade-ramp) * 0.18),
                rgba(0, 0, 0, 0.68) calc(var(--fade-l) + var(--content-fade-ramp) * 0.36),
                rgba(0, 0, 0, 0.4) calc(var(--fade-l) + var(--content-fade-ramp) * 0.54),
                rgba(0, 0, 0, 0.16) calc(var(--fade-l) + var(--content-fade-ramp) * 0.72),
                rgba(0, 0, 0, 0.04) calc(var(--fade-l) + var(--content-fade-ramp) * 0.88),
                rgba(0, 0, 0, 0) calc(var(--fade-l) + var(--content-fade-ramp)),
                rgba(0, 0, 0, 0) calc(var(--fade-r) - var(--content-fade-ramp)),
                rgba(0, 0, 0, 0.04) calc(var(--fade-r) - var(--content-fade-ramp) * 0.88),
                rgba(0, 0, 0, 0.16) calc(var(--fade-r) - var(--content-fade-ramp) * 0.72),
                rgba(0, 0, 0, 0.4) calc(var(--fade-r) - var(--content-fade-ramp) * 0.54),
                rgba(0, 0, 0, 0.68) calc(var(--fade-r) - var(--content-fade-ramp) * 0.36),
                rgba(0, 0, 0, 0.9) calc(var(--fade-r) - var(--content-fade-ramp) * 0.18),
                rgba(0, 0, 0, 1) var(--fade-r),
                rgba(0, 0, 0, 1) 100%);

        /* 横（コンテンツ幅の抜き）と 縦（下へ行くほど薄く）を2枚重ね、
           intersect で掛け合わせる（既定の add だと足し算になってしまう）。
           ※ -webkit-mask-composite は旧規格の別キーワード。source-in が intersect 相当。 */
        -webkit-mask-image: var(--drops-mask-h), var(--drops-mask-v);
        mask-image: var(--drops-mask-h), var(--drops-mask-v);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
}

/* JS側からクラスを付け外しする状態クラス（メニュー開閉時など） */
body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
    margin: 0;
}

button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* =========================================================
   LAYOUT
   ========================================================= */

.l-container {
    width: 100%;
    max-width: var(--section-width-xl);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.section {
    padding-block: 3rem;
    padding-inline: 1.25rem;
}

/* .section 直下の .l-container は横パディングを打ち消し（二重防止） */
.section>.l-container {
    padding-inline: 0;
}

@media (min-width: 576px) {
    .section {
        padding-block: 3.5rem;
        padding-inline: 2rem;
    }
}

@media (min-width: 768px) {
    .section {
        padding-inline: 3rem;
    }
}

@media (min-width: 1024px) {
    .section {
        padding-block: 4rem;
        padding-inline: 4rem;
    }
}

@media (min-width: 1200px) {
    .section {
        padding-block: 5rem;
    }
}

@media (min-width: 1440px) {
    .section {
        padding-block: 6rem;
    }
}

/* =========================================================
   共通キーワード強調
   本文中の重要語句を強調するインラインクラス
   .keyword           ：ベース（メインカラーの太字）
   .keyword--wavy     ：波線アンダーライン付き
   .keyword--marker   ：下半分マーカー風
   ========================================================= */

.keyword {
    color: var(--color-primary-dark);
    font-weight: 700;
    transition: color var(--transition);
}

/* 波線アンダーライン */
.keyword--wavy {
    text-decoration: underline wavy var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    text-decoration-skip-ink: none;
}

/* 下半分マーカー風（文字色は本文のまま） */
.keyword--marker {
    color: inherit;
    background: linear-gradient(transparent 60%, var(--color-accent-soft) 60%);
    padding-inline: 0.1em;
}

/* =========================================================
   共通：一覧ページの件数表示
   例：全 12 件
   ========================================================= */
.list-count {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.list-count__num {
    font-family: var(--font-en);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-inline: 0.25rem;
}

/* 補足行（例：（最新4件表示中））。件数の下の段に回す */
.list-count__note {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* =========================================================
   共通：施工事例カード
   トップページ（home-works）と一覧ページ（works.php）で共用。
   カテゴリ0（ビフォーアフター）は .works-ba で画像を2枚横並びにする。

   画像領域の比率は --works-card-ratio で一元管理。
   通常カードとビフォーアフターカードの両方がこの値を参照するため、
   ここを変えるだけで両方の高さが揃ったまま変わる。
   例：4 / 3（高め）→ 3 / 2 → 16 / 9（低め）

   画像の下辺は波形に切り抜く（--works-wave-mask）。
   セクション間の .wave-divider と同じ「ゆったり2山」の形。
   ※ マスクは上部（平らな部分）と下部（波）の2枚重ね。
     波の高さは --works-wave-height で調整する。
   ========================================================= */

.works-card {
    --works-card-ratio: 3 / 2;
    --frame-inset: 8px;

    /* 飾り枠（.works-card__frame）の対角・描画サイズ。FAQカードと揃える。 */
    --frame-corner: 35px;
    --frame-line: 1.05px;
    --frame-line-color: #8f9e9d;
    --frame-band: 6px;
    --frame-line-pos: -2px;

    position: relative;
    padding: 1.5rem;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* 飾り枠。8パーツ（四隅4＋四辺4）を JS（index.js / works.js）が生成する。
   ※ border-image を使わずに組むのは FAQカードと同じ理由（iOS Safari 対策）で、
     見た目・実装を .faq-card と統一している。
   ※ .works-card は overflow:hidden（画像の波マスク用）を持つが、
     フレームは inset で内側にあるのでクリップされない。 */
.works-card__frame {
    position: absolute;
    inset: var(--frame-inset);
    z-index: 1;
    pointer-events: none;
}

.works-card__frame span {
    position: absolute;
    background-repeat: no-repeat;
}

/* 四隅（固定サイズ）― frame.svg を切り出し。FAQと同じ式。 */
.works-card__frame span.c {
    width: var(--frame-corner);
    height: var(--frame-corner);
    background-image: url("../images/frame.svg");
    background-size:
        calc(180px * (var(--frame-corner) / 35))
        calc(126px * (var(--frame-corner) / 34));
}

.works-card__frame span.tl { top: 0; left: 0; background-position: left top; }
.works-card__frame span.tr { top: 0; right: 0; background-position: right top; }
.works-card__frame span.bl { bottom: 0; left: 0; background-position: left bottom; }
.works-card__frame span.br { bottom: 0; right: 0; background-position: right bottom; }

/* 四辺（伸縮）― linear-gradient で線を描く。FAQと同じ式。 */
.works-card__frame span.et,
.works-card__frame span.eb {
    left: var(--frame-corner);
    width: calc(100% - var(--frame-corner) * 2);
    height: var(--frame-band);
    background-image: linear-gradient(
        to bottom,
        transparent calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% + var(--frame-line) / 2),
        transparent calc(50% + var(--frame-line) / 2)
    );
}

.works-card__frame span.et { top: calc(var(--frame-line-pos) + 0.59px); }
.works-card__frame span.eb { bottom: calc(var(--frame-line-pos) + 0.59px); }

.works-card__frame span.el,
.works-card__frame span.er {
    top: var(--frame-corner);
    height: calc(100% - var(--frame-corner) * 2);
    width: var(--frame-band);
    background-image: linear-gradient(
        to right,
        transparent calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% + var(--frame-line) / 2),
        transparent calc(50% + var(--frame-line) / 2)
    );
}

.works-card__frame span.el { left: var(--frame-line-pos); }
.works-card__frame span.er { right: var(--frame-line-pos); }

@media (min-width: 576px) {
    .works-card {
        --frame-inset: 8px;
    }
}

/* =========================================================
   施工実績0件時の空メッセージ（フレーム付き）
   index.php（home-works）/ works.php 共用。
   飾り枠は works-card / faq-card / 送信完了ポップと同一の
   frame.svg 切り出し方式（8パーツ）。
   ========================================================= */
.works-empty-framed {
    --frame-inset: 8px;
    --frame-corner: 35px;
    --frame-line: 1.05px;
    --frame-line-color: #8f9e9d;
    --frame-band: 6px;
    --frame-line-pos: -2px;

    position: relative;
    width: 100%;
    padding: 2.5rem 1.75rem;
    /* ベース（〜575px）は左寄せ。狭い画面だと文が折り返され、
       中央寄せだと行頃の両端が揃わず読みづらいため。 */
    text-align: left;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* 576px以上：1行に収まるので中央寄せに戻す。 */
@media (min-width: 576px) {
    .works-empty-framed {
        text-align: center;
    }
}

.works-empty-framed__msg {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-title);
    margin-bottom: 0.5rem;
}

.works-empty-framed__sub {
    font-size: 0.95rem;
    color: var(--color-text-light);
}

/* 飾り枠8パーツ */
.works-empty-framed__frame {
    position: absolute;
    inset: var(--frame-inset);
    z-index: 1;
    pointer-events: none;
}

.works-empty-framed__frame span {
    position: absolute;
    background-repeat: no-repeat;
}

.works-empty-framed__frame span.c {
    width: var(--frame-corner);
    height: var(--frame-corner);
    background-image: url("../images/frame.svg");
    background-size:
        calc(180px * (var(--frame-corner) / 35))
        calc(126px * (var(--frame-corner) / 34));
}

.works-empty-framed__frame span.tl { top: 0; left: 0; background-position: left top; }
.works-empty-framed__frame span.tr { top: 0; right: 0; background-position: right top; }
.works-empty-framed__frame span.bl { bottom: 0; left: 0; background-position: left bottom; }
.works-empty-framed__frame span.br { bottom: 0; right: 0; background-position: right bottom; }

.works-empty-framed__frame span.et,
.works-empty-framed__frame span.eb {
    left: var(--frame-corner);
    width: calc(100% - var(--frame-corner) * 2);
    height: var(--frame-band);
    background-image: linear-gradient(
        to bottom,
        transparent calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% + var(--frame-line) / 2),
        transparent calc(50% + var(--frame-line) / 2)
    );
}

.works-empty-framed__frame span.et { top: calc(var(--frame-line-pos) + 0.59px); }
.works-empty-framed__frame span.eb { bottom: calc(var(--frame-line-pos) + 0.59px); }

.works-empty-framed__frame span.el,
.works-empty-framed__frame span.er {
    top: var(--frame-corner);
    height: calc(100% - var(--frame-corner) * 2);
    width: var(--frame-band);
    background-image: linear-gradient(
        to right,
        transparent calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% + var(--frame-line) / 2),
        transparent calc(50% + var(--frame-line) / 2)
    );
}

.works-empty-framed__frame span.el { left: var(--frame-line-pos); }
.works-empty-framed__frame span.er { right: var(--frame-line-pos); }

/* 画像下辺を緋やかな弧で切り抜くマスク。
   SVG1枚で全体を賄う（上部の塗りつぶしもSVG内に含む）。
   対象：トップの1枚画像 / ビフォーアフター / 一覧ページのスライダー
   ※ preserveAspectRatio='none' で引き伸ばすため、弧の深さは
     カード高さに比例する。カードは --works-card-ratio 固定なので実寸はほぼ一定。
   ※ viewBox 0 0 1440 960 = 3:2。両端880 → 中央が 940 まで垂れ下がる緋やかな弧。
     弧全体を上下させる（位置）：880 と 940 を同じ量だけ動かす。
     弧の深さだけ変える：両者の差（60）を変える。 */
.works-card__img,
.works-ba,
.works-slider {
    --works-wave-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 960' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,880 C1080,970 360,970 0,880 Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;

    -webkit-mask: var(--works-wave-mask);
    mask: var(--works-wave-mask);
}

/* 通常カテゴリ：サムネイル1枚
   パディングで額縁風になるので、画像側にも角丸を入れる。
   ※ 下辺は波で切るので、角丸は上側だけでよい。 */
.works-card__img {
    display: block;
    width: 100%;
    aspect-ratio: var(--works-card-ratio);
    object-fit: cover;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.works-card__body {
    padding: 0.75rem 0.5rem 0.25rem;
}

.works-card__title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-title);
}

/* カード全体をリンクにする場合
   ※ 落ち影はホバーしても深くしない（一番小さい影で固定）。 */
.works-card--link {
    display: block;
    transition: transform var(--transition), box-shadow var(--transition);
}

.works-card--link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

.works-card--link .works-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* カード右下の矢印（青丸背景＋白矢印）
   トップの誘導ボタン（.home-illust-btn__label i）と同じサイズ感で揃える。 */
.works-card__arrow {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 50%;
    transition: transform var(--transition), background-color var(--transition);
}

.works-card--link:hover .works-card__arrow {
    transform: translateX(3px);
    background-color: var(--color-primary-dark);
}

.works-card__date {
    display: block;
    font-family: var(--font-en);
    font-size: 0.8rem;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

/* before / after を左右に並べる入れ物
   コンテナ自体に通常カードと同じ比率を持たせ、
   中の画像は高さいっぱいに引き伸ばす。
   ※画像側に aspect-ratio を持たせると gap 分だけ低くなるため。
   ※下辺は波で切るので、角丸は上側だけ。 */
.works-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    aspect-ratio: var(--works-card-ratio);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
}

.works-ba__item {
    position: relative;
    min-height: 0;
}

.works-ba__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-ba__label {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: var(--radius-xs);
}

.works-ba__item--after .works-ba__label {
    background-color: var(--color-accent);
}

.section-title {
    font-family: var(--font-heading);
    color: var(--color-cream-white);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-title__en {
    display: block;
    font-family: var(--font-en);
    color: var(--color-primary);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.section-title__ja {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .section-title__ja {
        font-size: 2rem;
    }
}

/* 見出し一体型画像（アイコン＋テキスト1枚）：横幅基準で親に追従 */
.section-title__heading-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 420px;
}

@media (min-width: 576px) {
    .section-title__heading-img {
        max-width: 480px;
    }
}

@media (min-width: 768px) {
    .section-title__heading-img {
        max-width: 560px;
    }
}

/* 一覧ページのタイトル画像（head-hを常時・中央配置）
   トップの home-works / news の横縦出し分けとは別の、
   一覧ページ専用のシンプルな見出し。 */
.list-head {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.list-head__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 240px;
    margin-inline: auto;
}

@media (min-width: 576px) {
    .list-head__img {
        max-width: 280px;
    }
}

/* 一覧ページの見出しのうち、トップの施工実績／お知らせタイトルと
   同じ「白背景・角丸ボックス＋frame.svg の飾り枠」の横書き配置にする
   バリエーション。works.php / news.php で使用。
   ※ 飾り枠は .home-works__title::before / .news__title::before（index.css）と
     同じ border-image の9スライス。どれかを変えるなら他も揃える。
   ※ 親に overflow:hidden を付けないこと（border-image が切られる）。 */
.list-head--framed {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    padding: 1.25rem;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
}

.list-head--framed .list-head__img {
    max-width: 212px;
}

@media (min-width: 576px) {
    .list-head--framed .list-head__img {
        max-width: 240px;
    }
}

.list-head--framed::before {
    content: "";
    --frame-inset: 6px;

    position: absolute;
    inset: var(--frame-inset);
    z-index: 1;
    border: 34px solid transparent;
    border-image: url("../images/frame.svg") 34 35 / 34px 35px / 0 stretch;
    pointer-events: none;
}

/* =========================================================
   HEADER FRAME (左上のロゴフレーム)
   右上の .header-bar と対になる固定フレーム。全ページ共通。
   ※ ロゴは各ページ（.fv__logo / .page-hero__logo）からここへ集約した。
     ページ内に置くとスクロールで流れ、フレームだけが残ってしまうため。
   ※ 地色・ゴールドの縁・角丸は frame.webp が担うので、CSS側では描かない。
   ========================================================= */

/* 幅は背面のフレーム画像（.header-frame__bg）が決める。
   ※ 比率をCSSに直書きすると frame.webp 差し替え時に必ずズレるため、
     画像自身を通常フロー（position:static）で置いて幅を出させ、
     ロゴはその上に絶対配置で重ねる。
     → --header-bar-height を変えるだけで、フレーム幅もロゴも追従する。 */
.header-frame {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-bar-height);
    width: max-content;
}

/* 背面のフレーム画像。
   height をフレーム高に合わせ、width:auto で元画像の比率のまま幅を決める。
   この幅がそのまま .header-frame の幅になる（＝ロゴ幅の基準）。
   ※ グローバルの img { max-width:100%; height:auto } を打ち消す必要がある。 */
.header-frame__bg {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    pointer-events: none;
}

/* ロゴはフレーム画像の上に重ねる（幅の基準は親＝フレーム画像の幅）。
   幅は --header-logo-width で一元管理する（フレーム幅に対する%）。
     ベース（〜767px）：60%（simple-logo.png）
     768px以上  ：72.5%（logo.png）

   横位置はベース（〜767px）のみ中央寄せ。--header-logo-center で調整する
   （ロゴ中心をフレーム幅の何%に置くか）。
   ※ frame.webp は右側がカーブで地色が抜ける形状のため、50%（完全中央）だと
     ロゴの右端が薄い部分にかかる。地色が乗っている範囲の中央へ少し寄せる。
   ※ 768px以上は中央寄せせず、フレーム左端基準（left:0）に戻す。 */
.header-frame__logo {
    --header-logo-width: 60%;
    --header-logo-center: 40%;

    position: absolute;
    top: 0;
    left: var(--header-logo-center);
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: var(--header-logo-width);
}

/* 768px以上：中央寄せを打ち消して左寄せに戻す。 */
@media (min-width: 768px) {
    .header-frame__logo {
        --header-logo-width: 72.5%;

        left: 0;
        transform: none;
    }
}

/* <picture> は既定で display:inline のため、幅指定が中の img に伝わらない。
   ブロック化して親（--header-logo-width）の幅をそのまま受け渡す。 */
.header-frame__logo-pic {
    display: block;
    width: 100%;
}

/* ロゴ画像。幅に応じて header-nav.php の <picture> で出し分ける。
     ベース（〜767px）：simple-logo.png（簡素版）
     768px以上  ：logo.png（通常版）
   ※ 以前は地が濃い青緑のため明るい版（menu-logo.png）を使っていた。地色との視認性は要確認。
   ※ 幅は親（.header-frame__logo＝フレーム幅の --header-logo-width）に追従させる。
     高さは比率なり（フレーム高を超える場合は max-height で抑える）。
   ※ 2枚の縦横比が違う場合、768px境界でロゴの高さが変わる。 */
.header-frame__logo-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: 100%;
    object-fit: contain;
}

/* 右上のフレーム装飾（同じ画像を左右反転）。
   .header-bar（z-index:1100）の背面に敷き、パネルの外側へ広がらせる。
   ※ 768px未満では出さない（右上はハンバーガーのみのため）。 */
.header-frame-right {
    display: none;
}

@media (min-width: 768px) {
    .header-frame-right {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1099;
        height: var(--header-bar-height);
        width: auto;
        max-width: none;
        transform: scaleX(-1);
        pointer-events: none;
    }
}

/* =========================================================
   HEADER BAR (右上のボタンフレーム)
   クイック連絡ボタン（白地）とハンバーガー（青緑地）を1枚の
   パネルにまとめ、左下だけ角丸にして画面右上の角に貼り付ける。
   ※ 固定（fixed）はこのパネルが担う。中の2つは flex で並べるだけ。
   ========================================================= */

.header-bar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    /* フレーム画像と同じ高さを持ち、中身（.header-quick / .hamburger）は
       align-items:stretch でこの高さいっぱいに伸ばす。
       ※ 子側に height を指定すると stretch が効かなくなるので持たせない。 */
    height: var(--header-bar-height);
    align-items: stretch;
    /* 〜767px はフレーム画像を出さないので、画像の縁の代わりに
       左と下だけ枠線を引く（上と右は画面端に接するため不要）。 */
    border-left: 3px solid var(--color-gold-deep);
    border-bottom: 3px solid var(--color-gold-deep);
    border-bottom-left-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* 768px以上：背面にフレーム画像（.header-frame-right）が入るので、
   パネル自身の輪郭（枠線・角丸・影）は不要。画像の輪郭と二重になるため外す。
   ※ 角丸を外すなら overflow:hidden も不要。残すと中身を無駄に切る。 */
@media (min-width: 768px) {
    .header-bar {
        border: none;
        border-bottom-left-radius: 0;
        overflow: visible;
        box-shadow: none;
    }
}

/* =========================================================
   HAMBURGER / DRAWER
   ========================================================= */

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    /* 高さは親（.header-bar）の stretch に任せるので指定しない */
    padding-inline: 1rem;
    background-color: var(--color-teal-deep);
}

@media (min-width: 768px) {
    .hamburger {
        /* 左パディングはなし（.header-quick の右パディングと二重になるため） */
        padding-inline: 0 1.5rem;
        /* 背面のフレーム画像が青緑地を持つので、ここでは塗らない。
           塗ると色味の差で四角いパッチとして浮く。 */
        background-color: transparent;
    }
}

/* 三本線。
   --bar-gap は線の間隔。×印への変形量（translateY）は
   「間隔＋線の太さ」と一致させる必要があるため、
   ここを変えれば両方が追従するよう変数にしている。 */
.hamburger__bars {
    --bar-gap: 7px;
    --bar-thickness: 2px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--bar-gap);
}

.hamburger__bar {
    display: block;
    width: 36px;
    height: var(--bar-thickness);
    margin-inline: auto;
    background-color: var(--color-white);
    border-radius: var(--radius-pill);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ラベルの入れ物。
   grid で 2枚を同じセルに重ねる。
   ※ grid なら入れ物の幅は「長い方のラベル」に自動で揃うので、
     min-width を決め打ちしなくても切り替え時に幅が動かない。
     （※ 旧：.hamburger__label に min-width:3.25rem を持たせていた） */
.hamburger__labels {
    display: grid;
}

/* ラベル（メニュー ⇔ とじる）。2枚とも同じセルに重なる。
   ※ 文字列は CSS で補間できないので、クロスフェードで切り替える。
     開閉は .hamburger.is-active（JSが付与）で判定。 */
.hamburger__label {
    grid-area: 1 / 1;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--color-white);
    transition: opacity 0.3s ease;
}

/* 閉じているとき：「メニュー」を見せる */
.hamburger__label--close {
    opacity: 0;
}

/* 開いているとき：「とじる」に入れ替える */
.hamburger.is-active .hamburger__label--open {
    opacity: 0;
}

.hamburger.is-active .hamburger__label--close {
    opacity: 1;
}

.hamburger.is-active .hamburger__bar:nth-child(1) {
    transform: translateY(calc(var(--bar-gap) + var(--bar-thickness))) rotate(45deg);
}

/* 中央の棒：opacityだけだと両端の丸キャップが微かに残ることがあるため、
   横幅を 0 に潰して完全に消す。 */
.hamburger.is-active .hamburger__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.is-active .hamburger__bar:nth-child(3) {
    transform: translateY(calc((var(--bar-gap) + var(--bar-thickness)) * -1)) rotate(-45deg);
}

/* =========================================================
   HEADER QUICK (パネル内の連絡ボタン・768px以上のみ)
   白地に電話 / メール の丸ボタンを2つ並べる。
   ========================================================= */
.header-quick {
    /* ベース（〜767px）は非表示（下部固定バーがあるため） */
    display: none;
}

@media (min-width: 768px) {
    .header-quick {
        display: flex;
        align-items: center;
        /* 高さは親（.header-bar）の stretch に任せるので指定しない */
        gap: 0.625rem;
        padding-inline: 1.25rem;
        max-width: 200px;
        overflow: hidden;
        /* 地は背面のフレーム画像（.header-frame-right）に任せる */
    }

    /* ※ 以前はモバイルメニュー展開中に max-width を詰めて畳んでいたが、
       メニューを開いても電話・メールボタンを出したままにするため廃止。
       （畳む理由だった「空の白い面が残る」問題は、現在は地を背面の
       フレーム画像に任せているため発生しない。） */

    .header-quick__btn {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        font-size: 1.2rem;
        line-height: 1;
        transition: transform var(--transition), background-color var(--transition), color var(--transition);
    }

    .header-quick__btn:hover {
        transform: translateY(-2px);
    }

    /* 電話ボタン：塗り（くすみ濃水色の地に白アイコン）＋暗めのゴールドの枠線 */
    .header-quick__btn--tel {
        color: var(--color-white);
        background-color: var(--color-teal-deep);
        border: 3px solid var(--color-gold-deep);
    }

    /* メールボタン：白抜き（白地にくすみ濃水色のアイコン＋同色の枠線）
       ※ 塗り側とサイズを揃えるため、枠線の太さは電話ボタンと同じ 3px にする。 */
    .header-quick__btn--mail {
        color: var(--color-teal-deep);
        background-color: var(--color-white);
        border: 3px solid var(--color-teal-deep);
    }

    /* ホバー：反転させず、地を一段暗くするだけにする
       （共通お問い合わせの緑のボタンと同じ振る舞い）。
       ※ 旧：塗りと白抜きを入れ替えていた。 */
    .header-quick__btn--tel:hover {
        background-color: var(--color-teal-deep-hover);
    }

    .header-quick__btn--mail:hover {
        background-color: var(--color-white-hover);
    }
}

/* =========================================================
   MOBILE MENU（円形展開の全画面メニュー）
   ========================================================= */

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    /* 共通背景（body）と同じ水色グラデーション。
       ※ body 側はページ全高基準だが、こちらは fixed なので
         ビューポート高さでグラデーションが1周する（スクロール位置に依らず一定）。
       ※ テクスチャは .mobile-menu::after に持たせる（body::after と同じ質感）。
       ※ 水滴は .mobile-menu__drops（実要素）に分離する。
         ナビ幅でマスクするにはレイヤーを分ける必要があり、
         かつ clip-path のせいで負の z-index の疑似要素は使えないため。 */
    background-color: var(--bg-grad-top);
    background-image: linear-gradient(180deg,
            var(--bg-grad-top) 0%,
            var(--bg-grad-mid) 45%,
            var(--bg-grad-bottom) 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
    z-index: 1080;
    visibility: hidden;
    clip-path: circle(0px at var(--hamburger-x, calc(100% - 40px)) var(--hamburger-y, 40px));
    transition:
        clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.6s;
}

.mobile-menu.is-open {
    visibility: visible;
    clip-path: circle(150vmax at var(--hamburger-x, calc(100% - 40px)) var(--hamburger-y, 40px));
    transition:
        clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* テクスチャ（雲状のにじみ）。body::after と同じ質感をメニュー背景にも乗せる。
   SVGの feTurbulence で生成するので画像ファイルは不要。
   パラメータ（baseFrequency / numOctaves / タイルサイズ / opacity）は
   body::after と完全に揃えてある。片方を変えるならもう一方も揃える。

   ※ z-index:0 は水滴（.mobile-menu__drops）と同じ層だが、
     実要素より疑似要素の方が後に描かれるため、テクスチャは水滴の上に乗る
     （＝グラデーションも水滴もまとめて揺らぐ）。
   ※ 中身（.mobile-menu__inner は z-index:1）より背面なので、
     文字にはテクスチャがかからない（body 側と同じ振る舞い）。
   ※ 負の z-index は使えない（.mobile-menu の clip-path で背面に回り描画されない）。
   ※ mix-blend-mode: overlay で、白っぽく覆わず下地の明暗を揺らすだけにする。 */
.mobile-menu::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23grain)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: var(--grain-size) var(--grain-size);
    opacity: var(--grain-opacity);
    mix-blend-mode: overlay;
}

/* 水滴パターン。
   グラデーション（.mobile-menu の背景）の上、中身（__inner）の下に敷く。

   ※ 疑似要素ではなく実要素なのは、.mobile-menu の clip-path が
     子・疑似要素をすべてクリップし、負の z-index だと背面に回って
     描画されないため。z-index:0 とし、中身側を z-index:1 で前面に出す。

   マスク（中央を抜く処理）は常時適用。
   ※ マスクの % はこの要素（＝メニュー全幅）基準なので、50% が中央になる。
   ※ 停止位置は calc(50% ± 固定px) の1段だけにする。
     calc を入れ子にすると解決されず、マスク全体が無効になる。

   --- 水滴の見た目の調整方法（保守用メモ）---
   間隔を変えたい → ここの --menu-drops-size を変える（大きいほどまばら）。
   粒の大きさを変えたい → bg-drops-menu.svg 内の scale / r / stroke-width を変える。

   ※ 両方は連動する。タイルを拡大すると粒も一緒に大きくなるため、
     「間隔だけ広げたい」場合は SVG 側を逆数で縮める必要がある。
   ※ SVG もタイルサイズも body 側とは別管理。
     メニュー：bg-drops-menu.svg（0.8倍）を 400px
     body  ：bg-drops.svg（原寸）を 360px（--bg-drops-size）
     ここを変えても body には影響しない。 */
.mobile-menu__drops {
    --menu-drops-size: 400px;
    /* 抜き幅の半分。.mobile-menu__nav の max-width(360px) の半分と揃える。 */
    --menu-fade-half: 180px;
    --menu-fade-ramp: 120px;

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: url('../images/bg-drops-menu.svg');
    background-repeat: repeat;
    background-size: var(--menu-drops-size) var(--menu-drops-size);
    background-position: center top;

    /* 外側＝不透明（水滴あり）、中央の帯＝透明（水滴なし）。
       途中に段階を刻むのは、折れ線に見えないようカーブさせるため（body と同じ）。 */
    --menu-drops-mask: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) calc(50% - var(--menu-fade-half) - var(--menu-fade-ramp)),
            rgba(0, 0, 0, 0.9) calc(50% - var(--menu-fade-half) - var(--menu-fade-ramp) * 0.82),
            rgba(0, 0, 0, 0.68) calc(50% - var(--menu-fade-half) - var(--menu-fade-ramp) * 0.64),
            rgba(0, 0, 0, 0.4) calc(50% - var(--menu-fade-half) - var(--menu-fade-ramp) * 0.46),
            rgba(0, 0, 0, 0.16) calc(50% - var(--menu-fade-half) - var(--menu-fade-ramp) * 0.28),
            rgba(0, 0, 0, 0.04) calc(50% - var(--menu-fade-half) - var(--menu-fade-ramp) * 0.12),
            rgba(0, 0, 0, 0) calc(50% - var(--menu-fade-half)),
            rgba(0, 0, 0, 0) calc(50% + var(--menu-fade-half)),
            rgba(0, 0, 0, 0.04) calc(50% + var(--menu-fade-half) + var(--menu-fade-ramp) * 0.12),
            rgba(0, 0, 0, 0.16) calc(50% + var(--menu-fade-half) + var(--menu-fade-ramp) * 0.28),
            rgba(0, 0, 0, 0.4) calc(50% + var(--menu-fade-half) + var(--menu-fade-ramp) * 0.46),
            rgba(0, 0, 0, 0.68) calc(50% + var(--menu-fade-half) + var(--menu-fade-ramp) * 0.64),
            rgba(0, 0, 0, 0.9) calc(50% + var(--menu-fade-half) + var(--menu-fade-ramp) * 0.82),
            rgba(0, 0, 0, 1) calc(50% + var(--menu-fade-half) + var(--menu-fade-ramp)),
            rgba(0, 0, 0, 1) 100%);

    -webkit-mask-image: var(--menu-drops-mask);
    mask-image: var(--menu-drops-mask);
}

/* 装飾：右上と左下に控えめに置くみずたまり画像（deco-puddle.png）。
   クリックは一切吸わない（pointer-events:none）。
   ※ 現在は非表示。戻す場合は display:none の行を削除する
     （HTML側（includes/header-nav.php）の要素は残してある）。 */
.mobile-menu__deco {
    display: none;
    position: absolute;
    z-index: 0;
    width: min(60%, 200px);
    height: auto;
    opacity: 0.1;
    pointer-events: none;
}

/* 右上の隅（少し外へはみ出す・左下より大きめ） */
.mobile-menu__deco--top {
    top: 0;
    right: 0;
    width: min(78%, 280px);
    transform: translate(28%, -40%);
}

/* 左下の隅（少し外へはみ出す） */
.mobile-menu__deco--bottom {
    bottom: 0;
    left: 0;
    transform: translate(-28%, 32%);
}

/* 内側コンテナ
   ※ justify-content: center だけだと、コンテンツが縦幅を超えた時に
     上端がパディングの外（画面外）へ押し出され、overflowでも
     先頭に戻れなくなる。safe center にすると、収まらない場合は
     中央寄せをやめて上端（パディング内）から始まる。 */
.mobile-menu__inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: center;
    /* 上パディングはヘッダーのフレーム高（--header-bar-height）と揃える。
       フレームの下からメニューの中身が始まるようにするため、
       固定値ではなく変数を参照する（幅ごとの値の変化に追従する）。 */
    padding: var(--header-bar-height) 1.25rem 2rem;
    overflow-y: auto;
    gap: 2.5rem;
}

/* ナビリスト */
.mobile-menu__nav {
    width: 100%;
    max-width: 360px;
}

.mobile-menu__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-menu__item {
    opacity: 0;
    transform: translateX(-20px);
}

.mobile-menu.is-open .mobile-menu__item {
    animation: menuItemIn 0.4s ease forwards;
}

.mobile-menu.is-open .mobile-menu__item:nth-child(1) {
    animation-delay: 0.10s;
}

.mobile-menu.is-open .mobile-menu__item:nth-child(2) {
    animation-delay: 0.15s;
}

.mobile-menu.is-open .mobile-menu__item:nth-child(3) {
    animation-delay: 0.20s;
}

.mobile-menu.is-open .mobile-menu__item:nth-child(4) {
    animation-delay: 0.25s;
}

.mobile-menu.is-open .mobile-menu__item:nth-child(5) {
    animation-delay: 0.30s;
}

.mobile-menu.is-open .mobile-menu__item:nth-child(6) {
    animation-delay: 0.35s;
}

@keyframes menuItemIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ナビリンク */
.mobile-menu__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
    color: var(--color-white);
}

.mobile-menu__link-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* フォントアイコンを使う場合の保険（現在は画像アイコン） */
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* 画像アイコン（icon-*.png）は枠内に収める */
.mobile-menu__link-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-menu__link-ja {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.mobile-menu__link-arrow {
    color: var(--color-white);
    transition: transform var(--transition);
}

.mobile-menu__link-arrow i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 0.7em;
    font-weight: 900;
    line-height: 1;
}

.mobile-menu__link:hover .mobile-menu__link-arrow {
    transform: translateX(4px);
}

/* 幅768px以上 かつ 高さ667px以上：縦横とも余裕があるので
   ナビのコンテンツ（テキスト・アイコン・余白）を少し大きくしてゆったり見せる。 */
@media (min-width: 768px) and (min-height: 667px) {
    .mobile-menu__link {
        padding: 1rem;
        gap: 0.925rem;
    }

    .mobile-menu__link-icon {
        width: 2.6rem;
        height: 2.6rem;
    }

    .mobile-menu__link-ja {
        font-size: 1.2rem;
    }
}

/* 現在ページのアクティブスタイルは保留中（.is-active は JS で付与される） */

/* メニュー内連絡先 */
.mobile-menu__contact {
    width: 100%;
    max-width: 300px;
    text-align: center;
    opacity: 0;
}

.mobile-menu.is-open .mobile-menu__contact {
    animation: menuItemIn 0.4s ease 0.4s forwards;
}

.mobile-menu__tel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.mobile-menu__tel-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* 連絡先の上に置くメニュー内ロゴ（menu-logo.png） */
.mobile-menu__logo {
    display: block;
    width: auto;
    height: 56px;
    margin: 0 auto 1.25rem;
}

/* 高さ667px未満（低い画面）：メニュー内の各要素を少し小さくして
   縦に収まりやすくする。パディング・gap・文字・アイコンを圧縮。 */
@media (max-height: 667px) {
    .mobile-menu__inner {
        /* 縦に詰めたいが、上パディングはヘッダーのフレーム高を下回らせない。
           max() で「圧縮値」と「フレーム高」の大きい方を採る。
           ※ 現状はフレーム高（80px〜）が常に勝つが、
             --header-bar-height を小さくした場合は 3.5rem 側が効く。 */
        padding: max(3.5rem, var(--header-bar-height)) 1.25rem 1.5rem;
        gap: 1.5rem;
    }

    .mobile-menu__link {
        padding: 0.6rem 1rem;
        gap: 0.75rem;
    }

    .mobile-menu__link-icon {
        width: 1.6rem;
        height: 1.6rem;
    }

    .mobile-menu__link-ja {
        font-size: 1rem;
    }

    .mobile-menu__tel {
        font-size: 1.3rem;
    }

    .mobile-menu__tel-note {
        font-size: 0.75rem;
    }
}

/* オーバーレイ */
.mobile-menu__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1070;
}

.mobile-menu__overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   WIP (制作中プレースホルダー)
   ========================================================= */

.sec-wip {
    padding-block: var(--spacing-3xl);
    text-align: center;
    background-color: var(--color-bg-light);
}

.sec-wip__icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.sec-wip__text {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-title);
}

.sec-wip__sub {
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-top: 0.5rem;
}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {
    padding: 1rem 1.25rem;
}

/* page-hero 内の下部に絶対配置されるパンくず */
.page-hero .breadcrumb {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

@media (min-width: 576px) {
    .breadcrumb {
        padding-inline: 2rem;
    }
}

@media (min-width: 768px) {
    .breadcrumb {
        padding-inline: 3rem;
    }
}

@media (min-width: 1024px) {
    .breadcrumb {
        padding-inline: 4rem;
    }
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--color-white);
}

@media (min-width: 768px) {
    .breadcrumb__list {
        font-size: 1.05rem;
    }
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb__icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.breadcrumb__link {
    color: var(--color-white);
    transition: color var(--transition);
}

.breadcrumb__link:hover {
    color: var(--color-primary-dark);
}

.breadcrumb__sep {
    color: var(--color-white);
}

.breadcrumb__current {
    color: var(--color-white);
}

/* =========================================================
   CONTACT CTA（お問い合わせ・独立セクション）
   高齢のお客様にも分かりやすいよう、電話番号を大きく、
   受付時間や「相談無料」の安心材料を添え、余白を広めに。
   ========================================================= */

.contact-cta {
    position: relative;
    /* 背景は body の共通背景に任せる（旧：--color-bg → --color-sky-soft のグラデーション） */
    /* 余白は .section （トップの各セクション）と同じ値。
       下側はフッター上端の波線が食い込む分を加算する。 */
    padding-top: 3rem;
    padding-bottom: calc(3rem + var(--wave-divider-footer-height));
    padding-inline: 1.25rem;
}

@media (min-width: 576px) {
    .contact-cta {
        padding-top: 3.5rem;
        padding-bottom: calc(3.5rem + var(--wave-divider-footer-height));
        padding-inline: 2rem;
    }
}

@media (min-width: 768px) {
    .contact-cta {
        padding-inline: 3rem;
    }
}

@media (min-width: 1024px) {
    .contact-cta {
        padding-top: 4rem;
        padding-bottom: calc(4rem + var(--wave-divider-footer-height));
        padding-inline: 4rem;
    }
}

@media (min-width: 1200px) {
    .contact-cta {
        padding-top: 5rem;
        padding-bottom: calc(5rem + var(--wave-divider-footer-height));
    }
}

@media (min-width: 1440px) {
    .contact-cta {
        padding-top: 6rem;
        padding-bottom: calc(6rem + var(--wave-divider-footer-height));
    }
}

.contact-cta__inner {
    max-width: var(--section-width-sm);
    /* 親（.contact-cta）側で左右余白を取るため、
       l-container の padding-inline を打ち消して二重を防ぐ。 */
    padding-inline: 0;
}

/* 768以上：まだ縦積みだが、左右に余裕が出るので少し広げる。 */
@media (min-width: 768px) {
    .contact-cta__inner {
        max-width: var(--section-width-sm-plus);
    }
}

/* 1024以上：電話・メールの2カードが横並びになるので幅を広げる
   ※ 横並びの切り替え（.contact-cta__body）と必ず揃えること。 */
@media (min-width: 1024px) {
    .contact-cta__inner {
        max-width: var(--section-width-narrow);
    }
}

/* 見出し（リード＋無料バッジ一体型の画像） */
.contact-cta__head {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

/* 見出し画像：他セクションの .section-title__heading-img と揃え、
   横幅基準で親に追従させる。 */
.contact-cta__head-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 420px;
    margin-inline: auto;
}

@media (min-width: 576px) {
    .contact-cta__head-img {
        max-width: 480px;
    }
}

@media (min-width: 768px) {
    .contact-cta__head-img {
        max-width: 560px;
    }
}

/* 電話・メールの2ブロック（ベース縦積み／1024以上横並び）
   ※ 幅の拡張（.contact-cta__inner）と必ず揃えること。 */
.contact-cta__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .contact-cta__body {
        flex-direction: row;
        align-items: stretch;
        gap: 1.5rem;
    }
}

/* 電話・メールのカード（ブロック全体がリンク）
   地はクリーム白。装飾パターン（bg-deco.png）は ::before に分離する。
   ※ 分離する理由：background-image 単体に opacity は掛けられず、
     要素に掛けると文字・枠線まで透けてしまうため。
   ※ position:relative は ::before の基準。 */
.contact-cta__tel-block,
.contact-cta__mail-block {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem;
    background-color: var(--color-cream-white);
    border: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* カードの装飾パターン（bg-deco.png）。クリーム白の地の上、中身の下に敷く。
   ※ タイルの大きさは --cta-deco-size、濃さは --cta-deco-opacity で調整する。
     背景の水滴（--bg-drops-size / --drops-opacity-*）と同じく変数で一元管理。
   ※ 親の角丸（--radius-lg）を継承させる（inherit）。さもないと四隅でパターンが角ばる。
   ※ クリックを吸わない（pointer-events:none）。ブロック全体がリンクのため。 */
.contact-cta__tel-block::before,
.contact-cta__mail-block::before {
    content: "";
    --cta-deco-size: 72px;
    --cta-deco-opacity: 0.175;

    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/bg-deco.png');
    background-repeat: repeat;
    background-size: var(--cta-deco-size);
    opacity: var(--cta-deco-opacity);
    border-radius: inherit;
    pointer-events: none;
}

/* 中身はパターンより前面に出す（::before が z-index:0 なので、中身を 1 に上げる）。 */
.contact-cta__tel-block>*,
.contact-cta__mail-block>* {
    position: relative;
    z-index: 1;
}

/* カード全体をホバーで浮き上がらせる */
.contact-cta__tel-block:hover,
.contact-cta__mail-block:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* メールカードも電話カードと同じ金色の枠線に揃える。
   （旧：--color-teal-deep で電話側と分けていた） */
.contact-cta__mail-block {
    border-color: var(--color-gold-deep);
}

@media (min-width: 576px) {

    .contact-cta__tel-block,
    .contact-cta__mail-block {
        padding: 2.5rem;
    }
}

/* 電話・メールの見出し。
   ※ 旧：電話は --color-primary-dark（青）/ メールは --color-teal-deep（青緑）と
     分けていたが、黒系（--color-title）に統一した。 */
.contact-cta__tel-label,
.contact-cta__mail-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-title);
}

/* ラベル左のアイコン画像（電話：icon-phone / メール：icon-contact） */
.contact-cta__label-icon {
    flex-shrink: 0;
    display: block;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

/* 電話番号（タップ領域を広く取る）
   メールボタン（.contact-cta__btn）と幅・余白を揃える。
   ※ 数字は Poppins より判別性の高い丸ゴシック（見出し用書体）を使う。
   ※ 枠線はカード（.contact-cta__tel-block）・ヘッダーのクイックボタンと同じゴールド。
   ※ 四隅の飾り（::before）を絶対配置する基準として position:relative。
     左右パディングは飾り（28px）を避ける分だけ広げる（2rem → 2.75rem）。 */
.contact-cta__tel {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
    margin-block: 0.25rem;
    padding: 1.1rem 2.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-white);
    background-color: var(--color-teal-deep);
    border: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), background-color var(--transition);
}

/* ブロック全体がリンク。ブロックのどこにホバーしても
   中の電話ボタンの背景色が変わるようにする。 */
.contact-cta__tel-block:hover .contact-cta__tel {
    background-color: var(--color-teal-deep-hover);
}

.contact-cta__tel-num {
    letter-spacing: 0.02em;
}

.contact-cta__hours,
.contact-cta__mail-note {
    font-size: 1.05rem;
    color: var(--color-text-light);
}

/* メールボタン（大きめ・青緑）
   ※ 枠線・余白は電話ボタンと揃える。
   ※ 四隅の飾り（::before）を絶対配置する基準として position:relative。 */
.contact-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
    margin-block: 0.25rem;
    padding: 1.1rem 2.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-white);
    background-color: var(--color-teal-deep);
    border: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), background-color var(--transition);
}

/* ブロック全体がリンク。ブロックのどこにホバーしても
   中のメールボタンの背景色が変わるようにする。 */
.contact-cta__mail-block:hover .contact-cta__btn {
    background-color: var(--color-teal-deep-hover);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    position: relative;
    background-color: var(--color-footer-bg);
    color: var(--color-white);
    padding-top: var(--spacing-xl);
}

/* =========================================================
   WAVE DIVIDER (セクション間の波線ディバイダー・共通)
   HTML: includes/wave-divider.php

   波形は #waveMask（事業内容サムネイルのマスク）と同じ「ゆったり2山」。
   置いたセクションの上端に、上のセクションへ食い込む形で描画される。

   使い方：
     1. 親セクションに position: relative を付ける
     2. color でディバイダーの色（＝親セクションの背景色）を指定する

   高さは --wave-divider-height で上書き可能。
   ========================================================= */

.wave-divider {
    --wave-divider-height: 32px;

    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: var(--wave-divider-height);
    display: block;
    pointer-events: none;
}

@media (min-width: 768px) {
    .wave-divider {
        --wave-divider-height: 44px;
    }
}

@media (min-width: 1024px) {
    .wave-divider {
        --wave-divider-height: 56px;
    }
}

/* --- サイン波の幅ごとの出し分け（footer / about 共通） ---
   四つの <svg> が重なって置かれるので、幅ごとに1つだけ display:block にする。
   山谷の数を増やすことで、広い画面でも波の細かさ（実ピクセルの波長）を保つ。 */

/* SP（〜767px）：山谷6 */
.wave-divider--md,
.wave-divider--pc,
.wave-divider--xl {
    display: none;
}

/* MD（768〜1023px）：山谷8 */
@media (min-width: 768px) {
    .wave-divider--sp {
        display: none;
    }

    .wave-divider--md {
        display: block;
    }
}

/* PC（1024〜1439px）：山谷10 */
@media (min-width: 1024px) {
    .wave-divider--md {
        display: none;
    }

    .wave-divider--pc {
        display: block;
    }
}

/* XL（1440px〜）：山谷12 */
@media (min-width: 1440px) {
    .wave-divider--pc {
        display: none;
    }

    .wave-divider--xl {
        display: block;
    }
}

/* フッター上端（背景＝--color-footer-bg）。フッターは他より控えめな高さ。
   高さは :root の --wave-divider-footer-height を参照する
   （直上の .contact-cta も同じ値を下パディングに加算するため）。
   ※ 波線とフッター本体の間に生じる1pxの隠間を埋めるため margin-bottom:-1px。 */
.wave-divider--footer {
    --wave-divider-height: var(--wave-divider-footer-height);
    margin-bottom: -1px;
    color: var(--color-footer-bg);
}

/* wrapper：左右padding担当（max-widthの外側にpaddingを効かせる） */
.footer__wrapper {
    padding-inline: 1.5rem;
}

@media (min-width: 576px) {
    .footer__wrapper {
        padding-inline: 2rem;
    }
}

@media (min-width: 1024px) {
    .footer__wrapper {
        padding-inline: 4rem;
    }
}

/* container：max-width＋中央寄せ。下線＋下余白で copy と区切る。
   ページトップボタンを右上に絶対配置する基準として position:relative。 */
.footer__container {
    position: relative;
    max-width: var(--section-width-sm);
    margin-inline: auto;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
    .footer__container {
        max-width: var(--section-width-md);
    }
}

@media (min-width: 1024px) {
    .footer__container {
        max-width: var(--section-width-xl);
    }
}

/* ロゴ（上に独立）
   display:block で行ボックスの影響（ベースライン下の余白）を除去。
   width:fit-content でクリック領域を画像幅に限定する。 */
.footer__logo {
    display: block;
    width: fit-content;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .footer__logo {
        margin-bottom: 2.5rem;
    }
}

.footer__logo-img {
    display: block;
    width: auto;
    height: 3.5rem;
}

@media (min-width: 768px) {
    .footer__logo-img {
        height: 4rem;
    }
}

/* 下段：モバイルは縦積み。8以上で左列（ナビ→会社情報を縦積み）：右列（マップ）= 1:1 */
.footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        align-items: start;
        align-content: start;
        column-gap: 2.5rem;
        row-gap: 0;
    }

    /* 左列：ナビ（1行目）・会社情報（2行目）を縦に積む。 */
    .footer__col--nav {
        grid-column: 1;
        grid-row: 1;
    }

    .footer__col--info {
        grid-column: 1;
        grid-row: 2;
        margin-top: 2.5rem;
    }

    /* 右列：マップを左列（ナビ＋会社情報）の高さいっぱいに合わせる。
       grid の stretch でセル自体は左列の高さに伸びるので、
       セルを position:relative の基準にし、中の .footer__map を
       絶対配置で埋める（画像の縦横比でセルが伸びるのを防ぐ）。 */
    .footer__col--map {
        position: relative;
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        min-height: 0;
        overflow: hidden;
    }
}

/* ページトップボタン（page-top.png ＋ 「ページトップへ」テキスト）
   .footer__container（position:relative）の右上に絶対配置。
   画像とテキストを縦に並べ、リンク全体でトップへスクロール。 */
.footer__pagetop {
    position: absolute;
    top: -1rem;
    right: 0;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition: transform var(--transition);
}

.footer__pagetop:hover {
    transform: translateY(-4px);
}

.footer__pagetop-img {
    display: block;
    width: auto;
    height: 88px;
}

/* 「ページトップへ」テキスト（白背景・青文字・枠なし） */
.footer__pagetop-text {
    display: inline-block;
    padding: 0.25rem 0.9rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-primary);
    background-color: var(--color-white);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* 見出し（サイトナビ・会社情報） */
.footer__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-white);
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

@media (min-width: 768px) {
    .footer__title {
        font-size: 1.15rem;
    }
}

/* 見出し左の蛇口イラスト */
.footer__title-deco {
    flex-shrink: 0;
    display: block;
    width: auto;
    height: 1.625rem;
}

/* ナビ（横並び・丸ポチ付き） */
.footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
}

.footer__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.05rem;
    color: var(--color-white);
    transition: color var(--transition);
}

/* テキスト左の水滴イラスト。現在ページは water-active-deco に差し替え。 */
.footer__nav-link::before {
    content: '';
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-image: url('../images/water-deco.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.footer__nav-link.is-current::before {
    background-image: url('../images/water-active-deco.png');
}

@media (min-width: 768px) {
    .footer__nav-link {
        font-size: 1.1rem;
    }
}

.footer__nav-link:hover {
    color: #93D2E2;
}

/* 会社情報テキスト */
.footer__info {
    font-size: 1rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 768px) {
    .footer__info {
        font-size: 1.05rem;
    }
}

.footer__info a {
    color: var(--color-white);
    transition: color var(--transition);
}

.footer__info a:hover {
    color: var(--color-primary-light);
}

/* マップ（イラスト画像予定）
   ベース（〜767px）：16/10の比率で高さを出しつつ、最低240pxを確保。
   ※ width:100% だけだと、aspect-ratio が min-height から幅を逆算して
     親より横に広がることがあるため、max-width:100% で幅を押さえる。
   ※ grid アイテムの初期 min-width:auto で中身に押し広げられないよう
     親（.footer__col--map）側で min-width:0 を与える（右はみ出し防止）。 */
.footer__col--map {
    min-width: 0;
}

.footer__map {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .footer__map {
        /* セル（.footer__col--map）を絶対配置で埋める。
           inset:0 で左列の高さにピッタリ収まる。
           ※ ベースの min-height / aspect-ratio はここで打ち消し、
             左カラム高さ追従を優先させる。 */
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
    }
}

.footer__map-img {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    /* 配置枠（.footer__map）のサイズに合わせて隔間なく埋める。 */
    object-fit: cover;
    /* 右上寄せ。coverで余った分は左・下側が切れる。 */
    object-position: right top;
    display: block;
}

@media (min-width: 768px) {
    .footer__map-img {
        /* 左カラム高さに追従するセルを埋める際は中央を見せる。 */
        object-position: center center;
    }
}

.footer__copyright {
    text-align: center;
    font-size: 0.75rem;
    padding: 1.25rem 1rem;
    /* ベース（〜767px）：下部固定バーの高さ分の余白を確保 */
    padding-bottom: calc(1.25rem + var(--fixed-bar-height));
}

@media (min-width: 768px) {
    .footer__copyright {
        padding-bottom: 1.25rem;
    }
}

/* =========================================================
   FIXED BAR（下部固定の問い合わせタブ・1024px未満）
   電話 / お問い合わせフォーム の2タブ
   ========================================================= */
.fixed-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: 100%;
    height: var(--fixed-bar-height);
    display: flex;
    /* 帯全体をゴールドで囲む。下端は画面端に接するので引かない
       （ヘッダーバー（.header-bar）と同じ方針）。
       ※ タブの境界の仕切り線は .fixed-bar__item + .fixed-bar__item で引く。 */
    border-top: 3px solid var(--color-gold-deep);
    border-left: 3px solid var(--color-gold-deep);
    border-right: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
    .fixed-bar {
        display: none;
    }
}

.fixed-bar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding-inline: 0.5rem;
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* 電話：塗り（青緑地に白）／メール：白抜き（白地に青緑）。
   ヘッダー右上のクイックボタン（.header-quick__btn）と同じ配色に揃える。 */
.fixed-bar__item--tel {
    color: var(--color-white);
    background-color: var(--color-teal-deep);
}

.fixed-bar__item--mail {
    color: var(--color-teal-deep);
    background-color: var(--color-white);
}

/* =========================================================
   固定バーの反応
   地を一段暗くし、中身（アイコン・テキスト）だけを少し上げる。
   ※ ボタン本体は動かさない（帯が画面下端に固定されており、
     .fixed-bar の overflow:hidden で上端が切られるため）。

   ※ ホバーとタップで分けている理由：
     このバーは 768px 未満（＝実質モバイル）専用。
     タッチ環境で :hover を使うと、タップ後にホバー状態が居座りする
     （sticky hover）ため、指を離しても暗いままになる。
     そこで：
       ・@media (hover: hover) ＝マウスのある環境だけ :hover を出す
       ・:active ＝押している間だけ。タッチ環境はこちらが効く
   ========================================================= */
.fixed-bar__item {
    transition: background-color var(--transition);
}

/* 中身（アイコン・テキスト）だけを動かす。
   ※ 両者を包む要素がないので、直下の子すべてを対象にする。 */
.fixed-bar__item>* {
    transition: transform var(--transition);
}

/* マウスのある環境：ホバーで暗く・中身を少し上げる */
@media (hover: hover) {
    .fixed-bar__item:hover>* {
        transform: translateY(-2px);
    }

    .fixed-bar__item--tel:hover {
        background-color: var(--color-teal-deep-hover);
    }

    .fixed-bar__item--mail:hover {
        background-color: var(--color-white-hover);
    }
}

/* 全環境共通：押している間（タッチはこちらが主役） */
.fixed-bar__item:active>* {
    transform: translateY(-2px);
}

.fixed-bar__item--tel:active {
    background-color: var(--color-teal-deep-hover);
}

.fixed-bar__item--mail:active {
    background-color: var(--color-white-hover);
}

/* タブの境界の仕切り線（帯の枠線と同じゴールド）。
   2つ目以降のタブの左に引くので、タブが増えても自動で仕切られる。
   ※ 幅は border-box で吸収されるため、flex:1 の均等分割は崩れない。 */
.fixed-bar__item+.fixed-bar__item {
    border-left: 3px solid var(--color-gold-deep);
}

.fixed-bar__icon {
    font-size: 1.15rem;
}

/* =========================================================
   PAGE HERO (サブページ共通のページ見出し)
   ========================================================= */

.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ベース（モバイル）：FV と同じく高さを 420〜480px でクランプする。
       576px 以上で 70vh に切り替える（下方の @media 参照）。
       パンくずは画像の上（.page-hero 下部）に絶対配置する。 */
    min-height: 420px;
    max-height: 480px;
}

@media (min-width: 576px) {
    .page-hero {
        height: 70vh;
        min-height: 500px;
        max-height: none;
    }
}

/* 768px以上：高さの下限を設ける。
   70vh のままなので背の高い画面では追従し、
   ビューポートが低いときだけ 576px で止まる（ヒーローが潰れない）。 */
@media (min-width: 768px) {
    .page-hero {
        min-height: 576px;
    }
}

/* ヒーロー画像：幅90%・最大720px・中央寄せ。高さは比率なり。 */
.page-hero__img {
    display: block;
    width: 90%;
    max-width: 720px;
    height: auto;
    margin-inline: auto;
}

/* ページヒーロー左上ロゴ（FVと同様） */
.page-hero__logo {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    display: inline-block;
}

.page-hero__logo-img {
    display: block;
    width: auto;
    height: 40px;
}

@media (min-width: 768px) {

    /* ハンバーガー（top:1.5rem / height:52px）と上下の位置を揃える。
       ロゴ画像も 52px なので、top を合わせれば上端・下端とも一致する。 */
    .page-hero__logo {
        top: 1.5rem;
        left: 2rem;
    }

    .page-hero__logo-img {
        height: 52px;
    }
}

.page-hero__inner {
    max-width: var(--section-width-xl);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.page-hero__en {
    display: block;
    font-family: var(--font-en);
    color: var(--color-primary-dark);
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.page-hero__title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .page-hero__title {
        font-size: 2.4rem;
    }
}

/* =========================================================
   共通：誘導ボタン（丸ボタン）
   青緑（--color-teal-deep）塗り＋ゴールドの枠線。
   ヘッダーの電話ボタン（.header-quick__btn--tel）と同じ配色。
   ※ 以前は index.css にあったが、トップ以外のページ（faq など）でも
     使えるよう共通（common.css）に移した。
   ========================================================= */

.home-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-teal-deep);
    border: 2px solid var(--color-gold-deep);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

/* ホバー：地を一段深くする（枠線のゴールドは保つ） */
.home-more-btn:hover {
    background-color: var(--color-teal-deep-hover);
    border-color: var(--color-gold-deep);
    color: var(--color-white);
    transform: translateY(-2px);
}

.home-more-btn i {
    transition: transform var(--transition);
}

.home-more-btn:hover i {
    transform: translateX(3px);
}

/* =========================================================
   共通：イラストボタン（イラスト＋重ねテキストのリンク）
   イラストは文字なしで用意し、ラベル帯をHTMLで重ねる
   ========================================================= */
.home-illust-btn {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 320px;
}

/* イラスト本体（背景・枠なし・画像そのものを表示） */
.home-illust-btn__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.home-illust-btn__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* イラストに重ねるラベル帯（下部中央）
   青緑（--color-teal-deep）塗り＋ゴールドの枠線。 */
.home-illust-btn__label {
    position: absolute;
    left: 50%;
    bottom: -0.75rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
    padding: 0.8rem 1.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-white);
    background-color: var(--color-teal-deep);
    border: 2px solid var(--color-gold-deep);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition);
}

.home-illust-btn:hover .home-illust-btn__label,
.home-illust-btn:active .home-illust-btn__label {
    background-color: var(--color-teal-deep-hover);
}

/* 枠線スタイルのラベル帯（白背景＋青緑文字＋ゴールド枠、ホバーで青緑塗り） */
.home-illust-btn__label--outline {
    color: var(--color-teal-deep);
    background-color: var(--color-white);
    border-color: var(--color-gold-deep);
}

.home-illust-btn:hover .home-illust-btn__label--outline,
.home-illust-btn:active .home-illust-btn__label--outline {
    color: var(--color-white);
    background-color: var(--color-teal-deep);
    border-color: var(--color-gold-deep);
}

/* ラベル末尾の矢印（円形背景付き） */
.home-illust-btn__label i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--color-teal-deep);
    background-color: var(--color-white);
    border-radius: 50%;
    transition: transform var(--transition), background-color var(--transition), color var(--transition);
}

.home-illust-btn:hover .home-illust-btn__label i,
.home-illust-btn:active .home-illust-btn__label i {
    transform: translateX(3px);
}

/* 枠線スタイルの矢印：背景青緑・矢印白、ホバーで反転 */
.home-illust-btn__label--outline i {
    color: var(--color-white);
    background-color: var(--color-teal-deep);
}

.home-illust-btn:hover .home-illust-btn__label--outline i,
.home-illust-btn:active .home-illust-btn__label--outline i {
    color: var(--color-teal-deep);
    background-color: var(--color-white);
}

/* 一回り小さい版（--sm）
   service-cta などで使う共通ボタンのコンパクト版。
   ラベル帯のパディング・文字・矢印・水滴装飾を少し小さくする。
   ※ --no-img / --outline と組み合わせて使える（例：home-illust-btn--no-img home-illust-btn--sm）。 */
.home-illust-btn--sm .home-illust-btn__label {
    gap: 0.875rem;
    padding: 0.7rem 1.55rem;
    font-size: 1.025rem;
}

.home-illust-btn--sm .home-illust-btn__label i {
    width: 1.575rem;
    height: 1.575rem;
    font-size: 0.7rem;
}

.home-illust-btn--sm .home-illust-btn__label::before {
    --btn-deco-size: 1.575rem;
    --btn-deco-scale: 2.35;
    transform: translateY(1px) scale(var(--btn-deco-scale));
}

/* 576px以上：--sm を打ち消して通常サイズ（ベースの .home-illust-btn__label）に戻す。
   ※ ベースだけ小さくし、576px以上では通常ボタンにしたいケース用。 */
@media (min-width: 576px) {
    .home-illust-btn--sm .home-illust-btn__label {
        gap: 1rem;
        padding: 0.8rem 1.75rem;
        font-size: 1.1rem;
    }

    .home-illust-btn--sm .home-illust-btn__label i {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .home-illust-btn--sm .home-illust-btn__label::before {
        --btn-deco-size: 1.75rem;
        --btn-deco-scale: 2.5;
    }
}

/* イラストなし（ラベル帯のみ）のバリエーション */
.home-illust-btn--no-img {
    width: auto;
    max-width: none;
}

.home-illust-btn--no-img .home-illust-btn__label {
    position: static;
    transform: none;
}

/* ラベル先頭（テキストの左）の水滴装飾（button-deco.png）
   並び：水滴 → テキスト → 矢印
   ※ 装飾なのでHTMLには出さず疑似要素で描く。 */
.home-illust-btn__label::before {
    content: "";
    --btn-deco-size: 1.75rem;
    --btn-deco-scale: 2.5;

    flex-shrink: 0;
    display: block;
    width: var(--btn-deco-size);
    height: var(--btn-deco-size);
    transform: translateY(-1px) scale(var(--btn-deco-scale));
    opacity: 0.65;
    background-image: url("../images/button-deco.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* 枠線スタイル（お知らせ一覧へ）の水滴装飾は濃めの v2 に差し替える。 */
.home-illust-btn__label--outline::before {
    background-image: url("../images/button-deco-v2.png");
}

/* 枠線スタイルのホバー時：地が白→青緑に反転するので、水滴装飾も通常版に戻す。 */
.home-illust-btn:hover .home-illust-btn__label--outline::before,
.home-illust-btn:active .home-illust-btn__label--outline::before {
    background-image: url("../images/button-deco.png");
}

/* =========================================================
   共通：ボタン＋背面イラストの重ね合わせ
   ボタン幅に収縮するラッパーの中で、
   ボタン下端（bottom:50%）・左右中央に背面画像を置く。
   ※背面画像の幅は各セクション側で上書きする
   ========================================================= */
.illust-btn-stack {
    position: relative;
    display: inline-block;
    text-align: center;
}

/* ボタン下端・左右中央に配置される背面イラスト */
.illust-btn-stack__bg {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(calc(-50% - 15px));
    z-index: 0;
    width: 120px;
    height: auto;
    pointer-events: none;
}

@media (min-width: 768px) {
    .illust-btn-stack__bg {
        width: 132px;
    }
}

/* ベース：SP用画像 / 768以上：PC用画像 */
.illust-btn-stack__bg--sp {
    display: block;
}

.illust-btn-stack__bg--pc {
    display: none;
}

@media (min-width: 768px) {
    .illust-btn-stack__bg--sp {
        display: none;
    }

    .illust-btn-stack__bg--pc {
        display: block;
    }
}

/* ボタン本体は常に前面 */
.illust-btn-stack .home-illust-btn {
    position: relative;
    z-index: 1;
}

/* =========================================================
   375px未満：position:fixed 要素の補正（ファイル末尾）
   html に transform:scale がかかると fixed 要素の基準が
   ずれるため、100dvh だと下端まで届かない。
   150dvh で縮小分を上回って背景を全面に張る。
   ※ .mobile-menu 本体の height:100dvh より後に置く必要がある。
   ========================================================= */
@media (max-width: 374px) {
    .mobile-menu {
        width: 375px;
        height: 150dvh;
    }

    /* 背景は150dvhで全面を張るが、中身の中央寄せは
       実表示領域（100dvh）基準にする（下へのずれ防止） */
    .mobile-menu__inner {
        height: 100dvh;
    }

    .mobile-menu__overlay {
        width: 375px;
        height: 150dvh;
    }
}