@charset "utf-8";
/*===========================================================================

  utility.css
  汎用ユーティリティクラス。すべて !important を付与します。

  【ブレークポイント】
  接尾辞なし  : スマホ（〜479px）基本
  -sm        : 480px以上
  -md        : タブレット以上（768px〜）
  -lg        : PC以上（1024px〜）

  【命名規則】
  u-(種類)-(方向)-(数値)-(bp)
  例: u-m-t-5 / u-text-center-md / u-hidden-lg

===========================================================================*/


/* ディスプレイ
===========================================================================*/
.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-hidden       { display: none !important; }

@media (min-width: 768px) {
  .u-block-md        { display: block !important; }
  .u-inline-md       { display: inline !important; }
  .u-inline-block-md { display: inline-block !important; }
  .u-flex-md         { display: flex !important; }
  .u-inline-flex-md  { display: inline-flex !important; }
  .u-grid-md         { display: grid !important; }
  .u-hidden-md       { display: none !important; }
}
@media (min-width: 1024px) {
  .u-block-lg        { display: block !important; }
  .u-inline-lg       { display: inline !important; }
  .u-inline-block-lg { display: inline-block !important; }
  .u-flex-lg         { display: flex !important; }
  .u-inline-flex-lg  { display: inline-flex !important; }
  .u-grid-lg         { display: grid !important; }
  .u-hidden-lg       { display: none !important; }
}


/* レスポンシブ表示切替
===========================================================================*/
/*
  用途別ショートカット（既存 u-hidden-* との対比）
  ┌─────────────────┬──────────────────────────────────────┐
  │ .u-sp-only      │ SPのみ表示（768px以上で非表示）        │
  │                 │ ※ .u-hidden-md と同義                │
  ├─────────────────┼──────────────────────────────────────┤
  │ .u-pc-only      │ タブレット以上のみ表示（767px以下で非表示）│
  ├─────────────────┼──────────────────────────────────────┤
  │ .u-lg-only      │ 1024px以上のみ表示（1023px以下で非表示）│
  │                 │ ※ .u-hidden-lg の逆                  │
  ├─────────────────┼──────────────────────────────────────┤
  │ .u-tab-only     │ タブレットのみ表示（SP・PCで非表示）   │
  └─────────────────┴──────────────────────────────────────┘
*/

/* SPのみ表示 ─ 768px以上で非表示 */
@media (min-width: 768px) {
  .u-sp-only { display: none !important; }
}

/* タブレット以上のみ表示 ─ 767px以下で非表示 */
@media (max-width: 767px) {
  .u-pc-only { display: none !important; }
}

/* 1024px以上のみ表示 ─ 1023px以下で非表示 */
@media (max-width: 1023px) {
  .u-lg-only { display: none !important; }
}

/* タブレットのみ表示 ─ SP（767px以下）・PC（1024px以上）で非表示 */
@media (max-width: 767px), (min-width: 1024px) {
  .u-tab-only { display: none !important; }
}


/* Flexbox
===========================================================================*/
.u-flex-wrap     { flex-wrap: wrap !important; }
.u-flex-nowrap   { flex-wrap: nowrap !important; }
.u-flex-col      { flex-direction: column !important; }
.u-flex-row      { flex-direction: row !important; }
.u-items-start   { align-items: flex-start !important; }
.u-items-center  { align-items: center !important; }
.u-items-end     { align-items: flex-end !important; }
.u-justify-start   { justify-content: flex-start !important; }
.u-justify-center  { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-end     { justify-content: flex-end !important; }

@media (min-width: 768px) {
  .u-flex-wrap-md     { flex-wrap: wrap !important; }
  .u-flex-nowrap-md   { flex-wrap: nowrap !important; }
  .u-flex-col-md      { flex-direction: column !important; }
  .u-flex-row-md      { flex-direction: row !important; }
  .u-items-start-md   { align-items: flex-start !important; }
  .u-items-center-md  { align-items: center !important; }
  .u-items-end-md     { align-items: flex-end !important; }
  .u-justify-center-md  { justify-content: center !important; }
  .u-justify-between-md { justify-content: space-between !important; }
  .u-justify-end-md     { justify-content: flex-end !important; }
}
@media (min-width: 1024px) {
  .u-flex-row-lg      { flex-direction: row !important; }
  .u-items-center-lg  { align-items: center !important; }
  .u-justify-between-lg { justify-content: space-between !important; }
}


/* 幅・高さ
===========================================================================*/
.u-w-auto { width: auto !important; }
.u-w-full { width: 100% !important; }
.u-w-half { width: 50% !important; }
.u-w-1-3  { width: 33.333% !important; }
.u-w-2-3  { width: 66.666% !important; }
.u-w-1-4  { width: 25% !important; }
.u-w-3-4  { width: 75% !important; }
.u-h-full { height: 100% !important; }

@media (min-width: 768px) {
  .u-w-auto-md { width: auto !important; }
  .u-w-full-md { width: 100% !important; }
  .u-w-half-md { width: 50% !important; }
  .u-w-1-3-md  { width: 33.333% !important; }
  .u-w-2-3-md  { width: 66.666% !important; }
  .u-w-1-4-md  { width: 25% !important; }
  .u-w-3-4-md  { width: 75% !important; }
}
@media (min-width: 1024px) {
  .u-w-auto-lg { width: auto !important; }
  .u-w-full-lg { width: 100% !important; }
  .u-w-half-lg { width: 50% !important; }
  .u-w-1-3-lg  { width: 33.333% !important; }
  .u-w-1-4-lg  { width: 25% !important; }
}


/* テキスト配置
===========================================================================*/
.u-text-left   { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right  { text-align: right !important; }

@media (min-width: 768px) {
  .u-text-left-md   { text-align: left !important; }
  .u-text-center-md { text-align: center !important; }
  .u-text-right-md  { text-align: right !important; }
}
@media (min-width: 1024px) {
  .u-text-left-lg   { text-align: left !important; }
  .u-text-center-lg { text-align: center !important; }
  .u-text-right-lg  { text-align: right !important; }
}


/* フォントサイズ
===========================================================================*/
.u-text-12   { font-size: var(--text-12) !important; }
.u-text-14   { font-size: var(--text-14) !important; }
.u-text-15   { font-size: var(--text-15) !important; }
.u-text-16 { font-size: var(--text-16) !important; }
.u-text-18   { font-size: var(--text-18) !important; }
.u-text-20   { font-size: var(--text-20) !important; }
.u-text-24  { font-size: var(--text-24) !important; }
.u-text-30  { font-size: var(--text-30) !important; }
.u-text-36  { font-size: var(--text-36) !important; }

@media (min-width: 768px) {
  .u-text-12-md   { font-size: var(--text-12) !important; }
  .u-text-14-md   { font-size: var(--text-14) !important; }
  .u-text-16-md { font-size: var(--text-16) !important; }
  .u-text-18-md   { font-size: var(--text-18) !important; }
  .u-text-20-md   { font-size: var(--text-20) !important; }
  .u-text-24-md  { font-size: var(--text-24) !important; }
  .u-text-30-md  { font-size: var(--text-30) !important; }
  .u-text-36-md  { font-size: var(--text-36) !important; }
}
@media (min-width: 1024px) {
  .u-text-12-lg   { font-size: var(--text-12) !important; }
  .u-text-14-lg   { font-size: var(--text-14) !important; }
  .u-text-16-lg { font-size: var(--text-16) !important; }
  .u-text-18-lg   { font-size: var(--text-18) !important; }
  .u-text-20-lg   { font-size: var(--text-20) !important; }
  .u-text-24-lg  { font-size: var(--text-24) !important; }
  .u-text-30-lg  { font-size: var(--text-30) !important; }
  .u-text-36-lg  { font-size: var(--text-36) !important; }
}


/* フォントウェイト
===========================================================================*/
.u-font-normal { font-weight: 400 !important; }
.u-font-bold   { font-weight: 700 !important; }
.u-font-black  { font-weight: 900 !important; }


/* フォントファミリー
===========================================================================*/
.u-font-sans  { font-family: var(--font-sans) !important; }
.u-font-serif { font-family: var(--font-serif) !important; }


/* テキスト装飾
===========================================================================*/
.u-underline     { text-decoration: underline !important; }
.u-line-through  { text-decoration: line-through !important; }
.u-no-underline  { text-decoration: none !important; }
.u-uppercase     { text-transform: uppercase !important; }
.u-lowercase     { text-transform: lowercase !important; }
.u-capitalize    { text-transform: capitalize !important; }


/* カラー
===========================================================================*/
.u-color-primary { color: var(--color-primary) !important; }
.u-color-accent  { color: var(--color-accent) !important; }
.u-color-error   { color: var(--color-error) !important; }
.u-color-red     { color: var(--color-red) !important; }
.u-color-gray    { color: #666 !important; }
.u-color-white   { color: #fff !important; }
.u-bg-primary    { background-color: var(--color-primary) !important; }
.u-bg-light      { background-color: var(--color-bg-light) !important; }
.u-bg-white      { background-color: #fff !important; }
.u-bg-black      { background-color: #000 !important; }
.u-bg-img        { background-image:url(../images/gallery_bg.jpg) !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; }


/* ポジション
===========================================================================*/
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed    { position: fixed !important; }

/* ボーダー
===========================================================================*/
.u-border   { border: 1px solid var(--color-border) !important; }
.u-border-t { border-top: 1px solid var(--color-border) !important; }
.u-border-b { border-bottom: 1px solid var(--color-border) !important; }
.u-border-l { border-left: 1px solid var(--color-border) !important; }
.u-border-r { border-right: 1px solid var(--color-border) !important; }
.u-border-x { border-left: 1px solid var(--color-border) !important; border-right: 1px solid var(--color-border) !important; }
.u-border-y { border-top: 1px solid var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; }
.u-border-none { border: none !important; }

.u-border-red   { border: 2px solid var(--color-red) !important; }

/* 角丸
===========================================================================*/
.u-rounded-none { border-radius: 0 !important; }
.u-rounded-sm   { border-radius: 2px !important; }
.u-rounded      { border-radius: 4px !important; }
.u-rounded-md   { border-radius: 6px !important; }
.u-rounded-lg   { border-radius: 8px !important; }
.u-rounded-xl   { border-radius: 12px !important; }
.u-rounded-2xl  { border-radius: 16px !important; }
.u-rounded-full { border-radius: 9999px !important; }
.u-rounded-t    { border-radius: 4px 4px 0 0 !important; }
.u-rounded-b    { border-radius: 0 0 4px 4px !important; }
.u-rounded-l    { border-radius: 4px 0 0 4px !important; }
.u-rounded-r    { border-radius: 0 4px 4px 0 !important; }

/* その他
===========================================================================*/
.u-object-cover  { object-fit: cover !important; }
.u-object-contain { object-fit: contain !important; }
.u-indent        { padding-left: 1em !important; text-indent: -1em !important; }
.u-truncate      { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }


/* マージン
===========================================================================*/
.u-m-0    { margin: 0 !important; }
.u-m-auto { margin: auto !important; }
.u-m-x-auto { margin-left: auto !important; margin-right: auto !important; }
/* margin-top */
.u-m-t-0  { margin-top: 0 !important; }
.u-m-t-1  { margin-top: var(--s-1) !important; }
.u-m-t-2  { margin-top: var(--s-2) !important; }
.u-m-t-3  { margin-top: var(--s-3) !important; }
.u-m-t-4  { margin-top: var(--s-4) !important; }
.u-m-t-5  { margin-top: var(--s-5) !important; }
.u-m-t-6  { margin-top: var(--s-6) !important; }
.u-m-t-8  { margin-top: var(--s-8) !important; }
.u-m-t-10 { margin-top: var(--s-10) !important; }
.u-m-t-12 { margin-top: var(--s-12) !important; }
.u-m-t-16 { margin-top: var(--s-16) !important; }
.u-m-t-20 { margin-top: var(--s-20) !important; }
.u-m-t-24 { margin-top: var(--s-24) !important; }
.u-m-t-auto { margin-top: auto !important; }
/* margin-bottom */
.u-m-b-0  { margin-bottom: 0 !important; }
.u-m-b-1  { margin-bottom: var(--s-1) !important; }
.u-m-b-2  { margin-bottom: var(--s-2) !important; }
.u-m-b-3  { margin-bottom: var(--s-3) !important; }
.u-m-b-4  { margin-bottom: var(--s-4) !important; }
.u-m-b-5  { margin-bottom: var(--s-5) !important; }
.u-m-b-6  { margin-bottom: var(--s-6) !important; }
.u-m-b-8  { margin-bottom: var(--s-8) !important; }
.u-m-b-10 { margin-bottom: var(--s-10) !important; }
.u-m-b-12 { margin-bottom: var(--s-12) !important; }
.u-m-b-16 { margin-bottom: var(--s-16) !important; }
.u-m-b-20 { margin-bottom: var(--s-20) !important; }
.u-m-b-24 { margin-bottom: var(--s-24) !important; }
.u-m-b-auto { margin-bottom: auto !important; }
/* margin-left / right */
.u-m-l-0    { margin-left: 0 !important; }
.u-m-l-auto { margin-left: auto !important; }
.u-m-r-0    { margin-right: 0 !important; }
.u-m-r-auto { margin-right: auto !important; }

@media (min-width: 480px) {
  .u-m-0-sm     { margin: 0 !important; }
  .u-m-auto-sm  { margin: auto !important; }
  .u-m-x-auto-sm { margin-left: auto !important; margin-right: auto !important; }
  /* margin-top */
  .u-m-t-0-sm  { margin-top: 0 !important; }
  .u-m-t-1-sm  { margin-top: var(--s-1) !important; }
  .u-m-t-2-sm  { margin-top: var(--s-2) !important; }
  .u-m-t-3-sm  { margin-top: var(--s-3) !important; }
  .u-m-t-4-sm  { margin-top: var(--s-4) !important; }
  .u-m-t-5-sm  { margin-top: var(--s-5) !important; }
  .u-m-t-6-sm  { margin-top: var(--s-6) !important; }
  .u-m-t-8-sm  { margin-top: var(--s-8) !important; }
  .u-m-t-10-sm { margin-top: var(--s-10) !important; }
  .u-m-t-12-sm { margin-top: var(--s-12) !important; }
  .u-m-t-16-sm { margin-top: var(--s-16) !important; }
  .u-m-t-20-sm { margin-top: var(--s-20) !important; }
  .u-m-t-24-sm { margin-top: var(--s-24) !important; }
  .u-m-t-auto-sm { margin-top: auto !important; }
  /* margin-bottom */
  .u-m-b-0-sm  { margin-bottom: 0 !important; }
  .u-m-b-1-sm  { margin-bottom: var(--s-1) !important; }
  .u-m-b-2-sm  { margin-bottom: var(--s-2) !important; }
  .u-m-b-3-sm  { margin-bottom: var(--s-3) !important; }
  .u-m-b-4-sm  { margin-bottom: var(--s-4) !important; }
  .u-m-b-5-sm  { margin-bottom: var(--s-5) !important; }
  .u-m-b-6-sm  { margin-bottom: var(--s-6) !important; }
  .u-m-b-8-sm  { margin-bottom: var(--s-8) !important; }
  .u-m-b-10-sm { margin-bottom: var(--s-10) !important; }
  .u-m-b-12-sm { margin-bottom: var(--s-12) !important; }
  .u-m-b-16-sm { margin-bottom: var(--s-16) !important; }
  .u-m-b-20-sm { margin-bottom: var(--s-20) !important; }
  .u-m-b-24-sm { margin-bottom: var(--s-24) !important; }
  .u-m-b-auto-sm { margin-bottom: auto !important; }
  /* margin-left / right */
  .u-m-l-0-sm    { margin-left: 0 !important; }
  .u-m-l-auto-sm { margin-left: auto !important; }
  .u-m-r-0-sm    { margin-right: 0 !important; }
  .u-m-r-auto-sm { margin-right: auto !important; }
}
@media (min-width: 768px) {
  .u-m-0-md     { margin: 0 !important; }
  .u-m-auto-md  { margin: auto !important; }
  .u-m-x-auto-md { margin-left: auto !important; margin-right: auto !important; }
  /* margin-top */
  .u-m-t-0-md  { margin-top: 0 !important; }
  .u-m-t-1-md  { margin-top: var(--s-1) !important; }
  .u-m-t-2-md  { margin-top: var(--s-2) !important; }
  .u-m-t-3-md  { margin-top: var(--s-3) !important; }
  .u-m-t-4-md  { margin-top: var(--s-4) !important; }
  .u-m-t-5-md  { margin-top: var(--s-5) !important; }
  .u-m-t-6-md  { margin-top: var(--s-6) !important; }
  .u-m-t-8-md  { margin-top: var(--s-8) !important; }
  .u-m-t-10-md { margin-top: var(--s-10) !important; }
  .u-m-t-12-md { margin-top: var(--s-12) !important; }
  .u-m-t-16-md { margin-top: var(--s-16) !important; }
  .u-m-t-20-md { margin-top: var(--s-20) !important; }
  .u-m-t-24-md { margin-top: var(--s-24) !important; }
  .u-m-t-auto-md { margin-top: auto !important; }
  /* margin-bottom */
  .u-m-b-0-md  { margin-bottom: 0 !important; }
  .u-m-b-1-md  { margin-bottom: var(--s-1) !important; }
  .u-m-b-2-md  { margin-bottom: var(--s-2) !important; }
  .u-m-b-3-md  { margin-bottom: var(--s-3) !important; }
  .u-m-b-4-md  { margin-bottom: var(--s-4) !important; }
  .u-m-b-5-md  { margin-bottom: var(--s-5) !important; }
  .u-m-b-6-md  { margin-bottom: var(--s-6) !important; }
  .u-m-b-8-md  { margin-bottom: var(--s-8) !important; }
  .u-m-b-10-md { margin-bottom: var(--s-10) !important; }
  .u-m-b-12-md { margin-bottom: var(--s-12) !important; }
  .u-m-b-16-md { margin-bottom: var(--s-16) !important; }
  .u-m-b-20-md { margin-bottom: var(--s-20) !important; }
  .u-m-b-24-md { margin-bottom: var(--s-24) !important; }
	.u-m-b-50-md { margin-bottom: var(--s-50) !important; }
  .u-m-b-auto-md { margin-bottom: auto !important; }
  /* margin-left / right */
  .u-m-l-0-md    { margin-left: 0 !important; }
  .u-m-l-auto-md { margin-left: auto !important; }
  .u-m-r-0-md    { margin-right: 0 !important; }
  .u-m-r-auto-md { margin-right: auto !important; }
}
@media (min-width: 1024px) {
  .u-m-0-lg     { margin: 0 !important; }
  .u-m-auto-lg  { margin: auto !important; }
  .u-m-x-auto-lg { margin-left: auto !important; margin-right: auto !important; }
  /* margin-top */
  .u-m-t-0-lg  { margin-top: 0 !important; }
  .u-m-t-4-lg  { margin-top: var(--s-4) !important; }
  .u-m-t-5-lg  { margin-top: var(--s-5) !important; }
  .u-m-t-8-lg  { margin-top: var(--s-8) !important; }
  .u-m-t-10-lg { margin-top: var(--s-10) !important; }
  .u-m-t-12-lg { margin-top: var(--s-12) !important; }
  .u-m-t-16-lg { margin-top: var(--s-16) !important; }
  .u-m-t-20-lg { margin-top: var(--s-20) !important; }
  .u-m-t-auto-lg { margin-top: auto !important; }
  /* margin-bottom */
  .u-m-b-0-lg  { margin-bottom: 0 !important; }
  .u-m-b-4-lg  { margin-bottom: var(--s-4) !important; }
  .u-m-b-5-lg  { margin-bottom: var(--s-5) !important; }
  .u-m-b-8-lg  { margin-bottom: var(--s-8) !important; }
  .u-m-b-10-lg { margin-bottom: var(--s-10) !important; }
  .u-m-b-12-lg { margin-bottom: var(--s-12) !important; }
  .u-m-b-16-lg { margin-bottom: var(--s-16) !important; }
  .u-m-b-20-lg { margin-bottom: var(--s-20) !important; }
  .u-m-b-auto-lg { margin-bottom: auto !important; }
  /* margin-left / right */
  .u-m-l-0-lg    { margin-left: 0 !important; }
  .u-m-l-auto-lg { margin-left: auto !important; }
  .u-m-r-0-lg    { margin-right: 0 !important; }
  .u-m-r-auto-lg { margin-right: auto !important; }
}


/* パディング
===========================================================================*/
.u-p-0  { padding: 0 !important; }
.u-p-2  { padding: var(--s-2) !important; }
.u-p-4  { padding: var(--s-4) !important; }
.u-p-5  { padding: var(--s-5) !important; }
.u-p-6  { padding: var(--s-6) !important; }
.u-p-8  { padding: var(--s-8) !important; }
.u-p-10 { padding: var(--s-10) !important; }
.u-p-12 { padding: var(--s-12) !important; }

.u-p-t-0  { padding-top: 0 !important; }
.u-p-t-5  { padding-top: var(--s-5) !important; }
.u-p-t-10 { padding-top: var(--s-10) !important; }
.u-p-b-0  { padding-bottom: 0 !important; }
.u-p-b-5  { padding-bottom: var(--s-5) !important; }
.u-p-b-10 { padding-bottom: var(--s-10) !important; }
.u-p-l-0  { padding-left: 0 !important; }
.u-p-r-0  { padding-right: 0 !important; }

.u-p-l-0  { padding-left: 0 !important; }
.u-p-l-2  { padding-left: var(--s-2) !important; }
.u-p-l-4  { padding-left: var(--s-4) !important; }
.u-p-l-5  { padding-left: var(--s-5) !important; }
.u-p-l-6  { padding-left: var(--s-6) !important; }
.u-p-l-8  { padding-left: var(--s-8) !important; }
.u-p-l-10 { padding-left: var(--s-10) !important; }
.u-p-l-12 { padding-left: var(--s-12) !important; }
.u-p-l-20 { padding-left: var(--s-20) !important; }

.u-p-r-0  { padding-right: 0 !important; }
.u-p-r-2  { padding-right: var(--s-2) !important; }
.u-p-r-4  { padding-right: var(--s-4) !important; }
.u-p-r-5  { padding-right: var(--s-5) !important; }
.u-p-r-6  { padding-right: var(--s-6) !important; }
.u-p-r-8  { padding-right: var(--s-8) !important; }
.u-p-r-10 { padding-right: var(--s-10) !important; }
.u-p-r-12 { padding-right: var(--s-12) !important; }

.u-p-y-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.u-p-y-5  { padding-top: var(--s-5) !important; padding-bottom: var(--s-5) !important; }
.u-p-y-10 { padding-top: var(--s-10) !important; padding-bottom: var(--s-10) !important; }
.u-p-x-0  { padding-left: 0 !important; padding-right: 0 !important; }
.u-p-x-5  { padding-left: var(--s-5) !important; padding-right: var(--s-5) !important; }
.u-p-x-5p  { padding-left: 5% !important; padding-right: 5% !important; }

@media (min-width: 480px) {
  .u-p-0-sm  { padding: 0 !important; }
  .u-p-4-sm  { padding: var(--s-4) !important; }
  .u-p-5-sm  { padding: var(--s-5) !important; }
  .u-p-8-sm  { padding: var(--s-8) !important; }
  .u-p-10-sm { padding: var(--s-10) !important; }
  .u-p-12-sm { padding: var(--s-12) !important; }
  .u-p-t-0-sm  { padding-top: 0 !important; }
  .u-p-t-5-sm  { padding-top: var(--s-5) !important; }
  .u-p-t-10-sm { padding-top: var(--s-10) !important; }
  .u-p-b-0-sm  { padding-bottom: 0 !important; }
  .u-p-b-5-sm  { padding-bottom: var(--s-5) !important; }
  .u-p-b-10-sm { padding-bottom: var(--s-10) !important; }
  .u-p-l-0-sm  { padding-left: 0 !important; }
  .u-p-l-4-sm  { padding-left: var(--s-4) !important; }
  .u-p-l-5-sm  { padding-left: var(--s-5) !important; }
  .u-p-l-8-sm  { padding-left: var(--s-8) !important; }
  .u-p-l-10-sm { padding-left: var(--s-10) !important; }
  .u-p-l-12-sm { padding-left: var(--s-12) !important; }
  .u-p-r-0-sm  { padding-right: 0 !important; }
  .u-p-r-4-sm  { padding-right: var(--s-4) !important; }
  .u-p-r-5-sm  { padding-right: var(--s-5) !important; }
  .u-p-r-8-sm  { padding-right: var(--s-8) !important; }
  .u-p-r-10-sm { padding-right: var(--s-10) !important; }
  .u-p-r-12-sm { padding-right: var(--s-12) !important; }
  .u-p-y-0-sm  { padding-top: 0 !important; padding-bottom: 0 !important; }
  .u-p-y-5-sm  { padding-top: var(--s-5) !important; padding-bottom: var(--s-5) !important; }
  .u-p-y-10-sm { padding-top: var(--s-10) !important; padding-bottom: var(--s-10) !important; }
  .u-p-x-0-sm  { padding-left: 0 !important; padding-right: 0 !important; }
  .u-p-x-5-sm  { padding-left: var(--s-5) !important; padding-right: var(--s-5) !important; }
}
@media (min-width: 768px) {
  .u-p-0-md  { padding: 0 !important; }
  .u-p-4-md  { padding: var(--s-4) !important; }
  .u-p-5-md  { padding: var(--s-5) !important; }
  .u-p-8-md  { padding: var(--s-8) !important; }
  .u-p-10-md { padding: var(--s-10) !important; }
  .u-p-12-md { padding: var(--s-12) !important; }
  .u-p-t-0-md  { padding-top: 0 !important; }
  .u-p-t-5-md  { padding-top: var(--s-5) !important; }
  .u-p-t-10-md { padding-top: var(--s-10) !important; }
  .u-p-b-0-md  { padding-bottom: 0 !important; }
  .u-p-b-5-md  { padding-bottom: var(--s-5) !important; }
  .u-p-b-10-md { padding-bottom: var(--s-10) !important; }
  .u-p-l-0-md  { padding-left: 0 !important; }
  .u-p-l-4-md  { padding-left: var(--s-4) !important; }
  .u-p-l-5-md  { padding-left: var(--s-5) !important; }
  .u-p-l-8-md  { padding-left: var(--s-8) !important; }
  .u-p-l-10-md { padding-left: var(--s-10) !important; }
  .u-p-l-12-md { padding-left: var(--s-12) !important; }
	.u-p-l-20-md { padding-left: var(--s-20) !important; }
  .u-p-r-0-md  { padding-right: 0 !important; }
  .u-p-r-4-md  { padding-right: var(--s-4) !important; }
  .u-p-r-5-md  { padding-right: var(--s-5) !important; }
  .u-p-r-8-md  { padding-right: var(--s-8) !important; }
  .u-p-r-10-md { padding-right: var(--s-10) !important; }
  .u-p-r-12-md { padding-right: var(--s-12) !important; }
  .u-p-y-0-md  { padding-top: 0 !important; padding-bottom: 0 !important; }
  .u-p-y-5-md  { padding-top: var(--s-5) !important; padding-bottom: var(--s-5) !important; }
  .u-p-y-10-md { padding-top: var(--s-10) !important; padding-bottom: var(--s-10) !important; }
  .u-p-x-0-md  { padding-left: 0 !important; padding-right: 0 !important; }
  .u-p-x-5-md  { padding-left: var(--s-5) !important; padding-right: var(--s-5) !important; }
}
@media (min-width: 1024px) {
  .u-p-0-lg  { padding: 0 !important; }
  .u-p-5-lg  { padding: var(--s-5) !important; }
  .u-p-10-lg { padding: var(--s-10) !important; }
  .u-p-t-0-lg  { padding-top: 0 !important; }
  .u-p-t-10-lg { padding-top: var(--s-10) !important; }
  .u-p-b-0-lg  { padding-bottom: 0 !important; }
  .u-p-b-10-lg { padding-bottom: var(--s-10) !important; }
  .u-p-l-0-lg  { padding-left: 0 !important; }
  .u-p-l-5-lg  { padding-left: var(--s-5) !important; }
  .u-p-l-10-lg { padding-left: var(--s-10) !important; }
  .u-p-r-0-lg  { padding-right: 0 !important; }
  .u-p-r-5-lg  { padding-right: var(--s-5) !important; }
  .u-p-r-10-lg { padding-right: var(--s-10) !important; }
  .u-p-y-0-lg  { padding-top: 0 !important; padding-bottom: 0 !important; }
  .u-p-y-10-lg { padding-top: var(--s-10) !important; padding-bottom: var(--s-10) !important; }
}