/* ============================================================
  CSS カスタムプロパティ — top page / section s06 (MENU)
  ※ common.css の :root で定義済みの変数は再宣言しない。
    var() で参照するだけ。
============================================================ */
:root {
  /* ---------- カラー ---------- */
  --top-s06-color-bg:               #3A3332;
  --top-s06-color-card-bg:          #FFFFFF;
  --top-s06-color-subtitle:         #EC4899;
  --top-s06-color-title-deco:       #EDE0DC;
  --top-s06-color-title-label:      #831843;

  --top-s06-color-heading:          #EDE0DC;
  --top-s06-color-course-name:      #831843;
  --top-s06-color-meta:             #64748B;
  --top-s06-color-sep:              #F9A8D4;
  --top-s06-color-detail-link:      #EC4899;
  --top-s06-color-detail-link-hover:#831843;
  --top-s06-color-divider:          #EDE0DC;
  --top-s06-color-cta:              #EDE0DC;
  --top-s06-color-cta-hover:        #EC4899;
  --top-s06-color-focus:            #8B5CF6;
  --top-s06-shadow-card-l:          0 4px 24px rgba(131, 24, 67, 0.07);
  --top-s06-shadow-card-m:          0 2px 12px rgba(131, 24, 67, 0.05);

  /* ---------- タイポグラフィ ---------- */
  --top-s06-font-subtitle-size:       clamp(0.75rem, 1vw, 0.875rem);
  --top-s06-font-subtitle-weight:     400;
  --top-s06-font-subtitle-lh:         1.4;
  --top-s06-font-subtitle-ls:         0.18em;
  --top-s06-font-subtitle-ls-start:   0.28em;
  --top-s06-font-title-deco:            clamp(2.5rem, 5vw, 4rem);
  --top-s06-font-title-label:           clamp(1.125rem, 0.975rem + 0.75vw, 1.875rem);
  --top-s06-font-heading-size:        clamp(1.75rem, 2.8vw, 2.25rem);
  --top-s06-font-heading-weight:      600;
  --top-s06-font-heading-lh:          1.3;
  --top-s06-font-heading-ls:          0.02em;

  --top-s06-font-body-weight:         300;
  --top-s06-font-body-size:           1rem;
  --top-s06-font-body-lh:             1.75;

  --top-s06-font-course-l-size:       clamp(1rem, 1.5vw, 1.125rem);
  --top-s06-font-course-l-weight:     500;
  --top-s06-font-course-l-lh:         1.4;

  --top-s06-font-course-m-size:       clamp(0.9375rem, 1.3vw, 1.0625rem);
  --top-s06-font-course-m-weight:     500;
  --top-s06-font-course-m-lh:         1.4;

  --top-s06-font-meta-size:           clamp(0.8125rem, 1vw, 0.875rem);
  --top-s06-font-meta-weight:         300;
  --top-s06-font-meta-lh:             1.5;
  --top-s06-font-meta-ls:             0.08em;

  --top-s06-font-detail-size:         clamp(0.75rem, 0.9vw, 0.8125rem);
  --top-s06-font-detail-weight:       300;
  --top-s06-font-detail-lh:           1.4;
  --top-s06-font-detail-ls:           0.1em;

  --top-s06-font-cta-size:            clamp(0.875rem, 1.1vw, 0.9375rem);
  --top-s06-font-cta-weight:          300;
  --top-s06-font-cta-lh:             1.4;
  --top-s06-font-cta-ls:             0.12em;

  /* ---------- 余白 ---------- */
  --top-s06-section-pt-desktop:       96px;
  --top-s06-section-pb-desktop:       96px;
  --top-s06-section-pt-mobile:        64px;
  --top-s06-section-pb-mobile:        64px;
  --top-s06-headline-to-grid-gap:     48px;
  --top-s06-section-title-label-gap:  32px;
  --top-s06-col-gap:                  24px;
  --top-s06-card-m-gap:               16px;
  --top-s06-grid-to-divider-gap:      48px;
  --top-s06-divider-to-cta-gap:       32px;
  --top-s06-card-l-pad:               24px;
  --top-s06-card-m-pad:               24px;
  --top-s06-course-to-meta-gap:       8px;
  --top-s06-course-to-link-gap:       24px;
  --top-s06-subtitle-to-headline-gap: 8px;
  --top-s06-mobile-grid-to-divider:   40px;
  --top-s06-mobile-divider-to-cta:    28px;

  /* ---------- アニメーション ---------- */
  /* MI-1 (見出しブロック) */
  --top-s06-char-duration:  0.35s;
  --top-s06-char-easing:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --top-s06-char-delay-step: 0.06s; /* 1文字ごとの遅延ステップ（JS参照用の意味合い） */
  --top-s06-mi1-duration-p1:          600ms;
  --top-s06-mi1-duration-p2:          700ms;
  --top-s06-mi1-delay-p2:             200ms;
  --top-s06-mi1-easing:               cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --top-s06-mi1-translate-subtitle:   10px;
  --top-s06-mi1-translate-heading:    14px;

  /* MI-2 (カード L) */
  --top-s06-mi2-duration-p1:          800ms;
  --top-s06-mi2-duration-p2:          600ms;
  --top-s06-mi2-delay-p2:             800ms;
  --top-s06-mi2-easing-p1:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --top-s06-mi2-easing-p2:            cubic-bezier(0.16, 1, 0.3, 1);
  --top-s06-mi2-translate:            20px;

  /* MI-3 (カード M) */
  --top-s06-mi3-duration:             600ms;
  --top-s06-mi3-delay-top:            200ms;
  --top-s06-mi3-delay-bottom:         400ms;
  --top-s06-mi3-easing:               cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --top-s06-mi3-translate:            16px;

  /* MI-4 (区切り線 + CTA) */
  --top-s06-mi4-duration-divider:     700ms;
  --top-s06-mi4-duration-cta:         500ms;
  --top-s06-mi4-delay-cta:            1000ms;
  --top-s06-mi4-easing:               cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --top-s06-mi4-translate-cta:        8px;

  /* MI-5 (CTA ホバー) */
  --top-s06-mi5-duration:             300ms;
  --top-s06-mi5-easing:               ease;

  /* ホバー（詳しく見るリンク） */
  --top-s06-hover-duration:           300ms;
  --top-s06-hover-easing:             ease;
}


/* ============================================================
  セクション基底
  ============================================================ */
.top-s06 {
  background-color: var(--top-s06-color-bg);
  padding-block-start: var(--top-s06-section-pt-mobile);
  padding-block-end:   var(--top-s06-section-pb-mobile);
}

.top-s06__inner {
  padding-inline: var(--padding--mobile, 24px);
}


/* ============================================================
  見出しブロック
  ============================================================ */
.top-s06__headline-block {
  /* 7/12 幅 をモバイルでは全幅 */
  max-inline-size: 100%;
  margin-block-end: var(--top-s06-headline-to-grid-gap);
}

.top-s06__subtitle {
  font-family: var(--font--display);
  font-size: var(--top-s06-font-subtitle-size);
  font-weight: var(--top-s06-font-subtitle-weight);
  font-style: italic;
  line-height: var(--top-s06-font-subtitle-lh);
  letter-spacing: var(--top-s06-font-subtitle-ls);
  color: var(--top-s06-color-subtitle);
  margin-block-end: var(--top-s06-subtitle-to-headline-gap);
}


/* "Menu" — Playfair Display italic ピンク */
.top-s06__section-title-deco {
  display: block;
  align-items: baseline;
  font-family: var(--font--display);
  font-size: var(--top-s06-font-title-deco);
  font-weight: 400;
  font-style: italic;
  color: var(--top-s06-color-title-deco);
}

/* "メニュー" — Playfair Display ディープローズ */
.top-s06__section-title-label {
  display: block;
  align-items: baseline;
  font-family: var(--font--heading);
  font-size: var(--top-s06-font-title-label);
  font-weight: 700;
  font-style: normal;
  color: var(--top-s06-color-title-label);

  line-height: 1;
  /* "Menu" の文字幅の約40〜50%分だけ右にずらす */
  margin-inline-start: clamp(2.813rem, 2.563rem + 1.25vw, 4.063rem);
  /* Menu の下端とメニューの上端が少し被るよう上に引き上げる */
  margin-block-start: clamp(-1.8rem, -1.84rem + 0.2vw, -1.6rem);
  margin-block-end: var(--top-s06-section-title-label-gap);
}


/* 1文字ずつのアニメーション設定 */
.top-s06__section-title-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  /* transition-delay は JS が style 属性で付与する */
  transition:
    opacity   var(--top-s06-char-duration) var(--top-s06-char-easing),
    transform var(--top-s06-char-duration) var(--top-s06-char-easing);
}

/* JS がクラスを付与して表示状態へ */
.top-s06__section-title-char.top-s06-js-char-visible {
  opacity: 1;
  transform: translateY(0);
}


.top-s06__heading {
  font-family: var(--font--heading);
  font-size: var(--top-s06-font-heading-size);
  font-weight: var(--top-s06-font-heading-weight);
  line-height: var(--top-s06-font-heading-lh);
  letter-spacing: var(--top-s06-font-heading-ls);
  color: var(--top-s06-color-heading);
  margin-block-end: 1rem;
}

.top-s06__body-line1,
.top-s06__body-line2 {
  font-family: var(--font--body);
  font-size: var(--top-s06-font-body-size);
  font-weight: var(--top-s06-font-body-weight);
  line-height: var(--top-s06-font-body-lh);
  color: var(--top-s06-color-heading);
}

.top-s06__body-line1 {
  margin-block-end: 1em;
}


/* ============================================================
  カードグリッド — モバイル
  ============================================================ */
.top-s06__card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px; /* --mobile-card-L-to-M */
}

.top-s06__card-m-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--top-s06-card-m-gap);
}


/* ============================================================
  カード共通
  ============================================================ */
.top-s06__card {
  background-color: var(--top-s06-color-card-bg);
  border-radius: var(--radius--sm, 4px);
  overflow: hidden;
}

.top-s06__card--l {
  box-shadow: var(--top-s06-shadow-card-l);
}

.top-s06__card--m {
  display: grid;
  align-content: space-between;
  box-shadow: var(--top-s06-shadow-card-m);
  padding: var(--top-s06-card-m-pad);
  /* モバイルではパディングを少し小さく */
  padding: 20px 16px;
}


/* ============================================================
  カード L
  ============================================================ */
.top-s06__card-photo-wrap {
  inline-size: 100%;
  block-size: 300px; /* モバイル */
  overflow: hidden;
}

.top-s06__card-photo {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  /* MI-2 Phase 2: scale アニメーション初期状態 */
  /* transform: scale(1.02); */
  transition:
    transform var(--top-s06-mi2-duration-p2) var(--top-s06-mi2-easing-p2);
}

/* Photo visible 状態（JS が付与） */
.top-s06-js-card-l-photo-visible {
  transform: scale(1.0);
}

.top-s06__card-body {
  padding: var(--top-s06-card-l-pad);
}

/* カード M はパディングを card-body に付与しない（card--m 自体に付与済み） */
.top-s06__card--m .top-s06__card-body {
  padding: 0;
}

.top-s06__card-name {
  font-family: var(--font--heading);
  color: var(--top-s06-color-course-name);
  line-height: var(--top-s06-font-course-l-lh);
  margin-block-end: var(--top-s06-course-to-meta-gap);
}

.top-s06__card--l .top-s06__card-name {
  font-size: var(--top-s06-font-course-l-size);
  font-weight: var(--top-s06-font-course-l-weight);
}

.top-s06__card--m .top-s06__card-name {
  font-size: var(--top-s06-font-course-m-size);
  font-weight: var(--top-s06-font-course-m-weight);
  line-height: var(--top-s06-font-course-m-lh);
}

.top-s06__card-desc {
  font-family: var(--font--body);
  font-size: var(--top-s06-font-meta-size);
  font-weight: var(--top-s06-font-meta-weight);
  line-height: var(--top-s06-font-meta-lh);
  color: var(--top-s06-color-meta);
  margin-block-end: var(--top-s06-course-to-meta-gap);
}

.top-s06__card-meta {
  font-family: var(--font--body);
  font-size: var(--top-s06-font-meta-size);
  font-weight: var(--top-s06-font-meta-weight);
  line-height: var(--top-s06-font-meta-lh);
  letter-spacing: var(--top-s06-font-meta-ls);
  color: var(--top-s06-color-meta);
  margin-block-end: var(--top-s06-course-to-link-gap);
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.top-s06__card-sep {
  color: var(--top-s06-color-sep);
}

.top-s06__card-type {
  font-family: var(--font--body);
  font-size: var(--top-s06-font-meta-size);
  font-weight: var(--top-s06-font-meta-weight);
  letter-spacing: 0.12em;
  color: var(--top-s06-color-meta);
  margin-block-end: var(--top-s06-course-to-link-gap);
}


/* ============================================================
  詳しく見るリンク（全カード共通）
  ============================================================ */
.top-s06__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font--body);
  font-size: var(--top-s06-font-detail-size);
  font-weight: var(--top-s06-font-detail-weight);
  line-height: var(--top-s06-font-detail-lh);
  letter-spacing: var(--top-s06-font-detail-ls);
  color: var(--top-s06-color-detail-link);
  text-decoration: none;
  /* A8: タッチターゲット */
  min-block-size: 44px;
  padding-block: 8px;
  padding-inline: 4px;
  transition: color var(--top-s06-hover-duration) var(--top-s06-hover-easing);
}

.top-s06__card-link:hover,
.top-s06__card-link:focus-visible {
  color: var(--top-s06-color-detail-link-hover);
}

.top-s06__card-link:focus-visible {
  outline: 2px solid var(--top-s06-color-focus);
  outline-offset: 3px;
}

.top-s06__card-link-arrow {
  display: inline-block;
  transition: transform var(--top-s06-hover-duration) var(--top-s06-hover-easing);
}

.top-s06__card-link:hover .top-s06__card-link-arrow,
.top-s06__card-link:focus-visible .top-s06__card-link-arrow {
  transform: translateX(4px);
}


/* ============================================================
  区切り線
  ============================================================ */
.top-s06__divider {
  block-size: 1px;
  background-color: var(--top-s06-color-divider);
  margin-block-start: var(--top-s06-mobile-grid-to-divider);
  /* MI-4 Phase 1: 左から右へ伸びるアニメーション初期状態 */
  inline-size: 0;
  transform-origin: left center;
  transition: inline-size var(--top-s06-mi4-duration-divider) var(--top-s06-mi4-easing);
}

.top-s06-js-divider-visible {
  inline-size: 100%;
}


/* ============================================================
  CTA エリア
  ============================================================ */
.top-s06__cta-wrap {
  margin-block-start: var(--top-s06-mobile-divider-to-cta);
  text-align: center;
}

.top-s06__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font--body);
  font-size: var(--top-s06-font-cta-size);
  font-weight: var(--top-s06-font-cta-weight);
  line-height: var(--top-s06-font-cta-lh);
  letter-spacing: var(--top-s06-font-cta-ls);
  color: var(--top-s06-color-cta);
  text-decoration: none;
  /* A8: タッチターゲット */
  min-block-size: 44px;
  padding-block: 8px;
  padding-inline: 8px;
  transition: color var(--top-s06-mi5-duration) var(--top-s06-mi5-easing);
}

.top-s06__cta:hover {
  color: var(--top-s06-color-cta-hover);
}

.top-s06__cta:focus-visible {
  outline: 2px solid var(--top-s06-color-focus);
  outline-offset: 3px;
}

.top-s06__cta-arrow {
  display: inline-block;
  transition: transform var(--top-s06-mi5-duration) var(--top-s06-mi5-easing);
}

.top-s06__cta:hover .top-s06__cta-arrow {
  transform: translateX(4px);
}


/* ============================================================
  アニメーション初期状態クラス（CSS が隠す → JS が visible を付与）
  ============================================================ */

/* MI-1 Phase 1: 英字サブタイトル */
.top-s06-js-subtitle-hidden {
  opacity: 0;
  transform: translateY(var(--top-s06-mi1-translate-subtitle));
  letter-spacing: var(--top-s06-font-subtitle-ls-start);

}

.top-s06-js-subtitle-visible {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: var(--top-s06-font-subtitle-ls);
  transition:
    opacity   var(--top-s06-mi1-duration-p1) var(--top-s06-mi1-easing),
    transform var(--top-s06-mi1-duration-p1) var(--top-s06-mi1-easing),
    letter-spacing var(--top-s06-mi1-duration-p1) var(--top-s06-mi1-easing);

}

/* MI-1 Phase 2: 和文見出し */
.top-s06-js-heading-visible {
  opacity: 1;
  transform: translateY(0);
}

/* MI-2 Phase 1: カード L 全体 */
.top-s06-js-card-l-hidden {
  opacity: 0;
  transform: translateY(var(--top-s06-mi2-translate));

}

.top-s06-js-card-l-visible {
  opacity: 1;
  transition:
    opacity   var(--top-s06-mi2-duration-p1) var(--top-s06-mi2-easing-p1),
    transform var(--top-s06-mi2-duration-p1) var(--top-s06-mi2-easing-p1);
}

/* MI-2 Phase 2: カード L 写真のみ（scale は .top-s06__card-photo に直接定義済み） */
/* 初期状態として scale(1.02) は .top-s06__card-photo のデフォルトスタイルで設定済み */
/* visible クラスは上で定義済み: .top-s06-js-card-l-photo-visible { transform: scale(1.0); } */

/* MI-3: カード M-top */
.top-s06-js-card-m-top-hidden {
  opacity: 0;
  transform: translateY(var(--top-s06-mi3-translate));

}

.top-s06-js-card-m-top-visible {
  opacity: 1;
  transition:
    opacity   var(--top-s06-mi3-duration) var(--top-s06-mi3-easing),
    transform var(--top-s06-mi3-duration) var(--top-s06-mi3-easing);
}

/* MI-3: カード M-bottom */
.top-s06-js-card-m-bottom-hidden {
  opacity: 0;
  transform: translateY(var(--top-s06-mi3-translate));
}

.top-s06-js-card-m-bottom-visible {
  opacity: 1;
  transition:
    opacity   var(--top-s06-mi3-duration) var(--top-s06-mi3-easing),
    transform var(--top-s06-mi3-duration) var(--top-s06-mi3-easing);
}

/* MI-4 Phase 2: CTA テキストリンク */
.top-s06-js-cta-hidden {
  opacity: 0;
  transform: translateY(var(--top-s06-mi4-translate-cta));

}

.top-s06-js-cta-visible {
  opacity: 1;
  transition:
    opacity   var(--top-s06-mi4-duration-cta) var(--top-s06-mi4-easing),
    transform var(--top-s06-mi4-duration-cta) var(--top-s06-mi4-easing);
}


/* ============================================================
  デスクトップレイアウト（375px 以上 → 769px 以上で本格適用）
  ============================================================ */
@media (width >= 769px) {

  .top-s06 {
    padding-block-start: var(--top-s06-section-pt-desktop);
    padding-block-end:   var(--top-s06-section-pb-desktop);
  }

  .top-s06__inner {
    padding-inline: var(--padding--desktop, 64px);
  }

  /* 見出しブロック: 7/12 列幅 */
  .top-s06__headline-block {
    /* 12 列グリッドの 7 列相当。inner は max-width 1200px で中央寄せ済み */
    max-inline-size: calc((7 / 12) * 100%);
  }

  /* カードグリッド: 12 列グリッドで L=7列・M列=5列 */
  .top-s06__card-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--top-s06-col-gap);
    align-items: start;
    margin-block-end: 0;
  }

  /* カード M 列: 縦に 2 枚スタック */
  .top-s06__card-m-col {
    display: flex;
    flex-direction: column;
    gap: var(--top-s06-card-m-gap);
    height: 100%;
  }

  /* カード L 写真エリア: デスクトップ高さ */
  /* .top-s06__card-photo-wrap {
    block-size: 300px;
  } */

  /* カード M: デスクトップパディングに戻す */
  .top-s06__card--m {
    padding: var(--top-s06-card-m-pad);
    min-block-size: 0;
    flex: 1;           /* 親の高さに合わせて伸縮 */
  }

  /* 区切り線 */
  .top-s06__divider {
    margin-block-start: var(--top-s06-grid-to-divider-gap);
  }

  /* CTA */
  .top-s06__cta-wrap {
    margin-block-start: var(--top-s06-divider-to-cta-gap);
  }
}


/* ============================================================
   prefers-reduced-motion
   ※ このセクション固有のアニメーションのみを上書きする。
     グローバルな *, *::before, *::after への一括上書きは行わない。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  /* MI-1 */
  .top-s06-js-subtitle-hidden,
  .top-s06-js-subtitle-visible {
    transition-duration: 0.01ms !important;
    transform: none !important;
    letter-spacing: var(--top-s06-font-subtitle-ls) !important;
  }

  .top-s06-js-heading-hidden,
  .top-s06-js-heading-visible {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  .top-s06__section-title-char {
    transition-duration: 0.01ms !important;
    transform: none !important;
    opacity: 1 !important; /* 初期状態で非表示になるためここで即表示 */
  }
  .top-s06__section-title-char.top-s06-js-char-visible {
    transition-duration: 0.01ms !important;
  }


  /* MI-2 */
  .top-s06-js-card-l-hidden,
  .top-s06-js-card-l-visible {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  /* MI-2 Phase 2: 写真 scale 無効化 */
  .top-s06__card-photo {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  .top-s06-js-card-l-photo-hidden,
  .top-s06-js-card-l-photo-visible {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  /* MI-3 */
  .top-s06-js-card-m-top-hidden,
  .top-s06-js-card-m-top-visible,
  .top-s06-js-card-m-bottom-hidden,
  .top-s06-js-card-m-bottom-visible {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  /* MI-4 区切り線: 即全幅表示 */
  .top-s06__divider,
  .top-s06-js-divider-hidden {
    transition-duration: 0.01ms !important;
    inline-size: 100% !important;
  }

  /* MI-4 CTA */
  .top-s06-js-cta-hidden,
  .top-s06-js-cta-visible {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  /* MI-5 ホバー */
  .top-s06__cta-arrow,
  .top-s06__card-link-arrow {
    transition-duration: 0.01ms !important;
  }
}