@charset "utf-8";

/* ======================================================
  utilities.css
  - 単機能・意味を持たないクラス群
  - SP: 〜1024px @media screen and (max-width: 1024px) {
  - PC: 1025px〜 @media screen and (min-width: 1025px) {
====================================================== */

/* text-align */
.u-ta-l { text-align: left; }
.u-ta-c { text-align: center; }
.u-ta-r { text-align: right; }

/* float */
.clearfix { display: flow-root; }
.clearfix::after { content: ""; display: block; clear: both;}
.fl_left  { float: left; }
.fl_right { float: right; }

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

/* font-size */
.u-xxs   { font-size: var(--fs-xxs); }
.u-xs    { font-size: var(--fs-xs); }
.u-sm    { font-size: var(--fs-sm); }
.u-md    { font-size: var(--fs-md); }
.u-lg    { font-size: var(--fs-lg); }
.u-xl    { font-size: var(--fs-xl); }
.u-xxl   { font-size: var(--fs-xxl); }
.u-xxxl  { font-size: var(--fs-xxxl); }
.u-xxxxl { font-size: var(--fs-xxxxl); }


/* line-height */
.u-lh-tight { line-height: var(--lh-tight); }
.u-lh-slim  { line-height: var(--lh-slim); }
.u-lh-fit   { line-height: var(--lh-fit); }
.u-lh-snug  { line-height: var(--lh-snug); }
.u-lh-base  { line-height: var(--lh-base); }
.u-lh-loose { line-height: var(--lh-loose); }
.u-lh-relax { line-height: var(--lh-relax); }

/* color */
.u-black { color: var(--color-black); }
.u-white { color: var(--color-white); }
.u-red   { color: var(--color-red); }
.u-pink  { color: var(--color-pink); }

/* margin */
.u-mt-0   { margin-top: 0 !important; }
.u-mt-xs  { margin-top: var(--space-xs); }
.u-mt-sm  { margin-top: var(--space-sm); }
.u-mt-md  { margin-top: var(--space-md); }
.u-mt-lg  { margin-top: var(--space-lg); }
.u-mt-xl  { margin-top: var(--space-xl); }
.u-mt-xxl { margin-top: var(--space-xxl); }
.u-mt-xxxl { margin-top: var(--space-xxxl); }

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

.u-mtb-0    { margin: 0 !important; }
.u-mtb-xs   { margin: var(--space-xs) 0; }
.u-mtb-sm   { margin: var(--space-sm) 0; }
.u-mtb-md   { margin: var(--space-md) 0; }
.u-mtb-lg   { margin: var(--space-lg) 0; }
.u-mtb-xl   { margin: var(--space-xl) 0; }
.u-mtb-xxl  { margin: var(--space-xxl) 0; }
.u-mtb-xxxl { margin: var(--space-xxxl) 0; }


/* padding */
.u-pt-0    { padding-top: 0 !important; }
.u-pt-xs   { padding-top: var(--space-xs); }
.u-pt-sm   { padding-top: var(--space-sm); }
.u-pt-md   { padding-top: var(--space-md); }
.u-pt-lg   { padding-top: var(--space-lg); }
.u-pt-xl   { padding-top: var(--space-xl); }
.u-pt-xxl  { padding-top: var(--space-xxl); }
.u-pt-xxxl { padding-top: var(--space-xxxl); }

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

.u-ptb-0    { padding: 0 !important; }
.u-ptb-xs   { padding: var(--space-xs) 0; }
.u-ptb-sm   { padding: var(--space-sm) 0; }
.u-ptb-md   { padding: var(--space-md) 0; }
.u-ptb-lg   { padding: var(--space-lg) 0; }
.u-ptb-xl   { padding: var(--space-xl) 0; }
.u-ptb-xxl  { padding: var(--space-xxl) 0; }
.u-ptb-xxxl { padding: var(--space-xxxl) 0; }

@media screen and (max-width: 1024px) {
  .pc-only { display: none; }
  .sp-only { display: block; }

}

@media screen and (min-width: 1025px) {
.pc-only { display: block; }
.sp-only { display: none; }

}