@charset "UTF-8";
/*==================================================================

# school-page

===================================================================*/

/*========================================================
/* school-common
==========================================================*/
.sec_tit {
    background: var(--color-blue01);
    padding: 1.5em 0;
    color: #fff;
    font-family: var(--font-ja-gothic);
    font-weight: 400;
    text-align: center;
    line-height: 1.33;
    position: relative;

    &::before {
        position: absolute;
        font-family: var(--font-shippori);
        font-size: clamp(35px, calc(26.923076923076923px + 2.2435897435897436vw), 70px);
        color: rgb(255, 255, 255, 0.18);
        top: clamp(-24px, calc(-20.307692307692307px + -1.0256410256410255vw), -40px);
        left: 35%;
        transform: translateX(-50%);
    }

    @media (max-width: 767px) {
        &::before {
            left: 14%;
        }
    }

    &.support {
        &::before {
            content: "SUPPORT";
        }
    }

    &.quality {
        &::before {
            content: "Quality";
        }
    }

    &.useful {
        &::before {
            content: "Useful";
        }
    }
}

/*========================================================
/* key-contents
==========================================================*/
#school-key-contents {
    margin-top: clamp(35px, calc(26px + 2.5vw), 74px);

    >p {
        text-align: center;
        line-height: 1.33;

        @media (max-width: 767px) {
            line-height: 1.5;
        }
    }

    .top_txt {
        color: var(--color-text);
    }

    .bottom-txt {
        color: var(--color-blue01);
        margin-top: clamp(33px, calc(26.076923076923077px + 1.9230769230769231vw), 63px);
    }
}

/*========================================================
/* produce
==========================================================*/
#produce {
    width: min(100% - 2rem, 997px);
    margin-inline: auto;
    margin-top: clamp(47px, calc(33.15384615384615px + 3.8461538461538463vw), 107px);

    .school__produce {
        margin-top: 116px;
        position: relative;

        @media (max-width: 910px) {
            margin-top: 0;
        }

        .tit {
            display: block;
            width: 100%;
            background: rgba(87, 183, 195, 0.28);
            color: var(--color-blue01);
            font-family: var(--font-marugothic);
            line-height: 1.4;
            text-align: left;
            padding: 0.5em 1em 0.5em 50%;
            position: absolute;
            top: 11px;
            z-index: -1;

            @media (max-width: 1175px) {
                padding: 0.5em 1em 0.5em clamp(410px, calc(133.93939393939394px + 30.303030303030305vw), 490px);
            }

            @media (max-width: 910px) {
                position: static;
                padding: 0.5em 1em;
                text-align: left;
            }

            font {
                font-size: clamp( 14px, calc( 12.615384615384615px + 0.38461538461538464vw ), 20px );
            }
        }

        .column {
            display: flex;

            @media (max-width: 910px) {
                display: block;
            }

            figure {
                margin-left: min(7%, 97px);
                padding: 0 11px;
                background: #fff;

                @media (max-width: 910px) {
                    margin: 15px 0 0 0;
                }

                img {
                    width: min(100%, 355px);

                    &:nth-of-type(n+2) {
                        margin-top: 24px;

                        @media (max-width: 767px) {
                            margin-top: 10px;
                        }
                    }

                    @media (max-width: 910px) {
                        width: 100%;
                    }
                }
            }

            figcaption {
                width: 100%;
                font-size: clamp(13px, calc(12.538461538461538px + 0.1282051282051282vw), 15px);
                padding: 0 2em;
                color: var(--color-text);
                margin-top: clamp(98px, calc(60.0792864222002px + 4.162537165510407vw), 140px);

                @media (max-width: 910px) {
                    padding: 0 0.5em;
                    margin-top: 20px;
                }

                &.txt {
                    line-height: 1.3;

                    @media (max-width: 767px) {
                        line-height: 1.5;
                    }

                    font {
                        font-size: 15px;
                    }
                }
            }
        }

        &.school__produce--reverse {
            margin-top: clamp(37px, calc(30.076923076923077px + 1.9230769230769231vw), 67px);

            @media (max-width: 910px) {
                margin-top: clamp(37px, calc(30.076923076923077px + 1.9230769230769231vw), 67px) !important;
            }

            .tit {
                padding: 0.5em 50% 0.5em 38px;

                @media (max-width: 910px) {
                    margin-top: clamp(37px, calc(30.076923076923077px + 1.9230769230769231vw), 67px);
                    padding: 0.5em 1em;
                }
            }

            >.column {
                flex-direction: row-reverse;

                figure {
                    margin-left: 0;
                    margin-right: min(7%, 97px);
                }
            }
        }
    }

    .school__produce-img {
        margin-top: clamp(50px, calc(28.76923076923077px + 5.897435897435897vw), 142px);

        .tit {
            text-align: center;
            color: var(--color-blue02);
            line-height: 1.3;

            @media (max-width: 767px) {
                line-height: 1.5;
            }
        }

        .img {
            width: min(90%, 648px);
            margin-inline: auto;
            margin-top: clamp(33px, calc(4.615384615384617px + 7.884615384615384vw), 156px);
        }
    }
}




/*========================================================
/* support
==========================================================*/
#support {
    margin-top: clamp(76px, calc(46.69230769230769px + 8.14102564102564vw), 203px);

    .school__read {
        .read {
            margin-top: clamp(25px, calc(11.153846153846153px + 3.8461538461538463vw), 85px);
            text-align: center;
            font-family: var(--font-ja-gothic);
            font-weight: 400;
            color: var(--color-blue01);
        }

        .img {
            width: min(100% - 2rem, 997px);
            margin-inline: auto;
            margin-top: clamp(30px, calc(13.846153846153847px + 4.487179487179487vw), 100px);
        }
    }

    .school__support {
        width: min(100% - 2rem, 884px);
        margin-inline: auto;
        margin-top: 35px;

        .tit {
            font-family: var(--font-ja-gothic);
            color: var(--color-text);
            font-weight: 400;
            line-height: 1.6;
            text-align: center;
        }

        .support_img01 {
            width: min(100%, 772px);
            margin-inline: auto;
            margin-top: clamp(23px, calc(18.384615384615387px + 1.282051282051282vw), 43px);
        }

        .support_img02 {
            margin-top: clamp(16px, calc(13.692307692307693px + 0.641025641025641vw), 26px);
        }

        .support_img03 {
            margin-top: clamp(40px, calc(21.076923076923077px + 5.256410256410256vw), 122px);
        }

        .txt01,
        .txt02 {
            text-align: center;
            color: var(--color-text);
            line-height: 2;
        }

        .txt01 {
            margin: clamp(32px, calc(20.461538461538463px + 3.205128205128205vw), 82px) auto clamp(34px, calc(22.461538461538463px + 3.205128205128205vw), 84px);
        }

        .txt02 {
            margin-top: clamp(29px, calc(19.76923076923077px + 2.564102564102564vw), 69px);
        }

        .txt03 {
            color: var(--color-blue01);
            text-align: center;
            margin-top: clamp(40px, calc(15.076923076923077px + 6.923076923076923vw), 148px);
            line-height: 1.7;
        }
    }

    .arrow_img01,
    .arrow_img02 {
        width: min(37% - 2rem, 156px);
        margin-inline: auto;
    }

    .arrow_img01 {
        margin-top: clamp(15px, calc(10.384615384615385px + 1.282051282051282vw), 35px);
    }

    .arrow_img02 {
        margin-top: clamp(20px, calc(14.461538461538462px + 1.5384615384615385vw), 44px);
    }
}

/*========================================================
/* quality
==========================================================*/
#quality {
    color: var(--color-text);
    margin-top: clamp(60px, calc(34.61538461538461px + 7.051282051282051vw), 170px);

    .school__read {
        width: min(100% - 2rem, 902px);
        margin-inline: auto;

        .read {
            margin-top: clamp(25px, calc(3.3076923076923066px + 6.0256410256410255vw), 119px);
            text-align: center;
            font-family: var(--font-ja-gothic);
            color: var(--color-blue01);
            line-height: 1.3;
        }

        .img {
            width: min(100%, 800px);
            margin: clamp(30px, calc(21.46153846153846px + 2.371794871794872vw), 67px) auto clamp(30px, calc(19.615384615384613px + 2.8846153846153846vw), 75px);
        }
    }

    .arrow_img {
        width: min(55% - 4rem, 302px);
        margin-inline: auto;
    }

    .school__quality {
        width: min(100% - 2rem, 650px);
        margin-inline: auto;
        padding: clamp(27px, calc(11.538461538461538px + 4.294871794871795vw), 94px) 0 clamp(32px, calc(17.23076923076923px + 4.102564102564102vw), 96px);

        &:not(:last-child) {
            border-bottom: 1px solid #C2C2C2;
        }

        .heading {
            width: min(61%, 401px);
            margin-inline: auto;
            color: #fff;
            font-family: var(--font-ja-gothic);
            text-align: center;
            padding: 0.5em;
            background: var(--color-blue01);
            border-radius: 33px;
        }

        .tit {
            font-family: var(--font-ja-gothic);
            color: var(--color-blue01);
            font-weight: 400;
            text-align: center;
            margin-top: 1em;
        }

        .img {
            margin-top: clamp(25px, calc(17.153846153846153px + 2.1794871794871793vw), 59px);
        }

        .intro {
            text-align: center;
            line-height: 2;
            margin-top: clamp(15px, calc(6.692307692307692px + 2.307692307692308vw), 51px);
        }

        .desc {
            border: 1px solid var(--color-blue01);
            padding: 1em 3em;
            margin-top: clamp(15px, calc(3.9230769230769234px + 3.076923076923077vw), 63px);

            @media (max-width: 767px) {
                padding: 1em;
            }

            li {
                line-height: 2;
                margin-left: 1em;

                &:nth-of-type(1) {
                    margin-bottom: 0.7em;
                    margin-left: -0.3em;
                }

                &:nth-of-type(5) {
                    margin-top: 2.5em;
                    margin-left: -0.3em;
                }

                &:has(span.arrow) {
                    font-weight: 700;
                }
            }
        }
    }
}

/*========================================================
/* useful
==========================================================*/
#useful {
    color: var(--color-text);
    margin-top: clamp(40px, calc(10.23076923076923px + 8.269230769230768vw), 169px);

    .inner {
        width: min(100% - 2rem, 997px);
        margin-inline: auto;
    }

    .school__read {
        margin-top: clamp(25px, calc(11.384615384615385px + 3.782051282051282vw), 84px);

        .read {
            text-align: center;
            line-height: 1.2;
        }

        .read_img {
            margin-top: clamp(25px, calc(15.76923076923077px + 2.564102564102564vw), 65px);
            width: min(80%, 435px);
            margin-inline: auto;
        }
    }

    .school__album-example {
        margin-top: clamp(50px, calc(33.84615384615385px + 4.487179487179487vw), 120px);

        .tit {
            background: var(--color-blue01);
            color: #fff;
            font-family: var(--font-ja-gothic);
            font-weight: 400;
            text-align: center;
            padding: 0.5em;
            line-height: 1.3;

            span {
                font-size: clamp(11px, calc(9.384615384615385px + 0.4487179487179487vw), 18px);
                font-weight: 300;
                display: block;
                margin-top: 0.8em;
            }
        }

        ul {
            width: min(100%, 655px);
            margin-inline: auto;
            margin-top: clamp(15px, calc(7.384615384615384px + 2.1153846153846154vw), 48px);

            li {
                line-height: 2;
                letter-spacing: 0.03em;
            }
        }
    }

    .btn {
        display: inline-block;
        width: min(100%, 997px);
        margin-inline: auto;
        padding: 1em 2.5em;
        border: 1px solid var(--color-blue01);
        margin-top: clamp(50px, calc(16.307692307692307px + 9.35897435897436vw), 196px);
        text-align: center;

        @media (max-width: 767px) {
            padding: 1em;
        }

        a {
            display: block;
            font-size: clamp(17px, calc(14px + 0.8333333333333334vw), 30px);
            font-family: var(--font-ja-gothic);
            font-weight: 400;
            color: var(--color-blue01);
            line-height: 1.3;
            text-align: center;
            position: relative;

            &::before {
                position: absolute;
                content: "";
                background: url(../img/bridal-plans/icon-img.webp)no-repeat center /contain;
                width: clamp(27px, calc(20.076923076923077px + 1.9230769230769231vw), 57px);
                height: clamp(27px, calc(20.076923076923077px + 1.9230769230769231vw), 57px);
                top: 50%;
                left: 50%;
                transform: translate(-540%, -50%);
            }
        }
    }

}



/*========================================================
/* summary
==========================================================*/
#summary {
    margin-top: clamp(70px, calc(49.230769230769226px + 5.769230769230769vw), 160px);

    .heading_block {
        background: url(../img/school/bg_summary.webp) no-repeat center center / cover;
        padding: 4.5em 0 5.3em;

        @media (max-width: 767px) {
            padding: 2.3em 0 2.5em;
        }

        .heading {
            color: var(--color-blue02);
            line-height: 1.6;
            text-align: center;
            font-weight: 500;
        }
    }

    .school__summary {
        width: min(100% - 2rem, 476px);
        margin-inline: auto;
        margin-top: clamp(25px, calc(4.692307692307693px + 5.641025641025641vw), 113px);
        color: var(--color-text);

        .tit {
            line-height: 2;
        }

        ul {
            margin-top: 3em;
            padding-left: 1em;

            @media (max-width: 767px) {
                margin-top: 1.5em;
            }

            li {
                color: var(--color-text);
                line-height: 2;
            }
        }
    }

    .bottom-txt {
        width: min(100% - 2rem, 1049px);
        margin-inline: auto;
        color: var(--color-blue02);
        margin-top: clamp(45px, calc(25.615384615384613px + 5.384615384615385vw), 129px);
        text-align: center;
        line-height: 1.6;
    }

    .btn {
        &.summary {
            margin: clamp(24px, calc(12.461538461538463px + 3.205128205128205vw), 74px) 0 clamp(-60px, calc(-54px + -1.6666666666666667vw), -86px);
            width: min(100% - 2rem, 739px);
            margin-inline: auto;
            display: block;
            text-align: center;
            line-height: 1.3;
            color: #fff;
            letter-spacing: 0.07em;
            padding: 1em;
            background: var(--color-blue01);
            border-radius: 22px;
        }
    }
}