/* ================================
  Snow Monkey向け Utility CSS 雛形
  Breakpoints:
  - SP: <= 599px
  - TB: 600px - 1023px
  - PC: >= 1024px
================================ */

/* ---------
  0) 便利：ブロック全般で効かせやすい
--------- */
:where(.u-txt, .u-m) {
 /* 特に何もしない。クラスグループ用 */
}


/* ---------
  1) 文字サイズ（font-size）
  ※ rem基準：1rem=16px想定
--------- */
/* PC */
.u-fs-12 {
 font-size: .75rem;
}

.u-fs-14 {
 font-size: .875rem;
}

.u-fs-16 {
 font-size: 1rem;
}

.u-fs-18 {
 font-size: 1.125rem;
}

.u-fs-20 {
 font-size: 1.25rem;
}

.u-fs-24 {
 font-size: 1.5rem;
}

.u-fs-28 {
 font-size: 1.75rem;
}

.u-fs-32 {
 font-size: 2rem;
}

/* TB以下 */
@media (max-width: 1023px) {
 .u-fs-tb-12 {
  font-size: .75rem;
 }

 .u-fs-tb-14 {
  font-size: .875rem;
 }

 .u-fs-tb-16 {
  font-size: 1rem;
 }

 .u-fs-tb-18 {
  font-size: 1.125rem;
 }

 .u-fs-tb-20 {
  font-size: 1.25rem;
 }

 .u-fs-tb-24 {
  font-size: 1.5rem;
 }
}

/* SPのみ */
@media (max-width: 599px) {
 .u-fs-sp-12 {
  font-size: .75rem;
 }

 .u-fs-sp-14 {
  font-size: .875rem;
 }

 .u-fs-sp-16 {
  font-size: 1rem;
 }

 .u-fs-sp-18 {
  font-size: 1.125rem;
 }

 .u-fs-sp-20 {
  font-size: 1.25rem;
 }
}

/* ---------
  2) 文字揃え（text-align）
  Gutenbergの has-text-align-* に勝つため important
--------- */
/* PC */
.u-ta-left {
 text-align: left !important;
}

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

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

/* TB以下 */
@media (max-width: 1023px) {
 .u-ta-tb-left {
  text-align: left !important;
 }

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

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

/* SPのみ */
@media (max-width: 599px) {
 .u-ta-sp-left {
  text-align: left !important;
 }

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

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

/* ---------
  3) 余白（margin）
  - mt/mb/ml/mr: 方向
  - 数字：px
  - レスポンシブは -tb / -sp を付ける
--------- */
/* PC: margin-top */
.u-mt-0 {
 margin-top: 0 !important;
}

.u-mt-8 {
 margin-top: 8px !important;
}

.u-mt-16 {
 margin-top: 16px !important;
}

.u-mt-24 {
 margin-top: 24px !important;
}

.u-mt-32 {
 margin-top: 32px !important;
}

.u-mt-40 {
 margin-top: 40px !important;
}

.u-mt-48 {
 margin-top: 48px !important;
}

.u-mt-56 {
 margin-top: 56px !important;
}

.u-mt-64 {
 margin-top: 64px !important;
}

.u-mt-72 {
 margin-top: 72px !important;
}

.u-mt-80 {
 margin-top: 80px !important;
}

.u-mt-88 {
 margin-top: 88px !important;
}

.u-mt-96 {
 margin-top: 96px !important;
}

.u-mt-104 {
 margin-top: 104px !important;
}

.u-mt-112 {
 margin-top: 112px !important;
}

.u-mt-120 {
 margin-top: 120px !important;
}

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

.u-mb-8 {
 margin-bottom: 8px !important;
}

.u-mb-16 {
 margin-bottom: 16px !important;
}

.u-mb-24 {
 margin-bottom: 24px !important;
}

.u-mb-32 {
 margin-bottom: 32px !important;
}

.u-mb-40 {
 margin-bottom: 40px !important;
}

.u-mb-48 {
 margin-bottom: 48px !important;
}

.u-mb-56 {
 margin-bottom: 56px !important;
}

.u-mb-64 {
 margin-bottom: 64px !important;
}

.u-mb-72 {
 margin-bottom: 72px !important;
}

.u-mb-80 {
 margin-bottom: 80px !important;
}

.u-mb-88 {
 margin-bottom: 88px !important;
}

.u-mb-96 {
 margin-bottom: 96px !important;
}

.u-mb-104 {
 margin-bottom: 104px !important;
}

.u-mb-112 {
 margin-bottom: 112px !important;
}

.u-mb-120 {
 margin-bottom: 120px !important;
}

/* TB以下 */
@media (max-width: 1023px) {
 .u-mt-tb-0 {
  margin-top: 0 !important;
 }

 .u-mt-tb-8 {
  margin-top: 8px !important;
 }

 .u-mt-tb-16 {
  margin-top: 16px !important;
 }

 .u-mt-tb-24 {
  margin-top: 24px !important;
 }

 .u-mt-tb-32 {
  margin-top: 32px !important;
 }

 .u-mt-tb-40 {
  margin-top: 40px !important;
 }

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

 .u-mb-tb-8 {
  margin-bottom: 8px !important;
 }

 .u-mb-tb-16 {
  margin-bottom: 16px !important;
 }

 .u-mb-tb-24 {
  margin-bottom: 24px !important;
 }

 .u-mb-tb-32 {
  margin-bottom: 32px !important;
 }

 .u-mb-tb-40 {
  margin-bottom: 40px !important;
 }

 .u-mb-tb-48 {
  margin-bottom: 48px !important;
 }

 .u-mb-tb-56 {
  margin-bottom: 56px !important;
 }

 .u-mb-tb-64 {
  margin-bottom: 64px !important;
 }

 .u-mb-tb-72 {
  margin-bottom: 72px !important;
 }

 .u-mb-tb-80 {
  margin-bottom: 80px !important;
 }

 .u-mb-tb-88 {
  margin-bottom: 88px !important;
 }

 .u-mb-tb-96 {
  margin-bottom: 96px !important;
 }

 .u-mb-tb-104 {
  margin-bottom: 104px !important;
 }

 .u-mb-tb-112 {
  margin-bottom: 112px !important;
 }

 .u-mb-tb-120 {
  margin-bottom: 120px !important;
 }
}

/* SPのみ */
@media (max-width:599px) {
 .u-mt-sp-0 {
  margin-top: 0 !important;
 }

 .u-mt-sp-8 {
  margin-top: 8px !important;
 }

 .u-mt-sp-16 {
  margin-top: 16px !important;
 }

 .u-mt-sp-24 {
  margin-top: 24px !important;
 }

 .u-mt-sp-32 {
  margin-top: 32px !important;
 }

 .u-mt-sp-40 {
  margin-top: 40px !important;
 }

 .u-mt-sp-48 {
  margin-top: 48px !important;
 }

 .u-mt-sp-56 {
  margin-top: 56px !important;
 }

 .u-mt-sp-64 {
  margin-top: 64px !important;
 }

 .u-mt-sp-72 {
  margin-top: 72px !important;
 }

 .u-mt-sp-80 {
  margin-top: 80px !important;
 }

 .u-mt-sp-88 {
  margin-top: 88px !important;
 }

 .u-mt-sp-96 {
  margin-top: 96px !important;
 }

 .u-mt-sp-104 {
  margin-top: 104px !important;
 }

 .u-mt-sp-112 {
  margin-top: 112px !important;
 }

 .u-mt-sp-120 {
  margin-top: 120px !important;
 }

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

 .u-mb-sp-8 {
  margin-bottom: 8px !important;
 }

 .u-mb-sp-16 {
  margin-bottom: 16px !important;
 }

 .u-mb-sp-24 {
  margin-bottom: 24px !important;
 }

 .u-mb-sp-32 {
  margin-bottom: 32px !important;
 }

 .u-mb-sp-40 {
  margin-bottom: 40px !important;
 }

 .u-mb-sp-48 {
  margin-bottom: 48px !important;
 }

 .u-mb-sp-56 {
  margin-bottom: 56px !important;
 }

 .u-mb-sp-64 {
  margin-bottom: 64px !important;
 }

 .u-mb-sp-72 {
  margin-bottom: 72px !important;
 }

 .u-mb-sp-80 {
  margin-bottom: 80px !important;
 }

 .u-mb-sp-88 {
  margin-bottom: 88px !important;
 }

 .u-mb-sp-96 {
  margin-bottom: 96px !important;
 }

 .u-mb-sp-104 {
  margin-bottom: 104px !important;
 }

 .u-mb-sp-112 {
  margin-bottom: 112px !important;
 }

 .u-mb-sp-120 {
  margin-bottom: 120px !important;
 }
}

/* =============================
   Responsive Display Utilities
   SP:  <= 599px
   TB:  600px - 1023px
   PC:  >= 1024px
============================= */

/* SPだけ非表示 */
@media (max-width: 599px) {
 .u-hide-sp {
  display: none;
 }
}

/* TBだけ非表示 */
/* @media (min-width:600px) and (max-width:1023px) {
 .u-hide-tb {
  display: none;
 }
} */

/* PCだけ非表示 */
@media (min-width:600px) {
 .u-hide-pc {
  display: none;
 }
}