/* =========================
  day-1niti.css
  「一日の流れ」ページ専用
========================= */

.text-align-center{ text-align:center; }
.text-align-right{ text-align:right; }

/* 見出し（緑帯） */
.explanation{
  background: var(--accent);
  color:#fff;
  padding: 10px;
  text-align: center;
  font-weight: 900;
  border-radius: var(--radius);
  margin: 0 0 12px;
}

/* リード文 */
.lead{
  margin: 0;
  line-height: 1.9;
}

/* セクション小見出し */
.subhead{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(0,153,153,.12);
  border: 1px solid rgba(0,153,153,.35);
  text-align: center;
}

/* ===== タイムライン ===== */
.timeline{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.timeline-item{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: stretch;

  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  overflow: hidden;
}

/* 時間バッジ */
.time{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: .02em;
  padding: 10px 8px;
  border-right: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

/* 本文 */
.event{
  padding: 10px 12px;
}

.title{
  font-weight: 900;
  font-size: 16px;
  margin: 0 0 6px;
}

.desc{
  margin: 0;
  line-height: 1.8;
}

.note-line{
  margin-top: 8px;
  font-size: 13px;
  color: #333;
  background: #ffffcc;
  border: 1px solid #cfc37a;
  padding: 8px 10px;
  border-radius: 8px;
}

/* ピル（強調ラベル） */
.pill-row{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.04);
}

/* 時間帯ごとの色（ほどよく） */
.timeline-item.is-morning .time{ background: rgba(255, 210, 120, .35); }
.timeline-item.is-noon    .time{ background: rgba(180, 255, 180, .30); }
.timeline-item.is-afternoon .time{ background: rgba(160, 210, 255, .30); }
.timeline-item.is-evening .time{ background: rgba(220, 190, 255, .28); }

/* フッタ注釈 */
.schedule-footnote{
  margin-top: 12px;
  font-size: 13px;
  color: #333;
  background: rgba(0,0,0,.03);
  border: 1px dashed rgba(0,0,0,.20);
  padding: 10px 12px;
  border-radius: var(--radius);
}

/* ===== モバイル ===== */
@media (max-width: 680px){
  .timeline-item{
    grid-template-columns: 1fr;
  }
  .time{
    justify-content: flex-start;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
}