@charset "utf-8";

/*************************************************
 * Description: 【トップ】プロモーションF
 * Package: ecp_promotion_f
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2017/11/
 * Notes: 
*************************************************/

/* ==============================================
 * base
=============================================== */
#ecp_promotion_f {
	overflow: hidden;
	position: relative;
}
/*TEST
#ecp_promotion_f.under_item_width {
	background: #eec;
}
#ecp_promotion_f.over_item_width {
	background: #ecc;
}
*/


/* ==============================================
 * 罫線
=============================================== */
/* スタンバイ無し */
#ecp_promotion_f.standby_disable .ecp_promotion_images {
	/*
	box-sizing: border-box;
	border: solid 1px #ccc;
	*/
}
/* スタンバイ有り
#ecp_promotion_f.standby_enable:before,
#ecp_promotion_f.standby_enable:after {
	content: "";
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 0;
	border-top: solid 1px #ccc;
	z-index: 20;
}
#ecp_promotion_f.standby_enable:before {
	top: 0;
}
#ecp_promotion_f.standby_enable:after {
	/*top: 500px; 下罫線を引くべき位置=プロモーション画像高さ ←tpl側で指定する形にした*--/
}
*/
/* モバイル表示時（ブラウザ幅がアイテム幅未満の場合）に罫線を入れる */
#ecp_promotion_f.under_item_width .ecp_promotion_images {
	/*
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	*/
}

/* ==============================================
 * プロモーションエリア（スライド切替）
=============================================== */
#ecp_promotion_f .ecp_promotion_images {
	position: relative;/*prev,nexボタン用*/
	margin: 0 auto;
	width: 100%;/*auto;*/
}
#ecp_promotion_f.over_item_width .ecp_promotion_images {
	width: 1920px;
}
#ecp_promotion_f.standby_enable .ecp_promotion_images {/*スタンバイ有*/
	overflow: visible;
}
#ecp_promotion_f.standby_disable .ecp_promotion_images {/*スタンバイ無*/
	overflow: hidden;
}
/* プロモーション画像
----------------------------------------------- */
#ecp_promotion_f .ecp_promotion_image_wrap {
	width: 100%;
	margin: 0 auto;
	white-space: nowrap;
	/* 初期非表示 */
	visibility: hidden;
	opacity: 0;
}
#ecp_promotion_f.standby_disable .ecp_promotion_image_wrap {/*スタンバイオフ時*/
	width: 1920px;
}
#ecp_promotion_f .ecp_promotion_image {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
}
#ecp_promotion_f .ecp_promotion_image a {
	display: block;
	width: 100%;
	height: 100%;
}
/* 縦区切り罫線
#ecp_promotion_f .ecp_promotion_image {
	position: relative;
}
#ecp_promotion_f .ecp_promotion_image:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	pointer-events: none;
}
*/
#ecp_promotion_f .ecp_promotion_image img {
	width: 100%;
	height: auto;
}

/* movie */
#ecp_promotion_f .ecp_promotion_image .promotion_movie {
	background-color: #000;
	display: block;
	width: 100%;
	padding-top: 39.0625%;/*縦横比から比率を計算しておく*/
	height: 0;
	position: relative;
	overflow: hidden;
}
#ecp_promotion_f .ecp_promotion_image .promotion_movie .promotion_movie_body {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==============================================
 * loading
=============================================== */
#ecp_promotion_f .ecp_promotion_loading {
	width: 100%;
	height: 100%;
	background: url(../../../img/common/etc/loader.svg) no-repeat center center;
	background-size: 50px;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
}

/* ==============================================
 * Item PREV&NEXTボタン
=============================================== */
#ecp_promotion_f .ecp_promotion_images .item_slide_btn {
	position: absolute;
	top: 50%;
	visibility: hidden;
	opacity: 0;
	z-index: 20;
}
#ecp_promotion_f .ecp_promotion_images .btn_prev {
}
#ecp_promotion_f .ecp_promotion_images .btn_next {
}
@media ( max-width: 767px ) {
	#ecp_promotion_f .ecp_promotion_images .item_slide_btn {
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}
	#ecp_promotion_f .ecp_promotion_images .btn_prev {
		left: 10px;
	}
	#ecp_promotion_f .ecp_promotion_images .btn_next {
		right: 10px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#ecp_promotion_f .ecp_promotion_images .item_slide_btn {
		width: 40px;
		height: 40px;
		margin-top: -20px;
	}
	#ecp_promotion_f .ecp_promotion_images .btn_prev {
		left: 20px;
	}
	#ecp_promotion_f .ecp_promotion_images .btn_next {
		right: 20px;
	}
}
@media ( min-width: 980px ) {
	#ecp_promotion_f .ecp_promotion_images .item_slide_btn {
		width: 60px;
		height: 60px;
		margin-top: -30px;
	}
	#ecp_promotion_f .ecp_promotion_images .btn_prev {
		left: 20px;
	}
	#ecp_promotion_f .ecp_promotion_images .btn_next {
		right: 20px;
	}
}

#ecp_promotion_f .ecp_promotion_images .item_slide_btn a {
}
/* アイテム画像幅よりブラウザ幅が未満の場合は非表示にする 
#ecp_promotion_f.under_item_width .ecp_promotion_images .item_slide_btn {
	display: none;
}
*/

/* ==============================================
 * Item Soundボタン
=============================================== */
#ecp_promotion_f .ecp_promotion_images .btn_sound {
	position: absolute;
	left: 40px;
	bottom: 60px;
	z-index: 9;
	color: #fff;
	background-color: #000;
	padding: 2px;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
#ecp_promotion_f .ecp_promotion_images .btn_sound i {
	font-size: 150%;
	vertical-align: middle;
}
#ecp_promotion_f .ecp_promotion_images .btn_sound .status {
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
}

/* ==============================================
 * ドットナビ
=============================================== */
#ecp_promotion_f .ecp_promotion_dotnav {
	/* 初期非表示 */
	visibility: hidden;
	opacity: 0;
	padding: 40px 10px;
}
#ecp_promotion_f .ecp_promotion_dotnav ul {
	text-align: center;
	height: 10px;
}
#ecp_promotion_f .ecp_promotion_dotnav ul li {
	display: inline-block;
	vertical-align: top;
	width: 10px;
	height: 10px;
}
#ecp_promotion_f .ecp_promotion_dotnav ul li + li {
	margin-left: 16px;
}
#ecp_promotion_f .ecp_promotion_dotnav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	outline: 0;
	text-indent: -9999px;
	overflow: hidden;
}
#ecp_promotion_f .ecp_promotion_dotnav li.is-active a {
	pointer-events: none;
}
@media ( max-width: 767px ) {
	#ecp_promotion_f .ecp_promotion_dotnav {
		padding: 10px 10px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#ecp_promotion_f .ecp_promotion_dotnav {
		padding: 15px 10px;
	}
}

/* ==============================================
 * message area
=============================================== */
#ecp_promotion_f .message_area {
	margin: 30px auto;
	padding: 10px 0;
	text-align: center;
}