@charset "UTF-8";
/* ==========================================================================
   お問い合わせフォーム（Contact Form 7）

   フォームの項目は管理画面「お問い合わせ」→「お問い合わせ」から編集できます。
   このファイルは、その出力の見た目を整えるためのものです。

   項目を1つ増やすときは、管理画面のフォーム編集欄に
     <dl class="form_row">
       <dt>項目名<span class="req">必須</span></dt>
       <dd>[text* field-name]</dd>
     </dl>
   を足してください（必須でなければ <span class="req">必須</span> を省く）。
   ========================================================================== */

.contact_form {
  max-width: 800px;
  margin-inline: auto;
}

/* --- 1行（項目名＋入力欄）------------------------------------------------ */
.contact_form .form_row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--sh-line);
}

.contact_form .form_row dt {
  flex: 0 0 230px;
  padding-top: 12px;
  font-weight: 600;
  line-height: 1.6;
}

.contact_form .form_row dd {
  flex: 1 1 320px;
  margin: 0;
}

/* Contact Form 7 は入力欄を <span>、さらに WordPress が <p> で包みます。
   その <p> に本文用の余白（legal.css の 1.4em）が効いて間延びするので、
   フォームの中だけ余白を打ち消します。 */
.contact_form p {
  margin: 0;
}
.contact_form .wpcf7-form-control-wrap {
  display: block;
  line-height: 0;
}

/* --- 必須バッジ ---------------------------------------------------------- */
.contact_form .req {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 2px;
  background: var(--sh-accent-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  vertical-align: 2px;
}

/* --- 入力欄 -------------------------------------------------------------- */
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form input[type="date"],
.contact_form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--sh-line);
  border-radius: 3px;
  background: #fff;
  color: var(--sh-ink);
  font: inherit;
  font-size: 16px;   /* スマホで自動ズームさせないため16px以上 */
  line-height: 1.6;
}

.contact_form textarea {
  min-height: 180px;
  resize: vertical;
}

.contact_form input:focus,
.contact_form textarea:focus {
  outline: 2px solid var(--sh-accent);
  outline-offset: -1px;
}

.contact_form ::placeholder {
  color: #a9b4b4;
}

/* 日付欄は幅いっぱいだと間延びするので短めに */
.contact_form input[type="date"] {
  width: auto;
  min-width: 200px;
}

.contact_form .form_note {
  display: block;
  margin-top: 6px;
  color: var(--sh-muted);
  font-size: 13px;
}

/* --- 個人情報の案内 ------------------------------------------------------ */
/* 個人情報の案内。2行を別々の <p> にしているのは、
   WordPress が <br> の入った段落を分割してしまい、
   2行目だけ左寄せ・黒文字になってしまうためです。 */
.contact_form .form_privacy {
  margin: 24px 0 0;
  color: var(--sh-muted);
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

/* 2行目は1行目にくっつけて表示します */
.contact_form .form_privacy--tight {
  margin-top: 0;
}
.contact_form .form_privacy a {
  color: var(--sh-accent-dark);
  text-decoration: underline;
}

/* --- 送信ボタン ---------------------------------------------------------- */
.contact_form .form_submit {
  margin-top: 36px;
  text-align: center;
}

.contact_form input[type="submit"] {
  min-width: 280px;
  padding: 16px 40px;
  border: 1px solid var(--sh-accent-dark);
  border-radius: 28px;
  background: var(--sh-accent-dark);
  color: #fff;
  font: inherit;
  font-size: 16px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

.contact_form input[type="submit"]:hover {
  background: #fff;
  color: var(--sh-accent-dark);
}

/* 送信中のぐるぐる */
.contact_form .wpcf7-spinner {
  margin: 0 0 0 12px;
}

/* --- Contact Form 7 のメッセージ -----------------------------------------
   CF7 本体のCSSは wp_head() で後から読み込まれるため、
   同じ強さの指定だと勝てません。少し強めの書き方にしています。 */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
  max-width: 800px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border-width: 1px;
  border-radius: 3px;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--sh-accent-dark);
  background: var(--sh-tint);
  color: var(--sh-ink);
}
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output {
  border-color: #c0705f;
  background: #fbf2f0;
  color: #8d4132;
}

/* 各項目のエラー文言 */
.contact_form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #b4513e;
  font-size: 13px;
}
.contact_form .wpcf7-not-valid {
  border-color: #c0705f;
  background: #fdf7f6;
}


/* --- スマホ -------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .contact_form .form_row {
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .contact_form .form_row dt {
    flex: 1 1 100%;
    padding-top: 0;
  }
  .contact_form .form_row dd {
    flex: 1 1 100%;
  }
  .contact_form input[type="submit"] {
    min-width: 0;
    width: 100%;
  }
}