@charset "utf-8";
/*
Theme Name: LIQUID INSIGHT Child MURASAWA
Theme URI: https://lqd.jp/wp/
Description: LIQUID PRESS THEME
Author: LIQUID DESIGN
Author URI: https://lqd.jp/
Template: liquid-insight
Version: 0.00.63
*/

/* =========================================================================
   住宅展示場6会場 共通ベーススタイル（最小構成）
   - 幕張CSSは撤去済み（必要なら幕張リポジトリ/git履歴を参照）
   - 本番デザインは 8/10 入稿の .ai を P3 で反映する。ここは骨組みの整形のみ
   - 会場カラーは functions/venue_settings.php が wp_head で
     --hmv-primary / --hmv-accent を注入する（以下はフォールバック値）
   ========================================================================= */

:root {
    --hmv-primary: #0b308e;
    --hmv-accent:  #ffbf00;
    --hmv-counsel: #4690dc; /* WEB相談CTAの青（赤バリアントでは #0d8cff を注入） */
    --hmv-text:    #333;
    --hmv-muted:   #777;
    --hmv-border:  #e5e5e5;
    --hmv-bg:      #fcfcfc;

    /* フォント（入稿デザイン対応。読み込みは functions.php の Google Fonts。docs/design/font-spec.md）
       ・base = 本文（Noto Sans JP）。Web未取得時は端末の游ゴシック/ヒラギノにフォールバック
       ・head = 見出し（Zen Kaku Gothic New。入稿の New Rodin EB の代替）
       ・en   = 英字ディスプレイ（Passion One。数字・ラベル用。Staatliches も別途利用可） */
    --hmv-font-base: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    --hmv-font-head: "Zen Kaku Gothic New", var(--hmv-font-base);
    --hmv-font-en:   "Passion One", var(--hmv-font-base);
}

/* ---- ベース ---- */
*, *::before, *::after { box-sizing: border-box; }

/* 全幅演出(calc(50% - 50vw))は縦スクロールバー幅の分だけはみ出すため、横方向は切る
   （clipはスクロールコンテナを作らないので position:sticky を壊さない。非対応環境はhidden） */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
    background-color: var(--hmv-bg);
    color: var(--hmv-text);
    line-height: 1.8;
    /* 本文フォント（親テーマの游ゴシック指定を上書き）。docs/design/font-spec.md */
    font-family: var(--hmv-font-base);
}

/* 見出しは Zen Kaku Gothic New（入稿 New Rodin EB の代替）。
   見出し要素と主要な見出しクラスに適用。本文は body の base のまま。 */
h1, h2, h3, h4, h5, h6,
.hmv-h-bar, .hmv-h-center, .hmv-page-band,
.hmv-archive h1, .hmv-house-list h1,
.hmv-hero-title h1, .hmv-video-title {
    font-family: var(--hmv-font-head);
}

/* 英字ディスプレイ（大きな数字・英字ラベル）用ユーティリティ。テンプレートで付与して使う。 */
.hmv-font-en { font-family: var(--hmv-font-en); }
.hmv-font-staat { font-family: "Staatliches", var(--hmv-font-base); }

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

a { color: var(--hmv-primary); }
a:hover { opacity: .85; }

/* ボタンのフォーカスリングを出さない（2026-08-12 指示・フロント全ページ一律）。
   出所は Bootstrap reboot の button:focus{outline:5px auto -webkit-focus-ring-color}。
   要素セレクタなのでクラスを問わず全 <button> に当たり、タップ/クリック後も黒い角丸枠が残っていた。
   :focus-visible（キーボード操作時のみ真）は除外するため、Tab操作での現在位置は従来どおり分かる。
   個別クラスを列挙せず button に当てているのは、JSで動的生成されるボタン
   （外観写真スライダーのドット .bx-pager / TOPICSのドット .hmv-topics-dots）や
   今後追加されるボタンも取りこぼさないため。
   この style.css はフロントのみ読み込まれる（管理画面は親テーマの cy_admin_common.css）ので
   wp-admin には影響しない。詳細度 (0,2,1) で button:focus (0,1,1) に勝つ。 */
button:focus:not(:focus-visible) { outline: none; }

/* ---- レイアウト（骨組み用の簡易コンテナ） ---- */
.hmv-archive,
.hmv-single,
.hmv-house-list,
.hmv-house-detail {
    max-width: 1000px;
    margin: 24px auto 48px;
    padding: 0 16px;
}
/* 記事詳細（news / info）は PC で右サイドバー（最近の投稿）を持つため広げる（2026-09-11）。
   1000px では本文カラムが約630pxしかなく、タイトルが窮屈・サイドバーを右へ寄せてほしいとの要望。 */
.hmv-single { max-width: 1200px; }
/* SPのみ、ページタイトル帯があるページの上余白を消す（2026-08-17 指示。PCは従来どおり24px）。
   帯（.hmv-page-band / .hmv-house-list h1）自身は margin-top を持たず、ヘッダーとの間に見えていた
   白い余白は上の margin:24px（コンテナ）がマージン相殺で出していたもの。
   帯が無いページ（404・棟が見つからない場合・page-topics）はパンくずや本文がヘッダーに
   直付きになるため対象から外す必要がある → 帯の有無で出し分ける。
   .hmv-house-list は常に帯（h1）を持つので :has() は不要。
   ※ 帯側に負の margin-top を当てる方法は採らない。マージン相殺に依存するため、コンテナに
      padding-top/border-top が付く・帯の前に要素が入る（パンくず復活）・コンテナがBFCを作る、の
      いずれかで帯がヘッダーや直前要素に重なって壊れる。この書き方は相殺に依存しない。
   ※ :has() 非対応環境ではこの指定が無視され、従来の24pxが残るだけ（壊れない）。 */
@media (max-width: 782px) {
    .hmv-house-list,
    .hmv-single:has(> .hmv-page-band),
    .hmv-house-detail:has(> .hmv-page-band) { margin-top: 0; }
}

/* ページ見出し帯（XDモック: 会場カラー帯 + 街並みイラスト。イラストは仮切り出し画像）
   ※ 詳細ページは h1=記事タイトルのため、帯は .hmv-page-band（ページ種別ラベル）で出す */
.hmv-archive h1,
.hmv-house-list h1,
.hmv-page-band {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    background: var(--hmv-primary) url(images/common/title_town.png) no-repeat right 14px center;
    background-size: auto 60%;
    padding: 14px 130px 14px 16px;
    /* XD: 帯は全幅（コンテナ幅でなくビューポート幅）= 2026-08-03 レイアウト照合 */
    margin: 0 calc(50% - 50vw) 24px;
}
/* PC帯: XD実測 高さ106px・テキスト左143px・街並みイラスト大きめ右136px */
@media (min-width: 783px) {
    .hmv-archive h1,
    .hmv-house-list h1,
    .hmv-page-band {
        font-size: 1.65rem;
        /* body の line-height:1.8（本文用）を継承すると行間だけで21px増え、
           帯が123.5pxとXD実測106pxより太くなる。見出し帯なので行間を明示する。
           26.4px × 1.2 + 37px × 2 = 105.7px（2026-08-06） */
        line-height: 1.2;
        padding: 37px 300px 37px min(10.5vw, 143px);
        background-position: right min(10vw, 136px) center;
        /* 帯高に連動するため、帯を縮めた分だけ%を上げてイラストの実寸は据え置く
           （従来 123.5px×56%＝69.2px → 105.7px×65%＝68.7px） */
        background-size: auto 65%;
        margin-bottom: 50px;
    }
}

/* ---- パンくず ---- */
.hmv-breadcrumb { font-size: .8rem; margin: 0 0 12px; }
.hmv-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.hmv-breadcrumb li + li::before { content: "›"; margin: 0 6px; color: var(--hmv-muted); }
.hmv-breadcrumb a { color: var(--hmv-muted); text-decoration: none; }
.hmv-breadcrumb a:hover { color: var(--hmv-primary); }
.hmv-breadcrumb span { color: var(--hmv-text); }

/* ---- 投稿リスト（news / info / guide） ---- */
.hmv-post-list { list-style: none; margin: 0; padding: 0; }

.hmv-post-item { border-bottom: 1px solid var(--hmv-border); }

.hmv-post-item a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    text-decoration: none;
    color: inherit;
}

.hmv-post-item img { width: 120px; height: 80px; object-fit: cover; flex-shrink: 0; }

.hmv-post-date { color: var(--hmv-muted); font-size: .85rem; flex-shrink: 0; }

/* ---- 記事詳細 ---- */
.hmv-post-thumb img { width: 100%; }
.hmv-post-body { margin-top: 16px; }
.hmv-post-house { margin-top: 24px; padding: 12px; background: #fff; border: 1px solid var(--hmv-border); }

/* ---- 4-1 ハウス一覧（件数可変グリッド） ---- */
.hmv-house-grid {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.hmv-house-card { background: #fff; border: 1px solid var(--hmv-border); }

.hmv-house-card a { display: block; text-decoration: none; color: inherit; }

.hmv-house-card img { width: 100%; height: 180px; object-fit: cover; display: block; }

.hmv-house-card-maker { display: block; padding: 10px 12px 0; font-size: .8rem; color: var(--hmv-muted); }
.hmv-house-card-name  { display: block; padding: 0 12px; font-weight: bold; }
.hmv-house-card-number{
    display: inline-block; margin: 6px 12px 12px;
    padding: 1px 8px; font-size: .75rem; color: #fff;
    background: var(--hmv-accent); border-radius: 3px;
}

/* ---- 4-2 ハウス詳細 ---- */
.hmv-house-meta { color: var(--hmv-muted); }
.hmv-house-meta span + span { margin-left: 1em; }
.hmv-house-catch { font-size: 1.1rem; font-weight: bold; color: var(--hmv-primary); }

.hmv-house-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.hmv-house-photos img { width: 100%; height: 200px; object-fit: cover; }

.hmv-house-news { margin-top: 32px; }
/* 縦線は ::before のピル形バーへ移行（2026-08-08。§縦線付き見出し のまとめ指定を参照）。
   padding-left は旧「border 4px + padding 8px」= 12px に統合 */
.hmv-house-news h2 { font-size: 1.1rem; position: relative; padding-left: 12px; }

/* ---- 共通ヘッダ ---- */
.hmv-header { background: #fff; border-bottom: 1px solid var(--hmv-border); }

/* ヘッダー中身は幅上限を持たせず、ブラウザ幅の広がりに追随させる（2026-08-04 指示）。
   ※ここ以外のブロック（.hmv-top / 下層コンテナ / フッター）の幅制御は変更しない */
.hmv-header-inner {
    margin: 0 auto; padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

.hmv-header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* 会場名ロゴ（2026-08-03納品SVG。SP版intrinsic高42px/PC版68px=@1x想定）。
   横長一体PNG（日立）でもSPで1行に収まるよう幅もキャップ */
.hmv-header-logo img { height: 42px; width: auto; max-width: min(60vw, 300px); object-fit: contain; display: block; }
/* SP/PC別レイアウトの納品ロゴ出し分け（青5会場。日立はclass無し1枚） */
.hmv-header-logo .hmv-logo-pc { display: none; }
@media (min-width: 783px) {
    .hmv-header-logo img { height: 68px; max-width: 440px; }
    .hmv-header-logo .hmv-logo-sp { display: none; }
    .hmv-header-logo .hmv-logo-pc { display: block; }
}
/* ロゴマーク横の会場名（モック準拠）。SPは縮小して1行に収める（中途半端な折返し回避） */
.hmv-header-name { font-size: 1rem; font-weight: bold; color: var(--hmv-primary); line-height: 1.3; white-space: nowrap; }
@media (max-width: 782px) { .hmv-header-name { font-size: .82rem; } }

/* ナビ+SNSの束（2026-08-06 指示: ナビをSNSアイコンの左隣＝右端側に置く）。
   SPは display:contents でこの箱が無いのと同じ扱いになり、従来のSPレイアウトを維持する。
   PCは flex で束ね、.hmv-header-inner の space-between により ロゴ=左端 / この束=右端 となる。
   ナビとSNSの間隔はここの gap だけで決まる（親の gap:8px に縛られない）。
   ※ gap:24px は仮値。ヘッダーモック(common_header_PC.png)の実測で確定させる。 */
.hmv-header-right { display: contents; }
@media (min-width: 783px) {
    .hmv-header-right { display: flex; align-items: center; gap: 24px; }
}

.hmv-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hmv-nav a { text-decoration: none; color: var(--hmv-text); font-size: .9rem; font-weight: bold; }
.hmv-nav a:hover { color: var(--hmv-primary); }
/* PCナビ=4項目・矢印なし（common_header_PC.png準拠）。取説/トピックス+円矢印はSP展開メニューのみ */
.hmv-nav .hmv-nav-sponly { display: none; }
.hmv-nav .hmv-nav-arrow { display: none; }

/* アクセスピン（SPのみ=モック準拠） */
.hmv-header-access {
    display: none; flex-direction: column; align-items: center;
    margin-left: auto; text-decoration: none;
    color: var(--hmv-primary); font-size: .65rem; font-weight: bold; line-height: 1.4;
}
.hmv-header-access i { font-size: 22px; line-height: 1.2; }

/* ヘッダーSNSアイコン（PCのみ=モック準拠） */
/* ヘッダーSNSボタン3つ: 白角丸+グレー枠の統一ボタン（.aiスクショ実測 2026-08-03。
   43px角・radius9px・枠#ccc・アイコン28px / LINE=緑角丸に白ロゴ）
   Instagram・YouTube の線色は会場カラーに統一（2026-08-07 モック確認・指示）。
   従来は固定値 #d22d25（赤）だったが、モックでは2つとも会場カラーだった。
   var(--hmv-primary) にすることで SP固定バー(.hmv-sp-fixedbar-insta)とも一致し、
   日立(redバリアント)では #c40018 になる。
   ※ LINE は .hmv-header-sns-line i 側で白×緑を指定しているためこの色の影響を受けない。 */
.hmv-header-sns { display: flex; gap: 12px; align-items: center; }
.hmv-header-sns a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 43px; height: 43px; border-radius: 9px;
    background: #fff; border: 1px solid #ccc;
    color: var(--hmv-primary); text-decoration: none;
}
.hmv-header-sns a i { font-size: 28px; }
.hmv-header-sns-line i {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px;
    background: #00c92e; color: #fff; font-size: 21px;
}

/* ハンバーガー（スマホのみ表示） */
.hmv-nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.hmv-nav-toggle span {
    display: block; width: 24px; height: 3px; margin: 4px 0;
    background: var(--hmv-primary); border-radius: 2px; transition: .25s;
}
.hmv-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hmv-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.hmv-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* 開いた状態の×は水色（design2.ai p3。バリアント連動でcounsel色） */
.hmv-nav-toggle.is-open span { background: var(--hmv-counsel); }
/* 赤バリアント（日立）だけは上の counsel が青(#0d8cff)＝WEB相談CTA用の色のため、
   三本線=赤 → ×=青 と系統が変わってしまう。赤会場のSPメニュー展開状態は
   モック未納品（日立の入稿は top の SP/PC 2画面のみ）で確定値が無いため、
   青版の「三本線=会場カラー → ×=同系の明るい色」という関係を赤側でも再現する。
   色は公式LINE帯（.hmv-line-band）の斜めストライプ淡色と同じ #cf3044
   ＝ color-mix(in srgb, #c40018 81%, #fff) の算出値（2026-08-17 指示）。
   ※ 会場設定でプライマリカラーを変えても追従しない直値。追従させたい場合は
     background: color-mix(in srgb, var(--hmv-primary) 81%, #fff) に置き換える。
   詳細度 (0,3,1) で上の (0,2,1) に勝つ（2026-08-17 指示・案C）。 */
.hmv-variant-red .hmv-nav-toggle.is-open span { background: #cf3044; }

@media (max-width: 782px) {
    .hmv-nav-toggle { display: block; }
    .hmv-header-access { display: flex; }
    .hmv-header-sns { display: none; }
    .hmv-nav {
        display: none;
        width: 100%; flex-direction: column; gap: 0;
        border-top: 1px solid var(--hmv-border); margin-top: 8px;
    }
    .hmv-nav.is-open { display: flex; }
    .hmv-nav a {
        display: flex; justify-content: space-between; align-items: center;
        padding: 14px 4px; border-bottom: 1px solid var(--hmv-border);
    }
    /* SP展開メニューは6項目+紺丸矢印（design2.ai p3準拠） */
    .hmv-nav .hmv-nav-sponly { display: flex; }
    .hmv-nav .hmv-nav-arrow { display: inline-flex; }
}

/* ---- 共通フッタ（XDモック 2026-07-14 準拠） ---- */
html { scroll-behavior: smooth; }

/* 親テーマ liquid-insight の footer{color:#fff;background:#333} と
   footer a{color:#fff !important} を打ち消す（仕様: フッター本体は白地+通常文字色） */
footer.hmv-footer { background: #f3f3f3; color: var(--hmv-text); font-size: 1rem; padding: 0; margin-top: 48px; } /* XD実測: フッターは薄グレー(#f3f3f3) */
footer.hmv-footer a { color: var(--hmv-text) !important; }
footer.hmv-footer .hmv-pagetop { color: #fff !important; }
footer.hmv-footer .hmv-sns-circle { color: var(--hmv-primary) !important; }
footer.hmv-footer .hmv-line-pill { color: var(--hmv-text) !important; }
footer.hmv-footer .hmv-footer-sponsor a { color: var(--hmv-primary) !important; }

/* PAGE TOP: 右下固定。300pxスクロールで出現・最上部で隠れる（hm_common.js）
   ボタンは入稿画像 common_pagetop.png（バリアント別） */
.hmv-pagetop {
    /* SP: bottom 70px → 78px（2026-08-17 指示）。下部固定バー(.hmv-sp-fixedbar・高さ54px)の上に
       24px 浮かせる位置。バーの高さを変えたときはこの値も見直すこと。 */
    position: fixed; right: 16px; bottom: 78px; z-index: 60; /* SP=固定バーの上 */
    display: block; width: 66px; height: 66px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s, visibility .25s, transform .25s;
}
.hmv-pagetop img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.hmv-pagetop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* PCは固定バーが非表示なので画面下端に寄せられる（bottom 24px → 32px = 2026-08-17 指示） */
@media (min-width: 783px) {
    .hmv-pagetop { right: 24px; bottom: 32px; }
}

/* 公式LINE帯（斜めストライプ=会場カラー同系2トーン。幕張 .foot_snsp 流用の色違い=2026-08-03）
   design2.ai実測: 濃=primary / 淡=primary+白約19%（赤版も同比率）。幕張と同じ5px/5px */
.hmv-line-band {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 16px;
    background: var(--hmv-primary);
    background: repeating-linear-gradient(-45deg,
        var(--hmv-primary) 0 5px,
        color-mix(in srgb, var(--hmv-primary) 81%, #fff) 5px 10px);
}
.hmv-line-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--hmv-text); text-decoration: none;
    font-size: .85rem; font-weight: bold; padding: 8px 16px; border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
/* 入稿画像版のピル（画像自体が白ピル+ロゴ入りなので枠は消す） */
.hmv-line-pill:has(.hmv-line-pill-img) { padding: 0; background: none; border-radius: 10px; overflow: hidden; }
.hmv-line-pill-img { height: 48px; width: auto; display: block; }
.hmv-line-pill-icon { background: #06C755; color: #fff; font-size: .7rem; font-weight: bold; padding: 4px 6px; border-radius: 6px; }
.hmv-sns-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--hmv-primary);
}
.hmv-sns-circle i { font-size: 21px; }

/* ナビ + 会場案内図 */
.hmv-footer-main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 8px; display: grid; gap: 24px; }
.hmv-footer-nav { display: grid; align-content: start; }
.hmv-footer-nav a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 4px; border-bottom: 1px solid var(--hmv-border);
    text-decoration: none; color: var(--hmv-text); font-size: .95rem; font-weight: bold;
}
/* SPのみ1項目目に上線（下線と同一の線種・色・太さ）。PCは2列組で先頭が2つになるため付けない（2026-08-06 指示） */
@media (max-width: 782px) {
    .hmv-footer-nav a:first-child { border-top: 1px solid var(--hmv-border); }
}
.hmv-nav-arrow {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--hmv-primary); color: #fff; font-size: .7rem;
}
.hmv-footer-map img { width: 100%; max-width: 460px; display: block; margin: 0 auto; }
/* 案内図カード四隅の丸穴（モック実測: 直径8px・角から約15,17px。2026-08-03精密化。
   納品画像には無いためフッター地色(#f3f3f3)の円をCSSで重ねて「抜き穴」を表現 */
.hmv-footer-map { position: relative; }
.hmv-footer-map::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    max-width: 460px; margin: 0 auto;
    background:
        radial-gradient(circle 4px at left 15px top 17px, #f3f3f3 99%, transparent 100%),
        radial-gradient(circle 4px at right 15px top 17px, #f3f3f3 99%, transparent 100%),
        radial-gradient(circle 4px at left 15px bottom 17px, #f3f3f3 99%, transparent 100%),
        radial-gradient(circle 4px at right 15px bottom 17px, #f3f3f3 99%, transparent 100%);
}

/* 会場ロゴ・住所・主催表記
   .hmv-footer-main の子になったため max-width/margin は親に任せる（2026-08-06）。
   横paddingを親と二重に持たせない。下8px + 親のpadding-bottom 8px = 従来の16px相当。 */
.hmv-footer-venue { padding: 0 0 8px; text-align: center; }
.hmv-footer-venue-logo { margin: 0 0 8px; }
/* ロゴのトップへのリンク（2026-08-17 指示）。
   - text-decoration:none = 親テーマに underline を当てている箇所があるため明示（ヘッダーの
     .hmv-header-logo と同じ扱い）。ロゴ未設定の会場では会場名テキストがリンクになるため必要。
   - display:inline-block = インライン画像のベースライン隙間で数pxずれるのを防ぐ予防措置。
   - opacity:1 = 共通の a:hover{opacity:.85}（style.css:69）によるフェードは不要との指示のため打ち消す。
     詳細度 (0,2,1) で a:hover (0,1,1) に勝つ。フォーカス時も同様に変化させない。
   ※ 文字色は打ち消し不要。footer.hmv-footer a の color !important は a 要素に当たるだけで、
      子の .hmv-footer-venue-name が持つ自前の color（会場カラー）を上書きしない。 */
.hmv-footer-venue-logo a { display: inline-block; text-decoration: none; }
.hmv-footer-venue-logo a:hover,
.hmv-footer-venue-logo a:focus { opacity: 1; }
/* フッターはSPでもPC版レイアウトのロゴを使う（2026-08-03納品時の指定） */
.hmv-footer-venue-logo img { height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.hmv-footer-venue-name { font-weight: bold; font-size: 1.1rem; color: var(--hmv-primary); }
/* 会場情報はPC/SPで文字と行間を揃える（2026-08-17 指示）。
   従来はSP側だけ .82rem / bold / 行間10px の上書きを持っていて差が大きかったため、
   font-weight:500・font-size:.85rem・行間2px の1系統に統一した。
   （SP専用だった font-size と p の上書きは削除。行間はSPの span の margin も 2px に合わせている） */
.hmv-footer-venue-info { font-size: .85rem; font-weight: 500; }
.hmv-footer-venue-info p { margin: 2px 0; }
.hmv-footer-sponsor a { color: var(--hmv-primary); }
/* SPフッター（モック2026-08-03精密化）: 案内図→ナビの順・会場情報は左寄せで各項目1行 */
@media (max-width: 782px) {
    .hmv-footer-map { order: -1; }
    .hmv-footer-venue { text-align: left; }
    /* TEL・営業時間の縦積みはSPのまま維持（PCは1行）。行間だけ上の2pxに合わせる */
    .hmv-footer-venue-info2 span { display: block; margin: 2px 0; }
}
@media (min-width: 783px) {
    .hmv-footer-venue-info2 span + span { margin-left: 1.5em; }
}

/* コピーライト帯（会場カラー） */
/* 上下paddingの 6px はPC専用の値として機能する（2026-08-17 指示で 10px → 6px。帯の高さ 41.6px → 33.6px）。
   SPは下の @media (max-width:782px) が padding-top / padding-bottom を個別に上書きするため、
   ここの縦値はSPには影響しない。左右16pxはショートハンドのままPC/SP共通。
   ※ SP側の個別上書きを外すとこの値がSPにも効いてしまうので、両者はセットで扱うこと。 */
.hmv-footer-copy {
    background: var(--hmv-primary); color: #fff; text-align: center;
    font-size: .75rem; padding: 6px 16px; margin: 0;
}
/* SPのみ帯を文字1行分 + 上下2px にする（2026-08-17 指示。実機確認の結果、
   従来の3倍高＝2026-08-06 指示は高すぎ、余白ゼロは詰まりすぎだったため中間に調整）。
   1行=font-size(.75rem) × line-height(1.8)＝21.6px。body の line-height 変更に
   引きずられないようこの要素で 1.8 を固定する。帯の高さ = 21.6 + 2 + 2 = 25.6px。
   PC表示は上のベース指定（padding 6px = 帯33.6px）が受け持つ。
   高さは height/min-height で作らず padding で作る。会場名が長い会場（日立ハウジング
   ステーション＝「(C) 日立ハウジングステーション ALLRIGHTS RESERVED.」）が狭い端末で
   2行に折り返したとき、固定高だと2行目が帯の外（薄グレーのフッター地）へ白文字で
   はみ出して読めなくなるため。padding なら折り返しても上下の余白が保たれる。 */
@media (max-width: 782px) {
    .hmv-footer-copy {
        line-height: 1.8;
        padding-top: 2px; padding-bottom: 2px;
    }
}

/* SP固定バー（納品基準画像 common_fix_menu_SP.png 準拠: 下部固定・左50%=紺のモデルハウス一覧/右50%=白のInstagram） */
/* 高さは下の body{padding-bottom:54px}（バーの逃げ）と必ず一致させる（2026-08-17）。
   従来は高さを子の padding 任せにしていたため 13.6px×1.8 + 16px×2 = 56.48px となり、
   逃げの54pxを2.5px超過＝ページ最下部（コピーライト帯の下端）がバーに潜り込んでいた。
   ここで 54px を明示し、子の上下paddingを0にして align-items:center で中身を縦中央に置く。
   これで文字サイズを変えてもバー高＝54pxのまま保たれる。 */
.hmv-sp-fixedbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: 54px;
    display: flex; background: #fff; box-shadow: 0 -1px 4px rgba(0,0,0,.12);
}
.hmv-sp-fixedbar-houses {
    flex: 0 0 50%; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--hmv-primary); color: #fff; text-decoration: none;
    /* 上下padding は 0（高さは親の 54px が持つ）。左右8pxは従来どおり */
    font-weight: bold; font-size: .85rem; padding: 0 8px;
}
.hmv-sp-fixedbar-houses:hover { color: #fff; }
.hmv-sp-fixedbar-houses i { font-size: 1rem; }
.hmv-sp-fixedbar-insta {
    flex: 0 0 50%; display: flex; align-items: center; justify-content: center;
    color: var(--hmv-primary);
}
.hmv-sp-fixedbar-insta i { font-size: 1.7rem; }
@media (max-width: 782px) { body { padding-bottom: 54px; } } /* バーの逃げ */

@media (min-width: 783px) {
    .hmv-sp-fixedbar { display: none; }
    /* モック実測(2026-08-06・コンテンツ幅1068px換算): ナビ657px / 間隔99px / 案内図313px。
       fr比と%gapで表現し、783〜1100pxの間でも比率を保つ（99/1068 = 9.3%）。
       左カラムは上=ナビ／下=会場ブロック、右カラムの案内図が2行にまたがる。
       2行目を 1fr にして会場ブロックを align-self:end で下寄せ＝案内図の下端と揃う。 */
    .hmv-footer-main {
        grid-template-columns: 657fr 313fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "nav   map"
            "venue map";
        column-gap: 9.3%;
        align-items: start;
    }
    .hmv-footer-nav { grid-area: nav; }
    .hmv-footer-map { grid-area: map; }
    /* モック準拠: 2列を縦方向に充填（左列=NEWS/インフォ/一覧、右列=取説/トピックス/アクセス） */
    .hmv-footer-nav {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        gap: 0 48px;
    }
    /* モック実測(2026-08-06): ロゴ左端がフッターナビの左端と一致＝左寄せ（中央寄せではない）。
       左カラムの下段に置き、横paddingを0にすることでナビの左端と揃う。 */
    .hmv-footer-venue {
        grid-area: venue; align-self: end; padding: 0;
        display: flex; align-items: center; justify-content: flex-start; gap: 28px; text-align: left;
    }
    .hmv-footer-venue-logo { margin: 0; }
    .hmv-sp-fixedbar { display: none; }
    body { padding-bottom: 0; }
}

/* ---- ボタン ---- */
.hmv-btn {
    display: inline-block; padding: 10px 24px; border-radius: 999px;
    background: var(--hmv-primary); color: #fff; text-decoration: none; font-size: .9rem;
}
.hmv-btn:hover { color: #fff; }
.hmv-btn-line { background: #06C755; }
.hmv-btn-insta { background: #d6339a; }
.hmv-btn-youtube { background: #e62117; }
.hmv-btn-reserve { background: var(--hmv-accent); }

/* ---- CTA（モデルハウス詳細 / XDモック: リード文+ボタンの2分割行。PCは3組横並び） ---- */
.hmv-house-cta { margin: 32px auto; max-width: 560px; display: grid; gap: 14px; }
@media (min-width: 783px) {
    .hmv-house-cta { max-width: none; grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
/* リードは右向きの尖りを持つ吹き出し（モック実測 2026-08-07）。
   尖りは本体右辺の中央から出す三角形（::after のボーダー三角）。
   実測比（箱の高さに対して）: 突出 10〜11% / 尖りの縦 26〜28% / 角丸 9〜10% / 尖り〜ボタン 9%。
   row の gap は「尖りの突出 + ボタンとの余白」を確保する値。 */
.hmv-cta-row { display: flex; margin: 0; gap: 9px; }
/* リード文はSP・PCとも中央寄せ（モック実測 2026-08-07）。
   SPは3項目の文字中心が320.0/320.5/321.5と一致、PCは2行の中心が175.5/176.5・828.0/827.0と
   行幅が違っても一致するため、ブロックの中央寄せ＋行単位のセンタリングの両方が要る。
     justify-content:center … テキスト塊を箱の中央へ
     text-align:center      … 塊の中で各行を中央へ（短い行が長い行の上で中央になる） */
.hmv-cta-lead {
    position: relative;
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 14px 12px; font-weight: bold; font-size: .9rem; /* 左右16px→12px（2026-08-07 指示） */
    letter-spacing: -0.05em; line-height: 1.2; /* design2.ai実測（HiraKaku W6 12pt・字詰め） */
    text-align: center;
    border-radius: 4px;
}
.hmv-cta-lead::after {
    content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    width: 0; height: 0;
    border-style: solid; border-color: transparent; /* 色は会場バリアント別に border-left-color で指定 */
    border-width: 6px 0 6px 5px; /* 突出5px / 縦12px */
}
/* リード文の改行はPCのみ（モック実測 2026-08-07）。改行位置は意味の切れ目で幅任せでは再現できないため
   page-houses.php 側で <br class="hmv-cta-br"> として明示し、SPでは無効化して1行に戻す。 */
@media (max-width: 782px) {
    .hmv-cta-br { display: none; }
}
@media (min-width: 783px) {
    .hmv-cta-row { gap: 13px; }
    .hmv-cta-lead,
    .hmv-cta-btn { border-radius: 6px; }
    .hmv-cta-lead::after { border-width: 9px 0 9px 7px; } /* 突出7px / 縦18px */
}
/* ボタンの角丸はリードと同値（モック実測 2026-08-07: SP リード13対ボタン12〜14 / PC 9対8〜9） */
.hmv-cta-btn {
    flex: 0 0 38%; display: flex; align-items: center; justify-content: center; gap: 6px;
    color: #fff; text-decoration: none; font-weight: bold;
    border-radius: 4px;
}
.hmv-cta-btn-arrow {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; color: inherit; font-size: .7rem;
}
.hmv-cta-reserve .hmv-cta-btn-arrow { color: var(--hmv-primary); }
.hmv-cta-catalog .hmv-cta-btn-arrow { color: #e0922b; }
.hmv-cta-counsel .hmv-cta-btn-arrow { color: var(--hmv-counsel); }
.hmv-cta-btn:hover { color: #fff; opacity: .85; }
/* 吹き出しの尖りはリード背景と同色。background と同じフォールバック順で指定する */
.hmv-cta-reserve .hmv-cta-lead {
    background: #e8ebf4;
    background: color-mix(in srgb, var(--hmv-primary) 10%, #fff);
    color: var(--hmv-primary);
}
.hmv-cta-reserve .hmv-cta-lead::after {
    border-left-color: #e8ebf4;
    border-left-color: color-mix(in srgb, var(--hmv-primary) 10%, #fff);
}
.hmv-cta-reserve .hmv-cta-btn  { background: var(--hmv-primary); }
.hmv-cta-catalog .hmv-cta-lead {
    /* 資料請求のゴールドは両バリアント共通の固定色（260802 .ai実測: 背景=#e0922bの10%ティント） */
    background: #fcf4ea;
    color: #df912b;
}
.hmv-cta-catalog .hmv-cta-lead::after { border-left-color: #fcf4ea; }
.hmv-cta-catalog .hmv-cta-btn  { background: #e0922b; }
.hmv-cta-counsel .hmv-cta-lead {
    background: #ecf4fb;
    background: color-mix(in srgb, var(--hmv-counsel) 10%, #fff);
    color: var(--hmv-counsel);
}
.hmv-cta-counsel .hmv-cta-lead::after {
    border-left-color: #ecf4fb;
    border-left-color: color-mix(in srgb, var(--hmv-counsel) 10%, #fff);
}
.hmv-cta-counsel .hmv-cta-btn  { background: var(--hmv-counsel); }

/* ニュース詳細のCTA（SP=縦積み / PC=横並び=モック準拠） */
.hmv-news-cta { margin: 24px 0 8px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (min-width: 783px) {
    .hmv-news-cta { flex-direction: row; gap: 20px; }
    .hmv-newshead-logo, .hmv-newshead-maker { margin-left: 24px; }
    .hmv-newshead-date { display: block; margin-left: auto; }
    .hmv-single-news .hmv-post-titlebox .hmv-post-date { display: none; }
}

/* ==== ニュース/インフォ詳細（XDモック 5/12・6/12 準拠） ==== */

/* 関連モデルハウスヘッダ（news詳細） */
.hmv-newshead {
    display: flex; align-items: center; gap: 12px;
    border-bottom: 2px solid var(--hmv-border); padding-bottom: 12px; margin-bottom: 18px;
}
.hmv-newshead-logo, .hmv-newshead-maker { margin-left: auto; } /* SP: 右寄せ */
.hmv-newshead-date { display: none; margin: 0; color: var(--hmv-muted); }
.hmv-newshead-no { color: var(--hmv-primary); font-weight: bold; letter-spacing: .05em; margin: 0; }
.hmv-newshead-name { font-weight: bold; font-size: 1.1rem; margin: 0; }
.hmv-newshead-logo { max-height: 34px; width: auto; max-width: 40%; }
.hmv-newshead-maker { font-weight: bold; margin: 0; }

/* タイトルボックス（斜めストライプ+日付右下）。260731モック: ストライプは画面の左右端までブリード
   （負マージンで viewport 端へ伸ばし、padding-left で文字位置を戻す。
     はみ出しは html,body の overflow-x:clip が吸収）
   SP（1カラム）は本文カラム＝コンテナ内容幅なので、左右対称の calc(50% - 50vw) でちょうど両端に届く。
   PC（2カラム）は本文カラムが中央でないため右が届かず、下のメディアクエリで margin-right を上書きする。 */
.hmv-post-titlebox {
    position: relative;
    background: repeating-linear-gradient(-45deg, #eef1f8 0 5px, #fff 5px 10px);
    background: repeating-linear-gradient(-45deg,
        color-mix(in srgb, var(--hmv-primary) 8%, #fff) 0 5px, #fff 5px 10px);
    padding: 22px 16px 30px calc(50vw - 50% + 16px); margin: 0 calc(50% - 50vw) 20px;
}
.hmv-post-titlebox h1 { font-size: 1.25rem; font-weight: bold; margin: 0; line-height: 1.6; }
.hmv-post-titlebox .hmv-post-date { position: absolute; right: 16px; bottom: 6px; margin: 0; }
/* PC（2カラム時）はストライプを右端までブリードさせる（モック 2026-08-07）。
   上の margin-left の 50% は本文カラム(1fr≒632px)基準で、本文カラムはビューポート中央ではなく
   左寄りのため、左は約168px余分に出る一方で右はカラム右端で止まっていた。
   不足量は 0.5×ビューポート幅 − 148px で画面が広いほど増えるので、固定pxではなく
   -50vw 基準の負マージンで幅をビューポートに比例させる。
   -200px は余裕分（サイドバー300px+gap36px+右padding16pxが将来変わっても右端を越えるように）。
   はみ出しは左端と同様 html,body の overflow-x:clip が吸収する。
   ※ サイドバーは position:sticky（位置指定要素）なので、帯の上に重なって描画される＝モックどおり。
   ※ この宣言は上の margin 一括指定より後ろに置くこと（メディアクエリは詳細度を上げないため）。 */
@media (min-width: 783px) {
    .hmv-post-titlebox {
        margin-right: calc(-50vw - 200px);
        /* 右へ伸ばした分(50vw+200px)だけ内側を空け、文字と日付を本文カラム内に収める（2026-09-11）。
           padding-right が 16px のままだと h1 が伸びた帯の端まで流れ、長いタイトルが
           サイドバーの下に潜って隠れていた（日付も帯の右端基準のため画面外に出ていた）。 */
        padding-right: calc(50vw + 216px);
    }
    .hmv-post-titlebox .hmv-post-date { right: calc(50vw + 216px); }
}

.hmv-post-thumb { margin: 0 0 20px; text-align: center; }

/* 本文の要素スタイル（H2〜H6/リスト = XDモックのサンプル準拠） */
.hmv-post-body { margin-bottom: 32px; }
.hmv-post-body p { margin: 1em 0; }
.hmv-post-body h2 {
    font-size: 1.2rem; font-weight: bold;
    /* 縦線は ::before のピル形バーへ（2026-08-08）。padding-left = 旧 border5px + padding12px */
    position: relative; padding-left: 17px;
    margin: 1.8em 0 1em;
}
.hmv-post-body h3 {
    position: relative; font-size: 1.15rem; font-weight: bold;
    border-bottom: 2px solid var(--hmv-border);
    padding-bottom: 8px; margin: 1.8em 0 1em;
}
.hmv-post-body h3::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 56px; height: 2px; background: var(--hmv-primary);
}
.hmv-post-body h4 {
    font-size: 1.05rem; font-weight: bold;
    /* 縦線は ::before のピル形バーへ（2026-08-08）。padding-left = 旧 border4px + padding10px */
    position: relative; padding-left: 14px;
    margin: 1.8em 0 1em;
}
.hmv-post-body h5 { color: var(--hmv-primary); font-size: 1rem; font-weight: bold; margin: 1.8em 0 1em; }
.hmv-post-body h6 { font-size: 1rem; font-weight: bold; margin: 1.8em 0 1em; }
.hmv-post-body ul, .hmv-post-body ol { padding-left: 1.5em; margin: 1em 0; }
.hmv-post-body li { margin: .7em 0; }
.hmv-post-body img { max-width: 100%; height: auto; }
.hmv-post-body a { color: var(--hmv-primary); }

/* 前後記事ナビ */
.hmv-postnav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    border-top: 1px solid var(--hmv-border); padding: 18px 4px; margin: 28px 0 20px;
}
.hmv-postnav a { display: block; text-decoration: none; color: inherit; }
.hmv-postnav-next { text-align: right; }
.hmv-postnav-label { display: block; font-weight: bold; margin-bottom: 6px; }
.hmv-postnav-arrow { color: var(--hmv-primary); font-weight: bold; }
.hmv-postnav-title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .8rem; color: var(--hmv-muted);
}

/* 2カラム（PC=本文+右サイドの最近の投稿 / SP=縦積みで下） */
.hmv-single-cols { display: block; }
@media (min-width: 783px) {
    .hmv-single-cols {
        display: grid; grid-template-columns: 1fr 300px; gap: 36px;
        align-items: start;
    }
    .hmv-single-side { position: sticky; top: 16px; }
}

/* 最近の投稿（枠色はSPモック実測 #dedede・2026-08-03） */
.hmv-recentbox { border: 1px solid #dedede; border-radius: 10px; padding: 20px 16px; margin: 0 0 24px; background: #fff; }
.hmv-recentbox h2 { text-align: center; font-size: 1.1rem; margin: 0 0 16px; }
.hmv-recentbox ul { list-style: none; margin: 0; padding: 0; }
.hmv-recentbox li + li { margin-top: 20px; }
.hmv-recentbox a { display: block; text-decoration: none; color: inherit; }
.hmv-recentbox-date { display: block; color: var(--hmv-primary); font-weight: bold; letter-spacing: .05em; }
.hmv-recentbox-title { display: block; font-weight: bold; margin: 2px 0; }
.hmv-recentbox-excerpt {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .85rem;
}

/* ---- トップページ ---- */
.hmv-top { max-width: 1100px; margin: 0 auto 48px; padding: 0 16px; }

/* ヒーローレタリング帯（英字会場名+街並みイラスト。SPのみ=PCは画像上オーバーレイ） */
.hmv-hero-lettering { margin: 0; }
.hmv-hero-lettering h1 { margin: 0; }
.hmv-hero-lettering img { width: 100%; max-width: 560px; display: block; }
/* SPのみ: レタリング画像下部のキャッチコピーをMV写真に重ねる（モック準拠・2026-08-06 指示）。
   画像は「ロゴ＋キャッチコピー」が1枚に焼き込まれた透過PNG（納品原名のまま差し替える方針のため分割しない）。
   両者の間には必ず余白があり、6会場実測で ロゴ下端 最大47.9% / キャッチ上端 最小69.7% 。
   その中間の60%を境として、下40%ぶんだけ後続のMVを引き上げ、透過部から写真を覗かせる。
   引き上げ量は画像の実寸比が必要なため、幅・高さは page-top.php が --hmv-title-w/h で渡す
   （変数が無い＝取得失敗時は margin が無効になり、従来どおり上下に並ぶだけで崩れない）。
   h1 を fit-content にしているのは、% の基準幅を画像の実描画幅（max-width:560px 適用後）に一致させるため。 */
@media (max-width: 782px) {
    .hmv-hero-lettering h1 { width: fit-content; max-width: 100%; }
    .hmv-hero-lettering img {
        position: relative; z-index: 2; /* 後続のMV(.hmv-hero)より前面に置く */
        margin-bottom: calc(-40% * var(--hmv-title-h) / var(--hmv-title-w));
    }
}

/* ヒーロー: 1枚画像・全幅（スライダー廃止=2026-07-15） */
.hmv-hero { position: relative; margin: 0 calc(50% - 50vw) 32px; }
/* PC: 写真下端の白い波加工（納品 deteil_parts_02_PC 由来の生成画像 hero_wave_PC.png。
   反転+波下ベタ白化済み=幕張 .bottomimage 方式。生成: docs/import/delivery-260731/make_hero_wave.py）
   bottom:-1px の白重なりにより、旧実装（scaleY(-1)+ぴったり合わせ）で画面幅により
   写真が1px透けた線を構造的に排除（2026-08-03） */
@media (min-width: 783px) {
    .hmv-hero::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px;
        background: url(images/common/hero_wave_PC.png) bottom center / 100% 100% no-repeat;
        pointer-events: none;
    }
}
.hmv-hero-photo { width: 100%; height: auto; display: block; } /* 高さは幅に比例（トリミングしない） */
.hmv-hero-placeholder { height: 240px; background: linear-gradient(120deg, var(--hmv-primary), var(--hmv-accent)); }
/* PC: タイトルレタリング（MV_{slug}_PC_title.png）を写真左上へオーバーレイ。SPは帯表示のため非表示 */
.hmv-hero-title-pc { display: none; position: absolute; left: 3%; top: 7%; width: min(46%, 640px); height: auto; }
@media (min-width: 783px) { .hmv-hero-title-pc { display: block; } }

/* bxSlider の枠を無効化（デフォルトは白枠+影） */
.bx-wrapper { border: 0; box-shadow: none; background: transparent; margin: 0 auto 40px; }

/* ===== bxSlider のドットページャの色（2026-08-17 指示） =====
   対象は TOPICSスライダー（PC）と モデルハウス詳細の外観写真スライダー（PC/SP）。
   選択中 = 会場カラー（navy #0b308e / red #c40018）/ 非選択 = #cccccc。
   bxSlider本体の既定は 非選択#666 / 選択・hover・focus#000（jquery.bxslider.min.css）で、
   同CSSは child-style より後に読み込まれる（functions.php: child-style=31行 → bxslider=37行）ため、
   記述順では勝てず詳細度で上回る必要がある:
     本体 非選択 .bx-wrapper .bx-pager.bx-default-pager a           = (0,3,1) → 下の (0,4,1) で勝つ
     本体 選択等 …a.active / a:hover / a:focus                      = (0,4,1) → 下の (0,5,1) で勝つ
   ※ 非選択側だけを上書きすると、選択中は本体の (0,4,1) が残って黒いままになる。必ず両方書くこと。
   ※ TOPICSのSP側はbxSliderではなく自前ドット（.hmv-topics-dots）なので、色は別途そちらで指定。 */
.hmv-top-topics .bx-wrapper .bx-pager.bx-default-pager a,
.hmv-house-gallery .bx-wrapper .bx-pager.bx-default-pager a { background: #ccc; }
.hmv-top-topics .bx-wrapper .bx-pager.bx-default-pager a.active,
.hmv-top-topics .bx-wrapper .bx-pager.bx-default-pager a:hover,
.hmv-top-topics .bx-wrapper .bx-pager.bx-default-pager a:focus,
.hmv-house-gallery .bx-wrapper .bx-pager.bx-default-pager a.active,
.hmv-house-gallery .bx-wrapper .bx-pager.bx-default-pager a:hover,
.hmv-house-gallery .bx-wrapper .bx-pager.bx-default-pager a:focus { background: var(--hmv-primary); }

/* NEWS/インフォ: 単純な横スクロール（幕張方式・bxSlider廃止=2026-07-16）
   PC=1行 / SP=固定高さ+column wrapで2行 */
.hmv-news-slider,
.hmv-info-slider {
    list-style: none; margin: 0; padding: 4px 0 10px;
    display: flex; gap: 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* 横スクロールバーを常時表示する（2026-08-10 修正）。
   Chrome 121以降は、標準プロパティ scrollbar-width / scrollbar-color がその要素に指定されていると
   ::-webkit-scrollbar 系の指定を無視する。従来は両方を併記していたため下の6px指定が効かず、
   OS設定によってはスクロール中しか出ないオーバーレイ表示になってバーが見えなくなっていた。
   → 標準プロパティは ::-webkit-scrollbar 非対応ブラウザ（Firefox等）にだけ当てる。
   WebKit系は下の ::-webkit-scrollbar 指定でカスタム描画になり、常時表示になる。 */
@supports not selector(::-webkit-scrollbar) {
    .hmv-news-slider,
    .hmv-info-slider { scrollbar-width: thin; scrollbar-color: #888 transparent; }
}
.hmv-news-slider::-webkit-scrollbar, .hmv-info-slider::-webkit-scrollbar { height: 6px; }
.hmv-news-slider::-webkit-scrollbar-thumb, .hmv-info-slider::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }
.hmv-news-slider::-webkit-scrollbar-track, .hmv-info-slider::-webkit-scrollbar-track { background: transparent; }
.hmv-news-slider .hmv-card,
.hmv-info-slider .hmv-card { flex: 0 0 300px; }
/* PCのみカード幅を個別指定（2026-08-12 指示）。NEWS=470px / インフォ=340px。
   SPは親が display:grid に変わり flex-* がグリッドアイテムに効かない（幅は grid-auto-columns:86% が決める）
   ため元から無関係だが、意図を明示するためメディアクエリで囲む。
   サムネは width:100% + aspect-ratio:4/3 なので、カード幅に比例して高さも変わる（今回はそのまま）。
   ※ 同一詳細度のため上の共通指定より後ろに置くこと。 */
@media (min-width: 783px) {
    .hmv-news-slider .hmv-card { flex: 0 0 470px; }
    .hmv-info-slider .hmv-card { flex: 0 0 340px; }
}
/* TOPのNEWS/インフォのカードは PC/SP とも枠なし・背景なしで統一（2026-08-10 指示）。
   共通の .hmv-card（白地+1pxグレー枠）は詳細ページのNEWS横スクロールやトピックス一覧でも
   使うため変更せず、この2つのスライダー配下だけを打ち消す（詳細度 0,2,0 > 0,1,0）。 */
.hmv-news-slider .hmv-card,
.hmv-info-slider .hmv-card { background: none; border: 0; }
.hmv-news-slider .hmv-card a { display: block; text-decoration: none; color: inherit; }
/* サムネは高さpx固定をやめ 4:3 の比率で統一（2026-08-10 指示）。
   元画像のサイズ・縦横比に関わらず箱が一定になる（object-fit:cover で切り取り）。
   画像が無い記事は .hmv-card-noimg のプレースホルダで同じ箱を確保し、カードが縮まないようにする。 */
.hmv-news-slider .hmv-card a > img,
.hmv-news-slider .hmv-card a > .hmv-card-noimg {
    width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block;
    /* サムネの見た目はNEWS/インフォ・PC/SPで統一（2026-08-10 指示）: 角丸 + #c7c7c7の枠 + 背景透明 */
    border: 4px solid #c7c7c7; border-radius: 8px; background: none;
}
.hmv-news-slider .hmv-card-title,
.hmv-info-slider .hmv-card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ===== -webkit-line-clamp のはみ出し漏れ対策（2026-08-17。実機で3行目の上端が覗いていた） =====
   -webkit-line-clamp は3行目以降を削除するのではなく、2行目末尾に「…」を入れて
   コンテンツボックスの高さを2行分に固定するだけで、3行目以降はそのまま下に描画され続ける。
   それを隠しているのが overflow:hidden だが、overflow のクリップ範囲は「パディングボックス」
   ＝下padding も含んだ内側のため、共通の .hmv-card-title（padding: 2px 12px 12px）の
   下12pxの帯の中に3行目が描画されて見えてしまっていた（文字の見えた量 約6px）。
   → 下の余白は padding ではなく margin で持たせる。margin はボーダーボックスの外側で
      クリップ範囲に含まれないため漏れない。間隔の実寸は従来と同じ12px。
   ※ カードは flex/grid アイテムなので独立した整形コンテキストを作る。この margin が
      カードの外へマージン相殺で抜けることはない。
   ※ 下paddingを再び足すと同じ症状が再発するので、この2セレクタでは padding-bottom を使わないこと。 */
/* NEWS: 併せてタイトル上の余白を 2px → 12px に広げる（2026-08-17 指示）。
   直前のメタ行（.hmv-news-card-meta）が padding-bottom:0 のため、従来は日付・ロゴとの間隔が
   実質2pxしかなかった。トップのスライダーとモデルハウス詳細の横スクロールで同じ見た目にするため
   .hmv-news-card 起点で指定する（詳細度 0,2,0 で共通の .hmv-card-title に勝つ）。 */
.hmv-news-card .hmv-card-title { padding: 12px 12px 0; margin-bottom: 12px; }
/* インフォ: 漏れるのはPCのみ。SPは上の @media (max-width:782px) 側で padding:0 にしてあり
   下paddingが無いため元から漏れていない。余白の実寸は変えず padding→margin の置換だけ行う。 */
@media (min-width: 783px) {
    .hmv-info-slider .hmv-card-title { padding: 2px 12px 0; margin-bottom: 12px; }
}
@media (max-width: 782px) {
    /* NEWS: 1行の横スクロール（260731 XD: カードほぼ全幅+次カードチラ見え。2行→1行に仕様変更） */
    .hmv-news-slider {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: none;
        grid-auto-columns: 86%;
        gap: 16px;
    }
    /* SP専用だった 4:3 指定は上のベース側へ統合したため削除（2026-08-10） */

    /* インフォ: 横型カード（画像左・日付/タイトル右）×2段の横スクロール（260731 XD） */
    .hmv-info-slider {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: 86%;
        gap: 16px;
    }
    /* SP専用だった枠・背景の打ち消しは上のベース側へ統合したため削除（2026-08-10） */
    .hmv-info-slider .hmv-card a {
        display: grid; grid-template-columns: 46% 1fr;
        grid-template-rows: auto 1fr; column-gap: 12px;
    }
    /* 横型カードなので画像は日付・タイトルの2行分にまたがる。
       寸法（4:3）はベース側の指定に任せる。以前あった height:110px は
       後方の .hmv-info-slider .hmv-card a > img（150px）に打ち消されて機能していなかったため削除（2026-08-10）。 */
    /* 枠・背景・角丸はベース側（NEWSと共通の見た目）に集約したためここでは持たない（2026-08-10）。
       横型カードのため画像を日付・タイトルの2行分にまたがらせる指定だけを残す。 */
    .hmv-info-slider .hmv-card a > img,
    .hmv-info-slider .hmv-card a > .hmv-card-noimg {
        grid-row: 1 / 3;
    }
    .hmv-info-slider .hmv-card .hmv-card-date { padding: 4px 0 0; }
    .hmv-info-slider .hmv-card .hmv-card-title { padding: 0; -webkit-line-clamp: 3; }
}
/* scrollヒント（トップはSPのみ表示） */
.hmv-top .hmv-scroll-hint { color: var(--hmv-muted); font-size: .8rem; margin: 0 0 8px; border-bottom: 1px solid var(--hmv-muted); display: inline-block; padding-right: 24px; }
@media (min-width: 783px) { .hmv-top .hmv-scroll-hint { display: none; } }
.hmv-hero-title {
    position: absolute; left: 0; bottom: 0;
    background: rgba(255,255,255,.9); padding: 8px 20px;
}
.hmv-hero-title h1 { margin: 0; font-size: 1.3rem; color: var(--hmv-primary); }

.hmv-section { margin: 40px 0; }
.hmv-section h2 {
    /* 縦線は ::before のピル形バーへ（2026-08-08）。padding-left = 旧 border5px + padding10px */
    font-size: 1.25rem; position: relative;
    padding-left: 15px; margin-bottom: 16px;
}

.hmv-card-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.hmv-card { background: #fff; border: 1px solid var(--hmv-border); }
.hmv-card a { display: block; text-decoration: none; color: inherit; }
.hmv-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.hmv-card-date { display: block; padding: 8px 12px 0; font-size: .8rem; color: var(--hmv-muted); }
/* カードのタイトル共通。出力元は card-news.php / card-info.php / archive-topics.php の3つ
   （画面としては トップNEWS・モデルハウス詳細NEWS・トップインフォ・トピックス一覧 の4箇所）。
   line-height は body 継承の 1.8 ではなく 1.6（2026-08-17 指示）。当初はNEWS・インフォだけに
   個別指定していたが、トピックス一覧も同値にする判断になったためここへ一本化した。
   クランプの表示高は line-height × 行数で決まるので、タイトル領域も連動する:
     NEWS・インフォPC（2行）= 54.72px → 48.64px / インフォSP（3行）= 82.08px → 72.96px。
   ハーフレディングが 6.08px → 4.56px に減るため、NEWSでは直前の日付行との実効間隔も
   18.08px → 16.56px とわずかに詰まる（上paddingは12pxのまま）。
   ※ 個別の padding / margin は .hmv-news-card / .hmv-info-slider 側（style.css:830, 834）が持つ。 */
.hmv-card-title { display: block; padding: 2px 12px 12px; font-size: .95rem; font-weight: bold; line-height: 1.6; }

.hmv-more { text-align: right; margin-top: 12px; }

.hmv-empty { color: var(--hmv-muted); padding: 12px 4px; }

.hmv-maker-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* 枠線ありのピル形ボタンは太さ2pxで統一（2026-08-12 指示）。
   ※ このチップはテンプレートからの出力が現状0件（未使用）。将来使う場合に備えて併せて2pxにしてある。 */
.hmv-maker-chips li {
    background: #fff; border: 2px solid var(--hmv-border);
    padding: 6px 14px; border-radius: 999px; font-size: .85rem;
}
.hmv-maker-chips li.hmv-maker-chip-logo { padding: 8px 14px; border-radius: 6px; }
.hmv-maker-chips li.hmv-maker-chip-logo img { height: 36px; width: auto; display: block; }

/* ---- アクセス（XDモック 4/12・10/12 準拠） ---- */
.hmv-access-map { margin-bottom: 24px; }
/* 地図高さ: XD実測 SP≈280px / PC≈678px（2026-08-03 レイアウト照合） */
.hmv-access-map iframe { width: 100%; height: 280px; border: 0; }
@media (min-width: 783px) {
    .hmv-access-map iframe { height: 680px; }
}

.hmv-access-mapbtn { margin: 0 0 28px; }
.hmv-btn-large { font-size: 1.05rem; font-weight: bold; padding: 14px 40px; }
.hmv-btn-arrow { margin-left: 6px; }

.hmv-access-h {
    color: var(--hmv-primary); font-size: 1.1rem; font-weight: bold;
    letter-spacing: .3em; margin: 0 0 6px;
}
.hmv-access-block { margin: 0 0 22px; }
.hmv-access-block p { margin: 0; }
.hmv-access-block a { color: var(--hmv-text); text-decoration: none; }
.hmv-access-sep { border-top: 1px dashed #b9bec9; padding-top: 18px; }

/* 交通手段ボックス（淡色・車/電車/バス） */
.hmv-access-ways {
    /* 淡色地はモック指定の固定値（2026-08-10 確定）。青 #e7eaf4 / 赤 #ffefe7。
       ハウスメーカー一覧の .hmv-makers-acc-body / 個別の .hmv-house-body-box と必ず同一色にすること。
       従来の color-mix(primary 8%, #fff) による算出と、上下の破線（#b9bec9）は廃止（枠線不要・角丸ありの指示）。 */
    background: #e7eaf4;
    border-radius: 6px;
    padding: 18px 16px; margin: 0 0 24px;
}
.hmv-variant-red .hmv-access-ways { background: #ffefe7; }
.hmv-access-way + .hmv-access-way { margin-top: 16px; }
.hmv-access-way h3 {
    display: flex; align-items: center; gap: 8px;
    color: var(--hmv-primary); font-size: 1rem; margin: 0 0 4px;
}
.hmv-access-way h3 svg { width: 20px; height: 20px; flex-shrink: 0; }
.hmv-access-way p { margin: 0; }

/* ==== トップページ（XDモック 2026-07-14 準拠） ==== */


/* お知らせ1行（会場設定 announce_text）。コンテンツ幅いっぱい=.ai準拠 */
.hmv-announce { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; }
.hmv-announce-icon {
    font-size: 27px; flex-shrink: 0;
    color: #0091df; /* 青バリアント実測 */
    /* 向きはFAデフォルト（右向き）のまま=.ai準拠 */
}
.hmv-variant-red .hmv-announce-icon { color: #f2973a; /* 赤バリアント実測（オレンジ） */ }
.hmv-announce-pill {
    flex: 1; display: block; text-align: center; text-decoration: none;
    background: #bbe1e8; /* 淡水色（design2.ai実測。青バリアント） */
    color: var(--hmv-primary); font-weight: bold; font-size: .95rem;
    padding: 10px 18px; border-radius: 999px;
}
@media (min-width: 783px) {
    .hmv-announce-pill { text-align: left; padding: 14px 40px; font-size: 1.05rem; }
}
/* 赤バリアント（日立）は淡グレー地+黒文字。枠線は無し＝青5会場と同じ扱い（2026-08-10 指示で修正。
   従来は白地#fff+グレー枠1px#ccc としていたが誤りだった） */
.hmv-variant-red .hmv-announce-pill {
    background: #f2f2f3; color: var(--hmv-text);
}

/* 大見出し（アイコン + 見出し + 注記 + 街並みイラスト） */
.hmv-h-major { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hmv-h-major-icon { width: 30px; height: auto; }
.hmv-h-major h2 { margin: 0; font-size: 1.4rem; font-weight: 700; } /* 新着情報=bold（XD準拠 2026-08-10） */
/* .hmv-section h2 の青い左縦バーは大見出しでは使わない（2026-08-06 指示）。.hmv-h-center と同じ打ち消し */
/* 縦線なしの見出し。線の打ち消しは ::before 側（content:none）で行う */
.hmv-section .hmv-h-major h2 { padding-left: 0; }
.hmv-h-major-note { font-size: .8rem; font-weight: bold; color: var(--hmv-text); text-decoration: none; }
.hmv-h-major-town { height: 42px; width: auto; margin-left: auto; display: none; }
/* SPのみ大見出しを縮小（2026-08-06 指示）。PCは上の指定のまま変更しない。
   アイコン20px（元画像48x80の比で高さ33.3px） / 見出し18px / 間隔8px。
   注記(.hmv-h-major-note .8rem)は据え置き。 */
@media (max-width: 782px) {
    .hmv-h-major { gap: 8px; }
    .hmv-h-major-icon { width: 20px; }
    .hmv-h-major h2 { font-size: 18px; }
    .hmv-h-major-note { margin-left: auto; } /* XD: 注記を行の右端へ（2026-08-10） */
}

/* 中見出し（縦バー） */
/* font-weight を明示（2026-08-17 指示・PC/SP共通で700）。
   未指定だと Bootstrap の h1〜h6 ルール（font-weight:500）が残るため（.hmv-h-topics と同じ理由）。
   .hmv-h-bar (0,1,0) は Bootstrap 側の h2/h3 (0,0,1) に勝つ。
   対象はトップの「ハウスメーカーNEWS」「インフォメーション」と、
   モデルハウス一覧の「会場案内図」（.hmv-h-bar を使う3箇所とも700に揃える＝案A）。 */
.hmv-h-bar { font-size: 1.05rem; font-weight: 700; position: relative; padding-left: 14px; margin: 26px 0 14px; }
/* PCのみ大きく（2026-08-12 指示）。SPは 1.05rem のまま。
   対象はトップの「ハウスメーカーNEWS」「インフォメーション」。
   会場案内図の見出しは .hmv-venue-map-head .hmv-h-bar（詳細度 0,2,0）が 1.2rem で勝つため影響しない。
   ※ 同一詳細度のためベース指定より後ろに置くこと。 */
@media (min-width: 783px) {
    .hmv-h-bar { font-size: 1.25rem; }
}

/* ===== 縦線付き見出しの縦線（2026-08-08 モック実測: 端が半円のピル形） =====
   border-left は端を丸められないため、絶対配置の ::before バーに置き換えている。
   top/bottom:0 で高さは行ボックスに追従（＝従来の border-left と同じ長さ）。
   border-radius:999px は幅の半分にクランプされ、上下が半円になる。
   各見出しの padding-left は「旧 border幅 + 旧 padding-left」に統合済み（各定義側のコメント参照）。
   新しく縦線付き見出しを足すときは、この2つのリストにセレクタを追加すること。 */
.hmv-h-bar::before,
.hmv-section h2::before,
.hmv-post-body h2::before,
.hmv-post-body h4::before,
.hmv-house-news h2::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; border-radius: 999px; background: var(--hmv-primary);
}
/* 線が5pxのもの（この行より前の4px指定を上書きするため順序が重要） */
.hmv-section h2::before,
.hmv-post-body h2::before { width: 5px; }
/* 線が黄色のもの（モデルハウス詳細のNEWS見出し） */
.hmv-house-news h2::before { background: var(--hmv-accent); }
/* 縦線を出さない見出し（従来 border-left:0 で消していたもの）。
   疑似要素方式では border を消しても線が残るため、ここで明示的に打ち消す。 */
.hmv-section .hmv-h-major h2::before,
.hmv-section h2.hmv-h-center::before { content: none; }
/* 見出し行 + 右端の街並みイラスト（town2。ハウスメーカーNEWS見出し=design2.ai準拠） */
/* 見出しと街並みイラストは上端で揃える（2026-08-17 指示）。従来の flex-end は下端揃えで、
   見出し(約24px)とイラスト(46px)の高さ差の分だけ文字が下がって見えていた。
   town2.png は不透明領域が画像端まで詰まっており透明マージンは無いため、CSS側だけで揃う。 */
/* 下の余白は -10px（2026-08-17 指示。14px → 0 → -10px と実機で詰めた結果）。
   上端揃えにしたことで行の高さは町並みイラスト(46px)が決めており、見出し文字の下には
   約22pxの空きがあるため、その分を詰めている。マイナスにした10px分だけ直後の
   .hmv-news-slider がイラストに重なるが、重なった場合はカード側が手前
   （両者とも position/z-index 無しのため、文書順が後のカードが上に描画される）。 */
.hmv-h-bar-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 26px 0 -10px; }
.hmv-h-bar-row .hmv-h-bar { margin: 0; }
.hmv-h-bar-town { height: 46px; width: auto; flex-shrink: 0; }
@media (min-width: 783px) {
    .hmv-h-bar-town { margin-right: 29%; } /* .ai PC: 右端でなくコンテンツ幅の約7割位置 */
}

/* NEWSカードの区画番号バッジ */
.hmv-no-badge {
    display: inline-block; background: var(--hmv-primary); color: #fff;
    font-weight: bold; font-size: .75rem; padding: 2px 14px; border-radius: 999px;
    margin: 8px 0 6px 12px;
}

/* NEWSカードのメタ行（日付+メーカーロゴ。モック準拠） */
.hmv-news-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; padding: 8px 12px 0;
}
.hmv-news-card-meta .hmv-card-date { padding: 0; }
/* メーカーロゴ: 汎用 .hmv-card img (width:100%/height:150px/cover) を打ち消し、
   縦横比を保って必ず全体が箱に収まるようにする（2026-08-03 村澤指摘の切れ対策） */
.hmv-card img.hmv-news-card-makerlogo {
    width: auto; height: 26px; max-width: 45%;
    object-fit: contain; object-position: right center;
}
.hmv-news-card-makername { font-size: .75rem; font-weight: bold; color: var(--hmv-muted); }

/* インフォカードのサムネ。NEWSと同じく 4:3 で統一（2026-08-10 指示）。
   ※ SP側の指定（@media 内）より後ろにあり同一詳細度のため、寸法はここが基準になる。
      SP固有の指定（grid-row / 枠）は同名プロパティを持たないので併存する。 */
.hmv-info-slider .hmv-card a > img,
.hmv-info-slider .hmv-card a > .hmv-card-noimg {
    width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block;
    /* NEWSと同一の見た目に統一（2026-08-10 指示）: 角丸 + #c7c7c7の枠 + 背景透明 */
    border: 4px solid #c7c7c7; border-radius: 8px; background: none;
}
/* 画像未設定時のプレースホルダだけは「画像が無い」と分かるよう淡グレーの塗りを戻す。
   上の background:none（詳細度 0,3,1）に負けないよう同一詳細度でこの位置に置く。 */
.hmv-news-slider .hmv-card a > .hmv-card-noimg,
.hmv-info-slider .hmv-card a > .hmv-card-noimg { background: #eee; }

/* サムネ未設定時のプレースホルダ。棟カードの .hmv-house-card2-nophoto と同じ淡グレー。
   上の各スライダー指定に併記しているが、他の文脈でも箱が潰れないよう既定値を持たせる。 */
.hmv-card-noimg { display: block; width: 100%; aspect-ratio: 4 / 3; background: #eee; }

/* NEWSカード: 本文抜粋 + カード内展開（続きを読む/折りたたむ/詳細をチェック=モック注記の挙動） */
.hmv-news-card-body {
    padding: 6px 12px 0; font-size: .8rem; color: var(--hmv-muted); line-height: 1.7;
}
.hmv-news-card-body.is-clamped {
    /* 既定は1行のみ表示（2026-09-03 クライアント指定・旧サイト準拠。全文は「続きを読む」） */
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* 2つのボタン（続きを読む/折りたたむ・詳細をチェック）は全画面幅で縦並び（2026-08-10 指示）。
   align-items:flex-start で、縦並びでもボタン幅は中身なりのまま（既定の stretch だと全幅になる）。
   メディアクエリでの上書きは無いのでこの1箇所でPC/SPとも効く。 */
/* gap は 8px → 16px（2026-08-17 指示）。「折りたたむ」の真下に「詳細をチェック」が来るため、
   8pxでは押し間違えて外部サイトへ遷移してしまう恐れがあった（ボタン高は35.6px / 33.6px）。
   gap が効くのは両方が出る is-open のときだけ（閉じている間は「続きを読む」1つのみ表示）なので、
   閉じた状態の見た目は変わらない。 */
.hmv-news-card-btns {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 16px; padding: 10px 12px 14px; margin: 0;
}
/* 枠線ありのピル形ボタンは太さ2pxで統一（2026-08-12 指示。.hmv-pill-btn / .hmv-house-tel-pill と同値） */
.hmv-news-card-more,
.hmv-news-card-fold {
    background: #fff; border: 2px solid var(--hmv-primary); border-radius: 999px;
    color: var(--hmv-primary); font-size: .75rem; font-weight: bold;
    padding: 5px 14px; cursor: pointer;
}
/* ※ .hmv-news-slider .hmv-card a { display:block } (0,2,1) に勝つ詳細度で表示制御する */
/* 「詳細をチェック」のみピル形（999px）をやめ直角に近い角丸に（2026-08-10 指示）。
   「続きを読む/折りたたむ」は 999px のまま＝2つのボタンで形が異なる。 */
.hmv-news-card-check {
    background: var(--hmv-primary); border-radius: 4px;
    color: #fff !important; font-size: .75rem; font-weight: bold;
    padding: 6px 16px; text-decoration: none;
}
.hmv-card p.hmv-news-card-btns a.hmv-news-card-check { display: none; }
.hmv-news-card.is-open p.hmv-news-card-btns a.hmv-news-card-check { display: inline-flex; align-items: center; }
.hmv-news-card .hmv-news-card-fold { display: none; }
.hmv-news-card.is-open .hmv-news-card-more { display: none; }
.hmv-news-card.is-open .hmv-news-card-fold { display: inline-block; }
.hmv-news-card.is-open .hmv-news-card-body { display: block; -webkit-line-clamp: none; overflow: visible; }

/* TOPICS帯（斜めストライプ=会場カラー淡色・全幅・上下は白丸チェーンの波縁）
   幕張(makuhari-hp.jp)の .top_topics 実装を流用（村澤了承 2026-08-03）。
   縞はCSSグラデ（幕張同様。淡色=primary 9%は design2.ai 実測 #e7ebf5 と一致）、
   波縁は幕張の top_topics_bgu/bgd.png（白一色・バリアント共通）。
   円幅44px= .ai実測（150dpi renderで約92px≒44CSS px） */
.hmv-top-topics {
    position: relative;
    /* 左右16px→24px（2026-08-12・案E）。.bx-wrapper から移した余白をここで持つ。
       上下44/50pxは縞帯と波縁（::before/::after）に必要なので変更しないこと。 */
    margin: 44px calc(50% - 50vw); padding: 44px 24px 50px;
    background: repeating-linear-gradient(-45deg,
        #eef2f8 0 5px, #fff 5px 10px);
    background: repeating-linear-gradient(-45deg,
        color-mix(in srgb, var(--hmv-primary) 9%, #fff) 0 5px, #fff 5px 10px);
    text-align: center; overflow: hidden;
}
.hmv-top-topics::before,
.hmv-top-topics::after {
    content: ''; position: absolute; left: 0; right: 0; pointer-events: none;
}
/* 画像構造(実測): bgu=白帯(上)+下向き弧(y56-80/72px幅タイル)+下方向シャドウ / bgd=上下鏡像。
   44px幅に縮小(×0.611)し、弧の行が帯境界に来るようオフセット。白帯部分は隠す */
.hmv-top-topics::before {
    top: 0; height: 50px;
    background: url(images/common/top_topics_bgu.png) center top -34px / 44px auto repeat-x;
}
.hmv-top-topics::after {
    bottom: 0; height: 51px;
    background: url(images/common/top_topics_bgd.png) center bottom -34px / 44px auto repeat-x;
}
/* font-weight を明示（2026-08-12 指示・PC/SP共通で700）。
   未指定だと Bootstrap の h1〜h6 ルール（font-weight:500）が残るため。
   .hmv-h-topics (0,1,0) は Bootstrap 側の h2 (0,0,1) に勝つ。 */
.hmv-h-topics { color: var(--hmv-primary); font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; margin: 0; }
.hmv-h-topics-note { font-weight: bold; margin: 4px 0 22px; }
.hmv-topics-slider { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; }
/* PCでは max-width を解除する（2026-08-12 指示・案A）。
   PCはこの <ul> が bxSlider のスライダー本体になり、全スライド分の幅がインラインで書き込まれるが、
   CSSの max-width はインラインの width より優先されるため 1000px で頭打ちになり、
   2枚並べたときに端が欠けていた。SP（max-width:782px 側）は従来どおり。
   ※ 同一詳細度のためベース指定より後ろに置くこと。 */
@media (min-width: 783px) {
    .hmv-topics-slider { max-width: none; }
}
/* SP: センターモード（1枚+左右チラ見え+スナップ。design2.ai p1準拠）。PCはbxSliderが上書き */
@media (max-width: 782px) {
    .hmv-topics-slider {
        display: flex; gap: 12px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 0 11%; scrollbar-width: none;
    }
    .hmv-topics-slider::-webkit-scrollbar { display: none; }
    .hmv-topics-slider .hmv-topics-card { flex: 0 0 78%; scroll-snap-align: center; }
}
.hmv-topics-dots { display: flex; justify-content: center; gap: 10px; margin: 16px 0 0; }
/* SPのTOPICSは自前ドット。非選択は #cccccc（2026-08-17 指示。従来は #c9cfdd の青みグレー）で、
   PCのbxSliderページャ（上の .bx-default-pager 指定）と同色に揃える。選択中は下の会場カラー。 */
.hmv-topics-dots button {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: #ccc; cursor: pointer;
}
.hmv-topics-dots button.is-current { background: var(--hmv-primary); }
.hmv-topics-card a { display: block; }
/* バナーの表示領域は 4:3 固定（2026-08-17 指示）。従来は width:100% + height:auto の素通しで、
   元画像の縦横比の差がそのまま表示高の差になっていた（開発データ 683x540 と 691x540 で約4pxの差）。
   比率の違う画像は object-fit:cover で拡大し、はみ出しを上下（または左右）中央基準で切り取る。
   入稿デフォルトバナー（banner_LINE.jpg / banner_Instagram.jpg = 456x342）はちょうど4:3のため
   切り取りは発生しない。NEWS/インフォのサムネ（style.css:798-803）と同じ書き方に揃えてある。
   ※ クライアントへの推奨入稿サイズは 4:3（例 1200x900）。重要な文字は中央寄せにしてもらうこと。 */
.hmv-topics-card img {
    width: 100%; aspect-ratio: 4 / 3; height: auto;
    object-fit: cover; object-position: center;
    display: block; border-radius: 6px;
}
/* アイキャッチ未設定時のフォールバック。上の画像と同じ 4:3 の箱にする（2026-08-17 指示。
   従来は height:160px 固定で、画像ありのカードと高さが揃っていなかった）。 */
.hmv-topics-card-alt {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
    background: #fff; border: 1px solid var(--hmv-border); border-radius: 6px; font-weight: bold;
}
/* TOPICSのスライダー枠は透明にする（2026-08-12 指示）。
   bxSlider本体CSS（jquery.bxslider.min.css）の .bx-wrapper が
   background:#fff / border:5px solid #fff / box-shadow:0 0 5px #ccc を持っており、
   同詳細度 (0,1,0) の style.css:733 より後に読み込まれる（functions.php: child-style=31行 → bxslider=37行）
   ため打ち消しが効いていなかった。ここは (0,2,0) なので記述順に関係なく勝つ。
   対象をTOPICSに限定しているので、モデルハウス詳細の外観写真スライダーには影響しない。 */
/* 左右の余白は .bx-wrapper ではなくセクション側（.hmv-top-topics の padding）に持たせる
   （2026-08-12 指示・案E）。
   bxSlider は .bx-wrapper の max-width を slideWidth×maxSlides+slideMargin（=964px）に設定するため、
   ここに padding を置くと box-sizing:border-box（style.css:39 の全要素指定）により内側が48px削られ、
   2枚分の964pxが入らず端が欠けていた（実測 wrapper 904 / viewport 856）。 */
.hmv-top-topics .bx-wrapper {
    padding: 0;
    background: transparent; border: 0; box-shadow: none;
}

/* 取説見出し右の電球飾り（納品SVG denkyuu.svg・.ai実測 2026-08-03）
   PC=見出し右横（中心+128px・幅96px・見出しより30px上から） / SP=右上（幅58px）
   opacityはかけない（薄すぎて見えないため。SVGの色そのまま=2026-08-03 村澤指示） */
.hmv-guide-head { position: relative; }
.hmv-guide-bulb {
    position: absolute; pointer-events: none;
    width: 58px; right: 16px; top: -28px;
}
@media (min-width: 783px) {
    .hmv-guide-bulb { width: 96px; right: auto; left: calc(50% + 128px); top: -30px; }
}

/* センター見出し（取説）。.hmv-section h2 の左バーは打ち消す */
/* font-weight を明示（2026-08-17 指示・PC/SP共通で700）。未指定だと Bootstrap の
   h1〜h6 ルール（font-weight:500）が残り、下の注記(bold)より細いという逆転が起きていた。
   .hmv-h-center (0,1,0) は Bootstrap 側の h2 (0,0,1) に勝つ。 */
/* margin-bottom はここでは持たない。(0,1,0) では .hmv-section h2 の margin-bottom:16px (0,1,1) に
   負けるため、従来書かれていた 4px は効いていなかった。値は下の (0,2,1) 側に一本化する。 */
.hmv-h-center { text-align: center; font-size: 1.4rem; font-weight: 700; margin-top: 0; }
/* 縦線なしの見出し。線の打ち消しは ::before 側（content:none）で行う。
   font-size もここで持つ（2026-08-17 指示でSPもPCと同じ1.4remに統一）。
   上の .hmv-h-center{font-size:1.4rem} は詳細度 (0,1,0) で .hmv-section h2 (0,1,1) の
   1.25rem に負けるため、タグ+2クラス (0,2,1) で明示的に上書きする必要がある。
   ※ 従来あった PC限定の @media (min-width:783px) は、SPも同値になり不要のため削除。
   margin-bottom も同じ理由でここに置く。16px（.hmv-section h2 の既定）→ 12px に狭める
   （2026-08-17 指示・PC/SP共通）。この見出しだけが対象で、他の .hmv-section h2 は16pxのまま。
   直後の .hmv-h-center-note は margin-top:0 なので、見出しと注記の間隔＝この12pxになる。 */
.hmv-section h2.hmv-h-center { padding-left: 0; font-size: 1.4rem; margin-bottom: 12px; }
/* 注記「YouTubeにて公開中！」。font-size は PC/SP とも .95rem（2026-08-17 指示。
   従来は未指定で body の 1rem を継承していた）。 */
.hmv-h-center-note { text-align: center; font-size: .95rem; font-weight: bold; margin: 0 0 18px; }
.hmv-center { text-align: center; }

/* 取説動画の埋め込み（16:9） */
.hmv-video-embed { max-width: 760px; margin: 0 auto 12px; aspect-ratio: 16 / 9; }
/* 取説動画が未入稿の会場のプレースホルダ（2026-07-22 仕様変更の coming soon 対応・2026-08-28）。
   幅・比率・下マージンは .hmv-video-embed + .hmv-video-title と揃えてあり、
   動画URLが入った時点で見た目の位置が変わらない。※760px は上と同値。変更時は両方合わせること。 */
.hmv-video-comingsoon {
    max-width: 760px; margin: 0 auto 18px; aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--hmv-border); border-radius: 8px;
}
.hmv-video-comingsoon span {
    color: var(--hmv-primary); letter-spacing: .06em;
    font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1;
}
.hmv-video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.hmv-video-title { text-align: center; font-size: .9rem; font-weight: bold; margin: 0 0 18px; }
/* PCのみ左寄せ（2026-08-10 指示・モック準拠）。SPは中央寄せのまま。
   左端は上の動画の左端に揃える。動画は .hmv-video-embed が max-width:760px の中央配置なので、
   タイトルも同じ760pxの箱に収めて中央に置く（＝箱の左端＝動画の左端）。
   ※ 760px は .hmv-video-embed と同値。変更するときは両方を合わせること。
   ※ 同一詳細度のためベース指定より後ろに置くこと。 */
@media (min-width: 783px) {
    .hmv-video-title { text-align: left; max-width: 760px; margin: 0 auto 18px; }
}
.hmv-video-title-icon { color: #e62117; margin-right: 6px; }

/* 白地pillボタン（一覧を見る / YouTubeチャンネルへ） */
.hmv-pill-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; border: 2px solid var(--hmv-primary); color: var(--hmv-text);
    font-weight: bold; text-decoration: none; padding: 12px 34px; border-radius: 999px;
}
.hmv-pill-arrow { color: var(--hmv-primary); }

/* ハウスメーカーロゴ: SP2列 / PC4列（デザイナー指定の固定列数） */
.hmv-makers-grid {
    list-style: none; margin: 0 0 22px; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
/* トップのハウスメーカー: PC=4列グリッド / SP=3段の自動横スクロールマーキー
   （幕張 .logo-slider / .logo-track 方式・2026-08-03 村澤指示。
     シームレスループのため各行は同じ列を2周分出力し translateX(-50%) で戻す。
     継ぎ目を揃えるため間隔は gap でなく各セルの margin-right で持つ） */
.hmv-makers-marquees { display: none; }
@media (max-width: 782px) {
    .hmv-top-makers .hmv-makers-pconly { display: none; }
    .hmv-makers-marquees { display: block; margin: 0 calc(50% - 50vw) 22px; }
    .hmv-makers-marquee { overflow: hidden; }
    .hmv-makers-marquee + .hmv-makers-marquee { margin-top: 10px; }
    .hmv-makers-track {
        list-style: none; margin: 0; padding: 0;
        display: flex; width: max-content;
        /* duration は page-top.php が行のセル数から算出して inline style で上書きする
           （全行を約50px/秒に揃えるため）。ここの60sは万一出力されなかった場合の保険。 */
        animation: hmv-scroll-left 60s linear infinite;
        /* Safari対策（2026-08-28）: トラックは画面幅の十数倍ある横長要素なので、
           レイヤー昇格させないと1周目にタイルを再ラスタライズし続けてカクつき、
           セルが一瞬消える（2周目以降はキャッシュが効いて滑らかになる＝報告された症状）。
           translate3d と併せて合成レイヤーを固定する。 */
        will-change: transform;
        backface-visibility: hidden;
    }
    /* セルはロゴの縦横比に追従する可変幅（XD SPモック準拠 2026-08-03。
       高さ88px固定・幅auto → 行の右端が自然にずれて段違いになる。
       極端な横長ロゴは max-width 上限で contain（少し小さめ表示） */
    .hmv-makers-track .hmv-makers-cell {
        flex: 0 0 auto; width: auto; height: 88px;
        padding: 12px 18px; margin-right: 12px;
    }
    .hmv-makers-track .hmv-makers-cell img {
        height: 100%; width: auto; max-width: 64vw; object-fit: contain;
    }
}
/* -50% = 2周分出力したトラックのちょうど半分＝1周目の先頭に戻る位置。
   前半と後半のセル幅が完全に一致していることが前提なので、ロゴの <img> には
   必ず width/height 属性を出す（page-top.php の $hmv_maker_cell 参照）。
   translate3d で書くのは Safari のGPU合成を確実に使わせるため。 */
@keyframes hmv-scroll-left {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hmv-makers-track { animation: none; }
}
/* XDのロゴカードは横長の帯型(高さ約66px)。セルを固定高さにしてロゴを枠いっぱいに表示 */
.hmv-makers-cell {
    background: #fff; border: 1px solid var(--hmv-border);
    display: flex; align-items: center; justify-content: center;
    padding: 8px 14px; height: 72px; text-align: center; font-size: .9rem; font-weight: bold;
    overflow: hidden;
}
/* TOPページのメーカーロゴセルだけ角丸に（2026-08-08 指示）。基底 .hmv-makers-cell は変更しない。
   .hmv-top-makers 配下に限定しているため、モデルハウス一覧のアコーディオン内セル
   （.hmv-makers-acc-body .hmv-makers-cell・別途6px指定済み）や他の用途を巻き込まない。
   PCの4列グリッドとSPの3段マーキーはどちらもこのセルを使うため、この1行で両方に効く。
   角に届く画像は無く、基底に overflow:hidden もあるため追加指定は不要。
   半径6px = アコーディオン内セルと同値。 */
.hmv-top-makers .hmv-makers-cell { border-radius: 6px; }
.hmv-makers-cell img {
    width: 88%; height: 100%; object-fit: contain;
    /* 元画像が小さくても枠に合わせて拡大（XDのロゴサイズ感） */
}

@media (min-width: 783px) {
    .hmv-h-major-town { display: block; }
    .hmv-makers-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .hmv-hero-lettering { display: none; } /* PCは画像上の英字オーバーレイに切替 */
    /* 波装飾はPC用仮画像に焼き込み済み（CSS側は撤去。本番画像も焼き込み前提） */
}

/* ==== ハウスメーカー一覧 4-1（XDモック 2/12・8/12 準拠） ==== */

/* 出展ハウスメーカー一覧アコーディオン */
/* 大枠を角丸に（2026-08-07 指示）。紺の見出しボタンと淡青の本体が枠の端に接するため、
   overflow:hidden で角を切り取る。閉じたとき（slideToggle で本体が display:none）は
   見出しだけが残り、4隅とも丸くなる。 */
.hmv-makers-acc { margin: 4px 0 32px; border-radius: 8px; overflow: hidden; }
.hmv-makers-acc-head {
    width: 100%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--hmv-primary); color: #fff;
    font-weight: bold; font-size: 1.05rem; padding: 13px 16px;
}
/* フォーカスリングの打ち消しは button:focus:not(:focus-visible)（ベース部）に一本化したため
   ここの個別指定は削除（2026-08-12） */
.hmv-makers-acc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; color: var(--hmv-primary); font-weight: bold; line-height: 1;
}
.hmv-makers-acc-body {
    /* 淡色地はモック指定の固定値（2026-08-10 確定）。青 #e7eaf4 / 赤 #ffefe7。
       ハウスメーカー個別ページの .hmv-house-body-box と必ず同一色にすること。 */
    background: #e7eaf4;
    padding: 20px 16px;
}
.hmv-variant-red .hmv-makers-acc-body { background: #ffefe7; }
/* SPのみ見出しのデザインを変更（モック実測 2026-08-08）。PCは紺ベタ帯のままで正しい。
   モック: 見出しの背景は本体と同じ淡青（帯なし）／文字は黒／アイコンは白丸を廃し紺の横棒のみ。
   文字サイズは現状維持（1.05rem）＝石塚さん指示。モックの縮尺が特定できず換算できないため。
   ※ .hmv-makers-acc-head / -icon の背景・色指定より後ろに置くこと（メディアクエリは詳細度を上げない）。 */
@media (max-width: 782px) {
    .hmv-makers-acc-head {
        background: #e7eaf4;      /* 本体と同色にして帯を消す */
        color: var(--hmv-text);
    }
    /* 赤バリアント（日立）。直下の .hmv-makers-acc-body と必ず同一色にすること（2026-08-12 修正）。
       本体側だけ2色対応にして見出し側に入れ忘れており、日立のSPで見出しだけ青が残っていた。 */
    .hmv-variant-red .hmv-makers-acc-head { background: #ffefe7; }
    .hmv-makers-acc-icon {
        /* 白丸をやめて紺の横棒だけにする。幅・高さは中の fa-minus / fa-plus の字面に任せる */
        width: auto; height: auto; border-radius: 0;
        background: none;
        color: var(--hmv-primary);
    }
}
.hmv-makers-acc-body .hmv-makers-grid { margin: 0; }
/* アコーディオン内のロゴセルだけ角丸に（2026-08-07 指示・案A）。
   白い矩形はセル自身の background:#fff で、ロゴ画像は幅88%+padding(8px 14px)により
   角に届かないため、border-radius だけで丸くなる（overflow:hidden は 1055行で指定済み）。
   TOPページのメーカーロゴ一覧（.hmv-makers-grid / .hmv-makers-track）は対象外。 */
.hmv-makers-acc-body .hmv-makers-cell { border: 0; border-radius: 6px; }
.hmv-makers-cell a,
.hmv-makers-cell .hmv-makers-cellbtn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; text-decoration: none; color: inherit;
}
/* メーカー絞り込み（4-1アコーディオン内セル=トグルボタン。設計: docs/design/mh_maker_filter.md） */
.hmv-makers-cell .hmv-makers-cellbtn {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.hmv-makers-cell.is-selected { outline: 2px solid var(--hmv-primary); outline-offset: -2px; }
.hmv-house-cards-empty { text-align: center; font-weight: bold; margin: 24px 0; }

/* モデルハウスカード（SP=横スライダー / PC=3列グリッド） */
.hmv-house-cards {
    list-style: none; margin: 0 0 40px; padding: 0 0 8px;
    display: flex; gap: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
/* 棟カード（No.帯〜ブランド名）を角丸に（2026-08-07 指示）。
   No.の紺帯と外観写真が枠の端に接するため、overflow:hidden で角を切り取る。 */
.hmv-house-card2 {
    flex: 0 0 78%; scroll-snap-align: start;
    background: #fff; border: 1px solid var(--hmv-border);
    border-radius: 8px; overflow: hidden;
    scroll-margin-top: 16px;
}
.hmv-house-card2 a { display: block; text-decoration: none; color: inherit; }
.hmv-house-card2-no { display: block; background: var(--hmv-primary); color: #fff; font-weight: bold; padding: 6px 14px; }
.hmv-house-card2-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hmv-house-card2-nophoto { background: #eee; }
.hmv-house-card2-logo { display: flex; align-items: center; min-height: 46px; padding: 12px 14px 0; font-weight: bold; font-size: .9rem; }
.hmv-house-card2-logo img { width: 70%; height: 36px; object-fit: contain; object-position: left center; }
.hmv-house-card2-name { display: block; padding: 6px 14px 16px; font-weight: bold; }

/* 会場案内図セクション（プリント+吹き出し） */
/* 会場案内図は「見出し+プリントボタン+吹き出し+図」をまとめて1枚のカードにする（2026-08-08 指示）。
   線の見た目は棟カード(.hmv-house-card2)と同一: 1px solid var(--hmv-border) + 角丸8px + 白地。PC/SP共通。
   図の画像は padding の内側に収まり角に届かないため overflow:hidden は不要。 */
.hmv-venue-map-sec {
    margin: 40px 0;
    background: #fff;
    border: 1px solid var(--hmv-border);
    border-radius: 8px;
    padding: 16px;
}
.hmv-venue-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* 会場案内図の見出しだけサイズを上げる（2026-08-08 指示）。
   縦線付き見出しはサイト内で 1.05〜1.25rem・線4〜5px とばらついており統一が難しいため、
   .hmv-h-bar 全体ではなくこの見出しだけを変更する（トップのハウスメーカーNEWS／
   インフォメーションの見出しは 1.05rem・4px のまま）。
   詳細度 (0,2,0) で .hmv-h-bar (0,1,0) に勝つ。線の色・種類はベース指定を引き継ぐ。 */
.hmv-venue-map-head .hmv-h-bar { margin: 0; font-size: 1.2rem; padding-left: 15px; }
.hmv-venue-map-head .hmv-h-bar::before { width: 5px; } /* 詳細度(0,2,1)で共通の4px指定に勝つ */
/* プリントボタン・吹き出しは入稿画像（MH_all_btn_01 / MH_all_img_01・バリアント別） */
.hmv-map-print { background: none; border: 0; padding: 0; cursor: pointer; }
/* 納品画像 MH_all_btn_01.png は 292x88px。height だけ指定し幅は比率で追従させる。
   36px = 表示幅119px（2026-08-08 指示。従来44px＝146px） */
.hmv-map-print img { height: 36px; width: auto; display: block; }
.hmv-map-callout { text-align: center; margin: 14px 0 4px; }
.hmv-map-callout img { max-width: min(90%, 420px); height: auto; }
/* 図そのものの枠は廃止（2026-08-08 指示）。白地+padding+枠線は「額縁」を作るための指定だったため、
   外側の .hmv-venue-map-sec にカード枠を移したのに伴いまとめて外す。 */
.hmv-venue-map { background: none; border: 0; padding: 0; }
.hmv-venue-map img { width: 100%; display: block; }

/* 会場案内図クリッカブルマップ（区画バッジ→モデルハウス詳細）。
   座標は%（images/houses/map-hotspots/{slug}.json）でレスポンシブに追従。 */
.hmv-map-stage { position: relative; display: block; line-height: 0; }
.hmv-map-hotspot {
    /* クリック領域（大きめ＝押しやすさ）。それ自体は常に透明。 */
    position: absolute;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%); /* left/top はバッジ中心 */
    display: block;
    z-index: 2;
    background: transparent;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
/* ホバー/フォーカスのオレンジ丸は「元のバッジサイズ」で描画（--hs-badge = バッジ径÷クリック径）。
   クリック領域は大きいまま、見た目のハイライトだけ下地バッジに一致させる。 */
.hmv-map-hotspot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--hs-badge, 100%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    transition: box-shadow .12s ease, background-color .12s ease;
}
.hmv-map-hotspot:hover::before,
.hmv-map-hotspot:focus-visible::before {
    background: rgba(255, 255, 255, .25);
    box-shadow: 0 0 0 3px var(--hmv-accent, #f26522), 0 0 10px rgba(0, 0, 0, .25);
}
@media print {
    .hmv-map-hotspot { display: none !important; }
}

/* メーカー絞り込み中: SPは横スクロールをやめ縦1列（PC風。数棟しかないため=2026-08-03 村澤指示） */
@media (max-width: 782px) {
    .hmv-house-cards.is-filtered {
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .hmv-house-cards.is-filtered .hmv-house-card2 { flex: none; width: 100%; }
}

@media (min-width: 783px) {
    .hmv-house-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; overflow: visible; }
    .hmv-house-card2 { flex: none; }
}

/* 最近の投稿（MH詳細・260731モックで追加。5件/ページのクライアントサイドページャ） */
.hmv-house-recent { max-width: 760px; margin: 36px auto 8px; }
.hmv-recent-pager { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.hmv-recent-pager:empty { display: none; }
.hmv-recent-pager button {
    min-width: 34px; height: 34px; padding: 0 8px; cursor: pointer;
    background: #fff; border: 1px solid #707070; /* デザイン実測(2026-08-03) */
    border-radius: 6px;
    color: #939393; font-weight: bold;
}
/* 現在ページ: 塗りつぶしではなく白地+紺文字（デザイン実測 2026-08-03） */
.hmv-recent-pager button.is-current {
    color: var(--hmv-primary);
}

/* ==== モデルハウス詳細 4-2（XDモック 3/12 SP・9/12 PC準拠） ==== */
.hmv-house-main { margin-bottom: 8px; }
@media (min-width: 783px) {
    .hmv-house-main {
        display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px;
        align-items: center; margin-bottom: 16px;
    }
}
.hmv-house-head { margin-bottom: 18px; }
.hmv-house-no {
    color: var(--hmv-primary); font-weight: bold; font-size: 1.15rem;
    letter-spacing: .06em; margin: 0 0 2px;
}
.hmv-house-name { font-size: 1.5rem; font-weight: bold; margin: 0 0 12px; }
.hmv-house-makerlogo { margin: 0; }
.hmv-house-makerlogo img {
    height: 58px; width: auto; min-width: 140px; max-width: 60%; object-fit: contain;
    background: #fff; border: 1px solid var(--hmv-border); padding: 8px 14px;
}
.hmv-house-makername { font-weight: bold; margin: 0; }

/* モック実測(2026-08-07): 左カラムは「NO.+モデルハウス名=上端 / メーカーロゴ=下端」の上下振り分け
   （モックのロゴ枠下端=写真下端とほぼ一致。開発中は3要素がまとまって縦中央に寄っていた）。
   左カラムだけ stretch で写真と同じ高さに伸ばし、ロゴを margin-top:auto で下端へ落とす。
   要素そのものの大きさ（文字サイズ・ロゴ寸法）は変更しない。
   ※ このブロックは上の .hmv-house-head / .hmv-house-makerlogo / .hmv-house-makername の
     margin 指定より後ろに置くこと。メディアクエリは詳細度を上げないため、
     先に書くと後続の margin:0 / margin-bottom:18px に打ち消される。 */
@media (min-width: 783px) {
    .hmv-house-head {
        align-self: stretch;
        display: flex; flex-direction: column;
        margin-bottom: 0;
    }
    .hmv-house-makerlogo,
    .hmv-house-makername { margin-top: auto; }
}

/* 外観写真スライダー（角丸8px=モック注記） */
.hmv-house-gallery { margin: 0 0 24px; }
.hmv-house-photos-slider { list-style: none; margin: 0; padding: 0; }
.hmv-house-photos-slider li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 8px; }
/* bxSlider本体CSS（jquery.bxslider.min.css）の .bx-wrapper が持つ
   border:5px solid #fff / box-shadow:0 0 5px #ccc / background:#fff を打ち消す（2026-08-17 指示）。
   白5pxの枠が地色と同化して「透明な枠+薄い影」に見え、しかも .bx-wrapper には角丸が無いため
   角丸8pxの写真の外に長方形の縁が出ていた。写真が1枚のときはbxSliderが初期化されず
   （page-houses.js: children().length > 1）この要素自体が無いので、症状は2枚以上のときだけ出る。
   style.css:762 の .bx-wrapper 打ち消しは、同詳細度 (0,1,0) のライブラリCSSが後に読み込まれる
   （functions.php: child-style=31行 → bxslider=37行）ため効かない。ここは (0,2,0) なので順序に関係なく勝つ。
   ※ TOPICS側は 2026-08-12 に .hmv-top-topics .bx-wrapper で同じ手当てを済ませていたが、
      当時スコープをTOPICSに限定したためこの外観写真スライダーだけが取り残されていた。
   ※ 枠5pxが無くなる分、写真の表示領域が上下左右に5px広がる。ドットページャー位置（下の bottom:-28px）と
      margin-bottom:36px は枠ありの見た目で決めた値なので、実機確認後に微調整の可能性あり。 */
.hmv-house-gallery .bx-wrapper { margin-bottom: 36px; border: 0; box-shadow: none; background: transparent; }
.hmv-house-gallery .bx-viewport { border-radius: 8px; }
.hmv-house-gallery .bx-pager { bottom: -28px; }

/* 本文（淡色ボックス+クリップ装飾。SPはクランプ+もっと見る） */
.hmv-house-body-box {
    position: relative;
    /* 淡色地はモック指定の固定値（2026-08-10 確定）。青 #e7eaf4 / 赤 #ffefe7。
       従来の color-mix(primary 7%, #fff) による算出（青#eef1f7 / 赤#fbedef）は誤りだったため廃止。
       ハウスメーカー一覧の .hmv-makers-acc-body と必ず同一色にすること。 */
    background: #e7eaf4;
    padding: 18px 16px; margin: 0 0 24px; border-radius: 6px;
}
.hmv-variant-red .hmv-house-body-box { background: #ffefe7; }
/* クリップ = 納品PNG wire_clip.png（images/common/{navy|red}/・55x66・傾きは作画済み）。
   モック実測(2026-08-07・ボックス幅968px換算): 幅33px / 右端から42px。
   （青モック 52x64px・右66px、赤モック 46x56px・右59px を各々のスケールで換算し一致）
   縦位置は2枚のモックが食い違い（青=上端+9px＝内側 / 赤=上端-12px＝はみ出す）、
   赤が正・青が誤りと確認（2026-08-07 石塚さん判断）。赤の値を採用する。
   色は画像側で持つため color / transform は不要。 */
.hmv-house-body-clip {
    position: absolute; top: -12px; right: 42px;
    width: 33px; height: auto;
}
.hmv-house-body-box .hmv-house-body { margin: 0; }
.hmv-house-more {
    display: block; background: none; border: 0; cursor: pointer;
    color: var(--hmv-primary); font-weight: bold; font-size: .95rem;
    padding: 10px 0 0; margin: 0;
}
@media (max-width: 782px) {
    .hmv-house-body.is-clamped {
        display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
    }
}
@media (min-width: 783px) {
    .hmv-house-more { display: none; } /* PCは全文表示（モック準拠） */
}

/* 外部リンクアイコン（メーカーHPボタン） */
.hmv-ext-icon { font-size: 15px; color: var(--hmv-primary); }
/* 「メーカーのホームページはこちら」だけ文字色を枠線・アイコンと同じ会場カラーに揃える（2026-08-10 指示）。
   .hmv-pill-btn の color:var(--hmv-text) はTOPの「一覧を見る」「YouTubeチャンネルへ」と共用のため
   基底は変えず、このボタンを包む .hmv-house-hp 配下だけを上書きする（詳細度 0,2,0 > 0,1,0）。 */
.hmv-house-hp .hmv-pill-btn { color: var(--hmv-primary); }

/* 区切り装飾（グレー街並み+スカラップ）= 納品画像 deteil_parts_01（バリアント別・PC/SP別）
   CSS合成（radial-gradient+town_grey）は廃止（2026-08-02 XD切り出し排除） */
.hmv-sec-divider {
    height: 100px; margin: 8px calc(50% - 50vw) 28px;
    background: url(images/common/navy/deteil_parts_01_SP.png) center bottom / 100% 100% no-repeat;
}
.hmv-variant-red .hmv-sec-divider { background-image: url(images/common/red/deteil_parts_01_SP.png); }
@media (min-width: 783px) {
    .hmv-sec-divider { height: 120px; background-image: url(images/common/navy/deteil_parts_01_PC.png); }
    .hmv-variant-red .hmv-sec-divider { background-image: url(images/common/red/deteil_parts_01_PC.png); }
}

/* アイコン見出し（ポイント/TEL/NEWS共通の紺丸アイコン） */
.hmv-icon-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--hmv-primary); color: #fff;
}
.hmv-icon-circle svg { width: 18px; height: 18px; }
.hmv-icon-circle i { font-size: 16px; }
/* 入稿画像版のアイコン（search_deteil_button_*） */
.hmv-icon-img { width: 34px; height: 34px; flex-shrink: 0; }
.hmv-icon-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.15rem; font-weight: bold; margin: 0 0 14px;
}

/* ポイント */
.hmv-house-point { margin: 0 0 28px; }
.hmv-house-point-text { margin: 0; }

/* TEL（緑枠ピル=モック準拠・タップ発信） */
.hmv-house-telsec { margin: 0 0 32px; }
.hmv-house-telsec .hmv-house-tel-pill { text-align: center; margin: 0; }
.hmv-house-tel-pill a {
    display: inline-flex; align-items: center; gap: 10px;
    border: 2px solid #00a45c; border-radius: 999px;
    color: var(--hmv-text); font-size: 1.4rem; font-weight: bold;
    text-decoration: none; padding: 10px 34px;
}
.hmv-house-tel-pill img { width: 22px; height: auto; }

/* 該当ハウスメーカーのNEWS */
.hmv-house-makernews { margin: 0 0 32px; }
.hmv-makernews-head {
    display: flex; align-items: center; gap: 12px;
    border-bottom: 2px solid var(--hmv-border); padding-bottom: 10px; margin: 0 0 8px;
    font-size: 1.2rem;
}
.hmv-makernews-head img { height: 36px; width: auto; }
/* メーカーロゴだけ NEWS の行の高さに合わせる（2026-08-07 指示・試行）。
   1.2em = 親h2の font-size 1.2rem(19.2px) × 1.2 = 23.04px。
   1.2 は Bootstrap の h1〜h6 ルール由来の line-height で、NEWS の行ボックス高と一致する。
   直値 23.04px ではなく em にして font-size 変更に追従させる。
   セレクタは .hmv-makernews-head img (0,1,1) に勝つよう2クラス (0,2,0) にすること。
   ※ アイコン(.hmv-icon-img)は36pxのまま＝見出し全体の高さ48pxは変わらない。 */
.hmv-makernews-head .hmv-makernews-logo { height: 1.2em; }
.hmv-makernews-name { font-weight: bold; }
.hmv-makernews-label { font-weight: bold; letter-spacing: .12em; }
.hmv-scroll-hint { color: var(--hmv-muted); font-size: .8rem; margin: 0 0 8px; border-bottom: 1px solid var(--hmv-muted); display: inline-block; padding-right: 24px; }

/* NEWSカードの横スクロール（詳細ページ用・bxSlider不使用） */
.hmv-news-hscroll {
    list-style: none; margin: 0; padding: 0 0 8px;
    display: flex; gap: 14px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.hmv-news-hscroll .hmv-card { flex: 0 0 68%; scroll-snap-align: start; }
.hmv-news-hscroll .hmv-card a > img { width: 100%; height: 150px; object-fit: cover; display: block; }

/* ==== 一覧アーカイブ（news / info。カード部品をグリッド表示） ==== */
.hmv-card-list-grid {
    list-style: none; margin: 0 0 32px; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 16px;
}
.hmv-card-list-grid .hmv-card a > img { width: 100%; height: 190px; object-fit: cover; display: block; }
@media (min-width: 783px) {
    .hmv-card-list-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .hmv-card-list-grid .hmv-card a > img { height: 170px; }
}

/* ページネーション（WP標準 the_posts_pagination） */
.hmv-archive .navigation.pagination { text-align: center; margin: 8px 0 24px; }
.hmv-archive .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hmv-archive .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 8px;
    background: #fff; border: 1px solid var(--hmv-border); border-radius: 6px;
    text-decoration: none; color: var(--hmv-text); font-weight: bold;
}
.hmv-archive .page-numbers.current { background: var(--hmv-primary); border-color: var(--hmv-primary); color: #fff; }
.hmv-archive .page-numbers.dots { border: 0; background: none; }
.hmv-archive .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 783px) {
    .hmv-news-hscroll .hmv-card { flex-basis: 300px; }
    .hmv-house-photos-slider li img { aspect-ratio: 16 / 9; }
}

/* ---- スマホ（スマホ優先=仕様） ---- */
@media (max-width: 600px) {
    .hmv-post-item a { flex-wrap: wrap; }
    .hmv-house-card img { height: 150px; }
    .hmv-access-table th { width: 35%; }
}