/* =============================================
         一日の流れ — タイムライン リデザイン
         モバイルファースト
      ============================================= */

      /* コンテナ */
      .daily-timeline {
        position: relative;
        padding: 10px 16px 30px;
        margin: 0 0 30px;
      }

      /* 縦ライン（中央） */
      .daily-timeline::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 3px;
        transform: translateX(-50%);
        background: repeating-linear-gradient(
          to bottom,
          #f4a0cc 0px,
          #f4a0cc 8px,
          transparent 8px,
          transparent 16px
        );
        z-index: 0;
      }

      /* 各ステップ */
      .daily-step {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 8px;
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.55s ease, transform 0.55s ease;
      }

      .daily-step.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* ステップ番号バッジ */
      .step-badge {
        position: relative;
        z-index: 2;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff9dcb, #e55fa3);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 10px rgba(229, 95, 163, 0.45);
        margin-bottom: 10px;
        flex-shrink: 0;
      }

      /* カード本体 */
      .step-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 4px 18px rgba(240, 160, 200, 0.25);
        padding: 16px 16px 14px;
        width: 100%;
        max-width: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        border: 1.5px solid rgba(244, 160, 204, 0.3);
      }

      /* カード内の写真 */
      .step-photo {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 4px solid #fde0f0;
        box-shadow: 0 3px 12px rgba(229, 95, 163, 0.2);
      }

      .step-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
      }

      /* ラベル */
      .step-label {
        font-size: 0.92rem;
        font-weight: 700;
        color: #c0558a;
        text-align: center;
        line-height: 1.5;
        letter-spacing: 0.02em;
      }

      /* 絵文字アイコン */
      .step-emoji {
        font-size: 1.4rem;
        line-height: 1;
      }

      /* 矢印 */
      .daily-arrow {
        position: relative;
        z-index: 2;
        font-size: 1.4rem;
        color: #f4a0cc;
        line-height: 1;
        margin: 2px 0;
        animation: bounce 1.6s infinite ease-in-out;
      }

      @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50%       { transform: translateY(5px); }
      }

      /* 最後のステップ（預り保育）は特別スタイル */
      .daily-step.last .step-card {
        background: linear-gradient(135deg, #fff5fb, #ffe8f6);
        border-color: rgba(229, 95, 163, 0.4);
      }

      .daily-step.last .step-badge {
        background: linear-gradient(135deg, #a78bfa, #7c3aed);
        box-shadow: 0 3px 10px rgba(124, 58, 237, 0.4);
      }

      /* タイムライン ヘッダー装飾 */
      .daily-header {
        text-align: center;
        margin-bottom: 20px;
        font-size: 0.82rem;
        color: #b07090;
        letter-spacing: 0.06em;
      }

      .daily-header span {
        display: inline-block;
        background: #fde8f5;
        border-radius: 20px;
        padding: 4px 16px;
        border: 1px dashed #f4a0cc;
      }

      /* =============================================
         タブレット以上
      ============================================= */
      @media (min-width: 520px) {
        .daily-timeline {
          padding: 10px 30px 30px;
        }

        .daily-step {
          flex-direction: row;
          justify-content: center;
          gap: 20px;
        }

        /* 偶数ステップは反転 */
        .daily-step:nth-child(even) {
          flex-direction: row-reverse;
        }

        .step-badge {
          width: 40px;
          height: 40px;
          font-size: 0.85rem;
          margin-bottom: 0;
          flex-shrink: 0;
          align-self: center;
        }

        .step-card {
          flex-direction: row;
          align-items: center;
          gap: 16px;
          max-width: 420px;
          text-align: left;
        }

        .step-card .step-label {
          text-align: left;
        }

        .step-photo {
          width: 100px;
          height: 100px;
          flex-shrink: 0;
        }

        .step-info {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        /* 奇数は右寄せカード、偶数は左寄せ */
        .daily-step:nth-child(odd) .step-card {
          border-radius: 18px 18px 18px 4px;
        }

        .daily-step:nth-child(even) .step-card {
          border-radius: 18px 18px 4px 18px;
        }
      }

      @media (min-width: 760px) {
        .step-photo {
          width: 120px;
          height: 120px;
        }

        .step-card {
          max-width: 480px;
          padding: 18px 20px;
        }

        .step-label {
          font-size: 1rem;
        }
      }