/* カーフェイス図鑑 */
:root{
  --bg:#f6f7f9; --panel:#ffffff; --ink:#151a20; --muted:#5f6a75; --line:#e2e6eb;
  --accent:#1668d6; --accent-ink:#fff; --chip:#eef2f7; --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0f1318; --panel:#161c23; --ink:#e8edf3; --muted:#9aa7b4; --line:#242c36;
         --accent:#4b9bff; --chip:#1e2731; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3); }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.75;font-size:16px;letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header / footer */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;letter-spacing:.02em}
.brand__mark{color:var(--accent);font-size:20px}
.nav{display:flex;gap:18px;font-size:14px}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--accent)}
.brand__txt,.nav a{white-space:nowrap}
@media(max-width:600px){.nav{gap:12px;font-size:13px}.brand__txt{font-size:15px}}
@media(max-width:430px){.site-head .wrap{padding:0 14px;gap:8px}.nav{gap:9px;font-size:11.5px}
  .brand{gap:6px}.brand__txt{font-size:13px}.brand__mark{font-size:16px}}

.site-foot{margin-top:64px;border-top:1px solid var(--line);background:var(--panel);padding:32px 0 48px}
.foot-brand{font-weight:700;margin:0 0 8px}
.foot-note{color:var(--muted);font-size:13px;max-width:760px;margin:0 0 16px}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;margin-bottom:12px}
.foot-nav a{color:var(--muted)}
.copy{color:var(--muted);font-size:12px;margin:0}

/* hero */
.hero{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--bg)),var(--bg));
  padding:56px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(26px,4.4vw,40px);line-height:1.35;margin:0 0 12px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__lead{color:var(--muted);margin:0 0 22px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);text-decoration:none;font-weight:700;font-size:15px}
.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn:hover{filter:brightness(1.06)}

/* search box */
.q{position:relative;max-width:560px}
.q input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:15px;font-family:inherit}
.q input:focus{outline:2px solid var(--accent);outline-offset:1px}
.q__res{position:absolute;left:0;right:0;top:52px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);overflow:hidden;max-height:340px;overflow-y:auto;z-index:9}
.q__res a{display:flex;gap:10px;align-items:center;padding:9px 14px;text-decoration:none;font-size:14px;border-bottom:1px solid var(--line)}
.q__res a:last-child{border-bottom:0}
.q__res a:hover{background:var(--chip)}
.q__res img{width:56px;border-radius:6px;background:var(--chip)}
.q__res small{color:var(--muted);margin-left:auto;white-space:nowrap}

/* sections */
.sec{padding:36px 0 8px}
.sec__h{font-size:19px;margin:0 0 18px;display:flex;align-items:baseline;gap:10px;letter-spacing:.01em}
.sec__h a{text-decoration:none}
.sec__h small{color:var(--muted);font-size:13px;font-weight:400}
.page-h{font-size:clamp(22px,3.4vw,30px);margin:6px 0 10px;line-height:1.35}
.page-h small{font-size:14px;color:var(--muted);font-weight:400;margin-left:6px}
.h3{font-size:16px;margin:22px 0 8px}
.lead{color:var(--muted);margin:0 0 20px;max-width:760px}
.muted{color:var(--muted);font-size:13px}

/* breadcrumbs */
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.crumbs a{color:var(--muted)}
.crumbs i{opacity:.5;font-style:normal}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card__img{background:linear-gradient(180deg,var(--chip),var(--panel));padding:10px 6px 0}
.card__body{padding:12px 14px 14px}
.card__maker{margin:0;font-size:11px;color:var(--muted);letter-spacing:.06em}
.card__name{margin:1px 0 2px;font-weight:800;font-size:16px}
.card__gen{margin:0;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card__year{margin:4px 0 0;font-size:12px;color:var(--muted)}
.chip{display:inline-block;background:var(--chip);color:var(--muted);border-radius:999px;
  padding:1px 9px;font-size:11px;font-weight:700;white-space:nowrap}

/* maker + model grids */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mk{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  text-decoration:none;display:flex;justify-content:space-between;align-items:center}
.mk:hover{border-color:var(--accent)}
.mk__name{font-weight:700}
.mk__n{color:var(--muted);font-size:12px}
.ml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ml{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  text-decoration:none;display:flex;flex-direction:column}
.ml:hover{border-color:var(--accent)}
.ml span{color:var(--muted);font-size:12px}

/* finder */
.finder{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 18px 16px;margin-bottom:24px}
.finder fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0 8px}
.finder fieldset:first-of-type{border-top:0}
.finder legend{font-size:13px;font-weight:800;color:var(--muted);padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:inline-block;padding:6px 13px;border-radius:999px;background:var(--chip);
  font-size:13px;cursor:pointer;border:1px solid transparent;user-select:none}
.opt input:checked+span{background:var(--accent);color:#fff;border-color:transparent}
.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.finder__bar{display:flex;align-items:center;gap:14px;padding-top:12px;border-top:1px solid var(--line)}
/* かたちの選択（横向きシルエット） */
.bopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:10px}
.bopt input{position:absolute;opacity:0;width:0;height:0}
.bopt__box{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;
  border:1px solid var(--line);border-radius:12px;background:var(--chip);cursor:pointer;
  color:var(--fg);user-select:none;transition:background .12s,border-color .12s}
.bopt__box svg{width:100%;height:auto;max-width:104px;display:block}
.bopt__box b{font-size:12px;font-weight:700;line-height:1.3;text-align:center}
.bopt__box small{font-size:10.5px;line-height:1.25;text-align:center;opacity:.72}
.bopt input:checked+.bopt__box{background:var(--accent);border-color:transparent;color:#fff}
.bopt input:focus-visible+.bopt__box{outline:2px solid var(--accent);outline-offset:2px}
.more-wrap{text-align:center;margin:22px 0 4px}
/* トップ「かたちから探す」 */
.shape-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.shape{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px 10px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--fg);
  text-decoration:none;transition:border-color .12s,background .12s}
.shape:hover{border-color:var(--accent);background:var(--chip)}
.shape__i{width:100%;height:auto;max-width:110px;display:block}
.shape b{font-size:13px;font-weight:800;text-align:center;line-height:1.3}
.shape span{font-size:11px;color:var(--muted);text-align:center;line-height:1.25}
.sec__more{margin:16px 0 0;font-size:14px}
.sec__more a{color:var(--accent);font-weight:700}
.mgrid .grid__sep,.grid .grid__sep{grid-column:1/-1;margin:14px 0 2px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;font-weight:700}



.count{color:var(--muted);font-size:14px}

/* detail */
.detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
@media(max-width:720px){.detail{grid-template-columns:1fr;gap:14px}}
.detail__fig{background:linear-gradient(180deg,var(--chip),var(--panel));border-radius:12px;padding:14px}
.detail__cap{color:var(--muted);font-size:11px;text-align:center;margin:6px 0 0}
.detail__maker{color:var(--muted);font-size:12px;letter-spacing:.08em;margin:0}
.detail__gen{color:var(--muted);margin:0 0 6px;font-size:14px}
.cues{margin:0;padding-left:1.1em}
.cues li{margin-bottom:4px}
.grades{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.grades li{background:var(--chip);border-radius:8px;padding:3px 11px;font-size:13px}

.spec{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;font-size:14px}
.spec th,.spec td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)}
.spec th{width:38%;color:var(--muted);font-weight:600;background:color-mix(in srgb,var(--chip) 60%,transparent)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

.sibs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.sib{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;
  text-decoration:none;font-size:12px;text-align:center}
.sib span{display:block;padding:4px 2px 2px;font-weight:700}
.sib i{display:block;font-style:normal;color:var(--muted);font-weight:400}
.sib--on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}

.pn-bar{display:flex;justify-content:space-between;gap:12px;margin:24px 0}
.pn{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 16px;
  text-decoration:none;font-size:14px}
.pn--r{margin-left:auto}

/* timeline (車種ページ) */
.tl{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tl__i a{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;text-decoration:none}
.tl__i a:hover{border-color:var(--accent)}
.tl__i img{background:var(--chip);border-radius:8px}
.tl__a--photo img{aspect-ratio:4/3;object-fit:cover}
.sib__ph{aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.tl__i b{font-size:16px;margin-right:8px}
.tl__y{margin:2px 0 0;font-size:13px;color:var(--muted)}
.tl__c{margin:0;font-size:12px;color:var(--muted)}
.tl__cue{margin:4px 0 0;font-size:13px}
@media(max-width:600px){.tl__i a{grid-template-columns:100px 1fr;gap:10px;padding:10px}}

/* ads / affiliate */
.ad{margin:24px 0;text-align:center}
.ad--ph{border:1px dashed var(--line);border-radius:12px;padding:26px 14px;color:var(--muted);
  font-size:13px;background:color-mix(in srgb,var(--chip) 45%,transparent)}
.ad--ph small{font-size:11px;opacity:.8}
.aff{margin:34px 0 10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.aff__h{font-size:16px;margin:0 0 12px}
.aff__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.aff-item{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:11px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  text-decoration:none}
.aff-item strong{font-size:14px}
.aff-item span{font-size:12px;color:var(--muted)}
.aff-item--todo{opacity:.62;cursor:not-allowed}
.aff__note{font-size:11px;color:var(--muted);margin:12px 0 0}

/* テーマ */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tgrid--compact{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.tcard{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:14px;
  text-decoration:none;background:var(--panel);border:1px solid var(--line);
  transition:transform .15s,border-color .15s}
.tcard:hover{transform:translateY(-2px);border-color:var(--accent)}
.tcard__e{font-size:22px;line-height:1.2}
.tcard b{font-size:15px;margin-top:2px}
.tcard__n{font-size:11px;color:var(--muted)}
.tcard__l{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.6}
.theme-h span{margin-right:4px}
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px;align-items:center}
.tchips--inline{margin-bottom:22px}
.tchips__lb{font-size:12px;color:var(--muted);margin-right:2px}
.tchip{display:inline-block;padding:6px 13px;border-radius:999px;background:var(--chip);
  font-size:13px;text-decoration:none}
.tchip:hover{background:var(--accent);color:#fff}

/* 車種カード（テーマ一覧用） */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;transition:transform .15s,box-shadow .15s}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mcard__img{position:relative;background:linear-gradient(180deg,var(--chip),var(--panel));padding:8px 6px 0}
.mcard__img--photo{padding:0}
.mcard__img--photo img{aspect-ratio:4/3;object-fit:cover}
.mcard__b{padding:12px 15px 15px}
.mcard__maker{margin:0;font-size:11px;color:var(--muted);letter-spacing:.06em}
.mcard__name{margin:1px 0 3px;font-weight:800;font-size:17px}
.mcard__meta{margin:0 0 6px;font-size:12px;color:var(--muted)}
.mcard__sum{margin:0;font-size:12.5px;color:var(--muted);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* メーカー公式へのリンク */
.official{display:flex;flex-direction:column;gap:3px;margin:22px 0 6px;padding:15px 18px;
  border-radius:12px;text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--accent)}
.official:hover{border-color:var(--accent)}
.official b{font-size:14px}
.official b::after{content:" ↗";color:var(--muted);font-weight:400}
.official span{font-size:12px;color:var(--muted);line-height:1.6}
.officials{margin:30px 0 10px}
.officials .official{margin:0 0 10px}
.officials__note{font-size:11px;color:var(--muted);margin:0}

/* 画像がまだ無い枠 */
.noimg{display:grid;place-items:center;aspect-ratio:4/3;background:var(--chip);
  color:var(--muted);font-size:12px;border-radius:8px}
.detail--nofig{grid-template-columns:1fr}

/* 実車写真 */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:6px 0 8px}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.shots img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--chip)}
.shots figcaption{padding:8px 12px 10px;font-size:12px}
.shots figcaption b{display:block;font-size:13px;margin-bottom:2px}
.shots__note{font-size:11px;color:var(--muted);margin:2px 0 18px}
.cred{color:var(--muted);font-size:11px;line-height:1.6}
.cred a{color:var(--muted)}
.card__img--photo{padding:0}
.card__img--photo img{aspect-ratio:4/3;object-fit:cover}
.card__img{position:relative}
.card__badge{position:absolute;top:8px;left:8px;background:rgba(16,20,26,.78);color:#fff;
  font-size:10px;padding:2px 7px;border-radius:999px;letter-spacing:.04em}

/* 図の凡例（注釈番号） */
.legend{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.legend li{display:grid;grid-template-columns:26px 150px 1fr;gap:10px;align-items:baseline;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-size:14px}
.legend__n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.legend b{font-weight:700}
@media(max-width:560px){.legend li{grid-template-columns:26px 1fr;row-gap:2px}
  .legend li b{grid-column:2}.legend li span.legend__n{grid-row:span 2}}

.cues--chg li{margin-bottom:5px}
.cues--chg{padding-left:1.1em}

/* 比較への導線 */
.cmpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:18px 0}
.cmpbox{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:12px;
  text-decoration:none;background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.cmpbox b{font-size:14px}
.cmpbox span{font-size:12px;color:var(--muted)}
.difflink{display:inline-block;margin:0 0 0 166px;padding:5px 12px;border-radius:999px;
  font-size:12px;text-decoration:none;background:var(--chip);color:var(--muted)}
.difflink:hover{background:var(--accent);color:#fff}
@media(max-width:600px){.difflink{margin-left:110px}}

/* 比較ページ */
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.cmp2 figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.cmp2 figcaption{text-align:center;font-size:13px;padding-top:6px}
.cmp2 figcaption b{display:block}
.cmp2 figcaption span{color:var(--muted);font-size:12px}
.dtable{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;font-size:14px}
.dtable th,.dtable td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.dtable thead th{background:color-mix(in srgb,var(--chip) 70%,transparent);font-size:12px;color:var(--muted)}
.dtable tbody th{color:var(--muted);font-weight:600;width:30%}
.dtable .was{color:var(--muted)}
.dtable .arw{color:var(--accent);text-align:center;width:28px}
.dtable .now{font-weight:700}
.dtable tr:last-child th,.dtable tr:last-child td{border-bottom:0}
@media(max-width:560px){.dtable{font-size:13px}.dtable th,.dtable td{padding:8px}}

/* docs */
.doc{max-width:760px}
.doc p{margin:0 0 14px}
.bul{padding-left:1.2em}
.empty{color:var(--muted);padding:30px 0}

/* 価格の目安 */
.pchip{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pchip__b{background:var(--accent);color:#fff;font-size:12px;font-weight:800;
  padding:2px 9px;border-radius:999px;white-space:nowrap}
.pchip__r{font-size:11.5px;color:var(--muted)}
.pnote{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;margin:14px 0 4px}
.pnote p{margin:0;font-size:15px}
.pnote b{color:var(--accent)}
.pnote__cap{margin-top:6px !important;font-size:12.5px;color:var(--muted)}

.sortbox{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.sortbox select{font:inherit;color:var(--fg);background:var(--chip);border:1px solid var(--line);
  border-radius:8px;padding:5px 9px}