/* Early-bird style G (owner 11/06: "早鳥的資訊 CODEX 有整理好，你去更新一下，分成現在可以下單與歷史販售兩塊"): every ticket
   of Codex's 11/06 catalogue in two blocks - 現在可以下單 (cyan box; 即將開賣／待確認 and the two resorts not announced yet
   at its end) and 歷史販售 (grey box) - one short card per resort in each block (style F2's card: round logo, name,
   Japanese name, a badge, the lowest early-bird price, the nearest deadline, the kinds on sale), and a click on a card
   opens style F2's window (the coaches page's native <dialog>) with all of that resort's tickets grouped by kind
   (js/eb-g.js; the same script moves tickets whose sale is over to 歷史販售 in the reader's time). Without JS each card
   folds out in place as a plain <details>. Stands on its own (F2's pieces copied and renamed ebg-). */
.rental-a.eb .ebg { --c-ink: #17375a; --c-text: #3a5167; --c-muted: #5d7488; --c-blue: #1d6aa8; --c-red: #c81e4a; --c-edge: #c9dfeb;
  container: ebg / inline-size; display: grid; gap: 24px; }
.rental-a.eb .ebg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rental-a.eb .ebg svg, .rental-a.eb .ebg-pop svg { display: block; flex-shrink: 0; }
.rental-a.eb .ebg .ebg-ico, .rental-a.eb .ebg-pop .ebg-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rental-a.eb .ebg-go .ra-ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ----- the two blocks */
.rental-a.eb .ebg-block { --g-bg: #eafafd; --g-line: #8cc4d8; --g-ring: #b4d3e3;
  min-width: 0; padding: 18px 14px 20px; border: 1.5px solid var(--g-line); border-radius: 20px; background: var(--g-bg); color: var(--c-ink); }
.rental-a.eb .ebg-block--past { --g-bg: #f2f5f7; --g-line: #c3cdd5; --g-ring: #d3dbe1; }
.rental-a.eb .ebg-block__head, .rental-a.eb .ebg-soon__head { display: flex; align-items: center; gap: 10px; }
.rental-a.eb .ebg-block__icon { width: 30px; height: 30px; }
.rental-a.eb .ebg-block__title { flex: 1 1 auto; min-width: 0; font-size: 20px; line-height: 1.45; }
.rental-a.eb .ebg-block__count { flex: 0 0 auto; padding: 1px 11px; border-radius: 999px; background: var(--c-ink); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.rental-a.eb .ebg-block__desc { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--c-text); }
.rental-a.eb .ebg-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; margin-top: 14px; }
.rental-a.eb .ebg-cell { min-width: 0; }
.rental-a.eb .ebg-cell[hidden], .rental-a.eb .ebg-kind[hidden], .rental-a.eb .ebg-empty[hidden] { display: none; }
.rental-a.eb .ebg-empty { margin-top: 14px; padding: 18px 16px; border: 1.5px dashed var(--g-line); border-radius: 16px; background: #fff; font-size: 16px; line-height: 1.6; color: var(--c-text); }
/* 即將開賣／待確認: the last part of the cyan box, under a dashed line */
.rental-a.eb .ebg-soon { margin-top: 22px; padding-top: 16px; border-top: 1.5px dashed var(--g-line); }
.rental-a.eb .ebg-soon__title { flex: 1 1 auto; min-width: 0; font-size: 18px; line-height: 1.45; }
.rental-a.eb .ebg-block__count--soon { background: #5d7488; }

/* ----- one card: the summary is the short card; the whole card opens the window */
.rental-a.eb .ebg-card {
  display: block; border-radius: 16px; background: #fff; box-shadow: 0 14px 28px -22px rgba(23, 55, 90, .5), 0 0 0 1.5px var(--c-edge);
  transition: box-shadow .3s;
}
.rental-a.eb .ebg-sum {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 12px;
  border-radius: 16px; cursor: pointer; list-style: none; color: var(--c-ink);
}
/* a closed card's rows are not laid out (coordinator 11/09, perf): Chrome lays a closed <details>' content out when it reads the
   whole page after load (19k nodes); the data stays in the HTML (search engines; the window reads it), an open card shows it */
.rental-a.eb .ebg-card:not([open]) > .ebg-body { display: none; }
.rental-a.eb .ebg-sum::-webkit-details-marker { display: none; }
.rental-a.eb .ebg-sum::marker { content: ""; }
.rental-a.eb .ebg-sum:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.rental-a.eb .ebg-card:has(> .ebg-sum:hover), .rental-a.eb .ebg-card[open] {
  box-shadow: 0 16px 30px -20px rgba(23, 55, 90, .55), 0 0 0 2px var(--c-blue);
}
.rental-a.eb .ebg-logo {
  display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden;
  border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--g-ring, #b4d3e3);
}
.rental-a.eb .ebg-logo img { display: block; width: auto; height: auto; max-width: 46px; max-height: 36px; object-fit: contain; }
.rental-a.eb .ebg-logo--long img { max-width: 52px; max-height: 28px; }
.rental-a.eb .ebg-logo--wide img { max-width: 56px; max-height: 20px; }
/* 神立 and 湯澤公園 have white logos: their brand colours behind them, as on the resort introduction page */
.rental-a.eb .ebg-logo--red { background: #fd0000; box-shadow: none; }
.rental-a.eb .ebg-logo--blue { background: #06c; box-shadow: none; }
.rental-a.eb .ebg-main { display: flex; flex-direction: column; min-width: 0; }
/* name and badge share a row; when both do not fit the badge drops under the name instead of the name breaking */
.rental-a.eb .ebg-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; column-gap: 8px; row-gap: 2px; }
.rental-a.eb .ebg-name { min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: .02em; }
.rental-a.eb .ebg-badge {
  display: inline-flex; align-items: center; flex: none; margin-top: 1px; padding: 1px 10px; border: 1.5px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.rental-a.eb .ebg-badge--now { background: var(--eb-on-bg); border-color: var(--eb-on-line); color: var(--eb-on); }
.rental-a.eb .ebg-badge--soon { background: #e8f0fb; border-color: #c4d6ef; color: #2f5687; }
.rental-a.eb .ebg-badge--past { background: var(--eb-end-bg); border-color: var(--eb-end-line); color: var(--eb-end); }
.rental-a.eb .ebg-top .eb-status { margin-top: 1px; }
.rental-a.eb .ebg-ja { display: block; margin-top: 2px; }
/* the lowest price (+ which ticket it is) and the nearest deadline; the open icon sits in the bottom right corner */
.rental-a.eb .ebg-pd { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 2px; margin-top: 4px; }
.rental-a.eb .ebg-price { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.rental-a.eb .ebg-price__k { align-self: center; padding: 0 7px; border-radius: 6px; background: #fde8ee; color: var(--c-red); font-size: 15px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.rental-a.eb .ebg-yen { font-size: 28px; font-weight: 900; line-height: 1.25; letter-spacing: .01em; }
.rental-a.eb .ebg-price__q { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.rental-a.eb .ebg-sub { margin-left: 4px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--c-text); }
/* 📅 最近截止 11/30（季票）: the bracket may drop to the next line, nothing breaks inside a word; it keeps clear of
   the open icon in the card's corner */
.rental-a.eb .ebg-due { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; padding-right: 40px; font-size: 17px; font-weight: 700; line-height: 1.45; }
.rental-a.eb .ebg-due__k, .rental-a.eb .ebg-due__w { font-size: 15px; font-weight: 400; color: var(--c-muted); white-space: nowrap; }
.rental-a.eb .ebg-due__w:empty { display: none; }
.rental-a.eb .ebg-due__g { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rental-a.eb .ebg-counts { display: block; margin-top: 2px; padding-right: 40px; font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--c-text); }
/* 一日券 11・多日／套票 19・季票 2 at the top of the list (each item on one line) */
.rental-a.eb .ebg-kinds { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--c-muted); }
.rental-a.eb .ebg-k { white-space: nowrap; }
.rental-a.eb .ebg-open { position: absolute; right: 12px; bottom: 8px; width: 32px; height: 32px; }

/* ----- what the card holds (folded out in the card without JS; copied into the window with JS) */
.rental-a.eb .ebg-body { margin: 0 10px; padding: 12px 0 8px; border-top: 1.5px dashed var(--ra-line-2); }
.rental-a.eb .ebg-kind + .ebg-kind { margin-top: 16px; }
.rental-a.eb .ebg-kind__t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--c-ink); }
.rental-a.eb .ebg-kind__n { padding: 0 9px; border-radius: 999px; background: #e3eef5; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--c-ink); }
.rental-a.eb .ebg-tl { margin: 4px 0 0; padding: 0; list-style: none; }
.rental-a.eb .ebg-t { display: grid; gap: 3px; min-width: 0; padding: 12px 0; border-top: 1px solid #dde8ee; font-size: 15px; line-height: 1.6; color: var(--c-text); }
.rental-a.eb .ebg-tl > .ebg-t:first-child { border-top: 0; padding-top: 6px; }
.rental-a.eb .ebg-t p { margin: 0; }
.rental-a.eb .ebg-t__name { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--c-ink); overflow-wrap: anywhere; }
.rental-a.eb .ebg-t__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.rental-a.eb .ebg-t__pp { white-space: nowrap; }
.rental-a.eb .ebg-t__yen { font-size: 19px; }
.rental-a.eb .ebg-t__unit { margin-left: 1px; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.rental-a.eb .ebg-t__orig, .rental-a.eb .ebg-t__child { color: var(--c-muted); white-space: nowrap; }
.rental-a.eb .ebg-t__dates { display: flex; flex-wrap: wrap; column-gap: 12px; }
.rental-a.eb .ebg-t__note { overflow-wrap: anywhere; }
.rental-a.eb .ebg-t__state { display: none; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rental-a.eb .ebg-st { padding: 0 9px; border-radius: 999px; background: #e8f0fb; color: #2f5687; font-weight: 700; white-space: nowrap; }
/* channel (平台 tagged when it is a ticket platform) and the button that opens the ticket's page */
.rental-a.eb .ebg-t__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 4px; }
.rental-a.eb .ebg-t__ch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; font-weight: 700; color: var(--c-ink); }
.rental-a.eb .ebg-t__chn { min-width: 0; overflow-wrap: anywhere; }
.rental-a.eb .ebg-go { flex: none; gap: 6px; min-height: 40px; padding: 4px 16px; font-size: 15px; white-space: nowrap; }
.rental-a.eb .ebg-go__src { display: none; }
/* the regular (not early-bird) tickets of the resort, for comparison only */
.rental-a.eb .ebg-ref { margin-top: 16px; padding: 10px 14px 6px; border: 1.5px dashed var(--ra-line-2); border-radius: 14px; background: #f6f9fb; font-size: 15px; line-height: 1.6; color: var(--c-text); }
.rental-a.eb .ebg-ref__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 16px; font-weight: 700; color: var(--c-ink); }
.rental-a.eb .ebg-ref__s { font-size: 15px; font-weight: 400; color: var(--c-muted); }
.rental-a.eb .ebg-ref__list { margin: 4px 0 0; padding: 0; list-style: none; }
.rental-a.eb .ebg-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 6px 0; border-top: 1px dotted #c9d8e2; }
.rental-a.eb .ebg-r__name { grid-column: 1; min-width: 0; overflow-wrap: anywhere; color: var(--c-ink); }
.rental-a.eb .ebg-r__ch { grid-column: 1; color: var(--c-muted); overflow-wrap: anywhere; }
.rental-a.eb .ebg-r__p { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.rental-a.eb .ebg-resort { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin: 8px 0 0; }
/* owner 11/07「這個放在雪票的視窗右下角」: the update date, grey small type, right-aligned on the intro link's line (the next
   line, still right, when it does not fit) */
.rental-a.eb .ebg-upd { margin-left: auto; color: var(--c-muted); font-size: 13px; line-height: 1.6; white-space: nowrap; }
.rental-a.eb .ebg-resort a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--c-blue); font-size: 16px; font-weight: 700; text-underline-offset: 3px; }

/* ----- 即將開賣／待確認: the ticket says why it is here */
.rental-a.eb [data-zone="soon"] .ebg-t__state, .rental-a.eb .ebg-z-soon .ebg-t__state { display: flex; }

/* ----- 歷史販售: grey cards; a ticket keeps its name, channel, price then, sale dates, why it ended and the page it was on */
.rental-a.eb .ebg-card--past { background: #f6f8f9; box-shadow: 0 0 0 1.5px var(--g-ring); }
.rental-a.eb .ebg-card--past .ebg-logo, .rental-a.eb .ebg-z-past .ebg-logo { filter: grayscale(1); opacity: .75; }
.rental-a.eb .ebg-card--past .ebg-price__k, .rental-a.eb .ebg-z-past .ebg-price__k { background: #e9edf0; color: #5d6f7f; }
.rental-a.eb .ebg-card--past .eb-price, .rental-a.eb .ebg-z-past .eb-price { color: #5d6f7f; }
.rental-a.eb .ebg-card--past .ebg-open circle { fill: #c9d3dc; }
.rental-a.eb [data-zone="past"] .ebg-t__use, .rental-a.eb [data-zone="past"] .ebg-t__note,
.rental-a.eb .ebg-z-past .ebg-t__use, .rental-a.eb .ebg-z-past .ebg-t__note { display: none; }
.rental-a.eb [data-zone="past"] .ebg-t__state, .rental-a.eb .ebg-z-past .ebg-t__state { display: flex; }
.rental-a.eb [data-zone="past"] .ebg-st, .rental-a.eb .ebg-z-past .ebg-st { background: #eef1f3; color: #4d6174; }
.rental-a.eb [data-zone="past"] .ebg-t[data-st="sold-out"] .ebg-st, .rental-a.eb .ebg-z-past .ebg-t[data-st="sold-out"] .ebg-st { background: var(--eb-end-bg); color: var(--eb-end); }
.rental-a.eb [data-zone="past"] .ebg-go, .rental-a.eb .ebg-z-past .ebg-go {
  justify-content: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px;
}
.rental-a.eb [data-zone="past"] .ebg-go:hover, .rental-a.eb .ebg-z-past .ebg-go:hover { background: none; color: var(--c-ink); }
.rental-a.eb [data-zone="past"] .ebg-go__buy, .rental-a.eb .ebg-z-past .ebg-go__buy { display: none; }
.rental-a.eb [data-zone="past"] .ebg-go__src, .rental-a.eb .ebg-z-past .ebg-go__src { display: inline; }

/* ----- not announced yet: nothing to open, so a plain card with the note in it */
.rental-a.eb .ebg-card--tba { box-shadow: 0 0 0 1.5px #d3dbe1; }
.rental-a.eb .ebg-card--tba .ebg-sum { cursor: auto; }
.rental-a.eb .ebg-card--tba .ebg-logo { box-shadow: inset 0 0 0 1.5px #d3dbe1; }
.rental-a.eb .ebg-card--tba .ebg-logo img { filter: grayscale(1); opacity: .8; }
.rental-a.eb .ebg-tba { margin: 0 12px; padding: 10px 2px 14px; border-top: 1.5px dashed #d3dbe1; font-size: 15px; line-height: 1.6; color: var(--c-text); }

/* narrowest phones (list under 340px: 360 / 375 screens): a smaller logo and a little less room around */
@container ebg (max-width: 339px) {
  .rental-a.eb .ebg-block { padding-inline: 10px; }
  .rental-a.eb .ebg-sum { grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; padding: 12px 10px; }
  .rental-a.eb .ebg-logo { width: 56px; height: 56px; }
  .rental-a.eb .ebg-logo img { max-width: 40px; max-height: 32px; }
  .rental-a.eb .ebg-logo--long img { max-width: 46px; max-height: 24px; }
  .rental-a.eb .ebg-logo--wide img { max-width: 48px; max-height: 18px; }
  .rental-a.eb .ebg-body, .rental-a.eb .ebg-tba { margin-inline: 8px; }
  .rental-a.eb .ebg-open { right: 10px; }
}
/* tablets (one wide card per row): price and deadline on one line, the open icon at the right, centred */
@container ebg (min-width: 600px) {
  .rental-a.eb .ebg-block { padding: 20px 22px 22px; }
  .rental-a.eb .ebg-block__title { font-size: 21px; }
  .rental-a.eb .ebg-sum { padding: 12px 64px 12px 12px; column-gap: 16px; }
  .rental-a.eb .ebg-price { flex: 0 1 auto; }
  .rental-a.eb .ebg-due, .rental-a.eb .ebg-counts { padding-right: 0; }
  .rental-a.eb .ebg-open { top: calc(50% - 16px); bottom: auto; right: 18px; }
  .rental-a.eb .ebg-body { margin: 0 16px 0 92px; }
  .rental-a.eb .ebg-tba { margin: 0 16px 0 92px; }
}
/* wide screens: two, then three cards per row; with JS (cards never fold out) the cards of a row are one height */
@container ebg (min-width: 860px) {
  .rental-a.eb .ebg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .rental-a.eb .ebg-sum { padding: 12px; column-gap: 12px; }
  .rental-a.eb .ebg-price { flex: 1 0 100%; }
  .rental-a.eb .ebg-due, .rental-a.eb .ebg-counts { padding-right: 40px; }
  .rental-a.eb .ebg-open { top: auto; bottom: 8px; right: 12px; }
  .rental-a.eb .ebg-body { margin: 0 12px; }
  .rental-a.eb .ebg-tba { margin: 0 12px; }
  .rental-a.eb .ebg-ready .ebg-grid { align-items: stretch; }
  .rental-a.eb .ebg-ready .ebg-card, .rental-a.eb .ebg-ready .ebg-card > .ebg-sum { height: 100%; }
  .rental-a.eb .ebg-ready .ebg-card > .ebg-sum { box-sizing: border-box; align-content: start; }
}
@container ebg (min-width: 1060px) {
  .rental-a.eb .ebg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .rental-a.eb .ebg-card { transition: none; }
}

/* ===================================================================== the window (style F2 = the coaches page's) */
html.ebg-dialog-open { overflow: hidden; scrollbar-gutter: stable; }
.rental-a.eb .ebg-dialog {
  padding: 0; border: 1px solid #d4e6ec; border-radius: 22px; width: min(620px, calc(100% - 32px)); max-height: 88dvh;
  background: #f8fcff; color: #24445f; overflow: auto; overscroll-behavior: contain; box-shadow: 0 30px 90px #17354950;
}
.rental-a.eb .ebg-dialog::backdrop { background: #12364cbd; backdrop-filter: blur(5px); }
.rental-a.eb .ebg-dialog__close {
  float: right; position: sticky; top: 14px; z-index: 2; margin: 14px 14px -58px 0; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; background: #fff; border: 1px solid #d2e1e9; border-radius: 50%;
  color: #28516a; font: 30px/1 system-ui, sans-serif; cursor: pointer;
}
.rental-a.eb .ebg-dialog__close:hover { background: #eef6fa; }
.rental-a.eb .ebg-dialog__close:focus-visible { outline: 3px solid var(--ra-ink); outline-offset: 2px; }

/* what is in it: the card's head on its block colour, then the tickets */
.rental-a.eb .ebg-pop { --g-bg: #eafafd; --g-ring: #b4d3e3; --c-ink: #17375a; --c-text: #3a5167; --c-muted: #5d7488; --c-red: #c81e4a; --c-blue: #1d6aa8; }
.rental-a.eb .ebg-pop.ebg-z-soon { --g-bg: #eef4fb; --g-ring: #c4d6ef; }
.rental-a.eb .ebg-pop.ebg-z-past { --g-bg: #f2f4f6; --g-ring: #d3dbe1; }
.rental-a.eb .ebg-pop__head {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: start;
  padding: 24px 72px 20px 24px; background: var(--g-bg); border-bottom: 1.5px dashed var(--ra-line-2); color: var(--c-ink);
}
.rental-a.eb .ebg-pop .ebg-logo { width: 76px; height: 76px; }
.rental-a.eb .ebg-pop .ebg-logo img { max-width: 54px; max-height: 42px; }
.rental-a.eb .ebg-pop .ebg-logo--long img { max-width: 62px; max-height: 34px; }
.rental-a.eb .ebg-pop .ebg-logo--wide img { max-width: 66px; max-height: 24px; }
.rental-a.eb .ebg-pop__main { min-width: 0; }
.rental-a.eb .ebg-pop__top { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; }
.rental-a.eb .ebg-pop__name { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; color: var(--c-ink); }
.rental-a.eb .ebg-pop .ebg-ja { margin-top: 4px; }
.rental-a.eb .ebg-pop .ebg-pd { margin-top: 6px; }
.rental-a.eb .ebg-pop .ebg-price { flex: 0 1 auto; }
.rental-a.eb .ebg-pop .ebg-due, .rental-a.eb .ebg-pop .ebg-counts { padding-right: 0; }
.rental-a.eb .ebg-pop__body { padding: 18px 24px 22px; }
.rental-a.eb .ebg-pop .ebg-kind__t { font-size: 18px; }
.rental-a.eb .ebg-pop .ebg-t { font-size: 15px; }
.rental-a.eb .ebg-pop .ebg-resort { margin-top: 10px; }

/* phones: the coaches window's phone size */
@media (max-width: 600px) {
  .rental-a.eb .ebg-dialog { width: calc(100% - 24px); max-height: 90dvh; border-radius: 18px; }
  .rental-a.eb .ebg-pop__head { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 20px 64px 16px 16px; }
  .rental-a.eb .ebg-pop .ebg-logo { width: 64px; height: 64px; }
  .rental-a.eb .ebg-pop .ebg-logo img { max-width: 46px; max-height: 36px; }
  .rental-a.eb .ebg-pop .ebg-logo--long img { max-width: 52px; max-height: 28px; }
  .rental-a.eb .ebg-pop .ebg-logo--wide img { max-width: 56px; max-height: 20px; }
  .rental-a.eb .ebg-pop__name { font-size: 22px; }
  .rental-a.eb .ebg-pop .ebg-price { flex: 1 0 100%; }
  .rental-a.eb .ebg-pop__body { padding: 14px 16px 18px; }
}
@media (max-width: 374px) {
  .rental-a.eb .ebg-pop__head { grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; padding-left: 14px; }
  .rental-a.eb .ebg-pop .ebg-logo { width: 56px; height: 56px; }
  .rental-a.eb .ebg-pop .ebg-logo img { max-width: 40px; max-height: 32px; }
  .rental-a.eb .ebg-pop .ebg-logo--long img { max-width: 46px; max-height: 24px; }
  .rental-a.eb .ebg-pop .ebg-logo--wide img { max-width: 48px; max-height: 18px; }
  .rental-a.eb .ebg-pop__body { padding-left: 14px; padding-right: 14px; }
}

/* ===================================================================== owner 11/06: simpler tickets, kinds as tabs */
/* a ticket: its name, then 原價 / 特價 / 販售截止 on one line where it fits, then the shop button (words = the channel) */
.rental-a.eb .ebg-t__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 2px 0 0; }
.rental-a.eb .ebg-f { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rental-a.eb .ebg-f dt { color: var(--c-muted); font-weight: 400; }
.rental-a.eb .ebg-f dd { margin: 0; font-weight: 700; color: var(--c-ink); }
.rental-a.eb .ebg-f--orig dd { font-weight: 400; color: var(--c-text); }
.rental-a.eb .ebg-t__buy { justify-content: flex-start; gap: 6px 8px; margin-top: 6px; }
.rental-a.eb .ebg-go { max-width: 100%; }
.rental-a.eb .ebg-go__k { display: none; }
.rental-a.eb [data-zone="past"] .ebg-go__k, .rental-a.eb .ebg-z-past .ebg-go__k { display: inline; }
.rental-a.eb [data-zone="past"] .ebg-go, .rental-a.eb .ebg-z-past .ebg-go { white-space: normal; text-align: left; }
.rental-a.eb [data-zone="past"] .ebg-go .eb-btn__t, .rental-a.eb .ebg-z-past .ebg-go .eb-btn__t { overflow-wrap: anywhere; }
/* the tab bar (rental.css .ra-tabs / .ra-tab), wrapping to a second row when the kinds do not fit */
.rental-a.eb .ebg-pop .ebg-tabs { flex-wrap: wrap; margin: 0 0 12px; border-radius: 24px; }
.rental-a.eb .ebg-pop .ebg-tabs .ra-tab { flex: 1 1 auto; padding: 6px 12px; white-space: nowrap; }
.rental-a.eb .ebg-pop.is-tabs .ebg-kind__t { display: none; }
.rental-a.eb .ebg-pop.is-tabs .ebg-kind + .ebg-kind { margin-top: 0; }
.rental-a.eb .ebg-pop.is-tabs .ebg-tl { margin-top: 0; }

/* ===================================================================== owner 11/06 (2nd round): F2's three blocks, one card per
   resort; 歷史販售 at the bottom of the window; 電子票／實體票 tags in the same style as 平台 */
.rental-a.eb .ebg-block--official { --g-bg: #eafafd; --g-line: #8cc4d8; --g-ring: #b4d3e3; }
.rental-a.eb .ebg-block--platform { --g-bg: #fff6d6; --g-line: #e5c469; --g-ring: #ecd594; }
.rental-a.eb .ebg-block--tba { --g-bg: #f2f5f7; --g-line: #c3cdd5; --g-ring: #d3dbe1; }
.rental-a.eb .ebg-badge { background: var(--eb-on-bg); border-color: var(--eb-on-line); color: var(--eb-on); }
/* a resort with nothing left on sale: grey, 早鳥已結束, no price; its window shows only 歷史販售 */
.rental-a.eb .is-over .ebg-card { background: #f6f8f9; box-shadow: 0 0 0 1.5px #d3dbe1; }
.rental-a.eb .is-over .ebg-logo, .rental-a.eb .ebg-z-over .ebg-logo { filter: grayscale(1); opacity: .75; }
.rental-a.eb .is-over .ebg-badge, .rental-a.eb .ebg-z-over .ebg-badge { background: #eef1f3; border-color: #d3dbe1; color: #4d6174; }
.rental-a.eb .is-over .ebg-pd { display: none; }
.rental-a.eb .is-over .ebg-open circle { fill: #c9d3dc; }
.rental-a.eb .ebg-pop.ebg-z-over { --g-bg: #f2f4f6; }
.rental-a.eb .ebg-t__state, .rental-a.eb .ebg-t__short { display: none; }
/* 歷史販售: under a dashed line at the bottom, one row a ticket — tags, platform, a short label, the price then */
.rental-a.eb .ebg-hist { margin-top: 18px; padding-top: 12px; border-top: 1.5px dashed var(--ra-line-2); }
.rental-a.eb .ebg-hist[hidden] { display: none; }
.rental-a.eb .ebg-hist__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--c-ink); }
.rental-a.eb .ebg-hist__s { font-size: 15px; font-weight: 400; color: var(--c-muted); }
.rental-a.eb .ebg-hist .ebg-t { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 0; }
.rental-a.eb .ebg-hist .ebg-t__name, .rental-a.eb .ebg-hist .ebg-f--orig, .rental-a.eb .ebg-hist .ebg-f--end, .rental-a.eb .ebg-hist .ebg-f dt { display: none; }
.rental-a.eb .ebg-hist .ebg-t__buy { order: 1; flex: 0 1 auto; min-width: 0; margin: 0; }
.rental-a.eb .ebg-hist .ebg-t__short { order: 2; display: inline; color: var(--c-muted); }
.rental-a.eb .ebg-hist .ebg-t__facts { order: 3; margin: 0 0 0 auto; }
.rental-a.eb .ebg-hist .eb-price { color: #4d6174; }
.rental-a.eb .ebg-hist .ebg-go {
  min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--c-ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--ra-line-2); text-underline-offset: 3px; white-space: normal; text-align: left;
}
.rental-a.eb .ebg-hist .ebg-go:hover { background: none; color: var(--c-blue); }

/* the longest shop name (Murasaki Sports／ムラサキスポーツ) keeps its button on one line on 360 / 375 phones */
.rental-a.eb .ebg-go { gap: 4px; padding-left: 10px; padding-right: 10px; }
.rental-a.eb .ebg-go .ra-ico { width: 14px; height: 14px; }
@container ebg (max-width: 339px) { .rental-a.eb .ebg-body { margin-inline: 0; } }
@media (max-width: 374px) { .rental-a.eb .ebg-pop__body { padding-left: 10px; padding-right: 10px; } }

/* ===================================================================== owner 11/06 (4th round, his mockup): one line a ticket */
.rental-a.eb .ebg-t { gap: 2px; }
.rental-a.eb .ebg-t__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.rental-a.eb .ebg-t__p, .rental-a.eb .ebg-t__e { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.rental-a.eb .ebg-t__k { color: var(--c-muted); font-size: 15px; font-weight: 400; }
.rental-a.eb .ebg-t__yen, .rental-a.eb .ebg-r__yen { font-size: 19px; font-weight: 800; white-space: nowrap; }
.rental-a.eb .ebg-r__yen { color: var(--c-ink); }
.rental-a.eb .ebg-t__unit { margin-left: -4px; }
.rental-a.eb .ebg-t__fee, .rental-a.eb .ebg-t__end { font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.rental-a.eb .ebg-t__row .ebg-go { margin-left: auto; }
/* the line under it: 官方 (blue words) or the 電子票／實體票（寄送） tag, and a short word when the row needs one */
.rental-a.eb .ebg-t__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 2px 0 0; font-size: 15px; line-height: 1.6; }
.rental-a.eb .ebg-t__tags:empty { display: none; }
.rental-a.eb .ebg-off { color: var(--c-blue); font-weight: 700; }
.rental-a.eb .ebg-t__d { color: var(--c-text); }
.rental-a.eb .ebg-t__kd { display: none; }
/* 一般票價 rows look the same (no early-bird red) */
.rental-a.eb .ebg-r { display: grid; gap: 2px; padding: 10px 0; border-top: 1px dotted #c9d8e2; grid-template-columns: none; }
.rental-a.eb .ebg-r[hidden], .rental-a.eb .ebg-t[hidden], .rental-a.eb .ebg-ref[hidden] { display: none; }
.rental-a.eb .ebg-ref { margin-top: 12px; }
/* the second row of tabs (全部／電子票／實體票): one size smaller and quieter than the kind tabs */
.rental-a.eb .ebg-pop .ebg-filter { display: inline-flex; flex-wrap: wrap; gap: 3px; margin: 0 0 6px; padding: 3px; border-radius: 22px; background: #f1f5f8; }
.rental-a.eb .ebg-pop .ebg-filter .ra-tab { flex: 0 1 auto; min-height: 36px; padding: 3px 12px; font-size: 15px; white-space: nowrap; }
.rental-a.eb .ebg-pop .ebg-filter .ra-tab[aria-selected="true"] { background: #d6e4ee; color: var(--ra-ink); }
/* 歷史販售 rows: platform + price, the tag line keeps 電子／實體 and the kind */
.rental-a.eb .ebg-hist .ebg-t__e, .rental-a.eb .ebg-hist .ebg-t__k { display: none; }
.rental-a.eb .ebg-hist .ebg-t__kd { display: inline; color: var(--c-muted); }
.rental-a.eb .ebg-hist .ebg-t__row .ebg-go { order: -1; margin-left: 0; }
.rental-a.eb .ebg-hist .ebg-t__p { margin-left: auto; }
.rental-a.eb .ebg-hist .ebg-t { padding: 8px 0; }
.rental-a.eb .ebg-t__pn { color: var(--c-muted); font-size: 15px; white-space: nowrap; }
.rental-a.eb .ebg-t__sl { color: var(--c-muted); font-size: 15px; white-space: nowrap; }   /* owner 11/08: a row's sale status, after its price */
/* phones: 特價 and the button share the first line, 販售截止 drops under them (owner 11/06) */
@media (max-width: 600px) { .rental-a.eb .ebg-pop .ebg-t__e { order: 3; flex-basis: 100%; } }
@container ebg (max-width: 599px) { .rental-a.eb .ebg-t__e { order: 3; flex-basis: 100%; } }

/* ===================================================================== owner 11/07「做一點裝飾」: clean, not themed */
/* each ticket a light card: white, a 1px line, 12px corners, a faint shadow, 8px apart; a 4px bar on the left in the colour of
   its kind (電子票 teal, 實體票 amber, both half and half, not known grey) */
.rental-a.eb .ebg-kind .ebg-tl { display: grid; gap: 8px; margin: 6px 0 0; }
.rental-a.eb .ebg-kind .ebg-tl:not(.ebg-hist__list) > .ebg-t, .rental-a.eb .ebg-kind .ebg-tl:not(.ebg-hist__list) > .ebg-t:first-child {
  position: relative; overflow: hidden; padding: 10px 12px 10px 16px; border: 1px solid #dfe8ef; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 3px rgba(23, 55, 90, .07);
}
.rental-a.eb .ebg-kind .ebg-tl:not(.ebg-hist__list) > .ebg-t::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #c9d3dc; }
.rental-a.eb .ebg-kind .ebg-tl:not(.ebg-hist__list) > .ebg-t[data-media="e"]::before { background: #2bb3c4; }
.rental-a.eb .ebg-kind .ebg-tl:not(.ebg-hist__list) > .ebg-t[data-media="p"]::before { background: #e2a72a; }
.rental-a.eb .ebg-kind .ebg-tl:not(.ebg-hist__list) > .ebg-t[data-media="ep"]::before { background: linear-gradient(#2bb3c4 50%, #e2a72a 50%); }
/* 一般票價: lighter cards, no shadow, no bar — for comparing, not the main thing */
.rental-a.eb .ebg-ref { padding: 0; border: 0; background: none; }
.rental-a.eb .ebg-ref__list { display: grid; gap: 6px; margin-top: 6px; }
.rental-a.eb .ebg-ref__list > .ebg-r { padding: 8px 12px; border: 1px solid #e3eaf0; border-radius: 12px; background: #f5f8fa; }
/* small icons in the tags and the labels, in the text's colour */
.rental-a.eb .ebg-i { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rental-a.eb .ebg-off { display: inline-flex; align-items: center; gap: 3px; padding: 0 8px; border: 1px solid #b7d0e8; border-radius: 999px; background: #eaf3fb; line-height: 1.5; }
.rental-a.eb .ebg-media { display: inline-flex; align-items: center; gap: 3px; }
.rental-a.eb .ebg-media--e { border-color: #9ad8e1; background: #e2f6f8; color: #0e5c66; }
/* 特價 (and the guests' 前売) as a small red-lined pill; a calendar before 販售截止 */
.rental-a.eb .ebg-t__k--sp { padding: 0 8px; border: 1px solid #f0a8ba; border-radius: 999px; color: var(--c-red); font-weight: 700; line-height: 1.45; }
.rental-a.eb .ebg-t__e .ebg-t__k { display: inline-flex; align-items: center; gap: 3px; }
/* 限 tags (who may buy: 限日本居住者／限上季持有者／限個人番號卡): a muted red with a lock, in the same row as the other tags */
.rental-a.eb .ebg-lim { display: inline-flex; align-items: center; gap: 3px; border-color: #e6c2cb; background: #fbeff2; color: #8a2b46; }

/* ===================================================================== owner 11/07「選3」: the window's timeline (was trial page 3) */
/* tags as capsules with a background (owner「顯示【電子票】【紙本票】【官網】【17 場共通(也要有背景)】」): the short word too */
.rental-a.eb .ebg-t__d { display: inline-block; padding: 0 7px; border: 1px solid #d9e2e8; border-radius: 6px; background: #eef2f5; color: #3a5167; font-size: 14px; font-weight: 700; line-height: 1.55; }
/* a ticket with no published deadline sits in 一般票價 and keeps its 特價 (red) */
.rental-a.eb .ebg-r__yen--sp { color: var(--c-red); }
/* 沒有早鳥票 (a card with 一般票價 only): what the resort has announced, in the card and above the window's tabs */
.rental-a.eb .ebg-tba--in { margin: 0 0 10px; padding: 0; border: 0; }
.rental-a.eb .ebg-pop .ebg-tba { margin: 0 0 12px; padding: 0; border: 0; }
/* the timeline: per kind, a dot a deadline (nearest first, 還剩 N 天), the line ending at 一般票價; 有資格限制 under
   the line; a row: the price (+ its label where it is not 特價), the shop's button, then the card row's own tag line */
.rental-a.eb .ebg-pop [data-ebg-list] [hidden] { display: none !important; }
.rental-a.eb .ebg-pop [data-ebg-list] .ra-ico { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rental-a.eb .ebg-vp { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; min-width: 0; }
.rental-a.eb .ebg-vp__k { align-self: center; padding: 0 7px; border: 1px solid #f0a8ba; border-radius: 999px; color: var(--c-red); font-size: 14px; font-weight: 700; line-height: 1.45; }
.rental-a.eb .ebg-vp__k--reg { padding: 0; border: 0; color: var(--c-muted); font-size: 15px; font-weight: 400; }
.rental-a.eb .ebg-vp__y { color: var(--c-red); font-size: 18px; font-weight: 800; line-height: 1.3; }
.rental-a.eb .ebg-vp--reg .ebg-vp__y { color: var(--c-ink); }
.rental-a.eb .ebg-vp__y .ebg-nw { white-space: nowrap; }   /* owner 11/08: prices joined by 「、」 — each price (a range) whole */
/* owner 11/08 (版面): a line's price that may break — prices joined by 「、」 (季票、多日／套票: a line for several people), a
   range ¥X〜Y — is text: its label beside the first price (never on a row of its own), the prices breaking only after 「、」
   (a range after 〜), a row after the first from the left edge; its unit, 依日期, 原價 after the last price as before */
.rental-a.eb .ebg-mp__v > .ebg-vp:has(> .ebg-vp__y > wbr) { display: block; font-size: 18px; line-height: 1.3; text-wrap: wrap; }   /* wrap: as many prices on the first row as fit (not li's pretty) */
.rental-a.eb .ebg-mp__v > .ebg-vp:has(> .ebg-vp__y > wbr) > .ebg-vp__k { float: left; margin: 1px 5px 0 0; }
.rental-a.eb .ebg-mp__v > .ebg-vp:has(> .ebg-vp__y > wbr) > :is(.ebg-vp__u, .ebg-vp__f, .ebg-vp__n, .ebg-vp__o) { display: inline-block; margin-left: 5px; }
/* owner 11/08 (版面): a short-word capsule's words each whole (「單一雪場」「12/1 起」「60 歲以上」), breaking only after 「・」
   「、」「〜」 (the script and the page builder put each word in an ebg-nw) */
.rental-a.eb .ebg-t__d .ebg-nw { white-space: nowrap; }
/* owner 11/08 (版面): a 限 capsule longer than its row (「限季票或新大谷俱樂部（NOC）會員卡持有者」 on a 360–390px phone) wraps in
   its card instead of running out of it (a capsule that fits as before) */
.rental-a.eb .ebg-v3__top > .ebg-lim, .rental-a.eb .ebg-hist__top > .ebg-lim, .rental-a.eb .ebg-mp__x > .ebg-lim, .rental-a.eb .ebg-t__tags > .ebg-lim { flex-shrink: 1; min-width: 0; }
/* owner 11/08 (版面): a scrolling 現場票價 table keeps what it holds — its cells' screen-reader words (「沒有」, absolutely placed)
   inside it too, so they never widen the window (the window scrolled sideways at 390px: 石打丸山 小時票) */
.rental-a.eb .ebg-otw { position: relative; }
.rental-a.eb .ebg-vp__u, .rental-a.eb .ebg-vp__f { color: var(--c-ink); font-size: 14px; font-weight: 700; }
.rental-a.eb .ebg-vp__n { color: var(--c-muted); font-size: 14px; white-space: nowrap; }
/* owner 11/08「12/7 開賣改在靠右」「這邊也是幾號結束不要自己一行」, his mockup one row (the price, the short word, … the status
   at the right): the status — the sale status (grey, like 依日期), 歷史販售's status capsule — of a line beside its 前往 (left of
   it) or at its right; of a card's top floated right of the price's row, the price and the short word flowing before it (the
   short word goes under only when the row is too narrow) */
.rental-a.eb .ebg-mp__s, .rental-a.eb .ebg-top__s { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.rental-a.eb .ebg-sale { color: var(--c-muted); font-size: 14px; font-weight: 400; white-space: nowrap; }
.rental-a.eb .ebg-v3__top:has(> .ebg-top__s), .rental-a.eb .ebg-hist__top:has(> .ebg-top__s) { display: block; }
.rental-a.eb .ebg-v3__top:has(> .ebg-top__s) > :not(.ebg-top__s), .rental-a.eb .ebg-hist__top:has(> .ebg-top__s) > :not(.ebg-top__s) { margin: 2px 8px 2px 0; vertical-align: middle; }
.rental-a.eb .ebg-top__s { float: right; min-height: 28px; margin: 0 0 0 10px; }
.rental-a.eb .ebg-ve { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text); font-size: 14px; white-space: nowrap; }
.rental-a.eb .ebg-v3 { position: relative; margin: 8px 0 0; padding: 0 0 0 28px; list-style: none; }
.rental-a.eb .ebg-v3::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 14px; width: 2px; border-radius: 2px; background: #cfe0ea; }
.rental-a.eb .ebg-v3__n { position: relative; }
.rental-a.eb .ebg-v3__n + .ebg-v3__n { margin-top: 16px; }
.rental-a.eb .ebg-v3__dot { position: absolute; left: -28px; top: 2px; width: 20px; height: 20px; box-sizing: border-box; border: 4px solid #2b8fc4; border-radius: 50%; background: #fff; }
.rental-a.eb .ebg-v3__n--reg .ebg-v3__dot, .rental-a.eb .ebg-v3__n--on .ebg-v3__dot { border-color: #8ea6b8; }   /* 一般票價, 現場票價: grey */
.rental-a.eb .ebg-v3__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0 0 8px; color: var(--c-ink); font-size: 16px; font-weight: 700; line-height: 1.5; }
.rental-a.eb .ebg-v3__date, .rental-a.eb .ebg-v3__reg { font-size: 18px; font-weight: 800; }
.rental-a.eb .ebg-v3__wd { color: var(--c-text); font-weight: 400; }
.rental-a.eb .ebg-v3__regs { margin-left: 4px; color: var(--c-muted); font-size: 15px; font-weight: 400; }
.rental-a.eb .ebg-v3__left { padding: 0 8px; border-radius: 999px; background: #fff2d9; color: #6b4300; font-size: 14px; font-weight: 700; }
.rental-a.eb .ebg-v3__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }   /* a card never wider than its list (a 現場票價 table turns or scrolls instead) */
.rental-a.eb .ebg-pop .ebg-v3w .ebg-v3__r {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 9px 10px 9px 12px;
  border: 1px solid #e3ebf1; border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.5;
}
.rental-a.eb .ebg-pop .ebg-v3w .ebg-v3__r.ebg-r { background: #f8fafc; --ebg-ot-bg: #f8fafc; }   /* --ebg-ot-bg: a scrolling 現場票價 table's kept column */
.rental-a.eb .ebg-v3__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.rental-a.eb .ebg-v3__tm { color: var(--c-ink); font-size: 14px; font-weight: 700; }
.rental-a.eb .ebg-v3__lim { margin-top: 18px; }
.rental-a.eb .ebg-v3__limh { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #8a2b46; font-size: 16px; font-weight: 700; }

/* ===================================================================== owner 11/07: 售價, 歷史販售 cards */
/* 售價 (「超過一般價就不是特價了」): the quiet look of 一般價, no red */
.rental-a.eb .ebg-t__yen--reg { color: var(--c-ink); }
/* 當時價 and the status capsule (已售完／M/D 結束／已結束) only in 歷史販售 */
.rental-a.eb .ebg-t__was, .rental-a.eb .ebg-t__st { display: none; }
/* 歷史販售 (「歷史販售 也要做排版」): the tickets' cards, greyed — grey card, thin line, no shadow, a grey bar; the shop a quiet
   link, 當時價 in grey, a status capsule, the tags desaturated */
.rental-a.eb .ebg-hist__t { font-size: 16px; }
.rental-a.eb .ebg-hist .ebg-hist__list { display: grid; gap: 6px; margin: 8px 0 0; }
/* owner 11/08「歷史預設摺疊」: in the window 歷史販售 starts folded — its title a button over the whole row, in the title's own
   type (the count too), an arrow down (up once open); 41px to tap without moving anything (padding taken back by
   the margin). The list opens with a short fade (.2s; none with reduced motion), folds at once; printed open */
.rental-a.eb .ebg-hist__btn {
  display: flex; align-items: baseline; width: 100%; margin: -9px 0; padding: 9px 0; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.rental-a.eb .ebg-hist__btn:focus-visible { outline: 3px solid var(--ra-ink); outline-offset: 2px; }
.rental-a.eb .ebg-hist__chev {
  flex: none; align-self: center; width: 16px; height: 16px; margin-left: 6px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease;
}
.rental-a.eb .ebg-hist.is-open .ebg-hist__chev { transform: rotate(180deg); }
.rental-a.eb .ebg-hist .ebg-hist__list[hidden] { display: none; }
.rental-a.eb .ebg-hist.is-open .ebg-hist__list { animation: ebg-hist-in .2s ease-out; }
@keyframes ebg-hist-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rental-a.eb .ebg-hist__chev { transition: none; }
  .rental-a.eb .ebg-hist.is-open .ebg-hist__list { animation: none; }
}
@media print {   /* !important: rental.css hides every [hidden] in the page with !important */
  .rental-a.eb .ebg-hist .ebg-hist__list[hidden] { display: grid !important; }
  .rental-a.eb .ebg-hist__chev { display: none; }
}
.rental-a.eb .ebg-hist .ebg-hist__list > .ebg-t {
  position: relative; display: block; padding: 8px 12px 8px 16px; border: 1px solid #e1e7ec; border-radius: 12px;
  background: #f4f6f8; box-shadow: none; overflow: hidden;
}
.rental-a.eb .ebg-hist .ebg-hist__list > .ebg-t::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #c3ccd4; }
.rental-a.eb .ebg-hist .ebg-t__row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.rental-a.eb .ebg-hist .ebg-t__row .ebg-go { order: 0; margin-left: 0; color: #4d6174; font-weight: 700; text-decoration-color: #c3ccd4; }
.rental-a.eb .ebg-hist .ebg-t__row .ebg-go:hover { color: var(--c-blue); }
.rental-a.eb .ebg-hist .ebg-t__st {
  order: 1; display: inline-block; margin-left: auto; padding: 0 8px; border: 1px solid #d3dbe1; border-radius: 999px;
  background: #e9edf0; color: #55636f; font-size: 14px; font-weight: 700; line-height: 1.55; white-space: nowrap;
}
.rental-a.eb .ebg-hist .ebg-t__p { order: 2; flex-basis: 100%; margin-left: 0; }
.rental-a.eb .ebg-hist .ebg-t__was { display: inline; color: #6b7c8a; font-size: 14px; }
.rental-a.eb .ebg-hist .ebg-t__yen, .rental-a.eb .ebg-hist .ebg-t__unit, .rental-a.eb .ebg-hist .ebg-t__fee { color: #6b7c8a; }
.rental-a.eb .ebg-hist .ebg-t__yen { font-size: 17px; }
.rental-a.eb .ebg-hist .ebg-t__tags { margin-top: 4px; filter: saturate(.25); opacity: .9; }
/* 歷史販售 sits in its own kind's tab (owner 11/07「互相歸類」): no kind word on its cards */
.rental-a.eb .ebg-hist .ebg-t__kd { display: none; }
.rental-a.eb .ebg-kind > .ebg-hist { margin-top: 18px; }
/* 兒童 (owner 11/07): 兒童價 takes the price's place in the 兒童 filter */
.rental-a.eb .ebg-vp--kid { display: none; }
.rental-a.eb .is-kid .ebg-vp--kid { display: inline-flex; }
.rental-a.eb .is-kid .ebg-v3__main > .ebg-vp:not(.ebg-vp--kid) { display: none; }
/* the hero's words (owner 11/07): the first sentence a little bolder, then body text; the ※ line keeps the small type */
.rental-a.eb .eb-hero__hook strong { font-weight: 800; }
.rental-a.eb .eb-hero__text { max-width: 34em; margin-top: 8px; color: var(--ra-text); font-size: 16px; line-height: 1.75; }
/* owner 11/09 (his phone, 390–412px)「票價多少、優惠到哪天、去哪裡買，通通幫你整理好！　為什麼會右邊有很大空間，中間斷掉了?」:
   under 768px the text keeps the three lines he wrote — its size follows the screen (16px down to 14px) so the longest line
   (24 characters, 24em) fits with 2px to spare, and at 14px its letters close up a little (0.6px at most) so it still fits at
   360px. On a narrower phone (or with another font) that line wraps in its middle only (gen_g.py: its two halves, each kept
   whole), never one phrase alone under a half-empty line. The text's width there: 100% - 40px, and 100% - 32px from 360px
   down (rental.css --ra-w). 768px and up as before */
@media (max-width: 767px) {
  .rental-a.eb .eb-hero__text { font-size: clamp(14px, calc((100vw - 42px) / 24), 16px); letter-spacing: clamp(-0.6px, calc((100vw - 378px) / 24), 0px); }
}
@media (max-width: 360px) {
  .rental-a.eb .eb-hero__text { font-size: clamp(14px, calc((100vw - 34px) / 24), 16px); letter-spacing: clamp(-0.6px, calc((100vw - 370px) / 24), 0px); }
}
/* QA 11/09 (S2-7): from 1024px the big snowflake (rental.css .ra-fl--3) floats just left of the picture, mid-height; at 768–1023
   the picture's column is narrow and that spot is over the bold line of the copy (measured: x 354–586 at 768–999, on
   「一次整理 14 座雪場的雪票資訊！」), so there it rests under the picture instead — in the picture's column, 18px or more
   under it, 170px or more from any text. Phones (no picture) and 1024px and up as before */
@media (min-width: 768px) and (max-width: 1023px) {
  .rental-a.eb .ra-fl--3 { top: auto; bottom: 10px; right: 100px; }
}
/* the card's last line keeps clear of the open icon in its corner at every width (coordinator 11/07: 「成人一日券」 was under
   it at 390): the price line, or the Japanese name on a grey card that has no price line, ends 40px short of the card's
   right side. A margin, not a padding, so the line's own box stays off the icon's box as well as its text. On tablets
   the icon sits centred in the card's wide right padding and the line needs no room kept. */
.rental-a.eb .ebg-sum .ebg-pd, .rental-a.eb .is-over .ebg-sum .ebg-ja { margin-right: 40px; }
@container ebg (600px <= width < 860px) {
  .rental-a.eb .ebg-sum .ebg-pd, .rental-a.eb .is-over .ebg-sum .ebg-ja { margin-right: 0; }
}
/* ===================================================================== owner 11/07: 一般票價 cards, merged rows */
/* a resort with no early-bird ticket everyone can buy but 一般票價 rows everyone can buy (「沒早鳥寫一般票價」): a white
   card, 一般票價 in a grey capsule, the price in ink (no red) */
.rental-a.eb .ebg-pd--reg .ebg-price__k { background: #eef1f3; color: #4d6174; }
.rental-a.eb .ebg-pd--reg .ebg-yen { color: var(--c-ink); }
/* rule B (「合併成一個」: one link, several prices): a line a price — the line's own words, then the price */
.rental-a.eb .ebg-v3__lines { grid-area: lines; display: grid; margin: 2px 0 0; padding: 0; list-style: none; border-top: 1px solid #e3ebf1; }
.rental-a.eb .ebg-v3__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; padding: 6px 0 5px; border-bottom: 1px dashed #e3ebf1; }
.rental-a.eb .ebg-v3__line:last-child { padding-bottom: 0; border-bottom: 0; }
.rental-a.eb .ebg-lw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 15px; line-height: 1.6; }
.rental-a.eb .ebg-lw__d { color: var(--c-ink); font-weight: 700; }
/* 歷史販售's B cards: a line a price (當時價) */
.rental-a.eb .ebg-hist__lines { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
.rental-a.eb .ebg-hist__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.rental-a.eb .ebg-hist .ebg-hist__line > .ebg-t__p { order: 1; flex-basis: auto; }
.rental-a.eb .ebg-hist .ebg-hist__line > .ebg-t__st { order: 2; align-self: center; }
.rental-a.eb .ebg-hist .ebg-lw { filter: saturate(.25); opacity: .9; }
.rental-a.eb .ebg-hist .ebg-lw__d { color: #4d6174; }
/* ===================================================================== coordinator 11/07: the window's top bar, phone buttons, B card head */
/* the × sat over tabs and buttons once the window was scrolled: a top bar that stays put holds it; what is in the window
   scrolls in the part under the bar; a soft shadow under the bar once scrolled (no animation in any mode); the resort's
   name shows in the bar once the window's own title has gone up under it */
.rental-a.eb .ebg-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.rental-a.eb .ebg-dialog__bar {
  flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box;
  padding: 0 8px 0 24px; background: #f8fcff;
}
.rental-a.eb .ebg-dialog.is-scrolled .ebg-dialog__bar { box-shadow: 0 6px 12px -8px rgba(23, 55, 90, .38); }
.rental-a.eb .ebg-dialog__name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; color: #17375a; font-size: 17px; font-weight: 700; line-height: 1.3;
  text-overflow: ellipsis; white-space: nowrap; visibility: hidden;
}
.rental-a.eb .ebg-dialog.is-named .ebg-dialog__name { visibility: visible; }
.rental-a.eb .ebg-dialog__close { float: none; position: static; flex: none; margin: 0 0 0 auto; }
.rental-a.eb .ebg-dialog__in { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.rental-a.eb .ebg-pop__head { padding: 0 24px 20px; }
@media (max-width: 600px) {
  .rental-a.eb .ebg-dialog__bar { padding-left: 16px; }
  .rental-a.eb .ebg-pop__head { padding: 0 16px 16px; }
  /* phones: a little more room for the cards */
  .rental-a.eb .ebg-v3 { padding-left: 24px; }
  .rental-a.eb .ebg-v3__dot { left: -24px; }
  .rental-a.eb .ebg-pop__body { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 374px) { .rental-a.eb .ebg-pop__head { padding-left: 14px; } .rental-a.eb .ebg-pop__body { padding-left: 10px; padding-right: 10px; } }
/* ===================================================================== owner 11/07「做成這樣」(his mockup): a card a price, a line a shop */
/* a card: the price once — with its deadline in 有資格限制, the short word (a grey capsule), the 限 tags (red) — then a line a
   shop: the shop's name and that line's own capsules (官方指定平台, 電子票／紙本票, +2%手續費) at the left, 前往 › at the right,
   thin lines between the lines, the whole line the link (at least 44px tall). On a narrow phone the capsules go under the
   name; 前往 › stays at the right, in the middle, on one line. A B card (one link, several prices): what its prices share on
   top, a line a price, then its one shop line. 歷史販售 the same in grey: 當時價 and the status capsule, quiet shop lines. */
.rental-a.eb .ebg-pop .ebg-v3w .ebg-v3__r.ebg-v3__r--c, .rental-a.eb .ebg-pop .ebg-v3w .ebg-v3__r.ebg-v3__r--b { display: block; padding: 10px 12px 2px 14px; }
.rental-a.eb .ebg-v3__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rental-a.eb .ebg-v3__top > .ebg-vp { margin-right: 2px; }
.rental-a.eb .ebg-pls { margin: 4px 0 0; padding: 0; list-style: none; }
.rental-a.eb .ebg-pl + .ebg-pl { border-top: 1px solid #e3ebf1; }
.rental-a.eb .ebg-pl__a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 46px; box-sizing: border-box;
  padding: 5px 0; color: var(--c-ink); text-decoration: none;
}
/* the hover colour reaches a little past the line's text on both sides (a shadow, so the line's box stays in the card) */
.rental-a.eb .ebg-pl__a:hover { background: #f1f7fb; box-shadow: -6px 0 0 #f1f7fb, 6px 0 0 #f1f7fb; }
.rental-a.eb .ebg-pl__a:focus-visible { outline: 3px solid var(--ra-ink); outline-offset: -1px; }
.rental-a.eb .ebg-pl__l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.rental-a.eb .ebg-pl__shop { font-size: 16px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.rental-a.eb .ebg-pl__dis { color: var(--c-muted); font-size: 14px; }
.rental-a.eb .ebg-pl__tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: 14px; line-height: 1.5; }
.rental-a.eb .ebg-pl__tags .ebg-off { font-size: 14px; }
.rental-a.eb .ebg-fee { border-color: #d9e2e8; background: #eef2f5; color: #3a5167; letter-spacing: 0; }
.rental-a.eb .ebg-pl__go { display: inline-flex; align-items: center; gap: 4px; color: var(--ra-blue); font-size: 15px; font-weight: 700; white-space: nowrap; }
.rental-a.eb .ebg-pl__chev { font-size: 20px; font-weight: 400; line-height: 1; }
/* coordinator 11/08 (S7, owner「狀態靠右」): 歷史販售, a shop line's own status (已售完, 已結束, M/D 結束) at the right of the
   line — just left of 前往 › on its row (a third column), the line's end when it has no link */
.rental-a.eb .ebg-pl__s { display: inline-flex; align-items: center; justify-self: end; }
.rental-a.eb .ebg-pl__a--s:not(.ebg-pl__a--plain) { grid-template-columns: minmax(0, 1fr) auto auto; }
/* a narrow window (no room for the name and its capsules beside the status and 前往 — the script's is-st2): the status under
   前往, still at the right; 前往 on the name's row */
.rental-a.eb .ebg-pf.is-st2 .ebg-pl__a--s { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; row-gap: 4px; }
.rental-a.eb .ebg-pf.is-st2 .ebg-pl__a--s > .ebg-pl__l { grid-row: 1 / 3; grid-column: 1; align-self: start; justify-content: flex-start; }   /* the name on 前往's row (not centred in a stacked line) */
.rental-a.eb .ebg-pf.is-st2 .ebg-pl__a--s > .ebg-pl__go { grid-row: 1; grid-column: 2; }
.rental-a.eb .ebg-pf.is-st2 .ebg-pl__a--s > .ebg-pl__s { grid-row: 3; grid-column: 1 / 3; justify-self: end; }   /* its own row, the line's width (the capsules keep theirs) */
/* a B card: its prices under what they share, then its shop line under a thin line */
.rental-a.eb .ebg-v3__r--b > .ebg-v3__lines:first-child { margin-top: 0; border-top: 0; }
.rental-a.eb .ebg-v3__r--b > .ebg-v3__lines .ebg-v3__line:last-child { padding-bottom: 4px; }
.rental-a.eb .ebg-v3__r--b > .ebg-pls { border-top: 1px solid #e3ebf1; }
/* 歷史販售: the same, in grey */
.rental-a.eb .ebg-hist__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rental-a.eb .ebg-hist__p { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.rental-a.eb .ebg-hist .ebg-hist__top > .ebg-t__st { order: 0; margin-left: auto; }
.rental-a.eb .ebg-hist .ebg-hist__top > .ebg-t__d, .rental-a.eb .ebg-hist .ebg-hist__top > .ebg-lim, .rental-a.eb .ebg-hist .ebg-pl__tags { filter: saturate(.25); opacity: .9; }
.rental-a.eb .ebg-hist .ebg-hist__list > .ebg-t.ebg-hist__c { padding-bottom: 2px; }
.rental-a.eb .ebg-hist .ebg-pls { margin-top: 2px; }
.rental-a.eb .ebg-hist .ebg-hist__b > .ebg-pls { border-top: 1px solid #dde3e8; }
.rental-a.eb .ebg-hist .ebg-pl + .ebg-pl { border-top-color: #dde3e8; }
.rental-a.eb .ebg-hist .ebg-pl__a { min-height: 44px; color: #4d6174; }
.rental-a.eb .ebg-hist .ebg-pl__a:hover { background: #eaeef1; box-shadow: -6px 0 0 #eaeef1, 6px 0 0 #eaeef1; }
.rental-a.eb .ebg-hist .ebg-pl__shop { font-size: 15px; }
.rental-a.eb .ebg-hist .ebg-pl__go { color: #6b7c8a; font-size: 14px; font-weight: 400; }
@media (max-width: 600px) {
  .rental-a.eb .ebg-pop .ebg-v3w .ebg-v3__r.ebg-v3__r--c, .rental-a.eb .ebg-pop .ebg-v3w .ebg-v3__r.ebg-v3__r--b { padding: 9px 8px 2px 10px; }
  .rental-a.eb .ebg-pl__a { column-gap: 8px; }
  .rental-a.eb .ebg-pl__l { column-gap: 8px; }
  .rental-a.eb .ebg-pl__shop { font-size: 15px; }
  .rental-a.eb .ebg-pl__go { font-size: 14px; }
}
/* ===================================================================== owner 11/07「改一下好了」: shops by format (rule F) */
/* a card's shops: the format capsule in a left column, once a group (電子票 → 紙本票 → 形式未確認, grey; owner 11/07「紙本票
   就好」); the right column a line a shop — the name, 官方指定平台 / +2%手續費, 前往 › — with thin lines between
   the lines in the right column only. A capsule is always one line (owner 11/07 mockup g): the left column is as wide as the
   card's longest one, on every width (owner 11/08「為什麼手機板換行了?」: no capsule over its group on a phone any more); a
   card whose lines do not all fit on one line has them all on two (the name, then its capsules; is-stack). A multi-price card's shop line at its foot the same (owner 11/07「應該要這樣才對」);
   beside the lines, a capsule sits in the middle of its group's first line (the script sets its room above) */
.rental-a.eb .ebg-pf { margin-top: 4px; }
.rental-a.eb .ebg-fgs { display: grid; grid-template-columns: [k] max-content [r] minmax(0, 1fr); column-gap: 14px; margin: 0; padding: 0; list-style: none; }
.rental-a.eb .ebg-fg { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; }
.rental-a.eb .ebg-fg__k { grid-column: k; padding-top: 11px; }
.rental-a.eb .ebg-fcap { display: inline-block; white-space: nowrap; line-height: 1.45; vertical-align: top; }
.rental-a.eb .ebg-fcap__a { display: inline-flex; align-items: center; gap: 3px; vertical-align: top; }
.rental-a.eb .ebg-media--u { border-color: #d3dbe1; background: #eef1f3; color: #4d6174; }
.rental-a.eb .ebg-fg > .ebg-pls { grid-column: r; min-width: 0; margin: 0; }
.rental-a.eb .ebg-fg + .ebg-fg > .ebg-pls > .ebg-pl:first-child { border-top: 1px solid #e3ebf1; }
.rental-a.eb .ebg-pl__a--plain { cursor: default; }
.rental-a.eb .ebg-pl__a--plain:hover { background: none; box-shadow: none; }
.rental-a.eb .ebg-pf.is-stack .ebg-pl__l { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; row-gap: 4px; min-height: 49px; }
/* owner 11/08「為什麼手機板換行了?」: a phone as a computer — the capsule in the left column beside its group's first line,
   the lines on the right (a little less room between the two); only a line that does not fit goes on two (is-stack), and
   a name too wide for its line wraps in the right column (after 「&」: SURF&SNOW; the script lays the card out again) */
@media (max-width: 600px) {
  .rental-a.eb .ebg-fgs { column-gap: 10px; }
  .rental-a.eb .ebg-pl__shop { min-width: 0; white-space: normal; overflow-wrap: break-word; }
}
@media (max-width: 374px) {
  .rental-a.eb .ebg-fgs { column-gap: 8px; }
  .rental-a.eb .ebg-pl__a { column-gap: 6px; }
}
/* the static rows of the 苗場 guests' tickets: no 前売 (owner 11/07), so no empty label */
.rental-a.eb .ebg-t__k:empty { display: none; }
/* a multi-price card's prices (rule B, rule E; owner 11/07 his mockups): one grid for the card — the short word in bold, the
   price, its own deadline / status at the right, 前往 › when each price is its own link; very light lines between the
   prices. An extra 限 group (owner 11/07 mockup g) opens with its capsule on a line of its own; its lines keep the columns
   of the others (the short word, the price) */
.rental-a.eb .ebg-mp__l { display: grid; grid-template-columns: [n] auto [p] minmax(0, 1fr) [t] auto [g] auto [z]; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
.rental-a.eb .ebg-mp__r, .rental-a.eb .ebg-mp__a { display: grid; grid-column: n / z; grid-template-columns: subgrid; align-items: center; align-content: center; }
.rental-a.eb .ebg-mp__r { padding: 5px 0; border-top: 1px solid #edf2f5; }
.rental-a.eb .ebg-mp__r:first-child { border-top: 0; }
.rental-a.eb .ebg-mp__r--g { margin-top: 8px; }   /* owner 11/08: a card's lines a page together — another page's lines a little apart */
.rental-a.eb .ebg-mp__a { min-height: 44px; color: inherit; text-decoration: none; border-radius: 6px; }
.rental-a.eb .ebg-mp__r:has(> .ebg-mp__a) { padding: 3px 0; }   /* a price that is a link: 44px to tap, the line as tall as before */
.rental-a.eb .ebg-mp__a:hover { background: #f1f7fb; box-shadow: -6px 0 0 #f1f7fb, 6px 0 0 #f1f7fb; }
.rental-a.eb .ebg-mp__a:focus-visible { outline: 3px solid var(--ra-ink); outline-offset: 1px; }
.rental-a.eb .ebg-mp__x { grid-column: n / z; display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0 4px; }
.rental-a.eb .ebg-mp__n { grid-column: n; min-width: 0; color: var(--c-ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.rental-a.eb .ebg-mp__p { grid-column: p; min-width: 0; }
.rental-a.eb .ebg-mp__t { grid-column: t; justify-self: end; }
.rental-a.eb .ebg-mp__t:empty { display: none; }
.rental-a.eb .ebg-mp__g { grid-column: g; display: inline-flex; align-items: center; gap: 4px; color: var(--ra-blue); font-size: 15px; font-weight: 700; white-space: nowrap; }
.rental-a.eb .ebg-v3__r--b > .ebg-v3__top + .ebg-mp { margin-top: 4px; padding-top: 2px; border-top: 1px solid #e3ebf1; }
.rental-a.eb .ebg-v3__r--b > .ebg-pf, .rental-a.eb .ebg-hist__b > .ebg-pf { border-top: 1px solid #e3ebf1; }
/* 歷史販售: the same, in grey — 當時價, the status capsule at the right, quiet lines */
.rental-a.eb .ebg-vp--was .ebg-vp__y { color: #6b7c8a; font-size: 17px; }
.rental-a.eb .ebg-hist .ebg-mp__n { color: #4d6174; }
.rental-a.eb .ebg-hist .ebg-mp__g { color: #6b7c8a; font-weight: 400; }
.rental-a.eb .ebg-hist .ebg-mp__a:hover { background: #eaeef1; box-shadow: -6px 0 0 #eaeef1, 6px 0 0 #eaeef1; }
.rental-a.eb .ebg-hist .ebg-fg__k { filter: saturate(.25); opacity: .9; }
.rental-a.eb .ebg-hist .ebg-fg + .ebg-fg > .ebg-pls > .ebg-pl:first-child { border-top-color: #dde3e8; }
.rental-a.eb .ebg-hist .ebg-hist__top + .ebg-mp { margin-top: 4px; }
/* the note under the card grid (owner 11/07: from the hero to here, the small type; on a computer one line, no width limit) */
.rental-a.eb .eb-list-note { max-width: none; margin-top: 20px; }
/* owner 11/07「格式要統一」(rule E: each price its own page) and「這種一個賣場賣多種的統一寫一個RANGE就好」(rule B: one page, a
   line a range): a line is written as a card's top — the price (label, price or range, unit, +2%, 依日期), its words in the
   grey capsule, its own deadline / status — with 前往 › at the right when the line is a link. A line too narrow for the
   capsule beside the price has it under the price; 前往 › stays at the right, in the middle */
.rental-a.eb .ebg-mp--e .ebg-mp__l, .rental-a.eb .ebg-mp--r .ebg-mp__l, .rental-a.eb .ebg-mp--e .ebg-mp__r, .rental-a.eb .ebg-mp--r .ebg-mp__r { display: block; }
/* owner 11/08 (版面; 「12/7 開賣改在靠右」「狀態字和前往留在價錢那排右邊」): a line is a grid — the price and its capsule
   (.ebg-mp__v), then its status (開賣, 結束, its own deadline) and 前往, both centred on the price's first row (a price on two
   rows: beside the first, not between the rows); a card whose capsules go under its prices (is-two) has each capsule under
   the whole line, under the status and 前往 too, so they never squeeze it */
.rental-a.eb .ebg-mp--e .ebg-mp__a, .rental-a.eb .ebg-mp__b { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; align-content: center; }
.rental-a.eb .ebg-mp__b { min-height: 34px; }
.rental-a.eb .ebg-mp__v { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rental-a.eb .ebg-mp__v > .ebg-vp { margin-right: 2px; }
.rental-a.eb .ebg-mp--e .ebg-mp__s, .rental-a.eb .ebg-mp--r .ebg-mp__s { grid-area: 1 / 2; min-height: 23.7px; margin-left: 12px; }   /* 23.7: a capsule's height, the price row's */
.rental-a.eb .ebg-mp--e .ebg-mp__g { grid-area: 1 / 3; min-height: 23.7px; margin-left: 12px; }
.rental-a.eb .ebg-mp.is-two .ebg-mp__a, .rental-a.eb .ebg-mp.is-two .ebg-mp__b { grid-template-rows: auto auto; }
.rental-a.eb .ebg-mp.is-two .ebg-mp__v { grid-area: 1 / 1 / 3 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0; align-items: start; }   /* a card whose capsule does not fit beside a price: under it on every line */
.rental-a.eb .ebg-mp.is-two .ebg-mp__v > .ebg-vp { grid-area: 1 / 1; justify-self: start; margin-right: 0; }
.rental-a.eb .ebg-mp.is-two .ebg-mp__v > .ebg-mp__d { grid-area: 2 / 1 / 3 / 4; justify-self: start; margin-top: 4px; }
/* owner 11/09 (his sketch for the 岩原 季票 歷史販售 lines), 11/10「只有放不下的列才三排」: a line whose price box — its label, every
   price, its words — would wrap beside its status and 前往 (360–430: 「M/D 結束」「11/30 前」 and a shop's name) goes on three rows
   (is-s2 on the line, js fitLines): the price over the whole width, then the capsule, then the status at the left and 前往 at
   the right; the card's other lines stay on one row, their 前往 at the same right edge. Where the row has room (768 and up) as
   before. Only a line with a status box (owner 11/10「官網怎麼會自己一排?」): a line with 前往 alone keeps it on the price's row
   and its price box wraps there as it always did. The shop lines' is-st2 is another thing */
.rental-a.eb .ebg-mp .ebg-mp__r.is-s2 > .ebg-mp__a, .rental-a.eb .ebg-mp .ebg-mp__r.is-s2 > .ebg-mp__b { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; }
.rental-a.eb .ebg-mp .ebg-mp__r.is-s2 .ebg-mp__v { grid-area: 1 / 1 / 3 / 3; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 0; align-items: start; }
.rental-a.eb .ebg-mp .ebg-mp__r.is-s2 .ebg-mp__v > .ebg-vp { grid-area: 1 / 1; justify-self: stretch; margin-right: 0; }
.rental-a.eb .ebg-mp .ebg-mp__r.is-s2 .ebg-mp__v > .ebg-mp__d { grid-area: 2 / 1; justify-self: start; margin-top: 4px; }
.rental-a.eb .ebg-mp .ebg-mp__r.is-s2 .ebg-mp__s { grid-area: 3 / 1; justify-self: start; margin: 6px 0 0; }
.rental-a.eb .ebg-mp .ebg-mp__r.is-s2 .ebg-mp__g { grid-area: 3 / 2; justify-self: end; margin: 6px 0 0; }
/* a notch smaller only where it is needed (is-sf, js fitLines: on its own row the price still wraps at its own size and 16px
   fits; phones up to 390 — 430 keeps its size), so a card's prices keep one size where they can; a price too wide even at 16px
   (four prices, three six-digit prices) keeps its size and breaks after 「、」 */
@media (max-width: 399px) { .rental-a.eb .ebg-mp .ebg-mp__r.is-s2.is-sf .ebg-mp__v > .ebg-vp .ebg-vp__y { font-size: 16px; } }
.rental-a.eb .ebg-hist .ebg-mp__d { filter: saturate(.25); opacity: .9; }
/* 現場票價 (a resort's price list,「名稱在前、價錢對齊」): the words take the room the prices leave and wrap in their column on
   a narrow phone; the prices stay one column (owner 11/07「一般雪票加上去」: 360px) */
/* owner 11/07「用成欄位式的」: 現場票價 as a table — a column a group of people, a row a kind of ticket, a cell its price (— none);
   the words every row has under it; turned or scrolled (first column kept) when it does not fit the card */
.rental-a.eb .ebg-otw { max-width: 100%; margin: 0 0 2px; overflow-x: auto; overflow-y: hidden; }   /* its table never widens the card (it turns, or scrolls here) */
.rental-a.eb .ebg-ot { width: 100%; border-collapse: collapse; }
.rental-a.eb .ebg-ot[hidden] { display: none; }
.rental-a.eb .ebg-ot th, .rental-a.eb .ebg-ot td { padding: 7px 6px; border-bottom: 1px solid #edf2f5; text-align: right; vertical-align: middle; }
.rental-a.eb .ebg-ot tr > :first-child { padding-left: 0; }
.rental-a.eb .ebg-ot tr > :last-child { padding-right: 0; }
.rental-a.eb .ebg-ot tbody tr:last-child > * { border-bottom: 0; }
.rental-a.eb .ebg-ot thead th { color: var(--c-muted); font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.rental-a.eb .ebg-ot tbody th { color: var(--c-ink); font-size: 14px; font-weight: 700; line-height: 1.4; text-align: left; }
.rental-a.eb .ebg-ot td { color: var(--c-ink); font-size: 16px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.rental-a.eb .ebg-ot td.is-none { color: #9aa9b5; font-weight: 400; }
.rental-a.eb .ebg-ot__note { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.rental-a.eb .ebg-otw.is-scroll tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--ebg-ot-bg, #fff); }   /* the card's own background */
/* owner 11/08 (his mockup, 神樂 小時票「這樣才對」): a one-row table's name, a capsule in the first column on the prices' row */
.rental-a.eb .ebg-ot .ebg-ot__pill { white-space: nowrap; vertical-align: middle; }
.rental-a.eb .ebg-mp--o .ebg-mp__l { grid-template-columns: [n] minmax(0, max-content) [p] minmax(max-content, 1fr) [t] auto [g] auto [z]; }
/* owner 11/07: some tips are two or three paragraphs now — the room between them is the hero's (its two paragraphs, 8px) */
.rental-a.eb .eb-tips .ra-tip__body p + p { margin-top: 8px; }
/* owner 11/07「上下的空間有點小　電腦版的改就好」: on computers (the page's 1024px) the bold line has more room — 22px under the
   ribbon, 14px over the text; phones and tablets as they were */
@media (min-width: 1024px) {
  .rental-a.eb .eb-hero__hook { margin-top: 22px; }
  .rental-a.eb .eb-hero__hook + .eb-hero__text { margin-top: 14px; }
}
/* owner 11/07「把現場票價加進來」: the format 現場購票 in a neutral capsule (the shop icon) */
.rental-a.eb .ebg-media--o { border-color: #c7d1da; background: #f3f5f7; color: #3a5167; }
/* owner 11/07 picked design 3「淡色底卡」for 接著看這些 (the trial css/eb-links-lab.css): the whole card the link, the category and
   the title (the arrow kept with its last character), the icon on the right; no border, a soft tint per card */
.rental-a.eb .ebl { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rental-a.eb .ebl > li { display: flex; min-width: 0; }
.rental-a.eb .ebl-card {
  position: relative; display: flex; flex: 1 1 auto; min-width: 0; color: var(--ra-text); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* keyboard focus: the page's navy ring (opt.css's site-wide blue ring is !important, so this one is too) */
.rental-a.eb .ebl-card:focus-visible { outline: 3px solid var(--ra-ink) !important; outline-offset: 3px !important; }
.rental-a.eb .ebl-body { display: flex; flex-direction: column; min-width: 0; }
.rental-a.eb .ebl-cat { display: block; color: var(--ra-en); font-size: var(--eb-small); font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.rental-a.eb .ebl-title { display: block; color: var(--ra-ink); font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: .02em; }
.rental-a.eb .ebl-ico { display: grid; place-items: center; flex: none; }
.rental-a.eb .ebl .eb-i40 { fill: none; stroke: var(--ra-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rental-a.eb .ebl-arr { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* an arrow after the title keeps the title's last character with it, so it never sits alone on a line */
.rental-a.eb .ebl-nw { white-space: nowrap; }
.rental-a.eb .ebl-nw .ebl-arr { display: inline-block; margin-left: .3em; vertical-align: -.16em; }
.rental-a.eb .ebl--3 > li:nth-child(1) { --ebl-bg: #dcf6fa; --ebl-bg-h: #c9f0f5; }   /* 雪場選擇: the page's soft cyan */
.rental-a.eb .ebl--3 > li:nth-child(2) { --ebl-bg: #fff3c8; --ebl-bg-h: #ffebaa; }   /* 課程預約: the 平台 tag's yellow */
.rental-a.eb .ebl--3 > li:nth-child(3) { --ebl-bg: #e4eef8; --ebl-bg-h: #d5e5f4; }   /* 常見問題: a tint of the page's blue */
.rental-a.eb .ebl--3 .ebl-card { align-items: center; gap: 14px; padding: 20px 18px 20px 22px; border-radius: 20px; background: var(--ebl-bg); transition: background-color .3s; }
.rental-a.eb .ebl--3 .ebl-body { flex: 1 1 auto; }
.rental-a.eb .ebl--3 .ebl-title { margin-top: 2px; font-size: 22px; font-weight: 800; line-height: 1.4; }
.rental-a.eb .ebl--3 .ebl-ico { width: 52px; height: 52px; }
.rental-a.eb .ebl--3 .eb-i40 { width: 50px; height: 50px; }
/* owner 11/07「箭頭幫我做右左來回…往右的時候變大一點」: right about 6px and 1.15 times, back, softly, for ever; the cards 0.2s apart */
@keyframes ebl-nudge { 0%, 100% { transform: translateX(0) scale(1); } 50% { transform: translateX(6px) scale(1.15); } }
.rental-a.eb .ebl--3 .ebl-arr { transform-origin: 50% 50%; animation: ebl-nudge 1.6s ease-in-out infinite; }
.rental-a.eb .ebl--3 > li:nth-child(2) .ebl-arr { animation-delay: .2s; }
.rental-a.eb .ebl--3 > li:nth-child(3) .ebl-arr { animation-delay: .4s; }
/* scrolled out of view, js/eb-g.js gives the list .ebg-hm-off (as it does the hero): the arrows hold where they are and go
   on from there when the cards are back on the screen (11/09); without scripts they run on */
.rental-a.eb .ebl--3.ebg-hm-off .ebl-arr { animation-play-state: paused; }
@media (hover: hover) {
  .rental-a.eb .ebl--3 .ebl-card:hover { background: var(--ebl-bg-h); }
}
@media (min-width: 1024px) {
  .rental-a.eb .ebl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rental-a.eb .ebl--3 .ebl-card { align-items: flex-start; padding: 24px 20px 24px 24px; }
  .rental-a.eb .ebl--3 .ebl-title { font-size: 24px; }
}
/* reduce motion: the arrow does not move (rental.css already turns transitions off); hover keeps its colour change */
@media (prefers-reduced-motion: reduce) {
  .rental-a.eb .ebl-card .ebl-arr { animation: none !important; transform: none !important; }
}
/* owner 11/07「季票…也要標原價」: the original price after the price, grey, struck through */
.rental-a.eb .ebg-vp__o, .rental-a.eb .ebg-t__o { color: var(--c-muted); font-size: 14px; font-weight: 400; white-space: nowrap; }
.rental-a.eb .ebg-vp__o s, .rental-a.eb .ebg-t__o s { text-decoration-thickness: 1px; }
/* a shop page that no longer sells the ticket: its name, no link */
.rental-a.eb .ebg-go--off { cursor: default; color: var(--c-muted); background: #f3f5f7; border-color: #d5dde4; }
/* the reviewer 11/07 (必修3): 4 kind tabs in one row on 360–389px phones — less side padding, a smaller type; the tabs and the
   filter buttons 40–44px tall on phones */
@media (max-width: 767px) {
  .rental-a.eb .ebg-pop .ebg-tabs .ra-tab { min-height: 44px; }
  .rental-a.eb .ebg-pop .ebg-filter .ra-tab { min-height: 40px; }
}
@media (max-width: 389px) {
  .rental-a.eb .ebg-pop .ebg-tabs { flex-wrap: nowrap; }
  .rental-a.eb .ebg-pop .ebg-tabs .ra-tab { min-width: 0; padding: 6px 6px; font-size: 15px; letter-spacing: 0; }
}
/* the reviewer 11/07 (建議8): a 現場票價 row name breaks only after 「・」「–」 */
.rental-a.eb .ebg-ot__r .ebg-nw { white-space: nowrap; }

/* hero motion START */
/* ===================================================================== the hero picture moves (owner 11/09「重做一個 雪票購買的圖」
   →「B」: the lift ticket, a phone with a buy button, the yen coin; owner 11/08「這個也作動圖」and the moves he has seen)
   A 6 s round from the picture as drawn: the phone's buy button is pressed once (0.2–0.6 s: down to 0.88 and back), then
   the coin hops on the spot (0.65–1.35 s: up 6 and down, a small squash on its bottom as it lands) while a gleam crosses
   its face (0.65–1.15 s) — press buy, save money — and all rests till the round starts again. The ticket and its string
   swing on the string's top, 4deg each way, 6 s there and back (the same 6 s); the snowflakes turn slowly and the four
   dots twinkle. On phones the small picture's button, coin and ticket do the same.
   When (owner 11/09「看起來卡卡的」): nothing moves while the page is still loading. With scripts on (scripting: enabled)
   every moving piece holds its first frame till js/eb-g.js gives the hero .ebg-hm-on (0.8 s after the load event, at the
   first idle moment, 2 s after load at the latest), and then all start together; with scripts off, or in a browser that
   does not know the scripting feature, all start 1.5 s after they first show (holding their first frame till then: fill
   backwards). So that both ways start alike, no piece starts part-way through its round (no negative delay): the swing
   and the twinkles that used to start part-way have that start written into their keyframes (the same curves, cut where
   they used to start, so each frame is as before). Every moving box is a layer of its own from the first paint
   (will-change), so none is made into one at the moment the picture starts. While the hero is scrolled out of view
   (js/eb-g.js: .ebg-hm-off) everything holds where it is and goes on when it is back.
   How (the site's rule for motion, 11/08: the moves are CSS; transform / opacity only, on the compositor; no @property):
   a piece drawn inside an SVG is not a box the compositor can move on its own, so each moving piece (the frame marks them
   ebh-…) is copied, unchanged, into an <svg> of its own with the picture's viewBox, laid exactly over the picture (the
   page builder writes the copies: work/g/g_hero.py), and those boxes and the <span>s round them move; a pivot is then a
   percentage of the box (the ticket's string top, 270.539 30.184 of 440 300, is 61.4861% 10.0615%). 2D only (a box turned
   in 3D is drawn from a low-resolution copy and goes soft on sharp screens). The gleam is a white band moved across a round
   window on the coin's face (its own transform only). Everything sits in a box exactly the picture's that clips as the
   picture clips its own drawing (with nothing clipping a moving box, the browser assumes it can reach anything drawn after
   it and lifts all that into layers of its own). The copies are display: none unless motion is allowed (screens only);
   then they show and the originals are hidden (visibility). With reduced motion, and in print, nothing here applies and
   the picture is drawn exactly as the frame draws it (rental.css also turns every animation off). The moving boxes that
   are <svg> elements move by transform: this Chrome hands an <svg>'s transform to the compositor but not its separate
   rotate / scale / translate properties (measured 11/08: +59 points busy). */
.rental-a.eb--g .ebg-hm, .rental-a.eb--g .ebg-hmm { display: none; }
@media screen and (prefers-reduced-motion: no-preference) {
  .rental-a.eb--g .ra-hero__art { position: relative; }
  .rental-a.eb--g .ebg-hm { display: block; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 440 / 300; overflow: hidden; pointer-events: none; }
  .rental-a.eb--g .ebg-hm__p { display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; overflow: visible; }
  .rental-a.eb--g .ebg-hm__coin { display: block; width: 100%; height: auto; overflow: visible; }
  /* the originals of the moving pieces */
  .rental-a.eb--g .ra-hero__svg .ebh-fl1, .rental-a.eb--g .ra-hero__svg .ebh-fl2, .rental-a.eb--g .ra-hero__svg .ebh-d1,
  .rental-a.eb--g .ra-hero__svg .ebh-d2, .rental-a.eb--g .ra-hero__svg .ebh-d3, .rental-a.eb--g .ra-hero__svg .ebh-d4,
  .rental-a.eb--g .ra-hero__svg .ebh-buy, .rental-a.eb--g .ra-hero__svg .ebh-ticket, .rental-a.eb--g .ra-hero__svg .ebh-coin { visibility: hidden; }
  /* the buy button: pressed on its centre (98.6185 201.747 once the phone is turned) */
  .rental-a.eb--g .ebg-hm__buy { transform-origin: 22.4133% 67.249%; will-change: transform; animation: ebg-buy 6s linear 1.5s infinite backwards; }
  /* the coin: hops, squashing a little on its bottom (352 263.5) as it lands; the gleam is a band moving across a round
     window on its face (inside the outline: 352 232, radius 28.5) */
  .rental-a.eb--g .ebg-hm__cj { transform-origin: 80% 87.8333%; will-change: transform; animation: ebg-cj 6s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ebg-hm__cs { position: absolute; left: 73.5227%; top: 67.8333%; width: 12.9545%; height: 19%; border-radius: 50%; overflow: hidden; }
  .rental-a.eb--g .ebg-hm__cb, .rental-a.eb--g .ebg-hm__mcb { position: absolute; top: -30%; left: 0; width: 30%; height: 160%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0)); will-change: transform; animation: ebg-cb 6s linear 1.5s infinite backwards; }
  /* the ticket and its string: 4deg each way of where they hang, 6 s there and back, the rental page's tickets' easing;
     it starts where it hangs, on its way out */
  .rental-a.eb--g .ebg-hm__tag { transform-origin: 61.4861% 10.0615%; will-change: transform; animation: ebg-hero-swing 6s linear 1.5s infinite backwards; }
  /* the snowflakes turn once in 26 s and once in 30 s (the other way) */
  .rental-a.eb--g .ebg-hm__fl1 { transform-origin: 10% 20.3333%; will-change: transform; animation: ebg-hero-spin 26s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ebg-hm__fl2 { transform-origin: 91.8182% 36.6667%; will-change: transform; animation: ebg-hero-spin 30s linear 1.5s infinite reverse backwards; }
  /* the four dots twinkle, each at its own pace */
  .rental-a.eb--g .ebg-hm__d1 { will-change: opacity; animation: ebg-tw-d1 5.2s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ebg-hm__d2 { will-change: opacity; animation: ebg-tw-d2 6.4s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ebg-hm__d3 { will-change: opacity; animation: ebg-tw-d3 5.8s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ebg-hm__d4 { will-change: opacity; animation: ebg-tw-d4 7s linear 1.5s infinite backwards; }
}
/* phones (the small picture shows from 341 to 767px): its copies' box takes the small picture's own place and size (it
   carries its classes) and clips as it does; its button (28.3221 56.4075), coin (101 60, face radius 9.9; it hops 3) and
   ticket (string top 77.961 9.046) move as the big ones; the two snow dots under it twinkle */
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 341px) and (max-width: 767px) {
  .rental-a.eb--g .ebg-hmm { display: block; overflow: hidden; pointer-events: none; }
  .rental-a.eb--g .ebg-hm__m { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
  .rental-a.eb--g .ebg-hm__mcoin { display: block; width: 100%; height: 100%; overflow: visible; }
  .rental-a.eb--g .ra-deco > svg.eb-mini .ebh-mbuy, .rental-a.eb--g .ra-deco > svg.eb-mini .ebh-mticket,
  .rental-a.eb--g .ra-deco > svg.eb-mini .ebh-mcoin { visibility: hidden; }
  .rental-a.eb--g .ebg-hm__mbuy { transform-origin: 23.6018% 70.5094%; will-change: transform; animation: ebg-buy 6s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ebg-hm__mcj { transform-origin: 84.1667% 90.125%; will-change: transform; animation: ebg-mcj 6s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ebg-hm__mcs { position: absolute; left: 75.9167%; top: 62.625%; width: 16.5%; height: 24.75%; border-radius: 50%; overflow: hidden; }
  .rental-a.eb--g .ebg-hm__mtag { transform-origin: 64.968% 11.3078%; will-change: transform; animation: ebg-hero-swing 6s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ra-deco .ra-fl--1 { will-change: opacity; animation: ebg-tw-f1 6s linear 1.5s infinite backwards; }
  .rental-a.eb--g .ra-deco .ra-fl--2 { will-change: opacity; animation: ebg-tw-f2 5.4s linear 1.5s infinite backwards; }
}
/* with scripts on, the picture waits for js/eb-g.js instead: no delay of its own, every moving piece held on its first
   frame till the hero has .ebg-hm-on */
@media screen and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .rental-a.eb.eb--g .eb-hero :is(.ebg-hm__p, .ebg-hm__cb, .ebg-hm__m, .ebg-hm__mcb, .ra-fl) { animation-delay: 0s; }
  .rental-a.eb.eb--g .eb-hero:not(.ebg-hm-on) :is(.ebg-hm__p, .ebg-hm__cb, .ebg-hm__m, .ebg-hm__mcb, .ra-fl) { animation-play-state: paused; }
}
/* scrolled out of view, js/eb-g.js gives the hero .ebg-hm-off: every moving piece holds where it is and goes on from there
   when the picture is back on the screen (no work for a picture nobody sees, 11/09); without scripts it runs on */
@media screen and (prefers-reduced-motion: no-preference) {
  .rental-a.eb.eb--g .eb-hero.ebg-hm-off :is(.ebg-hm__p, .ebg-hm__cb, .ebg-hm__m, .ebg-hm__mcb, .ra-fl) { animation-play-state: paused; }
}
/* the 6 s round in percent: the button 3.3333–10 (down by 5.8333), the coin 10.8333–22.5 (top at 15, lands 18.6667,
   squashed at 20), the gleam 10.8333–19.1667 */
@keyframes ebg-buy {
  0%, 3.3333% { transform: scale(1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  5.8333% { transform: scale(.88); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  10%, 100% { transform: scale(1); }
}
@keyframes ebg-cj {    /* up 6 (2% of the box) and down, then a small squash on landing */
  0%, 10.8333% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  15% { transform: translateY(-2%) scale(1, 1); animation-timing-function: cubic-bezier(.32, 0, .67, 0); }
  18.6667% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  20% { transform: translateY(0) scale(1.05, .95); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  22.5%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes ebg-mcj {   /* the small coin: up 3 (3.75% of its box) */
  0%, 10.8333% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  15% { transform: translateY(-3.75%) scale(1, 1); animation-timing-function: cubic-bezier(.32, 0, .67, 0); }
  18.6667% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  20% { transform: translateY(0) scale(1.05, .95); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  22.5%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes ebg-cb {    /* the gleam: from left of the face to right of it, slanted */
  0%, 10.8333% { transform: translateX(-150%) rotate(20deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  19.1667%, 100% { transform: translateX(400%) rotate(20deg); }
}
@keyframes ebg-hero-swing {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.315, 0.5, 0.63, 1); }
  25% { transform: rotate(4deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  75% { transform: rotate(-4deg); animation-timing-function: cubic-bezier(0.37, 0, 0.685, 0.5); }
  100% { transform: rotate(0deg); }
}
@keyframes ebg-hero-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ebg-tw-d1 {
  0% { opacity: 0.9792; animation-timing-function: cubic-bezier(0.3522, 0.1764, 0.6265, 1); }
  44.2308% { opacity: 0.35; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  94.2308% { opacity: 1; animation-timing-function: cubic-bezier(0.3435, 0, 0.676, 0.359); }
  100% { opacity: 0.9792; }
}
@keyframes ebg-tw-d2 {
  0% { opacity: 0.6428; animation-timing-function: cubic-bezier(0.314, 0.516, 0.6314, 1); }
  23.4375% { opacity: 0.35; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  73.4375% { opacity: 1; animation-timing-function: cubic-bezier(0.3713, 0, 0.6837, 0.5171); }
  100% { opacity: 0.6428; }
}
@keyframes ebg-tw-d3 {
  0% { opacity: 0.3958; animation-timing-function: cubic-bezier(0.3202, 0.6262, 0.6517, 1); }
  8.6207% { opacity: 0.35; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  58.6207% { opacity: 1; animation-timing-function: cubic-bezier(0.3745, 0, 0.6558, 0.7549); }
  100% { opacity: 0.3958; }
}
@keyframes ebg-tw-d4 {
  0% { opacity: 0.8553; animation-timing-function: cubic-bezier(0.3276, 0.379, 0.6251, 1); }
  34.2857% { opacity: 0.35; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  84.2857% { opacity: 1; animation-timing-function: cubic-bezier(0.3593, 0, 0.686, 0.4185); }
  100% { opacity: 0.8553; }
}
@keyframes ebg-tw-f1 {
  0% { opacity: 0.8937; animation-timing-function: cubic-bezier(0.3326, 0.339, 0.6248, 1); }
  36.6667% { opacity: 0.35; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  86.6667% { opacity: 1; animation-timing-function: cubic-bezier(0.3558, 0, 0.6845, 0.4021); }
  100% { opacity: 0.8937; }
}
@keyframes ebg-tw-f2 {
  0% { opacity: 0.425; animation-timing-function: cubic-bezier(0.3174, 0.6119, 0.6476, 1); }
  11.1111% { opacity: 0.35; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  61.1111% { opacity: 1; animation-timing-function: cubic-bezier(0.375, 0, 0.6622, 0.7026); }
  100% { opacity: 0.425; }
}
/* hero motion END */

/* ===================================================================== the three section titles (各雪場雪票資訊整理, 雪票購買小提醒, 接著看這些)
   and the dotted snowflake line before the tips. owner 11/10「這個標題上下空白太多…」, then「上下間格改一樣」, then「上下間格再多一倍」;
   the line:「這條線的上下間格也要調整」(the same rule). Measured ink to ink (the last thing above → the title's letters; the Kalam line's
   letters → the next thing; the dotted line's own ink: its dots and the snowflake's strokes): above = under, about 48px on every width.
   rental.css and eb-common.css are shared: these override them on this page only. The English page's lines sit differently in their
   line: its own few pixels in the .eb--en block. Nothing above comes near a title (the hero picture is 50px or more clear of the first) */
/* 各雪場雪票資訊整理: the hero's last line → the title (was the section gap, 48–64px of padding) */
.rental-a.eb .eb-list { padding-top: 34px; }
/* the dotted snowflake line: the list's last line (its note) → the line's ink, and the line's ink → 雪票購買小提醒 (was the section gap
   above it, 3/4 of it under) */
.rental-a.eb div.eb-sep { margin-top: 39px; }
.rental-a.eb .eb-sep + .ra-sec.eb-tips { padding-top: 37px; }
/* 接著看這些: the tips' last line → the title (the tips' bottom room and the dotted chapter's top room were that gap, 88–96px together);
   the closing dotted chapter (a background, not a line) starts about halfway */
.rental-a.eb .ra-tips.eb-tips { padding-bottom: 17px; }
.rental-a.eb .ra-ch3.eb-ch3 { padding-top: 17px; }
/* under the Kalam line: the first card (the grid's own 14px on top), the tips' first line, the first read-next card */
.rental-a.eb .eb-list .ra-head { margin-bottom: 34px; }
.rental-a.eb .eb-tips .ra-head { margin-bottom: 37px; }
.rental-a.eb .eb-related .ra-head { margin-bottom: 40px; }
@media (min-width: 768px) {   /* the 28–30px titles keep a pixel less room above their letters, the 28px Kalam line a few more under its own */
  .rental-a.eb .eb-sep + .ra-sec.eb-tips { padding-top: 38px; }
  .rental-a.eb .eb-list .ra-head { margin-bottom: 32px; }
  .rental-a.eb .eb-tips .ra-head { margin-bottom: 36px; }
  .rental-a.eb .eb-related .ra-head { margin-bottom: 39px; }
}
@media (min-width: 1280px) {   /* the 32px Kalam line and the tips' 17px first line */
  .rental-a.eb .eb-tips .ra-head { margin-bottom: 34px; }
  .rental-a.eb .eb-related .ra-head { margin-bottom: 37px; }
}

/* ===================================================================== the English page (owner 11/09「英文版要做」; coordinator: in this file, under .eb--en)
   g_en.py puts eb--en on the English page's <main> only: nothing here reaches the Chinese page */
/* a card's name and its 「N options」 badge: the badge stays at the top right and a long English name (Ishiuchi Maruyama, Nakazato Snow
   Wood) breaks into two lines (the Chinese page's names are short: there the badge drops under the name and js fitName shrinks it) */
.rental-a.eb.eb--en .ebg-top { flex-wrap: nowrap; }
/* the 延伸閱讀 cards: an English title stays within two lines — 20px while the cards are one or two a row (768–1023px), 17px in the
   three-column row's narrow cards (1024–1279px: 277px wide at 1024) */
@media (min-width: 768px) and (max-width: 1023px) {
  .rental-a.eb.eb--en .ebl--3 .ebl-title { font-size: 20px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .rental-a.eb.eb--en .ebl--3 .ebl-title { font-size: 17px; letter-spacing: 0; }
}
/* the window's kind tabs (1-day, Hourly, Multi-day, Season): one row on every phone — the Chinese page's ≤389px rule up to 479px */
@media (max-width: 479px) {
  .rental-a.eb.eb--en .ebg-pop .ebg-tabs { flex-wrap: nowrap; }
  .rental-a.eb.eb--en .ebg-pop .ebg-tabs .ra-tab { min-width: 0; padding: 6px 6px; letter-spacing: 0; }
}
/* ≤389px: a card's top price box beside its status box at the right (「not yet on sale」「on sale Dec 7」 are wider than 尚未開賣、
   12/7 開賣): the box takes the room left of the status and wraps inside it (its amount or unit under its label) instead of dropping
   under the status — the status stays at the right of the box's first row, never on a row of its own */
@media (max-width: 389px) {
  .rental-a.eb.eb--en .ebg-v3__top:has(> .ebg-top__s) > .ebg-vp, .rental-a.eb.eb--en .ebg-hist__top:has(> .ebg-top__s) > .ebg-vp { display: flex; }
  /* the top holds its status box whole (a block-level price box leaves no line box as tall as it: the status box would reach a pixel
     into the shop lines under the top and squeeze them) */
  .rental-a.eb.eb--en .ebg-v3__top:has(> .ebg-top__s), .rental-a.eb.eb--en .ebg-hist__top:has(> .ebg-top__s) { display: flow-root; }
}
/* a 現場票價 table that neither fits its card nor fits turned (js: is-scroll — it scrolls sideways in the card, its first column kept
   in place): an English row name is a phrase, far wider than the Chinese one. Kept on one line it left the prices no room beside it
   (360–390px: a one-row table's 「3rd Sunday each month (Dec–Mar) · With ticketed parent」 was wider than the card — its price never
   came into view). In such a table only, its words wrap at the spaces (the Chinese pieces never break; a table that fits, or fits
   turned, keeps every piece on one line here too) and the column is at least 5em: the table then fits its card, or scrolls with room
   for the prices beside the names */
.rental-a.eb.eb--en .ebg-otw.is-scroll .ebg-ot__r .ebg-nw { white-space: normal; }
.rental-a.eb.eb--en .ebg-otw.is-scroll .ebg-ot__r { min-width: 5em; }
/* the 歷史販售 button: its title and its count are two boxes side by side — the Chinese 「（N）」 brings its own space, the English
   「(N)」 needs one after 「Past sales」 */
.rental-a.eb.eb--en .ebg-hist__n { margin-left: .3em; }
/* the three section titles and the dotted line (owner 11/10「上下間格改一樣」「上下間格再多一倍」「這條線的上下間格也要調整」, about
   48px of ink above and under): the English lines above the first title, above the dotted line and above the last title end higher in
   their line than the Chinese ones (a few more pixels of room), the tips' first English line starts lower */
.rental-a.eb.eb--en .eb-list { padding-top: 37px; }
.rental-a.eb.eb--en div.eb-sep { margin-top: 42px; }
.rental-a.eb.eb--en .ra-tips.eb-tips { padding-bottom: 20px; }
@media (min-width: 768px) and (max-width: 1279px) {
  .rental-a.eb.eb--en .eb-tips .ra-head { margin-bottom: 34px; }
}