@charset "utf-8";
.horizontal_scroll {
	white-space: nowrap;
	padding: 10px 0px 10px 0px;
	overflow-y: hidden;
	overflow-x: auto;
	scrollbar-track-color : #f3f3f3;
    scrollbar-face-color  : #0085cc;
    scrollbar-shadow-color : #f3f3f3;
    scrollbar-arrow-color  : #f3f3f3;
	-webkit-overflow-scrolling: touch;
}
.horizontal_scroll::-webkit-scrollbar {
	height : 10px;
}
.horizontal_scroll::-webkit-scrollbar-track {
	background : #f3f3f3;
}
.horizontal_scroll::-webkit-scrollbar-thumb {
	background : #AE8A6F;
	border-radius : 10px;
}
.thumbnail_image {
	max-width: none;
    height: 100%;
}
.PREVIEW {
	position: relative;
	white-space: nowrap;
	user-select: none;
    overflow: hidden;
    font-size : 0;
}

.slider_preview {
	display: inline-block !important;
	border-radius: 8px;
	overflow: hidden;
}

.arrow {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    background: url(/img/index_arrow.png) rgba(255, 255, 255, 0.6) no-repeat;
    background-size: auto;
    width: 50px;
    height: 150px;
    margin: auto;
    vertical-align: middle;
    background-position: center right 10px;
	background-size: 30px auto;
    cursor: pointer;
    transition: 0.2s;
	backdrop-filter: saturate(180%) blur(3px);
}
.arrow:hover {
    background-position: center right 13px;
    background-color: rgba(255, 255, 255, 0.8);
}
.arrow.left {
	left: 0;
}

.arrow.right {
	right: 0;
	transform: scaleX(-1);
}

.slide_animation {
	opacity: 1;
	animation: slide .5s ease-out;
	animation-fill-mode: forwards;
}

.slide_animation_re {
	animation: slide_re .5s ease-out;
	animation-fill-mode: forwards;
	opacity: 1;
}
.PREVIEW_TEXT:not(:empty){
    position : absolute;
    bottom : 0;
    width : 100%;
    left: 0;
    padding : 10px;
    background: rgba(0,0,0,0.5);
    color: #ffffff;
    z-index: 1;
}

.PREVIEW .image_2_3_former img {
	object-fit: contain;
}
.PREVIEW .thumbnail_image {
	pointer-events: none;
}

.PREVIEW_CONTENTS:not(:empty){
	position: absolute;
	width: 100%;
	bottom : 0;
	background-color: rgba(255,255,255,0.5);
	backdrop-filter: saturate(180%) blur(3px);
	padding: 10px 0px 10px 0px;
	text-align: center;
}
.PREVIEW_CONTENTS p{
	text-align: left;
	width: fit-content;
	margin: auto;
}
.PERFORMANCE_IMAGE{
	position: relative;
}

.performance_category{
	padding : 8px 15px;
	display: inline-block;
	background-color: #AE8A6F;
	color: #ffffff;
	font-size: 0.85rem;
	line-height: 1em;
	margin-bottom: 0.5em;
}
@keyframes slide {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}

@keyframes slide_re {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
	}
}

.NEXT.fadein_animation{
	position: absolute;
	top: 0;
	left: 0;
	animation: fadein 2s ease-out;
	animation-fill-mode: forwards;
}
.NEXT.fadein_animation_re {
	position: absolute;
	top: 0;
	left: 0;
	animation: fadein_re 2s ease-out;
	animation-fill-mode: forwards;
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadein_re {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
	}
}
@media screen and (max-width : 950px){
	.horizontal_scroll {
	    overflow-y: hidden;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch;
    }
}
@media screen and (max-width : 650px){
	.arrow{
        display: none;
    }
	.PREVIEW_CONTENTS:not(:empty){
		position: static;
		width: 100%;
	}
}