@layer object {
  .c-icon {
    font-family: "Material Symbols Outlined";
    font-size: var(--icon-size, 24px);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    user-select: none;
    font-variation-settings:
    "FILL" var(--icon-fill, 0),
    "wght" var(--icon-wght, 400),
    "GRAD" var(--icon-grad, 0),
    "opsz" var(--icon-opsz, 24);
    visibility: hidden;
  }
  .fonts-loaded .c-icon {
    visibility: visible;
  }
  /* 種類 */
  .c-icon--rounded {
    font-family: "Material Symbols Rounded";
  }
  .c-icon--sharp {
    font-family: "Material Symbols Sharp";
  }

  /* 状態 */
  .c-icon--filled {
    --icon-fill: 1;
  }
  .c-icon--light {
    --icon-wght: 100;
  }

  /* サイズ */
  .c-icon--sm {
    --icon-opsz: 16;
    --icon-size: 16px;
  }
  .c-icon--lg {
    --icon-opsz: 32;
    --icon-size: 32px;
  }

  .c-icon--close {
    display: none;
  }
}