path: root/makima/frontend/public/index.html


                                                               
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>makima.jp | 情報公開ページ — Under Construction</title>
    <link rel="canonical" href="https://makima.jp/" />
    <link rel="icon" href="/logo.svg" type="image/svg+xml" sizes="any" />
    <link rel="icon" href="./logo.svg" type="image/svg+xml" sizes="any" />
    <link rel="shortcut icon" href="./logo.svg" type="image/svg+xml" sizes="any" />
    <meta
      name="description"
      content="本ページは現在準備中です。技術試験的な仮ページとして、makima.jp の情報公開を待機中です。"
    />
    <style type="text/css">
      /* Base layout with grid + ASCII-inspired accents (dark theme) */
      body {
        margin: 0;
        padding: 0;
        color: #dbe7ff;
        min-height: 100vh;
        background-color: #02040a;
        background-image: linear-gradient(
            rgba(8, 22, 46, 0.65),
            rgba(8, 22, 46, 0.65)
          ),
          url("./02cdkj.jpeg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho",
          "MS Mincho", "Noto Serif JP", serif;
        line-height: 1.7;
        letter-spacing: 0.03em;
        text-rendering: optimizeLegibility;
        position: relative;
        overflow-x: hidden;
      }
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            90deg,
            rgba(117, 170, 252, 0.22) 1px,
            rgba(255, 255, 255, 0.08) 1px
          ),
          linear-gradient(
            0deg,
            rgba(117, 170, 252, 0.22) 1px,
            rgba(255, 255, 255, 0.08) 1px
          );
        background-size: 28px 28px, 28px 28px;
        mix-blend-mode: screen;
        opacity: 0.8;
      }
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgba(3, 17, 40, 0.8) 0%,
          rgba(7, 15, 29, 0.5) 45%,
          rgba(3, 17, 40, 0.8) 100%
        );
      }
      .frame {
        max-width: 980px;
        margin: 30px auto 40px auto;
        background: rgba(9, 13, 20, 0.92);
        border: 1px solid #2f476d;
        box-shadow: 0 12px 30px rgba(5, 12, 25, 0.5),
          0 0 0 6px rgba(14, 25, 44, 0.6);
        position: relative;
        overflow: hidden;
      }
      .frame::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: repeating-linear-gradient(
          90deg,
          #0f3c78 0px,
          #0f3c78 40px,
          #3f6fb3 40px,
          #3f6fb3 44px
        );
        opacity: 0.7;
      }
      .frame::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px dashed rgba(89, 122, 170, 0.25);
        pointer-events: none;
      }
      .masthead {
        padding: 14px 18px 12px 18px;
        border-bottom: 4px double #050d1f;
        background: #08162e;
      }
      .masthead-top {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .masthead .logo-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
      }
      .masthead h1 {
        margin: 0;
        font-size: 22px;
        color: #ffffff;
        text-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
        letter-spacing: 0.1em;
      }
      .masthead .subtitle {
        display: block;
        color: #dbe7ff;
        font-size: 12px;
        letter-spacing: 0.08em;
      }
      .status-pill {
        margin-left: auto;
        padding: 4px 10px;
        background: #153667;
        color: #dbe7ff;
        border: 1px solid #3f6fb3;
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .nav-strip {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-top: 1px dashed rgba(117, 170, 252, 0.35);
        border-bottom: 1px dashed rgba(117, 170, 252, 0.35);
        background: #0c1729;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .nav-strip .nav-label {
        color: #9bc3ff;
        font-size: 11px;
        padding-right: 10px;
        border-right: 1px solid rgba(117, 170, 252, 0.35);
      }
      .nav-strip .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }
      .nav-strip .nav-links a {
        color: #eef5ff;
        text-decoration: none;
        padding: 4px 8px;
        border: 1px dashed rgba(117, 170, 252, 0.5);
        background: #0f1c2f;
      }
      .nav-strip .nav-links a[aria-disabled="true"] {
        color: #9aa9c6;
        border-color: rgba(117, 170, 252, 0.25);
        cursor: not-allowed;
        pointer-events: none;
        text-decoration: none;
        background: #0b1423;
      }
      .ticker {
        margin-top: 12px;
        border: 1px solid #153667;
        background: #0a2242;
        color: #b9d4ff;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        font-size: 12px;
        padding: 8px 10px;
        position: relative;
        overflow: hidden;
      }
      .ticker::before,
      .ticker::after {
        content: "";
        position: absolute;
        top: 0;
        width: 12px;
        height: 100%;
        background: linear-gradient(
          180deg,
          rgba(231, 237, 247, 0.5),
          rgba(0, 20, 60, 0)
        );
      }
      .ticker::before {
        left: 0;
      }
      .ticker::after {
        right: 0;
        transform: rotate(180deg);
      }
      .ticker span {
        display: inline-block;
        padding-left: 2px;
        animation: ticker 22s linear infinite;
        white-space: nowrap;
      }
      @keyframes ticker {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      .content {
        padding: 22px 22px 28px 22px;
      }
      .hero {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 22px;
        align-items: center;
        margin-bottom: 22px;
        position: relative;
      }
      .hero-signals {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .floating-card {
        position: absolute;
        background: #0c203b;
        color: #cfe2ff;
        padding: 8px 10px;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        font-size: 10px;
        line-height: 1.4;
        border: 1px solid rgba(197, 219, 255, 0.4);
        box-shadow: 0 6px 16px rgba(12, 35, 67, 0.2);
        z-index: 4;
        text-align: center;
        min-width: 160px;
      }
      .floating-card .label {
        display: block;
        color: #9fc3ff;
        margin-bottom: 4px;
        letter-spacing: 0.08em;
      }
      .floating-card.top-card {
        top: -8px;
        right: -18px;
      }
      .floating-card.bottom-card {
        bottom: -14px;
        left: -18px;
      }
      .hero-copy h2 {
        margin: 0 0 10px 0;
        font-size: 20px;
        color: #f0f5ff;
        letter-spacing: 0.08em;
      }
      .hero-copy p {
        margin: 4px 0 12px 0;
        color: #e4edff;
      }
      .badge {
        display: inline-block;
        padding: 4px 8px;
        border: 1px solid #3f6fb3;
        background: #0f1c2f;
        color: #9bc3ff;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .link-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 14px;
      }
      .rewrite-link {
        position: relative;
        display: inline-block;
        padding: 8px 10px;
        border: 1px solid #0f3c78;
        background: #0d1b2d;
        text-decoration: none;
        color: #dbe7ff;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        font-size: 13px;
        letter-spacing: 0.04em;
        overflow: hidden;
      }
      .rewrite-link::after {
        content: attr(data-ghost);
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: rgba(200, 225, 255, 0.8);
        mix-blend-mode: multiply;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        pointer-events: none;
      }
      .rewrite-link:hover::after {
        opacity: 1;
      }
      .rewrite-link:focus-visible {
        outline: 2px dashed #0f3c78;
        outline-offset: 4px;
      }
      .hero-logo {
        position: relative;
        width: 260px;
        height: 260px;
        margin: 0 auto;
        display: grid;
        place-items: center;
        filter: drop-shadow(0 10px 26px rgba(12, 35, 67, 0.32));
        z-index: 1;
      }
      .hero-logo::before {
        content: none;
      }
      .logo-shell {
        width: 230px;
        height: 230px;
        border-radius: 50%;
        border: 1px solid rgba(63, 111, 179, 0.6);
        background: #070f1d;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        z-index: 1;
      }
      .scan-sweep {
        position: absolute;
        inset: 10%;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(117, 170, 252, 0.25) 0%,
          rgba(117, 170, 252, 0.12) 38%,
          rgba(15, 60, 120, 0.06) 64%,
          transparent 85%
        );
        opacity: 0;
        mix-blend-mode: screen;
        filter: blur(0.8px);
        z-index: 1;
        transform: scale(0.65);
      }
      .scan-sweep.sweep-2 {
        animation-delay: 1.2s;
      }
      .logo-shell::before {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        border: 1px solid rgba(15, 60, 120, 0.35);
        box-shadow: 0 0 0 rgba(15, 60, 120, 0.1);
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.45s ease, transform 0.6s ease;
      }
      .logo-shell::after {
        content: "";
        position: absolute;
        inset: -1px;
        background: repeating-conic-gradient(
          from 0deg,
          rgba(15, 60, 120, 0.08) 0deg 6deg,
          rgba(117, 170, 252, 0.1) 6deg 12deg
        );
        mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 80%);
        opacity: 0.7;
      }
      .logo-shell:hover .scan-sweep {
        opacity: 0.7;
        animation: sweep-out 2.4s ease-out infinite;
      }
      .logo-svg {
        width: 160px;
        height: 160px;
        z-index: 2;
        transition: filter 0.4s ease;
      }
      .logo-svg .ring {
        fill: none;
        stroke: #0f3c78;
        stroke-dasharray: 400 0;
        stroke-linecap: butt;
        transition: stroke 0.35s ease, opacity 0.35s ease;
      }
      .logo-svg .core {
        fill: #0f3c78;
      }
      .logo-shell:hover .logo-svg {
        filter: drop-shadow(0 0 10px rgba(15, 60, 120, 0.35));
      }
      .logo-shell:hover .ring-outer {
        animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
        animation-delay: 0.7s;
      }
      .logo-shell:hover .ring-middle {
        animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
        animation-delay: 0.35s;
      }
      .logo-shell:hover .ring-inner {
        animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
        animation-delay: 0s;
      }
      .logo-shell:hover::before {
        opacity: 1;
        transform: scale(1.08);
        animation: glow-pulse 1.6s ease-in-out infinite;
      }
      .halo {
        position: absolute;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        border: 1px dashed rgba(15, 60, 120, 0.5);
        animation: idle-rotate 28s linear infinite;
        z-index: 0;
      }
      .logo-shell:hover + .halo {
        animation: pulse 1.5s ease-in-out infinite;
      }
      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 0.6;
        }
        50% {
          transform: scale(1.1);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0.6;
        }
      }
      @keyframes idle-rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes glow-pulse {
        0% {
          opacity: 0.16;
          transform: scale(1.02);
        }
        50% {
          opacity: 0.28;
          transform: scale(1.12);
        }
        100% {
          opacity: 0.16;
          transform: scale(1.02);
        }
      }
      @keyframes ring-scan {
        0% {
          stroke: #0f3c78;
          opacity: 0.9;
          stroke-dasharray: 400 0;
          stroke-linecap: butt;
        }
        25% {
          stroke: #6fa0ff;
          opacity: 1;
          stroke-dasharray: 18 14;
          stroke-linecap: round;
        }
        55% {
          stroke: #1e4c94;
          opacity: 0.88;
          stroke-dasharray: 10 18;
        }
        70% {
          stroke: #0f3c78;
          opacity: 0.9;
          stroke-dasharray: 6 22;
        }
        90% {
          stroke: #aac6ff;
          opacity: 0.82;
          stroke-dasharray: 4 26;
        }
        100% {
          stroke: #0f3c78;
          opacity: 0.9;
          stroke-dasharray: 400 0;
          stroke-linecap: butt;
        }
      }
      @keyframes sweep-out {
        0% {
          opacity: 0.45;
          transform: scale(0.55);
        }
        40% {
          opacity: 0.7;
          transform: scale(1.0);
        }
        100% {
          opacity: 0;
          transform: scale(1.35);
        }
      }
      .notice-panel {
        border: 1px solid #b3c8e8;
        background: #0c1525;
        padding: 16px 18px;
        position: relative;
      }
      .notice-panel::before {
        content: "NOTICE//MAKIMA";
        position: absolute;
        top: -10px;
        left: 12px;
        padding: 2px 6px;
        background: #0f1c2f;
        border: 1px solid #3f6fb3;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        font-size: 11px;
        letter-spacing: 0.08em;
      }
      .notice-panel h3 {
        margin: 4px 0 8px 0;
        font-size: 18px;
        color: #eef5ff;
      }
      .notice-panel p {
        margin: 6px 0;
        color: #dbe7ff;
      }
      .meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 12px;
        font-size: 12px;
        color: #e4edff;
      }
      .meta-grid .box {
        border: 1px solid #3f6fb3;
        background: #0d1b2d;
        padding: 10px 12px;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        letter-spacing: 0.04em;
      }
      .terminal {
        margin-top: 24px;
        border: 1px solid #0f3c78;
        background: #0f3c78;
        color: #dbe7ff;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
      }
      .terminal header {
        border-bottom: 1px solid rgba(197, 219, 255, 0.4);
        padding: 10px 12px;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        letter-spacing: 0.08em;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .terminal header span {
        color: #92b8ff;
      }
      .terminal pre {
        margin: 0;
        padding: 14px 12px 16px 12px;
        font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New",
          monospace;
        font-size: 12px;
        line-height: 1.6;
        background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.05) 1px,
          rgba(15, 60, 120, 0.25) 1px
        );
      }
      .links {
        margin-top: 16px;
      }
      .links ul {
        margin: 8px 0 0 16px;
        padding: 0 0 0 6px;
      }
      .links li {
        margin: 6px 0;
        color: #e4edff;
      }
      .links a {
        color: #dbe7ff;
        text-decoration: underline;
      }
      .footer {
        padding: 12px 18px 16px 18px;
        border-top: 4px double #23477a;
        background: linear-gradient(
          180deg,
          rgba(11, 18, 32, 0.95),
          rgba(14, 26, 45, 0.7)
        );
        font-size: 12px;
        color: #e4edff;
        text-align: center;
      }
      .footer .domain {
        color: #dbe7ff;
        text-decoration: underline;
      }
      ::selection {
        background: rgba(117, 170, 252, 0.35);
      }
      @media (max-width: 720px) {
        .frame {
          margin: 16px 12px 22px 12px;
        }
        .masthead {
          padding: 12px 14px 10px 14px;
        }
        .nav-strip {
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px;
        }
        .nav-strip .nav-links {
          width: auto;
          gap: 8px;
          flex-wrap: wrap;
        }
        .nav-strip .nav-links a {
          width: auto;
          min-width: 110px;
          text-align: left;
        }
        .hero {
          grid-template-columns: 1fr;
          text-align: center;
          gap: 14px;
          margin-bottom: 28px;
        }
        .hero-copy {
          text-align: left;
        }
        .hero-logo {
          width: 100%;
          max-width: 240px;
          height: auto;
          margin: 0 auto 8px auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
        }
        .logo-shell {
          margin-bottom: 8px;
        }
        .halo {
          display: none;
        }
        .hero-signals {
          display: none;
        }
        .link-row {
          justify-content: center;
        }
        .meta-grid {
          grid-template-columns: 1fr;
        }
        .terminal {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="frame" role="main">
      <div class="masthead">
        <div class="masthead-top">
          <span class="logo-mark" aria-hidden="true">
            <svg
              width="32"
              height="32"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              focusable="false"
            >
              <circle cx="12" cy="12" r="10" fill="none" stroke="#0f3c78" stroke-width="2" />
              <circle cx="12" cy="12" r="7" fill="none" stroke="#0f3c78" stroke-width="1.6" />
              <circle cx="12" cy="12" r="4" fill="none" stroke="#0f3c78" stroke-width="1.6" />
              <circle cx="12" cy="12" r="1.6" fill="#0f3c78" />
            </svg>
          </span>
          <div>
            <h1>makima.jp 情報公開ページ（準備中）</h1>
            <small class="subtitle">Makima Information Service Portal — Under Construction</small>
          </div>
          <div class="status-pill">準備中</div>
        </div>
        <div class="ticker" aria-hidden="true">
          <span>
            /// MAKIMA INFORMATION SERVICE // PROVISIONAL ACCESS /// DATA-LINK
            ONLINE /// PLATFORM DIAGNOSTICS ACTIVE /// STATUS CHANNEL OPEN ///
            STANDBY — 工事中・UNDER CONSTRUCTION /// MAKIMA.JP ///
          </span>
        </div>
        <div class="nav-strip" aria-label="quick navigation">
          <span class="nav-label">NAV//</span>
          <div class="nav-links">
            <a href="https://github.com/soryu-co" target="_blank" rel="noopener" class="rewrite-link" data-ghost="rewrite"
              >GitHub</a
            >
            <a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">Docs</a>
            <a href="https://soryu.co" class="rewrite-link" data-ghost="rewrite" target="_blank" rel="noopener"
              >Soryu</a
            >
            <a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">Download</a>
          </div>
        </div>
      </div>

      <div class="content">
        <section class="hero">
          <div class="hero-copy">
            <span class="badge">TECHNICAL HOLDING PAGE</span>
            <h2>情報公開準備中 / Public Release Pending</h2>
            <p>
              本ウェブページは現在、整備・点検・審査の最終段階にあります。プラットフォームおよびデスクトップアプリの出荷準備として、通信経路と各種連携を確認する暫定ページです。
            </p>
            <p>
              This page is a temporary access point while the software platform and upcoming desktop application complete final checks. Service remains under construction; transport paths are being verified.
            </p>
            <div class="link-row">
              <a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">資料保全中</a>
              <a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">お知らせ待機</a>
              <a href="https://soryu.co" class="rewrite-link" data-ghost="rewrite" target="_blank" rel="noopener"
                >soryu.co</a
              >
            </div>
          </div>
          <div class="hero-logo">
            <div class="logo-shell" aria-hidden="true">
              <span class="scan-sweep"></span>
              <span class="scan-sweep sweep-2"></span>
              <svg
                class="logo-svg"
                viewBox="0 0 120 120"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                focusable="false"
              >
                <circle class="ring ring-outer" cx="60" cy="60" r="52" stroke-width="4" />
                <circle class="ring ring-middle" cx="60" cy="60" r="36" stroke-width="3" />
                <circle class="ring ring-inner" cx="60" cy="60" r="22" stroke-width="3" />
                <circle class="core" cx="60" cy="60" r="8" />
              </svg>
            </div>
            <div class="halo" aria-hidden="true"></div>
            <div class="hero-signals" aria-hidden="true">
              <div class="floating-card top-card">
                <span class="label">status: standby</span>
                PLATFORM LINK MONITOR ENABLED / DESKTOP CLIENT PREPARATION ACTIVE
              </div>
              <div class="floating-card bottom-card">
                <span class="label">throughput</span>
                Access: HTTPS<br />
                Streams: WS / SSE pending<br />
                Integrity: OK
              </div>
            </div>
          </div>
        </section>

        <div class="notice-panel">
          <h3>工事中 / Maintenance Notice</h3>
          <p>
            makima.jp はソフトウェアプラットフォームおよび今後提供予定のデスクトップアプリの公開準備中です。技術検証のための仮ページを表示しており、正式公開まで今しばらくお待ちください。
          </p>
          <p>We appreciate your patience while the public gateway is finalized.</p>
          <div class="meta-grid">
            <div class="box">
              お問い合わせ：<br />
              <span aria-label="contact">webmaster@makima.jp</span>
            </div>
            <div class="box">
              最終更新：<span id="updated">調整中</span><br />
              管理番号：MK-INFO/JP-ASC
            </div>
          </div>
        </div>

        <div class="links">
          <p>関連情報 / Related:</p>
          <ul>
            <li><a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">組織概要（準備中）</a></li>
            <li><a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">告知・通達（準備中）</a></li>
            <li>
              <a href="https://makima.jp" class="rewrite-link" data-ghost="rewrite"
                >https://makima.jp</a
              >
            </li>
          </ul>
        </div>

        <div class="terminal" aria-label="system log">
          <header>
            <strong>SYSLOG // makima.jp</strong>
            <span>channel: BLUE-LINE</span>
          </header>
          <pre>
[010] link_state .............. pending_publication
[020] platform_target ......... desktop_app + web_service
[030] logo_behavior ........... hover_pulse_enabled
[040] contact ................. webmaster@makima.jp
[050] transport ............... secure/https // ws/standby
[060] note .................... all links locked while construction continues
          </pre>
        </div>
      </div>

      <div class="footer">
        <p>© makima.jp — 本ページは準備中の仮ページです。</p>
        <p>
          <a href="https://makima.jp" class="domain">https://makima.jp</a> /
          <a href="https://soryu.co" class="domain" target="_blank" rel="noopener">https://soryu.co</a>
        </p>
      </div>
    </div>

    <noscript>本ページの表示に JavaScript は不要ですが、リンクの書き換え演出は有効になりません。</noscript>

    <script type="text/javascript">
      (function () {
        // Rewriter animation for links, inspired by vortex.dev hover effect
        var glyphs = "▒▓░█#@*+:-/[]{}<>_";
        var targets = document.querySelectorAll(".rewrite-link");

        function scramble(el) {
          var text = el.getAttribute("data-label") || el.textContent;
          el.setAttribute("data-label", text);
          var iteration = 0;
          var timer = setInterval(function () {
            var display = text
              .split("")
              .map(function (char, index) {
                if (index < iteration) return char;
                return glyphs.charAt(Math.floor(Math.random() * glyphs.length));
              })
              .join("");
            el.textContent = display;
            iteration += 1;
            if (iteration > text.length + 2) {
              clearInterval(timer);
              el.textContent = text;
            }
          }, 26);
          el.addEventListener(
            "mouseleave",
            function reset() {
              clearInterval(timer);
              el.textContent = text;
              el.removeEventListener("mouseleave", reset);
            },
            { once: true }
          );
        }

        for (var i = 0; i < targets.length; i++) {
          var link = targets[i];
          var baseLabel = link.textContent;
          link.setAttribute("data-label", baseLabel);
          link.addEventListener("mouseenter", function (event) {
            scramble(event.currentTarget);
          });
        }
      })();

      (function () {
        // Set updated date in Japanese era style when possible
        var updated = document.getElementById("updated");
        if (!updated) return;
        var now = new Date();
        var year = now.getFullYear();
        var eraYear = year - 2018; // Reiwa era starts 2019
        var text =
          "令和" +
          (eraYear > 0 ? eraYear : year) +
          "年" +
          (now.getMonth() + 1) +
          "月" +
          now.getDate() +
          "日";
        updated.textContent = text;
      })();
    </script>
  </body>
</html>