@charset "utf-8";
/*---------------------------------
SP商品詳細で画像一覧表示
---------------------------------*/

/* 一覧表示アイコン差し込み */
.goods-detail--gellery-body .slick-list {position: relative;}
#open-imgList {
	width: 40px; height: 40px;
	position: absolute;
	bottom: 8px; left: 8px;
	z-index: 99;
    padding: 0;
}

/* ─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─　─ */

/* 画像一覧
---------------------------------------- */
/* 背景 */
#bg-imgList {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0; left: 0;
	background-color: #f2f2f2;
	border: none;
	z-index: 1000000000;
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.5s ease;
}
/* 画像リストCSS上書き変更 */
#bg-imgList .goods-detail--gellery-thumb {
	margin-top: 0;
}	
#bg-imgList .goods-detail--gellery-thumb .slick-slide:first-of-type {
	margin-left: 0;
}
#bg-imgList .slick-track:before { /* スライド1枚目消し */
	display: none;
}
#bg-imgList .slick-track {
	width: 100vw !important;
    display: grid;
    grid-template-columns: repeat(4, 23.75%);
    gap: 1%;
    /* flex-wrap: wrap; */
	/* display: flex;
	flex-wrap: wrap; */
    gap: 6px;
    padding: 6px 6px 20px;
}
#bg-imgList .slick-slide {
	width: 100% !important;
}
#bg-imgList .goods-detail--gellery-thumb li figure {
	width: 100%;
	left: 0;
}

/* ヘッダー部分 */
#header-imgList {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "M PLUS Rounded 1c";
	font-size: 15px;
}
/* 一覧部分の枠 */
#cont-imgList {
	height: calc(100vh - 40px);
	overflow: auto;
	background-color: #ffffff;
}
#inner-imgList {
	overflow: hidden;
}

/* 戻るボタン */
#back-imgList {
	border: none;
	position: absolute;
	left: 25px; top: 9px;
}
#back-imgList::after {
	position: absolute;
    top: 6px;
    left: -12px;
    width: 10px;
    height: 10px;
    content: "";
    border-left: 2px solid #505050;
    border-top: 2px solid #505050;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
	}

/* 詳細画像
---------------------------------------- */
#bg-imgDetail {
	display: none;
	width: 100%;
	height: 100vh;
	top: 0; left: 0;
	background-color: #000000bb;
	border: none;
	z-index: 1000000001;
	position: fixed;
	/* opacity: 1; */
}

/* サムネイル非表示 */
#bg-imgDetail .goods-detail--gellery-thumb {
	opacity: 0;
	pointer-events: none;
}

/* 詳細画像CSS上書き変更 */
#bg-imgDetail .goods-detail--gellery-comment p { /* サイズ表記 */
	color: #e8e8e8;
}
/* #bg-imgDetail .goods-detail--gellery-wrap {
	transform: translate(0, 33%);
} */
#bg-imgDetail #open-imgList,
#bg-imgDetail .goods-detail--gellery--sp-bookmark {
	display: none !important;
}


/* その他
---------------------------------------- */
/* 閉じるボタン */
#close-imgDetail {
	display: none;
	position: absolute;
	bottom: -43px; right: -10px;
	width: 54px; height: 54px;
}
#close-imgDetail::before,
#close-imgDetail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #f2f2f2;
}
#close-imgDetail::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#close-imgDetail::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}