:root{
  --bg:#FBF7F0; --paper:#FFFFFF; --ink:#2B2A28; --sub:#6B6257; --line:#E6DCCB;
  --accent:#2F8FD8; --accent-ink:#FFFFFF; --soft:#F3ECE0;
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  line-height:1.8;font-size:16px}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
main{max-width:680px;margin:0 auto;padding:8px 16px 40px}
h1{font-size:1.75rem;line-height:1.35;margin:.2em 0 .4em}
h2{font-size:1.15rem;margin:2em 0 .6em;padding-left:.6em;border-left:4px solid var(--line)}
.small{font-size:.85rem;color:var(--sub)}

.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:680px;margin:0 auto;padding:12px 16px}
.logo{font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.site-head nav{display:flex;gap:14px;font-size:.9rem}
.site-head nav a{color:var(--sub);text-decoration:none}

.site-foot{border-top:1px solid var(--line);background:var(--soft);padding:24px 16px 32px;font-size:.85rem;color:var(--sub)}
.site-foot>*{max-width:680px;margin-left:auto;margin-right:auto}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px auto}
.site-foot nav a{color:var(--sub)}
.site-foot .note{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px}

.eyebrow{color:var(--sub);font-size:.85rem;margin:1.2em 0 0;letter-spacing:.05em}
.lead{color:var(--sub)}
.hero{text-align:center;padding:16px 0 8px}

.cards{display:grid;gap:16px;margin-top:16px}
.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;color:inherit;text-decoration:none;transition:transform .15s}
.card:active{transform:scale(.99)}
.card-body{padding:14px 18px 18px}
.card h2{border:0;padding:0;margin:0 0 .2em}
.card p{margin:0;color:var(--sub);font-size:.95rem}
.go{display:inline-block;margin-top:8px;font-weight:700;color:var(--accent)}

.btn-main{display:inline-block;width:100%;max-width:360px;padding:14px 20px;border:0;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-size:1.05rem;font-weight:700;text-align:center;
  text-decoration:none;cursor:pointer;font-family:inherit;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.btn-main:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.quiz-intro{text-align:center}
.cta-wrap{text-align:center;margin:28px 0}

.type-chips{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.type-chips a{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--c);color:var(--t,#fff);
  text-decoration:none;font-size:.9rem;font-weight:700}

/* クイズ */
.quiz{padding-top:12px}
.progress{height:8px;background:var(--soft);border-radius:99px;overflow:hidden}
.bar{height:100%;width:0;background:var(--accent);transition:width .25s}
.qnum{color:var(--sub);font-size:.9rem;margin:16px 0 0}
.qtext{border:0;padding:0;font-size:1.35rem;margin:.2em 0 1em}
.answers{display:grid;gap:10px}
.answers button{width:100%;text-align:left;padding:16px 18px;background:var(--paper);border:2px solid var(--line);
  border-radius:14px;font:inherit;color:inherit;cursor:pointer}
@media (hover:hover){.answers button:hover{border-color:var(--accent)}}
.answers button:active{background:var(--soft)}
.btn-back{margin-top:18px;background:none;border:0;color:var(--sub);font:inherit;font-size:.9rem;cursor:pointer;padding:6px 0}
.btn-back[disabled]{visibility:hidden}

/* 結果 */
.result .result-img{border-radius:var(--radius);margin:8px 0 16px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.result h1{font-size:2.4rem;margin:0}
.result h1 small{display:block;font-size:.95rem;color:var(--sub);font-weight:600}
.result h2{border-left-color:var(--c)}
.catch{font-weight:700;color:var(--c);font-size:1.1rem;margin:.2em 0 1em;filter:brightness(.8)}
.dots{padding-left:1.2em}
.dots li{margin:.3em 0}
.match{display:inline-block;padding:2px 14px;border-radius:999px;background:var(--c);color:var(--t,#fff);font-weight:700;text-decoration:none}
.result.is-friend #who{font-weight:700;color:var(--ink)}

/* シェア */
.share{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:20px 0}
.share-label{margin:0 0 8px;font-weight:700;font-size:.95rem}
.share-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.btn-share{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border-radius:12px;border:0;
  font:inherit;font-size:.85rem;font-weight:700;text-decoration:none;cursor:pointer;color:#fff}
.btn-share.x{background:#111}
.btn-share.line{background:#06C755}
.btn-share.copy{background:var(--soft);color:var(--ink)}

/* 姓名判断 */
.seimei-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center}
.seimei-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;text-align:left}
.seimei-form label{font-size:.85rem;color:var(--sub);font-weight:700}
.seimei-form input{display:block;width:100%;margin-top:4px;padding:12px;font:inherit;font-size:1.2rem;border:2px solid var(--line);border-radius:12px;background:var(--bg)}
.seimei-form input:focus{outline:none;border-color:var(--accent)}
.chars{display:grid;gap:10px}
.ch-row{display:flex;gap:10px;align-items:center}
.ch-label{flex:none;width:2em;height:2em;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--sub)}
.ch-grp{display:flex;flex-wrap:wrap;gap:8px}
.ch{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px;text-align:center;width:68px}
.ch b{display:block;font-size:1.8rem;line-height:1.2}
.ch input{width:52px;text-align:center;font:inherit;font-size:1rem;padding:2px;border:1px solid var(--line);border-radius:8px}
.ch.unknown{border-color:#E07B5F;background:#FFF3EF}
.ch small{display:block;font-size:.7rem;line-height:1.4;color:var(--sub);white-space:nowrap}
.grid5{display:grid;gap:10px}
.kaku{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.kaku .k-name{font-weight:800}
.kaku .k-name small{display:block;font-weight:400;font-size:.75rem;color:var(--sub)}
.kaku .k-val{font-size:1.1rem}
.kaku .k-val b{font-size:1.6rem}
.rank{display:inline-block;margin-left:8px;padding:0 10px;border-radius:999px;font-size:.85rem;font-weight:700;vertical-align:middle}
.rank.r3{background:#FFE8A3;color:#6A4A00}
.rank.r2{background:#DDEFFD;color:#134A75}
.rank.r1{background:#EEE;color:#555}
.kaku p{grid-column:1/-1;margin:0;font-size:.92rem;color:var(--sub)}
.kaku.main{border:2px solid var(--accent)}
.explain{font-size:.92rem}
.credit{font-size:.75rem;color:var(--sub);text-align:center;margin-top:28px}
.warn{background:#FFF3EF;border:1px solid #F2C2B3;border-radius:12px;padding:10px 14px;font-size:.9rem}

/* 文書ページ */
.doc h2{margin-top:1.6em}

/* 広告枠：中身がなければ非表示。?adpreview=1 で位置を表示 */
.ad-slot{margin:28px 0;text-align:center}
.ad-slot:empty{display:none}
.adpreview .ad-slot{display:block;min-height:100px;border:2px dashed #E07B5F;border-radius:12px;position:relative}
.adpreview .ad-slot::before{content:"広告枠: " attr(data-slot);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#E07B5F;font-size:.85rem;font-weight:700}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 18px;border-radius:999px;font-size:.9rem;z-index:9}

@media (min-width:700px){
  .cards{grid-template-columns:1fr 1fr}
  .grid5{grid-template-columns:1fr 1fr}
  .kaku.main{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}