/* クルシラ正式版 共通スタイル（PC版パレット #142e38 ＋ βのクリーム/コーラル） */
:root{
  --ink:#142e38; --ink2:#1d4250; --bg:#f7faf8; --cream:#fff8ec; --card:#ffffff;
  --coral:#ff7a59; --coral-d:#e85d3d; --teal:#2e7d74; --line:#dfe7e2;
  --gold:#c9a227; --silver:#9aa5ab; --bronze:#b07a4a; --muted:#5c6d72;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
a{color:var(--teal)}
img{max-width:100%}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;z-index:40;background:var(--ink);color:#fff}
.site-header .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:.04em;flex:none;white-space:nowrap}
.brand img{width:38px;height:38px;border-radius:9px;background:#fff}
.brand small{display:block;font-size:10px;font-weight:600;color:#bcd2d8;letter-spacing:.08em}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:#dcebee;text-decoration:none;font-size:13px;padding:6px 9px;border-radius:8px}
.nav a:hover,.nav a[aria-current]{background:var(--ink2);color:#fff}
main{padding:22px 0 8px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--coral-d);margin:0 0 4px}
h1{font-size:28px;line-height:1.35;margin:0 0 10px}
h2.sec{font-size:21px;margin:30px 0 6px;padding-left:10px;border-left:5px solid var(--coral)}
h2.sec:first-child{margin-top:6px}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 12px}
.btn{display:inline-block;background:var(--coral);color:#fff;border:none;border-radius:999px;padding:12px 22px;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--coral-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.small{padding:8px 16px;font-size:13.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card .pad{padding:13px 15px}
.card h3{margin:0 0 4px;font-size:16.5px}
.card p{margin:4px 0;font-size:13.5px}
.card .car-photo{aspect-ratio:16/10;object-fit:cover;width:100%;display:block;background:#e8eeeb}
.price{font-weight:800;font-size:17px}
.price small{font-weight:600;color:var(--muted);font-size:12px}
.spec-line{font-size:13px;color:var(--ink2)}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;background:#eef4f1;color:var(--ink2);margin-right:5px}
.badge.warn{background:#fdeee8;color:var(--coral-d)}
.badge.ev{background:#e3f2ef;color:var(--teal)}
.note{font-size:12px;color:var(--muted)}
.src{font-size:12px;color:var(--muted);margin-top:8px}
.src a{color:var(--muted)}
.hero{background:var(--cream);border:1px solid #f0e3c8;border-radius:18px;padding:22px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero .art{margin-left:auto;text-align:center}
.hero .art img{width:190px}
.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:14px 0}
.entry{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;text-decoration:none;color:var(--ink)}
.entry:hover{border-color:var(--coral)}
.entry b{font-size:16px;display:block;margin-bottom:3px}
.entry span{font-size:12.5px;color:var(--muted)}
.bonus-zone{border:1.5px dashed #c8b28a;background:#fffdf6;border-radius:16px;padding:16px;margin-top:34px}
.bonus-zone h2.sec{border-left-color:#c8a24a}
/* tabs & tables */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.tab{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--ink2)}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
select.picker{font-size:14px;padding:8px 10px;border-radius:9px;border:1.5px solid var(--line);background:#fff}
table.rank{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.rank th,table.rank td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:14px;text-align:left}
table.rank td.num,table.rank th.num{text-align:right;font-variant-numeric:tabular-nums}
table.rank tbody tr{cursor:pointer}
table.rank tbody tr:hover{background:#fdf3ec}
.rk{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:#eef1f0}
.rk.m1{background:#f6d365;color:#6b4e00}.rk.m2{background:#dde3e6;color:#45525a}.rk.m3{background:#eec39f;color:#6e4420}
.thumb{width:64px;height:44px;object-fit:cover;border-radius:7px;vertical-align:middle;background:#e8eeeb}
/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,25,32,.55);z-index:80;display:none;align-items:flex-end;justify-content:center}
.modal-backdrop.open{display:flex}
.modal{background:#fff;width:min(680px,100%);max-height:88vh;overflow:auto;border-radius:16px 16px 0 0;padding:0 0 18px}
@media(min-width:700px){.modal-backdrop{align-items:center}.modal{border-radius:16px}}
.modal .car-photo{width:100%;aspect-ratio:16/9;object-fit:cover;background:#e8eeeb}
.modal .pad{padding:14px 18px}
.modal h3{margin:0 0 2px;font-size:19px}
.modal .x{position:sticky;top:10px;margin-left:calc(100% - 52px);z-index:2;background:rgba(20,46,56,.75);color:#fff;border:none;width:36px;height:36px;border-radius:50%;font-size:17px;cursor:pointer}
.credit{font-size:11.5px;color:var(--muted)}
table.spec{width:100%;border-collapse:collapse;font-size:13.5px}
table.spec th,table.spec td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
table.spec th{width:34%;color:var(--ink2);font-weight:700}
.site-footer{margin-top:44px;background:var(--ink);color:#cfe0e4;font-size:12.5px}
.site-footer .wrap{padding-top:20px;padding-bottom:26px}
.site-footer a{color:#9fc6cf}
.tappable{cursor:pointer}
.article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;font-size:14.5px}
.article h1{font-size:20px}.article h2{font-size:17px;margin-top:22px}.article h3{font-size:15px}
.article table{border-collapse:collapse;width:100%;font-size:13px;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--line);padding:5px 8px;text-align:left}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:4px;color:var(--ink2)}
.field input,.field select{width:100%;font-size:15px;padding:9px 10px;border:1.5px solid var(--line);border-radius:9px;background:#fff}
.result-box{background:var(--cream);border:1px solid #f0e3c8;border-radius:var(--radius);padding:16px 18px;margin-top:16px}
.result-box .big{font-size:22px;font-weight:800}
/* 図鑑（メーカー別一覧・過去車図鑑） */
.appeal{font-weight:700;color:var(--ink2)}
.decade{font-size:17px;margin:24px 0 8px;padding-left:10px;border-left:5px solid var(--gold)}
.score-total{font-size:30px;font-weight:800;margin:2px 0 8px}
.score-total small{font-size:13px;font-weight:600;color:var(--muted)}
.axis{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:4px 0}
.axis .lb{width:92px;flex:none;font-weight:700;color:var(--ink2)}
.axis .bar{flex:1;height:9px;background:#e8eeeb;border-radius:99px;overflow:hidden}
.axis .bar i{display:block;height:100%;background:var(--coral);border-radius:99px}
.axis .vl{width:44px;flex:none;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
/* 関連車リンク（詳細モーダル内の回遊導線） */
.rel-back-wrap{padding-bottom:0}
.rel-back{background:none;border:none;color:var(--teal);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:4px 0}
.rel-back:hover{text-decoration:underline}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px;margin:6px 0 4px}
.rel-chip{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:7px 9px;cursor:pointer;font:inherit;color:var(--ink)}
.rel-chip:hover{border-color:var(--coral)}
.rel-chip img{width:58px;height:42px;object-fit:cover;border-radius:7px;background:#e8eeeb;flex:none}
.rel-main{flex:1;min-width:0}
.rel-name{display:block;font-size:13px;font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-sub{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.rel-tag{font-size:10px;font-weight:700;color:var(--teal);background:#e3f2ef;border-radius:999px;padding:1px 7px}
.rel-side .badge{margin-right:0}

/* 名車度ティア枠（90点〜：伝説級＝レインボー／80点〜：名車級＝金／70点〜：優良級＝銀）
   グラデーション枠は「内側は地色で塗り、枠の部分だけグラデーションを見せる」
   二重背景＋透明ボーダーの方式。border-radius にも追随する。 */
@property --tier-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.tier-rainbow{border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--tier-angle),#ff6b6b,#ffa94d,#ffe066,#8ce99a,#66d9e8,#748ffc,#b197fc,#ff6b6b) border-box;box-shadow:0 0 12px rgba(255,180,84,.35);animation:tier-flow 7s linear infinite}
.tier-gold{border:2.5px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(125deg,#f7e08a,#c9a227 32%,#fff3b0 52%,#a87e14 74%,#f7e08a) border-box;box-shadow:0 0 9px rgba(201,162,39,.38)}
.tier-silver{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(125deg,#f4f6f7,#9aa5ab 35%,#e8edef 55%,#7e8a90) border-box}
@keyframes tier-flow{to{--tier-angle:360deg}}
@media (prefers-reduced-motion: reduce){.tier-rainbow{animation:none}}
/* 関連チップはホバー時も枠を保つ（通常のホバー色に潰されないように） */
.rel-chip.tier-rainbow:hover,.rel-chip.tier-gold:hover,.rel-chip.tier-silver:hover{border-color:transparent}
.rel-chip.tier-rainbow:hover{box-shadow:0 0 15px rgba(255,180,84,.5)}
.rel-chip.tier-gold:hover{box-shadow:0 0 12px rgba(201,162,39,.55)}
/* 詳細モーダル：スコア表示まわりの枠ボックスと、上部写真の枠 */
.score-box{border-radius:12px;padding:12px 14px 4px;margin:14px 0 6px}
.hero-frame{line-height:0}
.hero-frame .car-photo{display:block}
/* ページ上部の凡例チップ */
.tier-legend .lg{display:inline-block;border-radius:7px;padding:0 8px;margin:1px 1px;font-weight:700;font-size:12px;color:var(--ink)}