:root{
  --blue:#073a7a;
  --deep:#05275b;
  --text:#082b57;
  --light:#f5f9ff;
  --line:#dfe8f4;
  --shadow:0 14px 34px rgba(8,43,87,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--text);line-height:1.75;background:#fff;font-size:16px}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(1120px,92%);margin:0 auto}
.header{height:72px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;color:var(--blue);text-decoration:none;min-width:260px}
.logo-circle{width:44px;height:44px;border:2px solid var(--blue);border-radius:50%;display:grid;place-items:center;font-weight:800}
.logo strong{font-size:22px;display:block;line-height:1.15}
.logo small{font-size:11px;letter-spacing:.16em;display:block}
.nav{display:flex;align-items:center;gap:34px;font-weight:800}
.nav a{color:var(--text);text-decoration:none}
.nav-contact{background:var(--blue);color:#fff!important;padding:10px 18px;border-radius:999px}
.hero{min-height:520px;background:
  linear-gradient(90deg,rgba(4,27,62,.96) 0%,rgba(4,27,62,.92) 42%,rgba(4,27,62,.42) 72%,rgba(4,27,62,.05) 100%),
  url('assets/hero-truck.jpg') center/cover no-repeat;display:flex;align-items:center;color:#fff}
.hero-inner{display:flex;align-items:center}
.hero-copy{max-width:620px;padding:70px 0}
.pill{display:inline-block;margin:0 0 20px;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 14px;font-size:13px;letter-spacing:.12em;font-weight:900}
h1{font-size:clamp(36px,4.5vw,58px);line-height:1.32;margin:0 0 22px;letter-spacing:.03em}
.lead{font-weight:700;max-width:590px;margin:0}
.buttons{display:flex;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:8px;text-decoration:none;font-weight:900}
.btn.primary{background:#fff;color:var(--blue)}
.btn.ghost{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn.white{background:#fff;color:var(--blue);border-radius:999px}
.section{padding:70px 0}
.light{background:linear-gradient(180deg,#f7fbff,#fff)}
.section-label{display:block;color:#0c4a9a;font-weight:900;font-size:13px;letter-spacing:.14em;margin-bottom:6px}
h2{font-size:clamp(30px,3.3vw,44px);line-height:1.25;margin:0 0 22px;color:var(--blue);letter-spacing:.02em}
.section-desc{font-weight:700;margin:0 0 30px}
.two-col{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:center}
.text-block{border-left:4px solid #0c4a9a;padding-left:30px}
.text-block p{font-weight:700;margin:0 0 18px}
.image-card img{width:100%;aspect-ratio:16/7.2;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.service-card,.case-grid article,.info-box,.trust-box,.flow-grid>div{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(8,43,87,.08);overflow:hidden}
.service-card img{width:100%;aspect-ratio:16/6;object-fit:cover;object-position:center}
.card-body{padding:22px 24px 26px}
.icon{width:58px;height:58px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px;margin-bottom:12px}
h3{margin:0 0 8px;color:var(--blue);font-size:24px}
.card-body p{margin:0;font-weight:700}
.flow-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.flow-grid>div{padding:20px 14px;text-align:center;min-height:176px}
.flow-grid b{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin:0 auto 12px}
.flow-grid h3{font-size:18px;line-height:1.45}
.flow-grid p{font-size:14px;margin:0}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.case-grid img{width:100%;aspect-ratio:16/6.2;object-fit:cover;object-position:center}
.case-grid h3{text-align:center;margin:0;padding:16px;font-size:22px}
.company-layout{display:grid;grid-template-columns:.75fr 1.45fr 1fr;gap:28px;align-items:start}
.company-title p,.trust-box p{font-weight:700;margin:0}
.info-box,.trust-box{padding:28px}
.info-box dl{margin:0}
.info-box dt{float:left;clear:left;width:112px;padding:10px 0;font-weight:900;color:var(--blue)}
.info-box dd{margin-left:130px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:700}
.trust-box ul{list-style:none;margin:18px 0 0;padding:0}
.trust-box li{font-weight:900;margin:10px 0;padding-left:28px;position:relative}
.trust-box li:before{content:"✓";position:absolute;left:0;color:#0c4a9a}
.contact{background:linear-gradient(90deg,#05265b,#0b4d9c);color:#fff;padding:48px 0}
.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.contact h2{color:#fff;margin-bottom:8px}
.contact p{margin:0;font-weight:700}
.footer{background:#061e43;color:#dce7f7;padding:24px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer p{margin:0}

/* PDF/print export: keep desktop layout, prevent narrow-column collapse */
@media print{
  @page{size:A4 landscape;margin:8mm}
  body{font-size:13px;zoom:.72;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .header{position:static}
  .wrap{width:1120px!important;max-width:none!important}
  .service-grid,.case-grid{grid-template-columns:repeat(3,1fr)!important}
  .flow-grid{grid-template-columns:repeat(6,1fr)!important}
  .company-layout{grid-template-columns:.75fr 1.45fr 1fr!important}
  .two-col{grid-template-columns:1fr 1.25fr!important}
}

@media(max-width:900px){
  .nav{display:none}
  .logo{min-width:auto}
  .hero{background-position:65% center}
  .hero-copy{padding:60px 0}
  .two-col,.service-grid,.case-grid,.company-layout{grid-template-columns:1fr}
  .flow-grid{grid-template-columns:repeat(2,1fr)}
  .section{padding:56px 0}
}
@media(max-width:560px){
  .header,.header-inner{height:64px}
  .logo strong{font-size:18px}
  h1{font-size:32px}
  .buttons,.contact-inner,.footer-inner{flex-direction:column;align-items:flex-start}
  .flow-grid{grid-template-columns:1fr}
  .info-box dt{float:none;width:auto;padding-bottom:2px}
  .info-box dd{margin-left:0}
}


/* === v2: uploaded real truck photos + better framing === */
.hero{
  min-height:560px !important;
  background:
    linear-gradient(90deg,rgba(4,27,62,.96) 0%,rgba(4,27,62,.92) 42%,rgba(4,27,62,.48) 72%,rgba(4,27,62,.08) 100%),
    url('assets/hero-truck.jpg') center 48%/cover no-repeat !important;
}
.service-card img{
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center 55% !important;
}
.service-card:nth-child(1) img{
  object-position:center 54% !important;
}
.service-card:nth-child(2) img{
  object-position:center 58% !important;
}
.service-card:nth-child(3) img{
  object-position:center center !important;
}
.case-grid img{
  width:100% !important;
  aspect-ratio:16/8 !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center 52% !important;
}
.card-body{
  padding:24px 24px 28px !important;
}
.service-card{
  display:flex !important;
  flex-direction:column !important;
}
@media(max-width:900px){
  .hero{
    background-position:62% center !important;
  }
  .service-card img{
    aspect-ratio:16/10 !important;
  }
}


/* === HERO RESTORED: keep original top image/design, only service photos changed === */
.hero{
  min-height:520px !important;
  background:
    linear-gradient(90deg,rgba(4,27,62,.96) 0%,rgba(4,27,62,.92) 42%,rgba(4,27,62,.42) 72%,rgba(4,27,62,.05) 100%),
    url('assets/hero-truck.jpg') center/cover no-repeat !important;
}
.hero-copy{
  max-width:620px !important;
  padding:70px 0 !important;
}


/* === SERVICE ONLY FIX: first and second vehicle images, no other sections changed === */
#service .service-card img{
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #f6faff !important;
}
#service .service-card:nth-child(1) img,
#service .service-card:nth-child(2) img{
  object-fit: cover !important;
  object-position: center center !important;
}
#service .service-card{
  overflow: hidden !important;
}
@media(max-width:900px){
  #service .service-card img{
    height: 260px !important;
  }
}


/* === CASES ONLY: 過去の取扱例 3 images updated === */
.cases .case-grid img{
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* === HERO TEST: use selected Scania image only === */
.hero{
  min-height: 520px !important;
  background:
    linear-gradient(90deg, rgba(3,24,58,.98) 0%, rgba(3,24,58,.93) 34%, rgba(3,38,78,.55) 58%, rgba(3,38,78,.08) 100%),
    url('assets/hero-truck.jpg') center center / cover no-repeat !important;
}
.hero-copy{
  max-width: 620px !important;
  padding: 70px 0 !important;
}


/* === HERO CODE FIX ONLY: keep same image, show more road/ground === */
.hero{
  min-height: 620px !important;
  background:
    linear-gradient(90deg, rgba(3,24,58,.98) 0%, rgba(3,24,58,.93) 34%, rgba(3,38,78,.55) 58%, rgba(3,38,78,.08) 100%),
    url('assets/hero-truck.jpg') center bottom / cover no-repeat !important;
}
.hero-copy{
  max-width: 620px !important;
  padding: 84px 0 !important;
}

@media(max-width:900px){
  .hero{
    min-height: 640px !important;
    background-position: center bottom !important;
  }
}


/* === Phone/FAX addition === */
.info-box a{
  color: inherit;
  text-decoration: none;
}
.contact a{
  color: inherit;
}


/* === SERVICE PLATE CLEAN: use cleaned images, keep service layout === */
#service .service-card img{
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  object-position: center center !important;
}
#service .service-card:nth-child(1) img{
  object-position: center 52% !important;
}
#service .service-card:nth-child(2) img{
  object-position: center 54% !important;
}