.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.tonal-layering-no-border {
  border: none !important;
}
body {
  background-color: #f9f9f9;
  color: #1a1c1c;
}
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* FV グリッド：子に min-width:0 がないと、nowrap 見出しが列幅を超えて画像列へ重なる */
.hero-fv-inner.editorial-grid > * {
  min-width: 0;
}

/* FV テキスト列：モバイルは cqi・lg〜は cqw で列幅に連動（container は 1024px 未満でも有効） */
.hero-fv-text-col {
  container-type: inline-size;
}

/* TOP / About FV：縦積み時（〜lg 未満）の行間を詰める */
@media (max-width: 1023px) {
  .hero-fv-inner.editorial-grid {
    column-gap: 0.75rem;
    row-gap: 0.75rem;
  }
}
/* モバイルメニュー開閉時の背景スクロール抑止 */
body.nav-open {
  overflow: hidden;
}

/*
 * ハンバーガー：nav.js がインライン style（!important）で表示を確定。ここは JS 未実行時のフォールバック。
 */
#site-nav-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}
#site-nav-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
#site-nav-drawer {
  transform: translateX(100%) !important;
  transition: transform 0.3s ease-out;
  pointer-events: none !important;
}
#site-nav-drawer.is-open {
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/*
 * FV ラベル（.hero-fv-eyebrow）とタイトル（.hero-fv-title）
 * 同じ flex カラムでも、ラベルは px-3（左はモバイルで 0 に上書き）／タイトルは横パディングなし、
 * 文字間も異なるため先頭の見えがずれる。HTML の eyebrow に必ず .hero-fv-eyebrow を付けること。
 */
@media (max-width: 767px) {
  .hero-fv-eyebrow {
    padding-left: 0 !important;
    padding-right: 0.75rem !important;
    /*
     * タイトル先頭（日本語太字）との光学合わせ。
     * 日本語グリフのサイドベアリングは欧文より広いため、
     * ラベルが欧文始まりなら -0.15rem 程度、
     * 日本語始まりなら -0.05rem 程度で十分。
     * ページごとにラベルのテキスト内容が異なるため、
     * 中間値の -0.1rem を基準とする。
     */
    margin-left: -0.1rem;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-fv-inner .hero-fv-title.hero-fv-title--stacked {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .hero-fv-eyebrow {
    margin-left: -0.15rem;
    margin-bottom: 0.875rem !important;
  }
}

/* ファーストビュー H1 */
.hero-fv-title {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* TOP の2行見出し：HTML の <br> で改行を必ず入れる（Chrome は span 連結で1行になるのを防止） */
.hero-fv-title.hero-fv-title--stacked {
  line-height: 1 !important;
}
/* inline + br で Chrome でも必ず2行（連続 span が1行に潰れない） */
.hero-fv-title.hero-fv-title--stacked .hero-fv-line {
  display: inline;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  line-height: 1.1;
}
/* 行間（br の高さで調整。Safari の行間空きすぎ対策） */
.hero-fv-title.hero-fv-title--stacked .hero-fv-br {
  display: block;
  line-height: 0;
  margin: 0;
  padding: 0;
  height: 0.42em;
}

/* スマホ〜大きめスマホ（〜767px / md 未満）— stacked FV タイトル（全ページ共通） */
@media (max-width: 767px) {
  /*
   * cqi 対応ブラウザでは 9cqi+2.5rem 上限だと iPhone 15 相当で最長行が列幅を超える。
   * vw フォールバック上限は cqi 側と揃える（修正 C）。
   */
  .hero-fv-text-col {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden; /* 最終安全策（修正しない） */
  }

  .hero-fv-title.hero-fv-title--stacked {
    width: 100%;
    box-sizing: border-box;
    /* vw フォールバック（cqi 未対応ブラウザ）— 上限は修正 C どおり 2.15rem */
    font-size: clamp(1.85rem, 5vw + 0.75rem, 2.15rem);
    letter-spacing: -0.055em;
    max-width: 100%;
  }
  /*
   * 行の区切りは HTML の <br> で制御。親 .hero-fv-title の keep-all は行spanでは打ち消し（修正 B）、
   * 万一 font-size が大きすぎても折り返しで救済。display:block は br と二重改行になるため使わない。
   */
  .hero-fv-title.hero-fv-title--stacked .hero-fv-line {
    line-height: 1.08;
    white-space: normal !important;
    word-break: normal; /* グローバル .hero-fv-title の keep-all を上書き（行内では折り返し可） */
    overflow-wrap: anywhere;
  }
  /* 1行目と2行目のあいだ（TOP / About 共通・約3px）— br のみで制御 */
  .hero-fv-title.hero-fv-title--stacked .hero-fv-br {
    display: block;
    line-height: 0;
    margin: 0;
    padding: 0;
    height: calc(0.32em);
  }
}

@supports (font-size: 1cqi) {
  @media (max-width: 767px) {
    /* 修正 A：iPhone 15 等で最長行が列内に収まるよう 7.2cqi・上限 2.15rem */
    .hero-fv-text-col .hero-fv-title.hero-fv-title--stacked {
      font-size: clamp(1.85rem, 7.2cqi + 0.55rem, 2.15rem);
    }
  }
}

/* タブレット / iPad（768px〜1023px）— Tailwind の md〜lg の中間
   md:text-[3.5rem] と lg:text-[5rem] の間で段階的に大きさを調整 */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-fv-title {
    font-size: clamp(2.65rem, 2.4vw + 1.5rem, 3.65rem) !important;
    letter-spacing: -0.04em;
  }
  .hero-fv-title:not(.hero-fv-title--stacked) {
    line-height: 1.11 !important;
  }
  .hero-fv-title.hero-fv-title--stacked {
    line-height: 1 !important;
  }
  .hero-fv-title.hero-fv-title--stacked .hero-fv-line {
    line-height: 1.1 !important;
  }
  .hero-fv-title.hero-fv-title--stacked .hero-fv-br {
    height: 0.38em;
  }

  .editorial-grid {
    gap: 1.35rem;
  }

  /* 12カラムの詰まりをやわらげる（ヒーローなどで使っている .editorial-grid 向け） */
  .editorial-grid > * {
    min-width: 0;
  }
}

/*
 * デスクトップ（lg〜）：v1 の vw ベース clamp は max-w-7xl 固定後も vw が伸び、列幅と連動しない。
 * v2：テキスト列（.hero-fv-text-col）を container query 基準にし、10cqw で列幅に比例させる。
 */
@media (min-width: 1024px) {

  /* container-type は全幅共通（.hero-fv-text-col）。ここでははみ出しのみ抑止 */
  .hero-fv-text-col {
    overflow: hidden;
  }

  /* ---- 非 stacked（1行タイトル）---- */
  .hero-fv-title:not(.hero-fv-title--stacked) {
    /*
     * 1行タイトルは文字数が少ないため従来の clamp で十分。
     * 念のため上限を 4.25rem に抑える。
     */
    font-size: clamp(3.25rem, 1.8vw + 2.25rem, 4.25rem) !important;
    letter-spacing: -0.045em;
    line-height: 1.08 !important;
  }

  /* ---- stacked（2行タイトル）---- */
  .hero-fv-title.hero-fv-title--stacked {
    /*
     * cqw = テキスト列幅の 1%
     *
     * 計算根拠（最長行 = 10文字）：
     *   列幅 W に対して、1文字あたり最大 W / (10 × 0.955) ≈ W × 0.1047
     *   → 10.47cqw が理論上限 → 安全マージン 5% で 10cqw を採用
     *
     * 下限 2.5rem：1024px 付近で小さくなりすぎない
     * 上限 4.25rem：超大画面でも品位を保つ
     *
     * 未対応ブラウザ：cqw が無効化され clamp の下限 2.5rem にフォールバック
     */
    font-size: clamp(2.5rem, 10cqw, 4.25rem) !important;
    letter-spacing: -0.045em;
    line-height: 1 !important;
  }

  .hero-fv-title.hero-fv-title--stacked .hero-fv-line {
    line-height: 1.08 !important;
  }
  .hero-fv-title.hero-fv-title--stacked .hero-fv-br {
    height: 0.36em;
  }

  .hero-fv-inner.editorial-grid {
    gap: 1.5rem;
  }
}