/* =========================================
   HAI 2026 - Academic Cyberpunk Design
   "Gentle Red" Theme - Inspired by Osaka Nights
   ========================================= */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* --- カラーパレット：優しい赤 (Gentle Red) --- */

    /* 背景：真っ黒ではなく、ほんのり赤みを含んだ深い闇色（高級感） */
    --bg-deep: #0f0a0a;
    --bg-dark: #0f0a0a;
    --bg-dark-secondary: #1a1212;

    /* ガラスパネル：暖色系の透明パネル */
    --bg-panel: rgba(40, 20, 20, 0.4);

    /* アクセント：警告色ではない、ソフトなネオンレッド（サーモンピンク寄り） */
    --accent-primary: #ff6b6b;
    --accent-red: #ff6b6b;

    /* サブアクセント：落ち着いた深紅（境界線などに使用） */
    --accent-secondary: #c92a2a;
    --accent-crimson: #c92a2a;
    --accent-hover: #ff8787;

    /* テキスト：目に優しいオフホワイトとウォームグレー */
    --text-main: #f1f1f1;
    --text-light: #f1f1f1;
    --text-sub: #a89f9f;
    --text-white: #ffffff;

    /* ガラスエフェクト用 */
    --glass-border: rgba(255, 107, 107, 0.15);
    --glass-shine: rgba(255, 255, 255, 0.05);

    /* グリッド線：極薄い赤で「製図」感を演出 */
    --grid-color: rgba(255, 107, 107, 0.03);
}

body {
    font-family: 'Inter', 'Segoe UI', 'Roboto', system-ui, sans-serif;
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg-deep);
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 40px 40px;
    position: relative;
}

/* --- Typography: "System" Feel --- */
h1, h2, h3, h4 {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    letter-spacing: -0.02em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Header and Navigation */
header {
    background: rgba(15, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: none;
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}

.logo h1 {
    color: var(--accent-primary);
    font-size: 2rem;
    margin-bottom: 0.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    /* No text-shadow - cleaner academic look */
}

.logo .subtitle {
    color: var(--text-light);
    font-size: 0.9rem;
    /* NO text-shadow for body text - clean and readable */
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 1.5rem;
}

.nav-menu > li {
    position: relative;
}

.nav-menu li a {
    text-decoration: none;
    color: var(--text-sub);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    display: block;
}

.nav-menu li a:hover {
    color: var(--accent-primary);
    border-color: var(--glass-border);
    background: rgba(255, 107, 107, 0.05);
    box-shadow: none;
    text-shadow: none;
}

.nav-menu li a.active {
    color: var(--accent-primary);
    border-color: var(--glass-border);
    background: rgba(255, 107, 107, 0.05);
    box-shadow: none;
    text-shadow: none;
}

/* Dropdown Menu */
.nav-menu .dropdown {
    position: relative;
}

.nav-menu .dropdown-toggle {
    cursor: pointer;
    position: relative;
    padding-right: 1.5rem;
}

.nav-menu .dropdown-toggle::after {
    content: '▼';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

.nav-menu .dropdown:hover .dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg);
}

.nav-menu .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: rgba(15, 10, 10, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-top: none;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    margin-top: -1px;
}

.nav-menu .dropdown:hover .dropdown-menu {
    display: block;
}

.nav-menu .dropdown-menu li {
    border-bottom: 1px solid rgba(255, 107, 107, 0.08);
}

.nav-menu .dropdown-menu li:last-child {
    border-bottom: none;
}

.nav-menu .dropdown-menu li a {
    padding: 0.8rem 1.2rem;
    font-size: 0.75rem;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: all 0.3s ease;
}

.nav-menu .dropdown-menu li a:hover {
    background: rgba(255, 107, 107, 0.08);
    border-left: 3px solid var(--accent-primary);
    padding-left: 1.5rem;
}

/* Hero Section with Dotonbori Scene */
.hero {
    background: var(--bg-deep);
    color: var(--text-white);
    padding: 2rem 0 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--glass-border);
}

/* Hero content box with glassmorphism */
.hero-content {
    z-index: 10;
    background: rgba(15, 10, 10, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    text-align: center;
    max-width: 800px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 2px;
    text-shadow: none;
    /* Gradient text effect */
    background: linear-gradient(135deg, #fff 0%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
    color: var(--accent-primary);
    text-shadow: none;
    letter-spacing: 0.05em;
}

.hero-date {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid var(--accent-primary);
    padding: 0.6rem 1.2rem;
    color: var(--accent-primary);
    font-size: 0.9rem;
    border-radius: 2px;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--text-sub);
}

/* =========================================================
   Dotonbori Night scene inside HERO (no info loss, shorter height)
   ========================================================= */
.hero.hero-dotonbori{
  /* 縦幅を小さく：ここを調整ポイント */
  min-height: clamp(260px, 50vh, 550px);
  padding: 1.25rem 0 1.75rem 0; /* 既存より詰める */
  position: relative;
  overflow: hidden;
}

/* hero内の文字を前面に */
.hero.hero-dotonbori .hero-content{
  position: relative;
  z-index: 5;
}

/* sceneをheroの背景として全面に敷く */
.hero.hero-dotonbori .hero-scene{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* メニュー等のクリックを邪魔しない */
}

/* sceneをheroサイズにフィット */
.hero.hero-dotonbori .scene{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

/* 文字の可読性用：薄い暗幕（sceneの上、文字の下） */
.hero.hero-dotonbori::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.25) 100%,
    rgba(0,0,0,0.15) 55%,
    rgba(0,0,0,0.25) 100%
  );
}

/* ---------------------------------------------------------
   ここから下：あなたの Dotonbori Night CSS を “hero内に限定” して移植
   ※ body/全体リセットは既にあるので、scene系だけを載せています
   --------------------------------------------------------- */

/* 夜空 */
.hero.hero-dotonbori .sky{
  position:absolute; top:0; left:0;
  width:100%; height:50%;
  background: linear-gradient(to bottom, #010105 0%, #030310 30%, #050518 60%, #070725 100%);
}
.hero.hero-dotonbori .stars{ position:absolute; width:100%; height:100%; }
.hero.hero-dotonbori .star{
  position:absolute; background:white; border-radius:50%;
  animation: twinkle 3s infinite;
}
@keyframes twinkle{ 0%,100%{opacity:0.2;} 50%{opacity:0.8;} }

/* 左ビル群 */
.hero.hero-dotonbori .buildings-left{ position:absolute; top:5%; left:0; width:42%; height:55%; overflow:visible; }
.hero.hero-dotonbori .building-left-1{ position:absolute; bottom:0; left:-8%; width:38%; height:100%; background:linear-gradient(90deg,#06060a 0%,#0a0a12 60%,#0c0c18 100%); border-right:1px solid #151520; z-index:10; }
.hero.hero-dotonbori .building-left-2{ position:absolute; bottom:0; left:28%; width:30%; height:88%; background:linear-gradient(90deg,#080810 0%,#0a0a16 60%,#0e0e1c 100%); border-right:1px solid #151520; z-index:8; }
.hero.hero-dotonbori .building-left-3{ position:absolute; bottom:0; left:52%; width:24%; height:76%; background:linear-gradient(90deg,#0a0a12 0%,#0c0c18 60%,#101020 100%); border-right:1px solid #151520; z-index:6; }
.hero.hero-dotonbori .building-left-4{ position:absolute; bottom:0; left:72%; width:18%; height:64%; background:linear-gradient(90deg,#0c0c14 0%,#0e0e1a 60%,#121222 100%); border-right:1px solid #151520; z-index:4; }
.hero.hero-dotonbori .building-left-5{ position:absolute; bottom:0; left:86%; width:16%; height:52%; background:linear-gradient(90deg,#0e0e16 0%,#10101c 60%,#141424 100%); z-index:2; }

/* 右ビル群 */
.hero.hero-dotonbori .buildings-right{ position:absolute; top:5%; right:0; width:42%; height:55%; overflow:visible; }
.hero.hero-dotonbori .building-right-1{ position:absolute; bottom:0; right:-8%; width:38%; height:100%; background:linear-gradient(90deg,#0c0c18 0%,#0a0a12 40%,#06060a 100%); border-left:1px solid #151520; z-index:10; }
.hero.hero-dotonbori .building-right-2{ position:absolute; bottom:0; right:28%; width:30%; height:88%; background:linear-gradient(90deg,#0e0e1c 0%,#0a0a16 40%,#080810 100%); border-left:1px solid #151520; z-index:8; }
.hero.hero-dotonbori .building-right-3{ position:absolute; bottom:0; right:52%; width:24%; height:76%; background:linear-gradient(90deg,#101020 0%,#0c0c18 40%,#0a0a12 100%); border-left:1px solid #151520; z-index:6; }
.hero.hero-dotonbori .building-right-4{ position:absolute; bottom:0; right:72%; width:18%; height:64%; background:linear-gradient(90deg,#121222 0%,#0e0e1a 40%,#0c0c14 100%); border-left:1px solid #151520; z-index:4; }
.hero.hero-dotonbori .building-right-5{ position:absolute; bottom:0; right:86%; width:16%; height:52%; background:linear-gradient(90deg,#141424 0%,#10101c 40%,#0e0e16 100%); z-index:2; }

/* 窓 */
.hero.hero-dotonbori .window{
  position:absolute;
  background: rgba(255,240,180,0.4);
  box-shadow: 0 0 4px rgba(255,240,180,0.2);
  animation: window-flicker 5s infinite;
}
@keyframes window-flicker{ 0%,92%,100%{opacity:0.4;} 94%{opacity:0.2;} 96%{opacity:0.5;} }

/* 看板（窓型ネオン） */
.hero.hero-dotonbori .building-sign{ position:absolute; border-radius:2px; opacity:0.6; }
@keyframes sign-glow{ 0%,100%{opacity:0.5;} 50%{opacity:0.7;} }
.hero.hero-dotonbori .sign-l1{ top:12%; left:8%; width:45px; height:25px; background:rgba(214,51,108,0.3); box-shadow:0 0 15px rgba(214,51,108,0.4); animation:sign-glow 3s infinite; z-index:11; }
.hero.hero-dotonbori .sign-l2{ top:22%; left:35%; width:35px; height:20px; background:rgba(255,64,129,0.3); box-shadow:0 0 12px rgba(255,64,129,0.3); animation:sign-glow 3.5s infinite 0.5s; z-index:9; }
.hero.hero-dotonbori .sign-l3{ top:28%; left:58%; width:28px; height:16px; background:rgba(201,42,42,0.3); box-shadow:0 0 10px rgba(201,42,42,0.3); animation:sign-glow 4s infinite 1s; z-index:7; }
.hero.hero-dotonbori .sign-r1{ top:12%; right:8%; width:45px; height:25px; background:rgba(255,64,129,0.3); box-shadow:0 0 15px rgba(255,64,129,0.4); animation:sign-glow 3.2s infinite 0.3s; z-index:11; }
.hero.hero-dotonbori .sign-r2{ top:22%; right:35%; width:35px; height:20px; background:rgba(214,51,108,0.3); box-shadow:0 0 12px rgba(214,51,108,0.3); animation:sign-glow 3.8s infinite 0.8s; z-index:9; }
.hero.hero-dotonbori .sign-r3{ top:28%; right:58%; width:28px; height:16px; background:rgba(201,42,42,0.3); box-shadow:0 0 10px rgba(201,42,42,0.3); animation:sign-glow 4.2s infinite 1.2s; z-index:7; }

/* ランナー看板 */
.hero.hero-dotonbori .runner-area{ position:absolute; top:18%; left:50%; transform:translateX(-50%); width:70px; height:85px; z-index:3; opacity:0.7; }
.hero.hero-dotonbori .runner-sign{ width:100%; height:100%; background:linear-gradient(180deg,#000410 0%,#000620 50%,#000830 100%); border:3px solid rgba(180,140,0,0.6); border-radius:4px; box-shadow:0 0 10px rgba(180,140,0,0.3),0 0 20px rgba(180,140,0,0.15); position:relative; overflow:hidden; }
.hero.hero-dotonbori .runner-svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:52px; color:rgba(255,255,255,0.7); filter:drop-shadow(0 0 4px rgba(255,255,255,0.4)); }
.hero.hero-dotonbori .runner-track{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:60%; height:5px; background:radial-gradient(ellipse, rgba(255,100,50,0.3) 0%, transparent 70%); border-radius:50%; }

/* カニ */
.hero.hero-dotonbori .crab-area{ position:absolute; top:15%; left:30%; width:55px; height:60px; z-index:7; transform:perspective(500px) rotateY(15deg); opacity:0.65; }
.hero.hero-dotonbori .crab-sign{ width:100%; height:100%; background:linear-gradient(135deg,#300000 0%,#500000 50%,#600000 100%); border:2px solid rgba(200,80,0,0.5); border-radius:4px; box-shadow:0 0 10px rgba(200,80,0,0.3),0 0 20px rgba(200,80,0,0.15); position:relative; }
.hero.hero-dotonbori .crab{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:35px; animation:crab-wiggle 2s infinite ease-in-out alternate; }
@keyframes crab-wiggle{ 0%{transform:translate(-50%,-50%) rotate(-2deg);} 100%{transform:translate(-50%,-50%) rotate(2deg);} }
.hero.hero-dotonbori .crab-body{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:18px; height:13px; background:radial-gradient(ellipse, rgba(220,100,0,0.8) 0%, rgba(180,60,0,0.8) 100%); border-radius:50%; }
.hero.hero-dotonbori .crab-eye{ position:absolute; width:4px; height:8px; background:rgba(200,80,0,0.8); border-radius:2px; }
.hero.hero-dotonbori .crab-eye::after{ content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:6px; height:6px; background:radial-gradient(circle, rgba(220,100,0,0.8) 0%, rgba(180,60,0,0.8) 100%); border-radius:50%; }
.hero.hero-dotonbori .crab-eye-left{ top:6px; left:12px; }
.hero.hero-dotonbori .crab-eye-right{ top:6px; right:12px; }
.hero.hero-dotonbori .crab-claw{ position:absolute; width:10px; height:8px; background:radial-gradient(ellipse, rgba(220,100,0,0.8) 0%, rgba(180,60,0,0.8) 100%); border-radius:50%; }
.hero.hero-dotonbori .crab-claw-left{ top:14px; left:2px; transform:rotate(-15deg); }
.hero.hero-dotonbori .crab-claw-right{ top:14px; right:2px; transform:rotate(15deg); }

/* 太鼓人形 */
.hero.hero-dotonbori .drummer-area{ position:absolute; top:16%; right:28%; width:40px; height:70px; z-index:7; transform:perspective(500px) rotateY(-15deg); opacity:0.65; }
.hero.hero-dotonbori .drummer{ width:100%; height:100%; position:relative; }
.hero.hero-dotonbori .drummer-hat{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:22px; height:12px; background:linear-gradient(180deg, rgba(0,0,150,0.7) 0%, rgba(0,0,100,0.7) 100%); border-radius:11px 11px 0 0; }
.hero.hero-dotonbori .drummer-hat::after{ content:''; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); width:28px; height:6px; background:rgba(0,0,120,0.7); border-radius:3px; }
.hero.hero-dotonbori .drummer-face{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:17px; height:17px; background:radial-gradient(circle, rgba(255,210,180,0.7) 0%, rgba(240,190,150,0.7) 100%); border-radius:50%; }
.hero.hero-dotonbori .drummer-body{ position:absolute; top:30px; left:50%; transform:translateX(-50%); width:20px; height:22px; background:repeating-linear-gradient(0deg, rgba(180,0,0,0.7) 0px, rgba(180,0,0,0.7) 3px, rgba(255,255,255,0.7) 3px, rgba(255,255,255,0.7) 6px); border-radius:5px 5px 0 0; }
.hero.hero-dotonbori .drummer-drum{ position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:18px; height:12px; background:linear-gradient(180deg, rgba(200,170,0,0.7) 0%, rgba(160,130,0,0.7) 100%); border-radius:2px; border:1px solid rgba(140,110,0,0.5); }
.hero.hero-dotonbori .drummer-stick{ position:absolute; bottom:13px; width:2px; height:12px; background:rgba(100,60,20,0.7); border-radius:1px; transform-origin:bottom center; }
.hero.hero-dotonbori .drummer-stick::after{ content:''; position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:5px; height:5px; background:rgba(255,255,255,0.7); border-radius:50%; }
.hero.hero-dotonbori .drummer-stick-left{ left:5px; animation: drum-left 0.3s infinite alternate ease-in-out; }
.hero.hero-dotonbori .drummer-stick-right{ right:5px; animation: drum-right 0.3s infinite alternate ease-in-out; }
@keyframes drum-left{ 0%{transform:rotate(-15deg);} 100%{transform:rotate(-5deg);} }
@keyframes drum-right{ 0%{transform:rotate(5deg);} 100%{transform:rotate(15deg);} }

/* 橋 */
.hero.hero-dotonbori .bridge{ position:absolute; top:54%; left:50%; transform:translateX(-50%); width:22%; height:20px; background:linear-gradient(to bottom,#404048 0%,#303038 30%,#252530 70%,#1a1a22 100%); border-top:2px solid #505058; z-index:20; box-shadow:0 4px 12px rgba(0,0,0,0.5); }
.hero.hero-dotonbori .bridge-railing{ position:absolute; top:-12px; width:100%; height:12px; display:flex; justify-content:space-around; align-items:flex-end; }
.hero.hero-dotonbori .railing-post{ width:2px; height:12px; background:linear-gradient(to bottom,#666 0%,#444 100%); border-radius:1px; }
.hero.hero-dotonbori .bridge-rail-top{ position:absolute; top:-12px; left:0; right:0; height:2px; background:#777; }

/* 川岸 */
.hero.hero-dotonbori .riverbank-left{ position:absolute; bottom:0; left:0; width:38%; height:46%; background:linear-gradient(135deg,#0a0a10 0%,#080810 50%,#060608 100%); clip-path:polygon(0% 0%,100% 0%,55% 100%,0% 100%); z-index:18; }
.hero.hero-dotonbori .riverbank-right{ position:absolute; bottom:0; right:0; width:38%; height:46%; background:linear-gradient(225deg,#0a0a10 0%,#080810 50%,#060608 100%); clip-path:polygon(0% 0%,100% 0%,100% 100%,45% 100%); z-index:18; }
.hero.hero-dotonbori .riverbank-wall-left{ position:absolute; bottom:0; left:35.5%; width:3%; height:46%; background:linear-gradient(to right,#121218 0%,#181820 50%,#141418 100%); clip-path:polygon(0% 0%,100% 0%,65% 100%,35% 100%); z-index:19; }
.hero.hero-dotonbori .riverbank-wall-right{ position:absolute; bottom:0; right:35.5%; width:3%; height:46%; background:linear-gradient(to left,#121218 0%,#181820 50%,#141418 100%); clip-path:polygon(0% 0%,100% 0%,65% 100%,35% 100%); z-index:19; }

/* 川 */
.hero.hero-dotonbori .river{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:28%; height:46%;
  background:linear-gradient(to bottom,#020208 0%,#030310 15%,#02020a 40%,#020208 70%,#010105 100%);
  clip-path:polygon(32% 0%,68% 0%,100% 100%,0% 100%);
  overflow:hidden; z-index:17;
}
.hero.hero-dotonbori .water-surface{ position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(to bottom, rgba(5,10,25,0.3) 0%, rgba(3,8,20,0.5) 50%, rgba(0,5,15,0.7) 100%);
}
.hero.hero-dotonbori .reflections{ position:absolute; top:8%; left:0; width:100%; height:92%; overflow:hidden; }
.hero.hero-dotonbori .reflection-strip{ position:absolute; border-radius:2px; filter:blur(4px); opacity:0.4; }
@keyframes reflection-shimmer{ 0%,100%{transform:scaleY(1) scaleX(1); opacity:0.35;} 25%{transform:scaleY(1.12) scaleX(0.92); opacity:0.5;} 50%{transform:scaleY(0.88) scaleX(1.08); opacity:0.3;} 75%{transform:scaleY(1.08) scaleX(0.96); opacity:0.45;} }
.hero.hero-dotonbori .ref-pink{ top:5%; left:15%; width:8px; height:50%; background:linear-gradient(to bottom, rgba(214,51,108,0.6) 0%, rgba(214,51,108,0.2) 60%, transparent 100%); animation:reflection-shimmer 3.2s infinite ease-in-out; }
.hero.hero-dotonbori .ref-cyan{ top:12%; left:28%; width:6px; height:45%; background:linear-gradient(to bottom, rgba(255,64,129,0.6) 0%, rgba(255,64,129,0.2) 60%, transparent 100%); animation:reflection-shimmer 3.5s infinite ease-in-out 0.4s; }
.hero.hero-dotonbori .ref-orange{ top:18%; left:38%; width:5px; height:40%; background:linear-gradient(to bottom, rgba(201,42,42,0.6) 0%, rgba(201,42,42,0.2) 60%, transparent 100%); animation:reflection-shimmer 2.8s infinite ease-in-out 0.8s; }
.hero.hero-dotonbori .ref-gold{ top:8%; left:46%; width:10px; height:55%; background:linear-gradient(to bottom, rgba(214,51,108,0.6) 0%, rgba(214,51,108,0.2) 60%, transparent 100%); animation:reflection-shimmer 4s infinite ease-in-out 0.2s; }
.hero.hero-dotonbori .ref-purple{ top:18%; right:38%; width:5px; height:40%; background:linear-gradient(to bottom, rgba(255,64,129,0.6) 0%, rgba(255,64,129,0.2) 60%, transparent 100%); animation:reflection-shimmer 3s infinite ease-in-out 1s; }
.hero.hero-dotonbori .ref-green{ top:12%; right:28%; width:6px; height:45%; background:linear-gradient(to bottom, rgba(201,42,42,0.6) 0%, rgba(201,42,42,0.2) 60%, transparent 100%); animation:reflection-shimmer 3.3s infinite ease-in-out 0.6s; }
.hero.hero-dotonbori .ref-yellow{ top:5%; right:15%; width:8px; height:50%; background:linear-gradient(to bottom, rgba(214,51,108,0.6) 0%, rgba(214,51,108,0.2) 60%, transparent 100%); animation:reflection-shimmer 3.7s infinite ease-in-out 0.3s; }
.hero.hero-dotonbori .ref-red{ top:15%; left:22%; width:5px; height:38%; background:linear-gradient(to bottom, rgba(201,42,42,0.5) 0%, rgba(201,42,42,0.15) 60%, transparent 100%); animation:reflection-shimmer 2.9s infinite ease-in-out 1.2s; }

/* 波紋 */
.hero.hero-dotonbori .ripples{ position:absolute; width:100%; height:100%; pointer-events:none; }
.hero.hero-dotonbori .ripple{ position:absolute; border:1px solid rgba(255,255,255,0.04); border-radius:50%; animation:ripple-expand 6s infinite ease-out; }
@keyframes ripple-expand{ 0%{width:0;height:0;opacity:0.25;transform:translate(-50%,-50%);} 100%{width:100px;height:16px;opacity:0;transform:translate(-50%,-50%);} }

/* きらめき */
.hero.hero-dotonbori .water-sparkle{ position:absolute; width:2px; height:2px; background:rgba(255,255,255,0.6); border-radius:50%; animation:sparkle 2.5s infinite; }
@keyframes sparkle{ 0%,100%{opacity:0; transform:scale(0.5);} 50%{opacity:0.8; transform:scale(1);} }

/* 船 */
.hero.hero-dotonbori .boat{ position:absolute; bottom:25%; width:45px; height:18px; animation:boat-drift 35s infinite linear; z-index:25; opacity:0.8; }
@keyframes boat-drift{ 0%{left:25%; transform:scale(0.6);} 50%{left:50%; transform:scale(0.8);} 100%{left:75%; transform:scale(0.6);} }
.hero.hero-dotonbori .boat-hull{ position:absolute; bottom:0; width:100%; height:10px; background:linear-gradient(to bottom,#2a1a10 0%,#150a00 100%); border-radius:2px 2px 40% 40%; }
.hero.hero-dotonbori .boat-cabin{ position:absolute; bottom:8px; left:12%; width:76%; height:8px; background:linear-gradient(to bottom,#3a2a1a 0%,#1a0a00 100%); border-radius:2px; }
.hero.hero-dotonbori .boat-light{ position:absolute; bottom:10px; right:5px; width:4px; height:4px; background:radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,0,0.6) 40%, transparent 100%); border-radius:50%; box-shadow:0 0 8px rgba(255,255,0,0.5); animation:boat-light-pulse 1.5s infinite; }
@keyframes boat-light-pulse{ 0%,100%{opacity:0.9;} 50%{opacity:0.6;} }

/* 雰囲気ライト */
.hero.hero-dotonbori .ambient-lights{ position:absolute; width:100%; height:60%; top:5%; pointer-events:none; }
.hero.hero-dotonbori .ambient-dot{ position:absolute; border-radius:50%; animation:ambient-pulse 4s infinite; }
@keyframes ambient-pulse{ 0%,100%{opacity:0.3;} 50%{opacity:0.7;} }

/* 空のグロー */
.hero.hero-dotonbori .sky-glow{
  position:absolute; bottom:0; left:0; width:100%; height:50%;
  background:radial-gradient(ellipse at 50% 100%, rgba(50,40,70,0.15) 0%, rgba(30,20,50,0.08) 30%, transparent 55%);
  pointer-events:none;
}


/* Page Header - Glass Panel Style */
.page-header {
    background: var(--bg-deep);
    color: var(--text-white);
    padding: 3rem 0;
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
}

.page-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 1px;
    text-shadow: none;
    display: inline-block;
}

/* Sections - Academic Lab Style */
.section {
    padding: 1.5rem 0;
    position: relative;
    background: transparent;
}

.alt-bg {
    background: rgba(255, 107, 107, 0.02);
    border-top: 1px solid rgba(255, 107, 107, 0.05);
    border-bottom: 1px solid rgba(255, 107, 107, 0.05);
}

.section h2 {
    color: var(--text-main);
    font-size: 1.8rem;
    margin-bottom: 2rem;
    font-weight: 700;
    letter-spacing: 0;
    text-shadow: none;
    border-bottom: none;
    border-left: 3px solid var(--accent-primary);
    padding-left: 1rem;
    padding-bottom: 0;
    display: block;
}

.section h3 {
    color: var(--accent-primary);
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-shadow: none;
}

.section h4 {
    color: var(--text-white);
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    /* NO text-shadow for body text - clean and readable */
}

.section p {
    margin-bottom: 1rem;
    line-height: 1.8;
    color: var(--text-light);
    /* NO text-shadow for body text - clean and readable */
}

.section ul {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.section ul li {
    margin-bottom: 0.5rem;
    color: var(--text-light);
    /* NO text-shadow for body text - clean and readable */
}

.section ul li::marker {
    color: var(--accent-primary);
}

/* News Section - Glassmorphism */
.news-section {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 107, 107, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.news-section h3 {
    color: var(--accent-primary);
    font-size: 1rem;
    margin-top: 0;
    opacity: 0.8;
}

.news-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 107, 107, 0.08);
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.news-date {
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    margin-right: 1rem;
}

/* Topics Grid */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.topic-category {
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 107, 107, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.topic-category:hover {
    transform: translateY(-2px);
    background: rgba(50, 25, 25, 0.6);
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.1);
}

.topic-category h4 {
    margin-top: 0;
    color: var(--accent-primary);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Submission Types */
.submission-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.submission-type {
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent-primary);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.submission-type:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.1);
}

.submission-type h3 {
    margin-top: 0;
    color: var(--accent-primary);
    text-shadow: none;
}

/* Important Dates */
.dates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.date-item {
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 107, 107, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.date-item:hover {
    transform: translateY(-2px);
    background: rgba(50, 25, 25, 0.6);
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.1);
}

.date-item h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--accent-primary);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: none;
}

.dates-list {
    list-style: none;
    margin-left: 0;
}

.dates-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 107, 107, 0.08);
    color: var(--text-sub);
}

.dates-list li strong {
    color: var(--text-main);
}

.dates-list li:last-child {
    border-bottom: none;
}

.note {
    font-style: italic;
    color: var(--text-light);
    background: rgba(214, 51, 108, 0.05);
    padding: 1rem;
    border-left: 3px solid var(--accent-primary);
    margin: 1rem 0;
    border-radius: 4px;
    /* NO text-shadow for body text - clean and readable */
}

/* Tables */
.dates-table {
    margin-top: 2rem;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(214, 51, 108, 0.3);
}

table thead {
    background: rgba(214, 51, 108, 0.15);
    color: var(--text-white);
}

table th {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(214, 51, 108, 0.3);
    color: var(--accent-hover);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    /* NO text-shadow for body text - clean and readable */
}

table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(214, 51, 108, 0.1);
    color: var(--text-light);
    /* NO text-shadow for body text - clean and readable */
}

table tbody tr:hover {
    background: rgba(214, 51, 108, 0.05);
}

/* TBA Styling */
.tba {
    color: #999;
    font-style: italic;
}

/* Button Link */
.btn-link {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: var(--text-white) !important;
    text-decoration: none !important;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid var(--accent-primary);
}

.btn-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(214, 51, 108, 0.3);
}

/* Program Highlights */
.program-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.highlight-item {
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent-primary);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.highlight-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.1);
}

.highlight-item h3 {
    margin-top: 0;
    color: var(--accent-primary);
    text-shadow: none;
}

/* Schedule Overview */
.schedule-overview {
    margin-top: 2rem;
}

.day-schedule {
    background: rgba(26, 26, 46, 0.6);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(214, 51, 108, 0.3);
}

.day-schedule h3 {
    margin-top: 0;
    color: var(--accent-primary);
    border-bottom: 2px solid rgba(214, 51, 108, 0.3);
    padding-bottom: 0.5rem;
    text-shadow: none;
}

.day-schedule h4 {
    color: var(--accent-hover);
    margin-top: 1rem;
    /* NO text-shadow for body text - clean and readable */
}

/* Tracks Grid */
.tracks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.track-item {
    background: rgba(26, 26, 46, 0.6);
    padding: 1.5rem;
    border-radius: 8px;
    border-top: 2px solid var(--accent-hover);
    transition: all 0.3s ease;
}

.track-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(214, 51, 108, 0.1);
}

.track-item h4 {
    margin-top: 0;
    color: var(--accent-hover);
    /* NO text-shadow for body text - clean and readable */
}

/* Registration */
.registration-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.reg-type {
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    border-top: 3px solid var(--accent-primary);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.reg-type h3, .reg-type h4 {
    margin-top: 0;
    color: var(--accent-primary);
    text-shadow: none;
}

.price {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent-hover);
    margin: 1rem 0;
    /* NO text-shadow for body text - clean and readable */
}

.registration-note {
    background: rgba(26, 26, 46, 0.6);
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
    border-left: 3px solid var(--accent-primary);
}

/* Practical Info */
.venue-info-box {
    background: rgba(26, 26, 46, 0.6);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(214, 51, 108, 0.3);
    margin-top: 2rem;
}

.useful-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.info-item {
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 107, 107, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.info-item h3 {
    margin-top: 0;
    color: var(--accent-primary);
    font-size: 1.2rem;
    text-shadow: none;
}

/* Sponsors */
.sponsorship-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.sponsor-tier {
    background: rgba(26, 26, 46, 0.6);
    padding: 2rem;
    border-radius: 8px;
    border-top: 4px solid;
    transition: all 0.3s ease;
}

.sponsor-tier:hover {
    transform: translateY(-3px);
}

.sponsor-tier.platinum {
    border-color: #e5e4e2;
    box-shadow: 0 4px 15px rgba(229, 228, 226, 0.1);
}

.sponsor-tier.gold {
    border-color: #ffd700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);
}

.sponsor-tier.silver {
    border-color: #c0c0c0;
    box-shadow: 0 4px 15px rgba(192, 192, 192, 0.1);
}

.sponsor-tier.bronze {
    border-color: #cd7f32;
    box-shadow: 0 4px 15px rgba(205, 127, 50, 0.1);
}

.sponsor-tier h3 {
    margin-top: 0;
    color: var(--accent-primary);
    text-shadow: none;
}

.sponsor-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--accent-hover);
    margin: 1rem 0;
    /* NO text-shadow for body text - clean and readable */
}

.special-sponsorships {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.special-item {
    background: rgba(26, 26, 46, 0.6);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.special-item h3 {
    margin-top: 0;
    color: var(--accent-primary);
    text-shadow: none;
}

.cooperation-section {
    text-align: center;
    padding: 2rem;
}

.coop-logo h3 {
    color: var(--accent-primary);
    font-size: 2.5rem;
    text-shadow: 0 0 4px rgba(214, 51, 108, 0.3);
}

.sponsor-list h3 {
    color: var(--accent-hover);
    margin-top: 2rem;
    border-bottom: 2px solid rgba(214, 51, 108, 0.3);
    padding-bottom: 0.5rem;
}

.contact-box {
    background: rgba(26, 26, 46, 0.6);
    padding: 2rem;
    border-radius: 8px;
    margin-top: 2rem;
    text-align: center;
    border: 1px solid rgba(214, 51, 108, 0.3);
}

/* Links */
a {
    color: var(--accent-hover);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--accent-primary);
}

/* Footer */
footer {
    background: #ffffff;
    color: var(--text-sub);
    padding: 3rem 0;
    text-align: center;
    border-top: 1px solid var(--glass-border);
}

.footer-logos {
    margin-top: 1.5rem;
}

.footer-title {
    font-size: 3.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5rem;
}

.footer-cooperation-text {
    font-size: 2.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.75rem;
}

footer a {
    color: var(--accent-primary);
}

footer a:hover {
    color: var(--accent-hover);
}

footer p {
    margin-bottom: 0.5rem;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 1002;
    position: relative;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-light);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger .menu-text {
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-light);
    background: none;
    height: auto;
    width: auto;
    border-radius: 0;
    transition: color 0.3s ease;
}

.hamburger:hover .menu-text {
    color: var(--accent-primary);
}

.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        background: rgba(15, 10, 10, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 80px 20px 40px;
        transition: right 0.3s ease;
        z-index: 1001;
        overflow-y: auto;
        border-left: 1px solid var(--glass-border);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu > li {
        border-bottom: 1px solid var(--glass-border);
    }

    .nav-menu li a {
        padding: 1rem;
        text-align: left;
        font-size: 0.9rem;
    }

    .nav-menu .dropdown-menu {
        position: static;
        display: none;
        background: rgba(20, 15, 15, 0.5);
        border: none;
        box-shadow: none;
        min-width: 100%;
        margin: 0;
        padding-left: 1rem;
    }

    .nav-menu .dropdown.active .dropdown-menu {
        display: block;
    }

    .nav-menu .dropdown-menu li {
        border-bottom: none;
    }

    .nav-menu .dropdown-menu li a {
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
    }

    /* Overlay when menu is open */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .nav-overlay.active {
        display: block;
    }

    nav .container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .hero {
        min-height: 400px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero h2 {
        font-size: 1.4rem;
    }

    .hero h1::before {
        font-size: 3rem;
        top: -50px;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .section h2 {
        font-size: 1.8rem;
    }

    .submission-types,
    .dates-grid,
    .registration-types,
    .topics-grid,
    .program-highlights,
    .tracks-grid,
    .useful-info-grid,
    .sponsorship-tiers,
    .special-sponsorships {
        grid-template-columns: 1fr;
    }

    .dates-table {
        font-size: 0.9rem;
    }

    table th,
    table td {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .hero h2 {
        font-size: 1.2rem;
    }

    .section {
        padding: 2rem 0;
    }

    .section h2 {
        font-size: 1.5rem;
    }
}