@charset "utf-8";


.box01{
    width: 820px;
    margin: 0 auto 40px;
}
.flow {
    position: relative;
}
.flow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-right: 2px dashed #ccc;
    height: 100%;
}
.flow li {
    width: 410px;
    padding: 0 20px;
    margin-bottom: 10px;
    position: relative;
}
.flow li:nth-of-type(even) {
    margin-left: auto;
    padding: 0 50px;
}
.time {
    font-size: 1.75rem;
    font-weight: bold;
    color: #eda185;
    margin-bottom: .75em;
    position: relative;
}
.flow li:nth-of-type(even) .time {
    color: #85c8af;
}

.time::before {
    content: "";
    position: absolute;
    top: 50px;
    left: -30px;
    width: 410px;
    height: 1px;
    background: #eda185;
}
.time::after {
    content: "";
    position: absolute;
    right: -30px;
    top: 40px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #eda185;
    z-index: 5;
}
.flow li:nth-of-type(even) .time::before {
    background: #85c8af;
    left: -50px;
}
.flow li:nth-of-type(even) .time::after {
    background: #85c8af;
    right: auto;
    left: -60px;
}


@media (max-width: 799px){


.box01{
    width: 85%;
}

.flow li {
    width: 100%;
    padding: 0 0 0 4vw!important;
    margin-bottom: 25px;
}
.flow::after {
    left: 3.8%;
}

.flow li {
    width: 100%;
    padding: 0 0 0 4vw!important;
    margin-bottom: 25px;
}
.time {
    font-size: 4vw;
    padding-left: 5%;
    margin-bottom: 20px;
}
.time::before {
    left: 0!important;
    top: 50px;
    width: 100%;
}
.time::after {
    width: 14px;
    height: 14px;
    right: auto;
    left: -13px;
    top: 43px;
}
.flow li:nth-of-type(even) .time::after {
    left: -13px;
}
.text {
    padding-left: 5%;
}


}

@media (max-width: 499px){
	.flow::after { left: 4vw;}
	.time { font-size: 20px;}
	.time::before { top: 41px;}
	.time::after { top: 34px;}
	.time::after, .flow li:nth-of-type(even) .time::after { left: -1.5vw;}
}