:root{
  --main:#00b4f0;
  --dark:#008ecf;
  --light:#e6f8ff;
  --line:#bfeaff;
}

body{
  margin:0;
  font-family:'Noto Sans JP',sans-serif;
  background:#fff;
  line-height:1.8;
}

.hero img{
  width:100%;
  display:block;
}

.section{
  max-width:900px;
  margin:100px auto;
  padding:0 20px;
}

h1{
  text-align:center;
  color:var(--dark);
  margin:40px 0;
}

h2{
  color:var(--dark);
  margin-bottom:40px;
  border-left:6px solid var(--main);
  padding-left:12px;
}

.story{
  border-left:4px solid var(--main);
  padding-left:20px;
}

.participation img{
  width:100%;
  border:4px solid var(--light);
}

.venue-box{
  background:var(--light);
  padding:20px;
  border:2px solid var(--main);
}

.map-wrap iframe{
  width:100%;
  height:300px;
  border:0;
  margin:20px 0;
}

.access-btn{
  display:inline-block;
  padding:10px 20px;
  background:var(--main);
  color:#fff;
  text-decoration:none;
}

.access-btn:hover{
  background:var(--dark);
}

/* ===== チケット料金 ===== */

.price-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:20px;
  font-size:0.95rem;
}

.price-table th,
.price-table td{
  border:1px solid #bfeaff;
  padding:14px;
  text-align:center;
}

.price-table thead th{
  background:#00b4f0;
  color:#fff;
  font-weight:600;
}

.price-table tbody tr:nth-child(even){
  background:#f2faff;
}

.price-table tbody tr:hover{
  background:#e6f8ff;
}

.price-note{
  font-size:0.85rem;
  color:#666;
  line-height:1.7;
}

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

#calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin-top:20px;
}

.weekday{
  text-align:center;
  font-weight:600;
  color:#008ecf;
  padding:10px 0;
}

/* 上段の曜日のみ色変更 */
.weekday.sun{
  color:#e74c3c;
}

.weekday.sat{
  color:#2980ff;
}

.day{
  border:1px solid #bfeaff;
  min-height:70px;
  background:#fff;
  position:relative;

  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:8px;

  font-size:0.95rem;
  color:#bbb;
}

.day.active{
  background:#00b4f0;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  border:2px solid #008ecf;
}

.day.active:hover{
  filter:brightness(0.95);
}

.empty{
  border:none;
  background:transparent;
}

/* ===== ステータスマーク ===== */

.status-mark{
  position:absolute;
  bottom:6px;
  right:6px;
  font-size:14px;
  font-weight:bold;
}

.status-mark.many{
  color:#2ecc71;
}

.status-mark.few{
  color:#f39c12;
}

.status-mark.full{
  color:#e74c3c;
}

.status-mark.notyet{
  color:#777;
  font-size:11px;
}

.day.active .status-mark{
  text-shadow:0 0 4px rgba(0,0,0,0.4);
}

/* ===== アコーディオン ===== */

.acc-btn{
  width:100%;
  padding:18px;
  margin-top:14px;
  background:#e6f8ff;
  border:none;
  text-align:left;
  cursor:pointer;
  transition:0.3s;
  font-weight:600;
}

.acc-btn.active{
  background:#00b4f0;
  color:#fff;
}

.acc-content{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 20px;
  background:#f4fbff;
  transition:all 0.4s ease;
  line-height:1.9;
  font-size:0.95rem;
}

/* ===== モーダル ===== */

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  justify-content:center;
  align-items:center;
}

.modal-content{
  background:#fff;
  width:90%;
  max-width:500px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  border-radius:6px;
  overflow:hidden;
}

.modal-header{
  padding:15px;
  border-bottom:2px solid var(--light);
  display:flex;
  justify-content:space-between;
  font-weight:bold;
}

.modal-body{
  padding:20px;
  overflow-y:auto;
}

.time-slot{
  display:block;
  text-decoration:none;
  color:inherit;
  border:2px solid var(--main);
  background:var(--light);
  padding:12px;
  margin:10px 0;
  text-align:center;
  font-weight:bold;
  transition:0.2s;
}

.time-slot:hover{
  background:var(--main);
  color:#fff;
}

/* ===== スマホ最適化 ===== */

@media (max-width:600px){

  .section{
    margin:60px auto;
    padding:0 14px;
  }

  #calendar{
    gap:4px;
  }

  .day{
    min-height:60px;
    font-size:0.9rem;
    padding:6px;
  }

  .status-mark{
    font-size:12px;
    bottom:4px;
    right:4px;
  }

  .modal-content{
    width:95%;
    max-height:85vh;
  }

  .time-slot{
    padding:14px;
    font-size:0.95rem;
  }
}

/* ===== 公演枠 ===== */

.slot-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-top:20px;
}

.slot-card{
  border:2px solid var(--main);
  background:var(--light);
  padding:20px;
  text-align:center;
  font-weight:bold;
  text-decoration:none;
  color:#333;
  transition:0.2s;
  border-radius:8px;
}

.slot-card:hover{
  background:var(--main);
  color:#fff;
}

.slot-time{
  font-size:1.1rem;
  margin-bottom:8px;
}

.slot-status{
  font-size:0.9rem;
}

.slot-status.many{ color:#2ecc71; }
.slot-status.few{ color:#f39c12; }
.slot-status.full{ color:#e74c3c; }

.update-time{
  font-size:0.85rem;
  color:#666;
}

/* スマホ */
@media (max-width:768px){
  .slot-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 20px;
}

.slot-card {
  border: 2px solid #000;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border-radius: 6px;
}

.slot-status.many { color: green; }
.slot-status.few { color: orange; }
.slot-status.full { color: red; }

@media (max-width: 768px) {
  .slot-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}