/** 例示用のスタイル */
/** 年表 */
.timeline {
    margin: 30px 0;
    padding: 40px 0;
    position: relative;
}
/** 年表の縦線 */
.timeline::before {
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    content: "";
    width: 0;
    height: 100%;
    border: 3px solid hsl(133, 55%, 45%);
    border-radius: 3px;
    z-index: 0;
    transform-origin: top;
    animation: extend 4s;
}
@keyframes extend {
    from { transform: scaleY(0) }
    to { transform: scaleY(1) }
}
/** 年表ボックス */
.timeline .box {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}
.timeline .box.left {
    text-align: right;
    margin-right: calc(50% + 36px);
}
.timeline .box.right {
    text-align: left;
    margin-left: calc(50% + 36px);
}
/** ヘッダー(日付)部分 */
.timeline .box .head {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
    padding: 4px 15px;
    letter-spacing: 2px;
    color: white;
    background: hsl(133, 55%, 45%);
}
/** 年表の横線 */
.timeline .box.right .head::before,
.timeline .box.left .head::before {
    display: block;
    position: absolute;
    content: "";
    width: 40px;
    height: 0;
    top: 0; bottom: 0; right: 100%;
    margin: auto;
    border: 1px solid hsl(133, 55%, 45%);
}
.timeline .box.left .head::before {
    left: 100%; right: initial;
}
/** 年表の点 */
.timeline .box.right .head::after,
.timeline .box.left .head::after {
    display: block;
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    top: 0; bottom: 0; right: calc(100% + 30px);
    margin: auto;
    border: 4px solid hsl(133, 55%, 45%);
    border-radius: 16px;
    background: white;
}
.timeline .box.left .head::after {
    left: calc(100% + 30px); right: initial;
}