/* ページ全体 */
body{
    margin:0;
}


/* ヘッダー */

header{

    position:fixed;

    top:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 20px;

    background:rgba(0,0,0,0.6);

    backdrop-filter:blur(5px);

    box-sizing:border-box;

    z-index:1000;
}


/* ロゴ */

.logo{

    color:white;

    margin:0;
}


/* メニュー */

nav{

    display:flex;

    gap:20px;
}


/* リンク */

nav a{

    color:white;

    text-decoration:none;

    padding:10px 15px;

    border-radius:8px;
}


nav a:hover{

    background:rgba(255,255,255,0.2);
}


/* ハンバーガーボタン */

.menu-btn{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;
}


/* 本文 */

main{

    padding-top:100px;

    padding-left:20px;

    padding-right:20px;

    color:white;
}


/* スマホ対応 */

@media(max-width:768px){

    .menu-btn{

        display:block;
    }

    nav{

        display:none;

        position:absolute;

        top:70px;

        right:10px;



        flex-direction:column;

        padding:10px;

        border-radius:10px;

        background-color:rgba(255,255,255,0.9);
    }


        html,
    body{
        min-height:100%;
        }

    nav a{

        color:black;
    }

    nav.show{

        display:flex;
    }
}