/* ----------------------------------------------------------------
   1. VARIABLES & RESET
----------------------------------------------------------------- */
:root {
    --bg-color: #F4F1EA;
    --main-color: #FF3E11; /* 強烈なオレンジレッド */
    --accent-color: #0047FF; /* 電気的なブルー */
    --text-color: #1A1A1A;
    --grid-line: rgba(26, 26, 26, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    /* 背景のグリッド装飾 */
    background-image: 
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ----------------------------------------------------------------
   2. DECORATIVE ELEMENTS
----------------------------------------------------------------- */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: 0.12;
    pointer-events: none;
    z-index: 9999;
}

/* ----------------------------------------------------------------
   3. HEADER
----------------------------------------------------------------- */
.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 3rem;
    background: rgba(244, 241, 234, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 4px solid var(--text-color);
    z-index: 1000;
}

.logo {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -1.5px;
    background: var(--text-color);
    color: var(--bg-color);
    padding: 0 12px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--main-color);
}

/* ----------------------------------------------------------------
   4. HERO SECTION
----------------------------------------------------------------- */
main { padding-top: 80px; }

.hero {
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 4px solid var(--text-color);
    position: relative;
    overflow: hidden;
}

.glitch-text {
    font-size: clamp(3.5rem, 16vw, 12rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -4px;
    text-align: center;
    position: relative;
}

.glitch-text::after {
    content: "NEO-CHRONOS";
    position: absolute;
    left: 6px; top: 6px;
    -webkit-text-stroke: 2px var(--accent-color);
    color: transparent;
    z-index: -1;
}

.subtitle {
    position: absolute;
    bottom: 20%;
    background: var(--main-color);
    color: white;
    padding: 0.4rem 1.5rem;
    font-weight: 900;
    font-size: 1.2rem;
    transform: rotate(-2deg);
}

.hero-date {
    position: absolute;
    bottom: 10%;
    font-family: monospace;
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 0.3em;
}

/* ----------------------------------------------------------------
   5. SECTIONS COMMON
----------------------------------------------------------------- */
.container {
    padding: 8rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.section-title::after {
    content: "";
    flex-grow: 1;
    height: 12px;
    background: var(--text-color);
}

/* ----------------------------------------------------------------
   6. ABOUT
----------------------------------------------------------------- */
.lead-text {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 900;
    max-width: 900px;
    line-height: 1.3;
}

/* ----------------------------------------------------------------
   7. EXHIBITION CARDS
----------------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    border: 2px solid var(--text-color);
}

.card {
    padding: 3rem;
    border: 2px solid var(--text-color);
    background: white;
    transition: 0.4s;
}

.card:hover {
    background: var(--text-color);
    color: white;
    transform: scale(1.02);
    z-index: 2;
}

.card.active {
    background: var(--accent-color);
    color: white;
}

.card-num {
    font-size: 3.5rem;
    font-weight: 900;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.card h3 { font-size: 1.8rem; margin-bottom: 1rem; }

/* ----------------------------------------------------------------
   8. ARTIST
----------------------------------------------------------------- */
.artist-list { display: flex; flex-direction: column; gap: 4rem; }

.artist-item { display: flex; gap: 3rem; align-items: center; }

.artist-image {
    width: 180px; height: 180px;
    background: #ccc;
    border: 4px solid var(--text-color);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--text-color) 10px, var(--text-color) 11px);
    flex-shrink: 0;
}

.artist-info h3 { font-size: 2.2rem; color: var(--main-color); margin-bottom: 0.5rem; }

/* ----------------------------------------------------------------
   9. SCHEDULE TABLE
----------------------------------------------------------------- */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table tr { border-bottom: 2px solid var(--text-color); }

.schedule-table th, .schedule-table td {
    padding: 1.5rem;
    text-align: left;
}

.schedule-table th { font-family: monospace; font-size: 1.5rem; width: 150px; }

/* ----------------------------------------------------------------
   10. GOODS
----------------------------------------------------------------- */
.goods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

.goods-item { text-align: center; font-weight: 900; }

.goods-thumb {
    aspect-ratio: 1/1;
    background: white;
    border: 4px solid var(--text-color);
    margin-bottom: 1.5rem;
    position: relative;
}

.goods-thumb::before {
    content: "SOLD OUT?";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 0.8rem;
    opacity: 0.2;
}

/* ----------------------------------------------------------------
   11. TICKET (STUB DESIGN)
----------------------------------------------------------------- */
.ticket-wrapper { display: flex; flex-direction: column; gap: 2rem; }

.ticket-stub {
    display: flex;
    background: white;
    border: 4px solid var(--text-color);
    max-width: 800px;
    transition: 0.3s;
}

.ticket-stub:hover { transform: translateY(-5px); box-shadow: 12px 12px 0 var(--text-color); }

.ticket-stub.vip { background: var(--main-color); color: white; }

.stub-info { padding: 2rem; flex-grow: 1; }

.category { font-weight: 900; font-size: 0.8rem; letter-spacing: 0.2em; border-bottom: 2px solid currentColor; }

.stub-info h3 { font-size: 2.2rem; margin: 0.5rem 0; }

.stub-perforation {
    width: 0;
    border-left: 4px dashed var(--text-color);
    margin: 15px 0;
    position: relative;
}

.stub-perforation::before, .stub-perforation::after {
    content: ""; position: absolute; width: 30px; height: 30px;
    background: var(--bg-color); border: 4px solid var(--text-color);
    border-radius: 50%; left: -17px;
}
.stub-perforation::before { top: -32px; }
.stub-perforation::after { bottom: -32px; }

.stub-action {
    writing-mode: vertical-rl;
    padding: 1rem;
    background: var(--text-color);
    color: var(--bg-color);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------------------
   12. FAQ
----------------------------------------------------------------- */
.faq-central-stack {
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-wrapper {
    width: 100%;
    max-width: 800px;
    margin-top: 50px;
}

/* 各質問のボックス */
.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 質問部分 */
.faq-question {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.q-prefix {
    font-family: 'Orbitron', sans-serif;
    color: var(--main-color);
    font-weight: 900;
    font-size: 1.2rem;
}

.faq-question p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: #000000;
}

/* 回答部分 */
.faq-answer {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-left: 30px; /* Qと少しずらして階層を作る */
}

.a-prefix {
    font-family: 'Orbitron', sans-serif;
    color: #000000;
    opacity: 0.5;
    font-weight: 900;
    font-size: 1.2rem;
}

.faq-answer p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #000000;
    opacity: 0.8;
}

/* ホバーでわずかに背景が光る演出 */
.faq-item:hover {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}

/* チェックボックスを隠す */
.faq-toggle {
    display: none;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

/* 質問エリアをクリッカブルに */
.faq-question {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 0;
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* 開閉アイコン（プラスマーク） */
.faq-icon {
    margin-left: auto;
    width: 12px;
    height: 12px;
    position: relative;
}

.faq-icon::before, .faq-icon::after {
    content: "";
    position: absolute;
    background-color: var(--main-color);
    transition: transform 0.3s ease;
}

/* 横線 */
.faq-icon::before {
    width: 100%;
    height: 2px;
    top: 5px;
    left: 0;
}

/* 縦線 */
.faq-icon::after {
    width: 2px;
    height: 100%;
    top: 0;
    left: 5px;
}

/* アサーエリア（初期状態は隠す） */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
    display: flex;
    gap: 15px;
    padding: 0 0 30px 30px;
}

/* チェックが入った時（開いた時）の挙動 */
.faq-toggle:checked ~ .faq-answer {
    max-height: 500px;
}

/* アイコンを回転させて「×」にする */
.faq-toggle:checked + .faq-question .faq-icon::before {
    transform: rotate(45deg);
}

.faq-toggle:checked + .faq-question .faq-icon::after {
    transform: rotate(45deg);
}

/* セクション全体：コンテナは中央に置く */
.faq-container {
    width: 100%;
    max-width: 800px; /* ここでブロックの幅を決定 */
    margin: 100px auto;
    padding: 0 40px;  /* 左右に「ある程度の幅」を確保 */
}

.faq-container .section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    margin-bottom: 50px;
    color: var(--main-color);
    text-align: center;
}

/* 各アイテム：中身は左揃え */
.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

/* 質問エリア：Q1の左端を揃える */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左寄せ */
    padding: 30px 0; /* 左右のpaddingを0にして、外側のコンテナで余白を制御 */
    cursor: pointer;
    position: relative;
}

.q-prefix {
    font-family: 'Orbitron', sans-serif;
    color: var(--main-color);
    font-weight: 900;
    min-width: 50px; /* Q1, Q2...の幅を固定して、続く文章の開始位置を揃える */
    display: inline-block;
}

.faq-question p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    margin: 0;
    color: #000000;
    text-align: left; /* テキストも左揃え */
}

/* 回答エリア：文章の開始位置を質問文と揃える */
.faq-answer-inner {
    padding: 0 0 30px 50px; /* Qの幅(50px)と同じ分だけ左に余白を空ける */
    display: block;
    text-align: left;
}

.faq-answer p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
}

/* プラスアイコンは右端に固定 */
.faq-icon {
    position: absolute;
    right: 0;
    width: 12px;
    height: 12px;
}
/* ----------------------------------------------------------------
   13. SNS
----------------------------------------------------------------- */
.sns { background: var(--text-color); color: white; text-align: center; }

.sns-title { font-size: 1.2rem; margin-bottom: 3rem; opacity: 0.7; }

.sns-links { display: flex; flex-direction: column; gap: 1rem; }

.sns-link {
    font-size: clamp(2rem, 10vw, 7rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1.5px white;
    text-decoration: none;
    transition: 0.3s;
}

.sns-link:hover { color: var(--main-color); -webkit-text-stroke: 1.5px var(--main-color); transform: translateX(20px); }

/* ----------------------------------------------------------------
   14. INFORMATION & FOOTER
----------------------------------------------------------------- */
.info { border-top: 4px solid var(--text-color); }

.info-details p { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 900; }

footer {
    padding: 4rem;
    text-align: center;
    font-weight: 900;
    border-top: 4px solid var(--text-color);
}

.ticket-btn {
    position: fixed; bottom: 2rem; right: 2rem;
    width: 100px; height: 100px;
    background: var(--main-color); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-weight: 900; border: 3px solid var(--text-color);
    box-shadow: 6px 6px 0 var(--text-color); z-index: 1001;
}

/* ----------------------------------------------------------------
   15. RESPONSIVE
----------------------------------------------------------------- */
@media (max-width: 768px) {
    .fixed-header { padding: 1rem; }
    nav ul { display: none; } /* モバイル時は簡易化のため非表示 */
    .artist-item { flex-direction: column; text-align: center; }
    .stub-action { writing-mode: horizontal-tb; }
    .ticket-stub { flex-direction: column; }
    .stub-perforation { height: 0; width: auto; border-left: none; border-top: 4px dashed var(--text-color); margin: 0 15px; }
}

/* --- モバイルメニュー用の追加スタイル --- */

/* メニューボタン（ハンバーガー） */
.menu-trigger {
    display: none; /* デフォルトは非表示 */
    width: 44px;
    height: 44px;
    background: var(--text-color);
    border: none;
    position: relative;
    cursor: pointer;
    z-index: 2000;
}

.menu-trigger span {
    display: block;
    position: absolute;
    left: 10px;
    width: 24px;
    height: 3px;
    background: var(--bg-color);
    transition: 0.3s;
}

.menu-trigger span:nth-child(1) { top: 14px; }
.menu-trigger span:nth-child(2) { top: 21px; }
.menu-trigger span:nth-child(3) { top: 28px; }

/* ボタンがアクティブな時の形（×印） */
.menu-trigger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-trigger.active span:nth-child(2) { opacity: 0; }
.menu-trigger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイル時のメニュー表示設定 */
@media (max-width: 768px) {
    .menu-trigger {
        display: block; /* スマホでは表示 */
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%; /* 最初は画面外に隠す */
        width: 100%;
        height: 100vh;
        background: var(--main-color);
        transition: 0.5s cubic-bezier(0.7, 0, 0.3, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1500;
    }

    nav.active {
        right: 0; /* 画面内に滑り込む */
    }

    nav ul {
        display: flex !important; /* display: none を上書き */
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    nav a {
        font-size: 2rem;
        color: white;
        -webkit-text-stroke: 1px var(--text-color);
    }
}

@media (max-width: 768px) {
    .hero { height: 70vh; }
    .glitch-text { font-size: 4rem; letter-spacing: -2px; }
    
    .artist-item {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .artist-image {
        width: 100%; /* スマホでは横幅いっぱいに */
        height: 250px;
    }

    .ticket-stub {
        flex-direction: column;
    }

    .stub-perforation {
        width: 100%;
        height: 0;
        border-left: none;
        border-top: 4px dashed var(--text-color);
        margin: 0;
    }

    .stub-perforation::before, .stub-perforation::after {
        left: auto;
    }
    .stub-perforation::before { top: -17px; left: -15px; }
    .stub-perforation::after { top: -17px; right: -15px; }

    .stub-action {
        writing-mode: horizontal-tb;
        padding: 1.5rem;
    }

    .sns-link { font-size: 2.5rem; }
}

/* セクションが読み込まれる時の基本状態 */
.reveal {
    opacity: 0;
    transform: translateY(50px) rotateX(10deg);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* ヒーローテキストの常時アニメーション */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.glitch-text {
    animation: float 6s ease-in-out infinite;
}

/* ボタンの不気味な震え（ホバー時） */
@keyframes shake {
    0% { transform: translate(0,0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(-3px, -2px); }
    60% { transform: translate(3px, 2px); }
    80% { transform: translate(3px, -2px); }
    100% { transform: translate(0,0); }
}

.ticket-btn:hover {
    animation: shake 0.2s infinite;
}

/* 1. 画面全体の「チラつき」と「走査線」 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 非常に細かい横縞 */
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.15) 50%
    );
    background-size: 100% 3px;
    z-index: 9998;
    pointer-events: none;
    /* 画面全体をわずかに明滅させるアニメーション */
    animation: flicker 0.15s infinite;
}

/* 2. 上から下へゆっくり流れる「走査線（スキャンライン）」 */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent 0%,
        rgba(255, 62, 17, 0.03) 50%,
        transparent 100%
    );
    background-size: 100% 10px; /* 線として見えるサイズ */
    animation: moveLines 10s linear infinite;
    z-index: 9997;
    pointer-events: none;
}

/* --- アニメーションの定義 --- */

/* 画面の微細なチラつき（ブラウン管らしさ） */
@keyframes flicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.98; }
}

/* 線が上から下へ流れる動き */
@keyframes moveLines {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}


.about {
    position: relative;
    overflow: hidden;
}

.lead-text {
    position: relative;
    z-index: 10;
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-color); /* バグ（走査線）の上に被せて読みやすく */
    display: inline;
    box-shadow: 10px 0 0 var(--bg-color), -10px 0 0 var(--bg-color);
}

.about-bg-text {
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 12vw;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 62, 17, 0.2);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    animation: scrollText 20s linear infinite;
}

.about-sub-content {
    margin-top: 4rem;
    max-width: 600px;
    font-weight: bold;
    border-left: 5px solid var(--main-color);
    padding-left: 1.5rem;
}

@keyframes scrollText {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* プログレスバーのスタイル */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%; /* 最初は0% */
    height: 6px;
    background: var(--main-color); /* メインのオレンジレッド */
    z-index: 10001; /* 走査線やヘッダーより上に配置 */
    box-shadow: 0 0 10px var(--main-color);
    transition: width 0.1s ease-out;
}

/* スキャン速度を変えられるように変数を設定 */
body::after {
    animation: moveLines var(--scan-speed, 8s) linear infinite;
}

/* クリティカルなバグ状態（第3段階） */
.critical-glitch {
    animation: micro-shake 0.1s infinite;
}

@keyframes micro-shake {
    0% { transform: translate(0.5px, 0.5px); }
    50% { transform: translate(-0.5px, -0.5px); }
    100% { transform: translate(0.5px, -0.5px); }
}

/* 第3段階でのみ表示される警告メッセージ（隠し要素） */
.critical-glitch #sns::before {
    content: "CRITICAL SYSTEM ERROR - CONTACT US IMMEDIATELY";
    display: block;
    color: var(--main-color);
    font-weight: 900;
    font-size: 2rem;
    text-align: center;
    background: var(--text-color);
    margin-bottom: 2rem;
}

#recovery-overlay {
    display: none; /* 普段は隠す */
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--text-color);
    color: var(--bg-color);
    padding: 2rem;
    border: 4px solid var(--main-color);
    z-index: 20000;
    width: 300px;
    text-align: center;
}

.recovery-bar-bg {
    width: 100%; height: 20px;
    background: #333; margin: 10px 0;
}

#recovery-bar-fill {
    width: 0%; height: 100%;
    background: var(--main-color);
}

/* style.css */
#recovery-overlay {
    display: none; /* 最初は非表示 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1A1A1A; /* 黒背景 */
    color: #FF3E11; /* オレンジ赤文字 */
    padding: 2.5rem;
    border: 4px solid #FF3E11;
    z-index: 20000;
    width: 320px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    font-family: monospace; /* プログラミング風のフォント */
    transition: opacity 0.5s ease;
}

/* recovery overlayの点滅テキスト */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blink {
    animation: blink 0.8s step-end infinite;
    font-family: monospace;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    display: block;
}

.recovery-bar-bg {
    width: 100%;
    height: 12px;
    background: #333;
    margin: 1.5rem 0;
    border: 1px solid #FF3E11;
}

#recovery-bar-fill {
    width: 0%;
    height: 100%;
    background: #FF3E11;
    transition: width 0.05s linear;
}

.site-footer {
    background: var(--text-color); /* 黒背景 */
    color: var(--bg-color); /* クリーム色文字 */
    padding: 80px 0 0 0;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 40px;
    padding-bottom: 60px;
}

.footer-logo {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--main-color);
}

.footer-brand p {
    opacity: 0.8;
    max-width: 300px;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.footer-col h4 {
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    color: var(--main-color);
    border-bottom: 1px solid rgba(244, 241, 234, 0.2);
    padding-bottom: 5px;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
    color: var(--bg-color);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.3s;
}
.footer-col a:hover { opacity: 1; color: var(--main-color); }

.footer-bottom {
    border-top: 1px solid rgba(244, 241, 234, 0.1);
    padding: 30px 0;
}

.copyright {
    font-size: 0.7rem;
    opacity: 0.5;
    text-align: center;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-nav { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.copyright {
    font-size: 0.75rem;
    opacity: 0.6;
    letter-spacing: 0.05em;
}

.designer-credit {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.designer-name {
    color: var(--main-color);
    font-weight: 900;
    position: relative;
    padding-left: 5px;
}

/* 凪燈の名前の下に、アクセントのドットを置く演出 */
.designer-name::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 5px;
    width: calc(100% - 5px);
    height: 2px;
    background: var(--main-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.site-footer:hover .designer-name::after {
    transform: scaleX(1);
    transform-origin: left;
}

@media (max-width: 768px) {
    .footer-bottom-flex {
        flex-direction: column;
        text-align: center;
    }
}

/* 共通のベース設定 */
.disabled-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease;
}

.disabled-link:hover {
    color: rgba(128, 128, 128, 0.3) !important; /* 元の文字をさらに薄く */
}

/* 真ん中の太いライン */
.disabled-link:hover::before {
    content: "";
    position: absolute;
    left: -10%;
    top: 50%;
    width: 120%;
    height: 4px; /* ラインを太くしました */
    background: var(--main-color);
    z-index: 2;
    transform: translateY(-50%);
}

/* ラインの上に重なるエラー文字（フッター：黒背景用） */
.footer-col .disabled-link:hover::after {
    content: attr(data-error);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--main-color);
    background: var(--text-color); /* 黒背景で塗りつぶし */
    padding: 2px 10px; /* 文字周りの余白を広げてラインをしっかり消す */
    font-weight: 900;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 3;
    letter-spacing: 0.1em;
}

/* ラインの上に重なるエラー文字（SNSセクション：クリーム背景用） */
.sns-link.disabled-link:hover::after {
    content: attr(data-error);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--main-color);
    background: var(--bg-color); /* クリーム色背景で塗りつぶし */
    padding: 2px 10px;
    font-weight: 900;
    font-size: 0.9rem;
    white-space: nowrap;
    z-index: 3;
    letter-spacing: 0.1em;
}

/* フッターのブランドエリアを中央揃えにする */
.footer-brand {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center;    /* 横方向の中央に揃える */
    justify-content: center;
    text-align: center;     /* テキスト自体も中央揃え */
    grid-column: 1 / -1;    /* グリッド全体（横幅いっぱい）を使って真ん中に配置 */
    margin-bottom: 40px;    /* 下のナビゲーションとの間隔 */
}

.footer-logo {
    color: var(--main-color);
    font-size: 2rem;        /* 必要に応じてサイズ調整 */
    font-weight: 900;
    margin-bottom: 5px;     /* 下の文字との隙間を詰める */
    line-height: 1;
}

.footer-brand p {
    font-size: 0.8rem;
    line-height: 1.6;
    opacity: 0.8;
}

/* フッター全体のコンテナ */
.footer-central-stack {
    display: flex;
    flex-direction: column;
    align-items: center; /* すべてを中央寄せ */
    text-align: center;
    padding: 80px 0 40px;
}

/* ロゴエリア */
.footer-brand {
    margin-bottom: 50px;
}

.footer-logo {
    color: var(--main-color);
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: 5px;
}

/* ナビゲーションエリア（CONTENTSとSOCIALを横に並べて中央配置） */
.footer-nav-center {
    display: flex;
    gap: 60px; /* 項目間の距離 */
    margin-bottom: 60px;
}

.footer-col h4 {
    color: var(--main-color);
    font-size: 0.7rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col li {
    margin-bottom: 12px;
}

/* コピーライトエリア */
.footer-bottom-center {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    width: 100%;
    max-width: 600px;
}

.copyright {
    font-size: 0.7rem;
    opacity: 0.5;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.designer-credit {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* チケットを並べる外枠 */
.ticket-visual-wrapper {
    display: flex;
    flex-wrap: wrap;       /* 折り返しを許可 */
    justify-content: center; /* 左右中央寄せ */
    align-items: flex-start;
    gap: 60px 40px;        /* 上下(60px) 左右(40px) の余白をしっかり取る */
    margin: 60px auto;
    width: 100%;
    max-width: 1000px;     /* 横に広がりすぎないよう制限 */
}

/* チケット本体の基本設定 */
.ticket-shape {
    display: flex;
    flex-shrink: 0;        /* 勝手に縮まないように固定 */
    background: var(--main-color);
    width: 380px;
    height: 160px;
    clip-path: polygon(
        0% 0%, 92% 0%, 100% 8%, 100% 35%, 96% 45%, 96% 55%, 100% 65%, 100% 92%, 92% 100%, 0% 100%
    );
    cursor: not-allowed;
    position: relative;
    color: #000;
    /* 重なり防止のための安全マージン */
    margin: 10px; 
}

/* 演出用ラインが重ならないようにz-indexを調整 */
.ticket-shape.disabled-link:hover::before {
    z-index: 100;
}
.ticket-shape.disabled-link:hover::after {
    z-index: 101;
}

/* スマホ用の設定（1列にする） */
@media (max-width: 850px) {
    .ticket-visual-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 80px; /* スマホではさらに上下の間隔を広げる */
    }
    
    .ticket-shape {
        width: 320px; /* スマホ用に横幅を少しスリムに */
        height: 150px;
    }
}

/* チケットセクション全体 */
.ticket-central-stack {
    padding: 150px 0;
    font-family: 'Inter', 'Zen Kaku Gothic New', sans-serif;
}

/* チケットの形状：より鋭利で非対称なエッジに */
.ticket-shape {
    display: flex;
    background: var(--main-color);
    width: 400px;
    height: 140px;
    /* より「欠損」を感じさせる鋭い多角形 */
    clip-path: polygon(
        10px 0, 100% 0, 100% 30%, 97% 40%, 97% 60%, 100% 70%, 100% 100%, 0 100%, 0 15px
    );
    cursor: not-allowed;
    position: relative;
    color: #000;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.ticket-shape:hover {
    transform: scale(1.02); /* わずかな浮き上がり */
}

/* メインエリア：文字組みの密度を上げる */
.ticket-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    border-right: 1px solid rgba(0,0,0,0.2);
}

.ticket-main header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.t-title {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.05em; /* ギュッと詰める */
    text-transform: uppercase;
}

.t-desc {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 5px;
    opacity: 0.7;
}

/* 価格：バーコードのような無機質感 */
.t-price {
    margin-top: auto;
    font-size: 1.6rem;
    font-weight: 900;
    text-align: right;
    letter-spacing: -0.02em;
}

/* 半券エリア：より「管理タグ」っぽく */
.ticket-stub {
    width: 50px;
    background: rgba(0,0,0,0.05); /* わずかに色を変える */
    display: flex;
    align-items: center;
    justify-content: center;
}

.stub-txt {
    transform: rotate(90deg);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.3em;
    white-space: nowrap;
}

/* 修正された極太バグライン：背景を透過させない黒で上書き */
.ticket-shape.disabled-link:hover::before {
    height: 12px; /* さらに太く */
    background: #000;
    width: 115%;
    left: -7.5%;
}

.ticket-shape.disabled-link:hover::after {
    background: #000;
    color: var(--main-color);
    padding: 8px 25px;
    font-size: 1rem;
    letter-spacing: 0.2em;
    border: 1px solid var(--main-color); /* エラー文字に枠線をつけて「警告」感を強化 */
}

/* バーコード：線を太く、不規則なリズムに */
.barcode-vertical {
    width: 35px; /* 横幅を少し広げる */
    height: 70px;
    background: repeating-linear-gradient(
        0deg,
        #000,
        #000 3px,        /* 太い黒線 */
        transparent 3px,
        transparent 5px,
        #000 5px,
        #000 6px,        /* 細い黒線 */
        transparent 6px,
        transparent 9px
    );
    opacity: 0.9;
}

/* 価格横のミニバーコードも太く */
.t-barcode-mini {
    width: 70px;
    height: 18px;
    background: repeating-linear-gradient(
        90deg,
        #000,
        #000 2px,
        transparent 2px,
        transparent 4px,
        #000 4px,
        #000 7px,
        transparent 7px,
        transparent 8px
    );
}

/* 半券部分の最終調整 */
.ticket-stub {
    width: 80px; /* バーコードの太さに合わせて少し広げる */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* 上にバーコード、下に文字を配置 */
    padding: 20px 0 10px; /* 上下の余白 */
    background: rgba(0, 0, 0, 0.05);
}

/* 太い縦型バーコード */
.barcode-vertical {
    width: 40px; 
    height: 80px;
    background: repeating-linear-gradient(
        0deg,
        #000,
        #000 4px,        /* さらに太い黒線 */
        transparent 4px,
        transparent 7px,
        #000 7px,
        #000 9px,        /* 中くらいの黒線 */
        transparent 9px,
        transparent 11px
    );
}

/* 文字エリアをバーコードから離す */
.stub-text-area {
    width: 100%;
    text-align: center;
}

.stub-txt {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #000;
}

/* チケット内のタイトル：インパクトは残しつつ現実的なサイズへ */
.t-title {
    font-size: 2.2rem; /* 3.5remから大幅にダウン */
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    margin: 15px 0;
}

/* 説明エリア：読みやすさを追求 */
.ticket-details-area {
    margin-top: 60px;
    display: flex;
    gap: 60px;
    max-width: 900px; /* 少し広げてゆとりを持たせる */
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
}

.detail-box {
    flex: 1;
}

.detail-box h4 {
    font-size: 1rem; /* 文字を大きく */
    color: var(--main-color);
    margin-bottom: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.detail-box p {
    font-size: 0.9rem; /* しっかり読めるサイズにアップ */
    line-height: 1.8;
    opacity: 0.9;      /* 透明度を下げて視認性を確保 */
    word-break: break-all;
}

/* チケットの価格フォントも微調整 */
.t-price {
    font-size: 1.4rem;
    font-weight: 900;
}

/* チケット内の詳細グリッド */
.t-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列に並べる */
    gap: 4px 10px;
    margin: 10px 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 8px;
}

.t-item {
    font-size: 0.55rem;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

.t-item span:first-child {
    opacity: 0.5; /* ラベル側を薄くしてメリハリをつける */
    margin-right: 5px;
}

/* 警告文（超小文字） */
.t-warning {
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    margin-top: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    padding: 2px 4px;
    display: inline-block;
}

/* タイトルと価格のバランス再調整 */
.t-title {
    font-size: 2rem;
    margin-bottom: 2px;
}

.t-price {
    font-size: 1.2rem;
}

/* チケットのサイズを拡張して溢れを防止 */
.ticket-shape {
    display: flex;
    background: var(--main-color);
    width: 440px;
    height: 180px; /* 150pxから180pxへ拡大 */
    color: #000;
    position: relative;
    clip-path: polygon(
        0 0, 100% 0, 100% 35%, 97% 45%, 97% 55%, 100% 65%, 100% 100%, 0 100%, 0 85%, 3% 75%, 3% 25%, 0 15%
    );
    cursor: not-allowed;
    margin: 20px;
}

.ticket-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    overflow: hidden; /* 万が一の溢れをカット */
}

/* タイトルの下の線 */
.t-underline {
    width: 100%;
    height: 4px; /* 太めの線 */
    background: #000;
    margin: 4px 0 10px 0;
}

.t-title {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

/* 詳細グリッドの微調整 */
.t-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 15px;
    margin-bottom: 8px;
}

.t-item {
    font-size: 0.6rem; /* 読みやすさと密度のバランス */
    font-family: 'Courier New', monospace;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
}

/* 警告文の配置 */
.t-warning {
    font-size: 0.5rem;
    font-weight: 900;
    border: 1px solid rgba(0,0,0,0.3);
    padding: 2px 5px;
    align-self: flex-start;
}

/* フッターの配置を底に固定 */
.ticket-main footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 10px;
}

/* チケットと説明文をセットにするカード */
.ticket-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* チケットと説明文を中央で揃える */
    width: 440px;        /* チケットの幅に合わせる */
}

/* チケット下の説明文のスタイル */
.ticket-description {
    margin-top: 30px;
    padding: 0 10px;
    text-align: left;    /* 文章は左寄せで見やすく */
    width: 100%;
}

.ticket-description h4 {
    font-size: 1rem;
    color: var(--main-color);
    margin-bottom: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    font-family: 'Inter', sans-serif;
}

.ticket-description p {
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.8;
    color: #000000;
}

/* レイアウトの微調整 */
.ticket-visual-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px 40px; /* 上下の間隔を広めに設定 */
    margin: 60px auto;
}

/* スマホ対応：カードごと縦に並ぶ */
@media (max-width: 950px) {
    .ticket-card {
        width: 100%;
        max-width: 400px;
    }
    .ticket-shape {
        width: 100%; /* 親要素に合わせる */
        margin: 0;
    }
}

.status-error {
    color: #000000; /* 赤から白へ、またはごく薄いグレーへ */
    text-transform: uppercase;
    border-bottom: 1px solid var(--main-color); /* 下線にだけ赤を残してアクセントにする */
    padding-bottom: 2px;
}

.status-sub-text {
    font-size: 0.85rem; /* 少し大きくして読みやすく */
    color: #000000;
    opacity: 0.6;
    letter-spacing: 0.1em;
    max-width: 600px;
    line-height: 1.8;
    margin-top: 15px;
}

/* 点滅ではなく、ゆっくりと呼吸するようなフェード */
@keyframes status-fade {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

.system-alert-container {
    animation: status-fade 4s ease-in-out infinite;
}

/* 警告エリア全体のコンテナ */
.system-alert-container {
    width: 100%;
    margin: 100px auto 0; /* 上にしっかり余白、左右は自動 */
    display: flex;
    flex-direction: column;
    align-items: center;    /* 子要素を水平中央に */
    justify-content: center; /* 垂直中央（必要に応じて） */
    text-align: center;     /* テキスト自体も中央寄せ */
}

/* メインのステータス文 */
.ticket-note {
    font-family: 'Orbitron', sans-serif; /* 幾何学的で鋭いフォント */
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    color: #000000;
    display: block; /* 中央寄せを確実にするため */
}

/* 状態表示：再構築完了 */
.status-error {
    color: var(--main-color);
    border: 1px solid var(--main-color);
    padding: 2px 10px;
    margin-left: 10px;
    font-size: 0.9rem;
    /* 英語と日本語でフォントを使い分けるならここ */
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
}

/* 補足説明文 */
.status-sub-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.8rem;
    font-weight: 300; /* あえて細くして繊細さを出す */
    color: #000000;
    opacity: 0.7;
    letter-spacing: 0.15em;
    line-height: 2;
    max-width: 600px;
}

/* 全体への呼吸のようなフェード演出 */
.system-alert-container {
    animation: status-breathe 4s ease-in-out infinite;
}

@keyframes status-breathe {
    0%, 100% { opacity: 0.5; filter: blur(0px); }
    50% { opacity: 1; filter: blur(0.5px); } /* わずかに滲ませるバグ演出 */
}

/* 全体を包むレイヤー（bodyの直下に配置するのが理想） */
.global-system-overlay {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* クリックを一切邪魔しない */
    z-index: 9999; /* 常に最前面 */
    
    /* 極細の固定走査線 */
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 1px,
        rgba(255, 255, 255, 0.02) 1px,
        rgba(255, 255, 255, 0.02) 2px
    );
}

/* ゆっくり上下する光の帯（全画面用） */
.global-scan-bar {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 100%
    );
    animation: global-scan 12s linear infinite;
    pointer-events: none;
    z-index: 10000;
}

@keyframes global-scan {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* 右端：座標データ */
.side-metadata-right {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: var(--main-color);
    opacity: 0.4;
    letter-spacing: 0.3em;
    z-index: 1000;
    white-space: nowrap;
}

/* 左端：システムログ */
.side-metadata-left {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: #fff;
    opacity: 0.2;
    letter-spacing: 0.3em;
    z-index: 1000;
    white-space: nowrap;
}

/* 全体コンテナ（bodyなど）に相対位置を持たせる */
body {
    position: relative;
    overflow-x: hidden; /* 横揺れバグ防止 */
}

/* 右端：座標データ（メインカラー） */
.side-metadata-right {
    position: fixed;
    right: 15px; /* 画面右端からの距離 */
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center right; /* 回転の軸を調整 */
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: var(--main-color);
    opacity: 0.5;
    letter-spacing: 0.4em;
    z-index: 1000;
    white-space: nowrap;
    pointer-events: none;
}

/* 左端：システムログ（ホワイト） */
.side-metadata-left {
    position: fixed;
    left: 15px; /* 画面左端からの距離 */
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center left;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: #fff;
    opacity: 0.3;
    letter-spacing: 0.4em;
    z-index: 1000;
    white-space: nowrap;
    pointer-events: none;
}

/* スムーススクロール */
html {
    scroll-behavior: smooth;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px); /* 背景を透かしつつぼかす */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ロゴのスタイル */
.logo-link {
    text-decoration: none;
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: 0.2em;
    transition: 0.3s;
}

.logo-link:hover .logo {
    color: var(--main-color);
    text-shadow: 0 0 10px var(--main-color);
}

/* ハンバーガーメニューのデザイン変更 */
.menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

.trigger-line {
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 真ん中の線だけ短くして「システムアイコン感」を出す */
.trigger-line:nth-child(2) {
    width: 70%;
    align-self: flex-end;
}

/* ナビゲーションメニューの中身 */
#nav-menu {
    position: fixed;
    top: 0;
    right: -100%; /* 初期は隠す */
    width: 300px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    padding: 100px 40px;
    transition: 0.4s ease;
    border-left: 1px solid var(--main-color);
}

#nav-menu ul {
    list-style: none;
    padding: 0;
}

#nav-menu li {
    margin-bottom: 30px;
}

#nav-menu a {
    font-family: 'Orbitron', sans-serif;
    text-decoration: none;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
}

.nav-num {
    font-size: 0.7rem;
    color: var(--main-color);
    opacity: 0.7;
}

#nav-menu a:hover {
    padding-left: 10px; /* ホバーで少し動く */
    color: var(--main-color);
}

/* 右側に隠す */
#nav-menu {
    position: fixed;
    top: 0;
    right: -100%; /* これ！ */
    width: 300px;
    height: 100vh;
    transition: right 0.5s ease;
    z-index: 1999;
}

/* JSでクラスがついた時 */
#nav-menu.is-active {
    right: 0; /* これ！ */
}

/* ボタンを×にする */
.menu-trigger.is-active .trigger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-trigger.is-active .trigger-line:nth-child(2) {
    opacity: 0;
}
.menu-trigger.is-active .trigger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* --- PC表示の設定（992px以上など） --- */
@media (min-width: 992px) {
    /* ハンバーガーボタンを隠す */
    .menu-trigger {
        display: none;
    }

    /* ナビゲーションを常に表示し、横並びにする */
    #nav-menu {
        position: static; /* 固定解除 */
        width: auto;
        height: auto;
        background: none;
        border: none;
        padding: 0;
        right: 0; /* 隠さない */
    }

    #nav-menu ul {
        display: flex; /* 横並び */
        gap: 30px;
        margin: 0;
    }

    #nav-menu li {
        margin-bottom: 0;
    }

    /* ナビゲーションフッターなどはPCでは隠す */
    .nav-footer, .nav-overlay {
        display: none;
    }
}

/* --- スマホ表示の設定（991px以下） --- */
@media (max-width: 991px) {
    .menu-trigger {
        display: flex; /* ボタンを表示 */
    }

    #nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* 右側に隠す */
        width: 300px;
        height: 100vh;
        background: rgba(10, 10, 10, 0.98);
        padding: 100px 40px;
        transition: right 0.5s cubic-bezier(0.8, 0, 0.2, 1);
        z-index: 1999;
    }

    /* 開いた時の状態 */
    #nav-menu.is-active {
        right: 0;
    }
}

@media (max-width: 991px) {
    #nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%; /* 画面幅の80%に抑える */
        max-width: 300px;
        height: 100vh;
        padding: 80px 30px;
        box-sizing: border-box;
        transition: right 0.5s cubic-bezier(0.8, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }

    #nav-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left; /* 基本は左揃え */
    }

    #nav-menu li {
        margin-bottom: 20px;
        width: 100%;
    }

    #nav-menu a {
        display: flex;
        align-items: baseline; /* 数字と文字の底辺を合わせる */
        gap: 15px;
        color: #fff;
        text-decoration: none;
        font-family: 'Orbitron', sans-serif;
        font-weight: 900;
        font-size: 1.2rem;
        white-space: nowrap; /* 勝手に改行させない */
    }

    /* 01, 02 などの数字部分を固定幅にして、後の文字を縦に揃える */
    .nav-num {
        display: inline-block;
        min-width: 35px; /* ここを揃えるとABOUTなどの開始位置が揃う */
        font-size: 0.8rem;
        color: var(--main-color);
    }
}

@media (max-width: 991px) {
    #nav-menu {
        /* 1. 背景をかなり暗めの黒に設定（不透明度を上げる） */
        background: rgba(5, 5, 5, 0.95); 
        
        /* 2. ボカしを少し弱める（後ろが透けすぎて白っぽくなるのを防ぐ） */
        backdrop-filter: blur(6px); 
        -webkit-backdrop-filter: blur(6px);
        
        /* 3. 左側に少し強めの黒い影を入れ、コンテンツとの境界をハッキリさせる */
        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.9);

        /* 4. メニューの内側に、上から下へ暗くなるグラデーションを重ねる */
        background-image: linear-gradient(
            180deg, 
            rgba(0,0,0,0.2) 0%, 
            rgba(0,0,0,0) 100%
        );

        /* 以下、既存のレイアウト設定 */
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        padding: 80px 30px;
        box-sizing: border-box;
        transition: right 0.5s cubic-bezier(0.8, 0, 0.2, 1);
        z-index: 1999;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* メニュー内の文字をよりハッキリさせる */
    #nav-menu a {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(0, 0, 0, 1); /* 文字の周りに影を置いて浮かせる */
    }
}