
<!doctype html>
<html lang="ja">

<head>
<meta charset="utf-8">

<meta
  name="viewport"
  content="width=device-width,initial-scale=1">

<meta
  name="robots"
  content="noindex,nofollow">

<title>Professional AI Demo</title>

<style>
html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at top,
      #182033 0,
      #0b0d12 52%
    );

  color: #fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;
}

.demo-card {
  width: min(560px, 100%);
  box-sizing: border-box;

  padding: 38px 34px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 18px;

  background:
    rgba(22,27,38,.94);

  text-align: center;

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.35);
}

.demo-badge {
  display: inline-block;

  margin-bottom: 18px;
  padding: 7px 12px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.08);

  color: #cbd5e1;

  font-size: 13px;
}

h1 {
  margin:
    0 0 16px;

  font-size:
    clamp(
      22px,
      4vw,
      30px
    );

  line-height: 1.45;
}

p {
  margin: 0;

  color: #cbd5e1;

  font-size: 15px;

  line-height: 1.9;
}

button {
  margin-top: 28px;

  padding: 12px 22px;

  border: 0;
  border-radius: 10px;

  background: #fff;
  color: #111827;

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;
}

.note {
  margin-top: 20px;

  color: #64748b;

  font-size: 12px;
}
</style>
</head>

<body>

<div class="demo-card">

<div class="demo-badge">
Professional AI Demo
</div>

<h1>
本日のDemo利用時間は終了しました
</h1>

<p>
Demoの利用可能時間は19:00までです。
</p>

<button
  type="button"
  onclick="location.reload()">
再読み込み
</button>

<div class="note">
Professional AI Node
</div>

</div>

</body>
</html>