@charset "utf-8";
/* ============================================================
   お問い合わせ（振り分けページ）
   style.css → pages.css → plain.css → contact.css の順で読み込む
   ============================================================ */

/* ------------------------------------------------------------
   ページ見出し
   ------------------------------------------------------------ */
.page-hero--contact .page-hero__inner {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 230px;
  gap: 20px; align-items: center;
}
.ct-hero__copy { text-align: center; }
.ct__title { letter-spacing: .12em; }
.ph--ct-plane { width: 100%; aspect-ratio: 1; border: none; background: none; }
.ph--ct-kids  { width: 100%; aspect-ratio: 1; border: none; background: none; }

/* ------------------------------------------------------------
   振り分けカード
   ------------------------------------------------------------ */
.ct-route { padding: 8px 0 40px; }
.ct-route__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}

.ct-card {
  --ct: var(--blue);
  --ct-bg: #f4f9ff;
  background: var(--ct-bg);
  border: 2px solid var(--sky-deep);
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  text-align: center;
  display: flex; flex-direction: column; gap: 12px;
}
.ct-card--blue { --ct: var(--blue); --ct-bg: #f4f9ff; border-color: #cfe4fa; }
.ct-card--pink { --ct: #e4699a;     --ct-bg: #fff5f9; border-color: #f8cfdf; }

.ct-card__icon {
  width: 66px; height: 66px; margin: 0 auto 4px;
  border-radius: 50%; background: var(--ct); color: #fff;
  display: grid; place-items: center; font-size: 30px; font-weight: 900;
}
.ct-card__title { font-size: clamp(21px, 2.6vw, 27px); font-weight: 900; color: var(--ct); }
.ct-card__sub   { font-size: 14px; font-weight: 800; color: var(--ct); letter-spacing: .04em; }
.ct-card__text  { font-size: 13px; line-height: 1.9; }
.ph--ct-illust  { width: 100%; aspect-ratio: 16 / 7; border-radius: var(--radius); }

/* チェックリスト */
.ct-check { text-align: left; display: flex; flex-direction: column; gap: 9px; margin: 4px 0 6px; }
.ct-check li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; font-weight: 700; line-height: 1.5;
}
.ct-check li::before {
  content: "✓";
  flex: none; width: 19px; height: 19px; margin-top: 2px;
  border-radius: 50%; background: var(--ct); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 900;
}

.cta-btn--block { margin-top: auto; width: 100%; }
.cta-btn--pink { background: #e4699a; box-shadow: 0 4px 0 #c44a7c; }
.cta-btn--pink:hover { box-shadow: 0 2px 0 #c44a7c; }

/* リンク先が未設定のとき（config.php のURLが空） */
.cta-btn.is-disabled {
  background: #d8dee6; color: #7b8794; box-shadow: 0 4px 0 #bfc7d1;
  cursor: not-allowed;
}
.btn.is-disabled {
  background: #d8dee6; color: #7b8794; box-shadow: 0 3px 0 #bfc7d1;
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   FAQ ／ 電話
   ------------------------------------------------------------ */
.ct-faq { padding: 0 0 60px; }
.ct-faq__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 30px var(--gutter);
  background: var(--cream); border-radius: var(--radius-lg);
  border: 2px solid #f3e4b4;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 34px;
}
.ct-faq__title {
  display: flex; align-items: center; gap: 10px;
  color: var(--blue); font-size: 20px; font-weight: 900; margin-bottom: 18px;
}
.ct-faq__star { color: var(--yellow); font-size: 22px; }

.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item dt,
.faq-item dd {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.7; margin: 0;
}
.faq-item dt { font-weight: 800; }
.faq-item dd { color: var(--ink-soft); margin-top: 4px; }
.faq-item__mark {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #fff;
}
.faq-item__mark--q { background: var(--blue); }
.faq-item__mark--a { background: var(--orange); }

/* 電話 */
.ct-tel { border-left: 2px dashed #e6d3a3; padding-left: 32px; }
.ct-tel__title { color: var(--ink); font-size: 17px; font-weight: 900; margin-bottom: 8px; }
.ct-tel__lead  { font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; }
.ct-tel__number {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(26px, 3.2vw, 34px); font-weight: 900;
  letter-spacing: .02em; margin-bottom: 8px;
}
.ct-tel__number a { color: var(--ink); }
.ct-tel__number a:hover { color: var(--blue); }
.ct-tel__icon { font-size: .7em; }
.ct-tel__hours { font-size: 12px; line-height: 1.8; color: var(--ink-soft); text-align: center; }

/* ------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .page-hero--contact .page-hero__inner { grid-template-columns: 100px minmax(0, 1fr) 150px; }
  .ct-faq__inner { grid-template-columns: 1fr; gap: 24px; }
  .ct-tel { border-left: none; border-top: 2px dashed #e6d3a3; padding-left: 0; padding-top: 24px; }
}

@media (max-width: 700px) {
  .ct-route__inner { grid-template-columns: 1fr; }
  .ct-card { padding: 24px 18px 20px; }
}

@media (max-width: 560px) {
  .page-hero--contact .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero--contact .ph--ct-plane { display: none; }
  .page-hero--contact .ph--ct-kids { max-width: 190px; margin: 0 auto; }
}