/* お問い合わせフォーム（静的版）の見た目。index.html の #contact 内 form.contact-form だけが使う。
   旧 WordPress では SWELL の「カスタム CSS」（index.html のインライン <style>）と Contact Form 7 の styles.css で
   出していた規則を、wpcf7 非依存のクラス名でここに集約（2026-10-24）。SWELL テーマ本体の CSS は編集しない。
   色はサイトの既存配色: #54D8CE（ボタン・必須バッジ）、#76A5AF（任意バッジ・注記） */

/* ---- 旧カスタム CSS からの移植（見た目は旧実装と同じ）---- */
.contact-form .cf-label {
  font-size: .9em;
  font-weight: bold;
}
.contact-form .cf-caution {
  font-size: .6em;
  color: #76A5AF;
  text-align: center;
  margin-top: 8px;
}
.contact-form .required {
  font-size: .9em;
  padding: 5px 10px;
  background: #54D8CE;
  color: white;
  border-radius: 5px;
  margin-right: 12px;
}
.contact-form .optional {
  font-size: .9em;
  padding: 5px 10px;
  background: #76A5AF;
  color: white;
  border-radius: 5px;
  margin-right: 12px;
}
.contact-form .cf-control {
  display: block;
  width: 100%;
  padding: 15px 15px;
  margin: 12px 0;
  border: 0;
  border-radius: 5px;
  background-color: white;
  font-size: 16px; /* iOS で入力時に拡大されないように */
  font-weight: normal;
  box-sizing: border-box;
}
.contact-form textarea.cf-control {
  height: 200px;
  resize: vertical;
}
.contact-form #formbtn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background: #54D8CE;
  color: #fff;
  font-size: .9em;
  font-weight: bold;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.5;
}
.contact-form #formbtn:hover {
  opacity: .85;
}

/* ---- 静的版で追加した状態 ---- */
.contact-form .cf-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(84, 216, 206, .6);
}
.contact-form .cf-control.is-invalid {
  box-shadow: 0 0 0 2px #c0392b;
}
.contact-form .cf-error {
  color: #c0392b;
  font-size: .85em;
  margin: -6px 0 10px;
}
.contact-form .cf-error:empty {
  display: none;
}
.contact-form #formbtn:disabled {
  cursor: not-allowed;
  opacity: .6;
}
/* 送信中: ボタン内に回転スピナー（JS が form に is-submitting を付ける間だけ） */
.contact-form.is-submitting #formbtn::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  vertical-align: -0.15em;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cf-spin .8s linear infinite;
}
@keyframes cf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contact-form.is-submitting #formbtn::before { animation: none; border-top-color: rgba(255, 255, 255, .35); }
}
.contact-form .cf-response {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: .9em;
}
.contact-form .cf-response.is-success {
  color: #155724;
  background: #d4edda;
  border-color: #c3e6cb;
}
.contact-form .cf-response.is-error {
  color: #721c24;
  background: #f8d7da;
  border-color: #f5c6cb;
}
/* ハニーポットと読み上げ専用の領域は視覚的に隠す（display:none だと一部のボットが埋めないため位置で隠す） */
.contact-form .cf-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.contact-form .screen-reader-response {
  position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}