/* 公式サイト（/、/privacy/、/terms/、/tokushoho/）の見た目。アプリと同じ変数と書体を使う。
   読む順は <link> で tokens.css → base.css → site.css（@import は使わない。base.css の方針）。
   方針：白地（紙の色 --c-bg）、静か、装飾は置かない。差し色はアプリと同じ藍（--c-acc）だけ。375px の幅で読める。
   寸法は rem。暗い配色は tokens.css の設定にそのまま従う。 */

/* ---- 骨 ---- */
body{line-height:1.8;hanging-punctuation:allow-end}
.wrap{max-width:40rem;margin:0 auto;padding:0 var(--s-4)}
p,li,dd,td{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---- 上の帯（作品名と頁内の行き先） ---- */
.bar{border-bottom:var(--bw) solid var(--c-line);background:var(--c-bg)}
.bar .wrap{display:flex;align-items:center;gap:var(--s-3);min-height:var(--hdr-h);flex-wrap:wrap;padding-top:var(--safe-t)}
.bar .brand{font-weight:700;letter-spacing:.06em;color:var(--c-ink);text-decoration:none;white-space:nowrap}
.bar nav{margin-left:auto;display:flex;gap:var(--s-1);flex-wrap:wrap}
.bar nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-2);font-size:var(--t-sm);color:var(--c-ink-2);text-decoration:none;border-radius:var(--r-s)}
.bar nav a:hover{color:var(--c-ink);background:var(--c-surface-2)}

/* ---- 頭（分野の字、作品名、説明の 1 文、体験版へのボタン） ---- */
.hero{padding-top:var(--s-7);padding-bottom:var(--s-6)}
.hero .field{font-size:var(--t-sm);font-weight:500;color:var(--c-acc-text);letter-spacing:.04em}
.hero h1{margin-top:var(--s-2);font-size:var(--t-hero);line-height:1.2;letter-spacing:.04em}
.hero .desc{margin-top:var(--s-4);font-size:var(--t-lead);font-weight:500;line-height:1.5;max-width:28em}
.hero .cta{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.hero .cta .sub{font-size:var(--t-sm);color:var(--c-ink-3)}
.hero .trust{margin-top:var(--s-4);font-size:var(--t-sm);color:var(--c-ink-3)}
/* CSP は style-src 'self' なので、頁の中に style 属性と <style> を書かない。見た目はすべてこのファイルに置く */

/* ボタン（主：藍の塗り。副：線だけ） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-5);border-radius:var(--r-m);border:var(--bw) solid var(--c-line-strong);font-weight:500;font-size:var(--t-body);background:var(--c-surface);color:var(--c-ink);text-decoration:none;transition:background var(--d-1)}
.btn:hover{background:var(--c-surface-2);text-decoration:none}
.btn.pri{background:var(--c-acc);color:var(--c-acc-ink);border-color:var(--c-acc)}
.btn.pri:hover{filter:brightness(1.08);background:var(--c-acc)}
@media (max-width:26rem){.hero .cta .btn{width:100%}}

/* ---- 段（1 段 1 つの話） ---- */
main>section{padding:var(--s-6) 0;border-top:var(--bw) solid var(--c-line);scroll-margin-top:var(--s-4)}
main>section>h2{font-size:var(--t-lead)}
main>section>h2::after{content:"";display:block;width:2rem;height:2px;margin-top:var(--s-2);background:var(--c-acc);border-radius:1px}
.lead{margin-top:var(--s-3);font-size:var(--t-body);max-width:34em}
.note{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--c-ink-2);max-width:34em}
.src{margin-top:var(--s-3);font-size:var(--t-cap);color:var(--c-ink-3);line-height:1.7}
.src a{color:inherit}
.more{margin-top:var(--s-3);font-size:var(--t-sm)}

/* 箇条書き（できること、試験の事実） */
.list{margin:var(--s-4) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-3)}
.list li{position:relative;padding-left:1.25rem;max-width:34em}
.list li::before{content:"";position:absolute;left:0;top:.75em;width:.5rem;height:.5rem;border-radius:50%;background:var(--c-acc)}
.list li b{font-weight:700}
.list li b::after{content:"：";}
.list.facts li::before{top:.8em;width:.375rem;height:.375rem;border-radius:0;background:var(--c-acc)}

/* 無料と有料（2 つの札を同じ重さで並べる。既定の選択は置かない） */
.plans{margin-top:var(--s-4);display:grid;gap:var(--s-3)}
@media (min-width:36rem){.plans{grid-template-columns:1fr 1fr}}
.plan{background:var(--c-surface);border:var(--bw) solid var(--c-line);border-radius:var(--r-l);padding:var(--s-4)}
.plan h3{font-size:var(--t-body);font-weight:700}
.plan .price{margin-top:var(--s-2);font-size:var(--t-title);font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.plan .price small{font-size:var(--t-sm);font-weight:500;color:var(--c-ink-2);margin-left:var(--s-1)}
.plan ul{margin:var(--s-3) 0 0;padding-left:1.1em;font-size:var(--t-sm);color:var(--c-ink-2)}
.plan li+li{margin-top:var(--s-1)}

/* 問い合わせ */
#contact .cta{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-2)}
.mail{margin-top:var(--s-3);font-size:var(--t-lead);font-weight:500;word-break:break-all}

/* ---- 法務の頁 ---- */
.head{padding:var(--s-6) 0 var(--s-5)}
.head .crumbs{font-size:var(--t-cap);color:var(--c-ink-3)}
.head .crumbs a{color:inherit}
.head h1{margin-top:var(--s-2);font-size:var(--t-title)}
.head .meta{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--c-ink-2)}
.head .intro{margin-top:var(--s-4);max-width:34em}
.doc section{padding:var(--s-5) 0;border-top:var(--bw) solid var(--c-line)}
.doc h2{font-size:var(--t-body);font-weight:700}
.doc h2 .n{color:var(--c-acc-text);font-weight:700;margin-right:var(--s-3);font-variant-numeric:tabular-nums}
.doc section p{margin-top:var(--s-3);max-width:36em}
.doc section ul,.doc section ol{margin:var(--s-3) 0 0;padding-left:1.25em;max-width:36em}
.doc li+li{margin-top:var(--s-1)}
.doc li::marker{color:var(--c-ink-3)}
/* 行の表（事業者、価格の欄） */
.rows{margin-top:var(--s-3);border:var(--bw) solid var(--c-line);border-radius:var(--r-m);overflow:hidden;background:var(--c-surface)}
.row{display:grid;grid-template-columns:minmax(7rem,1fr) 2.2fr;gap:var(--s-2) var(--s-4);padding:var(--s-3) var(--s-4);align-items:baseline}
.row+.row{border-top:var(--bw) solid var(--c-line)}
.row b{font-weight:700}
.row>span,.row>div{color:var(--c-ink-2)}
.row p{margin-top:var(--s-2)}
@media (max-width:30rem){.row{grid-template-columns:1fr;gap:var(--s-1)}}

/* ---- 足元（20_rules 4 の順：銘、方針の 3 点、法的な 3 つ、リンクの組、署名） ---- */
.foot{margin-top:var(--s-7);padding:var(--s-6) 0 calc(var(--s-7) + var(--safe-b));border-top:var(--bw) solid var(--c-line);font-size:var(--t-sm);color:var(--c-ink-2);background:var(--c-surface)}
.foot .mark{display:inline-flex;flex-direction:column;gap:var(--s-1);color:var(--c-ink);text-decoration:none}
.foot .mark small{font-size:var(--t-cap);color:var(--c-ink-3)}
.foot .mark .name{font-weight:700;font-size:var(--t-lead);letter-spacing:.06em}
.foot .pol{margin-top:var(--s-4);max-width:36em}
.foot .legal{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:0 var(--s-4);font-size:var(--t-cap)}
.foot .legal a{display:inline-flex;align-items:center;min-height:2.25rem;color:inherit}
.foot .grps{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:var(--s-4);margin-top:var(--s-4);padding-top:var(--s-4);border-top:var(--bw) solid var(--c-line)}
.foot .grps p{margin:0 0 var(--s-1);font-size:var(--t-cap);font-weight:500;color:var(--c-ink-3)}
.foot .grps ul{list-style:none;margin:0;padding:0}
.foot .grps a{display:block;padding:var(--s-2) 0;color:var(--c-ink);text-decoration:none;line-height:1.4}
.foot .grps a small{display:block;font-size:var(--t-cap);color:var(--c-ink-3)}
.foot .grps a:hover{color:var(--c-acc-text);text-decoration:underline}
.foot .sig{margin-top:var(--s-5);font-size:var(--t-cap);color:var(--c-ink-3)}
.foot .sig a{color:inherit}
/* 表（特商法の表記） */
.doc table.kv{width:100%;border-collapse:collapse;margin:var(--s-3) 0;font-size:var(--t-sm)}
.doc table.kv th,.doc table.kv td{text-align:left;vertical-align:top;padding:var(--s-2) var(--s-3);border-bottom:var(--bw) solid var(--c-line)}
.doc table.kv th{width:30%;font-weight:500;color:var(--c-ink-2)}
@media (max-width:30rem){.doc table.kv th,.doc table.kv td{display:block;width:auto;padding:var(--s-1) 0}.doc table.kv th{padding-top:var(--s-3);border-bottom:0}}
.foot .legal-note{margin-top:var(--s-3);font-size:var(--t-cap);color:var(--c-ink-3)}
.hero .mark{display:block;width:4.5rem;height:4.5rem;margin-bottom:var(--s-4);border-radius:1rem}