/* ==========================================================================
  margin-top
========================================================================== */
.u-mt-0 {
  margin-block-start: 0;
}
.u-mt-10 {
  margin-block-start: 10px;
}
.u-mt-20 {
  margin-block-start: 20px;
}
.u-mt-30 {
  margin-block-start: 30px;
}
.u-mt-40 {
  margin-block-start: 40px;
}
.u-mt-50 {
  margin-block-start: 50px;
}
.u-mt-60 {
  margin-block-start: 60px;
}
.u-mt-80 {
  margin-block-start: 80px;
}
.u-mt-100 {
  margin-block-start: 100px;
}
.u-mt-120 {
  margin-block-start: 120px;
}
.u-mt-200 {
  margin-block-start: 200px;
}
.u-mt-240 {
  margin-block-start: 240px;
}
.u-mt-300 {
  margin-block-start: 300px;
}

/* ==========================================================================
  margin-bottom
========================================================================== */
.u-mb-0 {
  margin-block-end: 0;
}
.u-mb-10 {
  margin-block-end: 10px;
}
.u-mb-20 {
  margin-block-end: 20px;
}
.u-mb-30 {
  margin-block-end: 30px;
}
.u-mb-40 {
  margin-block-end: 40px;
}
.u-mb-50 {
  margin-block-end: 50px;
}
.u-mb-60 {
  margin-block-end: 60px;
}
.u-mb-80 {
  margin-block-end: 80px;
}
.u-mb-100 {
  margin-block-end: 100px;
}
.u-mb-120 {
  margin-block-end: 120px;
}
.u-mb-200 {
  margin-block-end: 200px;
}
.u-mb-240 {
  margin-block-end: 240px;
}
.u-mb-300 {
  margin-block-end: 300px;
}

@media (max-width: 767px) {
  .u-mb-50 {
    margin-block-end: calc(50 / 375 * 100vw);
  }
  .u-mb-200 {
    margin-block-end: calc(100 / 375 * 100vw);
  }
  .u-mb-240 {
    margin-block-end: calc(120 / 375 * 100vw);
  }
  .u-mb-300 {
    margin-block-end: calc(150 / 375 * 100vw);
  }
}

/* ==========================================================================
  padding-top
========================================================================== */
.u-pt-0 {
  padding-block-start: 0;
}
.u-pt-10 {
  padding-block-start: 10px;
}
.u-pt-20 {
  padding-block-start: 20px;
}
.u-pt-30 {
  padding-block-start: 30px;
}
.u-pt-40 {
  padding-block-start: 40px;
}
.u-pt-50 {
  padding-block-start: 50px;
}
.u-pt-60 {
  padding-block-start: 60px;
}
.u-pt-80 {
  padding-block-start: 80px;
}
.u-pt-100 {
  padding-block-start: 100px;
}
.u-pt-120 {
  padding-block-start: 120px;
}
.u-pt-200 {
  padding-block-start: 200px;
}
.u-pt-240 {
  padding-block-start: 240px;
}
.u-pt-300 {
  padding-block-start: 300px;
}

@media (max-width: 767px) {
  .u-pt-50 {
    padding-block-start: calc(25 / 375 * 100vw);
  }
}

/* ==========================================================================
  padding-bottom
========================================================================== */
.u-pb-0 {
  padding-block-end: 0;
}
.u-pb-10 {
  padding-block-end: 10px;
}
.u-pb-20 {
  padding-block-end: 20px;
}
.u-pb-30 {
  padding-block-end: 30px;
}
.u-pb-40 {
  padding-block-end: 40px;
}
.u-pb-50 {
  padding-block-end: 50px;
}
.u-pb-60 {
  padding-block-end: 60px;
}
.u-pb-80 {
  padding-block-end: 80px;
}
.u-pb-100 {
  padding-block-end: 100px;
}
.u-pb-120 {
  padding-block-end: 120px;
}
.u-pb-200 {
  padding-block-end: 200px;
}
.u-pb-240 {
  padding-block-end: 240px;
}
.u-pb-300 {
  padding-block-end: 300px;
}

@media (max-width: 767px) {
  .u-pb-120 {
    padding-block-end: calc(60 / 375 * 100vw);
  }
  .u-pb-240 {
    padding-block-end: calc(120 / 375 * 100vw);
  }
}

/* ==========================================================================
   text-align
   ========================================================================== */
.u-text-center {
  text-align: center;
}
.u-text-right {
  text-align: right;
}
.u-text-left {
  text-align: left;
}

/* ==========================================================================
   txt-color
   ========================================================================== */
.u-text-dark {
  color: var(--color-primary-dark);
}
.u-text-light {
  color: var(--color-primary-light);
}
.u-text-white {
  color: var(--color-white);
}

/* ==========================================================================
   font-size
   ========================================================================== */
.u-fs-xs {
  font-size: var(--fs-xs);
}
.u-fs-sm {
  font-size: var(--fs-sm);
}
.u-fs-base {
  font-size: var(--fs-base);
}

/* ==========================================================================
   font-weight
   ========================================================================== */
.u-fw-normal {
  font-weight: var(--fw-normal);
}
.u-fw-medium {
  font-weight: var(--fw-medium);
}
.u-fw-bold {
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   line-height
   ========================================================================== */
.u-lh-base {
  line-height: var(--lh-base);
}
.u-lh-loose {
  line-height: var(--lh-loose);
}

/* ==========================================================================
   max-width
   ========================================================================== */
.u-max-640 {
  max-width: 640px;
}
.u-max-560 {
  max-width: 560px;
}
.u-max-320 {
  max-width: 320px;
}

/* ==========================================================================
   flex
   ========================================================================== */
.u-flex {
  display: flex;
}
.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.u-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.u-flex-wrap {
  flex-wrap: wrap;
}
.u-flex-shrink-0 {
  flex-shrink: 0;
}

/* ==========================================================================
  border-radius
========================================================================== */
.u-border-radius {
  border-radius: var(--radius-base);
}

/* ==========================================================================
  br
========================================================================== */
.u-pc-visible {
  display: block;
}

.u-sp-visible {
  display: none;
}

@media (max-width: 767px) {
  .u-pc-visible {
    display: none;
  }
  .u-sp-visible {
    display: block;
  }
}