/* ARAVISTO LP — 製品ページ（ARAVISTO EYE・ARAVISTO LAB）専用の見た目。案C「Signal Accent」。
 *
 * 正: design/lp-uupm/20_redesign_brief.md（トークン §3.1・部品 §3.2・製品色の規則 PC-1〜PC-9）、
 *     文言は 30_copy_delta.md、図は 31_graphics。
 * 読み込むのは lp/eye と lp/lab だけ（styles.css の後）。ほかのページの見た目を変えないため、
 * **すべての規則を body.page-product の下に閉じる**（40_pm_decisions R1: 適用は製品ページだけ）。
 * 製品色で面を塗るのは主 CTA だけ。文字には製品色を使わない（PC-1・PC-2）。 */

/* ------------------------------------------------------------------ トークン */
body.page-product {
  --bg: #0a0a0a;
  --panel: #141414;
  --panel-2: #1c1c1c;
  --line-soft: #242424;
  --line: #3d3d3d;
  --text: #f2f2f2;
  --text-mid: #b0b0b0;
  --text-dim: #8f8f8f;
  --line-control: #858585;
  --ring: #f2f2f2;
  --danger: #f87171;

  --radius: 2px; --radius-lg: 2px; --radius-sm: 2px; --radius-pill: 2px;

  --font-head: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-num: "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* --font-ja（本文）と --font-en（ロゴ・製品名の Inter）は styles.css のまま */

  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px;
  --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px;
  --fs-h1: clamp(28px, 3vw, 38px);
  --fs-h2: clamp(24px, 2.6vw, 32px);

  /* 主 CTA。文字は黒に固定（白は琥珀の上で 1.67:1 のため禁止。20 §1.2 (1)） */
  --on-cta: #0a0a0a;

  font-family: var(--font-ja);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.page-product[data-product="eye"] { --cta: #fbbf24; --cta-hover: #fcd34d; --cta-active: #f59e0b; }
body.page-product[data-product="lab"] { --cta: #60a5fa; --cta-hover: #93c5fd; --cta-active: #3b82f6; }

/* 列の幅と左右の余白は、ほかのページと同じ .shell のまま（ヘッダーのロゴの位置を全ページで揃える。
   61 M-1）。KV の図の枠の内寸 520px 以上は、FV の列の比（下の ① の 1024px 以上）で確保する。
   559px 以下は KV の枠の内余白を 8px にして、375px で図の表示幅 309px を確保する。 */

/* ヘッダーの横並びのリンクは、ほかのページと同じ字形（Inter 400/500 の欧文＋Noto Sans JP の和文）。
   Inter はロゴとナビの製品名の文字（ABEILORSTVY）だけを text= で読み込む（PM 決定 2026-09-19） */
body.page-product .nav > a { font-family: var(--font-en), var(--font-ja); }

/* 共有の部品（スキップリンク・メニューボタン）の角丸を、製品ページの中だけ 2px にする（61 M-2） */
body.page-product .skip-link,
body.page-product .nav-toggle,
body.page-product .nav-toggle:focus-visible { border-radius: var(--radius); }

/* ------------------------------------------------------------------ フォーカス */
/* 全要素で 3px の白、隙間 3px（20 §1.3）。製品色の面に輪郭を接しさせない */
body.page-product :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: var(--radius); }
body.page-product main:focus, body.page-product main:focus-visible { outline: none; }
/* ページ内リンクで移った先の見出し。キーボードで来たときだけ輪郭を出す */
body.page-product [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------------ ボタン */
body.page-product .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  min-height: 52px; padding: 0 28px; line-height: 1.4;
  border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--font-ja); font-size: var(--fs-15); font-weight: 700; letter-spacing: .02em;
  box-shadow: none; transform: none; cursor: pointer; text-align: center;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
body.page-product .btn-primary { background: var(--cta); color: var(--on-cta); }
body.page-product .btn-primary:hover { background: var(--cta-hover); transform: none; box-shadow: none; }
body.page-product .btn-primary:active { background: var(--cta-active); }
body.page-product .btn .arrow { display: inline-block; transition: transform var(--dur-fast) ease; }
body.page-product .btn-primary:hover .arrow { transform: translateX(3px); }
body.page-product .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-control); }
body.page-product .btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--text); }
body.page-product .btn-ghost:active { background: rgba(255, 255, 255, .12); }
body.page-product .btn:disabled, body.page-product .btn[aria-disabled="true"] {
  background: #2a2a2a; color: #a9a9a9; border-color: transparent; cursor: not-allowed; opacity: 1;
}

/* ヘッダーの小さい CTA は枠だけ（PC-8）。見た目 40px、当たり判定は上下に 2px 広げて 44px */
body.page-product .header-cta {
  position: relative; min-height: 40px; height: 40px; padding: 0 var(--sp-16); font-size: 14px;
}
body.page-product .header-cta::after { content: ""; position: absolute; inset: -2px 0; }
/* JS 無効では出さない（上の .btn の display が styles.css の [hidden] に勝たないように） */
html:not(.js) body.page-product .header-cta[hidden] { display: none; }
/* 狭い画面でロゴのマークが潰れないようにする（ロゴは縮めない。変更前は 375px でマークが 4px に潰れていた）。
   小 CTA の表示条件は styles.css と同じ（767px 以下は隠す。言語切り替えを置く場所を空けるため） */
body.page-product .brand-mark { flex: none; }
@media (max-width: 767px) {
  /* 上の .btn の display が styles.css の規則に勝たないように、同じ条件を書き直す */
  body.page-product .header-cta, .js body.page-product .header-cta, .js body.page-product .header-cta[hidden] { display: none; }
}
@media (max-width: 559px) { body.page-product .header-inner { gap: var(--sp-12); } }
@media (max-width: 413px) {
  body.page-product .header-inner { gap: var(--sp-8); }
  body.page-product .header-cta { padding: 0 var(--sp-8); font-size: var(--fs-13); letter-spacing: 0; }
}

/* 文字リンク: 白の文字＋下線 1px（オフセット 4px）＋矢印 */
body.page-product .text-link {
  font-family: var(--font-ja); font-weight: 500; color: var(--text);
  text-decoration-color: var(--text-mid); text-underline-offset: 4px;
}
body.page-product .text-link:hover { text-decoration-color: var(--text); }
body.page-product .inline-link { text-decoration-color: var(--text-mid); text-underline-offset: 4px; }
body.page-product .inline-link:hover { text-decoration-color: var(--text); text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------ 文字の部品 */
.page-product .ph { display: inline-block; }
.page-product .ph-keep { white-space: nowrap; }
.page-product .p-h1, .page-product .p-h2 {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .02em; color: var(--text);
  word-break: auto-phrase; text-wrap: balance; font-feature-settings: "palt" 1;
}
.page-product .p-h1 { font-size: var(--fs-h1); line-height: 1.42; margin: var(--sp-24) 0 0; overflow-wrap: anywhere; }
.page-product .p-h2 { font-size: var(--fs-h2); line-height: 1.45; }
.page-product .p-h3 { font-family: var(--font-ja); font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--text); }
@media (min-width: 768px) { .page-product .p-h3 { font-size: var(--fs-20); } }
/* 英字の小見出しと数値は Fira Code。見出しには使わない */
.page-product .p-en {
  font-family: var(--font-num); font-size: var(--fs-12); font-weight: 400; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}
.page-product .p-lead { font-size: var(--fs-16); line-height: 1.85; color: var(--text-mid); max-width: 44em; }
.page-product .p-note { font-size: var(--fs-15); line-height: 1.75; color: var(--text-mid); max-width: 36em; }
.page-product .p-figcap { margin-top: var(--sp-12); font-size: var(--fs-13); line-height: 1.6; color: var(--text-dim); text-align: center; }
/* タグ（プランの札・条件の札・お客様／担当者）。押せないのでボタンに似せない */
.page-product .p-tag {
  display: inline-block; align-self: flex-start; max-width: 100%;
  padding: 1px var(--sp-8); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-13); font-weight: 500; line-height: 1.7; color: var(--text);
}

/* ------------------------------------------------------------------ ① ファーストビュー */
/* 地色を敷いて、背景の隅の巣を FV に重ねない */
.page-product .p-fv { position: relative; background: var(--bg); padding: var(--sp-48) 0 var(--sp-64); border-bottom: 1px solid var(--line-soft); }
.page-product .p-fv-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-32); }
.page-product .lockup { letter-spacing: .14em; }
.page-product .p-lockup-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-12); margin-top: var(--sp-8); }
.page-product .p-lockup-desc { font-size: var(--fs-15); line-height: 1.6; color: var(--text-mid); }
.page-product .p-fv-lead { margin-top: var(--sp-16); max-width: 34em; font-size: 17px; line-height: 1.85; color: var(--text-mid); }
.page-product .p-fv-actions { margin-top: var(--sp-24); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.page-product .p-fv-actions .text-link { margin-top: var(--sp-4); }
.page-product .p-btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* 対象者リンク（行ごとに上罫、44px 以上、右端に ↓） */
.page-product .p-aud-label { font-size: var(--fs-13); color: var(--text-dim); margin-bottom: var(--sp-4); }
.page-product .p-aud-list { list-style: none; margin: 0; padding: 0; }
.page-product .p-aud-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  min-height: 48px;
  font-size: var(--fs-15); color: var(--text);
}
.page-product .p-aud-list .t, .page-product .p-aud-list .arrow { transition: transform var(--dur-fast) ease; }
.page-product .p-aud-list .arrow { color: var(--text-mid); padding-right: var(--sp-4); }
.page-product .p-aud-list a:hover .t { transform: translateX(8px); }
.page-product .p-aud-list a:hover .arrow { transform: translateY(3px); color: var(--text); }
.page-product .p-aud-list a:focus-visible { outline-offset: -3px; }

/* KV の図の枠: 面 #141414・枠 #3d3d3d・内余白 16px（40 R2: 図の中の和文 13px 以上を保つ） */
.page-product .p-fv-fig { margin: 0; min-width: 0; max-width: 640px; }
.page-product .p-kv {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-16); container-type: inline-size;
}
.page-product .p-kv svg { display: block; width: 100%; height: auto; }
/* 559px 以下は左右の余白 24px（全ページ共通）の中に置くので、枠の内余白を 8px にして
   375px で図の表示幅 309px（図の中の和文 13px）を保つ */
@media (max-width: 559px) { .page-product .p-kv { padding: var(--sp-8); } }
/* デスクトップ用の図は、表示幅 520px 以上でだけ使う（08 README §0。和文 13px の下限）。
   枠の内寸で切り替えるので、1024〜1279px の 2 列でもモバイル用の図が出る */
.page-product .p-kv .kv-pc { display: none; }
@container (min-width: 520px) {
  .page-product .p-kv .kv-pc { display: block; }
  .page-product .p-kv .kv-sp { display: none; }
}
.page-product .p-kv-lab .kv-sp { max-width: 420px; margin: 0 auto; }

/* 1024px 以上: 文字 13 : 図 14、間 32px（61 M-1 の方向で共通の列の幅に収める）。
   1280px で文字の列 520px・図の枠の内寸 526px になり、H1 2 行（LAB は 504px 要る）と
   デスクトップ用の図（520px 以上）を両立する。5:7 では文字の列が 443px で H1 が 3 行になる（32 §2）。DOM は「文字 → 対象者リンク → 図」（モバイルの見た目の順）。order は使わない */
@media (min-width: 1024px) {
  .page-product .p-fv { padding: var(--sp-48) 0 var(--sp-64); }
  .page-product .p-fv-grid {
    grid-template-columns: minmax(0, 13fr) minmax(0, 14fr); grid-template-rows: auto 1fr;
    column-gap: var(--sp-32); row-gap: var(--sp-32);
  }
  .page-product .p-fv-copy { grid-column: 1; grid-row: 1; }
  .page-product .p-fv-aud { grid-column: 1; grid-row: 2; align-self: end; }
  .page-product .p-fv-fig { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: none; }
  .page-product .p-fv-lead { font-size: 18px; }
}
@media (max-width: 767px) {
  .page-product .p-fv { padding: var(--sp-24) 0 var(--sp-48); }
  .page-product .p-fv-grid { row-gap: var(--sp-24); }
  .page-product .p-h1 { margin-top: var(--sp-16); }
  .page-product .p-fv-lead { margin-top: var(--sp-12); }
  .page-product .p-fv-actions { margin-top: var(--sp-16); }
}
/* モバイルの FV・中盤・末尾では、ボタンを全幅にする */
@media (max-width: 559px) {
  /* 375×812 の初期表示に対象者リンクの 1 行目を入れる（IA-3）。左右の余白が全ページ共通の 24px なので、
     上の余白とリードの文字を 1 段詰める（リードは本文と同じ 16px） */
  .page-product .p-fv { padding-top: var(--sp-16); }
  .page-product .p-fv-lead { font-size: var(--fs-16); line-height: 1.8; }
  .page-product .p-fv-actions { align-items: stretch; }
  .page-product .p-fv-actions .text-link { align-self: flex-start; }
  .page-product .p-btn-row { flex-direction: column; gap: var(--sp-8); }
  .page-product .p-btn-row .btn, .page-product .p-fv-actions > .btn,
  .page-product .p-midcta .btn, .page-product .p-final-actions .btn { width: 100%; }
}

/* ------------------------------------------------------------------ 節の共通 */
.page-product .p-sec { padding: var(--sp-96) 0; border-top: 1px solid var(--line-soft); }
.page-product .p-fv + .p-sec { border-top: 0; }
@media (max-width: 767px) { .page-product .p-sec { padding: var(--sp-64) 0; } }
.page-product .p-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-32); }
.page-product .p-head { display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; }
.page-product .p-index { display: flex; align-items: baseline; gap: var(--sp-12); }
/* 節の番号は着色しない（PC-5） */
.page-product .p-index .n { font-family: var(--font-num); font-size: var(--fs-13); font-weight: 500; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.page-product .p-head .p-lead { margin-top: var(--sp-4); }
.page-product .p-lead-row { margin-top: calc(var(--sp-12) * -1); }
.page-product .p-h2[tabindex="-1"] { scroll-margin-top: calc(var(--header-h) + var(--sp-16)); }

/* 1024px 以上: 左 4 列に節見出し（番号・英字ラベル・H2・リード）、右 8 列に中身（IA-4）。
   左の見出しは sticky。図の 2×2 と中盤 CTA は 12 列で組む */
@media (min-width: 1024px) {
  .page-product .p-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-48); }
  .page-product .p-head { grid-column: 1 / span 4; }
  .page-product .p-grid > .p-head:not(.p-head-row) { position: sticky; top: calc(var(--header-h) + var(--sp-32)); align-self: start; }
  .page-product .p-body { grid-column: 5 / span 8; min-width: 0; }
  .page-product .p-full { grid-column: 1 / -1; }
  /* 見出し行（② と LAB ⑤）: 左 4 列に番号と H2、右 8 列にリード */
  .page-product .p-lead-row { grid-column: 5 / span 8; align-self: end; margin-top: 0; }
}

/* ------------------------------------------------------------------ カード（③ ⑤） */
.page-product .p-card {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: var(--sp-24);
}
@media (min-width: 768px) { .page-product .p-card { padding: var(--sp-32); } }
/* 隣り合うカードは枠を共有する（二重線にしない） */
.page-product .p-cards { display: grid; }
.page-product .p-cards > .p-card + .p-card { margin-top: -1px; }

/* ③ 使い方のカード */
.page-product .p-uc { display: flex; flex-direction: column; gap: var(--sp-16); scroll-margin-top: calc(var(--header-h) + var(--sp-16)); }
.page-product .p-uc:target { position: relative; z-index: 1; }
.page-product .p-uc-meta { margin: 0; display: grid; gap: var(--sp-16); }
.page-product .p-uc-meta > div { display: grid; gap: var(--sp-4); }
.page-product .p-uc-meta dt { font-size: var(--fs-13); font-weight: 500; line-height: 1.6; color: var(--text-dim); }
.page-product .p-uc-meta dd { margin: 0; font-size: var(--fs-16); line-height: 1.85; color: var(--text-mid); }
.page-product .p-uc-meta dd.p-uc-voice { color: var(--text); font-weight: 500; }
@media (min-width: 768px) {
  .page-product .p-uc-meta > div { grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--sp-16); align-items: baseline; }
}
.page-product .p-uc-links {
  display: flex; flex-wrap: wrap; gap: 0 var(--sp-32);
  padding-top: var(--sp-8); border-top: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------------ ② 図（EYE の結果・LAB の画面） */
.page-product .p-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
@media (min-width: 1024px) { .page-product .p-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 図の枠: 面 #141414・枠 #3d3d3d・内余白 24px。飾りの製品色の線は付けない（PC-5） */
.page-product .p-shot {
  display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-24);
}
.page-product .p-shot .p-tag { margin-bottom: var(--sp-4); }
.page-product .p-shot-desc { font-size: var(--fs-15); line-height: 1.85; color: var(--text-mid); }
.page-product .p-caveat {
  padding-left: var(--sp-12); border-left: 2px solid var(--line);
  font-size: var(--fs-15); line-height: 1.8; color: var(--text);
}
.page-product .p-shot-fig { margin: var(--sp-8) 0 0; min-width: 0; }
.page-product .p-shot-fig svg { display: block; width: 100%; height: auto; }
/* 図の中の文字が本文より大きく見えないよう、原寸（幅 360〜380px。図の中の和文 16px）より
   大きくしない。08 README §6.5 の上限 520px より小さくし、枠の中で中央に置く */
.page-product .p-shot-fig .lab-screen, .page-product .p-shot-fig .eye-sample { max-width: 380px; margin-inline: auto; }
/* 狭い画面では図だけ枠の内余白いっぱいまで広げる（図の中の和文 13px を保つ。EYE 309px・LAB 293px） */
@media (max-width: 767px) {
  .page-product .p-shot { padding: var(--sp-16); }
  /* 上の max-width・margin-inline（クラス 3 つ）に負けないよう、同じ詳細度＋要素で書く（60 Q-01） */
  .page-product .p-shot-fig > svg.eye-sample, .page-product .p-shot-fig > svg.lab-screen {
    width: calc(100% + var(--sp-16) * 2 - 2px); max-width: none;
    margin-inline: calc(var(--sp-16) * -1 + 1px);
  }
}
.page-product .p-aside {
  font-size: var(--fs-15); line-height: 1.85; color: var(--text-mid); max-width: 44em;
  padding-left: var(--sp-12); border-left: 2px solid var(--line);
}

/* 図の横並び切り替え（EYE ② 解析結果データ例・LAB ② 画面で確かめられること）。main.js が .is-carousel を付けたときだけ効く。
   選んだ 1 枚を中央に原寸で、前後は縮めて薄く見せる。端はつながっていて循環する（main.js が
   order で並べ替え、--dx で元の位置から滑らせる）。動きは transform と opacity だけ（300ms）。 */
.page-product .p-carousel.is-carousel .p-carousel-stage { position: relative; }
.page-product .p-carousel.is-carousel .p-carousel-viewport { overflow: hidden; touch-action: pan-y; }
.page-product .p-carousel.is-carousel .p-carousel-track {
  position: relative; display: flex; align-items: center; gap: var(--sp-16);
}
.page-product .p-carousel.is-carousel .p-shot {
  --dx: 0px; --scale: .667;  /* 前後の図は選択中の 2/3（2026-09-20 指示） */
  flex: 0 0 min(560px, 58%);
  transform: translateX(var(--dx)) scale(var(--scale)); opacity: .45; cursor: pointer;
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1), opacity 300ms cubic-bezier(.2, .8, .2, 1);
}
.page-product .p-carousel.is-carousel .p-shot.is-active { --scale: 1; opacity: 1; cursor: auto; }
/* 前後のどちらでもない図（見えない位置にある）は隠す。並べ替えの瞬間に横切って見えないように */
.page-product .p-carousel.is-carousel .p-shot.is-far { visibility: hidden; }
/* 並べ替えた直後の 1 フレームは動かさない（元の位置へ瞬時に戻してから滑らせる） */
.page-product .p-carousel.is-flipping .p-shot { transition: none; }
/* 下の操作段: 左にドット（位置示し）、右に前後の丸いボタンを 2 つ並べる（Veo Analytics のカルーセルの控え目に合わせ、
   2026-09-20）。以前はボタンを図の左右に重ねていたが、図の下の別の段に移した。件数の文字（n / N）は
   読み上げ用の文字だけに残し（.sr-only）、画面にはドットだけを見せる。 */
.page-product .p-carousel-controls {
  margin-top: var(--sp-24); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
}
.page-product .p-carousel-controls[hidden] { display: none; }
.page-product .p-carousel-dots { display: flex; align-items: center; gap: var(--sp-8); }
.page-product .p-carousel-dot {
  /* body.page-product は既定の radius を全て 2px にしているが（PC-3）、
     ページ送りの丸いドットは機能上まん丸である必要があるため、ここだけ固定値で丸くする */
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;
  background: var(--line-control); cursor: pointer;
  transition: background-color 150ms ease, width 150ms ease;
}
.page-product .p-carousel-dot.is-active { width: 22px; background: var(--text); }
.page-product .p-carousel-dot:hover { background: var(--text-mid); }
.page-product .p-carousel-dot:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.page-product .p-carousel-arrows { display: flex; gap: var(--sp-8); flex: none; }
.page-product .p-carousel-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; flex: none;
  background: var(--panel-2); color: var(--text); font-size: 18px; line-height: 1;
  border: 1px solid var(--line-control); border-radius: 50%; cursor: pointer;
  transition: background-color 150ms ease;
}
.page-product .p-carousel-btn:hover { background: #262626; }
.page-product .p-carousel-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (max-width: 767px) {
  /* 前後の図の端を少し見せて、横に続きがあることを示す */
  .page-product .p-carousel.is-carousel .p-carousel-track { gap: var(--sp-8); }
  .page-product .p-carousel.is-carousel .p-shot { flex-basis: 78%; --scale: .667; }
  .page-product .p-carousel.is-carousel .p-shot.is-active { --scale: 1; }
}

/* 表（EYE ② 選手ごとの走り）。数値は Fira Code・桁ぞろえ */
.page-product .p-table-wrap { overflow-x: auto; }
.page-product .p-table { width: 100%; border-collapse: collapse; }
.page-product .p-table caption { text-align: left; font-size: var(--fs-13); line-height: 1.6; color: var(--text-dim); padding-bottom: var(--sp-8); }
.page-product .p-table th {
  font-size: var(--fs-13); font-weight: 500; line-height: 1.5; color: var(--text-mid);
  text-align: right; vertical-align: bottom; padding: var(--sp-8) 0 var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--line-control);
}
.page-product .p-table td, .page-product .p-table tbody th {
  font-family: var(--font-num); font-size: var(--fs-15); font-weight: 400; line-height: 1.5; color: var(--text);
  font-variant-numeric: tabular-nums; text-align: right;
  padding: var(--sp-12) 0 var(--sp-12) var(--sp-12); border-bottom: 1px solid var(--line-soft);
}
.page-product .p-table th:first-child, .page-product .p-table td:first-child { text-align: left; padding-left: 0; }

/* ------------------------------------------------------------------ ④ 確かめ方の列（信頼の根拠） */
/* 上罫 1px #3d3d3d で区切る。面は塗らない。大きな数字・星・ロゴ風・製品色を使わない（§2.5） */
.page-product .p-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-32); margin: 0; }
.page-product .p-check { padding: var(--sp-24) 0 var(--sp-32); border-top: 1px solid var(--line); min-width: 0; }
.page-product .p-checks .p-check:only-child { border-top: 0; padding-top: 0; }
.page-product .p-check .p-en { display: block; margin-bottom: var(--sp-4); }
.page-product .p-check-h { display: block; font-family: var(--font-ja); font-size: var(--fs-15); font-weight: 500; line-height: 1.6; color: var(--text); margin-bottom: var(--sp-12); }
.page-product .p-check dd { margin: 0; font-size: var(--fs-15); line-height: 1.85; color: var(--text-mid); }
.page-product .p-check-note { margin-top: var(--sp-16); font-size: var(--fs-13); line-height: 1.8; color: var(--text-dim); }
@media (min-width: 768px) { .page-product .p-checks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 3 列は 1200px 以上だけ（右 8 列の中で 1 列 230px 以上を保つ） */
@media (min-width: 1200px) { .page-product .p-checks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-24); } }
.page-product .p-notfor { margin-top: var(--sp-8); padding-top: var(--sp-24); border-top: 1px solid var(--line); }
.page-product .p-notfor p { font-size: var(--fs-15); line-height: 1.85; color: var(--text-mid); max-width: 44em; }

/* 箇条書き。形で区別する（色だけに頼らない）: チェック = 使える、マイナスの丸 = いまはできない、横線 = 手順の項目 */
.page-product .p-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-12); }
.page-product .p-list li { position: relative; padding-left: 26px; font-size: var(--fs-15); line-height: 1.8; color: var(--text); }
.page-product .p-list li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
.page-product .p-list-ok  { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.page-product .p-list-not { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6 10h8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.page-product .p-list-not li::before { color: var(--text-mid); }
.page-product .p-list-dash li { color: var(--text-mid); padding-left: 20px; }
.page-product .p-list-dash li::before { -webkit-mask: none; mask: none; top: .9em; width: 10px; height: 1px; background: var(--text); }
.page-product .p-list .alt { display: block; margin-top: var(--sp-4); color: var(--text-mid); }

/* ------------------------------------------------------------------ ⑤ 手順（EYE）・プランと始め方（LAB） */
.page-product .p-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.page-product .p-steps > .p-card + .p-card { margin-top: -1px; }
@media (min-width: 768px) {
  .page-product .p-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-product .p-steps > .p-card + .p-card { margin-top: 0; }
  .page-product .p-steps > .p-card:nth-child(2n) { margin-left: -1px; }
  .page-product .p-steps > .p-card:nth-child(n+3) { margin-top: -1px; }
}
.page-product .p-step { display: flex; flex-direction: column; gap: var(--sp-12); }
/* 番号は 2px 角の枠に Fira Code */
.page-product .p-step-no {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1px solid var(--line-control); border-radius: var(--radius);
  font-family: var(--font-num); font-size: var(--fs-15); font-weight: 500; color: var(--text);
}
.page-product .p-roles { margin: 0; display: grid; gap: var(--sp-12); }
.page-product .p-roles > div { display: grid; grid-template-columns: 4.8em minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.page-product .p-roles dt { text-align: center; }
.page-product .p-roles dd { margin: 0; font-size: var(--fs-15); line-height: 1.8; color: var(--text-mid); }
.page-product .p-step-note { font-size: var(--fs-13); line-height: 1.7; color: var(--text-dim); }
.page-product .p-step-desc { font-size: var(--fs-15); line-height: 1.8; color: var(--text-mid); }

/* ------------------------------------------------------------------ ⑤ 利用フロー（EYE） */
/* 縦の線に番号の丸を並べる。狭い画面は線を左に置き、見出し → 図 → 説明の順に積む。
   広い画面は右の欄の中央に線を置き、文言と図を左右交互に並べる（奇数は文言が左、偶数は右） */
.page-product .p-flow {
  --flow-no: 40px;
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; row-gap: var(--sp-48);
}
/* 縦の線: 最初の丸の中心から最後の丸の中心まで */
.page-product .p-flow::before {
  content: ""; position: absolute; left: calc(var(--flow-no) / 2); top: calc(var(--flow-no) / 2);
  bottom: var(--flow-last, 0px); width: 1px; background: var(--line-control);
}
.page-product .p-flow-step {
  position: relative; display: grid; grid-template-columns: var(--flow-no) minmax(0, 1fr);
  column-gap: var(--sp-16); row-gap: var(--sp-12);
  grid-template-areas: "no title" ". art" ". desc" ". note";
}
.page-product .p-flow-step:last-child { background: var(--bg); } /* 最後の丸より下に線を出さない */
.page-product .p-flow-no {
  grid-area: no; position: relative; z-index: 1; align-self: start;
  display: grid; place-items: center; width: var(--flow-no); height: var(--flow-no);
  background: var(--text); color: var(--bg); border-radius: 50%;
  font-family: var(--font-num); font-size: var(--fs-15); font-weight: 500;
}
.page-product .p-flow-title { grid-area: title; align-self: center; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--text); }
.page-product .p-flow-art {
  grid-area: art; color: var(--text-mid);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-16); max-width: 360px;
}
.page-product .p-flow-art svg { display: block; width: 100%; height: auto; }
.page-product .p-flow-desc { grid-area: desc; font-size: var(--fs-15); line-height: 1.85; color: var(--text-mid); }
.page-product .p-flow-note { grid-area: note; font-size: var(--fs-13); line-height: 1.7; color: var(--text-dim); margin-top: calc(var(--sp-4) * -1); }
@media (min-width: 900px) {
  .page-product .p-flow { --flow-no: 64px; row-gap: var(--sp-64); }
  .page-product .p-flow::before { left: 50%; }
  .page-product .p-flow-step {
    grid-template-columns: minmax(0, 1fr) var(--flow-no) minmax(0, 1fr); column-gap: var(--sp-24); row-gap: var(--sp-12);
    grid-template-areas: "title no art" "desc no art" "note . art";
    grid-template-rows: auto auto 1fr; align-items: start;
  }
  .page-product .p-flow-step:nth-child(even) { grid-template-areas: "art no title" "art no desc" "art . note"; }
  .page-product .p-flow-no { font-size: 24px; }
  .page-product .p-flow-title { font-size: 18px; padding-top: 18px; align-self: start; }
  .page-product .p-flow-art { max-width: 320px; padding: var(--sp-16); }
  .page-product .p-flow-step:nth-child(odd) .p-flow-art { justify-self: start; }
  .page-product .p-flow-step:nth-child(even) .p-flow-art { justify-self: end; width: 100%; }
  .page-product .p-flow-step:nth-child(odd) .p-flow-art { width: 100%; }
}

/* ------------------------------------------------------------------ ① 課題（EYE） */
/* 右に前置きの文が無いので、見出しは全幅に取って 1 行に収める */
@media (min-width: 1024px) { .page-product .p-head-full { grid-column: 1 / -1; } }
/* 02 と同じく見出しを上（.p-head-row）、下に全幅で 4 点を並べる。各点は丸いアイコンの下に文。
   広い画面は 4 列、中くらいは 2 列、狭い画面は 1 列 */
.page-product .p-issues {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-32);
}
.page-product .p-issue { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); text-align: center; }
.page-product .p-issue-icon {
  flex: none; display: grid; place-items: center; width: 88px; height: 88px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 50%; color: var(--text-mid);
}
.page-product .p-issue-icon svg { width: 40px; height: 40px; }
.page-product .p-issue-text { font-size: var(--fs-15); line-height: 1.85; color: var(--text-mid); max-width: 28em; }
@media (min-width: 768px) {
  .page-product .p-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-24); }
}
@media (min-width: 1024px) {
  .page-product .p-issues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 中盤の主 CTA（12 列で中央寄せ） */
.page-product .p-midcta {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); text-align: center;
  padding-top: var(--sp-48); border-top: 1px solid var(--line-soft);
}
.page-product .p-midcta .p-note { text-align: center; }

/* LAB ⑤ プランのカード。各カードに CTA を 1 つ。塗りは無料カードだけ */
/* 枠は共有せず、少し間をあけて並べる（2026-09-20 指示） */
.page-product .p-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
@media (min-width: 768px) {
  .page-product .p-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 広い画面では横 1 行に並べる。1 枚が狭くなるので内余白を詰める */
@media (min-width: 1024px) {
  .page-product .p-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); }
  .page-product .p-plans > .p-card { padding: var(--sp-16); }
  /* 枠に収まるよう、ボタンは横幅いっぱい・折り返しあり・小さめの字に */
  .page-product .p-plans .p-plan-cta .btn {
    width: 100%; white-space: normal; text-align: center; line-height: 1.5;
    padding: var(--sp-12) var(--sp-8); font-size: var(--fs-13);
  }
  .page-product .p-plans .p-plan h3 { font-size: var(--fs-16); }
}
.page-product .p-plan { display: flex; flex-direction: column; gap: var(--sp-16); }
.page-product .p-plan-cta { margin-top: auto; padding-top: var(--sp-16); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.page-product .p-plan-cta .btn { width: 100%; }
.page-product .p-plan-cta .p-note { font-size: var(--fs-13); line-height: 1.7; color: var(--text-dim); }
.page-product .p-start { display: grid; gap: var(--sp-16); }
/* LAB の始め方: EYE の利用フロー（.p-flow）と同じ番号の丸と縦線。図が無いので、
   どの幅でも線を左に置き、丸の右に文を 1 行で添える */
.page-product .p-flow-simple { --flow-no: 40px; row-gap: var(--sp-24); }
.page-product .p-flow-simple .p-flow-step,
.page-product .p-flow-simple .p-flow-step:nth-child(even) {
  grid-template-columns: var(--flow-no) minmax(0, 1fr); grid-template-areas: "no desc"; grid-template-rows: auto;
  column-gap: var(--sp-16); align-items: center;
}
.page-product .p-flow-simple .p-flow-desc { font-size: var(--fs-16); color: var(--text); }
@media (min-width: 900px) {
  .page-product .p-flow-simple { --flow-no: 48px; row-gap: var(--sp-24); }
  .page-product .p-flow-simple::before { left: calc(var(--flow-no) / 2); }
  .page-product .p-flow-simple .p-flow-no { font-size: var(--fs-15); }
}

/* ------------------------------------------------------------------ ⑥ よくある質問（群に分ける） */
.page-product .p-faq { display: grid; gap: var(--sp-48); }
.page-product .p-faq-h { margin-bottom: var(--sp-8); }
.page-product .p-faq-item { border-top: 1px solid var(--line-soft); }
.page-product .p-faq-item:last-of-type { border-bottom: 1px solid var(--line-soft); }
.page-product .p-faq-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-16);
  min-height: 56px; padding: var(--sp-16) 0;
}
.page-product .p-faq-item > summary::-webkit-details-marker { display: none; }
.page-product .p-faq-q { margin: 0; font-family: var(--font-ja); font-size: var(--fs-16); font-weight: 700; line-height: 1.7; color: var(--text); }
/* 開閉の印は SVG の + / −。開閉の動きはつけない（details の標準のまま） */
.page-product .p-faq-icon { flex: none; width: 16px; height: 16px; margin-top: 6px; color: var(--text); }
/* 開いたら縦の線を切り落として − にする（use の中身は外から選べないため clip で切る） */
.page-product .p-faq-item[open] > summary .p-faq-icon { clip-path: inset(7px 0 7px 0); }
.page-product .p-faq-item > summary:hover .p-faq-q { text-decoration: underline; text-decoration-color: var(--text-mid); text-underline-offset: 4px; }
.page-product .p-faq-a { padding: 0 var(--sp-32) var(--sp-24) 0; }
.page-product .p-faq-a p { font-size: var(--fs-16); line-height: 1.85; color: var(--text-mid); max-width: 44em; }
@media (max-width: 767px) { .page-product .p-faq-a { padding-right: 0; } }
@media print { .page-product .p-faq-item > .p-faq-a { display: block; } }
.page-product .p-faq-more { margin-top: var(--sp-8); }

/* ------------------------------------------------------------------ ⑦ 末尾 CTA */
/* 末尾の相談の節は、ほかの節より上下を広く取る */
.page-product .p-sec.p-final { padding: 144px 0; }
@media (max-width: 767px) { .page-product .p-sec.p-final { padding: var(--sp-96) 0; } }
.page-product .p-final .shell > * + * { margin-top: var(--sp-16); }
.page-product .p-final .p-h2 { margin-top: var(--sp-12); }
.page-product .p-final .p-lead { max-width: 40em; }
.page-product .p-final-actions { margin-top: var(--sp-24) !important; }
.page-product .p-final .text-link { display: flex; width: fit-content; }
.page-product .p-promise { margin-top: var(--sp-48) !important; padding-top: var(--sp-32); border-top: 1px solid var(--line-soft); max-width: 44em; }
.page-product .p-promise p { font-size: var(--fs-16); line-height: 1.95; color: var(--text); }
.page-product .p-promise .text-link { margin-top: var(--sp-8); }
/* もう一つのプロダクトは罫線で区切った 1 行（相手の製品色は使わない。PC-7） */
.page-product .p-other {
  margin-top: var(--sp-48) !important;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-16);
  font-size: var(--fs-15); line-height: 1.8; color: var(--text-mid);
}
.page-product .p-other .text-link { display: inline-flex; }
/* もう一つのプロダクト（EYE の末尾に置く LAB のブロック）。トップの Products と同じ見た目に
   するため、製品ページで 2px にしている角丸をトップの値へ戻す */
.page-product .p-other-product { flex-basis: 100%; margin-top: var(--sp-24); --radius-lg: 20px; }
.page-product .p-other-product .product-brief { text-decoration: none; color: inherit; }
/* ④ 入力の項目に添える注記 */
.page-product .p-list-note { display: block; margin-top: var(--sp-4); font-size: var(--fs-13); line-height: 1.7; color: var(--text-dim); font-weight: 400; }

/* ------------------------------------------------------------------ 動き */
/* 製品ページでは節が現れる演出を使わない（20 §1.3）。KV の描画だけが動き、
   styles.css の .kv-motion（動きを減らす設定では付かない）がそれを受け持つ。 */
@media (prefers-reduced-motion: reduce) {
  body.page-product *, body.page-product *::before, body.page-product *::after { transition: none !important; animation: none !important; }
}