@charset "utf-8";
/* CSS Document */

@media screen and (max-width:770px) {
    .pc_headding{padding-top:185px}
    
    /***** クリック前のボタン *****/
    .toggle{position:fixed; right:13px; top:7px; display:block; width:45px; height:45px; cursor:pointer; z-index:3}
    .toggle span{display:block; position:absolute/* .toggleに対して */; width:70%; border-bottom:solid 3px #9b9b9b;
        -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; padding-top:5px; right:7px}
    .toggle span:nth-child(1){top:3px}
    .toggle span:nth-child(2){top:13px}
    .toggle span:nth-child(3){top:23px}
    .toggle span:nth-child(4){border:none; top:28px; left:5px; font-size:12px; font-weight:bold}

    /***** クリック後のボタン *****/
    /* 最初のspanをマイナス45度にする */
    .toggle.active span:nth-child(1){
        top:15px; left:4px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg)}
    /* 2番目と3番目のspanを45度にする */
    .toggle.active span:nth-child(2),
    .toggle.active span:nth-child(3){top:15px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg)}

    /*************************************
    * グローバルメニュー
    *************************************/
    /* .menu */
    .menu{position:fixed; top:0; left:0; width:100%; transform:translateY(-100%);z-index: 2; padding-top:50px; text-align:center; color:#000}
    .nav_mail{background:#dd0319}
    .menu .nav_li{width:100%; padding:5px; list-style-type:none}
    .menu .nav_li a{display:block; color:#000}

    /* .menuに.activeが追加 */
    .menu.active{transform:none; margin-top:12%; height:100%; overflow-y:scroll; padding-bottom:230px;}
}

@media screen and (max-width:500px) {
/***** クリック前のボタン *****/
.toggle{position:fixed; right:13px; top:7px; display:block; width:45px; height:45px; cursor:pointer; z-index:3}
.toggle span{display:block; position:absolute/* .toggleに対して */; width:70%; border-bottom:solid 3px #9b9b9b;
    -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; padding-top:5px; right:7px}
.toggle span:nth-child(1){top:3px}
.toggle span:nth-child(2){top:13px}
.toggle span:nth-child(3){top:23px}
.toggle span:nth-child(4){border:none; top:28px; left:5px; font-size:12px; font-weight:bold}

/***** クリック後のボタン *****/
/* 最初のspanをマイナス45度にする */
.toggle.active span:nth-child(1){
    top:15px; left:4px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg)}
/* 2番目と3番目のspanを45度にする */
.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3){top:15px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg)}

/*************************************
* グローバルメニュー
*************************************/
/* .menu */
.menu{position:fixed; top:0; left:0; width:100%; transform:translateY(-100%);z-index: 2; padding-top:50px; text-align:center; color:#000}
.nav_mail{background:#dd0319}
.menu .nav_li{width:100%; padding:5px; list-style-type:none}
.menu .nav_li a{display:block; color:#000}

/* .menuに.activeが追加 */
    .menu.active{transform:none; margin-top:12%; height:100%; overflow-y:scroll; padding-bottom:230px;}
}