@media screen and (min-width: 768px) {
    header {
        display: flex;
        width: calc(100% - 30px * 2);
        padding: 20px 30px;
        position: fixed;
        top: 0;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.7);
    }
    
    header .logo {
        width: 120px;
        margin: 0 30px;
        display: block;
    }
    
    header .logo img {
        width: 100%;
        vertical-align: middle;
    }

    header .nav .text {
        display: inline-block;
        font-size: 14px;
        padding: 2px 20px;
        color: #1d2051;
    }
    
    header .nav .recruit-info {
        border-left: solid 1px #1D2051;
    }
}


@media screen and (max-width: 767px) {
    header {
        height: 11vw;
        display: flex;
        position: fixed;
        top: 0;
        z-index: 9;
        background: rgba(255, 255, 255, 0.8);
    }
    
    header .logo {
        display: inline-block;
        margin: 2vw 0 0 2vw;
    }
    
    header .logo img {
        width: 40vw;
    }
    
    #nav-drawer {
        /* position: relative; */
        display: inline-block;
        padding: 2.5vw;
        background: #1d2051;
        color: #333;
        margin-left: 47vw;
        z-index: 9999;
        width: 7vw;
        height: 6vw;
    }

    /*チェックボックス等は非表示に*/
    .nav-unshown {
        display:none;
    }

    /*アイコンのスペース*/
    #nav-open {
        display: inline-block;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        position: relative;
    }

    /*ハンバーガー*/
    #nav-open span {
        position: absolute;
        z-index: 9998;
        background: #1d2051;
        width: 100%;
        height: 100%;
    }
    
    #nav-open span:before, 
    #nav-open span:after {
        position: absolute;
        height: 0.3vw;/*線の太さ*/
        width: 100%;/*長さ*/
        border-radius: 3px;
        background: #DA251D;
        display: block;
        content: '';
        cursor: pointer;
        z-index: 9999;
        transition: 0.3s;
        margin: 0 auto;
    }
    #nav-open span::before {
        top: 20%;
    }
    #nav-open span::after {
        top: 80%;
    }

    /*中身*/
    #nav-contents {
        text-align: left;
        color: #1d2051;
        overflow: auto;
        position: fixed;
        top: 0;
        right: -56vw;
        z-index: 999;
        width: 55vw;
        height: 100%;
        background: white;
        transition: 0.3s ease-in-out;
        border-left: solid 0.5vw #1d2051;
    }
    
    #nav-contents .box {
        height: 10vw;
        width: 11vw;
        position: absolute;
        right: 0;
        background: #1d2051;
    }

    /*チェックが入ったらもろもろ表示*/
    #nav-input:checked ~ #nav-contents {
        right: 0;
        display: block;
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
    }

    #nav-input:checked ~ #nav-open span {
        background: rgba(51, 51, 51, 0);
    }

    #nav-input:checked ~ #nav-open span::before {
        -webkit-transform: rotate(-35deg);
        transform: rotate(-35deg);
        width: 7.5vw;
        top: 38%;
        left: -7%;
    }

    #nav-input:checked ~ #nav-open span::after {
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
        width: 7.5vw;
        top: 38%;
        left: -7%;
    }

    #nav-contents .indexes {
        margin: 8vw 0 0 0;  
    }

    #nav-contents .indexes a {
        display: block;
        color: #1d2051;
        font-size: 3.3vw;
        padding: 4vw 6vw;
        border-bottom: solid 0.5vw #F3F1EE;
    }
    
    #nav-contents .indexes .sub-title {
        font-size: 2.8vw;
        padding: 0 6vw 2vw;
        border-bottom: solid 0.5vw #F3F1EE;
    }
}