/* ============================================================
   チョーナイス - 21日間腸活チャレンジ
   ============================================================ */
:root{
  --brand:#0B6FB4;
  --brand-d:#075289;
  --brand-l:#E8F3FB;
  --mint:#25B6A0;
  --mint-l:#E4F6F3;
  --pink:#F4788A;
  --gold:#F5A623;
  --gold-l:#FFF4E0;
  --ink:#3A4A54;
  --ink-2:#6C7C86;
  --ink-3:#A4B0B8;
  --line:#EFE9E1;
  --bg:#FCF8F3;
  --card:#FFFFFF;
  --shadow:0 3px 14px rgba(120,100,80,.09);
  --shadow-l:0 10px 30px rgba(120,100,80,.16);
  --r-s:10px; --r-m:16px; --r-l:22px;
  --tabh:62px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Meiryo,sans-serif;
  color:var(--ink);background:#F2EAE0;font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none !important}

/* ---------- レイアウト ---------- */
.app{
  position:relative;max-width:520px;min-height:100%;margin:0 auto;background:var(--bg);
  display:flex;flex-direction:column;box-shadow:0 0 40px rgba(11,50,80,.12);
}
.screen{
  flex:1;padding:14px 16px calc(var(--tabh) + var(--sab) + 26px);
  animation:fade .26s ease;
}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- ヘッダー ---------- */
.appbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  color:var(--ink);padding-top:var(--sat);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(120,100,80,.07);
}
.appbar__inner{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 16px}
.appbar__brand{display:flex;flex-direction:column;line-height:1.15}
.appbar__logo{font-size:19px;font-weight:900;letter-spacing:.06em;color:var(--brand)}
.appbar__logoimg{height:30px;width:auto;display:block}
.appbar__sub{font-size:10px;color:var(--ink-3);letter-spacing:.04em;font-weight:700}
.appbar__pt{
  display:flex;align-items:center;gap:6px;background:var(--gold-l);
  border:1px solid #F3DEB4;border-radius:999px;padding:5px 12px 5px 6px;color:#8A6100;
  transition:transform .15s;
}
.appbar__pt:active{transform:scale(.94)}
.appbar__pt-icon{
  width:20px;height:20px;border-radius:50%;background:var(--gold);color:#5A3A00;
  font-size:12px;font-weight:900;display:grid;place-items:center
}
.appbar__pt-num{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.appbar__actions{display:flex;align-items:center;gap:8px}
.appbar__gear{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-l);border:1px solid #D8E9F6;
  color:var(--brand);font-size:16px;line-height:1
}
.appbar__gear:active{transform:scale(.92)}

/* ---------- 下部タブ ---------- */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,253,250,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:var(--sab);
  box-shadow:0 -2px 14px rgba(16,52,78,.07);
}
.tab{
  position:relative;height:var(--tabh);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;color:var(--ink-3);
  transition:color .18s;
}
.tab__icon{width:23px;height:23px;fill:currentColor;transition:transform .2s}
.tab__label{font-size:10.5px;font-weight:700;letter-spacing:.02em}
.tab.is-active{color:var(--brand)}
.tab.is-active .tab__icon{transform:translateY(-2px) scale(1.08)}
.tab.is-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--brand)
}
.tab__badge{
  position:absolute;top:10px;right:calc(50% - 20px);
  width:9px;height:9px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 0 2px #fff;animation:pulse 1.6s infinite
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.75}}

/* ---------- 汎用パーツ ---------- */
.card{background:var(--card);border-radius:var(--r-m);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.card--flat{box-shadow:none;border:1px solid var(--line)}
.sec-title{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;margin-bottom:10px}
.sec-title::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--brand)}
.sec-title .more{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand)}
.muted{color:var(--ink-2);font-size:12.5px}
.tiny{font-size:11px;color:var(--ink-3)}
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}
.spacer{flex:1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:50px;padding:0 20px;border-radius:999px;font-weight:800;font-size:15px;
  background:linear-gradient(140deg,#41A9E6 0%,#2189CE 100%);color:#fff;
  box-shadow:0 5px 14px rgba(33,137,206,.28);
  transition:transform .12s,box-shadow .12s;width:100%;
}
.btn:active{transform:translateY(1px) scale(.99);box-shadow:0 2px 6px rgba(11,111,180,.3)}
.btn--ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand);box-shadow:none}
.btn--sub{background:linear-gradient(140deg,#4CD0B8,#22A992);box-shadow:0 5px 14px rgba(37,182,160,.28)}
.btn--gold{background:linear-gradient(140deg,#FFCB63,#F5A623);color:#6B4400;box-shadow:0 5px 14px rgba(245,166,35,.32)}
.btn--sm{height:38px;font-size:13px;padding:0 16px;width:auto}
.btn[disabled]{opacity:.42;pointer-events:none;box-shadow:none}

.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:999px;background:var(--brand-l);color:var(--brand)}
.pill--mint{background:var(--mint-l);color:#128271}
.pill--gold{background:var(--gold-l);color:#A96C00}
.pill--pink{background:#FDEAED;color:#D2445B}

/* ---------- 21日カレンダー ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal__cell{
  aspect-ratio:1/1;border-radius:11px;background:#F1F5F8;border:1.5px solid transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--ink-3);position:relative;transition:transform .15s
}
.cal__cell:active{transform:scale(.93)}
.cal__cell.is-done{background:linear-gradient(160deg,#2FC0A8,#1E9C88);color:#fff;border-color:transparent;
  box-shadow:0 3px 8px rgba(30,156,136,.3)}
.cal__cell.is-part{background:var(--gold-l);color:#A96C00;border-color:#F6CE86}
.cal__cell.is-today{border-color:var(--brand);color:var(--brand);background:#fff;
  box-shadow:0 0 0 3px rgba(11,111,180,.13)}
.cal__cell.is-today.is-done{background:linear-gradient(160deg,#2FC0A8,#1E9C88);color:#fff;border-color:#fff}
.cal__cell.is-today.is-part{background:var(--gold-l);color:#A96C00}
.cal__cell.is-future{opacity:.55}
.cal__chk{font-size:14px;line-height:1}

/* ---------- スコアリング ---------- */
.score-ring{display:flex;align-items:center;gap:16px}
.ring{position:relative;width:104px;height:104px;flex:0 0 104px}
.ring svg{transform:rotate(-90deg)}
.ring__num{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:900;font-size:27px;line-height:1
}
.ring__num small{font-size:10px;font-weight:700;color:var(--ink-3);letter-spacing:.06em}
.score-bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.sbar__t{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;margin-bottom:3px}
.sbar__b{height:7px;border-radius:99px;background:#EDF2F5;overflow:hidden}
.sbar__b > i{display:block;height:100%;border-radius:99px;transition:width .6s}

/* ---------- 記録画面 ---------- */
.datenav{
  display:flex;align-items:center;justify-content:space-between;background:#fff;
  border-radius:999px;padding:6px 8px;box-shadow:var(--shadow);margin-bottom:14px
}
.datenav__btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--brand);font-size:17px;font-weight:900;background:var(--brand-l)}
.datenav__btn[disabled]{opacity:.3;pointer-events:none}
.datenav__label{font-weight:800;font-size:14px;text-align:center}
.datenav__label small{display:block;font-size:10px;color:var(--ink-3);font-weight:700}

.qtitle{font-size:13.5px;font-weight:800;margin-bottom:2px}
.qhint{font-size:11px;color:var(--ink-3);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid var(--line);background:#fff;border-radius:12px;
  padding:9px 13px;font-size:13px;font-weight:700;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;transition:all .16s
}
.chip:active{transform:scale(.95)}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 3px 9px rgba(11,111,180,.28)}
.chip--mint.is-on{background:var(--mint);border-color:var(--mint);box-shadow:0 3px 9px rgba(37,182,160,.28)}
.chip--warn.is-on{background:var(--pink);border-color:var(--pink);box-shadow:0 3px 9px rgba(244,120,138,.28)}
.chip__emo{font-size:16px}
.chip--grid{flex:1 1 calc(33.333% - 8px);justify-content:center;flex-direction:column;gap:2px;padding:11px 4px}
.chip--half{flex:1 1 calc(50% - 8px);justify-content:center}

.bristol{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.bcell{
  border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:7px 2px;
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .16s
}
.bcell:active{transform:scale(.92)}
.bcell__n{font-size:10px;font-weight:900;color:var(--ink-3)}
.bcell__i{font-size:17px;line-height:1}
.bcell.is-on{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 2px rgba(11,111,180,.12)}
.bcell.is-good.is-on{border-color:var(--mint);background:var(--mint-l);box-shadow:0 0 0 2px rgba(37,182,160,.15)}
.bristol-note{margin-top:9px;background:var(--brand-l);border-radius:10px;padding:9px 11px;
  font-size:11.5px;font-weight:700;color:var(--brand-d);line-height:1.5}

.stepper{display:flex;align-items:center;gap:14px;justify-content:center}
.stepper__b{width:42px;height:42px;border-radius:50%;background:var(--brand-l);color:var(--brand);
  font-size:20px;font-weight:900;display:grid;place-items:center}
.stepper__b:active{transform:scale(.9)}
.stepper__v{font-size:26px;font-weight:900;min-width:74px;text-align:center}
.stepper__v small{font-size:12px;color:var(--ink-3);margin-left:2px}

.savebar{position:sticky;bottom:calc(var(--tabh) + var(--sab) + 8px);z-index:20;margin-top:16px}
.saved-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;
  font-weight:800;color:var(--mint);margin-top:8px}

/* ---------- コラム ---------- */
.tagrow{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;scrollbar-width:none}
.tagrow::-webkit-scrollbar{display:none}
.tagrow .chip{flex:0 0 auto;padding:7px 14px;font-size:12px}
.col-card{
  display:flex;gap:12px;background:#fff;border-radius:var(--r-m);padding:12px;
  box-shadow:var(--shadow);margin-bottom:11px;text-align:left;width:100%;align-items:center;
  transition:transform .12s
}
.col-card:active{transform:scale(.985)}
.col-thumb{
  width:74px;height:74px;flex:0 0 74px;border-radius:13px;display:grid;place-items:center;
  font-size:33px;background:var(--brand-l)
}
.col-body{flex:1;min-width:0}
.col-t{font-size:13.5px;font-weight:800;line-height:1.4;margin-bottom:3px}
.col-d{font-size:11.5px;color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col-meta{display:flex;align-items:center;gap:6px;margin-top:6px}
.col-read{opacity:.62}
.col-read .col-thumb{filter:grayscale(.35)}

.article h2{font-size:19px;font-weight:900;line-height:1.45;margin-bottom:8px}
.article h3{font-size:14.5px;font-weight:800;margin:20px 0 7px;padding-left:9px;border-left:4px solid var(--brand);line-height:1.4}
.article p{font-size:14px;line-height:1.9;margin-bottom:12px;color:#2A3B46}
.article .lead{background:var(--brand-l);border-radius:12px;padding:12px 14px;font-size:13px;font-weight:700;color:var(--brand-d);line-height:1.7}
.article ul.pt{margin:4px 0 14px}
.article ul.pt li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.8;margin-bottom:4px}
.article ul.pt li::before{content:"\25CE";position:absolute;left:2px;color:var(--mint);font-weight:900}
.article-hero{height:132px;border-radius:var(--r-m);display:grid;place-items:center;font-size:60px;margin-bottom:14px}

/* ---------- ポイント ---------- */
.ptcard{
  border-radius:var(--r-l);padding:20px 18px;color:#fff;margin-bottom:14px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,#F5A623 0%,#EF8A20 60%,#E5731C 100%);
  box-shadow:0 8px 22px rgba(229,130,28,.32)
}
.ptcard::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.13);right:-50px;bottom:-90px}
.ptcard__l{font-size:11px;font-weight:800;letter-spacing:.1em;opacity:.9}
.ptcard__v{font-size:44px;font-weight:900;line-height:1.05;letter-spacing:-.02em}
.ptcard__v small{font-size:16px;margin-left:3px}
.ptcard__sub{font-size:11.5px;opacity:.92;font-weight:700;position:relative;z-index:1}

.mission{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px dashed var(--line)}
.mission:last-child{border-bottom:0}
.mission__emo{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--gold-l);
  display:grid;place-items:center;font-size:19px}
.mission__t{font-size:13px;font-weight:800;line-height:1.35}
.mission__s{font-size:10.5px;color:var(--ink-3);font-weight:700}
.mission__p{font-size:13px;font-weight:900;color:var(--gold);white-space:nowrap}
.mission.is-done .mission__p{color:var(--mint)}
.mission.is-done .mission__emo{background:var(--mint-l)}

.coupon{
  display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--r-m);
  padding:13px;box-shadow:var(--shadow);margin-bottom:11px;position:relative;overflow:hidden
}
.coupon__img{width:66px;height:66px;flex:0 0 66px;border-radius:12px;background:var(--gold-l);
  display:grid;place-items:center;font-size:30px}
.coupon__b{flex:1;min-width:0}
.coupon__t{font-size:13px;font-weight:800;line-height:1.35}
.coupon__c{font-size:11px;color:var(--ink-3);font-weight:700;margin-top:2px}
.coupon__act{text-align:center}
.coupon__p{font-size:14px;font-weight:900;color:var(--gold);margin-bottom:4px}
.coupon.is-locked{opacity:.62}

.hist{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.hist:last-child{border-bottom:0}
.hist__t{font-size:12.5px;font-weight:700;flex:1}
.hist__d{font-size:10.5px;color:var(--ink-3)}
.hist__p{font-size:13px;font-weight:900;color:var(--mint)}
.hist__p.minus{color:var(--pink)}

.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.badge{text-align:center}
.badge__c{
  width:100%;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;font-size:25px;
  background:#F1F5F8;color:var(--ink-3);margin-bottom:4px;border:2px solid transparent
}
.badge.is-got .badge__c{background:linear-gradient(150deg,#FFE9AE,#F5A623);border-color:#fff;
  box-shadow:0 4px 12px rgba(245,166,35,.35)}
.badge__n{font-size:9.5px;font-weight:800;color:var(--ink-2);line-height:1.3}
.badge:not(.is-got) .badge__c{filter:grayscale(1);opacity:.5}

/* ---------- クイズ ---------- */
.quiz-hero{
  border-radius:var(--r-l);padding:18px;color:#fff;margin-bottom:14px;
  background:linear-gradient(140deg,#A692F0,#7B5BE0);box-shadow:0 10px 24px rgba(123,91,224,.26)
}
.quiz-hero h3{font-size:17px;font-weight:900;margin-bottom:4px}
.quiz-hero p{font-size:12px;opacity:.92;line-height:1.6}
.qprog{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.qprog__b{flex:1;height:7px;border-radius:99px;background:#E5EAEF;overflow:hidden}
.qprog__b > i{display:block;height:100%;background:linear-gradient(90deg,#A692F0,#7B5BE0);transition:width .4s}
.qprog__n{font-size:11.5px;font-weight:800;color:var(--ink-2)}
.qq{font-size:16.5px;font-weight:800;line-height:1.6;margin-bottom:14px}
.qopt{
  width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:14px 15px;font-size:14px;font-weight:700;margin-bottom:10px;display:flex;gap:10px;align-items:center;
  transition:all .16s
}
.qopt:active{transform:scale(.985)}
.qopt__m{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:#EEF3F7;color:var(--ink-2);
  font-size:12px;font-weight:900;display:grid;place-items:center}
.qopt.is-correct{border-color:var(--mint);background:var(--mint-l)}
.qopt.is-correct .qopt__m{background:var(--mint);color:#fff}
.qopt.is-wrong{border-color:var(--pink);background:#FDEAED}
.qopt.is-wrong .qopt__m{background:var(--pink);color:#fff}
.qexp{border-radius:14px;padding:13px 15px;font-size:13px;line-height:1.75;font-weight:700;
  animation:fade .3s ease;margin-bottom:12px}
.qexp.ok{background:var(--mint-l);color:#0E6E5E}
.qexp.ng{background:#FDEAED;color:#B33A50}
.qresult{text-align:center;padding:14px 0}
.qresult__s{font-size:52px;font-weight:900;line-height:1;color:var(--brand)}
.qresult__s small{font-size:18px;color:var(--ink-3)}

/* ---------- シート / モーダル ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(14,32,44,.5);animation:fade .2s}
.sheet{
  position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:22px 22px 0 0;padding:20px 18px calc(24px + var(--sab));
  animation:up .3s cubic-bezier(.2,.9,.3,1);-webkit-overflow-scrolling:touch
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet__grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 14px}
.sheet h3{font-size:17px;font-weight:900;margin-bottom:8px}

/* ---------- トースト / 演出 ---------- */
.toast-wrap{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + var(--sab) + 16px);z-index:95;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{
  background:rgba(30,42,50,.95);color:#fff;border-radius:999px;padding:10px 18px;font-size:13px;
  font-weight:800;box-shadow:var(--shadow-l);animation:toastIn .3s cubic-bezier(.2,.9,.3,1);
  display:flex;align-items:center;gap:7px;max-width:88%
}
.toast--gold{background:linear-gradient(120deg,#F5A623,#E5731C)}
.toast--mint{background:linear-gradient(120deg,#2FC0A8,#1E9C88)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .25s forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}

.reward{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:rgba(10,30,45,.62);animation:fade .25s}
.reward__box{
  background:#fff;border-radius:24px;padding:26px 22px;width:min(84vw,340px);text-align:center;
  box-shadow:var(--shadow-l);animation:pop .45s cubic-bezier(.2,1.3,.4,1)
}
@keyframes pop{from{transform:scale(.75);opacity:0}to{transform:none;opacity:1}}
.reward__emo{font-size:64px;line-height:1;margin-bottom:8px;animation:bob 1.6s ease-in-out infinite}
.reward__t{font-size:19px;font-weight:900;margin-bottom:6px}
.reward__d{font-size:13px;color:var(--ink-2);line-height:1.7;margin-bottom:16px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:99;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.1}}

/* ---------- オンボーディング ---------- */
.ob{padding:8px 0}
.ob__step{font-size:11px;font-weight:800;color:var(--brand);letter-spacing:.1em;margin-bottom:6px}
.ob__t{font-size:21px;font-weight:900;line-height:1.5;margin-bottom:6px}
.ob__d{font-size:13px;color:var(--ink-2);line-height:1.75;margin-bottom:18px}
.ob__bar{display:flex;gap:5px;margin-bottom:18px}
.ob__bar i{flex:1;height:4px;border-radius:99px;background:var(--line)}
.ob__bar i.on{background:var(--brand)}
.ob-hero{font-size:74px;text-align:center;margin:6px 0 12px;animation:bob 3s ease-in-out infinite}
.input{
  width:100%;height:50px;border-radius:13px;border:1.5px solid var(--line);padding:0 14px;
  font-size:15px;font-weight:700;background:#fff
}
.input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,111,180,.12)}

/* ---------- 空状態 ---------- */
.empty{text-align:center;padding:34px 16px;color:var(--ink-3)}
.empty__e{font-size:44px;margin-bottom:8px;opacity:.7}
.empty__t{font-size:13px;font-weight:700}

@media (min-width:600px){
  body{font-size:16px}
  .screen{padding-left:20px;padding-right:20px}
}


/* ============================================================
   アメーバ状ボタン（押したくなる表現）
   ============================================================ */
@keyframes blobMorph{
  0%,100%{border-radius:46% 54% 52% 48% / 54% 48% 52% 46%}
  25%{border-radius:56% 44% 46% 54% / 44% 56% 44% 56%}
  50%{border-radius:48% 52% 58% 42% / 56% 42% 58% 44%}
  75%{border-radius:54% 46% 44% 56% / 46% 58% 42% 54%}
}
@keyframes blobPop{
  0%{transform:scale(1)}
  40%{transform:scale(.9,1.08)}
  70%{transform:scale(1.08,.94)}
  100%{transform:scale(1)}
}
.blobs{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.blobs--1{grid-template-columns:1fr}
.blobs--3{grid-template-columns:repeat(3,1fr);gap:10px}
.blob{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:108px;padding:14px 12px;text-align:center;
  font-size:14px;font-weight:800;color:var(--ink);
  background:linear-gradient(160deg,#FFFFFF 0%,#F1F8FC 100%);border:2px solid #DCE7EF;
  border-radius:46% 54% 52% 48% / 54% 48% 52% 46%;
  animation:blobMorph 8s ease-in-out infinite;
  box-shadow:0 8px 18px rgba(16,52,78,.10);
  transition:transform .18s cubic-bezier(.2,1.3,.4,1),box-shadow .18s,background .18s,color .18s,border-color .18s;
}
.blob:nth-child(2n){animation-duration:9.5s;animation-delay:-2.4s}
.blob:nth-child(3n){animation-duration:7s;animation-delay:-4s}
.blob__emo{font-size:34px;line-height:1;transition:transform .2s}
.blob__sub{font-size:10.5px;font-weight:700;color:var(--ink-3)}
.blob:active{transform:scale(.92);box-shadow:0 3px 8px rgba(16,52,78,.14)}
.blob.is-tapped{animation:blobPop .42s ease, blobMorph 8s ease-in-out infinite}
.blob.is-on{
  background:linear-gradient(150deg,#3ED0B6,#1E9C88);color:#fff;border-color:transparent;
  box-shadow:0 10px 22px rgba(30,156,136,.34)
}
.blob.is-on .blob__sub{color:rgba(255,255,255,.9)}
.blob.is-on .blob__emo{transform:scale(1.12)}
.blob--no.is-on{background:linear-gradient(150deg,#9FB4C0,#7B93A2);box-shadow:0 10px 22px rgba(90,115,130,.3)}
.blob--warn.is-on{background:linear-gradient(150deg,#FB8B9C,#E4586E);box-shadow:0 10px 22px rgba(228,88,110,.3)}
.blob--brand.is-on{background:linear-gradient(150deg,#3AA5E4,#0B6FB4);box-shadow:0 10px 22px rgba(11,111,180,.34)}
.blob__check{
  position:absolute;top:9px;right:11px;width:22px;height:22px;border-radius:50%;
  background:#fff;color:var(--mint);font-size:13px;font-weight:900;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.15)
}

/* 大きなCTA（ぷるぷる） */
.cta{
  position:relative;width:100%;min-height:84px;display:flex;align-items:center;justify-content:center;gap:12px;
  color:#fff;font-size:17px;font-weight:900;letter-spacing:.02em;padding:16px 20px;
  background:linear-gradient(140deg,#FFC24A 0%,#F5A623 50%,#EE8A16 100%);
  border-radius:38px 46px 40px 44px;
  animation:ctaMorph 6.5s ease-in-out infinite;
  box-shadow:0 12px 26px rgba(240,150,20,.4);
  transition:transform .18s
}
@keyframes ctaMorph{
  0%,100%{border-radius:38px 46px 40px 44px;transform:scale(1)}
  33%{border-radius:48px 36px 46px 40px;transform:scale(1.012)}
  66%{border-radius:42px 48px 36px 46px;transform:scale(.995)}
}
.cta:active{transform:scale(.96)}
.cta__emo{font-size:32px;animation:bob 2.2s ease-in-out infinite}
.cta__sub{display:block;font-size:11px;font-weight:800;opacity:.95;margin-top:3px}
.cta--done{background:linear-gradient(140deg,#5FD9C3,#1E9C88);box-shadow:0 12px 26px rgba(30,156,136,.36)}
.cta__body{text-align:center;line-height:1.4}

/* ============================================================
   記録：一問一答フロー
   ============================================================ */
.stepbar{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.stepbar__b{flex:1;height:8px;border-radius:99px;background:#E5EDF2;overflow:hidden}
.stepbar__b > i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#3ED0B6,#0B6FB4);transition:width .45s cubic-bezier(.2,.9,.3,1)}
.stepbar__n{font-size:11.5px;font-weight:800;color:var(--ink-2);white-space:nowrap}

.qcard{
  background:#fff;border-radius:24px;padding:22px 18px 20px;box-shadow:var(--shadow);
  margin-bottom:14px;animation:qIn .32s cubic-bezier(.2,.9,.3,1)
}
@keyframes qIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.qcard--back{animation:qInBack .32s cubic-bezier(.2,.9,.3,1)}
@keyframes qInBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.qcard__emo{font-size:44px;text-align:center;line-height:1;margin-bottom:8px;animation:bob 2.6s ease-in-out infinite}
.qcard__q{font-size:19px;font-weight:900;text-align:center;line-height:1.5;margin-bottom:5px}
.qcard__h{font-size:12px;color:var(--ink-3);text-align:center;font-weight:700;margin-bottom:18px;line-height:1.6}
.qcard__note{
  margin-top:14px;background:var(--brand-l);border-radius:14px;padding:11px 13px;
  font-size:12px;font-weight:700;color:var(--brand-d);line-height:1.6;text-align:center
}
.qnav{display:flex;gap:10px;margin-top:16px}
.qnav .btn{flex:1}
.qnav .btn--back{flex:0 0 112px;padding:0 8px;font-size:13.5px;white-space:nowrap}
.qnav .btn--back:only-child{flex:1}

.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.bblob{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:84px;padding:9px 4px;background:#fff;border:2px solid var(--line);
  border-radius:44% 56% 52% 48% / 52% 44% 56% 48%;
  animation:blobMorph 9s ease-in-out infinite;
  box-shadow:0 5px 13px rgba(16,52,78,.09);transition:transform .18s,background .18s,border-color .18s
}
.bblob:nth-child(2n){animation-delay:-2s}
.bblob:nth-child(3n){animation-delay:-4.5s}
.bblob:active{transform:scale(.9)}
.bblob__n{font-size:10px;font-weight:900;color:var(--ink-3)}
.bblob__i{font-size:24px;line-height:1}
.bblob__l{font-size:9.5px;font-weight:800;color:var(--ink-2)}
.bblob.is-on{border-color:transparent;background:linear-gradient(150deg,#3AA5E4,#0B6FB4);
  box-shadow:0 8px 18px rgba(11,111,180,.3)}
.bblob.is-on .bblob__n,.bblob.is-on .bblob__l{color:#fff}
.bblob.is-good.is-on{background:linear-gradient(150deg,#3ED0B6,#1E9C88);box-shadow:0 8px 18px rgba(30,156,136,.3)}

.sum{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px dashed var(--line)}
.sum:last-of-type{border-bottom:0}
.sum__emo{width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:var(--brand-l);
  display:grid;place-items:center;font-size:21px}
.sum__t{font-size:12.5px;font-weight:800}
.sum__v{font-size:11.5px;color:var(--ink-2);font-weight:700;line-height:1.5}
.sum__edit{font-size:11px;font-weight:800;color:var(--brand);white-space:nowrap}

/* 画像素材を入れたときの受け皿（sprite差し替え用） */
.spr{display:inline-block;background-repeat:no-repeat;background-size:cover;vertical-align:middle}


/* ============================================================
   画像素材（assets/img/）を入れたときのスタイル
   ============================================================ */
.ico{display:inline-block;object-fit:contain;vertical-align:middle}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes squish{
  0%,100%{transform:scale(1,1)}
  45%{transform:scale(1.04,.96)}
  70%{transform:scale(.98,1.03)}
}

/* キャラクター画像 */
.charimg{
  width:206px;height:206px;object-fit:contain;
  animation:squish 2.6s ease-in-out infinite;transform-origin:50% 86%
}

/* ロゴ画像 */
.ob-logo{display:block;width:78%;max-width:300px;margin:6px auto 0}
.ob-hero .charimg,.ob-hero svg{width:120px;height:120px;display:inline-block}

/* コラムのサムネ */
.col-thumb .ico{width:100%!important;height:100%!important;object-fit:cover;border-radius:13px}
.article-hero{background-size:cover;background-position:center}

/* バッジ */
.badge__c .ico{width:78%!important;height:78%!important}
.badge:not(.is-got) .badge__c .ico{filter:grayscale(1)}

/* 一問一答のアイコン */
.qcard__emo .ico{width:64px!important;height:64px!important}
.sum__emo .ico{width:30px!important;height:30px!important}
.bblob__i .ico{width:34px!important;height:34px!important}
.blob__emo .ico{width:42px!important;height:42px!important}


/* ---------- スプラッシュ ---------- */
.splash{
  position:fixed;inset:0;z-index:200;background:linear-gradient(180deg,#FFFFFF 0%,#EAF4FA 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .5s ease
}
.splash.out{opacity:0;pointer-events:none}
.splash__logo{width:70%;max-width:280px;animation:splashIn .7s cubic-bezier(.2,1.2,.4,1)}
@keyframes splashIn{from{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:none}}
.splash__t{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.14em}
.splash__dots{display:flex;gap:6px;margin-top:4px}
.splash__dots i{width:7px;height:7px;border-radius:50%;background:var(--brand);opacity:.3;
  animation:dot 1.1s ease-in-out infinite}
.splash__dots i:nth-child(2){animation-delay:.18s}
.splash__dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- 各所のアイコンサイズ ---------- */
.reward__emo .ico{width:auto!important;height:auto!important;max-width:150px;max-height:150px}
.mission__emo .ico{width:28px!important;height:28px!important}
.coupon__img .ico{width:50px!important;height:50px!important}
.quiz-hero h3 .ico{width:26px!important;height:26px!important;margin-right:2px}
.cta__emo .ico{width:44px!important;height:44px!important}
.ob-hero .ico{width:96px!important;height:96px!important}
.sec-title .ico,.col-thumb .ico{vertical-align:middle}


/* ============================================================
   ホーム：アメーバ型のお部屋
   ============================================================ */
.room-wrap{position:relative;margin-bottom:18px}
.room{
  position:relative;width:100%;aspect-ratio:1/0.84;overflow:hidden;
  background-size:100% auto;background-position:center top;background-repeat:no-repeat;
  background-color:#E9F3FB;
  border-radius:40% 44% 38% 42% / 26% 22% 30% 26%;
  animation:roomMorph 20s ease-in-out infinite;
  box-shadow:0 16px 36px rgba(120,100,80,.2), inset 0 0 0 5px rgba(255,255,255,.8);
}
@keyframes roomMorph{
  0%,100%{border-radius:40% 44% 38% 42% / 26% 22% 30% 26%}
  25%{border-radius:46% 38% 44% 36% / 22% 30% 24% 30%}
  50%{border-radius:36% 46% 40% 46% / 30% 24% 28% 22%}
  75%{border-radius:44% 40% 46% 38% / 24% 28% 22% 30%}
}
/* 名前とレベル（左上） */
.room__id{
  position:absolute;left:14px;top:14px;z-index:3;
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px 6px 10px;
  box-shadow:0 4px 12px rgba(80,70,60,.14)
}
.room__name{font-size:14px;font-weight:900;color:var(--ink);letter-spacing:.02em}
.room__lv{
  font-size:10.5px;font-weight:900;color:#7A5200;background:linear-gradient(150deg,#FFE08A,#FFC14A);
  border-radius:999px;padding:3px 8px
}
/* DAYと連続（右上） */
.room__day{
  position:absolute;right:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:5px;align-items:flex-end
}
.room__day span{
  background:rgba(255,255,255,.9);border-radius:999px;padding:5px 11px;
  font-size:11px;font-weight:800;color:var(--ink-2);box-shadow:0 3px 10px rgba(80,70,60,.12)
}
.room__day b{color:var(--brand);font-size:13px;font-weight:900}
.room__day .fire b{color:#E88A2A}

/* キャラクターと影（床のラインに合わせる） */
.room__char{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(100% - var(--floor));
  height:var(--ch);width:auto;z-index:2;
  animation:charBob 3.8s ease-in-out infinite;transform-origin:50% 100%;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 5px 7px rgba(70,55,40,.14))
}
@keyframes charBob{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1,1)}
  45%{transform:translateX(-50%) translateY(-5px) scale(1.02,.98)}
  70%{transform:translateX(-50%) translateY(0) scale(.99,1.01)}
}
.room__shadow{
  position:absolute;left:50%;bottom:calc(100% - var(--floor) - 6px);
  transform:translateX(-50%);z-index:1;
  width:var(--shw);height:var(--shh);
  background:radial-gradient(ellipse at center,rgba(90,70,50,.26) 0%,rgba(90,70,50,.12) 45%,rgba(90,70,50,0) 72%);
  animation:shadowPulse 3.8s ease-in-out infinite
}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:1}45%{transform:translateX(-50%) scale(.9);opacity:.75}}
.room__sparkle{position:absolute;font-size:15px;z-index:2;animation:twinkle 2.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(.7) rotate(-8deg);opacity:.3}50%{transform:scale(1.1) rotate(8deg);opacity:.95}}

/* キャラクターの吹き出し */
.talk{
  position:relative;margin:-14px 10px 0;z-index:5;
  background:#fff;border-radius:20px;padding:13px 16px;
  font-size:13.5px;font-weight:800;line-height:1.7;color:#3B4B55;
  box-shadow:0 8px 20px rgba(120,100,80,.16);
  animation:talkIn .5s cubic-bezier(.2,1.2,.4,1)
}
@keyframes talkIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.talk::before{
  content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-bottom-color:#fff;border-top:0
}

/* ============================================================
   記録CTA（吹き出し付き）
   ============================================================ */
.cta-wrap{position:relative;padding-top:16px;margin-bottom:20px}
.cta-bubble{
  position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:3;
  background:#fff;color:var(--brand);border:2px solid #FFD68A;
  border-radius:999px;padding:6px 16px;font-size:12px;font-weight:900;white-space:nowrap;
  box-shadow:0 6px 14px rgba(120,100,80,.16);
  animation:bubbleBounce 2.2s ease-in-out infinite
}
@keyframes bubbleBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.cta-bubble::after{
  content:"";position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:#FFD68A;border-bottom:0
}
.cta-bubble::before{
  content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);z-index:1;
  border:7px solid transparent;border-top-color:#fff;border-bottom:0
}

/* ============================================================
   花丸ゲージ
   ============================================================ */
.flowers{background:#fff;border-radius:24px;padding:16px 16px 14px;box-shadow:var(--shadow);margin-bottom:16px}
.fl-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.fl-row:last-of-type{border-bottom:0}
.fl-row__t{font-size:13px;font-weight:900;width:78px;flex:0 0 78px;color:var(--ink);white-space:nowrap}
.fl-row__m{flex:1;display:flex;gap:5px}
.fl{width:26px;height:26px;flex:0 0 26px;transition:transform .3s}
.fl--on{animation:flPop .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes flPop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.fl-row__n{font-size:11.5px;font-weight:900;color:var(--ink-3);white-space:nowrap}
.fl-exp{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.fl-exp__b{flex:1;height:9px;border-radius:99px;background:#F1EBE3;overflow:hidden}
.fl-exp__b > i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#FFD98A,#FFB020);transition:width .8s cubic-bezier(.2,.9,.3,1)}
.fl-exp__t{font-size:11px;font-weight:800;color:var(--ink-2);white-space:nowrap}