/* ai-center-top-hokkaido-v2: Hokkaido-only refinements on top of ai-center-top-v1.
   Every rule is scoped under .ai-center-top-v1.is-hokkaido — never touches national/osaka. */

/* ---------- 1. header: contained max-width row, larger brand name + region tag ---------- */
.ai-center-top-v1.is-hokkaido .v1-header{padding:0}
.ai-center-top-v1.is-hokkaido .hkv2-header-inner{
  max-width:1180px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
}
.ai-center-top-v1.is-hokkaido .v1-logo{position:relative;min-width:0;flex:1 1 auto}
.ai-center-top-v1.is-hokkaido .v1-logo-text{
  font-size:19px;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip;
}
.ai-center-top-v1.is-hokkaido .v1-logo-text small{font-size:14px;display:block}
.ai-center-top-v1.is-hokkaido .v1-logo-text strong{font-size:19px}
.ai-center-top-v1.is-hokkaido .hkv2-region-tag{
  display:inline-flex;align-items:center;margin-left:10px;padding:4px 11px;border-radius:999px;
  background:#eef4ff;color:#0b3fae;font-size:15px;font-weight:800;white-space:nowrap;vertical-align:middle;
}
.ai-center-top-v1.is-hokkaido .v1-header .hkv2-pills{display:none;align-items:center;gap:9px;flex:none}
.ai-center-top-v1.is-hokkaido .v1-header .hkv2-pill{
  font-size:15px;font-weight:700;padding:8px 16px;border-radius:999px;background:#eef4ff;color:#0b3fae;white-space:nowrap;
}
@media (min-width:760px){
  .ai-center-top-v1.is-hokkaido .v1-header .hkv2-pills{display:flex}
}
@media (max-width:759px){
  .ai-center-top-v1.is-hokkaido .v1-logo-text{font-size:16px}
  .ai-center-top-v1.is-hokkaido .v1-logo-text small{font-size:12px}
  .ai-center-top-v1.is-hokkaido .v1-logo-text strong{font-size:16px}
  .ai-center-top-v1.is-hokkaido .hkv2-region-tag{font-size:12px;padding:3px 9px;margin-left:8px}
  .ai-center-top-v1.is-hokkaido .hkv2-header-inner{padding:10px 14px;flex-wrap:wrap}
}

/* mobile-only compact 3-pill row, shown at the top of the hero (order item 3) */
.ai-center-top-v1.is-hokkaido .hkv2-mobile-pills{
  grid-area:region;display:flex;flex-wrap:wrap;gap:6px;
}
.ai-center-top-v1.is-hokkaido .hkv2-mobile-pills .hkv2-pill{
  font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px;background:#eef4ff;color:#0b3fae;white-space:nowrap;
}
@media (min-width:760px){
  .ai-center-top-v1.is-hokkaido .hkv2-mobile-pills{display:none}
}

/* ---------- 3. AI team visual: quiet background behind the picture only ---------- */
.ai-center-top-v1.is-hokkaido .hkv2-visual{position:relative;container-type:inline-size;container-name:hkv2visual}
.ai-center-top-v1.is-hokkaido .hkv2-visual-bg{
  position:absolute;inset:-6%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(95,175,255,.16),rgba(95,175,255,.08) 55%,rgba(95,175,255,0) 78%);
}
.ai-center-top-v1.is-hokkaido .hkv2-visual-bg::before,
.ai-center-top-v1.is-hokkaido .hkv2-visual-bg::after{
  content:"";position:absolute;top:50%;left:50%;border:1px solid rgba(80,150,230,.12);border-radius:50%;transform:translate(-50%,-50%);
}
.ai-center-top-v1.is-hokkaido .hkv2-visual-bg::before{width:78%;height:78%}
.ai-center-top-v1.is-hokkaido .hkv2-visual-bg::after{width:96%;height:96%;border-color:rgba(80,150,230,.09)}
.ai-center-top-v1.is-hokkaido .v1-picture{position:relative;z-index:1}
@media (max-width:760px){
  .ai-center-top-v1.is-hokkaido .hkv2-visual-bg{inset:2%}
}

/* ---------- 5. remove the duplicate trust row entirely (kept only in the header/hero pills) ---------- */

/* ---------- 6. CTA spacing ---------- */
.ai-center-top-v1.is-hokkaido .v1-cta-row{gap:14px}
.ai-center-top-v1.is-hokkaido .v1-cta-secondary{min-height:54px}
@media (min-width:761px){
  .ai-center-top-v1.is-hokkaido .v1-cta-row{gap:16px}
}

/* ---------- 7. value cards: big centered icon wrapper (custom hand-made icons — ic-loupe/ic-run/ic-scales/ic-wallet/ic-building) ---------- */
.ai-center-top-v1.is-hokkaido .v1-value{
  text-align:center;padding:22px 16px;display:flex;flex-direction:column;align-items:center;
  border-radius:18px;box-shadow:0 12px 28px -20px rgba(14,23,38,.35);
}
.ai-center-top-v1.is-hokkaido .hkv2-value-icon{
  display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;
  background:#ffffff;box-shadow:inset 0 0 0 1px #eef1f8;margin-bottom:12px;flex:none;overflow:hidden;
}
.ai-center-top-v1.is-hokkaido .hkv2-value-icon img{width:70%;height:70%;object-fit:contain;margin:0}
@media (min-width:760px){
  .ai-center-top-v1.is-hokkaido .v1-value{padding:26px 20px}
  .ai-center-top-v1.is-hokkaido .hkv2-value-icon{width:100px;height:100px}
}

/* ---------- 8. AI diagnosis flow — hand-drawn illustrations, 4 steps left to right ---------- */
/* 2026-07-27 全面刷新：手描き風イラスト4枚（/img/hokkaido-flow/）を主役にした横方向フロー。
   ・縦積み・横スワイプ・自動スライドはいずれも廃止。スマホもPCも4工程を横一列で固定表示。
   ・文字は画像に焼き込まず、すべてHTMLテキスト（STEP番号・見出し・説明・チップ）。
   ・イラストは正方形380pxの共通サイズ。CSSでも正方形比率を保ち、引き伸ばさない。 */

/* ── 既定（〜760px）＝スマホ：4工程を画面内に横一列で固定表示 ────────
   横スワイプ・自動スライドは行わない。開いた瞬間に4工程が見えることを優先する。
   ステップ4個＋矢印3個を1行に収めるため、説明文と結果チップは視覚的に隠し、
   その情報はリスト直下の補足文（.hkv2-flow-note）1行へ集約する。
   隠すのは見た目だけで、DOM・読み上げ・PC表示には一切影響させない。 */
.ai-center-top-v1.is-hokkaido .hkv2-flow-diagram{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:row;align-items:flex-start;justify-content:center;
  gap:0;width:100%;max-width:100%;
}
.ai-center-top-v1.is-hokkaido .hkv2-flow-node{
  /* 4等分。min-width:0 が無いと中身の最小幅で押し広がり横スクロールが出る */
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:0 1px;
  /* スマホでは枠線・影・背景を持たせない（カード然とさせず流れを見せる） */
  background:none;border:0;border-radius:0;
}
/* イラスト：正方形を維持。320pxでも4枚＋矢印3本が収まる大きさへ */
.ai-center-top-v1.is-hokkaido .hkv2-flow-illust{
  display:block;width:clamp(52px,16.5vw,66px);aspect-ratio:1/1;flex:none;
}
.ai-center-top-v1.is-hokkaido .hkv2-flow-illust img{
  display:block;width:100%;height:100%;object-fit:contain;
}
.ai-center-top-v1.is-hokkaido .hkv2-flow-body{
  /* 視覚的に隠した説明文・チップ（position:absolute）の位置基準をここに置く。
     基準が無いと祖先基準で飛び、レイアウト計算に紛れ込む。 */
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;min-width:0;
}
.ai-center-top-v1.is-hokkaido .hkv2-flow-step{
  font-size:clamp(9px,2.6vw,10px);font-weight:800;letter-spacing:.04em;color:#7ba3dd;
  line-height:1.3;
}
.ai-center-top-v1.is-hokkaido .hkv2-flow-body strong{
  display:block;font-size:clamp(11px,3.2vw,13px);font-weight:800;color:#13234d;
  line-height:1.35;
  /* 4タイトルの高さを揃える。最大2行・「…」で切らない */
  min-height:calc(2 * 1.35em);
  overflow-wrap:anywhere;
}
/* 説明文と結果チップはスマホでは視覚的に隠す（DOMには残す＝読み上げ・SEO・PC表示のため） */
.ai-center-top-v1.is-hokkaido .hkv2-flow-desc,
.ai-center-top-v1.is-hokkaido .hkv2-flow-result-chips{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* 矢印：ステップ間に3つ。細く淡い水色。アニメーションなし */
.ai-center-top-v1.is-hokkaido .hkv2-flow-arrow{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:clamp(10px,3vw,16px);
  /* イラストの縦中央に合わせる（タイトル側には重ねない） */
  height:clamp(52px,16.5vw,66px);
}
.ai-center-top-v1.is-hokkaido .hkv2-flow-arrow svg{
  width:clamp(9px,2.6vw,13px);height:clamp(9px,2.6vw,13px);
  stroke:#a8c2e4;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
/* スマホ専用の補足文（4工程の直下・中央揃え） */
.ai-center-top-v1.is-hokkaido .hkv2-flow-note{
  margin:12px auto 0;max-width:30em;text-align:center;
  font-size:clamp(12px,3.4vw,13px);line-height:1.6;color:#4a5a7d;
}

/* ── PC・タブレット横（761px〜）＝4カードの横一列（従来どおり） ────────
   スマホ側で外した枠線・影・説明文・結果チップを、ここで元に戻す。 */
@media (min-width:761px){
  .ai-center-top-v1.is-hokkaido .hkv2-flow-diagram{
    align-items:stretch;justify-content:center;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-flow-node{
    padding:18px 12px 20px;gap:12px;
    background:#ffffff;border:1px solid #e4ecf9;border-radius:16px;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-flow-illust{width:min(168px,100%);aspect-ratio:1/1}
  .ai-center-top-v1.is-hokkaido .hkv2-flow-body{gap:4px}
  .ai-center-top-v1.is-hokkaido .hkv2-flow-step{
    font-size:.68rem;letter-spacing:.08em;line-height:1.4;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-flow-body strong{
    font-size:1.06rem;line-height:1.4;min-height:0;
  }
  /* 説明文と結果チップを表示に戻す（スマホ用の視覚的非表示を解除） */
  .ai-center-top-v1.is-hokkaido .hkv2-flow-desc{
    position:static;width:auto;height:auto;padding:0;margin:0;
    overflow:visible;clip-path:none;white-space:normal;
    font-size:.84rem;line-height:1.65;color:#4a5a7d;max-width:22em;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-flow-result-chips{
    position:static;width:auto;height:auto;margin:4px 0 0;
    overflow:visible;clip-path:none;white-space:normal;
    display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-flow-chip{
    font-size:.72rem;font-weight:700;color:#1a56c6;background:#eaf2ff;
    border-radius:999px;padding:4px 11px;white-space:nowrap;
  }
  /* ステップ間の細い水色の矢印 */
  .ai-center-top-v1.is-hokkaido .hkv2-flow-arrow{
    flex:0 0 auto;width:30px;height:auto;align-self:center;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-flow-arrow svg{
    width:18px;height:18px;stroke:#9db3d6;stroke-width:2;
  }
  /* 補足文はスマホ専用。PCでは説明文と結果チップが表示されるため不要 */
  .ai-center-top-v1.is-hokkaido .hkv2-flow-note{display:none}
}
@media (min-width:1000px){
  .ai-center-top-v1.is-hokkaido .hkv2-flow-illust{width:min(190px,100%)}
  .ai-center-top-v1.is-hokkaido .hkv2-flow-body strong{font-size:1.12rem}
}

/* ---------- 10. #hk-now heading + trust badge (presentation only, no logic touched) ---------- */
/* #hk-now sits outside the .ai-center-top-v1 wrapper (existing untouched section), but this
   stylesheet is loaded on the Hokkaido page only, so a direct selector is still Hokkaido-exclusive. */
#hk-now .hkv2-hknow-badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;color:#0b3fae;background:#eef4ff;border-radius:999px;padding:3px 10px;margin:0 0 10px}
/* single, honest scroll offset so the heading isn't flush against the viewport edge on anchor-jump */
#hk-now{scroll-margin-top:16px}

/* ---------- 4. remove the mobile fixed bottom nav on Hokkaido only, and its body offset ---------- */
#botnav{display:none!important}
body:has(.ai-center-top-v1.is-hokkaido){padding-bottom:0!important}

/* ---------- 2. single weather entry point: #hk-now itself now sits directly under the CTA (moved in the HTML,
   no separate teaser card). Only the older duplicate cue link elsewhere on the page stays hidden. ---------- */
.hk-weather-cue{display:none!important}
.ai-center-top-v1.is-hokkaido .v1-flow + .hk-now{margin:8px 0 0}
.ai-center-top-v1.is-hokkaido .v1-flow + .hk-now .container{max-width:1180px}

/* ---------- 4. device slider: enlarged images, auto-scroll restored (2026-07-17).
   .hkv2-dev-marquee marks the Hokkaido instance of the shared .dev-marquee/.dev-chip/.dev-photo
   classes so these overrides never reach national/osaka, which reuse the same shared class names.
   前回(2026-07-17前)は「手動スクロール・自動スクロールなし」に変更していたが、ユーザーの実画面確認で
   「以前は自動で流れていた」と明確な指摘があったため、overflow:hidden＋アニメーション実行の基本挙動
   （public/css/style.css の .dev-marquee/.dev-track/@keyframes devScroll。8枚中4枚をaria-hidden複製
   することで -50% ループが継ぎ目なく成立する＝元の合体版main.htmlと同じ構造）へ戻す。
   拡大した写真サイズだけは維持する（画像そのものは変更していない）。 */
.hkv2-dev-marquee .dev-chip{
  gap:14px;padding:12px 20px 12px 14px;border-radius:16px;flex:none;
}
.hkv2-dev-marquee .dev-photo{width:72px;height:57px}
.hkv2-dev-marquee .dev-photo-zoom{width:72px;height:57px}
.hkv2-dev-marquee .dev-chip b{font-size:1.02rem}

@media (max-width:760px){
  .hkv2-dev-marquee .dev-track{gap:14px}
  .hkv2-dev-marquee .dev-chip{
    flex-direction:column;align-items:center;text-align:center;gap:10px;width:200px;
    padding:14px 12px;
  }
  .hkv2-dev-marquee .dev-photo{width:auto;max-width:100%;height:136px}
  .hkv2-dev-marquee .dev-photo-zoom{width:auto;max-width:100%;height:136px;display:flex;align-items:center;justify-content:center}
  .hkv2-dev-marquee .dev-photo-zoom .dev-photo{height:136px}
  .hkv2-dev-marquee .dev-chip b{font-size:.92rem}
}

/* ---------- 7-AI role labels: per-character overlay on BOTH mobile and PC.
   Back row (police/military/khaki/rightmost) = above the head, centered on the person's own axis.
   Front row (labcoat/center/green-suit) = on the chest/upper torso, centered on the person's own axis. ---------- */
.ai-center-top-v1.is-hokkaido .hkv2-roles{
  list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:2;pointer-events:none;
}
.ai-center-top-v1.is-hokkaido .hkv2-role{
  position:absolute;display:flex;align-items:center;justify-content:center;gap:4px;width:auto;white-space:nowrap;pointer-events:auto;
  transform:translateX(-50%);
  background:#fff;border:1.4px solid var(--role-dot);border-radius:999px;
  min-height:28px;padding:0 7px;
  font-size:12px;font-weight:700;color:#10203a;line-height:1;box-shadow:0 2px 6px rgba(20,50,110,.14);
}
.ai-center-top-v1.is-hokkaido .hkv2-role-dot{
  width:8px;height:8px;border-radius:50%;background:var(--role-dot);flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.04);
}
.ai-center-top-v1.is-hokkaido .hkv2-role--main{
  font-weight:800;background:#f3f8ff;
}
/* メーカーAI (labcoat): explicitly overridden away from the person's real (pink) face color per instruction —
   the face itself is unchanged, only this one UI label's color is decoupled from --role-dot. */
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="labcoat"]{
  color:#4F46E5; border-color:rgba(79,70,229,.38); background:rgba(255,255,255,.94);
}
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="labcoat"] .hkv2-role-dot{ background:#4F46E5; }

/* per-person placement — explicit, individually-set coordinates per character (no shared formula, no runtime calculation).
   Back row (police/military/khaki/rightmost): above the head/cap, using calc(headTop% - (labelMinHeight+gap)px)
   so the visual gap to the head/cap stays an EXACT, uniform px value regardless of how wide the viewport renders
   the image (a plain % offset alone would drift by container size; calc() locks the px gap itself).
   Front row (labcoat/center/green-suit): identical top% for all three, so they share one visual baseline exactly.
   Percentages measured against the actual 1024x1536 mobile photo. */
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="police"]{ left:15.9%; top:calc(13.48% - 42px); }
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="military"]{ left:35.7%; top:calc(6.4% - 42px); }
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="khaki"]{ left:68.5%; top:calc(6.4% - 42px); }
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="rightmost"]{ left:calc(100% - 54px + 0.8cm - 0.3mm - 0.35cm); top:calc(17.0% - 46px + 0.6cm); }
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="labcoat"]{ left:27.1%; top:54%; }
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="center"]{ left:53%; top:54%; }
.ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="green-suit"]{ left:85%; top:54%; }

@media (min-width:761px){
  .ai-center-top-v1.is-hokkaido .hkv2-role{
    padding:0 11px;font-size:13.5px;min-height:34px;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-role-dot{width:8px;height:8px}
  /* per-person placement — explicit, individually-set coordinates per character (no shared formula, no runtime calculation).
     Percentages measured against the actual 1535x1024 desktop photo. */
  .ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="police"]{ left:15.5%; top:calc(11.82% - 57px); }
  .ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="military"]{ left:37%; top:calc(7.7% - 57px); }
  .ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="khaki"]{ left:64.2%; top:calc(8.7% - 57px); }
  .ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="rightmost"]{ left:calc(85.4% + 14px); top:calc(11.9% - 57px); }
  .ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="labcoat"]{ left:27.4%; top:82%; }
  .ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="center"]{ left:50.2%; top:82%; }
  .ai-center-top-v1.is-hokkaido .hkv2-role[data-pos="green-suit"]{ left:79.5%; top:82%; }
}

/* 761px以上のPCレイアウトは2カラムグリッドのため、ヒーロー画像(.hkv2-visual)自体の実寸は
   ビューポート幅に比例して連続的に変化する（1440px時で約560px、768px時で約350px）。
   ラベルの位置は%指定なので実寸に応じて間隔も狭まるが、文字サイズ/パディングは固定pxのため
   ある実寸を下回ると隣接ラベル同士が重なる（実測：1024px・768px幅で重なりを確認）。
   ビューポート幅ではなく.hkv2-visualの実際のコンテナ幅を基準にcontainer queryで
   段階的に縮小することで、グリッド比率やmax-widthが将来変わっても正しく追従する。 */
@container hkv2visual (max-width:599px){
  .ai-center-top-v1.is-hokkaido .hkv2-role{ padding:0 9px;font-size:12px;min-height:30px; }
  .ai-center-top-v1.is-hokkaido .hkv2-role-dot{ width:7.5px;height:7.5px }
}
@container hkv2visual (max-width:499px){
  .ai-center-top-v1.is-hokkaido .hkv2-role{ padding:0 8px;font-size:10.5px;min-height:26px; }
  .ai-center-top-v1.is-hokkaido .hkv2-role-dot{ width:7px;height:7px }
}
@container hkv2visual (max-width:399px){
  .ai-center-top-v1.is-hokkaido .hkv2-role{ padding:0 6px;font-size:9px;min-height:22px; }
  .ai-center-top-v1.is-hokkaido .hkv2-role-dot{ width:6px;height:6px }
}

/* ---------- 11. PC見た目のみ、design_handoff_hokkaido_lp の新デザイン(single.html)に寄せる ----------
   ・中身(気象データ・FAQ43問・メーカーガイド・補助金DB連携・collapse.jsの折りたたみ挙動・AI給湯コンシェルジュ)は
     一切変更しない。variables.cssではなくCSSカスタムプロパティの値だけをHokkaido×PC限定で上書きする。
   ・body:has(.ai-center-top-v1.is-hokkaido) は北海道ページにしか出現しないマーカーなので、
     全国版/大阪版のstyle.css:rootには一切触れずに北海道ページ全体へ配色を波及させられる。
   ・@media (min-width:761px) の外(モバイル)には一切のルールを置かない。 ---------- */
@media (min-width:761px){
  body:has(.ai-center-top-v1.is-hokkaido){
    --accent:#1D5AE5;
    --accent-d:color-mix(in srgb, #1D5AE5 82%, #000);
    --accent-soft:#E8F0FE;
    --bg2:#EFF5FD;
    --radius-lg:20px;
    --shadow:0 12px 28px -20px rgba(14,23,38,.35);
  }
  /* 見出し：既存のサイズ・センター揃えは維持し、新デザインの太いウェイト(900)だけを寄せる */
  body:has(.ai-center-top-v1.is-hokkaido) .section-title{
    font-weight:900;
  }
  /* カードの質感：フラットな枠線だけのカードに、新デザインの浮いた質感の影を追加 */
  body:has(.ai-center-top-v1.is-hokkaido) .tool-card,
  body:has(.ai-center-top-v1.is-hokkaido) .maker-card,
  body:has(.ai-center-top-v1.is-hokkaido) .gear-card{
    box-shadow:var(--shadow);
  }
  /* var()経由ではない直書きカラーの箇所（--accent上書きが届かない）だけ個別に寄せる */
  body:has(.ai-center-top-v1.is-hokkaido) .section-shortcut .sc-act--go{
    background:linear-gradient(135deg,#1D5AE5 0%,color-mix(in srgb, #1D5AE5 82%, #000) 100%);
  }
  body:has(.ai-center-top-v1.is-hokkaido) .section-shortcut .sc-card{
    border-color:#C9DCFB;
  }
  body:has(.ai-center-top-v1.is-hokkaido) .section-shortcut .sc-card[open]{
    border-color:#1D5AE5;
  }
}

/* ---------- 5. ヘッダーのメニューボタン（2026-07-26 追加） ----------
   北海道版は下部ナビ(#botnav)を非表示にしているため、サイト全体メニュー(#menusheet)を
   開く手段が全画面幅で失われていた。ヘッダーに常設の入口を置いて復旧する。 */
.ai-center-top-v1.is-hokkaido .hkv2-menu-btn{
  display:inline-flex;align-items:center;gap:6px;flex:none;cursor:pointer;
  padding:8px 14px;border-radius:999px;border:1.5px solid #c3d3f2;background:#fff;
  color:#0b3fae;font:inherit;font-size:14px;font-weight:800;line-height:1;white-space:nowrap;
}
.ai-center-top-v1.is-hokkaido .hkv2-menu-btn:hover{background:#eef4ff;border-color:#9fb9ea}
.ai-center-top-v1.is-hokkaido .hkv2-menu-btn:focus-visible{outline:2px solid #1D5AE5;outline-offset:2px}
.ai-center-top-v1.is-hokkaido .hkv2-menu-btn svg{
  width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;
}
.ai-center-top-v1.is-hokkaido .v1-header-right{display:flex;align-items:center;gap:10px}
/* PC(≥760px)ではスマホ用の3本線を出さない＝従来のピル型ボタンのまま（PC・タブレットは無変更） */
.ai-center-top-v1.is-hokkaido .hkv2-burger{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   Canva完成版（DAHQlvuL-jA）の見た目をヘッダー＋FVへ反映（2026-07-28）
   正本＝Canva 1ページ目(PC 1280×495) / 2ページ目(スマホ 375×1084) の実測値。
   文言・DOM構造・リンク・JSは既存のまま。ここでは見た目だけを合わせる。
   スコープは .is-hokkaido 配下のみ＝全国版・大阪版には一切影響しない。
   ══════════════════════════════════════════════════════════════════════════ */

/* ⓪ ヘッダーロゴ：Canva完成版の新素材 /img/brand/ai-scales-logo.png（1254×1254・RGBA透過）。
      Canvaの枠は PC 58.49×45.6 / SP 58.49×45.75 だが、これは正方形素材を左右で切り抜く前提の枠。
      本実装は切り抜き禁止のため object-fit:contain を使う。素材が正方形1:1なので、
      枠を58×46にしても描画結果は 46×46 で同一（右側12pxは透明な余白になるだけ）。
      その余白がスマホでヘッダーを2段に折り返させたため、枠を実描画サイズ 46×46 に合わせる。
      ＝ロゴの見た目の大きさはCanva正本と同一（高さ46px）、無駄な余白だけを持たない。
      ・縦横比を維持し、上下左右いずれも切らない（cover・切り抜きは使わない）
      ・border-radius / overflow / clip-path による見切れを起こさせない
      ・共有CSSの .v1-logo img{width:34px;height:34px} を北海道版スコープでのみ上書きする */
.ai-center-top-v1.is-hokkaido .v1-logo img{
  width:46px;height:46px;flex:none;
  object-fit:contain;object-position:center;
  border-radius:0;overflow:visible;clip-path:none;
}
.ai-center-top-v1.is-hokkaido .v1-logo{overflow:visible}
/* スマホの折り返し対策（余白の詰め）はファイル末尾で行う。
   後段の 2026-07-27 ブロックが padding を再指定しており、ここでは効かないため。 */

/* ① CTAボタン：紫→シアンの横グラデーション（Canva実測 LINEAR_GRADIENT(90, #8c52ff→#5ce1e6)）。
      2ボタンとも同じ塗り。第2ボタンの文字色は青→白へ（Canvaでは #ffffff）。 */
.ai-center-top-v1.is-hokkaido .v1-cta-primary,
.ai-center-top-v1.is-hokkaido .v1-cta-secondary{
  background:linear-gradient(90deg,#8c52ff 0%,#5ce1e6 100%);
  color:#fff;
  border:1.5px solid transparent;
}
.ai-center-top-v1.is-hokkaido .v1-cta-primary:hover,
.ai-center-top-v1.is-hokkaido .v1-cta-secondary:hover{filter:brightness(1.05)}

/* ② 黄色いマーカー下線（Canva実測 #ffc105）。
      文字幅ぶんだけ引くため width:fit-content。太さはCanva実測：
      「お湯が出ない…」PC 4px / スマホ 2px、「解決」PC 9px / スマホ 5px。 */
.ai-center-top-v1.is-hokkaido .v1-ask{
  justify-self:start;width:fit-content;max-width:100%;
  background-image:linear-gradient(#ffc105,#ffc105);
  background-repeat:no-repeat;
  background-size:100% 4px;
  background-position:0 100%;
  padding-bottom:2px;
}
.ai-center-top-v1.is-hokkaido .v1-h1 .v1-accent{
  background-image:linear-gradient(#ffc105,#ffc105);
  background-repeat:no-repeat;
  background-size:100% 9px;
  background-position:0 94%;
}
@media (max-width:759px){
  .ai-center-top-v1.is-hokkaido .v1-ask{background-size:100% 2px}
  .ai-center-top-v1.is-hokkaido .v1-h1 .v1-accent{background-size:100% 5px}
}

/* ③ スマホの右上メニューはファイル末尾で上書きする（後段の 2026-07-27 ブロックより
      あとに置かないと効かないため）。 */

/* ── スマホ(≤759px)：右上メニューを全国版トップの .burger と同一デザインに統一（2026-07-27） ──
   正本＝public/index.html の .burger。実測値をそのまま移植する：
     ボタン 42×42 / padding 9px / border-radius 11px / 枠線・背景なし
     線 24×2px・色 #15233c・角丸3px・間隔(gap) 5px
     transition: transform .25s, opacity .2s
     開いたとき（aria-expanded="true"）1本目と3本目が交差して×、2本目は透明
   色は #15233c を直値で書く。理由：全国版の :root --navy は #15233c だが、
   北海道版が読む style.css の --navy は #0b2238 で別値のため、var() では色が一致しない。
   配置は、ロゴの伸長(flex:1 1 auto→0 1 auto)をやめてボタンを右端(margin-left:auto)へ寄せる。
   これで375px以上では全国版と同じ「1行目の右端・縦中央」に来る。
   折り返し(flex-wrap:wrap)は従来どおり残す：320pxではロゴ＋「北海道版」タグ＋ボタンが
   1行に入らず、nowrapにするとサイト名が欠けるため。320pxではボタンだけが2段目の右端へ回り、
   サイト名は従来どおり全文表示される。ロゴ・サイト名のサイズは変更していない。 */
@media (max-width:759px){
  /* 左右16px＝全国版ヘッダーと同じ内側余白。これでボタンの右端からの距離も16pxで一致する。 */
  .ai-center-top-v1.is-hokkaido .hkv2-header-inner{padding-left:16px;padding-right:16px}
  .ai-center-top-v1.is-hokkaido .v1-logo{flex:0 1 auto}
  .ai-center-top-v1.is-hokkaido .v1-header-right{margin-left:auto}
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn{
    display:flex;align-items:stretch;justify-content:center;gap:0;
    width:42px;height:42px;padding:9px;border-radius:11px;border:0;background:none;flex:none;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn:hover{background:none;border:0}
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn svg,
  .ai-center-top-v1.is-hokkaido .hkv2-menu-label{display:none}
  .ai-center-top-v1.is-hokkaido .hkv2-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;width:100%;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-burger i{
    display:block;height:2px;width:100%;background:#15233c;border-radius:3px;
    transition:transform .25s,opacity .2s;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn[aria-expanded="true"] .hkv2-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn[aria-expanded="true"] .hkv2-burger i:nth-child(2){opacity:0}
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn[aria-expanded="true"] .hkv2-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ══════════════════════════════════════════════════════════════════════════
   Canva完成版（DAHQlvuL-jA 2ページ目）③ スマホ右上メニュー = 丸型
   Canva実測：39×40 / 白地 / 枠線1.5px #1e6bff / 3本線 20×2px #0b3fae / 間隔5px
   ※ 2026-07-27に「全国版と同一の角丸四角バーガー」へ統一した実装を上書きする。
      後段で定義しないと効かないため、意図的にファイル末尾へ置いている。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:759px){
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn{
    width:40px;height:40px;padding:9px;border-radius:50%;
    background:#fff;border:1.5px solid #1e6bff;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn:hover{background:#fff;border-color:#1e6bff}
  .ai-center-top-v1.is-hokkaido .hkv2-burger{gap:5px}
  .ai-center-top-v1.is-hokkaido .hkv2-burger i{height:2px;background:#0b3fae}
}

/* ══════════════════════════════════════════════════════════════════════════
   Canva完成版 ⓪-b スマホの折り返し対策（2026-07-28）
   ロゴが34px→46pxになった分、375pxでヘッダーが2段へ折り返した。
   ロゴ・サイト名・「北海道版」タグのサイズは変えず、隙間だけを詰めて1行へ戻す。
   Canvaのスマホ版もロゴをほぼ左端(left=-0.5px)まで寄せて1行に収めている。
   後段の 2026-07-27 ブロックが padding を再指定しているため、末尾に置く。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:759px){
  .ai-center-top-v1.is-hokkaido .hkv2-header-inner{padding-left:8px}
  .ai-center-top-v1.is-hokkaido .v1-logo{gap:8px}
  .ai-center-top-v1.is-hokkaido .hkv2-region-tag{margin-left:6px}
}

/* ══════════════════════════════════════════════════════════════════════════
   「AI診断でわかること」＝線画イラスト5枚のカード（2026-07-28 全面刷新）
   既存「AI診断の流れ」(.hkv2-flow-*) と同じ意匠へ統一する：
     白基調 / 枠線 1px #e4ecf9 / 角丸16px / 濃紺見出し #13234d / 本文 #4a5a7d /
     控えめな影 / 余白広め。丸いアイコン枠・円形切り抜き・派手な影は使わない。
   旧 .hkv2-value-icon（84〜100pxの円形枠）は使わなくなったため、
   新しい .hkv2-value-fig に置き換えている（HTML側も同時に変更済み）。
   ファイル末尾に置くのは、前段の .is-hokkaido .v1-value / .hkv2-value-icon 定義を
   確実に上書きするため（同一詳細度では後勝ちになる）。
   すべて .ai-center-top-v1.is-hokkaido 配下＝全国版・大阪版には影響しない。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 既定（〜760px）＝スマホ：2段（上段2枚・下段3枚） ──
   6カラムのグリッドを土台にし、各カードを2カラム分＝1/3幅で置く。
   これで上段2枚と下段3枚の横幅が完全に一致する（上段2枚は中央寄せ）。
   横スワイプ・自動スライド・カルーセルは使わない。 */
.ai-center-top-v1.is-hokkaido .v1-values-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));   /* 共有CSSの2列指定を上書き */
  gap:10px;align-items:stretch;                    /* 同じ段のカード高さを揃える */
  grid-auto-rows:1fr;                              /* 上段と下段の高さも揃える（見出しの折り返し有無で段差が出ないように） */
}
/* カードは縦型（画像上・タイトル）。上下段とも同じ形にする。
   スマホは説明文を出さない（下記 display:none）ため、その分イラストと見出しを大きく取る。 */
.ai-center-top-v1.is-hokkaido .v1-value{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:4px;padding:12px 6px 13px;text-align:center;
  background:#ffffff;border:1px solid #e4ecf9;border-radius:14px;
  box-shadow:0 6px 16px -14px rgba(14,23,38,.35);
}
/* 下段3枚＝2カラム分（＝1/3幅）。上段2枚も同じ2カラム分にして横幅を揃える */
.ai-center-top-v1.is-hokkaido .v1-value{grid-column:span 2}
/* 上段2枚は 2〜5カラム目に置き、6カラムの中央へ寄せる（幅は下段と同一のまま） */
.ai-center-top-v1.is-hokkaido .v1-value:nth-child(1){grid-column:2 / span 2}
.ai-center-top-v1.is-hokkaido .v1-value:nth-child(2){grid-column:4 / span 2}
/* イラスト枠：正方形比率を保ち、切り抜かない。丸枠・clip-pathは使わない。 */
.ai-center-top-v1.is-hokkaido .hkv2-value-fig{
  display:block;width:84%;aspect-ratio:1/1;min-width:0;
  border-radius:0;overflow:visible;clip-path:none;background:none;box-shadow:none;
}
.ai-center-top-v1.is-hokkaido .hkv2-value-fig img{
  display:block;width:100%;height:auto;
  object-fit:contain;object-position:center;
  border-radius:0;clip-path:none;margin:0;
}
.ai-center-top-v1.is-hokkaido .v1-value strong{
  display:block;min-width:0;
  font-size:.84rem;font-weight:800;color:#13234d;line-height:1.35;margin:0;
  overflow-wrap:anywhere;   /* 320pxでも見出しがはみ出さない */
}
/* スマホは「イラスト＋見出しだけ」にする（2026-07-28）。
   説明文はHTMLに残したまま表示だけ止める＝文言・SEO・構造化データは変更しない。
   PC（761px〜）では下の @media で display:block に戻して従来どおり表示する。 */
.ai-center-top-v1.is-hokkaido .v1-value > span:not(.hkv2-value-fig){
  display:none;
}

/* 320px：余白と文字をわずかに絞り、3列でもはみ出さないようにする */
@media (max-width:359px){
  .ai-center-top-v1.is-hokkaido .v1-values-grid{gap:8px}
  .ai-center-top-v1.is-hokkaido .v1-value{padding:11px 5px 12px}
  .ai-center-top-v1.is-hokkaido .hkv2-value-fig{width:82%}
  .ai-center-top-v1.is-hokkaido .v1-value strong{font-size:.78rem}
}

/* ── PC・タブレット横（761px〜）＝5枚横一列・上下積み ──
   「AI診断の流れ」の4カードと同じ寸法感（枠線・角丸16px・padding・イラスト幅）に揃える。 */
@media (min-width:761px){
  .ai-center-top-v1.is-hokkaido .v1-values-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;align-items:stretch;   /* 5枚の高さを揃える */
  }
  /* スマホ用の6カラム配置指定（span 2 と上段2枚の中央寄せ）をここで必ず解除する。
     解除しないと5カラムに span 2 が残り、768px等で 2枚/1枚/2枚 に崩れる。 */
  .ai-center-top-v1.is-hokkaido .v1-value,
  .ai-center-top-v1.is-hokkaido .v1-value:nth-child(1),
  .ai-center-top-v1.is-hokkaido .v1-value:nth-child(2){grid-column:auto}
  .ai-center-top-v1.is-hokkaido .v1-value{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:6px;padding:18px 12px 20px;text-align:center;border-radius:16px;
    box-shadow:0 10px 24px -20px rgba(14,23,38,.32);
  }
  .ai-center-top-v1.is-hokkaido .hkv2-value-fig{
    width:min(168px,100%);aspect-ratio:1/1;margin-bottom:2px;
  }
  .ai-center-top-v1.is-hokkaido .v1-value strong{
    font-size:1.06rem;line-height:1.4;margin:0;
  }
  /* スマホで隠している説明文を、PCでは従来どおり表示する（display の復帰が必須） */
  .ai-center-top-v1.is-hokkaido .v1-value > span:not(.hkv2-value-fig){
    display:block;min-width:0;
    font-size:.84rem;color:#4a5a7d;line-height:1.65;max-width:22em;
  }
}
@media (min-width:1000px){
  .ai-center-top-v1.is-hokkaido .hkv2-value-fig{width:min(190px,100%)}
  .ai-center-top-v1.is-hokkaido .v1-value strong{font-size:1.12rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   ファーストビューのCTA 2つ（AIに無料で相談する／エラーコードを調べる）の
   見え方の修正（2026-07-28）

   直していること（実測で確認した3つの原因）
     1) スマホで2つのボタンが密着していた
        .v1-cta-row は 761px 未満では display:block のまま（横並びのflex指定は
        min-width:761px の中にしかない）。gap は flex/grid でしか効かないため、
        既存の gap:14px が無効になり、間隔が 0px になっていた。
        → ここで flex 化して gap を効かせる。
     2) 2つのボタンの高さが違っていた（56px と 54px）
        → min-height を1つの値に統一する。
     3) 外周がにじんで角丸が不均一に見えていた
        border:1.5px solid transparent が付いており、既定の
        background-clip:border-box ではグラデーションが透明ボーダーの下まで
        描かれる。さらに 1.5px は端末によってサブピクセル境界になり、
        角の内側と外側で色がずれてギザついて見えていた。
        → 見えない枠線は完全に削除し、padding-box で塗りを内側に収め、
          overflow:hidden で角丸の外へはみ出させない。

   左右の余白は .v1-hero の padding（左右16px）が担っており、実測でも左右とも
   16px で均等。CTA 側に padding-inline を足すと 32px になり余白が二重になるため
   足していない（要件の「画面端から16px以上」は現状で満たしている）。

   スコープ：.ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row 配下のみ。
     ・.is-hokkaido が付くので全国版・大阪版・他地域版には一切当たらない
       （そもそもこのCSSは北海道版トップしか読み込まない）。
     ・.v1-hero を挟んでいるので、他セクションのボタンにも当たらない。
   ファイル末尾に置くのは、前段の gap:14px / min-height:54px を確実に上書きするため。
   ══════════════════════════════════════════════════════════════════════════ */

/* 2つのボタン共通（PC・スマホとも）＝高さ・角丸・外周を揃える */
.ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-primary,
.ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-secondary{
  min-height:52px;
  box-sizing:border-box;
  margin:0;                       /* 負のマージンで詰めるような小細工はしない */
  border:0;                       /* 見えない1.5px枠線を残さず削除する */
  border-radius:14px;             /* 4隅とも同じ値 */
  background-clip:padding-box;    /* 塗りを枠の内側に収める（色漏れ防止） */
  overflow:hidden;                /* グラデーションを角丸の外へ出さない */
  box-shadow:0 6px 18px rgba(40,72,150,.12);
}

/* スマホ・タブレット縦（〜760px）＝縦2段。ここだけ縦並びにする
   （761px以上は既存の横並び flex のままにするため、この指定を入れない） */
@media (max-width:760px){
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row{
    display:flex;
    flex-direction:column;
    gap:12px;                     /* 前段の gap:14px を上書き */
    width:100%;
    box-sizing:border-box;
  }
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-primary,
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-secondary{
    width:100%;                   /* 2つの幅を完全に一致させる */
  }
}

/* PC・タブレット横（761px〜）＝既存どおり横並び（display:flex）のまま。
   ただし文言の長さの違いで幅が 169.4px と 174.2px に割れていたため、
   2つを等分して幅だけを揃える。行そのものの幅・位置は変わらない
   （169.4+174.2+gap16 = 行幅359.6 → 171.8 × 2 + gap16 = 359.6）。

   ここを grid にしてはいけない：共有CSSが .v1-cta-primary{grid-area:ctaP} /
   .v1-cta-secondary{grid-area:ctaS} を持っているため、親を grid にすると
   その指定が生きてしまい、2つのボタンが同じ位置に重なる（実測で確認済み）。
   flex のままなら grid-area は無視されるので安全。 */
@media (min-width:761px){
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-primary,
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-secondary{
    flex:1 1 0;                   /* 2つを等幅にする */
    min-width:0;                  /* 文字の最小幅で列が押し広げられないようにする */
    white-space:nowrap;           /* 文字を途中で改行しない＝必ず1行 */
  }
}

/* 761〜999px の帯だけ、文字を1行に収めるために左右paddingと文字サイズを詰める。
   この帯ではヒーローが2カラムになり、CTAが入る左カラムの幅が 359.6px しかない
   （＝1ボタン 171.8px）。一方、既定の 16px/15.04px + 左右28pxパディングでは
   「エラーコードを調べる」に 206.4px 必要で入りきらず、実測で2行に折り返して
   高さが 52px→57.6px に膨らんでいた（＝ボタンが2段に見えていた原因）。
     ・secondary: 10文字 × 14px + 左右24px = 164px ≦ 171.8px
     ・primary  :  9文字 × 14.4px + 左右24px = 153.6px ≦ 171.8px
   1000px以上は元の 16px / 15.04px / padding 28px のまま＝現状を一切変えない。
   区切りに 1000px を使うのは、このファイルに既にある区切りを再利用して
   新しいブレークポイントを増やさないため。 */
@media (min-width:761px) and (max-width:999px){
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-primary,
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-secondary{
    padding:0 12px;
  }
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-primary{font-size:.9rem}
  .ai-center-top-v1.is-hokkaido .v1-hero .v1-cta-row > .v1-cta-secondary{font-size:.875rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   タブレット（761〜999px）のヘッダーだけを詰める（2026-07-28）

   症状：サイト名「北海道エコキュート・給湯器／AI無料相談センター」が
   「北海道版」バッジやピルの上に重なって読めなくなっていた。

   原因（実測 768px）：ヘッダー1行に必要な幅が、使える幅を約100px超えていた。
     使える幅 753 −左右padding32 = 721px
     必要な幅 ロゴ46 + サイト名167 + 北海道版82 + ピル386 + メニュー111 + 隙間 ≒ 850px
   .v1-logo は flex:1 1 auto なので、あふれた分はサイト名だけが潰され、
   幅167pxの文字が44pxの箱に押し込まれた。さらに .v1-logo-text は
   overflow:visible のため、はみ出した文字がそのまま右隣に重なって描画されていた。

   対処：ご指示どおり「北海道版」からメニューまで（＝ヘッダー右側の要素）を
   タブレット幅でだけ縮小し、サイト名が本来の幅で収まる余地をつくる。
     ・文言・リンク先・並び順・色・角丸は変更しない（サイズと余白だけ）
     ・サイト名のフォントサイズは変えない（読みやすさを落とさない）
   スマホ（〜760px）とPC（1000px〜）はこのメディアクエリの外なので一切変わらない。
   区切りは既存の 761px / 1000px を再利用し、新しいブレークポイントは増やさない。
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:761px) and (max-width:999px){
  /* 行全体：左右padding と要素間の隙間をわずかに詰める */
  .ai-center-top-v1.is-hokkaido .hkv2-header-inner{padding:12px 14px;gap:10px}
  .ai-center-top-v1.is-hokkaido .v1-header-right{gap:8px}

  /* サイト名は縮めない。ただし潰されないよう、必要な幅を確保させる */
  .ai-center-top-v1.is-hokkaido .v1-logo{flex:0 1 auto}
  .ai-center-top-v1.is-hokkaido .v1-logo-text{flex:none;white-space:nowrap}

  /* 「北海道版」バッジ */
  .ai-center-top-v1.is-hokkaido .hkv2-region-tag{
    font-size:12px;padding:3px 9px;margin-left:8px;
  }
  /* 完全無料／登録不要／国内主要メーカー対応 */
  .ai-center-top-v1.is-hokkaido .v1-header .hkv2-pills{gap:6px}
  .ai-center-top-v1.is-hokkaido .v1-header .hkv2-pill{
    font-size:12px;padding:5px 10px;
  }
  /* メニューボタン */
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn{
    font-size:12px;padding:6px 11px;gap:5px;
  }
  .ai-center-top-v1.is-hokkaido .hkv2-menu-btn svg{width:15px;height:15px}
}

/* ══════════════════════════════════════════════════════════════════════════
   スマホ（〜759px）のヘッダーを必ず1段に収める（2026-07-28）

   症状：メニューボタンだけが2段目へ落ち、ヘッダーが2段（実測 320px で高さ119px）に
   なっていた。ロゴ・サイト名・「北海道版」バッジが1段目を占有し、右端のメニューが
   あふれて改行されていた状態。

   原因（実測 320px）：
     使える幅 320 − 左右padding24 = 296px
     必要な幅 ロゴ46 + サイト名159 + 北海道版66 + メニュー40 + 隙間26 ≒ 337px（41pxオーバー）
   既存の .hkv2-header-inner は flex-wrap:wrap のため、あふれた分が下の段へ回っていた。

   対処：ご指示どおり「文字を小さくしてでも1段」にする。
     ・flex-wrap:nowrap で段落ちを禁止
     ・サイト名と「北海道版」バッジの文字サイズを clamp() で画面幅に追従させる
       （320pxで最小、広い画面では従来サイズへ戻る＝広い端末で小さいままにしない）
     ・隙間と右paddingをわずかに詰める
   文言・リンク先・並び順・ロゴ画像のサイズ・ヘッダー背景・区切り線は変更しない。
   761px以上（タブレット・PC）はこのメディアクエリの外なので一切影響しない。
   ファイル末尾に置くのは、前段の @media (max-width:759px) の指定を確実に上書きするため。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:759px){
  .ai-center-top-v1.is-hokkaido .hkv2-header-inner{
    flex-wrap:nowrap;                 /* ← 段落ちの直接原因を止める */
    padding:10px 10px 10px 8px;
    gap:6px;
  }
  .ai-center-top-v1.is-hokkaido .v1-logo{flex:0 1 auto;min-width:0;gap:6px}
  /* サイト名：320pxで12px、375pxで約13.3px、広い画面では従来の16pxまで戻る。
     small/strong を em 基準にして、親の clamp にそのまま追従させる。 */
  .ai-center-top-v1.is-hokkaido .v1-logo-text{
    flex:none;white-space:nowrap;
    font-size:clamp(12px,3.55vw,16px);line-height:1.28;
  }
  .ai-center-top-v1.is-hokkaido .v1-logo-text small{font-size:.78em}
  .ai-center-top-v1.is-hokkaido .v1-logo-text strong{font-size:1em}
  /* 「北海道版」バッジも同様に可変にする */
  .ai-center-top-v1.is-hokkaido .hkv2-region-tag{
    flex:none;
    font-size:clamp(10px,2.9vw,12px);
    padding:2px 7px;margin-left:6px;
  }
  .ai-center-top-v1.is-hokkaido .v1-header-right{flex:none;gap:6px}
}