/* ================================================================
   KIBEX（有限会社 吉部運送）共通スタイル v1.0
   design_handoff_kibex/DESIGN_GUIDELINES.md 準拠
   ================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Zen Kaku Gothic New', sans-serif; color: #1A2140; background: #fff; -webkit-font-smoothing: antialiased; }
a { color: #002267; text-decoration: none; }
a:hover { color: #2A4390; }
::selection { background: #002267; color: #fff; }
:focus-visible { outline: 2px solid #2A4390; outline-offset: 2px; }
img { max-width: 100%; }

:root {
  --kbx-navy: #002267;
  --kbx-navy-hover: #2A4390;
  --kbx-navy-deep: #06194A;
  --kbx-navy-night: #04102E;
  --kbx-ink: #1A2140;
  --kbx-body: #545C78;
  --kbx-body-2: #6B7390;
  --kbx-muted: #8891AC;
  --kbx-on-navy: #EEF2FC;
  --kbx-accent-sky: #9FB2E8;
  --kbx-bg-light: #EFF2F9;
  --kbx-line: #E6EAF4;
  --kbx-line-strong: #CDD5EA;
  --kbx-card-border: #DFE5F2;
  --kbx-grad-hero: linear-gradient(205deg, #0A2058 0%, #002267 55%, #04123A 100%);
}

/* ---- keyframes ---- */
@keyframes kbxUp { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes kbxFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kbxMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kbxCue { 0% { transform: translateY(-102%); } 58% { transform: translateY(102%); } 100% { transform: translateY(102%); } }
@keyframes kbxArm { from { opacity: 0; transform: translate(var(--ax, 0px), var(--ay, 0px)); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes kbxAway { 0% { transform: translateY(0); } 100% { transform: translateY(-101%); } }
@keyframes kbxTrack { from { opacity: 0; letter-spacing: .14em; } to { opacity: 1; letter-spacing: .5em; } }
@keyframes kbxPulse { 0% { opacity: .5; transform: rotate(45deg) scale(.35); } 70%, 100% { opacity: 0; transform: rotate(45deg) scale(2.9); } }
@keyframes kbxDash { to { stroke-dashoffset: -33; } }

/* ---- scroll reveal ---- */
[data-motion="on"] [data-rv] { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
[data-motion="on"] [data-rv].rv-in { opacity: 1; transform: translateY(0); }
[data-motion="on"] [data-rv-d="1"] { transition-delay: .1s; }
[data-motion="on"] [data-rv-d="2"] { transition-delay: .22s; }
[data-motion="on"] [data-rv-d="3"] { transition-delay: .34s; }
[data-motion="off"] * { animation: none !important; transition: none !important; }
[data-motion="off"] [data-smil="1"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  [data-smil="1"] { display: none; }
  [data-motion="on"] [data-rv] { opacity: 1; transform: none; }
}

/* ---- responsive grid tokens（参照実装 renderVals 準拠） ---- */
.g-g3 { grid-template-columns: repeat(3, 1fr); }
.g-gTwo { grid-template-columns: 1fr 1fr; }
.g-gStat { grid-template-columns: repeat(4, 1fr); }
.g-gFoot { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.g-gRoute { grid-template-columns: repeat(3, 1fr); }
.g-gConcept { grid-template-columns: repeat(3, 1fr); }
.g-svcGrid { grid-template-columns: 92px 1fr 64px; }
.g-contact { grid-template-columns: 5fr 7fr; }
.svc-arrow { display: flex; }
.rec-deco { display: block; }
.nav-desk { display: flex; }
.nav-burger { display: none; }
.sp-footer { display: none; }
.hero-desk { display: flex; }
.hero-mob { display: none !important; }

@media (max-width: 1179px) { .rec-deco { display: none !important; } }
@media (max-width: 1119px) {
  .nav-desk { display: none !important; }
  .nav-burger { display: flex !important; }
  .sp-footer { display: grid !important; }
  .to-top { bottom: 86px !important; }
  body { padding-bottom: 64px; }
}
@media (max-width: 999px) {
  .g-g3 { grid-template-columns: repeat(2, 1fr); }
  .hero-desk { display: none !important; }
  .hero-mob { display: flex !important; }
  /* モバイルはヒーローが紺のため常時白帯（参照実装 hdrOn: hdr||mob 準拠） */
  .js-hdrbg { opacity: 1; }
}
@media (max-width: 979px) { .g-gFoot { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 819px) { .g-gTwo, .g-contact { grid-template-columns: 1fr; } }
@media (max-width: 759px) { .g-gRoute { grid-template-columns: 1fr; } }
@media (max-width: 719px) {
  .g-svcGrid { grid-template-columns: 48px 1fr; }
  .svc-arrow { display: none !important; }
}
@media (max-width: 679px) { .g-g3, .g-gConcept { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .g-gStat { grid-template-columns: repeat(2, 1fr); } }

/* ---- JS state hooks ---- */
.js-hdrbg { opacity: 0; }
body.hdr-solid .js-hdrbg, body.always-solid .js-hdrbg { opacity: 1; }
.menu-ovl { transform: translateX(100%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .55s cubic-bezier(.7,0,.2,1), opacity .45s, visibility 0s linear .6s; }
body.menu-open .menu-ovl { transform: translateX(0); opacity: 1; pointer-events: auto; visibility: visible; transition: transform .55s cubic-bezier(.7,0,.2,1), opacity .45s, visibility 0s; }
body.menu-open { overflow: hidden; }
.to-top { opacity: 0; transform: translateY(14px); pointer-events: none; }
.to-top.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---- hover states（参照実装 style-hover 由来） ---- */
.hv1:hover { color: var(--kbx-navy) !important; }
.hv2:hover { transform: translateY(-2px) !important; filter: brightness(1.5) !important; }
.hv3:hover { transform: translateY(-3px) !important; filter: brightness(1.5) !important; }
.hv4:hover { background: rgba(0,34,103,.06) !important; }
.hv5:hover { background: #F7F9FD !important; }
.hv6:hover { color: var(--kbx-navy) !important; border-color: var(--kbx-navy) !important; }
.hv7:hover { background: #F5F7FC !important; padding-left: 22px !important; }
.hv8:hover { transform: translateY(-4px) !important; filter: brightness(1.5) !important; }
.hv9:hover { background: #F7F9FD !important; padding-left: 26px !important; }
.hv10:hover { background: var(--kbx-navy) !important; color: #ffffff !important; }
.hv11:hover { transform: translateY(-3px) !important; }
.hv12:hover { background: rgba(238,242,252,.1) !important; }
.hv13:hover { color: #ffffff !important; border-color: #ffffff !important; }
.hv14:hover { color: #ffffff !important; }
.hv15:hover { filter: brightness(1.5) !important; }
.hv16:hover { background: rgba(238,242,252,.12) !important; }

/* ---- お知らせ記事本文（microCMSリッチエディタ対応） ---- */
.kbx-article { font-size: 16px; line-height: 2.1; color: #33395A; }
.kbx-article p { margin: 0 0 24px; }
.kbx-article h2 { font-size: 22px; font-weight: 900; color: #002267; margin: 40px 0 16px; padding-left: 14px; border-left: 3px solid #002267; }
.kbx-article h3 { font-size: 18px; font-weight: 800; color: #1A2140; margin: 32px 0 12px; }
.kbx-article h4 { font-size: 16px; font-weight: 800; color: #1A2140; margin: 28px 0 10px; }
.kbx-article img { max-width: 100%; height: auto; display: block; margin: 24px 0; }
.kbx-article ul, .kbx-article ol { margin: 0 0 24px; padding-left: 26px; }
.kbx-article li { margin-bottom: 8px; }
.kbx-article blockquote { margin: 0 0 24px; padding: 16px 20px; background: #EFF2F9; border-left: 3px solid #CDD5EA; }
.kbx-article a { font-weight: 700; border-bottom: 1px solid currentColor; }
.kbx-article figure { margin: 24px 0; }
.kbx-article figcaption { font-size: 12px; color: #8891AC; margin-top: 8px; }
.kbx-article hr { border: 0; border-top: 1px solid #E6EAF4; margin: 32px 0; }

/* ---- フォーム（お問い合わせ） ---- */
.kbx-field { display: block; margin-bottom: 22px; }
.kbx-field > span.lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1A2140; margin-bottom: 9px; }
.kbx-req { font-size: 10px; font-weight: 700; color: #fff; background: #002267; border-radius: 2px; padding: 2px 8px; letter-spacing: .08em; }
.kbx-opt { font-size: 10px; font-weight: 700; color: #6B7390; background: #EFF2F9; border-radius: 2px; padding: 2px 8px; letter-spacing: .08em; }
.kbx-input, .kbx-textarea, .kbx-select {
  width: 100%; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 14.5px; color: #1A2140;
  background: #fff; border: 1px solid #CDD5EA; border-radius: 0; padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.kbx-input:focus, .kbx-textarea:focus, .kbx-select:focus { outline: none; border-color: #002267; box-shadow: 0 0 0 3px rgba(0,34,103,.09); }
.kbx-textarea { min-height: 170px; resize: vertical; line-height: 1.9; }
.kbx-input::placeholder, .kbx-textarea::placeholder { color: #A9B1C8; }
.kbx-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; cursor: pointer;
  color: #fff; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: 15px; padding: 18px 46px;
  background: #002267; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: transform .25s, filter .25s;
}
.kbx-submit:hover { transform: translateY(-3px); filter: brightness(1.5); }
.kbx-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.kbx-form-note { font-size: 12px; line-height: 1.9; color: #6B7390; }
.kbx-alert { display: none; margin: 0 0 22px; padding: 14px 18px; font-size: 13.5px; font-weight: 700; line-height: 1.8; }
.kbx-alert.is-error { display: block; color: #7C2D30; background: #FAEDEE; border: 1px solid #E3C3C5; }
.kbx-alert.is-ok { display: block; color: #0F3B1F; background: #EBF6EF; border: 1px solid #BFDECB; }