/* ============================================================
   精密審美会 採用サイト — セカンダリMV 共通スタイル
   全下層ページで共通のヒーローMVレイアウト
   各ページ固有のロゴサイズ・重なり量は各ページCSSで定義
   ============================================================ */

/* --- MVコンテナ ---
   Figma: 1440×278, 白背景, 左右に装飾画像
   ======================================= */
.secondary-mv {
  position: relative;
  min-height: 278px;
  display: flex;
  align-items: flex-end;
  background: #fff;
  padding-bottom: 66px;
  overflow: hidden;
}

/* 左右装飾画像 — 端に固定配置 */
.secondary-mv__deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  height: 100%;
  width: auto;
}

.secondary-mv__deco--left {
  left: 0;
  top: 0;
}

.secondary-mv__deco--right {
  right: 0;
  top: 0;
}

/* Innerコンテナ */
.secondary-mv .secondary-mv__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* タイトル: テキストスタイル（共通）
   Figma: fills rgb(21,86,166), Noto Sans 38px w400 ls:3.04px lh:51.76px */
.secondary-mv .secondary-mv__title {
  color: #1556A6;
  font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 3.04px;
  line-height: 51.76px;
  margin-bottom: 0;
}

/* タイトルロゴ画像 — 共通レイアウトのみ
   max-width, margin-bottom(重なり量) は各ページCSSで個別指定 */
.secondary-mv__title-logo {
  display: block;
  height: auto;
  margin-left: 37px;
}

.secondary-mv__title-text {
  position: relative;
  z-index: 1;
}

/* パンくず
   Figma: fills rgb(51,51,51), Noto Sans 12px w400 ls:0.96px lh:16.34px */
.secondary-mv .secondary-mv__bread {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #333333;
  font-size: 12px;
  letter-spacing: 0.96px;
  line-height: 16.34px;
  margin-top: var(--spacing-xs);
}

.secondary-mv__bread-icon {
  width: 14px;
  height: 11px;
  flex-shrink: 0;
}

.secondary-mv .secondary-mv__bread a {
  color: #333333;
  transition: color var(--transition-base);
}

.secondary-mv .secondary-mv__bread a:hover {
  color: #32A9E1;
}


/* ============================================================
   SP レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  .secondary-mv {
    min-height: 136px;
    /* SP MV高さ統一: 全ページで背景画像・見出しの描画位置を揃える。
       1行タイトル基準 = padding-top(40) + logo(48) + overlap(-13) + text(41) + padding-bottom(20) = 136px
       2行タイトル（contact等）は下方向に伸びる（上辺・背景位置は固定） */
    align-items: flex-start;
    padding-top: 40px;
    /* Figma: ロゴ上端49px（h1マージン分を差し引き） */
    padding-bottom: 20px;
  }

  /* SP: MV内の左右余白をFigma準拠に (22px) */
  .secondary-mv .secondary-mv__inner {
    padding: 0 16px;               /* 22→16px: 360pxで長い見出しが折り返さないよう拡張 */
  }

  /* Figma SP: 左装飾画像は不要、右のみ表示 */
  .secondary-mv__deco--left {
    display: none;
  }

  /* 右装飾画像: SP用にサイズ・位置調整
     元画像 550×278px → SPでは右端に寄せて縮小表示 */
  .secondary-mv__deco--right {
    height: auto;
    width: 55%;
    top: -25px;
    right: calc(-5% + 25px);
    opacity: 0.8;
  }

  .secondary-mv .secondary-mv__title {
    position: relative;                    /* ロゴの基準 */
    font-size: clamp(24px, 7vw, 30.4px);  /* 430px→30.4px, 360px→25.2px */
    letter-spacing: 2.43px;                /* Figma SP: 2.43px（PC: 3.04px） */
    line-height: 1.36;                     /* Figma SP: 41.4/30.4 ≈ 1.36 */
  }

  /* SP: ロゴを absolute にしてフローから外す。
     テキスト位置がロゴ高さ×overlap量に依存しなくなり、全ページ統一される。
     ロゴの重なり量は画像サイズで自然に決まる（各ページの margin-bottom は不要） */
  .secondary-mv__title-logo {
    position: absolute;
    top: 10px;                             /* Figma SP: ロゴY(49-51) - MV padding(40) ≈ 10px */
    left: 30px;                            /* Figma SP: 24px + inner padding差分(22-16=6px) */
    margin-left: 0;                        /* PC値(37px) をリセット */
    margin-bottom: 0;                      /* 各ページの負margin をリセット（absoluteでは不要） */
  }

  /* SP: title-text を block 化 + padding-top で位置を固定。
     Figma SP: テキスト y_rel=84 - MV padding-top(40) = 44px
     全ページ共通でテキストが同じy位置に描画される */
  .secondary-mv .secondary-mv__title-text {
    display: block;
    padding-top: 44px;                     /* Figma: y_rel=84 - padding-top(40) */
  }

  /* Figma SP: パンくずリスト非表示
     下層ページで文言が長くなりSPレイアウトに適さないため */
  .secondary-mv .secondary-mv__bread {
    display: none;
  }
}

/* MV見出し補足テキスト — (研修修了後3年以内) 等の小文字表示 */
.secondary-mv__title-sub {
  font-size: 0.7em;               /* 親の70% */
  line-height: 1;                  /* 行ボックスの肥大を防止 */
  vertical-align: baseline;
}