@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * UNDER_BANNER........下部バナー
 * CONTENTS............コンテンツ
 * CHANGE-STYLES.......スタイルの変更
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.introduction { background-color: var(--primaryColor-100) }

    .introduction__inner {
        padding-top: 14px;
        padding-bottom: clamp(48px, calc(100vw * (60 / var(--innerContainerSize))), 60px);
    }

        .introduction__title {
            margin-bottom: clamp(24px, calc(100vw * (31 / var(--innerContainerSize))), 31px);
            background-repeat: no-repeat;
            font-family: var(--fontSub);
            font-weight: 700;
            line-height: calc(50 / 36);
        }
        .introduction__title span {
            color: var(--primaryColor-800);
            font-family: var(--font);
            font-weight: 500;
        }
        @media screen and (min-width: 768px) {
            .introduction__title {
                padding-top: 3.515625%;
                padding-left: 34.609375%;
                padding-bottom: 2.421875%;
                background-image: url(../images/guide/image-introduction-head.png);
                background-image:
                    image-set(
                        url(../images/guide/image-introduction-head.png) 1x,
                        url(../images/guide/image-introduction-head@2x.png) 2x
                    );
                background-image:
                    -webkit-image-set(
                        url(../images/guide/image-introduction-head.png) 1x,
                        url(../images/guide/image-introduction-head@2x.png) 2x
                    );
                background-position: 50% 100%;
                background-size: contain;
                font-size: clamp(1.8rem, calc(100vw * (36 / var(--innerContainerSize))), 3.6rem);
            }
        }
        @media screen and (max-width: 767px) {
            .introduction__title {
                padding-top: 1em;
                padding-bottom: 1.75em;
                font-size: clamp(1.8rem, calc(100vw * (36 / var(--innerContainerSize))), 3.6rem);
                background-image: url(../images/guide/image-introduction-title.png);
                background-image:
                    image-set(
                        url(../images/guide/image-introduction-title.png) 1x,
                        url(../images/guide/image-introduction-title@2x.png) 2x
                    );
                background-image:
                    -webkit-image-set(
                        url(../images/guide/image-introduction-title.png) 1x,
                        url(../images/guide/image-introduction-title@2x.png) 2x
                    );
                background-position: 100% 100%;
                background-size: 5em;
            }
        }

        .introduction__list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            grid-column-gap: max(12px, 1.875%);
            grid-row-gap: clamp(48px, calc(100vw * (60 / var(--innerContainerSize))), 60px);
        }

            .introduction__image {
                margin-bottom: 16px;
                border: 4px solid white;
                border-radius: 10px;
                overflow: hidden;
            }
            .introduction__image img {
                aspect-ratio: 400 / 320;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .introduction__content {
                font-family: var(--fontSub);
                font-size: clamp(1.6rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
            }

                .introduction__label {
                    display: grid;
                    grid-template-columns: calc(1em * (24 / 18)) 1fr;
                    column-gap: calc(1em * (7 / 18));
                    margin-bottom: .4em;
                    font-family: initial;
                    font-weight: 700;
                    line-height: calc(24 / 18);
                }
                .introduction__label::before {
                    display: block;
                    width: calc(1em * (24 / 14));
                    height: calc(1em * (24 / 14));
                    border-radius: 100%;
                    background-color: var(--primaryColor-500);
                    color: white;
                    font-family: var(--fontEnSub);
                    font-size: calc(1em * (14 / 18));
                    line-height: calc(24 / 14);
                    text-align: center;
                }
                .introduction__item:nth-of-type(1) .introduction__label::before { content: "1" }
                .introduction__item:nth-of-type(2) .introduction__label::before { content: "2" }
                .introduction__item:nth-of-type(3) .introduction__label::before { content: "3" }
                .introduction__item:nth-of-type(4) .introduction__label::before { content: "4" }
                .introduction__item:nth-of-type(5) .introduction__label::before { content: "5" }
                .introduction__item:nth-of-type(6) .introduction__label::before { content: "6" }

                .introduction__text {
                    padding-left: calc(1em * (32 / 14));
                    font-size: calc(1em * (14 / 18));
                    line-height: calc(22 / 14);
                }





/* Entry */
.entry {
    border-block: 6px solid var(--secondaryColor-200);
    background-color: #53c202;
}

    .entry__inner {
        position: relative;
        padding-top: calc(50px - min(36px, calc(100vw * (27 / 375))));
        padding-bottom: calc(50px - min(36px, calc(100vw * (31 / 375))));
    }
    @media screen and (min-width: 768px) {
        .entry__inner {
            position: relative;
            display: grid;
            justify-content: space-between;
            grid-template-columns: 74.0625% 21.875%;
        }
        .entry__inner::before {
            content: "";
            aspect-ratio: 235 / 327;
            position: absolute;
            bottom: 0;
            left: calc(-100% * (2 / 1280));
            width: calc(100% * (235 / 1280));
            background-image: url(../images/home/icon-entry.png);
            background-image:
                image-set(
                    url(../images/home/icon-entry.png) 1x,
                    url(../images/home/icon-entry@2x.png) 2x
                );
            background-image:
                -webkit-image-set(
                    url(../images/home/icon-entry.png) 1x,
                    url(../images/home/icon-entry@2x.png) 2x
                );
            background-repeat: no-repeat;
            background-position: 0 100%;
            background-size: contain;
        }
    }

        @media screen and (min-width: 768px) {
            .entry__content {
                grid-column: 1 / 2;
                padding-top: min(1px, calc(100% * (1 / 680)));
                padding-left: calc(100% * (268 / 948));
            }
        }
        @media screen and (max-width: 767px) {
            .entry__content {
                grid-column: 2 span;
            }
        }

            .entry__title {
                margin-bottom: calc(50px - min(32px, calc(100vw * (30 / 375))));
                color: white;
                font-family: var(--font);
                font-weight: 800;
                line-height: 1;
                letter-spacing: .05em;
                white-space: nowrap;
            }
            @media screen and (min-width: 768px) {
                .entry__title {
                    margin-left: calc(-100% * (8 / 680));
                    font-size: clamp(1.0rem, calc(100vw * (95 / var(--innerContainerSize))), 9.5rem);
                }
            }
            @media screen and (max-width: 767px) {
                .entry__title { font-size: 4.3rem }
            }

            .entry__introduction {
                border-radius: 10px;
                background-color: #5fe33e;
                color: #2d2d2d;
            }
            @media screen and (min-width: 768px) {
                .entry__introduction {
                    display: grid;
                    grid-template-columns: calc(100% * (273 / 650)) calc(100% * (164 / 650)) 1fr;
                    grid-column-gap: calc(100% * (14 / 650));
                    padding-block: calc(100% * (11 / 680));
                    padding-left: calc(100% * (16 / 680));
                    padding-right: calc(100% * (14 / 680));
                    margin-bottom: min(15px, calc(100% * (15 / 680)));
                }
            }
            @media screen and (max-width: 767px) {
                .entry__introduction {
                    position: relative;
                    grid-template-columns: 53px 1fr;
                    grid-column-gap: 8px;
                    padding-top: 11px;
                    padding-inline: 16px;
                    padding-bottom: 38px;
                    margin-bottom: 88px;
                    border-radius: 10px;
                }
            }

                .entry__introduction__label { position: relative }
                .entry__introduction__label::before {
                    content: "診断";
                    aspect-ratio: 1 / 1;
                    position: absolute;
                    transform: rotate(-8.95deg);
                    z-index: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: calc(1em * (60 / 22));
                    color: var(--accentColor-400);
                    font-weight: 800;
                    background-color: white;
                    border-radius: 100%;
                }
                @media screen and (min-width: 768px) {
                    .entry__introduction__label {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-end;
                        padding-right: calc(100% * (4 / 273));
                        font-size: clamp(1.0rem, calc(100vw * (22 / var(--innerContainerSize))), 2.2rem);
                    }
                    .entry__introduction__label::before {
                        top: 0;
                        left: 0;
                        margin-top: calc(1em * (24 / 22));
                    }
                }
                @media screen and (max-width: 767px) {
                    .entry__introduction__label {
                        font-size: 2.2rem;
                    }
                    .entry__introduction__label::before {
                        top: 30px;
                        left: -23px;
                    }
                }

                    .entry__introduction__label span {
                        display: block;
                        white-space: nowrap;
                    }

                    .entry__introduction__label span:nth-of-type(1) {
                        line-height: 1;
                    }
                    @media screen and (min-width: 768px) {
                        .entry__introduction__label span:nth-of-type(1) {
                            margin-bottom: calc(1em * (9 / 21));
                            font-size: clamp(1.0rem, calc(100vw * (21 / var(--innerContainerSize))), 2.1rem);
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .entry__introduction__label span:nth-of-type(1) {
                            margin-bottom: 8px;
                            font-size: 2.1rem;
                        }
                    }

                    .entry__introduction__label span:nth-of-type(2) {
                        color: white;
                        font-weight: 800;
                        line-height: 1.2;
                        text-align: right;
                    }
                    @media screen and (min-width: 768px) {
                        .entry__introduction__label span:nth-of-type(2) {
                            font-size: clamp(1.0rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem);
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .entry__introduction__label span:nth-of-type(2) {
                            margin-bottom: 6px;
                            font-size: 2.0rem;
                        }
                    }

                    .entry__introduction__label span:nth-of-type(3) {
                        height: 2em;
                        font-weight: 700;
                        line-height: 1;
                        text-align: right;
                    }
                    .entry__introduction__label span:nth-of-type(3) strong {
                        margin-left: calc(1em * (4 / 56));
                        font-family: var(--fontEnSub);
                        font-size: calc(1em * (56 / 24));
                        font-weight: 400;
                        line-height: calc(48 / 56);
                        vertical-align: -0.05em;
                    }
                    @media screen and (min-width: 768px) {
                        .entry__introduction__label span:nth-of-type(3) {
                            margin-bottom: calc(1em * (9 / 21));
                            font-size: clamp(1.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .entry__introduction__label span:nth-of-type(3) {
                            margin-bottom: 8px;
                            font-size: 2.1rem;
                        }
                    }


                .entry__introduction__image { position: relative }
                @media screen and (max-width: 767px) {
                    .entry__introduction__image { width: 164px }
                }

                    .entry__introduction__image img {
                        aspect-ratio: 160 / 120;
                        position: absolute;
                        transform: rotate(-4.27deg);
                        width: 100%;
                    }
                    @media screen and (min-width: 768px) {
                        .entry__introduction__image img {
                            top: 0;
                            left: 0;
                            margin-top: calc(-100% * (24 / 164));
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .entry__introduction__image img {
                            top: -89px;
                            left: -12px;
                        }
                    }


                .entry__introduction__text {
                    /*display: flex;*/
                    letter-spacing: 0.05em;
                    font-weight: 500;
                    /*align-items: center;*/
                    /*white-space: nowrap;**/
                }
                @media screen and (min-width: 768px) {
                    .entry__introduction__text {
                        column-gap: 17px;
                        font-size: clamp(1.0rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
                        padding-top: 20px;
                    }
                }
                @media screen and (max-width: 767px) {
                    .entry__introduction__text {
                        position: absolute;
                        top: calc(100% - 0px);
                        left: 0;
                        /*transform: translateX(-50%);*/
                        column-gap: 17px;
                        font-size: 1.8rem;
                        padding-top: 20px;
                        width: 100%;
                    }
                }

                    /*
                    .entry__introduction__text span:nth-of-type(2) {
                        aspect-ratio: 1 / 1;
                        display: flex;
                        justify-content: center;
                        align-items: flex-end;
                        padding-bottom: 0.4em;
                        width: calc(1em * (80 / 24));
                        color: var(--accentColor-400);
                        font-family: var(--fontSub);
                        font-weight: 700;
                        border-radius: 100%;
                        background-color: white;
                    }
                    .entry__introduction__text span:nth-of-type(2) strong {
                        color: var(--accentColor-400);
                        font-family: var(--fontEnSub);
                        font-size: calc(1em * (64 / 24));
                        font-weight: 400;
                        line-height: 1;
                    }
                    **/
                    @media screen and (min-width: 768px) {
                        /*
                        .entry__introduction__text span:nth-of-type(2) {
                            font-size: clamp(1.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                        }
                        */
                    }
                    @media screen and (max-width: 767px) {
                        /*
                        .entry__introduction__text span:nth-of-type(2) {
                            font-size: 2.4rem;
                        }
                        */
                    }


        @media screen and (min-width: 768px) {
            .entry__link { grid-row: 2 span }
        }

            .entry__button {
                display: block;
                width: 100%;
                background-color: #fb751c;
                color: white;
                text-align: center;
            }
            @media screen and (min-width: 768px) {
                .entry__button {
                    aspect-ratio: 1 / 1;
                    border: clamp(1px, calc(100vw * (10 / var(--innerContainerSize))), 10px) solid white;
                    border-radius: 100%;
                }
            }
            @media screen and (max-width: 767px) {
                .entry__button {
                    padding-top: 10px;
                    padding-inline: 24px;
                    padding-bottom: 11px;
                    border: 4px solid white;
                    border-radius: 10px;
                }
            }

                .entry__button strong {
                    position: relative;
                    display: block;
                    padding-left: .05em;
                    line-height: 1;
                    letter-spacing: .05em;
                }
                @media screen and (min-width: 768px) {
                    .entry__button strong {
                        padding-top: 1.25em;
                        padding-bottom: calc(1em * (18 / 44));
                        margin-bottom: calc(1em * (11 / 44));
                        font-size: clamp(1.0rem, calc(100vw * (44 / var(--innerContainerSize))), 4.4rem);
                    }
                    .entry__button strong::before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: calc(1em * (160 / 44));
                        height: calc(1em * (3 / 44));
                        background-color: white;
                    }
                }
                @media screen and (max-width: 767px) {
                    .entry__button strong {
                        padding-bottom: 10px;
                        margin-bottom: 10px;
                        border-bottom: 2px solid white;
                        font-size: 2.4rem;
                    }
                }

                .entry__button span {
                    display: block;
                    padding-left: .05em;
                    font-weight: 700;
                    line-height: calc(42 / 36);
                    letter-spacing: .05em;
                }
                @media screen and (min-width: 768px) {
                    .entry__button span {
                        font-size: clamp(1.0rem, calc(100vw * (36 / var(--innerContainerSize))), 3.6rem);
                    }
                }
                @media screen and (max-width: 767px) {
                    .entry__button span {
                        font-size: 1.8rem;
                    }
                }


        .entry__description {
            font-family: var(--fontSub);
            font-weight: 500;
        }
        @media screen and (min-width: 768px) {
            .entry__description {
                padding-left: calc(100% * (268 / 948));
                color: white;
                font-size: clamp(1.0rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                line-height: 1.75;
            }
        }
        @media screen and (max-width: 767px) {
            .entry__description {
                font-size: 1.4rem;
                line-height: calc(24 / 14);
            }
        }






.recommended-point {}

    .recommended-point__inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
        grid-column-gap: max(24px, 3.125%);
        grid-row-gap: clamp(48px, calc(100vw * (60 / var(--innerContainerSize))), 60px);
        padding-top: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
        padding-bottom: clamp(48px, calc(100vw * (59 / var(--innerContainerSize))), 59px);
    }

        .recommended-point__block {}

            .recommended-point__image { margin-bottom: 19px }
            .recommended-point__image img {
                aspect-ratio: 400 / 240;
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 10px;
            }

            .recommended-point__head {
                padding-bottom: 11px;
                margin-bottom: 17px;
                border-bottom: 2px solid var(--primaryColor-500);
            }

                .recommended-point__catchphrase {
                    margin-bottom: calc(1em * (7 / 24));
                    color: var(--primaryColor-500);
                    font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                    font-weight: 700;
                    line-height: calc(32 / 24);
                    text-align: center;
                }
                .recommended-point__catchphrase strong {
                    font-family: var(--fontEnSub);
                    font-size: calc(1em * (40 / 24));
                    font-weight: 400;
                    line-height: 1;
                }
                .recommended-point__catchphrase span {
                    display: block;
                    padding-top: calc(1em * (7 / 24));
                    padding-bottom: calc(1em * (5 / 24));
                }

                .recommended-point__title {
                    margin-bottom: 11px;
                    font-family: var(--fontSub);
                    font-size: clamp(2.4rem, calc(100vw * (30 / var(--innerContainerSize))), 3.0rem);
                    font-weight: 400;
                    line-height: calc(44 / 30);
                    text-align: center;
                }
                .recommended-point__title strong {
                    font-size: 1.2em;
                    font-weight: 400;
                    line-height: calc(44 / 36);
                }


            .recommended-point__text {
                width: fit-content;
                margin-inline: auto;
                font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                font-weight: 700;
                line-height: 1.875;
            }





.about {}

    .about__inner { padding-bottom: clamp(96px, calc(100vw * (128 / var(--innerContainerSize))), 128px) }

        .about__block { display: flex }
        .about__block + .about__block { margin-top: clamp(48px, calc(100vw * (60 / var(--innerContainerSize))), 60px) }
        @media screen and (min-width: 768px) {
            .about__block {
                flex-direction: row-reverse;
                padding-top: 66px;
                overflow: hidden;
            }
            .about__block--head {
                flex-direction: row;
                flex-wrap: wrap;
                padding-top: 64px;
            }
        }
        @media screen and (max-width: 767px) {
            .about__block {
                flex-direction: column;
                width: 100%;
            }
        }

            .about__video { position: relative }
            @media screen and (min-width: 768px) {
                .about__video {
                    width: max(48.4375%, 320px);
                    margin-right: max(4.6875%, 24px);
                }
            }
            @media screen and (max-width: 767px) {
                .about__video {
                    order: 1;
                    width: 100%;
                    margin-top: 24px;
                }
            }

                .about__video iframe {
                    aspect-ratio: 16 / 9;
                    display: block;
                    width: 100%;
                }


            .about__image {
                aspect-ratio: 400 / 300;
                position: relative;
                height: fit-content;
                padding: clamp(6px, calc(100vw * (12 / var(--innerContainerSize))), 12px);
                border: 1px solid var(--primaryColor-800);
                border-radius: 10px;
                background-color: white;
            }
            .about__image img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
                object-fit: cover;
            }
            @media screen and (min-width: 768px) {
                .about__image {
                    width: max(31.25%, 320px);
                    margin-right: max(4.0625%, 20px);
                }
            }
            @media screen and (max-width: 767px) {
                .about__image {
                    width: 100%;
                    margin-top: 48px;
                    margin-bottom: 24px;
                }
            }

                .about__image img { aspect-ratio: 374 / 274 }


            @media screen and (min-width: 768px) {
                .about__content {
                    flex-grow: 1;
                    width: 1px;
                }
            }

            .about__block--sub { width: 100% }
            @media screen and (min-width: 768px) {
                .about__block--sub {
                    display: flex;
                    margin-top: 69px;
                }
            }
            @media screen and (max-width: 767px) {
                .about__block--sub {
                    order: 1;
                    margin-top: 32px;
                }
            }

                .about__block--sub .about__image {
                    aspect-ratio: 320 / 200;
                    position: relative;
                }
                .about__block--sub .about__image::before {
                    content: "";
                    aspect-ratio: 318 / 234;
                    position: absolute;
                    top: 0;
                    right: calc(-100% * (270 / 320));
                    margin-top: -10.625%;
                    display: block;
                    width: calc(100% * (318 / 320));
                    background-image: url(../images/guide/illust-01.png);
                    background-image:
                        image-set(
                            url(../images/guide/illust-01.png) 1x,
                            url(../images/guide/illust-01@2x.png) 2x
                        );
                    background-image:
                        -webkit-image-set(
                            url(../images/guide/illust-01.png) 1x,
                            url(../images/guide/illust-01@2x.png) 2x
                        );
                    background-repeat: no-repeat;
                    background-size: contain;
                }
                .about__block--sub .about__image img { aspect-ratio: 300 / 180 }
                @media screen and (min-width: 768px) {
                    .about__block--sub .about__image { width: max(25%, 200px) }
                    .about__block--sub .about__image::before {
                    }
                }
                @media screen and (max-width: 767px) {
                    .about__block--sub .about__image { width: calc(100% * (320 / 600)) }
                }


                .about__title {
                    font-size: clamp(2.0rem, calc(100vw * (36 / var(--innerContainerSize))), 3.6rem);
                    border-image-source: linear-gradient(var(--primaryColor-100), var(--primaryColor-100));
                    border-image-slice: 0 fill;
                }
                @media screen and (min-width: 768px) {
                    .about__title {
                        padding-bottom: calc(1em * (40 / 36));
                        margin-bottom: max(24px, calc(1em * (25 / 36)));
                        border-image-outset: 66px 100vw 0;
                    }
                    .about__block--head .about__title {
                        padding-bottom: 1em;
                        border-image-outset: 64px 100vw 0;
                    }
                }
                @media screen and (max-width: 767px) {
                    .about__title {
                        padding-block: 1em;
                        border-image-outset: 0 100vw;
                    }
                }

                    .about__title :is(h2, h3) {
                        margin-top: calc(-1em * (6 / 36));
                        margin-bottom: calc(1em * (20 / 36));
                        color: var(--primaryColor-500);
                        font-family: var(--fontSub);
                        font-weight: 900;
                        line-height: 1.25;
                    }
                    @media screen and (min-width: 768px) {
                        .about__block--head .about__title :is(h2, h3) { margin-top: calc(-1em * (1 / 36)) }
                    }

                    .about__title p {
                        font-size: calc(1em * (24 / 36));
                        font-family: var(--fontSub);
                        font-weight: 700;
                    }
                    @media screen and (min-width: 768px) {
                        .about__title p { font-size: calc(1em * (24 / 36)) }
                    }
                    @media screen and (max-width: 767px) {
                        .about__title p { font-size: 1.2rem }
                    }


                .about__text {
                    font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                    line-height: 1.875;
                }
                @media screen and (min-width: 768px) {
                    .about__block--sub .about__text {
                        width: max(48.4375%, 320px);
                        margin-top: -0.1875em;
                        margin-right: max(4.6875%, 24px);
                    }
                }


                .about__link {
                    display: flex;
                    align-items: center;
                    column-gap: 0.3125em;
                    width: fit-content;
                    margin-top: clamp(24px, calc(100vw * (34 / var(--innerContainerSize))), 34px);
                    font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                    font-weight: 500;
                }
                .about__link::before {
                    content: "";
                    display: block;
                    border: 0.375em solid transparent;
                    border-left: 0;
                    border-right: 0.5625em solid var(--primaryColor-800);
                }