@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * COMMON..............ヘッダー
 * ANIMATION...........アニメーション
 * HEADER..............ヘッダー
 * FOOTER..............フッダー
 * CONCEPT.............コンセプト
 * GALLERY.............ギャラリー
 * BUY_BUTTON..........購入ボタン
 */





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
.wrap { overflow: hidden }

.block {
    padding-top: min(96px, 9.375%);
    padding-right: calc(100% * (48 / 1125));
    padding-left: calc(100% * (48 / 1125));
    padding-bottom: min(128px, 12.5%);
}
    .block__content {
        width: min(100%, 1024px);
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 64px;
    }
        .block__title {
            position: relative;
            font-size: 4.8rem;
            font-weight: 900;
            line-height: 1.5;
            white-space: nowrap;
            letter-spacing: -.5em;
            opacity: 0;
        }
        .block__title.active {
            letter-spacing: .3em;
            opacity: 1;
            transition:
                letter-spacing .6s .6s var(--linear),
                opacity .45s .7s var(--easeOutQuart);
        }
        @media screen and (max-width: 767px) {
            .block__title.active { letter-spacing: .25em }
        }

            .block__title::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: -1em;
                width: 0;
                height: 1px;
                background-color: var(--black);
                transition: width 0s var(--linear);
            }
            .block__title.active::before {
                width: calc(100vw - ((100vw - 100%) / 2) + 1em);
                transition-duration: 24s;
                transition-delay: 1s;
            }
            @media screen and (max-width: 767px) {
                .block__title.active::before {
                    transition-duration: 12s;
                }
            }


        .block__text {
            font-size: 1.6rem;
            font-weight: 300;
            line-height: 3;
            letter-spacing: .1em;
        }
        .block__text /*span*/.catch {
            font-family: var(--fontCatch);
            font-size: 1.5em;
        }
        @media screen and (min-width: 768px) {
            .block__text.center { text-align: center }
        }





/*------------------------------------*\
    $ANIMATION
\*------------------------------------*/
.fade-in {
    transform: translateY(100px);
    opacity: 0;
}
.fade-in.active {
    transform: translateY(0);
    opacity: 1;
    transition:
        transform 1s .3s var(--easeOutQuart),
        opacity 1s .4s var(--easeOutQuart);
}



/**
 * Background Settings
 *  background-image: linear-gradient(...);
 *  background-repeat: no-repeat;
 *  background-position: 0% 0%;
 *  background-size: 1000% 1000%;
 *  -webkit-background-clip: text;
 */
@keyframes gradientText {
    0%, 100% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
}





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh + 1px);
    overflow: hidden;
}

    .header__label {
        position: relative;
        display: flex;
        align-items: center;
        height: 60px;
        padding-right: 4%;
        padding-left: 4%;
        background-color: var(--baseColor);
        z-index: 1;
    }

        .logo { height: 75% }
        @media screen and (max-width: 767px) {
            .logo { height: 60% }
        }
            .logo__image { height: 100% }


    .main-visual {
        position: relative;
        flex-grow: 1;
        height: 1px;
    }

        .main-visual__imageBox { height: 100% }
            .main-visual__image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center 0px;
            }

        .main-visual__textBox {
            position: absolute;
            overflow: hidden;
        }
        @media screen and (min-width: 768px) {
            .main-visual__textBox {
                top: 50%;
                left: 8%;
                transform: translateY(-50%);
            }
        }
        @media screen and (max-width: 767px) {
            .main-visual__textBox {
                bottom: 12%;
                left: 4%;
            }
        }

            .main-visual__catch {
                font-family: var(--fontCatch);
                font-size: 10.8rem;
                font-weight: 900;
                line-height: 1;
                letter-spacing: .3em;
                white-space: nowrap;
            }
            @media screen and (min-width: 768px) and (max-height: 720px) {
                .main-visual__catch {
                    font-size: min(10rem, calc(100vh * (100 / 720)));
                    line-height: 0.8;
                }
            }
            @media screen and (min-width: 768px) {
                /* .main-visual__catch { text-align: right } */
            }
            @media screen and (max-width: 767px) {
                .main-visual__catch {
                    color: transparent;
                    font-size: 6.4rem;
                    font-size: 4.8rem;
                    line-height: 1.5;
                    line-height: 1.25;
                    letter-spacing: .35em;
                }
            }

                .main-visual__catch span {
                    transform: translateX(-100%);
                    display: block;
                }
                .main-visual__textBox.active .main-visual__catch span {
                    transform: translateX(0);
                    transition: transform .6s var(--easeOutQuart);
                }
                .main-visual__textBox.active .main-visual__catch span:nth-of-type(1) { transition-delay: .15s }
                .main-visual__textBox.active .main-visual__catch span:nth-of-type(2) { transition-delay: .3s }
                .main-visual__textBox.active .main-visual__catch span:nth-of-type(3) { transition-delay: .4s }
                .main-visual__textBox.active .main-visual__catch span:nth-of-type(4) { transition-delay: .6s }
                .main-visual__textBox.active .main-visual__catch span:nth-of-type(5) { transition-delay: .8s }
                .main-visual__textBox.active .main-visual__catch span:nth-of-type(6) { transition-delay: 1s }
                @media screen and (max-width: 767px) {
                    .main-visual__catch span {
                        transform: translateX(-100%);
                        background-image: linear-gradient(30deg, var(--baseColor), var(--gray), var(--baseColor), var(--white), var(--baseColor), var(--gray), var(--baseColor));
                        background-repeat: no-repeat;
                        background-position: 0% 0%;
                        background-size: 1000% 1000%;
                        -webkit-background-clip: text;
                        animation: gradientText 120s var(--linear) infinite forwards;
                    }
                    .main-visual__textBox.active .main-visual__catch span { transform: translateX(0) }
                }

            .main-visual__text {
                content-visibility: auto;
                padding-top: 1em;
                padding-bottom: .5em;
                font-family: var(--fontCatch);
                font-size: 2.4rem;
                font-weight: 700;
                line-height: 1.5;
                letter-spacing: .1em;
                white-space: nowrap;
                /* text-align: right; */
                opacity: 0;
                transition: opacity 1s 1.5s var(--easeOutQuart);
            }
            .main-visual__textBox.active .main-visual__text { opacity: 1 }
            @media screen and (max-width: 767px) {
                .main-visual__text { display: none }
            }
                .main-visual__text strong {
                    font-size: 1.5em;
                    font-weight: 900;
                    letter-spacing: .2em;
                }



    .nav {
        position: fixed;
        bottom: 4%;
        right: 4%;
        z-index: 9999;
    }

        .nav__list {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        @media screen and (max-width: 767px) {
            .nav__list {
                position: absolute;
                bottom: 0;
                right: 0;
                opacity: 0;
                transition:
                    padding-bottom .45s var(--easeOutQuart),
                    opacity .45s var(--easeOutQuart);
            }
            .nav__button.active + .nav__list {
                padding-bottom: 50px;
                opacity: 1;
            }
        }
            @media screen and (min-width: 768px) {
                .nav__item {
                    transform: translateX(calc(200% + 8vw));
                    transition: transform 1s var(--easeOutBack);
                }
                .nav.active .nav__item {
                    transform: translateX(0);
                    transition-duration: .45s;
                }
                .nav.active .nav__item:nth-last-of-type(1) { transition-delay: 0s; }
                .nav.active .nav__item:nth-last-of-type(2) { transition-delay: .1s; }
                .nav.active .nav__item:nth-last-of-type(3) { transition-delay: .2s; }
                .nav.active .nav__item:nth-last-of-type(4) { transition-delay: .3s; }
                .nav.active .nav__item:nth-last-of-type(5) { transition-delay: .4s; }
                .nav.active .nav__item:nth-last-of-type(6) { transition-delay: .5s; }
                .nav.active .nav__item:nth-last-of-type(7) { transition-delay: .6s; }
                .nav.active .nav__item:nth-last-of-type(8) { transition-delay: .7s; }
                .nav.active .nav__item:nth-last-of-type(9) { transition-delay: .8s; }
                .nav.active .nav__item:nth-last-of-type(10) { transition-delay: .9s; }
                .nav__item:not(:last-child) { margin-bottom: 3vh }
            }
            @media screen and (max-width: 767px) {
                .nav__item {
                    transition:
                        margin-top .45s var(--easeOutQuart),
                        margin-bottom .45s var(--easeOutQuart);
                }
                .nav__item:not(:first-child) { margin-top: -50px }
                .nav__button.active + .nav__list .nav__item {
                    margin-top: 0;
                    margin-bottom: 25px;
                }
            }
                .nav__link {
                    position: relative;
                    display: block;
                    --size: 30px;
                    width: var(--size);
                    height: var(--size);
                    border: 1px solid rgba(0, 0, 0, .1);
                    border-radius: 100%;
                    background-color: var(--white);
                    transition:
                        width .3s var(--easeOutQuart),
                        height .3s var(--easeOutQuart),
                        opacity .3s .1s var(--easeOutQuart);
                }
                @media screen and (min-width: 768px) {
                    .nav__link { opacity: .75 }
                    .nav__link:hover,
                    .nav__link.active {
                        --size: 45px;
                        opacity: 1;
                    }
                }
                @media screen and (max-width: 767px) {
                    .nav__link { --size: 50px }
                }
                    .nav__image {
                        width: 100%;
                        height: 100%;
                        border: 2px solid var(--white);
                        border-radius: 100%;
                        object-fit: cover;
                        filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, .3)) grayscale(1);
                        transition: filter .6s var(--easeOutQuart);
                    }
                    @media screen and (min-width: 768px) {
                        :is(.nav__link:hover, .nav__link.active) .nav__image {
                            filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, .3)) grayscale(0);
                            transition-delay: .3s;
                        }
                    }

                    .nav__text {
                        position: absolute;
                        top: 50%;
                        right: calc(100% + 1.5em);
                        transform: translateY(-50%);
                        padding-left: 1.5em;
                        background-image: linear-gradient(30deg, var(--baseColor), var(--gray), var(--white), var(--gray), var(--baseColor));
                        background-repeat: no-repeat;
                        background-position: 0% 0%;
                        background-size: 1000% 1000%;
                        -webkit-background-clip: text;
                        color: transparent;
                        font-size: 1.4rem;
                        font-weight: 500;
                        line-height: 1.5;
                        letter-spacing: -.5em;
                        text-align: right;
                        white-space: nowrap;
                        opacity: 0;
                        transition:
                            letter-spacing .3s var(--linear),
                            opacity .25s var(--easeOutQuart);
                        animation: gradientText 30s var(--linear) infinite forwards;
                    }
                    .nav__link:hover .nav__text {
                        letter-spacing: .2em;
                        opacity: 1;
                        transition-delay: .15s, .1s;
                    }
                    @media screen and (min-width: 768px) {
                        .nav__link:hover .nav__text {
                            letter-spacing: .2em;
                            opacity: 1;
                            transition-delay: .15s, .1s;
                        }
                    }
                    @media screen and (max-width: 767px) {
                        .nav__text {
                            position: absolute;
                            top: 50%;
                            right: calc(100% + 1.5em);
                            transform: translateY(-50%);
                            padding-left: 1.5em;
                            transition-delay: .45s, 0s;
                        }
                        .nav__button.active + .nav__list .nav__text {
                            letter-spacing: .2em;
                            opacity: 1;
                            transition-delay: .45s, .55s;
                        }
                            .nav__text::before {
                                content: "";
                                position: absolute;
                                bottom: .1em;
                                right: 0;
                                width: 0;
                                height: 1px;
                                background-image: linear-gradient(30deg, var(--white), var(--gray), var(--baseColor), var(--gray), var(--white));
                                background-repeat: no-repeat;
                                background-position: 0% 0%;
                                background-size: 1000% 1000%;
                                animation: gradientText 30s var(--linear) infinite forwards;
                                transition: width .6s .75s var(--easeOutQuart);
                            }
                            .nav__button.active + .nav__list .nav__text::before { width: 100% }
                    }

        .nav__button {
            content-visibility: auto;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background-color: var(--baseColor);
            opacity: .5;
            filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, .2));
            transition: opacity .6s .3s var(--easeOutQuart);
            z-index: 1;
        }
        .nav__button.active { opacity: 1 }
            .nav__button::before,
            .nav__button::after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: 60%;
                height: 2px;
                background-color: var(--white);
                transition:
                    top .3s var(--linear),
                    transform .3s var(--easeOutQuart);
            }
            .nav__button::before { top: 40% }
            .nav__button::after {
                top: 60%;
                transition-duration: .3s, 1s;
            }
            .nav__button.active::before {
                top: 50%;
                transform: translate(-50%, -50%) rotate(30deg);
            }
            .nav__button.active::after {
                top: 50%;
                transform: translate(-50%, -50%) rotate(-210deg);
            }







/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer { background-color: var(--baseColor) }

    .footer__content { margin-bottom: 64px }
    @media screen and (min-width: 768px) {
        .footer__content {
            display: flex;
            justify-content: space-between;
        }
    }

        .footer__logo { width: min(25%, 360px) }
        @media screen and (max-width: 767px) {
            .footer__logo {
                width: min(60%, 300px);
                margin-right: auto;
                margin-left: auto;
                margin-bottom: 12%;
            }
        }

        @media screen and (min-width: 768px) {
            .footer__block { width: 50% }
        }

            .footer__text {
                margin-bottom: 2em;
                /* color: var(--white); */
                font-size: 1.6rem;
                font-weight: 300;
                line-height: 2;
            }
                .footer__text strong {
                    font-size: 1.2em;
                    font-weight: 500;
                }
                .footer__text a {
                    position: relative;
                    white-space: nowrap;
                }
                .footer__text a:hover {
                    filter: drop-shadow(0 0 .25em rgba(255, 255, 255, .5));
                    transition: filter .3s .3s var(--easeOutBack);
                }
                .footer__text a[target=_blank] {
                    padding-right: 2em;
                    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512"><path fill="%23252525" d="M198.6,358.6l-45.3-45.3L402.7,64H176V0h336v336h-64V109.3L198.6,358.6z M368,234.5V416c0,17.7-14.3,32-32,32H96 c-17.7,0-32-14.3-32-32V176c0-17.7,14.3-32,32-32h181.5l64-64H64c-35.3,0-64,28.7-64,64v304c0,35.3,28.7,64,64,64h304 c35.3,0,64-28.7,64-64V170.5L368,234.5" /></svg>');
                    background-repeat: no-repeat;
                    background-position: top right;
                    background-size: 1em;
                }
                    .footer__text a::before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-image: linear-gradient(var(--gray), var(--gray));
                        background-repeat: no-repeat;
                        background-position: bottom right;
                        background-size: 0% 1px;
                    }
                    .footer__text a:hover::before {
                        background-size: 100% 1px;
                        filter: drop-shadow(0 0 .25em rgba(255, 255, 255, .5));
                        transition:
                            background-size .6s .1s var(--easeOutQuart),
                            filter .3s .3s var(--easeOutBack);
                    }


            .footer__social {}
            .footer__social--button { width: max-content }
            @media screen and (max-width: 767px) {
                .footer__social--button {
                    margin-right: auto;
                    margin-left: auto;
                }
            }
                .footer__social__list {
                    display: flex;
                    align-items: center;
                    margin-bottom: 32px;
                }
                @media screen and (max-width: 767px) {
                    .footer__social__list { justify-content: center }
                }
                    .footer__social__item:not(:last-of-type) { margin-right: 32px }
                        .footer__social__link {
                            display: block;
                            --size: 48px;
                            width: var(--size);
                            height: var(--size);
                            font-size: 1.6rem;
                            font-weight: 500;
                            line-height: 2;
                            transition: filter .3s .1s var(--easeOutBack);
                        }
                        .footer__social__link:hover { filter: drop-shadow(0 0 .25em rgba(255, 255, 255, .5)) }
                        .footer__social--button .footer__social__link:hover { filter: drop-shadow(0 0 .25em rgba(0, 185, 0, .5)) }
                        .footer__social--button .footer__social__link { --size: auto }
                        @media screen and (max-width: 767px) {
                            .footer__social--button .footer__social__link {
                                margin-right: auto;
                                margin-left: auto;
                            }
                        }



.copyright {
    /* color: var(--white); */
    font-size: 1.2rem;
    line-height: 2;
    letter-spacing: .1em;
    white-space: nowrap;
    text-align: center;
}



.map {
    position: relative;
    padding-bottom: min(56.25%, 360px);
}
    .map__body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }



/*------------------------------------*\
    $CONCEPT
\*------------------------------------*/
.concept { background-image: linear-gradient(165deg, var(--baseColor) 0%, var(--baseColor) 35%, rgba(255, 255, 255, 0) 35.1%, rgba(255, 255, 255, 0) 100%) }
@media screen and (max-width: 767px) {
    .concept { background-image: linear-gradient(115deg, var(--baseColor) 0%, var(--baseColor) 35%, rgba(255, 255, 255, 0) 35.1%, rgba(255, 255, 255, 0) 100%) }
}

    .concept__inner {
        padding-top: max(80px, 8%);
        padding-bottom: max(100px, 10%);
        background-image: linear-gradient(165deg, var(--white) 0%, var(--white) 35%, var(--black) 35.1%, var(--black) 100%);
        background-image: linear-gradient(165deg, var(--black) 0%, var(--black) 35%, var(--black) 35.1%, var(--black) 100%);
        background-repeat: no-repeat;
        background-position: top 100vw left 56.25vw;
        background-size: 100% 100%;
        -webkit-background-clip: text;
    }
    .concept.active .concept__inner {
        background-position: top 0px left 0px;
        transition: background-position 1s 1s var(--easeOutQuart);
    }
    @media screen and (max-width: 767px) {
        .concept__inner {
            background-image: linear-gradient(115deg, var(--white) 0%, var(--white) 35%, var(--baseColor) 35.1%, var(--baseColor) 100%);
            background-image: linear-gradient(115deg, var(--black) 0%, var(--black) 35%, var(--black) 35.1%, var(--black) 100%);
            background-position: top 100vw left 100vh;
        }
    }

        .concept__textBox {
            width: max-content;
            max-width: 80%;
            margin-right: auto;
            margin-left: auto;
            color: transparent;
        }
            .concept__title {
                margin-bottom: 1.5em;
                font-size: 2.2rem;
                font-weight: 700;
                line-height: 1.5;
            }
            .concept__text {
                font-size: 1.8rem;
                line-height: 3;
            }
            @media screen and (min-width: 768px) {
                .concept__text { font-weight: 500 }
            }





/*------------------------------------*\
    $GALLERY
\*------------------------------------*/
.gallery__list {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100vw;
}
@media screen and (max-width: 767px) {
    .gallery__list {
        grid-template-columns: repeat(3, 1fr);
    }
}
    .gallery__item {
        transform: translateY(100%);
        opacity: 0;
    }
    .gallery.active .gallery__item {
        transform: translateY(0);
        opacity: 1;
        transition:
            transform 1s var(--easeOutQuart),
            opacity 1s var(--easeOutQuart);
    }
    .gallery.active .gallery__item:nth-of-type(1) { transition-delay: .6s, .9s }
    .gallery.active .gallery__item:nth-of-type(2) { transition-delay: .65s, .95s }
    .gallery.active .gallery__item:nth-of-type(3) { transition-delay: .7s, 1s }
    .gallery.active .gallery__item:nth-of-type(4) { transition-delay: .75s, 1.05s }
    .gallery.active .gallery__item:nth-of-type(5) { transition-delay: .8s, 1.1s }
    .gallery.active .gallery__item:nth-of-type(6) { transition-delay: .85s, 1.15s }
    .gallery.active .gallery__item:nth-of-type(7) { transition-delay: .9s, 1.2s }
    .gallery.active .gallery__item:nth-of-type(8) { transition-delay: .95s, 1.25s }
    .gallery.active .gallery__item:nth-of-type(9) { transition-delay: 1s, 1.3s }
    .gallery.active .gallery__item:nth-of-type(10) { transition-delay: 1.05s, 1.35s }
    .gallery.active .gallery__item:nth-of-type(11) { transition-delay: 1.1s, 1.4s }
    .gallery.active .gallery__item:nth-of-type(12) { transition-delay: 1.15s, 1.45s }
    .gallery.active .gallery__item:nth-of-type(13) { transition-delay: 1.2s, 1.5s }
    .gallery.active .gallery__item:nth-of-type(14) { transition-delay: 1.25s, 1.55s }
    .gallery.active .gallery__item:nth-of-type(15) { transition-delay: 1.3s, 1.6s }
    .gallery.active .gallery__item:nth-of-type(16) { transition-delay: 1.35s, 1.65s }

        .gallery__content {
            position: relative;
            padding-bottom: 100%;
        }
            .gallery__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }




/*------------------------------------*\
    $COORDINATION
\*------------------------------------*/
.coordination {
    padding-bottom: min(128px, 12.5%);
}

    .coordination__header {
        position: relative;
        height: 240px;
        overflow: hidden;
    }
    @media screen and (max-width: 767px) {
        .coordination__header { height: 120px }
    }

        .coordination__header__bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            filter: hue-rotate(180deg);
            opacity: .75;
        }

        .coordination__title {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            padding-right: calc(100% * (48 / 1125));
            padding-left: calc(100% * (48 / 1125));
            background-color: var(--baseColor);
            /* color: var(--white); */
            mix-blend-mode: multiply;
        }
            .coordination__title .block__title {
                display: block;
                margin-bottom: 0;
            }
            @media screen and (max-width: 767px) {
                .coordination__title .block__title { font-size: 3.2rem }
            }
                .coordination__title .block__title::before { background-color: var(--black) }



.coordination__container {}

.coordination__head { display: flex }
@media screen and (min-width: 768px) {
    .coordination__container:nth-of-type(even) .coordination__head { flex-direction: row-reverse }
}
@media screen and (max-width: 767px) {
    .coordination__head { flex-direction: column-reverse }
}

    .coordination__head__textBox {
        width: max(30%, 400px);
        padding-top: min(48px, calc(100% * (48 / 1125)));
        padding-left: min(48px, calc(100% * (48 / 1125)));
        padding-right: min(24px, calc(100% * (24 / 1125)));
        padding-bottom: min(48px, calc(100% * (48 / 1125)));
        background-color: var(--baseColor);
        color: var(--white);
        color: var(--black);
    }
    @media screen and (min-width: 768px) {
        .coordination__head__textBox {
            /* Add Styles */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .coordination__container:nth-of-type(even) .coordination__head__textBox {
            padding-left: min(24px, calc(100% * (24 / 1125)));
            padding-right: min(48px, calc(100% * (48 / 1125)));
        }
    }
    @media screen and (max-width: 767px) {
        .coordination__head__textBox {
            width: 100%;
            padding-top: 48px;
            padding-right: calc(100% * (48 / 1125));
            padding-bottom: 64px;
        }
    }

        .coordination__head__title {
            margin-bottom: 32px;
            font-family: var(--fontCatch);
            font-size: 3.6rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: .15em;
        }
        @media screen and (max-width: 767px) {
            .coordination__head__title:only-child { margin-bottom: 0 }
        }

        .coordination__head__text {
            font-size: 1.6rem;
            font-weight: 100;
            line-height: 2.25;
        }

    @media screen and (min-width: 768px) {
        .coordination__head__imageContainer {
            flex-grow: 1;
            width: 1px;
        }
    }
        .coordination__head__imageBox {
            position: relative;
            width: 100%;
            min-height: 100%;
            padding-bottom: 50%;
            overflow: hidden;
        }
        @media screen and (max-width: 767px) {
            .coordination__head__imageBox {
                padding-bottom: 60%;
                overflow: hidden;
            }
        }
            .coordination__head__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            @media screen and (max-width: 1279px) and (min-width: 1024px) {
                .coordination__head__image {
                    width: 110%;
                    height: 110%;
                }
            }
            @media screen and (max-width: 1023px) and (min-width: 768px) {
                .coordination__head__image {
                    width: 120%;
                    height: 120%;
                }
            }
            @media screen and (max-width: 767px) {
                .coordination__head__image {
                    width: 150%;
                    height: 150%;
                }
            }





@media screen and (min-width: 768px) {
    .coordination__body { display: flex }
    .coordination__container:nth-of-type(even) .coordination__body { flex-direction: row-reverse }
}

    .coordination__body__imageList {
        padding-top: 4%;
        padding-inline: 4%;
        padding-bottom: 8%;
    }
    @media screen and (min-width: 768px) {
        .coordination__body__imageList {
            display: flex;
            justify-content: space-between;
        }
    }

        .coordination__body__imageItem { position: relative }
        @media screen and (min-width: 768px) {
            .coordination__body__imageItem { width: 32% }
        }
        @media screen and (max-width: 767px) {
            .coordination__body__imageItem:not(:last-of-type) { margin-bottom: 4% }
        }

            .coordination__body__title {
                position: absolute;
                top: 2%;
                left: 0;
                width: max-content;
                padding-right: 2em;
                padding-left: 1.5em;
                background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
                font-size: 2.4rem;
                font-weight: 900;
                line-height: 2;
                letter-spacing: .2em;
                white-space: nowrap;
            }


    @media screen and (min-width: 768px) {
        .coordination__body__imageContainer,
        .coordination__body__container { width: 50% }
    }
    @media screen and (max-width: 767px) {
        .coordination__body__imageContainer { clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0 100%) }
        .coordination__container:nth-of-type(even) .coordination__body__imageContainer { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 95%) }
    }

        .coordination__body__imageBox {
            position: relative;
            min-height: 100%;
            padding-bottom: 120%;
            overflow: hidden;
        }
            .coordination__body__image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            @media screen and (max-width: 1279px) and (min-width: 1024px) {
                .coordination__body__image {
                    width: 110%;
                    height: 110%;
                }
            }
            @media screen and (max-width: 1023px) and (min-width: 768px) {
                .coordination__body__image {
                    width: 120%;
                    height: 120%;
                }
            }

    .coordination__body__container {
        padding-top: min(96px, calc(100% * (96 / 1125)));
        padding-right: min(96px, calc(100% * (96 / 1125)));
        padding-left: min(48px, calc(100% * (48 / 1125)));
        padding-bottom: min(128px, calc(100% * (128 / 1125)));
        --blur: min(8px, calc(100vw * (8 / 1125)));
        filter: drop-shadow(min(4px, calc(100vw * (4 / 1125))) min(4px, calc(100vw * (4 / 1125))) var(--blur) rgba(0, 0, 0, .1));
    }
    @media screen and (min-width: 768px) {
        .coordination__container:nth-of-type(even) .coordination__body__container {
            padding-right: min(48px, calc(100% * (48 / 1125)));
            padding-left: min(96px, calc(100% * (96 / 1125)));
        }
    }
    @media screen and (max-width: 767px) {
        .coordination__body__container {
            padding-right: min(48px, calc(100% * (48 / 1125)));
            --blur: min(32px, calc(100vw * (32 / 1125)));
        }
    }
        .coordination__body__content { margin-bottom: calc(100vw * (64 / 1125)) }
        @media screen and (max-width: 767px) {
            .coordination__body__content { margin-bottom: 64px }
        }

            .coordination__body__link {
                display: block;
                padding-top: min(32px, calc(100vw * (32 / 1125)));
                padding-right: min(48px, calc(100vw * (48 / 1125)));
                padding-left: min(32px, calc(100vw * (32 / 1125)));
                padding-bottom: min(16px, calc(100vw * (16 / 1125)));
                background-color: var(--white);
                --clip-path: min(64px, calc(100vw * (64 / 1125)));
                clip-path: polygon(0% 0%, 100% 0, 100% 100%, var(--clip-path) 100%, 0% calc(100% - var(--clip-path)));
                overflow: hidden;
                transition: transform .6s var(--easeOutQuart);
            }
            .coordination__body__link.un-link {
                pointer-events: none;
                background-color: #e4e4e4;
            }
            @media screen and (min-width: 768px) {
                .coordination__body__link:hover { transform: translateY(-5%) }

                    .coordination__body__link::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: var(--blue);
                        clip-path: circle(0 at left bottom);
                        transition: clip-path .6s var(--easeOutQuart);
                        mix-blend-mode: multiply;
                    }
                    .coordination__body__link:hover::before { clip-path: circle(100% at center) }
            }
            @media screen and (max-width: 767px) {
                .coordination__body__link {
                    padding-top: min(64px, calc(100vw * (64 / 1125)));
                    padding-right: min(96px, calc(100vw * (96 / 1125)));
                    padding-left: min(64px, calc(100vw * (64 / 1125)));
                    padding-bottom: min(32px, calc(100vw * (32 / 1125)));
                    --clip-path: min(128px, calc(100vw * (128 / 1125)));
                }
            }


                .coordination__body__label {
                    display: flex;
                    align-items: center;
                    width: max-content;
                    height: 1.75em;
                    padding-top: .1em;
                    padding-right: .6em;
                    padding-left: .6em;
                    margin-bottom: .75em;
                    background-color: var(--baseColor);
                    color: var(--white);
                    font-size: 1.2rem;
                    font-weight: 900;
                    letter-spacing: .1em;
                }

                .coordination__body__name,
                .coordination__body__price {
                    font-size: 2.4rem;
                    font-weight: 700;
                    line-height: 1.2;
                }

                .coordination__body__name { margin-bottom: 8px }

                .coordination__body__price {
                    margin-bottom: 8px;
                    color: var(--blue);
                    white-space: nowrap;
                }
                @media screen and (max-width: 767px) {
                    .coordination__body__name,
                    .coordination__body__price { font-size: 1.8rem }
                }

                .coordination__body__buy {
                    position: relative;
                    display: flex;
                    justify-content: flex-end;
                    font-size: 2.4rem;
                    font-weight: 900;
                    line-height: 2;
                    letter-spacing: .1em;
                }
                .coordination__body__link.un-link .coordination__body__buy {
                    color: var(--gray);
                    font-size: 1.6rem;
                    font-weight: 700;
                    line-height: 3;
                    mix-blend-mode: multiply;
                }
                @media screen and (min-width: 768px) {
                    .coordination__body__buy { color: var(--white) }
                }
                @media screen and (max-width: 767px) {
                    .coordination__body__buy {
                        padding-right: 1.2em;
                        font-size: 1.8rem;
                    }
                    .coordination__body__link.un-link .coordination__body__buy {
                        padding-right: 0;
                        font-size: 1.4rem;
                        font-weight: 500;
                    }

                        .coordination__body__buy::before {
                            content: "";
                            position: absolute;
                            top: 50%;
                            right: 0;
                            transform: translateY(-50%);
                            width: .75em;
                            height: 1em;
                            background-color: var(--blue);
                            clip-path: polygon(0 0, 100% 50%, 0 100%);
                        }
                        .coordination__body__link.un-link .coordination__body__buy::before { display: none }
                }





.profile {}

@media screen and (min-width: 768px) {
    .profile__content {
        display: flex;
        justify-content: space-between;
    }
}

    .profile__left {
        width: 25%;
        margin-right: auto;
        margin-left: auto;
    }
    @media screen and (max-width: 767px) {
        .profile__left {
            width: max-content;
            margin-bottom: min(128px, calc(100vw * (128 / 1125)));
        }
    }

        .profile__image { clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%) }




    @media screen and (min-width: 768px) {
        .profile__right {
            width: 60%;
            padding-top: 4%;
        }
    }

        .profile__name {
            margin-bottom: 1em;
            font-size: 2.4rem;
            font-weight: 700;
            line-height: 2;
            letter-spacing: .1em;
        }
            .profile__name span {
                display: inline-block;
                padding-left: 1em;
                color: var(--gray);
                font-size: .75em;
                font-weight: 500;
                white-space: nowrap;
            }
            @media screen and (min-width: 768px) {
                .profile__name span { padding-left: 1em }
            }

        .profile__text {
            margin-bottom: 3em;
            font-size: 1.6rem;
            font-weight: 300;
            line-height: 3;
        }

        .profile__link {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 1.4rem;
            font-weight: 500;
            line-height: 1;
        }
            .profile__link__image {
                width: 1.2em;
                margin-right: .5em;
            }

            @media screen and (min-width: 768px) {
                .profile__link { transition: color .3s var(--easeOutQuart) }
                .profile__link:hover { color: var(--gray) }
                .profile__link path { transition: fill .3s var(--easeOutQuart) }
                .profile__link:hover path { fill: #767676 }
            }





/*------------------------------------*\
    $BUY_BUTTON
\*------------------------------------*/
.buy-now {
    padding-inline: 4%;
    padding-bottom: 8%;
    display: flex;
    justify-content: center;
}
.buy-now.buy-now--finished { pointer-events: none }

    .buy-now__button {
        position: relative;
        display: block;
        padding: 8px;
        font-size: 3.2rem;
        font-weight: 900;
        line-height: 3;
        white-space: nowrap;
        overflow: hidden;
    }
    .buy-now.buy-now--finished .buy-now__button {
        color: white;
        font-size: 2.4rem;
        font-weight: 500;
    }

        .buy-now__button::after {
            content: "BUY NOW!";
            position: absolute;
            top: 8px;
            left: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: calc(100% - 16px);
            height: calc(100% - 16px);
            background-color: var(--black);
            clip-path: polygon(
                0 0,
                0 0,
                0 0,
                0 64px,
                0 64px
            );
            color: var(--white);
        }
        .buy-now__button:hover::after {
            top: 0;
            left: 0;
            animation: buyNow .6s var(--easeInSine) both;
            transition:
                top .6s .75s var(--linear),
                left .6s .75s var(--linear);
        }
        @keyframes buyNow {
            0% {
                clip-path: polygon(
                    0 0,
                    0 0,
                    0 0,
                    0 64px,
                    0 64px
                );
            }
            25% {
                clip-path: polygon(
                    0 0,
                    calc(50% + 32px) 0,
                    calc(50% + 32px) 0,
                    calc(50% - 32px) 100%,
                    0 100%
                );
            }
            50% {
                clip-path: polygon(
                    0 0,
                    100% 0,
                    100% 0,
                    calc(50% - 32px) 100%,
                    0 100%
                );
            }
            75% {
                clip-path: polygon(
                    0 0,
                    100% 0,
                    100% calc(100% - 32px),
                    calc(50% - 32px) 100%,
                    0 100%
                );
            }
            100% {
                clip-path: polygon(
                    0 0,
                    100% 0,
                    100% calc(100% - 32px),
                    calc(100% - 32px) 100%,
                    0 100%
                );
            }
        }


        .buy-now__button__inner {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 320px;
            padding-inline: 1.5em;
            background-color: var(--baseColor);
            clip-path: polygon(
                0 0,
                100% 0,
                100% calc(100% - 32px),
                calc(100% - 32px) 100%,
                0 100%
            );
        }
        .buy-now.buy-now--finished .buy-now__button__inner { background-color: #ccc }
            .buy-now__button__inner::before { content: "BUY NOW!" }
            .buy-now.buy-now--finished .buy-now__button__inner::before { content: "予約受付終了！" }