@charset "utf-8";
@media screen and (min-width: 1100px) {
  .header .nav-menu li {
    padding-left: var(--space-l);
  }
}
@media screen and (max-width: 700px) {
  /* common style-------------- */
  .header {
    padding: 0;
    .nav-menu {
      width: 100%;
      text-align: center;
    }
  }

  .ham {
    display: block;
    width: 31px;
    height: 31px;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 30;
    cursor: pointer;
    background-color: transparent;
  }
  .ham span {
    position: absolute;
    width: 100%;
    height: 2px;
  }
  .ham1 {
    top: calc(50% - 10% / 2 - 25%);
    transition: 0.2s;
    background-color: #fff;
  }
  .ham2 {
    top: calc(50% - 10% / 2);
    background-color: #fff;
  }
  .ham3 {
    top: calc(50% - 10% / 2 + 25%);
    transition: 0.5s;
    background-color: #fff;
  }
  .open .ham1 {
    top: calc(50% - 10% / 2);
    background-color: #fff;
    transform: rotate(135deg);
  }
  .open .ham2 {
    opacity: 0;
  }
  .open .ham3 {
    top: calc(50% - 10% / 2);
    background-color: #fff;
    transform: rotate(-135deg);
  }
  .main-navigation {
    display: none;
    position: fixed;
    background-color: var(--main-color);
    width: 100%;
    height: 100vh;
    padding: 5rem 0;
    top: 0;
    left: 0;
    transition: 0.3s;
  }
  .nav-menu {
    flex-direction: column;
    gap: 2rem;
  }
  .nav-menu li {
    line-height: 2;
  }
  .nav-menu {
    & a {
      font-size: 1rem;
      color: #fff;
    }
    & a:hover {
      color: dimgray;
    }
  }
  .open .main-navigation {
    display: block;
  }
  .inner {
    margin: 0 1rem;
  }

  /*----------------------
  index.html
   --------------------- */
  .main:has(#about) {
    padding: 10rem 0;
  }
  .mainvisual {
    height: 75vh;
    .text {
      padding: 1rem;
      top: 20%;
      background-color: #121212b5;
    }
    .logo {
      font-size: 3rem;
      text-align: center;
      margin-bottom: 1rem;
    }
    .logo::before {
      bottom: 3rem;
      right: 5rem;
    }
    & p {
      text-align: center;
    }
    & img {
      width: 100%;
      height: 70vh;
      object-fit: cover;
      object-position: 50% 100%;
    }
  }
  /* main-------------- */
  /* about--- */
  #about {
    .container {
      flex-direction: column;
      height: auto;
    }
    .item {
      width: 100%;
    }
    .pizza {
      margin-top: -10rem;
    }
    .pasta {
      margin-top: 0;
    }
    .text {
      padding: 2rem 1rem;
      & p {
        width: 100%;
      }
    }
  }
  /* menu-------- */
  #menu {
    .container {
      flex-direction: column;
    }
    .item {
      width: 100%;
    }
  }
  /* reservation--- */
  #reservation {
    background-position: 50% 50%;
    background-size: cover;
  }
  /* access--- */
  #access {
    .address {
      flex-direction: column;
      width: 100%;
      & dt,
      & dd {
        width: 100%;
      }
    }
  }
  /* ----------------
  about.html
  ----------------- */
  #page-about {
    .image {
      flex-direction: column;
      gap: var(--space-xs);
    }
    .items img {
      width: 100%;
    }
    .fettuccine {
      object-position: center;
    }
  }

  /*--------------------
  menu.html
  ------------------- */
  .menu-container {
    & section {
      padding: 1rem 0;
    }
    & dl:not(.course) {
      & dt {
        width: 75%;
      }
      & dd {
        width: 25%;
      }
    }
  }
  /*--------------------
  recruit.html
  ------------------- */
  .recruit-container {
    & dt {
      width: 35%;
    }
    & dd {
      width: 65%;
    }
  }
}