/* 設備ジム トップページだけの見た目（2026-10-19 案D：はじめての人が迷わない形）
   上から順に「何のサイトか → 3つの使い方 → おすすめの順番 → はじめての1問 → 分野 → よくある質問」 */
:root{ --ok-soft:#DDF0E3; --on-live:#1D2320; --f-mono:ui-monospace,Consolas,"Courier New",monospace }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --ok-soft:#173826 }}
:root[data-theme="dark"]{ --ok-soft:#173826 }

.ico{width:28px;height:28px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-block;font-size:11px;border-radius:4px;padding:0 6px;background:var(--chip);color:var(--muted);line-height:1.7}
.chip.lv{background:var(--live-soft);color:var(--ink)}

/* 何のサイトか */
.hero{display:grid;gap:8px;max-width:680px}
.hero h1{font-size:clamp(26px,5vw,38px)}
.hero .lead{margin:0}
.who{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.who span{font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 12px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:10px 18px;font-weight:600;text-decoration:none;font-size:15px}
.btn.main{background:var(--live);color:var(--on-live)}   /* オレンジの上は、明るい・暗い表示のどちらでも濃い文字（読みやすさのため） */
.btn.main:hover{filter:brightness(1.05)}
.btn.sub{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn .ico{width:20px;height:20px}

/* 3つの使い方 */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.doors{grid-template-columns:minmax(0,1fr)}}
.door{display:grid;grid-template-rows:auto auto 1fr auto;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--ink);text-decoration:none}
.door:hover{border-color:var(--live)}
.door .badge{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--live-soft);color:var(--ink)}
.door.b2 .badge{background:var(--chip)}
.door.b3 .badge{background:var(--ok-soft);color:var(--ok)}
.door h3{font-size:18px;margin:4px 0 0}
.door .q{font-size:13px;color:var(--muted)}
.door p{margin:0;font-size:14px}
.door .go{font-size:14px;color:var(--focus);font-weight:600}

/* おすすめの順番 */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.flow div{padding:14px 16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;border-left:1px solid var(--line)}
.flow div:first-child{border-left:none}
@media (max-width:760px){.flow{grid-template-columns:minmax(0,1fr)}.flow div{border-left:none;border-top:1px solid var(--line)}.flow div:first-child{border-top:none}}
.flow .no{font-family:var(--f-mono);font-size:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--surface);grid-row:span 2}
.flow b{font-family:var(--f-display)}
.flow span.d{font-size:13px;color:var(--muted)}

/* はじめての1問 */
.first{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--live);border-radius:12px;padding:16px 18px}
@media (max-width:600px){.first{grid-template-columns:minmax(0,1fr)}}
.first .from{font-size:12px;color:var(--muted)}
.first .msg{font-family:var(--f-display);font-size:18px;font-weight:700}
.first .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* 分野から選ぶ */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat{display:grid;gap:4px;justify-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);text-decoration:none}
.cat:hover{border-color:var(--live)}
.cat .ico{color:var(--muted)}
.cat b{font-family:var(--f-display);font-size:15px}
.cat span{font-size:12px;color:var(--muted)}

/* よくある質問 */
.faq{display:grid;gap:8px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:6px 0 0;font-size:14px;color:var(--muted)}