/* =========================================================
   PRIME GEAR 夏季エフェクト

   昼：
   ・右上のサマーイエロー
   ・左下のアクアブルー
   ・それぞれ独立して大きく漂う

   夜：
   ・コンテンツの後ろで動く花火
   ・白背景でも見える落ち着いた配色

   トップページ：
   ・サイト型レイアウトのセクションより前へ全面表示
========================================================= */

:root {
  /*
   * 通常ページではエフェクトを
   * コンテンツの後ろへ配置。
   */
  --pg-summer-effect-layer: 0;

  /*
   * 通常ページ・PC：
   * スクロール後の花火濃度
   */
  --pg-summer-scroll-opacity: 0.38;

  /*
   * 通常ページ・スマホ：
   * スクロール後の花火濃度
   */
  --pg-summer-mobile-scroll-opacity: 0.62;
}


/* =========================================================
   通常ページ：基本レイヤー構成
========================================================= */

body.pg-summer-effect-active {
  position: relative;
  isolation: isolate;
}


/*
 * 通常ページではエフェクトを
 * サイト本体より後ろへ配置。
 */

body.pg-summer-effect-active
#pgSummerEffect {
  z-index: var(--pg-summer-effect-layer);
}


/*
 * SWELL本体をエフェクトより前へ配置。
 */

body.pg-summer-effect-active
#body_wrap {
  position: relative;
  z-index: 1;

  background-color: transparent !important;
}


/*
 * ページ全体を覆う大きな背景だけ透明化。
 *
 * ポチップ、表、結論ボックスなどの
 * 個別背景には影響させない。
 */

body.pg-summer-effect-active
.l-container,

body.pg-summer-effect-active
.l-content,

body.pg-summer-effect-active
.l-mainContent {
  background-color: transparent !important;
}


/* =========================================================
   共通エフェクトレイヤー
========================================================= */

.pg-summer-effect {
  position: fixed;
  inset: 0;

  width: 100%;
  width: 100vw;

  height: 100%;
  height: 100vh;
  height: 100dvh;

  overflow: hidden;

  pointer-events: none;

  contain: strict;

  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}


/*
 * 子要素もクリック操作を妨げない。
 */

.pg-summer-effect,
.pg-summer-effect * {
  pointer-events: none;
}


/* =========================================================
   昼：共通設定
========================================================= */

.pg-summer-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  will-change:
    transform,
    opacity;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}


/* =========================================================
   昼：右上のサマーイエロー
========================================================= */

.pg-summer-glow--sun {
  top: -16vw;
  right: -12vw;

  width: 58vw;
  height: 58vw;

  max-width: 740px;
  max-height: 740px;

  min-width: 340px;
  min-height: 340px;

  background:
    radial-gradient(
      circle at 52% 48%,
      rgba(250, 204, 21, 0.24) 0%,
      rgba(245, 181, 21, 0.13) 34%,
      rgba(255, 224, 102, 0.065) 50%,
      transparent 72%
    );

  filter:
    blur(48px)
    saturate(1.06);

  opacity: 1;

  transform-origin: 52% 48%;

  animation:
    pgSummerSunGlow
    14s
    cubic-bezier(.45, 0, .35, 1)
    infinite;
}


/*
 * 黄色の内側を漂うハイライト
 */

.pg-summer-glow--sun::before {
  content: "";

  position: absolute;
  inset: 12% 16% 20% 8%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 58% 40%,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 244, 190, 0.12) 35%,
      transparent 70%
    );

  filter: blur(27px);

  mix-blend-mode: screen;

  opacity: 0.68;

  transform-origin: 58% 40%;

  animation:
    pgSummerSunHighlight
    9s
    ease-in-out
    infinite;
}


/* =========================================================
   昼：左下のアクアブルー
========================================================= */

.pg-summer-glow--aqua {
  right: auto;
  bottom: -22vw;
  left: -15vw;

  width: 60vw;
  height: 60vw;

  max-width: 780px;
  max-height: 780px;

  min-width: 360px;
  min-height: 360px;

  background:
    radial-gradient(
      circle at 46% 46%,
      rgba(54, 178, 255, 0.18) 0%,
      rgba(86, 205, 255, 0.11) 38%,
      rgba(153, 229, 255, 0.055) 54%,
      transparent 73%
    );

  filter:
    blur(54px)
    saturate(1.04);

  opacity: 0.84;

  transform-origin: 46% 46%;

  animation:
    pgSummerAquaGlow
    18s
    cubic-bezier(.42, 0, .3, 1)
    infinite;
}


/*
 * 水色の内側を漂うハイライト
 */

.pg-summer-glow--aqua::before {
  content: "";

  position: absolute;
  inset: 18% 10% 6% 20%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 42% 54%,
      rgba(170, 234, 255, 0.24) 0%,
      rgba(87, 203, 255, 0.09) 42%,
      transparent 72%
    );

  filter: blur(30px);

  mix-blend-mode: screen;

  opacity: 0.64;

  transform-origin: 42% 54%;

  animation:
    pgSummerAquaHighlight
    13s
    ease-in-out
    infinite;
}


/* =========================================================
   昼モード
========================================================= */

.pg-summer-effect--day
.pg-summer-glow {
  visibility: visible;
}


.pg-summer-effect--day
.pg-summer-glow--sun {
  opacity: 1;
}


.pg-summer-effect--day
.pg-summer-glow--aqua {
  opacity: 0.84;
}


/* =========================================================
   夜モードでは昼エフェクトを停止
========================================================= */

.pg-summer-effect--night
.pg-summer-glow {
  opacity: 0;
  visibility: hidden;

  animation-play-state: paused;
}


.pg-summer-effect--night
.pg-summer-glow::before {
  animation-play-state: paused;
}


/* =========================================================
   通常ページ：昼のスクロール後
========================================================= */

.pg-summer-effect.is-scrolled.pg-summer-effect--day
.pg-summer-glow--sun {
  opacity: 0.2;
}


.pg-summer-effect.is-scrolled.pg-summer-effect--day
.pg-summer-glow--aqua {
  opacity: 0.14;
}


/* =========================================================
   昼アニメーション：黄色
========================================================= */

@keyframes pgSummerSunGlow {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(0.96)
      rotate(0deg);

    opacity: 0.78;
  }

  28% {
    transform:
      translate3d(-5vw, 3vh, 0)
      scale(1.07)
      rotate(3deg);

    opacity: 1;
  }

  55% {
    transform:
      translate3d(-2vw, 8vh, 0)
      scale(1.13)
      rotate(-2deg);

    opacity: 0.88;
  }

  78% {
    transform:
      translate3d(3vw, 4vh, 0)
      scale(1.04)
      rotate(2deg);

    opacity: 0.94;
  }

  100% {
    transform:
      translate3d(0, 0, 0)
      scale(0.96)
      rotate(0deg);

    opacity: 0.78;
  }
}


@keyframes pgSummerSunHighlight {
  0% {
    transform:
      translate3d(12%, -8%, 0)
      scale(0.86);

    opacity: 0.28;
  }

  32% {
    transform:
      translate3d(-12%, 14%, 0)
      scale(1.14);

    opacity: 0.78;
  }

  65% {
    transform:
      translate3d(8%, 22%, 0)
      scale(0.98);

    opacity: 0.46;
  }

  100% {
    transform:
      translate3d(12%, -8%, 0)
      scale(0.86);

    opacity: 0.28;
  }
}


/* =========================================================
   昼アニメーション：水色
========================================================= */

@keyframes pgSummerAquaGlow {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(0.92)
      rotate(0deg);

    opacity: 0.52;
  }

  24% {
    transform:
      translate3d(6vw, -4vh, 0)
      scale(1.04)
      rotate(-3deg);

    opacity: 0.78;
  }

  52% {
    transform:
      translate3d(10vw, -10vh, 0)
      scale(1.14)
      rotate(2deg);

    opacity: 0.9;
  }

  76% {
    transform:
      translate3d(4vw, -7vh, 0)
      scale(1.02)
      rotate(-1deg);

    opacity: 0.68;
  }

  100% {
    transform:
      translate3d(0, 0, 0)
      scale(0.92)
      rotate(0deg);

    opacity: 0.52;
  }
}


@keyframes pgSummerAquaHighlight {
  0% {
    transform:
      translate3d(-10%, 16%, 0)
      scale(0.88);

    opacity: 0.24;
  }

  35% {
    transform:
      translate3d(18%, -12%, 0)
      scale(1.16);

    opacity: 0.7;
  }

  68% {
    transform:
      translate3d(4%, -22%, 0)
      scale(1.02);

    opacity: 0.42;
  }

  100% {
    transform:
      translate3d(-10%, 16%, 0)
      scale(0.88);

    opacity: 0.24;
  }
}


/* =========================================================
   夜：Three.js花火
========================================================= */

#fireworksStage {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  height: 100dvh;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 0, 0);

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}


#fireworksStage canvas {
  display: block;

  width: 100% !important;
  height: 100% !important;

  pointer-events: none;

  transform: translate3d(0, 0, 0);
}


/*
 * 夜モード
 */

.pg-summer-effect--night
#fireworksStage {
  opacity: 1;
  visibility: visible;
}


/*
 * 昼モード
 */

.pg-summer-effect--day
#fireworksStage {
  opacity: 0;
  visibility: hidden;
}


/*
 * 通常ページ・PC：
 * スクロール後の花火
 */

.pg-summer-effect.is-scrolled.pg-summer-effect--night
#fireworksStage {
  opacity:
    var(--pg-summer-scroll-opacity);
}


/* =========================================================
   トップページ専用：全面表示
========================================================= */

/*
 * PHP側で付与したpg-summer-topを使用。
 *
 * SWELLのサイト型トップページでは
 * 各セクションが背景を持っているため、
 * エフェクトを前面レイヤーへ移動する。
 */

body.pg-summer-top.pg-summer-effect-active
#pgSummerEffect {
  position: fixed !important;
  inset: 0 !important;

  z-index: 9990 !important;

  width: 100vw !important;

  height: 100vh !important;
  height: 100dvh !important;

  display: block !important;
  visibility: visible !important;

  overflow: hidden !important;

  pointer-events: none !important;

  opacity: 1;

  transform: translate3d(0, 0, 0);
}


/*
 * エフェクト内のすべての要素は、
 * クリック操作を妨げない。
 */

body.pg-summer-top.pg-summer-effect-active
#pgSummerEffect,

body.pg-summer-top.pg-summer-effect-active
#pgSummerEffect * {
  pointer-events: none !important;
}


/* =========================================================
   トップページ：昼
========================================================= */

/*
 * ページ上部
 */

body.pg-summer-top.pg-summer-day
#pgSummerEffect.pg-summer-effect--day
.pg-summer-glow--sun {
  display: block !important;
  visibility: visible !important;

  opacity: 0.9;
}


body.pg-summer-top.pg-summer-day
#pgSummerEffect.pg-summer-effect--day
.pg-summer-glow--aqua {
  display: block !important;
  visibility: visible !important;

  opacity: 0.72;
}


/*
 * スクロール後
 */

body.pg-summer-top.pg-summer-day
#pgSummerEffect.pg-summer-effect--day.is-scrolled
.pg-summer-glow--sun {
  opacity: 0.3;
}


body.pg-summer-top.pg-summer-day
#pgSummerEffect.pg-summer-effect--day.is-scrolled
.pg-summer-glow--aqua {
  opacity: 0.22;
}


/* =========================================================
   トップページ：夜
========================================================= */

/*
 * ページ上部
 */

body.pg-summer-top.pg-summer-night
#pgSummerEffect.pg-summer-effect--night
#fireworksStage {
  display: block !important;
  visibility: visible !important;

  opacity: 0.58;
}


/*
 * スクロール後
 */

body.pg-summer-top.pg-summer-night
#pgSummerEffect.pg-summer-effect--night.is-scrolled
#fireworksStage {
  opacity: 0.42;
}


/* =========================================================
   トップページ：操作UI
========================================================= */

/*
 * ヘッダー、固定ボタン、スマホメニューなどは
 * エフェクトより前へ維持する。
 */

body.pg-summer-top.pg-summer-effect-active
.l-header,

body.pg-summer-top.pg-summer-effect-active
.l-fixHeader,

body.pg-summer-top.pg-summer-effect-active
.p-fixBtnWrap,

body.pg-summer-top.pg-summer-effect-active
.c-fixBtn,

body.pg-summer-top.pg-summer-effect-active
#fix_bottom_menu,

body.pg-summer-top.pg-summer-effect-active
.p-spMenu,

body.pg-summer-top.pg-summer-effect-active
.p-spMenu__inner {
  z-index: 10000 !important;
}


/* =========================================================
   スマートフォン
========================================================= */

@media (max-width: 768px) {

  /* ---------------------------------------------------------
     昼：黄色
  --------------------------------------------------------- */

  .pg-summer-glow--sun {
    top: -25vw;
    right: -30vw;

    width: 100vw;
    height: 100vw;

    filter:
      blur(34px)
      saturate(1.04);

    animation-duration: 12s;
  }


  .pg-summer-glow--sun::before {
    filter: blur(21px);

    animation-duration: 8s;
  }


  /* ---------------------------------------------------------
     昼：水色
  --------------------------------------------------------- */

  .pg-summer-glow--aqua {
    bottom: -32vw;
    left: -32vw;

    width: 108vw;
    height: 108vw;

    filter:
      blur(38px)
      saturate(1.02);

    animation-duration: 15s;
  }


  /*
   * スマホでは負荷軽減のため、
   * 水色の内側レイヤーを省略。
   */

  .pg-summer-glow--aqua::before {
    display: none;
  }


  /* ---------------------------------------------------------
     通常ページ：昼のスクロール後
  --------------------------------------------------------- */

  .pg-summer-effect.is-scrolled.pg-summer-effect--day
  .pg-summer-glow--sun {
    opacity: 0.13;
  }


  .pg-summer-effect.is-scrolled.pg-summer-effect--day
  .pg-summer-glow--aqua {
    opacity: 0.09;
  }


  /* ---------------------------------------------------------
     通常ページ：夜のスクロール後
  --------------------------------------------------------- */

  .pg-summer-effect.is-scrolled.pg-summer-effect--night
  #fireworksStage {
    opacity:
      var(--pg-summer-mobile-scroll-opacity);
  }


  /* =========================================================
     トップページ・スマホ：昼
  ========================================================= */

  /*
   * ページ上部
   */

  body.pg-summer-top.pg-summer-day
  #pgSummerEffect.pg-summer-effect--day
  .pg-summer-glow--sun {
    opacity: 0.86;
  }


  body.pg-summer-top.pg-summer-day
  #pgSummerEffect.pg-summer-effect--day
  .pg-summer-glow--aqua {
    opacity: 0.68;
  }


  /*
   * スクロール後
   */

  body.pg-summer-top.pg-summer-day
  #pgSummerEffect.pg-summer-effect--day.is-scrolled
  .pg-summer-glow--sun {
    opacity: 0.28;
  }


  body.pg-summer-top.pg-summer-day
  #pgSummerEffect.pg-summer-effect--day.is-scrolled
  .pg-summer-glow--aqua {
    opacity: 0.2;
  }


  /* =========================================================
     トップページ・スマホ：夜
  ========================================================= */

  /*
   * ページ上部
   */

  body.pg-summer-top.pg-summer-night
  #pgSummerEffect.pg-summer-effect--night
  #fireworksStage {
    opacity: 0.68;
  }


  /*
   * スクロール後
   */

  body.pg-summer-top.pg-summer-night
  #pgSummerEffect.pg-summer-effect--night.is-scrolled
  #fireworksStage {
    opacity: 0.52;
  }
}


/* =========================================================
   動きを減らす設定
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .pg-summer-glow,
  .pg-summer-glow::before {
    animation: none !important;
  }


  #fireworksStage {
    display: none !important;
  }
}