/* ======================================================================
   02_utilities.css
   - Utility classes (colors, backgrounds, spacing, visibility)
======================================================================== */

/* =========================
   Colors (text)
========================= */
.white {
  color: var(--white);
}

.key-color-blue {
  color: var(--blue);
}

.key-color-orange {
  color: var(--yellow);
}

.key-color-pink {
  color: var(--pink);
}

.key-color-turquoise {
  color: var(--turquoise);
}

.key-color-vividorange {
  color: #e7411e;
}

.key-color-darkbrown {
  color: var(--text);
}

/* =========================
   Background colors
========================= */
.bg-pink {
  background-color: var(--pink);
}

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

.bg-blue {
  background-color: var(--blue);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-turquoise {
  background-color: var(--turquoise);
}

/* =========================
   Spacing
========================= */
.px-40 {
  padding-left: 40px;
  padding-right: 40px;
}

.mx-40 {
  margin-left: 40px;
  margin-right: 40px;
}

/* =========================
   Visibility
========================= */
.pc-only {
  display: inline;
}

.sp-only {
  display: none;
}

/* =========================
   Marker
   - 文字の下半分に色
========================= */
.marker,
.marker-pink {
  display: inline; /* ← ここ重要 */
  padding: 0 6px 2px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-size: 100% 0.5em;
  background-repeat: no-repeat;
  background-position: 0 78%; /* ← ここがポイント */
}

.marker {
  background-image: linear-gradient(#ffd93d, #ffd93d);
}
.marker-pink {
  background-image: linear-gradient(var(--pink), var(--pink));
}

/* =========================
   Scroll Fade Animation（汎用）
========================= */

/* 初期状態（共通） */
.js-fade {
  opacity: 0;
  transform: translate(0, 0) scale(1);
  will-change: opacity, transform;
  transition:
    opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 表示後 */
.js-fade.is-show {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* 方向（初期 transform を上書きする） */
.fade-up {
  transform: translateY(36px);
}

.fade-down {
  transform: translateY(-36px);
}

.fade-left {
  transform: translateX(-36px);
}

.fade-right {
  transform: translateX(36px);
}

/* ズーム */
.fade-zoom {
  transform: scale(0.92);
}

/* 遅延 */
.delay-1 {
  transition-delay: 0.1s;
}
.delay-2 {
  transition-delay: 0.2s;
}
.delay-3 {
  transition-delay: 0.3s;
}
.delay-4 {
  transition-delay: 0.4s;
}
.delay-5 {
  transition-delay: 0.5s;
}

/* スマホは動きを控えめ（左右→下からに統一） */
@media (max-width: 900px) {
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right {
    transform: translateY(24px);
  }

  .fade-zoom {
    transform: scale(0.94);
  }
}