/* ===== トークン（色・余白・文字・影の唯一の定義） ===== */
:root {
  --c-primary: #24558F;
  --c-bg: #FFFDF7;
  --c-text: #24303F;
  --line: #24303F;
  --c-card: #FFFFFF;
  --c-tint: #E8F0FA;
  --c-page: #D6E4F4;
  --c-accent: #FFC93C;
  --c-ok: #1F8F57;
  --c-ok-bg: #D9F4E3;
  --c-mute: #556173;
  --c-off: #D9DEE6;
  --c-off-line: #8791A0;
  --c-map-bg: #EAF6E4;
  --c-ng: #D64545;
  --c-ng-bg: #FFE1E1;
  --c-white: #FFFFFF;

  --c-kids: #F2B705;  --c-kids-bg: #FFF3C4;
  --c-pet: #8A5BD6;   --c-pet-bg: #EBE0FA;
  --c-health: #F26B5B; --c-health-bg: #FFE1DC;
  --c-env: #2FA866;   --c-env-bg: #D9F4E3;
  --c-energy: #2F7FE0; --c-energy-bg: #D9E8FD;
  --c-local: #F28A1E; --c-local-bg: #FFE6CC;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --r-card: 18px; --r-btn: 16px; --r-pill: 999px;
  --bw: 3px;
  --fs-s: 14px; --fs: 16px; --fs-l: 18px; --fs-xl: 24px; --fs-xxl: 34px;
  --btn-h: 52px;
  --shadow: 0 4px 0 var(--line);
  --shadow-s: 0 3px 0 var(--line);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --demobar-h: 44px;
  --phone-w: 390px;
}


[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: var(--fs); line-height: 1.6; color: var(--c-text); background: var(--c-page); overflow-wrap: anywhere; }
body.is-admin { background: var(--c-white); }
img { max-width: 100%; height: auto; }
h1 { font-size: var(--fs-xl); line-height: 1.3; margin: var(--s2) 0 var(--s3); }
h2 { font-size: var(--fs-l); margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s2); }
a { color: var(--c-primary); }
small { font-size: var(--fs-s); }
ul { list-style: none; margin: 0; padding: 0; }

/* ===== デモ操作バー ===== */
.demobar { position: sticky; top: 0; z-index: 10; height: var(--demobar-h); display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); background: var(--line); color: var(--c-white); font-size: var(--fs-s); }
.demobar .dtitle { margin-right: auto; font-weight: 700; }
.demobar a, .demobar button { font: inherit; font-weight: 700; min-height: 32px; padding: 0 var(--s3); display: inline-flex; align-items: center; color: var(--c-white); background: transparent; border: 2px solid var(--c-white); border-radius: var(--r-pill); text-decoration: none; cursor: pointer; }
.demobar a.on { background: var(--c-accent); color: var(--line); border-color: var(--c-accent); }
.demobar button { background: var(--c-health); border-color: var(--c-health); }

/* ===== ボタン ===== */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--btn-h); padding: var(--s2) var(--s4); font: inherit; font-size: var(--fs-l); font-weight: 800; text-decoration: none; text-align: center; color: var(--c-white); background: var(--c-primary); border: var(--bw) solid var(--line); border-radius: var(--r-btn); box-shadow: var(--shadow); cursor: pointer; margin: var(--s3) 0; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
.btn.sub { color: var(--c-primary); background: var(--c-white); }
.btn.accent { color: var(--line); background: var(--c-accent); }
.btn.sm { width: auto; min-height: 44px; font-size: var(--fs); margin: 0; padding: 0 var(--s3); box-shadow: var(--shadow-s); }
.btn[disabled] { color: var(--c-mute); background: var(--c-off); border-color: var(--c-off-line); box-shadow: 0 4px 0 var(--c-off-line); cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
.btn[aria-disabled="true"] { pointer-events: none; }

/* ===== 利用者側：スマホ枠 ===== */
.stage-wrap { display: flex; justify-content: center; padding: var(--s4) 0; }
.phone { width: var(--phone-w); height: min(844px, calc(100vh - var(--demobar-h) - 2 * var(--s4))); display: flex; flex-direction: column; background: var(--c-bg); border: 5px solid var(--line); border-radius: 36px; box-shadow: 0 8px 0 var(--line); overflow: hidden; }
.screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.screen-pad { padding: var(--s4); }
.lead { color: var(--c-mute); }
.note { color: var(--c-mute); font-size: var(--fs-s); }
.empty { color: var(--c-mute); padding: var(--s3); border: 2px dashed var(--c-off-line); border-radius: var(--r-card); text-align: center; }
.back { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 700; text-decoration: none; }

.nav { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); padding: var(--s2); background: var(--c-white); border-top: var(--bw) solid var(--line); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 2px solid transparent; border-radius: var(--r-btn); text-decoration: none; color: var(--c-mute); font-size: var(--fs-s); font-weight: 700; }
.nav a.on { color: var(--c-white); background: var(--c-primary); border-color: var(--line); box-shadow: var(--shadow-s); }
.nav img { width: 28px; height: 28px; }
.nav a.on img { background: var(--c-white); border: 2px solid var(--line); border-radius: 50%; padding: 1px; }

/* ===== カード・チップ ===== */
.card { background: var(--c-card); border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.chip, .tag, .status, .mchip, .stage-chip, .vs { display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); min-height: 24px; font-size: var(--fs-s); font-weight: 700; background: var(--c-tint); border: 2px solid var(--line); border-radius: var(--r-pill); margin-right: var(--s1); }
.chip.ok { background: var(--c-ok-bg); }
.tag.limited { background: var(--c-accent); }
.tag.normal { background: var(--c-tint); }
.mchip img { width: 20px; height: 20px; }
.status.live { background: var(--c-ok-bg); }
.status.plan { background: var(--c-off); color: var(--c-mute); }
.vs { background: var(--c-off); color: var(--c-mute); }
.vs.arrived { background: var(--c-accent); color: var(--c-text); }
.vs.done { background: var(--c-ok-bg); color: var(--c-ok); }
.tag.teaser { background: var(--c-off); }
.gauge { height: 22px; background: var(--c-white); border: var(--bw) solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.gauge i { display: block; height: 100%; width: var(--p); background: var(--cat, var(--c-local)); border-right: 3px solid var(--line); }
.gauge i[style*="--p:0%"] { border-right: 0; }

/* ===== ホーム ===== */
.hud { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--c-white); border-bottom: var(--bw) solid var(--line); }
.hud > div { display: flex; align-items: center; gap: var(--s2); }
.hud b { font-size: var(--fs-xl); line-height: 1; }
.hud img { width: 32px; height: 32px; }
.town { position: relative; aspect-ratio: 780 / 600; background: var(--c-tint); border-bottom: var(--bw) solid var(--line); overflow: hidden; }
.town-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.town-chars { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 var(--s2); }
.hero { margin: 0; text-align: center; }
.hero img { display: block; width: 150px; height: 150px; margin: 0 auto; }
.hero .idle { display: block; margin: 0 auto; }
.hero figcaption { display: inline-block; margin-bottom: var(--s2); padding: 0 var(--s3); font-size: var(--fs-s); font-weight: 800; background: var(--c-white); border: 2px solid var(--line); border-radius: var(--r-pill); }
.sec { padding: var(--s3) var(--s4) 0; }
.chara-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s1); }
.chara-list li { display: flex; flex-direction: column; align-items: center; padding: var(--s1) 0; font-size: 12px; font-weight: 800; background: var(--cat-bg); border: 2px solid var(--line); border-radius: 12px; }
.chara-list li.now { border-width: 3px; box-shadow: var(--shadow-s); }
.chara-list .idle, .chara-list img { width: 40px; height: 40px; }
.mcard { display: block; text-decoration: none; color: var(--c-text); border-left: 10px solid var(--cat); }
.mcard.link:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
.mc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.mc-sub { color: var(--c-mute); font-size: var(--fs-s); margin: var(--s1) 0 var(--s2); }
.mc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.mini-gauge { flex: 1 1 100%; font-size: var(--fs-s); font-weight: 700; }
.sec:last-child { padding-bottom: var(--s4); }

/* ===== キャラ（2コマのアイドル） ===== */
.idle { position: relative; display: inline-block; }
.idle img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.idle .fa { animation: frameA 1s steps(1, end) infinite; }
.idle .fb { animation: frameB 1s steps(1, end) infinite; }
@keyframes frameA { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes frameB { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.bob { animation: bob 1.2s steps(1, end) infinite; }
@keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

/* ===== ミッション一覧 ===== */
.catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); }
.catcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); min-width: 0; padding: var(--s2) var(--s3) var(--s3); font: inherit; text-align: left; color: var(--c-text); background: var(--cat-bg); border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
button.catcard { cursor: pointer; }
button.catcard:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
.catcard.sel { background: var(--c-white); border-color: var(--cat); box-shadow: 0 4px 0 var(--cat); outline: var(--bw) solid var(--line); }
.catcard.plan { background: var(--c-white); }
.cc-chara { align-self: center; width: 76px; height: 76px; border-radius: 50%; background: var(--cat-bg); border: 2px solid var(--line); overflow: hidden; }
.catcard.plan .cc-chara { background: var(--cat-bg); }
.cc-chara img, .cc-chara .idle { width: 76px; height: 76px; }
.cc-name { font-size: var(--fs); }
.cc-meth { display: flex; flex-wrap: wrap; gap: var(--s1); }
.cc-meth .mchip { margin: 0; background: var(--c-white); }
.cc-ex { font-size: var(--fs-s); margin: 0; color: var(--c-mute); }
.catpanel { padding: var(--s3); background: var(--cat-bg); border: var(--bw) solid var(--line); border-radius: var(--r-card); }
.catpanel .card { margin-bottom: var(--s3); }

/* ===== ミッション詳細 ===== */
.dhero { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); margin-bottom: var(--s3); background: var(--cat-bg); border: var(--bw) solid var(--line); border-radius: var(--r-card); }
.dhero h1 { margin: var(--s1) 0 0; font-size: var(--fs-l); }
.dhero-chara { flex: none; width: 96px; height: 96px; }
.dhero-chara img, .dhero-chara .idle { width: 96px; height: 96px; }
.dlist { margin: 0 0 var(--s3); }
.drow { padding: var(--s2) 0; border-bottom: 2px dashed var(--c-off); }
.drow:last-child { border-bottom: 0; }
.drow dt { font-size: var(--fs-s); font-weight: 800; color: var(--c-mute); }
.drow dd { margin: 0; }
.mrow { display: flex; flex-wrap: wrap; gap: var(--s1); }
.uselist li { display: flex; flex-direction: column; padding: var(--s2) 0; border-bottom: 2px dashed var(--c-off); }
.uselist span { color: var(--c-mute); font-size: var(--fs-s); }

/* ===== 進捗・地点 ===== */
.big { font-size: var(--fs-l); }
.big b { font-size: var(--fs-xxl); line-height: 1; }
.route { margin: var(--s2) 0; padding: var(--s3); background: var(--c-map-bg); border: var(--bw) solid var(--line); border-radius: 14px; }
.route li { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2) 0; }
.route li:not(:last-child)::after { content: ''; position: absolute; left: 9px; top: 50%; width: 10px; height: 100%; background: var(--c-white); border-left: 2px solid var(--line); border-right: 2px solid var(--line); }
.route .dot { position: relative; z-index: 1; }
.route .rl { min-width: 0; font-weight: 800; }
.route li.act .dot { border-width: 4px; }
.placelist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 2px dashed var(--c-off); }
.placelist li:last-child { border-bottom: 0; }
.placelist b { flex: 1 1 calc(100% - 48px); min-width: 0; }
.dot { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; font-weight: 800; background: var(--c-white); border: 2px solid var(--line); border-radius: 50%; }
.dot.arrived { background: var(--c-accent); }
.dot.done { background: var(--c-ok); color: var(--c-white); }
h1 .dot { margin-right: var(--s2); vertical-align: middle; }
.condlist li { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; }
.condlist li span { min-width: 52px; text-align: center; font-size: var(--fs-s); font-weight: 800; background: var(--c-off); border: 2px solid var(--line); border-radius: var(--r-pill); }
.condlist li.ok span { background: var(--c-ok-bg); color: var(--c-ok); }
.pfig { position: relative; display: block; overflow: hidden; margin-bottom: var(--s3); border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.pfig img { display: block; width: 100%; height: auto; }
.imgtag { position: absolute; right: var(--s2); bottom: var(--s2); padding: 0 var(--s2); font-size: 12px; font-weight: 800; background: var(--c-white); border: 2px solid var(--line); border-radius: var(--r-pill); }
.banner { padding: var(--s2) var(--s3); font-weight: 800; background: var(--c-accent); border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-s); }
.srcs li { padding: var(--s1) 0; }
.srcs a { display: inline-block; padding: var(--s1) 0; font-weight: 700; }
.plist { margin: 0; padding-left: 1.6em; }

/* 記憶カード */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.mem { margin: 0; }
.mem .pfig { margin-bottom: var(--s1); border-width: 2px; border-radius: 12px; box-shadow: var(--shadow-s); }
.mem figcaption { font-size: var(--fs-s); font-weight: 800; text-align: center; }
.mem-empty { display: grid; place-items: center; aspect-ratio: 3 / 2; margin-bottom: var(--s1); font-size: var(--fs-xl); font-weight: 900; color: var(--c-mute); background: var(--c-off); border: 2px dashed var(--c-off-line); border-radius: 12px; }

/* 地点の操作（クイズ・カメラ・QR） */
.q { font-size: var(--fs-l); font-weight: 800; }
.choices { display: grid; gap: var(--s2); }
.choice { min-height: var(--btn-h); padding: 0 var(--s4); font: inherit; font-size: var(--fs-l); font-weight: 800; text-align: left; color: var(--c-text); background: var(--c-white); border: var(--bw) solid var(--line); border-radius: var(--r-btn); box-shadow: var(--shadow-s); cursor: pointer; }
.choice:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.ng { padding: var(--s2) var(--s3); font-weight: 800; background: var(--c-ng-bg); border: 2px solid var(--line); border-radius: var(--r-card); }
.btn img { width: 28px; height: 28px; }

/* 次回予告カード */
.teaser { border-style: dashed; box-shadow: none; }
.ttable { width: 100%; border-collapse: collapse; margin: var(--s2) 0; }
.ttable thead { display: none; }
.ttable, .ttable tbody, .ttable tr, .ttable td { display: block; }
.ttable tr { padding: var(--s2) 0; border-bottom: 2px dashed var(--c-off); }
.ttable td { padding: 0; font-size: var(--fs-s); }
.ttable td:first-child { font-size: var(--fs); font-weight: 800; }
.ttable td[data-l]::before { content: attr(data-l) "　"; color: var(--c-mute); font-weight: 700; }
.gate { text-align: center; }

/* ===== 達成演出（4段階、尺は --fx、コマ送り） ===== */
.fx { position: relative; min-height: 100%; overflow: hidden; padding: var(--s5) var(--s4); background: var(--c-accent); display: flex; flex-direction: column; justify-content: center; }
.fx-lines { position: absolute; left: 50%; top: 50%; width: 780px; height: 780px; max-width: none; margin: -390px 0 0 -390px; animation: spin 0.8s steps(8, end) infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage-area { position: relative; height: 380px; }
.st { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: var(--fs-l); opacity: 0; }
.st p { padding: var(--s2) var(--s4); background: var(--c-white); border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); margin-top: var(--s3); }
.st .pair { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.arrow { font-size: var(--fs-xxl); font-weight: 900; }
.big-text { font-size: var(--fs-xxl); font-weight: 900; padding: var(--s4) var(--s5); background: var(--c-white); border: 5px solid var(--line); border-radius: var(--r-card); box-shadow: 0 8px 0 var(--line); transform: rotate(-3deg); }
.st1 { animation: st1 var(--fx) steps(1, end) forwards; }
.st2 { animation: st2 var(--fx) steps(1, end) forwards; }
.st3 { animation: st3 var(--fx) steps(1, end) forwards; }
.st4 { animation: st4 var(--fx) steps(1, end) forwards; }
.st-cta { position: relative; opacity: 0; animation: st4 var(--fx) steps(1, end) forwards; }
@keyframes st1 { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes st2 { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes st3 { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes st4 { 0% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } }

/* ===== アバター ===== */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s3); }
.tab { min-height: 48px; font: inherit; font-weight: 800; color: var(--c-primary); background: var(--c-white); border: var(--bw) solid var(--line); border-radius: var(--r-btn); box-shadow: var(--shadow-s); cursor: pointer; }
.tab.on { color: var(--c-white); background: var(--c-primary); }
.tab:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.av-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 300px; overflow: hidden; border: var(--bw) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); margin-bottom: var(--s4); }
.av-stage.costume { background: var(--c-local-bg); }
.room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-img { position: relative; width: 240px; height: 240px; margin-bottom: 8px; }
.tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: var(--s2); font: inherit; font-size: var(--fs-s); text-align: center; color: var(--c-text); background: var(--c-white); border: var(--bw) solid var(--line); border-radius: 14px; box-shadow: var(--shadow-s); }
.tile img { width: 64px; height: 64px; }
.tile img.dim { opacity: 0.45; }
.tile span { font-size: 12px; font-weight: 700; color: var(--c-mute); }
.tile span.shop { color: var(--c-primary); }
.tile span.got { color: var(--c-ok); }
.tile.locked { background: var(--c-off); border-color: var(--c-off-line); box-shadow: none; }
button.tile { cursor: pointer; }
.tile.sel { background: var(--c-accent); }
.tile.owned:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.saved { text-align: center; font-weight: 800; color: var(--c-ok); margin: var(--s3) 0 0; }

/* ===== マイページ ===== */
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.stats3 .card { padding: var(--s2); text-align: center; margin-bottom: var(--s3); }
.stats3 small { display: block; }
.stats3 b { font-size: var(--fs-xl); }
.badge { display: flex; align-items: center; gap: var(--s3); }
.catrows li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 2px dashed var(--c-off); }
.catrows li:last-child { border-bottom: 0; }
.catrows li > :first-child { flex: none; width: 56px; height: 56px; background: var(--cat-bg); border: 2px solid var(--line); border-radius: 50%; overflow: hidden; }
.catrows img, .catrows .idle { width: 56px; height: 56px; }
.catrows li > div { flex: 1; min-width: 0; }
.catrows p { margin: 0; font-size: var(--fs-s); color: var(--c-mute); }
.stage-chip { margin: 0; background: var(--cat-bg); }
.actlist li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 2px dashed var(--c-off); }
.actlist li:last-child { border-bottom: 0; }

/* ===== 運営者側（白基調の業務画面） ===== */
.admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-height: calc(100vh - var(--demobar-h)); }
.anav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); padding: var(--s3); background: #F3F6FA; border-bottom: 1px solid #CBD3DE; }
.anav a { display: block; min-height: 44px; line-height: 44px; padding: 0 var(--s3); color: var(--c-text); text-decoration: none; border-radius: 8px; font-weight: 700; }
.anav a.on { color: var(--c-white); background: var(--c-primary); }
.alogo { width: 100%; }
.datamenu { position: relative; margin-left: auto; }
.datamenu summary { min-height: 44px; padding: 0 var(--s3); border: 1px solid #98A5B6; border-radius: 8px; line-height: 42px; font-weight: 700; cursor: pointer; list-style-position: inside; background: var(--c-white); }
.data-actions { position: absolute; right: 0; z-index: 20; display: grid; gap: var(--s2); min-width: 220px; margin-top: var(--s1); padding: var(--s3); background: var(--c-white); border: 1px solid #CBD3DE; border-radius: 8px; box-shadow: var(--shadow-s); }
.data-actions .abtn { width: 100%; }
.amain { min-width: 0; padding: var(--s5) var(--s4); }
.amain h1 { margin-top: 0; }
.preview { padding: var(--s4); background: #F7F9FC; border-top: 1px solid #CBD3DE; }
.preview h2 { margin: 0 0 var(--s2); }
@media (min-width: 1200px) {
  .admin { grid-template-columns: 200px minmax(0, 1fr); }
  .admin.with-pv { grid-template-columns: 200px minmax(0, 1fr) 320px; }
  .anav { position: sticky; top: var(--demobar-h); flex-direction: column; align-items: stretch; align-self: start; height: calc(100vh - var(--demobar-h)); overflow-y: auto; border-bottom: 0; border-right: 1px solid #CBD3DE; }
  .datamenu { width: 100%; margin: auto 0 0; }
  .data-actions { position: static; min-width: 0; box-shadow: none; }
  .preview { position: sticky; top: var(--demobar-h); align-self: start; max-height: calc(100vh - var(--demobar-h)); overflow-y: auto; padding: var(--s4) 0; background: transparent; border-top: 0; }
}
.mini-phone { width: 320px; max-width: 100%; max-height: min(640px, calc(100vh - 260px)); margin: 0 auto; overflow-y: auto; overflow-x: hidden; border: 4px solid var(--line); border-radius: 28px; background: var(--c-bg); }
.pv-pad { padding: var(--s3); }
.mini-phone .btn { margin-bottom: 0; }
.pubbox { width: 320px; max-width: 100%; margin: var(--s3) auto 0; padding: var(--s3); background: var(--c-white); border: 1px solid #CBD3DE; border-radius: 8px; }
.abtn { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s4); font: inherit; font-weight: 700; color: var(--c-primary); background: var(--c-white); border: 1px solid var(--c-primary); border-radius: 8px; text-decoration: none; cursor: pointer; }
.abtn.sm { min-height: 40px; padding: 0 var(--s3); }
.abtn.primary { color: var(--c-white); background: var(--c-primary); }
.abtn.danger { color: var(--c-white); background: var(--c-ng); border-color: var(--c-ng); }
.abtn[disabled] { opacity: 0.45; cursor: not-allowed; }
.linkbtn { padding: var(--s1) 0; font: inherit; color: var(--c-primary); text-align: left; text-decoration: underline; background: none; border: 0; cursor: pointer; }
.btnrow { display: flex; gap: var(--s2); flex-wrap: wrap; }
.st-chip { display: inline-block; padding: 0 var(--s2); font-size: var(--fs-s); font-weight: 700; border-radius: 6px; background: var(--c-off); }
.st-chip.published { background: var(--c-ok-bg); color: var(--c-ok); }
.st-chip.draft { background: #FFF3C4; }
.muted { color: var(--c-mute); font-size: var(--fs-s); }
.table { width: 100%; border-collapse: collapse; }
.table { font-size: var(--fs-s); }
.table th, .table td { padding: var(--s2) 6px; text-align: left; border-bottom: 1px solid #DDE3EB; }
.table .abtn.sm { min-height: 36px; padding: 0 8px; }
.table td.nw { white-space: nowrap; }
.table td.nm { min-width: 170px; }
.table th { background: #F3F6FA; font-size: var(--fs-s); }
.table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.table td.n, .table th, .table .st-chip { white-space: nowrap; }
@media (max-width: 899px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { border: 1px solid #DDE3EB; border-radius: 8px; margin-bottom: var(--s3); }
  .table td { display: flex; justify-content: space-between; gap: var(--s3); border-bottom: 0; }
  .table td[data-l]::before { content: attr(data-l); color: var(--c-mute); font-size: var(--fs-s); }
}
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s3); }
.filters label, .statsel { display: grid; gap: var(--s1); font-weight: 700; }
.filters .inp, .statsel .inp { width: auto; min-width: 160px; }
.statsel { max-width: 420px; margin-bottom: var(--s3); }
.thumb { display: block; width: 96px; }
.thumb.sm { width: 64px; }
.thumb img { display: block; width: 100%; height: auto; border: 1px solid #CBD3DE; border-radius: 6px; }
.thumb .noimg { width: 100%; }
.confirmbar { margin-bottom: var(--s3); padding: var(--s3); background: #FFF3C4; border: 1px solid #E0B800; border-radius: 8px; }

/* A02 編集 */
.ahead { position: sticky; top: var(--demobar-h); z-index: 5; margin: calc(-1 * var(--s5)) calc(-1 * var(--s4)) var(--s4); padding: var(--s3) var(--s4) 0; background: var(--c-white); border-bottom: 1px solid #CBD3DE; }
.ahead-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-bottom: var(--s3); }
.ahead h1 { flex: 1 1 200px; min-width: 0; margin: 0; font-size: var(--fs-l); }
.savestat { color: var(--c-ok); font-size: var(--fs-s); font-weight: 700; }
.livebar { margin: 0 calc(-1 * var(--s4)); padding: var(--s2) var(--s4); font-weight: 700; background: #FFF3C4; }
.edit-tabs { display: flex; gap: var(--s4); max-width: 860px; margin-bottom: var(--s4); overflow-x: auto; border-bottom: 1px solid #CBD3DE; }
.edit-tabs button { flex: none; min-height: 48px; padding: 0 var(--s1); font: inherit; font-weight: 700; color: var(--c-mute); background: transparent; border: 0; border-bottom: 4px solid transparent; cursor: pointer; }
.edit-tabs button[aria-selected="true"] { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.edit-tabs button:hover { color: var(--c-text); }
.edit-tabs button:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.form { max-width: 860px; }
.asec { margin-bottom: var(--s5); scroll-margin-top: 140px; }
.asec > h2 { padding-bottom: var(--s2); border-bottom: 2px solid var(--c-primary); }
.frow { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid #E5EAF1; scroll-margin-top: 160px; }
.frow > label, .frow > .lbl { font-weight: 700; padding-top: 10px; }
.frow .frow { grid-template-columns: 120px minmax(0, 1fr); padding: var(--s2) 0; border-bottom: 0; }
@media (max-width: 639px) { .frow, .frow .frow { grid-template-columns: 1fr; gap: var(--s1); } .frow > label, .frow > .lbl { padding-top: 0; } }
.inp { width: 100%; min-height: 44px; padding: 8px var(--s3); font: inherit; color: var(--c-text); background: var(--c-white); border: 1px solid #98A5B6; border-radius: 8px; }
.inp.num { width: 140px; }
textarea.inp { resize: vertical; }
.opt { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; margin-right: var(--s4); }
.opt input { width: 20px; height: 20px; }
.topts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s2); }
.topt { display: grid; grid-template-columns: auto 40px minmax(0, 1fr); align-items: center; column-gap: var(--s2); min-height: 56px; padding: var(--s2); background: var(--cat-bg); border: 2px solid var(--cat); border-radius: 10px; cursor: pointer; }
.topt:has(input:checked) { outline: 3px solid var(--line); }
.topt:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.topt img, .topt .idle { width: 40px; height: 40px; flex: none; }
.topt small { grid-column: 3; color: var(--c-mute); }
.imgf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3); }
.imgf-act { display: flex; flex-wrap: wrap; gap: var(--s2); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.imgf-act:focus-within .abtn:first-child, .data-actions label:focus-within { outline: 3px solid var(--c-accent); }
.rows { margin-bottom: var(--s2); }
.mrow2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--s2); margin-bottom: var(--s2); }
.chrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
@media (max-width: 639px) { .mrow2 { grid-template-columns: minmax(0, 1fr) auto; } .mrow2 .inp:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
.cp { margin-bottom: var(--s3); background: var(--c-white); border: 1px solid #CBD3DE; border-radius: 10px; }
.cp.open { border-color: var(--c-primary); }
.cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); }
.cp-title { flex: 1 1 140px; min-width: 0; }
.icons { display: inline-flex; gap: 2px; }
.icons img { width: 20px; height: 20px; }
.ops { display: inline-flex; flex-wrap: wrap; gap: var(--s1); }
.cp-body { padding: 0 var(--s3) var(--s3); border-top: 1px solid #E5EAF1; }
.cp-body h4 { margin: var(--s4) 0 0; }
.stblock { margin-bottom: var(--s2); padding: var(--s2) var(--s3); background: #F7F9FC; border: 1px solid #DDE3EB; border-radius: 8px; }
.st-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.st-head .ops { margin-left: auto; }
.addstep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.addstep .inp { width: auto; }
.itemsum { display: flex; align-items: center; gap: var(--s2); }
.itemsum small { display: block; color: var(--c-mute); }
.newitem { margin-top: var(--s3); padding: var(--s3); border: 1px dashed #98A5B6; border-radius: 8px; }
.newitem h4 { margin: 0; }
.chk { margin: 0 0 var(--s2); padding-left: var(--s4); list-style: disc; }
.chk-ng { font-weight: 700; color: var(--c-ng); }
.chk-ok { font-weight: 700; color: var(--c-ok); }
.confirm { font-weight: 700; }
.demo-note { padding: var(--s2) var(--s3); background: #FFF3C4; border-radius: 8px; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); margin-bottom: var(--s3); }
.kpis.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kpi { display: flex; flex-direction: column; padding: var(--s3) var(--s4); border: 1px solid #CBD3DE; border-radius: 10px; background: var(--c-white); }
.kpi small { color: var(--c-mute); font-weight: 700; }
.kpi > b { font-size: 28px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--c-primary); font-weight: 700; }
.pstat { padding: var(--s2) 0; border-top: 1px solid #E5EAF1; }
.vbar { display: grid; grid-template-columns: 80px minmax(0, 1fr) 56px; align-items: center; gap: var(--s2); padding: var(--s1) 0; }
.vbar b { font-size: var(--fs); text-align: right; }
.bar { height: 14px; background: #E5EAF1; border-radius: 7px; overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--p); background: var(--c-primary); }

/* ===== 画像未設定・通知・起動失敗 ===== */
.noimg { display: grid; place-items: center; width: var(--w); max-width: 100%; padding: var(--s1); font-size: 12px; font-weight: 800; line-height: 1.3; text-align: center; color: var(--c-mute); background: var(--c-off); border: 2px dashed var(--c-off-line); overflow: hidden; }
.pfig .noimg { width: 100%; border: 0; border-radius: 0; }
.notice { position: fixed; left: 50%; top: calc(var(--demobar-h) + var(--s2)); z-index: 50; transform: translateX(-50%); display: flex; align-items: center; gap: var(--s3); width: max-content; max-width: calc(100% - 24px); padding: var(--s2) var(--s3); font-weight: 700; background: var(--c-ng-bg); border: var(--bw) solid var(--line); border-radius: 12px; box-shadow: var(--shadow-s); }
.notice button { flex: none; min-height: 36px; padding: 0 var(--s3); font: inherit; font-weight: 700; background: var(--c-white); border: 2px solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
.boot-fail { margin: var(--s4); padding: var(--s4); font-weight: 700; background: var(--c-ng-bg); border: var(--bw) solid var(--line); border-radius: 12px; }
.hist h3 { margin: var(--s2) 0 var(--s1); font-size: var(--fs); }
.gnum { font-weight: 800; text-align: center; }
.placelist .icons { flex: none; }

/* ===== 実機幅：枠なしで全幅 ===== */
@media (max-width: 500px) {
  .stage-wrap { padding: 0; }
  .phone { width: 100%; height: calc(100vh - var(--demobar-h)); height: calc(100dvh - var(--demobar-h)); border: 0; border-radius: 0; box-shadow: none; }
}

/* ===== 動きを減らす設定：達成演出は全段を即時表示 ===== */
@media (prefers-reduced-motion: reduce) {
  .fx-lines, .bob, .idle .fa, .idle .fb { animation: none; }
  .idle .fb { opacity: 0; }
  .stage-area { height: auto; display: flex; flex-direction: column; gap: var(--s3); }
  .st, .st-cta { position: static; animation: none; opacity: 1; }
  .big-text { transform: none; }
}