.btn {
  display: block;
  width: 38rem;
  height: 7rem;
  margin-inline: auto;
  padding: 2.1rem 3rem;
  box-sizing: border-box;

  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 850ms var(--transition-easeOutExpo);
  z-index: 0; /* テキストより背面だが背景より前面に来るよう isolation と併用 */
}
.btn-red::after {
  background: var(--c-red);
}
.btn-blue::after {
  background: var(--c-blue);
}
.btn-black::after {
  background: var(--c-black);
}
.btn-red {
  border: 2px solid var(--c-red);
  color: var(--c-white);
}
.btn-blue {
  border: 2px solid var(--c-blue);
  color: var(--c-white);
  height: auto;
}
.btn-black {
  border: 2px solid var(--c-black);
  color: var(--c-white);
}
@media (max-width: 767px) {
  .btn {
    width: 30rem;
    height: 6rem;
    padding: 1.5rem 2rem;
  }
  .btn-blue {
    height: auto;
    padding: 1.5rem 1rem;
  }
}
.btn__inner {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  position: relative;
  overflow: hidden;
  z-index: 1; /* 追加：塗り層の上にテキスト等を出す */
}
.btn-blue .btn__arrow {
  top: 50%;
  transform: translateY(-50%);
}
.btn__text {
  text-align: center;
  font-size: 1.6rem;
  /* display: flex; */
  /* flex-direction: column; */
  /* height: 2.7rem; */
  transition: transform 750ms var(--transition-easeOutExpo);
}
.btn__text .btn__text-body {
  /* height: 2.7rem; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn__arrow {
  width: 2.7rem;
  height: 2.7rem;
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 767px) {
  .btn__arrow {
    width: 2rem;
    height: 2rem;
  }
}
.btn__arrow-img {
  position: absolute;
  inset: 0;
  transform-origin: top right;
  transition: transform 750ms var(--transition-easeOutExpo);
  transform: scale(1);
}
.btn__arrow-img--hover {
  transform-origin: bottom left;
  transition: transform 750ms var(--transition-easeOutExpo);
  transform: scale(0);
}
@media (min-width: 768px) {
  .btn:hover::after {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  .btn-red:hover {
    color: var(--c-red);
  }
  .btn-blue:hover {
    color: var(--c-blue);
  }
  .btn-black:hover {
    color: var(--c-black);
  }
  .btn:hover .btn__arrow-img {
    transform: scale(0);
  }
  /* .btn:hover .btn__text {
    transform: translateY(-100%);
  } */
  .btn:hover .btn__arrow-img--hover {
    transform: scale(1);
  }
}