/* ============================================================
   事業内容トップページ（/business/）専用スタイル
   対象: 「事業をつなぐ、3つの力」セクション（.connect-grid）
   ※ .card--mark / .grid 本体の定義は style.css のまま変更しない。
     ここでは .connect-grid 配下だけに効く上書き・追加スタイルを書く。
   ============================================================ */

/* ---------- pin-stack無効化 ----------
   「3つの事業を、もう少し詳しく」セクションが position:sticky による
   スクロール連動の重なり演出（pin-stack）を使っていた。この種のスクロール
   ジャッキングはサイト内で複数回ユーザーに却下された禁止パターン
   （Worlds Journey・/business/ai/のサービス一覧pin-stack撤去と同種）のため、
   通常の縦積みセクションに戻す。style.cssの.pin-stack/.pin-card定義自体は
   他ページで再利用される可能性を考慮し変更せず、ここで上書きするだけに留める。 */
.pin-stack {
  position: static;
}

.pin-card {
  position: static;
  min-height: auto;
}

/* ---------- 循環を表す3カード＋矢印のレイアウト ---------- */
.connect-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0 clamp(12px, 2vw, 28px);
}

/* カードごとの事業アクセントを背景にうっすら乗せる（既存 .card--mark の定義自体は上書きしない、
   このセクション内でのみ効く追加ルール） */
.connect-grid .connect-card.card--mark {
  position: relative;
  background: none !important;
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.6vw, 36px) clamp(24px, 3vw, 32px) clamp(30px, 3.6vw, 36px);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.connect-grid .connect-card.card--mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.9;
}
.connect-grid .connect-card[data-accent="ec"]::before {
  background: linear-gradient(160deg, rgba(14, 165, 233, 0.09), rgba(14, 165, 233, 0.01) 65%);
}
.connect-grid .connect-card[data-accent="welfare"]::before {
  background: linear-gradient(160deg, rgba(249, 115, 22, 0.09), rgba(249, 115, 22, 0.01) 65%);
}
.connect-grid .connect-card[data-accent="ai"]::before {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.09), rgba(139, 92, 246, 0.01) 65%);
}
.connect-grid .connect-card[data-accent="ai"] .card-mark {
  /* AI カードのみアクセントを #8b5cf6 に統一（CTAリングの3色と揃える） */
  color: #7c3aed;
}
.connect-grid .connect-card[data-accent="ai"].card--mark {
  border-top-color: #8b5cf6;
}

.connect-grid .connect-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---------- カード間の矢印コネクタ ---------- */
.connect-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-sub);
}
.connect-link-arrow {
  flex-shrink: 0;
}
.connect-link--1 .connect-link-arrow { color: var(--c-welfare-text); }
.connect-link--2 .connect-link-arrow { color: #7c3aed; }

/* ---------- 循環ループの締めくくり（AI → EC へ戻る） ---------- */
.connect-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
  text-align: center;
}
.connect-loop-icon {
  flex-shrink: 0;
}
.connect-loop-text {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text-sub);
  letter-spacing: 0.01em;
}

/* 循環ループアイコンにごく控えめな回転を添える（強調しすぎない） */
@media (prefers-reduced-motion: no-preference) {
  .connect-loop.is-visible .connect-loop-icon {
    animation: connect-loop-spin 8s linear infinite;
    transform-origin: 50% 50%;
  }
}
@keyframes connect-loop-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- レスポンシブ: タブレット以下は縦積み ---------- */
@media (max-width: 900px) {
  .connect-grid {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .connect-link {
    padding-block: 2px;
  }
  .connect-link-arrow {
    transform: rotate(90deg);
  }
  .connect-loop-text {
    max-width: 320px;
  }
}

@media (max-width: 480px) {
  .connect-loop {
    flex-direction: column;
    gap: 8px;
  }
}

/* ---------- モーション低減設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .connect-grid .connect-card:hover {
    transform: none;
  }
  .connect-loop-icon {
    animation: none !important;
  }
}

/* ============================================================
   ここから追記: ヒーロー／イントロ／Bizインデックス／詳細写真フレーム
   対象: page-hero--hub / hub-term / biz-index / panel-framed
   上記の .connect-grid 関連スタイルには一切手を加えていない。
   ============================================================ */

/* ---------- ヒーロー: 3事業の実写真を縦3分割したモザイク背景 ----------
   他の事業ページ（/business/ec/ 等）の page-hero--world は1枚の動画/写真を
   cover で敷く構図。このハブページだけは3事業を横並びの静止画モザイクにして
   構図そのものを変える（動画は使わず、ホバーで開くアコーディオンのような
   演出も行わない。あくまで静的な背景）。 */
.page-hero--hub {
  background: #05070f;
  color: #fff;
}

.hub-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.hub-mosaic-col {
  position: relative;
  overflow: hidden;
}

.hub-mosaic-col + .hub-mosaic-col {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-mosaic-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  display: block;
  /* 実写真をうっすらモノトーン寄りに落として、上に事業カラーのティントを重ねる */
  filter: grayscale(0.5) brightness(0.58) contrast(1.12);
}

.hub-mosaic-col::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  opacity: 0.72;
}

.hub-mosaic-col--ec::after { background: #0ea5e9; }
.hub-mosaic-col--welfare::after { background: #f97316; }
.hub-mosaic-col--ai::after { background: #8b5cf6; }

.hub-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(5, 7, 15, 0.92) 0%, rgba(5, 7, 15, 0.64) 45%, rgba(5, 7, 15, 0.38) 100%);
}

.hub-hero-content {
  position: relative;
  z-index: 2;
}

.page-hero--hub .breadcrumb a,
.page-hero--hub .breadcrumb li {
  color: rgba(255, 255, 255, 0.7);
}

.page-hero--hub .breadcrumb [aria-current="page"] {
  color: #fff;
}

.page-hero--hub .page-title-en {
  /* 3事業を束ねるハブページであることを示す、3色を渡るグラデーション文字 */
  background: linear-gradient(90deg, #38bdf8, #fb923c, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.page-hero--hub .page-title {
  color: #fff;
}

.page-hero--hub .page-lead {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 640px) {
  .hub-mosaic-col img {
    filter: grayscale(0.5) brightness(0.5) contrast(1.12);
  }
}

/* ---------- イントロ文: 重要語句に事業アクセントを添える（軽い強調のみ） ---------- */
.hub-term {
  font-weight: 700;
}

.hub-term--ec { color: var(--c-ec-text); }
.hub-term--welfare { color: var(--c-welfare-text); }
.hub-term--ai { color: #7c3aed; }

/* ---------- Bizインデックス: 均等3カラムのカードをやめ、
   数字インデックス＋事業名＋1行コピー＋代表的な1つの数字、という
   軽量な「事業台帳」のような並びに置き換える（ベントー・メニュー行・
   マーキーのいずれとも異なる、非対称の横長リスト型レイアウト）。 ---------- */
.biz-index {
  display: flex;
  flex-direction: column;
}

.biz-index-row {
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 84px) minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.6vw, 36px);
  padding: clamp(24px, 3.4vw, 36px) clamp(8px, 1vw, 16px);
  border-top: 1px solid var(--c-line);
  transition: background-color 0.3s var(--ease-out), border-radius 0.3s var(--ease-out);
}

.biz-index-row:last-child {
  border-bottom: 1px solid var(--c-line);
}

.biz-index-row:hover {
  background-color: var(--c-bg);
  border-radius: var(--r-md);
}

/* EC は基軸事業として、行そのものを一段大きく見せる（3列均等ではない非対称の軽重） */
.biz-index-row--feature {
  padding-block: clamp(32px, 4.6vw, 48px);
}

.biz-index-num {
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  letter-spacing: -0.02em;
}

.biz-index-row--feature .biz-index-num {
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.8rem);
}

.biz-index-row[data-accent="ec"] .biz-index-num { color: var(--c-ec-text); }
.biz-index-row[data-accent="welfare"] .biz-index-num { color: var(--c-welfare-text); }
.biz-index-row[data-accent="ai"] .biz-index-num { color: #7c3aed; }

.biz-index-en {
  display: block;
  font-family: "Inter", var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.biz-index-row[data-accent="ec"] .biz-index-en { color: var(--c-ec-text); }
.biz-index-row[data-accent="welfare"] .biz-index-en { color: var(--c-welfare-text); }
.biz-index-row[data-accent="ai"] .biz-index-en { color: #7c3aed; }

.biz-index-name {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: 8px;
}

.biz-index-row--feature .biz-index-name {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
}

.biz-index-copy {
  color: var(--c-text-sub);
  font-size: 0.94rem;
  max-width: 46ch;
}

.biz-index-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 1px solid var(--c-line);
  padding-left: clamp(18px, 2.2vw, 30px);
}

.biz-index-stat-num {
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem);
  line-height: 1.1;
}

.biz-index-stat-unit,
.biz-index-stat-arrow {
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 2px;
}

.biz-index-row[data-accent="ec"] .biz-index-stat-num { color: var(--c-ec-text); }
.biz-index-row[data-accent="welfare"] .biz-index-stat-num { color: var(--c-welfare-text); }
.biz-index-row[data-accent="ai"] .biz-index-stat-num { color: #7c3aed; }

.biz-index-stat-label {
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--c-text-sub);
  letter-spacing: 0.01em;
}

.biz-index-link {
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .biz-index-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num main"
      "stat stat"
      "link link";
    row-gap: 16px;
  }
  .biz-index-num { grid-area: num; }
  .biz-index-main { grid-area: main; }
  .biz-index-stat {
    grid-area: stat;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    border-left: none;
    border-top: 1px solid var(--c-line);
    padding-left: 0;
    padding-top: 16px;
  }
  .biz-index-link {
    grid-area: link;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .biz-index-row {
    transition: none;
  }
}

/* ---------- 「3つの事業を、もう少し詳しく」実写真フレーム ----------
   汎用の角丸ボックス（.visual-panel の既定の border-radius）をやめ、
   コーナーを切り欠いた事業アクセントカラーの縁＋キャプションタグを重ねる。
   media-block--reverse（福祉）のみ切り欠きを反対側に振って左右対称にする。
   福祉側で使っていた data-scroll-progress によるフェード/スケールは、
   3事業すべてのパネルに揃えて適用する（既存の動きを壊さず踏襲）。 ---------- */
.pin-stack .visual-panel.panel-framed {
  border-radius: 0;
  border: 2px solid var(--c-line);
  clip-path: polygon(0 0, calc(100% - clamp(26px, 3.6vw, 46px)) 0, 100% clamp(26px, 3.6vw, 46px), 100% 100%, 0 100%);
}

.pin-stack .media-block--reverse .visual-panel.panel-framed {
  clip-path: polygon(clamp(26px, 3.6vw, 46px) 0, 100% 0, 100% 100%, 0 100%, 0 clamp(26px, 3.6vw, 46px));
}

.pin-stack .visual-panel.panel-framed[data-accent="ec"] { border-color: var(--c-ec-text); }
.pin-stack .visual-panel.panel-framed[data-accent="welfare"] { border-color: var(--c-welfare-text); }
.pin-stack .visual-panel.panel-framed[data-accent="ai"] { border-color: #7c3aed; }

.panel-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  background: rgba(5, 7, 15, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.panel-tag-num {
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.panel-framed[data-accent="ec"] .panel-tag-num { color: #7ec8f5; }
.panel-framed[data-accent="welfare"] .panel-tag-num { color: #fdba74; }
.panel-framed[data-accent="ai"] .panel-tag-num { color: #c4b5fd; }

/* スクロール連動のフェード/スケール（welfare側の既存演出と同じ仕組みを流用） */
.pin-stack .visual-panel.panel-framed[data-scroll-progress] {
  opacity: clamp(0, calc(0.3 + 0.7 * var(--progress, 1)), 1);
  transform: scale(calc(0.92 + 0.08 * var(--progress, 1)));
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .pin-stack .visual-panel.panel-framed[data-scroll-progress] {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   ここから追記: イントロ「3つの事業がめぐる、iHoldingsの形」
   対象: .hub-intro（テキスト＋ベン図の非対称2カラム）
   中央寄せの長文1段落から脱却し、「3つの円が重なりiHoldingsになる」
   というメッセージをベン図SVGで直接示す。禁止パターン
   （ベントー・メニュー行・マーキー・縦書き・ノード付きタイムライン・
   同心円リングの回転・ダーク+オーロラ）とは重複しない構図として作る。
   ============================================================ */
.hub-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 1fr);
  align-items: center;
  gap: clamp(40px, 5.5vw, 84px);
}

.hub-intro-text .section-title {
  margin-top: 0;
}

.hub-intro-text .section-lead {
  max-width: 54ch;
}

.hub-intro-visual {
  display: flex;
  justify-content: center;
}

.hub-venn {
  width: 100%;
  max-width: 400px;
  height: auto;
  overflow: visible;
}

/* ---------- 3円: 塗りなし・細線のみ ---------- */
.hub-venn-circle {
  fill: none;
  stroke-width: 1.75;
  stroke-dasharray: 805;
  stroke-dashoffset: 805;
  transition: stroke-dashoffset 1.15s var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}

.hub-venn-circle--ec { stroke: #0ea5e9; }
.hub-venn-circle--welfare { stroke: #f97316; }
.hub-venn-circle--ai { stroke: #8b5cf6; }

.hub-intro-visual.is-visible .hub-venn-circle--ec { stroke-dashoffset: 0; }
.hub-intro-visual.is-visible .hub-venn-circle--welfare {
  stroke-dashoffset: 0;
  transition-delay: 0.2s;
}
.hub-intro-visual.is-visible .hub-venn-circle--ai {
  stroke-dashoffset: 0;
  transition-delay: 0.4s;
}

/* ---------- 各円の中のラベル ---------- */
.hub-venn-label-name,
.hub-venn-label-term {
  font-family: var(--font-sans);
  text-align: center;
}

.hub-venn-label-name {
  font-size: 13px;
  font-weight: 700;
  fill: var(--c-ink);
}

.hub-venn-label-term {
  font-size: 12px;
  font-weight: 700;
}

.hub-venn-label--ec .hub-venn-label-term { fill: var(--c-ec-text); }
.hub-venn-label--welfare .hub-venn-label-term { fill: var(--c-welfare-text); }
.hub-venn-label--ai .hub-venn-label-term { fill: #7c3aed; }

.hub-venn-label {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.hub-intro-visual.is-visible .hub-venn-label--ec {
  opacity: 1;
  transition-delay: 1.1s;
}
.hub-intro-visual.is-visible .hub-venn-label--welfare {
  opacity: 1;
  transition-delay: 1.3s;
}
.hub-intro-visual.is-visible .hub-venn-label--ai {
  opacity: 1;
  transition-delay: 1.5s;
}

/* ---------- 中央交差部の「i」: ブランドマークと同じドット+バーのモチーフ ---------- */
.hub-venn-i {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  transition-delay: 0s;
}

.hub-intro-visual.is-visible .hub-venn-i {
  opacity: 1;
  transition-delay: 1.6s;
}

/* ---------- リビール後の常時モーション: 3円がそれぞれ違う周期でごく控えめに呼吸 ----------
   （回転はさせない。同心円リング(.cta-ring / .connect-loop-icon)の回転とは
   明確に別のモーション語彙にする） */
@media (prefers-reduced-motion: no-preference) {
  .hub-intro-visual.is-visible .hub-venn-circle--ec {
    animation: hub-venn-breathe-ec 24s ease-in-out 1.4s infinite;
  }
  .hub-intro-visual.is-visible .hub-venn-circle--welfare {
    animation: hub-venn-breathe-welfare 28s ease-in-out 1.6s infinite;
  }
  .hub-intro-visual.is-visible .hub-venn-circle--ai {
    animation: hub-venn-breathe-ai 32s ease-in-out 1.8s infinite;
  }
}

@keyframes hub-venn-breathe-ec {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@keyframes hub-venn-breathe-welfare {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
@keyframes hub-venn-breathe-ai {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* ---------- レスポンシブ: タブレット以下は図が上・テキストが下の縦積み ---------- */
@media (max-width: 900px) {
  .hub-intro {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
  .hub-intro-visual {
    order: -1;
  }
  .hub-venn {
    max-width: 320px;
  }
  .hub-intro-text .section-lead {
    max-width: none;
  }
}

/* ---------- モーション低減設定: 描画済みの完成形で静止 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hub-venn-circle {
    stroke-dashoffset: 0;
    transition: none;
  }
  .hub-venn-label,
  .hub-venn-i {
    opacity: 1;
    transition: none;
  }
}

/* ============================================================
   ここから追記: 「3つの事業を、もう少し詳しく」
   スクロースパイ式クイックナビ＋常時表示の3パネル（.biz-stage）
   旧実装は3事業をrole="tabpanel"+hiddenで排他表示し6秒ごとに自動送り
   していたが、これだと普通にスクロールしただけのユーザーがEC以外の
   2事業を一切見ずに通過してしまう重大なUX問題があったため全面刷新した。
   3パネル（EC/福祉/AI）は常にDOM上・視覚上ともに表示し、縦に並べる。
   上部の「01/02/03」ナビはrole="tablist"の排他タブではなく、通常の
   <nav>+アンカーリンクによるクイックナビとして実装し直した。
   クリックで該当パネルへスクロールし、IntersectionObserverで現在地の
   パネルを検知してナビのアクセント色下線を追従させるだけで、パネルの
   表示/非表示は一切制御しない（自動送り・進行バー・排他ロジックは撤去）。
   写真をステージ右端まで断ち落とす構成・事業アクセント色の使い方など、
   見た目の設計言語は旧実装を踏襲している。
   さらに上の .pin-stack無効化ルール・.panel-framed関連ルール（410〜469行目
   付近）は他ページ（/business/ec/ 等）での再利用可能性を考慮しそのまま
   残し、変更していない。
   ============================================================ */

.biz-stage {
  position: relative;
  margin-top: clamp(8px, 1.4vw, 16px);
}

/* data-accent配下だけで使う事業アクセント色。CSS変数はそれを定義した
   要素自身とその子孫にしか効かないため、.biz-tab と .biz-panel それぞれの
   要素にスコープされ、互いに影響しない。 */
.biz-stage [data-accent="ec"] { --stage-accent: #0ea5e9; }
.biz-stage [data-accent="welfare"] { --stage-accent: #f97316; }
.biz-stage [data-accent="ai"] { --stage-accent: #8b5cf6; }

/* ---------- クイックナビ ---------- */
.biz-quicknav {
  display: flex;
  gap: clamp(2px, 0.8vw, 10px);
  margin-bottom: clamp(20px, 3vw, 32px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.biz-quicknav::-webkit-scrollbar {
  display: none;
}

.biz-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 128px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  text-decoration: none;
  border-bottom: 2px solid var(--c-line);
  color: inherit;
  padding: clamp(10px, 1.6vw, 16px) clamp(6px, 1.2vw, 14px) clamp(14px, 2vw, 18px);
  transition: border-color 0.25s var(--ease-out);
}

.biz-tab-num {
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--c-text-sub);
  transition: color 0.25s var(--ease-out);
}

.biz-tab-name {
  font-size: clamp(0.86rem, 0.8rem + 0.3vw, 0.98rem);
  font-weight: 700;
  color: var(--c-text-sub);
  line-height: 1.35;
  transition: color 0.25s var(--ease-out);
}

.biz-tab:hover .biz-tab-name {
  color: var(--c-ink);
}

/* 現在地: IntersectionObserverがスクロール中のパネルに合わせて
   is-currentクラスを付け外しする（排他表示ではなく「現在地」表示） */
.biz-tab.is-current {
  border-bottom-color: var(--stage-accent);
}

.biz-tab.is-current .biz-tab-name {
  color: var(--c-ink);
}

.biz-tab.is-current .biz-tab-num {
  color: var(--stage-accent);
}

.biz-tab:focus-visible {
  outline: 2px solid var(--stage-accent, #2b5cff);
  outline-offset: 2px;
}

/* ---------- パネル本体: 3事業を縦に並べて常時表示する ---------- */
.biz-stage-panels {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}

.biz-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
  align-items: stretch;
  background: var(--c-bg-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* 固定ヘッダー(--header-h)に隠れないよう、アンカー着地時の余白を確保する */
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* 各パネル上端の事業アクセントライン。旧実装ではJSがステージ単位で
   1本だけ書き換えていたが、3パネル常時表示になったため各パネルに
   それぞれの事業色で固定表示する。 */
.biz-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stage-accent);
  z-index: 1;
}

.biz-panel-text {
  align-self: center;
  padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3.2vw, 48px);
}

.biz-panel-text .section-title {
  margin-top: 0;
}

.biz-panel-text .section-lead {
  max-width: 46ch;
}

.biz-panel-text .tag-list {
  margin-top: 22px;
}

.biz-panel-text .text-link {
  margin-top: 26px;
}

/* 写真は前セクション（.panel-framed のコーナー切り欠き）とは別の見せ方で、
   パネル右端まで断ち落とす（クリップ・縁取りなし、.biz-panel の
   overflow:hidden + border-radius が右上/右下の角だけ自然に丸める） */
.biz-panel-media {
  position: relative;
  min-height: 320px;
}

.biz-panel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- レスポンシブ: タブレット以下は写真が上・テキストが下の縦積み ---------- */
@media (max-width: 900px) {
  .biz-tab {
    min-width: 112px;
  }
  .biz-panel {
    grid-template-columns: 1fr;
  }
  .biz-panel-media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .biz-panel-text {
    padding: clamp(22px, 4vw, 30px) clamp(20px, 4vw, 28px);
  }
}

@media (max-width: 480px) {
  .biz-tab {
    min-width: 92px;
  }
  .biz-tab-name {
    font-size: 0.8rem;
  }
}