@charset "utf-8";
@media screen and (max-width:960px){
    .sp-dc{display: block;}
    .pc-dc{display: none;}
    .openbtn{
        background:#57a2c7;
        cursor: pointer;
        width: 50px;
        height:50px;
        border-radius: 5px;
        position: absolute;
        margin: 20px;
        top: 0;
        right: 0;
    }
    /*ボタン内側*/
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background: #fff;
          width: 45%;
      }
    .openbtn span:nth-of-type(1) {
        top:15px;	
    }
    .openbtn span:nth-of-type(2) {
        top:23px;
    }
    .openbtn span:nth-of-type(3) {
        top:31px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
    body.active{
        overflow: hidden;
    }


    nav{
    position:fixed;
    z-index: -1;
    opacity: 0;
    margin: 0;
    top:auto;
    width:100%;
    height: 100vh;
    background:#999;
    transition: all 0.3s;
    }
    nav.active{
        opacity: 1;
        z-index:999;
    }
    .navi_lists{
        display: block;
    }
    .drop_lists{
        display: block;
    }
    .drop_list{
        background-color: inherit;
        padding: 10px 20px;
    }
    .navi_lists>li{
        padding: 5px;
    }
    .navi_list:hover .drop_lists{
        position: inherit;
    }

    .visual{
        width: 100%;
    }

    .menu>a ,.menu>div{
        width: calc(80%/2);
    }
    .menu div{
        font-size: 1rem;
    }
    .access{
        display: block;
    }
    .access>div{
        width: 100%;
    }

    .imgarea img{
        width: calc(100%/2 - 10px);
    }
}