/* ホンいく 共通スタイル（デザインシステム準拠：地の上に白いタイルを積む弁当箱） */
:root{
  --ground:#f1f3f6; --surface:#ffffff; --surface-sunk:#e3e6eb; --line:#e3e6eb;
  --ink:#15171c; --ink-muted:#5a606b;
  --accent:#ff3d7f; --accent-strong:#d6215f; --on-accent:#ffffff; --accent-soft:#ffe3ec; --accent-ink:#b0164b;
  --memo:#2b59ff; --memo-soft:#e1e8ff; --inverse-surface:#15171c; --inverse-ink:#ffffff; --inverse-muted:#b9bec8;
  --font-display:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --font-sans:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --font-hand:"Yomogi","Zen Maru Gothic",cursive;
  --radius-s:12px; --radius-m:16px; --radius-l:22px; --radius-xl:24px; --radius-pill:999px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --ground:#0f1018; --surface:#1a1c27; --surface-sunk:#262938; --line:#2c2f3f;
  --ink:#f2f0fa; --ink-muted:#a9a6c2;
  --accent:#ff6f9c; --accent-strong:#ff6f9c; --on-accent:#15171c; --accent-soft:#3a1a28; --accent-ink:#ffb3cb;
  --memo:#8fa8ff; --memo-soft:#232a45; --inverse-surface:#2a2d3d; --inverse-ink:#f2f0fa; --inverse-muted:#a9a6c2;
  color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.7}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px;border-radius:8px}
.wrap{max-width:560px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-left,0px)) 40px max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:14px}

/* ヘッダー */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;flex-direction:column;text-decoration:none}
.logo{font-family:var(--font-display);font-size:26px;line-height:1.1;letter-spacing:.02em}
.logo span{color:var(--accent)}
.tagline{font-size:11px;font-weight:700;color:var(--ink-muted)}
.head-link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:14px;background:var(--surface);font-size:13px;font-weight:900;text-decoration:none}

/* タイル */
.tile{background:var(--surface);border-radius:var(--radius-l);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile.hero{border-radius:var(--radius-xl);padding:20px;gap:12px}
.tile.dark{background:var(--inverse-surface);color:var(--inverse-ink)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
h1{margin:0;font-size:24px;line-height:1.35;font-weight:900;text-wrap:balance}
h2{margin:0;font-size:16px;font-weight:900;line-height:1.4}
h3{margin:0;font-size:14px;font-weight:900;line-height:1.4}
p{margin:0}
.eyebrow{font-size:12px;font-weight:700;color:var(--accent-strong)}
.label{font-size:11px;font-weight:700;color:var(--ink-muted);line-height:1.5}
.dark .label{color:var(--inverse-muted)}
.note{font-size:13px;color:var(--ink-muted);line-height:1.6}
.num{font-family:var(--font-display);font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.num small{font-size:.5em}
.pen{font-family:var(--font-hand);font-size:16px;color:var(--memo);transform:rotate(-1.5deg);line-height:1.5}

/* ボタン */
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;border-radius:var(--radius-m);background:var(--accent-strong);color:var(--on-accent);font-weight:900;font-size:16px;text-decoration:none;text-align:center}
.btn.sub{background:var(--surface-sunk);color:var(--ink);min-height:44px;font-size:14px}

/* チップ */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--radius-pill);background:var(--ground);font-size:13px;font-weight:700;text-decoration:none}
.tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.tag.gray{background:var(--surface-sunk);color:var(--ink-muted)}

/* キャラの吹き出し */
.say{display:flex;gap:12px;align-items:flex-end}
.face{flex:0 0 72px;width:72px;height:72px;border-radius:50%;background:var(--surface-sunk);object-fit:cover}
.bubble{flex:1;min-width:0;background:var(--surface);border-radius:18px 18px 18px 4px;padding:12px 14px;font-family:var(--font-hand);font-size:15px;line-height:1.5}
.tile .bubble{background:var(--ground)}

/* ステップ */
ol.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:s}
ol.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;font-weight:700;line-height:1.5}
ol.steps li::before{counter-increment:s;content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-family:var(--font-display);font-weight:400;display:flex;align-items:center;justify-content:center;font-size:15px}
ol.steps small{display:block;font-weight:500;font-size:12px;color:var(--ink-muted)}

/* 準備中リスト */
ul.soon{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
ul.soon li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;line-height:1.4}
ul.soon li:last-child{border-bottom:0}
ul.soon small{display:block;font-weight:500;font-size:11px;color:var(--ink-muted)}

/* 本文ページ */
.doc h2{font-size:17px}
.doc p,.doc li{font-size:14px;line-height:1.8}
.doc ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}

/* フッター */
.site-foot{display:flex;flex-direction:column;gap:10px;padding:8px 2px 0;font-size:11px;color:var(--ink-muted);line-height:1.6}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.site-foot nav a{display:inline-flex;align-items:center;min-height:32px;font-weight:700;color:var(--ink-muted)}