/* sections/mv.css — トップページのメインビジュアル
   Figma: p-mv (node 1180:8561)

   バッジ本体は c-badge（components/badge.css）。ここは配置と写真まわりだけ。 */

.p-mv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50rem; /* Figma: 800px */
  padding-bottom: var(--space-40);
}

.p-mv__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p-mv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真の上の文字を読めるようにする暗幕 */
.p-mv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.p-mv__inner {
  position: relative; /* 背景より前面 */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
}

.p-mv__content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-40);
  align-items: center;
  width: 100%;
}

.p-mv__text {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
}

.p-mv__name {
  flex-shrink: 0;
  color: var(--color-text-invert);
  font-size: var(--font-size-h1-sm);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  text-align: center;
  text-shadow: var(--shadow-text-hero);
  white-space: nowrap;
}

/* 3事業のバッジを横並び */
.p-mv__badges {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-24);
  align-items: center;
  justify-content: center;
  width: 100%;
}

.p-mv__catch {
  flex-shrink: 0;
  color: var(--color-text-invert);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  text-align: center;
  text-shadow: var(--shadow-text-hero);
  white-space: nowrap;
}

/* ==========================================================================
   SP（767px以下）— 固定高をやめる。バッジはPC同様の横並びを維持（縮小して収める）
   ========================================================================== */
@media (max-width: 767px) {
  .p-mv {
    height: auto;
    min-height: 25rem;
    /* fixedヘッダー（padding-block --space-16×2 + ロゴ2.463rem ≒ 4.5rem）に
       文字が潜らないよう、ヘッダー高さ＋ゆとり分を確保する */
    padding-top: var(--space-240);
    /* 次セクション（p-about）の重なり量（--space-120、SPでは4rem）を吸収したうえで、
       --space-80 分（71px相当）の見た目の余白を確保する */
    padding-bottom: calc(var(--space-120) + var(--space-80));
  }

  .p-mv__content { gap: var(--space-16); }

  .p-mv__name {
    font-size: var(--font-size-h2);
    white-space: normal;
  }

  .p-mv__catch {
    font-size: var(--font-size-h1);
    white-space: normal;
  }

  /* 3つ横並びのまま画面幅に収まるよう、文字・余白を縮小 */
  .p-mv__badges {
    gap: var(--space-8);
  }

  .p-mv__badges .c-badge {
    padding: var(--space-4) var(--space-12);
  }

  .p-mv__badges .c-badge__text { font-size: var(--font-size-h2-lead); }
}