本文へスキップ

CRG-17 — HERO MOTION

ヒーロー演出・動く背景26点 在庫あり

LPの冒頭に貼るだけで動き出す、JSなしのモーション背景と演出。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-17-001

NIGHT SHIFT

オーロラヒーローAurora Hero

.cg-hr-aurora {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #0E1220;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-aurora::before,
.cg-hr-aurora::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .7;
}
.cg-hr-aurora::before {
  background: #2BB3A0;
  top: -80px;
  left: -30px;
  animation: cg-hr-aurora-a 7s ease-in-out infinite alternate;
}
.cg-hr-aurora::after {
  background: #4C5FD5;
  bottom: -100px;
  right: -40px;
  animation: cg-hr-aurora-a 9s ease-in-out infinite alternate-reverse;
}
.cg-hr-aurora p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #EAF2FF;
}
@keyframes cg-hr-aurora-a {
  to { transform: translate(40px, 24px) scale(1.25) rotate(20deg); }
}
<section class="cg-hr-aurora"><p>NIGHT SHIFT</p></section>
GROSS WT. 983 B ORIGINAL
CRG-17-002

PARTICLES

浮遊パーティクルRising Particles

.cg-hr-parts {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #14130F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-parts p {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .26em;
  color: #F2B707;
}
.cg-hr-parts i {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(242, 183, 7, .8);
  animation: cg-hr-parts-rise 5s linear infinite;
}
.cg-hr-parts i:nth-child(1) { left: 12%; animation-duration: 4.2s; }
.cg-hr-parts i:nth-child(2) { left: 30%; width: 4px; height: 4px; animation-delay: 1.2s; }
.cg-hr-parts i:nth-child(3) { left: 48%; animation-delay: 2.4s; animation-duration: 6s; }
.cg-hr-parts i:nth-child(4) { left: 64%; width: 3px; height: 3px; animation-delay: .6s; }
.cg-hr-parts i:nth-child(5) { left: 78%; animation-delay: 3s; animation-duration: 4.6s; }
.cg-hr-parts i:nth-child(6) { left: 90%; width: 4px; height: 4px; animation-delay: 1.8s; }
@keyframes cg-hr-parts-rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  90% { opacity: .9; }
  100% { transform: translateY(-160px); opacity: 0; }
}
<section class="cg-hr-parts"><i></i><i></i><i></i><i></i><i></i><i></i><p>PARTICLES</p></section>
GROSS WT. 1310 B ORIGINAL
CRG-17-003

ON STAGE

スポットライトスイープSpotlight Sweep

.cg-hr-spot {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #100F0C;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-spot::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle 90px at 50% 50%, rgba(255, 234, 180, .3), transparent 70%);
  animation: cg-hr-spot-move 5.5s ease-in-out infinite alternate;
}
.cg-hr-spot p {
  position: relative;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .24em;
  color: #FBF6EC;
}
@keyframes cg-hr-spot-move {
  0% { transform: translate(-14%, -8%); }
  100% { transform: translate(14%, 8%); }
}
<section class="cg-hr-spot"><p>ON STAGE</p></section>
GROSS WT. 745 B ORIGINAL
CRG-17-004

FLUID

流体ブロブ背景Liquid Blob

.cg-hr-blob {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #FDF4EC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-blob::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  background: linear-gradient(135deg, #E8590C, #C2426B);
  opacity: .85;
  animation: cg-hr-blob-morph 7s ease-in-out infinite;
}
.cg-hr-blob p {
  position: relative;
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #fff;
  mix-blend-mode: overlay;
}
@keyframes cg-hr-blob-morph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 45% 55% 42% 58% / 55% 45% 58% 42%; transform: rotate(30deg) scale(1.08); }
  66% { border-radius: 52% 48% 60% 40% / 40% 52% 48% 60%; transform: rotate(-15deg) scale(.96); }
}
<section class="cg-hr-blob"><p>FLUID</p></section>
GROSS WT. 960 B ORIGINAL
CRG-17-005
PRODUCT¥12,800

3D風フロートカード3D Float Card

.cg-hr-tilt {
  width: 280px;
  height: 150px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1C2340, #0E1220);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
  overflow: hidden;
}
.cg-hr-tilt .card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 34px;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(135deg, #4C5FD5, #7C4FC8);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .45);
  animation: cg-hr-tilt-sway 5s ease-in-out infinite;
  transform-style: preserve-3d;
}
.cg-hr-tilt b { font-size: 15px; letter-spacing: .18em; }
.cg-hr-tilt span { font-size: 12px; opacity: .8; }
@keyframes cg-hr-tilt-sway {
  0%, 100% { transform: rotateX(8deg) rotateY(-12deg) translateY(0); }
  50% { transform: rotateX(-6deg) rotateY(12deg) translateY(-8px); }
}
<section class="cg-hr-tilt"><div class="card"><b>PRODUCT</b><span>¥12,800</span></div></section>
GROSS WT. 940 B ORIGINAL
CRG-17-006

SYSTEM ONLINE

CRTスキャンラインヒーローCRT Scanlines

.cg-hr-crt {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #06110B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(0, 0, 0, .35) 2px 4px
  );
  pointer-events: none;
}
.cg-hr-crt p {
  position: relative;
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #4AE383;
  text-shadow: 0 0 8px rgba(74, 227, 131, .8);
  animation: cg-hr-crt-flicker 3.2s linear infinite;
}
@keyframes cg-hr-crt-flicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: .5; transform: translateX(1px); }
  96% { opacity: .9; transform: translateX(-1px); }
}
<section class="cg-hr-crt"><p data-text="SYSTEM ONLINE">SYSTEM ONLINE</p></section>
GROSS WT. 935 B ORIGINAL
CRG-17-007

AI POWERED

発光オーブGlowing Orb

.cg-hr-orb {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #0C0A14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cg-hr-orb i {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #B9C6FF, #4C5FD5 55%, #22194A);
  box-shadow:
    0 0 24px rgba(76, 95, 213, .9),
    0 0 70px rgba(76, 95, 213, .5);
  animation: cg-hr-orb-breathe 3.4s ease-in-out infinite;
}
.cg-hr-orb p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .34em;
  color: #B9C6FF;
}
@keyframes cg-hr-orb-breathe {
  50% { transform: scale(1.12); box-shadow: 0 0 34px rgba(76, 95, 213, 1), 0 0 100px rgba(76, 95, 213, .65); }
}
<section class="cg-hr-orb"><i></i><p>AI POWERED</p></section>
GROSS WT. 853 B ORIGINAL
CRG-17-008

Studio Vision

巨大アウトライン文字マーキーOutline Marquee

.cg-hr-marq {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #EFEDE6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-marq .row {
  position: absolute;
  display: flex;
  width: max-content;
  animation: cg-hr-marq-run 8s linear infinite;
}
.cg-hr-marq .row span {
  font-size: 74px;
  font-weight: 900;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px #D5D0C2;
}
.cg-hr-marq p {
  position: relative;
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  color: #1B1A17;
}
@keyframes cg-hr-marq-run {
  to { transform: translateX(-50%); }
}
<section class="cg-hr-marq"><div class="row" aria-hidden="true"><span>CREATIVE&nbsp;</span><span>CREATIVE&nbsp;</span></div><p>Studio Vision</p></section>
GROSS WT. 811 B ORIGINAL
CRG-17-009

RETRO WAVE

レトロ地平線グリッドRetro Horizon Grid

.cg-hr-horizon {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #1A0F2E 0 55%, #3B1D5E 55%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-horizon i {
  position: absolute;
  left: -40%;
  right: -40%;
  top: 55%;
  bottom: -30%;
  background-image:
    linear-gradient(rgba(232, 89, 172, .5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(232, 89, 172, .5) 2px, transparent 2px);
  background-size: 100% 24px, 44px 100%;
  transform: perspective(180px) rotateX(58deg);
  transform-origin: top;
  animation: cg-hr-horizon-run 1.6s linear infinite;
}
.cg-hr-horizon p {
  position: relative;
  margin: 0 0 34px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #FF8ADB;
  text-shadow: 0 0 14px rgba(255, 138, 219, .8);
}
@keyframes cg-hr-horizon-run {
  to { background-position: 0 24px, 0 0; }
}
<section class="cg-hr-horizon"><i></i><p>RETRO WAVE</p></section>
GROSS WT. 1010 B ORIGINAL
CRG-17-010

SILENT FOREST

霧ドリフト背景Fog Drift

.cg-hr-fog {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #22302B, #101A16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-fog::before,
.cg-hr-fog::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: radial-gradient(ellipse 45% 38% at 30% 60%, rgba(233, 231, 224, .16), transparent 70%);
  animation: cg-hr-fog-move 11s ease-in-out infinite alternate;
}
.cg-hr-fog::after {
  background: radial-gradient(ellipse 40% 32% at 70% 40%, rgba(233, 231, 224, .12), transparent 70%);
  animation-duration: 14s;
  animation-direction: alternate-reverse;
}
.cg-hr-fog p {
  position: relative;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .38em;
  color: #DCE5DF;
}
@keyframes cg-hr-fog-move {
  to { transform: translateX(16%); }
}
<section class="cg-hr-fog"><p>SILENT FOREST</p></section>
GROSS WT. 952 B ORIGINAL
CRG-17-011

PLAYGROUND

幾何図形フロートFloating Shapes

.cg-hr-shapes {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #FBF3E4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-shapes i { position: absolute; }
.cg-hr-shapes .s1 {
  top: 18px;
  left: 26px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #E8590C;
  transform: rotate(12deg);
  animation: cg-hr-shapes-f 4.5s ease-in-out infinite;
}
.cg-hr-shapes .s2 {
  right: 34px;
  top: 30px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3A9BD5;
  animation: cg-hr-shapes-f 5.4s ease-in-out infinite .8s;
}
.cg-hr-shapes .s3 {
  bottom: 22px;
  right: 74px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-bottom: 26px solid #F2B707;
  animation: cg-hr-shapes-f 5s ease-in-out infinite .4s;
}
.cg-hr-shapes p {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #1B1A17;
}
@keyframes cg-hr-shapes-f {
  50% { transform: translateY(-12px) rotate(-6deg); }
}
<section class="cg-hr-shapes"><i class="s1"></i><i class="s2"></i><i class="s3"></i><p>PLAYGROUND</p></section>
GROSS WT. 1155 B ORIGINAL
CRG-17-012

LAUNCH

回転ライトビームRotating Beam

.cg-hr-beam {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #171126;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-beam::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: conic-gradient(
    from 0deg,
    transparent 0 40deg,
    rgba(124, 79, 200, .35) 55deg,
    transparent 70deg 180deg,
    rgba(232, 89, 12, .3) 200deg,
    transparent 215deg
  );
  animation: cg-hr-beam-spin 8s linear infinite;
}
.cg-hr-beam p {
  position: relative;
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #F5F1FF;
}
@keyframes cg-hr-beam-spin {
  to { transform: rotate(360deg); }
}
<section class="cg-hr-beam"><p>LAUNCH</p></section>
GROSS WT. 795 B ORIGINAL
CRG-17-013

BUILD FASTER

コピペで、今日から。

動くグラデタイトルヒーローAnimated Gradient Title

.cg-hr-gtitle {
  width: 280px;
  height: 150px;
  border-radius: 14px;
  background: #FBF7F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cg-hr-gtitle p {
  margin: 0;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(100deg, #E8590C, #C2426B, #3A5A78, #E8590C);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cg-hr-gtitle-flow 4.5s linear infinite;
}
.cg-hr-gtitle span {
  font-size: 11.5px;
  font-weight: 700;
  color: #8B857A;
  letter-spacing: .16em;
}
@keyframes cg-hr-gtitle-flow {
  to { background-position: 260% center; }
}
<section class="cg-hr-gtitle"><p>BUILD FASTER</p><span>コピペで、今日から。</span></section>
GROSS WT. 821 B ORIGINAL
CRG-17-014

MOTION

斜めパネルスライドDiagonal Panels

.cg-hr-diag {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #1B1A17;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-diag i {
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 0 42%, rgba(232, 89, 12, .85) 42% 58%, transparent 58%);
  animation: cg-hr-diag-slide 4.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
.cg-hr-diag i:last-of-type {
  background: linear-gradient(115deg, transparent 0 46%, rgba(242, 183, 7, .7) 46% 54%, transparent 54%);
  animation-delay: .4s;
}
.cg-hr-diag p {
  position: relative;
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #FBF6EC;
}
@keyframes cg-hr-diag-slide {
  0% { transform: translateX(-70%); }
  55%, 100% { transform: translateX(70%); }
}
<section class="cg-hr-diag"><i></i><i></i><p>MOTION</p></section>
GROSS WT. 911 B ORIGINAL
CRG-17-015

SPARKLING

泡が昇るヒーローRising Bubbles

.cg-hr-bubbles {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #3A9BD5, #1E5378);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-bubbles p {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .26em;
  color: #EAF6FF;
}
.cg-hr-bubbles i {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .45);
  animation: cg-hr-bubbles-up 6s ease-in infinite;
}
.cg-hr-bubbles i:nth-child(1) { left: 14%; width: 26px; height: 26px; }
.cg-hr-bubbles i:nth-child(2) { left: 38%; width: 14px; height: 14px; animation-delay: 1.6s; }
.cg-hr-bubbles i:nth-child(3) { left: 64%; width: 34px; height: 34px; animation-delay: 3s; }
.cg-hr-bubbles i:nth-child(4) { left: 84%; width: 18px; height: 18px; animation-delay: 4.4s; }
@keyframes cg-hr-bubbles-up {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(-100px) translateX(-8px); }
  100% { transform: translateY(-210px) translateX(8px); opacity: 0; }
}
<section class="cg-hr-bubbles"><i></i><i></i><i></i><i></i><p>SPARKLING</p></section>
GROSS WT. 1260 B ORIGINAL
CRG-17-016

GOOD MORNING

日の出ループSunrise Loop

.cg-hr-sun {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #FDEBD2 0 66%, #E8B27D 66%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cg-hr-sun i {
  position: absolute;
  left: 50%;
  bottom: 34%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFD98A, #F2953F);
  box-shadow: 0 0 30px rgba(242, 149, 63, .65);
  animation: cg-hr-sun-rise 7s ease-in-out infinite;
}
.cg-hr-sun b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34%;
  height: 1px;
  background: rgba(120, 70, 30, .3);
}
.cg-hr-sun p {
  position: relative;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #7A4A1E;
}
@keyframes cg-hr-sun-rise {
  0%, 100% { transform: translateY(44px); opacity: .6; }
  45%, 65% { transform: translateY(0); opacity: 1; }
}
<section class="cg-hr-sun"><i></i><b></b><p>GOOD MORNING</p></section>
GROSS WT. 1038 B ORIGINAL
CRG-17-017

OCEAN

揺れる波レイヤーLayered Waves

.cg-hr-waves {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #EAF6FF, #BBDCF5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-waves p {
  margin: 0 0 30px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .32em;
  color: #1E5378;
}
.cg-hr-waves i,
.cg-hr-waves b {
  position: absolute;
  bottom: -14px;
  left: -50%;
  right: -50%;
  height: 56px;
  border-radius: 45% 55% 0 0 / 100% 100% 0 0;
  background: rgba(58, 155, 213, .55);
  animation: cg-hr-waves-sway 4s ease-in-out infinite alternate;
}
.cg-hr-waves b {
  bottom: -26px;
  background: #1E5378;
  animation-duration: 5.2s;
  animation-direction: alternate-reverse;
}
@keyframes cg-hr-waves-sway {
  to { transform: translateX(36px); }
}
<section class="cg-hr-waves"><p>OCEAN</p><i></i><b></b></section>
GROSS WT. 892 B ORIGINAL
CRG-17-018

MAKE A WISH

流れ星の夜空Comet Night

.cg-hr-comet {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #0B1026, #1A2342);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-comet p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .32em;
  color: #C7D3F5;
}
.cg-hr-comet i,
.cg-hr-comet b {
  position: absolute;
  top: 16px;
  left: -80px;
  width: 80px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  transform: rotate(16deg);
  animation: cg-hr-comet-fly 4.5s ease-in infinite;
}
.cg-hr-comet b {
  top: 52px;
  width: 54px;
  animation-delay: 2.2s;
  opacity: .7;
}
@keyframes cg-hr-comet-fly {
  0%, 55% { transform: translateX(0) translateY(0) rotate(16deg); opacity: 0; }
  60% { opacity: 1; }
  78%, 100% { transform: translateX(400px) translateY(110px) rotate(16deg); opacity: 0; }
}
<section class="cg-hr-comet"><i></i><b></b><p>MAKE A WISH</p></section>
GROSS WT. 1007 B ORIGINAL
CRG-17-019

CONNECT

波紋リングヒーローPulse Rings

.cg-hr-rings {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #10141F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-rings p {
  position: relative;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #EAF2FF;
}
.cg-hr-rings i {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(76, 95, 213, .8);
  animation: cg-hr-rings-out 3s ease-out infinite;
}
.cg-hr-rings i:nth-child(2) { animation-delay: 1s; }
.cg-hr-rings i:nth-child(3) { animation-delay: 2s; }
@keyframes cg-hr-rings-out {
  0% { transform: scale(.5); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}
<section class="cg-hr-rings"><i></i><i></i><i></i><p>CONNECT</p></section>
GROSS WT. 825 B ORIGINAL
CRG-17-020

OPENING

交差する2色イントロCrossing Colors

.cg-hr-cross {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #EFEDE6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-cross p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .26em;
  color: #1B1A17;
  mix-blend-mode: darken;
}
.cg-hr-cross i,
.cg-hr-cross b {
  position: absolute;
  inset: 0;
  background: #E8590C;
  transform: translateX(-101%);
  animation: cg-hr-cross-wipe 4s cubic-bezier(.7, 0, .3, 1) infinite;
  opacity: .9;
}
.cg-hr-cross b {
  background: #F2B707;
  animation-delay: .25s;
}
@keyframes cg-hr-cross-wipe {
  0% { transform: translateX(-101%); }
  38%, 55% { transform: translateX(0); }
  93%, 100% { transform: translateX(101%); }
}
<section class="cg-hr-cross"><i></i><b></b><p>OPENING</p></section>
GROSS WT. 880 B ORIGINAL
CRG-17-021

作業員がフォームを搬入Porter Delivers Form

.cg-hr-porter {
  position: relative;
  width: 300px;
  height: 190px;
  border-radius: 12px;
  background: #40C46F;
  overflow: hidden;
  animation: cg-hr-porter-fade 7s ease infinite;
}
.cg-hr-porter::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 16px;
  background: rgba(0, 0, 0, .1);
}
/* 搬入されるフォームカード */
.cg-hr-porter .card {
  position: absolute;
  left: 116px;
  top: 22px;
  width: 152px;
  height: 132px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(27, 26, 23, .18);
  padding: 12px;
  box-sizing: border-box;
  animation: cg-hr-porter-cardin 7s cubic-bezier(.3, .6, .4, 1) infinite;
}
.cg-hr-porter .card b { display: block; font-size: 12px; font-weight: 900; color: #1E6B3A; margin-bottom: 9px; font-family: sans-serif; }
.cg-hr-porter .card .in {
  display: block;
  height: 15px;
  border-radius: 5px;
  background: #F2F5F1;
  border: 1.5px solid #D6DED7;
  margin-bottom: 8px;
}
.cg-hr-porter .card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: 5px;
  background: #1E6B3A;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  font-family: sans-serif;
  animation: cg-hr-porter-btn 7s ease infinite;
}
/* CSSだけで描いた作業員(押して搬入→カードにもたれる) */
.cg-hr-porter .man {
  position: absolute;
  left: 66px;
  bottom: 24px;
  width: 36px;
  height: 66px;
  transform-origin: 50% 100%;
  animation: cg-hr-porter-manin 7s cubic-bezier(.3, .6, .4, 1) infinite;
}
.cg-hr-porter .head { position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #C89B6C; }
.cg-hr-porter .cap { position: absolute; right: 1px; top: -1px; width: 17px; height: 7px; border-radius: 5px 5px 0 0; background: #3A5A78; }
.cg-hr-porter .cap::after { content: ""; position: absolute; right: -5px; bottom: 0; width: 7px; height: 3px; border-radius: 2px; background: #3A5A78; }
.cg-hr-porter .torso {
  position: absolute;
  right: 2px;
  top: 17px;
  width: 17px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(#E8590C 42%, #F2B707 42% 58%, #E8590C 58%);
}
.cg-hr-porter .arm {
  position: absolute;
  right: -11px;
  top: 21px;
  width: 17px;
  height: 5px;
  border-radius: 3px;
  background: #C89B6C;
  transform-origin: 2px 50%;
  animation: cg-hr-porter-arm 7s ease infinite;
}
.cg-hr-porter .legf, .cg-hr-porter .legb {
  position: absolute;
  top: 40px;
  width: 5px;
  height: 26px;
  border-radius: 3px;
  background: #1B1A17;
  transform-origin: 50% 2px;
}
.cg-hr-porter .legf { right: 4px; animation: cg-hr-porter-legf 7s linear infinite; }
.cg-hr-porter .legb { right: 11px; animation: cg-hr-porter-legb 7s linear infinite; }
.cg-hr-porter .dust {
  position: absolute;
  bottom: 34px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  opacity: 0;
}
.cg-hr-porter .d1 { left: 34px; animation: cg-hr-porter-dust 7s ease infinite; }
.cg-hr-porter .d2 { left: 84px; animation: cg-hr-porter-dust 7s ease .8s infinite; }
/* 0-38% 押して搬入 / 41% 手を離した反動 / 以降は隣でひと休み */
@keyframes cg-hr-porter-cardin {
  0% { transform: translateX(-300px); }
  38% { transform: translateX(0); }
  41% { transform: translateX(5px) rotate(.6deg); }
  45%, 100% { transform: translateX(0) rotate(0); }
}
@keyframes cg-hr-porter-manin {
  0% { transform: translateX(-300px) rotate(9deg); }
  38% { transform: translateX(0) rotate(9deg); }
  46%, 100% { transform: translateX(0) rotate(0); }
}
@keyframes cg-hr-porter-arm {
  0%, 40% { transform: rotate(-10deg); }
  50%, 100% { transform: rotate(30deg); }
}
@keyframes cg-hr-porter-legf {
  0% { transform: rotate(24deg); }
  5% { transform: rotate(-24deg); }
  10% { transform: rotate(24deg); }
  15% { transform: rotate(-24deg); }
  20% { transform: rotate(24deg); }
  25% { transform: rotate(-24deg); }
  30% { transform: rotate(24deg); }
  35% { transform: rotate(-18deg); }
  40%, 100% { transform: rotate(0); }
}
@keyframes cg-hr-porter-legb {
  0% { transform: rotate(-24deg); }
  5% { transform: rotate(24deg); }
  10% { transform: rotate(-24deg); }
  15% { transform: rotate(24deg); }
  20% { transform: rotate(-24deg); }
  25% { transform: rotate(24deg); }
  30% { transform: rotate(-24deg); }
  35% { transform: rotate(18deg); }
  40%, 100% { transform: rotate(0); }
}
@keyframes cg-hr-porter-dust {
  0%, 8% { opacity: 0; transform: scale(.5); }
  14% { opacity: 1; }
  26% { opacity: 0; transform: scale(1.4) translateX(-8px); }
  100% { opacity: 0; }
}
@keyframes cg-hr-porter-btn {
  0%, 52% { transform: scale(1); }
  58% { transform: scale(1.08); }
  64% { transform: scale(1); }
  70% { transform: scale(1.08); }
  76%, 100% { transform: scale(1); }
}
@keyframes cg-hr-porter-fade {
  0%, 93% { opacity: 1; }
  100% { opacity: 0; }
}
<div class="cg-hr-porter" aria-hidden="true"><i class="dust d1"></i><i class="dust d2"></i><div class="card"><b>Register Now</b><i class="in"></i><i class="in"></i><span class="btn">NEXT</span></div><div class="man"><i class="cap"></i><i class="head"></i><i class="torso"></i><i class="arm"></i><i class="legf"></i><i class="legb"></i></div></div>
GROSS WT. 5292 B ORIGINAL
CRG-17-022

フォークリフトが納品Forklift Delivery

.cg-hr-lift {
  position: relative;
  width: 300px;
  height: 190px;
  border-radius: 12px;
  background: #F1ECE0;
  overflow: hidden;
  animation: cg-hr-lift-fade 7s ease infinite;
}
.cg-hr-lift::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 12px;
  background: repeating-linear-gradient(-45deg, #F2B707 0 12px, #1B1A17 12px 24px);
  opacity: .85;
}
/* 納品される貨物カード(降ろされた後にIN STOCKスタンプ) */
.cg-hr-lift .cargo {
  position: absolute;
  left: 58px;
  bottom: 20px;
  width: 70px;
  height: 58px;
  background: #C89B6C;
  border: 2px solid #1B1A17;
  border-radius: 6px;
  box-sizing: border-box;
  animation: cg-hr-lift-cargo 7s cubic-bezier(.35, .6, .45, 1) infinite;
}
.cg-hr-lift .cargo .tape { position: absolute; left: -2px; right: -2px; top: 8px; height: 7px; background: repeating-linear-gradient(-45deg, #F2B707 0 7px, #1B1A17 7px 14px); }
.cg-hr-lift .cargo b {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 22px;
  background: #fff;
  border: 1.5px solid #1B1A17;
  font-family: monospace;
  font-size: 7.5px;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  color: #1B1A17;
}
.cg-hr-lift .cargo .bars {
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 34px;
  height: 9px;
  background: repeating-linear-gradient(90deg, #1B1A17 0 2px, transparent 2px 5px, #1B1A17 5px 6px, transparent 6px 9px);
}
.cg-hr-lift .cargo::after {
  content: "IN STOCK";
  position: absolute;
  right: -14px;
  top: -12px;
  font-family: monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #2F8A59;
  border: 2px solid #2F8A59;
  border-radius: 3px;
  padding: 2px 5px;
  background: rgba(255, 255, 255, .85);
  transform: rotate(-10deg) scale(0);
  animation: cg-hr-lift-stamp 7s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* CSSだけで描いたフォークリフト(進入→荷降ろし→バック退場) */
.cg-hr-lift .truck {
  position: absolute;
  left: 132px;
  bottom: 18px;
  width: 104px;
  height: 84px;
  animation: cg-hr-lift-truck 7s cubic-bezier(.35, .6, .45, 1) infinite;
}
.cg-hr-lift .mast { position: absolute; left: 12px; bottom: 4px; width: 6px; height: 72px; border-radius: 3px; background: #1B1A17; }
.cg-hr-lift .fork {
  position: absolute;
  left: -46px;
  bottom: 6px;
  width: 58px;
  height: 6px;
  border-radius: 3px;
  background: #5A5650;
  animation: cg-hr-lift-fork 7s cubic-bezier(.35, .6, .45, 1) infinite;
}
.cg-hr-lift .cab {
  position: absolute;
  left: 20px;
  bottom: 10px;
  width: 66px;
  height: 34px;
  border-radius: 8px 12px 6px 6px;
  background: #E8590C;
  border: 2px solid #1B1A17;
  box-sizing: border-box;
}
.cg-hr-lift .roof {
  position: absolute;
  left: 30px;
  bottom: 42px;
  width: 42px;
  height: 32px;
  border: 3px solid #1B1A17;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
}
.cg-hr-lift .lamp {
  position: absolute;
  left: 44px;
  bottom: 76px;
  width: 10px;
  height: 7px;
  border-radius: 3px 3px 0 0;
  background: #F2B707;
  animation: cg-hr-lift-lamp 7s step-end infinite;
}
.cg-hr-lift .w {
  position: absolute;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1B1A17;
  animation: cg-hr-lift-wheel 7s cubic-bezier(.35, .6, .45, 1) infinite;
}
.cg-hr-lift .w::after { content: ""; position: absolute; left: 8px; top: 2px; width: 4px; height: 7px; border-radius: 2px; background: #E9E7E0; }
.cg-hr-lift .wf { left: 22px; }
.cg-hr-lift .wb { left: 62px; }
/* 貨物: 入場はフォーク上(浮いた状態)→40-52%で接地→そのまま残る */
@keyframes cg-hr-lift-cargo {
  0% { transform: translate(240px, -22px); }
  34% { transform: translate(0, -22px); }
  40% { transform: translate(0, -22px); }
  52% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes cg-hr-lift-truck {
  0% { transform: translateX(240px); }
  34% { transform: translateX(0); }
  62% { transform: translateX(0); }
  88%, 100% { transform: translateX(250px); }
}
@keyframes cg-hr-lift-fork {
  0%, 40% { transform: translateY(-22px); }
  52%, 100% { transform: translateY(0); }
}
@keyframes cg-hr-lift-wheel {
  0% { transform: rotate(0); }
  34% { transform: rotate(-2.5turn); }
  62% { transform: rotate(-2.5turn); }
  88%, 100% { transform: rotate(0); }
}
@keyframes cg-hr-lift-lamp {
  0%, 8%, 16%, 24%, 32% { background: #F2B707; }
  4%, 12%, 20%, 28% { background: #C0392B; }
  36%, 60% { background: #F2B707; }
  64%, 72%, 80% { background: #C0392B; }
  68%, 76%, 84%, 100% { background: #F2B707; }
}
@keyframes cg-hr-lift-stamp {
  0%, 56% { transform: rotate(-10deg) scale(0); }
  63% { transform: rotate(-10deg) scale(1.15); }
  67%, 100% { transform: rotate(-10deg) scale(1); }
}
@keyframes cg-hr-lift-fade {
  0%, 93% { opacity: 1; }
  100% { opacity: 0; }
}
<div class="cg-hr-lift" aria-hidden="true"><div class="cargo"><i class="tape"></i><b>CSS CARGO</b><i class="bars"></i></div><div class="truck"><i class="mast"></i><i class="fork"></i><i class="cab"></i><i class="roof"></i><i class="lamp"></i><i class="w wf"></i><i class="w wb"></i></div></div>
GROSS WT. 5149 B ORIGINAL
CRG-17-023

CARGOOPEN DOCK 24H

シャッターが開くドックヒーローShutter Dock Hero

/* 物語: 閉じたシャッターが巻き上がる → 光が差し込む → 見出しがばねで立ち上がる →
   足元の影が連動して広がる。最後にまた閉じてループする */
.cg-hr-shut {
  position: relative;
  width: 320px;
  height: 180px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(#241F1A, #14120F);
  font-family: 'Archivo Black', system-ui, sans-serif;
}
/* 床 */
.cg-hr-shut::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background: linear-gradient(#3A342C, #201D19);
}
/* 差し込む光 */
.cg-hr-shut-beam {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: 200px;
  height: 100%;
  margin-left: -100px;
  background: linear-gradient(180deg, rgba(242, 183, 7, .5), rgba(242, 183, 7, .08) 68%, transparent);
  clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  opacity: 0;
  animation: cg-hr-shut-beam 7s ease-in-out infinite;
}
.cg-hr-shut-shadow {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 1;
  width: 160px;
  height: 12px;
  margin-left: -80px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6), transparent 70%);
  opacity: 0;
  animation: cg-hr-shut-shadow 7s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-hr-shut-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-size: 32px;
  line-height: 1;
  letter-spacing: .06em;
  color: #FAF7F0;
  opacity: 0;
  animation: cg-hr-shut-title 7s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-hr-shut-title span {
  display: block;
  margin-top: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .32em;
  color: #F2B707;
}
/* シャッター本体。巻き上がるとスラットが上端で圧縮される */
.cg-hr-shut-slats {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: repeating-linear-gradient(180deg, #CBC6BA 0 6px, #A19B8F 6px 7px, #B8B3A7 7px 13px, #8B8579 13px 14px);
  border-bottom: 3px solid #6E6960;
  transform-origin: 50% 0;
  animation: cg-hr-shut-roll 7s ease-in-out infinite;
}
@keyframes cg-hr-shut-roll {
  0%, 10% { transform: scaleY(1); }
  36% { transform: scaleY(.05); }
  42% { transform: scaleY(.12); }
  50%, 82% { transform: scaleY(.07); }
  94%, 100% { transform: scaleY(1); }
}
@keyframes cg-hr-shut-beam {
  0%, 18% { opacity: 0; transform: scaleX(.3); }
  34% { opacity: .4; transform: scaleX(.72); }
  46% { opacity: .95; transform: scaleX(1); }
  72% { opacity: .75; transform: scaleX(1.04); }
  88% { opacity: .2; transform: scaleX(.8); }
  100% { opacity: 0; transform: scaleX(.3); }
}
@keyframes cg-hr-shut-title {
  0%, 34% { opacity: 0; transform: translateY(28px) scale(.94); }
  48% { opacity: 1; transform: translateY(-7px) scale(1.05); }
  56% { opacity: 1; transform: translateY(3px) scale(.99); }
  64%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(28px) scale(.94); }
}
@keyframes cg-hr-shut-shadow {
  0%, 34% { opacity: 0; transform: scaleX(.4); }
  48% { opacity: .9; transform: scaleX(1.14); }
  58% { opacity: .55; transform: scaleX(.92); }
  64%, 84% { opacity: .75; transform: scaleX(1); }
  96%, 100% { opacity: 0; transform: scaleX(.4); }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形は「開ききって見出しが出ている」状態。閉じたまま止めない */
  .cg-hr-shut-slats,
  .cg-hr-shut-beam,
  .cg-hr-shut-title,
  .cg-hr-shut-shadow { animation: none; }
  .cg-hr-shut-slats { transform: scaleY(.07); }
  .cg-hr-shut-beam { opacity: .85; transform: scaleX(1); }
  .cg-hr-shut-title { opacity: 1; transform: none; }
  .cg-hr-shut-shadow { opacity: .75; transform: scaleX(1); }
}
<div class="cg-hr-shut" aria-label="貨物ドックのシャッターが開くヒーロー"><span class="cg-hr-shut-beam"></span><span class="cg-hr-shut-shadow"></span><h2 class="cg-hr-shut-title">CARGO<span>OPEN DOCK 24H</span></h2><span class="cg-hr-shut-slats"></span></div>
GROSS WT. 4114 B ORIGINAL
CRG-17-024

NIGHT SHIFTOPEN

ネオンサイン点灯ヒーローNeon Sign Ignition Hero

.cg-hr-neon {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 20%, #171334 0%, #0A0812 72%);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 管の背後に溜まる光。点灯に合わせて広がる副次レイヤー */
.cg-hr-neon-halo {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 220px;
  height: 96px;
  margin: -48px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 61, 138, .55), rgba(255, 61, 138, 0));
  filter: blur(6px);
  animation: cg-hr-neon-halo 5.2s ease-in-out infinite;
}
/* 主管: 消灯 → ちらつき → 安定発光 の3段構成 */
.cg-hr-neon-line {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #FFE9F2;
  animation: cg-hr-neon-tube 5.2s ease-in-out infinite;
}
/* 副管: 主管が安定した後にばねで飛び出す */
.cg-hr-neon-tag {
  font-size: 10px;
  font-style: normal;
  letter-spacing: .4em;
  padding: 3px 9px 3px 13px;
  border: 2px solid rgba(120, 233, 255, .9);
  border-radius: 999px;
  color: #DBFBFF;
  box-shadow: 0 0 10px rgba(120, 233, 255, .5), inset 0 0 8px rgba(120, 233, 255, .35);
  animation: cg-hr-neon-tag 5.2s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* 床に落ちる反射。主管のちらつきと同期する */
.cg-hr-neon-floor {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 190px;
  height: 8px;
  margin-left: -95px;
  border-radius: 50%;
  background: rgba(255, 61, 138, .75);
  filter: blur(7px);
  animation: cg-hr-neon-floor 5.2s ease-in-out infinite;
}
@keyframes cg-hr-neon-tube {
  0%, 8% { color: #3A2B3C; text-shadow: none; }
  10% { color: #FFE9F2; text-shadow: 0 0 10px rgba(255, 61, 138, .9); }
  12% { color: #3A2B3C; text-shadow: none; }
  16% { color: #FFE9F2; text-shadow: 0 0 12px rgba(255, 61, 138, .9); }
  18% { color: #4A3346; text-shadow: none; }
  26% { color: #FFE9F2; text-shadow: 0 0 8px #FF3D8A, 0 0 24px rgba(255, 61, 138, .8); }
  62% { color: #FFF3F8; text-shadow: 0 0 10px #FF3D8A, 0 0 32px rgba(255, 61, 138, .85); }
  100% { color: #FFE9F2; text-shadow: 0 0 8px #FF3D8A, 0 0 22px rgba(255, 61, 138, .7); }
}
@keyframes cg-hr-neon-tag {
  0%, 28% { transform: scale(0) translateY(6px); opacity: 0; }
  36% { transform: scale(1.18) translateY(0); opacity: 1; }
  42% { transform: scale(.94); }
  50%, 92% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: .92; }
}
@keyframes cg-hr-neon-halo {
  0%, 18% { opacity: 0; transform: scale(.6); }
  26% { opacity: .95; transform: scale(1.08); }
  62% { opacity: .7; transform: scale(1); }
  100% { opacity: .82; transform: scale(1.03); }
}
@keyframes cg-hr-neon-floor {
  0%, 8% { opacity: 0; transform: scaleX(.5); }
  10% { opacity: .5; }
  12%, 18% { opacity: 0; }
  26% { opacity: .85; transform: scaleX(1.05); }
  100% { opacity: .68; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形は「点灯しきったネオン」。消灯状態で止めない */
  .cg-hr-neon-halo,
  .cg-hr-neon-line,
  .cg-hr-neon-tag,
  .cg-hr-neon-floor { animation: none; }
  .cg-hr-neon-line { color: #FFE9F2; text-shadow: 0 0 8px #FF3D8A, 0 0 24px rgba(255, 61, 138, .8); }
  .cg-hr-neon-halo { opacity: .82; }
  .cg-hr-neon-tag { transform: none; opacity: 1; }
  .cg-hr-neon-floor { opacity: .68; }
}
<section class="cg-hr-neon"><i class="cg-hr-neon-halo" aria-hidden="true"></i><p class="cg-hr-neon-line">NIGHT SHIFT<em class="cg-hr-neon-tag">OPEN</em></p><i class="cg-hr-neon-floor" aria-hidden="true"></i></section>
GROSS WT. 3759 B ORIGINAL
CRG-17-025

PREMIERE2026 COLLECTION

幕が開くプレミアヒーローCurtain Reveal Hero

.cg-hr-curtain {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #12100E;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 見出し: 幕が開ききってから、潰れて伸びながらばねで立ち上がる */
.cg-hr-curtain-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .22em;
  color: #F5F2EA;
  animation: cg-hr-curtain-title 6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* 副見出しは字間が開きながら遅れて追随する */
.cg-hr-curtain-title small {
  font-size: 9px;
  letter-spacing: .4em;
  color: #E8590C;
  animation: cg-hr-curtain-sub 6s ease-out infinite;
}
/* 幕本体: 縦の織り目を持たせて布らしくする */
.cg-hr-curtain-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background: repeating-linear-gradient(90deg, #2E2924 0 6px, #211E1A 6px 13px);
}
.cg-hr-curtain-l {
  left: 0;
  box-shadow: inset -14px 0 20px rgba(0, 0, 0, .55);
  animation: cg-hr-curtain-l 6s cubic-bezier(.76, 0, .24, 1) infinite;
}
.cg-hr-curtain-r {
  right: 0;
  box-shadow: inset 14px 0 20px rgba(0, 0, 0, .55);
  animation: cg-hr-curtain-r 6s cubic-bezier(.76, 0, .24, 1) infinite;
}
/* 開演直後に一度だけ舞台を撫でる光 */
.cg-hr-curtain-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  animation: cg-hr-curtain-sweep 6s ease-in-out infinite;
}
@keyframes cg-hr-curtain-l {
  0%, 12% { transform: translateX(0); }
  48%, 88% { transform: translateX(-102%); }
  100% { transform: translateX(0); }
}
@keyframes cg-hr-curtain-r {
  0%, 12% { transform: translateX(0); }
  48%, 88% { transform: translateX(102%); }
  100% { transform: translateX(0); }
}
@keyframes cg-hr-curtain-title {
  0%, 28% { opacity: 0; transform: translateY(18px) scale(.86, 1.12); }
  42% { opacity: 1; transform: translateY(-5px) scale(1.08, .9); }
  50% { transform: translateY(0) scale(.98, 1.03); }
  58%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  94%, 100% { opacity: 0; transform: translateY(6px) scale(1); }
}
@keyframes cg-hr-curtain-sub {
  0%, 46% { opacity: 0; letter-spacing: .12em; }
  62%, 84% { opacity: 1; letter-spacing: .4em; }
  92%, 100% { opacity: 0; letter-spacing: .4em; }
}
@keyframes cg-hr-curtain-sweep {
  0%, 46% { transform: translateX(-130px) skewX(-14deg); opacity: 0; }
  52% { opacity: 1; }
  74%, 100% { transform: translateX(320px) skewX(-14deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形は「幕が開いて見出しが読める」状態。閉じたまま止めない */
  .cg-hr-curtain-l,
  .cg-hr-curtain-r,
  .cg-hr-curtain-title,
  .cg-hr-curtain-title small,
  .cg-hr-curtain-sweep { animation: none; }
  .cg-hr-curtain-l { transform: translateX(-102%); }
  .cg-hr-curtain-r { transform: translateX(102%); }
  .cg-hr-curtain-title { opacity: 1; transform: none; }
  .cg-hr-curtain-title small { opacity: 1; }
  .cg-hr-curtain-sweep { opacity: 0; }
}
<section class="cg-hr-curtain"><p class="cg-hr-curtain-title">PREMIERE<small>2026 COLLECTION</small></p><i class="cg-hr-curtain-sweep" aria-hidden="true"></i><i class="cg-hr-curtain-pane cg-hr-curtain-l" aria-hidden="true"></i><i class="cg-hr-curtain-pane cg-hr-curtain-r" aria-hidden="true"></i></section>
GROSS WT. 3492 B ORIGINAL
CRG-17-026

DEEP FIELD

奥行きズームヒーローDepth Zoom Hero

.cg-hr-depth {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 50%, #16283A 0%, #080C14 76%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-depth-far,
.cg-hr-depth-mid,
.cg-hr-depth-near {
  position: absolute;
  inset: -20%;
}
/* 奥のレイヤー: 星屑が最もゆっくり手前に流れる */
.cg-hr-depth-far {
  background-image: radial-gradient(rgba(120, 190, 240, .55) 1.2px, transparent 1.4px);
  background-size: 20px 20px;
  animation: cg-hr-depth-far 7s ease-in infinite;
}
/* 中景リング: 奥から生まれて画面外へ抜ける */
.cg-hr-depth-mid {
  border-radius: 50%;
  border: 2px solid rgba(90, 200, 220, .5);
  box-shadow: 0 0 0 20px rgba(90, 200, 220, .1);
  animation: cg-hr-depth-mid 7s ease-in infinite;
}
/* 手前リング: 半周ずらして常に奥行きが途切れないようにする */
.cg-hr-depth-near {
  border-radius: 50%;
  border: 3px solid rgba(232, 89, 12, .55);
  filter: blur(1px);
  animation: cg-hr-depth-near 7s ease-in infinite;
  animation-delay: -3.5s;
}
/* 周辺減光。速度が乗る瞬間だけ締まる */
.cg-hr-depth-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, transparent 42%, rgba(4, 8, 14, .88) 100%);
  animation: cg-hr-depth-vig 7s ease-in-out infinite;
}
/* 見出しは字間を詰めながらばねで着地する */
.cg-hr-depth-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #EAF6FF;
  text-shadow: 0 2px 18px rgba(8, 14, 24, .9);
  animation: cg-hr-depth-title 7s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-hr-depth-far {
  0% { transform: scale(1); opacity: .3; }
  40% { opacity: .8; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes cg-hr-depth-mid {
  0% { transform: scale(.15); opacity: 0; }
  18% { opacity: .9; }
  70% { opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes cg-hr-depth-near {
  0% { transform: scale(.2); opacity: 0; }
  22% { opacity: .8; }
  100% { transform: scale(3.4); opacity: 0; }
}
@keyframes cg-hr-depth-vig {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}
@keyframes cg-hr-depth-title {
  0% { opacity: 0; transform: scale(.72); letter-spacing: .55em; }
  16% { opacity: 1; transform: scale(1.1); }
  24% { transform: scale(.97); }
  32%, 84% { opacity: 1; transform: scale(1); letter-spacing: .3em; }
  94%, 100% { opacity: 0; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形は「奥行きが組み上がって見出しが読める」一枚絵 */
  .cg-hr-depth-far,
  .cg-hr-depth-mid,
  .cg-hr-depth-near,
  .cg-hr-depth-vig,
  .cg-hr-depth-title { animation: none; }
  .cg-hr-depth-far { opacity: .55; transform: scale(1.2); }
  .cg-hr-depth-mid { opacity: .7; transform: scale(.9); }
  .cg-hr-depth-near { opacity: .5; transform: scale(1.7); }
  .cg-hr-depth-title { opacity: 1; transform: none; }
}
<section class="cg-hr-depth"><i class="cg-hr-depth-far" aria-hidden="true"></i><i class="cg-hr-depth-mid" aria-hidden="true"></i><i class="cg-hr-depth-near" aria-hidden="true"></i><i class="cg-hr-depth-vig" aria-hidden="true"></i><p class="cg-hr-depth-title">DEEP FIELD</p></section>
GROSS WT. 3343 B ORIGINAL