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


/*======================================================================*
 *  [ selectType ] 
 *======================================================================*/

#article .selectType {
	margin: 0 0 40px 0;
}

#article .selectType p {
	margin: 0 0 15px 0;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
}

#article .selectType ul {
	margin: 0 -5px;
}
#article .selectType li {
	float: left;
	width: 50%;
	padding: 0 5px;
	box-sizing: border-box;
}
#article .selectType li a:hover img, 
#article .selectType li a:active img { opacity: 1; }


/*======================================================================*
 *  [ factionBox ] 
 *======================================================================*/

#article .factionBox h3 {
	padding: 0 0 10px 0;
	border-bottom: 1px solid #aaa;
	color: #333;
	font-size: 20px;
	font-size: 2rem;
	text-align: center;
}
#article .factionBox h3 span {
	display: inline-block;
}
#not.factionBox h3 span { color: #3c81c3; }
#ride.factionBox h3 span { color: #ea5417; }

#article .factionBox section {
	margin: 30px 0;
}
#article .factionBox > section + section {
	padding: 30px 0 0 0;
	border-top: 1px solid #aaa;
}
#both.factionBox > section {
	background: url(../img/img_battery.jpg) right top no-repeat;
}

#article .factionBox h4 {
	margin: 0 0 10px 0;
	padding: 0;
	border: none;
	font-size: 20px;
	font-size: 2rem;
}
#both.factionBox h4 {
	font-size: 30px;
	font-size: 3rem;
}
#article .factionBox h4 + p {
	line-height: 1.6;
}
#both.factionBox h4 + p {
	padding-right: 50%;
}

#article .btnBoth {
	text-align: right;
}
#article .btnBoth a {
	display: inline-block;
	position: relative;
	padding: 10px 25px 10px 10px;
	border: 1px solid #aaa;
	color: #000;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
}
#article .btnBoth a:after {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 10px;
	height: 12px;
	margin: -6px 0 0 0;
	background: url(../img/arrow_gray.png) right center no-repeat;
	background-size: 10px auto;
	content: "";
}
#article .btnBoth a:hover {
	background: #eee;
	color: #000 !important;
	border-color: #aaa !important;
}
#article .btnBoth span { color: #3c81c3; }
#article .btnBoth span + span { color: #ea5417; }


/*======================================================================*
 *  [ img3column ] 
 *======================================================================*/

#article .img3column {
	margin: 0 -8px;
}
#article .img3column li {
	list-style-type: none !important;
	float: left;
	width: 33.33333333%;
	padding: 0 8px;
	box-sizing: border-box;
}
#article .img3column li.col2 {
	width: 66.66666666%;
}
#article .img3column li:nth-child(3n+1) { clear: both; }
#article .img3column li figure {
	margin: 0 0 10px 0 !important;
}
#article .img3column li img {
	display: block;
	width: 100%;
}
#article .img3column li p {
	line-height: 1.8 !important;
}


/*======================================================================*
 *  [ yamalubeList ] 
 *======================================================================*/

#article .yamalubeList {
	margin: 0 0 15px 20px;
}
#article .yamalubeList li {
	list-style-type: disc;
	margin: 10px 0 0 0;
	line-height: 1.2;
}
#article .yamalubeList li a {
	color: #000;
}


/*======================================================================*
 *  [ standardBox ] 
 *======================================================================*/

#article .standardBox h5 {
	margin: 0 0 20px 0;
	padding: 5px 5px 5px 10px;
	border-left: 7px solid #3c81c3;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.2;
}

#article .bnrLink {
	display: block;
	padding: 5px;
	border: 1px solid #3c81c3;
}
#article .bnrLink:hover {
	border-color: #3c81c3 !important;
}


/*======================================================================*
 *  [ plusBox ] 
 *======================================================================*/

#article .plusBox {
	margin-top: -30px !important;
	padding: 15px;
	background: #ebf2f9;
	color: #3c81c3;
}
#article .plusBox h5 {
	margin: 0 0 15px 0;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.2;
}
#article .plusBox figure, 
#article .plusBox p {
	float: left;
	width: 50%;
	margin: 0;
}
#article .plusBox p {
	padding: 0 0 0 15px;
	box-sizing: border-box;
	line-height: 1.8;
}


/*======================================================================*
 *  [ ledBox ] 
 *======================================================================*/

#article .ledBox {
	margin: 0 0 25px 0;
	padding: 5px;
	border: 2px solid #ea5417;
}
#article .ledBox dt {
	padding: 8px 8px 0 8px;
	color: #ea5417;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}
#article .ledBox dt + dd {
	float: none;
	width: 100%;
	font-size: 12px;
	font-size: 1.2rem;
}
#article .ledBox dt + dd + dd {
	width: 43.58974358%;
}
#article .ledBox dd {
	float: left;
	width: 28.20512821%;
	padding: 8px;
	box-sizing: border-box;
}


/*======================================================================*
 *  [ itemBox ] 
 *======================================================================*/

#article .itemBox h5 {
	padding: 10px 15px;
	background: #ea5417;
	color: #fff;
	line-height: 1.2;
}
#article .itemBox h5 + p {
	width: 100%;
	height: 215px;
	margin: 0;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-size: auto 100%;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
	vertical-align: middle;
}
#article .itemBox.heater h5 + p {
	padding: 50px 55% 0 0;
	background-image: url(../img/img_heater.jpg);
	background-position: right center;
}
#article .itemBox.visor  h5 + p {
	padding: 50px 0 0 55%;
	background-image: url(../img/img_visor.jpg);
	background-position: left center;
}


/*======================================================================*
 *  [ itemList ] 
 *======================================================================*/

#article .itemList {
	margin: -5px;
}
#article .itemList li {
	padding: 5px;
	box-sizing: border-box;
}
#article .itemList li.col1 {
	float: left;
	width: 50%;
}
#article .itemList li.col1:nth-child(2n+1) {
	clear: both;
}
#article .itemList li.col2 {
	width: 100%;
	clear: both;
}
#article .itemList li a {
	display: block;
	padding: 15px;
	border-color: transparent;
	box-sizing: border-box;
}

#article .itemList li figure {
	margin: 0;
}

#article .itemList li strong {
	display: block;
	margin: 0 0 10px 0;
	color: #000;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.2;
}
#article .itemList li p {
	margin: 0;
	color: #000;
	line-height: 1.6;
}

/* [ 一部共通 ] */
#article .itemList.blue li a:after, 
#article .itemList.orange li a:after, 
#article .itemList.oline li a:after, 
#article .itemList.gborder li a:after {
	display: block;
	margin: 15px 0 0 0;
	padding: 0 0 0 20px;
	line-height: 14px;
	content: "詳細はこちら";
}
#article .itemList.blue li a:after {
	background: url(../img/icon_blue.png) 2px center no-repeat;
	color: #3c81c3;
}
#article .itemList.orange li a:after, 
#article .itemList.oline li a:after {
	background: url(../img/icon_orange.png) 2px center no-repeat;
	color: #ea5417;
}
#article .itemList.gborder li a:after {
	background: url(../img/icon_gray.png) 2px center no-repeat;
	color: #000;
}

/* [ 青 ] */
#article .itemList.blue li a {
	min-height: 140px;
	background-color: #f3f7fb;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	color: #3c81c3;
}
#article .itemList.blue li a:hover {
	border: 2px solid #3c81c3 !important;
	padding: 13px;
}
#article .itemList.blue li span {
	display: block;
	margin: 0 0 5px 0;
	color: #3C81C3;
}
#article .itemList li.coverF a { background-image: url(../img/img_coverF.png); }
#article .itemList li.coverG a { background-image: url(../img/img_coverG.png); }
#article .itemList li.coverE a { background-image: url(../img/img_coverE.png); }
#article .itemList li.coverI a { background-image: url(../img/img_coverI.png); }

/* [ 橙 ] */
#article .itemList.orange li a {
	background-color: #fdeee7;
}
#article .itemList.orange li.border a {
	padding: 13px;
	border: 2px solid #fdeee7;
	background-color: #fff;
}
#article .itemList.orange li a:hover {
	padding: 13px;
	border: 2px solid #ea5417 !important;
}
#article .itemList.orange li div {
	margin: -5px;
}
#article .itemList.orange li figure {
	float: left;
	width: 57.3%;
	padding: 5px;
	box-sizing: border-box;
}
#article .itemList.orange li figure + figure {
	width: 42.7%;
}
#article .itemList.orange li figcaption {
	padding: 0;
	text-indent: 0;
} 
#article .itemList.orange li figure img {
	width: 100%;
}

/* [ 灰 ] */
#article .itemList.gray li a {
	position: relative;
	padding-right: 45px;
	background-color: #eee;
}
#article .itemList.gray li.col2 a {
	padding-left: 150px;
}
#article .itemList.gray li a:hover {
	border: 2px solid #999 !important;
	padding: 13px 43px 13px 13px;
}
#article .itemList.gray li.col2 a:hover {
	padding-left: 148px;
}
#article .itemList.gray li a:before {
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 12px;
	height: 24px;
	margin: -12px 0 0 0;
	background: url(../img/arrow_gray.png) right center no-repeat;
	background-size: 12px 24px;
	content: "";
}
#article .itemList.gray li figure {
	float: left;
	width: 120px;
	margin: 0 0 0 -135px;
}
#article .itemList.gray li .kome {
	display: inline-block;
	margin: 0;
	padding-left: 1em;
	line-height: 1.2;
	text-indent: -1em;
}

/* [ 橙枠 ] */
#article .itemList.oline {
	margin: 0;
	padding: 8px;
	border: 2px solid #ea5417;
}
#article .itemList.oline li {
	padding: 5px 5px 25px 5px;
}
#article .itemList.oline li a {
	padding: 0;
}
#article .itemList.oline li span {
	display: inline-block;
	position: relative;
	padding: 5px 10px;
	background: #ea5417;
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.2;
	font-weight: bold;
	z-index: 5;
}
#article .itemList.oline li figure {
	margin: -15px 0 15px 0;
	text-align: center;
}

/* [ 灰枠 ] */
#article .itemList.gborder li a {
	padding: 13px;
	background: #fff;
	border: 2px solid #eee;
	color: #000;
}
#article .itemList.gborder li a:hover {
	border-color: #aaa !important;
	color: #000 !important;
}
#article .itemList.gborder li span {
	display: block;
	margin: 0 0 5px 0;
}


/*======================================================================*
 *  [ optionBox ] 
 *======================================================================*/

#article .optionBox {
	display: block;
	padding: 20px;
	background: #ececec;
	color: #000;
}

#article .optionBox h5, 
#article .optionBox dl {
	float: right;
	width: 66%;
	box-sizing: border-box;
}
#article .optionBox img {
	float: left;
	width: 34%;
	padding: 20px 20px 0 0;
	box-sizing: border-box;
}

#article .optionBox h5 {
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;
	border-bottom: 1px solid #b2b2b6 !important;
	font-size: 18px;
	font-size: 1.8rem;
}
#article .optionBox h5 span {
	font-size: 13px;
	font-size: 1.3rem;
}

#article .optionBox p {
	display: inline-block;
	margin: 0 0 0 1.2em;
	padding: 0 0 0 20px;
	background: url(../../../shared/img/icon_category.png) left 2px no-repeat;
	background: url(../../../shared/img/icon_category_ie8.png) left top no-repeat\9;
	background-size: 14px 14px;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.4;
	text-indent: 0;
}

#article .optionBox dl {
	margin: 0 0 15px 0;
}
#article .optionBox dt {
	font-weight: bold;
}
#article .optionBox dd + dt {
	margin: 15px 0 0 0;
}
#article .optionBox dd {
	margin: 5px 0 0 0;
	text-indent: 1em;
}
#article .optionBox dd a { color: #000; }
#article .optionBox dd a:hover { color: #000 !important; }
#article .optionBox dd a:hover p { color: #999; }

#article .optionBox ul {
	clear: both;
	font-size: 12px;
	font-size: 1.2rem;
}
#article .optionBox li {
	margin: 5px 0 0 0;
	padding: 0 0 0 1em;
	text-indent: -1em;
}
#article .optionBox li:before {
	content: "○";
}


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

@media screen and (max-width: 568px) {
	
	/*==================================================================*
	 *  [ factionBox ] 
	 *==================================================================*/
	
	#both.factionBox > section {
		background: none;
	}
	
	#both.factionBox h4 + p {
		padding-right: 0;
	}
	
	
	/*==================================================================*
	 *  [ img3column ] 
	 *==================================================================*/
	
	#article .img3column li {
		width: 50%;
	}
	#article .img3column li.col2 {
		width: 100%;
	}
	#article .img3column li:nth-child(3n+1) { clear: none; }
	#article .img3column li:nth-child(2n+1) { clear: both; }
	
	
	/*==================================================================*
	 *  [ plusBox ] 
	 *==================================================================*/
	
	#article .plusBox figure, 
	#article .plusBox p {
		float: none;
		width: 100%;
	}
	#article .plusBox p {
		margin: 15px 0 0 0;
		padding: 0;
	}
	
	
	/*==================================================================*
	 *  [ itemBox ] 
	 *==================================================================*/
	
	#article .itemBox h5 + p {
		height: auto;
		padding: 15px 0 !important;
		background: none !important;
	}
	
	
	/*==================================================================*
	 *  [ itemList ] 
	 *==================================================================*/
	
	#article .itemList li.col1 {
		float: none;
		width: 100%;
	}

	/* [ 青 ] */
	#article .itemList.blue li a {
		min-height: auto;
	}
	
	/* [ 灰色 ] */
	#article .itemList.gray {
		margin-top: 5px;
	}
	
	
	/*==================================================================*
	 *  [ optionBox ] 
	 *==================================================================*/
	
	#article .optionBox h5, 
	#article .optionBox dl {
			float: none;
			width: 100%;
	}
	#article .optionBox img {
			display: block;
			float: none;
			width: auto;
			margin: 0 auto;
			padding: 0;
	}
	
}


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

@media screen and (max-width: 375px) {
	
	/*==================================================================*
	 *  [ ledBox ] 
	 *==================================================================*/
	
	#article .ledBox dt + dd + dd {
		width: 100%;
		text-align: center;
	}
	#article .ledBox dd {
		width: 50%;
	}
	
	
	/*==================================================================*
	 *  [ itemList ] 
	 *==================================================================*/
	
	/* [ 灰 ] */
	#article .itemList.gray li.col2 a {
		padding-left: 100px;
	}
	#article .itemList.gray li.col2 a:hover {
		padding-left: 98px;
	}
	#article .itemList.gray li figure {
		width: 70px;
		margin: 0 0 0 -85px;
	}


}