:root{
  /* テーマ */
  --bg:#2A2F41;
  --text:#E7E2C1;
  --line:rgba(231,226,193,.35);
  --underline:#AD6299;

  --pill-main:#AD6299;
  --pill-sub:#3A5687;

  /* 予定ブロック色 */
  --busy-main:rgba(173,98,153,.55);
  --busy-sub: rgba(41,58,88,.85);

  /* 行定義（12:00〜19:00、15分刻み=30行相当） */
  --row-h:5rem;
  --rows:60;
  --grid-start-hour:9;
  --grid-start-min:0;

  /* レイアウト（スマホ） */
  --time-col:4rem;
  --grid-gap:1rem;        
  --page-pad:0rem;
}

*{ box-sizing:border-box }

html,body{
  margin-top:6.25rem;
  background:var(--bg);
  color:var(--text);
  font-family:"IPAex明朝",serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* コンテナ */
.tt-container{
  width:100vw;
  margin:0 auto;
  padding:1.125rem var(--page-pad) 1.75rem;
  text-align:center;
}

/* タイトル＋下線 */
.tt-title{
  font-size:2rem;
  font-weight:700;
  letter-spacing:.08em;
  margin:0 0 0.375rem;
  position:relative;
  display:inline-block;
}
.tt-title-underline{
  position:absolute; left:0; right:0; bottom:-8px;
  height:0.125rem;
  background: repeating-linear-gradient(
    to right,
    var(--underline), var(--underline) 0.25rem,
    transparent 0.25rem, transparent 0.5rem
  );
  opacity:.95; border-radius:0.0625rem;
}

/* 日付 */
.tt-date{
  font-size:2rem;
  margin:0.5rem 0 0.75rem;
  opacity:.95;
}

/* 見出しタブ（アクティブだけ中央表示） */
.tt-head{
  width: calc(100vw - 2 * var(--page-pad));
  margin: 0.375rem auto 0.5rem;
  padding: 0 calc(var(--time-col) + var(--grid-gap));
  /* 既定はgridだが、下のセクションでflexに上書きする */
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  font-size: 2rem;
}
.tt-tab{
  display:inline-block;
  padding:0.5rem 0.75rem;
  border-radius:62.4375rem;
  font-size:1.5rem;
  color:var(--text);
  border:0.0625rem solid var(--line);
  box-shadow:0 0.125rem 0.375rem rgba(0,0,0,.25);
  white-space:nowrap;
  justify-self:center;
}
.tt-tab--main{ background:var(--pill-main); }
.tt-tab--sub { background:var(--pill-sub);  }

/* 本文レイアウト：左=時刻 / 右=表 */
.tt-body{
  width: calc(100vw - 2 * var(--page-pad));
  margin: 0 auto;
  display:grid;
  grid-template-columns: var(--time-col) var(--grid-gap) 1fr calc(var(--time-col) + var(--grid-gap));
  column-gap:0;
  align-items:start;
}

/* 左：時刻 */
.tt-times{
  grid-column:1;
  list-style:none; margin:0; padding:0 0.375rem 0 0;
  text-align:right;
  font-size:1rem;
  display:grid;
  grid-template-rows: repeat(var(--rows), var(--row-h));
}
.tt-times li{
  height: var(--row-h);
  line-height: var(--row-h);
}

/* 全体の表（メイン＋Memorial） */
.tt-whole{
  grid-column:3;
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;  /* 2面（片側表示時は後述で1面に） */
  column-gap:0;
  position:relative;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:visible;
}

/* 中央ガイド線（今回は最終で消す） */
.tt-whole::before{
  content:"";
  position:absolute; top:0; bottom:0;
  width:0.0625rem;
  background: rgba(255,255,255,.06);
  left: calc(50vw - var(--page-pad) - var(--time-col) - var(--grid-gap));
}

/* 各表（1列固定グリッド） */
.tt-table{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--rows), var(--row-h));
  position:relative;
  overflow:visible;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--row-h) - 0.0625rem),
      var(--line) calc(var(--row-h) - 0.0625rem) var(--row-h)
    );
}
.tt-table > li{ display: contents; }

/* 予定ブロック（時刻とタイトルは縦積み表示に上書き） */
.tt-event{
  display:block;
  grid-column: 1 / 2;
  grid-row-start: calc(
    ( (var(--s-hour) - var(--grid-start-hour)) * 60 + (var(--s-min) - var(--grid-start-min)) ) / 30 + 1
  );
  grid-row-end: calc(
    ( (var(--e-hour) - var(--grid-start-hour)) * 60 + (var(--e-min) - var(--grid-start-min)) ) / 30 + 2
  );
  margin:0.125rem;
  border-radius:0.375rem;
  box-shadow: inset 0 0 0 0.625rem var(--line);
  position:relative;
  overflow:hidden;
  transform-origin:center;
  text-decoration:none;
  color:var(--text);
  opacity:1;
  transition: opacity .15s ease, transform .15s ease;
}
.tt-event--main{ background: var(--busy-main); }
.tt-event--sub { background: var(--busy-sub);  }

/* ラベル：重なり防止（縦方向に改行） */
.tt-event { padding: .5rem .625rem; }
.tt-event-time, .tt-event-title {
  position: static !important;
  display: block;
  text-align: left;
}
.tt-event-title { margin-top: .25rem; }

/* 小さめ端末微調整 */
@media (max-width:22.5rem){
  .tt-title{ font-size:1.5rem; }
  .tt-date{ font-size:1rem; }
  .tt-times{ font-size:0.9375rem; }
}

/* ===== ステージ出し分け ===== */
.tt-tab{ cursor:pointer; }
.tt-tab.is-active{ outline: 2px solid var(--text); outline-offset: 2px; }
.tt-tab:focus{ outline: 2px solid var(--underline); outline-offset: 2px; }

.tt-whole.view-main{ grid-template-columns: 1fr; }
.tt-whole.view-main .tt-table--sub{ display:none; }

.tt-whole.view-sub{ grid-template-columns: 1fr; }
.tt-whole.view-sub .tt-table--main{ display:none; }

/* アクティブなタブだけ中央表示（bodyに状態クラス） */
.tt-head{
  display:flex !important;
  justify-content:center;
  gap:.5rem;
}
.tt-head .tt-tab{ display:none; }
body.stage-main .tt-head .tt-tab--main{ display:inline-flex; }
body.stage-sub  .tt-head .tt-tab--sub { display:inline-flex; }

.tt-whole::before{ content: none !important; }

.tt-event{ display:none; }                   
body.day-1 .tt-event[data-day="1"]{ display:block; }
body.day-2 .tt-event[data-day="2"]{ display:block; }

#stageDateBtn,
#stageToggleBtn {
  white-space: nowrap !important;   
  word-break: normal !important;    
  overflow-wrap: normal !important; 
  display: inline-flex !important; 
  align-items: center;
  width: auto !important;           
  max-width: none !important;      
}

#stageDateBtn + #stageToggleBtn {
  margin-left: .5rem;               
}

@media (max-width: 360px) {
  .tt-container {
    overflow-x: auto;
  }
}

/* ▼ 日付ごとにグリッド開始時刻を上書き */
body.day-1 { --grid-start-hour: 12; } 
body.day-2 { --grid-start-hour: 9;  }


@media (max-width: 520px) {
  .tt-container:has(#stageDateBtn + #stageToggleBtn) {
    white-space: nowrap;
  }
  
  #stageDateBtn,
  #stageToggleBtn {
    flex: 0 0 auto;
  }
}


@media (max-width: 520px) {
  #stageDateBtn,
  #stageToggleBtn {
    font-size: 1rem !important;
    padding: .36rem .52rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.005em !important;
  }
  #stageDateBtn + #stageToggleBtn {
    margin-left: .375rem !important;
  }
}


@media (max-width: 360px) {
  #stageDateBtn,
  #stageToggleBtn {
    font-size: 1rem !important;
    padding: .32rem .46rem !important;
    letter-spacing: -0.01em !important;
  }
  #stageDateBtn + #stageToggleBtn {
    margin-left: .3125rem !important;
  }
}


@media (max-width: 320px) {
  #stageDateBtn,
  #stageToggleBtn {
    font-size: 1rem !important;
    padding: .30rem .42rem !important;
  }
  #stageDateBtn + #stageToggleBtn {
    margin-left: .28rem !important;
  }
}