/* ==========================================================================
   あまや製材 - 詳細ページ専用共通スタイルシート (m_style.css)
   ※top_style.css の配色・ヘッダー・フッター・メニューデザインを完全継承します。
   ========================================================================== */

@import url("top_style.css");

/* --------------------------------------------------------------------------
   1. パンくずリスト (Breadcrumbs) - Googlebotのクロール最適化
   -------------------------------------------------------------------------- */
.breadcrumb-container,
.breadcrumb-nav {
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
}

.breadcrumb,
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.breadcrumb li,
.breadcrumb-item {
    display: flex;
    align-items: center;
    list-style: none;
}

.breadcrumb li+li::before,
.breadcrumb-item+.breadcrumb-item::before {
    content: "➔";
    margin: 0 10px;
    font-size: 11px;
    color: var(--silver-color);
}

.breadcrumb a,
.breadcrumb-list a {
    color: var(--accent-color);
    font-weight: 700;
}

.breadcrumb a:hover,
.breadcrumb-list a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.breadcrumb li:last-child,
.breadcrumb-item:last-child {
    color: var(--text-color);
    font-weight: 600;
    pointer-events: none; /* 現在地はクリック不可 */
}

/* --------------------------------------------------------------------------
   2. 詳細ページ基本レイアウト
   -------------------------------------------------------------------------- */
.detail-main {
    padding: 60px 0 80px;
    background-color: var(--bg-light);
}

.detail-page-title {
    margin-bottom: 40px;
    text-align: center;
}

.detail-intro-text {
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: justify;
}

/* --------------------------------------------------------------------------
   3. すまいコラム (housing-column_index.html) 専用スタイル
   -------------------------------------------------------------------------- */
.column-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.column-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.column-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.column-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
}

.column-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.column-card-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.column-card-category {
    background-color: rgba(74, 144, 226, 0.08);
    color: var(--accent-hover);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
}

.column-card-new {
    background-color: #ff0000;
    color: var(--bg-white);
    font-size: 9px;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.column-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
    margin-bottom: 12px;
    flex-grow: 0;
}

.column-card-excerpt {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. 推奨仕様 (recommended-specifications.html) 専用スタイル
   -------------------------------------------------------------------------- */
.spec-section {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 40px 30px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-sm);
}

.spec-section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 15px;
}

.spec-section-header h2 {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-color);
}

.spec-section-header img {
    height: 40px;
    width: auto;
}

.spec-section-desc {
    font-size: 14.5px;
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 25px;
}

/* --------------------------------------------------------------------------
   仕様表（.spec-table）
   --------------------------------------------------------------------------
   以前は列幅を内容まかせにしていたため、画面が広いと真ん中の「この住まいの仕様」
   だけが間延びし、右の「補足」が狭いまま2行に折り返して不格好だった
   （社長ご指摘 2026-09-05）。スマホでは横スクロールが必要で読みにくかった。

   ・PC / タブレット … table-layout: fixed で 3列の比率を固定する
     （項目 18% ／ 仕様 42% ／ 補足 40%）。真ん中だけが伸びることがなくなる。
     さらに表そのものを 980px に収めて中央に置き、余白が広がりすぎないようにする
   ・スマホ・タブレット（900px以下）… 表をやめて **1行＝1枚のカード** に積み替える。
     横スクロールが要らなくなり、文字も小さくしなくて済む
   -------------------------------------------------------------------------- */
.spec-table-container {
    width: 100%;
    /* 1200pxいっぱいに広げると、真ん中に空白ばかりができて読みにくい。
       文字が追いやすい幅に収めて中央に置く（社長ご指摘 2026-09-05）。 */
    max-width: 980px;
    margin: 0 auto 15px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    background-color: var(--bg-white);
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed;      /* 列幅を内容まかせにしない */
}

.spec-table th {
    background-color: var(--primary-color);
    color: var(--bg-white);
    font-weight: 700;
    font-size: 13.5px;
    padding: 14px 20px;
    letter-spacing: 0.5px;
    text-wrap: balance;
}

.spec-table td {
    padding: 16px 20px;
    font-size: 13.5px;
    line-height: 1.75;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    vertical-align: top;
}

.spec-table tr:last-child td {
    border-bottom: none;
}

.spec-table tbody tr:nth-child(even) {
    background-color: var(--bg-light);
}

/* 3列の比率。th と td の両方に効かせる */
.spec-table th:nth-child(1),
.spec-table td:nth-child(1) { width: 18%; }
.spec-table th:nth-child(2),
.spec-table td:nth-child(2) { width: 42%; }
.spec-table th:nth-child(3),
.spec-table td:nth-child(3) { width: 40%; }

.spec-table-label {
    font-weight: 800;
    color: var(--primary-color);
    background-color: rgba(11, 52, 113, .03);
    border-right: 1px solid var(--border-color);
}

.spec-table-point {
    font-weight: 500;
}

.spec-table-point b {
    color: var(--primary-color);
    font-weight: 800;
}

.spec-table-detail {
    color: var(--text-muted);
    /* 「補足の項目が小さくて2行になっていて不格好」（社長）。本文と差をつけつつ、
       小さくしすぎない大きさにする。 */
    font-size: 13px;
    line-height: 1.75;
}

/* --- スマホ・タブレット：表をやめて1行＝1枚のカードにする ---
   900px を境にしているのは、これより狭いと3列では「補足」が2行に折り返して
   読みにくくなるため（769px で実際に折り返していた）。 */
@media (max-width: 900px) {
    .spec-table-container {
        overflow-x: visible;      /* 横スクロールをやめる */
        border: 0;
        box-shadow: none;
        background: none;
        border-radius: 0;
    }

    .spec-table,
    .spec-table tbody,
    .spec-table tr,
    .spec-table td {
        display: block;
        width: auto;
    }

    /* PC用の列比率（.spec-table td:nth-child(n)）の方が指定が強いので、明示的に打ち消す。
       打ち消さないと、カードの中で3つのセルが 15%/45%/40% の幅に潰れてしまう。 */
    .spec-table th:nth-child(1),
    .spec-table td:nth-child(1),
    .spec-table th:nth-child(2),
    .spec-table td:nth-child(2),
    .spec-table th:nth-child(3),
    .spec-table td:nth-child(3) {
        width: auto;
    }

    .spec-table thead {
        display: none;            /* 見出し行はカードでは不要 */
    }

    .spec-table tbody tr {
        margin-bottom: 10px;
        padding: 14px 16px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background-color: var(--bg-white);
        box-shadow: var(--shadow-sm);
    }

    .spec-table tbody tr:nth-child(even) {
        background-color: var(--bg-white);
    }

    .spec-table td {
        padding: 0;
        border-bottom: 0;
        font-size: 13.5px;
    }

    .spec-table-label {
        margin-bottom: 4px;
        font-size: 11.5px;
        letter-spacing: .04em;
        background: none;
        border-right: 0;
    }

    .spec-table-point {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .spec-table-detail {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px dashed var(--border-color);
        font-size: 12px;
    }

    /* 補足が空の行では、区切り線だけが残らないようにする */
    .spec-table-detail:empty {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   5. 事例一覧 (新築・リフォーム) 共通スタイル
   -------------------------------------------------------------------------- */
.works-list-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 事例切り替えトグルタブ */
.works-toggle-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.tab-btn {
    flex: 1;
    max-width: 280px;
    text-align: center;
    padding: 14px 20px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 15px;
    transition: var(--transition-smooth);
    border: 2px solid var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tab-btn.active {
    background-color: var(--primary-color);
    color: var(--bg-white) !important;
    box-shadow: var(--shadow-sm);
}

.tab-btn:not(.active) {
    background-color: var(--bg-white);
    color: var(--primary-color);
}

.tab-btn:not(.active):hover {
    background-color: rgba(11, 52, 113, 0.05);
    transform: translateY(-2px);
}

/* 事例カードグリッド */
.works-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.works-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.works-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* 新築カードホバー時はアイスブルー、リフォーム時はシルバーのボーダー */
.works-card.new-construct-card:hover {
    border-color: var(--accent-color);
}

.works-card.reform-card:hover {
    border-color: var(--silver-color);
}

.works-card-img-wrap {
    /* 施工事例の写真は 3:2 が主。枠を合わせて切り抜きを最小化する */
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
}

.works-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.works-card:hover .works-card-img-wrap img {
    transform: scale(1.05);
}

/* バッジ */
.works-card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    /* ホバー時に写真へ transform を掛けると重ね順が変わり、
       z-index が無いとバッジが写真の下に隠れてしまうため明示する */
    z-index: 2;
    /* 種別クラス（new-construct-card / reform-card）が付いていない場合でも
       文字が読めるよう、既定の背景色を持たせておく */
    background-color: var(--primary-color);
    color: var(--bg-white);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* 新築事例はブルー、リフォーム事例はシルバー */
.new-construct-card .works-card-badge {
    background-color: var(--accent-color);
}

.reform-card .works-card-badge {
    background-color: var(--secondary-color);
}

.works-card-new-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    background-color: #ff0000;
    color: var(--bg-white);
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    letter-spacing: 0.5px;
}

/* この家の動画を見るバッジ（写真右下・works-card / wa-card 共通） */
.works-card-video-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(11, 52, 113, .92);
    color: var(--bg-white);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    white-space: nowrap;
}

.works-card-video-badge:hover {
    background-color: var(--accent-hover);
}

.works-card-info {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.works-card-vol {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 8px;
}

.works-card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
    margin-bottom: 12px;
}

.works-card-point {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--secondary-color);
    margin-bottom: 6px;
}

.works-card-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.works-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: auto;
}

.works-card-btn {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent-color);
    transition: var(--transition-smooth);
}

.new-construct-card:hover .works-card-btn {
    color: var(--primary-color);
}

.reform-card:hover .works-card-btn {
    color: var(--secondary-color);
}

/* --------------------------------------------------------------------------
   6. お客様のご感想 (customer-feedback_index.html) 専用スタイル
   -------------------------------------------------------------------------- */
.feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.feedback-banner-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.feedback-banner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.feedback-banner-card img {
    width: 100%;
    height: auto;
    display: block;
}

.feedback-interview-section {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.feedback-interview-section h2 {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 25px;
    border-left: 4px solid var(--accent-color);
    padding-left: 15px;
}

.interview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.interview-card {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.interview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
    background-color: var(--bg-white);
}

/* インタビューのサムネイルは文字が焼き込まれたバナー画像。
   object-fit: cover で高さを固定すると左右が切り取られ、タイトルが見切れる。
   画像全体が必ず見えるように、縦横比のまま表示する。 */
.interview-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 620 / 201;
    object-fit: contain;
}

.interview-info {
    padding: 15px;
}

.interview-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.interview-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   7. レスポンシブメディアクエリ
   -------------------------------------------------------------------------- */

/* タブレット (1024px以下) */
@media (max-width: 1024px) {
    .column-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .interview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマホ (768px以下) */
@media (max-width: 768px) {
    .detail-main {
        padding: 40px 0 60px;
    }
    .detail-intro-text {
        font-size: 14px;
        margin-bottom: 30px;
    }
    .column-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .spec-section {
        padding: 25px 15px;
    }
    .spec-section-header h2 {
        font-size: 18px;
    }
    .works-toggle-tabs {
        gap: 10px;
    }
    .tab-btn {
        padding: 10px 14px;
        font-size: 13.5px;
    }
    .works-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .works-card-info {
        padding: 20px;
    }
    .works-card-title {
        font-size: 16px;
    }
    .feedback-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .feedback-interview-section {
        padding: 25px 15px;
    }
    .interview-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==========================================================================
   8. スムーズスクロール & アンカー補正
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

.spec-section {
    scroll-margin-top: 140px; /* 固定ヘッダーに被らないように調整 */
}

/* ==========================================================================
   9. 推奨仕様 CEP（カテゴリーエントリーポイント）クイックメニュー
   ========================================================================== */
.spec-cep-container {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-sm);
}

.cep-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 8px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.cep-grid-primary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.cep-grid-secondary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.cep-btn {
    display: flex;
    text-decoration: none;
    transition: var(--transition-smooth);
    border: 2px solid transparent;
}

.cep-btn-primary {
    background-color: rgba(74, 144, 226, 0.05);
    border-color: rgba(74, 144, 226, 0.2);
    padding: 16px 15px;
    border-radius: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cep-btn-primary:hover {
    background-color: var(--bg-white);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.cep-btn-primary .cep-icon-wrap {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cep-btn-primary .cep-icon-wrap img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.cep-btn-primary .cep-label {
    font-size: 15px;
    font-weight: 900;
    color: var(--primary-color);
}

.cep-btn-primary .cep-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 600;
}

.cep-btn-secondary {
    background-color: var(--bg-light);
    border-color: var(--border-color);
    padding: 10px 5px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cep-btn-secondary:hover {
    background-color: var(--bg-white);
    border-color: var(--silver-color);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.cep-btn-secondary .cep-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-color);
}

@media (max-width: 1024px) {
    .cep-grid-secondary {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .spec-cep-container {
        padding: 20px 15px;
    }
    .cep-grid-primary {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cep-grid-secondary {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .cep-btn-primary {
        padding: 12px 15px;
        flex-direction: row;
        gap: 15px;
        justify-content: flex-start;
        text-align: left;
    }
    .cep-btn-primary .cep-icon-wrap {
        width: 36px;
        height: 36px;
        margin-bottom: 0;
    }
    .cep-btn-primary .cep-label {
        font-size: 14px;
    }
    .cep-btn-primary .cep-desc {
        margin-top: 1px;
    }
    .cep-btn-secondary .cep-label {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   10. 推奨仕様 スペックメニューに戻るボタン
   ========================================================================== */
.spec-back-to-menu {
    text-align: right;
    margin-top: 25px;
    margin-bottom: 10px;
}

.back-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    background-color: var(--bg-light);
    border: 1px solid rgba(11, 52, 113, 0.15);
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.back-menu-btn:hover {
    background-color: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .spec-back-to-menu {
        text-align: center;
        margin-top: 20px;
    }
    .back-menu-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
        font-size: 13px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   11. テーブルの横スクロール案内ガイド
   ========================================================================== */
.table-scroll-guide {
    display: none;
}

@media (max-width: 768px) {
    /* 仕様表はスマホでカードに積み替えるので、横スクロールの案内は出さない */
    .table-scroll-guide {
        display: none !important;
        align-items: center;
        gap: 6px;
        font-size: 10.5px;
        font-weight: 700;
        color: var(--accent-color);
        background-color: rgba(74, 144, 226, 0.08);
        padding: 4px 10px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
}

/* ==========================================================================
   12. 2026改善実装：新築成果向上コンポーネント
   ========================================================================== */

/* 新築事例スペック表示 */
.works-card-meta-spec span {
    background-color: var(--bg-light);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* 新築へのブリッジスロット */
.works-bridge-slot {
    transition: var(--transition-smooth);
}
.works-bridge-slot:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* コラムピックアップエリアのプレミアムデザイン */
.column-pickup-section {
    margin-bottom: 50px;
    padding: 35px 30px;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.05) 0%, rgba(11, 52, 113, 0.02) 100%);
    border-radius: 16px;
    border: 1px solid rgba(74, 144, 226, 0.15);
    box-shadow: 0 10px 30px rgba(11, 52, 113, 0.03);
    position: relative;
    overflow: hidden;
}

/* 装飾的な光の演出 */
.column-pickup-section::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.08) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.pickup-header {
    position: relative;
    z-index: 2;
    margin-bottom: 25px;
}

.pickup-section-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: var(--accent-color);
    background: rgba(74, 144, 226, 0.08);
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.pickup-section-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.pickup-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pickup-card {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(11, 52, 113, 0.03);
    border: 1px solid rgba(11, 52, 113, 0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pickup-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    text-decoration: none !important;
    color: inherit !important;
}

/* カード上部のグラデーションバー */
.pickup-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: height 0.3s ease;
}

.pickup-card.card-subsidy::before {
    background: linear-gradient(90deg, #dd6b20, #f6ad55);
}
.pickup-card.card-snow::before {
    background: linear-gradient(90deg, #3182ce, #63b3ed);
}
.pickup-card.card-insulation::before {
    background: linear-gradient(90deg, #e53e3e, #fc8181);
}

/* ホバーアニメーション */
.pickup-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(11, 52, 113, 0.08);
    border-color: rgba(74, 144, 226, 0.25);
}

.pickup-card:hover::before {
    height: 6px;
}

.pickup-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pickup-tag {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tag-subsidy {
    background-color: rgba(221, 107, 32, 0.06);
    color: #dd6b20;
}
.tag-snow {
    background-color: rgba(49, 130, 206, 0.06);
    color: #3182ce;
}
.tag-insulation {
    background-color: rgba(229, 62, 62, 0.06);
    color: #e53e3e;
}

.pickup-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.45;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.pickup-card:hover .pickup-title {
    color: var(--accent-hover);
}

.pickup-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.pickup-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pickup-more {
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.pickup-more .arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.pickup-card:hover .pickup-more {
    color: var(--primary-color);
}

.pickup-card:hover .pickup-more .arrow {
    transform: translateX(5px);
}


/* レスポンシブ調整 */
@media (max-width: 768px) {
    .works-bridge-slot {
        padding: 20px 15px !important;
    }
    .works-bridge-slot h2 {
        font-size: 1.15rem !important;
    }
    .works-bridge-slot .tab-btn {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* コラムピックアップ レスポンシブ */
    .column-pickup-section {
        padding: 25px 20px;
        margin-bottom: 35px;
    }
    .pickup-section-title {
        font-size: 1.15rem;
    }
    .pickup-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pickup-card-link {
        padding: 20px;
    }
    .pickup-title {
        font-size: 1rem;
    }
}


/* ==========================================================================
   2026.09 追加：HTML内に直書きされていたCSSを外部化したもの
   （改修ルール7「CSSコードをHTML内に記述しない」への対応）
   ========================================================================== */

/* 本文末尾の共通お問い合わせ導線 */
.page-contact-cta {
    display: block;
    margin-top: 50px;
    padding: 32px 24px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}

.page-contact-cta-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.page-contact-cta-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.page-contact-cta-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    max-width: 460px;
    margin: 0 auto;
}

.page-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: var(--transition-smooth);
    border: 2px solid var(--primary-color);
}

.page-cta-tel {
    background-color: var(--primary-color);
    color: var(--bg-white);
}

/* LINEは一番おすすめの窓口として、横幅いっぱい・一段大きく・常に先頭に表示する */
.page-cta-line {
    grid-column: 1 / -1;
    order: -1;
    background-color: #06c755;
    border-color: #06c755;
    color: var(--bg-white);
    min-height: 56px;
    font-size: 16px;
}

.page-cta-mail {
    background-color: transparent;
    color: var(--primary-color);
}

.page-cta-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .page-contact-cta-actions {
        grid-template-columns: 1fr;
    }
}

.page-contact-cta-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

/* セクション末尾の中央寄せ導線（.section-cta は top_style.css に定義） */
.btn-outline-pill {
    display: inline-block;
    padding: 14px 30px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 800;
    border-radius: 50px;
    transition: var(--transition-smooth);
}

.btn-outline-pill:hover {
    background-color: var(--primary-color);
    color: var(--bg-white);
}

/* 施工事例カードのスペック行（estate_index / renovation_index） */
.works-card-meta-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    margin: 8px 0;
    color: var(--text-muted);
}

/* リフォーム＆メンテナンス：本文幅と新築へのブリッジ */
.container--narrow {
    max-width: 800px;
}

.works-bridge-slot {
    margin-top: 40px;
    padding: 30px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}

.works-bridge-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.works-bridge-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.works-bridge-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-pill-primary,
.btn-pill-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: 2px solid var(--primary-color);
    transition: var(--transition-smooth);
}

.btn-pill-primary {
    background-color: var(--primary-color);
    color: var(--bg-white);
}

.btn-pill-outline {
    background-color: transparent;
    color: var(--primary-color);
}

.btn-pill-primary:hover,
.btn-pill-outline:hover {
    opacity: .85;
    transform: translateY(-2px);
}

/* お客様のご感想：ピックアップ（トップページと同じ .feedback-top-review-card 系を流用。
   顔写真は存在しないため引用符と新築／リフォームの色分けバッジで代替。5-36章参照） */
.feedback-top-reviews {
    margin-bottom: 40px;
}

.feedback-top-reviews-head {
    margin-bottom: 4px;
}

.feedback-top-reviews-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.feedback-interview-section {
    margin-top: 50px;
}

/* 推奨仕様：CEPメニュー2段目の見出し */
.cep-section-title--spaced {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 推奨仕様ページ：施工写真ギャラリー（旧ページから復活） */
.spec-photo-gallery {
    margin-top: 50px;
}

.spec-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.spec-photo-grid img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: block;
}

/* リフォーム＆メンテナンス：バナー下の説明ブロック
   （訴求文言が画像内にしか無く、AI検索が要約できなかったための追加） */
.feedback-banner-card.hub-card {
    display: flex;
    flex-direction: column;
}

.hub-card-body {
    padding: 24px 22px 26px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.hub-card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.hub-card-lead {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--accent-hover);
    margin-bottom: 14px;
}

.hub-card-text {
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.hub-card-points {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.hub-card-points li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text-color);
}

.hub-card-points li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--accent-color);
}

.hub-card-note {
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-muted);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.hub-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: auto;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 50px;
    background-color: var(--primary-color);
    color: var(--bg-white);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.hub-card-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .hub-card-body {
        padding: 20px 16px 22px;
    }
    .hub-card-btn {
        align-self: stretch;
    }
}

/* ==========================================================================
   お問い合わせページ（contact.html）
   ========================================================================== */

/* --- リード文（本文幅が広いので行長だけ制限する） --- */
.contact-intro {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 3つの窓口 --- */
.contact-ways {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0 50px;
}

.contact-way {
    min-width: 0;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 26px 22px 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.contact-way:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.contact-way-line {
    border-top-color: #06c755;
}

.contact-way-mail {
    border-top-color: var(--accent-color);
}

.contact-way-badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-hover);
    background-color: rgba(74, 144, 226, .1);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.contact-way-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.contact-way-text {
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.contact-tel-number {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: .01em;
    color: var(--primary-color);
    text-decoration: none;
    margin-top: auto;
}

.contact-tel-number:hover {
    color: var(--accent-hover);
}

.contact-way-note {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 8px;
}

.contact-way-sub {
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

.contact-way-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: auto;
    padding: 12px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    /* 「相／談」のような語中改行を防ぐ */
    word-break: keep-all;
    overflow-wrap: break-word;
    transition: var(--transition-smooth);
}

.contact-btn-line {
    background-color: #06c755;
    color: var(--bg-white);
}

.contact-way-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
}

.contact-mail-address {
    margin-top: auto;
    font-size: 15px;
    font-weight: 800;
    word-break: break-all;
}

.contact-mail-address a {
    color: var(--primary-color);
}

.mail-copy-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-hover);
    background-color: rgba(74, 144, 226, .08);
    border: 1px solid rgba(74, 144, 226, .35);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.mail-copy-btn:hover {
    background-color: rgba(74, 144, 226, .18);
}

.mail-copy-btn.is-copied {
    color: var(--bg-white);
    background-color: #06c755;
    border-color: #06c755;
}

.visually-hidden-input {
    position: absolute;
    left: -9999px;
    top: 0;
    opacity: 0;
}

/* --- 用件別メール文例 --- */
.mail-template {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px 26px 34px;
    margin-bottom: 50px;
}

.mail-template-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.mail-template-desc {
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.mail-template-fallback {
    margin-top: 20px;
    padding: 12px 16px;
    background-color: var(--bg-light);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-muted);
}

.mail-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.mail-topic {
    cursor: pointer;
}

.mail-topic input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.mail-topic-label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--bg-white);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.mail-topic:hover .mail-topic-label {
    border-color: var(--accent-color);
    color: var(--primary-color);
}

.mail-topic input:checked + .mail-topic-label {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-white);
}

.mail-topic input:focus-visible + .mail-topic-label {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.mail-panel {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px 20px 24px;
}

.mail-panel-subject {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.mail-panel-body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-muted);
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0 0 20px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.mail-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mail-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    border: 2px solid var(--primary-color);
    transition: var(--transition-smooth);
}

.mail-action-primary {
    background-color: var(--primary-color);
    color: var(--bg-white);
}

.mail-action-secondary {
    background-color: var(--bg-white);
    color: var(--primary-color);
}

.mail-action-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
}

/* --- アクセス --- */
.contact-access {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px 26px;
    margin-bottom: 50px;
    box-shadow: var(--shadow-sm);
}

.contact-access-title,
.contact-faq-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.contact-access-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 26px;
    align-items: start;
}

.contact-company-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.contact-company-address {
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.contact-company-note {
    font-size: 12px;
    color: var(--silver-color);
}

.contact-access-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: 10px;
}

/* --- よくあるご質問 --- */
.contact-faq {
    margin-bottom: 20px;
}

.faq-item {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 12px;
}

.faq-q {
    position: relative;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
    padding-left: 26px;
    margin-bottom: 8px;
}

.faq-q::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--accent-color);
}

.faq-a {
    position: relative;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-muted);
    padding-left: 26px;
}

.faq-a::before {
    content: "A";
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--silver-color);
}

.wa-grid.is-large .wa-title {
    font-size: 17px;
}

.wa-grid.is-large .wa-body {
    padding: 20px 20px 22px;
}

/* --- タブレット --- */
@media (max-width: 1024px) {
    .contact-ways {
        grid-template-columns: 1fr;
    }
    .contact-way {
        padding: 24px 20px 26px;
    }
    .contact-tel-number,
    .contact-way-btn,
    .contact-mail-address {
        margin-top: 16px;
    }
}

/* --- スマホ --- */
@media (max-width: 768px) {
    .contact-ways {
        gap: 16px;
        margin: 30px 0 40px;
    }
    .contact-tel-number {
        font-size: 27px;
    }
    .mail-template {
        padding: 24px 16px 26px;
    }
    .mail-topics {
        gap: 8px;
    }
    .mail-topic-label {
        padding: 10px 16px;
        font-size: 13px;
    }
    .mail-panel {
        padding: 18px 14px 20px;
    }
    .mail-panel-body {
        font-size: 12.5px;
        padding: 14px 14px;
    }
    .mail-action-btn {
        width: 100%;
    }
    .contact-access {
        padding: 24px 16px;
    }
    .contact-access-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contact-access-map iframe {
        height: 240px;
    }
}

/* 短いラベルの語中改行を防ぐ（詳細ページ側） */
.works-card-vol,
.works-card-badge,
.works-card-btn,
.column-card-category,
.column-card-date,
.cep-label,
.contact-way-badge,
.mail-topic-label,
.hub-card-btn,
.page-cta-btn,
.mail-action-btn,
.btn-pill-primary,
.btn-pill-outline,
.btn-outline-pill {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ==========================================================================
   施工事例アーカイブ（new-construction-example_index.html）
   40件あるため、絞り込み＋段階表示＋2列グリッドでスクロール量を抑える
   ========================================================================== */

/* --- 絞り込みツールバー --- */
.wa-filter {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 22px 20px 18px;
    margin: 32px 0 26px;
}

.wa-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.wa-filter-row:last-of-type {
    margin-bottom: 0;
}

.wa-filter-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-color);
    white-space: nowrap;
}

.wa-chips,
.fb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wa-chip,
.fb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--bg-white);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
    word-break: keep-all;
}

.wa-chip:hover,
.fb-chip:hover {
    border-color: var(--accent-color);
    color: var(--primary-color);
}

.wa-chip.is-active,
.fb-chip.is-active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-white);
}

.wa-chip-count,
.fb-chip-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    opacity: .7;
}

.wa-select {
    min-height: 40px;
    padding: 8px 14px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--bg-white);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
}

.wa-view {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.wa-view-btn {
    min-height: 40px;
    padding: 8px 14px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--bg-white);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
    word-break: keep-all;
}

.wa-view-btn.is-active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-white);
}

.wa-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}

/* --- 事例グリッド --- */
.wa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* 「写真を大きく」：列を減らして1枚あたりを大きく見せる。
   元写真が600px幅のため、カードが600pxを超えて滲まないよう上限も設ける。 */
.wa-grid.is-large {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.wa-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.wa-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.wa-thumb {
    position: relative;
    display: block;
    /* 写真は 4:3（600x450）が主。枠を合わせて切り抜きを起こさない */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.wa-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.wa-card:hover .wa-thumb img {
    transform: scale(1.06);
}

/* 縦位置の写真しか無い事例は、切り抜かず全体を見せる
   （4:3の枠に縦写真を cover で入れると4割以上が切れてしまうため） */
.wa-thumb--portrait img {
    object-fit: contain;
    background-color: var(--bg-light);
}

.wa-card:hover .wa-thumb--portrait img {
    transform: none;
}

.wa-year {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 3px 10px;
    border-radius: 4px;
    background-color: rgba(11, 52, 113, .9);
    color: var(--bg-white);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

.wa-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px 16px 18px;
}

.wa-badge {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--accent-hover);
    background-color: rgba(74, 144, 226, .1);
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 8px;
    word-break: keep-all;
}

.wa-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 10px;
}

.wa-title a {
    color: var(--primary-color);
    text-decoration: none;
}

.wa-title a:hover {
    color: var(--accent-hover);
}

/* こだわりポイントは既定で畳んでおき、カードを短く保つ */
.wa-points {
    margin-bottom: 10px;
}

.wa-points summary {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-hover);
    cursor: pointer;
    padding: 4px 0;
}

.wa-points summary:hover {
    color: var(--primary-color);
}

.wa-points ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.wa-points li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}

.wa-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--accent-color);
}

.wa-area {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--silver-color);
    margin-bottom: 12px;
    /* 「建築面／積」のように語中で割れないようにする */
    word-break: keep-all;
    overflow-wrap: break-word;
}

.wa-more {
    margin-top: auto;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--accent-hover);
    text-decoration: none;
    /* keep-all にすると 390px の2列（カード幅132px）で折り返し位置が無くなり、
       はみ出した所＝矢印の直前で割れて「…を見る／➔」になる。
       日本語部分は自由に折り返させ、矢印だけは   で本文にくっつけている。 */
}

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

.wa-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.wa-grid.is-large .wa-title {
    font-size: 17px;
}

.wa-grid.is-large .wa-body {
    padding: 20px 20px 22px;
}

/* --- タブレット --- */
@media (max-width: 1024px) {
    .wa-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .wa-grid.is-large {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .wa-grid.is-large .wa-card {
        /* グリッド項目に margin:auto を使うと幅が内容依存になってしまうため、
           width:100% + justify-self で中央に寄せる */
        width: 100%;
        max-width: 620px;
        justify-self: center;
    }
}

/* --- スマホ：既定は2列。切り替えで1列（写真を大きく） --- */
@media (max-width: 768px) {
    .wa-filter {
        padding: 18px 14px 16px;
    }
    .wa-filter-row {
        gap: 10px;
    }
    .wa-view {
        margin-left: 0;
        width: 100%;
    }
    .wa-view-btn {
        flex: 1;
    }
    .wa-select {
        flex: 1;
        min-width: 0;
    }
    .wa-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .wa-grid.is-large {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .wa-body {
        padding: 12px 12px 14px;
    }
    .wa-title {
        font-size: 13.5px;
    }
    .wa-grid.is-large .wa-title {
        font-size: 16px;
    }
    .wa-badge {
        font-size: 10px;
    }
}

/* 施工事例アーカイブの短いラベルも語中で割らない */
/* 短いラベルだけ keep-all にする。
   長い日本語の見出し（.wa-title）に keep-all を当てると、任意の位置で折り返せず、
   はみ出した所で無理に割れて「…ガス化住／宅」のようになる（2026-09-04 修正）。 */
.wa-year,
.wa-count,
.wa-filter-label,
.wa-points summary {
    word-break: keep-all;
    overflow-wrap: break-word;
}

.wa-title {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   新築施工事例一覧（estate_index.html）の表示切替
   カードの情報量が多いため、「一覧で見る」では説明文を畳んで密度を上げる

   ※ .works-card-grid はリフォーム事例一覧とも共有しているため、
     絞り込みを持つ新築事例一覧だけに効くよう #wa-grid で限定する
   ========================================================================== */

/* 写真を大きく：1列にして写真を最大化。元画像が640pxなので上限も640pxに合わせる */
#wa-grid.works-card-grid.is-large {
    grid-template-columns: 1fr;
    gap: 26px;
}

#wa-grid.works-card-grid.is-large .works-card {
    width: 100%;
    max-width: 640px;
    justify-self: center;
}

@media (max-width: 768px) {
    /* 一覧で見る：2列にして、1画面に入る件数を増やす */
    #wa-grid.works-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    #wa-grid.works-card-grid:not(.is-large) .works-card-info {
        padding: 12px 10px 14px;
    }
    #wa-grid.works-card-grid:not(.is-large) .works-card-title {
        font-size: 13.5px;
    }
    #wa-grid.works-card-grid:not(.is-large) .works-card-point,
    #wa-grid.works-card-grid:not(.is-large) .works-card-desc {
        display: none;
    }
    #wa-grid.works-card-grid:not(.is-large) .works-card-vol {
        /* 「こどもエコすまい支援事業対象」のような区切りの無い長い認定名でも
           2列表示で1行に収まるサイズにする（末尾1文字だけ落ちるのを防ぐ） */
        font-size: 9.5px;
        letter-spacing: -0.01em;
        word-break: normal;
        line-break: strict;
    }
    #wa-grid.works-card-grid:not(.is-large) .works-card-meta-spec {
        font-size: 10px;
        gap: 6px;
    }

    /* 写真を大きく：1列に戻し、説明文も表示する */
    #wa-grid.works-card-grid.is-large {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ==========================================================================
   お客様のご感想アーカイブ（customer-feedback_new-construction / _renovation）
   新築36件・リフォーム8件。読み手は「自分と同じ状況の声」を探しに来るため、
   写真ではなく「施主の言葉」を主役にしたテキストカードで一覧する。
   写真を使わないので、画面幅が変わっても写真が見切れることが構造的に起きない。
   ========================================================================== */

/* --- キーワード検索欄 --- */
.fb-search-wrap {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.fb-search-wrap::before {
    content: "\1F50D";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

.fb-search {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px 10px 38px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--bg-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.fb-search::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.fb-search:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, .18);
}

/* 検索欄の使い方を短く添える */
.fb-search-hint {
    width: 100%;
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.fb-reset {
    min-height: 40px;
    padding: 8px 16px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--bg-white);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
    word-break: keep-all;
}

.fb-reset:hover {
    border-color: var(--accent-color);
    color: var(--primary-color);
}

/* --- カードのグリッド --- */
.fb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 8px;
}

.fb-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    padding: 22px 22px 20px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

/* 左端のアクセントバー。新築とリフォームで色を変え、区分を一目で分かるようにする */
.fb-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background-color: var(--accent-color);
}

.fb-card--reno::before {
    background-color: var(--silver-color);
}

.fb-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.fb-card:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
}

/* --- カード上部：年・施主・満足度 --- */
.fb-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fb-card-year {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--bg-white);
    background-color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 50px;
    word-break: keep-all;
}

.fb-card-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
    word-break: keep-all;
}

.fb-card-rating {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-hover);
    background-color: rgba(74, 144, 226, .10);
    border: 1px solid rgba(74, 144, 226, .28);
    padding: 4px 10px;
    border-radius: 50px;
    word-break: keep-all;
}

/* --- 見出し --- */
.fb-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.55;
    color: var(--primary-color);
}

.fb-card-title a {
    color: inherit;
    text-decoration: none;
}

.fb-card-title a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* --- 施主の言葉（このページの主役） --- */
.fb-card-quote {
    position: relative;
    margin: 0;
    padding: 14px 16px 12px 34px;
    border-radius: 10px;
    background-color: var(--bg-light);
}

.fb-card-quote::before {
    content: "\201D";
    position: absolute;
    left: 10px;
    top: 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    line-height: 1;
    color: var(--accent-color);
    opacity: .5;
}

.fb-card-quote p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
    color: var(--text-color);
}

.fb-card-quote-src {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    font-style: normal;
    color: var(--text-muted);
}

/* --- 経緯の要約 --- */
.fb-card-summary {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-muted);
}

/* --- タグ --- */
.fb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fb-card-tags li {
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary-color);
    background-color: var(--silver-light);
    padding: 3px 9px;
    border-radius: 4px;
    word-break: keep-all;
}

/* --- 原文へのリンク --- */
.fb-card-link {
    margin-top: auto;
    padding-top: 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-hover);
    text-decoration: none;
    word-break: keep-all;
}

.fb-card-link:hover {
    text-decoration: underline;
}

/* --- 該当なしの案内 --- */
.fb-empty {
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-light);
}

.fb-empty p {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.fb-empty span {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- もう一方の区分への行き来 --- */
.fb-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin: 34px 0 6px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-light);
}

.fb-switch p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

/* --- タブレット --- */
@media (max-width: 1024px) {
    .fb-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- スマホ：1列。文章カードなので2列にすると行長が足りず読みにくい --- */
@media (max-width: 768px) {
    .fb-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .fb-card {
        padding: 18px 18px 16px;
        gap: 10px;
    }

    .fb-card-title {
        font-size: 14.5px;
    }

    .fb-card-quote {
        padding: 12px 14px 10px 30px;
    }

    .fb-card-quote p {
        font-size: 13.5px;
    }

    .fb-card-rating {
        margin-left: 0;
    }

    .fb-search-wrap {
        flex: 1 1 100%;
    }

    .fb-switch {
        flex-direction: column;
        text-align: center;
    }
}

/* 短いラベルを語中で割らない（ご感想アーカイブ側） */
.fb-chip,
.fb-reset,
.fb-card-year,
.fb-card-name,
.fb-card-rating,
.fb-card-tags li,
.fb-card-link {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* --- アンケートの集計（原文の選択肢を数えた事実だけを書く） --- */
.fb-stats {
    margin: 26px 0 4px;
    padding: 20px 22px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
}

.fb-stats-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
}

.fb-stats-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-color);
}

.fb-stats-text strong {
    color: var(--accent-hover);
    font-weight: 800;
}

/* --- 一覧の見出し --- */
.fb-list-title {
    margin: 30px 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    padding-left: 12px;
    border-left: 4px solid var(--accent-color);
}

.fb-switch-title {
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color);
    text-align: center;
}

@media (max-width: 768px) {
    .fb-stats {
        padding: 16px 16px;
    }

    .fb-list-title {
        font-size: 16px;
    }
}

/* ==========================================================================
   14. 施工事例の詳細ページ（detail_*.html）
   スマホで「動画」と「写真」を確認しやすくすることを最優先にした章。
   ・動画はサムネイル方式。タップして初めて YouTube を読み込むので、
     3本並べてもページが重くならない。JSが無効でも YouTube へのリンクとして働く
   ・写真は段組み（column）で流し込む。縦位置でも横位置でも切り取られない
   ・写真はタップで全画面拡大（case-media.js）。細部まで確認できる
   ========================================================================== */

/* --- ヒーロー（結論を最初に見せる） --- */
.cs-hero {
    margin: 0 0 8px;
}

.cs-hero-img {
    display: block;
    /* 元画像より大きく引き伸ばさない（社長ご指摘 2026-09-05：滲みは厳禁）。
       施工写真は640px幅なので、1200pxのコンテナでは 1.8倍に拡大されて滲んでいた。
       width:auto + max-width:100% にすると、**元画像の大きさが上限**になる。 */
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}

.cs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 14px;
}

.cs-badge {
    font-size: 12px;
    font-weight: 800;
    color: var(--bg-white);
    background-color: var(--primary-color);
    padding: 5px 12px;
    border-radius: 50px;
    word-break: keep-all;
    overflow-wrap: normal;
}

.cs-badge--accent {
    background-color: var(--accent-color);
}

.cs-badge--line {
    color: var(--primary-color);
    background-color: var(--bg-white);
    border: 2px solid var(--border-color);
    padding: 3px 10px;
}

.cs-lead {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 2;
    color: var(--text-color);
}

/* --- 3秒でわかる要点（数字を先に出す） --- */
.cs-keyfacts {
    display: grid;
    /* 1fr だと「中身の最小幅」より狭くできず、長いラベルで列がはみ出す。
       minmax(0, 1fr) にして必ず画面内に収める */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 10px;
}

.cs-kf {
    padding: 16px 14px 14px;
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.cs-kf-label {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.cs-kf-value {
    display: block;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--primary-color);
    word-break: keep-all;
    overflow-wrap: normal;
}

.cs-kf-unit {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    margin-left: 2px;
}

.cs-kf-sub {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- 補足の小さな注記 --- */
.cs-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.85;
    color: var(--text-muted);
}

/* --- この家の要点3つ --- */
.cs-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 26px 0 8px;
}

.cs-point {
    padding: 20px 20px 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-light);
}

.cs-point-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--primary-color);
}

.cs-point-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-color);
}

/* --- 見出し --- */
.cs-h2 {
    margin: 46px 0 6px;
    padding-left: 12px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--primary-color);
    border-left: 4px solid var(--accent-color);
}

.cs-h3 {
    margin: 30px 0 10px;
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--primary-color);
}

.cs-body {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 2.05;
    color: var(--text-color);
}

/* 本文中の箇条書き（照明計画のポイントなど） */
.cs-list {
    margin: 0 0 18px;
    padding: 18px 22px 16px 40px;
    border-left: 4px solid var(--accent-color);
    border-radius: 0 10px 10px 0;
    background-color: var(--bg-light);
    list-style: disc;
}

.cs-list li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-color);
}

.cs-list li:last-child {
    margin-bottom: 0;
}

/* --- cs-list のモダン版：1項目ずつチェックマーク付きのカードに分ける
   （単色・無地の箇条書きが「あっさりしている」というご指摘への対応。2026-09-06） --- */
.cs-list--highlight {
    padding: 0;
    border-left: none;
    border-radius: 0;
    background-color: transparent;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-list--highlight li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding: 14px 18px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 0 10px 10px 0;
    box-shadow: var(--shadow-sm);
}

.cs-list--highlight li::before {
    content: "✓";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

@media (max-width: 480px) {
    .cs-list--highlight li {
        padding: 12px 14px;
        font-size: 13.5px;
    }
}

@media (max-width: 768px) {
    .cs-list {
        padding: 14px 16px 12px 34px;
    }

    .cs-list li {
        font-size: 13.5px;
    }
}

/* --- 動画（タップして読み込むサムネイル方式） --- */
.cs-videos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 18px 0 8px;
}

.cs-video {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.cs-video:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

/* サムネイル。JS が無効なら YouTube へのリンクとして働く */
.cs-video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.cs-video-facade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-video-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .18);
    transition: var(--transition-smooth);
}

.cs-video-facade:hover::after {
    background-color: rgba(0, 0, 0, .05);
}

.cs-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 46px;
    border-radius: 12px;
    background-color: var(--youtube-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: var(--transition-smooth);
}

.cs-video-facade:hover .cs-video-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.cs-video-play::before {
    content: "";
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}

.cs-video-facade:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
}

/* 再生後に差し替わる iframe の枠 */
.cs-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
}

.cs-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cs-video-cap {
    padding: 14px 16px 15px;
}

.cs-video-title {
    margin: 0 0 5px;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--primary-color);
}

.cs-video-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-muted);
}

/* 動画キャプション内の事例名リンクは a{color:inherit} の既定で見えなくなるため、
   「このページの詳細を見る」という明示のCTAを別行で足す（社長ご指摘 2026-09-07）。
   本文中のリンクを消さず、気づきやすい導線を追加で用意する方針。 */
.cs-video-cta {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-color);
    text-decoration: none;
}

.cs-video-cta:hover,
.cs-video-cta:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- 特集・コラム用 2カラム型 エディトリアル動画カード --- */
.cs-video-feature {
    margin: 28px 0 38px;
    background: linear-gradient(135deg, #fbfcfe 0%, #f4f7fa 100%);
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 20px -2px rgba(28, 53, 94, 0.07);
    transition: var(--transition-smooth);
}

.cs-video-feature:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 28px -4px rgba(28, 53, 94, 0.11);
}

.cs-video-feature-inner {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

@media (max-width: 960px) {
    .cs-video-feature-inner {
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 22px;
    }
}

@media (max-width: 768px) {
    .cs-video-feature {
        padding: 16px;
        margin: 20px 0 28px;
        border-radius: 14px;
    }
    .cs-video-feature-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cs-video-feature-title {
        font-size: 16px;
    }
    .cs-video-feature-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .cs-video-feature-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 20px;
    }
    .cs-video-feature-note {
        text-align: center;
    }
}

.cs-video-feature-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #0b111e;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16);
}

.cs-video-feature-media .cs-video-facade,
.cs-video-feature-media .cs-video-frame {
    border-radius: 12px;
    overflow: hidden;
}

.cs-video-time-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background-color: rgba(15, 23, 42, 0.82);
    border-radius: 6px;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.cs-video-feature-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-video-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #0284c7;
    background-color: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 9999px;
}

.cs-video-feature-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--primary-color);
}

/* このタイトルの列幅は h1 などに比べて狭いため、.ib の nowrap をここだけ解除する。
   960px以下（メディア列360px固定）で「【解説動画】〜」のような14〜15字の .ib が
   列幅を超えて右にはみ出し、769px幅で13pxの横スクロールが発生していた（column_moisture-control.html で検出）。*/
.cs-video-feature-title .ib {
    white-space: normal;
}

.cs-video-feature-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-color);
}

.cs-video-feature-points-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 2px;
}

.cs-video-feature-points-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.cs-video-feature-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-video-feature-points li {
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.cs-point-check {
    color: #10b981;
    font-weight: 900;
    font-size: 13px;
    flex-shrink: 0;
}

.cs-video-feature-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.cs-video-feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #1c355e 0%, #2a4b80 100%);
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(28, 53, 94, 0.25);
    transition: var(--transition-smooth);
}

.cs-video-feature-btn:hover,
.cs-video-feature-btn:focus-visible {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
    transform: translateY(-1px);
    color: #ffffff;
}

.cs-video-feature-btn .cs-btn-arrow {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.cs-video-feature-btn:hover .cs-btn-arrow {
    transform: translateX(2px);
}

.cs-video-feature-note {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* --- すまいコラム用の単体イラスト・図解（写真ギャラリーには入れない
   1枚だけの概念図・イメージ図。aspect-ratio を固定しないので、
   縦横比が正方形・A4縦長など写真と異なる画像でも切り取られない） --- */
.cs-illust {
    margin: 22px 0;
    padding: 0;
    max-width: 360px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cs-illust img {
    display: block;
    width: 100%;
    height: auto;
}

.cs-illust-cap {
    display: block;
    padding: 12px 15px 14px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-muted);
    text-align: center;
}

/* 温度グラフなど、横長で内容を読み取る必要がある図はコンテナ幅いっぱいに広げる */
.cs-illust--wide {
    max-width: 100%;
}

@media (max-width: 600px) {
    .cs-illust {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .cs-illust--wide {
        max-width: 100%;
    }
}

/* --- 図解・イラストが複数枚続くときのグリッド（2026-09-09 社長ご指摘） ---
   .cs-illust を単体で縦に何枚も並べると、PCの横幅を活かせず無駄に縦スクロールが
   長くなる（column_recommended_tairyokumenzai.html で発生）。関連する図解が
   2枚以上続く場合は .cs-illust-grid で囲み、PC・タブレットは2列で横に並べる。
   写真ギャラリー（.cs-gallery）と違い aspect-ratio を固定しないため、
   正方形・縦長（製品カタログ等）が混在してもトリミングされない。 */
.cs-illust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 22px 0;
    align-items: stretch;
}

.cs-illust-grid .cs-illust {
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* キャプションが1行のカードと2行のカードが並んでも下端がそろうよう、
   .cs-gallery の .cs-cap と同じ考え方で2行分の高さを確保する（改修ルール20） */
.cs-illust-grid .cs-illust-cap {
    flex: 1 1 auto;
    min-height: calc(1.8em * 2 + 26px);
    box-sizing: border-box;
    text-wrap: balance;
}

@media (max-width: 600px) {
    .cs-illust-grid {
        grid-template-columns: 1fr;
    }

    .cs-illust-grid .cs-illust {
        max-width: none;
    }
}


/* --- 写真のギャラリー（行がそろう格子） -----------------------------------
   以前は column-count（段組み）で組んでいた。切り取られない利点はあるが、
   左右の段が独立して流れるため **カードの下端がそろわず見た目がガタガタ**になる
   （社長ご指摘 2026-09-05）。grid に変えて行内の高さをそろえる。
   ・写真枠は aspect-ratio で全カード同じ形にする → 行が必ずそろう
   ・横位置は object-fit: cover（3:2 の実比率なのでほとんど切り取られない）
   ・縦位置は .cs-gallery-item--portrait を付けて contain にし、切り取らない
   ・どちらもタップすれば全画面で全体を確認できる（case-media.js）
--------------------------------------------------------------------------- */
.cs-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 10px 0 16px;
    align-items: stretch;
}

.cs-gallery-item {
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.cs-gallery-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.cs-shot {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}

.cs-shot img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s cubic-bezier(.25, .8, .25, 1);
}

/* 格子・カルーセルの中では、写真枠の形をそろえて行を合わせる。
   3:2 は施工写真（640×426）の実比率なので、横位置はほとんど切り取られない。 */
.cs-gallery .cs-shot,
.cs-carousel .cs-shot {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--bg-light);
}

.cs-gallery .cs-shot img,
.cs-carousel .cs-shot img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 縦位置の写真は切り取らずに全体を見せる（上下が切れると何の写真か分からなくなる） */
.cs-gallery-item--portrait .cs-shot img,
.cs-carousel-item--portrait .cs-shot img {
    object-fit: contain;
}

/* 3:2 より横長の写真（16:9・パノラマ・図面など）は切り取らない。
   600×254 のような写真を 3:2 の枠に cover で入れると、左右が37%も切れて
   何が写っているか分からなくなる（2026-09-05 に実際に検出）。 */
.cs-gallery-item--wide .cs-shot img,
.cs-carousel-item--wide .cs-shot img {
    object-fit: contain;
}

.cs-gallery-item:hover .cs-shot img {
    transform: scale(1.03);
}

.cs-shot:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: -3px;
}

.cs-shot-zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--bg-white);
    background-color: rgba(11, 52, 113, .55);
    padding: 7px 11px;
    border-radius: 50px;
    word-break: keep-all;
    overflow-wrap: normal;
    opacity: .85;
    transition: var(--transition-smooth);
}

.cs-gallery-item:hover .cs-shot-zoom,
.cs-shot:focus-visible .cs-shot-zoom {
    opacity: 1;
    background-color: rgba(11, 52, 113, .9);
}

/* タップで操作する端末では、ホバーが無いので常にはっきり見せる */
@media (hover: none) {
    .cs-shot-zoom {
        opacity: 1;
        background-color: rgba(11, 52, 113, .8);
    }
}

.cs-cap {
    display: block;
    flex: 1 1 auto;          /* 説明が1行でも2行でも、カードの下端をそろえる */
    padding: 12px 15px 14px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-muted);
    /* 説明1行のカードと2行のカードで段差が出ないよう、2行分の高さを確保する */
    min-height: calc(1.8em * 2 + 26px);
    box-sizing: border-box;
    /* text-wrap: pretty は値として受理されるが実際には無効化されている環境があるため使わない。
       balance は2行程度のキャプションなら概ね均等に割れ、最終行の孤立文字を防げる（改修ルール18） */
    text-wrap: balance;
}

/* --- 写真カルーセル（旧デザインのスライドショーの置きかえ） ----------------
   旧ページは「たくさんの写真をご覧いただきたい」という意図で
   camera.js / bxSlider のスライドショーを使っていた（社長 2026-09-05）。
   自動送りのスライドショーは読み手が見たい写真で止められず、
   スマホで指の操作と噛み合わないため、**横スワイプのカルーセル**に置きかえる。
   ・素の overflow-x スクロール + scroll-snap なので、JavaScript が無くても
     指・トラックパッド・キーボードで全部の写真を見られる
   ・矢印ボタンと「n / N」の枚数表示は case-media.js が後から付ける
   ・写真をタップすると既存の全画面表示（ライトボックス）が開く
--------------------------------------------------------------------------- */
.cs-carousel {
    position: relative;
    margin: 10px 0 18px;
}

.cs-carousel-track {
    /* flex ではなく grid で組む。flex だと flex-shrink が効かない環境があり、
       26枚が横幅いっぱいに押し込まれて1枚15pxまで潰れた（2026-09-05）。
       grid-auto-flow: column なら、列幅は grid-auto-columns で確実に決まる。 */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 14px) / 2);   /* PCは2枚見え */
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding: 0 2px;
    padding: 2px 2px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.cs-carousel-track:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
    border-radius: 14px;
}

.cs-carousel-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    scroll-snap-align: start;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.cs-carousel-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.cs-carousel-item:hover .cs-shot img {
    transform: scale(1.03);
}

.cs-carousel-item .cs-cap {
    min-height: calc(1.8em * 2 + 26px);
}

/* 矢印ボタン（JavaScript が付ける。無ければ表示されない） */
.cs-carousel-btn {
    position: absolute;
    top: calc(50% - 28px);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--bg-white);
    background-color: rgba(11, 52, 113, .82);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.cs-carousel-btn:hover {
    background-color: var(--primary-color);
    transform: scale(1.08);
}

.cs-carousel-btn:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.cs-carousel-btn[disabled] {
    opacity: .25;
    cursor: default;
    transform: none;
}

.cs-carousel-prev { left: -10px; }
.cs-carousel-next { right: -10px; }

.cs-carousel-count {
    margin: 0;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.cs-carousel-hint {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-muted);
}

/* タブレット */
@media (max-width: 1024px) {
    .cs-carousel-prev { left: 4px; }
    .cs-carousel-next { right: 4px; }
}

/* スマホ：1枚を大きく、次の写真を少しのぞかせて「まだ続く」と分かるようにする */
@media (max-width: 768px) {
    .cs-carousel-track {
        gap: 10px;
        padding-bottom: 10px;
        /* スマホは1枚を大きく。次の写真を少しのぞかせて「まだ続く」と分かるようにする */
        grid-auto-columns: 86%;
    }

    .cs-carousel-item .cs-cap {
        padding: 8px 10px 10px;
        font-size: 11.5px;
        min-height: calc(1.8em * 2 + 18px);
    }

    .cs-carousel-btn {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
}

/* --- 1枚で見せる図（シミュレーション・評価書など） --- */
.cs-figure {
    margin: 6px 0 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cs-figure .cs-shot img {
    background-color: var(--bg-white);
}

.cs-figcaption {
    display: block;
    padding: 11px 14px 13px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-muted);
}

/* --- 全画面の拡大表示 --- */
.cs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(10, 16, 28, .94);
    padding: 56px 12px 76px;
}

.cs-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

.cs-lightbox-close,
.cs-lightbox-prev,
.cs-lightbox-next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .14);
    color: var(--bg-white);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.cs-lightbox-close:hover,
.cs-lightbox-prev:hover,
.cs-lightbox-next:hover {
    background-color: rgba(255, 255, 255, .3);
}

.cs-lightbox-close {
    top: 10px;
    right: 12px;
}

.cs-lightbox-prev {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.cs-lightbox-next {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.cs-lightbox-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px 16px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.cs-lightbox-count {
    display: block;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, .68);
}

/* 拡大中は背面をスクロールさせない */
body.cs-lightbox-open {
    overflow: hidden;
}

/* --- よくあるご質問（この事例について） --- */
.cs-faq {
    margin: 10px 0 8px;
}

/* --- 関連する導線 --- */
.cs-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 8px;
}

.cs-related-card {
    display: block;
    padding: 18px 20px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.cs-related-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
}

.cs-related-title {
    display: block;
    margin-bottom: 6px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--primary-color);
}

.cs-related-text {
    display: block;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-muted);
}

/* --- タブレット --- */
@media (max-width: 1024px) {
    .cs-keyfacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-points,
    .cs-videos,
    .cs-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- スマホ --- */
@media (max-width: 768px) {
    .cs-hero-img {
        border-radius: 10px;
    }

    .cs-keyfacts {
        gap: 10px;
    }

    .cs-kf {
        padding: 13px 10px 12px;
    }

    .cs-kf-value {
        font-size: 21px;
    }

    .cs-points,
    .cs-videos,
    .cs-related {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-h2 {
        margin-top: 38px;
        font-size: 18px;
    }

    .cs-h3 {
        font-size: 15.5px;
    }

    .cs-body {
        font-size: 14px;
        line-height: 1.95;
    }

    .cs-lead {
        font-size: 14.5px;
    }

    /* 写真は2列のまま。タップで拡大できるので小さくても確認できる */
    .cs-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .cs-cap {
        padding: 8px 10px 10px;
        font-size: 11.5px;
        min-height: calc(1.8em * 2 + 18px);
    }

    .cs-shot-zoom {
        right: 6px;
        bottom: 6px;
        font-size: 10px;
        padding: 5px 8px;
    }

    .cs-lightbox {
        padding: 52px 6px 84px;
    }

    .cs-lightbox-prev {
        left: 6px;
    }

    .cs-lightbox-next {
        right: 6px;
    }
}

/* 図（評価書・シミュレーション）はスマホでも1列で大きく見せる */
@media (max-width: 480px) {
    .cs-gallery--wide {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 短いラベルを語中で割らない（事例詳細ページ側）。
   .cs-kf-label は説明文で長くなるため、ここには入れない（折り返してよい） */
.cs-badge,
.cs-kf-value,
.cs-shot-zoom {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* 幅400px以下のスマホで、長い値（例：次世代省エネ基準）がカードからはみ出して
   横スクロールが出るのを防ぐ。文字をカード幅に合わせて縮め、8字までは1行に収める。
   それでも入りきらない長い値だけ折り返す。長い .ib も同じ理由で折り返しを許す */
@media (max-width: 400px) {
    .cs-kf {
        container-type: inline-size;
    }

    .cs-kf-value {
        font-size: clamp(15px, 12.4cqi, 21px);
        overflow-wrap: anywhere;
    }

    .section-title .ib {
        max-width: 100%;
        white-space: normal;
    }
}

/* ご感想アーカイブの区分切替ボタンは、スマホで幅いっぱいにして
   「…（8件） ／ ➔」のように矢印だけが次行に落ちるのを防ぐ */
@media (max-width: 768px) {
    .fb-switch .btn-outline-pill {
        width: 100%;
        text-align: center;
        /* 既定の 16px / 左右30px では「…（8件） ／ ➔」と矢印だけが次行に落ちる */
        padding: 13px 16px;
        font-size: 15px;
    }
}

/* --- 事例詳細ページの h1 の副題 --------------------------------------------
   h1 の後半に「｜福井県大野市の工務店あまや製材の新築事例」を付けると、
   16ページすべてが同じ20字で終わり、読む人にはくどく、AIにも区別がつかない。
   h1 は「事例名＋その事例にしかない特徴」だけにして、
   会社名と地名は title・パンくず・本文・JSON-LD に持たせる。
   -------------------------------------------------------------------------- */
.cs-h1-sub {
    display: block;
    margin-top: 12px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .02em;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .cs-h1-sub {
        margin-top: 9px;
        font-size: 13.5px;
    }
}

/* ==========================================================================
   15. お客様のご感想 詳細ページ（アンケート原文）
   customer-feedback_*.html の個別ページ。
   アンケートは施主様の回答なので、文章は一字一句そのまま載せる。
   会社側が手を入れていないことが読み手に伝わるよう、原文のまま掲載している旨と、
   ご提出いただいた用紙の画像（証拠）を必ず添える。
   ========================================================================== */

/* --- 原文のまま掲載している旨の断り書き --- */
.fbd-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 22px 0 8px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
}

.fbd-notice-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.5;
}

.fbd-notice p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-color);
}

.fbd-notice strong {
    color: var(--primary-color);
    font-weight: 800;
}

/* --- 集計（原文で選ばれた選択肢を数えたもの） --- */
.fbd-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 6px;
}

.fbd-sum {
    padding: 16px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.fbd-sum-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    word-break: keep-all;
}

.fbd-sum-value {
    display: block;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary-color);
}

.fbd-sum-unit {
    font-size: 13px;
    font-weight: 700;
    margin-left: 2px;
}

.fbd-sum--top .fbd-sum-value {
    color: var(--accent-hover);
}

/* --- 設問と回答 --- */
.fbd-qa {
    margin: 8px 0 26px;
    padding: 20px 22px 18px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
}

.fbd-q {
    margin: 0 0 14px;
    padding-left: 14px;
    border-left: 4px solid var(--accent-color);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
    color: var(--primary-color);
}

.fbd-a {
    margin: 0;
    font-size: 15px;
    line-height: 2;
    color: var(--text-color);
}

.fbd-a + .fbd-a {
    margin-top: 14px;
}

/* 回答が無かった設問 */
.fbd-none {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-muted);
}

/* --- 選択式の設問（決め手など） --- */
.fbd-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fbd-choice {
    padding: 8px 14px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--bg-light);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    word-break: keep-all;
    overflow-wrap: normal;
}

.fbd-choice.is-selected {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: var(--bg-white);
    font-weight: 800;
}

.fbd-choice.is-selected::before {
    content: "\2713";
    margin-right: 5px;
    font-weight: 800;
}

/* --- 5段階評価 --- */
.fbd-rating {
    margin: 0 0 18px;
    padding: 14px 0 0;
    border-top: 1px dashed var(--border-color);
}

.fbd-rating:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.fbd-rating-label {
    display: block;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
}

.fbd-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fbd-scale-item {
    padding: 8px 4px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-light);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
    word-break: keep-all;
    overflow-wrap: normal;
}

.fbd-scale-item.is-selected {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: var(--bg-white);
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(74, 144, 226, .28);
}

.fbd-reason {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: var(--bg-light);
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-color);
}

.fbd-reason-label {
    font-weight: 800;
    color: var(--primary-color);
}

.fbd-noselect {
    margin: 9px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* --- ご提出いただいた用紙（証拠） --- */
.fbd-sheet {
    margin: 10px 0 6px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.fbd-sheet .cs-shot img {
    background-color: var(--bg-white);
}

.fbd-sheet-cap {
    display: block;
    padding: 12px 15px 14px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-muted);
}

/* --- 旧ページの装飾イラスト（情報を持たないので alt は空にしている） --- */
.fbd-divider {
    display: block;
    width: 100%;
    max-width: 386px;
    height: auto;
    margin: 22px auto 6px;
    opacity: .9;
}

/* --- タブレット --- */
@media (max-width: 1024px) {
    .fbd-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- スマホ --- */
@media (max-width: 768px) {
    .fbd-notice {
        padding: 14px 15px;
        gap: 10px;
    }

    .fbd-notice p {
        font-size: 13px;
    }

    .fbd-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .fbd-sum {
        padding: 12px 8px;
    }

    .fbd-sum-value {
        font-size: 21px;
    }

    .fbd-qa {
        padding: 16px 16px 14px;
    }

    .fbd-q {
        font-size: 15px;
        padding-left: 11px;
    }

    .fbd-a {
        font-size: 14.5px;
        line-height: 1.95;
    }

    /* 5段階は幅が足りないので文字を詰める。選択肢は5つとも必ず見せる */
    .fbd-scale {
        gap: 3px;
    }

    .fbd-scale-item {
        padding: 7px 2px;
        font-size: 10.5px;
        border-radius: 6px;
    }

    .fbd-reason {
        font-size: 13.5px;
        padding: 9px 11px;
    }
}

/* ==========================================================================
 * 16. 不動産仲介（amaya_fudousan.html）
 *
 * 本文幅 800px を前提にしている。
 *   ・4つのご相談窓口（.re-windows）… PC・タブレット2列 / スマホ1列
 *   ・掲載中の物件（.re-grid）      … PC・タブレット2列 / スマホ1列
 *     写真は元画像が 250〜650px と幅がまちまちなので、枠は aspect-ratio で
 *     比率を決める（height 固定にすると画面幅で切り取られ方が変わり見切れる）。
 *   ・グリッドの列は必ず minmax(0, 1fr)。1fr だと長いラベルで列が画面からはみ出す。
 * ========================================================================== */

/* --- 4つのご相談窓口 --- */
.re-windows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 10px;
}

.re-window {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 18px;
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
}

.re-window-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 8px;
}

.re-window-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-color);
}

.re-window-sub {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.re-window-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-color);
}

.re-window-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.re-window-link {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--accent-color);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    text-decoration: none;
    background-color: var(--bg-white);
    transition: background-color .2s, color .2s;
}

.re-window-link:hover,
.re-window-link:focus-visible {
    background-color: var(--accent-color);
    color: #fff;
}

.re-window-none {
    display: inline-block;
    padding: 8px 14px;
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-muted);
    background-color: var(--bg-light);
}

/* --- 掲載中の物件 --- */
.re-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 0 10px;
}

.re-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
}

.re-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.re-card-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bg-light);
}

.re-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.re-card-media:hover img {
    transform: scale(1.03);
}

.re-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px;
}

.re-card-cat {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background-color: var(--primary-color);
}

.re-card-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--primary-color);
}

.re-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.re-price-value {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--accent-color);
}

.re-price-unit {
    font-size: 14px;
    font-weight: 700;
    margin-left: 2px;
}

.re-price-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.re-specs {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.8;
}

.re-spec {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    gap: 0 8px;
    padding: 4px 0;
    border-bottom: 1px dotted var(--border-color);
}

.re-spec:last-child {
    border-bottom: 0;
}

.re-spec dt {
    font-weight: 700;
    color: var(--text-muted);
}

.re-spec dd {
    margin: 0;
    color: var(--text-color);
}

.re-note {
    margin: 0 0 12px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-muted);
    background-color: var(--bg-light);
}

/* --- 区画図・平面図へのリンク（旧ページの「↑拡大表示はこちら」に相当） --- */
.re-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.re-sub-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    background-color: var(--bg-white);
    transition: border-color .2s, color .2s;
}

.re-sub-link::before {
    content: "🔍";
    margin-right: 5px;
}

.re-sub-link:hover,
.re-sub-link:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.re-card-btn {
    display: block;
    margin-top: auto;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: var(--accent-color);
    transition: opacity .2s;
}

.re-card-btn:hover,
.re-card-btn:focus-visible {
    opacity: .85;
}

/* --- 募集が0件のときの案内 --- */
.re-empty {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0 10px;
}

.re-empty-box {
    padding: 18px 20px 16px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-light);
}

.re-empty-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
}

.re-empty-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-muted);
}

/* --- 免許・登録の明示（E-E-A-T） --- */
.re-license {
    margin: 22px 0 6px;
    padding: 16px 20px 14px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 10px;
    background-color: var(--bg-light);
}

.re-license-title {
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--primary-color);
}

.re-license-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--text-color);
}

.re-license-list li::before {
    content: "\2713";
    margin-right: 7px;
    font-weight: 700;
    color: var(--accent-color);
}

/* --- 掲載時点の注記 --- */
.re-asof {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* --- タブレット --- */
@media (max-width: 1024px) {
    .re-windows,
    .re-grid,
    .re-empty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- スマホ --- */
@media (max-width: 768px) {
    .re-windows,
    .re-grid,
    .re-empty {
        grid-template-columns: minmax(0, 1fr);
    }

    .re-window {
        padding: 17px 17px 15px;
    }

    .re-window-title {
        font-size: 16px;
    }

    .re-card-body {
        padding: 15px 16px;
    }

    .re-price-value {
        font-size: 24px;
    }

    .re-spec {
        grid-template-columns: 5em minmax(0, 1fr);
    }
}

/* ==========================================================================
 * 17. 家づくりのQ&A（Q&A.html）
 *
 * このページは「質問と答え」そのものが本文なので、事例詳細の中に置く
 * .cs-faq より一回り大きくする。生成AI検索に読ませることが第一目的のため、
 * 答えは常に開いた状態で置く（アコーディオンで隠さない）。
 * ========================================================================== */

/* --- 目次（カテゴリーへ飛ぶ） --- */
.qa-toc {
    margin: 26px 0 8px;
    padding: 20px 22px 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-light);
}

.qa-toc-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
}

.qa-toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qa-toc-list a {
    display: block;
    padding: 9px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    background-color: var(--bg-white);
    transition: border-color .2s, color .2s;
}

.qa-toc-list a:hover,
.qa-toc-list a:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.qa-toc-count {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

/* --- カテゴリーの見出し --- */
.qa-cat {
    scroll-margin-top: 90px;
}

/* --- Q&A 本体（.cs-faq を大きくした版） --- */
.cs-faq--page .faq-item {
    padding: 22px 24px 20px;
    margin-bottom: 14px;
    scroll-margin-top: 90px;
    transition: border-color .2s, box-shadow .2s;
}

.cs-faq--page .faq-item:hover,
.cs-faq--page .faq-item:target {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-sm);
}

.cs-faq--page .faq-q {
    font-size: 17px;
    line-height: 1.6;
    padding-left: 30px;
    margin-bottom: 10px;
}

.cs-faq--page .faq-q::before {
    font-size: 19px;
}

.cs-faq--page .faq-a {
    font-size: 14.5px;
    line-height: 2;
    padding-left: 30px;
    color: var(--text-color);
}

.cs-faq--page .faq-a::before {
    font-size: 19px;
}

.cs-faq--page .faq-a + .faq-a {
    margin-top: 12px;
}

/* 答えの中の箇条書き */
.faq-list {
    margin: 10px 0 0;
    padding: 0 0 0 30px;
    list-style: none;
    font-size: 14px;
    line-height: 1.95;
    color: var(--text-color);
}

.faq-list li {
    position: relative;
    padding-left: 16px;
}

.faq-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-color);
}

/* 答えの根拠になるページへの導線 */
.faq-src {
    margin: 12px 0 0 30px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-muted);
}

.faq-src a {
    font-weight: 700;
}

/* --- タブレット・スマホ --- */
@media (max-width: 768px) {
    .qa-toc {
        padding: 16px 16px 14px;
    }

    .qa-toc-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-faq--page .faq-item {
        padding: 18px 17px 16px;
    }

    .cs-faq--page .faq-q {
        font-size: 15.5px;
        padding-left: 26px;
    }

    .cs-faq--page .faq-a {
        font-size: 14px;
        padding-left: 26px;
    }

    .faq-list,
    .faq-src {
        padding-left: 26px;
    }

    .faq-src {
        margin-left: 26px;
    }
}

/* 短いラベルを語中で割らない（Q&Aページ側） */
.qa-toc-list a,
.qa-toc-count {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* 短いラベルを語中で割らない（不動産ページ側） */
.re-window-link,
.re-window-none,
.re-card-cat,
.re-card-btn,
.re-sub-link,
.re-price-unit,
.re-price-sub,
.re-spec dt {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* 短いラベルを語中で割らない（ご感想詳細ページ側） */
.fbd-choice,
.fbd-scale-item,
.fbd-sum-label {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* --------------------------------------------------------------------------
   17-2. Q&Aページ限定：「ロボットの回答」に見えないようにする対話デザイン
   （ユーザー様ご指摘 2026-09-07：「文字ばかりで無機質。一緒に住宅を作っていく
   かたへ寄り添うページにしたい」）。他ページの .cs-faq--page（hokenhosyou_*・
   renovation_*・sumai_schedule.html）に影響させないため、Q&A.htmlだけに付けた
   .cs-faq--warm / .qa-answerer-strip にだけ効くようにしてある。文章は一切変えず、
   見た目（色・アイコン・実際に答えるスタッフの顔）だけを足す方針。
   -------------------------------------------------------------------------- */

/* 導入部：実際にお答えするスタッフの顔を見せ、「誰が答えているか」を伝える */
.qa-answerer-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0 4px;
    padding: 10px 20px 10px 10px;
    background: linear-gradient(135deg, rgba(74, 144, 226, .08), rgba(11, 52, 113, .05));
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.qa-answerer-photos {
    display: flex;
    flex-shrink: 0;
}

.qa-answerer-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-white);
    box-shadow: var(--shadow-sm);
}

.qa-answerer-photo--second {
    margin-left: -14px;
}

.qa-answerer-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-color);
    text-wrap: pretty;
}

/* カテゴリー見出しのアイコンバッジは .zone-icon-heading / .zone-icon-badge
   （22章）をそのまま流用する（Q&A.html専用のCSSは追加しない） */

/* Q/Aを「文字だけの記号」から「対話の吹き出し」に変える */
.cs-faq--warm .faq-item {
    border-left: 4px solid var(--accent-color);
}

.cs-faq--warm .faq-q,
.cs-faq--warm .faq-a {
    padding-left: 40px;
}

.cs-faq--warm .faq-q::before,
.cs-faq--warm .faq-a::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 900;
}

.cs-faq--warm .faq-q::before {
    content: "Q";
    background-color: var(--primary-color);
    color: var(--bg-white);
}

.cs-faq--warm .faq-a::before {
    content: "A";
    background-color: var(--accent-color);
    color: var(--bg-white);
}

.cs-faq--warm .faq-list,
.cs-faq--warm .faq-src {
    padding-left: 40px;
}

@media (max-width: 768px) {
    .qa-answerer-strip {
        padding: 8px 16px 8px 8px;
    }

    .qa-answerer-photo {
        width: 38px;
        height: 38px;
    }

    .qa-answerer-text {
        font-size: 12.5px;
    }

    .cs-faq--warm .faq-q,
    .cs-faq--warm .faq-a,
    .cs-faq--warm .faq-list,
    .cs-faq--warm .faq-src {
        padding-left: 34px;
    }

    .cs-faq--warm .faq-q::before,
    .cs-faq--warm .faq-a::before {
        width: 23px;
        height: 23px;
        font-size: 11.5px;
    }
}

/* お探しのご質問へ（目次）：カテゴリーごとにアイコンを添えて見つけやすくする */
.qa-toc-list a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qa-toc-icon {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
}

/* ==========================================================================
   会社案内・スタッフ紹介ページ（company.html）専用スタイル
   ========================================================================== */

/* ページ導入・理念ボックス */
.company-hero-lead {
    background-color: var(--bg-light, #f8f9fa);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 32px 28px;
    margin-bottom: 48px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.company-hero-lead .lead-catch {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color, #1e3a8a);
    line-height: 1.6;
    margin-bottom: 16px;
    text-wrap: balance;
}

.company-hero-lead .lead-text {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-color, #374151);
    text-wrap: pretty;
    margin: 0;
}

.company-hero-lead .lead-text + .lead-text {
    margin-top: 14px;
}

/* --------------------------------------------------------------------------
   下層ページの <section> から、トップページ用の余白を打ち消す
   --------------------------------------------------------------------------
   top_style.css には、トップページの全幅セクション用に `section { padding: 80px 0 }`
   がある。m_style.css はその top_style.css を @import しているため、
   **下層ページの <section> にも 上下 80px（=1セクションあたり160px）の空白**が付き、
   見出しと本文のあいだが間延びして、延々スクロールすることになっていた
   （社長ご指摘 2026-09-05：「余計な空白がところどころにあります」）。
   ここで打ち消す。`.spec-section` のように自前で padding を持つ部品は
   クラス指定のほうが強いので、そちらが優先されて影響を受けない。
   -------------------------------------------------------------------------- */
section {
    padding: 0;
}

/* セクション区切り */
.company-section {
    margin-bottom: 60px;
}

.company-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color, #1f2937);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-color, #1e3a8a);
    margin-bottom: 24px;
    text-wrap: balance;
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-section-title .en-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.company-section-desc {
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-color, #4b5563);
    margin-bottom: 28px;
    text-wrap: pretty;
}

/* 私たちの強み・こだわり カードグリッド */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.features-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.feature-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 26px 22px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.feature-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.feature-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-color, #1e3a8a);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.feature-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color, #111827);
    line-height: 1.45;
    margin: 0;
    text-wrap: balance;
}

.feature-card-body {
    font-size: 14px;
    line-height: 1.85;
    color: var(--text-color, #4b5563);
    flex: 1 1 auto;
    text-wrap: pretty;
}

.feature-sub-item {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-color, #e5e7eb);
}

.feature-sub-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary-color, #1e3a8a);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-wrap: balance;
}

.feature-sub-title::before {
    content: "●";
    color: var(--accent-color, #d97706);
    font-size: 11px;
}

.feature-sub-text {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-muted, #4b5563);
    margin: 0;
    text-wrap: pretty;
}

.feature-highlight-box {
    background-color: #eff6ff;
    border-left: 4px solid var(--primary-color, #1e3a8a);
    padding: 12px 16px;
    margin-top: 14px;
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #1e40af;
}

/* 社長動画インタビュー グリッド */
.video-interview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-bottom: 36px;
}

.video-interview-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.video-interview-media {
    position: relative;
    background-color: #000000;
}

.video-interview-content {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.video-interview-vol {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background-color: var(--accent-color, #b45309);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    align-self: flex-start;
    word-break: keep-all;
}

.video-interview-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color, #111827);
    line-height: 1.5;
    margin-bottom: 10px;
    text-wrap: balance;
}

.video-interview-desc {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-muted, #4b5563);
    margin: 0;
    flex: 1 1 auto;
    text-wrap: pretty;
}

.video-interview-date {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    text-align: right;
}

/* スタッフ紹介 グリッド */
.staff-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.staff-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.staff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.staff-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border: 2px solid #bfdbfe;
}

.staff-card-photo-wrap {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px 10px;
    overflow: hidden;
}

.staff-card--featured .staff-card-photo-wrap {
    height: 100%;
    min-height: 260px;
    padding: 24px;
    background: transparent;
}

.staff-card-photo {
    width: 170px;
    height: 170px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50%;
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 8px 20px -4px rgba(15, 23, 42, 0.12);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.staff-card:hover .staff-card-photo {
    transform: scale(1.04);
    box-shadow: 0 0 0 2px #0284c7, 0 12px 28px -4px rgba(2, 132, 199, 0.2);
}

.staff-card--featured .staff-card-photo {
    width: 200px;
    height: 200px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 10px 24px -4px rgba(15, 23, 42, 0.15);
}

.staff-card--featured:hover .staff-card-photo {
    box-shadow: 0 0 0 2px #0284c7, 0 14px 32px -4px rgba(2, 132, 199, 0.25);
}

.staff-card-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.staff-card--featured .staff-card-body {
    padding: 32px 36px 32px 16px;
}

.staff-card-role-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color, #1e3a8a);
    background-color: #dbeafe;
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 8px;
    align-self: flex-start;
    word-break: keep-all;
}

.staff-card-role-desc {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #4b5563);
    margin-bottom: 4px;
    line-height: 1.4;
}

.staff-card-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-color, #111827);
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.staff-card--featured .staff-card-name {
    font-size: 23px;
}

.staff-card-kana {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
}

.staff-card-meta {
    font-size: 13px;
    color: var(--text-muted, #4b5563);
    margin-bottom: 12px;
    line-height: 1.6;
    background-color: #f9fafb;
    padding: 8px 12px;
    border-radius: 6px;
}

.staff-card-meta-item + .staff-card-meta-item {
    margin-left: 10px;
}

.staff-card-message {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-color, #374151);
    margin: 0 0 14px;
    text-wrap: pretty;
    flex: 1 1 auto;
}

.staff-card-hobby {
    font-size: 12.5px;
    color: var(--text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.staff-card-hobby-tag {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    word-break: keep-all;
}

/* 会社概要テーブル */
.company-spec-table-wrap {
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 40px;
}

.company-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.company-spec-table th,
.company-spec-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    line-height: 1.7;
}

.company-spec-table tr:last-child th,
.company-spec-table tr:last-child td {
    border-bottom: none;
}

.company-spec-table th {
    width: 22%;
    min-width: 130px;
    background-color: #f8fafc;
    color: var(--text-color, #1e293b);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
}

.company-spec-table td {
    color: var(--text-color, #334155);
    vertical-align: top;
    text-wrap: pretty;
}

.company-spec-table .spec-sub-note {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin-top: 4px;
}

/* 沿革年表 */
.history-timeline {
    position: relative;
    padding-left: 28px;
    margin: 24px 0 40px;
}

.history-timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: #cbd5e1;
}

.history-timeline-item {
    position: relative;
    padding-bottom: 22px;
}

.history-timeline-item:last-child {
    padding-bottom: 0;
}

.history-timeline-dot {
    position: absolute;
    left: -28px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid var(--primary-color, #1e3a8a);
    box-shadow: 0 0 0 3px #dbeafe;
}

.history-timeline-year {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color, #1e3a8a);
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    word-break: keep-all;
}

.history-timeline-wareki {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}

.history-timeline-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-color, #334155);
    margin: 0;
    text-wrap: pretty;
}

/* ZEHバナーカード */
.zeh-banner-card {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 24px 26px;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 40px;
}

.zeh-banner-img-wrap {
    flex-shrink: 0;
    width: 140px;
}

.zeh-banner-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.zeh-banner-content {
    flex: 1 1 auto;
}

.zeh-banner-title {
    font-size: 18px;
    font-weight: 700;
    color: #166534;
    margin-bottom: 8px;
    text-wrap: balance;
}

.zeh-banner-text {
    font-size: 14px;
    line-height: 1.8;
    color: #15803d;
    margin: 0 0 12px;
    text-wrap: pretty;
}

.zeh-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    background-color: #16a34a;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    word-break: keep-all;
}

.zeh-banner-btn:hover {
    background-color: #15803d;
    color: #ffffff;
}

/* お取引先リスト */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.partner-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 14px;
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color, #1f2937);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    word-break: keep-all;
}

.partner-card-link:hover {
    border-color: var(--primary-color, #1e3a8a);
    color: var(--primary-color, #1e3a8a);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

/* アクセスカード */
.access-overview-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 24px 26px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.access-overview-info {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--text-color, #374151);
}

.access-overview-info p {
    margin: 0 0 10px;
}

.access-overview-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--primary-color, #1e3a8a);
    margin-top: 8px;
}

/* レスポンシブ対応 (会社案内) */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .staff-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .staff-card--featured {
        grid-column: span 2;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .company-hero-lead {
        padding: 22px 18px;
        margin-bottom: 36px;
    }

    .company-hero-lead .lead-catch {
        font-size: 17.5px;
    }

    .company-section {
        margin-bottom: 44px;
    }

    .company-section-title {
        font-size: 19px;
        margin-bottom: 18px;
    }

    .features-grid,
    .features-grid--2col {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .video-interview-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .staff-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .staff-card--featured {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }

    .staff-card--featured .staff-card-photo-wrap {
        min-height: auto;
        padding: 20px 20px 0;
    }

    .staff-card--featured .staff-card-body {
        padding: 16px 20px 22px;
    }

    .company-spec-table th,
    .company-spec-table td {
        padding: 12px 14px;
        font-size: 13.5px;
    }

    .company-spec-table th {
        width: 30%;
        min-width: 100px;
    }

    .zeh-banner-card {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
        gap: 16px;
    }

    .zeh-banner-img-wrap {
        width: 120px;
    }

    .zeh-banner-btn {
        width: 100%;
        justify-content: center;
    }

    .partners-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .access-overview-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
    }
}

/* 短いラベルを語中で割らない（会社案内ページ側） */
.staff-card-role-badge,
.staff-card-hobby-tag,
.video-interview-vol,
.feature-card-num,
.zeh-banner-btn,
.partner-card-link,
.company-spec-table th {
    word-break: keep-all;
    overflow-wrap: normal;
}

.access-overview-map iframe {
    border: 0;
    border-radius: 8px;
}

/* ==========================================================================
   リフォーム施工事例詳細ページ専用スタイル
   ========================================================================== */

/* 条例・建築規制の解説ボックス */
.law-explanation-box {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 24px 26px;
    margin: 28px 0 36px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.law-explanation-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-wrap: balance;
}

.law-explanation-title::before {
    content: "⚖️";
    font-size: 16px;
}

.law-points-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 12px;
}

.law-points-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.8;
    color: #334155;
    text-wrap: pretty;
}

.law-points-item strong {
    color: #0f172a;
    display: block;
    margin-bottom: 4px;
    font-size: 14.5px;
}

/* 条例抜粋アコーディオン/引用枠 */
.law-quote-details {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 14px;
}

.law-quote-summary {
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    background-color: #f1f5f9;
    user-select: none;
    transition: background-color 0.2s ease;
    word-break: keep-all;
}

.law-quote-summary:hover {
    background-color: #e2e8f0;
}

.law-quote-body {
    padding: 18px;
    font-size: 13px;
    line-height: 1.85;
    color: #475569;
    background-color: #fafafa;
    border-top: 1px solid #e2e8f0;
    text-wrap: pretty;
}

.law-quote-body p {
    margin: 0 0 10px;
}

.law-quote-body p:last-child {
    margin: 0;
}

/* Before / After バッジ */
.badge-before {
    display: inline-block;
    background-color: #64748b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
    word-break: keep-all;
}

.badge-after {
    display: inline-block;
    background-color: #0284c7;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
    word-break: keep-all;
}

/* 前後の事例ナビゲーション */
.renovation-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 48px 0 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* 2行に折り返るボタンは行の長さをそろえる（「へ ➔」だけが行に残らないように） */
.renovation-pager-btn,
.zeh-banner-btn,
.cta-trust-badge {
    text-wrap: balance;
}

.renovation-pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    background-color: #ffffff;
    color: var(--text-color, #374151);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    word-break: keep-all;
}

.renovation-pager-btn:hover {
    border-color: var(--primary-color, #1e3a8a);
    color: var(--primary-color, #1e3a8a);
    background-color: #f8fafc;
}

@media (max-width: 768px) {
    .law-explanation-box {
        padding: 18px 16px;
        margin: 20px 0 28px;
    }
    .law-explanation-title {
        font-size: 15.5px;
    }
    .law-points-item {
        padding: 12px 14px;
        font-size: 13.5px;
    }
    .renovation-pager {
        flex-direction: column;
        align-items: stretch;
    }
    .renovation-pager-btn {
        justify-content: center;
    }
}

/* 折り返し制御ユーティリティ */
.inline-block {
    display: inline-block;
}
.nowrap {
    white-space: nowrap;
}

/* 5項目の主要諸元グリッド */
.cs-keyfacts.cs-keyfacts-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .cs-keyfacts.cs-keyfacts-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .cs-keyfacts.cs-keyfacts-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .cs-keyfacts.cs-keyfacts-5 .cs-kf {
        padding: 12px 6px 10px;
    }
    .cs-keyfacts.cs-keyfacts-5 .cs-kf-label {
        font-size: 11px;
    }
    .cs-keyfacts.cs-keyfacts-5 .cs-kf-value {
        font-size: 18px;
    }
    .cs-keyfacts.cs-keyfacts-5 .cs-kf-sub {
        font-size: 10px;
        white-space: nowrap;
    }
}

/* ==========================================================================
   リッチお問い合わせCTAセクション（.contact-cta-section）
   誰が見ても一目で理解でき、押しやすい高信頼カード型UI
   ========================================================================== */
.contact-cta-section {
    display: block;
    margin: 64px auto 40px;
    max-width: 1080px;
    padding: 0 16px;
}

.contact-cta-inner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--primary-color);
    border-radius: 16px;
    padding: 44px 36px 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.contact-cta-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 12px;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.contact-cta-lead {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #475569;
    max-width: 760px;
    margin: 0 auto 24px;
}

/* 3つの安心バッジ */
.cta-trust-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 auto 30px;
    padding: 0;
    list-style: none;
}

.cta-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cta-trust-badge-icon {
    color: #10b981;
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
}

/* 3つのボタングリッド */
.contact-cta-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 980px;
    margin: 0 auto;
}

.cta-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 18px 22px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cta-btn-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.cta-btn:hover .cta-btn-icon-wrap {
    transform: scale(1.08);
}

.cta-btn-icon-wrap svg {
    width: 26px;
    height: 26px;
}

.cta-btn-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.cta-btn-sub {
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
    line-height: 1.3;
    /* 900px で「…ご依／頼」のように最後の1文字だけが行に残っていた（改修ルール18）。
       行の長さをそろえて、1文字だけ落ちるのを防ぐ。 */
    text-wrap: balance;
}

.cta-btn-main {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.25;
    /* 「メールでお問い合わ／せ」を防ぐ */
    text-wrap: balance;
}

.cta-btn-note {
    font-size: 0.72rem;
    margin-top: 6px;
    opacity: 0.85;
    line-height: 1.3;
    text-wrap: balance;   /* 行末に1文字だけ残さない（改修ルール18） */
}

/* ① 電話ボタン */
.cta-btn-phone {
    background: #ffffff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.cta-btn-phone .cta-btn-icon-wrap {
    background: var(--primary-color);
    color: #ffffff;
}

.cta-btn-phone .cta-btn-sub {
    color: #64748b;
}

.cta-btn-phone .cta-btn-main {
    color: var(--primary-color);
    font-size: 1.45rem;
    font-feature-settings: "palt";
}

.cta-btn-phone .cta-btn-note {
    color: #64748b;
}

.cta-btn-phone:hover {
    background: #f1f5f9;
}

/* ② LINEボタン */
.cta-btn-line {
    background: #06c755;
    border: 2px solid #06c755;
    color: #ffffff;
}

.cta-btn-line .cta-btn-icon-wrap {
    background: #ffffff;
    color: #06c755;
}

.cta-btn-line .cta-btn-sub {
    color: rgba(255, 255, 255, 0.9);
}

.cta-btn-line .cta-btn-main {
    color: #ffffff;
}

.cta-btn-line .cta-btn-note {
    color: rgba(255, 255, 255, 0.9);
}

.cta-btn-line:hover {
    background: #05b34c;
    border-color: #05b34c;
}

/* ③ メールボタン */
.cta-btn-mail {
    background: #ea580c;
    border: 2px solid #ea580c;
    color: #ffffff;
}

.cta-btn-mail .cta-btn-icon-wrap {
    background: #ffffff;
    color: #ea580c;
}

.cta-btn-mail .cta-btn-sub {
    color: rgba(255, 255, 255, 0.9);
}

.cta-btn-mail .cta-btn-main {
    color: #ffffff;
}

.cta-btn-mail .cta-btn-note {
    color: rgba(255, 255, 255, 0.9);
}

.cta-btn-mail:hover {
    background: #c2410c;
    border-color: #c2410c;
}

/* タブレット・スマホ対応 (860px以下) */
@media (max-width: 860px) {
    .contact-cta-inner {
        padding: 32px 18px 28px;
        border-radius: 12px;
    }

    .contact-cta-title {
        font-size: 1.35rem;
    }

    .contact-cta-buttons {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 480px;
    }

    .cta-btn {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 16px 18px;
        min-height: 72px;
        gap: 14px;
    }

    .cta-btn-icon-wrap {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
    }

    .cta-btn-icon-wrap svg {
        width: 22px;
        height: 22px;
    }

    .cta-btn-text {
        align-items: flex-start;
    }

    .cta-btn-phone .cta-btn-main {
        font-size: 1.35rem;
    }

    .cta-btn-main {
        font-size: 1.12rem;
    }

    .cta-btn-sub {
        font-size: 0.74rem;
    }

    .cta-btn-note {
        font-size: 0.7rem;
        margin-top: 2px;
    }
}

/* ==========================================================================
   18. 補助金・助成金・税制ページ（Fukui-energysaving_index / column_campaign_* /
       jyoseikin_ono2025 / zeh_index / zeisei_index）
   施主は「補助金がいくら・いつまでもらえるか」を最優先に情報収集するため、
   金額と期限を最初に大きく見せ、スマホでも一目で分かる設計にしている。
   ========================================================================== */

/* --- ページ冒頭：もらえる金額を一目で伝えるヒーロー --- */
.subsidy-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, #14509e 100%);
    border-radius: 16px;
    padding: 28px 24px 24px;
    margin: 22px 0 24px;
    color: #ffffff;
    text-align: center;
}

.subsidy-hero-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.88;
}

.subsidy-hero-amount {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 44px;
    font-weight: 900;
    line-height: 1.25;
    margin: 6px 0 4px;
    word-break: keep-all;
}

.subsidy-hero-amount .subsidy-hero-unit {
    font-size: 20px;
    font-weight: 800;
    margin-left: 4px;
}

.subsidy-hero-note {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    opacity: 0.92;
}

/* --- 申請期限・予算上限の警告バナー --- */
.subsidy-deadline {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #fff7ed;
    border: 1px solid #fdba74;
    border-left: 5px solid #ea580c;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 26px;
}

.subsidy-deadline-icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
}

.subsidy-deadline-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text-color);
}

.subsidy-deadline-text strong {
    color: #c2410c;
}

/* --- 最新情報への誘導（補助金・税制ページ共通。年度で内容が変わる制度に必須） --- */
.subsidy-latest-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #fef2f2, #fff7ed);
    border: 2px solid #dc2626;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 28px;
}

.subsidy-latest-info-icon {
    flex-shrink: 0;
    font-size: 28px;
    line-height: 1;
}

.subsidy-latest-info-text {
    flex: 1 1 240px;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-color);
}

.subsidy-latest-info-text strong {
    color: #dc2626;
    font-size: 15px;
}

.subsidy-latest-info-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #dc2626;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.subsidy-latest-info-btn:hover {
    background-color: #b91c1c;
}

@media (max-width: 600px) {
    .subsidy-latest-info {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .subsidy-latest-info-btn {
        justify-content: center;
    }
}

/* --- 金額カードグリッド（世帯タイプ別・事業別の金額を並べる） --- */
.subsidy-amount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 20px 0 26px;
}

.subsidy-amount-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    border-radius: 12px;
    padding: 16px 12px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.subsidy-amount-card-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.subsidy-amount-card-value {
    display: block;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--primary-color);
    word-break: keep-all;
}

.subsidy-amount-card-unit {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin-left: 2px;
}

/* --- 汎用データテーブル（列数可変。900px以下はカードに積み替える） --- */
.subsidy-table-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 20px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    background-color: var(--bg-white);
}

.subsidy-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.subsidy-table th {
    background-color: var(--primary-color);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    padding: 12px 16px;
    text-wrap: balance;
}

.subsidy-table td {
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.75;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    vertical-align: top;
    text-wrap: pretty;
}

.subsidy-table tr:last-child td {
    border-bottom: none;
}

.subsidy-table tbody tr:nth-child(even) {
    background-color: var(--bg-light);
}

.subsidy-table td:first-child,
.subsidy-table th:first-child {
    font-weight: 800;
    color: var(--primary-color);
    background-color: rgba(11, 52, 113, .03);
    white-space: nowrap;
}

/* セル内にリンクがある場合だけ、下線で「クリックできる」ことを示す
   （a{color:inherit} の既定のままだと、データと見分けがつかない。
   気密調査LIVEの実績一覧など、事例詳細へのリンクを持つ表のための対応）。
   リンクを持たない一般のデータ表には一切影響しない。 */
.subsidy-table td a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(11, 52, 113, .35);
}

/* --- アクセント版：画像の代わりにモダンな配色で表を目立たせる（保険・保証ページ用） --- */
.subsidy-table-container--accent {
    border: none;
    padding: 3px;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    box-shadow: var(--shadow-md);
}

.subsidy-table--accent {
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--bg-white);
}

.subsidy-table--accent th {
    background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
}

.subsidy-table--accent tbody tr:nth-child(even) {
    background-color: rgba(74, 144, 226, .06);
}

/* --- 書類名など1列目に長文が入る表用の列幅固定（改修ルール28と同じ問題の再発防止）。
   table-layout: auto のままだと、長い理由説明を含む1列目だけが幅の大半を占め、
   2〜3列目が数十pxまで潰れてしまう（loan-deduction.html で実際に発生）。
   3列表（書類名／入手先／補足）を想定し、60%/20%/20%に固定する。 */
.subsidy-table--fixed3 {
    table-layout: fixed;
}

/* 1列目は「短いラベル」用の white-space: nowrap が既定でかかっているため、
   書類名＋長文の理由を1セルに収めるこの表では打ち消して折り返す */
.subsidy-table--fixed3 td:first-child {
    white-space: normal;
}

.subsidy-table--fixed3 th:nth-child(1),
.subsidy-table--fixed3 td:nth-child(1) {
    width: 60%;
}

.subsidy-table--fixed3 th:nth-child(2),
.subsidy-table--fixed3 td:nth-child(2),
.subsidy-table--fixed3 th:nth-child(3),
.subsidy-table--fixed3 td:nth-child(3) {
    width: 20%;
}

@media (max-width: 700px) {
    .subsidy-table--fixed3,
    .subsidy-table--fixed3 th,
    .subsidy-table--fixed3 td {
        table-layout: auto;
        width: auto;
    }
}

/* --- 参加団体・会員企業などのバッジ一覧（画像の代わりにチップで見せる） --- */
.member-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}

.member-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-color);
    text-wrap: nowrap;
}

.member-badge--self {
    background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 480px) {
    .member-badge {
        padding: 9px 14px;
        font-size: 13px;
    }
}

/* --- 活動記録・更新履歴などのリンク一覧（プレーンな箇条書きの代わりに、
   ジャンル別アイコン付きのカードリストで見せる） --- */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 24px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.activity-item:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.activity-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
}

.activity-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.activity-date {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-hover, var(--accent-color));
    letter-spacing: .02em;
}

.activity-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.5;
    text-wrap: balance;
}

.activity-arrow {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--border-color);
    transition: var(--transition-smooth);
}

.activity-item:hover .activity-arrow {
    color: var(--accent-color);
    transform: translateX(3px);
}

@media (max-width: 480px) {
    .activity-item {
        padding: 12px 14px;
        gap: 10px;
    }

    .activity-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .activity-title {
        font-size: 13px;
    }
}

/* --- 要件チェックリスト --- */
.subsidy-requirements {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subsidy-requirements li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.75;
    padding: 12px 16px;
    background-color: var(--bg-light);
    border-radius: 10px;
    color: var(--text-color);
}

.subsidy-requirements li::before {
    content: "✓";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 申請の流れ（ステップ） --- */
.subsidy-flow {
    counter-reset: subsidy-step;
    display: flex;
    flex-direction: column;
    margin: 20px 0 26px;
}

.subsidy-flow-step {
    position: relative;
    padding: 0 0 26px 44px;
    border-left: 2px solid var(--border-color);
}

.subsidy-flow-step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.subsidy-flow-step::before {
    counter-increment: subsidy-step;
    content: counter(subsidy-step);
    position: absolute;
    left: -15px;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #ffffff;
    font-weight: 900;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subsidy-flow-title {
    margin: 2px 0 4px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--primary-color);
}

.subsidy-flow-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--text-color);
}

/* --- 複数の補助金・制度をカードで一覧するグリッド（jyoseikin_ono2025向け） --- */
.subsidy-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 8px;
}

.subsidy-list-card {
    padding: 18px 18px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
}

.subsidy-list-card-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--primary-color);
}

.subsidy-list-card-amount {
    display: inline-block;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #c2410c;
    margin-bottom: 8px;
}

.subsidy-list-card-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-color);
}

a.subsidy-list-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.subsidy-list-card:hover,
a.subsidy-list-card:focus-visible {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

a.subsidy-list-card .subsidy-list-card-title,
a.subsidy-list-card .subsidy-list-card-text {
    display: block;
}

a.subsidy-list-card .subsidy-list-card-title {
    text-wrap: balance;
}

.subsidy-program {
    scroll-margin-top: 90px;
}

@media (max-width: 900px) {
    .subsidy-table thead {
        display: none;
    }

    .subsidy-table,
    .subsidy-table tbody,
    .subsidy-table tr,
    .subsidy-table td {
        display: block;
        width: 100% !important;
    }

    .subsidy-table tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
    }

    .subsidy-table tr:last-child {
        border-bottom: none;
    }

    .subsidy-table td {
        padding: 4px 0;
        border-bottom: none;
    }

    .subsidy-table td:first-child {
        padding-bottom: 6px;
        background: none;
    }

    .subsidy-table td:empty {
        display: none;
    }

    .subsidy-table td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
    }

    .subsidy-table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted);
    }
}

@media (max-width: 600px) {
    .subsidy-hero {
        padding: 22px 18px 20px;
    }

    .subsidy-hero-amount {
        font-size: 32px;
    }

    .subsidy-amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subsidy-list-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 目次（セクション数が多いページ向け。jyoseikin_ono2025・home-energy-saving2026） --- */
.subsidy-toc {
    margin: 26px 0 8px;
    padding: 20px 22px 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-light);
}

.subsidy-toc-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
}

.subsidy-toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.subsidy-toc-list a {
    display: block;
    padding: 9px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    background-color: var(--bg-white);
    transition: border-color .2s, color .2s;
}

.subsidy-toc-list a:hover,
.subsidy-toc-list a:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.subsidy-toc-count {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

/* --- 分野の大見出し（複数分野・複数制度で構成されるページの区切り） --- */
.subsidy-category {
    scroll-margin-top: 90px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 40px 0 16px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary-color);
}

.subsidy-category:first-of-type {
    margin-top: 30px;
}

.subsidy-category-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.subsidy-category-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
}

/* --- 制度カード（1つの補助金・助成金ごとに折りたたみ表示） --- */
.subsidy-program {
    margin: 0 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    scroll-margin-top: 90px;
}

.subsidy-program summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.subsidy-program summary::-webkit-details-marker {
    display: none;
}

.subsidy-program summary::after {
    content: "▼";
    flex-shrink: 0;
    font-size: 10px;
    color: var(--accent-color);
    transition: transform .2s;
    margin-left: 4px;
}

.subsidy-program[open] summary::after {
    transform: rotate(180deg);
}

.subsidy-program-name {
    flex: 1;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
    text-wrap: balance;
}

.subsidy-program-icon {
    flex-shrink: 0;
    width: 32px;
    height: auto;
    border-radius: 4px;
}

.subsidy-program-amount {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    color: #c2410c;
    word-break: keep-all;
    text-align: right;
}

.subsidy-program-body {
    padding: 4px 18px 18px;
    border-top: 1px solid var(--border-color);
}

.subsidy-program-body .subsidy-table-container {
    margin: 14px auto 6px;
    box-shadow: none;
    border-color: var(--border-color);
}

.subsidy-program-body p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text-color);
}

.subsidy-program-subhead {
    margin: 16px 0 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
}

@media (max-width: 600px) {
    .subsidy-toc-list {
        grid-template-columns: 1fr;
    }

    .subsidy-program summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .subsidy-program-amount {
        text-align: left;
    }

    .subsidy-category-title {
        font-size: 16px;
    }
}

/* ============================================================
   19. 住まいづくりスケジュール専用コンポーネント（.schedule-*）
   sumai_schedule.html 専用。設計工程9段階＋工事工程5段階の
   タイムライン表示と、無料/有償の境界を示すマイルストーン帯。
   ============================================================ */

.schedule-group-title {
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
    font-size: 19px;
    font-weight: 800;
    color: var(--primary-color);
}

.schedule-group-title:first-of-type {
    margin-top: 24px;
}

.schedule-timeline {
    margin: 0;
}

.schedule-step {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 0 0 30px;
}

.schedule-step::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 46px;
    bottom: 2px;
    width: 2px;
    background-color: var(--border-color);
}

.schedule-step:last-child::before {
    display: none;
}

.schedule-step-num {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.schedule-step-body {
    flex: 1;
    min-width: 0;
    padding-top: 6px;
}

.schedule-step-title {
    margin: 0 0 10px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--primary-color);
}

.schedule-step-content {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.schedule-step-list {
    flex: 1 1 220px;
    min-width: 180px;
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--text-color);
}

.schedule-step-list li {
    margin-bottom: 2px;
}

.schedule-step-note {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.schedule-step-note a {
    color: var(--accent-color);
    text-decoration: underline;
}

.schedule-step-photos {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    width: 148px;
}

.schedule-step-photos.schedule-step-photos--multi {
    width: 100%;
    max-width: 420px;
}

a.schedule-shot {
    display: block;
    flex: 1 1 0;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg-light);
    line-height: 0;
}

a.schedule-shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

a.schedule-shot.schedule-shot--doc img {
    object-fit: cover;
    object-position: top center;
}

/* 6.参考見積提示の直後：ここまで無料／ここから有償の境界 */
.schedule-milestone {
    margin: -10px 0 30px 62px;
    padding: 14px 18px;
    background-color: rgba(234, 88, 12, 0.07);
    border: 1.5px dashed #ea580c;
    border-radius: 10px;
}

.schedule-milestone-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 11px;
    background-color: #ea580c;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 12px;
    letter-spacing: 0.3px;
}

.schedule-milestone-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-color);
}

/* 設計工程→工事工程の区切り（旧ページのイラストをそのまま採用） */
.schedule-divider {
    text-align: center;
    margin: 8px 0 8px;
}

.schedule-divider img {
    width: auto;
    max-width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .schedule-step {
        gap: 12px;
    }

    .schedule-step-num {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .schedule-step::before {
        left: 17px;
        top: 38px;
    }

    .schedule-step-content {
        flex-direction: column;
    }

    .schedule-step-photos {
        width: 100%;
        max-width: 220px;
    }

    .schedule-step-photos.schedule-step-photos--multi {
        max-width: 100%;
    }

    .schedule-milestone {
        margin-left: 0;
    }
}

/* ============================================================
   20. 保険・保証ページ専用コンポーネント（.subsidy-program-* の拡張）
   hokenhosyou_*.html 専用。制度カード（.subsidy-program）の中に置く
   小さな挿絵・パンフレット画像用。
   ============================================================ */

/* 制度カードの中の小さな挿絵（右寄せ、旧デザインの class="right" 相当） */
.subsidy-program-illust {
    float: right;
    width: 110px;
    max-width: 30%;
    height: auto;
    margin: 0 0 10px 14px;
    border-radius: 8px;
}

/* 制度カードの中のパンフレット表紙画像（中央寄せ、クリックでPDFを開く） */
.subsidy-program-pamphlet {
    margin: 14px 0;
    text-align: center;
}

.subsidy-program-pamphlet img {
    max-width: 200px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.subsidy-program-pamphlet-link {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--accent-color);
    text-decoration: underline;
}

/* 表・図解画像用（パンフレット表紙より横幅を広く見せたいとき） */
.subsidy-program-pamphlet--wide img {
    max-width: 600px;
}

@media (max-width: 480px) {
    .subsidy-program-illust {
        width: 84px;
    }
}



/* ==========================================================================
   21. 動画ライブラリ（video-library.html）専用コンポーネント
   YouTube公式チャンネルの動画349本をグループ別に絞り込んで一覧表示する。
   カードの器（.cs-video 系）は14章の事例詳細ページと共用し、
   グループ選択チップとカード内のメタ表示だけをここに追加する。
   ========================================================================== */
.vlib-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 20px;
}

.vlib-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--bg-white);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
    word-break: keep-all;
    transition: var(--transition-smooth);
}

.vlib-group-chip:hover,
.vlib-group-chip:focus-visible {
    border-color: var(--accent-color);
    color: var(--primary-color);
}

.vlib-group-chip.is-active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-white);
}

.vlib-group-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    opacity: .75;
}

.vlib-result-count {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* 施工事例カードの動画バッジから来た場合の絞り込み通知 */
.vlib-case-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background-color: rgba(74, 144, 226, .08);
    border: 1px solid rgba(74, 144, 226, .3);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--text-color);
}

.vlib-case-notice-reset {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.vlib-case-notice-reset:hover {
    background-color: var(--accent-color);
    color: var(--bg-white);
}

.vlib-result-count span {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: var(--primary-color);
}

/* カード内：カテゴリラベル・推定公開年 */
.vlib-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
}

.vlib-card-cat {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--accent-hover);
    background-color: rgba(74, 144, 226, 0.08);
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.vlib-card-year {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* サムネイルの左上に重ねる「ショート」バッジ */
.vlib-card-short {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 9px;
    background-color: rgba(0, 0, 0, .65);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 20px;
    letter-spacing: .02em;
}

@media (max-width: 600px) {
    .vlib-groups {
        gap: 8px;
        margin: 14px 0 16px;
    }
    .vlib-group-chip {
        padding: 8px 14px;
        font-size: 12.5px;
    }
}

/* ==========================================================================
   22. ふくい健康省エネ住宅推進協議会 追加ビジュアル強化
   （Fukui-energysaving_index.html 専用。社長ご指摘「あっさりしすぎて目が
   留まらない」「同じ色合いで、アイコンを使った方が良いのでは」に対応。
   文章・数値・リンク先は一切変更せず、見出しへのアイコン付与、
   数値の cs-keyfacts 前出し、アドバイザーのカード化、活動記録アイコンの
   配色分けだけで単調さを解消する）
   ========================================================================== */

/* --- 22-1. 見出し用アイコンバッジ（.cs-h2 本体は無改造。ラッパーで拡張） --- */
.zone-icon-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 46px 0 6px;
}

.zone-icon-heading .cs-h2 {
    margin: 0;
    padding-left: 0;
    border-left: none;
}

.zone-icon-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: var(--shadow-sm);
}

.zone-icon-badge--accent {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
}

@media (max-width: 768px) {
    .zone-icon-heading {
        margin-top: 38px;
        gap: 8px;
    }
    .zone-icon-badge {
        width: 30px;
        height: 30px;
        font-size: 14px;
        border-radius: 9px;
    }
}

/* --- 22-2. アドバイザー紹介カード（顔写真が無いため、学術系アイコンで人物性を出す） --- */
.advisor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0 8px;
}

.advisor-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px 18px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.advisor-card--accent {
    border-top-color: var(--accent-color);
}

.advisor-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.advisor-card--accent .advisor-avatar {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
}

.advisor-body {
    min-width: 0;
}

.advisor-role {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(11, 52, 113, .08);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 800;
    word-break: keep-all;
}

.advisor-name {
    margin: 0 0 4px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--text-color);
}

.advisor-name-suffix {
    margin-left: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.advisor-affil {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .advisor-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 22-3. 室温18℃セクション：cs-keyfacts を断熱ペア／耐震ペアの2色に分ける --- */
.cs-keyfacts--duo .cs-kf:nth-child(n+3) {
    border-top-color: #ea580c;
}

.cs-keyfacts--duo .cs-kf:nth-child(n+3) .cs-kf-value {
    color: #c2410c;
}

/* --- 22-4. 断熱等級表：推奨ゾーン（等級6〜7）の行を淡くハイライト
   （.grade-table でこのページ限定にスコープし、他ページで .subsidy-table--accent
   を使うときに影響しないようにする。既存の縞模様ルールより確実に勝つよう
   tbody を含めた詳細度にしてある） --- */
.grade-table tbody tr.is-recommended td,
.grade-table tbody tr.is-recommended td:first-child {
    background-color: rgba(74, 144, 226, .12);
}

/* --- 22-5. 活動記録：ジャンルごとにアイコンの色を変える
   （既存 .activity-icon の既定色＝アイスブルーはそのまま「比較実験」に使う。
   ここでは解説記事・視察・プレス報道の3種だけ色を追加する） --- */
.activity-icon--guide {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.activity-icon--visit {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.activity-icon--press {
    background: linear-gradient(135deg, #ea580c, #c2410c);
}

/* ==========================================================================
   23. ふくい健康省エネ住宅推進協議会 活動記録の個別記事ページ
   （Fukui-energysaving_20240403.html 等。旧ページの見出しバナー画像（文字だけの
   帯画像）を、cs-h2見出しとは別の言い回しで小さく添えるための装飾クラス。
   1点も省略しないという方針を守りつつ、見出しテキストと画像の文言をあえて
   変えることで純粋な二重表記にならないようにしている） */
.cs-section-banner {
    display: block;
    max-width: 420px;
    width: 100%;
    height: auto;
    margin: 2px 0 18px;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   24. ブログ一覧ページ（blog_index.html）専用スタイル
   .hub-card-btn（丸ボタン）を本文中で単独・中央寄せに使うためのラッパー */
.blog-cta-wrap {
    text-align: center;
    margin: 22px 0;
}

/* ==========================================================================
   25. 過去の見学会アーカイブ（kengaku-kako_index.html）専用スタイル
   チラシ画像は縦横比がまちまち（432px〜893px）なので、.cs-gallery の
   aspect-ratio:3/2 切り抜きは使わず、object-fit:contain で全体を見せる。 */
.kengaku-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 4px 0 2px;
}

.kengaku-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--bg-white);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

.kengaku-card:hover,
.kengaku-card:focus-visible {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-sm);
}

.kengaku-card-imgwrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: var(--bg-light);
}

.kengaku-card-imgwrap img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
}

.kengaku-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    padding: 12px 14px 14px;
}

.kengaku-card-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    word-break: keep-all;
}

.kengaku-card-title {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--text-color);
    text-wrap: balance;
}

.kengaku-card-link {
    margin-top: auto;
    padding-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-color);
    word-break: keep-all;
}

.kengaku-card:hover .kengaku-card-link,
.kengaku-card:focus-visible .kengaku-card-link {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .kengaku-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .kengaku-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   26. お客様のご感想アーカイブ 統計インサイト（施主様アンケート円グラフ）
   customer-feedback_index.html 専用。44件のアンケート原文（自由記述・5段階評価の
   設問名）を実際に読み、繰り返し登場する話題を集計したドーナツグラフ。
   カテゴリカル配色は dataviz スキルの検証済みデフォルト順（blue/orange/aqua/
   yellow/magenta）を使用し、下位6項目は「その他」としてグレーにまとめている
   （ドーナツ/円グラフは6区分までが目安のため）。詳しい内訳は表で全項目を示す。
   ========================================================================== */
.fb-insight {
    --fb-s1: #2a78d6;
    --fb-s2: #eb6834;
    --fb-s3: #1baf7a;
    --fb-s4: #eda100;
    --fb-s5: #e87ba4;
    --fb-other: #c3c2b7;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 28px 36px;
    align-items: center;
    margin: 22px 0 26px;
    padding: 26px 28px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.fb-insight-chart {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}

.fb-insight-chart svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.fb-donut-track {
    fill: none;
    stroke: var(--bg-light);
    stroke-width: 26;
}

.fb-donut-seg {
    fill: none;
    stroke-width: 26;
    stroke-linecap: butt;
}

.fb-donut-seg--1 { stroke: var(--fb-s1); }
.fb-donut-seg--2 { stroke: var(--fb-s2); }
.fb-donut-seg--3 { stroke: var(--fb-s3); }
.fb-donut-seg--4 { stroke: var(--fb-s4); }
.fb-donut-seg--5 { stroke: var(--fb-s5); }
.fb-donut-seg--other { stroke: var(--fb-other); }

.fb-insight-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.fb-insight-center-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.1;
}

.fb-insight-center-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
}

.fb-insight-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.fb-insight-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-legend-swatch {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    border-radius: 4px;
}

.fb-legend-swatch--1 { background-color: var(--fb-s1); }
.fb-legend-swatch--2 { background-color: var(--fb-s2); }
.fb-legend-swatch--3 { background-color: var(--fb-s3); }
.fb-legend-swatch--4 { background-color: var(--fb-s4); }
.fb-legend-swatch--5 { background-color: var(--fb-s5); }
.fb-legend-swatch--other { background-color: var(--fb-other); }

.fb-legend-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-color);
    text-wrap: pretty;
}

.fb-legend-value {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-muted);
    word-break: keep-all;
}

.fb-insight-note {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}

.fb-insight-detail {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.fb-insight-detail summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
}

.fb-insight-detail .subsidy-table-container {
    margin-top: 14px;
}

@media (max-width: 700px) {
    .fb-insight {
        grid-template-columns: 1fr;
        padding: 22px 18px;
    }
}


/* ============================================================
   過去のお知らせアーカイブ（old_news.html）
   ============================================================ */

.news-archive-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 32px;
    padding: 18px 20px;
    border: 1px solid #cbd5e1;
    border-left: 5px solid var(--primary-color);
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.news-archive-note-icon {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.4;
}

.news-archive-note-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-color);
    text-wrap: pretty;
}

.news-year-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.news-year-nav a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--bg-white);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    word-break: keep-all;
    transition: all 0.2s ease;
}

.news-year-nav a:hover,
.news-year-nav a:focus-visible {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-white);
}

.news-list {
    display: grid;
    gap: 18px;
    margin: 0 0 48px;
}

.news-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-white);
}

.news-item--nothumb {
    grid-template-columns: minmax(0, 1fr);
}

.news-item-thumb {
    width: 120px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--bg-light);
}

.news-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.news-item-date {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--bg-light);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    word-break: keep-all;
}

.news-item-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--text-color);
    text-wrap: pretty;
}

.news-item-body a {
    color: var(--primary-color);
    font-weight: 700;
    display: inline-block;
    text-wrap: balance;
}

.news-simple-list {
    margin: 0 0 48px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-color);
}

.news-simple-item {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color);
}

.news-simple-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    word-break: keep-all;
}

.news-simple-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-color);
    text-wrap: pretty;
}

.news-simple-body a {
    color: var(--primary-color);
    font-weight: 700;
    display: inline-block;
    text-wrap: balance;
}

@media (max-width: 768px) {
    .news-item {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }
    .news-item--nothumb {
        grid-template-columns: minmax(0, 1fr);
    }
    .news-item-thumb {
        width: 90px;
    }
    .news-simple-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

.cs-body a,
.cs-note a,
.cs-cap a,
.faq-a a,
.faq-src a,
.detail-intro-text a,
.company-section-desc a,
main li a {
    display: inline-block;
    text-wrap: balance;
}

.staff-card-meta-item {
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    html,
    .cs-carousel-track {
        scroll-behavior: auto;
    }
}

.subsidy-table tbody th[scope="row"] {
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.75;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    text-align: left;
    text-wrap: pretty;
    font-weight: 800;
    color: var(--primary-color);
    background: rgba(11, 52, 113, .03);
    white-space: nowrap;
}

.subsidy-table tr:last-child th[scope="row"] {
    border-bottom: none;
}

@media (max-width: 900px) {
    .subsidy-table tbody th[scope="row"] {
        display: block;
        width: 100% !important;
        padding: 4px 0 6px;
        border-bottom: none;
        background: none;
    }
}

.cs-related-card {
    text-wrap: balance;
}

.subsidy-table td,
.subsidy-table th {
    text-wrap: balance;
}

.subsidy-table--wrap td:first-child {
    white-space: normal;
}