@charset "UTF-8";
/* ============================================================
   安心の理由：サポート・品質ページ (page-business-support.php)
   共有: page-business.css / page-usecase.css を先に読み込み
   ============================================================ */

/* ===== KV (usecase_mv を流用・ティール差分) ===== */
/* 白ボックス＋ティール文字 #09c5a6（Figma: bg-white / text #09c5a6）。
   影は get_design_context が落とすため subcopy と同値の rgba(0,0,0,.16) を付与 */
.support_mv .mv_kv_text {
  top: 32.7%; /* Figma: title box y=191, KV top=85 → 106/324 */
}

.support_mv .mv_title span {
  color: #09c5a6;
  box-shadow: 0 0.323vw 0.969vw rgba(0, 0, 0, 0.16); /* Figma 0 4.652px 13.955px */
  margin-bottom: 0; /* 単一行なので箱間マージン不要 */
}

.support_mv .mv_desc {
  top: 58.6%; /* Figma: subcopy center y=289 → top≈190/324 */
  text-shadow: 0 0.323vw 0.969vw rgba(0, 0, 0, 0.16); /* Figma 0 4.652px 13.955px */
}

/* ===== 安心の理由とは（導入） ===== */
.support_intro {
  padding: 40px 40px 0; /* Figma: KV下端409 → 見出し449 = 40px */
  text-align: center;
}

.support_intro_head {
  margin: 0;
  height: auto; /* グローバル h2{height:34px} 打消し */
  display: block; /* グローバル h2{display:inline-block} 打消し */
  font-family: inherit; /* グローバル h2{font-family:montserrat} 打消し（和文フォント維持） */
  color: #0a63ab;
  font-size: 36px;
  font-weight: 600; /* Hiragino W5 */
  line-height: 40px;
}

/* グローバル h2:before の赤い装飾下線を消す */
.support_intro_head::before { content: none; }

.support_intro_lead {
  margin: 32px 0 0; /* Figma: 見出し下端489 → 導入521 = 32px */
  color: #000;
  font-size: 16px;
  font-weight: normal; /* W4 */
  line-height: 32px;
}

/* --- 導入直下の2カード (470×340) --- */
.support_intro_cards {
  display: flex;
  gap: 40px; /* Figma: card間 740-700=40 */
  justify-content: center;
  margin-top: 44px; /* Figma: 導入下端617 → カード661 = 44px */
}

/* タブレット谷間対策: カードは絶対配置の固定px図版なので、container-type + cqw で丸ごと比例スケール。
   factor = 100/470（PC幅470で100cqw）。PCでは各cqwが元pxちょうどに一致し無改変、谷間では等比縮小。 */
.support_intro_card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 470px;
  aspect-ratio: 470 / 340;
  height: auto;
  background: #fff;
  border: 1px solid #0a63ab;
  box-sizing: border-box;
  container-type: inline-size;
}

.support_intro_card .intro_card_num {
  position: absolute;
  left: 7.021cqw; /* 33/470 */
  top: 5.957cqw;  /* 28/470 */
  width: 12.553cqw;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 10.213cqw; /* 48 */
  line-height: 10.213cqw;
  color: #c5d3de;
}

.support_intro_card .intro_card_label {
  position: absolute;
  left: 7.021cqw;
  top: 15.957cqw; /* 75 */
  width: 12.553cqw;
  text-align: center;
  font-size: 2.979cqw; /* 14 */
  font-weight: bold; /* W6 */
  line-height: 1;
  color: #c5d3de;
}

/* タイトル左の #ddeaf6 縦アクセントバー (Figma: x102 y28 w4 h68) */
.support_intro_card::before {
  content: "";
  position: absolute;
  left: 21.702cqw; /* 102 */
  top: 5.957cqw;
  width: 0.851cqw;
  height: 14.468cqw; /* 68 */
  background: #ddeaf6;
}

.support_intro_card .intro_card_title {
  position: absolute;
  left: 25.532cqw; /* 120 */
  top: 5.957cqw;
  width: 67.447cqw; /* 317 */
  height: 14.468cqw; /* 68 */
  display: flex;
  align-items: center; /* 1行=縦中央(02) / 2行=上下いっぱい(01) を両立 */
  margin: 0;
  color: #0a63ab;
  font-size: 5.106cqw; /* 24 */
  font-weight: bold; /* W6 */
  line-height: 6.809cqw; /* 32 */
  text-align: left;
}

.support_intro_card .intro_card_desc {
  position: absolute;
  left: 7.021cqw;
  top: 22.979cqw; /* 108 */
  width: 85.957cqw; /* 404 */
  margin: 0;
  color: #000;
  font-size: 2.766cqw; /* 13 */
  font-weight: normal; /* W4 */
  line-height: 4.255cqw; /* 20 */
  text-align: left;
}

.support_intro_card .intro_card_photo {
  position: absolute;
  left: 7.021cqw;
  top: 34.894cqw; /* 164 */
  width: 85.957cqw; /* 404 */
  height: 31.489cqw; /* 148 */
}

.support_intro_card .intro_card_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   国内サポートセンターによる安心の対応（青セクション・白ボックス）
   ============================================================ */
.support_center {
  background: #ddeaf6; /* Figma bk-blue */
  margin-top: 79px; /* 導入カード下端1001→青bg上端1080=79（白gap） */
  padding: 83px 0; /* 青bg上端1080→白box上端1163=83 / box下端3428→青下端3570=142（下は別途） */
  padding-bottom: 142px;
}

.support_center_box {
  width: min(980px, calc(100% - 40px)); /* タブレット谷間(751〜979px)対策: PCは980・以下は左右20px余白で流動（メインサイト準拠） */
  margin: 0 auto;
  background: #fff;
  padding: 64px 40px 112px; /* 上:box上端1163→H2線1227=64 / 下:flowカード下端3316→box下端3428=112 */
  box-sizing: border-box;
  border-radius: 4px; /* Figma bk-white rounded-[4px] */
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.12); /* Figma shadow 4px 4px 8px rgba(0,0,0,.12) */
}

/* ===== 見出しH2（上下ティール罫線・共通） ===== */
.support_h2 {
  width: 760px;
  max-width: 100%; /* タブレット谷間: 親（流動）内に収める */
  margin: 0 auto;
}

.support_h2 h2 {
  margin: 0;
  height: auto; /* グローバル h2{height:34px} 打消し */
  display: block; /* グローバル h2{display:inline-block} 打消し */
  font-family: inherit; /* グローバル h2{font-family:montserrat} 打消し */
  padding: 24px 0;
  border-top: 4px solid #09c5a6;
  border-bottom: 4px solid #09c5a6;
  color: #3e3e3e;
  font-size: 36px;
  font-weight: bold; /* W6 */
  line-height: 32px;
  text-align: center;
}

/* グローバル h2:before の赤い装飾下線を消す */
.support_h2 h2::before { content: none; }

/* ===== 導入バンド（サポートセンター画像＋説明） ===== */
.support_center_band {
  position: relative;
  width: min(900px, 100%); /* タブレット谷間: 流動化＋cqwで子を比例スケール（factor=100/900） */
  aspect-ratio: 900 / 348;
  height: auto;
  margin: 54px auto 0; /* H2下端1315→バンド1369=54 */
  background: url(../image/business/support/center_band.png) center / cover no-repeat;
  overflow: hidden;
  container-type: inline-size;
}

.support_center_band .band_map {
  position: absolute;
  left: 6cqw; /* 54/900 */
  top: 0;
  width: 38.667cqw; /* 348 */
  height: 38.667cqw;
  opacity: 0.16;
  pointer-events: none;
}

.support_center_band .band_title {
  position: absolute;
  left: 5.333cqw; /* 48/900 */
  top: 10.111cqw; /* 91 */
  width: 40cqw; /* 360 */
  margin: 0;
  color: #2e2e2e;
  font-size: 2.667cqw; /* 24 */
  font-weight: bold; /* W6 */
  line-height: 3.889cqw; /* 35 */
  text-align: center;
}

.support_center_band .band_desc {
  position: absolute;
  left: 5.333cqw;
  top: 20.111cqw; /* 181 */
  width: 40cqw; /* 360 */
  margin: 0;
  color: #000;
  font-size: 1.444cqw; /* 13 */
  line-height: 2.222cqw; /* 20 */
}

/* ===== 国内完結バー ===== */
.support_center_bar {
  width: min(900px, 100%); /* タブレット谷間: 流動化 */
  min-height: 32px;        /* 折返し時は下へ伸ばす（固定32pxだとタブレットで2行目がはみ出す） */
  height: auto;
  box-sizing: border-box;
  padding: 7px 20px;       /* 1行時 18+14=32＝従来高。左寄せ時に文字がバー端へ密着しないよう左右余白 */
  margin: 40px auto 0; /* バンド下端1717→バー1757=40 */
  background: #09c5a6;
  color: #fff;
  font-size: 18px;
  font-weight: 500; /* W5 */
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center; /* 1行(PC)はバー中央。折返す狭幅では下の text-align:left が効く */
  text-align: left;        /* 修正依頼: 折返し行を左寄せ（継承の center を上書き） */
}

/* ===== 写真＋チェックリスト ===== */
.support_center_row {
  display: flex;
  gap: 8px; /* 524+8+368=900 */
  width: min(900px, 100%); /* タブレット谷間: 流動化。中の写真とチェックリストは比例flexで分配 */
  margin: 8px auto 0; /* バー下端1789→行1797=8 */
  align-items: stretch;
}

.center_row_photo {
  flex: 524 1 0; /* 写真とチェックリストを 524:368 の比で分配 */
  min-width: 0;
  aspect-ratio: 524 / 220;
  height: auto;
}

.center_row_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タブレット谷間: チェックリストは背景svg＋絶対配置の固定px図版。cqwで丸ごと比例スケール（factor=100/368）。
   nowrap文字＋固定下線幅なので%では枠外れ→cqwで文字・下線・座標を同率縮小するのが安全。 */
.center_checklist {
  position: relative;
  flex: 368 1 0; /* 写真と 524:368 の比で分配 */
  min-width: 0;
  aspect-ratio: 368 / 220;
  height: auto;
  background: url(../image/business/support/checklist_box.svg) no-repeat;
  background-size: 100% 100%;
  container-type: inline-size;
}

.center_checklist .checklist_item {
  position: absolute;
}

.center_checklist .checklist_item--1 { left: 6.25cqw; top: 13.859cqw; }  /* 23 / 51 */
.center_checklist .checklist_item--2 { left: 11.141cqw; top: 26.359cqw; } /* 41 / 97 */
.center_checklist .checklist_item--3 { left: 16.576cqw; top: 38.859cqw; } /* 61 / 143 */

.center_checklist .ci_row {
  display: flex;
  align-items: center;
  gap: 1.630cqw; /* 6 */
}

.center_checklist .ci_check {
  width: 5.707cqw;  /* 21 */
  height: 5.435cqw; /* 20 */
  flex-shrink: 0;
}

.center_checklist .ci_row span {
  color: #2e2e2e;
  font-size: 4.348cqw; /* 16 */
  font-weight: bold; /* W6 */
  line-height: 5.435cqw; /* 20 */
  white-space: nowrap;
}

.center_checklist .ci_line {
  display: block;
  margin-top: 1.630cqw; /* 6 */
  height: 1px;
  background: #09c5a6;
}

.center_checklist .checklist_item--1 .ci_line { width: 59.511cqw; } /* 219 */
.center_checklist .checklist_item--2 .ci_line { width: 68.75cqw; }  /* 253 */
.center_checklist .checklist_item--3 .ci_line { width: 77.446cqw; } /* 285 */

/* ===== サブ見出し（スパナ＋テキスト・ティール下線） ===== */
.support_subh3 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-top: 80px; /* 行下端2017→見出し2097=80（1個目） */
}

.support_subh3 .sh3_icon {
  width: 34px;
  height: 34px;
  background: #09c5a6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support_subh3 .sh3_icon img {
  width: 78%;
  height: 78%;
}

.support_subh3 h3 {
  margin: 0;
  color: #2e2e2e;
  font-size: 24px;
  font-weight: bold; /* W6 */
  line-height: 35px;
}

.support_subh3_line {
  display: block;
  width: 266px;
  height: 6px;
  margin: 8px auto 0; /* 見出し下端→下線=8 */
  background: #09c5a6;
}

.support_subh3_line--flow { width: 218px; }

/* ===== サービス／サポート内容カード ===== */
.support_center_cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 36px; /* 下線下端→カード=36 */
}

.support_center_cards .center_card {
  position: relative;
  width: 210px;
  height: 208px;
  border: 2px solid #0a63ab;
  border-radius: 4px;
  box-sizing: border-box;
}

.support_center_cards .cc_icon {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: 148px;
  height: 148px;
}

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

.support_center_cards .cc_label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0;
  text-align: center;
  color: #0a63ab;
  font-size: 16px;
  font-weight: bold; /* W6 */
  line-height: 16px;
}

/* 2個目のサブ見出し（サポート内容）の上マージン：サービスカード下端2390→2490=100 */
.support_center_cards + .support_subh3 { margin-top: 100px; }
/* 修理のながれ見出し：サポートカード下端2783→2883=100 */
.support_subh3--flow { margin-top: 100px; }

/* ===== 修理のながれ フロー ===== */
.flow_intro {
  margin: 36px 0 0; /* 下線下端2932→導入2968=36 */
  text-align: center;
  color: #2e2e2e;
  font-size: 13px;
  font-weight: normal; /* W4 */
  line-height: 24px;
}

/* タブレット谷間: 番号バー（画像＋円6個の図版）をcqwで比例スケール（factor=100/799）。
   幅は 100% ではなく 799/900。丸6個は下のカード列と縦に対応しており、
   バー(799px)とカード列(898.33px)が同じ親900pxの中で中央寄せされて初めて中心が一致する
   （PCで一致しているのはこの偶然のかみ合わせ）。100% だと谷間でバーだけ 900/799 倍に広がり、
   丸とカードのピッチが食い違って端に行くほど扇状にずれる。 */
.flow_numbers {
  position: relative;
  width: min(799px, 88.7778%); /* 799/900 */
  aspect-ratio: 799 / 44;
  height: auto;
  margin: 20px auto 0; /* 導入下端2992→番号3012=20 */
  container-type: inline-size;
}

.flow_numbers .fn_bar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 799 / 44; /* SVGのintrinsic(300×150)を上書き。width:100%→高さは799:44比で決まる。
                             object-fit:fill(既定)でSVGを枠に引伸ばし正円に見せる（元は width:799;height:44 固定と同義）。 */
}

/* 数字1〜6は flow_numbers{,_sp}.svg にパスとして焼き込み済み（Poppins Medium 28px 相当）。
   Poppins はテーマに同梱されておらず 'Poppins', sans-serif は閲覧環境のフォントに落ちるため、
   ライブ文字をやめてフォント非依存にした（資料DLの dl_badge と同じ方針）。
   バーと一体なので font-size の cqw漏れも構造的に起こらない。 */

.flow_cards {
  display: flex;
  justify-content: center;
  /* 谷間で丸番号とピッチを揃えるため、間隔もカード幅と同じく親(900px)基準の割合にする。
     px固定のままだとカードだけが縮んでピッチが合わなくなる */
  gap: 0.85222%; /* 7.67/900（= 151 - 143.33） */
  margin-top: 20px; /* 番号下端3056→カード3076=20 */
}

.flow_cards .flow_card {
  position: relative;
  width: 15.92556%;  /* 143.33/900。谷間で丸番号と同率に縮ませるため親基準の割合にする
                        （6枚+gap5つ = 99.81% なので flex-shrink は発動しない） */
  min-width: 0;      /* flexの既定 min-width:auto だと縮めず行が溢れる */
  height: 240px;
  border: 2px solid #0966b0;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  /* タブレット谷間ではカードが flex-shrink で縮む（143.33→768pxで101.6px）。
     文字が15px固定のままだと2行設計が4行に折返し、44pxの文字枠から18.9px溢れていた。
     カード幅を基準(=100cqw)にして文字を比例スケールさせる。PC(143.33px)では
     各cqwが元pxちょうどに一致し無改変。 */
  container-type: inline-size;
}

.flow_cards .fc_img {
  width: 100%;
  height: 164px; /* 240×68.33% */
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.flow_cards .fc_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow_cards .fc_text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.67%;
  top: 75%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #0a63ab;
  /* 100cqw = カードの content box 幅（143.33 − border 2px×2 = 139.33px）。
     border-box幅の143.33で割ると PCで15px→14.58px に痩せるので基準を間違えないこと */
  font-size: 10.766cqw;   /* 15/139.33 */
  font-weight: bold; /* W6 */
  line-height: 15.789cqw; /* 22/139.33 */
  text-align: center;
}

/* ============================================================
   保証セクション（標準保証／法人限定延長保証）白背景
   ============================================================ */
.support_warranty {
  background: #fff;
  padding: 120px 0 0; /* 青セクション下端3570→ヘッダーバー3690=120 */
}

.support_warranty .warranty_block {
  width: min(980px, calc(100% - 40px)); /* タブレット谷間対策: 流動化（PCは980維持） */
  margin: 0 auto;
}

.support_warranty .warranty_block + .warranty_block {
  margin-top: 120px; /* 標準ブロック下端4178→延長ヘッダー4298=120 */
}

/* ヘッダーバー */
.support_warranty .warranty_bar {
  width: 100%; /* 親 warranty_block（流動）いっぱい */
  height: 92px;
  border-radius: 4px;
  background: #00bbff;
  color: #fff;
  font-size: 36px;
  font-weight: bold; /* W6 */
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 本体：左（バッジ）＋右（ポイント） */
.support_warranty .warranty_body {
  display: flex;
  gap: 20px; /* 480+20+480=980 */
  margin-top: 29px; /* ヘッダー下端3782→見出し3811=29 */
  align-items: flex-start;
}

/* 2カラムは固定480→flexで等分流動（480+20+480=980はPCで維持、谷間で比例縮小） */
.support_warranty .warranty_left { flex: 1 1 0; min-width: 0; }
.support_warranty .warranty_right { flex: 1 1 0; min-width: 0; }

.support_warranty .warranty_lead {
  margin: 0;
  color: #000;
  font-size: 24px;
  font-weight: bold; /* W6 */
  line-height: 30px;
}

.support_warranty .warranty_badge {
  width: 100%; /* 左カラム（流動）いっぱい */
  height: 245px;
  margin-top: 20px; /* 見出し下端3841→バッジ3861=20 */
}

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

.support_warranty .warranty_desc {
  margin: 12px 0 0; /* バッジ下端4106→説明4118=12 */
  color: #000;
  font-size: 13px;
  line-height: 20px;
}

.support_warranty .warranty_desc b { font-weight: bold; }

/* ===== 右：ポイントボックス ===== */
.support_warranty .warranty_points_label {
  display: flex;
  align-items: center;
  width: 252px;
  height: 24px;
  padding-left: 10px;
  box-sizing: border-box;
  background: #0966c5;
  color: #fff;
  font-size: 16px;
  font-weight: bold; /* W6 */
  line-height: 1;
}

/* 延長保証だけラベル文字を座布団の中央に（SPは既に同仕様。基底と同詳細度なので後ろに置いて勝たせる） */
.support_warranty .warranty_points_label--ext {
  justify-content: center;
  padding-left: 0;
}

.support_warranty .warranty_points_box {
  width: 100%; /* 右カラム（流動）いっぱい */
  /* 谷間ではカラムが縮んで注記(11px)が1行→2行に増えるため固定高だと下へ溢れる
     （768pxで11px はみ出しを実測）。PCでは中身270px<295pxなので min-height が効いて無改変 */
  min-height: 295px;
  height: auto;
  border: 1px solid #0966c5;
  background: #fff;
  box-sizing: border-box;
  padding: 27px 22px 0; /* ボックス上端3835→1行目3862=27 */
}

.support_warranty .warranty_points_box--ext { min-height: 255px; }

.support_warranty .wpoint_row {
  display: grid;
  grid-template-columns: 124px 1fr;
  column-gap: 4px;
  align-items: baseline;
  /* 谷間では値(20px)が2行に折返して40pxになり、固定高31pxだと2行目が
     border-bottom の罫線をまたいでしまう。min-height にして罫線ごと下げる */
  min-height: 31px;
  margin-bottom: 16px; /* 行間47 - 行高31 */
  border-bottom: 1px solid #c5d3de;
}

.support_warranty .wpoint_label {
  text-align: right;
  color: #0966c5;
  font-size: 13px;
  font-weight: 500; /* W5 */
  line-height: 20px;
}

.support_warranty .wpoint_value {
  color: #000;
  font-size: 20px;
  font-weight: normal; /* W4 */
  line-height: 20px;
}

/* 延長保証：ブレット＋テキスト */
.support_warranty .wpoint_row--bullet {
  display: block;
  position: relative;
  padding-left: 20px;
  min-height: 31px;
  margin-bottom: 16px;
  border-bottom: 1px solid #c5d3de;
}

.support_warranty .wpoint_row--bullet::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: #0966c5;
}

.support_warranty .wpoint_row--bullet .wpoint_value {
  display: block;
  line-height: 20px;
}

.support_warranty .wpoint_notes {
  margin-top: 16px; /* 4行目下端→注釈 */
}

.support_warranty .wpoint_notes p {
  margin: 0;
  color: #000;
  font-size: 11px;
  font-weight: normal; /* W4 */
  line-height: 18px;
}

/* ===== 詳細ボタン（赤ピル） ===== */
.support_warranty .warranty_btn_wrap {
  text-align: center;
  margin-top: 16px; /* ボックス下端→ボタン=16 */
}

.support_warranty .warranty_btn {
  display: inline-flex;
  align-items: center;
  background: #e60039;
  border-radius: 100px;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer; /* href無しの role=button 用 */
}

.support_warranty .warranty_btn--modal {
  gap: 20px;
  padding: 6px 8px 6px 36px;
  font-size: 15px;
  font-weight: 500; /* W5 */
}

.support_warranty .warranty_btn--modal .btn_icon { width: 16px; height: 16px; }

.support_warranty .warranty_btn--newtab {
  gap: 40px;
  padding: 11px 16px 11px 72px;
  font-size: 20px;
  font-weight: bold; /* W6 */
}

.support_warranty .warranty_btn--newtab .btn_icon { width: 20px; height: 20px; }

/* テーマの a:hover{opacity:.5} 打消し（ボタンは不透明維持） */
.support_warranty .warranty_btn:hover { opacity: 1; }

/* ============================================================
   aiwaの安心ポイントまとめ（青セクション・跨ぎH2＋コラージュ）
   ============================================================ */
/* H2バッジ（円＋青ピル）：青パネル上端に半分乗る */
.summary_h2 {
  position: relative;
  z-index: 1;
  width: 618px;
  height: 98px;
  margin: 120px auto 0; /* 保証セクション下端4766→円上端4886=120 */
}

.summary_h2 .summary_h2_pill {
  position: absolute;
  left: 81px; /* 円left411→ピルleft492 */
  top: 23px; /* 円top4886→ピルtop4909 */
  width: 537px;
  height: 52px;
  background: #00bbff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary_h2 .summary_h2_pill p {
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: bold; /* W6 */
  line-height: 30px;
}

.summary_h2 .summary_h2_circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 98px;
  height: 98px;
}

.summary_h2 .summary_h2_icon {
  position: absolute;
  left: 28px; /* 円中28 */
  top: 6px;
  width: 42px;
  height: 80px;
}

/* 青パネル本体（H2下端-49で上に潜り込ませ、青上端=H2中心） */
.support_summary {
  position: relative;
  margin-top: -49px;
  background: #ddeaf6;
  padding: 84px 0 119px; /* 上:青上端4935→カード5019=84 / 下:コラージュ下端6000→青下端6119=119 */
}

/* まとめ3カード */
.support_summary .summary_cards {
  display: flex;
  justify-content: center;
  gap: 28px; /* 566-538=28 */
  width: min(980px, calc(100% - 40px)); /* タブレット谷間対策: 流動化（PCは980維持） */
  margin: 0 auto;
}

.support_summary .summary_card {
  position: relative;
  flex: 1 1 0; /* 3枚を等分。max-widthでPCは308に固定、谷間で比例縮小 */
  min-width: 0;
  max-width: 308px;
  height: 277px;
  background: #fff;
  border: 2px solid #b3d2df;
  box-sizing: border-box;
}

.support_summary .sc_sub {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px; /* 10.11%×277 */
  margin: 0;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-weight: bold; /* W6 */
  line-height: 16px;
}

.support_summary .sc_title {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px; /* 20.22%×277 */
  margin: 0;
  text-align: center;
  color: #000;
  font-size: 28px;
  font-weight: bold; /* W6 */
  line-height: 25px;
}

.support_summary .sc_photo {
  position: absolute;
  left: 9.09%;  /* 28/308: 谷間でカードが縮んでも左右対称の余白を保つ */
  right: 9.09%;
  top: 109px;
  width: auto;
  height: 140px;
}

.support_summary .sc_photo--border { border: 1px solid #dae7f7; }

.support_summary .sc_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 谷間で幅が縮んでも歪ませない（PCは252×140ちょうどなので無影響） */
}

/* コラージュ（写真散らし＋円形メッセージ）
   PC/SPとも合成画像1枚（写真6枚・発光円・不透明度を焼き込み済み）。<picture> で出し分ける。
   高さは画像の比率（1960:1208 = 980:604）が決めるので aspect-ratio の指定は不要。 */
.support_summary .summary_collage {
  position: relative;
  width: min(980px, calc(100% - 40px));
  margin: 100px auto 0; /* カード下端5296→コラージュ5396=100 */
  container-type: inline-size; /* 中央メッセージを cqw で画像スケールに追従させる基準 */
}

.support_summary .summary_collage picture {
  display: block; /* inline のままだと行ボックス分の余白が画像下に出る */
}

.support_summary .collage_composite {
  display: block;
  width: 100%;
  height: auto;
}

.support_summary .summary_msg_text {
  position: absolute;
  left: 50cqw;      /* 490/980＝コラージュ中央 */
  top: 19.694cqw;   /* 193 */
  transform: translateX(-50%);
  text-align: center;
  color: #2e2e2e;
  white-space: nowrap;
}

.support_summary .summary_msg_text p { margin: 0; font-weight: 500; /* W5 */ }
.support_summary .summary_msg_text .msg_top { font-size: 1.633cqw; line-height: 2.041cqw; } /* 16 / 20 */
.support_summary .summary_msg_text .msg_main { font-size: 2.857cqw; line-height: 4.286cqw; margin: 1.429cqw 0; } /* 28 / 42 / 14 */
.support_summary .summary_msg_text .msg_bottom { font-size: 1.633cqw; line-height: 2.041cqw; } /* 16 / 20 */

/* ===== CTA：青パネル下端に跨ぐ ===== */
.support_cta {
  position: relative;
  z-index: 1;
  margin-top: -51px; /* 青下端6119→CTA上端6068=-51 */
  padding-bottom: 0;
}

/* 法人TOPへ戻る（CTA下→ボタン→フッター） */
.support_back {
  padding: 100px 0; /* CTA下端→ボタン100 / ボタン下端→フッター100 */
  text-align: center;
}

/* ============================================================
   保証規定モーダル（標準保証ボタンで開く）
   ============================================================ */
.support_modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.support_modal.is_open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.support_modal .support_modal_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* 背景うす黒 */
}

.support_modal .support_modal_panel {
  position: relative;
  z-index: 1;
  width: 720px;
  max-width: calc(100vw - 40px);
  height: 800px;
  max-height: 90vh;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
}

.support_modal .support_modal_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: none;
  background: #e60039;
  border-radius: 0 4px 0 4px; /* 右上4・左下4 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}

.support_modal .support_modal_close:hover { opacity: 1; }

.support_modal .support_modal_close svg {
  display: block;
  width: 35px;
  height: 34px;
}

.support_modal .support_modal_scroll {
  position: absolute;
  top: 60px;
  left: 60px;
  right: 60px;
  bottom: 60px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* 端まで来てもホイールが背景へ連鎖しない */
}

.support_modal .modal_head {
  margin: 0 0 12px;
  color: #e60039;
  font-size: 20px;
  font-weight: bold; /* W6 */
  line-height: 24px;
}

.support_modal .modal_head--gap { margin-top: 32px; }

.support_modal .modal_body {
  color: #000;
  font-size: 13px;
  font-weight: normal; /* W4 */
  line-height: 20px;
}

.support_modal .modal_body p { margin: 0 0 20px; }
.support_modal .modal_body p:last-child { margin-bottom: 0; }

/* --- SP用マークアップのPC側打消し（PCの見た目は一切変えない） --- */
/* 番号バー＋カードを包む枠。display:contents でレイアウトに影響しない */
.flow_wrap { display: contents; }
/* SPだけに出すバンド写真 */
.band_photo_sp { display: none; }

/* ============================================================
   SP (モバイル) 対応  Figma 23773:7498 / 393×8109
   ブレイクポイントはテーマ全体に合わせて 750px
   ============================================================ */
@media screen and (max-width: 750px) {

  /* ===== KV =====
     SP画像 kv_support_sp.png(393×420)。aspect-ratio は共有
     .usecase_mv .mv_kv_photo(393/420) がそのまま効く。
     共有SP定義(page-usecase.css)は kintai由来で白箱28px/影#005797 だが、
     support は Figma 23px/leading29.952(箱46px)・影ティール#0a7563 なので上書き */
  .support_mv .mv_kv_text {
    top: 171px; /* Figma y242 − 写真上端71 */
  }

  .support_mv .mv_title span {
    font-size: 23px;
    line-height: 30px; /* Figma 29.952px → 箱高 8+30+8=46px */
    padding: 8px 12px;
    white-space: nowrap; /* 折返しで箱が伸びるのを防ぐ */
    box-shadow: 0 3.317px 9.952px rgba(0, 0, 0, 0.16); /* PC と同じ黒系（Figma MCP は箱の影を出力しないためユーザー確認で確定） */
  }

  .support_mv .mv_desc {
    top: 229px; /* Figma y300 − 71 */
    font-size: 16px;
    line-height: 20px; /* Figma 19.968px */
    text-shadow: 0 3.317px 9.952px #0a7563; /* Figma はティール（PCは rgba(0,0,0,.16)） */
  }

  /* ===== 安心の理由とは（導入） ===== */
  .support_intro {
    padding: 40px 20px 0; /* 写真下端491 → H2上端531 = 40px */
  }

  .support_intro_head {
    font-size: 28px;
    line-height: 32px; /* Figma 28px/32 */
    font-weight: bold; /* 修正依頼#3: SP見出しは細く見えるためBold（PCは600のまま） */
  }

  .support_intro_lead {
    margin-top: 41px; /* H2下端563 → リード上端604 */
    line-height: 25px; /* Figma 16px/25（PCは32） */
    text-align: left; /* Figma はSPだけ左寄せ */
  }

  /* --- 導入直下の2カード（PC 470×340 → SP 353×259 の縦積み） --- */
  .support_intro_cards {
    flex-direction: column;
    gap: 28px; /* card1下端1073 → card2上端1101 */
    margin-top: 60px; /* リード下端754 → card1上端814 */
  }

  .support_intro_card {
    width: 100%; /* 393 − padding20×2 = 353 */
    height: 259px;
    border-width: 0.751px; /* Figma */
    flex: none;           /* タブレット用 flex:1/aspect-ratio がSPに漏れないよう打消し（SPは縦積み固定高） */
    aspect-ratio: auto;
  }

  .support_intro_card .intro_card_num {
    left: 24px;
    top: 22px;
    width: 45px;
    font-size: 36px;
    line-height: 36px;
  }

  .support_intro_card .intro_card_label {
    left: 24px;
    top: 57px;
    width: 45px;
    font-size: 11px;
  }

  /* タイトル左の #ddeaf6 縦アクセントバー */
  .support_intro_card::before {
    left: 77px;
    top: 20px;
    width: 3px;
    height: 52px;
  }

  .support_intro_card .intro_card_title {
    left: 90px;
    right: 24px;
    top: 22px;
    width: auto;
    height: 49px; /* 18px×2行(24.034) */
    font-size: 18px;
    line-height: 24.034px;
  }

  .support_intro_card .intro_card_desc {
    left: 24.79px;
    right: 24.79px;
    top: 80px;
    width: auto;
    font-size: 13px;
    line-height: 20px;
  }

  .support_intro_card .intro_card_photo {
    left: 24px;
    right: 24px;
    top: 128px;
    width: auto;
    height: 111px;
  }

  /* ============================================================
     国内サポートセンターによる安心の対応（青セクション）
     青bk 1440-4027 / 白box 1500-3967（x20 w353）
     ============================================================ */
  .support_center {
    margin-top: 80px;   /* カード02下端1360 → 青bk上端1440 */
    padding: 60px 20px; /* 青上端1440→白box1500=60 ／ box下端3967→青下端4027=60 */
  }

  .support_center_box {
    width: 100%;              /* 393 − 20×2 = 353 */
    padding: 40px 24px;       /* box上端1500→H2罫線1540=40 ／ 最終カード下端3927→box下端3967=40 */
    /* 内容幅 353 − 24×2 = 305（Figmaの中身は全て x44 w305） */
  }

  /* ===== H2（上下ティール罫線） ===== */
  .support_h2 {
    width: 100%;
  }

  .support_h2 h2 {
    padding: 12px 22.5px; /* 罫線→テキスト箱12px ／ 左右は本文幅を260pxに絞り2行に折り返させる */
    font-size: 24px;
    line-height: 30px;    /* 2行=60 → 全体 4+12+60+12+4 = 92px */
  }

  /* ===== 導入バンド（SPは白地＋宮崎マップ、写真は下に独立して置く） ===== */
  .support_center_band {
    width: 100%;
    height: 228px;
    margin-top: 40px; /* H2下端1632 → バンド1672 */
    background: #fff; /* PCの center_band.png 背景は使わない */
  }

  .support_center_band .band_map {
    left: 50%;
    transform: translateX(-50%);
    width: 228px;
    height: 228px;
  }

  .support_center_band .band_title {
    left: 0;
    width: 100%;
    top: 28px;         /* 1700 − 1672 */
    font-size: 16px;
    line-height: 22px; /* 2行=44px */
  }

  .support_center_band .band_desc {
    left: 20px;   /* Figma x64 − バンド左44 */
    /* サイト方針=連続スケール(vw)を使わず固定px。幅は min(265px, calc(100%-40px))＝
       viewport 305px以上で常に265px固定なので、固定13px/20pxでも393〜320pxで折返しが不変
       ＝クリップ差が出ない（実測確認済み）。幅の calc は比例なので維持。 */
    width: min(265px, calc(100% - 40px));
    top: 92px;    /* 1764 − 1672 */
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.52px; /* Figma tracking（PCには無い） */
  }

  /* SP専用：バンド背景だった JENESIS 社屋写真を独立した1枚として配置 */
  .band_photo_sp {
    display: block;
    width: 100%; /* 393px以外の幅でもバー/バンド(100%)と右端が揃うように可変 */
    height: 140px;
    margin-top: 8px; /* バンド下端1900 → 写真1908 */
    object-fit: cover;
  }

  /* ===== 国内完結バー（PCは1行32px → SPは3行76px） ===== */
  .support_center_bar {
    width: 100%;
    height: 76px;
    margin-top: 48px; /* 写真下端2048 → バー2096 */
    padding: 0 8px;   /* テキスト幅 305−16=289 */
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
    text-align: left; /* 修正依頼: 折返し行を左寄せ */
    justify-content: flex-start; /* テキストブロックもバー左端へ寄せる */
  }

  /* ===== 写真＋チェックリスト（PCは横並び → SPは縦積み） ===== */
  .support_center_row {
    display: block;
    width: 100%;
    margin-top: 4px; /* バー下端2172 → 写真2176 */
  }

  .center_row_photo {
    width: 100%;
    height: 128.05px;
  }

  .center_checklist {
    width: 100%;
    height: 182px;
    margin-top: 4px; /* 写真下端2304.05 → 枠2308 */
    /* 角飾りが歪まないよう SP専用の 305×182 版に差し替え */
    background-image: url(../image/business/support/checklist_box_sp.svg);
  }

  /* SPは段階ずらしを廃止し左端揃え（Figma: 3項目とも x70） */
  .center_checklist .checklist_item--1 { left: 26px; top: 36px; }
  .center_checklist .checklist_item--2 { left: 26px; top: 78px; }
  .center_checklist .checklist_item--3 { left: 26px; top: 120px; }

  .center_checklist .checklist_item--1 .ci_row { gap: 6px; }

  .center_checklist .ci_row { gap: 8px; }

  /* base の ci_check(5.707cqw/5.435cqw) がSPで約17.4pxに縮む漏れを打消し、従来の21×20pxへ戻す */
  .center_checklist .ci_check { width: 21px; height: 20px; }

  /* 同じく base の ci_line margin-top(1.630cqw) がSPで4.97pxに縮む漏れを打消して6pxへ戻す
     （checklist_item の高さが1px縮み、下線が1px上がっていた） */
  .center_checklist .ci_line { margin-top: 6px; }

  /* 修正依頼#14: 枠(width:100%)は縮むのにテキストが固定pxだと狭い端末で飛び出すため、
     min(Figma-px, vw)で「393px以上はFigma通り・393px未満は比例縮小」にする。基準は設計幅393px。 */
  .center_checklist .ci_row span {
    font-size: min(14px, 3.562vw); /* 14/393*100 */
  }

  .center_checklist .checklist_item--1 .ci_line { width: min(195px, 49.62vw); }
  .center_checklist .checklist_item--2 .ci_line { width: min(225px, 57.25vw); }
  .center_checklist .checklist_item--3 .ci_line { width: min(253px, 64.38vw); }

  /* ===== サブ見出し（スパナ＋テキスト・ティール下線） ===== */
  .support_subh3 {
    margin-top: 60px; /* チェックリスト下端2490 → 見出し2550 */
  }

  .support_subh3 .sh3_icon {
    width: 24px;
    height: 24px;
  }

  .support_subh3 h3 {
    font-size: 20px;
    line-height: 20px;
  }

  .support_subh3_line {
    width: 224px;
    height: 4px;
    margin-top: 8px; /* 見出し下端2574 → 下線2582 */
  }

  .support_subh3_line--flow { width: 184px; }

  /* ===== サービス／サポート内容カード（PC 210×208 → SP 95.455×94.545） ===== */
  .support_center_cards {
    gap: 9.09px;
    margin-top: 20px; /* 下線下端2586 → カード2606 */
  }

  .support_center_cards .center_card {
    width: 95.455px;
    height: 94.545px;
    border-width: 0.909px;
    border-radius: 1.818px;
  }

  .support_center_cards .cc_icon {
    top: 6.36px;
    width: 67.273px;
    height: 67.273px;
  }

  .support_center_cards .cc_label {
    bottom: 7.82px; /* 枠線0.909pxぶんを差し引き、文字中心をカード上端から82.18pxに合わせる */
    font-size: 11px;
    line-height: 7.273px; /* Figma（0.909倍の縮小インスタンス） */
  }

  /* 2個目のサブ見出し：サービスカード下端2700.5 → 2761 */
  .support_center_cards + .support_subh3 { margin-top: 60px; }
  /* 修理のながれ見出し：サポートカード下端2911.7 → 2972 */
  .support_subh3--flow { margin-top: 60px; }

  /* ===== 修理のながれ（PCは横6枚 → SPは縦6枚＋左に番号の縦バー） ===== */
  .flow_intro {
    margin-top: 20px; /* 下線下端3008 → 導入3028 */
    line-height: 24px; /* 3行=72px */
  }

  .flow_wrap {
    display: block;
    position: relative;
    margin-top: 27px; /* 導入下端3100 → カード1枚目3127 */
  }

  .flow_numbers {
    position: absolute;
    left: 0;
    top: 42px; /* 3169 − 3127 */
    width: 36px;
    height: 716px;
    margin: 0;
  }

  .flow_numbers .fn_bar {
    width: 36px;
    height: 716px; /* SP版は縦向きSVG（丸6個＋縦線） */
  }

  /* 数字は flow_numbers_sp.svg に焼き込み済み（base の .fn_num 一式とともに撤去） */

  .flow_cards {
    flex-direction: column;
    gap: 16px;              /* 136 − 120 */
    margin: 0 0 0 56px;     /* カード x100 − 枠左44 */
  }

  .flow_cards .flow_card {
    width: 100%; /* 393pxでは 305−56 = 249px */
    height: 120px;
  }

  /* SPは写真が左・テキストが右。
     Figmaは枠線(2px)を画像の上に重ねて描くので、Figmaの数値から
     border分を引いた「見えている領域」で指定する（絶対配置の基準がpadding boxのため） */
  .flow_cards .fc_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;   /* Figma 92 − 左border2 → 実座標 102〜192 */
    height: 116px; /* Figma 120 − 上下border2 */
    border-radius: 4px 0 0 4px;
  }

  .flow_cards .fc_text {
    left: 99px;   /* Figma 101 − border2 → 実座標 201 */
    right: 6px;   /* Figma 8 − border2 */
    top: 36px;    /* Figma 38 − border2 */
    bottom: 36px; /* 高さ 116−36−36 = 44（13px×2行） */
    font-size: 13px;
    line-height: 20px;
  }


  /* ============================================================
     保証セクション（PCは左右2カラム → SPは1カラム縦積み）
     標準保証 4107-4911 / 延長保証 4951-5596
     ============================================================ */
  .support_warranty {
    padding: 80px 20px 0; /* 青セクション下端4027 → ヘッダーバー4107 */
  }

  .support_warranty .warranty_block {
    width: 100%;
  }

  .support_warranty .warranty_block + .warranty_block {
    margin-top: 40px; /* 標準ブロック下端4911 → 延長ヘッダー4951 */
  }

  .support_warranty .warranty_bar {
    width: 100%;
    height: 84px;
    font-size: 24px;
    line-height: 30px; /* Figmaは2行 */
  }

  /* PCの左右2カラムを縦積みに。DOM順(左=リード/バッジ/説明 → 右=ラベル/ボックス/ボタン)が
     そのままFigmaのSP順になるので order 指定は不要 */
  .support_warranty .warranty_body {
    display: block;
    margin-top: 16px; /* バー下端4191 → リード4207 */
  }

  .support_warranty .warranty_left,
  .support_warranty .warranty_right { width: 100%; }

  .support_warranty .warranty_lead {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }

  .support_warranty .warranty_badge {
    width: 100%;
    height: 180px;
    margin-top: 12px; /* リード下端4237 → バッジ4249 */
  }

  .support_warranty .warranty_badge img {
    object-fit: cover; /* Figma SP は cover（PCは contain） */
  }

  .support_warranty .warranty_desc {
    margin-top: 12px;        /* バッジ下端4429 → 説明4441 */
    letter-spacing: -0.26px; /* Figma tracking */
  }

  /* ===== ポイントボックス ===== */
  .support_warranty .warranty_points_label {
    margin-top: 20px; /* 説明下端4501 → ラベル4521 */
    height: 24px;
    font-size: 16px;
    line-height: 26px;
  }

  /* 延長保証だけラベル文字が中央寄せ（Figma: テキストx74＝252pxタブの中央） */
  .support_warranty .warranty_block + .warranty_block .warranty_points_label {
    margin-top: 19px;
    justify-content: center;
    padding-left: 0;
  }

  .support_warranty .warranty_points_box {
    width: 100%;
    height: 314px;
    min-height: 0; /* base の min-height:295px を打消し */
    padding: 20px 24px 0; /* ボックス上端4545 → 1行目4565 ／ 行は x44＝箱左20+24 */
  }

  .support_warranty .warranty_points_box--ext { height: 175px; min-height: 0; }

  /* ラベル：値 の2カラム。ラベル右端x145・値左端x149（箱左20+padding24 基準で 101 / +4） */
  .support_warranty .wpoint_row {
    grid-template-columns: 101px 1fr;
    column-gap: 4px;
    height: auto;
    min-height: 0; /* base の min-height:31px を打消し（SPは行高を内容に合わせる） */
    padding: 3px 0 4px; /* 罫線がFigmaのLine位置(行上端+27)に来る */
    margin-bottom: 11px;
  }

  /* 2行になる「対応内容」行だけFigmaの箱が1px低く、次行までが7px */
  .support_warranty .warranty_points_box .wpoint_row:nth-of-type(2) {
    margin-bottom: 7px;
  }

  .support_warranty .wpoint_label {
    font-size: 11px;
  }

  .support_warranty .wpoint_value {
    font-size: 15px;
  }

  /* 延長保証：ブレット行（Figma 305×27・文字x18・ブレット12pxを(2,7)に） */
  .support_warranty .wpoint_row--bullet {
    padding: 3px 0 4px 18px;
    height: auto;
    min-height: 0;
    margin-bottom: 7px;
  }

  .support_warranty .wpoint_row--bullet::before {
    left: 2px;
    top: 7px;
  }

  .support_warranty .wpoint_row--bullet .wpoint_value {
    letter-spacing: -0.9px; /* Figma tracking */
  }

  .support_warranty .wpoint_notes {
    margin-top: 19px; /* 4行目下端 → 注釈4749 */
  }

  .support_warranty .warranty_points_box--ext .wpoint_notes {
    margin-top: 19px; /* ブレット3行目下端5487 → 注釈5506 */
  }

  /* ===== 詳細ボタン（SPは2つとも 305×32 の小ボタン） ===== */
  .support_warranty .warranty_btn_wrap {
    margin-top: 20px; /* ボックス下端4859 → ボタン4879 */
  }

  /* Figmaは幅305固定で矢印が右端に寄る＝space-betweenで幅非依存に再現 */
  .support_warranty .warranty_btn {
    width: calc(100% - 48px); /* Figmaはブロック幅より左右24pxずつ内側（393pxで305px） */
    justify-content: space-between;
    gap: 0;
    line-height: 20px; /* 未指定だと継承line-heightで22.5pxになり高さが32→34.5pxに膨らむ */
  }

  .support_warranty .warranty_btn--newtab {
    padding: 6px 8px 6px 36px;
    font-size: 15px;
    font-weight: 500; /* W5 */
  }

  .support_warranty .warranty_btn--newtab .btn_icon { width: 16px; height: 16px; }


  /* ============================================================
     aiwaの安心ポイントまとめ（青パネル・跨ぎH2・コラージュ）
     H2 5688-5760 / 青 5725-7272 / CTA 7242 / 戻る 7362 / footer 7478
     ============================================================ */
  .summary_h2 {
    width: calc(100% - 40px);
    max-width: 353px;
    height: 72px;
    margin: 92px auto 0; /* 延長保証ブロック下端5596 → 円上端5688 */
  }

  .summary_h2 .summary_h2_circle {
    width: 72px;
    height: 72px;
  }

  .summary_h2 .summary_h2_icon {
    left: 20px; /* Figma x40 − H2左端20 */
    top: 5px;
    width: 31px;
    height: 58px;
  }

  .summary_h2 .summary_h2_pill {
    left: 43px; /* Figma x63 − 20 */
    right: 0;
    top: 11px;
    width: auto; /* 393pxでは310px */
    height: 52px;
    /* 修正依頼#17(再指摘): 電球アイコン(right:20px+width:31px=右端51px)がpill左端(43px)に8px食い込む。
       単純な中央寄せだと狭幅でpillが縮み中央テキストが電球へ寄って「aiwaのa」が被る（機種のフォント差で顕在化）。
       box-sizing:border-box なのでpadding-leftはpill外形を変えず内容領域だけ右へ寄せる。pill左端43px+16=59pxが
       電球右端51pxより8px右＝テキストが内容幅に収まる限り幾何学的に電球と被らない（≥8px保証）。
       393pxでは文字がpill中心より約8px右＝Figma意図「pill中心より5px右」と同方向・近似。 */
    padding-left: 16px;
  }

  .summary_h2 .summary_h2_pill p {
    /* 修正依頼#17: pillが393px未満で連続的に縮む対策として文字も連続スケール(min px,vw)を維持
       （上のpadding-leftと併用。単独では狭幅で被りが残るため両輪で確実に避ける）。 */
    font-size: min(20px, 5.09vw); /* 20/393*100 */
    line-height: 24px;
  }

  .support_summary {
    margin-top: -35px;    /* H2下端5760 − 35 = 青上端5725 */
    padding: 55px 0 70px; /* 青上端→カード5780 ／ コラージュ下端7202→青下端7272 */
  }

  /* まとめ3カード：横並び → 縦積み */
  .support_summary .summary_cards {
    flex-direction: column;
    gap: 12px;         /* 286.3 − 274.3 */
    width: calc(100% - 88px);
    max-width: 305px;
    margin: 0 auto;    /* (393−305)/2 = 44 ＝ Figma x44 */
  }

  .support_summary .summary_card {
    width: 100%;
    height: 274.3px;
    /* base の flex:1 1 0 を打消す。SPは flex-direction:column なので主軸が縦に変わり、
       flex-basis:0 が height を上書きしてカードが中身0＋border 4px に潰れる
       （中身は position:absolute なので潰れても溢れ検知に掛からない）。 */
    flex: none;
    /* sc_sub(top28) / sc_title(top56) はPCと同値のまま。sc_photo は下で相対化 */
  }

  /* #4: card は calc(100%-88px)/max305 で狭端末では 305px 未満に縮むが、
     PC固定の sc_photo(252×140/left28) がそのまま残り、360px でカード枠外・
     320px で画面外へはみ出していた。card 幅に追従させ 393px では Figma の 252×140 を維持。 */
  .support_summary .sc_photo {
    left: 50%;
    transform: translateX(-50%);
    width: min(252px, calc(100% - 50px)); /* 393px時=252 / 狭端末はカード内に収める */
    height: auto;
    aspect-ratio: 252 / 140; /* 高さも比率で縮め歪ませない */
  }

  /* ===== コラージュ（#18: 6枚＋発光円を1枚の合成画像に置換） =====
     SPは 786×1031（=393:515.5）の合成画像。<picture> の source が切替え、
     baseの .collage_composite（width:100%）がそのまま効くので寸法指定は不要。
     PCと違い左右のはみ出し量が大きいので、コラージュ幅は画面いっぱいにする。 */
  .support_summary .summary_collage {
    width: 100%;
    margin: 60px auto 0; /* カード下端6626.9 → コラージュ6687 */
  }

  .support_summary .summary_msg_text {
    left: 50%;   /* 画面中央 */
    top: 37%;    /* 1行目上端 190.5 / 515（合成画像の高さ比） */
  }

  /* 文字サイズ・行間・余白は cqw で設計値を相対化（1cqw = コラージュ幅の1%）。
     393px時: 24.96/393*100=6.351cqw 等で Figma値に一致し、幅が変われば画像と同率で伸縮。 */
  .support_summary .summary_msg_text .msg_top,
  .support_summary .summary_msg_text .msg_bottom {
    font-size: 3.629cqw; /* 14.263px @393 */
    line-height: 1.25;
  }

  .support_summary .summary_msg_text .msg_main {
    font-size: 6.351cqw; /* 24.96px @393 */
    line-height: 1.5;
    margin: 3.155cqw 0;  /* 12.4px @393 */
  }

  /* ===== CTA：青パネル下端に跨ぐ（ボタン寸法は共有 .usecase_cta のSP定義） ===== */
  .support_cta {
    margin-top: -30px;   /* 青下端7272 → CTA上端7242 */
    padding-bottom: 0;   /* 共有の padding-bottom:80px を打消し */
  }

  /* ===== 法人TOPへ戻る ===== */
  .support_back {
    padding: 60px 0 80px; /* CTA下端7302→ボタン7362 ／ ボタン下端7398→footer 7478 */
  }


  /* ============================================================
     保証規定モーダル（Figma 23810:7644「sp modal」/ 353×620）
     ============================================================ */
  .support_modal .support_modal_panel {
    width: 353px;
    height: 620px;
    border-radius: 2.667px;
  }

  .support_modal .support_modal_close {
    width: 40px;
    height: 40px;
    border-radius: 0 2.667px 0 2.667px; /* 右上・左下 */
  }

  .support_modal .support_modal_close svg {
    width: 23.294px;
    height: 22.667px;
  }

  /* スクロール領域：本文273px(x40〜313)、細スクロールバー5px(x323〜328)。
     border-box 288px − padding-right 10px − スクロールバー5px = 本文273px */
  .support_modal .support_modal_scroll {
    top: 40px;
    left: 40px;
    right: 25px;   /* 353 − 40 − 25 = 288px */
    bottom: 40px;  /* 高さ 620 − 40 − 40 = 540px */
    padding-right: 10px;
    box-sizing: border-box;
    /* ⚠️ scrollbar-width / scrollbar-color を書くと Chrome は ::-webkit-scrollbar を
       完全に無視し、macOSのオーバーレイ挙動でバーが幅0になる（本文が273→278pxに広がる）。
       モバイル(Android Chrome)を優先し webkit 疑似要素だけで指定する */
  }

  /* Figmaの細バー（トラック5px白＝パネルと同色でほぼ不可視／つまみ3px #49769f） */
  .support_modal .support_modal_scroll::-webkit-scrollbar {
    width: 5px;
  }

  .support_modal .support_modal_scroll::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 2.5px;
  }

  .support_modal .support_modal_scroll::-webkit-scrollbar-thumb {
    background: #49769f;
    border-radius: 1.5px;
    /* 5pxのトラックの中で見た目3pxにする */
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    background-clip: padding-box;
  }

  .support_modal .modal_head {
    margin-bottom: 20px; /* 見出し下端 → 本文（PCは12px） */
  }

  .support_modal .modal_head--gap {
    margin-top: 40px; /* 本文1下端1165 → 見出し2 1205（PCは32px） */
  }

}

/* ===== 狭端末の段階ブレイクポイント（メインサイト踏襲：320）=====
   band_descを固定px化した副作用で、バンドが最も縮む320px近傍で本文が約4px下端クリップする。
   ここだけ1段落として収める（321〜750pxは13px/20pxのまま＝設計どおり）。 */
@media screen and (max-width: 320px) {
  .support_center_band .band_desc { font-size: 12px; line-height: 18px; }
}