Utility Css – Arkhe

.u-display-none

.u-display-none {
  display: none !important
}

.u-display-block

.u-display-block {
  display: block !important
}

.u-flex

.u-flex {
  display: flex
}

.u-flex–aic

.u-flex--aic {
  align-items: center;
  display: flex
}

.u-flex–aicw

.u-flex--aicw {
  align-items: center;
  display: flex;
  flex-wrap: wrap
}

.u-flex–c

.u-flex--c {
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center
}

.u-fz-xs

.u-fz-xs {
  font-size: var(--ark-fz--xs, .75em) !important
}

.u-fz-s

.u-fz-s {
  font-size: var(--ark-fz--s, .9em) !important
}

.u-fz-n

.u-fz-n {
  font-size: var(--ark-fz--n, 1rem) !important
}

.u-fz-m

.u-fz-m {
  font-size: var(--ark-fz--m, 1.1em) !important
}

.u-fz-l

.u-fz-l {
  font-size: var(--ark-fz--l, 1.25em) !important
}

.u-fz-xl

.u-fz-xl {
  font-size: var(--ark-fz--xl, 1.5em) !important
}

.u-fz-xxl

.u-fz-xxl {
  font-size: var(--ark-fz--xxl, 2em) !important
}

.u-fz-h1

.u-fz-h1 { font-size: var(--h1-fz) !important; }

.u-fz-h2

.u-fz-h2 { font-size: var(--h2-fz) !important; }

.u-fz-h3

.u-fz-h3 { font-size: var(--h3-fz) !important; }

.u-fz-h4

.u-fz-h4 { font-size: var(--h4-fz) !important; }

.u-fw-bold

.u-fw-bold {
  font-weight: 700 !important
}

.u-fw-lighter

.u-fw-lighter {
  font-weight: lighter !important
}

.u-fullheight

.u-fullheight {
  height: var(--ark-height--full, 100vh) !important
}

.u-lh-10

.u-lh-10 {
  line-height: 1 !important
}

.u-lh-12

.u-lh-12 {
  line-height: 1.2 !important
}

.u-lh-14

.u-lh-14 {
  line-height: 1.4 !important
}

.u-lh-15

.u-lh-15 {
  line-height: 1.5 !important
}

.u-lh-16

.u-lh-16 {
  line-height: 1.6 !important
}

.u-lh-18

.u-lh-18 {
  line-height: 1.8 !important
}

.u-lh-20

.u-lh-20 {
  line-height: 2 !important
}

.u-mb-0

.u-mb-0 {
  margin-bottom: 0 !important
}

.u-mb-5

.u-mb-5 {
  margin-bottom: .5rem !important
}

.u-mb-10

.u-mb-10 {
  margin-bottom: 1rem !important
}

.u-mb-15

.u-mb-15 {
  margin-bottom: 1.5rem !important
}

.u-mb-20

.u-mb-20 {
  margin-bottom: 2rem !important
}

.u-mb-25

.u-mb-25 {
  margin-bottom: 2.5rem !important
}

.u-mb-30

.u-mb-30 {
  margin-bottom: 3rem !important
}

.u-mb-40

.u-mb-40 {
  margin-bottom: 4rem !important
}

.u-mb-50

.u-mb-50 {
  margin-bottom: 5rem !important
}

.u-mb-60

.u-mb-60 {
  margin-bottom: 6rem !important
}

.u-mb-80

.u-mb-80 {
  margin-bottom: 8rem !important
}

.u-mt-0

.u-mt-0 {
  margin-top: 0 !important
}

.u-mt-5

.u-mt-5 {
  margin-top: .5rem !important
}

.u-mt-10

.u-mt-10 {
  margin-top: 1rem !important
}

.u-mt-15

.u-mt-15 {
  margin-top: 1.5rem !important
}

.u-mt-20

.u-mt-20 {
  margin-top: 2rem !important
}

.u-mt-25

.u-mt-25 {
  margin-top: 2.5rem !important
}

.u-mt-30

.u-mt-30 {
  margin-top: 3rem !important
}

.u-mt-40

.u-mt-40 {
  margin-top: 4rem !important
}

.u-mt-50

.u-mt-50 {
  margin-top: 5rem !important
}

.u-mt-60

.u-mt-60 {
  margin-top: 6rem !important
}

.u-mt-80

.u-mt-80 {
  margin-top: 8rem !important
}

.u-obf-cover

.u-obf-cover {
  display: block;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}

.u-obf-contain

.u-obf-contain {
  display: block;
  height: 100% !important;
  width: 100% !important;
  object-fit: contain;
}

.u-ta-c

.u-ta-c {
  text-align: center !important
}

.u-ta-l

.u-ta-l {
  text-align: left !important
}

.u-ta-r

.u-ta-r {
  text-align: right !important
}

.u-color-thin

.u-color-thin {
  opacity: var(--ark-opacity--thin)
}

.u-hide-sp

@media not all and (min-width:1000px) {
  .u-hide-sp {
    display: none !important
  }
}

.u-only-pc

@media not all and (min-width:1000px) {
  .u-only-pc {
    display: none !important
  }
}

.u-hide-pc

@media (min-width:1000px) {
  .u-hide-pc {
    display: none !important
  }
}

.u-only-sp

@media (min-width:1000px) {
  .u-only-sp {
    display: none !important
  }
}