/* =========================================================================
   車楽クラウド — Top page sections + variation systems
   variants: html[data-fv] / html[data-feat] / html[data-case]
   ========================================================================= */

/* ===== Dashboard mock (reusable) ===== */
.dash{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;width:100%}
.dash__bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line-soft);background:#fff}
.dash__dot{width:9px;height:9px;border-radius:50%;background:#E2E7F0}
.dash__dot:first-child{background:#F39C12}
.dash__title{font-size:12px;font-weight:700;color:var(--navy-deep);margin-left:6px;letter-spacing:.04em}
.dash__period{margin-left:auto;font-family:var(--en);font-size:10px;color:var(--text-soft);letter-spacing:.08em}
.dash__body{padding:18px}
.dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.kpi{background:var(--bg-blue);border-radius:10px;padding:13px 14px}
.kpi__label{font-size:10px;color:var(--text-soft);letter-spacing:.04em;margin-bottom:5px}
.kpi__val{font-family:var(--en);font-weight:500;font-size:21px;color:var(--navy-deep);line-height:1;letter-spacing:.01em}
.kpi__val small{font-size:12px;color:var(--text-soft);margin-left:2px}
.kpi__delta{font-size:10px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:3px}
.kpi__delta.up{color:#2E9E6B}.kpi__delta.down{color:#C0563E}
.dash__chart{display:flex;align-items:flex-end;gap:8px;height:104px;padding:14px 4px 0;border-top:1px solid var(--line-soft)}
.bar{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--blue-light),var(--blue));position:relative;min-height:8px;transition:height .8s var(--ease)}
.bar:last-child{background:linear-gradient(180deg,#F7B65A,var(--accent))}
.bar span{position:absolute;top:-15px;left:0;right:0;text-align:center;font-family:var(--en);font-size:9px;color:var(--text-soft)}
.dash__legend{display:flex;gap:16px;margin-top:14px;font-size:10px;color:var(--text-soft)}
.dash__legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}

/* floating pill on visuals */
.float-pill{position:absolute;display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 18px 9px 12px;box-shadow:var(--shadow-md);font-size:12px;font-weight:700;color:var(--navy-deep);white-space:nowrap;line-height:1.35}
.float-pill .tick{width:20px;height:20px;border-radius:50%;background:#2E9E6B;display:grid;place-items:center;flex-shrink:0}
.float-pill small{display:block;font-size:9px;color:var(--text-soft);font-weight:500;letter-spacing:.06em}

/* sunset scene placeholder */
.scene{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/11;
  background:linear-gradient(180deg,#3A4D7A 0%,#5B6CA0 28%,#C98B6B 62%,#F0A86E 80%,#F6C083 100%);
  box-shadow:var(--shadow-lg)}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(40,40,60,0) 0%,#2B2A38 100%)}
.scene__sun{position:absolute;left:18%;top:42%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#FFE3B0 0%,#FFC777 45%,rgba(255,199,119,0) 72%);filter:blur(2px)}
.scene__road{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,#2E2D3C,#1C1B26)}
.scene__truck{position:absolute;right:12%;bottom:21%;width:30%;height:15%;background:#1A1A24;border-radius:4px 8px 3px 3px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.scene__truck::before{content:"";position:absolute;right:-2px;top:-46%;width:42%;height:64%;background:#222230;border-radius:5px 6px 0 0}
.scene__tag{position:absolute;left:16px;bottom:14px;font-family:var(--en);font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.65);text-transform:uppercase;z-index:2}

/* ===== HERO ===== */
.hero{position:relative;padding-block:60px 96px;overflow:hidden;background:transparent}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;max-width:var(--wide);margin:0 auto;padding-inline:var(--gutter)}
.hero__text{max-width:580px}
.hero h1{margin:24px 0 26px}
.hero h1 .q{color:var(--blue)}
/* v1.2.12: 見出しの文節単位折り返し(.ph内では折り返さない) */
.hero h1 .ph{display:inline-block}
.hero h1 .yr{font-family:var(--en);font-weight:500;font-style:normal}
.hero__lead{max-width:480px;margin-bottom:34px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px}

/* hero badges */
.hero__badges{display:flex;align-items:center;gap:0}
.hbadge{padding-right:28px;margin-right:28px;border-right:1px solid var(--line)}
.hbadge:last-child{border-right:none;margin-right:0;padding-right:0}
.hbadge__n{font-family:var(--en);font-weight:500;font-size:27px;color:var(--navy-deep);line-height:1;letter-spacing:.01em}
.hbadge__n .u{font-size:15px;color:var(--blue)}
.hbadge__l{font-size:11.5px;color:var(--text-soft);margin-top:7px;letter-spacing:.02em}

/* hero visual — composed: truck (visible, supporting) + laptop (smaller, left) */
.hero__visual{position:relative;padding:6% 0 4%;min-height:340px;display:flex;align-items:center}
.fv-stage__truck{
  position:absolute;top:0;right:-12%;width:94%;aspect-ratio:4/3;
  background:linear-gradient(180deg,rgba(247,249,252,.06),rgba(247,249,252,.24)),url("../assets/fv-truck.webp") 60% 42%/cover no-repeat;
  border-radius:22px;opacity:.55;filter:saturate(.96);
  -webkit-mask-image:radial-gradient(135% 112% at 70% 36%,#000 44%,transparent 84%);
          mask-image:radial-gradient(135% 112% at 70% 36%,#000 44%,transparent 84%);
  z-index:0;pointer-events:none;
}
.fv-stage__laptop{
  position:relative;z-index:2;display:block;width:74%;margin-right:auto;height:auto;
  filter:drop-shadow(0 26px 46px rgba(30,51,96,.30));
}

/* ---- FV variant B : centered, visual below ---- */
html[data-fv="b"] .hero__grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:52px}
html[data-fv="b"] .hero__text{max-width:740px}
html[data-fv="b"] .eyebrow{justify-content:center}
html[data-fv="b"] .eyebrow::after{content:"";width:24px;height:1px;background:var(--blue);display:inline-block}
html[data-fv="b"] .hero__lead{margin-inline:auto}
html[data-fv="b"] .hero__cta,html[data-fv="b"] .hero__badges{justify-content:center}
html[data-fv="b"] .hero__visual{width:100%;max-width:860px}
html[data-fv="b"] .hero__visual .scene{aspect-ratio:21/9}
html[data-fv="b"] .hero__visual .dash{right:-10px;bottom:-34px;width:46%}
html[data-fv="b"] .hero__visual .float-pill{left:auto;right:-10px;top:-18px}

/* ---- FV variant C : full-bleed photo right ---- */
html[data-fv="c"] .hero{padding-block:0 96px}
html[data-fv="c"] .hero__grid{gap:0;align-items:stretch;padding-right:0}
html[data-fv="c"] .hero__text{padding-block:90px;padding-right:56px}
html[data-fv="c"] .hero__visual{margin-right:calc((100vw - var(--wide))/-2 - var(--gutter));align-self:stretch}
html[data-fv="c"] .hero__visual .scene{height:100%;aspect-ratio:auto;border-radius:0}
html[data-fv="c"] .hero__visual .dash{right:24px;bottom:32px;width:58%;max-width:330px}
@media(max-width:1340px){html[data-fv="c"] .hero__visual{margin-right:0}}

/* ===== BADGES band ===== */
.badges{background:linear-gradient(180deg,#fff,var(--bg-blue))}
.badges__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1080px;margin:0 auto}
.bigbadge{text-align:center;padding:20px 24px;position:relative}
.bigbadge:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;height:64%;width:1px;background:var(--line)}
.bigbadge__n{font-family:var(--en);font-weight:500;font-size:clamp(46px,6vw,72px);line-height:1;color:var(--blue);letter-spacing:.01em}
.bigbadge__n .u{font-size:.42em;color:var(--navy-deep)}
.bigbadge__l{font-weight:700;color:var(--navy-deep);font-size:15px;margin-top:14px}
.bigbadge__s{font-size:12.5px;color:var(--text-soft);margin-top:4px}

/* ===== INTRO ===== */
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.intro__media{position:relative}
.intro__media-placeholder{width:100%;height:420px;display:grid;place-items:center;background:var(--bg-blue);border:1px dashed var(--line);border-radius:14px;font-size:12px;color:var(--text-soft);letter-spacing:.05em;text-align:center;line-height:2}
.intro__media .float-pill{right:-18px;bottom:-20px}
.intro__body p+p{margin-top:20px}
.intro__points{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.ipoint{display:flex;gap:14px;align-items:flex-start}
.ipoint__ic{width:26px;height:26px;border-radius:7px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;flex-shrink:0;margin-top:3px}
.ipoint b{color:var(--navy-deep)}

/* ===== FEATURES ===== */
.features__head{margin-bottom:64px}
.feat-list{display:flex;flex-direction:column;gap:90px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.feature:nth-child(even) .feature__media{order:2}
.feature__num{font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--blue);margin-bottom:14px;display:block}
.feature h3{margin-bottom:16px}
.feature__desc{margin-bottom:24px}
.feature__tags{display:flex;flex-wrap:wrap;gap:8px}
.feature__media{position:relative}
.feat-visual{border-radius:var(--radius-lg);overflow:hidden}
.feat-img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}

/* ---- features variant B : 2x2 cards ---- */
html[data-feat="b"] .feat-list{display:grid;grid-template-columns:1fr 1fr;gap:28px}
html[data-feat="b"] .feature{display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;align-items:stretch;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
html[data-feat="b"] .feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
html[data-feat="b"] .feature__media{order:0 !important;aspect-ratio:16/9}
html[data-feat="b"] .feature:nth-child(even) .feature__media{order:0}
html[data-feat="b"] .feat-visual{border:none;border-radius:0;box-shadow:none;aspect-ratio:16/9;height:100%}
html[data-feat="b"] .feature__body{padding:30px 32px 34px}

/* ---- features variant C : compact list rows ---- */
html[data-feat="c"] .feat-list{gap:0;border-top:1px solid var(--line)}
html[data-feat="c"] .feature{grid-template-columns:64px 1fr auto;gap:32px;align-items:center;padding:34px 8px;border-bottom:1px solid var(--line)}
html[data-feat="c"] .feature:nth-child(even) .feature__media{order:0}
html[data-feat="c"] .feature__media{order:-1}
html[data-feat="c"] .feat-visual{aspect-ratio:1;width:64px;height:64px;border-radius:12px;background:var(--bg-blue);display:grid;place-items:center;box-shadow:none;border:none;color:var(--blue)}
html[data-feat="c"] html[data-feat="c"] .feature__desc{margin-bottom:0;max-width:560px}
html[data-feat="c"] .feature__tags{display:none}
html[data-feat="c"] .feature h3{margin-bottom:6px}
html[data-feat="c"] .feature__num{margin-bottom:8px}

/* ===== OPTIONS ===== */
.options{position:relative}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.opt-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px 30px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);display:flex;flex-direction:column;position:relative;overflow:hidden}
.opt-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--blue-light));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.opt-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.opt-card:hover::before{transform:scaleX(1)}
.opt-card__ic{width:52px;height:52px;border-radius:13px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;margin-bottom:22px}
.opt-card__new{position:absolute;top:22px;right:22px}
.opt-card h3{font-size:19px;color:var(--navy-deep);font-weight:700;margin-bottom:12px;line-height:1.5}
.opt-card p{font-size:14px;color:var(--text-soft);line-height:1.85;flex:1;letter-spacing:.01em}
.opt-card__link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:700;font-size:14px;color:var(--blue)}
.opt-card__link .arw{transition:transform .3s var(--ease)}
.opt-card:hover .opt-card__link .arw{transform:translateX(4px)}

/* ===== CASES ===== */
.cases__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;gap:24px;flex-wrap:wrap}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.case-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:flex;flex-direction:column}
.case-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
/* v1.2.7: ホバー時に写真がじわっとズームして浮遊感を強調（フォールバックタイルはズームしない） */
.case-card__media img{transition:transform .5s var(--ease)}
.case-card:hover .case-card__media img{transform:scale(1.04)}
.case-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-blue)}
.case-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.case-card__media--empty{display:grid;place-items:center}
.case-card__media--empty>.en{font-size:11px;letter-spacing:.12em;color:var(--text-soft)}
.case-card__area{position:absolute;left:14px;top:14px;font-family:var(--en);font-size:11px;font-weight:500;letter-spacing:.08em;color:#fff;background:rgba(30,51,96,.88);padding:5px 12px;border-radius:30px}
.case-card__body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.case-card__chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.case-card h3{font-size:17px;font-weight:700;color:var(--navy-deep);line-height:1.6;margin-bottom:10px}
.case-card__meta{font-size:12.5px;color:var(--text-soft);margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:8px}
.case-card__co{font-weight:700;color:var(--navy)}

/* ---- cases variant B : horizontal long cards ---- */
html[data-case="b"] .case-grid{grid-template-columns:1fr;gap:20px}
html[data-case="b"] .case-card{flex-direction:row;align-items:stretch}
html[data-case="b"] .case-card__media{aspect-ratio:auto;width:38%;flex-shrink:0}
html[data-case="b"] .case-card__body{padding:30px 36px;justify-content:center}
html[data-case="b"] .case-card h3{font-size:21px}
html[data-case="b"] .case-card__meta{margin-top:18px}

/* ---- cases variant C : text-led minimal ---- */
html[data-case="c"] .case-card{border:none;border-top:2px solid var(--navy-deep);border-radius:0;box-shadow:none;background:transparent;padding-top:26px}
html[data-case="c"] .case-card:hover{transform:none;box-shadow:none}
html[data-case="c"] .case-card__media{display:none}
html[data-case="c"] .case-card__body{padding:0}
html[data-case="c"] .case-card h3{font-size:20px;margin-bottom:16px}
html[data-case="c"] .case-card__chips{order:3;margin-top:18px;margin-bottom:0}
html[data-case="c"] .case-card__num{font-family:var(--en);font-size:13px;color:var(--blue);letter-spacing:.14em;font-weight:500;margin-bottom:14px;display:block}

/* ===== SUPPORT ===== */
.support{background:linear-gradient(180deg,#FBFCFE 0%,#F4F7FC 100%);color:var(--text-soft);position:relative;overflow:hidden}
.support::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 420px at 88% -6%,rgba(108,148,205,.16),transparent 62%),radial-gradient(620px 360px at 6% 108%,rgba(108,148,205,.10),transparent 60%);pointer-events:none}
.support .wrap{position:relative}
.support__head{display:grid;grid-template-columns:1fr .92fr;gap:40px;align-items:center;margin-bottom:60px;max-width:none}
.support__illust{width:100%;height:auto;display:block}
@media(max-width:880px){
  .support__head{grid-template-columns:1fr;gap:8px}
  .support__illust{max-width:520px;margin:0 auto}
}
.support__head .eyebrow{color:var(--accent);font-size:17px;font-weight:700;letter-spacing:.22em;margin-bottom:6px}
.support__head .eyebrow::before{background:var(--accent);width:32px}
.support__head h2{font-size:clamp(36px,5.4vw,68px);line-height:1.28;font-weight:900;color:var(--navy-deep);letter-spacing:.01em;margin-top:6px}
.support__head h2 em{font-style:normal;color:var(--navy-deep);position:relative;white-space:nowrap}
.support__head h2 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;border-radius:4px;background:linear-gradient(90deg,var(--accent),#FF6FA0)}
.support p.lead{color:var(--text-soft)}
.sup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sup-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.sup-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.sup-card__ic{width:48px;height:48px;border-radius:12px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;margin-bottom:20px}
.sup-card h3{font-size:17px;color:var(--navy-deep);font-weight:700;margin-bottom:12px}
.sup-card p{font-size:13.5px;color:var(--text-soft);line-height:1.85;letter-spacing:.01em}

/* ===== NEWS ===== */
.news__grid{display:grid;grid-template-columns:.5fr 1fr;gap:64px;align-items:start}
.news-list{display:flex;flex-direction:column}
.news-row{display:flex;align-items:center;gap:24px;padding:22px 4px;border-bottom:1px solid var(--line);transition:background .25s var(--ease);position:relative}
.news-row:first-child{border-top:1px solid var(--line)}
.news-row:hover{background:var(--bg-blue)}
.news-row__date{font-family:var(--en);font-size:13px;color:var(--text-soft);letter-spacing:.06em;flex-shrink:0;width:96px}
.news-row__cat{font-size:11px;font-weight:700;color:var(--blue);background:var(--bg-blue);border-radius:4px;padding:4px 10px;flex-shrink:0;letter-spacing:.04em}
.news-row:hover .news-row__cat{background:#fff}
.news-row__t{font-size:14.5px;font-weight:500;color:var(--navy-deep);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-row__arw{color:var(--text-soft);transition:transform .3s var(--ease),color .3s}
.news-row:hover .news-row__arw{transform:translateX(4px);color:var(--blue)}

/* ===== SOKO (倉庫管理クラウド coming-soon announce) ===== */

/* ===== FINAL CTA ===== */
.final-cta{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--blue) 0%,var(--navy-deep) 100%)}
.final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 12% 110%,rgba(228,81,60,.16),transparent 55%)}
.final-cta__inner{position:relative;text-align:center;max-width:760px;margin:0 auto;color:#fff}
.final-cta .eyebrow{color:#A9C0E6;justify-content:center}
.final-cta .eyebrow::before,.final-cta .eyebrow::after{background:#A9C0E6}
.final-cta h2{color:#fff;margin:22px 0 22px}
.final-cta p{color:#CDD8EC;font-size:16px;line-height:2;margin-bottom:40px;max-width:560px;margin-inline:auto}
.final-cta__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.final-cta .btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.final-cta .btn--ghost:hover{background:rgba(255,255,255,.16)}
.final-cta__note{margin-top:26px;font-size:12.5px;color:#9DB0D2;letter-spacing:.02em}

/* ===== Responsive ===== */
@media(max-width:1080px){
  .hero__grid{gap:44px}
  .sup-grid{grid-template-columns:1fr 1fr}
  .news__grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:48px}
  html[data-fv="c"] .hero__visual{margin-right:0}
  html[data-fv="c"] .hero__text{padding-block:60px 0;padding-right:0}
  .intro__grid{grid-template-columns:1fr;gap:40px}
  .feature,html[data-feat="b"] .feat-list{grid-template-columns:1fr !important;gap:32px}
  .feature:nth-child(even) .feature__media{order:0}
  html[data-feat="c"] .feature{grid-template-columns:56px 1fr;gap:20px}
  .opt-grid,.case-grid,html[data-case="b"] .case-card{grid-template-columns:1fr}
  html[data-case="b"] .case-card{flex-direction:column}
  html[data-case="b"] .case-card__media{width:100%;aspect-ratio:16/10}
  .badges__grid{grid-template-columns:1fr;gap:8px}
  .bigbadge:not(:last-child)::after{display:none}
  .bigbadge{border-bottom:1px solid var(--line);padding-block:24px}
}
@media(max-width:560px){
  .sup-grid{grid-template-columns:1fr}
  .hero__cta .btn,.final-cta__btns .btn{width:100%;justify-content:center}
}

/* =========================================================
   メリハリ調整（2026.06.04）
   ========================================================= */

/* --- ① 車楽クラウド全体像イメージ（introの締め） --- */
/* --- ① 車楽クラウド全体像イメージ（introの締め・上下余白・中央配置） --- */
.intro__overview{
  margin:72px auto 40px;max-width:780px;text-align:center;
  display:flex;justify-content:center;
}
.intro__overview img{
  width:100%;height:auto;display:block;border-radius:var(--radius-lg);margin:0 auto;
}

/* --- ② 「運送業専用システム」見出しを少しはっきりした色に --- */
/* introセクションのh2だけ、コーポレートブルーで主役を際立たせる */
/* introの見出しをSupportセクションと同じスタイルに統一 */
.support__head-style .eyebrow{color:var(--accent);font-size:17px;font-weight:700;letter-spacing:.22em;margin-bottom:6px}
.support__head-style .eyebrow::before{background:var(--accent);width:32px}
.support__head-style h2{font-size:clamp(28px,3vw,40px);line-height:1.45;font-weight:700;color:var(--navy-deep);letter-spacing:.02em}
.support__head-style h2 em{font-style:normal;color:var(--navy-deep);position:relative;white-space:nowrap;display:inline-block}
/* ベースの下線（常時表示） */
.support__head-style h2 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;border-radius:4px;background:linear-gradient(90deg,var(--accent),#FF6FA0)}
/* キラーン：下線の上を光のハイライトが繰り返し走る（下線の範囲内でクリップ） */
.support__head-style h2 em::before{
  content:"";position:absolute;left:0;bottom:.04em;height:.14em;width:45%;border-radius:4px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%);
  animation:syaraku-shine 3.2s ease-in-out infinite;
}
@keyframes syaraku-shine{
  0%   {transform:translateX(-110%);opacity:0}
  12%  {opacity:1}
  50%  {transform:translateX(230%);opacity:1}
  56%  {opacity:0}
  100% {transform:translateX(230%);opacity:0}
}

/* --- ③ features「運送業務を、まるごと標準で。」セクションのメリハリ --- */
/* 背景を少し濃く＋淡いブルーの動くグラデを薄く1枚（控えめに） */
.section--tint{
  background:rgba(108,148,205,.10);   /* 全体は元の薄さに戻す（他セクションに影響させない） */
  position:relative;overflow:hidden;
}
/* features だけ濃紺のダークな帯に（メリハリ最大） */
.section--tint[data-block="features"]{
  background:linear-gradient(160deg, #1E3360 0%, #25406f 60%, #1A2C54 100%);
}
/* 中の文字を白系に */
.section--tint[data-block="features"] .h-lg{color:#fff}
.section--tint[data-block="features"] .eyebrow,
.section--tint[data-block="features"] .eyebrow--center{color:#9FB4D6}
.section--tint[data-block="features"] .eyebrow::before,
.section--tint[data-block="features"] .eyebrow--center::after{background:#9FB4D6}
.section--tint[data-block="features"] .lead.muted{color:#C5D2E8}
.section--tint[data-block="features"] .feature__num{color:#8AA6D6}
.section--tint[data-block="features"] .h-md{color:#fff}
.section--tint[data-block="features"] .feature__desc{color:#C5D2E8}
/* タグ（chip）を濃紺の上で映えるよう半透明白に */
.section--tint[data-block="features"] .feature__tags .chip{
  background:rgba(255,255,255,.10);color:#D7E1F2;border-color:rgba(255,255,255,.16)
}
/* 動くグラデ（濃紺の上で映える明るめの青・動きはっきり）
   v1.2.8: filter:blur(44px)を除去し、グラデの減衰を緩めて同等の見た目に（軽量化） */
.section--tint[data-block="features"]::before{
  content:"";position:absolute;inset:-40% -20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(54% 54% at 18% 22%, rgba(108,140,205,.45), rgba(108,140,205,.16) 48%, transparent 78%),
    radial-gradient(52% 52% at 88% 80%, rgba(74,111,165,.41), rgba(74,111,165,.15) 50%, transparent 80%),
    radial-gradient(48% 48% at 62% 45%, rgba(150,176,224,.30), transparent 80%);
  animation:syaraku-drift 10s ease-in-out infinite alternate;
}
.section--tint[data-block="features"] > .wrap{position:relative;z-index:1}
@keyframes syaraku-drift{
  0%   {transform:translate(0,0) scale(1)}
  25%  {transform:translate(10%,5%) scale(1.12)}
  50%  {transform:translate(-6%,8%) scale(1.08)}
  75%  {transform:translate(8%,-6%) scale(1.14)}
  100% {transform:translate(-9%,-7%) scale(1.18)}
}
/* 「動きを減らす」設定でも、ごくゆっくりは動かす（完全停止はしない） */
@media (prefers-reduced-motion: reduce){
  .section--tint[data-block="features"]::before{animation-duration:30s}
}

/* 導入事例「すべて見る」ボタンを右下に配置 */
.case-more{display:flex;justify-content:flex-end;margin-top:36px}

/* =========================================================================
   v1.1.0 追加：業務フロー（縦型・中央1カラム） .sflow
   ========================================================================= */

.sflow__col{position:relative;max-width:560px;margin:54px auto 0}
.sflow__col::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,var(--blue),var(--navy-deep));opacity:.22;border-radius:2px}
.sflow__step{position:relative;display:flex;justify-content:center;margin-bottom:12px}
.sflow__node{position:relative;width:100%;max-width:520px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px 22px 18px 70px;display:flex;flex-direction:column;gap:3px;box-shadow:0 1px 0 rgba(30,51,96,.03);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sflow__node:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sflow__ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--navy-deep)}
.sflow__ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.7}
.sflow__t{font-weight:700;font-size:16px;color:var(--navy-deep);letter-spacing:.01em}
.sflow__d{font-size:12.5px;color:var(--text-soft);line-height:1.65}
.sflow__num{position:absolute;right:16px;top:14px;font-weight:400;font-size:13px;color:#c2cbdb;letter-spacing:.04em}
.sflow__node--anchor{background:var(--navy-deep);border-color:var(--navy-deep)}
.sflow__node--anchor .sflow__t{color:#fff}
.sflow__node--anchor .sflow__d{color:#9fb4d6}
.sflow__node--anchor .sflow__ic{background:rgba(255,255,255,.14)}
.sflow__node--anchor .sflow__num{color:rgba(255,255,255,.4)}
.sflow__node--opt{border:1.5px dashed var(--blue);box-shadow:none}
.sflow__node--opt .sflow__ic{background:var(--bg-blue)}
.sflow__node--opt .sflow__ic svg{stroke:var(--blue)}
.sflow__opt{display:inline-flex;align-self:flex-start;margin-top:6px;font-weight:500;font-size:10.5px;letter-spacing:.14em;color:var(--blue);background:var(--bg-blue);border-radius:5px;padding:3px 9px}
.sflow__arw{display:flex;justify-content:center;margin:-4px 0 8px;position:relative;z-index:2}
.sflow__arw svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2.2;opacity:.9}
.sflow__node--cluster{max-width:560px;padding:20px 22px;align-items:stretch}
.sflow__chead{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.sflow__ic--static{position:static;transform:none;flex-shrink:0}
.sflow__chips{display:flex;flex-wrap:wrap;gap:7px}
.sflow__chip{font-size:12.5px;font-weight:500;color:var(--navy);background:var(--bg-blue);border:1px solid var(--line);border-radius:7px;padding:6px 11px;line-height:1}
.sflow__import{max-width:520px;margin:14px auto 0;text-align:center;font-size:12px;color:var(--text-soft);line-height:1.7}
.sflow__pin{display:inline-block;font-weight:500;font-size:10.5px;letter-spacing:.1em;color:var(--blue);border:1px solid var(--blue);border-radius:5px;padding:2px 7px;margin-bottom:6px}
@media(max-width:560px){
  .sflow__node{padding:16px 16px 16px 62px;border-radius:12px}
  .sflow__ic{width:36px;height:36px;left:14px}
  .sflow__ic svg{width:18px;height:18px}
  .sflow__t{font-size:15px}
  .sflow__num{display:none}
  .sflow__node--cluster{padding:18px 16px}
}

/* =========================================================================
   v1.1.0 追加：FAQ .sfaq
   ========================================================================= */
.sfaq__list{max-width:760px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px}
.sfaq__item{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sfaq__item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:18px 22px;font-weight:700;font-size:15.5px;color:var(--navy-deep);transition:background .25s var(--ease)}
.sfaq__item summary::-webkit-details-marker{display:none}
.sfaq__item summary::before{content:"Q";flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--navy-deep);color:#fff;display:grid;place-items:center;font-family:var(--en);font-weight:500;font-size:14px}
.sfaq__item summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);margin-left:auto;transition:transform .25s var(--ease)}
.sfaq__item[open] summary::after{transform:rotate(-135deg)}
.sfaq__item summary:hover{background:var(--bg-blue)}
.sfaq__item p{padding:0 22px 20px 64px;font-size:14px;line-height:1.9;color:var(--text)}
@media(max-width:560px){
  .sfaq__item summary{padding:15px 16px;font-size:14.5px}
  .sfaq__item p{padding:0 16px 16px 16px}
}

/* =========================================================================
   v1.2.0 追加：トップ 3プラン告知 .plans
   ========================================================================= */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:stretch}
.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px 30px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.plan-card__en{font-weight:500;font-size:13px;letter-spacing:.12em;color:var(--blue);text-transform:uppercase}
.plan-card__name{font-size:22px;font-weight:900;color:var(--navy-deep);line-height:1.3;margin-bottom:4px}
.plan-card__for{font-size:13px;font-weight:700;color:var(--accent-deep);line-height:1.6}
.plan-card__desc{font-size:13.5px;color:var(--text-soft);line-height:1.85;margin-top:4px}
.plan-card--top{border-color:var(--accent);box-shadow:0 18px 40px -22px rgba(221,76,117,.5)}
.plan-card--top .plan-card__en{color:var(--accent-deep)}
.plan-card__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-weight:500;font-size:11px;letter-spacing:.1em;padding:5px 16px;border-radius:999px;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(221,76,117,.7)}
@media(max-width:820px){
  .plan-grid{grid-template-columns:1fr;gap:16px;max-width:460px;margin-inline:auto}
  .plan-card--top{order:-1}
}

/* =========================================================================
 * v1.2.39 TOP再編：3つの入口（.entry）
 * ========================================================================= */
.entry{background:#fff}
/* リード文：PCは句点で改行して「す。」だけ落ちるのを防ぐ／スマホは自然に折り返す */
.entry__lead{max-width:640px}
@media(max-width:640px){.entry__lead .pc-br{display:none}}
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
/* v1.2.41: 1列に切り替える幅を1000→1100pxに（3列のままだと画像上の文字が窮屈になるため） */
@media(max-width:1100px){.entry-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.entry-note{margin:36px auto 0;max-width:820px;display:flex;align-items:center;gap:14px;background:var(--bg-blue);border-radius:var(--radius-lg);padding:18px 24px;font-size:14.5px;font-weight:500;color:var(--navy-deep);line-height:1.7}
/* v1.2.40: 塗りつぶし丸（ボタン風）→ 白い角丸の飾り枠＋青線アイコン（オプションカードのアイコンと同じ見せ方） */
.entry-note__ic{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 1px 0 var(--line)}

/* オプション欄：紐づき先（対象製品）の明示 */
.opt-scope{display:inline-flex;align-items:center;gap:10px;margin:4px auto 14px;font-size:14px;font-weight:700;color:var(--navy-deep);background:#fff;border:1px solid var(--line);border-radius:30px;padding:6px 16px 6px 6px}
.opt-scope__label{font-size:11.5px;color:#fff;background:var(--navy);border-radius:30px;padding:3px 10px;letter-spacing:.06em}
.opt-card__for{display:block;font-size:12px;font-weight:700;color:var(--blue);margin-bottom:6px;letter-spacing:.03em}

/* v1.2.39: 見出しの泣き別れ防止（文節単位で折り返す。.hero h1 .ph と同じ考え方） */
.nobr{display:inline-block}

/* =========================================================================
 * v1.2.41 TOP「3つの入口」カード刷新（モック v8）
 *  ・製品色は --c に入れて使う（運送／倉庫／陸送は css/site.css のトークン）
 *  ・クラス名は entry-card__ で統一（サイトの .hero 等と衝突させない）
 * ========================================================================= */
.entry-card--unso{--c:var(--c-unso)}
.entry-card--wh{--c:var(--c-wh)}
.entry-card--riku{--c:var(--c-riku)}
.entry-card{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 6px rgba(30,51,96,.05),0 12px 32px rgba(30,51,96,.07);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.entry-card:hover{transform:translateY(-5px);box-shadow:0 6px 16px rgba(30,51,96,.08),0 20px 44px rgba(30,51,96,.10)}

/* 上部：画像の左に文字を重ねる
   ・はみ出しを切らない（overflow:visible）＝文字が長くなっても枠が伸びて切れない
   ・画像は絶対配置＋object-fit で枠内に収める（角丸はカード側の overflow:hidden で処理）
   ・img に width/height 属性を付けない（aspect-ratio が効かなくなる。v1.2.17 の教訓） */
.entry-card__hero{position:relative;aspect-ratio:10/7;min-height:min-content;background:#fff}
.entry-card__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
/* 文字を読みやすく：左から白のベール／下端を白になじませて本文とつなぐ */
.entry-card__hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 42%,rgba(255,255,255,0) 64%)}
.entry-card__hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.entry-card__new{position:absolute;top:16px;right:16px;z-index:3;font-size:10.5px;padding:3px 10px}
.entry-card__ov{position:relative;z-index:2;width:50%;padding:18px 0 0 24px}
.entry-card__name{font-size:24px;font-weight:900;color:var(--navy-deep);line-height:1.3;letter-spacing:.02em;margin-bottom:8px}
.entry-card__name span{color:var(--c)}
.entry-card__catch{font-size:13px;font-weight:700;color:var(--navy-deep);line-height:1.6;letter-spacing:0;margin-bottom:6px}

/* 下部：主な機能 */
.entry-card__body{display:flex;flex-direction:column;flex:1;padding:6px 24px 26px}
.entry-card__lbl{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--navy-deep);margin-bottom:6px}
.entry-card__lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.entry-card__fn{list-style:none;margin:0 0 22px;padding:0}
.entry-card__fn li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.entry-card__fn li:last-child{border-bottom:0}
.entry-card__ft{display:flex;flex-direction:column;line-height:1.45;letter-spacing:0}
.entry-card__ft b{font-size:14px;color:var(--navy-deep)}


/* ---- v1.2.43：サイト既存のパーツに置き換え（AIテンプレっぽさを抑える） ---- */
/* 英字アイブロウ：サイト共通の .eyebrow（英字＋左の細い線）を製品色で */
.entry-card__eyebrow{color:var(--c);font-size:12px;letter-spacing:.2em;gap:10px;margin-bottom:12px}
.entry-card__eyebrow::before{background:var(--c);width:20px}
/* 主な機能の番号：「01 — Dispatch」と同じ英字フォント */
.entry-card__no{flex-shrink:0;width:34px;font-family:var(--en);font-size:22px;font-weight:500;line-height:1;letter-spacing:.02em;color:var(--c)}
/* ボタン：サイト既存の .btn--ghost（白地・角丸の四角・→）。横幅いっぱい、ホバーで製品色 */
.entry-card__btn{margin-top:auto;width:100%;justify-content:center;font-size:14px;padding:15px 18px}
.entry-card__btn::after{content:"";position:absolute;inset:0;z-index:4}   /* カード全体をクリック範囲に */
.entry-card:hover .entry-card__btn{border-color:var(--c);color:var(--c);box-shadow:var(--shadow-sm)}
.entry-card:hover .entry-card__btn .arw{transform:translateX(4px)}
.entry-card__btn:focus-visible{outline:3px solid color-mix(in srgb,var(--c) 45%,#fff);outline-offset:3px}
/* 読み上げソフト向けの隠し文字（画面には表示しない） */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 3列のままカード幅が狭くなる幅：ボタンを「詳しく見る」だけにして1行を保つ（全文は aria-label で読み上げ） */
@media(min-width:1101px) and (max-width:1279px){.entry-card__btn-pre{display:none}}
/* 小さいスマホ：文字を載せる幅を広げる */
@media(max-width:420px){.entry-card__ov{width:64%;padding:16px 0 0 18px}.entry-card__name{font-size:21px}
  .entry-card__btn-pre{display:none}}  /* スマホはボタンを「詳しく見る」だけに（全文は aria-label で読み上げ） */

/* =========================================================================
 * v1.2.44 運送＋陸送版オプションを枠でまとめる（案2）
 *  ・並び：［運送・陸送版］の枠（2/3幅）＋ 倉庫（1/3幅）
 *  ・ボタンの高さを枠の内外で揃えるため、倉庫カードの上下に「枠の上余白＋見出し」「枠の下余白」と同じ余白を付ける
 *    枠の上余白 14px ＋ 見出し 24px ＋ 見出し下 12px ＝ 50px／枠の下余白 16px
 * ========================================================================= */
.entry-grid--grp{grid-template-columns:2fr 1fr;align-items:stretch}
.entry-group{background:var(--bg-blue);border-radius:22px;padding:14px 14px 16px;display:flex;flex-direction:column}
.entry-group__lbl{display:flex;align-items:center;justify-content:center;gap:10px;height:24px;margin:0 0 12px;font-size:13px;color:var(--navy-deep);letter-spacing:.04em}
.entry-group__lbl b{font-weight:700}
.entry-group__lbl span{width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;color:var(--navy-deep)}
.entry-group__in{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1}
.entry-grid--grp>.entry-card{margin:50px 0 16px}
/* 文字を減らした分、主な機能の機能名を少し大きく */
.entry-card__ft b{font-size:15px}
.entry-card__fn li{padding:11px 0}
@media(max-width:1100px){
  .entry-grid--grp{grid-template-columns:1fr}
  .entry-group__in{grid-template-columns:1fr}
  .entry-grid--grp>.entry-card{margin:0}
}
/* v1.2.44 幅ごとの調整（実測で文字のはみ出し・見出しの折れが出た幅だけ） */
/* 3列のまま枠の中のカードが細くなる幅：文字を載せる幅を広げ、製品名を少し小さく */
@media(min-width:1101px) and (max-width:1279px){
  .entry-card__ov{width:60%;padding:16px 0 0 18px}
  .entry-card__name{font-size:21px}
  .entry-card__catch{font-size:12.5px}
}
/* 1列のとき：枠の見出しは折り返してもよい（倉庫カードとの高さ合わせが不要になるため） */
@media(max-width:1100px){.entry-group__lbl{height:auto;min-height:24px;flex-wrap:wrap;row-gap:4px}}
/* 小さいスマホ：枠の見出しを詰める */
@media(max-width:420px){.entry-group__lbl{font-size:12px;letter-spacing:0;gap:6px}}
/* さらに小さいスマホ（360px以下）：画像上の文字を一段小さく */
@media(max-width:360px){
  .entry-card__ov{width:70%;padding:14px 0 0 16px}
  .entry-card__name{font-size:19px;margin-bottom:6px}
  .entry-card__catch{font-size:12px;line-height:1.5}
  .entry-card__eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:8px}
}

/* v1.2.46 概要イラストの差し替え：拡大できることを示す（PCはカーソル、スマホは注記） */
.intro__overview{flex-direction:column;align-items:center}
.intro__overview[data-zoom]{cursor:zoom-in}
.intro__overview img{max-width:747px}   /* 元画像の幅以上に引き伸ばしてぼやけないように */
.intro__overview-cap{display:none;margin-top:10px;font-size:12px;color:var(--text-soft)}
@media(max-width:768px){.intro__overview-cap{display:block}}

/* =========================================================================
 * v1.2.47 車楽クラウド（運送）ページ「業務の流れ」
 *  「車楽とは」（白）の続きとして、上の余白を詰めて読み進めやすくする
 * ========================================================================= */
.unso-flow{padding-top:24px}
.unso-flow__fig{margin:40px auto 0;max-width:994px;display:flex;flex-direction:column;align-items:center;cursor:zoom-in}
.unso-flow__fig img{width:100%;height:auto;display:block;border-radius:var(--radius-lg)}   /* 元画像の幅（994px）が上限 */
.unso-flow__cap{display:none;margin-top:10px;font-size:12px;color:var(--text-soft)}
@media(max-width:768px){.unso-flow__cap{display:block}.unso-flow__fig{margin-top:28px}}
/* v1.2.53: オプション欄の中の「全プラン標準機能」（実運送体制管理簿）。オプションと区別するため紺に */
.opt-card__for--std{color:var(--navy-deep)}
/* v1.2.53: オプション欄のリード文を文節で改行し、行の長さをそろえる（「法改正｜で求められる」のような切れ方を防ぐ） */
[data-block="options"] .lead{word-break:auto-phrase;text-wrap:balance}

/* =========================================================================
 * v1.2.54 スマホでTOPだけ横に動く（右に余白ができる）不具合の修正
 *  原因：ヒーローのトラック画像（.fv-stage__truck）が right:-12% で画面の右端から 13〜17px はみ出していた。
 *        .hero の overflow:hidden で隠していたが、iPhoneのSafariでは mask-image／opacity のかかった要素が
 *        はみ出しを隠す指定をすり抜け、横にスクロールできてしまうことがある。
 *  対策：①1366px以下ではトラック画像を画面内に収める（はみ出し自体をなくす）
 *        ②.hero に overflow:clip も重ねがけ（Safari 16以降で確実に切り取る。未対応ブラウザは従来の hidden）
 *  ※1367px以上の見た目は変更なし
 * ========================================================================= */
.hero{overflow:hidden;overflow:clip}
/* 1366px以下（スマホ〜iPad Proの横向き）は画面内に収める。1081〜1280pxでも4〜16pxはみ出しており、iPad横向き（1180px前後）と重なるため。
   1367px以上はもともと画面内に収まっている（コンテンツ幅の上限があるため）ので、見た目は変わらない */
@media(max-width:1366px){
  .fv-stage__truck{right:0;width:100%}
}

/* =========================================================================
 * v1.2.55 お知らせ一覧がスマホで横にはみ出していた不具合の修正（TOPが横に動く本当の原因）
 *  原因：.news-row__t（white-space:nowrap＋省略表示）に min-width:0 がなく、タイトルが縮まずに全文の長さで横に伸び、
 *        お知らせ欄ごと画面幅の2倍以上（390px幅で918px）に広がっていた。記事が入って初めて起きるため、記事のない検証環境では見つからなかった。
 *  対策：①タイトルに min-width:0、グリッドの列も minmax(0,…) にして、画面幅を超えないように
 *        ②768px以下はタイトルを省略せず2行まで表示（日付・カテゴリの下に全幅で）。矢印は右端に固定
 *  ※お知らせ一覧ページ（/news/）も同じ部品のため同時に直る
 * ========================================================================= */
.news__grid{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
.news-list{min-width:0}
.news-row__t{min-width:0}
@media(max-width:1080px){.news__grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:768px){
  .news-row{flex-wrap:wrap;gap:8px 12px;padding:18px 32px 18px 4px}
  .news-row__date{width:auto}
  .news-row__t{flex-basis:100%;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6}   /* URL等の長い英数字も途中で改行 */
  .news-row__arw{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
  .news-row:hover .news-row__arw{transform:translate(4px,-50%)}
}

/* =========================================================================
 * v1.2.59 入口カードにマウスを乗せると、カーソルが矢印⇔手のマークに高速で切り替わる（ぷるぷるする）不具合の修正
 *  原因①：カード全体をクリック範囲にするため、ボタンの ::after をカード全体に広げている（v1.2.43）。
 *          カード上のどこにマウスがあってもボタンに乗っている扱いになり、サイト共通の .btn--ghost:hover の
 *          transform:translateY(-2px) が効く → transform があるとボタンが ::after の基準になり、クリック範囲がボタンの大きさに縮む
 *          → マウスがボタンの外に出る → transform が外れて範囲がカード全体に戻る → … の無限ループ
 *  原因②：カード自体の :hover の translateY(-5px)。下端にマウスがあると、カードが逃げる→戻るのループ
 *  対策：入口カード内のボタンは transform しない（①）。カードは浮かせず、影と枠線の色で反応させる（②）
 *  検証：カード中央・下端で1.2秒間の切り替わり回数 7回・11回 → 0回
 * ========================================================================= */
.entry-card .entry-card__btn:hover{transform:none}
.entry-card:hover{transform:none;border-color:color-mix(in srgb,var(--c) 35%,#fff);box-shadow:0 8px 22px rgba(30,51,96,.10),0 22px 48px rgba(30,51,96,.13)}

/* =========================================================================
 * v1.2.62 車楽クラウド（運送）ページ「標準機能」（紺の背景）のボタンとリンクを目立たせる
 *  ・「機能紹介を見る」：青いボタン（btn--navy）が紺の背景に溶け込んでいたため、白いボタン＋一言に
 *    （赤は「導入のご相談」専用の色のため使わない）
 *  ・04 実運送体制管理簿の「くわしく見る →」：青い文字で紺の上だと読みにくかったため白に
 * ========================================================================= */
.feat-cta{text-align:center;margin-top:64px}
.feat-cta__lead{margin:0 0 18px;font-size:15px;line-height:1.8;color:#C5D2E8;letter-spacing:.02em}
.feat-cta__btn{background:#fff;color:var(--navy-deep);box-shadow:0 10px 28px rgba(0,0,0,.28);min-width:280px;justify-content:center}
.feat-cta__btn:hover{background:#EEF3FB;color:var(--navy-deep);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.32)}
.section--tint[data-block="features"] .opt-card__link{color:#fff}
.section--tint[data-block="features"] .opt-card__link:hover{color:#fff;opacity:.85}
@media(max-width:560px){.feat-cta{margin-top:48px}.feat-cta__lead{font-size:14px}.feat-cta__btn{width:100%;min-width:0}}

/* =========================================================================
 * v1.2.66 車楽クラウド（運送）ページがスマホで左右にゆらゆら動く不具合の修正
 *  原因：見出し「運送業専用システム。」「充実のサポート。」の下線の上を走る光（em::before の syaraku-shine）。
 *        光の帯そのものを translateX(230%) で右へ動かしていたため、流れ切った位置が文字幅の約1.5倍まで飛び出し、
 *        アニメーションの周期（3.2秒）に合わせてページ幅が広がったり戻ったりしていた（358px幅で最大96px、本番で447pxを確認）。
 *        コメント上は「下線の範囲内でクリップ」だったが、切り取る指定が入っていなかった
 *  対策：光の帯は下線と同じ幅の箱に固定し、箱の中で光の模様（背景）だけを流す。見た目は従来と同じで、はみ出しは起きない。
 *        （見出しの em に overflow:hidden を付けると文字の上下位置がずれることがあるため、その方法は取らない）
 *  あわせて：「標準機能」セクションの動く背景の飾りも、セクションの中で切り取るように（Safari対策の予防）
 * ========================================================================= */
.support__head-style h2 em::before{
  left:0;right:0;width:auto;transform:none;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%) no-repeat;
  background-size:45% 100%;
  animation:syaraku-shine2 3.2s ease-in-out infinite;
}
/* 背景の位置：-82% で左の外、182% で右の外（背景の幅45%に対する計算値）。従来の -110%〜230% の動きに相当 */
@keyframes syaraku-shine2{
  0%   {background-position:-82% 0;opacity:0}
  12%  {opacity:1}
  50%  {background-position:182% 0;opacity:1}
  56%  {opacity:0}
  100% {background-position:182% 0;opacity:0}
}
@media (prefers-reduced-motion:reduce){.support__head-style h2 em::before{animation:none;opacity:0}}
.section--tint[data-block="features"]{position:relative;overflow:hidden;overflow:clip;contain:paint;isolation:isolate}
/* v1.2.66: 小さいスマホ（320px幅など）のはみ出し
 *  ・車楽クラウド（運送）「車楽とは」の画像に重ねたラベル（float-pill）：PCでは画像の右から18px外に出す演出。
 *    420px以下では画像の内側に収める（320px幅で12pxはみ出していた） */
@media(max-width:420px){.intro__media .float-pill{right:8px;bottom:-16px;max-width:calc(100% - 16px)}}