@charset "UTF-8";

/* =========================================================
   安満自動車工業（架空・制作見本）
   色は白と墨の2色のみ。差し色の朱は文字と細い罫線だけに使う。
   角丸・影・グラデーションは使わない。
   ========================================================= */

:root{
  --paper:#FFFFFF;
  --ink:#1B1E1C;
  --sub:#6E726D;
  --line:#D9D7D2;
  --line-dark:#3A3E3A;
  --accent:#C8461E;

  --s1:200px;   /* セクション余白（大） */
  --s2:144px;
  --s3:104px;
  --s4:72px;

  --wrap:1264px;
  --pad:32px;
  --hd:76px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--hd);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.95;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  text-wrap:pretty;
  overflow-x:hidden;
}
h1,h2,.hero__catch,.ft__catch{ text-wrap:balance; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p,dl,dd,figure,table{ margin:0; }
button,input,textarea{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* 数字（英字コンデンス） */
.num,.yen,.hd__logo-mark{
  font-family:"Barlow Condensed","Noto Sans JP",sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  font-feature-settings:normal;
}

/* 共通の見出し */
.ttl-en{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
}
.ttl-ja{
  font-size:34px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.03em;
}
.sec-head{ margin-bottom:64px; max-width:760px; }
.sec-desc{ margin-top:24px; color:var(--sub); }

/* 現れる動き */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1); }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   ヘッダー
   ========================================================= */
.hd{
  position:sticky; top:0; z-index:50;
  height:var(--hd);
  display:flex; align-items:center; gap:40px;
  padding-inline:var(--pad);
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.hd__logo{ display:flex; align-items:center; margin-right:auto; }
.hd__logo img{ width:206px; height:44px; }
.hd__list{ display:flex; gap:32px; font-size:13px; letter-spacing:.06em; }
.hd__list a{ position:relative; padding-block:6px; }
.hd__list a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.hd__list a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hd__cta{
  font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--paper); background:var(--ink);
  padding:14px 26px;
  transition:opacity .3s;
}
.hd__cta:hover{ opacity:.75; }
.hd__toggle{ display:none; }

.drawer{ display:none; }

/* =========================================================
   ファーストビュー
   ========================================================= */
.hero{ padding-block:0 var(--s1); }
.hero__inner{
  width:100%; max-width:1560px; margin-inline:auto;
  padding-left:var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,46%);
  column-gap:56px;
}
.hero__txt{ grid-column:1; grid-row:1; padding-top:96px; }
.hero__catch{
  font-size:clamp(48px,6.4vw,92px);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.01em;
  margin-bottom:52px;
}
.hero__lead{ font-size:16px; color:var(--ink); }
.hero__note{
  margin-top:22px; padding-top:20px;
  border-top:2px solid var(--accent);
  font-size:16px; font-weight:700; letter-spacing:.04em; color:var(--ink);
}
.hero__main{ grid-column:2; grid-row:1 / span 2; }
.hero__main img{ width:100%; height:100%; object-fit:cover; }
.hero__sub{ grid-column:1; grid-row:2; margin-top:64px; max-width:560px; }
.hero__sub img{ width:100%; }

/* =========================================================
   3つの約束（濃色）
   ========================================================= */
.promise{ background:var(--ink); color:var(--paper); padding-block:var(--s1); }
.promise .ttl-en{ color:var(--paper); }
.promise__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
/* 見せ場。ここだけ見出しを一段大きくし、余白も広く取る */
.promise__head{ max-width:860px; margin-bottom:var(--s3); }
.promise__head .ttl-ja{ font-size:48px; line-height:1.4; }
.promise__desc{ margin-top:32px; color:#A9ADA8; font-size:20px; line-height:1.8; }
.promise__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.promise__item{
  padding:44px 40px 48px 0;
  border-top:1px solid var(--line-dark);
}
.promise__item + .promise__item{ padding-left:40px; border-left:1px solid var(--line-dark); }
.promise__item .num{ display:block; font-size:44px; line-height:1; color:var(--accent); margin-bottom:26px; }
.promise__ttl{ font-size:20px; font-weight:700; line-height:1.6; margin-bottom:18px; }
.promise__item p{ font-size:16px; color:#A9ADA8; }
.promise__fig{ margin-top:var(--s4); }
.promise__fig img{ width:100%; }

/* =========================================================
   整備のご案内
   ========================================================= */
.svc{ padding-block:var(--s1); }
.svc__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.svc__item{
  display:grid;
  grid-template-columns:360px minmax(0,1fr) 300px;
  column-gap:56px;
  align-items:start;
  padding-block:var(--s4);
  border-top:1px solid var(--line);
}
/* 01だけ主役にする。写真を大きく、余白も広く取る */
.svc__item:first-child{
  grid-template-columns:360px minmax(0,1fr) 460px;
  padding-block:var(--s3);
}
.svc__item:last-child{ border-bottom:1px solid var(--line); }
.svc__label{ display:flex; align-items:baseline; gap:18px; }
.svc__label .num{ font-size:20px; color:var(--accent); }
.svc__ttl{ font-size:44px; font-weight:700; line-height:1.32; letter-spacing:-.005em; }
.svc__item:first-child .svc__ttl{ font-size:52px; }
.svc__body p{ font-size:16px; }
.svc__meta{
  margin-top:22px; padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13px; letter-spacing:.06em; color:var(--sub);
}
.svc__fig img{ width:100%; }

/* =========================================================
   車検の料金と納期
   ========================================================= */
.price{ padding-block:0 var(--s1); }
.price__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.price__tablewrap{ overflow-x:auto; }
.price__table{ width:100%; border-collapse:collapse; min-width:640px; }
.price__caption{
  text-align:left; font-size:13px; letter-spacing:.06em; color:var(--sub);
  padding-bottom:16px;
}
.price__table th,.price__table td{
  text-align:left; padding:26px 20px;
  border-bottom:1px solid var(--line);
}
.price__table thead th{
  font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--sub);
  padding-block:14px; border-bottom:1px solid var(--ink);
}
.price__table tbody th{ font-size:16px; font-weight:700; width:30%; }
.price__table td{ font-size:16px; }
.price__table .yen{ font-size:34px; margin-right:2px; }
.price__notes{ margin-top:44px; display:grid; gap:14px; max-width:900px; }
.price__notes li{
  position:relative; padding-left:22px;
  font-size:13px; line-height:1.9; color:var(--sub);
}
.price__notes li::before{
  content:""; position:absolute; left:0; top:12px;
  width:10px; height:1px; background:var(--accent);
}

/* =========================================================
   ご利用の流れ
   ========================================================= */
.flow{ padding-block:0 var(--s1); }
.flow__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.flow__list{ display:grid; grid-template-columns:repeat(5,1fr); }
.flow__item{
  padding:40px 28px 48px 0;
  border-top:1px solid var(--ink);
}
.flow__item + .flow__item{ padding-left:28px; border-left:1px solid var(--line); }
.flow__item .num{ display:block; font-size:40px; line-height:1; color:var(--accent); margin-bottom:22px; }
/* 最初の1歩だけ幅を広げ、等分の単調さを崩す */
.flow__list{ grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; }
.flow__ttl{ font-size:20px; font-weight:700; line-height:1.6; margin-bottom:14px; }
.flow__item p{ font-size:13px; line-height:1.9; color:var(--sub); }

/* =========================================================
   お知らせ
   ========================================================= */
.news{ padding-block:0 var(--s1); }
.news__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:300px minmax(0,1fr); column-gap:56px;
}
.news .sec-head{ margin-bottom:0; }
.news__item{
  display:grid; grid-template-columns:120px 100px minmax(0,1fr);
  align-items:baseline; gap:16px;
  padding-block:28px;
  border-bottom:1px solid var(--line);
}
.news__item:first-child{ border-top:1px solid var(--line); }
.news__item time{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:20px; letter-spacing:.04em; color:var(--sub);
}
.news__cat{ font-size:13px; letter-spacing:.08em; color:var(--accent); }
.news__ttl{ font-size:16px; }

/* =========================================================
   工場のご案内
   ========================================================= */
.access{ position:relative; }
.access__photo img{ width:100%; height:clamp(420px,46vw,620px); object-fit:cover; }
.access__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  margin-top:-180px; position:relative; z-index:2;
}
.access__inner{ position:relative; }
.access__card{
  background:var(--paper);
  max-width:720px;
  padding:64px 64px 68px;
}
/* 白いカードの右下に写真を食い込ませ、版面を3層にする */
.access__sub{
  position:absolute; right:var(--pad); bottom:-72px;
  width:min(400px,38%);
}
.access__sub img{ width:100%; }
.access__dl{ margin-top:44px; }
.access__dl > div{
  display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px;
  padding-block:18px;
  border-top:1px solid var(--line);
}
.access__dl > div:last-child{ border-bottom:1px solid var(--line); }
.access__dl dt{ font-size:13px; letter-spacing:.08em; color:var(--sub); padding-top:4px; }
.access__dl dd{ margin:0; font-size:16px; }
.access__dl a{ border-bottom:1px solid var(--accent); }
.access__note{ margin-top:28px; font-size:13px; color:var(--sub); }

/* =========================================================
   お問い合わせ（濃色）
   ========================================================= */
.contact{ background:var(--ink); color:var(--paper); padding-block:var(--s1); margin-top:var(--s2); }
.contact .ttl-en{ color:var(--paper); }
.contact__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:80px;
}
.contact__head{ grid-column:1; }
.contact__head .ttl-ja{ font-size:34px; }
.contact__desc{ margin-top:28px; color:#A9ADA8; max-width:460px; }
.contact__tel{
  grid-column:1; align-self:start;
  margin-top:56px;
  padding-top:36px; border-top:1px solid var(--line-dark);
}
.contact__telnum{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:clamp(44px,5vw,56px); line-height:1.1; letter-spacing:.02em;
}
.contact__telsub{ margin-top:14px; font-size:13px; letter-spacing:.06em; color:#A9ADA8; }
.form{ grid-column:2; grid-row:1 / span 2; }
.form__lead{ font-size:13px; color:#A9ADA8; margin-bottom:36px; }
.form__row{ margin-bottom:26px; }
.form__label{ display:block; font-size:13px; letter-spacing:.08em; color:#A9ADA8; margin-bottom:10px; }
.form__input{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--line-dark);
  padding:12px 2px; font-size:16px; color:var(--paper);
  transition:border-color .3s;
}
.form__input::placeholder{ color:#5E625D; }
.form__input:focus{ outline:none; border-bottom-color:var(--accent); }
.form__textarea{ resize:vertical; line-height:1.9; }
.form__submit{
  margin-top:16px; width:100%;
  background:var(--paper); color:var(--ink);
  border:0; padding:22px 20px;
  font-size:16px; font-weight:700; letter-spacing:.08em;
  cursor:pointer; transition:opacity .3s;
}
.form__submit:hover{ opacity:.8; }
.form__note{ margin-top:16px; font-size:13px; color:#6E726D; }

/* =========================================================
   フッター
   ========================================================= */
.ft{ padding-block:var(--s3) var(--s4); }
.ft__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:56px;
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.ft__name{ font-size:20px; font-weight:700; letter-spacing:.06em; margin-bottom:20px; }
.ft__addr{ font-size:13px; line-height:2.1; color:var(--sub); }
.ft__list{ columns:2; column-gap:56px; font-size:13px; line-height:2.6; }
.ft__list a:hover{ color:var(--accent); }
.ft__catch{
  width:100%; max-width:var(--wrap); margin:var(--s4) auto 0; padding-inline:var(--pad);
  font-size:clamp(46px,5vw,72px); font-weight:700; line-height:1.28; letter-spacing:.01em;
}
.ft__copy{
  width:100%; max-width:var(--wrap); margin:44px auto 0; padding-inline:var(--pad);
  font-size:13px; letter-spacing:.06em; color:var(--sub);
}

/* =========================================================
   タブレット
   ========================================================= */
@media (max-width:1080px){
  :root{ --s1:132px; --s2:104px; --s3:80px; --s4:56px; --pad:24px; }
  .hd__list{ display:none; }
  .hd__cta{ display:none; }
  .hd__toggle{
    display:block; width:44px; height:44px; margin-right:-10px;
    background:none; border:0; padding:0; cursor:pointer;
  }
  .hd__toggle span{ display:block; width:24px; height:1px; background:var(--ink); margin:6px auto; transition:transform .3s,opacity .3s; }
  .hd__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(15deg); }
  .hd__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-15deg); }
  .drawer{
    display:block; position:fixed; inset:var(--hd) 0 auto 0; z-index:40;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 32px;
  }
  .drawer[hidden]{ display:none; }
  .drawer__list li{ border-bottom:1px solid var(--line); }
  .drawer__list a{ display:block; padding:20px 2px; font-size:16px; font-weight:700; }

  .hero__inner{ grid-template-columns:minmax(0,1fr) minmax(0,42%); column-gap:32px; }
  .hero__txt{ padding-top:56px; }
  .promise__list{ grid-template-columns:1fr; }
  .promise__item{ padding:36px 0 40px; }
  .promise__item + .promise__item{ padding-left:0; border-left:0; }
  .svc__item,
  .svc__item:first-child{ grid-template-columns:260px minmax(0,1fr); row-gap:36px; column-gap:36px; padding-block:var(--s4); }
  .svc__ttl{ font-size:34px; }
  .svc__item:first-child .svc__ttl{ font-size:38px; }
  .svc__fig{ grid-column:1 / -1; max-width:520px; }
  .svc__item:first-child .svc__fig{ max-width:640px; }
  .flow__list{ grid-template-columns:repeat(2,1fr) !important; }
  .flow__list{ grid-template-columns:repeat(2,1fr); }
  .flow__item{ padding:32px 24px 36px 0; }
  .flow__item:nth-child(odd){ padding-left:0; border-left:0; }
  .flow__item:nth-child(even){ padding-left:24px; border-left:1px solid var(--line); }
  .news__inner{ grid-template-columns:1fr; row-gap:44px; }
  .access__inner{ margin-top:-120px; }
  .access__card{ padding:44px 40px 48px; }
  .access__sub{ position:static; width:auto; max-width:420px; margin:32px 0 0 auto; }
  .contact__inner{ grid-template-columns:1fr; row-gap:56px; }
  .contact__tel{ grid-column:1; margin-top:0; }
  .form{ grid-column:1; grid-row:auto; }
  .ft__inner{ grid-template-columns:1fr; }
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width:720px){
  :root{ --s1:96px; --s2:80px; --s3:64px; --s4:44px; --pad:20px; --hd:64px; }
  body{ line-height:1.9; }
  .ttl-ja{ font-size:26px; }
  .sec-head{ margin-bottom:40px; }

  .hero{ padding-block:0 var(--s1); }
  .hero__inner{ grid-template-columns:1fr; padding-inline:var(--pad); }
  .hero__txt{ grid-column:1; grid-row:1; padding-top:40px; }
  .hero__catch{ font-size:clamp(38px,11vw,52px); margin-bottom:32px; }
  .hero__lead{ font-size:15px; }
  .hero__lead br{ display:none; }
  .hero__main{ grid-column:1; grid-row:2; margin-top:40px; }
  .hero__main img{ height:clamp(380px,90vw,460px); }
  .hero__sub{ grid-column:1; grid-row:3; margin-top:16px; max-width:none; }

  .promise__head .ttl-ja{ font-size:30px; }
  .promise__desc{ font-size:16px; }
  .promise__item .num,.flow__item .num{ font-size:18px; }
  .promise__ttl,.flow__ttl{ font-size:18px; }
  .svc__item,
  .svc__item:first-child{ grid-template-columns:1fr; row-gap:24px; }
  .svc__ttl,
  .svc__item:first-child .svc__ttl{ font-size:28px; }
  .svc__fig,
  .svc__item:first-child .svc__fig{ max-width:none; }
  .price__table .yen{ font-size:26px; }
  .flow__list{ grid-template-columns:1fr !important; }
  .flow__item:first-child .num{ font-size:44px; }
  .flow__item,
  .flow__item:nth-child(even){ padding:28px 0 32px; border-left:0; }
  .news__item{ grid-template-columns:auto auto; row-gap:6px; column-gap:14px; }
  .news__ttl{ grid-column:1 / -1; }
  .access__photo img{ height:300px; }
  .access__inner{ margin-top:-60px; }
  .access__card{ padding:36px 24px 40px; }
  .access__dl > div{ grid-template-columns:1fr; gap:4px; }
  .contact__head .ttl-ja{ font-size:26px; }
  .contact__telnum{ font-size:clamp(36px,10vw,44px); }
  .ft__list{ columns:1; }
  .ft__catch{ font-size:clamp(38px,11vw,52px); }
}