/* Subpages1：Specials Linear Carousel（21st.dev @animbits/specials-linear-carousel）を料金モデルへ移植。
   原作の構成と寸法：横いっぱいの横スクロール（スクロールバーなし、上下 40px／768px 以上 80px、左右 16px／32px）、カードの間 16px、
   カードは角丸 24px（rounded-3xl）・幅 224px／768px 以上 320px・高さ 240px／384px、右端に幅 5% の白へのフェード、
   マウスのドラッグで送れる（つかむカーソル）、表示時に下から 20px・透明から 0.5s で順に現れる（0.2s ずつ遅らせる）。
   下に 12px の間で丸い 40px のボタン2つ（1px 枠・白地、ポインターで薄い灰、端では 50% の薄さ、chevron 24px）。
   Owner の指定で変えたところ：ボタンの間に「01 / 08」（現在位置／総枚数、2桁）を常に表示。矢印は1枚ずつ送る（原作は端まで一度に送る）。
   ループ用の複製と自動送りは使わない（総枚数＝料金モデルの数）。止まる位置が分かるよう左端のカードへ吸着（scroll-snap）し、
   最後のカードも左端まで送れるよう右に余白を足す。料金を読むため、カードは写真ではなく HTML の文字で、高さは文字量に合わせる。
   Fix2（2026-10-13）：カードは白地に原作の罫線色 #e5e5e5 の 1px 枠（紙色 #f5f2ea の面をやめた）。カードは要点だけで、高さはそれぞれの文字量
   （いちばん長いカードに揃えて伸ばさない）。詳細のダイアログも白、「閉じる」は白地・罫線・濃色の文字（黒いピルをやめた）。
   モバイルは1枚を読める幅にして次のカードの端を見せる。縦のスクロールは止めない（横方向の操作だけを受ける）。 */
.hal-lc{--lc-fg:#1b1813;--lc-text:#3d3931;--lc-muted:#6b6356;--lc-line:#e5e5e5;--lc-card:#fff;--lc-soft:#f5f5f5;--lc-bg:#fff;
  --lc-pad:max(16px,calc((100vw - 1040px) / 2));--lc-gap:16px;--lc-w:340px;
  position:relative;width:100vw;max-width:none;margin:8px 0 0 calc(50% - 50vw)}
@media (max-width:767.98px){.hal-lc{--lc-w:min(340px,calc(100vw - 2 * var(--lc-pad) - 40px))}}
.hal-lc *,.hal-lc *::before,.hal-lc *::after{box-sizing:border-box}
.hal-lc__viewport{position:relative;display:flex;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scroll-padding-inline:var(--lc-pad);scrollbar-width:none;padding:24px 0 16px;cursor:grab;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.hal-lc__viewport::-webkit-scrollbar{display:none}
.hal-lc__viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;-webkit-user-select:none}
.hal-lc__viewport:focus-visible{outline:2px solid var(--lc-fg);outline-offset:-2px}
.hal-lc__list{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:var(--lc-gap);margin:0;padding:0 0 0 var(--lc-pad);list-style:none}
/* 最後のカードも左端（基準の位置）まで送れる余白 */
/* Fix2：カードを上揃え（align-items:flex-start）にしたため、余白の箱が高さ 0 にならないよう縦に伸ばす（高さ 0 の箱はスクロール範囲に入らない） */
.hal-lc__list::after{content:'';flex:0 0 calc(100vw - var(--lc-w) - var(--lc-pad) - var(--lc-gap));max-width:calc(100vw - var(--lc-w) - var(--lc-pad) - var(--lc-gap));align-self:stretch;min-height:1px}
.hal-lc__item{flex:0 0 auto;display:block;width:var(--lc-w);margin:0;padding:0;scroll-snap-align:start;scroll-snap-stop:always}
.hal-lc__fade{position:absolute;top:0;right:0;bottom:56px;width:5%;background:linear-gradient(to left,var(--lc-bg),rgba(255,255,255,0));pointer-events:none;z-index:2}
@media (max-width:767.98px){.hal-lc__fade{display:none}}

.hal-lc-card{box-sizing:border-box;display:flex;flex-direction:column;width:100%;padding:24px 22px 18px;border:1px solid var(--lc-line);border-radius:24px;background:var(--lc-card);color:var(--lc-fg);text-align:left}
@media (min-width:768px){.hal-lc-card{padding:28px 26px 20px}}
.hal-lc-card__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 10px;font-family:var(--hal-mono,'Space Mono',monospace);font-size:11.5px;font-weight:500;line-height:1.5;letter-spacing:.08em;color:var(--lc-muted)}
.hal-lc-card__no{color:var(--lc-fg);font-weight:700}
.hal-lc-card__title{margin:0 0 12px;font-family:var(--hal-serif,'Zen Old Mincho',serif);font-size:20px;font-weight:600;line-height:1.5;letter-spacing:.01em;color:var(--lc-fg);text-wrap:balance;border:0;padding:0;background:none}
@media (min-width:768px){.hal-lc-card__title{font-size:22px}}
.hal-lc-card__price{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.hal-lc-card__pricelabel{font-size:12px;line-height:1.5;color:var(--lc-muted)}
.hal-lc-card__amount{font-family:var(--hal-serif,'Zen Old Mincho',serif);font-size:26px;font-weight:600;line-height:1.35;color:var(--lc-fg);font-feature-settings:"palt"}
.hal-lc-card__spec{display:flex;flex-direction:column;gap:2px;margin:0 0 4px;font-size:14px;line-height:1.7;color:var(--lc-text)}
.hal-lc-card__specrow{display:flex;gap:10px;margin:0}
.hal-lc-card__specrow dt{flex:0 0 auto;min-width:5.5em;margin:0;font-size:12px;line-height:1.95;color:var(--lc-muted)}
.hal-lc-card__specrow dd{margin:0;min-width:0}
.hal-lc-card__exp{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;padding:12px 0 0;border-top:1px solid var(--lc-line);font-size:13px;line-height:1.7;color:var(--lc-text)}
.hal-lc-card__exp strong{font-weight:700;color:var(--lc-fg)}
.hal-lc-card__expnote,.hal-lc-card__note{font-size:12.5px;line-height:1.7;color:var(--lc-muted)}
.hal-lc-card__note{margin:8px 0 0}
.hal-lc-card__details{margin-top:14px;border-top:1px solid var(--lc-line)}
.hal-lc-card__summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0 0;list-style:none;cursor:pointer;font-size:14px;font-weight:500;line-height:1.6;color:var(--lc-fg);-webkit-tap-highlight-color:transparent}
.hal-lc-card__summary::-webkit-details-marker{display:none}
.hal-lc-card__summary::marker{content:''}
.hal-lc-card__summary:focus-visible{outline:2px solid var(--lc-fg);outline-offset:2px;border-radius:4px}
.hal-lc-card__summary-icon{flex:0 0 auto;width:18px;height:18px;transition:transform .2s}
@media (hover:hover){.hal-lc-card__summary:hover .hal-lc-card__summary-icon{transform:translateX(3px)}}
.hal-lc-card__details[open] .hal-lc-card__summary-icon{transform:rotate(90deg)}
.hal-lc-card__body{padding:8px 0 4px}
.hal-lc-card__row{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;font-size:14px;line-height:1.75;color:var(--lc-text)}
.hal-lc-card__label{font-size:12px;font-weight:700;color:var(--lc-fg)}
.hal-lc-card__value--note{font-size:12.5px;color:var(--lc-muted)}
.hal-lc-card__row--link a{color:var(--lc-fg);text-decoration:underline;text-underline-offset:3px}

.hal-lc__controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.hal-lc__btn{all:unset;box-sizing:border-box;position:relative;z-index:40;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--lc-line);border-radius:999px;background:#fff;color:var(--lc-muted);cursor:pointer;transition:background-color .15s,opacity .15s;-webkit-tap-highlight-color:transparent}
.hal-lc__btn svg{width:24px;height:24px}
@media (hover:hover){.hal-lc__btn:not(:disabled):hover{background:var(--lc-soft)}}
.hal-lc__btn:disabled{opacity:.5;cursor:default}
.hal-lc__btn:focus-visible{outline:2px solid var(--lc-fg);outline-offset:2px}
.hal-lc__count{min-width:5.2em;margin:0;font-family:var(--hal-mono,'Space Mono',monospace);font-size:14px;font-weight:700;line-height:1;letter-spacing:.08em;text-align:center;color:var(--lc-fg);font-variant-numeric:tabular-nums}
.hal-lc__slash{color:var(--lc-muted);font-weight:400}

/* 表示時に順に現れる（原作の初回表示の動き）。JS が .is-ready を付けたときだけ。 */
.hal-sub1-js .hal-lc.is-ready:not(.is-shown) .hal-lc__item{opacity:0;transform:translateY(20px)}
.hal-sub1-js .hal-lc.is-ready .hal-lc__item{transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(var(--lc-i,0) * .2s)}
html:not(.hal-sub1-js) .hal-lc__controls{display:none}
@media (prefers-reduced-motion:reduce){
  .hal-lc__viewport{scroll-behavior:auto}
  .hal-sub1-js .hal-lc.is-ready:not(.is-shown) .hal-lc__item{opacity:1;transform:none}
  .hal-sub1-js .hal-lc.is-ready .hal-lc__item{transition:none}
}

/* カードの詳細（拡大したカード）。閉じるボタンは常に見える位置に固定。 */
.hal-lc-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid #e5e5e5;border-radius:24px;background:#fff;color:#1b1813;overflow:auto;overscroll-behavior:contain}
.hal-lc-dialog::backdrop{background:rgba(0,0,0,.45)}
.hal-lc-dialog[open]{animation:hal-lc-dialog-in .25s ease-out}
@keyframes hal-lc-dialog-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hal-lc-dialog[open]{animation:none}}
.hal-lc-dialog__bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 24px;background:#fff;border-bottom:1px solid #e5e5e5}
.hal-lc-dialog__count{margin:0;font-family:var(--hal-mono,'Space Mono',monospace);font-size:13px;font-weight:700;letter-spacing:.08em}
/* 閉じる：移動リンクではない操作のため ArrowFillButton にせず、原作の丸い操作ボタン（白地・1px 罫線・濃色）と同じ扱い */
.hal-lc-dialog__close{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:40px;padding:0 14px 0 10px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;color:#1b1813;font-size:14px;font-weight:500;line-height:1;cursor:pointer;transition:background-color .15s,border-color .15s}
.hal-lc-dialog__close svg{width:18px;height:18px}
@media (hover:hover){.hal-lc-dialog__close:hover{background:#f5f5f5;border-color:#d4d4d4}}
.hal-lc-dialog__close:focus-visible{outline:2px solid #1b1813;outline-offset:2px}
.hal-lc-dialog__content{padding:20px 24px 28px}
.hal-lc-dialog__title{margin:0 0 6px;padding:0;border:0;background:none;font-family:var(--hal-serif,'Zen Old Mincho',serif);font-size:21px;font-weight:600;line-height:1.5}
.hal-lc-dialog__price{margin:0 0 16px;font-family:var(--hal-serif,'Zen Old Mincho',serif);font-size:22px;font-weight:600}
.hal-lc-dialog__body .hal-lc-card__row{font-size:15px}

/* Fix2：テーマ（Astra）の button:hover／:focus（青い地・白い文字）が矢印・「閉じる」に出ないよう、状態ごとに指定する */
.hal-lc .hal-lc__btn:is(:hover,:focus,:focus-visible,:active){color:var(--lc-muted);box-shadow:none}
/* Fix3：端で無効になった矢印（:disabled）はホバーの規則（:not(:disabled):hover）に当たらず、Astra の button:hover の青が出ていた → 全状態で白 */
.hal-lc .hal-lc__btn:is(:hover,:focus,:focus-visible,:active){background:#fff}
@media (hover:hover){.hal-lc .hal-lc__btn:not(:disabled):hover{background:var(--lc-soft);color:var(--lc-fg)}}
.hal-lc-dialog .hal-lc-dialog__close:is(:hover,:focus,:focus-visible,:active){background:#fff;color:#1b1813;border-color:#e5e5e5;box-shadow:none}
@media (hover:hover){.hal-lc-dialog .hal-lc-dialog__close:hover{background:#f5f5f5;border-color:#d4d4d4}}
