@charset "UTF-8";

/* ==================================================
 * ランキングスライダー用 カスタムCSS
 * ================================================== */

/* スライダー全体の余白調整（左右のボタン、下のページネーション用） */
#toprank-slider,
#vieweitem-slider,
#likeitem-slider {
    position: relative;
    padding: 0; /* 左右にボタン用の余白を設ける */
    max-width: 1600px; /* 必要に応じてサイト幅に合わせて変更してください */
    margin: 0 auto;
    /* overflow: hidden; */
}
.slider-box{
    overflow:hidden;
}
#toprank-slider .swiper-container,
#vieweitem-slider .swiper-container,
#likeitem-slider .swiper-container {
    padding-bottom: 30px; /* 下部ページネーション用の余白 */
    max-width: unset;
}
#toprank-slider .swiper-pagination,
#vieweitem-slider .swiper-pagination,
#likeitem-slider .swiper-pagination {
        display: none;
    }
/* リンク要素全体の設定 */
#toprank-slider .swiper-slide,
#vieweitem-slider .swiper-slide,
#likeitem-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    padding: 0 10px;
    max-width: 285px;
}


#toprank-slider .swiper-slide a,
#vieweitem-slider .swiper-slide a,
#likeitem-slider .swiper-slide a{
    display: block;
    text-decoration: none;
    color: #333;
    /* text-align: center; */
    transition: opacity 0.3s ease;
}

#toprank-slider .swiper-slide a:hover,
#vieweitem-slider .swiper-slide a:hover,
#likeitem-slider .swiper-slide a:hover {
    opacity: 0.8; /* ホバー時に少し透明にする */
}

/* 商品画像とバッジの枠 */
#toprank-slider .img-item,
#vieweitem-slider .img-item,
#likeitem-slider .img-item {
    position: relative;
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;
    background: #f9f9f9; /* 画像がない/透過の場合の背景色 */
}

/* 商品画像 */
.column4 .item-list-span-img,
.column5 .item-list-span-img {
	display: inline-block;
	position: relative;
	width:100%;
	/* height: 22.2vw; */
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
	overflow:hidden;
	transition:scale 1s ease-out;
	vertical-align: bottom;
}
.column4 .item-list-span-img img,
.column5 .item-list-span-img img{
	scale:1;
	opacity:1;
	transition:scale 0.5s ease-out;
}
.column4 .item-list-span-img:hover img,
.column5 .item-list-span-img:hover img{
	scale:1.1;
	opacity:1;
	transition:scale 0.5s ease-out;
}
#toprank-slider .img-item,
#vieweitem-slider .img-item,
#likeitem-slider .img-item {
    overflow:hidden;
}
#toprank-slider .img-item > img,
#vieweitem-slider .img-item > img,
#likeitem-slider .img-item > img {
    width: 100%;
    height: auto;
    vertical-align: top;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* 画像を正方形に揃える場合（不要なら削除） */
    scale:1;
	opacity:1;
	transition:scale 0.5s ease-out;
}
#toprank-slider .img-item:hover > img,
#vieweitem-slider .img-item:hover > img,
#likeitem-slider .img-item:hover > img{
	scale:1.1;
	opacity:1;
	transition:scale 0.5s ease-out;
}
/* ランキングバッジ（左上に絶対配置） */
#toprank-slider .badge {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 2;
    width: 40px; /* バッジ画像の大きさに合わせて調整してください */
    height: auto;
}

#toprank-slider .badge img {
    width: 100%;
    height: auto;
    vertical-align: top;
	opacity:1;
}

/* 商品名 */
#toprank-slider .name-item,
#vieweitem-slider .name-item,
#likeitem-slider .name-item {
    /* font-size: 16px; */
    margin: 0 0 5px 0;
    line-height: 1.4;
    font-weight: normal;
    /* 2行以上になる場合は「...」で省略する設定 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 価格 */
#toprank-slider .price-item,
#vieweitem-slider .price-item,
#likeitem-slider .price-item {
    font-size: 16px;
    font-weight: bold;
    color: #000; /* 価格の色（赤系） */
    margin: 0;
}
#toprank-slider .price-item span,
#vieweitem-slider .price-item span,
#likeitem-slider .price-item span{
    font-family: "Jost", sans-serif;
    font-weight:normal;
    font-size:24px;
}

#toprank-slider .price-item small,
#vieweitem-slider .price-item small,
#likeitem-slider .price-item small {
    font-size: 12px;
    font-weight: normal;
    margin-left: 3px;
}

/* --------------------------------------------------
 * SwiperのUIパーツ（ボタン・ドット）の微調整
 * -------------------------------------------------- */
#toprank-slider .swiper-button-prev,
#toprank-slider .swiper-button-next,
#vieweitem-slider .swiper-button-prev,
#vieweitem-slider .swiper-button-next,
#likeitem-slider .swiper-button-prev,
#likeitem-slider .swiper-button-next{
    color: #333; /* 矢印の色 */
    /* transform: scale(0.6); */ /* 矢印のサイズを少し小さくする */
}

#toprank-slider .swiper-button-prev,
#vieweitem-slider .swiper-button-prev,
#likeitem-slider .swiper-button-prev {
    left: -5%;
}

#toprank-slider .swiper-button-next,
#vieweitem-slider .swiper-button-next,
#likeitem-slider .swiper-button-next {
    right: -5%;
}

#toprank-slider .swiper-pagination-bullet-active,
#vieweitem-slider .swiper-pagination-bullet-active,
#likeitem-slider .swiper-pagination-bullet-active{
    background: #000; /* アクティブなドットの色 */
}



@media screen and (max-width:768px){
    /* スライダー全体の余白調整（左右のボタン、下のページネーション用） */
#toprank-slider,
#vieweitem-slider,
#likeitem-slider {
    position: relative;
    padding: 0; /* 左右にボタン用の余白を設ける */
    max-width: 1600px; /* 必要に応じてサイト幅に合わせて変更してください */
    margin: 0 auto;
    /* overflow: hidden; */
}
.slider-box{
    overflow:hidden;
}
#toprank-slider .swiper-container,
#vieweitem-slider .swiper-container,
#likeitem-slider .swiper-container {
    padding-bottom: 30px; /* 下部ページネーション用の余白 */
    max-width: unset;
}
#toprank-slider .swiper-pagination,
#vieweitem-slider .swiper-pagination,
#likeitem-slider .swiper-pagination{
display:none;    
}
/* リンク要素全体の設定 */
#toprank-slider .swiper-slide,
#vieweitem-slider .swiper-slide,
#likeitem-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    padding: 0 10px;
    max-width: 220px;
}


#toprank-slider .swiper-slide a,
#vieweitem-slider .swiper-slide a,
#likeitem-slider .swiper-slide a {
    display: block;
    text-decoration: none;
    color: #333;
    /* text-align: center; */
    transition: opacity 0.3s ease;
}

#toprank-slider .swiper-slide a:hover,
#vieweitem-slider .swiper-slide a:hover,
#likeitem-slider .swiper-slide a:hover {
    opacity: 1; /* ホバー時に少し透明にする */
}

/* 商品画像とバッジの枠 */
#toprank-slider .img-item,
#vieweitem-slider .img-item,
#likeitem-slider .img-item {
    position: relative;
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;
    background: #f9f9f9; /* 画像がない/透過の場合の背景色 */
}

/* 商品画像 */
	#toprank-slider .img-item,
#vieweitem-slider .img-item,
#likeitem-slider .img-item {
    overflow:hidden;
}
#toprank-slider .img-item > img,
#vieweitem-slider .img-item > img,
#likeitem-slider .img-item > img {
    width: 100%;
    height: auto;
    vertical-align: top;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* 画像を正方形に揃える場合（不要なら削除） */
    scale:unset;
	opacity:1;
	transition:unset;
}
#toprank-slider .img-item:hover > img,
#vieweitem-slider .img-item:hover > img,
#likeitem-slider .img-item:hover > img{
	scale:unset;
	opacity:1;
	transition:unset;
}
/* ランキングバッジ（左上に絶対配置） */
#toprank-slider .badge {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 2;
    width: 40px; /* バッジ画像の大きさに合わせて調整してください */
    height: auto;
}

#toprank-slider .badge img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* 商品名 */
#toprank-slider .name-item,
#vieweitem-slider .name-item,
#likeitem-slider .name-item {
    font-size: 12px;
    margin: 0 0 5px 0;
    line-height: 1.4;
    font-weight: normal;
    /* 2行以上になる場合は「...」で省略する設定 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 価格 */
#toprank-slider .price-item,
#vieweitem-slider .price-item,
#likeitem-slider .price-item {
    font-size: 16px;
    font-weight: bold;
    color: #000; /* 価格の色（赤系） */
    margin: 0;
}
#toprank-slider .price-item span,
#vieweitem-slider .price-item span,
#likeitem-slider .price-item span{
    font-family: "Jost", sans-serif;
    font-weight:normal;
    font-size: 18px;
}

#toprank-slider .price-item small,
#vieweitem-slider .price-item small,
#likeitem-slider .price-item small {
    font-size: 10px;
    font-weight: normal;
    margin-left: 3px;
}
/* --------------------------------------------------
 * SwiperのUIパーツ（ボタン・ドット）の微調整
 * -------------------------------------------------- */
#toprank-slider .swiper-button-prev,
#toprank-slider .swiper-button-next,
#vieweitem-slider .swiper-button-prev,
#vieweitem-slider .swiper-button-next,
#likeitem-slider .swiper-button-prev,
#likeitem-slider .swiper-button-next{
    display:none;
    color: #333; /* 矢印の色 */
    /* transform: scale(0.6); */ /* 矢印のサイズを少し小さくする */
}
}