@charset "UTF-8";
/* --------------------------------------------------
  Snow Monkey Forms のフォームを、旧 MW WP Form 時代の
  デザイン（.tbl-form / .mod-input-text / .btn）に合わせる。
  2026-08-03 フォームプラグイン移行に伴い追加。
  値は assets/css/styles.css の該当ブロックから写している。

  プラグインのCSSはブロック描画時に出力されるため、この <link> より後に来る。
  そのため body を前置して詳細度で上回らせている。
  入力欄まわりはプラグイン側が「.smf-form .smf-xxx__control」（クラス2つ）で
  指定しているので、こちらも .smf-form を挟んで上回らせること。
-------------------------------------------------- */

/* 全体（旧 .tbl-form） */
body .smf-form {
  position: relative;
  width: 100%;
  margin: 0 auto 1em;
}

/* 各項目（旧 tr）。上端の境界線と、左端40pxのアクセント */
body .smf-form--simple-table .smf-item {
  position: relative;
  margin: 0;
  padding: 25px 0;
  border-top: 1px solid #F0EFED;
}

body .smf-form--simple-table .smf-item:before {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  content: "";
  width: 40px;
  height: 1px;
  background: #DEAFA8;
  z-index: 2;
}

/* 最終項目の下端（旧 .tbl-form:before / :after） */
body .smf-form--simple-table .smf-item:last-child {
  border-bottom: 1px solid #F0EFED;
}

body .smf-form--simple-table .smf-item:last-child:after {
  position: absolute;
  bottom: -1px;
  left: 0;
  display: block;
  content: "";
  width: 40px;
  height: 1px;
  background: #DEAFA8;
  z-index: 2;
}

/* ラベル列（旧 th） */
body .smf-form--simple-table .smf-item__col--label {
  position: relative;
  flex: 0 0 240px;
  max-width: 240px;
  padding: 0 55px 0 0;
  font-size: 16px;
  font-size: 0.8333333333vw;
}

/* 入力列（旧 td） */
body .smf-form--simple-table .smf-item__col--controls {
  flex: 1 1 calc(100% - 240px);
  max-width: calc(100% - 240px);
  padding-left: 20px;
}

/* 必須ラベル（旧 .required）。item に is-required クラスが付いた項目だけ */
body .smf-item.is-required .smf-item__col--label:after {
  position: absolute;
  top: 3px;
  right: 0;
  display: inline-block;
  content: "必須";
  height: 20px;
  padding: 0 5px;
  line-height: 20px;
  font-size: 14px;
  font-size: 0.7291666667vw;
  color: #FFF;
  background: #DEAFA8;
  white-space: nowrap;
}

/* テキスト入力・テキストエリア（旧 .mod-input-text / .mod-textarea） */
body .smf-form .smf-text-control__control,
body .smf-form .smf-textarea-control__control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px 15px;
  line-height: 1.5;
  border: 1px solid #A5A5A5;
  border-radius: 0;
  background-color: #FFFFFF;
  box-shadow: none;
}

/* 旧 .mod-size-l */
body .smf-form .smf-text-control__control {
  width: 75%;
}

/* 旧 .mod-size-ll + .mod-textarea */
body .smf-form .smf-textarea-control__control {
  width: 100%;
  max-width: 100%;
  height: 14em;
  line-height: 1.6;
}

body .smf-form .smf-text-control__control:focus,
body .smf-form .smf-textarea-control__control:focus {
  border: 1px solid #000;
  outline: none;
  transition: border 0.2s ease;
}

/* エラーが出た項目の枠（旧 .is-error）。
   プラグインはエラー項目にクラスを付けず、項目内に .smf-error-messages を出すだけなので
   :has() で拾う。未対応ブラウザでは枠が赤くならないだけで、エラー文言は出る。 */
body .smf-form .smf-item:has(.smf-error-messages) .smf-text-control__control,
body .smf-form .smf-item:has(.smf-error-messages) .smf-textarea-control__control {
  border: 1px solid #D40000;
  transition: border 0.2s ease;
}

body .smf-form .smf-error-messages {
  margin-top: 0.5em;
  font-size: 14px;
  font-size: 0.7291666667vw;
  color: #D40000;
}

/* ラジオボタン（旧 .mwform-radio-field.horizontal-item） */
body .smf-form .smf-radio-buttons-control--horizontal .smf-radio-buttons-control__control > .smf-label {
  display: inline-block;
  position: relative;
  margin: 0.3em 1em 0.3em 0;
  cursor: pointer;
}

/* プラグイン既定の inline-flex + gap をやめ、旧マークアップと同じ並びに戻す */
body .smf-form .smf-radio-button-control {
  display: inline;
  gap: 0;
}

/* ラジオ本体はブラウザ既定の描画に戻す（旧は border なし・背景透明・appearance auto） */
body .smf-form .smf-radio-button-control__control {
  position: relative;
  top: 0.3em;
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 7px 0 5px;
  vertical-align: top;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  border: 0;
  background-color: transparent;
}

/* 補足文（旧 .caption） */
body .smf-control-description {
  margin: 1em 0;
  font-size: 14px;
  font-size: 0.7291666667vw;
  line-height: 1.8571428571;
  color: #5D5D5D;
}

/* 確認画面では補足文を隠す（旧 .mw_wp_form_confirm .tbl-form .caption） */
body .smf-form--confirm .smf-control-description {
  display: none;
}

/* ボタン（旧 .btn / .mod-multi-button）
   プラグインが `.smf-form--simple-table + .smf-action` で margin を指定しているので、
   こちらも同じ隣接セレクタに body を足して上回らせる */
body .smf-form--simple-table + .smf-action,
body .smf-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 6.25% auto;
  text-align: center;
}

body .smf-action .smf-button-control {
  width: 22.3214285714%;
  padding: 0 10px;
}

body .smf-action .smf-button-control + .smf-button-control {
  margin-left: 0;
}

body .smf-action .smf-button-control__control {
  display: inline-block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  line-height: 45px;
  font-size: 18px;
  font-size: 0.9375vw;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  border: 1px solid #DEAFA8;
  border-radius: 0;
  background-color: #DEAFA8;
  background-image: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

body .smf-action .smf-button-control__control:hover {
  color: #DEAFA8;
  background-color: #FFF;
}

/* 「戻る」ボタン（旧 .btn-b） */
body .smf-action .smf-button-control__control[data-action="back"] {
  color: #5D5D5D;
  background-color: #F0EFED;
  background-image: none;
  border-color: transparent;
}

body .smf-action .smf-button-control__control[data-action="back"]:hover {
  color: #FFF;
  background-color: #5D5D5D;
}

/* 完了画面（旧 complete_message の出力先） */
body .smf-form--complete {
  text-align: center;
}

/* Cloudflare Turnstile のウィジェットを中央に寄せる。
   プラグインは .snow-monkey-forms-turnstile > div を display:grid で出すので、
   grid アイテム（Cloudflare の iframe）を中央に置く。
   ウィジェットモードが「非表示」のときは iframe 自体が描画されないため見た目に影響しない。 */
body .snow-monkey-forms-turnstile {
  text-align: center;
}

body .snow-monkey-forms-turnstile > div {
  justify-items: center;
}

/* ウィジェットはフォームの末尾（ボタンエリアの後ろ）に出力される。
   ボタンエリアの下マージン（6.25%）と、プラグイン既定の上マージン（16px）が
   重なって間延びするため、上マージンは持たせない。
   下側は次のセクションとの間隔として 6.25% を確保する。 */
body .snow-monkey-forms-turnstile--position\:after {
  margin-top: 0;
  margin-bottom: 6.25%;
}

@media only screen and (max-width: 560px) {

  body .snow-monkey-forms-turnstile--position\:after {
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 560px) {

  body .smf-form--simple-table .smf-item {
    display: block;
    padding: 0;
  }

  body .smf-form--simple-table .smf-item__col--label {
    flex: none;
    max-width: none;
    padding: 14px 55px 14px 10px;
    font-size: 1.4rem;
    background-color: #F0EFED;
  }

  body .smf-item.is-required .smf-item__col--label:after {
    top: 14px;
    right: 10px;
    font-size: 1.4rem;
  }

  body .smf-form--simple-table .smf-item__col--controls {
    max-width: none;
    padding: 10px 5px;
  }

  body .smf-form .smf-text-control__control {
    width: 100%;
  }

  body .smf-control-description,
  body .smf-form .smf-error-messages {
    font-size: 1.2rem;
  }

  body .smf-form--simple-table + .smf-action,
  body .smf-action {
    margin: 50px auto;
  }

  body .smf-action .smf-button-control {
    width: 100%;
    padding: 0;
  }

  body .smf-action .smf-button-control__control {
    width: 84%;
    font-size: 1.4rem;
  }

  body .smf-action .smf-button-control:first-child {
    margin-bottom: 20px;
  }
}