/* =========================================================
   デザイン案：組み合わせ２（社内確認用）
   - FV ……………………………… 修正後のまま（css/styles.css）
   - ヘッダーの透過 …………… 参考：2
   - エルスピーナグループについて〜社会インフラの未来を支える … 参考：2
   - 各社の説明レイアウト …… ホライズン
   - グループ構成 ………………… 参考：2
   - 対応領域・未来への取り組み … ホライズン（見出しの大きな英字は参考：2 にそろえる）
   - エルスピーナとは〜お問い合わせ・フッター … 参考：2
   - 未来への取り組み：背景は紺のグラデーション、並べ方は参考：2（ファイル末尾で上書き）
   レイアウトは design-mix2/index.html（tools/build_designs.py で生成）
   ========================================================= */

.theme-mix { --en: "Barlow Condensed", "DM Sans", sans-serif; --navy: #00334d; --deep: #001a26; --blue: #0066b3; --sky: #4da6ff; --pale: #f4f7fa; --line: #e2e8f0; }
.theme-mix section { overflow: hidden; }
.theme-mix .bg-grid { display: none; }
.theme-mix .rounded-md, .theme-mix .rounded-sm { border-radius: 0 !important; }

/* ---------- ヘッダー（参考：2）：FVの上では透明＋白文字 ---------- */
.theme-mix #header:not(.scrolled) { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.theme-mix #header:not(.scrolled) .header-logo,
.theme-mix #header:not(.scrolled) .header-logotype { filter: brightness(0) invert(1); }
.theme-mix #header:not(.scrolled) .nav-link,
.theme-mix #header:not(.scrolled) #mobileMenuButton { color: #fff; }
.theme-mix #header nav a.border-2,
.theme-mix #header .md\:hidden a.border-2 { background: var(--blue); border-color: var(--blue); color: #fff; border-radius: 0; }
.theme-mix #header nav a.border-2:hover { background: #004d80; border-color: #004d80; }
.theme-mix #header:has(#mobileMenu:not(.hidden)) { background: rgba(255,255,255,.98); }

/* =========================================================
   見出し
   ========================================================= */
.theme-mix .section-header { position: relative; text-align: left; }
.theme-mix .section-header > p:first-child { margin: 0; font-family: var(--en); white-space: nowrap; pointer-events: none; }
.theme-mix .section-header > h2,
.theme-mix .section-header > h2 + p { position: relative; z-index: 1; }

/* 参考：2 の見出し（背景に大きな英字） */
.theme-mix .section-header { padding-top: clamp(26px, 4vw, 48px); }
.theme-mix .section-header > p:first-child {
  position: absolute; left: -4px; top: -.3em; z-index: 0;
  font-weight: 600; font-size: clamp(56px, 10vw, 128px); line-height: .9; letter-spacing: .02em; color: #e6f2ff;
}
.theme-mix .section-header > h2 { font-size: clamp(22px, 2.8vw, 32px); }
.theme-mix .sec-brand .section-header { text-align: center; }
.theme-mix .sec-brand .section-header > p:first-child { left: 50%; transform: translateX(-50%); }

/* =========================================================
   背景：参考：2 の白／うすいグレー、対応領域は白地に罫線（ホライズン）
   ========================================================= */
.theme-mix #about, .theme-mix #sites, .theme-mix #group, .theme-mix .sec-structure, .theme-mix .sec-brand, .theme-mix #fields { background: #fff; }
.theme-mix #company { background: var(--pale); }
.theme-mix #fields { border-top: 1px solid var(--line); }

/* =========================================================
   各社の説明（ホライズン）：写真タイル 3列
   ========================================================= */
.theme-mix .x-cos { display: grid; grid-template-columns: 1fr; gap: 40px 20px; }
@media (min-width: 768px) { .theme-mix .x-cos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .theme-mix .x-cos { grid-template-columns: repeat(3, 1fr); } }
.theme-mix .x-co { display: flex; flex-direction: column; gap: 14px; }
.theme-mix .x-co-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #cbd5e1; }
.theme-mix .x-co-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.theme-mix .x-co-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,26,38,.9), rgba(0,51,77,.1) 62%); transition: background .3s; }
.theme-mix .x-co:hover .x-co-ph::after { background: linear-gradient(0deg, rgba(0,102,179,.9), rgba(0,102,179,.15) 62%); }
.theme-mix .x-co:hover .x-co-ph img { transform: scale(1.04); }
.theme-mix .x-co-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px; color: #fff; }
.theme-mix .x-co-tag { display: inline-block; font-size: 11px; letter-spacing: .08em; border: 1px solid rgba(255,255,255,.5); padding: 2px 8px; margin-bottom: 10px; }
.theme-mix .x-co-cap h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.theme-mix .x-co-cap p { font-size: 12.5px; color: rgba(255,255,255,.8); margin-top: 2px; }
.theme-mix .x-co-desc { font-size: 14px; line-height: 1.85; color: #475569; }
.theme-mix .x-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.theme-mix .x-link:hover { color: #004d80; }

/* =========================================================
   対応領域（ホライズン）：PC は1行ずつ、SP はアコーディオン
   ========================================================= */
.theme-mix .x-fields { border-top: 1px solid var(--line); }
.theme-mix .x-fd { position: relative; display: grid; grid-template-columns: 70px 220px 1fr 220px; gap: 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.theme-mix .x-fd::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--blue); transition: width .5s ease; }
.theme-mix .x-fd:hover::after { width: 100%; }
.theme-mix .x-fd-no { font-family: var(--en); font-weight: 600; font-size: 38px; line-height: 1; color: var(--blue); }
.theme-mix .x-fd h3 { font-size: 19px; font-weight: 700; color: #0f172a; }
.theme-mix .x-fd p { font-size: 14px; line-height: 1.85; color: #475569; margin-bottom: 10px; }
.theme-mix .x-fd-ph { aspect-ratio: 16 / 10; overflow: hidden; background: #cbd5e1; }
.theme-mix .x-fd-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.theme-mix .x-fd:hover .x-fd-ph img { transform: scale(1.05); }
.theme-mix .x-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-mix .x-chip { font-size: 12px; padding: 2px 10px; border: 1px solid #b3d9ff; color: #004d80; }
.theme-mix #fields .field-item-no { font-family: var(--en); font-weight: 600; font-size: 15px; color: var(--blue); }
.theme-mix #fields .field-proc.is-on { background: transparent; border: 1px solid #b3d9ff; color: #004d80; border-radius: 0; }

/* =========================================================
   未来への取り組み（ホライズン）：紺のグラデーション × 半透明パネル（斜線なし）
   ========================================================= */
.theme-mix #future { background: linear-gradient(135deg, #00334d, #004d80); color: #fff; position: relative; }
.theme-mix #future .section-header > p:first-child { color: rgba(255,255,255,.07); }
.theme-mix #future .section-header h2 { color: #fff; }
.theme-mix #future .section-header > h2 + p { color: rgba(255,255,255,.75); }
.theme-mix .x-fus { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .theme-mix .x-fus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .theme-mix .x-fus { grid-template-columns: repeat(4, 1fr); } }
.theme-mix .x-fu { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; transition: background .3s, border-color .3s; }
.theme-mix .x-fu:hover { background: rgba(255,255,255,.1); border-color: rgba(77,166,255,.6); }
.theme-mix .x-fu-ph { aspect-ratio: 4 / 3; overflow: hidden; }
.theme-mix .x-fu-ph img { width: 100%; height: 100%; object-fit: cover; }
.theme-mix .x-fu-b { padding: 18px 18px 22px; }
.theme-mix .x-fu-no { font-family: var(--en); font-weight: 600; font-size: 28px; line-height: 1; color: var(--sky); }
.theme-mix .x-fu h3 { font-size: 17px; font-weight: 700; margin: 8px 0 6px; }
.theme-mix .x-fu p { font-size: 13.5px; line-height: 1.8; color: rgba(255,255,255,.75); }

/* =========================================================
   お問い合わせ・フッター（参考：2）
   ========================================================= */
.theme-mix #contact { background: var(--blue); }
.theme-mix #contact .section-header > p:first-child { color: rgba(255,255,255,.12); }
.theme-mix #contact .section-header > h2 { color: #fff; }
.theme-mix #contact .section-header + p { color: rgba(255,255,255,.85); }
.theme-mix #contact .bg-white { box-shadow: 0 20px 50px rgba(0,26,38,.25); border: 0; }
.theme-mix #contact button[type="submit"] { background: var(--navy); border-radius: 0; }
.theme-mix footer { background: var(--deep); }

@media (prefers-reduced-motion: reduce) {
  .theme-mix .x-co-ph img, .theme-mix .x-fd-ph img { transition: none; }
}

/* =========================================================
   組み合わせ２：未来への取り組みを参考：2 の並べ方に（縦長の写真 × 大きな番号）
   ========================================================= */
/* 背景は「組み合わせ」と同じ紺のグラデーション（css/design-mix.css のまま）。紺地に合わせて文字色を明るく */

.theme-mix2 .x-fus { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
@media (min-width: 1024px) { .theme-mix2 .x-fus { grid-template-columns: repeat(4, 1fr); } }
.theme-mix2 .x-fu,
.theme-mix2 .x-fu:hover { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
.theme-mix2 .x-fu-ph { aspect-ratio: 3 / 4; margin-bottom: 14px; background: rgba(255,255,255,.08); }
.theme-mix2 .x-fu-ph img { transition: transform .8s ease; }
.theme-mix2 .x-fu:hover .x-fu-ph img { transform: scale(1.05); }
.theme-mix2 .x-fu-b { padding: 0; }
.theme-mix2 .x-fu-no { font-size: 40px; color: var(--sky); }
.theme-mix2 .x-fu h3 { font-size: 17px; color: #fff; margin: 6px 0; }
.theme-mix2 .x-fu p { font-size: 13.5px; color: rgba(255,255,255,.75); }
@media (max-width: 480px) {
  .theme-mix2 .x-fu-no { font-size: 32px; }
  .theme-mix2 .x-fu h3 { font-size: 15px; }
  .theme-mix2 .x-fu p { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .theme-mix2 .x-fu-ph img { transition: none; } }

/* =========================================================
   各社の説明：2列の大きなタイル（写真 16:10・文字を一回り大きく）
   ========================================================= */
@media (min-width: 768px) { .theme-mix2 .x-cos { grid-template-columns: repeat(2, 1fr); gap: 48px 28px; } }
.theme-mix2 .x-co-ph { aspect-ratio: 16 / 10; }
.theme-mix2 .x-co-cap { padding: clamp(16px, 2.4vw, 28px); }
.theme-mix2 .x-co-cap h3 { font-size: clamp(18px, 2.2vw, 26px); margin-top: 4px; }
.theme-mix2 .x-co-desc { font-size: 14.5px; line-height: 1.9; }

/* =========================================================
   未来への取り組み：番号を大きくして写真の中（左下）に
   ========================================================= */
.theme-mix2 .x-fu { position: relative; }
.theme-mix2 .x-fu-ph { position: relative; }
.theme-mix2 .x-fu-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,26,38,.6) 0%, rgba(0,26,38,0) 42%); pointer-events: none; }
.theme-mix2 .x-fu-no {
  /* 説明ブロックの上端から、写真の下余白（14px）＋10px 上に置く＝写真の左下 */
  position: absolute; bottom: calc(100% + 14px + 10px); left: 16px; z-index: 1;
  font-size: clamp(56px, 6vw, 84px); line-height: 1; color: rgba(255,255,255,.6);
  text-shadow: 0 2px 16px rgba(0,26,38,.35);
}
.theme-mix2 .x-fu h3 { margin-top: 0; }
.theme-mix2 .x-fu-b { position: relative; }
@media (max-width: 480px) { .theme-mix2 .x-fu-no { font-size: 48px; bottom: calc(100% + 14px + 6px); left: 12px; } }
@media (max-width: 480px) { .theme-mix2 .x-co-cap h3 { font-size: 16px; } }

/* =========================================================
   対応領域：業種別の5分類（G2＋）
   写真と文字を左右交互（写真7：文字5）、背景は白とうすいグレーを交互。
   対応範囲は6工程を3×2のマスで（対応する工程だけ紺）。細かい情報は「詳しく見る」の先に。
   ========================================================= */
.theme-mix2 #fields { --fd-mist: #f4f7fa; --fd-line: #e2e8f0; --fd-off: #cbd5e1; }
.theme-mix2 .fd-list { display: grid; gap: clamp(24px, 3.4vw, 40px); }
.theme-mix2 .fd-row { display: grid; grid-template-columns: 1fr; background: #fff; }
.theme-mix2 .fd-row:nth-child(even) { background: var(--fd-mist); }
.theme-mix2 .fd-ph { position: relative; overflow: hidden; background: var(--fd-off); aspect-ratio: 16 / 10; }
/* 写真の元の縦横比で行の高さが変わらないよう、写真は枠いっぱいに重ねて表示 */
.theme-mix2 .fd-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.theme-mix2 .fd-row:hover .fd-ph img { transform: scale(1.03); }
.theme-mix2 .fd-wip { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 12px; color: #64748b; }
.theme-mix2 .fd-main { display: grid; gap: 12px; align-content: center; padding: clamp(24px, 3.4vw, 44px) clamp(28px, 4.4vw, 56px); min-width: 0; }
.theme-mix2 .fd-name { font-size: clamp(19px, 2vw, 24px); font-weight: 700; color: #0f172a; line-height: 1.3; letter-spacing: .02em; word-break: auto-phrase; }
.theme-mix2 .fd-lead { font-size: 14px; line-height: 1.85; color: #475569; max-width: 34em; }
.theme-mix2 .fd-label { font-size: 11px; letter-spacing: .12em; color: #64748b; margin-bottom: 6px; }
.theme-mix2 .fd-flow { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--fd-line); max-width: 28em; }
.theme-mix2 .fd-flow span { font-size: 11.5px; padding: 7px 6px; text-align: center; line-height: 1.35; color: var(--fd-off); background: #fff; border-right: 1px solid var(--fd-line); border-bottom: 1px solid var(--fd-line); }
.theme-mix2 .fd-flow span:nth-child(3n) { border-right: 0; }
.theme-mix2 .fd-flow span:nth-last-child(-n+3) { border-bottom: 0; }
.theme-mix2 .fd-flow span.on { background: var(--navy); color: #fff; border-color: rgba(255,255,255,.18); }
.theme-mix2 .fd-flow4 { grid-template-columns: repeat(4, 1fr); }
.theme-mix2 .fd-flow4 span { border-bottom: 0 !important; border-right: 1px solid rgba(255,255,255,.18) !important; }
.theme-mix2 .fd-flow4 span:last-child { border-right: 0 !important; }
.theme-mix2 .fd-open { justify-self: start; display: inline-flex; align-items: center; gap: 12px; background: none; border: 1px solid var(--navy); color: var(--navy); padding: 8px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.theme-mix2 .fd-open:hover { background: var(--navy); color: #fff; }
.theme-mix2 .fd-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.theme-mix2 .fd-pm { font-weight: 400; font-size: 14px; line-height: 1; }
.theme-mix2 .fd-panel { grid-column: 1 / -1; order: 3; border-top: 1px solid var(--fd-line); background: #fff; }
.theme-mix2 .fd-panel-in { display: grid; grid-template-columns: 1fr; gap: 20px 48px; padding: clamp(24px, 3.4vw, 40px) clamp(28px, 4.4vw, 56px); }
.theme-mix2 .fd-panel h4 { font-size: 12px; letter-spacing: .12em; color: var(--blue); margin: 0 0 10px; font-weight: 700; }
.theme-mix2 .fd-tg { font-size: 13px; line-height: 1.9; color: #0f172a; }
.theme-mix2 .fd-do { display: grid; gap: 6px; grid-template-columns: 1fr; column-gap: 32px; list-style: none; margin: 0; padding: 0; }
.theme-mix2 .fd-do li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.75; color: #475569; }
.theme-mix2 .fd-do li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--blue); }
.theme-mix2 .fd-common { margin-top: 40px; border-top: 1px solid var(--fd-line); padding-top: 18px; font-size: 13px; color: #475569; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.theme-mix2 .fd-common b { font-size: 11px; letter-spacing: .12em; color: var(--blue); font-weight: 700; }
@media (min-width: 760px) { .theme-mix2 .fd-do { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .theme-mix2 .fd-row { grid-template-columns: 7fr 5fr; }
  /* 「詳しく見る」を開いても写真の高さが変わらないよう、行ではなく写真と文字の高さをそろえる */
  .theme-mix2 .fd-ph, .theme-mix2 .fd-main { min-height: var(--fd-row-h, 300px); }
  .theme-mix2 .fd-main { padding: clamp(22px, 2.6vw, 32px); }
  .theme-mix2 .fd-row:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .theme-mix2 .fd-row:nth-child(even) .fd-ph { order: 2; }
  .theme-mix2 .fd-ph { aspect-ratio: auto; height: 100%; }
}
/* スマホ：写真を低く、対応している工程だけを小さく並べてすっきり */
@media (max-width: 760px) {
  .theme-mix2 .fd-ph { aspect-ratio: 2 / 1; }
  .theme-mix2 .fd-main { padding: 18px 18px 22px; gap: 12px; }
  .theme-mix2 .fd-name { font-size: 18px; }
  .theme-mix2 .fd-lead { font-size: 13px; line-height: 1.8; }
  .theme-mix2 .fd-label { margin-bottom: 4px; }
  .theme-mix2 .fd-flow { display: flex; flex-wrap: wrap; gap: 6px; border: 0; max-width: none; }
  .theme-mix2 .fd-flow span { display: none; border: 0 !important; }
  .theme-mix2 .fd-flow span.on { display: inline-block; padding: 4px 9px; font-size: 11.5px; }
  .theme-mix2 .fd-open { width: 100%; justify-content: center; padding: 9px; }
  .theme-mix2 .fd-panel-in { padding: 20px 18px 24px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .theme-mix2 .fd-ph img { transition: none; } }

/* =========================================================
   社会インフラの未来を支える：冒頭のサイクル図（2改）
   ========================================================= */
.theme-mix2 .cy { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; margin: 8px 0 clamp(48px, 6vw, 72px); }
.theme-mix2 .cy-fig svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.theme-mix2 .cy-tx { display: grid; gap: 14px; }
.theme-mix2 .cy-tx h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 700; color: #0f172a; line-height: 1.55; }
.theme-mix2 .cy-tx p { font-size: 14px; line-height: 1.95; color: #475569; }
@media (min-width: 900px) { .theme-mix2 .cy { grid-template-columns: minmax(0, 520px) 1fr; gap: 56px; } }

/* 対応領域「詳しく見る」：主な対応例のみ */
.theme-mix2 .fd-panel-in { display: block; }
.theme-mix2 .fd-panel-in .fd-do { margin-top: 2px; }
.theme-mix2 .fd-note { margin-top: 14px; font-size: 12.5px; color: #64748b; }
@media (min-width: 1024px) { .theme-mix2 .fd-panel-in .fd-do { grid-template-columns: 1fr 1fr 1fr; } }
/* サイクル図：外周を光が時計回りにゆっくりめぐる */
.theme-mix2 .cy-orbit { transform-origin: 320px 320px; animation: cySpin 8s linear infinite; }
@keyframes cySpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .theme-mix2 .cy-orbit { animation: none; } }


/* ===== 事業内容（組み合わせ２）：対応領域の代わり。比較ページの「5B 流れ＋横一列」 ===== */
.bz-intro { max-width: none; font-size: 15px; line-height: 1.95; color: #475569; margin: 0 0 36px; }
.bz-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.bz-band span:first-child { grid-column: span 2; } /* 設計・製造は配電盤・制御盤と産業システムの2事業分 */
.bz-band span { background: #00334d; color: #fff; font-size: 14px; font-weight: 700; text-align: center; padding: 10px 6px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.bz-band span:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.bz-band span:nth-child(2) { background: #004d80; }
/* 先端（＞）はカードの外のすき間へ出す：まっすぐな部分がカードの幅いっぱいになる */
.bz-band span { margin-right: -14px; padding-right: 20px; }
.bz-band span:last-child { margin-right: 0; padding-right: 6px; }
.bz-band span:nth-child(3) { background: #0066b3; }
.bz-band span:nth-child(4) { background: #2f86d0; }
.bz-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bz-card { border: 1px solid #e2e8f0; background: #fff; padding: 28px 14px 24px; display: grid; gap: 12px;
  justify-items: center; text-align: center; align-content: start; min-width: 0; }
.bz-ico { width: 64px; height: 64px; border-radius: 50%; background: #00334d; color: #fff; display: grid; place-items: center; }
.bz-ico svg { width: 32px; height: 32px; }
.bz-nm { margin: 0; font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; line-height: 1.4; color: #0f172a; word-break: auto-phrase; }
.bz-sh { margin: 0; font-size: 13px; line-height: 1.75; color: #475569; }
.bz-stp { display: none; }
/* PC：事業名が2行になっても説明文の開始位置をそろえ、説明文は意味の切れ目で改行する */
@media (min-width: 901px) {
  .bz-cards { grid-template-rows: auto auto auto; }
  .bz-card { grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; padding: 30px 12px 26px; }
  .bz-nm { align-self: center; }
  .bz-sh span { display: inline-block; }
}
@media (max-width: 900px) {
  .bz-band { display: none; }
  .bz-cards { grid-template-columns: 1fr; }
  .bz-card { justify-items: start; text-align: left; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 18px 16px; }
  .bz-stp { display: block; grid-column: 1 / -1; justify-self: start; font-size: 11.5px; font-weight: 700; color: #fff; background: #00334d; padding: 3px 10px; }
  .bz-ico { width: 52px; height: 52px; }
  .bz-ico svg { width: 26px; height: 26px; }
  .bz-sh { grid-column: 1 / -1; }
  .bz-sh span { display: block; } /* 「、」がないので、スマホでも区切りで改行する */
}

/* グループ構成（PC）：分岐線を会社の箱と同じ列（すき間 0.75rem）にそろえ、上の縦線と中央の線を一直線に */
.theme-mix .sec-structure .grid.grid-cols-5.-mt-px { column-gap: .75rem; }
.theme-mix .sec-structure .h-px.mx-\[10\%\] { margin-inline: calc((100% - 3rem) / 10); }
.theme-mix .sec-structure .grid.grid-cols-5.-mt-px .w-px,
.theme-mix .sec-structure .relative.flex.flex-col.items-center > .w-px { width: 1px; margin-inline: auto; }