/* ============================================================
   hb-geo-shell.css — 共通シェル（ヘッダー / フッター / CTA帯）専用
   ------------------------------------------------------------
   全ページに読み込まれる。したがって**セレクタは必ず .hd / .ft / .cband /
   .skip の配下にスコープする**こと。

   なぜスコープが必須か:
     hb-geo.css（トップページ用）は .wrap .hero .cta .en .sec や、
     1〜2文字の .n .b .s .p .o .tl .tr .bl .br といった極端に短い汎用クラスを
     持っている。これを全ページに出すと既存コンテンツを壊す。実測で:
       - /lp/ 配下に貼られる prototypes の HTML に class="wrap" が207箇所、
         class="hero" が21箇所
       - /loan-diagnosis/ の .hero-lead は詳細度 (0,1,0) なので、
         hb-geo.css の `.hero p` (0,1,1) に順序と無関係に負ける
       - taizen 系テンプレートに class="hero" "s" "b" "cta" がある
     そのため「シェルに必要な分だけ」を切り出し、スコープして読ませる。
     ページレイアウト側（.sec .sh .geo グリッド群）は hb-geo.css に残し、
     トップページを幾何学デザイン化する PR で .hb-geo 配下に閉じて読み込む。

   トークンは css/_ds/colors_and_type.css（正本のベンダリング）を先に読む前提。
   ============================================================ */

:root{
  /* --- 正本トークンのエイリアス。実値は _ds/colors_and_type.css にある --- */
  --navy: var(--color-primary);
  --navy7:var(--color-primary-700);
  --navy9:var(--color-primary-900);
  --ink:  var(--color-text);
  --mute: var(--color-text-mute);
  --line: var(--color-border);
  --sub:  var(--color-bg-sub);
  --sub2: var(--color-bg-sub-2);

  /* --- 幾何学モザイクの中間階調 ---
     正本（hatena-pr の design-system/マスターデザインガイド.md）に該当トークンが
     無いため、tax-geo.css の定義値をここでも定義している。正本への昇格を
     HatenaBase/hatena-pr#47 で起票済み。反映されたら var() 参照に置き換える。 */
  --blu:#2D5FA8;
  --sky:#A9C4E4;
  --pale:#DCE6F2;
}

/* ---- 本文へスキップ。ヘッダーのリンク数が多いのでキーボード利用者に必須 ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:12px 20px;font-size:13px;font-weight:700;text-decoration:none}
.skip:focus{left:0;color:#fff}

/* ============================================================
   ヘッダー
   ============================================================ */
.hd{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:50;font-family:var(--font-family);line-height:1.5}
.hd *{box-sizing:border-box}
.hd a{text-decoration:none;color:var(--navy)}
.hd a:hover{color:var(--blu)}
.hd img{max-width:100%}

.hd .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.hd .hdw{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}

.hd .hlogo-link{display:block;flex-shrink:0}
.hd .hlogo{height:34px;width:auto;display:block}

.hd .nav{display:flex;align-items:center;gap:28px}
.hd .nav a{font-size:12px;letter-spacing:.14em;font-weight:700;white-space:nowrap}
.hd .nav a[aria-current="page"]{color:var(--blu)}

.hd .nav a.cta{display:inline-block;background:var(--navy);color:#fff;font-weight:var(--font-weight-bold);border-radius:var(--radius-md);padding:12px 28px;font-size:var(--text-caption);letter-spacing:.06em;transition:transform var(--duration-2) var(--ease-out),box-shadow var(--duration-2) var(--ease-out)}
.hd .nav a.cta:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-cta)}

.hd .burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-shrink:0}
.hd .burger span{display:block;width:18px;height:1.5px;background:var(--navy);position:relative}
.hd .burger span::before,.hd .burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--navy)}
.hd .burger span::before{top:-6px}
.hd .burger span::after{top:6px}

/* sticky ヘッダーが 72px なので、アンカー遷移で見出しが隠れないようにする */
section[id],div[id].hb-anchor{scroll-margin-top:88px}

/* ============================================================
   CTA帯
   ============================================================ */
.cband{text-align:center;padding:110px 24px;background:var(--color-bg);font-family:var(--font-family)}
.cband *{box-sizing:border-box}
.cband .en{display:block;margin-bottom:26px;font-size:12px;letter-spacing:.26em;font-weight:700;color:var(--navy)}
.cband h2{font-size:38px;font-weight:700;letter-spacing:.08em;line-height:1.6;margin:0 0 20px;color:var(--navy)}
.cband p{color:var(--mute);font-size:14px;margin:0 0 44px;line-height:var(--line-height-base)}
.cband .cta{display:inline-block;background:var(--navy);color:#fff;font-weight:var(--font-weight-bold);border-radius:var(--radius-md);padding:12px 28px;font-size:var(--text-caption);letter-spacing:.06em;text-decoration:none;transition:transform var(--duration-2) var(--ease-out),box-shadow var(--duration-2) var(--ease-out)}
.cband .cta:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-cta)}

/* ============================================================
   フッター
   ============================================================ */
.ft{background:var(--navy);color:#fff;padding:80px 0 36px;font-family:var(--font-family);line-height:var(--line-height-base)}
.ft *{box-sizing:border-box}
.ft a{color:#C6D4E4;font-size:13px;text-decoration:none}
.ft a:hover{color:#fff}
.ft img{max-width:100%}

.ft .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.ft .ftg{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.16)}
.ft .ftg>div{min-width:0}

.ft .ftlogo{height:32px;width:auto;margin-bottom:20px}
.ft .fttag{font-size:12px;color:#9FB4CB;line-height:2}

.ft .fth{font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--sky);margin-bottom:18px}
.ft .ftcol{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ft .ftcol-nested{margin-top:10px}

.ft .gco{margin-bottom:16px}
.ft .gco b{display:block;font-size:13px;font-weight:700;color:#fff}
.ft .gco span{font-size:11.5px;color:#9FB4CB}

.ft .ftbtm{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:11.5px;color:#9FB4CB;gap:20px;flex-wrap:wrap}
.ft .ftsns{display:inline-flex;align-items:center;gap:14px}
.ft .ftsns a{display:inline-flex;opacity:.75}
.ft .ftsns a:hover{opacity:1}
.ft .ftsns img{width:14px;height:14px}

/* ============================================================
   フォーカス可視化（キーボード操作）
   シェル配下のみ。既存ページのフォーカス表現を変えないため。
   ============================================================ */
.hd :focus-visible,.ft :focus-visible,.cband :focus-visible,.skip:focus-visible{outline:2px solid var(--blu);outline-offset:2px}

/* ============================================================
   レスポンシブ。ブレークポイントは hb-geo.css と揃えて 1040 / 720。
   ============================================================ */
@media(max-width:1040px){
  .ft .ftg{grid-template-columns:1fr 1fr;gap:40px}
  .cband{padding:88px 24px}
  .cband h2{font-size:30px}
}

/* ヘッダーのバーガー切替は 768px 以下。6項目＋CONTACT の横幅が約 713px あり、
   720px 境界だと 721〜767px（iPad mini 縦等）でナビが利用幅を超えて溢れる（実測）。
   他の要素（フッター列・CTA帯）は 720 のまま。 */
@media(max-width:768px){
  .hd .nav{display:none}
  .hd .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px}
  .hd .nav.open a{padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}
  .hd .nav.open a.cta{margin-top:16px;text-align:center;border-bottom:none}
  .hd .burger{display:flex}
}

@media(max-width:720px){
  .hd .wrap,.ft .wrap{padding:0 20px}

  .cband{padding:64px 20px}
  .cband h2{font-size:25px;letter-spacing:.04em}

  .ft{padding:56px 0 28px}
  .ft .ftg{grid-template-columns:1fr;gap:36px}
  .ft .ftbtm{flex-direction:column;align-items:flex-start;gap:12px}
}