/* チエコネクト：「整備記録帳」の見た目（試作 ver2 から） */
:root{
  --bg:#F4F3EF; --surface:#FFFFFF; --ink:#16181A; --muted:#6B6F73; --line:#E3E1DA; --soft:#EEECE7;
  --signal:#E8A500; --on-signal:#16181A; --link:#1F5E9C; --navy:#1C2B45; --gold:#D4AF37;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  --f-display:"Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
  --f-body:"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  --f-data:"Consolas","Menlo",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#121314; --surface:#1C1E20; --ink:#ECEAE4; --muted:#9A9EA3; --line:#2C2F33; --soft:#24272A;
  --signal:#F2B705; --on-signal:#121314; --link:#8AB8E6; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.8;overflow-x:hidden}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:24px}
@media (max-width:600px){.wrap{padding-inline:16px}}

.bar{background:var(--surface);border-bottom:3px solid var(--signal)}
.brand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-block:12px}
.brand img{display:block}
.logo{font-family:var(--f-display);font-weight:900;font-size:1.45rem;display:flex;align-items:baseline;gap:10px}
.logo-en{font-family:var(--f-data);font-size:.66rem;font-weight:400;letter-spacing:.22em;opacity:.55}
.tagline{color:var(--muted);font-size:.85rem}

main{padding-block:24px 48px;display:grid;gap:44px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance}
h2{font-weight:900;font-size:1.4rem;margin:0 0 10px}
h3{font-weight:700;font-size:1.05rem;margin:0 0 4px}
.by{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.label{font-family:var(--f-data);letter-spacing:.12em;font-size:.72rem;color:var(--muted)}

.hero{background:#1b1f23;color:#fff;border-radius:16px;padding:40px 32px 34px;display:grid;gap:12px;box-shadow:var(--shadow);
  background-image:linear-gradient(120deg,#1b1f23 0%,#24303d 100%)}
.hero-date{justify-self:start;background:var(--signal);color:#16181A;font-weight:700;font-size:.85rem;padding:2px 12px;border-radius:999px}
.hero h1{word-break:auto-phrase;margin:0;font-weight:900;font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.3}
.hero-lead{margin:0;opacity:.85;max-width:44em}
.cd-wrap{display:grid;gap:4px;margin-top:6px}
.cd-l{font-size:.85rem;opacity:.75}
.cd{display:flex;gap:10px}
.cd-u{background:rgba(255,255,255,.08);border-radius:10px;padding:8px 14px 6px;min-width:84px;text-align:center}
.cd-u strong{display:block;font-family:var(--f-data);font-size:2rem;line-height:1.1;color:var(--signal)}
.cd-u small{font-size:.75rem;opacity:.8}
.btn-main{justify-self:start;margin-top:8px;background:var(--signal);color:#16181A;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:10px}
@media (max-width:600px){.hero{padding:28px 20px}.cd-u{min-width:0;flex:1;padding:6px 8px 4px}.cd-u strong{font-size:1.6rem}.btn-main{justify-self:stretch;text-align:center}}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.feat,.box{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px}
.feat p{margin:0;font-size:.93rem}
.safety{margin:0;padding-left:1.4em;line-height:1.9}

.founder{background:var(--surface);border-radius:16px;box-shadow:var(--shadow),inset 4px 0 0 var(--signal);padding:26px;display:grid;gap:10px}
.founder h2{margin:0}
.perks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.perks li{background:var(--soft);border-radius:12px;padding:14px 16px}
.perks p{margin:6px 0 0;font-size:.9rem}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.fb{display:inline-block;font-size:.75rem;font-weight:700;padding:1px 10px;border-radius:999px;background:var(--navy);color:#fff}
.fb.gold{color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
.tb{display:inline-block;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px}
.tb.r1{background:#F4E4D4;color:#74401A;box-shadow:inset 0 0 0 1px #C98B55}
.tb.r2{background:#ECEFF2;color:#44505B;box-shadow:inset 0 0 0 1px #A3ADB6}
.tb.r3{background:#FBF0C6;color:#6E5100;box-shadow:inset 0 0 0 1px #D4AF37}
.tb.r4{background:linear-gradient(135deg,#F7FAFB,#D9E5EA);color:#2C434B;box-shadow:inset 0 0 0 1px #8EAAB4}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.steps li{background:var(--soft);border-radius:10px;padding:10px 12px;font-size:.9rem}
.steps b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--ink);color:var(--surface);margin-right:6px;font-family:var(--f-data)}
@media (max-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.soon{border-left:4px solid var(--signal);background:var(--soft);border-radius:8px;padding:10px 14px;font-size:.92rem}

.apply{display:grid;gap:16px;background:var(--soft);border-radius:12px;padding:18px}
.apply fieldset{border:0;padding:0;margin:0;min-width:0}
.apply legend,.fld label{font-weight:700;font-size:.95rem;margin-bottom:6px;padding:0}
.apply em{font-style:normal;font-size:.7rem;background:var(--signal);color:var(--on-signal);border-radius:4px;padding:0 6px;margin-left:6px;vertical-align:2px}
.cks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:6px}
.ck{display:flex;gap:8px;align-items:flex-start;background:var(--surface);border-radius:8px;padding:8px 10px;font-size:.92rem;cursor:pointer}
.ck input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--ink)}
.consent{background:none;padding:0}
.fld{display:grid;gap:4px}
.fld input,.fld select,.fld textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:100%}
.fld textarea{min-height:80px;resize:vertical}
.apply small{color:var(--muted);font-size:.8rem}
.apply .btn-main{border:0;cursor:pointer;font:inherit;font-weight:700;justify-self:start}
.apply .btn-main:disabled{opacity:.5}
.err{color:#C8372D;font-weight:700;margin:0}
.done{border-left:4px solid #2E7D4F;background:var(--soft);border-radius:8px;padding:12px 16px}
.done h3{margin:0 0 4px}
.done p{margin:0}
.sns{display:flex;flex-wrap:wrap;gap:8px}
.sns-b{display:grid;background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:10px 16px;min-width:180px;color:inherit;text-decoration:none}
.sns-b span{font-family:var(--f-data);font-size:.8rem;color:var(--muted)}
@media (max-width:600px){.sns-b{flex:1 1 140px;min-width:0}}
.foot{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-block:14px 32px}