/*====================================================================================
START TABLE OF CONTENT

1. START MARGIN, PADDING.
2. START CLEAR FLOAT.
3. START LAYOUT.
4. START TEXT.
5. START HIDING CLASSES.
6. START COLOR.
7. START BACKGROUND COLOR.
8. START LINK.

/*====================================================================================
1. START MARGIN, PADDING.
====================================================================================*/
/* ---------- START MARGIN BOTTOM ----------*/
.u-mb05 {
  margin-bottom: 0.5rem !important;
}

.u-mb15 {
  margin-bottom: 1.5rem !important;
}

/*====================================================================================
2. START FLOAT.
====================================================================================*/
/* ---------- START FLOAT ----------*/
.u-float-left {
  float: left !important;
}

.u-float-right {
  float: right !important;
}

/*====================================================================================
3. START LAYOUT.
====================================================================================*/
/* ---------- START SPACING MARGIN TOP ----------*/
.u-spacing-mt-special {
  margin-top: var(--spacing-sp-0-pc-80) !important;
}

.u-spacing-mt-primary {
  margin-top: var(--spacing-sp-75-pc-150) !important;
}

.u-spacing-mt-secondary {
  margin-top: var(--spacing-sp-70-pc-140) !important;
}

.u-spacing-mt-third {
  margin-top: var(--spacing-sp-65-pc-130) !important;
}

.u-spacing-mt-fourth {
  margin-top: var(--spacing-sp-60-pc-120) !important;
}

.u-spacing-mt-fifth {
  margin-top: var(--spacing-sp-55-pc-110) !important;
}

.u-spacing-mt-sixth {
  margin-top: var(--spacing-sp-50-pc-100) !important;
}

.u-spacing-mt-seventh {
  margin-top: var(--spacing-sp-45-pc-90) !important;
}

.u-spacing-mt-eighth {
  margin-top: var(--spacing-sp-40-pc-80) !important;
}

.u-spacing-mt-ninth {
  margin-top: var(--spacing-sp-35-pc-70) !important;
}

.u-spacing-mt-tenth {
  margin-top: var(--spacing-sp-30-pc-60) !important;
}

.u-spacing-mt-eleventh {
  margin-top: var(--spacing-sp-25-pc-50) !important;
}

.u-spacing-mt-twelfth {
  margin-top: var(--spacing-sp-25-pc-40) !important;
}

.u-spacing-mt-thirteenth {
  margin-top: var(--spacing-sp-20-pc-40) !important;
}

.u-spacing-mt-fourteenth {
  margin-top: var(--spacing-sp-20-pc-30) !important;
}

.u-spacing-mt-fifteenth {
  margin-top: var(--spacing-sp-15-pc-30) !important;
}

.u-spacing-mt-sixteenth {
  margin-top: var(--spacing-sp-15-pc-20) !important;
}

.u-spacing-mt-seventeenth {
  margin-top: var(--spacing-sp-10-pc-20) !important;
}

/* ---------- START SPACING MARGIN BOTTOM ----------*/
.u-spacing-mb-primary {
  margin-bottom: var(--spacing-sp-75-pc-150) !important;
}

.u-spacing-mb-secondary {
  margin-bottom: var(--spacing-sp-70-pc-140) !important;
}

.u-spacing-mb-third {
  margin-bottom: var(--spacing-sp-65-pc-130) !important;
}

.u-spacing-mb-fourth {
  margin-bottom: var(--spacing-sp-60-pc-120) !important;
}

.u-spacing-mb-fifth {
  margin-bottom: var(--spacing-sp-55-pc-110) !important;
}

.u-spacing-mb-sixth {
  margin-bottom: var(--spacing-sp-50-pc-100) !important;
}

.u-spacing-mb-seventh {
  margin-bottom: var(--spacing-sp-45-pc-90) !important;
}

.u-spacing-mb-eighth {
  margin-bottom: var(--spacing-sp-40-pc-80) !important;
}

.u-spacing-mb-ninth {
  margin-bottom: var(--spacing-sp-35-pc-70) !important;
}

.u-spacing-mb-tenth {
  margin-bottom: var(--spacing-sp-30-pc-60) !important;
}

.u-spacing-mb-eleventh {
  margin-bottom: var(--spacing-sp-25-pc-50) !important;
}

.u-spacing-mb-twelfth {
  margin-bottom: var(--spacing-sp-25-pc-40) !important;
}

.u-spacing-mb-thirteenth {
  margin-bottom: var(--spacing-sp-20-pc-40) !important;
}

.u-spacing-mb-fourteenth {
  margin-bottom: var(--spacing-sp-20-pc-30) !important;
}

.u-spacing-mb-fifteenth {
  margin-bottom: var(--spacing-sp-15-pc-30) !important;
}

.u-spacing-mb-sixteenth {
  margin-bottom: var(--spacing-sp-15-pc-20) !important;
}

.u-spacing-mb-seventeenth {
  margin-bottom: var(--spacing-sp-10-pc-20) !important;
}

/* ---------- START SPACING PADDING ----------*/
.u-spacing-p-special {
  padding: var(--spacing-sp-0-pc-80) 0 var(--spacing-sp-60-pc-120) 0 !important;
}

.u-spacing-p-primary {
  padding: var(--spacing-sp-75-pc-150) 0 !important;
}

.u-spacing-p-secondary {
  padding: var(--spacing-sp-70-pc-140) 0 !important;
}

.u-spacing-p-third {
  padding: var(--spacing-sp-65-pc-130) 0 !important;
}

.u-spacing-p-fourth {
  padding: var(--spacing-sp-60-pc-120) 0 !important;
}

.u-spacing-p-fifth {
  padding: var(--spacing-sp-55-pc-110) 0 !important;
}

.u-spacing-p-fifth-v2 {
  padding: var(--spacing-sp-55-pc-110) 0 var(--spacing-sp-60-pc-120) 0 !important;
}

.u-spacing-p-sixth {
  padding: var(--spacing-sp-50-pc-100) 0 !important;
}

/* ---------- START SPACING PADDING TOP ----------*/
.u-spacing-pt-primary {
  padding-top: var(--spacing-sp-75-pc-150) !important;
}

.u-spacing-pt-secondary {
  padding-top: var(--spacing-sp-70-pc-140) !important;
}

.u-spacing-pt-third {
  padding-top: var(--spacing-sp-65-pc-130) !important;
}

.u-spacing-pt-fourth {
  padding-top: var(--spacing-sp-60-pc-120) !important;
}

.u-spacing-pt-fifth {
  padding-top: var(--spacing-sp-55-pc-110) !important;
}

.u-spacing-pt-sixth {
  padding-top: var(--spacing-sp-50-pc-100) !important;
}

/* ---------- START SPACING PADDING BOTTOM ----------*/
.u-spacing-pb-primary {
  padding-bottom: var(--spacing-sp-75-pc-150) !important;
}

.u-spacing-pb-secondary {
  padding-bottom: var(--spacing-sp-70-pc-140) !important;
}

.u-spacing-pb-third {
  padding-bottom: var(--spacing-sp-65-pc-130) !important;
}

.u-spacing-pb-fourth {
  padding-bottom: var(--spacing-sp-60-pc-120) !important;
}

.u-spacing-pb-fifth {
  padding-bottom: var(--spacing-sp-55-pc-110) !important;
}

.u-spacing-pb-sixth {
  padding-bottom: var(--spacing-sp-50-pc-100) !important;
}

/*====================================================================================
4. START TEXT.
====================================================================================*/
/* ---------- START FONT FAMILY ---------- */
.u-font-jp-primary {
  font-family: var(--theme-font-jp-primary) !important;
}

.u-font-jp-secondary {
  font-family: var(--theme-font-jp-secondary) !important;
}

/* ---------- START FONT WEIGHT ---------- */
.u-font-normal {
  font-weight: normal !important;
}

.u-font-bold {
  font-weight: bold !important;
}

/* ---------- START TEXT ALIGN ---------- */
.u-text-center {
  text-align: center !important;
}

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

/*====================================================================================
5. START HIDING CLASSES.
====================================================================================*/
.u-hide {
  display: none !important;
}

/* ---------- START HIDE MAX WIDTH ---------- */
@media only screen and (max-width: 1199px) {
  .u-hide-max-w1199 {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .u-hide-max-w767 {
    display: none !important;
  }
}
@media only screen and (max-width: 575px) {
  .u-hide-max-w575 {
    display: none !important;
  }
}
@media only screen and (max-width: 424px) {
  .u-hide-max-w424 {
    display: none !important;
  }
}
@media only screen and (max-width: 379px) {
  .u-hide-max-w379 {
    display: none !important;
  }
}
/* ---------- START HIDE MIN WIDTH ---------- */
@media only screen and (min-width: 1200px) {
  .u-hide-min-w1200 {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-hide-min-w768 {
    display: none !important;
  }
}
@media only screen and (min-width: 576px) {
  .u-hide-min-w576 {
    display: none !important;
  }
}
@media only screen and (min-width: 425px) {
  .u-hide-min-w425 {
    display: none !important;
  }
}
@media only screen and (min-width: 380px) {
  .u-hide-min-w380 {
    display: none !important;
  }
}
/*====================================================================================
6. START COLOR.
====================================================================================*/
.u-c-primary {
  color: var(--theme-color-primary) !important;
}

.u-c-secondary {
  color: var(--theme-color-secondary) !important;
}

.u-c-eighteenth {
  color: var(--theme-color-eighteenth) !important;
}

/*====================================================================================
7. START BACKGROUND COLOR.
====================================================================================*/
.u-bg-primary {
  background-color: var(--theme-color-primary) !important;
}

.u-bg-secondary {
  background-color: var(--theme-color-secondary) !important;
}

.u-bg-fourteenth {
  background-color: var(--theme-color-fourteenth) !important;
}

.u-bg-eighteenth {
  background-color: var(--theme-color-eighteenth) !important;
}

/*====================================================================================
8. START LINK.
====================================================================================*/
/* ---------- LINK DECORATION ---------- */
@media only screen and (max-width: 767px) {
  .u-link-line {
    text-decoration: underline !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-link-line {
    text-decoration: none !important;
  }
}