/* ── 予約確認ページ専用スタイル ── */
body.page-template-reservation-confirm {
  background: #eef7fc;
  font-family: sans-serif;
  padding: 0rem;
}

body.page-template-reservation-confirm main#main-content {
  padding: 1rem;
}


/* 予約確認ページの h2 全体にスタイル */
body.page-template-reservation-confirm h2 {
  font-size: 1.5rem;       /* 例：文字を少し大きく */
  font-weight: 600;        /* 太字に */
  margin-bottom: 1rem;     /* 下に余白 */
  text-align: center;      /* 中央寄せに */
}

/* h2 内の <small> にも個別に当てたい場合 */
body.page-template-reservation-confirm h2 small {
  display: block;
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.25rem;
}

.confirm-container {
  max-width: 600px;
  margin: auto;
  background: #fff;
  border: 1px solid #cce4f6;
  border-radius: 8px;
  padding: 1.5rem;
}

.confirm-container h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
.confirm-container h2 small {
  display: block;
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.25rem;
}

.section-title {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  border-left: 4px solid #51a4e6;
  padding-left: 0.5rem;
  color: #333;
}

/* フィールドを一つずつボックス化 */
.confirm-field {
    margin: 0; 
  border: 1px solid #ddd;
  border-radius: 0;         /* 中間は角丸をオフ */
  
}



/* フィールド同士の境界線をぴったり重ねる */
.confirm-field + .confirm-field {
  margin-top: -1px;         /* 枠線の重複を防いでつなげる */
}



/* ラベル部分 */
.confirm-label {
  background: #f5faff;
  padding: 0.5rem 0.5rem;
  font-weight: bold;
  color: #333;
  margin: 0;
}

/* 値部分 */
.confirm-value {
  background: #fff;
  padding: 0.7rem 0.5rem;
  white-space: pre-wrap;
  color: #444;
  margin: 0;
}

/* 画像 */
/* ── page-reservation-confirm.css ── */

/* 画像を包む .confirm-value.image-cell 自体を幅いっぱいに */
.confirm-value.image-cell {
  display: block;         /* デフォルトの inline-block や flex の影響をリセット */
  width: 100%;            /* 親コンテナいっぱいまで広げる */
  padding: 0;             /* 不要な内側の余白をリセット */
  margin: 0.5rem 0;       /* 上下だけ余白を入れる */
  box-sizing: border-box; /* パディングを含めて幅制御できるように */
}

/* その中の <img> は、幅100%・縦横比キープ */
.confirm-value.image-cell img {
  width: 100%;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: block;
}


/* ボタン群 */
.btn-group {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.btn-group > button {
  flex: 1;
}

/* ここから追記 */
.btn-group > form {
  flex: 1;
  display: flex;
  margin: 0;
}
.btn-group > form > button {
  flex: 1;
}
/* 追記ここまで */

.btn-group button {
  padding: 0.6rem 1.2rem;
  border: 1px solid #0073aa;
  background: #fff;
  color: #0073aa;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.btn-group .confirm {
  background: #0073aa;
  color: #fff;
}

.btn-group button:hover {
  background-color: #005f8a;
  color: #fff;
}

@media (max-width: 600px) {
  .btn-group {
    /* 横並びのまま左右のパディングだけ確保 */
    padding: 0 8px;
    margin-top: 1rem;
    gap: 0.5rem;
  }

  .btn-group > button,
  .btn-group > form > button {
    /* 縦パディングを小さく */
    padding: 0.4rem 0.8rem;
    /* フォントサイズも少し小さく */
    font-size: 0.9rem;
    /* 最小行高を抑える */
    line-height: 1.2;
  }
}