@charset "UTF-8";

/* =========================================================
   YMG合同会社 - common.css
   黒・白・グレー基調／モルタル調・木材の質感に合うトーン
========================================================= */

:root {
    /* ================================
       カラー
    ================================ */
    --color-primary:        #111111;  /* メインカラー（ブラック） */
    --color-primary-dark:   #000000;  /* メインカラー（暗め） */
    --color-secondary:      #4a4a4a;  /* サブカラー（チャコールグレー） */
    /* ゴールド
       ※ ※重要※ サイトのゴールドは基本的にこの1色（--color-gold）に揃える。
         ロゴの実データ（white-logo.svg の横線）の #DAA520 を基準に、
         色味はそのまま彩度と明るさを落とした落ち着いた金にしている。
         #DAA520 そのままだと鮮やかすぎて、黒・白・グレー基調の中で浮いた。
       ※ --color-accent / -dark / -light は役割ごとに色を分けていた名残り。
         今は3つとも --color-gold を指している。各所の指定を
         書き換えずに済むよう、名前だけ残している。
         役割ごとに色を分け直すときは、この3行だけ直せばよい。
         （以前の値：accent #B8912F / dark #8A6717 / light #E5C572）
       ※ 例外は --color-gold-deep だけ。明るい地の上の文字と、
         白い文字を載せる面（バッジ・ボタンのホバーなど）で使う。
         --color-gold は白地とのコントラストが約2.5:1しかなく、文字が読めないため。
         色相は --color-gold と同じで明るさだけ落としている（白地で約5:1）。
         装飾・罫線・ホバーの色には使わないこと。 */
    --color-gold:           #C29B4A;  /* サイト共通のゴールド（ロゴの金を落ち着かせた色） */
    --color-gold-deep:      #82652B;  /* 明るい地の文字・白文字を載せる面だけ */
    /* ※ 黒地の上で使う明るめの金。
         --color-gold を黒（#1A1A1A / #111111）の上に置くと沈んで見えるため、
         色相・彩度はそのまま明度だけ上げている。
       ※ 使うのは黒地のホバー・カレントの文字だけ。
         ドロワー、物件情報の札、FVのお知らせの帯。
       ※ 明るい地には使わない（そちらは --color-gold-deep）。
       ※ これ以上明るくすると、以前下げた #E5C572 に近づいて安っぽく見える。 */
    --color-gold-bright:    #CFA85C;  /* 黒地のホバー・カレントの文字だけ */
    --color-accent:         var(--color-gold);
    --color-accent-dark:    var(--color-gold);
    --color-accent-light:   var(--color-gold);

    /* ロゴのスウォッシュと同じ金属調のグラデーション
       ※ 中央のハイライトを押さえて、茶寄りの落ち着いた金にしている。
         以前は #F5E7BC まで明るくしていたが、光りすぎて安っぽく見えた。 */
    --gradient-gold: linear-gradient(90deg, #6E5214 0%, #A98A3E 40%, #C0A15A 50%, #A98A3E 60%, #6E5214 100%);
    --color-text:           #2b2b2b;  /* 本文テキスト */
    --color-title:          #2A2A2A;  /* 見出しテキスト */
    --color-text-light:     #6a6a6a;  /* 補足・薄めテキスト */
    --color-bg:             #FFFFFF;  /* ページ背景 */
    --color-bg-light:       #F4F3F1;  /* セクション背景（モルタル調オフホワイト） */
    /* ※ オフホワイトよりもう一段落とした薄いグレー。
         面を並べたときに明度だけで差をつけるための色。
         色相は --color-bg-light と同じ暖かいグレー系に揃えている。
       ※ ※重要※ これ以上深くすると --color-border（#DCDAD6）と
         差が無くなり、面の上の罫線が消える。
         深くするときは罫線側もセットで下げること。 */
    --color-bg-mute:        #E3E1DE;  /* 一段深い面（薄いグレー） */
    --color-bg-dark:        #1A1A1A;  /* 暗背景セクション */
    --color-border:         #DCDAD6;  /* ボーダー */

    /* ================================
       フォント
    ================================ */
    --font-family:   'Noto Sans JP', sans-serif;   /* 本文（ヒラギノ角ゴシックも試したが、端末で見た目が変わるので Noto に統一） */
    --font-heading:  'Zen Old Mincho', serif;      /* 見出し（和の高級感） */

    /* 英字装飾
       ※ Barlow Condensed。縦長で密度が高く、モルタルや木材の硬質さに合う。
         Archivo（中庸）と Oswald（力強い）も見比べた上で選んでいる。
       ※ 差し替えるときは header.php の Google Fonts のURLとセットで。 */
    --font-en:       'Barlow Condensed', sans-serif;

    /* 数字用
       ※ 電話番号など、桁を読ませるところだけこちらを使う。
         Barlow Condensed は縦長なので、数字が並ぶと細く読みにくい。 */
    --font-num:      'Archivo', sans-serif;

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

    /* ================================
       角丸（高級感重視のため控えめ）
    ================================ */
    --radius-xs:  0.125rem;
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  0.75rem;

    /* ================================
       落ち影
    ================================ */
    --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);

    /* ================================
       トランジション（通常UIはすべてこれを使う）
    ================================ */
    --transition: 0.25s 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;

    /* ================================
       セクション幅
       ※ 「外側でパディング・内側で max-width」の型のセクションでは
         下の5つから選ぶ。中途半端な幅を増やさないための約束。
    ================================ */
    --w-sm:   576px;   /* テキスト中心の狭いセクション */
    --w-md:   768px;   /* 標準（読み物・フォーム・フッター） */
    /* ※ md と lg の間。768px では狭く、1200px では1行が長すぎるときに使う。
         お問い合わせページの導線・メールフォーム（contact.css）など。
       ※ 以前は 880px をそのまま直書きしていた。
         --section-width-narrow は名前に反して --w-md（768px）なので、880px にはこちらを使う。 */
    --w-content: 880px; /* 本文・フォームを少し広く取るセクション */
    --w-lg:  1200px;   /* 一覧・カードなど広いセクション */
    --w-xl:  1440px;   /* さらに広げたいときの選択肢。FVやカードの並び */

    /* 後方互換エイリアス（既存コードへの影響を防ぐ）
       ※ 新しく書くときは --w-sm / --w-md / --w-content / --w-lg を直接使う。
       ※ ※注意※ --section-width-narrow は 768px（--w-md）。880px ではない。 */
    --section-width-sm:     var(--w-sm);
    --section-width-md:     var(--w-md);
    --section-width-narrow: var(--w-md);
    --section-width-lg:     var(--w-lg);
    --section-width-xl:     var(--w-lg);

    /* ================================
       レイアウト
    ================================ */
    --header-height:     4rem;     /* 〜575px（ロゴ・ハンバーガーの一辺と兼用） */

    /* セクションの左右余白
       ※ ※重要※ 画面いっぱいのセクションはこれを使う（直接 rem を書かない）。
         1.5rem（〜575px）→ 2rem（576px〜）→ 2.5rem（768px〜）
         → 3rem（1025px〜）→ 4rem（1200px〜）。
       ※ FVだけは別の変数（index.css の --fv-px）で、これより狭めに取っている。
       ※ 1025px以上の事業内容の見出しの位置計算（index.css の --sv-side）は
         この値を参照している。 */
    --section-px:        1.5rem;
}

@media (min-width: 576px) {
    :root {
        --header-height: 4.5rem;
        --section-px: 2rem;
    }
}

@media (min-width: 768px) {
    :root {
        --section-px: 2.5rem;
    }
}

/* ※ ※重要※ PCレイアウトの境目は 1025px。1024px ではない。
     カルーセル（index.js の mqOn）が max-width: 1024px で、
     1024px を含めて動くため。
     iPad Pro 12.9インチの縦画面がちょうど 1024px なので、
     そこはタッチ向けのカルーセル側に入れている。
     ここを 1024px に下げると、その1枚だけ
     「カルーセルが動いているのにCSSはPC」という状態になる。
   ※ 変えるときは index.js の mqOn / mqWide と必ずセットで。
     index.css の 1025px の分岐も同時に揃えること。 */
@media (min-width: 1025px) {
    :root {
        --header-height: 5.5rem;
        --section-px: 3rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --section-px: 4rem;
    }
}

/* ※ 1440px以上・1600px以上はヘッダーを少し大きくする。
   ※ ※重要※ --header-height はロゴとハンバーガーの正方形の一辺を兼ねている。
     ここを変えるだけで両方大きくなる。
   ※ 下記の余白もこの値を見ているので、自動で広がる。
       ・お知らせセクションの上下
       ・事業内容（1025px以上の2セクション、カルーセル中）の上
       ・会社概要（1025px以上の右の列）の上下
       ・下層ページのページヒーロー、ドロワーの上
   ※ 中身（ロゴの文字・ハンバーガーの線）は別指定。
     common.css のヘッダーの段の下の方で揃えている。 */
@media (min-width: 1440px) {
    :root {
        --header-height: 6rem;
    }
}

@media (min-width: 1600px) {
    :root {
        --header-height: 6.25rem;
    }
}

/* =========================================================
   リセット・ベース
========================================================= */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* ※ hidden ではなく clip。
         overflow-x: hidden はスクロールコンテナを作ってしまい、
         scroll-snap や position: sticky が効かなくなる。
         clip ははみ出しを切るだけでコンテナを作らない。 */
    overflow-x: clip;
    overscroll-behavior-y: none;
}

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

/* 375px未満：375px幅でレイアウトして縮小表示
   ※ 横幅を375に固定し、画面幅との比率で scale する。
     これをしないと 320px 等の端末で横スクロールが出る。
   ※ position:fixed の要素は html の transform を含み親にして
     布置されるため、全面を覆うものは幅・高さを換算して渡す。 */
@media (max-width: 374px) {
    html {
        width: 375px;
        transform-origin: top left;
        transform: scale(calc(100vw / 375));
    }

    .drawer-overlay,
    .splash {
        width: 375px;
        height: calc(100dvh / (100vw / 375));
    }

    .header {
        width: 375px;
    }
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--body-font-size-sp);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--body-line-height-sp);
    letter-spacing: var(--body-letter-spacing);
    /* ※ html と同じ理由で clip。hidden にすると
         body 自体がスクロールコンテナになり、
         セクションの吸着が body 基準になって効かなくなる。 */
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

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

/* ドロワー展開中はスクロールを止める（JSから付け外し） */
body.menu-open {
    overflow: hidden;
}

/* =========================================================
   スプラッシュスクリーン（トップの初回のみ）
   ※ 表示制御は index.js の sessionStorage（ymg_splashed）。
     表示済みのときは header.php の先読みスクリプトが html.is-splashed を付ける。
========================================================= */

.splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    opacity: 1;
    /* ※ スプラッシュが消えてトップが見えきるまでの時間。
         index.js の hideSplash の後始末（setTimeout での remove）は
         この秒数より長くしておくこと。短いと途中でパッと消える。 */
    transition: opacity 1s ease;
}

.splash.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 表示済み（サブ→トップ遷移など）：CSS適用前から完全に隠す */
html.is-splashed .splash {
    display: none;
}

.splash__inner {
    /* ※ ロゴはSVGが正方形（720×720）なので、
         幅だけでなく画面の高さも見て上限を決める。
         幅だけで決めると、低い画面で縦にはみ出す。
       ※ SVG（描画用）と画像（描画後）を重ねるので基準にする。 */
    position: relative;
    width: min(72vw, 55svh, 28rem);
    aspect-ratio: 1 / 1;
}

.splash__logo,
.splash__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.splash__logo svg {
    display: block;
    width: 100%;
    height: auto;
}

/* 描画完了後に重ねるロゴ画像。
   ※ 初期は非表示。JSが .is-drawn を付けたらフェードインする。
   ※ ふわっと出したいので 0.8s かける（以前は 0.25s）。
     表示しきるのは切り替え開始（index.js の 2800ms）から 0.8s 後。
     index.js の setTimeout(hideSplash, 1200) は、この秒数より長くしておくこと。 */
.splash__img {
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* 描画完了：SVGを隠して画像を出す */
.splash.is-drawn .splash__logo {
    opacity: 0;
    /* ※ 画像が半分ほど出てから線を消す（0.4s 遅らせる）。
         同時に消すと、線が先に消えて一瞬ロゴが薄くなる。 */
    transition: opacity 0.4s ease 0.4s;
}

.splash.is-drawn .splash__img {
    opacity: 1;
}

/* 白地にロゴの輪郭を墨黒の線で引く。
   ※ 塗りつぶしはしない。描き終わったらそのまま
     logo.webp（.splash__img）と入れ替える。
   ※ 元のSVGは全パスが fill="none" なので、線を引く前提の作りになっている。
   ※ pathLength="100" は index.php 側で全パスに付与しているので、
     dasharray / dashoffset を 100 固定で扱える。 */
.splash__logo path {
    fill: none;
    stroke: var(--color-bg-dark);
    /* ※ ※重要※ non-scaling-stroke なので、この値はそのまま画面上のpx。
         ロゴを縮めても線は細くならないので、小さい文字ほど太く見える。
       ※ 0.6 を下回ると非Retinaで線が灰色に霞むので下げすぎないこと。 */
    stroke-width: 0.9;
    /* ※ 拡大縮小しても線の太さを一定に保つ */
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: splashDraw 1.8s ease-in-out 0.2s forwards;
}

@keyframes splashDraw {
    to { stroke-dashoffset: 0; }
}

/* 中央のスウォッシュ（曲線）だけ最後に、左から右へ描く。
   ※ 印（.splash__swoosh）は index.php が最初の <path> に付けている。
   ※ ※重要※ ここだけダッシュではなく clip-path で出す。
     この曲線は閉じた細長い形なので、dashoffset で描くと
     右端から左へ行って左端から右へ戻る往復になり、
     「左から右へ」にならない。
     clip-path なら形の左端から右端へ素直に現れる。
   ※ inset を上下左右とも少しはみ出させているのは、
     ぴったり 0 にすると外側の線の半分が切れるため。
   ※ ※重要※ 文字（0.2 + 1.8 ＝ 2.0s）を描き終わってから始める。
     全体で 2.0 + 0.8 ＝ 2.8s。
     index.js の setTimeout(finish, 2800) と必ず揃えること。 */
.splash__logo .splash__swoosh {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    clip-path: inset(-10% 100% -10% -10%);
    animation: splashSwoosh 0.8s ease-out 2s forwards;
}

@keyframes splashSwoosh {
    to { clip-path: inset(-10% -10% -10% -10%); }
}

@media (prefers-reduced-motion: reduce) {
    .splash__logo path {
        animation: none;
        stroke-dashoffset: 0;
    }

    /* ※ クリップも外す。残すとスウォッシュが出ない。 */
    .splash__logo .splash__swoosh {
        clip-path: none;
    }
}

/* ※ dl / dt / dd も入れること。
     dd はブラウザ既定で左に40pxのマージンが付くので、
     消し忘れると中央寄せのものが右にずれる。 */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

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

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

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;
}

/* =========================================================
   汎用パーツ
========================================================= */

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

@media (min-width: 768px) {
    .l-inner { padding-inline: 2.5rem; }
}

.sec-title {
    font-family: var(--font-heading);
    color: var(--color-title);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

@media (min-width: 768px) {
    .sec-title { font-size: 2.25rem; }
}

.sec-en {
    font-family: var(--font-en);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* スクロールリビール（animation.js が is-revealed を付与） */
.js-reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-reveal.is-revealed {
    opacity: 1;
    /* ※ ※重要※ translateY(0) ではなく none にする。
         translateY(0) だと変換が残り、要素が合成レイヤーのまま留まる。
         レイヤーは端末の解像度より低い倍率でラスタライズされることがあり、
         中の画像や文字がガサついて見える
         （一瞬きれいに出たあと荒くなる症状）。
         none なら変換が外れてレイヤーが解放され、通常の解像度で描き直される。
       ※ translateY(2rem) → none の遷移は、none を単位行列として補間するので
         動き自体は変わらない。 */
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- 見出しを左から右へワイプで出す（.js-reveal の変種）----
   ※ トップFVの日本語キャッチ（index.css の .fv__sub）と同じ動き・同じ秒数。
     向こうは読み込み直後に @keyframes で走らせているが、
     こちらは .js-reveal とまったく同じ「.is-revealed が付いたら transition で変わる」形にする。
     観測の仕組みも .js-reveal に相乗りする（animation.js は .js-reveal を見ている）ので、
     マークアップでは2つ並べて付ける。
   ※ ※重要※ 幅は中身なり（fit-content）にすること。
     clip-path は要素の箱を基準に切るので、幅いっぱいのままだと
     文字の無い右側にも時間を使い、文字は途中で出切って見える。
   ※ .js-reveal の既定（フェードアップ）は打ち消す。二重に動かさない。 */
.js-reveal--wipe {
    width: fit-content;
    opacity: 1;
    transform: none;
    transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ※ ※重要※ 隠すのは .is-wipe-ready が付いているときだけ。
     この印は animation.js が観測を始める直前に付ける。
     CSSで最初から隠すと、観測が働かなかったときに見出しが消えたまま残る。 */
.js-reveal--wipe.is-wipe-ready {
    clip-path: inset(0 100% 0 0);
}

.js-reveal--wipe.is-wipe-ready.is-revealed {
    clip-path: inset(0 0 0 0);
}

/* ---- 見出しを行ごとに1回ワイプする ----
   ※ 行の span は animation.js が組み直す（折り返し位置を測ってから作る）。
     マークアップには書かない。
   ※ ※重要※ block ＋ nowrap にすること。
     組み直したあとに中で再び折り返すと、測った行とずれる。
   ※ ※重要※ 幅は中身なり（fit-content）。
     clip-path は箱を基準に切るので、幅いっぱいだと
     文字の無い右側にも時間を使ってしまう。
   ※ 行と行の遅れは animation.js が transition-delay で入れる。 */
.js-wipe-line {
    display: block;
    width: fit-content;
    white-space: nowrap;
    transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.js-wipe-line.is-wipe-ready {
    clip-path: inset(0 100% 0 0);
}

.js-wipe-line.is-wipe-ready.is-revealed {
    clip-path: inset(0 0 0 0);
}

/* ※ 動きを控える設定の端末では、隠さず動かさず最初から出す。 */
@media (prefers-reduced-motion: reduce) {
    .js-reveal--wipe,
    .js-wipe-line {
        clip-path: none;
        transition: none;
    }
}

/* ---- 見出しのアクセントの登場アニメーション ----
   ※ animation.js の decoReveal が、対象に .js-deco-ring / .js-deco-bar を付け、
     画面に入った時点で .is-deco-in を足す。
     どの見出しがどちらかは animation.js の RING / BAR で持っている。
   ※ IntersectionObserver なので、通常スクロールでも
     カルーセルの面（transform で送る）でも同じように動く。
   ※ ※重要※ 隠しておく状態は html.has-js のときだけ。
     JSが動かない環境で装飾が消えたままにならないようにする。
     has-js は header.php の先読みスクリプトが CSS 適用前に付ける。
   ※ 動きを減らす設定の端末では、隠さず動かさず最初から出す
     （全体を prefers-reduced-motion: no-preference で囲っている）。 */

/* ※ 角度の変数。
   ※ ※重要※ inherits: true（以前は false）。
     animation.js が見出しの要素に角度を書き込み、::before がそれを受け継ぐ。
   ※ 以前は CSS の transition でこの変数を動かしていたが、
     iPhone の Safari（WebKit）では途中の描き直しが起きず、
     円が出ないまま止まる／最後にいきなり出ることがあった。
     今は JS が毎フレーム値を書き換えるので、登録が無い環境でも動く。 */
@property --deco-ring {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
    /* 円：上から時計回りに360度描く。
       ※ conic-gradient のマスクで見せる角度を 0deg → 370deg に広げる。
       ※ ※重要※ 角度を動かすのは animation.js（decoReveal の drawRing）。
         見出しの要素に --deco-ring を書き込み、::before が受け継ぐ。
         CSS の transition は使わない（上の @property のコメント参照）。
       ※ 描き終わったら（.is-deco-drawn）マスクを外し、普通の枠線の円に戻す。
         マスクを残すと、小さい円（事業内容の事業一覧の見出しなど、約9px）で
         継ぎ目や端のぼかしにより線が一部欠けて見えるため。 */
    html.has-js .js-deco-ring {
        --deco-ring: 0deg;
    }

    html.has-js .js-deco-ring::before {
        -webkit-mask: conic-gradient(#000 var(--deco-ring), transparent 0);
        mask: conic-gradient(#000 var(--deco-ring), transparent 0);
    }

    html.has-js .js-deco-ring.is-deco-drawn::before {
        -webkit-mask: none;
        mask: none;
    }

    /* 横棒：文字側から外へ伸びる。
       ※ 左の棒は右端を、右の棒は左端を基点にする。
         中央寄せの見出しなので、両側が外へ開く動きになる。
       ※ width ではなく transform を動かす。レイアウトを起こさないので
         動きが滑らかになる。
       ※ ※重要※ transition は .is-deco-in 側だけに持たせる。
         隠す側（scaleX(0)）に持たせると、JSが .js-deco-bar を付けた瞬間に
         棒が伸びた状態から縮む動きが見えてしまう（逆再生に見える）。 */
    html.has-js .js-deco-bar::before,
    html.has-js .js-deco-bar::after {
        transform: scaleX(0);
    }

    html.has-js .js-deco-bar::before { transform-origin: right center; }
    html.has-js .js-deco-bar::after  { transform-origin: left center; }

    html.has-js .js-deco-bar.is-deco-in::before,
    html.has-js .js-deco-bar.is-deco-in::after {
        transform: scaleX(1);
        transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
    }
}

/* u-br-sp / u-br-pc : line break helpers */
.u-br-sp { display: inline; }
.u-br-pc { display: none; }

@media (min-width: 768px) {
    .u-br-sp { display: none; }
    .u-br-pc { display: inline; }
}

/* u-visually-hidden : visible to screen readers only */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* =========================================================
   ヘッダー
========================================================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    /* ※ ドロワー（1100）・オーバーレイ（1050）より上に置く。
       .header は position:fixed でスタッキングコンテキストを作るので、
       中の .hamburger にいくら z-index を付けてもここの値を超えられない。 */
    z-index: 1200;
    width: 100%;
    height: var(--header-height);
    /* バー自体に背景は敷かない。
       ロゴとハンバーガーがそれぞれ背景を持ち、FVの上に浮かぶ形にする。 */
    pointer-events: none;
}

/* 透過させたバーの中で、押せる要素だけクリックを戻す */
.header__logo,
.hamburger,
.gnav {
    pointer-events: auto;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    /* ※ 中央寄せにせず左右の余白も取らない。
       ロゴを左端・ハンバーガーを右端にピタっと寄せる。 */
    width: 100%;
}

/* ※ ロゴは正方形のため、設置部分も正方形にする。
     一辺をヘッダーの高さに合わせて、上下に余白を作らない。 */
.header__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    width: var(--header-height);
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    color: var(--color-primary);
}

.header__logo-mark {
    font-family: var(--font-en);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
}

/* ロゴに合わせて M だけゴールドにする（画像未支給時の代替） */
.is-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header__logo-sub {
    font-family: var(--font-heading);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
}

/* PC用グローバルナビ
   ※ 現在はハンバーガー（ドロワー）に一本化しているため全幅で非表示。
     マークアップは header-nav.php に残してあるので、PCナビを戻すときは
     下の @media 内の .gnav の display を戻すだけでよい。 */
.gnav { display: none; }

@media (min-width: 1024px) {
    /* .gnav { display: block; } ※ハンバーガー常時表示のため無効化 */

    .gnav__list {
        display: flex;
        align-items: center;
        gap: 1.75rem;
    }

    .gnav__link {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        padding-block: 0.25rem;
        color: var(--color-primary);
        transition: color var(--transition);
    }

    .gnav__link-ja {
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.08em;
    }

    .gnav__link-en {
        font-family: var(--font-en);
        font-size: 0.625rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-text-light);
        transition: color var(--transition);
    }

    .gnav__link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -0.25rem;
        width: 0;
        height: 1px;
        background: var(--gradient-gold);
        transition: width 0.3s ease;
    }

    .gnav__link:hover::after,
    .gnav__link.is-current::after {
        width: 100%;
    }

    /* カレントページは英字をゴールドにする */
    .gnav__link.is-current .gnav__link-en {
        color: var(--color-accent-dark);
    }
}

/* ハンバーガー
   ※ ロゴと同じ正方形。一辺はヘッダーの高さと同じ。
   ※ ロゴは白地、こちらは黒地で対にする。
   ※ 前面に出す制御は .header 側の z-index で行う。 */
.hamburger {
    position: relative;
    width: var(--header-height);
    height: var(--header-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--color-bg-dark);
}

@media (min-width: 1024px) {
    .hamburger { display: flex; }
}

/* ※ 線は絶対配置にする。
     平時は translateY で上下に逃がし、バッテン時は
     translateY を外して rotate だけにする。
     2本ともまったく同じ中心で回るので、腾の長さが必ず揃う。
   ※ 以前は flex の隙間（6px）＋線の太さ（1px）= 7px に対して
     translateY に 8px を指定していたため、中心で交わらず
     バッテンの腾が不揃いになっていた。 */
.hamburger__line {
    position: absolute;
    top: 50%;
    left: 50%;
    /* ※ 線の長さは 2rem（以前は 1.75rem）。margin-left は幅の半分のマイナス。
         幅を変えたら必ずセットで直す。ずれると線が左右に寄る。 */
    width: 2rem;
    height: 1px;
    margin-left: -1rem;
    background-color: #FFFFFF;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.hamburger__line:nth-child(1) { transform: translateY(-8px); }
.hamburger__line:nth-child(3) { transform: translateY(8px); }

/* ※ バッテンは 35度（以前は 45度）。
     45度だと縦横同じ長さの×になるので、角度を浅くして横長の×にしている。
     2本は必ず同じ角度のプラスとマイナスにすること。 */
.hamburger.is-active .hamburger__line:nth-child(1) {
    transform: rotate(35deg);
}
.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
}
.hamburger.is-active .hamburger__line:nth-child(3) {
    transform: rotate(-35deg);
}

/* ※ 1440px以上・1600px以上はロゴとハンバーガーの正方形が大きくなる
     （一辺は :root の --header-height）。
     箱だけ大きくすると中身が小さく見えるので、ここで釣り合いを取る。
   ※ ※重要※ 線の長さ（width）と margin-left は必ずセットで直す。
     margin-left は幅の半分のマイナス。ずれると線が左右に寄る。
   ※ translateY は閉じているときの線の間隔。
     バッテン時（.is-active）は rotate だけなので影響しない。 */
@media (min-width: 1440px) {
    .header__logo-mark { font-size: 1.5rem; }
    .header__logo-sub  { font-size: 0.625rem; }

    .hamburger__line {
        width: 2.25rem;
        margin-left: -1.125rem;
    }

    .hamburger__line:nth-child(1) { transform: translateY(-9px); }
    .hamburger__line:nth-child(3) { transform: translateY(9px); }
}

@media (min-width: 1600px) {
    .header__logo-mark { font-size: 1.625rem; }
    .header__logo-sub  { font-size: 0.6875rem; }

    .hamburger__line {
        width: 2.5rem;
        margin-left: -1.25rem;
    }

    .hamburger__line:nth-child(1) { transform: translateY(-10px); }
    .hamburger__line:nth-child(3) { transform: translateY(10px); }
}

/* =========================================================
   ドロワー
========================================================= */

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    /* ※ 区切り線の2色。
         ※ ※重要※ 濃い側は不透明の実色にする。
           半透明にすると、ホバーで伸びる線
           （.drawer__link::after）と重なった部分だけ明るくなり、
           線の色が途中で変わって見える。
         ※ #9A9A9A は rgba(255,255,255,0.5) を
           薄い線（0.12）と背景（#1A1A1A）に重ねたときと
           同じ見た目の色。背景色を変えたらここも計算し直す。 */
    --drawer-line: rgba(255, 255, 255, 0.12);
    --drawer-line-strong: #9A9A9A;
    /* ゴールド（ドロワー内だけ少し明るめ）
       ※ 黒地の上なので、黒地用の金（--color-gold-bright）を使う。
         物件情報の札や FV のお知らせの帯と同じ値。
       ※ ドロワー内の参照先をまとめているだけなので、
         色を変えるときは :root 側を直す。 */
    --drawer-gold: var(--color-gold-bright);
    width: min(82%, 22rem);
    height: 100%;
    /* ※ 上の余白は 0。ハンバーガーと同じ高さの帯は
         下の .drawer__sns が自分の高さで持つ（sticky で上に残すため）。
       ※ 左右の余白を変えるときは .drawer__sns の負のマージンもセットで直す。 */
    padding: 0 1.75rem 2.5rem;
    background-color: var(--color-bg-dark);
    color: #FFFFFF;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer.is-open {
    transform: translateX(0);
}

@media (min-width: 768px) {
    .drawer { width: min(60%, 26rem); }
}

@media (min-width: 1024px) {
    .drawer { width: 26rem; }
}

/* ※ 区切り線は2色。左の 5% だけ濃く、残りを薄くする（以前は 10% → 7.5%）。
     logic のトップ 新着情報（.index-news__link）と同じ考え方で、
     背景を2枚重ねて描く。border だと1本しか引けないため。
   ※ linear-gradient(<色> 0 0) は「その色のベタ塗り1枚」。
     長さと太さは background-size で決める。
   ※ 濃い側の長さは --drawer-line-accent で調整する。
   ※ ホバーで伸びるゴールドの線（.drawer__link::after）は
     この線の上に重なる。金はホバー専用にして、
     平時の濃い部分は白で出している。 */
.drawer__item + .drawer__item,
.drawer__footer {
    --drawer-line-accent: 5%;

    background-image:
        linear-gradient(var(--drawer-line-strong) 0 0),
        linear-gradient(var(--drawer-line) 0 0);
    background-size: var(--drawer-line-accent) 1px, 100% 1px;
    background-repeat: no-repeat;
    background-position: left top, left top;
}

.drawer__link {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 1.125rem;
}

/* ※ ホバーは透明度ではなく、区切り線の左端の濃い部分が
     右へ伸びることで表す。
     金にすると安っ぀ぽく見えるので、線と同じ白（0.5）を伸ばす。
     bottom: -1px に置くことで、次の項目の border-top に
     ちょうど重なる。別の線が増えたようには見えない。
   ※ グラデーションは使わない。1pxの細線だと中央が明るく抜けて
     途切れて見えるため。 */
.drawer__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: var(--drawer-line-strong);
    /* ※ 平時は区切り線の濃い部分と同じ長さ（5%）まで縮めておく。
         そこから右へ伸びるので、静止時の線と繋がって見える。
       ※ --drawer-line-accent（5%）と同じ値。片方だけ変えないこと。 */
    transform: scaleX(0.05);
    transform-origin: left center;
    /* ※ width ではなく transform を動かす。
         レイアウトを起こさないので動きが滑らかになる。
       ※ イージングはドロワー本体・カルーセル（0.45s cubic-bezier(0.16, 1, 0.3, 1)）とは
         あえて変えている。同じだと出だしで一気に伸びきって慌ただしいので、
         減速の穏やかな easeOutCubic で 0.6s かけてゆったり伸ばす（0.9s も試した）。 */
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.drawer__link:hover::after {
    transform: scaleX(1);
}

/* カレントページは英字をゴールドにする */
.drawer__link.is-current .drawer__link-en {
    color: var(--drawer-gold);
}

.drawer__link-ja {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.drawer__link-en {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* テキストの左の丸枠＋右矢印
   ※ 丸は border、矢印は SVG の1本のパス（トップの導線バーと同じ描き方）。
   ※ ※重要※ align-self: center を外さないこと。
     .drawer__link は日本語と英字のベースラインを揃えるため align-items: baseline。
     丸だけはベースラインではなく上下中央に置く。
   ※ ホバーでは金にせず、区切り線の濃い色（--drawer-line-strong）と白にする。
     ドロワーのホバーは白で揃えている（.drawer__link::after と同じ考え方）。
   ※ 矢印は動かさない。丸の中に収まっているので、動かすと枠にぶつかって見える。 */
.drawer__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.75);
    transition: border-color var(--transition), color var(--transition);
}

.drawer__link-icon svg {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
}

.drawer__link-icon path {
    stroke: currentColor;
    stroke-width: 1;
    /* ※ 端と角を丸めない。サイト全体が直角の方針なので揃える。 */
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

.drawer__link:hover .drawer__link-icon {
    border-color: var(--drawer-line-strong);
    color: #FFFFFF;
}

/* ---- 低い画面はナビの中身を小さくする ----
   ※ メニューは7項目あり、下に電話番号・営業時間・ロゴも続く。
     スマホの横向きや古い端末だと、そのままではドロワー内のスクロール量が多い。
   ※ 高さで3段階に分ける。
       768px以上  ：ベースの大きさのまま
       667〜767px：中間
       667px未満 ：一番小さい
   ※ 小さくするのはナビのリスト（.drawer__list）の中だけ。
     下部（.drawer__footer）の電話番号・ロゴは触らない。
   ※ 667px はサイト共通の基準（iPhone SE 第2/第3世代の高さ）。
     index.css の「低い画面は通常スクロールにする」と同じ境目。
   ※ ※重要※ 二つのブロックはこの順番（767 → 666）で置くこと。
     どちらも同じ詳細度で、667px未満は両方に当てはまる。
     逆にすると中間の値が勝って、小さい方が効かない。
   ※ ※重要※ ベースの指定より後ろに置くこと。 */
@media (max-height: 767px) {
    .drawer__list .drawer__link {
        padding-block: 0.9375rem;
    }

    .drawer__list .drawer__link-ja {
        font-size: 0.9375rem;
    }

    .drawer__list .drawer__link-icon {
        width: 1.375rem;
        height: 1.375rem;
    }

    .drawer__list .drawer__link-icon svg {
        width: 0.6875rem;
        height: 0.6875rem;
    }
}

@media (max-height: 666px) {
    .drawer__list .drawer__link {
        padding-block: 0.75rem;
    }

    .drawer__list .drawer__link-ja {
        font-size: 0.875rem;
    }

    /* ※ 英字ラベルを縮めるのはここだけ。
         ベースが 11px しか無いので、中間でも下げると読めなくなる。 */
    .drawer__list .drawer__link-en {
        font-size: 0.625rem;
    }

    .drawer__list .drawer__link-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .drawer__list .drawer__link-icon svg {
        width: 0.625rem;
        height: 0.625rem;
    }
}

/* ドロワー下部：電話と営業時間（SNSは上側に移した。下の .drawer__sns）
   ※ 上の区切り線は上の2色ライン（背景）で引いている。
     border-top は使わない。 */
.drawer__footer {
    padding-top: 1.5rem;
    /* ※ 電話番号（inline-flex）と営業時間を中央に置く。 */
    text-align: center;
}

.drawer__footer-tel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-num);
    font-size: 1.375rem;
    letter-spacing: 0.06em;
    transition: color var(--transition);
}

.drawer__footer-tel:hover {
    color: var(--drawer-gold);
}

.drawer__footer-note {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ドロワー下部の白抜きロゴ（電話番号・営業時間の下）
   ※ フッターのロゴ（.footer__logo）と同じく、周りに金の円の装飾（circle-deco.png）を敷く。
     装飾は背景画像として持たせ、ロゴは円より小さくして中に余白を残す。
     円とロゴの比率（61%）はフッターと揃えている。
   ※ 円の内側は透明なので、ドロワーの黒地がそのまま見える。
   ※ white-logo.png は正方形で、ロゴの上下に透明の余白が入っている。
     円の中では contain で正方形のまま置く（以前は 3:2 で上下を切り抜いていた）。
   ※ 幅を決めた要素なので、margin-inline: auto で中央に置く。
   ※ 円の大きさを変えるときは width / height を同じ値で直す。 */
.drawer__footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9rem;
    height: 9rem;
    margin: 1.75rem auto 0;
    background-image: url('../images/circle-deco.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.drawer__footer-logo img {
    display: block;
    width: 61%;
    height: 61%;
    object-fit: contain;
}

/* SNS（ドロワーの上側・左寄せ）
   ※ ハンバーガー（バツボタン）と同じ高さの帯。高さは --header-height に揃える。
   ※ ※重要※ position: sticky にすること。
     以前は absolute だったが、ドロワーは overflow-y: auto なので
     中をスクロールするとこの帯ごと流れてしまい、
     上に残るバツボタンとずれて見えた。
     sticky なら帯は上に残り、項目だけが下を通る。
   ※ 帯は左右いっぱいに広げる（負のマージンでドロワーの余白を打ち消す）。
     地色を持たせないと、下を通る項目が透けて重なって見える。
   ※ アイコンの左端はメニューの左端と揃える。
     .drawer の左右の余白（1.75rem）を変えたらここも合わせる。 */
.drawer__sns {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--header-height);
    margin-inline: -1.75rem;
    padding-inline: 1.75rem;
    background-color: var(--color-bg-dark);
}

.drawer__sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 1.0625rem;
    transition: border-color var(--transition), color var(--transition);
}

/* フッターと揃えて、塗りつぶさず枠線とアイコンだけゴールドにする */
.drawer__sns-link:hover {
    border-color: var(--drawer-gold);
    color: var(--drawer-gold);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.drawer-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   ページヒーロー（下層ページ共通）
========================================================= */

.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ※ ヘッダーは背景を持たないので、ヒーローをヘッダーの下まで伸ばす。
       ※ 上の退け（padding-top）は入れない。
         見出しはヒーロー全体の上下中央に置く。 */
    height: calc(14rem + var(--header-height));
    background-color: var(--color-bg-dark);
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    overflow: hidden;
}

@media (min-width: 768px) {
    .page-hero { height: calc(20rem + var(--header-height)); }
}

.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* ※ 英字を上（主役）、日本語を下（サブ）にする。
     トップの会社概要セクション・共通のお問い合わせ誘導（.sec-cta）と同じ型。
   ※ ※重要※ 並びは各ページのマークアップ順（p.__en → h1.__title）。
     日本語は下に来るので、間隔は margin-top で取る。
   ※ 見出しの階層（h1）は変えない。大きさの主役を入れ替えているだけ。 */
.page-hero__en {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFFFFF;
}

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

/* ※ 中央寄せなので金の線は左右両方に置く。
     片側だけだと中心がずれて見える。 */
.page-hero__title {
    display: flex;
    align-items: center;
    justify-content: center;
    /* ※ ベース（475px未満）は棒と間隔を縮める。
         「リノベーション事例」のような長めの見出しだと
         .sec-cta と同じ 2.5rem では狭い画面で左右に抜ける。 */
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.75);
}

/* 両側の金の横棒（.sec-cta__ja と同じ色・太さ） */
.page-hero__title::before,
.page-hero__title::after {
    content: '';
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1px;
    background-color: var(--color-accent-light);
}

@media (min-width: 475px) {
    .page-hero__title { gap: 1rem; }

    .page-hero__title::before,
    .page-hero__title::after { width: 2.5rem; }
}

/* ---- 768px以上：左＝テクスチャの見出し面／右＝写真 ----
   ※ 幅が広がるほど写真が拡大されて眠くなるので、写真の受け持つ幅を 58% で止める。
   ※ ※重要※ 写真は各ページが style 属性で background-image に入れている。
     面を分けるために、左の分だけ padding を空けて
     background-origin / clip を content-box にし、右の面にだけ描かせている。
     背景色（--color-bg-dark）も同じ範囲に切られるので、
     写真が読めなかったときの下地として右の面にだけ残る。
   ※ 見出しは絶対配置で左の面に置く。
     親の中央寄せ（flex）は content-box（＝右の面）基準になるので、そのままでは使えない。
   ※ 境目を変えるときは --hero-split の1つだけ直す。
     42：58 はトップの会社概要・物件情報の境目と揃えている。
   ※ 767px以下は写真1枚のまま。分割の境目は 768px。
     （サイト共通のPCの境目は 1025px だが、ここはタブレット縦向きから分割にする） */
@media (min-width: 768px) {
    .page-hero {
        --hero-split: 42%;

        padding-left: var(--hero-split);
        background-origin: content-box;
        background-clip: content-box;
    }

    /* 左の面：モルタルのテクスチャ（トップの会社概要の右側と同じ画像） */
    .page-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: var(--hero-split);
        height: 100%;
        background-color: var(--color-bg-dark);
        background-image: url('../images/mortar-bg.webp');
        background-size: cover;
        background-position: center;
    }

    /* ※ 写真の上に文字を載せなくなったので、黒のオーバーレイは外す。
         写真を落ち着かせたいときは display を戻して、
         left を var(--hero-split) にすれば右の面だけにかかる。 */
    .page-hero::after {
        display: none;
    }

    .page-hero__inner {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: var(--hero-split);
        height: 100%;
    }
}

/* =========================================================
   パンくずリスト
========================================================= */

/* ※ 上下に罫線を引いて、前後の面との切れ目を出す。
     ※ ※重要※ 上の線はページヒーロー（写真）の直下に来るので、
       写真の端と重なって見えにくいことがある。
       地（--color-bg-light）との差で見せている。 */
.breadcrumb {
    /* ※ 上下の余白は全幅 0.75rem。
         以前は全幅 0.875rem → 767px以下 0.5rem／768px以上 0.75rem を経て、この値にした。 */
    padding-block: 0.75rem;
    /* ※ 左右の余白は各セクションと同じ --section-px を使うが、上限は 2rem。
         1.5rem（〜575px）→ 2rem（576px〜）で止まる。
         セクションの余白（768px〜 2.5rem、1025px〜 3rem、1200px〜 4rem）までは広げない。
       ※ 以前はリスト側で 1.25rem／768px以上 2.5rem を直書きしていた。
       ※ 他のセクションと同じく「外側が余白」の形に揃えている。 */
    padding-inline: min(var(--section-px), 2rem);
    border-block: 1px solid var(--color-border);
    background-color: var(--color-bg-light);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* ※ 幅は止めない。画面幅いっぱいに伸ばす（余白は .breadcrumb が持つ）。 */
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    margin-right: 0.5rem;
    color: var(--color-border);
}

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

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

/* =========================================================
   コンテンツ制作中（WIP）
========================================================= */

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

.sec-wip__icon {
    font-size: 2rem;
    color: var(--color-border);
}

.sec-wip__text {
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

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

/* =========================================================
   お問い合わせ誘導セクション
========================================================= */

/* ※ パディングは一番外側（セクション本体）で持ち、
     内側の __inner は max-width と中央寄せだけを担当する。
   ※ ※重要※ 写真の上に白文字を乗せるので、
     必ず黒のオーバーレイを敷くこと。
     写真を差し替えるときもオーバーレイは外さない。
   ※ 背景は contact-bg-option-02-living-dining（リビングダイニング）を試し中。
     以前は contact-bg-option-03-exterior-dusk（夕暮れの外観）。
     その前は事業内容ページの page-hero-service を流用していた。 */
.sec-cta {
    position: relative;
    padding-block: var(--spacing-xxl);
    padding-inline: var(--section-px);
    background-color: var(--color-bg-dark);
    background-image: url('../images/contact-bg-option-02-living-dining.webp');
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

/* ※ 黒のオーバーレイ。写真を押さえて文字を読みやすくする。
   ※ 濃さは 64%（以前は 72%）。写真を差し替えて文字が読みにくいときはここを上げる。
   ※ 中身は __inner の z-index で手前に上げている。 */
.sec-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.64);
}

.sec-cta__inner {
    position: relative;
    z-index: 1;
    /* ※ 〜1024px は 768px（--w-md）で止める。
         ボタンが横型のコンパクトな形なので、
         タブレット幅いっぱいに広げると間延びて見える。
       ※ 1025px以上は下の分岐で広い方（--w-lg）に戻す。 */
    max-width: var(--w-md);
    margin-inline: auto;
}

/* ※ 英字を上（主役）、日本語を下（サブ）にする。トップの会社概要と同じ型。
   ※ ※重要※ 並びは includes/contact.php のマークアップ順（h2 → p）。
     日本語は下に来るので、間隔は margin-top で取る。
   ※ このセクションは中央寄せなので、金の線は左右両方に置く。
     片側だけだと中心がずれて見える。
   ※ CTAは全ページに入る。下層ページの body には
     heading-* クラスを付けていないので、ここの既定を英字主役にしている。
     heading-ja-first が付いたときだけ下のブロックで上書きされる。 */
.sec-cta__ja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.75);
}

.sec-cta__ja::before,
.sec-cta__ja::after {
    content: '';
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1px;
    background-color: var(--color-accent-light);
}

.sec-cta__en {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .sec-cta__en { font-size: 2.75rem; }
}

/* ---- 日本語を主役にする ---- */

.heading-ja-first .sec-cta__ja {
    margin-top: 0.5rem;
    font-size: 1.625rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: #FFFFFF;
}

.heading-ja-first .sec-cta__en {
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    color: var(--color-accent-light);
}

@media (min-width: 768px) {
    .heading-ja-first .sec-cta__ja { font-size: 2rem; }
    .heading-ja-first .sec-cta__en { font-size: 0.8125rem; }
}

.sec-cta__text {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    /* ※ 475px未満は左揃え、475px以上は中央揃え（下の分岐）。
         見出しやボタンは幅に関係なく中央のまま。
       ※ 475px はこの文章専用の分岐。サイト共通のブレークポイントではない。
         （トップの事例・物件情報の箱も 475px で切り替えている） */
    text-align: left;
}

@media (min-width: 475px) {
    .sec-cta__text {
        text-align: center;
    }
}

.sec-cta__buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    /* ※ 475px未満は 1rem。狭い画面では説明文が折り返して縦に長くなるので、
         ボタンまでの間を詰める。475px以上は下の分岐で 2.5rem。
       ※ 475px はこのセクション専用の分岐（.sec-cta__text の揃え方と同じ）。
         サイト共通のブレークポイントではない。 */
    margin-top: 1rem;
}

@media (min-width: 475px) {
    .sec-cta__buttons { margin-top: 2.5rem; }
}

/* ※ 768〜1024px は3列。この幅はFAXを隠しているのでカードは3枚。 */
@media (min-width: 768px) {
    .sec-cta__buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ※ 3列になるので、SPの幅制限と中央寄せは解除する。
         margin-inline を戻さないと、列の中で中身なりの幅になる。 */
    .sec-cta__button {
        max-width: none;
        margin-inline: 0;
    }
}

/* ※ 1025px以上はFAXが戻って4枚になるので 2×2 に戻す。
     ※ ※重要※ このブロックは下の 1200px より前に置くこと。
       後ろに置くと 1200px以上の4列を打ち消す。 */
@media (min-width: 1025px) {
    .sec-cta__buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ※ 4つ横並びにするのは1200pxから。
     1024pxだと1枚あたり224pxしかなく、電話番号が入り切らない。 */
@media (min-width: 1200px) {
    .sec-cta__buttons {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- ボタン ----
   ※ 〜1024px はコンパクトな横型（左＝アイコン／右＝テキスト）。
     1025px以上は従来どおり縦積みの中央寄せ（下の分岐で戻す）。 */
.sec-cta__button {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* ※ 左は0。アイコンのボックスを枠の内側にぴったり付ける。 */
    padding: 0 1rem 0 0;
    /* ※ 〜767px は1列なので、幅を止めて中央に置く。
         全幅に伸ばすと横に間延びてボタンに見えない。
       ※ 最大幅は 360px（以前は 400px）。
       ※ width: 100% が必要。グリッドでは margin-inline: auto を付けると
         引き伸ばし（stretch）が外れ、中身なりの幅になる。
       ※ 768px以上は3列になるので下の分岐で解除する。 */
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-align: left;
    transition: background-color var(--transition), border-color var(--transition);
}

/* ※ アイコンは正方形のボックスに入れる。
     works / property の導線バーの矢印（.sec-link__more-btn）と同じ型。
     右の1本線が仕切りになり、ボタンの高さもこのボックスが決める。
   ※ 中の丸い枠は入れない。ボタンが小さいので、
     正方形・円・アイコンの3重になるとうるさい。 */
.sec-cta__button i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 1.125rem;
    transition: border-color var(--transition);
}

/* ※ メールだけアイコンを画像（airplane-white.png）にしている。
     ボックス・仕切り線・中央寄せは上の .sec-cta__button i がそのまま持つので、
     ここでは中の画像の大きさだけ指定する。
   ※ 1.375rem は他のアイコン（font-size 1.125rem）より少し大きめ。
     縦横比が分からないので height: auto にしている。
   ※ 1025px以上は <i> が width/height: auto になるので、
     画像の大きさがそのままボックスの大きさになる。 */
.sec-cta__button-img img {
    display: block;
    width: 1.375rem;
    height: auto;
}

/* ---- 右斜め上の矢印の箱（767px以下だけ）----
   ※ 767px以下は「[↗の矢印の箱]　[元のアイコン] ラベル」の並びにする。
     左の正方形の箱には元のアイコン（<i>）の代わりに矢印を入れ、
     元のアイコンは箱を外してラベルの左に小さく置く（下の 767px以下の分岐）。
   ※ 箱の形（正方形 3.5rem＋右の仕切り線）は、これまでの .sec-cta__button i と同じ。
     中の円の枠（2.25rem）は事例・物件情報の導線バー（index.css の .sec-link__more-btn）と同じ大きさ。
   ※ 矢印の線は他の導線と同じ（太さ1、端と角は丸めない）。色は文字色（白）。
   ※ ※重要※ 768px以上は隠す（下の分岐）。768〜1024px の3列・1025px以上の縦積みは従来どおり。 */
.sec-cta__button-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    transition: border-color var(--transition);
}

.sec-cta__button-arrow::before,
.sec-cta__button-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

/* 下敷きの円（常に表示） */
.sec-cta__button-arrow::before {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ── 円の枠：ホバーで真上から360度、線を描く ──
   ※ ページトップ（.footer__pagetop-btn）・トップの導線バー（index.css）と同じ仕組み。
     薄い円（::before）を下敷きにして、同じ大きさの白い円（::after）を重ね、
     conic-gradient のマスクで見せる角度を 0deg → 360deg に広げる。
     conic-gradient は真上（12時）から時計回りなので、上から描かれる。
   ※ ※重要※ 角度の変数 --cta-ring はここで @property 登録している。
     登録しないと補間されず、一瞬で円が出る。
     お問い合わせ誘導は全ページにあるので common.css に別名で登録する
     （--link-ring は index.css、--pagetop-ring はページトップが使っている）。
   ※ 離したときは巻き戻さず、フェードで消してから角度を 0 に戻す。
   ※ 速さ（0.6s）とイージングは他の円と揃えている。
   ※ スマホではタップしたときに描かれる（この箱が出るのは 767px以下だけ）。 */
@property --cta-ring {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.sec-cta__button-arrow::after {
    --cta-ring: 0deg;

    border: 1px solid #FFFFFF;
    -webkit-mask: conic-gradient(#000 var(--cta-ring), transparent 0);
    mask: conic-gradient(#000 var(--cta-ring), transparent 0);
    opacity: 0;
    /* ※ 離したとき：0.25s で消してから、角度を一瞬で 0 に戻す。 */
    transition: opacity 0.25s ease, --cta-ring 0s linear 0.25s;
}

a.sec-cta__button:hover .sec-cta__button-arrow::after {
    --cta-ring: 360deg;
    opacity: 1;
    /* ※ 入るときはすぐ見せて、角度だけ時間をかけて広げる。 */
    transition: opacity 0s, --cta-ring 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ※ アニメーションを控える設定では描かずに、円をそのまま出す。
   ※ ※重要※ 上の :hover の指定より後ろに置くこと。 */
@media (prefers-reduced-motion: reduce) {
    .sec-cta__button-arrow::after,
    a.sec-cta__button:hover .sec-cta__button-arrow::after {
        transition: none;
    }
}

.sec-cta__button-arrow svg {
    /* ※ 円（::before / ::after）より前面に出す */
    position: relative;
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

.sec-cta__button-arrow path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

/* ※ ホバー（タップ）で仕切り線も枠と同じ濃さに上げる。
   ※ 円は上の ::after が描くので、下敷き（::before）の色は変えない。 */
a.sec-cta__button:hover .sec-cta__button-arrow {
    border-color: rgba(255, 255, 255, 0.6);
}

/* ※ ※重要※ ここだけ max-width を使っている。
     768〜1024px は元のアイコンを正方形の箱に入れたままなので、
     min-width で書くと、その幅で箱の指定を全部戻す必要が出る。 */
@media (max-width: 767px) {
    /* ※ 元のアイコンとラベルの間は 0.625rem。
         矢印の箱と元のアイコンの間は、箱の margin-right を足して 1rem（以前の箱とラベルの間と同じ）。 */
    .sec-cta__button {
        gap: 0.625rem;
    }

    .sec-cta__button-arrow {
        margin-right: 0.375rem;
    }

    /* 元のアイコン：箱と仕切り線を外し、ラベルの左に小さく置く。 */
    .sec-cta__button i {
        width: auto;
        height: auto;
        border-right: 0;
        font-size: 1rem;
    }

    /* メールの紙飛行機（画像）も他のアイコンと同じくらいの大きさにする。 */
    .sec-cta__button-img img {
        width: 1.125rem;
    }

    /* ※ 並びは お電話 → LINE → メール（メールを一番下にする）。
         768px以上は従来どおり お電話 → メール → LINE（→ FAX）。
       ※ ※重要※ 共通の order の指定（.sec-cta__button--mail { order: 2; } など）は
         このブロックより後ろにあるので、親（.sec-cta__buttons）を含めて詳細度を上げている。 */
    .sec-cta__buttons .sec-cta__button--line { order: 2; }
    .sec-cta__buttons .sec-cta__button--mail { order: 3; }
}

@media (min-width: 768px) {
    .sec-cta__button-arrow {
        display: none;
    }
}

/* ※ テキストのまとまり。
     これが無いと、アイコンとラベル・番号・注記が
     全部横一列に並んでしまう。 */
.sec-cta__button-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

/* ※ 768〜1024px は3列に並ぶので、1枚あたりの幅が狭くなる
     （768px ちょうどで約 219px）。
     一番長いラベル（「お電話でのお問い合わせ」「メールでのお問い合わせ」）を1行に収めるため、
     字を少し詰めて左右の余白も削る。 */
@media (min-width: 768px) and (max-width: 1024px) {
    .sec-cta__button {
        gap: 0.75rem;
        padding-right: 0.75rem;
    }

    /* ※ アイコンのボックスも一回り小さくする。 */
    .sec-cta__button i {
        width: 3rem;
        height: 3rem;
    }

    .sec-cta__button-label {
        font-size: 0.75rem;
        /* ※ 768px ちょうどだとラベルが2行になることがある。
             行間を詰めて、2行でもボックスの高さに収める。 */
        line-height: 1.4;
    }
}

/* リンクのものだけホバーさせる（FAXは押せないため） */
a.sec-cta__button:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ※ アイコン右の仕切り線も枠と同じ濃さに上げる。
     枠だけ明るくなると、仕切り線だけ取り残されたように見える。
   ※ 1025px以上は仕切り線自体が無いので何も起きない。 */
a.sec-cta__button:hover i {
    border-right-color: rgba(255, 255, 255, 0.6);
}

/* ※ ※重要※ FAXカードは 1024px以下では出さない。
     横型のコンパクトなボタンにしたので、
     押せないFAXまで並べると導線が薄まる。
     番号はフッターの Contact に載っているので情報は残る。
   ※ 1025px以上は下の分岐で戻す。 */
.sec-cta__button--fax {
    display: none;
    cursor: default;
}

/* ※ 1列・2列のときは お電話 → フォーム → LINE → FAX の順にする。
     押せるものを先に、押せないFAXを最後に回す。
   ※ HTMLの順番（電話・FAX・フォーム・LINE）は変えず、
     4つ横並びのときは元の順に戻す。 */
.sec-cta__button--mail { order: 2; }
.sec-cta__button--line { order: 3; }
.sec-cta__button--fax  { order: 4; }

@media (min-width: 1200px) {
    .sec-cta__button--mail,
    .sec-cta__button--line,
    .sec-cta__button--fax { order: 0; }
}

.sec-cta__button-label {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

.sec-cta__button-num {
    /* ※ ※重要※ 1024px以下では出さない。
         横型のコンパクトなボタンではラベルだけにして高さを抑える。
         カード自体が発信リンクなので、番号が見えなくても導線は成立する。
       ※ 1025px以上は下の分岐で戻す。 */
    display: none;
    font-family: var(--font-num);
    font-size: 1.625rem;
    letter-spacing: 0.06em;
    transition: color var(--transition);
}

/* ※ ホバーで番号をゴールドにするのはリンクのものだけ。
     FAXは押せないので、枠線・地の色と同じく a に絞る。
   ※ 番号が出るのは 1025px以上だけなので、効くのもその幅。 */
a.sec-cta__button:hover .sec-cta__button-num {
    color: var(--color-accent-light);
}

.sec-cta__button-note {
    /* ※ 番号と同じく 1024px以下では出さない（営業時間・24時間受付）。 */
    display: none;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ---- 1025px以上：従来の縦積み・中央寄せに戻す ----
   ※ カードが広く使えるので、横型より縦積みの方が収まりが良い。
   ※ 1024px で区切っているのはサイト全体の境目に揃えているため。 */
@media (min-width: 1025px) {
    /* ※ ※重要※ 幅は広げない。どの幅でも --w-md（768px）で止める。
         以前はボタンが縦積みのカードに戻るのに合わせて
         --w-lg（1200px）に戻していた。
       ※ .page-end の中ではさらに --w-sm（576px）で上書きされる。
         そちらも 768px にしたいときはセットで直すこと。 */

    /* ※ 1024px以下で隠しているFAX・電話番号・注記を戻す。 */
    .sec-cta__button--fax {
        display: flex;
    }

    .sec-cta__button-num,
    .sec-cta__button-note {
        display: block;
    }

    .sec-cta__button {
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
        padding: 1.5rem 1.25rem;
        text-align: center;
    }

    .sec-cta__button i {
        width: auto;
        height: auto;
        border-right: 0;
        font-size: inherit;
    }

    /* ※ LINE とメールのアイコンだけ少し大きくする（1025px以上の縦積みのとき）。
         LINE の形は同じ大きさでも電話・FAXより小さく見えるため。
         LINE：16px（ボタンの文字の大きさ）→ 1.25rem（20px）
         メール（紙飛行機の画像）：1.375rem（22px）→ 1.5rem（24px）
       ※ 1024px以下の横型（正方形のボックス入り）は変えていない。 */
    .sec-cta__button--line i {
        font-size: 1.25rem;
    }

    .sec-cta__button--mail .sec-cta__button-img img {
        width: 1.5rem;
    }

    .sec-cta__button-body {
        align-items: center;
        gap: 0.25rem;
    }
}

/* =========================================================
   ライトボックス（写真の拡大表示）
   土台は animation.js が body 直下に1つだけ生成する。

   ※ logic の works.css の同名ブロックを ymg の色・変数に合わせたもの。
   ※ 角は落とさない。サイト全体が直角の方針。
   ※ 閉じるボタンと矢印は CSS で描く（画像・アイコンフォントを使わない）。
   ※ ※重要※ 写真は contain で全体を見せる。
     logic は 4:3 の枠に cover で塗っているが、こちらは物件写真なので
     切り抜かれると困る（縦位置の写真も入る）。
   ※ 重なり順：ヘッダー（1200）・ドロワー（1100）より上。
     スプラッシュ（2000）よりは下。
========================================================= */

.lightbox {
    --lb-dur: 0.3s;
    /* ※ 写真の上下に空ける余白。閉じるボタン（2.75rem）と枚数表示を逃がす場所。
         2.75rem 未満にすると写真の上にボタンが乗る。 */
    --lb-pad: 3rem;
    /* ※ キャプションと gap の見込み。キャプションが2行になる運用なら増やす。 */
    --lb-meta: 4rem;
    --lb-w: 70rem;

    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lb-dur) ease, visibility var(--lb-dur) ease;
}

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

/* 背景。クリックで閉じる（JS側が data-lb-close を見ている）。 */
.lightbox__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.92);
}

.lightbox__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(100%, var(--lb-w));
    /* ※ 閉じるボタンと枚数表示を上下に逃がす分の余白。 */
    padding-block: var(--lb-pad);
    transform: translateY(1.25rem);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.is-open .lightbox__inner {
    transform: translateY(0);
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
}

/* 拡大した写真
   ※ 縦横比は元画像のまま。画面に入る大きさまで縮めるだけにする。
   ※ 高さの上限は「画面の高さ − 上下の余白 − キャプション分」。
     .lightbox の変数を参照しているので、余白を変えれば自動で追従する。 */
.lightbox__image {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - var(--lb-pad) * 2 - var(--lb-meta));
    width: auto;
    height: auto;
    object-fit: contain;
    background-color: var(--color-bg-dark);
}

.lightbox__caption {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.lightbox__count {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-num);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
}

/* 閉じるボタン（×）
   ※ 2本の線を疑似要素で描いて交差させる。 */
.lightbox__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    transition: opacity var(--transition);
}

.lightbox__close::before,
.lightbox__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.375rem;
    height: 1px;
    background-color: #FFFFFF;
}

.lightbox__close::before { transform: translate(-50%, -50%) rotate(35deg); }
.lightbox__close::after  { transform: translate(-50%, -50%) rotate(-35deg); }

.lightbox__close:is(:hover, :focus-visible) {
    opacity: 0.6;
}

/* 前後送り
   ※ 形は border 2辺を回したシェブロン。
   ※ タップ領域を確保するため、ボタン自体は広く取っておく。 */
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 4rem;
    transition: opacity var(--transition);
}

.lightbox__nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 0.875rem;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
}

.lightbox__nav--prev { left: 0; }
.lightbox__nav--prev::before { transform: translate(-50%, -50%) rotate(-135deg); }

.lightbox__nav--next { right: 0; }
.lightbox__nav--next::before { transform: translate(-50%, -50%) rotate(45deg); }

.lightbox__nav:is(:hover, :focus-visible) {
    opacity: 0.6;
}

/* ※ 1枚だけのときは JS が hidden を付ける。
     button は既定で hidden が効くが、上で position を与えているので明示的に消す。 */
.lightbox [hidden] {
    display: none;
}

/* 拡大中は背面のスクロールを止める。
   ※ ドロワーの .menu-open とは別に持つ。兼用すると
     メニューを閉じたときにライトボックス側のロックまで外れる。 */
.lightbox-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox__inner {
        transition: none;
    }

    .lightbox__inner {
        transform: none;
    }
}

/* =========================================================
   フッター
========================================================= */

/* ※ パディングは一番外側（.footer）で持ち、
     __inner は max-width と中央寄せだけを担当する。 */
.footer {
    padding-inline: 1.25rem;
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}

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

.footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    /* ※ フッターは他のセクションより狭くする。
         ※ 〜1023px は 768px（--w-md）。ナビが2列なので、
           タブレット幅いっぱいに広げると列の間が開きすぎる。
         ※ 1024px以上は下の分岐で 1024px に戻す。
           この値はセクション幅のトークン（--w-sm/md/lg/xl）に
           無い。フッター固有の幅なので直書きしている。
         ※ ※重要※ 下の .footer__bottom と必ず同じ値にすること。
           片方だけ変えると区切り線とコンテンツの左右がズレる。 */
    max-width: var(--w-md);
    margin-inline: auto;
    /* ※ ベース（〜1023px）は上 4rem（--spacing-xl）・下 3rem。
         下にコピーライトの帯（.footer__bottom）が続くので、下だけ詰めている。
       ※ 1024px以上は下の分岐で上下とも --spacing-xxl。 */
    padding-block: var(--spacing-xl) 3rem;
}

/* ※ 左（ロゴ）：右（ナビ）= 3:7。
     ブランド側がロゴだけになったので、ナビに幅を回している。
     4列に増えたことで Contact の番号が折れやすいため。 */
@media (min-width: 1024px) {
    .footer__inner {
        display: grid;
        grid-template-columns: 3fr 7fr;
        gap: var(--spacing-xl);
        padding-block: var(--spacing-xxl);
    }

    /* ※ 1024px以上はフッター固有の 1024px 幅に戻す。
         ※ 必ず2つセットで変えること。 */
    .footer__inner,
    .footer__bottom {
        max-width: 1024px;
    }
}

/* ※ ロゴのみ。円形のフレームを付ける。 */
.footer__brand {
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .footer__brand {
        justify-content: flex-start;
    }
}

/* ※ 円形の装飾画像で囲う。
     ※ 装飾は背景画像として持たせる。別の <img> にすると
       ロゴとの重ね順を揃えるのに余計な入れ子が必要になる。
     ※ ロゴ画像は装飾より小さくして、円の中に余白を残す。
     ※ ベース（〜1023px）は 11rem。ロゴだけの列が横幅いっぱいになるので、
       14rem だと大きすぎる。
     ※ 1024px以上は下の分岐で 14rem。 */
.footer__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11rem;
    height: 11rem;
    background-image: url('../images/circle-deco.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-primary);
}

.footer__logo-img {
    /* ※ 円形の装飾（背景）より小さくして、円の中に余白を残す。
         ※ 装飾を 11rem から 14rem に広げたので、
           ロゴの見た目の大きさを保つために割合を下げている。
           78% × 11rem ≒ 61% × 14rem。
         装飾との大きさの差を変えるときはこの値を触る。 */
    width: 61%;
    height: 61%;
    object-fit: contain;
}

/* ※ ブランド列に幅の余裕があるので、PCでは円を大きくする。
     3fr / 10 × 1200px なので、列の幅は約340px。 */
@media (min-width: 1024px) {
    .footer__logo {
        width: 14rem;
        height: 14rem;
    }
}

/* ※ ナビの4列目として並ぶので、他のリストと余白を揃える。 */
.footer__sns {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.footer__sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    font-size: 1rem;
    transition: border-color var(--transition), color var(--transition);
}

/* ホバーは塗りつぶさず、枠線とアイコンだけゴールドにする */
.footer__sns-link:hover {
    border-color: var(--color-accent-dark);
    color: var(--color-accent-dark);
}

/* ナビゲーション（4グループ） */
.footer__nav-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (min-width: 576px) {
    .footer__nav-group {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer__nav-title {
    /* ※ ※重要※ flex にする。
         inline-block の丸を vertical-align で合わせると、
         英字のベースラインに引っ張られて上下の中心がずれる。 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
    /* ── 下線：左端だけ濃い短い線＋残りは薄い線 ──
       ※ ドロワーの区切り線（.drawer__item + .drawer__item）と同じ表現。
         border では1色しか引けないので、背景を2枚重ねて描く（以前は border-bottom）。
       ※ 濃い側の長さは割合ではなく固定（1rem）。
         フッターは列ごとに幅が 140〜190px ほどしかなく、
         ドロワーと同じ 5% だと 7〜9px で点のようになるため。
       ※ 濃い側は金にしない。左に金の中抜きの丸（::before）があるので、
         金が重なってうるさくなる。下線（--color-border）より数段濃い暖かいグレー。
       ※ 長さと色はこの2つの変数だけで調整する。 */
    --footer-title-line-accent: 1rem;
    --footer-title-line-strong: #A8A39B;

    background-image:
        linear-gradient(var(--footer-title-line-strong) 0 0),
        linear-gradient(var(--color-border) 0 0);
    background-size: var(--footer-title-line-accent) 1px, 100% 1px;
    background-repeat: no-repeat;
    background-position: left bottom, left bottom;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-title);
}

/* ※ 見出しの左に置くゴールドの中抜き正円。
     ※ 塗りつぶさない。ロゴのスウォッシュや他の金の罫線と
       トーンを揃えるため、線だけで見せる。
     ※ グラデーションは使わない。1pxの細線だと中央が抜けて見える。
     ※ 大きさを変えるときは width / height を同じ値で直す。 */
.footer__nav-title::before {
    content: '';
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
}

.footer__nav-list {
    margin-top: 0.875rem;
    /* ※ 475px未満は 0.825rem。列が狭いので少し下げる。
       ※ 475px はこの文字専用の分岐。サイト共通のブレークポイントではない。 */
    font-size: 0.825rem;
}

@media (min-width: 475px) {
    .footer__nav-list { font-size: 0.875rem; }
}

.footer__nav-item + .footer__nav-item {
    margin-top: 0.625rem;
}

/* ※ 左に丸枠＋右矢印（.footer__nav-icon）、右に文字（.footer__nav-label）。
   ※ ※重要※ align-items は flex-start。
     幅の狭い列では「リノベーション事例」が2行に折り返すので、
     丸は1行目に合わせる（center だと2行の真ん中に来る）。
     丸の上下の位置は .footer__nav-icon の margin-top で合わせている。 */
.footer__nav-link {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: color var(--transition);
}

.footer__nav-link:hover { color: var(--color-accent-dark); }

/* 丸枠＋右矢印
   ※ 丸は border、矢印は SVG の1本のパス（ドロワー・トップの導線と同じ描き方）。
   ※ 矢印は currentColor なので文字と同じ色。ホバーで文字と一緒に金になる。
     丸の枠もホバーで金にする（フッターのホバーは金で揃えている）。
   ※ 上下の位置：1行の高さ（1lh）と丸の差の半分だけ下げて、1行目の中央に合わせる。
     lh が使えない環境は前の行の固定値（行の高さ 1.8〜1.9 のときの近似値）が使われる。
   ※ 大きさを変えるときは width / height を同じ値で直し、
     FAX の字下げ（.footer__nav-text の padding-left）も合わせる。 */
.footer__nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.25rem;
    margin-top: calc((1lh - 1.125rem) / 2);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: border-color var(--transition);
}

.footer__nav-icon svg {
    display: block;
    width: 0.5625rem;
    height: 0.5625rem;
}

.footer__nav-icon path {
    stroke: currentColor;
    stroke-width: 1.5;
    /* ※ 端と角を丸めない。サイト全体が直角の方針なので揃える。 */
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

.footer__nav-link:hover .footer__nav-icon {
    border-color: var(--color-accent-dark);
}

/* カレントページは、左の矢印と丸の枠だけをゴールドにする
   ※ 文字の色は変えない。下線も引かない（以前は文字の下に金の下線を引いていた）。
   ※ 色はホバーと同じ --color-accent-dark。矢印は currentColor なので color で変える。
   ※ 明るい地の上だが、文字ではなく装飾（細い線）なので --color-gold-deep にはしない。 */
.footer__nav-link.is-current .footer__nav-icon {
    border-color: var(--color-accent-dark);
    color: var(--color-accent-dark);
}

/* FAXなどリンクでない項目
   ※ 矢印は付けない（押せないので）。文字の左端だけ、リンクの文字と揃える。
     字下げは 丸の幅（1.125rem）＋間隔（0.5rem）。丸や間隔を変えたらここも合わせる。 */
.footer__nav-text {
    display: inline-block;
    padding-left: calc(1.125rem + 0.5rem);
    color: var(--color-text-light);
}

/* コピーライト帯
   ※ 区切り線とコピーライトの幅は .footer__inner に揃える。
     片方だけ変えると線とコンテンツの左右がズレる。
   ※ コピーライトを左、ページトップを右端に振る（すべての幅）。
     以前は 1024px以下だけコピーライトを中央に置き、ページトップを出していなかった。
     1025px以上（.page-end の中）と同じ並びにしている。 */
.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: var(--w-md);
    margin-inline: auto;
    border-top: 1px solid var(--color-border);
}

/* ※ 幅の制限は親（.footer__bottom）が持つので、
     こちらは余白と文字の見た目だけを担う。
   ※ 左揃え（以前は 1024px以下で中央揃え）。右にページトップが並ぶため。 */
.footer__copyright {
    padding-block: 1.25rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-align: left;
    color: var(--color-text-light);
}

/* ページ先頭へ戻る導線。
   ※ すべての幅で出す（以前は帯が左右をまたぐ 1025px以上だけ）。
   ※ 1024px以下のフッターは明るい地なので、文字と円は黒（--color-primary）。
     濃さは opacity 0.63 で、コピーライトの文字（--color-text-light＝#6a6a6a）とほぼ同じ色になる。
     1025px以上は写真の上なので、.page-end の分岐で白＋opacity 0.5 に上書きしている。 */
.footer__pagetop {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-primary);
    /* ※ 平時は半透明。ホバーで不透明に上げるだけにする。
         色を変えたり動かしたりはしない。
       ※ opacity で持つのは、文字と円の枠（currentColor）の
         両方が一緒に変わるため。 */
    opacity: 0.63;
    transition: opacity var(--transition);
}

/* 矢印を囲む正円の枠。
   ※ works / property の導線バーの丸と同じ考え方。
     こちらは外側の正方形が無いので、円だけを直接描く。
   ※ 枠は currentColor。濃さの制御は親の opacity に任せる。
   ※ 大きさを変えるときは width / height を同じ値で直す。 */
.footer__pagetop-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
}

/* ── 円の枠：ホバーで真上から360度、線を描く ──
   ※ 事例／物件情報の導線バー・会社概要のボタン（index.css）と同じ仕組み。
     薄い円（::before）を下敷きにして、同じ大きさの円（::after）を重ね、
     conic-gradient のマスクで見せる角度を 0deg → 360deg に広げる。
     conic-gradient は真上（12時）から時計回りなので、上から描かれる。
   ※ 色はどちらも currentColor（白）。ホバー中は下敷きを薄くして、
     描かれた部分との差を出している。全体の濃さは親（.footer__pagetop）の opacity。
   ※ ※重要※ 角度の変数 --pagetop-ring は下で @property 登録している。
     登録しないと補間されず、一瞬で円が出る。
     導線バーの --link-ring は index.css（トップだけ）で登録しているので使わない。
     フッターは全ページにあるので、common.css に別名で登録している。
   ※ 離したときは巻き戻さず、フェードで消してから角度を 0 に戻す。
   ※ 大きさは親（.footer__pagetop-btn）に inset: 0 で合わせているので、
     円の大きさを変えるときは親の width / height だけ直せばよい。 */
@property --pagetop-ring {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.footer__pagetop-btn::before,
.footer__pagetop-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    pointer-events: none;
}

/* 下敷きの円
   ※ 平時はそのまま（見た目は親の opacity 0.5 で以前と同じ濃さ）。
     ホバー中だけ 0.4 に薄めて、上に描かれる円との差を出す。
     薄めないと、親が不透明になったとき下敷きも白になり、描かれる動きが見えない。 */
.footer__pagetop-btn::before {
    transition: opacity var(--transition);
}

.footer__pagetop:hover .footer__pagetop-btn::before {
    opacity: 0.4;
}

/* 描かれる円 */
.footer__pagetop-btn::after {
    --pagetop-ring: 0deg;

    -webkit-mask: conic-gradient(#000 var(--pagetop-ring), transparent 0);
    mask: conic-gradient(#000 var(--pagetop-ring), transparent 0);
    opacity: 0;
    /* ※ 離したとき：0.25s で消してから、角度を一瞬で 0 に戻す。 */
    transition: opacity 0.25s ease, --pagetop-ring 0s linear 0.25s;
}

.footer__pagetop:hover .footer__pagetop-btn::after {
    --pagetop-ring: 360deg;
    opacity: 1;
    /* ※ 入るときはすぐ見せて、角度だけ時間をかけて広げる。速さは導線バーと揃えている。 */
    transition: opacity 0s, --pagetop-ring 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ※ アニメーションを控える設定では描かずに、円をそのまま出す。
   ※ ※重要※ 上の :hover の指定より後ろに置くこと。 */
@media (prefers-reduced-motion: reduce) {
    .footer__pagetop-btn::after,
    .footer__pagetop:hover .footer__pagetop-btn::after {
        transition: none;
    }
}

.footer__pagetop svg {
    /* ※ 円（::before / ::after）より前面に出す */
    position: relative;
    display: block;
    width: 1rem;
    height: 1rem;
}

.footer__pagetop path {
    stroke: currentColor;
    /* ※ viewBox 24 を 16px で描くので、見た目の太さは
         1.5 × 16/24 = 1px になる。 */
    stroke-width: 1.5;
    /* ※ 端と角を丸めない。サイト全体が直角の方針なので揃える。 */
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

/* ※ ホバーで文字・矢印・円を金にする（以前は不透明に上げるだけ）。
     色はフッターのナビ・SNS のホバーと同じ --color-accent-dark（＝--color-gold）。
   ※ 文字・矢印・円は currentColor なので、color を変えればすべて金になる。
     下敷きの円（::before）はホバー中 opacity 0.4 なので薄い金になり、描かれる円との差が残る。
   ※ opacity を 1 にするのは、金を薄めずにそのままの色で見せるため。
   ※ ※重要※ 1025px以上は .page-end の分岐で色を白に上書きしているので、
     ホバーの金もそちらで書き直している。 */
.footer__pagetop {
    transition: opacity var(--transition), color var(--transition);
}

.footer__pagetop:hover {
    opacity: 1;
    color: var(--color-accent-dark);
}

/* =========================================================
   ページ末尾（お問い合わせ誘導＋フッターの横並び）

   ※ 1025px以上で「左＝フッター／右＝お問い合わせ」に並べる。
     入れ物（.page-end）は includes/contact.php で開き、
     includes/footer.php で閉じている。
   ※ ※重要※ HTMLの並びは お問い合わせ → フッター のまま。
     読み上げの順番を変えないよう、見た目だけを
     grid-column で入れ替えている。
   ※ お問い合わせ誘導を読み込まないページ（thanks.php）は
     入れ物自体が無いので、フッターは従来どおり全幅。
   ※ 1024px以下はただの div なので、これまでどおり上下に並ぶ。
     （index.php のカルーセルが 1024px までなので境目を揃えている）
========================================================= */

@media (min-width: 1025px) {
    .page-end {
        /* ※ ※重要※ 左カラムの幅はこの1つで決める。
             グリッドの列幅と、下の地色の切れ目の両方がこれを見ている。
             別々に書くと必ずずれる。 */
        --page-end-split: 50%;

        display: grid;
        grid-template-columns: var(--page-end-split) 1fr;
        /* ※ 1段目＝左右の2カラム、2段目＝全幅のコピーライト。 */
        grid-template-rows: auto auto;
        /* ※ 既定の stretch のまま。低い方が高い方に合わせて伸びる。 */
        align-items: stretch;

        /* ※ 左カラムの地色。2段目（コピーライト）まで通す。
             ※ フッター本体に背景色を持たせると 1段目で止まるので、
               入れ物側で引く。右半分は transparent にして、
               お問い合わせの写真がそのまま見えるようにする。 */
        background-image: linear-gradient(to right,
            var(--color-bg-light) 0 var(--page-end-split),
            transparent          var(--page-end-split));
    }

    /* ---- 左：フッター ----
       ※ ※重要※ footer は display: contents にする。
         __inner と __bottom を .page-end 直下のマス目に出すため。
         こうしないとコピーライトが左カラムの中から出られず、
         左右をまたぐ全幅の帯にできない。
       ※ footer の箱が消えるので、背景・上罫線・左右パディングは
         __inner と __bottom がそれぞれ持つ。 */
    .page-end .footer {
        display: contents;
    }

    /* ※ 幅が半分になるので、3fr / 7fr の横並びはやめて縦積みに戻す。
         ロゴ（14rem）が左列に収まらない。
       ※ 相手（お問い合わせ）の方が高いときは中身を上下中央に置く。 */
    .page-end .footer__inner {
        grid-row: 1;
        grid-column: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-lg);
        max-width: none;
        padding: var(--spacing-xl) 3rem;
        border-top: 1px solid var(--color-border);
    }

    /* ※ コピーライトは左右をまたいで全幅。
         上の線が2カラムとの区切りになる。
       ※ 背景色は持たせない。左は .page-end の地色、
         右は下に敷かれたお問い合わせの写真がそのまま透ける。
       ※ ※重要※ 上の線は左右で色を変える。
         左は明るい地の上なので --color-border、
         右は写真の上なのでお問い合わせカードの枠と同じ
         rgba(255,255,255,0.25)。--color-border を通すと写真の上で浮き、
         白25%を通すと左で消える。
         border では1色しか引けないので背景で描く。
         切り替え位置は列幅と同じ --page-end-split。
       ※ z-index を上げる。
         お問い合わせの黒オーバーレイ（.sec-cta::after）は
         絶対配置なので、これが無いと線が右半分で隔れる。 */
    .page-end .footer__bottom {
        position: relative;
        z-index: 1;
        grid-row: 2;
        grid-column: 1 / -1;
        /* ※ コピーライトを左、ページトップを右端に振る。 */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        max-width: none;
        padding-inline: 3rem;
        border-top: 0;
        background-image: linear-gradient(to right,
            var(--color-border)       0 var(--page-end-split),
            rgba(255, 255, 255, 0.25)   var(--page-end-split));
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: left top;
    }

    /* ※ 文字と矢印は白。濃さは opacity 0.5 で持つので、
         見た目はお問い合わせカードの枠線系の白になる。
       ※ ※重要※ ベース（1024px以下）は明るい地向けに 黒＋opacity 0.63 なので、ここで上書きする。
         この指定は .footer__pagetop:hover と同じ詳細度で後ろにあるので、
         ホバーの opacity: 1 も下で書き直している。 */
    .page-end .footer__pagetop {
        display: inline-flex;
        color: #FFFFFF;
        opacity: 0.5;
    }

    .page-end .footer__pagetop:hover {
        opacity: 1;
        color: var(--color-accent-dark);
    }

    /* ※ 帯の右半分は写真なので、中央寄せだと文字が写真に乗って読めない。
         左の地色の上に留まるよう左揃えにする。
       ※ ※重要※ 帯の高さはこの要素の高さで決まる
         （ページトップの円 1.75rem より高いため）。
         帯を薄くしたいときはこの padding-block を触る。
         スマホ側の帯（1.25rem）は変えない。 */
    .page-end .footer__copyright {
        padding-block: 0.5rem;
        line-height: 1.4;
        text-align: left;
    }

    .page-end .footer__brand {
        justify-content: center;
    }

    /* ※ 列の幅が半分なので少し小さくする。
         14rem のままだとロゴだけで場所を取りすぎる。 */
    .page-end .footer__logo {
        width: 11rem;
        height: 11rem;
    }

    /* ※ 4列は入らないので 2列×2段にする。
         「リノベーション事例」が折り返さない幅を確保する。 */
    .page-end .footer__nav-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 2.5rem;
    }

    /* ---- 右：お問い合わせ誘導 ----
       ※ ※重要※ 2段目まで伸ばす（grid-row: 1 / -1）。
         背景写真をコピーライトの帯まで通すため。
         1段目だけにすると、帯の右半分がページ背景の白になる。
       ※ 中身は2段合わせた高さの上下中央に置く。 */
    .page-end .sec-cta {
        grid-row: 1 / -1;
        grid-column: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        /* ※ ※重要※ 下だけ多く取る。
             このセクションは2段目（コピーライトの帯）まで伸びていて、
             中身は上下中央。そのままだとボタンが帯に寄って見える。
             中央寄せなので、下に足した分の半分だけ中身が上へ動く。
             ここでは 2.5rem 足して 1.25rem 上げている。
             ボタンと帯の間隔を変えるときはこの 2.5rem を触る。 */
        padding-block: var(--spacing-xxl) calc(var(--spacing-xxl) + 2.5rem);
        padding-inline: 3rem;
    }

    .page-end .sec-cta__inner {
        width: 100%;
        max-width: var(--w-sm);
    }

    /* ※ 幅が半分なので 4列にはしない（1200px以上の指定を戻す）。
         2×2 のときの並びは お電話 → フォーム → LINE → FAX。
         押せないFAXを最後に回す考え方は他の幅と同じ。 */
    .page-end .sec-cta__buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-end .sec-cta__button--mail { order: 2; }
    .page-end .sec-cta__button--line { order: 3; }
    .page-end .sec-cta__button--fax  { order: 4; }

    /* ※ ボタン1枚の幅が狭くなるので、電話番号を画面幅に追従させる。
         1025px でも「0120-535-557」が1行に収まる大きさにしている。 */
    .page-end .sec-cta__button {
        padding-inline: 1rem;
    }

    .page-end .sec-cta__button-num {
        font-size: clamp(1.25rem, 1.6vw, 1.625rem);
    }
}

/* ※ 1280px以上は 40 : 60（左＝フッター／右＝お問い合わせ）にして、
     お問い合わせ側に重心を寄せる。
   ※ 列幅と地色の切れ目はこの変数が兼ねているので、1行で両方変わる。
   ※ 1025〜1279px を 50% のままにしているのは、
     この幅で 40% にするとフッター側が 410px 前後になり、
     ロゴ（11rem）とナビ（2列）が窄屈になるため。 */
@media (min-width: 1280px) {
    .page-end {
        --page-end-split: 40%;
    }
}