@charset "UTF-8";
/*==========================================================================================

  ドリンク＆フード (/shintoyosu/food/, /shiba/food/)

  Loaded only by page-food-menu.php, after base.css. Layout from the client's rough (2026-10-16): the venue tabs
  (.avenue__select, outline.css), the usual subpage box and title, then one block per genre with a grid of square
  photos, 3 across on PC and 2 on phones.

==========================================================================================*/
section#food .title h2 {
  background: url(../../images/food/title.png) 0 0 no-repeat;
}
/* The rough puts the venue line just under the title's stripe. #contents.second: common.css sets the margin with it. */
#contents.second #food .title {
  margin-bottom: 16px;
}
.tcm-food__venues {
  margin-bottom: 16px;
}
/* Under the title text: the title h2 starts 100px in (76px from 980px down), past the Santa icon. */
.tcm-food__venue {
  margin-left: 100px;
  color: #20681a;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
}
.tcm-food__lead {
  margin: 6px 0 0 100px;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}
/* reset.css gives every span font-weight: normal. */
.tcm-food__nobreak {
  display: inline-block;
  font-weight: inherit;
}

/*-------------- jump links to each genre --------------*/
.tcm-food__genres ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 28px -5px 0;
}
.tcm-food__genres li {
  margin: 5px;
}
.tcm-food__genres a {
  position: relative;
  display: block;
  padding: 7px 32px 7px 18px;
  border: 2px solid #015830;
  border-radius: 999px;
  background: #fff;
  color: #015830;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  text-decoration: none;
}
.tcm-food__genres a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.tcm-food__genres a:hover,
.tcm-food__genres a:focus {
  background: #015830;
  color: #fff;
}

/*-------------- genres --------------*/
.tcm-food__genre {
  margin-top: 44px;
  scroll-margin-top: 16px;
}
.tcm-food__heading {
  padding-bottom: 8px;
  border-bottom: 1px solid #c3c8d0;
  color: #1a1a1a;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.45;
}
/* The rough: each photo is two thirds of a third of the width, centred in its third, with the text under it aligned
   to its left edge. Percent padding is relative to the list's width, so 1/18 on each side leaves 2/9 for the item. */
.tcm-food__list {
  display: flex;
  flex-wrap: wrap;
}
.tcm-food__item {
  box-sizing: border-box;
  width: 33.3333%;
  margin-top: 22px;
  padding: 0 5.5556%;
}
.tcm-food__list.is-collapsed > .is-extra {
  display: none;
}
/* Square at every width, whatever the photo's own shape: photos uploaded before the square size existed come uncropped. */
.tcm-food__photo {
  position: relative;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background: #fff;
}
.tcm-food__photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcm-food__photo img.is-placeholder {
  object-fit: contain;
}
.tcm-food__name {
  margin-top: 8px;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.45;
  word-wrap: break-word;
}
.tcm-food__shop {
  margin-top: 2px;
  color: #555;
  font-size: 13px;
  line-height: 1.45;
  word-wrap: break-word;
}
/* Names come from wp-admin and wrap in narrow columns. strict keeps a small kana or ー off the start of a line, and
   balance evens the lines out instead of leaving one character on its own (browsers without it wrap as before). */
.tcm-food__name,
.tcm-food__shop {
  line-break: strict;
  text-wrap: balance;
}

/*-------------- もっと見る / 閉じる (added by food-menu.js) --------------*/
.tcm-food__more {
  position: relative;
  display: block;
  min-width: 240px;
  margin: 26px auto 0;
  padding: 11px 48px;
  border: 2px solid #015830;
  border-radius: 999px;
  background: #fff;
  color: #015830;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tcm-food__more::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.tcm-food__more[aria-expanded="true"]::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}
.tcm-food__more:hover,
.tcm-food__more:focus {
  background: #015830;
  color: #fff;
}

@media (max-width: 980px) {
  #contents.second #food .title {
    margin-bottom: 14px;
  }
  .tcm-food__venue,
  .tcm-food__lead {
    margin-left: 76px;
  }
  /* The rough has PC and phone only. Two ninths of a tablet's width would leave 125px photos at 679px, with names
     wrapping every few characters: on tablets each item takes its whole third. */
  .tcm-food__item {
    padding: 0 12px;
  }
}
@media (max-width: 678px) {
  .tcm-food__venues {
    margin-bottom: 12px;
  }
  .tcm-food__venue,
  .tcm-food__lead {
    margin-left: 0;
    text-align: center;
  }
  .tcm-food__venue {
    font-size: 17px;
  }
  .tcm-food__lead {
    font-size: 13px;
  }
  .tcm-food__genres ul {
    margin-top: 20px;
  }
  .tcm-food__genres li {
    margin: 4px;
  }
  .tcm-food__genres a {
    padding: 6px 28px 6px 14px;
    font-size: 13px;
  }
  .tcm-food__genres a::after {
    right: 12px;
  }
  /* The rough separates genres with a rule on phones. */
  .tcm-food__genre {
    margin-top: 26px;
  }
  .tcm-food__genre + .tcm-food__genre {
    padding-top: 24px;
    border-top: 1px solid #c3c8d0;
  }
  .tcm-food__heading {
    font-size: 19px;
  }
  /* Two across, edge to edge with the heading's rule. */
  .tcm-food__list {
    justify-content: space-between;
  }
  .tcm-food__item {
    width: calc(50% - 8px);
    margin-top: 16px;
    padding: 0;
  }
  .tcm-food__name {
    margin-top: 6px;
    font-size: 13px;
  }
  .tcm-food__shop {
    font-size: 12px;
  }
  .tcm-food__more {
    width: 100%;
    min-width: 0;
    margin-top: 22px;
    font-size: 14px;
  }
}