/* ==========================================================================
   あまや製材 - デザインシステム & プレミアム・スタイルシート
    カラー：ブルー（#0b3471） ＋ プラチナシルバー ＋ アイスブルー
    特徴：信頼性と先進性を両立させたプレミアムスタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 変数定義 & ベース設定
   -------------------------------------------------------------------------- */
:root {
    --primary-color: #0b3471;    /* メインカラー（ネイビーブルー）：信頼・伝統・高級感 */
    --secondary-color: #1f4068;  /* ディープブルー：知的・先進性 */
    --accent-color: #4a90e2;     /* アイスブルー：クリーン・先進性能・高い技術力 */
    --accent-hover: #357abd;     /* アイスブルーのホバー時 */
    --silver-color: #8d99ae;     /* プラチナシルバー：洗練・高品質・金属的な強さ */
    --silver-light: #e2e8f0;     /* 薄いプラチナグレー：境界線・背景 */
    --bg-light: #f4f6f9;         /* クールホワイト：すっきりとした清潔感のある背景 */
    --bg-white: #ffffff;
    --text-color: #2b2b2b;       /* ソフトブラック：可読性の高い文字色 */
    --text-muted: #666666;
    --border-color: #dbe2ef;     /* 境界線：薄いグレー */
    --line-color: #1c8731;       /* LINEブランドカラー（白文字とのコントラスト比4.5:1以上を確保するため、元の色相・彩度を保ったまま暗くした値） */
    --youtube-color: #ff0000;    /* YouTubeカラー */
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(11, 52, 113, 0.06);
    --shadow-lg: 0 16px 40px rgba(11, 52, 113, 0.12);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* hidden 属性は必ず効かせる。
   ブラウザ既定の [hidden]{display:none} は、
   .wa-card{display:flex} のようなクラス指定に負けてしまい
   「JSで hidden にしたのに消えない」不具合になるため、!important で確実に隠す。 */
[hidden] {
    display: none !important;
}

/* ==========================================================================
 * 行末に1文字だけ取り残さない（2026-09-04）
 *
 * 「嶺北地域であれば施工可能で／す」のように最後の行が1文字になると、
 * 読み手に雑な印象を与える。text-wrap: pretty は最終行が極端に短くならないよう
 * 行分割を調整する（非対応ブラウザでは無視されるだけ）。
 * それでも残る場合は、文言そのものを短くするか言い換えて直す。
 * 検査は .claude/layout-check.js の orphans。
 * ========================================================================== */
/* 長い段落：最終行が極端に短くならないようにする */
p, li, dd, dt,
figcaption, caption, blockquote,
.cs-point-text, .cs-related-text, .cs-cap, .cs-lead, .cs-body, .cs-note,
.hub-card-lead, .hub-card-text, .hub-card-note,
.re-window-text, .re-note, .re-empty-text,
.faq-a, .fb-card-summary, .fbd-a, .fbd-notice p,
.spec-table-point {
    text-wrap: pretty;
}

/* 見出し・短いラベル：行の長さをそろえる（最後の行だけ1〜2文字になるのを防ぐ） */
h1, h2, h3, h4, h5, h6,
.cs-kf-label, .cs-kf-sub, .cs-point-title, .cs-related-title,
.faq-q, .qa-toc-list a, .re-window-title, .re-card-title,
.page-contact-cta-title, .contact-faq-title, .works-bridge-title,
.hub-card-title, .fb-card-title, .fbd-q, .re-empty-title, .re-license-title,
.dropdown-menu li a, .mobile-menu li a,
.spec-table-detail, .mail-panel-subject,
.btn-pill-primary span, .btn-pill-outline span,
.btn-main-text, .cep-label, .cep-desc, .tab-btn span, .wa-chip, .fb-chip,
.wa-more, .works-card-title, .wa-card-title,
.footer-links a, .footer-links li, .footer-contact li,
.wa-card h3, .wa-card h3 a, .works-card-title a, .wa-points li,
.hub-card-points li, .faq-list li, .re-license-list li,
.advisor-affil {
    text-wrap: balance;
}

/* .cs-list li は「短いラベル」ではなく長さが不揃いな箇条書き文（ミニ段落）のため、
   balance を外し、上の「長い段落」グループと同じ扱いに戻す（2026-09-06）。
   balance だと「下回らな／い」のように、括弧やことばの区切りとは無関係な位置で
   折り返してしまい、右側に余白を残したまま行数だけ増えることがあった。 */
.cs-list li {
    text-wrap: pretty;
}

/* 表のラベル列は折り返さない（表自体は横スクロールできる） */
.spec-table-label {
    white-space: nowrap;
}

/* 日本語の禁則処理・中途半端な改行防止 */
body {
    font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-white);
    line-height: 1.8;
    overflow-x: hidden;
    line-break: strict;          /* 句読点や閉じ括弧を行頭に置かない、開き括弧を行末に置かない */
    word-break: normal;          /* 標準的な日本語改行 */
    overflow-wrap: break-word;   /* 長い英単語の突き抜け防止 */
}

h1, h2, h3, h4, h5, h6 {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

/* 改行させたくない言葉やフレーズを囲む共通クラス */
.ib {
    display: inline-block;
    white-space: nowrap;        /* このスパン内では絶対に改行させず、カタマリで扱います */
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

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

/* 共通レイアウトクラス */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-center { text-align: center; }
.sp-only { display: none !important; }
.sp-hidden { display: block !important; }
.pc-hidden { display: none !important; }
.pc-only { display: inline !important; }

/* ボタンコンポーネント */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    color: var(--bg-white) !important;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
    opacity: 0.95;
}

.btn-primary-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--accent-color);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    display: inline-block;
}

.btn-primary-outline:hover {
    background-color: var(--accent-color);
    color: var(--bg-white) !important;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   2. ヘッダー (二段構造：上段は白背景ロゴ、下段はブルー背景ナビ)
   -------------------------------------------------------------------------- */
header {
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    width: 100%;
}

/* 上段：ロゴとコンタクト情報 */
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    background-color: var(--bg-white);
}

.logo img {
    height: 52px;
    width: auto;
}

.logo a:hover {
    opacity: 0.9;
}

.header-info {
    text-align: right;
    font-size: 13px;
    color: var(--text-muted);
}

.header-phone {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    display: block;
}

.header-phone a:hover {
    text-decoration: underline;
}

.header-hours {
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

/* 下段：グローバルメニューナビゲーション帯 (Sticky固定) */
.pc-nav-bar {
    background-color: var(--primary-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    border-bottom: 3px solid var(--accent-color);
}

/* ナビリストのフレックス崩れ防止 */
.pc-nav-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.pc-nav-list > li {
    position: relative;
    margin: 0;
}

.pc-nav-list > li > a,
.pc-nav-list > li > .dropdown-trigger {
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 700;
    padding: 16px 12px;
    display: block;
    letter-spacing: 0.5px;
    text-align: center;
    /* ナビの項目は絶対に折り返さない。
       834px で「トップページ」が「トップペー／ジ」と割れていた（2026-09-04 修正） */
    white-space: nowrap;
}

.pc-nav-list > li > a:hover,
.pc-nav-list > li > .dropdown-trigger:hover {
    color: var(--accent-color);
    background-color: rgba(255, 255, 255, 0.05);
}

/* お問い合わせボタン */
.pc-nav-list > li > a.nav-contact-btn {
    background-color: var(--accent-color);
    color: var(--bg-white);
    padding: 16px 20px;
    font-weight: 800;
}

.pc-nav-list > li > a.nav-contact-btn:hover {
    background-color: var(--accent-hover);
    color: var(--bg-white);
}

/* 各種情報メニューの矢印 (CSS描画、ホバーで回転するマイクロインタラクション) */
.arrow-icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-top: 5px solid rgba(255, 255, 255, 0.85);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    transition: var(--transition-smooth);
}

.dropdown:hover .arrow-icon,
.dropdown:focus-within .arrow-icon {
    transform: rotate(180deg);
    border-top-color: var(--accent-color);
}

/* ドロップダウンメニューの吹き出し型スライドアコーディオン */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--primary-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 6px 6px;
    min-width: 260px;
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    z-index: 100;
    list-style: none;
    text-align: left;
}

/* 吹き出しの三角形 (ツノ) */
.dropdown-menu::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 32px; /* 「各種情報」の真下に位置調整 */
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent var(--primary-color) transparent;
}

.dropdown-menu li {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-menu li a {
    display: block !important;
    width: 100%;
    padding: 12px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-align: left !important;
    writing-mode: horizontal-tb !important;
    box-sizing: border-box;
}

.dropdown-menu li:last-child a {
    border-bottom: none !important;
}

.dropdown-menu li a:hover {
    color: var(--accent-color) !important;
    background-color: rgba(255, 255, 255, 0.05);
}

/* 上からふわっとスライドフェードインするアニメーション */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    display: block;
    animation: fadeInSlideUp 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* スマホ用メニュー切り替えボタン */
.menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 1001;
}

.hamburger {
    width: 24px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition-smooth);
    border-radius: 2px;
}

.menu-label {
    color: var(--primary-color);
    font-size: 9px;
    margin-top: 3px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* スマホメニュー開閉状態 */
.menu-toggle.is-active .hamburger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.menu-toggle.is-active .hamburger span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active .hamburger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.menu-toggle.is-active .hamburger span {
    background-color: #fff;
}
.menu-toggle.is-active .menu-label {
    color: #fff;
}

/* スマホ用モバイルメニュー */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--primary-color);
    z-index: 999;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    padding: 80px 24px 100px;
}

.mobile-menu.is-active {
    right: 0;
    display: block;
}

.menu-category {
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 700;
    border-left: 3px solid var(--accent-color);
    padding-left: 8px;
    margin: 20px 0 10px;
    letter-spacing: 1px;
}

.mobile-menu ul {
    list-style: none;
}

.mobile-menu li a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 8px;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-menu li a:hover {
    color: var(--accent-color);
}

.menu-close-btn {
    text-align: center;
    color: var(--accent-color);
    font-weight: 700;
    padding: 15px;
    margin-top: 30px;
    border: 1px dashed var(--accent-color);
    border-radius: 4px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. スマホ専用CEPクイックリンク
   -------------------------------------------------------------------------- */
.cep-quick-links {
    display: none; /* デフォルトPC非表示 */
    background-color: var(--bg-light);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.cep-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 16px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
}

/* スクロールバー非表示 */
.cep-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.cep-chip {
    background-color: var(--bg-white);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: inline-block;
}

.cep-chip:active, .cep-chip:hover {
    background-color: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   4. ヒーローエリア
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: linear-gradient(180deg, rgba(11, 30, 54, 0.4) 0%, rgba(11, 30, 54, 0.8) 100%),
                url('img/top/new/2026/1.jpg') no-repeat center center/cover;
    min-height: 520px;
    display: flex;
    align-items: center;
    color: var(--bg-white);
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.hero-tag {
    display: inline-block;
    color: #e2eeff;              /* より明るく視認性の高いアイス白ブルー */
    background-color: rgba(11, 30, 54, 0.6); /* 濃いネイビーの半透明座布団で視認性確保 */
    border: 1px solid rgba(74, 144, 226, 0.4); /* アイスブルーの繊細なボーダー */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hero h1 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.hero-lead {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
}

.hero-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-cta-secondary {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bg-white) !important;
    border: 2px solid rgba(255, 255, 255, 0.7);
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: var(--transition-smooth);
}

.hero-cta-secondary:hover {
    background-color: var(--bg-white);
    color: var(--primary-color) !important;
    border-color: var(--bg-white);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   5. メインコンテンツ & セクション共通
   -------------------------------------------------------------------------- */
main {
    background-color: var(--bg-light);
}

section {
    padding: 80px 0;
}

.section-subtitle {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-color);
    letter-spacing: 3px;
    display: block;
    margin-bottom: 8px;
}

.section-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1.4;
}

.section-title-left {
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1.4;
}

.section-line {
    width: 40px;
    height: 3px;
    background-color: var(--accent-color);
    margin: 15px auto 35px;
    border-radius: 2px;
}

.section-desc {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 8px;
}

.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 35px;
}

.section-header-flex .section-title-left {
    margin-top: 5px;
}

.link-arrow {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
}

.link-arrow:hover {
    color: var(--primary-color);
    transform: translateX(4px);
}

/* CONCEPT */
.concept-lead-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--text-color);
    font-weight: 500;
    line-height: 2.0;
    text-align: justify;
}

/* --------------------------------------------------------------------------
   6. 3つの強み (基本性能) - 基本性能カードデザイン (超目立つ立体バージョン)
   -------------------------------------------------------------------------- */
.performance {
    background-color: var(--bg-light); /* セクション全体の立体感を際立たせるために背景は薄いグレーに */
}

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

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

.performance-card:hover {
    transform: translateY(-12px); /* 大きく浮き上がるように */
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

/* カード上部の写真エリア */
.perf-image-wrap {
    /* 高さ固定だと画面幅により切り取られ方が変わり見切れる。
       写真の縦横比（3:2）に枠を合わせて、切り抜きを起こさない。 */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
}

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

.performance-card:hover .perf-image-wrap img {
    transform: scale(1.08);
}

/* 画像の上のテロップバッジ */
.perf-image-wrap .perf-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background-color: rgba(11, 52, 113, 0.9);
    color: var(--bg-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

/* カードコンテンツエリア */
.perf-card-content {
    padding: 30px 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.perf-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.perf-icon {
    font-size: 32px;
}

.perf-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.3;
}

.perf-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--silver-color);
}

/* 実績・仕様の数値強調 */
.huge-stats-wrapper {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.huge-stat-box {
    flex: 1;
    background-color: rgba(74, 144, 226, 0.08); /* さわやかなアイスブルーの薄い背景 */
    border-left: 3px solid var(--accent-color);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
}

.huge-num {
    display: block;
    font-size: 32px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1.1;
    font-family: 'Inter', sans-serif;
}

.huge-unit {
    display: block;
    font-size: 9px;
    font-weight: 800;
    color: var(--secondary-color);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

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

/* 仕様詳細部分 */
.perf-spec {
    border-top: 1px solid var(--silver-light);
    padding-top: 15px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12.5px;
}

.spec-row:last-child {
    margin-bottom: 0;
}

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

.perf-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1.5px solid var(--primary-color);
    border-radius: 8px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: none;
    text-wrap: balance;
    transition: background-color .2s, color .2s;
}

.perf-cta:hover,
.perf-cta:focus-visible {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* ナビ・フッターの「気密調査LIVE」に付ける NEW バッジ */
.nav-new-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background-color: #ea580c;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 10px;
    letter-spacing: 0.3px;
    vertical-align: middle;
    line-height: 1.6;
}

.spec-value {
    font-weight: 800;
    color: var(--secondary-color);
}

/* --------------------------------------------------------------------------
   7. カルーセルスライダー (CSS Native Swipe)
   -------------------------------------------------------------------------- */
.carousel-container {
    overflow: hidden;
    position: relative;
    margin: 0 -24px;
    padding: 0 24px;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 24px;
    padding: 10px 0 30px;
}

/* スクロールバーのデザイン */
.carousel-track::-webkit-scrollbar {
    height: 6px;
}

.carousel-track::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.carousel-track::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
}

/* 各種カード共通スナップ設定 */
.carousel-card, .news-card, .useful-card {
    scroll-snap-align: start;
    flex: 0 0 320px;
}

/* 7-1. WORKS (施工事例) カード */
.carousel-card {
    background-color: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

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

.card-img-wrap {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
}

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

.carousel-card:hover .card-img-wrap img {
    transform: scale(1.06);
}

.card-info {
    padding: 20px;
}

.card-tag {
    background-color: var(--bg-light);
    color: var(--accent-color);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
}

.card-info h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.5;
}

/* 7-2. NEWS (お知らせ) カード */
.news-card {
    background-color: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

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

.news-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-badge-wrap {
    padding: 15px 20px 0;
}

.badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.badge-info {
    background-color: rgba(11, 52, 113, 0.08);
    color: var(--primary-color);
}

.badge-event {
    background-color: rgba(74, 144, 226, 0.12);
    color: var(--accent-hover);
}

.badge-youtube {
    background-color: rgba(255, 0, 0, 0.1);
    color: var(--youtube-color);
}

.news-body {
    padding: 15px 20px 20px;
    flex-grow: 1;
}

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

.news-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.5;
    margin-bottom: 8px;
}

.news-excerpt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* 7-3. USEFUL INFO (お役立ち情報) カード */
.useful-info {
    background-color: var(--bg-white);
}

.useful-card {
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 30px 24px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.useful-icon {
    font-size: 36px;
    margin-bottom: 15px;
}

.useful-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1.4;
}

.useful-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.useful-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    display: block;
    text-align: right;
}

.useful-card:hover .useful-btn {
    color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   13. SNS・公式メディア相互流入セクション
   -------------------------------------------------------------------------- */
.sns-media-section {
    background-color: var(--bg-white);
}

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

.sns-card {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 35px 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* 各SNSホバー時のカード境界線・背景色のインタラクション */
.sns-card.youtube-card:hover {
    border-color: #ff0000;
    box-shadow: 0 10px 25px rgba(255, 0, 0, 0.08);
}
.sns-card.instagram-card:hover {
    border-color: #d6249f;
    box-shadow: 0 10px 25px rgba(214, 36, 159, 0.08);
}
.sns-card.google-biz-card:hover {
    border-color: #4285F4;
    box-shadow: 0 10px 25px rgba(66, 133, 244, 0.08);
}
.sns-card.blog-card:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
}

.sns-card:hover {
    transform: translateY(-8px);
    background-color: var(--bg-white);
}

.sns-icon-wrap {
    margin-bottom: 18px;
    width: 64px;
    height: 64px;
    background-color: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

/* SVGアイコン自体のサイズとセンタリング調整、ホバーアニメーション */
.sns-icon-wrap svg {
    width: 36px;
    height: 36px;
    display: block;
    transition: var(--transition-smooth);
}

/* ホバー時にアイコンが少し浮き上がり、背景色が変わる */
.sns-card.youtube-card:hover .sns-icon-wrap {
    background-color: rgba(255, 0, 0, 0.05);
    transform: scale(1.1);
}
.sns-card.instagram-card:hover .sns-icon-wrap {
    background-color: rgba(214, 36, 159, 0.05);
    transform: scale(1.1);
}
.sns-card.google-biz-card:hover .sns-icon-wrap {
    background-color: rgba(66, 133, 244, 0.05);
    transform: scale(1.1);
}
.sns-card.blog-card:hover .sns-icon-wrap {
    background-color: rgba(74, 144, 226, 0.08);
    transform: scale(1.1);
}

/* ブログの家アイコン（stroke描画）のホバーカラー変化 */
.sns-card.blog-card:hover .sns-icon-wrap svg {
    stroke: var(--accent-color);
}

.sns-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
}

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

.sns-action {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
    transition: var(--transition-smooth);
}

/* カードホバー時のボタン色変化 */
.sns-card.youtube-card:hover .sns-action { color: #ff0000; }
.sns-card.instagram-card:hover .sns-action { color: #d6249f; }
.sns-card.google-biz-card:hover .sns-action { color: #4285F4; }
.sns-card.blog-card:hover .sns-action { color: var(--primary-color); }

/* --------------------------------------------------------------------------
   8. フッター
   -------------------------------------------------------------------------- */
footer {
    background-color: var(--primary-color);
    color: rgba(255, 255, 255, 0.8);
    padding-top: 60px;
    border-top: 4px solid var(--accent-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 50px;
}

.footer-logo {
    height: 48px;
    width: auto;
    margin-bottom: 20px;
    background-color: var(--bg-white);
    padding: 5px;
    border-radius: 4px;
    display: inline-block;
}

.footer-address {
    font-size: 13px;
    line-height: 1.8;
}

/* フッター用SNSアイコンリンク */
.footer-social-links {
    display: flex;
    gap: 12px;
    margin: 15px 0 20px;
}

.social-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-icon svg {
    transition: var(--transition-smooth);
}

/* 各公式SNSのホバー色変更 */
.social-icon.youtube:hover {
    background-color: #ff0000;
    border-color: #ff0000;
    transform: scale(1.1);
}
.social-icon.instagram:hover {
    background: linear-gradient(45deg, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-color: transparent;
    transform: scale(1.1);
}
.social-icon.google-biz:hover {
    background-color: #4285F4;
    border-color: #4285F4;
    transform: scale(1.1);
}
.social-icon.blog:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.1);
}

/* ブログのホバー時にSVGのstrokeを白にする */
.social-icon.blog:hover svg {
    stroke: #ffffff;
}

/* フッターZEHビルダーマーク（保存・ドラッグ不可にするため<img>を使わず背景画像で表示） */
.footer-zeh {
    margin: 0 0 20px;
}

.footer-zeh-mark {
    display: block;
    width: 132px;
    height: 159px;
    background: var(--bg-white) url("img/top/b_ZEH02.png") center / 116px auto no-repeat;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.footer-zeh-mark:hover,
.footer-zeh-mark:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px var(--accent-color);
}

/* フッターGoogleマップ埋め込み */
.footer-map {
    margin-top: 15px;
    width: 100%;
}

.footer-map iframe {
    display: block;
    width: 100%;
    height: 160px;
    border: 0;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.footer-links h3,
.footer-links h4 {
    color: var(--accent-color);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    border-left: 2px solid var(--accent-color);
    padding-left: 10px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-size: 13px;
}

.footer-links a:hover {
    color: var(--accent-color);
}

.copyright-bar {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    font-size: 12px;
}

.copyright-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.privacy-link {
    color: rgba(255, 255, 255, 0.6);
}

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

/* --------------------------------------------------------------------------
   9. PC用フローティングメニュー (画面右端固定)
   -------------------------------------------------------------------------- */
.pc-floating-menu {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.float-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ホバー時に左から滑り出るCEPテキスト */
.float-text {
    position: absolute;
    right: 55px;
    background-color: var(--primary-color);
    color: var(--bg-white);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.float-item:hover .float-text {
    opacity: 1;
    transform: translateX(0);
}

.float-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-white);
    font-size: 0px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.phone-btn {
    background-color: var(--secondary-color);
}
.line-btn {
    background-color: var(--line-color);
}
.mail-btn {
    background-color: var(--accent-color);
}

.float-item:hover .float-btn {
    transform: scale(1.1);
}

.float-btn::after {
    font-size: 18px;
}
.phone-btn::after { content: "📞"; }
.line-btn::after { content: "💬"; }
.mail-btn::after { content: "✉️"; }

/* --------------------------------------------------------------------------
   10. スマホ用フローティングメニュー (下部固定)
   -------------------------------------------------------------------------- */
.sp-floating-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(11, 30, 54, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    z-index: 998;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
}

.sp-float-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    color: var(--bg-white);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-float-btn:last-child {
    border-right: none;
}

.btn-micro-text {
    font-size: 9px;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 2px;
}

.btn-main-text {
    font-size: 13px;
    font-weight: 700;
}

.sp-line-btn {
    background-color: var(--line-color);
}

.sp-line-btn .btn-micro-text {
    color: #fff;
}

/* --------------------------------------------------------------------------
   11. アニメーションキーフレーム
   -------------------------------------------------------------------------- */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   15. 横スクロール案内ガイド
   -------------------------------------------------------------------------- */
.carousel-scroll-guide {
    display: none;
}
.cep-guide-text {
    display: none;
}

/* --------------------------------------------------------------------------
   14. ふくいエコはぴねす住宅 アピールバナー
   -------------------------------------------------------------------------- */
.fukui-ecohappy-section {
    padding: 40px 0 50px 0; /* 余白を広げて、コンセプトセクションとの境界を美しく保つ */
    background-color: var(--bg-light);
}

.fukui-ecohappy-banner {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%);
    border: 1px solid rgba(74, 144, 226, 0.22);
    border-radius: 16px; /* 角を大きめにしてプレミアムで柔らかいデザインに */
    padding: 30px 40px;
    gap: 30px;
    box-shadow: 0 10px 30px rgba(11, 52, 113, 0.05); /* 高級感のある柔らかい影 */
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

/* カードの背景にアクセントとなる淡い光彩を追加 */
.fukui-ecohappy-banner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.fukui-ecohappy-banner:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(11, 52, 113, 0.2);
}

.ecohappy-badge-wrap {
    flex-shrink: 0;
}

.ecohappy-badge {
    display: inline-block;
    background: linear-gradient(135deg, #c5a059 0%, #edd8a6 100%);
    color: #4a3c1e;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(197, 160, 89, 0.2);
    border: 1px solid rgba(197, 160, 89, 0.3);
    white-space: nowrap;
}

.ecohappy-body {
    flex-grow: 1;
}

.ecohappy-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 6px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.4;
}

.ecohappy-text {
    font-size: 13.5px;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
}

.ecohappy-links {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.ecohappy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 6px;
    transition: var(--transition-smooth);
    text-decoration: none;
    white-space: nowrap;
}

.ecohappy-btn-primary {
    background-color: var(--primary-color);
    color: var(--bg-white);
    border: 1px solid var(--primary-color);
}

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

.ecohappy-btn-secondary {
    background-color: var(--bg-white);
    color: var(--primary-color);
    border: 1px solid rgba(11, 52, 113, 0.3);
}

.ecohappy-btn-secondary:hover {
    background-color: var(--bg-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.external-link-icon {
    flex-shrink: 0;
}

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

/* タブレット (横幅 1024px以下) */
@media (max-width: 1024px) {
    /* nowrap でも9項目が収まるように詰める（834px で検証済み） */
    .pc-nav-list > li > a,
    .pc-nav-list > li > .dropdown-trigger {
        font-size: 12px;
        padding: 16px 5px;
        letter-spacing: 0;
    }

    .pc-nav-list > li > a.nav-contact-btn {
        padding: 16px 12px;
    }
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
    .performance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .huge-num {
        font-size: 28px;
    }
    .sns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* スマホ (横幅 768px以下) */
@media (max-width: 768px) {
    .sp-only { display: block !important; }
    .sp-hidden { display: none !important; }
    .pc-hidden { display: flex !important; }
    .pc-nav-bar { display: none !important; }
    .menu-toggle { display: flex !important; }
    .pc-only { display: none !important; }
    
    header {
        position: sticky;
        top: 0;
        box-shadow: var(--shadow-sm);
    }
    .header-top {
        padding: 12px 16px;
    }
    .logo img {
        height: 38px;
    }

    .cep-quick-links {
        display: block;
    }

    section {
        padding: 50px 0;
    }

    .hero {
        min-height: 380px;
        padding: 32px 0;
    }
    .hero-tag {
        font-size: 11px;
        padding: 4px 12px;
        margin-bottom: 12px;
        letter-spacing: 1px;
    }
    .hero h1 {
        font-size: 28px;
    }
    .hero-lead {
        font-size: 15px;
        margin-bottom: 20px;
    }
    .btn-primary {
        padding: 12px 24px;
        font-size: 14px;
    }
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }
    .hero-cta-secondary {
        padding: 10px 22px;
        font-size: 13.5px;
    }

    .section-title {
        font-size: 22px;
    }
    .section-title-left {
        font-size: 22px;
    }
    .concept-lead-text {
        font-size: 14px;
        line-height: 1.8;
    }

    /* 3つの強み (スマホ版) */
    .performance-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .performance-card {
        border-radius: 8px;
    }
    .perf-card-content {
        padding: 24px 20px;
    }
    .huge-num {
        font-size: 26px;
    }

    /* カルーセル */
    .carousel-track {
        gap: 16px;
    }
    .carousel-card, .news-card, .useful-card {
        flex: 0 0 280px;
    }

    /* SNS・メディア相互流入 (スマホ版) */
    .sns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .sns-card {
        padding: 25px 12px;
    }
    .sns-icon-wrap {
        width: 52px;
        height: 52px;
        margin-bottom: 10px;
    }
    .sns-icon-wrap svg {
        width: 28px;
        height: 28px;
    }
    .sns-card h3 {
        font-size: 15px;
    }
    .sns-desc {
        font-size: 11.5px;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    .sns-action {
        font-size: 11.5px;
    }

    /* フッター */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 30px;
    }
    /* リンク一覧は縦一列だとスクロール量が非常に多くなるため、2列に組んで長さを半分にする
       （SEO・内部リンクとしてはリンク数はそのまま。表示だけをコンパクトにする） */
    .footer-links ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 16px;
    }
    .footer-links li {
        margin-bottom: 8px;
    }
    .copyright-bar-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    /* 下部フローティングメニュー分の余白をボディ下部に追加 */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    /* ふくいエコはぴねす住宅 アピールバナー (スマホ用) */
    .fukui-ecohappy-section {
        padding: 30px 0 35px 0; /* スマホ時もコンセプトセクションとの余白を適切に確保 */
    }

    .fukui-ecohappy-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 15px; /* 左右の余白を少し詰めて表示幅を最大化 */
        gap: 18px;
        border-radius: 12px;
        border-left: none; /* 左太線を廃止し、統一された枠線に */
    }

    .ecohappy-badge {
        font-size: 12px;
        padding: 4px 10px;
    }

    .ecohappy-title {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .ecohappy-text {
        font-size: 12px;
        line-height: 1.6;
    }

    .ecohappy-links {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .ecohappy-btn {
        width: 100%;
        padding: 12px;
        font-size: 13px;
    }

    /* 横スクロール案内ガイド (スマホ用表示) */
    .carousel-scroll-guide {
        display: inline-block;
        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-top: 6px;
    }
    
    .carousel-scroll-guide.text-center {
        margin: 0 auto 20px auto;
        width: max-content;
    }

    .cep-guide-text {
        display: block;
        font-size: 10px;
        font-weight: 800;
        color: var(--accent-color);
        text-align: center;
        margin-bottom: 6px;
        letter-spacing: 0.5px;
    }
}

/* ==========================================================================
   14. トップページ新築施主様喜びの声ピックアップセクション
   施主の顔写真は使わない方針（5-8章）のため、写真の代わりに
   「新築／リフォーム」の色分けバッジと引用符アイコンでカードにメリハリを付ける。
   ========================================================================== */
.feedback-pickup-section {
    padding: 80px 0;
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.review-trust-badge {
    display: inline-block;
    margin-top: 14px;
    padding: 7px 16px;
    background-color: var(--bg-white);
    border: 1.5px solid var(--primary-color);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary-color);
}

.feedback-top-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 24px;
    align-items: stretch;
}

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

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

.review-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 26px 0;
}

.review-type-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.review-type-badge--new {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--bg-white);
}

.review-type-badge--reform {
    background-color: var(--silver-light);
    color: #5b6675;
}

.review-quote-mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 44px;
    line-height: 0.6;
    color: var(--border-color);
    user-select: none;
}

.review-text {
    flex-grow: 1;
    margin: 16px 26px 24px;
    font-size: 15px;
    line-height: 1.85;
    font-weight: 600;
    color: var(--text-color);
    text-wrap: pretty;
}

.review-card-foot {
    padding: 18px 26px 26px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-light);
}

.review-location-family {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
    word-break: keep-all;
}

.review-spec-tag {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--primary-color);
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.review-source-link {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-hover);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 144, 226, 0.4);
    padding-bottom: 1px;
    transition: var(--transition-smooth);
}

.review-source-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* お施主様アンケート統計インサイト（要約版）。詳しい11項目の円グラフ・内訳表は
   customer-feedback_index.html にあり、ここでは上位3項目だけを見せて誘導する。
   2026-09-09：周囲の .feedback-pickup-section と背景色が同じ（--bg-light）で
   埋没し、読み飛ばされやすいとのご指摘（社長）を受け、白背景＋上部グラデーション
   アクセントバー＋シャドウでカードとして独立させ、CTAもボタン化した。 */
.feedback-insight-mini {
    position: relative;
    margin: 0 0 32px;
    padding: 28px 28px 26px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.feedback-insight-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
}

.feedback-insight-mini-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
}

.feedback-insight-mini-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 19px;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    box-shadow: var(--shadow-sm);
}

.feedback-insight-mini-lead {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.5;
}

.feedback-insight-mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 22px;
}

.feedback-insight-mini-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px 10px 14px;
    background-color: var(--bg-light);
    border-radius: 30px;
}

.feedback-insight-mini-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.feedback-insight-mini-dot--1 { background-color: #2a78d6; }
.feedback-insight-mini-dot--2 { background-color: #eb6834; }
.feedback-insight-mini-dot--3 { background-color: #1baf7a; }

.feedback-insight-mini-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
}

.feedback-insight-mini-value {
    font-size: 16px;
    font-weight: 900;
    color: var(--primary-color);
    word-break: keep-all;
}

.feedback-insight-mini-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--bg-white);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.feedback-insight-mini-link:hover {
    color: var(--bg-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* タブレット (横幅 1024px以下) */
@media (max-width: 1024px) {
    .review-quote-mark {
        font-size: 38px;
    }
}

/* スマホ対応（レスポンシブ） */
@media (max-width: 768px) {
    .feedback-pickup-section {
        padding: 50px 0;
    }

    .feedback-top-reviews-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .review-card-head {
        padding: 20px 22px 0;
    }

    .review-text {
        margin: 14px 22px 20px;
        font-size: 14.5px;
    }

    .review-card-foot {
        padding: 16px 22px 22px;
    }

    .feedback-insight-mini {
        padding: 22px 18px 20px;
    }

    .feedback-insight-mini-icon {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .feedback-insight-mini-lead {
        font-size: 14.5px;
    }

    .feedback-insight-mini-link {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   10. 2026.09 社長指摘対応で追加したスタイル
       - 3つの基本仕様「維持管理」カードの文字型スタッツ
       - お知らせの新バッジ（すまいコラム／新築事例／申請期限）
       （お施主様の声カードのデザインは14章に統合済み）
   ========================================================================== */

/* 数値ではなく短い語句を入れるスタッツ枠。
   .huge-num は 32px / Inter のため「ホウ酸防蟻」等の和文5文字がはみ出す。 */
.huge-num--text {
    font-size: 19px;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: -0.02em;
    padding-top: 5px;
    padding-bottom: 3px;
}

/* 「維持管理」カード本文からシロアリ対策コラムへの内部リンク */
.perf-desc a {
    color: var(--accent-hover);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.perf-desc a:hover {
    color: var(--primary-color);
}

/* お知らせカルーセルの追加バッジ */
.news-badge-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.badge-column {
    background-color: rgba(15, 122, 90, 0.10);
    color: #0f7a5a;
}

.badge-works {
    background-color: rgba(11, 52, 113, 0.10);
    color: var(--primary-color);
}

.badge-deadline {
    background-color: #d93025;
    color: #ffffff;
}

/* タブレット (横幅 1024px以下) */
@media (max-width: 1024px) {
    .huge-num--text {
        font-size: 17px;
    }
}

/* スマホ (横幅 768px以下) */
@media (max-width: 768px) {
    .huge-num--text {
        font-size: 18px;
    }
}

/* お知らせカード：サムネイルの無いカードでも下端が締まるように CTA を配置 */
.news-body {
    display: flex;
    flex-direction: column;
}

.news-more {
    display: block;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-hover);
    letter-spacing: .02em;
}

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

/* ==========================================================================
   11. 2026.09 追加：HTML内に直書きされていたCSSの外部化とアクセシビリティ
   ========================================================================== */

.section-head-lg { margin-bottom: 50px; }
.section-head-md { margin-bottom: 40px; }
.section-cta     { margin-top: 50px; text-align: center; }
.carousel-footer-link { margin-top: 20px; }
.reviews-footer-link  { margin-top: 25px; }

.section-subtitle.text-center,
.section-title.text-center,
.carousel-scroll-guide.text-center {
    display: block;
}

/* メニューを button 化したことによる既定装飾の打ち消し */
.menu-toggle,
.dropdown-trigger {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.dropdown-trigger {
    font-family: inherit;
}

.menu-close-btn {
    display: block;
    width: 100%;
    background: none;
    font: inherit;
}

/* キーボード操作時のフォーカス可視化（サイト全体で未定義だった） */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* スキップリンク（WCAG 2.4.1）。ふだんは画面外に置き、キーボードでフォーカスされたときだけ表示する */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 2000;
    background-color: var(--primary-color);
    color: var(--bg-white) !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus-visible {
    top: 12px;
}

.pc-nav-list > li > a:focus-visible,
.pc-nav-list > li > .dropdown-trigger:focus-visible,
.dropdown-menu li a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

/* ヒーロー：h1 に地域・商材キーワードを内包させたことによる調整（見た目は従来どおり） */
.hero h1 .hero-tag {
    display: inline-block;
}

.hero-h1-main {
    display: block;
}

/* ==========================================================================
   12. 折り返し崩れの防止
       日本語は任意の位置で改行されるため、短いラベルが語中で割れないようにする。
       （例：「LINEで友だち追加・相談する」が「…相／談する」と割れていた）
   ========================================================================== */

.huge-num,
.huge-unit,
.spec-label,
.spec-value,
.perf-badge,
.card-tag,
.review-spec-tag,
.review-location-family,
.badge,
.news-more,
.link-arrow,
.btn-primary,
.btn-primary-outline,
.cep-chip {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* グローバルナビの「お問い合わせ」は短いので必ず1行に保つ */
.nav-contact-btn {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. EXPLORE MORE（あまや製材をもっと知る）3×3クイックリンクグリッド
   グローバルナビ・フッターにしかなかった主要9コンテンツを、写真付きの
   カードとして本文にも配置する。スマホは初期6枚→「もっと見る」で9枚。
   -------------------------------------------------------------------------- */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 40px 0 0;
}

.explore-card {
    display: block;
    background-color: var(--bg-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    border: 1px solid var(--border-color);
}

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

.explore-card .card-img-wrap {
    aspect-ratio: 3 / 2;
    background-color: var(--bg-light);
}

.explore-card .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* イラスト系画像（写真ではないもの）は切り取らず全体を見せる */
.explore-card .card-img-wrap.explore-img--contain img {
    object-fit: scale-down;
    padding: 24px;
}

/* 実写真が無い項目用：バッジ風のプレースホルダー */
.explore-badge-visual {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.explore-badge-visual .explore-badge-icon {
    font-size: 44px;
}

.explore-card .card-info {
    padding: 18px 20px 20px;
}

.explore-card .card-info h3 {
    font-size: 15px;
    margin-bottom: 6px;
    /* text-wrap: balance は行内に <span class="nav-new-badge"> 等のインライン要素があると
       行数の見積もりを誤り、右に余白を残したまま不要な行を増やすことがある（2026-09-06実測）。
       このタイルは通常の折り返しの方が自然に収まるため balance を打ち消す */
    text-wrap: wrap;
}

.explore-card .card-info p {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

.explore-more-wrap {
    margin-top: 28px;
}

@media (max-width: 900px) {
    .explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .explore-grid {
        gap: 12px;
    }
    .explore-card .card-info {
        padding: 12px 14px 14px;
    }
    .explore-card .card-info p {
        display: none;
    }
    /* スマホは最初6枚のみ。「もっと見る」クリックで .is-expanded が付き残り3枚も表示 */
    .explore-grid .sp-explore-more {
        display: none;
    }
    .explore-grid.is-expanded .sp-explore-more {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   15. CASE FINDER（3つの質問で見つかる、あなたにぴったりの家）
   トップページの遊び心のある事例検索フローチャート。データと絞り込みロジックは
   case-finder.js に内蔵（estate_index.html 22件 + new-construction-example_index.html
   40件 = 62件の新築事例）。JS無効時は #case-finder に hidden を付けたままにし、
   noscript の案内リンクだけを表示する。
   -------------------------------------------------------------------------- */
.finder-section {
    background-color: var(--bg-light);
}

.finder-widget {
    max-width: 760px;
    margin: 0 auto;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 40px 44px 44px;
}

.finder-noscript {
    max-width: 760px;
    margin: 0 auto;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 30px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.finder-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.finder-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-light);
    border: 2px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 800;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: var(--transition-smooth);
}

.finder-step-dot.is-active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-white);
}

.finder-step-dot.is-done {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-white);
}

.finder-step-line {
    width: 36px;
    height: 2px;
    background-color: var(--border-color);
    flex-shrink: 0;
}

.finder-question {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 24px;
    text-wrap: balance;
}

.finder-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.finder-opt {
    background-color: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
    word-break: keep-all;
    transition: var(--transition-smooth);
}

.finder-opt:hover,
.finder-opt:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-2px);
}

.finder-opt--any {
    border-style: dashed;
    color: var(--text-muted);
}

.finder-back {
    display: block;
    margin: 28px auto 0;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

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

.finder-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.finder-result-head-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.finder-back--inline {
    margin: 0;
    font-size: 12.5px;
}

.finder-result-count {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-color);
}

.finder-result-count span {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    color: var(--accent-color);
}

.finder-restart {
    background: none;
    border: 1.5px solid var(--border-color);
    border-radius: 50px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.finder-restart:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.finder-result-note {
    font-size: 12.5px;
    color: var(--text-muted);
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
}

.finder-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 20px 0 28px;
}

.finder-card {
    display: block;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

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

.finder-card-img {
    aspect-ratio: 3 / 2;
    background-color: var(--bg-light);
}

.finder-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.finder-card-info {
    padding: 12px 14px 16px;
}

.finder-card-tsubo {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-color);
    margin-bottom: 4px;
}

.finder-card-info h3 {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 6px;
    color: var(--primary-color);
    text-wrap: pretty;
}

.finder-card-spec {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.finder-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.finder-card-tags span {
    background-color: var(--bg-light);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.finder-result-cta {
    background-color: var(--bg-light);
    border-radius: 12px;
    padding: 22px 24px;
    text-align: center;
    margin-bottom: 24px;
}

.finder-result-cta-text {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 14px;
    text-wrap: balance;
}

.finder-result-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.finder-result-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 200px;
    padding: 13px 22px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.finder-result-cta-btn--line {
    background-color: var(--line-color);
    color: var(--bg-white);
}

.finder-result-cta-btn--line:hover {
    filter: brightness(0.94);
}

.finder-result-cta-btn--mail {
    background-color: var(--bg-white);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
}

.finder-result-cta-btn--mail:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

@media (max-width: 600px) {
    .finder-result-cta {
        padding: 18px 16px;
    }
    .finder-result-cta-btn {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 834px) {
    .finder-widget {
        padding: 32px 24px 36px;
    }
    .finder-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .finder-widget {
        padding: 26px 16px 30px;
        border-radius: 12px;
    }
    .finder-question {
        font-size: 16.5px;
    }
    .finder-opt {
        padding: 10px 16px;
        font-size: 13.5px;
    }
    .finder-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .finder-card-info {
        padding: 8px 10px 10px;
    }
    .finder-card-info h3 {
        font-size: 12.5px;
    }
}

@media (max-width: 390px) {
    .finder-cards {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   トップ末尾クロージング帯
   -------------------------------------------------------------------------- */
.top-closing-cta {
    padding: 70px 0;
    background-color: var(--primary-color);
}

.top-closing-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.top-closing-cta-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--bg-white);
    margin-bottom: 18px;
    text-wrap: balance;
}

.top-closing-cta-text {
    font-size: 15px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 32px;
    text-wrap: pretty;
}

.top-closing-cta-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    max-width: 480px;
    margin: 0 auto;
}

.top-closing-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.top-closing-cta-btn--line {
    grid-column: 1 / -1;
    order: -1;
    background-color: var(--line-color);
    color: var(--bg-white);
    font-size: 17px;
    box-shadow: var(--shadow-lg);
}

.top-closing-cta-btn--line:hover {
    filter: brightness(0.94);
    transform: translateY(-2px);
}

.top-closing-cta-btn--tel,
.top-closing-cta-btn--mail {
    background-color: var(--bg-white);
    color: var(--primary-color);
}

.top-closing-cta-btn--tel:hover,
.top-closing-cta-btn--mail:hover {
    background-color: var(--accent-color);
    color: var(--bg-white);
    transform: translateY(-2px);
}

.top-closing-cta-note {
    margin-top: 24px;
    font-size: 13.5px;
}

.top-closing-cta-note a {
    color: rgba(255, 255, 255, 0.86);
}

.top-closing-cta-note a:hover {
    color: var(--bg-white);
}

@media (max-width: 600px) {
    .top-closing-cta {
        padding: 48px 0;
    }
    .top-closing-cta-title {
        font-size: 21px;
    }
    .top-closing-cta-buttons {
        grid-template-columns: 1fr;
    }
    .top-closing-cta-btn {
        min-height: 54px;
        font-size: 14.5px;
    }
    .top-closing-cta-btn--line {
        font-size: 15.5px;
    }
}

/* --------------------------------------------------------------------------
   UA値・C値の平易翻訳（性能値の意味を一言で補足）
   -------------------------------------------------------------------------- */
.spec-plain-note {
    display: table;
    font-size: 13px;
    color: var(--text-muted);
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 8px 16px;
    margin: 10px 0 0;
}

.spec-plain-note.text-center {
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   パンフレット請求セクション（index.html）
   ============================================================ */

.pamphlet-section {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    padding: 64px 0;
}

.pamphlet-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 36px 40px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-top: 5px solid var(--primary-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
}

.pamphlet-lead {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 14px;
    border-radius: 999px;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    word-break: keep-all;
}

.pamphlet-title {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.5;
    color: var(--primary-color);
    text-wrap: balance;
}

.pamphlet-text {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.95;
    color: var(--text-color);
    text-wrap: pretty;
}

.pamphlet-contents {
    margin: 0;
    padding: 22px 24px;
    list-style: none;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px dashed #94a3b8;
    border-radius: 12px;
    counter-reset: pamphlet;
}

.pamphlet-contents li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 38px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--text-color);
    counter-increment: pamphlet;
}

.pamphlet-contents li:last-child {
    margin-bottom: 0;
}

.pamphlet-contents li::before {
    content: counter(pamphlet);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.pamphlet-actions {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
}

.pamphlet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 15.5px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    word-break: keep-all;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pamphlet-btn:hover,
.pamphlet-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

.pamphlet-btn--line {
    background-color: var(--line-color);
    color: #ffffff;
}

.pamphlet-btn--mail {
    background-color: #ea580c;
    color: #ffffff;
}

.pamphlet-btn--tel {
    background-color: #ffffff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.pamphlet-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-muted);
    text-wrap: pretty;
}

@media (max-width: 900px) {
    .pamphlet-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding: 28px 22px;
    }
    .pamphlet-title {
        font-size: 22px;
    }
}

@media (max-width: 560px) {
    .pamphlet-section {
        padding: 44px 0;
    }
    .pamphlet-contents {
        padding: 18px 18px;
    }
}

.pamphlet-contents-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

main p a,
main li a,
main dd a {
    display: inline-block;
    text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}