/* HP向けをベースに作ってる*/

.header{
    border-bottom: 2px solid #e92a2a;
    display: flex;
    width: 100%;
    padding-left: 1vw;
}

.header-left{
    width: 60vw;
    height: 8vh;
}

    .header-logo{
        width: 100%;
        height: 100%;
        float: left;
        text-align: left;
        position: relative;
    }

    .header-logo-img{
        max-width: 80vw;
        max-height: 8vh;
        aspect-ratio: 794 / 113;
        text-align: left;
        position: absolute;
        bottom: 0px;
    }

.header-right{
    width: 40vw;
    height: 8vh;
}

    .burger-menu-b{
        background-color: #e92a2a;
        width: 8vh;
        height: 8vh;
        float: right;
        position: relative;
    }

    .burger-menu-b-icon{
        height: 5vh;
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        margin: auto;
    }

    .pc-anniv{
        width: 70%;
        height: 100%;
        padding-top: 1vh;
        padding-bottom: 1vh;
        margin-right: 16px;
        float: right;
        text-align: right;
        position: relative;
    }

    .mobile-anniv{
            display: none;
            text-align: center;
            padding-top: 3vh;
            border-top: 2px solid #ffffffff;
        }

    @media screen and (max-width: 768px){
        .pc-anniv{
            display: none;
        }

        .mobile-anniv{
            display: block;
        }
    }

        .anniv-msg{
            position: absolute;
            bottom: 1vh;
            right: 0px;
        }

.modal-content{
    background-color: #303030;
    width: 100vw;
    height: 100vh;
}

    .modal-header{
    padding: 0px;
    border-bottom: 2px solid #1f3bb9;
    display: flex;
    width: 100%;
    padding-left: 1vw;
    }
    
        .m-burger-menu-b{
            background-color: #1f3bb9;
            width: 8vh;
            height: 8vh;
            float: right;
            position: relative;
        }

        .m-right a:link, .m-right a:visited, .m-right a:active{
            color: #ffffffff;
            text-decoration: none;
        }

        .m-right a:hover{
            color: #1f3bb9;
        }

        .menu-label{
            color:#ffffffff;
            font-size: 2vw;
            font-weight: bold;
            text-align: left;
            border-bottom:2px solid #ffffffff;
        }

        .f-sites{
        padding-left: 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        list-style: none;
        }

        .f-site-c{
            padding-left: 2vw;
            list-style: none;
        }

        .f-site-b{
            margin-left: 0.5vw;
            margin-bottom: 5vh;
            padding-left: 0.5vw;
            border-left: 1.5px solid #bababa;
        }

        .f-space::after{
            content: "\A";
            white-space:pre;
        }

        .f-site-h1{
            font-weight: bold;
            font-size: 1.8vw;
        }

        .f-site-h2{
            font-size: 1.5vw;
        }

    .emblem-set{
        width: 100%;
    }

    .m-anniv-msg{
        color: #ffffffff;
    }

@media screen and (max-width: 767px){
    .header-left{
        width: 90vw;
    }
    
    .header-right{
        width: 10vw;
    }

    .f-site-h1{
        font-size: 2.5vw;
    }

    .f-site-h2{
        font-size: 2vw;
    }
}


@media screen and (max-width: 575px){
    .m-left{
        text-align: center;
    }

    .emblem-set{
        margin-bottom: 3vh;
        width: 60%;
    }
}

@media screen and (max-width: 480px){
    .menu-label{
        font-size: 4vw;
    }

    .f-site-b{
        margin-bottom: 3vh;
    }
    
    .f-site-h1{
        font-size: 4vw;
    }

    .f-site-h2{
        font-size: 3.5vw;
    }
}