div#navbar {
    background-color: #fff;
}

/* div.page {
    min-width: auto !important;
} */

body {
    width: 100%;
    height: 100vh;
    background-color: #fffdfa;
    background-image: linear-gradient(to right, #f0f3f9 1.5px, transparent 1.5px), linear-gradient(to bottom, #f0f3f9 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    position: relative;
    /* mix-blend-mode: multiply; */
    /* z-index: 2; */
}

.inner {
    margin: 0 auto;
}

.w950 {
    width: 740px;
}

.home-content {
}

.pc-off {
    display: none !important;

    @media screen and (max-width: 767px) {
        display: block !important;
    }
}

.sp-off {
    display: block;

    @media screen and (max-width: 767px) {
        display: none;
    }
}
/* @font-face {
    font-family: "Zen Maru Gothic";
    src: url("/fonts/ZenMaruGothic.woff2") format("woff2");
    font-weight: 400 500 600 700;
} */

.page {
    & h1 {
        display: none;
    }
}

/* --------------------------------------------------------------- */
/* COMMON HEADER */
/* --------------------------------------------------------------- */

#header .header_inner .h_bible02 {
    @media screen and (max-width: 767px) {
        right: 10px;
    }
}

/* --------------------------------------------------------------- */
/* COMMON SECTION TITLE */
/* --------------------------------------------------------------- */

.common-section-title {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #000000;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
        margin-bottom: 20px;
        font-size: 30px;
    }
}

.common-section-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 100%;
    background-color: #005ba7;
}

.common-section-subtitle {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #005ba7;
    padding-bottom: 15px;

    @media screen and (min-width: 768px) {
        font-size: 24px;
        padding-bottom: 31px;
        width: 740px;
        margin: auto;
    }
}

.common-section-desc {
    display: flex;
    flex-direction: column;
    gap: 15px;

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
    }
}

.common-section-desc-txt {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #000000;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

    & p {
        font-size: 16px !important;
        padding-bottom: 10px;
    }

    & li {
        list-style: disc;
        margin-left: 20px;
    }

    @media screen and (min-width: 768px) {
        font-size: 18px !important;

        & p {
            font-size: 18px !important;
        }
    }
}

.bold-text {
    font-weight: 700;
}

.red-num {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #e73d41;
    flex: none;
    order: 0;
    flex-grow: 0;

    @media screen and (min-width: 768px) {
        font-size: 20px;
    }
}

.common-yellow-highlight-title {
    position: relative;
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 21px;
    line-height: 130%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #000000;
    padding-bottom: 10px;

    & span {
        position: relative;
        z-index: 0;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 16px;
            background: #ffea76;
            z-index: -1;
            bottom: -2px;
            width: 90%;
            margin: auto;
        }
    }

    @media screen and (min-width: 768px) {
        font-size: 28px;
    }
}

.blue-border {
    border: 2px solid #005ba7;
}

.red-border {
    border: 2px solid #e73d41;
}

.red-font {
    color: #e73d41 !important;
}

/* --------------------------------------------------------------- */
/* FV */
/* --------------------------------------------------------------- */

.fv-illust {
    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
    }
}

.fv-wrap {
    padding: 40px 20px;
    padding-bottom: 0 !important;
    padding-top: 35px !important;
    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
    }
}

.fv-wrap {
    width: 100%;
    text-align: center;
}

.fv-img {
    width: 90%;
    margin: 0 auto;
    display: block;
    padding-bottom: 20px;

    @media screen and (min-width: 768px) {
        width: 445px;
        padding-bottom: 32px;
    }
}

.fv-msg-top {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-size: 21px !important;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #005ba7;
    position: relative;

    @media screen and (min-width: 768px) {
        font-size: 33px !important;
    }
}

.fv-blue-container {
    position: relative;
    padding-bottom: 60px;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(../../yokogakuin/img/home/blue-bg.png);
        background-size: cover !important;
        background-repeat: no-repeat !important;
        mix-blend-mode: multiply;
        z-index: -1;
        pointer-events: none;
        background-position: center !important;
    }

    @media screen and (min-width: 768px) {
        padding-bottom: 80px;

        &::before {
            width: 1080px;
            max-width: 100%;
            top: -10px;
            /* background-position: center !important; */
            background: url(../../yokogakuin/img/home/blue-bg-pc.png);
            margin: auto;
        }
    }
}

.fv-blue-container-desc {
    padding-top: 55px;
    padding-bottom: 24px;
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 130%;
    text-align: center;
    letter-spacing: 0.1em;
    color: #000000;

    .common-yellow-highlight-title {
        font-family: "Zen Maru Gothic";
        font-style: normal;
        font-weight: 700;
        font-size: 28px;
        line-height: 130%;
        text-align: center;
        letter-spacing: 0.1em;
        color: #000000;
    }

    @media screen and (min-width: 768px) {
        padding-top: 113px;
        padding-bottom: 48px;
        font-size: 33px;

        .common-yellow-highlight-title {
            font-size: 33px;
        }
    }
}

.common-yellow-highlight-title-pc {
    display: flex;
    gap: 10px;
    justify-content: center;
    @media screen and (max-width: 767px) {
        display: none;
    }
}

.fv-blue-container-desc-note {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 18px !important;
    line-height: 170%;
    text-align: center;
    letter-spacing: 0.1em;
    color: #000000;
    padding-top: 0;

    @media screen and (min-width: 768px) {
        font-size: 22px !important;
        padding-top: 8px;
    }
}

.fv-white-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    gap: 16px;
    /* width: 327px; */
    /* height: 233px; */
    width: calc(100% - 100px);
    margin: auto;
    background: #ffffff;
    border-radius: 8px;

    @media screen and (min-width: 768px) {
        width: 740px;
        justify-content: center;
    }
}

.fv-white-box-pc {
    display: none;
    @media screen and (min-width: 768px) {
        display: flex;
        width: 740px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

.fv-logo {
    @media screen and (min-width: 768px) {
        width: 48%;

        & img {
            width: 230px;
            /* right: 0; */
            position: relative;
        }
    }
}

.fv-white-box-desc {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
    text-align: left;
    letter-spacing: 0.08em;
    color: #000000;
    flex: none;
    order: 1;
    flex-grow: 0;

    @media screen and (min-width: 768px) {
        width: 52%;
        text-align: left;
        font-size: 18px;
        /* padding-top: 5px; */
    }
}

/* --------------------------------------------------------------- */
/* SECTION 1 */
/* --------------------------------------------------------------- */

.section1 {
    padding: 40px 24px !important;

    @media screen and (min-width: 768px) {
        padding: 65px 50px !important;
        width: 740px;
        margin: auto;
    }
}

/* --------------------------------------------------------------- */
/* SECTION 2 */
/* --------------------------------------------------------------- */

.section2 {
    padding: 40px 24px !important;
    /* background: #eef1f4; */
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #eef1f4;
        z-index: -1;
        pointer-events: none;
        /* background-position: center !important; */
    }

    @media screen and (min-width: 768px) {
        padding: 65px 50px !important;

        &::before {
            width: 1080px;
            max-width: 100%;
            background-position: unset !important;
            margin: auto;
        }
    }
}

.section2 .common-section-desc-txt .desc-item {
    display: flex;
    gap: 2px;
    align-items: flex-start;
    padding-bottom: 5px;

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
    }
}

.section2 .common-section-desc-txt .desc-item:last-child {
    padding-bottom: 0;
}

.common-section-sub-img-pc {
    display: none;

    @media screen and (min-width: 768px) {
        display: flex;
        width: 740px;
        margin: auto;
        gap: 10px;

        .common-section-subtitle {
            text-align: left;
        }
    }
}

.sec2-img {
    padding-bottom: 24px;
    display: flex;
    margin: auto;
    width: 220px;
    max-width: 100%;
}

.sec2-subtitle {
    padding-bottom: 5px !important;
}

/* --------------------------------------------------------------- */
/* SECTION 3 */
/* --------------------------------------------------------------- */

.section3 {
    padding: 40px 24px !important;

    @media screen and (min-width: 768px) {
        padding: 65px 50px !important;
    }
}

.sec3-img {
    padding-bottom: 24px;
    display: flex;
    margin: auto;
}

/* --------------------------------------------------------------- */
/* SECTION 4 */
/* --------------------------------------------------------------- */

.section4 {
    position: relative;
    padding: 40px 24px !important;
    /* background-color: #fffbe5; */

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fffbe5;
        z-index: -1;
    }

    .common-section-subtitle {
        font-size: 21px;
    }

    @media screen and (min-width: 768px) {
        padding: 65px 50px !important;

        .common-section-subtitle {
            font-size: 28px;
        }

        &::before {
            background-color: #fffbe5;
            width: 1080px;
            max-width: 100%;
            background-position: unset !important;
            margin: auto;
        }
    }
}

.sec4-box-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
    }
}

.sec4-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85%;
    height: 100%;
    isolation: isolate;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    padding: 16px 24px 24px;
    gap: 8px;
    background: #ffffff;

    @media screen and (min-width: 768px) {
        width: 100%;
        box-sizing: border-box;
        padding: 24px 32px 32px;
    }
}

.sec4-box-num {
    background: #005ba7;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-family: "Yusei Magic";
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.sec4-box-title {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #000000;

    @media screen and (min-width: 768px) {
        font-size: 24px;
    }
}

.sec4-box-subtitle {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #005ba7;
    align-self: stretch;

    @media screen and (min-width: 768px) {
        font-size: 24px;
    }
}

.sec4-box-desc {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #000000;

    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

.sec4-box-desc-second {
    display: flex;
    gap: 5px;
}

.sec4-red-box-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    background-color: #ffffff;

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
        margin-bottom: 24px;
    }
}

.sec4-red-box-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 6px;
    gap: 8px;
    background: #e73d41;
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #ffffff;

    @media screen and (min-width: 768px) {
        font-size: 24px;
    }
}

.sec4-red-box-desc {
    padding: 24px 20px;
    padding-left: 40px;
}

.sec4-red-box-desc ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sec4-red-box-desc ul li {
    list-style-type: disc;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0.05em;
    color: #000000;

    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

.sec4-img {
    display: flex;
    margin: auto;
    width: 279px;
}

/* --------------------------------------------------------------- */
/* SECTION 5 */
/* --------------------------------------------------------------- */

.section5 {
    padding: 0 !important;

    @media screen and (min-width: 768px) {
        padding-top: 65px !important;
        padding-bottom: 65px !important;
    }
}

.section5 .common-section-title {
    margin: 40px 24px !important;
    margin-bottom: 5px !important;

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: 33px 50px !important;
        margin: auto !important;
        margin-bottom: 5px !important;
    }
}

/* .sec5-img-01 {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
} */

.sec5-blue-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 8px;
    /* width: 327px; */
    /* height: 200px; */
    background: #ddeeff;
    margin: 33px 24px !important;
    margin-bottom: 37px !important;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: -16px;
        right: -25px;
        width: 82px;
        height: 35px;
        background: url(../img/home/yellow-tape.svg) no-repeat center / contain;
        transform: rotate(50.16deg);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: -30px;
        background: url(../img/home/blue-tape.svg) no-repeat center / contain;
        width: 78px;
        height: 30.63px;
        transform: matrix(0.94, 0.35, 0.35, -0.94, 0, 0);
    }

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto !important;
        margin-top: 34px !important;
        margin-bottom: 37px !important;

        &::before {
            top: -22px;
            right: -25px;
            width: 90px;
            height: 50px;
        }

        &::after {
            height: 46px;
            bottom: -14px;
            left: -33px;
        }
    }
}

.sec5-blue-container-title {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 170%;
    color: #000000;

    @media screen and (min-width: 768px) {
        font-size: 20px;
    }
}

.sec5-blue-container-desc {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #000000;

    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

.sec5-img-02 {
    /* padding: 0 15px; */
    /* padding-top: 10px; */
    display: flex;
    justify-content: center;

    & img {
        /* width: 328px; */
        max-width: 100%;
    }

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
        & img {
        }
    }
}

/* --------------------------------------------------------------- */
/* SECTION 6 */
/* --------------------------------------------------------------- */

.section6 {
    position: relative;
    padding: 40px 24px !important;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fffbe5;
        z-index: -1;
    }

    .common-yellow-highlight-title {
        & span {
            &::after {
                width: 100%;
            }
        }
    }

    @media screen and (min-width: 768px) {
        padding: 65px 50px !important;

        &::before {
            background-color: #fffbe5;
            width: 1080px;
            max-width: 100%;
            background-position: unset !important;
            margin: auto;
        }
    }
}

.sec6-common-box-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;

    &:last-child {
        margin-bottom: 0;
    }
}

.sec6-common-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0px 24px 24px;
    background: #ffffff;
    border-radius: 8px;

    @media screen and (min-width: 768px) {
        padding: 0px 32px 32px;
        gap: 10px;
        width: 740px;
        margin: auto;
    }
}

.sec6-common-box-img {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .sec6-common-img {
        padding-top: 20px;
    }

    @media screen and (min-width: 768px) {
    }
}

.sec6-common-box-num {
    @media screen and (min-width: 768px) {
        display: flex;
        gap: 10px;
        align-items: center;
    }
}

.sec6-common-box-title {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0.05em;
    color: #005ba7;
    text-align: left;
    flex: none;
    flex-grow: 0;
    padding-top: 10px;
    padding-bottom: 10px;

    @media screen and (min-width: 768px) {
        padding-top: 28px;
        font-size: 24px;
    }
}

.sec6-common-box-desc {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #000000;
    flex-grow: 0;

    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

.sec6-common-blue {
    padding-top: 20px;
    width: 55px;
    height: 55px;
}

/* --------------------------------------------------------------- */
/* SECTION 7 */
/* --------------------------------------------------------------- */

.section7 {
    padding: 0 !important;
    margin: 20px 25px;

    & img {
        width: 100%;
    }

    & a {
        transition: opacity 0.3s;

        &:hover {
            opacity: 0.6;
        }
    }

    @media screen and (min-width: 768px) {
        display: flex;
        justify-content: center;
        width: 650px;
        margin: auto;
        padding: 40px 0 !important;

        & img {
            width: 100%;
        }
    }
}

.section7-footer {
    /* padding-top: 0 !important; */
    margin-bottom: 30px !important;
    /* margin: 0 25px; */
    /* margin: auto; */

    @media screen and (min-width: 768px) {
        margin-bottom: 0 !important;
        /* padding-top: 0 !important; */
        /* padding-bottom: 50px !important; */
    }
}

/* --------------------------------------------------------------- */
/* SECTION 8 */
/* --------------------------------------------------------------- */

.section8 {
    position: relative;
    padding: 40px 24px !important;

    /* &::before {
        width: 100%;
    } */

    @media screen and (min-width: 768px) {
        padding: 65px 50px !important;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 1080px;
        max-width: 100%;
        height: 100%;
        background-color: #ddeeff;
        background-position: unset !important;
        mix-blend-mode: multiply;
        z-index: -1;
        transform: translateX(-50%);
        margin: auto;
    }
}

.sec8-ques {
    padding-top: 55px;
    padding-bottom: 23px;
    position: relative;

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
    }
}

.sec8-ques-box {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 26px 1px 16px;
    gap: 10px;
    background: #ffffff;
    border: 2px solid #005ba7;
    box-shadow: 3px 3px 0px #005ba7;
    border-radius: 8px;
}

.cloud-img {
    position: absolute;
    left: -20px;
    top: -35px;

    @media screen and (min-width: 768px) {
        width: 222px;
        left: 314px;
        top: -44px;
    }
}

.sec8-ques-box-desc {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #000000;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.sec8-interview {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-bottom: 24px;

    &:last-child {
        padding-bottom: 0;
    }

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
    }
}

.sec8-interview-top {
    display: flex;
    gap: 18px;
}

.sec8-interview-top-img {
    flex-shrink: 0;

    & img {
        width: 90px;
        max-width: 100%;
    }
}

.sec8-interview-top-desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.sec8-interview-top-desc-title {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #000000;
    flex: none;
    order: 0;
    flex-grow: 0;

    @media screen and (min-width: 768px) {
        font-size: 20px;
    }
}

.sec8-interview-top-desc-subtitle {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #000000;
    flex: none;
    order: 1;
    flex-grow: 0;

    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

.sec8-interview-bottom {
    box-sizing: border-box;
    /* display: flex; */
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
    padding: 24px;
    gap: 10px;
    background: #ffffff;
    border: 2px solid #005ba7;
    box-shadow: 3px 3px 0px #005ba7;
    border-radius: 8px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #000000;
    flex: none;
    order: 0;
    flex-grow: 0;

    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

/* --------------------------------------------------------------- */
/* SECTION 9 */
/* --------------------------------------------------------------- */

.section9 {
    padding: 40px 24px !important;

    @media screen and (min-width: 768px) {
        padding: 65px 50px !important;
    }
}

.sec9-qaa-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 28px;
    margin-bottom: 28px;

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-image: url("../img/home/underline.svg");
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 100% auto;
        z-index: -1;
    }

    &:last-child {
        margin-bottom: 0;
    }

    @media screen and (min-width: 768px) {
        width: 740px;
        margin: auto;
        margin-bottom: 28px;

        &::after {
            width: 100%;
            background-image: url("../img/home/underline-pc.svg");
        }
    }
}

.sec9-question {
    /* width: 100%; */
    display: flex;
    gap: 10px;
    align-items: center;
}

.sec9-q {
    font-family: "Yusei Magic";
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 70%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #e73d41;
    order: 0;
    flex-grow: 0;
}

.sec9-q-text {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #e73d41;
    order: 0;
    flex-grow: 0;

    @media screen and (min-width: 768px) {
        font-size: 20px;
    }
}

.sec9-answer {
    display: flex;
    gap: 10px;
}

.sec9-a {
    font-family: "Yusei Magic";
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 70%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #005ba7;
    order: 0;
    flex-grow: 0;
    padding-top: 5px;
}

.sec9-a-text {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #000000;
    order: 0;
    flex-grow: 0;

    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

/* --------------------------------------------------------------- */
/* SECTION 10 */
/* --------------------------------------------------------------- */

.section10 {
    padding: 40px 24px !important;
    padding-bottom: 30px !important;

    @media screen and (min-width: 768px) {
        padding: 65px 50px !important;
        padding-bottom: 30px !important;
    }
}

.sec10-img {
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    margin: auto;

    @media screen and (min-width: 768px) {
        display: flex;
        margin: auto;
        padding-top: 0;
    }
}

.sec10-desc {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #000000;
    flex: none;
    order: 2;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;

    @media screen and (min-width: 768px) {
        font-size: 18px;
        width: 740px;
        margin: auto;
    }
}

.sec10-yellow-container {
    margin-top: 51px;
    background-color: #fffbe5;
    padding: 23px 16px 24px;
    position: relative;
    margin-bottom: 33px;

    &::before {
        content: "";
        position: absolute;
        top: -25px;
        left: -20px;
        width: 110px;
        height: 65px;
        background: url(../img/home/yellow-tape.svg) no-repeat center / contain;
        /* background: #ffea76; */
        /* opacity: 0.7; */
        transform: matrix(0.97, -0.26, 0.26, 0.97, 0, 0);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        right: -18px;
        width: 110px;
        height: 65px;
        background: url(../img/home/blue-tape.svg) no-repeat center / contain;
        /* background: #ffea76; */
        /* opacity: 0.7; */
        transform: matrix(0.97, -0.23, 0.23, 0.97, 0, 0);
    }

    @media screen and (min-width: 768px) {
        padding: 32px;
        width: 740px;
        margin: auto;
        margin-top: 51px;

        margin-bottom: 33px;

        &::before {
            width: 100px;
            height: 60px;
            top: -25px;
            left: -25px;
        }

        &::after {
            width: 100px;
            height: 60px;
            bottom: -10px;
        }
    }
}

.sec10-yellow-container-title {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 130%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #005ba7;
    padding-bottom: 24px;
}

.sec10-step-container {
}

.sec10-step-content {
    padding-bottom: 24px;

    &:last-child {
        padding-bottom: 0;
    }
}

.step-img {
    padding-bottom: 8px;
    width: 100%;

    @media screen and (min-width: 768px) {
        width: 295px;
        display: flex;
        margin: auto;
    }
}

.sec10-step-content-title {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #e73d41;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    padding-bottom: 8px;

    @media screen and (min-width: 768px) {
        font-size: 20px;
    }
}

.sec10-step-content-desc {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #000000;

    & a {
        text-decoration-line: underline;
        color: #005ba7;
        transition: 0.3s opacity;

        &:hover {
            opacity: 0.6;
        }
    }

    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

.sec10-mini-note {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 170%;
    letter-spacing: 0.05em;
    color: #5d5d5d;
}

.sec10-blue-title {
    font-family: "Zen Maru Gothic";
    font-style: normal;
    font-weight: 700;
    font-size: 21px;
    line-height: 130%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #005ba7;
    display: flex;
    margin: auto;
}

/* --------------------------------------------------------------- */
/* BANNER VIDEO */
/* --------------------------------------------------------------- */

.banner-video {
    display: flex;
    justify-content: center;
    padding: 0 !important;
    padding-bottom: 10px !important;

    @media screen and (min-width: 768px) {
        padding: 0 !important;
        padding-bottom: 0;
        cursor: pointer;
        transition: 0.3s opacity;

        &:hover {
            opacity: 0.6;
        }
    }
}