/* ==========================================================================
   components/closing-cta.css — フッター直前 CTA
   --------------------------------------------------------------------------
   ★もとは demo/b1-cta.css。全ページ共通部品になったので components/ へ移した
     （三嶋指示「別ページも上 CTA ／下フッターの両方出す」）。

   ★★地はこの要素が持っていない。フッターと二つまとめて .site-outro が塗る。
     グラデーションを上下でつなげるため（三嶋指示）。site-outro.css を参照。
     ここに background を書き戻すと、境目にまた段差が出る。
   ========================================================================== */

.closing-cta {
  position: relative;
  /* ★isolation は z-index:-1 のリング（削除済み）のために付いていた。
     いま重ねているものは無いので外した。 */
  overflow: hidden;
  padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  /* ★.on-inverse の background-color（navy-800 のベタ）を消す。
     これを書かないと親のグラデーションが隠れる。 */
  background: transparent;
}

/*
  ★右上にあった «円形リング＋同心の光» は削除（三嶋指示）。
    border と box-shadow の spread で作っていたため、
    どれも «はっきりした縁» を持ち、装飾ではなく «図形» として見えていた。
    地のグラデーション（上の radial-gradient）だけを残している。
    こちらは縁を持たないので、面のムラとしてしか見えない。
  ★復活させないこと。
*/

.closing-cta__inner {
  position: relative;
}

/*
  ★三嶋指示で中央寄せにしている。
    CLAUDE.md の「見出しを中央揃えにしない」（才流との差別化）に対する例外。
    この 1 か所だけの判断で、他のセクション見出しは左揃えのまま。
  ★中央に置くので max-width だけでは足りない。margin-inline: auto が要る。
*/
.closing-cta__head {
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
  text-align: center;
}

.closing-cta__kind {
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

/*
  ★三嶋指示で «小さめ» に。--text-5xl（36〜52px）→ --text-3xl（26〜32px）。
    他のセクション見出し（.sec-head__title = --text-4xl / 30〜40px）より
    さらに 1 段小さい。下の 2 枚組が主役で、この行はその «前置き» という扱い。
*/
.closing-cta__title {
  color: var(--white);
  /*
    ★--text-3xl をそのまま使わず、SP 側だけ下げた専用の clamp にしている。
      理由：SP で «…お問い / 合わせ…» と語中で折れる。
      375px の使える幅は 335px。いちばん長い «ご相談・お問い合わせはこちら»（14 字）は
      26.4px（--text-3xl の SP 値）だと 374px 必要で 1 行に入らない。
      **行より長い語句は、どの折り返し方式でも割れる。**
      実際 word-break: auto-phrase も text-wrap: balance も結果は同じだった。
      折り返し方式ではなくサイズで解くしかない。
      22.65px なら 14 字が 317px で収まる（実測）。
    ★PC 側は 2rem（32px）で --text-3xl の最大値と同じ。見た目は変わらない。
  */
  font-size: clamp(1.4rem, 2.2vw + 0.9rem, 2rem);
  font-weight: var(--fw-bold);
  /* ★三嶋指示で 1.5 → 1.7。--lh-heading（見出し用）ではなく直値。
     2 行の間を空けて «前置き» らしく読ませる。 */
  line-height: 1.7;
  letter-spacing: var(--ls-heading);
  /* 文節の切れ目で折る（このサイトの他の見出しと同じ手） */
  word-break: auto-phrase;
}

.closing-cta__grid {
  display: grid;
  gap: var(--space-5);
}

.closing-cta__main,
.closing-cta__sub-link {
  position: relative;
  display: grid;
  text-decoration: none;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.closing-cta__main {
  min-height: clamp(18rem, 25vw, 21rem);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  grid-template-rows: auto 1fr auto;
  color: var(--navy-800);
  background: var(--white);
}

/* .on-inverse 内の共通 a:hover（白文字）より詳細度を上げる。
   左カードはホバー後も淡い背景なので、文字・矢印を濃紺のまま保つ。 */
.closing-cta__main:hover,
.closing-cta__main:focus-visible {
  color: var(--navy-800);
}

.closing-cta__main::before,
.closing-cta__sub-link::before {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--navy-100);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.closing-cta__main > *,
.closing-cta__sub-link > * {
  position: relative;
}

.closing-cta__main:hover::before,
.closing-cta__main:focus-visible::before,
.closing-cta__sub-link:hover::before,
.closing-cta__sub-link:focus-visible::before {
  transform: scaleX(1);
}

.closing-cta__kind {
  color: var(--navy-500);
}

.closing-cta__main-body {
  display: grid;
  align-content: center;
  gap: var(--space-5);
  max-width: 38rem;
}

.closing-cta__main-title {
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.closing-cta__main-text,
.closing-cta__sub-text {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.closing-cta__main-text {
  color: var(--gray-700);
}

/* ★2026-10-05 今林指示で中身は資料ダウンロード 1 枚になった。
   行を 1fr にして、900px 以上では左の MAIN と同じ高さまで広げる。 */
.closing-cta__sub {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--space-5);
}

/*
  ★2026-10-05 今林指示：右が資料ダウンロード 1 枚になり、文字が下に寄って見えたので
    左の MAIN と同じ組み方（上に種別・中央に文字・下に矢印）にそろえた。
    padding も MAIN と同じ値にして、種別と矢印の高さを左右でそろえている。
*/
.closing-cta__sub-link {
  min-height: 9.5rem;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border: var(--border-width) solid var(--color-border-on-inverse);
  grid-template-rows: auto 1fr auto;
  gap: var(--space-5);
  color: var(--white);
  background: rgba(4, 2, 39, 0.28);
}

.closing-cta__sub-link::before {
  background: var(--white);
}

.closing-cta__sub-link:hover,
.closing-cta__sub-link:focus-visible {
  border-color: var(--white);
  color: var(--navy-800);
}

.closing-cta__sub-link:hover .closing-cta__kind,
.closing-cta__sub-link:focus-visible .closing-cta__kind {
  color: var(--navy-500);
}

.closing-cta__sub-copy {
  display: grid;
  align-content: center;
  gap: var(--space-4);
}

/* ★2026-10-05 今林指示：見出しを «資料ダウンロード» に短くし、左の «お問い合わせ»（.closing-cta__main-title）と
   同じ大きさ・行間にそろえた（--text-2xl → --text-3xl → --text-5xl）。 */
.closing-cta__sub-title {
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  word-break: auto-phrase;
}

.closing-cta__sub-text {
  color: var(--navy-200);
}

.closing-cta__sub-link:hover .closing-cta__sub-text,
.closing-cta__sub-link:focus-visible .closing-cta__sub-text {
  color: var(--gray-700);
}

.closing-cta__arrow {
  display: grid;
  width: 3rem;
  height: 3rem;
  border: var(--border-width) solid currentColor;
  border-radius: 50%;
  place-items: center;
  justify-self: end;
  align-self: end;
}

.closing-cta__arrow::before {
  width: 0.55rem;
  height: 0.55rem;
  border-top: var(--border-width-thick) solid currentColor;
  border-right: var(--border-width-thick) solid currentColor;
  content: "";
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform var(--duration-base) var(--ease-out);
}

.closing-cta__main:hover .closing-cta__arrow::before,
.closing-cta__main:focus-visible .closing-cta__arrow::before,
.closing-cta__sub-link:hover .closing-cta__arrow::before,
.closing-cta__sub-link:focus-visible .closing-cta__arrow::before {
  transform: translateX(3px) rotate(45deg) translate(-1px, 1px);
}

/*
  左（お問い合わせ）と右（資料ダウンロード）の割り付け。
  ★三嶋指示で左を «もう少しだけ» 広げた：0.88 : 1.12 → 0.95 : 1.05。
    1440px で 519.2 → 560.5px（＋41.3px）。
  ★以前は右の説明文を 1280px 以上で 1 行に固定（nowrap）していたため、比率に上限があった。
    2026-10-05 に説明文を長い文にして nowrap をやめたので、その制約はもう無い。
    ただし右の見出し «資料ダウンロード»（8 字・--text-5xl）が 1 行に入るかは比率で変わる。動かしたら測ること。
  ★900px ちょうどでは、広げたことで左の見出し «お問い合わせ» が
    2 行 → 1 行、本文が 5 行 → 4 行に収まった（カード高 209.4 → 193.6px）。
*/
@media (min-width: 900px) {
  .closing-cta__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

@media (max-width: 767px) {
  .closing-cta__title br {
    display: none;
  }

  .closing-cta__main {
    min-height: 20rem;
  }

  .closing-cta__sub-link {
    min-height: 11rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .closing-cta__main,
  .closing-cta__sub-link,
  .closing-cta__main::before,
  .closing-cta__sub-link::before,
  .closing-cta__arrow::before {
    transition: none;
  }
}