@charset "utf-8";

/* ==================================================================================================================
 オススメ作品
================================================================================================================== */
/* 全体
--------------------------------------------------------- */
div.work_push{
	width: 100%;
	position: relative;
	margin-bottom: 15px;
}

div.push_container{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 0 35px;
	position: relative;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	height: 198px;
}

div.push_container div.push_slide{
	position: relative;
	z-index: 1500;
	width: 100%;
}

div.work_push.two_line div.push_container{
	height: 396px;
}

div.push_container.loading{
	opacity: 0;
}

/* ----- もっと見る ----- */
.push_more {
  margin-top: 10px;
  text-align: right;
}

.push_more > a {
  padding-left: 14px;
  background: url("../../../images/web/home/icon_more.png") left center no-repeat;
}

.female .push_more > a {
  padding-left: 13px;
  background: url("../../../images/web/girls/icon_more.png") no-repeat 0 center;
}

/* 送り戻しボタン
--------------------------------------------------------- */
div.push_prev,
div.push_next{
	position: absolute;
	top: 5px;
	bottom: 5px;
	width: 30px;
	cursor: pointer;
	background:url(../images/icon_work_push_01.png) no-repeat 0 center #fff;
}
div.push_prev{left: 0; border-radius: 5px 0 0 5px; background-position: -5px center;}
div.push_next{right: 0; border-radius: 0 5px 5px 0; background-position: -45px center;}

div.push_prev:hover,
div.push_next:hover{background-color: #F0F2F7;}

div.push_prev.disable{background-position: -165px center;}
div.push_next.disable{background-position: -205px center;}

div.push_prev.disable:hover,
div.push_next.disable:hover{
	background-color: #fff;
	cursor: default;
}

/* ページャー
--------------------------------------------------------- */
div.push_pager{
	text-align: right;
	margin-top: 3px;
	color: #aaa;
}

/* 見出し+タブ
--------------------------------------------------------- */
div.title_01.with_work_push{
	position: relative;
	padding-top: 15px;
}

ul.work_push_tab{
	float: right;
	position: absolute;
	bottom: 5px;
	right: 0
}

ul.work_push_tab li{
	float: left;
	font-size: 12px;
	color: #fff;
	text-align: center;
	cursor: pointer;
	width: 100px;
	height: 27px;
	line-height: 28px;
	margin-right: 3px;
	background: url(../../../images/web/home/tab_100_bg.gif) no-repeat left -28px;
}

ul.work_push_tab li:hover{
	background-position: left 0;
	color: #536280;
}

ul.work_push_tab li.on{
	background-position: left 0;
	color: #536280;
	cursor: default;
}

/* 横並びリスト
--------------------------------------------------------- */
ul.push_list{
	margin:0;
	padding:0;
	width: 100%;
	display: table;
}

ul.push_list li{
	padding: 3px;
	text-align: center;
	display: table-cell;
}

/* 各作品
--------------------------------------------------------- */
div.push_thumb{
	display: inline-block;
	position: relative;
	border-radius: 3px;
	background: #fff;
	border:solid 1px #F0F2F7;
	height: 190px;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	position: relative;
	z-index: 1500;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

div.push_thumb:hover{
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	background: #F5F7FA;
	border-color: #FFAA00;
}

div.push_thumb > a{
	display: block;
	padding: 0 5px;
	font-size: 0;
	position: relative;
	z-index: 2100;
}

div.push_thumb img{
	max-height: 180px;
	max-width: 180px;
	vertical-align: middle;
}

/*----- 垂直方向センタリング -----*/
div.push_thumb > a:before{
	content: "";
	width: 0;
	height: 190px;
	vertical-align: middle;
	display: inline-block;
}

/* 作品情報
--------------------------------------------------------- */
div.work_info{
	padding: 5px;
	background: #F0F2F7;
	border:#B8C3D9 solid 2px;
	position: absolute;
	left: 50%;
	margin-left: -205px;
	bottom: 190px;
	width: 400px;
	border-radius: 5px;
	display: none;
	z-index: 2000;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

div.push_thumb > a + div.work_info:hover{
	display: none;
}

/*----- 吹き出し三角 -----*/
div.work_info:before,
div.work_info:after{
	content: "";
	position: absolute;
	display: block;
	height: 0;
	width: 0;
	border: 14px solid transparent;
	left: 50%;
	margin-left: -14px;
}

div.work_info:before{
	border-top-color: #F0F2F7;
	bottom: -25px;
	z-index: 70;
}

div.work_info:after{
	border-top-color: #B8C3D9;
	bottom: -28px;
	z-index: 60;
}

/*----- 吹き出し中身 -----*/
div.work_info dl{
	background: #fff;
	padding: 12px;
	border-radius: 3px;
	position: relative;
}

div.work_info dl dt,
div.work_info dl dd{
	line-height: 1.3;
	color: #333;
}

div.work_info dl dt.work_name{
	font-weight: bold;
	font-size: 14px;
	max-height: 2.4em;
	overflow: hidden;
	margin-bottom: 8px;
	color: #536280;
}

div.work_info dl dd.work_price{
	color: #c00;
	font-size: 12px;
	margin-top: 15px;
	display: none;
}

.sale div.work_info dl dd.work_price{
	display: block;
}

div.work_info dl dd.work_price .limited_time{
	padding-right: 10px;
}

div.work_info dl dd.work_text{
	font-size: 11px;
	padding-top: 12px;
	border-top: solid 1px #B8C3D9;
	max-height: 2.4em;
	overflow: hidden;
}

/*----- アイコン（SALE、独占/先行など） -----*/
div.push_thumb:after {
  content: "";
  display: none;
  position: absolute;
  left: -2px;
  top: -2px;
  width: 50px;
  height: 50px;
  background: url(../images/icon_work_push_02.png) no-repeat 0 0;
  z-index: 2200;
}

div.push_thumb.sale:after { display: block; }

div.push_thumb.exclusive:after,
div.push_thumb.advance:after,
div.push_thumb.exclusive.advance:after,
div.push_thumb.exclusive_d:after {
  display: block;
  left: -7px;
  top: -7px;
  width: 55px;
  height: 55px;
}

div.push_thumb.exclusive:after { background: url(../images/icon_work_push_02.png) no-repeat 0 -50px; }
div.push_thumb.advance:after { background: url(../images/icon_work_push_02.png) no-repeat 0 -105px; }
div.push_thumb.exclusive.advance:after { background: url(../images/icon_work_push_02.png) no-repeat 0 -160px; }
div.push_thumb.exclusive_d:after { background: url(../images/icon_work_push_02.png) no-repeat 0 -215px; }

div.push_thumb.exclusive_e:after {
  display: block;
  left: -7px;
  top: -2px;
  width: 71px;
  height: 50px;
  background: url(../images/icon_work_push_02.png) no-repeat 0 -270px;
}

/* 女性向けデザイン
--------------------------------------------------------- */
/*----- 送り戻しボタン -----*/
.female div.push_prev{background-position: -85px center;}
.female div.push_next{background-position: -125px center;}
.female div.push_prev:hover,
.female div.push_next:hover{background-color: #FAF4EF;}
.female div.push_prev.disable{background-position: -165px center;}
.female div.push_next.disable{background-position: -205px center;}
.female div.push_prev.disable:hover,
.female div.push_next.disable:hover{background-color: #fff;}

/*----- タブ -----*/
ul.work_push_tab.female{bottom: 4px;}
ul.work_push_tab.female li{background: url(../../../images/web/girls/tab_100_bg.gif) no-repeat left -28px;}
ul.work_push_tab.female li:hover,
ul.work_push_tab.female li.on{background-position: left 0; color: #6e5a5a;}

/*----- 各作品 -----*/
.female div.push_thumb{border:solid 1px #FAF4EF;}
.female div.push_thumb:hover{background: #FAF4EF; border-color: #EB8ABA;}

/*----- 作品情報 -----*/
.female div.work_info{background: #FAF4EF; border: #BCA49F solid 2px;}
.female div.work_info:before{border-top-color: #FAF4EF;}
.female div.work_info:after{border-top-color: #BCA49F;}
.female div.work_info dl dt.work_name{color: #79615F;}
.female div.work_info dl dd.work_text{border-top: solid 1px #BCA49F;}