/*
 * POS-COM Utility CSS
 * ブロックエディタの追加CSSクラスで使う汎用ユーティリティ
 */

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

  フォント系ユーティリティ

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

.font-sans {
  font-family: var(--font-sans) !important;
}

.font-readable,
.noto-font {
  font-family: var(--font-readable) !important;
}

.font-en {
  font-family: var(--font-en) !important;
}

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

  色ユーティリティ

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

.text-navy {
  color: var(--poscom-navy) !important;
}

.text-deep-navy {
  color: var(--poscom-deep-navy) !important;
}

.text-red {
  color: var(--poscom-red) !important;
}

.text-green {
  color: var(--poscom-green) !important;
}

.text-muted {
  color: var(--poscom-muted) !important;
}

.text-white {
  color: var(--poscom-white) !important;
}

.bg-navy {
  background-color: var(--poscom-navy) !important;
}

.bg-deep-navy {
  background-color: var(--poscom-deep-navy) !important;
}

.bg-red {
  background-color: var(--poscom-red) !important;
}

.bg-green {
  background-color: var(--poscom-green) !important;
}

.bg-beige {
  background-color: var(--poscom-beige) !important;
}

.bg-beige-light {
  background-color: var(--poscom-beige-light) !important;
}

.bg-gray-light {
  background-color: var(--poscom-gray-light) !important;
}

.bg-white {
  background-color: var(--poscom-white) !important;
}

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

  テキストシャドウ

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

.text-shadow {
  text-shadow: 0 2px 8px rgba(6, 27, 58, 0.28) !important;
}

.text-shadow01 {
  text-shadow: 0 1px 3px rgba(6, 27, 58, 0.24) !important;
}

.text-shadow02 {
  text-shadow: 0 3px 12px rgba(6, 27, 58, 0.34) !important;
}

.text-shadow-white {
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8) !important;
}

.text-shadow-white-glow-strong {
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.88),
    0 0 18px rgba(255, 255, 255, 0.64) !important;
}

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

  line-height

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

.lh80 { line-height: 0.8 !important; }
.lh90 { line-height: 0.9 !important; }
.lh100 { line-height: 1 !important; }
.lh110 { line-height: 1.1 !important; }
.lh120 { line-height: 1.2 !important; }
.lh130 { line-height: 1.3 !important; }
.lh140 { line-height: 1.4 !important; }
.lh150 { line-height: 1.5 !important; }
.lh160 { line-height: 1.6 !important; }
.lh170 { line-height: 1.7 !important; }
.lh180 { line-height: 1.8 !important; }
.lh190 { line-height: 1.9 !important; }
.lh200 { line-height: 2 !important; }
.lh210 { line-height: 2.1 !important; }
.lh220 { line-height: 2.2 !important; }
.lh230 { line-height: 2.3 !important; }
.lh240 { line-height: 2.4 !important; }
.lh260 { line-height: 2.6 !important; }
.lh280 { line-height: 2.8 !important; }
.lh300 { line-height: 3 !important; }

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

  line-height SP

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

@media (max-width: 767px) {
  .splh80 { line-height: 0.8 !important; }
  .splh90 { line-height: 0.9 !important; }
  .splh100 { line-height: 1 !important; }
  .splh105 { line-height: 1.05 !important; }
  .splh110 { line-height: 1.1 !important; }
  .splh115 { line-height: 1.15 !important; }
  .splh120 { line-height: 1.2 !important; }
  .splh130 { line-height: 1.3 !important; }
  .splh140 { line-height: 1.4 !important; }
  .splh150 { line-height: 1.5 !important; }
  .splh160 { line-height: 1.6 !important; }
  .splh170 { line-height: 1.7 !important; }
  .splh180 { line-height: 1.8 !important; }
  .splh190 { line-height: 1.9 !important; }
  .splh200 { line-height: 2 !important; }
  .splh210 { line-height: 2.1 !important; }
  .splh220 { line-height: 2.2 !important; }
  .splh230 { line-height: 2.3 !important; }
  .splh240 { line-height: 2.4 !important; }
  .splh250 { line-height: 2.5 !important; }
  .splh260 { line-height: 2.6 !important; }
  .splh280 { line-height: 2.8 !important; }
  .splh300 { line-height: 3 !important; }
}

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

  font-size PC/SP

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

@media (min-width: 1024px) {
  .pc08 { font-size: 0.8rem !important; }
  .pc09 { font-size: 0.9rem !important; }
  .pc10 { font-size: 1rem !important; }
  .pc11 { font-size: 1.1rem !important; }
  .pc12 { font-size: 1.2rem !important; }
  .pc13 { font-size: 1.3rem !important; }
  .pc14 { font-size: 1.4rem !important; }
  .pc15 { font-size: 1.5rem !important; }
  .pc16 { font-size: 1.6rem !important; }
  .pc17 { font-size: 1.7rem !important; }
  .pc18 { font-size: 1.8rem !important; }
  .pc19 { font-size: 1.9rem !important; }
  .pc20 { font-size: 2rem !important; }
  .pc21 { font-size: 2.1rem !important; }
  .pc22 { font-size: 2.2rem !important; }
  .pc23 { font-size: 2.3rem !important; }
  .pc24 { font-size: 2.4rem !important; }
  .pc25 { font-size: 2.5rem !important; }
  .pc26 { font-size: 2.6rem !important; }
  .pc27 { font-size: 2.7rem !important; }
  .pc28 { font-size: 2.8rem !important; }
  .pc29 { font-size: 2.9rem !important; }
  .pc30 { font-size: 3rem !important; }
  .pc31 { font-size: 3.1rem !important; }
  .pc32 { font-size: 3.2rem !important; }
  .pc33 { font-size: 3.3rem !important; }
  .pc34 { font-size: 3.4rem !important; }
  .pc35 { font-size: 3.5rem !important; }
  .pc36 { font-size: 3.6rem !important; }
  .pc37 { font-size: 3.7rem !important; }
  .pc38 { font-size: 3.8rem !important; }
  .pc39 { font-size: 3.9rem !important; }
  .pc40 { font-size: 4rem !important; }
}

@media (max-width: 767px) {
  .sp08 { font-size: 0.8rem !important; }
  .sp09 { font-size: 0.9rem !important; }
  .sp10 { font-size: 1rem !important; }
  .sp11 { font-size: 1.1rem !important; }
  .sp12 { font-size: 1.2rem !important; }
  .sp13 { font-size: 1.3rem !important; }
  .sp14 { font-size: 1.4rem !important; }
  .sp15 { font-size: 1.5rem !important; }
  .sp16 { font-size: 1.6rem !important; }
  .sp17 { font-size: 1.7rem !important; }
  .sp18 { font-size: 1.8rem !important; }
  .sp19 { font-size: 1.9rem !important; }
  .sp20 { font-size: 2rem !important; }
  .sp21 { font-size: 2.1rem !important; }
  .sp22 { font-size: 2.2rem !important; }
  .sp23 { font-size: 2.3rem !important; }
  .sp24 { font-size: 2.4rem !important; }
  .sp25 { font-size: 2.5rem !important; }
  .sp26 { font-size: 2.6rem !important; }
  .sp27 { font-size: 2.7rem !important; }
  .sp28 { font-size: 2.8rem !important; }
  .sp29 { font-size: 2.9rem !important; }
  .sp30 { font-size: 3rem !important; }
  .sp31 { font-size: 3.1rem !important; }
  .sp32 { font-size: 3.2rem !important; }
  .sp33 { font-size: 3.3rem !important; }
  .sp34 { font-size: 3.4rem !important; }
  .sp35 { font-size: 3.5rem !important; }
  .sp36 { font-size: 3.6rem !important; }
  .sp37 { font-size: 3.7rem !important; }
  .sp38 { font-size: 3.8rem !important; }
  .sp39 { font-size: 3.9rem !important; }
  .sp40 { font-size: 4rem !important; }
}

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

  font-weight

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

.fwel { font-weight: 200 !important; }
.fwl { font-weight: 300 !important; }
.fwr { font-weight: 400 !important; }
.fwm { font-weight: 500 !important; }
.fwsb { font-weight: 600 !important; }
.fwb { font-weight: 700 !important; }
.fweb { font-weight: 800 !important; }
.fwbk { font-weight: 900 !important; }

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

  letter-spacing

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

.ls0 { letter-spacing: 0 !important; }
.ls25 { letter-spacing: 0.025em !important; }
.ls50 { letter-spacing: 0.05em !important; }
.ls75 { letter-spacing: 0.075em !important; }
.ls100 { letter-spacing: 0.1em !important; }
.ls150 { letter-spacing: 0.15em !important; }
.ls200 { letter-spacing: 0.2em !important; }
.ls250 { letter-spacing: 0.25em !important; }
.ls300 { letter-spacing: 0.3em !important; }

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

  text-align

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

.tac { text-align: center !important; }
.tal { text-align: left !important; }
.tar { text-align: right !important; }

.text-emphasis-dot {
  -webkit-text-emphasis: filled dot;
  text-emphasis: filled dot;
  -webkit-text-emphasis-color: var(--poscom-red, #d71920);
  text-emphasis-color: var(--poscom-red, #d71920);
  -webkit-text-emphasis-position: over;
  text-emphasis-position: over;
}

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

  padding

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

:root {
  --u-space-5: 5px;
  --u-space-10: 10px;
  --u-space-15: 15px;
  --u-space-20: 20px;
  --u-space-25: 25px;
  --u-space-30: 30px;
  --u-space-35: 35px;
  --u-space-40: 40px;
  --u-space-45: 45px;
  --u-space-50: 50px;
  --u-space-60: 60px;
  --u-space-70: 70px;
  --u-space-75: 75px;
  --u-space-80: 80px;
  --u-space-90: 90px;
  --u-space-100: 100px;
  --u-space-120: 120px;
  --u-space-150: 150px;
  --u-space-200: 200px;
}

.pt5 { padding-top: var(--u-space-5) !important; }
.pt10 { padding-top: var(--u-space-10) !important; }
.pt15 { padding-top: var(--u-space-15) !important; }
.pt20 { padding-top: var(--u-space-20) !important; }
.pt25 { padding-top: var(--u-space-25) !important; }
.pt30 { padding-top: var(--u-space-30) !important; }
.pt35 { padding-top: var(--u-space-35) !important; }
.pt40 { padding-top: var(--u-space-40) !important; }
.pt45 { padding-top: var(--u-space-45) !important; }
.pt50 { padding-top: var(--u-space-50) !important; }
.pt60 { padding-top: var(--u-space-60) !important; }
.pt70 { padding-top: var(--u-space-70) !important; }
.pt75 { padding-top: var(--u-space-75) !important; }
.pt80 { padding-top: var(--u-space-80) !important; }
.pt90 { padding-top: var(--u-space-90) !important; }
.pt100 { padding-top: var(--u-space-100) !important; }
.pt120 { padding-top: var(--u-space-120) !important; }
.pt150 { padding-top: var(--u-space-150) !important; }
.pt200 { padding-top: var(--u-space-200) !important; }

.pb5 { padding-bottom: var(--u-space-5) !important; }
.pb10 { padding-bottom: var(--u-space-10) !important; }
.pb15 { padding-bottom: var(--u-space-15) !important; }
.pb20 { padding-bottom: var(--u-space-20) !important; }
.pb25 { padding-bottom: var(--u-space-25) !important; }
.pb30 { padding-bottom: var(--u-space-30) !important; }
.pb35 { padding-bottom: var(--u-space-35) !important; }
.pb40 { padding-bottom: var(--u-space-40) !important; }
.pb45 { padding-bottom: var(--u-space-45) !important; }
.pb50 { padding-bottom: var(--u-space-50) !important; }
.pb60 { padding-bottom: var(--u-space-60) !important; }
.pb70 { padding-bottom: var(--u-space-70) !important; }
.pb75 { padding-bottom: var(--u-space-75) !important; }
.pb80 { padding-bottom: var(--u-space-80) !important; }
.pb90 { padding-bottom: var(--u-space-90) !important; }
.pb100 { padding-bottom: var(--u-space-100) !important; }
.pb120 { padding-bottom: var(--u-space-120) !important; }
.pb150 { padding-bottom: var(--u-space-150) !important; }
.pb200 { padding-bottom: var(--u-space-200) !important; }

.pl5 { padding-left: var(--u-space-5) !important; }
.pl10 { padding-left: var(--u-space-10) !important; }
.pl15 { padding-left: var(--u-space-15) !important; }
.pl20 { padding-left: var(--u-space-20) !important; }
.pl25 { padding-left: var(--u-space-25) !important; }
.pl30 { padding-left: var(--u-space-30) !important; }
.pl35 { padding-left: var(--u-space-35) !important; }
.pl40 { padding-left: var(--u-space-40) !important; }
.pl45 { padding-left: var(--u-space-45) !important; }
.pl50 { padding-left: var(--u-space-50) !important; }
.pl60 { padding-left: var(--u-space-60) !important; }
.pl70 { padding-left: var(--u-space-70) !important; }
.pl75 { padding-left: var(--u-space-75) !important; }
.pl80 { padding-left: var(--u-space-80) !important; }
.pl90 { padding-left: var(--u-space-90) !important; }
.pl100 { padding-left: var(--u-space-100) !important; }
.pl120 { padding-left: var(--u-space-120) !important; }
.pl150 { padding-left: var(--u-space-150) !important; }
.pl200 { padding-left: var(--u-space-200) !important; }

.pr5 { padding-right: var(--u-space-5) !important; }
.pr10 { padding-right: var(--u-space-10) !important; }
.pr15 { padding-right: var(--u-space-15) !important; }
.pr20 { padding-right: var(--u-space-20) !important; }
.pr25 { padding-right: var(--u-space-25) !important; }
.pr30 { padding-right: var(--u-space-30) !important; }
.pr35 { padding-right: var(--u-space-35) !important; }
.pr40 { padding-right: var(--u-space-40) !important; }
.pr45 { padding-right: var(--u-space-45) !important; }
.pr50 { padding-right: var(--u-space-50) !important; }
.pr60 { padding-right: var(--u-space-60) !important; }
.pr70 { padding-right: var(--u-space-70) !important; }
.pr75 { padding-right: var(--u-space-75) !important; }
.pr80 { padding-right: var(--u-space-80) !important; }
.pr90 { padding-right: var(--u-space-90) !important; }
.pr100 { padding-right: var(--u-space-100) !important; }
.pr120 { padding-right: var(--u-space-120) !important; }
.pr150 { padding-right: var(--u-space-150) !important; }
.pr200 { padding-right: var(--u-space-200) !important; }

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

  padding SP

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

@media (max-width: 767px) {
  .sppt5 { padding-top: var(--u-space-5) !important; }
  .sppt10 { padding-top: var(--u-space-10) !important; }
  .sppt15 { padding-top: var(--u-space-15) !important; }
  .sppt20 { padding-top: var(--u-space-20) !important; }
  .sppt25 { padding-top: var(--u-space-25) !important; }
  .sppt30 { padding-top: var(--u-space-30) !important; }
  .sppt35 { padding-top: var(--u-space-35) !important; }
  .sppt40 { padding-top: var(--u-space-40) !important; }
  .sppt45 { padding-top: var(--u-space-45) !important; }
  .sppt50 { padding-top: var(--u-space-50) !important; }
  .sppt60 { padding-top: var(--u-space-60) !important; }
  .sppt70 { padding-top: var(--u-space-70) !important; }
  .sppt75 { padding-top: var(--u-space-75) !important; }
  .sppt80 { padding-top: var(--u-space-80) !important; }
  .sppt90 { padding-top: var(--u-space-90) !important; }
  .sppt100 { padding-top: var(--u-space-100) !important; }
  .sppt120 { padding-top: var(--u-space-120) !important; }
  .sppt150 { padding-top: var(--u-space-150) !important; }
  .sppt200 { padding-top: var(--u-space-200) !important; }

  .sppb5 { padding-bottom: var(--u-space-5) !important; }
  .sppb10 { padding-bottom: var(--u-space-10) !important; }
  .sppb15 { padding-bottom: var(--u-space-15) !important; }
  .sppb20 { padding-bottom: var(--u-space-20) !important; }
  .sppb25 { padding-bottom: var(--u-space-25) !important; }
  .sppb30 { padding-bottom: var(--u-space-30) !important; }
  .sppb35 { padding-bottom: var(--u-space-35) !important; }
  .sppb40 { padding-bottom: var(--u-space-40) !important; }
  .sppb45 { padding-bottom: var(--u-space-45) !important; }
  .sppb50 { padding-bottom: var(--u-space-50) !important; }
  .sppb60 { padding-bottom: var(--u-space-60) !important; }
  .sppb70 { padding-bottom: var(--u-space-70) !important; }
  .sppb75 { padding-bottom: var(--u-space-75) !important; }
  .sppb80 { padding-bottom: var(--u-space-80) !important; }
  .sppb90 { padding-bottom: var(--u-space-90) !important; }
  .sppb100 { padding-bottom: var(--u-space-100) !important; }
  .sppb120 { padding-bottom: var(--u-space-120) !important; }
  .sppb150 { padding-bottom: var(--u-space-150) !important; }
  .sppb200 { padding-bottom: var(--u-space-200) !important; }

  .sppl5 { padding-left: var(--u-space-5) !important; }
  .sppl10 { padding-left: var(--u-space-10) !important; }
  .sppl15 { padding-left: var(--u-space-15) !important; }
  .sppl20 { padding-left: var(--u-space-20) !important; }
  .sppl25 { padding-left: var(--u-space-25) !important; }
  .sppl30 { padding-left: var(--u-space-30) !important; }
  .sppl35 { padding-left: var(--u-space-35) !important; }
  .sppl40 { padding-left: var(--u-space-40) !important; }
  .sppl45 { padding-left: var(--u-space-45) !important; }
  .sppl50 { padding-left: var(--u-space-50) !important; }
  .sppl60 { padding-left: var(--u-space-60) !important; }
  .sppl70 { padding-left: var(--u-space-70) !important; }
  .sppl75 { padding-left: var(--u-space-75) !important; }
  .sppl80 { padding-left: var(--u-space-80) !important; }
  .sppl90 { padding-left: var(--u-space-90) !important; }
  .sppl100 { padding-left: var(--u-space-100) !important; }
  .sppl120 { padding-left: var(--u-space-120) !important; }
  .sppl150 { padding-left: var(--u-space-150) !important; }
  .sppl200 { padding-left: var(--u-space-200) !important; }

  .sppr5 { padding-right: var(--u-space-5) !important; }
  .sppr10 { padding-right: var(--u-space-10) !important; }
  .sppr15 { padding-right: var(--u-space-15) !important; }
  .sppr20 { padding-right: var(--u-space-20) !important; }
  .sppr25 { padding-right: var(--u-space-25) !important; }
  .sppr30 { padding-right: var(--u-space-30) !important; }
  .sppr35 { padding-right: var(--u-space-35) !important; }
  .sppr40 { padding-right: var(--u-space-40) !important; }
  .sppr45 { padding-right: var(--u-space-45) !important; }
  .sppr50 { padding-right: var(--u-space-50) !important; }
  .sppr60 { padding-right: var(--u-space-60) !important; }
  .sppr70 { padding-right: var(--u-space-70) !important; }
  .sppr75 { padding-right: var(--u-space-75) !important; }
  .sppr80 { padding-right: var(--u-space-80) !important; }
  .sppr90 { padding-right: var(--u-space-90) !important; }
  .sppr100 { padding-right: var(--u-space-100) !important; }
  .sppr120 { padding-right: var(--u-space-120) !important; }
  .sppr150 { padding-right: var(--u-space-150) !important; }
  .sppr200 { padding-right: var(--u-space-200) !important; }
}

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

  margin

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

.mt5 { margin-top: var(--u-space-5) !important; }
.mt10 { margin-top: var(--u-space-10) !important; }
.mt15 { margin-top: var(--u-space-15) !important; }
.mt20 { margin-top: var(--u-space-20) !important; }
.mt25 { margin-top: var(--u-space-25) !important; }
.mt30 { margin-top: var(--u-space-30) !important; }
.mt35 { margin-top: var(--u-space-35) !important; }
.mt40 { margin-top: var(--u-space-40) !important; }
.mt45 { margin-top: var(--u-space-45) !important; }
.mt50 { margin-top: var(--u-space-50) !important; }
.mt60 { margin-top: var(--u-space-60) !important; }
.mt70 { margin-top: var(--u-space-70) !important; }
.mt75 { margin-top: var(--u-space-75) !important; }
.mt80 { margin-top: var(--u-space-80) !important; }
.mt90 { margin-top: var(--u-space-90) !important; }
.mt100 { margin-top: var(--u-space-100) !important; }
.mt120 { margin-top: var(--u-space-120) !important; }
.mt150 { margin-top: var(--u-space-150) !important; }
.mt200 { margin-top: var(--u-space-200) !important; }

.mb5 { margin-bottom: var(--u-space-5) !important; }
.mb10 { margin-bottom: var(--u-space-10) !important; }
.mb15 { margin-bottom: var(--u-space-15) !important; }
.mb20 { margin-bottom: var(--u-space-20) !important; }
.mb25 { margin-bottom: var(--u-space-25) !important; }
.mb30 { margin-bottom: var(--u-space-30) !important; }
.mb35 { margin-bottom: var(--u-space-35) !important; }
.mb40 { margin-bottom: var(--u-space-40) !important; }
.mb45 { margin-bottom: var(--u-space-45) !important; }
.mb50 { margin-bottom: var(--u-space-50) !important; }
.mb60 { margin-bottom: var(--u-space-60) !important; }
.mb70 { margin-bottom: var(--u-space-70) !important; }
.mb75 { margin-bottom: var(--u-space-75) !important; }
.mb80 { margin-bottom: var(--u-space-80) !important; }
.mb90 { margin-bottom: var(--u-space-90) !important; }
.mb100 { margin-bottom: var(--u-space-100) !important; }
.mb120 { margin-bottom: var(--u-space-120) !important; }
.mb150 { margin-bottom: var(--u-space-150) !important; }
.mb200 { margin-bottom: var(--u-space-200) !important; }

.ml5 { margin-left: var(--u-space-5) !important; }
.ml10 { margin-left: var(--u-space-10) !important; }
.ml15 { margin-left: var(--u-space-15) !important; }
.ml20 { margin-left: var(--u-space-20) !important; }
.ml25 { margin-left: var(--u-space-25) !important; }
.ml30 { margin-left: var(--u-space-30) !important; }
.ml35 { margin-left: var(--u-space-35) !important; }
.ml40 { margin-left: var(--u-space-40) !important; }
.ml45 { margin-left: var(--u-space-45) !important; }
.ml50 { margin-left: var(--u-space-50) !important; }
.ml60 { margin-left: var(--u-space-60) !important; }
.ml70 { margin-left: var(--u-space-70) !important; }
.ml75 { margin-left: var(--u-space-75) !important; }
.ml80 { margin-left: var(--u-space-80) !important; }
.ml90 { margin-left: var(--u-space-90) !important; }
.ml100 { margin-left: var(--u-space-100) !important; }
.ml120 { margin-left: var(--u-space-120) !important; }
.ml150 { margin-left: var(--u-space-150) !important; }
.ml200 { margin-left: var(--u-space-200) !important; }

.mr5 { margin-right: var(--u-space-5) !important; }
.mr10 { margin-right: var(--u-space-10) !important; }
.mr15 { margin-right: var(--u-space-15) !important; }
.mr20 { margin-right: var(--u-space-20) !important; }
.mr25 { margin-right: var(--u-space-25) !important; }
.mr30 { margin-right: var(--u-space-30) !important; }
.mr35 { margin-right: var(--u-space-35) !important; }
.mr40 { margin-right: var(--u-space-40) !important; }
.mr45 { margin-right: var(--u-space-45) !important; }
.mr50 { margin-right: var(--u-space-50) !important; }
.mr60 { margin-right: var(--u-space-60) !important; }
.mr70 { margin-right: var(--u-space-70) !important; }
.mr75 { margin-right: var(--u-space-75) !important; }
.mr80 { margin-right: var(--u-space-80) !important; }
.mr90 { margin-right: var(--u-space-90) !important; }
.mr100 { margin-right: var(--u-space-100) !important; }
.mr120 { margin-right: var(--u-space-120) !important; }
.mr150 { margin-right: var(--u-space-150) !important; }
.mr200 { margin-right: var(--u-space-200) !important; }

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

  レスポンシブ padding/margin 800px以下

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

@media (max-width: 800px) {
  :root {
    --u-space-5: 4px;
    --u-space-10: 8px;
    --u-space-15: 12px;
    --u-space-20: 16px;
    --u-space-25: 20px;
    --u-space-30: 24px;
    --u-space-35: 28px;
    --u-space-40: 32px;
    --u-space-45: 36px;
    --u-space-50: 40px;
    --u-space-60: 48px;
    --u-space-70: 56px;
    --u-space-75: 60px;
    --u-space-80: 64px;
    --u-space-90: 72px;
    --u-space-100: 80px;
    --u-space-120: 96px;
    --u-space-150: 120px;
    --u-space-200: 160px;
  }
}

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

  レスポンシブ padding/margin 560px以下

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

@media (max-width: 560px) {
  :root {
    --u-space-5: 3px;
    --u-space-10: 6px;
    --u-space-15: 9px;
    --u-space-20: 12px;
    --u-space-25: 15px;
    --u-space-30: 18px;
    --u-space-35: 21px;
    --u-space-40: 24px;
    --u-space-45: 27px;
    --u-space-50: 30px;
    --u-space-60: 36px;
    --u-space-70: 42px;
    --u-space-75: 45px;
    --u-space-80: 48px;
    --u-space-90: 54px;
    --u-space-100: 60px;
    --u-space-120: 72px;
    --u-space-150: 90px;
    --u-space-200: 120px;
  }
}

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

  border-radius

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

.brad5,
.u-radius-sm {
  border-radius: 5px !important;
}

.brad10,
.u-radius-md {
  border-radius: 10px !important;
}

.brad15 {
  border-radius: 15px !important;
}

.brad20,
.u-radius-lg {
  border-radius: 20px !important;
}

.brad25 {
  border-radius: 25px !important;
}

.brad30,
.u-radius-xl {
  border-radius: 30px !important;
}

.brad50 {
  border-radius: 50px !important;
}

.bradh {
  border-radius: 50% !important;
}

@media (max-width: 800px) {
  .brad25,
  .brad30,
  .brad50,
  .u-radius-xl {
    border-radius: 20px !important;
  }
}

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

  画像・カード系ユーティリティ

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

.u-shadow-soft {
  box-shadow: 0 10px 28px rgba(6, 27, 58, 0.12) !important;
}

.u-shadow-card {
  box-shadow: 0 18px 48px rgba(6, 27, 58, 0.16) !important;
}

.u-overflow-hidden {
  overflow: hidden !important;
}

.u-img-cover,
.u-img-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

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

  SWELL画像ボーダー補助

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

.wp-block-image.is-style-border img,
.wp-block-video.is-style-border video,
img.border {
  border: 1px solid var(--poscom-border) !important;
}