div#gallery{
	background-color: rgb(30,30,30);
}
.pc_view div#gallery{
	padding: 20px 0;
	margin-top: 80px;
}
.sm_view div#gallery{
	padding: 6vw 0;
	margin-top: 18vw;
}

div.my_slider_outer{/*my_sliderがoverflow:hiddenでない場合に必要*/
	position: relative;
	overflow: hidden;
}
.pc_view div.my_slider_outer{
	max-width: 2300px;
	margin: 0 auto;
}
.pc_view div.my_slider_outer:after{/*左右グラデーションで隠す*/
	content: "";
	display: block;
	box-sizing: border-box;
	/*width: var(--max_container_size);*/
	width: 2300px;
	height: 100%;
	position: absolute;
	/*left: calc(( var(--max_container_size) - 100% ) / 2 * -1 );*/
	left: calc(( 2300px - 100% ) / 2 * -1 );
	top: 0;
	background: linear-gradient(
		to right,
		rgba(30,30,30,1) 0%,
		rgba(30,30,30,0) 5%,
		rgba(30,30,30,0) 95%,
		rgba(30,30,30,1) 100%
	);
	pointer-events: none;
}

div.my_slider{
	box-sizing: border-box;
	position: relative;
	width: 100%;
	/*overflow: hidden;*/
	user-select: none;
	-webkit-user-select: none;
}
.pc_view div.my_slider{
	padding: 0 160px;/*横のpaddingは、左右がどれだけ見えるか*/
	max-width: 2000px;
	margin: 0 auto;
}
.sm_view div.my_slider{/*横のpaddingは、左右がどれだけ見えるか*/
	padding: 0 16vw;
}

div.my_slider_view{
	overflow: visible;
	box-sizing: border-box;
	width: 100%;
	touch-action: pan-y;
}

div.my_slider_track{
	display: flex;
	box-sizing: border-box;
	touch-action: pan-y pinch-zoom;
	will-change: transform;
	transition: transform .3s ease;
}

div.my_slider_track.drag{
	transition: none;
}

div.my_slider_track > *{
	flex: 0 0 auto;
	box-sizing: border-box;
	overflow: hidden;
	user-select: none;
}

div.my_slider_track > *{
	/*background-color: rgba(0,0,0,.2);*/
	min-height: 10px;
}

.my_slider img{
	/*pointer-events: none;*/
	-webkit-user-drag: none;
}

div.my_slider_track > * > *{
	width: 100%;
	/*height: 100%;*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(20px, 2vw, 32px);
	font-weight: bold;
	color: #333333;
}

div.my_slider_btn{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	filter: drop-shadow(1px 1px 5px rgba(51,51,51,.5)) 
		drop-shadow(-1px -1px 5px rgba(51,51,51,.5)) 
		drop-shadow(-1px 1px 5px rgba(51,51,51,.5)) 
		drop-shadow(1px -1px 5px rgba(51,51,51,.5));
	color: #ffffff;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	cursor: pointer;
	user-select: none;
	
	/*background: rgba(255,0,0,.5);*/
}
.pc_view div.my_slider_btn{
	width: 80px;
	height: 160px;
}
.sm_view div.my_slider_btn{
	width: 16vw;
	height: 32vw;
}
div.my_slider_btn:after{
	content: "";
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 60%;
	height: 30%;
	top: 35%;
	border: solid 3px rgba(255,255,255,.6);
	border-right-width: 0;
	border-top-width: 0;
	transition: border-color .3s;
}
.display_device div.my_slider_btn:hover:after{
	border-color: #ffffff;
}

div.my_slider_btn.prev{
	left: 0;
}
.pc_view div.my_slider_btn.prev{
	left: 60px;
}
div.my_slider_btn.prev:after{
	transform: rotate(45deg);
	left: 30%;
}
div.my_slider_btn.next{
	right: 0;
}
.pc_view div.my_slider_btn.next{
	right: 60px;
}
div.my_slider_btn.next:after{
	transform: rotate(-135deg);
	left: 10%;
}

div.my_slider_btn.off{
	opacity: .2;
	pointer-events: none;
}

/*ギャラリー用*/
.gallery1{
	cursor: pointer;
}
.display_device .gallery1{
	transition: transform .3s;
}
.display_device .gallery1:hover{
	transform: scale(1.1);
}
.touch_device .gallery1:active{
	opacity: .7;
}