<!-- ROMANSQUALL OFFICIAL WEBSITE - PERFORMANCE OPTIMIZED -->
<style>
/* ========================================
   VARIABLES (V1 WHITE THEME)
   ======================================== */
:root {
    --bg-color: #ffffff;
    --text-color: #121212;
    --accent-color: #00bfca;
    --accent-secondary: #ff6bcb;
    --dark-grey: #1a1a1a;
    --font-heading: 'Syncopate', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
}

/* ========================================
   SMOOTH SCROLL + RESET
   ======================================== */
html {
    scroll-behavior: smooth;
}

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

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

/* ========================================
   CYBER BG - 最適化: アニメなし静的グリッド
   ======================================== */
.cyber-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 50%, #ffffff 100%);
    overflow: hidden;
    /* contain で描画範囲をブラウザに通知 */
    contain: strict;
}

.cyber-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        linear-gradient(rgba(0, 191, 202, 0.25) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 191, 202, 0.25) 2px, transparent 2px),
        linear-gradient(rgba(255, 107, 203, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 107, 203, 0.15) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    /* アニメ・フィルター削除 → 大幅に軽量化 */
}

/* cyber-lines / noise-overlay は非表示 */
.cyber-lines  { display: none !important; }
.noise-overlay { display: none !important; }

/* ========================================
   STICKY NAV
   ======================================== */
.sticky-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(5, 5, 16, 0.92);
    /* backdrop-filter 削除（重い） */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    z-index: 5000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-brand {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.9rem;
    color: #ffffff; /* 白背景じゃないので白が正しい */
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #ffffff;
}

.nav-links a:hover {
    color: var(--accent-color);
}

/* ========================================
   HERO SECTION
   ======================================== */
.hero-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 60px;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-section.has-image::before {
    background: rgba(0, 0, 0, 0.5);
}

.hero-content {
    z-index: 2;
    position: relative;
}

.hero-content h1 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 4rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(0, 191, 202, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.sub-title {
    font-family: var(--font-mono);
    letter-spacing: 8px;
    color: var(--accent-secondary);
    font-size: 1rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    animation: bounce 2s infinite;
    opacity: 0.5;
    color: #fff;
    z-index: 2;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* ========================================
   CONTENT SECTIONS
   ======================================== */
.content-section {
    padding: 6rem 5%;
    min-height: 80vh;
    /* fadeInUp 削除 → ページロード時の一括アニメジャンク解消 */
}

.alternate-bg {
    background: #f5f5f5;
    position: relative;
    overflow: hidden;
}

/* 静的グリッド（アニメなし） */
.alternate-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 191, 202, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 191, 202, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    /* animation: gridMove 削除 */
    pointer-events: none;
    z-index: 0;
}

.alternate-bg > * {
    position: relative;
    z-index: 1;
}

/* ========================================
   SECTION TITLE
   ======================================== */
.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
    display: table;
    margin-left: auto;
    margin-right: auto;
    /* will-change 削除（常時GPUレイヤー確保は逆効果） */
    color: #000;
}

.section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: var(--accent-secondary);
    margin: 10px auto 0;
}

/* ========================================
   PICKUP SECTION
   ======================================== */
.pickup-section {
    background: linear-gradient(135deg, rgba(0, 191, 202, 0.05) 0%, rgba(255, 0, 85, 0.05) 100%);
    border-top: 2px solid rgba(0, 191, 202, 0.3);
    border-bottom: 2px solid rgba(255, 0, 85, 0.3);
}

.pickup-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.pickup-card {
    background: #fff;
    border: 2px solid #ddd;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.pickup-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.pickup-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pickup-card .date {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.5rem;
}

.pickup-card .venue,
.pickup-card .title {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.pickup-card .description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-top: 1rem;
}

.pickup-card .category {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--accent-secondary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 3px;
    margin-bottom: 0.5rem;
}

/* ========================================
   NEWS
   ======================================== */
.news-list {
    max-width: 800px;
    margin: 0 auto;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

.news-row {
    display: flex;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: padding-left 0.2s ease;
}

.news-row:hover {
    padding-left: 0.5rem;
}

.news-date-col {
    min-width: 150px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: bold;
}

.news-info {
    flex: 1;
}

.news-cat {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: rgba(0, 191, 202, 0.2);
    color: var(--accent-color);
    border-radius: 3px;
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.news-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0.5rem 0;
    color: #121212; /* 修正: #fff → #121212（白背景で見えない問題を修正） */
    line-height: 1.4;
}

.news-desc {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
    margin-top: 0.5rem;
}

/* ========================================
   BIO
   ======================================== */
.bio-container {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    gap: 2rem;
    align-items: center;
}

.bio-image {
    width: 100%;
    max-width: 100%;
}

.bio-text p {
    margin-bottom: 1.5rem;
    color: #1a1a1a;
    text-align: justify;
}

/* ========================================
   LIVE
   ======================================== */
.live-table {
    max-width: 900px;
    margin: 0 auto;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

.live-row {
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--accent-color);
    transition: transform 0.2s ease, background 0.2s ease;
}

.live-row:hover {
    background: rgba(0, 191, 202, 0.05);
    transform: translateX(5px);
}

.live-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.live-date {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 0.3rem;
}

.live-title {
    font-size: 1.1rem;
    font-weight: normal;
    margin-bottom: 0.5rem;
    color: #000;
}

.live-venue {
    font-size: 1rem;
    color: #555;
    margin-bottom: 0.5rem;
}

.live-description {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.5rem;
    line-height: 1.5;
}

.live-notes {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.5rem;
}

.ticket-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.5rem;
    background: var(--accent-color);
    color: #000;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    align-self: flex-start;
}

.ticket-btn:hover {
    background: var(--accent-secondary);
    transform: translateY(-2px);
}

/* ========================================
   MOVIE
   ======================================== */
.movie-container {
    max-width: 900px;
    margin: 0 auto;
}

.main-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
    margin-bottom: 2rem;
    border: 1px solid #333;
}

.main-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.view-more-container {
    text-align: center;
    margin-top: 2rem;
}

.view-more-btn {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid var(--text-color);
    background: transparent;
    color: var(--text-color);
    font-family: var(--font-heading);
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 2px;
    transition: background 0.2s ease, color 0.2s ease;
}

.view-more-btn:hover {
    background: #000;
    color: #fff;
}

/* ========================================
   DISCOGRAPHY
   ======================================== */
.disco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

.disco-item {
    text-align: center;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.disco-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

.disco-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #888;
}

.disco-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.disco-btn {
    flex: 1;
    min-width: 100px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.streaming-btn {
    background: rgba(0, 191, 202, 0.15);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.streaming-btn:hover {
    background: var(--accent-color);
    color: #000;
}

.store-btn {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    border: 1px solid #4CAF50;
}

.store-btn:hover {
    background: #4CAF50;
    color: #fff;
}

/* ========================================
   CONTACT
   ======================================== */
.contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-desc {
    margin-bottom: 2rem;
    color: #333;
}

.simple-form input,
.simple-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #555;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    font-family: var(--font-body);
}

.simple-form input:focus,
.simple-form textarea:focus {
    outline: none;
    border-bottom-color: var(--accent-color);
}

.simple-form textarea {
    height: 100px;
    resize: vertical;
}

/* ========================================
   CTA BUTTON
   ======================================== */
.cta-btn {
    display: inline-block !important;
    padding: 12px 30px !important;
    background: #00bfca !important;
    color: #000 !important;
    text-decoration: none !important;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    transition: background 0.2s ease, transform 0.2s ease !important;
    border: 2px solid #00bfca !important;
    cursor: pointer;
    position: relative !important;
    z-index: 10 !important;
}

.cta-btn:hover {
    background: #ff0055 !important;
    color: #fff !important;
    border-color: #ff0055 !important;
    transform: translateY(-2px);
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    background: #121212;
    color: #fff;
    padding: 3rem 2rem 2rem;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-links h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.social-links a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    font-size: 0.9rem;
    color: #fff;
}

.social-links a:hover {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.copyright {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #666;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   SCROLLBAR
   ======================================== */
.news-list::-webkit-scrollbar,
.disco-grid::-webkit-scrollbar,
.live-table::-webkit-scrollbar { width: 6px; }

.news-list::-webkit-scrollbar-track,
.disco-grid::-webkit-scrollbar-track,
.live-table::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 3px; }

.news-list::-webkit-scrollbar-thumb,
.disco-grid::-webkit-scrollbar-thumb,
.live-table::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 3px; }

/* ========================================
   MOBILE
   ======================================== */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }

    .live-row { flex-direction: column; gap: 1rem; }

    .disco-grid {
        grid-template-columns: 1fr;
        max-height: 500px;
    }

    .news-list { max-height: 500px; }

    .news-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .news-date-col { min-width: auto; }

    .social-links {
        flex-direction: column;
        align-items: stretch;
    }

    .social-links a { justify-content: center; }

    .section-title { margin-bottom: 1rem !important; }
}

/* ========================================
   HAMBURGER (モバイルナビ)
   ======================================== */
.hamburger {
    display: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .hamburger { display: block; }

    .hamburger span {
        display: block;
        width: 25px;
        height: 2px;
        background: #fff;
        margin: 5px 0;
    }

    .nav-links {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background: #ffffff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        border-top: 1px solid #eee;
    }

    .nav-links.active { transform: translateX(0); }

    .nav-links a { color: #121212; }
}

/* ========================================
   JIMDO SAFE FIXES
   ======================================== */
body {
    background-color: #ffffff !important;
    color: #121212 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* hero-section を除外して背景画像が潰れないよう修正 */
main, header, nav, footer, aside {
    position: relative !important;
    z-index: 500 !important;
}

/* サイドバー・ポップアップ・ローディング非表示 */
.pickup-sidebar,
.social-sidebar,
.popup-overlay,
#loading-screen {
    display: none !important;
}

button, a.cta-btn, a.view-more-btn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 600 !important;
}

/* フェードイン（軽量版・1回のみ） */
.jimdo-custom-wrapper {
    animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
</style><!-- JIMDO RESCUE LAYOUT -->
<div class="jimdo-custom-wrapper">
    <div style="display:none;">
        <var>navigation</var> <var>sidebar</var> <var>content</var> <var>footer</var>
    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&amp;family=Share+Tech+Mono&amp;family=Noto+Sans+JP:wght@300;400;700&amp;display=swap" rel="stylesheet" />

    <div class="cyber-bg">
        <div class="cyber-grid"></div>
    </div>

    <header id="top" class="hero-section">
        <div class="hero-content">
            <h1 class="main-title" data-text="Romansquall">Romansquall</h1>
            <p class="sub-title">OFFICIAL WEBSITE</p>
        </div>
        <div class="scroll-indicator">SCROLL DOWN</div>
    </header>

    <main>
        <section id="pickup-info" class="content-section pickup-section">
            <h2 class="section-title">PICK UP INFORMATION</h2>
            <div class="pickup-grid" id="pickup-grid"></div>
        </section>

        <section id="news" class="content-section">
            <h2 class="section-title">NEWS</h2>
            <div class="news-list" id="news-container"></div>
        </section>

        <section id="bio" class="content-section alternate-bg">
            <h2 class="section-title">BIOGRAPHY</h2>
            <div class="bio-container" id="bio-container"></div>
        </section>

        <section id="live" class="content-section">
            <h2 class="section-title">LIVE</h2>
            <div class="live-table" id="live-container"></div>
        </section>

        <section id="movie" class="content-section alternate-bg">
            <h2 class="section-title">MOVIE</h2>
            <div class="movie-container">
                <div class="main-player">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/NdHw5-PZsCw?si=j6do_4N3GH9dXcHy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="allowfullscreen"></iframe>
                </div>
                <div class="view-more-container">
                    <a href="https://www.youtube.com/@romansquall_official" target="_blank" class="view-more-btn">VIEW MORE</a>
                </div>
            </div>
        </section>

        <section id="discography" class="content-section">
            <h2 class="section-title">DISCOGRAPHY</h2>
            <div class="disco-grid" id="disco-container"></div>
        </section>

        <section id="contact" class="content-section alternate-bg">
            <h2 class="section-title">CONTACT</h2>
            <div class="contact-form-wrapper">
                <p class="contact-desc">出演依頼・お問い合わせはこちらから</p>
                <form class="simple-form" action="https://formspree.io/f/xzdddjpr" method="post">
                    <input type="text" name="name" placeholder="NAME" required="" />
                    <input type="email" name="email" placeholder="EMAIL" required="" />
                    <textarea name="message" placeholder="MESSAGE" required=""></textarea>
                    <button type="submit" class="cta-btn">SEND MESSAGE</button>
                </form>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-links">
                <h3>FOLLOW US</h3>
                <div class="social-links">
                    <a href="https://x.com/Romansquall" target="_blank" title="X (Twitter)">X (Twitter)</a>
                    <a href="https://www.instagram.com/romansquall_official/" target="_blank" title="Instagram">Instagram</a>
                    <a href="https://www.youtube.com/@romansquall_official" target="_blank" title="YouTube">YouTube</a>
                    <a href="https://www.tiktok.com/@romansquall" target="_blank" title="TikTok">TikTok</a>
                </div>
                <h3 style="margin-top: 2rem;">MUSIC &amp; STORE</h3>
                <div class="social-links">
                    <a href="https://open.spotify.com/intl-ja/artist/5Ukia2jmOqs8cyhHxemZ6f" target="_blank" title="Spotify">Spotify</a>
                    <a href="https://romansquall.stores.jp/" target="_blank" title="Official Store">Official Store</a>
                </div>
            </div>
            <div class="copyright">© 2026 Romansquall. All Rights Reserved.</div>
        </div>
    </footer>
</div>

<script>
    //<![CDATA[
    const SITE_DATA = {
        profile: {
            mainTitle: "Romansquall",
            subTitle: "OFFICIAL WEBSITE",
            artistName: "Romansquall",
        },
        hero: {
            backgroundImage: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/romansquall-%E3%82%A2%E3%83%BC%E5%86%9920260203.jpg?t=1769407152"
        },
        biography: {
            image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/romansquall-%E3%82%A2%E3%83%BC%E5%86%9920260203.jpg?t=1769407152",
            text: [
                "2022年11月始動。前身バンドの活動終了後、楽曲を全て作成し直し新たな音楽を持ち再スタートした。",
                "どの枠にも囚われない新進気鋭の音楽は聴いた人間を魅了する。作詞曲を担当するDr.Kichomの楽曲とVo.辻村アリサの繊細かつダイナミックな歌唱とライブパフォーマンス、それに呼応するGt.おーしゃんとKey.ちゃぎのフレージングとパフォーマンスは時間を忘れるほど圧巻する。",
                "あえてジャンルをつけるなら「Neo power rock band」。一度対峙してしまえばその通り名に相応しい楽曲とライブを体感することだろう。大阪豊中から関西を中心に全国で活動中。"
            ]
        },
        news: [
            {
                date: "2026.03.22",
                title: "東京・大阪自主企画[Mushup Tunes!!]ゲストアーティスト解禁！",
                category: "LIVE",
                description: "Romansquall初の東阪自主企画[Mushup Tunes!!]のゲストアーティストを解禁！当日はチケット割引の「布教割」を実施。",
                featured: true,
                pickupImage: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A-1.jpg?t=1774241212"
            },
            {
                date: "2026.02.11",
                title: "配信シングル[シェキラブ!!]Music Video公開！",
                category: "INFO",
                description: "2026/2/11,22:00よりYoutube公式チャンネルにて[シェキラブ!!]Music Videoが公開！"
            },
            {
                date: "2026.02.03",
                title: "サブスク配信企画&東京・大阪にて自主企画開催決定！",
                category: "LIVE",
                description: "2026/2/10より全5弾にわたり新曲の配信が決定!それに伴い2026/5/15@下北沢MOSAiC、5/22@UMEDA Zeelaにて自主企画[Mashup Tunes!!]開催決定!",
                pickupImage: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/black-party-night-club-dj-flyer-1.jpg?t=1770145267"
            },
            {
                date: "2026.02.03",
                title: "配信シングル[シェキラブ!!]配信決定",
                category: "RELEASE",
                description: "2026/2/10,0:00より各サブスクリプションにて配信シングル[シェキラブ!!]が配信決定!"
            },
            {
                date: "2026.02.03",
                title: "公式ホームページリニューアルオープン",
                category: "INFO",
                description: "Romansquallの公式ホームページがリニューアルオープンしました。"
            }
        ],
        live: [
            {
                date: "2026.03.31 [tue]",
                venue: "大阪 ABENO ROCKTOWN",
                title: "STAR'Z_DASH!! vol.1",
                description: "w / LiverShot / and more...",
                ticketUrl: "https://livepocket.jp/e/vy8zp",
                notes: "開演 17:15予定　第２部のゲスト出演となります。 一般¥3,000- / 大学生¥2,500- / 高校生¥1,500- / 中学生以下無料"
            },
            {
                date: "2026.04.04 [sat]",
                venue: "東京 渋谷９会場サーキットイベント",
                title: "Girl's UP!!!&ファミメ!pre. \"LUPINUS ROCK FESTIVAL 2026\"",
                description: "w / and more...",
                ticketUrl: "https://eplus.jp/sf/detail/4467330001-P0030001",
                notes: "開場 11:30 / 開演 12:00　前売¥5,300- / 当日¥5,800-"
            },
            {
                date: "2026.04.07 [tue]",
                venue: "大阪 UMEDA Zeela",
                title: "MAGICHOUR",
                description: "w / OXU / チセツナガラ / Shaftray / カレラ",
                ticketUrl: "https://forms.gle/chGrF4cMquCEmUAK6",
                notes: "開場 18:00 / 開演 18:30　チケット価格¥2,500-"
            },
            {
                date: "2026.04.15 [wed]",
                venue: "大阪 RUIDO",
                title: "RUIDO Presents. L-1グランプリ2026",
                description: "w / and more...",
                ticketUrl: "https://eplus.jp/sf/detail/4496710001",
                notes: "開場 18:00 / 開演 18:30"
            },
            {
                date: "2026.05.15 [fri]",
                venue: "東京 下北沢MOSAiC",
                title: "Romansquall pre. Mushup Tunes!!",
                description: "w / ASH FRAST / MANATY / Qtwins",
                ticketUrl: "https://forms.gle/chGrF4cMquCEmUAK6",
                notes: "開場 18:00 / 開演 18:30 チケット価格¥3,500-",
                pickup: true
            },
            {
                date: "2026.05.17 [sun]",
                venue: "愛知 豊橋２会場サーキットイベント",
                title: "SEEKER FES.2026THC",
                description: "w / 愛探眼影 / LUMiRiSE / 天女神樂 / HUMANDRIVE / 他多数出演",
                ticketUrl: "https://tiget.net/events/458016",
                notes: "開場 12:00 / 開演 12:30 前売り¥4,200- / 当日¥4,700-"
            },
            {
                date: "2026.05.22 [fri]",
                venue: "大阪 UMEDA Zeela",
                title: "Romansquall pre. Mushup Tunes!!",
                description: "w / Dualscape / Disconnect Cendrillon / mm limit",
                ticketUrl: "https://forms.gle/chGrF4cMquCEmUAK6",
                notes: "開場 18:30 / 開演 19:00 チケット価格¥3,500-",
                pickup: true
            },
            {
                date: "2026.06.26 [fri]",
                venue: "神奈川某所",
                title: "イベント詳細未定",
                description: "w / and more...",
                ticketUrl: "https://forms.gle/chGrF4cMquCEmUAK6",
                notes: "開場 TBA / 開演 TBA "
            },
            {
                date: "2026.06.28 [sun]",
                venue: "愛知某所",
                title: "イベント詳細未定",
                description: "w / and more...",
                ticketUrl: "",
                notes: "開場 TBA / 開演 TBA "
            }
        ],
        discography: [
            {
                title: "8th single『シェキラブ!!』",
                meta: "2026.02.10 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/shaki.png?t=1770280956",
                description: "【収録曲】<br>シェキラブ!!",
                streamingUrl: "https://linkcloud.mu/8e6ebcdd",
                storeUrl: ""
            },
            {
                title: "1st mini album『Q.E.D.』",
                meta: "2025.11.14 / Release",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/qed.jpg?t=1769406955",
                description: "【収録曲】<br>1. 1.2.3!<br>2. secret<br>3. 暴走中毒<br>4. DOWN<br>5. アンチリコール<br>6. NOID!!<br>7. STARTEND",
                streamingUrl: "https://linkcloud.mu/73abff04",
                storeUrl: ""
            },
            {
                title: "2nd E.P.『twilight』",
                meta: "2024.11.06 Release",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/twilight.jpg?t=1769406999",
                description: "【収録曲】<br>1. StarteT<br>2. 唯我独奏<br>3. STORY TELLER<br>4. shooting star<br>5. with (out) U",
                streamingUrl: "https://linkcloud.mu/6067ece0",
                storeUrl: "https://romansquall.stores.jp/items/66a63e29ccd49a1175c46595"
            },
            {
                title: "7th single『summer dream』",
                meta: "2024.09.15 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/summer.jpg?t=1769406986",
                description: "1. summer dream",
                streamingUrl: "https://linkcloud.mu/194308af",
                storeUrl: ""
            },
            {
                title: "1st E.P.『sunrise』",
                meta: "2024.04.01 Release",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/sunrise.png?t=1769406992",
                description: "【収録曲】<br>1. day break<br>2. dance in the dark?<br>3. 負正解<br>4. ココロマカセ<br>5. with U",
                streamingUrl: "https://linkcloud.mu/b210ef0c",
                storeUrl: ""
            },
            {
                title: "6th single『kaleidoscope』",
                meta: "2024.01.11 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/kaleido.jpg?t=1769406946",
                description: "1. kaleidoscope",
                streamingUrl: "https://linkcloud.mu/73798e77",
                storeUrl: "https://romansquall.stores.jp/items/660a28e96c3f1e048d565525"
            },
            {
                title: "5th single『Starry,Starry!』",
                meta: "2024.01.06 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/starry.jpg?t=1769406980",
                description: "1. Starry,Starry!",
                streamingUrl: "https://linkcloud.mu/cbe1476b",
                storeUrl: ""
            },
            {
                title: "4th single『ハナウラナイ』",
                meta: "2023.08.19 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/hanauranai.jpg?t=1769406934",
                description: "1. ハナウラナイ",
                streamingUrl: "https://linkcloud.mu/8e9058f5",
                storeUrl: ""
            },
            {
                title: "4th single『shining day』",
                meta: "2023.06.16 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/shining.png?t=1769406972",
                description: "1. shining day",
                streamingUrl: "https://linkcloud.mu/644f5cca",
                storeUrl: ""
            },
            {
                title: "3rd single『春が来る、息を吸う』",
                meta: "2023.04.01 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/harugakuru.png?t=1769406941",
                description: "1. 春が来る、息を吸う<br>2. Flowers",
                streamingUrl: "https://linkcloud.mu/42892da5",
                storeUrl: ""
            },
            {
                title: "1st single『ROADSHOW』",
                meta: "2022.11.11 / Release",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/roadshow.jpg?t=1769406961",
                description: "1. さよならのあとに<br>2. i-21<br>3.覚えていて、忘れるまで",
                streamingUrl: "",
                storeUrl: "https://romansquall.stores.jp/items/636b96a7f5197377e887ab67"
            },
            {
                title: "2nd single『覚えていて、忘れるまで』",
                meta: "2022.10.20 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/oboeteite.png?t=1769406951",
                description: "1. 覚えていて、忘れるまで",
                streamingUrl: "https://linkcloud.mu/0ee99239",
                storeUrl: ""
            },
            {
                title: "1st single『さよならのあとに』",
                meta: "2022.09.29 / Digital",
                image: "https://u.jimcdn.com/cms/o/s0a201d7d35385009/userlayout/img/sayonara.jpg?t=1769406967",
                description: "1. さよならのあとに",
                streamingUrl: "https://linkcloud.mu/b1478cb2",
                storeUrl: ""
            }
        ],
        movie: { youtubeId: "A69_LaZSRrk" },
        social: {
            twitter: "https://x.com/Romansquall",
            instagram: "https://www.instagram.com/romansquall_official/",
            youtube: "https://www.youtube.com/@romansquall_official",
            tiktok: "https://www.tiktok.com/@romansquall",
            spotify: "https://open.spotify.com/intl-ja/artist/5Ukia2jmOqs8cyhHxemZ6f",
            store: "https://romansquall.stores.jp/"
        }
    };

    document.addEventListener('DOMContentLoaded', () => {
        if (typeof SITE_DATA === 'undefined') return;

        // BIO
        const bioC = document.getElementById('bio-container');
        if (bioC) {
            bioC.innerHTML = `<div class="bio-image"><img src="${SITE_DATA.biography.image}" style="width:100%;" loading="lazy"></div><div class="bio-text">${SITE_DATA.biography.text.map(p => `<p>${p}</p>`).join('')}</div>`;
        }

        // NEWS
        const newsContainer = document.getElementById('news-container');
        if (newsContainer) {
            newsContainer.innerHTML = SITE_DATA.news.map(item => `
            <div class="news-row">
                <div class="news-date-col">${item.date}</div>
                <div class="news-info">
                    <span class="news-cat">${item.category}</span>
                    <h3 class="news-title">${item.title}</h3>
                    <p class="news-desc">${item.description}</p>
                    ${item.pickupImage ? `<div style="margin-top:1rem;"><img src="${item.pickupImage}" alt="${item.title}" loading="lazy" style="width:100%;max-width:500px;border-radius:5px;object-fit:contain;"></div>` : ''}
                </div>
            </div>`).join('');
        }

        // LIVE
        const liveContainer = document.getElementById('live-container');
        if (liveContainer) {
            liveContainer.innerHTML = SITE_DATA.live.map(item => `
            <div class="live-row">
                <div class="live-info">
                    <div class="live-date">${item.date}</div>
                    <div class="live-title">${item.title}</div>
                    <div class="live-venue">${item.venue}</div>
                    ${item.description ? `<div class="live-description">${item.description}</div>` : ''}
                    ${item.notes ? `<div class="live-notes">${item.notes}</div>` : ''}
                    ${item.ticketUrl ? `<a href="${item.ticketUrl}" target="_blank" class="ticket-btn">チケット予約</a>` : ''}
                </div>
            </div>`).join('');
        }

        // DISCOGRAPHY
        const discoContainer = document.getElementById('disco-container');
        if (discoContainer) {
            discoContainer.innerHTML = SITE_DATA.discography.map(item => `
            <div class="disco-item">
                <div class="disco-img"><img src="${item.image}" alt="${item.title}" loading="lazy" style="width:100%;height:100%;object-fit:cover;"></div>
                <h3 class="disco-title">${item.title}</h3>
                <p class="disco-meta">${item.meta}</p>
                <div class="disco-buttons">
                    ${item.streamingUrl ? `<a href="${item.streamingUrl}" target="_blank" class="disco-btn streaming-btn"><i class="fas fa-play"></i> 視聴</a>` : ''}
                    ${item.storeUrl ? `<a href="${item.storeUrl}" target="_blank" class="disco-btn store-btn"><i class="fas fa-shopping-cart"></i> 購入</a>` : ''}
                </div>
            </div>`).join('');
        }

        // PICKUP
        const pickupContainer = document.getElementById('pickup-grid');
        if (pickupContainer) {
            let pickups = SITE_DATA.live.filter(i => i.pickup).slice(0, 2);
            if (pickups.length === 0 && SITE_DATA.live.length > 0) pickups.push(SITE_DATA.live[0]);
            const hot = SITE_DATA.news.find(i => i.featured) || SITE_DATA.news[0];
            let h = '';
            if (hot) {
                h += `<div class="pickup-card">
                    ${hot.pickupImage ? `<div style="display:flex;justify-content:center;margin-bottom:1rem;"><img src="${hot.pickupImage}" alt="${hot.title}" loading="lazy" style="width:100%;max-width:500px;aspect-ratio:4/3;object-fit:contain;border-radius:5px;"></div>` : ''}
                    <h3>🔥 HOT NEWS</h3>
                    <span class="category">${hot.category}</span>
                    <div class="date">${hot.date}</div>
                    <div class="title">${hot.title}</div>
                    <div class="description">${hot.description}</div>
                </div>`;
            }
            pickups.forEach(p => {
                h += `<div class="pickup-card">
                    ${p.pickupImage ? `<div style="display:flex;justify-content:center;margin-bottom:1rem;"><img src="${p.pickupImage}" alt="${p.title}" loading="lazy" style="width:100%;max-width:500px;aspect-ratio:4/3;object-fit:contain;border-radius:5px;"></div>` : ''}
                    <h3>🎸 PICK UP LIVE</h3>
                    <div class="date">${p.date}</div>
                    <div class="venue">${p.venue}</div>
                    <div class="title">${p.title}</div>
                    <div class="description">${p.description}</div>
                    ${p.ticketUrl ? `<a href="${p.ticketUrl}" target="_blank" class="cta-btn" style="text-decoration:none;margin-top:1rem;display:inline-block;font-size:0.9rem;">チケットご予約</a>` : ''}
                </div>`;
            });
            pickupContainer.innerHTML = h;
        }

        // HERO BG
        if (SITE_DATA.hero && SITE_DATA.hero.backgroundImage) {
            const hs = document.querySelector('.hero-section');
            if (hs && SITE_DATA.hero.backgroundImage.trim() !== '') {
                hs.style.backgroundImage = `url(${SITE_DATA.hero.backgroundImage})`;
                hs.classList.add('has-image');
            }
        }

        // スクロールアニメ（軽量版: passive + rAF）
        const sectionTitles = Array.from(document.querySelectorAll('.section-title'));
        const vh = window.innerHeight;
        const startScale = vh * 0.9;
        const endScale   = vh * 0.4;
        const scaleRange = startScale - endScale;
        let ticking = false;
        window.addEventListener('scroll', () => {
            if (!ticking) {
                requestAnimationFrame(() => {
                    sectionTitles.forEach(title => {
                        const top = title.getBoundingClientRect().top;
                        if (top > startScale) {
                            title.style.transform = 'scale(1.5)';
                        } else if (top < endScale) {
                            title.style.transform = 'scale(1)';
                        } else {
                            const p = (startScale - top) / scaleRange;
                            title.style.transform = `scale(${1.5 - 0.5 * Math.max(0, Math.min(1, p))})`;
                        }
                    });
                    ticking = false;
                });
                ticking = true;
            }
        }, { passive: true });
    });
    //
</script>