/* ============================================================
   vulnerability-common.css
   脆弱性診断サービス LP共通CSS（サービストップ + 下層ページで共有）
   スコープ: .vuln-* / .sec-vuln-* / .page_vulnerability-*
   前提: Noto Sans JP・共通reset は BlueMonkey 側で読み込み済み
   生成日: 2026-05-19（vulnerability.css から機械的に分離）
   ============================================================ */

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

/* モディファイア: 1行アンカーラベル用の高さ確保（2行メニュー時のバー太さに合わせる） */
.vuln-subnav--anchor .vuln-subnav__link {
  min-height: 60px;
}

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

/* ============================================================
   タブレット中間補正（共通コンポーネント分: subnav）
   ============================================================ */
@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-cta（複数サービス組み合わせCTA / 大型バリアント含む）
   ※ 全コードはサービストップ (vulnerability.css) を「正」として複写。
     base + SP + tablet までを Single Source of Truth として
     ここに集約。両 LP は本ファイルを参照すれば同一の挙動になる。
   ※ 参考: WEBアプリ診断ページの「事業の未来を…」CTA(大型) のため
     `--large` modifier も後段で定義する。
   ============================================================ */
.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%;
}

/* WEBアプリ診断ページ用の大型バリアント lead-heading 兼用 */
.sec-vuln-cta__lead-heading {
  font-weight:  700;
  font-size:    28px;
  color:        var(--vuln-white);
  text-align:   center;
  line-height:  calc(40 / 28);
  margin:       0 0 50px;
}

/* 白カード */
.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;
}

/* サービス名バナー + サブタイトルバッジ */
.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%;
  max-width:       560px;
  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%;
  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%;
  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,
.sec-vuln-cta__badges .sec-vuln-cta__badge-img {
  flex:       1;
  width:      calc((100% - 18px) / 3);
  max-width:  180px;
  height:     auto;
  object-fit: contain;
}

/* 右：ボタンエリア */
.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%;
}

/* ---------- 大型バリアント（--large） ---------- */
.sec-vuln-cta--large {
  position:   relative;
  padding:    80px 0 100px;
  background: var(--vuln-primary);
}

.sec-vuln-cta--large::before {
  content:       "";
  display:       block;
  position:      absolute;
  top:           0;
  left:          50%;
  transform:     translateX(-50%);
  width:         0;
  height:        0;
  border-left:   43px solid transparent;
  border-right:  43px solid transparent;
  border-top:    33px solid var(--vuln-white);
  margin:        0;
}

/* 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__lead-heading { font-size: 20px; line-height: 1.5; margin: 0 16px 28px; }

  .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; order: 1; }

  .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;
    display:    block;
    width:      100%;
    padding:    8px 16px;
    margin-bottom: 10px;
    font-size:  13px;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }

  .sec-vuln-cta__center  { order: 2; width: 100%; }
  .sec-vuln-cta__buttons { order: 3; align-items: stretch; width: 100%; }

  .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,
  .sec-vuln-cta__badges .sec-vuln-cta__badge-img {
    flex:      1;
    max-width: none;
    width:     calc((100% - 18px) / 3);
    object-fit: contain;
  }

  /* 大型CTA SP: 三角 */
  .sec-vuln-cta--large           { padding: 36px 0 56px; }
  .sec-vuln-cta--large::before   {
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-top:  20px solid var(--vuln-white);
  }
}

/* タブレット（768〜1100px） — サービストップから完全複写 */
@media (min-width: 768px) and (max-width: 1100px) {
  .sec-vuln-cta__inner  { padding: 60px 40px 0; gap: 40px; }

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

  /* 大型CTA タブレット: 三角 */
  .sec-vuln-cta--large           { padding: 56px 0 80px; }
  .sec-vuln-cta--large::before   {
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top:  26px solid var(--vuln-white);
  }
  .sec-vuln-cta__lead-heading    { font-size: 24px; line-height: 1.45; margin: 0 24px 36px; }
}

/* ============================================================
   BlueMonkey CMS が body 直下に出力する recommend-service-wrap の
   左寄せ & 最大幅補正（サービストップ + 下層ページ共通） */
.page_vulnerability-assessment .media-recommend-service-wrap {
  text-align: start !important;
  max-width:  1064px;
  margin:     0 auto;
}