/* 特集一覧ページ */
#feature_title img {
	width: 100%;
}
.fs-topicRole {
	box-sizing: border-box;
}
.fs-topicRole img {
	max-width: 100%;
}

/* 
Swiper
主に
商品ページバリエーション
特集ページ
*/

.swiper {
    font-size: 14px;
    line-height: 150%;
    padding: 0px 1%;
    width: 100%;
}
/* sp_commonで#sp_page .swiper-wrapperに対して!importantしているので
単に.swiper-wrapperに設定しても効かない */
#sp_page .swiper-wrapper {
    max-width: initial !important;
}
@media screen and (min-width: 768px) {
    .swiper {
        /*margin-bottom: 70px;*/
        line-height: 150%;
        max-width: 100%;
    }
}
.swiper-container {
/*    margin-bottom: 28px;*/
/*  background: #f0f0f0;*/
}
.swiper-wrapper.putoutPagenation {
    padding-bottom: 30px;
}
.swiper-innerWrapper {
    box-sizing: border-box;
    margin: 1%;
    padding: 1% 2% 5% 2%;
    color: #666;
    vertical-align: top;
    width: 98%;
}
.swiper-innerWrapper {
    padding: 1% 1% 5% 1%;
}
@media screen and (min-width: 768px) {
    .swiper-innerWrapper {
        padding: 1% 3% 5% 3%;
    }
}
.swiper img {
    width: 99%;
    padding-right: 1%;
}
.swiper .item_price {
    font-size: 75%;
    text-align: right;
}
.swiper-scrollbar,
.swiper-scrollbar-drag {
    height: 5px !important;
}
.swiper-scrollbar-drag {
    /*background: rgba(198, 138, 99, .7);*/
    /*background: rgba(198, 138, 99, 1);*/
    background: rgba(51, 51, 51, .7);
}
.swiper .swiper-button-next, 
.swiper .swiper-button-prev {
	background-color: #eee;
	color: #999;
	padding: 10px 4px;
 	opacity: 0.6;
}
.swiper-button-prev, 
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 0px) !important;
}
.swiper-button-next, 
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 0px) !important;
}
.swiper-button-prev:after, 
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, 
.swiper-rtl .swiper-button-prev:after {
   content: "" !important;
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
}
.swiper-button-prev:after, 
.swiper-rtl .swiper-button-next:after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2c22L22%2c0l4.2%2c4.2L8.4%2c22l17.8%2c17.8L22%2c44L0%2c22L0%2c22L0%2c22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next:after, 
.swiper-rtl .swiper-button-prev:after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3d%27M27%2c22L27%2c22L10%2c44l-4.2-4.2L18.6%2c22L5.8%2c4.2L10%2c0L27%2c22L27%2c22z%27%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
}
/* 一番端に来ても無効化しない（スライドにリンクが設定されていると意図せずに遷移してしまうことがあるので）*/
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    pointer-events: auto !important;
}
.swiper-pagination {
    padding-bottom: 0;
}
.swiper-pagination-bullet {
    height: 11px !important;
    width: 11px !important;
}
 /* ◯アクティブ色 */
.swiper-pagination-bullet-active {
    background: #666 !important; /*#c68a63;*/
}
@media screen and (min-width: 768px) {
	.swiper-pagination-bullet {
        height: 12px !important;
        width: 12px !important;
    }
}

.swiper {
	width: 100%;
	--container-bg: #fff;
	--font-size-base: 11px;
	--line-height-computed: 1.5;
	--lines-to-show: 3;
}

.swiper a .item_name {
    display: -webkit-box;       /* 必須：要素をFlexボックス化（古いブラウザ互換用） */
    -webkit-box-orient: vertical; /* 必須：並べる方向を垂直に指定 */
    -webkit-line-clamp: 2;      /* ここで表示したい行数を指定 */
    overflow: hidden;           /* はみ出た分を隠す */
    width: 100%;
    min-height: 3.2em;         /* 高さ固定：1.6 × 2行分 = 3.2em の高さを確保 */
}
@media screen and (max-width: 768px) {
	#sp_page.sp_v2 {
		width: 100%;
		box-sizing: border-box;
		padding: 0;
	}
	.swiper a .item_name {
	    font-size: var(--font-size-base);
	}
}

.swiper-wrapper {
    /* ループしない（枚数が少ない）時に、スライドを左詰めにせず均等配置にする、
       または watchOverflow で止まった時に自然に見せる設定 */
    display: flex;
}

/* 1枚のスライド */
.swiper-slide {
    height: auto; /* 段組時の高さ調整 */
    /* 2.3枚などの小数点表示の際、
       Swiperの計算とCSSの整合性を保つため以下を推奨 */
    box-sizing: border-box; 
}

/*
特集ページ商品一覧(noSwiper)
*/
#sp_page .sp_recommend ul {
	background-color: unset;
}
#sp_page .sp_recommend li,
#sp_page .sp_lineup li {
	border: none;
}
#sp_page .sp_recommend li a, 
#sp_page .sp_lineup li a {
    display: -webkit-box;
}

/* 
NewItem一覧
*/
.newitem-list .item-list {
	margin: 2px 4px 3em;
}
.newitem-list .item-list li {
    width: calc((100% - 46px) / 3);
}
.newitem-list .item-list li:nth-child(4n) {
    margin-right: 15px;
}
.newitem-list .item-list li:nth-child(3n) {
    margin-right: 0;
}
@media screen and (max-width: 768px) {
	.newitem-list .item-list li {
	    width: calc((100% - 16px) / 2);
	}
}

/* 商品ページ */
.detail .item-description-area .item-description .p_description .fsVariationBloc, 
.detail .item-description-area .item-description .p_description .fsVariationBlocPc, 
.detail .item-description-area .item-description .p_description .fsVariationBlocSp {
    margin-bottom: 5em;
}
.detail .item-description-area .item-description .p_description .variationSwiper {
	width: 100%;
	max-width: 620px;
}
.detail .item-description-area .item-description .p_description .variationSwiper .variationTitle {
    background-color: #999 /*#000*/;
    padding: 1% 2%;
    color: #fff;
    font-size: 20px;
    letter-spacing: 3px;
    font-weight: bold;
    margin: 2% 0 0;
}
.detail .item-description-area .item-description .p_description .variationSwiper .variationTitle_1 {
    padding: 1% 2%;
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: bold;
}