/* デスクトップ */
@media (min-width: 768px) {
  .btn {
    display: none;
  }

  .list {
    display: flex;
    gap: 2em;
  }
}

/* モバイル */
@media (max-width: 767px) {
  /* ボタン */
  .btn {
    all: unset;
    outline: revert;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    width: 42px;
    height: 42px;
    position: relative;
    z-index: 200;
  }

  .close .btn {
    color: var(--gray-75);
  }

  .open .btn {
    color: var(--white);
  }

  /* ボタン内のバー */
  .btn {
    display: grid;
    place-items: center;
  }

  .btn::before,
  .btn::after,
  .btn .bar {
    grid-area: 1 / 1;
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background-color: currentColor;
    transition: transform 0.4s;
  }

  .close .btn::before {
    transform: translateY(-8px);
  }
  .close .btn::after {
    transform: translateY(8px);
  }

  .open .btn::before {
    transform: rotate(45deg);
  }
  .open .btn::after {
    transform: rotate(-45deg);
  }
  .open .btn .bar {
    transform: scale(0);
  }

  /* メニュー（オーバーレイ） */
  .list {
    position: fixed;
    inset: 0 -100% 0 100%;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    transition: transform 0.4s;
  }

  .open .list {
    transform: translateX(-100%);
  }

  /* メニュー（オーバーレイ内の配置） */
  .list {
    display: grid;
    gap: 40px;
    place-content: center;
    text-align: center;
  }
}

/* ホバー */
@media (hover: hover) {
  .list a:hover {
    color: var(--accent);
  }
}

@media (hover: none) {
  .list a {
    -webkit-tap-highlight-color: transparent;
  }

  .list a:active {
    color: var(--accent);
  }
}
