/* ===========================================================================
 * Direction B — ライトHUD（明るいまま、計器の言語を足す）  2026-09-10
 * 会長ご指示:「Bへ進めよう。A,良かった」
 *
 * 🟥 この案の絶対条件（前回ダーク化して「見にくい」とご指摘を受けた反省）:
 *   ・地の色 --paper:#FAFBFC を変えない
 *   ・本文の文字色 --ink:#16202B / --sub:#46586A を変えない
 *   ・カードの白 --card:#FFFFFF を変えない
 *   ⇒ 変えるのは「線・余白・字形・光」だけ。明度とコントラストには触らない
 *
 * 適用は index.html のみ（1変数ずつ確かめる）。戻すのは <link> 1行を消すだけ。
 * ======================================================================== */

/* ── 1. 計器グリッド：本文にかからない位置で消す ──────────────────
 * 濃度 4.5% で、ヒーロー直下から 620px だけ。本文が始まる前に完全に消える。 */
main,body{position:relative}
body::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1400px;
  z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(14,155,143,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,155,143,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0 640px, #000 700px, #000 1000px, transparent 1340px);
  mask-image:linear-gradient(180deg, transparent 0 640px, #000 700px, #000 1000px, transparent 1340px);
}
.site-head,section,footer{position:relative;z-index:1}

/* ── 2. セクションラベル：既存の Inter 11.5px / ls .34em / #0E9B8F はそのまま。
 *     計器の罫だけを前後に足す ───────────────────────────────── */
.sec-label{display:flex;align-items:center;gap:12px}
.sec-label::before{content:"//";opacity:.42;font-weight:800;letter-spacing:0}
.sec-label::after{
  content:"";height:1px;flex:1;max-width:190px;
  background:linear-gradient(90deg, rgba(14,155,143,.45), transparent);
}

/* ── 3. カード：白のまま。角を落とし、左に計器の目印を1本 ─────────── */
.card{
  border-radius:0;
  clip-path:polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  border:0;
  box-shadow:inset 0 0 0 1px var(--rule), 0 1px 2px rgba(20,50,79,.03);
  transition:box-shadow .26s ease, transform .26s ease;
  position:relative;
}
.card::after{
  content:"";position:absolute;left:0;top:38px;width:2px;height:36px;
  background:var(--teal);opacity:.85;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(14,155,143,.42), 0 12px 30px rgba(20,50,79,.09);
}

/* ── 4. 数字：桁を揃え、単位を teal に。色そのものは変えない ────────── */
.n,.price,.stat .n{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ── 5. 表：ヘッダを計器の見出しに（背景は白のまま・薄い teal を敷くだけ） ── */
.subtable th{
  background:rgba(14,155,143,.07);
  color:#0B7C72;
  font-family:var(--en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(14,155,143,.34);
}
.subtable tr:hover td{background:rgba(14,155,143,.035)}

/* ── 6. 箇条の点を発光させる（色は既存の teal のまま） ──────────────── */
.plainlist li::before,.weeks li::before{text-shadow:0 0 10px rgba(14,155,143,.45)}

/* ── 7. 区切り：セクションの境目に、細い計器の罫 ───────────────────── */
section.blk + section.blk{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, rgba(14,155,143,.24) 26%, rgba(14,155,143,.24) 74%, transparent) 1;
}

/* ── 8. スクロール演出を生き返らせる ───────────────────────────
 * style.css に .rv{opacity:0} → .rv.in{opacity:1} が元からあるのに、
 * ページ内<style>の .rv{opacity:1;transform:none} が打ち消していた（2026-09-10 実測）。
 * JS（rvSweep）は index.html に既存。ここで元の意図に戻す。 */
/* 🟥 2026-09-10 22:30 取り下げ — 演出を止め、本文を常に見える状態に固定する
 * 理由: 22:2X に本番を実測したところ、.rv 70件のうち `in` が付いていたのは 1件だけだった。
 *   スクロールしても増えるかを確かめようとしたが、CDP経由では scrollTo も scrollIntoView も
 *   効かず（scrollY=0 のまま）、IntersectionObserver も裏タブでは発火しなかった（rootMargin 20000px でタイムアウト）。
 *   ⇒ 「本文が見える」ことを実測で確認できなかった。
 * 判断: 演出の利得（見た目）より、外した時の損害（本文69ブロックが読めない）が桁違いに大きい。
 *   この演出は 9/10 以前は無効だった（ページ内<style>が打ち消していた）＝無くてもサイトは成立する。
 *   ⇒ 確かめられないものを本番に置かない。 */
.rv{opacity:1!important;transform:none!important;transition:none!important}

/* ── 9. アクセシビリティ・モバイル・印刷 ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none}
  .card{transition:none}
}
@media (max-width:820px){
  body::before{background-size:44px 44px;height:900px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0 420px, #000 470px, #000 700px, transparent 880px);
    mask-image:linear-gradient(180deg, transparent 0 420px, #000 470px, #000 700px, transparent 880px)}
  .card{clip-path:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px)}
  .card:hover{transform:none}
}
@media print{
  body::before{display:none!important}
  .card{clip-path:none!important;border:1px solid #ccc!important;box-shadow:none!important}
  .card::after{display:none!important}
  .rv{opacity:1!important;transform:none!important}
}