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

#article.howto .productBox{
	background:#eee;
	padding:20px;
}
#article.howto .productLink .spec{
	background:none;
	font-size: 93%;
	margin:-5px 0 15px 0;
	padding:0;
	line-height:150%;
}
#article.howto .productLink ul{
	background:#fff; box-sizing:
	border-box; padding:10px;
	float:left;
	width:100%;
	display:table;
}
#article.howto .productLink li{
	box-sizing: border-box;
	padding:10px;
	list-style:none;
	min-height:100px;
	display:table-cell;
	width:30%;
	text-align:center;
}
#article.howto .productLink li + li + li{
	box-sizing: border-box;
	padding:10px;
	list-style:none;
	min-height:100px;
	display:table-cell;
	width:20%;
}		
#article.howto .productLink li img{
	width:auto;
	float:none;
	margin:0 0 20px;
	padding:0;
}
#article.howto .productLink li span{display:block;}
#article.howto section section{
	border-bottom: 1px solid #aaaaaa;
	clear: both;
	margin: 0;
	padding: 25px 20px 0 20px;
}

#article.howto section section h3{
	border-bottom: 1px solid #aaaaaa;
	margin-top:25px;
	margin-bottom:25px;
	padding-bottom:25px;
	margin-left:-20px;
	margin-right:-20px;
}
#article.howto section section div > h4{
	margin:0 0 20px -13px;
	line-height:100%;
}
#article.howto section section div div h4{
	margin:20px 0 0;
	line-height:100%;
}
#article.howto section section > div > p{
	padding:20px 8px 10px;
	clear:both;
}
#article.howto section section div div p{
	margin:10px 0 0;
}
#article.howto section section div div h4 + p{
	margin:10px 0 0;
}

#article.howto section div{
	line-height:160%;
}

#article.howto section section li{
	text-indent:-1em;
	padding-left:1em;
	list-style:none;
}

#article.howto .box{
	background:#fec;
	padding:20px;
	margin:10px 0 0;
}
#article.howto .box p{
	margin-bottom:0!important;
	padding-bottom:0!important;
}
#article.howto section strong{
	margin:25px 0;
	padding:20px;
	background:#fdd;
	color:#900;
	display:block;
}

#article p + .attention{
	margin:-10px 0px 0;
	text-indent:-1em;
	padding-left:1em;
	font-size:90%;
	line-height:160%;
}
#article section + .attention{
	margin:20px;
	text-indent:-1em;
	padding-left:1em;
	font-size:90%;
	line-height:160%;
}

#article.howto p span{
	background:#966cc1;
	color:#fff;
	padding:0 6px;
	margin-right:5px;
}

/*======================================================================*
 *  [ Media Queries 716 ] 
 *======================================================================*/

@media screen and (max-width: 716px) {
#article section h4 br { display: none; }
}


/*======================================================================*
 *  [ Media Queries 480 ] 
 *======================================================================*/

@media screen and (max-width: 450px) {
		#article.howto .productLink li{width:100%; display:block;}
		#article.howto .productLink li + li + li{width:100%; display:block;}
		#article.howto section section .l6r3 div{float:none; width:100%;}
}


/*======================================================================*
 *  [ Media Queries 320 ] 
 *======================================================================*/

@media screen and (max-width: 320px) {
	#article.howto .productLink li img{display:inline;}
	#article.howto p img{display:inline;}	
}