/*
 * SVGシェイプアニメーション 最適化版
 *
 * 変更点: キーフレーム内の top / right / left の変化を
 *         transform: translate() に置き換え。
 * 効果:   レイアウト再計算（Layout）とペイント（Paint）をゼロにし、
 *         GPU コンポジター層のみで処理させる。
 *
 * 元に戻す場合: settings_style_sheet.php の wp_enqueue_style('shape-animation-optimized', ...) を削除。
 */

/* GPU 合成レイヤーへの昇格ヒント */
.shapeLogoYellow.run,
.shapeLogoPurple.run,
.shapeLogoGray.run,
.shapeLogoRed.run,
.shapeLogoPink.run,
.shapeLogoBlue.run,
.shapeLogoGreen.run {
  will-change: transform;
}

/* ────────────────────────────────────────
   shapeLogoYellow  /  PC
   基準位置: top -23vw / right -42.7333vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoYellow {
  0% {
    -webkit-transform: translate(0, 0) rotate(-35deg);
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    -webkit-transform: translate(-56.3667vw, calc(80vh + 23vw)) rotate(-125deg);
    transform: translate(-56.3667vw, calc(80vh + 23vw)) rotate(-125deg);
  }
  50% {
    -webkit-transform: translate(-112.7333vw, calc(40vh + 23vw)) rotate(-215deg);
    transform: translate(-112.7333vw, calc(40vh + 23vw)) rotate(-215deg);
  }
  75% {
    -webkit-transform: translate(-56.3667vw, 23vw) rotate(-305deg);
    transform: translate(-56.3667vw, 23vw) rotate(-305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-395deg);
    transform: translate(0, 0) rotate(-395deg);
  }
}
@keyframes shapeLogoYellow {
  0% {
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    transform: translate(-56.3667vw, calc(80vh + 23vw)) rotate(-125deg);
  }
  50% {
    transform: translate(-112.7333vw, calc(40vh + 23vw)) rotate(-215deg);
  }
  75% {
    transform: translate(-56.3667vw, 23vw) rotate(-305deg);
  }
  100% {
    transform: translate(0, 0) rotate(-395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoYellowSp  /  SP
   基準位置: top 34.1333vw / right -58.1333vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoYellowSp {
  0% {
    -webkit-transform: translate(0, 0) rotate(-35deg);
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    -webkit-transform: translate(-64.0667vw, calc(80vh - 34.1333vw)) rotate(-125deg);
    transform: translate(-64.0667vw, calc(80vh - 34.1333vw)) rotate(-125deg);
  }
  50% {
    -webkit-transform: translate(-128.1333vw, calc(40vh - 34.1333vw)) rotate(-215deg);
    transform: translate(-128.1333vw, calc(40vh - 34.1333vw)) rotate(-215deg);
  }
  75% {
    -webkit-transform: translate(-64.0667vw, -34.1333vw) rotate(-305deg);
    transform: translate(-64.0667vw, -34.1333vw) rotate(-305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-395deg);
    transform: translate(0, 0) rotate(-395deg);
  }
}
@keyframes shapeLogoYellowSp {
  0% {
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    transform: translate(-64.0667vw, calc(80vh - 34.1333vw)) rotate(-125deg);
  }
  50% {
    transform: translate(-128.1333vw, calc(40vh - 34.1333vw)) rotate(-215deg);
  }
  75% {
    transform: translate(-64.0667vw, -34.1333vw) rotate(-305deg);
  }
  100% {
    transform: translate(0, 0) rotate(-395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoPurple  /  PC
   基準位置: top 18.6667vw / right 4.8vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoPurple {
  0% {
    -webkit-transform: translate(0, 0) rotate(-35deg);
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    -webkit-transform: translate(-12.6vw, calc(80vh - 18.6667vw)) rotate(-125deg);
    transform: translate(-12.6vw, calc(80vh - 18.6667vw)) rotate(-125deg);
  }
  50% {
    -webkit-transform: translate(-25.2vw, -18.6667vw) rotate(-215deg);
    transform: translate(-25.2vw, -18.6667vw) rotate(-215deg);
  }
  75% {
    -webkit-transform: translate(calc(-80vh + 4.8vw), calc(80vh - 18.6667vw)) rotate(-305deg);
    transform: translate(calc(-80vh + 4.8vw), calc(80vh - 18.6667vw)) rotate(-305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-395deg);
    transform: translate(0, 0) rotate(-395deg);
  }
}
@keyframes shapeLogoPurple {
  0% {
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    transform: translate(-12.6vw, calc(80vh - 18.6667vw)) rotate(-125deg);
  }
  50% {
    transform: translate(-25.2vw, -18.6667vw) rotate(-215deg);
  }
  75% {
    transform: translate(calc(-80vh + 4.8vw), calc(80vh - 18.6667vw)) rotate(-305deg);
  }
  100% {
    transform: translate(0, 0) rotate(-395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoPurpleSp  /  SP
   基準位置: top 82.9333vw / right -2.6667vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoPurpleSp {
  0% {
    -webkit-transform: translate(0, 0) rotate(-35deg);
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    -webkit-transform: translate(-16.3333vw, calc(80vh - 82.9333vw)) rotate(-125deg);
    transform: translate(-16.3333vw, calc(80vh - 82.9333vw)) rotate(-125deg);
  }
  50% {
    -webkit-transform: translate(-32.6667vw, -82.9333vw) rotate(-215deg);
    transform: translate(-32.6667vw, -82.9333vw) rotate(-215deg);
  }
  75% {
    -webkit-transform: translate(calc(-80vh - 2.6667vw), calc(80vh - 82.9333vw)) rotate(-305deg);
    transform: translate(calc(-80vh - 2.6667vw), calc(80vh - 82.9333vw)) rotate(-305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-395deg);
    transform: translate(0, 0) rotate(-395deg);
  }
}
@keyframes shapeLogoPurpleSp {
  0% {
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    transform: translate(-16.3333vw, calc(80vh - 82.9333vw)) rotate(-125deg);
  }
  50% {
    transform: translate(-32.6667vw, -82.9333vw) rotate(-215deg);
  }
  75% {
    transform: translate(calc(-80vh - 2.6667vw), calc(80vh - 82.9333vw)) rotate(-305deg);
  }
  100% {
    transform: translate(0, 0) rotate(-395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoGray  /  PC
   基準位置: top 52.5333vw / right -16.7333vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoGray {
  0% {
    -webkit-transform: translate(0, 0) rotate(-35deg);
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    -webkit-transform: translate(-36.7333vw, -52.5333vw) rotate(-125deg);
    transform: translate(-36.7333vw, -52.5333vw) rotate(-125deg);
  }
  50% {
    -webkit-transform: translate(-96.7333vw, calc(20vh - 52.5333vw)) rotate(-215deg);
    transform: translate(-96.7333vw, calc(20vh - 52.5333vw)) rotate(-215deg);
  }
  75% {
    -webkit-transform: translate(-48.3667vw, calc(50vh - 52.5333vw)) rotate(-305deg);
    transform: translate(-48.3667vw, calc(50vh - 52.5333vw)) rotate(-305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-395deg);
    transform: translate(0, 0) rotate(-395deg);
  }
}
@keyframes shapeLogoGray {
  0% {
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    transform: translate(-36.7333vw, -52.5333vw) rotate(-125deg);
  }
  50% {
    transform: translate(-96.7333vw, calc(20vh - 52.5333vw)) rotate(-215deg);
  }
  75% {
    transform: translate(-48.3667vw, calc(50vh - 52.5333vw)) rotate(-305deg);
  }
  100% {
    transform: translate(0, 0) rotate(-395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoGraySp  /  SP
   基準位置: top 122.6667vw / right -27.7333vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoGraySp {
  0% {
    -webkit-transform: translate(0, 0) rotate(-35deg);
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    -webkit-transform: translate(-47.7333vw, -122.6667vw) rotate(-125deg);
    transform: translate(-47.7333vw, -122.6667vw) rotate(-125deg);
  }
  50% {
    -webkit-transform: translate(-107.7333vw, calc(20vh - 122.6667vw)) rotate(-215deg);
    transform: translate(-107.7333vw, calc(20vh - 122.6667vw)) rotate(-215deg);
  }
  75% {
    -webkit-transform: translate(-53.8667vw, calc(50vh - 122.6667vw)) rotate(-305deg);
    transform: translate(-53.8667vw, calc(50vh - 122.6667vw)) rotate(-305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-395deg);
    transform: translate(0, 0) rotate(-395deg);
  }
}
@keyframes shapeLogoGraySp {
  0% {
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    transform: translate(-47.7333vw, -122.6667vw) rotate(-125deg);
  }
  50% {
    transform: translate(-107.7333vw, calc(20vh - 122.6667vw)) rotate(-215deg);
  }
  75% {
    transform: translate(-53.8667vw, calc(50vh - 122.6667vw)) rotate(-305deg);
  }
  100% {
    transform: translate(0, 0) rotate(-395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoRed  /  PC
   基準位置: top 22.8vw / right 31.5333vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoRed {
  0% {
    -webkit-transform: translate(0, 0) rotate(35deg);
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    -webkit-transform: translate(15.7667vw, -22.8vw) rotate(125deg);
    transform: translate(15.7667vw, -22.8vw) rotate(125deg);
  }
  50% {
    -webkit-transform: translate(31.5333vw, calc(50vh - 22.8vw)) rotate(215deg);
    transform: translate(31.5333vw, calc(50vh - 22.8vw)) rotate(215deg);
  }
  75% {
    -webkit-transform: translate(15.7667vw, calc(100vh - 22.8vw)) rotate(305deg);
    transform: translate(15.7667vw, calc(100vh - 22.8vw)) rotate(305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(395deg);
    transform: translate(0, 0) rotate(395deg);
  }
}
@keyframes shapeLogoRed {
  0% {
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    transform: translate(15.7667vw, -22.8vw) rotate(125deg);
  }
  50% {
    transform: translate(31.5333vw, calc(50vh - 22.8vw)) rotate(215deg);
  }
  75% {
    transform: translate(15.7667vw, calc(100vh - 22.8vw)) rotate(305deg);
  }
  100% {
    transform: translate(0, 0) rotate(395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoRedSp  /  SP
   基準位置: top 87.7333vw / right 28.5333vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoRedSp {
  0% {
    -webkit-transform: translate(0, 0) rotate(35deg);
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    -webkit-transform: translate(14.2667vw, -87.7333vw) rotate(125deg);
    transform: translate(14.2667vw, -87.7333vw) rotate(125deg);
  }
  50% {
    -webkit-transform: translate(28.5333vw, calc(50vh - 87.7333vw)) rotate(215deg);
    transform: translate(28.5333vw, calc(50vh - 87.7333vw)) rotate(215deg);
  }
  75% {
    -webkit-transform: translate(14.2667vw, calc(100vh - 87.7333vw)) rotate(305deg);
    transform: translate(14.2667vw, calc(100vh - 87.7333vw)) rotate(305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(395deg);
    transform: translate(0, 0) rotate(395deg);
  }
}
@keyframes shapeLogoRedSp {
  0% {
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    transform: translate(14.2667vw, -87.7333vw) rotate(125deg);
  }
  50% {
    transform: translate(28.5333vw, calc(50vh - 87.7333vw)) rotate(215deg);
  }
  75% {
    transform: translate(14.2667vw, calc(100vh - 87.7333vw)) rotate(305deg);
  }
  100% {
    transform: translate(0, 0) rotate(395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoPink  /  PC
   基準位置: top 49.5333vw / left -5.8667vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoPink {
  0% {
    -webkit-transform: translate(0, 0) rotate(35deg);
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    -webkit-transform: translate(52.9333vw, -49.5333vw) rotate(125deg);
    transform: translate(52.9333vw, -49.5333vw) rotate(125deg);
  }
  50% {
    -webkit-transform: translate(105.8667vw, calc(50vh - 49.5333vw)) rotate(215deg);
    transform: translate(105.8667vw, calc(50vh - 49.5333vw)) rotate(215deg);
  }
  75% {
    -webkit-transform: translate(52.9333vw, calc(100vh - 49.5333vw)) rotate(305deg);
    transform: translate(52.9333vw, calc(100vh - 49.5333vw)) rotate(305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(395deg);
    transform: translate(0, 0) rotate(395deg);
  }
}
@keyframes shapeLogoPink {
  0% {
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    transform: translate(52.9333vw, -49.5333vw) rotate(125deg);
  }
  50% {
    transform: translate(105.8667vw, calc(50vh - 49.5333vw)) rotate(215deg);
  }
  75% {
    transform: translate(52.9333vw, calc(100vh - 49.5333vw)) rotate(305deg);
  }
  100% {
    transform: translate(0, 0) rotate(395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoPinkSp  /  SP
   基準位置: top 118.9333vw / left 15.2vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoPinkSp {
  0% {
    -webkit-transform: translate(0, 0) rotate(35deg);
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    -webkit-transform: translate(42.4vw, -118.9333vw) rotate(125deg);
    transform: translate(42.4vw, -118.9333vw) rotate(125deg);
  }
  50% {
    -webkit-transform: translate(84.8vw, calc(50vh - 118.9333vw)) rotate(215deg);
    transform: translate(84.8vw, calc(50vh - 118.9333vw)) rotate(215deg);
  }
  75% {
    -webkit-transform: translate(42.4vw, calc(100vh - 118.9333vw)) rotate(305deg);
    transform: translate(42.4vw, calc(100vh - 118.9333vw)) rotate(305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(395deg);
    transform: translate(0, 0) rotate(395deg);
  }
}
@keyframes shapeLogoPinkSp {
  0% {
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    transform: translate(42.4vw, -118.9333vw) rotate(125deg);
  }
  50% {
    transform: translate(84.8vw, calc(50vh - 118.9333vw)) rotate(215deg);
  }
  75% {
    transform: translate(42.4vw, calc(100vh - 118.9333vw)) rotate(305deg);
  }
  100% {
    transform: translate(0, 0) rotate(395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoBlue  /  PC
   基準位置: top 40.4667vw / left 36.2vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoBlue {
  0% {
    -webkit-transform: translate(0, 0) rotate(35deg);
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    -webkit-transform: translate(-18.1vw, -40.4667vw) rotate(125deg);
    transform: translate(-18.1vw, -40.4667vw) rotate(125deg);
  }
  50% {
    -webkit-transform: translate(-36.2vw, calc(50vh - 40.4667vw)) rotate(215deg);
    transform: translate(-36.2vw, calc(50vh - 40.4667vw)) rotate(215deg);
  }
  75% {
    -webkit-transform: translate(63.8vw, calc(100vh - 40.4667vw)) rotate(305deg);
    transform: translate(63.8vw, calc(100vh - 40.4667vw)) rotate(305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(395deg);
    transform: translate(0, 0) rotate(395deg);
  }
}
@keyframes shapeLogoBlue {
  0% {
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    transform: translate(-18.1vw, -40.4667vw) rotate(125deg);
  }
  50% {
    transform: translate(-36.2vw, calc(50vh - 40.4667vw)) rotate(215deg);
  }
  75% {
    transform: translate(63.8vw, calc(100vh - 40.4667vw)) rotate(305deg);
  }
  100% {
    transform: translate(0, 0) rotate(395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoBlueSp  /  SP
   基準位置: top 108.5333vw / left 33.6vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoBlueSp {
  0% {
    -webkit-transform: translate(0, 0) rotate(35deg);
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    -webkit-transform: translate(-16.8vw, -108.5333vw) rotate(125deg);
    transform: translate(-16.8vw, -108.5333vw) rotate(125deg);
  }
  50% {
    -webkit-transform: translate(-33.6vw, calc(50vh - 108.5333vw)) rotate(215deg);
    transform: translate(-33.6vw, calc(50vh - 108.5333vw)) rotate(215deg);
  }
  75% {
    -webkit-transform: translate(66.4vw, calc(100vh - 108.5333vw)) rotate(305deg);
    transform: translate(66.4vw, calc(100vh - 108.5333vw)) rotate(305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(395deg);
    transform: translate(0, 0) rotate(395deg);
  }
}
@keyframes shapeLogoBlueSp {
  0% {
    transform: translate(0, 0) rotate(35deg);
  }
  25% {
    transform: translate(-16.8vw, -108.5333vw) rotate(125deg);
  }
  50% {
    transform: translate(-33.6vw, calc(50vh - 108.5333vw)) rotate(215deg);
  }
  75% {
    transform: translate(66.4vw, calc(100vh - 108.5333vw)) rotate(305deg);
  }
  100% {
    transform: translate(0, 0) rotate(395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoGreen  /  PC
   基準位置: top 30.6667vw / left -4vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoGreen {
  0% {
    -webkit-transform: translate(0, 0) rotate(-35deg);
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    -webkit-transform: translate(2vw, calc(80vh - 30.6667vw)) rotate(-125deg);
    transform: translate(2vw, calc(80vh - 30.6667vw)) rotate(-125deg);
  }
  50% {
    -webkit-transform: translate(4vw, calc(40vh - 30.6667vw)) rotate(-215deg);
    transform: translate(4vw, calc(40vh - 30.6667vw)) rotate(-215deg);
  }
  75% {
    -webkit-transform: translate(74vw, -30.6667vw) rotate(-305deg);
    transform: translate(74vw, -30.6667vw) rotate(-305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-395deg);
    transform: translate(0, 0) rotate(-395deg);
  }
}
@keyframes shapeLogoGreen {
  0% {
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    transform: translate(2vw, calc(80vh - 30.6667vw)) rotate(-125deg);
  }
  50% {
    transform: translate(4vw, calc(40vh - 30.6667vw)) rotate(-215deg);
  }
  75% {
    transform: translate(74vw, -30.6667vw) rotate(-305deg);
  }
  100% {
    transform: translate(0, 0) rotate(-395deg);
  }
}

/* ────────────────────────────────────────
   shapeLogoGreenSp  /  SP
   基準位置: top 97.0667vw / left -13.0667vw
   ──────────────────────────────────────── */
@-webkit-keyframes shapeLogoGreenSp {
  0% {
    -webkit-transform: translate(0, 0) rotate(-35deg);
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    -webkit-transform: translate(6.5333vw, calc(80vh - 97.0667vw)) rotate(-125deg);
    transform: translate(6.5333vw, calc(80vh - 97.0667vw)) rotate(-125deg);
  }
  50% {
    -webkit-transform: translate(13.0667vw, calc(40vh - 97.0667vw)) rotate(-215deg);
    transform: translate(13.0667vw, calc(40vh - 97.0667vw)) rotate(-215deg);
  }
  75% {
    -webkit-transform: translate(83.0667vw, -97.0667vw) rotate(-305deg);
    transform: translate(83.0667vw, -97.0667vw) rotate(-305deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(-395deg);
    transform: translate(0, 0) rotate(-395deg);
  }
}
@keyframes shapeLogoGreenSp {
  0% {
    transform: translate(0, 0) rotate(-35deg);
  }
  25% {
    transform: translate(6.5333vw, calc(80vh - 97.0667vw)) rotate(-125deg);
  }
  50% {
    transform: translate(13.0667vw, calc(40vh - 97.0667vw)) rotate(-215deg);
  }
  75% {
    transform: translate(83.0667vw, -97.0667vw) rotate(-305deg);
  }
  100% {
    transform: translate(0, 0) rotate(-395deg);
  }
}