@charset "UTF-8";

/* ================================================================
   汎用PHPフォーム機能との接続用スタイル
   提供された common.css / form.css のデザインを崩さず、
   入力・確認・完了の全画面に適用する。
   ================================================================ */

/* サーバー側エラー */
.server-error {
  margin: 0 0 3%;
  color: #ca0f2b;
  font-weight: bold;
}
.server-error:empty { display: none; }

/* 入力エラー一覧 */
.error-summary {
  margin: 0 0 4%;
  padding: 3.5% 5%;
  border: 2px solid #d43650;
  border-radius: 4px;
  background: #fff4f5;
}
.error-summary h3 {
  margin: 0 0 0.5em;
  color: #ca0f2b;
  font-size: 1.1em;
}
.error-summary ul {
  margin: 0.5em 0 0 1.5em;
  padding: 0;
}
.error-summary li { margin-top: 0.2em; }

.error-highlight {
  border-color: #d43650 !important;
  background-color: #fff7f8 !important;
  box-shadow: 0 0 1px 2px rgba(212, 54, 80, 0.3) !important;
}
.field-error {
  display: block;
  margin-top: 5px;
  color: #ca0f2b;
  font-size: 0.9em;
  font-weight: bold;
}

/* config.php の注釈行 */
.form-note-row {
  width: 100%;
  margin-top: 8%;
}
.form-note-row:first-child { margin-top: 1%; }
.form-note-row td {
  width: 100%;
  padding: 0;
}
.form-note {
  padding: 5px 10px;
  border: 1px solid #d4ecff;
  border-radius: 5px;
  box-shadow: 0 0 0 3px #0663a9;
  background: #0663a9;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.6;
}
.form-note.standard,
.form-note.highlight,
.form-note.subtle,
.form-note.rich {
  border-color: #d4ecff;
  background: #0663a9;
  color: #fff;
}

/* 住所グループ */
.address_group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.address-field { width: 100% !important; }
.stacked-label {
  display: block;
  margin: 2px 0 -7px;
  color: #555;
  font-size: 0.9em;
}

/* 補足文 */
.info_sub_txt {
  margin-top: 3px;
  color: #ca0f2b;
  font-size: 0.9em;
}

/* チェックボックス・ラジオボタンは元HTMLの素直な見た目に合わせる */
.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
}
.checkbox-group label,
.radio-group label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.checkbox-group input,
.radio-group input {
  margin-right: 0.35em;
}

/* 個人情報欄 */
.privacy-policy-content {
  max-height: 22em;
  margin: 0.8em 0;
  padding: 3.5% 5%;
  overflow: auto;
  border: 1px solid #a4a4a4;
  font-size: 1.5rem;
}

/* 確認・完了画面 */
.sending_before,
.sending_after {
  margin-bottom: 4%;
}
.sending_before h2,
.sending_after h2 {
  margin-top: 0;
}
.sending_before p,
.sending_after p {
  margin-top: 0.5em;
}

/* 既存クラス名のまま、提供HTMLのボタンデザインへ統一 */
.submit_btn_area { padding: 0; background: transparent; }
input[type="reset"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0 10px 15px;
  padding: 10px 20px;
  border: 0;
  border-radius: 4px;
  background: #222;
  color: #fff;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* 入力しやすさを保ちながら、元HTMLの寸法ルールを踏襲 */
textarea { min-height: 8em; }
input[type="email"],
input[type="tel"],
input[type="number"] { max-width: 100%; }

.top-link {
  margin-top: 2em;
  text-align: center;
}

@media print, screen and (min-width: 540px) {
  input[type="reset"] {
    margin: 0.8em;
    padding: 15px 25px;
  }
}

@media screen and (min-width: 768px) {
  .form-note-row { margin-top: 4%; }
  .privacy-policy-content { padding: 1.5% 3%; }
}

/* 年齢欄などの単位表示 */
.field-suffix {
  display: inline-block;
  margin-left: 0.1em;
  white-space: nowrap;
}

/* config.php の choice_layout = stacked */
.checkbox-group.stacked,
.radio-group.stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
}