@charset "utf-8";
/* =====================================================================
   HSRT 予約システム / 共通スタイル
   ===================================================================*/
:root{
  --ink:#101B24;
  --paper:#F2EFE8;
  --white:#FFFFFF;
  --accent:#0F6E8C;
  --accent-dark:#0B5570;
  --accent-pale:#E4EDF1;
  --line:#D9D3C7;
  --line-soft:#EFEBE2;
  --muted:#5C6670;
  --warn:#C2703F;
  --dim:#B4AFA4;
  --alert:#B4462F;
  --radius:4px;
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans","Noto Sans Thai",sans-serif;line-height:1.7;
}
/* タイ語：声調記号が上下に付くため行間を広めに取る */
[lang="th"]{
  font-family:"Noto Sans Thai",sans-serif;
  font-size:1.05em;line-height:1.85;word-break:break-word;
}
h1,h2,h3{font-family:"Barlow Condensed",sans-serif;letter-spacing:.04em;margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:15px;color:var(--ink);background:var(--white);}
a{color:var(--accent);}
a:hover{color:var(--accent-dark);}
.hidden{display:none !important;}

/* --- ヘッダー ------------------------------------------------------ */
.hd{background:var(--ink);color:var(--paper);}
.hd-in{max-width:1360px;margin:0 auto;padding:16px 20px;}
.hd-logo{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;letter-spacing:.06em;}
.hd-sub{font-size:12px;color:#9FB0BC;letter-spacing:.06em;}

.steps{background:var(--white);border-bottom:1px solid var(--line);}
.steps-in{max-width:1360px;margin:0 auto;padding:12px 20px;display:flex;gap:8px;}
.steps span{flex:1;text-align:center;font-size:12px;color:#98A2AC;padding:6px 0;
  border-bottom:2px solid var(--line-soft);}
.steps span.on{color:var(--ink);font-weight:700;border-bottom-color:var(--accent);}

.wrap{max-width:1360px;margin:0 auto;padding:24px 20px 60px;}

/* --- レイアウト ---------------------------------------------------- */
.cols{display:flex;gap:28px;align-items:flex-start;}
.col-side{width:460px;flex-shrink:0;display:flex;flex-direction:column;gap:18px;}
.col-main{flex:1;min-width:0;}
@media (max-width:980px){
  .cols{flex-direction:column;}
  .col-side{width:100%;}
}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.card.pad{padding:24px;}
.sec-t{font-size:23px;font-weight:700;margin-bottom:2px;}
.sec-t.big{font-size:32px;margin:18px 0 8px;}
.sec-s{font-size:13px;color:var(--muted);margin:0 0 14px;}
.fine{font-size:12px;color:var(--muted);margin:0;line-height:1.75;}
.fine.center{text-align:center;}
.err{background:#F6E3DE;border:1px solid #E0BCB1;color:#8B3A25;border-radius:var(--radius);
  padding:10px 14px;font-size:13px;margin:0 0 12px;}

/* --- コースカード -------------------------------------------------- */
.course{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:15px 18px;margin-bottom:10px;text-align:left;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);}
.course.on{border:2px solid var(--accent);box-shadow:0 2px 0 var(--accent);}
.course-name{font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:700;
  letter-spacing:.04em;display:block;}
.course-th,.course-time{font-size:12px;color:var(--muted);display:block;}
.course-price{font-size:19px;font-weight:700;white-space:nowrap;}
.course-note{margin:2px 0 0;padding:10px 14px;background:var(--accent-pale);
  border:1px solid #BCD3DC;border-radius:var(--radius);
  font-size:12px;line-height:1.75;color:#24404C;}
.sum-note{margin:12px 0 0;padding-top:12px;border-top:1px solid #2C3A47;
  font-size:12px;line-height:1.75;color:#9FB0BC;}

/* --- 開始時刻 / 人数 ----------------------------------------------- */
.opt-label{font-size:13px;font-weight:600;margin-bottom:10px;}
.opt-hint{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.6;}
.pills{display:flex;gap:10px;flex-wrap:wrap;}
.pills button{flex:1;min-width:96px;height:46px;border-radius:var(--radius);font-size:14px;
  font-weight:600;background:var(--white);color:var(--ink);border:1px solid #C9C2B4;}
.pills button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.pills button:disabled{opacity:.4;cursor:not-allowed;}

.qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.qty-row label{font-size:14px;font-weight:600;}
.qty{display:flex;align-items:center;gap:10px;}
.qty button{width:44px;height:44px;border:1px solid var(--ink);background:var(--white);
  border-radius:var(--radius);font-size:20px;line-height:1;}
.qty button:disabled{opacity:.3;cursor:not-allowed;}
.qty input{width:64px;height:44px;text-align:center;font-size:18px;font-weight:700;
  border:1px solid var(--line);border-radius:var(--radius);background:#F7F5F0;}

.price-box{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:12px;}
.price-row{display:flex;justify-content:space-between;font-size:13px;color:#4A545E;padding:3px 0;}
.price-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line-soft);margin-top:8px;padding-top:10px;font-size:14px;font-weight:600;}
.price-total b{font-size:26px;color:var(--accent);}
.price-per{text-align:right;font-size:12px;color:var(--muted);}

/* --- カレンダー ---------------------------------------------------- */
.cal-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;flex-wrap:wrap;}
.cal-nav{display:flex;align-items:center;gap:12px;}
.cal-nav button{width:44px;height:44px;border:1px solid var(--line);background:var(--white);
  border-radius:var(--radius);}
.cal-nav button:disabled{opacity:.3;cursor:not-allowed;}
.cal-month{font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:600;
  min-width:170px;text-align:center;}
.cal-note{font-size:13px;color:#4A545E;margin:0 0 14px;white-space:pre-line;line-height:1.75;}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.cal-dow{text-align:center;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--muted);padding-bottom:4px;}
.cal-dow.sun{color:var(--alert);} .cal-dow.sat{color:#2A6079;}
.cal-cell{height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;border:1px solid var(--line-soft);border-radius:var(--radius);
  background:var(--white);color:var(--ink);padding:0;}
.cal-cell .d{font-size:16px;font-weight:700;}
.cal-cell .t{font-size:11px;font-weight:600;color:var(--accent);}
.cal-cell.few .t{color:var(--warn);}
.cal-cell.off{background:#F0EEE8;color:#A8AEB4;cursor:not-allowed;}
.cal-cell.off .t{color:#A8AEB4;}
.cal-cell.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.cal-cell.on .t{color:#DCEAF0;}
.cal-blank{height:78px;}
.cal-loading{text-align:center;padding:40px 0;color:var(--muted);font-size:13px;}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:#4A545E;margin-top:16px;}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;}
.lg-open{background:var(--accent);} .lg-few{background:var(--warn);} .lg-off{background:var(--dim);}
@media (max-width:560px){
  .cal-cell,.cal-blank{height:50px;}
  .cal-cell .d{font-size:14px;}
  .cal-cell .t{display:none;}
  .cal-cell:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .cal-cell.few:after{background:var(--warn);}
  .cal-cell.off:after{background:var(--dim);}
  .cal-cell.on:after{background:#fff;}
}

/* --- フォーム ------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.field.last{margin-bottom:0;}
.field label{font-size:13px;font-weight:600;}
.field .req{color:var(--alert);}
.field .opt{color:var(--muted);font-weight:400;font-size:12px;}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;padding:12px 14px;border:1px solid #C9C2B4;border-radius:var(--radius);}
.field input[type=text],.field input[type=email]{height:48px;padding:0 14px;}
.field .hint{font-size:12px;color:var(--muted);}
.row2{display:flex;gap:18px;}
.row2>*{flex:1;}
@media (max-width:640px){.row2{flex-direction:column;gap:0;}}

.summary{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:22px;}
.summary h3{font-size:14px;letter-spacing:.14em;color:#9FB0BC;margin-bottom:14px;}
.summary dl{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin:0 0 10px;}
.summary dt{color:#9FB0BC;margin:0;} .summary dd{margin:0;font-weight:600;text-align:right;}
.summary .tot{border-top:1px solid #2C3A47;margin-top:16px;padding-top:14px;
  display:flex;justify-content:space-between;align-items:baseline;}
.summary .tot b{font-size:28px;}
.summary .tot-per{text-align:right;font-size:12px;color:#9FB0BC;}

.notice{background:var(--accent-pale);border:1px solid #BCD3DC;border-radius:var(--radius);
  padding:14px 16px;font-size:13px;color:#24404C;margin:16px 0;}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin-bottom:16px;}
.agree input{width:20px;height:20px;flex-shrink:0;margin-top:2px;}
.btn-main{width:100%;height:56px;border:none;border-radius:var(--radius);background:var(--accent);
  color:#fff;font-size:17px;font-weight:700;letter-spacing:.03em;}
.btn-main:hover{background:var(--accent-dark);}
.btn-main:disabled{opacity:.6;cursor:wait;}
.btn-back{border:none;background:none;padding:0 0 10px;font-size:13px;color:var(--accent);}
.btn-ghost{display:inline-block;height:50px;line-height:48px;padding:0 30px;
  border:1px solid var(--ink);background:var(--white);border-radius:var(--radius);
  font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;margin-top:26px;}

/* --- 完了・キャンセル ---------------------------------------------- */
.done{max-width:660px;margin:0 auto;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:44px 32px;text-align:center;}
.done-lead{font-size:15px;line-height:1.9;color:#34424E;margin:0;}
.done .box{background:#F7F5F0;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:18px 20px;text-align:left;margin-top:22px;}
.done .box dl{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin:0;padding:6px 0;}
.done .box dt{color:var(--muted);margin:0;}
.done .box dd{margin:0;font-weight:600;text-align:right;}

/* =====================================================================
   規約モーダル
   ===================================================================*/
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;padding:20px;}
.modal[hidden]{display:none;}
.modal-back{position:absolute;inset:0;background:rgba(16,27,36,.62);}
.modal-box{position:relative;width:100%;max-width:720px;max-height:88vh;
  background:var(--white);border-radius:var(--radius);display:flex;flex-direction:column;
  box-shadow:0 18px 50px rgba(16,27,36,.28);overflow:hidden;}

.modal-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--line);}
.modal-t{font-size:20px;font-weight:700;}
.modal-x{width:44px;height:44px;border:none;background:none;font-size:26px;line-height:1;
  color:var(--muted);border-radius:var(--radius);flex-shrink:0;}
.modal-x:hover{background:#F2EFE8;color:var(--ink);}

.modal-tabs{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--line);
  background:#FAF8F4;}
.modal-tabs button{padding:13px 20px;border:none;background:none;font-size:14px;
  color:var(--muted);border-bottom:2px solid transparent;}
.modal-tabs button:hover{color:var(--ink);}
.modal-tabs button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--accent);}

.modal-body{padding:22px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.terms-pane[hidden]{display:none;}
.terms-pane h3{font-size:19px;font-weight:700;margin:0 0 14px;padding-bottom:8px;
  border-bottom:2px solid var(--accent);}
.terms-pane h4{font-family:"Noto Sans","Noto Sans Thai",sans-serif;font-size:14px;
  font-weight:700;letter-spacing:0;margin:20px 0 6px;}
.terms-pane p{font-size:13.5px;line-height:1.9;color:#34424E;margin:0 0 8px;}
.terms-pane[lang="th"] p{line-height:2;}
.terms-meta{margin-top:18px !important;font-size:12px !important;color:var(--muted) !important;}
.terms-hr{border:none;border-top:1px solid var(--line-soft);margin:28px 0 24px;}

.modal-ft{padding:14px 22px;border-top:1px solid var(--line);text-align:right;background:#FAF8F4;}
.btn-ghost.sm{height:44px;line-height:42px;padding:0 24px;font-size:14px;margin-top:0;}

body.modal-open{overflow:hidden;}

@media (max-width:640px){
  .modal{padding:0;}
  .modal-box{max-width:none;max-height:100vh;height:100vh;border-radius:0;}
  .modal-tabs{padding:0 16px;}
  .modal-hd,.modal-body,.modal-ft{padding-left:16px;padding-right:16px;}
  .modal-t{font-size:17px;}
}