/* ---------- リセット ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:"Helvetica Neue",Arial,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  line-height:1.6;
  background:#fafafa;
  color:#222;
}

/* ---------- 汎用 ---------- */
.banner-img{display:block;width:100%;height:auto;}

/* ---------- アコーディオン（チャンネル一覧） ---------- */
.accordion{width:90%;max-width:1100px;margin:2rem auto;}
.accordion button{
  width:100%;background:#0066cc;color:#fff;font-size:1.1rem;font-weight:700;
  padding:1rem;border:none;border-radius:8px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
}
.accordion button span.icon{transition:transform .3s;}
.accordion button.open span.icon{transform:rotate(180deg);}
.accordion-content{
  overflow:hidden;max-height:0;transition:max-height .35s ease;
  background:#fff;border-radius:0 0 8px 8px;box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.table-wrapper{overflow-x:auto;}
.channel-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.channel-table th,.channel-table td{border-bottom:1px solid #ddd;padding:.55rem .75rem;text-align:left;}
.channel-table th{background:#f0f8ff;font-weight:600;}
.channel-table tr:last-child td{border-bottom:none;}

/* ---------- 見出し ---------- */
.section-title{
  font-size:clamp(1.4rem,4vw,2.2rem);text-align:center;
  margin:2rem 0 1.5rem;font-weight:700;
}

/* ---------- グリッド ---------- */
.program-grid{
  width:90%;max-width:1100px;margin:0 auto 4rem;
  display:grid;gap:1.8rem;grid-template-columns:1fr;
}
@media(min-width:768px){.program-grid{grid-template-columns:1fr 1fr;}}

/* ---------- カード ---------- */
.program-card{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .2s,box-shadow .2s;
}
.program-card:hover{transform:translateY(-4px);box-shadow:0 6px 14px rgba(0,0,0,.12);}
.program-card figure{aspect-ratio:16/9;overflow:hidden;background:#000;}
.program-card img{width:100%;height:100%;object-fit:contain;object-position:center center;}
.program-info{padding:1.2rem 1rem 1.6rem;}
.channel{font-size:.85rem;font-weight:600;color:#0066cc;margin-bottom:.4rem;}
.channel span{background:#0066cc;color:#fff;border-radius:3px;padding:0 .35em;margin-right:.4em;}
.program-title{font-size:1.1rem;font-weight:700;margin:.2rem 0 .6rem;}
.program-desc{font-size:.9rem;line-height:1.5;}

.schedule{
  font-size:.85rem;
  font-weight:600;
  margin-bottom:.55rem;
}
@media (prefers-color-scheme:dark){
  .schedule{color:#ff6655;}
}

/* ---------- 画像クレジット ---------- */
.credit{
  font-size:.7rem;color:#666;text-align:right;padding:.25rem .6rem 0;
}

/* ---------- チャンネルパック一覧ボタン ---------- */
.pack-btn{
  display:block;width:90%;max-width:460px;margin:1.8rem auto;
  padding:1rem 1.2rem;background:#db5c6d;color:#fff;
  font-size:clamp(1rem,3.5vw,1.25rem);font-weight:700;text-align:center;
  text-decoration:none;border-radius:50px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:transform .2s,box-shadow .2s,background .2s;
}
.pack-btn:hover{
  background:#ff7e26;transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.pack-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,.2);}

/* ---------- ダークモード ---------- */
@media(prefers-color-scheme:dark){
  body{background:#121212;color:#e0e0e0;}
  .accordion button{background:#4da3ff;color:#000;}
  .accordion-content{background:#1d1d1d;}
  .channel-table th{background:#24374a;color:#e0e0e0;}
  .channel-table td{border-color:#333;}
  .program-card{background:#1d1d1d;box-shadow:0 2px 8px rgba(0,0,0,.5);}
  .channel{color:#4da3ff;}
  .channel span{background:#4da3ff;}
  .credit{color:#aaa;}
  .pack-btn{background:#ff7e26;color:#000;}
  .pack-btn:hover{background:#ffa04f;}
}