@charset "UTF-8";

/* RAYS: シリーズ一覧サムネイル（ロゴ付き商品画像の切れ防止） */
#generic.tire_makerpage .mk-series-card {
	grid-template-columns: minmax(220px, 30%) 1fr;
}

#generic.tire_makerpage .mk-series-img {
	min-height: 0;
	padding: 0.625em;
	overflow: visible;
}

#generic.tire_makerpage .mk-series-img-link {
	height: auto;
	align-self: center;
}

#generic.tire_makerpage .mk-series-img-link img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 200px;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 37.5em) {
	#generic.tire_makerpage .mk-series-img-link img {
		max-height: 220px;
	}
}

/* カラー展開：最低4列（5色のみ5列） */
#generic.tire_makerpage .colorlist {
	grid-template-columns: repeat(4, 1fr);
}

#generic.tire_makerpage .colorlist[data-color-count="5"],
#generic.tire_makerpage .colorlist:has(> li:nth-child(5):last-child) {
	grid-template-columns: repeat(5, 1fr);
}

@media screen and (max-width: 900px) {
	#generic.tire_makerpage .colorlist,
	#generic.tire_makerpage .colorlist[data-color-count="5"],
	#generic.tire_makerpage .colorlist:has(> li:nth-child(5):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 使い方ガイドボタン（tire/index.html 準拠） */
#generic.tire_makerpage section:has(.guide) {
	margin: 0 0 3em;
	width: 100%;
}

#generic.tire_makerpage .guide {
	margin: 0;
	width: 100%;
}

#generic.tire_makerpage .btn_guide a,
#generic.tire_makerpage .guide .btn-guide,
#generic.tire_makerpage .btn-guide {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: #638c0b;
	color: #fff;
	text-align: center;
	padding: 15px;
	border-radius: 8px;
	text-decoration: none;
	margin: 30px 0;
	font-weight: bold;
	transition: background-color 0.3s;
}

#generic.tire_makerpage .btn_guide a:hover,
#generic.tire_makerpage .guide .btn-guide:hover,
#generic.tire_makerpage .btn-guide:hover {
	background-color: #d9534f;
	color: #fff;
	opacity: 1;
}

/* サイズ展開：カラー絞り込みタブ */
#generic.tire_makerpage .mk-filter-tabs {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}

#generic.tire_makerpage .mk-filter-tab {
	padding: 0.552em 1.517em;
	border: 1px solid #1a1a1a;
	border-radius: 0.138em;
	font-size: 0.90625em;
	font-weight: 500;
	cursor: pointer;
	background: #fff;
	color: #1a1a1a;
	font-family: inherit;
	transition: background 0.15s, color 0.15s;
}

#generic.tire_makerpage .mk-filter-tab:hover,
#generic.tire_makerpage .mk-filter-tab.is-active {
	background: #1a1a1a;
	color: #fff;
}

#generic.tire_makerpage .wh-size-filter-tabs {
	justify-content: flex-start;
}

#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="bd"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="bd"].is-active,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="bvk"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="bvk"].is-active,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="b7j"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="b7j"].is-active,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="sb"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="sb"].is-active {
	background: #2d2d2d;
	border-color: #1a1a1a;
	color: #fff;
}

#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="br"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="br"].is-active {
	background: #8b6914;
	border-color: #6b5010;
	color: #fff;
}

#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="znk"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="znk"].is-active,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="qnk"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="qnk"].is-active {
	background: #6b7a8a;
	border-color: #556575;
	color: #fff;
}

#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="mk"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="mk"].is-active,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="hk"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="hk"].is-active {
	background: #2d2d2d;
	border-color: #1a1a1a;
	color: #fff;
}

#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="bak"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="bak"].is-active,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="hik"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="hik"].is-active {
	background: #4a4f57;
	border-color: #333;
	color: #fff;
}

#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="y8j"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="y8j"].is-active {
	background: #8b6914;
	border-color: #6b5010;
	color: #fff;
}

#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="axz"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="axz"].is-active,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="6xz"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="6xz"].is-active {
	background: #4a4f57;
	border-color: #333;
	color: #fff;
}

#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="mf"]:hover,
#generic.tire_makerpage .wh-size-filter-tabs .mk-filter-tab[data-filter="mf"].is-active {
	background: #5a5a62;
	border-color: #404048;
	color: #fff;
}

/* 戻るリンク */
#generic.tire_makerpage .mk-back-links {
	margin-top: 2em;
	display: flex;
	gap: 0.625em;
	flex-wrap: wrap;
}

#generic.tire_makerpage .mk-back-links a {
	padding: 0.667em 1.333em;
	border: 1px solid #1a1a1a;
	color: #1a1a1a;
	font-size: 0.84375em;
	border-radius: 0.148em;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

#generic.tire_makerpage .mk-back-links a:hover {
	background: #1a1a1a;
	color: #fff;
}