/* T1 v2: 生成した背景・車体・手前の花を独立させ、動画なしで走行感を出す。 */
:root {
  --kbx-hero-sky: #eaf5f7;
  --kbx-hero-paper: #f7fbf6;
  --kbx-hero-rim: #c0c6c4;
  --kbx-hero-hub: #6b7778;
  --kbx-hero-road: #c3c2be;
  --kbx-hero-wash-full: rgba(247,251,246,.98);
  --kbx-hero-wash-soft: rgba(247,251,246,.88);
  --kbx-hero-wash-clear: rgba(247,251,246,0);
  --kbx-hero-space: clamp(22px, 5vw, 72px);
  --kbx-hero-gap: 18px;
  --kbx-hero-pad-top: 140px;
  --kbx-hero-pad-bottom: 40px;
  --kbx-hero-button-pad: 15px 26px;
}
.kbx-hero { position: relative; isolation: isolate; min-height: clamp(760px, 56.3vw, 1060px); overflow: hidden; background: var(--kbx-hero-sky); }
.kbx-hero-art { position: absolute; inset: 0; overflow: hidden; }
.kbx-hero-scenery { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; animation: kbxHorizon 40s ease-in-out infinite alternate; }
/* 背景の動画：再生が始まるまでは透明にして、下のポスター画像（同じ最初のコマ）を見せる */
.kbx-hero-video { opacity: 0; transition: opacity .8s var(--kbx-ease); }
.kbx-hero-video.is-playing { opacity: 1; }
.kbx-hero-wash { position: absolute; inset: 0; background: linear-gradient(100deg, var(--kbx-hero-wash-full) 0%, var(--kbx-hero-wash-soft) 20%, var(--kbx-hero-wash-clear) 66%); pointer-events: none; }
.kbx-hero-copy { position: relative; z-index: 3; width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--kbx-hero-pad-top) var(--kbx-hero-space) var(--kbx-hero-pad-bottom); pointer-events: none; }
.kbx-hero-copy a { pointer-events: auto; }
.kbx-hero-kicker { margin: 0 0 var(--kbx-hero-gap); color: var(--kbx-body-2); font: 700 11px 'Outfit', sans-serif; letter-spacing: .22em; }
.kbx-hero-cross { display: flex; gap: 10px; align-items: center; margin-bottom: var(--kbx-hero-gap); color: var(--kbx-green); font-weight: 700; font-size: 14px; letter-spacing: .08em; }
.kbx-hero-cross img { width: 11px; height: 11px; }
.kbx-hero h1 { margin: 0 0 var(--kbx-hero-gap); color: var(--kbx-green); font-size: clamp(48px, 4.6vw, 74px); font-weight: 900; line-height: 1.22; letter-spacing: .015em; }
.kbx-hero h1 span { display: block; }
.kbx-hero-lead { max-width: 490px; margin: 0 0 var(--kbx-hero-gap); font-size: 14px; line-height: 2; color: var(--kbx-body); }
.kbx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kbx-hero-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--kbx-hero-button-pad); border: 1px solid var(--kbx-green); border-radius: var(--kbx-r-pill); font-weight: 700; font-size: 14px; background: var(--kbx-green); color: var(--kbx-white); }
.kbx-hero-actions a + a { color: var(--kbx-green); background: var(--kbx-hero-wash-soft); }
.kbx-hero-cert { margin: var(--kbx-hero-gap) 0 0; max-width: 500px; font-size: 10.5px; line-height: 1.9; color: var(--kbx-body-2); }
.kbx-hero-truck { position: absolute; z-index: 2; right: 5%; bottom: 11.3%; width: clamp(520px, 48vw, 840px); container-type: inline-size; animation: kbxTruckRide 1.8s ease-in-out infinite; }
.kbx-hero-truck > img { width: 100%; height: auto; display: block; }
.kbx-truck-brand { position: absolute; left: 34%; top: 30%; display: flex; align-items: center; gap: 1.4cqw; color: var(--kbx-green); }
.kbx-truck-brand img { display: block; width: 7cqw; height: auto; }
.kbx-truck-brand span { display: block; font: 800 4.5cqw/1 'Outfit', sans-serif; letter-spacing: .04em; }
.kbx-truck-brand small { display: block; margin-top: .9cqw; font: 600 1.1cqw/1.2 'Outfit', sans-serif; letter-spacing: .06em; }
/* ホイールの動きは、小さなコード描画のリムを元のイラストのタイヤ上に重ねる。 */
.kbx-truck-rim { position: absolute; top: 74.3%; left: 23.8%; width: 6.3%; aspect-ratio: 1; border-radius: 50%; border: .36cqw solid var(--kbx-hero-rim); background: repeating-conic-gradient(var(--kbx-hero-hub) 0 12deg, var(--kbx-hero-rim) 12deg 45deg); animation: kbxWheel 1.4s linear infinite; }
.kbx-truck-rim::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: var(--kbx-hero-hub); }
.kbx-truck-rim:nth-of-type(2) { left: 35.2%; }
.kbx-truck-rim:nth-of-type(3) { left: 83.6%; }
.kbx-hero-road { position: absolute; z-index: 1; left: 0; bottom: 15.3%; width: 100%; height: 6px; background: repeating-linear-gradient(90deg, var(--kbx-white) 0 130px, var(--kbx-hero-road) 130px 260px); animation: kbxRoad 2.4s linear infinite; opacity: .78; }
.kbx-hero-front { position: absolute; z-index: 4; bottom: -24px; left: 0; display: flex; width: 200%; height: auto; pointer-events: none; animation: kbxForeground 34s linear infinite; }
.kbx-hero-front img { width: 25%; height: auto; flex: none; }
.kbx-hero-toggle { position: absolute; z-index: 5; right: var(--kbx-hero-space); bottom: var(--kbx-hero-gap); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--kbx-green-a32); border-radius: var(--kbx-r-pill); padding: 10px 16px; background: var(--kbx-hero-paper); color: var(--kbx-green); font-size: 11px; font-weight: 700; cursor: pointer; }
.kbx-hero-toggle[hidden] { display: none; }
.kbx-hero-toggle:focus-visible, .kbx-hero-actions a:focus-visible { outline: 3px solid var(--kbx-green); outline-offset: 4px; }
.kbx-hero-toggle svg { width: 12px; height: 12px; }
.kbx-hero-toggle .kbx-play { display: none; }
.kbx-hero-toggle[aria-pressed='true'] .kbx-play { display: block; }
.kbx-hero-toggle[aria-pressed='true'] .kbx-pause { display: none; }
.kbx-hero.is-paused .kbx-hero-art *, .kbx-hero.is-offscreen .kbx-hero-art *, .kbx-hero.is-reduced .kbx-hero-art *, [data-motion='off'] .kbx-hero-art * { animation-play-state: paused !important; }
@keyframes kbxHorizon { from { transform: scale(1.04) translateX(1%); } to { transform: scale(1.04) translateX(-1%); } }
@keyframes kbxTruckRide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes kbxWheel { to { transform: rotate(360deg); } }
@keyframes kbxRoad { to { background-position-x: -260px; } }
@keyframes kbxForeground { to { transform: translateX(-50%); } }
@media (max-width: 999px) {
  :root { --kbx-hero-pad-top: 106px; --kbx-hero-pad-bottom: 24px; }
  .kbx-hero { display: flex; flex-direction: column; min-height: 0; background: var(--kbx-hero-paper); }
  .kbx-hero-copy { display: contents; }
  .kbx-hero-heading { order: 0; padding: var(--kbx-hero-pad-top) var(--kbx-hero-space) var(--kbx-hero-pad-bottom); }
  .kbx-hero-details { order: 2; padding: var(--kbx-hero-pad-bottom) var(--kbx-hero-space) var(--kbx-hero-pad-bottom); }
  .kbx-hero h1 { font-size: clamp(36px, 7.8vw, 58px); }
  .kbx-hero-lead { max-width: 570px; font-size: 13px; }
  .kbx-hero-art { position: relative; order: 1; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 570px; }
  .kbx-hero-scenery { object-fit: cover; object-position: 50% 50%; }
  .kbx-hero-wash { display: none; }
  .kbx-hero-truck { width: 94%; max-width: 650px; right: 3%; bottom: 11.3%; }
  .kbx-hero-front { width: 400%; bottom: -20px; }
  .kbx-hero-road { height: 4px; }
  .kbx-hero-toggle { right: 18px; bottom: 16px; }
  .kbx-hero-cert { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .kbx-hero-art * { animation: none !important; }
  .kbx-hero-toggle { display: none; }
}