/* Common */

:root {
    /* Font */
    --font-jost: "Jost", sans-serif;
    --font-jost-static: "JostStatic", sans-serif;
    --font-noto-sans-jp: "Noto Sans JP", sans-serif;
    --font-noto-sans-jp-static: "NotoSansJPStatic", sans-serif;
    --font-noto-serif-jp: "Noto Serif JP", serif;
    --font-syne: "Syne", sans-serif;
    --font-syne-static: "SyneStatic", sans-serif;
    --font-roboto: "Roboto", sans-serif;
    --font-roboto-static: "RobotoStatic", sans-serif;
    --font-zen-dots: "Zen Dots", sans-serif;
    --font-dela-gothic-one: "Dela Gothic One", sans-serif;

    /* Color */
    --main-color: #f5bd04;
    --accent-1-color: #c82100;
    --accent-2-color: #f40604;
    --black-color: #0b0b0b;
    --white-color: #ffffff;
    --gray-color: #8a8a8a;

    /* Gradient */
    --yellow-head-line-gra: linear-gradient(
        180deg,
        #f5bd04 -7.5%,
        #000000 96.53%,
        #f5bd04 191.29%
    );
    --yellow-line-gra: linear-gradient(
        90deg,
        #f5bd04 20.5%,
        #000000 50.5%,
        #f5bd04 96.5%
    );
    --yellow-gra: linear-gradient(90deg, #f5bd04 0%, #000000 57%, #f5bd04 100%);
    --gra-ye: linear-gradient(180deg, #d9d9d9 0%, #f5bd04 100%);

    /* Duration */
    --link-hover-duration: 0.2s;
}

main {
    position: relative;
    z-index: 1;
}

.texture-bg {
    position: relative;
}

.texture-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/black-bg.png);
    opacity: 0.2;
    background-size: 100%;
    inset: 0;
}

.texture-bg--main {
    background-color: var(--main-color);
}
.texture-bg--black {
    background-color: var(--black-color);
}
.texture-bg--yellow-black {
    background-color: var(--main-color);
    &::before {
        opacity: 0.9;
    }
}

.show-nav {
    opacity: 1 !important;
    transform: unset !important;
}

/* Override for dark bg */
body[data-page-slug="home"] {
    background-color: var(--black-color);
}

body[data-page-slug="about"],
body[data-page-slug="business"],
body[data-page-slug="company"] {
    background-color: var(--black-color);
}

body {
    position: relative;
    font-family: var(--font-noto-sans-jp);
    font-size: 16px;
    letter-spacing: 0px;
    color: var(--black-color);
    line-height: 1;
    margin: 0;
}

@media (max-width: 1024px) {
    /* Padding for the header sp */
    main {
        padding-top: calc(100 * 100vw / 375);
    }
}

ul,
ol {
    list-style: none; /* Remove bullet points and numbers */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

button {
    all: unset; /* Reset all styles to default */
    background: transparent; /* Remove background */
    color: inherit; /* Inherit text color */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    font: inherit; /* Inherit font styles */
}

button[type="button"] {
    cursor: pointer; /* Restore pointer cursor */
}

a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color from parent element */
    background: transparent; /* Remove background */
    border: none; /* Remove border (in case of styled links) */
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* Fonts */
.h2-en {
    font-family: var(--font-jost);
    font-size: calc(80 * 100vw / 1920);
    color: var(--accent-1-color);
}
.h2-jp {
    font-family: var(--font-noto-serif-jp);
    font-size: clamp(16px, calc(20 * 100vw / 1920), 99px);
    font-weight: 600;
    color: var(--white-color);
}
.body-copy {
    font-family: var(--font-noto-serif-jp);
    font-size: calc(40 * 100vw / 1920);
}
.body1 {
    font-family: var(--font-noto-sans-jp);
    font-size: clamp(16px, calc(22 * 100vw / 1920), 99px);
    font-weight: 500;
    line-height: 2;
}
.body2 {
    font-family: var(--font-noto-sans-jp);
    font-size: clamp(16px, calc(18 * var(--vw-with-scrollbar) / 1920), 99px);
    font-weight: 600;
    line-height: 1.5;
}
.copyright {
    font-family: var(--font-noto-sans-jp);
    font-size: clamp(12px, calc(14 * var(--vw-with-scrollbar) / 1920), 99px);
    font-weight: 500;
    line-height: 1.5;
}
@media (max-width: 1024px) {
    .h2-en {
        font-family: var(--font-jost);
        font-size: calc(52 * 100vw / 375);
    }
    .h2-jp {
        font-family: var(--font-noto-serif-jp);
        font-size: clamp(16px, calc(18 * 100vw / 375), 99px);
        font-weight: 600;
    }
    .body1 {
        font-family: var(--font-noto-sans-jp);
        font-size: clamp(16px, calc(18 * 100vw / 375), 99px);
        font-weight: 400;
        line-height: 2;
    }
    .body2 {
        font-family: var(--font-noto-sans-jp);
        font-size: clamp(16px, calc(18 * 100vw / 375), 99px);
        font-weight: 600;
        line-height: 1.5;
    }
    .body-copy {
        font-family: var(--font-noto-serif-jp);
        font-size: calc(25.6 * 100vw / 375);
    }
    .copyright {
        font-size: clamp(12px, calc(14 * 100vw / 375), 99px);
    }
}

/* Utility */
@media (max-width: 1024px) {
    .hidden-sp {
        display: none !important;
    }
    .no-scroll-sp {
        overflow: hidden;
    }
}
@media (min-width: 1025px) {
    .hidden-pc {
        display: none !important;
    }
}

.on-link-hover {
    transition: opacity var(--link-hover-duration) ease;
}
.on-link-hover:hover {
    opacity: 0.4 !important;
}

.on-zoom-hover {
    transition: transform var(--link-hover-duration) ease,
        opacity var(--link-hover-duration) ease;
}
.on-zoom-hover:hover {
    transform: scale(1.05);
    opacity: 0.4;
}

.sub-menu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-active > .sub-menu {
    max-height: calc(500 * 100vw / 1920);
    opacity: 1;
    overflow: visible;
}

@media (max-width: 1024px) {
    .is-active > .sub-menu {
        max-height: calc(500 * 100vw / 375);
    }
}

/* Animation */
@keyframes flashLineHorizontal {
    0% {
        opacity: 1;
        width: var(--original-width);
        box-shadow: 0 0 0 transparent;
    }

    20% {
        opacity: 0.3;
        width: calc(var(--original-width) * 0.8);
    }

    40% {
        opacity: 1;
        width: calc(var(--original-width) * 0.2);
    }

    60% {
        opacity: 0.5;
        width: calc(var(--original-width) * 0.7);
    }

    80% {
        opacity: 0.8;
        width: calc(var(--original-width) * 0.5);
    }

    100% {
        opacity: 1;
        width: var(--original-width);
        box-shadow: 0 0 0 transparent;
    }
}

@keyframes flashLineVertical {
    0% {
        opacity: 1;
        height: var(--original-height);
        box-shadow: 0 0 0 transparent;
    }

    20% {
        opacity: 0.3;
        height: calc(var(--original-height) * 0.8);
    }

    40% {
        opacity: 1;
        height: calc(var(--original-height) * 0.2);
    }

    60% {
        opacity: 0.5;
        height: calc(var(--original-height) * 0.7);
    }

    80% {
        opacity: 0.8;
        height: calc(var(--original-height) * 0.4);
    }

    100% {
        opacity: 1;
        height: var(--original-height);
        box-shadow: 0 0 0 transparent;
    }
}
@keyframes flash {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@keyframes moveTextLeft {
    0% {
        transform: translateY(-50%) translateX(0%);
    }

    100% {
        transform: translateY(-50%) translateX(-100%);
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
.fade-in-up-text {
    transform: translateY(clamp(0px, 7%, 300px)) scaleY(0.95);
    opacity: 0;
    filter: blur(10px);
}
.fade-in-up-text.animate {
    animation: fade-in-up-text-animation 0.5s ease-out forwards;
}

@keyframes bgMove {
    0% {
        background-position-x: 3600px;
    }
    100% {
        background-position-x: 0px;
    }
}

@keyframes fade-in-up-text-animation {
    0% {
        opacity: 0;
        transform: translateY(clamp(0px, 7%, 300px)) scaleY(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        filter: blur(0);
    }
}

@keyframes fade-in-up-text-animation-custom-position {
    0% {
        opacity: 0;
        transform: translateY(clamp(0px, 70%, 300px)) scaleY(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        filter: blur(0);
    }
}

.slide-in-banner {
    position: relative;
    overflow: hidden;
    display: flex;
}

.slide-in-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black-color);
    z-index: 1;
    transform: scaleX(0);
    transform-origin: left;
    box-sizing: border-box;
}

.slide-in-banner__text {
    opacity: 0;
    filter: blur(5px);
    position: relative;
    z-index: 2;
    transform: translateY(-100%);
}

.slide-in-banner__text-up {
    transform: translateY(105%);
    z-index: 2;
}

.slide-in-banner.animate .slide-in-banner__text {
    animation: slide-left-fade-in 0.2s 0.45s ease-in-out forwards;
}

.slide-in-banner.animate .slide-in-banner__text-up {
    animation: slide-up-out 0.2s 0.45s cubic-bezier(0.075, 0.82, 0.165, 1)
        forwards;
}

.slide-in-banner.animate::after {
    animation: slide-in-banner-bg-animation 0.4s ease-in-out forwards;
}

@keyframes slide-left-fade-in {
    0% {
        transform: translateX(-100%);
        opacity: 0;
        filter: blur(5px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slide-up-out {
    0% {
        transform: translateY(105%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slide-in-banner-bg-animation {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in-blur {
    0% {
        opacity: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.fade-in-up.animate {
    animation: fade-in-up-animation 0.5s ease forwards;
}

@keyframes fade-in-up-animation {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-dowwn-animation {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-up {
    overflow: hidden;
    display: flex;
}
.text-up__text {
    transform: translateY(100%);
}
.text-up.animate .text-up__text {
    animation: text-up-animation 0.8s cubic-bezier(0.075, 0.82, 0.165, 1)
        forwards;
}

@keyframes text-up-animation {
    0% {
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-fade-in-up__background,
.section-fade-in-up__content {
    opacity: 0;
    transform: translateY(10%);
}

.animate .section-fade-in-up__background {
    animation: slow-fade-in-up 0.5s ease forwards;
}
.animate .section-fade-in-up__content {
    animation: slow-fade-in-up 0.5s ease forwards;
    animation-delay: 0.5s;
}
.slow-fade-in-up {
    opacity: 0;
    transform: translateY(10%);
}
.slow-fade-in-up.animate {
    animation: slow-fade-in-up 1s ease forwards;
}
@keyframes slow-fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.overlay-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(7, 1fr);
    pointer-events: none;
}
.overlay-grid-item {
    background: transparent;
    will-change: opacity, background-color;
}
.overlay-grid-item.filled {
    background-color: var(--black-color);
}
.overlay-grid-item.hidden {
    opacity: 0;
}

.animate .overlay-grid-item {
    animation: hideCell 0.15s ease-in-out forwards;
}

@keyframes hideCell {
    0% {
        opacity: 1;
        background-color: var(--black-color);
    }
    100% {
        opacity: 0;
        background-color: transparent;
    }
}

.reveal-letter span {
    position: relative;
    overflow: hidden;
    display: block;
}
.reveal-letter span .after-el {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: white;
    transform: translateX(-101%);
}
.reveal-letter span .before-el {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: black;
    transform: translateX(0);
}
.reveal-letter.animate span .after-el {
    animation: a-ltr-after 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
.reveal-letter.animate span .before-el {
    animation: a-ltr-before 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
.reveal-letter.hide span .after-el {
    transform: translateX(-100%);
}
.reveal-letter.hide span .before-el {
    transform: translateX(-100%);
}
.reveal-letter.animate.hide span .after-el {
    animation: hide-ltr-after 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
.reveal-letter.animate.hide span .before-el {
    animation: hide-ltr-before 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
@keyframes a-ltr-after {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(101%);
    }
}
@keyframes a-ltr-before {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200%);
    }
}
@keyframes hide-ltr-after {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(101%);
    }
}

@keyframes hide-ltr-before {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes fade-in-up-top {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Common button */
.contact-btn {
    position: relative;
    width: calc(300 * 100vw / 1920);
    height: calc(95 * 100vw / 1920);
    box-sizing: border-box;
    border: 1px solid transparent;
    border-image-source: linear-gradient(
        90deg,
        #f5bd04 0%,
        #000000 57%,
        #f5bd04 100%
    );
    border-image-slice: 1;
    background: url("../img/contact-btn-bg.png");
    background-size: contain;
    padding: calc(17 * 100vw / 1920) calc(22 * 100vw / 1920);
    padding-right: calc(7 * 100vw / 1920);
    z-index: 10;
    display: flex;
    align-items: end;
    justify-content: space-between;
    overflow: hidden;
    pointer-events: auto;
}
.contact-btn__decoration-top {
    display: flex;
    position: absolute;
    top: calc(11 * 100vw / 1920);
    right: calc(7 * 100vw / 1920);
    font-family: var(--font-zen-dots);
    color: transparent;
    font-family: var(--font-zen-dots);
    font-size: calc(40 * 100vw / 1920);
    -webkit-text-stroke: calc(1 * 100vw / 1920) var(--white-color);
}
.contact-btn__decoration-top-deg {
    padding-top: calc(6 * 100vw / 1920);
}
.contact-btn__heading {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.contact-btn__title {
    font-family: var(--font-jost);
    font-size: calc(40 * 100vw / 1920);
    color: var(--accent-1-color);
    padding: 0 calc(5.5 * 100vw / 1920);
    background-color: var(--black-color);
}
.contact-btn__subtitle {
    font-family: var(--font-noto-serif-jp);
    font-size: calc(20 * 100vw / 1920);
    color: var(--white-color);
    background-color: var(--black-color);
    font-weight: 600;
    display: flex;
}
.contact-btn__arrow-icon {
    width: calc(25 * 100vw / 1920);
    height: calc(29 * 100vw / 1920);
    color: var(--white-color);
    margin-bottom: calc(-2 * 100vw / 1920);
}
.contact-btn__wrapper {
    z-index: 10;
}
@media (min-width: 1025px) {
    .contact-btn--dark {
        background-image: url("../img/contact-btn-bg-dark.webp");
    }
    .contact-btn--dark .contact-btn__decoration-top {
        -webkit-text-stroke-color: var(--main-color);
    }
    .contact-btn--dark .contact-btn__title,
    .contact-btn--dark .contact-btn__subtitle {
        background-color: var(--main-color);
    }
    .contact-btn--dark .contact-btn__subtitle {
        color: var(--black-color);
    }
    .contact-btn--dark .contact-btn__arrow-icon {
        color: var(--main-color);
    }
}
@media (max-width: 1024px) {
    .contact-btn {
        width: calc(50 * 100vw / 375);
        height: calc(300 * 100vw / 375);
        background: url("../img/contact-btn-bg-sp.png");
        background-size: contain;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: calc(10 * 100vw / 375) calc(6.5 * 100vw / 375);
    }
    .contact-btn__decoration-top {
        top: unset;
        right: unset;
        bottom: calc(3 * 100vw / 375);
        left: calc(2 * 100vw / 375);
        width: calc(50 * 100vw / 375);
        height: fit-content;
        font-size: calc(15.1 * 100vw / 375);
        -webkit-text-stroke-width: 0.38px;
        line-height: 0.8;
    }
    .contact-btn__decoration-top-deg {
        padding-top: calc(1 * 100vw / 375);
    }
    .contact-btn__title {
        padding: 0 calc(3 * 100vw / 375);
        font-size: calc(25 * 100vw / 375);
    }
    .contact-btn__heading {
        align-items: center;
    }
    .contact-btn__subtitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: calc(17 * 100vw / 375);
        background-color: transparent;
    }
    .contact-btn__subtitle span {
        writing-mode: vertical-lr;
    }
    .contact-btn__arrow-icon {
        width: calc(27 * 100vw / 375);
        height: calc(27 * 100vw / 375);
    }
    .contact-btn__subtitle-comma {
        margin-top: calc(3 * 100vw / 375);
        margin-left: calc(-10 * 100vw / 375);
    }

    .contact-btn__wrapper {
        position: absolute;
        top: calc(450 * 100vw / 375);
        right: 0;
        /* 20251212 */
        position: fixed;
        top: 35vw;
        display: none;
    }
    .contact-btn__wrapper.pinned {
        position: fixed;
        top: calc(350 * 100vw / 375) !important;
    }
}

.view-more-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(244 * 100vw / 1920);
    height: calc(48 * 100vw / 1920);
    border: calc(1 * 100vw / 1920) solid transparent;
    border-image-source: linear-gradient(
        90deg,
        #f5bd04 0%,
        #000000 57%,
        #f5bd04 100%
    );
    border-image-slice: 1;
    background: var(--black-color);
    box-sizing: border-box;
}

.view-more-btn::before {
    opacity: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f5bd04 0%, #000000 57%, #f5bd04 100%);
    transition: 0.5s opacity ease;
    z-index: 0;
}

.view-more-btn__text {
    font-family: var(--font-jost);
    font-weight: 300;
    font-size: clamp(14px, calc(16 * 100vw / 1920), 99px);
    color: var(--white-color);
    line-height: 1.5;
    z-index: 1;
}

.view-more-btn:hover::before {
    opacity: 1;
}

@media (max-width: 1024px) {
    .view-more-btn {
        width: calc(244 * 100vw / 375);
        height: calc(48 * 100vw / 375);
        border-width: calc(1 * 100vw / 375);
    }

    .view-more-btn__text {
        font-size: clamp(14px, calc(16 * 100vw / 375), 99px);
    }
}

/* Glitch effect */
.top-glitch {
    background: #000 no-repeat 50%;
    background-position: top;
    background-size: 0;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.top-glitch .channel,
.top-glitch:after,
.top-glitch:before {
    background: inherit;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

@keyframes glitch-before {
    0% {
        clip-path: polygon(
            0 83.4644056498%,
            100% 83.4644056498%,
            100% 92.0844197808%,
            0 92.0844197808%
        );
        transform: translate(1.1133053603%, -0.3932438706%);
    }

    2.5% {
        clip-path: polygon(
            0 11.3824331855%,
            100% 11.3824331855%,
            100% 14.4022395801%,
            0 14.4022395801%
        );
        transform: translate(-1.5741739291%, 0.3975659285%);
    }

    5% {
        clip-path: polygon(
            0 5.9624066343%,
            100% 5.9624066343%,
            100% 15.6831093379%,
            0 15.6831093379%
        );
        transform: translate(7.7110063106%, -0.4680298514%);
    }

    7.5% {
        clip-path: polygon(
            0 79.5976109539%,
            100% 79.5976109539%,
            100% 89.3334123695%,
            0 89.3334123695%
        );
        transform: translate(-5.3530975558%, 0.1518083163%);
    }

    10% {
        clip-path: polygon(
            0 26.2233757537%,
            100% 26.2233757537%,
            100% 27.354409107%,
            0 27.354409107%
        );
        transform: translate(-6.5684044377%, 0.4012088719%);
    }

    12.5% {
        clip-path: polygon(
            0 56.003670581%,
            100% 56.003670581%,
            100% 57.5558166772%,
            0 57.5558166772%
        );
        transform: translate(7.6715057662%, 0.2989828854%);
    }

    15% {
        clip-path: polygon(
            0 29.1849381428%,
            100% 29.1849381428%,
            100% 38.758591818%,
            0 38.758591818%
        );
        transform: translate(7.9001052285%, -0.0568738595%);
    }

    17.5% {
        clip-path: polygon(
            0 21.5592387524%,
            100% 21.5592387524%,
            100% 29.888715645%,
            0 29.888715645%
        );
        transform: translate(7.2405950944%, 0.3230475118%);
    }

    20% {
        clip-path: polygon(
            0 44.0205469693%,
            100% 44.0205469693%,
            100% 53.5028574231%,
            0 53.5028574231%
        );
        transform: translate(0.5546818129%, 0.1567224048%);
    }

    22.5% {
        clip-path: polygon(
            0 37.0009155289%,
            100% 37.0009155289%,
            100% 46.904165283%,
            0 46.904165283%
        );
        transform: translate(7.012974532%, 0.0189783023%);
    }

    25% {
        clip-path: polygon(
            0 62.6409077499%,
            100% 62.6409077499%,
            100% 64.3680461747%,
            0 64.3680461747%
        );
        transform: translate(-2.8360348634%, 0.4341802192%);
    }

    27.5% {
        clip-path: polygon(
            0 49.4925197841%,
            100% 49.4925197841%,
            100% 52.7016197059%,
            0 52.7016197059%
        );
        transform: translate(-2.802360764%, 0.0987402148%);
    }

    30%,
    to {
        clip-path: none;
        transform: none;
    }
}

.top-glitch:before {
    content: "";
}
.top-glitch.animate:before {
    animation: glitch-before 2s linear infinite alternate both;
}

@keyframes glitch-after {
    0% {
        clip-path: polygon(
            0 69.7199273629%,
            100% 69.7199273629%,
            100% 77.6181704493%,
            0 77.6181704493%
        );
        transform: translate(-3.3863214574%, 0.0693491828%);
    }

    2.5% {
        clip-path: polygon(
            0 75.4811388427%,
            100% 75.4811388427%,
            100% 79.0189388615%,
            0 79.0189388615%
        );
        transform: translate(-0.1125013777%, -0.3849249876%);
    }

    5% {
        clip-path: polygon(
            0 83.6833393191%,
            100% 83.6833393191%,
            100% 93.6119743811%,
            0 93.6119743811%
        );
        transform: translate(7.1087224655%, 0.3300584369%);
    }

    7.5% {
        clip-path: polygon(
            0 52.9038552264%,
            100% 52.9038552264%,
            100% 62.6478091177%,
            0 62.6478091177%
        );
        transform: translate(-2.5555758937%, -0.4488367277%);
    }

    10% {
        clip-path: polygon(
            0 39.0853451119%,
            100% 39.0853451119%,
            100% 40.1406784286%,
            0 40.1406784286%
        );
        transform: translate(-2.8665747895%, -0.3445239717%);
    }

    12.5% {
        clip-path: polygon(
            0 77.9926370548%,
            100% 77.9926370548%,
            100% 82.1124051639%,
            0 82.1124051639%
        );
        transform: translate(4.9608197974%, -0.1856582427%);
    }

    15% {
        clip-path: polygon(
            0 59.5756946919%,
            100% 59.5756946919%,
            100% 61.7130348371%,
            0 61.7130348371%
        );
        transform: translate(1.3318273752%, 0.293054997%);
    }

    17.5% {
        clip-path: polygon(
            0 80.992119878%,
            100% 80.992119878%,
            100% 85.6728201152%,
            0 85.6728201152%
        );
        transform: translate(6.0827320777%, -0.1809917873%);
    }

    20% {
        clip-path: polygon(
            0 14.8102419898%,
            100% 14.8102419898%,
            100% 23.5204402316%,
            0 23.5204402316%
        );
        transform: translate(-7.9234639381%, -0.48021175%);
    }

    22.5% {
        clip-path: polygon(
            0 66.3215416527%,
            100% 66.3215416527%,
            100% 72.6098291353%,
            0 72.6098291353%
        );
        transform: translate(-1.0034880249%, 0.2819856637%);
    }

    25% {
        clip-path: polygon(
            0 36.1492869708%,
            100% 36.1492869708%,
            100% 37.7714465384%,
            0 37.7714465384%
        );
        transform: translate(2.6256844803%, 0.1664809069%);
    }

    27.5% {
        clip-path: polygon(
            0 34.8510402518%,
            100% 34.8510402518%,
            100% 40.4726250999%,
            0 40.4726250999%
        );
        transform: translate(2.7249494478%, 0.1773051645%);
    }

    30%,
    to {
        clip-path: none;
        transform: none;
    }
}

.top-glitch:after {
    content: "";
}
.top-glitch.animate:after {
    animation: glitch-after 2s linear infinite alternate both;
}

.top-glitch .channel {
    mix-blend-mode: screen;
}

.top-glitch .channel:before {
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    right: 0;
    top: 0;
}

@keyframes rgb-shift-r {
    0% {
        transform: translate(0.3289462405%, 0.1886011819%);
    }

    2.5% {
        transform: translate(1.3346814815%, 0.1957898589%);
    }

    5% {
        transform: translate(-1.9572452603%, -0.1834015987%);
    }

    7.5% {
        transform: translate(-0.3256067175%, 0.1179345418%);
    }

    10% {
        transform: translate(1.2633381593%, 0.1568777444%);
    }

    12.5% {
        transform: translate(-1.0379499097%, -0.3170296273%);
    }

    15% {
        transform: translate(-1.6839609007%, 0.4171432034%);
    }

    17.5% {
        transform: translate(0.7003885845%, -0.2304356084%);
    }

    20% {
        transform: translate(-0.942921321%, -0.1542589226%);
    }

    22.5% {
        transform: translate(0.7913916884%, 0.3758941936%);
    }

    25% {
        transform: translate(-1.1081517124%, -0.4593237847%);
    }

    27.5% {
        transform: translate(-0.0144833095%, 0.1259788076%);
    }

    30%,
    to {
        transform: none;
    }
}

.top-glitch.animate .r {
    animation: rgb-shift-r 2s step-end infinite alternate both;
}

.top-glitch .r:before {
    background: #c20000;
}

@keyframes rgb-shift-g {
    0% {
        transform: translate(1.2289290538%, -0.2545297253%);
    }

    2.5% {
        transform: translate(-1.3165674884%, 0.3026455455%);
    }

    5% {
        transform: translate(1.5543699371%, 0.2902542224%);
    }

    7.5% {
        transform: translate(-0.3570102452%, 0.2245106818%);
    }

    10% {
        transform: translate(-1.3155660712%, -0.1767732203%);
    }

    12.5% {
        transform: translate(0.611727175%, -0.4130116832%);
    }

    15% {
        transform: translate(1.0991966561%, 0.3497471854%);
    }

    17.5% {
        transform: translate(1.8949670318%, 0.2617668974%);
    }

    20% {
        transform: translate(0.2875974926%, 0.027476649%);
    }

    22.5% {
        transform: translate(1.3687857445%, -0.4265474964%);
    }

    25% {
        transform: translate(1.0261845681%, -0.1247369407%);
    }

    27.5% {
        transform: translate(-0.4713755838%, -0.4914996606%);
    }

    30%,
    to {
        transform: none;
    }
}

.top-glitch.animate .g {
    animation: rgb-shift-g 2s step-end infinite alternate both;
}

.top-glitch .g:before {
    background: #e2a90c;
}

@keyframes rgb-shift-b {
    0% {
        transform: translate(0.2620869393%, -0.498128412%);
    }

    2.5% {
        transform: translate(-0.5400296193%, 0.0324715177%);
    }

    5% {
        transform: translate(0.8806769503%, 0.321900354%);
    }

    7.5% {
        transform: translate(1.6608083257%, -0.466662757%);
    }

    10% {
        transform: translate(-0.8460054842%, 0.29604656%);
    }

    12.5% {
        transform: translate(0.6807652293%, 0.1439406595%);
    }

    15% {
        transform: translate(1.0999092034%, -0.2237095665%);
    }

    17.5% {
        transform: translate(-1.2394711069%, -0.0318545095%);
    }

    20% {
        transform: translate(1.7019990303%, -0.2356488888%);
    }

    22.5% {
        transform: translate(0.4422875402%, 0.3012367575%);
    }

    25% {
        transform: translate(-1.1086042367%, 0.3984954441%);
    }

    27.5% {
        transform: translate(0.0692154679%, 0.493230058%);
    }

    30%,
    to {
        transform: none;
    }
}

.top-glitch.animate .b {
    animation: rgb-shift-b 2s step-end infinite alternate both;
}

.top-glitch .b:before {
    background: #0d2f95;
}

/* Pin content */
.pin-logo__wrapper {
    position: sticky;
    width: 100%;
    top: calc(360 * 100vw / 1920);
    left: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.pin-logo {
    min-width: calc(2750 * 100vw / 1920);
    height: fit-content;
    font-family: var(--font-syne);
    color: var(--main-color);
    font-weight: 800;
    font-size: calc(120 * var(--vw-with-scrollbar) / 1920);
    text-align: center;
    vertical-align: bottom;
    background: linear-gradient(90deg, #f5bd04 0%, #000000 57%, #f5bd04 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    justify-content: stretch;
    text-align: center;
    align-items: flex-end;
    justify-content: center;
}

@media (max-width: 1024px) {
    .pin-logo__wrapper {
        /* width: 100vw;  */
        overflow-x: hidden; /* 画面幅を超えて要素がはみ出しても、コンテナ自体はスクロールバーを表示させない */
        position: relative;
        top: 0;
    }
    .pin-logo {

        width: fit-content;
        white-space: nowrap; 
        position: relative; /* transformの基準点 */
        left: 0%; 

        margin-top: 0;
        min-width: calc(386 * 100vw / 375);
        height: fit-content;
        font-size: calc(45 * 100vw / 375);
        text-align: left;
        background: linear-gradient(
            90deg,
            rgba(245, 189, 4, 0.6) 11.34%,
            rgba(0, 0, 0, 0.6) 52.99%,
            rgba(245, 189, 4, 0.0) 87%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* Border */
.blink-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.blink-border__vertical,
.blink-border__horizontal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.blink-border__vertical {
    justify-content: space-between;
    align-items: stretch;
}
.blink-border__vertical::before,
.blink-border__vertical::after {
    content: "";
    width: calc(1 * 100vw / 1920);
    background-color: var(--main-color);
}
.blink-border__horizontal {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.blink-border__horizontal::before,
.blink-border__horizontal::after {
    content: "";
    height: calc(1 * 100vw / 1920);
    background: linear-gradient(90deg, #f5bd04 0%, #000000 57%, #f5bd04 100%);
}
.decoration-border {
    position: absolute;
    width: calc(22 * 100vw / 1920);
    height: calc(18 * 100vw / 1920);
    border: 0px solid var(--main-color);
    pointer-events: none;
}
.decoration-border--top-left {
    top: 0;
    left: 0;
    border-top-width: calc(3 * 100vw / 1920);
    border-left-width: calc(3 * 100vw / 1920);
}
.decoration-border--top-right {
    top: 0;
    right: 0;
    border-top-width: calc(3 * 100vw / 1920);
    border-right-width: calc(3 * 100vw / 1920);
}
.decoration-border--bottom-left {
    bottom: 0;
    left: 0;
    border-bottom-width: calc(3 * 100vw / 1920);
    border-left-width: calc(3 * 100vw / 1920);
}
.decoration-border--bottom-right {
    bottom: 0;
    right: 0;
    border-bottom-width: calc(3 * 100vw / 1920);
    border-right-width: calc(3 * 100vw / 1920);
}

@media (max-width: 1024px) {
    .blink-border__vertical::before,
    .blink-border__vertical::after {
        width: calc(1 * 100vw / 375);
    }
    .blink-border__horizontal::before,
    .blink-border__horizontal::after {
        height: calc(1 * 100vw / 375);
    }
    .decoration-border {
        width: calc(22 * 100vw / 375);
        height: calc(18 * 100vw / 375);
    }
    .decoration-border--top-left {
        border-top-width: calc(3 * 100vw / 375);
        border-left-width: calc(3 * 100vw / 375);
    }
    .decoration-border--top-right {
        border-top-width: calc(3 * 100vw / 375);
        border-right-width: calc(3 * 100vw / 375);
    }
    .decoration-border--bottom-left {
        border-bottom-width: calc(3 * 100vw / 375);
        border-left-width: calc(3 * 100vw / 375);
    }
    .decoration-border--bottom-right {
        border-bottom-width: calc(3 * 100vw / 375);
        border-right-width: calc(3 * 100vw / 375);
    }
}

.split-image-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    overflow: hidden;
}

.split-image {
    background: var(--black-color);
    transform: translateY(0);
}

.split-image-grid.animate .split-image:nth-of-type(2) {
    animation-delay: 0.2s;
}

.split-image-grid.animate .split-image:nth-of-type(3) {
    animation-delay: 0.4s;
}

.split-image-grid.animate .split-image:nth-of-type(4) {
    animation-delay: 0.6s;
}

.split-image-grid.animate .split-image {
    animation: slide-up-out 0.2s ease-in-out forwards;
}

@keyframes slide-up-out {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes slide-up-in {
    0% {
        transform: translateY(105%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes banner-rtl {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes banner-rtl-full {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes slide-in-left-small {
    0% {
        transform: translateX(-100px);
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0px);
    }
}
@keyframes banner-slide-down {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(100%);
    }
}

/* Section Animation */
.section-text-up {
    overflow: hidden;
    display: flex;
}
.section-text-up__text {
    transform: translateY(100%);
}
.section-text-up__map {
    transform: translateY(100%);
}

.section-fade-in-up-text {
    transform: translateY(clamp(0px, 7%, 300px)) scaleY(0.95);
    opacity: 0;
    filter: blur(10px);
}

.section-slide-in-banner {
    position: relative;
    overflow: hidden;
    display: flex;
}

.section-slide-in-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black-color);
    z-index: 1;
    transform: scaleX(0);
    transform-origin: left;
    box-sizing: border-box;
}

.section-slide-in-banner__text {
    opacity: 0;
    filter: blur(5px);
    position: relative;
    z-index: 2;
    transform: translateX(-100%);
}

.section-slide-in-banner__text-up {
    position: relative;
    z-index: 2;
    transform: translateY(105%);
}

.s-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.section-slide-in-left-text {
    opacity: 0;
    filter: blur(5px);
    position: relative;
    z-index: 2;
}

.section-split-image-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    overflow: hidden;
}

.section-split-image {
    background: var(--black-color);
    transform: translateY(0);
}

.section-slide-down {
    position: relative;
}
.section-slide-down::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--black-color);
    transform: scaleY(0);
    transform-origin: top;
    z-index: 0;
}
.section-slide-down__text {
    position: relative;
    opacity: 0;
    filter: blur(5px);
}

.section-animate.animate {
    .section-slide-in-banner__text {
        animation: slide-left-fade-in 0.2s 0.45s ease-in-out forwards;
    }
    .section-slide-in-banner::after {
        animation: slide-in-banner-bg-animation 0.4s ease-in-out forwards;
    }
    .section-slide-in-banner__text-up {
        animation: slide-up-in 0.2s 0.45s ease-in-out forwards;
    }
    .section-text-up__text {
        animation: text-up-animation 0.8s cubic-bezier(0.075, 0.82, 0.165, 1)
            forwards;
    }
    .section-fade-in-up-text {
        animation: fade-in-up-text-animation 0.5s ease forwards;
    }
    .section-slide-in-left-text {
        animation: slide-in-left-small 0.5s ease-in-out forwards;
    }
    .section-slide-down::before {
        animation: banner-slide-down 0.4s ease-in-out forwards;
    }
    .section-slide-down__text {
        animation: fade-in-blur 0.2s 0.45s ease-in-out forwards;
    }
}
@media (min-width: 1025px) {
    .section-animate-pc.animate {
        .s-fade-in-up {
            animation: fade-in-up-animation 0.5s ease forwards;
        }
        .section-slide-in-banner::after {
            animation: slide-in-banner-bg-animation 0.4s ease-in-out forwards;
        }
        .section-slide-in-banner__text {
            animation: slide-left-fade-in 0.2s 0.45s ease-in-out forwards;
        }
        .section-text-up__text {
            animation: text-up-animation 0.8s
                cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
        }
        .section-text-up__map {
            animation: text-up-animation 0.8s
                cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
        }
        .section-slide-in-banner__text {
            animation: slide-left-fade-in 0.2s 0.45s ease-in-out forwards;
        }
        .section-slide-in-left-text {
            animation: slide-in-left-small 0.5s ease-in-out forwards;
        }
        .section-split-image-grid .section-split-image {
            animation: slide-up-out 0.2s ease-in-out forwards;
        }
        .section-slide-down::before {
            animation: banner-slide-down 0.4s ease-in-out forwards;
        }
        .section-slide-down__text {
            animation: fade-in-blur 0.2s 0.45s ease-in-out forwards;
        }
    }
}
@media (max-width: 1024px) {
    .s-fade-in-up.animate {
        animation: fade-in-up-animation 0.5s ease forwards;
    }
    .section-slide-in-banner.animate::after {
        animation: slide-in-banner-bg-animation 0.4s ease-in-out forwards;
    }
    .section-slide-in-banner.animate .section-slide-in-banner__text {
        animation: slide-left-fade-in 0.2s 0.45s ease-in-out forwards;
    }
    .section-text-up.animate .section-text-up__text {
        animation: text-up-animation 0.8s cubic-bezier(0.075, 0.82, 0.165, 1)
            forwards;
    }
    .section-slide-in-left-text.animate {
        animation: slide-in-left-small 0.5s ease-in-out forwards;
    }
    .section-split-image-grid.animate .section-split-image {
        animation: slide-up-out 0.2s ease-in-out forwards;
    }
    .section-split-image-grid.animate .section-split-image:nth-child(2) {
        animation-delay: 0.2s;
    }
    .section-split-image-grid.animate .section-split-image:nth-child(3) {
        animation-delay: 0.4s;
    }
    .section-split-image-grid.animate .section-split-image:nth-child(4) {
        animation-delay: 0.6s;
    }
    .section-slide-down.animate::before {
        animation: banner-slide-down 0.4s ease-in-out forwards;
    }
    .section-slide-down.animate .section-slide-down__text {
        animation: fade-in-blur 0.2s 0.45s ease-in-out forwards;
    }
}

.main-color-banner {
    padding: calc(16 * 100vw / 1920) calc(5 * 100vw / 1920);
    padding-right: 0;
    font-family: var(--font-noto-serif-jp);
    font-size: calc(40 * 100vw / 1920);
    color: var(--black-color);
    font-weight: 600;
}
.main-color-banner span {
    margin-right: calc(-13 * 100vw / 1920);
}
.main-color-banner::after {
    background-color: var(--main-color);
}

@media (max-width: 1024px) {
    .main-color-banner {
        padding: calc(2 * 100vw / 375) calc(8 * 100vw / 375);
        font-size: clamp(16px, calc(25.63 * 100vw / 375), 99px);
        line-height: 1.5;
    }
    .main-color-banner span {
        margin-right: 0;
    }
}

/* 3D button */
.r-3d-button {
    --x-offset: calc(9.45 * 100vw / 1920);
    --y-offset: calc(9 * 100vw / 1920);
    --primary-color: #b51e00;
    --secondary-color: #6d1200;

    position: relative;
    padding-bottom: var(--y-offset);
    padding-right: var(--x-offset);
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    box-sizing: border-box;

    &::before {
        content: "";
        position: absolute;
        top: var(--y-offset);
        left: var(--x-offset);
        bottom: 0;
        right: 0;
        box-sizing: border-box;
        background-color: var(--secondary-color);
    }
    .r-3d-button__content {
        position: relative;
        width: calc(377 * 100vw / 1920);
        height: calc(179 * 100vw / 1920);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: var(--font-noto-serif-jp);
        font-size: calc(60 * 100vw / 1920);
        font-weight: 900;
        color: var(--main-color);
        background-color: var(--primary-color);
        transition: transform var(--link-hover-duration) ease;
    }
}
.r-3d-button[type="button"]:hover .r-3d-button__content {
    transform: translate(var(--x-offset), var(--y-offset));
}

.r-3d-button--red {
    --primary-color: #b51e00;
    --secondary-color: #6d1200;
}
.r-3d-button--green {
    --primary-color: #478100;
    --secondary-color: #2e5203;
}
.r-3d-button--orange {
    --primary-color: #bc4e00;
    --secondary-color: #6e2e00;
}

.r-3d-small-button {
    --x-offset: calc(7 * 100vw / 375);
    --y-offset: calc(3.3 * 100vw / 375);
    --primary-color: #b51e00;
    --secondary-color: #6d1200;

    position: relative;
    width: 100%;
    padding-bottom: var(--y-offset);
    padding-right: var(--x-offset);
    display: flex;
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;

    &::before {
        content: "";
        position: absolute;
        top: var(--y-offset);
        left: var(--x-offset);
        bottom: 0;
        right: 0;
        box-sizing: border-box;
        background-color: var(--secondary-color);
    }
    .r-3d-small-button__inner {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        z-index: 2;
    }
    .r-3d-small-button__content {
        position: relative;
        width: 100%;
        height: calc(63.63 * 100vw / 375);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: var(--font-noto-serif-jp);
        font-size: calc(22 * 100vw / 375);
        font-weight: 900;
        color: var(--main-color);
        background-color: var(--primary-color);
        transition: transform var(--link-hover-duration) ease;
    }
    .r-3d-small-button__icon {
        position: absolute;
        top: calc(10 * 100vw / 375);
        right: calc(28 * 100vw / 375);
        width: calc(45 * 100vw / 375);
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--main-color);
        border-radius: 999px;
        font-family: var(--font-jost);
        font-weight: 700;
        font-size: calc(12 * 100vw / 375);
        color: var(--primary-color);
    }
    .r-3d-small-button__icon::before {
        content: "TAP";
    }
    .r-3d-small-button__icon::after {
        content: "OPEN";
    }
}
.r-3d-small-button[type="button"]:hover .r-3d-small-button__inner {
    transform: translate(var(--x-offset), var(--y-offset));
}

.is-active .r-3d-small-button .r-3d-small-button__icon::after {
    content: "CLOSE";
}

.r-3d-small-button--red {
    --primary-color: #b51e00;
    --secondary-color: #6d1200;
}
.r-3d-small-button--green {
    --primary-color: #478100;
    --secondary-color: #2e5203;
}
.r-3d-small-button--orange {
    --primary-color: #bc4e00;
    --secondary-color: #6e2e00;
}

.r-3d-small-button--bottom {
    padding-bottom: calc(3.6 * 100vw / 375);
    padding-right: calc(3.6 * 100vw / 375);

    &::before {
        top: calc(20.3 * 100vw / 375);
        left: calc(3.6 * 100vw / 375);
        background-color: var(--black-color);
    }

    span {
        font-family: var(--font-jost);
        position: relative;
        line-height: 1.2;
        -webkit-text-stroke: calc(4 * 100vw / 375) var(--black-color);
        font-weight: 800;
        paint-order: stroke fill;
        margin-bottom: calc(-4 * 100vw / 375);
    }

    .r-3d-small-button__content {
        color: var(--main-color);
    }

    .r-3d-small-button__content::before,
    .r-3d-small-button__connect::before {
        background-size: 50%;
    }

    .r-3d-small-button__icon {
        right: calc(14 * 100vw / 375);
        color: var(--black-color);
    }

    .r-3d-small-button__connect {
        overflow: hidden;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        width: 20px;
        height: 16.5px;
    }
}

.r-3d-small-button[type="button"].r-3d-small-button--bottom:hover
    .r-3d-small-button__inner {
    transform: translate(calc(3.6 * 100vw / 375), calc(3.6 * 100vw / 375));
}

@media (min-width: 1025px) {
    .r-3d-small-button {
        display: none;
    }
}

/* Section Header */
.section-header {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.section-header span {
    background-color: var(--black-color);
}

/* VR Video Modal Styles */
.vr-video-modal {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vr-video-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}
.vr-video-modal__content {
    position: relative;
    z-index: 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1024px) {
    .vr-video-modal__content video {
        max-width: 98vw;
        max-height: 60vh;
    }
}

/* Border Effect */
@keyframes borderW {
    0%,
    66% {
        width: 0;
    }
    33%,
    100% {
        width: 100%;
    }
}
/* Left border */
@keyframes borderH {
    0%,
    100% {
        height: 0;
    }
    33%,
    100% {
        height: 100%;
    }
}
/* Right border */
@keyframes borderH2 {
    0%,
    100% {
        height: 0;
        top: -50%;
    }
    33%,
    100% {
        height: 100%;
    }
    100% {
        top: 0;
    }
}

.border-effect {
    --border-effect-padding: 0px;

    position: relative;
    pointer-events: none;

    .border-effect__border {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        inset: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }

    .border-effect__border--x {
        flex-direction: column;
        padding: var(--border-effect-padding);
    }

    .border-effect__border--x::before,
    .border-effect__border--x::after {
        width: 0;
        height: calc(1 * 100vw / 1920);
    }

    .border-effect__border--y {
        padding: var(--border-effect-padding);
    }

    .border-effect__border--y::before,
    .border-effect__border--y::after {
        width: calc(1 * 100vw / 1920);
        height: 0;
    }

    .border-effect__border--x::before,
    .border-effect__border--x::after,
    .border-effect__border--y::before,
    .border-effect__border--y::after {
        content: "";
        background-color: var(--main-color);
    }

    &.animate {
        /* top */
        .border-effect__border--x::before {
            animation: borderW 0.3s cubic-bezier(0.85, 0.25, 0.37, 0.85) 0s 2
                forwards;
        }
        .border-effect__border--x::after {
            animation: borderW 0.3s cubic-bezier(0.85, 0.25, 0.37, 0.85) 0.3s 2
                forwards;
        }
        .border-effect__border--y::before {
            animation: borderH2 0.3s cubic-bezier(0.85, 0.25, 0.37, 0.85) 0.4s 2
                forwards;
        }
        .border-effect__border--y::after {
            animation: borderH 0.3s cubic-bezier(0.85, 0.25, 0.37, 0.85) 0.1s 2
                forwards;
        }
    }
}

@media (max-width: 1024px) {
    .border-effect {
        .border-effect__border--x::before,
        .border-effect__border--x::after {
            width: 0;
            height: calc(1 * 100vw / 375);
        }

        .border-effect__border--y::before,
        .border-effect__border--y::after {
            width: calc(1 * 100vw / 375);
            height: 0;
        }
    }
}

@keyframes borderWClip {
    0%,
    66% {
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
    }
    33%,
    100% {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }
}

.concave-border-wrapper {
    position: relative;
    overflow: hidden;
}

.concave-border-wrapper > * {
    position: absolute;
}

.concave-border-arc {
    left: 0;
    width: 100%;
    height: auto;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
}

.concave-border-arc--top {
    top: 0;
}
.concave-border-arc--bottom {
    bottom: 0;
}

.concave-border-line {
    top: 0;
    bottom: 0;
    width: calc(1 * 100vw / 1920);
    background-color: var(--main-color);
}

.concave-border-line--left {
    left: 0;
}
.concave-border-line--right {
    right: 0;
}

.concave-border-wrapper.animate {
    .concave-border-arc--top {
        animation: borderWClip 0.3s cubic-bezier(0.85, 0.25, 0.37, 0.85) 0s 2
            forwards;
    }
    .concave-border-arc--bottom {
        animation: borderWClip 0.3s cubic-bezier(0.85, 0.25, 0.37, 0.85) 0.3s 2
            forwards;
    }
    .concave-border-line--left {
        animation: borderH2 0.3s cubic-bezier(0.85, 0.25, 0.37, 0.85) 0.4s 2
            forwards;
    }
    .concave-border-line--right {
        animation: borderH 0.3s cubic-bezier(0.85, 0.25, 0.37, 0.85) 0.1s 2
            forwards;
    }
}

@media (max-width: 1024px) {
    .concave-border-line {
        top: 0;
        bottom: 0;
        width: calc(0.53 * 100vw / 375);
        background-color: var(--main-color);
    }
}

.subpage-kv {
    position: relative;
}

.subpage-kv__bg {
    position: relative;
    width: 100%;
    height: calc(944 * 100vw / 1920);
    max-height: 944px;
    overflow: hidden;
}

.subpage-kv__bg-img {
    width: 100%;
    height: 100%;
}

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

.subpage-kv__title {
    position: absolute;
    bottom: clamp(0px, calc(71 * 100vw / 1920), 71px);
    left: calc(79 * 100vw / 1920);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.subpage-kv__title-jp {
    display: flex;
    gap: 0;
    padding: clamp(0px, calc(9 * 100vw / 1920), 9px)
        clamp(0px, calc(20 * 100vw / 1920), 20px)
        clamp(0px, calc(9 * 100vw / 1920), 9px)
        clamp(0px, calc(12 * 100vw / 1920), 12px);
    background: var(--black-color);
}

.subpage-kv__title-jp-text {
    display: flex;
    font-family: var(--font-noto-serif-jp);
    font-size: clamp(0px, calc(64 * 100vw / 1920), 64px);
    font-weight: 700;
    color: var(--white-color);
    background: var(--black-color);
}

.subpage-kv__title-en {
    display: flex;
    font-family: var(--font-syne);
    font-weight: 800;
    font-size: clamp(0px, calc(109 * 100vw / 1920), 110px);
    color: var(--main-color);
    background-color: var(--black-color);
    padding-right: clamp(0px, calc(16 * 100vw / 1920), 16px);
}

.subpage-kv__title-jp > .subpage-kv__title-jp-text:first-child > p:first-child {
    color: #f5bd04;
}

.subpage-kv__title-en > span:first-child {
    color: #c82100;
}

@media (max-width: 1024px) {
    .subpage-kv {
        height: calc(720 * 100vw / 375);
        max-height: unset;
        width: 100%;
        position: relative;
        box-sizing: border-box;
    }

    .subpage-kv__bg {
        position: absolute;
        width: 100%;
        height: auto;
        max-height: unset;
        overflow: hidden;
        bottom: 0;
    }

    .subpage-kv__bg-img {
        width: 100%;
        height: 100%;
    }

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

    .subpage-kv__title {
        position: absolute;
        top: calc(50 * 100vw / 375);
        left: 0;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        z-index: 2;
    }

    .subpage-kv__title-jp {
        flex-direction: column;
        padding: 0;
        background: transparent;
    }

    .subpage-kv__title-jp-text {
        font-size: 15.6vw;
        font-weight: 700;
        padding: calc(8 * 100vw / 375) calc(10 * 100vw / 375);
    }

    .subpage-kv__title-en {
        font-family: var(--font-syne);
        font-style: normal;
        font-weight: 800;
        font-size: calc(64 * 100vw / 375);
        line-height: 100%;
        display: flex;
        align-items: flex-end;
        text-align: center;
        color: var(--main-color);
        background: var(--black-color);
        writing-mode: vertical-lr;
        padding: 0;
    }

    .subpage-kv--about {
        .subpage-kv__title-jp-text:nth-child(2) {
            margin-left: calc(20 * 100vw / 375);
        }
        .subpage-kv__title-jp-text:nth-child(3) {
            margin-left: calc(40 * 100vw / 375);
        }
    }
}