/* ===========================================================
   Themes — セクション背景・テキスト色のセットと、
            フレーバートーンの data-attribute 定義
   =========================================================== */

/* ---------- Section themes ---------- */
.l-section--theme-cream {
  background: var(--bg);
  color: var(--text);
}

.l-section--theme-cream-alt {
  background: var(--bg-alt);
  color: var(--text);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}

.l-section--theme-brand {
  background: var(--text);
  color: var(--text-on-dark);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .06) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 58%, rgba(255, 255, 255, .05) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 82%, rgba(255, 255, 255, .05) 0 2px, transparent 3px);
}

.l-section--theme-aqua {
  background: var(--accent-2);
  color: var(--text-on-dark);
}

.l-section--quality {
  --quality-overlay-start: .58;
  --quality-overlay-center: .22;
  --quality-overlay-end: .52;
  --quality-overlay-opacity: .76;
  overflow: hidden;
}

.l-section--quality::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(252, 248, 237, var(--quality-overlay-start)) 0%,
      rgba(252, 248, 237, var(--quality-overlay-center)) 48%,
      rgba(252, 248, 237, var(--quality-overlay-end)) 100%),
    url("../images/about_pc.avif") center / cover no-repeat;
  opacity: var(--quality-overlay-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.l-section--quality>* {
  position: relative;
  z-index: 1;
}

.l-section--theme-shop {
  overflow: hidden;
  background: var(--text);
  color: var(--text-on-dark);
}

.l-section--theme-shop::before,
.l-section--theme-shop::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(360px, 34vw, 650px);
  aspect-ratio: 1000 / 1336.96;
  background: url("../images/deigo_white.svg") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}

.l-section--theme-shop::before {
  left: max(-250px, -12vw);
  top: max(-170px, -8vw);
}

.l-section--theme-shop::after {
  right: max(-250px, -12vw);
  bottom: max(-230px, -11vw);
  transform: scaleX(-1);
}

.l-section--theme-shop>* {
  position: relative;
  z-index: 1;
}

.l-section--theme-shop .c-shop__list {
  border-color: rgba(255, 255, 255, .26);
}

.l-section--theme-shop .c-shop__list dt {
  color: rgba(255, 255, 255, .68);
}

.l-section--theme-shop .c-shop__list dd {
  color: rgba(255, 255, 255, .92);
}

.l-section--theme-deigo {
  overflow: hidden;
  background: var(--accent);
  color: var(--text-on-dark);
}

.l-section--theme-deigo::before,
.l-section--theme-deigo::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(360px, 38vw, 720px);
  aspect-ratio: 1000 / 1336.96;
  background: url("../images/deigo_white.svg") center / contain no-repeat;
  opacity: .22;
  pointer-events: none;
}

.l-section--theme-deigo::before {
  left: max(-260px, -13vw);
  top: max(-180px, -9vw);
}

.l-section--theme-deigo::after {
  right: max(-260px, -13vw);
  bottom: max(-260px, -13vw);
  transform: scaleX(-1);
}

.l-section--theme-deigo>* {
  position: relative;
  z-index: 1;
}

/* ダーク系テーマ上の section-head 色補正 */
.l-section--theme-brand .c-section-head__en,
.l-section--theme-aqua .c-section-head__en,
.l-section--theme-shop .c-section-head__en,
.l-section--theme-deigo .c-section-head__en {
  color: var(--color-flavor-mango);
}

.l-section--theme-brand .c-section-head__ja,
.l-section--theme-aqua .c-section-head__ja,
.l-section--theme-shop .c-section-head__ja,
.l-section--theme-deigo .c-section-head__ja,
.l-section--theme-brand .c-section-head__sub,
.l-section--theme-aqua .c-section-head__sub,
.l-section--theme-shop .c-section-head__sub,
.l-section--theme-deigo .c-section-head__sub {
  color: var(--text-on-dark);
}

@media (max-width: 780px) {
  .l-section--quality {
    --quality-overlay-start: .18;
    --quality-overlay-center: .22;
    --quality-overlay-end: .52;
    --quality-overlay-opacity: .76;
  }

  .l-section--quality::before {
    background-image:
      linear-gradient(180deg,
        rgba(252, 248, 237, var(--quality-overlay-start)) 0%,
        rgba(252, 248, 237, var(--quality-overlay-center)) 54%,
        rgba(252, 248, 237, var(--quality-overlay-end)) 100%),
      url("../images/about_sp.avif");
    background-position:
      center,
      70% top;
    background-size:
      auto,
      cover;
    background-repeat: no-repeat;
  }

  .l-section--theme-deigo::before,
  .l-section--theme-deigo::after {
    width: clamp(260px, 78vw, 420px);
    opacity: .16;
  }

  .l-section--theme-deigo::before {
    left: -180px;
    top: -80px;
  }

  .l-section--theme-deigo::after {
    right: -190px;
    bottom: -130px;
  }

  .l-section--theme-shop::before,
  .l-section--theme-shop::after {
    width: clamp(260px, 78vw, 420px);
    opacity: .035;
  }

  .l-section--theme-shop::before {
    left: -180px;
    top: -80px;
  }

  .l-section--theme-shop::after {
    right: -190px;
    bottom: -130px;
  }
}

/* ダーク系テーマ上の ghost ボタン色補正 */
.l-section--theme-aqua .c-btn--ghost,
.l-section--theme-shop .c-btn--ghost {
  color: var(--color-white);
}

.l-section--theme-aqua .c-btn--ghost:hover,
.l-section--theme-shop .c-btn--ghost:hover {
  background: var(--color-white);
  color: var(--text);
  border-color: var(--color-white);
}