/*
Theme Name: Nexara
Author: APEX Llc
Version: 0.0.1
*/

/* =========================================
CSS変数定義
========================================= */
:root {
    --bg               : #0f172a;
    --bg-sub           : #1e293b;
    --text             : #f8fafc;
    --text-light       : #94a3b8;
    --white            : #ffffff;
    --primary          : #6366f1; /* Indigo */
    --secondary        : #ec4899; /* Pink */
    --accent           : #06b6d4; /* Cyan - 追加アクセント */
    --danger           : #ef4444;
    --gray             : #64748b;
    --border           : #334155;
    --bg-feature       : rgba(30, 41, 59, 0.7);
    --border-feature   : rgba(99, 102, 241, 0.3);

    --nav-height       : 80px;
    --transition-speed : 0.8s;
    --ease-custom      : cubic-bezier(0.22, 1, 0.36, 1); /* よりキレのあるイージング */
    --glass-bg         : rgba(15, 23, 42, 0.6);
    --glass-border     : rgba(255, 255, 255, 0.1);
}

/* =========================================
   Reset & Base Styles
   ========================================= */
*, *::before, *::after {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

body {
    font-family      : 'Helvetica Neue', Arial, sans-serif;
    background-color : var(--bg);
    color            : var(--text);
    overflow         : hidden; /* メインスクロール禁止 */
    height           : 100vh;
    height           : 100dvh;
    width            : 100%;
    line-height      : 1.6;
}

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

ul {
    list-style : none;
}

button, input, textarea {
    font-family : inherit;
}

/* =========================================
   Loading Screen Styles
   ========================================= */
#loading-screen {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    z-index         : 99999;
    background      : linear-gradient(135deg, var(--primary), var(--secondary), var(--primary));
    background-size : 200% 200%;
    animation       : gradientFlow 3s ease infinite;
    display         : flex;
    justify-content : center;
    align-items     : center;
    transition      : opacity 0.8s ease, visibility 0.8s ease;
}

#loading-screen.hidden {
    opacity        : 0;
    visibility     : hidden;
    pointer-events : none;
}

@keyframes gradientFlow {
    0% {
        background-position : 0% 50%;
    }
    50% {
        background-position : 100% 50%;
    }
    100% {
        background-position : 0% 50%;
    }
}

.loading-logo-wrapper {
    animation : blinkLoop 0.8s ease-in-out infinite alternate 0.6s;
}

.loading-logo-wrapper img {
    width     : 200px;
    display   : block;
    animation : scaleDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes scaleDown {
    0% {
        transform : scale(4);
        opacity   : 0;
    }
    10% {
        opacity : 1;
    }
    100% {
        transform : scale(1);
        opacity   : 1;
    }
}

@keyframes blinkLoop {
    0% {
        opacity   : 1;
        transform : scale(1);
    }
    100% {
        opacity   : 0.4;
        transform : scale(0.95);
    }
}


/* =========================================
   Layout Structure
   ========================================= */
.bg-gradient-circle {
    position      : fixed;
    border-radius : 50%;
    filter        : blur(80px);
    z-index       : -1;
    opacity       : 0.4;
    animation     : float 10s infinite ease-in-out alternate;
}

.bg-1 {
    width      : 400px;
    height     : 400px;
    background : var(--primary);
    top        : -100px;
    left       : -100px;
}

.bg-2 {
    width           : 300px;
    height          : 300px;
    background      : var(--secondary);
    bottom          : -50px;
    right           : -50px;
    animation-delay : -5s;
}

@keyframes float {
    0% {
        transform : translate(0, 0);
    }
    100% {
        transform : translate(30px, 50px);
    }
}

#main-viewport {
    width      : 100%;
    height     : 100vh;
    height     : 100dvh;
    transition : transform var(--transition-speed) var(--ease-custom);
}

section {
    width    : 100%;
    height   : 100vh;
    height   : 100dvh;
    position : relative;
    overflow : hidden;
}

/* 汎用スクロールコンテナ */
.section-inner {
    width           : 100%;
    height          : 100%;
    padding         : var(--nav-height) 2rem 2rem;
    display         : flex;
    justify-content : center;
    align-items     : center;

    .content-scrollable {
        width              : 100%;
        max-width          : 1200px;
        max-height         : 100%;
        overflow-y         : auto;
        display            : flex;
        flex-direction     : column;
        justify-content    : center;
        align-items        : center;
        /* デフォルトスクロールバー非表示 */

        &::-webkit-scrollbar {
            display : none;
        }

        -ms-overflow-style : none;
        scrollbar-width    : none;
    }
}

/* スマホ向けのスクロール調整（タイトル切れ防止） */
@media (max-width : 768px) {
    .section-inner .content-scrollable {
        justify-content : flex-start; /* コンテンツを上詰めに */
        padding-top     : 4rem; /* ヘッダー下の余白確保 */
        padding-bottom  : 6rem; /* 下部余白確保 */
    }
}

/* =========================================
   Navigation & UI Controls
   ========================================= */
.header {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : var(--nav-height);
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 0 2rem;
    z-index         : 1000;
    background      : rgba(15, 23, 42, 0.8);
    backdrop-filter : blur(10px);
    border-bottom   : 1px solid var(--glass-border);

    .logo img {
        height  : 40px;
        display : block;
    }

    .desktop-nav {
        display     : flex;
        gap         : 2rem;
        align-items : center;

        li a {
            font-weight    : 500;
            font-size      : 0.9rem;
            letter-spacing : 0.05em;
            position       : relative;

            &:not(.btn-nav)::after {
                content    : '';
                position   : absolute;
                bottom     : -5px;
                left       : 0;
                width      : 0%;
                height     : 2px;
                background : var(--primary);
                transition : width 0.3s ease;
            }

            &:not(.btn-nav):hover::after,
            &:not(.btn-nav).active::after {
                width : 100%;
            }

            &:not(.btn-nav).active {
                color : var(--primary);
            }
        }

        li a.btn-nav {
            background    : var(--primary);
            color         : var(--white);
            padding       : 0.6rem 1.5rem;
            border-radius : 50px;
            border        : 1px solid var(--primary);
            transition    : all 0.3s ease;
            box-shadow    : 0 4px 10px rgba(99, 102, 241, 0.3);
            font-weight   : bold;
        }

        li a.btn-nav:hover {
            background   : var(--secondary);
            border-color : var(--secondary);
            transform    : translateY(-2px);
            box-shadow   : 0 6px 15px rgba(236, 72, 153, 0.4);
        }

        @media (max-width : 900px) {
            display : none;
        }
    }
}

/* ページ制御ボタン */
.page-controls {
    position       : fixed;
    right          : 2rem;
    top            : 50%;
    transform      : translateY(-50%);
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
    z-index        : 1000;

    button {
        width           : 50px;
        height          : 50px;
        border-radius   : 50%;
        border          : 1px solid var(--border);
        background      : var(--bg-sub);
        color           : var(--white);
        cursor          : pointer;
        transition      : all 0.3s ease;
        display         : flex;
        align-items     : center;
        justify-content : center;

        &:hover {
            background   : var(--primary);
            border-color : var(--primary);
            box-shadow   : 0 0 15px var(--primary);
        }

        svg {
            width  : 24px;
            height : 24px;
            fill   : currentColor;
        }
    }

    @media (max-width : 768px) {
        right : 1rem;
        button {
            width      : 40px;
            height     : 40px;
            background : rgba(30, 41, 59, 0.8);
        }
    }
}

.indicators {
    position       : fixed;
    left           : 2rem;
    top            : 50%;
    transform      : translateY(-50%);
    display        : flex;
    flex-direction : column;
    gap            : 1.5rem;
    z-index        : 100;

    .dot {
        width         : 10px;
        height        : 10px;
        background    : var(--gray);
        border-radius : 50%;
        cursor        : pointer;
        transition    : all 0.3s ease;
        position      : relative;

        &.active {
            background : var(--secondary);
            box-shadow : 0 0 10px var(--secondary);
            transform  : scale(1.2);

            &::before {
                content       : '';
                position      : absolute;
                top           : -5px;
                left          : -5px;
                width         : 20px;
                height        : 20px;
                border        : 1px solid var(--secondary);
                border-radius : 50%;
            }
        }
    }

    @media (max-width : 768px) {
        display : none;
    }
}

.mobile-menu-btn {
    display        : none;
    flex-direction : column;
    gap            : 6px;
    background     : none;
    border         : none;
    cursor         : pointer;
    z-index        : 1001;

    span {
        display    : block;
        width      : 25px;
        height     : 2px;
        background : var(--white);
        transition : 0.3s;
    }

    &.open span:nth-child(1) {
        transform : rotate(45deg) translate(5px, 6px);
    }

    &.open span:nth-child(2) {
        opacity : 0;
    }

    &.open span:nth-child(3) {
        transform : rotate(-45deg) translate(5px, -6px);
    }

    @media (max-width : 900px) {
        display : flex;
    }
}

.mobile-nav-overlay {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100vh;
    background      : var(--bg);
    z-index         : 999;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    opacity         : 0;
    pointer-events  : none;
    transition      : opacity 0.4s ease;

    &.active {
        opacity        : 1;
        pointer-events : auto;
    }

    li {
        margin : 1.5rem 0;

        a {
            font-size   : 1.5rem;
            font-weight : bold;

            &.active {
                color : var(--secondary);
            }
        }
    }
}

/* =========================================
   Section 1: Hero Area
   ========================================= */
#hero {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
    overflow        : hidden;
    background      : linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)),
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 255, 255, 0.03) 50px, rgba(255, 255, 255, 0.03) 51px);
}

.hero-deco-line {
    position   : absolute;
    top        : 20%;
    right      : -10%;
    width      : 60%;
    height     : 2px;
    background : var(--secondary);
    transform  : rotate(-15deg);
    opacity    : 0;
    box-shadow : 0 0 15px var(--secondary);
}

#hero.active .hero-deco-line {
    animation : lineSlash 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.5s;
}

.hero-visual {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 70vw;
    height    : 100vh;
    z-index   : 1;
    clip-path : polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    overflow  : hidden;
    opacity   : 0;
    transform : translateX(-50px);
}

#hero.active .hero-visual {
    animation : visualEnter 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-visual img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    filter     : brightness(0.6) contrast(1.2) saturate(1.2);
    transform  : scale(1.1);
    transition : transform 10s ease;
}

.visual-overlay {
    position       : absolute;
    top            : 0;
    left           : -100%;
    width          : 50%;
    height         : 100%;
    background     : linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform      : skewX(-20deg);
    pointer-events : none;
}

#hero.active .visual-overlay {
    animation : shimmer 2s ease-in-out infinite 1s;
}

.hero-content-layer {
    position        : relative;
    z-index         : 10;
    width           : 100%;
    height          : 100%;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : flex-end;
    text-align      : right;
    padding-right   : 10vw;
    padding-left    : 5vw;
    pointer-events  : none;

    &::before {
        content     : '2026';
        position    : absolute;
        top         : 50%;
        left        : 5%;
        font-size   : 30vw;
        font-weight : 900;
        color       : rgba(255, 255, 255, 0.03);
        line-height : 0;
        z-index     : -1;
        transform   : translateY(-50%);
    }
}

.hero-content-layer > * {
    pointer-events : auto;
}

.hero-date-group {
    margin-bottom : 2rem;
    background    : rgba(15, 23, 42, 0.8);
    border        : 1px solid var(--border);
    padding       : 1.5rem 3rem;
    border-radius : 0;
    border-right  : 6px solid var(--secondary);
    position      : relative;
    opacity       : 0;
    transform     : translateX(100px);
    clip-path     : polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}

#hero.active .hero-date-group {
    animation : slideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

.hero-date-large {
    display        : block;
    font-family    : 'Arial Black', sans-serif;
    font-weight    : 900;
    font-size      : clamp(3rem, 6vw, 5rem);
    line-height    : 0.9;
    color          : var(--white);
    text-shadow    : 4px 4px 0px var(--primary);
    letter-spacing : -0.05em;
}

.hero-day {
    display        : block;
    font-size      : clamp(1rem, 2vw, 1.5rem);
    font-weight    : bold;
    color          : var(--accent);
    letter-spacing : 0.3em;
    margin-top     : 0.5rem;
    text-transform : uppercase;
}

.hero-text-group {
    margin-top : 1rem;
}

.hero-title {
    font-size      : clamp(2.5rem, 7vw, 6rem);
    font-weight    : 900;
    line-height    : 1;
    margin-bottom  : 2rem;
    color          : var(--white);
    text-transform : uppercase;
    display        : flex;
    flex-direction : column;
    align-items    : flex-end;
}

.hero-title span {
    display  : block;
    overflow : hidden;
}

.hero-title span i {
    display    : block;
    font-style : normal;
    transform  : translateY(100%);
    opacity    : 0;
}

.hero-title .line-2 {
    color               : transparent;
    -webkit-text-stroke : 2px var(--white);
}

#hero.active .hero-title .line-1 i {
    animation : textReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.5s;
}

#hero.active .hero-title .line-2 i {
    animation : textReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.7s;
}

.hero-desc {
    color         : var(--text-light);
    font-size     : 1.1rem;
    max-width     : 500px;
    margin-left   : auto;
    margin-bottom : 2.5rem;
    line-height   : 1.8;
    opacity       : 0;
    transform     : translateY(20px);
}

#hero.active .hero-desc {
    animation : fadeInUp 0.8s ease forwards 0.9s;
}

.hero-btn {
    display        : inline-block;
    padding        : 1.2rem 4rem;
    background     : var(--white);
    color          : var(--bg);
    font-weight    : 900;
    font-size      : 1.2rem;
    text-transform : uppercase;
    letter-spacing : 0.1em;
    position       : relative;
    z-index        : 1;
    overflow       : hidden;
    transition     : all 0.3s;
    clip-path      : polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    opacity        : 0;
}

#hero.active .hero-btn {
    animation : fadeInUp 0.8s ease forwards 1.1s;
}

.hero-btn::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 0%;
    height     : 100%;
    background : var(--secondary);
    z-index    : -1;
    transition : width 0.3s ease;
}

.hero-btn:hover {
    color : var(--white);
}

.hero-btn:hover::before {
    width : 100%;
}

@keyframes visualEnter {
    0% {
        opacity   : 0;
        clip-path : polygon(0 0, 0 0, 0 100%, 0 100%);
        transform : translateX(-100px);
    }
    100% {
        opacity   : 1;
        clip-path : polygon(0 0, 80% 0, 100% 100%, 0% 100%);
        transform : translateX(0);
    }
}

@keyframes shimmer {
    0% {
        left    : -100%;
        opacity : 0;
    }
    50% {
        opacity : 1;
    }
    100% {
        left    : 200%;
        opacity : 0;
    }
}

@keyframes slideInRight {
    0% {
        opacity   : 0;
        transform : translateX(100px) skewX(-10deg);
    }
    100% {
        opacity   : 1;
        transform : translateX(0) skewX(0);
    }
}

@keyframes textReveal {
    0% {
        transform : translateY(100%);
        opacity   : 0;
    }
    100% {
        transform : translateY(0);
        opacity   : 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity   : 0;
        transform : translateY(20px);
    }
    100% {
        opacity   : 1;
        transform : translateY(0);
    }
}

@keyframes lineSlash {
    0% {
        width   : 0;
        opacity : 0;
        right   : -20%;
    }
    100% {
        width   : 60%;
        opacity : 1;
        right   : -10%;
    }
}

@media (max-width : 768px) {
    .hero-visual {
        width     : 100%;
        height    : 60vh;
        top       : 0;
        clip-path : polygon(0 0, 100% 0, 100% 80%, 0 100%);
    }

    .hero-content-layer {
        padding         : 0 1.5rem 6rem 1.5rem;
        justify-content : flex-end;
    }

    .hero-date-group {
        padding       : 1rem;
        transform     : translateX(50px);
        margin-bottom : 1rem;
    }

    .hero-title {
        font-size : 3rem;
    }

    .hero-desc {
        font-size     : 0.9rem;
        margin-bottom : 1.5rem;
    }

    .hero-btn {
        padding : 1rem 2.5rem;
    }

    @keyframes visualEnter {
        0% {
            opacity   : 0;
            clip-path : polygon(0 0, 100% 0, 100% 0, 0 0);
        }
        100% {
            opacity   : 1;
            clip-path : polygon(0 0, 100% 0, 100% 80%, 0 100%);
        }
    }
}


/* 2. Concept (Scroll Reveal) with Scroll Indicator */
#concept {
    background-color : var(--bg);
    position         : relative; /* インジケーター配置用 */
}

.scrolly-container {
    width           : 100%;
    height          : 100%;
    overflow-y      : scroll;
    padding         : 0 2rem;
    scroll-behavior : smooth; /* リセット時のスムーズな動き */
    /* スクロールバー装飾 */

    &::-webkit-scrollbar {
        width : 10px;
    }

    &::-webkit-scrollbar-track {
        background : rgba(0, 0, 0, 0.1);
    }

    &::-webkit-scrollbar-thumb {
        background    : rgba(0, 0, 0, 0.5);
        border-radius : 5px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background : rgba(0, 0, 0, 0.8);
    }

    scrollbar-width : thin;
    scrollbar-color : rgba(0, 0, 0, 0.5) transparent;
}

.scrolly-content {
    max-width      : 1000px;
    margin         : 0 auto;
    padding-top    : 40vh;
    padding-bottom : 40vh;
    display        : flex;
    flex-direction : column;
    gap            : 15vh;
}

.reveal-line {
    font-size   : clamp(2rem, 5vw, 4.5rem);
    font-weight : 800;
    line-height : 1.3;
    color       : var(--white);
    text-align  : center;
    opacity     : 0.1;
    transform   : scale(0.9);
    filter      : blur(5px);
    transition  : all 0.6s ease;
}

.reveal-line.visible {
    opacity     : 1;
    transform   : scale(1);
    filter      : blur(0);
    text-shadow : 0 0 30px rgba(255, 255, 255, 0.3);
}

.reveal-line span {
    color          : var(--secondary);
    display        : block;
    font-size      : 0.5em;
    margin-bottom  : 10px;
    letter-spacing : 0.2em;
    opacity        : 0.8;
}

/* スクロールインジケーター */
.scroll-hint-wrapper {
    position       : absolute;
    bottom         : 2rem;
    left           : 50%;
    transform      : translateX(-50%);
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 0.5rem;
    z-index        : 10;
    pointer-events : none;
    opacity        : 0.8;
    animation      : pulse-fade 2s infinite ease-in-out;
}

.scroll-hint-text {
    color          : var(--white);
    font-size      : 0.8rem;
    letter-spacing : 0.2em;
    font-weight    : bold;
    text-transform : uppercase;
}

.scroll-hint-arrow {
    width         : 24px;
    height        : 24px;
    border-right  : 2px solid var(--white);
    border-bottom : 2px solid var(--white);
    transform     : rotate(45deg);
    animation     : arrow-bounce 1.5s infinite;
}

@keyframes arrow-bounce {
    0%, 100% {
        transform : rotate(45deg) translate(-5px, -5px);
    }
    50% {
        transform : rotate(45deg) translate(0, 0);
    }
}

@keyframes pulse-fade {
    0%, 100% {
        opacity : 0.5;
    }
    50% {
        opacity : 1;
    }
}


/* 3. Features (About) - Updated Design */
#features {
    /* 背景に少しパターンを追加 */
    background-image : radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 40%);
}

#features .container {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 4rem;
    align-items           : center;
    width                 : 100%;
    max-width             : 1200px;

    @media (max-width : 900px) {
        grid-template-columns : 1fr;
        gap                   : 3rem;
        text-align            : center;
    }
}

/* 画像エリアの3D演出 */
.feature-visual-wrapper {
    position        : relative;
    perspective     : 1000px;
    display         : flex;
    justify-content : center;
    align-items     : center;
}

.feature-main-img {
    width         : 100%;
    max-width     : 500px;
    border-radius : 4px;
    /* 初期状態：傾けておく */
    transform     : rotateY(-30deg) rotateX(10deg) translateZ(-100px);
    opacity       : 0;
    box-shadow    : 20px 20px 60px rgba(0, 0, 0, 0.5);
    border        : 1px solid rgba(255, 255, 255, 0.1);
    transition    : all 1s cubic-bezier(0.22, 1, 0.36, 1);
    z-index       : 2;
}

/* 装飾用フレーム */
.feature-deco-frame {
    position   : absolute;
    top        : -20px;
    left       : 20px;
    width      : 100%;
    height     : 100%;
    max-width  : 500px;
    border     : 2px solid var(--secondary);
    z-index    : 1;
    opacity    : 0;
    transform  : translate(50px, 50px);
    transition : all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* アクティブ時のアニメーション */
#features.active .feature-main-img {
    transform : rotateY(0) rotateX(0) translateZ(0);
    opacity   : 1;
}

#features.active .feature-deco-frame {
    transform : translate(0, 0);
    opacity   : 0.5;
    top       : 20px;
    left      : -20px; /* 位置をずらして確定 */
}

/* テキストエリア */
.feature-content {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
}

.feature-title {
    font-size     : clamp(2rem, 4vw, 3.5rem);
    font-weight   : 800;
    line-height   : 1.2;
    margin-bottom : 2rem;
    color         : var(--white);
    position      : relative;
    opacity       : 0;
    transform     : translateX(50px);
}

.feature-title span {
    color          : var(--primary);
    display        : block;
    font-size      : 0.6em;
    letter-spacing : 0.2em;
    margin-bottom  : 0.5rem;
}

#features.active .feature-title {
    animation : slideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s;
}

.feature-desc {
    color         : var(--text-light);
    font-size     : 1.1rem;
    line-height   : 1.8;
    margin-bottom : 2.5rem;
    opacity       : 0;
    transform     : translateY(20px);
}

#features.active .feature-desc {
    animation : fadeInUp 0.8s ease forwards 0.4s;
}

/* 特徴リスト（カード化） */
.feature-list {
    display : grid;
    gap     : 1.5rem;
}

.feature-item {
    background      : rgba(30, 41, 59, 0.6);
    border          : 1px solid var(--border);
    padding         : 1.5rem;
    border-radius   : 8px;
    display         : flex;
    align-items     : center;
    gap             : 1.5rem;
    transition      : transform 0.3s ease, border-color 0.3s ease;
    opacity         : 0;
    transform       : translateX(30px);
    backdrop-filter : blur(5px);
}

.feature-item:hover {
    transform    : translateX(10px);
    border-color : var(--secondary);
    background   : rgba(30, 41, 59, 0.9);
}

.feature-icon {
    width           : 50px;
    height          : 50px;
    background      : rgba(99, 102, 241, 0.2);
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--primary);
    flex-shrink     : 0;
}

.feature-item:nth-child(2) .feature-icon {
    color      : var(--secondary);
    background : rgba(236, 72, 153, 0.2);
}

.feature-item:nth-child(3) .feature-icon {
    color      : var(--accent);
    background : rgba(6, 182, 212, 0.2);
}

.feature-info strong {
    display       : block;
    color         : var(--white);
    font-size     : 1.1rem;
    margin-bottom : 0.2rem;
}

.feature-info span {
    color     : var(--text-light);
    font-size : 0.9rem;
}

/* リストのスタッガーアニメーション */
#features.active .feature-item:nth-child(1) {
    animation : slideInRight 0.6s ease forwards 0.6s;
}

#features.active .feature-item:nth-child(2) {
    animation : slideInRight 0.6s ease forwards 0.7s;
}

#features.active .feature-item:nth-child(3) {
    animation : slideInRight 0.6s ease forwards 0.8s;
}


/* 3.5. Features Details (NEW) */
#features-detail {
    /* 背景画像を設定 */
    background-image    : url('https://placehold.co/1920x1080/111827/4f46e5?text=Details+Background');
    background-size     : cover;
    background-position : center;
    position            : relative;
    /* オーバーレイ */

    &::before {
        content    : '';
        position   : absolute;
        top        : 0;
        left       : 0;
        width      : 100%;
        height     : 100%;
        background : rgba(15, 23, 42, 0.85); /* 濃いオーバーレイ */
        z-index    : 1;
    }
}

#features-detail .detail-content {
    position   : relative;
    z-index    : 2; /* オーバーレイの上 */
    max-width  : 900px;
    text-align : left;
    color      : var(--white);

    h2 {
        font-size      : 2rem;
        margin-bottom  : 2rem;
        border-bottom  : 1px solid var(--border);
        padding-bottom : 1rem;
        color          : var(--secondary);
        text-align     : center;
    }

    .detail-columns {
        display               : grid;
        grid-template-columns : 1fr 1fr;
        gap                   : 3rem;

        @media (max-width : 768px) {
            grid-template-columns : 1fr;
            gap                   : 1.5rem;
        }
    }

    .detail-block {
        h3 {
            font-size     : 1.2rem;
            margin-bottom : 1rem;
            color         : var(--primary);
        }

        p {
            font-size     : 0.95rem; /* 細かい文字 */
            line-height   : 1.8;
            color         : #cbd5e1;
            margin-bottom : 1.5rem;
        }
    }
}

/* 4. Speakers (Horizontal Scroll Slider) */
#speakers {
    h2 {
        text-align    : center;
        font-size     : 2.5rem;
        margin-bottom : 3rem;

        span {
            color : var(--secondary);
        }
    }

    .slider-container {
        position       : relative;
        width          : 100%;
        padding-bottom : 4rem;
    }

    /* 横スクロールラッパー */

    .slider-wrapper {
        width              : 100%;
        padding            : 3rem 20%;
        margin             : 0;
        display            : flex;
        overflow-x         : auto;
        scroll-snap-type   : x mandatory;
        gap                : 2rem;
        cursor             : grab;
        -ms-overflow-style : none;
        scrollbar-width    : none;

        &::-webkit-scrollbar {
            display : none;
        }

        &:active {
            cursor : grabbing;
        }
    }

    .slider-wrapper.no-slider {
        display               : grid;
        grid-template-columns : repeat(3, 1fr);
        justify-content       : center;
        overflow-x            : visible;
        scroll-snap-type      : none;
        padding               : 1rem;
        cursor                : default;
        @media (max-width : 900px) {
            grid-template-columns : repeat(2, 1fr);
        }
        @media (max-width : 600px) {
            grid-template-columns : 1fr;
        }
    }

    .card {
        flex              : 0 0 300px;
        scroll-snap-align : center;
        background        : var(--bg-sub);
        border            : 1px solid var(--border);
        border-radius     : 8px;
        overflow          : hidden;
        /* 拡大・透過アクションを削除し、一律表示に */
        transition        : border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
        cursor            : pointer;

        .slider-wrapper.no-slider & {
            flex   : auto;
            width  : auto;
            cursor : default;
        }

        /* アクティブ時は枠線と影で現在地を示すのみにする（拡大なし） */

        &.active {
            border-color : var(--primary);
            box-shadow   : 0 10px 30px rgba(99, 102, 241, 0.2);
            z-index      : 10;
        }

        &:hover {
            transform    : translateY(-5px); /* ホバー時の浮き上がりは残す */
            border-color : var(--secondary);
        }

        img {
            width      : 100%;
            height     : 220px;
            object-fit : cover;
        }

        .card-body {
            padding : 1.5rem;

            h3 {
                color         : var(--white);
                margin-bottom : 0.5rem;
            }

            p {
                color         : var(--primary);
                font-size     : 0.9rem;
                margin-bottom : 1rem;
                font-weight   : bold;
            }

            .desc {
                color     : var(--text-light);
                font-size : 0.85rem;
            }
        }
    }

    /* Slider Navigation Buttons (Bottom) */

    .slider-nav-btns {
        position        : absolute;
        bottom          : 0;
        left            : 0;
        width           : 100%;
        display         : flex;
        justify-content : center;
        gap             : 1.5rem;
        z-index         : 20;

        .slider-wrapper.no-slider + & {
            display : none; /* スライダー無効時は非表示 */
        }
    }

    .slider-btn {
        width           : 50px;
        height          : 50px;
        border-radius   : 50%;
        background      : rgba(30, 41, 59, 0.8);
        border          : 1px solid var(--border);
        color           : var(--white);
        display         : flex;
        align-items     : center;
        justify-content : center;
        cursor          : pointer;
        transition      : all 0.3s ease;

        &:hover {
            background : var(--primary);
            box-shadow : 0 0 15px var(--primary);
            transform  : scale(1.1);
        }

        svg {
            width  : 24px;
            height : 24px;
            fill   : currentColor;
        }
    }
}

/* 5. Gallery (Grid & Modal) */
#gallery {
    /* タイトルスタイルの刷新 */

    h2 {
        font-size               : clamp(3rem, 6vw, 5rem);
        font-weight             : 900;
        text-align              : center;
        margin-bottom           : 3rem;
        color                   : var(--white);
        letter-spacing          : 0.05em;
        position                : relative;
        text-transform          : uppercase;
        /* グラデーションテキスト */
        background              : linear-gradient(to right, var(--white), var(--text-light));
        -webkit-background-clip : text;
        -webkit-text-fill-color : transparent;
        filter                  : drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
    }

    h2::after {
        content                 : 'EVENT ARCHIVE';
        display                 : block;
        font-size               : 1rem;
        letter-spacing          : 0.5em;
        color                   : var(--secondary);
        margin-top              : 0.5rem;
        -webkit-text-fill-color : var(--secondary); /* グラデーション打ち消し */
        opacity                 : 0.8;
    }

    .gallery-grid {
        display               : grid;
        grid-template-columns : repeat(5, 1fr);
        grid-template-rows    : repeat(2, 1fr);
        gap                   : 1rem;
        width                 : 100%;
        max-width             : 1000px;
        margin                : 0 auto; /* 中央寄せ */

        @media (max-width : 900px) {
            grid-template-columns : repeat(3, 1fr);
            grid-template-rows    : auto;
        }
        @media (max-width : 600px) {
            grid-template-columns : repeat(2, 1fr);
        }
    }

    .gallery-item {
        position      : relative;
        aspect-ratio  : 1 / 1;
        border-radius : 8px;
        overflow      : hidden;
        cursor        : pointer;
        border        : 1px solid transparent;
        transition    : all 0.3s ease;

        img {
            width      : 100%;
            height     : 100%;
            object-fit : cover;
            transition : transform 0.5s ease;
        }

        &:hover {
            border-color : var(--secondary);
            box-shadow   : 0 0 15px var(--secondary);

            img {
                transform : scale(1.1);
            }

            &::after {
                opacity : 1;
            }
        }

        /* ホバー時のオーバーレイ */

        &::after {
            content         : 'VIEW';
            position        : absolute;
            top             : 0;
            left            : 0;
            width           : 100%;
            height          : 100%;
            background      : rgba(0, 0, 0, 0.5);
            display         : flex;
            align-items     : center;
            justify-content : center;
            color           : var(--white);
            font-weight     : bold;
            letter-spacing  : 0.1em;
            opacity         : 0;
            transition      : opacity 0.3s ease;
        }
    }
}

/* Gallery Modal (Moved to body level to ensure full screen) */
.gallery-modal {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background      : rgba(15, 23, 42, 0.95);
    backdrop-filter : blur(10px);
    z-index         : 9999; /* 最前面 */
    display         : flex;
    align-items     : center;
    justify-content : center;
    opacity         : 0;
    pointer-events  : none;
    transition      : opacity 0.4s ease;

    &.open {
        opacity        : 1;
        pointer-events : auto;

        .modal-img-wrapper {
            animation : modalPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
    }

    .modal-img-wrapper {
        /* 最大サイズを80%に設定 */
        width      : auto;
        height     : auto;
        max-width  : 80%;
        max-height : 80vh;
        position   : relative;
        transform  : scale(0.5) rotate(-10deg); /* 初期状態 */
        opacity    : 0;

        img {
            width         : 100%;
            height        : 100%;
            object-fit    : contain;
            border-radius : 8px;
            box-shadow    : 0 0 50px rgba(99, 102, 241, 0.5);
            border        : 2px solid var(--white);
        }
    }

    .close-btn {
        position   : absolute;
        top        : 2rem;
        right      : 2rem;
        background : none;
        border     : none;
        color      : var(--white);
        font-size  : 2rem;
        cursor     : pointer;
        transition : transform 0.3s;

        &:hover {
            transform : rotate(90deg) scale(1.2);
            color     : var(--secondary);
        }
    }
}

@keyframes modalPop {
    0% {
        transform : scale(0.5) rotate(-10deg);
        opacity   : 0;
    }
    100% {
        transform : scale(1) rotate(0deg);
        opacity   : 1;
    }
}


/* 6. Form (Dynamic Styling) */
#contact .form-container {
    background      : rgba(30, 41, 59, 0.4); /* 背景を少し透過 */
    backdrop-filter : blur(20px);
    border          : 1px solid var(--glass-border);
    padding         : 3rem;
    border-radius   : 12px;
    width           : 100%;
    max-width       : 600px;
    margin          : 0 auto;
    position        : relative;
    overflow        : hidden;

    /* ホログラム的なボーダーエフェクト */
    box-shadow      : 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.5);

    /* 背景の装飾 */

    &::before {
        content    : '';
        position   : absolute;
        top        : -50%;
        left       : -50%;
        width      : 200%;
        height     : 200%;
        background : radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
        animation  : rotate-bg 10s linear infinite;
        z-index    : -1;
    }

    @media (max-width : 768px) {
        padding : 1.5rem;
    }
}

@keyframes rotate-bg {
    0% {
        transform : rotate(0deg);
    }
    100% {
        transform : rotate(360deg);
    }
}

#contact h2 {
    text-align     : center;
    margin-bottom  : 2rem;
    color          : var(--white);
    text-transform : uppercase;
    letter-spacing : 0.1em;
}

#contact .form-group {
    margin-bottom : 2rem;
    position      : relative;

    label {
        display       : block;
        margin-bottom : 0.5rem;
        color         : var(--text-light);
        font-size     : 0.9rem;
        font-weight   : bold;
        transition    : color 0.3s;
    }

    /* インプットの装飾 */

    input, select, textarea {
        width         : 100%;
        padding       : 15px;
        background    : rgba(15, 23, 42, 0.6);
        border        : 1px solid var(--border);
        border-left   : 2px solid var(--border); /* 左側のボーダーを基準に */
        color         : var(--white);
        border-radius : 4px;
        transition    : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:focus {
            outline           : none;
            border-color      : var(--secondary);
            border-left-width : 6px; /* 左ボーダーを太く */
            background        : rgba(15, 23, 42, 0.9);
            box-shadow        : 0 0 20px rgba(236, 72, 153, 0.2);
            padding-left      : 20px; /* 入力文字を少しずらす */
        }

        /* 兄弟セレクタでラベルの色を変える */

        &:focus + label, &:not(:placeholder-shown) + label {
            color : var(--secondary);
        }
    }
}

#contact button[type="submit"] {
    width           : 100%;
    padding         : 1.2rem;
    background      : linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
    background-size : 200% auto;
    border          : none;
    color           : var(--white);
    font-weight     : bold;
    font-size       : 1.2rem;
    border-radius   : 4px;
    cursor          : pointer;
    text-transform  : uppercase;
    letter-spacing  : 0.1em;
    transition      : all 0.5s ease;
    position        : relative;
    overflow        : hidden;

    &:hover {
        background-position : right center; /* グラデーションを流す */
        box-shadow          : 0 0 30px rgba(99, 102, 241, 0.6);
        transform           : scale(1.02);
    }

    /* 光の反射エフェクト */

    &::after {
        content    : '';
        position   : absolute;
        top        : 0;
        left       : -100%;
        width      : 50%;
        height     : 100%;
        background : linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform  : skewX(-20deg);
        transition : left 0.5s;
    }

    &:hover::after {
        left       : 150%;
        transition : left 0.7s ease-in-out;
    }
}

footer {
    margin-top  : 2rem;
    text-align  : center;
    color       : var(--gray);
    font-size   : 0.8rem;
    border-top  : 1px solid var(--border);
    padding-top : 1rem;
    width       : 100%;
}

/* フェードアップ用 */
.fade-up {
    opacity    : 0;
    transform  : translateY(20px);
    transition : opacity 0.6s ease, transform 0.6s ease;
}

section.active .fade-up {
    opacity   : 1;
    transform : translateY(0);
}

section.active .delay-1 {
    transition-delay : 0.2s;
}

section.active .delay-2 {
    transition-delay : 0.4s;
}

section.active .delay-3 {
    transition-delay : 0.6s;
}

.p-form__success {
    background-color : var(--success);
    border           : 1px solid var(--border);
    color            : #fff;
    padding          : 15px;
    margin-bottom    : 20px;
    border-radius    : 4px;
}

.p-form__error {
    background-color : var(--error);
    border           : 1px solid var(--border);
    color            : #fff;
    padding          : 15px;
    margin-bottom    : 20px;
    border-radius    : 4px;
}