/* ============================================================
   紺紙金泥 — 本ページ src/index.css と共通の紺・金・蘭紫
   色はすべてここで定義し、以降の規則ではトークンだけを使う
   ============================================================ */
:root{
  color-scheme: dark;
  /* 地 */
  --ink-ground:#0E1526; --ink-deep:#0A101E; --ink-raised:#16203A; --ink-line:#2A3A5C;
  --line-soft:rgba(42,58,92,.6);
  --panel:rgba(22,32,58,.74); --panel-strong:rgba(28,40,70,.9); --panel-deep:rgba(10,16,30,.5);
  --head-bg:rgba(14,21,38,.84); --dock-bg:rgba(10,16,30,.94);
  --veil-from:rgba(22,32,58,0); --veil-to:rgba(22,32,58,.94);
  /* 金 */
  --gold:#C9A86A; --gold-pale:#E8D5A4;
  --gold-dim:rgba(201,168,106,.38); --gold-glow:rgba(201,168,106,.08);
  /* 操作は蘭紫、星図と罫線は金。本ページの現行トークンに合わせる。 */
  --main-orchid:#BA55D3; --main-orchid-pale:#D8A9E8; --main-orchid-dim:rgba(186,85,211,.38);
  --action-orchid:#9840B0; --action-orchid-hover:#A346C0;
  --orchid-hover:rgba(186,85,211,.08); --orchid-halo:rgba(186,85,211,.09); --action-shadow:rgba(186,85,211,.25);
  --tick:rgba(201,168,106,.28); --tick-fine:rgba(201,168,106,.16);
  --asp-soft:rgba(232,213,164,.5); --asp-hard:rgba(186,85,211,.62);
  /* 文字 */
  --text:#F2EFE6; --text-soft:#9BA3B8;
  /* エラーは意味色として朱を保つ。 */
  --cta-text:#FBF6EA; --err:#D96A5F;
  /* 紙(表紙の額) */
  --paper:#F3ECDD; --paper-ink:#1E2740;
  --shadow:rgba(0,0,0,.75); --shadow-soft:rgba(0,0,0,.4); --spine:rgba(0,0,0,.28);
  /* 星空 */
  --star-far:#C6D0EA; --star-mid:#F2EFE6; --star-near:#E8D5A4; --band:rgba(201,180,150,.045);
  /* 型 */
  --radius:6px; --ease:cubic-bezier(.22,.61,.36,1);
  --f-display:"Shippori Mincho B1","Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --f-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-latin:"Cormorant Garamond","Times New Roman",serif;
  --gutter:clamp(16px,4vw,40px);
  --measure:34em;
  /* 文字サイズの 11 段 */
  --t-12:12px; --t-13:13px; --t-14:14px; --t-15:15px; --t-16:16px; --t-18:18px; --t-21:21px; --t-26:26px; --t-32:32px; --t-40:40px; --t-54:54px;
  --h2:clamp(var(--t-26),3.2vw,var(--t-40));
  --h2-final:clamp(var(--t-26),4.2vw,var(--t-54));
  /* 余白の濃淡 */
  --sp-section:clamp(56px,8vw,96px); --sp-deep:clamp(64px,9vw,112px); --sp-tight:clamp(48px,6vw,72px);
  --sp-head:clamp(28px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink-ground);color:var(--text);font-family:var(--f-body);font-size:var(--t-16);line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@supports (text-autospace:normal){body{text-autospace:normal}}
img,svg{max-width:100%}
a{color:var(--main-orchid-pale)}
:focus-visible{outline:2px solid var(--main-orchid);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
budoux-ja{display:inline}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;flex:none}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page{position:relative;z-index:1}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}

/* 和文組版:見出しは詰め組み、行頭の約物は詰める、単語の途中では折らない */
.disp{font-family:var(--f-display);font-weight:500;font-feature-settings:"palt";letter-spacing:.04em}
h1,.h2,.h3,.door q,.book figcaption b,.theme h3,.atlas-grid b,.check-flow b{word-break:keep-all;overflow-wrap:anywhere}
.nb{white-space:nowrap}
.person span{word-break:keep-all}
@supports (text-spacing-trim:space-first){h1,.h2,.door q,.sample blockquote,.lead{text-spacing-trim:space-first}}
@supports (text-wrap:pretty){.lead,.theme p,.door p,.flow p,.faq .a p{text-wrap:pretty}}

/* ヘッダー */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--head-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;flex-direction:column;line-height:1.25;text-decoration:none;color:var(--text)}
.brand b{font-size:var(--t-18);letter-spacing:.12em;white-space:nowrap}
.brand small{font-family:var(--f-latin);font-style:italic;color:var(--main-orchid-pale);font-size:var(--t-12);letter-spacing:.14em}
.head-nav{display:flex;align-items:center;gap:22px;font-size:var(--t-13)}
.head-nav a{color:var(--text-soft);text-decoration:none;white-space:nowrap}
.head-nav a:hover{color:var(--main-orchid-pale)}
@media (max-width:980px){.head-nav a:not(.btn){display:none}}

/* ボタン(本ページと同じ蘭紫を主操作に使う) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:inherit;font-weight:700;letter-spacing:.08em;text-decoration:none;cursor:pointer;border-radius:var(--radius);border:1px solid transparent;padding:.9em 1.6em;white-space:nowrap;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn-action{background:var(--action-orchid);color:var(--cta-text);box-shadow:0 6px 22px var(--action-shadow)}
.btn-action:hover{background:var(--action-orchid-hover);color:var(--cta-text)}
.btn-action:active{transform:translateY(1px)}
.btn-line{background:transparent;color:var(--main-orchid-pale);border-color:var(--main-orchid-dim)}
.btn-line:hover{border-color:var(--main-orchid);color:var(--text)}
.btn-sm{padding:.55em 1.1em;font-size:var(--t-13)}
.btn small{display:block;font-weight:400;font-size:var(--t-12);letter-spacing:.12em;opacity:.85}
.btn-stack{flex-direction:column;gap:2px;line-height:1.4}

/* 見出しの型 */
.eyebrow{font-family:var(--f-body);font-weight:500;color:var(--main-orchid-pale);font-size:var(--t-12);letter-spacing:.2em;text-transform:uppercase;margin:0}
.h2{font-size:var(--h2);line-height:1.5;margin:.3em 0 .5em;text-wrap:balance}
.h3{font-size:var(--t-18);letter-spacing:.08em;margin:0}
.lead{color:var(--text-soft);max-width:var(--measure);margin:0}
.lead + .lead{margin-top:.8em}
.section{padding-block:var(--sp-section);border-top:1px solid var(--ink-line)}
.section.deep{padding-block:var(--sp-deep)}
.section.tight{padding-block:var(--sp-tight)}
.section-head{display:grid;gap:4px;margin-bottom:var(--sp-head)}
.panel{background:var(--panel);border:1px solid var(--ink-line);border-radius:var(--radius)}
.fine{font-size:var(--t-12);color:var(--text-soft);margin:12px 0 0;line-height:1.7}

/* ===== ヒーロー ===== */
.hero{padding-block:clamp(24px,3vw,48px) clamp(36px,4vw,64px);overflow-x:clip}
.hero-grid{display:grid;max-width:760px;grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "top" "rest";row-gap:clamp(16px,2.6vw,28px)}
.hero-top{grid-area:top;text-align:center}
.hero-rest{grid-area:rest;text-align:center}
.hero-chart{scroll-margin-top:96px;grid-area:chart;align-self:center;position:relative;display:grid;justify-items:center;gap:14px}
.hero h1{font-size:clamp(var(--t-26),5vw,var(--t-40));line-height:1.6;letter-spacing:.03em;margin:.35em 0 0}
@media (max-width:480px){.hero h1{font-size:clamp(21px,6.5vw,25px)}}
.hero h1 .en{display:block;font-family:var(--f-body);font-style:normal;font-weight:400;font-size:var(--t-14);letter-spacing:.02em;color:var(--text-soft);margin-top:1em;font-feature-settings:normal}
.hero .lead{font-size:var(--t-16);margin-inline:auto}
.proofs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.proofs li{font-size:var(--t-12);letter-spacing:.06em;border:1px solid var(--gold-dim);border-radius:999px;padding:3px 12px;color:var(--gold-pale)}
.wheel-frame{position:relative;isolation:isolate;width:min(100%,400px);aspect-ratio:1;transition:width .6s var(--ease)}
.wheel-frame::before{content:"";position:absolute;inset:-12%;z-index:-1;border-radius:50%;background:radial-gradient(circle,var(--orchid-halo) 0%,var(--gold-glow) 36%,transparent 70%);pointer-events:none}
.wheel-frame svg{width:100%;height:100%;display:block;overflow:visible}
.wheel-tip{position:absolute;z-index:2;transform:translate(-50%,-130%);background:var(--panel-strong);border:1px solid var(--gold-dim);border-radius:4px;padding:4px 10px;font-size:var(--t-13);white-space:nowrap;pointer-events:none;color:var(--text);box-shadow:0 8px 24px -10px var(--shadow)}
.wheel-tip b{color:var(--gold-pale);font-weight:500}
.wheel-caption{font-size:var(--t-13);color:var(--text-soft);text-align:center;margin:0;min-height:1.9em}
.wheel-caption b{color:var(--gold-pale);font-weight:500}
@media (max-width:900px){
  .hero-grid{grid-template-areas:"chart" "top" "rest"}
  .hero-chart{margin-block:0}
  .wheel-frame{width:min(76vw,400px)}
  .hero.drawn .wheel-frame{width:min(100%,400px)}
}

.ask{max-width:640px;margin:28px auto 0;text-align:left;background:var(--panel);border:1px solid var(--ink-line);border-radius:var(--radius);padding:clamp(18px,3vw,26px)}
.ask legend{font-family:var(--f-display);font-weight:600;font-size:var(--t-18);letter-spacing:.08em;padding:0;margin-bottom:14px}
.ask fieldset{border:0;margin:0;padding:0;min-width:0}
.fields{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}
.fields.time{grid-template-columns:1fr 1fr;margin-top:10px}
.field{display:grid;gap:4px}
.field label{font-size:var(--t-12);letter-spacing:.14em;color:var(--text-soft)}
.field input{width:100%;font:inherit;font-size:var(--t-16);color:var(--text);background:var(--ink-deep);border:1px solid var(--ink-line);border-radius:4px;padding:.55em .7em;text-align:center}
.field input:focus{border-color:var(--main-orchid);outline:none;box-shadow:0 0 0 3px var(--main-orchid-dim)}
.field input:disabled{opacity:.4}
.check{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:var(--t-14);color:var(--text-soft);cursor:pointer}
.check input{accent-color:var(--main-orchid);width:16px;height:16px}
.ask-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px}
.ask-note{font-size:var(--t-12);color:var(--text-soft);line-height:1.7;margin:12px 0 0}
.form-error{color:var(--err);font-size:var(--t-13);margin:10px 0 0}

/* ===== あなたの空 ===== */
.facts-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.facts-grid{grid-template-columns:minmax(0,1fr)}}
.bodies{list-style:none;margin:0;padding:6px 0}
.body-row{border-bottom:1px solid var(--ink-line)}
.body-row:last-child{border-bottom:0}
.chip{width:100%;display:grid;grid-template-columns:2.2em 5.2em 1fr auto;align-items:center;gap:10px;font:inherit;color:var(--text);background:transparent;border:0;padding:11px 18px;text-align:left;cursor:pointer}
.chip:hover{background:var(--orchid-hover)}
.chip .g{width:1.35em;height:1.35em;color:var(--gold);justify-self:center;stroke-width:1.6}
.chip .p{color:var(--text-soft);font-size:var(--t-14)}
.chip .s{font-family:var(--f-display);font-weight:600;font-size:var(--t-16);letter-spacing:.06em}
.chip .d{font-size:var(--t-14);color:var(--gold-pale)}
.reveal-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--ease)}
.reveal-wrap.open{grid-template-rows:1fr}
.reveal{min-height:0;overflow:hidden;padding:0 18px;display:grid;gap:12px;margin:0;opacity:0;transition:opacity .2s var(--ease),padding .24s var(--ease)}
.reveal-wrap.open .reveal{opacity:1;padding:4px 18px 18px}
.layer{display:grid;grid-template-columns:3.4em 1fr;gap:12px;font-size:var(--t-14);line-height:1.85}
.layer dt{font-family:var(--f-display);font-weight:600;color:var(--gold);letter-spacing:.2em;padding-top:1px}
.layer dd{margin:0;color:var(--text)}
.layer dd .note{display:block;color:var(--text-soft);font-size:var(--t-12);margin-top:4px}
.panel-foot{padding:12px 18px;border-top:1px solid var(--ink-line);font-size:var(--t-12);color:var(--text-soft);line-height:1.7}
.balance{padding:20px 22px}
.balance .h3,.teaser .h3{margin-bottom:14px}
.el-row{display:grid;grid-template-columns:3em 1fr 2em;align-items:center;gap:12px;font-size:var(--t-14);margin-top:8px}
.el-bar{height:6px;background:var(--ink-deep);border-radius:3px;overflow:hidden}
.el-bar i{display:block;height:100%;background:var(--gold);border-radius:3px;width:0;transition:width .9s var(--ease)}
.el-row.top .el-bar i{background:var(--gold-pale)}
.balance p{font-size:var(--t-14);color:var(--text-soft);margin:14px 0 0}
.balance p b{color:var(--text);font-weight:500}
.teaser{margin-top:18px;padding:22px}
.teaser .kicker{font-size:var(--t-12);letter-spacing:.16em;color:var(--gold)}
.veil{position:relative;margin:12px 0 18px;padding:14px 0;border-block:1px solid var(--ink-line)}
.veil p{margin:0 0 .6em;color:var(--text-soft);filter:blur(5px);user-select:none;font-size:var(--t-14)}
.veil::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--veil-from) 20%,var(--veil-to) 100%)}
.veil-label{position:absolute;left:0;right:0;bottom:12px;text-align:center;z-index:1;font-family:var(--f-display);font-weight:600;color:var(--gold-pale);letter-spacing:.14em;font-size:var(--t-15)}

/* ===== 売り:共通の二段組 ===== */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.feature.flip > :first-child{order:2}
@media (max-width:900px){.feature,.feature.flip{grid-template-columns:minmax(0,1fr)}.feature.flip > :first-child{order:0}}
.facts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.facts li{display:grid;grid-template-columns:4.6em 1fr;gap:14px;align-items:baseline;border-top:1px solid var(--ink-line);padding-top:14px}
.facts .big{font-family:var(--f-display);font-weight:600;font-size:var(--t-32);line-height:1;color:var(--gold-pale);letter-spacing:.02em}
.facts .big small{font-size:var(--t-14);margin-left:2px;color:var(--gold)}
.facts p{margin:0;font-size:var(--t-14);color:var(--text-soft);line-height:1.8}
.facts p b{color:var(--text);font-weight:500}

/* パーソナライズ:人と地図 */
.people{padding:clamp(20px,3vw,28px)}
.people .h3,.atlas .h3{margin-bottom:4px}
.people .sub,.atlas .sub{font-size:var(--t-13);color:var(--text-soft);margin:0 0 16px}
.person{display:grid;grid-template-columns:2.6em 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--ink-line)}
.person .av{width:2.4em;height:2.4em;border-radius:50%;border:1px solid var(--gold-dim);display:grid;place-items:center;color:var(--gold)}
.person .av .ico{width:1.25em;height:1.25em}
.person b{font-weight:500;font-size:var(--t-15);display:block;line-height:1.4}
.person span{font-size:var(--t-12);color:var(--text-soft)}
.person em{font-style:normal;font-size:var(--t-12);letter-spacing:.1em;color:var(--gold-pale);border:1px solid var(--gold-dim);border-radius:999px;padding:1px 9px;white-space:nowrap}
.atlas{margin-top:16px;padding:clamp(20px,3vw,28px)}
.atlas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.atlas-grid{grid-template-columns:1fr}}
.atlas-grid div{border:1px solid var(--ink-line);border-radius:4px;padding:12px 14px;background:var(--panel-deep)}
.atlas-grid b{display:block;font-family:var(--f-display);font-weight:600;font-size:var(--t-15);letter-spacing:.06em}
.atlas-grid span{font-size:var(--t-12);color:var(--text-soft);line-height:1.7;display:block;margin-top:2px}
.atlas-grid small{font-family:var(--f-latin);font-style:italic;color:var(--gold);font-size:var(--t-12);letter-spacing:.1em}

/* 鑑定書:装丁の棚(表紙はアプリで実際に発行したPDFの1ページ目) */
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.8vw,20px);align-items:start;margin-top:8px}
.book{margin:0;display:grid;gap:10px}
.cover{position:relative;aspect-ratio:480/679;background:var(--paper);border-radius:2px 4px 4px 2px;overflow:hidden;box-shadow:0 22px 44px -20px var(--shadow),0 2px 6px -2px var(--shadow-soft);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cover::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(90deg,var(--spine),transparent);z-index:1}
.cover::after{content:"";position:absolute;inset:0;border:1px solid var(--shadow-soft);border-radius:inherit;pointer-events:none;mix-blend-mode:multiply;opacity:.35}
.cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.book:hover .cover{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 30px 50px -22px var(--shadow),0 2px 6px -2px var(--shadow-soft)}
.book figcaption{font-size:var(--t-12);line-height:1.6}
.book figcaption b{display:block;font-family:var(--f-display);font-weight:600;font-size:var(--t-14);letter-spacing:.06em;font-feature-settings:"palt"}
.book figcaption span{color:var(--text-soft);font-size:var(--t-12)}
@media (max-width:900px){
  .shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:14px;margin-inline:calc(-1*var(--gutter));padding:12px var(--gutter) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .shelf::-webkit-scrollbar{display:none}
  .book{flex:0 0 min(58%,240px);scroll-snap-align:start}
}
.book-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(24px,3.5vw,36px);border-top:1px solid var(--gold-dim)}
@media (max-width:760px){.book-points{grid-template-columns:1fr}}
.book-points div{padding:18px 4px 20px;border-bottom:1px solid var(--ink-line)}
.book-points div:nth-child(odd){padding-right:24px}
.book-points div:nth-child(even){padding-left:24px;border-left:1px solid var(--ink-line)}
@media (max-width:760px){.book-points div:nth-child(even){padding-left:4px;border-left:0}.book-points div:nth-child(odd){padding-right:4px}}
.book-points .h3{font-size:var(--t-16);letter-spacing:.06em;margin-bottom:4px}
.book-points p{margin:0;font-size:var(--t-14);color:var(--text-soft)}

/* 厳密さ:仕様書 */
.spec{border-top:1px solid var(--gold);margin:0}
.spec div{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:14px 2px;border-bottom:1px solid var(--ink-line)}
@media (max-width:540px){.spec div{grid-template-columns:1fr;gap:2px}}
.spec dt{font-size:var(--t-12);letter-spacing:.12em;color:var(--gold);padding-top:3px}
.spec dd{margin:0;font-size:var(--t-15)}
.spec dd small{display:block;font-size:var(--t-12);color:var(--text-soft);margin-top:2px;line-height:1.7}
.check-flow{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}
.check-flow li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--ink-line);font-size:var(--t-14)}
.check-flow li:last-child{border-bottom:1px solid var(--ink-line)}
.check-flow .ico{color:var(--gold);width:1.4em;height:1.4em;margin-top:.25em}
.check-flow b{font-weight:500}
.check-flow span{display:block;color:var(--text-soft);font-size:var(--t-13)}

/* 生成例 */
.sample{padding:clamp(20px,3vw,30px)}
.sample .meta{font-size:var(--t-12);color:var(--text-soft);letter-spacing:.04em;margin:0 0 14px;line-height:1.7}
.sample .chapter{font-size:var(--t-12);letter-spacing:.16em;color:var(--gold);margin:0}
.sample .h3{font-size:var(--t-21);margin:4px 0 14px}
.sample blockquote{margin:0;font-size:var(--t-16);line-height:2;border-left:1px solid var(--gold-dim);padding-left:18px}
.sample blockquote p{margin:0 0 .8em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-13);border:1px solid var(--gold-dim);border-radius:999px;padding:3px 12px;color:var(--gold-pale)}
.tag .ico{color:var(--gold)}

/* テーマ(タブ) */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tab{font:inherit;font-size:var(--t-14);letter-spacing:.08em;color:var(--text-soft);background:transparent;border:1px solid var(--ink-line);border-radius:999px;padding:.45em 1.1em;cursor:pointer}
.tab[aria-selected="true"]{color:var(--cta-text);background:var(--action-orchid);border-color:var(--main-orchid)}
.tab .n{font-variant-numeric:tabular-nums;margin-left:.4em;opacity:.8}
.themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.themes{grid-template-columns:1fr}}
.theme{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;background:var(--panel);border:1px solid var(--ink-line);border-radius:var(--radius);transition:border-color .3s var(--ease)}
.theme:hover{border-color:var(--main-orchid-dim)}
.theme .no{font-family:var(--f-latin);font-style:italic;color:var(--gold);font-size:var(--t-14);letter-spacing:.1em}
.theme h3{font-family:var(--f-display);font-weight:600;font-feature-settings:"palt";font-size:var(--t-16);line-height:1.55;letter-spacing:.05em;margin:0;text-wrap:balance}
.theme p{margin:0;font-size:var(--t-13);color:var(--text-soft);line-height:1.8}
.theme .go{margin-top:auto;padding-top:6px;font-size:var(--t-13);color:var(--main-orchid-pale);text-decoration:none;letter-spacing:.06em}
.theme .go:hover{color:var(--text)}
.tab-note{font-size:var(--t-12);color:var(--text-soft);margin:16px 0 0}

/* 入口 */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--gold-dim)}
@media (max-width:1000px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.doors{grid-template-columns:1fr}}
.door{padding:22px 20px 24px;border-bottom:1px solid var(--ink-line);display:grid;gap:8px;align-content:start}
.door+.door{border-left:1px solid var(--ink-line)}
@media (max-width:1000px){.door:nth-child(3){border-left:0}}
@media (max-width:540px){.door+.door{border-left:0}}
.door q{font-family:var(--f-display);font-weight:600;font-feature-settings:"palt";font-size:var(--t-16);line-height:1.6;letter-spacing:.04em;quotes:"「" "」"}
.door p{margin:0;font-size:var(--t-14);color:var(--text-soft)}
.door a{font-size:var(--t-13);color:var(--main-orchid-pale);text-decoration:none}

/* 流れ */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:fl}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.flow{grid-template-columns:1fr}}
.flow li{padding:22px 20px 24px;border-top:1px solid var(--gold-dim)}
.flow li::before{counter-increment:fl;content:"STEP " counter(fl);display:block;font-family:var(--f-latin);font-style:italic;color:var(--gold);letter-spacing:.14em;font-size:var(--t-14);margin-bottom:6px}
.flow .h3{font-size:var(--t-16);letter-spacing:.05em;margin-bottom:6px}
.flow p{margin:0;font-size:var(--t-14);color:var(--text-soft);line-height:1.8}
.pill{display:inline-block;margin-top:10px;font-size:var(--t-12);letter-spacing:.1em;border:1px solid var(--gold-dim);border-radius:999px;padding:2px 10px;color:var(--gold-pale)}
.callout{margin-top:24px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:20px 22px;border:1px solid var(--gold-dim);border-radius:var(--radius);background:var(--panel)}
.callout .ico{width:1.6em;height:1.6em;color:var(--gold);margin-top:.15em}
.callout p{margin:0;font-size:var(--t-15)}
.callout p span{color:var(--text-soft);font-size:var(--t-13);display:block;margin-top:4px}

/* 料金 */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,30px);background:var(--panel);border:1px solid var(--ink-line);border-radius:var(--radius)}
.plan.featured{border-color:var(--main-orchid);background:var(--panel-strong)}
.plan .badge{position:absolute;top:-12px;left:22px;background:var(--ink-ground);border:1px solid var(--gold);color:var(--gold-pale);font-size:var(--t-12);letter-spacing:.14em;padding:2px 10px;border-radius:999px}
.plan .h3{font-size:var(--t-21)}
.plan .price{font-family:var(--f-display);font-weight:600;font-size:var(--t-40);line-height:1.2;letter-spacing:.02em}
.plan .price small{font-family:var(--f-body);font-weight:400;font-size:var(--t-13);color:var(--text-soft);letter-spacing:.06em;margin-left:6px}
.plan .per{font-size:var(--t-13);color:var(--gold-pale);margin:-8px 0 0}
.plan ul{margin:0;padding-left:1.1em;font-size:var(--t-14);line-height:1.85;display:grid;gap:4px}
.plan ul li::marker{color:var(--gold)}
.plan .btn{margin-top:auto}
.campaign{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:16px 20px;border:1px dashed var(--gold-dim);border-radius:var(--radius)}
.campaign b{font-family:var(--f-display);font-weight:600;font-size:var(--t-18);color:var(--gold-pale);letter-spacing:.06em}
.campaign span{font-size:var(--t-13);color:var(--text-soft)}
.price-note{margin-top:18px;font-size:var(--t-12);color:var(--text-soft);line-height:1.8}

/* FAQ */
.faq{border-top:1px solid var(--gold-dim);max-width:820px}
.faq details{border-bottom:1px solid var(--ink-line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1.6em 1fr 1.2em;gap:10px;align-items:baseline;padding:18px 4px;font-family:var(--f-display);font-weight:600;font-feature-settings:"palt";font-size:var(--t-16);letter-spacing:.04em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"問";color:var(--gold);font-size:var(--t-14)}
.faq summary::after{content:"+";color:var(--gold);font-family:var(--f-body);text-align:right}
.faq details[open] summary::after{content:"−"}
.faq .a{display:grid;grid-template-columns:1.6em 1fr;gap:10px;padding:0 4px 20px;font-size:var(--t-15);color:var(--text-soft)}
.faq .a::before{content:"答";font-family:var(--f-display);font-weight:600;font-size:var(--t-14)}
.faq .a p{margin:0}

.final{text-align:center;padding-block:clamp(80px,11vw,136px)}
.final .h2{font-size:var(--h2-final)}
.final .lead{margin-inline:auto}
.final .btn{margin-top:30px}

.site-foot{border-top:1px solid var(--ink-line);padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));font-size:var(--t-12);color:var(--text-soft)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-foot a{color:var(--text-soft);text-decoration:none}
.site-foot a:hover{color:var(--main-orchid-pale)}
.site-foot button{border:0;background:none;color:var(--text-soft);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.site-foot button:hover{color:var(--main-orchid-pale)}
.analytics-choice{position:fixed;z-index:40;right:var(--gutter);bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:400px;padding:16px;background:var(--ink-raised);border:1px solid var(--ink-line);border-radius:var(--radius);box-shadow:0 4px 20px var(--shadow-soft);color:var(--text);font-size:var(--t-13);line-height:1.7}
.analytics-choice[hidden]{display:none}
.analytics-choice p{margin:0 0 12px}
.analytics-choice div{display:flex;gap:8px;flex-wrap:wrap}
.analytics-choice button{border:1px solid var(--ink-line);border-radius:var(--radius);padding:8px 12px;background:var(--panel-deep);color:var(--text);font:inherit;cursor:pointer}
.analytics-choice button:hover{border-color:var(--main-orchid)}
@media (max-width:480px){.analytics-choice{left:var(--gutter);right:var(--gutter);bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--dock-bg);border-top:1px solid var(--ink-line);display:none;gap:10px;align-items:center;transform:translateY(110%);transition:transform .35s var(--ease)}
.dock.on{transform:translateY(0)}
.dock p{margin:0;font-size:var(--t-12);color:var(--text-soft);line-height:1.5;flex:1}
.dock p b{display:block;color:var(--text);font-weight:500;font-size:var(--t-13)}
@media (max-width:760px){.dock{display:flex}.site-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
@media (max-width:380px){
  .site-head .wrap{gap:8px;padding-inline:12px}
  .brand b{font-size:var(--t-15);letter-spacing:.04em}
  .brand small{display:none}
  .site-head .btn-sm{font-size:11px;letter-spacing:.02em;padding:.55em .7em}
  .facts-grid > *,.feature > *{min-width:0}
  .chip{grid-template-columns:1.5em 4.7em minmax(0,1fr);gap:6px;padding-inline:10px}
  .chip .s{min-width:0;overflow-wrap:anywhere}
  .chip .d{grid-column:2 / -1}
  .teaser .btn{max-width:100%;white-space:normal;text-align:center}
  .person{grid-template-columns:2.6em minmax(0,1fr)}
  .person span{overflow-wrap:anywhere}
  .person em{grid-column:2;justify-self:start}
}

/* 星図(線の階層:外周 1.25 / サイン環 1 / 内周 .75 / 目盛 .5) */
.wheel .ring-out{fill:none;stroke:var(--gold);stroke-width:1.25;filter:drop-shadow(0 0 5px var(--gold-dim))}
.wheel .ring-sign{fill:none;stroke:var(--gold);stroke-width:1}
.wheel .ring-in{fill:none;stroke:var(--gold-dim);stroke-width:.75}
.wheel .tick{fill:none;stroke:var(--tick);stroke-width:.75}
.wheel .tick-fine{fill:none;stroke:var(--tick-fine);stroke-width:.5}
.wheel .cusp{stroke:var(--gold-dim);stroke-width:.75}
.wheel use{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wheel .sign{color:var(--gold)}
.wheel .planet{color:var(--gold-pale);cursor:default}
.wheel .hit{fill:transparent;stroke:none}
.wheel .pdot{fill:var(--gold)}
.wheel .asp{fill:none;stroke-width:1}
.wheel .asp.soft{stroke:var(--asp-soft)}
.wheel .asp.hard{stroke:var(--asp-hard);stroke-dasharray:3 4}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s var(--ease) forwards}
.fade{opacity:0;animation:fade .8s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.draw{animation:none;stroke-dashoffset:0}.fade{animation:none;opacity:1}.el-bar i,.theme,.cover,.reveal-wrap,.reveal,.wheel-frame{transition:none}}

/* 新版で追加した部品(色は既存トークンのみ) */
.draft-bar{margin:0;padding:8px var(--gutter);background:var(--panel-strong);border-bottom:1px solid var(--err);color:var(--text);font-size:var(--t-13);text-align:center}
.timing-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.timing-fig{margin:0;align-self:center}
.timing-fig .meta{margin:0 0 16px;font-size:var(--t-12);color:var(--text-soft)}
.tl-axis{display:flex;justify-content:space-between;margin-left:7.5em;font-size:var(--t-12);color:var(--text-soft);border-bottom:1px solid var(--ink-line);padding-bottom:6px;margin-bottom:10px}
.tl-row{display:grid;grid-template-columns:7em 1fr;gap:.5em;align-items:center;margin-bottom:12px;font-size:var(--t-13)}
.tl-row b{font-weight:500;color:var(--gold-pale)}
.tl-track{position:relative;height:18px;border-radius:9px;background:var(--panel-deep);border:1px solid var(--line-soft)}
.tl-track i{position:absolute;top:2px;bottom:2px;border-radius:7px}
.p-prep{background:var(--gold-dim)}
.p-peak{background:var(--main-orchid)}
.p-review{background:var(--tick);border:1px dashed var(--gold)}
.tl-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--t-12);color:var(--text-soft);margin-top:14px}
.tl-key i{display:inline-block;position:relative;width:18px;height:10px;border-radius:5px;margin-right:6px;vertical-align:-1px}
.themes-sub{margin:36px 0 14px;font-size:var(--t-13);letter-spacing:.14em;color:var(--gold)}
#themes .doors{margin-bottom:8px}
.plan-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:36px 0 18px;font-family:var(--f-display);font-weight:600;font-size:var(--t-18);color:var(--gold-pale);letter-spacing:.08em}
.plan-group:first-of-type{margin-top:0}
.plan-group small{font-family:var(--f-body);font-weight:400;font-size:var(--t-13);color:var(--text-soft);letter-spacing:.04em}
.plans.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.plans.four .price{font-size:var(--t-32)}
.plans.four .price small{display:block;margin-left:0}
.plans.four .plan .per{margin-top:0}
@media (max-width:1100px){.plans.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.plans.four{grid-template-columns:1fr}}
.plan .launch{margin:-8px 0 0;font-size:var(--t-12);line-height:1.7;color:var(--gold-pale)}
.plan.soon{opacity:.72}
.plan .soon-label{font-size:var(--t-18);color:var(--text-soft)}
.promise{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 12px}
.promise li{font-size:var(--t-13);border:1px solid var(--gold-dim);border-radius:999px;padding:4px 14px;color:var(--gold-pale)}

/* 2026-09-30 LIFE ATLAS concept. Existing color and type tokens are retained. */
.head-nav a.btn-action{color:var(--cta-text)}
.concept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.concept-card{padding:28px;border:1px solid var(--ink-line);border-top:2px solid var(--gold-dim);border-radius:var(--radius);background:var(--panel-deep);display:flex;flex-direction:column;gap:14px}
.concept-card .eyebrow,.concept-card p{margin:0}.concept-card p{font-size:var(--t-14);color:var(--text-soft)}
.concept-card a{font-size:var(--t-14);margin-top:auto}.concept-detail{font-size:var(--t-12);color:var(--gold-pale)}
.atlas-ribbon{margin-top:24px;border-block:1px solid var(--gold-dim);padding:24px 0;display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:10px 24px;align-items:center}
.atlas-ribbon>span{font-size:var(--t-13);color:var(--gold)}.atlas-ribbon>b{font-size:var(--t-26);color:var(--gold-pale)}.atlas-ribbon p{font-size:var(--t-14);color:var(--text-soft);margin:0}.atlas-ribbon a{font-size:var(--t-13);grid-column:3}
.free-plan{display:grid;grid-template-columns:1fr auto;gap:24px;padding:28px 32px;border-color:var(--gold-dim);align-items:center}.free-plan p{font-size:var(--t-14);max-width:44em;color:var(--text-soft)}.free-action{display:grid;gap:12px;text-align:center}.free-action>b{font-family:var(--f-display);font-size:var(--t-40);line-height:1.2}.free-action small{font-size:var(--t-12);color:var(--text-soft)}
#price .plan-group{margin-top:36px}
.plan .eyebrow{font-size:var(--t-12);margin:0}.plan .product-status{font-size:var(--t-12);color:var(--gold-pale);margin:0}.plans.four .plan{padding:24px 20px}.plan .launch{font-size:var(--t-12);line-height:1.8}.upgrade-note{font-size:var(--t-13);color:var(--text-soft);border-block:1px solid var(--ink-line);padding:18px 0;margin-top:24px}.upgrade-note summary{cursor:pointer;color:var(--gold-pale)}
.pro-plan{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;margin-top:48px;padding:clamp(24px,4vw,44px);border:1px solid var(--main-orchid-dim);border-radius:var(--radius);background:var(--panel-strong)}.pro-intro p{color:var(--text-soft);font-size:var(--t-14)}.pro-intro .price{font-family:var(--f-display);font-size:var(--t-40);color:var(--gold-pale);margin-top:26px}.pro-intro .price small{font-family:var(--f-body);font-size:var(--t-14);color:var(--text-soft);margin-left:6px}.pro-plan .facts{margin-top:0}.pro-plan .facts .big{font-size:var(--t-26)}.pro-plan .facts p b{display:block;margin-bottom:4px}.pro-example{margin-top:24px;padding-top:22px;border-top:1px solid var(--gold-dim)}.pro-example q{display:block;font-family:var(--f-display);font-size:var(--t-18);color:var(--gold-pale)}.pro-example p{font-size:var(--t-13);color:var(--text-soft)}.pro-conditions{margin-top:28px;padding:26px;border:1px solid var(--ink-line);border-radius:var(--radius)}.pro-conditions p{font-size:var(--t-13);color:var(--text-soft)}.pro-conditions .promise{margin-block:20px}
@media(max-width:900px){.concept-grid{grid-template-columns:1fr}.concept-card{padding:24px}.atlas-ribbon{grid-template-columns:1fr 1fr}.atlas-ribbon p,.atlas-ribbon a{grid-column:1/-1}.pro-plan{grid-template-columns:1fr;gap:30px}.free-plan{grid-template-columns:1fr}.free-action{justify-items:start;text-align:left}}
@media(max-width:540px){.plans.four{grid-template-columns:1fr}.atlas-ribbon{grid-template-columns:1fr}.atlas-ribbon>b{grid-column:1}.pro-conditions{padding:20px}.free-plan{padding:22px}}

.release-banner{text-align:center;background:#23314b;border-bottom:1px solid var(--gold);padding:12px 20px;color:var(--paper);font-size:13px}.release-banner strong{color:var(--gold);letter-spacing:.12em}.release-banner span{display:inline-block;margin-left:1em}.release-pill{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;align-items:center;border:1px solid var(--gold);border-radius:30px;padding:9px 22px;color:var(--gold);font-size:12px;letter-spacing:.12em;margin-bottom:22px}.release-pill span{font-weight:700;letter-spacing:.05em}.release-notice{text-align:center;background:var(--ink-raised)}.release-notice .btn{margin-top:24px}#page-privacy p{max-width:850px;line-height:1.9;color:var(--muted)}@media(max-width:600px){.release-banner span{display:block;margin:4px 0 0}}