.menu
{
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100vw;
    height: 10vh;
    min-height: 80px;
    min-width: 1400px;

    color: white;

    z-index: 9999;
    background-color: rgb(16, 72, 98);

    tai
    {
        display: flex;
        align-items: center;
        justify-content: left;
        width: 100%;
        height: 100%;
        
        /*アイコン*/
        .poyoroomIcon
        {
            cursor: pointer;
            height: 100%;
            aspect-ratio: 1 / 1;
            
            img
            {
                height: 100%;
                aspect-ratio: 1 / 1;
            }
        }

        /*タイトル*/
        #title
        {
            cursor: pointer;
            display: flex;
            justify-content: left;
            align-items: center;

            color: white;
            
            height: 100%;
            width: 20%;
            
            font-size: clamp(25px,3vw,55px);
        }

        /*目次*/
        .links
        {
            display: flex;
            justify-content: right;
            align-items: center;

            width: calc(100% - 10vh - 20%);
            height: 100%;

            p
            {
                margin-right: 5%;
                font-size: clamp(15px,1vw,20px);
            }
        }

        /*通常時はメニューは格納しないので隠す*/
        .linkIcon
        {
            visibility: hidden;
            width: 0px;
            height: 0px;
        }
    }
}
/*クリックしたとき*/
.menu #title:active
{
    background-color: rgb(6, 62, 88);
    color: rgb(150, 150, 150);
}

/*メニューの内容を非表示*/
.menu #hiddenLinks
{
    position: fixed;

    /*背景画像*/
    background-image: url(/Materials/menuBox.png);
    background-size: cover;
    background-repeat: no-repeat;
    /*boxサイズ*/
    width: 40vw;
    height: 40vh;
    /*右に寄せる*/
    transform: translateX(60vw);
    top: 7.5vh;
    z-index: 9999;

    margin-left: auto;/*右寄せにする*/
    line-height: 5vh;/*内容の高さ*/
    display: flex;
    flex-direction: column;/**縦並びにする*/
    justify-content: center;
    align-items: center;

    p
    {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: calc(100% / 4);
        
        z-index: 9999;

        font-size: 18px;
    }
}

/*リンク類*/
/*ホームリンク*/
#home
{
    cursor: pointer;
}
/*クリックしたとき*/
#home:active
{
    background-color: rgb(6, 62, 88);
    color: rgb(150, 150, 150);
}

/*ゲーム一覧リンク*/
#games
{
    cursor: pointer;
}
/*クリックしたとき*/
#games:active
{
    background-color: rgb(6, 62, 88);
    color: rgb(150, 150, 150);
}

/*問い合わせリンク*/
#report
{
    cursor: pointer;
}
/*クリックしたとき*/
#report:active
{
    background-color: rgb(6, 62, 88);
    color: rgb(150, 150, 150);
}

/*プロフィールリンク*/
#profile
{
    cursor: pointer;
}
/*クリックしたとき*/
#profile:active
{
    background-color: rgb(6, 62, 88);
    color: rgb(150, 150, 150);
}

/*スマホmenu*/
@media (max-width:768px)
{
    .menu
    {
        height: 7.5vh;
        min-height: 0;
        min-width: 0;

        tai
        {
            /*アイコン*/
            .poyoroomIcon
            {
                display: flex;
                justify-content: center;
                align-items: center;
                /*サイズ*/
                height: 100%;
                aspect-ratio: 1 / 1;

                img
                {
                    height: 90%;
                }
            }

            /*ぽよルーム*/
            #title
            {
                font-size: clamp(25px, 4vw, 100px);

                width: calc(100% - 15vh);
            }

            .links
            {
                visibility: hidden;
                width: 0px;
            }

            /*メニュー表示用のアイコン*/
            .linkIcon
            {
                display: flex;
                justify-content: center;
                align-items: center;

                visibility: visible;

                height: 100%;
                width: auto;
                aspect-ratio: 1 / 1;

                text-align: center;
                #menuIcon
                {
                    cursor: pointer;

                    /*サイズ*/
                    height: 60%;
                    aspect-ratio: 1 / 1;
                }

                :active
                {
                    background-color: rgb(6, 62, 88);
                }
            }
        }
    }

    /*リンク部分を消す*/
    .menu .links
    {
        position: absolute;
        visibility: hidden;
    }
}