@charset "utf-8";

/* PC */
/* what's */
.whats {
    padding-block: 50px 90px;
    background-color: #FFFDF3;
}

.whats__inner {
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
}

.whats__contents {}

.whats__contents img {
    width: 100%;
    height: auto;
}

/* reason */
.reason {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-block: 90px 110px;
    position: relative;
    background: rgba(255, 255, 255, .8);
}

.reason__inner {
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
}

.reason::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/lp01/reason_bg_pc.png) no-repeat top center / contain;
    z-index: -1;
}

.reason__contents {}

.reason__contents img {
    width: 100%;
    height: auto;
}

/* step */
.step {
    padding-block: 85px 105px;
    background-color: #f4f4f4;
}

.step__inner {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
}

.step__contents {}

.step__contents img {
    width: 100%;
    height: auto;
}

#application {
    border-top: none;
}


/* SP */
@media screen and (max-width: 768px) {
    /* what's */
    .whats {
        padding-block: 16px 35px;
        padding-inline: 8px;
    }

    /* reason */
    .reason {
        padding-block: 0;
    }

    .reason::before {
        position: static;
        background: none;
    }

    .whats__inner {
        max-width: none;
    }

    /* recommend */
    #recommend {
        border-top: none;
    }

    /* step */
    .step {
        padding-block: 0;
        background-color: transparent;
    }
}