@charset "utf-8";



    .clearfix {

        display: block;

    }



    .sp {

        display: none;

    }



    body {

        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);

        font-family: "Noto Sans JP", serif;

        font-feature-settings: "palt";

        letter-spacing: 2px;

        color: #000;

        font-weight: 400;

    }



    /* header */

    header {

        width: 90%;

        margin: 0 auto;

        max-width: 1080px;

        padding: 1em 0;

    }



    /* fv */

    #fv {

        width: 100%;

        max-width: 2000px;

        background-image: url(../images/fv_bg.webp);

        background-position: center;

        height: 750px;

        margin: 0 auto;

    }



    #fv_wrapper {

        width: 100%;

        max-width: 1080px;

        margin: 0 auto;

        padding: 500px 0 0;

    }



    /* box01 */

    #box01 {

        width: 100%;

        padding: 5% 0;

        background-color: #f4f5f7;

    }



    #box01 h2,

    #box04 h2,

    #box08 h2,

    #box08_bottom h3,

    #faq h2,

    #box07 h2 {

        text-align: center;

        color: #0071bc;

        font-size: clamp(24px, 19.8261px + 1.3043vw, 36px);

        margin: 0 0 3%;

    }



    #box01_top {

        width: 90%;

        max-width: 1080px;

        margin: 0 auto 3%;

        display: -webkit-flex;

        display: flex;

        -webkit-flex-wrap: wrap;

        flex-wrap: wrap;

        -webkit-justify-content: center;

        justify-content: center;

        gap: 5%;

    }



    #box01_top article {

        margin: 0 0 4%;

        text-align: center;

    }



    #box01_top article figure {

        margin: 0 0 3%;

    }



    #box01_top article p {

        color: #0071bc;

    }



    #box01_bottom {

        width: 90%;

        max-width: 1080px;

        margin: 0 auto;

        background-color: #fff;

        padding: 3%;

        box-sizing: border-box;

        text-align: center;

        font-size: clamp(18px, 13.8261px + 1.3043vw, 30px);

    }



    /* box02 */

    #box02 {

        padding: 5% 0;

        background-image: url(../images/box02_bg.webp);

        background-position: center;

        background-size: cover;

        width: 100%;

        margin: 0 auto 5%;

    }



    #box02 h2 {

        text-align: center;

        margin: 0 0 3%;

        color: #fff;

        font-size: clamp(24px, 19.8261px + 1.3043vw, 36px);

    }



    #box02 div {

        max-width: 1080px;

        width: 90%;

        margin: 0 auto 2%;

        position: relative;

    }



    #box02 div li {

        margin: 0 0 .5em;

        font-weight: 700;

    }



    #box02 div li span {

        background-color: #fff;

        padding: .5em 1em;

        box-sizing: border-box;

        display: inline-block;

    }



    #box02 div p {

        position: absolute;

        left: 51.8%;

        top: 34%;

    }



    #box02 h3 {

        text-align: center;

        color: #fff;

        font-size: clamp(18px, 13.8261px + 1.3043vw, 30px);

    }



    /* box03 */

    #box03 {

        background-image: url(../images/box03_bg.webp);

        width: 1036px;

        margin: 0 auto 5%;

        background-repeat: no-repeat;

        background-position: top center;

        text-align: center;

    }



    #box03 h2,

    #box03 p {

        margin: 0 0 1em;

    }



    /* box04 */

    #box04 {

        background-color: #f4f5f7;

        padding: 5% 0;

    }



    #box04>h3 {

        background-color: #f36565;

        color: #fff;

        border-radius: 999px;

        width: 400px;

        margin: 0 auto 2%;

        text-align: center;

        font-size: clamp(18px, 13.8261px + 1.3043vw, 30px);

        line-height: 70px;

    }



    #box04_top {

        width: 90%;

        margin: 0 auto 5%;

        max-width: 1080px;

        display: -webkit-flex;

        display: flex;

        -webkit-justify-content: space-between;

        justify-content: space-between;

    }



    #box04_top article {

        text-align: center;

    }



    #box04_top article figure {

        margin: 0 0 3%;

    }



    #box04_top article p {

        font-weight: 700;

    }



    .box04_bottom {

        display: flex;

        align-items: center;

        width: 90%;

        max-width: 1080px;

        margin: 0 auto 5%;

        position: relative;

    }



    .box04_bottom.row--reverse {

        flex-direction: row-reverse;

    }



    .box04_bottom figure {

        width: 55%;

        margin: 0;

        z-index: 1;

    }



    .box04_bottom .box_content {

        background-color: #fff;

        width: 60%;

        height: 300px;

        z-index: 10;

        display: flex;

        flex-direction: column;

        justify-content: center;

        padding: 2em;

        box-sizing: border-box;

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    }



    /* ★ 画像にかぶせるマージンの切り替え */

    .box04_bottom:not(.row--reverse) .box_content {

        margin-left: -5%;

    }



    .box04_bottom.row--reverse .box_content {

        margin-right: -5%;

    }



    .box_content h4 {

        margin: 0 0 3%;

        font-size: clamp(18px, 13.8261px + 1.3043vw, 30px);

        color: #0071bc;

    }



    #box04>p {

        text-align: center;

    }



    /* box08_top */

    #box08_top {

        width: 100%;

        margin: 0 auto;

        background-image: url(../images/box08_bg.webp);

        padding: 3% 0;

        color: #fff;

        font-size: clamp(36px, 29.0435px + 2.1739vw, 56px);

        text-align: center;

        font-weight: 700;

        background-size: cover;

    }



    #box08_top span {

        font-size: 1.3em;

    }



    #box08 {

        padding: 5% 0;

    }



    #box08_main {

        width: 90%;

        max-width: 1100px;

        margin: 0 auto 5%;

        display: -webkit-flex;

        display: flex;

        -webkit-justify-content: space-between;

        justify-content: space-between;

    }



    #box08_main article {

        width: 31%;

    }



    #box08_main article figure {

        margin: 0 0 5%;

    }



    #box08_bottom {

        width: 90%;

        max-width: 1080px;

        margin: 0 auto;

        border: #e6eeff 5px solid;

        border-radius: 30px;

        padding: 4%;

        box-sizing: border-box;

    }



    #box08_bottom>p {

        text-align: center;

        margin: 0 0 5%;

    }



    #box08_bottom div {

        display: -webkit-flex;

        display: flex;

        -webkit-justify-content: space-between;

        justify-content: space-between;

    }



    #box08_bottom div article {

        width: 47%;

    }



    #box08_bottom div article h4 {

        font-weight: 400;

        color: #0071bc;

        margin: 0 0 5%;

        text-align: center;

    }



    #box08_bottom div article figure {

        margin: 0 0 5%;

        text-align: center;

    }



    /* box05 */

    #box05 {

        width: 100%;

        background-image: url(../images/box05_bg.webp);

        background-size: cover;

        padding: 5% 0;

    }



    #box05 h2 {

        color: #fff;

        text-align: center;

        font-size: clamp(24px, 19.8261px + 1.3043vw, 36px);

        margin: 0 0 3%;

    }



    #box05 div {

        width: 90%;

        max-width: 1080px;

        margin: 0 auto;

        display: -webkit-flex;

        display: flex;

        -webkit-flex-wrap: wrap;

        flex-wrap: wrap;

        -webkit-justify-content: space-between;

        justify-content: space-between;

    }



    #box05 div article {

        width: 48%;

        background-color: #fff;

        margin: 0 0 5%;

        position: relative;

        padding: 4% 3% 3%;

        box-sizing: border-box;

    }



    #box05 div article:nth-child(1) {

        background-image: url(../images/box05_icon01.webp);

        background-repeat: no-repeat;

        background-position: right bottom;

    }



    #box05 div article:nth-child(2) {

        background-image: url(../images/box05_icon02.webp);

        background-repeat: no-repeat;

        background-position: right bottom;

    }



    #box05 div article:nth-child(3) {

        background-image: url(../images/box05_icon03.webp);

        background-repeat: no-repeat;

        background-position: right bottom;

    }



    #box05 div article:nth-child(4) {

        background-image: url(../images/box05_icon04.webp);

        background-repeat: no-repeat;

        background-position: right bottom;

    }



    #box05 div article p {

        font-size: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);

        text-shadow: 0 0 2px rgba(255, 255, 255, 1);

    }



    #box05 div article h3 {

        background-color: #0071bc;

        color: #fff;

        padding: 0 1em;

        display: inline-block;

        position: absolute;

        left: 5%;

        top: -5%;

        transform: skewX(-20deg);

    }



    #box05 div article h3 span {

        display: inline-block;

        transform: skewX(20deg);

        /* ←テキストだけ元に戻す！ */

        color: #fff;

    }



    #box05 div article h3.woman {

        background-color: #f36565;

    }



    /* faq */

    #faq {

        width: 90%;

        max-width: 1080px;

        margin: 0 auto;

        padding: 5%;

    }



    .qa {

        margin: 0 0 2%;

    }



    .qa h3 i,

    .answer i {

        font-family: "Century Gothic", sans-serif;

        font-style: normal;

        margin-right: 0.5em;

    }



    /* h3 全体のスタイル */

    .qa h3 {

        position: relative;

        padding-right: 2em;

        cursor: pointer;

        background-color: #0071bc;

        color: #fff;

        padding: 1em;

    }



    .qa h3 .icon {

        position: absolute;

        right: 2%;

        top: 50%;

        transform: translateY(-50%);

        width: 24px;

        height: 24px;

        cursor: pointer;

    }



    /* プラス記号：縦棒 */

    .qa h3 .icon::before {

        content: "";

        position: absolute;

        background-color: #fff;

        left: 50%;

        top: 0;

        transform: translateX(-50%);

        width: 3px;

        /* 棒の太さ */

        height: 100%;

        border-radius: 1px;

    }



    /* プラス記号：横棒 */

    .qa h3 .icon::after {

        content: "";

        position: absolute;

        background-color: #fff;

        top: 50%;

        left: 0;

        transform: translateY(-50%);

        height: 3px;

        /* 棒の太さ */

        width: 100%;

        border-radius: 1px;

    }



    .qa.open h3 .icon::before {

        display: none;

    }



    .qa .answer {

        display: none;

        padding: 1em;

    }



    .qa.open .answer {

        display: block;

    }



    /* box06 */

    #box06_title {

        background-color: #0071bc;

        text-align: center;

        color: #fff;

        padding: 1% 0;

        font-size: clamp(1.875rem, 1.4837rem + 1.9565vw, 3rem);

    }



    #box06 {

        background-color: #f5f6fa;

        padding: 5% 0;

    }



    #box06 div {

        width: 90%;

        max-width: 1080px;

        text-align: center;

        margin: 0 auto;

    }



    #box06 div figure {

        margin: 0 0 5%;

    }



    /* box07 */

    #box07 {

        padding: 5% 0;

    }



    #box07>div {

        width: 90%;

        max-width: 1080px;

        margin: 0 auto 5%;

        display: -webkit-flex;

        display: flex;

        -webkit-justify-content: space-between;

        justify-content: space-between;

    }



    #box07 div article div {

        background-color: #e7eaef;

        padding: 8% 0;

        text-align: center;

    }



    #box07 div article div p {

        display: flex;

        align-items: center;

        -webkit-justify-content: center;

        justify-content: center;

        height: 80px;

        width: 100%;

        margin: 0 0 8%;

    }



    #box07_btn {

        text-align: center;

    }



    /* footer */

    footer {

        text-align: center;

        padding: 0 0 5%;

        font-size: clamp(12px, 9.913px + 0.6522vw, 18px);

    }



    footer a {

        color: #000;

        text-decoration: none;

    }



    footer p {

        line-height: 3;

    }



    /*スマホ

------------------------------*/



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

        .pc {

            display: none;

        }



        .sp {

            display: block;

        }



        /* header */

        header {

            padding: .5em 0;

            text-align: center;

        }



        header img {

            width: 40%;

        }



        /* fv */

        #fv {

            background-image: none;

            height: auto;

        }



        #fv_wrapper {

            padding: 0;

            position: relative;

        }



        #fv_wrapper a {

            width: 90%;

            display: block;

            margin: 0 auto;

            position: absolute;

            bottom: 5%;

            left: 5%;

        }



        #box01 h2,

        #box04 h2,

        #box08 h2,

        #box08_bottom h3,

        #faq h2,

        #box07 h2 {

            margin: 0 0 5%;

        }



        /* box01 */

        #box01 {

            width: 100%;

            padding: 8% 0;

            background-color: #f4f5f7;

        }



        #box01_top article {

            width: 47%;

        }



        #box01_bottom {

            padding: 5%;

        }



        /* box02 */

        #box02 {

            padding: 5% 0 8%;

        }



        #box02 div p {

            position: static;

            display: none;

        }



        #box02 div li span {

            padding: .5em 1em;

            display: block;

            font-size: 15px;

        }



        /* box03 */

        #box03 {

            background-image: url(../images/box03_bg.webp);

            width: 100%;

            margin: 0 auto 5%;

            background-size: cover;

        }



        #box03 div {

            width: 90%;

            margin: 0 auto;

        }



        /* box04 */

        #box04 {

            padding: 5% 5% 8%;

        }



        #box04>h3 {

            width: 80%;

            margin: 0 auto 8%;

            line-height: 50px;

        }



        #box04_top {

            -webkit-flex-direction: column;

            flex-direction: column;

            width: 100%;

        }



        #box04_top article {

            text-align: left;

            display: -webkit-flex;

            display: flex;

            -webkit-align-items: center;

            align-items: center;

            margin: 0 0 5%;

        }



        #box04_top article figure {

            margin: 0;

            width: 30%;

        }



        #box04_top article p {

            width: 70%;

            padding: 0 0 0 1em;

            box-sizing: border-box;

        }



        .box04_bottom {

            -webkit-flex-direction: column;

            flex-direction: column;

            width: 100%;

            margin: 0 auto 8%;

        }



        .box04_bottom figure {

            width: 100%;

        }



        .box04_bottom .box_content {

            background-color: #fff;

            width: 95%;

            height: auto;

            padding: 1em;

            box-sizing: border-box;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

        }



        /* ★ 画像にかぶせるマージンの切り替え */

        .box04_bottom:not(.row--reverse) .box_content,

        .box04_bottom.row--reverse .box_content {

            margin-left: 0%;

            margin-top: -5%;

            margin-right: 0;

        }



        .box04_bottom.row--reverse {

            flex-direction: column;

        }



        /* box08_top */

        #box08_top {

            width: 100%;

            margin: 0 auto;

            padding: 5%;

            font-size: 24px;

            box-sizing: border-box;

        }



        #box08_top span {

            font-size: 1.2em;

        }



        #box08 {

            padding: 5% 5% 8%;

        }



        #box08_main {

            width: 100%;

            -webkit-flex-direction: column;

            flex-direction: column;

        }



        #box08_main article {

            width: 90%;

            margin: 0 auto 10%;

        }



        #box08_main article figure {

            margin: 0 auto 5%;

            width: 70%;

        }



        #box08_bottom {

            width: 100%;

            border: #e6eeff 3px solid;

            border-radius: 20px;

            padding: 8% 5%;

        }



        #box08_bottom>p {

            text-align: left;

            margin: 0 0 5%;

        }



        #box08_bottom div {

            -webkit-flex-direction: column;

            flex-direction: column;

        }



        #box08_bottom div article {

            width: 100%;

        }



        #box08_bottom div article:first-of-type {

            margin: 0 0 8%;

        }



        /*box05*/

        #box05 h2 {

            color: #fff;

            text-align: center;

            font-size: clamp(24px, 19.8261px + 1.3043vw, 36px);

            margin: 0 0 8%;

        }



        #box05 div {

            -webkit-flex-direction: column;

            flex-direction: column;

        }



        #box05 div article {

            width: 100%;

            margin: 0 0 8%;

            padding: 8% 5% 5%;

            background-size: 30%;

        }



        .qa h3 {

            position: relative;

            padding-right: 3em;

            cursor: pointer;

            background-color: #0071bc;

            color: #fff;

            padding-left: 2em;

            text-indent: -1.5em;

            padding-top: 1em;

            padding-bottom: 1em;

        }



        .qa .answer {

            padding-left: 2em;

            text-indent: -1.5em;

            padding-top: 1em;

            padding-bottom: 1em;

            padding-right: 1em;

        }



        .qa h3 .icon {

            right: 3%;

            width: 18px;

            height: 18px;

        }



        /* box06 */

        #box06_title {

            padding: 3% 0;

            font-size: 24px;

        }



        #box07>div {

            -webkit-flex-direction: column;

            flex-direction: column;

        }



        #box07 div article div {

            display: -webkit-flex;

            display: flex;

            -webkit-align-items: center;

            align-items: center;

            padding: 0 5% 5%;

            box-sizing: border-box;

            margin: 0 0 5%;

        }



        #box07 div article div p {

            -webkit-justify-content: flex-start;

            justify-content: flex-start;

            -webkit-align-items: center;

            align-items: center;

            height: auto;

            width: 100%;

            margin: 0;

        }



        #box07 div article div figure {

            width: 30%;

        }



        #box07_btn {

            width: 90%;

            margin: 0 auto;

        }



        /* footer */

        footer {

            padding: 0 0% 5%;

            font-size: 10px;

            letter-spacing: 0;

        }

    }