/* ─────────────────────────────────────────────────────────
  Section-specific design tokens
  Prefix rule: --top-s02-{property}
  Common tokens (common.css :root) are referenced via var()
  and must NOT be redeclared here.
───────────────────────────────────────────────────────── */
:root {
  /* ── Colors (section 0 palette) ── */
  --top-s02-color-bg:           #FDF2F8;
  --top-s02-color-catchcopy:    #831843;
  --top-s02-color-body:         #64748B;
  --top-s02-color-line:         rgba(236, 72, 153, 0.06);
  --top-s02-color-focus:        #8B5CF6;

  /* ── Typography — catchcopy ── */
  --top-s02-font-catchcopy:     "Playfair Display", "Noto Serif JP", Georgia, serif;
  --top-s02-font-body:          "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --top-s02-size-catchcopy:     clamp(3.2rem, 7vw, 5.6rem);
  --top-s02-size-catchcopy-mob: clamp(2.4rem, 9vw, 3.2rem);
  --top-s02-size-body:          clamp(0.95rem, 1.6vw, 1.1rem);
  --top-s02-weight-catchcopy:   700;
  --top-s02-weight-body:        300;
  --top-s02-lh-catchcopy:       1.1;
  --top-s02-lh-body:            2.0;
  --top-s02-ls-catchcopy:       -0.02em;
  --top-s02-ls-body:            0.04em;

  /* ── Spacing ── */
  --top-s02-margin-top-desktop:    128px;
  --top-s02-margin-top-mobile:     96px;
  --top-s02-margin-bottom-desktop: 96px;
  --top-s02-margin-bottom-mobile:  64px;
  --top-s02-gap-catchcopy-body:    30px;
  --top-s02-gap-body-sentence:     8px;
  --top-s02-padding-desktop:       64px;
  --top-s02-padding-mobile:        24px;

  /* ── Grid ── */
  --top-s02-max-width:             1200px;
  --top-s02-body-max-width:        680px;

  /* ── Vertical line decoration ── */
  --top-s02-line-width:            4px;
  --top-s02-line-offset:           -12px;

  /* ── Animation durations ── */
  --top-s02-dur-line:              600ms;
  --top-s02-dur-catchcopy:         800ms;
  --top-s02-dur-body:              500ms;
  --top-s02-dur-gradient:          800ms;

  /* ── Animation easings ── */
  --top-s02-ease-line:             cubic-bezier(0.16, 1, 0.3, 1);
  --top-s02-ease-text:             cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --top-s02-ease-gradient:         ease-in-out;

  /* ── Stagger offsets ── */
  --top-s02-stagger-catchcopy:     300ms;
  --top-s02-stagger-body:          200ms;
}


/* ─────────────────────────────────────────────────────────
   SECTION CONTAINER
   base: モバイル値
   375px〜: padding-inline をデスクトップ値に拡大
   768px〜: padding-block をデスクトップ値に拡大
───────────────────────────────────────────────────────── */
.top-s02__section {
  background-color:    var(--top-s02-color-bg);
  padding-block-start: var(--top-s02-margin-top-mobile);
  padding-block-end:   var(--top-s02-margin-bottom-mobile);
  padding-inline:      var(--top-s02-padding-mobile);
  overflow: hidden;
}

@media (width >= 375px) {
  .top-s02__section {
    padding-inline: var(--top-s02-padding-desktop);
  }
}

@media (width >= 768px) {
  .top-s02__section {
    padding-block-start: var(--top-s02-margin-top-desktop);
    padding-block-end:   var(--top-s02-margin-bottom-desktop);
  }
}


/* ─────────────────────────────────────────────────────────
   INNER WRAPPER
   base(モバイル): block レイアウト（単カラム）
   768px〜: 12カラムグリッドに切り替え
───────────────────────────────────────────────────────── */
.top-s02__inner {
  max-inline-size: var(--top-s02-max-width);
  margin-inline:   auto;
  /* ▼ モバイルは block（グリッドなし）がベース */
  display: block;
}

@media (width >= 768px) {
  .top-s02__inner {
    display:               grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap:               var(--top-s02-gap-catchcopy-body);
  }
}


/* ─────────────────────────────────────────────────────────
   CATCHCOPY WRAP
   base(モバイル): block 内で自然に流れる / position relative のみ
   768px〜: grid-column を指定
───────────────────────────────────────────────────────── */
.top-s02__catchcopy-wrap {
  position: relative;     /* vertical line の absolute 配置基準（全幅で共通） */
}

@media (width >= 768px) {
  .top-s02__catchcopy-wrap {
    grid-column: 2 / 9;   /* col 2–8 */
  }
}


/* ─────────────────────────────────────────────────────────
   BODY WRAP
   base(モバイル): block 内で自然に流れる / margin-block-start で間隔確保
   768px〜: grid-column を指定 / max-inline-size を制限
───────────────────────────────────────────────────────── */
.top-s02__body-wrap {
  position:           relative; /* MI-2 gradient overlay の基準 */
  margin-block-start: var(--top-s02-gap-catchcopy-body); /* モバイル: 上間隔 */
}

@media (width >= 768px) {
  .top-s02__body-wrap {
    grid-column:     3 / 8;                      /* col 3–7 */
    max-inline-size: var(--top-s02-body-max-width);
    margin-block-start: 0;                       /* grid の row-gap が担う */
  }
}


/* ─────────────────────────────────────────────────────────
  LIFESTYLE IMAGE
  base(モバイル): block 内フルワイド / aspect-ratio 4:3
  768px〜: grid に収め aspect-ratio 3:4 / 2行またがり
───────────────────────────────────────────────────────── */
.top-s02__image-wrap {
  /* ▼ モバイルベース */
  position:           relative;
  overflow:           hidden;
  inline-size:        100%;
  aspect-ratio:       4 / 3;                            /* モバイル: 横長 */
  margin-block-start: var(--top-s02-gap-catchcopy-body); /* モバイル: 上間隔 */
    box-shadow: 8px 12px 40px rgb(0 0 0 / 0.28);
}


@media (width >= 768px) {
  .top-s02__image-wrap {
    grid-column:        9 / 13;  /* col 9–12 */
    grid-row:           1 / 3;   /* catchcopy行 + body行 にまたがる */
    align-self:         start;
    aspect-ratio:       3 / 4;   /* デスクトップ: 縦長 */
    margin-block-start: 0;       /* grid の row-gap が担う */
  }
}

/* ── アニメーション初期状態 ── */
.top-s02__image-wrap.js-animate-hidden {
  opacity:   0;
  transform: translateY(16px);
}

.top-s02__image-wrap.is-animated {
  opacity:   1;
  transform: translateY(0);
  transition:
    opacity   800ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ─────────────────────────────────────────────────────────
   LIFESTYLE IMAGE — img 要素
   base(モバイル): object-position center 30%（女性の顔を中心に）
   768px〜: object-position center top（上半身優先）
───────────────────────────────────────────────────────── */
.top-s02__image {
  display:         block;
  inline-size:     100%;
  block-size:      100%;
  object-fit:      cover;
  object-position: center 60%;   /* ▼ モバイルベース: 女性の顔・肩を中心に */
}

@media (width >= 768px) {
  .top-s02__image {
    object-position: center top;  /* デスクトップ: 縦長なので上部優先 */
  }
}


/* ─────────────────────────────────────────────────────────
   CATCHCOPY
   base(モバイル): モバイルフォントサイズ
   768px〜: デスクトップフォントサイズ
───────────────────────────────────────────────────────── */
.top-s02__catchcopy {
  font-family:    var(--top-s02-font-catchcopy);
  font-size:      var(--top-s02-size-catchcopy-mob); /* モバイルベース */
  font-weight:    var(--top-s02-weight-catchcopy);
  line-height:    var(--top-s02-lh-catchcopy);
  letter-spacing: var(--top-s02-ls-catchcopy);
  color:          var(--top-s02-color-catchcopy);
  margin:  0;
  padding: 0;
}

@media (width >= 768px) {
  .top-s02__catchcopy {
    font-size: var(--top-s02-size-catchcopy);
  }
}

/* 各行: display block で改行を強制（全幅共通） */
.top-s02__catchcopy-line {
  display: block;
}

/*
 * Line 2: 1文字分の左インデント
 * モバイル・デスクトップ共に 1em のため、メディアクエリ不要
 */
.top-s02__catchcopy-line--2 {
  padding-inline-start: 1em;
}


/* ─────────────────────────────────────────────────────────
   VERTICAL LINE DECORATION
   position: absolute — キャッチコピーブロック左端から -12px
   全幅共通のため、メディアクエリなし
───────────────────────────────────────────────────────── */
.top-s02__line-decoration {
  position:           absolute;
  inset-inline-start: var(--top-s02-line-offset); /* -12px */
  inset-block-start:  0;
  inline-size:        var(--top-s02-line-width);  /* 4px */
  block-size:         100%;
  background: linear-gradient(
    to bottom,
    transparent                 0%,
    var(--top-s02-color-line)   30%,
    var(--top-s02-color-line)   70%,
    transparent                 100%
  );
  transform-origin: top center;
}


/* ─────────────────────────────────────────────────────────
   BODY COPY
───────────────────────────────────────────────────────── */
.top-s02__body-sentence {
  font-family:        var(--top-s02-font-body);
  font-size:          max(1rem, var(--top-s02-size-body)); /* 16px minimum */
  font-weight:        var(--top-s02-weight-body);
  line-height:        var(--top-s02-lh-body);
  letter-spacing:     var(--top-s02-ls-body);
  color:              var(--top-s02-color-body);
  margin-block-start: 0;
  margin-block-end:   var(--top-s02-gap-body-sentence);
  position:           relative;
  z-index:            1;
}

.top-s02__body-sentence:last-of-type {
  margin-block-end: 0;
}

/* サブヘッドライン（第1段落）— 視覚的連続性を保つため同スタイル */
.top-s02__body-sentence--sub {
  /* intentionally identical to body-sentence */
}


/* ─────────────────────────────────────────────────────────
   MI-2: 勾配背景オーバーレイ
───────────────────────────────────────────────────────── */
.top-s02__body-wrap::before {
  content:        "";
  position:       absolute;
  inset:          0;
  background: linear-gradient(
    135deg,
    transparent                  0%,
    rgba(249, 168, 212, 0.04)    100%
  );
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--top-s02-dur-gradient) var(--top-s02-ease-gradient);
  z-index:        0;
}

.top-s02__body-wrap.is-gradient-visible::before {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────
   ANIMATION INITIAL STATES (JS-controlled)
───────────────────────────────────────────────────────── */

/* 縦ライン */
.top-s02__line-decoration.js-animate-hidden {
  transform: scaleY(0);
}

.top-s02__line-decoration.is-animated {
  transform:  scaleY(1);
  transition: transform var(--top-s02-dur-line) var(--top-s02-ease-line);
}

/* キャッチコピー行 */
.top-s02__catchcopy-line.js-animate-hidden {
  opacity:   0;
  transform: translateY(24px);
}

.top-s02__catchcopy-line.is-animated {
  opacity:   1;
  transform: translateY(0);
  transition:
    opacity   var(--top-s02-dur-catchcopy) var(--top-s02-ease-text),
    transform var(--top-s02-dur-catchcopy) var(--top-s02-ease-text);
}

/* ボディコピー文 */
.top-s02__body-sentence.js-animate-hidden {
  opacity:   0;
  transform: translateY(12px);
}

.top-s02__body-sentence.is-animated {
  opacity:   1;
  transform: translateY(0);
  transition:
    opacity   var(--top-s02-dur-body) var(--top-s02-ease-text),
    transform var(--top-s02-dur-body) var(--top-s02-ease-text);
}


/* ─────────────────────────────────────────────────────────
   FOCUS STYLES
───────────────────────────────────────────────────────── */
.top-s02__section a:focus-visible,
.top-s02__section button:focus-visible {
  outline:        2px solid var(--top-s02-color-focus);
  outline-offset: 3px;
}

.top-s02__section a,
.top-s02__section button {
  min-block-size:  44px;
  min-inline-size: 44px;
}


/* ─────────────────────────────────────────────────────────
   BRIDGE
───────────────────────────────────────────────────────── */
.top-s02__bridge {
  /* intentionally empty — void is the design */
}


/* ─────────────────────────────────────────────────────────
   prefers-reduced-motion
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }

  .top-s02__line-decoration.js-animate-hidden,
  .top-s02__catchcopy-line.js-animate-hidden,
  .top-s02__body-sentence.js-animate-hidden {
    opacity:   1;
    transform: none;
  }
}