@charset "UTF-8";
/*drawerMenu.css */

/* Toggle(Button) */
#navToggle {
    display: none;
    position:absolute;/*to body*/
    right:15px;
    top:21px;
    width:30px;
    height:25px;
    cursor:pointer}
#navToggle div {position:relative}
#navToggle span {
    display:block;
    position:absolute;/*to div*/
    width:100%;
    border-bottom:solid 2px #1563d5;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out}
#navToggle span:nth-child(1) {top:0}
#navToggle span:nth-child(2) {top:10px}
#navToggle span:nth-child(3) {top:20px}

/*Media-queries_____________________________________*/
@media screen and (max-height: 640px) {
}

@media screen and (max-width: 640px) {
.header nav {
    position:absolute;
    right:0;
    top: -600px; /*通常時はビュー外*/
    background-color: #FFF;
    width: 100%;
    z-index: 10000;
    -webkit-transition:.5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition:.5s ease-in-out;
    transition:.5s ease-in-out;
    text-align:left;
}

.header nav .main_bottom_nav{
    margin-bottom: 0%;
}
.header ul {margin:0}
.header ul li {display:block;margin:0;border-bottom:dotted 1px #fff; line-height:3}
.header ul li a {display:block}
.header ul li::after {content:''}
.header ul li:last-child {border-bottom:none}
/* Toggle(Button) */
#navToggle {display: block}
/* Click Toggle(Button) */
.openNav #navToggle span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg)}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
    top: 11px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg)}
/*.header menu*/
.openNav nav {
    transform: translateY(655px);
}
}