予約変更履歴タイムライン

<ul class="d10-07-09-timeline">
          <li>
            <span class="d10-07-09-dot"></span>
            <div class="d10-07-09-body"><time>7/8 10:20</time><p>人数を2名→4名に変更</p></div>
          </li>
          <li>
            <span class="d10-07-09-dot"></span>
            <div class="d10-07-09-body"><time>7/6 18:05</time><p>時間を12:00→13:30に変更</p></div>
          </li>
          <li>
            <span class="d10-07-09-dot is-first"></span>
            <div class="d10-07-09-body"><time>7/3 09:40</time><p>予約を作成しました</p></div>
          </li>
        </ul>

.d10-07-09-timeline{list-style:none;margin:0;padding:0;width:100%;max-width:260px;}
        .d10-07-09-timeline li{position:relative;padding-left:20px;padding-bottom:16px;border-left:2px solid #e5e5e5;}
        .d10-07-09-timeline li:last-child{border-left-color:transparent;padding-bottom:0;}
        .d10-07-09-dot{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:#2f6fed;border:2px solid #fff;box-shadow:0 0 0 1px #2f6fed;}
        .d10-07-09-dot.is-first{background:#aaa;box-shadow:0 0 0 1px #aaa;}
        .d10-07-09-body time{font-size:10px;color:#999;display:block;}
        .d10-07-09-body p{font-size:12px;color:#333;margin:2px 0 0;}