/*
Theme Name: HIGO SOUKEN
Author: haru branding
Description: 株式会社肥後総建 コーポレートサイト（熊本のリフォーム会社）
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: higosouken
Tags: custom-menu, translation-ready
*/

/* このファイルは静的版 site/style.css を原本とする。
   テーマ内画像の参照は url("images/…") のテーマ相対パス（style.css と同階層）。
   ルート相対（/images/…）に戻すと、サブディレクトリ設置やドメイン変更で 404 になる。 */

@charset "UTF-8";

/* ========================================
   1. Design Tokens (CSS Custom Properties)
   - サイト全体の色・フォント・余白などの定義
   - 値はカンプ（materials/トップページスクショ）からピクセル解析で抽出した実測値
   - 値を変更する場合はここだけ修正すればOK
   ======================================== */

:root {
    /* --- 色 --- */
    --color-primary: #FFB81C;
    /* ブランドイエロー：CTA・帯・アクセント */
    --color-primary-dark: #E1A218;
    /* イエローのホバー・陰影用 */
    --color-ink: #292822;
    /* 基本の文字色／黒背景 */
    --color-text-primary: #292822;
    --color-text-muted: #434136;
    /* 補助テキスト */
    --color-bg-primary: #FAF9F8;
    /* ページ背景 */
    --color-bg-beige: #F4F2EC;
    /* FAQ セクション背景 */
    --color-surface: #FFFFFF;
    /* カード・パネル背景 */
    --color-accent-red: #FF0000;
    /* 「見積り無料」バッジ */
    --color-line: #DCDAD2;
    /* 区切り線 */

    /* 比較表 */
    --color-table-head: #FDFCFA;
    --color-table-neutral: #F2F2F2;
    --color-table-highlight: #FEF9EE;

    /* --- フォント --- */
    --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
    --font-display: 'Sofia Sans Condensed', 'Noto Sans JP', sans-serif;
    /* 欧文・数字（和文グリフなし） */

    /* --- 文字サイズ（グリフ高さ実測からの換算値） --- */
    --text-xs: 13px;
    /* eyebrow */
    --text-sm: 14px;
    /* 注釈・費用/工期 */
    --text-base: 16px;
    /* 本文 */
    --text-lg: 18px;
    /* フッター住所・リード */
    --text-xl: 20px;
    /* CONTACT の TEL */
    --text-2xl: 22px;
    /* 「メールでご相談」 */
    --text-3xl: 30px;
    /* サービスカード見出し */
    --text-4xl: 32px;
    /* H3 */
    --text-5xl: 40px;
    /* H2 */
    --text-6xl: 60px;
    /* FV の H1 */

    /* --- 行間 --- */
    --leading-tight: 1.25;
    /* H1 */
    --leading-head: 1.6;
    /* H2 */
    --leading-sub: 1.9;
    /* H3・小見出し */
    --leading-body: 2;
    /* 本文（30px / 16px） */

    /* --- スペース（8pxグリッド） --- */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;
    --space-3xl: 120px;

    /* --- 角丸（haru 指定＝カンプ実測とも一致） --- */
    --radius-lg: 12px;
    /* カード・パネル・帯 */
    --radius-md: 6px;
    /* ボタン */
    --radius-sm: 4px;
    /* 小タグ・入力欄 */

    /* --- 影 --- */
    --shadow-card: 0 2px 20px rgba(41, 40, 34, .06);
    --shadow-pop: 0 4px 24px rgba(41, 40, 34, .10);

    /* --- トランジション --- */
    --transition-fast: .2s ease;
    --transition-base: .3s ease;

    /* --- コンテナ幅（カンプ実測） --- */
    --container: 1100px;
    /* 標準（SERVICE カード列） */
    --container-md: 1000px;
    /* 比較表・お知らせ */
    --container-sm: 900px;
    /* FAQ */

    /* --- 基準幅（カンプ幅） --- */
    --base-width: 1400px;
    --header-h: 88px;
}


/* ========================================
   2. Reset & Base Styles
   ======================================== */

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

html {
    /* scroll-behavior: smooth はグローバル指定しない（CODING_GUIDELINES 5.9） */
    -webkit-text-size-adjust: 100%;
}

/* ハンバーガーメニューを開いている間はページのスクロールを止める */
body.is-nav-open {
    overflow: hidden;
}

body {
    /* 装飾のはみ出し（道・透かし文字・カルーセル）で横スクロールが出ないようにする。
       overflow: hidden ではなく clip を使うのは、hidden がスクロールコンテナを作って
       ヘッダーの position: sticky を無効化してしまうため */
    overflow-x: clip;
    margin: 0;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    /* 読み込むのは Noto Sans JP の medium(500)/bold(700) のみ */
    line-height: var(--leading-body);
    font-feature-settings: "palt";
    /* 日本語のプロポーショナル字詰め */
    -webkit-font-smoothing: antialiased;
    /* Chrome, Safari, Edge */
    -moz-osx-font-smoothing: grayscale;
    /* Firefox（macOS） */
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* 本文の字間（ベーススタイル。個別に詰めたい箇所は各コンポーネント側で上書きする） */
p {
    letter-spacing: .05rem;
}

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

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

img {
    display: block;
    max-width: 100%;
    height: auto;
}

address {
    font-style: normal;
}

button {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

input {
    font: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* ========================================
   3. Utility Classes
   ======================================== */

/* --- 本文へのスキップリンク（claude-code-rules 4章）---
   ふだんは画面の外に置き、Tab でフォーカスが当たったときだけ左上に現れる。
   display: none だとフォーカスできなくなるので、必ず「画面外へ逃がす」方式にすること */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 12px 20px;
    background-color: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    transform: translateY(-120%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* スクリーンリーダー専用（視覚的に非表示） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* デバイス別の表示切り替え（CODING_GUIDELINES 4.5） */
.sp {
    display: none;
}

@media (max-width: 767px) {
    .pc {
        display: none;
    }

    .sp {
        display: revert;
    }
}

/* コンテナ（リサイズ方式A：中身は最大幅で止まり、背景だけウィンドウに追従する） */
.container,
.container-md,
.container-sm {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.container {
    max-width: calc(var(--container) + var(--space-md) * 2);
}

.container-md {
    max-width: calc(var(--container-md) + var(--space-md) * 2);
}

.container-sm {
    max-width: calc(var(--container-sm) + var(--space-md) * 2);
}


/* ========================================
   4. Typography
   ======================================== */


/* ========================================
   5. Common Components
   ======================================== */

/* --- セクション見出し（eyebrow + タイトル + 黄色のライン） --- */
.section-head {
    text-align: center;
}

.section-head__eyebrow {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .28em;
    color: var(--color-primary);
    line-height: 1;
}

/* eyebrow は line-height:1 で箱を詰めているため、見た目の余白は
   H2 の行間（line-height 1.6 の半レディング 12px）が担っている。
   カンプ実測：eyebrow のグリフ下端から H2 1行目のグリフ上端まで 18.5px */
.section-head__title {
    margin-top: 2px;
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: var(--leading-head);
    letter-spacing: .04em;
}

.section-head__rule {
    display: block;
    width: 44px;
    height: 3px;
    margin: 33px auto 0;
    background-color: var(--color-primary);
}

/* --- クリックできる面の hover：ほんの少し浮き上がる --- */
.service-card,
.compare__toggle,
.contact-way,
.footer__recruit {
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

@media (hover: hover) {

    .service-card:hover,
    .compare__toggle:hover,
    .contact-way:hover,
    .footer__recruit:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-pop);
    }
}

@media (prefers-reduced-motion: reduce) {

    .service-card,
    .compare__toggle,
    .contact-way,
    .footer__recruit {
        transition: none;
    }
}

/* --- テキストリンクの hover：文字が上下に入れ替わる ---
   本体は透明にし、2つの text-shadow（上に控えの1つ＋定位置の1つ）を下へずらして見せ替える。
   はみ出した影は overflow: hidden で隠すため、必ずブロック化して使う。
   影の色は色を透明にしてしまうと currentColor が使えないので、--roll-color で渡す。

   ずらし量は 2em。要素の高さ＝行の高さ（--leading-body: 2 なので 2em）なので、
   これ未満だと控えの文字が上端から覗く（1.5em だった頃に実際に覗いた・2026-08-12） */
.hover-roll,
.header__link {
    display: inline-block;
    overflow: hidden;
    color: transparent;
    text-shadow:
        0 -2em 0 var(--roll-color, var(--color-ink)),
        0 0 0 var(--roll-color, var(--color-ink));
    transition: text-shadow .3s ease;
}

@media (hover: hover) {

    a:hover>.hover-roll,
    button:hover>.hover-roll,
    .header__link:hover {
        text-shadow:
            0 0 0 var(--roll-color, var(--color-ink)),
            0 2em 0 var(--roll-color, var(--color-ink));
    }
}

@media (prefers-reduced-motion: reduce) {

    .hover-roll,
    .header__link {
        transition: none;
    }
}

/* --- 「◯◯を見る >」テキストリンク --- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: .14em;
}

.link-arrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.link-arrow::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}


.section-more {
    margin-top: 42px;
    text-align: center;
}

/* --- タグ（施工事例のカテゴリ） --- */
.tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding-inline: 12px;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
}


/* ========================================
   6. Layout Components（ヘッダー・フッター）
   ======================================== */

/* --- ヘッダー --- */
/* 画面上部に貼り付き、下スクロールで隠れ、上スクロールで戻る（制御は main.js） */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-primary);
    /* 黄色帯はウィンドウ幅に追従する */
    transition: transform .35s cubic-bezier(.22, .68, .32, 1);
}

.header.is-hidden {
    transform: translateY(-100%);
}

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

.header__inner {
    display: flex;
    align-items: center;
    height: var(--header-h);
}

/* ロゴの黒地ブロック：画面左端に張り付く（カンプ実測 幅348px） */
.header__brand {
    display: flex;
    align-items: center;
    flex: 0 1 348px;
    align-self: stretch;
    padding-left: clamp(18px, 2.14vw, 30px);
    background-color: var(--color-ink);
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header__logo-mark {
    width: 70px;
}

.header__logo-type {
    width: 196px;
}

.header__tagline {
    margin-left: clamp(14px, calc(4.79vw - 35px), 32px);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}


.header__nav {
    margin-left: auto;
}

/* ナビ・SNS・CTA のまとめ枠。PCでは横並びのまま、タブレット以下ではドロワーになる */
.header__drawer {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* ハンバーガーボタン（タブレット以下でのみ表示） */
.header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: 16px;
}

.header__toggle-bar {
    display: block;
    width: 26px;
    height: 2px;
    margin-inline: auto;
    background-color: var(--color-ink);
    transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* 開いている間は×印にする */
.header__toggle.is-open .header__toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__toggle.is-open .header__toggle-bar:nth-child(2) { opacity: 0; }
.header__toggle.is-open .header__toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


@media (prefers-reduced-motion: reduce) {
    .header__drawer,
    .header__toggle-bar {
        transition: none;
    }
}

.header__list {
    display: flex;
    align-items: center;
    /* 1400pxで46px。1120pxで22pxまで一気に詰めてキャッチとの接触を防ぐ */
    gap: clamp(16px, calc(7.98vw - 65.7px), 46px);
}

/* ドロワー専用の項目（PCでは出さない・CODING_GUIDELINES 4.5 の --mobile-only） */
.header__item--mobile-only {
    display: none;
}

.header__link {
    font-size: clamp(13px, calc(0.798vw + 4.83px), 16px);
    font-weight: 500;
    letter-spacing: .06em;
    white-space: nowrap;
}


.header__sns {
    margin-left: clamp(16px, calc(7.45vw - 60.3px), 44px);
    line-height: 0;
}

/* お問い合わせボタン（カンプ実測 180×50 / 右端から21px） */
.header__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
    width: 181px;
    height: 50px;
    margin-left: clamp(12px, calc(4.79vw - 37px), 30px);
    margin-right: 21px;
    border-radius: var(--radius-md);
    background-color: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: .04em;
}

@media (hover: hover) {
    .header__cta:hover {
        background-color: #3d3b33;
        transition: background-color var(--transition-fast);
    }
}


/* --- 暗い背景に置くアイコンの白抜き ---
   受領した SVG は墨色（#292822）固定のため、黒地の上では filter で白に反転させる。
   白版の SVG を受領したら、この指定を外して差し替える */
.header__cta img {
    filter: brightness(0) invert(1);
}

/* --- フッター --- */
/* カンプ実測：セクション高さ 728px */
.footer {
    background-color: var(--color-bg-primary);
    padding-block: 70px 68px;
}

.footer__inner {
    display: flex;
    justify-content: space-between;
    gap: clamp(40px, 8.57vw, 120px);
    width: 100%;
    max-width: calc(var(--container) + var(--space-md) * 2);
    margin-inline: auto;
    padding-inline: var(--space-md);
}


.footer__left {
    flex: 0 0 auto;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer__logo-mark {
    width: 91px;
}

/* 素材が白抜きのため、明るい背景では墨色に反転させる（黒版 SVG 受領後に外す） */
.footer__logo-type {
    width: 301px;
    max-width: 100%;
    filter: brightness(0) saturate(100%) invert(13%) sepia(6%) saturate(700%) hue-rotate(9deg) brightness(96%) contrast(88%);
}

.footer__address {
    margin-top: 34px;
    font-size: var(--text-sm);
    line-height: 2.1;
}

.footer__map {
    margin-top: 45px;
}

.footer__map iframe {
    display: block;
    width: 518px;
    max-width: 100%;
    height: 308px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background-color: #E2E0DA;
}

.footer__right {
    flex: 0 1 462px;
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* カンプ実測：項目ピッチ 40px */
}

.footer__item a {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-size: var(--text-sm);
}

.footer__item a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}


/* 採用バナー */
.footer__recruit {
    display: flex;
    align-items: stretch;
    height: 105px;
    margin-top: 42px;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.footer__recruit-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    flex: 1 1 auto;
    padding-inline: 40px;
}

.footer__recruit-sub {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
}

.footer__recruit-title {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: .12em;
}

.footer__recruit img {
    flex: 0 0 180px;
    width: 180px;
    height: 100%;
    object-fit: cover;
}

.footer__catch {
    margin-top: 104px;
    font-size: var(--text-sm);
    line-height: 1.9;
}

/* 2行のテキストなので、他のリンクの上下ロールは使わず控えめな hover にする
   （複数行だと控えの影が隣の行に重なって見えてしまうため） */
.footer__catch a {
    transition: opacity var(--transition-fast);
}

@media (hover: hover) {
    .footer__catch a:hover {
        opacity: .6;
    }
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.footer__copy {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    /* Sofia Sans Condensed は 700 のみ読み込んでいる（DESIGN.md）。600 は実体がない */
    letter-spacing: .01em;
    line-height: 1;
}


/* --- 画面下部に常駐する相談フォーム（全ページ共通） ---
   トップページは FV が画面外に出てから下からせり上がり、下層ページは最初から表示する。
   通常時は上段（.consult）だけを画面内に残し、hover / フォーカスで下段の電話まで持ち上げる */
.floating-consult {
    position: fixed;
    left: 50%;
    /* 画面下に固定されているので、スクロールでは候補を出す余地を下に作れない。
       候補を出している間だけ箱ごと持ち上げる（--lift は main.js が実測して入れる）。
       transform ではなく bottom を使うのは、transform がレスポンシブで
       何度も上書きされていて、そのすべてに持ち上げを混ぜるのが壊れやすいため */
    bottom: var(--lift, 0px);
    z-index: 50;
    visibility: hidden;
    transform: translate(-50%, 100%);
    /* 初期状態は画面外（下） */
    transition: transform .45s cubic-bezier(.22, .68, .32, 1), visibility 0s linear .45s;
}

.floating-consult .consult-box {
    --cu: 1px;
    /* 常駐版は等倍（FV のように幅追従させない） */
    --consult-frame: 3;   /* 外側の黒フチ（FV は 2px） */
    /* 画面下端に接するので下側の角丸はなし */
    border-radius: calc(12 * var(--cu)) calc(12 * var(--cu)) 0 0;
    box-shadow: 0 -4px 24px rgba(41, 40, 34, .16);
}

/* 表示状態：下段（38.5px）を画面下に逃がし、上段だけを見せる */
.floating-consult.is-visible {
    visibility: visible;
    transform: translate(-50%, 38.5px);
    transition: transform .45s cubic-bezier(.22, .68, .32, 1), visibility 0s;
}

@media (hover: hover) {
    .floating-consult.is-visible:hover {
        transform: translate(-50%, 0);
    }
}

.floating-consult.is-visible:focus-within {
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .floating-consult {
        transition: visibility 0s;
    }
}


/* ========================================
   7. Page Sections（トップページ）
   ======================================== */

/* ----------------------------------------
   01. ファーストビュー
   ----------------------------------------
   本文＋ビジュアルを1つの「ステージ」にまとめ、画面センターに配置する。
   ステージのデザイン寸法は 1149×692px（カンプのページ座標 x108〜1257）。
   1デザインpx = var(--fv-u) とし、内部の寸法・文字サイズをすべて --fv-u 基準で書くことで、
   幅が変わっても構図・字間・余白の比率が保たれる（CODING_GUIDELINES 5.5 パターンB相当）。
   --fv-w / --fv-u / --fv-gap は CONCERN 側の道イラストとも共有する（境界でズレさせないため）。
   ---------------------------------------- */
.page-top {
    /* 1400px 未満では下限を設けずステージごと縮める（横スクロールを出さない） */
    --fv-w: min(85vw, 1800px);
    --fv-u: calc(var(--fv-w) / 1149);
    --fv-gap: 80px;
    /* FV 下の白い余白（CONCERN へのつなぎ） */
}

.top-fv {
    position: relative;
    height: calc(692 * var(--fv-u) + var(--fv-gap));
    overflow: hidden;
}

.top-fv__stage {
    position: relative;
    width: var(--fv-w);
    height: calc(692 * var(--fv-u));
    margin-inline: auto;
}


.top-fv__body {
    position: absolute;
    top: calc(84 * var(--fv-u));
    left: 0;
    z-index: 2;
}

.top-fv__eyebrow {
    font-family: var(--font-display);
    font-size: calc(13 * var(--fv-u));
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--color-primary);
    line-height: 1;
}

.top-fv__title {
    margin-top: calc(17 * var(--fv-u));
    font-size: calc(60 * var(--fv-u));
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: .06em;
}

/* 筆文字「正直すぎる」＋黄色のマーカー
   カンプ実測：筆文字 426×112（x111.5〜537）／マーカー 437×23.5（x109〜545.5・y286〜309.5） */
.top-fv__brush {
    position: relative;
    display: block;
    width: calc(426 * var(--fv-u));
    margin-bottom: calc(6 * var(--fv-u));
    margin-left: calc(3 * var(--fv-u));
}

.top-fv__brush::after {
    content: "";
    position: absolute;
    left: calc(-3 * var(--fv-u));
    bottom: calc(4 * var(--fv-u));
    z-index: -1;
    width: calc(437 * var(--fv-u));
    height: calc(24 * var(--fv-u));
    background-color: var(--color-primary);
    transform-origin: left center;
    animation: fv-marker-grow .5s cubic-bezier(.22, .68, .32, 1) .35s both;
}

/* 文字を「下から生やす」ための窓。はみ出しを隠し、中の画像を下から押し上げる */
.top-fv__brush-window {
    display: block;
    overflow: hidden;
}

.top-fv__brush img {
    position: relative;
    display: block;
    width: 100%;
    animation: fv-brush-rise .6s cubic-bezier(.22, .68, .32, 1) .85s both;
}

.top-fv__title-line {
    display: block;
}

.top-fv__lead {
    margin-top: calc(19 * var(--fv-u));
    font-size: calc(16 * var(--fv-u));
    line-height: var(--leading-body);
    /* カンプ実測：行送り30px */
}

/* --- 相談フォーム（かんたん相談ナビ）---
   FV 内と画面下部の常駐版で同じ見た目を使うため、コンポーネント化している。
   var(--cu) が「1デザインpx」。FV 内では --fv-u（幅追従）、常駐版では 1px（等倍）を渡す。
   カンプ実測：外枠 554×100.5px（黒 #292822・角丸12）／
   上段は 2px 内側に黄色（#FFB81C・高さ59.5）／下段は黒地のまま（高さ38.5） */
/* 候補を出している間は切り抜きを外す。内側の要素が各自の角丸を持っているので、
   外枠の見た目は変わらない（main.js が .is-suggesting を付け外しする） */
.consult-box.is-suggesting {
    overflow: visible;
}

.consult-box {
    width: calc(554 * var(--cu));
    /* --consult-frame は外側の黒フチの太さ（デザインpx）。既定2px＝カンプ実測 */
    padding: calc(var(--consult-frame, 2) * var(--cu)) calc(var(--consult-frame, 2) * var(--cu)) 0;
    border-radius: calc(12 * var(--cu));
    background-color: var(--color-ink);
    overflow: hidden;
}

.top-fv__consult {
    --cu: var(--fv-u);
    margin-top: calc(38 * var(--fv-u));
}

.consult {
    display: flex;
    align-items: center;
    height: calc(59.5 * var(--cu));
    padding-left: calc(13.5 * var(--cu));
    padding-right: calc(12 * var(--cu));
    /* 外側12px からフチの太さを引いた値にして、角を同心に見せる */
    border-radius:
        calc((12 - var(--consult-frame, 2)) * var(--cu))
        calc((12 - var(--consult-frame, 2)) * var(--cu)) 0 0;
    background-color: var(--color-primary);
}

.consult__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(108.5 * var(--cu));
    height: calc(33 * var(--cu));
    border-radius: calc(16.5 * var(--cu));
    background-color: var(--color-accent-red);
    color: var(--color-surface);
    font-size: calc(16 * var(--cu));
    font-weight: 700;
    line-height: 1;
}

.consult__input {
    flex: 0 0 calc(300 * var(--cu));
    height: calc(43.5 * var(--cu));
    margin-left: calc(8 * var(--cu));
    padding-inline: calc(14 * var(--cu));
    border: none;
    border-radius: calc(6 * var(--cu));
    background-color: var(--color-surface);
    /* 入力欄だけは 16px を下限にする。iOS / iPadOS Safari は 16px 未満の入力欄に
       フォーカスすると画面を拡大してしまい、操作しづらくなるため（2026-08-12）。
       FV は幅に追従して縮むので、1352px 未満では 16px で止まる。
       箱の幅は 300 * --cu あり、この文字サイズでも案内文は収まる */
    font-size: max(16px, calc(16 * var(--cu)));
}

/* 入力欄を包む枠。もとは .consult__input 自身が flex アイテムだったので、
   幅と左マージン（カンプ実測）をこちら側に引き継ぐ */
.consult__field {
    position: relative;
    flex: 0 0 calc(300 * var(--cu));
    min-width: 0;
    margin-left: calc(8 * var(--cu));
}

.consult__field .consult__input {
    flex: none;
    width: 100%;
    margin-left: 0;
}

.consult__input::placeholder {
    color: #9A978A;
    /* カンプ実測 */
}

/* カンプ実測：「相談する」x550.5〜625.5（19px）／矢印 x630.5〜648（18px） */
.consult__submit {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--cu));
    flex: 1 1 auto;
    justify-content: flex-end;
    color: var(--color-ink);
    /* 黄色地の上なので墨色 */
    font-size: calc(19 * var(--cu));
    font-weight: 700;
    letter-spacing: .04em;
}

.consult__submit img {
    width: calc(18 * var(--cu));
}

/* カンプ実測：お電話 13px ／ 電話アイコン 13px ／ TEL 22px ／ 受付時間 12px */
.consult__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(38.5 * var(--cu));
    color: var(--color-surface);
}

.consult__tel-label {
    font-size: calc(13 * var(--cu));
    font-weight: 700;
}

.consult__tel-num {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--cu));
    margin-left: calc(17 * var(--cu));
    font-family: var(--font-display);
    font-size: calc(22 * var(--cu));
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

.consult__tel-num img {
    width: calc(13 * var(--cu));
    filter: brightness(0) invert(1);
    /* 黒地の上なので白抜き（素材は墨色） */
}

.consult__tel-hours {
    margin-left: calc(17.5 * var(--cu));
    font-size: calc(12 * var(--cu));
    color: #C9C8C3;
}

/* --- 右側のイラスト・写真（座標はすべてカンプ実測。ステージ左上が原点） --- */
.top-fv__visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* 黄色い道（FV〜CONCERN にまたがる1枚のイラスト）
   カンプの黄色領域と数値フィット（IoU 0.905）した配置。
   家型フレームの写真がこの上に重なるため、道の上部は隠れる（カンプどおり） */
.top-fv__road {
    position: absolute;
    top: calc(382 * var(--fv-u));
    left: calc(82 * var(--fv-u));
    width: calc(1500 * var(--fv-u));
    max-width: none;
}

/* 家型フレーム＋中の施工写真 */
/* 家型フレーム：SVG の外形パス（#fv-house-shape）で写真を家の形に正確にマスクし、
   その上に枠線パスを重ねる。写真の切り抜きは preserveAspectRatio="xMidYMid slice"（＝object-fit: cover 相当） */
.top-fv__house {
    position: absolute;
    top: calc(42 * var(--fv-u));
    left: calc(487 * var(--fv-u));
    width: calc(662 * var(--fv-u));
    height: calc(389 * var(--fv-u));
    overflow: visible;
}

.top-fv__house-frame {
    fill: var(--color-ink);
}

/* 写真は3枚を重ね、.is-current だけを表示してフェードで切り替える */
.top-fv__house-photo {
    opacity: 0;
    transition: opacity .9s ease;
}

.top-fv__house-photo.is-current {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .top-fv__house-photo {
        transition: none;
    }
}

.top-fv__illust {
    position: absolute;
}

/* 筆文字（0.85s〜1.45s）が出そろってから、少しずつ間を空けて順に現れる。最後が車（植木は動かさない） */
.top-fv__illust--faucet,
.top-fv__illust--roller,
.top-fv__illust--hammer,
.top-fv__illust--drill,
.top-fv__illust--van {
    animation: fv-illust-in .7s cubic-bezier(.22, .68, .32, 1) both;
}

.top-fv__illust--faucet {
    animation-delay: 1.45s;
}

.top-fv__illust--roller {
    animation-delay: 1.60s;
}

.top-fv__illust--hammer {
    animation-delay: 1.75s;
}

.top-fv__illust--drill {
    animation-delay: 1.90s;
}

.top-fv__illust--van {
    animation-delay: 2.10s;
}

.top-fv__illust--faucet {
    top: calc(35 * var(--fv-u));
    left: calc(492 * var(--fv-u));
    width: calc(82 * var(--fv-u));
}

.top-fv__illust--roller {
    top: calc(52 * var(--fv-u));
    left: calc(1037 * var(--fv-u));
    width: calc(79 * var(--fv-u));
}

.top-fv__illust--tree-l {
    top: calc(322 * var(--fv-u));
    left: calc(470 * var(--fv-u));
    width: calc(99 * var(--fv-u));
}

.top-fv__illust--hammer {
    top: calc(385 * var(--fv-u));
    left: calc(655 * var(--fv-u));
    width: calc(68 * var(--fv-u));
}

.top-fv__illust--drill {
    top: calc(504 * var(--fv-u));
    left: calc(582 * var(--fv-u));
    width: calc(88 * var(--fv-u));
}

.top-fv__illust--van {
    top: calc(455 * var(--fv-u));
    left: calc(862 * var(--fv-u));
    width: calc(340 * var(--fv-u));
}

/* 対応エリアの吹き出し（車の上・haru 指定 2026-08-15）。
   絵柄はサービスページの .works-pop__bubble と同じ SVG を使うが、
   ページ固有クラスは共有しない方針（規約 5.3）のため指定はこちらにも持つ。
   車（左862・幅340）の中心 1032 に合わせ、車の上端 455 の手前で止める */
.top-fv__bubble {
    /* 丸の直径。幅に追従しつつ 150px で頭打ち（haru 指定 2026-08-27）。
       下限 108px はスマホ用。これより小さくすると、比率を保った文字（下記）が
       10px を割って読めなくなる */
    --bubble-size: clamp(108px, calc(150 * var(--fv-u)), 150px);

    position: absolute;
    /* 車の上端（455）より上に、尻尾の先まで含めて収める（haru 指定 2026-08-27）。
       18px 引いているのは、尻尾（16px・食い込み2px）のぶんを空けるため */
    top: calc(455 * var(--fv-u) - var(--bubble-size) - 18px);
    /* 家の右下にあった木（左1089・幅99）の中心へ。木は削除して入れ替えた。
       幅が変わっても中心が動かないよう transform で寄せる
       （アニメーションの keyframes 側にも同じ -50% を入れてある） */
    left: calc(1138 * var(--fv-u));
    transform: translateX(-50%);
    z-index: 2;
    /* 「出張費なし」を下に積むので縦並び。横並びのままだと右へ回り込む */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 正円にするため縦横を同じ値にする */
    width: var(--bubble-size);
    height: var(--bubble-size);
    /* 赤地・白文字・フチなし（haru 指定 2026-08-27）。
       サービスページの吹き出し（黄色の SVG）とは配色が違うため、SVG は使わず CSS で描く */
    border-radius: 50%;
    background-color: var(--color-accent-red);
    color: var(--color-surface);
    text-align: center;
    /* 丸が小さくなっても文字との比率を保つ（haru 指定 2026-08-27）。
       150px のとき 19px になる係数 */
    font-size: calc(var(--bubble-size) * 19 / 150);
    font-weight: 700;
    line-height: 1.35;
}

/* 尻尾：地色の三角ひとつ（フチが無くなったので重ねる必要がない） */
.top-fv__bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    /* 丸との継ぎ目を隠すため、少しだけ食い込ませる */
    margin-top: -2px;
    margin-left: -9px;
    border-inline: 9px solid transparent;
    border-top: 16px solid var(--color-accent-red);
}

/* 「出張費なし」だけ小さく、上に区切り線を入れる（haru 指定 2026-08-26） */
.top-fv__bubble-sub {
    display: block;
    width: 70%;
    /* 余白も文字に追従させる（em はこの行自身の文字サイズ基準） */
    margin: .5em auto 0;
    padding-top: .43em;
    border-top: 1px solid var(--color-surface);
    /* 上2行に対して 14/19。丸が縮んでも比率が変わらない */
    font-size: 73.7%;
}

@media (prefers-reduced-motion: no-preference) {

    /* 最後のイラスト（車）が 2.10s + 0.7s で出そろうので、その直後に出す */
    .top-fv__bubble {
        animation: fv-bubble-in .55s ease-out 2.9s both;
    }
}

/* ----------------------------------------
   02. お悩み（CONCERN）
   ---------------------------------------- */
/* 高さは中身なりゆき（固定しない）。背景写真は cover なので成り行きで拡大する */
.top-concern {
    position: relative;
    overflow: hidden;
    color: var(--color-surface);
}

/* 背景：写真＋暗幕（TODO: 背景写真を差し替える） */
/* 背景写真（暗幕は .top-concern__veil で道の上に重ねる） */
.top-concern__bg {
    position: absolute;
    inset: 0;
    background-image: url("images/img_reason_back.jpg");
    background-size: cover;
    background-position: center;
}

/* FV の白地からのつなぎ（写真＋暗幕の上・道の下に重ねる） */
.top-concern__fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: linear-gradient(to bottom, var(--color-bg-primary), rgba(250, 249, 248, 0));
}

/* FV から続く黄色い道。FV ステージと同じ --fv-w / --fv-u / --fv-gap で位置を出すことで、
   ウィンドウ幅が変わってもセクション境界で途切れない。
   FV 内の道は「ステージ左端 + 82px・ステージ上端 + 382px」に置いているので、
   CONCERN から見た上端は 382 - 692 - gap = -(310 × --fv-u) - gap になる */
.top-concern__road {
    position: absolute;
    top: calc(-310 * var(--fv-u) - var(--fv-gap));
    left: calc((100% - var(--fv-w)) / 2 + 82 * var(--fv-u));
    width: calc(1500 * var(--fv-u));
    max-width: none;
}

/* 暗幕：黒70%乗算＝黒を不透明度70%で重ねるのと等価（元の色 ×0.3） */
.top-concern__veil {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .6);
}

/* カンプ実測（セクション内座標）：H2 1行目グリフ 103 / カード 260〜447・幅325・間隔63
   / 引用見出し 1行目グリフ 582・左端209.5 / 右テキスト 1行目 577・左端702 */
.top-concern__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(var(--container) + var(--space-md) * 2);
    margin-inline: auto;
    padding: 89px var(--space-md) 0;
}

/* 引用見出しと本文を1つのコンテナに収め、最大幅1100pxで左右センター */
.top-concern__columns {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
    max-width: 1100px;
    margin: 140px auto;
}


.top-concern__title {
    margin-top: 100px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 2.06;
    /* カンプ実測：行送り 49.5px */
    letter-spacing: .06em;
}

.top-concern__title em {
    font-style: normal;
    color: var(--color-primary);
}

/* 吹き出し3枚 */
.top-concern__bubbles {
    display: flex;
    justify-content: space-between;
    gap: clamp(24px, 4.5vw, 63px);
    margin-top: 72px;
}

/* 表示アニメーション：左から順に、少し下からフェードイン */
.top-concern__bubbles .bubble {
    opacity: 0;
    transform: translateY(24px);
}

.top-concern__bubbles.is-revealed .bubble {
    animation: reveal-up .7s cubic-bezier(.22, .68, .32, 1) both;
}

.top-concern__bubbles.is-revealed .bubble:nth-child(2) {
    animation-delay: .14s;
}

.top-concern__bubbles.is-revealed .bubble:nth-child(3) {
    animation-delay: .28s;
}

.bubble {
    position: relative;
    flex: 1 1 0;   /* 1400pxで325px。狭くなると等分で縮む */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    height: 187px;
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: 6px 6px 0 var(--color-primary);
    /* カンプの黄色い落ち影 */
    color: var(--color-ink);
    text-align: center;
}

/* 吹き出しのしっぽ */
.bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -43px;
    width: 0;
    height: 0;
    border-inline: 23px solid transparent;
    border-top: 43px solid var(--color-surface);
    transform: translateX(-50%);
}

.bubble__text {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.7;
}

.top-concern__message {
    position: relative;
    flex: 1 1 0;
}

.top-concern__catch {
    margin-top: 6px;
    padding-left: 59px;
    font-size: 36px;
    /* カンプ実測：グリフ32.5px */
    font-weight: 700;
    line-height: 1.9;
    /* カンプ実測：行送り 69px */
    letter-spacing: .04em;
}

/* --- 引用符（実素材 icon_quotation.svg。白版は filter で反転） --- */
.quote-mark {
    width: 41px;
}

.quote-mark--white {
    width: 38px;
    filter: brightness(0) invert(1);
    /* 素材は黄色。REASON では白抜きで使う */
}

/* REASON：本文より左・上に出す（カンプ参照） */
.reason .quote-mark--white {
    margin-left: -47px;
}

/* .top-concern__message（ページ内 top 524px）からの相対位置。カンプ実測：ページ内 826px */
.top-concern__link-wrap {
    margin-top: 84px;
}

/* 暗い背景の上なので影の色を白にする */
.top-concern .hover-roll {
    --roll-color: var(--color-surface);
}

.top-concern__link-label {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .3em;
}

.top-concern__text {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    font-size: var(--text-lg);
    /* カンプ実測：グリフ16px */
    line-height: 2.22;
    /* カンプ実測：行送り 40px */
}


/* ----------------------------------------
   03. サービス（SERVICE）
   ---------------------------------------- */
/* カンプ実測：セクション高さ 1190px（大カード上端361 / 小カード上端661・高さ381） */
.top-service {
    padding-block: 122px 73px;
}


.service-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 10px;
    margin-top: 60px;
}


.service-card {
    display: block;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    color: inherit;
}

/* 大カード（01）：カンプ実測 1100×270px の横並び */
.service-card--lg {
    display: flex;
    align-items: stretch;
    flex: 0 0 100%;
    height: 270px;
}

.service-card--lg .service-card__body {
    display: grid;
    grid-template-columns: 131px 1fr;
    align-content: start;
    column-gap: clamp(28px, 5.36vw, 75px);
    flex: 1 1 auto;
    padding: 25px 0 0 29px;
}

.service-card--lg .service-card__num {
    grid-row: 1 / 3;
    align-self: start;
    font-size: clamp(88px, 9.29vw, 130px);
    line-height: .83;
    /* カンプ実測：数字の高さ 107.5px */
}

.service-card--lg .service-card__img {
    flex: 0 1 522px;
    /* カンプ実測：写真 x728〜1250 */
}

.service-card--lg .service-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card--lg .service-card__text {
    margin-top: 28px;
    max-width: 288px;
    /* カンプ実測：本文 x388.5〜675.5 */
}

/* 小カード（02〜04）：カンプ実測 360×381px
   内部（カード左上からの相対）：見出し行 27〜72（高45）/ 写真 91〜251（320×160）/ 本文 1行目 261.6 */
.service-card:not(.service-card--lg) {
    flex: 1 1 0;   /* 1400pxで360px。狭くなると等分で縮む */
    height: 381px;
    padding: 27px 20px 0;
}

.service-card:not(.service-card--lg) .service-card__head {
    height: 45px;
    gap: 24px;
}

.service-card:not(.service-card--lg) .service-card__icon {
    width: 50px;
}

.service-card:not(.service-card--lg) .service-card__title {
    font-size: 25px;
    /* カンプ実測：グリフ高 22px */
}

.service-card__num {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.service-card:not(.service-card--lg) .service-card__num {
    font-size: 42px;
    /* カンプ実測：数字の高さ 30.5px */
}

.service-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.service-card__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
}

.service-card--lg .service-card__head {
    margin-top: 19px;
    gap: 34px;
}

.service-card--lg .service-card__icon {
    width: 67px;
}

.service-card:not(.service-card--lg) .service-card__img {
    margin-top: 19px;
}

.service-card:not(.service-card--lg) .service-card__img img {
    width: 100%;
    aspect-ratio: 2 / 1;
    /* カンプ実測：320×160 */
    object-fit: cover;
}

.service-card__text {
    margin-top: 11px;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    text-align: justify;
}


/* ----------------------------------------
   04. 施工事例（WORKS）
   ---------------------------------------- */
/* カード5枚分よりウィンドウが広い場合はカード幅を成り行きで広げる（画像の比率は固定） */
.top-works {
    position: relative;
    padding-block: 88px 120px;
    overflow: hidden;
    --works-gap: 36px;
    --works-card: max(260px, calc((100vw - var(--works-gap) * 4) / 5));
}


.top-works .section-more {
    margin-bottom: 140px;
}

/* カルーセル：中央のカードをページ中央に置き、両端は画面外へ見切れる */
.works-carousel {
    margin-top: 78px;
}

.works-carousel {
    overflow: hidden;
}

.works-carousel__track {
    display: flex;
    gap: var(--works-gap);
    width: max-content;
    margin-inline: auto;
}

.works-card {
    flex: 0 0 var(--works-card);
}

/* hover で中の画像だけを少し拡大するため、はみ出しは枠側で隠す。
   角丸もここに持たせると、中の画像もカテゴリーの札も角に沿って切り抜かれる */
.works-card__img {
    border-radius: var(--radius-lg);
    /* haru 指定 2026-08-12 */
    overflow: hidden;
}

.works-card__img img {
    width: 100%;
    aspect-ratio: 12 / 15;
    /* 施工事例の写真は全ページ 12:15 に統一（haru 指定 2026-08-09。カンプ実測の 260:297 から変更） */
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, .68, .32, 1);
}

@media (hover: hover) {
    .works-card__link:hover .works-card__img img {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-card__img img {
        transition: none;
    }
}

.works-card__tags {
    display: flex;
    /* 入りきらないタグは丸ごと次の行へ送る（haru 指定 2026-08-27） */
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* タグの文字を途中で折り返させない。
   既定では flex アイテムが縮んで「ウッドデッ／キ」のように割れてしまうため、
   縮まないようにしたうえで折り返しを禁止する。
   実データの最長は10字（約160px）でカード幅に収まる */
.works-card__tags .tag {
    flex-shrink: 0;
    white-space: nowrap;
    /* haru 指定 2026-08-27。トークンに 12px が無いため実測値。
       このクラスは一覧カードと詳細ページの両方で使っている */
    font-size: 12px;
}

.works-card__title {
    margin-top: 18px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.75;
}

.works-card__meta {
    margin-top: 16px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.works-carousel__pager {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 46px;
}

/* 現在位置の表示 兼 送りの操作。押すとそのカードが中央に来る（main.js の initWorksCarousel） */
.works-carousel__pager button {
    position: relative;
    display: block;
    width: 46px;
    height: 4px;
    background-color: #E2E0DA;
    /* 目盛りの地色。トークン化するほど使い回さないので生値のまま */
    transition: background-color .3s ease;
}

/* 帯は4pxのままで、指で押せる範囲だけ上下左右に広げる（指の当たり判定を44px確保する）。
   上下の余白は前後の要素と42px以上あるため、隣の操作とは重ならない */
.works-carousel__pager button::before {
    content: "";
    position: absolute;
    inset-block: -20px;
    inset-inline: -5px;
}

.works-carousel__pager button.is-active {
    background-color: var(--color-primary);
}

.works-carousel__pager button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 6px;
}

/* 背景の透かしロゴタイプ：カンプ実測の #F4F2EC で塗り、右から左へゆっくり流す。
   同じ図版を2枚並べ、1枚分（図版＋間隔）だけ動かして途切れないループにしている */
.top-works__watermark {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    display: flex;
    width: max-content;
    animation: watermark-marquee 70s linear infinite;
}

.top-works__watermark span {
    display: block;
    width: 2977px;
    /* 素材1985px の1.5倍 */
    height: 165px;
    margin-right: 520px;
    /* ループの継ぎ目が詰まって見えないよう十分に空ける */
    background-color: var(--color-bg-beige);
    -webkit-mask-image: url("images/logo_higosouken.svg");
    mask-image: url("images/logo_higosouken.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/* ----------------------------------------
   05. 選ばれる理由（REASON）
   ---------------------------------------- */
/* 高さは中身なりゆき（固定しない） */
.top-reason {
    position: relative;
    background-color: var(--color-primary);
    overflow: hidden;
}

/* 背景の家の線画。車＋工具と同じ枠（.top-reason__vehicle）の中に置き、
   同じ --veh-scale / --veh-x / --veh-y で追従させることで、車との位置・サイズ関係を常に保つ。
   座標はウィンドウ幅1220px（--veh-scale: .92）で従来の見た目と一致するよう逆算した値
   （背景幅 ÷ 車幅 = 1100 / 531 = 2.072 が全幅で一定になる） */
.top-reason__bg {
    position: absolute;
    top: 239px;
    left: -427px;
    z-index: 0;
    width: 1100px;
    max-width: none;
}

.top-reason__inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: clamp(56px, 16.21vw, 227px);
    width: 100%;
    max-width: calc(1106px + var(--space-md) * 2);
    margin-inline: auto;
    padding: 98px var(--space-md) 120px;
}


.top-reason__aside {
    position: relative;
    z-index: 1;
    flex: 0 1 434px;
}

/* 吹き出し見出し。イラスト（絶対配置の .top-reason__vehicle）より前面に置く */
.top-reason__title {
    position: relative;
    z-index: 2;
    padding: 52px 40px 58px;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-primary);
    box-shadow: 6px 6px 0 rgba(41, 40, 34, .08);
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
}

.top-reason__title em {
    font-style: normal;
    color: var(--color-primary);
}

.top-reason__title::after {
    content: "";
    position: absolute;
    left: 200px;
    bottom: -40px;
    width: 0;
    height: 0;
    border-left: 26px solid var(--color-bg-primary);
    border-bottom: 42px solid transparent;
}

/* 車＋工具のまとめ枠。狭い幅では --veh-scale を下げて群ごと縮める（左端で切れるのを防ぐ）。
   原点を左上にしているので、縮めると自然に右・下へ寄って画面内に収まる */
.top-reason__vehicle {
    position: absolute;
    inset: 0;
    /* コンテナが画面端に寄って左マージンを失った分だけ右へ寄せる。
       1400px では 0（＝PC版の見た目そのまま）、狭くなるほど右へ逃がして左端で切れないようにする */
    --veh-x: max(0px, calc(123px - (100vw - 1154px) / 2));
    transform: translate(var(--veh-x), var(--veh-y, 0)) scale(var(--veh-scale, 1));
    transform-origin: 0 0;
}

/* バン。カンプとの数値フィットで得た位置（コンテナ左端からの相対） */
.top-reason__van {
    position: absolute;
    z-index: 2;
    /* 道具が背後から出てくるので車を前面に置く */
    top: 556px;
    left: -67px;
    width: 531px;
    max-width: none;
}

/* 車の上に弧を描いて並ぶ道具。素材は車と同じ書き出し倍率（@2x）なので約0.5倍で表示する。
   画像自体が回転済みのため CSS では回転させない。座標は配置図から算出。

   出現アニメーション：車が画面に入ったら、車の中心（-67+265.5, 556+179.5 ＝ 198.5, 735.5）から
   それぞれの定位置へ放射状に飛び出す。--from-x / --from-y は「定位置 → 車の中心」のベクトルで、
   各道具の中心座標と車の中心の差から算出している。車の背後から出るよう z-index は車より下にする */
.top-reason__tool {
    position: absolute;
    max-width: none;
    z-index: 1;
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) scale(.15);
}

.top-reason__van.is-revealed~.top-reason__tool {
    animation: tool-burst .66s cubic-bezier(.15, .85, .25, 1) both;
}

.top-reason__tool--major {
    top: 496px;
    left: -135px;
    width: 115px;
    --from-x: 276px;
    --from-y: 184px;
}

.top-reason__tool--hammer {
    top: 418px;
    left: -15px;
    width: 102px;
    --from-x: 162.5px;
    --from-y: 259.5px;
}

.top-reason__tool--drill {
    top: 403px;
    left: 142px;
    width: 82px;
    --from-x: 15.5px;
    --from-y: 285.5px;
}

.top-reason__tool--roller {
    top: 411px;
    left: 294px;
    width: 108px;
    --from-x: -149.5px;
    --from-y: 265px;
}

.top-reason__tool--helmet {
    top: 503px;
    left: 388px;
    width: 107px;
    --from-x: -243px;
    --from-y: 182.5px;
}

/* 車と工具：幅が狭くなるほど群ごと縮めて、左端で切れないようにする（1400pxでは等倍） */
@media (max-width: 1339px) {
    .top-reason__vehicle {
        --veh-scale: .92;
        /* 縮小すると工具が吹き出しに寄るため、403 × (1 - scale) 分だけ下へ逃がす */
        --veh-y: 32px;
    }
}

@media (max-width: 1219px) {
    .top-reason__vehicle {
        --veh-scale: .84;
        /* 縮小すると工具が吹き出しに寄るため、403 × (1 - scale) 分だけ下へ逃がす */
        --veh-y: 64px;
    }
}

@media (max-width: 1119px) {
    .top-reason__vehicle {
        --veh-scale: .76;
        /* 縮小すると工具が吹き出しに寄るため、403 × (1 - scale) 分だけ下へ逃がす */
        --veh-y: 97px;
    }
}

.top-reason__list {
    position: relative;
    z-index: 1;
    flex: 0 1 445px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-top: 12px;
}

/* 表示アニメーション：1つずつ、画面に入ったタイミングで下からフェードイン
   （まとめて順送りにはせず、スクロールに追従させる） */
.top-reason__list .reason {
    opacity: 0;
    transform: translateY(24px);
}

.top-reason__list .reason.is-revealed {
    animation: reveal-up .7s cubic-bezier(.22, .68, .32, 1) both;
}

.reason__title {
    margin-top: 14px;
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: var(--leading-sub);
    letter-spacing: .04em;
}


.reason__text {
    margin-top: 26px;
    max-width: 640px;
    font-size: var(--text-base);
    line-height: 2.2;
    text-align: justify;
}


/* ----------------------------------------
   06. 他社との違い（COMPARE）
   ---------------------------------------- */
/* 比較表が開閉するため高さは中身なりゆき */
.top-compare {
    background-color: var(--color-primary);
    padding-block: 44px 100px;
}

/* カンプ実測（セクション内座標）：黒バー 245〜391 / 表 418.5〜924 */

/* 表示アニメーション：少し下からフェードイン */
.top-compare__title {
    opacity: 0;
    transform: translateY(24px);
}

.top-compare__title.is-revealed {
    animation: reveal-up .7s cubic-bezier(.22, .68, .32, 1) both;
}

.top-compare__title {
    position: relative;
    display: block;
    text-align: center;
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    padding-block: 20px;
}

/* 見出し左右の斜線 */
.top-compare__title::before,
.top-compare__title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2px;
    height: 92px;
    background-color: var(--color-ink);
    transform: translateY(-50%);
}

.top-compare__title::before {
    left: 96px;
    rotate: -22deg;
}

.top-compare__title::after {
    right: 96px;
    rotate: 22deg;
}

.top-compare__lead {
    margin-top: 34px;
    text-align: center;
    font-size: var(--text-base);
    line-height: 2.2;
}

.compare {
    margin-top: 27px;
}

/* クリックで比較表を開閉する黒バー（初期表示は開いた状態） */
.compare__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    width: 100%;
    height: 146px;
    /* カンプ実測 */
    border-radius: var(--radius-lg);
    background-color: var(--color-ink);
    color: var(--color-surface);
}

.compare__toggle-text {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: .04em;
}

/* タブレット以下では「クリック」→「タップ」に差し替える（4.5 の出し分けと同じ考え方） */
.compare__toggle-verb--touch {
    display: none;
}

.compare__toggle-hint {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.7;
}

/* アコーディオン：grid-template-rows を 0fr↔1fr で補間して上から下へ開く */
.compare__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .5s cubic-bezier(.22, .68, .32, 1);
}

.compare.is-closed .compare__body {
    grid-template-rows: 0fr;
}

/* clip 層には padding を持たせない（閉じたときに高さが残るため） */
.compare__body-clip {
    overflow: hidden;
    min-height: 0;
}

/* 横スクロールできることを示すヒント。
   表と一緒に動かないよう、横スクロールする .compare__body-inner の外側（クリップ層の直下）に置く。
   表示は 820px 以下に限定（haru 指定 2026-07-30・ガイドライン5.5の4段階以外の値） */
.compare__scroll-hint {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 28px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-ink);
}

.compare__scroll-hint::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    animation: scroll-hint-nudge 1.4s ease-in-out infinite;
}

.compare__body-inner {
    padding-top: 28px;
}


/* 列幅・行高はカンプ実測（項目207 / 他社345 / 自社443・ヘッダー54.5・データ行74.5） */
.compare__table {
    width: 100%;
    table-layout: fixed;
    border: 3px solid var(--color-ink);
    background-color: var(--color-surface);
    font-size: var(--text-base);
}

.compare__table th:nth-child(1) {
    width: 207px;
}

.compare__table th:nth-child(2) {
    width: 345px;
}

.compare__table th:nth-child(3) {
    width: 443px;
}

.compare__table th,
.compare__table td {
    padding: 23px 26px;
    /* カンプ実測：データ行高 74.5px */
    border-bottom: 1px solid #E7E5DF;
    text-align: left;
    vertical-align: middle;
    line-height: 1.7;
}

.compare__table thead th {
    padding-block: 14px;
    text-align: center;
    font-size: var(--text-base);
    font-weight: 700;
}

.compare__th--other {
    background-color: var(--color-ink);
    color: var(--color-surface);
}

.compare__th--own {
    background-color: var(--color-primary);
}

/* 行見出し：アイコンなし（haru 指定 2026-07-29）。テキストを左に詰める */
.compare__table tbody th {
    background-color: var(--color-table-head);
    font-weight: 700;
}

.compare__table tbody td {
    background-color: var(--color-table-neutral);
    color: var(--color-text-muted);
}

.compare__table td.compare__own {
    position: relative;
    padding-left: 68px;
    background-color: var(--color-table-highlight);
    color: var(--color-ink);
    font-weight: 700;
}

/* 自社列の丸印 */
.compare__table td.compare__own::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    width: 26px;
    height: 26px;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    transform: translateY(-50%);
}

.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td {
    border-bottom: none;
}


/* ----------------------------------------
   07. Instagram
   ---------------------------------------- */
/* カンプ実測：Instagram＋NEWS で 1140px（画像列の上端 212.5px） */
.top-instagram {
    padding-top: 112px;
    /* タイトル行はアイコン40pxで高さが決まる */
}

.top-instagram__head {
    text-align: center;
}

.top-instagram__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .24em;
    color: var(--color-primary);
    line-height: 1;
}

.top-instagram__lead {
    margin-top: 16px;
    font-size: var(--text-sm);
    font-weight: 700;
}

/* Smash Balloon の出力を入れる枠。
   列数・投稿数・正方形トリミング・画像の間隔（パディング7px＝間隔14px）は
   プラグイン側の設定が持つ（Instagram Feed → Customize）。ここで持つのは幅だけ。
   プラグインは枠いっぱいに広がるので、他セクションと同じ 1148px で止めて中央に置く */
.top-instagram__feed {
    max-width: calc(var(--container) + var(--space-md) * 2);
    /* .container と同じ式。サイト幅を変えたときに追従させるため、数値を直書きしない */
    margin-top: 18px;
    margin-inline: auto;
}


/* ----------------------------------------
   08. お知らせ（NEWS）
   ---------------------------------------- */
.top-news {
    padding-block: 125px 117px;
}

.top-news .section-more {
    margin-top: 60px;
}

.news-list {
    margin-top: 15px;
}

.news-list__item {
    border-bottom: 1px solid var(--color-line);
}

.news-list__item:first-child {
    border-top: 1px solid transparent;
}

.news-list__link {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-block: 32px;
    /* カンプ実測：行ピッチ 99.5px */
}


@media (hover: hover) {
    .news-list__link:hover {
        opacity: .65;
        transition: opacity var(--transition-fast);
    }
}

.news-list__date {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

.news-list__cat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100px;
    height: 34px;
    border-radius: var(--radius-md);
    background-color: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
}

.news-list__title {
    flex: 1 1 auto;
    margin-left: 16px;
    font-size: var(--text-base);
    font-weight: 500;
}

.news-list__arrow {
    flex: 0 0 auto;
    width: 14px;
}


/* ----------------------------------------
   09. よくあるご質問（FAQ）
   ---------------------------------------- */
.top-faq {
    background-color: var(--color-bg-beige);
    padding-block: 100px 120px;
}


.faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* カンプ実測 */
    margin-top: 76px;
}

.faq__item {
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.faq__q {
    display: flex;
    align-items: center;
    gap: 26px;
    width: 100%;
    min-height: 95px;
    /* カンプ実測：閉じた状態の高さ */
    padding: 20px 34px;
    text-align: left;
}

.faq__mark {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.faq__mark--a {
    color: var(--color-text-muted);
}

.faq__q-text {
    flex: 1 1 auto;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.7;
}

/* ＋アイコン（開いている時は − になる） */
.faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-ink);
    transform: translateY(-50%);
}

.faq__icon::after {
    rotate: 90deg;
    transition: rotate var(--transition-base);
}

.faq__item.is-open .faq__icon::after {
    rotate: 0deg;
}

/* アコーディオン：grid-template-rows を 0fr↔1fr で補間して上から下へ開く */
.faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.22, .68, .32, 1);
}

.faq__item.is-open .faq__a {
    grid-template-rows: 1fr;
}

/* clip 層には padding を持たせない（閉じたときに高さが残るため） */
.faq__a-clip {
    overflow: hidden;
    min-height: 0;
}

.faq__a-inner {
    display: flex;
    gap: 26px;
    margin-inline: 34px;
    padding-block: 26px 32px;
    border-top: 1px solid #E4E2DA;
}

.faq__a-text {
    font-size: var(--text-base);
    line-height: 2;
    color: var(--color-text-muted);
    text-align: justify;
}


/* ----------------------------------------
   10. お問い合わせ（CONTACT）
   ---------------------------------------- */
/* カンプ実測（セクション内座標）：写真 0〜599 ／ パネル 108〜520（x215〜1185）
   ／ タグ 380×34（上端88＝パネル上端の20px上）／ ways 257〜485 ／ 下帯 599〜780（#F4F2EC）
   高さは中身なりゆき（固定しない） */
.top-contact {
    position: relative;
    padding-top: 108px;
}

/* 背景写真（TODO: 差し替える） */
.top-contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 599px;
    background-image: url("images/img_contact_back.jpg");
    background-size: cover;
    background-position: center;
}

/* カンプ実測（セクション内座標）：パネル 124.5〜529.5（高さ405）/ タグは上辺にせり出す
   / 見出しグリフ 161 / リード 213.5 / メール・電話ボックス 255.5〜479.5（高さ224） */
.top-contact__panel {
    position: relative;
    z-index: 1;
    width: 970px;
    max-width: calc(100% - var(--space-lg) * 2);
    margin-inline: auto;
    padding: 42px 102px 35px;
    /* カンプ実測：ways ボックスはパネル左右から102px内側 */
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-primary);
    text-align: center;
}

/* パネル上端をまたいで出るタグ。負マージンだとマージン相殺でパネルごと動くため絶対配置にする */
.top-contact__tag {
    position: absolute;
    top: -20px;
    /* カンプ実測：パネル上端の20px上から出る */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 380px;
    height: 34px;
    border-radius: 17px;
    background-color: var(--color-primary);
    font-size: var(--text-base);
    font-weight: 700;
}

.top-contact__title {
    font-size: var(--text-5xl);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
}

.top-contact__lead {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.6;
}

/* カンプ実測：ボックス 766×228 ／ アイコン上端43 ／ 見出し21px ／ 値21px ／ 注記14px */
/* メールと電話は独立したカード。hover で片方だけが浮くため、くっつけず20px空ける */
.top-contact__ways {
    display: flex;
    gap: 20px;
    height: 228px;
    margin-top: 23px;
}


.contact-way {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 43px 20px 0;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-lg);
    color: inherit;
}

.contact-way--mail {
    background-color: var(--color-primary);
}

.contact-way--tel {
    background-color: var(--color-surface);
}

.contact-way__title {
    margin-top: 22px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
}

.contact-way__value {
    margin-top: 31px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.contact-way--tel .contact-way__value {
    font-family: var(--font-display);
    font-size: 21px;
    letter-spacing: .02em;
}

.contact-way__note {
    margin-top: 10px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* 対応エリア */
/* 配置図実測：帯の高さ224 ／ 車 168px ／ 車と本文の間隔32 ／ 見出し24px */
.top-contact__area {
    position: relative;
    width: 100%;
    height: 224px;
    margin-top: 79px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background-color: var(--color-bg-beige);
    /* カンプ実測 #F4F2EC */
}

.top-contact__area-van {
    width: 168px;
}

.top-contact__area-head {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
}

.top-contact__area-text {
    margin-top: 25px;
    font-size: var(--text-base);
    line-height: 2.15;
    /* 行送り 34.4px */
}


/* ========================================
   8. Page-specific Styles（ページ固有）
   - 8.1 は全下層ページで使う共通パーツ、8.2 以降が各ページ固有
   - 下層ページのレスポンシブは 8.11（タブレット）／8.12（スマホ）にまとめている
   ======================================== */

/* ----------------------------------------
   8.1 下層ページ共通パーツ
   ---------------------------------------- */

/* --- ページ見出し（カンプ準拠・2026-08-11 haru 指示で全面変更）---
   カンプ実測（論理px・service_01）: eyebrow グリフ y176-191 ／ h1 グリフ y222.5-271.5
   ／ 黄色マーカー y240-277（高さ38・幅374）／ 車の右端 x504（マーカー右端の20px内側）
   ／ リード グリフ y306.5-318.5 ／ パンくず 右端 x1250（リードとほぼ同じ行）
   ／ 区切り線 y402.5（幅1000・センター）／ セクション高さ 470 */
.page-head {
    padding-block: 84px 20px;
    background-color: var(--color-bg-primary);
}

.page-head__eyebrow {
    font-family: var(--font-display);
    font-size: 22px;
    /* カンプ実測：グリフ高さ16px（欧文キャップハイト 0.72 で逆算） */
    font-weight: 700;
    letter-spacing: .34em;
    line-height: 1;
    color: var(--color-primary);
}

/* マーカー・車・文字を重ねるための箱。
   マーカーと車は絶対配置なので、寸法は3つの変数だけで調整できるようにしている */
/* 見出しの箱の幅＝文字の幅。マーカーと車はそこからの相対で決まるので、
   ページごとに文字数が変わっても崩れない（他の下層ページへ展開するため） */
.page-head__title {
    --car-w: 105px;
    --car-gap: 30px;
    /* 文字と車のあいだ */
    --marker-over: 20px;
    /* マーカーが車の右側にはみ出す量 */
    position: relative;
    width: fit-content;
    /* マーカーは文字幅＋116px 分だけ右へ伸びるので、その余地を残して折り返させる。
       「プライバシーポリシー」のような長いページ名でも画面からはみ出さない */
    max-width: calc(100% - var(--car-gap) - var(--car-w) - var(--marker-over));
    margin-top: 20px;
    font-size: 56px;
    /* カンプ実測：グリフ高さ49.5px（和文 0.88 で逆算） */
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
}

/* 黄色のマーカー：文字の下半分に敷く。左から右へ伸びる */
/* z-index: -1 は親（.page-head）の背景より下に描画されてしまい見えなくなるため使わない。
   代わりに、あとに来る文字側を position: relative にして前面へ出す */
.page-head__marker {
    position: absolute;
    left: 0;
    bottom: -4px;
    display: block;
    /* 文字幅 ＋ 文字と車の間 ＋ 車幅 ＋ 車の右へのはみ出し */
    width: calc(100% + var(--car-gap) + var(--car-w) + var(--marker-over));
    height: 16px;
    background-color: var(--color-primary);
    transform-origin: left center;
}

/* マーカーを先導する車。マーカーの伸びと同じイージングで右へ走る */
/* 車は文字の右に --car-gap だけ空けて止まる。
   走ってくる動きは left を 0 → 100%（＝文字幅）に動かして表現する */
.page-head__car {
    position: absolute;
    left: 100%;
    bottom: 0;
    margin-left: var(--car-gap);
    width: var(--car-w);
    height: auto;
}

/* 文字を「下から生やす」ための窓（FV の筆文字と同じ作り） */
.page-head__window {
    position: relative;
    display: block;
    overflow: hidden;
}

.page-head__text {
    display: block;
    padding-left: 10px;
    padding-bottom: 4px;
}

/* リード文とパンくずはほぼ同じ行に並ぶ（カンプ準拠。パンくずはリードより少し下） */
.page-head__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: 24px;
}

.page-head__lead {
    font-size: var(--text-base);
    line-height: 1.9;
}

/* --- 簡易版のページ見出し（haru 指示 2026-08-11）---
   お問い合わせ・プライバシーポリシーは、マーカー付きの見出しではなく
   ベージュ地に中央揃えの控えめな形にする。パンくずは page-head の外に置く */
.page-head--simple {
    padding-block: 72px 64px;
    background-color: var(--color-bg-beige);
}

.page-head--simple .page-head__lead {
    max-width: 760px;
    margin: 26px auto 0;
    text-align: center;
    font-size: var(--text-lg);
}

/* 区切り線（コンテナより内側の 1000px・センター） */
.page-head__rule {
    width: calc(100% - var(--space-md) * 2);
    max-width: var(--container);
    /* コンテナ幅（1100px）にそろえる・haru 指定 2026-08-11 */
    margin: 74px auto 0;
    border: 0;
    border-top: 1px solid var(--color-line);
}

/* --- ページ見出しの登場アニメーション ---
   ①マーカーが左→右に伸びる（車が先導）→ ②文字が下からせり上がる */
@media (prefers-reduced-motion: no-preference) {
    .page-head__marker {
        animation: head-marker-grow .7s cubic-bezier(.22, .68, .32, 1) .2s both;
    }

    .page-head__car {
        animation: head-car-run .7s cubic-bezier(.22, .68, .32, 1) .2s both;
    }

    .page-head__text {
        animation: head-text-rise .55s cubic-bezier(.22, .68, .32, 1) .85s both;
    }
}

/* --- パンくずリスト --- */
.breadcrumb {
    padding-block: 20px;
}

/* ページ見出しの中のパンくずは、リード文と同じ行の右端に置く（カンプ準拠）。
   カンプ実測：リードのグリフ y306.5 に対しパンくずのグリフ y326 */
.page-head .breadcrumb {
    flex: 0 0 auto;
    /* リード文が無いページでも右端に置く */
    margin-left: auto;
    margin-top: 23px;
    padding-block: 0;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* haru 指定 2026-08-15（PC 12px / スマホ 10px）。トークンに該当値が無いため実測値 */
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.breadcrumb__item:not(:last-child)::after {
    content: "›";
    margin-inline: 10px;
}

.breadcrumb__item[aria-current="page"] {
    color: var(--color-text-primary);
}

@media (hover: hover) {
    .breadcrumb__item a:hover {
        text-decoration: underline;
    }
}

/* --- 下層ページのセクション枠 --- */
.page-section {
    padding-block: 96px;
}

/* 下層ページのセクション見出しはトップより一段小さくする（haru 指定 2026-08-11）。
   トップページ（カンプ検収済み）の 40px はそのまま */
.page-section .section-head__title {
    font-size: var(--text-3xl);
}

.page-section--beige {
    background-color: var(--color-bg-beige);
}

.page-section--tight {
    padding-block: 72px;
}

/* 直前のセクションと続けて見せたいときに上の余白を落とす */
.page-section--flush-top {
    padding-top: 0;
}

/* 見出し帯のすぐ下から中身が始まるページ（一覧・フォーム）向け */
.page-section--tight-top {
    padding-top: 40px;
    /* haru 指定 2026-08-12 */
}

/* セクション見出しの下に置くリード文 */
.page-lead {
    max-width: 800px;
    margin: 44px auto 0;
    text-align: justify;
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

.page-lead--center {
    text-align: center;
}

/* 見出し（.section-head）やリードの直後に来るブロックの間隔。
   .card-grid / .filter / .staff-grid / .company-map は自前で margin-top を持つ */
.section-head+.prose,
.section-head+.spec-table,
.section-head+.service-details,
.section-head+.col3,
.section-head+.ba-set,
.page-lead+.spec-table,
.page-lead+.contact-tel {
    margin-top: 44px;
}

/* --- 本文ブロック（あいさつ文・記事本文・規約など） --- */
.prose {
    max-width: 800px;
    margin-inline: auto;
    text-align: justify;
    line-height: var(--leading-body);
}

.prose>*+* {
    margin-top: 26px;
}

/* 記事の見出し（haru 指定 2026-08-12 でデザインを整理）
   h2 … 左の黄色い縦線＋下の細い罫線で「節の始まり」をはっきりさせる
   h3 … 黄色の小さな丸だけ。h2 より一段軽くして、階層の差が一目で分かるようにした */
.prose h2 {
    margin-top: 64px;
    padding: 2px 0 14px 20px;
    border-left: 5px solid var(--color-primary);
    border-bottom: 1px solid var(--color-line);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-head);
    letter-spacing: .04em;
}

.prose h3 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 44px;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-sub);
    letter-spacing: .04em;
}

.prose h3::before {
    content: "";
    flex: 0 0 auto;
    /* baseline 揃えだと丸が沈むので、行の中ほどに来るようにそろえる */
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* 見出しの直後は間隔を詰める（.prose > * + * の 26px を打ち消す） */
.prose h2+*,
.prose h3+* {
    margin-top: 18px;
}

.prose ul {
    padding-left: 4px;
}

.prose li {
    position: relative;
    padding-left: 22px;
}

.prose li+li {
    margin-top: 8px;
}

.prose li::before {
    content: "";
    position: absolute;
    top: .82em;
    /* 行の中央あたりに点が来る位置（line-height 1.875 の1行目） */
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.prose blockquote {
    padding: 24px 28px;
    border-left: 4px solid var(--color-primary);
    background-color: var(--color-bg-beige);
}

.prose__sign {
    text-align: right;
    font-weight: 700;
}

/* 本文の先頭に置く一言キャッチ */
.catch {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-sub);
    text-align: left;
}

/* --- 定義表（会社情報・工事一覧・事例データ） --- */
.spec-table {
    width: 100%;
    border-top: 1px solid var(--color-line);
    text-align: left;
    line-height: 1.9;
}

.spec-table th,
.spec-table td {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: top;
}

.spec-table th {
    width: 20%;
    /* haru 指定 2026-08-11 */
    background-color: var(--color-bg-beige);
    font-weight: 700;
}

.spec-table td {
    background-color: var(--color-surface);
    font-size: 15px;
    /* haru 指定 2026-08-11 */
}

/* --- 3カラムのテキストブロック（カンプ準拠・service_05）---
   カンプ実測（論理px）: 各カラム幅333・間隔49 ／ イラスト枠 333x225
   ／ 見出し y301-322 ／ キャッチ2行 y360-410 ／ 黄色の下線 y423 ／ 本文 y448-581 */
.col3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 49px;
}

.col3__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 333 / 225;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-beige);
}

.col3__figure img {
    width: 74%;
    /* カンプ実測：枠に対してイラストが一回り小さい */
    height: auto;
}

.col3__title {
    margin-top: 28px;
    font-size: 20px;
    /* haru 指定 2026-08-12（カンプ実測は24px相当） */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
}

.col3__catch {
    margin-top: 26px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-primary);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.7;
}

.col3__text {
    margin-top: 22px;
    text-align: justify;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

/* --- カードグリッド（施工事例・お知らせの一覧） --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg) 36px;
    margin-top: var(--space-lg);
}

/* --- 施工事例カードの一覧版（haru 指示 2026-08-09）---
   トップのカルーセル（カンプ準拠）とは並びが違うので Modifier で分けている。
   カテゴリーは写真の左上に重ね、自由タグはタイトルの下に置く */
.works-card--listing .works-card__img {
    position: relative;
}

.works-card__cat {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 40px;
    padding-inline: 30px;
    border-bottom-right-radius: var(--radius-lg);
    /* haru 指定 2026-08-12（左上は写真の角丸に沿って切り抜かれる） */
    background-color: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
}

/* テキストの左に黄色の丸（.link-arrow::before と同じ） */
.works-card__cat::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.works-card--listing .works-card__title {
    margin-top: 16px;
}

.works-card--listing .works-card__tags {
    margin-top: 12px;
}

.works-card--listing .works-card__meta {
    margin-top: 12px;
}

/* --- 絞り込みチップ --- */
.filter {
    display: flex;
    flex-wrap: wrap;
    /* 左揃え（haru 指定 2026-08-15）。left ではなく flex-start を使うのは、
       同じ結果で対応ブラウザが広いため（規約 5.1 の採用基準） */
    justify-content: flex-start;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 80px;
    /* haru 指定 2026-08-12 */
}

.filter__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 幅は4文字ぶんにそろえる（「大工工事」等が大半のため・haru 指示 2026-08-12）。
       4文字の実測は 64px。左右の余白を足して 116px を全チップ共通の固定幅にしている。
       116×8＋gap10×7＝998px で、いちばん狭い container-md（1000px）にも1行で収まる。
       5文字の「水回り工事」（実測 77.3px）も左右12pxの余白に収まる */
    width: 116px;
    height: 50px;
    padding-inline: 12px;
    border: 1px solid var(--color-line);
    border-radius: 25px;
    /* haru 指定 2026-08-12 */
    background-color: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.filter__chip.is-active {
    border-color: var(--color-ink);
    background-color: var(--color-primary);
}

@media (hover: hover) {
    .filter__chip:hover {
        border-color: var(--color-ink);
    }
}

/* --- ページネーション --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 56px;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    /* WCAG 2.2 のターゲットサイズ（最小24px）に余裕を持たせる */
    height: 44px;
    padding-inline: 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1;
}

.pagination__item.is-current {
    border-color: var(--color-ink);
    background-color: var(--color-primary);
}

/* 「前へ」「次へ」は数字より文字数が多く、同じサイズだと箱が間延びする
   （haru 指定 2026-08-15、「前へ」も 2026-08-27 に追加）。
   トークンに 12px が無いため実測値で指定する */
.prev.pagination__item,
.next.pagination__item {
    font-size: 12px;
}

/* --- 一覧へ戻るリンク --- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 56px;
    font-weight: 700;
}

.back-link::before {
    content: "";
    width: 9px;
    height: 9px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

/* --- 前後の記事への移動（施工事例・お知らせの詳細ページ） ---
   左＝前（1つ古い）／中央＝一覧へ戻る／右＝次（1つ新しい）。
   前後は文字だけ、中央の「一覧へ戻る」だけを囲みにして主導線とする（haru 指示 2026-08-12）。
   端の投稿では片側が .is-disabled の空要素になるが、grid の3列は保つので
   「一覧へ戻る」の位置が動かない */
.post-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-md);
    margin-top: 56px;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-line);
}

.post-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* WCAG 2.2 のターゲットサイズを確保する */
    min-height: 44px;
}

/* 矢印を置くぶんだけ、進行方向側に余白を足す */
.post-nav__link--prev {
    justify-content: flex-start;
    padding-left: 32px;
}

.post-nav__link--next {
    justify-content: flex-end;
    padding-right: 32px;
}

/* 方向を示す山形。文字（.post-nav__dir）は .hover-roll で overflow: hidden になるため、
   その中に絶対配置すると切れてしまう。矢印はリンク（a）側に持たせる */
.post-nav__link--prev::before,
.post-nav__link--next::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-bottom: 2px solid var(--color-ink);
    transform: translateY(-50%) rotate(45deg);
}

.post-nav__link--prev::before {
    left: 8px;
    border-left: 2px solid var(--color-ink);
}

.post-nav__link--next::after {
    right: 8px;
    border-right: 2px solid var(--color-ink);
    transform: translateY(-50%) rotate(-45deg);
}

.post-nav__dir {
    font-size: var(--text-sm);
    font-weight: 700;
}

/* 一覧へ戻る：この列だけ囲みを付けて主導線にする */
.post-nav__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding-inline: var(--space-lg);
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    font-weight: 700;
    white-space: nowrap;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

/* hover は箱ごと上に上がるだけ。文字は .hover-roll で入れ替えない（haru 指示 2026-08-12） */
@media (hover: hover) {
    .post-nav__index:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-pop);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-nav__index {
        transition: none;
    }
}

/* ----------------------------------------
   8.2 サービス一覧（/service/）
   ----------------------------------------
   カンプ実測（論理px・service_02）:
   写真ブロック x150-700(550) y50-400 ／ 工事タグ 3列2段 x150-700
   ／ テキスト列 x775-1239(464) ／ 見出し「01」グリフ55(→76px)
   ／ キャッチ グリフ22.5(→26px) 行ピッチ44 ／ 本文 グリフ13.5(→16px) 行ピッチ30
   ／「こんなときに」白バー 幅1100（コンテナ幅）
   偶数番（service_03）は左右反転＋ベージュの角丸面が背面に敷かれる
   ---------------------------------------- */

.service-detail {
    position: relative;
    /* トップのサービスカードからアンカーで飛んでくるので、
       追従ヘッダー（88px）に隠れないぶんの余白を確保する */
    scroll-margin-top: calc(var(--header-h) + 48px);
}

.service-detail+.service-detail {
    margin-top: 120px;
}

/* 偶数番の背面に敷くベージュの面。画面左端まで伸ばし、右端はコンテナの外側で止める */
.service-detail--alt::before {
    content: "";
    position: absolute;
    top: -64px;
    bottom: -64px;
    /* 左は画面端まで伸ばす（要素の中心＝画面の中心なので 50% − 50vw でちょうど端に届く）。
       右は「コンテナの右マージンの半分」だけ画面端から空ける（haru 指定 2026-08-11）。
       コンテナの右マージン M = 50vw − 50% − 24px（24px はコンテナの左右 padding）なので、
       right = −M/2 − 24px = (50% − 50vw) ÷ 2 − 12px。コンテナ幅が変わっても比率が保たれる */
    left: calc(50% - 50vw);
    right: calc((50% - 50vw) / 2 - var(--space-md) / 2);
    z-index: -1;
    border-radius: 0 40px 40px 0;
    background-color: var(--color-bg-beige);
}

.service-detail__inner {
    display: grid;
    grid-template-columns: 550px 1fr;
    gap: 75px;
    align-items: start;
}

/* 偶数番は左右を入れ替える（写真が右） */
.service-detail--alt .service-detail__inner {
    grid-template-columns: 1fr 550px;
}

.service-detail--alt .service-detail__media {
    order: 2;
}

/* --- 写真スライダー（左右2枚並び。左は上へ、右は下へ動く） --- */
.service-detail__slider {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.service-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: 12 / 15;
    /* 施工事例の写真と同じ比率（素材も 0.80） */
    background-color: var(--color-bg-beige);
}

/* 2枚並びの外側だけを丸める（左のスライダーは左側、右のスライダーは右側）。
   動く向き（--up / --down）ではなく並び順で指定しているので、
   左右を入れ替えても丸めの向きがずれない */
.service-detail__slider .service-slider:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.service-detail__slider .service-slider:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* 写真3枚を縦に連ねたトラック。1枚分ずつ動かして送る（動かすのは main.js） */
.service-slider__track {
    display: block;
    will-change: transform;
}

.service-slider__item {
    display: block;
}

.service-slider__item img {
    display: block;
    width: 100%;
    aspect-ratio: 12 / 15;
    /* 1枚の高さ＝枠の高さ。これがそろっていないと送り幅がずれる */
    object-fit: cover;
}


/* --- 工事メニューのタグ（「対応できる工事の一覧」から抜き出したもの） --- */
.service-detail__menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 30px;
}

.service-detail__menu li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.5;
}

/* --- テキスト側 --- */
.service-detail__head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: -40px;
    /* haru 指定 2026-08-11：連番の余白ぶん上へ詰める */
}

.service-detail__num {
    font-family: var(--font-display);
    font-size: 160px;
    /* haru 指定 2026-08-11（カンプ実測は148px相当） */
    font-weight: 700;
    line-height: 1;
    margin-top: 20px;
    color: var(--color-primary);
}

.service-detail__icon {
    width: 52px;
    flex: 0 0 auto;
}

.service-detail__title {
    font-size: var(--text-3xl);
    /* カンプ実測：グリフ高さ26px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
}

.service-detail__catch {
    margin-top: 46px;
    font-size: 26px;
    /* カンプ実測：グリフ高さ22.5px */
    font-weight: 700;
    line-height: 1.7;
    /* カンプ実測：行ピッチ44px */
}

.service-detail__text {
    margin-top: 30px;
    text-align: justify;
    line-height: var(--leading-body);
}

.service-detail__text+.service-detail__text {
    margin-top: 30px;
}

/* --- 「こんなときに」の白バー（コンテナ幅いっぱい） --- */
.service-detail__case {
    display: flex;
    align-items: baseline;
    gap: 34px;
    margin-top: 56px;
    padding: 30px 46px;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    line-height: 1.9;
}

.service-detail__case-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    font-weight: 700;
}

.service-detail__case-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* --- 「施工事例はこちら」の吹き出し＋車（各サービスの下・中央） ---
   登場：右から車が入って停止 → そのあと吹き出しが上に浮かび上がる */
.works-pop {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

.works-pop__link {
    position: relative;
    display: block;
    width: 150px;
    padding-top: 128px;
    /* 吹き出しのぶんの高さを確保する */
}

.works-pop__bubble {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 120px;
    background-image: url("images/fukidasi_service.svg");
    background-size: 110px 120px;
    background-repeat: no-repeat;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.5;
    /* 吹き出しの尻尾のぶん、文字を上に寄せる */
    padding-bottom: 12px;
}

.works-pop__car {
    display: block;
    width: 105px;
    margin-inline: auto;
}

@media (hover: hover) {
    .works-pop__link:hover .works-pop__car {
        transform: translateX(6px);
        /* 進行方向（左→右）に合わせて右へ少し動かす */
        transition: transform var(--transition-base);
    }
}

@media (prefers-reduced-motion: no-preference) {

    /* 画面に入るまでは隠しておく（.is-revealed は main.js が付ける） */
    .works-pop__car,
    .works-pop__bubble {
        opacity: 0;
    }

    .works-pop.is-revealed .works-pop__car {
        animation: works-pop-car-in .7s cubic-bezier(.22, .68, .32, 1) both;
    }

    .works-pop.is-revealed .works-pop__bubble {
        animation: works-pop-bubble-in .5s cubic-bezier(.22, .68, .32, 1) .7s both;
    }
}


/* ----------------------------------------
   8.3 会社概要（/company/）
   ----------------------------------------
   カンプ実測（論理px）:
   ごあいさつ … ベージュのパネル 幅900・y38-1216 ／ 写真の帯 全幅・y132-412（高さ280）
   考え方 …… 写真 330x224（素材 495x336 と同比率）・3列・間隔55
   会社情報 … 表 幅1000（x195-1198）／ 地図 幅1000（y782-1204）
   取引先 …… 背景写真に #6E6D5D 相当を乗算（実測）→ 既存トークン --color-text-muted と一致
   ---------------------------------------- */

/* --- ごあいさつ：ベージュのパネル＋全幅の写真スライダー --- */
.company-message {
    padding-block: 40px;
}

.company-message__panel {
    position: relative;
    width: 100%;
    max-width: var(--container-sm);
    /* カンプ実測：幅900px */
    margin-inline: auto;
    /* 写真帯より上に出るベージュの地。子の margin-top で取るとマージン相殺で
       パネルごと下がってしまうため、必ず親の padding で確保する（カンプ実測 94px） */
    padding-top: 94px;
    padding-bottom: 88px;
    border-radius: 40px;
    background-color: var(--color-bg-beige);
}

/* 写真の帯はパネルからはみ出して画面端まで届かせる */
.company-message__strip {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

.company-message__track {
    display: flex;
    width: max-content;
}

.company-message__track img {
    display: block;
    width: 400px;
    /* 高さ280 × 素材比率 600/420 */
    height: 280px;
    object-fit: cover;
}

/* 同じ並びを2組つないで、1組ぶんを右から左へ流し続ける */
@media (prefers-reduced-motion: no-preference) {
    .company-message__track {
        animation: company-strip-marquee 60s linear infinite;
    }
}

.company-message__body {
    padding: 58px 130px 0;
}

/* 原稿どおりの改行で見せるため、行送りは本文と同じまま中央に置く */
.company-message__body .prose {
    max-width: none;
    text-align: left;
    line-height: 2.5;
    /* haru 指定 2026-08-12 */
}


/* --- 私たちの考え方：3カラムの図版を写真に差し替える --- */
.col3__item--photo .col3__figure {
    display: block;
    aspect-ratio: 495 / 336;
    /* 素材の比率そのまま */
    border-radius: var(--radius-lg);
    background-color: transparent;
    overflow: hidden;
}

.col3__item--photo .col3__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* キャッチが無い代わりに、見出しの下へ黄色の線を引く */
.col3__item--photo .col3__title {
    padding-bottom: 18px;
    border-bottom: 2px solid var(--color-primary);
}


/* --- スタッフ紹介 --- */
/* カード幅は固定。人数が増えても折り返して中央に並ぶ */
.staff-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px;
    margin-top: var(--space-lg);
}

/* 顔写真を上部の左右センターに置き、その下に本文を積む（haru 指示 2026-08-12）。
   カードは縦長になってよい */
.staff-card {
    width: min(350px, 100%);
    /* haru 指定 2026-08-12 */
    display: grid;
    justify-items: center;
    /* 高さは隣のカードにそろうが、中身は上から詰める。
       項目数が人によって違うと、そろえないと写真や名前の位置がカードごとにずれる */
    align-content: start;
    gap: 22px;
    padding: 36px 32px 32px;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.staff-card__photo img {
    width: 140px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    /* 顔写真は正円（haru 指定 2026-08-12） */
}

.staff-card__name {
    margin-top: 10px;
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.4;
}

.staff-card__roman {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: .12em;
    color: var(--color-text-muted);
}

/* 担当・趣味・出身地。カードは中央そろえだが、項目名と内容の対応が読み取れるよう
   この一覧だけ左そろえにする。記入のない項目は PHP 側で行ごと出さない */
.staff-card__meta {
    width: 100%;
    margin-top: 14px;
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--color-line);
    text-align: left;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.staff-card__meta-row {
    display: grid;
    grid-template-columns: 4em 1fr;
    gap: 10px;
    align-items: baseline;
}

.staff-card__meta-label {
    color: var(--color-text-muted);
    font-weight: 700;
}

.staff-card__meta-value {
    margin: 0;
}

.staff-card__text {
    margin-top: 14px;
    text-align: justify;
    /* 本文だけは読みやすさを優先して両端そろえ（規約 5.7） */
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}


/* --- 会社情報：表と地図は同じ幅（1000px）でそろえる --- */
.company-table {
    border: 1px solid var(--color-line);
}

/* ACCESS の小見出し（黄色のピン＋英字） */
.company-access-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 58px;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: .28em;
    line-height: 1;
}

.company-access-head::before {
    content: "";
    width: 18px;
    height: 24px;
    background-color: var(--color-primary);
    /* 地図ピンの形（素材が無いので CSS の clip-path で描く） */
    clip-path: path("M9 0a9 9 0 0 0-9 9c0 6.5 9 15 9 15s9-8.5 9-15a9 9 0 0 0-9-9zm0 12.5A3.5 3.5 0 1 1 9 5.5a3.5 3.5 0 0 1 0 7z");
}

.company-map {
    max-width: var(--container-md);
    margin: 26px auto 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    /* haru 指定 2026-08-12。中の iframe の角も落とすため overflow を効かせる */
    overflow: hidden;
}

.company-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}


/* --- 取引先・法人のお客様へ：背景写真にグレーを乗算し、文字は白 --- */
.company-business {
    background-image: url("images/img_forbusiness_bk.jpg");
    background-color: var(--color-text-muted);
    /* カンプ実測の乗算色 #6E6D5D とほぼ同値 */
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    color: var(--color-surface);
}

.company-business .section-head__title,
.company-business .catch,
.company-business .prose {
    color: var(--color-surface);
}


/* ----------------------------------------
   8.4 施工事例 詳細（/works/{事例}/）
   ---------------------------------------- */

/* Before / After の代表カット */
.ba-set {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.ba-set figure {
    margin: 0;
}

.ba-set img,
.gallery img {
    width: 100%;
    aspect-ratio: 12 / 15;
    /* 施工事例の写真は全ページ 12:15 に統一（haru 指定 2026-08-09） */
    object-fit: cover;
    border-radius: var(--radius-md);
}

.ba-set__label {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-right: 10px;
    padding-inline: 12px;
    border-radius: var(--radius-sm);
    background-color: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
}

.ba-set figcaption,
.gallery figcaption {
    margin-top: 12px;
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* 工程ごとの写真ギャラリー */
.phase-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 56px;
}

.phase-head__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    font-weight: 700;
    line-height: 1;
}

/* h2 は 2xl（haru 指示 2026-08-09。--text-4xl から変更） */
.phase-head__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.4;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.gallery figure {
    margin: 0;
}


/* ----------------------------------------
   8.5 お知らせ（/news/）
   ---------------------------------------- */

/* 横並びの3枚で白いパネルの下端をそろえる。
   グリッドの升目いっぱいに伸ばし、本文側で余りの高さを吸収する */
.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

@media (hover: hover) {
    .news-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-pop);
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-card {
        transition: none;
    }
}

.news-card__img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.news-card__body {
    flex: 1 1 auto;
    padding: 22px 24px 28px;
}

.news-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-card__date {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
}

.news-card__title {
    margin-top: 12px;
    font-size: 17px;
    /* トップの .works-card__title と同じ一覧カード用サイズ */
    font-weight: 700;
    line-height: 1.75;
}

.news-card__excerpt {
    margin-top: 12px;
    text-align: justify;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--color-text-muted);
}

/* 記事ページのヘッダー */
.article-head__title {
    margin-top: 16px;
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: var(--leading-head);
    letter-spacing: .04em;
}

.article-head__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.article-head__date {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
}

.article-head__eyecatch {
    margin-top: 32px;
}

.article-head__eyecatch img {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* 記事内の各ブロックの間隔（.prose の内部間隔とは別に、ブロック同士の間を取る） */
.filter+.works-detail {
    margin-top: var(--space-lg);
}

/* タグはタイトルの下（haru 指示 2026-08-09） */
.article-head .works-card__tags {
    margin-top: 16px;
}

.ba-set+.spec-table {
    margin-top: var(--space-lg);
}

.spec-table+.prose,
.gallery+.prose,
.article-head+.prose,
.prose+.prose,
/* 見出しなしレイアウト（A）では、ギャラリーが直前のブロックに続く */
.prose+.gallery,
.spec-table+.gallery,
.ba-set+.gallery {
    margin-top: 56px;
}


/* ----------------------------------------
   8.6 お問い合わせ（/contact/）
   ---------------------------------------- */

.form {
    max-width: 800px;
    margin-inline: auto;
}

.form__field+.form__field {
    margin-top: var(--space-md);
}

.form__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

/* 必須バッジ：赤地に白字はコントラスト 4.0:1 で AA に届かない（axe: serious）ため、
   サイト共通の黄色チップ（.tag と同じ配色・8.6:1）にしている */
.form__require {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding-inline: 10px;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    color: var(--color-text-primary);
    font-size: 12px;
    /* 必須バッジは本文より一段小さく（--text-xs より下） */
    font-weight: 700;
    line-height: 1;
}

.form__input,
.form__select,
.form__textarea {
    width: 100%;
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.6;
}

.form__textarea {
    min-height: 200px;
    resize: vertical;
}

.form__note {
    margin-top: 0;
    /* haru 指定 2026-08-12 */
    font-size: var(--text-sm);
    line-height: 1.9;
    color: var(--color-text-muted);
}

.form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 320px;
    height: 64px;
    margin: 32px auto 0;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    font-size: var(--text-lg);
    font-weight: 700;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

@media (hover: hover) {
    .form__submit:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-pop);
    }
}

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

/* --- 入力 → 確認 → 完了 のステップ表示 --- */
.form-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 56px;
}

.form-steps__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border: 1px solid var(--color-line);
    border-radius: 25px;
    background-color: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
}

.form-steps__item::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-line);
}

/* 現在の段階。色ではなく aria-current でも伝わるようにしている */
.form-steps__item.is-current {
    border-color: var(--color-ink);
    background-color: var(--color-primary);
    color: var(--color-text-primary);
}

.form-steps__item.is-current::before {
    background-color: var(--color-ink);
}

/* --- 送信前の確認チェック（プライバシーポリシー同意／入力内容の確認） --- */
.form__consent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: var(--space-lg);
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
}

.form__consent+.form__consent {
    margin-top: 20px;
    /* haru 指定 2026-08-12 */
}

.form__consent input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /* チェックの色だけブランドカラーに。見た目は OS 標準のままにして操作性を保つ */
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form__consent a {
    text-decoration: underline;
}

/* --- 送信完了 --- */
.thanks {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}

.thanks__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-inline: auto;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* チェックマーク（素材を増やさず CSS で描く） */
.thanks__mark::before {
    content: "";
    width: 34px;
    height: 18px;
    margin-top: -8px;
    border-left: 5px solid var(--color-ink);
    border-bottom: 5px solid var(--color-ink);
    transform: rotate(-45deg);
}

.thanks__title {
    margin-top: 32px;
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: var(--leading-head);
    letter-spacing: .04em;
}

.thanks__text {
    margin-top: 26px;
    line-height: var(--leading-body);
}

.thanks__note {
    margin-top: 26px;
    padding: 22px 24px;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-beige);
    font-size: var(--text-sm);
    line-height: 1.9;
    text-align: left;
}

.thanks__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
    margin-top: 48px;
}

/* 電話でのご相談（フォームの上に置く導線） */
.contact-tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 520px;
    margin: 0 auto 80px;
    /* haru 指定 2026-08-12 */
    padding: 28px 32px;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    text-align: center;
}

.contact-tel__num {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.contact-tel__num img {
    width: 24px;
}

/* --- Contact Form 7 が出すメッセージ（WP化で追加） ---
   フォームの見た目は自前の .form__* が持ち、CF7 の自動クラスには当てていない。
   ただしエラー文と送信結果の枠だけはプラグインが出すため、ここで最低限を整える */

/* 項目ごとのエラー（入力欄の下に出る）
   赤地に白ではなく背景色に対して 5.7:1 の濃い赤。色だけに頼らず枠線でも示す */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.6;
    color: #c1272d;
}

.form__input.wpcf7-not-valid,
.form__select.wpcf7-not-valid,
.form__textarea.wpcf7-not-valid {
    border-color: #c1272d;
}

/* フォーム下の送信結果メッセージ */
.wpcf7-response-output {
    margin: var(--space-md) 0 0;
    padding: 16px 20px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-size: var(--text-sm);
    line-height: 1.9;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: #c1272d;
}

/* 同意チェック：CF7 は checkbox を span で3重に包み、
   既定の左マージン（1em）と行の高さ（25.6px）を持ち込む。
   静的版と同じ行の高さ・間隔にするため、包みを潰して checkbox だけを残す
   （これを外すと1行あたり4px高くなり、以降の要素が下へずれる） */
.form__consent .wpcf7-form-control-wrap,
.form__consent .wpcf7-acceptance,
.form__consent .wpcf7-list-item {
    display: flex;
    align-items: center;
    margin: 0;
    line-height: 1;
}

/* 送信中のインジケーター（CF7 標準） */
.wpcf7-spinner {
    margin-inline: 12px;
}


/* ========================================
   8.7 レスポンシブ：タブレット（〜1023px）
   ----------------------------------------
   ベーススタイルより後に置く必要があるため（CODING_GUIDELINES 5.8：
   同じ詳細度では後勝ちのため、コンポーネント直後に書くと base に負ける）、
   レイアウトを組み替えるメディアクエリはここへまとめている。
   値の微調整だけのメディアクエリは各コンポーネント直後のままでよい。
   ======================================== */

@media (max-width: 1023px) {
    .header__tagline {
        margin-left: 20px;
        font-size: 10px;
    }
}

@media (max-width: 1023px) {
    .header__toggle {
        display: flex;
    }

    /* ドロワー：右から入る全画面パネル */
    .header__drawer {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        margin-left: 0;
        padding: 40px 24px;
        background-color: var(--color-primary);
        visibility: hidden;
        /* 横方向に逃がすと、変形した fixed 要素がドキュメントの
           スクロール領域に含まれて横スクロールが出るため、上方向へ隠す */
        transform: translateY(-100%);
        transition: transform .4s cubic-bezier(.22, .68, .32, 1), visibility 0s linear .4s;
    }

    .header__drawer.is-open {
        visibility: visible;
        transform: translateY(0);
        transition: transform .4s cubic-bezier(.22, .68, .32, 1), visibility 0s;
    }

    .header__list {
        flex-direction: column;
        gap: 28px;
    }

    .header__link {
        font-size: 20px;
    }

    .header__sns,
    .header__cta {
        margin-left: 0;
        margin-right: 0;
    }
}

/* タブレット：左右2カラムを縦に積む */
@media (max-width: 1023px) {
    .footer {
        padding-block: 56px 48px;
    }

    .footer__inner {
        flex-direction: column;
        gap: 56px;
    }

    .footer__left,
    .footer__right {
        flex: 0 0 auto;
        width: 100%;
    }

    .footer__logo img {
        max-width: 100%;
    }

    .footer__map iframe {
        width: 100%;
    }

    .footer__catch {
        margin-top: 48px;
    }
}

/* タブレット以下：ステージを画面幅いっぱいにして、本文の下にビジュアルを積む。
   ビジュアルの中身は 1149×692 のデザイン座標のままなので、家が中央に来るよう左へずらす */
@media (max-width: 1023px) {
    .page-top {
        --fv-w: calc(100vw - 48px);
        --fv-gap: 48px;
    }

    .top-fv {
        height: auto;
    }

    .top-fv__stage {
        width: 100%;
        height: auto;
        padding-inline: 24px;
    }

    .top-fv__body {
        position: static;
        padding-top: 48px;
    }

    .top-fv__visual {
        position: relative;
        inset: auto;
        width: calc(1149 * var(--fv-u));
        height: calc(600 * var(--fv-u));
        margin-top: calc(40 * var(--fv-u));
        margin-left: calc(-243 * var(--fv-u));
        overflow: hidden;
    }
}

/* タブレット：引用見出しと本文を縦に積む */
@media (max-width: 1023px) {
    .top-concern__columns {
        flex-direction: column;
        gap: 40px;
        margin-block: 80px;
    }

    .top-concern__catch {
        font-size: 28px;
        padding-left: 48px;
    }

    .top-concern__link-wrap {
        margin-top: 48px;
    }

    .top-concern__inner {
        padding-top: 64px;
    }

    .top-concern__title {
        margin-top: 48px;
        font-size: 20px;
    }

    .bubble {
        min-height: 0;
        height: auto;
        padding-block: 20px;
    }

    .bubble__text {
        font-size: var(--text-base);
    }
}

@media (max-width: 1023px) {
    .top-service {
        padding-block: 72px 56px;
    }
}

/* タブレット：小カードを2カラムにし、04 の横に「サービス一覧を見る」を置く */
@media (max-width: 1023px) {
    .service-cards {
        gap: 24px 16px;
    }

    .service-card:not(.service-card--lg) {
        flex: 0 0 calc((100% - 16px) / 2);
    }

    .service-cards .section-more {
        flex: 0 0 calc((100% - 16px) / 2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0;
    }

    .service-card--lg {
        height: auto;
        flex-direction: column;
    }

    .service-card--lg .service-card__body {
        padding: 28px 24px 24px;
    }

    .service-card--lg .service-card__img {
        flex: 0 0 auto;
        width: 100%;
        height: 240px;
    }

    .service-card--lg .service-card__text {
        max-width: none;
    }
}

@media (max-width: 1023px) {
    .top-works {
        padding-block: 72px 80px;
    }

    .top-works .section-more {
        margin-bottom: 80px;
    }
}

/* タブレット：左の吹き出し＋車と、右の理由リストを縦に積む */
@media (max-width: 1023px) {
    .top-reason__inner {
        flex-direction: column;
        gap: 48px;
        padding-block: 64px 80px;
    }

    .top-reason__aside,
    .top-reason__list {
        flex: 0 0 auto;
        width: 100%;
    }

    .top-reason__title::after {
        left: 80px;
    }

    /* 車＋工具は絶対配置をやめ、吹き出しの下に置く（--veh-y で上の余白を詰める） */
    .top-reason__vehicle {
        position: relative;
        inset: auto;
        height: 380px;
        margin-top: 60px;
        --veh-scale: .7;
        --veh-x: 20px;
        --veh-y: -282px;
    }

    .top-reason__list {
        gap: 56px;
        padding-top: 0;
    }
}

/* タブレット：表は横スクロールで見せる（列を潰さない） */
@media (max-width: 1023px) {
    .compare__body-inner {
        overflow-x: auto;
    }

    /* ヒントを表の上に出したので、表側の余白を詰める */
    .compare__body-inner {
        padding-top: 10px;
    }

    /* 横スクロール前提なので文字を小さくし、いまの改行を保ったまま列幅を限界まで詰める */
    .compare__table {
        min-width: 764px;
        font-size: var(--text-sm);
    }

    .compare__table th:nth-child(1) { width: 118px; }
    .compare__table th:nth-child(2) { width: 290px; }
    .compare__table th:nth-child(3) { width: 356px; }

    .compare__table th,
    .compare__table td {
        padding: 18px 16px;
    }

    .compare__table td.compare__own {
        padding-left: 56px;
    }

    .compare__table td.compare__own::before {
        left: 16px;
        width: 22px;
        height: 22px;
        border-width: 3px;
    }


    .compare__toggle {
        height: auto;
        flex-direction: column;
        gap: 20px;
        padding: 28px 24px;
    }

    .compare__toggle-text {
        font-size: 20px;
        text-align: center;
    }

    .top-compare__title {
        font-size: 20px;
        line-height: 1.6;
    }

    .top-compare__title::before,
    .top-compare__title::after {
        height: 72px;
    }

    .top-compare__title::before { left: 16px; }
    .top-compare__title::after  { right: 16px; }
}

@media (max-width: 1023px) {
    .top-instagram {
        padding-top: 72px;
    }

    /* 画面いっぱいに写真が接しないよう、左右に余白を残す（旧グリッドから引き継ぎ） */
    .top-instagram__feed {
        padding-inline: 24px;
    }
}

@media (max-width: 1023px) {
    .top-news {
        padding-block: 80px 80px;
    }

    .news-list__link {
        flex-wrap: wrap;
        gap: 12px 16px;
        padding-block: 24px;
    }

    .news-list__title {
        flex: 1 1 100%;
        margin-left: 0;
    }
}

@media (max-width: 1023px) {
    .top-faq {
        padding-block: 72px 80px;
    }
}

/* タブレット：パネルの余白を詰め、メールと電話を縦に積む */
@media (max-width: 1023px) {
    .top-contact {
        padding-top: 72px;
    }

    .top-contact__panel {
        padding: 42px 32px 32px;
        max-width: calc(100% - 48px);
    }

    .top-contact__title {
        font-size: 28px;
    }

    .top-contact__ways {
        height: auto;
        flex-direction: column;
    }

    .contact-way {
        padding: 28px 20px 24px;
    }

    .top-contact__area {
        height: auto;
        flex-direction: column;
        gap: 20px;
        padding: 40px 24px;
        text-align: center;
    }

    .top-contact__area-head {
        font-size: 20px;
        line-height: 1.5;
    }
}



/* ----------------------------------------
   8.8 レスポンシブ：タブレットの個別調整（haru 指示 2026-07-30）
   ----------------------------------------
   FV は「本文」と「イラスト」で基準スケールを分ける：
   ・本文  … 黄色マーカー(437px)が 85vw を満たすスケール
   ・イラスト… 家(662px)が 70vw になるスケール（--fv-u をセクション側に持たせる）
   道は CONCERN 側も同じスケール・同じ横位置で算出して境界で繋ぐ。
   ---------------------------------------- */
@media (max-width: 1023px) {

    /* ① 本文ブロックを 85vw（最大670px）・左右センター（中身は左揃えのまま）。
       基準スケールを「実際のブロック幅 ÷ 437（黄色マーカーの幅）」にすることで、
       PC と同じく“要素そのまま拡大縮小”になり、見え方が幅で変わらない */
    .top-fv__body {
        --fv-body-w: min(85vw, 670px);
        --fv-u: calc(var(--fv-body-w) / 437);
        width: var(--fv-body-w);
        margin-inline: auto;
    }

    /* 相談フォームは常駐パーツと同じ実寸（554px）で左右センター */
    .top-fv__consult {
        --cu: 1px;
        width: 554px;
        max-width: 100%;
        margin: 40px auto 0;
    }

    /* ② イラストは家が 70vw・センター。高さは車の下端まで確保し、道は下へ抜かす */
    .page-top {
        --fv-u: calc(70vw / 662);
    }

    .top-fv__stage {
        padding-inline: 0;
    }

    .top-fv {
        /* 車の下端が切れないよう、ビジュアルの下に CONCERN へのつなぎ余白を確保する */
        padding-bottom: var(--fv-gap);
    }

    .top-fv__visual {
        width: calc(1149 * var(--fv-u));
        height: calc(710 * var(--fv-u));
        margin-top: calc(40 * var(--fv-u));
        /* 家（デザイン座標 x487〜1149・中心818）を画面中央に合わせる */
        margin-left: calc(50vw - 818 * var(--fv-u));
        overflow: visible;
    }

    /* ③ CONCERN の道を FV と同じスケール・同じ横位置で続ける */
    .top-concern__road {
        top: calc(-328 * var(--fv-u) - var(--fv-gap));
        left: calc(50vw - 736 * var(--fv-u));
        width: calc(1500 * var(--fv-u));
    }

    /* ④ 引用見出し〜本文は 70vw。リンクは一番下へ回す
       （display: contents で message の子を columns の直接の子として並べ替える） */
    .top-concern__columns {
        max-width: 70vw;
    }

    .top-concern__message {
        display: contents;
    }

    .top-concern__link-wrap {
        order: 1;
        margin-top: 32px;
    }

    /* ⑤ REASON：見え方を変えず、吹き出し・車・理由リストを左右センターに */
    .top-reason__aside {
        width: min(100%, 434px);
        margin-inline: auto;
    }

    .top-reason__list {
        width: min(100%, 560px);
        margin-inline: auto;
    }

    .top-reason__vehicle {
        /* 群の横幅は 630 × --veh-scale。434px の枠内で中央に来る値 */
        --veh-x: 91px;
    }

    /* ⑥ お知らせ：日付・カテゴリ・タイトル・矢印を1行に保ち、タイトルだけ折り返す */
    .news-list__link {
        flex-wrap: nowrap;
        align-items: center;
    }

    .news-list__title {
        flex: 1 1 auto;
        margin-left: 16px;
    }

    .news-list__arrow {
        flex: 0 0 auto;
    }

    /* ⑦ CONTACT の背景写真はセクションの高さに追従させる
       （下の対応エリア帯は自前の背景色で写真を隠す） */
    .top-contact::before {
        height: auto;
        bottom: 0;
    }

    /* ⑧ 求人バナーは PC と同じ大きさのまま左揃え */
    .footer__recruit {
        width: 462px;
        max-width: 100%;
    }

    /* --- 2026-07-30 追加調整 --- */

    /* ② 大カードの写真の高さ */
    .service-card--lg .service-card__img {
        height: 400px;
    }

    /* ③ 施工事例の下の余白 */
    .top-works .section-more {
        margin-bottom: 140px;
    }

    /* ④ 見出し左右の斜線を文章に寄せる（画面端から中央寄りへ） */
    .top-compare__title::before {
        left: calc(50% - 230px);
    }

    .top-compare__title::after {
        right: calc(50% - 230px);
    }

    /* ⑤ 「クリック」→「タップ」 */
    .compare__toggle-verb--pointer {
        display: none;
    }

    .compare__toggle-verb--touch {
        display: inline;
    }
}


/* ========================================
   8.9 レスポンシブ：スマートフォン（〜767px）
   ----------------------------------------
   基本は1カラム。8.5/8.6（タブレット）の指定を土台に、必要な箇所だけ上書きする。
   ======================================== */
@media (max-width: 767px) {

    /* --- ヘッダー：ロゴを小さくして1行に収める --- */
    .page-top,
    body {
        --header-h: 64px;
    }

    .header__brand {
        flex: 0 1 auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    .header__logo {
        gap: 10px;
    }

    .header__logo-mark {
        width: 42px;
    }

    .header__logo-type {
        width: 126px;
    }

    .header__tagline {
        margin-left: 10px;
        font-size: 9px;
        line-height: 1.5;
    }

    .header__toggle {
        margin-right: 8px;
    }

    /* --- FV：相談フォームは幅いっぱいで縦に折り返す --- */
    .top-fv__consult {
        width: 100%;
        margin-top: 32px;
    }

    .consult {
        flex-wrap: wrap;
        height: auto;
        gap: 10px;
        padding: 12px;
    }

    .consult__badge {
        flex: 0 0 auto;
    }

    .consult__submit {
        flex: 1 1 auto;
    }

    /* 並び順・幅は入力欄を包む .consult__field が持つ（入力欄はもう flex アイテムではない） */
    .consult__field {
        flex: 1 1 100%;
        order: 3;
        margin-left: 0;
    }

    .consult__tel {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        padding: 10px 12px 12px;
        gap: 4px 12px;
    }

    .consult__tel-num,
    .consult__tel-hours {
        margin-left: 0;
    }

    /* 常駐パーツは画面幅いっぱい */
    .floating-consult {
        left: 0;
        right: 0;
        width: 100%;
        transform: translateY(100%);
    }

    .floating-consult.is-visible {
        transform: translateY(38.5px);
    }

    .floating-consult.is-visible:focus-within {
        transform: translateY(0);
    }

    /* ベースの :hover は translate(-50%, 0)。擬似クラスのぶん詳細度が高く、
       画面幅いっぱいにしたこの指定を貫通して半分画面外へ飛び出す（実害）。
       hover 対応環境だけ、同じ幅のまま持ち上げる指定で上書きする */
    @media (hover: hover) {
        .floating-consult.is-visible:hover {
            transform: translateY(0);
        }
    }

    .floating-consult .consult-box {
        width: 100%;
        border-radius: calc(12 * var(--cu)) calc(12 * var(--cu)) 0 0;
    }

    /* --- CONCERN：吹き出しを縦に並べる --- */
    .top-concern__bubbles {
        flex-direction: column;
        gap: 56px;
        margin-top: 48px;
    }

    .bubble {
        flex: 0 0 auto;
    }

    .top-concern__columns {
        max-width: 85vw;
    }

    .top-concern__catch {
        font-size: 22px;
        padding-left: 36px;
    }

    .top-concern .quote-mark {
        width: 32px;
    }

    .top-concern__text {
        font-size: var(--text-base);
        line-height: 2;
    }

    /* --- SERVICE：01 も他のカードと同じ体裁で1カラム --- */
    .service-card:not(.service-card--lg),
    .service-cards .section-more {
        flex: 0 0 100%;
    }

    .service-cards .section-more {
        margin-top: 8px;
    }

    /* body を display: contents で解いて、番号＋見出し／写真／本文 の3段に組み替える */
    .service-card--lg {
        display: flex;
        flex-direction: row;   /* タブレット指定の column を戻す */
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        padding: 27px 20px 0;
    }

    .service-card--lg .service-card__body {
        display: contents;
    }

    .service-card--lg .service-card__num {
        flex: 0 0 auto;
        order: 1;
        margin-right: 24px;
        align-self: center;
        font-size: 42px;
        line-height: 1;
    }

    .service-card--lg .service-card__head {
        flex: 1 1 0;
        order: 2;
        height: 45px;
        margin-top: 0;
        gap: 16px;
    }

    .service-card--lg .service-card__icon {
        width: 50px;
    }

    .service-card--lg .service-card__title {
        font-size: 25px;
    }

    .service-card--lg .service-card__img {
        flex: 0 0 100%;
        order: 3;
        width: 100%;
        height: auto;
        margin-top: 19px;
    }

    .service-card--lg .service-card__img img {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 1;
        object-fit: cover;
    }

    .service-card--lg .service-card__text {
        flex: 0 0 100%;
        order: 4;
        margin-top: 11px;
        padding-bottom: 30px;
    }

    /* --- REASON：吹き出しと車を小さく --- */
    /* PC（434×302・font 40 / padding 52・40・58）の 0.7倍。縦横比をそのまま保つ */
    .top-reason__title {
        width: 304px;
        max-width: 100%;
        margin-inline: auto;
        font-size: 28px;
        padding: 36px 28px 40px;
    }

    .top-reason__title::after {
        left: 56px;
    }

    /* 車（デザイン座標 x-67〜464・中心198.5）を枠の中央に合わせる。
       translate の % は自身の幅に対する割合なので、幅が変わっても中央を保てる */
    .top-reason__vehicle {
        height: 270px;
        --veh-scale: .5;
        --veh-x: calc(50% - 198.5px * var(--veh-scale));
        --veh-y: -202px;
    }

    .reason__title {
        font-size: 22px;
    }

    /* --- COMPARE：見出し左右の斜線は幅が足りないため出さない --- */
    .top-compare__title {
        font-size: clamp(14px, 4.4vw, 17px);
    }

    .top-compare__title::before,
    .top-compare__title::after {
        height: 56px;
    }

    .top-compare__title::before {
        left: calc(50% - 150px);
    }

    .top-compare__title::after {
        right: calc(50% - 150px);
    }

    .compare__toggle-text {
        font-size: 17px;
    }

    /* --- NEWS：日付・カテゴリ・矢印を1行、タイトルは次の行へ --- */
    .news-list__link {
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    .news-list__date {
        font-size: 22px;
    }

    .news-list__arrow {
        margin-left: auto;
    }

    .news-list__title {
        flex: 1 1 100%;
        margin-left: 0;
    }

    /* --- FAQ --- */
    .faq__q {
        gap: 16px;
        padding: 18px 20px;
        min-height: 0;
    }

    .faq__a-inner {
        gap: 16px;
        margin-inline: 20px;
    }

    /* --- CONTACT --- */
    .top-contact__panel {
        padding: 34px 20px 24px;
        max-width: calc(100% - 32px);
    }

    .top-contact__tag {
        width: min(100%, 300px);
        font-size: var(--text-sm);
    }

    .top-contact__title {
        font-size: 22px;
    }

    .top-contact__area {
        padding: 32px 20px;
    }

    .top-contact__area-head {
        font-size: 17px;
    }

    /* --- FOOTER --- */
    .footer__recruit {
        width: 100%;
    }

    .footer__recruit-body {
        padding-inline: 20px;
    }

    .footer__recruit img {
        flex: 0 0 120px;
        width: 120px;
    }

    .footer__recruit-title {
        font-size: var(--text-lg);
    }

    .footer__copy {
        font-size: 26px;
    }

    .footer__catch {
        margin-top: 40px;
    }

    /* --- セクション共通：見出しと上下余白を詰める --- */
    .section-head__title {
        font-size: 26px;
    }

    .top-concern__title {
        font-size: 17px;
    }

    .top-service,
    .top-works,
    .top-instagram,
    .top-news,
    .top-faq {
        padding-inline: 0;
    }
}


/* ----------------------------------------
   8.10 レスポンシブ：スマホの個別調整（haru 指示 2026-07-30）
   ---------------------------------------- */

/* ① ドロワー：「ホーム」を出し、テキストを中央揃えにする（タブレット以下） */
@media (max-width: 1023px) {
    .header__item--mobile-only {
        display: block;
    }

    /* ベースの margin-left: auto が残っていると右寄せになるため打ち消す */
    .header__nav {
        width: 100%;
        margin-left: 0;
    }

    .header__list {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 767px) {

    /* ①-2 ドロワー：メニューの間隔を半分に（タブレット側の 28px → 14px・haru 指定 2026-08-27）
       タブレット（768〜1023px）は 28px のまま */
    .header__list {
        gap: 14px;
    }

    /* ② 相談フォーム：バッジと入力欄を1行に。「相談する」と「お電話」は省く */
    .consult {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px;
    }

    .consult__badge {
        flex: 0 0 auto;
        height: 30px;
        padding-inline: 10px;
        font-size: 12px;
    }

    .consult__field {
        flex: 1 1 auto;
        order: 0;
        margin-left: 0;
    }

    /* iOS Safari は font-size が 16px 未満の入力欄にフォーカスすると画面を拡大する
       （実機で操作しづらいと報告あり・2026-08-12）。拡大させないため入力欄は 16px にし、
       枠の見た目は変えたくないので、案内文（プレースホルダー）だけ元の 10px に落とす。
       viewport に maximum-scale を足す方法は、指で拡大できなくなるので採らない */
    .consult__input {
        height: 36px;
        font-size: 16px;
        /* 「相談する」を 16px にしたぶん入力欄が短くなるので、左右の余白を詰めて
           案内文が入る幅を確保する。狭い端末ほど詰め、タブレット幅では元の 14px に戻す
           （新しいブレイクポイントを増やさずに済ませる・2026-08-13） */
        padding-inline: clamp(8px, 2vw, 14px);
    }

    /* スマホは案内文を短くしている（main.js が data-placeholder-sp に差し替える）ので、
       そのぶん文字を大きくして読めるようにする（haru 指定 2026-08-13） */
    .consult__input::placeholder {
        font-size: 14px;
    }

    /* 伸縮しない（flex: 0 0 auto）ことで、バッジが消えた分は入力欄だけが受け取り、
       入力欄が「相談する」の左まで伸びる。
       文字は 16px（haru 指定 2026-08-13）。入力欄は flex: 1 1 auto なので、
       ボタンが広がったぶんだけ自動で短くなる */
    .consult__submit {
        flex: 0 0 auto;
        font-size: 16px;
        gap: 4px;
    }

    .consult__submit img {
        width: 10px;
    }

    /* 入力欄をタップしている間はバッジを隠し、入力欄を左へ伸ばす */
    .consult:has(.consult__input:focus) .consult__badge {
        display: none;
    }

    .consult__tel {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 10px 10px;
    }

    .consult__tel-label {
        display: none;
    }

    .consult__tel-num {
        font-size: 16px;
        gap: 6px;
    }

    .consult__tel-num img {
        width: 12px;
    }

    .consult__tel-hours {
        font-size: 10px;
        white-space: nowrap;
    }

    /* 常駐パーツは左右10pxの余白を空ける */
    .floating-consult .consult-box {
        width: auto;
        margin-inline: 10px;
    }

    /* ③ 施工事例：カード1枚が画面センターに来るよう、トラックを半ピッチ分ずらす
       （JS が transform を直接書き換えるため、位置合わせは left で行う） */
    /* カード1枚を画面センターに置き、左右に1枚ずつ端を覗かせる。
       中央にしたいカードの1つ前から並べ始めるため、1ピッチ分だけ左に出す */
    .works-carousel__track {
        margin-inline: 0;
        margin-left: calc((100% - var(--works-card)) / 2 - var(--works-card) - var(--works-gap));
    }

    /* 枚数が増えても画面内に収まるよう、バーは46pxを上限に縮める */
    .works-carousel__pager {
        margin-top: 20px;
        /* haru 指定 2026-08-27。PCの46pxは狭い画面では空きすぎる */
        padding-inline: 16px;
    }

    .works-carousel__pager li {
        flex: 1 1 0;
        max-width: 46px;
    }

    .works-carousel__pager button {
        width: 100%;
    }

    /* カードの見出し：狭い画面では17pxだと折り返しが増えるので落とす（haru 指定 2026-08-27） */
    .works-card__title {
        font-size: 16px;
    }

    /* ④ 理由：引用符が画面内に入るよう、見出しごと右へ寄せる */
    .top-reason__list .reason {
        padding-left: 47px;
    }

    /* 本文は右にずらさず元の位置のまま */
    .top-reason__list .reason__text {
        margin-left: -47px;
    }

    /* ⑤ 比較セクションのリードは左揃え */
    .top-compare__lead {
        text-align: left;
    }

    /* ⑦ 対応エリアの本文は両端揃え（日本語本文の基本・CODING_GUIDELINES 5.7） */
    .top-contact__area-text {
        font-size: var(--text-sm);
        text-align: justify;
    }

    /* 常駐パーツは常に電話番号まで見せる（上段だけに畳まない） */
    .floating-consult.is-visible {
        transform: translateY(0);
    }

    /* FV のイラストをさらに20%拡大（家の幅 70vw → 84vw） */
    .page-top {
        --fv-u: calc(84vw / 662);
    }

    /* 対応エリアの吹き出し（haru 指定 2026-08-27）。
       PC と同じ位置（木のあった 1138）だと画面の右端で切れるため、車の上へ寄せる */
    .top-fv__bubble {
        top: calc(455 * var(--fv-u) - var(--bubble-size) - 6px);
        left: calc(1060 * var(--fv-u) + 6px);
    }
}


/* 横スクロールのヒントは 820px 以下でのみ表示する（haru 指定） */
@media (max-width: 820px) {
    .compare__scroll-hint {
        display: flex;
    }
}


/* ========================================
   8.11 レスポンシブ：下層ページ／タブレット（〜1023px）
   ----------------------------------------
   8.1〜8.6 のベース指定より後に置く（CODING_GUIDELINES 5.4・5.8）。
   対象クラスはトップページ側（8.7〜8.10）と重ならないため、
   スマホ用の 8.9／8.10 より後ろに置いても打ち消し合わない。
   ======================================== */

@media (max-width: 1023px) {

    /* --- 共通 --- */
    .page-head {
        padding-block: 56px 48px;
    }

    .page-head__lead {
        font-size: var(--text-base);
    }

    .page-section {
        padding-block: 72px;
    }

    .page-section--tight {
        padding-block: 56px;
    }

    /* 3カラム → 2カラム（最後の1つは幅いっぱい） */
    .col3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .col3__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* --- ページ見出し：マーカー・車・文字を一段小さく --- */
    .page-head {
        padding-block: 64px 16px;
    }

    .page-head--simple {
        padding-block: 56px 48px;
    }

    .page-head--simple .page-head__lead {
        font-size: var(--text-base);
    }


    .page-head__eyebrow {
        font-size: 18px;
    }

    .page-head__title {
        --car-w: 88px;
        font-size: 44px;
    }

    .page-head__marker {
        height: 14px;
    }

    .page-head__rule {
        margin-top: 48px;
    }

    /* --- サービス：写真を上、テキストを下に積む --- */
    .service-detail+.service-detail {
        margin-top: 88px;
    }

    .service-detail__inner,
    .service-detail--alt .service-detail__inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .service-detail--alt .service-detail__media {
        order: 0;
    }

    /* right はベース（コンテナ右マージンの半分）の計算式をそのまま使うので上書きしない */
    .service-detail--alt::before {
        top: -40px;
        bottom: -40px;
        border-radius: 0 28px 28px 0;
    }

    .service-detail__num {
        font-size: 120px;
    }

    .service-detail__title {
        font-size: var(--text-2xl);
    }

    .service-detail__catch {
        margin-top: 28px;
        font-size: 22px;
    }

    .service-detail__case {
        padding: 24px 28px;
    }

    /* 3カラムが2カラムになるぶん、イラスト枠は少し低くする */
    .col3 {
        gap: var(--space-md);
    }

    /* --- 会社概要 --- */
    .company-message__panel {
        border-radius: 28px;
        padding-top: 64px;
    }

    .company-message__track img {
        width: 300px;
        height: 210px;
    }

    .company-message__body {
        padding: 44px 56px 0;
    }

    .company-access-head {
        margin-top: 44px;
    }

    .staff-grid {
        gap: var(--space-md);
    }

    .company-map iframe {
        height: 320px;
    }

    /* --- 施工事例 詳細：ギャラリーは2列 --- */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- 記事 --- */
    .article-head__title {
        font-size: var(--text-4xl);
    }

}


/* ========================================
   8.12 レスポンシブ：下層ページ／スマートフォン（〜767px）
   ======================================== */

@media (max-width: 767px) {

    /* --- 共通：本文系は PC より 1px 小さく（CODING_GUIDELINES 5.5） --- */
    .page-head {
        padding-block: 40px 36px;
    }

    .page-head__lead,
    .page-lead,
    .prose {
        font-size: 15px;
    }

    /* パンくずはスマホでさらに小さく（haru 指定 2026-08-15） */
    .breadcrumb__list {
        font-size: 10px;
    }

    .page-section {
        padding-block: 56px;
    }

    .page-section--tight {
        padding-block: 44px;
    }

    .col3,
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* 定義表：見出しセルを上に積む（横幅が足りずに潰れるため） */
    .spec-table th,
    .spec-table td {
        display: block;
        width: 100%;
        padding: 14px 18px;
    }

    .spec-table th {
        border-bottom: none;
    }

    /* --- ページ見出し --- */
    .page-head {
        padding-block: 44px 12px;
    }

    .page-head--simple {
        padding-block: 40px 36px;
    }


    .page-head__eyebrow {
        font-size: 15px;
        letter-spacing: .3em;
    }

    .page-head__title {
        --car-w: 66px;
        font-size: 32px;
    }

    .page-head__marker {
        height: 11px;
    }

    /* リードとパンくずは横に並べきれないので縦に積む */
    .page-head__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 18px;
    }

    .page-head__lead {
        font-size: 15px;
    }

    .page-head__rule {
        margin-top: 28px;
    }

    /* --- サービス --- */
    .service-detail+.service-detail {
        margin-top: 64px;
    }

    .service-detail--alt::before {
        border-radius: 0 20px 20px 0;
    }

    .service-detail__head {
        gap: 14px;
    }

    .service-detail__num {
        font-size: 78px;
    }

    .service-detail__icon {
        width: 40px;
    }

    .service-detail__title {
        font-size: var(--text-2xl);
    }

    .service-detail__catch {
        margin-top: 22px;
        font-size: var(--text-lg);
    }

    .service-detail__text {
        margin-top: 20px;
        font-size: 15px;
    }

    .service-detail__text+.service-detail__text {
        margin-top: 20px;
    }

    /* 工事メニューは2列に */
    .service-detail__menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 22px;
    }

    .service-detail__menu li {
        min-height: 48px;
        font-size: 13px;
    }

    /* 「こんなときに」は縦積み */
    .service-detail__case {
        flex-direction: column;
        gap: 8px;
        margin-top: 36px;
        padding: 22px 24px;
        font-size: 15px;
    }

    /* --- 会社概要 --- */
    .company-message {
        padding-block: 24px;
    }

    .company-message__panel {
        border-radius: 20px;
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .company-message__track img {
        width: 220px;
        height: 154px;
    }

    .company-message__body {
        padding: 32px 24px 0;
    }

    .company-message__body .prose {
        font-size: 15px;
    }

    .company-access-head {
        margin-top: 36px;
        font-size: var(--text-lg);
    }

    .company-map iframe {
        height: 260px;
    }

    /* --- スタッフカード（ベースと同じ縦積み。余白だけ詰める） --- */
    .staff-card {
        gap: 18px;
        padding: 24px;
    }

    .staff-card__text {
        text-align: justify;
    }


    /* --- 施工事例 詳細 --- */
    .ba-set,
    .gallery {
        grid-template-columns: 1fr;
    }

    .phase-head {
        margin-top: 44px;
    }

    /* --- 記事 --- */
    /* 施工事例・お知らせとも詳細ページのタイトル（haru 指定 2026-08-27） */
    .article-head__title {
        font-size: 22px;
    }

    .prose h2 {
        margin-top: 44px;
        padding-left: 16px;
    }

    .prose h3 {
        margin-top: 32px;
        font-size: var(--text-base);
    }

    /* --- フォーム --- */
    .form__submit {
        width: 100%;
    }

    .contact-tel__num {
        font-size: 28px;
    }

    /* --- ページネーション：折り返しても崩れないように --- */
    .pagination {
        flex-wrap: wrap;
    }

    /* --- 絞り込みチップ：横に3つ並ぶ幅にする（haru 指示 2026-08-12）---
       .filter の gap は 10px なので、2つぶんの隙間（20px）を引いて3等分する。
       5文字の「水回り工事」が入るよう、文字と左右の余白も詰める */
    .filter__chip {
        flex: 0 0 calc((100% - 20px) / 3);
        min-width: 0;
        height: 44px;
        padding-inline: 6px;
        font-size: 13px;
    }

    /* --- 前後の記事：一覧へ戻るを上段に大きく、前後を下段に置く --- */
    .post-nav {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "index index"
            "prev  next";
        gap: var(--space-sm);
    }

    .post-nav__link--prev {
        grid-area: prev;
        padding-left: 26px;
    }

    .post-nav__link--next {
        grid-area: next;
        padding-right: 26px;
    }

    .post-nav__index {
        grid-area: index;
        margin-bottom: 4px;
    }

    .post-nav__dir::before {
        width: 8px;
        height: 8px;
    }

    .post-nav__link--prev .post-nav__dir::before {
        left: -18px;
    }

    .post-nav__link--next .post-nav__dir::before {
        right: -18px;
    }
}


/* ========================================
   8.13 かんたん相談ナビ（FV・常駐フォームから開くウィザード）
   ----------------------------------------
   仕様の正本は Webディレクション/ の3点セット
   （相談ナビ_実装引き継ぎ書.md ／ サジェスト辞書リスト.md ／ 相談ナビ_設問リスト.md）。
   設問・辞書は HTML 側に置き、main.js は表示の制御だけを持つ（規約 6.1：
   メンテナンス担当者が JS を触らずに文言を直せるようにするため）
   ======================================== */

/* --- 検索窓の候補（サジェスト） --- */
/* 入力欄を包む .consult__field（position: relative）を基準に、必ずそのすぐ下へ出す。
   以前は画面座標から position: fixed で置いていたが、iOS でソフトキーボードが出ると
   レイアウトの座標と実際に見えている画面がずれ、入力欄にかぶさる・画面上部を基準に
   離れて出る、が起きた（実機で発生・2026-08-13）。入力欄と同じ流れに置けば起きない。
   見える高さ（3行ぶん）は main.js が max-height で指定する */
.consult-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    z-index: 95;
    overflow-y: auto;
    /* 指で払ったときに背後のページまで動かさない。
       候補が3行に収まっていてリスト自身がスクロールできないときの取りこぼしは
       main.js の touchmove が受け持つ */
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    /* 左右のパディングは各行に持たせる。行がリストの端まで広がり、
       端に近いところを押しても反応する（スマホ実機の指摘・2026-08-13） */
    padding: 8px 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-pop);
    text-align: left;
}

.consult-suggest[hidden] {
    display: none;
}

.consult-suggest__group {
    padding: 10px 20px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-text-muted);
}

.consult-suggest__item {
    display: block;
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.5;
}

.consult-suggest__item:hover,
.consult-suggest__item:focus-visible {
    background-color: var(--color-bg-beige);
}

.consult-suggest__empty {
    padding: 16px 20px;
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* --- ウィザード本体 --- */
.consult-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background-color: rgba(41, 40, 34, .55);
}

.consult-nav[hidden] {
    display: none;
}

.consult-nav__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-primary);
    overflow: hidden;
}

.consult-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 18px 22px;
    background-color: var(--color-ink);
    color: var(--color-surface);
}

.consult-nav__lead {
    font-size: var(--text-sm);
    font-weight: 700;
}

.consult-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.2 のターゲットサイズ（最小24px）を満たす */
    width: 40px;
    height: 40px;
    margin-right: -8px;
    border-radius: 50%;
    color: var(--color-surface);
    font-size: 22px;
    line-height: 1;
}

.consult-nav__close:hover {
    background-color: rgba(255, 255, 255, .14);
}

/* 進捗バー */
.consult-nav__progress {
    height: 4px;
    background-color: var(--color-line);
}

.consult-nav__bar {
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}

.consult-nav__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 28px 24px;
}

/* --- 各ステップ --- */
.consult-step[hidden] {
    display: none;
}

.consult-step__no {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--color-primary-dark);
}

.consult-step__q {
    margin-top: 8px;
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-sub);
}

.consult-step__sub {
    margin-top: 6px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* 選択肢。長いラベルが混ざる列は1列に落とす */
.consult-opts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.consult-opts--single {
    grid-template-columns: 1fr;
}

.consult-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 12px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.5;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.consult-opt:hover,
.consult-opt:focus-visible {
    border-color: var(--color-ink);
    background-color: var(--color-bg-beige);
}

.consult-opt.is-selected {
    border-color: var(--color-ink);
    background-color: var(--color-primary);
}

/* 入力欄まわり */
.consult-field+.consult-field {
    margin-top: 20px;
}

.consult-field__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    font-weight: 700;
}

.consult-nav textarea,
.consult-nav input[type="text"] {
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.6;
}

.consult-nav textarea {
    min-height: 130px;
    resize: vertical;
}

.consult-note {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-beige);
    font-size: 13px;
    line-height: 1.8;
}

/* 写真の追加 */
.consult-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    padding: 28px 20px;
    border: 2px dashed var(--color-line);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    text-align: center;
    font-weight: 700;
    cursor: pointer;
}

.consult-upload:hover {
    border-color: var(--color-ink);
}

.consult-upload__note {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.consult-upload input {
    /* ラベル全体を押せるようにするため、入力欄自体は隠す（フォーカスは残す） */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.consult-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.consult-thumbs img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.consult-error {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    color: #C0392B;
    /* エラー文言だけに使う赤。ブランドの赤（バッジ用）とは役割が違うので生値 */
}

.consult-error[hidden] {
    display: none;
}

/* --- 完了画面 --- */
.consult-done__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-inline: auto;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.consult-done__mark::before {
    content: "";
    width: 26px;
    height: 14px;
    margin-top: -6px;
    border-left: 4px solid var(--color-ink);
    border-bottom: 4px solid var(--color-ink);
    transform: rotate(-45deg);
}

.consult-done__title {
    margin-top: 20px;
    text-align: center;
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: var(--leading-sub);
}

.consult-done__text {
    margin-top: 10px;
    text-align: center;
    font-size: var(--text-sm);
    line-height: 1.9;
}

.consult-summary {
    margin-top: 22px;
    border-top: 1px solid var(--color-line);
}

.consult-summary__row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--color-line);
    font-size: 13px;
    line-height: 1.8;
}

.consult-summary__key {
    font-weight: 700;
    color: var(--color-text-muted);
}

/* --- 下部のボタン --- */
.consult-nav__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--color-line);
    background-color: var(--color-surface);
}

.consult-nav__foot[hidden] {
    display: none;
}

.consult-nav__back {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
}

.consult-nav__back:hover {
    background-color: var(--color-bg-beige);
}

.consult-nav__back[hidden],
.consult-nav__skip[hidden],
.consult-nav__next[hidden] {
    display: none;
}

.consult-nav__skip {
    margin-left: auto;
    padding: 12px 18px;
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: underline;
    color: var(--color-text-muted);
}

.consult-nav__next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 180px;
    min-height: 52px;
    margin-left: auto;
    padding-inline: 22px;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    font-size: var(--text-base);
    font-weight: 700;
}

/* スキップと次へが並ぶときは、次へ側の auto マージンを外す */
.consult-nav__skip:not([hidden])~.consult-nav__next {
    margin-left: 0;
}

.consult-nav__next:disabled {
    border-color: var(--color-line);
    background-color: var(--color-line);
    color: var(--color-text-muted);
    cursor: not-allowed;
}


/* --- スマホ：下部のボタンを1行に収める ---
   「次へ」が広いままだと「戻る」「スキップ」が潰れて2行になるため、
   次へ側を狭めて3つを横一列に並べる（ベース指定より後ろに置くこと・規約5.8） */
@media (max-width: 767px) {
    .consult-nav {
        padding: var(--space-sm);
    }

    .consult-nav__body {
        padding: 22px 18px;
    }

    .consult-nav__foot {
        gap: 6px;
        padding: 14px 16px;
    }

    .consult-nav__back,
    .consult-nav__skip {
        flex: 0 0 auto;
        padding: 10px 8px;
        font-size: 13px;
        white-space: nowrap;
    }

    .consult-nav__next {
        /* 文言に合わせて縮んでよい。最後の設問だけ「この内容で相談する」と長くなる */
        min-width: 0;
        min-height: 48px;
        padding-inline: 14px;
        font-size: var(--text-sm);
    }

    .consult-step__q {
        font-size: var(--text-lg);
    }

    .consult-opt {
        min-height: 54px;
        padding: 10px 12px;
        font-size: 13px;
    }
}


/* ========================================
   9. Animations & Keyframes
   ======================================== */

/* 会社概要：ごあいさつの写真帯が右から左へ流れ続ける。
   同じ並びを2組つないであるので、1組ぶん（＝全体の半分）動かすと継ぎ目なくループする */
@keyframes company-strip-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* 施工事例ポップ：左から車が入ってきて所定の位置に止まる */
@keyframes works-pop-car-in {
    from {
        opacity: 0;
        transform: translateX(-90px);
    }

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

/* 施工事例ポップ：車が止まったあと、吹き出しが下から浮かび上がる */
/* ボヨヨンと飛び出す（haru 指定 2026-08-26）。
   動き幅は小さめ＝拡大は 1.08 倍までにとどめ、少し戻してから収める */
@keyframes fv-bubble-in {
    0% {
        opacity: 0;
        transform: translate(-50%, 4px) scale(.75);
    }

    55% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1.08);
    }

    78% {
        transform: translate(-50%, 0) scale(.96);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes works-pop-bubble-in {
    from {
        opacity: 0;
        transform: translate(-50%, 14px) scale(.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* 下層ページ見出し：黄色のマーカーが左から右へ伸びる */
@keyframes head-marker-grow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* 下層ページ見出し：車がマーカーを先導して右へ走る。
   マーカーの右端は 0→374px、車の右端は 105→354px と進むので、
   途中は車が先行し、止まったときにカンプの位置（マーカー右端の20px内側）に収まる */
@keyframes head-car-run {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

/* 下層ページ見出し：文字が窓の下からせり上がる */
@keyframes head-text-rise {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* FV：黄色のマーカーが左から右へ伸びる */
@keyframes fv-marker-grow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* FV：筆文字が窓の下から生えてくる（フェードではなく押し上げ） */
@keyframes fv-brush-rise {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* REASON：道具が車の中心から放射状に飛び出す。
   定位置を少し行き過ぎてから戻る（オーバーシュート）ことで勢いを出している。
   --from-x / --from-y は「定位置 → 車の中心」のベクトルなので、
   マイナスを掛けると定位置よりさらに外側、プラスだと車寄りに戻る */
@keyframes tool-burst {
    0% {
        opacity: 0;
        transform: translate(var(--from-x), var(--from-y)) scale(.15);
    }

    20% {
        opacity: 1;
    }

    56% {
        opacity: 1;
        transform: translate(calc(var(--from-x) * -.14), calc(var(--from-y) * -.14)) scale(1.2);
    }

    78% {
        transform: translate(calc(var(--from-x) * .05), calc(var(--from-y) * .05)) scale(.95);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* 横スクロールのヒント矢印を小さく揺らす */
@keyframes scroll-hint-nudge {
    0%, 100% { margin-left: 0; }
    50%      { margin-left: 5px; }
}

/* スクロールで現れる要素の共通アニメーション（少し下からフェードイン） */
@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* WORKS：透かしロゴタイプを右から左へ流す（1枚分＝図版+間隔だけ動かして途切れさせない） */
@keyframes watermark-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* FV：イラストが少し下からフェードインする */
@keyframes fv-illust-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 「動きを減らす」設定では、いずれも最終状態を即表示する */
@media (prefers-reduced-motion: reduce) {

    .top-fv__brush::after,
    .top-fv__brush img,
    .top-fv__illust--faucet,
    .top-fv__illust--roller,
    .top-fv__illust--hammer,
    .top-fv__illust--drill,
    .top-fv__illust--van,
    .top-works__watermark,
    .compare__scroll-hint::after {
        animation: none;
    }

    .compare__body,
    .faq__a {
        transition: none;
    }

    .top-concern__bubbles .bubble,
    .top-reason__list .reason,
    .top-compare__title,
    .top-reason__tool {
        opacity: 1;
        transform: none;
    }

    /* 上で最初から見えるようにしていても、IO が .is-revealed を付けた時点で
       出現アニメーションが走り、いったん消えてから再フェードしてしまう。
       「動きを減らす」設定でいちばん動いて見える状態になるため、
       .is-revealed 側のアニメーションも止める（優先度：高） */
    .top-concern__bubbles.is-revealed .bubble,
    .top-reason__list .reason.is-revealed,
    .top-compare__title.is-revealed,
    .top-reason__van.is-revealed~.top-reason__tool,
    .works-pop.is-revealed .works-pop__car,
    .works-pop.is-revealed .works-pop__bubble {
        animation: none;
    }

    /* 施工事例ポップは出現アニメーションを止めるぶん、最初から見えるようにする */
    .works-pop__car,
    .works-pop__bubble {
        opacity: 1;
    }
}