.index-drawer {
  --index-menu-width: min(calc(100vw - 8px), 1200px);
  --index-menu-ratio: .163333;
  --index-peek: clamp(14px, 2.333vw, 28px);
  position: fixed;
  z-index: 200;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--index-menu-width) * var(--index-menu-ratio) + 6px);
  transform: translateY(calc(100% - var(--index-peek)));
  transition: transform 1.28s cubic-bezier(.22, 1, .36, 1);
}

.index-drawer.is-open {
  transform: translateY(0);
  animation: index-drawer-rise 1.45s cubic-bezier(.16, .84, .22, 1) both;
}

.index-drawer.is-closing {
  animation: index-drawer-sink 1.05s cubic-bezier(.4, 0, .78, .22) .38s both;
}

.index-drawer__toggle {
  position: absolute;
  z-index: 4;
  top: clamp(3px, .583vw, 7px);
  left: 50%;
  display: grid;
  width: clamp(38px, 8vw, 96px);
  height: clamp(14px, 2vw, 24px);
  box-sizing: border-box;
  padding: clamp(2px, .417vw, 5px) clamp(3px, .583vw, 7px);
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  place-items: center;
}

.index-drawer__handle {
  display: block;
  width: calc(var(--index-menu-width) * .068333);
  height: max(3px, calc(var(--index-menu-width) * .0075));
  border-radius: 8px;
  background: #050505;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  transition: width .52s cubic-bezier(.22, 1, .36, 1), transform .42s cubic-bezier(.22, 1, .36, 1);
}

.index-drawer__toggle:hover .index-drawer__handle,
.index-drawer__toggle:focus-visible .index-drawer__handle {
  width: calc(var(--index-menu-width) * .0725);
}

.index-drawer__toggle:focus-visible {
  outline: 2px solid #df1717;
  outline-offset: 2px;
}

.index-drawer__viewport {
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.index-menu {
  position: relative;
  container-type: inline-size;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 19.333% repeat(4, minmax(0, 1fr));
  width: var(--index-menu-width);
  min-width: 0;
  height: calc(var(--index-menu-width) * var(--index-menu-ratio));
  margin: 3px auto 0;
  overflow: hidden;
  color: #111;
  background: transparent;
  font-family: "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic", Meiryo, sans-serif;
}

.index-menu::before {
  position: absolute;
  z-index: 0;
  inset: max(2px, .417cqw);
  border-radius: 2cqw;
  background: #fbfaf7;
  content: "";
  pointer-events: none;
}

.index-menu__frame {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.index-menu__intro {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 2.833cqw 2.667cqw 1.667cqw 2.833cqw;
  opacity: 0;
  transform: translateY(-5.333cqw);
}

.index-drawer.is-open .index-menu__intro {
  animation: index-menu-content-drop .9s cubic-bezier(.18, .78, .24, 1) .48s both;
}

.index-drawer.is-closing .index-menu__intro {
  animation: index-menu-content-lift .48s cubic-bezier(.55, 0, .82, .45) .22s both;
}

.index-menu__intro::after {
  position: absolute;
  top: calc(50% - 5.958cqw);
  right: .667cqw;
  width: max(1px, .167cqw);
  height: 11.917cqw;
  background: #111;
  content: "";
  opacity: .8;
  transform: rotate(-18deg);
  transform-origin: top;
}

.index-menu__title {
  margin: 0;
  color: #111 !important;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 4cqw;
  font-style: italic;
  font-weight: 700;
  line-height: .95;
  letter-spacing: 0;
  transform: rotate(-3deg);
}

.index-menu__brush {
  display: block;
  width: 13.167cqw;
  height: 2.083cqw;
  margin: .083cqw 0 -.167cqw -.167cqw;
}

.index-menu__lead {
  margin: 0 0 0 3.333cqw;
  color: #111 !important;
  font-size: 1.167cqw;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

.index-menu__nav {
  z-index: 1;
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  pointer-events: none;
}

.index-drawer.is-ready .index-menu__nav {
  pointer-events: auto;
}

.index-menu__item {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 3.5cqw 4.833cqw 1fr;
  grid-template-rows: 4.833cqw 2.833cqw 2.167cqw 2.333cqw;
  min-width: 0;
  padding: 2.333cqw 1.5cqw 1.333cqw 2cqw;
  color: #111;
  opacity: 0;
  text-decoration: none;
  transform: translateY(-5.333cqw);
  transition: background-color .2s ease;
}

.index-drawer.is-open .index-menu__item {
  animation: index-menu-content-drop .9s cubic-bezier(.18, .78, .24, 1) both;
}

.index-drawer.is-open .index-menu__item:nth-child(1) { animation-delay: .60s; }
.index-drawer.is-open .index-menu__item:nth-child(2) { animation-delay: .74s; }
.index-drawer.is-open .index-menu__item:nth-child(3) { animation-delay: .88s; }
.index-drawer.is-open .index-menu__item:nth-child(4) { animation-delay: 1.02s; }

.index-drawer.is-closing .index-menu__item {
  animation: index-menu-content-lift .48s cubic-bezier(.55, 0, .82, .45) both;
}

.index-drawer.is-closing .index-menu__item:nth-child(4) { animation-delay: 0s; }
.index-drawer.is-closing .index-menu__item:nth-child(3) { animation-delay: .06s; }
.index-drawer.is-closing .index-menu__item:nth-child(2) { animation-delay: .12s; }
.index-drawer.is-closing .index-menu__item:nth-child(1) { animation-delay: .18s; }

.index-menu__item + .index-menu__item::before {
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 0;
  width: max(1px, .083cqw);
  background: rgba(17, 17, 17, .58);
  content: "";
}

.index-menu__item:first-child {
  padding-left: 4.833cqw;
}

.index-drawer.is-ready .index-menu__item:hover,
.index-drawer.is-ready .index-menu__item:focus-visible {
  background: transparent;
  color: #111;
  opacity: 1;
}

.index-drawer.is-ready .index-menu__item:focus-visible {
  outline: 2px solid #df1717;
  outline-offset: -5px;
}

.index-menu__number {
  display: grid;
  align-self: center;
  width: 2.417cqw;
  height: 2.417cqw;
  color: #fff;
  background: #df1717;
  clip-path: polygon(50% 0, 63% 7%, 77% 5%, 87% 17%, 98% 28%, 94% 43%, 100% 57%, 91% 70%, 88% 86%, 72% 90%, 60% 100%, 46% 94%, 31% 98%, 20% 86%, 6% 78%, 8% 62%, 0 49%, 8% 35%, 7% 20%, 22% 13%, 34% 2%);
  font-size: 1.417cqw;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
  padding-bottom: .167cqw;
  place-items: center;
}

.index-menu__icon {
  align-self: center;
  width: 4.5cqw;
  height: 4.167cqw;
  object-fit: contain;
}

.index-menu__name {
  grid-column: 1 / -1;
  align-self: end;
  margin: 0;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 2.083cqw;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.index-menu__description {
  grid-column: 1 / -1;
  align-self: end;
  margin: 0;
  overflow: hidden;
  font-size: 1cqw;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-menu__arrow {
  grid-column: 2 / 4;
  justify-self: center;
  width: 3.5cqw;
  height: 1.833cqw;
  transition: transform .2s ease;
}

.index-drawer.is-ready .index-menu__item:hover .index-menu__arrow,
.index-drawer.is-ready .index-menu__item:focus-visible .index-menu__arrow {
  animation: index-arrow-drift 1.6s ease-in-out infinite;
}

.index-drawer.is-ready .index-menu__item:hover .index-menu__icon,
.index-drawer.is-ready .index-menu__item:focus-visible .index-menu__icon {
  animation: index-icon-hop .62s ease-in-out infinite;
}

@keyframes index-icon-hop {
  0%, 100% { transform: translateY(0); }
  42% { transform: translateY(-.667cqw); }
  62% { transform: translateY(-.667cqw); }
}

@keyframes index-arrow-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(.583cqw); }
}

@keyframes index-drawer-rise {
  0% { transform: translateY(calc(100% - var(--index-peek))); }
  100% { transform: translateY(0); }
}

@keyframes index-drawer-sink {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(100% - var(--index-peek))); }
}

@keyframes index-menu-content-drop {
  0% {
    opacity: 0;
    transform: translateY(-5.333cqw);
  }
  76% {
    opacity: 1;
    transform: translateY(.333cqw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes index-menu-content-lift {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-4.5cqw);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .index-drawer {
    --index-menu-ratio: .26;
    --index-peek: 25px;
  }

  .index-drawer__toggle {
    top: 8px;
  }

  .index-menu {
    grid-template-columns: 1fr;
  }

  .index-menu__intro {
    display: none;
  }

  .index-menu__nav {
    grid-column: 1 / -1;
  }

  .index-menu__item {
    grid-template-columns: 3.8cqw 5.2cqw 1fr;
    grid-template-rows: 6cqw 4.2cqw 3.2cqw 3.6cqw;
    padding: 4cqw 1.5cqw 2cqw 2.5cqw;
  }

  .index-menu__item:first-child {
    padding-left: 2.5cqw;
  }

  .index-menu__item + .index-menu__item::before {
    top: 24%;
    bottom: 16%;
  }

  .index-menu__number {
    width: 3.2cqw;
    height: 3.2cqw;
    padding-bottom: .2cqw;
    font-size: 1.9cqw;
  }

  .index-menu__icon {
    width: 5.8cqw;
    height: 5.5cqw;
  }

  .index-menu__name {
    font-size: 2.8cqw;
  }

  .index-menu__description {
    font-size: 1.7cqw;
  }

  .index-menu__arrow {
    width: 4.5cqw;
    height: 2.4cqw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index-drawer,
  .index-menu__intro,
  .index-menu__item,
  .index-menu__arrow {
    transition: none;
  }
}