<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

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

<title>流星号 RYUSEI-GO | 軽井沢バス株式会社</title>


<style>

:root {

  --night1:#0b1b3c;

  --night2:#162d55;

  --mint:#aee0da;

  --glass:rgba(255,255,255,0.08);

}


/* ★ 吊古屋の「吊《が異体字にならないよう日本語フォントを強制固定 ★ */

body, h1, h2, h3, h4, h5, h6,

p, a, li, span, small, figcaption, td, th {

  font-family:

    "Noto Sans JP",

    "Hiragino Kaku Gothic ProN",

    "Hiragino Sans",

    "Yu Gothic Medium",

    "Yu Gothic",

    "Meiryo",

    sans-serif !important;

  font-variant-east-asian: normal;

}


/* 全体背景 */

body {

  margin:0;

  font-family:"Noto Sans JP", sans-serif;

  color:#fff;

  background:linear-gradient(to bottom,var(--night1),var(--night2));

  overflow-x:hidden;

}


/* 背景層（夜空＋流星） */

.bg-layer {

  position:fixed;

  top:0;left:0;width:100%;height:100%;

  overflow:hidden;

  z-index:-2;

}

.bg-photo {

  position:absolute;

  width:110%;height:110%;

  top:-5%;left:-5%;

  background:url('haikei/ryusei-night.jpg') center/cover no-repeat;

  filter:brightness(0.6) saturate(1.2);

  opacity:0.65;

  z-index:-2;

}

canvas#stars {

  position:absolute;

  top:0;left:0;width:100%;height:100%;

  z-index:-1;

}


/* === Heroセクション === */

.hero {

  min-height:40vh;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  background:var(--glass);

  backdrop-filter:blur(8px);

  border-radius:20px;

  border:1px solid rgba(255,255,255,0.25);

  margin:4rem auto 2rem;

  max-width:900px;

  padding:3rem 1.5rem;

  box-shadow:0 0 30px rgba(255,255,255,0.08);

}

.hero h1 {

  font-size:2.6rem;

  margin-bottom:0.8rem;

  color:var(--mint);

  text-shadow:0 0 10px rgba(255,255,255,0.6);

}

.hero p {

  font-size:1.2rem;

  color:#eafaf8;

}


/* 共通セクション */

section {

  max-width:900px;

  margin:3rem auto;

  padding:2rem 1.5rem;

  background:var(--glass);

  border-radius:20px;

  backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,0.25);

  box-shadow:0 0 25px rgba(255,255,255,0.08);

  text-align:center;

}

section h2 {

  color:var(--mint);

  font-size:1.8rem;

  margin-bottom:1rem;

  text-shadow:0 0 8px rgba(255,255,255,0.25);

}


/* 運行ルート画像（今は使用なしだが残しておく） */

.route img {

  width:100%;

  border-radius:12px;

  margin-bottom:1rem;

  box-shadow:0 0 20px rgba(0,0,0,0.4);

}


/* ギャラリー */

.gallery {

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

  gap:1rem;

}

.gallery img {

  width:100%;

  aspect-ratio:4/3;

  object-fit:cover;

  border-radius:12px;

  transition:transform .3s ease, box-shadow .3s ease;

  box-shadow:0 2px 15px rgba(0,0,0,0.3);

}

.gallery img:hover {

  transform:scale(1.05);

  box-shadow:0 0 20px rgba(255,255,255,0.3);

}


/* ご利用案内 */

/* ======================

   ★ ご利用案内を中央寄せ＋行頭揃え

====================== */

.features {

  text-align: center;

}


.features ul {

  display: inline-block;  /* 全体は中央 */

  text-align: left;       /* 行頭は左にそろう */

  list-style: none;

  padding: 0;

  margin: 0;

}


.features li {

  margin: 0.45rem 0;

  font-size: 1.1rem;

  display: flex;

  align-items: flex-start;

  gap: 0.6rem;

}


/* キラキラアイコン（または空欄行は無アイコン） */

.features li::before {

  content: "✨";

  flex-shrink: 0;

  font-size: 1.05rem;

  transform: translateY(2px);

}


/* 「説明行《はアイコン無し */

.features li.noicon::before {

  content: "";

}


/* チケット購入ブロック */

.ticket-links {

  background:var(--glass);

  backdrop-filter:blur(12px);

  border-radius:20px;

  border:1px solid rgba(255,255,255,0.25);

  box-shadow:0 0 25px rgba(255,255,255,0.1);

  padding:2.5rem 1.5rem;

  text-align:center;

  position: relative;  /* ← パネルをここ基準で重ねる */

}

.ticket-links h3 {

  font-size:1.5rem;

  color:var(--mint);

  margin-bottom:1rem;

}

.banner-links {

  display:flex;

  justify-content:center;

  align-items:center;

  flex-wrap:wrap;

  gap:2rem;

  margin:1.5rem 0;

}

.banner-links img {

  width:180px;

  height:auto;

  background:#fff;

  border-radius:12px;

  padding:0.5rem 0.8rem;

  box-shadow:0 2px 12px rgba(0,0,0,0.3);

  transition:transform .3s ease, box-shadow .3s ease;

}

.banner-links img:hover {

  transform:scale(1.05);

  box-shadow:0 0 20px rgba(255,255,255,0.3);

}

.contact-info {

  font-size:1rem;

  color:#eafaf8;

  line-height:1.7;

  margin-top:1rem;

}


/* 戻るリンク */

.backlink {

  text-align:center;

  margin:3rem 0;

}

.backlink a {

  color:var(--mint);

  text-decoration:none;

  border:1px solid rgba(255,255,255,0.3);

  padding:0.6rem 1.4rem;

  border-radius:10px;

  transition:all .3s ease;

  font-weight:600;

}

.backlink a:hover {

  background:rgba(255,255,255,0.1);

  text-shadow:0 0 10px rgba(255,255,255,0.5);

}


/* フッター */

footer {

  text-align:center;

  padding:2rem;

  font-size:0.9rem;

  color:#aee0da;

}


/* ▼ バナーの上にかぶさる “路線選択パネル” ▼ */

.route-panel {

  position: absolute;

  left: 50%;

  top: 0;

  transform: translate(-50%, -10px);

  background: rgba(255,255,255,0.90);

  backdrop-filter: blur(14px);

  padding: 1.4rem 1.6rem;

  border-radius: 18px;

  box-shadow: 0 12px 30px rgba(0,0,0,0.25);

  width: 100%;

  max-width: 430px;

  text-align: center;

  display: none;

  z-index: 20;

}


.ticket-links.panel-open::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.25);

  border-radius: inherit;

  z-index: 10;

}


.route-panel h4 {

  margin: 0 0 0.8rem 0;

  font-size: 1.1rem;

}


.route-list {

  display: flex;

  flex-direction: column;

  gap: 0.6rem;

  margin: 0.5rem 0 0.8rem 0;

}


/* ★ モーダル専用の小さなボタン用カード */

.route-option {

  display: block;

  background: rgba(255,255,255,0.95);

  padding: 0.7rem 1rem;

  border-radius: 12px;

  border: 1px solid rgba(150,220,210,0.7);

  text-decoration: none;

  color: #003d3a;

  font-weight: 600;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  transition: transform .12s ease, background .2s ease;

}

.route-option:hover {

  background:#ffffff;

  transform:translateY(-2px);

}


.close-btn {

  border: none;

  background: #9de1cf;

  padding: 0.5rem 1.4rem;

  border-radius: 999px;

  font-weight: 700;

  cursor: pointer;

  color: #003d3a;

}


.banner-wrapper {

  cursor: pointer;

}


/* ────────────────

   運行掲示板（表）まわり

   ──────────────── */

.info-board #board {

  max-width: 750px;

  margin: 0 auto;

  background: rgba(255,255,255,0.85);

  backdrop-filter: blur(8px);

  border-radius: 16px;

  box-shadow: 0 0 8px rgba(0,0,0,0.1);

  padding: 20px;

}

.info-board table {

  width: 100%;

  border-collapse: collapse;

  color:#033;

  font-size:1rem;

}

.info-board th, .info-board td {

  border-bottom: 1px dashed #ccc;

  padding: 8px;

  text-align: left;

}

.info-board th {

  background: #b7ead7;

  color: #044;

}

.status {

  font-weight: bold;

  border-radius: 8px;

  padding: 3px 8px;

}


/* ===========================================

   ★ 運行掲示板：1行固定／省略禁止／はみ出しOK

=========================================== */


/* 文字を極小に */

#sheet {

  font-size: 0.70rem !important;

  line-height: 1.1 !important;

}


/* セル共通：折り返し禁止＋省略禁止＋はみ出し許可 */

#sheet th,

#sheet td {

  white-space: nowrap !important;      /* ← 折り返し禁止（1行固定） */

  overflow: visible !important;        /* ← 枠からはみ出してOK */

  text-overflow: clip !important;      /* ← “…” にしない */

  padding: 3px 6px !important;

}


/* 表全体もはみ出しOKにしておく */

.info-board #board {

  overflow: visible !important;

}


/* スマホ最適化（さらに圧縮） */

@media (max-width: 768px) {

  #sheet {

    font-size: 0.62rem !important;   /* ← さらに小さく */

  }


  #sheet th,

  #sheet td {

    padding: 2px 4px !important;

  }

}

</style>

</head>

<body>


<div class="bg-layer">

  <canvas id="stars"></canvas>

  <div class="bg-photo"></div>

</div>


<section class="hero">

  <h1>流星号（RYUSEI-GO）</h1>

  <p>夢を乗せて夜を駆ける、軽井沢バスの流星号</p>

  <a href="https://x.com/Ryusei__go?ref_src=twsrc%5Etfw" target="_blank" rel="noopener noreferrer">

    <img src="item/X.png" alt="Xの運行情報">

  </a>


  <!-- 軽井沢バス 流星号 運行情報 [公式] の埋め込み -->

  <section class="info-board">

    <h2>🚌 軽井沢バス 流星号 運行掲示板【自動更新】</h2>

    <div id="board">

<div id="debugBox" style="display:none; background:#fff; color:#000; padding:8px 10px; border-radius:10px; margin-bottom:10px; text-align:left; font-size:12px; white-space:pre-wrap;"></div>

<div id="noticeBox" style="display:none; margin:0 0 12px 0; padding:10px 12px;

  background:rgba(255,255,255,0.95); border-radius:12px; color:#033;

  box-shadow:0 0 8px rgba(0,0,0,0.08); text-align:left;">

  <div style="font-weight:800; color:#044; margin-bottom:4px;">📢 お知らせ</div>

  <div id="noticeText" style="white-space:pre-wrap; line-height:1.4;"></div>

</div>


      <table id="sheet">

        <thead>

          <tr><th>日付</th><th>便吊</th><th>区間</th><th>状況</th><th>備考</th></tr>

        </thead>

        <tbody></tbody>

      </table>

    </div>

  </section>

</section>


<script>

const SHEET_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQpQrBa7JC3q5reyZkXStqwjmHPQPTedLvZUhAiHPqwfIlOuIVirAB6qQ0C5PTT4dkPda2YAv3LF7Ow/pub?output=csv";


// CSVパース（引用符対応）

function parseCSV(str) {

  const rows = [];

  let row = [], inQuotes = false, field = "";

  for (let i = 0; i < str.length; i++) {

    const c = str[i];

    if (c === '"') {

      inQuotes = !inQuotes;

    } else if (c === ',' && !inQuotes) {

      row.push(field); field = "";

    } else if (c === '\n' && !inQuotes) {

      row.push(field);

      rows.push(row);

      row = []; field = "";

    } else {

      field += c;

    }

  }

  row.push(field);

  rows.push(row);

  return rows;

}


async function loadSheet() {

  const tbody = document.querySelector("#sheet tbody");

  tbody.innerHTML = "";


  const norm = (s) => (s ?? "")

    .toString()

    .replace(/^\uFEFF/, "")

    .replace(/\r/g, "")

    .replace(/\u3000/g, " ")

    .trim();


  try {

    const res = await fetch(SHEET_URL);

    const text = await res.text();

    const rows = parseCSV(text.trim());


// ✅ ヘッダ行検出（列位置に依存しない）

let headerIndex = -1;


for (let i = 0; i < rows.length; i++) {

  const r = rows[i] || [];

  const line = r.map(v => norm(v)).join(" ");


  // 「日付《「区間《「状況《「備考《必須

  // 「便《は便吊/便番/便 なども吸収

  if (

    line.includes("日付") &&

    line.includes("区間") &&

    line.includes("状況") &&

    line.includes("備考") &&

    line.includes("便")

  ) {

    headerIndex = i;

    break;

  }

}


    if (headerIndex === -1) {

      tbody.innerHTML = "<tr><td colspan='5' style='text-align:center;'>ヘッダ行が見つかりません</td></tr>";

      return;

    }


    // お知らせ（ヘッダより上のA列）

    const noticeLines = rows.slice(0, headerIndex).map(r => norm(r?.[0]));

    while (noticeLines.length && noticeLines[noticeLines.length - 1] === "") noticeLines.pop();

    const notice = noticeLines.join("\n").trim();


    const noticeBox = document.getElementById("noticeBox");

    const noticeText = document.getElementById("noticeText");

    if (noticeBox && noticeText) {

      if (notice) {

        noticeText.textContent = notice;

        noticeBox.style.display = "block";

      } else {

        noticeBox.style.display = "none";

      }

    }


    // データ（ヘッダの次）

    const dataRows = rows.slice(headerIndex + 1).filter(r => norm(r.join("")).length > 0);


    if (dataRows.length === 0) {

      tbody.innerHTML = "<tr><td colspan='5' style='text-align:center;'>運行情報はありません</td></tr>";

      return;

    }


    dataRows.forEach(r => {

      const statusText = norm(r[3]);


      const tr = document.createElement("tr");

      tr.innerHTML = `

        <td>${norm(r[0])}</td>

        <td>${norm(r[1])}</td>

        <td>${norm(r[2])}</td>

        <td><span class="status">${statusText}</span></td>

        <td>${norm(r[4])}</td>

      `;


      const statusSpan = tr.querySelector(".status");

      if (statusText.includes("休") || statusText.includes("運休")) {

        statusSpan.style.color = "#FF4B00";

      } else if (statusText) {

        statusSpan.style.color = "#007733";

      }


      tbody.appendChild(tr);

    });


  } catch (e) {

    console.error(e);

    tbody.innerHTML = "<tr><td colspan='5' style='text-align:center;'>読み込みエラー（CSV取得失敗）</td></tr>";

  }

}


loadSheet();

</script>


<section class="routes-section">

  <h2>📖 流星号 運行ルート</h2>

  <p><small>各便をタップして詳細をご確認いただけます👆</small></p>

  <div class="routes-grid">

    <a href="https://www.busbookmark.jp/searches/detail/10285?" target="_blank" class="route-card">

      <img src="item/KZ101.png" alt="KZ101便 関東⇒関西">

      <h3>KZ101便</h3>

      <p>関東 → 関西<br><small>西船橋・秋葉原・大手町・八王子・町田 → 滋賀・京都・大阪・京都・三ノ宮 方面行</small></p>

    </a>


    <a href="https://www.busbookmark.jp/searches/detail/10286?" target="_blank" class="route-card">

      <img src="item/KZ102.png" alt="KZ102便 関西⇒関東">

      <h3>KZ102便</h3>

      <p>関西 → 関東<br><small>三ノ宮・大阪・滋賀 発 → 町田・大手町・秋葉原・西船橋 方面行</small></p>

    </a>


    <a href="https://www.busbookmark.jp/searches/detail/10287?" target="_blank" class="route-card">

      <img src="item/KZ201.png" alt="KZ201便 関東⇒ナゴヤ">

      <h3>KZ201便</h3>

      <p>関東 → ナゴヤ<br><small>西船橋・秋葉原・町田 発 → ナゴヤ 方面行</small></p>

    </a>


    <a href="https://www.busbookmark.jp/searches/detail/10288?" target="_blank" class="route-card">

      <img src="item/KZ202.png" alt="KZ202便 吊古屋⇒関東">

      <h3>KZ202便</h3>

      <p>ナゴヤ → 関東<br><small>ナゴヤ 発 → 町田・秋葉原・西船橋 方面行</small></p>

    </a>

  </div>

</section>


<style>

.routes-section {

  max-width: 1000px;

  margin: 4rem auto;

  padding: 1rem 0;

  text-align: center;

}

.routes-section h2 {

  color: #aee0da;

  font-size: 1.9rem;

  font-weight: 700;

  margin-bottom: 2rem;

  text-shadow: 0 0 8px rgba(255,255,255,0.25);

}

.routes-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* ← PCでは2列 */

  gap: 1.5rem;

}


/* スマホでは1列にする */

@media (max-width: 768px) {

  .routes-grid {

    grid-template-columns: 1fr; /* ← スマホ1列 */

  }

}

.route-card {

  display: block;

  text-decoration: none;

  background: rgba(255,255,255,0.08);

  border-radius: 16px;

  padding: 1.2rem;

  border: 1px solid rgba(255,255,255,0.25);

  box-shadow: 0 4px 18px rgba(0,0,0,0.2);

  transition: all 0.3s ease;

  color: inherit;

}

.route-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 6px 20px rgba(0,0,0,0.35);

  background: rgba(174,224,218,0.15);

}

.route-card img {

  width: 100%;

  border-radius: 12px;

  margin-bottom: 0.8rem;

  box-shadow: 0 2px 10px rgba(0,0,0,0.3);

}

.route-card h3 {

  color: #c7fff3;

  margin-bottom: 0.4rem;

  font-size: 1.3rem;

  letter-spacing: 1px;

}

.route-card p {

  color: #eafaf8;

  font-size: 0.95rem;

  line-height: 1.5;

}

.route-card small {

  color: #aee0da;

  font-size: 0.85rem;

}

/* 吊古屋などの漢字が異体字化しないように small のフォントを固定 */

small, .route-card small {

  font-family:

    "Noto Sans JP",

    "Hiragino Kaku Gothic ProN",

    "Yu Gothic",

    "YuGothic",

    sans-serif !important;

  font-size: 0.92rem !important;

  font-weight: 400;

  letter-spacing: 0.03em;

}

/* ==========================

   ★ トップへ戻るフローティングボタン

========================== */

/* ★ トップへ戻る（シャープ・青系・シンプル版） */

.floating-top {

  position: fixed;

  right: 18px;

  bottom: 22px;

  z-index: 9999;


  background: rgba(255, 255, 255, 0.22);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.35);


  color: #6ac7e3; /* ← 青寄りのミント。シャープで見える */

  font-weight: 500; /* 細めで上品 */

  font-size: 1rem;

  letter-spacing: 0.02em;


  padding: 0.6rem 1.15rem;

  border-radius: 12px;

  text-decoration: none;


  box-shadow: 0 4px 14px rgba(0,0,0,0.22);

  transition: all 0.25s ease;

}


/* ホバー時：少しだけ濃い青で反応 */

.floating-top:hover {

  transform: translateY(-3px);

  background: rgba(255,255,255,0.36);

  color: #4db0d1;  /* ← 少し濃い青へ */

  box-shadow: 0 6px 18px rgba(0,0,0,0.34);

}

/* ==========================

   ★ トップへ戻るフローティングボタン

========================== */

/* ★ トップへ戻る（シャープ・青系・シンプル版） */

.floating-top {

  position: fixed;

  right: 18px;

  bottom: 22px;

  z-index: 9999;


  background: rgba(255, 255, 255, 0.22);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.35);


  color: #6ac7e3; /* ← 青寄りのミント。シャープで見える */

  font-weight: 500; /* 細めで上品 */

  font-size: 1rem;

  letter-spacing: 0.02em;


  padding: 0.6rem 1.15rem;

  border-radius: 12px;

  text-decoration: none;


  box-shadow: 0 4px 14px rgba(0,0,0,0.22);

  transition: all 0.25s ease;

}


/* ホバー時：少しだけ濃い青で反応 */

.floating-top:hover {

  transform: translateY(-3px);

  background: rgba(255,255,255,0.36);

  color: #4db0d1;  /* ← 少し濃い青へ */

  box-shadow: 0 6px 18px rgba(0,0,0,0.34);

}

</style>


<section class="gallery-section">

  <h2>🚌 車両ギャラリー</h2>

  <div class="gallery">

    <img src="item/ryuseigo.jpg" alt="流星号外観">

    <img src="item/syanai.jpg" alt="車内">

    <img src="item/si-to.jpg" alt="ワイドシート">

  </div>

</section>


<section class="taiken-section">

  <h3>🎫 流星号 乗車体験記</h3>

  <div class="banner-links">

    <a href="https://www.bushikaku.net/article/186745/" target="_blank" rel="noopener noreferrer">

      <img src="item/ryuseigo night.jpg" alt="乗車体験記">

    </a>

  </div>

</section>


<section class="features">

  <h2>💺 ご利用案内</h2>

  <ul>

    <li>全席リクライニング</li>

    <li>無料Wi-Fi・USB充電ポート完備</li>

    <li>空気清浄機・プラズマクラスター搭載</li>

    <li>女性安心シートエリア設置</li>


    <li class="noicon">👍 他人同士の男女は隣席になりません</li>

    <li class="noicon">👍 横並びになる場合は、必ず1席空けるか通路を挟む配置</li>

    <li class="noicon">👍 女性のお客様は後方エリアを“女性安心シート”として優先案内</li>


    <li>乗務員ツーマン体制（ナゴヤ便を除く）による安全運行</li>

  </ul>

</section>


<section class="ticket-links">

  <h3>🎫 ご予約・チケット購入</h3>

  <p>ご利用の販売サイトをお選びください。</p>


  <!-- ★ バナーの上にかぶさる 路線選択パネル -->

  <div id="routePanel" class="route-panel">

    <h4 id="routePanelTitle">路線をお選びください</h4>

    <div id="routeList" class="route-list"></div>

    <button type="button" class="close-btn" onclick="closeModal()">閉じる</button>

  </div>


  <div class="banner-links">

    <div class="banner-wrapper" onclick="openModal('hikaku')">

      <img src="item/bus hikakunabi.png" alt="バス比較なび">

    </div>

    <div class="banner-wrapper" onclick="openModal('bookmark')">

      <img src="item/bookmk.gif" alt="バスブックマーク">

    </div>

    <div class="banner-wrapper" onclick="openModal('kosoku')">

      <img src="item/kousoku.png" alt="高速バスドットコム">

    </div>

  </div>


  <div class="contact-info">

    <p><strong>運行に関するお問い合わせは</strong><br>

      軽井沢バス 東京営業所<br>

      TEL：<a href="tel:0368082020">03-6808-2020</a><br>

      営業時間：9:00〜18:00

    </p>

  </div>

</section>


<a href="index.html" class="floating-top">← トップへ戻る</a>


<footer>

  © Karuizawa Bus Co., Ltd. All rights reserved.

</footer>


<script>

/* ▼ 星空アニメーション */

const canvas=document.getElementById('stars');

const ctx=canvas.getContext('2d');

let w=canvas.width=innerWidth;

let h=canvas.height=innerHeight;

let shootingStars=[];


function createShootingStar(){

  const startX=Math.random()*w;

  const startY=-50;

  const length=Math.random()*180+120;

  const angle=Math.PI/3+(Math.random()*0.2-0.1);

  const speed=Math.random()*4+3;

  shootingStars.push({x:startX,y:startY,len:length,angle:angle,speed:speed,life:1});

}


function draw(){

  ctx.clearRect(0,0,w,h);

  ctx.fillStyle="rgba(0,0,0,0.15)";

  ctx.fillRect(0,0,w,h);

  if(Math.random()<0.004)createShootingStar();

  for(let i=shootingStars.length-1;i>=0;i--){

    const s=shootingStars[i];

    const tx=s.x-Math.cos(s.angle)*s.len;

    const ty=s.y-Math.sin(s.angle)*s.len;

    const grad=ctx.createLinearGradient(s.x,s.y,tx,ty);

    grad.addColorStop(0,"rgba(255,255,255,1)");

    grad.addColorStop(1,"rgba(255,255,255,0)");

    ctx.strokeStyle=grad;

    ctx.lineWidth=3.5;

    ctx.beginPath();

    ctx.moveTo(s.x,s.y);

    ctx.lineTo(tx,ty);

    ctx.stroke();

    s.x+=Math.cos(s.angle)*s.speed;

    s.y+=Math.sin(s.angle)*s.speed;

    s.life-=0.006;

    if(s.y>h+100||s.life<=0)shootingStars.splice(i,1);

  }

  requestAnimationFrame(draw);

}

draw();

window.addEventListener('resize',()=>{w=canvas.width=innerWidth;h=canvas.height=innerHeight;});


/* ▼ 路線選択パネル用 データ */

const routes = {

  bookmark: [

    { name:"● 関東 ⇒ 関西", url:"https://www.busbookmark.jp/searches/detail/10285?" },

    { name:"● 関西 ⇒ 関東", url:"https://www.busbookmark.jp/searches/detail/10286?" },

    { name:"〇 関東 ⇒ ナゴヤ", url:"https://www.busbookmark.jp/searches/detail/10287?" },

    { name:"〇 ナゴヤ ⇒ 関東", url:"https://www.busbookmark.jp/searches/detail/10288?" }

  ],

  kosoku: [

    { name:"● 関東 ⇒ 関西", url:"https://www.kosokubus.com/?page=bus_list&depPref=00013&destPref=00027&brandCode=KZ&ad=KZB" },

    { name:"● 関西 ⇒ 関東", url:"https://www.kosokubus.com/?page=bus_list&depPref=00027&destPref=00013&brandCode=KZ&ad=KZB" },

    { name:"〇 関東 ⇒ ナゴヤ", url:"https://www.kosokubus.com/?page=bus_list&depPref=00013&destPref=00023&brandCode=KZ&ad=KZB" },

    { name:"〇 ナゴヤ ⇒ 関東", url:"https://www.kosokubus.com/?page=bus_list&depPref=00023&destPref=00013&brandCode=KZ&ad=KZB" }

  ],

  hikaku: [

    { name:"バス比較なび（企業ページへ）", url:"https://www.bushikaku.net/corp/10648/" }

  ]

};


function openModal(type) {

  const panel  = document.getElementById('routePanel');

  const list   = document.getElementById('routeList');

  const title  = document.getElementById('routePanelTitle');

  const section = document.querySelector('.ticket-links');


  // 中身を作り直し

  list.innerHTML = "";

  title.textContent = "路線をお選びください";


  routes[type].forEach(r => {

    const a = document.createElement('a');

    a.href = r.url;

    a.target = '_blank';

    a.className = 'route-option';

    a.textContent = r.name;

    list.appendChild(a);

  });


  // セクションだけ暗くして、パネルを表示

  section.classList.add('panel-open');

  panel.style.display = 'block';


  // セクションまでスムーズスクロール

  section.scrollIntoView({ behavior: 'smooth', block: 'center' });

}


function closeModal() {

  const panel   = document.getElementById('routePanel');

  const section = document.querySelector('.ticket-links');

  panel.style.display = 'none';

  section.classList.remove('panel-open');

}

</script>


</body>

</html>