:root{
  --brand:#f39800;
  --bg:#f5f5f5;
  --text:#333;
  --muted:#777;
  --card:#fff;
  --line:#ddd;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* ===== Topbar ===== */
.topbar{
  background:var(--brand);
  color:#fff;
}
.topbar-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.backlink{
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.18);
  padding:8px 12px;
  border-radius:10px;
}
.pagetitle{
  font-weight:700;
  font-size:20px;
  flex:1;
  text-align:center;
}
.topbar-spacer{ width:72px; } /* 戻ると左右バランス */

/* ===== Stepper ===== */
.stepper-wrap{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.stepper{
  max-width: 1100px;
  margin:0 auto;
  padding:12px 16px;
  list-style:none;
  display:flex;
  gap:10px;
}
.step{
  position:relative;
  flex:1;
  background:#eee;
  border-radius:10px;
  padding:12px 10px;
  text-align:center;
  font-size:13px;
  color:#555;
  overflow:hidden;
}
.step.is-done{
  background:#dff7e6;
  color:#2e7d32;
}
.step.is-current{
  background: #fff3d6;
  border:2px solid var(--brand);
  color:#b15f00;
  font-weight:700;
}
.step-label{ display:block; }

/* ===== Layout ===== */
.container{
  max-width:1100px;
  margin: 18px auto;
  padding: 0 16px 28px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
}
.card-title{
  font-weight:700;
  margin:0 0 10px;
}
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 860px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
}

.small{ color:var(--muted); font-size:13px; }
.row{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  border:none;
  background:var(--brand);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
}
.btn-sub{ background:#555; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* （残しておく：今後使う可能性あり） */
.back-to-menu{
  display:flex;
  justify-content:left;
  margin:16px 0 16px;
}
.btn-back{
  padding:10px 20px;
  border-radius:999px;
}

/* =========================================================
   入力エラー表示（重複を整理して最終形に統一）
   - input：左側に重ねる
   - select/radio：右側余白に表示（.right を付けた時）
   ========================================================= */

/* 入力欄内に重ねるためのラッパー */
.input-wrap{
  position: relative;
}

/* エラー文（共通） */
.input-error{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  color:#e60000;
  font-size:13px;
  pointer-events:none; /* クリックしても操作できる */
  white-space:nowrap;
  z-index:2;
}

/* 右側表示（radio/select用） */
.input-error.right{
  left:auto;
  right:24px; /* ←ここを増やすと左に寄る（20〜30で調整） */
}

/* ラジオの枠（右側にエラーを置く余白を確保） */
.input-wrap-radio{
  padding:10px 70px 10px 10px; /* 右余白 */
  border:1px solid var(--line);
  border-radius:12px; /* 12pxに統一（元が6pxになってたので戻した） */
  background:#fff;
}

/* selectも右側に余白を作る（矢印＋エラーのスペース） */
.input-wrap select{
  padding-right:70px;
}

/* スマホ時は文字少し小さく */
@media (max-width: 768px){
  .input-error{ font-size:12px; }
}

/* 予約フォーム下のボタンを完全に同サイズにする */
.row .btn {
  min-height: 48px;          /* 高さを統一 */
  padding: 12px 16px;        /* 上下左右の余白を統一 */
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* aタグでもbuttonと同じ見た目に */
.row a.btn {
  text-decoration: none;
}

/* スマホでは2つとも全幅に */
@media (max-width: 768px) {
  .row {
    flex-direction: column;
    align-items: stretch;
  }

  .row .btn {
    width: 100%;
  }
}