@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@400;600;900&display=swap');

/* -----------------------
メインビジュアル
----------------------- */
.main-visual {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 910px;
    z-index: 1;
    overflow: hidden;
}

/* 各画像を一括で絶対配置の対象にし、標準の最大幅・高さを解除 */
.main-visual img {
    position: absolute;
    display: block;
    height: auto;
}

/* -----------------------
  背景ノイズキャンバス
----------------------- */
#noise-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* 背景の一番後ろに配置 */
    pointer-events: none;
    /* マウスイベントを透過 */
    opacity: 0.35;
    /* ノイズ全体の濃さ（0.0〜1.0で調整可能） */
}

/* -----------------------
   1st-anniversary ロゴ用アニメーション
----------------------- */
.main-visual .logo-1st-anniversary {
    position: relative;
    top: 11px;
    left: 10px;
    width: 21.1%;
    z-index: 30;
    display: block;
    clip-path: inset(0 100% 0 0);
    /* 0秒から開始（0.8秒かけて左から右へ出現） */
    animation: logoWipeReveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
}

/* 流れる白い光の帯（ロゴ表示完了後に発火） */
.main-visual .logo-area::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.6) 50%,
            transparent 100%);
    z-index: 11;
    pointer-events: none;
    /* ロゴ表示完了後、3秒周期でアニメーションを繰り返す */
    animation: shineLight 3s infinite ease-in-out 0.8s;
}

/* --------------------------------------------------
   周年ロゴ用キーフレーム定義（0秒から即開始）
-------------------------------------------------- */
@keyframes logoWipeReveal {
    0% {
        clip-path: inset(0 100% 0 0);
        /* 最初は隠れた状態 */
    }

    100% {
        clip-path: inset(0 0 0 0);
        /* 全体を表示 */
    }
}

/* -----------------------
バーコードアニメーション
----------------------- */
.main-visual .barcode-area {
    position: absolute;
    top: 49.7%;
    left: 0;
    width: 53px;
    z-index: 30;
    overflow: hidden;
}

.main-visual .barcode-area .bg-deco-barcode {
    position: relative;
    top: 0;
    left: 0;
    width: 85%;
    display: block;
    clip-path: inset(0 0 100% 0);
    /* 0秒から開始（0.8秒かけて上から下へ出現） */
    animation: barcodeWipeReveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
}

/* 上から下へ流れる白い光の帯（表示完了後に発火） */
.main-visual .barcode-area::after {
    content: "";
    position: absolute;
    top: -150%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 100%);
    z-index: 11;
    pointer-events: none;
    /* 表示完了後、3秒周期でループ */
    animation: shineLightVertical 3s infinite ease-in-out 0.8s;
}

/* --------------------------------------------------
   バーコード用キーフレーム定義（0秒から即開始）
-------------------------------------------------- */
@keyframes barcodeWipeReveal {
    0% {
        clip-path: inset(0 0 100% 0);
        /* 最初は上側に隠れた状態 */
    }

    100% {
        clip-path: inset(0 0 0 0);
        /* 下まで全体を表示 */
    }
}

/* -----------------------
LUXURIA×MELONBOOKS アニメーション
----------------------- */
/* SVG全体の指定 */
.main-visual .bg-deco-txt {
    position: absolute;
    top: 28.6px;
    right: 180px;
    width: 50%;
    height: auto;
    z-index: 30;
}

/* -----------------------
LUXURIA×MELONBOOKS アニメーション
----------------------- */
/* ① 緑背景帯: 0秒から開始し0.8秒で全開状態へ */
.main-visual .bg-deco-txt .deco-txt-bg {
    clip-path: inset(0 100% 0 0);
    animation: decoTxtBgExpand 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
}

/* ② 文字テキスト群: bg-03画像の表示完了後（1.3秒後）にフェードインを開始！ */
.main-visual .bg-deco-txt .deco-txt-paths {
    opacity: 0;
    transform: translateY(12px);
    /* 1.3秒後から0.6秒かけて表示 */
    animation: decoTxtPathsFadeUp 0.4s ease-out 1.1s forwards;
}

/* --------------------------------------------------
   キーフレーム定義
-------------------------------------------------- */

/* ① 緑帯が左から右へ広がり表示を固定するキーフレーム */
@keyframes decoTxtBgExpand {
    0% {
        clip-path: inset(0 100% 0 0);
        /* 左側のみ表示（右側100%を隠す） */
    }

    100% {
        clip-path: inset(0 0 0 0);
        /* クロップなし（全表示） */
    }
}

/* ② テキスト群が下から上へ浮かび上がるキーフレーム */
@keyframes decoTxtPathsFadeUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================================
   背景枠用：瞬時にパッと表示させるキーフレーム定義
================================================== */
@keyframes instantShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* -----------------------
bg-01 アニメーション
----------------------- */
/* 外枠コンテナ：他アニメーションと同じタイミング(0s)でパッと表示 */
.main-visual .bg-01-wrap {
    position: absolute;
    z-index: 21;
    width: 14.2%;
    top: 13.5%;
    right: 8%;
    padding-bottom: 12px;
    padding-right: 12px;
    opacity: 0;
    /* 最初は隠す */
    /* 0s（他の要素と同タイミグ）で瞬時に表示 */
    animation: instantShow 0.01s step-end 0.4s forwards;
}

.main-visual .bg-01-wrap-inner {
    width: 100%;
    height: 100%;
    border: solid 1px #000;
    box-shadow: 10px 10px #000;
    background-color: #00E431;
    overflow: hidden;
}

/* 画像本体：今の表示タイミング（0.6s後）を維持 */
.main-visual .bg-01-wrap .bg-01 {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    clip-path: inset(0 100% 0 0);
    animation: wipeExpandFromLeft 0.35s cubic-bezier(0.77, 0, 0.175, 1) 0.8s forwards;
}

/* ==================================================
   画像切り抜き用キーフレーム
================================================== */
@keyframes wipeExpandFromLeft {
    0% {
        clip-path: inset(0 100% 0 0);
    }

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

/* -----------------------
bg-02 アニメーション
----------------------- */
.main-visual .bg-02-wrap {
    position: absolute;
    z-index: 21;
    width: 16%;
    top: 40.2%;
    left: 5.5%;
    padding-bottom: 12px;
    padding-right: 12px;
    opacity: 0;
    /* 0s（他の要素と同タイミグ）で瞬時に表示 */
    animation: instantShow 0.01s step-end 0.2s forwards;
}

.main-visual .bg-02-wrap-inner {
    width: 100%;
    height: 100%;
    border: solid 1px #000;
    box-shadow: 10px 10px #000;
    background-color: #00E431;
    overflow: hidden;
}

/* 画像本体：今の表示タイミング（0.4s後）を維持 */
.main-visual .bg-02-wrap .bg-02 {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    clip-path: inset(0 100% 0 0);
    animation: wipeExpandFromLeft 0.35s cubic-bezier(0.77, 0, 0.175, 1) 0.6s forwards;
}

/* -----------------------
bg-03 アニメーション
----------------------- */
.main-visual .bg-03-wrap {
    position: absolute;
    z-index: 1000;
    width: 10.5%;
    top: 42.5%;
    right: 4.1%;
    padding-bottom: 12px;
    padding-right: 12px;
    opacity: 0;
    /* 0s（他の要素と同タイミグ）で瞬時に表示 */
    animation: instantShow 0.01s step-end 0.6s forwards;
}

.main-visual .bg-03-wrap-inner {
    width: 100%;
    height: 100%;
    border: solid 1px #000;
    box-shadow: 10px 10px #000;
    background-color: #00E431;
    overflow: hidden;
}

/* 画像本体：今の表示タイミング（0.8s後）を維持 */
.main-visual .bg-03-wrap .bg-03 {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    clip-path: inset(0 100% 0 0);
    animation: wipeExpandFromLeft 0.35s cubic-bezier(0.77, 0, 0.175, 1) 1s forwards;
}

/* -----------------------
bg-04 アニメーション
----------------------- */
.main-visual .bg-04-wrap {
    position: absolute;
    z-index: 1000;
    width: 10.5%;
    bottom: 8%;
    left: 3.5%;
    padding-bottom: 12px;
    padding-right: 12px;
    opacity: 0;
    /* 0s（他の要素と同タイミグ）で瞬時に表示 */
    animation: instantShow 0.01s step-end 0.2s forwards;
}

.main-visual .bg-04-wrap-inner {
    width: 100%;
    height: 100%;
    border: solid 1px #000;
    box-shadow: 10px 10px #000;
    background-color: #00E431;
    overflow: hidden;
}

/* 画像本体：今の表示タイミング（0.8s後）を維持 */
.main-visual .bg-04-wrap .bg-04 {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    clip-path: inset(0 100% 0 0);
    animation: wipeExpandFromLeft 0.35s cubic-bezier(0.77, 0, 0.175, 1) 0.6s forwards;
}

@media (max-width: 768px) {
    .main-visual .bg-03-wrap {
        animation: instantShow 0.01s step-end 0.3s forwards;
    }

    .main-visual .bg-03-wrap .bg-03 {
        animation: wipeExpandFromLeft 0.25s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
    }

    .main-visual .bg-04-wrap {
        animation: instantShow 0.01s step-end 0.3s forwards;
    }

    .main-visual .bg-04-wrap .bg-04 {
        animation: wipeExpandFromLeft 0.25s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
    }
}

/* -----------------------
scrolldown アニメーション
----------------------- */
/* SVG全体の配置 */
.main-visual .scrolldown-svg {
    position: absolute;
    bottom: 43px;
    right: 33px;
    height: 85vh;
    width: auto;
    z-index: 30;
}

/* 1. 直線（上下2本共通設定） */
.main-visual .scrolldown-line-top,
.main-visual .scrolldown-line-bottom {
    stroke-dasharray: 303;
    stroke-dashoffset: 303;
    /* 0.8秒かけて描画 */
    animation: drawLine 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
}

/* 2. テキストグループ */
.main-visual .scrolldown-text-group {
    /* 特殊な変形や切り抜きは行わず、枠組みをそのまま維持 */
}

/* 3. 文字パス本体（左から右への滑らかなスライド ＋ フェードイン） */
.main-visual .scrolldown-path {
    opacity: 0;
    transform: translateX(-12px);
    /* 最初は12px左側に配置 */
    /* 上下の線が描画された直後（0.6秒後）から、0.9秒かけて左から右へ定位置へ移動 */
    animation: naturalFadeRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

/* ==================================================
   キーフレームアニメーション定義
================================================== */

/* 線を描画するアニメーション */
@keyframes drawLine {
    0% {
        stroke-dashoffset: 303;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* 左から右へ滑らかに浮き出るアニメーション */
@keyframes naturalFadeRight {
    0% {
        opacity: 0;
        transform: translateX(-12px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* -----------------------
  grid背景 アニメーション
----------------------- */
.main-visual .bg-grid {
    z-index: 3;
    top: 93px;
    left: 95px;
    width: 90.2%;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 全体に渡って極限まで滑らかに消えていく円形グラデーションマスク */
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0) 80%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 80%);

    /* 初期状態（透明 & マスクサイズ小） */
    opacity: 0;
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;

    /* 3.5秒かけて「じわっと・ふわっと」滑らかに全開へ */
    animation: ultimateSoftSpreadGrid 25s cubic-bezier(0.05, 0.7, 0.1, 1) 0.2s forwards;
}

/* ==================================================
   背景グリッド用キーフレームアニメーション
================================================== */
@keyframes ultimateSoftSpreadGrid {
    0% {
        opacity: 0;
        -webkit-mask-size: 0% 0%;
        mask-size: 0% 0%;
    }

    40% {
        opacity: 0.8;
        /* ゆっくり時間をかけて透明度を上げる */
    }

    100% {
        opacity: 1;
        -webkit-mask-size: 350% 350%;
        /* 端まで完全に覆う特大マスクサイズ */
        mask-size: 350% 350%;
    }
}

/* -----------------------
  credit
----------------------- */
.credit-pc,
.credit-sp {
    bottom: 8px;
    left: 15px;
    z-index: 9999;
    opacity: 0;
    /* 0秒のタイミングで一瞬（0.01秒）で表示状態へ切り替え */
    animation: creditInstantShow 0.3s linear 0s forwards;
}

/* --------------------------------------------------
   credit用キーフレーム定義（瞬時に表示）
-------------------------------------------------- */
@keyframes creditInstantShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* -----------------------
  中央キャラ
----------------------- */
/* ==================================================
   キービジュアル用：一回り大きくぼやけた状態から、ふわっとくっきり定位置へ
================================================== */

/* PC用キーフレーム */
@keyframes kvZoomInBlurFade {
    0% {
        opacity: 0;
        filter: blur(12px);
        /* 最初は強くぼかす */
        transform: scale(1.05);
        /* 最初は少し拡大 */
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        /* くっきりと表示 */
        transform: scale(1);
        /* 定位置・元のサイズへ */
    }
}

/* スマホ用キーフレーム (左右中央寄せ translateX(-50%) を維持) */
@keyframes kvZoomInBlurFadeSP {
    0% {
        opacity: 0;
        filter: blur(12px);
        /* 最初は強くぼかす */
        transform: translateX(-50%) scale(1.05);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        /* くっきりと表示 */
        transform: translateX(-50%) scale(1);
    }
}

.kv-pc {
    width: 108%;
    z-index: 9999;
    right: -1.7%;
    top: 1.5%;
    opacity: 0;
    will-change: transform, opacity, filter;
    animation: kvZoomInBlurFade 1.6s cubic-bezier(0.25, 1, 0.5, 1) 0s forwards;
}

.kv-sp {
    position: absolute;
    width: 188%;
    z-index: 999;
    top: 4.5%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    opacity: 0;
    will-change: transform, opacity, filter;
    animation: kvZoomInBlurFadeSP 1.6s cubic-bezier(0.25, 1, 0.5, 1) 0s forwards;
}

@media (max-width: 768px) {
    .main-visual {
        height: 100dvh;
        /* スマホでは画面高さいっぱいに戻す場合 */
    }

    .kv-sp {
        width: 185%;
        right: auto;
        left: 47%;
    }

    .main-visual .bg-grid {
        width: initial !important;
        height: 80%;
        left: 50%;
        right: 50%;
        margin: auto;
        transform: translate(-50%, -50%);
        top: 50%;
    }

    .scroll-content {
        margin-top: 100dvh;
    }

    .main-visual .logo-1st-anniversary {
        top: initial;
        left: 20px;
        bottom: 20px;
        width: 30%;
        position: absolute;
        z-index: 9999;
        filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.9));
    }

    .main-visual .bg-deco-txt {
        height: 30px;
        right: initial;
        left: 12px;
        top: 18px;
        width: 74%;
    }

    .main-visual .bg-03-wrap {
        width: 19%;
        top: 75%;
        right: 15%;
    }

    .main-visual .bg-04-wrap {
        width: 20%;
        bottom: 21%;
        left: initial;
        right: 23%;
    }

    .credit-sp {
        bottom: 8px;
        left: initial;
        right: 10px;
        filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.9));
    }
}

@media (max-width: 480px) {
    .kv-sp {
        right: auto;
    }

    .main-visual .logo-1st-anniversary {
        width: 40%;
        left: 13px;
        bottom: 8px;
    }

    .main-visual .bg-deco-txt {
        height: 12px;
        right: initial;
        left: 16px;
        top: 17px;
        width: 73%;
    }

    .main-visual .bg-03-wrap {
        width: 29%;
        top: 73%;
        right: 5.6%;
    }

    .main-visual .bg-04-wrap {
        width: 29.8%;
        bottom: 23%;
        left: initial;
        right: 18.5%;
    }
}

/* -----------------------
スクロールコンテンツ
----------------------- */
.scroll-content {
    position: relative;
    z-index: 999;
    margin-top: min(100vh, 910px);
}

/* -----------------------
共通キーフレーム（緑帯ワイプアニメーション）
----------------------- */
@keyframes greenMaskReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }

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

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

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

    49% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------
NEWS
----------------------- */
.news-wrapper {
    background-color: var(--black);
    zoom: var(--pc-scale);
}

.news {
    display: flex;
    justify-content: center;
    gap: clamp(80px, 8.333vw, 160px);
    padding: clamp(40px, 4.166vw, 80px) clamp(50px, 16vw, 310px);
    width: 100%;
    background: var(--black);
}

/* NEWS見出しの緑帯ワイプ構造 */
.news .heading-area {
    position: relative;
    display: table;
    margin: auto;
    overflow: hidden;
    height: fit-content;
}

.news .heading-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    z-index: 10;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
}

.news .h-news {
    filter: invert(61%) sepia(85%) saturate(3016%) hue-rotate(93deg) brightness(101%) contrast(105%);
    display: block;
    opacity: 0;
}

/* NEWSアニメーション実行クラス */
.news.is-active .heading-area::before {
    animation: greenMaskReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.news.is-active .h-news {
    animation: headingImageFadeIn 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.news-content {
    max-width: 880px;
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
    /* ↓ ニュースが複数の場合消す*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    /* ↑ ニュースが複数の場合消す*/
}

.news-content.is-active {
    animation: fadeInUp 0.3s ease-out forwards;
}

.news .news-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news .news-content li {
    position: relative;
    border-bottom: 1px solid #fff;
    overflow: hidden;
    /* 緑色背景が枠外にはみ出るのを防ぐ */
    z-index: 1;
}

.news .news-content li:first-of-type {
    border-top: 1px solid #fff;
}

/* 左から右へ伸びる緑色背景（擬似要素 ::after） */
/* .news .news-content li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
} */

/* ホバー時に背景を100%まで伸び広げる */
/* .news .news-content li:hover::after {
    transform: scaleX(1);
} */

/* 右側の矢印アイコン（::before）の見た目とホバー時の色変化 */
/* .news .news-content li::before {
    content: "";
    border: solid 2px #fff;
    border-width: 2px 2px 0 0;
    width: 6px;
    height: 6px;
    transform: translate(0, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: 32px;
    z-index: 2;
    transition: border-color 0.3s ease;
} */

/* ホバー時に矢印の色を黒に変更（位置指定は動かしません） */
/* .news .news-content li:hover::before {
    border-color: #000;
} */

/* リンクテキストエリアと文字色の滑らかな変化 */
.news .news-content_item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 60px 40px 20px;
    color: var(--text-base-color);
    /* 通常時は白 */
    text-decoration: none;
    font-size: clamp(14px, 1.8vw, 20px);
    line-height: 1.6;
    font-weight: 500;
    min-width: 0;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    pointer-events: none;
}

/* ホバー時にテキスト全体（日付・本文）を黒色に変更 */
/* .news .news-content li:hover .news-content_item {
    color: #000;
} */

.news .news-content_item time {
    font-weight: 600;
    line-height: 1;
}

.news .news-content_item p {
    margin: 0;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    width: 97%;
}

.news .news-content a:not(.news-content_item) {
    position: relative;
    background-color: var(--green);
    display: block;
    margin-top: 40px;
    padding: 15px 40px 15px 20px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    width: 144px;
    margin-left: auto;
}

.news .news-content a:not(.news-content_item)::before {
    content: "";
    border: solid 3px #000;
    border-width: 3px 3px 0 0;
    width: 4px;
    height: 4px;
    transform: translate(0, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
}

.news .news-content a:not(.news-content_item):hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .news {
        flex-direction: column;
        gap: 64px;
        padding: 0 24px 64px 24px;
    }

    .news .h-news {
        display: block;
        margin: auto;
    }

    .news .news-content {
        width: 100%;
    }

    .news .news-content_item {
        gap: 8px;
        padding: 40px 66px 40px 20px;
    }
}

/* -----------------------
EVENT (黒帯ワイプアニメーション)
----------------------- */
@keyframes maskReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }

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

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

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

    49% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.event-wrapper {
    background: var(--green);
    width: 100%;
    overflow: hidden;
    position: relative;
}

.event-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    z-index: 10;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
}

.event {
    zoom: var(--pc-scale);
    align-items: center;
    width: 100%;
    opacity: 0;
}

.event-wrapper.is-active::before {
    animation: maskReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.event-wrapper.is-active .event {
    animation: contentFadeIn 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.event-content {
    max-width: 1920px;
    margin: 0 auto;
}

.event .heading-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 0 20px;
    border-left: solid 1px #000;
    border-right: solid 1px #000;
}

.event .heading-area .h-event {
    flex-shrink: 0;
    max-width: 60%;
    height: auto;
}

.event .heading-area .deco-event {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.event .location-icon {
    filter: brightness(0);
    width: 20px;
    height: 30px;
    object-fit: cover;
}

.event .schedule-area {
    display: flex;
}

.event .schedule-area_item {
    /* width: 50%; */
    width: 100%;
    padding-block: clamp(56px, 5.8vw, 90px);
    border-right: solid 1px #000;
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
}

.event .schedule-area_item:first-of-type {
    border-left: solid 1px #000;
}

.event .schedule-area_item p {
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

.event .schedule-area_item .date {
    font-size: 62px;
    font-weight: 800;
}

.event .schedule-area_item .date--size {
    font-size: 30px;
    font-weight: 800;
}

.event .schedule-area_item .place-text {
    font-size: clamp(24px, 2.8vw, 30px);
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.5vw, 20px);
    justify-content: center;
    line-height: 1;
    margin-top: 15px;
}

.event .schedule-area_item .place-text--size {
    font-size: clamp(14px, 1.8vw, 20px);
}

@media (max-width: 768px) {
    .event .heading-area {
        gap: 0;
        padding: 0;
        flex-direction: column;
        border: none;
    }

    .event .schedule-area {
        flex-direction: column;
    }

    .event .schedule-area_item {
        width: 100%;
    }

    .event .schedule-area_item:first-of-type {
        border-left: none;
    }

    .event .schedule-area_item {
        border-right: none;
    }
}

/* -----------------------
SPECIAL NUMBER (緑帯ワイプアニメーション & スマホレイアウト)
----------------------- */
.special-number-wrapper {
    background-color: var(--black);
    zoom: var(--pc-scale);
    color: var(--text-base-color);
    position: relative;
}

.special-number .h-special-number,
.deco-special-number {
    filter: invert(61%) sepia(85%) saturate(3016%) hue-rotate(93deg) brightness(101%) contrast(105%);
}

.deco-special-number {
    position: absolute;
    width: 25.5%;
}

.deco-special-number01 {
    top: 0;
    left: 0;
}

.deco-special-number02 {
    bottom: 0;
    right: 0;
}

/* 見出し部分の緑帯ワイプアニメーション構造 */
.special-number .heading-area {
    position: relative;
    display: table;
    margin: 0 auto;
    overflow: hidden;
}

.special-number .heading-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    z-index: 10;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
}

.special-number .h-special-number {
    display: block;
    margin: auto;
    opacity: 0;
}

.special-number-wrapper.is-active .heading-area::before {
    animation: greenMaskReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.special-number-wrapper.is-active .h-special-number {
    animation: headingImageFadeIn 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.special-number .printing-area_item--text {
    padding-bottom: 80px;
}

.special-number .printing-area_item--text p {
    color: var(--text-base-color);
    text-align: center;
    margin: 0;
    line-height: 1.8;
    font-size: clamp(16px, 2.2vw, 24px);
    font-weight: 500;
}

.special-number .printing-area_item {
    margin: clamp(64px, 5.2vw, 80px) auto;
    display: flex;
    gap: clamp(40px, 4.8vw, 80px);
    width: fit-content;
}

/* now-printing表示 */
.special-number .now-printing {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}

/* 2. printing-areaに.is-activeが付与されたらフェードイン発火 */
.special-number .printing-area.is-active .now-printing-left {
    animation: fadeInUp 0.3s ease-out forwards;
    animation-delay: 0s;
    /* 見出し完了直後に左側を表示 */
}

.special-number .printing-area.is-active .now-printing-right {
    animation: fadeInUp 0.3s ease-out forwards;
    animation-delay: 0.25s;
    /* 左側から0.25秒遅れて右側を表示 */
}

@media (max-width: 768px) {
    .special-number-wrapper {
        position: relative;
    }

    .special-number .printing-area_item--text .printing-area_item--text01 {
        width: fit-content;
        text-align: left;
        margin: auto;
        line-height: 1.3;
        margin-bottom: 5px;
    }

    .special-number .printing-area_item {
        position: relative;
        flex-direction: column;
        width: 75%;
    }

    .special-number .h-special-number {
        width: 100%;
    }

    .special-number .printing-area_item img {
        position: relative;
        z-index: 2;
        width: 100%;
        height: auto;
    }

    .special-number-wrapper .deco-special-number01 {
        position: absolute;
        z-index: 1;
        width: 60%;
        left: -30px;
        top: 60px;
    }

    .special-number-wrapper .deco-special-number02 {
        position: absolute;
        z-index: 1;
        width: 60%;
        right: -70px;
        bottom: 70px;
    }

    .special-number .printing-area_item--text {
        position: relative;
        z-index: 3;
        padding-bottom: 60px;
    }
}

/* -----------------------
ページ下部画像スクロール
----------------------- */
.scene {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 580px;
    overflow: hidden;
    background: var(--black);
}

.strip-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.strip-track {
    display: flex;
    width: max-content;
    height: 100%;
    transform: translateX(0);
    animation: endless-scroll var(--scroll-speed) linear infinite;
    animation-fill-mode: forwards;
}

.strip {
    flex: 0 0 calc(100vw / 7);
    height: 100vh;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    mask: url('../assets/vol1-mask.svg') center / calc(100vw / 7) 100vh no-repeat;
    -webkit-mask: url('../assets/vol1-mask.svg') center / calc(100vw / 7) 100vh no-repeat;
}

.strip-1 {
    background-image: url('../assets/strip_1_vol1_2x.webp');
}

.strip-2 {
    background-image: url('../assets/strip_2_vol2_2x.webp');
}

.strip-3 {
    background-image: url('../assets/strip_3_vol3_2x.webp');
}

.strip-4 {
    background-image: url('../assets/strip_4_vol4_2x.webp');
}

.strip-5 {
    background-image: url('../assets/strip_5_vol5_2x.webp');
}

.strip-6 {
    background-image: url('../assets/strip_6_vol6_2x.webp');
}

.strip-7 {
    background-image: url('../assets/strip_7_vol7_2x.webp');
}

@keyframes endless-scroll {
    0% {
        transform: translateX(0);
    }

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

.shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 46.635%);
    opacity: 1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .strip-track {
        animation: none;
    }
}

@media (max-width: 768px) {
    html {
        min-height: 100%;
        background: var(--black);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
    }

    body {
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
    }

    .scene {
        width: 100%;
        height: fit-content;
        overflow: hidden;
    }

    .strip-stage {
        width: 100%;
        height: 666px;
        overflow: hidden;
    }

    .strip {
        flex-basis: 109px;
        height: 666px;
        mask-size: 109px 666px;
        -webkit-mask-size: 109px 666px;
    }

    .shade {
        height: 666px;
        background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 50%);
    }
}