/* ============================================================
   セクション固有 CSS カスタムプロパティ
   ============================================================ */
:root {
  /* --- カラー --- */
  --top-s03-bg:                         #FFFFFF;
  --top-s03-headline-color:             #831843;
  --top-s03-comment-color:              #64748B;
  --top-s03-accent-rule-color:          #EC4899;
  --top-s03-accent-rule-opacity:          0.4;
  --top-s03-diff-rule-opacity:            0.3;
  --top-s03-badge-bg:                   #FDF2F8;
  --top-s03-badge-text-color:           #831843;
  --top-s03-focus-outline:              #8B5CF6;
  /* --top-s03-section-title-label-color:  --color--brand; */
  --top-s03-section-title-deco-color:   #F9A8D4;

  /* --- タイポグラフィ --- */
  --top-s03-headline-line1-size:    clamp(1.9rem, 3.2vw, 2.8rem);
  --top-s03-headline-line1-weight:  600;
  --top-s03-headline-line1-lh:      1.2;
  --top-s03-headline-line1-ls:      -0.01em;

  --top-s03-headline-line2-size:    clamp(1.5rem, 2.4vw, 2.1rem);
  --top-s03-headline-line2-weight:  400;
  --top-s03-headline-line2-lh:      1.3;
  --top-s03-headline-line2-ls:      0em;

  --top-s03-comment-size:           clamp(1rem, 1.4vw, 1.05rem);
  --top-s03-comment-weight:         300;
  --top-s03-comment-lh:             1.9;
  --top-s03-comment-ls:             0.02em;

  --top-s03-diff-heading-size:      clamp(1rem, 1.6vw, 1.2rem);
  --top-s03-diff-heading-weight:    500;
  --top-s03-diff-heading-lh:        1.4;
  --top-s03-diff-heading-ls:        0.02em;

  --top-s03-diff-desc-size:         clamp(1rem, 1.2vw, 1.1rem);
  --top-s03-diff-desc-weight:       300;
  --top-s03-diff-desc-lh:           1.75;
  --top-s03-diff-desc-ls:           0.03em;

  --top-s03-badge-label-size:       0.65rem;
  --top-s03-badge-label-ls:         0.08em;

  /* --- スペーシング --- */
  --top-s03-section-v-desktop:      96px;
  --top-s03-section-v-mobile:       64px;
  --top-s03-headline-to-comment:    48px;
  --top-s03-comment-to-diff:        64px;
  --top-s03-diff-gap-desktop:       32px;
  --top-s03-diff-gap-mobile:        32px;
  --top-s03-accent-rule-mb:         16px;
  --top-s03-diff-rule-mb:           12px;
  --top-s03-portrait-overflow:      -24px;
  --top-s03-portrait-init-ty:       16px;
  --top-s03-badge-size-desktop:     80px;
  --top-s03-badge-size-mobile:      60px;
  --top-s03-accent-rule-width:      32px;

  /* --- グリッド --- */
  --top-s03-max-width:              1200px;
  --top-s03-gutter-desktop:         64px;
  --top-s03-gutter-mobile:          24px;

  /* --- アニメーション: MI-0 --- */
  --top-s03-mi0-photo-duration:     900ms;
  --top-s03-mi0-photo-easing:       cubic-bezier(0.16, 1, 0.3, 1);
  --top-s03-mi0-badge-duration:     300ms;
  --top-s03-mi0-badge-easing:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- アニメーション: MI-1 --- */
  --top-s03-mi1-text-duration:      700ms;
  --top-s03-mi1-text-easing:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --top-s03-mi1-rule-duration:      400ms;
  --top-s03-mi1-comment-duration:   500ms;
  --top-s03-mi1-diff-duration:      500ms;

  /* --- セクションタイトル --- */
  --top-s03-section-title-label-size:   clamp(1.125rem, 0.975rem + 0.75vw, 1.875rem);
  --top-s03-section-title-label-weight: 700;
  --top-s03-section-title-label-ls:     0.12em;
  --top-s03-section-title-deco-size:    clamp(2.4rem, 6vw, 4rem);
  --top-s03-section-title-deco-opacity: 0.55;
  --top-s03-section-title-mb:           48px;

}


/* ============================================================
  セクション基礎レイアウト
  ============================================================ */

.top-s03 {
  background-color: var(--top-s03-bg);
  padding-block: var(--top-s03-section-v-mobile);
  padding-inline: var(--top-s03-gutter-mobile);
  overflow: hidden;
}

.top-s03__inner {
  max-inline-size: var(--top-s03-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.top-s03__layout {
  display: grid;
  grid-template-columns: 1fr;   /* モバイル: 1カラム */
  gap: var(--space--8);
  align-items: start;
}

/* ============================================================
  セクションタイトルブロック
  ============================================================ */

/*
 * 構造:
 *   .top-s03__section-title-block   ← position: relative の親
 *     .top-s03__section-title-deco  ← 背景の「Feature」筆記体テキスト
 *     .top-s03__section-title-label ← 前面の「こだわり」テキスト
 *
 * 各 .top-s03__section-title-char が個別にアニメーションする。
 * JS が .top-s03__section-title-block に .is-visible を付与した時点で
 * animation-play-state: running に切り替わる。
 */

.top-s03__section-title-block {
  position: relative;
  display: block;
  margin-block-end: var(--top-s03-section-title-mb);
}
/* --- キーフレーム: 1文字フェードイン --- */
@keyframes top-s03-char-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*
 * 各文字の共通初期状態。
 * animation-play-state: paused で待機し、
 * .is-visible 付与後に running へ切り替える。
 */
.top-s03__section-title-char {
  display: inline-block; /* span をインラインブロックにしてアニメーション適用を安定化 */
  opacity: 0;            /* JS 未実行環境では不透明度0のままのため、後述の no-js 対応も参照 */
  animation-name: top-s03-char-fadein;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: both;  /* アニメーション前後の状態を保持 */
  animation-play-state: paused;
}
/* .is-visible 付与で全文字のアニメーションを開始 */
.top-s03__section-title-block.is-visible .top-s03__section-title-char {
  animation-play-state: running;
}

/*
 * 各文字のスタガー遅延。
 * nth-child はすべての .top-s03__section-title-char を通し番号で管理する。
 * Feature(7文字) + こだわり(4文字) = 11文字。
 * 遅延間隔: 60ms ずつ。
 */
.top-s03__section-title-block.is-visible
  .top-s03__section-title-char:nth-child(1)  { animation-delay:   0ms; }
.top-s03__section-title-block.is-visible
  .top-s03__section-title-char:nth-child(2)  { animation-delay:  60ms; }
.top-s03__section-title-block.is-visible
  .top-s03__section-title-char:nth-child(3)  { animation-delay: 120ms; }
.top-s03__section-title-block.is-visible
  .top-s03__section-title-char:nth-child(4)  { animation-delay: 180ms; }
.top-s03__section-title-block.is-visible
  .top-s03__section-title-char:nth-child(5)  { animation-delay: 240ms; }
.top-s03__section-title-block.is-visible
  .top-s03__section-title-char:nth-child(6)  { animation-delay: 300ms; }
.top-s03__section-title-block.is-visible
  .top-s03__section-title-char:nth-child(7)  { animation-delay: 360ms; }

/*
 * 「こだわり」は Feature と独立した親要素（<p>）を持つため、
 * nth-child カウントが <p> 内で 1 からリセットされる。
 * Feature の最終文字遅延（360ms）に続く形で
 * 追加オフセット 420ms を基点として加算する。
 */
.top-s03__section-title-label
  .top-s03__section-title-char:nth-child(1) { animation-delay: 420ms; }
.top-s03__section-title-label
  .top-s03__section-title-char:nth-child(2) { animation-delay: 480ms; }
.top-s03__section-title-label
  .top-s03__section-title-char:nth-child(3) { animation-delay: 540ms; }
.top-s03__section-title-label
  .top-s03__section-title-char:nth-child(4) { animation-delay: 600ms; }


/* 背景デコラティブテキスト「Feature」 */
.top-s03__section-title-deco {
  display: block;
  font-family: var(--font--display);
  font-size: var(--top-s03-section-title-deco-size);
  font-weight: 400;
  font-style: italic;
  color: var(--top-s03-section-title-deco-color);
  opacity: 1;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* 前面テキスト「こだわり」 */
.top-s03__section-title-label {
  position: absolute;
  /* Feature の下端から少し上に重ねる */
  inset-block-end: -0.3em;
  /* Feature の右寄りに配置 */
  inset-inline-start: clamp(4rem, 3.2rem + 4vw, 8rem);
  font-family: var(--font--body);
  font-size: var(--top-s03-section-title-label-size);
  font-weight: var(--top-s03-section-title-label-weight);
  letter-spacing: var(--top-s03-section-title-label-ls);
  color: var(--color--brand);
  opacity: 1;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  /* Feature テキストの上に確実に表示 */
  z-index: 1;
}


/* ============================================================
  左ゾーン — ポートレート写真
  ============================================================ */

.top-s03__left-zone {
  position: relative;
}

.top-s03__portrait-figure {
  position: relative;
  margin: 0;
  opacity: 0;
  transform: translateY(var(--top-s03-portrait-init-ty));
  transition:
    opacity   var(--top-s03-mi0-photo-duration) var(--top-s03-mi0-photo-easing),
    transform var(--top-s03-mi0-photo-duration) var(--top-s03-mi0-photo-easing);
  aspect-ratio: 16 / 9;
  overflow: visible;
  box-shadow: 8px 12px 40px var(--shadow--sm);
}

.top-s03__portrait-figure.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.top-s03__portrait-picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.top-s03__portrait-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 75%;
  border-radius: 0;
}


/* ============================================================
   右ゾーン — テキストコンテンツ
   ============================================================ */

.top-s03__right-zone {
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* --- キャッチコピーブロック --- */
.top-s03__headline-block {
  margin-block-end: var(--top-s03-headline-to-comment);
}

.top-s03__headline-line1 {
  font-family: var(--font--display), "Noto Serif JP", "Yu Mincho", serif;
  font-size: var(--top-s03-headline-line1-size);
  font-weight: var(--top-s03-headline-line1-weight);
  line-height: var(--top-s03-headline-line1-lh);
  letter-spacing: var(--top-s03-headline-line1-ls);
  color: var(--top-s03-headline-color);
  margin: 0 0 0.25em;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--top-s03-mi1-text-duration) var(--top-s03-mi1-text-easing),
    transform var(--top-s03-mi1-text-duration) var(--top-s03-mi1-text-easing);
}

.top-s03__headline-line2 {
  font-family: var(--font--display), "Noto Serif JP", "Yu Mincho", serif;
  font-size: var(--top-s03-headline-line2-size);
  font-weight: var(--top-s03-headline-line2-weight);
  line-height: var(--top-s03-headline-line2-lh);
  letter-spacing: var(--top-s03-headline-line2-ls);
  color: var(--top-s03-headline-color);
  padding-inline-start: 1em;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--top-s03-mi1-text-duration) var(--top-s03-mi1-text-easing),
    transform var(--top-s03-mi1-text-duration) var(--top-s03-mi1-text-easing);
}

.top-s03__headline-line1.is-visible,
.top-s03__headline-line2.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* --- 施術者コメントブロック --- */
.top-s03__comment-block {
  margin-block-end: var(--top-s03-comment-to-diff);
}

.top-s03__comment-rule {
  display: block;
  block-size: 1px;
  inline-size: 0;
  background-color: var(--top-s03-accent-rule-color);
  opacity: var(--top-s03-accent-rule-opacity);
  margin-block-end: var(--top-s03-accent-rule-mb);
  transition:
    inline-size var(--top-s03-mi1-rule-duration) var(--top-s03-mi1-text-easing);
}

.top-s03__comment-rule.is-expanded {
  inline-size: var(--top-s03-accent-rule-width);
}

.top-s03__comment-text {
  font-family: var(--font--body);
  font-size: var(--top-s03-comment-size);
  font-weight: var(--top-s03-comment-weight);
  line-height: var(--top-s03-comment-lh);
  letter-spacing: var(--top-s03-comment-ls);
  color: var(--top-s03-comment-color);
  margin: 0;
  opacity: 0;
  transition:
    opacity var(--top-s03-mi1-comment-duration) var(--top-s03-mi1-text-easing);
}

.top-s03__comment-text.is-visible {
  opacity: 1;
}


/* --- 差別化要素サマリー --- */
.top-s03__differentiator-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--top-s03-diff-gap-mobile);
}

.top-s03__diff-item {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   var(--top-s03-mi1-diff-duration) var(--top-s03-mi1-text-easing),
    transform var(--top-s03-mi1-diff-duration) var(--top-s03-mi1-text-easing);
}

.top-s03__diff-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.top-s03__diff-heading {
  font-family: var(--font--display);
  font-size: var(--top-s03-diff-heading-size);
  font-weight: var(--top-s03-diff-heading-weight);
  line-height: var(--top-s03-diff-heading-lh);
  letter-spacing: var(--top-s03-diff-heading-ls);
  color: var(--top-s03-headline-color);
  margin: 0 0 0.5em;

  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* 縦線: ::before 擬似要素 */
.top-s03__diff-heading::before {
  content: '';
  display: block;
  flex-shrink: 0;
  inline-size: 2px;
  block-size: 1em;           /* フォントサイズに追従する高さ */
  background-color: var(--top-s03-accent-rule-color);
  opacity: var(--top-s03-diff-rule-opacity);
  border-radius: var(--radius--sm);
}

.top-s03__diff-description {
  font-family: var(--font--body);
  font-size: var(--top-s03-diff-desc-size);
  font-weight: var(--top-s03-diff-desc-weight);
  line-height: var(--top-s03-diff-desc-lh);
  letter-spacing: var(--top-s03-diff-desc-ls);
  color: var(--top-s03-comment-color);
  margin: 0;
}


/* ============================================================
   フォーカスインジケーター
   ============================================================ */
.top-s03 a:focus-visible,
.top-s03 button:focus-visible {
  outline: 2px solid var(--top-s03-focus-outline);
  outline-offset: 3px;
}


/* ============================================================
   デスクトップレイアウト (width >= 1024px)
   ============================================================ */
@media (width >= 1024px) {
  .top-s03 {
    padding-block: var(--top-s03-section-v-desktop);
    padding-inline: var(--top-s03-gutter-desktop);
    overflow: visible;
  }

  .top-s03__layout {
    grid-template-columns: 5fr 7fr;
    gap: 0;
    align-items: start;
  }

  .top-s03__portrait-figure {
    aspect-ratio: 3 / 4;
    margin-block-start: calc(var(--top-s03-portrait-overflow) * -1);
  }

  .top-s03__portrait-figure.is-visible {
    opacity: 1;
    transform: translateY(var(--top-s03-portrait-overflow));
  }

  .top-s03__right-zone {
    padding-inline-start: 32px;
  }

  .top-s03__differentiator-summary {
    grid-template-columns: 3fr 2fr 3fr;
    gap: var(--top-s03-diff-gap-desktop);
    align-items: start;
  }
}


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

  /* 文字アニメーション: 即座に表示 */
  .top-s03__section-title-char {
    opacity: 1;
    animation: none;
  }

  .top-s03__section-title-block,
  .top-s03__portrait-figure,
  .top-s03__headline-line1,
  .top-s03__headline-line2,
  .top-s03__comment-text,
  .top-s03__diff-item {
    opacity: 1;
    transform: none;
  }

  .top-s03__comment-rule {
    inline-size: var(--top-s03-accent-rule-width);
    opacity: var(--top-s03-accent-rule-opacity);
  }
}