@charset "UTF-8";

.section-flow { text-align: center; margin-top: 32vw; }
.section-flow:first-child { margin-top: 0; }
.col-flow-image img { max-width: 60%; }

.col-flow-detail { text-align: left; }

.flow-title { margin-top: 45px; }
.flow-title .baloon { display: none; }
.flow-title .title::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    top: -10px;
    left: calc(50% - 45px);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-size: contain;
    background-repeat: no-repeat;
}
.flow-title #flow-1 .title::before { left: calc(50% - 45px); background-image: url('../images/flow/baloon_1.png'); }
.flow-title #flow-2 .title::before { left: calc(50% - 70px); background-image: url('../images/flow/baloon_2.png'); }
.flow-title #flow-3 .title::before { left: calc(50% - 45px); background-image: url('../images/flow/baloon_3.png'); }
.flow-title #flow-4 .title::before { left: calc(50% - 95px); background-image: url('../images/flow/baloon_4.png'); }
.flow-title #flow-5 .title::before { left: calc(50% - 50px); background-image: url('../images/flow/baloon_5.png'); }
.flow-title #flow-6 .title::before { left: calc(50% - 50px); background-image: url('../images/flow/baloon_6.png'); }
.flow-title .title { font-weight: bold; }

.flow-pointcard-child-wrapper {
    background-color: #cea971;
    text-align: center;
    padding: 4.26vw;
    margin: 4.26vw 0;
}
.flow-pointcard-child-wrapper img { max-width: 100%; }
.slash { margin-top: 4.26vw; }
.slash h5 {
    font-size: 3.413vw;
    font-weight: bold;
    text-align: center;
}
.flow-pointcard-image-wrapper { margin: 4.26vw 0; text-align: center; }
.flow-pointcard-image-wrapper img { max-width: 50%; border-radius: 50%; }
.flow-pointcard-text-wrapper { margin-top: 4.26vw; text-align: left; }
.flow-pointcard-text-wrapper dl { margin: 3.84vw 0; text-align: center; }

@media (min-width: 768px) {
    .section-flow { margin-top: 8rem; }
    .flow-title { margin-bottom: 2rem; }

    .col-flow-detail p { font-size: 1.6rem; }

    .flow-title .title::before { width: 50px; height: 50px; }
    .flow-title #flow-1 .title::before { left: calc(50% - 55px); }
    .flow-title #flow-2 .title::before { left: calc(50% - 90px); }
    .flow-title #flow-3 .title::before { left: calc(50% - 55px); }
    .flow-title #flow-4 .title::before { left: calc(50% - 120px); }
    .flow-title #flow-5 .title::before { left: calc(50% - 65px); }
    .flow-title #flow-6 .title::before { left: calc(50% - 65px); }

    .flow-title .title { font-size: 2.24rem; font-weight: bold; }

    .flow-pointcard-child-wrapper { border-radius: 25px; }
    .slash { margin-top: 1.6rem; }
    .slash h5 { font-size: 1.6rem; }
    .flow-pointcard-image-wrapper { margin: 1.6rem 0; text-align: center; }
    .flow-pointcard-image-wrapper img { max-width: 50%; border-radius: 50%; }
    .flow-pointcard-text-wrapper { margin-top: 1.6rem; text-align: left; }
    .flow-pointcard-text-wrapper dl { margin: 1.2rem 0; text-align: center; }
    .flow-pointcard-text-wrapper p { text-align: center; }


}