/* =========================================================
   RRT Front (scoped)
   - IMPORTANT: #rrt-app 内だけに適用して既存テーマ/CSSと衝突させない
   ========================================================= */

#rrt-app {
  box-sizing: border-box;
}
#rrt-app *, #rrt-app *::before, #rrt-app *::after {
  box-sizing: inherit;
}

/* 全体レイアウト：中央に“箱”を置き、中身は左揃え */
#rrt-app .rrt-front {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 12px;
  text-align: left;
}

/* セクション間：16〜24px */
#rrt-app .rrt-section {
  margin: 20px 0;
}

/* フォーム */
#rrt-app .rrt-form {
  width: 100%;
}

/* コントロール間：8〜12px */
#rrt-app .rrt-field {
  margin: 10px 0;
}

/* ラベル */
#rrt-app .rrt-field > label {
  display: block;
  font-weight: 700;
  margin: 0 0 6px 0;
}

/* 入力wrap */
#rrt-app .rrt-input-wrap {
  width: 100%;
}

/* 入力要素：width 100% + max 520 */
#rrt-app input,
#rrt-app select,
#rrt-app textarea {
  width: 100%;
  max-width: 520px;
  padding: 10px 12px;
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 1.3;
}

/* PCは横並び、スマホは縦 */
@media (min-width: 768px) {
  #rrt-app .rrt-field {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0;
  }
  #rrt-app .rrt-field > label {
    width: 190px;
    flex: 0 0 190px;
    margin: 0;
  }
  #rrt-app .rrt-input-wrap {
    flex: 1 1 auto;
  }
}

#rrt-app .description {
  margin: 6px 0 0 0;
  font-size: 12px;
  opacity: .75;
  max-width: 520px;
}

/* チェックボックス（label包み、1カラム維持） */
#rrt-app label.rrt-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 520px;
  margin: 10px 0;
  cursor: pointer;
}

/* radio / checkbox は通常の入力欄扱いにしない */
.rrt-front input[type="radio"],
.rrt-front input[type="checkbox"] {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  margin-top: 6px !important;

  appearance: auto !important;
  -webkit-appearance: auto !important;

  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer;
}

/* #rrt-app label.rrt-check input[type="checkbox"] {
  width: auto;
  max-width: none;
  margin-top: 2px;
} */

/* メッセージ（位置固定っぽく上部に確保） */
#rrt-app .rrt-messages {
  max-width: 520px;
  margin-bottom: 10px;
}
#rrt-app .rrt-msg {
  padding: 10px 12px;
  border-radius: 10px;
  margin: 8px 0;
  border: 1px solid #ddd;
  background: #f7f7f7;
}
#rrt-app .rrt-msg-error {
  border-color: #e4b4b4;
  background: #fff3f3;
}
#rrt-app .rrt-msg-success {
  border-color: #b4e4c4;
  background: #f1fff6;
}

/* ステップ表示（下線は無し、強調は背景で） */
#rrt-app .rrt-stepbar .rrt-steps {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#rrt-app .rrt-step {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  font-weight: 800;
  opacity: .45;
}

#rrt-app .rrt-step.is-active {
  opacity: 1;
  background: #fff;
  border-color: #cfcfcf;
}

/* hidden互換 */
#rrt-app .is-hidden,
#rrt-app .rrt-hidden {
  display: none !important;
}

/* WPのbuttonに寄せる */
#rrt-app button.button,
#rrt-app button.button-primary {
  cursor: pointer;
}

/* ===== Centering ===== */
#rrt-app{
  width: 100%;
}

#rrt-app > .rrt-front,
#rrt-app .rrt-front{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 12px;
}

/* ===== Hard center: #rrt-app を中央の箱に固定 ===== */
#rrt-app{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 16px 12px !important;
  background-image: url("../media/images/common/background.jpg");
}

#rrt-app .rrt-front{
  max-width: none !important; /* 二重max幅で崩れるの防止 */
  margin: 0 !important;
  padding: 0 !important;
}

#rrt-app .rrt-gender-wrap input[type="radio"],
#rrt-app .rrt-radio-inline input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;

  position: relative !important;
  display: inline-block !important;

  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;

  padding: 0 !important;
  margin: 0 4px 0 0 !important;

  border: 1px solid #8c8f94 !important;
  border-radius: 50% !important;
  background: #fff !important;

  vertical-align: middle !important;
  cursor: pointer;
}

#rrt-app .rrt-gender-wrap input[type="radio"]:checked,
#rrt-app .rrt-radio-inline input[type="radio"]:checked {
  border-color: #2271b1 !important;
}

#rrt-app .rrt-gender-wrap input[type="radio"]:checked::before,
#rrt-app .rrt-radio-inline input[type="radio"]:checked::before {
  content: "" !important;
  display: block !important;

  width: 8px !important;
  height: 8px !important;
  margin: 2px !important;

  border-radius: 50% !important;
  background: #2271b1 !important;
}