@charset "utf-8";

:root {
  --bg-color: #DA8899;
  --black: #0C000A;
  --white: #FFFFFB;
  --box-color: #CA5069;
  --border-color: #B50C6C;
  --button-color: #89006E;
  --font: "Mochiy Pop One", sans-serif;
  --shadow: rgba(0, 0, 0, 0.3);
}

main {
  position: relative;
  overflow: hidden;
  font-size: 17px;
}

.svg {
  position: absolute;
  z-index: -10;
  width: 100%;
  fill: #57004B;
}

.ue {
  top: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.shita {
  bottom: 0;
  filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.8));
}

.shita svg {
  vertical-align: bottom;
}
main h1 {
  padding: 80px 0 60px;
}
main article {
  width: 1080px;
  max-width: 93%;
  margin: 0 auto;
}

h2 {
  position: relative;
  font-family: var(--font);
  font-weight: normal;
  font-size: 30px;
  width: 300px;
  padding: 30px 0;
  margin: 0 auto;
  text-align: center;
  color: #7AA635;
  text-shadow: 2px 3px 0 #57004B;
  background-color: #B50C6C;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3);
  border-radius: 18px;
  --top: 11px;
  --left: 11px;
}

h2 span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #57004B;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

h2 span:nth-child(1) {
  top: var(--top);
  left: var(--left);
}

h2 span:nth-child(2) {
  bottom: var(--top);
  left: var(--left);
}

h2 span:nth-child(3) {
  top: var(--top);
  right: var(--left);
}

h2 span:nth-child(4) {
  bottom: var(--top);
  right: var(--left);
}

section>div:first-child {
  margin-bottom: 60px;
}

section>div:first-child p {
  margin-top: 40px;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: var(--white);
}

.ryokin {
  font-size: 33px;
  padding-right: 11px;
  text-shadow: 3px 3px 0 #57004B;
  color: #D1BA59;
}

/* メニュー表 */
main ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 68px;
  margin-top: 48px;
}

main ul li {
  width: fit-content;
  line-height: 1;
}

main ul li img {
  border-radius: 20px;
  overflow: hidden;
}

main ul li p:not([class]) {
  font-size: 24px;
  font-family: var(--font);
  color: var(--white);
  text-shadow: 2px 2px 0 #57004B;
}

li div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 24px;
  align-items: end;
  margin-top: 12px;
}

.price {
  font-size: 18px;
  color:#D1BA59;
  opacity: 0.95;
  font-weight: bold;
}

.maid a {
  margin-bottom: 84px;
}

@media (max-width: 800px) {}