@charset "utf-8";

@media screen and (max-width: 767px) {
/* クリックエリアと位置を指定 ---------------------- */
.sp_navi_btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px; /* クリックエリアの横幅*/
  height: 45px; /* クリックエリアの高さ*/
  cursor: pointer;
  z-index:100000;
}

/* 3本線の1本ごとに共通するスタイルを指定 ---------------------- */
.sp_navi_btn .line {
  position: absolute;
  top: 10px;
  left: 6px;
  display: block;
  width: 38px; /* 横幅 */
  height: 3px; /* 1本辺りの高さ */
  background: #1473ba; /* 線の色 */

  /* 適用するプロパティ、変化する時間、変化する速度 */
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  
}

/* 3本線の各線の位置を指定 ---------------------- */
.sp_navi_btn .line_01 { top: 10px; }
.sp_navi_btn .line_02 { top: 20px; }
.sp_navi_btn .line_03 { top: 30px; }

/* 最上部の線のスタイル ---------------------- */
.sp_navi_btn.is-active .line_01 {
  top: 24px; /* 上から2番目の線の位置に変更 */

  /* 線を45度回転 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 上から2番目の線のスタイル ---------------------- */
.sp_navi_btn.is-active .line_02 {
  opacity: 0; /* 不透明度を下げて線を消す */
}

/* 最下部の線のスタイル ---------------------- */
.sp_navi_btn.is-active .line_03 {
  top: 24px; /* 上から2番目の線の位置に変更 */

  /* 線を135度回転 */
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
}