/* ==================================================
   富士梱包 事業内容ページ STYLES
   ================================================== */

/* ---------- Global (business-page) ---------- */
.business-page *, .business-page *::before, .business-page *::after {
  box-sizing: border-box;
}
.business-page { margin: 0; padding: 0; background: var(--color-bg-gray, #f3f3f3); }
.business-page ul  { list-style: none; margin: 0; padding: 0; }
.business-page a   { text-decoration: none; color: inherit; }
.business-page img { display: block; max-width: 100%; }
.business-page p   { margin: 0; }
.business-page h1, .business-page h2, .business-page h3 { margin: 0; }

/* Header（top-page と共通クラスを再利用） */
.business-page .top-header {
  background: rgba(0, 12, 33, .9);
}

/* ==================================================
   CONTENT HEADER / BUSINESS
   - ページタイトル部分（濃紺）
   - タブナビ部分（濃紺）
   ================================================== */
.business-header {
  background: #000c21;
  width: 100%;
}

/* ---- Title area ---- */
/* 左右余白は1920pxで300pxになる可変値（狭い画面では最低40px） */
.business-header__title {
  padding: 0 max(var(--gutter), calc((100% - var(--content-max)) / 2)) 40px;
  display: flex;
  align-items: flex-end;
  min-height: 250px;
  padding-top: 100px; /* header offset */
}

.business-header__title-inner {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Title group: "Business | 事業内容" */
.business-title-group {
  display: flex;
  align-items: stretch;
  gap: 30px;
  flex-shrink: 0;
}

.business-title-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

.business-title-en {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 0;
}

.business-title-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2.4px;
}

.business-title-sep {
  width: 5px;
  background: #ca242e;
  align-self: stretch;
}

.business-tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  color: #fff;
  line-height: 2;
}

/* ---- Tab nav ---- */
.business-header__tabs {
  background: #000c21;
  padding: 50px max(var(--gutter), calc((100% - var(--content-max)) / 2)) 100px;
  display: flex;
  justify-content: center;
}

.business-tabs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  grid-template-rows: repeat(2, 100px);
  gap: 25px;
  width: min(1100px, 100%);
}

/* Individual tab button */
.business-tab {
  background-color: #0050d1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 15px 20px 15px 16px;
  width: 100%;
  height: 100px;
  transition: opacity .2s;
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* 選択（アクティブ）・ホバー時の背景写真レイヤー（Figma 2149:2810 準拠）
   各タブの --tab-photo（=パネルのヒーロー帯と同じ写真）を暗いオーバーレイ越しに表示 */
.business-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 支給画像が既に青トーン済みなので、オーバーレイは文字の可読性のため左だけ軽く落とす程度に */
  background-image:
    linear-gradient(90deg, rgba(0, 12, 33, .4) 0%, rgba(0, 12, 33, .1) 45%, rgba(0, 12, 33, 0) 100%),
    var(--tab-photo);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .3s ease;
}
.business-tab:hover::before,
.business-tab.is-active::before { opacity: 1; }

.business-tab.is-active {
  outline: 2px solid rgba(255, 255, 255, .6);
  outline-offset: -2px;
}

/* 中身は写真レイヤーより前面に */
.business-tab__inner,
.business-tab__arrow {
  position: relative;
  z-index: 1;
}

.business-tab__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.business-tab__icon {
  /* 丸は付けず、カラーアイコンをそのまま配置（Figma 2149:2810） */
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-tab__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.business-tab__text {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #fff;
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-style: normal;
}

.business-tab__ja {
  display: block;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.business-tab__en {
  display: block;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .6px;
  white-space: nowrap;
  opacity: .85;
}

.business-tab__arrow {
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
}

/* Grid positioning */
.business-tab:nth-child(1) { grid-column: 1; grid-row: 1; } /* 商業印刷全般 */
.business-tab:nth-child(2) { grid-column: 2; grid-row: 1; } /* アッセンブリ作業 */
.business-tab:nth-child(3) { grid-column: 3; grid-row: 1; } /* 梱包作業 */
.business-tab:nth-child(4) { grid-column: 1; grid-row: 2; } /* 発送業務 */
.business-tab:nth-child(5) { grid-column: 2; grid-row: 2; } /* 資材保管業務 */

/* ==================================================
   TAB PANELS
   ================================================== */
.business-panel { display: none; }
.business-panel.is-active { display: block; }

/* ---- Hero ---- */
.business-panel__hero {
  position: relative;
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 max(var(--gutter), calc((100% - var(--content-max)) / 2));
}

.business-panel__hero-bg {
  position: absolute;
  inset: -30px;
  overflow: hidden;
}

.business-panel__hero-bg img {
  width: 110%;
  height: 110%;
  object-fit: cover;
  /* 供給画像が既にブラー済みのため、CSS側のブラーは掛けない（二重ブラー回避・2026-07-08ユーザー指示） */
  transform: scale(1.05);
}

.business-panel__hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(235, 235, 235, .35);
}

/* 商業印刷以外（--dark）は写真を加工せずそのまま見せる＝オーバーレイなし（2026-07-08ユーザー指示）。
   白文字の可読性は下の text-shadow で確保する */
.business-panel__hero--dark .business-panel__hero-bg::after {
  background: transparent;
}

.business-panel__hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.business-panel__hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 530px;
  max-width: 100%;
  flex-shrink: 0;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-weight: 600;
  color: #3e3e3e;
}

.business-panel__hero--dark .business-panel__hero-text {
  color: #fff;
  /* オーバーレイを外したぶん、白文字の可読性を影で確保（写真は無加工のまま） */
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 0 4px rgba(0, 0, 0, .5);
}

.business-panel__hero-title {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.business-panel__hero-title h2 {
  font-size: 40px;
  letter-spacing: 2px;
  line-height: 1.2;
  font-weight: 600;
}

.business-panel__hero-title .hero-en {
  font-size: 18px;
  letter-spacing: .9px;
}

.business-panel__hero-desc {
  font-size: 16px;
  letter-spacing: .8px;
  line-height: 1.7;
}

.business-panel__hero-images {
  display: flex;
  gap: clamp(20px, 2.6vw, 50px);
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  margin-left: 30px;
}

.business-panel__hero-img {
  /* 1920pxでは320×240。狭い画面では縮む */
  width: clamp(180px, 17vw, 320px);
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,.85);
  overflow: hidden;
}
.business-panel__hero-img img,
.business-service-img img,
.business-service-img video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Detail ---- */
.business-panel__detail {
  background: #fff;
  padding: 80px max(var(--gutter), calc((100% - var(--content-max)) / 2)) 150px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Sub-tabs (商業印刷全般) */
.business-subtabs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.business-subtab {
  background: #0050d1;
  color: #fff;
  border: none;
  cursor: pointer;
  height: 60px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .9px;
  transition: opacity .2s;
}
.business-subtab:hover { opacity: .85; }
.business-subtab.is-active {
  outline: 2px solid rgba(0,80,209,.5);
  outline-offset: 2px;
}

/* 取扱商品例のタグ（切替なし・押せない）。
   ⚠️ この位置の指定は、ファイル下部「商業印刷タブ：モック準拠の作り込み」ブロックの
      同名セレクタに後勝ちで全部上書きされる。見た目を変えるときは下部のブロックを触ること。
      （2026-09-02：ここを直しても表示が変わらず、原因究明に時間を使ったので明記しておく） */

/* ---- Service Group ---- */
.business-service-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 2026-09-02 作り直し（ユーザー指摘「角丸が多くてAIデザイン感」「安っぽく見える」）。
   以前は全幅の青いグラデ帯＋角丸12px＋大きめの影で、巨大なボタンのように見えていた。
   赤ダッシュ＋罫線という、サイトの他の見出し（.business-mid-heading / .business-items-label）と
   同じ語彙に寄せ、囲みと影をやめた。 */
.business-service-header {
  background: none;
  color: #16325c;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .06em;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0 0 14px;
  width: 100%;
  border-radius: 0;
  border-bottom: 1px solid rgba(10, 40, 91, .14);
  box-shadow: none;
}
/* 見出し左の赤アクセント */
.business-service-header::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 20px;
  margin-right: 14px;
  border-radius: 0;
  background: var(--color-red, #ca242e);
}

/* 2026-09-02：左右中央寄せ＋左右paddingをやめ、2カラムのグリッドに。
   以前は justify-content:center と padding:0 3vw のせいで、写真の左端が
   見出しの左端より110pxほど内側に入り、見出し・写真・本文が揃っていなかった。 */
.business-service-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 0;
}

.business-service-img {
  background: var(--color-bg-gray, #f3f3f3);
  width: 100%;
  aspect-ratio: 3 / 2;
}

.business-service-desc {
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .9px;
  color: #3e3e3e;
  line-height: 1.6;
  max-width: 530px;
}

/* ---- Results (実績) ---- */
.business-results {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.business-results__heading {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 1.2px;
  color: #3e3e3e;
}

.business-results__heading::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background: #ca242e;
  flex-shrink: 0;
}

.business-results__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.business-result-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(400px, 100%);
  align-items: center;
}

.business-result-card__img {
  background: var(--color-bg-gray, #f3f3f3);
  width: 100%;
  aspect-ratio: 400 / 275;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0;   /* 写真は角0に統一（2026-09-02） */
  box-shadow: 0 12px 30px rgba(10, 40, 91, .10);
  transition: box-shadow .4s ease;
}
.business-result-card:hover .business-result-card__img {
  box-shadow: 0 20px 44px rgba(10, 40, 91, .18);
}
.business-result-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-result-card p {
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  color: #3e3e3e;
  text-align: center;
}

/* ---- Assembly: Material grid ---- */
.business-material-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
}

.business-material-item {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}

.business-material-item__label {
  background: var(--color-bg-gray, #f3f3f3);
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  color: #0050d1;
}

.business-material-item__img {
  background: var(--color-bg-gray, #f3f3f3);
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.business-material-item__img img,
.business-shipping-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Shipping: Row layout ---- */
.business-shipping-rows {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(var(--content-max), 100%);
  margin: 0 auto;
}

.business-shipping-row {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: center;
  justify-content: center;
}

.business-shipping-img {
  background: var(--color-bg-gray, #f3f3f3);
  width: min(500px, 100%);
  aspect-ratio: 5 / 3;
  flex-shrink: 0;
  overflow: hidden;
}

.business-shipping-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(530px, 100%);
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #3e3e3e;
}

.business-shipping-text h3 {
  font-size: 28px;
  letter-spacing: 1.4px;
  line-height: 1.6;
  font-weight: 600;
}

.business-shipping-text p {
  font-size: 16px;
  letter-spacing: .8px;
  line-height: 1.7;
}

/* ---- Mid-heading ---- */
.business-mid-heading {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 1.2px;
  color: #3e3e3e;
}

.business-mid-heading::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background: #ca242e;
  flex-shrink: 0;
}

/* ==================================================
   Strengths（各パネルの「強み」・recruit カンプの feature card 準拠）
   ================================================== */
.business-strengths {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.business-strength-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.business-strength-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(10, 40, 91, .08);
  border-radius: 4px;
  padding: 40px 30px 30px;
  box-shadow: 0 10px 30px rgba(10, 40, 91, .06);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
/* 上の3色アクセント（企業情報カードと共通の質感） */
.business-strength-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-blue, #0050d1) 0 64%, var(--color-red, #ca242e) 64% 100%);
}
/* タッチ端末では一度タップすると :hover が残り、カードが浮いた（画像が拡大した）まま固まる。
   マウスがある環境だけに限定する（2026-09-01・お客様の声と同じ対応をサイト全体へ）。 */
@media (hover: hover) and (pointer: fine) {
  .business-strength-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(10, 40, 91, .14);
  }
}
.business-strength-card__num {
  font-family: var(--font-deco, 'Helvetica Neue', sans-serif);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(0, 80, 209, .16);
}
.business-strength-card h4 {
  margin: 12px 0 12px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .06em;
  color: #222;
}
.business-strength-card p {
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.95;
  color: #3a3d40;
}

/* ---- 既存カードのホバー演出（recruit と同じ手応え） ---- */
.business-service-img,
.business-material-item__img,
.business-shipping-img,
.business-result-card__img { overflow: hidden; }
/* 写真は角0・影なし（2026-09-02）。
   以前は border-radius:14px ＋ 影で、写真がシールのように浮いて安っぽく見えていた
   （この角丸はFigma由来ではなく実装時にこちらで足したもの）。
   物流・製造の現場写真は、角を立てて影を外したほうが締まる。 */
.business-service-img,
.business-material-item__img,
.business-shipping-img,
.business-result-card__img,
.business-panel__hero-img {
  border-radius: 0;
}
.business-service-img { box-shadow: none; }
.business-service-img img,
.business-material-item__img img,
.business-shipping-img img,
.business-result-card__img img {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.business-material-item,
.business-result-card { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
/* タッチ端末では一度タップすると :hover が残り、カードが浮いた（画像が拡大した）まま固まる。
   マウスがある環境だけに限定する（2026-09-01・お客様の声と同じ対応をサイト全体へ）。 */
@media (hover: hover) and (pointer: fine) {
  .business-service-group:hover .business-service-img img,
  .business-material-item:hover .business-material-item__img img,
  .business-shipping-row:hover .business-shipping-img img,
  .business-result-card:hover .business-result-card__img img {
    transform: scale(1.06);
  }
  .business-material-item:hover,
  .business-result-card:hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .business-strength-card,
  .business-material-item,
  .business-result-card,
  .business-service-img img,
  .business-material-item__img img,
  .business-shipping-img img,
  .business-result-card__img img { transition: none; }
}

/* ==================================================
   Flow（ご依頼の流れ・recruit カンプの FLOW 準拠）
   ================================================== */
.business-flow {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* 一覧・行カード・丸番号などの本体スタイルは
   「FLOW：縦並びの行カードに（モック準拠・全パネル共通）」ブロックに集約（下部） */

/* ---- Placeholder (未設計) ---- */
.business-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #999;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
}

/* CONTACT帯の青背景版（.business-contact）は 2026-10-07 に削除。全ページでトップと同じ白地のデザインに統一（top.css .top-contact） */

/* ==================================================
   RESPONSIVE
   デザインは1920px基準。狭い画面での崩れ防止
   ================================================== */

/* ノートPC（〜1440px）：タブ内の余裕を確保 */
@media (max-width: 1440px) {
  .business-tab__icon { width: 48px; height: 48px; }
  .business-tab__ja { font-size: 16px; }
  .business-tab__en { font-size: 11px; }
}

/* タブレット（〜999px）：ヒーローを縦積みに */
@media (max-width: 999px) {
  /* 対応作業：2カラムが窮屈になる幅から縦積みに。
     写真は横幅いっぱい（角0のまま）にして、その下に本文を置く */
  .business-service-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .business-panel__hero {
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .business-panel__hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .business-panel__hero-text { width: 100%; }

  .business-panel__hero-images {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .business-panel__hero-img { width: clamp(180px, 40vw, 320px); }

  .business-tabs-grid {
    grid-template-columns: repeat(2, minmax(0, 350px));
    grid-template-rows: none;
    grid-auto-rows: 100px;
    justify-content: center;
  }

  /* 2列に組み直すため固定配置を解除 */
  .business-tab:nth-child(1),
  .business-tab:nth-child(2),
  .business-tab:nth-child(3),
  .business-tab:nth-child(4),
  .business-tab:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* スマホ（〜767px） */
@media (max-width: 767px) {
  .business-header__title {
    padding-top: 90px;
    min-height: 0;
  }

  /* タイトルとキャッチコピーを縦積みに（横並びだとコピーが細い列に潰れる） */
  .business-header__title-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .business-title-en { font-size: 40px; }
  .business-tagline {
    font-size: 15px;
    line-height: 1.9;
  }
  /* 改行位置は画面幅に任せる */
  .business-tagline br { display: none; }

  .business-header__tabs {
    padding-top: 30px;
    padding-bottom: 60px;
  }

  .business-tabs-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 80px;
    gap: 15px;
  }

  .business-tab { height: 80px; }

  .business-panel__hero-title h2 { font-size: 30px; }

  .business-panel__hero-images {
    flex-direction: column;
    align-items: center;
  }

  .business-panel__hero-img { width: min(320px, 100%); }

  .business-panel__detail {
    padding-top: 50px;
    padding-bottom: 80px;
    gap: 50px;
  }

  .business-subtab {
    width: calc(50% - 10px);
    font-size: 15px;
    height: 50px;
  }

  /* 罫線見出しになったので左右paddingは持たせない（2026-09-02） */
  .business-service-header {
    font-size: 18px;
    padding: 0 0 12px;
  }
  .business-service-header::before {
    height: 18px;
    margin-right: 12px;
  }

  .business-results__heading,
  .business-mid-heading { font-size: 20px; }

  .business-shipping-text h3 { font-size: 22px; }

  .business-strength-grid { grid-template-columns: minmax(0, 1fr); }
  .business-strengths { gap: 24px; }
  /* フローのレスポンシブは基本定義の直後（下部）にまとめて記述
     ※基本定義がこの位置より後にあるため、ここに書くと後勝ちで効かない */
}

/* タブレット（768〜999px）：強みを2列に（767px以下の1列指定を上書きしないよう範囲指定） */
@media (min-width: 768px) and (max-width: 999px) {
  .business-strength-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================
   商業印刷タブ：モック準拠の作り込み（2026-07-08）
   青セクション＋商品グリッド＋FAQ。角丸は控えめ（モック準拠）
   ================================================== */

/* 強みカードの角丸を控えめに（モック準拠） */
.business-strength-card { border-radius: 4px; }

/* 取扱商品例のタグ（切替なし・押せない）。※この定義が有効版。上方（.business-subtabs--static）の
   同名ブロックはこのブロックに後勝ちで上書きされるので、変更するときは必ずこちらを触ること。

   2026-09-02：アウトラインのピル（白地＋青枠＋青文字・中央寄せ）から
   「点区切りのテキスト列」に変更。実体は <span> で押せない（cursor:default）のに
   完全にボタンの見た目で、特にSPで誤タップを誘っていたため。
   ※現在この見た目を使うのは梱包作業パネルの「取扱商品例」3グループのみ。
     商業印刷／アッセンブリのチップ帯は、すぐ下の写真付き商品カードと内容が重複していたため削除済み。 */
.business-subtabs--static {
  justify-content: flex-start;
  gap: 8px;
  /* 1行が1200px幅いっぱいに伸びると、項目が離れすぎて拾い読みしづらい。
     行長を抑えて視線の移動を短くする */
  max-width: 760px;
}
/* 枠なし・角丸4pxの「塗りタグ」。丸ピル＋枠だとボタンに見えてしまうので、
   記事タグのような “ラベル” の見た目にして、押せないことが伝わるようにしている */
.business-subtabs--static .business-subtab {
  cursor: default;
  width: auto;
  height: auto;
  padding: 7px 14px;
  background: rgba(0, 80, 209, .06);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  color: #16325c;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
}
.business-subtabs--static .business-subtab::before { content: none; }
.business-subtabs--static .business-subtab:hover { opacity: 1; }

/* 「取扱商品例」のグループ（見出し＋タグ列）。
   親の .business-panel__detail が gap:80px の flex 縦なので、束ねずに置くと
   見出しとその一覧が80px離れてしまう。ここで1セットにまとめて間隔を握る。 */
/* ==================================================
   認証バンド（2026-09-02）
   ISO9001・プライバシーマークは企業情報ページにしか無く、発注検討で最初に見る
   事業内容ページからは見えていなかったので、全5パネルの「強み」の直後に置いている。
   ================================================== */
/* 2026-09-02 作り直し：囲み・淡い青地・盾アイコンをやめ、
   会社概要テーブル（.company-profile-table）と同じ「見出し列＋本文列の行組み」に寄せた。
   見出しの「認証」は取扱商品例と同じ .business-items-label を流用している。 */
.biz-certs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.biz-certs__list {
  margin: 0;
  border-top: 1px solid rgba(10, 40, 91, .12);
}
.biz-cert {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 4px 30px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(10, 40, 91, .12);
}
.biz-cert__name {
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .06em;
  color: #16325c;
}
.biz-cert__body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.biz-cert__no {
  font-family: var(--font-en, 'Poppins', sans-serif);
  font-size: 12px;
  letter-spacing: .06em;
  color: #6b7280;
}
.biz-cert__text {
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: #3a3d40;
}
.biz-certs__link { margin: 2px 0 0; }
/* .business-page a { color: inherit } のリセットに負けないよう色を明示する */
.biz-certs__link a,
.biz-certs__link a:link,
.biz-certs__link a:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--color-blue, #0050d1);
}
/* 行末の矢印 */
.biz-certs__link a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .biz-certs__link a:hover { text-decoration: underline; }
  .biz-certs__link a:hover::after { transform: rotate(45deg) translate(2px, -2px); }
}
@media (max-width: 767px) {
  /* 240pxの見出し列を確保できないので、認証名を上に載せる縦積みに */
  .biz-cert {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px 0;
  }
  .biz-cert__text { font-size: 14px; }
}

/* 見出し（取扱商品例）＋グループをこのブロックで束ねる。
   .business-strengths / .business-flow と同じ作りで、親の gap:80px はブロック間だけに効かせる。
   gap は .business-strengths（32px）に合わせている。 */
.business-items {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.business-items-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.business-items-group .business-items-label { margin: 0; }

/* ---- 青いサービスセクション（全幅） ----
   ※このセクション専用の落ち着いた深い青（単色＝2連続でも継ぎ目が出ない）。
     元のブランド青（--color-blue）は変更しない */
.biz-service {
  background: #1e3464;
  padding: 76px max(var(--gutter), calc((100% - var(--content-max)) / 2));
  overflow-x: clip;
}
.biz-service + .biz-service { padding-top: 24px; }
.biz-service__inner { max-width: var(--content-max); margin: 0 auto; }

.biz-service__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .08em;
  color: #fff;
  margin-bottom: 34px;
}
.biz-service__label::before {
  content: "";
  width: 4px;
  height: 20px;
  background: var(--color-red, #ca242e);
  flex-shrink: 0;
}

.biz-service__intro {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 44px;
}
/* 商品カードグリッドを持たないセクション（アッセンブリのセット・封入作業など）で
   下の余白が二重になるのを防ぐ（2026-09-03） */
.biz-service__intro:last-child { margin-bottom: 0; }
.biz-service__intro-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.biz-service__intro-media img,
.biz-service__intro-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.biz-service__intro-text { color: #fff; }
.biz-service__intro-text h4 {
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: .04em;
  margin: 0 0 20px;
}
.biz-service__intro-text p {
  font-size: 15px;
  line-height: 2;
  color: rgba(255, 255, 255, .9);
}
.biz-service__note {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, .58);
}

/* 商品グリッド（minmax(0,1fr)で長いラベルによる横はみ出しを防ぐ） */
.biz-product-grid { display: grid; gap: 22px; }
.biz-product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.biz-product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.biz-product-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
/* タッチ端末では一度タップすると :hover が残り、カードが浮いた（画像が拡大した）まま固まる。
   マウスがある環境だけに限定する（2026-09-01・お客様の声と同じ対応をサイト全体へ）。 */
@media (hover: hover) and (pointer: fine) {
  .biz-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .22);
  }
}
.biz-product-card__img { aspect-ratio: 4 / 3; overflow: hidden; }
.biz-product-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz-product-card__img--ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #eef2f8, #dce4f1);
}
/* 写真が未支給であることを、アイコンだけでなく文字でも伝える（2026-09-02 ユーザー指示）。
   プレースホルダーの箱は3パネル共通なので、CSSの ::after で一括して出す。 */
.biz-product-card__img--ph::after {
  content: "準備中";
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--color-blue, #0050d1);
  opacity: .55;
}
.biz-product-card__ph-icon {
  width: 42px;
  height: 42px;
  color: var(--color-blue, #0050d1);
  opacity: .32;
}
.biz-product-card__label {
  /* 「硬質塩ビパッケージ」のような複合語のラベル対策（2026-09-02）。
     body の word-break:auto-phrase は文節を切らないので、この語は
     「硬質塩ビパッケー／ジ」と最後の1文字だけが落ちていた。
     短いラベルはどこで切ってもよいので auto-phrase を打ち消し、balance で行長を均す
     （実測：125/16px → 62/78px）。 */
  word-break: normal;
  text-wrap: balance;
  padding: 16px 10px;
  text-align: center;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  color: #16325c;
}

/* ---- FAQ（アコーディオン・details/summary） ---- */
/* 見出しと1問目の間隔。.business-strengths（32px）・.business-flow（40px）と違って
   コンテナのルール自体が無く、見出しと本体がくっついていた（2026-09-01 修正）。
   同じ白カードが並ぶ「強み」に合わせて 32px。 */
.biz-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.biz-faq__list { display: flex; flex-direction: column; gap: 14px; }
.biz-faq__item {
  background: #fff;
  border: 1px solid rgba(10, 40, 91, .1);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(10, 40, 91, .05);
  overflow: hidden;
}
.biz-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  color: #16325c;
}
.biz-faq__q::-webkit-details-marker { display: none; }
.biz-faq__q::before {
  content: "Q";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue, #0050d1);
  color: #fff;
  font-family: var(--font-deco, 'Helvetica Neue', sans-serif);
  font-weight: 700;
  border-radius: 4px;
}
.biz-faq__q::after {
  content: "";
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-blue, #0050d1) 0 0) center / 100% 2px no-repeat,
    linear-gradient(var(--color-blue, #0050d1) 0 0) center / 2px 100% no-repeat;
  transition: transform .3s ease;
}
.biz-faq__item[open] .biz-faq__q::after { transform: rotate(45deg); }
.biz-faq__a {
  padding: 0 26px 22px 72px;
  font-size: 15px;
  line-height: 2;
  color: #3a3d40;
}

/* ==================================================
   FLOW（ご依頼の流れ・採用ページ FLOW と同テイスト）
   4カラム・青 STEP 0N・区切り線・ステップ間の青い矢印（2026-09-02 に赤→青へ変更）
   ================================================== */
.business-flow-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bstep;
}
.business-flow-item {
  position: relative;
  padding: 0 26px;
  border-left: 1px solid rgba(10, 40, 91, .15);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.business-flow-item:first-child {
  border-left: none;
  padding-left: 0;
}
/* STEP 0N のラベル。
   2026-09-02：見出しの「Flow」ラベル（.section-heading__en）と同じ青に変更。
   セレクタを2クラスにしているのは、下の `.business-flow-item p`（詳細度0-1-1・かつ後方）に
   `.business-flow-item__num` 単体（0-1-0）が負けて色指定が効いていなかったため。
   ※そのため以前の指定（赤）はそもそも画面に出ておらず、本文と同じ #3a3d40 で表示されていた。 */
.business-flow-item .business-flow-item__num {
  margin: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
  font-family: var(--font-deco, 'Helvetica Neue', sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--color-blue, #0050d1);
}
.business-flow-item__num::before {
  counter-increment: bstep;
  content: "STEP 0" counter(bstep);
}
.business-flow-item h4 {
  margin: 10px 0 8px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .08em;
  color: #222;
}
.business-flow-item p {
  margin: 0;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: 13.5px;
  line-height: 1.9;
  color: #3a3d40;
}
/* ステップ間をつなぐ矢印（4列時のみ） */
.business-flow-item::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -13px;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-blue, #0050d1);
  border-right: 2px solid var(--color-blue, #0050d1);
  transform: rotate(45deg);
}
.business-flow-item:last-child::after { display: none; }

/* フロー レスポンシブ（基本定義の直後に置く＝後勝ちで確実に効かせる）
   タブレット(768〜999px)=2列 ／ SP(〜767px)=1列。矢印・左ボーダーは解除 */
@media (min-width: 768px) and (max-width: 999px) {
  .business-flow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 26px; }
  .business-flow-item { border-left: none; padding: 0; }
  .business-flow-item::after { display: none; }
}
/* SPは「1列に積むだけ」→「縦タイムライン」に変更（2026-09-02 ユーザー指示）。
   以前は区切りが何も無く、STEP 0N・見出し・本文が続けて並ぶだけで
   どこからどこまでが1ステップなのか分からなかった。
   丸バッジ＋縦線は企業情報ページの沿革（.company-timeline）と同じ見せ方に揃えている。
   ※:first-child / :last-child の基本指定（詳細度0-2-0）は、同じ詳細度で明示的に打ち消す必要がある */
@media (max-width: 767px) {
  .business-flow-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .business-flow-item,
  .business-flow-item:first-child {
    position: relative;
    margin-left: 7px;
    padding: 0 0 28px 32px;
    border-left: 2px solid rgba(0, 80, 209, .18);
  }
  /* 最後のステップの下は線を伸ばさない */
  .business-flow-item:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
  }
  /* 縦線の上に乗る丸バッジ */
  .business-flow-item::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: -9px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--color-blue, #0050d1);
    box-shadow: 0 0 0 5px rgba(0, 80, 209, .1);
  }
  /* PCのステップ間の矢印はSPでは使わない */
  .business-flow-item::after { display: none; }

  .business-flow-item .business-flow-item__num { font-size: 13px; }
  .business-flow-item h4 { margin: 4px 0 6px; font-size: 18px; }
}

/* ==================================================
   商業印刷モック RESPONSIVE
   ================================================== */
@media (max-width: 999px) {
  .biz-service__intro { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .biz-product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz-product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .biz-service { padding-top: 54px; padding-bottom: 54px; }
  .biz-service__intro-text h4 { font-size: 22px; }
  .biz-product-grid { gap: 16px; }
  .biz-faq__a { padding-left: 26px; }
}

/* 取扱商品例のグループ見出し（2026-08-28 旧サイトの記載を反映） */
.business-items-label {
  margin: 26px 0 14px;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  color: #16325c;
  display: flex;
  align-items: center;
  gap: 10px;
}
.business-items-label::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--color-blue, #0050d1);
}

/* ==================================================
   設備の稼働動画（フィルム風マーカー＋クリック再生）
   2026-09-01 打ち合わせ：自動再生は「再生中のもの」と「静止しているもの」の
   差が目立つため廃止。静止画の上にフィルム風マーカーを重ね、押したときだけ
   再生する。マーカーの見た目は設備一覧ページ（equipment.css）と揃えている。
   ================================================== */
.biz-movie {
  position: relative;
  width: 100%;
  height: 100%;
}
.biz-movie__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.biz-movie__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 12, 33, .28);
  color: #fff;
  cursor: pointer;
  transition: background .3s;
}
.biz-movie__play:hover,
.biz-movie__play:focus-visible { background: rgba(0, 12, 33, .48); }
.biz-movie__play:focus-visible { outline: 3px solid var(--color-blue, #0050d1); outline-offset: -3px; }
/* 再生中はマーカーを消す。Arkhe親テーマの @layer 内 button{display:inline-block} が
   UAの [hidden] に勝ってしまうため !important が必須（過去に2回踏んでいる） */
.biz-movie__play[hidden] { display: none !important; }

/* フィルムのコマ。上下の帯は repeating-linear-gradient で描いたパーフォレーション */
.biz-movie__film {
  width: 88px;
  height: 62px;
  border-radius: 4px;
  position: relative;
  background-color: rgba(255, 255, 255, .94);
  background-image:
    repeating-linear-gradient(90deg, #000c21 0 6px, transparent 6px 13px),
    repeating-linear-gradient(90deg, #000c21 0 6px, transparent 6px 13px);
  background-repeat: repeat-x, repeat-x;
  background-position: 5px 6px, 5px calc(100% - 6px);
  background-size: calc(100% - 10px) 6px, calc(100% - 10px) 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: transform .3s, background-color .3s;
}
.biz-movie__film::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--color-blue, #0050d1);
}
.biz-movie__play:hover .biz-movie__film { transform: scale(1.06); background-color: #fff; }

.biz-movie__label {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

@media (max-width: 767px) {
  .biz-movie__film {
    width: 70px; height: 50px;
    background-position: 4px 5px, 4px calc(100% - 5px);
    background-size: calc(100% - 8px) 5px, calc(100% - 8px) 5px;
  }
  .biz-movie__film::before { border-width: 7px 0 7px 12px; }
  .biz-movie__label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .biz-movie__play,
  .biz-movie__film { transition: none; }
}

/* ==================================================
   総点検 2026-10-07
   ・タブ：PCは5つを横1列（以前は3＋2で左寄せ・見出しと左端がずれていた）、
     SPは2列グリッド（以前は縦に5つ並び、中身まで1画面以上かかっていた）
   ・ページヘッダーは共通部品（top.css .page-head）。旧 .business-header__title 系は未使用
   ================================================== */
.business-tabs-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: 96px;
  gap: 16px;
  width: 100%;
  max-width: var(--content-max);
}
.business-tab:nth-child(n) { grid-column: auto; grid-row: auto; }
.business-tab { height: auto; padding: 14px 14px 14px 12px; }
.business-tab__inner { gap: 10px; }
.business-tab__icon { width: 40px; height: 40px; }
.business-tab__ja { font-size: 15px; letter-spacing: .04em; }
.business-tab__en { font-size: 11px; }
.business-tab__arrow { display: none; }
@media (max-width: 999px) {
  .business-tabs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .business-tabs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }
  .business-tab { height: auto; min-height: 64px; padding: 10px; align-items: center; }
  .business-tab__icon { width: 32px; height: 32px; }
  .business-tab__ja { font-size: 14px; white-space: normal; }
  .business-tab__en { display: none; }
}

/* 商品カード名：「・」の後ろでだけ改行（テンプレート側で .nb に分割済み） */
.biz-product-card__label { word-break: normal; text-wrap: balance; }

/* ==================================================
   SP見直し 2026-10-07
   ・パネル内の見出し（強み／取扱商品例／ご依頼の流れ…）を、他ページの .section-heading と同じ形に
     （日本語＋青い英字ラベル＋3色の下線。以前はこのページだけ「赤い短い線＋見出し」だった）
   ・各タブ先頭の写真2枚：SPで縦に大きく2枚並び本文まで遠かったので、横並びの小さめに
   ================================================== */
.business-mid-heading {
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .06em;
  line-height: 1.1;
  color: var(--color-text);
  padding-bottom: 21px;   /* 下線（5px）＋間隔16px。.section-heading__bar と同じ */
  background: linear-gradient(90deg,
    var(--color-blue) 0 120px,
    var(--color-red) 120px 150px,
    rgba(0, 12, 33, .12) 150px 100%) left bottom / 100% 5px no-repeat;
}
.business-mid-heading::before { display: none; }
@media (max-width: 767px) {
  .business-mid-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 22px;
    line-height: 1.4;
  }
  .business-mid-heading .section-heading__en { order: -1; line-height: 1; }

  .business-panel__hero-images {
    flex-direction: row;
    gap: 8px;
  }
  .business-panel__hero-img { width: calc(50% - 4px); }
}

/* コンテンツバーを Contents_bar.webp の形に統一（2026-10-07・定義は top.css の --cbar-*）。下線4px＋間隔16px */
.business-mid-heading {
  padding-bottom: calc(var(--cbar-red-h) + 16px);
  background:
    linear-gradient(var(--cbar-red), var(--cbar-red)) left bottom / var(--cbar-red-w) var(--cbar-red-h) no-repeat,
    linear-gradient(var(--cbar-line), var(--cbar-line)) left bottom / 100% 1px no-repeat;
}

/* ---- タブ：320px前後で「アッセンブリ作業」が右にはみ出していた（2026-10-08 改行・レスポンシブ修正） ----
   ラベルにはテンプレートで語の切れ目に <wbr> を入れてある（商業印刷｜全般 など）。
   文字列の箱が縮めるように min-width:0、375px未満は余白・アイコン・文字を一段小さく。 */
.business-tab__text { min-width: 0; }
@media (max-width: 374px) {
  .business-tab { padding: 8px; }
  .business-tab__inner { gap: 8px; }
  .business-tab__icon { width: 28px; height: 28px; }
  .business-tab__ja { font-size: 13px; letter-spacing: .02em; }
}

/* ---- 発送業務「配送手段」：写真を外して文字だけのカード3枚に（2026-10-08 ユーザー指示） ----
   PCは横3列、999px以下は縦積み。カードは他の灰色ボックスと同じ --color-bg-gray。 */
.business-shipping-rows--text {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.business-shipping-rows--text .business-shipping-row {
  display: block;
  background: var(--color-bg-gray, #f3f3f3);
  padding: 36px 32px;
}
.business-shipping-rows--text .business-shipping-text { width: auto; gap: 16px; }
.business-shipping-rows--text .business-shipping-text h3 { font-size: 22px; }
@media (max-width: 999px) {
  .business-shipping-rows--text { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .business-shipping-rows--text .business-shipping-row { padding: 28px 24px; }
}
@media (max-width: 767px) {
  .business-shipping-rows--text .business-shipping-text h3 { font-size: 20px; }
}

/* ---- 資材保管「自社倉庫」：所在地・電話・敷地面積の一覧（2026-10-08 先方支給の内容に差し替え） ---- */
.biz-warehouse { display: flex; flex-direction: column; gap: 20px; max-width: 530px; color: var(--color-text, #3e3e3e); }
.biz-warehouse__spec { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1px solid rgba(10, 40, 91, .15); }
.biz-warehouse__spec > div { display: contents; }
.biz-warehouse__spec dt,
.biz-warehouse__spec dd { padding: 12px 0; border-bottom: 1px solid rgba(10, 40, 91, .15); font-size: 15px; line-height: 1.7; }
.biz-warehouse__spec dt { padding-right: 20px; font-weight: 700; color: var(--color-blue); white-space: nowrap; }
.biz-warehouse__spec dd { margin: 0; }
.biz-warehouse__area { margin: 0; padding: 0; list-style: none; }
.biz-warehouse__desc { font-size: 15px; line-height: 1.8; }
@media (max-width: 767px) {
  .biz-warehouse__spec dt,
  .biz-warehouse__spec dd { font-size: 14px; padding: 10px 0; }
  .biz-warehouse__spec dt { padding-right: 14px; }
}