@charset "utf-8";
/* CSS Document */
/*==================================================
　5-2-1 3本線が×に
===================================*/
/* --- 通常時（三本線）のスタイルはそのまま --- */
.openbtn {
  position: relative;
  cursor: pointer;
  width: 60px;
  height: 50px;
  border-radius: 5px;
}
.openbtn span {
  display: inline-block;
  position: absolute;
  left: 10px;
  height: 3px;
  border-radius: 3px;
  background: #3a250b;
  width: 65%;
  transition: all 0.4s;
}
/* 3本線の初期位置（以前と同じ） */
.openbtn span:nth-of-type(1) {
  top: 30px;
}
.openbtn span:nth-of-type(2) {
  top: 40px;
}
.openbtn span:nth-of-type(3) {
  top: 50px;
}
/* --- ここで「×」になった時の縦の高さを小さくする --- */
.openbtn.active span:nth-of-type(1) {
  /* 上線をボタン中央あたりに寄せて -45度回転 */
  top: 25px; /* ボタンの中央付近へ */
  left: 8px;
  transform: translateY(0px) rotate(-25deg);
  width: 70%;
}
.openbtn.active span:nth-of-type(2) {
  /* 真ん中の線は非表示のまま */
  opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
  /* 下線を同じく中央あたりに寄せて 45度回転 */
  top: 25px;
  left: 8px;
  transform: translateY(0px) rotate(25deg);
  width: 70%;
}
@media (max-width: 760px) {
  .openbtn {
    width: 45px;
  }
  .openbtn span {
    height: 2px;
  }
  .openbtn span:nth-of-type(1) {
    top: 19px;
  }
  .openbtn span:nth-of-type(2) {
    top: 25px;
  }
  .openbtn span:nth-of-type(3) {
    top: 31px;
  }
}