/* ====================================================================================
[TABLE OF CONTENTS]

1. SPACING.
 - COMPONENT.
 - SECTION.
2. HIDE.
3. TYPOGRAPHY.
 - FONT FAMILY.
 - ALIGNMENT.
 - TEXT TRANSFORM.
 - FONT STYLE.
 - FONT WEIGHT.
4. ACCESSIBILITY.
 - SCREEN READER ONLY.
5. TEXT DECORATION.
 - UNDERLINE.
6. CLEARFIX.
==================================================================================== */
/* ====================================================================================
1. SPACING.
==================================================================================== */
/* ------------------------------------------------------------------------------------
[SPACING] COMPONENT.
------------------------------------------------------------------------------------ */
/* ---------- [Component] Margin Block Start ---------- */
[class^=u-component-mt-],
[class*=" u-component-mt-"] {
  margin-block-start: calc(var(--u-margin-block-start) * var(--component-mt-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-component-mt-],
  [class*=" u-component-mt-"] {
    margin-block-start: calc(var(--u-margin-block-start) * 2 * var(--component-mt-scale)) !important;
  }
}
.u-component-mt-2xl {
  --component-mt-scale: 6;
}

.u-component-mt-xl,
.u-component-mt-lg {
  --component-mt-scale: 5;
}

.u-component-mt-md {
  --component-mt-scale: 4;
}

.u-component-mt-sm {
  --component-mt-scale: 3;
}

.u-component-mt-xs,
.u-component-mt-2xs {
  --component-mt-scale: 2;
}

@media (min-width: 768px) {
  .u-component-mt-lg {
    --component-mt-scale: 4.5;
  }
  .u-component-mt-2xs {
    --component-mt-scale: 1.5;
  }
}
/* ---------- [Component] Margin Block End ---------- */
[class^=u-component-mb-],
[class*=" u-component-mb-"] {
  margin-block-end: calc(var(--u-margin-block-end) * var(--component-mb-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-component-mb-],
  [class*=" u-component-mb-"] {
    margin-block-end: calc(var(--u-margin-block-end) * 2 * var(--component-mb-scale)) !important;
  }
}
.u-component-mb-4xl {
  --component-mb-scale: 8;
}

.u-component-mb-3xl {
  --component-mb-scale: 7;
}

.u-component-mb-2xl {
  --component-mb-scale: 6;
}

.u-component-mb-xl,
.u-component-mb-lg {
  --component-mb-scale: 5;
}

.u-component-mb-md {
  --component-mb-scale: 4;
}

.u-component-mb-sm {
  --component-mb-scale: 3;
}

.u-component-mb-xs,
.u-component-mb-2xs {
  --component-mb-scale: 2;
}

@media (min-width: 768px) {
  .u-component-mb-lg {
    --component-mb-scale: 4.5;
  }
  .u-component-mb-2xs {
    --component-mb-scale: 1.5;
  }
}
/* ---------- [Component] Padding Block Start ---------- */
[class^=u-component-pt-],
[class*=" u-component-pt-"] {
  padding-block-start: calc(var(--u-padding-block-start) * var(--component-pt-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-component-pt-],
  [class*=" u-component-pt-"] {
    padding-block-start: calc(var(--u-padding-block-start) * 2 * var(--component-pt-scale)) !important;
  }
}
.u-component-pt-2xl {
  --component-pt-scale: 6;
}

.u-component-pt-xl,
.u-component-pt-lg {
  --component-pt-scale: 5;
}

.u-component-pt-md {
  --component-pt-scale: 4;
}

.u-component-pt-sm {
  --component-pt-scale: 3;
}

.u-component-pt-xs,
.u-component-pt-2xs {
  --component-pt-scale: 2;
}

@media (min-width: 768px) {
  .u-component-pt-lg {
    --component-pt-scale: 4.5;
  }
  .u-component-pt-2xs {
    --component-pt-scale: 1.5;
  }
}
/* ---------- [Component] Padding Block End ---------- */
[class^=u-component-pb-],
[class*=" u-component-pb-"] {
  padding-block-end: calc(var(--u-padding-block-end) * var(--component-pb-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-component-pb-],
  [class*=" u-component-pb-"] {
    padding-block-end: calc(var(--u-padding-block-end) * 2 * var(--component-pb-scale)) !important;
  }
}
.u-component-pb-2xl {
  --component-pb-scale: 6;
}

.u-component-pb-xl,
.u-component-pb-lg {
  --component-pb-scale: 5;
}

.u-component-pb-md {
  --component-pb-scale: 4;
}

.u-component-pb-sm {
  --component-pb-scale: 3;
}

.u-component-pb-xs,
.u-component-pb-2xs {
  --component-pb-scale: 2;
}

@media (min-width: 768px) {
  .u-component-pb-lg {
    --component-pb-scale: 4.5;
  }
  .u-component-pb-2xs {
    --component-pb-scale: 1.5;
  }
}
/* ------------------------------------------------------------------------------------
[SPACING] SECTION.
------------------------------------------------------------------------------------ */
/* ---------- [Section] Margin Block Start ---------- */
[class^=u-section-mt-],
[class*=" u-section-mt-"] {
  margin-block-start: calc(var(--u-margin-block-start) * var(--section-mt-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-section-mt-],
  [class*=" u-section-mt-"] {
    margin-block-start: calc(var(--u-margin-block-start) * 2 * var(--section-mt-scale)) !important;
  }
}
.u-section-mt-xl {
  --section-mt-scale: 10;
}

.u-section-mt-lg {
  --section-mt-scale: 9;
}

.u-section-mt-md {
  --section-mt-scale: 8;
}

.u-section-mt-sm {
  --section-mt-scale: 7;
}

/* ---------- [Section] Padding Block ---------- */
[class^=u-section-p-],
[class*=" u-section-p-"] {
  padding-block: calc(var(--u-padding-block) * var(--section-p-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-section-p-],
  [class*=" u-section-p-"] {
    padding-block: calc(var(--u-padding-block) * 2 * var(--section-p-scale)) !important;
  }
}
.u-section-p-xl {
  --section-p-scale: 10;
}

.u-section-p-lg {
  --section-p-scale: 9;
}

.u-section-p-md {
  --section-p-scale: 8;
}

/* ---------- [Section] Margin Block End ---------- */
[class^=u-section-mb-],
[class*=" u-section-mb-"] {
  margin-block-end: calc(var(--u-margin-block-end) * var(--section-mb-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-section-mb-],
  [class*=" u-section-mb-"] {
    margin-block-end: calc(var(--u-margin-block-end) * 2 * var(--section-mb-scale)) !important;
  }
}
.u-section-mb-xl {
  --section-mb-scale: 10;
}

.u-section-mb-lg {
  --section-mb-scale: 9;
}

.u-section-mb-md {
  --section-mb-scale: 8;
}

.u-section-mb-sm {
  --section-mb-scale: 7;
}

/* ---------- [Section] Padding Block Start ---------- */
[class^=u-section-pt-],
[class*=" u-section-pt-"] {
  padding-block-start: calc(var(--u-padding-block-start) * var(--section-pt-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-section-pt-],
  [class*=" u-section-pt-"] {
    padding-block-start: calc(var(--u-padding-block-start) * 2 * var(--section-pt-scale)) !important;
  }
}
.u-section-pt-xl {
  --section-pt-scale: 10;
}

.u-section-pt-lg {
  --section-pt-scale: 9;
}

.u-section-pt-md {
  --section-pt-scale: 8;
}

/* ---------- [Section] Padding Block End ---------- */
[class^=u-section-pb-],
[class*=" u-section-pb-"] {
  padding-block-end: calc(var(--u-padding-block-end) * var(--section-pb-scale)) !important;
}

@media (min-width: 768px) {
  [class^=u-section-pb-],
  [class*=" u-section-pb-"] {
    padding-block-end: calc(var(--u-padding-block-end) * 2 * var(--section-pb-scale)) !important;
  }
}
.u-section-pb-xl {
  --section-pb-scale: 10;
}

.u-section-pb-lg {
  --section-pb-scale: 9;
}

.u-section-pb-md {
  --section-pb-scale: 8;
}

/* ====================================================================================
2. HIDE.
==================================================================================== */
.u-hide {
  display: none !important;
}

/* ---------- [Display] Hide Down ---------- */
@media (max-width: 575.98px) {
  .u-hide-down-sm {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .u-hide-down-md {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .u-hide-down-lg {
    display: none !important;
  }
}
@media (max-width: 1024.98px) {
  .u-hide-down-pc {
    display: none !important;
  }
}
@media (max-width: 1199.98px) {
  .u-hide-down-xl {
    display: none !important;
  }
}
@media (max-width: 1399.98px) {
  .u-hide-down-2xl {
    display: none !important;
  }
}
/* ---------- [Display] Hide Up ---------- */
@media (min-width: 576px) {
  .u-hide-up-sm {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .u-hide-up-md {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .u-hide-up-lg {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  .u-hide-up-pc {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .u-hide-up-xl {
    display: none !important;
  }
}
@media (min-width: 1400px) {
  .u-hide-up-2xl {
    display: none !important;
  }
}
/* ====================================================================================
3. TYPOGRAPHY.
==================================================================================== */
/* ------------------------------------------------------------------------------------
[TYPOGRAPHY] FONT FAMILY.
------------------------------------------------------------------------------------ */
.u-font-body {
  font-family: var(--ui-font-ja-primary) !important;
}

.u-font-display {
  font-family: var(--ui-font-ja-secondary) !important;
}

/* ------------------------------------------------------------------------------------
[TYPOGRAPHY] ALIGNMENT.
------------------------------------------------------------------------------------ */
.u-text-start {
  text-align: start !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-end {
  text-align: end !important;
}

/* ------------------------------------------------------------------------------------
[TYPOGRAPHY] TEXT TRANSFORM.
------------------------------------------------------------------------------------ */
.u-uppercase {
  text-transform: uppercase !important;
}

.u-lowercase {
  text-transform: lowercase !important;
}

.u-capitalize {
  text-transform: capitalize !important;
}

.u-normal-case {
  text-transform: none !important;
}

/* ------------------------------------------------------------------------------------
[TYPOGRAPHY] FONT STYLE.
------------------------------------------------------------------------------------ */
.u-italic {
  font-style: italic !important;
}

.u-not-italic {
  font-style: normal !important;
}

/* ------------------------------------------------------------------------------------
[TYPOGRAPHY] FONT WEIGHT.
------------------------------------------------------------------------------------ */
.u-font-bold {
  font-weight: var(--ui-font-weight-bold) !important;
}

.u-font-black {
  font-weight: var(--ui-font-weight-extrabold) !important;
}

/* ====================================================================================
4. ACCESSIBILITY.
==================================================================================== */
/* ------------------------------------------------------------------------------------
[ACCESSIBILITY] SCREEN READER ONLY.
------------------------------------------------------------------------------------ */
.u-sr-only:not(:focus):not(:active) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
}

/* ====================================================================================
5. TEXT DECORATION.
==================================================================================== */
/* ------------------------------------------------------------------------------------
[TEXT DECORATION] UNDERLINE.
------------------------------------------------------------------------------------ */
.u-underline-down-md {
  text-decoration-line: underline !important;
}

@media (min-width: 768px) {
  .u-underline-down-md {
    text-decoration-line: none !important;
  }
}
/* ====================================================================================
6. CLEARFIX.
==================================================================================== */
.u-clearfix::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}


/* ====================================================================================
7. BACKGROUND COLOR.
==================================================================================== */
.u-bg-gray {
  background-color: var(--ui-color-neutral-muted);
}

.u-bg-blue {
	background-image: linear-gradient(246deg, var(--color-blue-500) 0%, var(--color-blue-800) 100%);
}

/*# sourceMappingURL=utility.css.map */