@charset "UTF-8";

/* =========================================================
   ALSOK ITレスキュー ランディングページ
   ブランド：ALSOKブルー × 駆けつけオレンジ
   ========================================================= */

:root {
  --alsok-blue: #005bac;
  --alsok-blue-dark: #003a70;
  --alsok-navy: #04294d;
  --accent: #f5821f;        /* 駆けつけ＝緊急対応のアクセント */
  --accent-dark: #d96a0c;
  --ink: #16232e;
  --ink-soft: #4a5a68;
  --line: #d9e2ec;
  --bg: #ffffff;
  --bg-tint: #eef3fa;   /* セクションの面（やや色味を強める） */
  --bg-band: #e0eaf7;   /* アクセント帯・見出し装飾 */
  --dark: #06153a;      /* 反転バンド用のディープネイビー */
  /* 角丸スケール（統一） */
  --radius: 14px;       /* カードなど大きな面 */
  --radius-sm: 10px;    /* 中サイズ */
  --radius-xs: 7px;     /* 小さなチップ・アイコン枠 */
  /* エレベーション（ブランドネイビーで淡く色付けした一貫した影） */
  --e1: 0 1px 2px rgba(4, 41, 77, 0.05), 0 3px 10px -4px rgba(4, 41, 77, 0.08);
  --e2: 0 6px 16px -8px rgba(4, 41, 77, 0.16), 0 18px 40px -22px rgba(4, 41, 77, 0.2);
  --e-dark: 0 20px 46px -24px rgba(0, 0, 0, 0.5);
  /* 後方互換（既存参照用） */
  --shadow: var(--e2);
  --shadow-soft: var(--e1);
  --maxw: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.wrap {
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
}

.display {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.12rem;
  color: var(--alsok-navy);
}
/* ロゴ画像（原寸 203×60・約3.38:1） */
.brand .brand-logo {
  height: 40px;
  width: auto;
  flex: none;
  display: block;
}
.brand .brand-name {
  position: relative;
  padding-left: 12px;
  font-size: 1.06rem;
  line-height: 1;
}
.brand .brand-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--line);
}


.header-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}
.header-nav a:hover { color: var(--alsok-blue); }
.header-cta {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff !important;
  background: var(--accent);
  padding: 10px 20px;
  border-radius: 999px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.header-cta:hover { background: var(--accent-dark); transform: translateY(-1px); }

/* ハンバーガーメニュー制御（既定＝デスクトップ：ボタン非表示、ドロワー内CTA表示） */
.nav-toggle { display: none; }
.nav-btn { display: none; }
.nav-overlay { display: none; }
.header-actions { display: none; }
.header-cta--mobile { display: none; }

@media (max-width: 860px) {
  /* 右側のアクション群（お問い合わせCTA ＋ メニューボタン） */
  .header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  /* ドロワー内のCTAは隠す（メニューに含めない） */
  .header-cta--desktop { display: none; }
  /* メニューボタン左のお問い合わせCTA（コンパクト） */
  .header-cta--mobile {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    font-size: 0.86rem;
  }

  /* メニューボタン（文字なし・アイコンのみ） */
  .nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--alsok-navy);
    -webkit-tap-highlight-color: transparent;
    z-index: 60;
  }
  .nav-btn-bars {
    position: relative;
    width: 24px;
    height: 16px;
    display: inline-block;
  }
  .nav-btn-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--alsok-blue);
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), top 0.25s var(--ease);
  }
  .nav-btn-bars span:nth-child(1) { top: 0; }
  .nav-btn-bars span:nth-child(2) { top: 7px; }
  .nav-btn-bars span:nth-child(3) { top: 14px; }

  /* ドロワー本体（4リンクのみ） */
  .header-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 88px 24px 32px;
    background: #fff;
    box-shadow: -12px 0 40px -12px rgba(4, 41, 77, 0.28);
    transform: translateX(-20px);
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.28s var(--ease), clip-path 0.32s var(--ease);
    z-index: 55;
    overflow-y: auto;
  }
  .header-nav a {
    font-size: 1rem;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    color: var(--alsok-navy);
    font-weight: 700;
  }

  /* オーバーレイ（背景の暗幕） */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(4, 41, 77, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
    z-index: 50;
  }

  /* 開いた状態 */
  .nav-toggle:checked ~ .header-nav { transform: translateX(0); opacity: 1; clip-path: inset(0); pointer-events: auto; }
  .nav-toggle:checked ~ .nav-overlay { opacity: 1; visibility: visible; }
  .nav-toggle:checked ~ .header-actions .nav-btn .nav-btn-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .nav-toggle:checked ~ .header-actions .nav-btn .nav-btn-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .header-actions .nav-btn .nav-btn-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  body:has(.nav-toggle:checked) { overflow: hidden; }
}

@media (max-width: 380px) {
  .header-cta--mobile { padding: 8px 12px; font-size: 0.82rem; }
}

/* =========================================================
   ファーストビュー
   ========================================================= */
.hero {
  position: relative;
  background-color: var(--bg-tint);
  background-image: url("fb-back.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.hero > .wrap {
  position: relative;
  z-index: 1;
  display: block;
  padding: 62px 0 88px;
}
.hero-copy { max-width: 620px; }
.hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem);
}
.hero h1 .accent { color: var(--alsok-blue); }
.hero h1 .mark {
  position: relative;
  white-space: nowrap;
}
.hero h1 .mark::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 4px;
  height: 12px;
  background: rgba(245, 130, 31, 0.4);
  z-index: -1;
  border-radius: 4px;
}
.hero p.lead {
  margin: 22px 0 0;
  font-size: 1.02rem;
  color: #2b3a47;
}

/* 写真の上でも読めるようにする白フチ */
.hero h1,
.hero p.lead,
.hero .hero-trust span {
  paint-order: stroke fill;
  -webkit-text-stroke: 5px #fff;
  text-stroke: 5px #fff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.98),
    0 0 18px rgba(255, 255, 255, 0.92),
    0 0 30px rgba(255, 255, 255, 0.7);
}
.hero p.lead {
  -webkit-text-stroke-width: 4px;
  text-stroke-width: 4px;
}
.hero .hero-trust span {
  -webkit-text-stroke-width: 4px;
  text-stroke-width: 4px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.btn {
  --btn-bg: var(--alsok-blue);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--btn-fg);
  background: var(--btn-bg);
  padding: 17px 30px;
  border-radius: 12px;
  box-shadow: 0 12px 26px -12px rgba(4, 41, 77, 0.55);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
    background 0.22s var(--ease);
}
.btn .btn-ico { width: 22px; height: 22px; flex: none; }
.btn .btn-sub {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
  display: block;
  line-height: 1.2;
}
.btn .btn-lines { display: flex; flex-direction: column; align-items: flex-start; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(4, 41, 77, 0.6); }
.btn:focus-visible { outline: 3px solid var(--alsok-navy); outline-offset: 3px; }

.btn--primary { --btn-bg: var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-dark); }
.btn--secondary { --btn-bg: var(--alsok-blue); }
.btn--secondary:hover { --btn-bg: var(--alsok-blue-dark); }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed rgba(4, 41, 77, 0.25);
  max-width: 620px;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--alsok-blue-dark);
}
.hero-trust span::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--alsok-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.6 4.9 12.95l1.4-1.4 3.25 3.25 8.15-8.15 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.6 4.9 12.95l1.4-1.4 3.25 3.25 8.15-8.15 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95));
}

/* =========================================================
   セクション共通
   ========================================================= */
.section { padding: clamp(72px, 7vw, 108px) 0; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-head h2 {
  position: relative;
  margin: 0;
  padding-top: 22px;
  font-size: clamp(1.7rem, 1rem + 2.3vw, 2.6rem);
  letter-spacing: -0.015em;
}
.section-head h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--alsok-blue), var(--accent));
}
.section-head h2 .accent { color: var(--alsok-blue); }
.section-head p { margin: 14px 0 0; color: var(--ink-soft); }

/* =========================================================
   対応トラブル（5アイコン）
   ========================================================= */
.troubles {
  background: linear-gradient(180deg, var(--bg-band), var(--bg-tint));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trouble-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.trouble {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 18px 26px;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.trouble:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(0, 91, 172, 0.35);
}
.trouble .ico-frame {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--bg-band), #fff);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--alsok-blue);
}
.trouble .ico-frame svg { width: 40px; height: 40px; }
.trouble .num {
  display: inline-block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 0.72rem;
  color: var(--accent-dark);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.trouble h3 {
  margin: 0 0 6px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.trouble p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  text-align: left;
}

@media (max-width: 960px) {
  .trouble-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .trouble-grid { grid-template-columns: repeat(2, 1fr); }
}

.pains {
  background: linear-gradient(160deg, #1a3a6b, #0f2952);
  color: #dbe6f2;
}
.pains .section-head h2 { color: #fff; }
.pains .section-head h2 .accent { color: #ffb066; }
/* =========================================================
   よくあるお悩み（3カード）
   ========================================================= */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pain-card {
  position: relative;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  overflow: hidden;
  box-shadow: var(--e-dark);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pain-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--alsok-blue), #FFF100);
}
.pain-card:hover { transform: translateY(-6px); }
.pain-top {
  position: relative;
  height: 56px;
  margin-bottom: 18px;
}
.pain-card .pain-no {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--alsok-blue);
  -webkit-text-stroke: 1.5px rgba(0, 91, 172, 0.35);
  opacity: 0.4;
}
.pain-card .pain-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  margin: 0;
  color: var(--alsok-blue);
}
.pain-card h3 {
  margin: 0 0 12px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink);
}
.pain-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
@media (max-width: 880px) {
  .pain-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   できること（5つのメリット）
   ========================================================= */
.features { background: #fff; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.feature {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 18px 26px;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.feature .badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -4px rgba(245, 130, 31, 0.55);
}
.feature .badge svg { width: 18px; height: 18px; color: #fff; }
.feature .f-ico {
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--bg-band), #fff);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--alsok-blue);
}
.feature .f-ico svg { width: 36px; height: 36px; }
.feature .point {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--alsok-blue);
  margin-bottom: 4px;
}
.feature h3 {
  margin: 0 0 8px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.feature p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  text-align: left;
}

/* 5つ目（料金）を強調 */
.feature--price {
  background: linear-gradient(160deg, #fff7ee, #fff);
  border-color: rgba(245, 130, 31, 0.45);
}
.feature--price .f-ico { color: var(--accent); border-color: rgba(245, 130, 31, 0.35); }
.feature--price .point { color: var(--accent-dark); }
.feature--price .price {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  color: var(--accent-dark);
}

@media (max-width: 960px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

/* できること直下のCTA */
.mid-cta { text-align: center; margin-top: 52px; }
.mid-cta > p {
  margin: 0 0 6px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--alsok-navy);
}
.mid-cta .note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
.mid-cta .hero-cta { justify-content: center; margin-top: 0; }

/* =========================================================
   よくあるギモン（各コーナー内に配置）
   ========================================================= */
.qa-list {
  max-width: 880px;
  margin: 46px auto 0;
  display: grid;
  gap: 20px;
}
.qa-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--alsok-blue);
}
.qa-label::before,
.qa-label::after {
  content: "";
  width: 26px;
  height: 2px;
  background: rgba(0, 91, 172, 0.35);
  border-radius: 2px;
}
.qa-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px 30px;
  box-shadow: var(--shadow-soft);
}
.qa-question {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.q-mark, .a-mark {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  color: #fff;
}
.q-mark { background: var(--alsok-blue); }
.a-mark { background: var(--accent); }

.qa-question .bubble {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--alsok-navy);
  box-shadow: var(--shadow-soft);
}
.qa-question .bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 14px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

.qa-answer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.a-content { margin-top: 2px; }
.a-content h3 {
  margin: 0 0 12px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--alsok-blue-dark);
}
.a-content p { margin: 0 0 12px; font-size: 0.96rem; color: var(--ink-soft); line-height: 1.85; }
.a-content p:last-child { margin-bottom: 0; }
.a-content strong { color: var(--alsok-blue-dark); font-weight: 700; }

/* 提携表現 */
.qa-partner {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 26px;
  box-shadow: var(--shadow-soft);
}
.partner-box { text-align: center; line-height: 1.3; }
.partner-box .p-name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--alsok-navy);
}
.partner-box .p-sub { display: block; font-size: 0.72rem; color: var(--ink-soft); font-weight: 500; margin-top: 2px; }
.partner-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--accent);
}
.partner-link svg { width: 30px; height: 30px; }
.partner-link span {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent-dark);
}

/* 料金コーナー内のQ&Aは白背景と区別するため淡く色付け */
#price .qa-item { background: var(--bg-tint); }
#price .qa-item .bubble { background: #fff; }
#price .qa-item .bubble::before { background: #fff; }

@media (max-width: 900px) {
  .qa-item { padding: 24px 22px 26px; }
}
@media (max-width: 520px) {
  .qa-partner { flex-direction: column; gap: 14px; }
  .partner-link svg { transform: rotate(90deg); }
}

/* =========================================================
   なぜ駆けつけが必要か（円グラフ）
   ========================================================= */
.whydispatch {
  background:
    radial-gradient(760px 420px at 20% 8%, rgba(0, 91, 172, 0.35), transparent 60%),
    var(--dark);
  color: #dbe6f2;
}
.whydispatch .section-head h2,
.whydispatch .why-body h2 { color: #fff; }
.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.why-chart {
  position: relative;
  background: linear-gradient(160deg, #ffffff, #eef4fb);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  padding: 30px;
  margin: 0;
  box-shadow: var(--e-dark);
}
.why-chart .why-source { color: #6b7a8c; }
.why-chart svg { width: 100%; height: auto; max-width: 360px; margin: 0 auto; }
.why-source { margin: 14px 0 0; font-size: 0.72rem; color: #8ba0b8; line-height: 1.55; }

.why-body h2 { margin: 0; }
.why-lead { margin: 16px 0 24px; color: #aebfd2; }
.why-lead strong { color: #fff; }

.legend-group { margin-bottom: 18px; }
.legend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.legend-head .lg-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
}
.legend-head .lg-sum {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.02rem;
  white-space: nowrap;
}
.legend-group.is-dispatch .lg-title { color: #fff; }
.legend-group.is-dispatch .lg-sum { color: #6cb0f0; }
.legend-group.is-remote .lg-title { color: #ffffff; }
.legend-group.is-remote .lg-sum { color: #ff9a4d; }

.legend-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
.legend-group.is-remote .legend-list { grid-template-columns: 1fr; }
.legend-group.is-remote .lg-label { color: #e0b48a; }
.legend-group.is-remote .lg-pct { color: #ffffff; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 3px 0;
}
.legend-item .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.legend-item .lg-label { flex: 1 1 auto; color: #c4d2e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-item .lg-pct { font-weight: 700; color: #eef3fa; font-variant-numeric: tabular-nums; }

/* 結論バナー（センタリング・強調） */
.why-banner {
  margin: 52px auto 0;
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  padding: 32px 46px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #ffffff, #eef4fb);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--e-dark);
}
.why-banner .wb-part {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--alsok-navy);
}
.why-banner .wb-big {
  display: inline-block;
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--alsok-blue);
  margin: 0 6px;
  vertical-align: -8px;
}
.why-banner .wb-brand { color: var(--alsok-blue); font-weight: 900; }
.why-banner .wb-osusume {
  position: relative;
  color: #b35507;
  font-weight: 900;
  white-space: nowrap;
}
.why-banner .wb-osusume::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  height: 9px;
  z-index: -1;
  background: rgba(245, 130, 31, 0.3);
  border-radius: 4px;
}
.why-banner .wb-arrow { flex: none; display: inline-flex; }
.why-banner .wb-arrow svg { width: 42px; height: 42px; color: var(--accent); }
.wb-brk { display: none; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-chart { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .why-banner {
    flex-direction: column;
    gap: 12px;
    padding: 28px 22px;
  }
  .why-banner .wb-part { font-size: 1.12rem; }
  .why-banner .wb-big { font-size: 2.5rem; }
  .why-banner .wb-arrow svg { width: 34px; height: 34px; transform: rotate(90deg); }
}
@media (max-width: 520px) {
  .legend-list { grid-template-columns: 1fr; }
}

/* =========================================================
   実際の駆け付け事例
   ========================================================= */
.cases {
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease);
}
.case-card:hover { transform: translateY(-6px); }
.case-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--alsok-blue), var(--alsok-blue-dark));
}
.case-head .case-ico {
  width: 40px; height: 40px; flex: none;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  display: grid; place-items: center;
}
.case-head .case-ico svg { width: 24px; height: 24px; color: #fff; }
.case-head .case-cat {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
}
.case-body { padding: 22px; }
.case-flow { margin: 0; display: grid; gap: 14px; }
.case-flow .row { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start; }
.case-flow dt {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
  color: #fff;
  white-space: nowrap;
}
.case-flow .row.is-situation dt { background: #8595a2; }
.case-flow .row.is-action dt { background: var(--alsok-blue); }
.case-flow .row.is-result dt { background: var(--accent); }
.case-flow dd { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7; }
.cases .case-disclaimer {
  margin: 30px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: #8595a2;
}
@media (max-width: 880px) {
  .case-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* =========================================================
   料金
   ========================================================= */
.price { background: #fff; }
.subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--alsok-navy);
}
.subhead::before {
  content: "";
  width: 5px; height: 20px;
  border-radius: 3px;
  background: var(--alsok-blue);
}

/* ￥＝基本料金＋出動料金 */
.price-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.pf-item {
  position: relative;
  flex: 1 1 200px;
  max-width: 260px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--shadow-soft);
}
.pf-label {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.pf-value {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--alsok-blue-dark);
  font-variant-numeric: tabular-nums;
}
.pf-value small { font-size: 0.95rem; font-weight: 700; }
.pf-sub { font-size: 0.74rem; color: #8595a2; margin-top: 2px; }
.pf-op {
  align-self: center;
  flex: 0 0 auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: var(--alsok-blue);
}
/* 合計カード（強調） */
.pf-total {
  background: linear-gradient(150deg, var(--alsok-blue), var(--alsok-navy));
  border-color: transparent;
  color: #fff;
}
.pf-total .pf-label { color: rgba(255, 255, 255, 0.85); }
.pf-total .pf-yen {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  color: #fff;
}
/* 出動料金カード */
.pf-visit { border-color: rgba(245, 130, 31, 0.5); }
.pf-visit .pf-value { color: var(--accent-dark); }
.pf-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 4px 13px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(245, 130, 31, 0.55);
}

/* 月1回まで無料バナー */
.free-banner {
  margin: 0 auto 30px;
  max-width: 880px;
  display: flex;
  align-items: center;
  gap: 26px;
  background: linear-gradient(135deg, #fff5ec, #ffffff 74%);
  border: 1px solid rgba(245, 130, 31, 0.38);
  border-radius: var(--radius);
  padding: 26px 34px;
  box-shadow: var(--e1);
}
.fb-headline {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding-right: 26px;
  border-right: 2px dashed rgba(245, 130, 31, 0.4);
}
.fb-small { font-size: 0.82rem; font-weight: 700; color: var(--accent-dark); }
.fb-big {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--alsok-navy);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
}
.fb-big em {
  font-style: normal;
  font-size: 2.5rem;
  color: var(--accent);
  margin-left: 5px;
}
.fb-desc { margin: 0; font-size: 0.96rem; color: var(--ink); line-height: 1.75; }
.fb-emph {
  color: var(--accent-dark);
  font-weight: 900;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

@media (max-width: 720px) {
  .price-formula { flex-direction: column; align-items: stretch; gap: 16px; }
  .pf-item { max-width: none; }
  .pf-op { font-size: 1.7rem; }
}
@media (max-width: 640px) {
  .free-banner { flex-direction: column; text-align: center; gap: 16px; padding: 24px 22px; }
  .fb-headline {
    padding-right: 0;
    padding-bottom: 16px;
    border-right: 0;
    border-bottom: 2px dashed rgba(245, 130, 31, 0.4);
    width: 100%;
  }
}

/* 基本料金テーブル */
.price-block { margin-bottom: 20px; }
.price-block > p { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.92rem; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.price-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  background: #fff;
}
.price-table th,
.price-table td {
  padding: 15px 14px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.price-table tr :last-child { border-right: 0; }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table thead th {
  background: var(--alsok-blue);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.price-table tbody th {
  background: var(--bg-band);
  text-align: left;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}
.price-table tbody td {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--alsok-blue-dark);
  font-variant-numeric: tabular-nums;
}
.price-table tbody td:first-of-type { color: var(--accent-dark); }
.scroll-hint {
  display: none;
  margin: 8px 2px 0;
  font-size: 0.74rem;
  color: #8595a2;
}
@media (max-width: 780px) {
  .scroll-hint { display: block; }
}

.price-notes { margin: 22px 0 0; display: grid; gap: 8px; }
.price-notes p {
  margin: 0;
  font-size: 0.8rem;
  color: #8595a2;
  line-height: 1.7;
}

/* =========================================================
   末尾CTAバンド
   ========================================================= */
.cta-band {
  background:
    radial-gradient(760px 380px at 50% -10%, rgba(0, 91, 172, 0.5), transparent 60%),
    linear-gradient(135deg, var(--dark), #02040f);
  color: #fff;
  text-align: center;
  padding: 84px 0;
}
.cta-band h2 .accent { color: var(--accent); }
.cta-band h2 {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
}
.cta-band p { margin: 0 0 30px; opacity: 0.85; }
.cta-band .hero-cta { justify-content: center; margin-top: 0; }
.cta-band .btn--secondary { --btn-bg: #ffffff; --btn-fg: var(--alsok-navy); }
.cta-band .btn--secondary:hover { --btn-bg: #eaf2fb; }

/* =========================================================
   フッター
   ========================================================= */
.site-footer {
  background: var(--alsok-navy);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  padding: 34px 0;
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { transition: color 0.2s var(--ease); }
.site-footer a:hover { color: #fff; }

/* =========================================================
   レスポンシブ：ファーストビュー
   ========================================================= */
@media (max-width: 900px) {
  .hero > .wrap {
    padding: 54px 0 64px;
    text-align: center;
  }
  .hero-copy { max-width: none; margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-trust { justify-content: center; margin-inline: auto; }
}
@media (max-width: 480px) {
  .btn { flex: 1 1 100%; justify-content: center; }
  .section { padding: 60px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   さまざまなITトラブルに対応
   ========================================================= */
.various { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.various-lead {
  text-align: center;
  max-width: 660px;
  margin: -28px auto 44px;
  color: var(--ink-soft);
}
.various-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.tcat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tcat:hover { transform: translateY(-4px); border-color: rgba(0, 91, 172, 0.35); }
.tcat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--bg-band);
}
.tcat-ico {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--alsok-blue), var(--alsok-blue-dark));
  color: #fff;
  display: grid;
  place-items: center;
}
.tcat-ico svg { width: 24px; height: 24px; }
.tcat-head h3 {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--alsok-navy);
}
.tcat-sub {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 2px;
}
.tcat-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.tcat-list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.tcat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--accent);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23f5821f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-11'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* 部品交換：横幅いっぱい */
.tcat--wide { margin-top: 0; }
.tcat-list--3col { grid-template-columns: repeat(3, 1fr); gap: 9px 28px; }

@media (max-width: 900px) {
  .various-grid { grid-template-columns: repeat(2, 1fr); }
  .tcat-list--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .various-grid { grid-template-columns: 1fr; }
  .tcat-list--3col { grid-template-columns: 1fr; }
  .various-lead { margin-top: -12px; }
}

/* =========================================================
   なぜ駆けつけが必要か（円グラフ）
   ========================================================= */
.whydispatch {
  background:
    radial-gradient(760px 420px at 20% 8%, rgba(0, 91, 172, 0.35), transparent 60%),
    var(--dark);
  color: #dbe6f2;
}
.whydispatch .section-head h2,
.whydispatch .why-body h2 { color: #fff; }
.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.why-chart {
  position: relative;
  background: linear-gradient(160deg, #ffffff, #eef4fb);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  padding: 30px;
  margin: 0;
  box-shadow: var(--e-dark);
}
.why-chart .why-source { color: #6b7a8c; }
.why-chart svg { width: 100%; height: auto; max-width: 360px; margin: 0 auto; }
.why-source { margin: 14px 0 0; font-size: 0.72rem; color: #8ba0b8; line-height: 1.55; }

.why-body h2 { margin: 0; }
.why-lead { margin: 16px 0 24px; color: #aebfd2; }
.why-lead strong { color: #fff; }

.legend-group { margin-bottom: 18px; }
.legend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.legend-head .lg-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
}
.legend-head .lg-sum {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.02rem;
  white-space: nowrap;
}
.legend-group.is-dispatch .lg-title { color: #fff; }
.legend-group.is-dispatch .lg-sum { color: #6cb0f0; }
.legend-group.is-remote .lg-title { color: #ffffff; }
.legend-group.is-remote .lg-sum { color: #ff9a4d; }

.legend-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
.legend-group.is-remote .legend-list { grid-template-columns: 1fr; }
.legend-group.is-remote .lg-label { color: #e0b48a; }
.legend-group.is-remote .lg-pct { color: #ffffff; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 3px 0;
}
.legend-item .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.legend-item .lg-label { flex: 1 1 auto; color: #c4d2e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-item .lg-pct { font-weight: 700; color: #eef3fa; font-variant-numeric: tabular-nums; }

/* 結論バナー（センタリング・強調） */
.why-banner {
  margin: 52px auto 0;
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  padding: 32px 46px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #ffffff, #eef4fb);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--e-dark);
}
.why-banner .wb-part {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--alsok-navy);
}
.why-banner .wb-big {
  display: inline-block;
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--alsok-blue);
  margin: 0 6px;
  vertical-align: -8px;
}
.why-banner .wb-brand { color: var(--alsok-blue); font-weight: 900; }
.why-banner .wb-osusume {
  position: relative;
  color: #b35507;
  font-weight: 900;
  white-space: nowrap;
}
.why-banner .wb-osusume::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  height: 9px;
  z-index: -1;
  background: rgba(245, 130, 31, 0.3);
  border-radius: 4px;
}
.why-banner .wb-arrow { flex: none; display: inline-flex; }
.why-banner .wb-arrow svg { width: 42px; height: 42px; color: var(--accent); }
.wb-brk { display: none; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-chart { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .why-banner {
    flex-direction: column;
    gap: 12px;
    padding: 28px 22px;
  }
  .why-banner .wb-part { font-size: 1.12rem; }
  .why-banner .wb-big { font-size: 2.5rem; }
  .why-banner .wb-arrow svg { width: 34px; height: 34px; transform: rotate(90deg); }
}
@media (max-width: 520px) {
  .legend-list { grid-template-columns: 1fr; }
}

/* =========================================================
   実際の駆け付け事例
   ========================================================= */
.cases {
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease);
}
.case-card:hover { transform: translateY(-6px); }
.case-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--alsok-blue), var(--alsok-blue-dark));
}
.case-head .case-ico {
  width: 40px; height: 40px; flex: none;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  display: grid; place-items: center;
}
.case-head .case-ico svg { width: 24px; height: 24px; color: #fff; }
.case-head .case-cat {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
}
.case-body { padding: 22px; }
.case-flow { margin: 0; display: grid; gap: 14px; }
.case-flow .row { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start; }
.case-flow dt {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
  color: #fff;
  white-space: nowrap;
}
.case-flow .row.is-situation dt { background: #8595a2; }
.case-flow .row.is-action dt { background: var(--alsok-blue); }
.case-flow .row.is-result dt { background: var(--accent); }
.case-flow dd { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7; }
.cases .case-disclaimer {
  margin: 30px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: #8595a2;
}
@media (max-width: 880px) {
  .case-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* =========================================================
   料金
   ========================================================= */
.price { background: #fff; }
.subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--alsok-navy);
}
.subhead::before {
  content: "";
  width: 5px; height: 20px;
  border-radius: 3px;
  background: var(--alsok-blue);
}

/* ￥＝基本料金＋出動料金 */
.price-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.pf-item {
  position: relative;
  flex: 1 1 200px;
  max-width: 260px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--shadow-soft);
}
.pf-label {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.pf-value {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--alsok-blue-dark);
  font-variant-numeric: tabular-nums;
}
.pf-value small { font-size: 0.95rem; font-weight: 700; }
.pf-sub { font-size: 0.74rem; color: #8595a2; margin-top: 2px; }
.pf-op {
  align-self: center;
  flex: 0 0 auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: var(--alsok-blue);
}
/* 合計カード（強調） */
.pf-total {
  background: linear-gradient(150deg, var(--alsok-blue), var(--alsok-navy));
  border-color: transparent;
  color: #fff;
}
.pf-total .pf-label { color: rgba(255, 255, 255, 0.85); }
.pf-total .pf-yen {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  color: #fff;
}
/* 出動料金カード */
.pf-visit { border-color: rgba(245, 130, 31, 0.5); }
.pf-visit .pf-value { color: var(--accent-dark); }
.pf-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 4px 13px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(245, 130, 31, 0.55);
}

/* 月1回まで無料バナー */
.free-banner {
  margin: 0 auto 30px;
  max-width: 880px;
  display: flex;
  align-items: center;
  gap: 26px;
  background: linear-gradient(135deg, #fff5ec, #ffffff 74%);
  border: 1px solid rgba(245, 130, 31, 0.38);
  border-radius: var(--radius);
  padding: 26px 34px;
  box-shadow: var(--e1);
}
.fb-headline {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding-right: 26px;
  border-right: 2px dashed rgba(245, 130, 31, 0.4);
}
.fb-small { font-size: 0.82rem; font-weight: 700; color: var(--accent-dark); }
.fb-big {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--alsok-navy);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
}
.fb-big em {
  font-style: normal;
  font-size: 2.5rem;
  color: var(--accent);
  margin-left: 5px;
}
.fb-desc { margin: 0; font-size: 0.96rem; color: var(--ink); line-height: 1.75; }
.fb-emph {
  color: var(--accent-dark);
  font-weight: 900;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

@media (max-width: 720px) {
  .price-formula { flex-direction: column; align-items: stretch; gap: 16px; }
  .pf-item { max-width: none; }
  .pf-op { font-size: 1.7rem; }
}
@media (max-width: 640px) {
  .free-banner { flex-direction: column; text-align: center; gap: 16px; padding: 24px 22px; }
  .fb-headline {
    padding-right: 0;
    padding-bottom: 16px;
    border-right: 0;
    border-bottom: 2px dashed rgba(245, 130, 31, 0.4);
    width: 100%;
  }
}

/* 基本料金テーブル */
.price-block { margin-bottom: 20px; }
.price-block > p { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.92rem; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.price-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  background: #fff;
}
.price-table th,
.price-table td {
  padding: 15px 14px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.price-table tr :last-child { border-right: 0; }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table thead th {
  background: var(--alsok-blue);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.price-table tbody th {
  background: var(--bg-band);
  text-align: left;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}
.price-table tbody td {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--alsok-blue-dark);
  font-variant-numeric: tabular-nums;
}
.price-table tbody td:first-of-type { color: var(--accent-dark); }
.scroll-hint {
  display: none;
  margin: 8px 2px 0;
  font-size: 0.74rem;
  color: #8595a2;
}
@media (max-width: 780px) {
  .scroll-hint { display: block; }
}

.price-notes { margin: 22px 0 0; display: grid; gap: 8px; }
.price-notes p {
  margin: 0;
  font-size: 0.8rem;
  color: #8595a2;
  line-height: 1.7;
}

/* =========================================================
   末尾CTAバンド
   ========================================================= */
.cta-band {
  background:
    radial-gradient(760px 380px at 50% -10%, rgba(0, 91, 172, 0.5), transparent 60%),
    linear-gradient(135deg, var(--dark), #02040f);
  color: #fff;
  text-align: center;
  padding: 84px 0;
}
.cta-band h2 .accent { color: var(--accent); }
.cta-band h2 {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
}
.cta-band p { margin: 0 0 30px; opacity: 0.85; }
.cta-band .hero-cta { justify-content: center; margin-top: 0; }
.cta-band .btn--secondary { --btn-bg: #ffffff; --btn-fg: var(--alsok-navy); }
.cta-band .btn--secondary:hover { --btn-bg: #eaf2fb; }

/* =========================================================
   フッター
   ========================================================= */
.site-footer {
  background: var(--alsok-navy);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  padding: 34px 0;
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { transition: color 0.2s var(--ease); }
.site-footer a:hover { color: #fff; }

/* =========================================================
   レスポンシブ：ファーストビュー
   ========================================================= */
@media (max-width: 900px) {
  .hero > .wrap {
    padding: 54px 0 64px;
    text-align: center;
  }
  .hero-copy { max-width: none; margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-trust { justify-content: center; margin-inline: auto; }
}
@media (max-width: 480px) {
  .btn { flex: 1 1 100%; justify-content: center; }
  .section { padding: 60px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   サービスフロー概要図（できること内）
   ========================================================= */
/* =========================================================
   サービス概要図（画像）
   ========================================================= */
.flow {
  margin: 56px auto 0;
  max-width: 900px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--e1);
}
.flow img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 6px);
}

/* =========================================================
   REFINEMENT LAYER — 一貫したエレベーション・余白・ディテール
   （ファイル末尾に配置し、全体のトーンを最終調整）
   ========================================================= */

/* --- カードの統一エレベーション：静止=e1／ホバー=e2＋わずかな浮上 --- */
.trouble,
.feature,
.case-card,
.qa-item,
.pf-item,
.tcat {
  box-shadow: var(--e1);
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease),
    border-color 0.32s var(--ease), background 0.32s var(--ease);
}
.trouble:hover,
.feature:hover,
.case-card:hover,
.tcat:hover {
  transform: translateY(-4px);
  box-shadow: var(--e2);
}
.pain-card { box-shadow: var(--e-dark); }
.pain-card:hover { transform: translateY(-4px); }

/* --- 見出しの装飾線：グラデーション → 単色の細いルール（静かに） --- */
.section-head h2::before {
  width: 32px;
  height: 3px;
  background: var(--alsok-blue);
  border-radius: 2px;
}
/* 反転バンド上ではアクセントで抜く */
.pains .section-head h2::before,
.whydispatch .section-head h2::before { background: var(--accent); }

/* --- アイコン枠の角丸を新スケールに統一（14pxカードと調和） --- */
.trouble .ico-frame,
.feature .f-ico { border-radius: var(--radius-sm); }

/* --- ボタンの角丸を新スケールへ（カードよりわずかに締める） --- */
.btn { border-radius: var(--radius-sm); }

/* --- セクション見出しと本文の“間”をやや広げて上質に --- */
.section-head { margin-bottom: clamp(48px, 5vw, 68px); }

/* --- 罫線を一段細く見せる（ヘアライン感） --- */
.site-header { border-bottom-color: rgba(4, 41, 77, 0.1); }

/* =========================================================
   概要セクション
   ========================================================= */
.overview { background: var(--bg-tint); border-top: 1px solid var(--line); }
.overview .flow { margin-top: 0; }

/* =========================================================
   H2は画面幅に応じてフォントサイズを変え、改行させない
   ========================================================= */
.section-head h2,
.why-body h2 {
  white-space: nowrap;
  font-size: clamp(0.9rem, 3.8vw, 2rem);
}
/* 駆けつけの有効性の見出しは狭いカラム内のため、上限をさらに抑える */
.why-body h2 { font-size: clamp(0.9rem, 3.4vw, 1.95rem); }

/* =========================================================
   CTAボタン：白ボタン定義＋2ボタンの等幅化
   ========================================================= */
/* お問い合わせ＝白ボタン（明るい背景・濃紺帯どちらでも視認できるよう枠線付き） */
.btn--white {
  --btn-bg: #ffffff;
  --btn-fg: var(--alsok-navy);
  border: 1px solid var(--line);
}
.btn--white:hover { --btn-bg: var(--bg-tint); }
/* 濃紺帯（末尾CTA）の上では枠線を控えめに */
.cta-band .btn--white { border-color: rgba(255, 255, 255, 0.5); }
.cta-band .btn--white:hover { --btn-bg: #eaf2fb; }

/* 2ボタン並びは左右均等・同一サイズに */
.hero-cta:not(.hero-cta--single) {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-cta:not(.hero-cta--single) .btn {
  flex: 1 1 0;
  max-width: 300px;
  min-width: 240px;
  justify-content: center;
}
/* mid-cta / cta-band は中央寄せなので、2ボタンの塊を中央に */
.mid-cta .hero-cta:not(.hero-cta--single),
.cta-band .hero-cta:not(.hero-cta--single) { justify-content: center; }

/* スマホでは縦積みで全幅（等幅を維持） */
@media (max-width: 560px) {
  .hero-cta:not(.hero-cta--single) .btn { flex: 1 1 100%; max-width: none; min-width: 0; }
}

/* =========================================================
   概要の注意事項・料金の別途費用注記
   ========================================================= */
.overview-notes {
  max-width: 900px;
  margin: 22px auto 0;
  display: grid;
  gap: 6px;
}
.overview-notes p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* 基本料金表の下：別途費用となる作業（枠なし・控えめ） */
.price-extra {
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
}
.price-extra > p {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink-soft);
}
.price-extra ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.price-extra li {
  position: relative;
  padding-left: 16px;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #7c8595;
}
.price-extra li::before {
  content: "・";
  position: absolute;
  left: 2px;
  top: 0;
  color: #7c8595;
}

/* =========================================================
   フッター：プライバシーマークアイコン
   ========================================================= */
.site-footer nav { align-items: center; }
.footer-pmark {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
.footer-pmark img {
  display: block;
  height: 75px;
  width: auto;
  border-radius: 4px;
}
.footer-pmark:hover { opacity: 0.85; }

/* =========================================================
   末尾CTA：背景画像＋濃色オーバーレイ（白文字の視認性確保）
   ========================================================= */
.cta-band {
  position: relative;
  background:
    linear-gradient(135deg, rgba(4, 20, 44, 0.62), rgba(2, 8, 26, 0.55)),
    radial-gradient(760px 380px at 50% -10%, rgba(0, 91, 172, 0.3), transparent 60%),
    url("cta_back.webp") center center / cover no-repeat;
  background-attachment: fixed, fixed, fixed;
}

/* =========================================================
   お悩みセクション：背景画像＋オーバーレイ0.5（固定）
   ========================================================= */
.pains {
  position: relative;
  background:
    linear-gradient(160deg, rgba(15, 41, 82, 0.8), rgba(10, 25, 55, 0.8)),
    url("stop.webp") center center / cover no-repeat;
  background-attachment: fixed, fixed;
}
/* 明るい背景でも白見出しが読めるよう、見出しにわずかな影を付与 */
.pains .section-head h2 { text-shadow: 0 2px 14px rgba(4, 20, 44, 0.55); }

/* =========================================================
   ヘッダーのブランド：ロゴとサービス名を個別リンクに
   ========================================================= */
.brand .brand-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.brand a.brand-name {
  color: var(--alsok-navy);
  text-decoration: none;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.brand a.brand-name:hover { color: var(--alsok-blue); }
.brand .brand-logo-link:hover { opacity: 0.85; }

/* =========================================================
   結論バナー：改行位置と「約7割」サイズ調整
   ========================================================= */
/* 「駆けつけが有効なトラブル」の前で改行 */
.why-banner .wb-brk { display: inline; }
.why-banner .wb-fact { line-height: 1.5; }
/* 「約7割」を少し小さく */
.why-banner .wb-big {
  font-size: 2.4rem;
  vertical-align: -5px;
}
@media (max-width: 640px) {
  .why-banner .wb-big { font-size: 2rem; }
}

/* =========================================================
   結論バナー：「駆けつけが有効」を強調（色・サイズ）
   ========================================================= */
.why-banner .wb-emph {
  position: relative;
  color: #c25e08;
  font-weight: 900;
  font-size: 1.14em;
}
.why-banner .wb-emph::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 1px;
  height: 7px;
  background: rgba(245, 130, 31, 0.28);
  z-index: -1;
  border-radius: 3px;
}

/* =========================================================
   資料請求ボタン（btn--doc）：1分簡単バッジ＋右丸矢印
   ========================================================= */
/* テキストを左右いっぱいに使い、矢印を右端に寄せる */
.btn--doc { gap: 10px; justify-content: flex-start; }
.btn--doc .btn-lines { flex: 1 1 auto; }

/* 左：丸みを帯びた白抜き四角の中に「1分簡単」（白塗り＋文字はボタン色） */
.btn--doc .btn-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 7px;
  background: #fff;
  border-radius: 8px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 0.62rem;
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--btn-bg);
  white-space: nowrap;
}

/* 右：丸の中に「>」マーク */
.btn--doc .btn-arrow {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.btn--doc .btn-arrow svg { width: 15px; height: 15px; color: #fff; }
.btn--doc:hover .btn-arrow { background: rgba(255, 255, 255, 0.32); }

/* ヒーローの単独ボタンは中央寄せ運用のため、内部は左詰め維持 */
.hero-cta--single .btn--doc { justify-content: flex-start; }

/* 資料請求ボタン：サブテキストを1行に収めてボタン高さを維持 */
.btn--doc .btn-sub {
  white-space: nowrap;
  font-size: 0.58rem;
  letter-spacing: 0.01em;
}
.btn--doc .btn-badge { padding: 3px 6px; font-size: 0.58rem; }
.btn--doc { gap: 8px; }

/* =========================================================
   資料請求ボタン：テキスト中央揃え・余白縮小・文字拡大
   ========================================================= */
/* 余白を少し小さく */
.btn--doc { padding: 13px 20px; gap: 10px; }
/* テキスト（資料請求をする／サブ）を中央揃え */
.btn--doc .btn-lines { align-items: center; text-align: center; }
/* メインテキストを少し大きく */
.btn--doc .btn-lines { font-size: 1.1rem; }
/* サブテキストを少し大きく（1行維持） */
.btn--doc .btn-sub { font-size: 0.66rem; letter-spacing: 0; }
/* 「1分簡単」バッジを少し大きく */
.btn--doc .btn-badge { font-size: 0.66rem; padding: 4px 7px; }
/* 右の丸矢印も気持ち大きく */
.btn--doc .btn-arrow { width: 28px; height: 28px; }
.btn--doc .btn-arrow svg { width: 16px; height: 16px; }

/* =========================================================
   資料請求ボタン：文字をさらに拡大・バッジを正方形に
   ========================================================= */
/* メイン・サブ・バッジをさらに大きく */
.btn--doc .btn-lines { font-size: 1.22rem; }
.btn--doc .btn-sub { font-size: 0.72rem; }
.btn--doc .btn-badge {
  font-size: 0.72rem;
  /* 縦横比を1:1（正方形）に */
  width: 46px;
  height: 46px;
  padding: 0;
  aspect-ratio: 1 / 1;
}

/* =========================================================
   結論バナー右側：ALSOK ITレスキューを大きく／断然おすすめを強調色に
   ========================================================= */
/* 「ALSOK ITレスキュー」を「約7割」と同じサイズに */
.why-banner .wb-brand {
  font-size: 2.4rem;
  line-height: 1.1;
  vertical-align: -5px;
  white-space: nowrap;
}
/* 「断然おすすめ」を「駆けつけが有効」と同じ色・サイズに */
.why-banner .wb-osusume {
  color: #c25e08;
  font-size: 1.14em;
  font-weight: 900;
}
.why-banner .wb-reco { line-height: 1.5; }
@media (max-width: 640px) {
  .why-banner .wb-brand { font-size: 2rem; }
}

/* =========================================================
   結論バナー：「約7割」「ALSOK ITレスキュー」を少し小さく
   ========================================================= */
.why-banner .wb-big { font-size: 2rem; }
.why-banner .wb-brand { font-size: 2rem; }
@media (max-width: 640px) {
  .why-banner .wb-big { font-size: 1.7rem; }
  .why-banner .wb-brand { font-size: 1.7rem; }
}

/* =========================================================
   結論バナー：横幅に応じて常に2行に収める
   ========================================================= */
/* 横並び時に各サイドが狭くて3行化するのを防ぐため、900px以下で縦積みに */
@media (max-width: 900px) {
  .why-banner {
    flex-direction: column;
    gap: 12px;
    padding: 28px 22px;
  }
  .why-banner .wb-arrow svg { transform: rotate(90deg); }
}
/* 「約7割」「ALSOK ITレスキュー」を画面幅に応じて縮小（狭い画面でも1行を維持） */
.why-banner .wb-big,
.why-banner .wb-brand {
  font-size: clamp(1.4rem, 4.6vw, 2rem);
}
/* 極小画面では大文字をさらに縮小して2行を維持 */
@media (max-width: 400px) {
  .why-banner .wb-big,
  .why-banner .wb-brand { font-size: 1.28rem; }
}
@media (max-width: 360px) {
  .why-banner .wb-big,
  .why-banner .wb-brand { font-size: 1.12rem; }
}
@media (max-width: 345px) {
  .why-banner .wb-part { font-size: 0.98rem; }
  .why-banner .wb-big,
  .why-banner .wb-brand { font-size: 1rem; }
}

/* =========================================================
   ヘッダーのサービス名：改行は「ALSOK」/「ITレスキュー」の間のみ
   ========================================================= */
.brand-name .bn-a,
.brand-name .bn-b { white-space: nowrap; }
/* 2行になった際も左揃え・行間を詰める */
.brand-name { line-height: 1.25; }

/* =========================================================
   モバイル：ヘッダーのサービス名を「ALSOK」／「ITレスキュー」の2行に
   ========================================================= */
@media (max-width: 860px) {
  .brand a.brand-name {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.14;
    padding-left: 10px;
    font-size: 0.8rem;
  }
  .brand a.brand-name::before { top: 0; height: 100%; transform: none; }
  .brand-name .bn-a,
  .brand-name .bn-b { display: block; white-space: nowrap; }
}

/* モバイル：2行社名を入れる余白確保（ロゴ縮小・CTA折り返し防止） */
@media (max-width: 860px) {
  .header-cta--mobile { white-space: nowrap; }
}
@media (max-width: 600px) {
  .brand .brand-logo { height: 30px; }
  .brand a.brand-name { font-size: 0.78rem; padding-left: 9px; }
  .header-actions { gap: 8px; }
}