星座図・天体図風のサイトナビゲーション

<!doctype html>
<!-- Vibehaus — CC0。CSS・SVGとページ内操作の1ファイル版。製品・星図・路線とリンク先は架空の表示見本です。 -->
<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>constellation-navigation preview</title>
<style>
  :root {
    --void: #06070d;
    --void2: #0d1024;
    --star: #f8f4dc;
    --gold: #f5b938;
    --teal: #4dd9ff;
    --rose: #ff5f8a;
    --line: rgba(248,244,220,0.32);
    --line-soft: rgba(248,244,220,0.13);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--void);
    color: var(--star);
    font-family: "Garamond", "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
    line-height: 1.7;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(circle at 30% 20%, rgba(77,217,255,0.08), transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(255,95,138,0.06), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(245,185,56,0.04), transparent 70%);
  }
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 25% 12%, rgba(248,244,220,0.7), transparent 1px),
      radial-gradient(1px 1px at 78% 22%, rgba(248,244,220,0.55), transparent 1px),
      radial-gradient(1px 1px at 12% 65%, rgba(248,244,220,0.6), transparent 1px),
      radial-gradient(1px 1px at 88% 75%, rgba(248,244,220,0.5), transparent 1px),
      radial-gradient(1.5px 1.5px at 45% 88%, rgba(245,185,56,0.6), transparent 1px),
      radial-gradient(1px 1px at 65% 5%, rgba(248,244,220,0.4), transparent 1px),
      radial-gradient(1px 1px at 32% 92%, rgba(77,217,255,0.5), transparent 1px),
      radial-gradient(1px 1px at 5% 30%, rgba(248,244,220,0.45), transparent 1px),
      radial-gradient(1px 1px at 95% 50%, rgba(248,244,220,0.4), transparent 1px),
      radial-gradient(0.8px 0.8px at 55% 35%, rgba(248,244,220,0.6), transparent 1px),
      radial-gradient(0.8px 0.8px at 70% 60%, rgba(248,244,220,0.55), transparent 1px),
      radial-gradient(0.8px 0.8px at 18% 78%, rgba(248,244,220,0.5), transparent 1px);
    z-index: 0;
  }
  .wrap {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 64px);
    z-index: 1;
  }

  /* Top bar */
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 11px;
    letter-spacing: 0.4em;
    color: rgba(248,244,220,0.65);
    text-transform: uppercase;
    font-family: "JetBrains Mono", monospace;
  }
  .topbar .brand {
    font-family: "Garamond", "Hiragino Mincho ProN", serif;
    font-size: 18px;
    letter-spacing: 0.18em;
    color: var(--star);
    text-transform: none;
  }
  .topbar .brand small {
    font-size: 10px;
    letter-spacing: 0.4em;
    margin-left: 14px;
    color: rgba(248,244,220,0.5);
    font-family: "JetBrains Mono", monospace;
  }
  .topbar .right {
    display: flex; gap: 24px;
  }

  /* Heading */
  .heading {
    text-align: center;
    margin: 64px 0 32px;
  }
  .heading .eyebrow {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.6em;
    margin: 0 0 18px;
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
  }
  .heading h1 {
    font-family: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-style: normal;
    font-weight: 300;
    font-size: clamp(48px, 7vw, 96px);
    margin: 0 0 16px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--star);
  }
  /* <i> の既定の斜体を消す。和文は傾けない（docs/RULES.md §8） */
  .heading h1 i { font-style: normal; }
  .heading h1 b {
    font-style: normal;
    font-weight: 600;
    color: var(--gold);
  }
  .heading p {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(248,244,220,0.7);
    font-size: 13.5px;
    letter-spacing: 0.1em;
    font-family: "Helvetica Neue", "Yu Gothic", sans-serif;
    line-height: 1.85;
  }

  /* Star map */
  .map {
    position: relative;
    margin: 48px auto 64px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line-soft);
    background:
      radial-gradient(ellipse at 50% 50%, rgba(13,16,36,0.6), transparent 70%),
      linear-gradient(135deg, rgba(13,16,36,0.4), rgba(6,7,13,0.6));
  }
  .map svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
  }

  /* Constellation node */
  .node {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    cursor: pointer;
    text-decoration: none;
    color: var(--star);
  }
  .node .point {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--star);
    margin: 0 auto;
    box-shadow:
      0 0 0 3px rgba(248,244,220,0.18),
      0 0 14px 4px rgba(248,244,220,0.4);
    position: relative;
    transition: all 0.25s ease;
  }
  .node .point::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px dashed rgba(248,244,220,0.32);
    border-radius: 50%;
    animation: orbit 18s linear infinite;
  }
  @keyframes orbit { to { transform: rotate(360deg); } }

  .node .name {
    font-family: "Cormorant Garamond", "Hiragino Mincho ProN", serif;
    font-size: 18px;
    font-style: italic;
    letter-spacing: 0.06em;
    margin-top: 10px;
    color: var(--star);
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  }
  .node .name b {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px;
    letter-spacing: 0.4em;
    color: var(--gold);
    margin-top: 4px;
    text-transform: uppercase;
  }
  .node:hover .point {
    background: var(--gold);
    box-shadow:
      0 0 0 4px rgba(245,185,56,0.25),
      0 0 22px 8px rgba(245,185,56,0.55);
  }
  .node:hover .name { color: var(--gold); }

  /* Major node (hub stars) */
  .node.major .point {
    width: 20px; height: 20px;
    background: var(--gold);
    box-shadow:
      0 0 0 5px rgba(245,185,56,0.18),
      0 0 26px 8px rgba(245,185,56,0.45);
  }
  .node.major .name { font-size: 22px; }
  .node.teal .point { box-shadow: 0 0 0 3px rgba(77,217,255,0.18), 0 0 16px 4px rgba(77,217,255,0.4); }
  .node.rose .point { box-shadow: 0 0 0 3px rgba(255,95,138,0.18), 0 0 16px 4px rgba(255,95,138,0.4); }

  /* Twinkle */
  @keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
  }
  .node .point { animation: twinkle 3s ease-in-out infinite; }
  .node:nth-child(odd) .point { animation-delay: 1s; }

  /* Legend */
  .legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 28px 0;
    font-size: 12px;
    letter-spacing: 0.05em;
  }
  @media (max-width: 720px) {
    .legend { grid-template-columns: repeat(2, 1fr); }
  }
  .legend > div {
    border-right: 1px dashed var(--line-soft);
    padding-right: 24px;
  }
  .legend > div:last-child { border-right: 0; }
  .legend h4 {
    margin: 0 0 4px;
    font-family: "JetBrains Mono", monospace;
    color: var(--gold);
    font-size: 10.5px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .legend p {
    margin: 0;
    color: rgba(248,244,220,0.85);
    font-family: "Garamond", "Hiragino Mincho ProN", serif;
    line-height: 1.7;
  }
  .legend p i {
    color: var(--star);
    font-style: normal;
    font-weight: 500;
  }

  /* Footer */
  .colophon {
    margin-top: 48px;
    text-align: center;
    color: rgba(248,244,220,0.5);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
  }
  .colophon b { color: var(--gold); }
[hidden] { display: none !important; }
      .motion-toggle { min-height: 44px; padding: 0.6rem 1rem; margin: 1rem 0; font: inherit; line-height: 1.7; letter-spacing: 0; color: inherit; border: 1px solid currentColor; background: transparent; border-radius: 8px; cursor: pointer; }
      [data-demo-scroll] { overflow: auto; max-width: 100%; }
      a:focus-visible, button:focus-visible, [data-demo-scroll]:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
      .demo-note { max-width: 1160px; margin-left: auto; margin-right: auto; padding: 1rem; font-size: 0.9rem; line-height: 1.8; letter-spacing: 0; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid currentColor; }
      .demo-note h2 { font-size: 1.1rem; line-height: 1.4; letter-spacing: 0; }
      .demo-note p { scroll-margin-top: 2rem; }
      .map-help { font-size: 0.9rem; line-height: 1.8; letter-spacing: 0; }
      .topbar, .topbar .brand, .topbar .right { flex-wrap: wrap; gap: 12px; }
      .topbar .brand { display: flex; align-items: center; max-width: 100%; }
      .topbar .brand small { margin-left: 0; }
      .topbar .right span { white-space: nowrap; }
      .heading h1 { line-height: 1.35; }
      .heading p:not(.eyebrow), .legend p { letter-spacing: 0; }
      .map-scroll { margin: 1rem 0 3rem; }
      .map { min-width: 1160px; margin: 0; }
      .node { width: 104px; margin-left: -52px; margin-top: -11px; transform: none; min-height: 64px; padding: 4px 6px; }
      .node.major { margin-top: -14px; }
      .node[href="#demo-current"] { width: 180px; margin-left: -90px; }
      .node .point, .node .name { display: block; }
      .node .name b { letter-spacing: 0.12em; white-space: nowrap; }
      .node:focus-visible .name { color: var(--gold); }
      .map-pulse { animation: map-pulse 2.6s ease-in-out infinite; }
      @keyframes map-pulse { 0%, 100% { r: 22px; opacity: 0.8; } 50% { r: 42px; opacity: 0; } }
      body[data-paused="true"] .point, body[data-paused="true"] .point::after, body[data-paused="true"] .map-pulse { animation: none; }
      @media (prefers-reduced-motion: reduce) { .point, .point::after, .map-pulse { animation: none !important; } }
      .legend > div { min-width: 0; }
      @media (max-width: 720px) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .legend > div { padding-right: 8px; } }
    </style>
</head>
<body>
  <div class="wrap">
    <header class="topbar">
      <div class="brand">Astra<small>EST. 2026 · OBSERVATORY</small></div>
      <div class="right">
        <span>RA 14h 32m</span>
        <span>DEC −60° 50′</span>
        <span>MAG +1.4</span>
      </div>
    </header>

    <section class="heading">
      <p class="eyebrow">— S I T E   M A P · 天 球 図 —</p>
      <h1><i>あなたの行き先は、</i><br><b>夜空の中にある。</b></h1>
      <p>10個の星と4つの主星で、サイトの入口をたどる表示見本です。星を選ぶと、対応する説明へ移動します。</p>
    </section>

    <button type="button" class="motion-toggle" data-motion-toggle aria-pressed="false" hidden>動きを止める</button><p class="map-help" id="map-help">図は横にスクロールできます。Tabで星を選び、Enterで説明を開けます。</p><div class="map-scroll" data-demo-scroll tabindex="0" role="region" aria-label="星座の案内図" aria-describedby="map-help"><div class="map">
      <svg viewBox="0 0 1320 740" preserveAspectRatio="none" aria-hidden="true">
        <defs>
          <filter id="glow"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <!-- constellation lines: triangle + ribs -->
        <g stroke="rgba(248,244,220,0.32)" stroke-width="0.8" fill="none">
          <!-- main triangle -->
          <path d="M 280 200 L 720 130 L 1080 280" />
          <path d="M 720 130 L 660 380" />
          <path d="M 280 200 L 660 380" />
          <path d="M 1080 280 L 660 380" />
          <!-- spurs -->
          <path d="M 660 380 L 460 540" />
          <path d="M 660 380 L 880 540" />
          <path d="M 460 540 L 320 640" />
          <path d="M 460 540 L 600 600" />
          <path d="M 880 540 L 760 600" />
          <path d="M 880 540 L 1040 640" />
        </g>
        <!-- accent line (highlighted route) -->
        <g stroke="rgba(245,185,56,0.7)" stroke-width="1.4" fill="none" stroke-dasharray="4 6">
          <path d="M 280 200 L 660 380 L 880 540 L 1040 640"/>
        </g>
        <!-- "you are here" pulse -->
        <circle class="map-pulse" cx="660" cy="380" r="32" fill="none" stroke="rgba(245,185,56,0.6)" stroke-width="1">


        </circle>
      </svg>

      <!-- Nodes overlaid -->
      <a class="node major" href="#demo-home" style="left: 21.2%; top: 27%;">
        <span class="point"></span>
        <span class="name">Vega<b>HOME · α01</b></span>
      </a>
      <a class="node major teal" href="#demo-blog" style="left: 54.5%; top: 17.5%;">
        <span class="point"></span>
        <span class="name">Altair<b>BLOG · α02</b></span>
      </a>
      <a class="node major rose" href="#demo-work" style="left: 81.8%; top: 38%;">
        <span class="point"></span>
        <span class="name">Deneb<b>WORK · α03</b></span>
      </a>
      <a class="node major" href="#demo-current" style="left: 50%; top: 51%;">
        <span class="point"></span>
        <span class="name">Polaris<b>YOU ARE HERE · α00</b></span>
      </a>

      <a class="node" href="#demo-about" style="left: 34.8%; top: 73%;">
        <span class="point"></span>
        <span class="name">Rigel<i></i><b>ABOUT · β01</b></span>
      </a>
      <a class="node" href="#demo-store" style="left: 66.7%; top: 73%;">
        <span class="point"></span>
        <span class="name">Sirius<b>STORE · β02</b></span>
      </a>
      <a class="node" href="#demo-faq" style="left: 24%; top: 86.5%;">
        <span class="point"></span>
        <span class="name">Capella<b>FAQ · γ01</b></span>
      </a>
      <a class="node" href="#demo-news" style="left: 45.5%; top: 81%;">
        <span class="point"></span>
        <span class="name">Procyon<b>NEWS · γ02</b></span>
      </a>
      <a class="node" href="#demo-press" style="left: 57.5%; top: 81%;">
        <span class="point"></span>
        <span class="name">Antares<b>PRESS · γ03</b></span>
      </a>
      <a class="node teal" href="#demo-contact" style="left: 79%; top: 86.5%;">
        <span class="point"></span>
        <span class="name">Spica<b>CONTACT · γ04</b></span>
      </a>
    </div>

    </div>
    <div class="legend">
      <div>
        <h4>α · MAJOR STAR</h4>
        <p><i>4つの主星</i>が、サイトの幹となるカテゴリ。各章の入口。</p>
      </div>
      <div>
        <h4>β · BRIDGE</h4>
        <p><i>2つの橋</i>で章と章を結ぶ。会社情報・ストア。</p>
      </div>
      <div>
        <h4>γ · SATELLITE</h4>
        <p><i>4つの衛星</i>で末端ページを構成。サポート系。</p>
      </div>
      <div>
        <h4>★ YOU ARE HERE</h4>
        <p>金の脈動で<i>現在地（Polaris）</i>を示す。次の星を選んで降下せよ。</p>
      </div>
    </div>

    <p class="colophon">PROJECT ASTRA · v.1 · UPDATED 2026.10.18 · <b>10 STARS · 4 ROUTES</b></p>
  </div>
<noscript><style>.point, .point::after, .map-pulse { animation: none !important; }</style></noscript><script>
      document.querySelectorAll('[data-demo-scroll]').forEach(region => {
        region.addEventListener('focusin', event => {
          const link = event.target.closest('a');
          if (link) link.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'instant' });
        });
        const first = region.querySelector('.node');
        if (first && region.scrollWidth > region.clientWidth) {
          region.scrollLeft = Math.max(0, first.offsetLeft + first.offsetWidth / 2 - region.clientWidth / 2);
        }
        region.addEventListener('keydown', event => {
          if (event.target !== region || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
          event.preventDefault();
          const step = Math.max(80, region.clientWidth * 0.75);
          const left = event.key === 'Home' ? 0 : event.key === 'End' ? region.scrollWidth : region.scrollLeft + (event.key === 'ArrowRight' ? step : -step);
          region.scrollTo({ left, behavior: 'instant' });
        });
      });
      const toggle = document.querySelector('[data-motion-toggle]');
      const preference = matchMedia('(prefers-reduced-motion: reduce)');
      let paused = false;
      const update = () => {
        const stopped = paused || preference.matches;
        document.body.dataset.paused = String(stopped);
        toggle.disabled = preference.matches;
        toggle.setAttribute('aria-pressed', String(stopped));
        toggle.textContent = preference.matches ? '動きを減らす設定で停止中' : paused ? '動きを再開する' : '動きを止める';
      };
      toggle.hidden = false;
      toggle.addEventListener('click', () => { paused = !paused; update(); });
      preference.addEventListener('change', update);
      update();
    </script>
<aside class="demo-note" aria-labelledby="demo-title"><h2 id="demo-title">リンク先の説明（表示見本）</h2><p>架空のサイトの案内例です。リンクはこのページ内の説明へ移動し、外部への移動・送信・登録は行いません。配布HTMLはCC0・利用料¥0です。</p><p id="demo-home" tabindex="-1"><strong>Vega — ホーム</strong> — サイト全体の入口を示す星です。架空のサイト案内であり、外部のページへは移動しません。</p><p id="demo-blog" tabindex="-1"><strong>Altair — ブログ</strong> — 記事の一覧や読みものの入口です。記事配信は実装していません。</p><p id="demo-work" tabindex="-1"><strong>Deneb — 制作実績</strong> — 制作実績や作品一覧へつなぐ構成例です。掲載実績は架空の設定です。</p><p id="demo-current" tabindex="-1"><strong>Polaris — 現在地</strong> — 現在地を示す星です。この見本ではページ内の説明へ移動します。</p><p id="demo-about" tabindex="-1"><strong>Rigel — このサイトについて</strong> — 運営や活動内容をまとめる入口です。組織名や活動は架空の設定です。</p><p id="demo-store" tabindex="-1"><strong>Sirius — ストア</strong> — 商品の案内へつなぐ星です。注文・決済・発送は行いません。</p><p id="demo-faq" tabindex="-1"><strong>Capella — よくある質問</strong> — 疑問への回答をまとめる入口の例です。</p><p id="demo-news" tabindex="-1"><strong>Procyon — お知らせ</strong> — 更新のお知らせを案内する入口です。メール配信は行いません。</p><p id="demo-press" tabindex="-1"><strong>Antares — プレス</strong> — 取材や広報の資料へつなぐ構成例です。実際の発表資料は含みません。</p><p id="demo-contact" tabindex="-1"><strong>Spica — お問い合わせ</strong> — お問い合わせの入口です。連絡先や送信機能は含みません。</p></aside>
</body>
</html>