@charset "utf-8";

/* ==================================================================

    flow.css

=================================================================== */

/* --------------------------------
■共通
-------------------------------- */

/* --------------------------------
■flow_sec
-------------------------------- */
#flow .flow_sec:not(:last-of-type) {
    padding-bottom: 0;
}
#flow .flow_sec .container:first-of-type {
    position: relative;
}
    #flow .flow_sec .container:first-of-type:before {
        content: "";
        position: absolute;
        top: 32px;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 300px;
        background: var(--bg-color-beige);
        z-index: -1;
        margin-right: calc(50% - 50vw);
        padding-right: calc(50vw - 50%);
    }

#flow .flow_sec h2.title.lv3 {
    font-size: 4.0rem;
    letter-spacing: 0.04em;
    margin-bottom: 72px;
}

.flow_list {
    gap: 115px;
}
.flow_list li .left_box {
    padding-left: 105px;
    position: relative;
}
.flow_list li .left_box p.no {
    position: absolute;
    top: -20px;
    left: 0;
    font-size: var(--font-size-l);
    writing-mode: vertical-rl;
}
.flow_list li .left_box p.text {
    letter-spacing: 0.1em;
    margin-bottom: 0;
}
.flow_list li .left_box h3.title.lv4 {
    letter-spacing: 0.04em;
    padding-bottom: 0;
    border-bottom: none;
}

.flow_list p + .button_list {
    margin-top: 32px;
    gap: 20px 29px;
}
.flow_list + p.text {
    margin-top: 78px;
    margin-bottom: 0;
}
.flow_list p.buttonStyle.m-left a {
    font-size: var(--font-size16);
    width: 303px;
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 1080px) {

    #flow .flow_sec h2.title.lv3 {
        font-size: 3.2rem;
        margin-bottom: 40px;
    }
    .flow_list li .left_box {
        padding-left: 60px;
    }
    .flow_list li .left_box p.text {
        letter-spacing: 0;
    }
}

@media only screen and (max-width: 767px) {

    #flow .flow_sec .container:first-of-type:before {
        top: 0;
        left: 32px;
        height: calc(100% + 30px);
    }
    #flow .flow_sec h2.title.lv3 {
        font-size: 2.8rem;
        margin-bottom: 24px;
    }
    .flow_list {
        gap: 60px;
    }
    .flow_list li .left_box {
        padding-left: 48px;
    }
    .flow_list li .left_box p.no {
        top: 0;
    }
    .flow_list .button_list li {
        width: 100%;
    }
    .flow_list p + .button_list {
        margin-top: 24px;
    }
    .flow_list + p.text {
        margin-top: 24px;
    }
    .flow_list p.buttonStyle.m-left a {
        font-size: var(--font-size-s);
        width: 100%;
    }
    .flow_list li figure img {
        width: 100%;
    }
}