@charset "shift_jis";
/* ============================================================================
 * 商品一覧スライダー（Swiper.js）用 静的スタイル PC
 * ========================================================================== */

.js-goodslist-swiper {
    display: flex;
    flex-direction: column;
}

/* ページネーション位置（画像下、normal flow）
 * 初期から1行高さを確定し、bullet折返しによる2行レイアウト発生時も高さ揺れを抑止 */
.js-goodslist-swiper .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: static;
    margin: 10px 0;
    height: calc(var(--swiper-pagination-bullet-size, 10px) + 2 * var(--goods-swiper-bullet-hit-padding, 2px));
    white-space: nowrap;
    overflow: hidden;
}

.js-goodslist-swiper .swiper-pagination-bullet {
    box-sizing: content-box;
    padding: var(--goods-swiper-bullet-hit-padding, 4px);
    background-clip: content-box;
}

.js-goodslist-swiper
  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-bullets-dynamic.swiper-pagination-horizontal {
    transform: none;
    left: auto;
    align-self: center;
    max-width: 100%;
}

/* スライダー有りカードのみ、画像エリアの固定高さ(.fixheight=190px等)を解除し
 * ページネーションが下の商品名にかぶらないよう自動高さに切替 */
.tt_product2-6__image:has(.js-goodslist-swiper),
.fixheight .tt_product2-6__image:has(.js-goodslist-swiper) {
    height: auto;
}

/* lazyload画像のalt文字レンダリング抑止
 * srcが未設定の状態でブラウザがalt文字を画像内テキストとして描画し、
 * 長文の商品名altで縦に膨らみ縦幅が崩れる問題対応 */
.js-goodslist-swiper img.lazyload {
    font-size: 0;
    line-height: 0;
    color: transparent;
}

/* slide-content でも overflow:hidden をかけて、alt文字や壊れ画像アイコンが
 * 万一はみ出してもスライド枠を超えないように防御 */
.js-goodslist-swiper .slide-content {
    overflow: hidden;
}