@font-face {
    font-family: "Jost";
    src: url("../assets/fonts/Jost/Jost-VariableFont_wght.woff");
}

@font-face {
    font-family: "NotoSansSC";
    src: url("../assets/fonts/NotoSansSC/NotoSansSC-VariableFont_wght.woff");
}

@font-face {
    font-family: "NotoSerifTC";
    src: url("../assets/fonts/NotoSerifTC/NotoSerifTC-VariableFont_wght.woff");
}

@font-face {
    font-family: "ZenOldMincho";
    src: url("../assets/fonts/ZenOldMincho/ZenOldMincho-Regular.woff");
}

@font-face {
    font-family: "Arimo";
    src: url("../assets/fonts/Arimo/Arimo-VariableFont_wght.woff");
}

@font-face {
    font-family: "ShipporiMincho";
    src: url("../assets/fonts/ShipporiMincho/ShipporiMincho-Regular.woff");
}

@font-face {
    font-family: "ShipporiMincho";
    font-weight: 800;
    src: url("../assets/fonts/ShipporiMincho/ShipporiMincho-ExtraBold.woff");
}

@font-face {
    font-family: "NotoSansJP";
    src: url("../assets/fonts/NotoSansJP/NotoSansJP-VariableFont_wght.woff");
}

@font-face {
    font-family: "NotoSansTC";
    src: url("../assets/fonts/NotoSansTC/NotoSansTC-VariableFont_wght.woff");
}

@font-face {
    font-family: "NotoSerifJP";
    src: url("../assets/fonts/NotoSerifJP/NotoSerifJP-VariableFont_wght.woff");
}

* {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition-duration: 0.3s;

    &::before,
    &::after {
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-block-start: 0;
        padding-block-end: 0;
        padding-inline-start: 0;
        padding-inline-end: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        transition-duration: 0.3s;
    }
}

:root {
    background-color: #090909;
    color: #fff;

    &:has(#gallery-eye-catch) {
        aside {
            z-index: 0;
        }
    }
}

html {
    scroll-behavior: auto;
    scroll-padding-top: calc(2vw + 61px);
}

a {
    color: #fff;
    text-decoration: none;
    pointer-events: auto;
}

button {
    color: #fff;
    background-color: transparent;
    border: none;
    cursor: pointer;
    pointer-events: auto;
}

label {
    pointer-events: auto;
}

input {
    pointer-events: auto;
    border-width: 1px;

    &[type="radio"],
    &[type="checkbox"] {
        display: none;
    }
}

textarea {
    pointer-events: auto;
}

address {
    font-style: normal;
}

.swiper-wrapper {
    pointer-events: auto;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ul {
    list-style-type: none;
}

.from-pc,
.from-tb {
    display: none;
}

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.blur {
    filter: blur(50px);
}

.opacity {
    opacity: 0;
}

.minus-letter {
    &::first-letter {
        margin-left: -0.5em;
    }
}

#loading-cover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 16;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100svh;
    background-color: #000;
    pointer-events: auto;

    &.loading-ended {
        opacity: 0;
        visibility: hidden;
    }

    .logo-mark {
        transform: scale(3);
        margin-bottom: 116px;

        div {
            position: absolute;
            top: -1%;
            left: -1%;
            z-index: 16;
            width: 104%;
            height: 104%;
            transition-duration: 0s;
            background-color: #000;
        }
    }

    progress {
        margin-left: 20px;
        transition-duration: 0s;
        background-color: #fff;

        &::-webkit-progress-bar {
            background-color: #fff;
        }

        &::-webkit-progress-value, &::-moz-progress-bar {
            background-color: #ffde59;
        }
    }
}

.logo-mark {
    position: relative;
    display: block;
    width: 58px;
    height: 58px;
    pointer-events: auto;

    &.open {
        transition-delay: 0.4s;
        transform: translate(-10px, 10px) rotate(45deg);

        span {
            &:nth-of-type(1) {

                &::before,
                &::after {
                    transition-delay: 0.4s;
                    background-color: #ffde59;
                }

                &::before {
                    height: 43px;
                }

                &::after {
                    width: 43px;
                }
            }

            &:nth-of-type(2) {
                transition-delay: 0.4s;
                opacity: 0;

                &::before {
                    transition-delay: 0.1s;
                    top: 0;
                    left: 0;
                }

                &::after {
                    transition-delay: 0.1s;
                    bottom: 0;
                    right: 0;
                }
            }

            &:nth-of-type(3) {
                transition-delay: 0.4s;
                bottom: 28px;
                left: 28px;
                z-index: -1;

                &::before {
                    transition-delay: 0.4s;
                    height: 16px;
                }

                &::after {
                    transition-delay: 0.4s;
                    width: 16px;
                }
            }
        }
    }

    span {
        position: absolute;
        display: block;
        background-color: #fff;
        width: 16px;
        height: 16px;

        &:nth-of-type(1),
        &:nth-of-type(3) {

            &::before,
            &::after {
                content: "";
                background-color: #fff;
                position: absolute;
            }

            &::before {
                width: 16px;
                height: 37px;
            }

            &::after {
                width: 37px;
                height: 16px;
            }
        }

        &:nth-of-type(1) {
            top: 0;
            right: 0;

            &::before,
            &::after {
                top: 0;
                right: 0;
            }

            &::before {
                z-index: 1;
            }
        }

        &:nth-of-type(2) {
            bottom: 50%;
            left: 50%;
            transform: translate(-50%, 50%);

            &::before,
            &::after {
                content: "";
                position: absolute;
                display: block;
                width: 16px;
                height: 16px;
                background-color: #ffde59;
            }

            &::before {
                top: -21px;
                left: -21px;
            }

            &::after {
                bottom: -21px;
                right: -21px;
            }
        }

        &:nth-of-type(3) {
            bottom: 0;
            left: 0;

            &::before,
            &::after {
                bottom: 0;
                left: 0;
            }
        }
    }
}

.view-more-button {
    display: block;
    width: 56px;
    height: 56px;
    transform: rotate(45deg);
    position: relative;

    span {
        position: absolute;
        display: block;
        width: 27.6%;
        height: 27.6%;
        background-color: #fff;

        &::before,
        &::after {
            content: "";
            position: absolute;
            background-color: #fff;
        }

        &:nth-of-type(1) {
            bottom: 0;
            left: 0;

            &::before,
            &::after {
                bottom: 0;
                left: 0;
            }

            &::before {
                width: 100%;
                height: 230%;
            }

            &::after {
                width: 230%;
                height: 100%;
            }
        }

        &:nth-of-type(2) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }

        &:nth-of-type(3) {
            top: 0;
            right: 0;

            &::before,
            &::after {
                top: 0;
                right: 0;
            }

            &::before {
                width: 360%;
                height: 100%;
            }

            &::after {
                width: 100%;
                height: 360%;
            }
        }
    }
}

.cross {
    position: absolute;

    &::before,
    &::after {
        content: "";
        position: absolute;
        background-color: #fff;
    }
}

.scroll-signboad {
    position: relative;
    width: 2px;
    overflow-y: clip;

    &::before {
        content: "";
        position: absolute;
        left: -1px;
        width: 2px;
        height: 100%;
        background-color: #fff;
        animation: scrollSignAnim 3s linear infinite;
    }

    &::after {
        content: "SCROLL";
        position: absolute;
        left: 1em;
        font-family: "NotoSerifTC";
        font-size: 10px;
        font-weight: 700;
        writing-mode: vertical-rl;
        text-orientation: sideways;
    }
}

.wpcf7-submit {
    cursor: pointer;
}

#clip-box {
    overflow: clip;
    position: relative;
    top: 0;
    right: 0;

    &:has(#gallery-eye-catch) {
        height: 100svh;
        pointer-events: none;
    }

    &.open {
        right: 272px;
    }

    .cover {
        display: none;
    }
}

body {
    pointer-events: none;
    position: relative;

    &:has(#gallery-eye-catch) {
        footer {
            &::before {
                background-color: transparent;
            }
        }
    }

    &:has(#gallery-bg-container >div:nth-child(4)) {
        aside {
            text-shadow: 1px 1px 1px #000;

            nav {
                .white-bar {
                    box-shadow: 0px 0px 0px #000;
                }

                &.open {
                    .white-bar {
                        box-shadow: 1px 2px 1px #000;
                    }
                }
            }
        }
    }

    &.open {
        overflow: hidden auto;
    }
}

h1 {
    font-family: "Arimo";
    font-size: 12px;
    font-weight: 400;
    text-shadow: 2px 2px 1px #000;
    margin: 0 0 0 10px;
    width: 145px;
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 17;

    &.open {
        left: -272px;
    }

    &.invisible {
        opacity: 0;
    }

    &::before,
    &::after {
        content: "";
        position: absolute;
        display: block;
        background-color: #fff;
    }

    &::before {
        top: 0;
        left: -1px;
        width: 2px;
        height: 140%;
    }

    &::after {
        bottom: -1px;
        left: -10px;
        width: 101%;
        height: 2px;
    }

    span {
        font-size: 18px;

        span {
            color: #ffde59;
        }
    }

    a {
        position: absolute;
        left: 5px;
        bottom: 5px;
    }
}

/* #moc-h1 {
    font-family: "NotoSansSC";
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 0 10px;
    width: 145px;
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    background-color: #000;
    mix-blend-mode: difference;
    &.open {
        left: -272px;
    }
    &.invisible {
        opacity: 1%;
    }
    &::before, &::after {
        content: "";
        position: absolute;
        display: block;
        background-color: #fff;
    }
    &::before {
        top: 0;
        left: -1px;
        width: 2px;
        height: 140%;
    }
    &::after {
        bottom: -1px;
        left: -10px;
        width: 101%;
        height: 2px;
    }
    span {
        font-size: 18px;
        span {
            color: #ffde59;
        }
    }
    a {
        position: absolute;
        left: 5px;
        bottom: 5px;
    }
}

#moc-ham-button {
    position: fixed;
    top: 2vw;
    right: 2vw;
    z-index: 15;
    &.invisible {
        opacity: 1%;
    }
} */

header {
    position: fixed;
    inset: 0;
    pointer-events: none;

    #ham-button {
        position: absolute;
        top: 2vw;
        right: 2vw;
        z-index: 15;

        width: 44px;
        height: 44px;

        &:not(.open) {
            span {

                &::before,
                &::after {
                    box-shadow: 2px 2px 1px #000;
                }

                &:nth-of-type(2) {
                    box-shadow: 2px 2px 1px #000;
                }
            }
        }

        &.open {
            span {
                &:nth-of-type(3) {
                    bottom: 24px;
                    left: 24px;

                    &::before {
                        height: 12px;
                    }

                    &::after {
                        width: 12px;
                    }
                }
            }

            small {
                transition-delay: 0.4s;
                transform: rotate(-45deg) translateX(25px);
            }
        }

        span {
            &:nth-of-type(1) {
                width: 12px;
                height: 12px;

                &::before {
                    width: 12px;
                    height: 28px;
                }

                &::after {
                    width: 28px;
                    height: 12px;
                }
            }

            &:nth-of-type(2) {
                width: 12px;
                height: 12px;

                &::before {
                    top: -16px;
                    left: -16px;

                    width: 12px;
                    height: 12px;
                }

                &::after {
                    bottom: -16px;
                    right: -16px;

                    width: 12px;
                    height: 12px;
                }
            }

            &:nth-of-type(3) {
                width: 12px;
                height: 12px;

                &::before {
                    width: 12px;
                    height: 28px;
                }

                &::after {
                    width: 28px;
                    height: 12px;
                }
            }

        }

        small {
            position: absolute;
            top: 110%;
            left: 50%;
            transform: translateX(-50%);

            text-shadow: 1px 1px 1px #000;
        }
    }
}

aside {
    position: fixed;
    inset: 0;
    z-index: -2;

    nav {
        font-family: "NotoserifTC";
        margin-top: 11svh;
        position: absolute;
        top: 0;
        right: 0;
        width: 272px;
        opacity: 0;

        &.open {
            opacity: 1;

            span {
                pointer-events: auto;
            }

            .column-from-pc {
                &:where(:first-child, :last-child) {
                    a {
                        left: 0;

                        span {
                            &.white-bar {
                                height: 48px;
                            }

                            &:not(.white-bar) {
                                clip-path: inset(0);
                                opacity: 1;
                                filter: none;
                            }
                        }
                    }
                }

                &:last-child {
                    a {
                        &:nth-last-of-type(2),
                        &:last-of-type {
                            span {
                                &.img-container {
                                    &:first-child {
                                        opacity: 1;
                                        filter: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        a,
        span {
            pointer-events: none;
        }

        .column-from-pc {
            &:first-child {
                a {
                    &:first-of-type {
                        span {
                            &:nth-last-of-type(2) {
                                transition-delay: .9s;
                            }

                            &:last-of-type {
                                transition-delay: 1.1s;
                            }
                        }
                    }

                    &:nth-of-type(2) {
                        .white-bar {
                            transition-delay: .3s;
                        }

                        span {
                            &:nth-last-of-type(3) {
                                transition-delay: 1.2s;
                            }

                            &:nth-last-of-type(2) {
                                transition-delay: 1.3s;
                            }

                            &:last-of-type {
                                transition-delay: 1.4s;
                            }
                        }
                    }

                    &:last-of-type {
                        .white-bar {
                            transition-delay: .6s;
                        }

                        span {
                            &:nth-last-of-type(2) {
                                transition-delay: 1.5s;
                            }

                            &:last-of-type {
                                transition-delay: 1.7s;
                            }
                        }
                    }
                }
            }

            &:last-child {
                a {
                    &:first-of-type {
                        .white-bar {
                            transition-delay: .9s;
                        }

                        span {
                            &:nth-last-of-type(2) {
                                transition-delay: 1.8s;
                            }

                            &:last-of-type {
                                transition-delay: 2s;
                            }
                        }
                    }

                    &:nth-of-type(2) {
                        .white-bar {
                            transition-delay: 1.2s;
                        }

                        span {
                            &:nth-last-of-type(2) {
                                transition-delay: 2.1s;
                            }

                            &:last-of-type {
                                transition-delay: 2.3s;
                            }
                        }
                    }

                    &:nth-last-of-type(2),
                    &:last-of-type {
                        display: block;
                        font-size: 16px;
                        margin-top: 4svh;
                        margin-left: 111px;
                        position: relative;

                        .img-container {
                            position: absolute;
                            top: 50%;
                            left: -38px;
                            display: block;
                            width: 30px;
                            height: 30px;
                            background-size: contain;
                            background-position: center;
                            background-repeat: no-repeat;
                            transform: translateY(-50%);
                            background-color: transparent;

                            &:first-child {
                                opacity: 0;
                                filter: blur(100px);
                            }
                        }

                        span {
                            &:last-of-type {
                                font-size: 11px;
                            }
                        }
                    }

                    &:nth-last-of-type(2) {
                        .img-container {
                            &:first-child {
                                transition-delay: 1.5s;
                                background-image: url("../assets/imgs/アイコン等写真以外/Instagram.svg");
                            }

                            &:nth-child(2) {
                                background-image: url("../assets/imgs/アイコン等写真以外/InstagramHalo.svg");
                                opacity: 0;
                            }
                        }

                        span {
                            &:nth-last-of-type(2) {
                                transition-delay: 2.4s;
                            }

                            &:last-of-type {
                                transition-delay: 2.6s;
                            }
                        }
                    }

                    &:last-of-type {
                        .img-container {
                            &:first-child {
                                background-image: url("../assets/imgs/アイコン等写真以外/メールアイコン.svg");
                                transition-delay: 1.8s;
                            }

                            &:nth-child(2) {
                                background-image: url("../assets/imgs/アイコン等写真以外/メールアイコンデルタ.svg");
                                opacity: 0;
                            }
                        }

                        span {
                            &:nth-last-of-type(2) {
                                transition-delay: 2.7s;
                            }

                            &:last-of-type {
                                transition-delay: 2.9s;
                            }
                        }
                    }
                }
            }

            a {
                display: block;
                margin-top: 4svh;
                margin-left: 21px;
                padding-left: 9px;
                font-size: 24px;
                line-height: 1em;
                position: relative;
                left: 100px;

                &.current {
                    span {
                        &:last-of-type {
                            color: #ffde59;
                        }
                    }
                }

                span {
                    &.white-bar {
                        position: absolute;
                        top: 50%;
                        left: -9px;
                        display: block;
                        height: 0;
                        width: 2px;
                        background-color: #fff;
                        transform: translateY(-50%);
                    }

                    &:not(.white-bar, .img-container) {
                        clip-path: inset(0 0 0 100%);
                        opacity: 0;
                        filter: blur(100px);
                    }

                    &:last-of-type {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

main,
footer {
    position: relative;
    z-index: -1;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        background-color: #000;
        pointer-events: auto;
    }
}

footer {
    padding-top: 53px;
    padding-bottom: 53px;

    #corpo-info {
        border: #FDFDFD solid 1px;
        margin: 0 10px 36px;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url("../assets/imgs/写真/corpo_info_bg.jpg");
            background-position: center;
            background-size: cover;
            filter: grayscale(1) brightness(0.4);
        }

        h2 {
            position: relative;
            font-size: 17px;
            text-align: center;
            line-height: 16px;
            width: fit-content;
            margin: 24px auto 32px;

            >span {
                &:first-of-type {
                    display: block;
                    margin: 0 auto 10px;
                }

                &:nth-of-type(2) {
                    color: #ffde59;
                    font-size: 7px;
                }
            }
        }

        .row-from-pc {
            .column-from-pc {
                h3 {
                    position: relative;
                    font-family: "Arimo";
                    font-size: 24px;
                    font-style: italic;
                    font-weight: 700;
                    text-align: center;
                }

                .row {
                    position: relative;
                    justify-content: center;
                    align-items: center;
                    gap: 55px;
                    margin: 32px 0;

                    .view-more-button {
                        width: 60px;
                        height: 60px;
                    }

                    .img-container {
                        display: block;
                        width: 70px;
                        height: 70px;
                        margin: 10px;
                        position: relative;

                        &::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            display: block;
                            width: 100%;
                            height: 100%;
                            opacity: 0;
                            background-image: url("../assets/imgs/アイコン等写真以外/InstagramHalo.svg");
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;
                        }
                    }
                }

                dl {
                    position: relative;
                    font-family: "Arimo";
                    text-align: center;

                    dt {
                        margin-bottom: 17px;
                    }

                    dd {
                        margin-bottom: 9px;
                    }
                }

                >a {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    gap: 13px;
                    width: 66vw;
                    margin: 44px auto 0;
                    align-items: center;
                    background-color: #D9D9D94D;

                    .img-container {
                        display: inline-block;
                        width: 35px;
                        height: 35px;
                        position: relative;

                        &::after {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-image: url("../assets/imgs/アイコン等写真以外/メールアイコンデルタ.svg");
                            background-size: contain;
                            background-position: center;
                            background-repeat: no-repeat;
                            opacity: 0;
                        }

                        img {
                            object-fit: contain;
                            position: relative;
                            z-index: 1;
                        }
                    }
                }
            }

            >.img-container {
                position: relative;
                width: 267px;
                height: 200px;
                margin: 70px auto 59px;
                overflow: clip;

                img {
                    position: absolute;
                    top: -38%;
                    left: -12%;
                    width: 150%;
                    height: 150%;
                    filter: brightness(0.8);
                }
            }
        }
    }

    small {
        display: block;
        text-align: center;
        font-size: 10px;
        font-weight: 200;
    }
}

.vertical-line {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 9px;
    width: 2px;
    height: 0;
    background-color: #fff;
    transition-duration: 3s;

    &.top-touching {
        height: 100svh;
    }
}

.horizontal-line {
    position: absolute;
    bottom: calc(8svh - 2px);
    right: 0;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition-duration: 2s;

    &.top-touching {
        width: 100%;
    }
}

main {
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    &:has(#gallery-eye-catch) {
        position: relative;
        overflow: clip scroll;
        scroll-snap-type: y proximity;
        height: 100%;
        pointer-events: auto;

        footer {
            scroll-snap-align: start;
        }
    }

    &:has(#gallery-eye-catch.white-out) {
        @supports not (animation-timeline: scroll()) {
            #gallery-eye-catch-images {
                &::before {
                    background-color: #ffffff55;
                }
            }
        }
    }

    &:has(#countries li.swiper-slide-active:where([data-swiper-slide-index="1"], [data-swiper-slide-index="3"])) {
        #gallery-bg-container {
            >div {
                &:nth-child(2), &:nth-child(5) {
                    background-color: #fff;
                }
            }
        }
        
        .pagination {
            &:has(div.active:first-child) {
                &::before {
                    background-color: #000;
                }

                .pagination-bullet {
                    background-color: #000;

                    &.active {
                        background-color: #FFDE59;

                        &::before {
                            border-color: #FFDE59;
                        }
                    }

                    &::before {
                        border-color: #000;
                    }
                }
            }
        }
    }
}

#hero-img {
    height: 100svh;
    position: relative;
    inset: 0;
    pointer-events: auto;

    &.opening {
        .bg-img {
            filter: blur(300px);
        }

        .horizontal-line {
            clip-path: inset(0 100% 0 0);
        }

        h2 {
            .img-container {
                clip-path: inset(0 100% 0 0);

                .fill-img-container {
                    clip-path: inset(0 100% 0 0);
                }
            }
        }
    }

    .horizontal-line {
        clip-path: inset(0);
    }

    h2 {
        font-size: 0;
        line-height: 0;
        position: absolute;
        bottom: 1svh;
        right: 20px;
        z-index: 1;
        text-align: right;

        .img-container {
            position: relative;
            display: inline-block;
            height: 35px;
            width: fit-content;
            clip-path: inset(0);
            transition-duration: 1s;
            transition-delay: 0.7s;
            transition-timing-function: linear;

            .fill-img-container {
                content: "";
                position: absolute;
                inset: 0;
                display: block;
                width: 100%;
                height: 100%;
                clip-path: inset(0);
                transition-duration: inherit;
                transition-timing-function: linear;
                background-size: contain;
                background-position: right;
                background-repeat: no-repeat;
            }

            &:nth-child(1) {
                .fill-img-container {
                    background-image: url("../assets/imgs/アイコン等写真以外/VISIONARY.svg");
                    transition-delay: 1.6s;
                }
            }

            &:nth-child(2) {
                margin-top: 20px;
                transition-delay: 1.7s;

                .fill-img-container {
                    background-image: url("../assets/imgs/アイコン等写真以外/STUDIO.svg");
                    transition-delay: 2.6s;
                }
            }

            img {
                object-fit: contain;
                object-position: right;
            }
        }
    }

    .bg-img {
        position: relative;
        inset: 0;
        height: 92%;
        background-image: url("../assets/imgs/写真/快適空間ヒーローイメージ.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition-duration: .6s;
        transition-delay: 2.9s;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: #00000087;
        }
    }
}

#top-catch-copy {
    height: 100svh;
    position: relative;
    inset: 0;
    pointer-events: auto;

    .bg-img {
        position: absolute;
        top: 10%;
        width: 100%;
        height: 80%;
        background-image: url("../assets/imgs/写真/トップキャッチコピー背景.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: #484848A6;
        }
    }

    .white-bar-wrapper {
        margin: 0 auto;
        min-height: 54%;
        position: relative;
        top: 23%;
        left: 0;

        &.inactive {
            .white-bar {

                &:nth-child(1),
                &:nth-child(14) {
                    width: 0;
                }

                &:not(:nth-child(1), :nth-child(14)) {
                    height: 0;
                }
            }
        }

        .white-bar {
            position: absolute;
            z-index: 1;
            background-color: #fff;
            transition-timing-function: linear;
            transition-duration: 0.5s;

            &:nth-child(1),
            &:nth-child(14) {
                width: 100%;
                height: 4px;
            }

            &:not(:nth-child(1), :nth-child(14)) {
                top: 0;
                width: 4px;
                transition-delay: 0.3s;
            }

            &:nth-child(1) {
                top: 0;
                right: 0;
            }

            &:nth-child(14) {
                bottom: 0;
            }

            &:nth-child(2),
            &:nth-child(13) {
                height: 217px;
                transition-delay: 0.6s;
            }

            &:nth-child(2) {
                left: 0;
            }

            &:nth-child(13) {
                right: 0;
            }

            &:nth-child(3),
            &:nth-child(12) {
                height: 150px;
                transition-delay: 0.9s;
            }

            &:nth-child(3) {
                left: 8.4%;
            }

            &:nth-child(12) {
                right: 8.4%;
            }

            &:nth-child(4),
            &:nth-child(11) {
                height: 111px;
                transition-delay: 1.2s;
            }

            &:nth-child(4) {
                left: 16.2%;
            }

            &:nth-child(11) {
                right: 16.2%;
            }

            &:nth-child(5),
            &:nth-child(10) {
                height: 78px;
                transition-delay: 1.5s;
            }

            &:nth-child(5) {
                left: 24.4%;
            }

            &:nth-child(10) {
                right: 24.4%;
            }

            &:nth-child(6),
            &:nth-child(9) {
                height: 53px;
                transition-delay: 1.8s;
            }

            &:nth-child(6) {
                left: 32.3%;
            }

            &:nth-child(9) {
                right: 32.3%;
            }

            &:nth-child(7),
            &:nth-child(8) {
                height: 37px;
                transition-delay: 2.1s;
            }

            &:nth-child(7) {
                left: 40.3%;
            }

            &:nth-child(8) {
                right: 40.3%;
            }
        }

        strong {
            font-family: "ZenOldMincho";
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            z-index: 1;
            display: block;
            padding-top: 180px;
            letter-spacing: 0.1em;

            &.inactive {
                filter: blur(50px);

                span {
                    &:nth-of-type(2) {
                        filter: blur(25px);
                    }
                }
            }

            span {
                &:first-of-type {
                    color: #ffde59;
                }

                &:nth-of-type(2) {
                    display: inline-block;
                    margin-top: 25px;
                    font-size: 12px;
                    transition-delay: 1s;
                }
            }
        }
    }
}

#top-reform {
    height: 100svh;
    position: relative;
    inset: 0;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        height: 100%;
        width: 100%;
        pointer-events: auto;
    }

    &.inactive {
        .text-container {
            clip-path: circle(0%);
        }
    }

    .text-container {
        h2 {
            font-feature-settings: "palt";
        }
    }
}

.text-container {
    position: absolute;
    top: 16%;
    right: 0;
    width: 100%;
    height: 42%;
    text-align: center;
    background-image: linear-gradient(90.06deg, rgba(31, 31, 31, 0.75) 0.06%, rgba(32, 32, 32, 0.2) 78.79%);
    clip-path: circle(100%);
    transition-duration: 1s;
    text-shadow: 0 0 5px #000;

    h2 {
        font-family: "NotoSerifTC";
        padding-top: 1.8svh;
        line-height: 0.85em;

        span {
            &:last-of-type {
                font-family: "ZenOldMincho";
                font-weight: 400;
                font-size: 16px;
                letter-spacing: 0.1em;
            }
        }
    }

    p {
        font-family: "ZenOldMincho";
        line-height: 20px;
        padding-top: 10px;
    }

    .view-more-button {
        position: absolute;
        top: 70%;
        right: 50%;
        width: 56px;
        height: 56px;
        transform: translateX(50%) rotate(45deg);

        span {
            &:nth-of-type(2) {
                z-index: 1;
            }

            &:nth-of-type(4) {
                top: 50%;
                left: 50%;
                display: block;
                width: 200%;
                height: 4px;
                background-image: linear-gradient(to right, #fff, #fff);
                box-shadow: 0 0 5px #000;

                transform-origin: left;
                transform: translateY(-50%) rotate(-45deg);

                &::before {
                    content: "click";
                    position: absolute;
                    bottom: 8px;
                    background-color: transparent;
                    text-shadow: 0 0 5px #000;
                    letter-spacing: 2px;
                }
            }
        }
    }
}

.bg-img-container {
    position: absolute;
    top: 10%;
    z-index: -1;
    width: 100%;
    height: 80%;
    overflow: hidden;

    &:has(button.picked:nth-child(1)) {
        .display {
            img:nth-of-type(1) {
                opacity: 1;
            }
        }
    }

    &:has(button.picked:nth-child(2)) {
        .display {
            img:nth-of-type(2) {
                opacity: 1;
            }
        }
    }

    &:has(button.picked:nth-child(3)) {
        .display {
            img:nth-of-type(3) {
                opacity: 1;
            }
        }
    }

    &:has(button.picked:nth-child(4)) {
        .display {
            img:nth-of-type(4) {
                opacity: 1;
            }
        }
    }

    &:has(button.picked:nth-child(5)) {
        .display {
            img:nth-of-type(5) {
                opacity: 1;
            }
        }
    }

    .display {
        position: relative;
        inset: 0;
        width: 100%;
        height: calc(100% / 3 * 2);

        img, p {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
    }

    .pick-img-container {
        height: calc(100% / 3);
        display: grid;
        grid-template-columns: 33% 33% calc(100% - 66%);
        grid-template-rows: 50% 50%;

        .pick {
            height: auto;
            position: relative;
            inset: 0;
            font-size: 0;
            clip-path: inset(0);

            &::after {
                content: "";
                position: absolute;
                inset: 0;
                background-color: #000000B2;
                opacity: 1;
                transition-duration: 1s;
            }

            &:not(.picked):not(:hover) {
                filter: blur(5px);
            }

            &.picked {
                &::after {
                    opacity: 0;
                }
            }
        }

        .pick-img1 {
            grid-column: 1;
            grid-row: 1;
        }

        .pick-img2 {
            grid-column: 2;
            grid-row: 1;
        }

        .pick-img3 {
            grid-column: 1;
            grid-row: 2;
        }

        .pick-img4 {
            grid-column: 2;
            grid-row: 2;
        }

        .pick-img5 {
            grid-column: 3;
            grid-row: 1 / 3;
        }
    }
}

#top-pergola {
    height: 100svh;
    position: relative;
    inset: 0;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        height: 100%;
        width: 100%;
        pointer-events: auto;
    }

    &.inactive {
        .text-container {
            clip-path: circle(0%);
        }
    }

    .bg-img-container {
        .pick-img-container {
            .pick {
                grid-row: 1 / 3;
            }

            .pick-img2 {
                grid-column: 2;
            }

            .pick-img3 {
                grid-column: 3;
            }
        }
    }
}

#new-world {
    text-align: center;
    padding-bottom: 95px;
    pointer-events: auto;

    h2 {
        position: relative;
        z-index: 1;
        font-family: "NotoSansSC";
        font-size: 24px;
        font-weight: 400;
        padding-bottom: 60px;
        clip-path: inset(0);
        visibility: visible;
        transition-duration: 1s;

        &.inactive {
            clip-path: inset(0 95% 0 0);
            visibility: hidden;
        }

        span {
            font-family: "NotoSerifTC";
            font-size: 40px;
            font-weight: 600;
        }
    }

    .img-container {
        height: 383.17px;
        width: 287.38px;
        margin: 0 auto;
        border: solid 8px #fff;
        position: relative;
        inset: 0;

        &::before,
        &::after {
            content: "";
            position: absolute;
            background-color: transparent;
            display: block;
            width: 240.64px;
            height: 49px;

        }

        &::before {
            top: 0;
            left: 0;
            border-top: solid 6px #fff;
            transform-origin: left top;
            transform: translate(106.75px, -54.74px) rotate(135deg);
        }

        &::after {
            top: unset;
            bottom: 0;
            right: 0;
            border-bottom: solid 6px #fff;
            transform-origin: right bottom;
            transform: translate(-106.75px, 54.74px) rotate(135deg);
        }

        &.inactive {
            filter: blur(50px);
        }
    }

    #new-world-catch-copy {
        margin: 85px 29px 0;
        padding: 15px 35px 21px;
        position: relative;
        inset: 0;
        z-index: 1;

        &.inactive {
            .cross {
                &:first-child {
                    &::before {
                        height: 0;
                    }

                    &::after {
                        width: 0;
                    }
                }

                &:last-child {
                    &::before {
                        width: 0;
                    }

                    &::after {
                        height: 0;
                    }
                }
            }
        }

        strong {
            font-family: "NOtoSerifTC";
            font-size: 32px;
            font-weight: 400;
            letter-spacing: 0.1em;
            visibility: visible;
            opacity: 1;

            &.inactive {
                visibility: hidden;
                opacity: 0;
            }

            span {
                color: #ffde59;
            }
        }

        .cross {
            &:first-child {
                top: 0;
                left: 0;

                &::before {
                    top: -43px;
                    left: 0;
                    width: 1px;
                    height: 156px;
                }

                &::after {
                    top: 1px;
                    left: -19px;
                    width: 117px;
                    height: 1px;
                }
            }

            &:last-child {
                right: 0;
                bottom: 0;

                &::before {
                    bottom: 2px;
                    right: -19px;
                    width: 117px;
                    height: 1px;
                }

                &::after {
                    bottom: -43px;
                    right: 1px;
                    width: 1px;
                    height: 156px;
                }
            }
        }
    }

    p {
        font-family: "NotoSansSC";
        text-align: left;
        width: 300px;
        margin: 0 auto;
        padding-top: 1em;
        padding-right: 30px;
        visibility: visible;
        opacity: 1;
        transition-duration: .7s;

        &:first-of-type {
            padding-top: 61px;
        }

        &:nth-child(2) {
            transition-delay: 0.6s;
        }

        &:nth-child(3) {
            transition-delay: 1.2s;
        }
    }

    .text-container2 {
        &.inactive {
            p {
                transform: translateY(10px);
                visibility: hidden;
                opacity: 0;
            }
        }
    }
}

#top-gallery {
    padding-bottom: 104px;
    overflow-x: clip;
    padding-top: calc(5vh + 80px);
    pointer-events: auto;

    #top-gallery-swiper {
        height: 36svh;
        padding-bottom: 20px;
        position: relative;
        inset: 0;

        h2 {
            font-family: "Arimo";
            font-size: 16px;
            font-weight: 700;
            font-style: italic;
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 3vw;
            transform: translateY(-50%);
        }

        .swiper-button-next {
            inset: unset;
            height: 8vw;
            width: 8vw;
            top: -5svh;
            right: 2vw;

            &::before,
            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                right: 0;
                height: 3px;
                background-color: #fff;
            }

            &::before {
                width: 60%;
                transform-origin: right;
                transform: rotate(30deg);
            }

            &::after {
                width: 100%;
            }
        }

        .swiper-wrapper {
            .swiper-slide {
                width: calc(34%/5);
                height: 100%;
                padding: 0 1px;
                clip-path: inset(0 0 0 calc(100% - 34vw/5));
                transition-duration: 1.5s;

                &.activate {
                    animation: swiperSlideActivated 1.5s forwards;
                }

                &.inactivate {
                    animation: swiperSlideInactivated 1.5s forwards;
                }

                &:not(.activate) {
                    opacity: 0.8;
                }

                img {
                    object-position: right;
                }
            }
        }

        #gallery-description {
            position: absolute;
            bottom: 3px;
            left: 3vw;
            font-size: 10px;
        }
    }

    #view-more-gallery {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: 54px 0 0;

        p {
            font-family: "Jost";
            font-size: 14px;
            font-weight: 700;

            span {
                font-family: "Arimo";
            }
        }

        .view-more-button {
            width: 58px;
            height: 58px;
        }
    }
}

#contact-prime {
    padding-top: 120px;
    padding-bottom: 77px;
    pointer-events: auto;

    h2 {
        font-family: "Jost";
        font-size: 32px;
        font-weight: 400;
        text-align: center;
        line-height: 0.75em;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            bottom: -0.75em;
            left: 50%;
            height: 2px;
            width: 36px;
            background-color: #fff;
            transform: translateX(-50%);
        }

        span {
            font-family: "NotoSansJP";
            font-size: 15px;
        }
    }

    >p {
        text-align: center;
        word-break: keep-all;
        overflow-wrap: anywhere;
        padding-top: 84px;
    }

    dl {
        padding: 28px 0 44px;

        .row {
            justify-content: center;

            &:first-child {
                font-family: "Arimo";
                align-items: baseline;

                dd {
                    font-size: 24px;
                    font-weight: 700;
                }
            }
        }
    }

    form {
        color: #2A2A2A;
        background-color: #fff;
        width: 345px;
        margin: 0 auto;
        padding: 33px 10px 63px;
        position: relative;

        .legend {
            display: block;
            background-color: #ECECEC;
            margin: 33px 0 12px;
            padding: 8px;
            border-top: #2b2b2b solid 2px;
            text-wrap: nowrap;

            span {
                color: #fff;
                background-color: #B41313;
                margin-left: 0.5em;
                padding: 0 6px;
            }
        }

        input[type="radio"]:checked+.wpcf7-list-item-label,
        input[type="checkbox"]:checked+.wpcf7-list-item-label {
            &::before {
                color: #686868;
            }
        }

        input[type="radio"]+.wpcf7-list-item-label,
        input[type="checkbox"]+.wpcf7-list-item-label {
            display: block;
            padding-left: 44px;
            color: #686868;
            position: relative;
            cursor: pointer;

            &::before {
                content: "✔";
                position: absolute;
                top: 50%;
                left: 19px;
                display: inline-block;
                width: 13px;
                height: 13px;
                line-height: 1em;
                font-size: 10px;
                color: transparent;
                background-color: #fff;
                border: #686868 solid 1px;
                transition-duration: 0s;
                transform: translateY(-50%);
            }

            &[type="checkbox"] {
                font-size: 15px;
                color: #1a1a1a;
                padding-left: 20px;

                &::before {
                    left: 0;
                }
            }
        }

        input[type="text"] {
            width: 153px;
            height: 36px;
            padding-left: 7px;
            border-radius: 4px;

            &[name="family-name"],
            &[name="furigana-family-name"] {
                margin-left: 5px;
            }

            &[name="given-name"],
            &[name="furigana-given-name"] {
                margin-right: 5px;
            }

            &#postal-code {
                width: 190px;
            }

            &#street-address {
                width: 296px;
                margin-top: 5px;
                margin-left: 19px;
            }
        }

        #tel,
        #email {
            width: 309px;
            height: 36px;
            margin: 5px 7px;
            padding-left: 7px;
            border-radius: 4px;
        }

        label[for="postal-code"] {
            font-size: 20px;
        }

        textarea {
            width: 309px;
            height: 143px;
            margin: 0 7px;
            padding: 7px;
            border-radius: 4px;
        }

        .line {
            height: 1px;
            width: 325px;
            margin: 30px 0;
            background-color: #000;
        }

        #privacy-policy {
            font-size: 14px;
            margin: 0 8px;
            padding: 22px 25px;
            background-color: #ECECEC;

            a {
                color: inherit;
                text-decoration: underline;
            }

            label {
                margin-top: 1em;
            }
        }

        input[type="submit"],
        input[type="button"] {
            font-family: "NotoSansJP";
            font-size: 20px;
            font-weight: 700;
            color: #1a1a1a;
            display: block;
            margin: 45px auto 0;
            padding: 17px 30px;
            background-color: #fff;
            border-color: #1a1a1a;
            border-radius: 4px;

            &:hover {
                color: #fff;
                background-color: #1a1a1a;
            }
        }

        p {
            padding-left: 0.5em;
        }

        .row {
            justify-content: center;
            gap: 20px;

            input {
                display: inline-block;
                padding: 17px 42px;
                margin: 45px 0 0;

                &:nth-of-type(2) {
                    padding-right: 48px;
                    padding-left: 48px;
                }
            }
        }
    }
}

#thanks-prime {
    padding-top: 120px;
    padding-bottom: 77px;
    pointer-events: auto;

    h2 {
        font-family: "Jost";
        font-size: 32px;
        font-weight: 400;
        text-align: center;
        line-height: 24px;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            bottom: -23px;
            left: 50%;
            height: 2px;
            width: 36px;
            background-color: #fff;
            transform: translateX(-50%);
        }

        span {
            font-family: "NotoSansJP";
            font-size: 15px;
        }
    }

    p {
        font-family: "NotoSansJP";

        &:first-of-type {
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            margin: 103px 0 44px;
        }

        &:nth-of-type(2),
        &:nth-of-type(3) {
            font-size: 15px;
            margin: 0 14px 0.5em;
        }

        &:nth-of-type(4) {
            font-size: 15px;
            margin: 2em 14px 0;

            span,
            a {
                font-size: 18px;
                font-weight: 700;
                color: #B41313;
                pointer-events: auto;
            }
        }
    }

    >a {
        display: block;
        width: fit-content;
        margin: 54px auto 155px;
        padding: 17px 52px;
        font-size: 20px;
        font-weight: 700;
        color: #1a1a1a;
        background-color: #fff;
        border-radius: 4px;

        &:hover {
            color: #fff;
            background-color: #1a1a1a;
        }
    }
}

#privacy-prime {
    padding-top: 120px;
    padding-bottom: 77px;
    margin: 0 15px;
    pointer-events: auto;

    h2 {
        font-family: "Jost";
        font-size: 32px;
        font-weight: 400;
        text-align: center;
        line-height: 24px;
        position: relative;
        margin-bottom: 103px;

        &::after {
            content: "";
            position: absolute;
            bottom: -23px;
            left: 50%;
            height: 2px;
            width: 36px;
            background-color: #fff;
            transform: translateX(-50%);
        }

        span {
            font-family: "NotoSansJP";
            font-size: 15px;
        }
    }

    small {
        color: #A8A8A8;
        text-align: right;
        display: block;

        time {
            color: #fff;
            display: inline;
            padding-right: 5px;
        }
    }

    p {
        &:first-of-type {
            margin-top: 80px;
            font-size: 14px;
        }
    }

    #privacy-content {
        max-width: 900px;
        margin-top: 80px;
        margin-right: auto;
        margin-left: auto;
        padding: 1em;
        color: #000;
        background-color: #fff;

        >li {
            list-style-position: inside;
            position: relative;
            padding-left: 20px;

            &::marker {
                content: "第" counter(list-item)"条";
                font-size: 24px;
            }

            &::before {
                content: "";
                position: absolute;
                top: 4px;
                left: -5px;
                width: 3px;
                height: 24px;
                background-color: #ffde59;
            }

            >dl {
                display: inline;

                >dt {
                    display: inline;
                    font-size: 20px;
                }

                >dd {
                    font-size: 16px;
                    margin: 1em 0 3em 1em;

                    ol {
                        margin-top: 1em;
                        margin-left: 1em;

                        li {
                            list-style-position: outside;
                            font-size: 14px;
                        }
                    }

                    dl {
                        font-size: 16px;
                        margin-top: 100px;

                        dd {
                            margin-left: 25px;
                            margin-bottom: 1em;
                        }

                        div {
                            margin-top: 1em;
                        }
                    }
                }
            }
        }
    }
}

#reform-eye-catch {
    padding-top: 121px;
    font-family: "ShipporiMincho";
    pointer-events: auto;

    .row {
        &:first-child {
            gap: 2px;
            height: 30svh;
            position: relative;
            z-index: 2;

            .img-container {
                &:first-child {
                    img {
                        border-radius: 10px 0 0 10px;
                    }
                }

                &:nth-child(2) {
                    img {
                        border-radius: 0 10px 10px 0;
                    }
                }
            }

            strong {
                position: absolute;
                bottom: -14px;
                display: block;
                width: 233px;
                height: 64px;
                padding-top: 7px;
                padding-left: 5px;
                font-size: 17px;
                font-weight: 800;
                color: #1a1a1a;
                background-color: #fff;

                span {
                    font-size: 13px;
                    font-weight: 400;
                    padding-left: 2px;
                }
            }
        }

        &:nth-child(2) {
            justify-content: center;
            gap: 1em;
            font-size: 10px;
            height: 96px;
            padding-top: 29px;
        }
    }
}

#reform-catch-copy {
    font-family: "NotoSerifTC";
    position: relative;
    pointer-events: auto;

    &+.signboad-container {
        pointer-events: auto;

        .scroll-signboad {
            left: 50%;
            height: 86px;
        }
    }

    .bg-img {
        justify-content: center;
        width: 86%;
        height: 25svh;
        margin: 0 auto;
        background-image: url("../assets/imgs/写真/快適空間ヒーローイメージ.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;

        .shadow {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: #00000040;
        }

        h2 {
            position: relative;
            font-size: 24px;

            span {
                display: block;
                text-align: center;

                &:first-of-type {
                    margin-left: calc(52% - 50vw);
                    padding-right: 26%;
                }

                &:nth-of-type(3) {
                    margin-right: calc(52% - 50vw);
                    padding-left: 26%;
                }
            }
        }
    }

    p {
        font-weight: 900;
        text-align: center;
        padding: 48px 0 30px;

        &:first-of-type {
            text-align: left;
            margin-left: 5vw;
        }

        &:nth-of-type(2) {
            padding-top: 0;
        }
    }
}

#reform-prime {
    padding-top: 13px;
    padding-bottom: 30px;
    pointer-events: auto;

    h2 {
        font-family: "NotoSerifTC";
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-align: center;
    }

    p {
        font-family: "ZenOldMincho";
        font-weight: 500;
        word-break: keep-all;
        overflow-wrap: anywhere;
        width: 90%;
        margin: 3em auto;
        padding: 2em;
        position: relative;

        .cross {
            position: absolute;

            &::before,
            &::after {
                content: "";
                position: absolute;
                display: block;
                background-color: #fff;
            }

            &:first-child {
                top: 0px;
                left: 0px;

                &::before {
                    top: 1px;
                    left: -7px;
                    width: 35px;
                    height: 1px;
                }

                &::after {
                    top: -7px;
                    left: 0;
                    width: 1px;
                    height: 35px;
                }
            }

            &:last-child {
                bottom: -3px;
                right: -3px;

                &::before {
                    top: -22px;
                    left: -2px;
                    width: 1px;
                    height: 35px;
                }

                &::after {
                    top: -2px;
                    right: -7px;
                    width: 35px;
                    height: 1px;
                }
            }
        }
    }

    a {
        font-family: "NotoSerifTC";
        font-size: 12px;
        font-weight: 700;
        display: block;
        width: fit-content;
        margin: 0 200px 0 auto;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: calc(100% + 10px);
            height: 1px;
            background-color: #fff;
        }

        span {
            font-size: 16px;
        }

        .view-more-button {
            position: absolute;
            top: 50%;
            right: -100px;
            display: inline-block;
            transform: translateY(-50%) rotate(45deg);
        }
    }
}

#construction-example {
    position: relative;
    padding-bottom: 104px;
    pointer-events: auto;

    .title-part {
        position: relative;

        .scroll-signboad {
            left: 8vw;
            height: 229px;

            &.pergola {

                &::before,
                &::after {
                    content: none;
                }
            }
        }

        h2 {
            position: absolute;
            bottom: 78px;
            left: 50%;
            width: 190px;
            font-family: "NotoSerifTC";
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            transform: translateX(-50%);

            &.pergola {
                text-align: left;

                &::first-letter {
                    margin-left: -1em;
                }
            }

            span {
                font-size: 12px;
            }
        }

        .white-bar {
            position: absolute;
            bottom: 30px;
            right: 0;
            width: 63%;
            height: 2px;
            background-color: #fff;
        }
    }

    .row-reverse-from-pc {
        margin-top: 51px;
    }
}

#swiper-container {

    #reform-thumb-swiper,
    #pergola-thumb-swiper {
        height: 33svh;
    }

    .swiper-pagination {
        bottom: unset;
        width: unset;
        padding: 5px 0 0 9px;
        font-family: "NotoSerifTC";
        font-size: 30px;
        font-weight: 700;
        transform: rotate(14deg);

        span {
            font-size: 20px;
            letter-spacing: 0.1em;
            display: inline-block;

            &:first-of-type {
                transform: rotate(-14deg) translateX(5px);
            }

            &:nth-of-type(2) {
                transform: rotate(-14deg) translateX(-5px);
            }
        }
    }

    #reform-swiper,
    #pergola-swiper {
        position: relative;
        height: 16svh;
    }

    .swiper-wrapper {
        >:not(.swiper-slide-active) {
            opacity: 0.7;
        }
    }


    .swiper-button-prev,
    .swiper-button-next {
        top: unset;
        bottom: 66px;
        font-family: "NotoSerifTC";
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #fff;
        width: fit-content;
        height: 1.5em;

        &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 85px;
            height: 1px;
            background-color: #fff;
            transform: translateX(-50%);
        }

        &::after {
            content: "";
        }
    }

    .swiper-slide-prev,
    .swiper-slide-next {
        cursor: pointer;
    }
}

#pergola-eye-catch {
    padding-top: 121px;
    font-family: "ShipporiMincho";
    pointer-events: auto;

    .row {
        &:first-child {
            gap: 2px;
            height: 30svh;
            position: relative;
            z-index: 2;

            .img-container {
                &:first-child {
                    img {
                        border-radius: 10px 0 0 10px;
                    }
                }

                &:nth-child(2) {
                    img {
                        border-radius: 0 10px 10px 0;
                    }
                }
            }

            strong {
                position: absolute;
                bottom: -14px;
                display: block;
                width: 233px;
                height: 64px;
                padding-top: 7px;
                padding-left: 24px;
                font-size: 17px;
                font-weight: 800;
                color: #fff;
                background-color: #1a1a1a;

                span {
                    font-size: 13px;
                    font-weight: 400;
                    padding-left: 12px;
                }
            }
        }

        &:nth-child(2) {
            justify-content: center;
            gap: 1em;
            font-size: 10px;
            height: 96px;
            padding-top: 29px;
        }
    }
}

#pergola-catch-copy {
    font-family: "NotoSerifTC";
    position: relative;
    text-align: right;
    padding-bottom: 85px;
    pointer-events: auto;

    .bg-img {
        justify-content: center;
        width: 70%;
        height: 25svh;
        background-image: url("../assets/imgs/写真/快適空間ヒーローイメージ.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;

        &:first-child {
            margin-left: auto;
            margin-bottom: 4px;
        }

        .shadow {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: #00000040;
        }
    }

    strong {
        font-weight: 900;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            bottom: -10px;
            display: block;
            width: 309px;
            height: 1px;
            background-color: #fff;
        }

        &:first-of-type {
            position: absolute;
            top: 0;
            left: 0;
            padding-left: 1em;

            &::after {
                left: -227px;
            }
        }

        &:nth-of-type(2) {
            &::after {
                right: -222px;
            }
        }
    }
}

#pergola-prime {
    padding-top: 13px;
    padding-bottom: 95px;
    position: relative;
    pointer-events: auto;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        mix-blend-mode: difference;
    }

    >.cross {
        z-index: -1;

        &:first-child {
            top: 66px;
            right: 19px;
            width: 100%;
            height: 100%;

            &::before {
                top: 0;
                right: -19px;
                width: 100%;
                height: 1px;
            }

            &::after {
                top: -66px;
                right: 0;
                width: 1px;
                height: 100%;
            }
        }

        &:nth-last-child(2) {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;

            &::before {
                left: 16px;
                bottom: 0;
                width: 1px;
                height: 100%;
            }

            &::after {
                left: 0;
                bottom: 95px;
                width: 100%;
                height: 1px;
            }
        }
    }

    .scroll-signboad {
        z-index: -1;

        &:nth-child(3) {
            position: absolute;
            top: -69px;
            left: 50%;
            height: 167px;

            &::after {
                top: 75px;
            }
        }

        &:last-child {
            position: absolute;
            bottom: -188px;
            left: calc(8vw + 2px);
            height: 267px;

            &::after {
                bottom: 0;
            }
        }
    }

    h2 {
        font-family: "NotoSerifTC";
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-align: center;
        padding-top: 116px;
    }

    p:first-of-type {
        font-family: "ZenOldMincho";
        font-weight: 500;
        width: 76%;
        margin: 3em auto;
        padding: 2em;
        position: relative;
        word-break: keep-all;
        z-index: -1;

        .cross {
            position: absolute;

            &::before,
            &::after {
                content: "";
                position: absolute;
                display: block;
                background-color: #fff;
            }

            &:first-child {
                top: -3px;
                left: 0px;

                &::before {
                    top: 1px;
                    left: -7px;
                    width: 35px;
                    height: 1px;
                }

                &::after {
                    top: -7px;
                    left: 0;
                    width: 1px;
                    height: 35px;
                }
            }

            &:last-child {
                bottom: -3px;
                right: -3px;

                &::before {
                    top: -22px;
                    left: -2px;
                    width: 1px;
                    height: 35px;
                }

                &::after {
                    top: -2px;
                    right: -7px;
                    width: 35px;
                    height: 1px;
                }
            }
        }
    }

    >a {
        font-family: "NotoSerifTC";
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        display: block;
        width: fit-content;
        margin: 0 120px 30px auto;
        padding-top: 70px;
        position: relative;
        z-index: 1;

        &::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: calc(100% + 10px);
            height: 1px;
        }

        >span {
            position: relative;
            font-size: 16px;
            color: #000;
        }

        .view-more-button {
            position: absolute;
            right: -80px;
            display: inline-block;
            transform: translateY(-50%) rotate(45deg);

            span {

                &::before,
                &::after {
                    background-color: #ffde59;
                }
            }
        }
    }
}

#company-prime {
    padding-top: 120px;
    pointer-events: auto;

    .img-container-container {
        position: relative;

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: 78px;
            height: 78px;
            background-color: #ffde594d;
        }

        &::before {
            top: -30px;
            left: 0;
            z-index: 1;
        }

        &::after {
            bottom: -23px;
            right: 0;
        }
    }

    h2 {
        font-family: "Jost";
        font-size: 32px;
        font-weight: 400;
        text-align: center;
        line-height: 0.75em;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            bottom: -0.75em;
            left: 50%;
            height: 2px;
            width: 36px;
            background-color: #fff;
            transform: translateX(-50%);
        }

        span {
            font-family: "NotoSansJP";
            font-size: 15px;
        }
    }

    #president-greeting {
        padding-top: 107px;

        h3 {
            font-family: "NotoSerifTC";
            font-size: 20px;
            position: relative;
            margin-left: 20px;

            .horizontal-line {
                position: absolute;
                top: 50%;
                right: 0;
                display: block;
                width: 245px;
                height: 1px;
            }
        }

        >:last-child {
            .img-container {
                position: relative;
                margin: 52px 42px 0;
                height: 355px;
                overflow: clip;

                img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    display: block;
                    width: 200%;
                    height: 200%;
                    transform: translate(-50%, -50%)
                }
            }

            .row-reverse-from-pc {
                >strong {
                    display: block;
                    font-family: "NotoSerifTC";
                    font-weight: 700;
                    font-size: 32px;
                    text-align: center;
                    margin: 58px 19px 50px;
                    padding: 28px 0 31px;
                    position: relative;

                    .cross {
                        &:first-child {
                            top: 0;
                            right: 0;

                            &::before {
                                top: 0;
                                right: -19px;
                                width: 150px;
                                height: 1px;
                            }

                            &::after {
                                top: -15px;
                                right: 0;
                                width: 1px;
                                height: 50px;
                            }
                        }

                        &:last-child {
                            bottom: 0;
                            left: 0;

                            &::before {
                                bottom: -15px;
                                left: 0;
                                width: 1px;
                                height: 50px;
                            }

                            &::after {
                                bottom: 0;
                                left: -19px;
                                width: 150px;
                                height: 1px;
                            }
                        }
                    }

                    span {
                        color: #ffde59;
                    }
                }
            }

            .text-container2 {
                strong {
                    font-family: "NotoSerifTC", "NotoSerifJP";
                    font-size: 1.5em;
                    font-weight: 400;
                    display: block;
                    width: fit-content;
                    margin-right: 10px;
                    margin-left: auto;

                    span {
                        font-size: 0.9em;
                    }
                }
            }

            p {
                font-family: "NotoSansJP";
                font-size: 15px;
                margin: 0 25px 30px;
            }
        }
    }
}

.between-img-container {
    position: relative;
    top: 100px;
    z-index: 1;
    width: 355px;
    height: 211px;
    margin: -75px auto 0;
    pointer-events: auto;
}

#corpo-info-detail {
    padding-top: 191px;
    padding-bottom: 155px;
    position: relative;
    pointer-events: auto;

    &::after {
        content: "";
        position: absolute;
        top: 144px;
        right: 0;
        width: 245px;
        height: 1px;
        background-color: #fff;
    }

    .bg-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin-top: 40px;
        background-image: url("../assets/imgs/写真/corpo_info_detail_bg.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-color: #000000b0;
        }
    }

    dl {
        position: relative;
        font-size: 14px;
        width: fit-content;
        margin: 0 auto;

        >.row {
            justify-content: center;

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

            dt {
                justify-content: left;
                align-items: center;
                width: 107px;
                padding: 17px 8px;
                background-color: #454545;

                &::before {
                    content: "■ ";
                }
            }

            dd {
                width: 248px;
                padding: 17px 8px;
                color: #1a1a1a;
                background-color: #F5F5F5;

                span {
                    margin-left: -9px;
                }

                a {
                    color: inherit;
                }
            }
        }
    }
}

#gallery-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    z-index: -1;
    pointer-events: none;

    &.open {
        position: absolute;
    }

    >div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100svh;

        &:nth-child(4), &:nth-child(6) {
            background-color: #000;
        }

        &:nth-child(2) {
            background-image: url(../assets/imgs/写真/快適空間社長.jpg);
            background-size: 300vw;
            background-position: center;
            background-repeat: no-repeat;
            filter: sepia(1) hue-rotate(130deg) brightness(0.4) grayscale(0.2);
        }

        &:nth-child(3) {
            background-color: #fff;
        }

        &:nth-child(5) {
            background-color: #283144;
        }

        &:nth-child(6) {
            z-index: -1;
        }
    }

    #gallery-eye-catch-images {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;

        &.opacity {
            transition-delay: 0.6s;
        }
                
        div {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100svh;

            &.active {
                opacity: 1;
            }
        }
    }
}

.scroll-snap-end {
    scroll-snap-align: end;
    width: 100vw;
    height: 1px;
}

#gallery-eye-catch {
    position: relative;
    height: 900svh;
    pointer-events: auto;

    &.white-out {
        @supports (animation-timeline: scroll()) {
            >div:not(.gallery-eye-catch-collision) {
                .row-from-pc {
                    >span {
                        color: #000;
                    }
    
                    h2 {
                        .logo-mark {
                            span {
                                &:first-child {
                                    &::before {
                                        box-shadow: #000 1px 1px 1px;
                                    }
    
                                    &::after {
                                        box-shadow: #000 1px 1px 1px;
                                    }
                                }

                                &:nth-child(2) {
                                    box-shadow: #000 1px 1px 1px;
                                    &::before {
                                        box-shadow: #000 1px 1px 1px;
                                    }
    
                                    &::after {
                                        box-shadow: #000 1px 1px 1px;
                                    }
                                }

                                &:nth-child(3) {
                                    &::before {
                                        box-shadow: #000 1px 1px 1px;
                                    }
    
                                    &::after {
                                        box-shadow: #000 1px 1px 1px;
                                    }
                                }
                            }
                        }

                        .column {
                            color: #000;
                        }
                    }
                }
            }
        }
    }

    >div:not(.gallery-eye-catch-collision) {
        position: sticky;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100svh;
        width: 100%;

        margin-top: -250svh;

        margin-bottom: 250svh;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;

            @supports (animation-timeline: scroll()) {
                animation: whiteOut forwards linear;
                animation-range: contain 0 contain 100svh;
                animation-timeline: scroll();
            }
        }
    }

    .row-from-pc {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        transform: translate(-50%, -50%);
    }
    
    h2 {
        position: relative;
        font-family: "NotoSansTC";
        width: 100vw;
        justify-content: center;

        gap: 30px;

        .logo-mark {
            transform: scale(1.25);
        }

        span {
            &:nth-of-type(2) {
                span {
                    &:first-of-type {
                        font-size: 16px;
                        font-weight: 400;
                    }

                    &:last-of-type {
                        font-size: 32px;
                        font-weight: 500;
                    }
                }
            }
        }
    }

    .gallery-eye-catch-collision {
        position: absolute;
        bottom: 180svh;
        left: 0;
        height: 80svh;
    }
}

.pagination {
    position: sticky;
    z-index: 10;
    top: calc(100svh - 210px);
    right: 0;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    margin-top: 210px;
    pointer-events: none;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 12.55px;
        width: 2px;
        height: 100%;
        background-color: #fff;
    }

    &::after {
        content: none !important;
    }

    .pagination-bullet {
        position: relative;
        width: 12px;
        height: 12px;
        margin-right: 8px;
        background-color: #fff;
        border-radius: 50%;

        &.active {
            background-color: #FFF9B8;

            &::before {
                border-color: #FFF9B8;
                width: 18px;
                height: 18px;
            }
        }

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            width: 0;
            height: 0;
            border: 1px #fff solid;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

#countries {
    position: sticky;
    top: 0;
    left: 0;
    z-index: -2;

    margin-bottom: -200svh;

    pointer-events: auto;

    /* &:has(li.swiper-slide-active:where([data-swiper-slide-index="1"], [data-swiper-slide-index="3"])) {
        +.pagination {
            .pagination-bullet {
                background-color: #333;

                &::before {
                    border-color: #333;
                }
            }
        }
    } */

    .swiper-wrapper {
        &:has(li.swiper-slide-active:where([data-swiper-slide-index="1"], [data-swiper-slide-index="3"])) {
            +.row {
                button {
                    span {
                        background-color: #000;

                        &:nth-of-type(2) {
                            background-color: #ffde59;
                        }
                    }
                }
            }
        }

        .swiper-slide {
            position: relative;
            padding-bottom: 81px;

            &[data-swiper-slide-index="1"],
            &[data-swiper-slide-index="3"] {
                >.swiper-button-next {
                    color: #fff;
                    background-color: #000;

                    .scroll-signboad {
                        &::before {
                            background-color: #fff;
                        }
                    }
                }

                h3 {
                    color: #000;
                }

                .img-container {
                    filter: initial;
                }

                .text-container2 {
                    color: #000;
                }
            }

            >.swiper-button-next {
                font-family: "ShipporiMincho";
                font-weight: bold;
                position: absolute;
                top: initial;
                bottom: 0;
                right: 0;
                color: #000;
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
                width: 130px;
                height: 130px;
                margin-top: initial;
                padding: 0 10px 10px 0;
                background-color: #fff;
                clip-path: polygon(100% 0, 100% 100%, 0 100%);

                &::after {
                    content: none;
                }

                .scroll-signboad {
                    position: absolute;
                    bottom: 32px;
                    right: 39px;
                    width: 1.5px;
                    height: 33px;

                    &::before {
                        background-color: #000;
                    }

                    &::after {
                        content: none;
                    }
                }
            }

            h3 {
                font-family: "ShipporiMincho";
                font-size: 36px;
                font-weight: 700;
                color: #fff;
                letter-spacing: 0.04em;
                text-align: center;
                padding-top: 67px;
                padding-bottom: 29px;

                span {
                    font-size: 16px;
                    display: block;
                }
            }

            .img-container {
                width: 321px;
                height: 213px;
                margin: 0 auto;
                filter: grayscale(1);

                &:last-child {
                    width: 280px;
                    height: 171px;
                }
            }

            .text-container2 {
                height: 390px;
                margin-top: 150px;
                justify-content: space-between;
                color: #fff;

                p {
                    font-family: "ShipporiMincho";
                    font-weight: 700;
                    margin: 0 35px 42px;
                    letter-spacing: 0.04em;
                }

                strong {
                    font-family: "ShipporiMincho";
                    font-size: 20px;
                    font-weight: 700;
                    letter-spacing: 0.04em;
                    text-align: end;
                    display: block;
                    width: fit-content;
                    margin: 0 auto;
                    padding-bottom: 30px;
                }
            }
        }
    }

    .row {
        position: absolute;
        top: 390px;
        justify-content: space-between;
        width: 100vw;
        height: 120px;
        padding: 0 30px;


        button {
            &::after {
                content: none;
            }

            &:first-of-type {
                transform: rotate(-135deg);
            }

            span {
                background-color: #fff;

                &::before,
                &::after {
                    background-color: inherit;
                }

                &:first-of-type {
                    display: none;
                }

                &:nth-of-type(2) {
                    background-color: #FFDE59;
                }
            }
        }
    }
}

#countries-collision {
    position: relative;
    top: -500svh;

    scroll-snap-align: start;
    scroll-snap-stop: normal;
    width: 100vw;
    height: 100svh;

    pointer-events: auto;
}

#youngest-day {
    font-family: "ShipporiMincho";
    height: 230svh;
    text-align: center;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    pointer-events: auto;

    .bg-img {
        position: sticky;
        top: 0;
        height: 100svh;
    }

    #ja-ver,
    #en-ver {
        position: sticky;
        top: 0;
        height: 100svh;
        margin-top: -100svh;
        display: flex;
        justify-content: center;
        flex-direction: column;

        @supports(animation-timeline: view()) {
            animation-name: gainOpacity;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
            animation-range: contain 0 contain 100svh;
            animation-timeline: view();

            &#en-ver {
                animation-direction: reverse;
                opacity: 0;
            }
        }

        @supports not (animation-timeline: view()) {
            &:not(.active) {
                opacity: 0;
                transform: translateY(30px);
            }
        }
    }

    #ja-ver {
        margin-bottom: 30svh;
    }

    h3 {
        padding: 24px 0;
    }

    p {
        &:not(:last-of-type) {
            margin-bottom: 1em;
        }
    }

    #en-ver-collision {
        height: 100svh;
    }
}

#explore {
    position: relative;
    font-family: "ShipporiMincho";
    height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    pointer-events: auto;

    &:has(li:nth-child(4) .active) {
        h3 {
            mix-blend-mode: difference;
            filter: invert(1);
        }
    }

    &:has(div.moving) {
        .book-btn-group {
            button {
                pointer-events: none;
            }
        }
    }

    h3 {
        position: relative;
        top: 0.7em;
        z-index: 5;
        font-size: 36px;
        color: #000;
        text-align: center;
        letter-spacing: 0.04em;
    }

    .book-btn-group {
        position: absolute;
        top: 150px;
        left: 56px;
        z-index: 5;
        display: flex;
        flex-direction: column;
        gap: 14px;

        button {
            position: relative;
            font-family: "ShipporiMincho";
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.04em;
            display: block;
            width: fit-content;

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: -36px;
                display: block;
                height: 3px;
                width: 26px;
                background-color: #fff;
                transform: translateY(-50%);
            }

            span {
                font-size: 12px;
            }
        }
    }

}

.book {
    position: relative;
    width: 0;
    height: 0;

    &:nth-child(4) {
        p {
            text-shadow: 2px 2px 0 #000;
        }
    }

    .page-clip {
        position: absolute;
        top: calc(350vw * -0.988);
        right: -50vw;
        width: 400vw;
        height: calc(350vw + 150svh);
        overflow: clip;
        transform-origin: top right;
        pointer-events: none;

        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        -ms-transition-property: -ms-transform;
        transition-property: transform;

        transition-duration: 0.6s;

        &:has(div.page2) {
            transform: rotate(-30deg);
        }

        &.active {
            &:has(div.page1) {
                z-index: 4;
            }

            &:has(div.page2) {
                z-index: 1;
            }
        }

        &.moving {
            &:has(div.page1) {
                z-index: 3;
            }

            &:has(div.page2) {
                z-index: 2;
                transform: rotate(0);

                .page2 {
                    transform: rotate(0);
                }
            }
        }

        &:not(.active) {
            &:not(.moving) {
                opacity: 0;

                &:has(div.page1) {
                    transform: rotate(-30deg);

                    .page1 {
                        transform: rotate(-30deg);
                    }
                }
            }
        }

        >div {
            position: absolute;
            top: calc(350vw * -0.988 * -1);
            height: 150vw;
            width: 100vw;

            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            -o-transition-property: -o-transform;
            -ms-transition-property: -ms-transform;
            transition-property: transform;

            transition-duration: 0.6s;

            &.page1 {
                right: -50vw;

                /*  transition-duration: 0.3s 0s;
                transition-delay: 0s, 0.3s; */
                
                transform-origin: 0 calc(350vw * -0.988);
                

                /* div, img {
                    transition-duration: 0s;
                    transition-delay: 0.3s;
                } */
            }

            &.page2 {
                right: -50vw;

                transform-origin: 50% calc(350vw * -0.988);

                transform: rotate(30deg);
            }

            >div {
                position: relative;
                padding-top: 255px;
                margin: 0 26px;
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                object-position: bottom;
            }
        }
    }
}

#signature-phrases {
    font-family: "ShipporiMincho";
    font-size: 24px;
    font-weight: 700;
    height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    pointer-events: auto;

    .thumb-swiper {
        max-width: 100%;

        &:has(li.swiper-slide-active[data-swiper-slide-index="0"]) ~ .phrases li:nth-child(1){
            opacity: 1;
        }

        &:has(li.swiper-slide-active[data-swiper-slide-index="1"]) ~ .phrases li:nth-child(2){
            opacity: 1;
        }

        &:has(li.swiper-slide-active[data-swiper-slide-index="2"]) ~ .phrases li:nth-child(3){
            opacity: 1;
        }

        &:has(li.swiper-slide-active[data-swiper-slide-index="3"]) ~ .phrases li:nth-child(4){
            opacity: 1;
        }

        &:has(li.swiper-slide-active[data-swiper-slide-index="4"]) ~ .phrases li:nth-child(5){
            opacity: 1;
        }

        &:has(li.swiper-slide-active[data-swiper-slide-index="5"]) ~ .phrases li:nth-child(6){
            opacity: 1;
        }

        &:has(li.swiper-slide-active[data-swiper-slide-index="6"]) ~ .phrases li:nth-child(7){
            opacity: 1;
        }

        &:has(li.swiper-slide-active[data-swiper-slide-index="7"]) ~ .phrases li:nth-child(8){
            opacity: 1;
        }

        .swiper-wrapper {
            pointer-events: none;

            .swiper-slide {
                padding: 56px 5vw;
                width: 100vw;
                height: 34svh;
                opacity: 0 !important;
            }

            .swiper-slide-active,
            .swiper-slide-next,
            .swiper-slide-next + .swiper-slide {
                opacity: 1 !important;
            }
        }
    }

    .pagenavi {
        height: 20svh;
        justify-content: center;
        align-items: center;
        gap: 5vw;

        .signature-swiper-pagination {
            position: relative;
            inset: initial;
            font-size: 0;
            width: 100px;
            height: 1px;
            background-color: #fff;
            transform: rotate(-45deg);

            .swiper-pagination-current {
                font-size: 24px;
                font-weight: 700;
                color: #fff;

                display: block;
                transform: rotate(45deg) translate(-35px, -35px);
            }

            .swiper-pagination-total {
                font-size: 24px;
                font-weight: 700;
                color: #fff;

                display: block;
                transform: rotate(45deg) translate(-15px, -15px);
            }
        }

        .signature-swiper-button-next {
            position: relative;
            inset: initial;
            top: 10px;
            color: #fff;
            width: 85px;
            height: 40px;
            pointer-events: auto;

            &::before,
            &::after {
                content: "";
                position: absolute;
                display: block;
                background-color: #fff;
                inset: initial;
            }

            &::before {
                top: 50%;
                left: 50%;
                width: 45px;
                height: 1px;
                transform: translate(-50%, -50%);
            }

            &::after {
                top: 8.5px;
                right: 17px;
                width: 12px;
                height: 24px;
                clip-path: polygon(0 0, 1px 0, 100% 50%, 1px 100%, 0 100%, calc(100% - 1px) 50%, 0 0);
            }
        }
    }

    .phrases {
        max-width: 100%;

        ul {
            height: 44svh;
            position: relative;

            li {
                position: absolute;
                writing-mode: vertical-rl;
                display: flex;
                align-items: center;
                width: 100vw;
                opacity: 0;
                transition-duration: 0.7s;
            }
        }
    }
}

#gallery-prime {
    height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    pointer-events: auto;

    .button-group {
        height: 100svh;
        display: grid;
        grid-template-rows: calc(10svh - 0.37vw) calc(13svh - 0.37vw) calc(28svh - 0.37vw) calc(17svh - 0.37vw) calc(10svh - 0.37vw);
        grid-template-columns: 32vw 2vw 11vw 1fr;
        gap: 4.7svh;
        padding: 3.7vw;
        overflow: clip;
        position: relative;

        .item1 {
            grid-row: 1;
            grid-column: 1 / 4;
        }

        .item2 {
            grid-row: 2;
            grid-column: 1 / 4;
        }

        .item3 {
            grid-row: 1 / 3;
            grid-column: 4;
        }

        .item4 {
            grid-row: 3;
            grid-column: 1 / 5;
        }

        .item5 {
            grid-row: 4;
            grid-column: 1 / 3;
        }

        .item6 {
            grid-row: 4;
            grid-column: 3 / 5;
        }

        .item7 {
            grid-row: 5;
            grid-column: 1;
        }

        .item8 {
            grid-row: 5;
            grid-column: 2 / 5;
        }
    }


    dialog {
        background-color: transparent;
        border: none;
        display: block;
        pointer-events: none;
        opacity: 0;

        &[open] {
            pointer-events: auto;
            opacity: 1;

            form {
                >.row-from-pc {
                    filter: none;
                    opacity: 1;
    
                    .text-container2 {
                        box-shadow: #fff 0 0 1px 0;
                    }
                }
            }

            .img-container {
                filter: none;
                opacity: 1;
            }
        }

        &:not([open]) {
            transition-delay: 0.3s;

            form {
                >.row-from-pc {
                    filter: blur(50px);
                    opacity: 0;
    
                    .text-container2 {
                        box-shadow: #fff 0 0 1px 50px;
                    }
                }
            }

            .img-container {
                filter: blur(50px);
                opacity: 0;
            }
        }
        &::backdrop {
            background-color: #333333CC;
        }

        form {
            background-color: transparent;
            position: fixed;
            top: 0;
            left: 0;
            padding-top: 20px;
        }

        .img-container {
            position: relative;
            height: 30svh;
            margin: 12px;
            width: calc(100vw - 24px);

            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                right: -12px;
                z-index: 1;
                display: block;
                width: 30px;
                height: 1px;
                background-color: #fff;
                transform: rotate(-45deg);
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;

                &.active {
                    opacity: 1;
                }
            }
        }

        .text-container2 {
            position: relative;
            font-family: "ShipporiMincho";
            font-weight: 700;
            width: 80vw;
            height: 50svh;
            margin: 0 auto;
            color: #fff;

            .row-from-pc {
                position: absolute;
                top: 0;
                left: 0;
                padding: 50px 25px 0;
                opacity: 0;

                &.active {
                    opacity: 1;
                }

                time,
                h3 {
                    text-align: center;
                    display: block;
                    width: 100%;
                }

                h3 {
                    font-size: 20px;
                    padding-bottom: 32px;
                }
            }
        }

        .close {
            position: relative;
            display: block;
            width: 50px;
            height: 50px;
            margin: 15px auto;
            border-radius: 50%;
            border: 1px #fff solid;

            &::before,
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                background-color: #fff;
                width: 36px;
                height: 7px;
            }

            &::before {
                transform: translate(-50%, -50%) rotate(-45deg);
            }

            &::after {
                transform: translate(-50%, -50%) rotate(45deg);
            }
        }
    }
}

/*
    古いギャラリーのCSS
#gallery-opening {
    height: 100svh;

    .img-container {
        height: 50svh;
    }
}

#mesmerizer {
    position: sticky;
    top: 0;
    z-index: -1;
    height: 100svh;
    margin-bottom: 80svh;

    svg {
        position: absolute;
        top: 50%;
        animation: rotateAnimMesme 10s infinite linear;

        &:nth-of-type(2) {
            animation-delay: .1s;
        }

        &:nth-of-type(3) {
            animation-delay: .2s;
        }

        &:nth-of-type(4) {
            animation-delay: .3s;
        }

        &:nth-of-type(5) {
            animation-delay: .4s;

            path {
                stroke: #ffde59;
            }
        }

        path {
            stroke: #fff;
            fill: none;
        }
    }

    .row {
        p {
            font-family: "Jost";
            font-size: 50px;
            font-weight: 500;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            animation: adAnime 20s infinite linear;

            &:first-of-type {
                animation-delay: -15s;
            }

            &:nth-of-type(2) {
                animation-delay: -10s;
                animation-fill-mode: backwards;
            }

            &:nth-of-type(3) {
                animation-delay: -5s;
                animation-fill-mode: backwards;
            }

            &:nth-of-type(4) {
                animation-delay: 0s;
                animation-fill-mode: backwards;
            }
        }
    }
}

#scaledown-img-container {
    height: 600svh;

    +.scroll-signboad {
        top: -10vh;
        left: 50%;
        width: 1px;
        height: 141px;
        margin-top: -100svh;

        &::after {
            content: none;
        }

        +a {
            text-align: center;
            font-family: "NotoSansJP";
            font-size: 36px;
            letter-spacing: 0.12em;
            position: relative;
            display: block;
            width: 208px;
            margin: 0 auto;
            padding-bottom: 30px;
            margin-bottom: 50svh;

            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #fff;
            }
        }
    }

    .img-container {
        position: sticky;
        top: 50%;
        transform: translateY(-50%);
        width: 120vw;
        height: 30svh;
        margin-left: -10vw;
        margin-bottom: 100svh;
        animation: scaleWhenView linear forwards;
        animation-timeline: scroll();

        &:nth-child(2) {
            animation-range: contain 210svh contain 240svh;
            margin-top: -30svh;
        }

        &:nth-child(3) {
            animation-range: contain 340svh contain 370svh;
        }

        &:nth-child(4) {
            animation-range: contain 470svh contain 500svh;
        }
    }
}

#gallery-prime-swiper {
    position: relative;
    margin: 90px 0 100px;
    height: 500px;

    h2 {
        position: absolute;
        top: 20px;
        left: 53px;
        z-index: 2;

        .white-bar {
            position: absolute;
            display: block;
            background-color: #fff;
            animation-name: waveAnim;
            animation-iteration-count: infinite;
            animation-direction: alternate;

            &:first-child {
                top: 50%;
                left: -23px;
                width: 20px;
                height: 2px;
                transform: translateY(-50%);
                animation-duration: 3s;
            }

            &:nth-child(2) {
                top: 25%;
                right: -23px;
                width: 20px;
                height: 2px;
                animation-duration: 0.5s;
            }

            &:nth-child(3) {
                top: 50%;
                right: -23px;
                width: 20px;
                height: 2px;
                transform: translateY(-50%);
                animation-duration: 1s;
            }

            &:nth-child(4) {
                bottom: 25%;
                right: -23px;
                width: 20px;
                height: 2px;
                animation-duration: 0.2s;
            }
        }
    }

    .swiper-slide {
        padding: 0 16px;
    }

    .swiper-pagination {
        font-size: 30px;
        top: 5px;
        bottom: unset;
        left: unset;
        right: 25px;
        width: unset;
        transform: rotate(14deg);

        span {
            font-size: 20px;
            letter-spacing: 0.1em;
            display: inline-block;

            &:first-of-type {
                transform: rotate(-14deg) translateX(10px);
            }

            &:nth-of-type(2) {
                transform: rotate(-14deg) translateX(-10px);
            }
        }
    }

    a {
        font-family: "NotoSansJP";
        font-size: 20px;
        font-weight: 500;
        position: absolute;
        bottom: 50px;
        left: 53px;

        .view-more-button {
            position: absolute;
            top: 50%;
            right: -60px;
            width: 40px;
            height: 40px;
            transform: translateY(-50%) rotate(45deg);
        }
    }

    .swiper-button-prev,
    .swiper-button-next {
        position: absolute;
        pointer-events: none;

        &::after {
            content: none;
        }

        span {
            pointer-events: auto;
        }
    }

    .swiper-button-prev {
        left: 37px;
    }

    .swiper-button-next {
        right: 37px;
        transform: rotate(225deg);
    }
} */

@keyframes swiperSlideActivated {
    from {}

    to {
        width: 66%;
        clip-path: inset(0);
    }
}

@keyframes swiperSlideInactivated {
    from {
        opacity: 1;
        width: 66%;
        clip-path: inset(0);
    }

    to {
        opacity: 0.8;
        width: calc(34%/5);
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes scrollSignAnim {
    0% {
        top: 0;
        clip-path: inset(0 0 100%);
    }

    50% {
        clip-path: inset(0);
    }

    100% {
        clip-path: inset(100% 0 0);
    }
}

@keyframes rotateAnimMesme {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes scaleWhenView {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(-50%) scale(0.3);
    }
}

@keyframes waveAnim {
    from {
        width: 20px;
    }

    to {
        width: 10px;
    }
}

@keyframes adAnime {
    from {
        transform: translate(-100vw, -50%);
    }

    to {
        transform: translate(calc(100vw + 150%), -50%);
    }
}

@keyframes whiteOut {
    from {}

    to {
        background-color: #ffffffff;
    }
}

@keyframes gainOpacity {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes bannerAnim {
    from {
        transform: translateX(100vw);
    }

    to {
        transform: translateX(-100vw);
    }
}