/* feature
--------------------------------------------------*/

.feature {
  padding: 174rem 0 214rem;
  position: relative;
}

.feature::after {
  background-color: rgba(0, 0, 0, 0.65);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.feature .container {
  position: relative;
  z-index: 1;
}

.feature__bg {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.feature__bg img {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.feature__flex {
  display: flex;
}

.feature__content {
  padding-top: 14rem;
  text-align: center;
}

.feature__title {
  display: inline-block;
  font-size: 47rem;
  line-height: calc(68 / 57);
  text-align: left;
}

.feature__text {
  font-size: 18rem;
  letter-spacing: 0.2em;
  line-height: calc(40 / 18);
  margin-top: 72rem;
  text-align: left;
}

.feature__img {
  max-width: 653rem;
}

/* gallery
--------------------------------------------------*/

.gallery {
  background-image: url("../img/gallery-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 89rem 0 157rem;
}

.gallery__list {
  margin-top: 82rem;
}

.gallery__item button {
  padding-top: 100%;
  position: relative;
  width: 100%;
}

.gallery__item img {
  -o-object-fit: cover;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

/* gallery-modal
--------------------------------------------------*/

.gallery-modal {
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: var(--layer-modal);
}

.gallery-modal.show {
  visibility: visible;
}

.gallery-modal__overlay {
  background-color: rgba(0, 0, 0, 0.46);
  display: block;
  height: 100%;
  position: fixed;
  width: 100%;
}

.gallery-modal__content {
  -webkit-transform: translate(-50%, -50%);
  height: 600rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800rem;
}

.gallery-modal__img-wrapper {
  background-color: white;
  position: relative;
}

.gallery-modal__swiper {
  cursor: default;
  overflow: hidden;
}

.gallery-modal__swiper:hover .gallery-modal__swiper-btn {
  opacity: 1;
}

.gallery-modal__close-btn {
  align-items: flex-start;
  background-color: var(--color-accent-2);
  display: flex;
  font-size: 10rem;
  height: 60rem;
  justify-content: center;
  line-height: 1;
  padding-top: 6rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 60rem;
  z-index: 2;
}

.gallery-modal__close-btn-inner {
  height: 100%;
  position: relative;
  text-align: center;
  width: 100%;
}

.gallery-modal__close-btn-inner::before,
.gallery-modal__close-btn-inner::after {
  -webkit-transform: translate(-50%, 0);
  background-color: white;
  content: "";
  height: 3rem;
  left: 50%;
  position: absolute;
  top: 55%;
  transform: translate(-50%, 0);
  width: 36rem;
}

.gallery-modal__close-btn-inner::before {
  -webkit-transform: translate(-50%, 0) rotate(45deg);
  transform: translate(-50%, 0) rotate(45deg);
}

.gallery-modal__close-btn-inner::after {
  -webkit-transform: translate(-50%, 0) rotate(-45deg);
  transform: translate(-50%, 0) rotate(-45deg);
}

.gallery-modal__item {
  height: auto !important;
}

.gallery-modal__item img {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gallery-modal__swiper-btn {
  -webkit-transform: translateY(-50%);
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition-duration: var(--transition-duration);
  transition-property: opacity;
  transition-timing-function: var(--transition-timing-function);
  width: 50rem;
  z-index: 1;
}

.gallery-modal__swiper-btn-prev {
  left: 0;
}

.gallery-modal__swiper-btn-next {
  right: 0;
}

.swiper-slide {
  height: auto !important;
}

.swiper-button-disabled {
  opacity: 0 !important;
  pointer-events: none;
}

.swiper-fade .swiper-slide {
  transition-property: opacity !important;
}

/* access
--------------------------------------------------*/

.access {
  padding: 77rem 0 30rem;
  position: relative;
}

.access__content {
  display: flex;
  margin-top: 57rem;
}

.access__img {
  max-width: 500rem;
}

.access__address {
  letter-spacing: 0.2em;
}

/* hero-img
--------------------------------------------------*/

.hero-img {
  position: relative;
}

.hero-img__img img {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
}

.hero-img__title {
  -webkit-transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.44);
  display: block;
  font-size: 48rem;
  left: 50%;
  letter-spacing: 0.2em;
  line-height: 1;
  padding: calc(50 / var(--canvas-width-pc) * 100vw) 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* map
--------------------------------------------------*/

/* reservation
--------------------------------------------------*/

.reservation {
  padding: 30rem 0 159rem;
  position: relative;
}

.reservation__title {
  font-size: 20rem;
  line-height: 1;
  margin-top: 40rem;
  text-align: center;
}

.reservation__text {
  margin-top: 32rem;
}

.reservation__btn-wrapper {
  margin-top: 52rem;
  text-align: center;
}

.reservation__btn-wrapper .common-btn {
  max-width: 480rem;
}

/* feature
--------------------------------------------------*/

.feature {
  background-color: black;
}

.feature__flex {
  flex-direction: row-reverse;
}

/* gallery
--------------------------------------------------*/

.gallery {
  background-image: url("../../img/nishitenma/gallery-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.gallery::before {
  -webkit-transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  display: inline-block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.gallery__list {
  position: relative;
}

/* bg-wrapper
--------------------------------------------------*/

.bg-wrapper {
  background-image: url("../../img/shop-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.bg-wrapper::before {
  background-color: rgba(0, 0, 0, 0.55);
  content: "";
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .feature__img {
    margin-left: 36rem;
  }

  .gallery-modal__swiper-btn {
    opacity: 0;
  }

  .access__address {
    margin-left: 100rem;
  }

  .hero-img__img {
    aspect-ratio: 1920/267;
  }

  .map {
    aspect-ratio: 1920/450;
  }

  .reservation__btn-wrapper .common-btn:not(:first-of-type) {
    margin-left: 38rem;
  }

  .feature {
    padding-bottom: 95rem;
    padding-top: 132rem;
  }

  .feature__content {
    margin-left: 52rem;
  }

  .feature__text {
    margin-top: 56rem;
  }

  .feature__img {
    margin-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .feature {
    padding: 47rem 0 60rem;
  }

  .feature__flex {
    flex-direction: column;
  }

  .feature__title {
    font-size: 34rem;
    line-height: calc(41 / 34);
  }

  .feature__text {
    margin-top: 30rem;
  }

  .feature__img {
    margin-top: 78rem;
  }

  .gallery {
    padding: 45rem 0 101rem;
  }

  .gallery__list {
    margin-top: 40rem;
  }

  .gallery-modal__content {
    height: auto;
    max-width: 87.179487vw;
    max-width: calc(100vw - var(--padding-sm--rem) * 2);
  }

  .access {
    padding: 45rem 0 22rem;
  }

  .access__content {
    flex-direction: column;
    margin-top: 33rem;
  }

  .access__address {
    font-size: 16rem;
    line-height: calc(34 / 14);
    margin-top: 33rem;
  }

  .hero-img__img {
    padding-top: 34.615385%;
  }

  .hero-img__img img {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .hero-img__title {
    font-size: 24rem;
    padding: 25rem 0;
  }

  .map {
    height: 85.897436vw;
  }

  .reservation {
    padding: 22rem 0 84rem;
  }

  .reservation__text {
    font-size: 16rem;
  }

  .reservation__btn-wrapper .common-btn:not(:first-of-type) {
    margin-top: 12rem;
  }

  .feature {
    padding-bottom: 47rem;
    padding-top: 0;
  }

  .feature__flex {
    flex-direction: column-reverse;
  }

  .feature__img {
    margin-top: 0;
    max-width: 100vw;
  }
}

@media only screen and (max-width: 575px) {
  .gallery-modal__content {
    max-width: 340rem;
  }
}


/* ÄɲÃCSS */
.menu_flex{
  display: flex;
  gap: 50px;
}
.menu_flex #food{
  width: fit-content;
}
.menu_flex #yen{
  width: fit-content;
}


@media only screen and (max-width: 575px) {
.reservation__content #menu_title{
  font-size: 22rem;
  line-height: 34rem;
}
.reservation__content #menu_yen{
  font-size: 18rem;
}
}
@media only screen and (min-width: 576px) {
.reservation__content #menu_title{
  font-size: 15px;
}
}
@media only screen and (max-width: 575px) {
  #sp{
    display: block;
  }
  #dt{
    display: none;
  }
  .sp{
    display: block;
  }
  .dt{
    display: none;
  }
}
@media only screen and (min-width: 576px) {
  #sp{
    display: none;
  }
  #dt{
    display: block;
  }
  .sp{
    display: none;
  }
  .dt{
    display: block;
  }
}