@charset "UTF-8";
/*=============================================================

	Date: 2024-10-30
	CSS Document ： フェリシモ グローバル ランキング用スライダー
 
=============================================================*/
.ranking-slider-wrap .fs_container {
		padding-right: 15px;
		padding-right: 0.9375rem;
		padding-left: 15px;
		padding-left: 0.9375rem;
}
.ranking-slider-wrap .fs_section__h {
		position: relative;
		z-index: 2;
		margin-bottom: 0;
		font-size: 24px;
		font-size: 1.5rem;
		font-weight: 700;
		text-align: center;
}
.ranking-slider-wrap .fs_section__btn {
		width: 100%;
		max-width: 370px;
		max-width: 23.125rem;
		margin-top: 45px;
		margin-top: 2.8125rem;
		margin-right: auto;
		margin-left: auto;
}
.ranking-slider-wrap .fs_section__btn .fs_btn {
		width: 100%;
}
.ranking-slider-wrap .fs_btn {
		display: inline-block;
		position: relative;
		padding: 16px 26px 15px;
		padding: 1rem 1.625rem 0.9375rem;
		border: 1px solid #202020;
		border-radius: 0.25rem;
		outline: none !important;
		background-color: #ffffff;
		color: #202020;
		font-size: 18px;
		font-size: 1.125rem;
		font-weight: 600;
		cursor: pointer;
}
.ranking-slider-wrap .fs_btn__in {
		display: inline-block;
		position: relative;
		width: 100%;
		text-align: center;
}
.ranking-slider-wrap .fs_btn__in:after {
		display: inline-block;
		font-family: "icnfont";
		font-size: inherit;
		font-style: normal;
		line-height: 1;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: "\ea05";
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -0.5em;
		font-size: 12px;
		font-size: 0.75rem;
		font-weight: 400;
}
.ranking-slider-wrap .fs_carousel__prev .fs_control-btn:not(.swiper-button-disabled), .ranking-slider-wrap .fs_carousel__next .fs_control-btn:not(.swiper-button-disabled) {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		pointer-events: auto;
}
.ranking-slider-wrap .ranking-slider-wrap .fs_control-btn {
		width: 7rem;
		height: 7rem;
		box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.08);
		font-size: 1.625rem;
}
.ranking-slider-wrap .fs_control-btn{
    width: 7rem;
    height: 7rem;
    box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.08);
    font-size: 1.625rem;
  }

.ranking-slider-wrap .fs_control-btn {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 0;
		border: none;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.7);
		line-height: 1;
		outline: none !important;
		color: #202020;
		text-decoration: none !important;
}
.ranking-slider-wrap .fs_control-btn i {
		-webkit-transition-property: -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
		-webkit-transition-duration: 250ms;
		transition-duration: 250ms;
		-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.ranking-slider-wrap .fs_control-btn.is-next:hover i {
		-webkit-transform: translateX(0.3125rem);
		transform: translateX(0.3125rem);
}
.ranking-slider-wrap .fs_control-btn.is-prev:hover i {
		-webkit-transform: translateX(-0.3125rem);
		transform: translateX(-0.3125rem);
}
.ranking-slider-wrap .fs_carousel__controls {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		pointer-events: none;
		z-index: 1;
}
.ranking-slider-wrap .fs_carousel__controls__limit {
		width: 100%;
		height: 100%;
		max-width: 1170px;
		position: relative;
		margin-right: auto;
		margin-left: auto;
		overflow: hidden;
}
.ranking-slider-wrap .fs_carousel__prev, .ranking-slider-wrap .fs_carousel__next {
		position: absolute;
		padding: 0;
		line-height: 1;
		pointer-events: none;
		height: 100%;
}
.ranking-slider-wrap .fs_carousel__prev {
		left: -3.5rem;
}
.ranking-slider-wrap .fs_carousel__next {
		right: -3.5rem;
}
body.is-ready .ranking-slider-wrap .fs_carousel__prev .fs_control-btn, body.is-ready .ranking-slider-wrap .fs_carousel__next .fs_control-btn {
		-webkit-transition-property: opacity;
		transition-property: opacity;
		-webkit-transition-duration: 250ms;
		transition-duration: 250ms;
		-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.ranking-slider-wrap .fs_carousel__prev .is-next, .ranking-slider-wrap .fs_carousel__prev .is-prev, .ranking-slider-wrap .fs_carousel__next .is-next, .ranking-slider-wrap .fs_carousel__next .is-prev {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto 0;
}
.ranking-slider-wrap .fs_carousel__prev .is-next, .ranking-slider-wrap .fs_carousel__next .is-next {
		right: 0;
}
.ranking-slider-wrap .fs_carousel__prev .is-prev, .ranking-slider-wrap .fs_carousel__next .is-prev {
		left: 0;
}
.ranking-slider-wrap .fs_control-btn.is-next i {
		margin-left: -2.5rem;
}
.ranking-slider-wrap .fs_control-btn.is-prev i {
		margin-left: 2.5rem;
}
.ranking-slider-wrap .fsc_i-angle-right:before, .ranking-slider-wrap .fsc_i-angle-left:before {
		display: inline-block;
		font-family: "icnfont";
		font-size: inherit;
		font-style: normal;
		line-height: 1;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}
.ranking-slider-wrap .fsc_i-angle-right:before {
		content: "\ea01";
}
.ranking-slider-wrap .fsc_i-angle-left:before {
		content: "\ea03";
}
@media not all and (min-width: 768px) {
		.ranking-slider-wrap .fs_container {
				padding-right: 0.625rem;
				padding-left: 0.625rem;
		}
		.ranking-slider-wrap .fs_section__h {
				font-size: 1.125rem;
		}
		.ranking-slider-wrap .fs_section__btn {
				max-width: 17.5rem;
				margin-top: 2.3125rem;
		}
		.ranking-slider-wrap .fs_btn {
				border-radius: 0.25rem;
				padding: 0.78125rem 0.9375rem;
				font-size: 0.8125rem;
		}
		.ranking-slider-wrap .fs_btn__in {
				padding: 0 0.75rem;
		}
		.ranking-slider-wrap .fs_control-btn {
				width: 4.9375rem;
				height: 4.9375rem;
				box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.08);
				font-size: 1.125rem;
		}
		.ranking-slider-wrap .fs_carousel__prev {
				left: -2.5rem;
		}
		.ranking-slider-wrap .fs_carousel__next {
				right: -2.5rem;
		}
		.ranking-slider-wrap .fs_control-btn.is-next i {
				margin-left: -2rem;
		}
		.ranking-slider-wrap .fs_control-btn.is-prev i {
				margin-left: 2rem;
		}
}
/*------------------------------------
商品表示 テスト用非表示
------------------------------------*/
ul.ranking-slider p.lead, ul.ranking-slider p.tagline, ul.ranking-slider .set_name {
		display: none;
}
/*------------------------------------
スライダー全体
------------------------------------*/
.ranking-slider-wrap {
		max-width: 1170px;
		margin: 4.5rem auto;
}
.ranking-slider-wrap a {
		transition: all .3s;
}
/*------------------------------------
スライダータイトル
------------------------------------*/
.ranking-slider-wrap .ranking-head {
		margin: 0 auto .75rem;
		position: relative;
}
.ranking-slider-wrap:not(.template-mode) .ranking-head {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 1rem;
}
.ranking-slider-wrap:not(.template-mode) .ranking-ttl-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: .5em;
}
.ranking-slider-wrap:not(.template-mode) .ranking-ttl-wrap .fs_section__h {
		font-weight: bold;
		white-space: nowrap;
}
.ranking-ttl-wrap .ranking-sub-ttl {
		font-size: 1.15rem;
		line-height: 1.2;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .3em;
}
.ranking-ttl-wrap .ranking-sub-ttl::before {
		display: block;
		width: .8em;
		height: 1px;
		content: '';
		background: #b2b2b2;
}
.ranking-head .ranking-more-link {
		font-size: 1.15rem;
		display: flex;
		white-space: nowrap;
		justify-content: center;
		align-items: center;
		gap: .3em;
}
.ranking-head .ranking-more-link::before {
		display: block;
		width: .6em;
		height: .6em;
		content: '';
		background-image: url(../images/more_btn_arrow.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
}
/*------------------------------------
商品表示エリア
------------------------------------*/
.ranking-slider-box {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
		position: relative;
}
.ranking-slider-box::-webkit-scrollbar {
		display: none;
}
ul.ranking-slider * {
		list-style: none;
}
ul.ranking-slider {
		display: flex;
		width: max-content;
		padding: 1.0rem 0;
		list-style: none;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 1.8rem;
}
ul.ranking-slider > li {
		position: relative;
		width: 215px;
		/* border: 1px solid; */
}
ul.ranking-slider a > img {
		width: 100%;
		border-radius: .5rem;
}
ul.ranking-slider .fca_labels__items {
		line-height: 1;
		display: flex;
		margin-top: -4px;
		margin-top: -.25rem;
		margin-bottom: 0;
		padding: 0;
		list-style: none;
		flex-wrap: wrap;
		align-items: center;
}
.fca_labels__item {
		line-height: 1;
		margin-top: 4px;
		margin-top: .25rem;
		margin-right: 6px;
		margin-right: .375rem;
}
ul.ranking-slider p {
		line-height: 1.3;
		margin: 0;
		text-justify: inter-character;
		word-break: break-all;
}
ul.ranking-slider p.title {
		font-size: 15px;
		font-size: 0.94rem;
		margin: .4em 0 .3em;
		text-decoration: none;
		letter-spacing: -.05em;
}
ul.ranking-slider .fca_labels {
		margin-bottom: .3em;
}
ul.ranking-slider .set_name {
		font-size: 70%;
}
ul.ranking-slider .price, ul.ranking-slider .sale_price, ul.ranking-slider .strike_price {
		font-family: 'Roboto', '游ゴシック', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic', 'メイリオ', 'Meiryo', 'Noto Sans', 'Noto Sans CJK JP', 'system-ui', sans-serif;
		font-size: .9375rem;
		font-weight: 900;
}
ul.ranking-slider .sale_price {
		display: block;
		color: #c60038;
}
ul.ranking-slider .strike_price {
		display: block;
		text-decoration: line-through;
		-webkit-text-decoration-color: #c73339;
		text-decoration-color: #c73339;
		-webkit-text-decoration-style: double;
		text-decoration-style: double;
		color: #999999;
}
@media (hover: hover) {
		.ranking-slider-wrap a:hover {
				opacity: .7;
		}
}
/*------------------------------------
左右ボタン
------------------------------------*/
.ranking-slider-wrap .ranking-slider-container {
		position: relative;
		overflow: inherit;
}
.ranking-slider-container .fs_carousel__prev {
		display: none;
}
/* 1段表示の場合は商品画像の中央に表示 */
.ranking-slider-wrap:not(.ranking-turn) .fs_carousel__prev .is-next, .ranking-slider-wrap:not(.ranking-turn) .fs_carousel__prev .is-prev, .ranking-slider-wrap:not(.ranking-turn) .fs_carousel__next .is-next, .ranking-slider-wrap:not(.ranking-turn) .fs_carousel__next .is-prev {
		top: 68px;
		bottom: auto;
		margin: 0;
}
/*------------------------------------
ランキング連番
------------------------------------*/
.ranking-slider-wrap.ranking-num ul.ranking-slider {
		list-style: none; /* 標準のスタイルは消す */
		counter-reset: listnum; /* カウンターをリセット */
}
.ranking-slider-wrap.ranking-num ul.ranking-slider > li::before {
		font-size: 0.9em;
		font-weight: bold;
		position: absolute;
		z-index: 1;
		top: -.3em;
		left: -.3em;
		display: flex;
		width: 1.9em;
		content: counter(listnum); /* カウントした数に応じて番号を表示 */
		counter-increment: listnum; /* counter-resetと同じ文字列 */
		color: #fff;
		border-radius: 50%;
		background: #000;
		aspect-ratio: 1/1;
		justify-content: center;
		align-items: center;
		letter-spacing: -0.05em;
}
.ranking-slider-wrap.ranking-num ul.ranking-slider > li:nth-child(1)::before {
		background: #c79c32;
}
.ranking-slider-wrap.ranking-num ul.ranking-slider > li:nth-child(2)::before {
		background: #a2b3cd;
}
.ranking-slider-wrap.ranking-num ul.ranking-slider > li:nth-child(3)::before {
		background: #a67552;
}
/*------------------------------------
商品10個で折り返し
------------------------------------*/
.ranking-slider-wrap.ranking-turn .ranking-slider-container ul.ranking-slider {
		flex-wrap: wrap;
		/* width: calc((215px + 1.8rem)* 10); */
}

/*------------------------------------
テンプレートの表示に合わせる
------------------------------------*/
.ranking-slider-wrap .fs_section__btn {
		margin-top: 1rem;
		margin-bottom: 4rem;
}
.ranking-slider-wrap.template-mode .ranking-head::before {/* display: block; *//* width: 0; *//* content: ''; */}
.ranking-slider-wrap.template-mode  .ranking-head {
    /* display: flex; */
    /* justify-content: center; */
}
.ranking-slider-wrap.template-mode .ranking-ttl-wrap {}
.ranking-slider-wrap.template-mode .ranking-more-link {
    position: absolute;
    right: 0.9375rem;
    bottom: 0;
}


.ranking-slider-wrap.template-mode .ranking-ttl-wrap .ranking-sub-ttl {
margin-top: 0.3rem;
}
.ranking-slider-wrap.template-mode .ranking-ttl-wrap .ranking-sub-ttl::before {
display: none;
}

/*------------------------------------
markのcampaignとサイズが並ぶ場合改行
------------------------------------*/
.ranking-slider .fca_labels__item:has(.is-shopping) + .fca_labels__item:has(.is-item-size) {}
li.ranking-br {
		width: 100%;
}
/*------------------------------------
SP表示
------------------------------------*/
@media (max-width: 768px) {
	/*	.ranking-slider-wrap {
				margin: 3.0rem auto;
		}
    */
    		.ranking-slider-wrap {
				margin: 1.5rem auto;
		}
		.ranking-head {
				font-size: 90%;
		}
		ul.ranking-slider {
				gap: 5vw;
				padding: 0.5rem 0;
		}
		ul.ranking-slider > li {
				width: 32vw;
		}
		ul.ranking-slider p.title {
				font-size: .75rem;
		}
		.ranking-ttl-wrap .ranking-sub-ttl {
				font-size: .75rem;
		}
	.ranking-slider-wrap.template-mode .ranking-more-link {
	right: 0.625rem;
}
		.ranking-head .ranking-more-link {
				font-size: .75rem;
		}
		ul.ranking-slider .price, ul.ranking-slider .sale_price, ul.ranking-slider .strike_price {
				font-size: .6875rem;
		}
		.ranking-slider-wrap.ranking-num ul.ranking-slider > li::before {
				font-size: .85em;
		}
		.ranking-slider-wrap:not(.ranking-turn) .fs_carousel__prev .is-next, .ranking-slider-wrap:not(.ranking-turn) .fs_carousel__prev .is-prev, .ranking-slider-wrap:not(.ranking-turn) .fs_carousel__next .is-next, .ranking-slider-wrap:not(.ranking-turn) .fs_carousel__next .is-prev {
				top: calc((0.5rem - 4.9375rem) + (4.9375rem/2) + 16vw);
		}
		.ranking-slider-wrap.ranking-turn .ranking-slider-container ul.ranking-slider {
				/* width: calc((32vw + 5vw)* 10); */
		}
}