/* =========================
  Object Utility（u-）
  ========================= */
@layer utility {
  .u-text-center {
    text-align: center;
  }
  .u-mt-16 {
    margin-top: 16px;
  }
  .u-mr-5 {
    margin-right: 5px;
  }
  .u-hidden {
    display: none !important;
  }
  .u-hidden-sp {
    display: none !important;
  }
  .u-hidden-pc {
    display: revert !important;
  }
  @media (min-width: 768px) {
    .u-hidden-sp {
      display: revert !important;
    }
    .u-hidden-pc {
      display: none !important;
    }
  }
  .u-x {
    position: relative;
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-bottom: 0.25em;
    vertical-align: middle;
  }
  .u-x::before,
  .u-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 4px;
    background: var(--g-indigo-700);
    border-radius: 100px;
    transform-origin: center;
  }
  .u-x::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .u-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  
}