/* おだやか — やわらかいトーン。評価でなく相性、を視覚でも伝える */
:root{
  --bg:#f5f3ee;
  --bg2:#eef3f0;
  --card:#fffdf9;
  --ink:#33312c;
  --ink-soft:#6f6a60;
  --line:#e7e2d7;
  --accent:#6fae9b;
  --accent-deep:#4f8d7c;
  --accent-soft:#e7f1ed;
  --you:#4f8d7c;        /* レーダー：あなた */
  --clinic:#c79a5b;     /* レーダー：先生 */
  --warm:#e7b27a;
  --good:#5b9e86;
  --bad:#c98b6b;
  --shadow:0 8px 30px rgba(70,64,52,.09);
  --radius:20px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1b1a17; --bg2:#1a201d; --card:#26241f; --ink:#ece8df; --ink-soft:#a9a294;
    --line:#3a372f; --accent-soft:#23302b; --clinic:#c79a5b; --shadow:0 8px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--bg2), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, var(--accent-soft), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}

/* ヘッダー / フッター */
.site-head{display:flex; align-items:center; justify-content:space-between; padding:18px clamp(16px,5vw,40px); max-width:920px; margin:0 auto}
.brand{display:flex; align-items:center; gap:9px}
.logo{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;font-size:16px;box-shadow:0 3px 10px rgba(79,141,124,.35)}
.brand-name{font-weight:700; font-size:20px; letter-spacing:.04em}
.brand-tag{color:var(--ink-soft); font-size:12.5px}
.site-foot{max-width:920px; margin:40px auto; padding:20px clamp(16px,5vw,40px); color:var(--ink-soft); font-size:12px; border-top:1px solid var(--line)}
.site-foot p{margin:.3em 0}
main{max-width:920px; margin:0 auto; padding:8px clamp(16px,5vw,40px) 0}

/* カード共通 */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(22px,4vw,38px); margin-bottom:20px}
.kicker{color:var(--accent-deep); font-weight:700; font-size:12.5px; letter-spacing:.08em; margin:0 0 10px}
h1{font-size:clamp(30px,6.5vw,46px); line-height:1.28; margin:.1em 0 .4em; letter-spacing:.02em}
h2{font-size:clamp(20px,4vw,26px); margin:.1em 0 .7em}
h3{font-size:18px; margin:0}
.lead{font-size:15.5px; margin:.4em 0 1.2em}
.note{color:var(--ink-soft); font-size:12px; margin-top:14px}
.sub{color:var(--ink-soft); font-size:14px}

/* 登場アニメ */
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.fade-in{animation:fadeUp .45s cubic-bezier(.2,.7,.2,1) both}
.cards .clinic{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* イントロ */
.intro .bullets{list-style:none; padding:0; margin:0 0 22px}
.intro .bullets li{padding:11px 14px 11px 42px; margin:8px 0; background:var(--accent-soft); border-radius:12px; position:relative; font-size:14.5px}
.intro .bullets li::before{content:"◍"; color:var(--accent-deep); position:absolute; left:16px}
.learn-line{font-size:13px; color:var(--ink-soft); margin:16px 0 0; display:flex; align-items:center; gap:7px}
.learn-line b{color:var(--accent-deep)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(111,174,155,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(111,174,155,.55)}70%{box-shadow:0 0 0 9px rgba(111,174,155,0)}100%{box-shadow:0 0 0 0 rgba(111,174,155,0)}}

/* ボタン */
button{font-family:inherit; cursor:pointer; border:none; transition:.16s}
.primary{background:linear-gradient(135deg,var(--accent-deep),var(--accent)); color:#fff; font-size:16px; font-weight:700; padding:14px 30px; border-radius:999px; box-shadow:0 6px 18px rgba(79,141,124,.32); display:inline-flex; align-items:center; gap:8px}
.primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(79,141,124,.4)}
.primary .arrow{transition:.16s}
.primary:hover .arrow{transform:translateX(4px)}
.ghost{background:none; color:var(--ink-soft); padding:10px 4px; margin-top:14px; font-size:14px}
.ghost:hover{color:var(--ink)}

/* アンケート */
.progress{height:7px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:18px}
.progress .bar{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-deep)); border-radius:999px; transition:width .4s cubic-bezier(.2,.7,.2,1)}
.options{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.opt{text-align:left; background:var(--card); border:1.5px solid var(--line); border-radius:13px; padding:15px 18px; font-size:15px; color:var(--ink)}
.opt:hover{border-color:var(--accent); background:var(--accent-soft); transform:translateX(3px)}
.field{display:block; font-size:14px; color:var(--ink-soft); margin:6px 0 18px}
.field select{display:block; width:100%; margin-top:6px; padding:12px 14px; font-size:15px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink)}
.checks{display:flex; gap:18px; flex-wrap:wrap; margin:6px 0 22px}
.checks label{font-size:14.5px; display:flex; align-items:center; gap:7px}
.concerns{display:flex; flex-direction:column; gap:8px; margin:10px 0 24px}
.chip{display:flex; align-items:center; gap:9px; padding:11px 15px; border:1.5px solid var(--line); border-radius:12px; font-size:14.5px; cursor:pointer}
.chip:hover{border-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent-deep); width:17px; height:17px}

/* 結果ヘッダー */
.result-head{padding:6px 4px 2px}
.you-type{font-size:14px; margin:.2em 0 .5em}
.you-type b{color:var(--accent-deep)}
.cards{display:flex; flex-direction:column; gap:16px}

/* クリニックカード */
.clinic{position:relative}
.clinic.best{border-color:var(--accent); box-shadow:0 12px 34px rgba(79,141,124,.2)}
.ribbon{position:absolute; top:-11px; left:22px; background:linear-gradient(135deg,var(--accent-deep),var(--accent)); color:#fff; font-size:12px; font-weight:700; padding:4px 13px; border-radius:999px; box-shadow:0 4px 10px rgba(79,141,124,.35)}
.clinic-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.clinic-id{min-width:0}
.meta{color:var(--ink-soft); font-size:13px; margin:4px 0 8px}
.spec{display:flex; flex-wrap:wrap; gap:6px}
.spectag{background:var(--bg); border:1px solid var(--line); color:var(--ink-soft); font-size:11.5px; padding:3px 9px; border-radius:999px}

/* リングゲージ */
.ring-wrap{flex-shrink:0; width:92px}
.ring{width:92px; height:92px; transform:rotate(-90deg)}
.ring-track{fill:none; stroke:var(--line); stroke-width:9}
.ring-val{fill:none; stroke:var(--accent-deep); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.ring-num{transform:rotate(90deg); transform-origin:60px 60px; fill:var(--accent-deep); font-size:30px; font-weight:800; text-anchor:middle}
.ring-cap{transform:rotate(90deg); transform-origin:60px 60px; fill:var(--ink-soft); font-size:12px; text-anchor:middle}

/* 本体（レーダー＋詳細） */
.clinic-body{display:flex; gap:18px; align-items:center; margin:14px 0 6px}
.radar-wrap{flex-shrink:0; width:190px; text-align:center}
.radar{width:190px; height:200px; overflow:visible}
.rad-grid{fill:none; stroke:var(--line); stroke-width:1}
.rad-spoke{stroke:var(--line); stroke-width:1}
.rad-label{fill:var(--ink-soft); font-size:11px; font-weight:600}
.rad-clinic{fill:rgba(199,154,91,.16); stroke:var(--clinic); stroke-width:2; stroke-dasharray:4 3}
.rad-you{fill:rgba(79,141,124,.22); stroke:var(--you); stroke-width:2}
.radar-legend{display:flex; justify-content:center; gap:14px; margin-top:2px; font-size:11.5px}
.lg{display:flex; align-items:center; gap:5px; color:var(--ink-soft)}
.lg::before{content:""; width:11px; height:11px; border-radius:3px; display:inline-block}
.lg.you::before{background:rgba(79,141,124,.5); border:2px solid var(--you)}
.lg.doc::before{background:rgba(199,154,91,.3); border:2px dashed var(--clinic)}
.clinic-detail{min-width:0}
.blurb{font-size:14px; margin:0 0 8px}
.why{list-style:none; padding:0; margin:6px 0; display:flex; flex-direction:column; gap:4px}
.why li{font-size:13.5px; color:var(--accent-deep)}
.caution{list-style:none; padding:0; margin:4px 0}
.caution li{font-size:13px; color:#b07a4e}

/* 近いタイプの相性バー */
.similar{margin:12px 0 4px; font-size:13px}
.similar-bar{height:8px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:6px}
.similar-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-deep)); border-radius:999px; transition:width .9s cubic-bezier(.2,.7,.2,1)}
.similar b{color:var(--accent-deep)}
.voices{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px}
.voice{font-size:12px; padding:4px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--ink-soft)}
.voice.good{border-color:var(--good); color:var(--good)}
.voice.bad{border-color:var(--bad); color:var(--bad)}

/* フィードバック */
.fb{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line)}
.fb-label{font-size:13px; color:var(--ink-soft)}
.fb-btns{display:flex; gap:8px; margin-top:9px}
.fb-btns button{flex:1; padding:10px; border-radius:11px; font-size:13.5px; font-weight:700; border:1.5px solid var(--line); background:var(--card); color:var(--ink)}
.fb-good:hover{border-color:var(--good); color:var(--good); background:var(--accent-soft)}
.fb-mid:hover{border-color:var(--warm); color:#b07a4e}
.fb-bad:hover{border-color:var(--bad); color:var(--bad)}
.fb-thanks{font-size:13px; color:var(--accent-deep); display:block; padding:4px 0}

/* 学習パネル */
.learn-panel{background:linear-gradient(135deg,var(--accent-soft),var(--card)); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:11px; margin-bottom:16px}
.learn-panel b{color:var(--accent-deep)}
.learn-dot{flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(111,174,155,.6); animation:pulse 1.8s infinite}
.result-foot{text-align:center; margin:8px 0 4px}

/* モード切替（実データ / 未来の姿デモ） */
.mode-toggle{display:flex; gap:10px; margin:0 0 20px}
.mode{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 10px; border-radius:13px; border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:14.5px; font-weight:700}
.mode small{font-size:11px; font-weight:400}
.mode:hover{border-color:var(--accent)}
.mode.on{border-color:var(--accent-deep); background:var(--accent-soft); color:var(--accent-deep)}
.micro-note{color:var(--ink-soft); font-size:12px; margin:-12px 0 20px}

/* 初診の道具箱 */
.toolbox h3{font-size:19px; margin:0 0 6px}
.tb-sec{margin-top:14px}
.tb-sec h4{margin:0 0 6px; font-size:13.5px; color:var(--accent-deep); letter-spacing:.04em}
.tb-sec ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.tb-sec li{background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:10px 14px; font-size:14px}
.tb-say li{border-left:3px solid var(--accent)}
.tb-watch li{border-left:3px solid var(--warm)}
.tb-copy{margin-top:16px}

/* 実データカード */
.clinic.real .meta{margin:2px 0}
.clinic.real .meta.tel a{color:var(--accent-deep); text-decoration:none; font-weight:700}
.similar.tier-few{color:var(--ink-soft)}
.similar.tier-few b{color:var(--accent-deep)}

/* レスポンシブ：狭い画面ではレーダーを上下に */
@media (max-width:560px){
  .clinic-body{flex-direction:column; align-items:stretch}
  .radar-wrap{width:100%}
  .radar{width:100%; max-width:240px; margin:0 auto; display:block}
}