/* 家計やりくり検定。スマホ（375px）を第一に、PC でも中央の 480px のカラムで見せる。
   色はおさいふ手帳の LP と同じ。コーラル地の白文字は #a94c36 まで濃くする。 */
:root{
  --paper:#fbf6ef; --ink:#3a2e2a; --muted:#6b5b53; --coral:#a94c36; --coral-dark:#8e3f2b;
  --shu:#c8331d; --line:#e6dbcf; --sage:#e5eee4; --sand:#f0dfcc; --card:#fffdf9;
  --display:"Dela Gothic One","Hiragino Kaku Gothic ProN",sans-serif;
  --body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:500;font-size:16px;line-height:1.8}
h1,h2,h3,p,ul,figure{margin:0}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}

.site-head,.site-foot,.col{width:100%;max-width:480px;margin:0 auto;padding-left:16px;padding-right:16px}
.site-head{padding-top:14px;padding-bottom:6px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:900;font-size:15px;text-decoration:none;letter-spacing:.04em;color:var(--coral)}
.col{display:flex;flex-direction:column;gap:22px;padding-top:8px;padding-bottom:40px}
.site-foot{border-top:1px solid var(--line);padding-top:20px;padding-bottom:36px;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--muted);line-height:1.7}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.site-foot nav a{display:inline-flex;align-items:center;min-height:44px}
.note{font-size:13px;color:var(--muted);line-height:1.7}
.jp,.cert-name,.title,.ask,.q-text{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}

/* ボタン */
.btn{display:flex;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:12px 16px;border-radius:14px;border:0;font:inherit;font-weight:900;font-size:15px;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,background-color .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-dark)}
.btn-primary:hover{background:var(--coral-dark)}
.btn-big{min-height:60px;font-size:18px;border-radius:16px}
.btn-stack{flex-direction:column;padding-top:10px;padding-bottom:10px}
.btn-stack small{font-size:13px;font-weight:700;opacity:.92}
.btn-ghost{background:var(--card);color:var(--coral);border:1.5px solid var(--coral)}
.btn-x{background:#111;color:#fff}
.btn-line{background:#06803a;color:#fff}
.btn-store{flex-direction:column;background:var(--ink);color:#fff;min-height:64px}
.btn-store .store-main{font-size:16px}
.btn-store .store-sub{font-size:12px;font-weight:500;opacity:.9}

/* トップ */
.intro{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.pill{align-self:flex-start;background:var(--coral);color:#fff;font-weight:900;font-size:14px;letter-spacing:.06em;padding:3px 14px;border-radius:999px}
.title{font-family:var(--display);font-weight:400;font-size:clamp(40px,12.5vw,58px);line-height:1.18;letter-spacing:.01em}
.ask{font-size:20px;font-weight:900;color:var(--coral)}
.lead{color:var(--muted);line-height:1.9}
.friend{background:var(--sand);border-radius:14px;padding:14px 16px;font-weight:700;line-height:1.7}
.friend b{color:var(--coral)}
.sample{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 0 4px}
.sample figcaption{font-weight:900;font-size:15px}
.cert-sample{width:min(260px,80%);transform:rotate(3deg);padding:18px 16px 16px}
.cert-sample .stamp{width:120px;margin:4px auto}
.howto{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px}
.howto h2{font-size:17px;font-weight:900}
.howto ul{padding-left:1.2em;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.75}
.names{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.names span{font-size:13px;font-weight:700;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:2px 10px}

/* 設問 */
.quiz{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.quiz-head{display:flex;align-items:center;justify-content:space-between}
.btn-back{min-height:44px;min-width:64px;padding:0 12px 0 4px;border:0;background:none;font:inherit;font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.btn-back::before{content:"";width:9px;height:9px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-right:4px}
.progress-text{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.progress{height:8px;border-radius:8px;background:var(--sand);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--coral);border-radius:8px;transition:width .25s}
.q-text{font-size:22px;font-weight:900;line-height:1.55;min-height:3.1em;outline:none}
.q-note{font-size:13px;color:var(--muted);margin-top:-6px}
.options{display:flex;flex-direction:column;gap:10px}
.option{display:flex;align-items:center;min-height:58px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);font:inherit;font-weight:700;font-size:16px;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .12s,background-color .12s,transform .12s}
.option:hover{border-color:var(--coral)}
.option:active,.option.is-picked{background:var(--sand);border-color:var(--coral);transform:scale(.99)}
.option.is-prev{border-color:var(--coral)}
.options.is-savings{display:grid;grid-template-columns:1fr 1fr}
.options.is-savings .option{justify-content:center;text-align:center}

/* 採点の演出 */
.scoring{display:flex;flex-direction:column;align-items:center;gap:18px;padding:60px 0;font-weight:900}
.scoring-stamp .stamp{width:150px;animation:press .7s cubic-bezier(.3,1.6,.5,1) both}

/* 判子 */
.stamp{width:150px;aspect-ratio:1;border-radius:50%;border:7px solid var(--shu);color:var(--shu);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 5px var(--shu);background:var(--card)}
.stamp small{font-size:11px;font-weight:900;letter-spacing:.1em;line-height:1.2}
.stamp b{font-family:var(--display);font-weight:400;font-size:46px;line-height:1.1}
@keyframes press{0%{transform:rotate(-8deg) scale(1.8);opacity:0}60%{opacity:1}100%{transform:rotate(-8deg) scale(1);opacity:1}}

/* 認定証 */
.kicker{font-weight:900;font-size:14px;letter-spacing:.08em;color:var(--coral);margin-bottom:-10px}
.cert{background:var(--card);border:4px double var(--coral);border-radius:16px;padding:20px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 8px 24px #6b4a2b14}
.cert-ttl{font-size:12px;letter-spacing:.28em;font-weight:900;color:var(--muted)}
.cert-label{font-size:13px;font-weight:700;color:var(--muted)}
.cert-name{font-family:var(--display);font-weight:400;line-height:1.3;text-wrap:balance}
.cert-name.len-s{font-size:31px}.cert-name.len-m{font-size:28px}.cert-name.len-l{font-size:28px}
.cert-line{font-weight:900;font-size:16px;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.cert-desc{font-size:14.5px;line-height:1.8;text-align:left}
.cert-note{font-size:13.5px;font-weight:700;color:var(--coral);background:var(--paper);border-radius:999px;padding:3px 14px}
.cert-grade{display:none}
/* a案: 級（判子）が主役 */
.cert-result .cert-stamp{width:150px;margin:6px 0 4px}
.cert-result .cert-stamp b{font-size:50px}
/* b案: 二つ名が主役、判子は小さく */
.cert-result.hero-type .cert-stamp{width:92px;margin:0;order:-1;align-self:flex-end;margin-bottom:-56px;margin-right:-4px}
.cert-result.hero-type .cert-stamp small{font-size:8px}
.cert-result.hero-type .cert-stamp b{font-size:28px}
.cert-result.hero-type .cert-stamp{border-width:5px}
.cert-result.hero-type .cert-ttl{align-self:flex-start}
.cert-result.hero-type .cert-label{margin-top:28px}
.cert-result.hero-type .cert-name.len-s{font-size:38px}
.cert-result.hero-type .cert-name.len-m,.cert-result.hero-type .cert-name.len-l{font-size:33px}
body.is-own .cert-result .cert-stamp{animation:press .6s .15s cubic-bezier(.3,1.6,.5,1) both}

/* 3つの力 */
.gauges{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center;margin-top:8px;font-size:13px;font-weight:700;text-align:left}
.gauge{display:contents}
.gauge-bar{height:10px;border-radius:10px;background:var(--sand);overflow:hidden}
.gauge-bar i{display:block;height:100%;width:0;background:var(--coral);border-radius:10px;transition:width .6s .3s}
.gauge-num{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}

/* 比較 */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare-ttl{grid-column:1/-1;font-weight:900;font-size:15px;text-align:center}
.compare-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 10px;text-align:center;display:flex;flex-direction:column;gap:2px}
.compare-card small{font-size:12px;color:var(--muted);font-weight:700}
.compare-card b{font-family:var(--display);font-weight:400;font-size:26px;color:var(--shu);line-height:1.2}
.compare-card span{font-weight:900;font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.compare-card.is-me{border:2px solid var(--coral)}

/* 訪問者の受検ボタン */
.visitor-cta{display:flex;flex-direction:column;gap:10px;text-align:center}
.cta-lead{font-weight:900;font-size:18px}
.about{display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--muted)}
.about h2{font-size:16px;color:var(--ink)}

/* 枠 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}
.panel-ttl{font-size:13px;letter-spacing:.2em;font-weight:900;color:var(--muted);text-align:center}
.fine{font-size:12px;color:var(--muted);line-height:1.7}

/* 貯蓄予測 */
.forecast-gain{font-weight:900;font-size:18px;text-align:center;line-height:1.6}
.forecast-gain b{font-family:var(--display);font-weight:400;font-size:30px;color:var(--coral);display:block;line-height:1.3}
.fc-rows{display:flex;flex-direction:column;gap:10px}
.fc-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label num" "bar bar";gap:4px 10px;align-items:baseline;font-size:13.5px;font-weight:700}
.fc-label{grid-area:label}
.fc-num{grid-area:num;font-weight:900;font-size:16px;font-variant-numeric:tabular-nums}
.fc-bar{grid-area:bar;height:12px;border-radius:12px;background:var(--paper);overflow:hidden}
.fc-bar i{display:block;height:100%;width:0;border-radius:12px;transition:width .7s .2s}
.fc-now .fc-bar i{background:#b9a593}
.fc-up .fc-bar i{background:var(--coral)}
.fc-example{font-size:14px;line-height:1.75;background:var(--sage);border-radius:10px;padding:10px 12px}

/* 共有 */
.share{display:flex;flex-direction:column;gap:10px}
.share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.share-status{font-size:13px;color:var(--muted);text-align:center}
.share-status:empty{display:none}
.share-row .btn{font-size:14px;padding-left:8px;padding-right:8px}

/* アプリの紹介 */
.tip{background:var(--sage);border:0}
.tip-ttl{font-size:16px;font-weight:900}
.tip-body{font-size:14.5px;line-height:1.8}
.retake{display:flex;flex-direction:column}

/* 404 */
.notfound{align-items:center;text-align:center;padding-top:40px;padding-bottom:64px}
.notfound h1{font-size:22px;font-weight:900}
.notfound .btn{align-self:stretch}

@media (min-width:600px){
  .col{padding-top:24px}
  .site-head{padding-top:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}