@charset "utf-8";

/* =========================
  ハンバーガーメニュー
 =========================== */
 /* ==========================
   tablet 780px未満
 ============================= */
@media screen and (max-width: 780px) {
   /* 位置・大きさ */
  .navToggle {
    display: block;
    position: fixed;
    right:20px;
    top: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 30;
    text-align: center;
  }
  /* 線の長さ・太さ・色 */
  .navToggle span {
    display: block;
    position: absolute; /* .navToggleに対して */
    width: 40px;
    border-bottom: solid 6px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 0;
  }
  /* 線の位置 */
  .navToggle span:nth-child(1) {
    top: 0;
  }
  .navToggle span:nth-child(2) {
    top: 17px;
  }
  .navToggle span:nth-child(3) {
    top : 34px;
  }

  /* 最初のspanをマイナス45度に */
  .navToggle.active span {
    border-bottom: solid 6px #fff;
  }
  .navToggle.active span:nth-child(1) {
    top: 7.5px;
    left: 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  /* 2番目と3番目のspanを45度に */
  .navToggle.active span:nth-child(2),
  .navToggle.active span:nth-child(3) {
    top: 7px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }

}

 /* ==========================
   mobile 560px未満
 ============================= */
 @media screen and (max-width: 559px){
   /* 位置・大きさ */
  .navToggle {
    right:30px;
    top: 30px;
    width: 20px;
    height: 20px;
  }
  /* 線の長さ・太さ・色 */
  .navToggle span {
    width: 20px;
    border-bottom: solid 3px #fff;
  }
  /* 線の位置 */
  .navToggle span:nth-child(1) {
    top: 0;
  }
  .navToggle span:nth-child(2) {
    top: 8.5px;
  }
  .navToggle span:nth-child(3) {
    top : 17px;
  }

  /* 最初のspanをマイナス45度に */
  .navToggle.active span {
    border-bottom: solid 3px #fff;
  }
  .navToggle.active span:nth-child(1) {
    top: 7px;
    left: 0px;
  }

  /* 2番目と3番目のspanを45度に */
  .navToggle.active span:nth-child(2),
  .navToggle.active span:nth-child(3) {
    top: 7px;
  }
}