@font-face { font-family: "IBM Plex Sans JP"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-jp-400-subset.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans JP"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-jp-500-subset.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans JP"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-jp-700-subset.woff2") format("woff2"); }
/* RENMA JA preview — mock-driven (Pack モック/html 01–12 + plan V1). Mobile values = 390px mock; ≥1024px = plan §5. */
/* @font-face rules are prepended by build.mjs from src/fonts/manifest.json (self-hosted IBM Plex Sans JP subset). */

:root {
  --bg: #F6F7FA; --ink: #171C26; --sub: #646B78; --mute: #8A909C; --line: #DADFE6; --line2: #ECEEF2;
  --soft: #F2F4F7; --sel: #ECEDF9; --blue: #3C4CC2; --gold: #B07A12; --body2: #3A404C;
  --font: "IBM Plex Sans JP", "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-break: strict; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.seg { display: inline-block; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.closing :focus-visible { outline-color: #ECEDF9; }
.ck { flex-shrink: 0; }

/* ───── layout ───── */
.sec { padding: 56px 20px; }
.pillar { font-size: 52px; line-height: 1.1; font-weight: 700; color: var(--blue); }
.pillar-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
.pillar-sub { font-size: 20px; font-weight: 700; color: var(--blue); }
.h2 { margin-top: 6px; font-size: 28px; line-height: 1.4; font-weight: 700; }
.h3c { font-size: 24px; line-height: 1.4; font-weight: 700; }
.h3d { font-size: 18px; line-height: 1.45; font-weight: 700; }
.cap { margin-top: 10px; font-size: 11px; color: var(--mute); }
.cklist { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cklist li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.5; font-weight: 700; }
.cklist .ck { margin-top: 2px; }

/* ───── CTA (FIXED Q3) ───── */
.cta { display: flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
.cta[aria-disabled="true"] { opacity: .5; cursor: default; }
.cta--fill { height: 54px; border-radius: 14px; background: var(--blue); color: #fff; font-size: 16px; }
.cta--line { height: 52px; border-radius: 14px; border: 2px solid var(--blue); color: var(--blue); font-size: 15px; }
.cta--closing { height: 56px; }
.cta-note { margin-top: 6px; font-size: 12px; color: var(--sub); text-align: center; }
.soon { font-size: 11px; color: var(--sub); white-space: nowrap; }
.cta-block .cta { width: 100%; }

/* ───── header ───── */
.hdr-in { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; }
.brand { font-size: 15px; font-weight: 700; letter-spacing: .22em; }
.hdr-nav, .hdr-lang { display: none; }
.hdr-cta { display: flex; align-items: center; gap: 8px; }
.cta--hdr { position: relative; height: 36px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 10px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.cta--hdr::before { content: ""; position: absolute; left: -1px; right: -1px; top: -7px; bottom: -7px; }
.lang-cur { color: var(--ink); font-weight: 700; }
.lang-off { color: #A3A9B4; }

/* ───── 0 Hero (mock 01) ───── */
.hero-in { padding: 12px 20px 40px; display: flex; flex-direction: column; }
.hero-eyebrow { font-size: 13px; font-weight: 500; color: var(--sub); letter-spacing: .04em; }
.hero-h1 { margin-top: 8px; font-size: 62px; line-height: 1.08; font-weight: 700; letter-spacing: -.01em; }
.hero-lede { margin-top: 14px; font-size: 22px; line-height: 1.45; font-weight: 700; }
.hero-vis { margin-top: 26px; }
.hv-row { display: flex; align-items: center; gap: 16px; width: 350px; max-width: 100%; }
.hv-fig { flex: 0 0 auto; width: 176px; }
.hv-cap { display: flex; align-items: center; gap: 4px; min-height: 16px; margin-bottom: 6px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--sub); white-space: nowrap; }
.hv-cap svg { flex-shrink: 0; }
.hv-screen { width: 176px; height: 348px; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 16px 36px rgba(23,28,38,.12); overflow: hidden; display: flex; flex-direction: column; }
.hs-pm { width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.hs-row { display: flex; align-items: center; justify-content: space-between; height: 26px; }
.hs-row + .hs-row { border-top: 1px solid var(--soft); }
.hs-row > span:first-child { color: var(--sub); }
.hs-st { display: flex; align-items: center; gap: 3px; }
.hs-st > span { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.hs-st > b { width: 20px; text-align: center; }
.hv-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.hv-list li { display: flex; gap: 7px; align-items: flex-start; font-size: 14.5px; line-height: 1.42; font-weight: 700; }
.hv-list .ck { margin-top: 3px; }
.badge--hero { display: inline-block; margin-top: 4px; height: 20px; padding: 0 7px; border-radius: 10px; border: 1.5px solid var(--blue); color: var(--blue); font-size: 10.5px; font-weight: 700; line-height: 17px; white-space: nowrap; }
.hero-cta { margin-top: 24px; }
.hero-cta .cta { width: 100%; }
.hero-more { display: none; }
.hero-pts { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 14px; row-gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 500; }
.hero-pts li { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ───── 1 早く (mock 03) ───── */
.start-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.start-card { min-width: 0; background: #fff; border: 1px solid var(--line2); border-radius: 18px; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.sc-t { font-size: 13px; font-weight: 700; }
.sc-icons { display: flex; align-items: center; gap: 4px; color: var(--sub); }
.sc-icons > svg { flex-shrink: 0; }
.sc-i { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.sc-n { display: flex; align-items: baseline; gap: 4px; }
.sc-min { font-size: 13px; font-weight: 700; }
.sc-big { font-size: 64px; line-height: 1; font-weight: 700; }
.sc-big--ph { color: #A3A9B4; }
.sc-tap { font-size: 15px; font-weight: 700; white-space: nowrap; }
.sc-min { white-space: nowrap; }
.sc-d { font-size: 11px; line-height: 1.5; color: var(--sub); }
.fast-note { margin-top: 10px; font-size: 11px; line-height: 1.6; color: var(--sub); }
.fast-note-k { display: block; font-weight: 700; color: var(--ink); }
.ripple { position: absolute; left: -6px; top: -6px; width: 56px; height: 56px; border-radius: 50%; background: rgba(60,76,194,.18); }
.fast-b-text { margin-top: 40px; }
.pm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pm-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; }
.pm-card--a { padding: 14px 12px 16px; gap: 14px; }
.pm-card--b { padding: 14px 12px; gap: 8px; }
.pm-t { font-size: 13px; font-weight: 700; }
.pm-row { display: flex; align-items: center; justify-content: space-between; }
.pm-b { position: relative; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 24px; }
/* mock bug fix (§4.2): ripple no longer runs under 「57.5」 */
.pm-b .ripple { left: -4px; top: -4px; width: 56px; height: 56px; }
.pm-v { position: relative; z-index: 1; text-align: center; }
.pm-v b { display: block; font-size: 22px; line-height: 1.1; }
.pm-v span { font-size: 11px; color: var(--sub); }
.pm-d { font-size: 12px; color: var(--sub); text-align: center; }
.pm-hd { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pm-prev { height: 22px; padding: 0 7px; border-radius: 11px; background: var(--soft); font-size: 10px; display: flex; align-items: center; white-space: nowrap; }
.pm-wheel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pm-sel { width: 100%; box-sizing: border-box; text-align: center; padding: 4px 0; border-radius: 10px; background: var(--sel); border: 2px solid var(--blue); font-size: 20px; font-weight: 700; }
.pm-sel span { font-size: 11px; font-weight: 500; }
.pm-ok { height: 34px; border-radius: 10px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.fast-cta { margin-top: 40px; }

/* ───── 2 自由 ―思い通りの記録を― (mock 04 + §4.3) ───── */
.f1-h3 { margin-top: 32px; }
.f1-fig { margin-top: 16px; }
.f1-screen { width: 350px; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 18px 40px rgba(23,28,38,.12); overflow: hidden; }
.f1-grid { display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px 32px 30px; gap: 4px; }
.crow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 8px; row-gap: 4px; min-height: 38px; padding: 0 12px; border-top: 1px solid rgba(60,76,194,.12); }
.clab { font-size: 11.5px; color: var(--sub); white-space: nowrap; }
.st { display: flex; align-items: center; gap: 4px; }
.sb { width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.sv { min-width: 34px; text-align: center; font-size: 13px; font-weight: 700; }
.cps { display: flex; gap: 4px; }
.cp { height: 28px; padding: 0 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; font-size: 11.5px; white-space: nowrap; }
.cp.on { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; }
.ex-card { background: #fff; border: 1px solid var(--line2); border-radius: 18px; padding: 14px 16px; }
.f1-ex { margin-top: 24px; }
.ex-card .ex-item { margin-top: 10px; }
.ex-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ex-name { font-size: 14px; font-weight: 700; }
.badge--ex { height: 22px; padding: 0 8px; border-radius: 11px; border: 1.5px solid var(--blue); color: var(--blue); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.ex-val { margin-top: 8px; background: var(--sel); border-radius: 10px; padding: 8px 12px; font-size: 15px; font-weight: 700; }
.ex-val small { font-size: 11px; font-weight: 500; }
.ex-val--lr { display: grid; grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
.lr { font-size: 11px; color: var(--sub); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { height: 28px; padding: 0 9px; border-radius: 8px; background: var(--soft); display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sub); white-space: nowrap; }
.chip b { color: var(--ink); }

/* 「自分仕様を一気に」の見出しと Pro の印 (図は下の .bs: 1つずつ設定 vs まとめて設定, Human PO 2026-10-10) */
.f1-oneshot { margin-top: 24px; }
.os-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; }
.os-h { font-size: 24px; line-height: 1.4; font-weight: 700; }
.badge--os { flex-shrink: 0; box-sizing: border-box; height: 22px; padding: 0 8px; border-radius: 11px; border: 1.5px solid var(--blue); color: var(--blue); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
/* 「自分仕様を一気に」 1つずつ設定 vs まとめて設定 (Human PO 2026-10-10)。図だけで比べる。フォーカスできる要素は置かない */
.bs { margin-top: 12px; }
.bs-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.bs-col { min-width: 0; box-sizing: border-box; border-radius: 16px; padding: 12px 10px 14px; display: flex; flex-direction: column; }
.bs-col--one { background: var(--soft); }
.bs-col--all { background: var(--sel); }
.bs-t { margin-bottom: 8px; font-size: 14px; line-height: 1.4; font-weight: 700; }
.bs-col--one .bs-t { color: var(--sub); }
.bs-col--all .bs-t { color: var(--blue); }
.bs-forms { display: flex; flex-direction: column; gap: 5px; }
.bs-form { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 5px 7px 7px; display: flex; flex-direction: column; gap: 3px; }
.bs-fl { font-size: 11px; line-height: 1.4; font-weight: 700; color: var(--sub); white-space: nowrap; }
.bs-fr { display: flex; align-items: center; gap: 4px; }
.bs-in { flex: 1; min-width: 0; height: 22px; box-sizing: border-box; padding-left: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); display: flex; align-items: center; }
.bs-in i { width: 1.5px; height: 12px; background: var(--mute); }
.bs-save { flex-shrink: 0; height: 22px; padding: 0 7px; border-radius: 6px; background: #A3A9B4; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; }
.bs-want { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.bs-wl { font-size: 11px; line-height: 1.4; font-weight: 700; color: var(--sub); }
.bs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bs-chip { box-sizing: border-box; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--sel); color: var(--blue); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.bs-step { display: flex; align-items: center; gap: 6px; padding: 10px 2px 0; font-size: 12px; line-height: 1.4; font-weight: 700; }
.bs-step svg { flex-shrink: 0; color: var(--blue); }
.bs-done { box-sizing: border-box; border-radius: 12px; padding: 10px; background: var(--blue); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.bs-dl { font-size: 11.5px; line-height: 1.45; font-weight: 700; }
.bs-dk { display: flex; align-items: center; gap: 6px; font-size: 18px; line-height: 1.3; font-weight: 700; }
.bs-step--end { padding: 8px 2px; }
.bs-ck { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; }

.f1-more { margin-top: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.f1-more summary, .qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.f1-more summary::-webkit-details-marker, .qa summary::-webkit-details-marker { display: none; }
.f1-more summary { min-height: 48px; font-size: 14px; line-height: 1.5; font-weight: 700; }
.chev { flex-shrink: 0; transition: transform .15s; }
details[open] > summary .chev { transform: rotate(180deg); }
.f1-more-in { padding: 12px 0; }
.f1-more-in > .ex-item, .f1-more-in > .types { background: #fff; border: 1px solid var(--line2); padding: 14px 16px; }
.f1-more-in > .ex-item { border-radius: 18px 18px 0 0; border-bottom: 0; }
.f1-more-in > .types { border-radius: 0 0 18px 18px; border-top: 0; }
.types-hd { display: flex; align-items: baseline; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line2); font-size: 13px; font-weight: 700; }
.types-n { font-size: 20px; line-height: 1; }
.types-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.type { height: 28px; padding: 0 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; font-size: 12px; white-space: nowrap; }
.f1-note { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--sub); }

/* ───── 3 分析 (mock 05) ───── */
.an { padding: 56px 0; }
.an .in { padding: 0 20px; }
.an-row { margin-top: 32px; }
.h3s-t { font-size: 20px; line-height: 1.45; font-weight: 700; }
.h3s { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--sub); }
.ph { width: 312px; max-width: 100%; box-sizing: border-box; margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 18px 40px rgba(23,28,38,.12); overflow: hidden; }
.ph-tip { position: absolute; left: 96px; top: 58px; width: 168px; box-sizing: border-box; background: var(--ink); color: #fff; border-radius: 10px; padding: 7px 10px; font-size: 10px; line-height: 1.5; z-index: 1; }
.seg-c { display: flex; background: var(--soft); border-radius: 12px; padding: 3px; }
.seg-c span { flex: 1; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--sub); }
.seg-c .sel { background: #fff; color: var(--blue); font-weight: 700; box-shadow: 0 1px 3px rgba(23,28,38,.12); }
.chp { height: 28px; padding: 0 10px; border-radius: 14px; background: var(--soft); display: inline-flex; align-items: center; font-size: 11px; white-space: nowrap; }
.chp.sel { background: var(--blue); color: #fff; font-weight: 700; }
.kp { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--line); padding-top: 6px; min-width: 0; }
.kv { font-size: 20px; line-height: 1.15; font-weight: 700; }
.kv small { font-size: 11px; font-weight: 500; }
.kl { font-size: 10px; color: var(--sub); }
.br { display: grid; grid-template-columns: 72px minmax(0, 1fr) 54px; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; }
.br i { display: block; height: 8px; border-radius: 4px; background: var(--blue); }
.an-own { margin-top: 44px; }
.an-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 20px 4px; scroll-padding-left: 20px; overscroll-behavior-x: contain; scrollbar-width: none; }
.an-rail::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .an-rail { scroll-behavior: auto; } }
.gc { flex: 0 0 286px; min-width: 0; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.gk { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--sub); }
.tag { box-sizing: border-box; flex-shrink: 0; height: 18px; padding: 0 7px; border-radius: 9px; border: 1.5px solid; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.tag--pro { border-color: var(--blue); color: var(--blue); }
.tag--free { border-color: var(--ink); color: var(--ink); }
.gq { font-size: 16px; font-weight: 700; line-height: 1.45; }
.lg { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; font-weight: 500; }
.lg span { display: flex; align-items: center; gap: 5px; }
.ga { border-top: 1px solid var(--line2); padding-top: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.gal { font-size: 12px; color: var(--sub); }
.gav { font-size: 24px; line-height: 1.1; font-weight: 700; }
.gau { font-size: 13px; font-weight: 500; }
.an-rail-end { flex: 0 0 8px; }
.an-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.an-dots span { width: 6px; height: 6px; border-radius: 3px; background: #C3C9D2; transition: width .15s; }
.an-dots span.on { width: 18px; background: var(--blue); }
.an-body--pc { display: none; }
.an-body--sp { margin-top: 44px; }
.an-foot { margin-top: 12px; }
.an-foot .cap { margin-top: 0; }
.an-cta { margin-top: 28px; }

/* ───── 4 自由 ―制約のない記録を― (mock 06) ───── */
.f2-items { margin-top: 24px; }
.f2-items > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.f2-items > li:last-child { border-bottom: 0; padding-bottom: 0; }
.f2-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.f2-t { font-size: 22px; line-height: 1.35; font-weight: 700; }
.f2-items > li > div { align-self: center; }
.f2-b { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--sub); }
.f2-b > li { position: relative; padding-left: 12px; }
.f2-b > li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 4px; height: 4px; border-radius: 50%; background: var(--sub); }
.f2-flow { margin-top: 20px; background: #fff; border: 1px solid var(--line2); border-radius: 18px; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.f2-chain { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 4px; }
.f2-box { min-width: 0; background: var(--soft); border-radius: 12px; padding: 12px 8px; text-align: center; }
.f2-bt { font-size: 13px; font-weight: 700; }
.f2-bs { margin-top: 2px; font-size: 10.5px; color: var(--sub); }
.f2-box--renma { background: var(--ink); color: #fff; }
.f2-box--renma .f2-bt { font-size: 14px; letter-spacing: .12em; }
.f2-box--renma .f2-bs { color: #fff; opacity: .85; }
.f2-ar { display: flex; justify-content: center; color: var(--sub); }
.f2-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: 12px; line-height: 1.6; color: var(--sub); }
.f2-cta { margin-top: 36px; }

/* ───── 5 信条 (mock 07) ───── */
.creed { background: #fff; }
.creed-list { margin-top: 20px; border-bottom: 1px solid var(--line2); }
.creed-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 20px 0; border-top: 1px solid var(--line2); }
.creed-list .n { font-size: 15px; font-weight: 700; color: var(--blue); line-height: 1.6; }
.creed-list .t { font-size: 20px; line-height: 1.4; font-weight: 700; }
.creed-list .b { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--body2); }
.creed-list .b + .b { margin-top: 6px; }
.creed-sign { margin-top: 20px; text-align: right; font-size: 14px; color: var(--sub); }
.creed-sign span { font-size: 12px; }

/* ───── 6 料金 (mock 08) ───── */
.pr-cards { margin-top: 28px; }
.plan { background: #fff; border-radius: 22px; padding: 20px 18px 18px; }
.plan--free { border: 1px solid var(--line); }
.plan--pro { border: 2px solid var(--blue); }
.plan-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; }
.plan-name { font-size: 22px; font-weight: 700; }
.plan-name--pro { color: var(--blue); }
.plan-pills { display: flex; gap: 6px; }
.pill { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; }
.pill--pro { background: var(--blue); font-size: 12px; }
.plan-band { margin-top: 14px; background: var(--sel); border-radius: 14px; padding: 12px 14px; }
.band-k { font-size: 12px; font-weight: 700; color: var(--ink); }
.band-v { margin-top: 2px; font-size: 18px; line-height: 1.45; font-weight: 700; }
.band-v--2 { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(60,76,194,.18); }
.grp { font-size: 11px; font-weight: 700; color: var(--sub); letter-spacing: .04em; padding: 14px 0 4px; }
.grp--sep { border-top: 1px solid var(--line2); margin-top: 8px; }
.cks > li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 14px; line-height: 1.5; }
.cks > li > svg { flex-shrink: 0; margin-top: 3px; }
.cks small { color: var(--sub); font-size: 12px; white-space: nowrap; }
.cks--pro { margin-top: 8px; }
.plan-sub { margin-top: 2px; font-size: 12px; color: var(--sub); }
.plan-life { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); font-size: 13px; line-height: 1.6; }
.pr-div { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: 15px; font-weight: 700; }
.pr-div::before, .pr-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pr-n1 { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--body2); }
.pr-n2 { margin-top: 6px; font-size: 12px; color: var(--sub); }
.pr-cta { margin-top: 28px; }

/* ───── 7 よくある質問 (FIXED Q5) ───── */
.faq-h { margin-top: 0; }
.faq-list { margin-top: 16px; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); padding: 4px 0; }
.qa summary { min-height: 56px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.ans { font-size: 14px; line-height: 1.7; color: var(--body2); padding: 0 28px 16px 0; }

/* ───── 補足・仕様 (Human PO 2026-10-10: 本文から外した細かい条件。主要な階層より小さく、控えめに) ───── */
.notes { padding: 40px 20px 56px; border-top: 1px solid var(--line); }
.notes-h { font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--sub); }
.notes-g { margin-top: 14px; }
.notes-t { font-size: 12px; line-height: 1.6; font-weight: 700; color: var(--sub); }
.notes-list { margin-top: 4px; }
.notes-list li { position: relative; padding-left: 12px; font-size: 12px; line-height: 1.7; color: var(--sub); text-wrap: pretty; }
.notes-list li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 3px; height: 3px; border-radius: 50%; background: var(--mute); }

/* ───── 8 最後 (mock 10) ───── */
.closing { background: var(--ink); color: #fff; }
.cl-in { padding: 72px 20px 0; }
.cl-eyebrow { font-size: 13px; font-weight: 500; color: #A3A9B4; letter-spacing: .04em; }
.cl-h { margin-top: 14px; font-size: 38px; line-height: 1.35; font-weight: 700; }
.cl-tag { margin-top: 18px; font-size: 15px; font-weight: 500; letter-spacing: .06em; color: #C3C9D2; }
.cl-cta { margin-top: 44px; }
.closing .cta-note { color: #A3A9B4; }
.cl-pts { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 14px; row-gap: 6px; margin-top: 14px; font-size: 13px; color: #C3C9D2; }
.ft { margin-top: 95px; padding: 0 20px 48px; }
.ft-in { border-top: 1px solid #3A404C; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--mute); }
.ft-brand { font-weight: 700; letter-spacing: .22em; color: #C3C9D2; }
.ft-lang { display: flex; gap: 10px; }
.ft-lang .lang-cur { color: #C3C9D2; }
.ft-lang .lang-off { color: #646B78; }

/* ───── 固定ボタン (mock 02) — only ≤390px, only with JS ───── */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; box-sizing: border-box; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(23,28,38,.08); padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; transition: transform .2s ease, visibility .2s; }
.sticky[hidden] { display: none; }
.sticky.off { transform: translateY(110%); visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }
.st-l { flex: 1; min-width: 0; }
.st-brand { font-size: 13px; font-weight: 700; letter-spacing: .18em; }
.st-sub { margin-top: 1px; font-size: 11px; color: var(--sub); }
.st-r { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.cta--sticky { height: 48px; padding: 0 20px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 15px; white-space: nowrap; }
.st-r .soon { line-height: 16px; }
@media (min-width: 391px) { .sticky { display: none !important; } }
/* Permanent bottom reservation (plan §4.10): bar height + safe area, kept even while the bar is hidden. */
@media (max-width: 390px) { .ft { padding-bottom: calc(48px + var(--sticky-res, calc(90px + env(safe-area-inset-bottom)))); } }

/* internal QA overlay for truth-gate markers: open the page with #qa-gates (never on by default) */
html.qa-gates [data-gate] { outline: 1.5px dashed #B07A12; outline-offset: 1px; }

/* ───── 360px class (plan §4.1/§4.3: same text sizes, re-flow only) ───── */
@media (max-width: 389px) {
  .hv-fig { width: calc(176px * .85); }
  .hv-screen { zoom: .85; }
  .hv-cap { white-space: normal; }
  .sc-icons { gap: 2px; }
  .sc-n { flex-wrap: wrap; }
  .sc-min { flex-basis: 100%; }
  .pm-cards { grid-template-columns: 1fr; }
}
/* ───── 320px class (≤359px) ───── */
@media (max-width: 359px) {
  .hv-fig { width: calc(176px * .70); }
  .hv-screen { zoom: .70; }
  .start-cards { gap: 10px; }
  .start-card { padding: 14px 10px; }
  .sc-i { width: 26px; height: 26px; }
  .bs-cols { gap: 8px; }
  .bs-col { padding: 10px 8px 12px; }
  .bs-chip { padding: 0 6px; }
  .bs-step { gap: 4px; font-size: 11px; }
  /* 「メモに書いていたことも」 (11字) を 320 幅でも1行に収める（Sol 2026-10-10: 「も」の孤立）。360/390 は 28px のまま */
  #f1-h { font-size: 24px; }
  .f2-chain { grid-template-columns: 1fr; }
  .f2-ar { transform: rotate(90deg); height: 20px; align-items: center; }
}

/* ───── tablet band (391–1023px): the 390 layout, centred ───── */
@media (min-width: 391px) and (max-width: 1023px) {
  .in, .hero-in { max-width: 350px; margin-inline: auto; }
  .hero-in { box-sizing: content-box; }
  .an .in { max-width: 350px; }
  .ft-in { max-width: 350px; margin-inline: auto; }
}

/* ───── desktop (plan §5, designed at 1280) ───── */
@media (min-width: 1024px) {
  .in { max-width: 1152px; margin-inline: auto; }
  .sec { padding: 72px 64px; }
  .pillar { font-size: 72px; }
  .pillar-sub { font-size: 24px; }
  .h2 { font-size: 36px; }
  .m-br { display: none; }
  .h3c { font-size: 28px; }
  .cap { font-size: 12px; }
  .cta--fill, .cta--line { height: 58px; font-size: 17px; }
  .cta--closing { height: 58px; }
  .cta-block { width: 360px; }

  /* header (mock 11) */
  .hdr-in { height: 76px; padding: 0 64px; gap: 40px; justify-content: flex-start; max-width: 1152px; margin: 0 auto; box-sizing: content-box; }
  .brand { font-size: 17px; }
  .hdr-nav { display: flex; gap: 8px; margin-left: auto; margin-right: -10px; font-size: 14px; font-weight: 500; }
  .hdr-nav a { display: flex; align-items: center; min-height: 48px; min-width: 48px; justify-content: center; padding: 0 10px; box-sizing: border-box; color: var(--ink); text-decoration: none; }
  .hdr-nav a:hover { color: var(--blue); }
  .hdr-lang { display: flex; gap: 12px; font-size: 13px; }
  .cta--hdr { height: 40px; padding: 0 18px; font-size: 14px; }
  .cta--hdr::before { top: -5px; bottom: -5px; }

  /* hero (mock 11) */
  .hero-in { max-width: 1152px; margin: 0 auto; padding: 0 64px 40px; box-sizing: content-box; min-height: 664px; display: grid; grid-template-columns: minmax(0, 1fr) 520px; column-gap: 48px;
    grid-template-rows: 1fr auto auto auto auto auto 1fr; }
  .hero-in > * { grid-column: 1; }
  .hero-eyebrow { grid-row: 2; font-size: 15px; }
  .hero-h1 { grid-row: 3; margin-top: 14px; font-size: 128px; line-height: 1.04; }
  .hero-lede { grid-row: 4; margin-top: 28px; font-size: 28px; line-height: 1.4; }
  .hero-vis { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; width: 520px; }
  .hv-row { zoom: 1.42; margin-left: 7px; }
  .hero-cta { grid-row: 5; margin-top: 36px; }
  .hero-cta-row { display: flex; align-items: flex-start; gap: 24px; }
  .hero-cta .cta { width: auto; height: 58px; padding: 0 32px; font-size: 17px; }
  .hero-more { display: inline-flex; align-items: center; height: 58px; min-width: 48px; font-size: 15px; font-weight: 500; color: var(--blue); text-decoration: none; }
  .hero-pts { grid-row: 6; justify-content: flex-start; column-gap: 22px; row-gap: 8px; margin-top: 22px; font-size: 15px; }
  .hero-pts li { gap: 6px; }
  .hero-pts .ck { width: 16px; height: 16px; }

  /* 早く (Human PO 2026-10-10: タップ数 → ± へ直結) */
  .fast-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 552px); column-gap: 48px; grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "head start" "head btxt" "head cards" "head cta"; }
  .fast-head { grid-area: head; }
  .fast-start { grid-area: start; }
  .start-cards { margin-top: 0; }
  .fast-b-text { grid-area: btxt; margin-top: 48px; }
  .pm-cards { grid-area: cards; margin-top: 16px; align-self: start; }
  .fast-cta { grid-area: cta; margin-top: 40px; }

  /* 自由1 (plan §5.3; 2026-10-10: まとめて設定と補足を記録中の図の右列へ) */
  .f1-grid-l { display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: 48px; grid-template-rows: auto auto auto auto auto auto 1fr;
    grid-template-areas: "headb headb" "fig h3" "fig list" "fig ex" "fig os" "fig tail" "fig ."; }
  .f1-headblock { grid-area: headb; }
  .f1-h3 { grid-area: h3; margin-top: 48px; }
  .f1-fig { grid-area: fig; margin-top: 48px; }
  .f1-screen { zoom: 1.2; }
  .f1-list { grid-area: list; }
  .f1-ex { grid-area: ex; align-self: start; }
  .f1-oneshot { grid-area: os; margin-top: 48px; }
  .os-head { column-gap: 10px; }
  .os-h { font-size: 28px; }
  .badge--os { height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; }
  .bs { margin-top: 16px; }
  .bs-cols { gap: 16px; }
  .bs-col { padding: 14px 14px 16px; }
  .bs-t { font-size: 15px; }
  .f1-tail { grid-area: tail; }
  .f1-more { margin-top: 16px; }

  /* 分析 (mock 12) */
  .an { padding: 72px 64px; }
  .an .in { padding: 0; }
  .an-head { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; }
  .an-head .h2 { margin-top: 0; }
  .an-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 48px; }
  .an-body--pc { display: block; }
  .an-body--sp { display: none; }
  .h3s-t { font-size: 24px; }
  .h3s { font-size: 14px; }
  .ph { width: 340px; margin-top: 20px; }
  .ph-tip { left: 110px; top: 62px; }
  .an-own { margin-top: 56px; }
  .an-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 20px 0 0; max-width: 1152px; margin: 0 auto; scroll-snap-type: none; }
  .gc { padding: 18px; }
  .gk { font-size: 11.5px; }
  .gq { font-size: 17px; min-height: 50px; }
  .lg { font-size: 11.5px; }
  .gal { font-size: 12.5px; }
  .gav { font-size: 26px; }
  .an-rail-end, .an-dots { display: none; }
  .an-foot { margin-top: 16px; }
  .an-cta { margin: 28px auto 0; }

  /* 自由2 */
  .f2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; grid-template-areas: "head head" "flow items" ". cta"; }
  .f2-head { grid-area: head; }
  .f2-items { grid-area: items; margin-top: 48px; }
  .f2-flow { grid-area: flow; margin-top: 48px; align-self: start; }
  .f2-cta { grid-area: cta; }

  /* 信条・FAQ */
  .creed-in, .faq-in, .notes-in { max-width: 720px; }
  .notes { padding: 56px 64px 72px; }

  /* 料金 */
  .pr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 496px)); column-gap: 48px; justify-content: center; grid-template-areas: "div div" "free pro"; }
  .pr-div { grid-area: div; margin: 0 0 20px; }
  .plan--free { grid-area: free; }
  .plan--pro { grid-area: pro; align-self: start; }
  .pr-foot { max-width: 1040px; margin: 0 auto; text-align: center; }
  .pr-cta { margin: 28px auto 0; }

  /* 最後 */
  .cl-in { max-width: 720px; margin: 0 auto; padding: 96px 0 0; text-align: center; }
  .cl-h { font-size: 56px; }
  .cl-cta { margin: 44px auto 0; }
  .ft { padding: 0 64px 48px; }
  .ft-in { max-width: 1152px; margin: 0 auto; }
}