/* ---------- スライダー(備品・ロッカー) 2026-10-18 ----------
   CSS scroll-snap + 小さなJS(eari-site.js)。PCは複数枚(3枚)を並べ、タブレット2枚、SPは1枚強(次の1枚が少しのぞく)。自動再生なし。
   サイトのトーン: 白基調・細線・金(--acc/--ul)。画像は枠(4:3)を固定してCLSを出さない */
.eari-slider{--es-gap:20px;margin:clamp(26px,4vw,44px) 0 clamp(40px,6vw,64px);max-width:100%}
.es-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:14px 0 0;border-top:1px solid var(--ink)}
.es-count{margin:0!important;font-family:var(--f-h);font-size:13px;letter-spacing:.2em;color:var(--sub);line-height:1}
.es-cur{font-size:22px;color:var(--ul);font-feature-settings:"lnum";margin-right:.1em}
.es-nav{display:flex;gap:10px}
.es-nav button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #e3ddd0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .35s,opacity .35s}
.es-nav button:hover{border-color:var(--acc)}
/* フォーカス枠: タップ(マウス)では出さず、キーボード操作(:focus-visible)のときだけ、丸ボタン/丸いラベルボタンの形に合わせて表示 */
.es-nav button,.es-dot{-webkit-tap-highlight-color:transparent;box-shadow:none}
.es-nav button:focus:not(:focus-visible),.es-dot:focus:not(:focus-visible){outline:0}
.es-nav button:focus-visible{outline:2px solid var(--ul);outline-offset:3px;border-radius:50%}
.es-dot:focus-visible{outline:2px solid var(--ul);outline-offset:3px;border-radius:99px}
.es-viewport:focus:not(:focus-visible){outline:0}
.es-viewport:focus-visible{outline:2px solid var(--ul);outline-offset:3px}
.es-nav button[aria-disabled="true"]{opacity:.3;cursor:default;pointer-events:none}
.es-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.es-viewport::-webkit-scrollbar{display:none}
.es-track{display:flex;gap:var(--es-gap);margin:0!important;padding:0!important;border:0!important;list-style:none!important}
.es-slide{flex:0 0 100%;min-width:0;margin:0!important;padding:0!important;list-style:none!important;scroll-snap-align:start}
.es-fig{margin:0}
.es-img{position:relative;aspect-ratio:var(--r,var(--es-ar,4 / 3));width:100%;overflow:hidden;background:#f6f3ec}
.eari-ui .post_content .es-img img,.es-img img{position:absolute;inset:0;display:block;width:100%;height:100%!important;max-width:none;object-fit:contain}
.es-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:13px;letter-spacing:.2em;color:var(--sub)}
.es-fig figcaption{padding:14px 2px 0}
.es-ttl{margin:0 0 6px!important;font-family:var(--f-h);font-size:15px;font-weight:500;letter-spacing:.1em;line-height:1.6;color:var(--ink)}
.es-desc{margin:0!important;font-size:13px;letter-spacing:.06em;line-height:1.9;color:var(--sub)}
.es-bar{height:1px;margin-top:22px;background:var(--line);overflow:hidden}
.es-bar span{display:block;height:100%;background:var(--ul);transform-origin:left;transform:scaleX(var(--es-p,.1));transition:transform .25s}

/* SP: 1枚を全幅で表示(次の写真はのぞかせない)。隙間(gap)は画面の外側にあるので、止まった位置で隣がはみ出さない */
@media (max-width:600px){.eari-slider{--es-gap:16px}.es-slide{flex-basis:100%}.es-nav button{width:42px;height:42px}}
/* ロッカー(大・小): 2枚なのでPCも1枚ずつ大きく見せる。大/小のラベルボタンで切り替え */
.eari-slider.is-solo{max-width:560px}
.eari-slider.is-solo .es-slide{flex-basis:100%}
.eari-slider.is-solo .es-img{aspect-ratio:1 / 1;background:none}
.es-tabs{display:flex;gap:8px}
.es-dot{min-width:72px;height:40px;padding:0 18px;border:1px solid #e3ddd0;border-radius:99px;background:#fff;font:inherit;font-size:14px;letter-spacing:.2em;color:var(--ink);cursor:pointer;transition:border-color .35s,background-color .35s}
.es-dot:hover{border-color:var(--acc)}
.es-dot[aria-current="true"]{border-color:var(--ul);background:#faf7f1}
@media (max-width:600px){.eari-slider.is-solo{max-width:none}.eari-slider.is-solo .es-slide{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.es-bar span{transition:none}}
/* /plan/ 内(.sec-body): 直前の料金表(.prices.sm 最大460px)と幅をそろえる */
.sec-body .eari-slider.is-solo{max-width:460px;margin:28px 0 36px}
@media (max-width:600px){.sec-body .eari-slider.is-solo{max-width:none}}

/* 縦長の写真(/plan/ 5-1)。ロッカーと同じ1枚ずつ表示・幅460px・角丸は plan の写真と同じ14px。5-2の単体写真も同じ幅・角丸にそろえる */
.eari-slider.is-portrait .es-img{aspect-ratio:4 / 5;border-radius:14px;background:#f3efe9}
.sec-body .slot-row.es-single{display:block;max-width:460px;margin:18px 0}
.sec-body .slot-row.es-single figure{margin:0;aspect-ratio:4 / 5;overflow:hidden;border-radius:14px;background:#f3efe9}
.sec-body .slot-row.es-single img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.sec-body .slot-row.es-single{max-width:none}}

/* 備品の写真は枠内に全体を収める(contain)。ロッカー/5-1(is-solo)は従来どおり枠いっぱい(cover) */
.eari-ui .post_content .eari-slider.is-solo .es-img img,.eari-slider.is-solo .es-img img{object-fit:cover}

/* アクセスの道順スライダー(.is-steps): 写真の下に番号つきの説明文を残す。説明の行数が違っても高さがガタつかないよう、説明は上揃え */
.es-step{margin:0!important;padding:12px 2px 0;font-size:14px;letter-spacing:.06em;line-height:1.9;color:var(--ink)}
.es-step{text-wrap:balance;word-break:auto-phrase}

/* 2026-10-25 センターモード v2(PC・タブレット): スライド幅を「写真の比率」に合わせる。
   幅 = min(表示幅の76%[タブレット80%], 最大高さ620px[タブレット560px] × 写真の比率 --r)。写真枠=写真の比率なので左右に余白が出ず、前後ののぞきも写真そのもの。
   縦長(3:4)は約465px幅、9:16は約349px幅、横長は表示幅の76%。先頭・末尾でも中央に来るよう、トラックの左padding/末尾の疑似要素を「表示幅の半分 − 先頭/末尾スライド幅の半分」にする(--r-first/--r-last)。
   のぞく前後のスライドは opacity .5、クリックで移動。SP(600px以下)・ロッカー/plan(.is-solo)は1枚全幅・のぞきなし。 */
@media (min-width:601px){
 .eari-slider:not(.is-solo){--cw:76cqw;--mh:620px}
 .eari-slider:not(.is-solo) .es-viewport{container-type:inline-size}
 .eari-slider:not(.is-solo) .es-slide{--w:min(76cqw, calc(620px * var(--r,1.3333)));flex:0 0 var(--w);scroll-snap-align:center;transition:opacity .4s;cursor:pointer}
 .eari-slider:not(.is-solo) .es-track{padding:0 0 0 calc(50cqw - min(76cqw, calc(620px * var(--r-first,1.3333))) / 2)!important}
 .eari-slider:not(.is-solo) .es-track::after{content:"";flex:0 0 calc(50cqw - min(76cqw, calc(620px * var(--r-last,1.3333))) / 2);margin-left:calc(-1 * var(--es-gap))}
 .eari-slider:not(.is-solo) .es-slide:not(.is-cur){opacity:.5}
 .eari-slider:not(.is-solo) .es-slide.is-cur{cursor:default}
}
@media (min-width:601px) and (max-width:899px){
 .eari-slider:not(.is-solo) .es-slide{--w:min(80cqw, calc(560px * var(--r,1.3333)))}
 .eari-slider:not(.is-solo) .es-track{padding-left:calc(50cqw - min(80cqw, calc(560px * var(--r-first,1.3333))) / 2)!important}
 .eari-slider:not(.is-solo) .es-track::after{flex-basis:calc(50cqw - min(80cqw, calc(560px * var(--r-last,1.3333))) / 2)}
}
@media (prefers-reduced-motion:reduce){.es-slide{transition:none!important}}
.eari-slider:not(.is-solo) .es-img{background:none}