.timeline-002__section {
    position: relative;
    padding: 0 1.5em 1.5em 2em;
}

.timeline-002__section:not(:last-child)::before,
.timeline-002__section::after {
    position: absolute;
    content: '';
}

.timeline-002__section:not(:last-child)::before {
    bottom: -5px;
    left: 10px;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: #000;
}

.timeline-002__section::after {
    top: 4px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 4px solid #fff;
    border-radius: 50%;
    background-color: #3a3f43;
}


.timeline-002__img-wrap {
    max-width: 100%;
}

.timeline-002__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}


.timeline-002__content {
        margin-bottom: max(4vw, 30px);
}
@media only screen and (min-width: 768px) {
	.timeline-002__section:not(:last-child)::before {
    	bottom: 0px;

	}
	.timeline-002__section::after {
    	top: 0px;
	}
	.timeline-002__img-wrap {
	    max-width: 300px;
}
}

@media only screen and (min-width: 521px) {
    .timeline-002__content {
        display: flex;
    }

    .timeline-002__img-wrap,
    .timeline-002__balloon {
        width: 40%;
        padding-right: 40px;
    }

    .timeline-002__balloon::before,
    .timeline-002__balloon::after {
        top: unset;
        left: -15px;
        width: 15px;
        height: 30px;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }

    .timeline-002__balloon::after {
        top: unset;
        left: -11px;
    }
}

.step {
	margin-top: min(10vw, 50px);
}
.step-content {
    width: 100%;
}
.step .step-title {
	font-size: max(1.6vw, 18px);
	font-weight: 900;
}
.step .summary {
	font-size: max(1.2vw, 13px);
	margin-top: max(1.4vw, 16px);
	margin-bottom: max(1.4vw, 16px);
	font-weight: 600;
}
.step .detail {
	font-size: max(1vw, 12px);
	line-height: 2;
}	

@media only screen and (min-width: 521px){
    .step-content {
        width: 60%;
    }
}