@charset "UTF-8";
/* ====================================================
お問い合わせのカード（見た目を持つファイルは、このファイル1つだけ）
2026-10-20 追加。使う場所は2つ：
  1. コラム記事の本文に置くショートコード [お問い合わせ]（inc/contact-card.php。記事に「> [!contact] お問い合わせ」と書くと道具が変換する）
  2. 開発サイトのフッター（CONTACT のカード。資料ダウンロードのカードと2枚並ぶ）
HTML は template-parts/contact-card.php を共用する。クラス名が footer-cta__* のままなのは、資料ダウンロードのカード（開発サイトのフッター）も
同じクラスで同じ見た目を使うため。

2026-10-20 に、カード1枚の見た目（枠・余白・文字・赤いボタン・乗せたときの動き）を doc-download.css（資料ダウンロード用。開発サイトだけにある）から
このファイルへ移した。理由：資料ダウンロードを本番に出せない間に、お問い合わせのカードだけを先に本番に出すため。
doc-download.css に残したのは、フッターの帯・2枚の並び・資料のカードの白抜きボタンだけ。doc-download.css はこのファイルの後に読み込む。

色・文字・余白・角丸は fiz-tokens.css の値。赤は英字ラベルとボタンだけ（赤い帯・赤い背景は置かない）。
==================================================== */

/* ---- カード1枚 ---- */
.footer-cta__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-24);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.footer-cta__label {
  font-family: var(--font-en);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-primary); /* 英字ラベルは赤でよい */
}
.footer-cta__title {
  margin: var(--space-8) 0 0;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}
.footer-cta__desc {
  margin: var(--space-16) 0 var(--space-24);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  color: var(--color-text);
}
.footer-cta__button {
  margin-top: auto; /* 高さの違いを吸収して、ボタンをカードの下端にそろえる */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 56px;
  padding: 0 var(--space-24);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  transition: background-position .8s var(--ease), background-color .3s var(--ease), color .3s var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.footer-cta__button--primary { color: var(--color-white); }
.footer-cta__arrow { width: 10px; height: 16px; flex: none; }

/* 赤いボタン：サイトの主ボタン（サービスページ .svc-btn--primary・2026-09-24 本人決定）と同じ「赤のグラデーションが左→右へ流れる＋影＋少し浮く」
   （2026-10-11 本人指摘「アニメーションが悪い」「FIZに相談するのボタンだけ動きがないのが違和感」）。指で触る端末では動かさない（押した後に色が残るため） */
.footer-cta__button--primary {
  background: linear-gradient(90deg, #c10000 0%, #dc2618 50%, #c10000 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .24);
}

/* 乗せたときの動き（2026-10-11 本人決定）：カード全体が黒に反転。ボタンは赤のまま。
   理由＝動きが小さいとどのカードを選んでいるか分からない。マウスは :hover、キーボードは :focus-visible、指で触る端末は押している間（:active）だけ反転 */
@media (hover: hover) {
  .footer-cta__card:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
  .footer-cta__card:hover .footer-cta__title,
  .footer-cta__card:hover .footer-cta__desc,
  .footer-cta__card:hover .footer-cta__label { color: var(--color-white); }
  .footer-cta__card:hover .footer-cta__button--primary {
    background-position: 0 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
    transform: translateY(-2px);
  }
}
.footer-cta__label, .footer-cta__title, .footer-cta__desc { transition: color .3s var(--ease); }
.footer-cta__card:focus-visible,
.footer-cta__card:active { background: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
.footer-cta__card:focus-visible .footer-cta__title,
.footer-cta__card:focus-visible .footer-cta__desc,
.footer-cta__card:focus-visible .footer-cta__label,
.footer-cta__card:active .footer-cta__title,
.footer-cta__card:active .footer-cta__desc,
.footer-cta__card:active .footer-cta__label { color: var(--color-white); }
@media (prefers-reduced-motion: reduce) {
  .footer-cta__card, .footer-cta__button { transition: none; }
}
@media screen and (min-width: 768px) {
  .footer-cta__card { padding: var(--space-40); }
}

/* ---- コラム記事の本文の中だけ要る直し ----
  1. カードの上下の余白（本文の段落・見出しとの間）
  2. 本文の決まり（column.css の .column-editor-output）を、カードの中では受けないようにする
     - リンクの下線・太字（.column-editor-output a）
     - 行間 1.7（.column-editor-output）。英字ラベルだけ行間の指定が無く、フッターでは 1 になるため、そろえる */
.fiz-contact-card {
  margin: var(--space-40, 40px) 0;
}

.column-editor-output .fiz-contact-card a.footer-cta__card {
  text-decoration: none;
  font-weight: var(--font-weight-normal, 400);
}

.fiz-contact-card .footer-cta__label {
  line-height: 1;
}