/* ============================================================
   vulnerability.css — vuln-hero セクション
   スコープ: .sec-vuln-hero 配下
   前提: Noto Sans JP・共通reset は読み込み済み
   ============================================================ */

/* ---------- CSS変数（このファイル冒頭に一度だけ定義） ---------- */
:root {
  --vuln-primary:           #AD0320;
  --vuln-primary-dark:      #C41623;
  --vuln-navy:              #032647;
  --vuln-navy-dark:         #083051;
  --vuln-text:              #000000;
  --vuln-white:             #FFFFFF;
  --vuln-bg-gray:           #F5F5F5;
  --vuln-luv-gray:          #EEF0F8;

  --vuln-svc-webapp:        #317DD1;
  --vuln-svc-webapp-bg:     rgba(49, 125, 209, 0.1);
  --vuln-svc-network:       #184F9F;
  --vuln-svc-network-bg:    rgba(24, 79, 159, 0.1);
  --vuln-svc-smartphone:    #27A7AA;
  --vuln-svc-smartphone-bg: rgba(39, 167, 170, 0.1);
  --vuln-svc-cloud:         #F67D0C;
  --vuln-svc-cloud-bg:      rgba(246, 125, 12, 0.1);
  --vuln-svc-pentest:       #E42E35;
  --vuln-svc-pentest-bg:    rgba(228, 46, 53, 0.1);

  --vuln-radius-btn:        50px;
  --vuln-radius-card:       10px;
}

/* ============================================================
   本番 module.css / layout.css の
   `.img100 img, #contents img, .inner img` は詳細度 (1,0,1)。
   LP内の画像は `.sec-vuln-*` などだけだと負けるため、
   各ブロックで #contents / .img100 / .inner を列挙して上げる（2x書き出し対策の前提）。
   ============================================================ */

/* ---------- 共通ボタン ---------- */
/* ============================================================
   スクロールリビールアニメーション
   ============================================================ */

/* 初期状態: 非表示（JS が付与） */
.vuln-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 表示状態: IntersectionObserver が付与 */
.vuln-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* カード等の子要素を段階的に表示（stagger）
   ※ transition-delay ではなく animation を使うことで
      hover の transition に干渉しない */
@keyframes vuln-stagger-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0px); }
}

.vuln-reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
}
.vuln-reveal-stagger.is-visible > *:nth-child(1) { animation: vuln-stagger-in 0.5s ease-out 0s    forwards; }
.vuln-reveal-stagger.is-visible > *:nth-child(2) { animation: vuln-stagger-in 0.5s ease-out 0.1s  forwards; }
.vuln-reveal-stagger.is-visible > *:nth-child(3) { animation: vuln-stagger-in 0.5s ease-out 0.2s  forwards; }
.vuln-reveal-stagger.is-visible > *:nth-child(4) { animation: vuln-stagger-in 0.5s ease-out 0.3s  forwards; }
.vuln-reveal-stagger.is-visible > *:nth-child(5) { animation: vuln-stagger-in 0.5s ease-out 0.4s  forwards; }
.vuln-reveal-stagger.is-visible > *:nth-child(6) { animation: vuln-stagger-in 0.5s ease-out 0.5s  forwards; }

/* アニメーション完了後（JS が is-visible → stagger-done に切替）
   animation ルールが消えるので hover の transform が正しく効く */
.vuln-stagger-done > * {
  opacity:   1;
  transform: none;
  animation: none;
}

/* アニメーション無効化（アクセシビリティ: モーション低減設定） */
@media (prefers-reduced-motion: reduce) {
  .vuln-reveal,
  .vuln-reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   共通ボタン
   ============================================================ */

.vuln-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  height:          48px;
  padding:         0 24px;
  border-radius:   var(--vuln-radius-btn);
  border:          1px solid var(--vuln-white);
  font-family:     'Noto Sans JP', sans-serif;
  font-weight:     700;
  font-size:       16px;
  letter-spacing:  0.5px;
  color:           var(--vuln-white);
  text-decoration: none;
  white-space:     nowrap;
  box-shadow:      0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.15);
  transition:      opacity .2s, transform .2s;
}
.vuln-btn:hover {
  opacity:   .85;
  transform: translateY(3px);
}

/* sompo.common.css の a[class*=_btn]{color:#333} を上書き */
a.vuln-btn,
a.vuln-btn:link,
a.vuln-btn:visited {
  color:           var(--vuln-white);
  text-decoration: none;
}

/* ネイビーボタン（資料DL） */
.vuln-btn--navy {
  background: linear-gradient(to top, var(--vuln-navy) 50%, var(--vuln-navy-dark) 50%);
}

/* レッドボタン（お問い合わせ） */
.vuln-btn--red {
  background: linear-gradient(to bottom, var(--vuln-primary-dark) 50%, var(--vuln-primary) 50%);
}

/* 「無料」バッジ（ネイビーボタン内） */
.vuln-btn__free {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         2px 10px;
  border-radius:   var(--vuln-radius-btn);
  background:      var(--vuln-white);
  color:           var(--vuln-navy);
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  1.5px;
  line-height:     1.5;
  white-space:     nowrap;
}

/* ---------- 共通セクションヘッダー ---------- */
#locator_template_c2 .inner, main#contents, main.inner{
  max-width: 100%;
  padding: 90px 0;
}

.vuln-sec-header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  width:          100%;
  text-align:     center;
}

.vuln-sec-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;
}

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

/* SP専用表示制御 */
.sp-only { display: none; }

@media (max-width: 767px) {
  .sp-only { display: inline; }
  .vuln-sec-eyebrow { font-size: 16px; }
  .vuln-sec-heading { font-size: 20px; line-height: 1.5; }
}

/* ---------- vuln-subnav ---------- */
.vuln-subnav *,
.vuln-subnav *::before,
.vuln-subnav *::after { box-sizing: border-box; }

.vuln-subnav {
  position: relative;
  z-index: 200;
  background: var(--vuln-primary);
  width: 100%;
}

/* JS で付与されるスティッキー固定クラス */
.vuln-subnav.is-sticky {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: vuln-subnav-slidein 0.2s ease;
}

@keyframes vuln-subnav-slidein {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.vuln-subnav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.vuln-subnav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vuln-subnav__item {
  flex: 1;
  display: flex;
  align-items: stretch;
  position: relative;
}

/* 区切り線 */
.vuln-subnav__item + .vuln-subnav__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.vuln-subnav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  padding: 10px 8px;
  color: var(--vuln-white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  gap: 0;
  transition: background .2s;
  white-space: nowrap;
}

a.vuln-subnav__link,
a.vuln-subnav__link:link,
a.vuln-subnav__link:visited {
  color: var(--vuln-white);
  text-decoration: none;
}

.vuln-subnav__link:hover,
a.vuln-subnav__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--vuln-white);
  text-decoration: none;
}

.vuln-subnav__link--has-chevron {
  flex-direction: row;
  gap: 6px;
}

.vuln-subnav__chevron {
  font-size: 10px;
  transition: transform .3s;
}

.vuln-subnav__item--mega:hover .vuln-subnav__chevron {
  transform: rotate(180deg);
}

/* ----- メガメニュー ----- */
.vuln-subnav__mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-70%) translateY(-10px);
  width: 1080px;
  background: var(--vuln-white);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  border-radius: 0 0 10px 10px;
  padding: 24px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 300;
}

.vuln-subnav__item--mega:hover .vuln-subnav__mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-70%) translateY(0);
}

.vuln-subnav__mega-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.vuln-subnav__mega-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid transparent;
  background: var(--vuln-white);
  transition: background .2s, border-color .2s, box-shadow .2s;
  text-align: center;
}

a.vuln-subnav__mega-card,
a.vuln-subnav__mega-card:link,
a.vuln-subnav__mega-card:visited {
  text-decoration: none;
  color: inherit;
}

.vuln-subnav__mega-icon,
#contents .vuln-subnav__mega-icon,
.img100 .vuln-subnav__mega-icon,
.inner .vuln-subnav__mega-icon {
  width: 48px!important;
  height: 48px!important;
  flex-shrink: 0;
}

.vuln-subnav__mega-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.vuln-subnav__mega-desc {
  display: block;
  font-size: 11px;
  color: #777;
  line-height: 1.5;
}

/* カード hover */
.vuln-subnav__mega-card--webapp:hover {
  background: var(--vuln-svc-webapp-bg);
  border-color: var(--vuln-svc-webapp);
}
.vuln-subnav__mega-card--network:hover {
  background: var(--vuln-svc-network-bg);
  border-color: var(--vuln-svc-network);
}
.vuln-subnav__mega-card--cloud:hover {
  background: var(--vuln-svc-cloud-bg);
  border-color: var(--vuln-svc-cloud);
}
.vuln-subnav__mega-card--smartphone:hover {
  background: var(--vuln-svc-smartphone-bg);
  border-color: var(--vuln-svc-smartphone);
}
.vuln-subnav__mega-card--pentest:hover {
  background: var(--vuln-svc-pentest-bg);
  border-color: var(--vuln-svc-pentest);
}

/* カード名カラー */
.vuln-subnav__mega-card--webapp    .vuln-subnav__mega-name { color: var(--vuln-svc-webapp); }
.vuln-subnav__mega-card--network   .vuln-subnav__mega-name { color: var(--vuln-svc-network); }
.vuln-subnav__mega-card--cloud     .vuln-subnav__mega-name { color: var(--vuln-svc-cloud); }
.vuln-subnav__mega-card--smartphone .vuln-subnav__mega-name { color: var(--vuln-svc-smartphone); }
.vuln-subnav__mega-card--pentest   .vuln-subnav__mega-name { color: var(--vuln-svc-pentest); }

/* SP非表示 */
@media (max-width: 767px) {
  .vuln-subnav { display: none; }
}

/* ---------- vuln-hero ---------- */
.sec-vuln-hero {
  background:   var(--vuln-white);
  border-top:   10px solid var(--vuln-primary);
  padding:      70px 80px;
  overflow-x:   hidden;
}

.sec-vuln-hero__inner {
  display:      flex;
  align-items:  center;
  gap:          40px;
  max-width:    1280px;
  margin:       0 auto;
}

/* 左カラム */
.sec-vuln-hero__left {
  display:        flex;
  flex-direction: column;
  gap:            30px;
  flex:           0 0 491px;
}

/* h1バッジ */
.sec-vuln-hero__badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 40px;
  background:      var(--vuln-primary);
  border-radius:   5px;
  color:           var(--vuln-white);
  font-size:       43px;
  font-weight:     700;
  letter-spacing:  1.72px;
  line-height:     1;
  white-space:     nowrap;
  margin:          0;
}

/* メインコピー */
.sec-vuln-hero__copy {
  color:          var(--vuln-navy);
  font-size:      46px;
  font-weight:    700;
  letter-spacing: 0.92px;
  line-height:    1.6;
  text-align:     center;
  margin:         0;
}
.sec-vuln-hero__copy--accent {
  color: var(--vuln-primary);
}

/* 区切り線 */
.sec-vuln-hero__rule {
  border:     none;
  border-top: 1px solid #ccc;
  margin:     0;
}

/* サブコピー */
.sec-vuln-hero__sub {
  font-size:      16px;
  font-weight:    500;
  letter-spacing: 0.32px;
  line-height:    1.625;
  text-align:     center;
  color:          var(--vuln-text);
  margin:         0;
}

/* ボタン群 */
.sec-vuln-hero__btns {
  display:     flex;
  gap:         20px;
  align-items: center;
}

/* 右カラム */
.sec-vuln-hero__right {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  flex:           1;
  overflow:       hidden;
}

/* 628×360＝レイアウト表示サイズ（元画像は2倍書き出し） */
.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-hero__badges {
  display:     flex;
  gap:         10px;
  align-items: flex-start;
}
.sec-vuln-hero__badges img,
#contents .sec-vuln-hero__badges img,
.img100 .sec-vuln-hero__badges img,
.inner .sec-vuln-hero__badges img {
  flex:       0 1 calc((100% - 20px) / 3);
  width:      calc((100% - 20px) / 3);
  max-width:  calc((100% - 20px) / 3);
  height:     auto;
  display:    block;
}

/* ---------- レスポンシブ（SP: 767px以下） ---------- */
@media (max-width: 767px) {
  .sec-vuln-hero {
    padding: 32px 20px 40px;
  }

  /* display:contents で __left の子を __inner の flex アイテムに昇格 */
  .sec-vuln-hero__inner {
    flex-direction: column;
    align-items:    center;
    gap:            16px;
  }

  .sec-vuln-hero__left { display: contents; }

  /* ① バッジ */
  .sec-vuln-hero__badge {
    order:     1;
    font-size: 26px;
    padding:   8px 20px;
    width:     100%;
    text-align: center;
  }

  /* ② キャッチコピー */
  .sec-vuln-hero__copy {
    order:     2;
    font-size: 30px;
    width:     100%;
  }

  /* 横線は非表示 */
  .sec-vuln-hero__rule { display: none; }

  /* ③ イラスト＋認定バッジ */
  .sec-vuln-hero__right {
    order: 3;
    width: 100%;
  }

  .sec-vuln-hero__badges { gap: 8px; }

  /* gap 8px×2 に合わせた1/3幅（#contents img より詳細度を維持） */
  .sec-vuln-hero__badges img,
  #contents .sec-vuln-hero__badges img,
  .img100 .sec-vuln-hero__badges img,
  .inner .sec-vuln-hero__badges img {
    flex:      0 1 calc((100% - 16px) / 3);
    width:     calc((100% - 16px) / 3);
    max-width: calc((100% - 16px) / 3);
  }

  /* ④ サブテキスト */
  .sec-vuln-hero__sub {
    order:     4;
    font-size: 13px;
    width:     100%;
  }

  /* ⑤ ボタン */
  .sec-vuln-hero__btns {
    order:          5;
    flex-direction: column;
    align-items:    stretch;
    width:          100%;
    gap:            12px;
  }

  .vuln-btn {
    justify-content: center;
    width:           100%;
    height:          auto;
    min-height:      48px;
    padding:         12px 24px;
    white-space:     normal;
    text-align:      center;
  }
}


/* ============================================================
   vuln-necessity — 脆弱性診断の必要性
   ============================================================ */
.sec-vuln-necessity *,
.sec-vuln-necessity *::before,
.sec-vuln-necessity *::after {
  box-sizing: border-box;
}

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

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

/* ----- コンテンツ ----- */
.sec-vuln-necessity__content {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            40px;
  width:          100%;
}

.sec-vuln-necessity__lead {
  font-size:   20px;
  font-weight: 700;
  line-height: 1.5;
  color:       var(--vuln-text);
  text-align:  center;
  margin:      0;
}

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

.sec-vuln-necessity__body {
  font-size:   14px;
  font-weight: 400;
  line-height: 1.8;
  color:       var(--vuln-text);
  text-align:  center;
  max-width:   1100px;
  margin:      0;
}

/* ----- ダークパネル ----- */
.sec-vuln-necessity__panel {
  width:          100%;
  display:        flex;
  flex-direction: column;
  padding-bottom: 40px; /* バナーがはみ出す分の余白 */
}

/* ビジュアルエリア（position:relative のコンテナ） */
.sec-vuln-necessity__visual {
  position:   relative;
  background: #00002c;
  width:      100%;
  height:     600px;
  overflow:   hidden;
}

/* 引用テキスト */
.sec-vuln-necessity__panel-quote {
  position:       relative;
  z-index:        2;
  font-family:    'Noto Serif JP', 'Noto Sans JP', serif;
  font-weight:    700;
  font-size:      18px;
  line-height:    1.8;
  letter-spacing: 1.8px;
  color:          var(--vuln-white);
  text-align:     center;
  padding:        36px 20px 0;
  margin:         0;
}

.sec-vuln-necessity__panel-quote--em {
  font-size:      21.6px;
  letter-spacing: 2.16px;
}

/* ハッカー画像（中央配置） */
.sec-vuln-necessity__hacker,
#contents .sec-vuln-necessity__hacker,
.img100 .sec-vuln-necessity__hacker,
.inner .sec-vuln-necessity__hacker {
  position:  absolute;
  left:      50%;
  top:       100px;
  transform: translateX(-50%);
  width:     540px;
  max-width: 70%;
  height:    auto;
  z-index:   1;
}

/* 浮遊アニメーション */
@keyframes vuln-bubble-float {
  0%,  100% { transform: translate(-50%, -50%) translateY(0); }
  50%        { transform: translate(-50%, -50%) translateY(-14px); }
}

/* 円バブル共通 */
.vuln-necessity__bubble {
  position:        absolute;
  width:           130px;
  height:          130px;
  border-radius:   50%;
  border:          1px solid rgba(255, 255, 255, 0.6);
  background:      rgba(255, 255, 255, 0.08);
  color:           #FFFFFF;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  font-size:       14px;
  font-weight:     700;
  line-height:     1.5;
  z-index:         3;
  transform:       translate(-50%, -50%);
  animation:       vuln-bubble-float 4s ease-in-out infinite;
}

/* 各円の座標と浮遊タイミング */
.vuln-necessity__bubble--1 { left: 32%; top: 44%; animation-duration: 3.8s; animation-delay: 0s;   } /* 個人情報・機密情報の窃取（左上） */
.vuln-necessity__bubble--2 { left: 22%; top: 74%; animation-duration: 4.2s; animation-delay: 0.7s; } /* 重要システムファイルの破損（左下） */
.vuln-necessity__bubble--3 { left: 68%; top: 42%; animation-duration: 3.5s; animation-delay: 1.4s; } /* 決済システムの改ざん（右上） */
.vuln-necessity__bubble--4 { left: 84%; top: 52%; animation-duration: 4.6s; animation-delay: 0.3s; width: 150px; height: 150px; } /* ランサムウェアによる身代金要求（右上） */
.vuln-necessity__bubble--5 { left: 69%; top: 74%; animation-duration: 3.2s; animation-delay: 1.8s; } /* ウェブサイトの改ざん（右下） */

/* SP用リスク一覧（PCでは非表示） */
.sec-vuln-necessity__risk-list { display: none; }

/* 赤バナー（ビジュアルエリアに40px重なる・両端40px内側） */
.sec-vuln-necessity__panel-banner {
  position:        relative;
  z-index:         5;
  background:      var(--vuln-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          -40px 40px 0;
  padding:         25px 50px;
}

.sec-vuln-necessity__panel-banner p {
  font-size:      20px;
  font-weight:    700;
  line-height:    1.4;
  letter-spacing: 0.5px;
  color:          var(--vuln-white);
  text-align:     center;
  margin:         0;
  white-space:    nowrap;
}

/* ----- SP（767px以下） ----- */
@media (max-width: 767px) {
  .sec-vuln-necessity        { padding: 60px 0; }
  .sec-vuln-necessity__inner { padding: 0 20px; gap: 40px; }

  .sec-vuln-necessity__lead    { font-size: 16px; }
  .sec-vuln-necessity__body    { font-size: 13px; text-align: left; }

  /* SP: 円を非表示 */
  .vuln-necessity__bubble { display: none; }

  /* SP: ビジュアルエリアを高さ自動に */
  .sec-vuln-necessity__visual {
    height:         auto;
    overflow:       visible;
    padding-bottom: 32px;
  }

  /* SP: ハッカー画像を通常フローに */
  .sec-vuln-necessity__hacker,
  #contents .sec-vuln-necessity__hacker,
  .img100 .sec-vuln-necessity__hacker,
  .inner .sec-vuln-necessity__hacker {
    position:  relative;
    left:      auto;
    top:       auto;
    transform: none;
    width:     100%;
    max-width: 100%;
    display:   block;
    margin:    20px auto 0;
  }

  /* SP: リスクリスト表示 */
  .sec-vuln-necessity__risk-list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    list-style:     none;
    padding:        16px 20px 0;
    margin:         0;
  }

  .sec-vuln-necessity__risk-list li {
    color:         var(--vuln-white);
    font-size:     14px;
    font-weight:   700;
    line-height:   1.5;
    text-align:    center;
    padding:       10px 16px;
    border:        1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
  }

  .sec-vuln-necessity__panel-banner { margin: -24px 16px 0; padding: 20px; }
  .sec-vuln-necessity__panel-banner p { font-size: 14px; white-space: normal; }
}


/* ============================================================
   vuln-features — SOMPO CYBER SECURITY 脆弱性診断の特長
   ============================================================ */
.sec-vuln-features *,
.sec-vuln-features *::before,
.sec-vuln-features *::after {
  box-sizing: border-box;
}

.sec-vuln-features {
  background: radial-gradient(50% 50% at 47% 24%, #fff 0%, #eef0f8 100%);
  padding:    80px 0;
  width:      100%;
  overflow-x: hidden;
}

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

/* ----- イラスト＋満足度カードエリア ----- */
.sec-vuln-features__visual {
  position: relative;
  width:    95%;
  height:   400px;
}

/* 右側イラスト */
.sec-vuln-features__illust,
#contents .sec-vuln-features__illust,
.img100 .sec-vuln-features__illust,
.inner .sec-vuln-features__illust {
  position:   absolute;
  top:        -1px;
  right:      0;
  width:      508px;
  height:     493px;
  object-fit: cover;
}

/* 左側：満足度カード */
.sec-vuln-features__card {
  position:      absolute;
  top:           73px;
  left:          66px;
  width:         606px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           20px;
  padding:       30px 0 0;
  background:    var(--vuln-white);
  border-radius: var(--vuln-radius-card);
  box-shadow:    0 5px 10px rgba(187, 187, 187, 0.5);
  overflow:      hidden;
}

.sec-vuln-features__card-body {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  padding:         10px 30px;
  width:           100%;
}

.sec-vuln-features__badge,
#contents .sec-vuln-features__badge,
.img100 .sec-vuln-features__badge,
.inner .sec-vuln-features__badge {
  width:      173px;
  height:     109.5px;
  object-fit: cover;
  flex-shrink: 0;
}

.sec-vuln-features__card-text {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  flex:           1;
}

.sec-vuln-features__card-copy {
  font-family: 'Noto Serif JP', 'Noto Sans JP', serif;
  font-weight: 700;
  font-size:   24px;
  text-align:  center;
  color:       var(--vuln-text);
  margin:      0;
  line-height: 1.5;
}

.sec-vuln-features__card-copy--large {
  font-size:   28.8px;
  line-height: 1.5;
}

.sec-vuln-features__card-note {
  font-size:  12px;
  font-weight: 400;
  color:      var(--vuln-text);
  text-align: right;
  width:      100%;
  margin:     0;
  line-height: 1.6;
}

.sec-vuln-features__card-banner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         14px 10px;
  width:           100%;
  background:      radial-gradient(50% 110% at 50% 30%, #CF002A 0%, #750005 100%);
  font-weight:     500;
  font-size:       18px;
  color:           var(--vuln-white);
  text-align:      center;
  line-height:     1.5;
  margin-bottom:   30px;
}

/* ----- 特長カード3枚 ----- */
.sec-vuln-features__points {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            40px;
  padding-bottom: 60px;
  width:          100%;
}

.sec-vuln-features__cards {
  display:         flex;
  flex-wrap:       wrap;
  gap:             30px;
  justify-content: center;
  width:           100%;
  padding-top:     70px; /* POINTラベル分の余白 */
}

.sec-vuln-features__point-card {
  position:      relative;
  display:       flex;
  flex-direction: column;
  width:         380px;
  gap:           10px;
  padding:       40px 0 20px;
  background:    var(--vuln-white);
  border-radius: var(--vuln-radius-card);
  box-shadow:    0 5px 10px rgba(187, 187, 187, 0.5);
}

/* POINT ラベル（カード上部に突き出る） */
.sec-vuln-features__point-label {
  position:     absolute;
  top:          -50px;
  left:         50%;
  transform:    translateX(-50%);
  width:        125px;
  font-family:  Arial, sans-serif;
  font-weight:  700;
  color:        var(--vuln-primary);
  font-size:    19.2px;
  text-align:   center;
  line-height:  1;
}

.sec-vuln-features__point-text {
  display:   block;
  font-size: 19.2px;
  line-height: 1;
}

.sec-vuln-features__point-num {
  display:     block;
  font-size:   64px;
  line-height: 0.9;
}

/* カードタイトルバー（赤） */
.sec-vuln-features__point-title {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  min-height:      92px;
  padding:         10px 0;
  background:      var(--vuln-primary);
  font-weight:     700;
  font-size:       24px;
  color:           var(--vuln-white);
  text-align:      center;
  line-height:     1.5;
}

/* カード説明文 */
.sec-vuln-features__point-desc {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 25px;
  font-size:       16px;
  font-weight:     400;
  color:           var(--vuln-text);
  text-align:      center;
  line-height:     1.8;
  margin:          0;
}

/* 脚注 */
.sec-vuln-features__note {
  font-size:   12px;
  font-weight: 400;
  color:       var(--vuln-text);
  text-align:  right;
  width:       100%;
  margin:      0;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

/* ----- SP（767px以下） ----- */
@media (max-width: 767px) {
  .sec-vuln-features         { padding: 60px 0; }
  .sec-vuln-features__inner  { padding: 0 20px; gap: 40px; }

  /* SP: イラスト非表示・カードをフロー配置 */
  .sec-vuln-features__visual {
    height:   auto;
    position: static;
  }

  .sec-vuln-features__illust,
  #contents .sec-vuln-features__illust,
  .img100 .sec-vuln-features__illust,
  .inner .sec-vuln-features__illust { display: none; }

  .sec-vuln-features__card {
    position: static;
    width:    100%;
    top:      auto;
    left:     auto;
  }

  .sec-vuln-features__card-body {
    flex-direction: column;
    align-items:    center;
  }

  .sec-vuln-features__card-copy     { font-size: 18px; }
  .sec-vuln-features__card-copy--large { font-size: 22px; }
  .sec-vuln-features__card-banner    { font-size: 14px; }

  .sec-vuln-features__cards { padding-top: 80px; gap: 80px; }

  .sec-vuln-features__point-card { width: 100%; }

  .sec-vuln-features__point-title { font-size: 20px; }
  .sec-vuln-features__point-desc  { font-size: 14px; }

  .sec-vuln-features__note { text-align: left; }
}


/* ============================================================
   vuln-risk — 情報セキュリティリスクと脆弱性診断内容
   ============================================================ */
.sec-vuln-risk *,
.sec-vuln-risk *::before,
.sec-vuln-risk *::after {
  box-sizing: border-box;
}

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

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

/* 赤ピルバッジタイトル */
.sec-vuln-risk__header {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 50px;
  background:      var(--vuln-primary);
  border-radius:   5px;
}

.sec-vuln-risk__header-text {
  font-weight:  700;
  font-size:    28px;
  color:        var(--vuln-white);
  text-align:   center;
  line-height:  calc(40 / 28);
  margin:       0;
}

/* ダイアグラムエリア */
.sec-vuln-risk__diagram-wrap {
  width: 100%;
}

/* SP用Swiper（デフォルト非表示） */
.vuln-risk-swiper { display: none; }

/* イラストを上部に配置し、カード5枚はすべてその下 */
.sec-vuln-risk__diagram {
  position: relative;
  width:    1200px;
  height:   1120px;
  margin:   0 auto;
}

/* 上部イラスト（中央） */
.sec-vuln-risk__illust,
#contents .sec-vuln-risk__illust,
.img100 .sec-vuln-risk__illust,
.inner .sec-vuln-risk__illust {
  position:   absolute;
  top:        0;
  left:       248px;
  width:      704px;
  height:     auto;
  object-fit: cover;
}

/* カード共通 */
.sec-vuln-risk__card {
  display:        flex;
  flex-direction: column;
  width:          382px;
  gap:            20px;
  padding:        20px;
  position:       absolute;
  border-radius:  var(--vuln-radius-card);
  border:         2px solid;
  box-shadow:     0 5px 10px rgba(187, 187, 187, 0.5);
  align-items:    center;
  cursor:         pointer;
  text-decoration: none!important;
  color:          inherit;
  transition:     transform .2s ease-out;
}

/* hover: 拡大 */
.sec-vuln-risk__card:hover {
  transform: scale(1.03);
}

/* hover: アイコンバウンス */
.sec-vuln-risk__card:hover .sec-vuln-risk__icon {
  transform:  scale(1.15) rotate(5deg);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.sec-vuln-risk__icon {
  transition: transform .25s ease;
}

/* 上段（左：WEBアプリ、右：クラウド） */
.sec-vuln-risk__card--webapp {
  top:          260px;
  left:         0;
  border-color: var(--vuln-svc-webapp);
  border-style: solid;
  background:   linear-gradient(0deg, var(--vuln-svc-webapp-bg) 0%, var(--vuln-svc-webapp-bg) 100%),
                #fff;
}

.sec-vuln-risk__card--cloud {
  top:          260px;
  left:         819px;
  border-color: var(--vuln-svc-cloud);
  border-style: solid;
  background:   linear-gradient(0deg, var(--vuln-svc-cloud-bg) 0%, var(--vuln-svc-cloud-bg) 100%),
                #fff;
}

/* 中段（中央：ネットワーク） */
.sec-vuln-risk__card--network {
  top:          460px;
  left:         409px;
  border-color: var(--vuln-svc-network);
  border-style: solid;
  background:   linear-gradient(0deg, var(--vuln-svc-network-bg) 0%, var(--vuln-svc-network-bg) 100%),
                #fff;
}

/* 下段（左：スマホ、右：ペネトレ） */
.sec-vuln-risk__card--smartphone {
  top:          660px;
  left:         0;
  border-color: var(--vuln-svc-smartphone);
  border-style: solid;
  background:   linear-gradient(0deg, var(--vuln-svc-smartphone-bg) 0%, var(--vuln-svc-smartphone-bg) 100%),
                #fff;
}

.sec-vuln-risk__card--pentest {
  top:          660px;
  left:         819px;
  border-color: var(--vuln-svc-pentest);
  border-style: dashed;
  background:   linear-gradient(0deg, var(--vuln-svc-pentest-bg) 0%, var(--vuln-svc-pentest-bg) 100%),
                #fff;
}

/* Swiperスライドのカードは絶対配置を無効化しつつ非表示
   sompo.script.jsがSwiperを初期化するとクローンが外部に飛び出すため
   PC: display:none で完全非表示 / SP: .vuln-risk-swiper 内でのみ表示 */
.swiper-slide.sec-vuln-risk__card {
  display:  none;
  position: static;
  top:      auto;
  left:     auto;
  width:    100%;
}

/* img[src$=".svg"]{width:100%} 上書き — 本番は #contents img にも勝つ必要あり */
.sec-vuln-risk img.sec-vuln-risk__icon,
#contents .sec-vuln-risk img.sec-vuln-risk__icon,
.img100 .sec-vuln-risk img.sec-vuln-risk__icon,
.inner .sec-vuln-risk img.sec-vuln-risk__icon {
  width:  80px;
  height: 80px;
}

/* カラーラベル（pill）
   共通 #contents img の margin:auto が flex 子の img に効くとレイアウトが「2カラム」状に崩れるため打ち消す */
.sec-vuln-risk__label,
#contents .sec-vuln-risk__label,
.img100 .sec-vuln-risk__label,
.inner .sec-vuln-risk__label {
  display:         flex;
  flex-wrap:       nowrap;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         5px 0;
  width:           100%;
  border-radius:   50px;
}

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

.sec-vuln-risk img.sec-vuln-risk__label-icon,
#contents .sec-vuln-risk img.sec-vuln-risk__label-icon,
.img100 .sec-vuln-risk img.sec-vuln-risk__label-icon,
.inner .sec-vuln-risk img.sec-vuln-risk__label-icon {
  display:    block;
  width:      20px;
  height:     20px;
  flex-shrink: 0;
  margin:     0;
}

.sec-vuln-risk__label-text {
  flex:           0 1 auto;
  min-width:      0;
  font-weight:    700;
  font-size:      16px;
  color:          var(--vuln-white);
  letter-spacing: 1px;
  line-height:    1.8;
}

/* カード白ボックス */
.sec-vuln-risk__content {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  padding:        15px;
  width:          100%;
  background:     var(--vuln-white);
  border-radius:  var(--vuln-radius-card);
}

.sec-vuln-risk__type,
#contents .sec-vuln-risk__type,
.img100 .sec-vuln-risk__type,
.inner .sec-vuln-risk__type {
  display:         flex;
  flex-wrap:       nowrap;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding-bottom:  10px;
  width:           100%;
  border-bottom:   1px solid rgba(0, 0, 0, 0.1);
}

.sec-vuln-risk img.sec-vuln-risk__alert-icon,
#contents .sec-vuln-risk img.sec-vuln-risk__alert-icon,
.img100 .sec-vuln-risk img.sec-vuln-risk__alert-icon,
.inner .sec-vuln-risk img.sec-vuln-risk__alert-icon {
  display:     block;
  width:       27.78px;
  height:      25.25px;
  flex-shrink: 0;
  margin:      0;
}

.sec-vuln-risk__type-text {
  flex:           0 1 auto;
  min-width:      0;
  font-size:      16px;
  font-weight:    400;
  color:          var(--vuln-navy);
  letter-spacing: -0.2px;
  line-height:    1.5;
}

.sec-vuln-risk__desc {
  font-size:   14px;
  font-weight: 400;
  color:       var(--vuln-navy);
  text-align:  center;
  line-height: 1.5;
  margin:      0;
}

.sec-vuln-risk__target {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 0;
  width:           100%;
  background:      #f2f2f2;
  font-size:       14px;
  font-weight:     400;
  color:           var(--vuln-navy);
  text-align:      center;
  line-height:     1.5;
}

/* SP（767px以下）：1カラム縦並び・カード内レイアウト変更 */
@media (max-width: 767px) {
  .sec-vuln-risk                { padding: 60px 0; }
  .sec-vuln-risk__inner         { padding: 0 16px; gap: 24px; align-items: stretch; }
  .sec-vuln-risk__header        { align-self: center; }

  .sec-vuln-risk__header { padding: 10px 16px; }
  .sec-vuln-risk__header-text { font-size: 16px; }

  /* イラスト表示（上部に配置） */
  .sec-vuln-risk__illust,
  #contents .sec-vuln-risk__illust,
  .img100 .sec-vuln-risk__illust,
  .inner .sec-vuln-risk__illust {
    display:   block;
    position:  static;
    order:     0;
    width:     100%;
    max-width: 340px;
    margin:    0 auto;
    height:    auto;
  }

  /* __diagramはイラスト表示のみ（カードはSwiper側で表示） */
  .sec-vuln-risk__diagram {
    position: static;
    width:    100%;
    height:   auto;
    display:  block;
  }
  .sec-vuln-risk__diagram .sec-vuln-risk__card { display: none; }

  /* Swiperカルーセル */
  .vuln-risk-swiper {
    display:        block;
    overflow:       clip; /* hiddenだとスクロールコンテナになりタップ時にズレるため */
    width:          100%;
    padding-bottom: 36px;
  }
  .vuln-risk-swiper .swiper-slide {
    height: auto;
    box-sizing: border-box;
  }
  /* SP Swiper内ではリフトを無効化（clip上端で見切れるため） */
  .vuln-risk-swiper .sec-vuln-risk__card:hover {
    transform: none;
    box-shadow: none;
  }
  /* アイコンを小さくしてラベル列を広げる */
  .vuln-risk-swiper img.sec-vuln-risk__icon,
  #contents .vuln-risk-swiper img.sec-vuln-risk__icon,
  .img100 .vuln-risk-swiper img.sec-vuln-risk__icon,
  .inner .vuln-risk-swiper img.sec-vuln-risk__icon {
    width:  48px;
    height: 48px;
  }
  .vuln-risk-swiper .sec-vuln-risk__label-text { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
  .vuln-risk-swiper .sec-vuln-risk__label { padding: 6px 8px; }
  .vuln-risk-swiper .sec-vuln-risk__card {
    display:               grid; /* .swiper-slide.sec-vuln-risk__card の display:none を上書き */
    grid-template-columns: 48px 1fr;
  }
  .vuln-risk-swiper .swiper-pagination-bullet-active {
    background: var(--vuln-primary);
  }

  /* カード内部：アイコン＋ラベルを横並び → コンテンツを下に */
  .sec-vuln-risk__card {
    position:              static;
    width:                 100%;
    display:               grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows:    auto auto;
    gap:                   12px 16px;
    padding:               16px;
  }

  /* アイコン：左列1行目 */
  .sec-vuln-risk img.sec-vuln-risk__icon,
  #contents .sec-vuln-risk img.sec-vuln-risk__icon,
  .img100 .sec-vuln-risk img.sec-vuln-risk__icon,
  .inner .sec-vuln-risk img.sec-vuln-risk__icon {
    grid-column: 1;
    grid-row:    1;
    width:       64px;
    height:      64px;
    align-self:  center;
  }

  /* ラベルpill：右列1行目 */
  .sec-vuln-risk__label {
    grid-column: 2;
    grid-row:    1;
    align-self:  center;
    padding:     6px 12px;
  }

  .sec-vuln-risk__label-text {
    font-size:      14px;
    letter-spacing: 0.5px;
    line-height:    1.4;
  }

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

  /* コンテンツ：全幅で2行目 */
  .sec-vuln-risk__content {
    grid-column: 1 / 3;
    grid-row:    2;
    padding:     12px;
  }

  .sec-vuln-risk__type-text {
    font-size: 14px;
  }

  .sec-vuln-risk__desc {
    font-size: 13px;
  }

  .sec-vuln-risk__target {
    font-size: 12px;
    padding:   8px;
  }

  /* 表示順：デザインに合わせて並び替え */
  .sec-vuln-risk__card--webapp     { order: 1; }
  .sec-vuln-risk__card--network    { order: 2; }
  .sec-vuln-risk__card--cloud      { order: 3; }
  .sec-vuln-risk__card--smartphone { order: 4; }
  .sec-vuln-risk__card--pentest    { order: 5; }
}


/* ============================================================
   vuln-cta（上） — 複数サービス組み合わせCTA
   ============================================================ */
.sec-vuln-cta *,
.sec-vuln-cta *::before,
.sec-vuln-cta *::after {
  box-sizing: border-box;
}

.sec-vuln-cta {
  background: var(--vuln-primary);
  padding:    0 0 100px;
  position:   relative;
  overflow-x: hidden;
}

/* 上部三角デコレーション（CSSで実装） */
.sec-vuln-cta::before {
  content:   '';
  display:   block;
  width:     0;
  height:    0;
  border-left:  43px solid transparent;
  border-right: 43px solid transparent;
  border-top:   33px solid var(--vuln-white);
  margin:       0 auto;
}

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

.sec-vuln-cta__heading {
  font-weight:  700;
  font-size:    28px;
  color:        var(--vuln-white);
  text-align:   center;
  line-height:  calc(40 / 28);
  margin:       0;
  width:        100%;
}

/* 白カード */
.sec-vuln-cta__card {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  padding:         20px 40px;
  width:           100%;
  background:      var(--vuln-white);
  border-radius:   20px;
}

.sec-vuln-cta__illust,
#contents .sec-vuln-cta__illust,
.img100 .sec-vuln-cta__illust,
.inner .sec-vuln-cta__illust {
  width:       224px;
  height:      auto;
  object-fit:  cover;
  flex-shrink: 0;
}

/* 中央エリア */
.sec-vuln-cta__center {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            20px;
  flex:           1;
  min-width:      0; /* flex-itemのmin-width:autoを解除しイラストへの食み出しを防ぐ */
}

/* サービス名バナー + サブタイトルバッジ */
.sec-vuln-cta__banner-wrap {
  position: relative;
  width:    100%;
  height:   120px;
}

.sec-vuln-cta__banner {
  position:        absolute;
  top:             27px;
  left:            50%;
  transform:       translateX(-50%);
  width:           100%;      /* banner-wrap幅に追従 */
  max-width:       560px;     /* PC最大幅 */
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px 0 10px;
  background:      var(--vuln-primary);
  border-radius:   5px;
}

.sec-vuln-cta__banner-text {
  font-weight:  700;
  font-size:    36px;
  color:        var(--vuln-white);
  text-align:   center;
  line-height:  calc(48 / 36);
}

.sec-vuln-cta__subtitle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0 30px;
  position:        absolute;
  top:             14px;
  left:            50%;
  transform:       translateX(-50%);
  max-width:       100%;      /* banner-wrap幅を超えないよう制限 */
  background:      var(--vuln-white);
  border-radius:   50px;
  border:          1px solid var(--vuln-primary);
  font-weight:     700;
  font-size:       16px;
  color:           var(--vuln-primary);
  text-align:      center;
  line-height:     26px;
  white-space:     nowrap;
  z-index:         1;
}

/* バッジ3枚 */
.sec-vuln-cta__badges {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  width:           100%; /* centerエリア幅に追従 */
  gap:             9px;
}

.sec-vuln-cta__badges img,
#contents .sec-vuln-cta__badges img,
.img100 .sec-vuln-cta__badges img,
.inner .sec-vuln-cta__badges img {
  flex:       1;
  width:      calc((100% - 18px) / 3); /* 3枚均等・gap(9px×2)を除いた幅 */
  max-width:  180px;
  height:     auto;
  object-fit: cover;
}

/* 右：ボタンエリア */
.sec-vuln-cta__buttons {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            15px;
  flex-shrink:    0;
}

.sec-vuln-cta__buttons-heading {
  font-weight:  700;
  font-size:    28px;
  color:        var(--vuln-navy);
  text-align:   center;
  line-height:  calc(40 / 28);
  width:        100%;
  margin:       0;
}

.sec-vuln-cta__buttons .vuln-btn {
  width: 100%;
}

/* SP（767px以下） */
@media (max-width: 767px) {
  .sec-vuln-cta         { padding: 0 0 60px; }
  .sec-vuln-cta__inner  { padding: 40px 20px 0; gap: 30px; }

  .sec-vuln-cta__heading { font-size: 20px; }

  .sec-vuln-cta__card {
    flex-direction: column;
    padding:        20px;
  }

  .sec-vuln-cta__illust,
  #contents .sec-vuln-cta__illust,
  .img100 .sec-vuln-cta__illust,
  .inner .sec-vuln-cta__illust { width: 160px; }

  .sec-vuln-cta__banner-wrap { height: auto; }

  .sec-vuln-cta__banner {
    position:  static;
    transform: none;
    width:     100%;
  }

  .sec-vuln-cta__banner-text { font-size: 24px; }

  .sec-vuln-cta__subtitle {
    position:  static;
    transform: none;
    margin-bottom: 10px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
  }

  .sec-vuln-cta__center { order: 2; width: 100%; }
  .sec-vuln-cta__buttons { order: 3; align-items: stretch; width: 100%; }
  .sec-vuln-cta__illust,
  #contents .sec-vuln-cta__illust,
  .img100 .sec-vuln-cta__illust,
  .inner .sec-vuln-cta__illust { order: 1; }

  .sec-vuln-cta__buttons-heading { font-size: 20px; }

  /* バッジ3枚：幅100%で均等分割 */
  .sec-vuln-cta__badges {
    width: 100%;
  }
  .sec-vuln-cta__badges img,
  #contents .sec-vuln-cta__badges img,
  .img100 .sec-vuln-cta__badges img,
  .inner .sec-vuln-cta__badges img {
    flex:      1;
    max-width: none;
    width:     calc((100% - 18px) / 3);
    object-fit: contain;
  }

  /* subtitleピル：高さ自動・padding調整 */
  .sec-vuln-cta__subtitle {
    display:    block;
    width:      100%;
    padding:    8px 16px;
    text-align: center;
    line-height: 1.5;
  }
}


/* ============================================================
   vuln-services — 脆弱性診断サービス一覧
   スコープ: .sec-vuln-services
   ============================================================ */
.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;
}

/* ---------- 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;
}

/* sompo.common.css の a タグ色上書き */
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;
  /* box-shadow:  0 5px 10px rgba(187, 187, 187, 0.5); */
  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（〜599px） ---------- */
@media (max-width: 767px) {
  .sec-vuln-services {
    padding: 60px 0;
  }

  .sec-vuln-services__inner {
    padding: 0 16px;
    gap:     40px;
  }

  /* SP: 1カラムに変更 */
  .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;
  }
}


/* ============================================================
   vuln-case — 診断事例
   ============================================================ */
.sec-vuln-case *,
.sec-vuln-case *::before,
.sec-vuln-case *::after { box-sizing: border-box; }

.sec-vuln-case {
  background: rgba(3, 38, 71, 0.03);
  padding:    80px 0;
  overflow-x: hidden;
}

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

/* ---------- 白カード ---------- */
.sec-vuln-case__card {
  display:        flex;
  flex-direction: column;
  gap:            50px;
  padding:        60px;
  width:          100%;
  background:     var(--vuln-white);
  border-radius:  var(--vuln-radius-card);
  box-shadow:     0 5px 10px rgba(187, 187, 187, 0.5);
}

/* ---------- 上段 ---------- */
.sec-vuln-case__top {
  display:     flex;
  flex-wrap:   wrap;
  gap:         40px;
  align-items: flex-start;
  width:       100%;
}

.sec-vuln-case__left {
  display:        flex;
  flex-direction: column;
  gap:            32px;
  flex:           1;
  min-width:      280px;
}

/* Case / 社名 タイトル */
.sec-vuln-case__title {
  display:     flex;
  align-items: center;
  gap:         20px;
}

.sec-vuln-case__title-en {
  font-family:    Arial, sans-serif;
  font-weight:    700;
  font-size:      38px;
  color:          var(--vuln-navy);
  line-height:    1;
}

.sec-vuln-case__title-sep {
  display:    block;
  width:      1px;
  height:     30px;
  background: var(--vuln-navy);
  flex-shrink: 0;
}

.sec-vuln-case__title-company {
  font-weight:    700;
  font-size:      22px;
  color:          var(--vuln-navy);
  line-height:    1.5;
}

/* 背景ボックス */
.sec-vuln-case__bg-box {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.sec-vuln-case__bg-label {
  display:        inline-flex;
  align-items:    center;
  width:          fit-content; /* BlueMonkeyがdisplay:blockに上書きしても全幅にならないよう固定 */
  padding:        0 16px;
  background:     var(--vuln-navy);
  color:          var(--vuln-white);
  font-weight:    700;
  font-size:      16px;
  letter-spacing: 4px;
  line-height:    2;
}

.sec-vuln-case__bg-text {
  font-weight:  500;
  font-size:    15px;
  color:        var(--vuln-navy);
  line-height:  1.8;
  margin:       0;
}

/* 環境図 */
.sec-vuln-case__env {
  display:     flex;
  align-items: flex-end;
  gap:         20px;
  flex-wrap:   wrap;
  justify-content: center;
  padding:     20px 0;
}

.sec-vuln-case__env-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
}

.sec-vuln-case__env-img,
#contents .sec-vuln-case__env-img,
.img100 .sec-vuln-case__env-img,
.inner .sec-vuln-case__env-img {
  width:      140px;
  height:     auto;
  object-fit: contain;
}

.sec-vuln-case__env-img--tall,
#contents .sec-vuln-case__env-img--tall,
.img100 .sec-vuln-case__env-img--tall,
.inner .sec-vuln-case__env-img--tall {
  width: 140px;
}

.sec-vuln-case__env-label {
  font-weight: 700;
  font-size:   15px;
  color:       var(--vuln-navy);
}

.sec-vuln-case__env-arrow {
  font-size:   28px;
  color:       var(--vuln-navy);
  align-self:  center;
  flex-shrink: 0;
}

/* BlueMonkeyが<span class="fa-solid fa-chevron-right">を削除するため
   フレックスコンテナの::afterで矢印を代替（orderで2アイテムの間に挿入） */
.sec-vuln-case__env::after {
  content:     '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size:   28px;
  color:       var(--vuln-navy);
  align-self:  center;
  flex-shrink: 0;
  order:       1; /* 1番目のenv-item(order:0デフォルト)の後、2番目(order:2)の前 */
}

.sec-vuln-case__env-item:last-child {
  order: 2;
}

/* ---------- 下段 ---------- */
.sec-vuln-case__bottom {
  display:        flex;
  flex-direction: column;
  gap:            30px;
  width:          100%;
}

/* 「提供サービス」ラベル */
.sec-vuln-case__services-label {
  display:        flex;
  align-items:    center;
  padding:        8px 24px;
  background:     var(--vuln-navy);
  color:          var(--vuln-white);
  font-weight:    700;
  font-size:      18px;
  letter-spacing: 1px;
  line-height:    2;
}

/* 診断フロー図エリア */
.sec-vuln-case__diagram-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  width:          100%;
}

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

.sec-vuln-case__chevron-down {
  font-size: 28px;
  color:     var(--vuln-navy);
}

/* 検出事項ボックス */
.sec-vuln-case__detection {
  display:        flex;
  flex-direction: column;
  width:          100%;
  border:         2px solid var(--vuln-primary);
}

.sec-vuln-case__detection-label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         8px 24px;
  background:      var(--vuln-primary);
  color:           var(--vuln-white);
  font-weight:     700;
  font-size:       18px;
  letter-spacing:  1px;
  line-height:     2;
}

.sec-vuln-case__detection-items {
  display:     flex;
  flex-wrap:   wrap;
  align-items: stretch;
  padding:     30px;
  gap:         0;
  width:       100%;
}

.sec-vuln-case__det-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  flex:           1;
  min-width:      200px;
  padding:        0 20px;
}

/* 区切り線 */
.sec-vuln-case__det-sep {
  width:      1px;
  background: rgba(0, 0, 0, 0.15);
  align-self: stretch;
  flex-shrink: 0;
}

.sec-vuln-case__det-title {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         4px 20px;
  width:           100%;
  border:          1px solid var(--vuln-primary);
  color:           var(--vuln-primary);
  font-weight:     700;
  font-size:       15px;
  text-align:      center;
  line-height:     2;
}

.sec-vuln-case__det-subtitle {
  font-weight: 700;
  font-size:   14px;
  color:       var(--vuln-navy);
  text-align:  center;
  line-height: 1.6;
}

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

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .sec-vuln-case { padding: 60px 0; }

  .sec-vuln-case__inner { padding: 0 16px; gap: 40px; }

  .sec-vuln-case__card {
    padding:    28px 20px;
    gap:        36px;
  }

  .sec-vuln-case__title-en { font-size: 28px; }

  .sec-vuln-case__env { width: 100%; flex-wrap: nowrap; gap: 12px; justify-content: center; }
  .sec-vuln-case__env-img,
  #contents .sec-vuln-case__env-img,
  .img100 .sec-vuln-case__env-img,
  .inner .sec-vuln-case__env-img { width: 100px; }
  .sec-vuln-case__env-img--tall,
  #contents .sec-vuln-case__env-img--tall,
  .img100 .sec-vuln-case__env-img--tall,
  .inner .sec-vuln-case__env-img--tall { width: 100px; }
  .sec-vuln-case__env-arrow { font-size: 22px; }
  .sec-vuln-case__env::after { font-size: 22px; }
  .sec-vuln-case__det-sep  { display: none; }

  .sec-vuln-case__det-item {
    width:      100%;
    padding:    16px 0;
    border-bottom: 1px solid rgba(0,0,0,.1);
  }

  .sec-vuln-case__det-item:last-child { border-bottom: none; }

  .sec-vuln-case__detection-items { padding: 20px 16px; }
}


/* ============================================================
   vuln-services-lead — 事例リード文
   ============================================================ */
.sec-vuln-services-lead *,
.sec-vuln-services-lead *::before,
.sec-vuln-services-lead *::after { box-sizing: border-box; }

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

.sec-vuln-services-lead__inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 40px;
}

.sec-vuln-services-lead__content {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             50px;
}

.sec-vuln-services-lead__text {
  flex:        1;
  min-width:   260px;
  font-weight: 400;
  font-size:   16px;
  color:       var(--vuln-text);
  line-height: 1.8;
  text-align:  center;
  margin:      0;
}

.sec-vuln-services-lead__illust,
#contents .sec-vuln-services-lead__illust,
.img100 .sec-vuln-services-lead__illust,
.inner .sec-vuln-services-lead__illust {
  width:     165px;
  height:    auto;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .sec-vuln-services-lead { padding: 48px 0; }
  .sec-vuln-services-lead__inner { padding: 0 16px; }
  .sec-vuln-services-lead__text  { font-size: 14px; text-align: left; }
  .sec-vuln-services-lead__illust,
  #contents .sec-vuln-services-lead__illust,
  .img100 .sec-vuln-services-lead__illust,
  .inner .sec-vuln-services-lead__illust { width: 120px; }
}


/* ============================================================
   タブレット中間補正（768px〜1100px）
   PC固定幅レイアウトが狭いビューポートで崩れる箇所を補正
   ============================================================ */
@media (min-width: 768px) and (max-width: 1100px) {

  .vuln-subnav__item--mega {
    position: static;
  }
  .vuln-subnav__mega {
    left:      0;
    right:     0;
    width:     100%;
    transform: translateY(-10px);
  }
  .vuln-subnav__item--mega:hover .vuln-subnav__mega {
    transform: translateY(0);
  }

  /* ----- vuln-necessity: バナーテキスト折り返し ----- */
  .sec-vuln-necessity__panel-banner p { white-space: normal; }

  /* ----- vuln-hero: badge→copy→illust→sub→btns の縦積みレイアウト ----- */
  .sec-vuln-hero {
    padding: 48px 40px;
  }
  .sec-vuln-hero__inner {
    flex-direction: column;
    align-items:    center;
    gap:            20px;
    max-width:      640px;
    margin:         0 auto;
  }
  /* __left のボックスを消して子要素を __inner の直接の子として扱う */
  .sec-vuln-hero__left {
    display: contents;
  }
  .sec-vuln-hero__badge {
    order:     1;
    font-size: 43px;
    padding:   10px 40px;
    width: 100%;
  }
  .sec-vuln-hero__copy {
    order:      2;
    font-size:  36px;
    text-align: center;
    width:      100%;
  }
  .sec-vuln-hero__copy br { display: none; }
  .sec-vuln-hero__rule  { display: none; }
  .sec-vuln-hero__right {
    order:     3;
    width:     100%;
    max-width: 480px;
  }
  .sec-vuln-hero__sub {
    order:      4;
    text-align: center;
    font-size:  15px;
    width:      100%;
  }
  .sec-vuln-hero__btns {
    order:           5;
    flex-direction:  row;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             12px;
    width:           100%;
  }
  .sec-vuln-hero__btns .vuln-btn {
    width:      auto;
    min-width:  180px;
    height:     48px;
    min-height: unset;
    padding:    0 24px;
    white-space: nowrap;
  }

    .sec-vuln-features__inner {
    padding: 0 40px;
  }
  .sec-vuln-features__visual {
    position: relative;
    display:  flex;
    flex-direction: row-reverse; /* イラスト右・カード左 */
    align-items: center;
    gap:      0;
    height:   auto;
    min-height: 280px;
  }
  .sec-vuln-features__illust,
  #contents .sec-vuln-features__illust,
  .img100 .sec-vuln-features__illust,
  .inner .sec-vuln-features__illust {
    position:  static;
    width:     300px;
    height:    auto;
    flex-shrink: 0;
    margin-right: -20px; /* カードに少し重なる */
  }
  .sec-vuln-features__card {
    position:  static;
    flex:      1;
    width:     auto;
    max-width: 450px;
    margin:    0;
    padding:   20px 0 0;
  }
  .sec-vuln-features__card-body  { padding: 8px 20px; }
  .sec-vuln-features__badge,
  #contents .sec-vuln-features__badge,
  .img100 .sec-vuln-features__badge,
  .inner .sec-vuln-features__badge { width: 110px; height: auto; }
  .sec-vuln-features__card-copy  { font-size: 16px; }
  .sec-vuln-features__card-copy--large { font-size: 20px; }
  .sec-vuln-features__card-banner { font-size: 13px; padding: 10px 16px; }

  /* ----- vuln-features cards: 3カラムグリッド ----- */
  .sec-vuln-features__cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
    padding-top:           0;
  }
  .sec-vuln-features__point-card {
    width: 100%;
  }
  .sec-vuln-features__point-label {
    top:   -30px;
    width: 100px;
  }
  .sec-vuln-features__point-text { font-size: 12px; }
  .sec-vuln-features__point-num  { font-size: 44px; }
  .sec-vuln-features__point-title { font-size: 18px; padding: 0 12px; }
  .sec-vuln-features__point-desc  { font-size: 14px; padding: 0 12px 16px; }
  .sec-vuln-features__point-card { gap: 20px; padding: 40px 0 10px; }

  /* ----- vuln-risk: SP同様の1カラム縦並びに ----- */
  .sec-vuln-risk__inner {
    padding: 0 40px;
    gap:     24px;
    align-items: stretch;
  }
  .sec-vuln-risk__header      { align-self: center; }
  .sec-vuln-risk__header-text { font-size: 18px; }
  .sec-vuln-risk__illust,
  #contents .sec-vuln-risk__illust,
  .img100 .sec-vuln-risk__illust,
  .inner .sec-vuln-risk__illust {
    display:      block;
    position:     static;
    grid-column:  1 / 3;
    order:        0;
    width:        100%;
    max-width:    480px;
    margin:       0 auto;
    height:       auto;
  }

  .sec-vuln-risk__diagram {
    position:              static;
    width:                 100%;
    height:                auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    margin:                0;
  }

  .sec-vuln-risk__card {
    position:              static;
    width:                 100%;
    display:               grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows:    auto auto;
    gap:                   12px 16px;
    padding:               16px;
  }

  .sec-vuln-risk img.sec-vuln-risk__icon,
  #contents .sec-vuln-risk img.sec-vuln-risk__icon,
  .img100 .sec-vuln-risk img.sec-vuln-risk__icon,
  .inner .sec-vuln-risk img.sec-vuln-risk__icon {
    grid-column: 1; grid-row: 1;
    width: 64px; height: 64px; align-self: center;
  }
  .sec-vuln-risk__label {
    grid-column: 2; grid-row: 1;
    align-self: center; padding: 6px 12px;
  }
  .sec-vuln-risk__label-text  { font-size: 12px; letter-spacing: 0; }
  .sec-vuln-risk img.sec-vuln-risk__label-icon,
  #contents .sec-vuln-risk img.sec-vuln-risk__label-icon,
  .img100 .sec-vuln-risk img.sec-vuln-risk__label-icon,
  .inner .sec-vuln-risk img.sec-vuln-risk__label-icon {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
  }
  .sec-vuln-risk__content     { grid-column: 1 / 3; grid-row: 2; padding: 12px; }
  .sec-vuln-risk__type-text   { font-size: 14px; }
  .sec-vuln-risk__desc        { font-size: 13px; }
  .sec-vuln-risk__target      { font-size: 12px; padding: 8px; }

  .sec-vuln-risk__card--webapp     { order: 1; }
  .sec-vuln-risk__card--network    { order: 2; }
  .sec-vuln-risk__card--cloud      { order: 3; }
  .sec-vuln-risk__card--smartphone { order: 4; }
  .sec-vuln-risk__card--pentest    { order: 5; grid-column: 1 / 3; justify-self: center; width: calc(50% - 8px); }

  /* ----- 共通見出し ----- */
  .vuln-sec-heading {
    font-size: 28px;
  }

  /* ----- vuln-necessity ----- */
  .sec-vuln-necessity__inner {
    padding: 0 40px;
  }
  .vuln-necessity__bubble--1 { left: 20%; } /* タブレットで少し左に移動 */

  /* ----- vuln-case ----- */
  .sec-vuln-case__env { width: 100%; }

  /* 検出事項: タブレットでも1カラム */
  .sec-vuln-case__detection-items { flex-direction: column; }
  .sec-vuln-case__det-sep { width: 100%; height: 1px; align-self: auto; }
  .sec-vuln-case__det-item { flex: none; min-width: 0; padding: 20px; }

  /* ----- vuln-services: 1カラムに変更 ----- */
  .sec-vuln-services__inner { padding: 0 40px; }

  .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;
  }

  .sec-vuln-services__pentest-hl { font-size: 20px; }

  /* ----- vuln-cta: タブレットレイアウト ----- */
  .sec-vuln-cta__inner  { padding: 60px 40px 0; gap: 40px; }

  /* カード: 上段(illust+center横並び) / 下段(buttons全幅) */
  .sec-vuln-cta__card {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    padding:     30px;
    gap:         20px 24px;
  }

  /* ① イラストを上段左 */
  .sec-vuln-cta__illust,
  #contents .sec-vuln-cta__illust,
  .img100 .sec-vuln-cta__illust,
  .inner .sec-vuln-cta__illust {
    order:       1;
    width:       180px;
    flex-shrink: 0;
  }

  /* ② バナー＋バッジを上段右 */
  .sec-vuln-cta__center {
    order:     2;
    flex:      1;
    min-width: 0;
    max-width: none;
  }

  .sec-vuln-cta__banner-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center; /* subtitle・banner両方を中央寄せ */
    height:         auto;
    width:          100%;
  }

  .sec-vuln-cta__banner {
    position:  static;
    transform: none;
    width:     100%;
    padding:   10px 0 8px;
  }

  .sec-vuln-cta__banner-text { font-size: 24px; }

  .sec-vuln-cta__subtitle {
    display:    inline-flex; /* align-items:centerに従う */
    position:   static;
    transform:  none;
    width:      fit-content;
    margin:     0 0 8px;
    white-space: normal;
    text-align: center;
    font-size:  12px;
  }

  .sec-vuln-cta__badges { width: 100%; }
  .sec-vuln-cta__badges img,
  #contents .sec-vuln-cta__badges img,
  .img100 .sec-vuln-cta__badges img,
  .inner .sec-vuln-cta__badges img {
    flex: 1; max-width: none;
    width: calc((100% - 12px) / 3);
    object-fit: contain;
  }

  /* ③ ボタンエリアを下段・全幅 */
  .sec-vuln-cta__buttons {
    order:       3;
    width:       100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:         16px;
  }

  .sec-vuln-cta__buttons-heading { font-size: 20px; text-align: left; white-space: nowrap; flex-shrink: 0; width: auto; }
  .sec-vuln-cta__buttons .vuln-btn { width: auto; min-width: 160px; flex: 1; max-width: 220px; }
}

.page_vulnerability-assessment .media-recommend-service-wrap {
  text-align: start !important;
  max-width: 1064px;
  margin: 0 auto;
}