/* ====== 左カラム用：超シンプル・1列タイムライン（共通方針） ======
     ・全件左寄せ（左右交互なし）
     ・時間列は固定幅、カード側が伸縮
     ・スコープはIDごとに分離（#schedule / #schedule2 / #schedule3）
     ・スマホはさらにコンパクトに
  =============================================================== */

  /* ---- 共通で使うフォントなど（各ID内に適用） ---- */
  :root {
    --font-jp: "Hiragino Sans", "Noto Sans JP", "Yu Gothic",
               system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }

.senpai-layout {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.8); /* 白色 + 80%不透明 */
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.senpai-photo {
  text-align: center;
  margin-bottom: 1rem;
}

.senpai-photo img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.senpai-comments .comment-box {
  margin-bottom: 1.5rem;
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}


@media screen and (min-width: 768px) {
  .senpai-layout {
    flex-direction: row;
    gap: 2rem;
  }
  .senpai-photo {
    flex: 0 0 160px;
  }
  .senpai-comments {
    flex: 1;
  }
}


  /* ========== 1人目 #schedule ========== */
  #schedule {
    width: 100%;
    max-width: 420px;          /* 左カラム実寸に合わせて調整（例：360–420px） */
    box-sizing: border-box;
    margin: 0;
    font-family: var(--font-jp);
    color: #333;
  }
  #schedule * { box-sizing: inherit; }
  #schedule ol, #schedule ul { margin: 0; padding: 0; list-style: none; }
  #schedule h2, #schedule h3, #schedule p { margin: 0; }
  #schedule img { max-width: 100%; height: auto; }

  #schedule .title {
    display: flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 700; margin: 0 0 10px;
  }
  #schedule .badge {
    width: 18px; height: 18px; border-radius: 6px;
    background: conic-gradient(from 120deg, #ff7ab6, #6bdcff, #7affb0, #ff7ab6);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }

  #schedule .timeline { position: relative; padding-left: 16px; }
  #schedule .timeline::before {
    content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(#ffe49a, #ffd36b); border-radius: 999px; opacity: .8;
  }

  #schedule .item {
    position: relative; display: grid; grid-template-columns: 60px 1fr;
    gap: 10px; margin: 8px 0; align-items: start;
  }
  #schedule .item::before {
    content: ""; position: absolute; left: 0px; top: 8px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #ff7ab6; box-shadow: 0 2px 6px rgba(255,122,182,.35);
    outline: 2px solid #fff;
  }

  #schedule .time {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 700; font-size: .9rem; color: #1f1f1f; background: #fff;
    border-radius: 999px; padding: 6px 10px; min-height: 30px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
  }
  #schedule .emoji { font-size: 15px; }

  #schedule .card {
    background: #fff; border-radius: 10px; border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 4px 14px rgba(0,0,0,.06); padding: 10px 12px;
  }
  #schedule .card h3 { font-size: .96rem; margin: 0 0 4px; }
  #schedule .card p  { font-size: .9rem; color: #777; line-height: 1.6; }

  #schedule .tag {
    display: inline-block; font-size: .72rem; font-weight: 700; color: #fff;
    padding: 3px 8px; border-radius: 999px; margin-bottom: 6px;
    background: linear-gradient(135deg, #ff9bc7, #ff7ab6);
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
  }
  #schedule .tag.work { background: linear-gradient(135deg, #6bdcff, #2ec8ff); }
  #schedule .tag.meet { background: linear-gradient(135deg, #f9cf6b, #f6a545); }
  #schedule .tag.food { background: linear-gradient(135deg, #ff9bc7, #ff7ab6); }
  #schedule .tag.move { background: linear-gradient(135deg, #b19cff, #8a73ff); }
  #schedule .tag.shop { background: linear-gradient(135deg, #77e0ff, #3cc9ff); }
  #schedule .tag.health { background: linear-gradient(135deg, #7affb0, #27e28a); }
  #schedule .tag.end  { background: linear-gradient(135deg, #c1c1c1, #9e9e9e); }

  /* ========== 2人目 #schedule2 ========== */
  #schedule2 {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box; margin: 0; font-family: var(--font-jp); color: #333;
  }
  #schedule2 * { box-sizing: inherit; }
  #schedule2 ol, #schedule2 ul { margin: 0; padding: 0; list-style: none; }
  #schedule2 h2, #schedule2 h3, #schedule2 p { margin: 0; }
  #schedule2 img { max-width: 100%; height: auto; }

  #schedule2 .title { display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; margin:0 0 10px; }
  #schedule2 .badge { width:18px; height:18px; border-radius:6px; background: conic-gradient(from 120deg, #ff7ab6, #6bdcff, #7affb0, #ff7ab6); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

  #schedule2 .timeline { position:relative; padding-left:16px; }
  #schedule2 .timeline::before { content:""; position:absolute; left:6px; top:0; bottom:0; width:3px; background: linear-gradient(#ffe49a, #ffd36b); border-radius:999px; opacity:.8; }

  #schedule2 .item { position:relative; display:grid; grid-template-columns:60px 1fr; gap:10px; margin:8px 0; align-items:start; }
  #schedule2 .item::before { content:""; position:absolute; left:0px; top:8px; width:10px; height:10px; border-radius:50%; background:#ff7ab6; box-shadow:0 2px 6px rgba(255,122,182,.35); outline:2px solid #fff; }

  #schedule2 .time { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:.9rem; color:#1f1f1f; background:#fff; border-radius:999px; padding:6px 10px; min-height:30px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.06); }
  #schedule2 .emoji { font-size:15px; }

  #schedule2 .card { background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,.06); box-shadow:0 4px 14px rgba(0,0,0,.06); padding:10px 12px; }
  #schedule2 .card h3 { font-size:.96rem; margin:0 0 4px; }
  #schedule2 .card p  { font-size:.9rem; color:#777; line-height:1.6; }

  #schedule2 .tag { display:inline-block; font-size:.72rem; font-weight:700; color:#fff; padding:3px 8px; border-radius:999px; margin-bottom:6px; background: linear-gradient(135deg, #ff9bc7, #ff7ab6); box-shadow:0 3px 10px rgba(0,0,0,.06); }
  #schedule2 .tag.work { background: linear-gradient(135deg, #6bdcff, #2ec8ff); }
  #schedule2 .tag.meet { background: linear-gradient(135deg, #f9cf6b, #f6a545); }
  #schedule2 .tag.food { background: linear-gradient(135deg, #ff9bc7, #ff7ab6); }
  #schedule2 .tag.move { background: linear-gradient(135deg, #b19cff, #8a73ff); }
  #schedule2 .tag.shop { background: linear-gradient(135deg, #77e0ff, #3cc9ff); }
  #schedule2 .tag.health { background: linear-gradient(135deg, #7affb0, #27e28a); }
  #schedule2 .tag.end  { background: linear-gradient(135deg, #c1c1c1, #9e9e9e); }

  /* ========== 3人目 #schedule3 ========== */
  #schedule3 {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box; margin: 0; font-family: var(--font-jp); color: #333;
  }
  #schedule3 * { box-sizing: inherit; }
  #schedule3 ol, #schedule3 ul { margin: 0; padding: 0; list-style: none; }
  #schedule3 h2, #schedule3 h3, #schedule3 p { margin: 0; }
  #schedule3 img { max-width: 100%; height: auto; }

  #schedule3 .title { display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; margin:0 0 10px; }
  #schedule3 .badge { width:18px; height:18px; border-radius:6px; background: conic-gradient(from 120deg, #ff7ab6, #6bdcff, #7affb0, #ff7ab6); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

  #schedule3 .timeline { position:relative; padding-left:16px; }
  #schedule3 .timeline::before { content:""; position:absolute; left:6px; top:0; bottom:0; width:3px; background: linear-gradient(#ffe49a, #ffd36b); border-radius:999px; opacity:.8; }

  #schedule3 .item { position:relative; display:grid; grid-template-columns:60px 1fr; gap:10px; margin:8px 0; align-items:start; }
  #schedule3 .item::before { content:""; position:absolute; left:0px; top:8px; width:10px; height:10px; border-radius:50%; background:#ff7ab6; box-shadow:0 2px 6px rgba(255,122,182,.35); outline:2px solid #fff; }

  #schedule3 .time { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; font-size:.9rem; color:#1f1f1f; background:#fff; border-radius:999px; padding:6px 10px; min-height:30px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.06); }
  #schedule3 .emoji { font-size:15px; }

  #schedule3 .card { background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,.06); box-shadow:0 4px 14px rgba(0,0,0,.06); padding:10px 12px; }
  #schedule3 .card h3 { font-size:.96rem; margin:0 0 4px; }
  #schedule3 .card p  { font-size:.9rem; color:#777; line-height:1.6; }

  #schedule3 .tag { display:inline-block; font-size:.72rem; font-weight:700; color:#fff; padding:3px 8px; border-radius:999px; margin-bottom:6px; background: linear-gradient(135deg, #ff9bc7, #ff7ab6); box-shadow:0 3px 10px rgba(0,0,0,.06); }
  #schedule3 .tag.work { background: linear-gradient(135deg, #6bdcff, #2ec8ff); }
  #schedule3 .tag.meet { background: linear-gradient(135deg, #f9cf6b, #f6a545); }
  #schedule3 .tag.food { background: linear-gradient(135deg, #ff9bc7, #ff7ab6); }
  #schedule3 .tag.health { background: linear-gradient(135deg, #7affb0, #27e28a); }
  #schedule3 .tag.end  { background: linear-gradient(135deg, #c1c1c1, #9e9e9e); }

  /* ===== スマホをさらにコンパクトに（3つ共通） ===== */
  @media (max-width: 600px) {
    #schedule, #schedule2, #schedule3 { max-width: 100%; }

    #schedule .item, #schedule2 .item, #schedule3 .item {
      grid-template-columns: 54px 1fr; /* 時間側をさらに詰める */
      gap: 8px;
      margin: 6px 0;
    }

    #schedule .time, #schedule2 .time, #schedule3 .time {
      padding: 5px 8px;
      min-height: 26px;
      font-size: .86rem;
      gap: 4px;
      box-shadow: 0 3px 10px rgba(0,0,0,.06);
    }
    #schedule .emoji, #schedule2 .emoji, #schedule3 .emoji { font-size: 14px; }

    #schedule .card, #schedule2 .card, #schedule3 .card {
      padding: 8px 10px;
      border-radius: 8px;
      box-shadow: 0 3px 10px rgba(0,0,0,.06);
    }
    #schedule .card h3, #schedule2 .card h3, #schedule3 .card h3 {
      font-size: .92rem;
      margin-bottom: 3px;
    }
    #schedule .card p, #schedule2 .card p, #schedule3 .card p {
      font-size: .86rem;
      line-height: 1.5;
    }

    #schedule .tag, #schedule2 .tag, #schedule3 .tag {
      font-size: .68rem;
      padding: 2px 6px;
      margin-bottom: 4px;
    }

    #schedule .item::before, #schedule2 .item::before, #schedule3 .item::before {
      width: 8px; height: 8px; top: 7px; left: 0px; outline-width: 2px;
    }

    #schedule .timeline::before, #schedule2 .timeline::before, #schedule3 .timeline::before {
      opacity: .65;
    }
  }

  /* ===== 任意：スマホでタグを非表示（さらにプレーンにしたい場合） ===== */
  /* @media (max-width: 600px) {
    #schedule .tag, #schedule2 .tag, #schedule3 .tag { display: none; }
  } */