エラー・システム状態
メンテナンス画面
サービス停止中を知らせるメンテナンス画面。歯車がゆっくり回るイラストと、再開予定時刻を中央にまとめて表示する。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="mt">
<div class="mt-art" aria-hidden="true">
<svg width="88" height="88" viewBox="0 0 88 88" fill="none">
<!-- 大きな歯車 -->
<g class="mt-gear mt-gear--a" style="transform-origin:32px 34px">
<path d="M32 18l2.6.5 1.7-2 2.9 1.2-.2 2.6 2.1 1.6 2.4-1 1.7 2.6-1.7 2 .8 2.5 2.6.6v3l-2.6.6-.8 2.5 1.7 2-1.7 2.6-2.4-1-2.1 1.6.2 2.6-2.9 1.2-1.7-2-2.6.5-.9-2.5h-2.6l-.9 2.5-2.6-.5-1.7 2-2.9-1.2.2-2.6-2.1-1.6-2.4 1-1.7-2.6 1.7-2-.8-2.5-2.6-.6v-3l2.6-.6.8-2.5-1.7-2 1.7-2.6 2.4 1 2.1-1.6-.2-2.6 2.9-1.2 1.7 2 2.6-.5.9 2.5h2.6l.9-2.5z" fill="#eef1fb" stroke="#2b50c7" stroke-width="1.6" stroke-linejoin="round"/>
<circle cx="32" cy="34" r="6" fill="#fbf6ec" stroke="#2b50c7" stroke-width="1.6"/>
</g>
<!-- 小さな歯車 -->
<g class="mt-gear mt-gear--b" style="transform-origin:58px 58px">
<path d="M58 46l1.9.4 1.2-1.5 2.2.9-.2 1.9 1.6 1.2 1.8-.8 1.3 1.9-1.3 1.5.6 1.9 1.9.4v2.3l-1.9.4-.6 1.9 1.3 1.5-1.3 1.9-1.8-.8-1.6 1.2.2 1.9-2.2.9-1.2-1.5-1.9.4-.7-1.8h-1.9l-.7 1.8-1.9-.4-1.2 1.5-2.2-.9.2-1.9-1.6-1.2-1.8.8-1.3-1.9 1.3-1.5-.6-1.9-1.9-.4v-2.3l1.9-.4.6-1.9-1.3-1.5 1.3-1.9 1.8.8 1.6-1.2-.2-1.9 2.2-.9 1.2 1.5 1.9-.4.7 1.8h1.9z" fill="#eef1fb" stroke="#7fa4ff" stroke-width="1.4" stroke-linejoin="round"/>
<circle cx="58" cy="58" r="4.5" fill="#fbf6ec" stroke="#7fa4ff" stroke-width="1.4"/>
</g>
</svg>
</div>
<p class="mt-title">メンテナンス中</p>
<p class="mt-sub">より快適にご利用いただくため、システムのメンテナンスを行っています。</p>
<div class="mt-eta">
<span class="mt-eta-label">再開予定</span>
<span class="mt-eta-time">本日 15:00 頃</span>
</div>
</div>
</div>