本文へスキップ

CRG-14 — ALERTS

アラート・注意書き25点 在庫あり

お知らせ・成功・警告・エラー。伝わる報せ方。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-14-001

7月10日はメンテナンスのため休止します。

インフォメーションInfo Box

.cg-al-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 320px;
  padding: 14px 18px;
  color: #234A66;
  background: #E8F1F8;
  border: 1.5px solid #A9C7DC;
  border-radius: 10px;
}
.cg-al-info svg { flex: none; margin-top: 2px; }
.cg-al-info p { margin: 0; font-size: 13.5px; line-height: 1.7; }
<div class="cg-al-info" role="note"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg><p>7月10日はメンテナンスのため休止します。</p></div>
GROSS WT. 677 B ORIGINAL
CRG-14-002

送信が完了しました。ありがとうございます。

成功メッセージSuccess

.cg-al-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 320px;
  padding: 14px 18px;
  color: #1E5A38;
  background: #E5F4EA;
  border: 1.5px solid #9CCDAD;
  border-radius: 10px;
}
.cg-al-success svg { flex: none; margin-top: 2px; }
.cg-al-success p { margin: 0; font-size: 13.5px; line-height: 1.7; }
<div class="cg-al-success" role="status"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m8.5 12.5 2.5 2.5 4.5-5"/></svg><p>送信が完了しました。ありがとうございます。</p></div>
GROSS WT. 690 B ORIGINAL
CRG-14-003

警告メッセージWarning

.cg-al-warn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 320px;
  padding: 14px 18px;
  color: #7A5200;
  background: #FCF3DC;
  border: 1.5px solid #E2C377;
  border-radius: 10px;
}
.cg-al-warn svg { flex: none; margin-top: 2px; }
.cg-al-warn p { margin: 0; font-size: 13.5px; line-height: 1.7; }
<div class="cg-al-warn" role="alert"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><p>この操作は取り消せません。よく確認してください。</p></div>
GROSS WT. 742 B ORIGINAL
CRG-14-004

エラーメッセージError

.cg-al-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 320px;
  padding: 14px 18px;
  color: #8A2A20;
  background: #FBEAE7;
  border: 1.5px solid #E0A199;
  border-radius: 10px;
}
.cg-al-error svg { flex: none; margin-top: 2px; }
.cg-al-error p { margin: 0; font-size: 13.5px; line-height: 1.7; }
<div class="cg-al-error" role="alert"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg><p>メールアドレスの形式が正しくありません。</p></div>
GROSS WT. 672 B ORIGINAL
CRG-14-005
NOTE

クラス名は cg- で始まります。既存CSSと衝突しません。

左バー注釈Left Bar Note

.cg-al-note {
  max-width: 320px;
  padding: 14px 18px;
  background: #F3EFE5;
  border-left: 5px solid #C89B6C;
  border-radius: 0 10px 10px 0;
}
.cg-al-note b {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  color: #A0763E;
  margin-bottom: 6px;
}
.cg-al-note p { margin: 0; font-size: 13.5px; line-height: 1.7; }
<div class="cg-al-note" role="note"><b>NOTE</b><p>クラス名は cg- で始まります。既存CSSと衝突しません。</p></div>
GROSS WT. 466 B ORIGINAL
CRG-14-006
ここがポイント

タイトル部分を枠線に重ねると、視線が最初にタイトルへ向かいます。

タイトル付きコールアウトTitled Callout

.cg-al-callout {
  position: relative;
  max-width: 320px;
  margin-top: 12px;
  padding: 22px 20px 16px;
  border: 2px solid #E8590C;
  border-radius: 12px;
  background: #fff;
}
.cg-al-callout b {
  position: absolute;
  top: -13px;
  left: 16px;
  padding: 2px 14px;
  font-size: 12.5px;
  color: #fff;
  background: #E8590C;
  border-radius: 30px;
}
.cg-al-callout p { margin: 0; font-size: 13.5px; line-height: 1.8; }
<div class="cg-al-callout" role="note"><b>ここがポイント</b><p>タイトル部分を枠線に重ねると、視線が最初にタイトルへ向かいます。</p></div>
GROSS WT. 598 B ORIGINAL
CRG-14-007
保存しました

トースト通知Toast

.cg-al-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(27, 26, 23, .3);
  animation: cg-al-toast-in .35s cubic-bezier(.2, .9, .3, 1.2);
}
.cg-al-toast svg { color: #6FCF8E; }
.cg-al-toast button {
  margin-left: 8px;
  border: none;
  background: none;
  color: #9B968C;
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
}
.cg-al-toast button:hover { color: #fff; }
@keyframes cg-al-toast-in {
  from { transform: translateY(14px); opacity: 0; }
}
<div class="cg-al-toast" role="status"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m8.5 12.5 2.5 2.5 4.5-5"/></svg>保存しました<button type="button" aria-label="閉じる">×</button></div>
GROSS WT. 987 B ORIGINAL
CRG-14-008
期間限定全商品 送料無料キャンペーン中 詳細を見る

帯バナー告知Top Banner

.cg-al-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 320px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, #E8590C, #C2426B);
}
.cg-al-banner span {
  padding: 2px 10px;
  font-size: 11px;
  background: rgba(255, 255, 255, .22);
  border-radius: 30px;
}
.cg-al-banner a { color: #fff; text-underline-offset: 3px; }
<div class="cg-al-banner"><span>期間限定</span>全商品 送料無料キャンペーン中 <a href="#">詳細を見る</a></div>
GROSS WT. 584 B ORIGINAL
CRG-14-009
在庫が残りわずかです。お早めにどうぞ。

ゴースト(枠のみ)アラートGhost Alert

.cg-al-ghost {
  max-width: 320px;
  padding: 13px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: #B84508;
  border: 2px dashed #E8590C;
  border-radius: 10px;
  background: transparent;
}
<div class="cg-al-ghost" role="note">在庫が残りわずかです。お早めにどうぞ。</div>
GROSS WT. 297 B ORIGINAL
CRG-14-010
DOクラス名はそのまま使う
DON'T接頭辞を勝手に削る

DO / DON'T ボックスDo & Don't

.cg-al-dd {
  display: grid;
  gap: 10px;
  width: 280px;
  font-size: 13px;
}
.cg-al-dd > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
}
.cg-al-dd b {
  flex: none;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 3px 10px;
  border-radius: 4px;
  color: #fff;
}
.cg-al-dd .do { background: #E5F4EA; }
.cg-al-dd .do b { background: #2FA45E; }
.cg-al-dd .dont { background: #FBEAE7; }
.cg-al-dd .dont b { background: #C0392B; }
<div class="cg-al-dd"><div class="do"><b>DO</b>クラス名はそのまま使う</div><div class="dont"><b>DON'T</b>接頭辞を勝手に削る</div></div>
GROSS WT. 646 B ORIGINAL
CRG-14-012

点滅アテンション帯Attention Strip

.cg-al-strip {
  width: 300px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  color: #fff;
  background: #C0392B;
  border-radius: 8px;
  animation: cg-al-strip-pulse 1.6s ease-in-out infinite;
}
@keyframes cg-al-strip-pulse {
  50% { background: #E8590C; }
}
<div class="cg-al-strip" role="alert">本日23:59まで — 最終受付</div>
GROSS WT. 397 B ORIGINAL
CRG-14-013
JSなしで、DOMに追加された瞬間ふわっと出現します

@starting-style出現アラートStarting-Style Entrance

/* @starting-style: 要素が最初に描画される時の状態を定義。
   display:none→表示 や insertAdjacentHTML でもtransitionが効く */
.cg-al-enter {
  max-width: 320px;
  padding: 14px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: #234A66;
  background: #E8F1F8;
  border: 1.5px solid #A9C7DC;
  border-radius: 10px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1.1);
}
@starting-style {
  .cg-al-enter {
    opacity: 0;
    transform: translateY(14px);
  }
}
<div class="cg-al-enter" role="status">JSなしで、DOMに追加された瞬間ふわっと出現します</div>
GROSS WT. 671 B ORIGINAL
CRG-14-014
期間限定 — 全パーツ無料公開中

スライドインする告知バーSliding Banner

.cg-al-slidein {
  width: 300px;
  padding: 13px 0;
  font-size: 13.5px;
  font-weight: 900;
  text-align: center;
  color: #fff;
  background: linear-gradient(120deg, #E8590C, #C2426B);
  border-radius: 10px;
  animation: cg-al-slidein-move 4.5s cubic-bezier(.2, .9, .3, 1) infinite;
}
@keyframes cg-al-slidein-move {
  0% { transform: translateX(-110%); opacity: 0; }
  12%, 85% { transform: translateX(0); opacity: 1; }
  97%, 100% { transform: translateX(110%); opacity: 0; }
}
<div class="cg-al-slidein" role="status">期間限定 — 全パーツ無料公開中</div>
GROSS WT. 572 B ORIGINAL
CRG-14-015
アップロード完了

残り時間バー付きトーストTimed Toast

.cg-al-timer {
  position: relative;
  display: inline-block;
  padding: 14px 24px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  border-radius: 10px;
  overflow: hidden;
}
.cg-al-timer i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: #F2B707;
  transform-origin: left;
  animation: cg-al-timer-drain 3s linear infinite;
}
@keyframes cg-al-timer-drain {
  0% { transform: scaleX(1); }
  85%, 100% { transform: scaleX(0); }
}
<div class="cg-al-timer" role="status">アップロード完了<i aria-hidden="true"></i></div>
GROSS WT. 604 B ORIGINAL
CRG-14-016
リマインダー: 15時からミーティング

ベルが鳴る通知Ringing Bell

.cg-al-bell {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 700;
  background: #FFF3D1;
  border: 2px solid #F2B707;
  border-radius: 12px;
}
.cg-al-bell svg {
  color: #A07800;
  transform-origin: top center;
  animation: cg-al-bell-swing 2.6s ease-in-out infinite;
}
@keyframes cg-al-bell-swing {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(16deg); }
  82% { transform: rotate(-14deg); }
  88% { transform: rotate(9deg); }
  94% { transform: rotate(-5deg); }
}
<div class="cg-al-bell" role="status"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>リマインダー: 15時からミーティング</div>
GROSS WT. 917 B ORIGINAL
CRG-14-017

枠が明滅する警告Flashing Border

.cg-al-flash {
  max-width: 320px;
  padding: 14px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: #8A2A20;
  background: #FBEAE7;
  border: 2px solid #C0392B;
  border-radius: 10px;
  animation: cg-al-flash-border 1.4s ease-in-out infinite;
}
@keyframes cg-al-flash-border {
  50% { border-color: rgba(192, 57, 43, .25); box-shadow: 0 0 0 4px rgba(192, 57, 43, .08); }
}
<div class="cg-al-flash" role="alert">サーバー負荷が高くなっています</div>
GROSS WT. 468 B ORIGINAL
CRG-14-018
デプロイを実行しています

処理中ステータスProcessing Status

.cg-al-proc {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: #234A66;
  background: #E8F1F8;
  border: 1.5px solid #A9C7DC;
  border-radius: 10px;
}
.cg-al-proc i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid rgba(58, 90, 120, .3);
  border-top-color: #3A5A78;
  animation: cg-al-proc-spin .8s linear infinite;
}
.cg-al-proc b::after {
  content: "";
  animation: cg-al-proc-dots 1.5s steps(4, jump-none) infinite;
}
@keyframes cg-al-proc-spin { to { transform: rotate(360deg); } }
@keyframes cg-al-proc-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}
<div class="cg-al-proc" role="status"><i aria-hidden="true"></i>デプロイを実行しています<b aria-hidden="true"></b></div>
GROSS WT. 902 B ORIGINAL
CRG-14-019

緊急ストライプバーEmergency Tape

.cg-al-emg {
  width: 300px;
  padding: 4px;
  border-radius: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #F2B707 0 14px,
    #1B1A17 14px 28px
  );
  animation: cg-al-emg-run 1.2s linear infinite;
}
.cg-al-emg span {
  display: block;
  padding: 10px 0;
  font-size: 13.5px;
  font-weight: 900;
  text-align: center;
  background: #fff;
  border-radius: 7px;
}
@keyframes cg-al-emg-run {
  to { background-position: 40px 0; }
}
<div class="cg-al-emg" role="alert"><span>システムメンテナンス中</span></div>
GROSS WT. 535 B ORIGINAL
CRG-14-020
送信が完了しました

チェックが描かれる成功Drawing Check

.cg-al-draw {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #1E5A38;
  background: #E5F4EA;
  border-radius: 12px;
}
.cg-al-draw svg {
  width: 34px;
  height: 34px;
  stroke: #2FA45E;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cg-al-draw circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: cg-al-draw-line 2.8s ease-out infinite;
}
.cg-al-draw path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: cg-al-draw-line 2.8s ease-out .5s infinite;
}
@keyframes cg-al-draw-line {
  30%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
<div class="cg-al-draw" role="status"><svg viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="23" fill="none"/><path fill="none" d="M14 27l8 8 16-17"/></svg>送信が完了しました</div>
GROSS WT. 912 B ORIGINAL
CRG-14-021
ファイルを保存しました

グラスモーフィズムトーストGlass Toast

.cg-al-gtoast-wrap {
  position: relative;
  width: 270px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #3A5A78, #E8590C 70%, #F2B707);
}
.cg-al-gtoast {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1B1A17;
  background: rgba(255, 255, 255, .4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 10px;
  animation:
    cg-al-gtoast-in .6s cubic-bezier(.2, .8, .2, 1),
    cg-al-gtoast-float 3s ease-in-out .6s infinite;
}
.cg-al-gtoast-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E8590C;
  animation: cg-al-gtoast-pulse 1.8s ease-in-out infinite;
}
@keyframes cg-al-gtoast-in {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes cg-al-gtoast-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes cg-al-gtoast-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .5); }
  50% { box-shadow: 0 0 0 6px rgba(232, 89, 12, 0); }
}
<div class="cg-al-gtoast-wrap"><div class="cg-al-gtoast"><span class="cg-al-gtoast-dot"></span>ファイルを保存しました</div></div>
GROSS WT. 1403 B ORIGINAL
CRG-14-022
接続は保護されていますこの通信は暗号化されました

施錠される保護通知Secured Lock Alert

.cg-al-lock {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 300px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #E3DFD4;
  background: #FFFDF8;
  box-shadow: 0 4px 14px rgba(27, 26, 23, .08);
  font-family: system-ui, -apple-system, sans-serif;
  animation: cg-al-lock-box 4s ease infinite;
}
.cg-al-lock-ico {
  position: relative;
  flex: none;
  width: 30px;
  height: 34px;
}
/* 施錠の衝撃で外へ広がる波紋 */
.cg-al-lock-ico .rg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #2F8A59;
  opacity: 0;
  animation: cg-al-lock-ring 4s cubic-bezier(.2, .7, .3, 1) infinite;
}
/* シャックル: 落ちて掛かる。行き過ぎて戻るばね */
.cg-al-lock-ico .sh {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border: 3px solid #A8A296;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  animation: cg-al-lock-shackle 4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* 本体: 受け止めた瞬間だけ潰れて、戻りで伸びる */
.cg-al-lock-ico .bd {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 22px;
  border-radius: 5px;
  background: #A8A296;
  transform-origin: 50% 100%;
  animation: cg-al-lock-body 4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-al-lock-ico .bd::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #FFFDF8;
}
.cg-al-lock-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: cg-al-lock-text 4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-al-lock-txt b {
  font-size: 14px;
  font-weight: 700;
  color: #1B1A17;
}
.cg-al-lock-txt small {
  font-size: 11.5px;
  color: #6B655A;
}
@keyframes cg-al-lock-shackle {
  0%, 10% { transform: translateY(-7px); border-color: #A8A296; }
  26% { transform: translateY(3px); border-color: #2F8A59; }
  34% { transform: translateY(0); }
  88% { transform: translateY(0); border-color: #2F8A59; }
  100% { transform: translateY(-7px); border-color: #A8A296; }
}
@keyframes cg-al-lock-body {
  0%, 22% { transform: scale(1, 1); background: #A8A296; }
  28% { transform: scale(1.12, .86); background: #2F8A59; }
  38% { transform: scale(.97, 1.05); }
  46%, 88% { transform: scale(1, 1); background: #2F8A59; }
  100% { transform: scale(1, 1); background: #A8A296; }
}
@keyframes cg-al-lock-ring {
  0%, 24% { transform: scale(.35); opacity: 0; }
  30% { transform: scale(.65); opacity: .8; }
  56% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes cg-al-lock-text {
  0%, 26% { opacity: 0; transform: translateX(-8px); }
  42% { opacity: 1; transform: translateX(0); }
  88% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-8px); }
}
@keyframes cg-al-lock-box {
  0%, 24% { border-color: #E3DFD4; }
  36% { border-color: #2F8A59; }
  60%, 88% { border-color: rgba(47, 138, 89, .45); }
  100% { border-color: #E3DFD4; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-al-lock, .cg-al-lock-ico .rg, .cg-al-lock-ico .sh, .cg-al-lock-ico .bd, .cg-al-lock-txt { animation: none; }
  .cg-al-lock { border-color: rgba(47, 138, 89, .45); }
  .cg-al-lock-ico .rg { opacity: 0; }
  .cg-al-lock-ico .sh { transform: translateY(0); border-color: #2F8A59; }
  .cg-al-lock-ico .bd { background: #2F8A59; }
  .cg-al-lock-txt { opacity: 1; transform: translateX(0); }
}
<div class="cg-al-lock" role="status"><span class="cg-al-lock-ico" aria-hidden="true"><i class="rg"></i><i class="sh"></i><i class="bd"></i></span><span class="cg-al-lock-txt"><b>接続は保護されています</b><small>この通信は暗号化されました</small></span></div>
GROSS WT. 3829 B ORIGINAL
CRG-14-023
荷受け完了伝票 CG-2481 を登録しました

落ちて着地する通知Drop & Land Alert

/* 物語: 上から落ちてくる → 着地の瞬間だけ潰れ、影が広がり粒が跳ねる → 遅れてチェックがばねで出る。
   動く層は「カード / 影 / 粒 / アイコン」の4つ。潰れと伸びは着地フレームにだけ入れる */
.cg-al-drop {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 268px;
  height: 92px;
  padding-bottom: 12px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}
.cg-al-drop-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  box-sizing: border-box;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  background: #fff;
  box-shadow: 4px 4px 0 #1B1A17;
  transform-origin: 50% 100%;
  animation: cg-al-drop-card 3.6s cubic-bezier(.24, .74, .32, 1) infinite;
}
.cg-al-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E8590C;
  color: #fff;
  transform: scale(0);
  animation: cg-al-drop-icon 3.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-al-drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.cg-al-drop-text b { font-size: 13px; color: #1B1A17; }
.cg-al-drop-text small {
  font-size: 11px;
  color: #6B675E;
  font-family: 'IBM Plex Mono', monospace;
}
.cg-al-drop-shadow {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 160px;
  height: 12px;
  margin-left: -80px;
  border-radius: 50%;
  background: rgba(27, 26, 23, .28);
  filter: blur(3px);
  opacity: 0;
  transform: scale(.3, .5);
  animation: cg-al-drop-shadow 3.6s cubic-bezier(.24, .74, .32, 1) infinite;
}
.cg-al-drop-dust {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #E8590C;
  opacity: 0;
  animation: cg-al-drop-dust-a 3.6s cubic-bezier(.2, .7, .4, 1) infinite;
}
.cg-al-drop-dust-2 {
  width: 5px;
  height: 5px;
  background: #F2B707;
  animation-name: cg-al-drop-dust-b;
}
.cg-al-drop-dust-3 {
  width: 4px;
  height: 4px;
  background: #3A5A78;
  animation-name: cg-al-drop-dust-c;
}
@keyframes cg-al-drop-card {
  0% { transform: translateY(-70px) scale(.98, 1.08); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translateY(0) scale(1); }
  37% { transform: translateY(0) scale(1.09, .85); }
  47% { transform: translateY(-7px) scale(.97, 1.06); }
  57% { transform: translateY(0) scale(1.02, .98); }
  66%, 90% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-70px) scale(.98, 1.08); opacity: 0; }
}
@keyframes cg-al-drop-icon {
  0%, 38% { transform: scale(0) rotate(-30deg); }
  49% { transform: scale(1.3) rotate(8deg); }
  58% { transform: scale(.9) rotate(-4deg); }
  67%, 90% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(0) rotate(-30deg); }
}
@keyframes cg-al-drop-shadow {
  0% { transform: scale(.3, .5); opacity: 0; }
  22% { transform: scale(.62, .8); opacity: .45; }
  37% { transform: scale(1.16, 1); opacity: .95; }
  50% { transform: scale(.9, .88); opacity: .6; }
  66%, 90% { transform: scale(1, 1); opacity: .8; }
  100% { transform: scale(.3, .5); opacity: 0; }
}
@keyframes cg-al-drop-dust-a {
  0%, 34% { transform: translate(-72px, 0) scale(.3) rotate(0deg); opacity: 0; }
  40% { transform: translate(-86px, -22px) scale(1) rotate(70deg); opacity: 1; }
  56% { transform: translate(-108px, 6px) scale(.8) rotate(190deg); opacity: 0; }
  100% { transform: translate(-108px, 6px) scale(.8) rotate(190deg); opacity: 0; }
}
@keyframes cg-al-drop-dust-b {
  0%, 34% { transform: translate(66px, 0) scale(.3) rotate(0deg); opacity: 0; }
  41% { transform: translate(82px, -26px) scale(1) rotate(-80deg); opacity: 1; }
  58% { transform: translate(106px, 4px) scale(.8) rotate(-200deg); opacity: 0; }
  100% { transform: translate(106px, 4px) scale(.8) rotate(-200deg); opacity: 0; }
}
@keyframes cg-al-drop-dust-c {
  0%, 35% { transform: translate(-20px, 0) scale(.3) rotate(0deg); opacity: 0; }
  42% { transform: translate(-30px, -32px) scale(1) rotate(120deg); opacity: .9; }
  60% { transform: translate(-44px, -4px) scale(.75) rotate(260deg); opacity: 0; }
  100% { transform: translate(-44px, -4px) scale(.75) rotate(260deg); opacity: 0; }
}
/* 静止形 = 着地して読み終えた状態。落下も粒も無いが通知として崩れず成立する */
@media (prefers-reduced-motion: reduce) {
  .cg-al-drop-card,
  .cg-al-drop-icon,
  .cg-al-drop-shadow,
  .cg-al-drop-dust { animation: none; }
  .cg-al-drop-card { transform: none; opacity: 1; }
  .cg-al-drop-icon { transform: none; }
  .cg-al-drop-shadow { transform: scale(1); opacity: .8; }
  .cg-al-drop-dust { opacity: 0; }
}
<div class="cg-al-drop" role="status">
  <span class="cg-al-drop-shadow" aria-hidden="true"></span>
  <div class="cg-al-drop-card">
    <span class="cg-al-drop-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5 9.5 18 20 6.5"/></svg>
    </span>
    <span class="cg-al-drop-text"><b>荷受け完了</b><small>伝票 CG-2481 を登録しました</small></span>
  </div>
  <span class="cg-al-drop-dust cg-al-drop-dust-1" aria-hidden="true"></span>
  <span class="cg-al-drop-dust cg-al-drop-dust-2" aria-hidden="true"></span>
  <span class="cg-al-drop-dust cg-al-drop-dust-3" aria-hidden="true"></span>
</div>
GROSS WT. 5600 B ORIGINAL
CRG-14-024
オンラインに復帰しました未送信のデータを同期しています

接続復帰アラート(電波が立つ)Back Online

/* 圏外の灰色から始まり、電波が1本ずつばねで立ち上がる→帯そのものが緑に染まる→
   光が横切って見出しが飛び込む。4.8秒周期で「復帰した瞬間」を繰り返す */
.cg-al-sig {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  box-sizing: border-box;
  width: 320px;
  padding: 14px 18px;
  border: 1px solid #DDD9CF;
  border-radius: 12px;
  background: #F2F1EC;
  animation: cg-al-sig-band 4.8s ease-in-out infinite;
}
/* 電波バー: 4本を段差の高さで並べ、遅延をずらして順に立てる */
.cg-al-sig-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex: none;
  height: 26px;
}
.cg-al-sig-bars b {
  display: block;
  width: 5px;
  border-radius: 2px;
  background: #C9C6BC;
  transform-origin: 50% 100%;
  animation: cg-al-sig-bar 4.8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-al-sig-bars b:nth-child(1) { height: 8px; }
.cg-al-sig-bars b:nth-child(2) { height: 14px; animation-delay: .14s; }
.cg-al-sig-bars b:nth-child(3) { height: 20px; animation-delay: .28s; }
.cg-al-sig-bars b:nth-child(4) { height: 26px; animation-delay: .42s; }
.cg-al-sig-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cg-al-sig-title {
  font-size: 13px;
  font-weight: 800;
  color: #1E5F3D;
  opacity: 0;
  animation: cg-al-sig-title 4.8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-al-sig-note {
  font-size: 11px;
  color: #4C5A50;
  opacity: 0;
  animation: cg-al-sig-note 4.8s ease infinite;
}
/* 復帰の合図として帯の上を一度だけ走る光 */
.cg-al-sig-glow {
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(47, 138, 89, 0), rgba(120, 220, 165, .55), rgba(47, 138, 89, 0));
  transform: translateX(-60%) skewX(-16deg);
  animation: cg-al-sig-glow 4.8s ease-out infinite;
}
@keyframes cg-al-sig-band {
  0%, 10% { background: #F2F1EC; border-color: #DDD9CF; }
  32% { background: #EAF6EE; border-color: #BFE2CC; }
  42% { background: #DEF2E6; border-color: #9FD5B4; }
  58%, 88% { background: #EAF6EE; border-color: #BFE2CC; }
  100% { background: #F2F1EC; border-color: #DDD9CF; }
}
@keyframes cg-al-sig-bar {
  0%, 8% { transform: scaleY(.16); background: #C9C6BC; }
  20% { transform: scaleY(1.22); background: #2F8A59; }
  28% { transform: scaleY(.9); background: #2F8A59; }
  36%, 84% { transform: scaleY(1); background: #2F8A59; }
  100% { transform: scaleY(.16); background: #C9C6BC; }
}
@keyframes cg-al-sig-title {
  0%, 34% { opacity: 0; transform: translateX(-12px) scale(.96); }
  46% { opacity: 1; transform: translateX(3px) scale(1.05); }
  54% { transform: translateX(0) scale(.99); }
  62%, 88% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(0) scale(1); }
}
@keyframes cg-al-sig-note {
  0%, 50% { opacity: 0; transform: translateY(5px); }
  64%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes cg-al-sig-glow {
  0%, 26% { transform: translateX(-60%) skewX(-16deg); opacity: 0; }
  36% { opacity: 1; }
  58% { transform: translateX(560%) skewX(-16deg); opacity: 0; }
  100% { transform: translateX(560%) skewX(-16deg); opacity: 0; }
}
/* 静止形 = 復帰し切った通知。電波は満杯、帯は緑、文言は両方読める */
@media (prefers-reduced-motion: reduce) {
  .cg-al-sig,
  .cg-al-sig-bars b,
  .cg-al-sig-title,
  .cg-al-sig-note,
  .cg-al-sig-glow { animation: none; }
  .cg-al-sig { background: #EAF6EE; border-color: #BFE2CC; }
  .cg-al-sig-bars b { transform: scaleY(1); background: #2F8A59; }
  .cg-al-sig-title { opacity: 1; transform: none; }
  .cg-al-sig-note { opacity: 1; transform: none; }
  .cg-al-sig-glow { display: none; }
}
<div class="cg-al-sig" role="status" aria-live="polite"><i class="cg-al-sig-bars" aria-hidden="true"><b></b><b></b><b></b><b></b></i><span class="cg-al-sig-body"><strong class="cg-al-sig-title">オンラインに復帰しました</strong><span class="cg-al-sig-note">未送信のデータを同期しています</span></span><i class="cg-al-sig-glow" aria-hidden="true"></i></div>
GROSS WT. 4253 B ORIGINAL
CRG-14-025

バッテリー残量警告(段階的に減る)Battery Low Alert

/* 3幕構成: 残量が1目盛りずつカクッと減る → 残りわずかで色が警告色へ変わり、
   本体がばねで震える → 稲妻マークが点灯し、枠が赤く脈打ったまま静止する */
.cg-al-batt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 320px;
  padding: 12px 14px;
  border: 2px solid #D9D4C8;
  border-radius: 10px;
  background: #FFFDF7;
  font: 400 13px/1.5 "M PLUS 1", system-ui, sans-serif;
  color: #1B1A17;
  animation: cg-al-batt-frame 6s ease-in-out infinite;
}
.cg-al-batt-icon {
  position: relative;
  flex: none;
  width: 38px;
  height: 20px;
  border: 2px solid #4A453E;
  border-radius: 4px;
  animation: cg-al-batt-shake 6s linear infinite;
}
/* 端子 */
.cg-al-batt-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 4px;
  height: 8px;
  margin-top: -4px;
  border-radius: 0 2px 2px 0;
  background: #4A453E;
}
.cg-al-batt-fill {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  width: 30px;
  border-radius: 2px;
  background: #4E9A51;
  animation: cg-al-batt-drain 6s steps(1, end) infinite;
}
/* 稲妻(自作クリップパス。絵文字は使わない) */
.cg-al-batt-bolt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 15px;
  margin: -7.5px 0 0 -4.5px;
  background: #FFFDF7;
  clip-path: polygon(60% 0, 4% 58%, 42% 58%, 30% 100%, 96% 38%, 52% 38%);
  opacity: 0;
  animation: cg-al-batt-bolt 6s linear infinite;
}
.cg-al-batt-body {
  display: flex;
  flex-direction: column;
}
.cg-al-batt-body strong {
  font-size: 13px;
  font-weight: 700;
  animation: cg-al-batt-alertify 6s linear infinite;
}
.cg-al-batt-body em {
  font-style: normal;
  font-size: 11px;
  color: #6E6960;
}
@keyframes cg-al-batt-drain {
  0%, 22% { width: 30px; background: #4E9A51; }
  30%, 46% { width: 20px; background: #C8912A; }
  54%, 70% { width: 10px; background: #E8590C; }
  74%, 100% { width: 5px; background: #C0392B; }
}
@keyframes cg-al-batt-shake {
  0%, 52% { transform: translateX(0) scale(1); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  56% { transform: translateX(-2px) scale(1.08, .92); }
  60% { transform: translateX(2px) scale(.96, 1.06); }
  64%, 72% { transform: translateX(0) scale(1); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  76% { transform: translateX(-3px) scale(1.1, .9); }
  80% { transform: translateX(3px) scale(.95, 1.07); }
  84% { transform: translateX(-1px) scale(1); }
  88%, 100% { transform: translateX(0) scale(1); }
}
@keyframes cg-al-batt-bolt {
  0%, 72% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  77% { opacity: 1; transform: scale(1.18); }
  83% { opacity: .3; transform: scale(1); }
  89% { opacity: 1; transform: scale(1.06); }
  95% { opacity: .4; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cg-al-batt-frame {
  0%, 50% { border-color: #D9D4C8; box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
  58% { border-color: #E8A87C; box-shadow: 0 0 0 3px rgba(232, 89, 12, .1); }
  72% { border-color: #C0392B; box-shadow: 0 0 0 5px rgba(192, 57, 43, .16); }
  84% { border-color: #C0392B; box-shadow: 0 0 0 9px rgba(192, 57, 43, 0); }
  92%, 100% { border-color: #C0392B; box-shadow: 0 0 0 5px rgba(192, 57, 43, .16); }
}
@keyframes cg-al-batt-alertify {
  0%, 50% { color: #1B1A17; }
  60%, 100% { color: #A5281B; }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形は「残量わずかの警告状態」。アラートとして読んだままの意味が通る */
  .cg-al-batt,
  .cg-al-batt-icon,
  .cg-al-batt-fill,
  .cg-al-batt-bolt,
  .cg-al-batt-body strong { animation: none; }
  .cg-al-batt { border-color: #C0392B; box-shadow: 0 0 0 5px rgba(192, 57, 43, .16); }
  .cg-al-batt-fill { width: 5px; background: #C0392B; }
  .cg-al-batt-bolt { opacity: 1; transform: scale(1); background: #4A453E; }
  .cg-al-batt-body strong { color: #A5281B; }
}
<div class="cg-al-batt" role="alert">
  <span class="cg-al-batt-icon" aria-hidden="true">
    <i class="cg-al-batt-fill"></i>
    <i class="cg-al-batt-bolt"></i>
  </span>
  <span class="cg-al-batt-body">
    <strong>バッテリー残量が少なくなっています</strong>
    <em>電源に接続してください</em>
  </span>
</div>
GROSS WT. 4323 B ORIGINAL