@charset "utf-8";

/* 共通項 */


main {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 960px;
    box-shadow: 0 0 8px lightgray;
    z-index: 0;
    container: ws-main / inline-size;
}

@container ws-main ( min-width: 0px ) {
    h2 {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    section.contents {
        margin: 0 auto;
        padding: 2.0cqw;
        width: 94%;
        background: var(--bg-color-white);
    }
    section.contents p {
        margin: 1.0em auto;
        width: 90%;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        line-height: 1.5;
    }
    section.contents p.small {
        font-size: clamp( 12px, 2.0cqw, 20px );
    }
    section.contents p.nowrap {
        white-space: nowrap;
    }
    section.contents.bg-black {
        margin: 6.0cqw auto 0;
        padding: 4.0cqw;
        background: #000;
    }
    section.contents.bg-red {
        margin: 4.0cqw auto;
        padding: 3.0cqw;
        background: #7c0000;
    }
    section.contents.bg-wave {
        margin: 4.0cqw auto;
        padding: 3.0cqw;
        width: 100%;
        background-image: url(../images/09_01.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    section + h2 {
        margin-top: 2.0cqw;
    }
    .about-box {
        position: relative;
        margin: 0 auto;
        padding: 14.0cqw 3.0cqw 3.0cqw;
        width: 100%;
        background: #fff;
    }
    .contents .about-box p {
        width: 100%;
    }
    .about-box + .about-box {
        margin-top: 6.0cqw;
    }
    .about-box .about-balloon {
        position: absolute;
        margin: 0;
        padding: 0;
        top: -4%;
        left: 50%;
        width: 50%;
        max-width: 408px;
        filter: drop-shadow( 0 4px 8px #0004 );
        transform: translateX( -50% );
    }
    .about-box p {
        margin: 0;
        width: 100%;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        line-height: 1.5;
    }
    section.flow {
        margin: 0 auto;
        padding: 4.0cqw 0;
        width: 90%;
    }
    .flow-head {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    .flow-arrow {
        margin: 4.0cqw auto;
        padding: 0;
        width: 100%;
        max-width: 104px;
    }
    section.flow p {
        margin: 1.0em 0;
        width: 100%;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        line-height: 1.5;
    }
    section.flow p a {
        color: #00c;
        text-decoration: underline;
    }
    section.flow ul {
        margin: 1.0em 0 1.0em 0;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        font-weight: 700;
    }
    section.flow ul li {
        margin: 0.2em 0;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
    }
    section.flow .flow-grid {
        margin: 2.0cqw 0;
        padding: 0;
        width: 100%;
        font-size: clamp( 14px, 2.4cqw, 24px );
        display: grid;
        grid-template-columns: 3.5em 1.5em 1fr;
    }
    section.flow .flow-grid > div {
        margin: 0;
        padding: 0.1em 0;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }
    section.flow .flow-grid > div:nth-child(2),
    section.flow .flow-grid > div:nth-child(5),
    section.flow .flow-grid > div:nth-child(8) {
        text-align: center;
    }
    .check-wrap {
        margin: 4.0cqw auto 0;
        padding: 0.5cqw;
        width: 100%;
        background-image: linear-gradient(to bottom, rgba(175, 137, 32, 1), rgba(255, 237, 188, 1) 50%, rgba(175, 137, 32, 1));
    }
    .check-wrap + .check-wrap {
        margin-top: 12.0cqw;
    }
    .check-box {
        position: relative;
        margin: 0;
        padding: 8.0cqw 2.0cqw 3.0cqw 3.0cqw;
        background: #fffdf5;
    }
    .check-box .check-head {
        position: absolute;
        top: -0.25cqw;
        left: 50%;
        transform: translate( -50%, -50% );
    }
    .check-box .check-head img {
        width: auto;
        max-width: none;
        height: 40px;
    }
    .check-box p {
        margin: 2.0cqw 0 0 1.0em;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.0cqw, 20px );
        text-indent: -1.0em;
    }
    .check-box ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .check-box ul li {
        position: relative;
        margin: 1.0cqw 0 1.0cqw calc( clamp( 14px, 2.4cqw, 24px ) * 2.4 );
        list-style: none;
        color: var(--fg-color);
        font-family: var(--font-mincho);
        font-size: clamp( 14px, 2.4cqw, 24px );
        font-weight: 700;
    }
    .check-box ul li::before {
        position: absolute;
        content: "";
        right: 102%;
        top: 10%;
        width: calc( clamp( 14px, 2.4cqw, 24px ) * 1.4 );
        aspect-ratio: 1 / 1;
        background-image: url(../images/04_check.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .check-box ul li.red {
        color: #7b0000;
    }
    .voice-box {
        margin: 0 auto;
        padding: 3.0cqw;
        width: 100%;
        background: #fff;
    }
    .voice-box + .voice-box {
        margin-top: 4.0cqw;
    }
    .voice-box .voice-pic {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    .voice-box .movie {
        margin: 2.0rem auto;
        padding: 0;
        width: 100%;
    }
    .voice-box .movie video {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .voice-box .voice-q {
        position: relative;
        margin: 2.0rem auto 1.0rem;
        padding: 0 1.0em 0 3.5em;
        width: 100%;
        min-height: 3.0em;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        font-weight: 600;
        line-height: 1.5;
        display: flex;
        align-items: center;
    }
    .voice-box .voice-q::before {
        position: absolute;
        content: "";
        left: 0.5em;
        top: 0.5em;
        width: calc( clamp( 14px, 2.4cqw, 24px ) * 2.0 );
        aspect-ratio: 1 / 1;
        font-size: clamp( 14px, 2.4cqw, 24px );
        background-image: url(../images/05_q.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .voice-box .voice-a {
        position: relative;
        margin: 1.0rem auto;
        padding: 0.5em 1.0em 0.5em 3.5em;
        width: 100%;
        min-height: 3.0em;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        font-weight: 500;
        line-height: 1.5;
        background: #f5f5f5;
    }
    .voice-box .voice-a::before {
        position: absolute;
        content: "";
        left: 0.5em;
        top: 1.0em;
        width: calc( clamp( 14px, 2.4cqw, 24px ) * 2.0 );
        aspect-ratio: 1 / 1;
        font-size: clamp( 14px, 2.4cqw, 24px );
        background-image: url(../images/05_a.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    main .cta {
        margin: 4.0cqw auto;
    }
    .teacher-box {
        margin: 0 auto;
        padding: 3.0cqw;
        width: 100%;
        background: #fff;
    }
    .recommend-box {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        background: #fff;
    }
    .recommend-pic {
        margin: 0 auto 4.0cqw;
    }
    .merit-wrap {
        margin: 4.0cqw auto;
        padding: 4.0cqw;
        width: 100%;
        background: linear-gradient( to right, #e8e4db 0%, #fffcf5 50%, #e8e4db 100% );
    }
    .merit-box1,
    .merit-box2 {
        margin: 0;
        padding: 3.0cqw;
        width: 100%;
        background: #fff;
    }
    .merit-box1 ul,
    .merit-box2 ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .merit-box1 ul li,
    .merit-box2 ul li {
        position: relative;
        margin: 0;
        padding: 1.0cqw 0 1.0cqw calc( clamp( 14px, 2.4cqw, 24px ) * 2.4 );
        list-style: none;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        font-weight: 700;
    }
    .merit-box1 ul li + li,
    .merit-box2 ul li + li {
        border-top: 1px solid #ccc;
    }
    .merit-box1 ul li::before {
        position: absolute;
        content: "";
        left: 0;
        top: calc( clamp( 14px, 2.4cqw, 24px ) * 0.8 );
        width: calc( clamp( 14px, 2.4cqw, 24px ) * 1.4 );
        aspect-ratio: 1 / 1;
        background-image: url(../images/08_check01.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .merit-box2 ul li::before {
        position: absolute;
        content: "";
        left: 0;
        top: calc( clamp( 14px, 2.4cqw, 24px ) * 0.8 );
        width: calc( clamp( 14px, 2.4cqw, 24px ) * 1.4 );
        aspect-ratio: 1 / 1;
        background-image: url(../images/08_check02.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .faq-box {
        margin: 0 auto;
        padding: 0 3.0cqw;
        width: 100%;
        background: #fff;
    }
    .faq-box + .faq-box {
        margin-top: 4.0cqw;
    }
    .faq-box .faq-q {
        position: relative;
        margin: 2.0rem auto 1.0rem;
        padding: 0 1.0em 0 3.5em;
        width: 100%;
        min-height: 3.0em;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        font-weight: 600;
        line-height: 1.5;
        display: flex;
        align-items: center;
    }
    .faq-box .faq-q::before {
        position: absolute;
        content: "";
        left: 0.5em;
        top: 0.5em;
        width: calc( clamp( 14px, 2.4cqw, 24px ) * 2.0 );
        aspect-ratio: 1 / 1;
        font-size: clamp( 14px, 2.4cqw, 24px );
        background-image: url(../images/10_q.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .faq-box .faq-a {
        position: relative;
        margin: 1.0rem auto;
        padding: 0.5em 1.0em 0.5em 3.5em;
        width: 100%;
        min-height: 3.0em;
        color: var(--fg-color);
        font-size: clamp( 14px, 2.4cqw, 24px );
        font-weight: 500;
        line-height: 1.5;
        background: #f5f5f5;
    }
    .faq-box .faq-a::before {
        position: absolute;
        content: "";
        left: 0.5em;
        top: 1.0em;
        width: calc( clamp( 14px, 2.4cqw, 24px ) * 2.0 );
        aspect-ratio: 1 / 1;
        font-size: clamp( 14px, 2.4cqw, 24px );
        background-image: url(../images/10_a.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .final-message1 {
        margin: 3.0cqw 0;
        padding: 0;
        width: 100%;
        font-family: var(--font-mincho);
        font-size: 3.6cqw;
        font-weight: 700;
        text-align: center;
    }
    .final-message2 {
        margin: 3.0cqw 0 0;
        padding: 0;
        width: 100%;
        color: #b10000;
        font-family: var(--font-mincho);
        font-size: 5.2cqw;
        font-weight: 700;
        text-align: center;
    }
}

@container ws-main ( min-width: 768px ) {
    section.contents {
        padding: 2.0cqw;
    }
    section.contents .pic {
        margin-top: 2.0cqw;
    }
    section.contents .pic img {
        display: block;
        width: 100%;
        height: auto;
    }
    section.contents p {
        font-size: clamp( 16px, 2.4cqw, 24px );
    }
    section.contents.bg-black {
        margin: 4.0cqw auto 0;
        padding: 3.0cqw;
        background: #000;
    }
    .about-box {
        padding: 16.0cqw 5.0cqw 5.0cqw;
    }
    .about-box + .about-box {
        margin-top: 4.0cqw;
    }
    .about-box .about-balloon {
        width: 40%;
    }
    section.flow {
        width: 85%;
    }
    section.flow p {
        font-size: clamp( 16px, 2.4cqw, 24px );
    }
    section.flow ul {
        margin: 1.0em 0 1.0em 1.0em;
        color: var(--fg-color);
        font-size: clamp( 16px, 2.4cqw, 24px );
        font-weight: 700;
    }
    section.flow ul li {
        margin: 0.2em 0;
        color: var(--fg-color);
        font-size: clamp( 16px, 2.4cqw, 24px );
    }
    section.flow .flow-grid {
        grid-template-columns: 4.5em 1.5em 1fr;
    }
    section.flow .flow-grid > div {
        font-size: clamp( 16px, 2.4cqw, 24px );
    }
    .check-wrap + .check-wrap {
        margin-top: 8.0cqw;
    }
    .check-box {
        padding: 8.0cqw 2.0cqw 4.0cqw 4.0cqw;
    }
    .check-box .check-head img {
        width: auto;
        max-width: none;
        height: 60px;
    }
    .check-box ul li {
        font-size: clamp( 16px, 2.4cqw, 24px );
    }
    .voice-box {
        padding: 4.0cqw;
    }
    .voice-box .voice-q {
        font-size: clamp( 16px, 2.4cqw, 24px );
    }
    .voice-box .voice-a {
        font-size: clamp( 16px, 2.4cqw, 24px );
    }
    .teacher-box {
        padding: 4.0cqw;
    }
    .recommend-box {
        padding: 4.0cqw;
    }
    .merit-wrap {
        width: 90%;
    }
    .merit-box1,
    .merit-box2 {
        padding: 2.0cqw;
    }
    .faq-box {
        padding: 0 4.0cqw;
    }
    .final-message1 {
        font-size: 3.0cqw;
    }
    .final-message2 {
        font-size: 4.4cqw;
    }
}


footer {
    margin: 0 auto;
    padding: 0 0 clamp( 20px, 2.0vw, 24px );
    width: 100%;
    max-width: 1200px;
    background: #000;
    text-align: center;
}

footer .links {
    margin: 1.0em auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .links a {
    color: #fff;
    font-size: clamp( 12px, 1.2vw, 14px );
    text-align: center;
}

footer .copyright {
    margin: 0 auto;
    width: 100%;
    color: #fff;
    font-size: clamp( 12px, 1.2vw, 14px );
    text-align: center;
}