/* business.css — 事業概要
   Figma: 1998:53475。事業相関図・施設マップ・事業ブランド行・経営者向けパネルはこのページ固有 */

/* 導入（見出し＋本文＋事業相関図）Figma: 2091:60825 ------------------------ */
.biz-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-bottom: var(--space-80); /* 内側 40 ＋ 外側 40 */
}

.biz-intro .content-section__text .heading {
  width: auto;
}

.biz-intro__body {
  --biz-intro-body-width: 28rem; /* 448px */

  max-width: var(--biz-intro-body-width);
}

.biz-diagram {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-right: var(--space-80);
}

.biz-diagram .diagram {
  width: min(calc(686.587 / 16 * 1rem), 100%);
  height: auto; /* viewBox の比率で高さを決める */
}

/* 出現：円が描かれる → 中央ロゴ → 3事業のロゴが順にフェードイン（JS 有効時）*/
.js .biz-diagram[data-reveal] {
  opacity: 1;
  transform: none;
}

.js .biz-diagram .diagram__ring {
  --diagram-ring-length: 940; /* 円周（半径149）*/

  stroke-dasharray: var(--diagram-ring-length);
  stroke-dashoffset: var(--diagram-ring-length);
  transition: stroke-dashoffset calc(var(--duration-slow) * 2) var(--ease-out);
}

.js .biz-diagram .diagram__center,
.js .biz-diagram .diagram__logo {
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-out);
}

.js .biz-diagram.is-visible .diagram__ring { stroke-dashoffset: 0; }
.js .biz-diagram.is-visible .diagram__center { opacity: 1; transition-delay: var(--duration-slow); }
.js .biz-diagram.is-visible .diagram__logo--kids { opacity: 1; transition-delay: calc(var(--duration-slow) + 0.3s); }
.js .biz-diagram.is-visible .diagram__logo--port { opacity: 1; transition-delay: calc(var(--duration-slow) + 0.5s); }
.js .biz-diagram.is-visible .diagram__logo--terrace { opacity: 1; transition-delay: calc(var(--duration-slow) + 0.7s); }

@media (prefers-reduced-motion: reduce) {
  .js .biz-diagram .diagram__ring { stroke-dashoffset: 0; transition: none; }
  .js .biz-diagram .diagram__center,
  .js .biz-diagram .diagram__logo { opacity: 1; transition: none; }
}

/* GENKI INNOVATION CENTER パネル Figma: 1998:53566 -------------------------- */
.gic-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  padding: var(--space-40) var(--space-56);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  background-image: linear-gradient(90deg, var(--color-genki-port-a89990-20), var(--color-genki-port-a89990-20));
  color: var(--color-black);
}

.gic-panel__row {
  --gic-panel-text-width: 25.5rem; /* 408px */

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.gic-panel__row .content-section__body {
  width: min(var(--gic-panel-text-width), 100%);
  padding-right: var(--space-8); /* 本文 400px */
}

.facility-map {
  width: 100%;
  padding: var(--space-16) 0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.facility-map__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 888 / 574;
  overflow: hidden;
}

.facility-map__base {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 吹き出し（文字を含む SVG・下地と同じ 888×574.029 の座標）Figma: 2098:15062
   線・文字の色はイラストの線に合わせて書き出しのまま（SVG 内で指定）*/
.facility-map__bubbles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 出現：順番にポップイン（拡大しながらフェード）*/
.js .facility-map__bubble {
  opacity: 0;
  transform: scale(0.6);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.js .facility-map.is-visible .facility-map__bubble {
  opacity: 1;
  transform: none;
}

.js .facility-map__bubble:nth-child(1) { transition-delay: 0.3s; }
.js .facility-map__bubble:nth-child(2) { transition-delay: 0.4s; }
.js .facility-map__bubble:nth-child(3) { transition-delay: 0.5s; }
.js .facility-map__bubble:nth-child(4) { transition-delay: 0.6s; }
.js .facility-map__bubble:nth-child(5) { transition-delay: 0.7s; }
.js .facility-map__bubble:nth-child(6) { transition-delay: 0.8s; }
.js .facility-map__bubble:nth-child(7) { transition-delay: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .js .facility-map__bubble { opacity: 1; transform: none; transition: none; }
}

.facility-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.facility-grid__row {
  display: flex;
  gap: var(--space-16);
}

/* 3列ぶんの幅で割る（Figma 1440px 幅で 285.33px）。画面が狭くなっても枠からはみ出さない */
.facility-grid__item {
  flex: 0 0 calc((100% - var(--space-16) * 2) / 3);
  min-width: 0;
  aspect-ratio: var(--ratio-square);
}

/* 事業ブランド行（画像＋ラベル＋ロゴ＋名称＋本文＋ボタン）Figma: 2091:60916 ---- */
.brand-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  padding: var(--space-40) 0;
}

.brand-row {
  --brand-color: var(--color-black);
  --brand-row-logo-height: 5.5rem;              /* 88px */
  --brand-row-name-width: calc(214 / 16 * 1rem);

  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
  color: var(--color-black);
}

.brand-row--kids    { --brand-color: var(--color-genki-port-688780); }
.brand-row--port    { --brand-color: var(--color-genki-port-logo); }
.brand-row--terrace { --brand-color: var(--color-genki-port-ca9e6f); }

.brand-row__image {
  flex: 1 0 0;
  align-self: stretch;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.brand-row__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-row__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  min-width: 0;
}

.brand-row__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-28);
}

.brand-row__pill {
  margin: 0;
  padding: var(--space-8) var(--space-24);
  border-radius: var(--radius-full);
  background: var(--brand-color);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}

.brand-row__logo-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-32);
  padding-left: var(--space-2);
}

.brand-row__logo {
  height: var(--brand-row-logo-height);
  width: auto;
}

.brand-row__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: var(--brand-row-name-width);
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--brand-color);
  white-space: nowrap;
}

.brand-row__name-sub {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-tight);
}

.brand-row__name-main {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-compact);
}

.brand-row__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  width: 100%;
}

.brand-row__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
}

.brand-row__title {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
}

.brand-row__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
}

/* 1200px 以下：Figma で1行固定（nowrap）の見出しも、幅が足りなければ折り返す */
@media (max-width: 1200px) {
  .brand-row__pill,
  .brand-row__name {
    white-space: normal;
  }

  .brand-row__head {
    max-width: 100%;
  }

  .brand-row__logo-row {
    flex-wrap: wrap;
    gap: var(--space-16) var(--space-32);
  }
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  /* 事業相関図：PC のままだと左右のラベル込みで縮み文字が読めないため、
     ラベルを各ロゴの下（キッズは右上）へ移して 1.2 倍にし、左右の余白を切り落として画面幅いっぱいに表示する。
     数値は SVG の座標（viewBox 0 0 687 341 の user unit。transform の px＝user unit）。表示範囲は x 108〜584 */
  .biz-intro {
    padding-bottom: var(--space-40);
  }

  .biz-diagram {
    --biz-diagram-crop-x: 108;
    --biz-diagram-crop-width: 476; /* ラベルの外側に左右約 12px（375px 幅時）の余白 */

    display: block;
    width: calc(100% + var(--site-gutter, 0px) * 2);
    margin-inline: calc(var(--site-gutter, 0px) * -1);
    padding-right: 0;
    padding-bottom: var(--space-8); /* 下に移したラベルが viewBox（高さ 341）から少しはみ出す分 */
    overflow-x: clip;
  }

  .biz-diagram .diagram {
    width: calc(100% * 687 / var(--biz-diagram-crop-width));
    max-width: none;
    margin-left: calc(100% * var(--biz-diagram-crop-x) / var(--biz-diagram-crop-width) * -1);
    overflow: visible;
  }

  .biz-diagram .diagram__label {
    transform-box: view-box;
    transform-origin: 0 0;
  }

  /* 元ラベルの左上（x0, y0）を移動先（X, Y）に合わせて 1.2 倍：translate(X, Y) scale(1.2) translate(-x0, -y0) */
  .biz-diagram .diagram__label--kids    { transform: translate(419px, 16.8px) scale(1.2) translate(-419px, -29px); }
  .biz-diagram .diagram__label--port    { transform: translate(123.7px, 307px) scale(1.2) translate(-8.6px, -236.7px); }
  .biz-diagram .diagram__label--terrace { transform: translate(453.7px, 307px) scale(1.2) translate(-583.2px, -241.2px); }

  .gic-panel {
    padding: var(--space-24) var(--space-24) var(--space-40);
  }

  .gic-panel__row {
    flex-direction: column;
    gap: var(--space-32);
  }

  .gic-panel__row .content-section__body {
    padding-right: 0;
  }

  /* 行（3件ずつ）の区切りを外し、全件を2カラムで詰めて並べる */
  .facility-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facility-grid__row {
    display: contents;
  }

  /* 順次出現の遅延も2カラムに合わせる：左列 0s／右列 0.1s（JS の 3件ずつの遅延を上書き）。
     右列＝通し番号が偶数番目（1行目の2件目・2行目の1件目）。3件ずつの行構成が前提 */
  .js .facility-grid__item[data-reveal] {
    transition-delay: 0s;
  }

  .js .facility-grid__row:nth-child(1) .facility-grid__item[data-reveal]:nth-child(2),
  .js .facility-grid__row:nth-child(2) .facility-grid__item[data-reveal]:nth-child(1) {
    transition-delay: 0.1s;
  }

  .brand-row {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-row__image {
    flex: none;
    aspect-ratio: var(--ratio-4-3);
  }

  .brand-row__name {
    width: auto;
  }

  .brand-row__logo-row {
    justify-content: center;
    padding-left: 0;
  }

  /* ピルは全幅（.brand-row__head が stretch なので、head を全幅にすればピルも伸びる）*/
  .brand-row__head {
    width: 100%;
  }

  /* ボタンは他ページと同じく中央寄せ（button.css の SP 指定の auto マージン）*/
  .brand-row__buttons {
    align-items: center;
    width: 100%;
  }
}