/* ============================================================
 * Contact CTA — sundayfolk-child
 *
 * 全ページ末尾共通 CTA (template-parts/contact-cta.php) のスタイル。
 * Three.js 背景 (canvas#contact-cta-bg) は assets/js/contact-cta-bg.js 側で描画。
 *
 * HTML/css/top-orange-navy.css からの切り出し:
 *   - ベース:                L1446-1494
 *   - タブレット (≤959px):   L2389-2398 のうち .contact-cta* 部分
 *   - SP (≤599px):           L2497 / L2916-2925
 *   - .contact-cta--full:    L3408-3452
 *   - レスポンシブ (≤980px): L3491-3495
 *   - レスポンシブ (≤600px): L3511
 *
 * top-orange-navy.css 側の .contact-cta 関連は当面残置（front-page では二重定義に
 * なるが、内容は同等なので無害）。Step 10-9 で top-orange-navy.css を分割する際に
 * .contact-cta ブロックを削除する。同タイミングで sf-company-philosophy.css 内の
 * .company-philosophy-page .contact-cta / .c-arrow 重複も整理する。
 *
 * スコープ方針:
 *   - sf-footer.css と同じく CSS 変数はフォールバック値付き var(--name, #hex) で記述
 *     （top-orange-navy.css に依存しない非トップページでも壊れない）
 *   - .c-arrow は .contact-cta 配下のみに適用（グローバル汚染防止）
 * ============================================================ */

.contact-cta {
  padding: 0 0 var(--sec-pad, 100px);
}
.contact-cta__inner {
  background: linear-gradient(135deg, var(--c-navy, #1e2f4d) 0%, var(--c-navy-dk, #131f34) 100%);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.08);
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  box-shadow: 0 10px 30px rgba(19,31,52,.05);
}
.contact-cta__en {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  display: block;
  margin-bottom: 10px;
}
.contact-cta__ja {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 14px;
}
.contact-cta__desc {
  font-size: 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.9;
}
.contact-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--c-orange, #e05531); color: #fff;
  font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600;
  letter-spacing: .12em; padding: 22px 80px; border-radius: 50px;
  white-space: nowrap; flex-shrink: 0; align-self: center;
  transition: all .3s ease;
}
.contact-cta__btn:hover {
  background: var(--c-orange-dk, #c44420);
  box-shadow: 0 8px 24px rgba(224,85,49,.32);
  transform: translateY(-2px);
}

/* .contact-cta--full モディファイア（Three.js 背景レイアウト） */
.contact-cta--full {
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.contact-cta--full .contact-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
.contact-cta--full .contact-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(224,85,49,.1) 0%, transparent 55%),
    linear-gradient(180deg, rgba(19,31,52,.06) 0%, rgba(19,31,52,0) 55%);
  pointer-events: none;
}
.contact-cta--full .contact-cta__inner {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 120px 130px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  box-shadow: none;
  max-width: 1440px;
  /* .container クラスの margin:0 auto に依存せず自己完結で中央寄せ
   * （sf-service.css / 他ページ側で .container に max-width 等を再定義された場合の
   *   詳細度負けによる padding/max-width 上書きを防ぐ） */
  margin: 0 auto;
}
.contact-cta--full .contact-cta__btn {
  background: var(--c-orange, #e05531);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.contact-cta--full .contact-cta__btn:hover {
  background: var(--c-orange-dk, #c44420);
  box-shadow: 0 14px 32px rgba(224,85,49,.42);
}

/* .contact-cta__inner は .container クラスも持つが、.container を本ファイル側で
 * 再定義すると詳細度 (0,2,0) が .contact-cta--full .contact-cta__inner (0,2,0) と
 * 同点になり、書く順序で padding/max-width が上書きされてレイアウト崩れの原因になる。
 * → 中央寄せは .contact-cta--full .contact-cta__inner 側で margin:0 auto を持たせ、
 *   .container 自体には触らない方針とする（2026-05-28 不具合修正）。 */

/* contact-cta 見出し内 <br class="br-sp-only"> の表示制御
 * PC では非表示（1行レイアウト）、SP では表示（2行に改行）。
 * template-parts/contact-cta.php の HTML に `<br class="br-sp-only">` を含んでいるため、
 * このスタイルも contact-cta 共通 CSS 側で持つのが [[D-024]] と整合。
 * sf-company-philosophy.css L438 等の `.company-philosophy-page .br-sp-only` は実質
 * このため（philosophy 本文では br-sp-only 未使用）。Step 10-9 で重複削除予定。 */
.contact-cta .br-sp-only { display: none; }

/* .c-arrow を .contact-cta__btn 配下のみで再定義（CONTACT ボタン末尾アイコン） */
.contact-cta .c-arrow {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 1px;
  vertical-align: middle;
  flex-shrink: 0;
}
.contact-cta .c-arrow::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background-color: currentColor;
}
.contact-cta .c-arrow::before {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 9px; height: 1px;
  background-color: currentColor;
  transform-origin: right top;
  transform: rotate(30deg);
}

/* タブレット (≤959px) — 縦並び化 */
@media screen and (max-width: 959px) {
  .contact-cta__inner {
    grid-template-columns: 1fr;
    padding: 48px 48px;
    text-align: center;
  }
  .contact-cta__btn { align-self: center; }
}

/* .contact-cta--full レスポンシブ (≤980px) — top-orange-navy.css L3485-3495 由来 */
@media (max-width: 980px) {
  .contact-cta--full .contact-cta__inner {
    grid-template-columns: 1fr;
    padding: 80px 32px;
    text-align: left;
  }
}

/* SP (≤599px) — 本文左寄せ、英日見出しのみ中央 */
@media screen and (max-width: 599px) {
  .contact-cta__ja-midot--sp-hide { display: none; }
  .contact-cta .br-sp-only { display: block; }

  .contact-cta__inner {
    padding: 40px 24px;
    border-radius: 20px;
    text-align: left;
  }
  .contact-cta__en,
  .contact-cta__ja { text-align: center; }
  .contact-cta__ja { font-size: 22px; line-height: 1.55; }
  .contact-cta__btn { align-self: flex-start; }
}

/* .contact-cta--full レスポンシブ (≤600px) — top-orange-navy.css L3511 由来 */
@media (max-width: 600px) {
  .contact-cta--full .contact-cta__inner { padding: 64px 24px; }
}