/* =====================================================================
   伊豆・熱海 スタンプラリー v2 — styles.css
   「クレーンが押す、紙のスタンプ帳」。旅先でもらう紙の台紙・切符・抽選券の作法で組む。
   色は無地の色面だけ（グラデーション・ぼかし・光彩は使わない）。影は使わず、紙の重なりは墨の線で示す。
   動きは「スタンプ獲得の瞬間（クレーン）」だけ。ほかはボタンの押し込み程度。
   ===================================================================== */
@font-face {
  font-family: "Dela Gothic One";
  src: url("../assets/fonts/DelaGothicOne-subset.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --sumi: #1F2A52;        /* 墨（文字・線）。真っ黒は使わない */
  --paper: #FFFDF5;       /* 紙（台紙・券） */
  --sea: #BFE5E0;         /* 海（ページの地） */
  --sea-deep: #93D2CB;
  --custard: #FFD24A;     /* カスタード（強調・主ボタン） */
  --shu: #D63A2F;         /* 朱（角印・受付印・注意） */
  --shu-text: #B92C22;    /* 朱の小さい文字用（紙の上で読める濃さ） */
  --green: #3B8A2E;
  --green-text: #2F7325;
  --rule: #CDD0D9;        /* 紙の上の細い罫線 */
  --mute: #8A90A4;        /* 大きい文字にだけ使う薄墨 */
  --cell: #E6F4F0;        /* 帳票の見出しセル */
  --line-green: #06C755;
  --dela: "Dela Gothic One", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --sans: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
  --crane-ms: 1900ms;     /* app.js の CRANE_MS と合わせる */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sea); color: var(--sumi);
  font-family: var(--sans); font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--sumi); outline-offset: 2px; }
.nb { white-space: nowrap; }
.stamp-txt { font-family: var(--dela); font-weight: 400; }

/* ---------------------------------------------------------------- 枠 */
.shell { max-width: 430px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 10px 14px 4px; }
.top__brand { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-decoration: none; }
.top__nav { display: flex; gap: 14px; flex: 1; min-width: 0; }
.top__nav a { font-size: 14px; font-weight: 800; text-decoration: none; padding: 6px 0 3px; border-bottom: 3px solid transparent; white-space: nowrap; }
.top__nav a[aria-current="page"] { border-bottom-color: var(--sumi); }
:lang(en) .top { gap: 9px; }
:lang(en) .top__nav { gap: 10px; }
:lang(en) .top__nav a { font-size: 13px; }
.lang { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; }
.lang__btn { border: 0; background: none; color: var(--sumi); font-size: 12px; font-weight: 800; padding: 8px 4px; min-width: 30px; }
.lang__btn[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
.imgnote { margin: 0; padding: 0 14px 8px; font-size: 11px; line-height: 1.5; }
.page { padding: 4px 12px 28px; display: flex; flex-direction: column; gap: 14px; }
.paper { background: var(--paper); border: 1.5px solid var(--sumi); border-radius: 5px; }
.foot { margin-top: auto; padding: 6px 14px 28px; font-size: 11.5px; line-height: 1.6; }
.foot p { margin: 0 0 6px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.foot__links a { font-weight: 800; padding: 6px 0; text-underline-offset: 3px; }
.foot__brand { font-weight: 900; letter-spacing: .2em; }

/* ---------------------------------------------------------------- 文字・小物 */
.h1 { font-family: var(--dela); font-weight: 400; font-size: 26px; line-height: 1.3; margin: 4px 2px 0; }
.h1--sm { font-size: 21px; margin: 0; }
.h2 { font-size: 15px; font-weight: 800; line-height: 1.4; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 3px solid var(--sumi); }
.h2--plain { border: 0; padding: 0; margin: 0 2px 8px; }
.lead { margin: 0 2px; font-size: 14px; }
.smallnote { margin: 0 2px; font-size: 12px; line-height: 1.6; }
.tag { display: inline-block; border: 1.5px solid var(--sumi); border-radius: 2px; padding: 0 6px; font-size: 11px; font-weight: 800; line-height: 1.7; background: var(--paper); color: var(--sumi); white-space: nowrap; }
.tag--dash { border-style: dashed; }
.tlink { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 800; text-underline-offset: 3px; padding: 4px 0; }
.arw { width: 14px; height: 14px; flex: none; }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; font-size: 13px; font-weight: 800; text-decoration: none; }
.dots, .checks { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.65; }
.dots li, .checks li { position: relative; padding-left: 15px; }
.dots li + li, .checks li + li { margin-top: 3px; }
.dots li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--sumi); }
.checks li { padding-left: 22px; }
.checks li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 11px; height: 6px; border-left: 2.4px solid var(--sumi); border-bottom: 2.4px solid var(--sumi); transform: rotate(-45deg); }
.is-strong { font-weight: 800; }
.no { display: inline-grid; place-items: center; flex: none; width: 19px; height: 19px; border: 1.5px solid var(--sumi); border-radius: 50%; background: var(--paper); color: var(--sumi); font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; }
.no--got { color: var(--paper); }

/* ボタン：紙の札。押すと 3px 沈む（動きはこれだけ） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 9px 16px; border: 1.5px solid var(--sumi); border-radius: 6px;
  background: var(--paper); color: var(--sumi); font-size: 15px; font-weight: 800; line-height: 1.35; text-decoration: none;
  box-shadow: 0 3px 0 var(--sumi); margin-bottom: 3px; transition: transform .06s, box-shadow .06s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sumi); }
.btn--main { background: var(--custard); }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 40px; font-size: 13.5px; padding: 6px 12px; }
.btn--text { border: 0; box-shadow: none; background: none; min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.btn--text:active { transform: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ミシン目（切り取り線）。両端に切り欠き */
.perf { position: relative; height: 0; margin: 0 -1.5px; border-top: 2px dashed var(--sumi); }
.perf::before, .perf::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--sea); border: 1.5px solid var(--sumi); }
.perf::before { left: -8px; clip-path: inset(-2px -2px -2px 50%); }
.perf::after { right: -8px; clip-path: inset(-2px 50% -2px -2px); }

/* ---------------------------------------------------------------- トップ＝台紙 */
.dh { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 14px 14px 0; }
.dh__over { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .16em; line-height: 1.4; }
.dh__over span { border: 1.5px solid var(--sumi); border-radius: 2px; padding: 0 5px; font-size: 10px; letter-spacing: .06em; }
.dh__title { margin: 6px 0 10px; font-family: var(--dela); font-weight: 400; line-height: 1.14; }
.dh__title span { display: block; }
.dh__title span:first-child { font-size: 37px; }
.dh__title span:last-child { font-size: 25px; margin-top: 2px; }
:lang(en) .dh__title span:first-child { font-size: 31px; }
:lang(en) .dh__title span:last-child { font-size: 23px; }
.dh__capy { align-self: end; width: 86px; margin: 0 4px -3px 0; }
.dh__capy .capy { display: block; width: 100%; height: auto; }
.dh__strip { grid-column: 1 / -1; display: flex; align-items: stretch; border: 1.5px solid var(--sumi); border-radius: 3px; font-size: 13px; font-weight: 800; line-height: 1.5; overflow: hidden; }
.dh__strip > span { padding: 5px 10px; }
.dh__season { background: var(--sumi); color: var(--paper); font-family: var(--dela); font-weight: 400; letter-spacing: .06em; white-space: nowrap; }
.dh__until, .dh__ended { flex: 1; }
.dh__left { border-left: 1.5px dashed var(--sumi); white-space: nowrap; }
:lang(en) .dh__strip { font-size: 11.5px; }
:lang(en) .dh__strip > span { padding: 5px 7px; white-space: nowrap; }
:lang(en) .dh__season { font-size: 12px; }
.dh__lead { margin: 0; padding: 10px 14px 0; font-size: 13px; line-height: 1.6; }

.sheet { position: relative; width: 320px; height: 392px; margin: 8px auto 4px; }
.sheet__route { position: absolute; left: 0; top: 0; }
.sheet__count { position: absolute; left: 4px; bottom: 2px; margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 800; line-height: 1; }
.sheet__count b { position: relative; font-family: var(--dela); font-weight: 400; font-size: 30px; }
.cnt__old { position: absolute; left: 0; top: 0; opacity: 0; }
.sheet__count i { font-family: var(--dela); font-style: normal; font-size: 15px; }
.slot { position: absolute; display: block; width: 132px; text-decoration: none; color: inherit; }
.slot__ring { position: relative; display: block; width: 132px; height: 132px; }
.slot__disc, .slot__empty, .slot__stamp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.slot__disc { background: var(--paper); border-radius: 50%; }
.slot__stamp svg { display: block; width: 100%; height: 100%; }
.slot__label { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; align-items: start; width: 150px; margin: 5px 0 0 -9px; line-height: 1.3; }
.slot__name { font-size: 12.5px; font-weight: 800; padding-top: 1px; }
.slot__area { grid-column: 2; font-size: 11px; }
/* コンプリートの角印：1つ目と2つ目のスタンプにまたがって斜めに押す（欄の名前には重ねない） */
.sheet__seal { position: absolute; left: 99px; top: 4px; width: 122px; height: 122px; transform: rotate(-12deg); mix-blend-mode: multiply; pointer-events: none; }
.sheet__seal svg { display: block; width: 100%; height: 100%; }

/* 引換券 */
.coupons { margin-top: 10px; }
.coupon { display: grid; grid-template-columns: 104px 1fr; }
.coupon__stub { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 8px 12px 14px; border-right: 1.5px dashed var(--sumi); line-height: 1.2; }
.coupon__kind { font-size: 10px; font-weight: 800; letter-spacing: .2em; margin-bottom: 3px; }
.coupon__big { font-family: var(--dela); font-weight: 400; font-size: 22px; color: var(--mute); }
.coupon__mid { font-family: var(--dela); font-weight: 400; font-size: 19px; color: var(--mute); }
.coupon--2 .coupon__mid { font-size: 13px; margin-top: 2px; }
:lang(en) .coupon__big { font-size: 15px; }
:lang(en) .coupon__mid, :lang(en) .coupon--2 .coupon__mid { font-size: 12px; margin-top: 2px; }
.coupon__left { margin-top: auto; padding-top: 8px; font-size: 12px; font-weight: 800; }
.coupon__ok { margin-top: auto; display: grid; place-items: center; width: 32px; height: 32px; border: 2.4px solid var(--shu); border-radius: 50%; background: var(--paper); color: var(--shu); font-family: var(--dela); font-size: 14px; line-height: 1; transform: rotate(-10deg); }
:lang(en) .coupon__ok { font-size: 10.5px; }
.coupon.is-on .coupon__stub { background: var(--custard); }
.coupon.is-on .coupon__big, .coupon.is-on .coupon__mid { color: var(--sumi); }
.coupon:last-child .coupon__stub { border-bottom-left-radius: 3.5px; }
.coupon__body { padding: 12px 14px 14px 12px; min-width: 0; }
.coupon__list { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; }
.coupon__list li { position: relative; padding-left: 14px; }
.coupon__list li + li { margin-top: 3px; }
.coupon__list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sumi); }
.coupon__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.coupon__actions .btn { flex: 1 1 auto; min-height: 44px; font-size: 14px; padding: 6px 10px; }
.coupon__entry { margin: 10px 0 0; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.coupon__entry a { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; padding: 3px 0; text-underline-offset: 3px; }
.coupon__entry--up { font-weight: 800; }
.coupons--page .coupon:first-child .coupon__stub { border-top-left-radius: 3.5px; }

/* 貼り紙：月に1回、抽選で宿泊券 */
.poster { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px; border: 4px double var(--shu); }
.poster__seal { display: grid; place-items: center; width: 58px; height: 58px; padding: 0 9px; border-radius: 50%; background: var(--shu); color: var(--paper); font-family: var(--dela); font-size: 17px; line-height: 1.12; text-align: center; transform: rotate(-8deg); }
:lang(en) .poster__seal { font-size: 9.5px; padding: 0 4px; overflow-wrap: normal; }
.poster__title { margin: 0 0 6px; font-family: var(--dela); font-weight: 400; font-size: 18px; line-height: 1.4; }
.poster p { margin: 0; font-size: 13px; line-height: 1.65; }
.poster .poster__note { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--sumi); font-size: 11.5px; }

.memo { padding: 14px; }
.memo > p { margin: 0 0 8px; font-size: 14px; }
.memo__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; }
.nextup { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 10px; padding: 12px; text-decoration: none; }
.row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.row__body b { font-size: 14.5px; }
.row__body span { font-size: 12px; }

/* ---------------------------------------------------------------- 施設一覧：地図と路線図 */
.mapfig { margin: 0; padding: 8px; }
.map { display: block; width: 100%; height: auto; border: 1.5px solid var(--sumi); }
.map text { font-family: var(--sans); }
.map-sea { font-size: 12px; font-weight: 800; letter-spacing: .3em; }
.map-small { font-size: 9.5px; font-weight: 800; }
.map .pin__n { font-family: var(--dela); font-size: 12px; }
.pin__name, .pin__sub { fill: var(--sumi); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
.pin__name { font-size: 10.5px; font-weight: 800; }
.pin__sub { font-size: 8.5px; font-weight: 700; }
.mapfig figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-top: 6px; padding: 0 2px; font-size: 11.5px; line-height: 1.5; }
.mapfig__note { font-weight: 800; }

.linebox { padding: 14px 14px 4px; }
.line { position: relative; list-style: none; margin: 0; padding: 0; }
.st { position: relative; }
.st:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 35px; bottom: -35px; width: 4px; background: var(--sumi); }
.st + .st::before { content: ""; position: absolute; left: 58px; right: 0; top: 0; border-top: 1px solid var(--rule); }
.st__a { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; text-decoration: none; }
.st__mark { position: relative; z-index: 1; display: block; width: 46px; height: 46px; }
.stamp-mini { display: block; width: 100%; height: 100%; }
.st__ring { display: grid; place-items: center; width: 100%; height: 100%; border: 2.5px solid var(--sumi); border-radius: 50%; background: var(--paper); font-family: var(--dela); font-size: 17px; line-height: 1; }
.st__body { min-width: 0; }
.st__name { display: block; font-size: 15px; line-height: 1.4; }
.st__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12px; font-weight: 800; }
.st__addr, .st__prize { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; }
.st__state { padding-top: 2px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.st__state--got { color: var(--green-text); }

/* ---------------------------------------------------------------- 施設詳細 */
.spot { display: flex; flex-direction: column; gap: 14px; }
.spot__head { padding: 12px 14px 14px; border: 1.5px solid var(--sumi); border-radius: 5px; background: var(--ink); color: var(--paper); }
.spot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; font-weight: 800; }
.spot__no { font-family: var(--dela); font-weight: 400; }
.spot__name { margin: 6px 0 0; font-family: var(--dela); font-weight: 400; font-size: 23px; line-height: 1.35; }
.spot__sec { padding: 14px; }
.spot__stamp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 12px; }
.spot__stampimg { width: 208px; height: 208px; }
.spot__stampimg svg { display: block; width: 100%; height: 100%; }
.spot__stamp:not(.is-got) .spot__stampimg { opacity: .32; }
.spot__stampcap { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin: 0; font-size: 12.5px; }
.howto { margin-bottom: 10px; padding: 10px 12px; border: 1.5px solid var(--sumi); border-radius: 3px; background: var(--custard); font-size: 13.5px; font-weight: 800; line-height: 1.5; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.howto--done { background: var(--paper); }
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 8px 0; }
.facts > div:first-child { padding-top: 0; }
.facts > div:last-child { padding-bottom: 0; }
.facts > div + div { border-top: 1px solid var(--rule); }
.facts dt { font-size: 12px; font-weight: 800; padding-top: 2px; }
.facts dd { margin: 0; font-size: 14px; line-height: 1.55; }
.facts small { display: block; margin-top: 2px; font-size: 11.5px; }
.prize { display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: start; }
.prize__photo { width: 108px; height: 108px; padding: 5px; border: 1.5px solid var(--sumi); background: #fff; }
.prize__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prize__photo--none { display: grid; place-items: center; border-style: dashed; background: var(--paper); text-align: center; font-size: 11.5px; font-weight: 800; }
.prize__body b { display: block; font-size: 15px; line-height: 1.45; }
.prize__body p { margin: 4px 0 8px; font-size: 13px; line-height: 1.6; }
.nearby { list-style: none; margin: 0 0 10px; padding: 0; }
.nearby li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 9px 0; }
.nearby li:first-child { padding-top: 0; }
.nearby li + li { border-top: 1px solid var(--rule); }
.nearby b { display: block; font-size: 14px; line-height: 1.45; }
.nearby div span { display: block; font-size: 12.5px; line-height: 1.55; }
.kind { min-width: 46px; margin-top: 2px; padding: 0 5px; border: 1.5px solid var(--sumi); font-size: 10.5px; font-weight: 800; line-height: 1.7; text-align: center; }
.kind--gourmet { background: var(--custard); }

/* ---------------------------------------------------------------- 特典と抽選 */
.ended-note { margin: 0; padding: 6px 10px; border: 1.5px solid var(--sumi); background: var(--paper); font-size: 13px; font-weight: 800; }
.tally { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; padding: 0 2px; }
.tally__n { display: flex; align-items: baseline; gap: 6px; margin: 0; line-height: 1; }
.tally__n b { font-family: var(--dela); font-weight: 400; font-size: 46px; }
.tally__n span { font-size: 13px; font-weight: 800; }
.tally__minis { display: flex; justify-content: flex-end; gap: 8px; }
.tally__m { display: block; width: 42px; height: 42px; text-decoration: none; }
.tally__m .st__ring { font-size: 15px; }
.tally__season { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; font-weight: 800; }
.coupons--page { margin: 0; }
.entry { display: flex; flex-direction: column; gap: 10px; }
.entry.paper { padding: 14px; }
.entry.paper > p { margin: 0; font-size: 14px; }
.entry__title { font-size: 16px; margin-bottom: 0; }
.entry__list { padding: 0 2px; }

/* 抽選券（切符型）。右の半券との境にミシン目と切り欠き。2口は2枚重ね */
.tickets { position: relative; margin: 0 0 2px; }
.tickets--2 { margin: 0 7px 9px 0; }
.ticket { position: relative; display: grid; grid-template-columns: 1fr 90px; background: var(--paper); border: 1.5px solid var(--sumi); border-radius: 5px; }
.ticket--back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translate(7px, 7px) rotate(1.3deg); }
.ticket--back > * { visibility: hidden; }
.ticket__main { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 12px 14px; min-width: 0; }
.ticket__kind { font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.ticket__title { font-family: var(--dela); font-weight: 400; font-size: 17px; line-height: 1.35; margin-bottom: 2px; }
.ticket__line { font-size: 11.5px; line-height: 1.55; }
.ticket__stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; border-left: 1.5px dashed var(--sumi); border-radius: 0 3.5px 3.5px 0; background: var(--custard); text-align: center; }
.ticket__stub::before, .ticket__stub::after { content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--sea); border: 1.5px solid var(--sumi); }
.ticket__stub::before { top: -9.5px; clip-path: inset(50% -2px -2px -2px); }
.ticket__stub::after { bottom: -9.5px; clip-path: inset(-2px -2px 50% -2px); }
.ticket__month { font-size: 13px; font-weight: 800; line-height: 1.3; }
.ticket__kuchi { font-family: var(--dela); font-weight: 400; font-size: 28px; line-height: 1.1; }
:lang(en) .ticket__kuchi { font-size: 15px; }
:lang(en) .ticket__month { font-size: 11.5px; }

.logbox { padding: 14px; }
.log { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.5; }
.log th { text-align: left; font-size: 11px; font-weight: 800; padding: 0 6px 4px 0; border-bottom: 1px solid var(--sumi); }
.log td { padding: 7px 6px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.log tr:last-child td { border-bottom: 0; }
.log__t { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.log__how { font-weight: 800; }
.log__how--geo { color: var(--green-text); }
.log__empty { margin: 0; }
.reset-row { margin: 0; text-align: left; }

.locked { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; }
.locked p { margin: 0; font-size: 14px; }
.locked__count { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.locked__count b { font-family: var(--dela); font-weight: 400; font-size: 40px; }
.locked__count span { font-family: var(--dela); font-size: 16px; }

/* ---------------------------------------------------------------- 壁紙 */
.wall { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wall__frame { width: 64%; max-width: 260px; aspect-ratio: 9 / 16; border: 1.5px solid var(--sumi); border-radius: 6px; overflow: hidden; background: var(--paper); }
.wall__img { display: block; width: 100%; height: 100%; }
.wall figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; font-size: 12px; }

/* ---------------------------------------------------------------- 申込用紙 */
.imgband { margin: 0; padding: 6px 14px; background: var(--custard); border-bottom: 1.5px solid var(--sumi); border-radius: 3.5px 3.5px 0 0; font-size: 12.5px; font-weight: 800; line-height: 1.5; }
.imgband--solo { border: 1.5px solid var(--sumi); border-radius: 3px; }
.form__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px 0; }
.form__kind { font-family: var(--dela); font-size: 15px; letter-spacing: .24em; }
:lang(en) .form__kind { letter-spacing: .04em; }
.form__step { font-size: 12px; font-weight: 800; }
.punch { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 8px 14px 0; padding: 10px 0; border-top: 1.5px solid var(--sumi); border-bottom: 1.5px solid var(--sumi); }
.punch__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 800; line-height: 1.3; text-align: center; }
.punch__item + .punch__item::before { content: ""; position: absolute; top: 13px; right: calc(50% + 18px); width: calc(100% - 36px); border-top: 1.5px dashed var(--sumi); }
.punch__hole { display: grid; place-items: center; width: 27px; height: 27px; border: 1.5px solid var(--sumi); border-radius: 50%; background: var(--paper); font-family: var(--dela); font-style: normal; font-size: 12px; line-height: 1; }
.punch__item.is-done .punch__hole { background: var(--sea); }      /* パンチ穴：紙が抜けて、地の色が見える */
.punch__item.is-now .punch__hole { background: var(--sumi); color: var(--paper); }
.form__body { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.form__body .lead { margin: 0; }
.benefits { margin: 0; border: 1.5px solid var(--sumi); }
.benefits > div { padding: 9px 12px; }
.benefits > div + div { border-top: 1px solid var(--sumi); }
.benefits dt { font-size: 14.5px; font-weight: 800; line-height: 1.45; }
.benefits dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; }
.overseas { padding: 10px 12px; border: 1.5px dashed var(--sumi); font-size: 13px; line-height: 1.6; }
.overseas b { display: block; }
.overseas p { margin: 2px 0 4px; }

.login-main { display: flex; flex-direction: column; gap: 10px; }
.login-btn { display: block; width: 100%; min-height: 50px; padding: 8px 14px; border: 1.5px solid var(--sumi); border-radius: 6px; background: #fff; color: var(--sumi); font-size: 15px; font-weight: 800; box-shadow: 0 3px 0 var(--sumi); margin-bottom: 3px; transition: transform .06s, box-shadow .06s; }
.login-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sumi); }
.login-btn--line { min-height: 58px; background: var(--line-green); color: #fff; font-size: 18px; letter-spacing: .02em; }
.login-reco { margin: 0; font-size: 13px; line-height: 1.6; }
.login-reco__tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 2px; background: var(--sumi); color: var(--paper); font-size: 11px; font-weight: 800; line-height: 1.7; }
.check { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.check input, .ship__chk input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.check__box { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--sumi); border-radius: 3px; background: #fff; color: var(--sumi); }
.check__box svg { width: 16px; height: 16px; opacity: 0; }
input:checked + .check__box svg { opacity: 1; }
input:focus-visible + .check__box { outline: 3px solid var(--sumi); outline-offset: 2px; }
.check__text { font-size: 14px; font-weight: 800; line-height: 1.5; }
.check__note { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; }
.login-others-toggle { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 46px; padding: 12px 0 0; border: 0; border-top: 1.5px dashed var(--sumi); background: none; color: var(--sumi); font-size: 14px; font-weight: 800; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.login-others-toggle[aria-expanded="true"] .arw--down { transform: rotate(180deg); }
.login-others { display: flex; flex-direction: column; gap: 10px; }
.dl-mail { display: flex; flex-direction: column; gap: 10px; }
.dl-mail .frow { border-top: 1.5px solid var(--sumi); border-bottom: 1.5px solid var(--sumi); }
.login-state { align-self: flex-start; margin: 0; padding: 2px 8px; border: 1.5px solid var(--green-text); border-radius: 2px; color: var(--green-text); font-size: 12.5px; font-weight: 800; }

/* 記入欄：見出しセル＋罫線 */
.ftable { display: flex; flex-direction: column; margin: 0; border-top: 1.5px solid var(--sumi); }
.frow { display: grid; grid-template-columns: 102px 1fr; min-height: 50px; border-bottom: 1px solid var(--sumi); }
.frow__label { display: flex; align-items: center; margin: 0; padding: 8px; border-right: 1px solid var(--sumi); background: var(--cell); font-size: 12px; font-weight: 800; line-height: 1.4; }
.frow__in { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 3px 8px; min-width: 0; }
.frow input, .frow select { width: 100%; min-height: 42px; padding: 6px 2px; border: 0; border-radius: 0; background: transparent; color: var(--sumi); font: inherit; font-size: 16px; }
.frow input::placeholder { color: var(--mute); }
.frow input:focus-visible, .frow select:focus-visible { outline: 2.5px solid var(--sumi); outline-offset: 0; }
.frow__value { padding: 8px 2px; font-size: 14.5px; line-height: 1.5; }
.field--err .frow__in { background: #FCE9E6; }
.field__err { color: var(--shu-text); font-size: 12px; font-weight: 800; line-height: 1.5; padding-bottom: 4px; }
.ftable > .btn { margin-top: 14px; }
.agree-box { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1.5px solid var(--sumi); }
.agree-box--err { border: 2.5px solid var(--shu); }
.agree-box__err { margin: 0; }
.done { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.done__seal { width: 80px; height: 80px; transform: rotate(-8deg); }
.done__seal svg { display: block; width: 100%; height: 100%; }
.result { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--sumi); }
.result li { padding: 10px 2px; border-bottom: 1px solid var(--rule); }
.result b { display: block; font-size: 14.5px; line-height: 1.5; }
.result span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.6; }
.result .result__up { margin: 8px 0; padding: 10px 12px; border: 1.5px solid var(--sumi); background: var(--custard); }
.done__lead { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.65; }
.entry--done { margin-top: 2px; }

/* ---------------------------------------------------------------- 応募規約（文書） */
.doc { padding: 18px 16px 16px; }
.doc__head .h1 { margin: 8px 0 2px; }
.doc__sub { margin: 0; font-size: 13px; }
.draft-banner { margin: 14px 0 4px; padding: 10px 12px; border: 2px solid var(--shu); }
.draft-banner b { color: var(--shu-text); font-size: 14.5px; line-height: 1.5; }
.draft-banner p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.65; }
.terms { list-style: none; margin: 0; padding: 0; }
.terms__sec { padding: 14px 0; border-bottom: 1px solid var(--sumi); }
.terms__h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 16px; font-weight: 800; line-height: 1.4; }
.terms__h span { font-family: var(--dela); font-weight: 400; min-width: 1em; }
.terms__items { list-style: disc; margin: 0; padding-left: 1.25em; font-size: 14px; line-height: 1.8; }
.terms__items li + li { margin-top: 4px; }
.terms__strong { font-weight: 800; background: var(--custard); padding: 2px 6px; margin-left: -6px; list-style-position: outside; }
.doc__date { margin: 12px 0 0; font-size: 12px; }

/* ---------------------------------------------------------------- 位置確認（確認票） */
.geo-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(31, 42, 82, .8); overflow: auto; }
.geo-card { position: relative; width: 100%; max-width: 362px; padding: 14px 16px 18px; }
.geo-close { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--sumi); }
.geo-close svg { width: 16px; height: 16px; }
.geo-spot { display: flex; align-items: center; gap: 8px; margin: 0 34px 0 0; padding-bottom: 10px; font-size: 13.5px; font-weight: 800; line-height: 1.45; }
.geo-body { border-top: 1.5px solid var(--sumi); padding-top: 12px; }
.geo-figure { position: relative; }
.geo-diagram { display: block; width: 100%; max-width: 290px; margin: 0 auto 2px; }
.geo-diagram text { font-family: var(--sans); }
.geo-diagram .geo-diagram__d { font-family: var(--dela); font-size: 16px; }
.geo-diagram__l { font-size: 11px; font-weight: 800; }
.geo-wait { position: absolute; left: 50%; top: 27%; display: flex; gap: 6px; padding: 4px 10px; background: var(--paper); transform: translateX(-50%); }
.geo-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--sumi); animation: blink 1.2s steps(1) infinite; }
.geo-wait i:nth-child(2) { animation-delay: .3s; }
.geo-wait i:nth-child(3) { animation-delay: .6s; }
@keyframes blink { 0%, 100% { opacity: .2; } 30%, 60% { opacity: 1; } }
.geo-okseal { position: absolute; right: 2px; top: -6px; display: grid; place-items: center; width: 44px; height: 44px; border: 2.6px solid var(--green); border-radius: 50%; background: var(--paper); color: var(--green); font-family: var(--dela); font-size: 14px; line-height: 1; transform: rotate(10deg); }
.geo-title { margin: 8px 0 4px; font-size: 18px; font-weight: 800; line-height: 1.45; }
.geo-text { margin: 0; font-size: 13.5px; line-height: 1.65; }
.geo-text--strong { font-weight: 800; }
.geo-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.geo-demo { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1.5px dashed var(--sumi); border-radius: 6px; background: var(--paper); color: var(--sumi); font-size: 13px; font-weight: 700; line-height: 1.45; text-align: left; }
.geo-demo__label { flex: none; padding: 0 6px; border-radius: 2px; background: var(--sumi); color: var(--paper); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; line-height: 1.7; }

/* ---------------------------------------------------------------- 見せ場：スタンプ獲得の瞬間（クレーンがゴム印を押す）
   動かすのは transform と opacity だけ。レイアウトは動かさない。全体で 1.9 秒。
   0〜37% 降りてくる → 〜45% 欄の上で止まる → 50% 押す（台紙が 3px 沈む・インクがつく）→ 59% 離す → 100% 戻る */
.stamp-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 60; background: var(--sea); overflow-x: hidden; overflow-y: auto; }
.stamp-overlay--out { opacity: 0; transition: opacity .2s; }
.so__rail { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--sumi); }
.so__wrap { position: relative; max-width: 430px; margin: 0 auto; padding: 30px 12px 24px; }
.so__paper { padding: 10px 0 2px; }
.so__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 14px; padding-bottom: 6px; border-bottom: 1.5px solid var(--sumi); font-size: 12px; font-weight: 800; }
.so__head b { font-family: var(--dela); font-weight: 400; font-size: 14px; }
.so__crane { position: absolute; z-index: 2; width: 160px; height: 1640px; pointer-events: none; }
.crane-svg { display: block; max-width: none; transform-origin: 80px 500px; will-change: transform; }
.so__caption { margin-top: 12px; padding: 0 4px; }
.so__title { margin: 0; font-family: var(--dela); font-size: 30px; line-height: 1.25; }
.so__name { margin: 4px 0 0; font-size: 14px; font-weight: 800; line-height: 1.5; }
.so__count { margin: 0; font-size: 14px; font-weight: 800; }
.so__count b { font-family: var(--dela); font-weight: 400; font-size: 24px; margin-right: 1px; }
.so__sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; }
.so__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.is-anim .slot.is-fresh .slot__stamp, .is-anim .sheet__seal, .is-anim .so__caption, .is-anim .cnt__new { opacity: 0; }
.is-anim .cnt__old { opacity: 1; }
.is-anim .crane-svg { transform: translateY(-2000px); }
.is-go .crane-svg { animation: crane-go var(--crane-ms) linear both; }
.is-go .so__paper { animation: paper-sink var(--crane-ms) linear both; }
.is-go .slot.is-fresh .slot__stamp { animation: ink-in var(--crane-ms) linear both; }
.is-go .slot.is-fresh .slot__empty, .is-go .cnt__old { animation: ring-out var(--crane-ms) linear both; }
.is-go .cnt__new { animation: ink-in var(--crane-ms) linear both; }
.is-go .so__caption { animation: fade-in 240ms 1780ms both; }
.is-go .sheet__seal { animation: seal-in 240ms 1960ms cubic-bezier(.2, .8, .3, 1) both; }
@keyframes crane-go {
  0%   { transform: translateY(var(--drop, -900px)) rotate(-.8deg); animation-timing-function: cubic-bezier(.25, .1, .3, 1); }
  37%  { transform: translateY(-16px) rotate(.4deg); animation-timing-function: ease-in-out; }
  45%  { transform: translateY(-16px) rotate(0deg); animation-timing-function: cubic-bezier(.7, 0, 1, 1); }
  50%  { transform: translateY(5px) rotate(0deg); animation-timing-function: linear; }
  59%  { transform: translateY(5px) rotate(0deg); animation-timing-function: cubic-bezier(.5, 0, .9, .7); }
  100% { transform: translateY(var(--drop, -900px)) rotate(0deg); }
}
@keyframes paper-sink {
  0%, 47% { transform: none; animation-timing-function: ease-in; }
  50%, 58% { transform: translateY(3px) scale(.988); animation-timing-function: ease-out; }
  66%, 100% { transform: none; }
}
@keyframes ink-in { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes ring-out { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes seal-in { from { opacity: 0; transform: rotate(-12deg) scale(1.3); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 4px; background: var(--sumi); color: var(--paper); font-size: 13.5px; font-weight: 700; line-height: 1.5; transform: translateX(-50%); }
.toast--out { opacity: 0; transition: opacity .25s; }

/* ---------------------------------------------------------------- 運営画面（帳票・台帳）。白地・墨の罫線・数字は等幅 */
.shell--admin { max-width: none; background: #fff; }
.admin { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 16px 40px; font-size: 14px; line-height: 1.65; }
.admin__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 16px; padding: 14px 0 10px; border-bottom: 4px double var(--sumi); }
.admin__name { display: flex; flex-direction: column; line-height: 1.4; }
.admin__brand { font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.admin__name b { font-size: 16px; }
.admin__back { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; padding: 6px 0; text-underline-offset: 3px; }
.admin__band { display: flex; flex-direction: column; margin: 12px 0 0; padding: 8px 12px; border: 1.5px solid var(--sumi); background: var(--custard); font-size: 12.5px; line-height: 1.55; }
.admin__band b { font-size: 14px; }
.led { padding: 20px 0; border-bottom: 1.5px solid var(--sumi); }
.led__title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; font-weight: 800; line-height: 1.4; }
.led__title span { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--sumi); font-family: var(--mono); font-size: 13px; }
.led__title small { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.led__lead { margin: 0; font-size: 13.5px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--sumi); }
.kpis--2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; }
.kpi { display: flex; flex-direction: column; padding: 8px 10px 10px; min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--sumi); }
.kpi__label { font-size: 12px; font-weight: 800; }
.kpi__fig { font-size: 13px; font-weight: 700; line-height: 1.2; }
.kpi__value { margin-right: 3px; font-family: var(--mono); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi__note { margin-top: 2px; font-size: 11px; line-height: 1.4; }
.anote { margin: 8px 0 0; font-size: 12.5px; }
.draw-pool { display: flex; flex-direction: column; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--sumi); background: var(--cell); font-size: 12.5px; }
.draw-pool b { font-size: 14px; }
.draw-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 12px; }
.draw-ctl .anote { margin: 0; }
.draw-ctl__n { font-weight: 800; }
.draw-ctl select { margin: 0 6px; padding: 4px 8px; border: 1.5px solid var(--sumi); border-radius: 0; background: #fff; color: var(--sumi); font: inherit; font-family: var(--mono); font-size: 16px; }
.draw-roll { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; padding: 12px; border: 1.5px solid var(--sumi); }
.draw-roll__label { font-size: 13px; font-weight: 800; }
.draw-roll__name { font-size: 20px; }
.draw-result { margin-top: 12px; padding: 12px; border: 1.5px solid var(--sumi); }
.draw-result__head { display: flex; flex-direction: column; margin: 0 0 8px; }
.draw-result__head b { font-size: 16px; }
.draw-result__head small { font-size: 12px; }
.winners { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sumi); }
.winner { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sumi); }
.winner__rank { font-family: var(--mono); font-weight: 700; text-align: center; }
.winner__body b { display: block; font-size: 15px; }
.winner__body small { font-family: var(--mono); font-size: 12px; }
.winner__sent { font-size: 12.5px; font-weight: 800; color: var(--green-text); }
.winner__btn { max-width: 150px; }
.ships { margin: 12px 0; border-top: 1.5px solid var(--sumi); }
.ships__head, .ship { display: grid; grid-template-columns: 30px 64px minmax(0, 1fr) 96px 150px 64px; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.ships__head { border-bottom: 1px solid var(--sumi); background: var(--cell); font-size: 11.5px; font-weight: 800; }
.ship { cursor: pointer; }
.ship__chk { position: relative; display: block; width: 24px; height: 24px; }
.ship__no, .ship__date { font-family: var(--mono); font-size: 12.5px; }
.ship__state { font-size: 12px; font-weight: 800; }
.ship--done .ship__state { color: var(--green-text); }
.admin__foot { padding: 14px 0 0; font-size: 12px; }
@media (max-width: 620px) {
  .ships__head { display: none; }
  .ship { grid-template-columns: 30px 84px minmax(0, 1fr) auto; grid-template-areas: "chk no name state" "chk date type type"; gap: 0 8px; padding: 8px 2px; }
  .ship__chk { grid-area: chk; } .ship__no { grid-area: no; } .ship__name { grid-area: name; } .ship__state { grid-area: state; }
  .ship__date { grid-area: date; font-size: 11.5px; } .ship__type { grid-area: type; font-size: 11.5px; }
  .winner { grid-template-columns: 22px 1fr; }
  .winner__btn, .winner__sent { grid-column: 2; justify-self: start; max-width: none; }
}

/* ---------------------------------------------------------------- QRシール印刷（A4・2×2） */
.shell--qr { max-width: none; }
.qr-page { width: 100%; max-width: 820px; margin: 0 auto; padding: 12px; }
.qr-panel { margin-bottom: 14px; padding: 14px; }
.qr-panel .h1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qr-panel__row { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.qr-panel__row label { font-size: 12px; font-weight: 800; }
.qr-panel__row input { width: 100%; padding: 8px; border: 1.5px solid var(--sumi); border-radius: 0; background: #fff; color: var(--sumi); font-family: var(--mono); font-size: 14px; }
.qr-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qr-sheet { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; border: 1.5px solid var(--sumi); }
.qr-label { display: flex; flex-direction: column; gap: 10px; padding: 7%; border: 1px dashed var(--mute); background: #fff; }
.qr-label p { margin: 0; }
.qr-label__region { font-size: 11px; font-weight: 800; }
.qr-label__name { font-family: var(--dela); font-size: 17px; line-height: 1.35; margin-top: 4px !important; }
.qr-label__en { font-size: 11px; }
.qr-label__mid { display: flex; align-items: flex-end; gap: 4%; }
.qr-label__code { flex: 1; min-width: 0; }
.qr-label__code svg { display: block; width: 100%; height: auto; }
.qr-label__stamp { width: 30%; }
.qr-label__stamp svg { display: block; width: 100%; height: auto; }
.qr-label__hint { font-size: 14px; font-weight: 800; }
.qr-label__hint-en { font-size: 11px; }
.qr-label__url { margin-top: 4px !important; font-family: var(--mono); font-size: 8.5px; line-height: 1.4; word-break: break-all; }
.qr-label__foot { display: flex; justify-content: space-between; margin-top: 6px !important; padding-top: 6px; border-top: 1.5px solid var(--sumi); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
@media (max-width: 560px) { .qr-sheet { grid-template-columns: 1fr; } }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .qr-panel { display: none; }
  .qr-page { max-width: none; padding: 0; }
  .qr-sheet { width: 210mm; height: 296mm; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border: 0; }
  .qr-label { padding: 14mm 15mm; break-inside: avoid; justify-content: space-between; }
}

/* ---------------------------------------------------------------- 動きを減らす設定：クレーンも省く（押した状態をそのまま出す） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .so__crane { display: none; }
}