@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url("https://use.typekit.net/tds4yrc.css");

:root {
    --color-primary: #F4D02B;
    --color-secondary: #000000;
    --color-text: #000000;
    --color-green: #7AA14F;
    --color-orange: #EA5624;
    --color-blue: #4E82E1;
    --color-ash: #7CA6C2;
    --color-purple: #A7627E;
    --color-gray: #E6E8E1;
}

* {
    font-family: 'futura-pt', 'Noto Sans JP', sans-serif;
    font-weight: 600;
    font-feature-settings: 'palt' on;

}

body {
    transition: background-color 0.3s ease;
    transition-delay: 0.3s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.font-bold {
    font-weight: 900;
}

html,
body {
    overflow-x: hidden;
    color: var(--color-text);
}

.noto-sans-jp {
    font-family: 'Noto Sans JP', sans-serif;
}

.vertical-rl {
    writing-mode: sideways-lr;
}

.content-section {
    display: none;
    min-height: 100vh;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.content-section.active {
    display: block;
    visibility: visible;
    pointer-events: auto;
}

.nav-button {
    transition: height 0.2s cubic-bezier(.68, 0, .27, 1.55);
    height: 100%;
}

.nav-button:hover {
    height: calc(100% + 1rem);
}

/* 下部ナビの非活性ボタン */
.nav-button[data-disabled="true"] {
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

.nav-button[data-disabled="true"]:after {
    content: 'Coming Soon ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: fit-content;
    margin: auto;
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    transform: rotate(-60deg);
    opacity: 0.75;
}
.poster-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.poster-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.bg-komu {
    position: relative;
}

.bg-komu:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 75%;
    aspect-ratio: 11 / 18;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    transition: top 0.4s cubic-bezier(.68, 0, .27, 1.55);
}

.bg-komu:nth-child(1):before {
    background-image: url(../img/figure-komu.webp);
}
.bg-komu:nth-child(2):before {
    background-image: url(../img/figure-nyan1.webp);
}
.bg-komu:nth-child(3):before {
    background-image: url(../img/figure-nyan2.webp);
}
.bg-komu:nth-child(4):before {
    background-image: url(../img/figure-komu.webp);
}
.bg-komu:nth-child(5):before {
    background-image: url(../img/figure-nyan4.webp);
}
.bg-komu:nth-child(6):before {
    background-image: url(../img/figure-nyan5.webp);
}

.bg-komu.active:before {
    top: -65%;
}