/* ==================================================
   custom-css-sample.css
   予約フォーム固有CSS
================================================== */

/* ==================================================
   body / header / footer
================================================== */

body.public{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:#F1F1F1;
}

header,
footer{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:72px;
}

header{
  margin-bottom:64px;
  background:#fff;
}

header > h1{
  width:120px;
}

footer{
  margin-top:0;
  background:#05AAC4;
  font-size:11px;
  color:#fff;
}

/* ==================================================
   レイアウト
================================================== */

body.public .wrap{
  width:88%;
  max-width:680px;
  margin:0 auto 96px;
}

/* ==================================================
   見出し
================================================== */

h2.flow-title{
  display:flex;
  align-items:center;
  line-height:1;
  font-size:18px;
  font-weight:700;
  margin:0 0 28px;
}

h2.flow-title > span{
  display:inline-block;
  margin:3px 12px 0 0;
  padding:6px 10px 7px;
  background:#ff704d;
  border-radius:6px;
  font-size:10px;
  color:#fff;
}

body.public .form-title,
body.public .reserve-steps{
  display:none;
}

/* ==================================================
   プログラム / 日程
================================================== */

.program-list{
  display:grid;
  gap:14px;
}

.program-option,
.date-option{
  display:block;
  margin:0;
}

.program-card,
.date-card{
  display:block;
  cursor:pointer;
  padding:16px 18px;
  border:1px solid #dee2e6;
  border-radius:10px;
  background:#fff;
  transition:.15s ease;
}

.program-card:hover,
.date-card:hover{
  background:#f8f9fa;
}

.program-card strong,
.date-card strong{
  display:block;
  font-size:16px;
  font-weight:500;
  margin-bottom:4px;
}

.program-card p,
.date-card p{
  margin:8px 0 0;
  color:#555;
  font-size:14px;
}

.hidden-radio{
  display:none;
}

.hidden-radio:checked + .program-card,
.hidden-radio:checked + .date-card{
  background:rgba(5,170,196,.08);
  box-shadow: inset 0 0 0 2px #05AAC4, 0 2px 8px rgba(0,0,0,.05);
}

.date-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:12px;
}

/* 開催時間カード */
.time-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:12px;
}

.time-card{
  display:block;
  cursor:pointer;
  border:1px solid #dee2e6;
  border-radius:10px;
  background:#fff;
  padding:16px 18px;
  transition:.15s ease;
}

.time-card:hover{
  background:#f8f9fa;
}

.time-card strong{
  display:block;
  font-size:17px;
  font-weight:500;
  margin-bottom:4px;
}

.time-card p{
  margin:8px 0 0;
  color:#555;
  font-size:14px;
}

.hidden-radio:checked + .time-card{
  background:rgba(5,170,196,.08);
  box-shadow: inset 0 0 0 2px #05AAC4, 0 2px 8px rgba(0,0,0,.05);
}

/* ==================================================
   選択情報 / 空きなし表示
================================================== */

.selected-info{
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  padding:16px;
  line-height:1.8;
  margin:0 0 28px;
  font-size:14px;
}

.no-available-dates{
  padding:18px;
  text-align:center;
  background:#fff5f5;
  border:1px solid #fecaca;
  border-radius:10px;
  color:#dc2626;
  font-weight:700;
  margin:20px 0;
}

/* ==================================================
   入力フォーム
================================================== */

/* 備考 → プライバシーポリシー間の余白 */
body.public textarea[name="message"]{
  margin-bottom:24px;
}

/* ==================================================
   ボタン配置
================================================== */

/* 単独ボタン */
.single-action{
  width:50%;
  display:flex;
  margin:32px auto 0;
}

.form-actions{
  display:flex;
  gap:24px;
}
.form-actions .btn-back{
  order:1;
}
.form-actions .btn-next{
  order:2;
}

/* 戻る・進むボタン */
.form-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin:32px auto 0;
  width:100%;
  max-width:880px;
}

.form-actions .btn{
  width:calc(50% - 12px);
  max-width:420px;
  flex:0 0 calc(50% - 12px);
  margin:0;
}

/* 送信完了画面：戻るボタン */
.notice + .form-actions{
  max-width:none;
}

.notice + .form-actions .completed-return-button{
  width:auto;
  min-width:280px;
  max-width:320px;
  flex:0 0 auto;
  margin:0 auto;
}

.btn{
    transition:.25s ease;
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.btn:active{
    transform:translateY(0);
}

/* ==================================================
   確認画面
================================================== */

.confirm-table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 36px;
}

.confirm-table th,
.confirm-table td{
  border-bottom:1px solid #ddd;
  background:#fff;
  padding:16px 20px;
  vertical-align:middle;
  font-weight:400;
}

.confirm-table th{
  width:30%;
  border-right:1px solid #ddd;
  background:#fff;
  font-weight:600;
}

/* ==================================================
   レスポンシブ
================================================== */

@media (max-width:640px){
  header{
    margin-bottom:40px;
  }

  body.public .wrap{
    width:90%;
    margin-bottom:72px;
  }

  h2.flow-title{
    font-size:16px;
    margin:0 0 20px;
  }
  
  .program-list{
    gap:8px;
  }

  .single-action{
    width:100%;
  }

  .form-actions{
    flex-direction:column;
    gap:10px;
    max-width:none;
  }

  .form-actions .btn{
    width:100%;
    flex:0 0 auto;
    max-width:none;
  }

  .confirm-table,
  .confirm-table tbody,
  .confirm-table tr,
  .confirm-table th,
  .confirm-table td{
    display:block;
    width:100%;
    box-sizing:border-box;
  }
  
  .confirm-table {
    margin: 24px 0 36px;
  }

  .confirm-table th{
    border-right:none;
    text-align: left;
  }

  .notice + .form-actions .completed-return-button{
    width:100%;
    min-width:0;
    max-width:none;
  }
}