/* SnowGame /access: the rental page's look (/rental: navy round-capped outlines, flat cyan / pink / yellow fills, white
   cards, coupon tickets with a tear line, navy titles on a cyan brush with a Kalam line) as a kit shared by R1-R5.
   Copied from the coaches kit (coaches-rkit.css) and renamed: everything sits under .ar (the page's <main>), classes ar-,
   variables --ar-, keyframes ar-. How to use each piece: access-lab/rkit/KIT.md.
   Mobile first: phones up to 767px (navbar 100px up to 479px, 120px from 480px), tablets 768-1023, desktop from 1024,
   wide from 1280. Content keeps 80px clear on each side for the floating contact buttons from 601px. */
.ar {
  --ar-ink: #17375a; --ar-text: #3a5167; --ar-en: #43647c;
  --ar-ice: #eaf6fc; --ar-stub: #e8f6fb; --ar-band: #f3fafd; --ar-line: #d2e4ee; --ar-line-2: #b4d3e3; --ar-edge: #c9dfeb; --ar-perf: #8cc4d8;
  --ar-cyan: #4edce9; --ar-cyan-soft: #cdf3f8; --ar-cyan-pale: #dcf6fa; --ar-cyan-line: #8fe6ef;
  --ar-red: #c81e4a; --ar-blue: #1d6aa8; --ar-blue-2: #14507f;
  --ar-yellow: #ffd75e; --ar-yellow-soft: #fff3c8; --ar-yellow-line: #f6cf4f; --ar-pink: #ff9ec0; --ar-pink-soft: #ffe3ee;
  --ar-snow: #c3e7f2; --ar-dot: #e2f1f8;
  --ar-shadow: 0 14px 28px -22px rgba(23, 55, 90, .5);
  --ar-ease: cubic-bezier(.22, 1, .36, 1);
  --ar-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --ar-w: min(1120px, calc(100% - 40px));
  --ar-nav: 100px;
  --ar-h2: 26px; --ar-kalam: 32px; --ar-pair: 14px; --ar-body: 16px; --ar-h3s: 20px; --ar-h4s: 18px;
  --ar-sec: 64px; --ar-hd: 28px; --ar-bk: 20px; --ar-h3: 10px;
  display: block; background: #fff; color: var(--ar-text); font-size: var(--ar-body); line-height: 1.75; overflow-x: clip;
}
.ar *, .ar *::before, .ar *::after { box-sizing: border-box; }
.ar [hidden] { display: none !important; }
.ar:focus, .ar:focus-visible { outline: none !important; }
.ar h1, .ar h2, .ar h3, .ar h4, .ar p, .ar ul, .ar ol, .ar dl, .ar dd, .ar figure, .ar blockquote { margin: 0; }
.ar ul, .ar ol { padding: 0; list-style: none; }
.ar h1, .ar h2, .ar h3, .ar h4 { color: var(--ar-ink); font-family: inherit; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.ar strong, .ar b { color: var(--ar-ink); font-weight: 700; }
.ar p, .ar li, .ar dd { text-wrap: pretty; }
.ar a { color: var(--ar-blue); text-underline-offset: 3px; }
.ar img { max-width: 100%; }
.ar svg { display: block; flex-shrink: 0; }
.ar button { font: inherit; }
.ar summary { list-style: none; cursor: pointer; }
.ar summary::-webkit-details-marker { display: none; }
.ar summary::marker { content: ""; }
.ar .ar-keep { display: inline-block; }
.ar .ar-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ar .ar-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* jump targets land under the fixed navbar; controls keep clear of the navbar and the bottom contact buttons */
.ar [id] { scroll-margin-top: calc(var(--ar-nav) + 16px); }
.ar a, .ar button, .ar summary { scroll-margin-top: calc(var(--ar-nav) + 20px); scroll-margin-bottom: 84px; }
/* keyboard focus: a navy ring (clear on white, cyan and yellow); a mouse click shows none */
.ar a:focus-visible, .ar button:focus-visible, .ar summary:focus-visible, .ar [tabindex]:not(main):focus-visible { outline: 3px solid var(--ar-ink); outline-offset: 3px; }
.ar :focus:not(:focus-visible) { outline: none; }
.ar .ar-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- layout */
.ar .ar-wrap { width: var(--ar-w); margin-inline: auto; }
.ar .ar-sec { padding-top: var(--ar-sec); }
.ar .ar-sec--first { padding-top: 32px; }   /* the first section under the hero */
.ar .ar-sec--last { padding-bottom: var(--ar-sec); }   /* the last section, before the page's closing block */
.ar .ar-rule { height: 0; margin: 0; border: 0; border-top: 1px solid var(--ar-line); }
/* a dotted line with a snowflake in the middle (between the three sections) */
.ar .ar-dots {
  display: block; width: var(--ar-w); height: 26px; margin: var(--ar-sec) auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23fff'/%3E%3Cpath d='M13 4.5v17M5.6 8.7l14.8 8.6M5.6 17.3l14.8-8.6' fill='none' stroke='%234edce9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat,
    radial-gradient(circle, var(--ar-line-2) 1.6px, transparent 2.1px) center / 12px 12px repeat-x;
}

/* ---------------------------------------------------------------- section title: navy Chinese on a cyan brush + Kalam line */
.ar .ar-head { margin-bottom: var(--ar-hd); }
.ar .ar-head__title { position: relative; z-index: 0; display: inline-block; font-size: var(--ar-h2); line-height: 1.5; }
.ar .ar-head__title::after {
  content: ""; position: absolute; z-index: -1; left: -.2em; right: -.2em; top: 68%; height: 30%;
  border-radius: .3em .5em .4em .45em; background: rgba(78, 220, 233, .55); transform: rotate(-1deg); transform-origin: left center;
}
.ar .ar-en { display: block; font-family: Kalam, Arial, sans-serif; font-weight: 700; letter-spacing: 0; color: var(--ar-en); }
.ar .ar-head .ar-en { margin-top: var(--ar-pair); font-size: var(--ar-kalam); line-height: 1; text-wrap: balance; }
.ar .ar-lead { max-width: 38em; margin-bottom: var(--ar-bk); }
.ar .ar-foot { margin-top: var(--ar-hd); }
/* two-column section (>= 1024px): the title stays in view on the left while the content on the right scrolls */
.ar .ar-guide__in { padding: calc(var(--ar-sec) * 1.25) 0 calc(var(--ar-sec) / 2); }
.ar .ar-guide + .ar-guide .ar-guide__in { border-top: 1px solid var(--ar-line); }
.ar .ar-guide__body { min-width: 0; }
/* card / block titles at the site's sizes: h3 20 (22 from 768), h4 18 (20 from 768) */
.ar .ar-h3 { font-size: var(--ar-h3s); line-height: 1.45; }
.ar .ar-h4 { font-size: var(--ar-h4s); line-height: 1.45; }
.ar .ar-to { margin: 0 .12em; color: var(--ar-blue); }   /* the ⇨ in a leg title (K.leg_title_html) */

/* ---------------------------------------------------------------- hero: title + confetti, Kalam line, ribbon, lead; art on the right */
.ar .ar-hero { padding-top: calc(var(--ar-nav) + 40px); }
.ar .ar-hero__inner { position: relative; display: grid; gap: 24px; align-items: center; }
.ar .ar-hero__copy { position: relative; z-index: 1; min-width: 0; }
.ar .ar-deco { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.ar .ar-hero__title { position: relative; width: fit-content; max-width: 100%; font-size: 33px; line-height: 1.25; letter-spacing: .08em; }
.ar .ar-hero__title::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: 46px; height: 46px; margin: -28px 0 0 2px;
  pointer-events: none; transform-origin: 0 60%; background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 13.6 11 4.9' stroke='%23ff9ec0'/%3E%3Cpath d='M10.4 18 19.1 13' stroke='%23ffd75e'/%3E%3Cpath d='M12 24h10' stroke='%234edce9'/%3E%3Cpath d='M10.4 30 19.1 35' stroke='%23ff9ec0'/%3E%3Ccircle cx='22.9' cy='6.1' r='2.2' fill='%23ffd75e' stroke='none'/%3E%3C/svg%3E");
}
.ar .ar-hero__en { margin-top: 4px; font-size: 22px; line-height: 1.15; }
.ar .ar-hero__lead { max-width: 30em; margin-top: 12px; }
.ar .ar-hero__art { display: none; }
.ar .ar-hero__svg { width: 100%; height: auto; }
/* phones: a small drawing right of the Kalam line and the ribbon (the seven-character title fills the first line) */
.ar .ar-hero__mini { position: absolute; top: 50px; right: -6px; width: clamp(78px, calc(100vw - 292px), 104px); height: auto; aspect-ratio: 3 / 2; }
/* snow: pale and cyan dots and one small flake around the words */
.ar .ar-fl { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ar-snow); }
.ar .ar-fl--2, .ar .ar-fl--5 { width: 5px; height: 5px; background: var(--ar-cyan); }
.ar .ar-fl--3 {
  width: 12px; height: 12px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234edce9' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M3.8 7.2l16.4 9.6M3.8 16.8l16.4-9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ar .ar-fl--1 { top: -6px; right: 30px; }
.ar .ar-fl--2 { top: 52px; left: 168px; }
.ar .ar-fl--3 { top: 140px; right: 8px; }
.ar .ar-fl--4 { top: 150px; right: 64px; width: 6px; height: 6px; }
.ar .ar-fl--5 { top: 26px; right: 2px; }
/* ribbon (pink band, navy outline, swallow-tailed ends tucked behind): <p class="ar-ribbon"><span class="ar-ribbon__band"> */
.ar .ar-ribbon { position: relative; z-index: 0; isolation: isolate; display: block; width: fit-content; max-width: calc(100% - 24px); margin: 10px 12px 4px; }
.ar .ar-ribbon__band {
  position: relative; display: block; padding: 4px 14px; border: 2px solid var(--ar-ink); border-radius: 2px;
  background: linear-gradient(#ffd9e6, #ffc9dc); text-align: center; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ar-ink);
}
.ar .ar-ribbon__band::before, .ar .ar-ribbon__band::after { content: ""; position: absolute; z-index: -1; top: 5px; bottom: -5px; width: 26px; pointer-events: none; }
.ar .ar-ribbon__band::before {
  left: -14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' preserveAspectRatio='none'%3E%3Cpath d='M1 1H25V39H1L8.5 20Z' fill='%23ffb3cc' stroke='%2317375a' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 34.2H25V39H14Z' fill='%23e98bae'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.ar .ar-ribbon__band::after {
  right: -14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' preserveAspectRatio='none'%3E%3Cpath d='M25 1H1V39H25L17.5 20Z' fill='%23ffb3cc' stroke='%2317375a' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 34.2H1V39H12Z' fill='%23e98bae'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------- cards: white card, coupon ticket (tear line + tinted stub) */
.ar .ar-card { position: relative; min-width: 0; padding: 20px; border: 1.5px solid var(--ar-line); border-radius: 20px; background: #fff; box-shadow: var(--ar-shadow); }
.ar .ar-ticket { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border-radius: 20px; box-shadow: var(--ar-shadow); }
.ar .ar-ticket::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--ar-edge); border-radius: inherit; pointer-events: none; }
.ar .ar-ticket__main { flex: 1 1 auto; min-width: 0; padding: 16px; }
.ar .ar-ticket__stub { position: relative; padding: 12px 16px 16px; background: var(--ar-stub); border-top: 2px dashed var(--ar-perf); }
/* the two notches show the page's white, with the ticket's edge line around them */
.ar .ar-ticket__stub::before, .ar .ar-ticket__stub::after {
  content: ""; position: absolute; z-index: 1; top: -13px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--ar-edge);
}
.ar .ar-ticket__stub::before { left: -12px; }
.ar .ar-ticket__stub::after { right: -12px; }
/* sideways ticket: stub on the right, the tear line runs top to bottom (the rental tickets at 768-1279px) */
.ar .ar-ticket--row { flex-direction: row; }
.ar .ar-ticket--row > .ar-ticket__stub { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; border-top: 0; border-left: 2px dashed var(--ar-perf); }
.ar .ar-ticket--row > .ar-ticket__stub::before, .ar .ar-ticket--row > .ar-ticket__stub::after { left: -13px; right: auto; }
.ar .ar-ticket--row > .ar-ticket__stub::before { top: -12px; }
.ar .ar-ticket--row > .ar-ticket__stub::after { top: auto; bottom: -12px; }
.ar .ar-ticket__label { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ar-text); }
/* the big word top right (the rental tickets' 「9 折」), in navy */
.ar .ar-ticket__big { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; color: var(--ar-ink); font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: .04em; white-space: nowrap; }
/* big figures (time / fare): a small clock / yen icon (or a 15px label), then the value: lead words small, the number
   enlarged (fare in red, like the rental tickets' 「9 折」), a second value on its own smaller line; words stay in order */
.ar .ar-figs { display: grid; gap: 6px 16px; }
.ar .ar-fig { display: flex; align-items: flex-start; column-gap: 10px; min-width: 0; color: var(--ar-ink); line-height: 1.3; }
.ar .ar-fig__k { flex: 0 0 auto; min-width: 4.4em; padding-top: .55em; font-size: 15px; font-weight: 700; color: var(--ar-text); }
.ar .ar-fig__i { flex: 0 0 auto; padding-top: 5px; }
.ar .ar-fig__v { min-width: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.ar .ar-num { font-size: 1.75em; font-weight: 800; letter-spacing: .01em; line-height: 1.1; }
.ar .ar-num--zh { font-size: 1.35em; }   /* 三個半: Chinese numerals read heavier than digits */
.ar .ar-fig--fare .ar-num { color: var(--ar-red); }
.ar .ar-fig__q { margin-right: 4px; font-size: 15px; font-weight: 700; }
.ar .ar-fig__core { white-space: nowrap; }   /* the number never parts from its unit (1,200｜日幣) */
.ar .ar-fig__more { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ar-text); }

/* ---------------------------------------------------------------- round icons, icon rows, four tips */
.ar .ar-ic { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--ar-ice); }
.ar .ar-ic svg { width: 40px; height: 40px; fill: none; stroke: var(--ar-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar .ar-ic--md { width: 44px; height: 44px; }
.ar .ar-ic--md svg { width: 30px; height: 30px; stroke-width: 1.9; }
.ar .ar-ic--sm { width: 28px; height: 28px; }
.ar .ar-ic--sm svg { width: 20px; height: 20px; stroke-width: 1.8; }
.ar .ar-ic--yellow { background: var(--ar-yellow-soft); }
.ar .ar-ic--pink { background: var(--ar-pink-soft); }
.ar .ar-ic--white { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ar-line-2); }
.ar .ar-points { display: grid; gap: 8px; line-height: 1.5; }
.ar .ar-points > li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ar .ar-points > li > .ar-ic--sm { margin-top: calc((1.5em - 28px) / 2); }
.ar .ar-kv { display: flex; gap: 8px; min-width: 0; }
.ar .ar-kv__k { flex: 0 0 auto; min-width: 4.4em; color: var(--ar-ink); font-weight: 700; }
.ar .ar-kv__v { min-width: 0; }
.ar .ar-tips { display: grid; gap: calc(var(--ar-bk) + 8px); }
.ar .ar-tip { display: flex; align-items: flex-start; gap: 14px; }
.ar .ar-tip__title { font-size: 18px; line-height: 1.5; }
.ar .ar-tip p { max-width: 38em; margin-top: var(--ar-h3); }

/* ---------------------------------------------------------------- tinted panels (cyan / yellow / blue) with round picture tiles */
.ar .ar-boxes { display: grid; gap: 16px; }
.ar .ar-box { min-width: 0; padding: 20px; border: 1.5px solid var(--ar-perf); border-radius: 20px; background: #eafafd; color: var(--ar-ink); }
.ar .ar-box--yellow { border-color: #e5c469; background: #fff6d6; }
.ar .ar-box--blue { border-color: #9cc9e3; background: #f1f7fd; }
.ar .ar-box__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ar-ink); }
.ar .ar-box__icon { width: 28px; height: 28px; }
.ar .ar-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 14px 4px; margin-top: 16px; }
.ar .ar-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 6px 2px 8px;
  border: 0; border-radius: 16px; background: none; color: var(--ar-ink); font-size: 16px; line-height: 1.35;
  text-align: center; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere;
}
.ar button.ar-tile, .ar a.ar-tile { cursor: pointer; transition: background-color .3s; }
.ar button.ar-tile:hover, .ar a.ar-tile:hover { background: rgba(255, 255, 255, .75); }
.ar .ar-tile[aria-pressed="true"], .ar .ar-tile[aria-current="true"], .ar .ar-tile[aria-selected="true"] { background: var(--ar-cyan-soft); font-weight: 800; }
.ar .ar-tile__art { display: grid; place-items: center; width: 52px; height: 52px; padding: 5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ar-line-2); }
.ar .ar-tile__art, .ar .ar-tile__art svg { fill: none; stroke: var(--ar-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ar .ar-tile__art > svg { width: 100%; height: 100%; }
.ar .ar-box--yellow .ar-tile__art { box-shadow: inset 0 0 0 1.5px #edc3d3; }

/* ---------------------------------------------------------------- segmented switch (navy capsule = chosen) */
.ar .ar-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #eef4f8; }
.ar .ar-seg__btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ar-text);
  font-weight: 700; line-height: 1.3; cursor: pointer; transition: background-color .3s, color .3s;
}
.ar .ar-seg__btn:hover { background: #e0ebf2; }
.ar .ar-seg__btn[aria-selected="true"], .ar .ar-seg__btn[aria-pressed="true"] { background: var(--ar-ink); color: #fff; }

/* ---------------------------------------------------------------- folding groups (the rental notice, version d) */
.ar .ar-acc { display: grid; gap: 12px; }
.ar .ar-acc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 10px 10px 18px;
  border-radius: 16px; background: var(--ar-band); box-shadow: inset 0 0 0 1.5px var(--ar-line);
  font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ar-ink); transition: background-color .3s ease, color .3s ease;
}
.ar .ar-acc__sum:hover { background: #e3f4fa; }
.ar .ar-acc__chev { flex: 0 0 auto; width: 40px; height: 40px; transition: transform .3s; }
.ar .ar-acc__item[open] > .ar-acc__sum .ar-acc__chev { transform: rotate(180deg); }
.ar .ar-acc__item.is-closing > .ar-acc__sum .ar-acc__chev { transform: none; }
.ar .ar-acc__item[open]:not(.is-closing) > .ar-acc__sum { background: var(--ar-cyan-soft); color: var(--ar-blue); }
.ar .ar-acc__body { padding: 16px 4px 10px; }

/* ---------------------------------------------------------------- a short timeline (the rental process): dots on a line */
.ar .ar-flow { --ar-c: var(--ar-cyan); --ar-c-soft: var(--ar-cyan-pale); --ar-c-line: var(--ar-cyan-line); }
.ar .ar-flow--yellow { --ar-c: var(--ar-yellow); --ar-c-soft: var(--ar-yellow-soft); --ar-c-line: var(--ar-yellow-line); }
.ar .ar-flow__step { position: relative; padding: 0 0 var(--ar-bk) 30px; }
.ar .ar-flow__step:last-child { padding-bottom: 0; }
.ar .ar-flow__step::before {
  content: ""; position: absolute; z-index: 1; left: 1px; top: 8px; width: 14px; height: 14px;
  border: 2.5px solid var(--ar-ink); border-radius: 50%; background: var(--ar-c); box-shadow: 0 0 0 3px #fff;
}
.ar .ar-flow__step:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: 15px; bottom: -15px; width: 3px; border-radius: 2px; background: var(--ar-c-line); transform-origin: top; }
.ar .ar-flow__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ar .ar-flow__stage { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--ar-c-soft); font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--ar-ink); }

/* ---------------------------------------------------------------- small bits: tags, count pill, badges, washi label, pills, notes, dots list */
.ar .ar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ar .ar-tag { font-family: var(--ar-sans); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 999px; background: var(--ar-ice); color: var(--ar-ink); font-size: 15px; font-weight: 700; line-height: 1.6; }
.ar .ar-tag--cyan { background: var(--ar-cyan-pale); }
.ar .ar-tag--yellow { background: var(--ar-yellow-soft); }
.ar .ar-tag--pink { background: var(--ar-pink-soft); }
.ar .ar-tag--line { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ar-line-2); }
.ar .ar-count { font-family: var(--ar-sans); letter-spacing: .02em; vertical-align: .15em; display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--ar-ink); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
/* badges on a way of travel (最快速／最經濟實惠／JR PASS 可用／JR PASS 不可用): small capsules with a thin line */
.ar .ar-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ar .ar-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 1.5px solid transparent; border-radius: 999px;
  font-family: var(--ar-sans); font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; white-space: nowrap; color: var(--ar-ink);
}
.ar .ar-badge--fast { background: var(--ar-cyan-pale); border-color: var(--ar-cyan-line); }
.ar .ar-badge--cheap { background: var(--ar-yellow-soft); border-color: var(--ar-yellow-line); }
.ar .ar-badge--pass { background: #e3f6ec; border-color: #9fd8b7; color: #1f5c3d; }
.ar .ar-badge--nopass { background: var(--ar-pink-soft); border-color: #f2b3c9; color: #8a1538; }
.ar .ar-washi {
  display: inline-block; padding: 1px 14px; rotate: -4deg;
  background: repeating-linear-gradient(-45deg, rgba(78, 220, 233, .42) 0 6px, rgba(78, 220, 233, .26) 6px 12px);
  font-family: Kalam, Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ar-en);
}
.ar .ar-washi--pink { rotate: 3deg; background: repeating-linear-gradient(-45deg, rgba(255, 158, 192, .45) 0 6px, rgba(255, 158, 192, .28) 6px 12px); }
.ar .ar-pill { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-radius: 14px; background: var(--ar-cyan-pale); font-weight: 700; line-height: 1.55; color: var(--ar-ink); }
.ar .ar-pill--yellow { background: var(--ar-yellow-soft); }
.ar .ar-pill > svg { width: 20px; height: 20px; margin-top: calc((1.55em - 20px) / 2); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* notes inside a way of travel: ⚠️ pale yellow + warning icon, ✔️ pale cyan + tick (icons carry role="img" aria-label) */
.ar .ar-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1.5px solid #e5b83e; border-left-width: 5px; border-radius: 14px; background: #fff6d6; color: var(--ar-ink); font-weight: 700; line-height: 1.75; }
.ar .ar-note--ok { border-color: var(--ar-cyan-line); border-left-color: #35c3d2; background: #e6f9fb; }
.ar .ar-note__ic { flex: 0 0 auto; display: block; width: 24px; height: 24px; margin-top: calc((1.75em - 24px) / 2); }
.ar .ar-note__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--ar-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar .ar-note + .ar-note { margin-top: 8px; }
.ar .ar-warn { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1.5px solid #e5b83e; border-left-width: 5px; border-radius: 16px; background: #fff6d6; color: var(--ar-ink); }
.ar .ar-dotlist { display: grid; gap: 10px; }
.ar .ar-dotlist > li { position: relative; padding-left: 18px; }
.ar .ar-dotlist > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--ar-cyan); }

/* ---------------------------------------------------------------- decorations: washi tape, lift-ticket tag (aria-hidden, use sparingly) */
.ar .ar-tape {
  position: absolute; z-index: 2; width: 64px; height: 18px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 1.2px, transparent 1.7px) 2px 2px / 8px 8px, rgba(255, 158, 192, .45);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 12.5%, calc(100% - 3px) 25%, 100% 37.5%, calc(100% - 3px) 50%, 100% 62.5%,
    calc(100% - 3px) 75%, 100% 87.5%, calc(100% - 3px) 100%, 3px 100%, 0 87.5%, 3px 75%, 0 62.5%, 3px 50%, 0 37.5%, 3px 25%, 0 12.5%);
}
.ar .ar-tape--cyan { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 8px), rgba(78, 220, 233, .42); }
.ar .ar-tape--tl { top: 4px; left: -17px; rotate: -38deg; }
.ar .ar-tape--tr { top: 4px; right: -17px; rotate: 38deg; }
.ar .ar-liftag {
  position: relative; display: grid; place-items: end center; width: 28px; height: 38px; padding-bottom: 5px;
  border: 2px solid var(--ar-ink); border-radius: 6px; rotate: 8deg; transform-origin: 50% -14px;
  background:
    radial-gradient(circle at 50% 6px, #fff 0 2.4px, var(--ar-ink) 2.6px 3.7px, transparent 4px),
    linear-gradient(90deg, var(--ar-ink) 55%, transparent 0) 0 11px / 4.4px 1.6px repeat-x,
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 5px) 0 0 / 100% 11px no-repeat,
    linear-gradient(var(--ar-tag, var(--ar-cyan)) 0 11px, #fff 0);
  color: var(--ar-ink); font-family: Kalam, Arial, sans-serif; font-size: 17px; font-weight: 700; line-height: 1;
}
.ar .ar-liftag--yellow { --ar-tag: var(--ar-yellow); }
.ar .ar-liftag--pink { --ar-tag: var(--ar-pink); }
.ar .ar-liftag::before {
  content: ""; position: absolute; left: 50%; top: -17px; width: 10px; height: 24px; margin-left: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M5 .5 2.3 20.5Q5 24.2 7.7 20.5Z' fill='none' stroke='%2317375a' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------- buttons: blue capsule (main), white capsule with a blue line */
.ar .ar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 22px;
  border: 2px solid transparent; border-radius: 999px; background: var(--ar-blue); color: #fff;
  font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .3s;
}
.ar .ar-btn:hover { background: var(--ar-blue-2); color: #fff; }
.ar .ar-btn--ink { background: var(--ar-ink); }
.ar .ar-btn-o {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 20px;
  border: 2px solid var(--ar-blue); border-radius: 999px; background: #fff; color: var(--ar-blue);
  font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s;
}
.ar .ar-btn-o:hover { background: var(--ar-blue); color: #fff; }
.ar .ar-btn--block, .ar .ar-btn-o--block { display: flex; width: 100%; }
.ar .ar-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ar .ar-btns > a { flex: 1 1 140px; }

/* ---------------------------------------------------------------- resort cards: logo frame + name (h3) + Japanese name; a link card when it has a page */
.ar .ar-resorts { display: grid; gap: 12px; }
.ar .ar-resort {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-width: 0; height: 100%;
  padding: 12px 14px 12px 12px; border-radius: 16px; background: #fff; box-shadow: var(--ar-shadow), 0 0 0 1.5px var(--ar-edge);
  color: var(--ar-ink); text-decoration: none;
}
.ar a.ar-resort { transition: box-shadow .3s; }
.ar a.ar-resort:hover { box-shadow: 0 16px 30px -20px rgba(23, 55, 90, .55), 0 0 0 2px var(--ar-blue); }
.ar .ar-resort__logo { display: grid; place-items: center; width: 84px; height: 60px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ar-line); overflow: hidden; }
.ar .ar-resort__logo img, .ar .ar-resort__logo picture { display: block; max-width: 100%; max-height: 50px; width: auto; height: auto; object-fit: contain; }
.ar .ar-resort__logo picture img { max-height: 50px; }
/* 神立 and 湯澤公園 have white logos: their brand colours behind the picture (as on the original page) */
.ar .ar-resort__logo--red img { padding: 5px 10px; background: #fd0000; }
.ar .ar-resort__logo--blue img { padding: 5px 20px; background: #06c; }
.ar .ar-resort__text { min-width: 0; }
.ar .ar-resort__name { font-size: 18px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.ar .ar-resort__name sub { font-size: 15px; vertical-align: baseline; }
.ar .ar-resort__jp { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--ar-text); }
.ar .ar-resort__go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ar-cyan); color: var(--ar-ink); transition: background-color .3s; }
.ar .ar-resort__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ar a.ar-resort:hover .ar-resort__go { background: #8ae9f2; }

/* ---------------------------------------------------------------- shared dialog (<dialog data-ar-dialog>), drawn as a ticket.
   The content comes from a <details class="ar-pop" data-ar-modal>: its body moves in while open and back when it closes. */
.ar .ar-dialog {
  width: min(640px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 24px); margin: auto; padding: 0; border: 0; border-radius: 20px;
  background: #fff; color: var(--ar-text); box-shadow: 0 24px 60px -24px rgba(23, 55, 90, .6); overflow: auto; overscroll-behavior: contain;
  font-size: var(--ar-body); font-weight: 400; line-height: 1.75; letter-spacing: normal; text-align: left; white-space: normal;
}
.ar .ar-dialog::backdrop { background: rgba(23, 55, 90, .45); }
.ar .ar-dialog[open] { animation: ar-dlg-in .3s var(--ar-ease); }
@keyframes ar-dlg-in { from { opacity: 0; translate: 0 12px; } }
.ar .ar-dialog__close {
  position: sticky; z-index: 3; top: 10px; display: grid; place-items: center; width: 44px; height: 44px; margin: 10px 10px -54px auto; padding: 0;
  border: 0; border-radius: 50%; background: #fff; color: var(--ar-ink); box-shadow: inset 0 0 0 1.5px var(--ar-line-2), 0 6px 14px -8px rgba(23, 55, 90, .5);
  cursor: pointer; transition: background-color .3s;
}
.ar .ar-dialog__close:hover { background: var(--ar-ice); }
.ar .ar-dialog__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.ar .ar-dialog__top { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 16px 64px 12px 20px; }
.ar .ar-dialog__title { min-width: 0; font-size: 22px; font-weight: 700; line-height: 1.35; color: var(--ar-ink); overflow-wrap: anywhere; }
.ar .ar-pop__main { padding: 4px 0 16px; }
.ar .ar-pop__stub { position: relative; padding: 14px 16px 16px; border-radius: 0 0 16px 16px; background: var(--ar-stub); border-top: 2px dashed var(--ar-perf); }
.ar .ar-dialog .ar-pop__main { padding: 0 20px 20px; }
.ar .ar-dialog .ar-pop__stub { padding: 16px 20px 22px; border-radius: 0; }

/* ---------------------------------------------------------------- motion: only after access-rkit.js adds .ar-motion (never without
   JS or with reduced motion). Owner 11/07: starts the moment a part comes into view, the main content shows within about
   0.5s, a whole part is done in 1-1.2s, delays at most 0.2s, small moves (<= 12px). Accents replay each time a part comes
   back into view (after leaving it for 600ms or more); words never fade or move, except cards marked
   data-ar-reveal="once", which rise in the first time only. */
.ar.ar-motion .ar-head[data-ar-reveal] .ar-head__title::after { transform: rotate(-1deg) scaleX(0); }
.ar.ar-motion .ar-head[data-ar-reveal].is-on .ar-head__title::after { transform: rotate(-1deg) scaleX(1); transition: transform .8s var(--ar-ease); }
.ar.ar-motion .ar-deco[data-ar-reveal]:not(.is-on) ~ .ar-hero__copy .ar-hero__title::after { opacity: 0; scale: .3; }
.ar.ar-motion .ar-deco[data-ar-reveal].is-on ~ .ar-hero__copy .ar-hero__title::after { transition: scale .7s var(--ar-ease) .1s, opacity .4s .1s; }
.ar.ar-motion .ar-deco[data-ar-reveal]:not(.is-on) .ar-fl { opacity: 0; translate: 0 -12px; }
.ar.ar-motion .ar-deco[data-ar-reveal].is-on .ar-fl { transition: translate .9s var(--ar-ease) .1s, opacity .5s .1s; }
.ar.ar-motion .ar-deco[data-ar-reveal].is-on .ar-fl--2 { transition-delay: .13s; }
.ar.ar-motion .ar-deco[data-ar-reveal].is-on .ar-fl--3 { transition-delay: .16s; }
.ar.ar-motion .ar-deco[data-ar-reveal].is-on .ar-fl--4 { transition-delay: .18s; }
.ar.ar-motion .ar-deco[data-ar-reveal].is-on .ar-fl--5 { transition-delay: .2s; }
/* things hanging in the drawings swing once when they come into view (1.1s, no loop) */
.ar .ar-swing { transform-box: view-box; transform-origin: var(--ar-pivot, 50% 0); }
.ar.ar-motion [data-ar-reveal].is-on .ar-swing { animation: ar-swing 1.1s ease-out .1s both; }
@keyframes ar-swing { 0% { rotate: 0deg; } 18% { rotate: 8deg; } 45% { rotate: -5deg; } 70% { rotate: 2.4deg; } 88% { rotate: -1deg; } 100% { rotate: 0deg; } }
.ar.ar-motion [data-ar-reveal="once"]:not(.is-on) { opacity: 0; translate: 0 12px; }
.ar.ar-motion [data-ar-reveal="once"].is-on { transition: opacity .7s var(--ar-ease) var(--ar-delay, 0s), translate .9s var(--ar-ease) var(--ar-delay, 0s); }

/* ---------------------------------------------------------------- sizes */
@media (max-width: 389px) {
  .ar .ar-ribbon { margin-inline: 10px; }
  .ar .ar-ribbon__band { padding-inline: 12px; }
  .ar .ar-ribbon__band::before { left: -12px; width: 23px; }
  .ar .ar-ribbon__band::after { right: -12px; width: 23px; }
}
@media (max-width: 374px) {
  .ar .ar-ribbon__band { font-size: 17px; }
}
@media (max-width: 360px) {
  .ar { --ar-w: calc(100% - 32px); }
}
@media (max-width: 340px) {
  .ar .ar-hero__mini, .ar .ar-fl--3, .ar .ar-fl--4 { display: none; }
  .ar .ar-ribbon__band { font-size: 16px; }
}
@media (min-width: 480px) {
  .ar { --ar-nav: 120px; }
}
@media (min-width: 600px) {
  .ar .ar-resorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 1279px) {
  .ar { --ar-w: calc(100% - 160px); }
}
/* large phones and the 703px preview: more room on the right, so the small drawing grows */
@media (min-width: 600px) and (max-width: 767px) {
  .ar .ar-hero__mini { top: 40px; width: 140px; }
}
@media (min-width: 720px) {
  .ar .ar-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .ar { --ar-h2: 28px; --ar-kalam: 28px; --ar-pair: 2px; --ar-sec: 48px; --ar-hd: 16px; --ar-bk: 16px; --ar-h3: 2px; --ar-h3s: 22px; --ar-h4s: 20px; }
  .ar .ar-head__title { line-height: 1.4; }
  .ar .ar-head .ar-en { line-height: 1.15; text-wrap: wrap; }
  .ar .ar-sec--first { padding-top: 24px; }
  .ar .ar-guide__in { padding: calc(var(--ar-sec) / 2) 0; }
  .ar .ar-hero { padding-top: calc(var(--ar-nav) + 16px); }
  .ar .ar-hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 28px; }
  .ar .ar-hero__title { font-size: 48px; letter-spacing: .02em; }
  .ar .ar-hero__title::after { width: 52px; height: 52px; margin: -31px 0 0 4px; }
  .ar .ar-ribbon { margin: 14px 16px 8px; }
  .ar .ar-ribbon__band { padding: 6px 20px; font-size: 21px; }
  .ar .ar-ribbon__band::before, .ar .ar-ribbon__band::after { top: 6px; bottom: -6px; width: 32px; }
  .ar .ar-ribbon__band::before { left: -18px; }
  .ar .ar-ribbon__band::after { right: -18px; }
  .ar .ar-hero__art { display: block; width: 100%; max-width: 300px; justify-self: end; }
  .ar .ar-hero__mini { display: none; }
  .ar .ar-fl { left: auto; }
  .ar .ar-fl--1, .ar .ar-fl--2, .ar .ar-fl--3 { display: none; }   /* tablets: the long title fills the copy column */
  .ar .ar-fl--4 { top: -8px; right: 26px; }
  .ar .ar-fl--5 { top: 132px; right: -10px; }
  .ar .ar-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
  .ar .ar-acc { gap: 10px; }
  .ar .ar-dialog__top { padding: 22px 70px 14px 28px; }
  .ar .ar-dialog__title { font-size: 24px; }
  .ar .ar-dialog .ar-pop__main { padding: 0 28px 24px; }
  .ar .ar-dialog .ar-pop__stub { padding: 18px 28px 26px; }
}
@media (min-width: 1024px) {
  .ar { --ar-body: 17px; --ar-sec: 64px; --ar-hd: 24px; }
  .ar .ar-sec--first { padding-top: 32px; }
  .ar .ar-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; }
  .ar .ar-hero__title { letter-spacing: .06em; }
  .ar .ar-hero__art { max-width: 330px; }
  .ar .ar-fl--1, .ar .ar-fl--2, .ar .ar-fl--3 { display: block; }   /* as on the rental page: just left of the drawing */
  .ar .ar-fl--1 { top: 6px; right: 356px; }
  .ar .ar-fl--2 { top: 104px; right: 366px; }
  .ar .ar-fl--3 { top: 170px; right: 344px; width: 16px; height: 16px; }
  .ar .ar-tips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .ar .ar-tip { flex-direction: column; gap: 12px; }
  .ar .ar-guide__in { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .ar .ar-guide__in > .ar-head { position: sticky; top: 160px; margin-bottom: 0; }
  .ar .ar-resorts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1280px) {
  .ar { --ar-h2: 30px; --ar-kalam: 32px; }
  .ar .ar-hero__title { font-size: 52px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .ar *, .ar *::before, .ar *::after { transition: none !important; animation: none !important; }
}