@charset "utf-8";

    body {
        font-size: clamp(14px, 10.5217px + 1.087vw, 24px);
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 500;
    }

    .clearfix {
        display: block;
    }

    .sp {
        display: none;
    }

    #wrapper {
        max-width: 750px;
        width: 100%;
        margin: 0 auto;
    }

    /* cta */
    .cta {
        background-color: #3fc0ea;
        padding: 1em 0;
    }

    .cta01 {
        margin: 0 0 1em;
    }

    .cta02 {
        margin: 0 0 2em;
    }

    .cta01 img,
    .cta02 img,
    .cta_btn img {
        margin: 0 auto;
    }

    .bound {
        animation: bound 3s infinite;
    }

    @keyframes bound {
        0% {
            transform: translateY(0)
        }

        5% {
            transform: translateY(0)
        }

        10% {
            transform: translateY(0)
        }

        20% {
            transform: translateY(-25px)
        }

        25% {
            transform: translateY(0)
        }

        30% {
            transform: translateY(-15px)
        }

        50% {
            transform: translateY(0)
        }

        100% {
            transform: translateY(0)
        }
    }

    .cta_title {
        margin: 0;
    }

    /* box01 */
    #box01 h2 {
        margin: 0 auto;
    }

    #box01_01 h3 {
        background-color: #1f57a3;
        text-align: center;
        color: #fff;
        margin: 0;
        font-size: clamp(25px, 16.3043px + 2.7174vw, 50px);
    }

    #box01_01 div {
        background-color: #ecf2f9;
        padding: 1.5em;
        background-image: url(../images/box01_01_icon.png);
        background-position: calc(100% - 20px) calc(100% - 20px);
        background-repeat: no-repeat;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
        font-weight: bold;
    }

    #box01_02 h3 {
        background-color: #529a2b;
        text-align: center;
        color: #fff;
        margin: 0;
        font-size: clamp(25px, 16.3043px + 2.7174vw, 50px);
    }

    #box01_02 div {
        background-color: #f1f9ec;
        padding: 1.5em;
        background-image: url(../images/box01_02_icon.png);
        background-position: calc(100% - 20px) calc(100% - 20px);
        background-repeat: no-repeat;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
        font-weight: bold;
    }

    #box01_03 h3 {
        background-color: #a31f1f;
        text-align: center;
        color: #fff;
        margin: 0;
        font-size: clamp(25px, 16.3043px + 2.7174vw, 50px);
    }

    #box01_03 div {
        background-color: #f9ecec;
        padding: 1.5em;
        background-image: url(../images/box01_03_icon.png);
        background-position: calc(100% - 20px) calc(100% - 20px);
        background-repeat: no-repeat;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
        font-weight: bold;
    }

    #box01_01 div ul li input[type="checkbox"],
    #box01_02 div ul li input[type="checkbox"],
    #box01_03 div ul li input[type="checkbox"] {
        width: 25px;
        height: 25px;
        border: #000 2px solid;
    }

    #box01_01 div ul li,
    #box01_02 div ul li,
    #box01_03 div ul li {
        margin: 0 0 .3em;
    }

    /* box02 */
    #box02 {
        background-color: #d6e0e4;
        padding: 0 0 3em;
    }

    #box02 h2 {
        margin: 0 0 1.5em;
    }

    #box02 article {
        margin: 0 0 3em;
        padding: 0 1.5em;
    }

    #box02 article:last-of-type {
        margin: 0;
    }

    #box02 article figure {
        margin: 0 0 1em;
    }

    #box02 article h3 {
        color: #4a99c6;
        font-size: clamp(24px, 15.6522px + 2.6087vw, 48px);
        margin: 0;
    }

    #box02 article p {
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
    }

    #box02 article p span {
        color: #fb5692;
    }

    /* box03 */
    #box03 {
        background-color: #e2f6fd;
        padding: 0 0 2em;
    }

    #box03 h2 {
        margin: 0;
    }

    #box03 h3 {
        background-color: #3fc0ea;
        text-align: center;
        color: #fff;
        font-size: clamp(23px, 15.6522px + 2.6087vw, 46px);
        padding: .5em 0;
        margin: 0 0 1em;
    }

    #box03 h3 strong {
        font-size: 1.1em;
    }

    #box03 article {
        padding: 0 1.5em;
        margin: 0 0 1em;
        display: flex;
        justify-content: space-between;
    }

    #box03 article figure {
        width: 40%;
    }

    #box03 article div {
        width: 56%;
    }

    #box03 article div h4 {
        font-size: clamp(18px, 11.7391px + 1.9565vw, 36px);
        color: #3fc0ea;
        margin: 0 0 .5em;
    }

    #box03 article div h5 {
        margin: 0 0 .8em;
    }

    #box03 article div h5 span {
        background-color: #fff;
        padding: .2em 1em;
        color: #3fc0ea;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
    }

    #box03 article div p span.min {
        font-size: .8em;
    }

    /* box04 */
    #box04 {
        background-image: url(../images/box04_bg.png);
        background-repeat: no-repeat;
        background-position: right top;
        padding: 2em 1.5em 0;
        display: flex;
        justify-content: space-between;
    }

    #box04_left {
        width: 40%;
    }

    #box04_left figure {
        margin: 0 0 .5em;
    }

    #box04_left p {
        font-size: clamp(10px, 7.2174px + 0.8696vw, 18px);
    }

    #box04_right {
        width: 56%;
    }

    #box04_right h2 {
        color: #3fc0ea;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
    }

    /* box05 */
    #box05 {
        background-color: #f5e2db;
        padding: 2em 1.5em;
    }

    #box05 h2 {
        text-align: center;
        margin: 0 0 .5em;
        font-size: clamp(25px, 16.3043px + 2.7174vw, 50px);
        color: #886565;
    }

    #box05 h2 span {
        font-size: 1.3em;
    }

    #box05 figure {
        margin: 0 0 1em;
    }

    #box05 p {
        margin: 0 0 2em;
    }

    /* box06 */
    #box06 {
        background-image: url(../images/box06_bg.png);
        padding: 2em 1.5em;
    }

    #box06 h2 {
        text-align: center;
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
    }

    #box06 h2 span {
        display: block;
        font-size: .4em;
    }

    #box06 article {
        margin: 0 0 .5em;
    }

    /* box07 */
    #box07 {
        border: #b09faa 30px solid;
        padding: 1.5em;
    }

    #box07 h2 {
        font-size: clamp(24px, 15.6522px + 2.6087vw, 48px);
        color: #b09faa;
        text-align: center;
    }

    #box07 figure {
        margin: 0 0 1em;
    }

    #box07 p {
        margin: 0 0 2em;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
    }

    #box07 p span.blue {
        color: #387bc7;
    }

    #box07 p span.pink,
    #box07 p strong.pink {
        color: #fb5692;
    }

    #box07 h3 {
        border-bottom: #000 2px solid;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
        padding: 0 0 .3em;
    }

    #box07 ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2%;
    }

    #box07 ul li {
        width: 48%;
        text-align: center;
        background-color: #000;
        border-radius: 999px;
        margin: 0 0 .5em;
        color: #fff;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
        padding: .1em 0 .2em;
    }

    #box07 ul li:nth-child(3) {
        width: 100%;
    }

    /* box08 */
    #box08 {
        padding: 3em 1.5em;
    }

    #box08 h2 {
        text-align: center;
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
        color: #3fc0ea;
    }

    #box08 h2 span {
        display: block;
        font-size: .5em;
        color: #000;
    }

    #box08 article {
        margin: 0 0 2em;
    }

    .q {
        background-color: #3fc0ea;
        color: #fff;
        padding: .5em;
        display: flex;
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
    }

    .q i {
        padding: 0 .5em 0 0;
        width: 10%;
        box-sizing: border-box;
    }

    .a {
        padding: 1em .5em;
        display: flex;
    }

    .a i {
        padding: 0 .5em 0 0;
        width: 10%;
        box-sizing: border-box;
    }

    .a p {
        width: 90%;
    }

    /* footer */
    footer {
        border-top: 2px solid #cccccc;
        padding: 2em 0 5em;
        text-align: center;
    }

    footer a {
        color: #000;
    }

    #footer_btn {
        position: fixed;
        left: 50%;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, 0);
        max-width: 750px;
        width: 100%;
        padding: .5em 0;
        	display: flex;
	justify-content: center;
    }

    /*スマホ
------------------------------*/

    @media screen and (max-width: 750px) {
        .pc {
            display: none;
        }

        .sp {
            display: block;
        }

        .cta01 {
            margin: 0 1.5em 1em;
        }

        .cta02 {
            margin: 0 1.5em 2em;
        }

        #box01_01 div ul li input[type="checkbox"],
        #box01_02 div ul li input[type="checkbox"],
        #box01_03 div ul li input[type="checkbox"] {
            width: 15px;
            height: 15px;
            border: #000 2px solid;
        }

        #box01_01 div,
        #box01_02 div,
        #box01_03 div {
            background-size: 20%;
        }

        #box03 h3 {
            background-color: #3fc0ea;
            text-align: center;
            color: #fff;
            font-size: 22px;
            padding: .5em 0;
            margin: 0 0 1em;
        }

        #box03 article div p {
            line-height: 1.4;
        }

        #box05 h2 {
            font-size: 22px;
        }

        #box07 {
            border: #b09faa 15px solid;
        }

        #box07 h3 {
            border-bottom: #000 1px solid;
            margin: 0 0 1em;
        }
    }