@charset "UTF-8";

/* =========================================================
   tonari – 下層ページ（お問い合わせ）
   ---------------------------------------------------------
   LP(index.html) は 375px のスマホ専用アートボードを
   base.css の html{font-size} でビューポート幅に合わせて拡縮するが、
   下層ページは 640px 幅の Google フォームを載せるため拡縮しない。
   1rem = 10px に固定して、Figma の px を 10 で割って rem で書く。
   Figma: 5676-42297 サービストップ（未ログイン）--PC
   ========================================================= */

:root {
  /* Figma: PFPS/Gray_02 */
  --c-gray-02: #99abbf;
}

html {
  /* 62.5% = 10px。ユーザーのブラウザ既定フォントサイズには追従する */
  font-size: 62.5%;
}

body {
  background: #f3f7fa;
  color: var(--c-text-strong);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.06rem;
}

/* ---------------------------------------------------------
   ヘッダー（Figma: Module / Navbar --PC）
   高さ 56px・白地・下に薄い影。
   ロゴは 142.222 x 28.085 を左端から 38px（30px + ロゴ枠内 8px）。
   スマホでは左余白とロゴを詰める。
   --------------------------------------------------------- */
.l-header {
  /* 後ろに続く .p-contact の白背景が影を塗りつぶすため、
     ヘッダーを重ね順で持ち上げる */
  position: relative;
  z-index: 1;
  height: 5.6rem;
  background: var(--c-white);
  box-shadow: 0 0.4rem 0.4rem rgba(26, 29, 32, 0.1);
}

.l-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: 1.6rem;
}

.l-header__home {
  display: block;
}

.l-header__logo {
  width: 12rem;
  height: 2.37rem;
}

/* ---------------------------------------------------------
   お問い合わせ本体
   Figma の中央の白カラムに相当。両脇に背景色が見える。
   --------------------------------------------------------- */
.p-contact {
  max-width: 72rem;
  margin-inline: auto;
  padding: 2.4rem 1.6rem 4rem;
  background: var(--c-white);
}

.p-contact__form {
  display: block;
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  border: 0;
}

/* ---------------------------------------------------------
   フッター
   --------------------------------------------------------- */
.l-footer {
  padding: 3.2rem 1.6rem 4rem;
  text-align: center;
}

.l-footer__copyright {
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0.05rem;
  color: var(--c-gray-02);
}

/* ---------------------------------------------------------
   PC
   --------------------------------------------------------- */
@media (min-width: 768px) {
  .l-header__inner {
    padding-inline: 3.8rem;
  }

  .l-header__logo {
    width: 14.222rem;
    height: 2.809rem;
  }

  .p-contact {
    padding: 4rem 4rem 6.4rem;
  }
}

/* ---------------------------------------------------------
   Google フォームの高さ
   ---------------------------------------------------------
   別オリジンの iframe は中身の高さを取得できないため決め打ちする。
   足りないと iframe 内に縦スクロールが出るので、実測値＋余裕を入れる。
   余った分はフォーム側の白地なので、白いカードに溶けて目立たない。

   フォーム幅は min(640px, ビューポート - 左右パディング)。
   ヘッドレスブラウザで実測した「フォーム幅 -> 必要な高さ」:
     /contact/          640:2537  560:2605  480:2692  400:2925  343:3081  300:3289
     /children/contact/ 640:2112  560:2160  480:2267  400:2434  343:2543  300:2664
   フォームの設問を増減したら、ここも測り直して更新すること。
   --------------------------------------------------------- */

/* 【ご利用前のお客様】tonariお問い合わせフォーム（/contact/） */
.p-contact__form--lp {
  height: 336rem;
}

/* tonariお問い合わせフォーム（/children/contact/） */
.p-contact__form--children {
  height: 272rem;
}

@media (min-width: 375px) {
  .p-contact__form--lp {
    height: 315rem;
  }

  .p-contact__form--children {
    height: 260rem;
  }
}

@media (min-width: 432px) {
  .p-contact__form--lp {
    height: 299rem;
  }

  .p-contact__form--children {
    height: 250rem;
  }
}

@media (min-width: 512px) {
  .p-contact__form--lp {
    height: 276rem;
  }

  .p-contact__form--children {
    height: 232rem;
  }
}

/* ここから上はフォーム幅が 640px で固定になる */
@media (min-width: 672px) {
  .p-contact__form--lp {
    height: 260rem;
  }

  .p-contact__form--children {
    height: 218rem;
  }
}