/*
  Enqueue in functions.php:
  wp_enqueue_style(
    'top-style',
    get_template_directory_uri() . '/assets/css/top.css',
    array(),
    '1.0.0'
  );
*/

/* ============================================================
   Section-scoped design tokens — top-s05 (お客様の声)
   ※ common.css :root の共通変数は再宣言しない。var() で参照のみ。
============================================================ */
:root {
  /* --- Colors --- */
  --top-s05-color-section-bg:          #FFFFFF;
  --top-s05-color-title-deco:          #F9A8D4;
  --top-s05-color-headline:            #831843;
  --top-s05-color-card-shadow:         rgba(131, 24, 67, 0.06);
  --top-s05-color-card-a-bg:           #FDF2F8;
  --top-s05-color-card-a-line:         #EC4899;
  --top-s05-color-card-a-text:         #831843;
  --top-s05-color-card-a-highlight:    #EC4899;

  --top-s05-color-card-b-bg:           #FFFFFF;
  --top-s05-color-card-b-border:       #F9A8D4;
  --top-s05-color-card-b-text:         #831843;
  --top-s05-color-card-b-highlight:    #EC4899;
  --top-s05-color-card-c-bg:           #FDF2F8;
  --top-s05-color-card-c-line:         #EC4899;
  --top-s05-color-card-c-text:         #831843;
  --top-s05-color-attribution:         #64748B;
  --top-s05-color-cta-default:         #831843;
  --top-s05-color-cta-hover:           #EC4899;
  --top-s05-color-focus:               #8B5CF6;

  /* --- Typography: font sizes --- */
  --top-s05-fs-title-label:   clamp(1.125rem, 0.975rem + 0.75vw, 1.875rem);
  --top-s05-fs-title-deco:    clamp(2.5rem, 5vw, 4rem);
  --top-s05-fs-headline:      clamp(1.75rem, 3vw, 2.5rem);
  --top-s05-fs-card-a-body:   clamp(1.125rem, 1.8vw, 1.375rem);
  --top-s05-fs-card-b-body:   clamp(1.125rem, 1.8vw, 1.375rem);
  --top-s05-fs-card-c-body:   clamp(1.125rem, 1.8vw, 1.375rem);
  --top-s05-fs-attribution:   clamp(1rem, 1vw, 0.875rem);
  /* A4対応: 0.75rem → 1rem (16px) に引き上げ */
  --top-s05-fs-cta:           clamp(0.875rem, 1.1vw, 0.9375rem);

  /* --- Typography: line-heights --- */
  --top-s05-lh-headline:      1.3;
  --top-s05-lh-card-a-body:   1.9;
  --top-s05-lh-card-b-body:   1.9;
  --top-s05-lh-card-c-body:   1.9;
  --top-s05-lh-attribution:   1.75;
  /* A5対応: 1.4 → 1.75 に引き上げ */
  --top-s05-lh-cta:           1.4;

  /* --- Typography: letter-spacings --- */
  --top-s05-ls-headline:      0.02em;
  --top-s05-ls-attribution:   0.1em;
  --top-s05-ls-cta:           0.12em;

  /* --- Spacing --- */
  --top-s05-padding-section-desktop:   96px;
  --top-s05-padding-section-mobile:    64px;
  --top-s05-section-title-label-gap:   32px;
  --top-s05-gap-col:                   16px;
  --top-s05-gap-headline-to-card-a:    64px;
  --top-s05-gap-card-a-to-b:           32px;
  --top-s05-gap-card-b-to-c:           32px;
  --top-s05-gap-card-c-to-cta:         96px;
  --top-s05-pad-card-a-v:              48px;
  --top-s05-pad-card-a-h:              40px;
  --top-s05-pad-card-b-v:              40px;
  --top-s05-pad-card-b-h:              40px;
  --top-s05-pad-card-c-v:              48px;
  --top-s05-pad-card-c-h:              40px;
  /* --top-s05-pad-card-c-left:           24px; */
  --top-s05-gap-mobile-a-to-b:         24px;
  --top-s05-gap-mobile-b-to-c:         16px;
  --top-s05-gap-mobile-c-to-cta:       64px;
  --top-s05-gutter-desktop:            64px;
  --top-s05-gutter-mobile:             24px;

  /* --- Animation: MI-1 --- */
  --top-s05-ease-standard:     cubic-bezier(0.33, 1, 0.68, 1);
  --top-s05-dur-mi1-headline:  700ms;
  --top-s05-ease-mi1:          cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Animation: MI-2 --- */
  --top-s05-dur-mi2-card:      900ms;
  --top-s05-dur-mi2-line:      600ms;
  --top-s05-dur-mi2-color:     600ms;
  --top-s05-ease-mi2-card:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --top-s05-ease-mi2-line:     cubic-bezier(0.16, 1, 0.3, 1);
  --top-s05-ease-mi2-color:    ease;

  /* --- Animation: MI-3 --- */
  --top-s05-dur-mi3-card-b:    700ms;
  --top-s05-dur-mi3-card-c:    800ms;
  --top-s05-dur-mi3-line-c:    600ms;
  --top-s05-ease-mi3:          cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* --- Animation: MI-4 --- */
  --top-s05-dur-mi4:           300ms;
  --top-s05-ease-mi4:          ease;

  /* --- Card A accent-line height target --- */
  --top-s05-line-a-height:     0%;
  /* JSで is-animated 付与後に calc(100% - 96px) へ遷移 */
}


/* ============================================================
   Section Base
============================================================ */
.top-s05__section {
  background-color: var(--top-s05-color-section-bg);
  padding-block-start: var(--top-s05-padding-section-mobile);
  padding-block-end:   var(--top-s05-padding-section-mobile);
  overflow-x: hidden;
}

.top-s05__inner {
  padding-inline: var(--top-s05-gutter-mobile);
  column-gap: 0;
  row-gap: 0;
  align-items: start;
}


/* ============================================================
   見出しブロック
============================================================ */
.top-s05__headline-block {
  display: block;
  position: relative;
  margin-block-end: var(--top-s05-gap-headline-to-card-a);
  align-items: baseline;
  line-height: 1.1;
}

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

/* "お客様の声" — Playfair Display ディープローズ */
.top-s05__section-title-label {
  display: block;
  align-items: baseline;
  font-family: var(--font--heading);
  font-size: var(--top-s05-fs-title-label);
  font-weight: 700;
  font-style: normal;
  color: var(--color--brand);

  line-height: 1;
  /* "Voice" の文字幅の約40〜50%分だけ右にずらす */
  margin-inline-start: clamp(2.813rem, 2.563rem + 1.25vw, 4.063rem);
  /* Voice の下端とお客様の声の上端が少し被るよう上に引き上げる */
  margin-block-start: clamp(-1.5rem, -1.6rem + 0.5vw, -1rem);
  margin-block-end: var(--top-s05-section-title-label-gap);
}


/* 1文字ずつのアニメーション設定 */
.top-s05__section-title-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity  0.3s var(--top-s05-ease-standard),
    transform 0.3s var(--top-s05-ease-standard);
  /* 文字ごとの遅延用にインデックスを持たせる */
  /* transition-delay: calc(var(--char-index) * 0.08s); */
}

/* JSがクラスを付与して表示 */
.top-s05__section-title-char.is-visible {
  opacity: 1;
  transform: translateY(0);
}



/* サブ見出し */
.top-s05__sub-headline {
  font-size: var(--top-s05-fs-headline);
  line-height: var(--top-s05-lh-headline);
  color: var(--top-s05-color-headline);
  margin-top: 0.5em;
}

/* ============================================================
   Bento Grid — mobile (default: 2列)
   ============================================================ */
.top-s05__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--top-s05-gap-col);
}

/* Grid 非表示初期状態 — タイプライター完了まで隠す */
.top-s05__grid.js-grid-hidden {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   0.6s var(--top-s05-ease-standard),
    transform 0.6s var(--top-s05-ease-standard);
}



  /* display: grid;
  grid-template-columns: repeat(12, 1fr); */

/* ============================================================
   カード共通
============================================================ */
.top-s05__card {
  position: relative;
}

.top-s05__card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--4);
}

.top-s05__card-photo-wrap {
  flex-shrink: 0;
}

.top-s05__card-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 256px;
  max-height: 256px;
  border-radius: var(--radius--lg);
  object-fit: cover;
  object-position: center 30%;
  aspect-ratio: 4 / 3;
}

.top-s05__card-body-wrap {
  flex: 1;
}

.top-s05__card-body {
  margin: 0;
  padding: 0;
}


/* ============================================================
   証言カードA
============================================================ */
.top-s05__card--a {
  grid-column: 1 / -1;
  background-color: var(--top-s05-color-card-a-bg);
  border-radius: var(--radius--lg);
  box-shadow: 0 4px 24px var(--top-s05-color-card-shadow);
  padding: var(--top-s05-pad-card-a-v) var(--top-s05-pad-card-a-h);
  margin-block-end: var(--top-s05-gap-mobile-a-to-b);
  overflow: hidden;
}

/* 左縦アクセントライン (Card A) — 疑似要素で高さアニメーション対応 */
.top-s05__card-a-accent-line {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 48px;
  /* Card A padding-top 分オフセット */
  inline-size: 3px;
  block-size: 0%;
  /* JS is-line-animated で calc(100% - 96px) へ遷移 */
  background-color: var(--top-s05-color-card-a-line);
  transform-origin: top;
  transition: block-size var(--top-s05-dur-mi2-line) var(--top-s05-ease-mi2-line);
  border-radius: 0 0 var(--radius--sm) var(--radius--sm);
}

.top-s05__card--a.is-line-animated .top-s05__card-a-accent-line {
  block-size: calc(100% - 96px);
}

.top-s05__card-text--a {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--top-s05-fs-card-a-body);
  line-height: var(--top-s05-lh-card-a-body);
  color: var(--top-s05-color-card-a-text);
  margin: 0;
}

/* Card A ハイライトフレーズ */
.top-s05__highlight--a {
  font-weight: 600;
  color: var(--top-s05-color-card-a-text);
  /* 初期色: #831843 — JS color-transition クラスで #EC4899 へ遷移 */
  transition: color var(--top-s05-dur-mi2-color) var(--top-s05-ease-mi2-color);
}

.top-s05__highlight--a.is-color-lit {
  color: var(--top-s05-color-card-a-highlight);
}

/* Card A attribution */
.top-s05__attribution--a {
  margin-block-start: var(--space--4);
}


/* ============================================================
   証言カードB
============================================================ */
.top-s05__card--b {
  grid-column: 1 / -1;
  background-color: var(--top-s05-color-card-b-bg);
  border: 1px solid var(--top-s05-color-card-b-border);
  border-radius: var(--radius--lg);
  padding: var(--top-s05-pad-card-b-v) var(--top-s05-pad-card-b-h);
  padding-inline-start: calc(var(--top-s05-pad-card-b-h) + 8px);
  /* モバイル: A4 micro left-offset 8px */
  margin-block-end: var(--top-s05-gap-mobile-b-to-c);
}

.top-s05__card-text--b {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--top-s05-fs-card-b-body);
  line-height: var(--top-s05-lh-card-b-body);
  color: var(--top-s05-color-card-b-text);
  margin: 0;
}

/* Card B インラインハイライト（フォント切り替え） */
.top-s05__highlight--b {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-style: italic;
  color: var(--top-s05-color-card-b-highlight);
}

/* Card B attribution */
.top-s05__attribution--b {
  margin-block-start: var(--space--4);
}

/* モバイル: テキストブロックを後方に */
.top-s05__card--b .top-s05__card-body-wrap {
  order: 1;
}

/* Card B: モバイルでは写真を下部に */
.top-s05__card-photo-wrap--b {
  order: 0;
  max-inline-size: 100%;
  align-self: auto;
}


/* ============================================================
   証言カードC
============================================================ */
.top-s05__card--c {
  grid-column: 1 / -1;
  background-color: var(--top-s05-color-card-c-bg);
  border-radius: var(--radius--lg);
  box-shadow: 0 4px 24px var(--top-s05-color-card-shadow);
  padding: var(--top-s05-pad-card-c-v) var(--top-s05-pad-card-c-h);
  position: relative;
  margin-block-end: var(--top-s05-gap-mobile-c-to-cta);
}

/* 左縦ライン (Card C) */
.top-s05__card-c-accent-line {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 2px;
  block-size: 0%;
  background-color: var(--top-s05-color-card-c-line);
  transform-origin: top;
  transition: block-size var(--top-s05-dur-mi3-line-c) var(--top-s05-ease-mi3);
  transition-delay: 600ms;
}

.top-s05__card--c.is-line-animated .top-s05__card-c-accent-line {
  block-size: calc(100% - 96px);
}

.top-s05__card-c-accent-line {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 48px;
    inline-size: 3px;
    block-size: 0%;
    background-color: var(--top-s05-color-card-a-line);
    transform-origin: top;
    transition: block-size var(--top-s05-dur-mi2-line) var(--top-s05-ease-mi2-line);
    border-radius: 0 0 var(--radius--sm) var(--radius--sm);
}

.top-s05__card-text--c {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--top-s05-fs-card-c-body);
  line-height: var(--top-s05-lh-card-c-body);
  color: var(--top-s05-color-card-c-text);
  margin: 0;
}

/* Card C attribution */
.top-s05__attribution--c {
  margin-block-start: var(--space--4);
}

.top-s05__card-photo-wrap--c {
  max-inline-size: 100%;
  align-self: auto;
}

/* ============================================================
   Attribution 共通
============================================================ */
.top-s05__attribution-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: var(--top-s05-fs-attribution);
  line-height: var(--top-s05-lh-attribution);
  letter-spacing: var(--top-s05-ls-attribution);
  color: var(--top-s05-color-attribution);
  margin: 0;
}


/* ============================================================
   CTAテキストリンク
============================================================ */
.top-s05__cta-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

.top-s05__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-block-size: 44px;
  /* A8対応: タッチターゲット最小44px */
  min-inline-size: 44px;
  padding-inline: var(--space--4);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: var(--top-s05-fs-cta);
  line-height: var(--top-s05-lh-cta);
  letter-spacing: var(--top-s05-ls-cta);
  color: var(--top-s05-color-cta-default);
  text-decoration: none;
  transition:
    color var(--top-s05-dur-mi4) var(--top-s05-ease-mi4);
}

.top-s05__cta-link:hover,
.top-s05__cta-link:focus-visible {
  color: var(--top-s05-color-cta-hover);
}

.top-s05__cta-link:focus-visible {
  outline: 2px solid var(--top-s05-color-focus);
  outline-offset: 3px;
  border-radius: var(--radius--sm);
}

.top-s05__cta-arrow {
  display: inline-block;
  transition: transform var(--top-s05-dur-mi4) var(--top-s05-ease-mi4);
}

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


/* ============================================================
   アニメーション初期状態クラス (CSS定義 — JSがクラス除去で遷移発火)
============================================================ */

/* 見出しブロック */
.top-s05__deco-quote.js-animate-hidden {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity  var(--top-s05-dur-mi1-quote)    var(--top-s05-ease-mi1),
    transform var(--top-s05-dur-mi1-quote)   var(--top-s05-ease-mi1);
}

.top-s05__headline.js-animate-hidden {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   var(--top-s05-dur-mi1-headline) var(--top-s05-ease-mi1),
    transform var(--top-s05-dur-mi1-headline) var(--top-s05-ease-mi1);
}

/* 見出しブロックのラッパー自体には初期状態クラス付与
   子要素（deco-quote / headline）に個別付与するため
   ラッパーのjs-animate-hiddenは位置決めのみ使用 */
.top-s05__headline-block.js-animate-hidden {
  /* ラッパーは opacity 制御しない — 子要素を個別アニメーション */
}

/* Card A */
.top-s05__card--a.js-animate-hidden {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--top-s05-dur-mi2-card) var(--top-s05-ease-mi2-card),
    transform var(--top-s05-dur-mi2-card) var(--top-s05-ease-mi2-card);
}

/* Card B */
.top-s05__card--b.js-animate-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--top-s05-dur-mi3-card-b) var(--top-s05-ease-mi3),
    transform var(--top-s05-dur-mi3-card-b) var(--top-s05-ease-mi3);
  transition-delay: 300ms;
}

/* Card C */
.top-s05__card--c.js-animate-hidden {
  opacity: 0;
  /* translateY なし — opacity のみ */
  transition:
    opacity var(--top-s05-dur-mi3-card-c) var(--top-s05-ease-mi3);
  transition-delay: 600ms;
}

/* アニメーション実行状態 (js-animate-hiddenを除去した状態) */
.top-s05__deco-quote,
.top-s05__headline,
.top-s05__card--a,
.top-s05__card--b,
.top-s05__card--c {
  opacity: 1;
  transform: none;
}


/* ============================================================
   Desktop Layout (width >= 1024px)
============================================================ */
@media (width >= 1024px) {
.top-s05__grid {
    grid-template-columns: repeat(12, 1fr);
}
  .top-s05__section {
    padding-block-start: var(--top-s05-padding-section-desktop);
    padding-block-end:   var(--top-s05-padding-section-desktop);
  }

  .top-s05__inner {
    padding-inline: var(--top-s05-gutter-desktop);
    column-gap: 0;
  }

  .top-s05__card-photo {
    aspect-ratio: 1 / 1;
    object-position: center 100%;
  }

  /* 見出しブロック: col 1–11 */
  .top-s05__headline-block {
    grid-column: 1 / 8;
    margin-block-end: var(--top-s05-gap-headline-to-card-a);
  }

  /* Card A: col 1–8 */
  .top-s05__card--a {
    grid-column: 1 / 11;
    margin-block-end: 0;
    margin-block-start: 0;
  }

  .top-s05__card--a .top-s05__card-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space--8);
  }

  .top-s05__card--a .top-s05__card-photo-wrap {
    flex: 0 0 280px;
  }

  /* Card B: col 4–12 (col-startを4に合わせる) */
  .top-s05__card--b {
    grid-column: 4 / 13;
    margin-block-start: var(--top-s05-gap-card-a-to-b);
    margin-block-end: 0;
    padding-inline-start: var(--top-s05-pad-card-b-h);
    /* デスクトップでは8px追加オフセット不要 */
  }

  .top-s05__card--b .top-s05__card-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space--8);
  }

  .top-s05__card-photo-wrap--b {
    order: 2;
    max-inline-size: none;
    flex: 0 0 280px;
    align-self: auto;
  }


  /* Card C: col 1–11 */
  .top-s05__card--c {
    grid-column: 1 / 11;
    margin-block-start: var(--top-s05-gap-card-b-to-c);
    margin-block-end: 0;
  }

.top-s05__card--c .top-s05__card-inner {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space--8);
}

  .top-s05__card-photo-wrap--c {
    max-inline-size: none;
    flex: 0 0 280px;
    align-self: auto;
  }

  /* CTA wrap: full width, gap from Card C */
  .top-s05__cta-wrap {
    grid-column: 1 / -1;
    margin-block-start: var(--top-s05-gap-card-c-to-cta);
  }
}


/* ============================================================
   Focus indicator — 全インタラクティブ要素
============================================================ */
.top-s05__section a:focus-visible,
.top-s05__section button:focus-visible {
  outline: 2px solid var(--top-s05-color-focus);
  outline-offset: 3px;
}


/* ============================================================
   prefers-reduced-motion
   ※ このセクションスコープに限定した記述
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .top-s05__section *,
  .top-s05__section *::before,
  .top-s05__section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}