/* CapRex LP の見た目（S 案・売るための LP。2026-11-03 に本人が採用）。正本は ../DESIGN.md。
   色は黄 #FFCE00・黒・白（読みやすさのための面）。カードは白に黒い 2px の線と、ずらした黒い影（角丸なし・ぼかしなし）。
   ドット体（--dot）はロゴ・値段・小さな札・画面の中の表示だけ。見出し・本文・表は --sans。
   DotGothic16 は 16px の升目の書体なので、大きさは 16 の倍数（16・32・48・64）だけにする（R06-20） */
:root {
  --y: #FFCE00;
  --k: #000;
  --w: #fff;
  --pale: #fff7cc;
  --gray: #e7e7e7;
  --line: #ddd;
  --dot: "DotGothic16", "Hiragino Sans", sans-serif;
  --dotjp: "DotGothic16", "Hiragino Sans", sans-serif;
  --sans: "M PLUS 1", "Hiragino Sans", sans-serif;
  --wrap: min(1200px, calc(100% - 32px));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--w); }
body { font: 500 16px/1.8 var(--sans); color: var(--k); background: var(--w); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
:lang(ja) :is(h1, h2, h3, p, li, summary, th, td) { word-break: auto-phrase; }
/* Safari は auto-phrase が効かないので、見出しと短い文は文節の塊（.nw・<wbr>）の所でだけ切る（R11-02） */
@supports not (word-break: auto-phrase) {
  :lang(ja) :is(h1, h2, h3, summary, .strip li, .perm th, .perm td, .micro span, .badge, .grid b, .plan li, .answer) { word-break: keep-all; overflow-wrap: anywhere; }
}
p, li, .a { text-wrap: pretty; }
:lang(ja) { line-break: strict; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
.wrap { width: var(--wrap); margin-inline: auto; }
.nw { white-space: nowrap; display: inline-block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 発売の前（soon）と後（live）で出し分ける。<html data-stage="soon"> を live に替えると発売の形になる（?stage=live で下見） */
[data-stage="soon"] .live, [data-stage="live"] .soon { display: none !important; }

/* キーの記号（⌘⇧⌃）。言語にかかわらず DotGothic16（Pixelify の 5 は S に見える。R06-02） */
.kbd { font-family: var(--dotjp); font-weight: 400; white-space: nowrap; }
/* 見出しの中のキーは黒い面で持たせる（細く抜けて見えないように。R06-25） */
h2 .kbd { display: inline-block; font-size: 32px; line-height: 1.3; background: var(--k); color: var(--y); padding: 0 .2em; vertical-align: .12em; }
.dk h2 .kbd { background: var(--y); color: var(--k); }

/* ボタン。押せる物だけ影を付ける。押せない物（発売の前）は線だけ（R06-03） */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; background: var(--k); color: var(--y); font: 800 17px/1.3 var(--sans); text-decoration: none; border: 2px solid var(--k); box-shadow: 4px 4px 0 var(--k); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--k); }
.btn:focus-visible, .faq summary:focus-visible, .hd a:focus-visible { outline: 3px solid var(--k); outline-offset: 3px; }
.btn.sm { white-space: nowrap; min-height: 40px; padding: 0 16px; font-size: 14px; box-shadow: 3px 3px 0 var(--k); }
.btn.ghost { background: var(--w); color: var(--k); }
.btn .dl { font: 400 16px/1 var(--dot); }
.btn.off, .btn:disabled { background: transparent; color: var(--k); box-shadow: none; cursor: default; transform: none; }
.dk .btn.off { color: var(--y); border-color: var(--y); }

/* ヘッダー（固定） */
.hd { position: sticky; top: 0; z-index: 20; background: var(--y); border-bottom: 2px solid var(--k); }
.hd .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 8px; font: 400 32px/1 var(--dotjp); text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.hd nav { display: flex; align-items: center; gap: 28px; font-weight: 700; font-size: 15px; }
.hd nav a:not(.btn) { text-decoration: none; padding: 8px 0; }
.hd nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.hd .lang { border: 2px solid var(--k); padding: 4px 8px !important; font-size: 13px; line-height: 1.2; }

/* ヒーロー */
.hero { background: var(--y); padding: 72px 0 88px; border-bottom: 2px solid var(--k); }
.hero .wrap { display: grid; grid-template-columns: 1fr 560px; grid-template-areas: "t m" "b m"; column-gap: 56px; align-items: center; }
.hero .fv-t { grid-area: t; align-self: end; }
.hero .mock { grid-area: m; }
.hero .fv-b { grid-area: b; align-self: start; }
.badge { display: inline-block; font: 700 14px/32px var(--sans); background: var(--k); color: var(--y); padding: 0 16px; }
.hero h1 { font: 900 clamp(36px, 4.6vw, 60px)/1.3 var(--sans); letter-spacing: -.01em; margin-top: 20px; }
.hero h1 em { font-style: normal; white-space: nowrap; background: linear-gradient(transparent 62%, var(--w) 62%); }
.hero .sub { font-size: 18px; line-height: 1.85; margin-top: 20px; max-width: 560px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.hero .cta .btn { min-width: 240px; }
.micro { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 14px; font-weight: 700; }
.micro span::before { content: "✓ "; }
.launch-note { margin-top: 8px; font-size: 14px; font-weight: 700; }

/* 製品のイメージ（アプリの窓で、録画している途中）。本物の画面の写真はサイクル 34 のあと */
.mock { position: relative; background: var(--w); border: 2px solid var(--k); box-shadow: 10px 10px 0 var(--k); }
.mock .tb { height: 32px; background: var(--k); display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.mock .tb i { width: 10px; height: 10px; background: var(--y); }
.mock .tb b { margin-left: auto; color: var(--y); font: 400 16px/1 var(--dotjp); display: flex; align-items: center; gap: 8px; }
.mock .tb b::before { content: ""; width: 10px; height: 10px; background: var(--y); animation: blink 1s steps(1) infinite; }
.mock .body { position: relative; aspect-ratio: 16 / 10; padding: 28px 32px; overflow: hidden; }
.mock .row { height: 10px; background: var(--gray); margin-bottom: 16px; }
.mock .field { margin-top: 24px; height: 40px; border: 2px solid var(--k); width: 62%; display: flex; align-items: center; padding: 0 8px; font-weight: 700; font-size: 14px; }
.mock .send { position: absolute; left: 32px; top: 58%; height: 40px; padding: 0 24px; background: var(--y); border: 2px solid var(--k); font: 800 15px/36px var(--sans); }
.mock .rp { position: absolute; left: 106px; top: calc(58% + 20px); width: 22px; height: 22px; margin: -11px; border: 3px solid var(--k); outline: 3px solid var(--k); outline-offset: 5px; animation: rp 2.4s steps(4) infinite; }
.mock .cur { position: absolute; left: 106px; top: calc(58% + 20px); width: 18px; height: 27px; }
.mock .keys { position: absolute; right: 24px; top: 24px; display: flex; gap: 8px; }
.mock .keys b { min-width: 36px; height: 36px; background: var(--k); color: var(--y); font: 400 16px/36px var(--dotjp); text-align: center; padding: 0 8px; }
.mock .cam { position: absolute; right: 24px; bottom: 64px; width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--k); background: var(--y); overflow: hidden; }
.mock .cam .rex { position: absolute; left: 2%; top: 14%; width: 100%; aspect-ratio: 1; }
.mock .cap { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--k); color: var(--y); font: 400 16px/32px var(--dot); padding: 0 12px; white-space: nowrap; }
.mock .out { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 2px solid var(--k); background: #f6f6f6; }
.mock .out p { font: 800 13px/1 var(--sans); margin-right: 4px; }
.mock .out span { display: flex; align-items: center; gap: 8px; font: 800 13px/28px var(--sans); border: 2px solid var(--k); background: var(--w); padding: 0 10px; white-space: nowrap; }
.mock .out i { width: 12px; height: 12px; background: var(--k); }
.mock .out small { font: 700 12px/1 var(--sans); }
.mock .out small.t { font: 400 16px/1 var(--dot); }
.mock .lbl { position: absolute; font: 800 12px/22px var(--sans); background: var(--y); border: 2px solid var(--k); padding: 0 8px; white-space: nowrap; }
.rex svg { width: 100%; height: 100%; }

/* 特長の帯（黒） */
.strip { background: var(--k); color: var(--y); }
.strip ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.strip li { padding: 24px 16px 24px 24px; font-weight: 800; font-size: 15px; line-height: 1.5; border-left: 1px solid rgba(255, 206, 0, .3); }
.strip li:first-child { border-left: 0; padding-left: 0; }
.strip li small { display: block; font-weight: 500; font-size: 13px; opacity: .9; }

/* 章の共通 */
.sec { padding: 112px 0; }
.sec.yl { background: var(--y); border-block: 2px solid var(--k); }
.sec.dk { background: var(--k); color: var(--y); }
.sec.ln { border-top: 2px solid var(--k); }
.head { max-width: 760px; }
.head .eye { font: 400 16px/1 var(--dot); }
.head h2 { font: 900 clamp(28px, 3.4vw, 44px)/1.4 var(--sans); margin-top: 16px; }
.head p { font-size: 17px; margin-top: 16px; }
.card { background: var(--w); border: 2px solid var(--k); box-shadow: 6px 6px 0 var(--k); }

/* 困りごと → CapRex なら */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.pain { padding: 28px 28px 32px; }
.pain .ico { width: 48px; height: 48px; }
.pain h3 { font: 800 19px/1.5 var(--sans); margin-top: 16px; }
.pain p { font-size: 15px; margin-top: 8px; }
.answer { margin-top: 48px; max-width: 760px; font: 900 clamp(22px, 2.6vw, 32px)/1.5 var(--sans); }
.answer strong { font-weight: 900; box-shadow: inset 0 -.3em 0 var(--y); }

/* 良さ 3 つ（左右交互） */
.ben { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 88px; }
.ben .vis { order: 2; }
.ben .num { font: 400 16px/1 var(--dot); }
.ben h3 { font: 900 clamp(24px, 2.8vw, 34px)/1.45 var(--sans); margin-top: 8px; }
.ben p { font-size: 16px; margin-top: 16px; }
.ben ul { list-style: none; margin-top: 16px; }
.ben li { font-weight: 700; padding: 8px 0 8px 28px; position: relative; }
.ben li::before { content: "✓"; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; background: var(--k); color: var(--y); font: 900 12px/20px var(--sans); text-align: center; }
.vis { padding: 28px; min-height: 300px; position: relative; }
.vis .mt { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; margin: 24px 0; font-weight: 800; font-size: 14px; }
.vis .mt span { display: flex; gap: 4px; height: 18px; }
.vis .mt i { flex: 1; background: var(--k); animation: lvl 1s steps(3) infinite alternate; transform-origin: bottom; }
.vis .mt i:nth-child(n+10) { background: var(--gray); animation: none; }
/* 画面の行は音の計器でなく、コマの帯（R11-19） */
.vis .mt.fr i { background: var(--w); border: 2px solid var(--k); animation: none; }
.vis .merge { margin-top: 24px; border: 2px solid var(--k); background: var(--y); font: 800 15px/44px var(--sans); text-align: center; }
.vis .tr p { font-size: 14px; margin: 0 0 12px; padding: 8px 16px; border-left: 4px solid var(--k); background: #f6f6f6; }
.vis .tr p b { font: 400 16px/1 var(--dotjp); margin-right: 8px; }
.vis .ex { font: 800 14px/1.4 var(--sans); }
.vis .ex + .mt { margin-top: 16px; }
.ben .note-ben { font-size: 14px; margin-top: 16px; }
.vis .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vis .tags span { font: 800 13px/30px var(--sans); background: var(--y); border: 2px solid var(--k); padding: 0 8px; }
/* 会議の図：相手／自分の時間の帯（R22-06。「声と音」の計器と違う絵にする）。帯の位置は --s〜--e（%）。
   再生の線が流れ、いま話している行が黄色になる（相手と自分が交互に話す） */
.vis .tl { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; row-gap: 12px; align-items: center; margin: 16px 0 24px; }
.vis .tl .ru { grid-column: 2; grid-row: 1; position: relative; height: 26px; border-bottom: 2px solid var(--k); font: 400 16px/1 var(--dotjp); }
.vis .tl .ru span { position: absolute; top: 0; transform: translateX(-50%); }
.vis .tl .ru span::after { content: ""; position: absolute; left: 50%; top: 18px; width: 2px; height: 8px; margin-left: -1px; background: var(--k); }
.vis .tl .ru span:nth-child(1) { left: 0; transform: none; }
.vis .tl .ru span:nth-child(1)::after { left: 0; margin-left: 0; }
.vis .tl .ru span:nth-child(2) { left: 33.33%; }
.vis .tl .ru span:nth-child(3) { left: 66.67%; }
.vis .tl .ru span:nth-child(4) { left: auto; right: 0; transform: none; }
.vis .tl .ru span:nth-child(4)::after { left: auto; right: 0; margin-left: 0; }
.vis .tl > b { grid-column: 1; font: 800 14px/1.2 var(--sans); }
.vis .tl > b small { display: block; font-weight: 500; font-size: 12px; margin-top: 2px; }
.vis .tl .them { grid-row: 2; }
.vis .tl .me { grid-row: 3; }
.vis .tl .ln { grid-column: 2; position: relative; height: 24px; background: #f6f6f6; }
.vis .tl .ln i { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 1%); width: calc((var(--e) - var(--s)) * 1%); background: var(--k); }
.vis .tl .ln.me i { background: var(--y); box-shadow: inset 0 0 0 2px var(--k); }
.vis .tl .ph { grid-column: 2; grid-row: 2 / 4; align-self: stretch; position: relative; margin: -6px 0; overflow: hidden; pointer-events: none; }
.vis .tl .ph i { position: absolute; inset: 0; border-left: 2px solid var(--k); animation: ph 9s linear infinite; }
.vis .tr.sp p b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--k); vertical-align: 1px; }
.vis .tr.sp p.me b::before { background: var(--y); box-shadow: inset 0 0 0 2px var(--k); }
.vis .tr.sp p:nth-child(1) { animation: t1 9s linear infinite; }
.vis .tr.sp p:nth-child(2) { animation: t2 9s linear infinite; }
.vis .tr.sp p:nth-child(3) { animation: t3 9s linear infinite; }
.vis .ovl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vis .ovl div { border: 2px solid var(--k); padding: 16px; font-weight: 800; font-size: 14px; min-height: 104px; position: relative; }
.vis .ovl div small { display: block; font-weight: 500; font-size: 12px; margin-top: 4px; }
.vis .ovl small { font-size: 13px; }
.vis .ill { display: flex; align-items: center; justify-content: center; gap: 4px; height: 72px; margin-bottom: 12px; background: #f6f6f6; border: 2px solid var(--k); position: relative; overflow: hidden; }
.vis .ill.click b { font: 800 13px/28px var(--sans); background: var(--y); border: 2px solid var(--k); padding: 0 12px; }
.vis .ill.click i { position: absolute; left: calc(50% + 22px); top: 50%; width: 16px; height: 16px; margin: -8px; border: 2px solid var(--k); outline: 2px solid var(--k); outline-offset: 4px; }
.vis .ill.keys b { min-width: 32px; height: 32px; background: var(--k); color: var(--y); font: 400 16px/32px var(--dotjp); text-align: center; padding: 0 4px; }
.vis .ill.zoom i { width: 64px; height: 36px; border: 2px dashed var(--k); }
.vis .ill.zoom b { position: absolute; left: calc(50% + 20px); top: 8px; background: var(--k); color: var(--y); font: 400 16px/24px var(--dotjp); padding: 0 4px; }
.vis .ill.cam span.rex { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--k); background: var(--y); overflow: hidden; }
.vis .ill.cam span.rex svg { position: absolute; left: 4%; top: 14%; width: 100%; height: auto; }

/* 2 つの使い方（r29。本人「録画アプリと議事録アプリを合体して、これ 1 つで完結、を FV とその下までに」） */
.uses .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-top: 48px; }
.uses .one { grid-column: 1 / 3; position: relative; padding-bottom: 14px; border-bottom: 2px solid var(--y); }
.uses .one::before, .uses .one::after { content: ""; position: absolute; bottom: -10px; width: 2px; height: 10px; background: var(--y); }
.uses .one::before { left: 0; }
.uses .one::after { right: 0; }
.uses .one b { display: inline-block; font: 800 14px/28px var(--sans); background: var(--y); color: var(--k); padding: 0 10px; }
.uses .card { box-shadow: 6px 6px 0 var(--y); color: var(--k); padding: 24px; display: flex; flex-direction: column; }
.use .fig { border: 2px solid var(--k); background: #f6f6f6; margin-top: 16px; }
.use .for { font-size: 14px; font-weight: 700; }
.use h3 { font: 900 clamp(22px, 2.4vw, 28px)/1.4 var(--sans); margin-top: 4px; }
.use ul { list-style: none; margin-top: 12px; }
.use li { font-weight: 700; padding: 6px 0 6px 28px; position: relative; }
.use li::before { content: "✓"; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; background: var(--k); color: var(--y); font: 900 12px/20px var(--sans); text-align: center; }
.use .more { margin-top: auto; padding-top: 16px; font-weight: 800; color: var(--k); align-self: flex-start; }
.uses-note { margin-top: 32px; font-size: 14px; }
/* 説明動画（できあがった動画を再生しているところ） */
.use .fv .scr { position: relative; height: 176px; background: var(--w); border-bottom: 2px solid var(--k); padding: 20px; overflow: hidden; }
.use .fv .r { display: block; height: 8px; background: var(--gray); margin-bottom: 12px; }
.use .fv .bt { position: absolute; left: 20px; top: 70px; height: 36px; padding: 0 20px; background: var(--y); border: 2px solid var(--k); font: 800 14px/32px var(--sans); }
.use .fv .rp { position: absolute; left: 82px; top: 90px; width: 18px; height: 18px; margin: -9px; border: 2px solid var(--k); outline: 2px solid var(--k); outline-offset: 4px; }
.use .fv .ky { position: absolute; right: 20px; top: 16px; display: flex; gap: 6px; }
.use .fv .ky b { min-width: 32px; height: 32px; background: var(--k); color: var(--y); font: 400 16px/32px var(--dotjp); text-align: center; padding: 0 6px; }
.use .fv .cm { position: absolute; right: 20px; bottom: 16px; width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--k); background: var(--y); overflow: hidden; }
.use .fv .cm .rex { position: absolute; left: 2%; top: 14%; width: 100%; aspect-ratio: 1; }
.use .fv .cc { position: absolute; left: 20px; bottom: 16px; background: var(--k); color: var(--y); font: 400 16px/28px var(--dot); padding: 0 10px; white-space: nowrap; }
.use .fv .pl { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; }
.use .fv .pl b { width: 0; height: 0; border-left: 11px solid var(--k); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.use .fv .pl span { flex: 1; height: 6px; background: var(--gray); position: relative; }
.use .fv .pl span i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: var(--k); }
.use .fv .pl small { font: 400 16px/1 var(--dot); }
/* 会議（自分と相手を分けた文字起こしと、議事録） */
.use .fm { display: grid; grid-template-columns: 1fr 1fr; min-height: 216px; }
.use .fm .tx { padding: 16px; border-right: 2px solid var(--k); }
.use .fm .tx p { font-size: 13px; line-height: 1.6; font-weight: 500; padding: 6px 0 6px 10px; box-shadow: inset 4px 0 0 var(--k); margin-bottom: 8px; }
.use .fm .tx p.me { box-shadow: inset 4px 0 0 var(--y), inset 6px 0 0 var(--k); }
.use .fm .tx b { display: block; font: 800 12px/1.4 var(--sans); }
.use .fm .mn { background: var(--w); padding: 16px; font-size: 13px; line-height: 1.6; }
.use .fm .mn .dt { font: 400 16px/1 var(--dot); padding-bottom: 8px; border-bottom: 2px solid var(--k); margin-bottom: 8px; }
.use .fm .mn .h { font-weight: 800; margin-top: 6px; }

/* 使い方（3 段） */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
.step { padding: 28px; position: relative; display: flex; flex-direction: column; }
.step + .step::before { content: ""; position: absolute; left: -36px; top: 72px; border: 12px solid transparent; border-left: 16px solid var(--k); }
.step .no { width: 48px; height: 48px; background: var(--k); color: var(--y); font: 400 32px/48px var(--dot); text-align: center; }
.step .sym { min-height: 108px; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 8px; margin-top: 20px; padding: 16px; background: #f6f6f6; border: 2px solid var(--k); }
.step .sym b { min-width: 40px; height: 40px; background: var(--k); color: var(--y); font: 400 16px/40px var(--dotjp); text-align: center; padding: 0 8px; }
.step .sym span { font: 800 13px/28px var(--sans); border: 2px solid var(--k); padding: 0 8px; background: var(--w); }
.step .sym span.on { background: var(--y); }
.step .sym .stop { display: inline-block; width: 40px; height: 40px; background: var(--k); }
.step .sym.files { flex-direction: column; align-items: stretch; gap: 4px; }
.step .sym .dir { font: 800 13px/1.4 var(--sans); }
.step .sym.files span { display: flex; align-items: center; gap: 8px; font-family: var(--sans); }
.step .sym.files .stop { width: 12px; height: 12px; }
.step h3 { font: 800 20px/1.5 var(--sans); margin-top: 20px; }
.step p { font-size: 15px; margin-top: 8px; }
.note-img { font-size: 14px; margin-top: 32px; }

/* できることの一覧 */
.grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 2px solid var(--k); border-left: 2px solid var(--k); background: var(--w); }
.grid li { border-right: 2px solid var(--k); border-bottom: 2px solid var(--k); padding: 24px 20px; }
.grid b { display: block; font-weight: 800; font-size: 16px; }
.grid b::before { content: "✓"; display: inline-block; width: 24px; height: 24px; margin-right: 8px; background: var(--k); color: var(--y); text-align: center; font: 900 14px/24px var(--sans); }
.grid li > span { display: block; font-size: 13px; margin-top: 8px; line-height: 1.6; }
.grid-note { margin-top: 16px; font-size: 14px; }
.grid .pro { font: 400 16px/24px var(--dot); background: var(--k); color: var(--y); padding: 0 8px; margin-left: 8px; vertical-align: 1px; font-style: normal; white-space: nowrap; }

/* 安心（黒） */
.safe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.safe div { border: 2px solid var(--y); padding: 24px; }
.safe h3 { font: 800 19px/1.5 var(--sans); }
.safe p { font-size: 14px; margin-top: 8px; }
.perm { width: 100%; max-width: 920px; margin: 48px 0 0; border-collapse: collapse; font-size: 14px; }
.perm caption { text-align: left; font-weight: 800; font-size: 15px; padding-bottom: 8px; }
.perm th, .perm td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-top: 1px solid rgba(255, 206, 0, .35); }
.perm th { width: 34%; font-weight: 700; }
.perm-note { max-width: 920px; margin: 12px 0 0; font-size: 14px; }

/* 料金 */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 920px; margin: 56px 0 0; align-items: stretch; }
.plan { padding: 36px 36px 40px; display: flex; flex-direction: column; }
.plan.pro { background: var(--y); box-shadow: 10px 10px 0 var(--k); }
.plan.pro h3 { margin: -36px -36px 0; padding: 16px 36px; background: var(--k); color: var(--y); }
.plan h3 { font: 800 20px/1.4 var(--sans); }
.plan .price { font: 400 64px/1.1 var(--dot); margin-top: 16px; }
.plan .price small { font-size: 32px; margin-left: 8px; }
.plan .price .cm { margin: 0 -.2em 0 -.04em; }
.plan .per { font-size: 14px; font-weight: 700; }
.plan .launch { display: inline-block; margin-top: 8px; font: 800 14px/30px var(--sans); background: var(--k); color: var(--y); padding: 0 8px; align-self: flex-start; }
.plan ul { list-style: none; margin: 24px 0 16px; }
.plan li { padding: 8px 0 8px 28px; position: relative; font-size: 15px; font-weight: 700; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 7px; font-weight: 900; }
.plan .ai { font-size: 13px; margin-bottom: 24px; }
.plan .go { margin-top: auto; }
.plan .btn { width: 100%; }
.req { max-width: 920px; margin: 28px 0 0; font-weight: 800; font-size: 15px; }
.pay { max-width: 920px; margin: 16px 0 0; font-size: 14px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 24px; max-width: 920px; margin: 8px 0 0; font-size: 14px; }
.legal-links a { display: inline-block; padding: 8px 0; }
/* 料金（2026-11-04 に本人が決めた形）: 上に「できることの表」（.mx）、その下に有料版の払い方 3 つ（月額・年額・買い切り）。
   年額だけ黒い帯と「おすすめ」の札。最初から選んだ形にはせず、打ち消し線で比べない。値段のドット体は 48px（円 32px）で 16 の倍数を守る */
.plan h3 .rec { display: inline-block; margin-left: 12px; font: 400 16px/28px var(--dotjp); background: var(--y); color: var(--k); padding: 0 8px; vertical-align: 1px; }
.plan .save { margin-top: 12px; font: 800 13px/1.5 var(--sans); background: var(--k); color: var(--y); padding: 4px 8px; align-self: flex-start; }
.vs { max-width: 920px; margin: 32px 0 0; font-weight: 800; font-size: 17px; }
.vs small { display: block; font-weight: 500; font-size: 13px; margin-top: 4px; }
.plans.three { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plans.three .plan { padding: 32px 24px 36px; }
.plans.three .plan.pro h3 { margin: -32px -24px 0; padding: 16px 24px; }
.plans.three .price { font-size: 48px; }
.plans.three .price small { font-size: 32px; margin-left: 4px; }
.plans.three .price + .price { margin-top: 8px; }
.plan .price .yr { display: block; font: 800 14px/1.4 var(--sans); margin-bottom: 4px; }
.plan .price .yn { font-weight: 500; font-size: 12px; }
.plans.three .price.tbd { font-size: 32px; line-height: 1.25; }

/* 比較 */
.cmp { width: 100%; max-width: 920px; margin: 48px 0 0; border-collapse: collapse; background: var(--w); border: 2px solid var(--k); font-size: 15px; }
.cmp th, .cmp td { padding: 16px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp tbody th { font-weight: 500; }
.cmp thead th { background: var(--k); color: var(--y); font-weight: 800; }
.cmp td, .cmp thead th:nth-child(n+2) { text-align: center; width: 24%; }
.cmp td { font-weight: 700; font-size: 15px; }
.cmp .yes { display: inline-block; width: 24px; height: 24px; background: var(--k); color: var(--y); font: 900 14px/24px var(--sans); font-style: normal; }
.cmp td.us { background: var(--pale); }
.cmp thead .us { background: var(--y); color: var(--k); font: 400 16px/1 var(--dotjp); }
.cmp.ai2 td, .cmp.ai2 thead th:nth-child(n+2) { text-align: left; }
.cmp-note { max-width: 920px; margin: 16px 0 0; font-size: 14px; }

/* 料金と、できることの表（11-04、本人「料金とテーブルを合体。どのプランで何が解禁されるかパッとわかるように」）。
   列は ⌘⇧5・無料・有料版（月額・年額・買い切りは中身が同じなので 1 列）。払い方のカードは表の下 */
.mx { margin-top: 56px; box-shadow: 6px 6px 0 var(--k); }
.mx th.f, .mx tbody th { width: 40%; }
.mx td, .mx thead th:nth-child(n+2) { width: 20%; }
.mx thead th { vertical-align: top; padding: 20px 12px; }
.mx thead th.f { vertical-align: bottom; }
.mx thead .nm { display: block; font: 800 17px/1.4 var(--sans); }
.mx thead .nm .kbd { font-size: 16px; }
.mx thead .p { display: block; white-space: nowrap; font: 400 32px/1.1 var(--dot); margin-top: 8px; }
.mx thead .p small { font-size: 16px; margin-left: 2px; }
.mx thead .p .cm { margin: 0 -.2em 0 -.04em; }
.mx thead .p.tbd { font-size: 16px; line-height: 1.5; }
.mx thead th > small { display: block; margin-top: 8px; font: 700 12px/1.5 var(--sans); }
.mx tbody tr.g th { width: auto; padding: 24px 16px 8px; font: 800 14px/1.5 var(--sans); text-align: left; background: var(--w); border-bottom: 2px solid var(--k); }
.mx tbody tr.g.up th { background: var(--k); color: var(--y); padding: 12px 16px; }
.mx tfoot td { padding: 16px 12px 20px; border-bottom: 0; }
.mx tfoot .btn { width: 100%; padding: 0 8px; white-space: normal; text-align: center; }
.mx-note { max-width: 920px; margin: 20px 0 0; font-size: 13px; }
.plans-h { max-width: 920px; margin: 64px 0 0; font: 800 22px/1.5 var(--sans); }
.plans-h + .plans { margin-top: 24px; }
/* 月額・年額で同じことは、2 枚の上の寸法線に 1 回だけ書く（R22-08） */
.plans .both { grid-column: 1 / 3; position: relative; padding: 0 16px 14px 26px; border-bottom: 2px solid var(--k); font-size: 14px; font-weight: 700; line-height: 1.6; }
.plans .both::before, .plans .both::after { content: ""; position: absolute; bottom: -10px; width: 2px; height: 10px; background: var(--k); }
.plans .both::before { left: 0; }
.plans .both::after { right: 0; }
.plans .both b { display: inline-block; font: 800 13px/26px var(--sans); background: var(--k); color: var(--y); padding: 0 8px; }
.plans .both .its { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.plans .both .it { white-space: nowrap; }
.plans .both .it::before { content: "✓"; margin-right: 6px; font-weight: 900; }
.plans .both small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; }
.plans.three .plan { grid-row: 2; }
.head + .cmp.ai2 { margin-top: 48px; }
.cmp caption { caption-side: top; text-align: left; font: 800 17px/1.5 var(--sans); padding: 0 0 12px; }
.cmp.ai2 { margin-top: 64px; }
.cmp.ai2 td { font-size: 14px; }

/* 質問 */
.faq { max-width: 920px; margin: 48px 0 0; background: var(--w); border: 2px solid var(--k); box-shadow: 6px 6px 0 var(--k); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 56px 16px 24px; font-weight: 800; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 12px; font: 700 26px/1.4 var(--sans); }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 24px 20px; font-size: 15px; }
/* 質問の仕分けの小さな見出し（R22-15）。2 つ目からは上に黒の 1px の線 */
.faq .faq-g { padding: 24px 24px 8px; font: 800 14px/1.4 var(--sans); border-bottom: 2px solid var(--k); }
.faq .faq-g:not(:first-child) { border-top: 2px solid var(--k); margin-top: 16px; }
.faq .q2 { margin-left: .5em; }

/* 最後のひと押し。見えたら恐竜が歩いてくる */
.final { background: var(--y); border-top: 2px solid var(--k); padding: 96px 0 0; overflow: hidden; }
.final h2 { font: 900 clamp(40px, 6vw, 80px)/1.3 var(--sans); text-wrap: balance; }
.final p { font-size: 17px; margin-top: 16px; }
.final .cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.final .cta .btn { min-width: 240px; }
.final .stage { position: relative; height: 200px; margin-top: 40px; border-bottom: 8px solid var(--k); }
.final .rex { position: absolute; bottom: 0; left: calc(50% - 88px); width: 176px; height: 176px; }
.final .rex svg { position: absolute; inset: 0; }
.final .rex .f2 { visibility: hidden; }
.final .rex.away { visibility: hidden; }
.final .rex.walk { animation: walkin 3s steps(20) both; }

/* フッター */
.ft { background: var(--k); color: var(--y); padding: 28px 0 40px; font-size: 13px; }
.ft .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.ft nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.ft nav a { display: inline-block; padding: 8px 0; }
.ft .legal { flex: 1 1 100%; border-bottom: 1px solid rgba(255, 206, 0, .3); padding-bottom: 12px; margin-bottom: 4px; }

/* スマホの下の帯（最初の画面のボタンが見えなくなってから出す。料金と最後の章では隠す） */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--y); border-top: 2px solid var(--k); padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .25s; }
.bar.on { transform: none; }
.bar .t { font-size: 12px; font-weight: 800; line-height: 1.4; }
.bar .btn { flex: 1; min-height: 48px; box-shadow: 3px 3px 0 var(--k); }

/* 決まりごとのページ（特商法・規約・プライバシー・返金・購入のあと）。情報のページなのでドット体はロゴだけ */
.doc { padding: 48px 0 128px; }
.doc > * { max-width: 880px; }
.doc h1 { font: 800 clamp(26px, 3vw, 40px)/1.4 var(--sans); }
.doc .date { font-size: 14px; margin-top: 8px; }
.doc > p { margin-top: 24px; }
.doc .lead-doc { font-size: 18px; font-weight: 700; }
.doc .note-doc { font-size: 14px; margin-top: 16px; }
.kv { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 15px; border-top: 2px solid var(--k); }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.kv th { width: 30%; font-weight: 700; }
.clauses { margin-top: 40px; padding-left: 1.6em; border-top: 2px solid var(--k); }
.clauses.plain { list-style: square; }
.clauses > li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.clauses h2 { font: 800 17px/1.6 var(--sans); margin: 0; }
.clauses p { font-size: 15px; margin-top: 4px; }
.clauses ul { margin-top: 8px; padding-left: 1.2em; font-size: 15px; }
.clauses ol { margin-top: 8px; padding-left: 1.6em; font-size: 15px; list-style: decimal; }
.clauses ol li { padding: 2px 0; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes rp { 0%, 30% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 90%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes lvl { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes ph { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes t1 { 0%, 30% { box-shadow: inset 8px 0 0 var(--k); } 30.5%, 100% { box-shadow: none; } }
@keyframes t2 { 0%, 34% { box-shadow: none; } 34.5%, 62% { box-shadow: inset 8px 0 0 var(--k); } 62.5%, 100% { box-shadow: none; } }
@keyframes t3 { 0%, 67% { box-shadow: none; } 67.5%, 100% { box-shadow: inset 8px 0 0 var(--k); } }
@keyframes walkin { from { transform: translateX(60vw); } }

/* 撮影（?still・自動操作）と動きを減らす設定では、見せたい形で止める */
.still *, .still *::before { animation: none !important; transition: none !important; }
.still .mock .rp { opacity: 1; transform: scale(1.4); }
.still .vis .tl .ph i { transform: translateX(48%); }
.still .vis .tr.sp p:nth-child(2) { box-shadow: inset 8px 0 0 var(--k); }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  .mock .rp { opacity: 1; transform: scale(1.4); }
  .vis .tl .ph i { transform: translateX(48%); }
  .vis .tr.sp p:nth-child(2) { box-shadow: inset 8px 0 0 var(--k); }
  html { scroll-behavior: auto; }
}

/* 英語のページ：英字のドット体は Pixelify Sans。合字（fi）はドットが崩れるので切る。
   font: のまとめ書きは合字の設定を元に戻すので、子の要素すべてで切る（R06-01） */
.en { --dot: "Pixelify Sans", "DotGothic16", "Hiragino Sans", sans-serif; }
.en, .en * { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0, "calt" 0 !important; }
.en .plan .price small { font-size: 48px; margin: 0 4px 0 0; }
.en .badge .sep { font-style: normal; }

/* タブレット */
@media (max-width: 1100px) {
  .hero .wrap { grid-template-columns: 1fr; grid-template-areas: "t" "m" "b"; row-gap: 32px; }
  .hero .fv-t, .hero .fv-b { align-self: auto; }
  .hero .cta { margin-top: 0; }
  .mock { width: 100%; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .ben { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .step + .step::before { left: 50%; top: -34px; margin-left: -12px; border: 12px solid transparent; border-top: 16px solid var(--k); }
  .safe { grid-template-columns: repeat(2, 1fr); }
  .hd nav a.toc { display: none; }
}
/* 料金のカードが 3 枚並ばない幅 */
@media (max-width: 900px) {
  .uses .pair { grid-template-columns: 1fr; max-width: 560px; }
  .uses .one { grid-column: auto; }
  .plans.three { grid-template-columns: 1fr; max-width: 560px; }
  .plans .both { display: block; grid-column: auto; padding: 0; border-bottom: 0; }
  .plans .both::before, .plans .both::after { display: none; }
  .plans .both .its { display: block; margin-top: 8px; }
  .plans .both .it { display: block; white-space: normal; padding: 2px 0 2px 22px; text-indent: -22px; }
  .plans .both .it::before { display: inline-block; width: 16px; margin-right: 6px; text-indent: 0; }
  .plans .both small { display: block; margin-top: 4px; }
  .plans.three .plan { grid-row: auto; }
}
/* スマホ */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .hd .wrap { height: 56px; }
  .brand img { width: 28px; height: 28px; }
  .hd nav { gap: 16px; }
  .hd .btn .pc { display: none; }
  .hero { padding: 40px 0 56px; }
  .hero .sub { font-size: 15px; }
  .hero .cta .btn { width: 100%; min-width: 0; }
  .mock { box-shadow: 6px 6px 0 var(--k); }
  .mock .body { padding: 16px; }
  .mock .cam { width: 76px; height: 76px; bottom: 50px; right: 12px; }
  .mock .keys { right: 12px; top: 12px; }
  .mock .keys b { min-width: 28px; height: 28px; line-height: 28px; }
  .mock .row:nth-child(3) { display: none; }
  .mock .field { margin-top: 8px; }
  .mock .send { left: 16px; top: 120px; }
  .mock .rp, .mock .cur { left: 90px; top: 140px; }
  .mock .cap { bottom: 8px; }
  .mock .out { padding: 8px 12px; gap: 6px; flex-wrap: wrap; } .mock .out span { padding: 0 8px; } .mock .out small:not(.t) { display: none; }
  .mock .lbl.l1 { left: 112px !important; top: 128px !important; }
  .mock .lbl.l2 { right: 12px !important; top: 46px !important; }
  .mock .lbl.l3 { right: 12px !important; bottom: 12px !important; }
  .mock .cap { left: 16px; transform: none; }
  .uses .card { padding: 16px; box-shadow: 4px 4px 0 var(--y); }
  .use .fm { grid-template-columns: 1fr; }
  .use .fm .tx { border-right: 0; border-bottom: 2px solid var(--k); }
  .use .fv .scr { padding: 16px; }
  .use .fv .bt { left: 16px; }
  .use .fv .rp { left: 78px; }
  .use .fv .ky { right: 16px; }
  .use .fv .cm { right: 16px; width: 68px; height: 68px; }
  .use .fv .cc { left: 16px; font-size: 16px; }
  .strip ul { grid-template-columns: 1fr 1fr; }
  .strip li:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip li { border-top: 1px solid rgba(255, 206, 0, .3); }
  .sec { padding: 72px 0; }
  .pains, .safe, .plans { grid-template-columns: 1fr; gap: 20px; }
  .grid { grid-template-columns: 1fr; }
  .ben { margin-top: 56px; }
  .vis { padding: 20px; min-height: 0; }
  .vis .mt { grid-template-columns: 1fr; gap: 8px; }
  .vis .tl { grid-template-columns: 64px 1fr; column-gap: 12px; }
  .vis .ovl { grid-template-columns: 1fr; }
  .vis .ovl div { min-height: 0; }
  .plan { padding: 28px 24px 32px; }
  .plan.pro h3 { margin: -28px -24px 0; padding: 12px 24px; }
  .plans.three .plan { padding: 28px 24px 32px; }
  .plans.three .plan.pro h3 { margin: -28px -24px 0; padding: 12px 24px; }
  .vs { font-size: 15px; }
  .mx { margin-top: 40px; } .mx th.f, .mx tbody th { width: 34%; } .mx td, .mx thead th:nth-child(n+2) { width: 22%; }
  .mx tbody th { padding: 8px 6px; font-size: 12px; } .mx tbody td { padding: 8px 4px; } .mx thead th { padding: 12px 4px; } .mx thead .nm { font-size: 14px; } .mx thead .p { font-size: 16px; }
  .mx tbody tr.g th { padding: 16px 8px 6px; font-size: 13px; } .mx tbody tr.g.up th { padding: 10px 8px; }
  .mx tfoot td { padding: 12px 4px 16px; } .mx tfoot .btn { font-size: 12px; min-height: 40px; padding: 0 4px; }
  .plans-h { margin-top: 48px; font-size: 18px; }
  .cmp.ai2 { margin-top: 48px; } .cmp.ai2 td, .cmp.ai2 thead th:nth-child(n+2) { width: 34%; }
  .cmp caption { font-size: 15px; }
  .cmp { font-size: 13px; }
  .cmp th, .cmp td { padding: 8px 8px; }
  .cmp td { font-size: 13px; }
  h2 .kbd { font-size: 16px; vertical-align: .3em; }
  .perm th { width: 42%; }
  .faq summary { font-size: 16px; padding-left: 16px; }
  .faq .a { padding: 0 16px 16px; }
  .faq .faq-g { padding: 20px 16px 8px; }
  .final { padding-top: 72px; }
  .final .cta .btn { width: 100%; }
  .final .stage { height: 160px; }
  .final .rex { width: 128px; height: 128px; left: calc(50% - 64px); }
  .bar { display: flex; }
  .en .badge .sep { display: block; height: 0; overflow: hidden; }
  body:has(.bar) .ft { padding-bottom: 96px; }
  .ft .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kv th { width: 38%; }
  .doc { padding-top: 24px; }
}
/* 360px 前後の電話: できること × プランの表を幅に収める（11-04） */
@media (max-width: 389px) {
  /* 320px 前後の小さい端末：ヘッダー・最後の見出し・料金の表を詰める（夜のテストで見つけたはみ出し） */
  .hd .wrap { gap: 8px; } .hd nav { gap: 8px; } .hd nav .btn.sm { padding: 0 10px; }
  .brand { font-size: 28px; gap: 6px; }
  .final h2 { font-size: 34px; }
}
@media (max-width: 349px) {
  .mx th.f, .mx tbody th { width: 30%; } .mx td, .mx thead th:nth-child(n+2) { width: 23.3%; }
  .mx tbody th { padding: 8px 4px; font-size: 11px; } .mx tbody td { padding: 8px 2px; font-size: 11px; }
  .mx thead th { padding: 10px 2px; } .mx thead .nm { font-size: 12px; } .mx thead .p { font-size: 14px; } .mx thead th > small { font-size: 10px; }
  .mx tfoot td { padding: 12px 2px 16px; } .mx tfoot .btn { font-size: 11px; padding: 0 2px; }
  .mx tbody th { padding: 8px 4px; } .mx tbody td { font-size: 12px; } .mx thead .p { white-space: normal; word-break: normal; }
}

@media (max-width: 369px) {
  .mock .cap { display: none; }
}