/* /freeban/ — scoped under .freeban so the shop's common CSS is not affected. Colors follow /tenban/. */
.freeban {
  --fb-ink: #333;
  --fb-sub: #666;
  --fb-line: #ddd;
  --fb-tint: #F7F1EA;
  --fb-wood: #8A5A2B;
  --fb-price: #aa2b2b;
  --fb-accent: #c0392b;
  --fb-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 16px 64px;
  color: var(--fb-ink);
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  letter-spacing: .04em;
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  overflow-wrap: anywhere;
}
.freeban *, .freeban *::before, .freeban *::after { box-sizing: border-box; }
.freeban [hidden] { display: none !important; }
.freeban p { margin: 0 0 1em; font-size: inherit; line-height: inherit; }
.freeban a { color: var(--fb-sub); }
.freeban h1, .freeban h2, .freeban h3 { margin: 0; padding: 0; border: 0; background: none; color: var(--fb-ink); font-weight: 700; line-height: 1.4; text-align: left; }
.freeban small { font-size: 12px; font-weight: 400; }

.fb-breadcrumb { font-size: 13px; color: var(--fb-sub); margin-bottom: 12px; }
.fb-breadcrumb span { margin: 0 6px; }
.fb-breadcrumb span[aria-current] { margin: 0; }

/* hero: same look as the top-page button banner (wood grain + white text) */
.fb-hero { position: relative; overflow: hidden; border-radius: var(--fb-radius); padding: 40px 32px; color: #fff;
  background: url(/tenban/assets/board/nara-laminated.webp) center / cover; }
.fb-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(60, 38, 16, .62), rgba(60, 38, 16, .25)); }
.fb-hero__text { position: relative; text-shadow: 0 1px 4px rgba(40, 24, 8, .5); }
.freeban .fb-hero h1 { color: #fff; font-size: 40px; letter-spacing: .06em; margin: 0 0 12px; }
.freeban .fb-hero__sub { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.freeban .fb-hero__lead { font-size: 15px; margin: 0 0 8px; }
.freeban .fb-hero__price { margin: 0; font-size: 15px; }
.fb-hero__price b { font-size: 22px; }
.fb-hero__price small { margin-left: 4px; color: #fff; }

.fb-section { margin-top: 48px; }
.freeban h2.fb-ttl { font-size: 24px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--fb-ink); }
.freeban h3.fb-sub { font-size: 18px; margin: 24px 0 8px; }
.freeban .fb-note { font-size: 13px; color: var(--fb-sub); margin-top: 8px; }
.freeban .fb-small { font-size: 12px; color: var(--fb-sub); margin: 6px 0 0; line-height: 1.6; }

/* order panel */
.fb-order { border: 2px solid var(--fb-wood); border-radius: var(--fb-radius); background: #fffdf8; overflow: hidden; }
.fb-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fb-tint); }
.freeban .fb-tabs button { padding: 12px 4px; border: 0; border-bottom: 2px solid var(--fb-wood); background: none; color: var(--fb-sub); font: inherit; font-weight: 700; cursor: pointer; }
.freeban .fb-tabs button.is-on { background: #fffdf8; color: var(--fb-ink); border: 2px solid var(--fb-wood); border-bottom-color: transparent; margin: -2px -2px 0; }
.fb-steps { padding: 4px 20px 24px; }
.freeban .fb-order__lead { margin: 12px 0 0; color: var(--fb-sub); font-size: 14px; }
.fb-step { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e3d6bd; }
.freeban h3.fb-step__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; color: #5a4320; }
.fb-step__num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fb-wood); color: #fff; font-size: 14px; }

.fb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.freeban .fb-card { display: flex; flex-direction: column; padding: 0 0 8px; border: 2px solid #d8c8a6; border-radius: 6px; background: #fff; cursor: pointer;
  text-align: left; overflow: hidden; font: inherit; color: var(--fb-ink); line-height: 1.5; }
.fb-card__img { display: block; height: 64px; background: center / cover; border-bottom: 6px solid rgba(0, 0, 0, .12); }
.fb-card__name { padding: 6px 10px 0; font-weight: 700; font-size: 15px; }
.fb-card__desc { padding: 2px 10px 4px; font-size: 12px; color: var(--fb-sub); flex: 1; }
.fb-card__price { padding: 0 10px; font-size: 13px; color: var(--fb-price); font-weight: 700; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.freeban .fb-chip { display: flex; flex-direction: column; min-width: 120px; padding: 8px 14px; border: 2px solid #d8c8a6; border-radius: 6px; background: #fff;
  cursor: pointer; font: inherit; color: var(--fb-ink); line-height: 1.45; text-align: left; }
.fb-chip b { font-size: 16px; }
.fb-chip span { font-size: 12px; color: var(--fb-sub); }
.fb-chip small { color: var(--fb-price); font-weight: 700; font-size: 13px; }
.freeban .fb-card.is-on, .freeban .fb-chip.is-on { border-color: var(--fb-accent); box-shadow: 0 0 0 2px var(--fb-accent); }

.freeban .fb-btn { font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--fb-wood); background: #fff; color: #5a4320; border-radius: 4px; padding: 4px 12px; }
.freeban .fb-btn:hover { background: #f3ead9; }
.freeban .fb-btn:disabled { opacity: .4; cursor: default; }
.fb-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.fb-presets__label { align-self: center; margin-right: 4px; font-size: 13px; font-weight: 700; color: #6b5a3a; }
.freeban .fb-cut__lead { font-size: 14px; margin: 0 0 8px; }
.fb-draw { padding: 0 14px 38px; touch-action: none; user-select: none; -webkit-user-select: none; }
.fb-dim { margin: 0 0 24px; border-bottom: 1px solid #999; text-align: center; font-size: 11px; line-height: 1.5; color: #777; }
.fb-board { position: relative; width: 100%; }
.fb-piece { position: absolute; top: 0; height: 100%; border: 1px solid var(--fb-wood); background: #ecd6a8; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.fb-piece span { padding: 1px 6px; border-radius: 3px; background: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 700; color: #4a3515; letter-spacing: 0; }
.fb-alt { background: #e2c792; }
.fb-over { outline: 3px solid #b3261e; outline-offset: -3px; }
.fb-over span { color: #b3261e; }
.fb-kerf { position: absolute; top: -6px; bottom: -6px; min-width: 2px; background: var(--fb-accent); }
.fb-handle { position: absolute; top: -24px; bottom: -6px; width: 32px; margin-left: -16px; cursor: ew-resize; }
.fb-handle::before { content: ""; position: absolute; left: 8px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--fb-accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--fb-accent); }
.fb-under { position: absolute; top: 100%; margin-top: 4px; transform: translateX(-50%); text-align: center; white-space: nowrap; font-size: 11px; line-height: 1.3; color: var(--fb-wood); }
.fb-cut__list { margin: 8px 0; }
.fb-cut__row { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.fb-cut__no { min-width: 1.8em; font-weight: 700; color: #5a4320; }
.freeban input.fb-cut__len, .freeban input.fb-qty__input { width: 6em; padding: 4px 6px; border: 1px solid #aaa; border-radius: 4px; font: inherit; text-align: right; background: #fff; }
.freeban input.fb-qty__input { width: 4em; text-align: center; }
.fb-cut__rest { color: var(--fb-sub); }
.fb-msg { margin: 8px 0; padding: 8px 12px; border-radius: 4px; font-size: 14px; }
.fb-msg--err { background: #fdecea; color: #b3261e; font-weight: 700; }
.fb-msg--warn { background: #fff4e0; color: #7a4b00; }

.fb-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.fb-radios { margin: 0 0 8px; font-size: 14px; }
.fb-radios label { margin-right: 16px; cursor: pointer; }
.fb-sum { margin: 12px 0 0; padding: 12px 16px; background: #faf6ee; border-radius: 4px; }
.fb-sum table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; }
.fb-sum th, .fb-sum td { padding: 3px 0; border: 0; background: none; vertical-align: top; text-align: left; font-weight: 400; }
.fb-sum td { text-align: right; min-width: 6.5em; padding-left: 8px; }
.fb-sum tr.fb-sum__total th, .fb-sum tr.fb-sum__total td { border-top: 1px solid #ccb98f; padding-top: 6px; font-weight: 700; font-size: 17px; }
.fb-agree { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border: 1px solid #c0392b; border-radius: 4px; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.fb-agree input { margin-top: 4px; flex: none; }
.freeban .fb-cart { display: block; width: 100%; max-width: 360px; margin: 16px auto 0; padding: 14px; border: 0; border-radius: 6px; background: var(--fb-accent);
  color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.freeban .fb-cart:disabled { background: #ccc; cursor: default; }

/* price table */
.fb-table-wrap { overflow-x: auto; }
.fb-table { width: 100%; border-collapse: collapse; font-size: 15px; white-space: nowrap; }
.fb-table th, .fb-table td { padding: 8px 12px; border-bottom: 1px solid var(--fb-line); text-align: left; background: none; }
.fb-table thead th { background: var(--fb-tint); font-weight: 700; }
.fb-table td:nth-child(3), .fb-table td:nth-child(4), .fb-table thead th:nth-child(n+3) { text-align: right; }
.fb-table tr.fb-table__first > * { border-top: 2px solid #ccc; }
.freeban .fb-table a { color: var(--fb-price); font-weight: 700; }
.fb-table__none { color: #bbb; }

.fb-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.fb-point { padding: 16px; background: var(--fb-tint); border-radius: var(--fb-radius); }
.fb-point b { display: block; font-size: 16px; margin-bottom: 6px; }
.freeban .fb-point p { margin: 0; font-size: 14px; }
.fb-list { margin: 0; padding-left: 1.4em; font-size: 15px; }
.fb-list li { margin-bottom: 4px; }

.fb-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 48px; }
.freeban .fb-links a { display: block; padding: 12px 16px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); color: var(--fb-ink); text-decoration: none; font-size: 15px; }
.freeban .fb-links a::after { content: "›"; float: right; color: var(--fb-sub); }

@media (max-width: 640px) {
  /* Phone: a compact summary instead of the wood-grain hero, with the order tabs right below it. */
  .fb-breadcrumb { margin-bottom: 8px; }
  .fb-hero { padding: 0; border-radius: 0; background: none; color: var(--fb-ink); }
  .fb-hero::before { display: none; }
  .fb-hero__text { text-shadow: none; }
  .freeban .fb-hero h1 { color: var(--fb-ink); font-size: 26px; letter-spacing: .04em; margin: 0 0 6px; }
  .freeban .fb-hero__sub { font-size: 14px; color: var(--fb-sub); margin: 0 0 2px; }
  .freeban .fb-hero__lead { font-size: 13px; line-height: 1.6; color: var(--fb-sub); margin: 0 0 6px; }
  .fb-hero__lead br { display: none; }
  .freeban .fb-hero__price { font-size: 13px; line-height: 1.6; }
  .fb-hero__pr { white-space: nowrap; }
  .fb-hero__price b { font-size: 18px; color: var(--fb-price); }
  .fb-hero__price small { margin-left: 0; color: var(--fb-sub); white-space: nowrap; }
  /* The shop's lib.js scrolls #order links to the element's top (ignores scroll-margin), under the 50px sticky header.
     Extend #order 58px upward without moving anything; the extended area lets clicks pass through to the summary. */
  .freeban #order { margin-top: -46px; padding-top: 58px; pointer-events: none; }
  .freeban #order > * { pointer-events: auto; }
  .freeban #order > h2.fb-ttl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fb-steps { padding: 4px 12px 20px; }
  .freeban .fb-tabs button { min-height: 48px; font-size: 14px; }
  .freeban .fb-tabs button.is-on { box-shadow: inset 0 3px 0 var(--fb-accent); }
  .fb-cards { grid-template-columns: repeat(2, 1fr); }
  .fb-points, .fb-links { grid-template-columns: 1fr; }
  .fb-table { font-size: 14px; }
  .fb-table th, .fb-table td { padding: 6px 8px; }
}

.fb-table--compare { white-space: normal; }
.fb-table--compare th, .fb-table--compare td { text-align: left !important; vertical-align: top; }
.fb-table--compare tbody th { white-space: nowrap; background: var(--fb-tint); }
.fb-table--compare thead th:first-child { width: 8em; }
#breadcrumbsWrapper {
  display: none !important;
}