/* =========================
   全体
========================= */

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:#f5f7fb;
margin:0;
padding:20px;
color:#333;
}

h1,h2{
text-align:center;
margin:10px 0;
}

form{
margin:10px 0;
padding:10px;
background:#f9f9f9;
border-radius:8px;
}

button{
padding:6px 12px;
border:none;
background:#2196F3;
color:#fff;
border-radius:4px;
cursor:pointer;
}

.price-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-top:20px;
}
.card{
background:#f7f7f7;
padding:20px;
border-radius:12px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.price{
font-size:24px;
font-weight:bold;
margin-top:10px;
}


.note{
margin-top:10px;
font-size:13px;
color:#666;
}
.btn{
display:block;
margin:25px auto;
padding:12px;
background:#000;
color:#fff;
text-align:center;
border-radius:8px;
text-decoration:none;
width:80%;
}
.option-box{
margin-top:20px;
padding:15px;
background:#fff7f7;
border-radius:10px;
}

/* =========================
   カレンダー
========================= */

.calendar{
width:100%;
max-width:700px;
margin:20px auto;
border-collapse:collapse;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.calendar th{
background:#0b3d91;
color:#fff;
padding:6px 0;
font-size:13px;
}

.calendar td{
border:1px solid #e5e7eb;
height:50px;
width:14%;
vertical-align:top;
cursor:pointer;
position:relative;
font-size:12px;
transition:.2s;
}

.calendar td:hover{
background:#f0f6ff;
}


/* =========================
   カレンダーナビ
========================= */

.calendar-nav{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-bottom:15px;
}

.calendar-title{
font-size:18px;
font-weight:bold;
min-width:140px;
text-align:center;
}

.nav-btn{
background:#0b3d91;
color:#fff;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.nav-btn:hover{
background:#082c6c;
}


/* =========================
   日付
========================= */

.date-number{
font-size:13px;
font-weight:bold;
padding:4px;
}

.date-scale{
display:flex;
}



/* =========================
   空き表示
========================= */

.status{
font-size:11px;
text-align:center;
padding:2px 6px;
border-radius:20px;
display:inline-block;
}

.status-ok{
background:#e8f5e9;
color:#2e7d32;
}

.status-full{
background:#ffebee;
color:#c62828;
}


/* =========================
   日付状態
========================= */

.day.past{
background:#f1f1f1;
color:#aaa;
cursor:not-allowed;
}

.day.full{
background:#ffeaea;
cursor:not-allowed;
}

.day.selected{
background:#2196f3;
color:#fff;
}

.day.today{
outline:2px solid #1976d2;
background:#fff8e1;
}

.day.range{
background:#bbdefd;
}

.full-day{
background:#ccc;
color:#fff;
pointer-events:none;
}

.high-season {
  background: #ffe0b2;
  border: 2px solid orange;
}

.not-open{
  background:#eee;
  color:#999;
}

/* =========================
   時間グリッド
========================= */
.timeline{
overflow-x:auto;
white-space:nowrap;
padding:10px 0;
}

.timeline-wrap{
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin:12px 0 20px;
}


.timeline-wrapper{
width: 100%;
overflow-x:auto;
-webkit-overflow-scrolling: touch;
padding-top: 28px;
padding-bottom: 28px;
white-space: nowrap;
overflow-y: hidden;
position:relative;
}

.timeline-body{
position: relative;
width: calc(24px * 24 * 7);
height: 50px;
}

.timeline-bar{
display:flex;
width: calc(24px * 24 * 7 );
}

.timeline-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
}
.timeline-container{
overflow-x:auto;
}


.timeline-day{
   margin: bottom 15px;
}

.time-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
max-width:520px;
margin:20px auto;
text-align:center;
}

.timeline-row{
display:flex;
width:10080px;
}

.timeline-date{
width:1440px;
font-weight:bold;
padding-left:10px;
}

.timeline-hour{
width:180px;
text-align:center;
font-size:12px;
color:#666;
}


.time-slot{
width: 24px; /* ←細くした（LINE対策） */
height: 20px;
border-right: 1px solid#ddd;
background: #1e3a8a;
position: relative;
}


/* 下半分だけ色 */
.time-slot::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:50%;
  background:transparent;
}

/* 範囲 */
.time-slot.in-range::after{
  background:#93c5fd;
}
/* 開始 */
.time-slot.start::after{
  background:#93c5fd;
}

/* 終了 */
.time-slot.end::after{
  background:#93c5fd;
}

.time-slot:hover{
background:#f2f2f2;
}

.time-slot.selected{
background:#9dd3ec;
color:white;
}

.time-slot.full{
background:#ccc;
color:#777;
pointer-events:none;
}

.time-slot.range{
background:#8bbcff;
color:#fff;
}

.time-msg{
grid-column:1 / -1;
text-align:center;
}

.date-line{
display:flex;
font-weight:bold;
margin-bottom:5px;
}

.date-label{
display:inline-block;
width:1152px; /* 24px × 48時間 */
flex-shrink:0;
text-align:left;
padding-left:5px;
font-weight:bold;
}
#dateBar{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  margin-bottom:4px;
}

.date-item{
  width:576px;           /* 24時間 × 24px */
  flex:0 0 576px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-align:left;
  padding-left:0;
  box-sizing:border-box;
}
.timeline-grid-wrap{
  position:relative;
  width:max-content;
  padding-bottom:24px;
}


#timeScale{
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: 20px;
  position: relative;
}

.time-bar{
margin:20px 0;
padding:12px;
background:#f7f7f7;
border-radius:8px;
font-size:16px;
font-weight:600;
text-align:center;
}

#timeDisplay{
color:#333;
}


.time-scale{
display:flex;
width: 5376px;
}

.hour-scale{
display:flex;
margin-top: 4px;
width: 10080px;
font-size:11px;
height: 25px;
color: #666;
align-items: center;
}


.hour-bar{
position:relative;
height:30px;
}

.hour-label{
position:absolute;
top:10px;
transform:translateX(-50%);
font-size:12px;
color:#333;
}
.hour-tick{
position:absolute;
top: 0;
left: 0;
width: 1px;
height:5px;
background:#666;
}
.my-reserve.selected{
  background:#2E7D32;
}

.my-reserve{
  background:#4CAF50; /* 緑 */
  opacity:0.7;
}

​自分​
.my-day {
  background-color: #f76374; /* 緑とか */
  color: white;
}


.status-mine {
  background: #4CAF50;
  color: #fff;
}

.status-full {
  background: #ccc;
  color: #333;
}
/* =========================
   選択表示
========================= */

.summary{
max-width:500px;
margin:15px auto;
display:flex;
gap:10px;
}

.time-box{
flex:1;
background:#fff;
border:1px solid #ddd;
border-radius:8px;
padding:8px;
font-size:13px;
}

.time-box.active{
border-color:#0b3d91;
background:#e3f2fd;
}


.time-value{
font-size:14px;
font-weight:bold;
}


/* =========================
   オプション
========================= */

.option-box{
max-width:500px;
margin:10px auto;
background:#fff;
padding:12px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
font-size:14px;
}


/* =========================
   料金
========================= */

.price-box{
background:#fff;
border:2px solid #0b3d91;
border-radius:8px;
padding:12px;
text-align:center;
margin:10px auto;
max-width:500px;
}

.price-box span{
font-size:20px;
font-weight:bold;
color:#0b3d91;
}


/* =========================
   LINE予約ボタン
========================= */

.reserve-btn{
width:100%;
max-width:500px;
margin:15px auto;
display:block;
background:#06c755;
color:#fff;
font-size:18px;
padding:14px;
border:none;
border-radius:10px;
cursor:pointer;
}

.reserve-btn:hover{
background:#05b44e;
}

.reserve-bar{
position:absolute;
height:28px;
background:#999;
top:40px;
border-radius:4px;
opacity:0.7;
}

.reserve-slot{
background:#bbb;
cursor: not-allowed;
}



.confirm-btn{
width:100%;
max-width:500px;
margin:10px auto;
display:block;
background:#0b3d91;
color:white;
font-size:16px;
padding:12px;
border:none;
border-radius:10px;
cursor:pointer;
}

.confirm-box{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:white;
padding:20px;
z-index:9999;
width:90%;
max-width:400px;
}

.cancel-rule{

font-size:13px;
color:#666;

}



/* =========================
   スマホ
========================= */

/* スマホでも1マス24pxのまま */
@media(max-width:600px){

  body{
    padding:10px;
  }

  #dateBar{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
  }

  .date-item{
    width:576px !important;
    min-width:576px !important;
    flex:0 0 576px !important;
    font-size:12px;
  }

  #timeScale{
    display:flex !important;
    flex-wrap:nowrap !important;
    height:22px !important;
  }

  .time-slot{
    width:24px !important;
    min-width:24px !important;
    max-width:24px !important;
    flex:0 0 24px !important;
    height:22px !important;
  }

  #hourLabels{
    height:20px !important;
    margin-top:2px;
  }

  .time-label{
    font-size:10px;
    top:8px;
  }
}

/* ===== 時間ラベル表示 fix ===== */

.timeline-grid-wrap{
  position: relative;
  width: max-content;
  padding-bottom: 28px;
  min-width: max-content;
}

#timeScale{
  display: flex !important;
  width: max-content !important;
  position: relative;
  height: 24px;
  flex-wrap: nowrap;
}

#hourLabels{
  position: absolute !important;
  top: 24px !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 28px !important;
  margin-top: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}


.hour-tick{
  position: absolute !important;
  top: 0 !important;
  width: 1px !important;
  height: 8px !important;
  background: #666 !important;
}

.time-label{
  position: absolute !important;
  top: 10px !important;
  transform: translateX(-50%) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #555 !important;
  white-space: nowrap !important;
  display: block !important;
  width: auto !important;
  z-index: 2 !important;
}

.user-box{
  max-width:500px;
  margin:10px auto;
  background:#fff;
  padding:12px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.user-box input{
  padding:10px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:14px;
}