/* 上京タイプ16診断 専用スタイル（area.css の変数・基本クラスを前提に追加） */

/* キャラクター（住猫） */
.hero .cat{width:300px;max-width:80%;height:auto;display:block;margin:0 auto 2px}

/* タイプコード見出し */
.tcode{display:inline-block;background:var(--soft);color:var(--orange-d);
  font-family:"Zen Maru Gothic";font-weight:700;letter-spacing:.12em;
  border-radius:99px;padding:6px 16px;font-size:.92rem;margin-bottom:10px}

/* 4軸バー */
.axwrap{background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:18px 20px}
.ax{display:grid;grid-template-columns:58px 1fr 78px;align-items:center;gap:12px;padding:7px 0}
.axl{font-size:.86rem;color:var(--ink2)}
.axbar{position:relative;height:8px;border-radius:99px;background:var(--line)}
.axbar i{position:absolute;top:0;height:8px;border-radius:99px;background:var(--orange)}
.axbar.left i{left:0;width:78%}
.axbar.right i{right:0;width:78%}
.axv{font-family:"Zen Maru Gothic";font-weight:700;color:var(--orange-d);font-size:.9rem;text-align:right}

/* 住み方ラベル */
.sumikata{text-align:center;background:var(--soft);border-radius:20px;padding:18px;margin-bottom:14px}
.sumikata .tagn{display:inline-block;background:var(--card);color:var(--orange-d);
  border-radius:99px;padding:4px 14px;font-size:.76rem;font-weight:700;margin-bottom:8px}
.sumikata h3{font-family:"Zen Maru Gothic";font-weight:900;font-size:1.5rem;color:var(--ink)}

/* おすすめ駅リスト */
.stlist{display:flex;flex-direction:column;gap:9px}
.strow{display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:13px 16px}
.strow:hover{border-color:var(--orange);text-decoration:none}
.strow .stn b{font-family:"Zen Maru Gothic";font-weight:700;color:var(--ink);font-size:1.04rem}
.strow .stn small{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}
.strow .str{font-family:"Zen Maru Gothic";font-weight:700;color:var(--orange-d);
  font-size:.9rem;white-space:nowrap;margin-left:10px}

.related{display:flex;flex-direction:column;gap:9px}
.related a{display:flex;justify-content:space-between;align-items:center;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 15px;
  font-size:.9rem;color:var(--ink);font-weight:500}
.related a:hover{border-color:var(--orange);text-decoration:none}
.related a b{color:var(--orange);margin-left:8px}
.updated{text-align:center;color:var(--muted);font-size:.76rem;margin:26px 0 40px}

/* ── 診断フロー（index.html） ── */
.progress{height:7px;border-radius:99px;background:var(--line);margin:8px 0 22px;overflow:hidden}
.progress i{display:block;height:7px;background:var(--orange);border-radius:99px;transition:width .3s}
.qcard{background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:26px 22px}
.qnum{font-size:.78rem;color:var(--muted);font-weight:700}
.qtitle{font-family:"Zen Maru Gothic";font-weight:700;font-size:1.28rem;margin:6px 0 18px;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:block;width:100%;text-align:left;background:var(--cream);border:1.5px solid var(--line);
  border-radius:14px;padding:14px 16px;font-size:.97rem;color:var(--ink);cursor:pointer;
  font-family:"Noto Sans JP";transition:all .15s}
.opt:hover{border-color:var(--orange);background:var(--soft)}
.opt.sel{border-color:var(--orange);background:var(--soft)}
.qnav{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.qback{background:none;border:none;color:var(--muted);font-size:.86rem;cursor:pointer}
.qback:disabled{opacity:.35;cursor:default}
.hubgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hubgrid .opt{text-align:center;padding:11px 6px;font-size:.9rem;font-family:"Zen Maru Gothic";font-weight:700}
@media(max-width:480px){.hubgrid{grid-template-columns:repeat(3,1fr)}}

.startbtn{display:block;width:100%;background:var(--orange);color:#fff;border:none;
  font-family:"Zen Maru Gothic";font-weight:700;font-size:1.1rem;border-radius:16px;
  padding:16px;cursor:pointer;box-shadow:0 10px 24px -10px rgba(245,121,59,.6)}
.intro-points{display:flex;flex-direction:column;gap:10px;margin:18px 0 24px}
.intro-points li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--ink2)}
.intro-points .chk{width:22px;height:22px;border-radius:50%;background:var(--green);flex:none;margin-top:2px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700}

.share{display:flex;gap:9px;margin-top:14px}
.share a,.share button{flex:1;text-align:center;background:var(--card);border:1.5px solid var(--line);
  border-radius:14px;padding:11px;font-size:.86rem;font-family:"Zen Maru Gothic";font-weight:700;
  color:var(--ink);cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--orange);text-decoration:none}
.spin{text-align:center;color:var(--muted);padding:40px 0}