@charset "UTF-8";

/* ==========================================
   お問い合わせのカード（contact。TOP と、お知らせ一覧・お知らせ詳細・活動の各ページの下に共通）
   XD: 01_TOP_SP の contact（カード x=15 y=4386 345×450）、01_TOP_PC の contact（カード x=203 y=4587 960×450）
   y はカードの上端からの値（SP のタイトルの上端 50、PC は 53.05）
   ========================================== */
.contact-section {
  margin: 0 0 60px; /* XD SP: カードの下端 4836 → フッターの上端 4896 */
}

.contact-section__card {
  /* XD SP: カード 345×450・角丸 50・#f7b560・影 0 0 5 */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: min(345px, 100% - 30px);
  min-height: 450px;
  margin: 0 auto;
  padding: 50px 20px 26px;
  border-radius: 50px;
  font-family: var(--font-ja);
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.contact-section__heading {
  /* XD SP: 見出し YuGo-Bold 30px・白・中央（x=98 w=180、ベースライン 4462）。上端 4436 */
  height: 31px;
  margin: 0 0 15.3px;
  padding: 1px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1; /* 30px ÷ 30px */
}

.contact-section__description {
  /* XD SP: 本文 YuGo-Medium 18px・行の高さ 27px・中央の 3 行（1 行目のベースライン 4502）。ボタンの上端 4578 まで 14.7 */
  margin: 0 0 14.7px;

  /* 最長の行は 16 字。カードの内側（画面幅 − 30 − 40px）に収める。360px 以上は 18px のまま（vw はこのファイルの 2 か所だけ） */
  font-size: min(18px, (100vw - 72px) / 16);
  font-weight: 500;
  line-height: 1.5; /* 27px ÷ 18px */
}

.contact-section__description-line {
  display: block;
}

.contact-section__btn {
  /* XD SP: ボタン 301×70 x=38 y=4578・白・枠 2px #93c572・角丸 50。文字 YuGo-Bold 20px・字間 2px・#93c572（ベースライン 4621） */
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 301px;
  max-width: 100%; /* 375px 未満はカードの内側（幅 − 左右 20px）に収める */
  height: 70px;
  margin: 0;
  border: 2px solid var(--color-main);
  border-radius: 50px;
  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 3.4; /* 68px ÷ 20px */
  letter-spacing: 0.1em; /* 2px ÷ 20px */
  color: var(--color-main);
  text-align: center;
  text-decoration: none;
  text-indent: 5px; /* 最後の字の後の字間 2px を中央揃えから外し、XD SP の文字の中心（x=189）に寄せる */
  white-space: nowrap;
  background-color: var(--color-white);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

@media (any-hover: hover) {
  .contact-section__btn:hover {
    color: var(--color-white);
    background-color: var(--color-main);
  }
}

.contact-section__tel {
  /* XD SP: 問い合わせ電話：（20px・ベースライン 4686）・電話番号（30px・4724）・受付時間（20px・行の高さ 34・2 行。4766・4800）。すべて YuGo-Bold の白・中央 */
  position: relative;
  left: 1.5px; /* XD SP: 文字の中心は x=189（カードの中心 187.5 より 1.5 右） */
  margin-top: 14.1px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7; /* 34px ÷ 20px */
}

.contact-section__tel-heading {
  display: block;
}

.contact-section__tel-num {
  display: block;
  margin-top: -2.4px;
  font-size: 30px;
  line-height: 1.3334; /* 40px ÷ 30px（切り上げて 40px ちょうどにする） */
  color: inherit;
  text-decoration: none;
}

.contact-section__tel-time {
  display: block;
  margin-top: 8.4px;

  /* 受付時間の行は約 14em。カードの内側（画面幅 − 30 − 40px）に収める。360px 以上は 20px のまま */
  font-size: min(20px, (100vw - 72px) / 14);
}

.contact-section__tel-hours-time,
.contact-section__tel-hours-note {
  /* 折り返すのは「時間」と「（注記）」の間だけ（「）」だけが次の行に落ちないように） */
  white-space: nowrap;
}

@media (width >= 768px) {
  .contact-section {
    margin-bottom: 0;
  }

  .contact-section__card {
    /* XD PC: カード 960×450（x=203 y=4587）。見出し 40px（ベースライン 4675、上端 4640）、本文 2 行（4736・4763）、ボタン y=4807、下の余白 113 */
    width: min(960px, 100% - 32px);
    margin-bottom: 113px;
    padding-top: 53.05px;
  }

  .contact-section__heading {
    height: auto;
    margin-bottom: 33.85px;
    padding: 0;
    font-size: 40px;
    line-height: 42.4px; /* 比率（1.06）にすると 1/64px ずれて位置が 1px 動くので px のまま（AUDIT CSS-1 の要確認） */
  }

  .contact-section__description {
    margin-bottom: 36.7px;
  }

  .contact-section__tel {
    /* XD PC: 問い合わせ電話：（x=496・ベースライン 4947）と電話番号（30px・x=655.56・4945）は同じ行。受付時間は 1 行（20px・ベースライン 4982） */
    left: 0;
    margin-top: 37.7px;
    line-height: 2; /* 40px ÷ 20px */
  }

  .contact-section__tel-heading {
    position: relative;
    top: 2px;
    display: inline;
  }

  .contact-section__tel-num {
    display: inline;
    margin-top: 0;
  }

  .contact-section__tel-time {
    margin-top: 0.35px;
    line-height: 1.7; /* 34px ÷ 20px */
  }
}