/* ============================================================ トップの見せ場（.shop-hero の中身）＝横に流れるスライダー。 2026-08-19 本城さん採用。旧「白地＋左に文言＋右に店舗写真」から全面変更。・写真パネルは角なし・隙間なしで地続き。両脇が「次」と「前」。・両脇は白へ溶かさず、白黒にして暗く沈める。真ん中だけ色が戻る。・触るもの（矢印・ボタン・点・小札）は丸い。・写真はゆっくり寄り、文字は順に浮き上がる。指で横に払える。このファイルと assets/hero-slider.js は index.html のからだけ読む。 category.php / product.php / wishlist.php は index のだけを再利用し、 .shop-hero ブロックごと外すので、これらは読み込まれない。下の数値が採用値（2026-08-19）。ここだけ直せば見え方が変わる単一ソース。 ============================================================ */ .hsl { --slide-w: 74vw; /* 真ん中の写真の幅（両脇に 13vw ずつ覗く） */ --band-h: 380px; /* 帯の高さ */ --side-bright: .40; /* 両脇の明るさ。小さいほど暗い */ --side-sat: 0; /* 両脇の色。0＝完全な白黒 */ --copy-w: 700px; /* 文字のかたまりの幅 */ --h-size: 34px; /* 見出しの上限の大きさ */ --dur: 6000ms; /* 自動送りの間隔 */ position: relative; background: #0b0d11; /* 帯の地は黒＝写真の下から白が覗かない */ border-bottom: 1px solid var(--line); overflow: hidden; } .hsl-viewport { overflow: hidden; touch-action: pan-y; } .hsl-track { display: flex; margin-left: calc(50% - var(--slide-w) / 2); transition: transform .68s cubic-bezier(.22, .61, .36, 1); will-change: transform; } .hsl.is-dragging .hsl-track { transition: none; } .hsl.is-dragging { cursor: grabbing; } .hsl-slide { flex: 0 0 var(--slide-w); position: relative; } /* JS が動くまでは全部そのままの色＝JS 無効でも1枚目が普通のヒーローとして成立する。 */ .hsl.is-ready .hsl-slide { filter: saturate(var(--side-sat)) brightness(var(--side-bright)); transition: filter .55s ease, opacity .55s ease; cursor: pointer; } .hsl.is-ready .hsl-slide:hover { filter: saturate(calc(var(--side-sat) + .28)) brightness(calc(var(--side-bright) + .16)); } .hsl.is-ready .hsl-slide.is-on, .hsl.is-ready .hsl-slide.is-on:hover { filter: none; cursor: default; } .hsl-panel { position: relative; height: var(--band-h); overflow: hidden; background: #12151b; } .hsl-fig { position: absolute; inset: 0; margin: 0; overflow: hidden; } /* 待機中の写真はわずかに寄った状態が基準。真ん中に来た1枚だけ、そこからゆっくり引いていく。基準＝動きの開始位置なので、切り替わりの瞬間に拡大率が飛ばない＝ちらつかない。真ん中から外れた1枚は基準へ戻るのを transition が均す。 */ .hsl-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform .7s cubic-bezier(.22, .61, .36, 1); } .hsl-slide.is-on .hsl-img { animation: hslKen 8.4s cubic-bezier(.25, .1, .25, 1) forwards; } @keyframes hslKen { from { transform: scale(1.06) } to { transform: scale(1) } } /* 写真を全部暗くするのではなく“文字のある左側だけ”沈める。暗がりの幅は写真の幅ではなく「文字のかたまりの幅」に連動＝文字を広げても写真がむだに暗くならない。右端は必ず 10% 以上、素の写真を残す。 */ .hsl-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(7,9,13,.86) 0, rgba(7,9,13,.72) min(calc(var(--copy-w) * .50), 40%), rgba(7,9,13,.30) min(calc(var(--copy-w) * 1.00), 70%), rgba(7,9,13,0) min(calc(var(--copy-w) * 1.32), 90%)), linear-gradient(to top, rgba(7,9,13,.48) 0%, rgba(7,9,13,0) 44%); } /* 真ん中と両脇の境目の細い線＝地続きでも「ここまでが主役」が分かる。 2026-08-20 本城さん採用（C案）：上下がぼやけて真ん中だけ光る作りは境目がにじんで見えたため、上から下まで同じ濃さの 1px に変更。 */ .hsl.is-ready .hsl-slide.is-on .hsl-panel::before, .hsl.is-ready .hsl-slide.is-on .hsl-panel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2; background: rgba(255,255,255,.16); } .hsl.is-ready .hsl-slide.is-on .hsl-panel::before { left: 0 } .hsl.is-ready .hsl-slide.is-on .hsl-panel::after { right: 0 } .hsl-copy { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px, 4.2vw, 72px); width: min(86%, var(--copy-w)); color: #fff; } /* 小札は丸く。写真の上でも浮かないようガラスを敷く。 */ .hsl-eyebrow { align-self: flex-start; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 10.5px; letter-spacing: .16em; font-weight: 800; } .hsl-h { margin: 0 0 14px; font-size: clamp(22px, 3.4vw, var(--h-size)); line-height: 1.26; letter-spacing: .01em; font-weight: 800; text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hsl-h b { color: var(--yellow); font-weight: inherit; } .hsl-lede { margin: 0; max-width: 100%; font-size: clamp(13.5px, .98vw, 16px); font-weight: 400; line-height: 1.85; letter-spacing: .02em; color: rgba(255,255,255,.9); text-shadow: 0 1px 16px rgba(0,0,0,.35); } .hsl-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 16px; font-size: 11.5px; font-weight: 400; line-height: 1.7; color: rgba(255,255,255,.8); } .hsl-meta i { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .6; } .hsl-act { margin: 22px 0 0 } /* ボタンは丸々（ピル）。押す手前で少し持ち上がる。 */ .hsl-btn { border-radius: 999px; background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .2s cubic-bezier(.22,.61,.36,1), background .2s ease, box-shadow .2s ease; } .hsl-btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.34); } .hsl-btn:active { transform: translateY(0) } /* 文字は小札→見出し→本文→補足→ボタンの順に浮き上がる。 */ .hsl.is-ready .hsl-slide.is-on .hsl-copy > * { animation: hslRise .78s cubic-bezier(.22,.61,.36,1) backwards; } .hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(1) { animation-delay: .06s } .hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(2) { animation-delay: .14s } .hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(3) { animation-delay: .22s } .hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(4) { animation-delay: .30s } .hsl.is-ready .hsl-slide.is-on .hsl-copy > :nth-child(5) { animation-delay: .38s } @keyframes hslRise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } } /* 矢印は丸。ガラス調で、乗せると膨らみ山かたちが外へ動く。 */ .hsl-nav { position: absolute; top: calc(var(--band-h) / 2); transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.34); display: grid; place-items: center; z-index: 5; background: rgba(18,21,27,.34); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 8px 28px rgba(0,0,0,.28); cursor: pointer; transition: transform .24s cubic-bezier(.22,.61,.36,1), background .2s ease, border-color .2s ease; } .hsl-nav:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-50%) scale(1.09); } .hsl-nav svg { width: 20px; height: 20px; transition: transform .24s cubic-bezier(.22,.61,.36,1); } .hsl-nav--prev { left: calc(50% - var(--slide-w) / 2 - 26px) } .hsl-nav--next { right: calc(50% - var(--slide-w) / 2 - 26px) } .hsl-nav--prev:hover svg { transform: translateX(-2px) } .hsl-nav--next:hover svg { transform: translateX(2px) } /* 点も丸。伸びる線が残り時間。 */ .hsl-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; display: flex; justify-content: center; gap: 8px; } .hsl-dot { position: relative; width: 40px; height: 5px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.34); overflow: hidden; cursor: pointer; transition: height .2s ease, width .28s cubic-bezier(.22,.61,.36,1), background .2s ease; } .hsl-dot:hover { height: 7px; background: rgba(255,255,255,.5) } .hsl-dot.is-on { width: 62px } .hsl-dot::after { content: ""; position: absolute; inset: 0; width: 0; border-radius: 999px; background: #fff; } .hsl-dot.is-on::after { animation: hslFill var(--dur) linear forwards; } .hsl.is-paused .hsl-dot.is-on::after { animation-play-state: paused } .hsl.is-static .hsl-dot.is-on::after { width: 100%; animation: none } @keyframes hslFill { from { width: 0 } to { width: 100% } } /* 端まで来て「同じ絵柄の位置へ静かに差し替える」瞬間だけ、色の変化も動きも止める。ここを止めないと、同じ写真がもう一度暗→明に変わり、文字も出直すので、 1枚を二重に読み込んだように見える。差し替えが済むまで付いたままにする。 */ /* 差し替えの一瞬だけ、色や大きさの変化を止める（すぐ外す）。 */ .hsl.is-snapping .hsl-track, .hsl.is-snapping .hsl-slide, .hsl.is-snapping .hsl-img { transition: none; } /* 差し替えた1枚は「もう出終わった状態」で置く。次に動くまで出直させない。 */ .hsl.is-snapped .hsl-slide.is-on .hsl-img, .hsl.is-snapped .hsl-slide.is-on .hsl-copy > * { animation: none; } /* 動きを減らす設定の人には、寄りも浮き上がりも出さない。 */ @media (prefers-reduced-motion: reduce) { .hsl-track { transition: none } .hsl-img, .hsl-slide.is-on .hsl-img { animation: none; transition: none; transform: none } .hsl.is-ready .hsl-slide.is-on .hsl-copy > * { animation: none } } /* 狭い画面（スマホ）は指スライド前提。矢印は消して写真の面積を稼ぐ。 */ @media (max-width: 760px) { .hsl { --slide-w: 84vw; --band-h: 440px; } .hsl-nav { display: none } .hsl-copy { width: min(92%, 420px); padding: 0 22px; } .hsl-lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hsl-dots { bottom: 16px } }