@charset "UTF-8";

/*-------------------------speech_bubble-------------------------*/
.speech_bubble_bottom{
    position: relative;
    white-space: nowrap;
    border: solid 2px black;
    border-radius: 1em;
    width: fit-content;
    height: fit-content;
    margin: auto;
    font-weight: bold;
}.speech_bubble_bottom::before, .speech_bubble_bottom::after{
    content: "";
    position: absolute;
    transform: translate(-50%, 0%);
    width: 1.5em;
    height: 1em;
    left: 50%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}.speech_bubble_bottom::before{
    top: 100%;
    background-color: black;
}.speech_bubble_bottom::after{
    top: 95%;
    background-color: white;
}

/*-------------------------Proggress-------------------------*/
.progress_container{
    position: relative;
    height: 0.5em;
    margin: auto;
}.progress_bar{
    position: absolute;
    transform: translate(0%, -50%);
    height: 0.5em;
    background-color: rgb(233, 145, 129);
    width: 50%;
    top: 50%;
}.progress_bar_left{
    left: 0%;
}.progress_bar_right{
    left: 50%;
}.progress_icon{
    position: absolute;
    background-color: rgb(233, 145, 129);
    transform: translate(-50%, -50%);
    top: 50%;
    width: 2em;
    height: 2em;
    border-radius: 50em;
    color: white;
    z-index: 1;
}.progress_icon::after{
    position: absolute;
    transform: translate(-50%, 0%);
    top: 100%;
    white-space: nowrap;
    color: rgb(223, 90, 83);
    font-size: 0.7em;
}.progress_icon:nth-child(1){
    left: 0;
}.progress_icon:nth-child(1)::after{
    content: "入力";
    left: 50%;
}.progress_icon:nth-child(2){
    left: 50%;
}.progress_icon:nth-child(2)::after{
    content: "確認";
    left: 50%;
}.progress_icon:nth-child(3){
    left: 100%;
}.progress_icon:nth-child(3)::after{
    content: "完了";
    left: 50%;
}

.progress_active{
    background-color: rgb(223, 90, 83)!important;   
}

/* PC */
@media screen and (min-width: 769px) {
    .progress_container{
        width: 40%;
    } 
}
/* SP */
@media screen and (max-width: 768px) {
    .progress_container{
        width: 60%;
    } 
}