@charset "utf-8";

/* CSS Document */

figure {
	margin-top: 50px;
	margin-bottom: 0px;
}

/*
#groove_slide_display,
#groove_slide_display span,
#groove_slide_back {
	width: 100%;
	height: 460px;;
	margin-left: auto;
	margin-right: auto;
}
*/

#groove_slide_display {
/*	border-radius: 3px;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.15);*/
}

#groove_slide_display,
#groove_slide_display span,
#groove_slide_back {
	width: 100%;
	height: 320px;
}

#groove_slide_display,
#groove_slide_back {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#groove_slide_display {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-color: #35415A;
}

#groove_slide_display_sub {
	width: 100%;
	height: 180px;
	background-color: #35415A;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#groove_slide_loading {
	background-image: url(./image/loading.svg);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	height: 100%;
}

#groove_slide_back {
	position: absolute;
	top: 0px;
	z-index: 2;
}

#wait_bar_wrapper,
#wait_bar_wrapper .wait_bar,
#wait_bar_wrapper .wait_bar_bg {
	width: 100%;
	height: 1px;
}

#wait_bar_wrapper {
	position: relative;
}

#wait_bar_wrapper .wait_bar,
#wait_bar_wrapper .wait_bar_bg {
	position: absolute;
	display: inline-block;
	top: 0px;
	left: 0px;
}

#wait_bar_wrapper .wait_bar {
	background-color: #FF7098;
	z-index: 10;
}

#wait_bar_wrapper .wait_bar_bg {
	background-color: #ccc;
	z-index: 5;
}

#switching_timer {
	position: absolute;
	z-index: 50;
	/*	width: 50px;
	height: 50px;*/
	display: inline-block;
	top: 10px;
	right: 10px;
}

.slide_content_mark {
	display: inline-block;
	position: absolute;
	z-index: 50;
	list-style-type: none;
	overflow-: hidden;
	margin: 0px;
	padding: 0px;
	bottom: 10px;
	left: 10px;
}

.slide_content_mark li {
	display: inline-block;
	width: 40px;
	height: 25px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 5px;
	padding: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 2px solid #FFFFFF;
	overflow: hidden;
	vertical-align: middle;
}

#slide_content_mark li {
	cursor: pointer;
	color: rgba(65,198,255,1.00);
	opacity: 1.00;
	/*background-color: rgba(65,198,255,0.5);*/
}

.slide_content_mark .slide_content_now {
	border: 2px solid #FC7710 !important;
}

#groove_slide_contents {
	font-size: 90%;
	color: rgba(255,255,255,0.80);
	text-shadow: 0px 0px 2px rgba(0,0,0,0.65);
	position: absolute;
	bottom: 10px;
	right: 20px;
}

#groove_slide_back:hover #groove_slide_contents {
	color: rgba(255,255,255,1.0);
	text-shadow: 0px 0px 3px rgba(0,0,0,0.85);
}

#groove_forward_contents,
#groove_backwards_contents {
	cursor: pointer;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 45%;
	z-index: 20;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#groove_forward_contents {
	right: 15px;
	background-image: url(./image/right.svg);
}

#groove_backwards_contents {
	left: 15px;
	background-image: url(./image/left.svg);
}

/* 画像送りボタンは非表示し、表示領域にマウスオーバーで見えるようにする。 */

.slide_content_mark,
#groove_forward_contents,
#groove_backwards_contents {
	opacity: 0.0;
}

#groove_slide_display:hover .slide_content_mark,
#groove_slide_display:hover #groove_forward_contents,
#groove_slide_display:hover #groove_backwards_contents {
	opacity: 0.50;
}

.slide_content_mark:hover,
#groove_forward_contents:hover,
#groove_backwards_contents:hover {
	opacity: 0.95 !important;
}