/* iinbukken Document */
/* ----------------------------------------- */
/* 実績                                */
/* ----------------------------------------- */
.lead {
    margin:0 auto;
    text-align: center;
}
.lead p {
    text-align: left;
    display: inline-block;
    padding:8px 0;
}
.lead p strong {
    display: inline-block;
    padding-bottom:.4em;
}

#chronology {
    margin-top:2em;
}

/** 年表 */
.timeline {
    margin: 30px 0 0 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(210, 30%, 30%);
    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% + 40px);
}
.timeline .box.right {
    text-align: left;
    margin-left: calc(50% + 40px);
}
/** ヘッダー(日付)部分 */
.timeline .box .head {
    position: relative;
    display: inline-block;
    margin-bottom: 3px;
    padding: 2px 13px;
    letter-spacing: 0;
    /*color: white;
    background: hsl(210, 30%, 30%);*/
}
/** 年表の横線 */
.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(210, 30%, 30%);
}
.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(210, 30%, 30%);
    border-radius: 16px;
    background: hsl(210, 30%, 30%);
}
.timeline .box.left .head::after {
    left: calc(100% + 30px); right: initial;
}

.timeline .ptn1,
.timeline .ptn2 {
    font-weight:bold;
    letter-spacing: 2px !important;
}
.timeline .ptn1 {
    font-size:2.6em;
    color:#68a3c2;
    text-shadow: 1px 1px 1px rgba(36, 54, 63, .4);
}
.timeline .ptn2 {
    font-size:1.8em;
    color:#000;
}

/** 年表続き */
.timeline2 {
    margin: -2px 0 0 0;
    padding: 50px 0 0 0;
    position: relative;
}
/** 年表続きの縦線 */
.timeline2::before {
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    content: "";
    width: 0;
    height: 80%;
    border-left: 6px dotted hsl(210, 30%, 30%);
    z-index: 0;
    transform-origin: bottom;
    animation: extend2 6s;
}
@keyframes extend2 {
    from { transform: scaleY(0) }
    to { transform: scaleY(1) }
}


.to-be-continued {
    position: relative;
    z-index: 1;
    margin:0 auto;
    text-align: center;
}
.to-be-continued p {
    display: inline-block;
    padding:5px 15px;
    text-algin:center;
    background: #001b3c;
    color:#fff;
}