:root {
  --brand-orange: #f28c00;  /* 主要アクセント */
  --brand-pink:   #e9546b;  /* サブアクセント */
  --text-dark:    #333333;
  --bg-light:     #ffffff;
  --bg-muted:     #f7f7f9;
  --border:       #e1e3e8;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: var(--text-dark);
  background: var(--bg-muted);
}

.header {
  background: linear-gradient(90deg, var(--brand-orange), #ffa83a);
  color: #fff;
  padding: 24px 16px;
  border-bottom: 4px solid #ffd18a;
}
.header .title {
  max-width: 960px; margin: 0 auto;
  font-weight: 800; font-size: 1.8rem; letter-spacing: .02em;
}

.container {
  max-width: 960px; margin: 24px auto; padding: 0 16px;
}

.card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 24px;
}

.section-title {
  font-size: 1.6rem; font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-dark);
  border-left: 8px solid var(--brand-orange);
  padding-left: 12px;
}

.form-row { margin-bottom: 16px; }
.label {
  display: block; font-weight: 700; margin-bottom: 6px;
}
.required { color: var(--brand-pink); margin-left: 6px; font-weight: 800; }

.input, .btn, .readonly {
  width: 100%; font-size: 1rem; border-radius: 8px;
}
.input, .readonly {
  border: 1px solid var(--border); padding: 12px;
  background: #fff;
}
.readonly { background: #fdfdfd; color: #555; }
.input:focus {
  outline: none; border-color: var(--brand-orange);
  box-shadow: 0 0 0 4px rgba(242,140,0,.15);
}

.btn {
  border: none; padding: 14px 18px; cursor: pointer;
  font-weight: 800; letter-spacing: .02em;
}
.btn-primary {
  background: var(--brand-orange); color: #fff;
  transition: transform .05s ease, filter .2s ease;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: #fff; color: var(--text-dark);
  border: 2px solid var(--brand-orange);
}

.notice { font-size: .9rem; color: #666; }
.error { color: var(--brand-pink); font-weight: 700; }
.footer { text-align: center; padding: 24px; color: #888; font-size: .9rem; }

/* ===== 確認ページだけ readonly の枠線を消す ===== */
.confirm .readonly {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}