/* utility.css v2.0 20251008 */

:root {
  /* width */
  --utility-width-sm: 576px;
  --utility-width-md: 768px;
  --utility-width-lg: 992px;
  --utility-width-xl: 1200px;
  --utility-width-xxl: 1400px;

  /* spacing */
  --utility-spacing-xxs: 10px; /* 12.5% */
  --utility-spacing-xs: 20px; /* 25% */
  --utility-spacing-sm: 40px; /* 50% */
  --utility-spacing-md: 80px; /* 1 */
  --utility-spacing-lg: 120px; /* 150% */
  --utility-spacing-xl: 160px; /* 200% */
  --utility-spacing-xxl: 240px; /* 300% */

  /* font-size */
  --utility-font-size-sm: 14px;
  --utility-font-size-md: 16px;
  --utility-font-size-lg: 18px;
  --utility-font-size-xl: 24px;
  --utility-font-size-xxl: 32px;

  /* font-size-mobile */
  --utility-font-size-sp-sm: 12px;
  --utility-font-size-sp-md: 14px;
  --utility-font-size-sp-lg: 16px;
  --utility-font-size-sp-xl: 18px;
  --utility-font-size-sp-xxl: 24px;
}

/* clearfix */
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* 文字詰めを自動調整する */
.util-palt {
  font-feature-settings: "palt";
}

/* 行を折り返さない */
.util-ws-nowrap {
  white-space: nowrap;
}

/* 罫線なし */
.util-border-none {
  border: none !important;
}

/* WordPress調整用 */
.util-inline-block {
  display: inline-block;
}

.util-fit-content {
  width: fit-content;
}

/* Margin Top
============================================================= */
.util-mt-none {
  margin-top: 0 !important;
}

.util-mt-auto {
  margin-top: auto !important;
}

.util-mt-xxs {
  margin-top: var(--utility-spacing-xxs) !important;
}

.util-mt-xs {
  margin-top: var(--utility-spacing-xs) !important;
}

.util-mt-sm {
  margin-top: var(--utility-spacing-sm) !important;
}

.util-mt-md {
  margin-top: var(--utility-spacing-md) !important;
}

.util-mt-lg {
  margin-top: var(--utility-spacing-lg) !important;
}

.util-mt-xl {
  margin-top: var(--utility-spacing-xl) !important;
}

.util-mt-xxl {
  margin-top: var(--utility-spacing-xxl) !important;
}

/* Margin Bottom
============================================================= */
.util-mb-none {
  margin-bottom: 0 !important;
}

.util-mb-auto {
  margin-bottom: auto !important;
}

.util-mb-xxs {
  margin-bottom: var(--utility-spacing-xxs) !important;
}

.util-mb-xs {
  margin-bottom: var(--utility-spacing-xs) !important;
}

.util-mb-sm {
  margin-bottom: var(--utility-spacing-sm) !important;
}

.util-mb-md {
  margin-bottom: var(--utility-spacing-md) !important;
}

.util-mb-lg {
  margin-bottom: var(--utility-spacing-lg) !important;
}

.util-mb-xl {
  margin-bottom: var(--utility-spacing-xl) !important;
}

.util-mb-xxl {
  margin-bottom: var(--utility-spacing-xxl) !important;
}

/* Margin Right and Left
============================================================= */
.util-mx-none {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.util-mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}


/* Width
============================================================= */

.util-wd-max {
  width: 100% !important;
}

.util-wd-auto {
  width: auto !important;
}

.util-wd-sm {
  width: var(--utility-width-sm) !important;
}

.util-wd-md {
  width: var(--utility-width-md) !important;
}

.util-wd-lg {
  width: var(--utility-width-lg) !important;
}

.util-wd-xl {
  width: var(--utility-width-xl) !important;
}

.util-wd-xxl {
  width: var(--utility-width-xxl) !important;
}

/* フォントサイズ
============================================================= */

.util-fsz-sm {
  font-size: var(--utility-font-size-sm);
}

.util-fsz-md {
  font-size: var(--utility-font-size-md);
}

.util-fsz-lg {
  font-size: var(--utility-font-size-lg);
}

.util-fsz-xl {
  font-size: var(--utility-font-size-xl);
}

.util-fsz-xxl {
  font-size: var(--utility-font-size-xxl);
}

@media only screen and (max-width: 767.98px) {
  .util-fsz-sm {
    font-size: var(--utility-font-size-sp-sm);
  }
  
  .util-fsz-md {
    font-size: var(--utility-font-size-sp-md);
  }
  
  .util-fsz-lg {
    font-size: var(--utility-font-size-sp-lg);
  }
  
  .util-fsz-xl {
    font-size: var(--utility-font-size-sp-xl);
  }
  
  .util-fsz-xxl {
    font-size: var(--utility-font-size-sp-xxl);
  }
}

/* 段落
============================================================= */
.util-text {
  line-height: 1.8em;
}

.util-text strong {
  font-weight: 700;
}

.util-text p:not(:first-child) {
  margin-top: 0.5em;
}

.util-text--fit-content {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.util-text--justify {
  text-align: justify;
}

.util-text--center {
  text-align: center;
}