@charset "utf-8";

    .clearfix {
        display: block;
    }

    .sp {
        display: none;
    }

    body {
        background-color: cornsilk;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 500;
        font-size: clamp(14px, 5.5581px + 2.3256vw, 24px);
        font-feature-settings: "palt";
        letter-spacing: 1px;
        color: #000;
    }

    body {
        background-color: aliceblue;
    }

    .red {
        color: #f22121;
    }

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

    /* box01 */
    #box01 {
        padding: 2em 0;
        background-color: #fffcd9;
    }

    #box01 h2 {
        margin: 0;
    }

    #box01 div {
        width: 90%;
        margin: 0 auto;
    }

    /* box02 */


    #box02 {
        padding: 2em 0 0;
        background-color: #f8f8f8;
    }

    #box02>h2 {
        margin: 0 0 1em;
    }

    #box02>h2 img {
        margin: 0 auto;
    }

    #box02>p {
        text-align: center;
        width: 90%;
        margin: 0 auto 2em;
    }

    #box02 article {
        margin: 0 auto 2em;
        width: 90%;
    }


    #box02 article h2 {
        margin: 0;
    }

    #box02 article div {
        border-bottom: #ccc 2px solid;
        border-left: #ccc 2px solid;
        border-right: #ccc 2px solid;
        background-color: #fff;
        padding: 1em;
        width: 100%;
        box-sizing: border-box;
    }

    #box02 article div figure {
        margin: 0 0 2em;
    }

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

    #box02 article h3 {
        font-size: clamp(15px, 9.7826px + 1.6304vw, 30px);
        text-align: center;
        color: #ffab00;
    }

    #box02 article h3 span {
        color: #000;
    }

    #box02 article div p {
        text-align: center;
        margin: 0 0 1em;
    }

    #box02_text {
        font-size: clamp(24px, 13.6522px + 2.6087vw, 48px);
        text-align: center;
        font-weight: 900;
        margin: 0 auto 2em;
        width: 90%;
    }

    #box02_text span {
        font-size: 1.2em;
        background: linear-gradient(transparent 70%, #ffeb3b 70%);
    }

    #box02_movie {
        margin: 0 auto 2em;
        width: 90%;
    }
    #box02_movie iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    
    }
    
    /* faq */
    #faq,
    #link {
        padding: 0 0 3em;
        background-color: #fff;
    }

    #faq h2,
    #link h2 {
        background-color: #ffea00;
        padding: .5em 1em;
        font-size: clamp(18px, 11.7391px + 1.9565vw, 36px);
        font-weight: 700;
        margin: 0 0 1em;
    }

    #faq {
        counter-reset: faq-number;
    }

    #faq article {
        width: 90%;
        margin: 0 auto 2em;
        counter-increment: faq-number;
    }

    #faq article h3 {
        border-bottom: #ccc 2px solid;
        padding: 0 3em 1em 0;
        margin: 0;
        cursor: pointer;
        position: relative;
    }


    .faq-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
    }


    .faq-icon::before,
    .faq-icon::after {
        content: "";
        position: absolute;
        background-color: #333;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s;

    }


    .faq-icon::before {
        width: 15px;
        height: 2px;
    }


    .faq-icon::after {
        width: 2px;
        height: 15px;
    }


    #faq article h3.open .faq-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
        opacity: 0;
    }


    #faq article div {
        padding: 1em;
        background-color: #fff8ea;
        display: none;
    }

    /* Qの表示 */
    #faq article h3::before {
        content: "Q" counter(faq-number) ". ";
        font-weight: 700;
        margin-right: .3em;
        color: #005bac;
    }

    /* Aの表示 */
    #faq article div::before {
        content: "A" counter(faq-number) ". ";
        font-weight: 700;
        /*display: block;*/
        margin-bottom: .5em;
        color: #f22121;
    }


    #faq article h3 {
        padding-left: 2.5em;
        text-indent: -2.5em;
    }

    #faq article div {
        padding: 1em;
        padding-left: 3em;
        text-indent: -2em;
    }

    /* link */
    #link ul {
        width: 90%;
        margin: 0 auto;
    }

    #link ul li {
        border-bottom: #ccc 2px solid;
        margin: 0 0 1em;
        padding: 0 0 1em;
        padding-left: 1.5em;
        text-indent: -1.5em;
    }

    #link ul li span {
        color: #f7ab00;
        padding: 0 .5em 0 0;
    }

    #link ul li a {
        color: #6ac5ff;
        text-decoration: none;
    }

    /* footer */
    footer {
        border-top: #005bac 5px solid;
        padding: 2em;
        background-color: #fff;
    }

    footer img {
        margin: 0 auto;
    }

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

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

        .sp {
            display: block;
        }

        #box02 article div {
            border-bottom: #ccc 1px solid;
            border-left: #ccc 1px solid;
            border-right: #ccc 1px solid;
            width: 100%;
        }

        #faq article h3 {
            border-bottom: #ccc 1px solid;
        }

        #link ul li {
            border-bottom: #ccc 1px solid;
        }

        footer {
            border-top: #005bac 3px solid;
            padding: 2em;
            background-color: #fff;
        }

        footer img {
            height: 45px;
        }
    }