@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;
  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: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-block: var(--sz-130) var(--sz-85);
  background: #fdfbef url(../images/sp/fv/bg.webp) no-repeat top left / 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: calc(-1 * var(--sz-25));
}

.fv__inner {
}

.fv__heading {
  font-family: var(--font-rich);
  font-size: var(--sz-80);
  font-weight: 900;
  color: var(--color-key);
  text-align: center;
  margin-bottom: var(--sz-25);
}

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

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

.fv__pic1 {
  width: 100%;
  margin-bottom: var(--sz-55);
}

.fv__pic2 {
  width: 100%;
}

@media (min-width: 1200px) {
  .fv {
    padding-block: var(--sz-72) var(--sz-70);
    background-image: url(../images/pc/fv/bg.webp);
    margin-bottom: calc(-1 * var(--sz-55));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--sz-55)));
  }

  .fv__inner {
  }

  .fv__heading {
    font-size: var(--sz-94);
    margin-bottom: var(--sz-10);
  }

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

  .fv__logo {
    top: var(--sz-260);
    width: var(--sz-270);
    z-index: 3;
  }

  .fv__pic1 {
    width: clamp(calc(1013px * var(--min_w1) / var(--max_w1)), calc(1013vw * 100 / var(--max_w1)), 1013px);
    margin-inline: auto;
    margin-bottom: calc(-1 * var(--sz-5));
    position: relative;
    z-index: 2;
  }

  .fv__pic2 {
    width: clamp(calc(1156px * var(--min_w1) / var(--max_w1)), calc(1156vw * 100 / var(--max_w1)), 1156px);
    margin-inline: auto;
    position: relative;
    z-index: 1;
  }
}

/* PLAN */
.plan {
  background-color: #da7a52;
  padding-block: var(--sz-120) var(--sz-95);
  clip-path: polygon(0 var(--sz-25), 100% 0, 100% 100%, 0 calc(100% - var(--sz-40)));
  position: relative;
  overflow-x: hidden;
  margin-bottom: calc(-1 * var(--sz-40));
  background-image: url(../images/sp/plan/pinwheel.webp), url(../images/sp/plan/torch.webp);
  background-repeat: no-repeat;
  background-size: var(--sz-82), var(--sz-42);
  background-position: top var(--sz-216) left calc(50% - var(--sz-300)), top var(--sz-216) left calc(50% + var(--sz-300));
}

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

.plan__inner {
}

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

.plan__title {
  width: var(--sz-678);
  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-78) var(--sz-70);
    background-image: url(../images/pc/plan/pinwheel.webp), url(../images/pc/plan/torch.webp);
    background-size: var(--sz-71), var(--sz-36);
    background-position: top var(--sz-90) left calc(50% - var(--sz-268)), top var(--sz-90) left calc(50% + var(--sz-268));
    clip-path: polygon(0 0, 100% var(--sz-55), 100% 100%, 0 calc(100% - var(--sz-90)));
    margin-bottom: calc(-1 * var(--sz-90));
  }

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

  .plan__inner {
  }

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

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

  .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-16);
    right: unset;
  }

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

/* PLACE */
.place {
  padding-block: var(--sz-85) var(--sz-75);
  clip-path: polygon(0 0, 100% var(--sz-40), 100% 100%, 0 calc(100% - var(--sz-15)));
  position: relative;
  overflow-x: hidden;
  margin-bottom: calc(-1 * var(--sz-15));
  background-image: url(../images/sp/place/goldfish-lg.webp), url(../images/sp/place/goldfish-sm.webp), url(../images/sp/place/bg.webp);
  background-repeat: no-repeat;
  background-size: var(--sz-86), var(--sz-74), 100%;
  background-position: top var(--sz-180) left calc(50% - var(--sz-310)), top var(--sz-206) left calc(50% + var(--sz-310)), top calc(-1 * var(--sz-10)) left;
}

.place__inner {
}

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

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

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

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

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

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

.place__pic3 {
  position: relative;
  right: 0;
  width: 83.3%;
  align-self: flex-end;
  z-index: 1;
}

@media (min-width: 1200px) {
  .place {
    padding-block: var(--sz-80) var(--sz-30);
    clip-path: polygon(0 0, 100% var(--sz-90), 100% calc(100% - var(--sz-10)), 0 100%);
    margin-bottom: calc(-1 * var(--sz-10));
    background-image: url(../images/pc/place/goldfish-lg.webp), url(../images/pc/place/goldfish-sm.webp), url(../images/pc/place/bg.webp);
    background-size: var(--sz-80), var(--sz-69), 100%;
    background-position: top var(--sz-75) left calc(50% - var(--sz-310)), top var(--sz-107) left calc(50% + var(--sz-290)), center center;
  }

  .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-476);
  }

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

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

  .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: #eeb52e;
  padding-block: var(--sz-97) var(--sz-97);
  clip-path: polygon(0 0, 100% var(--sz-15), 100% 100%, 0 calc(100% - var(--sz-55)));
  position: relative;
  overflow-x: hidden;
  background-image: url(../images/sp/enjoy/star-left.webp), url(../images/sp/enjoy/star-right.webp);
  background-repeat: no-repeat;
  background-size: var(--sz-115), var(--sz-125);
  background-position: top var(--sz-82) left calc(50% - var(--sz-308)), top var(--sz-67) left calc(50% + var(--sz-305));
  margin-bottom: calc(-1 * var(--sz-55));
}

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

.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-28);
}

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

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

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

.enjoy__pic3 {
  position: relative;
  left: 0;
  width: 84.8%;
  align-self: self-start;
  z-index: 3;
}

@media (min-width: 1200px) {
  .enjoy {
    padding-block: var(--sz-97) var(--sz-70);
    position: relative;
    overflow-x: hidden;
    background-image: url(../images/pc/enjoy/star-left.webp), url(../images/pc/enjoy/star-right.webp);
    background-size: var(--sz-89), var(--sz-96);
    background-position: top var(--sz-93) left calc(50% - var(--sz-250)), top var(--sz-85) left calc(50% + var(--sz-240));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--sz-30)));
    margin-bottom: calc(-1 * var(--sz-30));
  }

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

  .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-18);
  }

  .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-150) var(--sz-100);
  overflow-x: hidden;
  background-image: url(../images/sp/menu/flag-left.webp), url(../images/sp/menu/flag-right.webp), url(../images/sp/menu/bg.webp);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-size: var(--sz-266), var(--sz-266), 100%;
  background-position: top var(--sz-55) left calc(50% - var(--sz-308)), top var(--sz-55) 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-95);
  text-align: right;
  font-size: var(--sz-38);
}

.menu__special {
  background: url(../images/sp/menu/frame.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.webp), url(../images/pc/menu/flag-right.webp), url(../images/pc/menu/bg.webp);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: var(--sz-266), var(--sz-266), var(--sz-338);
    background-position: top var(--sz-60) left calc(50% - var(--sz-326)), top var(--sz-60) 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;
  }

  :where(#bbq_menu4).menu__item .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-16);
    margin-bottom: 0;
    font-size: var(--sz-22);
  }

  .menu__special {
    background-image: url(../images/pc/menu/frame.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: #76b7a9;
  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;
  margin-bottom: var(--sz-15);
}

.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;
    margin-bottom: 0;
  }

  .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.webp), url(../images/sp/reserve/frame-bottom.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.webp), url(../images/pc/reserve/frame-bottom.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-secondary);
  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;
  }
}

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

.winter__inner {
}

.winter__row {
}

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

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

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

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

.winter__menu {
  text-align: center;
}

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

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

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

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

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

  .winter__inner {
  }

  .winter__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;
  }

  .winter__heading {
    font-size: var(--sz-58);
    text-align: left;
    margin-bottom: var(--sz-24);
    white-space: nowrap;
  }

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

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

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

  .winter__menu {
    text-align: left;
  }

  .winter__title {
    font-size: var(--sz-28);
    margin-bottom: 0;
  }

  .winter__desc {
    font-size: var(--sz-22);
    margin-bottom: var(--sz-5);
    white-space: nowrap;
  }

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

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

/* ACCESS */
.access {
  padding-block: var(--sz-90) var(--sz-95);
  background: url(../images/sp/access/bg.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-secondary);
  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.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;
  }
}