@charset "UTF-8";
/* ==============================
   TOPファーストビュー
   大きなロゴ＋グリッチ / 映像のノイズ・走査線 / 下部の情報ティッカー
============================== */

.fv {
    height: 100vh;
    height: 100svh;
}

/* ---------- 映像の質感：周辺を暗く＋走査線 ---------- */
.fv::before,
.fv::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.fv::before {
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .75) 100%);
}
.fv::after {
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, .14) 1px, transparent 1px, transparent 4px);
}
/* ノイズ（フィルムのざらつき） */
.fv-noise {
    position: absolute;
    inset: -50%;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .14;
    animation: fv-noise .5s steps(5) infinite;
}
@keyframes fv-noise {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-6%, 4%); }
    40%  { transform: translate(5%, -7%); }
    60%  { transform: translate(-3%, 8%); }
    80%  { transform: translate(7%, 2%); }
    100% { transform: translate(0, 0); }
}

/* ---------- ロゴまわり（既存 .mv_logo の固定表示を引き継ぐ） ---------- */
.fv-title {
    width: 100%;
    /* 白い部分だけ映像が反転して見える */
    mix-blend-mode: difference;
}
/* 手のマーク：画面の高さ基準で大きく */
.fv-mark {
    position: relative;
    width: min(46vh, 64vw);
    margin: 0 auto min(2vh, 16px);
}
.mv .fv-mark img {
    display: block;
    width: 100%;
    max-width: none;
}
/* NINJA BOYZ */
.mv h1.fv-glitch {
    position: relative;
    display: inline-block;
    font-size: min(21vw, 17vh);
    letter-spacing: .04em;
    line-height: .82;
    padding-left: .04em; /* letter-spacing 分の中央ずれを補正 */
}

/* ---------- グリッチ：ビデオのトラッキングが乱れたように、横の帯がズレてちらつく ----------
   4秒おきに約0.4秒。マークと文字は同じタイミングで乱れる */
.fv-glitch,
.fv-mark > img:first-child {
    animation: fv-flicker 4s infinite steps(1);
}
/* 文字：疑似要素で同じ文字を重ね、細い帯だけ切り出して横にずらす */
.fv-glitch::before,
.fv-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: inherit;
    opacity: 0;
}
.fv-glitch::before {
    animation: fv-tear-a 4s infinite steps(1);
}
.fv-glitch::after {
    animation: fv-tear-b 4s infinite steps(1);
}
/* マーク：重ねた2枚の画像を同じように帯で切り出してずらす */
.fv-mark > img + img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.fv-mark > img:nth-child(2) {
    animation: fv-tear-a 4s infinite steps(1);
}
.fv-mark > img:nth-child(3) {
    animation: fv-tear-b 4s infinite steps(1);
}
/* 本体：一瞬欠けて横に揺れる */
@keyframes fv-flicker {
    0%, 84%, 95%, 100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
    85%   { transform: translateX(-2%); clip-path: inset(0 0 38% 0); }
    86.5% { opacity: .35; transform: translateX(1.5%); }
    88%   { opacity: 1; transform: none; clip-path: inset(22% 0 0 0); }
    90%   { transform: translateX(3%) scaleY(1.03); clip-path: inset(0 0 0 0); }
    91.5% { opacity: .6; transform: translateX(-1%); }
    93%   { opacity: 1; transform: none; clip-path: inset(48% 0 12% 0); }
}
/* ずれる帯（上側） */
@keyframes fv-tear-a {
    0%, 84%, 95%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
    85%   { opacity: 1; transform: translateX(9%); clip-path: inset(18% 0 74% 0); }
    86.5% { opacity: 1; transform: translateX(-14%); clip-path: inset(40% 0 52% 0); }
    88%   { opacity: 1; transform: translateX(6%); clip-path: inset(8% 0 86% 0); }
    90%   { opacity: 1; transform: translateX(-5%); clip-path: inset(60% 0 30% 0); }
    91.5% { opacity: 1; transform: translateX(18%); clip-path: inset(30% 0 66% 0); }
    93%   { opacity: 1; transform: translateX(-8%); clip-path: inset(70% 0 24% 0); }
}
/* ずれる帯（下側） */
@keyframes fv-tear-b {
    0%, 84%, 95%, 100% { opacity: 0; transform: none; clip-path: inset(100% 0 0 0); }
    85%   { opacity: 1; transform: translateX(-11%); clip-path: inset(66% 0 26% 0); }
    86.5% { opacity: 1; transform: translateX(7%); clip-path: inset(80% 0 14% 0); }
    88%   { opacity: 1; transform: translateX(-16%); clip-path: inset(50% 0 44% 0); }
    90%   { opacity: 1; transform: translateX(10%); clip-path: inset(12% 0 80% 0); }
    91.5% { opacity: 1; transform: translateX(-6%); clip-path: inset(86% 0 6% 0); }
    93%   { opacity: 1; transform: translateX(12%); clip-path: inset(36% 0 58% 0); }
}

/* ---------- 下部の情報ティッカー ---------- */
.fv-ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    background: #FFF;
    color: #000;
    border-top: 2px solid #000;
}
.fv-ticker-track {
    display: flex;
    width: max-content;
    animation: fv-ticker var(--fv-ticker-duration, 30s) linear infinite;
}
.fv-ticker:hover .fv-ticker-track {
    animation-play-state: paused;
}
.fv-ticker-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fv-ticker-list li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}
.fv-ticker-list li::after {
    content: "・";
    margin: 0 20px;
}
.fv-ticker-list a {
    display: flex;
    align-items: center;
    padding: 14px 0;
    color: inherit;
    text-decoration: none;
}
.fv-ticker-list a:hover {
    text-decoration: underline;
}
.fv-ticker-label {
    margin-right: 12px;
    padding: 4px 8px 3px;
    background: #000;
    color: #FFF;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: .08em;
}
@keyframes fv-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media screen and (max-width: 768px) {
    .fv-ticker-list li {
        font-size: 13px;
    }
    .fv-ticker-list a {
        padding: 11px 0;
    }
    .fv-ticker-label {
        font-size: 15px;
    }
}

/* 動きを減らす設定の人には、グリッチ・ノイズ・ティッカーを止める */
@media (prefers-reduced-motion: reduce) {
    .fv-noise,
    .fv-glitch,
    .fv-glitch::before,
    .fv-glitch::after,
    .fv-mark > img,
    .fv-ticker-track {
        animation: none;
    }
    .fv-ticker {
        overflow-x: auto;
    }
}

/* ==============================
   TOPライブ情報：フライヤーを大きく並べ、日付・会場を添える
============================== */
/* 件数が変わってもカードの大きさは一定（1行5枚分の幅）。
   PCは左寄せで、多い時は折り返す */
.toplive-cards {
    --toplive-cols: 5;
    --toplive-gap: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px var(--toplive-gap);
}
@media screen and (max-width: 1100px) {
    .toplive-cards {
        --toplive-cols: 4;
    }
}
.toplive-cards::after {
    content: none;
}
.toplive-cards .toplive-block {
    flex: 0 0 calc((100% - var(--toplive-gap) * (var(--toplive-cols) - 1)) / var(--toplive-cols));
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}
.toplive-cards .toplive-block a {
    display: block;
    color: #FFF;
    text-decoration: none;
}
.toplive-cards .toplive-block-hide {
    display: none;
}
/* フライヤー：縦長の枠いっぱいに表示（A判の比率に近い 5:7） */
.toplive-cards .toplive-block-image {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    background: #111;
}
.toplive-cards .toplive-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: top;
    transition: transform .5s;
}
/* 枠に合わない比率のフライヤー（js/fv.js が判定）：全体を収め、余白はぼかした同じ画像で埋める */
.toplive-cards .toplive-block-image.is-contain::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: var(--flyer) center / cover no-repeat;
    filter: blur(18px) brightness(.45);
}
.toplive-cards .toplive-block-image.is-contain img {
    position: relative;
    object-fit: contain;
    object-position: center;
}
/* マウス操作の環境だけ、マウスを乗せると暗くして少し拡大（普段は元の色のまま） */
/* 暗くする効果は枠ごと掛ける（ぼかした余白・NEXT LIVE ラベルも一緒に暗くなる） */
@media (hover: hover) {
    .toplive-cards .toplive-block-image {
        transition: filter .4s;
    }
    .toplive-cards .toplive-block a:hover .toplive-block-image,
    .toplive-cards .toplive-block a:focus-visible .toplive-block-image {
        filter: brightness(.5);
    }
    .toplive-cards .toplive-block a:hover .toplive-block-image img,
    .toplive-cards .toplive-block a:focus-visible .toplive-block-image img {
        transform: scale(1.04);
    }
}
.toplive-next {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 5px 10px 4px;
    background: #FFF;
    color: #000;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: .08em;
    line-height: 1;
}
/* 日付・会場・タイトル */
.toplive-info {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 2px solid #FFF;
}
.toplive-cards .toplive-info p {
    margin: 0;
    color: #FFF;
}
.toplive-cards .toplive-date {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    line-height: 1;
    letter-spacing: .02em;
}
.toplive-date-dow {
    margin-left: 6px;
    font-size: 18px;
}
.toplive-cards .toplive-venue {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}
.toplive-cards .toplive-title {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.toplive-cards .toplive-block a:hover .toplive-venue {
    text-decoration: underline;
}
/* スマホ：横スワイプで見る */
@media screen and (max-width: 768px) {
    .toplive-cards {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }
    .toplive-cards .toplive-block {
        flex: 0 0 62%;
        scroll-snap-align: start;
    }
    /* 件数が少なく横にスクロールしない時は中央に寄せる（justify-content: center だとスクロール時に左端が切れるため margin で寄せる） */
    .toplive-cards .toplive-block:first-child {
        margin-left: auto;
    }
    .toplive-cards .toplive-block:last-child {
        margin-right: auto;
    }
    .toplive-cards .toplive-date {
        font-size: 34px;
    }
}
/* 大きめのスマホ（410〜768px。iPhone Pro Max・Android の大きい機種など）：
   1枚だと大きすぎるので2枚並べ、3枚目を少し見せる */
@media screen and (min-width: 410px) and (max-width: 768px) {
    .toplive-cards .toplive-block {
        flex-basis: 44%;
    }
    .toplive-cards .toplive-date {
        font-size: 28px;
    }
    .toplive-date-dow {
        font-size: 15px;
    }
}