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


.hidden, 
.sp { display: none; }


/*======================================================================*
 *  [ contentsWidth ] 
 *======================================================================*/

.contentsWidth a {
	-webkit-transition: all ease .3s;
	-webkit-transition-property: background-color, color, border-color;
	transition: all ease .3s;
	transition-property: background-color, color, border-color;
}
.contentsWidth a img {
	-webkit-transition: all ease .3s;
	transition: all ease .3s;
}
.contentsWidth a:hover img, 
.contentsWidth a:active img { opacity: .7; }

.ysgearclub {
	margin: 0 0 20px 0;
	padding: 15px 20px;
	background-color: #ececec;
	text-align: right;
}


/*======================================================================*
 *  [ article ] 
 *======================================================================*/

#article {
	float: left;
	/* width: 73.06122449%; */
	width: 75%;
	padding: 0 19px 0 0;
	box-sizing: border-box;
	font-size: 14px;
	font-size: 1.4rem;
}


/*======================================================================*
 *  [ article mainImg ] 
 *======================================================================*/

#article .mainImg { margin: 0 0 10px 0; }


/*======================================================================*
 *  [ article header ] 
 *======================================================================*/

#article header {
	display: table;
	margin: 0 0 60px 0;
	width: 100%;
}

#article header .vol, 
#article header .ttl {
	display: table-cell;
	height: 56px;
	vertical-align: middle;
}

#article header .vol {
	font-size: 16px;
	font-size: 1.6rem;
	color: #ffffff;
	text-align: center;
	width: 96px;
}
#article header strong {
	font-size: 25px;
	font-size: 2.5rem;
}
#article header time {
	display: inline-block;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 120%;
	margin: 5px 0 0 0;
}

#article header .ttl {
	background: url(../img/bg_title.png) center bottom no-repeat;
	background-size: 100% 8px;
	border-bottom: 1px solid #dcdcdc;
	display: table-cell;
	padding: 20px;
	max-width: 620px;
	vertical-align: middle;
}
#article header h2 {
	font-size: 25px;
	font-size: 2.5rem;
	line-height: 1.1;
	margin: 0 0 15px 0;
}
#article header .ttl p {
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.2;
}
#article header .ttl p a { text-decoration: underline; }
#article header .ttl p a:hover, 
#article header .ttl p a:active { text-decoration: none; }


/*======================================================================*
 *  [ article section ] 
 *======================================================================*/

#article section, 
#article .section { margin: 0 0 50px 0; }
#article section section { margin-top: 50px; }

#article .mbNone { margin-bottom: 0 !important; }

#article section h3 {
	font-size: 20px;
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 20px 0;
}
#article section h3 strong {
	display: inline-block;
	font-size: 36px;
	font-size: 3.6rem;
	font-family: 'Arial';
	line-height: 1;
}

#article section h4 {
	border-left: 7px solid;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0 0 20px 0;
	padding: 5px 5px 5px 10px;
}
#article section h4 span {
	display: inline-block;
	font-size: 13px;
	font-size: 1.3rem;
}

#article section p, 
#article .section p {
	line-height: 2;
	margin: 0 0 25px 0;
}

#article section ol li, 
#article .section ol li {
	list-style-type: decimal;
}

#article .beginning {
	font-size: 17px;
	font-size: 1.7rem;
	font-weight: bold;
	line-height: 1.8;
	margin: 0 0 50px 0;
}

#article .kome {
	color: #5e5e5e;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.4;
	margin: -15px 0 25px 0;
	padding: 0 0 0 1em;
	text-indent: -1em;
}


/*======================================================================*
 *  [ article column ] 
 *======================================================================*/

#article figure { margin: 0 0 30px 0; }
#article .column2 { margin: 0 -8px 30px -8px; }
#article div + .column2
#article figure + .column2, 
#article .column2 + .column2 { margin-top: -15px; }
#article .column2 div, 
#article .column2 figure {
	box-sizing: border-box;
	float: left;
	padding: 0 8px;
	 margin: 0;
	width: 50%;
}
#article .column2 div + div + div, 
#article .column2 figure + figure + figure { margin: 15px 0 0 0; }
#article .column2 .wide { margin-left: -105%; }

#article .column3 { margin: 0 -8px 30px -8px; }
#article div + .column3, 
#article figure + .column3 { margin-top: -15px; }
#article .column3 div, 
#article .column3 figure {
	box-sizing: border-box;
	float: left;
	padding: 0 8px;
	 margin: 0;
	width: 33.33%;
}
#article .column3 div + div + div + div, 
#article .column3 figure + figure + figure + figure { margin: 15px 0 0 0; }
#article .column3 .wide { margin-left: -105%; }

#article .l6r3 div, 
#article .l6r3 figure { width: 65.5%; }
#article .l6r3 div + div, 
#article .l6r3 figure + figure { width: 34.5%; }

#article .l3r6 div, 
#article .l3r6 figure { width: 34.5%; }
#article .l3r6 div + div, 
#article .l3r6 figure + figure { width: 65.5%; }


/*======================================================================*
 *  [ article img ] 
 *======================================================================*/

#article figcaption {
	color: #5e5e5e;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.4;
	margin: 7px 0 0 0;
	padding: 0 0 0 1em;
	text-indent: -1em;
}


/*======================================================================*
 *  [ article outline ] 
 *======================================================================*/

#article .outline {
	border-left: 3px double #969696;
	padding: 0 0 0 15px;
	margin: 0 0 25px 0;
}
#article .outline li {
	list-style-type: none;
	margin: 5px 0;
}


/*======================================================================*
 *  [ article productLink ] 
 *======================================================================*/

#article .productLink a {
	background: #ececec;
	display: block;
	padding: 20px;
	color: #000;
}
#article .productLink a:hover, 
#article .productLink a:active { text-decoration: none !important; }

#article .productLink h3, 
#article .productLink h4, 
#article .productLink h5, 
#article .productLink p {
	box-sizing: border-box;
	float: right;
	width: 71.89%;
}
#article .productLink h3, 
#article .productLink h4, 
#article .productLink h5 {
	border: none;
	border-bottom: 1px solid #b2b2b6 !important;
	font-size: 18px;
	font-size: 1.8rem;
	margin: 0 0 20px 0;
	padding: 0 0 15px 0;
}
#article .productLink h3 span, 
#article .productLink h4 span, 
#article .productLink h5 span {
	font-size: 13px;
	font-size: 1.3rem;
}
#article .productLink p {
	background: url(../img/icon_category.png) left 2px no-repeat;
	background: url(../img/icon_category_ie8.png) left top no-repeat\9;
	background-size: 14px 14px;
	line-height: 1.2;
	padding: 0 0 0 20px;
	margin: 0;
}
#article .productLink .title {
	background: none;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	margin: -5px 0 15px 0;
	padding: 0;
}
#article .productLink .text {
	background: none;
	font-size: 13px;
	font-size: 1.3rem;
	margin: -5px 0 15px 0;
	padding: 0;
}

#article .productLink img {
	box-sizing: border-box;
	float: left;
	padding: 0 20px 0 0;
	width: 28.11%;
}


/*======================================================================*
 *  [ article sCautions ] 
 *======================================================================*/

#article .sCautions {
	border: 1px solid #000000;
	margin: 0 0 50px 0;
	padding: 15px 10px;
}
#article .sCautions dt { font-weight: bold; }
#article .sCautions dd {
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.2;
	margin: 5px 0 0 1em;
	text-indent: -1em;
}


/*======================================================================*
 *  [ article facilities ] 
 *======================================================================*/

#article .facilities {
	border: 1px solid #000000;
	margin: 0 0 50px 0;
	padding: 15px 10px;
}
#article .facilities dt {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
}
#article .facilities dt span {
	font-size: 14px;
	font-size: 1.4rem;
}
#article .facilities dd {
	margin: 5px 0 0 0;
}
#article .facilities dd img {
	box-sizing: border-box;
	margin: 0 10px 0 0;
	vertical-align: bottom;
}
#article .facilities dd a {
	display: inline-block;
	line-height: 1;
	margin: 10px 0 0 0;
}


/*======================================================================*
 *  [ article cooperation ] 
 *======================================================================*/

#article .cooperation {
	font-size: 12px;
	font-size: 1.2rem;
	margin: -25px 0 50px 0;
	text-align: right;
}


/*======================================================================*
 *  [ article footer ] 
 *======================================================================*/

#article footer { margin: 0 0 75px 0; }


/*======================================================================*
 *  [ article footer share ] 
 *======================================================================*/

.share {
	border-top: 1px dotted #b2b2b2;
	border-bottom: 1px dotted #b2b2b2;
	padding: 10px 0;
}
.share ul { text-align: center; }
.share li {
	display: inline-block;
	height: 20px;
	list-style-type: none;
	vertical-align: top;
}
.share li + li { margin-left: 10px; }
.share li.tw iframe { width: 90px !important; }
.share li.gp div { width: 57px !important; }


/*======================================================================*
 *  [ article backNumber ] 
 *======================================================================*/

.backNumber { margin: 0 0 80px 0; }

.backNumber h3 {
	background: #ffffff;
	display: inline-block;
	font-size: 23px;
	font-size: 2.3rem;
	padding: 0 10px 0 0;
}

.backNumber ul {
	border-top: 5px solid #000000;
	margin: -15px 0 0 0;
	padding: 20px 0 0 0;
}
.backNumber li {
	float: left;
	list-style-type: none;
	width: 25%;
}
.backNumber li:nth-child(4n+1) { clear: both; }
html>/**/body .backNumber li.ieClear { clear /*\**/:both\9 }
.backNumber li a {
	display: block;
	margin: 0 5px 15px 5px;
}
.backNumber li img { margin: 0 0 5px 0; }
.backNumber li p {
	background: url(../img/icon_link_s.png) 2px 0.2em no-repeat;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.2;
	padding: 0 0 0 12px;
}


/*======================================================================*
 *  [ articleList ] 
 *======================================================================*/

.articleList a {
	border: 1px solid #e7e7e7;
	color: #000;
	display: block !important;
	padding: 5px 4px;
}
.articleList a:hover, 
.articleList a:active {
	background: #f8f8f8;
	color: #000 !important;
	text-decoration: none;
}
.articleList p {
	line-height: 1.6;
	margin: 0 10px 15px 10px;
}
.articleList p:first-child {
	color: #5f5f5f;
	margin: 0 0 4px 0;
}
.articleList figure {
	margin: 0 auto 20px auto;
	position: relative;
	max-width: 220px;
}
.articleList figure span {
	bottom: .2em;
	color: #ffffff !important;
	font-size: 11px;
	font-size: 1.1rem;
	left: .2em;
	line-height: 100%;
	position: absolute;
	z-index: 1;
}
.articleList figure span:before {
	border-top: 3.9em solid transparent;
	bottom: -.2em;
	content: " ";
	height: 0;
	left: -.2em;
	position: absolute;
	width: 0;
	z-index:-1;
}
.articleList h3, 
.articleList h2 {
	margin: 0 10px 15px 10px;
	font-size: 14px;
	font-size: 1.4rem;
}


/*======================================================================*
 *  [ pickup ] 
 *======================================================================*/

.pickup {
	float: right;
	/* width: 26.93877551%; */
	width: 25%;
	margin: 0 0 75px 0;
	/* padding: 0 0 0 20px; */
	box-sizing: border-box;
}

.pickup h2 {
	background: #e3e3e3;
	color: #656565;
	font-size: 15px;
	font-size: 1.5rem;
	font-family: Arial;
	margin: 0;
	padding: 5px;
	text-align: center;
}


/*======================================================================*
 *  [ category ] 
 *======================================================================*/

.category {
	clear: both;
	margin: 0 10px 55px 10px;
}

.category section {
	float: left;
	margin: 0 0 10px 0;
	width: 20%;
}
.category a {
	border-right: 1px dotted #000000;
	color: #000;
	display: block;
	padding: 20px 15px;
}
.category .report a { border-left: 1px dotted #000000; }
.category a:hover, 
.category a:active {
	background: #f8f8f8;
	text-decoration: none;
}
.category h3 {
	font-size: 15px;
	font-size: 1.5rem;
	margin: 0 0 10px 0;
	text-align: center;
}
.category p {
	margin: 0 0 20px 0;
}
.category span {
	background: url(../img/icon_category.png) right center no-repeat;
	background: url(../img/icon_category_ie8.png) right center no-repeat\9;
	background-size: 14px 14px;
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 100%;
	padding-right: 20px;
	text-align: right;
}
.category a:hover span, 
.category a:active span {
	color: #000000;
	text-decoration: underline;
}


/*======================================================================*
 *  [ categoryColor ] 
 *======================================================================*/

/*  [ event ]  */
#article.event a:hover,
#article.event a:active { color: #4ec0c4 !important; }
#article.event header .vol { background: #4ec0c4; }
#article.event h4 { border-color: #4ec0c4; }
.articleList .event a:hover, 
.articleList .event a:active { border-color: #4ec0c4 !important; }
.articleList .event span { color: #4ec0c4; }
.articleList .event span:before { border-left: 3.9em solid #4ec0c4; }
.category .event a:hover, 
.category .event a:active { color: #4ec0c4 !important; }

/*  [ howto ]  */
#article.howto a:hover,
#article.howto a:active { color: #966cc1 !important; }
#article.howto header .vol { background: #966cc1; }
#article.howto h4 { border-color: #966cc1; }
.articleList .howto a:hover, 
.articleList .howto a:active { border-color: #966cc1 !important; }
.articleList .howto span { color: #966cc1; }
.articleList .howto span:before { border-left: 3.9em solid #966cc1; }
.category .howto a:hover, 
.category .howto a:active { color: #966cc1 !important; }

/*  [ kazama ]  */
#article.kazama a:hover,
#article.kazama a:active { color: #76ac29 !important; }
#article.kazama header .vol { background: #76ac29; }
#article.kazama h4 { border-color: #76ac29; }
.articleList .kazama a:hover, 
.articleList .kazama a:active { border-color: #76ac29 !important; }
.articleList .kazama span { color: #76ac29; }
.articleList .kazama span:before { border-left: 3.9em solid #76ac29; }
.category .kazama a:hover, 
.category .kazama a:active { color: #76ac29 !important; }

/*  [ race ]  */
#article.race a:hover,
#article.race a:active { color: #293cac !important; }
#article.race header .vol { background: #293cac; }
#article.race h4 { border-color: #293cac; }
.articleList .race a:hover, 
.articleList .race a:active { border-color: #293cac !important; }
.articleList .race span { color: #293cac; }
.articleList .race span:before { border-left: 3.9em solid #293cac; }
.category .race a:hover, 
.category .race a:active { color: #293cac !important; }

/*  [ report ]  */
#article.report a:hover,
#article.report a:active { color: #ff7575 !important; }
#article.report header .vol { background: #ff7575; }
#article.report h4 { border-color: #ff7575; }
.articleList .report a:hover, 
.articleList .report a:active { border-color: #ff7575 !important; }
.articleList .report span { color: #ff7575; }
.articleList .report span:before { border-left: 3.9em solid #ff7575; }
.category .report a:hover, 
.category .report a:active { color: #ff7575 !important; }

/*  [ shop ]  */
#article.shop a:hover,
#article.shop a:active { color: #4ec0c4 !important; }
#article.shop header .vol { background: #4ec0c4; }
#article.shop h4 { border-color: #4ec0c4; }
.articleList .shop a:hover, 
.articleList .shop a:active { border-color: #4ec0c4 !important; }
.articleList .shop span { color: #4ec0c4; }
.articleList .shop span:before { border-left: 3.9em solid #4ec0c4; }
.category .shop a:hover, 
.category .shop a:active { color: #4ec0c4 !important; }

/*  [ special ]  */
#article.special a:hover,
#article.special a:active { color: #ffae00 !important; }
#article.special header .vol { background: #ffae00; }
#article.special h4 { border-color: #ffae00; }
.articleList .special a:hover, 
.articleList .special a:active { border-color: #ffae00 !important; }
.articleList .special span { color: #ffae00; }
.articleList .special span:before { border-left: 3.9em solid #ffae00; }
.category .special a:hover, 
.category .special a:active { color: #ffae00 !important; }


/*======================================================================*
 *  [ cf ] 
 *======================================================================*/

.cf:after {
	content: "";
	clear: both;
	display: block;
}


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

@media screen and (max-width: 980px) {
	
	.contentsTop .contentsWidth { padding: 0; }
	
	#article {
		padding: 0 9px 0 10px;
	}
	
}


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

@media screen and (max-width: 716px) {
	
	#article {
		float: none;
		width: 100%;
		padding: 0 20px;
	}
	
	.backNumber { margin: 0 0 15px 0; }
	
	.category { border: none; }
	.category section { width: 33.33%; }
	.category section:nth-child(3n-1) a { border-left: 1px dotted #000000; }
	
	.pickup {
		float: none;
		width: 100%;
		padding: 0 20px;
	}
	.pickup h2 {
		cursor: pointer;
		font-size: 18px;
		font-size: 1.8rem;
		line-height: 1.8;
		position: relative;
	}
	.pickup h2:hover { background: #d7d7d7; }
	.pickup h2 span {
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 15px solid #999999;
		height: 0;
		margin-top: 10px !important;
		position: absolute;
		right: 12px;
		width: 0;
	}
	.pickup h2.active span {
		border: none;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 15px solid #999999;
	}
	.pickup article {
		float: left;
		width: 33.33%;
	}
	
}


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

@media screen and (max-width: 568px) {
	
	.ysgearclub {
		margin: 0;
		padding: 15px 10px;
	}
	
	#article  { padding: 0 10px; }
	#article .mainImg { margin: 0 -10px 15px -10px; }
	
	.backNumber li { width: 33.33%; }
	.backNumber li:nth-child(4n+1) { clear: none; }
	.backNumber li:nth-child(3n+1) { clear: both; }
	
	.category {
		border-bottom: 1px dotted #000000;
		margin-right: 0;
		margin-left: 0;
	}
	.category section {
		float: none;
		margin: 0;
		width: 100%;
	}
	.category a {
		border: none !important;
		border-top: 1px dotted #000000 !important;
		padding: 10px;
	}
	.category h3 { text-align: left; }
	
	.pickup { padding: 0 10px; }
	.pickup article { width: 50%; }
	
}


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

@media screen and (max-width: 480px) {
	
	.ysgearclub { padding: 10px; }
	.ysgearclub img {
		width: auto;
		height: 20px;
	}
	
	.backNumber li { width: 50%; }
	.backNumber li:nth-child(3n+1) { clear: none; }
	.backNumber li:nth-child(2n+1) { clear: both; }
	
}


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

@media screen and (max-width: 320px) {
	
	#article .column2 div, 
	#article .column3 div, 
	#article .column2 figure, 
	#article .column3 figure {
		float: none !important;
		margin: 15px 0 0 0;
		width: 100% !important;
	}
	#article .column2 div img, 
	#article .column3 div img, 
	#article .column2 figure img, 
	#article .column3 figure img {
		display: block;
		margin: 0 auto;
	}
	#article .column2 .wide { margin-left: 0; }
	
	#article figure > img {
		width: 100% !important;
		height: auto !important;
	}
	
	#article .productLink h3, 
	#article .productLink h4, 
	#article .productLink h5, 
	#article .productLink p, 
	#article .productLink img {
		float: none;
		width: auto;
	}
	#article .productLink img {
		display: block;
		padding: 0;
		margin: 0 auto 15px auto;
	}
	
	.backNumber li { width: 100%; }
	.backNumber li img {
		display: block;
		margin: 0 auto 5px auto;
	}
	
	.pickup article { width: 100%; }

}