@charset "UTF-8";
/* ============================================================
   contact.css — お問い合わせ・ご応募（ハブ）
   ・common.css の配色トークンを利用。var() には全てフォールバック値を指定
   ・このページのコンテンツはバナー2つのみ
   ============================================================ */

/* ------------------------------------------------------------
   ページ全体
------------------------------------------------------------ */

.contact-page {
  padding: 32px 0 72px;
}

.contact-page .container {
  max-width: 900px;
}

.contact-page-title {
  margin: 0 0 28px;
  text-align: center;
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-size: 1.62rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--text-heading, #222222);
}

/* ------------------------------------------------------------
   バナー共通
------------------------------------------------------------ */

/* PC：横2列。SP は下のメディアクエリで1列に戻す
   ・badge が上に -11px はみ出すので、上側に余白を確保している
   ・align-items: stretch（既定）で2枚の高さを揃える */
.hub-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 12px;
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 26px 46px 24px 24px;
  border-radius: 14px;
  font-family: var(--font-gothic, 'Noto Sans JP', sans-serif);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hub-card:hover,
.hub-card:focus-visible {
  transform: translateY(-2px);
}

.hub-card-kicker {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.hub-card-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

.hub-card-desc {
  display: block;
  margin-top: auto;
  font-size: 0.82rem;
  line-height: 1.65;
}

.hub-card-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 1.7rem;
  line-height: 1;
}

/* ------------------------------------------------------------
   A：お問い合わせ（副）
------------------------------------------------------------ */

.hub-card-inquiry {
  border: 2px solid var(--color-mauve, #01A0E9);
  box-shadow: 0 2px 8px rgba(1, 160, 233, .10);
}

.hub-card-inquiry:hover,
.hub-card-inquiry:focus-visible {
  box-shadow: 0 6px 16px rgba(1, 160, 233, .20);
}

.hub-card-inquiry .hub-card-kicker,
.hub-card-inquiry .hub-card-title,
.hub-card-inquiry .hub-card-arrow {
  color: var(--color-blue-ink, #0065B0);
}

.hub-card-inquiry .hub-card-desc {
  color: var(--text-light, #666666);
}

/* ------------------------------------------------------------
   B：カンタン応募（主）
------------------------------------------------------------ */

/* 主役側。背景は白のまま、枠と文字色を赤紫にして差をつける
   ・#FB658A は面用（白地2.86）なので枠にのみ使う
   ・文字には #D00C3D（白地5.52）を使う */
.hub-card-entry {
  border: 2px solid var(--color-pink-bright, #FB658A);
  box-shadow: 0 3px 12px rgba(208, 12, 61, .14);
}

.hub-card-entry:hover,
.hub-card-entry:focus-visible {
  box-shadow: 0 7px 20px rgba(208, 12, 61, .24);
}

.hub-card-entry .hub-card-kicker,
.hub-card-entry .hub-card-title,
.hub-card-entry .hub-card-arrow {
  color: var(--color-pink-text, #D00C3D);
}

.hub-card-entry .hub-card-desc {
  color: var(--text-light, #666666);
}

.hub-card-badge {
  position: absolute;
  top: -11px;
  left: 20px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-pink-bright, #FB658A);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(208, 12, 61, .25);
}

/* ------------------------------------------------------------
   このページではフローティングCTAを隠す
   ・画面下部に固定表示されるためバナーにかぶる
   ・このページ自身への導線なので機能的にも不要
------------------------------------------------------------ */

body.page-contact .floating-cta {
  display: none !important;
}

/* ------------------------------------------------------------
   スマホ
------------------------------------------------------------ */

@media (max-width: 600px) {
  .contact-page { padding: 24px 0 56px; }
  .contact-page-title { font-size: 1.34rem; margin-bottom: 22px; }
  .hub-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hub-card { padding: 24px 42px 20px 18px; }
  .hub-card-desc { margin-top: 0; }
  .hub-card-title { font-size: 1.32rem; }
  .hub-card-arrow { right: 14px; }
}

/* ------------------------------------------------------------
   動きを減らす設定への配慮
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hub-card { transition: none; }
  .hub-card:hover,
  .hub-card:focus-visible { transform: none; }
}