/* パンフレットで作り直したブランド紹介ページの“足りない分”だけ。
   ⚠ 見た目は旧ページ（biz.css）が正。ここは biz.css に無い部品（専門家チーム・
     5領域のチップ・連携図）だけを、同じ語彙（.sub-ttl / .cl-biz / 色）で足す。
   ⚠ ここに旧ページの上書きを書かない。デザインを変えないのが目的。 */

/* 改行の事故を止める。
   ⚠ テーマは body に word-break: break-all を掛けていて、英語が
     「PERSON／AL」のように割れる。overflow-wrap: anywhere も使わない（同じことが起きる）。
     日本語は文字単位で折り返すのが正しいので word-break は normal に戻し、
     行頭に句読点が来ないよう line-break: strict を効かせる。 */
.biz-content, .biz-content * {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
/* 見出しは語の途中で折らない */
.biz-content h1, .biz-content h2, .biz-content h3, .biz-content h4 { overflow-wrap: normal; }

/* 連携図 */
.biz-content .link-flow { display: grid; gap: 10px; margin-top: 24px; }
.biz-content .link-flow .box { border: 1px solid #E8E8E8; border-radius: 10px; padding: 18px; text-align: center; background: #fff; }
.biz-content .link-flow .box b { display: block; font-size: 1.4rem; }
.biz-content .link-flow .box span { display: block; margin-top: 6px; font-size: 1.15rem; color: #6b6b6b; line-height: 1.8; }
.biz-content .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.biz-content .chips li { border: 1px solid #E8E8E8; border-radius: 999px; padding: 6px 16px; font-size: 1.15rem; background: #fff; }

/* 専門家チーム */
.biz-content .team-list { display: grid; gap: 18px; margin-top: 24px; }
.biz-content .team-list li { text-align: center; }
.biz-content .team-list li img {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 10px; display: block;
}
.biz-content .team-list .name { font-size: 1.4rem; }
.biz-content .team-list .role { margin-top: 6px; font-size: 1.15rem; color: #6b6b6b; line-height: 1.8; }

/* 5領域 */
.biz-content .five-box { background: #efe8d7; border-radius: 10px; padding: 24px 22px; margin-top: 30px; }
.biz-content .five-box p { line-height: 1.95; }
.biz-content .five-box ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.biz-content .five-box li { background: #fff; border-radius: 999px; padding: 6px 16px; font-size: 1.15rem; }

@media (min-width: 768px) {
  .biz-content .link-flow { grid-template-columns: 1fr 1fr 1fr; }
  .biz-content .team-list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
  .biz-content .team-list { grid-template-columns: repeat(6, 1fr); }
}

/* 区画ナビ：横スクロールのピル（2026-10-03 本部が候補Aを選択）。
   ⚠ もとの .mb-biz-nav は3列固定で、項目が3の倍数でないと最後の行が余っていた。
     ブランドごとに項目数が3〜6とばらつくので、**崩れない作り**にしてある。
   ⚠ **セレクタを旧ルールより強くすること。** `.mb-biz-nav ul li`（要素2つ）は
     `.biz-nav-pill li` より優先度が高く、width:33.3% と flex-wrap が残って2段に折り返す。
   ⚠ sticky で上に貼り付くので縦に伸ばさない。1行に収めて横に滑らせる。
   ⚠ 色は .cl-biz を継ぐ。テーマが a{color:#2B2B2B} を当てるので a 側で inherit に戻す。 */
.mb-biz-nav.biz-nav-pill {
  position: sticky; top: 65px; z-index: 10; background: #fff;
  margin-bottom: 36px; padding: 10px 0; border-bottom: 1px solid #E8E8E8;
}
.mb-biz-nav.biz-nav-pill ul {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; padding: 2px 20px; scrollbar-width: none;
  /* ⚠ safe を付ける。ただの center だと、はみ出したとき先頭が画面の外に切れる */
  justify-content: safe center;
}
.mb-biz-nav.biz-nav-pill ul::-webkit-scrollbar { height: 0; }
.mb-biz-nav.biz-nav-pill ul li { flex: 0 0 auto; width: auto; text-align: left; }
.mb-biz-nav.biz-nav-pill ul li a {
  display: block; color: inherit; font-size: 1.25rem; font-weight: 600;
  padding: 9px 18px; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap;
}
.mb-biz-nav.biz-nav-pill ul li a span::after { content: none; }   /* 旧CSSの「v」を消す */
.mb-biz-nav.biz-nav-pill ul li a:hover,
.mb-biz-nav.biz-nav-pill ul li a.is-current { background: currentColor; }
.mb-biz-nav.biz-nav-pill ul li a:hover span,
.mb-biz-nav.biz-nav-pill ul li a.is-current span { color: #fff; }
@media (min-width: 1025px) {
  .mb-biz-nav.biz-nav-pill { top: 100px; margin-bottom: 48px; }
}

/* 写真の高さを揃える（2026-10-14）
   ⚠⚠ **height では直らない。** common.css に `img{height:auto !important}` があり、
     下の .team-list の `height:110px` もこれに消されていた（丸が縦長になっていた）。
     !important には勝てないので **aspect-ratio で指定する。**
     幅が決まっていれば height:auto のままでも比率から高さが決まる。

   ⚠ 素材の比率がそろっていないのが元の原因。1.50（3:2）が大半だが、
     area-math / area-culture / personal-step02 / personal-step05 が 1.33、
     pure-hero が 1.25、going-out が 1.89。5枚並ぶ列で2枚だけ背が高くなっていた。
     撮り直さずに 3:2 で切り抜いて揃える。**object-fit を cover にしないと潰れる。** */
.biz-content .flex > img,
.biz-content .feature-list ul li > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* 専門家チームの顔写真は正円。素材は 1:1 から 0.80 までばらついている */
.biz-content .team-list li img { aspect-ratio: 1 / 1; }