.reservation { padding: 150px 0 140px; background: var(--bg); position: relative; z-index: 0; overflow: clip; }
.reservation .obj--n6 { display: none; }
.reservation .obj--n7 { width: 18vw; top: 90px; left: 6vw; z-index: -1; }
.reservation .obj--n8 { width: 22vw; bottom: 0; right: 7vw; z-index: -1; }
.reservation .container { max-width: 860px; padding: 0 40px; }
.reservation__ttl { font-size: 13rem; align-items: center; margin-bottom: 40px; }
.reservation__ttl .script { transform-origin: center bottom; }
.reservation__text { text-align: center; margin-bottom: 50px; }
.reservation__btns { display: flex; gap: 20px; }
.reservation__btns li { flex: 1; }
.reservation__btns a { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-en); font-size: 2.4rem; line-height: 1.2; background: var(--surface); padding: 34px 34px 32px 40px; border-radius: 999px; position: relative; overflow: hidden; transition: color .5s ease; }
.reservation__btns a span { font-family: var(--font-jp); font-size: 1.4rem; margin-right: auto; padding-left: 4px; }
.reservation__btns a::before { content: ""; position: absolute; inset: 0; background: var(--dark); border-radius: 999px; transform: translateX(-101%); transition: transform .6s cubic-bezier(.7, 0, .2, 1); z-index: -1; }
.reservation__btns a { z-index: 0; }
.reservation__btns a i { width: 34px; height: 1px; background: currentColor; position: relative; transition: width .5s ease; }
.reservation__btns a i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.reservation__btns a:hover { color: var(--surface); }
.reservation__btns a:hover::before { transform: none; }
.reservation__btns a:hover i { width: 48px; }
@media (max-width: 767px) {
  .reservation { padding: 100px 0 90px; }
  .reservation .obj--n7 { width: 36vw; top: 40px; left: -12vw; }
  .reservation .obj--n8 { width: 38vw; right: -8vw; }
  .reservation .container { padding: 0 24px; }
  .reservation__ttl { font-size: 9rem; margin-bottom: 30px; }
  .reservation__btns { flex-direction: column; gap: 12px; }
  .reservation__btns a { font-size: 2.1rem; padding: 24px 26px 22px 30px; }
}