/* お問い合わせページ（/contact/）固有のスタイル
 *
 * **このファイルは contact/index.html だけが読み込む。**
 * header / footer の見た目は sections.css・components.css・sp.css が担うので、
 * ここには書かない（トップページの検証済み差分に一切影響させないため）。
 *
 * トップページと違い Figma のデザインが無いページなので、
 * **既存トークンと既存セクションの型（h2-mark + 見出し + リード）に揃える**方針で組む。
 * 生の色・サイズは書かず、必ず `--c-*` / `--fs-*` を使う（check-css が生hexをNGにする）。
 *
 * SP は 375px 固定設計に合わせる。sp.css の中央寄せブロックは
 * セクションIDを列挙する形なので `#contact` は含まれない。ここで同じ calc を持つ。
 */

/* ===========================================================
   PC（1920px 固定デザイン）
   =========================================================== */

#contact {
  border-top: var(--bd);
}

/* 幅は section4 と同じ --w-wide(1200px)。上下の余白も section4 に合わせる */
#contact > .is-in {
  max-width: var(--w-wide);
  padding: 72.948px 0 80px;
}

/* パンくず。デザイン上の指定が無いので、注記と同じ最小サイズで控えめに置く */
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  color: var(--c-text-sub);
}

.breadcrumb a {
  color: var(--c-blue-text);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

#contact .h2-mark {
  margin-inline: auto;
}

/* 見出し。section4 の h2 と同じ寸法（Zen Kaku 30px / テキスト高43px）に揃える。
   h1 だがページ内で唯一の見出しなので、サイズは h2 と同じでよい */
#contact h1 {
  margin-top: 10.9px;
  font-size: var(--fs-h2);
  line-height: 43px;
  text-align: center;
}

#contact .lead {
  margin-top: 10.9px;
  padding-top: 5.1px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-align: center;
}

/* --- HubSpot 埋め込みフォームの器 ---
   **中身のマークアップは HubSpot が生成する。** 内部要素を細かく上書きすると
   HubSpot 側の変更で壊れるので、ここでは幅・余白・下地だけを持つ。 */
.contact-form {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 40px;
  background: var(--c-white);
  border: var(--bd);
  border-radius: var(--r-md);
}

/* フォームが読めないときの代替導線。JSが無効・埋め込みが落ちたときに出る */
.contact-noscript {
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
  color: var(--c-text);
}

.contact-noscript a {
  color: var(--c-blue-text);
  text-decoration: underline;
}

/* --- 電話の導線 --- */
.contact-tel {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 28px;
  text-align: center;
  background: var(--c-tint);
  border-radius: var(--r-md);
}

.contact-tel-label {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-lead);
  color: var(--c-navy);
}

.contact-tel-num {
  margin-top: 8px;
}

.contact-tel-num a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-family: var(--f-num);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-navy);
  letter-spacing: var(--ls-tel);
}

.contact-tel-num img {
  width: 28px;
  height: 18px;
}

.contact-tel-hours {
  margin-top: 4px;
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  color: var(--c-text);
}

/* ===========================================================
   SP（375px 固定設計）
   ブレークポイントは sp.css と同じ 767px。
   =========================================================== */
@media (max-width: 767px) {
  /* sp.css の中央寄せブロックはセクションIDを列挙する形なので `#contact` は
     含まれない。375px より広いビューポートで左端に貼り付かないよう、同じ calc を持つ。
     375px ちょうどでは 0 になる */
  #contact {
    padding-inline: max(0px, calc((100% - 375px) / 2));
  }

  #contact > .is-in {
    padding: 48px 24px 64px;
  }

  .breadcrumb {
    margin-bottom: 24px;
  }

  /* SP の見出しは section4（SP07）と同じ 30px / テキスト高 43.5px に揃える */
  #contact h1 {
    height: 43.5px;
    font-size: var(--fs-h2);
    line-height: 45.5px;
  }

  #contact .lead {
    padding-top: 0;
    margin-top: 16px;
    font-size: 15px;
    line-height: 30px;
    text-align: left;
  }

  .contact-form {
    margin-top: 32px;
    padding: 20px;
  }

  .contact-tel {
    margin-top: 24px;
    padding: 20px;
  }

  .contact-tel-num a {
    font-size: 26px;
  }
}