/* mv.css — メインビジュアル（Figma: MV 2008:9651）
   実値: padding 96px 80px 40px / コンテナ max-width 1200px gap 40px
         透かし英字 200px Black グラデ #005796→#0078CF opacity 0.1
         タイトル 42.67px Black ls 0.15em lh 1.8 / リード 18.286px Bold
   ※上パディングはFigmaでは重なるg-nav（高さ96px）分の予約スペース。
     実装ではg-navが静的要素として上に積まれるため上パディングは0にする。 */

.mv {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-80) var(--space-40);
  background: var(--gradient-white-fade);
  overflow: hidden;
}

.mv__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
  width: 100%;
  max-width: var(--layout-max);
}

/* MV画像を出さないSERVICEページ（診断/AI/研修）は、
   コンテナ上下に余白を足してテキストのみでも間延びしないようにする。 */
.mv--no-image .mv__container {
  padding-block: var(--space-64);
}

.mv__watermark {
  position: absolute;
  top: -2px;
  left: -4.5625rem;
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.1;
  pointer-events: none;
}

.mv__body {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.mv__label {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
}

.mv__label-line {
  display: block;
  width: 2.5rem;
  height: .25rem;
  margin-top: var(--space-16);
  background: var(--color-accent);
}

.mv__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-ultra);
  white-space: nowrap;
}

.mv__text {
  margin: 0;
  max-width: 34.875rem;
  color: var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.mv__buttons {
  display: flex;
  gap: var(--space-16);
}

/* 上端揃え。center だと --offset の padding-top 80px が上下に振り分けられ、
   2枚の段差がFigmaの80pxではなく40pxになる。 */
.mv__images {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-24);
}

.mv__image {
  flex: 1;
  min-width: 0;
}

/* 1枚目は下げてスタッガード配置（Figma: pt-80） */
.mv__image--offset {
  padding-top: var(--space-80);
}

.mv__image-frame {
  aspect-ratio: 353 / 583;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.mv__image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 単一イラストのヒーロー（TOP MV 2246:58638 と同じ右フェード重ね）---------
   写真2枚（.mv__images）の代わりに、右端までブリードした1枚イラストを
   左（見出し側）へアルファフェードさせ、見出し・テキストに重ねる。 */
.mv--visual {
  position: relative;
}

.mv__visual {
  position: absolute;
  top: 0;
  /* 通常は .mv の右パディング(80px)を打ち消してビューポート右端までブリードするが、
     1440px超では 1440基準フレームの右端（内側へ寄る分）に合わせる。
     max の左項 = -80px（従来のビューポート端）が 1440px以下での下限。 */
  right: max(calc(var(--space-80) * -1), calc((100% - var(--layout-frame)) / 2 - var(--space-80)));
  bottom: 0;
  z-index: 0;
  /* 縦中央寄せは transform ではなく flex で行う。
     FVフェード（inview.js）が transform を translateY→none と操作するため、
     transform を配置に使うと再生後にズレる。 */
  display: flex;
  align-items: center;
  width: 60rem;
  pointer-events: none;
}

.mv__visual img {
  display: block;
  width: 100%;
  height: auto;
  /* 左（見出し側）へフェードしてテキストの可読性を確保 */
  mask-image: linear-gradient(100deg, transparent 12%, rgb(0 0 0) 44%);
  -webkit-mask-image: linear-gradient(100deg, transparent 12%, rgb(0 0 0) 44%);
}

.mv--visual .mv__container {
  justify-content: flex-start;
  min-height: 32rem;
  padding-block: var(--space-48);
}

/* 本文列は左に寄せ、イラストと重ならない幅に収める */
.mv--visual .mv__body {
  z-index: 1;
  flex: 0 1 34rem;
}

/* --- SP: 縦積み（テキスト→写真2枚）-------------------------------------- */
@media (max-width: 767px) {
  .mv {
    padding: var(--space-24) var(--space-24) var(--space-32);
  }
  .mv__watermark {
    display: none;
  }
  .mv__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
  }
  .mv--no-image .mv__container {
    padding-block: 0;
  }
  .mv__label {
    white-space: normal;
  }
  .mv__title {
    margin-top: var(--space-16);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-heading);
    white-space: normal;
  }
  /* PC用の<br>を無効化し、SPは自然折返しにする */
  .mv__text br { display: none; }
  .mv__buttons {
    flex-wrap: wrap;
  }
  /* 写真は2枚並びを維持（縦長 353:583 のためSPでも2枚で収まる） */
  .mv__image--offset {
    padding-top: var(--space-40);
  }
  /* 単一イラストは重ね配置をやめ、テキスト→イラストの縦積みに（フェード不要） */
  .mv--visual .mv__visual {
    position: static;
    order: 1; /* テキストブロック（.mv__container）の下に置く */
    display: block;
    width: 100%;
    margin-top: var(--space-24);
  }
  .mv--visual .mv__visual img {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .mv--visual .mv__container {
    min-height: 0;
    padding-block: 0;
  }
  .mv--visual .mv__body {
    flex: initial;
  }
}