/* P003-02基準。通常時の配色・寸法は各ボタンに任せ、操作時を統一する。 */
@media (hover: hover) {
  :root .button:not(:disabled):not([aria-disabled="true"]):hover {
    color: var(--color-brand-green-dark);
    background: var(--color-surface-base);
    border-color: var(--color-brand-green-dark);
    box-shadow: inset 0 0 0 1px var(--color-brand-green-dark), var(--shadow-button-pressed);
    translate: 0 2px;
    opacity: 1;
  }
  :root .button:not(:disabled):not([aria-disabled="true"]):hover img {
    filter: brightness(0) saturate(100%) invert(31%) sepia(81%) saturate(1051%) hue-rotate(120deg) brightness(89%) contrast(101%);
  }
}
:root .button:not(:disabled):not([aria-disabled="true"]):active {
  color: var(--color-brand-green-dark);
  background: var(--color-surface-base);
  border-color: var(--color-brand-green-dark);
  box-shadow: inset 0 0 0 1px var(--color-brand-green-dark), var(--shadow-button-pressed);
  translate: 0 2px;
  opacity: 1;
}
:root .button:not(:disabled):not([aria-disabled="true"]):active img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(81%) saturate(1051%) hue-rotate(120deg) brightness(89%) contrast(101%);
}
/* LINEは単色フィルターで文字まで塗りつぶさず、白背景用ロゴへ切り替える。 */
@media (hover: hover) {
  :root .button:is(.header-line, .menu-contact__button[data-channel="line"], .legacy-fixed-cta__sp-line, .contact-cta-button.button--line):not(:disabled):not([aria-disabled="true"]):hover img {
    filter: none;
    content: url("/assets/shared/header-line-logo-color.svg");
  }
}
:root .button:is(.header-line, .menu-contact__button[data-channel="line"], .legacy-fixed-cta__sp-line, .contact-cta-button.button--line):not(:disabled):not([aria-disabled="true"]):active img {
  filter: none;
  content: url("/assets/shared/header-line-logo-color.svg");
}
@media (prefers-reduced-motion: reduce) {
  :root .button:not(:disabled):not([aria-disabled="true"]):is(:hover, :active) {
    translate: none;
  }
}