@charset "UTF-8";

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





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/* About */
.about { padding-block: 69px }

    .about .content-title { margin-bottom: min(66px, calc(100vw * (48 / 375))) }


    .about__head {
        position: relative;
        margin-bottom: min(54px, calc(100vw * (48 / 375)));
    }
    @media screen and (min-width: 768px) {
        .about__head { padding-left: 26.5625% }
        .about__head::before {
            content: "";
            aspect-ratio: 274 / 226;
            position: absolute;
            bottom: 0;
            left: 2.65625%;
            width: 21.40625%;
            background-image: url(../images/home/illust-about.png);
            background-image:
                image-set(
                    url(../images/home/illust-about.png) 1x,
                    url(../images/home/illust-about@2x.png) 2x
                );
            background-image:
                -webkit-image-set(
                    url(../images/home/illust-about.png) 1x,
                    url(../images/home/illust-about@2x.png) 2x
                );
            background-repeat: no-repeat;
            background-size: contain;
        }
    }

        .about__catchphrase {
            margin-bottom: .75em;
            font-family: var(--font);
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: .05em;
        }
        @media screen and (min-width: 768px) {
            .about__catchphrase { font-size: clamp(1.6rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem) }
        }
        @media screen and (max-width: 767px) {
            .about__catchphrase { font-size: 2.0rem }
        }

        .about__description {
            line-height: 1.75;
            letter-spacing: .05em;
        }
        @media screen and (min-width: 768px) {
            .about__description { font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem) }
        }
        @media screen and (max-width: 767px) {
            .about__description { font-size: 1.6rem }
        }


    @media screen and (min-width: 768px) {
        .about__list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-column-gap: 1.875%;
        }
    }
    @media screen and (max-width: 767px) {
        .about__list {
            display: flex;
            flex-direction: column;
            grid-column-gap: 40px;
        }
    }

        @media screen and (max-width: 767px) {
            .about__item + .about__item { margin-top: 32px }
        }

            .about__image {
                aspect-ratio: 400 / 300;
                padding: clamp(6px, calc(100vw * (12 / var(--innerContainerSize))), 12px);
                margin-bottom: 11px;
                border: 2px solid var(--primaryColor-800);
                background-color: white;
            }
            .about__image img {
                aspect-ratio: 360 / 260;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            @media screen and (min-width: 768px) {
                .about__image,
                .about__image img { border-radius: min(10px, calc(100vw * (10 / var(--innerContainerSize)))) }
            }
            @media screen and (max-width: 767px) {
                .about__image,
                .about__image img { border-radius: 10px }
            }

            .about__title {
                padding-left: .05em;
                margin-bottom: 15px;
                background-image: linear-gradient(var(--secondaryColor-200), var(--secondaryColor-200));
                background-repeat: no-repeat;
                background-position: 0 100%;
                color: var(--primaryColor-800);
                letter-spacing: .05em;
            }
            @media screen and (min-width: 768px) {
                .about__title {
                    background-size: 100% calc(1em * (10 / 20));
                    font-size: clamp(1.4rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem);
                    line-height: 1.5;
                }
            }
            @media screen and (max-width: 767px) {
                .about__title {
                    background-size: 100% calc(1em * (10 / 24));
                    font-size: 2.0rem;
                    line-height: 1.2;
                }
            }

            .about__content {
                font-size: 1.4rem;
                line-height: calc(24 / 14);
                letter-spacing: .05em;
            }

                .about__label {
                    width: 120px;
                    padding-left: .05em;
                    margin-bottom: 9px;
                    background-color: var(--primaryColor-500);
                    border-radius: 99px;
                    color: white;
                    text-align: center;
                }



.guide {}

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

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

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

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


            .guide__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;
            }
            .guide__image img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
                object-fit: cover;
            }
            @media screen and (min-width: 768px) {
                .guide__image {
                    width: max(31.25%, 320px);
                    margin-right: max(4.0625%, 20px);
                }
            }
            @media screen and (max-width: 767px) {
                .guide__image {
                    width: 100%;
                    margin-top: 48px;
                    margin-bottom: 24px;
                }
            }

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


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

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

                .guide__block--sub .guide__image {
                    aspect-ratio: 320 / 200;
                    position: relative;
                }
                .guide__block--sub .guide__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;
                }
                .guide__block--sub .guide__image img { aspect-ratio: 300 / 180 }
                @media screen and (min-width: 768px) {
                    .guide__block--sub .guide__image { width: max(25%, 200px) }
                    .guide__block--sub .guide__image::before {
                    }
                }
                @media screen and (max-width: 767px) {
                    .guide__block--sub .guide__image { width: calc(100% * (320 / 600)) }
                }


                .guide__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) {
                    .guide__title {
                        padding-bottom: calc(1em * (40 / 36));
                        margin-bottom: max(24px, calc(1em * (25 / 36)));
                        border-image-outset: 66px 100vw 0;
                    }
                    .guide__block--head .guide__title {
                        padding-bottom: 1em;
                        border-image-outset: 64px 100vw 0;
                    }
                }
                @media screen and (max-width: 767px) {
                    .guide__title {
                        padding-block: 1em;
                        border-image-outset: 0 100vw;
                    }
                }

                    .guide__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) {
                        .guide__block--head .guide__title :is(h2, h3) { margin-top: calc(-1em * (1 / 36)) }
                    }

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


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


                .guide__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;
                }
                .guide__link::before {
                    content: "";
                    display: block;
                    border: 0.375em solid transparent;
                    border-left: 0;
                    border-right: 0.5625em solid var(--primaryColor-800);
                }