@charset "UTF-8";

:root {
  /* 色管理用の変数 */
  --black-color: #1b1b1b;
  --white-color: #fff;
  --gray-color: #515151;
  --menu-divider-line-color: #ababab;
}

:root {
  /* コンテンツ幅管理用の変数 */
  --content-width: 784px;
}

:root {
  /* z-index管理用の変数 */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-header: 100;
  --z-index-menu: 150;
  --z-index-opening: 999;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--black-color);
  font-size: 16px;
  font-family: "Sen", "Zen Maru Gothic", sans-serif;
  line-height: normal;
  letter-spacing: 0.04em;
  min-height: 100vh;
}

/* AdSence */

.ad-spacer {
    margin: 40px auto;
    text-align: center;
    max-width: 900px;
    min-height: 100px;
    background: transparent;
    overflow: hidden;
}

.ad-spacer::before {
    content: "スポンサーリンク";
    display: block;
    font-size: 10px;
    color: #bbb;
    margin-bottom: 5px;
}

/* ---------- layout ---------- */

.menu_buttons {
  padding: 48px 0;
  font-size: 20px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 48px;
  justify-content: center;
}

@media screen and (max-width: 450px) {
  .menu_buttons {
    padding: 24px 0;
    font-size: 16px;
    gap: 22px;
    justify-content: center;
  }
}

.menu_link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 135px;
  height: 45px;
  text-align: center;
  background-color: var(--white-color);
  border: 1px solid var(--black-color);
  border-radius: 6px;
  position: relative;
  transition: 0.2s;
}

@media screen and (max-width: 450px) {
  .menu_link {
    width: 100px;
    height: 32px;
  }
}

.menu_link:hover {
  background-color: var(--black-color);
  color: var(--white-color);
}

.menu_link_dot {
  width: 6px;
  height: 6px;
  background-color: transparent;
  border-radius: 100vw;
  position: absolute;
  left: 18px;
  transition: 0.2s;
}

@media screen and (max-width: 450px) {
  .menu_link_dot {
    width: 4px;
    height: 4px;
    left: 12px;
  }
}

.menu_link:hover .menu_link_dot {
  background-color: var(--white-color);
}

.menu_list {
  margin: 48px auto 0;
  max-width: calc(1144px);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 40px 32px;
}

@media screen and (max-width: 1176px) {
  .menu_list {
    margin: 16px auto 0;
    padding: 0 16px;
  }
}

@media screen and (max-width: 800px) {
  .menu_list {
    flex-direction: column;
    justify-content: center;
    gap: 32px;
  }
}

.menu_item {
  display: flex;
  gap: 8px;
  flex-direction: column;
  width: calc((100% - 32px) / 2);
  font-weight: 500;
}

@media screen and (max-width: 800px) {
  .menu_item {
    width: 100%;
  }
}

.menu_item::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--menu-divider-line-color);
  margin-bottom: 32px;
}

@media screen and (max-width: 800px) {
  .menu_item::before {
    margin-bottom: 24px;
    margin-inline: auto;
  }
}

@media screen and (max-width: 800px) {
  .menu_item:first-child::before {
    display: none;
  }
}

.menu_item:last-child::after,
.menu_item:nth-last-child(2)::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--menu-divider-line-color);
  margin-top: 32px;
}

@media screen and (max-width: 800px) {
  .menu_item:last-child::after {
    margin-top: 24px;
    margin-inline: auto;
  }
}

@media screen and (max-width: 800px) {
  .menu_item:nth-last-child(2)::after {
    content: "";
    display: none;
  }
}

.menu_content_wrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}

.menu_content_img_wrapper {
  min-width: 40%;
}

.menu_content_allergens_wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media screen and (max-width: 450px) {
  .menu_content_allergens_wrapper {
    gap: 12px;
  }
}

.menu_content_allergens_images {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  width: 100%;
}

.menu_content_allergens_images img {
  max-width: calc((100% - 28px) / 8);
}

@media screen and (max-width: 450px) {
  .menu_content_allergens_images img {
    max-width: calc((100% - 24px) / 7);
  }
}

.menu_content_allergens_text {
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .menu_content_allergens_text {
    font-size: 14px;
  }
}

.menu_item_title {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  font-size: 18px;
}

@media screen and (max-width: 450px) {
  .menu_item_title {
    font-size: 15px;
  }
}

.menu_item_desc {
  margin-top: 12px;
  letter-spacing: 0.05em;
  flex-grow: 1;
  line-height: 1.6;
}

@media screen and (max-width: 450px) {
  .menu_item_desc {
    font-size: 14px;
  }
}

.menu_item_images {
  display: flex;
  gap: 8px;
  width: 100%;
}

.menu_item_image_wrapper {
  max-width: calc((100% - 16px) / 3);
}

.menu_item_image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ---------- footer ---------- */

.footer {
  margin-top: 20px;
  grid-row-start: 2;
  grid-row-end: 3;
  width: 100%;
}

.footer_text {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-gray-color);
  margin-top: 16px;
  text-align: center;
  padding-bottom: 8px;
  letter-spacing: 0.08em;
}