.mv {
  height: 100svh;
  width: 100vw;
  &.is-visible {
    .mv__text-wrap {
      opacity: 1;
    }
  }
}
:where(.mv) {
  .mv-inner {
    position: fixed;
    z-index: -1;
    top: 0;
  }
  .mv__movie {
    width: 100vw;
    height: 100svh;
    object-fit: cover;
  }
  .mv__text-wrap {
    position: absolute;
    bottom: calc(var(--vw) * 91);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 10);
    }
    @media screen and (min-width: 769px) {
      bottom: calc(var(--vw) * 103);
    }
  }
  .mv__text-main {
    font-size: calc(var(--rem) * 20);
    letter-spacing: 1px;
    line-height: 36px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 32);
      letter-spacing: 1.6px;
      line-height: 57px;
    }
  }
  .mv__text {
    font-weight: 500;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 1px;
    line-height: 36px;
    font-family: "noto-serif", serif;
    margin-top: calc(var(--vw) * 15);
    display: block;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 25);
      letter-spacing: 1.6px;
      line-height: 57px;
    }
    .number {
      font-family: "Shippori Mincho", serif;
    }
  }
}
.michelin {
  background-color: #1A1E29;
  padding: calc(var(--vw) * 57) 0 calc(var(--vw) * 0);
  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 110) calc(var(--vw) * 10) calc(var(--vw) * 15);
  }
}
:where(.michelin) {
  .about__review-lead {
    color: #D5CCA6;
    font-weight: 400;
    font-size: calc(var(--rem) * 22);
    letter-spacing: 1.1px;
    line-height: 35px;
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 21);
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 40);
      text-align: center;
      letter-spacing: 2px;
      line-height: 50px;
      margin-bottom: calc(var(--vw) * 34);
    }
  }
  .about__review-sub-lead {
    display: block;
    @media screen and (max-width: 768px) {
      margin: 0 auto calc(var(--vw) * 40);
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
      line-height: 28px;
      margin: 0 auto calc(var(--vw) * 29);
      padding: 0 calc(var(--vw) * 21);
    }
    @media screen and (min-width: 769px) {
      text-align: center;
      font-size: calc(var(--rem) * 17);
      letter-spacing: 0.85px;
      line-height: 35px;
      margin: 0 auto calc(var(--vw) * 51);
    }
  }
  .about__review + .about__review {
    margin-top: calc(var(--vw) * 32);
  }
}

.news {
  display: flex;
  justify-content: center;
  background-color: #1A1E29;
  @media screen and (max-width: 768px) {
    flex-direction: column;
    padding: calc(var(--vw) * 75) calc(var(--vw) * 21) calc(var(--vw) * 57);
    gap: calc(var(--vw) * 24);
  }
  @media screen and (min-width: 769px) {
    gap: calc(var(--vw) * 125);
    padding: calc(var(--vw) * 118) 0;
  }
}
:where(.news) {
  .news__text-wrap {
    @media screen and (min-width: 769px) {
      padding-top: calc(var(--vw) * 15);
    }
  }
  .news__title {
    font-weight: 400;
    font-size: calc(var(--rem) * 28);
    letter-spacing: 1.4px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 35);
      letter-spacing: 1.75px;
      margin-bottom: calc(var(--vw) * 7);
    }
  }
  .news__all-button {
    font-size: calc(var(--rem) * 13);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
    }
  }
  .news__content {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 747);
    }
  }
  .news__item-content {
    display: flex;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: calc(var(--vw) * 4);
      padding-left: calc(var(--vw) * 7);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 31);
    }
  }
  .news__item-title, .news__item-date {
    font-size: calc(var(--rem) * 15);
    font-weight: 400;
    line-height: 22px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
    }
  }
  .news__item-date {
    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 13);
    }
  }
  .news__item-link {
    width: 100%;
    display: block;
    padding: calc(var(--vw) * 13) 0;
    transition: opacity 0.2s linear;
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 34) 0;
    }
    &:hover {
      opacity: 0.6;
    }
  }
  .news__item {
    border-top: 0.75px solid #FFF;
    @media screen and (min-width: 769px) {
      border-top: 1.34px solid #FFF;
    }
  }
  .news__item:last-child {
    border-bottom: 0.75px solid #FFF;
    @media screen and (min-width: 769px) {
      border-bottom: 1.34px solid #FFF;
    }
  }
}

.about {
  background-color: #1A1E29;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("../../images/bg_about.webp");
  padding: calc(var(--vw) * 84) 0 calc(var(--vw) * 93);
  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 116) 0 calc(var(--vw) * 142);
  }
}
:where(.about) {
  .about__lead {
    font-size: calc(var(--rem) * 28);
    text-align: center;
    line-height: 44px;
    letter-spacing: 1.4px;
    font-weight: 400;
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 20);
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 40);
      letter-spacing: 2px;
      line-height: 59px;
      margin-bottom: calc(var(--vw) * 22);
    }
  }
  .about__sub-lead {
    text-align: center;
    display: block;
    @media screen and (max-width: 768px) {
      margin: 0 auto calc(var(--vw) * 69);
      line-height: 28px;
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
      padding: 0 calc(var(--vw) * 20);
    }
    @media screen and (min-width: 769px) {
      margin: 0 auto calc(var(--vw) * 50);
      width: calc(var(--vw) * 1023);
      line-height: 35px;
      font-size: calc(var(--rem) * 17);
      letter-spacing: 0.85px;
    }
  }
  .about__ramen-image {
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 20);
      margin: 0 auto calc(var(--vw) * 45);
    }
    @media screen and (min-width: 769px) {
      margin: 0 auto calc(var(--vw) * 110);
      width: calc(var(--vw) * 558);
    }
  }
  .about__pride-text-wrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--vw) * 26);
    @media screen and (min-width: 769px) {
      padding-top: calc(var(--vw) * 147);
      width: calc(var(--vw) * 511);
      gap: calc(var(--vw) * 47);
    }
  }
  .about__pride-image {
    @media screen and (max-width: 768px) {
      width: calc(var(--vw) * 345);
      margin-left: auto;
    }
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 600);
    }
  }
  .about__pride-item {
    display: flex;
    justify-content: center;
    align-items: self-start;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: calc(var(--vw) * 42);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 117);
    }
  }
  .about__pride-item:first-child {
    @media screen and (max-width: 768px) {
      flex-direction: column-reverse;
      align-items: end;
    }
  }
  .about__pride-item:nth-child(2) {
    @media screen and (max-width: 768px) {
      .about__pride-image {
        margin-right: auto;
        margin-left: 0;
      }
    }
  }
  .about__pride-item + .about__pride-item {
    margin-top: calc(var(--vw) * 49);
    @media screen and (min-width: 769px) {
      margin-top: calc(var(--vw) * 142);
    }
  }
  .about__pride-text-title {
    color: #D5CCA6;
    font-weight: 500;
    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 32);
      letter-spacing: 1.6px;
      line-height: 48px;
      padding-left: calc(var(--vw) * 36);
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 40);
      letter-spacing: 2px;
      line-height: 60px;
    }
  }
  .about__pride-text-description {
    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
      line-height: 28px;
      padding: 0 calc(var(--vw) * 39) 0 calc(var(--vw) * 54);
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1px;
      line-height: 40px;
      padding-left: calc(var(--vw) * 22);
    }
  }
}

.reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("../../images/bg_review.webp");
  background-color: #FFF;
  padding: calc(var(--vw) * 90) calc(var(--vw) * 45);
  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 180) 0;
  }
}
:where(.reviews) {
  .reviews__title {
    font-size: calc(var(--rem) * 17.6);
    font-weight: 400;
    color: #69695A;
    margin-bottom: calc(var(--vw) * 23);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 22);
      margin-bottom: calc(var(--vw) * 29);
    }
  }
  .reviews__swiper {
    margin: 0 auto;
    width: 100%;
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1010);
    }
  }
  .reviews__item-title {
    color: #908E70;
    font-size: calc(var(--rem) * 28);
    letter-spacing: 1.4px;
    font-weight: 400;
    text-align: center;
    line-height: 45px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 45);
      letter-spacing: 2.25px;
      line-height: 57px;
    }
  }
  .reviews__item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--vw) * 18);
    align-items: center;
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 36);
    }
  }
  .reviews__item-content {
    color: #1A1E29;
    font-size: calc(var(--rem) * 15);
    letter-spacing: 0.75px;
    line-height: 40px;
    text-align: center;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 25);
      letter-spacing: 1.25px;
      line-height: 40px;
    }
  }
  .reviews__swiper {
    padding-bottom: calc(var(--vw) * 60) !important;
    @media screen and (min-width: 769px) {
      padding-bottom: calc(var(--vw) * 98) !important;
    }
  }
  .swiper-pagination-bullet {
    background: #D9D9D9 !important;
    width: 10px !important;
    height: 10px !important;
    opacity: 1 !important;
    margin: 0 13.5px !important;
    @media screen and (min-width: 769px) {
      width: 22px !important;
      height: 22px !important;
      opacity: 1 !important;
      margin: 0 28px !important;
    }
  }
  .swiper-pagination-bullet-active {
    width: 13px !important;
    height: 13px !important;
    @media screen and (min-width: 769px) {
      width: 27px !important;
      height: 27px !important;
    }
  }
}

.banner {
  height: 80vh;
}
:where(.banner) {
}

.menu {
  background: #FFF;
  padding: calc(var(--vw) * 66) calc(var(--vw) * 21) calc(var(--vw) * 50);
  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 115) 0 calc(var(--vw) * 85);
  }
}
:where(.menu) {
  .menu__title {
    color: #69695A;
    font-size: calc(var(--rem) * 36);
    letter-spacing: 1.8px;
    font-weight: 400;
    text-align: center;
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 95);
      font-size: calc(var(--rem) * 45);
      letter-spacing: 2.25px;
    }
  }
  .menu__item + .menu__item {
    @media screen and (max-width: 768px) {
      margin-top: calc(var(--vw) * 20);
    }
  }
  .menu__item:last-child {
    @media screen and (max-width: 768px) {
      margin-bottom: calc(var(--vw) * 26);
    }
  }
  .menu__item-title {
    color: #373750;
    font-weight: 400;
    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 0.8px;
      line-height: 27px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 1px;
    }
  }
  .menu__item-thumbnail {
    margin-bottom: calc(var(--vw) * 17);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 37);
    }
  }
  .splide__slide {
    transition: transform 0.2s linear;
  }
  .splide__slide:hover {
    transform: scale(1.03);
  }
  .menu__viewall-link {
    border: 1px solid #373750;
    color: #373750;
    text-align: center;
    transition: 0.2s linear;
    @media screen and (max-width: 768px) {
      padding: calc(var(--vw) * 10) 0;
      width: 100%;
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1px;
      line-height: 37px;
    }
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 21) calc(var(--vw) * 157);
      font-size: calc(var(--rem) * 25);
      letter-spacing: 1.25px;
      line-height: 30px;
    }
    &:hover {
      opacity: 0.6;
    }
  }
  .menu__viewall-wrap {
    display: flex;
    justify-content: center;
  }
  .menu__slider {
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 95);
    }
  }
  .splide__list {
    align-items: baseline;
  }
}

.franchise {
  display: grid;
  @media screen and (min-width: 769px) {
    grid-template-columns: 1fr 0.86fr;
  }
}
:where(.franchise) {
  .franchise__text {
    width: 100%;
    background-color: #FFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("../../images/bg_franchise.webp");
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--vw) * 74) calc(var(--vw) * 40) calc(var(--vw) * 44);
    @media screen and (min-width: 769px) {
      padding: 0 calc(var(--vw) * 30) 0 calc(var(--vw) * 106);
    }
  }
  .franchise__image {
    width: 100%;
  }
  .franchise__lead {
    color: #69695A;
    font-size: calc(var(--rem) * 22);
    letter-spacing: 1.1px;
    line-height: 40px;
    margin-bottom: calc(var(--vw) * 31);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 39);
      letter-spacing: 1.95px;
      line-height: 50px;
      margin-bottom: calc(var(--vw) * 44);
    }
  }
  .franchise__sub {
    color: #373750;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    line-height: 28px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 0.8px;
      line-height: 35px;
    }
  }
  .first {
    margin-bottom: calc(var(--vw) * 28);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 35);
    }
  }
}

.contact {
  background: #FFF;
  display: flex;
  color: #373750;
  flex-direction: column;
  padding: calc(var(--vw) * 58) calc(var(--vw) * 44) calc(var(--vw) * 58);
  gap: calc(var(--vw) * 23);
  @media screen and (min-width: 769px) {
    align-items: center;
    gap: calc(var(--vw) * 70);
    padding: calc(var(--vw) * 124) 0 calc(var(--vw) * 102);
  }
}
:where(.contact) {
  .contact__title {
    font-weight: 400;
    font-size: calc(var(--rem) * 28);
    letter-spacing: 1.4px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 35);
      letter-spacing: 1.75px;
    }
  }
  .contact__form {
    @media screen and (max-width: 768px) {
      width: 100%;
    }
    p + p {
      margin-top: calc(var(--vw) * 6);
      @media screen and (min-width: 769px) {
        margin-top: calc(var(--vw) * 30);
      }
    }
    p {
      label {
        display: flex;
        justify-content: space-between;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          gap: calc(var(--vw) * 8);
          font-size: calc(var(--rem) * 14);
          letter-spacing: 0.7px;
        }
        @media screen and (min-width: 769px) {
          font-size: calc(var(--rem) * 18);
          letter-spacing: 1px;
        }
      }
    }
    input, textarea {
      border: 1px solid #373750;
      width: 100%;
      padding: calc(var(--vw) * 6) calc(var(--vw) * 15);
      @media screen and (min-width: 769px) {
        width: min(calc(var(--vw) * 760), 760px);
        margin-left: calc(var(--vw) * 80);
        padding: calc(var(--vw) * 4) calc(var(--vw) * 16);
      }
    }
    input[type=submit] {
      margin-left: auto;
      display: flex;
      background: #373750;
      color: #FFF;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s linear;
      position: relative;
      font-weight: 400;
      display: flex;
      justify-content: center;
      @media screen and (max-width: 768px) {
        font-size: calc(var(--rem) * 16);
        letter-spacing: 0.8px;
        margin-top: calc(var(--vw) * 14);
        padding: calc(var(--vw) * 12) 0;
      }
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 20);
        letter-spacing: 1px;
        padding: calc(var(--vw) * 10) 0;
        width: min(calc(var(--vw) * 760), 760px);
      }
      &:hover {
        opacity: 0.6;
      }
      &::after {
        transition: right 0.1s linear;
        width: calc(var(--vw)* 12);
        height: calc(var(--vw)* 12);
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        position: absolute;
        content: "";
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("../../images/icon_arrow-white.svg");
  
        @media screen and (min-width: 769px) {
          width: calc(var(--vw)* 17);
          height: calc(var(--vw)* 5);
        }
      }
    }
  }
}