@charset "utf-8";
/* ===== お問い合わせページ（/contact/）=====
 *
 * このページは現行サイトに存在しない新規ページなので、
 * _tools/build-pages.py の生成対象ではありません。手書きで管理します。
 * （他のページの CSS はビルドで上書きされるため、直接編集しないこと）
 *
 * 見た目は下層ページに合わせています。
 *   本文        15px / 行間 1.6 / Karla（typography-unified.css で全ページ共通）
 *   アクセント色 #be1e2d（サイトの赤）
 *   コンテンツ幅 1170px（.fusion-row と同じ）
 */

/* ---- ページ全体 ----
 * ヘッダーは position:fixed で高さ 104px あるため、その分を空ける。
 * 下層ページは直下がスライダー（画像）なので 90px で足りているが、
 * このページは見出しが来るので隠れないように広めに取る。 */
#wrapper.dl-contact-wrapper {
  padding-top: 104px;
}

.dl-contact {
  max-width: 1170px;
  margin: 0 auto;
  padding: 56px 16px 96px;
  box-sizing: border-box;
}

/* ---- 見出し ---- */
.dl-contact .dl-contact-heading {
  margin: 0 0 8px;
  padding: 0 0 0 16px;
  border-left: 4px solid #be1e2d;
  color: #333333;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.3;
}

.dl-contact .dl-contact-heading-en {
  display: block;
  margin-top: 6px;
  color: #999999;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- 説明文 ---- */
.dl-contact .dl-form-note {
  margin: 32px 0 0;
  color: #494949;
}

.dl-contact .dl-required-mark {
  margin-left: .25em;
  color: #be1e2d;
  font-weight: bold;
}

/* ---- 入力行 ----
 * 画面が広いときは「見出し｜入力欄」の横並び、狭いときは縦積み。
 * テーブルを使わないのは、スマートフォンで横スクロールが出ないようにするため。 */
.dl-contact .dl-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid #e5e5e5;
}

.dl-contact .dl-form-row:last-of-type {
  border-bottom: 1px solid #e5e5e5;
}

.dl-contact .dl-form-label {
  flex: 0 0 260px;
  padding-top: 10px;
  padding-right: 24px;
  color: #333333;
  font-weight: bold;
  box-sizing: border-box;
}

.dl-contact .dl-form-field {
  flex: 1 1 320px;
  min-width: 0;
}

/* ---- 入力欄 ---- */
.dl-contact input[type="text"],
.dl-contact input[type="email"],
.dl-contact input[type="tel"],
.dl-contact select,
.dl-contact textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cccccc;
  border-radius: 2px;
  background-color: #ffffff;
  color: #333333;
  font-family: inherit;
  font-size: 15px;
  /* 高さは指定せず、padding と行間で決める。
     テーマ側が height:38px を当てており、そのままだと内側が 14px しか残らず
     日本語の下端（「ご」「す」など）が切れてしまうため打ち消している。 */
  height: auto;
  line-height: 1.6;
  box-sizing: border-box;
  transition: border-color .2s;
}

/* ---- セレクト ----
 * Avada の Contact Form 7 用 CSS「.wpcf7-select-parent .wpcf7-select」は
 * クラス2つぶんの詳細度があり、こちらの「.dl-contact select」（クラス1＋要素1）
 * より強いため、文字サイズ・余白・枠・矢印まで上書きされてしまう。
 * しかもこの指定は main.min.js が select を .wpcf7-select-parent で包んだ
 * 瞬間から効き始めるので、ヘッダーのメニューを直した副作用として現れた。
 * 同じ土俵で指定し直す。 */
.dl-contact select,
.dl-contact .wpcf7-select-parent .wpcf7-select {
  max-width: 460px;
  /* Chrome は <select> の line-height を無視するため、行間では高さを作れない。
     入力欄（padding 11px + 行間 24px + 枠 2px = 48px）に合わせて直接指定する。 */
  height: 48px;
  padding: 11px 12px;
  border: 1px solid #cccccc;
  border-radius: 2px;
  background-color: #ffffff;
  color: #333333;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  /* Avada が appearance:none にして標準の矢印を消すので戻す。
     Avada は代わりに .select-arrow を差し込む作りだが、その要素も
     icomoon の指定もこのテーマには無いため、矢印が消えたままになる。 */
  -webkit-appearance: auto;
  appearance: auto;
}

/* 包み要素は JS が作る。幅を入力欄にそろえる */
.dl-contact .wpcf7-select-parent {
  max-width: 460px;
}

/* Avada の JS はセレクトの右端に .select-arrow という白い箱（46x46・左に境界線）を
 * 差し込み、そこへ icomoon の矢印を出す作りになっている。
 * ただし矢印を出す CSS は「実際に使われているルールだけ抽出する」移行方針で
 * 落ちており、中身の無い白い箱だけが残って標準の矢印を覆い隠していた。
 * 標準の矢印を使うので、この箱ごと消す。 */
.dl-contact .wpcf7-select-parent .select-arrow {
  display: none;
}

.dl-contact textarea {
  resize: vertical;
}

.dl-contact input[type="text"]:focus,
.dl-contact input[type="email"]:focus,
.dl-contact input[type="tel"]:focus,
.dl-contact select:focus,
.dl-contact textarea:focus {
  border-color: #be1e2d;
  outline: none;
}

.dl-contact ::placeholder {
  color: #aaaaaa;
}

/* ---- 同意チェック ---- */
.dl-contact .dl-form-consent {
  margin: 32px 0 0;
  text-align: center;
}

.dl-contact .dl-form-consent .wpcf7-list-item {
  margin: 0;
}

.dl-contact .dl-form-consent input[type="checkbox"] {
  margin-right: .5em;
  vertical-align: middle;
}

/* ---- 送信ボタン ---- */
.dl-contact .dl-form-submit {
  margin: 28px 0 0;
  text-align: center;
}

.dl-contact input[type="submit"] {
  min-width: 280px;
  padding: 15px 40px;
  border: none;
  border-radius: 2px;
  background-color: #be1e2d;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .2s;
}

.dl-contact input[type="submit"]:hover,
.dl-contact input[type="submit"]:focus {
  background-color: #9c1825;
}

.dl-contact input[type="submit"]:disabled {
  background-color: #cccccc;
  cursor: default;
}

/* 送信中にボタンの横に出るぐるぐる */
.dl-contact .wpcf7-spinner {
  margin: 0 0 0 12px;
  vertical-align: middle;
}

/* ---- Contact Form 7 のメッセージ ---- */
.dl-contact .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #be1e2d;
  font-size: 13px;
}

.dl-contact .wpcf7-response-output {
  margin: 28px 0 0;
  padding: 14px 16px;
  border: 1px solid #cccccc;
  border-radius: 2px;
  font-size: 15px;
}

/* 入力に不備がある／送信に失敗した */
.dl-contact .wpcf7 form.invalid .wpcf7-response-output,
.dl-contact .wpcf7 form.unaccepted .wpcf7-response-output,
.dl-contact .wpcf7 form.payment-required .wpcf7-response-output,
.dl-contact .wpcf7 form.failed .wpcf7-response-output,
.dl-contact .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #be1e2d;
  background-color: #fdf3f4;
  color: #9c1825;
}

/* 送信できた */
.dl-contact .wpcf7 form.sent .wpcf7-response-output {
  border-color: #4d4e53;
  background-color: #f4f4f5;
  color: #333333;
}

/* ---- 画面が狭いとき ---- */
@media only screen and (max-width: 768px) {
  /* スマートフォンではヘッダーが低くなる */
  #wrapper.dl-contact-wrapper {
    padding-top: 74px;
  }

  .dl-contact {
    padding: 32px 16px 64px;
  }

  .dl-contact .dl-contact-heading {
    font-size: 24px;
  }

  .dl-contact .dl-form-row {
    display: block;
    padding: 18px 0;
  }

  .dl-contact .dl-form-label {
    display: block;
    margin-bottom: 8px;
    padding: 0;
  }

  .dl-contact select {
    max-width: none;
  }

  .dl-contact input[type="submit"] {
    width: 100%;
    min-width: 0;
  }
}

/* 「* は必須項目です。」は、上の案内文から少し離して置く。
 * 説明の続きではなく、入力欄に対する注意書きのため。 */
.dl-contact .dl-form-required-note {
  margin: 20px 0 40px;
  color: #494949;
}

/* ---- reCAPTCHA のバッジを畳ませない ----
 * reCAPTCHA v3 は読み込み直後に幅 256px の全体を出したあと、
 * インライン style の right を -186px に書き換えて、ロゴだけの
 * 状態へスライドさせます（transition: right .3s）。
 * 「一瞬出て消える」ように見えるのはこの動きで、実際にはロゴは
 * 右端に残っています。z-index が原因ではありません。
 *
 * 畳まずに出したままにします。インライン style を打ち消すため
 * !important が必要です。
 *
 * 読み込むのはフォームのあるページだけなので（functions.php の
 * wpcf7-recaptcha の dequeue）、他のページには影響しません。
 */
.grecaptcha-badge {
  right: 4px !important;
}