:root {
    font-size: 18px;
}

input,
textarea {
    font-size: 18px;
}

section,
main>div,
#explore,
#clip-box,
.cover {
    transition-duration: 1s;
}

section,
main>div,
#explore {
    position: relative;
    transition-timing-function: ease-in;
    transform-origin: right;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        width: 100vw;
        height: 100%;
        transition-duration: 0s;
        pointer-events: auto;
    }

    &.open {
        transition-timing-function: ease-out;
        transform: scale(0.75);

        &::after {
            height: 133%;
        }
    }
}

#clip-box,
#clip-box::after .cover {
    transition-timing-function: cubic-bezier(.16, .68, .7, .86);

    &.open {
        transition-timing-function: ease-in-out;
    }
}

.for-mb-tb {
    display: none;
}

.from-pc {
    display: block;
}

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

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

.row-reverse-from-pc {
    display: flex;
    flex-direction: row-reverse;
}

.logo-mark {
    &#ham-button {
        width: 58px;
        height: 58px;

        &.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;
                    }
                }
            }
        }

        &.open {
            transition-delay: 0s;

            span {

                &:first-of-type,
                &:nth-of-type(3) {
                    transition-delay: inherit;

                    &::before,
                    &::after {
                        transition-delay: inherit;
                    }
                }
            }
        }

        &:hover {
            span {
                &:nth-of-type(2) {
                    transition-delay: 0s;

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

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

        span {
            position: absolute;
            display: block;
            background-color: #fff;
            width: 16px !important;
            height: 16px !important;
    
            &: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: 15px;
                }
            }
    
            &: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;
                }
            }
        }

        small {
            font-size: 16px;
            transition-delay: 0s !important;
        }
    }
}

.view-more-button {
    &:hover {
        span {
            &:nth-of-type(2) {
                background-color: #ffde59;
            }
        }
    }
}

#clip-box {
    &::after {
        content: "";
        position: fixed;
        top: 12.5vh;
        right: 0;
        z-index: 1;
        width: 100%;
        height: 75vh;
        transition-duration: 0s;
        box-shadow: 0 0 0 #000000;
    }

    &.open {
        right: 66vw;

        &::after {
            right: 66vw;
            transition-delay: 1s;
            box-shadow: 7px 0 25px #000000;
        }
    }

    .cover {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1;
        display: block;
        width: 100vw;
        height: 100svh;
        background-color: #090909;

        &.open {
            right: 66vw;

            &:first-child {
                clip-path: inset(87.5% 0 0);
            }

            &:nth-child(2) {
                clip-path: inset(0 0 87.5%);
            }
        }

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

        &:nth-child(2) {
            clip-path: inset(0 0 100%);
        }
    }
}

h1 {
    font-size: 16px;
    width: 355px;
    height: 100px;

    &.open {
        left: -66vw;
    }

    span {
        font-size: 32px;
    }

    a {
        left: 10px;
    }
}

/* #moc-h1 {
    font-size: 16px;
    width: 355px;
    height: 100px;
    &.open {
        left: -66vw;
    }
    span {
        font-size: 32px;
    }
    a {
        left: 10px;
    }
} */

aside {
    nav {
        justify-content: center;
        gap: 36px;
        width: 66vw;
        margin-top: 18svh;

        &.open {
            display: flex;

            .column-from-pc {
                &:where(:first-child, :last-child) {
                    a {
                        span {
                            &.white-bar {
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }

        .column-from-pc {
            justify-content: flex-start;
            height: 100svh;

            &:first-child {
                gap: 10svh;

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

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

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

                    &:nth-of-type(2) {
                        line-height: 48px;
                        height: 110px;

                        .white-bar {
                            transition-delay: .9s;
                            top: 60%;
                            transform: translateY(-50%);
                        }

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

                            &:last-of-type {
                                transition-delay: 1.4s;
                                display: block;
                                margin-top: -0.5em;
                            }
                        }
                    }

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

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

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

            &:last-child {
                a {

                    &:first-of-type,
                    &:nth-of-type(2) {
                        margin-bottom: 10svh;
                    }

                    &:first-of-type {
                        .white-bar {
                            transition-delay: 1.1s;
                        }

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

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

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

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

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

                    &:nth-last-of-type(2),
                    &:last-of-type {
                        font-size: 34px;

                        &:hover {
                            .img-container {
                                &:nth-child(2) {
                                    opacity: 1;
                                }
                            }
                        }

                        .img-container {
                            left: -87px;
                            width: 50px;
                            height: 50px;
                        }

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

                    &:nth-last-of-type(2) {
                        margin-top: 0;

                        .img-container {
                            transition-delay: 1.3s;
                        }

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

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

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

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

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

            a {
                font-size: 44px;
                margin-top: 0;

                &:hover {
                    .white-bar {
                        background-color: #ffde59;
                    }

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

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

footer {
    #corpo-info {
        margin-right: 30px;
        margin-left: 30px;

        h2 {
            margin-top: 110px;
            margin-bottom: 125px;
            transform: scale(1.5);
        }

        .row-from-pc {
            justify-content: space-evenly;
            align-items: center;
            margin-bottom: 80px;

            .column-from-pc {
                align-items: flex-start;

                .row {
                    margin-left: 13px;

                    .img-container {
                        &:hover {
                            &::before {
                                opacity: 1;
                            }
                        }
                    }
                }

                dl {
                    text-align: left;
                }

                >a {
                    margin-left: unset;

                    &:hover {
                        opacity: 0.8;

                        .img-container {
                            &::after {
                                opacity: 1;
                            }
                        }
                    }
                }
            }

            >.img-container {
                width: 400px;
                height: 300px;
                margin: unset;
            }
        }
    }

    nav {
        margin-bottom: 41px;

        ul {
            justify-content: center;
            gap: 4em;

            li {
                position: relative;

                &:not(:last-of-type) {
                    position: relative;

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

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    z-index: -1;
                    display: block;
                    width: 0;
                    height: 1px;
                    background-color: #fff;
                    transform: translateX(-50%);
                }

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

                }

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

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

                    a {
                        &::after {
                            content: "";
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            z-index: 1;
                            display: block;
                            width: 0;
                            height: 1px;
                            background-color: #ffde59;
                            transform: translateX(-50%);
                        }
                    }
                }
            }
        }
    }
}

.vertical-line {
    left: 19px;
}

.horizontal-line {
    bottom: calc(10svh - 2px);
    z-index: 1;
}

#hero-img {
    h2 {
        right: unset;
        left: 8vw;
        bottom: 4svh;

        .img-container {
            display: block;
            height: 90px;

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

    .bg-img {
        height: 90%;
    }
}

#top-catch-copy {
    margin: 0 30px;

    .white-bar-wrapper {
        strong {
            font-size: 34px;

            span {
                &:nth-of-type(2) {
                    font-size: 14px;
                }
            }
        }
    }
}

.text-container {
    p {
        line-height: unset;
    }
}

.bg-img-container {
    height: 90%;
}

#top-reform {
    margin: 0 30px;

    &::after {
        content: none;
    }

    .text-container {
        top: unset;
        bottom: 16%;
        right: 0;
        height: 300px;
        width: 60%;
        background-image: linear-gradient(to left, rgba(32, 32, 32, 0.2) 85px, rgba(31, 31, 31, 0.75) 341px, transparent 341px, transparent);

        h2,
        p {

            margin: 0 70px 0 auto;
        }

        h2 {
            width: fit-content;
            font-size: 40px;

            span {
                font-size: 20px;
            }
        }

        p {
            width: 350px;
            text-align: left;
            letter-spacing: 0.01em;
        }

        .view-more-button {
            right: 30px;
            top: 75%;
            transform: rotate(45deg);

            span {
                &:nth-of-type(4) {
                    transform: translateY(-50%) rotate(-225deg);

                    &::before {
                        transform-origin: bottom;
                        bottom: initial;
                        bottom: -8px;
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }

    .bg-img-container {
        .display {
            position: absolute;
            inset: unset;
            right: 0;
            height: 100%;
            width: 70%;
        }

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

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

#top-pergola {
    margin: 0 30px;

    &::after {
        content: none;
    }

    .text-container {
        top: unset;
        bottom: calc(100%/3 + 8%);
        right: unset;
        left: 0;
        height: 300px;
        width: 60%;
        background-image: linear-gradient(270.06deg, transparent, transparent 60%, rgba(31, 31, 31, 0.75) 60%, rgba(32, 32, 32, 0.2) 90%);

        h2,
        p {
            width: 308px;
            margin: 0 auto 0 103px;
        }

        h2 {
            font-size: 40px;

            span {
                font-size: 20px;
            }
        }

        p {
            text-align: left;
            letter-spacing: 0.01em;
        }

        .view-more-button {
            right: unset;
            top: 90%;
        }
    }

    .bg-img-container {

        .display {
            position: absolute;
            inset: unset;
            left: 0;
            height: 100%;
            width: 70%;
        }

        .pick-img-container {
            grid-template-columns: initial;
            grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3);
            width: 30%;
            height: 100%;
            margin-left: auto;

            .pick {
                grid-column: 1;
            }

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

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

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

#new-world {
    height: 100svh;
    padding-top: 150px;
    justify-content: center;
    align-items: center;
    gap: 7vw;
    text-align: left;

    .img-container {
        &.from-pc {
            margin: 0 0 0 100px;
            width: 450px;
            height: 600px;
        }
    }

    >div {
        position: relative;

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

        &::before {
            top: 32px;
            right: -32px;
            width: 385px;
            height: 1px;
        }

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

        h2 {
            text-align: left;

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

    #new-world-catch-copy {
        writing-mode: vertical-rl;
        margin-top: 0;

        .cross {
            display: none;
        }
    }

    p {
        line-height: 28px;

        &:first-child {
            padding-top: 15px;
        }
    }
}

#top-gallery {
    margin-right: 30px;
    margin-left: 30px;

    #top-gallery-swiper {
        height: 80svh;

        h2 {
            font-size: 24px;
            left: 0;
        }

        .swiper-button-next {
            top: -60px;

            &:hover {

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

        .swiper-wrapper {
            .swiper-slide {
                padding: 0 5px;

                &.swiper-slide-active {
                    padding-left: 0;
                }
            }
        }

        #gallery-description {
            left: 1em;
            bottom: -15px;
            font-size: 16px;
        }
    }

    #view-more-gallery {
        justify-content: right;
        width: fit-content;
        margin: 0 140px 0 auto;
        position: relative;
        bottom: 40px;
        z-index: 1;

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            width: 160%;
            height: 160%;
            background-color: #000;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        p {
            display: none;
        }
    }
}

#contact-prime {
    padding-top: 194px;
    padding-bottom: 145px;

    h2 {
        font-size: 64px;

        &::after {
            width: 76px;
        }

        span {
            font-size: 20px;
        }
    }

    >p {
        font-weight: 700;
        padding-top: 133px;
    }

    dl {
        font-size: 24px;
        padding: 51px 0 88px;

        .row {
            &:first-child {
                dd {
                    font-size: 38px;
                    letter-spacing: 0.04em;
                }
            }
        }
    }

    form {
        width: 1140px;
        padding-top: 59px;
        padding-right: 50px;
        padding-left: 50px;

        .row-from-pc {
            align-items: center;
            padding: 40px;
            border-top: #000 solid 2px;

            .legend {
                border-top: none;
                background-color: transparent;
                margin: 0 46px 0 0;
                width: 209px;
                position: relative;

                span {
                    position: absolute;
                    right: 0;
                }
            }

            input[type="radio"]+.wpcf7-list-item-label,
            input[type="checkbox"]+.wpcf7-list-item-label {
                margin-right: 29px;
                padding-left: 38px;

                &::before {
                    left: 16px;
                    width: 16px;
                    height: 16px;
                    font-size: 16px;
                }
            }

            input[type="text"] {
                height: 44px;

                &[name="family-name"],
                &[name="furigana-family-name"],
                &[name="given-name"],
                &[name="furigana-given-name"] {
                    width: 298px;
                }

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

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

                &#street-address {
                    margin-left: 20px;
                    width: 683px;
                }
            }

            #tel,
            #email {
                width: 683px;
                height: 44px;
            }

            textarea {
                width: 683px;
                height: 162px;
            }

            .column-from-pc {
                &:has(label[for="postal-code"]) {
                    position: relative;
                    right: 15px;
                }
            }
        }

        .line {
            width: 1040px;
            height: 2px;
        }

        #privacy-policy {
            font-size: 18px;
            margin: 0 auto;
            padding: 22px 40px;
            width: 960px;

            div {
                width: fit-content;
                margin: 0 auto;

                label {
                    font-size: 18px;
                }

            }
        }

        input[type="submit"],
        input[type="button"] {
            font-size: 24px;
            padding: 20px 60px;
        }

        .row {
            input {
                padding: 20px 52px;

                &:nth-of-type(2) {
                    padding: 20px 58px;
                }
            }
        }
    }
}

#thanks-prime {
    h2 {
        font-size: 64px;

        &::after {
            bottom: -51px;
            width: 76px;
        }

        span {
            font-size: 20px;
        }
    }

    p {
        &:first-of-type {
            margin-top: 186px;
        }

        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4) {
            font-size: 16px;
        }

        &:nth-of-type(4) {
            span {
                font-size: 20px;
                display: inline;
            }
        }
    }

    >a {
        margin-top: 89px;
        margin-bottom: 223px;
    }
}

#privacy-prime {
    small {
        margin-right: 100px;
    }

    p {
        &:first-of-type {
            text-align: center;
        }
    }

    #privacy-content {
        >li {
            >dl {
                >dd {
                    dl {
                        margin-left: 100px;

                        div {
                            margin-left: 50px;
                        }
                    }
                }
            }
        }
    }
}

#reform-eye-catch {
    padding-top: 30px;
    padding-bottom: calc(100svh - 82.5svh - 30px);
    position: relative;

    .row {
        margin: 0 20px;

        &:first-child {
            justify-content: right;
            gap: 16px;
            height: 82.5svh;

            .img-container {
                width: 33vw;
            }

            strong {
                bottom: 182px;
                left: 46px;
                width: fit-content;
                height: 142px;
                font-size: 56px;
                color: #fff;
                background-color: transparent;

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

        &:nth-child(2) {
            position: absolute;
            bottom: 132px;
            left: 60px;
            font-size: 12px;
        }
    }
}

#reform-catch-copy {
    .bg-img {
        width: 76%;
        height: 80svh;

        h2 {
            font-size: 76px;
        }
    }

    p {
        font-size: 48px;

        &:first-of-type {
            margin-left: 7.7vw;
        }
    }
}

.scroll-signboad {
    &:nth-child(3) {
        height: 211px;
    }
}

#reform-prime {

    h2 {
        font-size: 72px;
    }

    p {
        font-size: 20px;
        line-height: 30px;
        padding: 22px 113px 22px 130px;
        word-break: keep-all;
        overflow-wrap: anywhere;

        .cross {
            &:first-child {
                left: -7px;

                &::before {
                    left: -25px;
                    width: 118px;
                }

                &::after {
                    top: -33px;
                    height: 137px;
                }
            }

            &:last-child {
                bottom: -6px;

                &::before {
                    top: unset;
                    bottom: -35px;
                    height: 137px;
                }

                &::after {
                    right: -35px;
                    width: 118px;
                }
            }
        }
    }

    a {
        margin-right: 26.6vw;
        font-size: 16px;

        &:hover {
            &::before {
                content: "";
                position: absolute;
                left: 50%;
                bottom: -2px;
                z-index: 1;
                width: calc(100% + 43px);
                height: 2px;
                transform: translateX(-50%);
                background-color: #ffde59;
                animation: swiperButtonAnim 2s forwards linear infinite;
            }

            .view-more-button {
                span {
                    &:nth-of-type(2) {
                        background-color: #ffde59;
                    }
                }
            }
        }

        &::after {
            left: 50%;
            width: calc(100% + 43px);
            transform: translateX(-50%);
        }

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

#construction-example {

    .title-part {
        justify-content: center;

        &.row-reverse-from-pc {
            height: 384px;

            h2 {
                text-align: center;
            }
        }

        p {
            flex: 1;
            align-self: center;
            font-family: "NotoSerifTC";
            font-size: 48px;
            font-weight: 700;
            letter-spacing: 0.1em;
            padding-left: 20px;

            span {
                display: block;
                width: fit-content;
                margin-left: 300px;
            }
        }

        .scroll-signboad {
            left: unset;
        }

        h2 {
            flex: 1;
            align-self: center;
            position: relative;
            inset: unset;
            transform: none;
            font-size: 40px;
            letter-spacing: 0.1em;
        }
    }
}

#swiper-container {

    &.pergola {
        padding-bottom: 486px;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 216px;
            width: 1100px;
            height: 1px;
            background-color: #fff;
        }
    }

    .row-reverse-from-pc {
        padding: 180px 0 382px;
        position: relative;

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: 1100px;
            height: 1px;
            background-color: #fff;
        }

        &::before {
            top: 0;
        }

        &::after {
            left: 0;
            bottom: 112px;
        }

        #reform-thumb-swiper {
            height: 70svh;
            margin-left: 0;
            flex: 7;
            overflow-y: clip;
        }

        #reform-swiper {
            flex: 3;
            height: 70svh;
            margin-right: 0;
            overflow-y: clip;

            .swiper-slide {
                height: calc(100% / 3);
            }
        }

        .swiper-button-prev,
        .swiper-button-next {
            transform-origin: left 100%;

            &::before {
                left: unset;
                width: 140px;
                transform: none;
            }
        }

        .swiper-button-prev {
            top: 0;
            left: 0;
            bottom: unset;
            transform: rotate(90deg) translate(75px, -100px);
        }

        .swiper-button-next {
            right: unset;
            left: 0;
            bottom: 298px;
            transform: rotate(90deg) translate(-125px, -100px);

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

    .swiper-pagination {
        right: 70px;
        left: unset;
        font-size: 40px;

        span {
            font-size: 24px;

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

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

    #reform-thumb-swiper,
    #reform-swiper,
    #pergola-thumb-swiper,
    #pergola-swiper {
        margin-right: 68px;
        margin-left: 72px;
    }

    #pergola-thumb-swiper {
        margin-top: 150px;
        height: 55svh;
        overflow-x: clip;
    }

    #pergola-swiper {
        height: 25svh;
        overflow-x: clip;

        ~.swiper-button-prev {
            left: 73px;
            bottom: 400px;

            &::before {
                left: unset;
                width: 140px;
                transform: none;
            }
        }

        ~.swiper-button-next {
            right: 68px;
            bottom: 400px;

            &::before {
                left: unset;
                transform: none;
                width: 140px;
            }
        }
    }

    .swiper-button-prev,
    .swiper-button-next {
        font-size: 24px;

        &:hover {
            &::after {
                display: block;
                position: absolute;
                bottom: 0;
                width: 140px;
                height: 1px;
                background-color: #ffde59;
                animation: swiperButtonAnim 2s forwards linear infinite;
            }
        }
    }
}

#pergola-eye-catch {
    padding-top: 30px;
    padding-bottom: calc(100svh - 82.5svh - 30px);
    position: relative;

    .row {
        margin: 0 20px;

        &:first-child {
            justify-content: right;
            gap: 16px;
            height: 82.5svh;

            .img-container {
                width: 33vw;
            }

            strong {
                bottom: 182px;
                left: 46px;
                width: fit-content;
                height: 142px;
                font-size: 56px;
                color: #fff;
                background-color: transparent;

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

        &:nth-child(2) {
            position: absolute;
            bottom: 132px;
            left: 60px;
            font-size: 12px;
        }
    }
}

#pergola-catch-copy {
    justify-content: center;
    gap: 20px;
    height: 100svh;
    margin: 0 30px;

    .bg-img {
        flex: 1;
        height: 57.7%;
        align-self: flex-start;

        &:first-child {
            align-self: center;
        }
    }

    strong {
        font-size: 48px;

        &::after {
            bottom: -15px;
        }

        &:first-of-type {
            left: 50%;
            transform: translateX(-50%);
        }

        &:last-child {
            position: absolute;
            bottom: 360px;
            right: 0;
        }
    }
}

#pergola-prime {
    height: 100svh;

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

            &::before {
                top: 58px;
                right: 0;
                width: 100%;
            }

            &::after {
                top: 0;
                right: 70px;
                height: 100%;
            }
        }

        &:nth-last-child(2) {
            &::before {
                left: 70px;
                height: 100%;
            }

            &::after {
                bottom: 48px;
            }
        }
    }

    h2 {
        font-size: 72px;
        padding-top: 252px;
    }

    p:first-of-type {
        font-size: 20px;
        line-height: 30px;
        padding: 22px 113px 22px 130px;

        .cross {
            &:first-child {
                left: -7px;

                &::before {
                    left: -25px;
                    width: 118px;
                }

                &::after {
                    top: -33px;
                    height: 137px;
                }
            }

            &:last-child {
                bottom: -6px;

                &::before {
                    top: unset;
                    bottom: -35px;
                    height: 137px;
                }

                &::after {
                    right: -35px;
                    width: 118px;
                }
            }
        }
    }

    >a {
        margin-right: 17.5vw;
        font-size: 16px;
        bottom: 8svh;

        &:hover {
            &::before {
                content: "";
                position: absolute;
                left: 50%;
                bottom: -2px;
                z-index: 1;
                width: calc(100% + 43px);
                height: 2px;
                transform: translateX(-50%);
                background-color: #0021a6;
                animation: swiperButtonAnim 2s forwards linear infinite;
            }

            .view-more-button {
                span {
                    &:nth-of-type(2) {
                        background-color: #0021a6;
                    }
                }
            }
        }

        &::after {
            left: 50%;
            width: calc(100% + 43px);
            transform: translateX(-50%);
        }

        span {
            font-size: 28px;
        }

        .view-more-button {
            right: -100px;
        }
    }

    .scroll-signboad {
        &:nth-child(3) {
            top: -200px;
            height: 310px;

            &::after {
                top: unset;
                bottom: 0;
                font-size: 17px;
                font-weight: 700;
                letter-spacing: 0.1em;
            }
        }

        &:last-child {
            left: 50%;
            bottom: -384px;
            height: 479px;

            &::after {
                bottom: 0;
                font-size: 17px;
                font-weight: 700;
                letter-spacing: 0.1em;
            }
        }
    }
}

#company-prime {
    h2 {
        font-size: 64px;

        &::after {
            width: 76px;
        }

        span {
            font-size: 20px;
        }
    }

    #president-greeting {
        justify-content: center;

        .img-container-container {
            &::before {
                width: 139px;
                height: 139px;
            }

            &::after {
                width: 152px;
                height: 152px;
            }
        }

        >.img-container-container {
            align-self: flex-end;

            .img-container {
                width: 440px;
                height: 440px;
                margin: 50px;
                overflow: hidden;
                position: relative;

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

        >:last-child {
            height: 606px;
            position: relative;

            .row-reverse-from-pc {
                width: fit-content;
                margin-right: auto;

                >strong {
                    position: absolute;
                    top: 51px;
                    right: 10px;
                    font-size: 49px;
                    font-weight: 700;
                    letter-spacing: 0.4em;
                    text-wrap: nowrap;
                    writing-mode: vertical-rl;
                    margin-top: 0;
                    margin-bottom: 0;
                    padding-top: 0;
                    padding-bottom: 0;
                    display: flex;
                    align-items: end;
                }
            }

            h3 {
                font-size: 32px;
                font-weight: 700;
                margin-bottom: 64px;

                span {
                    display: none;
                }
            }

            .text-container2 {
                width: 570px;
                margin-right: 124px;
                padding-right: 88px;
                position: relative;

                .cross {
                    top: -85px;
                    right: 40px;

                    &::before {
                        top: -1px;
                        right: -202px;
                        width: 490px;
                        height: 1px;
                    }

                    &::after {
                        top: -62px;
                        right: 0;
                        width: 1px;
                        height: 669px;
                    }
                }

                p {
                    font-size: 18px;
                }

                strong {
                    margin-right: 25px;
                }
            }
        }
    }
}

.between-img-container {
    top: 155px;
    width: 616px;
    height: 366px;
    margin: 100px 112px 0 auto;
}

#corpo-info-detail {
    padding-top: 275px;
    padding-bottom: 300px;

    &::after {
        content: none;
    }

    .bg-img {
        height: calc(100% - 114px);

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 86px;
            background-image: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
        }
    }

    h3 {
        position: relative;
        font-family: "NotoSerifTC";
        font-size: 32px;
        font-weight: 700;
        width: 1200px;
        margin: 0 auto 1em;

        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 159px;
            width: 425px;
            height: 1px;
            background-color: #fff;
            transform: translateY(-50%);
        }
    }

    dl {
        font-size: 18px;

        >.row {
            dt {
                background-color: #121212;
                width: 250px;
                padding: 23px 38px;
            }

            dd {
                width: 950px;
                padding: 23px 38px;

                a {
                    &:hover {
                        opacity: 0.6;
                    }
                }
            }
        }
    }
}

#gallery-bg-container {
    &::after {
        content: none;
    }
}

/* #gallery-opening {
    position: relative;
    z-index: 1;
    height: 400svh;
    margin-bottom: -300svh;

    .scroll-part {
        position: sticky;
        top: 0;
        height: 100svh;

        .img-container {
            position: absolute;
            animation-fill-mode: forwards;
            animation-timeline: scroll();

            &:first-child {
                top: 50%;
                left: 50%;
                z-index: 2;
                width: 840px;
                height: 840px;
                transform: translate(-50%, -50%);
                animation-name: scaleToZeroCenter;
                animation-timing-function: linear;
                animation-range: contain 0 contain 100svh;

                h2 {
                    font-family: "Jost";
                    font-size: 128px;
                    font-weight: 500;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .scroll-signboad {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 211px;

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

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

                    &:nth-child(3) {
                        left: unset;
                        right: 30px;

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

            &:not(:first-child) {
                width: 464px;
                height: 464px;
            }

            &:nth-child(2) {
                top: 0;
                left: 0;
                z-index: 1;
                animation-name: toNewEra, newEraDoorAnimLeft;
                animation-range: contain 0 contain 100svh, contain 100svh contain 200svh;
            }

            &:nth-child(3) {
                top: -14px;
                right: -29px;
                animation-name: shrinkHeightAnim;
                animation-range: contain 0 contain 100svh;
            }

            &:nth-child(4) {
                bottom: -14px;
                left: -29px;
                animation-name: shrinkHeightAnim;
                animation-range: contain 0 contain 100svh;
            }

            &:nth-child(5) {
                bottom: 0;
                right: 0;
                z-index: 1;
                animation-name: toNewEra, newEraDoorAnimRight;
                animation-range: contain 0 contain 100svh, contain 100svh contain 200svh;
            }
        }
    }
}

#new-era-door {
    position: relative;
    z-index: 0;
    height: 400svh;

    .row-from-pc {
        position: sticky;
        top: 0;

        &:first-child {
            z-index: 2;

            .img-container {
                animation-range: contain 200svh contain 300svh;
            }
        }

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

            .img-container {
                animation-range: contain 300svh contain 400svh;
            }
        }

        .img-container {
            position: absolute;
            top: 0;
            width: 50vw;
            height: 100svh;
            animation-timing-function: linear;
            animation-timeline: scroll();
            animation-fill-mode: forwards;

            &:first-child {
                left: 0;
                animation-name: newEraDoorAnimLeft;
            }

            &:nth-child(2) {
                right: 0;
                animation-name: newEraDoorAnimRight;
            }
        }
    }
}

#mesmerizer {
    margin-top: -200svh;
    margin-bottom: 120svh;
    transform: scale(0.5);

    .row {
        p {
            font-size: 125px;
        }
    }
}

#scaledown-img-container {
    position: relative;
    height: 820svh;

    .img-container {
        height: 70svh;

        &:nth-child(2) {
            animation-range: contain 550svh contain 600svh;
            margin-top: 170svh;
        }

        &:nth-child(3) {
            animation-range: contain 700svh contain 750svh;
        }

        &:nth-child(4) {
            animation-range: contain 850svh contain 900svh;
        }
    }
}

#gallery-prime-swiper {
    height: 100svh;

    a,
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    h2 {
        left: 245px;
    }

    .swiper-pagination {
        gap: 80px;
        transform: none;
        top: 140px;
        right: unset;
        left: 140px;

        .column {
            gap: 40px;

            .gallery-pc-list {
                font-size: 20px;
                width: fit-content;
                height: fit-content;
                padding: 5px;
                filter: drop-shadow(4px 4px 0px #00000080);
                position: relative;

                &:hover {
                    opacity: 0.7;
                }

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

                &::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: -35px;
                    display: block;
                    width: 30px;
                    height: 2px;
                    background-color: #fff;
                    transform: translateY(-50%);
                }

                &.current {
                    color: #ffde59;

                    &::before {
                        background-color: #ffde59;
                    }
                }
            }
        }
    }
} */

body:has(section#gallery-eye-catch.white-out) {
    .sound-btn-container {
        mix-blend-mode: difference;
    }
}

.sound-btn-container {
    position: fixed;
    top: 45px;
    right: 307px;
    z-index: 2;
    font-family: "ShipporiMincho";
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;

    button {
        position: relative;
        font-family: "ShipporiMincho";
        font-size: 9px;
        display: flex;
        align-items: center;
        width: 80px;
        height: 20px;
        border: 1px #fff solid;

        span {
            position: absolute;
            top: 2px;
            left: 2px;
            display: block;
            width: 37px;
            height: 14px;

            &:not(.clip) {
                border: 1px #fff solid;

                &.active+.clip {
                    width: 37px;
                }
            }

            &.clip {
                top: 0;
                left: 0;
                width: 0;
                height: 20px;
                background-color: #fff;
            }

            &.active {
                background-color: #fff;
                left: 39px;
            }
        }
    }
}

#gallery-eye-catch {
    &.white-out {
        @supports not (animation-timeline: scroll()) {
            >div:not(.gallery-eye-catch-collision) {
                .row-from-pc {
                    >span {
                        left: 30vw;
                        opacity: 1;
                    }

                    h2 {
                        right: 0;
                    }
                }

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

                    &::after  {
                        color: #000;
                    }
                }
            }
        }

        @supports (animation-timeline: scroll()) {
            >div:not(.gallery-eye-catch-collision) {
                .row-from-pc {
                    >span {
                        left: 30vw;
                        opacity: 1;
                    }

                    h2 {
                        right: 0;
                    }
                }
            }
        }
    }
    
    .row-from-pc {
        gap: 120px;

        >span {
            position: relative;
            left: 45vw;
            font-size: 28px;
            font-weight: 700;
            opacity: 0;

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

        h2 {
            position: relative;
            right: 240px;
            align-items: center;
            gap: 55px;

            span {

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

                &:nth-of-type(2) {

                    span {
                        &:first-of-type {
                            font-size: 32px;
                        }

                        &:nth-of-type(2) {
                            font-size: 64px;
                        }
                    }
                }
            }
        }
    }

    .scroll-signboad {
        position: absolute;
        bottom: 45px;
        right: 100px;
        z-index: 3;
        height: 200px;
        width: 5px;

        &::before {
            height: 80%;
            background-color: #fff;
        }

        &::after {
            bottom: 0;
            left: 50%;
            font-size: 25px;
            color: #fff;
            writing-mode: initial;
            transform: translateX(-50%);
        }

        @supports (animation-timeline: scroll()) {
            &::before {
                animation: gainBlackBG both linear, scrollSignAnim both linear;
                animation-range: contain 0 contain 100svh;
                animation-timeline: scroll();
            }

            &::after {
                animation: gainBlack both linear;
                animation-range: contain 0 contain 100svh;
                animation-timeline: scroll();
            }
        }
    }
}

.pagination {
    top: calc(100svh - 310px);
    gap: 16px;
    margin-top: 310px;

    &::before {
        right: 1.5vw;
    }

    .pagination-bullet {
        margin-right: calc(1.5vw - 7px);
        width: 16px;
        height: 16px;

        &:hover {
            background-color: #ffffdd;

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

        &.active {
            &::before {
                width: 26px;
                height: 26px;
            }
        }
    }
}

#countries {
    height: 100svh;

    .row {
        top: 57svh;
        right: 16vw;
        width: 454px;

        button {
            &:hover {
                span {
                    &:nth-of-type(2) {
                        background-color: #333;
                        border: solid #fff 1px;
                    }

                    &:nth-of-type(3) {
                        &::before,
                        &::after {
                            background-color: #333;
                            border: solid #fff 1px;
                        }
                    }
                }
            }
        }
    }

    .swiper-wrapper {
        &:has(li.swiper-slide-active:where([data-swiper-slide-index="0"], [data-swiper-slide-index="2"])) {
            +.row {
                button {
                    &:hover {
                        span {
                            &:nth-of-type(2) {
                                background-color: #ffde59;
                                border: solid #fff 1px;
                            }

                            &:nth-of-type(3) {
                                &::before,
                                &::after {
                                    background-color: #333;
                                    border: solid #fff 1px;
                                }
                            }
                        }
                    }
                }
            }
        }

        &:has(li.swiper-slide-active:where([data-swiper-slide-index="1"], [data-swiper-slide-index="3"])) {
            +.row {
                button {
                    &:hover {
                        span {
                            &:nth-of-type(2) {
                                background-color: #ccc;
                                border: solid #000 1px;
                            }

                            &:nth-of-type(3) {

                                &::before,
                                &::after {
                                    background-color: #ffde59;
                                    border: solid #000 1px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .swiper-slide {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-right: 58vw;
            padding-bottom: 35px;

            >.swiper-button-next {
                font-size: 18px;
                width: 200px;
                height: 200px;

                &:hover {
                    filter: invert(1);
                    background-color: #7f7f7f;

                    &::after {
                        opacity: 1;
                    }
                }

                .scroll-signboad {
                    height: 60px;
                    bottom: 45px;
                    right: 50px;
                }
            }

            h3 {
                font-size: 76px;
                width: 100%;

                span {
                    font-size: 32px;
                }
            }

            .img-container {
                &:nth-child(3) {
                    position: absolute;
                    top: 6svh;
                    right: 9.6vw;
                    width: 48vw;
                    height: 43svh;
                }

                &:last-child {
                    width: 35vw;
                    height: 25svh;
                }
            }

            .text-container2 {
                height: 250px;
                margin-top: 0;

                strong {
                    position: absolute;
                    top: 75svh;
                    right: 11vw;
                    font-size: 32px;
                }
            }
        }
    }
}

#youngest-day {
    position: relative;
    height: 100svh;
    justify-content: center;
    gap: 20vw;

    .bg-img {
        position: absolute;
        width: 100%;
        background-size: 200vw;
    }

    #ja-ver,
    #en-ver {
        position: relative;
        margin-top: 15svh;
        justify-content: initial;
        animation: none;

        &#en-ver {
            opacity: 0.7;
        }

        &:not(.active) {
            transform: none;
        }
    }

    #en-ver {
        p {
            margin-bottom: 0.5em;
        }
    }

    h3 {
        font-size: 28px;
    }

    #en-ver-collision {
        display: none;
    }
}

#explore {

    &:has(li:nth-child(3) .active) {
        .book-btn-group {
            top: calc(90svh / 2);
            left: calc(80vw / 2);
            transition-property: opacity;
            transition-delay: 6s;

            button {
                font-size: 48px;

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

    &:has(li:nth-child(4) .active) {
        button:nth-child(1) {
            font-size: 48px;

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

    &:has(li:nth-child(5) .active) {
        button:nth-child(2) {
            font-size: 48px;

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

    &:has(li:nth-child(6) .active) {
        button:nth-child(3) {
            font-size: 48px;

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

    &:has(#explore-opening.all-body) {
        .book-btn-group {
            opacity: 0;
            visibility: hidden;

            transition-delay: 6.3s;
        }
    }

    h3 {
        font-size: 76px;
        top: 0;
    }

    .book-btn-group {
        top: 198px;
        left: 161px;

        button {
            font-size: 36px;

            &:hover {
                opacity: 0.7;
            }

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

}

.book {
    top: -53px;

    &:nth-child(4) {
        .page-clip {
            .page1, .page2 {
                h4 {
                    &:not(.visited) {
                        letter-spacing: -0.01em;
                    }
                }
            }
        }
    }

    &:nth-child(6) {
        .page-clip {
            .page1, .page2 {
                h4 {
                    font-size: 48px;
                }
            }
        }
    }

    .page-clip {
        display: flex;
        justify-content: end;

        .page1, .page2 {

            height: 56.5vw;

            margin: 0 0 0 auto;

            .explore-opening {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 56px;
                font-weight: 700;
                color: #000;
                width: 100%;
                height: 100%;

                margin: 0;
                background-color: #FFFFFFC7;
                pointer-events: auto;

                &:not(.all-body) {
                    transition-delay: 6s;
                    opacity: 0;

                    p {
                        animation-name: hauntAnim;
                        animation-duration: 5s;
                        animation-fill-mode: both;
                        animation-delay: 1s;
                    }
                }

                /* &:not(.all-body, :has(p.active)) {
                    opacity: 0;
                    transition-delay: 0.7s;

                    p {
                        padding-bottom: 500px;
                        opacity: 0;
                        transition-delay: 0.7s;
                    }
                } */

                p {
                    text-align: center;
                    opacity: 0;

                    &::after {
                        content: "|";
                        font-weight: initial;
                    }

                    &:not(.active) {
                        &::after {
                            animation: blinking 1s infinite;
                        }
                    }

                    span {
                        display: none;

                        &.active {
                            display: inline;
                        }
                    }
                }
            }

            h4 {
                font-size: 76px;
                color: #000;
                text-align: center;
                width: 585px;
                background-color: #fff;
                margin-left: auto;

                /* &:not(.visited) {
                    &::after {
                        content: "|";
                        font-weight: initial;
                    }
                } */

                span {
                    display: none;

                    &.active {
                        display: inline;
                    }
                }
            }

            >div {
                display: flex;
                flex-direction: column;
                padding-top: 100px;
                margin: 0;

                div {
                    display: flex;
                    flex-direction: row-reverse;
                    padding-top: 47px;

                    span:has(span),
                    strong {
                        display: flex;
                        flex-direction: row-reverse;

                        span {
                            writing-mode: vertical-rl;
                            letter-spacing: 0.04em;
                            line-height: 1.25em;
                        }
                    }

                    span {
                        font-size: 20px;
                        padding-top: 10px;

                        &.for-mb-tb {
                            display: none;
                        }
                    }

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

                    strong {
                        margin: 0 53px 0 47px;

                        span {
                            font-size: 40px;
                            &:nth-child(2) {
                                padding-top: 104px;
                            }
                        }
                    }
                }
            }
        }
    }
}

#signature-phrases {
    display: flex;
    overflow-y: clip;

    .thumb-swiper {
        width: 45vw;
        height: 100svh;
        padding-bottom: 13svh;

        .swiper-wrapper {
            .swiper-slide {
                width: 100%;
                height: 100%;
            }

            /* .swiper-slide-next + .swiper-slide + .swiper-slide {
                height: 823px !important;
                z-index: 5 !important;
                transform: translate3d(calc(112px), calc(-2400px), calc(0px)) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1) !important;
            } */
        }
    }

    .pagenavi {
        .signature-swiper-pagination {
            transform: translate(30px, 30px) rotate(-45deg);

            .swiper-pagination-current,
            .swiper-pagination-total {
                font-size: 76px;
                transform: translate(20px, -120px) rotate(45deg);
            }
        }
    }

    .phrases {
        flex: 1;
        height: 100svh;

        ul {
            li {
                top: 30svh;
                font-size: 56px;
                width: fit-content;
                height: 100svh;
                margin-right: auto;
            }
        }
    }
}

#gallery-prime {
    position: relative;

    #gallery-prime-opening {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: #ccc;

        &:not(.all-body) {
            background-color: #00000000;
            animation: pointerDelay 1s 5s both;
            transition-delay: 5s;

            +.button-group {
                filter: none;
                transition-delay: 5s;
                opacity: 1;
            }

            p {
                animation: hauntAnim 5s both;
            }
        }

        &.all-body {
            pointer-events: auto;

            +.button-group {
                filter: blur(50px);
                opacity: 0;
            }
        }

        p {
            font-family: "ShipporiMincho";
            font-size: 76px;
            font-weight: 700;
            color: #000;
            text-align: center;
            /* position: absolute;
            top: 75%;
            left: 0; */
            width: 100%;
            /* transform: translateY(-50%); */
            opacity: 0;

            /* &:nth-of-type(2) {
                animation-delay: 3.5s;
            } */
        }
    }

    .button-group {
        grid-template-rows: 200px 250px 200px;
        grid-template-columns: 400px 143px 403px 92px 360px;
        gap: 14px;
        padding: calc((100svh - 678px) / 2) calc((100vw - 1454px) / 2);

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

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

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

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

        .item5 {
            grid-row: 2;
            grid-column: 5;
        }

        .item6 {
            grid-row: 3;
            grid-column: 1;
        }

        .item7 {
            grid-row: 3;
            grid-column: 2 / 4;
        }

        .item8 {
            grid-row: 3;
            grid-column: 4 / 6;
        }
    }

    dialog {
        .img-container {
            width: 84vw;
            height: 52svh;
            margin-right: 8vw;
            margin-left: 8vw;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: -50px;
                z-index: 1;
                display: block;
                width: 100px;
                height: 1px;
                background-color: #fff;
                transform: rotate(-45deg);
            }

            &::after {
                right: -50px;
                width: 100px;
            }
        }

        .text-container2 {
            width: 70vw;
            height: 32svh;
            margin: 0 0 0 15vw;

            .row-from-pc {
                height: 100%;
                padding-right: 100px;
                padding-left: 100px;

                div {
                    flex: 3;
                }

                p {
                    flex: 5;
                }
            }
        }

        .close {
            align-self: flex-end;
            transform: scale(2);
        }
    }
}

@media screen and (min-width : 1500px) {
    #hero-img {
        h2 {
            left: 8vw;
            bottom: calc(2svh - 2px);

            .img-container {
                height: 130px;

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

    #new-world {
        padding-bottom: 180px;

        >div {
            h2 {
                span {
                    font-size: 96px;
                }
            }
        }

        p {
            width: 443px;
        }
    }

    #top-gallery {
        #top-gallery-swiper {
            .swiper-button-next {
                right: 100px;
            }
        }
    }

    #reform-catch-copy {
        p {
            &:first-of-type {
                text-align: left;
                margin-left: 14.7vw
            }
        }
    }

    #construction-example {
        .title-part {
            .scroll-signboad {
                right: 0.75vw;
            }
        }
    }

    #company-prime {
        #president-greeting {
            >.img-container-container {
                &::before {
                    left: -25px
                }

                &::after {
                    right: -25px;
                }
            }

            >:last-child {
                .text-container2 {
                    width: 625px;
                }
            }
        }
    }

    #explore {
        .book {
            .page-clip {
                .page1, .page2 {
                    >div {
                        div {
                            span span {
                                font-size: 24px;
                            }

                            span,
                            strong {
                                line-height: 1.5em;
                            }
                        }
                    }
                }
            }
        }
    }
}

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

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

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

@keyframes newEraDoorAnimLeft {
    from {
        left: 0;
    }

    to {
        left: -50vw;
    }
}

@keyframes newEraDoorAnimRight {
    from {
        right: 0;
    }

    to {
        right: -50vw;
    }
}

@keyframes toNewEra {
    to {
        width: 50vw;
        height: 100svh;
        opacity: 1;
    }
}

@keyframes shrinkHeightAnim {
    to {
        height: 0;
    }
}

@keyframes scaleToZeroCenter {
    to {
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes hauntAnim {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pointerDelay {
    0% {
        pointer-events: auto;
    }

    50% {
        pointer-events: auto;
    }

    100% {
        pointer-events: none;
    }
}

@keyframes blinking {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    51% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes gainBlack {
    from {
        color: #fff;
    }
    to {
        color: #000;
    }
}

@keyframes gainBlackBG {
    from {
        background-color: #fff;
    }
    to {
        background-color: #000;
    }
}