@charset "utf-8";

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

/* ==============================================
 * base
=============================================== */
#ecp_promotion_f {
	overflow: hidden;
	position: relative;
}

/* ==============================================
 * 罫線
=============================================== */
/* スタンバイ無し */
#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: 1680px;
}
#ecp_promotion_f.fluidimage .ecp_promotion_images {/*フルード時は上書きが必要*/
	width: 100%;
}
#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: 1680px;
	/*margin-left: -1px;/*外枠罫線を付けている場合は1pxずらしておいたほうが収まりがいい*/
}
#ecp_promotion_f .ecp_promotion_image {
	display: inline-block;
	width: 100%;
	height: 100%;
}
#ecp_promotion_f .ecp_promotion_image a {
	display: block;
	width: 100%;
	height: 100%;
}
#ecp_promotion_f .ecp_promotion_image .image_box {
	display: block;
	text-indent: -99999px;
	/* width, height はjs制御 */
	background-size: cover;
	background-position: 50% 50%;
	/* 左右枠線（プロモitemマージンの0の場合は上下枠線はデコレーション枠にて入れる方が使いやすい。マージンのある場合はこちらで四方に罫線を入れる） 
	box-sizing: border-box;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	*/
}
#ecp_promotion_f .ecp_promotion_image.item_standby .image_box {
	border: none;
}

/* ==============================================
 * loading
=============================================== */
#ecp_promotion_f .ecp_promotion_loading {
	width: 100%;
	background: url(../../../img/common/etc/loader.gif) no-repeat center center;
	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;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	z-index: 20;
}
#ecp_promotion_f .ecp_promotion_images .btn_prev {
	left: 0px;
}
#ecp_promotion_f .ecp_promotion_images .btn_next {
	right: 0px;
}
#ecp_promotion_f .ecp_promotion_images .item_slide_btn a {
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
	text-indent: -9999px;
}
/* アイテム画像幅よりブラウザ幅が未満の場合は非表示にする *--/
#ecp_promotion_f.under_item_width .ecp_promotion_images .item_slide_btn {
	display: none;
}
*/

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

/* ==============================================
 * Item PREV&NEXTボタン
=============================================== */
#ecp_promotion_f .ecp_promotion_images .item_slide_btn {
	position: absolute;
	top: 50%;
	visibility: hidden;
	opacity: 0;
	width: 26px;
	height: 26px;
	line-height: 26px;
	margin-top: -13px;
	z-index: 20;
}
/* スタンバイ無 */
#ecp_promotion_f .ecp_promotion_images .btn_prev {
	left: 10px;
}
#ecp_promotion_f .ecp_promotion_images .btn_next {
	right: 10px;
}
#ecp_promotion_f .ecp_promotion_images .item_slide_btn a {
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
}
#ecp_promotion_f .ecp_promotion_images .item_slide_btn a.icon-arrow:before,
#ecp_promotion_f .ecp_promotion_images .item_slide_btn a.icon-arrow:after {
	background-color: #fff;
}
@media ( min-width: 980px ) {
	#ecp_promotion_f .ecp_promotion_images .item_slide_btn {
		display: none;
	}
}


/* ==============================================
 * ナンバーナビ
=============================================== */
#ecp_promotion_f .ecp_promotion_numnav {
	/* 初期非表示 */
	visibility: hidden;
	opacity: 0;
	/*width,heightはjs制御*/
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	pointer-events: none;
	z-index: 20;
}
#ecp_promotion_f .ecp_promotion_numnav ul {
	position: absolute;
	bottom: 27px; right: 0;
	padding: 15px 30px;
	pointer-events: auto;
	/*background-color: rgba(0,0,0,0.8);*/
}
#ecp_promotion_f .ecp_promotion_numnav li {
	display: none;
}
#ecp_promotion_f .ecp_promotion_numnav li.is-active {
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
}
#ecp_promotion_f .ecp_promotion_numnav li + li {
	/*margin-left: 10px;*/
}
#ecp_promotion_f .ecp_promotion_numnav .btn_prev,
#ecp_promotion_f .ecp_promotion_numnav .btn_next {
	display: inline-block;
	vertical-align: middle;
}
#ecp_promotion_f .ecp_promotion_numnav .btn_prev a,
#ecp_promotion_f .ecp_promotion_numnav .btn_next a {
	display: block;
	width: 16px; height: 16px;
	outline: 0;
	text-indent: -9999px;
	padding: 0 6px;
}
#ecp_promotion_f .ecp_promotion_numnav .icon-arrow:hover:before,
#ecp_promotion_f .ecp_promotion_numnav .icon-arrow:hover:after {
	background-color: #fff;
}
/* 「○|○」の構成 */
#ecp_promotion_f .ecp_promotion_numnav li span {
	display: inline-block;
	vertical-align: middle;
	font-size: 17px;
	line-height: 1;
	color: #fff;
	margin: 0 20px;/*各spanの間隔*/
}
#ecp_promotion_f .ecp_promotion_numnav li span.separator {
	text-indent: -9999px;
	border-left: solid 1px #fff;
	width: 0;
	height: 17px;
}
@media ( max-width: 767px ) {
	#ecp_promotion_f .ecp_promotion_numnav {
		display: none;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#ecp_promotion_f .ecp_promotion_numnav ul {
		bottom: 0; right: 0;
		padding: 20px;
	}
	#ecp_promotion_f .ecp_promotion_numnav li span {
		font-size: 16px;
		margin: 0 13px;/*各spanの間隔*/
	}
	#ecp_promotion_f .ecp_promotion_numnav li span.separator {
		height: 16px;
	}
}

/* ==============================================
 * ドットナビ
=============================================== */
@media ( max-width: 767px ) {
	#ecp_promotion_f .ecp_promotion_dotnav {
		/* 初期非表示 */
		visibility: hidden;
		opacity: 0;
		padding: 0px;
	}
	#ecp_promotion_f .ecp_promotion_dotnav ul {
		text-align: center;
		/*height: 30px; /*念のための高さ制限（ul要素に余白が生まれるのを抑制）*/
		background-color: #000;
	}
	#ecp_promotion_f .ecp_promotion_dotnav ul li {
		display: inline-block;
		vertical-align: top;
		width: 30px;
		height: 30px;
	}
	#ecp_promotion_f .ecp_promotion_dotnav ul li + li {
		margin-left: 0px;
	}
	#ecp_promotion_f .ecp_promotion_dotnav ul li a {
		display: block;
		width: 100%;
		height: 100%;
		outline: 0;
		text-indent: -9999px;
		
		text-align: center;
	}
	#ecp_promotion_f .ecp_promotion_dotnav li.is-active a {
		pointer-events: none;
	}
	/* icon-dot overdide */
	#ecp_promotion_f .ecp_promotion_dotnav ul li .icon-dot:before {
		width: 8px;
		height: 8px;
		top: 50%;
		left: 50%;
		margin-top: -4px;
		margin-left: -4px;
		background-color: #666;
	}
	#ecp_promotion_f .ecp_promotion_dotnav ul li.is-active .icon-dot:before {
		background-color: #B7A948;
	}
}
@media ( min-width: 768px ) {
	#ecp_promotion_f .ecp_promotion_dotnav {
		display: none;
	}
}