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

/* Toggle(Button) */
#navToggle {
    display: none;
    position:absolute;/*to body*/
    left:15px;
    top:20px;
    width:25px;
    height:25px;
    cursor:pointer}
#navToggle div {position:relative}
#navToggle span {
    display:block;
    position:absolute;/*to div*/
    width:100%;
    border-bottom: solid 3px #f08036;
    -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:7.25px}
#navToggle span:nth-child(3) {top:15px}

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

@media screen and (max-width: 640px) {
.header_nav_sp nav {
    position:absolute;
    right:0;
    top: -600px; /*通常時はビュー外*/
    width: 100%;
    z-index: 9998;
    -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_sp a {
  display:block;
  padding: 5%;
  width: 100%;
  text-align: center;
  color: #f08036;
  font-weight: bold;
  background-color: rgba(255,255,255,0.95);
}


/* 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_nav_sp menu*/
.openNav nav {
    -moz-transform: translateY(660px);
    -webkit-transform: translateY(660px);
    transform: translateY(660px);
    }
}