@charset "UTF-8";

header{
	padding:20px 20px 50px 50px;
}

/*---------------
 右上メニュー
---------------*/

/* メニュー全体 */
#menu_top{
	width:100%;
	box-sizing:border-box;
}

/* PC表示 */
#menu_top ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:25px;
}

#menu_top a{
    text-decoration:none;
    color:#333;
    font-size:14px;
    transition:0.3s;
}

#menu_top a:hover{
    color:#0066cc;
}

/* ハンバーガーボタン */
#hamburger{
    display:none;
    width:40px;
    margin:0 0 0 auto; /* 右寄せ */
    cursor:pointer;
}

#hamburger span{
    display:block;
    width:100%;
    height:3px;
    margin:7px 0;
    background:#666;
    border-radius:2px;
}

/* スマホ表示 */
@media screen and (max-width:768px){
header{padding:20px;}
#hamburger{
        display:block;
        position:fixed;
        top:20px;
        right:20px;
        z-index:1001;
    }

    #menu_top{
        display:none;
        position:fixed;
        top:0;
        right:0;
        width:100%;
        height:100vh;
        background:rgba(255,255,255,0.85);
        z-index:1000;
    }

    #menu_top.open{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #menu_top a{
        font-size:24px;
        color:#333;
        text-decoration:none;display:block;padding:10px 0;
    }

    #menu_top ul{
        flex-direction:column;
        align-items:flex-end;align-items:center;
        gap:10px;
        padding:20px 0;
    }

/* ×印への変形 */
#hamburger.active span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
}
#hamburger.active span:nth-child(2){
    opacity:0;
}
#hamburger.active span:nth-child(3){
    transform:translateY(-10px) rotate(-45deg);
}
#hamburger span{
    transition:0.3s;
}

}