/* =========================================
           1. Base & Variables (Dark Mode)
           ========================================= */
        :root {
            --bg-body: #050505;
            --bg-content: #111111;
            --bg-card: #1a1a1a;
            --text-main: #ffffff;
            --text-sub: #bbbbbb;
            --accent: #00ff84; /* ネオンライトグリーン */
            --border-color: #333333;
            --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
            --border-radius: 16px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-base);
            background-color: var(--bg-body);
            color: var(--text-main);
            overflow-x: hidden;
            line-height: 1.7;
        }

        a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
        ul { list-style: none; }
        img { max-width: 100%; display: block; }

        /* =========================================
           2. Background Moving Text (Marquee)
           ========================================= */
        .marquee-wrapper {
            position: fixed;
            bottom: -2vh;
            left: 0;
            width: 100%;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
            display: flex;
            align-items: flex-end;
        }

        .marquee-content {
            display: flex;
            white-space: nowrap;
            /* ▼ 速度を80秒に変更 */
            animation: scrollText 80s linear infinite;
        }

        .marquee-text {
            font-size: 15vw;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.04);
            padding-right: 50px;
            text-transform: uppercase;
            line-height: 1;
        }

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

        /* =========================================
           3. Layout Wrapper
           ========================================= */
        .layout-wrapper {
            display: flex;
            justify-content: center;
            gap: 60px;
            max-width: 1200px;
            margin: 0 auto;
            min-height: 100vh;
        }

        /* =========================================
           4. Sidebar
           ========================================= */
        .sidebar {
            width: 250px;
            position: sticky;
            top: 40px;
            height: fit-content;
            padding-top: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .sidebar-logo {
            width: 100%;
            max-width: 240px;
            height: auto;
        }

        /* =========================================
           5. Main Content
           ========================================= */
        .main-content {
            width: 100%;
            max-width: 400px;
            background: var(--bg-content);
            border-left: 1px solid #222;
            border-right: 1px solid #222;
            box-shadow: 0 0 50px rgba(0,0,0,0.5);
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* --- MV Section --- */
        .mv {
            height: 350px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-image: url('https://ai.netoco.jp/wp-content/uploads/lp/img/mvbg-programing.jpg');
            background-size: cover;
            background-position: center;
        }
        .mv::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
        
        /* --- Hamburger --- */
        .hamburger-btn {
            position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
            background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px);
            border-radius: 8px; cursor: pointer; z-index: 100;
            display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
            border: 1px solid rgba(255,255,255,0.3);
        }
        .hamburger-btn span { width: 20px; height: 2px; background: #fff; transition: all 0.3s; }
        .hamburger-btn.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .hamburger-btn.active span:nth-child(2) { opacity: 0; }
        .hamburger-btn.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

        .menu-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.9); backdrop-filter: blur(10px);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 90;
        }
        .menu-overlay.active { opacity: 1; pointer-events: auto; }
        .menu-overlay a { font-size: 1.2rem; font-weight: bold; margin: 15px 0; color: #fff; }

        /* --- Catchphrase --- */
        .catchphrase {
            padding: 40px 25px;
            text-align: left;
            background: var(--bg-content);
        }
        .catchphrase h2 {
            font-size: 1.6rem;
            line-height: 1.5;
            font-weight: 800;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #fff, #aaa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* --- Section Styles (Updated for BIG Title) --- */
        .section {
            padding: 60px 25px; /* 余白を少し広げました */
            border-top: 1px solid #222;
        }

        /* ▼ 新しいスクール名用のスタイル */
        .school-title-area {
            margin-bottom: 30px;
        }
        .school-number {
            font-size: 4rem; /* 巨大な数字 */
            font-weight: 900;
            line-height: 0.8;
            color: transparent; /* 中抜き文字にする */
            -webkit-text-stroke: 1px var(--accent); /* 縁取り */
            display: block;
            margin-bottom: 5px;
        }
        .school-name {
            font-size: 2.2rem; /* スクール名を大きく */
            font-weight: 800;
            color: #fff;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .section-sub-heading {
            font-size: 1rem;
            color: var(--text-sub);
            margin-bottom: 30px;
            font-weight: normal;
            display: block;
        }

        /* Tags Area */
        .tags-container {
            display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px;
        }
        .tag {
            font-size: 0.75rem; padding: 6px 12px; border: 1px solid var(--border-color);
            border-radius: 20px; color: var(--text-sub); background: rgba(255,255,255,0.05);
        }

        /* Boxes */
        .feature-box, .price-box {
            background: var(--bg-card); padding: 25px; border-radius: var(--border-radius);
            margin-bottom: 30px; border: 1px solid #222;
        }
        .feature-list li {
            margin-bottom: 15px; padding-left: 25px; position: relative; font-size: 0.95rem; font-weight: 500;
        }
        .feature-list li::before {
            content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: bold;
        }
        
        .price-item {
            margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #333;
        }
        .price-item:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 10px; }
        .price-plan { font-weight: bold; color: #fff; display: block; margin-bottom: 5px; }
        .price-val { font-size: 1.1rem; color: var(--accent); font-weight: bold; }
        .price-note { font-size: 0.8rem; color: var(--text-sub); margin-left: 10px; }
        
        .campaign-text {
            display: block; margin-top: 15px; color: #ff4d4d; font-weight: bold;
            font-size: 0.95rem; text-align: center;
            background: rgba(255, 77, 77, 0.1); padding: 10px; border-radius: 8px;
        }

        /* CTA Button */
        .cta-wrapper { text-align: center; margin-top: 40px; }
        .official-btn-link a {
            display: block; width: 100%; background: var(--accent);
            color: #000; padding: 18px 0; border-radius: 50px;
            font-weight: 800; font-size: 1rem; text-align: center;
            box-shadow: 0 0 20px rgba(0, 255, 132, 0.4); transition: all 0.3s;
        }
        .official-btn-link a:hover {
            background: #fff; box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); transform: scale(1.02);
        }

        /* Footer */
        .site-footer {
            background: #000; padding: 40px 20px 60px; text-align: center;
            border-top: 1px solid #222; margin-top: auto;
        }
        .footer-logo { width: 120px; margin: 0 auto 20px; opacity: 0.7; }
        .policy-link { font-size: 0.75rem; color: #666; border-bottom: 1px solid #444; }

        /* Utility: Animation */
        .fade-up {
            opacity: 0; transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .fade-up.visible { opacity: 1; transform: translateY(0); }


        /* =========================================
           6. Responsive (Mobile)
           ========================================= */
        @media (max-width: 768px) {
            .layout-wrapper { flex-direction: column; align-items: center; gap: 0; }
            .sidebar {
                position: relative; width: 100%; top: 0; padding: 15px; background: #000;
                flex-direction: row; justify-content: center; border-bottom: 1px solid #222; z-index: 200;
            }
            .sidebar-logo { max-width: 160px; }
            .main-content { border: none; box-shadow: none; max-width: 100%; }
            .marquee-wrapper { bottom: 0; }
            .marquee-text { font-size: 20vw; }
            
            /* スマホ時のスクール名調整 */
            .school-number { font-size: 3.5rem; }
            .school-name { font-size: 2rem; }
        }