/* @group @variables */

[class*="m-page-brand-nav"] {
--grid-template-columns: repeat(5, 1fr);
--gap: .375rem;
}

@media all and (min-width:48em) {

[class*="m-page-brand-nav"] {
--grid-template-columns: repeat(10, 1fr);
}

}

/* @end @variables */

/* @group @m-page-brand-nav */

[class*="m-page-brand-nav"] {
position: relative;
display: grid;
justify-content: center;
grid-template-columns: var(--grid-template-columns);
gap: var(--gap);
}

/* @end @m-page-brand-nav */

/* -------------------------------------------------------- */

/* @group variables */

:root {
/* ブランドカラーボタン */
--brand-list-link-height: 3rem;
--brand-list-link-background-color: hsla(337.3, 60.1%, 60%, .875);
--brand-list-link-icon-background-color: var(--color-white);
--brand-list-link-border-color: var(--color-primary);
--brand-list-link-text-color: var(--color-white);
--brand-list-link-action-background-color: var(--color-white);
--brand-list-link-border-width: var(--link-border-size);
--brand-list-link-action-text-color: var(--color-premier);
--brand-list-link-active-background-color: var(--color-white-active);
--brand-list-link-active-text-color: var(--color-premier);
--brand-list-link-disabled-background-color: var(--color-premier-disabled);
--brand-list-link-disabled-text-color: var(--color-white-disabled);
--brand-list-link-border-width: var(--link-border-size);
}

/* @end variables */

/* @group @a-brand-list-link */

[class*="a-brand-list-link"] {
position: relative;
z-index: 2;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: var(--brand-list-link-height);
background-color: var(--brand-list-link-background-color);
border: 1px solid var(--brand-list-link-border-color);
font-size: var(--brand-list-link-font-size);
font-weight: var(--brand-list-link-font-weight);
font-variation-settings: var(--brand-list-link-font-variation-settings);
color: var(--brand-list-link-text-color);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

[class*="a-brand-list-link"]:hover,
[class*="a-brand-list-link"]:focus {
color: var(--brand-list-link-action-text-color);
}

[class*="a-brand-list-link"]:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 200%;
height: 100%;
background-color: var(--brand-list-link-action-background-color);
transform: skewX(25deg) translateX(-210%);
transition: inherit;
}

[class*="a-brand-list-link"]:hover:before,
[class*="a-brand-list-link"]:focus:before {
transform: skewX(25deg) translateX(-20%);
}

/* @end @a-brand-list-link */