/* Pole Lap Logger — site styles
   Concept C “Data Sheet” 確定版: 見出し Roboto Slab 700 / ヒーロー直下は諸元表 */

:root{
  --bg-0:#0B0B0C; --bg-1:#101012; --bg-2:#141416; --bg-3:#1A1A1C;
  --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.055);
  --ink:#F1F0EC; --ink-2:#ADACA6; --ink-3:#75746F;
  /* アクセントはアプリのサーキットベスト purple（AppColors.circuitBest = #E040FB）を基準に組む。
     --brand-sig だけがアプリと同値で、使うのはワードマークとヒーローの要所のみ。
     本文セクションは彩度を落とした --brand / --brand-deep で、面積を抑えて使う。 */
  --brand:#C56BEE; --brand-hi:#DDA5F2; --brand-deep:#8E5BD6; --brand-sig:#E040FB;
  --on-brand:#170A1E;
  --maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:"Roboto Slab","Noto Serif JP",Georgia,serif;
  --body:Inter,"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg-0);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* width/height 属性を持つ画像は height:auto を当てないと縦横比が崩れる
   （属性の height が CSS の height として効き、幅だけ max-width で縮むため）。 */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--on-brand);padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.col{max-width:660px}
h1,h2,h3,h4,.display{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(40px,6.2vw,80px);line-height:1.06}
h2{font-size:clamp(30px,4.3vw,54px);line-height:1.1}
h3{font-size:22px;line-height:1.3}
p{margin:0 0 1.15em}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.lead{font-size:19.5px;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hl{color:var(--brand-hi)}                 /* Roboto Slab にイタリックが無いため強調は色で行う */
strong{font-weight:600;color:var(--ink)}

/* ── 日本語の組み ──────────────────────────────────
   Roboto Slab の欧文と同じ級数で和文（Noto Serif JP）を組むと大きすぎて破綻するため、
   見出しだけ一段落とし、行間と字送りを和文向けに戻す。本文サイズは共通のまま。 */
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] h4,
html[lang="ja"] .display,html[lang="ja"] .pc .pp,html[lang="ja"] .idx .t,
html[lang="ja"] .dl dt{letter-spacing:.01em}
html[lang="ja"] h1{font-size:clamp(30px,4.6vw,58px);line-height:1.3}
html[lang="ja"] h2{font-size:clamp(24px,3.3vw,42px);line-height:1.34}
html[lang="ja"] h3{font-size:20px;line-height:1.5}
html[lang="ja"] .lead{font-size:17.5px;line-height:1.85}
html[lang="ja"] .dl dt{font-size:17px;line-height:1.5}
html[lang="ja"] .idx .t{font-size:clamp(18px,2.1vw,24px)}
html[lang="ja"] .body-flow p:first-child::first-letter{font-size:1em;float:none;padding:0;color:inherit}
html[lang="ja"] .page-hero h1{font-size:clamp(28px,4.2vw,50px)}
html[lang="ja"] .group h2{font-size:clamp(20px,2.4vw,28px)}

/* ── nav ───────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.stuck{background:rgba(11,11,12,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px 26px;display:flex;align-items:center;gap:26px}
.mark{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.mark b{color:var(--brand-sig);font-weight:700}
.nav-links{margin-left:auto;display:flex;gap:24px;align-items:center;font-size:14px;color:var(--ink-2)}
.nav-links a{position:relative;padding-bottom:2px;
  background-image:linear-gradient(var(--brand),var(--brand));background-size:0 1px;
  background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--ease),color .3s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);background-size:100% 1px}
/* 言語切り替え。<details> なので JS 無しでも開閉する。
   言語が 10 前後まで増えても nav の高さと横幅が変わらないよう一覧は畳んである。 */
.langsel{position:relative;flex:none}
.langsel summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  padding:6px 8px;border:1px solid var(--line-soft);border-radius:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);white-space:nowrap;
  transition:color .3s,border-color .3s}
.langsel summary::-webkit-details-marker{display:none}
.langsel summary:hover{color:var(--ink);border-color:var(--line)}
.langsel summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.langsel .g,.langsel .c{fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.langsel .g{width:14px;height:14px;flex:none}
.langsel .c{width:9px;height:6px;flex:none;opacity:.7;transition:transform .25s var(--ease)}
.langsel[open] summary{color:var(--ink);border-color:var(--line)}
.langsel[open] .c{transform:rotate(180deg)}

.langsel-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:212px;max-height:min(70vh,480px);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(16,16,18,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:3px;box-shadow:0 18px 46px rgba(0,0,0,.55);
  padding:6px}
.langsel-menu ul{list-style:none;margin:0;padding:0}
.langsel-menu a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:2px;font-size:14px;color:var(--ink-2);
  background-image:none;transition:background-color .2s,color .2s}
.langsel-menu a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.langsel-menu a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.langsel-menu a[aria-current]{color:var(--brand)}
.langsel-menu .k{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-3);white-space:nowrap}
.langsel-menu a[aria-current] .k{color:var(--brand-deep)}
@media(prefers-reduced-motion:reduce){.langsel .c{transition:none}}
@media(max-width:900px){.nav-links a.opt{display:none}}
@media(max-width:560px){.mark{font-size:16px}.nav-links{gap:15px;font-size:13px}.nav-in{gap:12px;padding:14px 20px}}
/* 380px 未満はワードマーク + 言語切り替えが横に収まらない（実測 320px で 34px はみ出す）。
   参照ページへの導線は目次とフッターが持っているので、ナビからは落とす。 */
@media(max-width:379px){.nav-links>a{display:none}}

/* ── buttons ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border:1px solid var(--brand);
  border-radius:2px;color:var(--brand);font-size:14.5px;letter-spacing:.01em;position:relative;overflow:hidden;
  transition:color .35s var(--ease)}
.btn>*{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.btn:hover{color:var(--on-brand)}
.btn:hover::before{transform:scaleX(1)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-quiet{border-color:var(--line);color:var(--ink-2)}
.btn-quiet::before{background:rgba(255,255,255,.92)}
.btn-quiet:hover{color:#0B0B0C}
.btn[aria-disabled="true"]{cursor:default;opacity:.85}
.btn[aria-disabled="true"]:hover{color:var(--brand)}
.btn[aria-disabled="true"]:hover::before{transform:scaleX(0)}

/* ── hero ──────────────────────────────────────────── */
.hero{padding:132px 0 0;position:relative;overflow:hidden;
  background:
    radial-gradient(66% 44% at 84% 6%,rgba(224,64,251,.10),transparent 64%),
    radial-gradient(50% 38% at 22% 2%,rgba(142,91,214,.09),transparent 66%),
    var(--bg-0)}
.rule-top{height:1px;background:linear-gradient(90deg,var(--brand-sig),var(--brand-deep) 28%,transparent 56%);
  opacity:.75;margin-bottom:44px}
.hero-h{display:grid;grid-template-columns:1.35fr .65fr;gap:52px;align-items:end}
.hero-side{border-left:1px solid var(--line);padding-left:26px;font-size:15.5px;color:var(--ink-2)}
.hero-side p{margin-bottom:.8em}
.hero-side p:last-child{margin-bottom:0}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;align-items:center}
.cta-row .badges{margin-top:0}
@media(max-width:880px){
  .hero{padding-top:112px}
  .hero-h{grid-template-columns:1fr;gap:28px}
  .hero-side{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}
}

/* ── spec strip（諸元）─────────────────────────────
   ヒーローの第一印象を軽くするため、メインビジュアルの「後」に置く 3 点だけの帯。
   ここを 4 点以上に増やさないこと（増やすならセクション側へ移す）。 */
.strip{display:grid;grid-template-columns:repeat(3,1fr);margin:40px 0 0;border-top:1px solid var(--line)}
.strip>div{padding:18px 24px 24px;border-right:1px solid var(--line-soft)}
.strip>div:first-child{padding-left:0}
.strip>div:last-child{padding-right:0;border-right:0}
.strip dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.strip dd{margin:9px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media(max-width:760px){
  .strip{grid-template-columns:1fr;margin-top:32px}
  .strip>div{padding:14px 0;border-right:0;border-bottom:1px solid var(--line-soft)}
  .strip>div:last-child{border-bottom:0}
}

/* ── figure plate ──────────────────────────────────── */
.plate{margin:46px 0 0}
.frame{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#000}
.plate img{width:100%;height:auto}

/* ── sections ──────────────────────────────────────── */
/* セクションごとに高さの強弱を付ける（スクロールのリズムを単調にしないため）:
   tall = 主要 3 節 / 既定 = 中 / tight = 一覧・補注系。 */
.sec{padding:112px 0;position:relative}
.sec.tall{padding:150px 0}
.sec.tight{padding:78px 0}
.bg-0{background:var(--bg-0)}.bg-1{background:var(--bg-1)}.bg-2{background:var(--bg-2)}
.shead{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start;margin-bottom:42px}
.shead .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-3);padding-top:14px;border-top:1px solid var(--brand-deep)}
.sec.tight .shead{margin-bottom:32px}
@media(max-width:760px){.shead{grid-template-columns:1fr;gap:12px}
  .sec{padding:76px 0}.sec.tall{padding:94px 0}.sec.tight{padding:58px 0}}

/* 段組みしない本文。先頭の 1 文字だけドロップキャップにする（欧文のみ）。 */
.body-flow{max-width:900px;orphans:2;widows:2}
.body-flow p:last-child{margin-bottom:0}
.body-flow p:first-child::first-letter{font-family:var(--display);font-weight:700;font-size:54px;line-height:.86;float:left;padding:8px 12px 0 0;color:var(--brand-hi)}

/* 上端そろえ。中央そろえだと本文の列のほうが背が高い節で、画像の上端より前に本文が
   出てしまう（見出しと画像の間に文字が挟まって見える）。短い本文の節だけ、その場で
   align-items:center を上書きしている。 */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:20px}
.pair.rev .m{order:-1}
/* 縦 1 列になったら、**見出しの直後に画像が来る**ようにする（本文を先に読ませない）。
   `.pair.rev` は DOM 上すでに .m が先頭なので、同じ order:-1 で先頭のまま変わらない。
   最終 CTA（.fin-grid）はこの規則の対象外で、従来どおり本文が先に来る。 */
@media(max-width:880px){.pair,.pair.rev{grid-template-columns:1fr;gap:34px}.pair .m{order:-1}}

/* 枠幅は `--ph-w` 経由で持つ。機種切替が「もう一方の機種でも表示高さが揃う幅」を
   calc(var(--ph-w) * var(--dsw-scale)) で作るため、直接 max-width を上書きしない。 */
.ph{border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#000;
  --ph-w:320px;max-width:var(--ph-w);margin:0 auto;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.ph.sm{--ph-w:250px}
.ph img{width:100%;height:auto}

/* ── screenshot device switch ──────────────────────
   切替そのものは JS を使わない。ラジオ 2 個 + 一般兄弟結合子 `~` だけで成立するので、
   JavaScript が無効でも動く（site.js が足すのはスワイプという上乗せだけ）。

   **枠の形は選択中の機種の画像そのもののアスペクト比にする。** 両機種を同じ箱へ
   contain で押し込むと、アスペクトの差がそのまま黒帯になって不格好だった（旧実装）。
   `--dsw-ar-a` / `--dsw-ar-b` は shotFrame() が geometry の html 寸法から出す。

   **切り替えても版面が縦へ跳ねないように、もう一方の機種は枠幅のほうを広げる。**
   `--dsw-scale` は「両機種の表示高さが揃う幅の倍率」で、これも geometry 由来。
   横に広げる余地が無い狭い画面では max-width が実幅で頭打ちになり、そのぶんだけ
   高さが変わる（黒帯を出さないことを優先した意図的な妥協）。

   ラジオは版面から外すが、**タブ行の位置に置く**。fieldset の先頭に置くと、label を
   押した瞬間にブラウザがフォーカスした input を scrollIntoView し、ページが節の
   先頭へ飛ぶ（実測で確認）。site.js 側でも mousedown の既定動作を止めて二重に防ぐ。 */
.dsw{border:0;margin:0;padding:0;min-width:0;position:relative}
.dsw-lg{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dsw-r{position:absolute;left:50%;bottom:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.dsw-fr{position:relative;aspect-ratio:var(--dsw-ar-a);touch-action:pan-y;
  transition:aspect-ratio .3s ease,max-width .3s ease}
.dsw-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dsw-fr .dsw-b{visibility:hidden}
.dsw-r.is-b:checked ~ .dsw-fr{aspect-ratio:var(--dsw-ar-b)}
.dsw-r.is-b:checked ~ .dsw-fr.ph{max-width:calc(var(--ph-w) * var(--dsw-scale))}
.dsw-r.is-b:checked ~ .dsw-fr .dsw-a{visibility:hidden}
.dsw-r.is-b:checked ~ .dsw-fr .dsw-b{visibility:visible}
@media(prefers-reduced-motion:reduce){.dsw-fr{transition:none}}
.dsw-t{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dsw-t label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:7px 14px;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
.dsw-t label:hover{color:var(--ink-2)}
.dsw-r.is-a:checked ~ .dsw-t .is-a,
.dsw-r.is-b:checked ~ .dsw-t .is-b{color:var(--ink);border-color:var(--brand-deep);background:rgba(224,64,251,.08)}
.dsw-r.is-a:focus-visible ~ .dsw-t .is-a,
.dsw-r.is-b:focus-visible ~ .dsw-t .is-b{outline:2px solid var(--brand);outline-offset:3px}

/* 端末モックの下に置く説明 1 行（04 サーキットエディタ節） */
.media-note{margin:16px auto 0;max-width:320px;font-size:14.5px;color:var(--ink-3)}

/* ── definition rows ───────────────────────────────── */
.dl{border-top:1px solid var(--line)}
/* hover の「少し右へ寄る」動きは **中身を transform で動かす**。padding を足すと
   グリッドの 1fr 列がそのぶん狭くなり、ホバーのたびに本文の折り返しが変わってしまう。
   行の箱・背景・罫線は動かさないので、罫のはしごも揃ったままになる。 */
.dl .r{display:grid;grid-template-columns:210px 1fr;gap:28px;padding:19px 0;border-bottom:1px solid var(--line-soft);
  transition:background .35s}
.dl .r>*{transition:transform .35s var(--ease)}
.dl .r:hover{background:rgba(255,255,255,.018)}
.dl .r:hover>*{transform:translateX(10px)}
.dl dt{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.005em}
.dl dd{margin:0;color:var(--ink-2);font-size:15.5px}
.dl .tagm{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.dl.steps .r{grid-template-columns:290px 1fr}
@media(max-width:700px){.dl .r,.dl.steps .r{grid-template-columns:1fr;gap:5px}}

/* ── tables ────────────────────────────────────────── */
/* grid の子は min-width:auto が既定なので、中身（幅の広い表）が列を押し広げて
   ページ全体に横スクロールが出る。min-width:0 にして overflow-x:auto を効かせる。 */
.pair>*,.hero-h>*,.shead>*,.price>*,.f-grid>*,.dl .r>*,.idx a>*,
.also>*,.a-rest>*,.cvs>*,.strip>*,.fin-grid>*{min-width:0}
.table-wrap{overflow-x:auto;max-width:100%}
table{width:100%;border-collapse:collapse;margin-top:8px;font-size:15px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;padding:0 16px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top}
td.nm{color:var(--ink)}
tbody tr:hover td{background:rgba(255,255,255,.016)}
caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-deep);padding-bottom:12px}
/* 狭い画面では横スクロールに逃がす前に、まず級数と余白で収める */
@media(max-width:560px){
  table{font-size:14.5px}
  th{padding-right:12px}
  td{padding:11px 12px 11px 0}
  /* `(Müllenbachschleife)` のように長い 1 語があると、それだけで表の最小幅が
     390px を超えて .table-wrap に横スクロールが出る（アイコンを足す前から
     ドイツの表がそうだった）。狭い画面でだけ語中改行を許して収める。
     **break-word ではなく anywhere** — min-content 幅に効くのは anywhere だけで、
     表の列幅はその min-content から決まる。 */
  td{overflow-wrap:anywhere}
  td:last-child,th:last-child{padding-right:0}
}

/* コース形状アイコン（/circuits の表）
   td を flex にすると表の列レイアウトから外れるので、セルの中に 1 枚 span を挟む。
   アイコンは 26px 角 = 行の中身の高さ（15px × line-height 1.7 ≒ 25.5px）。
   行の padding（13px）は変えない。アイコンの無い行にも同じ幅の空要素を置いて、
   名前の開始位置を全行で揃える。 */
.nmr{display:flex;align-items:flex-start;gap:10px}
.trk{flex:0 0 26px;width:26px;height:26px;padding:0;margin:0;border:0;background:none;
  border-radius:3px;display:block;line-height:0}
button.trk{cursor:zoom-in}
.trk img{width:26px;height:26px;display:block}
@media(hover:hover){button.trk:hover{background:rgba(255,255,255,.07)}}
@media(max-width:560px){.nmr{gap:8px}}

/* 拡大表示。ページに 1 つだけ置く共有要素で、position:fixed なので
   `.table-wrap{overflow-x:auto}` に切られない。
   hover 時は指したアイコンの脇へ、タップ時は画面中央へ出す。 */
.trkpop{position:fixed;z-index:60;pointer-events:none}
.trkpop[hidden]{display:none!important}
.trkpop-bd{position:absolute;inset:0;background:rgba(11,11,12,.74);display:none}
.trkpop-im{position:relative;width:420px;height:420px;padding:16px;background:var(--bg-2);
  border:1px solid rgba(255,255,255,.16);border-radius:5px;box-shadow:0 18px 54px rgba(0,0,0,.75)}
.trkpop[data-mode="modal"]{left:0;top:0;width:100%;height:100%;pointer-events:auto;
  display:flex;align-items:center;justify-content:center}
.trkpop[data-mode="modal"] .trkpop-bd{display:block}
.trkpop[data-mode="modal"] .trkpop-im{width:min(420px,90vw);height:min(420px,90vw)}

/* ── pricing ───────────────────────────────────────── */
.price{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:12px}
.pc{padding:34px 30px;border-right:1px solid var(--line-soft);background:var(--bg-1)}
.pc:last-child{border-right:0}
.pc.feat{background:var(--bg-3);box-shadow:inset 0 2px 0 var(--brand)}
.pc .pn{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.pc .pp{font-family:var(--display);font-weight:700;font-size:40px;line-height:1.2;margin:12px 0 0}
.pc .pp small{font-family:var(--mono);font-size:13px;color:var(--ink-3);font-weight:400;margin-left:9px}
/* 価格行列: 列 = 期間 / 行 = 地域。等幅 + tabular-nums で桁を縦に揃え、
   「US の月額」「日本の年額」を推測なしで拾えるようにする。
   行ごとに別 grid なので、数値セルと見出しセルに同じ min-width を与えて列を揃える
   （subgrid を使わずに済ませるため。価格文字列が 4.6em を超えたらここを見直すこと）。 */
.pxm{margin:18px 0 0;border-top:1px solid var(--line-soft);font-family:var(--mono)}
.pxm>div{display:grid;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.pxm-2>div{grid-template-columns:1fr auto auto}
.pxm-1>div{grid-template-columns:1fr auto}
.pxm>div:last-child{border-bottom:0}
.pxm .hd{padding-top:2px}
.pxm .hd span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pxm .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pxm .a{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.pxm .hd span,.pxm .a{min-width:68px;text-align:right}
.pxm .hd span:first-child,.pxm .k{min-width:0;text-align:left}
/* 和文は 10px + 広い字送りだと読みにくいので、行列の見出しだけ一段上げる */
html[lang="ja"] .pxm .k,html[lang="ja"] .pxm .hd span{font-size:11px;letter-spacing:.06em}
.pc ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px;font-size:14.5px;color:var(--ink-2)}
.pc ul li::before{content:"·";color:var(--brand);margin-right:9px}
.price-note{margin-top:18px;font-size:14px;color:var(--ink-3);max-width:82ch}
/* 価格節の予定機能。price-note と同じ地味さに揃え、価格表より前に出ないようにする。 */
.roadmap{margin-top:26px;max-width:82ch}
.roadmap h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.roadmap p{font-size:14px;color:var(--ink-3);margin:0 0 8px}
.roadmap ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--ink-3)}
.roadmap li::before{content:"·";color:var(--ink-3);margin-right:9px}
@media(max-width:880px){.price{grid-template-columns:1fr}.pc{border-right:0;border-bottom:1px solid var(--line-soft)}}

/* ── 05 そのほか（Editorial・均一カードの羅列にしない）─────
   重要な 2 項目を幅の違う 2 段で見せ、残り 4 項目は罫線だけの補注リストにする。
   カードの箱を持たせず、級数と余白だけで重みの差を作る。 */
.also{display:grid;grid-template-columns:repeat(12,1fr);column-gap:48px;align-items:start}
.a-lead .n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.a-lead h3{letter-spacing:-.005em}
.a-1{grid-column:1/7}
.a-1 h3{font-size:27px;line-height:1.22}
.a-1 p{margin:12px 0 0;font-size:16.5px;color:var(--ink-2);max-width:46ch}
.a-2{grid-column:8/13;padding-top:32px}
.a-2 h3{font-size:21px;line-height:1.3}
.a-2 p{margin:10px 0 0;font-size:15px;color:var(--ink-2)}
.a-rest{grid-column:1/13;list-style:none;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:1px solid var(--line)}
.a-rest li{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.a-rest h3{font-size:17px;line-height:1.35}
.a-rest p{margin:6px 0 0;font-size:14.5px;color:var(--ink-3)}
html[lang="ja"] .a-1 h3{font-size:24px}
html[lang="ja"] .a-2 h3{font-size:19px}
html[lang="ja"] .a-rest h3{font-size:16.5px}
@media(max-width:880px){
  .also{grid-template-columns:1fr;column-gap:0}
  .a-1,.a-2,.a-rest{grid-column:auto}
  .a-2{padding-top:36px}
  .a-rest{grid-template-columns:1fr;margin-top:42px}
}
@media(max-width:600px){.a-rest p,.a-2 p{font-size:15px}}

/* ── 07 サーキット: 代表会場を大きく、残りを compact に ──
   全レイアウトの情報量は保ったまま、縦の長さだけを詰める。
   代表会場は 6〜8 件の可変数（列数はブレークポイントで 4/2/1 に変わる）なので、
   行頭・行末・行間の罫線はカード枚数をハードコードせず「最終行だけ罫線なし」を
   汎用パターンで書く: 全カードに border-bottom を付けたうえで、最終行の各セル
   だけ打ち消す。打ち消し規則は列数ごとに自分の幅範囲だけへ @media で閉じ込める
   （閉じないと詳細度の高い規則が下の狭いブレークポイントまで漏れて残る）。
   4 列（≥901px）は nth-child(4n+1) 起点、2 列（641〜900px）は nth-child(2n+1)
   起点で「末尾から列数以内のセルとその後続きょうだい」を選び、4 の倍数・偶数
   でなくても正しく最終行だけを選ぶ。1 列（≤640px）は列崩れが無いため
   `.cv:last-child{border-bottom:0}` だけで足りる。 */
.cvs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.cv{padding:24px 20px 26px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.cv:nth-child(4n+1){padding-left:0}
.cv:nth-child(4n){padding-right:0;border-right:0}
.cv:last-child{padding-right:0;border-right:0}
@media(min-width:901px){
  .cv:nth-child(4n+1):nth-last-child(-n+4),
  .cv:nth-child(4n+1):nth-last-child(-n+4)~.cv{border-bottom:0}
}
.cv .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.cv h3{margin:10px 0 0;font-size:20px;line-height:1.25}
.cv p{margin:8px 0 0;font-size:14px;color:var(--ink-3)}
html[lang="ja"] .cv h3{font-size:18px}
@media(max-width:900px){
  .cvs{grid-template-columns:1fr 1fr}
  .cv{padding-left:20px;padding-right:20px;border-right:1px solid var(--line-soft)}
  .cv:nth-child(odd){padding-left:0}
  .cv:nth-child(even){padding-right:0;border-right:0}
}
@media(min-width:641px) and (max-width:900px){
  .cv:nth-child(2n+1):nth-last-child(-n+2),
  .cv:nth-child(2n+1):nth-last-child(-n+2)~.cv{border-bottom:0}
}
@media(max-width:640px){
  .cvs{grid-template-columns:1fr}
  .cv{padding:20px 0 22px;border-right:0;border-bottom:1px solid var(--line-soft)}
  .cv:last-child{border-bottom:0}
}

/* ── index ─────────────────────────────────────────── */
.idx{border-top:1px solid var(--line);margin-top:8px}
/* .dl .r と同じ理由で padding ではなく transform で寄せる（見出しの折り返しが変わらない）。
   右寄せの .d / .arw は元から独自の hover を持つので、寄せるのは左側の .n / .t だけ。 */
.idx a{position:relative;display:grid;grid-template-columns:56px 1fr auto 20px;gap:24px;align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--line-soft)}
/* hover でアンダーラインが左から伸びる（既存の 1px 罫の上に重ねる） */
.idx a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--brand);transition:width .55s var(--ease)}
.idx a:hover::after{width:100%}
.idx .n{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.16em;
  transition:color .3s,transform .35s var(--ease)}
.idx a:hover .n{color:var(--brand);transform:translate(12px,-2px)}
.idx .t{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.5vw,28px);letter-spacing:-.01em;
  transition:transform .4s var(--ease)}
.idx a:hover .t{transform:translateX(12px)}
.idx .d{font-size:14px;color:var(--ink-3);justify-self:end;text-align:right;opacity:.72;transition:opacity .35s}
.idx a:hover .d{opacity:1}
.idx .arw{justify-self:end;color:var(--ink-3);opacity:.35;
  transition:transform .4s var(--ease),opacity .35s,color .35s}
.idx a:hover .arw{transform:translateX(5px);opacity:1;color:var(--brand)}
@media(max-width:720px){.idx .d{display:none}.idx a{grid-template-columns:46px 1fr 20px;gap:16px}}

/* ── final CTA / store badges ──────────────────────── */
/* ヒーロー（少し華やか）→ 本文（静か）→ 最終 CTA（再び少し華やか）で閉じる。
   ヒーローと同じ 2 色の radial を、位置だけ反転させて使う。 */
.final{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:96px 0 112px;
  background:
    radial-gradient(56% 42% at 14% 98%,rgba(224,64,251,.10),transparent 64%),
    radial-gradient(44% 34% at 90% 4%,rgba(142,91,214,.08),transparent 66%),
    var(--bg-0)}
.rule-top.rev{background:linear-gradient(270deg,var(--brand-sig),var(--brand-deep) 28%,transparent 56%);
  margin-bottom:54px}
.fin-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.fin-grid .ph{--ph-w:286px}
@media(max-width:880px){.fin-grid{grid-template-columns:1fr;gap:46px}.fin-grid .ph{--ph-w:250px}}
.badges{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.badge{border:1px solid var(--line);border-radius:3px;padding:13px 22px;display:grid;gap:2px;
  transition:border-color .3s,background .3s;cursor:default}
.badge small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.badge strong{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
@media(max-width:560px){
  .badges{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .badge{padding:12px 14px}
  .badge strong{font-size:16px}
  .cta-row{display:block}
  .cta-row .btn{margin-top:12px}
}
a.badge{cursor:pointer}
a.badge:hover{border-color:rgba(197,107,238,.55);background:rgba(197,107,238,.06)}

/* ── footer ────────────────────────────────────────── */
.foot{background:var(--bg-1);border-top:1px solid var(--line);padding:60px 0 40px;font-size:14px;color:var(--ink-3)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;font-weight:400;color:var(--ink-3)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot ul a{color:var(--ink-2)}
.foot ul a:hover{color:var(--brand)}
.f-bottom{margin-top:44px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr}}

/* ── sub pages ─────────────────────────────────────── */
.page-hero{padding:150px 0 0;background:var(--bg-0)}
.page-hero h1{font-size:clamp(34px,5.6vw,64px)}
.page-hero .lead{margin-top:20px;max-width:62ch}
.page-body{padding:64px 0 110px}
.group{margin-top:56px}
.group:first-child{margin-top:0}
.group h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.group .gnote{color:var(--ink-3);font-size:14.5px;margin:0 0 18px}
.callout{border-left:2px solid var(--brand-deep);padding:4px 0 4px 20px;margin:44px 0 0;color:var(--ink-2);font-size:15.5px;max-width:70ch}

/* long-form (privacy / support) */
.doc{max-width:44rem}
.doc h2{font-size:clamp(21px,2.3vw,26px);margin:52px 0 12px;padding-top:26px;border-top:1px solid var(--line)}
.doc h3{font-size:17px;margin:30px 0 8px;color:var(--ink)}
.doc p,.doc li{font-size:16px;color:var(--ink-2)}
.doc ul{padding-left:1.2rem;margin:.6rem 0}
.doc li{margin:.5rem 0}
.doc a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc .meta{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em;margin:0 0 30px;line-height:2}
.doc .summary{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px;padding:20px 24px;margin:26px 0}
.doc .summary p{margin:.4rem 0}
.doc .summary p:first-child{color:var(--ink);font-family:var(--display);font-weight:700;font-size:17px}
.doc .langnote{border-left:2px solid var(--brand-deep);padding:2px 0 2px 18px;font-size:14.5px;color:var(--ink-3);margin:22px 0 0}
/* サポートページの連絡先。アドレスは site.js が実行時に差し込むので（D12）、
   HTML 側は空の器のまま。長いアドレスが 320px でも折れるよう anywhere を効かせる。 */
.doc .mail{font-family:var(--mono);font-size:16px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px;padding:16px 20px;margin:20px 0;overflow-wrap:anywhere}
.doc table{font-size:15px}
.doc td:first-child{color:var(--ink);white-space:nowrap;padding-right:24px}
/* 狭い画面では 1 列目の nowrap（「Notifications (Android)」で 184px）が表を
   はみ出させる。body の overflow-x:hidden で切れて読めなくなるため折り返させる。 */
@media(max-width:560px){
  .doc table{font-size:14.5px}
  .doc td:first-child,.doc th:first-child{white-space:normal;padding-right:14px}
  /* anywhere は min-content 幅にも効く（break-word と違う）ので、320px でも表が縮む */
  .doc td,.doc th{overflow-wrap:anywhere}
}

/* ── モバイル（390px 前後）の可読性 ──────────────────
   横幅不足を級数の縮小で解決しない。補助テキストは 14px を下限にする。 */
@media(max-width:600px){
  .lead{font-size:18px}
  .cv p,.dl dd,.pc ul,.price-note,.media-note,.roadmap p,.roadmap ul{font-size:15px}
  .pxm .a{font-size:15px}
  .strip dd{font-size:15.5px}
  .idx .t{font-size:21px}
}

/* ── reveal ────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn::before,.dl .r,.idx a,.idx a::after,.idx .n,.idx .arw,.idx .d{transition:none}
}