@charset "UTF-8";
.flow_frame{
    width: 100%;
    height: fit-content;
    font-size: clamp(0.5em, 0.9vw, 1.1em);
}

.flow_title{
    font-weight: bold;
}

.flow_block{
    background-color: white;
    border-left: 2px solid rgb(234, 85, 71);
    border-right: 2px solid rgb(234, 85, 71);
    border-bottom: 2px solid rgb(234, 85, 71);
    margin: 0 auto 2em;
    font-weight: bold;
}

.flow_caption{
    position: relative;
    height: fit-content;
    margin: auto;
    background-color: rgb(234, 85, 71);
    color: white;
    padding: 0.3em 0;
}

.flow_caption_icon{
    position: absolute;
    top: 50%;
    right: 0;
    background-color: white;
    border-radius: 20em;    
}.flow_caption_icon > div{
    position: absolute;
    font-size: 0.6em;
    color: rgb(234, 85, 71);
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    top: 45%;
    left: 50%;
    font-size: 75%;
}

.flow_circle_contents{
    width: 13em;
    height: 13em;
    border: 2px solid rgb(139, 109, 82);
    color: #8b6d52;
    border-radius: 50em;
    margin: auto;
}

.flow_sp_contents{
    width: 90%;
    border-radius: 25em;
    border: 2px solid rgb(139, 109, 82);
    color: #8b6d52;
    padding: 1em 0;
    margin: auto;
}

.flow_triangle_contents-right{
    background-color: rgb(247, 189, 161);
    width: 2.5em;
    height: 3.5em;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    margin: auto 0;
}

.flow_triangle_contents-left{
    background-color: rgb(247, 189, 161);
    width: 2.5em;
    height: 3.5em;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    margin: auto 0;
}

.flow_triangle_contents-bottom{
    background-color: rgb(247, 189, 161);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.flow_msg_group > div:nth-child(1){
    font-size: 1.5em;
}.flow_msg_group > div:nth-child(2){
    font-size: 0.9em;
}

.flow_dummy_circle{
    width: 10.5em;
    padding: 0em 2em;
    margin: auto;
}

.flow_dummy_triangle{
    width: 1.5em;
}

.flow_dummy_group{
    font-size: 1.3em;
    padding: 0em 2em;
}

/* PC */
@media screen and (min-width: 769px) {
    .flow_title{
        font-size: 3em;
        padding: 0.3em 0 0.3em;
    }

    .flow_block{
        width: 67%;
    }

    .flow_triangle_contents-bottom{
        width: 3.5em;
        height: 2.5em;
        margin: 0 auto;
    }

    .flow_contents_group{
        font-size: 1.3em;
        padding: 1em 2em;
    }

    .flow_caption{
        font-size: 2em;
    }

    .flow_caption_icon{
        width: 1.4em;
        height: 1.4em;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .flow_title{
        font-size: 3.8em;
        padding: 0em 0 0.3em;
    }

    .flow_block{
        width: 95%;
    }

    .flow_triangle_contents-bottom{
        width: 4em;
        height: 2em;
        margin: 1.0em auto;
    }

    .flow_contents_group{
        font-size: 1.2em;
        padding: 1.5em 2em;
        white-space: nowrap;
    }

    .flow_caption{
        font-size: 2.2em;
    }

    .flow_caption_icon{
        width: 1.1em;
        height: 1.1em;
    }
}