/* ==========================
   Header
========================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 60px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:1000;

    transition:.3s;


}

.logo{

    display:flex;

    flex-direction:column;

    line-height:1.2;

    text-decoration:none;

}

.logo-main{

    font-size:24px;

    font-weight:700;

    color:#fff;

    letter-spacing:2px;

}

.logo-sub{

    font-size:11px;

    color:rgba(255,255,255,.75);

}

nav ul{

    display:flex;

    list-style:none;

    gap:40px;

}

nav a{

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.3s;

    padding-bottom:4px;

}

nav a:hover{

    color:#8dc8ff;

    border-bottom:2px solid #8dc8ff;

}

.nav-btn{

    display:inline-block;

    padding:8px 18px;

    background:#2d7df6;

    color:white !important;

    border-radius:8px;

    font-weight:700;

    line-height:1.2;

    transition:.3s;

}

.nav-btn:hover{

    background:#1565d8;

    transform:translateY(-2px);

}

/* スクロール後のヘッダー */
.header.scrolled{

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(12px);

    border-bottom:1px solid #e5eaf0;

}


.header.scrolled .logo-main{

    color:#0b2d63;

}


.header.scrolled .logo-sub{

    color:#666;

}


.header.scrolled nav a{

    color:#0b2d63;

}


.header.scrolled nav a:hover{

    color:#1b6dd1;

}