/* ==========================================================================
 * StartLike Theme - Utility: Visibility
 * Breakpoints: SP ~639px / TAB 640px~ / PC 1024px~ / XL 1280px~
 * ========================================================================== */

/* ----------------------------------------------------------------
 * Always Hidden
 * ---------------------------------------------------------------- */
.u-hidden {
  display: none !important;
}

/* ----------------------------------------------------------------
 * Hidden at specific breakpoints (mobile-first)
 * ---------------------------------------------------------------- */

/* Hidden on SP only (show on TAB and up) */
.u-hidden-sm {
  display: none !important;
}

@media (min-width: 640px) {
  .u-hidden-sm {
    display: block !important;
  }
}

/* Hidden on TAB and up */
@media (min-width: 640px) {
  .u-hidden-md-up {
    display: none !important;
  }
}

/* Hidden on PC and up */
@media (min-width: 1024px) {
  .u-hidden-lg-up {
    display: none !important;
  }
}

/* Hidden on XL and up */
@media (min-width: 1280px) {
  .u-hidden-xl-up {
    display: none !important;
  }
}

/* Hidden below TAB (SP only) */
.u-hidden-sm-down {
  display: none !important;
}

@media (min-width: 640px) {
  .u-hidden-sm-down {
    display: block !important;
  }
}

/* Hidden below PC (SP + TAB) */
.u-hidden-lg-down {
  display: none !important;
}

@media (min-width: 1024px) {
  .u-hidden-lg-down {
    display: block !important;
  }
}

/* Hidden below XL (SP + TAB + PC) */
.u-hidden-xl-down {
  display: none !important;
}

@media (min-width: 1280px) {
  .u-hidden-xl-down {
    display: block !important;
  }
}

/* ----------------------------------------------------------------
 * Visible at specific breakpoints
 * ---------------------------------------------------------------- */

/* Visible on SP only */
.u-visible-sm {
  display: block !important;
}

@media (min-width: 640px) {
  .u-visible-sm {
    display: none !important;
  }
}

/* Visible on TAB only */
.u-visible-md {
  display: none !important;
}

@media (min-width: 640px) {
  .u-visible-md {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .u-visible-md {
    display: none !important;
  }
}

/* Visible on PC only */
.u-visible-lg {
  display: none !important;
}

@media (min-width: 1024px) {
  .u-visible-lg {
    display: block !important;
  }
}

@media (min-width: 1280px) {
  .u-visible-lg {
    display: none !important;
  }
}

/* Visible on XL only */
.u-visible-xl {
  display: none !important;
}

@media (min-width: 1280px) {
  .u-visible-xl {
    display: block !important;
  }
}

/* ----------------------------------------------------------------
 * Screen Reader Only
 * ---------------------------------------------------------------- */
.u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}