@charset "UTF-8";

/* ==================================
ユーティリティー
===================================== */
/*---------- 画像の比率 ----------*/
.u-aspect {
  /* 縦横比はstyleでCSS変数を書き換える
     ex) style="--aspect: 2.51 / 1;" */
  --aspect: auto;
  @media print, screen and (min-width: 576px) {
    --aspect-sm: var(--aspect);
  }
  @media print, screen and (min-width: 768px) {
    --aspect-md: var(--aspect-sm);
  }
  @media print, screen and (min-width: 992px) {
    --aspect-lg: var(--aspect-md);
  }
  @media print, screen and (min-width: 1200px) {
    --aspect-xl: var(--aspect-lg);
  }
  @media print, screen and (min-width: 1400px) {
    --aspect-xxl: var(--aspect-xl);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--aspect);
    @media print, screen and (min-width: 576px) {
      aspect-ratio: var(--aspect-sm);
    }
    @media print, screen and (min-width: 768px) {
      aspect-ratio: var(--aspect-md);
    }
    @media print, screen and (min-width: 992px) {
      aspect-ratio: var(--aspect-lg);
    }
    @media print, screen and (min-width: 1200px) {
      aspect-ratio: var(--aspect-xl);
    }
    @media print, screen and (min-width: 1400px) {
      aspect-ratio: var(--aspect-xxl);
    }
  }

  &.--4x3 img {
    aspect-ratio: 4 / 3;
  }
  &.--3x2 img {
    aspect-ratio: 3 / 2;
  }
  &.--16x9 img {
    aspect-ratio: 16 / 9;
  }
  &.--21x9 img {
    aspect-ratio: 21 / 9;
  }
  &.--1x1 img {
    aspect-ratio: 1 / 1;
  }
  &.--2x1 img {
    aspect-ratio: 2 / 1;
  }
  &.--3x1 img {
    aspect-ratio: 3 / 1;
  }
  &.--4x1 img {
    aspect-ratio: 4 / 1;
  }
  &.--7x8 img {
    aspect-ratio: 7 / 8;
  }
  &.--9x16 img {
    aspect-ratio: 9 / 16;
  }
  &.--2x3 img {
    aspect-ratio: 2 / 3;
  }
  &.--3x4 img {
    aspect-ratio: 3 / 4;
  }

  /* 画像全体を枠内に入れたいとき */
  &.--contain img,
  .--contain img {
    object-fit: contain;
  }
}
.border-1px {
  border-width: 1px !important;
}
.bg-1 {
  background-color: #db2999 !important;
}
.border-1 {
  border: 1px solid #db2999 !important;
}
.text-1 {
  color: #db2999 !important;
}
.bg-2 {
  background-color: #8e459e !important;
}
.border-2 {
  border: 1px solid #8e459e !important;
}
.text-2 {
  color: #8e459e !important;
}
.bg-3 {
  background-color: #525ca3 !important;
}
.border-3 {
  border: 1px solid #525ca3 !important;
}
.text-3 {
  color: #525ca3 !important;
}
.bg-4 {
  background-color: #1eabe0 !important;
}
.border-4 {
  border: 1px solid #1eabe0 !important;
}
.text-4 {
  color: #1eabe0 !important;
}
.bg-5 {
  background-color: #2cb78e !important;
}
.border-5 {
  border: 1px solid #2cb78e !important;
}
.text-5 {
  color: #2cb78e !important;
}
.bg-6 {
  background-color: #f3bd1d !important;
}
.border-6 {
  border: 1px solid #f3bd1d !important;
}
.text-6 {
  color: #f3bd1d !important;
}
.bg-7 {
  background-color: #e8602c !important;
}
.border-7 {
  border: 1px solid #e8602c !important;
}
.text-7 {
  color: #e8602c !important;
}
.text-wht {
  color: #fff !important;
}