/* プレミアム・デザインシステム */
    :root {
      --bg-color: #f8fafc; 
      --panel-bg: rgba(255, 255, 255, 0.85); 
      --line: #e2e8f0; 
      --text-main: #0f172a; 
      --text-muted: #475569;
      --primary: #2563eb; 
      --accent-green: #059669; --accent-orange: #f59e0b; --accent-pink: #db2777; 
      --accent-purple: #7c3aed; --accent-cyan: #0891b2;
      
      --shadow-sm: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
      --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
      --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
      --shadow-hover: 0 25px 50px -12px rgba(37, 99, 235, 0.2);
      
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 28px;
      --wrap: min(1200px, 92vw);
    }
    
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { 
      color: var(--text-main); 
      font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; 
      line-height: 1.8; 
      background: var(--bg-color);
      background-image: radial-gradient(at 0% 0%, hsla(217,100%,97%,1) 0, transparent 50%), radial-gradient(at 100% 100%, hsla(280,100%,97%,1) 0, transparent 50%);
      background-attachment: fixed;
      overflow-x: hidden; 
      -webkit-font-smoothing: antialiased;
    }
    
    :focus-visible { outline: 3px solid var(--accent-orange); outline-offset: 4px; border-radius: 4px; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
    
    .wrap { width: var(--wrap); margin: 0 auto; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .section { padding: clamp(80px, 10vw, 140px) 0; }
    
    .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }

    /* Topbar */
    .topbar { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-sm); transition: all 0.3s ease; }
    .topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; min-height: 72px; }
    .logo-area h1 { font-size: 16px; font-weight: 900; letter-spacing: 0.02em; background: linear-gradient(135deg, var(--primary), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .logo-area p { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; margin-top: 2px; }
    .nav-links { display: flex; gap: 12px; align-items: center; }
    .nav-links a { font-size: 13px; font-weight: 700; padding: 12px 20px; border-radius: 999px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); background: rgba(241, 245, 249, 0.8); color: var(--text-main); }
    .nav-links a.btn-nav-accent { background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); color: #fff; box-shadow: 0 4px 12px rgba(219, 39, 119, 0.2); }
    .nav-links a:hover { transform: translateY(-2px); background: #fff; box-shadow: var(--shadow-md); color: var(--primary); }
    .nav-links a.btn-nav-accent:hover { filter: brightness(1.1); color: #fff; box-shadow: 0 8px 16px rgba(219, 39, 119, 0.3); }

    /* Hero */
    .hero-split { display: flex; align-items: center; justify-content: space-between; gap: 64px; text-align: left; }
    .hero-split-text { flex: 1; }
    .hero-split-video { flex: 0 0 min(400px, 100%); position: relative; }
    .hero-split-video::before { content: ''; position: absolute; inset: -20px; background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(124,58,237,0.2)); filter: blur(30px); z-index: -1; border-radius: 50%; }
    .hero-split-video video { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 4px solid rgba(255,255,255,0.8); background-color: #000; }
    
    .message-box { background: rgba(255, 255, 255, 0.9); border-left: 4px solid var(--primary); padding: 28px; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 32px 0; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }

    /* Layouts & Cards */
    .panel { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,1); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 64px); box-shadow: var(--shadow-md); margin-bottom: 32px; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .card { background: #fff; border-radius: var(--radius-md); padding: 40px; box-shadow: var(--shadow-sm); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; border: 1px solid rgba(226, 232, 240, 0.8); position: relative; display: flex; flex-direction: column; z-index: 1; }
    .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(37, 99, 235, 0.3); z-index: 2; }
    
    /* ロードマップ */
    .timeline-wrap { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 32px; position: relative; }
    .timeline-item { flex: 1; min-width: 300px; background: #fff; border-radius: var(--radius-md); padding: 40px; box-shadow: var(--shadow-sm); position: relative; border: 1px solid var(--line); transition: all 0.4s ease; }
    .timeline-item:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
    .timeline-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary), var(--accent-cyan)); border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .timeline-item.year2::before { background: linear-gradient(90deg, var(--accent-orange), var(--accent-pink)); }
    .timeline-badge { display: inline-block; background: var(--primary); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: 0.1em; padding: 6px 16px; border-radius: 999px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(37,99,235,0.3); }
    .timeline-item.year2 .timeline-badge { background: var(--accent-orange); box-shadow: 0 4px 10px rgba(245,158,11,0.3); }
    .timeline-title { font-size: 24px; font-weight: 900; margin-bottom: 16px; line-height: 1.4; color: var(--text-main); }
    .timeline-desc { color: var(--text-muted); font-size: 15px; line-height: 1.8; }

    /* 3学科紹介 */
    .course-card { padding: 32px 24px; border-top: none; }
    .course-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .course-card.border-pink::before { background: var(--accent-pink); }
    .course-card.border-cyan::before { background: var(--accent-cyan); }
    .course-card.border-orange::before { background: var(--accent-orange); }
    
    .slider { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 24px; background: #eee; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
    .slide-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s ease, transform 4s ease; position: absolute; top:0; left:0; will-change: opacity, transform; }
    .course-card:hover .slide-img { transform: scale(1.08); }

    /* イベント紹介用デザイン（表示崩れ対策済み） */
    .event-example { border-radius: var(--radius-sm); padding: 20px; margin-top: 20px; margin-bottom: 24px; }
    .event-example.pink { background: rgba(219, 39, 119, 0.04); border: 1px solid rgba(219, 39, 119, 0.1); }
    .event-example.cyan { background: rgba(8, 145, 178, 0.04); border: 1px solid rgba(8, 145, 178, 0.1); }
    .event-example.orange { background: rgba(245, 158, 11, 0.04); border: 1px solid rgba(245, 158, 11, 0.1); }
    
    .event-example-title { font-size: 14px; font-weight: 900; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
    .event-example.pink .event-example-title { color: var(--accent-pink); }
    .event-example.cyan .event-example-title { color: var(--accent-cyan); }
    .event-example.orange .event-example-title { color: var(--accent-orange); }
    
    .event-list { list-style: none; padding: 0; margin: 0; }
    .event-list li { 
      font-size: 13px; color: var(--text-main); font-weight: 700; line-height: 1.5; 
      margin-bottom: 8px; position: relative; padding-left: 1.2em;
    }
    .event-list li:last-child { margin-bottom: 0; }
    .event-list li::before { 
      content: "•"; position: absolute; left: 0; top: 0; 
      color: currentColor; opacity: 0.6; font-size: 1.2em; line-height: 1.2;
    }

    /* タグボタン */
    .course-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
    a.course-tag { 
      font-size: 13px; font-weight: 900; border-radius: 8px; padding: 12px 16px; min-height: 48px;
      color: #fff; display: inline-flex; align-items: center; justify-content: space-between;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); flex: 1 1 calc(50% - 4px);
      text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    a.course-tag::after { content: '➔'; margin-left: 6px; font-size: 16px; transition: transform 0.3s; color: rgba(255,255,255,0.8); }
    a.course-tag:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 15px rgba(0,0,0,0.15); filter: brightness(1.08); }
    a.course-tag:hover::after { transform: translateX(4px); color: #fff; }
    span.course-tag { font-size: 11px; font-weight: 900; border-radius: 999px; padding: 6px 12px; color: #fff; display: inline-block; }
    
    .tag-pink { background: linear-gradient(135deg, #db2777, #f472b6); } 
    .tag-cyan { background: linear-gradient(135deg, #0891b2, #22d3ee); } 
    .tag-orange { background: linear-gradient(135deg, #d97706, #fbbf24); }

    /* タイトル周り */
    .section-title { text-align: center; margin-bottom: 56px; }
    .section-kicker { font-size: 14px; letter-spacing: 0.2em; color: var(--primary); font-weight: 900; margin-bottom: 16px; display: inline-block; background: rgba(37,99,235,0.1); padding: 4px 16px; border-radius: 999px; }
    .section-title h3 { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.3; font-weight: 900; letter-spacing: -0.02em; color: var(--text-main); }
    .section-title p { margin-top: 24px; color: var(--text-muted); font-size: 16px; max-width: 700px; margin-inline: auto; line-height: 1.8; }
    .hero-badge { display: inline-block; background: linear-gradient(135deg, var(--accent-green), #10b981); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; padding: 8px 20px; border-radius: 999px; margin-bottom: 24px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
    .hero-h2 { font-size: clamp(36px, 5vw, 56px); font-weight: 900; line-height: 1.3; margin-bottom: 24px; color: var(--text-main); letter-spacing: -0.02em; }

    /* 就職実績セクション（修正点） */
    .career-stat-box {
      text-align: center; background: linear-gradient(135deg, rgba(37,99,235,0.03), rgba(124,58,237,0.05));
      border: 1px solid rgba(37,99,235,0.15); border-radius: var(--radius-md); padding: 40px 24px; margin-bottom: 40px;
    }
    .career-number { font-size: clamp(64px, 10vw, 96px); font-weight: 900; line-height: 1; margin-bottom: 12px; background: linear-gradient(135deg, var(--primary), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .career-label { font-size: clamp(18px, 2.5vw, 22px); font-weight: 900; color: var(--text-main); letter-spacing: 0.05em; }
    .career-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 20px; line-height: 1.6; }

    .career-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
    .career-card { background: #fff; padding: 28px; border-radius: var(--radius-sm); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
    .career-card h5 { font-size: 16px; font-weight: 900; margin-bottom: 12px; color: var(--primary); display: flex; align-items: center; gap: 8px; }
    .career-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin: 0; }

    /* 選ばれる5つの理由（図解） */
    .diagram-container { display: flex; flex-direction: column; gap: 24px; }
    .diagram-row { display: flex; align-items: stretch; gap: 32px; background: #fff; border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .diagram-row:hover { transform: translateX(8px); box-shadow: var(--shadow-md); border-color: rgba(37, 99, 235, 0.3); }
    .diagram-feature { flex: 0 0 300px; background: #f8fafc; padding: 32px 24px; border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 2px solid rgba(37, 99, 235, 0.1); transition: all 0.3s; }
    .diagram-row:hover .diagram-feature { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.3); }
    .diagram-feature-sub { font-size: 13px; font-weight: 900; color: var(--primary); margin-bottom: 8px; letter-spacing: 0.05em; }
    .diagram-feature-title { font-size: 24px; font-weight: 900; color: var(--text-main); line-height: 1.3; }
    .diagram-arrow { display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--accent-orange); font-weight: 900; opacity: 0.5; transition: all 0.3s; }
    .diagram-row:hover .diagram-arrow { opacity: 1; transform: scale(1.2); }
    .diagram-benefit { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-right: 24px; }
    .diagram-benefit-title { font-size: 20px; font-weight: 900; margin-bottom: 12px; color: var(--accent-orange); }
    .diagram-benefit-text { font-size: 16px; color: var(--text-muted); line-height: 1.8; margin: 0; }

    /* CTA / ボタン */
    .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 900; padding: 20px 48px; font-size: 16px; letter-spacing: 0.05em; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; border: none; text-decoration: none; }
    .btn-orange { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; box-shadow: 0 10px 20px rgba(234, 88, 12, 0.3); }
    .btn-orange:hover, .btn-orange:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 30px rgba(234, 88, 12, 0.4); filter: brightness(1.1); }
    .btn-outline { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); }
    .btn-outline:hover, .btn-outline:focus-visible { background: rgba(255,255,255,0.2); transform: translateY(-4px); border-color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
    .btn-line { background: linear-gradient(135deg, #06C755, #05b34c); color: #fff; box-shadow: 0 10px 20px rgba(6, 199, 85, 0.3); }
    .btn-line:hover, .btn-line:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 30px rgba(6, 199, 85, 0.4); filter: brightness(1.1); }
    
    .cta-panel {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      color: #fff; border-radius: var(--radius-lg); padding: clamp(56px, 8vw, 100px) clamp(24px, 4vw, 64px);
      text-align: center; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
    }
    .cta-panel::before {
      content: ''; position: absolute; top: -50%; left: -10%; width: 50vw; height: 50vw;
      background: radial-gradient(circle, rgba(37,99,235,0.4) 0%, transparent 60%); border-radius: 50%;
    }
    .cta-panel::after {
      content: ''; position: absolute; bottom: -50%; right: -10%; width: 50vw; height: 50vw;
      background: radial-gradient(circle, rgba(219,39,119,0.3) 0%, transparent 60%); border-radius: 50%;
    }
    .cta-content { position: relative; z-index: 1; }
    .cta-badge { display:inline-block; background:rgba(255,255,255,0.1); padding: 8px 24px; border-radius:999px; font-size:14px; font-weight:900; margin-bottom:24px; backdrop-filter:blur(8px); border: 1px solid rgba(255,255,255,0.2); color: var(--accent-orange); letter-spacing: 0.1em; }

    /* ポップアップ＆トリガー */
    .news-trigger {
      position: fixed; right: 24px; bottom: 24px; z-index: 999;
      background: linear-gradient(135deg, var(--accent-pink), #e11d48); color: #fff; padding: 16px 28px;
      border-radius: 999px; font-weight: 900; font-size: 15px; cursor: pointer;
      box-shadow: 0 12px 30px rgba(219, 39, 119, 0.4); border: none; 
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s; letter-spacing: 0.05em;
    }
    .news-trigger:hover, .news-trigger:focus-visible { transform: translateY(-6px) scale(1.05); box-shadow: 0 20px 40px rgba(219, 39, 119, 0.5); }

    .popup-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; padding: 24px; }
    .popup-overlay.open { opacity: 1; visibility: visible; }
    .popup-window { background: #fff; border-radius: var(--radius-lg); padding: 48px; width: 100%; max-width: 560px; position: relative; transform: translateY(40px) scale(0.95); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
    .popup-overlay.open .popup-window { transform: translateY(0) scale(1); }
    .popup-close { position: absolute; top: 24px; right: 24px; background: #f1f5f9; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; }
    .popup-close:hover, .popup-close:focus-visible { background-color: #e2e8f0; color: var(--text-main); transform: rotate(90deg); }

    /* Footer */
    .sns-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
    .sns-links a { background: rgba(255,255,255,0.05); color: #cbd5e1; padding: 12px 24px; border-radius: 12px; font-size: 13px; font-weight: 700; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.1); letter-spacing: 0.05em; }
    .sns-links a:hover { background: rgba(255,255,255,0.1); color: #fff; transform: translateY(-3px); border-color: rgba(255,255,255,0.3); }

    .footer-link { text-decoration: none; color: inherit; transition: color 0.3s ease; }
    .footer-link:hover { color: #ffffff; }


    @media (max-width: 980px){ 
       .hero-split { flex-direction: column; text-align: center; } 
       .hero-split-video { order: -1; }
       .grid-2, .grid-3, .career-grid { grid-template-columns: 1fr; } 
       .nav-links a:not(.btn-nav-accent) { display: none; }
       a.course-tag { flex: 1 1 100%; }
       .message-box { text-align: left; }
       .diagram-row { flex-direction: column; align-items: center; padding: 24px; gap: 16px; }
       .diagram-feature { width: 100%; flex: none; padding: 24px 16px; }
       .diagram-arrow { transform: rotate(90deg); height: 40px; margin: 8px 0; }
       .diagram-row:hover { transform: translateY(-4px); }
       .diagram-row:hover .diagram-arrow { transform: rotate(90deg) scale(1.2); }
       .diagram-benefit { text-align: center; padding-right: 0; }
       .btn { width: 100%; }
    }