@charset "utf-8";

/* ==========================================
 Common
============================================*/
:root {
  --font-rich: "mokoko", serif;
  --mb-p: 1em;
  --color-key: #867040;
  --color-primary: #8e3924;
  --color-secondary: #a18f60;
  --min_w1: 375;
  --max_w1: 750;
  @media (min-width: 1200px) {
    --min_w1: 1200;
    --max_w1: 1920;
  }
}

body {
  font-size: var(--sz-30);
  line-height: 1.4;
  box-shadow: 0 3px 5px 3px #d9e5ed;
  max-width: 750px;
  margin-inline: auto;

  @media (min-width: 1200px) {
    max-width: 1920px;
  }
}

a,
a:hover {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

/* ==========================================
 Utility
============================================*/

/* shadow */
.text-shadow {
  text-shadow: 1px 1px 0 var(--bs-white), 1px -1px 0 var(--bs-white), -1px 1px 0 var(--bs-white), -1px -1px 0 var(--bs-white);
}

/* button */
.btn-type1 {
  color: var(--bs-white);
  background-color: var(--color-text);
  font-size: var(--sz-52);
  padding: 0.85em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  transition: 0.3s;
}

.btn-type1::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  transition: 0.3s;
}

.btn-type1:hover {
  outline: var(--sz-4) solid var(--bs-white);
  outline-offset: calc(-1 * var(--sz-8));
  color: var(--bs-white);
}

.btn-type1:hover::after {
  transform: translateX(10%);
}

.btn-type2 {
  color: #50331a;
  background-color: #ebddbe;
  font-size: var(--sz-52);
  padding: 0.85em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  transition: 0.3s;
}

.btn-type2::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  transition: 0.3s;
}

.btn-type2:hover {
  outline: var(--sz-4) solid var(--bs-white);
  outline-offset: calc(-1 * var(--sz-8));
  color: #50331a;
}

.btn-type2:hover::after {
  transform: translateX(10%);
}

@media (min-width: 1200px) {
  .btn-type1 {
    width: var(--sz-480);
    margin-inline: auto;
    font-size: var(--sz-32);
    padding: 0.8em;
    gap: 1em;
  }

  .btn-type1::after {
  }

  .btn-type1:hover {
  }

  .btn-type2 {
    width: var(--sz-480);
    margin-inline: auto;
    font-size: var(--sz-32);
    padding: 0.8em;
    gap: 1em;
  }

  .btn-type2::after {
  }

  .btn-type2:hover {
  }
}

/* ==========================================
 Drawer
============================================*/
.drawer-hamburger {
  background-color: var(--color-primary);
  width: var(--sz-120);
  height: var(--sz-120);
  box-sizing: border-box;
  padding: unset;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon::after,
.drawer-hamburger-icon::before {
  background-color: #fefaee;
  height: var(--sz-4);
}

.drawer-hamburger-icon {
  margin-top: unset;
  width: 54%;
}

.drawer-hamburger-icon::before {
  top: calc(-1 * var(--sz-20));
}

.drawer-hamburger-icon::after {
  top: var(--sz-20);
}

.drawer-hamburger:hover {
  background-color: var(--color-primary);
}

.drawer-nav {
  background-color: #fefaee;
  padding: var(--sz-150) var(--sz-30);
}

.drawer-caption {
  font-size: var(--sz-30);
  text-align: center;
  margin-bottom: 0.5em;
  margin-bottom: 0.8em;
  display: block;
  color: inherit;
  text-decoration: none;
}

.drawer-caption:first-child {
  font-size: var(--sz-40);
}

:where(.drawer-nav) > a {
  margin-bottom: var(--sz-20);
}

:where(.drawer-nav) > a:nth-last-child(2) {
  margin-top: var(--sz-80);
}

@media (min-width: 1200px) {
  .drawer-hamburger {
    width: var(--sz-100);
    height: var(--sz-100);
  }
  .drawer--top .drawer-hamburger,
  .drawer--top.drawer-open .drawer-hamburger {
    top: var(--sz-32);
    right: calc((100% - 1300px) / 2);
  }

  .drawer-hamburger-icon,
  .drawer-hamburger-icon::after,
  .drawer-hamburger-icon::before {
  }

  .drawer-hamburger-icon {
  }

  .drawer-hamburger-icon::before {
  }

  .drawer-hamburger-icon::after {
  }

  .drawer-hamburger:hover {
  }

  .drawer-nav {
    padding-block: var(--sz-113) var(--sz-97);
  }

  .drawer--top .drawer-nav {
    max-width: 1300px;
    left: 50%;
    transform: translateX(-50%);
  }

  .drawer-caption {
    font-size: var(--sz-26);
    letter-spacing: 0.1em;
  }

  .drawer-caption:first-child {
    font-size: var(--sz-46);
  }

  :where(.drawer-nav) > a:nth-last-child(2) {
    margin-top: var(--sz-95);
    margin-bottom: var(--sz-18);
  }
}

/* ==========================================
 Contents
============================================*/

/* FV */
.fv {
  padding-top: var(--sz-70);
  background: url(../images/sp/fv/bg.jpg.webp) no-repeat top left / cover;
  aspect-ratio: 250 / 441;
  position: relative;
  overflow: hidden;
  margin-bottom: calc(-1 * var(--sz-37));
}

.fv__inner {
}

.fv__heading {
  font-family: var(--font-rich);
  font-size: var(--sz-66);
  font-weight: 900;
  color: #7b632d;
  text-align: center;
}

.fv__heading > span {
  font-size: var(--sz-52);
}

.fv__logo {
  position: absolute;
  top: var(--sz-335);
  left: 50%;
  transform: translateX(-50%);
  width: 41.86%;
  z-index: 1;
}

.fv__pic1 {
  position: absolute;
  top: var(--sz-328);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.fv__pic2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

@media (min-width: 1200px) {
  .fv {
    padding-top: var(--sz-15);
    background-image: url(../images/pc/fv/bg.jpg.webp);
    aspect-ratio: 1920 / 811;
    margin-bottom: 0;
  }

  .fv__inner {
  }

  .fv__heading {
    font-size: var(--sz-65);
  }

  .fv__heading > span {
    font-size: var(--sz-48);
  }

  .fv__logo {
    top: var(--sz-187);
    width: var(--sz-305);
  }

  .fv__pic1 {
    top: var(--sz-178);
    width: clamp(calc(1013px * var(--min_w1) / var(--max_w1)), calc(1013vw * 100 / var(--max_w1)), 1013px);
  }

  .fv__pic2 {
    bottom: var(--sz-58);
    width: clamp(calc(1156px * var(--min_w1) / var(--max_w1)), calc(1156vw * 100 / var(--max_w1)), 1156px);
  }
}

/* PLAN */
.plan {
  background-color: var(--color-primary);
  padding-block: var(--sz-110) var(--sz-115);
  clip-path: polygon(0 0, 100% var(--sz-37), 100% 100%, 0 100%);
  position: relative;
  overflow-x: hidden;
  margin-bottom: calc(-1 * var(--sz-68));
  background-image: url(../images/sp/plan/mantle.png.webp), url(../images/sp/plan/mantle.png.webp);
  background-repeat: no-repeat;
  background-size: var(--sz-53);
  background-position: top var(--sz-95) left calc(50% - var(--sz-324)), top var(--sz-95) left calc(50% + var(--sz-324));
}

.plan::before {
  content: "";
  background-color: #ab3525;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% var(--sz-37), 100% var(--sz-78));
}

.plan__inner {
}

.plan__heading {
  margin-bottom: var(--sz-35);
}

.plan__title {
  width: var(--sz-486);
  margin-inline: auto;
}

.plan__lead {
  color: var(--bs-white);
  font-size: var(--sz-50);
  text-align: center;
  margin-bottom: var(--sz-32);
}

.plan__row {
  display: flex;
  flex-direction: column;
}

.plan__pic1 {
  position: relative;
  left: var(--sz-16);
  width: 82.6%;
  align-self: self-start;
  margin-bottom: calc(-1 * var(--sz-75));
  z-index: 3;
}

.plan__pic2 {
  position: relative;
  right: 0;
  width: 81.6%;
  align-self: flex-end;
  margin-bottom: calc(-1 * var(--sz-40));
  z-index: 2;
}

.plan__pic3 {
  position: relative;
  left: var(--sz-18);
  width: 82.9%;
  align-self: self-start;
  z-index: 1;
}

@media (min-width: 1200px) {
  .plan {
    padding-block: var(--sz-66) var(--sz-48);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--sz-50)));
    margin-bottom: calc(-1 * var(--sz-51));
    background-image: url(../images/pc/plan/mantle.png.webp), url(../images/pc/plan/mantle.png.webp);
    background-size: var(--sz-46);
    background-position: top var(--sz-66) left calc(50% - var(--sz-268)), top var(--sz-66) left calc(50% + var(--sz-268));
  }

  .plan::before {
    clip-path: polygon(0 0, 100% 0, 100% var(--sz-70));
  }

  .plan__inner {
  }

  .plan__heading {
    margin-bottom: var(--sz-35);
  }

  .plan__title {
    width: var(--sz-317);
  }

  .plan__lead {
    font-size: var(--sz-38);
    margin-bottom: var(--sz-5);
  }

  .plan__row {
    flex-direction: row;
    justify-content: center;
    gap: var(--sz-24);
  }

  .plan__pic1 {
    width: var(--sz-294);
    align-self: unset;
    margin-bottom: unset;
    left: unset;
  }

  .plan__pic2 {
    width: var(--sz-290);
    align-self: unset;
    margin-bottom: unset;
    top: var(--sz-20);
    right: unset;
  }

  .plan__pic3 {
    width: var(--sz-298);
    align-self: unset;
    margin-bottom: unset;
    top: var(--sz-8);
    left: unset;
  }
}

/* PLACE */
.place {
  background-color: #434e2d;
  padding-block: var(--sz-160) var(--sz-105);
  clip-path: polygon(0 0, 100% var(--sz-68), 100% 100%, 0 100%);
  position: relative;
  overflow-x: hidden;
  margin-bottom: calc(-1 * var(--sz-32));
  background-image: url(../images/sp/place/pigeon.png.webp), url(../images/sp/place/feather.png.webp);
  background-repeat: no-repeat;
  background-size: var(--sz-103), var(--sz-95);
  background-position: top var(--sz-172) left calc(50% - var(--sz-297)), top var(--sz-158) left calc(50% + var(--sz-294));
}

.place::before {
  content: "";
  background-color: #566b57;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% var(--sz-68), 0% var(--sz-106));
}

.place__inner {
}

.place__heading {
  margin-bottom: var(--sz-35);
}

.place__title {
  width: var(--sz-411);
  margin-inline: auto;
}

.place p {
  color: var(--bs-white);
  text-align: center;
  font-size: var(--sz-32);
  margin-bottom: var(--sz-20);
}

.place__row {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sz-15);
}

.place__pic1 {
  position: relative;
  right: var(--sz-12);
  width: 84.4%;
  align-self: flex-end;
  margin-bottom: calc(-1 * var(--sz-100));
  z-index: 1;
}

.place__pic2 {
  position: relative;
  left: calc(-1 * var(--sz-16));
  width: 83.7%;
  align-self: self-start;
  margin-bottom: calc(-1 * var(--sz-60));
  z-index: 2;
}

.place__pic3 {
  position: relative;
  right: var(--sz-32);
  width: 83.3%;
  align-self: flex-end;
  z-index: 3;
}

@media (min-width: 1200px) {
  .place {
    padding-block: var(--sz-80) var(--sz-45);
    clip-path: polygon(0 0, 100% var(--sz-50), 100% calc(100% - var(--sz-35)), 0 100%);
    margin-bottom: calc(-1 * var(--sz-36));
    background-image: url(../images/pc/place/pigeon.png.webp), url(../images/pc/place/feather.png.webp);
    background-size: var(--sz-91), var(--sz-114);
    background-position: top var(--sz-84) left calc(50% - var(--sz-247)), top var(--sz-92) left calc(50% + var(--sz-257));
  }

  .place::before {
    clip-path: polygon(0 0, 100% var(--sz-50), 0% var(--sz-97));
  }

  .place__inner {
  }

  .place__heading {
    margin-bottom: var(--sz-31);
  }

  .place__title {
    width: var(--sz-269);
  }

  .place p {
    font-size: var(--sz-22);
    margin-bottom: var(--sz-18);
  }

  .place__row {
    flex-direction: row;
    justify-content: center;
    gap: var(--sz-16);
  }

  .place__pic1 {
    width: var(--sz-294);
    align-self: unset;
    margin-bottom: unset;
    right: unset;
  }

  .place__pic2 {
    width: var(--sz-293);
    align-self: unset;
    margin-bottom: unset;
    top: var(--sz-4);
    left: unset;
  }

  .place__pic3 {
    width: var(--sz-300);
    align-self: unset;
    top: var(--sz-2);
    right: unset;
  }
}

/* ENJOY */
.enjoy {
  background-color: #85485b;
  padding-block: var(--sz-113) var(--sz-105);
  clip-path: polygon(0 var(--sz-32), 100% 0, 100% 100%, 0 100%);
  position: relative;
  overflow-x: hidden;
  background-image: url(../images/sp/enjoy/note.png.webp), url(../images/sp/enjoy/trumpet.png.webp);
  background-repeat: no-repeat;
  background-size: var(--sz-62), var(--sz-109);
  background-position: top var(--sz-122) left calc(50% - var(--sz-308)), top var(--sz-128) left calc(50% + var(--sz-305));
}

.enjoy::before {
  content: "";
  background-color: #8d5c6b;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 var(--sz-32), 100% 0, 100% var(--sz-84));
}

.enjoy__inner {
}

.enjoy__heading {
  margin-bottom: var(--sz-32);
}

.enjoy__title {
  width: var(--sz-464);
  margin-inline: auto;
}

.enjoy p {
  color: var(--bs-white);
  text-align: center;
  font-size: var(--sz-36);
  margin-bottom: var(--sz-20);
}

.enjoy__row {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sz-32);
}

.enjoy__pic1 {
  position: relative;
  left: var(--sz-16);
  width: 85%;
  align-self: self-start;
  margin-bottom: calc(-1 * var(--sz-44));
  z-index: 3;
}

.enjoy__pic2 {
  position: relative;
  right: var(--sz-2);
  width: 87.4%;
  align-self: flex-end;
  margin-bottom: calc(-1 * var(--sz-48));
  z-index: 2;
}

.enjoy__pic3 {
  position: relative;
  left: var(--sz-4);
  width: 84.8%;
  align-self: self-start;
  z-index: 1;
}

@media (min-width: 1200px) {
  .enjoy {
    padding-block: var(--sz-50) var(--sz-70);
    clip-path: polygon(0 var(--sz-35), 100% 0, 100% 100%, 0 calc(100% - var(--sz-30)));
    margin-bottom: calc(-1 * var(--sz-30));
    position: relative;
    overflow-x: hidden;
    background-image: url(../images/pc/enjoy/note.png.webp), url(../images/pc/enjoy/trumpet.png.webp);
    background-size: var(--sz-68), var(--sz-174);
    background-position: top var(--sz-130) left calc(50% - var(--sz-280)), top var(--sz-135) left calc(50% + var(--sz-328));
  }

  .enjoy::before {
    clip-path: polygon(0 var(--sz-35), 100% 0, 100% var(--sz-65));
  }

  .enjoy__inner {
  }

  .enjoy__heading {
    margin-bottom: var(--sz-32);
  }

  .enjoy__title {
    width: var(--sz-303);
  }

  .enjoy p {
    font-size: var(--sz-22);
    margin-bottom: var(--sz-25);
  }

  .enjoy__row {
    flex-direction: row;
    justify-content: center;
    gap: var(--sz-2);
    margin-bottom: var(--sz-2);
  }

  .enjoy__pic1 {
    width: var(--sz-312);
    align-self: unset;
    margin-bottom: unset;
    top: var(--sz-9);
    left: unset;
  }

  .enjoy__pic2 {
    width: var(--sz-311);
    align-self: unset;
    margin-bottom: unset;
    right: unset;
  }

  .enjoy__pic3 {
    width: var(--sz-300);
    align-self: unset;
    margin-bottom: unset;
    top: var(--sz-25);
    left: unset;
  }
}

/* MENU */
.menu {
  padding-block: var(--sz-95) var(--sz-100);
  overflow-x: hidden;
  background-image: url(../images/sp/menu/flag-left.png.webp), url(../images/sp/menu/flag-right.png.webp), url(../images/sp/menu/bg.jpg.webp);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-size: var(--sz-206), var(--sz-211), 100%;
  background-position: top 0 left calc(50% - var(--sz-308)), top 0 left calc(50% + var(--sz-305)), top left;
}

.menu__inner {
  padding-inline: var(--sz-30);
}

.menu__heading {
  font-family: var(--font-rich);
  font-weight: 900;
  font-size: var(--sz-88);
  color: var(--color-key);
  text-align: center;
  margin-bottom: var(--sz-32);
  line-height: 1;
}

.menu__lead {
  font-family: var(--font-rich);
  font-size: var(--sz-48);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
}

.menu__sublead {
  font-family: var(--font-rich);
  font-size: var(--sz-36);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--sz-57);
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-57);
  margin-bottom: var(--sz-57);
}

.menu__item {
  overflow-x: hidden;
}

.menu__row {
  background-color: #f6f2ea;
  border: var(--sz-4) solid;
  padding: var(--sz-57) var(--sz-75) var(--sz-66);
  position: relative;
}

.menu__title {
  color: var(--color-primary);
  font-size: var(--sz-44);
  font-weight: 400;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: var(--sz-10);
}
.menu__pic {
  margin-bottom: var(--sz-20);
  width: fit-content;
  margin-inline: auto;
}

.menu__tag {
  font-size: var(--sz-30);
  background-color: #decdc4;
  width: fit-content;
  padding: 0.2em 0.5em 0.1em;
  margin-bottom: var(--sz-20);
}

.menu__price {
  font-size: var(--sz-40);
  line-height: 1;
  text-align: center;
  margin-bottom: var(--sz-15);
}

.menu__price > span {
  font-size: var(--sz-60);
}

.menu__desc {
  font-size: var(--sz-30);
  margin-bottom: var(--sz-20);
}

.menu__item .btn-type1 {
  font-size: var(--sz-38);
  margin-inline: calc(-1 * var(--sz-30));
  position: relative;
}

.menu__row::before {
  content: "";
  position: absolute;
  top: var(--sz-8);
  left: var(--sz-8);
  width: calc(100% - var(--sz-16));
  height: calc(100% - var(--sz-16));
  border: 1px solid;
}

.menu__note {
  margin-top: var(--sz-32);
  text-align: right;
  font-size: var(--sz-38);
}

.menu__special {
  background: url(../images/sp/menu/frame.png.webp);
  aspect-ratio: 693/ 439;
  background-size: 100% 100%;
  padding-block: var(--sz-50);
  margin-bottom: var(--sz-35);
}

.menu__special .menu__title {
  font-size: var(--sz-44);
  text-align: center;
  margin-bottom: var(--sz-5);
}

.menu__special .menu__desc {
  font-size: var(--sz-30);
  font-weight: 400;
  text-align: center;
  margin-bottom: var(--sz-10);
}

@media (min-width: 1200px) {
  .menu {
    padding-block: var(--sz-90) var(--sz-58);
    overflow-x: hidden;
    background-image: url(../images/pc/menu/flag-left.png.webp), url(../images/pc/menu/flag-right.png.webp), url(../images/pc/menu/bg.jpg.webp);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: var(--sz-266), var(--sz-266), var(--sz-338);
    background-position: top var(--sz-65) left calc(50% - var(--sz-326)), top var(--sz-65) left calc(50% + var(--sz-326)), top left;
  }

  .menu__inner {
    padding-inline: unset;
  }

  .menu__heading {
    font-size: var(--sz-80);
    margin-bottom: var(--sz-30);
  }

  .menu__lead {
    font-size: var(--sz-28);
  }

  .menu__sublead {
    font-size: var(--sz-22);
    margin-bottom: var(--sz-25);
  }

  .menu__list {
    width: clamp(calc(930px * var(--min_w1) / var(--max_w1)), calc(930vw * 100 / var(--max_w1)), 930px);
    margin-inline: auto;
    gap: var(--sz-40);
    margin-bottom: var(--sz-35);
  }

  .menu__item {
  }

  .menu__row {
    padding: var(--sz-40) var(--sz-8) var(--sz-36);
    display: grid;
    grid-template-areas:
      "pic title price"
      "pic tag tag"
      "pic desc desc"
      "pic btn btn";
    grid-template-columns: var(--sz-380) 1fr var(--sz-213);
    align-items: flex-start;
  }

  .menu__item:last-child .menu__row {
    grid-template-areas:
      "pic title"
      "pic tag"
      "pic price"
      "pic btn";
    grid-template-columns: var(--sz-380) 1fr;
    grid-template-rows: auto auto auto 1fr;
  }

  .menu__title {
    grid-area: title;
    font-size: var(--sz-26);
    margin-bottom: var(--sz-5);
    margin-inline: unset;
  }
  .menu__pic {
    grid-area: pic;
    margin-bottom: unset;
    width: var(--sz-275);
  }

  .menu__tag {
    grid-area: tag;
    font-size: var(--sz-20);
    margin-bottom: var(--sz-10);
  }

  .menu__price {
    grid-area: price;
    font-size: var(--sz-22);
    margin-bottom: var(--sz-14);
    align-self: center;
    text-align: left;
  }

  .menu__price > span {
    font-size: var(--sz-30);
  }

  .menu__desc {
    grid-area: desc;
    font-size: var(--sz-20);
    margin-bottom: var(--sz-14);
  }

  .menu__item .btn-type1 {
    grid-area: btn;
    font-size: var(--sz-24);
    margin-inline: auto;
    width: var(--sz-300);
  }

  .menu__row::before {
  }

  .menu__note {
    margin-top: var(--sz-12);
    font-size: var(--sz-22);
  }

  .menu__special {
    background-image: url(../images/pc/menu/frame.png.webp);
    aspect-ratio: 807 / 263;
    width: clamp(calc(807px * var(--min_w1) / var(--max_w1)), calc(807vw * 100 / var(--max_w1)), 807px);
    margin-inline: auto;
    padding-block: var(--sz-35);
    margin-bottom: var(--sz-57);
  }

  .menu__special .menu__title {
    font-size: var(--sz-30);
    margin-bottom: var(--sz-10);
    margin-inline: auto;
  }

  .menu__special .menu__desc {
    font-size: var(--sz-22);
    margin-bottom: var(--sz-10);
  }

  .menu__special .menu__desc:last-child {
    font-size: var(--sz-20);
  }
}

/* STORE */
.store {
  background-color: var(--color-primary);
  padding-block: var(--sz-95) var(--sz-90);
}

.store__inner {
}

.store__heading {
  font-family: var(--font-rich);
  font-weight: 900;
  font-size: var(--sz-80);
  color: var(--color-key);
  text-align: center;
  margin-bottom: var(--sz-57);
  line-height: 1;
}

.store__pic1 {
  margin-bottom: var(--sz-28);
}

.store__row {
  display: flex;
  flex-direction: column;
}

.store__row p {
  font-size: var(--sz-40);
  text-align: center;
  color: #fefaee;
}

.store__pic2 {
}

.store__pic3 {
}

@media (min-width: 1200px) {
  .store {
    padding-block: var(--sz-55) var(--sz-40);
  }

  .store__inner {
  }

  .store__heading {
    font-size: var(--sz-80);
    margin-bottom: var(--sz-35);
  }

  .store__pic1 {
    margin-bottom: var(--sz-32);
    width: clamp(calc(928px * var(--min_w1) / var(--max_w1)), calc(928vw * 100 / var(--max_w1)), 928px);
    margin-inline: auto;
  }

  .store__row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: clamp(calc(935px * var(--min_w1) / var(--max_w1)), calc(935vw * 100 / var(--max_w1)), 935px);
    margin-inline: auto;
  }

  .store__row p {
    font-size: var(--sz-26);
    letter-spacing: 0.1em;
  }

  .store__pic2 {
    width: var(--sz-271);
  }

  .store__pic3 {
    width: var(--sz-271);
  }
}

/* RESERVE */
.reserve {
  background-color: #fefaee;
}

.reserve__inner {
}

.reserve__box {
  background-image: url(../images/sp/reserve/frame-upper.png.webp), url(../images/sp/reserve/frame-bottom.png.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top var(--sz-92) left 50%, bottom var(--sz-92) left 50%;
  padding-inline: var(--sz-50);
  padding-block: var(--sz-205) var(--sz-218);
}

.reserve__heading {
  font-family: var(--font-rich);
  font-weight: 900;
  font-size: var(--sz-88);
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: var(--sz-52);
  line-height: 1;
}

.reserve p {
  font-size: var(--sz-38);
  text-align: center;
  margin-bottom: var(--sz-32);
}

.reserve .btn-type1 {
  margin-bottom: var(--sz-74);
}

@media (min-width: 1200px) {
  .reserve {
  }

  .reserve__inner {
  }

  .reserve__box {
    background-image: url(../images/pc/reserve/frame-upper.png.webp), url(../images/pc/reserve/frame-bottom.png.webp);
    background-position: top var(--sz-52) left 50%, bottom var(--sz-58) left 50%;
    padding-inline: var(--sz-50);
    padding-block: var(--sz-150) var(--sz-156);
    width: clamp(calc(737px * var(--min_w1) / var(--max_w1)), calc(737vw * 100 / var(--max_w1)), 737px);
    margin-inline: auto;
  }

  .reserve__heading {
    font-size: var(--sz-80);
    margin-bottom: var(--sz-65);
  }

  .reserve p {
    font-size: var(--sz-26);
    margin-bottom: var(--sz-12);
  }

  .reserve .btn-type1 {
    margin-bottom: var(--sz-55);
  }
}

/* VOICE */
.voice {
  background-image: repeating-linear-gradient(90deg, #efe4cc, #efe4cc 1px, transparent 1px, transparent var(--sz-30)), repeating-linear-gradient(0deg, #efe4cc, #efe4cc 1px, #fff 1px, #fff var(--sz-30));
  padding-block: var(--sz-100) var(--sz-95);
}

.voice__inner {
  padding-inline: var(--sz-35);
}

.voice__heading {
  font-family: var(--font-rich);
  font-weight: 900;
  font-size: var(--sz-88);
  color: var(--color-key);
  text-align: center;
  margin-bottom: var(--sz-55);
  line-height: 1;
}

@media (min-width: 1200px) {
  .voice {
    padding-block: var(--sz-75) var(--sz-80);
  }

  .voice__inner {
    padding-inline: unset;
  }

  .voice__heading {
    font-size: var(--sz-80);
    margin-bottom: var(--sz-35);
  }

  .voice__pic1 {
    width: clamp(calc(813px * var(--min_w1) / var(--max_w1)), calc(813vw * 100 / var(--max_w1)), 813px);
    margin-inline: auto;
  }
}

/* BBQ */
.bbq {
  background-color: #fefaee;
  padding-block: var(--sz-85);
}

.bbq__inner {
}

.bbq__row {
}

.bbq__heading {
  font-family: var(--font-rich);
  font-weight: 900;
  font-size: var(--sz-88);
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: var(--sz-32);
  line-height: 1;
}

.bbq__heading > span {
  font-size: var(--sz-54);
  display: block;
  font-weight: 400;
  margin-bottom: var(--sz-5);
}

.bbq__heading > span > span {
  font-size: var(--sz-40);
}

.bbq__pic1 {
  width: 88%;
  margin-inline: auto;
  margin-bottom: var(--sz-32);
}

.bbq__menu {
  text-align: center;
}

.bbq__title {
  font-size: var(--sz-44);
  color: var(--color-primary);
  line-height: 1.3;
  margin-bottom: var(--sz-5);
}

.bbq__desc {
  font-size: var(--sz-30);
  margin-bottom: var(--sz-30);
}

.bbq__price {
  font-size: var(--sz-40);
  line-height: 1;
}

.bbq__price > span {
  font-size: var(--sz-60);
}

@media (min-width: 1200px) {
  .bbq {
    padding-block: unset;
  }

  .bbq__inner {
  }

  .bbq__row {
    width: clamp(calc(1070px * var(--min_w1) / var(--max_w1)), calc(1070vw * 100 / var(--max_w1)), 1070px);
    margin-inline: auto;
    padding-left: clamp(calc(570px * var(--min_w1) / var(--max_w1)), calc(570vw * 100 / var(--max_w1)), 570px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 1070 / 389;
  }

  .bbq__heading {
    font-size: var(--sz-61);
    text-align: left;
    margin-bottom: var(--sz-28);
  }

  .bbq__heading > span {
    font-size: var(--sz-38);
  }

  .bbq__heading > span > span {
    font-size: var(--sz-30);
  }

  .bbq__pic1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 48.5%;
    margin: unset;
    aspect-ratio: 519 / 389;
  }

  .bbq__menu {
    text-align: left;
  }

  .bbq__title {
    font-size: var(--sz-28);
  }

  .bbq__desc {
    font-size: var(--sz-22);
    margin-bottom: var(--sz-10);
  }

  .bbq__price {
    font-size: var(--sz-22);
  }

  .bbq__price > span {
    font-size: var(--sz-30);
  }
}

/* ACCESS */
.access {
  padding-block: var(--sz-90) var(--sz-95);
  background: url(../images/sp/access/bg.jpg.webp) no-repeat top center / cover;
  position: relative;
  overflow: hidden;
}

.access__inner {
  padding-inline: var(--sz-30);
}

.access__heading {
  font-family: var(--font-rich);
  font-weight: 900;
  font-size: var(--sz-88);
  color: var(--color-key);
  text-align: center;
  margin-bottom: var(--sz-50);
  line-height: 1;
}

.access__row {
  display: flex;
  flex-direction: column;
  gap: var(--sz-58);
  margin-bottom: var(--sz-50);
}

.access__map {
}

.access__map > .ratio {
  --bs-aspect-ratio: 60.1%;
}

.access__info {
  background-color: #ab3525;
  position: relative;
  padding: var(--sz-15) var(--sz-30) var(--sz-30) var(--sz-45);
  z-index: 0;
}

.access__info::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(-1 * var(--sz-15));
  left: var(--sz-15);
  background-color: #f6f2ea;
  width: calc(100% - var(--sz-15));
  height: 100%;
  z-index: -1;
}

.access__table {
}

.access__table th,
.access__table td {
  display: block;
  font-size: var(--sz-30);
}

.access__table th {
  font-weight: 400;
  white-space: nowrap;
}

.access__table td {
  padding-left: 1em;
  margin-bottom: 1em;
}

@media (min-width: 1200px) {
  .access {
    padding-block: var(--sz-62) var(--sz-57);
    background-image: url(../images/pc/access/bg.jpg.webp);
  }

  .access__inner {
    padding-inline: unset;
    width: clamp(calc(1070px * var(--min_w1) / var(--max_w1)), calc(1070vw * 100 / var(--max_w1)), 1070px);
    margin-inline: auto;
  }

  .access__heading {
    font-size: var(--sz-80);
    margin-bottom: var(--sz-40);
  }

  .access__row {
    flex-direction: row;
    justify-content: center;
    gap: var(--sz-25);
    margin-bottom: var(--sz-40);
  }

  .access__map {
    flex: 1;
  }

  .access__map > .ratio {
  }

  .access__info {
    padding: var(--sz-25) var(--sz-20) var(--sz-30) var(--sz-38);
    flex: 1;
    margin-top: var(--sz-10);
  }

  .access__info::before {
    top: calc(-1 * var(--sz-10));
    left: var(--sz-10);
    width: calc(100% - var(--sz-10));
  }

  .access__table {
  }

  .access__table th,
  .access__table td {
    font-size: var(--sz-22);
    display: table-cell;
    vertical-align: top;
  }

  .access__table th {
  }

  .access__table td {
    padding-left: 1em;
    margin-bottom: unset;
    padding-bottom: var(--sz-14);
  }
}

/* ==========================================
 Footer
============================================*/
.footer {
  padding: var(--sz-53) var(--sz-30) var(--sz-73);
}

.footer__social {
  margin-bottom: var(--sz-32);
}

.footer__social > a {
  color: #f6f2ea;
  font-size: var(--sz-74);
  line-height: 1;
}

.footer__copy {
  color: #f6f2ea;
  font-size: var(--sz-26);
  font-weight: 400;
}

@media (min-width: 1200px) {
  .footer {
    padding-block: var(--sz-75);
  }

  .footer__social {
    margin-bottom: var(--sz-32);
  }

  .footer__social > a {
    font-size: var(--sz-50);
  }

  .footer__copy {
    font-size: var(--sz-16);
  }
}

/* ==========================================
 PageTop
============================================*/
.pagetop {
  bottom: 20vw;
  @media (min-width: 750px) {
    font-size: 74%;
  }
  @media (min-width: 992px) {
    bottom: 5%;
  }
}

/* ==========================================
 Follow
============================================*/
.follow {
  background-color: #51331b;
  padding: var(--sz-20);
}

.follow__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sz-20);
}

.follow__buttons > a {
  background-color: #ecddbe;
  background-repeat: no-repeat;
  background-size: var(--sz-40);
  background-position: center left var(--sz-20);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--sz-30);
  line-height: 1;
  padding: 0.5em 1em;
  width: 100%;
  text-align: center;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sz-25);
}

.follow__buttons > a:hover {
  background-color: #fff;
  outline: var(--sz-4) solid #51331b;
  outline-offset: calc(-1 * var(--sz-8));
}

.follow__buttons > a > picture {
  width: var(--sz-43);
}

@media (min-width: 1200px) {
  .follow {
    max-width: 930px;
    width: clamp(calc(930px * var(--min_w1) / var(--max_w1)), calc(930vw * 100 / var(--max_w1)), 930px);
    padding: var(--sz-22);
  }

  .follow__buttons {
    gap: var(--sz-28);
  }

  .follow__buttons > a {
    background-size: var(--sz-43);
    background-position: center left var(--sz-59);
    font-size: var(--sz-30);
    padding: 0.8em 1em;
  }
}