/*
  sections.css
  各セクション固有の調整のみ。汎用コンポーネントはcomponents.cssを参照。
  背景色・各コンポーネントの仕様はデザイン定義の確定値。
*/

/* =========================================================
   1. demo-bar
   ========================================================= */

.demobar {
  position: static; /* 追従させない */
  height: var(--demobar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-green-deep);
  color: var(--c-bg);
  font-size: 0.75rem; /* 12px */
}

@media (min-width: 900px) {
  .demobar {
    font-size: 0.8125rem; /* 13px */
  }
}

.demobar__text {
  /* ：.demobarの色（--c-bg）をそのまま継承する。個別の色指定は持たない */
  color: inherit;
}

/* =========================================================
   2. header
   ========================================================= */

.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--hdr-height);
  background: var(--c-green);
}

.hdr__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.hdr__brand {
  min-width: 0; /* flexアイテムの既定min-width:autoを解除し、省略表示を機能させる */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--c-bg);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 1rem; /* 16px */
  letter-spacing: 0.02em;
}

@media (min-width: 900px) {
  .hdr__brand {
    font-size: 1.125rem; /* 18px */
  }
}

.hdr__toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-bg);
  flex-shrink: 0;
}

.hdr__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--c-green-deep);
  padding: var(--sp-3);
}

.hdr__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3); /* 16px */
}

.hdr__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap; /* 4文字ラベルが行間で折り返し、ヘッダー高を超過するのを防ぐ */
  color: var(--c-bg);
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hdr__nav-link {
    transition: color var(--dur-fast) ease;
  }
}

.hdr__nav-link:hover {
  color: var(--c-bg-dim);
}

@media (min-width: 900px) {
  .hdr__nav {
    position: static;
    z-index: auto;
    background: transparent;
    padding: 0;
  }

  /* UAの[hidden]{display:none}（詳細度0-1-0）より高い詳細度（0-2-0）で上書きする。!importantは使わない */
  .hdr__nav[hidden] {
    display: flex;
  }

  .hdr__nav-list {
    flex-direction: row;
    gap: var(--sp-4); /* 24px */
  }

  .hdr__nav-link {
    min-height: auto;
  }
}

/*
  headerの電話ボタン。
  headerはの規定によりis-on-darkを持たないため、is-on-dark面の配色を個別に適用する。
*/
.hdr__phone {
  background: var(--c-surface);
  color: var(--c-green);
  border-color: var(--c-surface);
}

.hdr__phone:hover,
.hdr__phone:active {
  background: var(--c-bg-dim);
  color: var(--c-green); /* 文字色を明示（2026-09-08 修正） */
  border-color: var(--c-bg-dim);
}

/* =========================================================
   3. hero
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* テキストを下寄せにする */
  /*
    高さの決め方（2026-09-08 修正）
      下限 480px … 横向きの低い画面でも文字とCTAが収まる高さ
      上限 720px … 画面が縦に長い端末（タブレット 768×1024 など）で、
                    写真の上半分が空白になるのを防ぐ
      それ以外は画面いっぱい（demo-bar と header の高さを差し引く）
  */
  min-height: calc(100vh - var(--offset-top)); /* フォールバック */
  min-height: max(min(calc(100dvh - var(--offset-top)), 720px), 480px);
  background: var(--c-green-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
  background-color: var(--c-green-deep); /* 画像未配置時のフォールバック */
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 64, 42, 0.75), rgba(20, 64, 42, 0.35) 60%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--sp-3); /* 48px 16px */
  /* 全画面写真の上に置くため、テキストとCTAを中央に揃える（2026-09-08 修正）。
     左寄せだと 900px 以上でCTAが左に偏り、右側に大きな余白ができていた。 */
  text-align: center;
}

@media (min-width: 900px) {
  .hero__content {
    padding: var(--sp-8) var(--sp-5); /* 96px 32px */
  }
}

.hero__title {
  color: var(--c-bg);
}

.hero__lead {
  margin-top: var(--sp-2); /* 8px */
  color: var(--c-bg-dim);
}

.hero__cta-group {
  margin-top: var(--sp-5); /* 32px */
  display: flex;
  flex-direction: column;
  gap: var(--sp-3); /* 16px */
  align-items: stretch;
}

@media (min-width: 900px) {
  .hero__cta-group {
    flex-direction: row;
    gap: var(--sp-4); /* 24px */
    justify-content: center; /* 中央寄せ（2026-09-08 修正） */
    align-items: center;
  }

  /* 2本のボタンの幅を揃え、中央のまとまりを作る */
  .hero__cta-group .btn {
    min-width: 260px;
  }
}

.hero__sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* =========================================================
   4. permit-badge
   ========================================================= */

.permitbadge {
  background: var(--c-green-soft);
  padding: var(--sp-3) 0; /* 16px 0（左右はu-containerが担う） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2); /* 8px */
}

@media (min-width: 900px) {
  .permitbadge {
    padding: var(--sp-4) 0; /* 24px 0 */
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-4); /* 24px */
  }
}

.permitbadge__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3); /* 16px */
}

.permitbadge__text {
  /* ：本文仕様のみ。色・サイズはbodyの既定値を継承する */
  color: inherit;
}

/* =========================================================
   5. services
   ========================================================= */

.services {
  background: var(--c-bg);
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3); /* 16px */
}

@media (min-width: 900px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4); /* 24px */
  }
}

/* =========================================================
   6. items
   ========================================================= */

.items {
  background: var(--c-bg-dim);
}

.items__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3); /* 16px */
}

@media (min-width: 600px) {
  .items__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .items__grid {
    gap: var(--sp-4); /* 24px */
  }
}

@media (min-width: 1200px) {
  .items__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.items__caption {
  margin-top: var(--sp-3); /* 16px */
  color: var(--c-text-muted);
  font-size: 0.8125rem; /* 13px */
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* =========================================================
   7. reasons
   ========================================================= */

.reasons {
  background: var(--c-bg);
}

.reasons__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3); /* 16px */
}

@media (min-width: 900px) {
  .reasons__grid {
    grid-template-columns: repeat(2, 1fr); /* 2×2 */
    gap: var(--sp-4); /* 24px */
  }
}

/* =========================================================
   8. flow
   ========================================================= */

.flow {
  background: var(--c-bg-dim);
}

.flow__list {
  margin-top: var(--sp-3); /* noteとの間隔 */
  display: flex;
  flex-direction: column;
  gap: var(--sp-4); /* 24px */
}

@media (min-width: 900px) {
  .flow__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-4); /* 24px */
  }
}

.flow__step {
  position: relative;
}

/*
  各ステップを中央揃えにする（2026-09-08 修正）。
  番号・見出し・本文を中央に揃えることで、横並びのステッパーとして視認しやすくなる。
*/
.flow__step {
  text-align: center;
}

@media (min-width: 900px) {
  .flow__step::before {
    content: "";
    position: absolute;
    top: 20px; /* .flow__number（40px）の中央 */
    /* グリッドの gap（24px）ぶん両側に伸ばし、ステップ間で線が途切れないようにする
       （2026-09-08 修正） */
    left: calc(var(--sp-4) / -2);
    right: calc(var(--sp-4) / -2);
    height: 1px;
    background: var(--c-line);
    z-index: 0;
  }

  /*
    最初のステップは左半分に線を引かない。最後のステップは右半分に線を引かない。
    こうしないと、1番の左と4番の右に行き止まりの線がはみ出す（2026-09-08 修正）。
  */
  .flow__step:first-child::before {
    left: 50%;
  }

  .flow__step:last-child::before {
    right: 50%;
  }

  /* ステップが1つしかない場合は線を引かない（保険） */
  .flow__step:only-child::before {
    content: none;
  }
}

.flow__number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto; /* 中央揃え（2026-09-08 修正） */
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--c-green);
  color: var(--c-surface);
  font-weight: var(--fw-bold);
  font-size: 1.125rem; /* 18px */
}

.flow__title {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-3); /* 16px */
}

.flow__text {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-2); /* 8px */
}

/* =========================================================
   9. area
   ========================================================= */

.area {
  background: var(--c-bg);
}

.area-table {
  margin-top: var(--sp-3); /* section-headingとの間隔 */
}

.area-table__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2); /* 8px */
  padding: var(--sp-3) 0; /* 16px 0 */
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 900px) {
  .area-table__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--sp-4); /* 24px */
    padding: var(--sp-4) 0; /* 24px 0 */
  }
}

.area-table__value {
  /* ：本文仕様のみ。色・サイズはbodyの既定値を継承する */
  color: var(--c-text);
}

.area-table__label {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 1rem; /* 16px。h4スケール */
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

@media (min-width: 900px) {
  .area-table__label {
    font-size: 1.125rem; /* 18px */
  }
}

/* =========================================================
   10. company
   ========================================================= */

/*
  背景は淡い緑（--c-green-soft）。
  直前のareaが--c-bg、直後のcontactが--c-bg-dimのため、交互配色を保つ役割を持つ。
  かつ、permit-badgeと同じ面色にすることで「許可の情報が置かれている面」を視覚的に揃える。
  （2026-09-09：permitsセクションを廃止し、許可情報をこの表へ統合した際に変更）
*/
.company {
  background: var(--c-green-soft);
}

.company__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5); /* 32px */
}

@media (min-width: 900px) {
  .company__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6); /* 48px */
  }
}

.company__info-row {
  display: flex;
  gap: var(--sp-3); /* 16px */
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}

/*
  keep-allで語中の折り返しを止め、改行位置はHTML側の<wbr>だけに限定する。
  これで「一般廃棄物／収集運搬業」のように意味の切れ目で改行できるため、
  幅は96pxのまま（5文字が1行に収まる）でよく、右側のddを狭めずに済む。
  ※auto-phraseは複合名詞の内部に文節境界を見つけられず「一般廃棄物収／集運搬業」と割れるため使わない。
*/
.company__info-row dt {
  flex-shrink: 0;
  word-break: keep-all;
  width: 96px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 1rem; /* 16px。h4スケール。見出し要素ではない */
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

@media (min-width: 900px) {
  .company__info-row dt {
    width: 120px;
    font-size: 1.125rem; /* 18px */
  }
}

.company__info-row dd {
  flex: 1;
}

/*
  会社情報テーブル直下の`.note`は他セクション同様margin-top:8pxのままとする
  。
*/

.company__map {
  /* 地図の枠。詳細な指定は本ファイル末尾の「会社概要の地図」を参照 */
}

/* =========================================================
   11. contact
   ========================================================= */

.contact {
  background: var(--c-bg-dim);
}

/* =========================================================
   12. footer
   ========================================================= */

.ftr {
  background: var(--c-green-deep);
  color: var(--c-bg-dim);
}

.ftr__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2); /* 8px */
}

.ftr__list-item a {
  white-space: nowrap;
}

.ftr__notice {
  margin-top: 0;
}

@media (min-width: 900px) {
  .ftr__notice {
    margin-top: 0;
  }
}

/* =========================================================
   13. cta-bar
   ========================================================= */

.ctabar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-cta-bar);
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: var(--c-green-deep);
  box-shadow: var(--shadow-ctabar);
  transform: translateY(100%);
}

.ctabar.is-active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .ctabar {
    transition: transform 300ms ease-out;
  }
}

.ctabar .btn {
  flex: 1 1 50%;
  height: 100%;
  border-radius: 0;
}

@media (min-width: 900px) {
  .ctabar {
    display: none;
  }
}

/* =========================================================
   14. 404ページ
   ========================================================= */

.error404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-7) var(--sp-3); /* 64px 16px */
  background: var(--c-bg);
}

@media (min-width: 900px) {
  .error404 {
    padding: var(--sp-8) var(--sp-5); /* 96px 32px */
  }
}

.error404__title {
  color: var(--c-green);
}

.error404__text {
  margin-top: var(--sp-3); /* 16px */
  color: var(--c-text);
}

.error404__link {
  margin-top: var(--sp-5); /* 32px */
}


/* =========================================================
   会社概要の地図（2026-09-08 変更）
   写真を廃止し、Googleマップを常時表示する。
   ファサード方式（クリックで読み込む）は依頼により取りやめた。
   ========================================================= */

.company__map {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-bg-dim); /* 読み込み中の下地 */
}

@media (min-width: 900px) {
  .company__map {
    aspect-ratio: 3 / 2;
  }
}

.company__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.company__map + .note {
  margin-top: var(--sp-2); /* 8px */
}

/* =========================================================
   フッターの「ページの先頭へ戻る」（2026-09-08 追加）
   ========================================================= */

.ftr__top {
  display: inline-flex;
  margin-top: var(--sp-5); /* 32px */
  min-width: 240px;
}


/* =========================================================
   2026-09-08 の調整
   ========================================================= */

/* 社名をやや大きくする（依頼による） */
.hdr__brand {
  font-size: 1rem; /* 16px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .hdr__brand {
    font-size: 1.125rem; /* 18px */
  }
}

.note + .note,
.items__caption + .items__caption,
.items__caption + .note {
  margin-top: var(--sp-2); /* 8px */
}


/* =========================================================
   2026-09-08 の調整（第2回）
   ========================================================= */

/* --- ヘッダー：PCでの並びを整理する --- */
@media (min-width: 900px) {
  .hdr__inner {
    gap: var(--sp-4); /* 24px */
  }

  /*
    社名は省略させない（2026-09-08 修正）。
    flex の既定では社名が縮んで「カインドリーセンタ…」と省略されていた。
    縮めるのはナビ側にする。
  */
  .hdr__brand {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
  }

  /* ナビを右寄せにし、社名との間に余白を作る */
  .hdr__nav {
    margin-left: auto;
    min-width: 0;
  }

  .hdr__nav-list {
    gap: var(--sp-4); /* 24px */
  }

  .hdr__nav-link {
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.02em;
  }

  /* 電話ボタンを小ぶりにする（依頼による。枠が大きすぎたため） */
  .hdr__phone {
    min-height: 40px;
    padding: 0 var(--sp-3); /* 上下0・左右16px */
    font-size: 0.875rem; /* 14px */
    border-width: 1px;
    flex-shrink: 0;
  }

  .hdr__phone .btn__icon {
    width: 18px;
    height: 18px;
  }
}

/* --- 許可バッジ帯：案内文を中央に --- */
.permitbadge__text {
  text-align: center;
}

/* --- フッター：幅に応じて1→2→3カラム。縦に伸びすぎるのを防ぐ --- */
.ftr__grid {
  display: grid;
  gap: var(--sp-5); /* 32px */
}

/* タブレット（iPad Air 820px など）で1カラムのまま縦長になるのを防ぐ。
   会社情報＋サイト内のご案内を左、許可・登録を右に置く2カラムにする。 */
@media (min-width: 600px) {
  .ftr__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5) var(--sp-6);
  }
}

@media (min-width: 900px) {
  .ftr__grid {
    grid-template-columns: 1.4fr 1fr 1.6fr;
    gap: var(--sp-6);
  }
}

/* SPではフッター内の余白を詰める */
@media (max-width: 599px) {
  .ftr__list {
    gap: var(--sp-1); /* 4px */
  }

  .ftr__brand {
    margin-bottom: var(--sp-2); /* 8px */
  }

  .ftr__col-title {
    margin-bottom: var(--sp-2); /* 8px */
  }

  .ftr__bottom {
    margin-top: var(--sp-5); /* 32px */
    padding-top: var(--sp-4); /* 24px */
  }
}

.ftr__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--sp-3); /* 16px */
  line-height: 1.3;
}

.ftr__brand-prefix {
  font-size: 0.75rem; /* 12px */
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.ftr__brand-name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 1.125rem; /* 18px */
  letter-spacing: 0.02em;
  color: var(--c-bg);
}

.ftr__col-title {
  margin-bottom: var(--sp-3); /* 16px */
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: var(--fw-bold);
  font-size: 0.9375rem; /* 15px */
  letter-spacing: 0.04em;
  color: var(--c-bg);
}

.ftr__bottom {
  margin-top: var(--sp-7); /* 64px */
  padding-top: var(--sp-5); /* 32px */
  border-top: 1px solid rgba(247, 245, 240, 0.25);
  text-align: center;
}

.ftr__top {
  margin-inline: auto;
}


/* 1200px 以上はナビの間隔を広げて余裕を持たせる */
@media (min-width: 1200px) {
  .hdr__inner {
    gap: var(--sp-6); /* 48px */
  }

  .hdr__nav-list {
    gap: var(--sp-5); /* 32px */
  }

  .hdr__nav-link {
    font-size: 0.9375rem; /* 15px */
  }
}


/* =========================================================
   2026-09-08 SP表示の調整
   ========================================================= */

/* --- 1. 社名を2段組みにして全文を表示する（〜899px） --- */
.hdr__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 社名をヘッダー左端に揃える（2026-09-09 依頼による） */
  gap: 2px;
  line-height: 1.2;
  overflow: visible;
  text-overflow: clip;
}

.hdr__brand-prefix {
  font-size: 0.625rem; /* 10px */
  font-weight: var(--fw-regular); /* --fw-normal は未定義だった（2026-09-09 修正） */
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.hdr__brand-name {
  font-size: 1rem; /* 16px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* PC は1行に戻す */
@media (min-width: 900px) {
  .hdr__brand {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-2); /* 8px */
  }

  .hdr__brand-prefix {
    font-size: 0.8125rem; /* 13px */
  }

  .hdr__brand-name {
    font-size: 1.25rem; /* 20px */
  }
}

/* --- 2. SPヘッダーの並び：社名 ／ 電話 ／ ハンバーガー（右端） --- */
@media (max-width: 899px) {
  .hdr__inner {
    gap: var(--sp-2); /* 8px */
  }

  .hdr__brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 電話をハンバーガーの左に置く */
  .hdr__phone {
    order: 2;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 var(--sp-3); /* 上下0・左右16px */
    font-size: 0.8125rem; /* 13px */
    border-width: 1px;
  }

  .hdr__phone .btn__icon {
    width: 16px;
    height: 16px;
  }

  /* ハンバーガーは常に右端 */
  .hdr__toggle {
    order: 3;
    margin-left: 0;
  }

  .hdr__nav {
    order: 4;
  }
}

/* --- 3. ご依頼の流れ：SPでも1本のフローに見せる --- */
@media (max-width: 899px) {
  .flow__list {
    gap: 0;
  }

  .flow__step {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: var(--sp-3); /* 16px */
    align-items: start;
    text-align: left;
    padding-bottom: var(--sp-5); /* 32px。次のステップとの間隔 */
  }

  /* 番号の中央から下へ伸びる縦線。最後のステップには引かない */
  .flow__step::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 19px; /* 番号（40px）の中心 - 線幅の半分 */
    width: 2px;
    background: var(--c-line);
    z-index: 0;
  }

  .flow__step:last-child::before {
    content: none;
  }

  .flow__step:last-child {
    padding-bottom: 0;
  }

  .flow__number {
    grid-row: 1 / span 2;
    margin-inline: 0;
  }

  .flow__title {
    grid-column: 2;
    margin-top: var(--sp-1); /* 4px。番号の高さに合わせる */
  }

  .flow__text {
    grid-column: 2;
  }
}

/* --- 4. 連絡先リンク：本文と同色にし、下線はホバー・フォーカス時だけ --- */
.company__info a,
.ftr__list-item a {
  color: inherit;
  text-decoration-line: none;
}

.company__info a:hover,
.company__info a:focus-visible,
.ftr__list-item a:hover,
.ftr__list-item a:focus-visible {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

/* --- 5. 見出しを単語（文節）の区切りで改行する --- */
.hero__title,
.hero__lead,
.section-heading__title,
.section-heading__lead,
.card__title,
.item-card__label,
.flow__title,
.formtabs__tab {
  /* 日本語を文節単位で改行する。未対応ブラウザは既定の折り返しになる */
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

/* =========================================================
   2026-09-09 の調整
   ========================================================= */

/*
  最小対応幅（320px）でのヘッダー。
  社名は nowrap で全文を見せる方針のため、幅が足りないと電話ボタンの下へ潜り込む。
  360px 未満だけ社名と電話ボタンを一段小さくして、重なりを起こさせない。
  （320px の実測：社名133px＋電話62px＋ハンバーガー44px＋余白48px＝287px < 320px）
*/
@media (max-width: 359px) {
  .hdr__brand-name {
    font-size: 0.8125rem; /* 13px */
  }

  .hdr__brand-prefix {
    font-size: 0.5625rem; /* 9px */
  }

  .hdr__phone {
    padding: 0 var(--sp-2); /* 上下0・左右8px */
    font-size: 0.75rem; /* 12px */
  }

  .hdr__phone .btn__icon {
    width: 14px;
    height: 14px;
  }
}

/*
  900〜1199px のヘッダー。
  ナビが5項目あり、900px では中身（453px）が入る幅（416px）を37px超えて、
  最後の「お問い合わせ」が電話ボタンの下に潜っていた（2026-09-09 実測・修正）。
  社名とナビの間隔を詰めて収める。文字サイズは可読性のため落とさない。
*/
@media (min-width: 900px) and (max-width: 1199px) {
  .hdr__inner {
    gap: var(--sp-3); /* 16px */
  }

  .hdr__brand-name {
    font-size: 1.125rem; /* 18px */
  }

  .hdr__nav-list {
    gap: var(--sp-3); /* 16px */
  }
}