@charset "utf-8";

main {
  display: grid;
  background-image: url(/image/kouzan_bg.jpg);
}
.heroSection {
  min-width: 0;
  .swiper {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
.mainContentSection {
  display: grid;
  gap: 128px 0;
  width: 60%;
  margin-inline: auto;
  background-color: #fff;
  padding: 120px 64px;
  .recommendedDishes {
    display: grid;
    gap: 180px 0;
    > h2 {
      width: fit-content;
      margin-inline: auto;
      display: grid;
      justify-content: center;
      color: var(--themeRed);
      font-size: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
      border-bottom: 5px solid;
      padding: 16px 32px;
    }
    > .descriptionBox {
      width: 90%;
      background-color: var(--themeRed);
      color: white;
      > .descriptionText {
        font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
      }
    }
    > .no1Menu {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 64px 0;
      margin-inline-start: auto;
      position: relative;
      > figure {
        position: absolute;
        top: -10%;
        left: -10%;
        width: 50%;
        border: 12px solid var(--themeRed);
      }
      > hgroup {
        grid-column: 2;
        padding: 52px 24px 0 24px;
        white-space: nowrap;
        > h3 {
          background-color: #fff;
          color: var(--themeRed);
          font-size: clamp(0.875rem, 0.55rem + 1.63vw, 2.5rem);
          text-align: center;
          padding: 8px;
        }
        > p {
          font-size: clamp(0.875rem, 0.6rem + 1.38vw, 2.25rem);
          margin-top: 64px;
        }
      }
      > .descriptionText {
        grid-column: 1/3;
        display: grid;
        gap: 20px 0;
        padding: 24px;
        > p {
          > span {
            display: inline-block;
          }
        }
      }
    }
    > .courseMenu {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 64px 0;
      margin-inline-end: auto;
      position: relative;
      > hgroup {
        display: grid;
        gap: 6px 0;
        font-size: clamp(0.875rem, 0.6rem + 1.38vw, 2.25rem);
        padding: 53px 24px 0 24px;
        > h3 {
          font-weight: normal;
          white-space: nowrap;
        }
        > p:nth-of-type(1) {
          background-color: white;
          color: var(--themeRed);
          text-align: center;
          width: fit-content;
          padding: 8px;
          display: grid;
          align-items: center;
        }
        > p:nth-of-type(5) {
          margin-top: 40px;
          font-size: clamp(0.875rem, 0.7rem + 0.88vw, 1.75rem);
        }
      }
      > figure {
        grid-column: 2;
        position: absolute;
        top: -10%;
        right: -10%;
        border: 12px solid var(--themeRed);
      }
      > .descriptionText {
        grid-column: 1/3;
        display: grid;
        gap: 20px 0;
        padding: 24px;
      }
    }
    > .sushiMenu {
      display: grid;
      grid-template-columns: 1fr 60%;
      gap: 64px 0;
      margin-inline-start: auto;
      position: relative;
      > hgroup {
        grid-column: 1/3;
        display: grid;
        gap: 6px 0;
        font-size: clamp(0.875rem, 0.55rem + 1.63vw, 2.5rem);
        padding: 48px 48px 0 48px;
        > h3 {
          font-weight: normal;
          font-size: clamp(0.875rem, 0.55rem + 1.63vw, 2.5rem);
        }
      }
      > figure {
        position: absolute;
        bottom: -10%;
        left: -10%;
        width: 50%;
        border: 12px solid var(--themeRed);
      }
      > .descriptionText {
        grid-column: 2;
        display: grid;
        gap: 20px 0;
        padding: 24px;
      }
    }
  }
  .atmosphere {
    display: grid;
    gap: 180px 0;
    > h2 {
      width: fit-content;
      margin-inline: auto;
      display: grid;
      justify-content: center;
      color: var(--themeRed);
      font-size: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
      border-bottom: 5px solid;
      padding: 16px 32px;
    }
    > figure {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 21px;
      > .atmosphereImage {
        border: 12px solid var(--themeRed);
        &:first-of-type {
          grid-column: 1/3;
        }
      }
    }
  }
  .shopInfo {
    display: grid;
    gap: 11px 0;
    font-size: clamp(0.688rem, 0.525rem + 0.81vw, 1.5rem);
    > li {
      display: grid;
      grid-template-columns: 30% 1fr;
      gap: 0 11px;
      color: white;
      > p,
      > div {
        padding: 9.65%;
      }
      > p {
        display: grid;
        place-items: center;
        background-color: var(--themeRed);
      }
      > div {
        background-color: #ba4a4a;
      }
    }
  }
}

/* media query --------------------------------------------------- */
@media (width < 1340px) {
  .mainContentSection {
    padding: 60px 16px;
    .recommendedDishes {
      > .descriptionBox {
        > hgroup {
          gap: 0;
        }
      }
      > .no1Menu {
        gap: 32px 0;
        > hgroup {
          > p {
            margin-top: 12px;
          }
        }
      }
      > .courseMenu {
        gap: 32px 0;
        > hgroup {
          > p {
            margin-top: 4px;
            &:nth-of-type(5) {
              margin-top: 8px;
            }
          }
        }
      }
      > .sushiMenu {
        gap: 32px 0;
        > .descriptionText {
          gap: 8px 0;
        }
      }
    }
    .atmosphere {
      gap: 128px 0;
    }
  }
}
@media (width < 1024px) {
  .mainContentSection {
    .recommendedDishes {
      > .no1Menu {
        > figure {
          left: -20%;
        }
      }
      > .courseMenu {
        > figure {
          top: -5%;
          right: -30%;
        }
      }
      > .sushiMenu {
        > figure {
          bottom: -5%;
        }
      }
    }
  }
}
@media (width < 768px) {
  main {
    gap: 24px 0;
    background-image: revert;
  }
  .heroSection {
    .swiper {
      height: revert;
    }
  }
  .mainContentSection {
    gap: 24px 0;
    width: 100%;
    padding: 0;
    .recommendedDishes {
      gap: 48px 0;
      > .descriptionBox {
        width: 100%;
        > hgroup {
          padding: 8px;
        }
        > .descriptionText {
          padding: 12px;
        }
      }
      > .no1Menu,
      > .courseMenu,
      > .sushiMenu {
        grid-template-columns: repeat(2, 1fr);
      }
      > .no1Menu {
        margin-inline-start: revert;
        > hgroup {
          display: grid;
          align-items: center;
          gap: 0;
          > p {
            margin-top: 0;
          }
        }
        > figure {
          width: 100%;
          position: revert;
        }
        > .descriptionText {
          grid-column: 1/3;
          gap: 8px 0;
        }
      }
      > .courseMenu {
        margin-inline-end: revert;
        > hgroup {
          grid-row: 1;
          align-items: center;
          > .spHiddenText {
            display: none;
          }
          > p:nth-of-type(5) {
            margin-top: 0;
          }
        }
        > figure {
          position: revert;
        }
        > .descriptionText {
          grid-column: 1/3;
          gap: 8px 0;
        }
      }
      > .sushiMenu {
        margin-inline-start: revert;
        > hgroup {
          grid-column: 2;
          align-content: center;
          align-items: center;
        }
        > figure {
          grid-row: 1;
          width: 100%;
          position: revert;
        }
        > .descriptionText {
          grid-column: 1/3;
        }
      }
    }
    .atmosphere {
      width: 90%;
      margin-inline: auto;
      gap: 48px 0;
      > figure {
        gap: 10px;
        > .atmosphereImage {
          border: 6px solid var(--themeRed);
        }
      }
    }
    .shopInfo {
      width: 90%;
      margin-inline: auto;
      margin-top: 24px;
      > li {
        > p,
        > div {
          padding: 4%;
        }
      }
    }
  }
}