/* ============================================================
   vulnerability-app_diagnostics.css
   脆弱性診断サービス LP — WEBアプリケーション診断ページ専用CSS
   依存: vulnerability-common.css を先に読み込むこと（変数・ボタン・subnav 等）
   スコープ: .sec-vuln-hero / .sec-vuln-report 等
   生成日: 2026-05-19（Figma 実数値ベース）
   ============================================================ */

/* ============================================================
   sec-vuln-hero — ヒーロー
   Figma node-id: 37:5386
   ============================================================ */

.sec-vuln-hero *,
.sec-vuln-hero *::before,
.sec-vuln-hero *::after {
  box-sizing: border-box;
}

.sec-vuln-hero {
  position:   relative;
  padding:    60px 0 76px;
  /* デザイン: 左=ほぼ白 → 右=薄ネイビーティント の subtle gradient */
  background: linear-gradient(90deg, var(--vuln-white) 0%, var(--vuln-white) 35%, #EEF0F8 100%);
  border-top: 10px solid var(--vuln-primary);   /* サービストップ (vulnerability.css L12) と揃える */
  overflow:   hidden;
}

.sec-vuln-hero__inner {
  display:     flex;
  align-items: center;
  max-width:   1440px;
  margin:      0 auto;
  padding:     0 132px;
  width:       100%;
  gap:         40px;
}

/* ---------- 左カラム: バッジ + h1 + リード + CTA ---------- */
.sec-vuln-hero__left {
  flex:           0 0 548px;       /* 縮まない・伸びない。見出しが548px内で収まる前提 */
  display:        flex;
  flex-direction: column;
  gap:            24px;
  align-items:    flex-start;
}

.sec-vuln-hero__badge {
  display:         inline-block;
  background:      var(--vuln-primary);
  color:           var(--vuln-white);
  padding:         5px 15px;
  border-radius:   3px;
  font-weight:     700;
  font-size:       20px;
  letter-spacing:  1px;
  line-height:     1.4;
  margin:          0;
  white-space:     nowrap;
}

.sec-vuln-hero__h1 {
  font-weight:     700;
  font-size:       44px;
  color:           var(--vuln-navy);
  letter-spacing:  0.88px;
  line-height:     1.25;
  margin:          0;
  white-space:     nowrap;      /* 1行固定（548pxの左カラム内で収まる前提） */
}

.sec-vuln-hero__sub {
  font-size:   16px;
  font-weight: 400;
  color:       var(--vuln-text);
  line-height: 1.9;
  margin:      0;
}

.sec-vuln-hero__btns {
  display:     flex;
  gap:         20px;
  align-items: center;
  flex-wrap:   wrap;
  margin-top:  8px;
}

/* ---------- 右カラム: イラスト ---------- */
.sec-vuln-hero__right {
  flex:            1 1 0;
  min-width:       0;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
}

.sec-vuln-hero__illust,
#contents .sec-vuln-hero__illust,
.img100 .sec-vuln-hero__illust,
.inner .sec-vuln-hero__illust {
  width:     100%;
  max-width: 628px;
  height:    auto;
  display:   block;
}

/* ============================================================
   sec-vuln-breadcrumb — パンくず
   BlueMonkey CMS では自動出力されないため、LP内で実装する
   ============================================================ */
.sec-vuln-breadcrumb {
  background: var(--vuln-white);
  padding:    14px 0;
}

.sec-vuln-breadcrumb__inner {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 40px;
}

.sec-vuln-breadcrumb__list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  align-items: center;
  gap:        12px;
  font-size:  14px;
  color:      var(--vuln-text);
  font-weight: 400;
  flex-wrap:  wrap;
}

.sec-vuln-breadcrumb__list a,
.sec-vuln-breadcrumb__list a:link,
.sec-vuln-breadcrumb__list a:visited {
  color: var(--vuln-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sec-vuln-breadcrumb__list a:hover {
  color: var(--vuln-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sec-vuln-breadcrumb__sep {
  color:     rgba(0, 0, 0, 0.4);
  font-size: 12px;
}

.sec-vuln-breadcrumb__current {
  color:       var(--vuln-navy);
  font-weight: 700;
}

/* ============================================================
   ページ内アンカーナビ
   Figma node-id: 37:6269
   → 既存の `.vuln-subnav` (vulnerability-common.css) を流用するため
     ここでは独自スタイルなし。HTMLで vuln-subnav クラス構造を使う
   ============================================================ */

/* ============================================================
   sec-vuln-services — 脆弱性診断サービス一覧
   Figma node-id: 85:164
   ※ サービストップ (vulnerability.css L1385+) と完全同一スタイル。
     hover エフェクト含む全機能を流用。
   ============================================================ */
.sec-vuln-services *,
.sec-vuln-services *::before,
.sec-vuln-services *::after { box-sizing: border-box; }

.sec-vuln-services {
  background: var(--vuln-white);
  padding:    80px 0;
  overflow-x: hidden;
}

.sec-vuln-services__inner {
  max-width:       1200px;
  margin:          0 auto;
  padding:         0 40px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             60px;
}

.sec-vuln-services__head {
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            30px;
}

.sec-vuln-services__eyebrow {
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      20px;
  color:          var(--vuln-primary);
  letter-spacing: 1px;
  line-height:    1;
  margin:         0;
  text-transform: uppercase;
}

.sec-vuln-services__heading {
  font-weight: 700;
  font-size:   36px;
  color:       var(--vuln-text);
  line-height: 50px;
  margin:      0;
}

/* ---------- 4サービス グリッド ---------- */
.sec-vuln-services__grid-wrap { width: 100%; }

/* gap + background でボーダーを表現 → アイテムが動いても線は固定 */
.sec-vuln-services__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2px;
  background:            rgba(0, 0, 0, 0.10);
  width:                 100%;
}

.sec-vuln-services__item {
  display:         flex;
  align-items:     center;
  gap:             28px;
  padding:         36px 28px;
  background:      var(--vuln-white);
  text-decoration: none;
  color:           inherit;
  transition:      background .3s ease,
                   box-shadow .3s ease;
  position:        relative;
  z-index:         0;
}

a.sec-vuln-services__item,
a.sec-vuln-services__item:link,
a.sec-vuln-services__item:visited {
  color:           var(--vuln-navy);
  text-decoration: none;
}

/* hover: 背景＋ボーダー囲い */
.sec-vuln-services__item:hover { z-index: 1; }

.sec-vuln-services__item--webapp:hover {
  background: linear-gradient(0deg, var(--vuln-svc-webapp-bg) 0%, var(--vuln-svc-webapp-bg) 100%), #fff;
  box-shadow: inset 0 0 0 2px var(--vuln-svc-webapp);
}
.sec-vuln-services__item--network:hover {
  background: linear-gradient(0deg, var(--vuln-svc-network-bg) 0%, var(--vuln-svc-network-bg) 100%), #fff;
  box-shadow: inset 0 0 0 2px var(--vuln-svc-network);
}
.sec-vuln-services__item--cloud:hover {
  background: linear-gradient(0deg, var(--vuln-svc-cloud-bg) 0%, var(--vuln-svc-cloud-bg) 100%), #fff;
  box-shadow: inset 0 0 0 2px var(--vuln-svc-cloud);
}
.sec-vuln-services__item--smartphone:hover {
  background: linear-gradient(0deg, var(--vuln-svc-smartphone-bg) 0%, var(--vuln-svc-smartphone-bg) 100%), #fff;
  box-shadow: inset 0 0 0 2px var(--vuln-svc-smartphone);
}

/* hover: アイコンスケール */
.sec-vuln-services__item:hover .sec-vuln-services__icon {
  transform:  scale(1.08);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sec-vuln-services__icon { transition: transform .25s ease; }

.sec-vuln-services img.sec-vuln-services__icon,
#contents .sec-vuln-services img.sec-vuln-services__icon,
.img100 .sec-vuln-services img.sec-vuln-services__icon,
.inner .sec-vuln-services img.sec-vuln-services__icon {
  width:       110px;
  height:      110px;
  flex-shrink: 0;
}

.sec-vuln-services__details {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  flex:           1;
}

/* ---------- サービスバッジ（pill） ---------- */
.sec-vuln-services__badge {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  padding:     6px 24px;
  border:      1px solid var(--vuln-white);
  border-radius: 50px;
  width:       fit-content;
}

.sec-vuln-services__badge--webapp     { background: var(--vuln-svc-webapp);     }
.sec-vuln-services__badge--network    { background: var(--vuln-svc-network);    }
.sec-vuln-services__badge--cloud      { background: var(--vuln-svc-cloud);      }
.sec-vuln-services__badge--smartphone { background: var(--vuln-svc-smartphone); }

.sec-vuln-services img.sec-vuln-services__badge-icon,
#contents .sec-vuln-services img.sec-vuln-services__badge-icon,
.img100 .sec-vuln-services img.sec-vuln-services__badge-icon,
.inner .sec-vuln-services img.sec-vuln-services__badge-icon {
  width:  20px;
  height: 20px;
}

.sec-vuln-services__badge-text {
  font-size:      16px;
  font-weight:    700;
  color:          var(--vuln-white);
  letter-spacing: 1px;
  line-height:    1.8;
}

.sec-vuln-services__desc {
  font-size:   15px;
  font-weight: 400;
  color:       var(--vuln-navy);
  line-height: 1.7;
  margin:      0;
}

/* ---------- ペネトレCTA見出し ---------- */
.sec-vuln-services__pentest-hl {
  font-size:   24px;
  font-weight: 700;
  color:       var(--vuln-navy);
  text-align:  center;
  line-height: 1.5;
  margin:      0;
}

/* ---------- ペネトレカード ---------- */
.sec-vuln-services__pentest-card {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             24px;
  padding:         50px 28px 24px;
  width:           100%;
  max-width:       800px;
  border-radius:   var(--vuln-radius-card);
  border:          2px solid var(--vuln-svc-pentest);
  box-shadow:      0 5px 10px rgba(187, 187, 187, 0.5);
  background:      linear-gradient(0deg, var(--vuln-svc-pentest-bg) 0%, var(--vuln-svc-pentest-bg) 100%), #fff;
}

.sec-vuln-services__pentest-badge {
  position:        absolute;
  top:             -20px;
  left:            50%;
  transform:       translateX(-50%);
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  padding:         6px 30px;
  background:      var(--vuln-svc-pentest);
  border:          1px solid var(--vuln-white);
  border-radius:   50px;
  white-space:     nowrap;
}

.sec-vuln-services img.sec-vuln-services__pentest-badge-icon,
#contents .sec-vuln-services img.sec-vuln-services__pentest-badge-icon,
.img100 .sec-vuln-services img.sec-vuln-services__pentest-badge-icon,
.inner .sec-vuln-services img.sec-vuln-services__pentest-badge-icon {
  width:  20px;
  height: 20px;
}

.sec-vuln-services__pentest-badge-text {
  font-size:      18px;
  font-weight:    700;
  color:          var(--vuln-white);
  letter-spacing: 1px;
  line-height:    1.8;
}

.sec-vuln-services__pentest-body {
  display:     flex;
  align-items: center;
  gap:         20px;
  padding:     0 10px;
  width:       100%;
}

.sec-vuln-services img.sec-vuln-services__pentest-icon,
#contents .sec-vuln-services img.sec-vuln-services__pentest-icon,
.img100 .sec-vuln-services img.sec-vuln-services__pentest-icon,
.inner .sec-vuln-services img.sec-vuln-services__pentest-icon {
  width:       66px;
  height:      66px;
  flex-shrink: 0;
}

.sec-vuln-services__pentest-text {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         20px;
  flex:        1;
}

.sec-vuln-services__pentest-desc {
  font-size:   15px;
  font-weight: 400;
  color:       var(--vuln-navy);
  line-height: 1.6;
  flex:        1;
  min-width:   200px;
  margin:      0;
}

.sec-vuln-services__pentest-info {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         14px 20px;
  width:           100%;
  background:      var(--vuln-white);
  border-radius:   5px;
  text-decoration: none !important;
  color:           var(--vuln-navy);
  transition:      opacity .2s;
}
.sec-vuln-services__pentest-info:hover { opacity: .7; }

.sec-vuln-services__info-icon {
  font-size:   20px;
  flex-shrink: 0;
}

.sec-vuln-services__pentest-info-text {
  font-size:      15px;
  font-weight:    500;
  color:          var(--vuln-navy);
  letter-spacing: -0.2px;
  line-height:    1.5;
  flex:           1;
}

.sec-vuln-services__arrow-icon {
  font-size:   14px;
  flex-shrink: 0;
}

/* SP（〜767px） */
@media (max-width: 767px) {
  .sec-vuln-services { padding: 60px 0; }
  .sec-vuln-services__inner { padding: 0 16px; gap: 40px; }
  .sec-vuln-services__grid { grid-template-columns: 1fr; }
  .sec-vuln-services__item { gap: 16px; padding: 24px 5px; }
  .sec-vuln-services img.sec-vuln-services__icon,
  #contents .sec-vuln-services img.sec-vuln-services__icon,
  .img100 .sec-vuln-services img.sec-vuln-services__icon,
  .inner .sec-vuln-services img.sec-vuln-services__icon { width: 65px; height: 65px; }
  .sec-vuln-services__badge { padding: 6px 16px; align-self: flex-start; white-space: nowrap; }
  .sec-vuln-services__badge-text { font-size: 14px; }
  .sec-vuln-services__pentest-hl { font-size: 18px; }
  .sec-vuln-services__pentest-card { padding: 48px 16px 20px; }
  .sec-vuln-services__pentest-body { flex-direction: column; align-items: center; }
  .sec-vuln-services__pentest-text { flex-direction: column; align-items: stretch; gap: 16px; }
  .sec-vuln-services__pentest-text .vuln-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   sec-vuln-step — サービスご提供の流れ
   Figma node-id: 37:6121
   ============================================================ */

.sec-vuln-step *,
.sec-vuln-step *::before,
.sec-vuln-step *::after { box-sizing: border-box; }

.sec-vuln-step {
  padding:    120px 0;
  background: var(--vuln-white);
}

.sec-vuln-step__inner {
  max-width: 1440px;
  margin:    0 auto;
  padding:   0 120px;
  display:        flex;
  flex-direction: column;
  gap:            50px;
}

.sec-vuln-step__head {
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            30px;
}

.sec-vuln-step__eyebrow {
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      20px;
  color:          var(--vuln-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height:    1;
  margin:         0;
}

.sec-vuln-step__heading {
  font-weight: 700;
  font-size:   36px;
  color:       var(--vuln-text);
  line-height: 50px;
  margin:      0;
}

.sec-vuln-step__lead {
  font-size:   15px;
  line-height: 30px;
  color:       var(--vuln-text);
  margin:      0;
}

.sec-vuln-step__list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            50px;
}

.sec-vuln-step__item {
  position:      relative;
  background:    var(--vuln-white);
  border:        2px solid var(--vuln-primary);
  border-radius: 8px;
  display:       flex;
  align-items:   stretch;
}

/* ステップ間のダウンチェブロン（静的: 次のステップへ視線を誘導） */
.sec-vuln-step__item:not(:last-child)::after {
  content:     "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position:    absolute;
  bottom:      -38px;
  left:        49px;
  transform:   translateX(-50%);
  font-size:   22px;
  color:       var(--vuln-primary);
  line-height: 1;
}

.sec-vuln-step__badge {
  background:    var(--vuln-primary);
  color:         var(--vuln-white);
  width:         100px;
  min-height:    140px;
  flex-shrink:   0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:           20px;
  border-radius: 6px 0 0 6px;
}

.sec-vuln-step__no {
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      13px;
  letter-spacing: 1.5px;
  line-height:    11px;
  margin:         0;
}

.sec-vuln-step__icon {
  font-size: 28px;
  color:     var(--vuln-white);
}

.sec-vuln-step__body {
  flex:           1;
  min-width:      0;
  padding:        24px 35px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  justify-content: center;
}

.sec-vuln-step__title-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  border-bottom:   1px solid rgba(3, 38, 71, 0.1);
  padding-bottom:  15px;
}

.sec-vuln-step__title {
  font-weight: 700;
  font-size:   20px;
  color:       var(--vuln-navy);
  line-height: 26px;
  margin:      0;
}

.sec-vuln-step__duration {
  border:         1px solid var(--vuln-primary);
  background:     var(--vuln-white);
  color:          var(--vuln-primary);
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      14px;
  letter-spacing: 1px;
  padding:        3px 18px;
  border-radius:  50px;
  line-height:    20px;
  white-space:    nowrap;
}

.sec-vuln-step__duration--filled {
  background: var(--vuln-primary);
  color:      var(--vuln-white);
}

.sec-vuln-step__desc {
  font-size:   14px;
  color:       var(--vuln-text);
  line-height: 23.4px;
  margin:      0;
}

/* ============================================================
   sec-vuln-service — 診断内容（WEBアプリケーション診断 / ソースコード診断）
   Figma node-id: 37:5836
   ============================================================ */

.sec-vuln-service *,
.sec-vuln-service *::before,
.sec-vuln-service *::after { box-sizing: border-box; }

.sec-vuln-service {
  padding:    0;
  background: var(--vuln-white);
}

/* セクションヘッダー（タイトル + タブ）は白背景 */
.sec-vuln-service__head-zone {
  background: var(--vuln-white);
  padding:    120px 0 50px;
}

/* 詳細ブロック群は薄水色背景の帯 */
.sec-vuln-service__body-zone {
  background: var(--vuln-luv-gray);
  padding:    150px 0 150px;
}

.sec-vuln-service__inner {
  max-width: 1440px;
  margin:    0 auto;
  padding:   0 120px;
}

/* ---------- セクションタイトル ---------- */
.sec-vuln-service__head {
  text-align: center;
}

.sec-vuln-service__eyebrow {
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      20px;
  color:          var(--vuln-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height:    1;
  margin:         0 0 30px;
}

.sec-vuln-service__heading {
  font-weight:    700;
  font-size:      36px;
  color:          var(--vuln-text);
  line-height:    1.4;
  letter-spacing: 0.72px;
  margin:         0 0 30px;
}

.sec-vuln-service__lead {
  font-size:   15px;
  color:       var(--vuln-text);
  line-height: 30px;
  margin:      0 0 40px;
}

.sec-vuln-service__tabs {
  display:         flex;
  justify-content: center;
  gap:             40px;
}

.sec-vuln-service__tab,
.sec-vuln-service__tab:link,
.sec-vuln-service__tab:visited {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  width:           500px;
  max-width:       100%;
  padding:         18px 24px;
  background:      var(--vuln-navy);
  color:           var(--vuln-white);
  font-weight:     700;
  font-size:       18px;
  letter-spacing:  0.5px;
  border-radius:   4px;
  text-decoration: none;
  transition:      background 0.2s;
}

.sec-vuln-service__tab:hover {
  background: var(--vuln-navy-dark);
  color:      var(--vuln-white);
  text-decoration: none;
}

.sec-vuln-service__tab-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  flex-shrink:     0;
}

#service .sec-vuln-service__tab-icon img {
  width:       36px;
  height:      36px;
  max-width:   36px;
  max-height:  36px;
  object-fit:  contain;
  display:     block;
  margin:      0;
}

/* ---------- 詳細ブロック ---------- */
.sec-vuln-service__detail {
  background:    var(--vuln-white);
  border-radius: 16px;
  padding:       50px 60px;
  margin-top:    150px;
  position:      relative;
  box-shadow:    0 2px 12px rgba(3, 38, 71, 0.06);
}

.sec-vuln-service__detail:first-of-type {
  margin-top: 0;
}

/* タイトル + イラスト（左ボーダー付きテキスト、右イラスト 365×343 が上に -135px はみ出す） */
.sec-vuln-service__detail-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  margin-bottom:   30px;
  padding-top:     30px;     /* イラストのオーバーフロー分の余白確保 */
  min-height:      210px;    /* イラスト高さに合わせて確保 */
}

.sec-vuln-service__detail-head-text {
  flex:           1;
  min-width:      0;
  border-left:    5px solid var(--vuln-svc-webapp);
  padding:        20px 30px;
  display:        flex;
  flex-direction: column;
  gap:            20px;
  align-items:    flex-start;
  max-width:      655px;
}

.sec-vuln-service__detail-title {
  font-weight: 700;
  font-size:   24px;
  color:       var(--vuln-navy);
  line-height: 33.6px;
  margin:      0;
}

.sec-vuln-service__detail-desc {
  font-size:   14px;
  color:       var(--vuln-text);
  line-height: 24.3px;
  margin:      0;
}

.sec-vuln-service__detail-photo {
  flex-shrink: 0;
  width:       432px;
  position:    relative;
  align-self:  stretch;
}

#service .sec-vuln-service__detail-photo-img {
  position:    absolute;
  top:         -135px;
  left:        50%;
  transform:   translateX(-50%);
  width:       365px;
  height:      343px;
  max-width:   365px;
  max-height:  343px;
  object-fit:  contain;
  display:     block;
  pointer-events: none;
  margin:      0;
}

/* ---------- 診断方式（リモート / オンサイト） ---------- */
.sec-vuln-service__method-heading {
  font-weight: 700;
  font-size:   20px;
  color:       var(--vuln-text);
  text-align:  center;
  margin:      40px 0 20px;
}

.sec-vuln-service__methods {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   40px;
}

.sec-vuln-service__method {
  background:    var(--vuln-white);
  border-radius: 8px;
  overflow:      hidden;
}

/* リモート: 赤トーンの 1px ボーダー */
.sec-vuln-service__method--remote {
  border: 1px solid var(--vuln-primary);
}

/* オンサイト: ネイビートーンの 1px ボーダー */
.sec-vuln-service__method--onsite {
  border: 1px solid var(--vuln-navy);
}

.sec-vuln-service__method-banner {
  background:    var(--vuln-primary);
  color:         var(--vuln-white);
  text-align:    center;
  padding:       14px 16px;
  font-weight:   700;
  font-size:     18px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           10px;
}

.sec-vuln-service__method--onsite .sec-vuln-service__method-banner {
  background: var(--vuln-navy);
}

/* ---------- フロー図（リモート/オンサイト診断 + ソースコード診断） ---------- */
.sec-vuln-service__flow {
  display:        flex;
  align-items:    flex-start;        /* アイコン行を上揃え（label の位置も揃う） */
  justify-content: center;
  gap:            6px;
  flex-wrap:      wrap;
  padding:        16px 0 8px;
}

.sec-vuln-service__flow-node {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
  min-width:       66px;
  text-align:      center;
}

.sec-vuln-service__flow-node-icon {
  width:           72px;
  height:          72px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(173, 3, 32, 0.06);  /* 薄ピンク背景（リモート診断・ソース診断の担当者以外） */
  border-radius:   50%;                      /* 円形 */
}

/* オンサイト診断ノードはネイビー薄グレー背景（__recommend と統一）*/
.sec-vuln-service__method--onsite .sec-vuln-service__flow-node-icon {
  background: rgba(3, 38, 71, 0.05);
}

#service .sec-vuln-service__flow-node-icon img {
  width:       42px;     /* SVG は viewBox 45×45 / アイコン径 ≒ 42px で円内に収まる */
  height:      42px;
  max-width:   42px;
  max-height:  42px;
  object-fit:  contain;
  display:     block;
  flex-shrink: 0;
  margin:      0;
}

/* 担当者ノード: 外枠は 72×72 のままで他と揃え、背景なしで人物アイコンを中央配置 */
.sec-vuln-service__flow-node--person .sec-vuln-service__flow-node-icon {
  width:       72px;
  height:      72px;
  background:  transparent;
  border-radius: 0;
}

#service .sec-vuln-service__flow-node--person .sec-vuln-service__flow-node-icon img {
  width:       60px;     /* 中身のアイコンは小さめにして人物感を残す */
  height:      60px;
  max-width:   60px;
  max-height:  60px;
}

.sec-vuln-service__flow-node-label {
  font-size:   11px;
  color:       var(--vuln-text);
  line-height: 1.4;
  margin:      0;
}

/* 担当者ノード直下のブランドロゴ（2行 type-B logomark） */
#service .sec-vuln-service__flow-node-brand {
  display:    block;
  width:      auto;
  max-width:  100px;    /* アイコン枠より少し広めにしてロゴを視認可能に */
  height:     auto;
  max-height: 32px;     /* 2行ロゴ用に縦余裕を確保 */
  object-fit: contain;
  margin:     4px auto 0;
  flex-shrink: 0;
}

.sec-vuln-service__flow-arrow {
  color:       var(--vuln-primary);
  font-size:   14px;
  flex-shrink: 0;
  align-self:  center;
  margin-top:  0;
}

/* ---------- ソースコード診断: 2カラムレイアウト ---------- */
.sec-vuln-service__source-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   30px;
  align-items:           center;
  margin-bottom:         40px;
}

.sec-vuln-service__flow--source {
  background:    var(--vuln-white);
  border-radius: 8px;
  padding:       24px;
}

/* ---------- 選び方のポイント アイコン ---------- */
.sec-vuln-service__guide-step-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  margin-right:    0;
  vertical-align:  middle;
  flex-shrink:     0;
}

#service .sec-vuln-service__guide-step-icon img {
  width:       44px;
  height:      44px;
  max-width:   44px;
  max-height:  44px;
  object-fit:  contain;
  display:     block;
  flex-shrink: 0;
  margin:      0;
}

/* SVG マスク版（--icon-url 指定時）: SVG を任意の color で塗る */
.sec-vuln-service__guide-step-icon[style*="--icon-url"] {
  background-color:      var(--vuln-primary);   /* デフォルト赤（step 1） */
  -webkit-mask-image:    var(--icon-url);
  mask-image:            var(--icon-url);
  -webkit-mask-size:     contain;
  mask-size:             contain;
  -webkit-mask-repeat:   no-repeat;
  mask-repeat:           no-repeat;
  -webkit-mask-position: center;
  mask-position:         center;
}

/* step 2 はネイビー（label と統一） */
.sec-vuln-service__guide-step:nth-of-type(2) .sec-vuln-service__guide-step-icon[style*="--icon-url"] {
  background-color: var(--vuln-navy);
}

/* step 3 は黒（label と統一） — 将来 SVG を入れる時に有効化 */
.sec-vuln-service__guide-step:nth-of-type(3) .sec-vuln-service__guide-step-icon[style*="--icon-url"] {
  background-color: var(--vuln-text);
}

/* ---------- 診断項目タブアイコン ---------- */
/* アイコンを mask として使い background-color で var(--vuln-navy) / var(--vuln-primary) を切替
   → 元色に依存せず正確なブランドカラーで描画 */
.sec-vuln-service__category-tab-icon {
  display:         inline-block;
  width:           35px;
  height:          35px;
  background-color: var(--vuln-navy);
  -webkit-mask-image: var(--icon-url);
  mask-image:       var(--icon-url);
  -webkit-mask-size: contain;
  mask-size:        contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat:      no-repeat;
  -webkit-mask-position: center;
  mask-position:    center;
  flex-shrink:      0;
  transition:       background-color 0.2s ease;
}

/* 子img は非表示（mask 経由でレンダリング） */
.sec-vuln-service__category-tab-icon img {
  display: none;
}

/* アクティブタブ: var(--vuln-primary) */
.sec-vuln-service__category-tab--active .sec-vuln-service__category-tab-icon,
.sec-vuln-service__category-tab:hover .sec-vuln-service__category-tab-icon {
  background-color: var(--vuln-primary);
}

.sec-vuln-service__category-tab {
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         18px 12px;
  min-height:      90px;
}

.sec-vuln-service__method-body {
  padding: 24px;
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.sec-vuln-service__method-headline {
  font-weight: 700;
  font-size:   16px;
  color:       var(--vuln-primary);  /* リモートはデフォルトで primary */
  text-align:  center;
  margin:      0;
}

/* オンサイト: ネイビー */
.sec-vuln-service__method--onsite .sec-vuln-service__method-headline {
  color: var(--vuln-navy);
}

.sec-vuln-service__method-desc {
  font-size:   14px;
  color:       var(--vuln-text);
  line-height: 1.7;
  text-align:  center;
  margin:      0;
}

.sec-vuln-service__recommend {
  background:    rgba(173, 3, 32, 0.05);
  border:        none;
  border-radius: 6px;
  padding:       16px 20px;
  margin-top:    8px;
}

/* オンサイト: ネイビートーンの背景 */
.sec-vuln-service__method--onsite .sec-vuln-service__recommend {
  background: rgba(3, 38, 71, 0.05);
}

.sec-vuln-service__recommend-title {
  font-weight: 700;
  font-size:   15px;
  color:       var(--vuln-primary);
  text-align:  center;
  margin:      0 0 8px;
}

/* オンサイト: ネイビートーンのタイトル */
.sec-vuln-service__method--onsite .sec-vuln-service__recommend-title {
  color: var(--vuln-navy);
}

.sec-vuln-service__recommend-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        6px;
}

.sec-vuln-service__recommend-list li {
  position:    relative;
  padding-left: 22px;
  font-size:   13px;
  line-height: 1.6;
  color:       var(--vuln-text);
}

/* サークルチェックアイコン（fa-circle-check） */
.sec-vuln-service__recommend-list li::before {
  content:     "\f058";       /* fa-circle-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position:    absolute;
  left:        0;
  top:         2px;
  font-size:   14px;
  color:       var(--vuln-primary);
  line-height: 1.4;
}

/* オンサイト: ネイビートーンのチェック */
.sec-vuln-service__method--onsite .sec-vuln-service__recommend-list li::before {
  color: var(--vuln-navy);
}

/* ---------- 選び方のポイント ----------
   Figma: 73:11554 — 白カード + 1px solid rgba(3,38,71,0.08) + 角丸8px
   左ブロック: bg light-navy-bg(rgba(3,38,71,0.03)) + padding 30px
   右ブロック: 3ステップを grid で chevron 区切り
*/
.sec-vuln-service__guide {
  background:    var(--vuln-white);
  border:        1px solid rgba(3, 38, 71, 0.08);
  border-radius: 8px;
  padding:       0;
  margin-top:    24px;
  display:       flex;
  align-items:   stretch;
  flex-wrap:     wrap;
  gap:           20px;
  overflow:      hidden;
}

/* タイトル部: ライトネイビーグレーの背景パネル */
.sec-vuln-service__guide-title {
  font-weight:   700;
  font-size:     16px;
  line-height:   calc(28.8 / 16);
  color:         var(--vuln-navy);
  background:    rgba(3, 38, 71, 0.03);
  padding:       30px;
  border-right:  none;
  margin:        0;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  white-space:   nowrap;
}

.sec-vuln-service__guide-steps {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             18px;
  flex-wrap:       wrap;
  flex:            1;
  padding:         16px 24px 16px 0;
}

.sec-vuln-service__guide-step {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   13px;
  color:       var(--vuln-text);
  line-height: 1.5;
  flex:        1 1 0;
  min-width:   0;
}

.sec-vuln-service__guide-step-text {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex:           1 1 auto;
  min-width:      0;
}

.sec-vuln-service__guide-step-label {
  font-weight: 700;
  font-size:   14px;
  color:       var(--vuln-primary);
  display:     block;
  line-height: calc(18 / 14);
  white-space: nowrap;
}

/* Figma配色: step1=primary(赤), step2=navy, step3=black */
.sec-vuln-service__guide-step:nth-of-type(2) .sec-vuln-service__guide-step-label {
  color: var(--vuln-navy);
}
.sec-vuln-service__guide-step:nth-of-type(3) .sec-vuln-service__guide-step-label {
  color: var(--vuln-text);
}

.sec-vuln-service__guide-step-desc {
  font-weight: 500;
  font-size:   13px;
  color:       var(--vuln-text);
  line-height: calc(18 / 13);
}

.sec-vuln-service__guide-sep {
  color:     rgba(3, 38, 71, 0.4);
  font-size: 14px;
  flex-shrink: 0;
}

/* ---------- 診断項目 ---------- */
/* Figma: 73:12220 DIAGNOSIS ITEMS — 白カード、角丸8px、内部の heading 行が light-navy-bg
   子要素間に gap 20px（Figmaの gap-[20px] 準拠） */
.sec-vuln-service__items {
  margin-top:     40px;
  background:     var(--vuln-white);
  border-radius:  8px;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

/* heading 行（73:12221）: bg rgba(3, 38, 71, 0.03), padding 20px 50px, gap 50px, align center */
.sec-vuln-service__items-head {
  display:       flex;
  align-items:   center;
  gap:           50px;
  padding:       20px 50px;
  background:    rgba(3, 38, 71, 0.03);
  margin-bottom: 0;
}

.sec-vuln-service__items-label {
  font-weight: 700;
  font-size:   24px;
  color:       var(--vuln-navy);
  line-height: calc(30.4 / 24);
  margin:      0;
  flex-shrink: 0;
}

/* desc 群（メイン + サブ）を縦積み */
.sec-vuln-service__items-desc-group {
  display:        flex;
  flex-direction: column;
  gap:            0;
  min-width:      0;
}

.sec-vuln-service__items-desc {
  font-weight: 500;
  font-size:   14px;
  color:       var(--vuln-text);
  line-height: calc(22 / 14);
  margin:      0;
}

/* desc 配下のサブテキスト「各項目をクリックし、詳細をご確認いただけます。」 */
.sec-vuln-service__items-desc-sub {
  font-weight: 400;
  font-size:   13.5px;
  color:       var(--vuln-text);
  line-height: calc(22 / 13.5);
  margin:      0;
}

.sec-vuln-service__category-tabs {
  display:       flex;
  flex-wrap:     wrap;
  background:    var(--vuln-white);
  border:        none;
  border-bottom: 3px solid rgba(3, 38, 71, 0.1);
  border-radius: 0;
}

.sec-vuln-service__category-tab {
  flex:           1 0 calc(100% / 7);
  min-width:      120px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  padding:        16px 12px;
  text-align:     center;
  font-weight:    500;
  font-size:      14px;
  color:          var(--vuln-navy);
  background:     transparent;
  border:         none;
  border-bottom:  3px solid transparent;
  cursor:         pointer;
  transition:     all 0.2s;
  white-space:    nowrap;
}

.sec-vuln-service__category-tab:hover { color: var(--vuln-primary); }

.sec-vuln-service__category-tab--active {
  color:         var(--vuln-primary);
  font-weight:   700;
  border-bottom-color: var(--vuln-primary);
}

/* タブパネル: アクティブ以外は非表示 */
.sec-vuln-service__category-content {
  display:       none;
  background:    var(--vuln-white);
  border-radius: 8px;
  padding:       24px;
}

.sec-vuln-service__category-content--active { display: block; }

.sec-vuln-service__category-title {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-weight: 700;
  font-size:   14px;
  color:       var(--vuln-text);
  margin:      0 0 16px;
}

.sec-vuln-service__category-title i,
.sec-vuln-service__category-title span.fa-solid {
  color: var(--vuln-primary);
}

.sec-vuln-service__item-tags {
  list-style: none;
  margin:     0 0 24px;
  padding:    0;
  display:    flex;
  flex-wrap:  wrap;
  gap:        10px;
}

.sec-vuln-service__item-tag {
  background:    var(--vuln-luv-gray);
  border-radius: 50px;
  padding:       10px 20px;
  font-size:     13px;
  color:         var(--vuln-text);
  line-height:   1.4;
}

.sec-vuln-service__risk-text {
  font-size:   13px;
  color:       var(--vuln-text);
  line-height: 1.7;
  margin:      0;
}

/* ============================================================
   sec-vuln-cta（base + SP + tablet + --large）
   → vulnerability-common.css に移植済み（Single Source of Truth）
   両ページで共通利用するため本ファイルでは定義しない。
   ============================================================ */

/* WEBアプリケーション診断ページ固有: 上部の三角を上セクション(luv-gray)に馴染ませる
   ※サービストップは白背景セクションが上にあるため共通CSSの白のままでOK */
#cta-upper.sec-vuln-cta::before {
  border-top-color: var(--vuln-luv-gray);
}

/* ============================================================
   sec-vuln-features — WEBアプリケーション診断の特長
   Figma node-id: 37:5755
   ============================================================ */

.sec-vuln-features *,
.sec-vuln-features *::before,
.sec-vuln-features *::after {
  box-sizing: border-box;
}

.sec-vuln-features {
  position:   relative !important;   /* decor の position:absolute の基準点を確実に */
  padding:    80px 0;
  background: radial-gradient(ellipse at 47% 24%, var(--vuln-white) 0%, #EEF0F8 80%);
  overflow:   hidden;
}

/* 装飾の左側イラスト
   ※ 親 .sec-vuln-features の position:relative が CMS 側で上書きされても
     decor wrapper が body 直下にはみ出ないよう、!important + width 100% で固定 */
.sec-vuln-features__decor {
  position:       absolute !important;
  inset:          0 !important;
  top:            0 !important;
  left:           0 !important;
  right:          0 !important;
  bottom:         0 !important;
  width:          100% !important;
  height:         100% !important;
  pointer-events: none;
  opacity:        0.8;
  overflow:       hidden;
}

/* BlueMonkey の body img / #contents img / .img100 img / .inner img / .media-content img
   系 (specificity ≦ 1,1,1) を確実に上書きするため、ID＋クラスのセレクタを列挙し
   さらに !important を併用する。BlueMonkey 上で sizing が暴れる典型ケース対策。 */
#features .sec-vuln-features__decor-illust,
#contents #features .sec-vuln-features__decor-illust,
#contents .sec-vuln-features__decor-illust,
.img100 .sec-vuln-features__decor-illust,
.inner  .sec-vuln-features__decor-illust,
.media-content .sec-vuln-features__decor-illust,
.sec-vuln-features__decor-illust {
  position:   absolute !important;
  left:       3.5%  !important;
  top:        4.37% !important;
  width:      51.24% !important;
  height:     auto  !important;
  max-width:  none  !important;
  max-height: none  !important;
  display:    block !important;
  margin:     0     !important;
}

.sec-vuln-features__inner {
  position:       relative;
  z-index:        1;
  max-width:      1440px;
  margin:         0 auto;
  padding:        0 120px;
  display:        flex;
  flex-direction: column;
  gap:            40px;
}

/* ---------- 見出しエリア（右側に寄せる） ---------- */
.sec-vuln-features__head {
  display:         flex;
  justify-content: flex-end;
  padding:         50px 0;
  width:           100%;
}

.sec-vuln-features__head-content {
  width:          650px;
  max-width:      100%;
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.sec-vuln-features__title-block {
  display:        flex;
  flex-direction: column;
  gap:            30px;
}

.sec-vuln-features__eyebrow {
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      20px;
  color:          var(--vuln-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height:    1;
  margin:         0;
}

.sec-vuln-features__heading {
  font-weight:    700;
  font-size:      36px;
  line-height:    calc(52.2 / 36);
  letter-spacing: 0.72px;
  color:          var(--vuln-text);
  margin:         0;
}

.sec-vuln-features__heading-prefix {
  display: block;
  color:   var(--vuln-primary);
}

.sec-vuln-features__lead {
  font-size:   15px;
  line-height: 30px;
  color:       var(--vuln-text);
  margin:      0;
}

.sec-vuln-features__head-btns {
  display:    flex;
  gap:        16px;
  padding-top: 10px;
  flex-wrap:  wrap;
}

/* ネイビーアウトラインボタン（特長セクション専用） */
.sec-vuln-features__btn,
#contents .sec-vuln-features__btn,
.sec-vuln-features__btn:link,
.sec-vuln-features__btn:visited {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  width:           270px;
  min-width:       270px;
  height:          58.8px;
  padding:         0 24px;
  background:      var(--vuln-white);
  border:          1px solid var(--vuln-navy);
  border-radius:   2px;
  color:           var(--vuln-navy);
  font-size:       14px;
  font-weight:     700;
  letter-spacing:  0.7px;
  line-height:     25.2px;
  text-decoration: none;
  transition:      background 0.2s;
}

.sec-vuln-features__btn:hover {
  background: var(--vuln-luv-gray);
  color:      var(--vuln-navy);
  text-decoration: none;
}

.sec-vuln-features__btn-arrow {
  font-size:   16px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- 3 POINTカード ---------- */
.sec-vuln-features__cards {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   30px;
  padding-top:           30px;
}

.sec-vuln-features__card {
  position:       relative;
  background:     var(--vuln-white);
  border:         1px solid rgba(3, 38, 71, 0.08);
  border-radius:  8px;
  padding:        41px 33px 33px;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            14.9px;
}

.sec-vuln-features__card-badge {
  position:       absolute;
  top:            19px;
  right:          24px;
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      14px;
  color:          var(--vuln-primary);
  letter-spacing: 1.5px;
  line-height:    21.6px;
  white-space:    nowrap;
}

.sec-vuln-features__card-icon-wrap {
  width:           76px;
  height:          76px;
  border-radius:   38px;
  background:      rgba(3, 38, 71, 0.06);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

#features .sec-vuln-features__card-icon {
  width:       30px;
  height:      30px;
  max-width:   30px;
  max-height:  30px;
  object-fit:  contain;
  display:     block;
  flex-shrink: 0;
  margin:      0;
}

.sec-vuln-features__card-title {
  font-weight: 700;
  font-size:   18px;
  color:       var(--vuln-primary);
  line-height: 27.9px;
  margin:      0;
}

.sec-vuln-features__card-desc {
  font-size:   13.5px;
  color:       var(--vuln-text);
  line-height: 25.65px;
  margin:      0;
}

/* ---------- IPA 認証バナー ---------- */
.sec-vuln-features__cert {
  background:    var(--vuln-white);
  border:        1px solid rgba(3, 38, 71, 0.1);
  border-radius: 8px;
  padding:       30px;
  display:       grid;
  grid-template-columns: 100px 1fr auto;
  gap:           20px;
  align-items:   center;
}

.sec-vuln-features__cert-logo-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  width:          100px;
}

#features .sec-vuln-features__cert-logo {
  width:       77px;
  height:      50px;
  max-width:   77px;
  max-height:  50px;
  object-fit:  contain;
  display:     block;
  flex-shrink: 0;
  margin:      0;
}

.sec-vuln-features__cert-no {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size:   14px;
  color:       var(--vuln-text);
  line-height: 21.6px;
  white-space: nowrap;
  margin:      0;
}

.sec-vuln-features__cert-info {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.sec-vuln-features__cert-title {
  font-weight: 700;
  font-size:   16px;
  color:       var(--vuln-navy);
  line-height: 25.2px;
  margin:      0;
}

.sec-vuln-features__cert-desc {
  font-size:   13px;
  color:       var(--vuln-text);
  line-height: 21.25px;
  margin:      0;
}

.sec-vuln-features__cert-link,
.sec-vuln-features__cert-link:link,
.sec-vuln-features__cert-link:visited {
  display:         inline-flex;
  align-items:     center;
  gap:             15px;
  padding:         15px 20px;
  background:      var(--vuln-white);
  border:          1px solid var(--vuln-navy);
  border-radius:   2px;
  color:           var(--vuln-navy);
  font-size:       14px;
  font-weight:     700;
  letter-spacing:  0.7px;
  line-height:     25.2px;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background 0.2s;
}

.sec-vuln-features__cert-link:hover {
  background: var(--vuln-luv-gray);
  color:      var(--vuln-navy);
  text-decoration: none;
}

/* ============================================================
   sec-vuln-risks — WEBアプリケーション診断で可視化できる代表的なリスク
   Figma node-id: 37:5525
   ============================================================ */

.sec-vuln-risks *,
.sec-vuln-risks *::before,
.sec-vuln-risks *::after {
  box-sizing: border-box;
}

.sec-vuln-risks {
  padding:    120px 0;
  background: var(--vuln-white);
  overflow-x: hidden;
}

.sec-vuln-risks__inner {
  max-width: 1440px;
  margin:    0 auto;
  padding:   0 120px;
  display:        flex;
  flex-direction: column;
  gap:            60px;
}

/* ---------- 上部: 見出し + リード + 右イラスト ---------- */
.sec-vuln-risks__head {
  display:     flex;
  align-items: center;
  gap:         40px;
}

.sec-vuln-risks__head-text {
  flex:           1;
  min-width:      0;
  max-width:      633px;
  display:        flex;
  flex-direction: column;
  gap:            20px;
  align-items:    flex-start;
}

.sec-vuln-risks__title-block {
  display:        flex;
  flex-direction: column;
  gap:            30px;
  align-items:    flex-start;
}

.sec-vuln-risks__eyebrow {
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      20px;
  color:          var(--vuln-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height:    1;
  margin:         0;
}

.sec-vuln-risks__heading {
  font-weight:     700;
  font-size:       36px;
  color:           var(--vuln-text);
  letter-spacing:  0.72px;
  line-height:     calc(52.2 / 36);
  margin:          0;
  text-align:      left;
}

.sec-vuln-risks__heading-accent {
  color: var(--vuln-primary);
}

.sec-vuln-risks__lead {
  font-weight: 400;
  font-size:   15px;
  color:       var(--vuln-text);
  line-height: 30px;
  margin:      0;
}

.sec-vuln-risks__head-visual {
  flex-shrink: 0;
  width:       600px;
  height:      400px;
  overflow:    hidden;
  position:    relative;
}

.sec-vuln-risks__illust,
#contents .sec-vuln-risks__illust,
.img100 .sec-vuln-risks__illust,
.inner .sec-vuln-risks__illust {
  width:      100%;
  height:     100%;
  object-fit: contain;     /* 画像全体を表示（API部分含めて見切れなし）*/
  display:    block;
}

/* ---------- 下部: 6つのリスクカード 3×2 グリッド ---------- */
.sec-vuln-risks__list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:        30px;
}

.sec-vuln-risks__card {
  background:     var(--vuln-white);
  border:         1px solid var(--vuln-primary);
  border-radius:  8px;
  padding:        40px 33px 33px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
}

/* BlueMonkey 外部CSS が `body img` 等の (0,1,1) 以上で img に max-width:100%
   を仕込んでいるため、`.class` (0,1,0) だと負ける。`#risks .class` (1,1,0) で
   ID specificity を確保して勝つ。 */
#risks .sec-vuln-risks__card-icon {
  width:       70px;
  height:      60px;
  max-width:   70px;
  max-height:  60px;
  object-fit:  contain;
  display:     block;
  flex-shrink: 0;
  margin:      0;
}

.sec-vuln-risks__card-eyebrow {
  width:           100%;
  font-family:     Arial, sans-serif;
  font-weight:     700;
  font-size:       11px;
  color:           var(--vuln-primary);
  letter-spacing:  1.5px;
  text-transform:  uppercase;
  line-height:     19.8px;
  margin:          0;
  text-align:      left;
}

.sec-vuln-risks__card-title {
  width:        100%;
  min-height:   58px;
  font-weight:  700;
  font-size:    18px;
  color:        var(--vuln-navy);
  line-height:  27.9px;
  margin:       0;
  text-align:   left;
}

.sec-vuln-risks__card-desc {
  width:       100%;
  font-weight: 400;
  font-size:   14px;
  color:       var(--vuln-text);
  line-height: 1.6;
  margin:      0;
  text-align:  left;
}

.sec-vuln-risks__card-accent {
  color: var(--vuln-primary);
}

/* Risks の見出し横並びは 1440px デザイン幅で成立する想定。
   1280px 以下のビューポートでは左右の余地不足で見出しが過剰に折り返すため、
   早めに縦積みレイアウトに切り替える（Hero 等はこの幅でも横並びを維持）。 */
@media (max-width: 1280px) {
  .sec-vuln-risks__head {
    flex-direction: column;
    gap:            32px;
  }
  .sec-vuln-risks__head-text {
    max-width: 100%;
  }
  .sec-vuln-risks__head-visual {
    width:        100%;
    max-width:    600px;
    height:       auto;
    aspect-ratio: 600 / 400;
    align-self:   center;
  }
}

/* ============================================================
   sec-vuln-report — 診断結果の報告について
   Figma node-id: 37:6055
   ============================================================ */

.sec-vuln-report *,
.sec-vuln-report *::before,
.sec-vuln-report *::after {
  box-sizing: border-box;
}

.sec-vuln-report {
  padding:           120px 0;
  background-color:  var(--vuln-white);
  background-image:  linear-gradient(rgba(3, 38, 71, 0.04), rgba(3, 38, 71, 0.04));
  overflow-x:        hidden;
}

.sec-vuln-report__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            50px;
  max-width:      1280px;
  padding:        0 120px;
  margin:         0 auto;
  width:          100%;
}

/* ---------- ヘッダー（共通 .vuln-sec-header を流用） ---------- */
/* "報告" を赤に */
.sec-vuln-report__heading-accent {
  color: var(--vuln-primary);
}

.sec-vuln-report__lead {
  font-size:   15px;
  font-weight: 400;
  color:       var(--vuln-text);
  line-height: calc(30 / 15);    /* 30px / 15px */
  text-align:  center;
  margin:      0;
}

/* ---------- メイン: イラスト + POINTカード ---------- */
.sec-vuln-report__main {
  display:     flex;
  align-items: center;
  gap:         40px;
  padding-top: 18px;             /* バッジが上にはみ出る分の余白 */
  width:       100%;
}

.sec-vuln-report__visual {
  flex:        1;
  min-width:   0;
  aspect-ratio: 601 / 548;
  position:    relative;
}

.sec-vuln-report__illust,
#contents .sec-vuln-report__illust,
.img100 .sec-vuln-report__illust,
.inner .sec-vuln-report__illust {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  object-fit: cover;
  display:  block;
}

.sec-vuln-report__points {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            40px;
  flex:           1;
  min-width:      0;
}

.sec-vuln-report__point {
  position:      relative;
  background:    var(--vuln-white);
  border:        1px solid rgba(3, 38, 71, 0.08);
  border-radius: 8px;
  padding:       41px 25px 30px;
  display:       flex;
  align-items:   center;
  gap:           25px;
}

/* POINT 0X バッジ（カード上部に突き出る赤いpill） */
.sec-vuln-report__point-label {
  position:        absolute;
  top:             -17px;
  left:            29px;
  background:      var(--vuln-primary);
  color:           var(--vuln-white);
  font-family:     Arial, sans-serif;
  font-weight:     700;
  font-size:       18px;
  letter-spacing:  1px;
  padding:         8px 18px;
  border-radius:   50px;
  line-height:     20px;
  white-space:     nowrap;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
}

/* アイコン円（120px列の中に76px丸） */
.sec-vuln-report__point-icon-wrap {
  flex-shrink:     0;
  width:           120px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.sec-vuln-report__point-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           76px;
  height:          76px;
  border-radius:   38px;
  background:      rgba(3, 38, 71, 0.06);
}

.sec-vuln-report__point-icon img,
#contents .sec-vuln-report__point-icon img,
.img100 .sec-vuln-report__point-icon img,
.inner .sec-vuln-report__point-icon img {
  width:   30px;
  height:  30px;
  display: block;
  margin:  0;
}

/* カード右側コンテンツ */
.sec-vuln-report__point-content {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            15px;
}

.sec-vuln-report__point-title {
  font-size:   18px;
  font-weight: 700;
  color:       var(--vuln-primary);     /* タイトルは赤 */
  line-height: 27.9px;
  margin:      0;
}

.sec-vuln-report__point-desc {
  font-size:   16px;
  font-weight: 400;
  color:       var(--vuln-text);
  line-height: 28px;
  margin:      0;
}

/* ============================================================
   オンライン報告会カード
   ============================================================ */

.sec-vuln-report__online {
  display:       flex;
  align-items:   center;
  width:         100%;
  border:        2px solid var(--vuln-primary);
  border-radius: 8px;
  background:    var(--vuln-white);
  overflow:      hidden;       /* 写真の左角丸を section 角丸に合わせる */
}

.sec-vuln-report__online-photo-wrap {
  position:      relative;
  flex-shrink:   0;
  width:         300px;
  height:        200px;
}

.sec-vuln-report__online-photo,
#contents .sec-vuln-report__online-photo,
.img100 .sec-vuln-report__online-photo,
.inner .sec-vuln-report__online-photo {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* 写真上のダークオーバーレイ（ネイビー20%） */
.sec-vuln-report__online-photo-wrap::after {
  content:         '';
  position:        absolute;
  inset:           0;
  background:      rgba(3, 38, 71, 0.2);
  pointer-events:  none;
}

.sec-vuln-report__online-content {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            10px;
  padding:        20px 35px;
}

/* タイトル + オプションバッジの行（下に区切り線） */
.sec-vuln-report__online-heading-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  padding-bottom:  15px;
  border-bottom:   1px solid rgba(3, 38, 71, 0.1);
}

.sec-vuln-report__online-title {
  font-size:   20px;
  font-weight: 700;
  color:       var(--vuln-primary);   /* タイトルも赤 */
  line-height: 26px;
  margin:      0;
}

/* 「オプション」バッジ */
.sec-vuln-report__online-badge {
  background:      var(--vuln-primary);
  color:           var(--vuln-white);
  font-family:     Arial, sans-serif;
  font-weight:     700;
  font-size:       14px;
  letter-spacing:  1px;
  padding:         3px 18px;
  border-radius:   50px;
  line-height:     20px;
  white-space:     nowrap;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
}

.sec-vuln-report__online-meta-title {
  font-size:   16px;
  font-weight: 700;
  color:       var(--vuln-text);
  line-height: 26px;
  margin:      0;
}

.sec-vuln-report__online-meta-desc {
  font-size:   14px;
  font-weight: 400;
  color:       var(--vuln-text);
  line-height: 23.4px;
  margin:      0;
}

/* ============================================================
   タブレット中間補正（768px〜1100px）
   ============================================================ */
@media (min-width: 768px) and (max-width: 1100px) {
  /* vuln-services（タブレット: サービストップと完全統一 = 1列） */
  .sec-vuln-services             { padding: 64px 0; }
  .sec-vuln-services__inner      { padding: 0 40px; gap: 48px; }
  .sec-vuln-services__heading    { font-size: 28px; line-height: 1.45; }
  .sec-vuln-services__grid       { grid-template-columns: 1fr; }
  .sec-vuln-services__item       { gap: 20px; padding: 28px 20px; }
  .sec-vuln-services img.sec-vuln-services__icon,
  #contents .sec-vuln-services img.sec-vuln-services__icon,
  .img100 .sec-vuln-services img.sec-vuln-services__icon,
  .inner .sec-vuln-services img.sec-vuln-services__icon { width: 88px; height: 88px; }
  .sec-vuln-services__badge      { align-self: flex-start; white-space: nowrap; }
  /* ペネトレ — サービストップ (vulnerability.css L2361) と完全同一: hl の font-size のみ調整 */
  .sec-vuln-services__pentest-hl { font-size: 20px; }

  /* STEP（タブレット） */
  .sec-vuln-step              { padding: 80px 0; }
  .sec-vuln-step__inner       { padding: 0 40px; gap: 32px; }
  .sec-vuln-step__heading     { font-size: 28px; line-height: 1.45; }
  .sec-vuln-step__list        { gap: 40px; }
  .sec-vuln-step__item:not(:last-child)::after { bottom: -32px; left: 49px; font-size: 20px; }
  .sec-vuln-step__body        { padding: 20px 28px; }
  .sec-vuln-step__title       { font-size: 18px; line-height: 1.45; }
  .sec-vuln-step__title-row   { flex-direction: row; align-items: center; gap: 12px; }
  .sec-vuln-step__desc        { font-size: 14px; line-height: 1.75; }

  /* Service（タブレット） */
  .sec-vuln-service              { padding: 0; }
  .sec-vuln-service__head-zone   { padding: 80px 0 40px; }
  .sec-vuln-service__body-zone   { padding: 48px 0 80px; }
  .sec-vuln-service__inner       { padding: 0 40px; }
  .sec-vuln-service__heading     { font-size: 28px; line-height: 1.4; }
  .sec-vuln-service__tabs        { gap: 16px; }
  .sec-vuln-service__tab         { width: auto; flex: 1; font-size: 15px; padding: 14px 16px; }
  .sec-vuln-service__detail      { padding: 40px 28px; margin-top: 48px; }

  /* 横並びキープ: テキスト左 / 写真右、ただし写真サイズを縮小 */
  .sec-vuln-service__detail-head {
    flex-direction: row;
    align-items:    stretch;
    gap:            24px;
    padding-top:    20px;
    min-height:     180px;
  }
  .sec-vuln-service__detail-head-text {
    flex:        1;
    min-width:   0;
    max-width:   none;
    padding:     16px 24px;
    gap:         16px;
    border-top:  none;
  }
  .sec-vuln-service__detail-photo {
    flex-shrink: 0;
    width:       260px;
    max-width:   260px;
    height:      auto;
    aspect-ratio: auto;
    position:    relative;
    align-self:  stretch;
    order:       0;
  }
  #service .sec-vuln-service__detail-photo-img {
    position:    absolute;
    top:         -80px;
    left:        50%;
    transform:   translateX(-50%);
    width:       240px;
    height:      225px;
    max-width:   240px;
    max-height:  225px;
    object-fit:  contain;
    margin:      0;
  }

  /* 診断方式は1列のまま */
  .sec-vuln-service__methods     { grid-template-columns: 1fr; gap: 18px; }

  /* 診断項目タブ: WEBアプリは 6 タブを 3 列 × 2 行 */
  .sec-vuln-service__category-tabs { display: flex; flex-wrap: wrap; }
  #service-webapp .sec-vuln-service__category-tab {
    flex: 1 0 calc(100% / 3);
    min-width: 0;
    max-width: calc(100% / 3);
    font-size: 13px;
    padding: 14px 8px;
  }
  /* ソースコード診断は 4 タブ → 2 列 × 2 行（4+1 のはぐれを防ぐ） */
  #service-source .sec-vuln-service__category-tab {
    flex: 1 0 calc(100% / 2);
    min-width: 0;
    max-width: calc(100% / 2);
    font-size: 13px;
    padding: 14px 8px;
  }
  .sec-vuln-service__category-tab-icon { width: 32px; height: 32px; }

  /* ソースコード診断 2カラム → 1カラム（タブレット幅では縦積みの方が見やすい） */
  .sec-vuln-service__source-row  { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }

  /* 選び方ガイド: 3ステップを横並びに収めるためテキストは縮小 */
  /* Guide: tablet ではタイトル帯を上に・3ステップを下に横並び。
     幅が狭いのでステップはアイコン上 / テキスト下の縦積みにして文字が折返さないようにする */
  .sec-vuln-service__guide       {
    flex-direction: column;
    align-items:    stretch;
    padding:        0;
    gap:            0;
  }
  .sec-vuln-service__guide-title {
    font-size:   16px;
    padding:     16px 24px;
    width:       100%;
    text-align:  center;
    justify-content: center;
  }
  .sec-vuln-service__guide-steps {
    gap:           14px;
    padding:       18px 24px;
    flex-wrap:     nowrap;
    align-items:   stretch;
  }
  .sec-vuln-service__guide-step {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            10px;
  }
  .sec-vuln-service__guide-step-icon { width: 40px; height: 40px; }
  #service .sec-vuln-service__guide-step-icon img {
    width: 40px; height: 40px; max-width: 40px; max-height: 40px;
  }
  .sec-vuln-service__guide-step-text {
    align-items: center;
    gap:         4px;
  }
  .sec-vuln-service__guide-step-label {
    font-size:      11px;
    line-height:    1.45;
    letter-spacing: -0.3px;
  }
  .sec-vuln-service__guide-step-desc  {
    font-size:      11px;
    line-height:    1.5;
    letter-spacing: -0.3px;
  }
  .sec-vuln-service__guide-sep        { align-self: center; }

  /* 診断項目ヘッダー */
  .sec-vuln-service__items-head  { gap: 24px; padding: 18px 28px; }
  .sec-vuln-service__items-label { font-size: 20px; }
  .sec-vuln-service__items-desc  { font-size: 13px; }
  .sec-vuln-service__items-desc-sub { font-size: 12px; }

  /* vuln-cta（タブレット）→ vulnerability-common.css に移植済み */

  /* Features */
  .sec-vuln-features            { padding: 64px 0; }
  /* タブレットでは見出しが中央寄せのため、左イラスト装飾を非表示にして可読性確保 */
  .sec-vuln-features__decor     { display: none; }
  .sec-vuln-features__inner     { padding: 0 40px; gap: 32px; }
  .sec-vuln-features__head      { padding: 24px 0; justify-content: center; }
  .sec-vuln-features__head-content { width: 100%; align-items: center; }
  .sec-vuln-features__title-block { align-items: center; }
  .sec-vuln-features__eyebrow   { text-align: center; }
  .sec-vuln-features__heading   { font-size: 28px; line-height: 1.45; text-align: center; }
  .sec-vuln-features__lead      { text-align: center; }
  .sec-vuln-features__head-btns { justify-content: center; }
  .sec-vuln-features__btn       { width: auto; min-width: 220px; }
  .sec-vuln-features__cards     { gap: 20px; }
  .sec-vuln-features__card      { padding: 36px 24px 28px; }
  .sec-vuln-features__cert      { grid-template-columns: 100px 1fr; gap: 16px; padding: 24px; }
  .sec-vuln-features__cert-link { grid-column: 1 / -1; justify-self: start; }

  /* Risks */
  .sec-vuln-risks         { padding: 80px 0; }
  .sec-vuln-risks__inner  { padding: 0 40px; gap: 48px; }
  .sec-vuln-risks__head   { flex-direction: column; gap: 32px; }
  .sec-vuln-risks__head-text   { max-width: 100%; }
  .sec-vuln-risks__head-visual { width: 100%; max-width: 600px; height: auto; aspect-ratio: 600/400; align-self: center; }
  .sec-vuln-risks__heading     { font-size: 30px; line-height: 1.45; }
  .sec-vuln-risks__list        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-vuln-risks__card        { padding: 32px 24px 28px; }

  /* ---------- Hero（タブレット: badge→h1→illust→sub→btns 縦積み） ---------- */
  .sec-vuln-hero          { padding: 48px 40px; }
  .sec-vuln-hero__inner   {
    flex-direction: column;
    align-items:    center;
    padding:        0;
    gap:            20px;
    max-width:      640px;
    margin:         0 auto;
  }
  .sec-vuln-hero__left    { display: contents; }
  .sec-vuln-hero__badge   {
    order:       1;
    font-size:   32px;
    padding:     10px 32px;
    width:       100%;
    text-align:  center;
    letter-spacing: 0.5px;
    white-space: normal;
  }
  .sec-vuln-hero__h1      {
    order:          2;
    font-size:      36px;
    letter-spacing: 0.4px;
    line-height:    1.3;
    white-space:    normal;
    text-align:     center;
    width:          100%;
  }
  .sec-vuln-hero__right   {
    order:           3;
    width:           100%;
    max-width:       480px;
    justify-content: center;
  }
  .sec-vuln-hero__illust,
  #contents .sec-vuln-hero__illust,
  .img100 .sec-vuln-hero__illust,
  .inner .sec-vuln-hero__illust {
    width:     100%;
    max-width: 480px;
    margin:    0 auto;
  }
  .sec-vuln-hero__sub     {
    order:       4;
    font-size:   15px;
    line-height: 1.85;
    width:       100%;
    text-align:  center;
  }
  .sec-vuln-hero__sub br  { display: none; }
  .sec-vuln-hero__btns    {
    order:           5;
    width:           100%;
    flex-direction:  row;
    flex-wrap:       wrap;
    align-items:     stretch;
    justify-content: center;
    gap:             16px;
    margin-top:      4px;
  }
  .sec-vuln-hero__btns .vuln-btn {
    flex:            1 1 240px;
    min-width:       240px;
    justify-content: center;
    min-height:      52px;
    padding:         12px 20px;
    white-space:     normal;
    text-align:      center;
  }

  /* Report */
  .sec-vuln-report        { padding: 80px 0; }
  .sec-vuln-report__inner { padding: 0 40px; gap: 40px; }
  .sec-vuln-report__main  { gap: 28px; }

  .sec-vuln-report__point          { padding: 36px 20px 24px; gap: 20px; }
  .sec-vuln-report__point-icon-wrap { width: 88px; }
  .sec-vuln-report__point-icon     { width: 64px; height: 64px; border-radius: 32px; }
  .sec-vuln-report__point-icon img { width: 26px; height: 26px; }
  .sec-vuln-report__point-title    { font-size: 16px; line-height: 1.55; }
  .sec-vuln-report__point-desc     { font-size: 14px; line-height: 1.75; }
  .sec-vuln-report__point-label    { font-size: 14px; padding: 6px 14px; }

  .sec-vuln-report__online              { align-items: stretch; }
  .sec-vuln-report__online-photo-wrap   { width: 240px; height: auto; }
  .sec-vuln-report__online-content      { padding: 16px 24px; }
  .sec-vuln-report__online-title        { font-size: 18px; }
}

/* ============================================================
   SP（767px以下）
   ============================================================ */
@media (max-width: 767px) {
  /* vuln-cta（SP）→ vulnerability-common.css に移植済み */

  /* Features */
  .sec-vuln-features            { padding: 48px 0; }
  .sec-vuln-features__decor     { display: none; }
  .sec-vuln-features__inner     { padding: 0 20px; gap: 24px; }
  .sec-vuln-features__head      { padding: 0; justify-content: center; }
  .sec-vuln-features__head-content { width: 100%; gap: 16px; align-items: center; }
  .sec-vuln-features__title-block { gap: 20px; align-items: center; }
  .sec-vuln-features__eyebrow   { text-align: center; }
  .sec-vuln-features__heading   { font-size: 22px; line-height: 1.5; letter-spacing: 0.4px; text-align: center; }
  .sec-vuln-features__lead      { font-size: 13px; line-height: 1.85; text-align: center; }
  .sec-vuln-features__head-btns { gap: 12px; justify-content: center; width: 100%; }
  .sec-vuln-features__btn       { width: 100%; min-width: 0; height: 52px; padding: 0 16px; font-size: 13px; }
  .sec-vuln-features__cards     { grid-template-columns: 1fr; gap: 16px; padding-top: 8px; }
  .sec-vuln-features__card      { padding: 32px 20px 24px; gap: 12px; }
  .sec-vuln-features__card-icon-wrap { width: 64px; height: 64px; border-radius: 32px; }
  .sec-vuln-features__card-title  { font-size: 16px; line-height: 1.5; }
  .sec-vuln-features__card-desc   { font-size: 13px; line-height: 1.8; }
  .sec-vuln-features__card-badge  { top: 16px; right: 18px; font-size: 12px; }
  .sec-vuln-features__cert      { grid-template-columns: 1fr; gap: 16px; padding: 20px; text-align: center; }
  .sec-vuln-features__cert-logo-wrap { width: 100%; }
  .sec-vuln-features__cert-info  { align-items: center; text-align: center; }
  .sec-vuln-features__cert-title { font-size: 14px; }
  .sec-vuln-features__cert-desc  { font-size: 12px; text-align: left; }
  .sec-vuln-features__cert-link  { justify-self: center; width: 100%; justify-content: center; }

  /* Risks */
  .sec-vuln-risks         { padding: 60px 0; }
  .sec-vuln-risks__inner  { padding: 0 20px; gap: 32px; }
  .sec-vuln-risks__head {
    flex-direction: column;
    gap:            24px;
  }
  .sec-vuln-risks__head-text   { max-width: 100%; gap: 16px; }
  .sec-vuln-risks__title-block { gap: 20px; }
  .sec-vuln-risks__heading     { font-size: 22px; line-height: 1.5; letter-spacing: 0.4px; }
  .sec-vuln-risks__lead        { font-size: 13px; line-height: 1.85; }
  .sec-vuln-risks__head-visual { width: 100%; height: auto; aspect-ratio: 600/400; }
  .sec-vuln-risks__list        { grid-template-columns: 1fr; gap: 20px; }
  .sec-vuln-risks__card        { padding: 28px 20px 24px; }
  .sec-vuln-risks__card-title  { min-height: 0; font-size: 16px; line-height: 1.5; }
  .sec-vuln-risks__card-desc   { font-size: 13px; }

  /* ---------- Hero（サービストップSPに準拠: badge大→h1→illust→sub→btns） ---------- */
  .sec-vuln-hero          { padding: 32px 20px 40px; }
  .sec-vuln-hero__inner   {
    flex-direction: column;
    align-items:    center;
    padding:        0;
    gap:            16px;
  }
  /* __left を解除して子要素を __inner の直接の flex item に昇格 */
  .sec-vuln-hero__left    { display: contents; }

  /* ① バッジ: フルワイド、大きく、中央寄せ */
  .sec-vuln-hero__badge   {
    order:        1;
    font-size:    26px;
    padding:      8px 20px;
    width:        100%;
    text-align:   center;
    white-space:  normal;
    border-radius: 3px;
    letter-spacing: 0.5px;
  }

  /* ② h1: 中央寄せ、1行で収まるサイズに */
  .sec-vuln-hero__h1      {
    order:          2;
    font-size:      24px;
    letter-spacing: 0;
    line-height:    1.35;
    white-space:    normal;
    text-align:     center;
    width:          100%;
  }

  /* ③ イラスト */
  .sec-vuln-hero__right   {
    order:           3;
    width:           100%;
    justify-content: center;
  }
  .sec-vuln-hero__illust,
  #contents .sec-vuln-hero__illust,
  .img100 .sec-vuln-hero__illust,
  .inner .sec-vuln-hero__illust {
    width:     100%;
    max-width: 340px;
    margin:    0 auto;
  }

  /* ④ サブテキスト */
  .sec-vuln-hero__sub     {
    order:      4;
    font-size:  13px;
    line-height: 1.85;
    width:      100%;
    text-align: center;
  }
  .sec-vuln-hero__sub br  { display: none; }

  /* ⑤ ボタン2つ縦積み */
  .sec-vuln-hero__btns    {
    order:          5;
    width:          100%;
    flex-direction: column;
    align-items:    stretch;
    gap:            12px;
    margin-top:     0;
  }
  .sec-vuln-hero__btns .vuln-btn {
    width:           100%;
    justify-content: center;
    min-height:      52px;
    padding:         12px 20px;
    white-space:     normal;
    text-align:      center;
  }

  /* Report */
  .sec-vuln-report         { padding: 60px 0; }
  .sec-vuln-report__inner  { padding: 0 20px; gap: 32px; }

  .sec-vuln-report__lead {
    font-size:  13px;
    text-align: left;
    line-height: 1.8;
  }

  .sec-vuln-report__main {
    flex-direction: column;
    gap:            32px;
    padding-top:    18px;
  }

  .sec-vuln-report__visual {
    width:    100%;
    max-width: 360px;
    margin:   0 auto;
  }

  .sec-vuln-report__points { gap: 32px; }

  .sec-vuln-report__point          { padding: 36px 16px 24px; gap: 14px; }
  .sec-vuln-report__point-label    { top: -14px; left: 20px; font-size: 14px; padding: 5px 14px; }
  .sec-vuln-report__point-icon-wrap { width: 72px; }
  .sec-vuln-report__point-icon     { width: 60px; height: 60px; border-radius: 30px; }
  .sec-vuln-report__point-icon img { width: 24px; height: 24px; }
  .sec-vuln-report__point-content  { gap: 10px; }
  .sec-vuln-report__point-title    { font-size: 16px; line-height: 1.5; }
  .sec-vuln-report__point-desc     { font-size: 14px; line-height: 1.75; }

  .sec-vuln-report__online {
    flex-direction: column;
    align-items:    stretch;
  }
  .sec-vuln-report__online-photo-wrap { width: 100%; height: 200px; }
  .sec-vuln-report__online-content    { padding: 16px 20px 20px; }
  .sec-vuln-report__online-heading-row {
    flex-wrap: wrap;
    gap:       8px;
  }
  .sec-vuln-report__online-title      { font-size: 18px; }
  .sec-vuln-report__online-badge      { font-size: 12px; padding: 3px 14px; }
  .sec-vuln-report__online-meta-title { font-size: 14px; }
  .sec-vuln-report__online-meta-desc  { font-size: 13px; line-height: 1.75; }

  /* ---------- Breadcrumb ---------- */
  .sec-vuln-breadcrumb              { padding: 10px 0; }
  .sec-vuln-breadcrumb__inner       { padding: 0 16px; }
  .sec-vuln-breadcrumb__list        { font-size: 11px; gap: 6px; line-height: 1.5; }
  .sec-vuln-breadcrumb__sep i,
  .sec-vuln-breadcrumb__sep span.fa-solid { font-size: 10px; }

  /* ---------- vuln-subnav (ページ内アンカー版): SPでは横スクロール ---------- */
  .vuln-subnav.vuln-subnav--anchor                { display: block; }
  .vuln-subnav--anchor .vuln-subnav__inner        { padding: 0; }
  .vuln-subnav--anchor .vuln-subnav__list         {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .vuln-subnav--anchor .vuln-subnav__list::-webkit-scrollbar { height: 3px; }
  .vuln-subnav--anchor .vuln-subnav__item         { flex: 0 0 auto; }
  .vuln-subnav--anchor .vuln-subnav__link         {
    font-size: 12px;
    padding: 12px 18px;
    white-space: nowrap;
  }
  .vuln-subnav--anchor.vuln-subnav .vuln-subnav__link { min-height: 48px; }

  /* ---------- Service: head-zone / body-zone padding ---------- */
  .sec-vuln-service__head-zone   { padding: 56px 0 32px; }
  .sec-vuln-service__body-zone   { padding: 40px 0 64px; }
  .sec-vuln-service__inner       { padding: 0 16px; }
  .sec-vuln-service__eyebrow     { font-size: 16px; margin: 0 0 16px; }
  .sec-vuln-service__heading     { font-size: 22px; line-height: 1.5; letter-spacing: 0.3px; margin: 0 0 18px; }
  .sec-vuln-service__lead        { font-size: 13px; line-height: 1.85; margin: 0 0 24px; }

  /* タブ（WEB/SOURCE 切替）: 縦積み */
  .sec-vuln-service__tabs        { flex-direction: column; gap: 12px; }
  .sec-vuln-service__tab,
  .sec-vuln-service__tab:link,
  .sec-vuln-service__tab:visited {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    gap: 10px;
  }
  .sec-vuln-service__tab-icon    { width: 28px; height: 28px; }
  #service .sec-vuln-service__tab-icon img {
    width: 28px; height: 28px; max-width: 28px; max-height: 28px;
  }

  /* 詳細カード */
  .sec-vuln-service__detail      { padding: 24px 16px; border-radius: 12px; margin-top: 32px; }

  /* 写真は上、テキストは下に縦積み */
  .sec-vuln-service__detail-head {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding-top: 0;
    min-height: 0;
    align-items: stretch;
  }
  .sec-vuln-service__detail-head-text {
    border-left: none;
    border-top: 4px solid var(--vuln-svc-webapp);
    padding: 16px 0 0;
    max-width: 100%;
    gap: 12px;
    order: 2;
  }
  .sec-vuln-service__detail-title { font-size: 18px; line-height: 1.5; }
  .sec-vuln-service__detail-desc  { font-size: 13px; line-height: 1.8; }

  .sec-vuln-service__detail-photo {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 365 / 200;
    margin: 0 auto;
    align-self: center;
    order: 1;
  }
  #service .sec-vuln-service__detail-photo-img {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
  }

  /* 診断方式（リモート/オンサイト）グリッド: 1列 */
  .sec-vuln-service__method-heading { font-size: 16px; margin: 24px 0 16px; }
  .sec-vuln-service__methods        { grid-template-columns: 1fr; gap: 16px; }
  .sec-vuln-service__method-banner  { font-size: 15px; padding: 12px 12px; }
  .sec-vuln-service__method-body    { padding: 18px; gap: 12px; }
  .sec-vuln-service__method-headline { font-size: 14px; }
  .sec-vuln-service__method-desc    { font-size: 12px; line-height: 1.7; }

  /* リコメンドボックス */
  .sec-vuln-service__recommend          { padding: 14px 14px; }
  .sec-vuln-service__recommend-title    { font-size: 13px; }
  .sec-vuln-service__recommend-list li  { font-size: 12px; padding-left: 18px; line-height: 1.55; }

  /* フロー図: 横スクロール許容、サイズ縮小 */
  .sec-vuln-service__flow {
    gap: 4px;
    padding: 8px 0 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .sec-vuln-service__flow-node       { min-width: 56px; }
  .sec-vuln-service__flow-node-icon  { width: 56px; height: 56px; }
  #service .sec-vuln-service__flow-node-icon img {
    width: 56px; height: 56px; max-width: 56px; max-height: 56px;
  }
  .sec-vuln-service__flow-node--person .sec-vuln-service__flow-node-icon {
    width: 48px; height: 48px;
  }
  #service .sec-vuln-service__flow-node--person .sec-vuln-service__flow-node-icon img {
    width: 48px; height: 48px; max-width: 48px; max-height: 48px;
  }
  .sec-vuln-service__flow-node-label { font-size: 10px; }
  .sec-vuln-service__flow-arrow      { font-size: 12px; margin-top: 0; align-self: center; }

  /* ソースコード診断 2カラム → 1カラム */
  .sec-vuln-service__source-row  { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; }
  .sec-vuln-service__flow--source { padding: 16px; }

  /* 選び方のポイント: SP は縦積み・タイトルパネルは上部にライトグレー帯 */
  .sec-vuln-service__guide       {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin-top: 20px;
  }
  .sec-vuln-service__guide-title {
    font-size: 15px;
    padding: 14px 18px;
    border-right: none;
    border-bottom: none;
    text-align: center;
    flex-shrink: 1;
    width: 100%;
    justify-content: center;
  }
  .sec-vuln-service__guide-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
  }
  .sec-vuln-service__guide-step  { gap: 10px; font-size: 12px; flex: 0 0 auto; }
  .sec-vuln-service__guide-step-icon  { width: 36px; height: 36px; margin-right: 0; }
  #service .sec-vuln-service__guide-step-icon img {
    width: 36px; height: 36px; max-width: 36px; max-height: 36px;
  }
  .sec-vuln-service__guide-step-label { font-size: 13px; }
  .sec-vuln-service__guide-step-desc  { font-size: 12px; line-height: 1.5; }
  .sec-vuln-service__guide-sep        { display: none; }

  /* 診断項目 */
  .sec-vuln-service__items       { margin-top: 28px; }
  .sec-vuln-service__items-head  {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 18px;
    margin-bottom: 0;
  }
  .sec-vuln-service__items-label { font-size: 18px; }
  .sec-vuln-service__items-desc  { font-size: 12px; line-height: 1.65; }
  .sec-vuln-service__items-desc-sub { font-size: 11.5px; line-height: 1.65; }

  /* カテゴリタブ: 1行3列、文字も詰めて確実に収める */
  .sec-vuln-service__category-tabs {
    border-radius: 0;
    overflow: visible;
  }
  /* WEBアプリは 6 タブ → 3 列 × 2 行 */
  #service-webapp .sec-vuln-service__category-tab {
    flex: 1 0 calc(100% / 3);
    max-width: calc(100% / 3);
    min-width: 0;
    padding: 12px 4px;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    min-height: 84px;
    white-space: normal;
    border-bottom-width: 2px;
  }
  /* ソース診断は 4 タブ → 2 列 × 2 行（はぐれ防止） */
  #service-source .sec-vuln-service__category-tab {
    flex: 1 0 calc(100% / 2);
    max-width: calc(100% / 2);
    min-width: 0;
    padding: 12px 6px;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.3;
    min-height: 84px;
    white-space: normal;
    border-bottom-width: 2px;
  }
  .sec-vuln-service__category-tab-icon { width: 28px; height: 28px; }

  /* タブパネル */
  .sec-vuln-service__category-content { padding: 16px; border-radius: 8px; }
  .sec-vuln-service__category-title   { font-size: 13px; margin: 0 0 12px; }
  .sec-vuln-service__item-tags        { gap: 8px; margin: 0 0 16px; }
  .sec-vuln-service__item-tag         { font-size: 12px; padding: 7px 14px; line-height: 1.4; }
  .sec-vuln-service__risk-text        { font-size: 12px; line-height: 1.7; }

  /* ---------- STEP ---------- */
  .sec-vuln-step                 { padding: 60px 0; }
  .sec-vuln-step__inner          { padding: 0 16px; gap: 28px; }
  .sec-vuln-step__head           { gap: 18px; }
  .sec-vuln-step__eyebrow        { font-size: 16px; }
  .sec-vuln-step__heading        { font-size: 22px; line-height: 1.5; letter-spacing: 0.3px; }
  .sec-vuln-step__lead           { font-size: 13px; line-height: 1.85; }
  .sec-vuln-step__list           { gap: 36px; }

  .sec-vuln-step__item:not(:last-child)::after {
    bottom: -28px;
    left:   30px;
    font-size: 18px;
  }

  .sec-vuln-step__badge          { width: 64px; min-height: 100%; gap: 10px; border-radius: 6px 0 0 6px; }
  .sec-vuln-step__no             { font-size: 11px; letter-spacing: 1px; }
  .sec-vuln-step__icon           { font-size: 22px; }

  .sec-vuln-step__body           { padding: 16px 16px 18px; gap: 8px; }
  .sec-vuln-step__title-row      {
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
    padding-bottom: 10px;
  }
  .sec-vuln-step__title          { font-size: 16px; line-height: 1.45; }
  .sec-vuln-step__duration       { font-size: 12px; padding: 2px 12px; align-self: flex-start; }
  .sec-vuln-step__desc           { font-size: 13px; line-height: 1.75; }

  /* CTA大型（SP）→ vulnerability-common.css に移植済み */
}

/* ============================================================
   インタラクション / hover アニメーション
   - reveal/stagger 関連は vulnerability-common.css に定義済み
   - ここではこのページ固有のカード hover, アイコン微挙動などを追加
   ============================================================ */

/* Risks カード — リンクではないため hover エフェクトなし */

/* Features POINT カード — リンクではないため hover エフェクトなし */

/* Report POINT カード / オンライン報告会カード — サービストップ準拠で hover なし */

/* STEP カード — リンクではないため hover エフェクトなし */

/* ---------- Service: 詳細カード hover（subtle elevation） ---------- */
.sec-vuln-service__detail {
  transition: box-shadow 0.3s ease;
}
.sec-vuln-service__detail:hover {
  box-shadow: 0 12px 28px rgba(3, 38, 71, 0.10);
}

/* Service: 上部タブ（WEBアプリ / ソース診断）アイコン微挙動 */
.sec-vuln-service__tab .sec-vuln-service__tab-icon {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.sec-vuln-service__tab:hover .sec-vuln-service__tab-icon {
  transform: translateY(-2px) scale(1.05);
}

/* Service: 診断項目タブ アイコン微挙動 */
.sec-vuln-service__category-tab .sec-vuln-service__category-tab-icon {
  transition: background-color 0.2s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.sec-vuln-service__category-tab:hover .sec-vuln-service__category-tab-icon,
.sec-vuln-service__category-tab--active .sec-vuln-service__category-tab-icon {
  transform: scale(1.1);
}

/* Service: 診断項目タグ — リンクではないため hover エフェクトなし */

/* CTA バナー / バッジ画像 — サービストップとエフェクト統一のため hover/pulse なし */

/* vuln-subnav の hover はサービストップ準拠（common.css の background hover のみ） */

/* ---------- アクセシビリティ: モーション低減 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sec-vuln-service__detail,
  .sec-vuln-service__tab .sec-vuln-service__tab-icon,
  .sec-vuln-service__category-tab .sec-vuln-service__category-tab-icon {
    transition: none;
  }
}