@charset "UTF-8";
/* お問い合わせフォーム（Contact Form 7）: CF7 の出力を common.css の旧 MW WP Form 用デザインに合わせる */

/* tel 項目（common.css に input[type=tel] の指定がないため text/email と同じ見た目に） */
.contact_page input[type=tel] {
  font-family: inherit;
  font-size: inherit;
  border: solid 1px #A2A2A2;
  display: block;
  border-radius: 50px;
  width: 100%;
  padding: 12px 20px;
}
.contact_page input[type=tel]::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.contact_page .wpcf7-form-control-wrap {
  display: block;
}

/* ラジオ（= .mwform-radio-field-text） */
.contact_page .wpcf7-list-item {
  margin: 0;
}
.contact_page .wpcf7-list-item-label {
  position: relative;
  padding-left: 28px;
  margin-right: 20px;
  cursor: pointer;
}
.contact_page .wpcf7-list-item-label:before {
  z-index: 1;
  position: absolute;
  display: inline-block;
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0;
  top: 7px;
  left: 5px;
}
.contact_page .wpcf7-list-item-label:after {
  left: 0;
  position: absolute;
  display: inline-block;
  content: '';
  width: 20px;
  height: 20px;
  border: solid 1px #A2A2A2;
  background: #fff;
  top: 13px;
  transform: translate(0, -50%);
  border-radius: 50%;
}
.contact_page input[type=radio]:checked + .wpcf7-list-item-label:before {
  opacity: 1;
}
/* キーボード操作時のフォーカス表示（ラジオ本体は common.css で非表示） */
.contact_page input[type=radio]:focus-visible + .wpcf7-list-item-label:after {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* エラー（= .error） */
.contact_page .box .wpcf7-not-valid-tip {
  display: block;
  background: red;
  color: #fff;
  font-size: 14px;
  padding: 2px 10px 3px;
  margin-top: 10px;
}
.contact_page .box .wpcf7-not-valid-tip:before {
  content: '※';
}

/* 送信結果メッセージ */
.contact_page .wpcf7 form .wpcf7-response-output {
  margin: 30px 0 0;
  padding: 12px 15px;
  text-align: center;
  border-radius: 10px;
  font-size: 15px;
}
.contact_page .wpcf7 form.invalid .wpcf7-response-output,
.contact_page .wpcf7 form.unaccepted .wpcf7-response-output,
.contact_page .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: red;
  color: red;
}
.contact_page .wpcf7 form.failed .wpcf7-response-output,
.contact_page .wpcf7 form.aborted .wpcf7-response-output,
.contact_page .wpcf7 form.spam .wpcf7-response-output {
  border-color: red;
  background: #fff0f0;
}

/* スパム対策用の入力欄（画面外に置き、利用者には見せない） */
.rh-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信ボタン: CF7 は <input> を出力し :before を使えないため、矢印の丸を背景で描く */
.contact_page .box .w_btn input.btn01 {
  -webkit-appearance: none;
  appearance: none;
  background: url(../img/btn01_arrow.svg) no-repeat right 22px center / 8px auto,
              radial-gradient(circle at calc(100% - 26px) 50%, var(--orange) 11.5px, transparent 12.5px),
              #fff;
}
/* 送信中は押せないようにする（CF7 も送信中の再送信を無視する） */
.contact_page .wpcf7 form.submitting .w_btn input.btn01 {
  opacity: .5;
  pointer-events: none;
  cursor: wait;
}
.contact_page .w_btn {
  text-align: center;
}
.contact_page .w_btn .wpcf7-spinner {
  margin: 15px auto 0;
  display: block;
}
.contact_page .wpcf7 form:not(.submitting) .w_btn .wpcf7-spinner {
  display: none;
}

/* SP: ラジオを1行1項目（= common.css の .mwform-radio-field） */
@media only screen and (max-width: 767px) {
  .contact_page .box table td .wpcf7-list-item {
    display: block;
    margin-bottom: 10px;
  }
  .contact_page .box table td .wpcf7-list-item:last-child {
    margin-bottom: 0;
  }
  .contact_page .box .wpcf7-not-valid-tip {
    font-size: 12px;
  }
}