@charset "UTF-8";
/*-------------------------------
	ページ見出し
-------------------------------*/
/* specs.scss / offices.scss と同じ定義。これで3ページ目なので
   本来は common.scss へ移すタイミングだが、common.scss は再コンパイル禁止
   （common.css を手で直す必要がある）ため、いったんここにも持たせている */
.section-title {
  font-size: 3.2rem;
  font-weight: 500;
}

.section-titleEN {
  font-family: "Inter", sans-serif;
  margin-top: 0.4rem;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0;
}

/*-------------------------------
	お問い合わせ
-------------------------------*/
/* カンプが1400px幅なので、それより広い画面でも中身を1400pxで頭打ちにする。
   .inner は common.scss の共通パーツ（padding: 0 10rem のみで幅の指定は無い）なので、
   common.css を触らずに済むよう、このページの中だけを対象に上書きしている。
   1400px以下では max-width が効かないので今までどおり */
.contact .inner {
  max-width: 140rem;
  margin: 0 auto;
}

/* 下端はカンプのパンくずのborder-top 1689から逆算。
   見出しと「Contact」のインク間隔がカンプで45pxなので、
   .section-titleEN の margin-top は他ページの .6rem ではなく .4rem にしている */
.contact {
  padding-top: 5.6rem;
  padding-bottom: 12rem;
  color: #243748;
}

/*----- 2カラム */
/* カンプ(1400px時) 左ボックス x100–530（430px）/ フォーム x620–1300（680px）。
   .inner の内側1200pxが 430 + 90 + 680 でちょうど割り切れる。
   43rem 固定にすると画面を狭めたときに左だけ幅が残ってフォームばかり痩せるので、
   43fr : 68fr の比率で両方いっしょに縮むようにしている（1400pxではカンプ通りの430/680）。
   minmax(0, …) にしているのは、中の文字の最小幅で列が広がって
   はみ出すのを防ぐため。
   align-items: start にしているのは、左ボックスの高さを中身なりにして
   フォームの高さに引き伸ばさないため */
.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 68fr);
  align-items: start;
  gap: 8.8rem;
  margin-top: 3.2rem;
}

/*----- 左の案内ボックス */
/* カンプの本文左端は x124（＝左右2.4rem）だが、それだと内寸382pxしか無く、
   最長行「2〜3営業日以内に担当者よりご連絡差し上げます。」の送り幅(約384px。
   全角21字＋半角2字＋body共通の letter-spacing .04em)が入りきらずに折り返してしまう。
   カンプ自体が0.5px単位でぎりぎりの組みなので、2remにして余裕を持たせた。
   文字の開始位置はカンプより4px左になる */
.contact__intro {
  padding: 3.2rem 2.2rem;
  background: #DDE3E7;
  font-size: 1.6rem;
  line-height: 2;
}
.contact__intro p + p {
  margin-top: 1.6rem;
}

/* カンプの改行位置（<br>）を保てるのは、最長行の送り幅384pxがボックスに収まる幅まで。
   2カラムが 43fr : 68fr で縮むので内寸は
   (画面幅 - .innerの200 - gapの90) × 43/111 - 左右padding40 で、
   これが384pxを下回るのが約1385px（1390pxでは折り返さず1380pxで折り返すのを実測で確認）。
   それより狭いところで <br> を残すと「は、」だけが1行に落ちるような半端な改行になるので、
   自然な折り返しに任せる */
@media screen and (max-width: 1384px) {
  .contact__intro br {
    display: none;
  }
}
/*-------------------------------
	フォーム
-------------------------------*/
/* Contact Form 7 で組む前提。offices-detail.scss のフォームと同じ作りだが、
   ページ単位でCSSを分けているのでこちらにも同じ内容を持たせている。
   ・入力欄はCF7タグに class: を渡してここのクラスを付ける
     例) [text* your-name class:contact-form__input]
   ・CF7が出力する .wpcf7- で始まるクラス名は変えないこと */
/*----- 1項目 */
.contact-form__field {
  margin-top: 2rem;
}

/* フォームの1項目めだけは上の余白を持たない（グリッドの行頭に揃える）。
   CF7はformの先頭に隠しinputのdivを吐くので :first-child では選べず、
   クラスで指定している */
.contact-form__field--first {
  margin-top: 0;
}

/* line-height を明示しないと（＝normal）行ボックスがカンプより約1px高く、
   項目を下に行くほどズレが積み上がる。値は offices-detail.scss の
   .offices-form__label と揃えてある */
.contact-form__label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.44;
}

/*----- 必須 / 任意バッジ */
.contact-form__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.3rem;
  height: 1.6rem;
  margin-left: 1.6rem;
  border: 0.1rem solid currentColor;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6rem;
  vertical-align: middle;
}

.contact-form__badge--required {
  color: #CC0033;
}

.contact-form__badge--optional {
  color: #979797;
}

/*----- 入力欄 */
/* CF7はコントロールを span.wpcf7-form-control-wrap で包む。
   そのままだとインラインで幅が出ないのでブロックにして、
   ラベルとの間隔もここで取る */
.wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.4rem;
}

.contact-form__input {
  display: block;
  width: 100%;
  height: 5.2rem;
  padding: 0 1.6rem;
  border: 0.1rem solid #717E87;
  border-radius: 2px;
  background: #FAFAF7;
  color: #243748;
  font-family: inherit;
  font-size: 1.6rem;
  /* iOSで内側の影が付くのを消す */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.contact-form__input:focus-visible {
  outline: 0.2rem solid #243748;
  outline-offset: 0.2rem;
}

.contact-form__input--textarea {
  height: 20rem;
  padding: 1.6rem 2rem;
  line-height: 2;
  resize: vertical;
}

/*----- お問い合わせ種別（ラジオ） */
/* カンプ 丸16px・行ピッチ35・丸の左端がフォーム左端から8px内側。
   CF7は各選択肢を span.wpcf7-list-item で包んで横並びに出すので、縦積みに直す */
.contact-form__radio {
  /* 最後の選択肢と次の項目の間だけカンプが広い（他項目の2remに対し2.9rem）*/
  padding-bottom: 0.9rem;
}
.contact-form__radio .wpcf7-form-control-wrap {
  margin-top: 1.6rem;
}
.contact-form__radio .wpcf7-radio {
  display: block;
}
.contact-form__radio .wpcf7-list-item {
  display: block;
  margin: 0 0 0 0.8rem;
  /* カンプの行ピッチ35px。選択肢1行の高さ24pxとの差 */
}
.contact-form__radio .wpcf7-list-item + .wpcf7-list-item {
  margin-top: 1.1rem;
}
.contact-form__radio label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.contact-form__radio .wpcf7-list-item-label {
  margin-left: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* ブラウザ標準のラジオはカンプの形にできないので作り直す */
.contact-form__radio input[type=radio] {
  position: relative;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  border: 0.1rem solid #717E87;
  border-radius: 50%;
  background: #FAFAF7;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  /* 選択時の中黒。枠の内側に少し余白を残す */
}
.contact-form__radio input[type=radio]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin: -0.4rem 0 0 -0.4rem;
  border-radius: 50%;
  background: #243748;
  opacity: 0;
}
.contact-form__radio input[type=radio]:checked {
  border-color: #243748;
}
.contact-form__radio input[type=radio]:checked::before {
  opacity: 1;
}
.contact-form__radio input[type=radio]:focus-visible {
  outline: 0.2rem solid #243748;
  outline-offset: 0.2rem;
}

/*----- 個人情報の取り扱いについて */
.contact-form__field--policy {
  margin-top: 5.2rem;
}

/* 中身がボックスを超えたらここだけスクロールする */
.contact-form__policy {
  height: 16rem;
  margin-top: 0.4rem;
  padding: 1.6rem;
  overflow-y: auto;
  border: 0.1rem solid #979797;
  font-size: 1.4rem;
  line-height: 1.75;
  letter-spacing: 0;
}
.contact-form__policy p + p {
  margin-top: 1.4rem;
}

/*----- 注記 */
.contact-form__note {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.75;
}

/*----- 同意チェック */
.contact-form__consent {
  display: flex;
  justify-content: center;
  margin-top: 3.6rem;
  /* CF7が挟むspanは幅も余白も持たせない */
}
.contact-form__consent .wpcf7-form-control-wrap,
.contact-form__consent .wpcf7-acceptance,
.contact-form__consent .wpcf7-list-item {
  display: block;
  margin: 0;
}
.contact-form__consent label {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  cursor: pointer;
}
.contact-form__consent .wpcf7-list-item-label {
  margin-left: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
}

/* ブラウザ標準のチェックボックスはカンプの形にできないので作り直す */
.contact-form__consent input[type=checkbox] {
  position: relative;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  border: 0.1rem solid #243748;
  border-radius: 2px;
  background: #FAFAF7;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  /* チェックは画像。カンプでは長い方の先が枠の右上に触れる位置まで伸びている */
}
.contact-form__consent input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 2rem;
  height: 1.5rem;
  background: url(../images/common/check.webp) no-repeat center center/contain;
  opacity: 0;
}
.contact-form__consent input[type=checkbox]:checked::before {
  opacity: 1;
}
.contact-form__consent input[type=checkbox]:focus-visible {
  outline: 0.2rem solid #243748;
  outline-offset: 0.2rem;
}

/*----- 送信ボタン */
/* カンプ 336×60・フォーム幅680の中央 */
.contact-form__submit {
  position: relative;
  margin-top: 4rem;
  text-align: center;
  /* CF7がボタンの後ろに差し込む送信中スピナー（inline-block＋左右マージン）の幅で
     ボタンが左にずれるので、絶対配置にして中央寄せの計算から外す。ボタンの下中央に出す */
}
.contact-form__submit .wpcf7-spinner {
  position: absolute;
  top: 100%;
  left: 50%;
  margin: 1.2rem 0 0;
  transform: translateX(-50%);
}

.contact-form__button {
  width: 33.6rem;
  max-width: 100%;
  height: 6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #DDE3E7;
  color: #243748;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.contact-form__button:hover {
  opacity: 0.7;
}

/*----- CF7のメッセージ */
/* 送信結果とエラーはCF7が勝手に差し込むので、位置だけ整えておく */
.wpcf7-not-valid-tip {
  margin-top: 0.8rem;
  color: #CC0033;
  font-size: 1.3rem;
}

.wpcf7-response-output {
  margin: 2.4rem 0 0;
  padding: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}

@media screen and (max-width: 1023px) {
  .contact {
    padding-top: 4rem;
    padding-bottom: 8rem;
  }
  .section-title {
    font-size: 2.8rem;
  }
  /* 2カラムだとフォームが痩せて入力しづらいので、案内を上・フォームを下に積む */
  .contact__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 4rem;
    margin-top: 2.4rem;
  }
  .contact-form__field--policy {
    margin-top: 4rem;
  }
  .contact-form__consent {
    margin-top: 3.2rem;
  }
  .contact-form__submit {
    margin-top: 3.2rem;
  }
}
@media screen and (max-width: 768px) {
  .contact {
    padding-top: 2.4rem;
    padding-bottom: 8rem;
  }
  .section-title {
    font-size: 2.2rem;
  }
  .section-titleEN {
    font-size: 1.2rem;
  }
  .contact__layout {
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
  .contact__intro {
    padding: 2rem 1.6rem;
    font-size: 1.4rem;
  }
  .contact-form__field {
    margin-top: 1.6rem;
  }
  .contact-form__label {
    font-size: 1.4rem;
  }
  .contact-form__badge {
    margin-left: 1.2rem;
  }
  .contact-form__input {
    height: 4.8rem;
    /* iOSで入力時に拡大されないよう16px未満にしない */
    font-size: 1.6rem;
  }
  .contact-form__input--textarea {
    height: 16rem;
    padding: 1.2rem 1.6rem;
  }
  /* 選択肢が2行になることがあるので、丸を1行目の高さに合わせる */
  .contact-form__radio .wpcf7-list-item {
    margin-left: 0;
  }
  .contact-form__radio .wpcf7-list-item + .wpcf7-list-item {
    margin-top: 1.4rem;
  }
  .contact-form__radio label {
    align-items: flex-start;
  }
  .contact-form__radio .wpcf7-list-item-label {
    font-size: 1.4rem;
    line-height: 1.4;
  }
  .contact-form__radio input[type=radio] {
    margin-top: 0.2rem;
  }
  .contact-form__field--policy {
    margin-top: 3.2rem;
  }
  .contact-form__policy {
    height: 14rem;
    padding: 1.2rem;
    font-size: 1.3rem;
  }
  .contact-form__note {
    font-size: 1.3rem;
  }
  .contact-form__consent {
    margin-top: 2.8rem;
  }
  .contact-form__consent label {
    align-items: flex-start;
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .contact-form__consent .wpcf7-list-item-label {
    margin-left: 1.2rem;
  }
  .contact-form__submit {
    margin-top: 2.8rem;
  }
  .contact-form__button {
    height: 5.2rem;
  }
}
/*# sourceMappingURL=contact.css.map */