/* ============================================================
商品ページ画像スライダー CSS (ab260929)
作成日: 2026-09-10
対象: 商品詳細ページの itemThumb-wrap のみ
既存サイトCSSとの衝突を避けるため、クラス名は全て
"ab260929-" プレフィックスで統一しています。
============================================================ */
/* 元のメイン画像は「消さずに隠す」だけ。ショップサーブ側のHTML構造・機能
（ズーム等）はそのまま温存し、後からこちらのJSが必要な時だけ委譲して
呼び出します。
最初から（JSが動く前から）隠しておきます。CSSは側で先に
読み込まれるため、JSが組み立て終わるのを待たずに済み、ページを
開いた瞬間に元の画像がパッと見えてスライダーに切り替わる時に
「画面がブレる」現象を防げます。
万が一JSの組み立てに失敗した場合は、JS側が .ab260929-fallback
クラスを付けて元の画像を再表示します（フェイルセーフ）。 */
.itemThumb-wrap > .itemThumb-main {
display: none !important;
}
.itemThumb-wrap.ab260929-fallback > .itemThumb-main {
display: block !important;
}
/* 下のサムネイル一覧（.itemThumb）は非表示にせず、元のHTML・元の![]()
を
そのまま使い、見た目だけスライダー風に変えています。
（以前は新しく![]()
を複製して専用のサムネイル帯を作っていましたが、
同じ画像を「元の一覧」「メイン画像」「複製したサムネイル」の3箇所で
別々に読み込んでしまい、通信量・ショップサーブの課金対象になる通信が
3倍になっていることが分かりました。複製をやめて元の一覧をそのまま
使うことで、読み込みは「元の一覧＝サムネイル（共通で1回）」＋
「メインスライダー（1回）」の実質2回まで減らせます。） */
.itemThumb-wrap .itemThumb ul {
list-style: none !important;
margin: 8px 0 0 !important;
padding: 0 !important;
}
/* サイト側の元CSS（#itemDetail-cont .itemThumb-wrap .itemThumb ul li {
float:left; width:76px; height:76px; margin:0 5px 5px 0; overflow:hidden; }）
がIDセレクタを含み優先度が高く、そのままだと76px固定サイズのまま
浮動配置されてしまうため、ここで確実に上書きする。実際の横幅は
下のメディアクエリ（PC=グリッド／スマホ=横スクロール）側で指定する。 */
.itemThumb-wrap .itemThumb ul li {
box-sizing: border-box;
cursor: pointer;
float: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
overflow: visible !important;
}
.itemThumb-wrap .itemThumb ul li img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: cover;
border: 2px solid transparent;
border-radius: 4px;
opacity: 0.6;
transition: border-color 0.15s ease, opacity 0.15s ease;
}
/* 現在選択中のサムネイル（PC・スマホ共通。JS側で自前でクラスを付け替える） */
.itemThumb-wrap .itemThumb ul li.ab260929-thumb-current img {
border-color: #333;
opacity: 1;
}
/* PC: サムネイルをスライドさせず、全部並べたグリッド表示にする */
@media screen and (min-width: 769px) {
.itemThumb-wrap .itemThumb {
max-width: 500px;
margin: 0 auto;
}
.itemThumb-wrap .itemThumb ul {
display: grid !important;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
}
/* スマホ: Slickを使わず、ブラウザ標準の横スクロールにする。
指の動きにそのまま追従し、離したら自然に減速して止まる。
途中の位置で止まっても吸着（スナップ）はしない。 */
@media screen and (max-width: 768px) {
.itemThumb-wrap .itemThumb ul {
display: flex !important;
/* サイト側の元CSS（#itemDetail-cont .itemThumb-wrap .itemThumb ul {
overflow: hidden; }）がIDセレクタを含み優先度が高いため、
overflow-xはここでも!importantを付けて確実に上書きする */
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch; /* iOSの慣性スクロールを有効化 */
scroll-behavior: smooth; /* JSでscrollLeftを変える際、自動でなめらかに動かす */
scrollbar-width: none; /* Firefox: スクロールバーを隠す */
-ms-overflow-style: none; /* 旧Edge/IE: スクロールバーを隠す */
}
.itemThumb-wrap .itemThumb ul::-webkit-scrollbar {
display: none; /* Chrome/Safari: スクロールバーを隠す */
}
.itemThumb-wrap .itemThumb ul li {
/* 画面幅に対する割合で指定。1枚あたり約22%にすることで、
4枚がきっちり収まり、5枚目が少しだけ見切れて見える
（「まだ続きがある」と伝わりやすいように、あえて半端な枚数にしている） */
flex: 0 0 22%;
padding: 0 3px;
}
}
.ab260929-slider {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto 8px;
}
.ab260929-main-wrap {
position: relative;
}
.ab260929-main-slider {
width: 100%;
}
/* メイン画像: 常に正方形。画像は欠けさせず全体表示（object-fit: contain） */
.ab260929-slide {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background-color: #f7f7f7;
overflow: hidden;
}
.ab260929-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
overflow: hidden;
/* lazyLoadで画像がまだ読み込み中の一瞬、altの文字がそのまま表示されて
しまうのを防ぐ。画像を読み込んだ後の見た目には一切影響しない
（読み込み前のalt文字だけを画面外に追いやって見えなくするテクニック）。 */
text-indent: 100%;
white-space: nowrap;
color: transparent;
}
.ab260929-slide.ab260929-zoomable img {
cursor: zoom-in;
}
/* 左右の矢印ナビ。PCはホバーで薄く浮かび上がる。スマホは非表示（スワイプ操作のため） */
.ab260929-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
opacity: 0;
transition: opacity 0.2s ease;
cursor: pointer;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.ab260929-main-wrap:hover .ab260929-arrow {
opacity: 0.85;
}
.ab260929-arrow:hover {
opacity: 1 !important;
background: #fff;
}
.ab260929-arrow-prev {
left: 10px;
}
.ab260929-arrow-next {
right: 10px;
}
.ab260929-arrow::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #333;
border-right: 2px solid #333;
}
.ab260929-arrow-prev::before {
transform: rotate(-135deg);
margin-left: 4px;
}
.ab260929-arrow-next::before {
transform: rotate(45deg);
margin-right: 4px;
}
@media screen and (max-width: 768px) {
.ab260929-arrow {
display: none;
}
}
/* 現在の画像枚数カウンター（例: 3 / 16） */
.ab260929-counter {
position: absolute;
right: 10px;
bottom: 10px;
padding: 3px 10px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 12px;
border-radius: 12px;
line-height: 1.4;
z-index: 5;
letter-spacing: 0.02em;
}
/* Slick標準のdots/矢印はこちらでは使わないため非表示 */
.ab260929-slider .slick-dots,
.ab260929-slider .slick-arrow {
display: none !important;
}