/* ===== hero (KV) ===== */
.business_mv {
  background: #fff;
  margin-top: 86px; /* 固定ヘッダー(header{position:fixed;height:86px})分のオフセット */
}

.business_mv .mv_kv {
  position: relative;
}

.business_mv .mv_kv_photo {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 324;
  object-fit: cover;
}

.business_mv .mv_kv_text {
  position: absolute;
  left: 16%;
  top: 20%;
}

.business_mv .mv_title {
  margin: 0;
}

.business_mv .mv_title span {
  display: table;
  background: #e60039;
  color: #fff;
  font-size: 2.907vw; /* Figma 41.865px @1440（他KVページと統一） */
  font-weight: bold;
  line-height: 1;
  padding: 0.76vw 1.11vw; /* Figma 11px/16px @1440 */
  margin-bottom: 1.11vw; /* Figma 箱間16px */
  white-space: nowrap;
  /* Figma: KVボックスのドロップシャドウ 0 4.652px 13.955px #005797（@1440→vw） */
  box-shadow: 0 0.323vw 0.969vw #005797;
}

.business_mv .mv_lead {
  color: #fff;
  font-size: 1.615vw; /* Figma 23.258px @1440（他KVページと統一） */
  font-weight: bold;
  line-height: 1.2; /* Figma 28px */
  margin-top: 1.667vw; /* Figma 24px @1440 */
  text-shadow: 0 0.323vw 0.969vw #005797; /* Figma 0 4.652px 13.955px */
  white-space: nowrap;
}

/* 製品5点（修正依頼#1）: 以前は個別画像をflexのgap28px・下端揃えで並べていたが、Figmaは
   各製品が個別座標の「散らし」配置で中心yが揃う（=中央揃え）設計。gap均等＋下端揃えでは
   間隔がばらついて見えるため、Figma座標どおりに合成した1枚絵に置き換えた。 */
.business_mv .mv_products {
  display: flex;
  justify-content: center;
  margin-top: -52px; /* Figma: KV写真の下端409に対し製品グループ上端357＝52px重なる */
  position: relative;
  z-index: 2;
}

.business_mv .mv_products_img {
  display: block;
  width: 675.157px; /* Figma Group155 675.157×119.997（画像は3x=2025×360） */
  max-width: 100%;
  height: auto;
}

.business_mv .mv_desc {
  text-align: center;
  font-size: 16px;
  line-height: 2;
  margin: 28px 0 40px;
  color: #000;
}

.business_mv .mv_btn {
  text-align: center;
  padding-bottom: 64px;
}

.business_mv .mv_btn a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  background: #e60039;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  border-radius: 40px;
  padding: 11px 16px 11px 72px;
  text-decoration: none;
  min-width: 264px;
  box-sizing: border-box;
}

.business_mv .mv_btn a img {
  width: 20px;
  height: 20px;
}

/* ===== side fixed buttons ===== */
.business_side {
  position: fixed;
  right: 0;
  top: 252px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.business_side a {
  writing-mode: vertical-rl;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  width: 80px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
  letter-spacing: 1px;
  box-sizing: border-box;
}

.business_side .side_contact {
  background: #dd650f;
}

.business_side .side_download {
  background: #0a63ab;
}

/* ホバー: グローバル a:hover{opacity:.5} だと固定ボタンが半透明になり背後のページが透けるため、
   透過をやめて「背景色そのものを薄くする」方式にする（修正依頼#10）。
   薄い色 = 元の色を白と50%混色した値（＝白地に opacity:.5 で重ねたときと同じ明るさ）なので
   見た目の明るさは従来どおりで、透けだけが無くなる。白文字は褪せないので可読性はむしろ上がる。 */
.business_side a:hover {
  opacity: 1;
}
.business_side .side_contact:hover {
  background: #eeb287; /* #dd650f + 白50% */
}
.business_side .side_download:hover {
  background: #85b1d5; /* #0a63ab + 白50% */
}

/* ===== reason ===== */
.business_reason {
  background: #ddeaf6;
  padding: 64px 40px 72px;
  text-align: center;
}

.business_reason h2 {
  font-size: 32px;
  font-family: inherit;
  color: #004f8f;
  margin: 0 0 44px;
  font-weight: 500;
  height: auto;
  display: block;
  width: auto;
}

.business_reason h2::before {
  display: none;
}

.business_reason_list {
  display: grid;
  grid-template-columns: repeat(4, 224px);
  gap: 28px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.business_reason_list li {
  background: #fff;
  padding: 12px 16px 20px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.business_reason_list .reason_icon {
  width: 39px;
  height: 33px;
  margin-bottom: 8px;
}

.business_reason_list .reason_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.business_reason_list p {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  line-height: 25px;
  margin: 0 0 16px;
}

.business_reason_list .reason_illust {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  min-height: 120px;
  width: 100%;
}

.business_reason_list li:nth-child(1) .reason_illust img {
  width: 118px;
  height: 118px;
}

.business_reason_list li:nth-child(2) .reason_illust img {
  width: 128px;
  height: 76px;
  margin-bottom: 14px;
}

.business_reason_list li:nth-child(3) .reason_illust img {
  width: 100px;
  height: 104px;
  margin-bottom: 6px;
}

.business_reason_list .reason_illust_support img:first-child {
  width: 69px;
  height: 85px;
}

.business_reason_list .reason_illust_support .bubble {
  width: 41px;
  height: 32px;
  align-self: flex-start;
  margin-top: 4px;
}

/* ===== section heading ===== */
.section_head {
  text-align: center;
  margin-bottom: 44px;
}

.section_head h2 {
  font-size: 36px;
  font-weight: 500;
  font-family: inherit;
  color: #000;
  line-height: 1.2;
  margin: 0;
  height: auto;
  display: block;
  width: auto;
}

.section_head h2::before {
  display: none;
}

.section_head h2::after {
  content: "";
  display: block;
  width: 82px;
  height: 4px;
  background: #e60039;
  margin: 16px auto 0;
}

.section_label {
  color: #e60039;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  margin-top: 8px;
}

/* ===== usecase ===== */
.business_usecase {
  padding: 72px 40px;
  text-align: center;
}

.business_usecase_list {
  display: grid;
  grid-template-columns: repeat(4, 224px);
  gap: 28px 28px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ★カード部品は製品ページの「おすすめ用途」(.product_usecase)と共有している。
   セレクタを併記しているのは、両者を必ず同じ見た目に保つため（片方だけ直る事故を防ぐ）。
   .product_usecase 側の固有指定は css/page-product.css の「外枠」だけ。 */
.business_usecase_list .usecase_card,
.product_usecase .usecase_card {
  display: block;
  position: relative;
  background: #e7eff4;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 224 / 196;
}

/* リンク付きカードのみ: クリック可＋ホバー(Figma 22615:1653 バリアント2)白50%ベール＋ドロップシャドウ＋薄枠 */
.business_usecase_list .usecase_card.is_linked,
.product_usecase .usecase_card.is_linked {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .3s;
}

.business_usecase_list .usecase_card.is_linked::after,
.product_usecase .usecase_card.is_linked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;
}

.business_usecase_list .usecase_card.is_linked:hover,
.product_usecase .usecase_card.is_linked:hover {
  opacity: 1; /* グローバル a:hover{opacity:.5} を打消し(退色はベール担当) */
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.16), 0 0 0 1px #ddeaf6;
}

.business_usecase_list .usecase_card.is_linked:hover::after,
.product_usecase .usecase_card.is_linked:hover::after {
  opacity: 1;
}

/* No-Link(未リンク)カードは30%グレーオーバーレイで暗く（Figma。PC/SP共通・ユーザー指定2026-07-16） */
.business_usecase_list .usecase_card:not(.is_linked)::after,
.product_usecase .usecase_card:not(.is_linked)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(130, 130, 130, 0.3);
  pointer-events: none;
  z-index: 3;
}

.business_usecase_list .usecase_thumb,
.product_usecase .usecase_thumb {
  position: absolute;
  inset: 0 0 24.49% 0;
  overflow: hidden;
}

.business_usecase_list .usecase_thumb img,
.product_usecase .usecase_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.business_usecase_list p,
.product_usecase p {
  position: absolute;
  bottom: 6.6%;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  text-align: center;
  line-height: 25px;
}

.business_usecase_list .usecase_mark,
.product_usecase .usecase_mark {
  position: absolute;
  right: 3.5%;
  bottom: 4%;
  width: 10px;
  height: 10px;
}

.business_usecase_list .usecase_mark img,
.product_usecase .usecase_mark img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== lineup ===== */
.business_lineup {
  background: #ddeaf6;
  padding: 72px 40px;
}

.business_lineup_group {
  position: relative;
  background: #fff;
  border: 1px solid #e60039;
  border-radius: 0;
  padding: 32px 42px;
  margin: 0 auto 40px;
  max-width: 980px;
  box-sizing: border-box;
}

.business_lineup_group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  background: #e60039;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.business_lineup_group_head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid #e60039;
  padding-bottom: 6px;
  margin-bottom: 36px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* hover (Figma 22566:1664 バリアント2: 白50%ベールで見出し・リンク・下線を一括退色) */
.business_lineup_group_head::after {
  content: "";
  position: absolute;
  inset: 0 0 -1px 0; /* -1px で下端の赤ボーダーも覆う */
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 1;
}

.business_lineup_group_head:hover::after {
  opacity: 1;
}

/* ヘッダー全体を <a> リンク化。退色はベールが担当するのでグローバル a:hover{opacity:.5} を打消し */
.business_lineup_group_head:hover {
  opacity: 1;
}

.business_lineup_group_head h3 {
  color: #e60039;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.business_lineup_group_head h3 small {
  font-size: 16px;
}

.lineup_more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.lineup_more img {
  width: 20px;
  height: 20px;
}

.business_lineup_items {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  gap: 32px;
  justify-content: start;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 商品カード全体を商品詳細へのリンク化＋ホバー白50%ベール (Figma 22521:2039 バリアント2) */
.business_lineup_items .lineup_item_link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.business_lineup_items .lineup_item_link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 1;
}

.business_lineup_items .lineup_item_link:hover::after {
  opacity: 1;
}

.business_lineup_items .lineup_item_link:hover {
  opacity: 1; /* グローバル a:hover{opacity:.5} を打消し(退色はベール担当) */
}

.business_lineup_items .item_photo {
  aspect-ratio: 160 / 126;
  width: 70%;
  margin: 0 auto 12px;
}

.business_lineup_items .item_photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.business_lineup_items .item_name {
  font-weight: bold;
  /* Figma: 名前は top122・leading20（=箱122〜142）、その下12pxでスペック1行目が154。
     line-height未指定だと既定1.5で箱が24pxになり、以降が全て+6pxずれる */
  line-height: 20px;
  margin: 0 0 12px;
  font-size: 16px;
  color: #000;
  text-align: center;
}

.business_lineup_items .spec_list {
  list-style: none;
  /* Figma(カード200px基準): アイコン列の左端31px=15.5% / テキスト枠の右端169px=右余白15.5%。
     右余白が無いと「コンパクトデジタルカメラ」等がFigmaでは折り返す位置で1行に収まってしまう */
  padding: 0 15.5%;
  margin: 0;
  font-size: 11px;
  color: #000;
}

.business_lineup_items .spec_list li {
  position: relative;
  /* テキスト左54px = アイコン列31 + 23。アイコン(20px)の右端51から3px空く */
  padding-left: 23px;
  /* Figma: 行送りは項目内・項目間とも一律20px（1項目が2行に折り返しても同じ）。
     カードはこの20px×5行でちょうど256pxに収まる設計＝margin-bottomは持たせない。
     アイコンは top:0 の20px四方なので、この行ボックス(20px)の中央に自動で揃う */
  margin-bottom: 0;
  line-height: 20px;
  min-height: 20px;
}

.business_lineup_items .spec_list img {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  object-fit: contain; /* 非正方形アイコンの引き伸ばし防止（下のpaddingと併用） */
}

/* スペックアイコンの縦横比（Figma: 20pxセルの中央に viewBox 実寸のグリフを配置）
   FigmaのSVGは preserveAspectRatio="none" + width/height=100% で書き出されるため、20x20の
   セルにそのまま入れると非正方形のアイコンが引き伸ばされて歪む（🛜が縦に約1.76倍）。
   対処は2段構え:
     1) SVG側に viewBox と同値の width/height を持たせ preserveAspectRatio="none" を外す
        （内在比が無いと object-fit が既定の300x150=2:1で計算され、歪み方が変わるだけになる）
     2) object-fit:contain で比率を維持し、padding でグリフの外接ボックスをFigma実寸に合わせる
   padding は「セル幅 - グリフ外接幅」の半分。% ではなく px で書くこと
   （%paddingは自要素ではなく包含ブロック(li)の幅基準で解決され、箱が20→35pxに膨張する）。
     wifi 16x11.3378 / camera 16x11.0586 / snw 10x16 → 外接16px → (20-16)/2 = 2px
     cmos 14x9                                       → 外接14px → (20-14)/2 = 3px
     weight 12x13                                    → 外接13px → (20-13)/2 = 3.5px
   display/intel/memory/storage/sun は 20x20 の正方形なので padding 不要（歪まない） */
.business_lineup_items .spec_list img[src$="icon_wifi.svg"],
.business_lineup_items .spec_list img[src$="icon_camera.svg"],
.business_lineup_items .spec_list img[src$="icon_snw.svg"] {
  padding: 2px;
}
.business_lineup_items .spec_list img[src$="icon_cmos.svg"] {
  padding: 3px;
}
.business_lineup_items .spec_list img[src$="icon_weight.svg"] {
  padding: 3.5px;
}

/* ===== reliability ===== */
.business_reliability {
  padding: 72px 40px;
  text-align: center;
  background: #fff;
}

.business_reliability_list {
  display: grid;
  grid-template-columns: repeat(2, 470px);
  gap: 40px;
  justify-content: center;
  margin: 0 auto 48px;
  list-style: none;
  padding: 0;
  text-align: left;
}

.business_reliability_list li {
  position: relative;
  background: #fff;
  border: 1px solid #0a63ab;
  min-height: 340px;
  box-sizing: border-box;
  padding: 28px 33px;
}

.business_reliability_list .reliability_num {
  position: absolute;
  left: 33px;
  top: 28px;
  width: 68px;
  text-align: center;
}

.business_reliability_list .reliability_num .num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 48px;
  font-weight: 600;
  color: #c5d3de;
  line-height: 1;
}

.business_reliability_list .reliability_num .label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #c5d3de;
  margin-top: 4px;
}

.business_reliability_list .item_name {
  font-weight: bold;
  font-size: 24px;
  line-height: 32px;
  color: #0a63ab;
  background: none;
  margin: 0 0 16px 70px;
  padding: 0 0 0 16px;
  min-height: 68px;
  display: flex;
  align-items: center;
  border-left: 4px solid #ddeaf6;
  box-sizing: border-box;
}

.business_reliability_list li {
  padding: 28px 33px;
}

.business_reliability_list .reliability_num {
  z-index: 2;
}

.business_reliability_list .item_desc {
  font-size: 13px;
  color: #000;
  line-height: 20px;
  margin: 0 0 16px;
}

.business_reliability_list .reliability_photo {
  margin: 0;
}

.business_reliability_list .reliability_photo img {
  width: 100%;
  aspect-ratio: 404 / 150;
  object-fit: cover;
  display: block;
}

.business_reliability .business_btn a {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  border: 2px solid #e60039;
  color: #e60039;
  border-radius: 100px;
  padding: 11px 16px 11px 72px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  background: #fff;
  transition: background .3s, color .3s;
}

.business_reliability .business_btn .circle_arrow {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

/* hover (Figma 22751:2036 バリアント2: 赤背景・白文字・白丸赤矢印) */
.business_reliability .business_btn .circle_arrow_hover {
  display: none;
}

.business_reliability .business_btn a:hover {
  background: #e60039;
  color: #fff;
  opacity: 1; /* グローバル a:hover{opacity:.5} を打消し */
}

.business_reliability .business_btn a:hover .circle_arrow_default {
  display: none;
}

.business_reliability .business_btn a:hover .circle_arrow_hover {
  display: inline-block;
}

.business_btn {
  width: auto;
  max-width: none;
  margin: 0;
  border: none;
  background: none;
  border-radius: 0;
}

/* ===== CTA ===== */
.business_cta {
  text-align: center;
  padding: 24px 40px 96px;
  background: #fff;
}

.business_cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #dd7e0f;
  border: 4px solid #dc3509;
  color: #fff;
  min-width: 600px;
  min-height: 94px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 32px;
  font-weight: bold;
  box-sizing: border-box;
}

/* ホバー: 透過をやめて背景色・枠色を薄くする（修正依頼#10。詳細は .business_side の項参照） */
.business_cta a:hover {
  opacity: 1;
  background: #eebf87;   /* #dd7e0f + 白50% */
  border-color: #ee9a84; /* #dc3509 + 白50% */
}

.business_cta a img {
  width: 40px;
  height: 29px;
}

/* ===== responsive ===== */
@media (max-width: 1024px) {
  .business_reason_list,
  .business_usecase_list {
    grid-template-columns: repeat(2, minmax(160px, 224px));
  }

  .business_lineup_items {
    grid-template-columns: repeat(2, 1fr);
  }

  .business_reliability_list {
    grid-template-columns: 1fr;
  }

  .business_cta a {
    min-width: 0;
    width: 100%;
    font-size: 22px;
  }
}

/* ============================================================
   SP（モバイル）: Figma 法人LP TOP モバイル 23460:3627 を反映。
   ブレイクポイントはヘッダー/テーマ標準に合わせ 750px に統一。
   上から順にセクション単位で実装（現状: KV まで）。
   ============================================================ */
@media (max-width: 750px) {

  /* ===== KV（ヒーロー） ===== */
  /* 固定ヘッダー(SP: header height:70px)分オフセット＝KVはy70から開始（Figma一致） */
  .business_mv { margin-top: 70px; }

  /* KV写真: モバイル専用画像 393x420（<picture>のsourceで切替） */
  .business_mv .mv_kv_photo {
    aspect-ratio: 393 / 420;
    object-fit: cover;
  }

  /* テキスト: 左20px・上142px(=Figma 212-70)。赤箱は左寄せ・リードは中央 */
  .business_mv .mv_kv_text {
    left: 20px;
    right: 20px;
    top: 142px;
  }
  .business_mv .mv_title span {
    font-size: 28px;               /* Figma 28px（vw→固定px） */
    line-height: 1;
    padding: 8px 12px;             /* Figma py7.845 / pl12 */
    margin-bottom: 12px;           /* Figma 箱間 ≒12px */
    box-shadow: 0 3.317px 9.952px #005797;
  }
  .business_mv .mv_lead {
    font-size: 16px;               /* Figma 16px */
    line-height: 1.25;             /* Figma leading 19.968 */
    margin-top: 22px;              /* Figma だから箱下→リード ≒22px */
    text-align: left;              /* 赤箱と同じ左端(x20)に揃える（ユーザー指定） */
    text-shadow: 0 3.317px 9.952px #005797;
  }

  /* 製品画像行: Figmaは各画像が個別X/Y座標の「散らし」配置（均等gap/下揃えではない）。
     PCと同じくFigma座標どおりに合成した1枚絵(SP版)に置き換えた（修正依頼#1）。
     SPはPCとレイアウトが別物なので<picture>で専用画像に切替えている。 */
  .business_mv .mv_products {
    display: block;
    margin: -24px auto 0;          /* 中央寄せ＋KV下端に24px重ね（Figma 466は KV下端490の-24） */
    padding: 0;
  }
  .business_mv .mv_products_img {
    width: 353px;                  /* Figma Group155 353×62.739（画像は3x=1059×188） */
    max-width: 100%;
    margin: 0 auto;
  }

  /* サブコピー: 16px中央・line-height28px（353幅で自然に3行折返し＝Figma同） */
  .business_mv .mv_desc {
    font-size: 16px;
    line-height: 28px;
    margin: 28px 20px 32px;
  }

  /* 用途別に探すボタン: 18px・角丸40px・中央 */
  .business_mv .mv_btn { padding-bottom: 61px; }
  .business_mv .mv_btn a {
    font-size: 18px;
    line-height: 20px;             /* Figma leading20 → 高さ 20+8*2=36px */
    min-width: 0;
    gap: 24px;
    padding: 8px 16px 8px 52px;
  }

  /* 固定サイドボタン(お問い合わせ/資料DL)はモバイルデザインに無いので非表示（ユーザー確認済 2026-07-16） */
  .business_side { display: none; }

  /* ===== セクション2: ビジネスに必要な性能だけを、適正価格で。＋ポイント4カード ===== */
  .business_reason {
    padding: 40px 20px 41px;       /* Figma: 見出し上40 / 下41 / 左右20 */
  }
  .business_reason h2 {
    /* Figma 24px W5 #004f8f・中央2行。サイト方針=連続スケール(vw)は使わず固定px＋段階
       ブレイクポイント（メインサイトに準拠）。24pxは1行目「〜だけを、」(336px)が
       377px以上で2行に収まる。375/320px端末では下の段階BPで縮めて2行を維持。 */
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 40px;           /* Figma 見出し下→カード 40px */
    font-weight: bold;             /* 修正依頼#3: SP見出しは細く見えるためBold（#3で取りこぼしていたセクション見出し。PCは500のまま） */
  }
  .business_reason_list {
    /* #4: 166px固定だと2列(=352px)が320/360pxで画面外へはみ出す。
       #4続き: 上限166pxのままだと逆に幅の広い端末で2列が中央に取り残され左右余白が肥大化。
       minmax(0,1fr)で2列を幅いっぱいに伸ばす＝393px=166px(設計)維持・広幅は余白なし・狭端末は縮小可。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 19px;
  }
  .business_reason_list li {
    padding: 9px 8px 0;            /* Figma checkbox上9px。イラストは下端寄せ */
    min-height: 178px;             /* Figma カード178 */
  }
  .business_reason_list .reason_icon {
    width: 27px;                   /* Figma checkbox 27.4×23.7 */
    height: 24px;
    margin-bottom: 4px;
  }
  .business_reason_list p {
    font-size: 13.35px;            /* Figma 13.349px W6 */
    line-height: 18.54px;
    margin: 0;
  }
  /* イラストはカード別サイズ＋下端からの距離（Figma座標） */
  .business_reason_list .reason_illust { min-height: 0; }
  .business_reason_list li:nth-child(1) .reason_illust img { width: 105px; height: 105px; margin-bottom: 0; }
  .business_reason_list li:nth-child(2) .reason_illust img { width: 95px;  height: 56px;  margin-bottom: 25px; }
  .business_reason_list li:nth-child(3) .reason_illust img { width: 74px;  height: 77px;  margin-bottom: 12px; }
  .business_reason_list .reason_illust_support img:first-child { width: 51px; height: 63px; margin-bottom: 13px; }
  .business_reason_list .reason_illust_support .bubble { width: 30px; height: 24px; margin-top: -11px; } /* Figmaは吹き出しが上に飛び出す（底gap63） */

  /* ===== 見出し(section_head) 共通: 用途別/機種別で使用 ===== */
  .section_head { margin-bottom: 40px; }         /* Figma 見出し下→カード 40px */
  .section_head h2 { font-size: 28px; font-weight: bold; } /* Figma 28px W5。修正依頼#3: SPは細く見えるためBold指定 */
  .section_head h2::after { width: 80px; margin-top: 10px; } /* Figma 赤線80px。文字との隙間を詰める(見た目20px→約14px) */
  .section_label { font-size: 10px; }            /* Figma USE CASE 10px */

  /* ===== セクション3: 用途別に探す（用途カード15枚・2列） ===== */
  .business_usecase {
    padding: 60px 20px 61px;                     /* 上60/左右20/下61（下は次セクションで調整） */
  }
  .business_usecase_list {
    /* #4: 166px固定だと2列(=353px)が320/360pxで画面外へはみ出す。
       #4続き: 上限166pxのままだと幅の広い端末で左右余白が肥大化するのでminmax(0,1fr)で
       2列を幅いっぱいに（393px=166px設計維持・広幅は余白なし・狭端末は縮小可）。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 21px;                              /* 行22 / 列21 */
  }
  .business_usecase_list .usecase_card,
  .product_usecase .usecase_card {
    container-type: inline-size;   /* nowrapタイトルをカード幅基準(cqw)で相対化する基準 */
  }
  .business_usecase_list .usecase_mark,
  .product_usecase .usecase_mark {
    width: 7px;                                  /* Figma 7.4×7.4（PC10→縮小） */
    height: 7px;
  }
  /* タイトルは1行固定（nowrap）・Figma 13px/18px。★例外的にcqw（連続スケール）を維持:
     カードが比例(1fr)で縮む中、固定px＋段階BPだと321〜375pxの帯で最長タイトルが最大12px
     切れる（実測）。1行を保つにはカード幅と同率に縮めるcqwが必要。見出し等の通常テキストは
     固定px＋段階BP（下の375/320）に統一済み。nowrapタイトルの扱いはkasaya判断待ち。 */
  .business_usecase_list p,
  .product_usecase p {
    font-size: min(13px, 7.831cqw);   /* 13/166*100 */
    line-height: min(18px, 10.843cqw);/* 18/166*100 */
    letter-spacing: -0.3px;
    white-space: nowrap;
  }

  /* ===== セクション4: 機種別に探す（製品ラインナップ群） ===== */
  .business_lineup {
    padding: 60px 20px;                          /* Figma blue bg・上下60/左右20 */
  }
  .business_lineup_group {
    padding: 28px 24px;                          /* Figma白ボックス: title上28/左右24 */
    margin: 0 0 40px;
    max-width: none;
  }
  .business_lineup_group::before {
    width: 40px;                                 /* Figma 角三角 40×40（PC46） */
    height: 40px;
  }
  /* グループ見出し: タイトル＋サブ → 赤線 → 「詳しくはこちら」(線の下・右寄せ) の縦積み */
  .business_lineup_group_head {
    display: block;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 24px;
  }
  .business_lineup_group_head h3 {
    font-size: 18px;                             /* Figma 18px（PC24） */
    border-bottom: 1px solid #e60039;            /* タイトル下の赤線 */
    padding-bottom: 6px;
  }
  .business_lineup_group_head h3 small {
    display: block;                              /* サブは次行に */
    font-size: 10px;                             /* Figma 10px（PC16） */
  }
  .lineup_more {
    display: flex;
    justify-content: flex-end;                   /* 線の下・右寄せ */
    margin-top: 6px;
    font-size: 10px;                             /* Figma 10px（PC13） */
    gap: 8px;
  }
  .lineup_more img {
    width: 12px;                                 /* Figma 12px（PC20） */
    height: 12px;
  }
  /* 商品カード: 2列（#4続き: 144px固定だと広幅で中央に余白ができるのでminmax(0,1fr)で伸ばす。393px=144px設計維持） */
  .business_lineup_items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 17px;                              /* 行28 / 列17 */
    justify-content: center;
  }
  .business_lineup_items .item_photo {
    margin-bottom: 6px;                          /* Figma 写真→名前 6px */
  }
  .business_lineup_items .item_name {
    font-size: 14px;                             /* Figma 14px（PC16） */
    line-height: 13px;                           /* Figma leading13（既定1.5だと箱が高く下流が下がる） */
    margin: 0 0 10px;                            /* Figma 名前→spec 10px */
  }
  .business_lineup_items .spec_list {
    /* PCの padding:0 15.5% の右側(SP幅144pxでは22.3px)が残るとテキスト幅が107→85pxに狭まり
       カード高が不揃いになるため、ショートハンドで明示的に0へ戻す（SPはFigma SP版に準拠） */
    padding: 0 0 0 15px;                         /* Figma アイコン左15px */
    font-size: 11px;
  }
  .business_lineup_items .spec_list li {
    padding-left: 22px;                          /* アイコン16 + 余白 */
    margin-bottom: 2px;
    line-height: 16px;
    min-height: 16px;
  }
  .business_lineup_items .spec_list img {
    width: 16px;                                 /* Figma 16px（PC20） */
    height: 16px;
  }

  /* セルが16px（PCの0.8倍）になるので、グリフの余白も0.8倍にして比率と相対サイズを保つ */
  .business_lineup_items .spec_list img[src$="icon_wifi.svg"],
  .business_lineup_items .spec_list img[src$="icon_camera.svg"],
  .business_lineup_items .spec_list img[src$="icon_snw.svg"] {
    padding: 1.6px;
  }
  .business_lineup_items .spec_list img[src$="icon_cmos.svg"] {
    padding: 2.4px;
  }
  .business_lineup_items .spec_list img[src$="icon_weight.svg"] {
    padding: 2.8px;
  }

  /* ===== セクション5: 安心の理由（サポート/保証2カード＋詳しくは＋お問い合わせCTA） ===== */
  .business_reliability {
    padding: 60px 20px 44px;                     /* 上60/下44（詳しくは→CTAの隙間）/左右20 */
  }
  .business_reliability_list {
    grid-template-columns: 1fr;                  /* 1列縦積み */
    gap: 28px;                                   /* カード間28 */
    margin: 0 0 28px;                            /* リスト→詳しくはボタン28 */
  }
  .business_reliability_list li {
    min-height: 259px;                           /* Figma カード259 */
    padding: 20px 24px;                          /* Figma content x24 / top20 */
  }
  .business_reliability_list .reliability_num {
    left: 24px;
    top: 20px;
    width: 45px;                                 /* Figma 番号45px幅（バーとの隙間8pxを確保） */
  }
  .business_reliability_list .reliability_num .num {
    font-size: 36px;                             /* Figma 36px（PC48） */
  }
  .business_reliability_list .reliability_num .label {
    font-size: 11px;                             /* Figma 11px（PC14） */
  }
  .business_reliability_list .item_name {
    font-size: 18px;                             /* Figma 18px（PC24） */
    line-height: 24px;
    margin: 0 0 8px 58px;                        /* 下8px=Figma（青バー下端72→説明80）／左58pxは番号との隙間を広げるユーザー指定（Figma53pxより右へ） */
    padding-left: 10px;                          /* バー→タイトル text(x90) */
    border-left-width: 3px;                      /* Figma 青バー3px（PC4） */
    min-height: 52px;                            /* Figma 青バー高さ52px（border-left＝item_name高） */
  }
  .business_reliability_list .item_desc {
    margin: 0 0 8px;                             /* 説明は全幅・非インデント。下8px=Figma（説明下端120→写真128） */
  }
  .business_reliability_list .reliability_photo img {
    aspect-ratio: 305 / 111;                     /* Figma 写真 305×111 */
  }
  /* 「安心の理由について詳しくはこちら」ボタン: 14px・角丸40・赤枠1px・矢印20 */
  .business_reliability .business_btn a {
    font-size: 14px;                             /* Figma 14px（PC20） */
    gap: 16px;
    padding: 7px 8px 7px 26px;
    line-height: 20px;                           /* 既定(21px)だと高さ39px。7+20+7+枠2=36px＝Figma */
    border-width: 1px;
  }
  .business_reliability .business_btn .circle_arrow {
    width: 20px;
    height: 20px;
  }
  /* お問い合わせCTA: 353×60 オレンジ（ドロワーと同一・CV_button縮小版） */
  .business_cta {
    padding: 0 20px 80px;                        /* 上0(reliability下44が担当)/下80(→footer) */
  }
  .business_cta a {
    min-width: 0;
    width: 353px;
    max-width: 100%;
    min-height: 60px;
    font-size: 20px;                             /* Figma 20px（PC32） */
    gap: 12px;
    border-width: 2.353px;                       /* Figma（PC4） */
    border-radius: 11.767px;                     /* Figma（PC20） */
  }
  .business_cta a img {
    width: 28px;                                 /* Figma 封筒 28×20（PC39×29） */
    height: 20px;
  }
}

/* ===== 狭端末の段階ブレイクポイント（メインサイト踏襲：375 / 320）=====
   連続スケール(vw)をやめた代わりに、狭端末で崩れる見出しを1段ずつ固定pxで落として2行を保つ。
   750〜377pxは上のSP定義(24px)のまま＝設計どおり。 */
@media screen and (max-width: 375px) {
  /* 見出し「ビジネスに必要な性能だけを、」を2行に保つ（375pxで24pxは3行化するため縮小） */
  .business_reason h2 { font-size: 20px; }
}
@media screen and (max-width: 320px) {
  .business_reason h2 { font-size: 18px; }
}