@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&display=swap');

html {
  font-size               : 62.5%;
  -webkit-text-size-adjust: auto;
}

body {
  /* font-family: 'Noto Serif JP', serif; */
  font-family     : "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size       : 1.8rem;
  line-height     : 2;
  background-color: #E9E3D2;
}

img {
  width: 100%;
}

p {
  text-align: center;
  color     : #000;
}

.bg-black {
  background-color: #000;
  color           : #fff;
  padding         : 4rem 0;
}

.bg-white {
  margin: 4rem auto;
}

.bg-white02 {
  margin: 4rem auto;
}

.bg-beige {
  background-color: #AF8807;
}

.fs-34 {
  font-size: 3.4rem;
}

.fw-semibold {
  font-weight: 600;
}

.dp-flex {
  display: flex;
}

.color-white {
  color: #fff;
}

.shop-message {
  padding: 4rem 2rem;
}

.shop-message p {
  text-align : center;
  font-size  : 2rem;
  line-height: 4.6rem;
}

a:hover {
  opacity   : .7;
  transition: all 0.3s 0s ease;
}

span.br {
  display: inline-block;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

#top {
  background     : url('/uploads/im_01_pc.jpg') no-repeat;
  background-size: cover;
  height         : 100vh;
  position       : relative;
}

#top div {
  max-width: 578px;
  min-width: 300px;
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
}

#main .title {
  margin-bottom: 2rem;
  font-weight  : 600;
}

#main .fs-18 {
  font-size  : 1.8rem;
  font-weight: 600;
  line-height: 4rem;
}

#main .lp__PC-div--pos-relative {
  position: relative;
  width   : fit-content;
  height  : fit-content;
}

#main .lp__div--box-center {
  position: absolute;
  top     : 0;
  left    : 0;
  right   : 0;
  bottom  : 0;
  width   : inherit;
  height  : inherit;
  margin  : auto;
  color   : #fff;
}

#menu .dp-flex {
  align-items: center;
}

#menu .dp-flex:nth-of-type(even) .menu-img {
  order: 1;
}

#menu .dp-flex:last-of-type .menu-img {
  order: 1;
}

#menu .menu-img {
  width: 50%;
}

#menu .menu-txt {
  margin   : auto;
  font-size: 2.6rem;
}

#menu .menu-txt p {
  font-size  : 2.6rem;
  line-height: 5.2rem;
}

#menu .menu-link a {
  display    : block;
  font-size  : 2rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  border     : 1px solid #000000;
  padding    : 1.6rem;
  margin-top : 4rem;
  text-align : center;
  line-height: 1.5;
}

#footer {
  background: #000;
  color     : #fff;
  padding   : 10rem 0;
}

.footer-inner {
  max-width: 870px;
  margin   : auto;
}

.footer-img {
  max-width: 500px;
  margin   : auto;
}

.reservation {
  max-width: 400px;
  margin   : 6rem auto 8rem;
}

.reservation a {
  display    : block;
  padding    : 1.5rem;
  background : #AF8807;
  color      : #020202;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  text-align : center;
  font-size  : 20px;
}

.footer-content {
  font-family: 'Noto Sans JP', sans-serif;
  font-size  : 1.6rem;
  line-height: 1.7;
  margin     : 2rem auto;
}

.footer-deco {
  border: 1px solid #fff;
  height: 4px;
}

.footer-deco:last-of-type {
  margin-bottom: 4rem;
}

.footer-content.dp-flex {
  justify-content: space-between;
}

.footer-content p {
  text-align: left;
}

#footer iframe {
  width : 100%;
  height: 538px;
}

@media screen and (max-width:1080px) {
  .dp-flex {
    flex-direction: column;
  }

  .bg-black {
    padding: 4rem 2rem;
  }

  .bg-white {
    padding: 0 2rem;
  }

  .bg-white02 {
    padding: 0 2rem;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  #main .fs-18 {
    font-size  : 1.6rem;
    line-height: 3.2rem;
  }

  #main .lp__div--box-center {
    position  : relative;
    top       : 0;
    left      : 0;
    right     : 0;
    bottom    : 0;
    width     : 100%;
    height    : inherit;
    margin    : auto;
    padding   : 4rem 2rem;
    color     : #fff;
    background: #000000;
  }

  #main .lp__div--box-center p.color-white {
    text-align: left;
  }

  #menu .dp-flex:nth-of-type(even) .menu-img {
    order: initial;
  }

  #menu .menu-img {
    width: 100%;
  }

  #menu .menu-txt {
    margin: 4rem 2rem;
  }

  #menu .menu-txt p {
    font-size  : 1.6rem;
    line-height: 3.2rem;
  }

  .shop-message p {
    text-align : left;
    font-size  : 1.6rem;
    line-height: 3.2rem;
  }

  #footer {
    padding: 6rem 2rem 10rem;
  }

  .reservation {
    max-width: 400px;
    margin   : 4rem auto;
  }

  .footer-content p:first-of-type {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width:768px) {
  body {
    font-size: 1.6rem;
  }

  .fs-34 {
    font-size: 2.4rem;
  }

  .bg-black p:not(.title) {
    text-align: left;
  }

  .bg-white p:not(.title) {
    text-align: left;
  }

  #top {
    background-position: 80%;
  }

  #menu .menu-txt {
    font-size: 1.6rem;
  }

  #menu .menu-link a {
    font-size: 1.6rem;
  }

  #footer iframe {
    height: 345px;
  }
}