/* =========================================================
   事業紹介 /about/business/ — business.css（lower.css の後に読む・2026-10-29）
   01〜03 各事業：写真と文（.split を左右交互）→ 典型的な案件／関わる職種・この事業の社員
   04 3つの組み合わせ（見せ場）：3つの吹き出しが順に出て、少し寄って重なり、真ん中に「助かった」
       図は aria-hidden。重なるのは図形どうしだけ（文字は図形より上に描き、ほかの吹き出しにかからない位置に置く）
       初期状態は (scripting: enabled) and (prefers-reduced-motion: no-preference) と .page:not([data-anim="static"]) の中だけ
   05 これからの挑戦：背景の図形（M12。MV とここの2か所）
   ========================================================= */

/* =========================================================
   01〜03 各事業
   ========================================================= */
.biz__media .ph-frame { aspect-ratio: 3 / 2; }
.biz__split .split__body > .sec-head { margin-bottom: 24px; }

/* 何を／誰に／事業会社 */
.biz-facts { margin: 0; border-top: 1px solid var(--color-line); }
.biz-facts__row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); column-gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--color-line); }
.biz-facts dt { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.9; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.biz-facts dd { margin: 0; font-size: 14px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
.biz-facts__key { display: block; font-weight: var(--fw-bold); }
.biz-facts__share { display: block; font-size: 12px; line-height: 1.8; color: var(--color-gray); }

/* 働く人の想い：吹き出しの形の小さな面（トップの FV の声と同じ文。しっぽは左下） */
.biz-voice {
  position: relative; display: inline-grid; gap: 2px;
  margin: 28px 0 12px; padding: 14px 22px 15px;
  border-radius: var(--radius-s); background: var(--color-tint);
}
.lsec--pale .biz-voice { background: var(--color-bg); }
.biz-voice::after {
  content: ""; position: absolute; left: 28px; bottom: -11px; width: 16px; height: 12px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);
}
.biz-voice__label { font-size: 11px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .12em; color: var(--color-ink-sub); }
.biz-voice__text { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .06em; word-break: auto-phrase; }

/* 典型的な案件（課題 → やったこと → 結果）＋根拠の数字 */
.biz__more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 48px; }
.biz-case { padding: 0; }
.biz-case__in { padding: 26px 20px 22px; }
.biz-case__tag {
  display: inline-block; padding: 1px 12px; border-radius: var(--radius-xs);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.8; letter-spacing: .1em;
}
.biz-case__title { margin-top: 10px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.biz-case__flow { margin: 14px 0 0; }
.biz-case__row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 12px 0; }
.biz-case__row + .biz-case__row { border-top: 1px solid var(--color-line); }
.biz-case__row dt {
  justify-self: start; padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 2; letter-spacing: .08em;
}
.lsec--pale .biz-case__row dt { background: var(--color-tint); }
.biz-case__row.is-result dt, .lsec--pale .biz-case__row.is-result dt { background: var(--color-brand); color: var(--color-on-brand); }
.biz-case__row dd { margin: 0; font-size: 15px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
.biz-proof { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.biz-proof__item { display: grid; gap: 2px; }
.biz-proof__label { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.biz-proof__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.biz-proof__before { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: .04em; color: var(--color-ink-sub); }
.biz-proof__arrow { display: inline-flex; align-self: center; }
.biz-proof__arrow svg { width: 24px; height: 12px; fill: none; stroke: var(--color-brand-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.biz-proof__value { display: inline-flex; align-items: baseline; gap: 4px; }
.biz-proof__value .num { font-size: 36px; }
.biz-case__who { margin-top: 14px; }

/* 関わる職種・この事業の社員 */
.biz-side { display: grid; gap: 28px; align-content: start; }
.biz-side__title {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading);
}
.biz-side__title::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.pcards.biz-person { grid-template-columns: minmax(0, 1fr); }

/* =========================================================
   04 3つの組み合わせ（見せ場）
   ========================================================= */
.cb__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.cb__fig { width: 100%; max-width: 560px; margin: 0 auto; }
.cbf { display: block; width: 100%; height: auto; overflow: visible; }
.cbf__mv { mix-blend-mode: multiply; } /* 淡いオレンジを乗算で重ねる（重なったところだけ少し濃くなる。M12 と同じ） */
.cbf__shape { fill: var(--color-layer); }
.cbf text { font-family: var(--font-ja); font-weight: var(--fw-bold); }
.cbf__biz { font-size: 18px; letter-spacing: .08em; fill: var(--color-brand-hover); }
.cbf__verb { font-size: 28px; letter-spacing: .1em; fill: var(--color-brand); }
.cbf__voice { font-size: 24px; letter-spacing: .1em; fill: var(--color-on-brand); }
.cbf__pop, .cbf__center { transform-box: fill-box; transform-origin: center; }

@keyframes cbf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes cbf-move { from { transform: translate(var(--dx, 0px), var(--dy, 0px)); } to { transform: none; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .cb__fig:not(.is-act) .cbf__pop,
  .page:not([data-anim="static"]) .cb__fig:not(.is-act) .cbf__center { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* 1 吹き出しが1つずつ出る（人を届ける → 手間を減らす → 業務ごと引き受ける）2 3つが少し寄って重なる 3 真ん中に「助かった」 */
  .page:not([data-anim="static"]) .cb__fig.is-act .cbf__pop { animation: cbf-pop .7s var(--ease-back) calc(.25s + var(--t, 0) * .3s) both; }
  .page:not([data-anim="static"]) .cb__fig.is-act .cbf__mv,
  .page:not([data-anim="static"]) .cb__fig.is-act .cbf__lb { animation: cbf-move 1s var(--ease-out) 1.35s both; }
  .page:not([data-anim="static"]) .cb__fig.is-act .cbf__center { animation: cbf-pop .6s var(--ease-back) 2.3s both; }
}

/* 右の文：課題 → 3つの手立て → 結果（オレンジの面）→ 窓口 */
.cb__issue { display: flex; align-items: baseline; gap: 12px; font-size: 15px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
.cb__tag {
  flex-shrink: 0; padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-bg);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 2; letter-spacing: .08em;
}
.cb-steps { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.cb-step { padding: 16px 20px 15px; border-radius: var(--radius-m); background: var(--color-bg); }
.cb-step__biz { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.cb-step__no { color: var(--color-brand-soft); }
.cb-step__verb { padding: 0 10px; border-radius: var(--radius-xs); background: var(--color-tint); font-size: 12px; line-height: 1.9; letter-spacing: var(--ls-ja); }
.cb-step__text { margin-top: 4px; font-size: 14px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
.cb-result { margin-top: 16px; padding: 18px 22px 18px; border-radius: var(--radius-m); background: var(--color-brand); color: var(--color-on-brand); }
.cb-result__label { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .14em; color: var(--color-on-brand); } /* オレンジの面の上は白を透かさない（オレンジ版） */
.cb-result__main { margin-top: 4px; font-size: 16px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: var(--ls-ja); }
.cb-result__num { display: inline-flex; align-items: baseline; gap: 2px; margin: 0 4px; }
.cb-result__num .num { font-size: 40px; }
.cb-result__sub { margin-top: 2px; font-size: 14px; font-weight: var(--fw-medium); line-height: 1.8; letter-spacing: var(--ls-ja); }
.cb__window { margin-top: 18px; font-size: 14px; font-weight: var(--fw-medium); line-height: 1.95; letter-spacing: var(--ls-ja); }
.cb__more { margin-top: 6px; }

/* =========================================================
   05 これからの挑戦
   ========================================================= */
.future__list { margin: 0; padding: 0; list-style: none; }
.future__in { height: 100%; }
.future__talk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 32px; }
.future__talk-text { font-size: 15px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
/* 背景の図形（M12）：見出しの右の余白にだけ置く（見出しは幅を 66% までにして、右を空ける）。SP・タブレットは文字が全幅なので置かない */
.bgs--future .s1 { left: 80%; top: 132px; width: 6.4%; --c: var(--color-layer); --sp: -24; --i: 0; --fd: 6.8s; --fy: -10px; --fr: 6deg; }
.bgs--future .s2 { left: 77.6%; top: 214px; width: 1.8%; --c: var(--color-brand-mid); --blend: normal; --sp: -36; --i: 1; --fd: 4.8s; --fy: -7px; }
.bgs--future .s3 { left: 88%; top: 176px; width: 9%; --c: var(--color-line); --bw: 2px; --sp: 18; --i: 2; --fd: 11s; --fy: 8px; --fr: 0deg; }
@media (max-width: 1023px) { .bgs--future { display: none; } }
@media (min-width: 1024px) { .future .lsec__inner > .sec-head { max-width: 66%; } }

/* =========================================================
   タブレット（768px から）
   ========================================================= */
@media (min-width: 768px) {
  .biz-case__in { padding: 32px 30px 28px; }
  .biz-case__row { grid-template-columns: 7.2em minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .biz-case__row dt { justify-self: stretch; text-align: center; }
  .biz-case__title { font-size: 19px; }
  .biz-voice__text { font-size: 18px; }
  .cb-step { padding: 18px 24px 17px; }
  .cb-result { padding: 20px 26px; }
}

/* =========================================================
   PC（1024px から）
   ========================================================= */
@media (min-width: 1024px) {
  .biz__more { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; margin-top: 64px; align-items: start; }
  .cb__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 56px; align-items: center; }
}
@media (min-width: 1200px) {
  .biz-case__in { padding: 36px 36px 32px; }
  .biz-case__title { font-size: 20px; }
  .biz-case__row dd { font-size: 16px; }
  .biz-facts dd { font-size: 15px; }
  .biz-voice__text { font-size: 19px; }
  .cb__body { column-gap: 72px; }
}