/*=============================
.btn-trigger（共通）
=============================*/
.btn-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #2b2a27;
  border-radius: 4px;
}
.btn-trigger,
.btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) { top: 0; }
.btn-trigger span:nth-of-type(2) { top: 20px; }
.btn-trigger span:nth-of-type(3) { bottom: 0; }

@keyframes bar-hide { 100% { height: 0; } }

/* 01 */
#btn01.active span:nth-of-type(1) { transform: translateY(20px) rotate(-45deg); }
#btn01.active span:nth-of-type(2) { opacity: 0; }
#btn01.active span:nth-of-type(3) { transform: translateY(-20px) rotate(45deg); }

/* 02 */
#btn02.active span:nth-of-type(1) { transform: translateY(20px) rotate(45deg); }
#btn02.active span:nth-of-type(2) { opacity: 0; }
#btn02.active span:nth-of-type(3) { transform: translateY(-20px) rotate(-45deg); }

/* 03 */
#btn03.active { transform: rotate(360deg); }
#btn03.active span:nth-of-type(1) { transform: translateY(20px) rotate(-45deg); }
#btn03.active span:nth-of-type(2) { transform: translateY(0) rotate(45deg); }
#btn03.active span:nth-of-type(3) { opacity: 0; }

/* 04（親に perspective: 1000px） */
#btn04 span:nth-of-type(3) { transition: none; }
#btn04.active { transform: rotateX(720deg); }
#btn04.active span:nth-of-type(1) { transform: translateY(20px) rotate(-45deg); }
#btn04.active span:nth-of-type(2) { transform: translateY(0) rotate(45deg); }
#btn04.active span:nth-of-type(3) { opacity: 0; }

/* 05 */
#btn05.active span:nth-of-type(1) { transform: translateY(20px) rotate(-45deg); }
#btn05.active span:nth-of-type(2) { left: 50%; opacity: 0; animation: bar-hide .8s forwards; }
#btn05.active span:nth-of-type(3) { transform: translateY(-20px) rotate(45deg); }

/* 06 */
#btn06.active span:nth-of-type(1) { transform: translateY(20px) rotate(-45deg); }
#btn06.active span:nth-of-type(2) { left: 200%; opacity: 0; transform: translateY(10px); animation: bar-hide .8s forwards; }
#btn06.active span:nth-of-type(3) { transform: translateY(-20px) rotate(45deg); }

/* 07（下がってから回る） */
#btn07 span:nth-of-type(1) { animation: btn07-bar01 .75s forwards; }
#btn07 span:nth-of-type(2) { transition: all .25s .25s; opacity: 1; }
#btn07 span:nth-of-type(3) { animation: btn07-bar03 .75s forwards; }
#btn07.active span:nth-of-type(1) { animation: active-btn07-bar01 .75s forwards; }
#btn07.active span:nth-of-type(2) { opacity: 0; }
#btn07.active span:nth-of-type(3) { animation: active-btn07-bar03 .75s forwards; }
@keyframes btn07-bar01 {
  0%   { transform: translateY(20px) rotate(45deg); }
  50%  { transform: translateY(20px) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes btn07-bar03 {
  0%   { transform: translateY(-20px) rotate(-45deg); }
  50%  { transform: translateY(-20px) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes active-btn07-bar01 {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(20px) rotate(0); }
  100% { transform: translateY(20px) rotate(45deg); }
}
@keyframes active-btn07-bar03 {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-20px) rotate(0); }
  100% { transform: translateY(-20px) rotate(-45deg); }
}

/* 08 */
#btn08.active span:nth-of-type(1) { transform: translateY(20px) rotate(-315deg); }
#btn08.active span:nth-of-type(2) { opacity: 0; }
#btn08.active span:nth-of-type(3) { transform: translateY(-20px) rotate(315deg); }

/* 09 */
#btn09.active span:nth-of-type(1) { transform: translateY(20px) rotate(315deg); }
#btn09.active span:nth-of-type(2) { opacity: 0; }
#btn09.active span:nth-of-type(3) { transform: translateY(-20px) rotate(-315deg); }

/* 10・11・12（ボタンごと回る） */
#btn10.active { transform: rotate(-90deg); }
#btn11.active { transform: rotate(90deg); }
#btn12.active { transform: rotate(450deg); }

/* 13・14（左向きの矢印） */
#btn14.active { transform: rotate(360deg); }
#btn13.active span:nth-of-type(1), #btn13.active span:nth-of-type(3),
#btn14.active span:nth-of-type(1), #btn14.active span:nth-of-type(3) { width: 20px; }
#btn13.active span:nth-of-type(1), #btn14.active span:nth-of-type(1) { transform: translate(-1px, 13px) rotate(-45deg); }
#btn13.active span:nth-of-type(3), #btn14.active span:nth-of-type(3) { transform: translate(-1px, -13px) rotate(45deg); }

/* 15・16（右向きの矢印） */
#btn16.active { transform: rotate(-360deg); }
#btn15.active span:nth-of-type(1), #btn15.active span:nth-of-type(3),
#btn16.active span:nth-of-type(1), #btn16.active span:nth-of-type(3) { width: 20px; }
#btn15.active span:nth-of-type(1), #btn16.active span:nth-of-type(1) { transform: translate(31px, 13px) rotate(45deg); }
#btn15.active span:nth-of-type(3), #btn16.active span:nth-of-type(3) { transform: translate(31px, -13px) rotate(-45deg); }

/* 17（まるが出る） */
#btn17::after,
#btn19::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 84px;
  height: 84px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 4px solid transparent;
  transition: all .75s;
}
#btn17.active span:nth-of-type(1) { transform: translateY(20px) rotate(45deg); }
#btn17.active span:nth-of-type(2) { left: 60%; opacity: 0; animation: bar-hide .8s forwards; }
#btn17.active span:nth-of-type(3) { transform: translateY(-20px) rotate(-45deg); }
#btn17.active::after { border-color: #2b2a27; }

/* 18（波紋のあとに ×） */
#btn18 span:nth-of-type(1) { animation: btn18-bar01 .5s forwards; }
#btn18 span:nth-of-type(2) { animation: btn18-bar02 .5s forwards; }
#btn18 span:nth-of-type(3) { animation: btn18-bar03 .5s forwards; }
#btn18::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 30px;
  height: 30px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1px solid rgba(43, 42, 39, .4);
  opacity: 0;
}
#btn18.active::after { animation: circle .5s; }
#btn18.active span:nth-of-type(1) { animation: active-btn18-bar01 .5s .5s forwards; }
#btn18.active span:nth-of-type(2) { animation: active-btn18-bar02 .5s .5s forwards; }
#btn18.active span:nth-of-type(3) { animation: active-btn18-bar03 .5s .5s forwards; }
@keyframes btn18-bar01 { 0% { transform: translateY(20px) rotate(-45deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes btn18-bar02 { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes btn18-bar03 { 0% { transform: translateY(-20px) rotate(45deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes active-btn18-bar01 { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(20px) rotate(-45deg); } }
@keyframes active-btn18-bar02 { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes active-btn18-bar03 { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-20px) rotate(45deg); } }
@keyframes circle {
  0%   { transform: scale(.1); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* 19（まるを描きながら回る） */
#btn19.active span:nth-of-type(1) { transform: translateY(20px) rotate(-45deg); }
#btn19.active span:nth-of-type(2) { left: 60%; opacity: 0; animation: bar-hide .8s forwards; }
#btn19.active span:nth-of-type(3) { transform: translateY(-20px) rotate(45deg); }
#btn19.active::after { animation: active-btn19 .7s .25s forwards; }
@keyframes active-btn19 {
  0%   { border-color: transparent; transform: rotate(0); }
  25%  { border-color: transparent #2b2a27 transparent transparent; }
  50%  { border-color: transparent #2b2a27 #2b2a27 transparent; }
  75%  { border-color: transparent #2b2a27 #2b2a27 #2b2a27; }
  100% { border-color: #2b2a27; transform: rotate(-680deg); }
}

/* 動きを減らす設定のとき：すぐに切り替える */
@media (prefers-reduced-motion: reduce) {
  .btn-trigger, .btn-trigger span, .btn-trigger::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}