/* Y'S GEAR : /mc/custom/bolton/css/shoplist.css */


.contentsWidth {
	/* font-size: 1.6rem; */
	font-size: 1.4rem;
	font-weight: 500;
}
.contentsWidth *,
.contentsWidth *::before,
.contentsWidth *::after { box-sizing: border-box; }
.contentsWidth a,
.contentsWidth a::before,
.contentsWidth a::after,
.contentsWidth a img { transition: all 0.3s ease; }

@media print, screen and (min-width: 569px) {
	.contentsWidth .sp { display: none; }
} /* */

@media screen and (max-width: 568px) {
	.contentsWidth .pc { display: none; }
	
	.contentsWidth .commonLinkBox {
		margin-top: 0;
	}
} /* */


/*======================================================================*
 *  [ boltonLineup ] 
 *======================================================================*/

/* [ 見出し ] */
.boltonLineup h2 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}

@media print, screen and (min-width: 569px) {
	.boltonLineup {
		margin-bottom: 50px;
	}

	/* [ 見出し ] */
	.boltonLineup h2 {
		margin-bottom: 10px;
		border-bottom: 1px solid #a5a5a5;
		color: #606060;
		font-size: 2.8rem;
		line-height: .8;
	}
} /* */

@media screen and (max-width: 568px) {
	.boltonLineup {
		margin-bottom: 30px;
	}

	/* [ 見出し ] */
	.boltonLineup h2 {
		margin: 0 -10px 5px;
		padding: 10px;
		background: #919191;
		color: #fff;
		font-size: 1.8rem;
		line-height: 1.05;
		text-align: center;
	}
} /* */

/* [ リンク ] */
.boltonLineup .link {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	line-height: 1.1;
	text-align: center;
}
.boltonLineup .link > * {
	display: flex;
}
.boltonLineup .link a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 1px solid #ddd;
	color: #000;
	font-weight: bold;
	line-height: 1.1;
}
.boltonLineup .link a::before {
	width: 100px;
	background: #919191;
	mask: url(../img/test.svg) center center / contain no-repeat;
	aspect-ratio: 10/6.3;
	content: "";
}
.boltonLineup .link a[href="#onroad"]::before     { mask: url(../img/icon_onroad.svg) center center / contain no-repeat; }
.boltonLineup .link a[href="#offroad"]::before    { mask: url(../img/icon_offroad.svg) center center / contain no-repeat; }
.boltonLineup .link a[href="#cruiser"]::before    { mask: url(../img/icon_cruiser.svg) center center / contain no-repeat; }
.boltonLineup .link a[href="#bigscooter"]::before { mask: url(../img/icon_bigscooter.svg) center center / contain no-repeat; }
.boltonLineup .link a[href="#scooter"]::before    { mask: url(../img/icon_scooter.svg) center center / contain no-repeat; }

/* [ リンク ] ホバー */
.boltonLineup .link a:hover,
.boltonLineup .link a:active {
	background: #CC1533;
	color: #fff !important;
}
.boltonLineup .link a:hover::before,
.boltonLineup .link a:active::before {
	background: #fff;
}

/* [ リンク ] 無効 */
.boltonLineup .link .disabled {
	pointer-events: none;
	background: #bbb;
	opacity: 0.4;
}

@media print, screen and (min-width: 569px) {
	.boltonLineup .link {
		margin-bottom: 30px;
	}
	.boltonLineup .link > * {
		width: calc(20% - 4px);
	}
	.boltonLineup .link a {
		flex-direction: column;
		height: 120px;
		padding: 5px;
	}
	.boltonLineup .link a::before {
		width: min(100px, 100%);
	}
	.boltonLineup .link a b {
		width: 100%;
		text-align: center;
		display: block;
	}

} /* */

@media screen and (min-width: 569px) and (max-width: 768px) {
	.boltonLineup .link > * {
		width: calc(33.33% - 3.33px);
	}
	.boltonLineup .link a {
		height: 80px;
	}
	.boltonLineup .link a::before {
		width: min(64px, 100%);
	}

} /* */

@media screen and (max-width: 568px) {
	.boltonLineup .link {
		margin: 0 -5px 20px;
	}
	.boltonLineup .link > * {
		width: calc(50% - 2.5px);
	}
	.boltonLineup .link a {
		padding: 10px;
	}
	.boltonLineup .link a::before {
		width: min(64px, 33.33%);
	}
	.boltonLineup .link a b {
		flex: 1;
	}

} /* */


/* [ 注釈 ] */
.boltonLineup .notes {
	font-size: calc(1em - 0.2rem);
}
.boltonLineup .notes li {
	padding-left: 1em;
	text-indent: -1em;
}
.boltonLineup .notes li:not(:last-child) {
	margin-bottom: 5px;
}


/*======================================================================*
 *  [ boltonList ] 
 *======================================================================*/

@media print, screen and (min-width: 569px) {
	/* [ ヘッダー ] */
	.boltonList .head {
		display: flex;
		align-items: center;
		height: 40px;
		margin-bottom: 10px;
		padding-right: 18px;
		background: #707070;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}
	.boltonList .head p {
		padding: 10px;
	}
	.boltonList .head .model {
		width: 192px;
		margin-right: 10px;
	}
	.boltonList .head .prod {
		flex: 1;
	}
	.boltonList .head .num {
		width: 11em;
	}
	.boltonList .head .year {
		width: 10em;
	}
} /* */

@media screen and (max-width: 768px) {
	/* [ ヘッダー ] */
	.boltonList .head {
		display: none;
	}
} /* */


/* [ モデル ] */
.boltonList section {
	margin-bottom: 50px;
}

@media print, screen and (min-width: 769px) {
	/* [ モデル ] */
	.boltonList section {
		display: flex;
		gap: 10px;
	}
} /* */

/* [ モデル ] モデル名 */
.boltonList h4 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	background: #F5F5F5;
	text-align: center;
}
.boltonList h4 b {
	color: #333;
	font-size: 1.2rem;
}

@media print, screen and (min-width: 769px) {
	/* [ モデル ] モデル名 */
	.boltonList h4 {
		gap: 10px;
		width: 192px;
		min-height: 156px;
		padding: 10px 5px;
	}
} /* */

@media screen and (max-width: 768px) {
	/* [ モデル ] モデル名 */
	.boltonList h4 {
		gap: 5px;
		min-height: 80px;
		padding: 10px;
	}
} /* */

@media screen and (max-width: 568px) {
	/* [ モデル ] モデル名 */
	.boltonList h4 {
		width: calc(100% + 20px);
		min-height: 64px;
		margin: 0 -10px;
	}
} /* */

/* [ モデル ] リスト */
.boltonList li {
	border-bottom: 1px solid #b2b2b2;
}
.boltonList li a {
	display: flex;
	position: relative;
	padding-right: 16px;
}
.boltonList li a::after {
	position: absolute;
	top: calc(50% - 6px);
	right: 8px;
	width: 8px;
	height: 12px;
	background: url(../img/icon_arrow.svg) center center no-repeat;
	content: "";
}
.boltonList li .prod {
	font-weight: bold;
	color: #000;
}
.boltonList li .num {
	width: 11em;
}
.boltonList li a:hover, 
.boltonList li a:active {
	background: #FDF3F4;
}
.boltonList li a:hover .prod, 
.boltonList li a:active .prod {
	color: #CC1533;
}

@media print, screen and (min-width: 569px) {
	/* [ モデル ] リスト */
	.boltonList ul {
		flex: 1;
	}
	.boltonList li p {
		padding: 10px;
	}
	.boltonList li .prod {
		flex: 1;
	}
	.boltonList li .year {
		width: 10em;
	}
} /* */

@media screen and (max-width: 568px) {
	/* [ モデル ] リスト */
	.boltonList ul {
		margin: 0 -10px;
	}
	.boltonList li a {
		flex-wrap: wrap;
		padding: 10px 0;
	}
	.boltonList li p {
		padding: 0 10px;
	}
	.boltonList li .prod {
		width: 100%;
		padding-bottom: 0;
	}
} /* */