/* ============================================
    utility.css
    命名規則：u-{プロパティ}-{値}
    SP基準で記述、PCはメディアクエリで上書き
============================================ */

/* ============================================
    Display
============================================ */
.u-block {
  display: block !important;
}
.u-inline {
  display: inline !important;
}
.u-inline-block {
  display: inline-block !important;
}
.u-flex {
  display: flex !important;
}
.u-inline-flex {
  display: inline-flex !important;
}
.u-grid {
  display: grid !important;
}
.u-none {
  display: none !important;
}

/* ============================================
    SP / PC 出し分け
============================================ */
.u-sp-only {
  display: block !important;
}
.u-pc-only {
  display: none !important;
}

@media (min-width: 768px) {
  .u-sp-only {
    display: none !important;
  }
  .u-pc-only {
    display: block !important;
  }
}

/* ============================================
    Visibility
============================================ */
.u-visible {
  visibility: visible !important;
}
.u-invisible {
  visibility: hidden !important;
}

/* ============================================
    Flexbox
============================================ */
.u-flex-row {
  flex-direction: row !important;
}
.u-flex-column {
  flex-direction: column !important;
}
.u-flex-wrap {
  flex-wrap: wrap !important;
}
.u-flex-nowrap {
  flex-wrap: nowrap !important;
}

.u-justify-start {
  justify-content: flex-start !important;
}
.u-justify-end {
  justify-content: flex-end !important;
}
.u-justify-center {
  justify-content: center !important;
}
.u-justify-between {
  justify-content: space-between !important;
}
.u-justify-around {
  justify-content: space-around !important;
}

.u-align-start {
  align-items: flex-start !important;
}
.u-align-end {
  align-items: flex-end !important;
}
.u-align-center {
  align-items: center !important;
}
.u-align-stretch {
  align-items: stretch !important;
}

.u-flex-1 {
  flex: 1 !important;
}
.u-flex-auto {
  flex: auto !important;
}
.u-flex-none {
  flex: none !important;
}
.u-flex-shrink-0 {
  flex-shrink: 0 !important;
}

/* ============================================
    Text Align
============================================ */
.u-text-left {
  text-align: left !important;
}
.u-text-center {
  text-align: center !important;
}
.u-text-right {
  text-align: right !important;
}

/* ============================================
    Font Size（variables.css参照）
============================================ */
.u-text-xs {
  font-size: var(--font-size-xs) !important;
}
.u-text-sm {
  font-size: var(--font-size-sm) !important;
}
.u-text-base {
  font-size: var(--font-size-base) !important;
}
.u-text-md {
  font-size: var(--font-size-md) !important;
}
.u-text-lg {
  font-size: var(--font-size-lg) !important;
}
.u-text-xl {
  font-size: var(--font-size-xl) !important;
}
.u-text-xxl {
  font-size: var(--font-size-xxl) !important;
}

/* ============================================
    Font Weight
============================================ */
.u-font-normal {
  font-weight: var(--font-weight-normal) !important;
}
.u-font-medium {
  font-weight: var(--font-weight-medium) !important;
}
.u-font-bold {
  font-weight: var(--font-weight-bold) !important;
}

/* ============================================
    Font Family
============================================ */
.u-font-base {
  font-family: var(--font-family-base) !important;
}
.u-font-en {
  font-family: var(--font-family-en) !important;
}

/* ============================================
    Line Height
============================================ */
.u-leading-base {
  line-height: var(--line-height-base) !important;
}
.u-leading-tight {
  line-height: var(--line-height-tight) !important;
}
.u-leading-none {
  line-height: 1 !important;
}

/* ============================================
    Text Color（variables.css参照）
============================================ */
.u-color-text {
  color: var(--color-text) !important;
}
.u-color-text-light {
  color: var(--color-text-light) !important;
}
.u-color-text-white {
  color: var(--color-text-white) !important;
}
.u-color-primary {
  color: var(--color-primary) !important;
}

/* ============================================
    Text Decoration
============================================ */
.u-underline {
  text-decoration: underline !important;
}
.u-no-underline {
  text-decoration: none !important;
}
.u-line-through {
  text-decoration: line-through !important;
}

/* ============================================
    Text Transform
============================================ */
.u-uppercase {
  text-transform: uppercase !important;
}
.u-lowercase {
  text-transform: lowercase !important;
}

/* ============================================
    White Space
============================================ */
.u-nowrap {
  white-space: nowrap !important;
}
.u-pre-wrap {
  white-space: pre-wrap !important;
}
.u-break-all {
  word-break: break-all !important;
}
.u-break-word {
  overflow-wrap: break-word !important;
}

/* ============================================
    Background Color
============================================ */
.u-bg-white {
  background-color: var(--color-bg) !important;
}
.u-bg-gray {
  background-color: var(--color-bg-gray) !important;
}
.u-bg-primary {
  background-color: var(--color-primary) !important;
}
.u-bg-pale {
  background-color: var(--color-primary-pale) !important;
}

/* ============================================
    Margin（variables.css参照）
============================================ */
.u-m-0 {
  margin: 0 !important;
}
.u-m-auto {
  margin: auto !important;
}
.u-m-0-auto {
  margin: 0 auto !important;
}

.u-mt-xs {
  margin-top: var(--spacing-xs) !important;
}
.u-mt-sm {
  margin-top: var(--spacing-sm) !important;
}
.u-mt-md {
  margin-top: var(--spacing-md) !important;
}
.u-mt-lg {
  margin-top: var(--spacing-lg) !important;
}
.u-mt-xl {
  margin-top: var(--spacing-xl) !important;
}
.u-mt-0 {
  margin-top: 0 !important;
}

.u-mb-xs {
  margin-bottom: var(--spacing-xs) !important;
}
.u-mb-sm {
  margin-bottom: var(--spacing-sm) !important;
}
.u-mb-md {
  margin-bottom: var(--spacing-md) !important;
}
.u-mb-lg {
  margin-bottom: var(--spacing-lg) !important;
}
.u-mb-xl {
  margin-bottom: var(--spacing-xl) !important;
}
.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-ml-xs {
  margin-left: var(--spacing-xs) !important;
}
.u-ml-sm {
  margin-left: var(--spacing-sm) !important;
}
.u-ml-md {
  margin-left: var(--spacing-md) !important;
}
.u-ml-auto {
  margin-left: auto !important;
}
.u-ml-0 {
  margin-left: 0 !important;
}

.u-mr-xs {
  margin-right: var(--spacing-xs) !important;
}
.u-mr-sm {
  margin-right: var(--spacing-sm) !important;
}
.u-mr-md {
  margin-right: var(--spacing-md) !important;
}
.u-mr-auto {
  margin-right: auto !important;
}
.u-mr-0 {
  margin-right: 0 !important;
}

.u-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.u-mx-md {
  margin-left: var(--spacing-md) !important;
  margin-right: var(--spacing-md) !important;
}

/* ============================================
    Padding（variables.css参照）
============================================ */
.u-p-0 {
  padding: 0 !important;
}
.u-p-sm {
  padding: var(--spacing-sm) !important;
}
.u-p-md {
  padding: var(--spacing-md) !important;
}
.u-p-lg {
  padding: var(--spacing-lg) !important;
}

.u-pt-xs {
  padding-top: var(--spacing-xs) !important;
}
.u-pt-sm {
  padding-top: var(--spacing-sm) !important;
}
.u-pt-md {
  padding-top: var(--spacing-md) !important;
}
.u-pt-lg {
  padding-top: var(--spacing-lg) !important;
}
.u-pt-xl {
  padding-top: var(--spacing-xl) !important;
}
.u-pt-0 {
  padding-top: 0 !important;
}

.u-pb-xs {
  padding-bottom: var(--spacing-xs) !important;
}
.u-pb-sm {
  padding-bottom: var(--spacing-sm) !important;
}
.u-pb-md {
  padding-bottom: var(--spacing-md) !important;
}
.u-pb-lg {
  padding-bottom: var(--spacing-lg) !important;
}
.u-pb-xl {
  padding-bottom: var(--spacing-xl) !important;
}
.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-pl-sm {
  padding-left: var(--spacing-sm) !important;
}
.u-pl-md {
  padding-left: var(--spacing-md) !important;
}
.u-pl-lg {
  padding-left: var(--spacing-lg) !important;
}
.u-pl-0 {
  padding-left: 0 !important;
}

.u-pr-sm {
  padding-right: var(--spacing-sm) !important;
}
.u-pr-md {
  padding-right: var(--spacing-md) !important;
}
.u-pr-lg {
  padding-right: var(--spacing-lg) !important;
}
.u-pr-0 {
  padding-right: 0 !important;
}

.u-px-sm {
  padding-left: var(--spacing-sm) !important;
  padding-right: var(--spacing-sm) !important;
}
.u-px-md {
  padding-left: var(--spacing-md) !important;
  padding-right: var(--spacing-md) !important;
}
.u-px-lg {
  padding-left: var(--spacing-lg) !important;
  padding-right: var(--spacing-lg) !important;
}

.u-py-sm {
  padding-top: var(--spacing-sm) !important;
  padding-bottom: var(--spacing-sm) !important;
}
.u-py-md {
  padding-top: var(--spacing-md) !important;
  padding-bottom: var(--spacing-md) !important;
}
.u-py-lg {
  padding-top: var(--spacing-lg) !important;
  padding-bottom: var(--spacing-lg) !important;
}

/* ============================================
    Width / Height
============================================ */
.u-w-full {
  width: 100% !important;
}
.u-w-auto {
  width: auto !important;
}
.u-h-full {
  height: 100% !important;
}
.u-h-auto {
  height: auto !important;
}
.u-w-fit {
  width: fit-content !important;
}

/* ============================================
    Position
============================================ */
.u-relative {
  position: relative !important;
}
.u-absolute {
  position: absolute !important;
}
.u-fixed {
  position: fixed !important;
}
.u-sticky {
  position: sticky !important;
}

/* ============================================
    Overflow
============================================ */
.u-overflow-hidden {
  overflow: hidden !important;
}
.u-overflow-auto {
  overflow: auto !important;
}
.u-overflow-scroll {
  overflow: scroll !important;
}
.u-overflow-x-hidden {
  overflow-x: hidden !important;
}

/* ============================================
    Border Radius
============================================ */
.u-rounded-sm {
  border-radius: var(--border-radius-sm) !important;
}
.u-rounded-md {
  border-radius: var(--border-radius-md) !important;
}
.u-rounded-full {
  border-radius: 9999px !important;
}
.u-rounded-none {
  border-radius: 0 !important;
}

/* ============================================
    Border
============================================ */
.u-border {
  border: 1px solid var(--color-border) !important;
}
.u-border-top {
  border-top: 1px solid var(--color-border) !important;
}
.u-border-bottom {
  border-bottom: 1px solid var(--color-border) !important;
}
.u-border-none {
  border: none !important;
}

/* ============================================
    Cursor
============================================ */
.u-pointer {
  cursor: pointer !important;
}
.u-default {
  cursor: default !important;
}

/* ============================================
    Opacity
============================================ */
.u-opacity-0 {
  opacity: 0 !important;
}
.u-opacity-50 {
  opacity: 0.5 !important;
}
.u-opacity-100 {
  opacity: 1 !important;
}

/* ============================================
    Object Fit（画像用）
============================================ */
.u-object-cover {
  object-fit: cover !important;
}
.u-object-contain {
  object-fit: contain !important;
}

/* ============================================
    Transition
============================================ */
.u-transition {
  transition: var(--transition-base) !important;
}

/* ============================================
    Container（中央寄せ）
============================================ */
.u-container {
  width: 100%;
  margin: 0 auto;
}

/* ============================================
    Link
============================================ */
.u-no-link {
  pointer-events: none;
  cursor: default;
}