@charset "UTF-8";

:root {
    --flow-h1-pad: 60px;
    --flow-left-pad: 50px;
    --flow-left-div-mar: 70px;
    --flow-left-mar-btm: 40px;
    --flow-left-txt-align: auto;
    --flow-left-img-w: 20%;
    --flow-left-img-mar: 30px;
}

@media screen and (max-width: 1024px) {
    :root {
        --flow-h1-pad: 20px;
        --flow-left-div-mar: 40px;
        --flow-left-pad: 0px;
        --flow-left-mar-btm: 0px;
        --flow-left-txt-align: center;
        --flow-left-img-w: 30%;
        --flow-left-img-mar: 0px;
    }
}


@media screen and (max-width: 900px) {
    :root {
        --flow-h1-pad: 30px;

    }
}

@media screen and (max-width: 480px) {
    :root {
        --flow-h1-pad: 20px;
        --flow-left-div-mar: 0px;

    }
}

.task {
    gap: var(--task-gap);
}

.flow h1 {
    font-size: var(--res-h1);
    text-align: center;
    margin-top: var(--flow-h1-pad);
    margin-bottom: var(--flow-h1-pad);
    color: var(--themegray);
}

.flow h2 {
    font-size: var(--flow-task-txt);
}

.flow h3 {
    font-size: var(--res-h1);
    text-align: center;
    margin-top: var(--flow-h1-pad);
    margin-bottom: var(--flow-h1-pad);
    color: var(--themegray);
}


.flow-left {
    padding: var(--flow-left-pad);
    border-radius: 10pt;

}

.flow-left div {
    margin-top: var(--flow-left-div-mar);

}

.flow-left h3 {
    font-size: var(--res-h1);
    text-align: left;
    margin-top: 0px;
    margin-bottom: var(--flow-left-mar-btm);
    color: var(--themegray);
    justify-self: var(--flow-left-txt-align);
}

.flow-left img {
    width: var(--flow-left-img-w);
    margin-left: var(--flow-left-img-mar);
        justify-content: center;
    /* 水平方向の中央寄せ */
    align-items: center;
    /* 垂直方向の中央寄せ */
    margin-left: auto;
    margin-right: auto;
}

.flow-left p {
    text-align-last: left;
}


.flow h4 {
    font-size: var(--flow-task-txt);
}


.flow p {
    font-size: var(--res-p);
}

.flow hr {
    justify-content: center;
    /* 水平方向の中央寄せ */
    align-items: center;
    /* 垂直方向の中央寄せ */
    margin-left: auto;
    margin-right: auto;
    width: var(--task-group-w);
    margin-top: 20px;
    margin-bottom: 20px;
}


.flow br {
    line-height: 1;
}

.flow .small-text {
    font-size: var(--small-txt);
}

.flow .small-text p {
    font-size: var(--flow-txt-small);
}

.flownum {
    color: var(--themebrown);
}

.flowtxt {
    color: var(--themegray);
}

.flow .task h2 {
    display: flex;
    font-weight: bold;
}

.flow .task h4 {
    display: flex;
    font-weight: bold;
}

.flow .task-group {
    justify-content: center;
    /* 水平方向の中央寄せ */
    align-items: center;
    /* 垂直方向の中央寄せ */
    margin-left: auto;
    margin-right: auto;
    width: var(--task-group-w);
    line-height: 2;
}

.flow .padleft {
    padding-left: 32.11px;
}