/* basic color link -------------------------------------------------------- */

/* @group @variables */

[class*="a-link-primary"],
[class*="a-toc-toggle"],
[class*="m-toc"] a {
--link-background-color: transparent;
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);

--link-background-size: 0% 120%, 0 120%;
--link-action-background-size: 100% 120%, 100% 120%;
--link-background-position: 0 0;
--link-background-repeat: no-repeat;
--link-border-color: transparent;
--link-border-color: transparent;
--link-border-action-color: var(---color-link-action-border);
--link-color: var(--color-link);
--link-action-color: var(--color-link-action);
--link-active-color: var(--color-link-active);
--transition: background-size .25s 0s cubic-bezier(.6, .5, .5, .75), color .25s 0s cubic-bezier(.6, .5, .5, .75);
}

/* カラー背景の時（白ボタン） */

/*[class*="m-footer-nav"] a:where(:not([class])) {
--link-border-color: hsla(0, 0%, 100%, .25);
--link-border-action-color: var(--color-white-action-border);
--link-color: var(--color-very-light-gray);
--link-action-color: var(--color-white);
--link-active-color: var(--color-white-active);
} */

/* ブランドカラー */
[class*="m-link-proto"] {
--link-background-color: transparent;
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);
--link-background-size: 0% 120%, 0 120%;
--link-action-background-size: 100% 120%, 100% 120%;
--link-background-position: 0 0;
--link-background-repeat: no-repeat;

--link-border-color: transparent;
--link-border-color: transparent;
--link-border-action-color: var(---color-link-action-border);
--link-color: var(--color-text);
--link-action-color: var(--color-premier-action);
--link-active-color: var(--color-premier-active);
--transition: background-size .25s 0s cubic-bezier(.6, .5, .5, .75), color .25s 0s cubic-bezier(.6, .5, .5, .75);
}

/* @end @variables */

/* @group @a-link */

[class*="a-link-primary"],
[class*="a-toc-toggle"],
[class*="m-link-proto"] a:where(:not([class])) {
background-image: var(--link-background-image);
background-size: var(--link-background-size);
background-position: var(--link-background-position);
background-repeat: var(--link-background-repeat);
font-weight: var(--link-font-weight);
font-variation-settings: var(--link-font-variation-settings);
transition: var(--transition);
}

[class*="a-link-primary"]:hover,
[class*="a-link-primary"]:focus,
[class*="a-toc-toggle"]:hover,
[class*="a-toc-toggle"]:focus,
[class*="m-link-proto"] a:where(:not([class])):hover,
[class*="m-link-proto"] a:where(:not([class])):focus {
background-size: var(--link-action-background-size);
font-weight: var(--link-action-font-weight);
font-variation-settings: var(--link-action-font-variation-settings);
}

/* @end @a-link */

/* @group @variables */

:is(main) a:where(:not([class])) {
--link-background-color: transparent;
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);

--link-background-size: 0% 120%, 0 120%;
--link-action-background-size: 100% 120%, 100% 120%;
--link-background-position: 0 0;
--link-background-repeat: no-repeat;
--link-border-color: transparent;
--link-border-color: transparent;
--link-border-action-color: var(---color-link-action-border);
--link-color: var(--color-link);
--link-action-color: var(--color-link-action);
--link-active-color: var(--color-link-active);
--transition: background-size .25s 0s cubic-bezier(.6, .5, .5, .75), color .25s 0s cubic-bezier(.6, .5, .5, .75);
}



[class*="m-bread-list"] {
--link-color: var(--color-text);
}

/* カラー背景の時（白ボタン） */

/* @group @variables */

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

[class*="m-footer-nav"] a:where(:not([class])) {
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);
--link-background-size: 0% 120%, 0 120%;
--link-action-background-size: 100% 120%, 100% 120%;
--link-background-position: 0 0;
--link-background-repeat: no-repeat;

--link-border-color: hsla(0, 0%, 100%, .25);
--link-border-action-color: var(--color-white-action-border);
--link-color: var(--color-very-light-gray);
--link-action-color: var(--color-white);
--link-active-color: var(--color-white-active);
}

/* ブランドカラー */
[class*="m-secondary-nav"] {
--link-background-color: transparent;
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);
--link-background-size: 0% 140%, 0 140%;
--link-action-background-size: 100% 140%, 100% 140%;
--link-background-position: 0 0;
--link-background-repeat: no-repeat;

--link-border-color: transparent;
--link-border-color: transparent;
--link-border-action-color: var(---color-link-action-border);
--link-color: var(--color-text);
--link-action-color: var(--color-premier-action);
--link-active-color: var(--color-premier-active);
--transition: background-size .25s 0s cubic-bezier(.6, .5, .5, .75), color .25s 0s cubic-bezier(.6, .5, .5, .75);
}

}

/* @end @variables */

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

/* @group @a-link */

:is(main, [class*="m-footer-nav"], [class*="m-secondary-nav"]) a:where(:not([class])) {
background-image: var(--link-background-image);
background-size: var(--link-background-size);
background-position: var(--link-background-position);
background-repeat: var(--link-background-repeat);
font-weight: var(--link-font-weight);
font-variation-settings: var(--link-font-variation-settings);
transition: var(--transition);
}

:is(main, [class*="m-footer-nav"], [class*="m-secondary-nav"]) a:where(:not([class])):hover,
:is(main, [class*="m-footer-nav"], [class*="m-secondary-nav"]) a:where(:not([class])):focus {
background-size: var(--link-action-background-size);
font-weight: var(--link-action-font-weight);
font-variation-settings: var(--link-action-font-variation-settings);
}

/* @end @a-link */