/* =================================================================
 * c-contact-cta — フッター直上 共通 CONTACT カード
 * Figma: 3321:74408 (contect PC) / 親 3321:74833 FooterPc
 *
 * 構成:
 *   .c-contact-cta            外側セクション（左右ガター）
 *   .c-contact-cta__inner     オレンジカード本体（角丸 32px / bg:#FF6243）
 *     ├─ .c-contact-cta__heading           左カラム（タイトル + リード）
 *     └─ .c-contact-cta__right             右カラム（CTAボタン群 + メルマガ）
 *         ├─ .c-contact-cta__buttons      CTA 2 種ボタン（下辺に点線）
 *         └─ .c-contact-cta__magazine     メールマガジン登録行
 *
 * 仕様:
 *   - PCファースト（Figma 1440 基準: カード 1300 × 292 / py-56 px-90）
 *   - SP（≤1023.98px）は @media (max-width: 1023.98px) で縦積み
 *   - 色・タイポは tokens.css 経由
 * =================================================================*/

.c-contact-cta {
  width: 100%;
  padding: 0 70rem;
  margin-top: 96rem;
  /* Figma: カードはグレーフッター上段に 156px オーバーラップする。
     負マージンでフッターを引き上げ、z-index で前面に出す
     （footer は position:relative; z-index:10／--footer-z）。 */
  margin-bottom: -156rem;
  position: relative;
  z-index: calc(var(--footer-z) + 1);
  box-sizing: border-box;
}

.c-contact-cta__inner {
  position: relative;
  max-width: var(--footer-content-max);
  margin: 0 auto;
  padding: 56rem 90rem;
  background-color: var(--color-key);
  border-radius: 32rem;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80rem;
  box-sizing: border-box;
  overflow: hidden; /* 装飾レイヤー（imgLayer1）が将来入っても切り抜けるよう */
}

/* ---------- middle 変種（ページ中段用・contect PC（S）/ 1300×249） ----------
 *   メルマガ行なし＝CTA 2種のみ。点線下辺・フッター重なりマージンを解除。
 *   前後余白は Figma 5824:102186 規定の PC 96px / SP 48px を CSS で自動付与。 */
.c-contact-cta--middle {
  margin-top: 96rem;       /* Figma: CTAブロック前後余白 PC 96px */
  margin-bottom: 96rem;    /* Figma: CTAブロック前後余白 PC 96px */
  /* 中段配置はホストページの .container が左右ガターを持つため、
     full-bleed 用の自前ガター（padding 0 70px）を解除して親幅いっぱいに広げる */
  padding-left: 0;
  padding-right: 0;
  z-index: auto;
}
.c-contact-cta--middle .c-contact-cta__buttons {
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---------- 左：見出しブロック ---------- */
.c-contact-cta__heading {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* Figma 2202:26892 はタイトル群↔リード間に gap 指定なし（行間のみ）。
     16px 入れると CONTACT と「まずは…」の空きが広くなるため 0 に。SP は別途 gap:8px。 */
  gap: 0;
  color: var(--color-white);
}

.c-contact-cta__title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--lh-snug);
}

.c-contact-cta__title-ja {
  font-family: var(--font-jp);
  font-size: var(--fs-body);          /* 16px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-white);
}

.c-contact-cta__title-en {
  font-family: var(--font-en-condensed);
  font-size: var(--fs-h1-pc);          /* 56px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-white);
}

.c-contact-cta__lead {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-body);           /* 16px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-loose);        /* 1.8 */
  color: var(--color-white);
}

/* SP のみ前置する1行目「サービスや採用など、」。PC・middle 変種では非表示。 */
.c-contact-cta__lead-prefix {
  display: none;
}

/* ---------- 右カラム ---------- */
.c-contact-cta__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24rem;
  min-width: 0;
}

/* ---------- CTA 2種ボタン ---------- */
.c-contact-cta__buttons {
  display: flex;
  align-items: stretch;
  gap: 32rem;
  padding-bottom: 32rem;
  border-bottom: 1px dashed var(--color-white);
  width: 622rem;
  max-width: 100%;
}

.c-contact-cta__btn {
  flex: 1 0 0;
  height: 56rem;
  padding: 16rem 20rem 16rem 32rem;
  background-color: var(--color-white);
  border-radius: 32rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  color: var(--color-text-default);
  font-family: var(--font-jp);
  font-size: var(--fs-body);           /* 16px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;              /* tracking-[0.8px] @ 16px */
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    background-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default);
}

.c-contact-cta__btn:hover {
  background-color: var(--color-bg-02);
  color: var(--color-key);
}

.c-contact-cta__btn:active {
  transform: translateY(1px);
}

/* テキストは flex で伸長し中央寄せ、矢印は右端へ（Figma: text flex-1 + LinkIcon shrink-0）。 */
.c-contact-cta__btn-text {
  flex: 1 1 auto;
  text-align: center;
}

/* 右端の矢印（Figma LinkIcon 428:7928 / 共通 c-button と同じ: 14×14 のオレンジ矢印・円塗りなし） */
.c-contact-cta__btn-arrow {
  flex-shrink: 0;
  width: 14rem;
  height: 14rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/arrow-cta.svg") no-repeat center / contain;
          mask: url("/img/common/icons/arrow-cta.svg") no-repeat center / contain;
  transition: background-color var(--duration-fast) var(--easing-default);
}

/* ---------- メールマガジン登録行 ---------- */
.c-contact-cta__magazine {
  display: flex;
  align-items: center;
  gap: 24rem;
  width: 622rem;
  max-width: 100%;
}

.c-contact-cta__magazine-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 24rem;
  min-width: 0;
}

.c-contact-cta__magazine-title {
  display: flex;
  align-items: center;
  gap: 8rem;
  padding: 2rem 0;
  font-family: var(--font-jp);
  font-size: 17rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-loose);
  color: var(--color-white);
}

.c-contact-cta__magazine-icon {
  display: block;
  width: 21rem;
  height: 17rem;
  flex-shrink: 0;
}

.c-contact-cta__magazine-sub {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 13rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-loose);
  color: var(--color-white);
}

.c-contact-cta__magazine-btn {
  flex-shrink: 0;
  width: 233rem;
  height: 48rem;
  padding: 14rem 20rem 14rem 32rem;
  background-color: var(--color-white);
  border-radius: 32rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14rem;
  color: var(--color-text-default);
  font-family: var(--font-jp);
  font-size: var(--fs-body);          /* 16px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    background-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default);
}

.c-contact-cta__magazine-btn:hover {
  background-color: var(--color-bg-02);
  color: var(--color-key);
}

.c-contact-cta__magazine-btn:active {
  transform: translateY(1px);
}

/* =================================================================
 * 中間レンジ（1024〜1279.98px）— タブレット横〜小型PC
 *   PC1440基準の固定パディング(90px)/gap(80px)/ガター(70px)では
 *   右カラムが痩せ、nowrap な CTA 2 ボタンがカード幅を超えて
 *   overflow:hidden に切られる（例: 1073px で「オンライン商談」が欠ける）。
 *   余白を詰めて右カラムに幅を返し、横並びを維持したまま収める。
 * =================================================================*/
@media (min-width: 1024px) and (max-width: 1279.98px) {

  .c-contact-cta {
    padding: 0 40rem;
  }

  /* middle 変種は左右ガターを設置ページに委ねる（SP ブロックと同様に解除） */
  .c-contact-cta--middle {
    padding-left: 0;
    padding-right: 0;
  }

  .c-contact-cta__inner {
    padding: 48rem;
    gap: 40rem;
  }

  /* 万一それでも 2 ボタンが横に収まらない最小幅では、切らずに折り返す */
  .c-contact-cta__buttons {
    flex-wrap: wrap;
  }
}

/* =================================================================
 * SP（≤1023.98px）— Figma 未提供。縦積み暫定
 * =================================================================*/
@media (max-width: 1023.98px) {

  .c-contact-cta {
    padding: 0 16rem;
    margin-top: 64rem;
    /* Figma SP（footer_SP 3321:92943）: カードはグレーフッター上段に 228px
       オーバーラップ（footer 側 padding-top: 260px ＝ 228 重なり + 32 ロゴ間）。
       position/z-index はベース定義を継承して前面に出す */
    margin-bottom: -228rem;
  }

  /* middle 変種は左右ガターを設置ページに委ねる（SP でも重なり無し）。
     前後余白は Figma 規定 SP 48px を自動付与。 */
  .c-contact-cta--middle {
    margin-top: 48rem;     /* Figma: CTAブロック前後余白 SP 48px */
    margin-bottom: 48rem;  /* Figma: CTAブロック前後余白 SP 48px */
    padding-left: 0;
    padding-right: 0;
  }

  .c-contact-cta__inner {
    padding: 48rem 24rem;                 /* Figma SP 1186:7696: py-48 px-24 */
    flex-direction: column;
    align-items: center;
    gap: 16rem;                          /* heading / buttons / magazine 間 */
    border-radius: 32rem;
  }

  .c-contact-cta__heading {
    align-items: center;
    text-align: center;
    gap: 8rem;
  }

  .c-contact-cta__title-block {
    align-items: center;
    gap: 6rem;                           /* お問い合わせ ↔ CONTACT */
  }

  .c-contact-cta__title-ja {
    font-size: 12rem;                    /* Figma SP: 12px / tracking 0.48px */
    letter-spacing: 0.04em;
  }

  .c-contact-cta__title-en {
    font-size: 34rem;                    /* Figma SP: 34px（汎用 h1-sp 38px ではない） */
  }

  .c-contact-cta__lead {
    text-align: center;
    font-size: 14rem;
  }

  /* SP は2行リード「サービスや採用など、まずはお気軽に…」。footer・middle 両変種とも前置を表示する
     （No.11: 製品詳細の1つ目=middle だけ前置が抜けて見えていたため footer と揃える）。 */
  .c-contact-cta__lead-prefix {
    display: block;
  }

  .c-contact-cta__right {
    width: 100%;
    gap: 16rem;                          /* buttons ↔ magazine */
  }

  .c-contact-cta__buttons {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 24rem;                          /* Figma SP 1242:18474: gap-24 */
    /* px-24 でボタンを内側へ（点線下辺はグループ幅いっぱい＝ボタンより広い） */
    padding: 0 24rem 24rem;
  }

  .c-contact-cta__btn {
    width: 100%;                        /* px-24 グループ内 → 262px 相当 */
    flex: 0 0 auto;
    height: 52rem;                       /* Figma SP: h-52 */
    padding: 16rem 20rem 16rem 32rem;
    font-size: 14rem;
  }

  .c-contact-cta__magazine {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16rem;                          /* Figma SP 1242:18479: gap-16 */
  }

  .c-contact-cta__magazine-text {
    padding: 0;                         /* 補足文を1行に収めるため左右余白なし（Figma px-8 は省略） */
    align-items: center;
    text-align: center;
    gap: 1px;
  }

  .c-contact-cta__magazine-title {
    justify-content: center;
    font-size: 17rem;                    /* Figma SP: 17px */
  }

  .c-contact-cta__magazine-sub {
    font-size: 13rem;                    /* Figma SP: 13px */
    text-align: center;
    white-space: nowrap;                /* Figma SP: 1行（折り返さない） */
  }

  .c-contact-cta__magazine-btn {
    width: 214rem;                       /* Figma SP 1381:22679: w-214 */
    max-width: 100%;
    margin: 0 auto;
    padding: 14rem 20rem 14rem 32rem;
    font-size: 14rem;
  }
}