@charset "utf-8";

/* ==========================================================================
   CARSTOCK — 輸出車買取専門
   Palette is taken from the brand mark: green #2A663F, near-black #1A1613, white.
   ========================================================================== */

:root{
  --ground:#F0F2EE;
  --panel:#FFFFFF;
  --ink:#1A1613;
  --mute:#6B7A70;
  --line:#D3D9D1;
  --dark:#171412;
  --dark-2:#0F0D0B;
  --brand:#2A663F;
  --brand-2:#1C4B2C;
  --brand-text:#215A34;
  --brand-on-dark:#5FB77D;
  --on-brand:#FFFFFF;   /* text that sits on --brand */
  --on-dark:#EDF0EA;
  --mute-on-dark:#98A69B;
  --mach:#E9A83A;
  --mach-text:#8A6210;  /* amber dark enough to read as text on the paper ground */

  --f-disp:Impact,Haettenschweiler,"Arial Narrow Bold","Franklin Gothic Bold",sans-serif;
  --f-jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root{
    --on-brand:#FFFFFF;
    --ground:#0E100E; --panel:#161A16; --ink:#E7ECE6; --mute:#8A968C; --line:#272E27;
    --dark:#0A0C0A; --dark-2:#070907;
    --brand:#2F7548; --brand-2:#255C39; --brand-text:#6BC28C;
    --mach-text:#E9B860;
  }
}
:root[data-theme="dark"]{
  --on-brand:#FFFFFF;
  --mach-text:#E9B860;
  --ground:#0E100E; --panel:#161A16; --ink:#E7ECE6; --mute:#8A968C; --line:#272E27;
  --dark:#0A0C0A; --dark-2:#070907;
  --brand:#2F7548; --brand-2:#255C39; --brand-text:#6BC28C;
}
:root[data-theme="light"]{
  --mach-text:#8A6210;
  --ground:#F0F2EE; --panel:#FFFFFF; --ink:#1A1613; --mute:#6B7A70; --line:#D3D9D1;
  --dark:#171412; --dark-2:#0F0D0B;
  --brand:#2A663F; --brand-2:#1C4B2C; --brand-text:#215A34;
}

/* ==========================================================================
   Machinery pages run on the sub-brand's amber instead of the CARSTOCK green.
   Amber cannot carry white text, so --on-brand flips to near-black here, and
   --brand-text drops to an ochre dark enough to read on the paper ground.
   ========================================================================== */
:root.theme-mach{
  --brand:#E9A83A;
  --brand-2:#C98A1F;
  --brand-text:#8A6210;
  --brand-on-dark:#F0B44E;
  --on-brand:#1A1613;
}
@media (prefers-color-scheme:dark){
  :root.theme-mach:not([data-theme="light"]){
    --brand:#D9992B;
    --brand-2:#B87F18;
    --brand-text:#E9B860;
    --brand-on-dark:#F0B44E;
    --on-brand:#141210;
  }
}
:root.theme-mach[data-theme="dark"]{
  --brand:#D9992B;
  --brand-2:#B87F18;
  --brand-text:#E9B860;
  --brand-on-dark:#F0B44E;
  --on-brand:#141210;
}
:root.theme-mach[data-theme="light"]{
  --brand:#E9A83A;
  --brand-2:#C98A1F;
  --brand-text:#8A6210;
  --brand-on-dark:#F0B44E;
  --on-brand:#1A1613;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-jp);font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-on-dark);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.lbl{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);font-weight:500;
}
.jp-h{font-weight:700;letter-spacing:.06em;line-height:1.5;text-wrap:balance}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand);color:var(--on-brand);padding:12px 18px;
  font-family:var(--f-mono);font-size:12px;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- header ---------- */
.hd{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.hd-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:78px;display:flex;align-items:center;gap:20px;
}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.mark img{height:50px;width:auto;display:block}
.mark .mark-sub{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;color:var(--mute);
  padding-left:12px;border-left:1px solid var(--line);line-height:1.5;
}
@media(max-width:640px){.mark .mark-sub{display:none}}
.nav{display:flex;gap:clamp(12px,1.5vw,20px)}
.nav a{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  text-decoration:none;color:var(--mute);padding:4px 0;white-space:nowrap;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-bottom-color:var(--brand)}
.hd-cta{display:flex;align-items:center;gap:10px}
.hd-tel{
  font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;text-decoration:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);
}
.hd-tel:hover{color:var(--brand-text)}
.hd-btn{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-decoration:none;
  padding:8px 15px;background:var(--brand);color:var(--on-brand);white-space:nowrap;
  transition:background .18s;
}
.hd-btn:hover,.hd-btn:focus-visible{background:var(--brand-2)}
/* mobile menu */
.nav-toggle{
  display:none;width:42px;height:38px;padding:0;flex:none;
  background:transparent;border:1px solid var(--line);cursor:pointer;color:var(--ink);
}
.nav-toggle span{
  display:block;width:18px;height:1.5px;background:currentColor;margin:3.5px auto;
  transition:transform .22s ease,opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-mobile{
  display:none;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--ground) 97%,transparent);
}
.nav-mobile.open{display:block}
.nav-mobile ul{
  list-style:none;margin:0;padding:8px var(--pad) 20px;
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:0 20px;
}
.nav-mobile a{
  display:block;padding:13px 0;text-decoration:none;color:var(--ink);
  font-size:14px;letter-spacing:.04em;border-bottom:1px solid var(--line);
}
.nav-mobile a:hover{color:var(--brand-text)}
.nav-mobile-lang{
  max-width:var(--maxw);margin-inline:auto;
  padding:14px var(--pad) 22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.nav-mobile-lang span{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}
.nav-mobile-lang a{
  display:inline-block;padding:8px 16px;border:1px solid var(--line);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  text-decoration:none;color:var(--ink);
}
.nav-mobile-lang a[aria-current="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
@media(max-width:1080px){
  .nav{display:none}
  .nav-toggle{display:block}
}
@media(min-width:1081px){.nav-mobile{display:none!important}}
@media(max-width:560px){
  .hd-tel{display:none}
  .nav-mobile ul{grid-template-columns:1fr}
  /* keep the bar compact on a phone while still enlarging the mark */
  .hd-in{height:66px}
  .mark img{height:42px}
  /* the .mark-en rules that used to sit here were declared before the base
     .mark-en block further down and so never applied; they live at the end of
     this file now, where they actually win. */
}

/* ---------- hero (full-bleed photo, copy overlaid) ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--dark);color:var(--on-dark);
  border-bottom:3px solid var(--brand);
}
.hero-media{position:absolute;inset:0}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:58% 42%;
  filter:saturate(.8) contrast(1.04);
  animation:heroZoom 18s ease-out forwards;
}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--dark) 0%,color-mix(in srgb,var(--dark) 92%,transparent) 32%,color-mix(in srgb,var(--dark) 58%,transparent) 62%,color-mix(in srgb,var(--dark) 30%,transparent) 100%),
    linear-gradient(0deg,var(--dark) 4%,color-mix(in srgb,var(--dark) 74%,transparent) 30%,transparent 66%),
    radial-gradient(110% 80% at 8% 4%,rgba(95,183,125,.12),transparent 56%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 96px);
}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero-in{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(72px,11vw,150px) var(--pad) 0;
}
.eyebrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--mute-on-dark);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0;
}
.eyebrow i{display:block;width:34px;height:1px;background:var(--brand-on-dark);font-style:normal}
.h1{
  margin:26px 0 0;font-size:clamp(30px,5.4vw,58px);
  font-weight:700;letter-spacing:.05em;line-height:1.36;text-wrap:balance;
}
.h1 em{font-style:normal;color:var(--brand-on-dark)}
.slogan{
  margin:22px 0 0;font-family:var(--f-disp);
  font-size:clamp(30px,7.6vw,88px);line-height:.86;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(237,240,234,.5);
  white-space:nowrap;text-transform:uppercase;
}
.slogan b{color:var(--brand-on-dark);-webkit-text-stroke:0;font-weight:400}
.lead{margin:30px 0 0;max-width:56ch;font-size:clamp(14.5px,1.5vw,16.5px);line-height:2.05;color:rgba(237,240,234,.85)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;text-decoration:none;
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid transparent;transition:transform .18s,background .18s,color .18s;
}
.btn-a{background:var(--brand);color:var(--on-brand);font-weight:600}
.btn-a:hover,.btn-a:focus-visible{transform:translateY(-2px);background:var(--brand-2)}
.btn-b{border-color:rgba(237,240,234,.4);color:var(--on-dark)}
.btn-b:hover,.btn-b:focus-visible{background:rgba(237,240,234,.1)}

.stats{
  position:relative;max-width:var(--maxw);margin:clamp(46px,7vw,84px) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(237,240,234,.18);
}
.stat{padding:24px 22px 30px;border-right:1px solid rgba(237,240,234,.18)}
.stat:first-child{padding-left:var(--pad)}
.stat:last-child{border-right:0;padding-right:var(--pad)}
.stat b{
  display:block;font-family:var(--f-disp);font-size:clamp(38px,5vw,64px);line-height:.9;
  color:var(--brand-on-dark);font-variant-numeric:tabular-nums;font-weight:400;
}
.stat b small{font-size:.42em;letter-spacing:.04em;margin-left:4px}
.stat span{display:block;margin-top:10px;font-size:12px;letter-spacing:.08em;color:var(--mute-on-dark)}
@media(max-width:760px){
  .hero-media img{object-position:66% 46%}
  .hero-scrim{
    background:
      linear-gradient(0deg,var(--dark) 10%,color-mix(in srgb,var(--dark) 82%,transparent) 46%,color-mix(in srgb,var(--dark) 48%,transparent) 100%),
      radial-gradient(110% 70% at 8% 4%,rgba(95,183,125,.10),transparent 58%);
  }
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding-inline:var(--pad)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid rgba(237,240,234,.18)}
}
@media(max-width:420px){.slogan{white-space:normal}}

/* ---------- section frame ---------- */
.sec{padding-block:clamp(56px,8vw,104px);border-top:1px solid var(--line)}
.sec:first-child{border-top:0}
.sec-head{
  display:grid;grid-template-columns:130px 1fr;gap:0 28px;
  align-items:start;margin-bottom:clamp(30px,4vw,48px);
}
.sec-no{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--mute);
  padding-top:9px;border-top:2px solid var(--brand);
}
.sec-t{margin:0;font-size:clamp(22px,3vw,32px)}
.sec-t + p{margin:14px 0 0;max-width:62ch;color:var(--mute);font-size:14.5px;line-height:2}
@media(max-width:700px){
  .sec-head{grid-template-columns:1fr;gap:14px}
  .sec-no{border-top:0;padding-top:0}
}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.svc > article{
  background:var(--panel);padding:30px 26px 34px;
  display:flex;flex-direction:column;gap:12px;position:relative;
}
.svc > article::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.svc > article:hover::before{transform:scaleX(1)}
.svc h3{margin:0;font-size:18px;font-weight:700;letter-spacing:.05em}
.svc p{margin:0;font-size:14px;color:var(--mute);line-height:2}
.svc ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.svc li{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;color:var(--mute);
  padding-left:15px;position:relative;
}
.svc li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--brand)}
@media(max-width:820px){.svc{grid-template-columns:1fr}}

/* ---------- lineup ---------- */
.lineup{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,30px)}
.card figure{
  margin:0;aspect-ratio:4/3;position:relative;overflow:hidden;
  background:var(--dark);border:1px solid var(--line);
}
.card figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,.7,.3,1);
}
.card:hover figure img{transform:scale(1.045)}
.card figure figcaption{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  color:var(--on-brand);background:var(--brand);padding:4px 9px;
}
.card h3{margin:16px 0 0;font-size:17px;font-weight:700;letter-spacing:.05em}
.card p{margin:8px 0 0;font-size:13.5px;color:var(--mute);line-height:1.95}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.card .tags i{
  font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  border:1px solid var(--line);padding:3px 8px;color:var(--mute);
}
@media(max-width:820px){.lineup{grid-template-columns:1fr}}

/* ---------- machinery sub-brand ---------- */
.mach-box{
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--mach);
  padding:clamp(26px,3.6vw,42px);
  display:grid;grid-template-columns:172px 1fr;gap:clamp(24px,3.4vw,44px);align-items:start;
}
.mach-seal{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mach-seal img{width:150px;height:150px;border-radius:50%;display:block;box-shadow:0 4px 22px rgba(0,0,0,.22)}
.mach-seal p{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute);line-height:1.8}
.mach-body h3{margin:0;font-size:clamp(18px,2.3vw,24px);font-weight:700;letter-spacing:.05em;line-height:1.55;text-wrap:balance}
.mach-body > p{margin:14px 0 0;font-size:14.5px;line-height:2;color:var(--mute);max-width:60ch}
.mach-list{
  margin:24px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.mach-list li{
  background:var(--panel);padding:11px 13px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink);
}
.mach-note{
  margin:20px 0 0;padding-left:13px;border-left:2px solid var(--mach);
  font-size:13px;line-height:1.95;color:var(--mute);
}
@media(max-width:760px){
  .mach-box{grid-template-columns:1fr;gap:24px}
  .mach-seal{flex-direction:row;align-items:center;gap:16px}
  .mach-seal img{width:104px;height:104px;flex:none}
}

/* ---------- network ---------- */
.net{background:var(--dark);color:var(--on-dark);border-top:3px solid var(--brand)}
.net .sec{border-top:0}
.net .sec-no{color:var(--mute-on-dark);border-top-color:var(--brand-on-dark)}
.net .sec-t + p{color:rgba(237,240,234,.72)}
.net-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,52px);align-items:center}
.net svg{width:100%;height:auto;display:block}
.ports{display:flex;flex-direction:column;border-top:1px solid rgba(237,240,234,.18)}
.ports div{
  display:grid;grid-template-columns:74px 1fr auto;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(237,240,234,.13);
}
.ports code{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--brand-on-dark)}
.ports b{font-weight:400;font-size:14px}
.ports em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--mute-on-dark)}
@media(max-width:860px){.net-grid{grid-template-columns:1fr}}

/* ---------- flow ---------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);margin:0;padding:0}
.flow > li{
  background:var(--ground);padding:24px 20px 30px;list-style:none;
  display:flex;flex-direction:column;gap:10px;
}
.flow .n{
  font-family:var(--f-disp);font-size:34px;line-height:1;color:var(--brand-text);
  font-variant-numeric:tabular-nums;
}
.flow h3{margin:0;font-size:15px;font-weight:700;letter-spacing:.05em}
.flow p{margin:0;font-size:13px;color:var(--mute);line-height:1.95}
@media(max-width:960px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}

/* ---------- statement band ----------
   Full-bleed brand green, straight after the hero. The page has several photo
   bands already, so this one carries type alone and leans on the colour. */
.stmt{background:var(--brand);color:var(--on-brand)}
.stmt-in{max-width:var(--maxw);margin:0 auto;padding:clamp(42px,6.5vw,76px) var(--pad)}
.stmt-kick{
  margin:0;display:inline-block;padding:7px 14px;
  border:1px solid color-mix(in srgb,var(--on-brand) 50%,transparent);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;line-height:1.6;
}
.stmt-t{
  margin:20px 0 0;font-weight:700;letter-spacing:.04em;line-height:1.45;
  font-size:clamp(23px,4.2vw,44px);text-wrap:balance;
}
.stmt-lead{
  margin:18px 0 0;max-width:52ch;line-height:2;
  font-size:clamp(14.5px,1.5vw,17px);
  color:color-mix(in srgb,var(--on-brand) 86%,transparent);
}
@media(max-width:560px){.stmt-t br{display:none}}

/* ---------- cta band ---------- */
.band{
  position:relative;overflow:hidden;color:var(--on-dark);background:var(--dark);
  border-block:3px solid var(--brand);
  min-height:clamp(300px,40vw,420px);display:flex;align-items:center;
}
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.band-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--dark) 0%,color-mix(in srgb,var(--dark) 86%,transparent) 36%,color-mix(in srgb,var(--dark) 34%,transparent) 76%,transparent 100%),
    linear-gradient(0deg,color-mix(in srgb,var(--dark) 66%,transparent),transparent 55%);
}
.band-in{position:relative;max-width:var(--maxw);margin:0 auto;width:100%;padding:clamp(44px,7vw,72px) var(--pad)}
.band h2{margin:16px 0 0;font-size:clamp(22px,3.4vw,36px);font-weight:700;letter-spacing:.05em;line-height:1.5;text-wrap:balance}
.band p{margin:16px 0 0;max-width:46ch;font-size:14.5px;line-height:2;color:rgba(237,240,234,.86)}
@media(max-width:760px){
  .band-scrim{background:linear-gradient(0deg,var(--dark) 18%,color-mix(in srgb,var(--dark) 76%,transparent) 58%,color-mix(in srgb,var(--dark) 38%,transparent) 100%)}
}

/* ---------- contact ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,56px)}
.badge-en{width:136px;height:136px;border-radius:50%;display:block;margin:0 0 24px}
@media(max-width:820px){.badge-en{width:112px;height:112px}}
.contact-rows{margin:0 0 20px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.contact-rows div{padding:14px 0;border-bottom:1px solid var(--line)}
.contact-rows dt{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin:0 0 4px;
}
.contact-rows dd{margin:0}
.contact-rows a{
  font-family:var(--f-mono);font-size:19px;letter-spacing:.03em;text-decoration:none;
  font-variant-numeric:tabular-nums;color:var(--ink);word-break:break-all;
}
.contact-rows a:hover{color:var(--brand-text)}
.contact-rows .small a{font-size:14.5px}
.form-side .note{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  border-left:2px solid var(--brand);padding-left:12px;color:var(--mute);line-height:1.9;margin:0;
}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld.wide{grid-column:1/-1}
.fld label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.fld .req{color:var(--brand-text)}
.fld input,.fld select,.fld textarea{
  font-family:var(--f-jp);font-size:14px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:0;padding:12px 13px;width:100%;
  transition:border-color .18s;
}
.fld textarea{resize:vertical;min-height:96px}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 26%,transparent);
}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--mute);line-height:1.8}
.consent input{width:auto;margin-top:.35em;flex:none}
.consent a{color:var(--brand-text)}
.submit{
  grid-column:1/-1;justify-self:start;background:var(--ink);color:var(--ground);border:0;cursor:pointer;
  padding:15px 30px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .18s;
}
.submit:hover,.submit:focus-visible{background:var(--brand)}
.form-msg{
  grid-column:1/-1;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--brand-text);min-height:1.2em;
}
@media(max-width:820px){.form-grid,form{grid-template-columns:1fr}}

/* ---------- sustainability ---------- */
.sus-tagline{
  margin:0 0 26px;font-size:clamp(20px,2.8vw,30px);font-weight:700;
  letter-spacing:.06em;line-height:1.5;color:var(--brand-text);text-wrap:balance;
}
.sus-intro{max-width:64ch;display:flex;flex-direction:column;gap:18px;margin:0}
.sus-intro p{margin:0;font-size:14.5px;line-height:2.15}
.sus-mid{margin:clamp(44px,6vw,72px) 0 0;display:grid;grid-template-columns:130px 1fr;gap:0 28px;align-items:start}
.sus-mid h3{
  margin:0;font-size:clamp(17px,2.1vw,21px);font-weight:700;letter-spacing:.05em;
  padding-top:9px;border-top:2px solid var(--brand);
}
.sus-mid p{margin:0;max-width:62ch;font-size:14px;line-height:2.05;color:var(--mute)}
@media(max-width:700px){.sus-mid{grid-template-columns:1fr;gap:14px}.sus-mid h3{border-top:0;padding-top:0}}

.sus-grid{
  margin:clamp(28px,4vw,40px) 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.sus-item{background:var(--ground);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:10px}
.sus-item:last-child:nth-child(odd){grid-column:1/-1}
.sus-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sus-top b{
  font-family:var(--f-disp);font-size:30px;line-height:1;color:var(--brand-text);
  font-variant-numeric:tabular-nums;font-weight:400;
}
.sus-top em{
  font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}
.sus-item h4{margin:0;font-size:16.5px;font-weight:700;letter-spacing:.05em;line-height:1.6}
.sus-item p{margin:0;font-size:13.5px;line-height:2.05;color:var(--mute)}
.sus-item ul{
  margin:2px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 14px;
}
.sus-item li{font-size:12.5px;color:var(--mute);padding-left:14px;position:relative;line-height:1.8}
.sus-item li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--brand)}
@media(max-width:820px){.sus-grid{grid-template-columns:1fr}}

.sus-statement{
  margin:clamp(44px,6vw,72px) 0 0;background:var(--dark);color:var(--on-dark);
  border-left:3px solid var(--brand-on-dark);padding:clamp(30px,4.4vw,52px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,48px);align-items:start;
}
.sus-statement h3{margin:0;font-size:clamp(22px,3.4vw,34px);font-weight:700;letter-spacing:.05em;line-height:1.5;text-wrap:balance}
.sus-statement h3 span{color:var(--brand-on-dark)}
.sus-statement .lbl{color:var(--mute-on-dark);margin:0 0 16px}
.sus-statement p{margin:0 0 16px;font-size:14px;line-height:2.1;color:rgba(237,240,234,.8)}
.sus-statement p:last-child{margin-bottom:0}
@media(max-width:820px){.sus-statement{grid-template-columns:1fr}}

.sus-close{margin:clamp(40px,5vw,64px) 0 0;display:grid;grid-template-columns:130px 1fr;gap:0 28px}
.sus-close .lbl{padding-top:9px;border-top:2px solid var(--brand)}
.sus-close h3{margin:0 0 18px;font-size:clamp(17px,2.1vw,22px);font-weight:700;letter-spacing:.05em;line-height:1.6}
.sus-close p{margin:0 0 16px;max-width:62ch;font-size:14px;line-height:2.1;color:var(--mute)}
.sus-close p:last-child{margin-bottom:0}
.sus-close strong{color:var(--ink);font-weight:700}
@media(max-width:700px){.sus-close{grid-template-columns:1fr;gap:16px}.sus-close .lbl{border-top:0;padding-top:0}}

/* ---------- company ---------- */
.co{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px)}
.co dl{margin:0;display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--line)}
.co dt,.co dd{padding:14px 0;border-bottom:1px solid var(--line);margin:0}
.co dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--mute);padding-top:17px}
.co dd{font-size:14.5px;font-variant-numeric:tabular-nums}
.co dd a{text-decoration:none;color:var(--ink)}
.co dd a:hover{color:var(--brand-text)}
.co-aside{display:flex;flex-direction:column;gap:18px}
.co-map{
  border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;align-content:center;gap:8px;
  background:
    repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--line) 55%,transparent) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--line) 55%,transparent) 23px 24px);
  text-align:center;padding:24px;
}
.co-map b{font-size:14px;letter-spacing:.06em}
.co-map span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--mute)}
.co-licence{
  border-left:2px solid var(--brand);padding-left:14px;
  font-size:13px;line-height:1.9;color:var(--mute);
}
.co-licence b{display:block;color:var(--ink);font-family:var(--f-mono);font-size:15px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
@media(max-width:820px){.co{grid-template-columns:1fr;gap:28px}}

/* ---------- legal ---------- */
.legal-intro{max-width:64ch;display:flex;flex-direction:column;gap:14px;margin:0 0 26px}
.legal-intro p{margin:0;font-size:14px;line-height:2.1;color:var(--mute)}
.legal-art{margin:30px 0 0;max-width:70ch}
.legal-art h2{margin:0 0 9px;font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--ink);line-height:1.6}
.legal-art p{margin:0 0 11px;font-size:13.5px;line-height:2.05;color:var(--mute)}
.legal-art p:last-child{margin-bottom:0}
.legal-art ol{margin:9px 0 12px;padding-left:1.5em}
.legal-art li{margin:0 0 6px;font-size:13.5px;line-height:1.95;color:var(--mute)}
.legal-date{
  margin:34px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--mute);
}
.back-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:40px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--brand-text);text-decoration:none;
}
.back-link:hover{text-decoration:underline}

/* ---------- footer ---------- */
.ft{background:var(--dark-2);color:var(--on-dark);padding-block:48px 30px}
.ft-in{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;
}
.ft-marks{display:flex;flex-wrap:wrap;gap:14px 34px}
.ft .mark{align-items:center;gap:14px;margin-right:0}
.ft .seal{
  width:76px;height:76px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#fff;box-shadow:0 2px 18px rgba(0,0,0,.28);
}
.ft .seal img{width:58px;height:58px;border-radius:50%;display:block}
.ft .seal-plain{background:transparent;box-shadow:none}
.ft .seal-plain img{width:76px;height:76px}
.ft .mark-sub{color:var(--mute-on-dark);border-left-color:rgba(237,240,234,.22)}
.ft address{
  font-style:normal;margin:20px 0 0;font-size:13px;color:var(--mute-on-dark);line-height:1.95;
}
.ft address a{color:var(--on-dark);text-decoration:none;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ft address a:hover{color:var(--brand-on-dark)}
/* social accounts, under the footer address */
.sns{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}
.sns a{
  display:flex;align-items:center;gap:8px;padding:8px 13px 8px 11px;
  border:1px solid rgba(237,240,234,.22);color:var(--mute-on-dark);text-decoration:none;
  transition:color .18s,border-color .18s;
}
.sns a:hover,.sns a:focus-visible{color:var(--on-dark);border-color:var(--brand-on-dark)}
.sns svg{width:17px;height:17px;flex:none;display:block}
.sns span{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em}

.ft-links{display:flex;flex-wrap:wrap;gap:14px 20px;max-width:420px}
.ft-links a{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--mute-on-dark);text-decoration:none}
.ft-links a:hover,.ft-links a:focus-visible{color:var(--brand-on-dark)}
.copy{
  max-width:var(--maxw);margin:34px auto 0;padding-inline:var(--pad);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;color:var(--mute-on-dark);
  border-top:1px solid rgba(237,240,234,.14);padding-top:18px;
}

/* ---------- motion ---------- */
/* Content is visible by default. The reveal only engages once main.js has
   confirmed it is running (html.js-anim), so a failure in the animation can
   never leave copy permanently invisible. */
.js-anim .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.3,1)}
.js-anim .rv.in{opacity:1;transform:none}
.arc{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .js-anim .rv{opacity:1;transform:none}
}

/* ---------- print ---------- */
@media print{
  .hd,.band,.ft-links,.skip,form{display:none}
  body{background:#fff;color:#000}
  .js-anim .rv{opacity:1;transform:none}
}

/* ==========================================================================
   Multi-page additions — interior page headers, language switch, breadcrumbs
   ========================================================================== */

/* language switch */
.lang{display:flex;align-items:center;gap:0;flex:none;border:1px solid var(--line)}
.lang a{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-decoration:none;
  padding:6px 9px;color:var(--mute);transition:background .18s,color .18s;
}
.lang a[aria-current="true"]{background:var(--brand);color:var(--on-brand)}
.lang a:not([aria-current="true"]):hover{color:var(--ink)}
/* the switch shrinks instead of disappearing — see the narrow-width block below */

/* header mark for the English edition (circular badge + wordmark) */
.mark-en{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.mark-en img{width:54px;height:54px;border-radius:50%;display:block;flex:none}
.mark-en .wordmark{height:19px;width:auto;display:block;color:var(--ink)}
.mark-en i{
  font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;
  color:var(--mute);display:block;margin-top:3px;
}
@media(max-width:640px){.mark-en i{display:none}}

/* interior page header */
.page-hd{
  background:var(--dark);color:var(--on-dark);
  border-bottom:3px solid var(--brand);
  padding-block:clamp(38px,5.5vw,72px) clamp(34px,5vw,64px);
}
.page-hd .lbl{color:var(--mute-on-dark);margin:0}
.page-hd h1{
  margin:14px 0 0;font-size:clamp(26px,4vw,44px);font-weight:700;
  letter-spacing:.05em;line-height:1.4;text-wrap:balance;
}
.page-hd p{margin:18px 0 0;max-width:60ch;font-size:15px;line-height:2.05;color:rgba(237,240,234,.8)}

/* breadcrumbs */
.crumb{
  margin:0 0 clamp(18px,2.4vw,26px);padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute-on-dark);
}
.crumb a{color:var(--mute-on-dark);text-decoration:none}
.crumb a:hover{color:var(--brand-on-dark)}
.crumb li::after{content:"›";margin-left:8px;opacity:.6}
.crumb li:last-child::after{content:""}
.crumb li[aria-current="page"]{color:var(--on-dark)}

/* teaser cards on the top page */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.teaser{
  background:var(--panel);padding:28px 26px 30px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:10px;position:relative;transition:background .2s;
}
.teaser:hover{background:color-mix(in srgb,var(--brand) 6%,var(--panel))}
.teaser .lbl{margin:0}
.teaser h3{margin:0;font-size:17px;font-weight:700;letter-spacing:.05em}
.teaser p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.95}
.teaser .go{
  margin-top:auto;padding-top:12px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--brand-text);
}
.teaser:hover .go{text-decoration:underline}
@media(max-width:820px){.teasers{grid-template-columns:1fr}}

/* machinery cross-link banner on the top page */
.mach-banner{
  display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--mach);
  padding:24px clamp(22px,3vw,32px);text-decoration:none;color:inherit;transition:background .2s;
}
.mach-banner:hover{background:color-mix(in srgb,var(--mach) 7%,var(--panel))}
.mach-banner img{width:96px;height:96px;border-radius:50%;display:block}
.mach-banner h3{margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:.05em}
.mach-banner p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.9;max-width:52ch}
/* The banner's link cue is a solid button, matching the top page's
   「無料査定を依頼する」. It stays a <span>: the whole banner is already the
   anchor, so a nested <a> would be invalid. Amber cannot carry white text,
   hence the near-black ink. */
.mach-banner .go{
  display:inline-flex;align-items:center;gap:10px;justify-self:start;
  padding:15px 24px;background:var(--mach);color:#1A1613;font-weight:700;
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;
  white-space:nowrap;transition:transform .18s,background .18s;
}
.mach-banner:hover .go,.mach-banner:focus-visible .go{
  transform:translateY(-2px);background:color-mix(in srgb,var(--mach) 84%,#000);
}
@media(max-width:760px){
  .mach-banner{grid-template-columns:72px 1fr;gap:16px}
  .mach-banner img{width:72px;height:72px}
  .mach-banner .go{grid-column:1/-1}
}

/* page-level prev/next */
.pager{
  margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
}
.pager a{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--brand-text);text-decoration:none;
}
.pager a:hover{text-decoration:underline}

/* translation disclaimer */
.tl-note{
  margin:0 0 26px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--brand);
  background:var(--panel);font-size:12.5px;line-height:1.9;color:var(--mute);
}

/* ---------- logistics imagery ---------- */
.logi-band{position:relative;overflow:hidden;background:var(--dark);line-height:0}
.logi-band img{width:100%;height:100%;object-fit:cover;display:block;max-height:clamp(220px,32vw,420px)}
.logi-band figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:14px var(--pad);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--on-dark);
  background:linear-gradient(0deg,color-mix(in srgb,var(--dark) 88%,transparent),transparent);
  line-height:1.6;
}
.logi-band figcaption span{max-width:var(--maxw);margin:0 auto;display:block}
figure.logi-band{margin:0}

/* light-toned banner sits on the paper ground without a dark plate */
.logi-light{background:#EDF1F6}
.logi-light img{mix-blend-mode:multiply}
:root[data-theme="dark"] .logi-light,
:root:not([data-theme="light"]) .logi-light{background:#DDE4EC}
.logi-light figcaption{
  color:var(--ink);
  background:linear-gradient(0deg,rgba(237,241,246,.92),transparent);
}

/* ---------- embedded map ---------- */
.co-map-live{
  position:relative;display:block;padding:0;
  background:var(--panel);border:1px solid var(--line);aspect-ratio:4/3;
  overflow:hidden;
}
.co-map-live iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.co-map-link{
  margin:10px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
}
.co-map-link a{color:var(--brand-text);text-decoration:none}
.co-map-link a:hover{text-decoration:underline}

/* ---------- news list ---------- */
.news{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.news li{
  display:grid;grid-template-columns:104px 104px 1fr;gap:0 20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.news time{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.news .cat{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);padding:3px 0;text-align:center;color:var(--mute);
}
.news .cat[data-kind="service"]{border-color:var(--brand);color:var(--brand-text)}
.news p{margin:0;font-size:14.5px;line-height:1.9}
@media(max-width:640px){
  .news li{grid-template-columns:104px 1fr;gap:6px 16px}
  .news .cat{grid-row:1;grid-column:2;justify-self:start;padding-inline:10px}
  .news p{grid-column:1/-1}
}

/* ---------- why choose us ---------- */
.why{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.why > article{
  background:var(--panel);padding:28px 24px 32px;
  display:flex;flex-direction:column;gap:11px;
}
.why .n{
  font-family:var(--f-disp);font-size:30px;line-height:1;color:var(--brand-text);
  font-variant-numeric:tabular-nums;
}
.why h3{margin:0;font-size:16.5px;font-weight:700;letter-spacing:.05em;line-height:1.55}
.why p{margin:0;font-size:13.5px;line-height:2;color:var(--mute)}
.why em{
  font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);
}
@media(max-width:980px){.why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.why{grid-template-columns:1fr}}

/* four service cards read better two-up than squeezed four-across */
.svc{grid-template-columns:repeat(2,1fr)}
@media(min-width:1100px){.svc{grid-template-columns:repeat(2,1fr)}}

/* ---------- auction ticker ---------- */
.ticker{
  background:var(--dark-2);color:var(--on-dark);
  border-bottom:1px solid rgba(237,240,234,.14);
  display:grid;grid-template-columns:auto 1fr;align-items:stretch;overflow:hidden;
}
.ticker-label{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:12px var(--pad);border-right:1px solid rgba(237,240,234,.18);
  background:var(--brand);color:var(--on-brand);white-space:nowrap;flex:none;
}
.ticker-label b{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;font-weight:600;
}
.ticker-label span{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;opacity:.8}
.ticker-view{position:relative;overflow:hidden;display:flex;align-items:center}
/* One animated wrapper holding two identical lists: shifting it by exactly half
   its own width lands the copy where the original started, so the loop has no
   seam. Animating the two lists separately would tear them apart. */
.ticker-track{display:flex;flex:none;animation:tickerRun 48s linear infinite}
.ticker-view:hover .ticker-track,
.ticker-view:focus-within .ticker-track{animation-play-state:paused}
.ticker-list{display:flex;align-items:center;margin:0;padding:0;list-style:none;flex:none}
.ticker-list li{
  display:flex;align-items:baseline;gap:12px;white-space:nowrap;
  padding:14px 26px;border-right:1px solid rgba(237,240,234,.12);
}
.ticker-list .model{font-size:13.5px;letter-spacing:.03em}
.ticker-list .spec{font-family:var(--f-mono);font-size:11px;color:var(--mute-on-dark)}
.ticker-list .price{
  font-family:var(--f-mono);font-size:14px;letter-spacing:.03em;
  color:var(--brand-on-dark);font-variant-numeric:tabular-nums;
}
@keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-note{
  grid-column:1/-1;padding:8px var(--pad) 10px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--mute-on-dark);
  border-top:1px solid rgba(237,240,234,.1);
}
@media(max-width:640px){
  .ticker{grid-template-columns:1fr}
  .ticker-label{
    /* base rule centres a column; as a row it must be pinned left again */
    flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;
    border-right:0;border-bottom:1px solid rgba(237,240,234,.18);padding-block:7px;
  }
  .ticker-label b{font-size:10px}
  .ticker-list li{padding:11px 18px;gap:9px}
  .ticker-list .model{font-size:12.5px}
  .ticker-list .spec{font-size:10px}
  .ticker-list .price{font-size:12.5px}
  .ticker-note{padding:6px var(--pad) 8px;font-size:9px;line-height:1.6}
}
/* a moving marquee is unusable for some readers — hold it still and wrap instead */
@media (prefers-reduced-motion:reduce){
  .ticker-view{overflow-x:auto}
  .ticker-track{animation:none}
  .ticker-list[aria-hidden="true"]{display:none}
}

/* ---------- the two buying brands, on the top page ---------- */
.brands{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.brands > a{
  background:var(--panel);text-decoration:none;color:inherit;
  padding:clamp(20px,2.4vw,28px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,28px);align-items:center;
  transition:background .2s;
}
.brands > a:hover{background:color-mix(in srgb,var(--brand) 5%,var(--panel))}
.brands img{
  width:clamp(72px,7vw,92px);height:clamp(72px,7vw,92px);
  border-radius:50%;display:block;flex:none;
  box-shadow:0 3px 18px rgba(0,0,0,.16);
}
.brands .en{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);display:block;
}
.brands h3{margin:8px 0 0;font-size:clamp(16px,2vw,19px);font-weight:700;letter-spacing:.05em;line-height:1.55}
.brands p{margin:9px 0 0;font-size:13.5px;line-height:1.95;color:var(--mute)}
.brands .go{
  display:block;margin-top:12px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--brand-text);
}
.brands > a:hover .go{text-decoration:underline}
/* the machinery mark carries its own amber; keep its cue local to that card */
.brands > a.brand-mach:hover{background:color-mix(in srgb,var(--mach) 7%,var(--panel))}
.brands > a.brand-mach .go{color:var(--mach)}
@media(max-width:820px){.brands{grid-template-columns:1fr}}
@media(max-width:420px){
  .brands > a{grid-template-columns:1fr;gap:16px;justify-items:start}
}


/* ---------- the two buying brands, opening the top page ---------- */
.brandbar{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(20px,2.6vw,32px) var(--pad) clamp(18px,2.2vw,26px);
}
/* the opening band is tighter than a full section: the marks carry it, so the
   heading block gives up its 130px rail and sits above them instead */
.brandbar .sec-head{grid-template-columns:1fr;gap:8px;margin-bottom:clamp(14px,1.8vw,20px)}
.brandbar .sec-t{font-size:clamp(20px,2.6vw,28px)}
.brandbar .sec-t + p{font-size:14px;max-width:66ch}
@media(min-width:900px){
  /* wide enough to put the label back on its own rail */
  .brandbar .sec-head{grid-template-columns:130px 1fr;gap:0 28px}
  .brandbar .sec-no{padding-top:9px;border-top:2px solid var(--brand)}
}

/* ---------- the two brand marks, opening the hero ---------- */
.hero-brands{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;
  margin:0 0 clamp(22px,3vw,34px);
}
.hero-brands a{
  display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--on-dark);
}
.hero-brands img{
  width:clamp(56px,5.4vw,72px);height:clamp(56px,5.4vw,72px);
  border-radius:50%;display:block;flex:none;
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}
.hero-brands span{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;line-height:1.85;
  color:var(--on-dark);padding-left:13px;border-left:1px solid rgba(237,240,234,.28);
}
.hero-brands a:hover span{color:var(--brand-on-dark)}
@media(max-width:560px){
  .hero-brands{gap:12px 18px}
  .hero-brands span{font-size:9.5px;letter-spacing:.12em;padding-left:10px}
}

/* ==========================================================================
   Mobile legibility
   The mono label styles are sized as small design accents for the desktop
   layout; at phone widths they drop below what is comfortable to read, so they
   are stepped up here only. Desktop rendering is untouched.
   ========================================================================== */

/* Form controls under 16px make iOS Safari zoom the page in on focus, which
   then leaves the visitor scrolled sideways mid-form. 16px prevents that. */
@media(max-width:820px){
  .fld input,.fld select,.fld textarea{font-size:16px;padding:13px 14px}
  .fld textarea{min-height:120px}
  .consent{font-size:13.5px;gap:12px}
  .consent input{width:22px;height:22px;margin-top:.15em}
  .submit{justify-self:stretch;width:100%;padding:17px 24px;font-size:13.5px}
  .form-msg{font-size:13px;line-height:1.9;letter-spacing:.02em}
}

@media(max-width:640px){
  /* form furniture */
  .fld label{font-size:12px;letter-spacing:.08em}
  .fld .req{font-size:12px}
  .form-side .note{font-size:12.5px;line-height:1.9}
  .contact-rows dt{font-size:11.5px}

  /* section eyebrows and captions */
  .sec-no{font-size:12px}
  .logi-band figcaption{font-size:12px;line-height:1.7}
  .lbl{font-size:12px}
  .eyebrow{font-size:12px}
  .spec{font-size:11.5px}
  /* these each carry a more specific rule above, so they are matched in kind */
  .card figure figcaption{font-size:11.5px}
  .card .tags i{font-size:11.5px}
  .teaser .go,.mach-banner .go,.brands .go{font-size:12px}
  .news .cat{font-size:11.5px}
  .why em,.sus-top em{font-size:11.5px}
  .co dt{font-size:11.5px}
  .crumb{font-size:11.5px}
  .ticker-label span{font-size:11.5px}
  .legal-date{font-size:12.5px}
  .co-map-link{font-size:12.5px}

  /* the two brand marks in the hero */
  .hero-brands span{font-size:11px;letter-spacing:.1em}

  /* auction ticker */
  .ticker-label b{font-size:11px}
  .ticker-list .model{font-size:13.5px}
  .ticker-list .spec{font-size:11.5px}
  .ticker-list .price{font-size:13.5px}
  .ticker-note{font-size:11px;line-height:1.75}

  /* footer — also grows the links into a comfortable tap target */
  .ft address{font-size:14px}
  .ft .mark-sub{font-size:11px}
  .ft-links{gap:2px 20px}
  .ft-links a{font-size:12.5px;padding:9px 0;display:inline-block}
  .copy{font-size:11.5px;line-height:1.9}

  /* header controls reach the 44px tap target */
  .hd-btn{padding:12px 16px;font-size:12.5px}
  .nav-toggle{width:44px;height:44px}
}

/* English header mark. These sit after the base .mark-en block above — a rule
   placed before it would simply be overridden — and run widest-first, so each
   narrower breakpoint wins over the one above it. */
@media(max-width:560px){
  .mark-en img{width:44px;height:44px}
  .mark-en .wordmark{height:16px}
}

/* The English wordmark is the logo's own lettering and runs much wider than the
   Japanese lockup, which pushed the header past the viewport on small phones.
   Tighten the mark and the CTA so the bar fits without dropping either. */
@media(max-width:430px){
  .mark-en{gap:8px}
  .mark-en img{width:38px;height:38px}
  .mark-en .wordmark{height:12px}
  .hd-btn{padding:12px 12px;font-size:11.5px;letter-spacing:.04em}
  .hd-in{gap:8px}
}

/* The two-up service grid above is declared unconditionally, which silently
   overrode the earlier single-column rule and left the cards two-across even on
   a phone — narrow enough that the English copy pushed the page sideways.
   Restore the intended collapse. */
@media(max-width:700px){
  .svc{grid-template-columns:1fr}
}

@media(max-width:360px){
  .mark-en img{width:34px;height:34px}
  .mark-en .wordmark{height:11px}
  .hd-btn{padding:12px 10px;font-size:11px}
}

/* The English bar carries more than the Japanese one — a wider wordmark and
   the longer +81 number — so the phone number steps aside first. The language
   switch stays in the bar at every width instead: an English-speaking visitor
   who cannot find the way back to Japanese is stuck, and the mobile menu is
   one tap too far for something that basic. It shrinks rather than hides. */
/* Nothing English-specific is needed at this width any more. Scoping header
   sizing to html[lang="en"] raised its specificity above the narrower
   breakpoints, so those never took effect — the shared blocks below handle
   both editions instead. */
@media(max-width:380px){
  .lang a{padding:5px 8px;font-size:10px;letter-spacing:.02em}
}
@media(max-width:700px){
  html[lang="en"] .hd-tel{display:none}
}

/* Just above 1081px the full English nav replaces the hamburger, and for a
   narrow band it lands before the bar can hold nav + number + button. Drop the
   number for that band only; it returns once there is room. */
@media(min-width:1081px) and (max-width:1150px){
  html[lang="en"] .hd-tel{display:none}
}

/* Closing call-to-action inside the machinery banner. Needs two classes to
   outrank `.mach-banner p`, which would otherwise grey it out. */
.mach-banner .mach-banner-cta{
  margin-top:10px;
  font-weight:700;color:var(--mach-text);letter-spacing:.04em;
}

/* coverage line under the machine-type list: how wide the net is cast */
.mach-body > p.mach-makers{
  margin:22px 0 0;padding:16px 18px;max-width:none;
  background:color-mix(in srgb,var(--mach) 8%,var(--panel));
  border:1px solid color-mix(in srgb,var(--mach) 34%,var(--line));
  font-size:14px;line-height:2;color:var(--ink);
}
.mach-makers b{display:block;margin-top:6px;color:var(--mach-text);font-weight:700}

/* imported machinery is explicitly welcome — the export network is the reason */
.mach-body > p.mach-welcome{
  margin:12px 0 0;padding:14px 18px;max-width:none;
  border-left:3px solid var(--mach);
  background:color-mix(in srgb,var(--mach) 5%,transparent);
  font-size:14px;line-height:2;color:var(--ink);
}
.mach-welcome b{color:var(--mach-text);font-weight:700}

/* office exterior in the company profile aside */
.co-photo{margin:0;border:1px solid var(--line);overflow:hidden;line-height:0}
.co-photo img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.co-photo figcaption{
  padding:10px 14px;background:var(--panel);line-height:1.7;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute);
}


/* ==========================================================================
   LINE — entry points and the LINE 査定 page.
   #06C755 is LINE's own green; it carries white text and is deliberately
   distinct from the CARSTOCK green so the two never read as the same button.
   ========================================================================== */
:root{--line-green:#06C755;--line-green-2:#05A948}

.hd-line{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 11px;
  background:var(--line-green);color:#fff;text-decoration:none;white-space:nowrap;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  transition:background .18s;
}
.hd-line:hover,.hd-line:focus-visible{background:var(--line-green-2)}
.hd-line svg{width:16px;height:16px;flex:none;display:block}
@media(max-width:900px){.hd-line span{display:none}.hd-line{padding:8px 11px}}
@media(max-width:560px){.hd-line{display:none}}

/* thumb-reach button; the floating one only appears where the header's is hidden */
.line-float{
  position:fixed;right:16px;bottom:16px;z-index:60;display:none;
  align-items:center;gap:8px;padding:13px 18px 13px 15px;
  background:var(--line-green);color:#fff;text-decoration:none;
  font-size:13.5px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.line-float svg{width:20px;height:20px;flex:none;display:block}
@media(max-width:560px){.line-float{display:inline-flex}}
@media print{.line-float{display:none!important}}

.sns a[aria-label="LINE"]:hover,.sns a[aria-label="LINE"]:focus-visible{
  color:#fff;border-color:var(--line-green);background:var(--line-green);
}

/* add-friend panel */
.line-add{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);align-items:center;
  border:1px solid var(--line);background:var(--panel);padding:clamp(24px,4vw,40px);
}
.line-add-qr{text-align:center}
.line-add-qr img{
  width:clamp(150px,20vw,200px);height:auto;display:block;
  background:#fff;padding:10px;border:1px solid var(--line);
}
.line-add-qr p{
  margin:12px 0 0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--mute);line-height:1.8;
}
.line-add-body h2{margin:10px 0 0;font-size:clamp(19px,2.6vw,26px);letter-spacing:.05em;line-height:1.5}
.line-add-body > p{margin:14px 0 0;font-size:14.5px;line-height:2;color:var(--mute);max-width:52ch}
.line-add-btn{margin:22px 0 0}
.btn-line{
  display:inline-flex;align-items:center;gap:10px;padding:16px 28px;
  background:var(--line-green);color:#fff;text-decoration:none;font-weight:700;
  font-size:15px;letter-spacing:.04em;transition:transform .18s,background .18s;
}
.btn-line:hover,.btn-line:focus-visible{transform:translateY(-2px);background:var(--line-green-2)}
.line-id{
  margin:14px 0 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--mute);
}
.line-id b{color:var(--ink);font-weight:700}
@media(max-width:760px){
  .line-add{grid-template-columns:1fr;justify-items:center;text-align:center}
  .line-add-body > p{margin-inline:auto}
  .btn-line{width:100%;justify-content:center}
}

/* FAQ list */
.line-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.line-faq > div{background:var(--ground);padding:24px clamp(18px,2.4vw,28px)}
.line-faq h3{
  margin:0 0 10px;font-size:15.5px;font-weight:700;letter-spacing:.04em;line-height:1.6;
  padding-left:20px;position:relative;
}
.line-faq h3::before{
  content:"Q";position:absolute;left:0;top:0;
  font-family:var(--f-mono);font-size:12px;color:var(--brand-text);font-weight:700;
}
.line-faq p{margin:0;font-size:13.5px;line-height:2;color:var(--mute)}
.line-faq a{color:var(--brand-text)}
@media(max-width:760px){.line-faq{grid-template-columns:1fr}}

/* the LINE page's flow has three steps, not five — without this the grid
   leaves two empty cells showing as a grey block */
.flow-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.flow-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.flow-3{grid-template-columns:1fr}}

/* ==========================================================================
   Ad landing page — one action, no way out except LINE (or the phone).
   Stands alone: no header, no site navigation, no reveal animations.
   ========================================================================== */
.lp-body{background:var(--ground)}
.lp{max-width:760px;margin:0 auto;background:var(--panel)}

.lp-hero{position:relative;overflow:hidden;background:var(--dark);isolation:isolate}
.lp-hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 55%;opacity:.34;z-index:-1;
}
.lp-hero-in{padding:clamp(30px,7vw,52px) clamp(20px,5vw,44px) clamp(34px,7vw,52px);color:#EDF0EA}
.lp-mark{width:clamp(150px,34vw,196px);height:auto;display:block;margin:0 0 clamp(22px,5vw,32px)}
.lp-hero h1{
  margin:0;font-size:clamp(25px,6.4vw,40px);font-weight:700;
  letter-spacing:.03em;line-height:1.5;
}
.lp-hero h1 em{font-style:normal;color:#7BD69B}
.lp-lead{margin:18px 0 0;font-size:clamp(14px,3.4vw,16px);line-height:2;color:rgba(237,240,234,.88)}
.lp-cta{margin:clamp(24px,5vw,32px) 0 0}
.lp-cta .btn-line{width:100%;justify-content:center;padding:19px 20px;font-size:clamp(15px,4vw,18px)}
.lp-cta .btn-line svg{width:22px;height:22px;flex:none}
.lp-note{
  margin:14px 0 0;font-size:12px;line-height:1.9;color:rgba(237,240,234,.7);
  font-family:var(--f-mono);letter-spacing:.04em;
}

.lp-sec{padding:clamp(34px,7vw,52px) clamp(20px,5vw,44px);border-top:1px solid var(--line)}
.lp-sec-alt{background:var(--ground)}
.lp-sec h2,.lp-close h2{
  margin:0 0 clamp(20px,4vw,28px);font-size:clamp(19px,4.6vw,26px);
  font-weight:700;letter-spacing:.04em;line-height:1.55;
}

.lp-steps{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:s}
.lp-steps li{background:var(--panel);padding:20px 22px;counter-increment:s}
.lp-steps b{
  display:block;font-size:16px;letter-spacing:.04em;margin-bottom:7px;
}
.lp-steps b::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--f-disp);font-size:20px;color:var(--brand-text);
  margin-right:12px;vertical-align:-1px;
}
.lp-steps span{display:block;font-size:13.5px;line-height:1.95;color:var(--mute)}

.lp-send{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.lp-send li{
  position:relative;padding-left:26px;font-size:14.5px;line-height:1.95;
}
.lp-send li::before{
  content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;
  background:var(--brand);
}
.lp-send-note{margin:20px 0 0;font-size:13px;line-height:2;color:var(--mute)}

.lp-why{display:grid;gap:22px}
.lp-why h3{
  margin:0 0 8px;font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.6;
  padding-left:14px;border-left:3px solid var(--brand);
}
.lp-why p{margin:0;font-size:13.5px;line-height:2;color:var(--mute)}

.lp-close{
  padding:clamp(34px,7vw,52px) clamp(20px,5vw,44px);
  background:var(--dark);color:#EDF0EA;text-align:center;
}
.lp-close h2{margin-bottom:clamp(18px,4vw,24px)}
.lp-close .lp-cta{margin-top:0}
.lp-qr{margin:clamp(24px,5vw,32px) 0 0;display:grid;justify-items:center;gap:10px}
.lp-qr img{width:130px;height:130px;background:#fff;padding:9px;display:block}
.lp-qr span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:rgba(237,240,234,.72)}
.lp-tel{margin:24px 0 0;font-size:13.5px;line-height:1.9;color:rgba(237,240,234,.82)}
.lp-tel a{
  color:#fff;text-decoration:none;font-family:var(--f-mono);font-size:16px;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap;
}

.lp-ft{
  padding:26px clamp(20px,5vw,44px) 34px;background:var(--dark-2);color:var(--mute-on-dark);
  font-size:12px;line-height:1.95;
}
.lp-ft p{margin:0}
.lp-ft b{color:var(--on-dark)}
.lp-ft a{color:var(--on-dark)}

/* the machinery Instagram belongs to the amber sub-brand, so it hovers amber
   rather than green — matched on the account, not the label, so both
   editions pick it up */
.sns a[href*="constructionequipmentbuying"]:hover,
.sns a[href*="constructionequipmentbuying"]:focus-visible{
  color:#141210;background:var(--mach);border-color:var(--mach);
}

/* Keeping the language switch in the bar costs about 84px, which the English
   header did not have on a small phone. Reclaim it from the pieces that can
   afford it — the wordmark, the pill padding and the gaps — rather than
   dropping a control the visitor needs. Measured at 375px: 373px of content
   in a 335px box before this block, 325px after. */
@media(max-width:500px){
  .hd-in{gap:10px}
  .hd-cta{gap:8px}
  .lang a{padding:5px 8px;font-size:10.5px;letter-spacing:.03em}
  .hd-btn{padding:12px 11px;font-size:11.5px;letter-spacing:.04em}
  html[lang="en"] .mark-en{gap:8px}
  html[lang="en"] .mark-en img{width:40px;height:40px}
  html[lang="en"] .mark-en .wordmark{height:12px}
}
@media(max-width:430px){
  .hd-in{gap:8px}
  .hd-cta{gap:7px}
  .lang a{padding:5px 7px;font-size:10px;letter-spacing:.02em}
  .hd-btn{padding:12px 9px;font-size:11px;letter-spacing:.03em}
  html[lang="en"] .mark-en{gap:7px}
  html[lang="en"] .mark-en img{width:38px;height:38px}
  html[lang="en"] .mark-en .wordmark{height:10px}
}
@media(max-width:360px){
  .lang a{padding:5px 6px;font-size:9.5px}
  .hd-btn{padding:12px 8px;font-size:10.5px}
  html[lang="en"] .mark-en .wordmark{height:9px}
  html[lang="en"] .mark-en img{width:32px;height:32px}
}

/* 320px — the smallest phone still in use. The bar needs 346px of content at
   this width, so the frame gives some back: tighter page padding, a narrower
   hamburger and less air in the quote button. Measured 314px after. */
@media(max-width:360px){
  .hd-in{padding-inline:10px;gap:6px}
  .hd-cta{gap:6px}
  .nav-toggle{width:36px}
  .hd-btn{padding:12px 6px}
}

/* 代理店募集 is neither a plain notice nor a service change, so it gets the
   machinery sub-brand's amber to stand apart in the list */
.news .cat[data-kind="agency"]{border-color:var(--mach);color:var(--mach-text)}

/* the import block runs three points, not the four the grid was built for */
.why-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.why-3{grid-template-columns:1fr}}

/* trade-only note under the import block — a different audience from the rest
   of the page, so it is set apart rather than folded into the body copy */
.trade-note{
  margin-top:clamp(24px,3.4vw,34px);padding:clamp(20px,3vw,28px);
  border:1px solid var(--line);border-left:3px solid var(--brand);
  background:var(--panel);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.trade-note > p{margin:0;font-size:14.5px;line-height:2;max-width:58ch}
.trade-note b{color:var(--brand-text)}
.trade-cta{flex:none}
.trade-cta .btn{padding:13px 22px}

/* the trade block runs two cards, not the three the teaser grid assumes */
.teasers-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.teasers-2{grid-template-columns:1fr}}

/* honeypot — a field only a bot fills in. Hidden from sight and from screen
   readers, but still submitted, so it must not use display:none (some bots
   skip those). */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* thank-you page — nothing to read, so it stays short and points onward */
.thanks{padding:clamp(20px,4vw,36px) 0}
.thanks-tel{margin:0;font-size:15px;line-height:2}
.thanks-tel a{
  font-family:var(--f-mono);font-size:20px;letter-spacing:.04em;color:var(--ink);
  text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.thanks-tel a:hover{color:var(--brand-text)}