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

  雑貨 (/shintoyosu/zakka/, /shiba/zakka/)

  Loaded only by page-zakka-booths.php, after base.css. The client's design (zakka-integration/zakka.css,
  2026-10-30) with its overrides resolved to the values that apply, the classes renamed, without its venue buttons
  (the site's venue tabs link the two venue pages) and without its font-family (the page's own is the same Hiragino
  stack, and a translated page sets its language's fonts).

==========================================================================================*/
section#zakka .title h1 {
  background: url(../../images/zakka/title.png) 0 0 no-repeat;
}
.tcm-zakka {
  color: #254b34;
  font-size: 14px;
  line-height: 1.5;
}
.tcm-zakka * {
  box-sizing: border-box;
}
.tcm-zakka button {
  font-family: inherit;
  font-weight: 700;
}
.tcm-zakka [hidden] {
  display: none !important;
}
.tcm-zakka button:focus-visible {
  outline: 3px solid #b4a35f;
  outline-offset: 5px;
}

/* 「新豊洲会場の / 雑貨ブース・おすすめ商品」 between ◆ rules. */
.tcm-zakka__venue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 40px 0 34px;
  color: #073e2e;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.tcm-zakka__venue span {
  min-width: 0;
  font-weight: inherit;
  text-wrap: balance;
}
.tcm-zakka__venue::before,
.tcm-zakka__venue::after {
  content: "◆";
  flex: 1 0 38px;
  color: #a58b45;
  font-family: serif;
  font-size: 14px;
  line-height: 1;
  text-align: right;
  background: linear-gradient(#a58b45, #a58b45) left center / calc(100% - 24px) 1px no-repeat;
}
.tcm-zakka__venue::after {
  text-align: left;
  background-position: right center;
}
.tcm-zakka__nobreak {
  display: inline-block;
  white-space: nowrap;
}

.tcm-zakka__booths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.tcm-zakka__booth {
  min-width: 0;
  padding: 0 20px 18px;
  overflow: hidden;
  background: #fffefa;
  border: 1px solid #38654d;
  border-radius: 4px;
}
.tcm-zakka__booth-head {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  margin: 0 -20px 22px;
  padding: 18px 20px;
  background: #164934;
  border-bottom: 2px solid #b59b5d;
}
.tcm-zakka__booth-no {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 7px;
  background: #c6ad72;
  border: 1px solid #c6ad72;
  color: #164934;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.tcm-zakka__booth-name {
  margin: 0;
  color: #fff9e9;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

/* The products scroll sideways: about 2¼ in view, the rest behind the ←/→ buttons (common/js/zakka.js). */
.tcm-zakka__rail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #b69b63 #eae7d9;
}
.tcm-zakka__rail::-webkit-scrollbar {
  height: 6px;
}
.tcm-zakka__rail::-webkit-scrollbar-track {
  background: #eae7d9;
}
.tcm-zakka__rail::-webkit-scrollbar-thumb {
  background: #b69b63;
  border-radius: 5px;
}
.tcm-zakka__rail:focus-visible {
  outline: 2px solid #b69b63;
  outline-offset: 4px;
}
/* A rail that scrolls can be dragged with the mouse (zakka.js); touch scrolls it natively. Its text is not selectable
   then, or the drag would select it. The snap is off while it is dragged, or it would pull every step back to a
   product's edge, and while it settles on one after the drag. */
@media (hover: hover) and (pointer: fine) {
  .tcm-zakka__rail.is-draggable {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
}
.tcm-zakka__rail.is-dragging {
  -webkit-user-select: none;
  user-select: none;
}
.tcm-zakka__rail.is-dragging,
.tcm-zakka__rail.is-settling {
  scroll-snap-type: none;
}
.tcm-zakka__rail.is-dragging,
.tcm-zakka__rail.is-dragging * {
  cursor: grabbing;
}
.tcm-zakka__item {
  flex: 0 0 44%;
  min-width: 0;
  scroll-snap-align: start;
}
.tcm-zakka__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 2px;
}
.tcm-zakka__item-name {
  margin: 12px 0 7px;
  color: #293d30;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.tcm-zakka__item-text {
  margin: 0;
  color: #626254;
  font-size: 12px;
  line-height: 1.85;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* zakka.js clamps a 紹介文 to 3 lines and shows 続きを読む only where it is longer. */
.tcm-zakka__item-text.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.tcm-zakka__more {
  display: block;
  margin-top: 6px;
  padding: 3px 0;
  background: transparent;
  border: 0;
  color: #49634b;
  font-size: 12px;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tcm-zakka__more:focus-visible {
  outline: 2px solid #ad955e;
  outline-offset: 3px;
}
.tcm-zakka__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
/* A rail that does not scroll keeps the row (the cards of a grid row stay level) but neither hint nor buttons. */
.tcm-zakka__controls.is-static {
  visibility: hidden;
}
.tcm-zakka__hint {
  margin-right: auto;
  color: #807760;
  font-size: 10px;
  letter-spacing: .02em;
}
.tcm-zakka__controls button {
  width: 32px;
  height: 30px;
  background: transparent;
  border: 1px solid #bdac7f;
  border-radius: 3px;
  color: #7b683b;
  font-size: 17px;
  cursor: pointer;
}
.tcm-zakka__controls button:disabled {
  opacity: .3;
  cursor: default;
}

@media (max-width: 980px) {
  .tcm-zakka__venue {
    gap: 18px;
    font-size: 26px;
  }
  .tcm-zakka__booths {
    gap: 24px;
  }
  .tcm-zakka__booth {
    padding: 0 16px 18px;
  }
  .tcm-zakka__booth-head {
    min-height: 74px;
    margin: 0 -16px 20px;
    padding: 16px;
  }
  .tcm-zakka__booth-name {
    font-size: 17px;
  }
  .tcm-zakka__item {
    flex-basis: 62%;
  }
}

@media (max-width: 767px) {
  .tcm-zakka__venue {
    gap: 10px;
    margin: 30px 0 26px;
    font-size: clamp(15px, 4.5vw, 21px);
  }
  .tcm-zakka__venue::before,
  .tcm-zakka__venue::after {
    flex: 1 1 16px;
    min-width: 10px;
    font-size: 10px;
    background-size: calc(100% - 15px) 1px;
  }
  /* The two phrases one under the other. */
  .tcm-zakka__venue-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .tcm-zakka__booths {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .tcm-zakka__booth-head {
    min-height: 72px;
  }
  .tcm-zakka__booth-no {
    min-width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .tcm-zakka__booth-name {
    font-size: 18px;
  }
  .tcm-zakka__item {
    flex-basis: 44%;
  }
  .tcm-zakka__item-text {
    font-size: 13px;
  }
  .tcm-zakka__hint {
    font-size: 11px;
  }
}

@media (max-width: 400px) {
  .tcm-zakka__item {
    flex-basis: 62%;
  }
}