/* Y'S GEAR | Y'S GEAR CLUB WEB : download.css */


/*======================================================================*
 *  [ downloadWrap ] 
 *======================================================================*/

.downloadWrap {
	margin: 0 0 30px 0;
	box-sizing: border-box;
}


/*======================================================================*
 *  [ downloadList ] 
 *======================================================================*/
/* 
.downloadList {
	margin: 0 -8px;
}
.downloadList li {
	float: left;
	width: 33.33333333%;
	padding: 15px 8px;
	box-sizing: border-box;
} */
.downloadList {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 -8px;
}
.downloadList li {
	width: 25%;
	padding: 15px 8px;
	box-sizing: border-box;
}
.downloadList li a {
	display: block;
	height: 100%;
	padding: 14px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
.downloadList li a:hover {
	background: #ebebf4;
}

/* [ サムネイル ] */
.downloadList figure {
	margin: 0 0 10px 0;
	text-align: center;
}

/* [ 詳細 ] */
.downloadList dl {
	position: relative;
	min-height: 75px;
	padding: 0 23px 0 0;
	line-height: 1.2;
}
.downloadList dl:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 18px;
	height: 16px;
	margin: -8px 0 0 0;
	filter:alpha(opacity=30);
	-moz-opacity: 0.3;
	opacity: 0.3;
	content: url(/shared/svg/icon_download.svg);
}
html>/**/body .downloadList dl:after {
	content: url(/shared/img/ie8/icon_download.png);
}
.downloadList dl.book:after {
	content: url(../svg/icon_book.svg);
}
.downloadList a:hover dl:after {
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.downloadList dt {
	color: #000;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
}
.downloadList dd {
	margin: 5px 0 0 0;
}


/*======================================================================*
 *  [ Media Queries 980 ] 
 *======================================================================*/

@media screen and (max-width: 980px) {
	
	.downloadWrap {
		padding: 0 20px;
	}

}


/*======================================================================*
 *  [ Media Queries 768 ] 
 *======================================================================*/

@media screen and (max-width: 768px) {
	
	.downloadList li {
		width: 33.33333333%;
	}
	
}


/*======================================================================*
 *  [ Media Queries 568 ] 
 *======================================================================*/

@media screen and (max-width: 568px) {
	
	.downloadWrap { padding: 0 10px; }
	.downloadWrap .commonTitleH2 {
		margin-right: -10px !important;
		margin-left: -10px !important;
	}
	
	
	/*==================================================================*
	 *  [ downloadList ] 
	 *==================================================================*/
	
	.downloadList {
		margin: 0 -5px;
	}
	.downloadList li {
		width: 50%;
		padding: 5px;
	}
	.downloadList li a {
		padding: 10px;
	}
	

}


/*======================================================================*
 *  [ Media Queries 375 ] 
 *======================================================================*/

@media screen and (max-width: 375px) {
	
	/*==================================================================*
	 *  [ downloadList ] 
	 *==================================================================*/
	
	.downloadList {
		margin: 0;
	}
	.downloadList li {
		float: none;
		width: 100%;
		padding: 0;
	}
	.downloadList li + li {
		margin: -1px 0 0 0;
	}
	.downloadList li a {
		display: table;
		position: relative;
		width: 100%;
	}
	.downloadList li a:hover {
		z-index: 5;
	}
	
	/* [ サムネイル ] */
	.downloadList figure {
		display: table-cell;
		width: 100px;
		margin: 0;
		padding: 0 10px 0 0;
	}
	.downloadList figure img {
		width: 100px;
	}
	
	/* [ 詳細 ] */
	.downloadList dl {
		display: table-cell;
		vertical-align: middle;
	}

}