@charset "UTF-8";

::selection { background-color: #ff2a2a; color: #fff; }
::-moz-selection { background-color: #ff2a2a; color: #fff; }

body { margin: 0; padding: 0; font-family: 'Noto Sans JP', sans-serif; background-color: #080808; color: #f0f0f0; display: flex; flex-direction: column; min-height: 100vh; }
* { box-sizing: border-box; }

/* ★全体ズーム用（PC版のみ1.25倍） */
@media screen and (min-width: 769px) {
    body.zoom-enabled { zoom: 1.25; }
    /* ★ズームによるオープニングのズレを中央に修正（100 ÷ 1.25 = 80） */
    body.zoom-enabled #splash-screen {
        width: 80vw !important;
        height: 80vh !important;
    }
}

#splash-screen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100dvh !important; background-color: #050505 !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; animation: hideSplash 0.5s ease 2.5s forwards !important; pointer-events: none !important; }
.splash-content { display: inline-block; background-color: transparent !important; }
.splash-title { font-family: 'Dela Gothic One', sans-serif; font-size: clamp(1.2rem, 5vw, 2.5rem); color: #ff2a2a !important; background-color: transparent !important; letter-spacing: 2px; margin: 0; text-shadow: none !important; transform: skewX(-5deg); white-space: nowrap; clip-path: inset(0 100% 0 0); animation: typing 1.5s steps(12, end) 0.3s forwards !important; }
@keyframes typing { to { clip-path: inset(0 0 0 0); } }
@keyframes hideSplash { to { opacity: 0; visibility: hidden; } }

header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: rgba(10,10,10,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid #333; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.logo { font-family: 'Dela Gothic One', sans-serif; font-size: 1.8em; color: #ff2a2a; letter-spacing: 2px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 10px; transform: skewX(-10deg); }
.logo:hover { text-shadow: 0 0 15px rgba(255, 42, 42, 0.6); transform: skewX(-10deg) scale(1.05); }

.hamburger { display: none; }
.mobile-close-btn { display: none; }

nav { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
nav a { font-family: 'Dela Gothic One', sans-serif; font-size: 0.9em; color: #aaa; text-decoration: none; cursor: pointer; padding: 8px 15px; transition: 0.3s; position: relative; display: inline-block; border-radius: 4px; transform: skewX(-10deg); }
nav a:hover { color: #fff; background: rgba(255, 42, 42, 0.1); }
nav a.active { color: #fff; background: rgba(255, 42, 42, 0.2); border-bottom: 3px solid #ff2a2a; border-radius: 4px 4px 0 0; }

.container { max-width: 1100px; margin: 30px auto; padding: 0 15px; flex: 1; width: 100%; }

.glass-card { background: linear-gradient(145deg, #161616, #0d0d0d); border: 1px solid #2a2a2a; box-shadow: 0 5px 15px rgba(0,0,0,0.4); border-radius: 8px; }

/* ================================================================= */
/* ★ ホーム画面のレイアウト修正（右側の3分割化） */
/* ================================================================= */
.about-section { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 10px; flex-wrap: wrap; }
.about-left { flex: 1; min-width: 280px; }
.about-title-box { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border-left: 5px solid #ff2a2a; padding-left: 15px; }
.about-title-box h1 { font-size: 2.2em; font-weight: 900; color: #fff; margin: 0; letter-spacing: 1px; }
.about-title-box h1 span { color: #ff2a2a; text-shadow: 0 0 10px rgba(255,42,42,0.3); }
.about-desc { color: #ccc; line-height: 1.8; font-size: 1em; margin-bottom: 10px; letter-spacing: 0.5px; font-weight: 700; }

.about-right { 
    flex: 1.3; min-width: 300px; max-width: 500px; 
    display: flex; flex-direction: column; gap: 15px; margin: 0 auto;
}

/* ① 白枠：ライブ告知エリア */
.live-notice-box {
    display: flex; align-items: center; justify-content: center; gap: 15px;
    padding: 15px 20px; border: 2px solid #ddd; /* 白枠 */
    border-radius: 8px; background: #111;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    min-height: 70px;
}
.live-notice-box.active {
    border-color: #ff2a2a; /* ライブ中は赤枠で光らせる */
    box-shadow: 0 0 15px rgba(255, 42, 42, 0.4);
    animation: livePulse 2s infinite alternate;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 10px rgba(255, 42, 42, 0.2); }
    100% { box-shadow: 0 0 25px rgba(255, 42, 42, 0.6); }
}
.live-badge {
    background: #ff2a2a; color: #fff; font-weight: 900; padding: 4px 10px;
    border-radius: 4px; font-size: 0.85em; letter-spacing: 1px;
    animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.5; } }
.live-text { font-size: 1.1em; font-weight: 900; color: #fff; margin: 0; }

/* 下段（赤枠とピンク枠を並べるコンテナ） */
.about-split-bottom {
    display: flex; gap: 15px; height: 320px;
}

/* ② 赤枠：メンバー画像（スライドショー） */
.mini-slideshow {
    flex: 1; position: relative; overflow: hidden; border-radius: 8px;
    border: 2px solid #ff2a2a; /* 赤枠 */
    background: #000;
}
.slideshow-img { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; display: block; 
}
.slideshow-img.active { opacity: 1; }

/* ③ ピンク枠：ニュースエリア */
.mini-news-box {
    flex: 1; padding: 15px; display: flex; flex-direction: column;
    border-radius: 8px; border: 2px solid #ffb6c1; /* ピンク枠 */
    background: linear-gradient(145deg, #1a1616, #0d0a0a);
}
.mini-news-title {
    margin: 0 0 10px 0; color: #ffb6c1; font-size: 1.05em; font-weight: 900;
    border-bottom: 1px solid #444; padding-bottom: 5px; text-align: center;
}
.mini-news-list {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.mini-news-list::-webkit-scrollbar { width: 4px; }
.mini-news-list::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }
.mini-news-item {
    cursor: pointer; transition: 0.2s; padding: 5px; border-radius: 4px; border-left: 3px solid transparent;
}
.mini-news-item:hover { background: rgba(255, 182, 193, 0.1); border-left-color: #ffb6c1; }
.mini-news-date { color: #ffb6c1; font-size: 0.7em; font-weight: bold; margin-bottom: 3px; }
.mini-news-text { color: #ccc; font-size: 0.85em; font-weight: bold; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ================================================================= */

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.section-title { text-align: center; font-size: 2.2em; font-weight: 900; letter-spacing: 2px; margin-bottom: 25px; }
.rule-title { color: #ff2a2a; text-shadow: 0 0 10px rgba(255,42,42,0.3); }
.rule-card { padding: 15px 20px; display: flex; gap: 15px; align-items: baseline; font-size: 1em; margin-bottom: 12px; border-left: 4px solid #ff2a2a; }
.rule-card span:first-child { flex-shrink: 0; white-space: nowrap; font-size: 1.1em; font-weight: 900; letter-spacing: 1px; }

.sub-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
.sub-tab-btn { background: #1a1a1a; color: #fff; border: 1px solid #333; padding: 8px 20px; border-radius: 30px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 0.95em; }
.sub-tab-btn:hover { border-color: #ff2a2a; }
.sub-tab-btn.active { background: #ff2a2a; color: #fff; border-color: #ff2a2a; box-shadow: 0 0 15px rgba(255, 42, 42, 0.5); }

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; }
.member-card { overflow: hidden; position: relative; transition: 0.3s; cursor: pointer; display: flex; flex-direction: column; }
.member-img, .tier-item-img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px 4px 0 0; background: #000; }
.member-info { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.member-name { font-size: 1.05em; font-weight: 900; margin: 0; color: #fff; word-break: break-word; line-height: 1.3; }
.member-role { color: #999; font-size: 0.8em; margin-bottom: 6px; font-weight: 700; word-break: break-word; line-height: 1.2; }
.card-sns-container { display: flex; gap: 4px; margin-top: auto; flex-wrap: wrap; }
.card-sns-badge { width: 22px; height: 22px; background: #222; border: 1px solid #444; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #ddd; font-size: 0.65em; font-weight: 900; text-decoration: none; transition: 0.2s; }
.card-sns-badge:hover { background: #ff2a2a; border-color: #ff2a2a; color: #fff; }

.tier-cat-banner { padding: 25px 30px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: space-between; border-left: 5px solid #ffd700; margin-bottom: 15px; }
.tier-cat-banner:hover { background: #1f1f1f; transform: translateX(8px); box-shadow: 0 5px 20px rgba(255, 215, 0, 0.15); border-color: #ffd700; }
.tier-cat-title { font-size: 1.6em; font-weight: 900; color: #fff; margin: 0; }
.tier-container { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin: 0 auto; }
.tier-row { display: flex; min-height: 85px; align-items: stretch; overflow: hidden; }
.tier-label { width: 110px; display: flex; align-items: center; justify-content: center; font-size: 1.8em; font-weight: 900; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.8); flex-shrink: 0; letter-spacing: 2px; border-right: 1px solid rgba(255,255,255,0.1); }
.tier-items { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; align-items: center; }
.tier-item-card { background: #111; border: 1px solid #333; border-radius: 6px; width: 75px; text-align: center; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor: pointer; transition: 0.2s; }
.tier-item-card:hover { border-color: #ffd700; transform: translateY(-3px); }
.tier-item-name { font-size: 0.75em; font-weight: 700; padding: 4px; color: #eee; word-break: break-word; line-height: 1.2; }
.tier-GORT { background: linear-gradient(135deg, #ff5733, #e74c3c); }
.tier-S { background: linear-gradient(135deg, #ffd700, #f39c12); color: #000 !important; text-shadow: none; }
.tier-A { background: linear-gradient(135deg, #00fa9a, #27ae60); color: #000 !important; text-shadow: none; }
.tier-B { background: linear-gradient(135deg, #1e90ff, #2980b9); }
.tier-C { background: linear-gradient(135deg, #a9a9a9, #7f8c8d); }

.org-tree-wrapper { position: relative; padding-left: 30px; margin-top: 20px; }
.org-tree-line-v { position: absolute; top: 40px; bottom: 40px; left: 0; width: 2px; background: #555; }
.org-tree-row { position: relative; display: flex; margin-bottom: 20px; align-items: stretch; }
.org-tree-line-h { position: absolute; top: 40px; left: -30px; width: 30px; height: 2px; background: #555; }
.org-tree-label { width: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #111; z-index: 2; margin-right: 20px; border-color: #444; flex-shrink: 0; border-radius: 8px; }
.org-tree-content { flex: 1; display: flex; gap: 20px; flex-wrap: nowrap; min-width: 0; }
.org-tree-block { padding: 20px; width: 240px; flex-shrink: 0; background: rgba(20,20,20,0.8); border: 1px solid #333; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.org-tree-block-main { flex: 1; background: rgba(20,20,20,0.8); border: 1px solid #333; border-radius: 8px; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 15px; }

/* ================================================================= */
/* ★ アルバム画面（グリッドレイアウト＆左に赤線） */
/* ================================================================= */
.timeline-container { 
    position: relative; 
    max-width: 100%; 
    margin: 30px auto; 
    padding: 10px 0 10px 30px; 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 20px;
}
.timeline-container::after { 
    content: ''; position: absolute; width: 3px; background-color: #ff2a2a; 
    top: 0; bottom: 0; left: 5px; border-radius: 2px; box-shadow: 0 0 10px rgba(255, 42, 42, 0.6); 
}
.timeline-container::before { 
    content: ''; position: absolute; width: 16px; height: 16px; left: -2px; 
    background-color: #080808; border: 3px solid #ff2a2a; top: 10px; border-radius: 50%; 
    z-index: 1; box-shadow: 0 0 8px rgba(255, 42, 42, 0.8); 
}
.timeline-item { width: 100%; padding: 0; position: relative; background-color: inherit; }
.timeline-item::after { display: none; }
.timeline-card { 
    padding: 12px; background: linear-gradient(145deg, #161616, #0d0d0d); 
    border: 1px solid #333; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; gap: 10px; 
    height: 100%; 
}
.timeline-card:hover { transform: translateY(-5px); border-color: #ff2a2a; box-shadow: 0 6px 15px rgba(255, 42, 42, 0.2); }
.timeline-header { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.timeline-date { display: inline-block; background: #ff2a2a; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 0.75em; font-weight: 900; letter-spacing: 1px; }
.timeline-title { color: #fff; font-size: 0.9em; font-weight: 900; margin: 0; word-break: break-word; line-height: 1.4; }
.timeline-img { width: 100%; height: auto; border-radius: 6px; object-fit: cover; aspect-ratio: 1 / 1; } 

.news-card { padding: 20px; margin-bottom: 15px; border-left: 4px solid #1e90ff; }
.news-date { color: #1e90ff; font-size: 0.9em; font-weight: 900; margin-bottom: 5px; letter-spacing: 1px; }
.news-title { font-size: 1.3em; font-weight: 900; margin-bottom: 10px; color: #fff; }
.news-content { color: #bbb; line-height: 1.6; white-space: pre-wrap; font-size: 0.95em; font-weight: 700; }

footer { background: #080808; border-top: 1px solid #222; text-align: center; padding: 20px; color: #666; font-size: 0.85em; margin-top: auto; font-weight: 700; }

#memberModal .modal-container, #rebellionModal .modal-container { width: 750px; max-width: 95vw; height: 450px; display: flex; position: relative; overflow: hidden; background: linear-gradient(to bottom, #1a1a1a, #0d0d0d); border-radius: 8px; }
#memberModal .modal-left, #rebellionModal .modal-left { width: 320px; flex-shrink: 0; background: #000; display: flex; align-items: center; justify-content: center; padding: 0; border: none !important; }
#modalImg, #rebModalImg { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
#memberModal .modal-right, #rebellionModal .modal-right { flex: 1; padding: 30px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
.modal-bio { color: #ddd; font-size: 0.9em; line-height: 1.7; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; width: 100%; box-sizing: border-box; padding-right: 5px; }

#albumModal .modal-container { width: fit-content; min-width: 300px; max-width: 95vw; height: auto; max-height: 90vh; display: flex; flex-direction: column; overflow-y: auto; background: linear-gradient(to bottom, #1a1a1a, #0d0d0d); border-radius: 8px; margin: auto; }
#albumModal .modal-left { width: 100%; height: auto; background: transparent; display: flex; justify-content: center; align-items: center; padding: 0; }
#albumModalImg { width: auto; height: auto; max-width: 100%; max-height: 75vh; object-fit: contain; display: block; aspect-ratio: auto; margin: 0 auto; }
#albumModal .modal-right { width: 100%; height: auto; padding: 20px; }
#albumModalTitle { color: #fff; font-size: 1.8em; font-weight: 900; word-break: break-word; letter-spacing: 1px; margin: 0; line-height: 1.4; text-align: center; }

/* ================================================================= */
/* ★ スマートフォン向け最適化（縦並び・横並びの修正） */
/* ================================================================= */
@media screen and (max-width: 768px) {
    header { flex-direction: row; padding: 15px 20px; align-items: center; justify-content: space-between; }
    .logo { font-size: 1.5em; transform: skewX(-10deg); margin: 0; }
    .hamburger { display: flex; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1001; }
    .hamburger span { display: block; width: 30px; height: 3px; background: #fff; border-radius: 2px; transition: 0.3s; }
    nav { position: fixed; top: 0; right: -100vw; width: 100vw; height: 100dvh; background: rgba(8, 8, 8, 0.98); backdrop-filter: blur(10px); flex-direction: column; justify-content: center; align-items: center; padding: 0; transition: right 0.3s ease-in-out; z-index: 1000; gap: 30px; overflow-y: auto; flex-wrap: nowrap; }
    nav.open { right: 0; }
    .mobile-close-btn { display: block; position: absolute; top: 20px; right: 25px; font-size: 3em; color: #fff; cursor: pointer; line-height: 1; font-weight: normal; }
    nav a { padding: 10px 20px; font-size: 1.6em; white-space: nowrap; transform: skewX(-10deg); background: transparent !important; border: none !important; color: #fff; font-weight: bold; }
    nav a.active { color: #ff2a2a !important; }

    .about-right { height: auto; min-width: 100%; }
    
    /* ★ スマホの時はスライドショー（左）とニュース（右）を横並びに */
    .about-split-bottom { 
        display: flex !important; 
        flex-direction: row !important; 
        height: 250px !important; 
        gap: 10px !important;
    }
    
    /* スライドショーを正方形っぽく制限 */
    .mini-slideshow { 
        flex: 1 !important; 
        height: 100% !important; 
        aspect-ratio: auto !important; 
    }
    .slideshow-img { 
        object-fit: cover !important; 
    }
    
    /* ニュースの横幅・高さを調整 */
    .mini-news-box { 
        flex: 1 !important; 
        height: 100% !important; 
        min-height: auto !important;
        padding: 10px !important;
    }
    .mini-news-title { font-size: 0.9em; margin-bottom: 5px; }
    .mini-news-item { padding: 3px; }
    .mini-news-text { font-size: 0.75em; }

    .about-title-box h1 { font-size: 1.8em; }
    .section-title { font-size: 1.6em; letter-spacing: 2px; white-space: nowrap; }
    .tier-cat-title { font-size: 1.3em; }
    .org-top-card { padding: 8px 20px !important; margin-bottom: 5px !important; }
    .org-top-card b { font-size: 1.1em !important; }
    .org-tree-wrapper { padding-left: 10px; margin-top: 10px; }
    .org-tree-line-v { left: -5px; top: 15px; bottom: 15px; }
    .org-tree-line-h { left: -10px; width: 10px; top: 15px; }
    .org-tree-row { flex-direction: column; margin-bottom: 10px; }
    .org-tree-label { width: 100%; padding: 5px 10px; margin-bottom: 5px; flex-direction: row; justify-content: space-between; height: auto; min-height: 30px; border-radius: 4px; margin-right: 0;}
    .org-tree-label span { font-size: 1em !important; }
    .org-tree-content { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .org-tree-block { width: calc(50% - 3px); padding: 8px; gap: 4px; border-radius: 4px; }
    .org-tree-block div b { font-size: 0.85em !important; }
    .org-tree-block div span { font-size: 0.65em !important; }
    .org-tree-block-main { width: 100%; padding: 10px; gap: 6px; border-radius: 4px; }
    .org-tree-block-main span { margin-right: 6px !important; margin-bottom: 2px !important; }
    .org-tree-block-main b { font-size: 0.85em !important; }

    .tier-row { min-height: 60px; }
    .tier-label { width: 50px; font-size: 1.2em; letter-spacing: 0; }
    .tier-items { gap: 6px; padding: 6px; }
    .tier-item-card { width: 50px; border-radius: 4px; }
    .tier-item-name { font-size: 0.6em; padding: 2px; }

    .member-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .member-info { padding: 8px; }
    .member-name { font-size: 0.85em; }
    .member-role { font-size: 0.65em; }
    .card-sns-badge { width: 18px; height: 18px; font-size: 0.55em; }
    
    /* スマホ用のアルバムグリッド微調整 */
    .timeline-container { padding-left: 20px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
    .timeline-container::after { left: 2px; }
    .timeline-container::before { left: -5px; top: 8px; }
    .timeline-card { padding: 10px; gap: 8px; }
    .timeline-date { font-size: 0.65em; padding: 2px 6px; }
    .timeline-title { font-size: 0.8em; }

    #memberModal .modal-container, #rebellionModal .modal-container { flex-direction: column; height: 85vh; display: flex; width: 95vw; }
    #memberModal .modal-left, #rebellionModal .modal-left { width: 100%; height: 220px; padding: 10px; background: #050505; flex-shrink: 0; }
    #modalImg, #rebModalImg { width: auto; height: 100%; border-radius: 4px; margin: 0 auto; }
    #memberModal .modal-right, #rebellionModal .modal-right { width: 100%; flex: 1; padding: 20px; overflow-y: auto; }
    
    #albumModal .modal-container { height: auto; max-height: 90vh; width: fit-content; min-width: 85vw;}
    #albumModalImg { width: auto; max-width: 100%; height: auto; max-height: 60vh; }
    #albumModalTitle { font-size: 1.3em; }
}