:root{
    --primary:#003d73;
    --primary-2:#005a9c;
    --accent:#00a3d9;
    --ink:#1f2937;
    --muted:#64748b;
    --bg:#f5f8fb;
    --card:#ffffff;
    --line:#dbe4ef;
    --shadow:0 14px 35px rgba(0,43,85,.12);
    --radius:18px;
}
*{box-sizing:border-box} body{
    margin:0;
    font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.85;
}
a{color:inherit}
.topbar{
    background:#001f3d;
    color:#dbeafe;
    font-size:.88rem;
    padding:.35rem 1rem;
    text-align:center;
}
header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);
    box-shadow:0 2px 16px rgba(15,23,42,.08);
}
.nav{
    max-width:1180px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.2rem;
}
.brand{
    display:flex;
    align-items:center;
    gap:.8rem;
    font-weight:800;
    color:var(--primary);
    letter-spacing:.02em;
}
.logo{
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
    box-shadow:0 8px 18px rgba(0,90,156,.25);
}
nav ul{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:.25rem .75rem;
    padding:0;
    margin:0;
    font-size:.95rem;
}
nav a{
    text-decoration:none;
    padding:.55rem .7rem;
    border-radius:999px;
    color:#334155;
}
nav a:hover{
    background:#e0f2fe;
    color:var(--primary)
}

.hero{
    position:relative;
    min-height:620px;
    display:grid;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background:#082f49;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,31,61,.88),rgba(0,61,115,.55),rgba(0,31,61,.18)),url("hero-campus-ai.png") center/cover no-repeat;
    transform:scale(1.02);
}
.hero-inner{
    position:relative;
    max-width:1180px;
    margin:auto;
    padding:5rem 1.2rem;
    width:100%;
}
.eyebrow{
    display:inline-flex;
    gap:.5rem;
    align-items:center;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    padding:.35rem .8rem;
    color:#e0f2fe;
    font-weight:700;
    margin-bottom:1.2rem;
}
h1{
    font-size:clamp(2.2rem,5.5vw,4.6rem);
    line-height:1.15;
    margin:.2rem 0 1rem;
    letter-spacing:.02em;
}
.lead{
    max-width:720px;
    font-size:clamp(1.05rem,2vw,1.35rem);
    color:#eaf6ff;
    margin-bottom:2rem;
}
.cta{
    display:flex;
    gap:1rem;
    flex-wrap:wrap
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-height:48px;
    padding:.75rem 1.25rem;
    text-decoration:none;
    border-radius:999px;
    font-weight:800;
    border:1px solid rgba(255,255,255,.4);
}
.btn-primary{
    background:#fff;
    color:var(--primary)
}
.btn-ghost{
    background:rgba(255,255,255,.08);
    color:#fff
}
.section{
    max-width:1180px;
    margin:auto;
    padding:5rem 1.2rem;
}
.section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:2rem;
}
.section-title h2{
    margin:0;
    color:var(--primary);
    font-size:clamp(1.8rem,3vw,2.6rem);
    line-height:1.25;
}
.section-title p{
    margin:0;
    color:var(--muted);
    max-width:560px
}
.grid{
    display:grid;
    gap:1.35rem
}
.grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:1.5rem;
    box-shadow:var(--shadow);
}
.card h3{
    margin:.2rem 0 .6rem;
    color:#0f3d66;
    font-size:1.25rem
}
.card p{
    margin:0;
    color:#475569
}
.icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#e0f2fe,#ffffff);
    color:var(--primary);
    font-size:1.1rem;
    font-weight:900;
    margin-bottom:.8rem;
}
.feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    align-items:center
}
.feature img,.wide-img{
    width:100%;
    display:block;
    border-radius:24px;
    box-shadow:var(--shadow);
    border:1px solid rgba(255,255,255,.7)
}
.topics{
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.topic-list{
    display:grid;
    gap:.8rem
}
.topic{
    display:grid;
    grid-template-columns:120px 110px 1fr;
    gap:1rem;
    align-items:center;
    padding:1rem 1.2rem;
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:14px
}
.date{
    font-weight:800;
    color:#0f3d66
}
.tag{
    font-size:.84rem;
    text-align:center;
    color:#075985;
    background:#e0f2fe;
    border-radius:999px;
    padding:.2rem .6rem;
    font-weight:800
}
.band{
    background:linear-gradient(135deg,#003d73,#0066a6 60%,#00a3d9);
    color:#fff
}
.band .section-title h2,
.band .section-title p{
    color:#fff
}
.pathway{
    counter-reset:step
}
.pathway .card{
    position:relative;
    overflow:hidden
}
.pathway .card::before{
    counter-increment:step;
    content:"0" counter(step);
    position:absolute;
    right:1rem;
    top:.6rem;
    color:#dbeafe;
    font-size:3rem;
    font-weight:900;
    line-height:1
}
.copilot-note{
    background:#ecfeff;
    border:1px solid #bae6fd;
    color:#0f3d66;
    border-radius:var(--radius);
    padding:1.25rem 1.4rem;
    margin-top:2rem;
}
footer{
    background:#001f3d;
    color:#dbeafe;
    padding:3rem 1.2rem
}
footer .inner{
    max-width:1180px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:2rem
}
footer h2,footer h3{
    color:#fff;
    margin-top:0
}
footer a{
    color:#bfdbfe;
    text-decoration:none
}
.small{
    font-size:.7rem;
    color:#bfdbfe
}
@media (max-width:860px){
    .grid-3,
    .feature,
    footer .inner{
        grid-template-columns:1fr
    }
    .topic{
        grid-template-columns:1fr;
        gap:.35rem
    }
    .hero{
        min-height:560px
    }
    nav ul{
        display:none
    }
    .section-title{
        display:block
    }
}
.faculty-table-wrapper{
    overflow-x:auto;
}
.faculty-table{
    width:100%;
    border-collapse:collapse;
    background:#ffffff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.faculty-table thead{
    background:#003d73;
    color:#ffffff;
}
.faculty-table th{
    padding:18px;
    text-align:left;
}
.faculty-table td{
    padding:18px;
    border-bottom:1px solid #e5e7eb;
    vertical-align:top;
}
.faculty-table tbody tr:hover{
    background:#f7fbff;
}
.faculty-table td:first-child{
    font-weight:bold;
    white-space:nowrap;
}
.lab-link{
    display:inline-block;
    background:#0066cc;
    color:white;
    text-decoration:none;
    padding:8px 16px;
    border-radius:6px;
}
.lab-link:hover{
    background:#0050a5;
}
@media (max-width:768px){
    .faculty-table th,
    .faculty-table td{
        font-size:0.9rem;
        padding:12px;
    }
}
   
.hero-notice {
    position: absolute;
    top: 60px;
    right: 30px;
    z-index: 3;
    display: flex;
    gap: 22px;
    width: min(500px, 42vw);
    padding: 30px 34px;
    color: #ffffff;
    background: rgba(8, 39, 77, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(0, 23, 55, 0.34);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    font-size: clamp(0.92rem, 1.15vw, 1.12rem);
    letter-spacing: 0.04em;
    line-height: 1.75;
}
.notice-close {
    position:absolute;
    top:12px;
    right:14px;
    width:24px;
    height:24px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:white;
    font-size:1.2rem;
    font-weight:bold;
    cursor:pointer;
    transition:0.2s;
}
.notice-close:hover {
    background:rgba(255,255,255,.25);
}
.notice-close:focus {
    outline:2px solid #fff;
}
.hero-notice.hidden {
    display:none;
}
.notice-line {
    flex: 0 0 12px;
    width: 12px;
    min-height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #d9efff 0%, #71b4ec 100%);
    box-shadow: 0 0 20px rgba(126, 200, 255, 0.28);
}