本文へスキップ

CRG-02 — HEADINGS

見出し装飾25点 在庫あり

下線・マーカー・囲み。記事の骨格を立てる。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-02-001

読まれる記事の書き方

蛍光マーカー見出しMarker Highlight

.cg-hd-marker {
  display: inline;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.6;
  background: linear-gradient(transparent 60%, #FFE28A 60%);
}
<h2 class="cg-hd-marker">読まれる記事の書き方</h2>
GROSS WT. 216 B ORIGINAL
CRG-02-002

サービスの特徴

左アクセントバー見出しSide Bar

.cg-hd-bar {
  padding: 6px 0 6px 18px;
  font-size: 24px;
  font-weight: 900;
  border-left: 6px solid #E8590C;
  line-height: 1.4;
}
<h2 class="cg-hd-bar">サービスの特徴</h2>
GROSS WT. 182 B ORIGINAL
CRG-02-003

料金プラン

二色下線見出しTwo-tone Underline

.cg-hd-twotone {
  display: inline-block;
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: 900;
  background:
    linear-gradient(#E8590C, #E8590C) no-repeat left bottom / 64px 4px,
    linear-gradient(#D9D5CB, #D9D5CB) no-repeat left bottom / 100% 4px;
}
<h2 class="cg-hd-twotone">料金プラン</h2>
GROSS WT. 310 B ORIGINAL
CRG-02-004

お申し込みの流れ

番号タグ見出しNumbered Tag

.cg-hd-num {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 900;
}
.cg-hd-num::before {
  content: attr(data-no);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  padding: 6px 10px;
  border-radius: 4px;
}
<h2 class="cg-hd-num" data-no="01">お申し込みの流れ</h2>
GROSS WT. 380 B ORIGINAL
CRG-02-005

今月のお知らせ

コーナー括弧見出しCorner Brackets

.cg-hd-bracket {
  position: relative;
  display: inline-block;
  padding: 14px 26px;
  font-size: 22px;
  font-weight: 900;
}
.cg-hd-bracket::before,
.cg-hd-bracket::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid #E8590C;
}
.cg-hd-bracket::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.cg-hd-bracket::after { bottom: 0; right: 0; border-left: none; border-top: none; }
<h2 class="cg-hd-bracket">今月のお知らせ</h2>
GROSS WT. 494 B ORIGINAL
CRG-02-006

スタッフ紹介

ステッチ囲み見出しStitched Box

.cg-hd-stitch {
  display: inline-block;
  padding: 12px 28px;
  font-size: 21px;
  font-weight: 900;
  color: #fff;
  background: #C89B6C;
  border-radius: 8px;
  box-shadow: 0 0 0 5px #C89B6C;
  border: 2px dashed rgba(255, 255, 255, .8);
}
<h2 class="cg-hd-stitch">スタッフ紹介</h2>
GROSS WT. 290 B ORIGINAL
CRG-02-007

NEXT LEVEL DESIGN

グラデ文字見出しGradient Text

.cg-hd-grad {
  display: inline-block;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(120deg, #E8590C 10%, #B03A5B 55%, #3A5A78 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
<h2 class="cg-hd-grad">NEXT LEVEL DESIGN</h2>
GROSS WT. 308 B ORIGINAL
CRG-02-008

SUMMER SALE

ずらし影見出しOffset Shadow

.cg-hd-offset {
  display: inline-block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #F2B707;
  text-shadow: 3px 3px 0 #1B1A17;
  -webkit-text-stroke: 1px #1B1A17;
}
<h2 class="cg-hd-offset">SUMMER SALE</h2>
GROSS WT. 235 B ORIGINAL
CRG-02-009

お客様の声

センター両線見出しCenter Rules

.cg-hd-center {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
}
.cg-hd-center::before,
.cg-hd-center::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #1B1A17;
  min-width: 40px;
}
<h2 class="cg-hd-center">お客様の声</h2>
GROSS WT. 307 B ORIGINAL
CRG-02-010

CONCEPT私たちの考え方

英字キッカー付き見出しEN Kicker

.cg-hd-kicker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 26px;
  font-weight: 900;
}
.cg-hd-kicker span {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .25em;
  color: #E8590C;
}
<h2 class="cg-hd-kicker"><span>CONCEPT</span>私たちの考え方</h2>
GROSS WT. 328 B ORIGINAL
CRG-02-011

ハンドメイド特集

マスキングテープ見出しMasking Tape

.cg-hd-tape {
  display: inline-block;
  padding: 10px 30px;
  font-size: 21px;
  font-weight: 900;
  color: #6B5A2E;
  background: rgba(242, 183, 7, .45);
  transform: rotate(-1.5deg);
  clip-path: polygon(2% 0, 98% 4%, 100% 96%, 0 100%);
}
<h2 class="cg-hd-tape">ハンドメイド特集</h2>
GROSS WT. 293 B ORIGINAL
CRG-02-012

期間限定セール

旗リボン見出しFlag Ribbon

.cg-hd-flag {
  display: inline-block;
  padding: 12px 42px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: #E8590C;
  clip-path: polygon(
    0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%,
    0 100%, 16px 50%
  );
}
<h2 class="cg-hd-flag">期間限定セール</h2>
GROSS WT. 287 B ORIGINAL
CRG-02-013

CREATIVE STUDIO

メッシュグラデ文字見出しMesh Gradient Text

.cg-hd-mesh {
  display: inline-block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .01em;
  background:
    radial-gradient(at 20% 30%, #E8590C 0, transparent 55%),
    radial-gradient(at 80% 20%, #C2426B 0, transparent 55%),
    radial-gradient(at 60% 85%, #3A5A78 0, transparent 60%),
    #F2B707;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
<h2 class="cg-hd-mesh">CREATIVE STUDIO</h2>
GROSS WT. 437 B ORIGINAL
CRG-02-014

RAW & BOLD

ブルータリスト重ね見出しBrutalist Stack

.cg-hd-brutal {
  display: inline-block;
  padding: 10px 24px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #1B1A17;
  background: #fff;
  border: 3px solid #1B1A17;
  box-shadow: 7px 7px 0 #E8590C, 14px 14px 0 #1B1A17;
}
<h2 class="cg-hd-brutal">RAW &amp; BOLD</h2>
GROSS WT. 293 B ORIGINAL
CRG-02-015

新着コンテンツ

下線が描かれる見出しDrawing Underline

.cg-hd-draw {
  display: inline-block;
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(#E8590C, #E8590C) no-repeat left bottom / 0% 4px;
  animation: cg-hd-draw-line 3s ease-in-out infinite;
}
@keyframes cg-hd-draw-line {
  0%, 15% { background-size: 0% 4px; }
  50%, 85% { background-size: 100% 4px; }
  100% { background-size: 0% 4px; background-position: right bottom; }
}
<h2 class="cg-hd-draw">新着コンテンツ</h2>
GROSS WT. 469 B ORIGINAL
CRG-02-016

NEWS

文字が順に浮かぶ見出しFloating Letters

.cg-hd-float {
  display: flex;
  gap: 3px;
  font-size: 30px;
  font-weight: 900;
}
.cg-hd-float span {
  animation: cg-hd-float-up 2.2s ease-in-out infinite;
}
.cg-hd-float span:nth-child(2) { animation-delay: .12s; }
.cg-hd-float span:nth-child(3) { animation-delay: .24s; }
.cg-hd-float span:nth-child(4) { animation-delay: .36s; color: #E8590C; }
@keyframes cg-hd-float-up {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}
<h2 class="cg-hd-float" aria-label="NEWS"><span>N</span><span>E</span><span>W</span><span>S</span></h2>
GROSS WT. 569 B ORIGINAL
CRG-02-017

今月の特集

流れるグラデ下線見出しFlowing Gradient Rule

.cg-hd-gflow {
  display: inline-block;
  padding-bottom: 12px;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(90deg, #E8590C, #F2B707, #C2426B, #E8590C) no-repeat left bottom / 100% 5px;
  background-size: 250% 5px;
  animation: cg-hd-gflow-run 3.5s linear infinite;
}
@keyframes cg-hd-gflow-run {
  to { background-position: 250% bottom; }
}
<h2 class="cg-hd-gflow">今月の特集</h2>
GROSS WT. 409 B ORIGINAL
CRG-02-018

開催中のセール

LIVEドット見出しLive Indicator

.cg-hd-live {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  font-weight: 900;
}
.cg-hd-live::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #C0392B;
  box-shadow: 0 0 0 0 rgba(192, 57, 43, .5);
  animation: cg-hd-live-pulse 1.6s ease-out infinite;
}
@keyframes cg-hd-live-pulse {
  70% { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}
<h2 class="cg-hd-live">開催中のセール</h2>
GROSS WT. 510 B ORIGINAL
CRG-02-019

サービス紹介

バーが伸びて始まる見出しGrowing Side Bar

.cg-hd-bargrow {
  position: relative;
  padding: 6px 0 6px 20px;
  font-size: 24px;
  font-weight: 900;
}
.cg-hd-bargrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: #E8590C;
  transform-origin: top;
  animation: cg-hd-bargrow-in 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cg-hd-bargrow-in {
  0% { transform: scaleY(0); }
  35%, 80% { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
<h2 class="cg-hd-bargrow">サービス紹介</h2>
GROSS WT. 549 B ORIGINAL
CRG-02-020

おしらせ

波線が流れる見出しFlowing Wavy Rule

.cg-hd-waveflow {
  display: inline-block;
  padding-bottom: 14px;
  font-size: 24px;
  font-weight: 900;
  background:
    radial-gradient(circle 5px at 5px 0, transparent 3.5px, #3A9BD5 3.5px 5px, transparent 5px) repeat-x left bottom / 20px 10px,
    radial-gradient(circle 5px at 5px 10px, transparent 3.5px, #3A9BD5 3.5px 5px, transparent 5px) repeat-x 10px calc(100% - 0px) / 20px 10px;
  animation: cg-hd-waveflow-run 1.6s linear infinite;
}
@keyframes cg-hd-waveflow-run {
  to { background-position: 20px bottom, 30px calc(100% - 0px); }
}
<h2 class="cg-hd-waveflow">おしらせ</h2>
GROSS WT. 592 B ORIGINAL
CRG-02-021

GLASS HEADING

グラスモーフィズム見出しGlass Frost Heading

.cg-hd-glass-wrap {
  position: relative;
  width: 260px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
}
.cg-hd-glass-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E8590C, #3A5A78 65%, #F2B707);
}
.cg-hd-glass {
  position: absolute;
  inset: 14px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #1B1A17;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 10px;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.cg-hd-glass-wrap:hover .cg-hd-glass {
  transform: scale(1.05);
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 14px 32px rgba(27, 26, 23, .28);
}
<div class="cg-hd-glass-wrap"><div class="cg-hd-glass-bg"></div><h2 class="cg-hd-glass">GLASS HEADING</h2></div>
GROSS WT. 1005 B ORIGINAL
CRG-02-022

FOCUS MODE

呼吸するグロー見出しBreathing Glow Heading

.cg-hd-breathe {
  display: inline-block;
  margin: 0;
  padding: 14px 30px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .05em;
  color: #1B1A17;
  background: #fff;
  border: 2px solid #E8590C;
  border-radius: 999px;
  animation: cg-hd-breathe-glow 3.2s ease-in-out infinite;
}
@keyframes cg-hd-breathe-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0); }
  50% { box-shadow: 0 0 26px 6px rgba(232, 89, 12, .35); }
}
<h2 class="cg-hd-breathe">FOCUS MODE</h2>
GROSS WT. 483 B ORIGINAL
CRG-02-023

CARGO MANIFEST

レールを走る見出しCargo Rail Heading

.cg-hd-rail {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 0 22px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .06em;
}
/* 台車の通過に合わせて文字が左から塗り替わる */
.cg-hd-rail-txt {
  background-image: linear-gradient(90deg, #E8590C 50%, #1B1A17 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cg-hd-rail-paint 4.2s cubic-bezier(.5, 0, .2, 1) infinite;
}
.cg-hd-rail-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #1B1A17 0 6px, transparent 6px 12px);
  opacity: .35;
}
/* 通過した跡に残る光 */
.cg-hd-rail-trail {
  position: absolute;
  left: 0;
  bottom: 8px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(242, 183, 7, 0), rgba(242, 183, 7, .6));
  animation: cg-hd-rail-trail 4.2s cubic-bezier(.5, 0, .2, 1) infinite;
}
/* 搬送台車。右端で着地して潰れ、伸びて静止する */
.cg-hd-rail-car {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 28px;
  height: 13px;
  border: 2px solid #1B1A17;
  border-radius: 2px;
  background: linear-gradient(180deg, #F2B707, #D79E05);
  transform-origin: 50% 100%;
  animation: cg-hd-rail-run 4.2s cubic-bezier(.5, 0, .2, 1) infinite;
}
@keyframes cg-hd-rail-run {
  0% { left: 0; transform: scale(1, 1); opacity: 0; }
  8% { left: 0; transform: scale(1, 1); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  58% { left: calc(100% - 28px); transform: scale(1, 1); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  66% { left: calc(100% - 28px); transform: scale(1.2, .8); }
  76% { left: calc(100% - 28px); transform: scale(.94, 1.1); }
  84% { left: calc(100% - 28px); transform: scale(1, 1); opacity: 1; }
  94%, 100% { left: calc(100% - 28px); transform: scale(1, 1); opacity: 0; }
}
@keyframes cg-hd-rail-trail {
  0%, 8% { width: 0; opacity: 0; }
  20% { opacity: .9; }
  58% { width: calc(100% - 28px); opacity: .9; }
  76% { width: calc(100% - 28px); opacity: .4; }
  94%, 100% { width: calc(100% - 28px); opacity: 0; }
}
@keyframes cg-hd-rail-paint {
  0%, 8% { background-position: 100% 0; }
  58%, 90% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-hd-rail-txt,
  .cg-hd-rail-trail,
  .cg-hd-rail-car { animation: none; }
  .cg-hd-rail-txt { background-position: 0 0; }
  .cg-hd-rail-car { left: calc(100% - 28px); }
  .cg-hd-rail-trail { width: calc(100% - 28px); opacity: .35; }
}
<h2 class="cg-hd-rail">
  <span class="cg-hd-rail-txt">CARGO MANIFEST</span>
  <span class="cg-hd-rail-line" aria-hidden="true"></span>
  <span class="cg-hd-rail-trail" aria-hidden="true"></span>
  <span class="cg-hd-rail-car" aria-hidden="true"></span>
</h2>
GROSS WT. 2930 B ORIGINAL
CRG-02-024

深夜の実験室

ネオン管が点灯する見出しNeon Sign Ignition

.cg-hd-neon {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 14px 22px 20px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.3;
}
/* 背後のハロー: 点灯後にゆっくり呼吸する(本体と別リズムで厚みを出す) */
.cg-hd-neon .halo {
  position: absolute;
  inset: -6px;
  border-radius: 40px;
  background: radial-gradient(60% 70% at 50% 55%, rgba(232, 89, 12, .38), rgba(232, 89, 12, 0) 70%);
  opacity: 0;
  animation: cg-hd-neon-halo 5s ease-in-out infinite;
}
/* 文字: 消灯 → チラつき → 完全点灯 の3段。管が温まる感じを不規則な段で作る */
.cg-hd-neon .txt {
  position: relative;
  display: inline-block;
  color: #FFE9D6;
  animation: cg-hd-neon-lit 5s steps(1, end) infinite;
}
/* 下のネオン管: 点灯に合わせてばねで左から伸び切る */
.cg-hd-neon .tube {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 10px;
  height: 4px;
  border-radius: 4px;
  background: #E8590C;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  animation: cg-hd-neon-tube 5s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-hd-neon-lit {
  0%, 12% { color: #6E655C; text-shadow: none; }
  14% { color: #FFE9D6; text-shadow: 0 0 6px rgba(232, 89, 12, .9), 0 0 18px rgba(232, 89, 12, .6); }
  17% { color: #6E655C; text-shadow: none; }
  21% { color: #FFE9D6; text-shadow: 0 0 6px rgba(232, 89, 12, .9), 0 0 16px rgba(232, 89, 12, .55); }
  24% { color: #6E655C; text-shadow: none; }
  30%, 88% {
    color: #FFF3E8;
    text-shadow:
      0 0 5px rgba(255, 233, 214, .95),
      0 0 14px rgba(232, 89, 12, .9),
      0 0 34px rgba(232, 89, 12, .6),
      0 0 62px rgba(242, 183, 7, .35);
  }
  94%, 100% { color: #6E655C; text-shadow: none; }
}
@keyframes cg-hd-neon-tube {
  0%, 24% { transform: scaleX(0); opacity: 0; box-shadow: none; }
  30% { transform: scaleX(1); opacity: 1; box-shadow: 0 0 12px rgba(232, 89, 12, .95), 0 0 30px rgba(232, 89, 12, .5); }
  40%, 88% { transform: scaleX(1); opacity: 1; box-shadow: 0 0 10px rgba(232, 89, 12, .8), 0 0 26px rgba(232, 89, 12, .4); }
  94%, 100% { transform: scaleX(0); opacity: 0; box-shadow: none; }
}
@keyframes cg-hd-neon-halo {
  0%, 26% { opacity: 0; transform: scale(.94); }
  32% { opacity: .95; transform: scale(1.04); }
  55% { opacity: .55; transform: scale(1); }
  78% { opacity: .9; transform: scale(1.03); }
  92%, 100% { opacity: 0; transform: scale(.94); }
}
/* 動きを止めたときは「点灯し切った状態」で静止させる */
@media (prefers-reduced-motion: reduce) {
  .cg-hd-neon .txt,
  .cg-hd-neon .tube,
  .cg-hd-neon .halo { animation: none; }
  .cg-hd-neon .txt {
    color: #FFF3E8;
    text-shadow: 0 0 5px rgba(255, 233, 214, .95), 0 0 14px rgba(232, 89, 12, .9), 0 0 34px rgba(232, 89, 12, .6);
  }
  .cg-hd-neon .tube {
    transform: scaleX(1);
    opacity: 1;
    box-shadow: 0 0 10px rgba(232, 89, 12, .8), 0 0 26px rgba(232, 89, 12, .4);
  }
  .cg-hd-neon .halo { opacity: .8; transform: scale(1); }
}
<h2 class="cg-hd-neon"><i class="halo" aria-hidden="true"></i><span class="txt">深夜の実験室</span><i class="tube" aria-hidden="true"></i></h2>
GROSS WT. 3207 B ORIGINAL
CRG-02-025

型押し見出し

型押しプレス見出しEmboss Press Heading

/* 3幕構成: 型が上から降りる → 着地の瞬間に文字が潰れ、粉塵が左右へ散る →
   型が上がり、文字がばねで戻って浮き彫り(エンボス)と押し跡が残る */
.cg-hd-press {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 22px 28px 20px;
  overflow: hidden;
  background: #E9E7E0;
  border-radius: 4px;
  font: 700 24px/1.3 "M PLUS 1", system-ui, sans-serif;
  color: #1B1A17;
}
/* 押し跡(グルーブ)。着地に合わせて中央から伸び、ばねで整う */
.cg-hd-press::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 11px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #C89B6C, #E8590C);
  box-shadow: inset 0 1px 0 rgba(27, 26, 23, .35);
  transform: scaleX(0);
  animation: cg-hd-press-line 4.4s linear infinite;
}
/* 降りてくる押し型 */
.cg-hd-press-die {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  height: 11px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(#6E6960, #2E2A25);
  box-shadow: 0 7px 15px -7px rgba(27, 26, 23, .75);
  animation: cg-hd-press-die 4.4s linear infinite;
}
.cg-hd-press-txt {
  position: relative;
  display: inline-block;
  animation: cg-hd-press-txt 4.4s linear infinite;
}
/* 粉塵の発生点 */
.cg-hd-press-dust {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
}
.cg-hd-press-dust::before,
.cg-hd-press-dust::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 26, 23, .3), rgba(27, 26, 23, 0) 70%);
  animation: cg-hd-press-dust-l 4.4s ease-out infinite;
}
.cg-hd-press-dust::after {
  animation-name: cg-hd-press-dust-r;
}
@keyframes cg-hd-press-die {
  0%, 12% { transform: translateY(-16px) scaleY(1); animation-timing-function: cubic-bezier(.6, 0, .85, .35); }
  30% { transform: translateY(3px) scaleY(.88); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  38% { transform: translateY(0) scaleY(1.04); }
  46% { transform: translateY(1px) scaleY(1); }
  62%, 100% { transform: translateY(-16px) scaleY(1); }
}
@keyframes cg-hd-press-txt {
  0%, 28% { transform: scale(1); text-shadow: 0 0 0 rgba(27, 26, 23, 0); }
  33% { transform: scale(1.05, .87); text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(27, 26, 23, .3); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  42% { transform: scale(.98, 1.06); }
  52% { transform: scale(1); }
  64%, 100% { transform: scale(1); text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 1px rgba(27, 26, 23, .4); }
}
@keyframes cg-hd-press-dust-l {
  0%, 29% { transform: translate(0, 0) scale(.2); opacity: 0; }
  34% { transform: translate(-9px, -5px) scale(1); opacity: .85; }
  48% { transform: translate(-24px, -10px) scale(1.7); opacity: .3; }
  64%, 100% { transform: translate(-36px, -3px) scale(2.2); opacity: 0; }
}
@keyframes cg-hd-press-dust-r {
  0%, 29% { transform: translate(0, 0) scale(.2); opacity: 0; }
  34% { transform: translate(9px, -4px) scale(.9); opacity: .8; }
  48% { transform: translate(25px, -11px) scale(1.6); opacity: .28; }
  64%, 100% { transform: translate(37px, -2px) scale(2.1); opacity: 0; }
}
@keyframes cg-hd-press-line {
  0%, 30% { transform: scaleX(0); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  40% { transform: scaleX(1.08); }
  48% { transform: scaleX(.96); }
  56%, 100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形は「押し終わった状態」。エンボス文字と押し跡が残った見出しになる */
  .cg-hd-press::after,
  .cg-hd-press-die,
  .cg-hd-press-txt,
  .cg-hd-press-dust::before,
  .cg-hd-press-dust::after { animation: none; }
  .cg-hd-press::after { transform: scaleX(1); }
  .cg-hd-press-txt { text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 1px rgba(27, 26, 23, .4); }
  .cg-hd-press-die,
  .cg-hd-press-dust { display: none; }
}
<h3 class="cg-hd-press">
  <span class="cg-hd-press-die" aria-hidden="true"></span>
  <span class="cg-hd-press-txt">型押し見出し</span>
  <span class="cg-hd-press-dust" aria-hidden="true"></span>
</h3>
GROSS WT. 4222 B ORIGINAL