@charset "UTF-8";

/*タイムライン全体の設定*/

.scroll-line {
    width: 100%;
}

.scroll-line li {
    /*線の起点とするためrelativeを設定*/
    position: relative;
    list-style: none;
    padding: 0 0 107px 0;
}

.scroll-line dl {
    margin: 0 0 0 66px;
}

.scroll-line dt {
    color: var(--text-primary);
    font-size: 2.4rem;
    margin: 0 0 27px 0;
}

.scroll-line dt .step {
    color: var(--text-tertialy);
    font-size: 1.6rem;
    margin-right: .5em;
}

.scroll-line dd {
    font-style: normal;
    line-height: 2.25;
}


/*絶対配置で線を設定*/

.border-line {
    /*線の位置*/
    position: absolute;
    left: 0.74em;
    top: 0;
    width: 1px;
    /*線の太さ*/
    height: 0;
    /*はじめは高さを0に*/
    background: #69BA00;
}


/*タイムラインの見出し横の丸の位置と形状*/

.scroll-line li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: #69BA00;
    border-radius: 50%;
}

@media screen and (max-width: 768px) {
    .scroll-line dt {
        font-size: 2rem;
    }
    .scroll-line dt .step {
        font-size: 1.4rem;
    }
    .scroll-line dd {
        line-height: 2;
    }
}