@charset "utf-8";

.history-wrap {padding: 0 100px}
.history-wrap ul {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    row-gap: 124px;
    position: relative;
}

.history-wrap li {}

.history-wrap dl {
    display: flex; align-items: center;
    column-gap: 76px;
}

.history-wrap dl dt {
    width: 164px;
    font-size: 40px; font-weight: 600;
    position: relative;
}
.history-wrap dl dt span {margin-left: 12px}
.history-wrap dl dd {
    font-size: 24px; flex: 1;
}
.history-wrap ul::before,
.history-wrap li:first-child dt::after,
.history-wrap li:last-child dt::after,
.history-wrap dl dt::before {
    content: ""; display: block;
    position: absolute;
}
.history-wrap ul::before {
    left: 0;
    width: 1px; height: 100%;
    transform: translateX(202px);
    background-color: #ccc;
}
.history-wrap dl dt::before { top: 50%;
    transform: translate(calc((76px + 16px) / 2), -50%);
    width: 16px; height: 16px;
    background: url("../images/sub/introduce/dots.svg") no-repeat center center;
    z-index: 1; right: 0;
}

.history-wrap li:first-child dt::after,
.history-wrap li:last-child dt::after {
    width: 16px; height: 100%;
    background-color: white;
    right: 0; z-index: 0;

}
.history-wrap li:first-child dt::after {
    top: 0;
    transform: translate(calc((76px + 16px) / 2), -20px);
}
.history-wrap li:last-child dt::after {
    bottom: 0;
    transform: translate(calc((76px + 16px) / 2), 20px);
}

@media screen and (max-width: 820px) and (min-height: 481px) {
    .history-wrap dl dt {
        font-size: 30px;
    }

    .history-wrap dl dd {
        font-size: 19px; line-height: 30px;
    }
}

@media screen and (max-width: 480px) {
    .history-wrap dl dt {
        font-size: 20px;
    }

    .history-wrap dl dd {
        font-size: 18px; line-height: 30px;
    }
}
@media screen and (max-width: 820px) {
    .history-wrap {padding: 0 20px}
    .history-wrap ul {
        row-gap: 76px;
    }
    .history-wrap ul::before {
        transform: translateX(24px);
    }
    .history-wrap li {padding-left: 50px}
    .history-wrap dl {
        flex-direction: column;
        align-items: start;
        row-gap: 13px;
    }
    .history-wrap dl dt::before {
        right: auto; left: 0;
        transform: translate(calc((-51px - 16px) / 2), -50%);
    }
    .history-wrap li:last-child dt::after {
        right: auto; left: 0;
        height: 200px;
        transform: translate(calc((-51px - 16px) / 2), 90%);
    }
    .history-wrap li:first-child dt::after {
        top: 0; right: auto; left: 0;
        transform: translate(calc((-51px - 16px) / 2), -20px);
    }
}