/* =============================================
   common-design.css  |  SOMPO CYBER SECURITY 共通デザインシステム
   全ページで共有する CSS 変数・コンポーネント
   カラーパレット: Red #c41623 / Navy #032647
   ============================================= */

/* ── CSS 変数 ───────────────────────────────── */
:root {
  --oc-red   : #c41623;
  --oc-navy  : #032647;
  --oc-text  : #161c2d;
  --oc-light : #f5f7fa;
  --oc-border: #dde0e5;
  --oc-ease  : cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── ヒーローセクション ─────────────────────── */
/* 背景画像は各ページの HTML で style 属性に直接指定する
   例: style="background: url('/dcms_media/image/xxx.jpg') no-repeat center / cover;" */
.oc-hero {
  position  : relative;
  width     : 100%;
  overflow  : hidden;
  background: var(--oc-navy);
}

/* .full-width の負マージン(calc(-50vw + 50%))はスクロールバー幅分ずれてヒーローが左にずれる。
   width: 100vw + margin: 0 で直接全幅を確保し、overflow-x: hidden(各ページCSS)で吸収する */
.page-header.oc-hero {
  width        : 100vw;
  margin-left  : 0;
  margin-right : 0;
  padding-left : 0;
  padding-right: 0;
}

/* page-header__inner 上書き */
.page-header.oc-hero .page-header__inner {
  max-width      : none;
  margin-left    : 0;
  margin-right   : 0;
  min-height     : clamp(300px, 38vw, 520px);
  justify-content: flex-start;
  align-items    : center;
  padding-top    : 130px;
  padding-bottom : clamp(40px, 6vw, 72px);
  padding-left   : max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px)));
  padding-right  : max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px)));
  position       : relative;
  z-index        : 2;
}

.page-header.oc-hero .page-header__body {
  text-align: left;
}

/* グラデーションオーバーレイ */
.oc-hero::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    110deg,
    rgba(3, 38, 71, 0.82) 0%,
    rgba(3, 38, 71, 0.48) 55%,
    rgba(3, 38, 71, 0.12) 100%
  );
  z-index: 1;
}

/* 英語ラベル */
.oc-hero-en {
  display       : block;
  font-family   : 'IBM Plex Sans', sans-serif;
  font-size     : clamp(10px, 0.9vw, 13px);
  font-weight   : 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color         : var(--oc-red);
  margin-bottom : 8px;
}

/* h1 上書き */
.page-header.oc-hero .page-header__title {
  text-align: left;
  font-size : clamp(28px, 3.8vw, 52px);
}

/* CTA ボタン */
a.oc-hero-cta {
  display         : inline-flex;
  align-items     : center;
  gap             : 10px;
  padding         : 12px 24px;
  background-color: var(--oc-red);
  color           : #fff !important;
  font-family     : 'Noto Sans JP', sans-serif;
  font-size       : clamp(12px, 1vw, 14px);
  font-weight     : 700;
  text-decoration : none !important;
  letter-spacing  : 0.04em;
  border          : 2px solid var(--oc-red);
  margin-top      : 24px;
  transition      : background-color 0.25s var(--oc-ease),
                    color 0.25s var(--oc-ease);
}

a.oc-hero-cta::after {
  content     : '';
  display     : block;
  width       : 7px;
  height      : 7px;
  border-top  : 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform   : translateX(0px) rotate(45deg);
  flex-shrink : 0;
  transition  : transform 0.35s ease-out;
}

a.oc-hero-cta:hover,
a.oc-hero-cta:focus-visible {
  background-color: #a81220;
  border-color    : #a81220;
  outline-offset  : 3px;
}

a.oc-hero-cta:hover::after,
a.oc-hero-cta:focus-visible::after {
  transform: translateX(6px) rotate(45deg);
}

/* ── コンテナ ───────────────────────────────── */
.oc-container {
  max-width     : 960px;
  margin-inline : auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* ── セクション見出し ────────────────────────── */
.oc-section-heading {
  padding   : 56px 0 36px;
  border-top: 4px solid var(--oc-red);
}

.oc-section-heading .oc-label {
  display       : block;
  font-family   : 'IBM Plex Sans', sans-serif;
  font-size     : 11px;
  font-weight   : 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color         : var(--oc-red);
  margin-bottom : 6px;
}

.oc-section-heading h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size  : clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color      : var(--oc-navy);
  margin     : 0;
  padding    : 0;
  border     : none;
}

/* ── スクリーンリーダー専用テキスト ─────────── */
.oc-sr-only {
  position  : absolute;
  width     : 1px;
  height    : 1px;
  padding   : 0;
  margin    : -1px;
  overflow  : hidden;
  clip      : rect(0, 0, 0, 0);
  white-space: nowrap;
  border    : 0;
}

/* ── スクロールアニメーション ───────────────── */
.oc-fade-up {
  opacity  : 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--oc-ease),
              transform 0.55s var(--oc-ease);
}

.oc-fade-up.is-visible {
  opacity  : 1;
  transform: translateY(0);
}

/* ── デスクトップ: main#contents の padding-top が 130px になるため inner を調整 ── */
/* テキスト位置 = 130px (main) + 60px (inner) = 190px で、モバイル 60px+130px=190px と一致 */
/* min-height はメガメニュー分(130px)を差し引いて見た目の高さを維持する */
@media screen and (min-width: 980px) {
  .page-header.oc-hero .page-header__inner {
    padding-top: 60px;
    min-height : clamp(170px, calc(38vw - 130px), 390px);
  }
}

/* ── レスポンシブ: タブレット ─────────────────── */
@media screen and (max-width: 679px) {
  .page-header.oc-hero .page-header__inner {
    align-items   : center;
    padding-bottom: 36px;
  }

  .page-header.oc-hero .page-header__body {
    text-align: center;
  }

  .page-header.oc-hero .page-header__title {
    text-align: center;
  }

  a.oc-hero-cta {
    margin-top: 20px;
  }

  .oc-section-heading {
    padding-top   : 36px;
    padding-bottom: 24px;
  }
}