@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=BIZ+UDPGothic:wght@400;700&display=swap");
/* みなみ自動車整備工場 — 工場の硬質さと、見積もりの明快さ */
:root{--ch:#1e2124;--ch2:#2a2e33;--or:#ff6a13;--or-d:#d9530a;--steel:#eceff2;--line:#d3d8de;--ink:#1b1e22;--sub:#5d646c;--amber:#ffb400;--g:"BIZ UDPGothic","Hiragino Sans",sans-serif;--o:"Oswald","Arial Narrow",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.85 var(--g);letter-spacing:.02em}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.skip{position:fixed;left:1rem;top:-5rem;z-index:99;background:var(--or);color:#fff;padding:.6rem 1rem}.skip:focus{top:1rem}
.wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.stripe{height:10px;background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,var(--ch) 14px 28px)}
/* header */
.hd{background:var(--ch);color:#fff;position:sticky;top:0;z-index:40}
.hd .wrap{display:flex;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:center;gap:10px}
.logo i{font-style:normal;width:40px;height:40px;background:var(--or);display:grid;place-items:center;font:700 22px/1 var(--o)}
.logo b{display:block;font:700 17px/1.2 var(--g);letter-spacing:.06em}.logo small{display:block;font:500 11px/1 var(--o);letter-spacing:.2em;color:#aeb4bb}
.nav{margin-left:auto}.nav ul{display:flex;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:0 16px;line-height:72px;font:700 14px var(--g);border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--or);color:var(--or)}
.tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.tel b{font:600 22px var(--o);letter-spacing:.04em}.tel small{font-size:11px;color:#aeb4bb}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;background:var(--or);color:#fff;font:700 15px/1.2 var(--g);border:0;cursor:pointer;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:background .2s}
.cta:hover{background:var(--or-d)}
.cta.dark{background:var(--ch)}.cta.dark:hover{background:#000}
.cta.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor;clip-path:none}
.menu-btn{display:none}
@media(max-width:1080px){.nav{display:none}.tel{margin-left:auto}.menu-btn{display:block;background:none;border:2px solid #fff;color:#fff;padding:6px 10px;font:600 13px var(--o);letter-spacing:.14em}.nav.open{display:block;position:absolute;left:0;right:0;top:72px;background:var(--ch2)}.nav.open ul{flex-direction:column}.nav.open a{line-height:1.4;padding:16px 20px;border-bottom:1px solid #3a3f45}}
@media(max-width:640px){.tel{display:none}.menu-btn{margin-left:auto}}
/* hero + シミュレーター */
.hero{background:var(--ch);color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:-10%;top:0;bottom:0;width:55%;background:var(--ch2);transform:skewX(-14deg)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 470px;gap:48px;align-items:center;padding:64px 0 96px}
.hero .kick{display:inline-flex;align-items:center;gap:10px;font:600 14px var(--o);letter-spacing:.2em;color:var(--amber)}
.hero .kick:before{content:"";width:28px;height:3px;background:var(--amber)}
.hero h1{margin:16px 0 0;font:700 clamp(32px,4.6vw,56px)/1.35 var(--g);letter-spacing:.04em}
.hero h1 em{font-style:normal;color:var(--or)}
.hero p{margin:18px 0 26px;color:#c9ced4;max-width:30em}
.pts{display:flex;gap:0;margin:0;padding:0;list-style:none;border:1px solid #3d434a;width:max-content;max-width:100%;flex-wrap:wrap}
.pts li{padding:12px 18px;border-left:1px solid #3d434a;font-size:13px;color:#c9ced4}.pts li:first-child{border-left:0}
.pts b{display:block;font:600 26px/1 var(--o);color:#fff}
.sim{background:#fff;color:var(--ink);padding:28px;border-top:6px solid var(--or)}
.sim h2{margin:0;font:700 20px/1.4 var(--g);display:flex;justify-content:space-between;align-items:baseline}
.sim h2 small{font:500 12px var(--o);letter-spacing:.2em;color:var(--or)}
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 12px}
.sizes button{border:2px solid var(--line);background:#fff;padding:10px 4px 8px;cursor:pointer;text-align:center;font:700 13px/1.3 var(--g)}
.sizes button svg{display:block;width:44px;height:24px;margin:0 auto 4px}
.sizes button small{display:block;font:400 10.5px var(--g);color:var(--sub)}
.sizes button[aria-pressed=true]{border-color:var(--or);background:#fff4ec;color:var(--or-d)}
.old{display:flex;gap:8px;align-items:center;font-size:13px;margin:0 0 12px}
.old input{accent-color:var(--or);width:18px;height:18px}
.bd{margin:0;border-top:2px solid var(--ch)}
.bd div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.bd dd{margin:0;font:500 17px var(--o)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.total span{font:700 14px var(--g)}
.total b{font:700 44px/1 var(--o);color:var(--or)}.total b small{font:700 15px var(--g);color:var(--ink);margin-left:4px}
.sim .note{margin:8px 0 14px;font-size:11.5px;color:var(--sub);line-height:1.7}
.sim .cta{width:100%}
@media(max-width:960px){.hero .wrap{grid-template-columns:1fr}.hero:before{display:none}}
/* セクション見出し */
.sec{padding:88px 0}.sec.steel{background:var(--steel)}.sec.dark{background:var(--ch);color:#fff}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.sh .en{display:block;font:600 14px var(--o);letter-spacing:.24em;color:var(--or)}
.sh h2{margin:6px 0 0;font:700 clamp(24px,3vw,34px)/1.4 var(--g);letter-spacing:.04em}
.sh p{margin:0;color:var(--sub);max-width:30em;font-size:15px}
.sec.dark .sh p{color:#b7bdc4}
/* 警告灯 */
.lamps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#11141a;border:2px solid #11141a}
.lamp{background:#181c22;padding:24px 20px;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.lamp svg{width:48px;height:48px}
.lamp h3{margin:0;font:700 16px/1.5 var(--g);color:#fff}
.lamp p{margin:4px 0 0;font-size:13px;color:#9aa2ab;line-height:1.7}
.lamp.red svg{filter:drop-shadow(0 0 8px rgba(255,70,50,.6))}.lamp.amb svg{filter:drop-shadow(0 0 8px rgba(255,180,0,.55))}
@media(max-width:960px){.lamps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.lamps{grid-template-columns:1fr}}
/* 流れ */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0;padding:0;list-style:none;counter-reset:f}
.flow li{counter-increment:f;position:relative;padding:22px 20px 22px;background:#fff;border:1px solid var(--line);margin-left:-1px}
.flow li:before{content:"STEP " counter(f,decimal-leading-zero);font:600 13px var(--o);letter-spacing:.2em;color:var(--or)}
.flow h3{margin:6px 0 4px;font:700 17px/1.5 var(--g)}
.flow .t{display:inline-block;font:500 13px var(--o);background:var(--ch);color:#fff;padding:1px 8px;letter-spacing:.06em}
.flow p{margin:8px 0 0;font-size:13.5px;color:var(--sub)}
@media(max-width:960px){.flow{grid-template-columns:1fr 1fr}}@media(max-width:560px){.flow{grid-template-columns:1fr}}
/* 料金表 */
.price{width:100%;border-collapse:collapse;background:#fff}
.price th,.price td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.price thead th{background:var(--ch);color:#fff;font:600 13px var(--o);letter-spacing:.14em}
.price td.y{text-align:right;font:600 24px var(--o);white-space:nowrap}.price td.y small{font:700 12px var(--g);margin-left:2px}
.price td small.d{display:block;color:var(--sub);font-size:12.5px}
.price .cat td{background:var(--steel);font:700 13px var(--g);color:var(--sub);padding:10px 18px}
/* 約束・数字 */
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pr{border-top:4px solid var(--or);padding-top:18px}
.pr .n{font:700 48px/1 var(--o);color:var(--line)}
.pr h3{margin:6px 0 6px;font:700 19px/1.5 var(--g)}.pr p{margin:0;color:var(--sub);font-size:15px}
@media(max-width:860px){.promises{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #3d434a}
.facts div{padding:26px 22px;border-left:1px solid #3d434a}.facts div:first-child{border-left:0}
.facts b{display:block;font:700 54px/1 var(--o);color:var(--amber)}.facts b small{font:700 15px var(--g);color:#fff;margin-left:4px}
.facts span{display:block;margin-top:8px;font-size:13px;color:#b7bdc4}
@media(max-width:860px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:0}.facts div:nth-child(n+3){border-top:1px solid #3d434a}}
/* アクセス・フッター */
.access{display:grid;grid-template-columns:1.1fr 1fr;gap:28px}
.map{border:1px solid var(--line);background:var(--steel)}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:15px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{width:8em;font:700 14px var(--g);color:var(--sub)}
@media(max-width:860px){.access{grid-template-columns:1fr}}
.band{background:var(--or);color:#fff}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:44px 0;flex-wrap:wrap}
.band h2{margin:0;font:700 clamp(22px,2.8vw,30px)/1.5 var(--g)}
.band p{margin:4px 0 0;opacity:.9}
.band .telbig{font:700 40px/1 var(--o);letter-spacing:.04em}
.band .cta{background:var(--ch)}
.ft{background:#121417;color:#9aa2ab;padding:44px 0 32px;font-size:13.5px}
.ft .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ft .copy{grid-column:1/-1;border-top:1px solid #2a2e33;padding-top:16px;font:500 12px var(--o);letter-spacing:.14em}
@media(max-width:760px){.ft .wrap{grid-template-columns:1fr}}
/* 下層 */
.ph{background:var(--ch);color:#fff;padding:52px 0 48px;position:relative;overflow:hidden}
.ph:after{content:"";position:absolute;right:0;top:0;bottom:0;width:30%;background:repeating-linear-gradient(-45deg,rgba(255,180,0,.14) 0 14px,transparent 14px 28px)}
.crumb{font:500 12px var(--o);letter-spacing:.14em;color:#aeb4bb}
.ph h1{margin:10px 0 4px;font:700 clamp(28px,4vw,42px)/1.4 var(--g);letter-spacing:.06em}
.ph p{margin:0;color:#c9ced4}
.check{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:0;padding:0}
.check li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);padding:14px 16px;font-weight:700}
.check li:before{content:"";flex:none;width:22px;height:22px;border:2px solid var(--or)}
@media(max-width:640px){.check{grid-template-columns:1fr}}
.menu2{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mc{background:#fff;border:1px solid var(--line);padding:26px;position:relative}
.mc:before{content:"";position:absolute;left:0;top:0;width:44px;height:4px;background:var(--or)}
.mc h3{margin:0 0 6px;font:700 19px/1.5 var(--g)}.mc p{margin:0;font-size:14.5px;color:var(--sub)}
.mc ul{margin:12px 0 0;padding:0;list-style:none;font-size:14px}.mc li{padding:6px 0;border-top:1px dashed var(--line)}
@media(max-width:860px){.menu2{grid-template-columns:1fr}}
.staff{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.st{background:#fff;border:1px solid var(--line);padding:22px;display:grid;grid-template-columns:64px 1fr;gap:14px}
.st i{font-style:normal;width:64px;height:64px;background:var(--ch);color:var(--amber);display:grid;place-items:center;font:700 24px var(--o)}
.st b{display:block;font:700 17px var(--g)}.st span{font-size:12.5px;color:var(--or-d);font-weight:700}.st p{margin:6px 0 0;font-size:13.5px;color:var(--sub)}
@media(max-width:860px){.staff{grid-template-columns:1fr}}
.form{display:grid;gap:18px;max-width:820px;background:#fff;border:1px solid var(--line);border-top:6px solid var(--or);padding:30px}
.field label,.field .lbl{display:block;font:700 14.5px var(--g);margin-bottom:6px}
.req{background:var(--or);color:#fff;font-size:11px;padding:1px 6px;margin-left:6px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:2px solid var(--line);border-radius:0;font-size:16px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--or)}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tiles label{border:2px solid var(--line);padding:12px;display:flex;gap:8px;align-items:center;font:700 14px var(--g);cursor:pointer;margin:0}
.tiles label:has(input:checked){border-color:var(--or);background:#fff4ec}
@media(max-width:700px){.row3,.row2,.tiles{grid-template-columns:1fr 1fr}}
.msg{font-weight:700;color:var(--or-d)}.note{font-size:13px;color:var(--sub)}

.insp{display:grid;grid-template-columns:1fr 470px;gap:40px;align-items:start}
@media(max-width:960px){.insp{grid-template-columns:1fr}}
@media(max-width:420px){.sim{padding:20px}.sizes{gap:4px}.sizes button{font-size:12px;padding:8px 2px 6px}}