@charset "utf-8";
/*------------------------------*/
/* 定数設定 */
/*------------------------------*/
:root {

	/*------------------------------*/
	/* 初期設定 */
	/*------------------------------*/
	--smooth_scroller_box_count: 20; /* 要素数を指定 (画像枚数) */
	--smooth_scroller_animation_time: 6000ms; /* 要素単位の実行時間 */

	--smooth_scroller_box_height: 150px; /* 要素の高さ */
	--smooth_scroller_box_width: 150px; /* 要素の幅 */
	--smooth_scroller_padding: 5px; /* 要素単位の間隔 */
	--smooth_scroller_popup_box_inner: 15px; /* 要素毎の内部padding */
	/*------------------------------*/

}

/*------------------------------*/
/* 全体枠 */
.smooth_scroller_frame {
	height:var(--smooth_scroller_box_height);
	width:100%;
	overflow: hidden;

	position: absolute;
	bottom:10px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 1;
	background-color: rgba(255,255,255,0.3);
	display: none;
}

/*------------------------------*/
/* 内部スクロール枠 */
.smooth_scroller_inner {
	position: absolute;
	top:0px;
	left:0px;
	width:calc(var(--smooth_scroller_box_width) * var(--smooth_scroller_box_count) * 2);

	/* アニメーション設定 */
	animation-name: smooth_scroller_inner;
	animation-duration:calc(var(--smooth_scroller_animation_time) * var(--smooth_scroller_box_count));
	animation-timing-function:linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes smooth_scroller_inner {
	0%{
		left:0px;
	}
	100%{
		left:calc(var(--smooth_scroller_box_width) * var(--smooth_scroller_box_count) * -1);
	}
}

/*------------------------------*/
/* コンテンツボックス */
.smooth_scroller_contents_box {
	height:var(--smooth_scroller_box_height);
	width:var(--smooth_scroller_box_width);
	float:left;
	position: relative;
	padding:var(--smooth_scroller_padding);
}

/*------------------------------*/
/* コンテンツボックス内の要素 (画像) */
.smooth_scroller_box {
	height:100%;
	width:100%;
	position: relative;
	overflow: hidden;
	background-size: cover !important;
	background-position: center center !important;
}

/*------------------------------*/
/* ポップアップ枠 */
.smooth_scroller_popup_box {
	position: absolute;
	height:calc(100% - (var(--smooth_scroller_padding) * 2));
	width:calc(100% - (var(--smooth_scroller_padding) * 2));
	top:calc(var(--smooth_scroller_padding));
	left:calc(var(--smooth_scroller_padding));
	opacity:0;
	z-index: 1;
	cursor:pointer;
	transition:0.3s;
	color:#ffffff;
	background-color:rgba(0,0,0,0);
	padding:10px;
}

/*------------------------------*/
/* 内部要素の高さを抑える */
.smooth_scroller_popup_box_inner {
	padding:var(--smooth_scroller_popup_box_inner);
	height:calc(100% - (var(--smooth_scroller_popup_box_inner) ));
	overflow: hidden;
}