@charset "utf-8";
/* ==========================================================================
   株式会社高野自動車工業 — デモサイト
   配色は 13_Web構成.md「5. デザイン方針」の指定値をそのまま使用
   ========================================================================== */

:root{
  --white:#FFFFFF;
  --bg-alt:#F5F6F8;
  --accent:#9E2B3A;        /* 修理導線（えんじ） */
  --accent-dark:#7E2230;   /* ホバー・押下 */
  --accent-pale:#F6EAEC;   /* 注意書きの帯・ステップ図背景 */
  --navy:#1F3864;          /* 採用導線 */
  --navy-dark:#16294A;
  --ink:#1A1A1A;
  --muted:#5A5F6A;
  --line:#E3E6EB;

  --radius:12px;
  --sec-y:80px;
  --wrap:1120px;
  --head-h:88px;

  /* 速度は 3 種類のみ */
  --t-fast:180ms;
  --t-mid:600ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:17px;
  line-height:1.9;
  font-weight:400;
  color:var(--ink);
  background:var(--white);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
h1,h2,h3,h4{line-height:1.5;margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 40px,860px);margin-inline:auto}

/* 到達性：キーボード操作 -------------------------------------------------- */
.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--accent);color:#fff;padding:10px 18px;border-radius:0 0 var(--radius) var(--radius);
  text-decoration:none;font-weight:700;
}
.skip:focus{top:0}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ========================= ヘッダー ====================================== */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
  will-change:height,background-color;
}
.hdr__in{
  height:var(--head-h);
  display:flex;align-items:center;gap:20px;
  width:min(100% - 32px,1280px);margin-inline:auto;
  transition:height var(--t-fast) var(--ease-out);
}
.hdr.is-small .hdr__in{height:64px}
.hdr.is-small{background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}

.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand__name{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:.02em}
.brand__sub{font-size:12px;color:var(--muted);line-height:1.4}
.hdr.is-small .brand__sub{display:none}

.gnav{margin-left:auto}
.gnav__list{display:flex;gap:2px;list-style:none;flex-wrap:nowrap}
.gnav__list a{
  display:block;padding:8px 10px;font-size:14px;font-weight:500;white-space:nowrap;
  color:var(--ink);text-decoration:none;border-radius:8px;position:relative;
}
.gnav__list a:hover{background:var(--bg-alt)}
.gnav__list a[aria-current="page"]{color:var(--accent);font-weight:700}

/* 電話ボタン：スクロールしても常時表示 */
.hdr__tel{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:999px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  white-space:nowrap;
}
.hdr__tel:hover{background:var(--accent-dark)}
.hdr__tel img{width:18px;height:18px;filter:brightness(0) invert(1)}

.navtoggle{display:none;border:1px solid var(--line);background:#fff;border-radius:8px;min-width:44px;min-height:44px;cursor:pointer}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto}

/* ========================= 汎用 ========================================== */
main{padding-top:var(--head-h)}

.sec{padding:var(--sec-y) 0}
.sec--alt{background:var(--bg-alt)}

.h2{font-size:30px;font-weight:700;letter-spacing:.01em}
.h2::after{content:"";display:block;width:56px;height:4px;background:var(--accent);border-radius:2px;margin-top:16px}
.h2--center{text-align:center}
.h2--center::after{margin-inline:auto}
.h3{font-size:21px;font-weight:700}
.lead{color:var(--ink);margin-top:20px}
.cap,.note{font-size:14px;color:var(--muted);line-height:1.7}
.cap{margin-top:8px}

.sec__head{margin-bottom:40px}
.sec__head .lead{max-width:46em}

/* リンク下線：左→右 */
.tlink{
  color:var(--accent);text-decoration:none;font-weight:700;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:left bottom;
  background-size:0 2px;
  transition:background-size var(--t-fast) var(--ease-out);
}
.tlink:hover,.tlink:focus-visible{background-size:100% 2px}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;border-radius:999px;
  font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;text-align:center;
}
.btn img{width:20px;height:20px}
.btn--repair{background:var(--accent);color:#fff}
.btn--repair:hover{background:var(--accent-dark)}
.btn--repair img{filter:brightness(0) invert(1)}
.btn--repair-o{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn--repair-o:hover{background:var(--accent-pale)}
.btn--recruit{background:var(--navy);color:#fff}
.btn--recruit:hover{background:var(--navy-dark)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--wide{width:100%}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ========================= ヒーロー ====================================== */
.hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 38%,rgba(255,255,255,.45) 62%,rgba(255,255,255,.18) 100%);
}
/* .hero が display:flex のため、width:100% が無いと .hero__in が
   コンテンツ幅まで縮み、中の .wrap が中央に揃わず左端に寄る。 */
.hero__in{position:relative;z-index:2;width:100%;padding:96px 0}
.hero__ttl{font-size:clamp(30px,4.4vw,50px);font-weight:700;line-height:1.42;letter-spacing:.01em}
.hero__sub{margin-top:20px;font-size:17px;color:var(--ink);max-width:34em}
.hero__badge{
  display:inline-block;background:var(--accent-pale);color:var(--accent-dark);
  font-size:14px;font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:20px;
}
.hero__recruit{margin-top:26px}
.hero__recruit a{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:14px;color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
.hero--sub{min-height:auto}
.hero--sub .hero__in{padding:64px 0}
.hero--sub .hero__ttl{font-size:clamp(26px,3.4vw,38px)}

/* スクロール誘導矢印 */
.scrollcue{position:absolute;left:50%;bottom:18px;z-index:3;translate:-50% 0;width:26px;height:26px}
.scrollcue::before{
  content:"";display:block;width:14px;height:14px;margin:0 auto;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);rotate:45deg;
  animation:bob 1600ms var(--ease-out) infinite;
}
@keyframes bob{0%,100%{transform:translateY(-4px);opacity:.5}50%{transform:translateY(4px);opacity:1}}

/* ========================= カード ======================================== */
.grid{display:grid;gap:24px;align-items:stretch}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
/* 基礎層(GSAP)は外側のラッパを、装飾層(Motion)は内側の .card を動かす。
   同じ要素を両方で動かさないための分離。
   flex-direction:column を必ず付ける。付けないと、ラッパ直下に見出しと
   段落が並ぶケース（サービス紹介・採用の2カラム）で横一列に潰れる。 */
.grid > .reveal{display:flex;flex-direction:column;min-width:0}
.grid > .reveal > .card{flex:1}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;height:100%;
  will-change:transform;
}
.card__icon{width:52px;height:52px;margin-bottom:14px}
.card__ttl{font-size:19px;font-weight:700}
.card__txt{font-size:16px;margin-top:10px;color:var(--ink)}
.card__more{margin-top:auto;padding-top:16px;font-weight:700;font-size:15px;color:var(--accent)}
.card--link{text-decoration:none;color:inherit}

/* 写真ホバーズーム（枠固定・中身1.05倍） */
.zoom{overflow:hidden;border-radius:var(--radius)}
.zoom img{transition:transform var(--t-mid) var(--ease-out)}
.zoom:hover img,a:hover .zoom img{transform:scale(1.05)}

.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fig figcaption{font-size:14px;color:var(--muted);margin-top:10px}

/* ========================= ステップ図 =================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;counter-reset:s}
.steps li{
  background:var(--accent-pale);border-radius:var(--radius);padding:26px 20px;text-align:center;position:relative;
}
.steps__n{
  width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;margin:0 auto 12px;
}
.steps__ttl{font-weight:700;font-size:17px}
.steps__txt{font-size:15px;color:var(--muted);margin-top:6px;line-height:1.75}
.steps--flow li{background:var(--bg-alt)}

/* ========================= 帯 CTA ======================================= */
.band{padding:64px 0;text-align:center;color:#fff}
.band--repair{background:var(--accent)}
.band--recruit{background:var(--navy)}
.band__ttl{font-size:26px;font-weight:700}
.band__txt{margin-top:12px;font-size:16px;opacity:.94}
.band .btnrow{justify-content:center}
.band__tel{display:block;margin-top:18px;color:#fff;font-size:15px;text-decoration:none}

/* ========================= 注記 ========================================= */
.notice{
  background:var(--accent-pale);border-left:4px solid var(--accent);
  padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;
  font-size:15px;line-height:1.8;
}
.aicap{font-size:13px;color:var(--muted);margin-top:8px}

/* ========================= 地図 ========================================= */
/* 隣の「所在地」カードと高さを揃えるため、列の余りを地図が埋める */
.map{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg-alt);line-height:0;flex:1 1 auto;min-height:320px;
}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.map__link{margin-top:10px;font-size:14px;line-height:1.7}

/* ========================= 表 =========================================== */
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:18px 12px;text-align:left;vertical-align:top}
.tbl th{width:190px;font-weight:700;color:var(--navy);white-space:nowrap}

/* ========================= アコーディオン =============================== */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:22px 44px 22px 4px;font-size:17px;font-weight:700;position:relative;min-height:44px;
}
.acc__btn::after{
  content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  translate:0 -70%;rotate:45deg;transition:rotate var(--t-fast) var(--ease-out);
}
.acc__btn[aria-expanded="true"]::after{rotate:225deg;translate:0 -30%}
.acc__panel{overflow:hidden}
.acc__inner{padding:0 4px 24px;font-size:16px;color:var(--ink)}

/* ========================= フォーム（見た目のみ） ======================= */
.form{display:grid;gap:22px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.field .req{color:var(--accent);font-size:13px;margin-left:6px}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea,.field select{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:16px;background:#fff;
}
.field textarea{min-height:150px;resize:vertical}
.field .hint{font-size:14px;color:var(--muted);margin-top:6px}
.radios{display:flex;gap:24px;flex-wrap:wrap}
.radios label{display:inline-flex;align-items:center;gap:8px;font-weight:400;min-height:44px}
.filebox{border:1px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--muted);font-size:15px}

/* ========================= フッター ===================================== */
.ftr{background:var(--navy);color:#fff;padding:56px 0 28px;margin-top:0}
.ftr a{color:#fff}
.ftr__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.ftr__name{font-weight:700;font-size:18px}
.ftr__addr{font-size:15px;line-height:1.9;margin-top:12px;opacity:.92;font-style:normal}
.ftr__tel{display:inline-block;margin-top:10px;font-size:20px;font-weight:700;color:#fff;text-decoration:none}
.ftr__h{font-size:15px;font-weight:700;margin-bottom:12px}
.ftr__list{list-style:none;font-size:15px;line-height:2.1}
.ftr__list a{text-decoration:none;opacity:.92}
.ftr__list a:hover{text-decoration:underline}
.ftr__demo{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.24);
  font-size:13px;line-height:1.85;opacity:.85;
}
.ftr__copy{margin-top:14px;font-size:13px;opacity:.7}

/* ========================= 404 ========================================== */
.err{text-align:center;padding:120px 0}
.err__code{font-size:64px;font-weight:700;color:var(--accent);line-height:1}

/* ==========================================================================
   主役層：ドラッグ比較（修理前 ⇄ 修理後）
   ========================================================================== */
.cmp{margin-top:8px}
.cmp__set[hidden]{display:none}

.cmp__stage{
  position:relative;width:100%;aspect-ratio:1400/933;
  /* 縦に伸びすぎると1画面に収まらないので上限を設ける。
     2枚とも object-fit:cover で同じ枠を埋めるため、切れ方は前後で完全に一致する。 */
  max-height:min(64vh,560px);
  border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);
  user-select:none;-webkit-user-select:none;
}
.cmp__pane{position:absolute;inset:0}
.cmp__pane img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* 上に重ねた「修理前」を右側から切り落とす */
.cmp__pane--before{clip-path:inset(0 50% 0 0)}

.cmp__tag{
  position:absolute;top:14px;z-index:3;
  background:rgba(26,26,26,.78);color:#fff;font-size:14px;font-weight:700;
  padding:6px 14px;border-radius:999px;pointer-events:none;
}
.cmp__tag--before{left:14px}
.cmp__tag--after{right:14px}

.cmp__line{
  position:absolute;top:0;bottom:0;width:3px;background:#fff;z-index:4;
  translate:-50% 0;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.16);
}
.cmp__knob{
  position:absolute;top:50%;left:50%;z-index:5;
  width:52px;height:52px;border-radius:50%;
  background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.28);
  translate:-50% -50%;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:3px;
}
.cmp__knob::before,.cmp__knob::after{
  content:"";width:9px;height:9px;
  border-top:2px solid var(--accent);border-left:2px solid var(--accent);
}
.cmp__knob::before{rotate:-45deg}
.cmp__knob::after{rotate:135deg}

/* 透明の range をステージ全面に重ね、マウス／タッチ／キーボードを1つで担う */
.cmp__range{
  position:absolute;inset:0;z-index:6;
  width:100%;height:100%;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  cursor:ew-resize;touch-action:pan-y;
}
.cmp__range::-webkit-slider-runnable-track{height:100%;background:transparent}
.cmp__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:56px;height:280px;background:transparent;border:0;cursor:ew-resize;
}
.cmp__range::-moz-range-track{height:100%;background:transparent;border:0}
.cmp__range::-moz-range-thumb{width:56px;height:280px;background:transparent;border:0;border-radius:0;cursor:ew-resize}
.cmp__range:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

.cmp__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;align-items:baseline;margin-top:14px}
.cmp__kind{font-weight:700;font-size:17px;min-width:0}
/* min-width:0 が無いと flex アイテムが縮まず、狭い幅で文が切れる */
.cmp__say{font-size:15px;color:var(--muted);min-width:0;flex:1 1 260px}
.cmp__hint{font-size:14px;color:var(--muted);margin-top:4px}

/* サムネイル切替 */
.cmp__thumbs{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.cmp__thumb{
  flex:1 1 0;min-width:150px;min-height:44px;
  border:2px solid var(--line);background:#fff;border-radius:10px;
  padding:8px;cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;
}
.cmp__thumb img{width:64px;height:44px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.cmp__thumb span{font-size:14px;font-weight:700;line-height:1.4}
.cmp__thumb:hover{border-color:var(--accent)}
.cmp__thumb[aria-selected="true"]{border-color:var(--accent);background:var(--accent-pale)}

/* 768px 未満：ドラッグをやめて 2 枚縦積みに切り替える */
.cmp__stack{display:none}
.cmp__stack figure{margin:0}
.cmp__stack figure + figure{margin-top:16px}
.cmp__stack img{width:100%;border-radius:var(--radius)}
.cmp__stack figcaption{
  font-size:15px;font-weight:700;margin-top:8px;color:#fff;background:var(--ink);
  display:inline-block;padding:4px 12px;border-radius:999px;
}

/* ========================= レスポンシブ ================================= */
@media (max-width:1180px){
  .gnav{display:none}
  .gnav.is-open{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--line);padding:12px 20px 20px;
  }
  .gnav.is-open .gnav__list{flex-direction:column;gap:0}
  .gnav.is-open .gnav__list a{padding:14px 6px;border-bottom:1px solid var(--line);min-height:44px}
  .navtoggle{display:block;order:3}
  .hdr__in{gap:12px}
  .brand__name{font-size:17px}
}
@media (max-width:860px){
  :root{--sec-y:56px;--head-h:76px}
  .grid--3,.figs,.steps{grid-template-columns:1fr 1fr}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  body{font-size:16px}
  .h2{font-size:25px}
  .h3{font-size:19px}
  .grid--3,.grid--2,.figs,.steps{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr}
  .hdr__tel span{display:none}
  .hdr__tel{padding:10px 14px}
  .btnrow .btn{width:100%}
  .tbl th,.tbl td{display:block;width:auto;padding:10px 0}
  .tbl th{border-bottom:0;padding-bottom:0}
  .hero__in{padding:56px 0}

  /* 主役層の切り替え：ドラッグをやめて2枚縦積みにする。
     サムネイルは残す（消すと2組目・3組目に到達できなくなるため） */
  .cmp__stage{display:none}
  .cmp__stack{display:block}
  .cmp__thumbs{flex-direction:column}
  .cmp__thumb{flex:1 1 auto;width:100%}
  .cmp__hint{display:none}
  /* 縦並びに変えるときは align-items も戻す。baseline のままだと
     アイテムが内容幅のまま縮まず、長い一文が画面外にはみ出す。 */
  .cmp__meta{flex-direction:column;gap:4px;align-items:stretch}
  .cmp__say{flex:0 1 auto;width:100%}
}

/* ========================= 基礎層の初期状態 ============================= */
.reveal{opacity:0;transform:translateY(28px)}
.js-off .reveal{opacity:1;transform:none}

/* prefers-reduced-motion：全アニメーションを無効化 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .scrollcue::before{animation:none}
  .zoom img{transition:none}
  .zoom:hover img,a:hover .zoom img{transform:none}
}