@media (max-width: 467px) {
  body {
    width: 100%;
    header {
      padding: 0.75rem 1rem !important;
      h1 {
        a {
          font-size: 1.5rem;
        }
      }
      /* PCメニューは隠し、モバイルメニューを表示 */
      .nav-pc {
        display: none;
      }
      .nav-phone {
        display: flex;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        gap: 0;
        .hamburger {
          cursor: pointer;
          position: relative;
          z-index: 102; /* ドロワーより上 */
          background: #ffffff;
          border: none;
          border-radius: 0.5rem;
          padding: 6px;
          width: 44px;
          height: 44px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 6px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
          margin-top: 1rem;
          span {
            display: block;
            width: 100%;
            height: 3px;
            background: #000;
            border-radius: 2px;
            transition: transform 0.3s ease, opacity 0.2s ease;
          }
        }
        ul {
          position: fixed;
          top: 0;
          right: 0;
          height: 100vh;
          width: 70%;
          max-width: 280px;
          padding: 5rem 1.5rem 2rem;
          background: #ffffff;
          border-left: 3px solid #8eb9f9;
          display: flex;
          flex-direction: column;
          gap: 1.25rem;
          box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
          transform: translateX(100%);
          opacity: 1;
          pointer-events: none;
          z-index: 101;
          li a {
            font-size: 1.1rem;
            font-weight: 600;
          }
        }
        .nav-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.35);
          opacity: 0;
          pointer-events: none;
          z-index: 100;
        }
        &.open {
          ul {
            pointer-events: auto;
            animation: slideInRight 0.3s ease forwards;
          }
          .nav-overlay {
            pointer-events: auto;
            animation: fadeInOverlay 0.3s ease forwards;
          }
          .hamburger span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
          }
          .hamburger span:nth-child(2) {
            opacity: 0;
          }
          .hamburger span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
          }
        }
        &.closing {
          ul {
            animation: slideOutRight 0.3s ease forwards;
          }
          .nav-overlay {
            animation: fadeOutOverlay 0.3s ease forwards;
          }
        }
      }
    }
    main {
      width: 100%;
      margin-top: 25%;
      gap: 1rem;
      .visual {
        .images {
          width: 90vw;
          height: auto;
          aspect-ratio: 480 / 679;
          margin-top: 2rem;
        }
      }
      .floor-attention {
        width: 95%;
        margin-top: 25%;
        .text {
          width: 100%;
          ol {
            font-size: 0.9rem;
            padding-left: 1.5rem;
          }
        }
      }
      .schedule {
        width: 95%;
        .text {
          width: 100%;
          h1 {
            font-size: 1.5rem;
          }
          p {
            font-size: 0.9rem;
          }
          .times {
            width: 90%;
            font-size: 0.85rem;
            margin: 0.75rem 0;
            padding: 0.75rem;
          }
        }
      }
      .floor-map {
        width: 95%;
        .text {
          width: 100%;
          h1 {
            font-size: 1.5rem;
          }
          .image {
            gap: 0.5rem;
            img {
              width: 30%;
              height: auto;
            }
          }
        }
      }
      .event {
        width: 95%;
        .text {
          width: 100%;
          .catch {
            font-size: 0.9rem;
            margin: 0.75rem 0;
          }
          .title {
            width: 100%;
            font-size: 1.5rem;
          }
          .link {
            font-size: 0.5rem;
            padding: 0.75rem;
          }
          .main {
            width: 100%;
            padding: 1.5rem 0;
            h1 {
              font-size: 1.8rem;
            }
            .comment {
              font-size: 0.8rem;
            }
          }
          .sub {
            width: 100%;
            gap: 0.75rem;
            .one,
            .two {
              width: 100%;
              font-size: 0.9rem;
              padding: 1.25rem 0;
              .comment {
                font-size: 0.7rem;
              }
              h2 {
                font-size: 1rem;
              }
              .times {
                font-size: 0.8rem;
              }
            }
          }
          .mini {
            width: 100%;
            gap: 0.75rem;
            .one,
            .two {
              width: 10rem;
              height: 10rem;
              padding: 1rem;
              h4 {
                font-size: 0.5rem;
              }
            }
          }
          .teams {
            width: 100%;
            height: auto;
            padding: 1rem;
            font-size: 0.9rem;
            margin-top: 1rem;
          }
          .event-attention {
            width: 100%;
            padding: 1rem 0;
            h1 {
              font-size: 1.2rem;
            }
            h3 {
              font-size: 0.8rem;
            }
            img {
              margin: 0;
            }
            .content {
              margin-left: 0;
              width: 100%;
              padding: 0 1rem;
              .foot,
              .eat {
                gap: 0.75rem;
                img {
                  width: 50%;
                  max-width: 150px;
                }
                .text {
                  margin-left: 0 !important;
                  margin-right: 0 !important;
                  h2 {
                    font-size: 0.85rem;
                  }
                  p {
                    font-size: 0.5rem;
                  }
                }
              }
            }
          }
        }
      }
      .cosplay {
        width: 95%;
        .text {
          width: 100%;
          h1 {
            font-size: 1.5rem;
          }
          a {
            width: 85%;
            font-size: 0.85rem;
            padding: 0.75rem;
          }
          .catch {
            font-size: 0.85rem;
          }
          .contest,
          .booth {
            width: 95%;
            font-size: 0.9rem;
            padding: 0.75rem 0;
            h2 {
              font-size: 1rem;
            }
            p {
              font-size: 0.85rem;
            }
          }
        }
      }
      .kitchen {
        width: 95%;
        .text {
          width: 100%;
          h1 {
            font-size: 1.5rem;
          }
          h3 {
            font-size: 1rem;
            width: 95%;
          }
          img {
            width: 90%;
          }
          .detail {
            width: 95%;
            .images {
              gap: 0.5rem;
              img {
                width: 150px;
                height: auto;
              }
            }
          }
        }
        .kitchen-attention {
          width: 95%;
          padding: 0.75rem 0;
          h1 {
            font-size: 1.2rem;
          }
          h3 {
            font-size: 0.8rem;
          }
          img {
            margin: 0;
          }
          .content {
            margin-left: 0;
            width: 100%;
            padding: 0 0.75rem;
            .trash,
            .dirty {
              gap: 0.5rem;
              img {
                width: 50%;
                max-width: 150px;
              }
              .text {
                margin-left: 0 !important;
                margin-right: 0 !important;
                h2 {
                  font-size: 0.95rem;
                }
                p {
                  font-size: 0.5rem;
                }
              }
            }
          }
        }
      }
    }
    footer {
      width: 100%;
      .text {
        width: 95%;
        .location {
          width: 100%;
          .locate {
            gap: 0.5rem;
            img {
              width: 150px;
              height: auto;
            }
          }
          img {
            width: 100%;
            height: auto;
            max-width: 300px;
          }
        }
        #access {
          width: 100%;
          font-size: 0.9rem;
          iframe {
            width: 100%;
            height: 300px;
          }
        }
        .news {
          width: 100%;
          .detail {
            font-size: 0.85rem;
            padding: 0.75rem;
            p,
            a {
              margin-left: 1rem;
              font-size: 0.8rem;
            }
          }
        }
        .contact {
          width: 100%;
          font-size: 0.9rem;
          a {
            font-size: 0.85rem;
            padding: 0.75rem;
          }
        }
      }
    }
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes slideOutRight {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes fadeInOverlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOutOverlay {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}