/* ============================================
   DEFCON — Main Stylesheet
   ============================================ */

:root {
    --blue:      #234c8f;
    --blue-dark: #111a34;
    --blue-mid:  #18264f;
    --cyan:      #00a7b5;
    --cyan-light:#dff6f2;
    --amber:     #f2b84b;
    --coral:     #e66f5c;
    --white:     #ffffff;
    --gray-50:   #f8fafc;
    --gray-100:  #f0f4f8;
    --gray-200:  #e2e8f0;
    --gray-500:  #64748b;
    --gray-700:  #374151;
    --text:      #1a1a2e;
    --nav-h:     64px;
    --radius:    16px;
    --radius-lg: 24px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: #edf5f4;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 背景リップルキャンバス（Deaf = 振動・波紋） */
#bg-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }


/* ============================================
   NAVIGATION
   ============================================ */
#navbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--nav-h);
    background: rgba(17,26,52,0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1000;
    transition: background var(--transition), box-shadow var(--transition);
}
#navbar.scrolled {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.9);
    transition: color var(--transition);
}
#navbar.scrolled .nav-brand { color: var(--blue); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-links a {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    transition: background var(--transition), color var(--transition);
}
.nav-links a:hover { background: rgba(255,255,255,0.12); color: #fff; }
#navbar.scrolled .nav-links a { color: var(--gray-700); }
#navbar.scrolled .nav-links a:hover { background: var(--gray-100); color: var(--blue); }

.nav-apply {
    border: 1.5px solid rgba(255,255,255,0.5) !important;
}
.nav-apply:hover { border-color: rgba(255,255,255,0.9) !important; }
#navbar.scrolled .nav-apply {
    background: var(--blue) !important;
    color: var(--white) !important;
    border-color: transparent !important;
}

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: none; border: none; cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
#navbar.scrolled .nav-toggle span { background: var(--blue); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    min-height: 100svh;
    background:
        radial-gradient(circle at 18% 26%, rgba(242, 184, 75, 0.22), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(0, 167, 181, 0.24), transparent 30%),
        linear-gradient(145deg, #111a34 0%, #1b2f5f 48%, #114f5c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h) + 48px) 24px 100px;
    overflow: hidden;
}

/* Canvas（パーティクル） */
#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 光の球 */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}
.hero-blob--1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(242,184,75,0.20) 0%, transparent 70%);
    top: -100px; right: -150px;
    animation: blobFloat 10s ease-in-out infinite;
}
.hero-blob--2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(0,167,181,0.22) 0%, transparent 70%);
    bottom: 50px; left: -100px;
    animation: blobFloat 14s ease-in-out infinite reverse;
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -40px) scale(1.05); }
    66%       { transform: translate(-20px, 20px) scale(0.97); }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
}

.hero-eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 5px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 0.8s ease forwards 0.2s;
}

.hero-logo-wrap {
    width: min(300px, 54vw);
    margin: 0 auto 20px;
    background: transparent;
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    animation: popIn 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards 0.4s;
}
.hero-emblem {
    width: 100%;
    height: auto;
    border-radius: 28px;
    /* 白背景PNGの輪郭を自然に馴染ませるグロー */
    filter:
        drop-shadow(0 0 36px rgba(242, 184, 75, 0.28))
        drop-shadow(0 8px 32px rgba(0, 0, 0, 0.5));
}

@keyframes popIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
}
.hero-title-line {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: clamp(2.15rem, 6.4vw, 4.6rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.8s ease forwards;
}
.hero-title-line:nth-child(1) { animation-delay: 0.55s; }
.hero-title-accent {
    animation-delay: 0.7s !important;
    background: linear-gradient(90deg, #f2b84b, #ffe08c, #00c2cb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-catch {
    font-family: "Inter", sans-serif;
    font-size: clamp(1.1rem, 2.4vw, 1.55rem);
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(255,255,255,0.82);
    margin-bottom: 18px;
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 0.85s;
}

.hero-tagline {
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    color: rgba(255,255,255,0.88);
    line-height: 2;
    margin-bottom: 36px;
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 0.95s;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 6px;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 1.05s;
}
.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
}
.hero-meta-item i { color: var(--amber); font-size: 0.8rem; }
.hero-meta-sep { color: rgba(255,255,255,0.2); font-size: 0.7rem; }

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 1.15s;
}

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ボタン */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 38px;
    background: linear-gradient(90deg, var(--amber) 0%, #ffe08c 100%);
    color: #040e24;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50px;
    box-shadow: 0 0 0 0 rgba(0,194,203,0.5);
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background 0.2s;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: 15px 34px;
    border: 1.5px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    font-size: 1rem;
    border-radius: 50px;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

/* ウェーブ分割 */
.wave-bottom {
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    line-height: 0;
    pointer-events: none;
}
.wave-bottom svg { width: 100%; display: block; }


/* ============================================
   共通セクション
   ============================================ */
.section { padding: 100px 24px; position: relative; z-index: 1; }
.container { max-width: 960px; margin: 0 auto; }

.section-label {
    font-family: "Inter", sans-serif;
    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--cyan);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.section-heading {
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--blue);
    line-height: 1.25;
    margin-bottom: 52px;
}


/* ============================================
   ABOUT
   ============================================ */
.section-about {
    background: rgba(210, 232, 255, 0.42);
    padding-top: 120px;
}

.bg-blob {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(75px);
    opacity: 0.9;
}

/* ── About ── */
.bg-blob--about-1 {
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(0,194,203,0.40) 0%, transparent 60%);
    top: -180px; right: -200px;
    animation: blobDrift 11s ease-in-out infinite;
}
.bg-blob--about-2 {
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(100,60,220,0.28) 0%, transparent 60%);
    bottom: -40px; left: -150px;
    animation: blobDrift 15s ease-in-out infinite reverse;
}
.bg-blob--about-3 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(10,79,168,0.30) 0%, transparent 60%);
    top: 40%; left: 40%;
    animation: blobDrift 19s ease-in-out infinite;
}

/* ── Organizer ── */
.bg-blob--organizer-1 {
    width: 850px; height: 850px;
    background: radial-gradient(circle, rgba(100,60,220,0.32) 0%, transparent 60%);
    top: -200px; left: -220px;
    animation: blobDrift 13s ease-in-out infinite;
}
.bg-blob--organizer-2 {
    width: 580px; height: 580px;
    background: radial-gradient(circle, rgba(0,194,203,0.35) 0%, transparent 60%);
    bottom: 0px; right: -150px;
    animation: blobDrift 17s ease-in-out infinite reverse;
}

/* ── Guests ── */
.bg-blob--guests-1 {
    width: 780px; height: 780px;
    background: radial-gradient(circle, rgba(0,194,203,0.38) 0%, transparent 60%);
    top: -150px; right: -180px;
    animation: blobDrift 10s ease-in-out infinite;
}
.bg-blob--guests-2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(100,60,220,0.30) 0%, transparent 60%);
    bottom: 20px; left: -140px;
    animation: blobDrift 14s ease-in-out infinite reverse;
}
.bg-blob--guests-3 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(10,79,168,0.28) 0%, transparent 60%);
    top: 30%; left: 30%;
    animation: blobDrift 20s ease-in-out infinite;
}

/* ── Apply ── */
.bg-blob--apply-1 {
    width: 720px; height: 720px;
    background: radial-gradient(circle, rgba(0,194,203,0.36) 0%, transparent 60%);
    top: -120px; right: -160px;
    animation: blobDrift 12s ease-in-out infinite;
}
.bg-blob--apply-2 {
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(100,60,220,0.26) 0%, transparent 60%);
    bottom: -80px; left: -130px;
    animation: blobDrift 16s ease-in-out infinite reverse;
}


@keyframes blobDrift {
    0%,  100% { transform: translate(0,    0)     scale(1);    }
    20%        { transform: translate(130px, -150px) scale(1.18); }
    45%        { transform: translate(-90px,  80px) scale(0.85); }
    70%        { transform: translate(100px, 110px) scale(1.12); }
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-bottom: 64px;
}

.about-lead {
    font-size: 1.05rem;
    color: var(--text);
    line-height: 2;
    margin-bottom: 16px;
}
.about-sub {
    font-size: 0.95rem;
    color: var(--gray-500);
    line-height: 2;
}

.feature-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    border-radius: var(--radius);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    margin-bottom: 14px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:last-child { margin-bottom: 0; }

.feature-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cyan-light);
    color: var(--blue);
    border-radius: 10px;
    font-size: 1.1rem;
}
.feature-card strong { display: block; font-weight: 700; color: var(--blue); margin-bottom: 3px; font-size: 0.95rem; }
.feature-card p { font-size: 0.82rem; color: var(--gray-500); line-height: 1.6; margin: 0; }

/* Stats */
.stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    background: linear-gradient(135deg, #040e24, #0A4FA8);
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: 0 8px 40px rgba(10,79,168,0.2);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 48px;
}
.stat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.stat-num {
    font-family: "Inter", sans-serif;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1;
}
.stat-unit {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cyan);
}
.stat-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
    margin-top: 8px;
}
.stat-icon {
    font-size: 2.4rem;
    color: var(--cyan);
    margin-bottom: 4px;
}
.stat-divider {
    width: 1px;
    height: 60px;
    background: rgba(255,255,255,0.12);
}


/* ============================================
   PEOPLE CARDS
   ============================================ */
.section-organizer {
    background: rgba(192, 218, 255, 0.42);
    padding-top: 120px;
}
.section-guests {
    background: rgba(210, 232, 255, 0.42);
    padding-top: 120px;
}



.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.person-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 36px 28px 28px;
    text-align: center;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    will-change: transform;
}
.section-organizer .person-card { background: var(--white); }
.section-guests    .person-card { background: var(--gray-50); }

/* カードホバーグロー */
.card-glow {
    --glow-color: rgba(0,194,203,0.15);
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle at 50% 0%, var(--glow-color), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

/* 写真 */
.person-photo-wrap {
    position: relative;
    width: 120px; height: 120px;
    margin: 0 auto 20px;
}
.person-photo-wrap img {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    position: relative; z-index: 1;
}
.avatar-placeholder {
    width: 120px; height: 120px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    position: relative; z-index: 1;
}
.person-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(0,194,203,0.3);
    animation: ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%       { transform: scale(1.06); opacity: 1; }
}

.person-role-badge {
    display: inline-block;
    background: rgba(10,79,168,0.1);
    color: var(--blue);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 10px 24px;
    border-radius: 50px;
    margin-bottom: 12px;
    white-space: nowrap;
}
.person-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}
.person-name small { font-size: 0.78rem; font-weight: 400; color: var(--gray-500); }
.person-desc {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.85;
    margin-bottom: 20px;
}
.person-links { display: flex; justify-content: center; gap: 10px; }
.social-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.85rem;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

/* C4C カード — フォーカス・ホバー時に紫 */
.person-card--c4c:hover,
.person-card--c4c:focus-within {
    border-color: rgba(112,48,160,0.35);
    box-shadow: 0 8px 40px rgba(112,48,160,0.18);
}
.person-card--c4c:hover .person-ring,
.person-card--c4c:focus-within .person-ring {
    border-color: rgba(112,48,160,0.6);
}


/* ============================================
   INFORMATION
   ============================================ */
.section-info {
    background: var(--blue-mid);
    padding-top: 120px;
}
.section-info::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,194,203,0.08) 0%, transparent 70%);
    top: -100px; right: -100px;
    pointer-events: none;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}
.info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius);
    padding: 22px 24px;
    transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.info-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,194,203,0.15);
    color: var(--cyan);
    border-radius: 10px;
    font-size: 1.05rem;
}
.info-body dt {
    font-family: "Inter", sans-serif;
    font-size: clamp(0.65rem, 1.2vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--cyan);
    margin-bottom: 3px;
}
.info-body dd {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    line-height: 1.5;
}


/* ============================================
   APPLY
   ============================================ */
.section-apply {
    background: rgba(210, 232, 255, 0.42);
}

.apply-box {
    position: relative;
    background: linear-gradient(135deg, #040e24 0%, #0A4FA8 50%, #007898 100%);
    border-radius: 32px;
    padding: 80px 40px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(10,79,168,0.3);
}

/* 3つの回転リング */
.apply-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.07);
    pointer-events: none;
}
.apply-ring--1 { width: 500px; height: 500px; top: -180px; right: -120px; animation: ringRotate 25s linear infinite; }
.apply-ring--2 { width: 320px; height: 320px; bottom: -130px; left: -80px;  animation: ringRotate 18s linear infinite reverse; }
.apply-ring--3 { width: 200px; height: 200px; top: 30px; left: 40px; animation: ringRotate 12s linear infinite; }
@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.apply-icon-wrap {
    margin: 0 auto 20px;
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.apply-icon {
    font-size: 2rem;
    color: var(--cyan);
    transform: rotate(-15deg);
}

.apply-eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 5px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 12px;
}
.apply-heading {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
}
.apply-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    line-height: 2;
    margin-bottom: 36px;
}
.btn-apply {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 48px;
    background: var(--white);
    color: var(--blue);
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 50px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    transition: transform var(--transition), box-shadow var(--transition);
}
.btn-apply i { transition: transform var(--transition); }

.apply-note {
    margin-top: 24px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
}


/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: #040e24;
    padding: 64px 24px 40px;
    text-align: center;
}
.footer-inner { max-width: 960px; margin: 0 auto; }

.footer-logo {
    width: 160px;
    margin: 0 auto 28px;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}
.footer-copy {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.22);
    font-family: "Inter", sans-serif;
    letter-spacing: 1px;
}


/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.reveal-up, .reveal-left, .reveal-right, .reveal-scale {
    transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1),
                transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal-up    { opacity: 0; transform: translateY(36px); }
.reveal-left  { opacity: 0; transform: translateX(-36px); }
.reveal-right { opacity: 0; transform: translateX(36px); }
.reveal-scale { opacity: 0; transform: scale(0.92); }

.reveal-up.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active {
    opacity: 1;
    transform: translate(0) scale(1);
}


/* ============================================
   タッチデバイス: ホバー演出をポインターデバイス限定に
   ============================================ */
@media (hover: hover) and (pointer: fine) {
    .person-card:hover .card-glow { opacity: 1; }
    .feature-card:hover { transform: translateX(6px); box-shadow: 0 4px 20px rgba(0,194,203,0.12); }
    .social-btn:hover { background: var(--blue); color: var(--white); transform: scale(1.15); }
    .social-btn--c4c:hover { background: #7030a0; color: var(--white); }
    .info-item:hover { background: rgba(255,255,255,0.09); transform: translateY(-3px); border-color: rgba(0,194,203,0.3); }
    .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,194,203,0.5); }
    .btn-primary:hover::after { background: rgba(255,255,255,0.1); }
    .btn-ghost:hover { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.07); color: #fff; }
    .btn-apply:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 36px rgba(0,0,0,0.3); }
    .btn-apply:hover i { transform: translateX(4px); }
}

/* ============================================
   RESPONSIVE — Tablet (≤ 768px)
   ============================================ */
@media (max-width: 768px) {
    :root { --nav-h: 60px; }

    /* ── ナビゲーション ── */
    .nav-toggle { display: flex; }
    .nav-brand {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 0;
        min-width: 0;
    }
    .nav-toggle { flex-shrink: 0; }
    .nav-links {
        position: fixed;
        top: var(--nav-h); left: 0; right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;          /* ← li を横幅いっぱいに */
        gap: 0;
        padding: 12px 0 20px;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s;
        z-index: 1001; /* navbar(1000) より上 */
    }
    .nav-links li { width: 100%; }
    .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
    .nav-links a {
        display: block;
        width: 100%; padding: 13px 28px;
        border-radius: 0;
        font-size: 1rem;
        color: var(--gray-700) !important;
        border-bottom: 1px solid var(--gray-100);
    }
    .nav-apply {
        display: block;
        margin: 12px 24px 0;
        width: auto !important;
        text-align: center;
        border-radius: 50px !important;
        border-bottom: none !important;
        background: var(--blue) !important;
        color: var(--white) !important;
    }

    /* ── Hero ── */
    .sp-br { display: block; }
    .hero-meta { flex-direction: column; gap: 10px; }
    .hero-meta-sep { display: none; }
    .hero-btns { flex-direction: column; align-items: center; }
    .btn-primary, .btn-ghost { width: 100%; max-width: 300px; justify-content: center; }

    /* ── About ── */
    .about-layout { grid-template-columns: 1fr; gap: 28px; }

    /* ── People grid: タブレットでは 2 列維持 ── */
    .people-grid { grid-template-columns: repeat(2, 1fr); }

    /* ── Stats ── */
    .stats-row { padding: 32px 16px; flex-direction: column; gap: 24px; }
    .stat-item { padding: 0 24px; }
    .stat-divider { display: none; }

    /* ── Info ── */
    .info-grid { grid-template-columns: repeat(2, 1fr); }

    /* ── Apply ── */
    .apply-box { padding: 52px 24px; border-radius: 24px; }

    /* ── セクション共通 ── */
    .section { padding: 72px 20px; }
    .section-heading { margin-bottom: 40px; }
}

/* ============================================
   RESPONSIVE — Large Mobile (≤ 600px)
   ============================================ */
@media (max-width: 600px) {
    /* 2 列が窮屈になるので 1 列に切り替え */
    .people-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .info-grid { grid-template-columns: 1fr; }

    .hero-title-line { font-size: clamp(1.9rem, 8vw, 3rem); }
    .section { padding: 64px 18px; }
}

/* ============================================
   RESPONSIVE — Mobile (≤ 480px)
   ============================================ */
@media (max-width: 480px) {
    /* ── Hero blob を縮小（はみ出し抑制） ── */
    .hero-blob--1 { width: 320px; height: 320px; top: -60px; right: -80px; }
    .hero-blob--2 { width: 240px; height: 240px; bottom: 20px; left: -60px; }

    /* ── テキスト ── */
    .section-heading { font-size: 1.6rem; margin-bottom: 32px; }
    .hero-title-line { font-size: clamp(1.7rem, 9vw, 2.6rem); }

    /* ── People card ── */
    .person-card { padding: 24px 18px 18px; }
    .people-grid { max-width: 100%; }

    /* ── Stats ── */
    .stat-item { padding: 0 16px; }

    /* ── Info ── */
    .info-item { padding: 14px 16px; gap: 12px; }

    /* ── Apply ── */
    .apply-box { padding: 44px 20px; }
    .btn-apply { padding: 14px 32px; font-size: 0.95rem; }

    /* ── Footer ── */
    .footer-logo { width: 120px; }

    /* ── セクション共通 ── */
    .section { padding: 56px 16px; }
}

/* ============================================
   FESTIVAL POSTER LAYOUT
   ============================================ */
body {
    background:
        linear-gradient(90deg, rgba(16,90,84,0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16,90,84,0.06) 1px, transparent 1px),
        #f4f1ea;
    background-size: 34px 34px;
}

.hero-blob,
.bg-blob,
.wave-bottom {
    display: none;
}

.container,
.nav-container,
.footer-inner {
    max-width: 1120px;
}

#navbar.scrolled {
    background: rgba(246, 241, 232, 0.94);
}

.nav-brand {
    max-width: 440px;
}

.hero {
    min-height: 96svh;
    align-items: stretch;
    justify-content: center;
    text-align: left;
    padding: calc(var(--nav-h) + 36px) 28px 48px;
    background:
        linear-gradient(90deg, rgba(46,230,198,0.10) 1px, transparent 1px),
        linear-gradient(180deg, rgba(46,230,198,0.10) 1px, transparent 1px),
        radial-gradient(circle at 12% 88%, rgba(46,230,198,0.18), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(242,184,75,0.24), transparent 24%),
        linear-gradient(135deg, #0c1530 0%, #133054 52%, #0a5f6a 100%);
    background-size: 40px 40px, 40px 40px, auto, auto, auto;
}

.hero-content {
    width: min(1120px, 100%);
    max-width: none;
    min-height: calc(96svh - var(--nav-h) - 84px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas:
        "eyebrow logo"
        "title logo"
        "brand logo"
        "catch meta"
        "tagline meta"
        "buttons ticket";
    align-content: center;
    gap: 12px 48px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 28px;
    padding: clamp(24px, 5vw, 56px);
    box-shadow: 0 30px 90px rgba(0,0,0,0.25);
    overflow: hidden;
}

.hero-content::before {
    content: "ENGINEERING / ACCESSIBILITY / DIALOGUE / COEXISTENCE";
    position: absolute;
    right: 28px;
    bottom: 18px;
    writing-mode: vertical-rl;
    font-family: "Inter", sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.22);
}

.hero-eyebrow {
    grid-area: eyebrow;
    margin: 0 0 8px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.58);
}

.hero-logo-wrap {
    grid-area: logo;
    width: min(100%, 360px);
    align-self: start;
    justify-self: end;
    margin: 0;
}

.hero-emblem {
    width: min(100%, 300px);
    margin-left: auto;
    border-radius: 18px;
    filter:
        drop-shadow(0 18px 36px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 28px rgba(242,184,75,0.18));
}

.hero-speakers {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 184px;
    margin-top: 14px;
    padding-right: 2px;
    gap: 8px;
}

.hero-speaker-card {
    --slant: -10deg;
    --lift: 0px;
    position: relative;
    width: 104px;
    height: 166px;
    overflow: hidden;
    border: 0;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 20px 36px rgba(16,36,74,0.22);
    clip-path: polygon(19% 0, 100% 0, 81% 100%, 0 100%);
    transform: translateY(var(--lift)) skewX(var(--slant));
    transform-origin: bottom center;
}

.hero-speaker-card::before,
.hero-speaker-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.hero-speaker-card::before {
    border: 3px solid rgba(255,255,255,0.78);
    clip-path: polygon(19% 0, 100% 0, 81% 100%, 0 100%);
}

.hero-speaker-card::after {
    background: linear-gradient(105deg, rgba(255,255,255,0.32), transparent 38%, rgba(16,36,74,0.12));
}

.hero-speaker-card:nth-child(1) {
    --lift: 0;
    z-index: 1;
}

.hero-speaker-card:nth-child(2) {
    --lift: 0;
    z-index: 3;
}

.hero-speaker-card:nth-child(3) {
    --lift: 0;
    z-index: 2;
}

.hero-speaker-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
    transform: skewX(calc(var(--slant) * -1)) scale(1.18);
}

.hero-speaker-card:nth-child(2) img,
.hero-speaker-card:nth-child(3) img {
    object-position: center 18%;
}

.hero-title {
    grid-area: title;
    margin: 0;
}

.hero-title-line {
    font-size: clamp(3rem, 8.2vw, 7.4rem);
    line-height: 0.94;
    letter-spacing: 0;
}

.brand-accent {
    color: var(--amber);
}

.hero-brand-full {
    grid-area: brand;
    margin: 8px 0 0;
    font-family: "Inter", sans-serif;
    font-size: clamp(0.78rem, 1.4vw, 1rem);
    font-weight: 800;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.62);
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 0.78s;
}

.hero-catch {
    grid-area: catch;
    max-width: 760px;
    margin: 0;
    font-size: clamp(1.6rem, 4.4vw, 3.2rem);
    line-height: 1.22;
}

.hero-tagline {
    grid-area: tagline;
    max-width: 680px;
    margin: 6px 0 22px;
    font-size: clamp(0.98rem, 1.7vw, 1.18rem);
    line-height: 2;
}

.hero-meta {
    grid-area: meta;
    align-self: end;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.07);
}

.hero-meta-item {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.hero-meta-item:last-of-type {
    border-bottom: 0;
}

.hero-meta-sep {
    display: none;
}

.hero-btns {
    grid-area: buttons;
    justify-content: flex-start;
    margin: 0;
}

.hero-ticket {
    grid-area: ticket;
    align-self: end;
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 16px;
    background: var(--amber);
    color: #111a34;
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    line-height: 1.35;
}

.section {
    padding: 120px 28px;
}

.section-label {
    width: fit-content;
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    letter-spacing: 3px;
}

.section-heading {
    margin-bottom: 32px;
    color: #111a34;
    letter-spacing: 0;
}

.section-about,
.section-organizer,
.section-guests,
.section-apply {
    background: transparent;
}

.about-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 36px;
    align-items: start;
}

.concept-panel {
    position: relative;
    padding: clamp(28px, 5vw, 56px);
    border-radius: 18px;
    background: #fffaf0;
    border: 2px solid #111a34;
    box-shadow: 10px 10px 0 #111a34;
}

.concept-panel::after {
    content: "CONCEPT";
    position: absolute;
    right: 18px;
    top: 18px;
    font-family: "Inter", sans-serif;
    font-size: clamp(2.2rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 0.8;
    color: rgba(17,26,52,0.06);
    pointer-events: none;
}

.about-lead {
    font-size: clamp(1.05rem, 2vw, 1.24rem);
    font-weight: 700;
    color: #111a34;
}

.about-sub {
    color: #435064;
}

.program-list {
    counter-reset: program;
    display: grid;
    gap: 14px;
    align-content: start;
}

.feature-card {
    counter-increment: program;
    position: relative;
    min-height: auto;
    margin: 0;
    padding: 22px 22px 22px 76px;
    border: 2px solid #111a34;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 6px 6px 0 rgba(17,26,52,0.22);
}

.feature-card::before {
    content: "0" counter(program);
    position: absolute;
    left: 18px;
    top: 20px;
    font-family: "Inter", sans-serif;
    font-weight: 900;
    color: var(--coral);
}

.feature-icon {
    display: none;
}

.feature-card strong {
    color: #111a34;
    font-size: 1rem;
}

.feature-card p {
    color: #596473;
    font-size: 0.86rem;
}

.stats-row {
    position: relative;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    border: 2px solid #111a34;
    border-radius: 18px;
    background: #111a34;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.18);
    overflow: hidden;
}

.stat-item {
    flex: 1 1 0;
    min-width: 220px;
    padding: 30px 26px;
}

.stat-num {
    color: #fffaf0;
}

.stat-unit,
.stat-label {
    color: var(--amber);
}

.stat-divider {
    height: 112px;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.5) 0 8px, transparent 8px 16px);
}

.section-organizer .section-heading,
.section-guests .section-heading {
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: clamp(2.5rem, 8vw, 5.6rem);
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
}

.people-grid {
    counter-reset: lineup;
    gap: 22px;
}

.person-card {
    counter-increment: lineup;
    padding: 0;
    border: 2px solid #111a34;
    border-radius: 16px;
    background: #fffaf0 !important;
    text-align: left;
    box-shadow: 8px 8px 0 rgba(17,26,52,0.22);
}

.person-card::before {
    content: "LINEUP 0" counter(lineup);
    display: block;
    padding: 12px 18px;
    background: #111a34;
    color: var(--amber);
    font-family: "Inter", sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.person-photo-wrap {
    width: 100%;
    height: 400px;
    margin: 0;
    border-radius: 0;
    background: #e8f4f2;
    overflow: hidden;
}

.person-photo-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    object-fit: cover;
    object-position: center 14%;
}

.section-guests .person-photo-wrap {
    background: #eef3f1;
}

.person-card--organizer .person-photo-wrap {
    background: linear-gradient(135deg, #f8fffb, #edf7ff);
}

.person-card--c4c .person-photo-wrap img {
    object-position: center;
}

.person-ring,
.card-glow {
    display: none;
}

.person-role-badge,
.person-name,
.person-desc,
.person-links {
    margin-left: 22px;
    margin-right: 22px;
}

.person-role-badge {
    margin-top: 22px;
    border-radius: 999px;
    background: #e7f5f4 !important;
    color: #0b6a73 !important;
}

.person-name {
    font-size: 1.35rem;
}

.person-desc {
    color: #596473;
}

.person-links {
    justify-content: flex-start;
    margin-bottom: 24px;
}

.section-info {
    background: #111a34;
    padding-top: 120px;
}

.section-info::before {
    display: none;
}

.info-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 2px solid rgba(255,255,255,0.72);
    border-radius: 18px;
    overflow: hidden;
}

.info-item {
    border: 0;
    border-right: 1px solid rgba(255,255,255,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.22);
    border-radius: 0;
    background: rgba(255,255,255,0.06);
    padding: 26px;
}

.info-icon {
    background: var(--amber);
    color: #111a34;
}

.info-body dt {
    color: var(--amber);
}

.section-apply {
    padding-bottom: 120px;
}

.apply-box {
    border: 2px solid #111a34;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.06) 1px, transparent 1px),
        #0b6a73;
    background-size: 34px 34px;
    box-shadow: 10px 10px 0 #111a34;
}

.apply-ring {
    display: none;
}

.apply-icon-wrap {
    border-radius: 999px;
    background: var(--amber);
}

.apply-icon {
    color: #111a34;
}

.btn-apply {
    border: 2px solid #111a34;
    box-shadow: 5px 5px 0 #111a34;
}

.footer {
    background: #111a34;
}

@media (max-width: 900px) {
    .hero-content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "logo"
            "title"
            "brand"
            "catch"
            "tagline"
            "meta"
            "buttons"
            "ticket";
        min-height: auto;
        text-align: center;
    }

    .hero-logo-wrap,
    .hero-btns {
        justify-self: center;
        justify-content: center;
    }

    .hero-logo-wrap {
        width: min(100%, 360px);
    }

    .hero-emblem {
        margin-right: auto;
    }

    .about-layout {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hero {
        padding: calc(var(--nav-h) + 18px) 14px 28px;
    }

    .hero-content {
        padding: 18px;
        border-radius: 18px;
        gap: 8px;
    }

    .hero-content::before {
        display: none;
    }

    .hero-title-line {
        font-size: clamp(1.9rem, 12vw, 3.25rem);
    }

    .hero-catch {
        font-size: clamp(1.18rem, 6.8vw, 1.9rem);
    }

    .hero-logo-wrap {
        width: min(300px, 82vw);
    }

    .hero-emblem {
        width: min(210px, 56vw);
    }

    .hero-speakers {
        justify-content: center;
        height: 136px;
        margin-top: 10px;
        padding-right: 0;
        gap: 14px;
    }

    .hero-speaker-card {
        width: 78px;
        height: 126px;
    }

    .hero-tagline {
        font-size: 0.92rem;
        line-height: 1.75;
        margin-bottom: 10px;
    }

    .hero-meta-item {
        padding: 10px 12px;
        font-size: 0.78rem;
    }

    .hero-ticket {
        padding: 13px;
        font-size: 0.68rem;
    }

    .hero-meta {
        text-align: left;
    }

    .stats-row,
    .info-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .stat-divider {
        display: none;
    }

    .person-photo-wrap {
        height: 320px;
    }

    .concept-panel,
    .person-card,
    .apply-box,
    .stats-row {
        box-shadow: 6px 6px 0 #111a34;
    }
}

/* ============================================
   BRIGHT INVITING THEME + INTRO
   ============================================ */
:root {
    --blue:      #1957a6;
    --blue-dark: #12305f;
    --blue-mid:  #dff4f2;
    --cyan:      #00aeb8;
    --cyan-light:#e5fbf7;
    --amber:     #ffd15a;
    --coral:     #ff7d66;
    --cream:     #fff7e5;
    --mint:      #dff8ef;
    --ink:       #10244a;
    --text:      #17233d;
}

body {
    background:
        radial-gradient(circle at 18% 12%, rgba(255,209,90,0.34), transparent 22%),
        radial-gradient(circle at 86% 20%, rgba(0,174,184,0.22), transparent 24%),
        linear-gradient(90deg, rgba(16,36,74,0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16,36,74,0.035) 1px, transparent 1px),
        #fffaf0;
    background-size: auto, auto, 36px 36px, 36px 36px, auto;
}

#navbar {
    background: rgba(255,250,240,0.72);
    border-bottom: 1px solid rgba(16,36,74,0.08);
}

#navbar.scrolled {
    background: rgba(255,250,240,0.96);
}

.nav-brand,
.nav-links a {
    color: var(--ink);
}

.nav-toggle span,
#navbar.scrolled .nav-toggle span {
    background: var(--ink);
}

#navbar.scrolled .nav-brand,
#navbar.scrolled .nav-links a {
    color: var(--ink);
}

.nav-apply,
#navbar.scrolled .nav-apply {
    background: var(--amber) !important;
    color: var(--ink) !important;
    border-color: rgba(16,36,74,0.18) !important;
}

.hero {
    background:
        radial-gradient(circle at 18% 20%, rgba(255,209,90,0.48), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(0,174,184,0.30), transparent 26%),
        radial-gradient(circle at 72% 86%, rgba(255,125,102,0.20), transparent 30%),
        linear-gradient(90deg, rgba(16,36,74,0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16,36,74,0.055) 1px, transparent 1px),
        linear-gradient(135deg, #fff7e5 0%, #edfdf8 48%, #dff4ff 100%);
    background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
}

#hero-canvas {
    opacity: 0.42;
}

.hero-content {
    background: rgba(255,255,255,0.58);
    border: 2px solid rgba(16,36,74,0.18);
    box-shadow: 0 24px 70px rgba(25,87,166,0.16);
}

.hero-content::before {
    color: rgba(16,36,74,0.22);
}

.hero-eyebrow,
.hero-brand-full,
.hero-tagline,
.hero-meta-item {
    color: rgba(16,36,74,0.78);
}

.hero-title-line,
.hero-catch {
    color: var(--ink);
}

.hero-title-accent {
    background: linear-gradient(90deg, #ffb84d, #ff7d66, #00aeb8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-meta {
    background: rgba(255,255,255,0.62);
    border-color: rgba(16,36,74,0.14);
}

.hero-meta-item {
    border-bottom-color: rgba(16,36,74,0.1);
}

.hero-meta-item i {
    color: var(--coral);
}

.btn-primary {
    background: linear-gradient(90deg, #ffcf4d 0%, #ffec96 100%);
    color: var(--ink);
    box-shadow: 0 12px 30px rgba(255,184,77,0.34);
}

.btn-ghost {
    border-color: rgba(16,36,74,0.24);
    color: var(--ink);
    background: rgba(255,255,255,0.48);
}

.section-heading,
.feature-card strong,
.person-name,
.about-lead {
    color: var(--ink);
}

.concept-panel,
.feature-card,
.person-card {
    border-color: rgba(16,36,74,0.32);
    box-shadow: 8px 8px 0 rgba(0,174,184,0.22);
}

.concept-panel,
.person-card {
    background: rgba(255,255,255,0.76) !important;
}

.feature-card {
    background: rgba(255,255,255,0.84);
}

.stats-row {
    background: linear-gradient(135deg, #ffffff, #e8fbf5);
    border-color: rgba(16,36,74,0.24);
    box-shadow: 8px 8px 0 rgba(255,209,90,0.35);
}

.stat-num {
    color: var(--blue);
}

.stat-unit,
.stat-label {
    color: #d46f00;
}

.stat-divider {
    background: repeating-linear-gradient(to bottom, rgba(16,36,74,0.22) 0 8px, transparent 8px 16px);
}

.person-card::before {
    background: var(--ink);
    color: var(--amber);
}

.section-info {
    background:
        radial-gradient(circle at 12% 12%, rgba(255,209,90,0.25), transparent 24%),
        linear-gradient(135deg, #e7fbf8, #f7fff6);
}

.section-info .section-heading {
    color: var(--ink) !important;
}

.info-grid {
    border-color: rgba(16,36,74,0.22);
    background: rgba(255,255,255,0.46);
}

.info-item {
    background: rgba(255,255,255,0.68);
    border-right-color: rgba(16,36,74,0.12);
    border-bottom-color: rgba(16,36,74,0.12);
}

.info-icon {
    background: var(--amber);
}

.info-body dt {
    color: #d46f00;
}

.info-body dd {
    color: var(--ink);
}

.hero-meta-item a,
.info-body dd a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.info-body dd a i {
    font-size: 0.72em;
    opacity: 0.72;
}

.apply-box {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,209,90,0.42), transparent 28%),
        linear-gradient(90deg, rgba(16,36,74,0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16,36,74,0.045) 1px, transparent 1px),
        linear-gradient(135deg, #effff8, #dff4ff);
    border-color: rgba(16,36,74,0.25);
    box-shadow: 8px 8px 0 rgba(25,87,166,0.18);
}

.apply-eyebrow {
    color: #d46f00;
}

.apply-heading {
    color: var(--ink);
}

.apply-desc,
.apply-note {
    color: rgba(16,36,74,0.68);
}

.btn-apply {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 5px 5px 0 rgba(255,209,90,0.9);
}

@media (min-width: 769px) {
    .floating-apply {
        position: fixed;
        right: 28px;
        bottom: 28px;
        z-index: 1200;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 18px 24px;
        border: 2px solid var(--ink);
        border-radius: 999px;
        background: linear-gradient(135deg, #ffcf4d, #ffec96);
        color: var(--ink);
        font-weight: 900;
        box-shadow: 6px 6px 0 rgba(16,36,74,0.22), 0 16px 34px rgba(255,184,77,0.32);
        transition: transform var(--transition), box-shadow var(--transition);
    }

    .floating-apply:hover {
        transform: translateY(-4px);
        box-shadow: 8px 8px 0 rgba(16,36,74,0.22), 0 20px 42px rgba(255,184,77,0.42);
    }

    .floating-apply i {
        font-size: 0.95rem;
        transition: transform var(--transition);
    }

    .floating-apply:hover i {
        transform: translateX(4px);
    }
}

.footer {
    background: #15305e;
}

.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,209,90,0.54), transparent 30%),
        radial-gradient(circle at 82% 22%, rgba(0,174,184,0.28), transparent 30%),
        linear-gradient(135deg, #fff7e5, #e7fbf8 58%, #dff4ff);
    color: var(--ink);
    pointer-events: none;
    animation: introExit 2.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.intro-screen::before {
    content: "";
    position: absolute;
    inset: 24px;
    border: 2px solid rgba(16,36,74,0.18);
    border-radius: 28px;
}

.intro-inner {
    position: relative;
    text-align: center;
    padding: 32px;
}

.intro-kicker {
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-size: clamp(0.7rem, 1.8vw, 0.95rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(16,36,74,0.62);
    margin-bottom: 18px;
    opacity: 0;
    animation: introRise 0.65s ease forwards 0.12s;
}

.intro-logo-text {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    font-family: "Inter", sans-serif;
    font-size: clamp(4rem, 16vw, 9rem);
    font-weight: 900;
    line-height: 0.84;
    letter-spacing: 0;
}

.intro-logo-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(32px);
}

.intro-logo-text span:first-child {
    animation: introRise 0.72s cubic-bezier(0.34,1.56,0.64,1) forwards 0.28s;
}

.intro-logo-text span:last-child {
    color: var(--amber);
    animation: introRise 0.72s cubic-bezier(0.34,1.56,0.64,1) forwards 0.42s;
}

.intro-message {
    margin-top: 24px;
    font-size: clamp(1rem, 3vw, 1.45rem);
    font-weight: 800;
    color: rgba(16,36,74,0.78);
    opacity: 0;
    animation: introRise 0.65s ease forwards 0.68s;
}

.intro-screen.is-hidden {
    display: none;
}

@keyframes introRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes introExit {
    0%, 72% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-18px);
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-screen {
        display: none;
    }
}

@media (max-width: 640px) {
    .intro-screen::before {
        inset: 14px;
        border-radius: 20px;
    }

    .concept-panel,
    .person-card,
    .apply-box,
    .stats-row {
        box-shadow: 5px 5px 0 rgba(0,174,184,0.22);
    }
}

/* ============================================
   IT / ENGINEERING ACCENTS（中間・テック配色）
   等幅フォント＋コード記号＋テックカラーで、
   社会テーマの落ち着きは保ちつつ技術色を効かせる
   ============================================ */
:root {
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace;
    --tech:      #10b6a0;  /* エレクトリックなミント/シアン（明るい面用） */
    --tech-glow: rgba(46,230,198,0.55);
}

/* セクションラベル（ABOUT / ORGANIZER …）を等幅化し、
   先頭に </> のコード記号をテックカラーで際立たせる */
.section-label {
    font-family: var(--mono);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tech);
    border-color: var(--tech);
    background: rgba(16,182,160,0.06);
}
.section-label::before {
    content: "</>";
    font-weight: 700;
    opacity: 0.9;
    letter-spacing: 0;
    text-shadow: 0 0 10px var(--tech-glow);
}

/* 見出しの左に細いテックカラーのアクセントバーを添える */
.section-heading {
    position: relative;
    padding-left: 18px;
}
.section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--tech), #2ee6c6);
    box-shadow: 0 0 12px var(--tech-glow);
}

/* ラテン文字だけの小見出し・チケット・情報ラベルを等幅に。
   （日本語が混じる hero-meta 等はフォールバックを避けるため対象外） */
.hero-eyebrow {
    font-family: var(--mono);
    font-weight: 500;
    color: #2ee6c6;
    text-shadow: 0 0 12px rgba(46,230,198,0.35);
}
.hero-ticket {
    font-family: var(--mono);
    letter-spacing: 0.5px;
}
.info-body dt {
    font-family: var(--mono);
    font-weight: 600;
    color: #2ee6c6;
}

/* ============================================
   NRI-STYLE LIGHT SPLASH（ヒーロー刷新）
   明るい/クリーンなコーポレート路線。斜めの
   半透明リボン＋ビル群シルエット＋大ワードマーク
   ============================================ */

/* ダーク演出を無効化（ライト路線に切替） */
#bg-canvas,
.hero-splash #hero-canvas { display: none; }

/* 全体ベースを明るく */
body {
    background: #ffffff;
}

/* ---- ヒーロー土台 ---- */
.hero-splash {
    position: relative;
    min-height: 100svh;
    display: block;
    padding: 0;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 82% 14%, rgba(96,158,224,0.38), rgba(96,158,224,0) 46%),
        linear-gradient(155deg, #1c4a86 0%, #163e73 46%, #0c2247 100%);
}

.splash-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ---- ビル群シルエット ---- */
.splash-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 58%;
}
.splash-skyline .skyline-back rect { fill: #bcd8f2; opacity: 0.12; }
.splash-skyline .skyline-front rect { fill: #d6e8f9; opacity: 0.14; }

/* ---- 斜めの半透明リボン ---- */
.splash-shape {
    position: absolute;
    transform: rotate(-33deg);
    transform-origin: center;
    border-radius: 8px;
}
.splash-shape--1 {
    width: 170vmax; height: clamp(150px, 22vh, 300px);
    top: -4%; left: -30%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 60%, rgba(255,255,255,0.25) 100%);
}
.splash-shape--2 {
    width: 170vmax; height: clamp(120px, 16vh, 230px);
    top: 26%; left: -24%;
    background: linear-gradient(90deg, rgba(150,200,240,0) 0%, rgba(150,200,240,0.30) 55%, rgba(120,180,230,0.14) 100%);
}
.splash-shape--3 {
    width: 170vmax; height: clamp(90px, 12vh, 170px);
    top: 54%; left: -18%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.18) 100%);
}
.splash-shape--4 {
    width: 170vmax; height: clamp(60px, 8vh, 120px);
    top: 12%; left: -10%;
    background: linear-gradient(90deg, rgba(200,225,250,0) 0%, rgba(200,225,250,0.18) 60%, rgba(200,225,250,0.06) 100%);
}

/* ---- 中央コンテンツ ---- */
.splash-content {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-h) + 24px) 24px 140px;
    gap: 0;
}
.splash-wordmark {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: clamp(3rem, 12vw, 9.5rem);
    letter-spacing: 0.14em;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 0 0.14em; /* 字間ぶんの右余白を相殺 */
    text-indent: 0.14em;
    text-shadow: 0 4px 40px rgba(6,20,45,0.45);
}
.splash-fullname {
    margin-top: clamp(14px, 2.4vh, 26px);
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(0.85rem, 2vw, 1.35rem);
    letter-spacing: 0.34em;
    color: rgba(214,230,248,0.9);
    text-transform: none;
    padding-left: 0.34em;
}
.splash-tagline {
    margin-top: clamp(22px, 3.4vh, 44px);
    font-size: clamp(1.1rem, 2.6vw, 1.75rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #ffffff;
    padding-left: 0.3em;
}
.splash-meta {
    margin-top: clamp(24px, 3.6vh, 44px);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: clamp(0.72rem, 1.4vw, 0.86rem);
    letter-spacing: 0.08em;
    color: rgba(198,216,240,0.85);
}
.splash-meta a { color: rgba(198,216,240,0.85); text-decoration: none; border-bottom: 1px solid rgba(198,216,240,0.4); padding-bottom: 1px; }
.splash-meta a:hover { color: #ffffff; }
.splash-meta-sep { opacity: 0.5; }

/* ---- NEWS（左下） ---- */
.splash-news {
    position: absolute;
    z-index: 2;
    left: clamp(20px, 6vw, 88px);
    bottom: clamp(24px, 5vh, 56px);
    right: clamp(20px, 6vw, 88px);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 22px;
    align-items: start;
    text-align: left;
}
.splash-news-label {
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.82rem;
    color: #17335c;
    padding-top: 2px;
}
.splash-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.splash-news-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: clamp(0.74rem, 1.3vw, 0.84rem);
    color: #3d566f;
    line-height: 1.7;
}
.splash-news-list time {
    font-family: var(--mono);
    color: #6f8aa8;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ---- ナビ: 青紺ヒーロー上（未スクロール）は透明＋白文字、スクロール後はクリーム＋ネイビー ---- */
#navbar:not(.scrolled) {
    background: transparent;
    border-bottom-color: transparent;
}
#navbar:not(.scrolled) .nav-brand,
#navbar:not(.scrolled) .nav-brand span,
#navbar:not(.scrolled) .nav-links a { color: #ffffff; }
#navbar:not(.scrolled) .nav-brand .brand-accent { color: var(--amber); }
#navbar:not(.scrolled) .nav-links a:hover { color: #ffffff; opacity: 0.8; }
#navbar:not(.scrolled) .nav-toggle span { background: #ffffff; }
#navbar:not(.scrolled) .nav-apply {
    background: #ffffff !important;
    color: #163e73 !important;
    border-color: transparent !important;
}

/* モバイル微調整 */
@media (max-width: 640px) {
    .splash-fullname { letter-spacing: 0.22em; }
    .splash-tagline { letter-spacing: 0.16em; }
    .splash-news { grid-template-columns: 1fr; gap: 8px; }
    .splash-content { padding-bottom: 180px; }
}

/* ============================================
   NRI CLEAN — 下層セクションを明るいコーポレート配色に
   （テック緑/ミント/</> を撤去 → ネイビー＋淡ブルー）
   ============================================ */

/* セクションラベル: コード記号を外しコーポレートブルーに */
.section-label {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    color: #2a6bb0;
    border-color: rgba(42,107,176,0.38);
    background: transparent;
    letter-spacing: 4px;
    text-shadow: none;
}
.section-label::before { content: none; }

/* 見出し: ネイビー統一、アクセントバーはグローなしの細いブルー */
.section-heading { color: #17335c; }
.section-heading::before {
    background: #2a6bb0;
    box-shadow: none;
    width: 3px;
}

/* Info: ダーク → ライト */
.section-info { background: #eef6fc; }
.section-info .section-heading { color: #17335c; }
.info-grid { border-color: rgba(23,51,92,0.14); }
.info-item {
    background: #ffffff;
    border-right: 1px solid rgba(23,51,92,0.10);
    border-bottom: 1px solid rgba(23,51,92,0.10);
}
.info-icon { background: #2a6bb0; color: #ffffff; }
.info-body dt { font-family: "Inter", sans-serif; color: #2a6bb0; }
.info-body dd { color: #33456a; }
.info-body dd a { color: #2a6bb0; }

/* カード: brutalist な黒枠＋ハード影 → やわらかいコーポレート調 */
.concept-panel,
.person-card,
.feature-card {
    border: 1px solid rgba(23,51,92,0.10);
    box-shadow: 0 14px 34px rgba(23,51,92,0.08);
}

/* 特長カードの連番: コーラル → コーポレートブルー */
.feature-card::before { color: #2a6bb0; }

/* スクロール後ナビ（明るい本文上）: クリーム背景＋ネイビー文字を確定 */
#navbar.scrolled {
    background: rgba(255,255,255,0.95);
    border-bottom-color: rgba(23,51,92,0.08);
}
#navbar.scrolled .nav-brand,
#navbar.scrolled .nav-brand span,
#navbar.scrolled .nav-links a { color: #17335c; }
#navbar.scrolled .nav-brand .brand-accent { color: var(--amber); }
#navbar.scrolled .nav-toggle span { background: #17335c; }

/* ============================================
   ABOUT = 未来創発風 中央マニフェスト
   （右カード廃止 → 1カラム中央寄せの宣言文）
   ============================================ */
.section-about {
    padding-top: clamp(90px, 12vh, 150px);
    padding-bottom: clamp(90px, 12vh, 150px);
    background: #ffffff;
}

.about-manifesto {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* このセクションのラベルは中央に */
.about-manifesto .section-label { margin: 0 auto; }

.manifesto-title {
    margin: 26px 0 0;
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: #17335c;
}
.manifesto-en {
    margin: 18px 0 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: clamp(0.82rem, 1.7vw, 1rem);
    letter-spacing: 0.28em;
    color: #2a6bb0;
    padding-left: 0.28em;
}

.manifesto-hook {
    margin: clamp(28px, 4vh, 40px) auto 0;
    max-width: 560px;
    padding: 18px 26px;
    border-left: 3px solid #00a7b5;
    background: rgba(0, 167, 181, 0.06);
    font-size: clamp(0.92rem, 1.8vw, 1.02rem);
    line-height: 1.9;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: #17335c;
    text-align: left;
}

.manifesto-body {
    margin-top: clamp(40px, 6vh, 64px);
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4.4vh, 46px);
}
.manifesto-body p {
    margin: 0;
    font-size: clamp(0.95rem, 1.9vw, 1.08rem);
    line-height: 2.35;
    letter-spacing: 0.08em;
    color: #3a5170;
    font-weight: 500;
}
.manifesto-body strong { color: #17335c; font-weight: 700; }
.manifesto-note {
    font-size: clamp(0.8rem, 1.5vw, 0.9rem) !important;
    letter-spacing: 0.14em !important;
    color: #7488a5 !important;
    line-height: 1.8 !important;
}

.manifesto-sign {
    margin-top: clamp(48px, 7vh, 78px);
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 2;
    color: #17335c;
}
.manifesto-sign span {
    display: inline-block;
    margin-top: 8px;
    font-family: "Inter", sans-serif;
    font-size: 0.66em;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #2a6bb0;
}

/* ============================================
   青白カラーへ統一（黄色/アンバーを排除）
   ============================================ */
:root { --amber: #2a6bb0; }   /* var(--amber) 経由の黄色を一括で青へ */

/* ブランドアクセント「CON」: 状態別の青 */
#navbar:not(.scrolled) .nav-brand .brand-accent { color: #9cccf0; }
#navbar.scrolled .nav-brand .brand-accent { color: #2a6bb0; }

/* ナビの申し込みボタン */
#navbar:not(.scrolled) .nav-apply {
    background: #ffffff !important;
    color: #163e73 !important;
    border-color: transparent !important;
}
#navbar.scrolled .nav-apply {
    background: #2a6bb0 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* ============================================
   フローティング申し込み: 画像バナー化
   PC = 右側追従の縦バナー＋上部ラベル
   SP = 下部固定・左に「参加申し込み」＋横バナー
   Aboutエリア到達で表示（JSが .is-visible を付与）
   ============================================ */
/* 旧ピル装飾リセット＋初期は非表示（About到達でフェードイン） */
.floating-apply {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    gap: 0 !important;
    color: inherit;
    text-decoration: none;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease, visibility .45s ease;
}
.floating-apply.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.floating-apply .apply-img { display: block; height: auto; }

/* --- スマホ既定: 画面下部に固定。左に「参加申し込み」＋横バナー --- */
.floating-apply {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: 0 -6px 20px rgba(12,34,71,0.22) !important;
}
.floating-apply-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #2a6bb0;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    writing-mode: vertical-rl;
    padding: 6px 7px;
}
.floating-apply .apply-img--sp { display: block; flex: 1 1 auto; width: 100%; min-width: 0; }
.floating-apply .apply-img--pc { display: none; }

/* --- PC: 右側追従の縦バナー（pc_apply）＋上部に「参加申し込み」ラベル --- */
@media (min-width: 769px) {
    .floating-apply {
        position: fixed;
        left: auto;
        right: 0;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: clamp(140px, 12vw, 178px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border-radius: 14px 0 0 14px !important;
        overflow: hidden;
        box-shadow: -8px 10px 30px rgba(12,34,71,0.30) !important;
        transition: opacity .45s ease, visibility .45s ease, box-shadow .3s ease;
    }
    /* hover/focus/active でも中央維持（旧 :hover の translateY(-4px) 上書きを無効化） */
    .floating-apply:hover,
    .floating-apply:focus,
    .floating-apply:focus-visible,
    .floating-apply:active {
        transform: translateY(-50%) !important;
    }
    .floating-apply.is-visible:hover {
        box-shadow: -12px 14px 36px rgba(12,34,71,0.42) !important;
    }
    .floating-apply-label {
        writing-mode: horizontal-tb;
        font-size: 0.8rem;
        letter-spacing: 0.16em;
        padding: 10px 6px;
    }
    .floating-apply .apply-img--pc { display: block; width: 100%; }
    .floating-apply .apply-img--sp { display: none; }
}

/* 旧アンバーのグロー影を青に（未使用CTA含め念のため） */
.btn-apply { box-shadow: 5px 5px 0 rgba(42,107,176,0.9) !important; }

/* LINEUP ラベルは白 */
.person-card::before { color: #ffffff; }

/* PC縦バナー: 画面が低いときは縮小してはみ出し防止 */
@media (min-width: 769px) and (max-height: 680px) {
    .floating-apply { width: clamp(108px, 9vw, 140px); }
}

/* スマホ: 下部固定バナーぶんの余白を確保（フッター等が隠れないように） */
@media (max-width: 768px) {
    body { padding-bottom: 33vw; }
}

/* ============================================
   ブランドロゴ（ナビ）
   ============================================ */
.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.brand-logo {
    height: 36px;
    width: auto;
    display: block;
}
@media (max-width: 768px) {
    .brand-logo { height: 30px; }
}

/* ============================================
   ヒーローCTA
   ============================================ */
.splash-cta {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.splash-cta-btn {
    display: inline-block;
    padding: 18px 56px;
    border-radius: 999px;
    background: linear-gradient(90deg, #00a7b5 0%, #1c7fd6 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 30px rgba(0, 167, 181, 0.35);
    transition: transform var(--transition), box-shadow var(--transition);
}
.splash-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 167, 181, 0.5);
}
@media (max-width: 768px) {
    .splash-cta-btn { padding: 16px 40px; font-size: 0.95rem; }
}

/* ============================================
   PROGRAM（タイムテーブル・パネルテーマ・おすすめ）
   ============================================ */
.section-program {
    background: #ffffff;
    padding-top: 120px;
}
.timetable {
    max-width: 620px;
    margin: 0 auto 80px;
    list-style: none;
    padding: 0;
}
.timetable li {
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(23, 51, 92, 0.10);
}
.timetable li:first-child { border-top: 1px solid rgba(23, 51, 92, 0.10); }
.tt-time {
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 500;
    color: #2a6bb0;
    min-width: 120px;
    white-space: nowrap;
}
.tt-label {
    font-weight: 500;
    color: #17335c;
}
.tt-label small {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 2px;
}
.tt-optional { background: #f4f9ff; }

.program-subheading {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: #17335c;
    margin-bottom: 36px;
    letter-spacing: 0.04em;
}
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 80px;
}
.theme-card {
    background: #ffffff;
    border: 1px solid rgba(23, 51, 92, 0.10);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: 0 14px 34px rgba(23, 51, 92, 0.08);
}
.theme-num {
    display: block;
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: #2a6bb0;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
}
.theme-card h4 {
    font-size: 1.08rem;
    font-weight: 700;
    color: #17335c;
    line-height: 1.5;
    margin-bottom: 12px;
}
.theme-card p {
    font-size: 0.9rem;
    line-height: 1.9;
    color: #33456a;
}

@media (max-width: 768px) {
    .timetable { margin-bottom: 64px; }
    .tt-time { min-width: 104px; font-size: 0.82rem; }
    .theme-grid { margin-bottom: 64px; }
}

/* 主催者カードのラベルは LINEUP ではなく ORGANIZER */
.person-card--organizer::before {
    content: "ORGANIZER 0" counter(lineup);
}

/* ============================================
   STATS（数字で見る現状）
   ============================================ */
.section-stats {
    position: relative;
    background: #0d1b3e;
    padding: 72px 24px 64px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px 32px;
    max-width: 1040px;
    margin: 0 auto 44px;
}
.stat-tile {
    text-align: center;
    padding: 0 12px;
}
.stat-value {
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
.stat-value em {
    font-style: normal;
    font-weight: 700;
    font-size: clamp(2.6rem, 4.6vw, 3.6rem);
    color: #4dd8e0;
    letter-spacing: 0;
    padding: 0 2px;
}
.stat-unit {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: #4dd8e0;
}
.stat-label {
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 8px;
}
.stat-source {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.04em;
}
.stats-lead {
    text-align: center;
    font-size: 1.02rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 2;
    letter-spacing: 0.06em;
}
.sp-only { display: none; }
@media (max-width: 768px) {
    .section-stats { padding: 56px 20px 48px; }
    .stats-grid { gap: 32px; margin-bottom: 36px; }
    .stat-label { font-size: clamp(0.72rem, 4vw, 0.92rem); }
    .stats-lead { font-size: 0.92rem; }
    .sp-only { display: inline; }
}

/* ============================================
   参加して得られること（ピル型リスト）
   ============================================ */
.takeaways { text-align: center; }
.takeaway-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
    max-width: 760px;
    margin: 0 auto;
}
.takeaway-list li {
    padding: 10px 22px;
    border-radius: 999px;
    background: #f0f7ff;
    border: 1px solid rgba(42, 107, 176, 0.22);
    color: #17335c;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}
@media (max-width: 768px) {
    .takeaway-list li { font-size: 0.85rem; padding: 9px 18px; }
}

/* ============================================
   ヒーローCTAの吹き出し（食事交流会告知）
   ============================================ */
.splash-cta { position: relative; }
.cta-bubble {
    position: absolute;
    top: -30px;
    right: -10px;
    z-index: 2;
    margin: 0;
    padding: 8px 16px;
    background: #fff7e0;
    border: 1.5px solid #f2b84b;
    border-radius: 999px;
    color: #6b4a12;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(16, 36, 74, 0.18);
    transform: rotate(-4deg);
}
.cta-bubble::after,
.cta-bubble::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}
.cta-bubble::after {
    left: 34px;
    bottom: -8px;
    border-width: 8px 6px 0 6px;
    border-color: #f2b84b transparent transparent transparent;
}
.cta-bubble::before {
    left: 35.5px;
    bottom: -6px;
    border-width: 7px 5px 0 5px;
    border-color: #fff7e0 transparent transparent transparent;
}
@media (max-width: 768px) {
    .cta-bubble {
        top: -36px;
        right: -6px;
        font-size: 0.7rem;
        padding: 7px 14px;
    }
    .cta-bubble::after { left: auto; right: 28px; }
    .cta-bubble::before { left: auto; right: 29.5px; }
}

/* ============================================
   Guests: パネルの浅い煽り文
   ============================================ */
.guest-teasers {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.guest-teaser {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 16px 20px;
    background: var(--gray-50);
    border-radius: var(--radius);
    font-size: 0.88rem;
    line-height: 1.7;
    font-weight: 500;
    color: #33456a;
}
.guest-teaser i {
    margin-top: 3px;
    font-size: 0.8rem;
    color: #00a7b5;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .guest-teasers { margin-top: 40px; gap: 12px; }
    .guest-teaser { font-size: 0.84rem; padding: 14px 18px; }
}

/* Guestsの説明文を一段階濃く */
.section-guests .person-desc {
    color: var(--gray-700);
}

/* "Deaf Engineer's Future Conference" 内の D/E/F/Con を強調 */
.dfc-letter {
    color: #f2b84b;
    font-weight: 700;
}