.openbtn1 {
  position: relative; /*ボタン内側の基点となるためrelativeを指定*/
  cursor: pointer;
  width: 35px;
  height: 28px;
}

/*ボタン内側*/
.openbtn1 span {
  display: inline-block;
  transition: all 0.4s; /*アニメーションの設定*/
  position: absolute;
  height: 1px;
  border-radius: 2px;
  width: 35px;
}

.openbtn1 span:nth-of-type(1) {
  top: 0px;
}

.openbtn1 span:nth-of-type(2) {
  top: 14px;
}

.openbtn1 span:nth-of-type(3) {
  top: 28px;
}

/*activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) {
  top: 14px;
  transform: translateY(0px) rotate(-45deg);
  width: 35px;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0; /*真ん中の線は透過*/
}

.openbtn1.active span:nth-of-type(3) {
  top: 14px;
  transform: translateY(0px) rotate(45deg);
  width: 35px;
}

.description-btn {
  position: relative;
  cursor: pointer;
  width: 35px;
  height: 35px;
  opacity: 0;
}

.description-btn.show {
  transition: all 2s;
  opacity: 1;
}

/*ボタン内側*/
.description-btn span {
  position: absolute;
  display: inline-block;
  transition: all 1s; /*アニメーションの設定*/
  height: 1px;
  border-radius: 2px;
  background: #fff;
  width: 35px;
}

.description-btn span:nth-of-type(1) {
  transform: translateY(0px) rotate(90deg);
  top: 12.5px;
}

.description-btn span:nth-of-type(2) {
  transform: translateY(0px) rotate(-180deg);
  top: 12.5px;
}

.description-btn.active span:nth-of-type(1) {
  transform: translateY(0px) rotate(-45deg);
  top: 12.5px;
}

.description-btn.active span:nth-of-type(2) {
  transform: translateY(0px) rotate(45deg);
  top: 12.5px;
}