@charset "UTF-8";

/*
/* common設定
/* -------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 { margin-top: initial; margin-bottom: initial; font-size: initial; font-weight: initial; }

/*
/* brand_matrix
/* -------------------------------------------------- */

.brand_matrix { display: flex; justify-content: space-between; }
.brand_matrix_series { position: relative; display: flex; justify-content: center; align-items: center; }
.brand_matrix_series:not(:first-child) { margin-left: 10px; }
.brand_matrix_series.active { position: relative; flex-grow: 1; }
.brand_matrix_series.active::after { content: ""; position: absolute; display: block; bottom: -5px; left: calc(50% - (300px / 2)); width: 300px; height: 5px; background: url('/img/brand_page/matrix/2301/brand_matrix_series_active_effect_2301.png'); mix-blend-mode: overlay; }
.brand_matrix_series_img { display: flex; justify-content: center; }
.brand_matrix_series_img img { filter: drop-shadow(0 0 3px rgba(0,0,0,.2)); }
.brand_matrix_series_text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.brand_matrix_series_text_category { display: inline-block; padding: .2em 1em 0 1em; border-radius: 100vh; background: #202020; font-size: 10.5px; }
.brand_matrix_series_text_product { margin-top: 0.2em; text-shadow: 0 0 5px rgba(0,0,0,.2); }
.brand_matrix_series.active .brand_matrix_series_text_product { margin-top: 0; font-weight: bold; }
.brand_matrix_line { width: 100%; height: 6px; }

.brand_matrix_mouse .brand_matrix_series { background: #ffffff; }
.brand_matrix_mouse .brand_matrix_series.active { background: #d5c900; }
.brand_matrix_mouse .brand_matrix_series_text_category { color: #a8a8a8; }
.brand_matrix_mouse .brand_matrix_series_text_product { color: #000000; }
.brand_matrix_mouse + .brand_matrix_line { border-bottom: 1px solid #fff000; background: #d5c900; }

.brand_matrix_gtune .brand_matrix_series { background: #5a5a5a; }
.brand_matrix_gtune .brand_matrix_series.active { background: #840000; }
.brand_matrix_gtune .brand_matrix_series_text_category { color: #a8a8a8; }
.brand_matrix_gtune .brand_matrix_series_text_product { color: #a8a8a8; }
.brand_matrix_gtune + .brand_matrix_line { border-bottom: 1px solid #ff0000; background: #840000; }

.brand_matrix_daiv .brand_matrix_series { background: #707070; }
.brand_matrix_daiv .brand_matrix_series.active { background: #464646; }
.brand_matrix_daiv .brand_matrix_series_text_category { color: #a8a8a8; }
.brand_matrix_daiv .brand_matrix_series_text_product { color: #c0c0c0; }
.brand_matrix_daiv + .brand_matrix_line { border-bottom: 1px solid #888888; background: #464646; }

.brand_matrix_mousepro .brand_matrix_series { background: #ffffff; }
.brand_matrix_mousepro .brand_matrix_series.active { background: #007cb4; }
.brand_matrix_mousepro .brand_matrix_series_text_category { color: #a8a8a8; }
.brand_matrix_mousepro .brand_matrix_series_text_product { color: #000000; }
.brand_matrix_mousepro + .brand_matrix_line { border-bottom: 1px solid #00a0e9; background: #007cb4; }

@media screen and (min-width: 700px) {
.brand_matrix_series { flex-basis: 200px; height: 100px; border-radius: 10px 10px 0 0; }
.brand_matrix_series_img { width: 60px; margin-right: 10px; }
.brand_matrix_series_img img { max-height: 75px; }
.brand_matrix_series_text_product { font-size: 11px; }
.brand_matrix_series.active .brand_matrix_series_text_product { font-size: 16px; }
}

@media screen and (max-width: 699px) {
.brand_matrix_series { flex-basis: 40px; height: 40px; border-radius: 5px 5px 0 0; }
.brand_matrix_series_img { width: 30px; }
.brand_matrix_series_img img { max-height: 30px; }
.brand_matrix_series_text_category { display: none; }
.brand_matrix_series_text_product { display: none; }
.brand_matrix_series.active .brand_matrix_series_text_product { display: block; font-size: .5em; }
}

/* G-Tune モデルサイズ調整 */
@media screen and (min-width: 700px) {
img.gtune_handle_mini { width: auto; height: calc(75px * 0.6587); }
img.gtune_mini { width: auto; height: calc(75px * 0.7984); }
img.gtune_middle { width: auto; height: calc(75px * 0.8683); }
img.gtune_full { width: auto; height: calc(75px * 1.0000); }
}
@media screen and (max-width: 699px) {
img.gtune_handle_mini { width: auto; height: calc(30px * 0.6587); }
img.gtune_mini { width: auto; height: calc(30px * 0.7984); }
img.gtune_middle { width: auto; height: calc(30px * 0.8683); }
img.gtune_full { width: auto; height: calc(30px * 1.0000); }
}