@charset "UTF-8";

html {
  font-size: 16px;
  /* overflow-x: hidden; */
}

/* ////////////////////////////////////// */

header {
  height: calc(100vw * 0.16);
  background: url(../img/header/noren_pc.webp) no-repeat;
  background-size: contain;
}

h1 {
  max-width: 130px;
}

.open__btn {
  max-width: 50px;
  margin-right: 6%;
}

/* /////////////////////////////////////// */

.navi__open {
  background-size: 80%, 80%, 100%;
  background-position: -30vw 50%, 50vw 50%, 100%;
}

@media screen and (width>=700px) {
  .navi__open {
    background-size: 550px, 550px, 100%;
    background-position: calc(-250px + 100vw * 0.08) 50%,
      calc(-270px + 100vw * 0.9) 50%, 100%;
  }
}

.navi__open-bg {
  gap: 10%;
  padding-bottom: 3rem;
}

.close__btn {
  width: 8vw;
  max-width: 60px;
  top: calc(100vw * 0.04);
  right: 6%;
}

.global__navi {
  max-width: 550px;
}

.global__navi li a {
  font-size: 1.3rem;
  letter-spacing: 0;
}

.shop__info {
  width: 300px;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1.5em;
}

.navi__open-line {
  order: 2;
}

/* /////////////////////////////////////////// */

.top {
  background-size: 95%, 97%;
  background-position: -50vw 60%, 50vw 60%;
}

@media screen and (width>=750px) {
  .top {
    background-size: 600px, 600px;
    background-position: calc(-300px + 100vw * 0.08) 70%,
      calc(-300px + 100vw * 0.9) 70%;
  }
}

@media screen and (width>=850px) {
  .top {
    background-size: 650px, 650px;
    background-position: calc(-350px + 100vw * 0.08) 70%,
      calc(-300px + 100vw * 0.9) 70%;
  }
}

h2 {
  padding-top: 4em;
}

h2 span {
  font-size: 2.3rem;
}

/* //////////////////////////////////// */

.introduction {
  padding-top: 8%;
}

@media screen and (width>=850px) {
  .introduction {
    border-radius: 600px 600px 600px 600px / 300px 300px 300px 300px;
  }
}

.yellow__vertical {
  font-size: 1.8rem;
  letter-spacing: -3px;
  margin: 0 auto 15%;
}

@media screen and (width>=700px) {
  .change__items {
    flex-direction: row;
    padding: 0;
  }

  .change__plate-img {
    width: 50%;
    max-width: 400px;
    position: relative;
    left: 5%;
  }

  .change__comment {
    font-size: 0.8rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .change__items:nth-of-type(2) .change__comment {
    padding-top: 0;
  }
}

.change {
  margin: 2% 0;
  padding: 5% 0 5% 25vw;
  background-position: 80% 50%;
}

.not__change {
  margin: 30% auto;
}

.to__history {
  justify-content: center;
  gap: 10%;
}

.to__history-img {
  max-width: 150px;
  height: 35vh;
}

.to__history-comment {
  padding-top: 2rem;
}

/* /////////////////////////////////////// */

.famous {
  width: 80%;
  max-width: 620px;
  padding: 20% 0 0;
}

.famous h3 {
  font-size: 2rem;
}

.famous__item {
  flex-direction: row;
  margin-bottom: 10%;
}

.famous__item:nth-of-type(2) {
  flex-direction: row-reverse;
}

.famous__item-img {
  max-width: 250px;
  height: 28vh;
}

.famous__item:nth-of-type(2) .famous__item-img {
  max-width: 260px;
  height: 25vh;
}

/* /////////////////////////////////////// */

.ketchup {
  max-width: 200px;
}

/* ////////////////////////////////////// */

.omurice__rule {
  max-width: 370px;
}

.omurice__rule-main-item {
  height: 370px;
  margin: 30% 0 45%;
}

.omurice__rule-main-item:nth-of-type(2) h5 {
  letter-spacing: 0;
  padding-top: 1em;
}

.omurice__rule-main-item:nth-of-type(4) h5 {
  padding-top: 1em;
}

@media screen and (width>=770px) {
  .omurice__rule {
    /* width: 95%; */
    max-width: none;
    display: flex;
    justify-content: space-around;
  }

  .omurice__rule-text-item {
    width: 45%;
    height: fit-content;
    min-width: 365px;
    position: sticky;
    top: 35vh;
  }

  .omurice__rule-main {
    padding-top: 6%;
  }

  .omurice__rule-main-item {
    min-width: 368px;
    max-width: 370px;
    margin-top: 35%;
  }

  .omurice__rule-main-item:last-of-type {
    margin-bottom: 0;
  }
}

/* //////////////////////////////////////////// */

.menu__introduction {
  margin: 35% 0 20%;
}

.menu__introduction-tt {
  border-radius: 0 150px 0 0;
}

.menu__introduction-tt .yellow__vertical {
  height: 70vh;
  padding-bottom: 1em;
}

.menu__introduction-body-comment {
  font-size: 1rem;
  line-height: 2;
  letter-spacing: -4px;
}

.menu__introduction-menu-container {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.menu__introduction-menu-item {
  max-width: 350px;
  padding: 3em 0;
}

.menu__introduction-menu-item h6 {
  letter-spacing: -3px;
}

.menu__introduction-menu-item h6 .macron {
  letter-spacing: 0px;
  padding-top: 3px;
}

.menu__introduction-menu-item-img {
  height: 35vh;
  /* margin: 5vh 0; */
}

.menu__introduction-ruler p {
  min-width: 430px;
  width: 50%;
  margin: 0 auto;
  /* padding-top: 5em; */
}

@media screen and (width>=650px) {
  .menu__introduction-ruler-img {
    right: calc(-5% + 100vw * 0.05);
    bottom: 0;
  }
}

/* /////////////////////////// */

@media screen and (width>=780px) {
  .slider__catch-copy span {
    font-size: 12vw;
    -webkit-text-stroke: 1.5px #fff;
  }
}

/* ///////////////////////////////// */

.access__text {
  max-width: 580px;
}

.access h3 {
  font-size: 2rem;
}

.access__img {
  max-width: 550px;
  margin: 0 auto;
}

@media screen and (width>=850px) {
  .access__container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  .access__text {
    max-width: 450px;
    margin: 0 0 5% 7%;
  }

  .access__img {
    width: 50%;
    max-width: 650px;
    min-width: 370px;
    position: absolute;
    right: 0;
  }

  .access__img-outside {
    width: 100%;
    bottom: 20%;
  }

  .access__caution {
    width: auto;
    margin: 0 0 0 7%;
  }
}

/* //////////////////////////// */

.contact {
  padding: 15% 0 20%;
}

.contact h3 {
  font-size: 2rem;
}

.contact__caution {
  width: 70%;
}

.contact__container {
  width: 95%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  column-gap: 0;
  margin: 11% auto 0;
}

.contact__item {
  max-width: 375px;
  height: 40vh;
}

.contact__item-text p {
  font-size: 0.9rem;
}

.contact__recommend {
  width: 50%;
  top: -12%;
  left: -9%;
}

/* //////////////////////////////// */

.information {
  max-width: 580px;
  padding: 15% 0 20%;
}

.information h3 {
  font-size: 2rem;
}

.information__list {
  justify-content: space-around;
}

.information__list p {
  width: 70%;
}

/* ////////////////////////////////// */

.to__top {
  margin: 0 auto 7%;
}

/* ///////////////////////////////// */

.footer__container {
  flex-direction: row;
  flex-wrap: wrap;
}

.footer__navi {
  max-width: 470px;
  flex-direction: row;
  justify-content: space-around;
}

.footer__navi-block {
  width: 50%;
  max-width: 240px;
}

.footer__img {
  max-width: 300px;
}

.footer__navi-block li {
  margin: 1em 0;
}

@media screen and (width>=804px) {
  footer {
    padding-top: 5%;
  }

  .footer__navi {
    order: 1;
  }

  .footer__img {
    order: 2;
  }
}