@charset "UTF-8";

body[id*=category-menu] #pageTitle {
  background: url("/_themes/site/images/title-menu.png") no-repeat center/cover;
}

/* /category/menu/ 
------------------------------------ */
.contentGpCategoryCategoryType section li {
  list-style: circle;
  list-style-position: inside;
}

.contentGpCategoryCategoryType section>ul>li>ul>li>ul {
  display: none;
}

/* #pageTitle
------------------------------------ */
#pageTitle {
  margin-bottom: 3rem;
}

#pageTitle .pieceContainer {
  padding: 5rem 1rem;
  background-color: #ffffffdc;
}

#pageTitle h1 {
  background-color: transparent;
  color: var(--mono-color-1);
  font-weight: normal;
  font-family: var(--font-family-pop);
  text-align: center;
}

/* #pageTitle
------------------------------------ */
#menuWesternContainer #menuWestern,
#menuWesternContainer #menuRice,
#menuWesternContainer #menuPasta,
.menu-page>div[id^="menu"].piece,
div[id^="menu"].piece+.set-drink,
.contentGpCategoryCategory .menu-list-category>section {
  margin-bottom: 7rem;
}

div[id^="menu"].piece .pieceHeader,
.contentGpCategoryCategory .menu-list-category h2 {
  margin-bottom: 2rem;
}

div[id^="menu"].piece h2,
.contentGpCategoryCategory .menu-list-category h2,
.contentGpCategoryCategory .menu-list2 h2 {
  font-weight: normal;
  font-size: 1.8rem;
  font-family: var(--font-family-pop);
  text-align: left;
}

@media only screen and (max-width: 559px) {

  div[id^="menu"].piece h2,
  .contentGpCategoryCategory .menu-list-category h2 {
    font-size: 1.6rem;
  }
}

/* #categoryMenu
------------------------------------ */
#categoryMenu {
  box-shadow: 0 2px 3px 0 #cdbfad;
  margin-bottom: 2rem;
  border: 1px solid var(--ac-color-brown-1);
}

#categoryMenu .pieceHeader {
  padding: 0.5rem;
  text-align: center;
  cursor: pointer;
}

#categoryMenu h2 {
  display: inline-block;
  transform: translateX(calc(-2.5rem / 2));
  padding-left: 2.5rem;
  background: url("/_themes/site/images/ic-menu-list-bw.svg") no-repeat left center/1.5rem;
  font-weight: bold;
  font-size: 1.5rem;
  text-align: center;
}

#categoryMenu .pieceBody {
  margin-top: 0.5rem;
  padding-bottom: 1.5rem;
  text-align: center;
}

#categoryMenu .pieceBody .level1 {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#categoryMenu .pieceBody h3 {
  display: inline-block;
  padding: 0 0.5rem 5px;
  border-bottom: 1.5px dashed var(--ac-color-brown-2);
  font-weight: normal;
}

#categoryMenu .pieceBody a {
  color: var(--mono-color-1);
  text-decoration: none;
}

#categoryMenu a.current {
  color: #cf6111;
}

/* #westchildNav
------------------------------------ */
#westchildNav {
  margin-bottom: 3rem;
}

#westchildNav ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

#westchildNav button {
  padding: 0.5rem 4rem;
  border: 1px solid var(--ac-color-brown-1);
  border-radius: 50px;
  background-color: unset;
  color: var(--ac-color-brown-1);
  font-family: var(--font-family-pop);
  transition: all 0.3s ease;
}

#westchildNav button:hover,
#westchildNav button.current {
  background-color: var(--ac-color-brown-1);
  color: var(--mono-color-9);
}

#westchildNav button:focus {
  outline: none;
}

@media only screen and (max-width: 959px) {
  #westchildNav ul {
    gap: 1rem;
    flex-wrap: wrap;
  }

  #westchildNav li {
    padding: 0;
  }

  #westchildNav button {
    padding: 0.5rem 3rem;
  }
}

/* #menu-list-common
------------------------------------ */
div[id^="menu"].piece .pieceBody>ul,
.contentGpCategoryCategory section>ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
  margin-bottom: 2rem;
}

div[id^="menu"].piece .pieceBody>ul>li,
.contentGpCategoryCategory section>ul>li,
div[id^="menu"].piece .pieceBody>ul:after,
.contentGpCategoryCategory section>ul:after {
  flex-basis: calc(50% - 1.5rem);
  border-bottom: 1px dotted var(--ac-color-brown-1);
}

div[id^="menu"].piece .pieceBody>ul:after,
.contentGpCategoryCategory section>ul:after {
  border: none;
  content: "";
}

div[id^="menu"].piece .pieceBody>ul>li:has(.image img),
.contentGpCategoryCategory section>ul>li:has(.image img) {
  flex-basis: calc(50% - 1.5rem);
}

div[id^="menu"].piece .pieceBody>ul>li:has(.image img):nth-of-type(n+3),
.contentGpCategoryCategory section>ul>li:has(.image img):nth-of-type(n+3) {
  padding-top: 2rem;
}

div[id^="menu"].piece .pieceBody>ul>li .body,
.contentGpCategoryCategory section>ul>li .body {
  flex-basis: 100%;
}

div[id^="menu"].piece .food-menu,
.contentGpCategoryCategory .food-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
}

div[id^="menu"].piece .menu-name,
.contentGpCategoryCategory .menu-name {
  font-weight: bold;
  font-size: 1.1rem;
}

div[id^="menu"].piece .food-menu p,
.contentGpCategoryCategory .food-menu p {
  margin-bottom: 0;
}

div[id^="menu"].piece .title,
.contentGpCategoryCategory .title {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

div[id^="menu"].piece .caption:has(p),
.contentGpCategoryCategory .caption:has(p) {
  width: 100%;
}

div[id^="menu"].piece .image:has(img),
.contentGpCategoryCategory .image:has(img) {
  width: 100%;
  text-align: center;
}

div[id^="menu"].piece .caption li,
div[id^="menu"].piece .set li,
.contentGpCategoryCategory .caption li,
.contentGpCategoryCategory .set li {
  padding: 0;
}

div[id^="menu"].piece .image img,
.contentGpCategoryCategory .image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/11;
  object-fit: cover;
}

@media only screen and (max-width: 959px) {

  div[id^="menu"].piece .pieceBody>ul,
  .contentGpCategoryCategory section>ul {
    justify-content: center;
    gap: 1rem;
  }

  div[id^="menu"].piece .pieceBody>ul>li,
  .contentGpCategoryCategory section>ul>li,
  div[id^="menu"].piece .pieceBody>ul>li:has(.image img),
  .contentGpCategoryCategory section>ul>li:has(.image img),
  div[id^="menu"].piece .pieceBody>ul:after,
  .contentGpCategoryCategory section>ul:after {
    flex-wrap: wrap;
    flex-basis: calc(50% - 0.5rem);
    flex-grow: 1;
    min-width: 340px;
    max-width: 600px;
  }
}

/* #menuWestern
------------------------------------------------ */
#menuWestern {
  margin-bottom: 7rem;
}

#menuWestern.piece .pieceBody>ul>li:has(.image img) {
  flex-basis: 100%;
  padding-bottom: 0;
}

#menuWestern.piece .pieceBody>ul .food-menu {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1fr;
  grid-template-areas:
    "image   set"
    "caption set";
  gap: 16px 28px;
}

#menuWestern.piece .pieceBody>ul>li:has(.image img) .image {
  grid-area: image;
}

#menuWestern.piece .pieceBody>ul>li:has(.image img) .set {
  grid-area: set;
}

@media only screen and (max-width: 959px) {
  #menuWestern.piece .pieceBody>ul>li {
    max-width: 100%;
    padding-bottom: 1rem !important;
  }

  #menuWestern.piece .pieceBody>ul .food-menu {
    gap: 0 1rem;
  }
}

@media only screen and (max-width: 719px) {
  #menuWestern.piece .pieceBody>ul>li {
    max-width: 600px;
  }

  #menuWestern.piece .pieceBody>ul .food-menu {
    display: block;
  }

  #menuWestern.piece .pieceBody>ul .food-menu .image {
    display: block;
    margin-bottom: 0.5rem;
  }
}

/* #menuSetdrink
------------------------------------------------*/
#menuWesternContainer #menuSetdrink .title {
  display: none;
}

/* /category/menu/sand/ 
------------------------------------------------*/
body[id*="menu-sand"] .food-menu .set {
  width: 100%;
  text-align: right;
}

/* /category/menu/drink/
------------------------------------------------*/
/* #menuDesert .docs li:nth-of-type(5) {
  flex-basis: 100%;
} */