期間選択

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「期間選択」の効果を追加してください。

# 追加してほしい効果
期間選択（カレンダー & ステップ）
開始日と終了日を2回クリックして選ぶと、範囲全体が帯状にハイライトされ、宿泊日数や期間の長さが自動で表示される上級者向けの日付選択部品です。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 期間選択カレンダー: 開始日→終了日の2クリックで期間をハイライトし、日数を表示します -->
<div class="crp-stage">
  <section class="crp-card" aria-label="期間選択カレンダー">
    <header class="crp-head">
      <button type="button" class="crp-nav" id="crpPrev" aria-label="前の月へ"><span aria-hidden="true">‹</span></button>
      <h2 class="crp-title" id="crpTitle" aria-live="polite">2026年7月</h2>
      <button type="button" class="crp-nav" id="crpNext" aria-label="次の月へ"><span aria-hidden="true">›</span></button>
    </header>

    <div class="crp-weekrow" aria-hidden="true">
      <span class="crp-wd crp-wd--sun">日</span><span class="crp-wd">月</span><span class="crp-wd">火</span><span class="crp-wd">水</span><span class="crp-wd">木</span><span class="crp-wd">金</span><span class="crp-wd crp-wd--sat">土</span>
    </div>

    <div class="crp-grid" id="crpGrid" role="grid" aria-label="開始日と終了日を選択"></div>

    <div class="crp-summary">
      <p class="crp-summary__text" id="crpSummaryText" aria-live="polite">開始日をクリックしてください</p>
    </div>
    <button type="button" class="crp-reset" id="crpReset">選択をリセット</button>
  </section>
</div>

【CSS】
/* 期間選択カレンダー: 開始/終了はインディゴの塗り、中間日はやわらかい帯でつなぐ */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 20px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(79, 70, 229, .10) 0%, transparent 50%),
    radial-gradient(circle at 88% 94%, rgba(184, 134, 63, .12) 0%, transparent 50%),
    #f7f5f1;
  color: #26232c;
}

.crp-stage { width: 100%; max-width: 400px; }

.crp-card {
  background: #fff;
  border: 1px solid #e9e5df;
  border-radius: 22px;
  padding: 24px 22px 20px;
  box-shadow: 0 26px 60px -30px rgba(38, 35, 44, .35), 0 2px 10px rgba(38, 35, 44, .05);
}

.crp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.crp-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .02em; color: #26232c; }

.crp-nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #ece8e1;
  border-radius: 50%;
  background: #fbfaf8;
  color: #57525e;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.crp-nav:hover { background: #f0eef0; border-color: #ddd7cd; }
.crp-nav:active { transform: scale(.92); }
.crp-nav:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.crp-weekrow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.crp-wd {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #a29d8f;
  padding-bottom: 6px;
}
.crp-wd--sun { color: #c2515f; }
.crp-wd--sat { color: #3b82c4; }

.crp-grid { display: grid; gap: 4px; }
.crp-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.crp-day {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #34303a;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
/* :not(...)を付けないと :hover の詳細度が start/end/in-range/preview/out の背景に勝ってしまう */
.crp-day:hover:not(.crp-day--start):not(.crp-day--end):not(.crp-day--in-range):not(.crp-day--preview):not(.crp-day--out) { background: #f2f0eb; }
.crp-day:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.crp-day--out { color: #cac5ba; cursor: default; }
.crp-day--out:hover { background: transparent; }

.crp-day--sun { color: #c2515f; }
.crp-day--sat { color: #3b82c4; }
.crp-day--out.crp-day--sun,
.crp-day--out.crp-day--sat { color: #e3cdd1; }

.crp-day--today { box-shadow: inset 0 0 0 1.6px #b8863f; color: #8a5e26; font-weight: 700; }

/* 仮のプレビュー範囲(終了日クリック前・ホバー中) */
.crp-day--preview {
  background: rgba(79, 70, 229, .09);
  color: #3730a3;
}

/* 確定した範囲の中間日 */
.crp-day--in-range {
  background: rgba(79, 70, 229, .15);
  color: #3730a3;
  font-weight: 600;
}

/* 開始日・終了日(確定) */
.crp-day--start,
.crp-day--end {
  background: #4f46e5;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .6);
}
.crp-day--start.crp-day--today,
.crp-day--end.crp-day--today { box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .6), inset 0 0 0 1.6px #fff; }

.crp-summary { margin: 16px 2px 0; min-height: 1.4em; }
.crp-summary__text { margin: 0; text-align: center; font-size: 13px; color: #57525e; font-weight: 600; }

.crp-reset {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px dashed #ddd7cd;
  border-radius: 12px;
  background: #fbfaf8;
  color: #8f8a80;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.crp-reset:hover { background: #f2f0eb; border-color: #c2515f; color: #a13c48; }
.crp-reset:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

@media (max-width: 380px) {
  .crp-card { padding: 20px 14px 16px; }
  .crp-day { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .crp-nav, .crp-day, .crp-reset { transition: none; }
}

【JavaScript】
// 期間選択カレンダー: 1クリック目で開始日、2クリック目で終了日を確定し範囲をハイライトする。
// ホバー中は仮の範囲をプレビュー表示する。年月は状態として保持し、new Date()(現在時刻)には依存しない。
(() => {
  const grid = document.getElementById('crpGrid');
  const titleEl = document.getElementById('crpTitle');
  const summaryEl = document.getElementById('crpSummaryText');
  const prevBtn = document.getElementById('crpPrev');
  const nextBtn = document.getElementById('crpNext');
  const resetBtn = document.getElementById('crpReset');
  if (!grid || !titleEl || !summaryEl || !prevBtn || !nextBtn || !resetBtn) return; // null安全

  const WD = ['日', '月', '火', '水', '木', '金', '土'];
  const TODAY = { y: 2026, m: 6, d: 15 }; // 固定の「今日」= 2026年7月15日(水)

  let viewY = TODAY.y;
  let viewM = TODAY.m;
  let start = null; // { y, m, d }
  let end = null;   // { y, m, d } (確定した終了日)
  let hover = null; // { y, m, d } (終了日未確定時のホバー先)

  const firstWeekday = (y, m) => new Date(y, m, 1).getDay();
  const ord = (p) => new Date(p.y, p.m, p.d).getTime();
  const fmt = (p) => `${p.y}年${p.m + 1}月${p.d}日`;
  const dowOf = (p) => new Date(p.y, p.m, p.d).getDay();

  function renderGrid() {
    titleEl.textContent = `${viewY}年${viewM + 1}月`;
    grid.innerHTML = '';
    const lead = firstWeekday(viewY, viewM);
    const gridStart = new Date(viewY, viewM, 1 - lead);

    for (let row = 0; row < 6; row++) {
      const rowEl = document.createElement('div');
      rowEl.className = 'crp-row';
      rowEl.setAttribute('role', 'row');
      for (let col = 0; col < 7; col++) {
        const d = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + row * 7 + col);
        const y = d.getFullYear(), m = d.getMonth(), day = d.getDate(), dow = d.getDay();
        const inMonth = m === viewM && y === viewY;
        const isToday = y === TODAY.y && m === TODAY.m && day === TODAY.d;

        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'crp-day';
        if (!inMonth) btn.classList.add('crp-day--out');
        if (dow === 0) btn.classList.add('crp-day--sun');
        if (dow === 6) btn.classList.add('crp-day--sat');
        if (isToday) btn.classList.add('crp-day--today');
        btn.setAttribute('role', 'gridcell');
        btn.setAttribute('aria-selected', 'false');
        if (isToday) btn.setAttribute('aria-current', 'date');
        if (!inMonth) btn.setAttribute('aria-disabled', 'true');
        btn.tabIndex = -1;
        btn.dataset.y = String(y);
        btn.dataset.m = String(m);
        btn.dataset.d = String(day);
        btn.setAttribute('aria-label', `${y}年${m + 1}月${day}日(${WD[dow]})`);
        btn.textContent = String(day);
        rowEl.appendChild(btn);
      }
      grid.appendChild(rowEl);
    }
    applyHighlights();
  }

  // 構造は作り直さず、範囲・今日・フォーカスに応じたクラスだけを付け替える
  function applyHighlights() {
    const buttons = Array.from(grid.querySelectorAll('.crp-day'));
    let focusTarget = null;

    // 確定範囲 または プレビュー範囲を決める
    let a = start;
    let b = end || (start && hover ? hover : null);
    let isPreview = !end && !!b;
    if (a && b && ord(b) < ord(a)) { const t = a; a = b; b = t; }

    buttons.forEach((btn) => {
      btn.classList.remove('crp-day--start', 'crp-day--end', 'crp-day--in-range', 'crp-day--preview');
      btn.setAttribute('aria-selected', 'false');
      btn.tabIndex = -1;

      const p = { y: Number(btn.dataset.y), m: Number(btn.dataset.m), d: Number(btn.dataset.d) };
      const isOut = btn.classList.contains('crp-day--out');

      if (start && !isOut && p.y === start.y && p.m === start.m && p.d === start.d) {
        btn.classList.add('crp-day--start');
        btn.setAttribute('aria-selected', 'true');
        if (!hover && !end) { btn.tabIndex = 0; focusTarget = btn; }
      }
      if (end && !isOut && p.y === end.y && p.m === end.m && p.d === end.d) {
        btn.classList.add('crp-day--end');
        btn.setAttribute('aria-selected', 'true');
      }

      if (a && b) {
        const t = ord(p);
        if (t > ord(a) && t < ord(b)) {
          btn.classList.add(isPreview ? 'crp-day--preview' : 'crp-day--in-range');
        }
      }
    });

    if (!focusTarget) {
      const preferred = end
        ? buttons.find((btn) => btn.classList.contains('crp-day--end'))
        : buttons.find((btn) => btn.classList.contains('crp-day--start'));
      focusTarget = preferred || buttons.find((btn) => !btn.classList.contains('crp-day--out'));
    }
    if (focusTarget) focusTarget.tabIndex = 0;

    updateSummary();
  }

  function updateSummary() {
    if (!start) { summaryEl.textContent = '開始日をクリックしてください'; return; }
    if (start && !end && !hover) {
      summaryEl.textContent = `開始: ${fmt(start)}（${WD[dowOf(start)]}）── 終了日をクリックしてください`;
      return;
    }
    const b = end || hover;
    if (start && b) {
      let a2 = start, b2 = b;
      if (ord(b2) < ord(a2)) { const t = a2; a2 = b2; b2 = t; }
      const nights = Math.round((ord(b2) - ord(a2)) / 86400000);
      const days = nights + 1;
      const tag = end ? '' : '（仮）';
      summaryEl.textContent = `${fmt(a2)} 〜 ${fmt(b2)} ・ ${days}日間 / ${nights}泊${tag}`;
    }
  }

  function changeMonth(delta) {
    viewM += delta;
    if (viewM < 0) { viewM = 11; viewY -= 1; }
    if (viewM > 11) { viewM = 0; viewY += 1; }
    renderGrid();
  }

  grid.addEventListener('click', (e) => {
    const btn = e.target.closest('.crp-day');
    if (!btn || btn.classList.contains('crp-day--out')) return;
    const p = { y: Number(btn.dataset.y), m: Number(btn.dataset.m), d: Number(btn.dataset.d) };

    if (!start || (start && end)) {
      // 新規選択の開始 (何も無い、または前回の範囲が確定済みなら仕切り直し)
      start = p;
      end = null;
      hover = null;
    } else if (ord(p) < ord(start)) {
      // 開始日より前をクリック→そちらを新しい開始日にする
      start = p;
      end = null;
      hover = null;
    } else {
      // 終了日を確定
      end = p;
      hover = null;
    }
    applyHighlights();
  });

  grid.addEventListener('mouseover', (e) => {
    if (end) return; // 確定済みならプレビュー不要
    const btn = e.target.closest('.crp-day');
    if (!btn || btn.classList.contains('crp-day--out') || !start) return;
    hover = { y: Number(btn.dataset.y), m: Number(btn.dataset.m), d: Number(btn.dataset.d) };
    applyHighlights();
  });

  grid.addEventListener('mouseleave', () => {
    if (end) return;
    if (hover) { hover = null; applyHighlights(); }
  });

  grid.addEventListener('keydown', (e) => {
    const btn = e.target.closest('.crp-day');
    if (!btn) return;
    const map = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 7, ArrowUp: -7 };
    const delta = map[e.key];
    if (delta === undefined) return;
    e.preventDefault();
    const all = Array.from(grid.querySelectorAll('.crp-day'));
    const idx = all.indexOf(btn);
    const nextIdx = idx + delta;
    if (nextIdx >= 0 && nextIdx < all.length) {
      all[idx].tabIndex = -1;
      all[nextIdx].tabIndex = 0;
      all[nextIdx].focus();
    }
  });

  resetBtn.addEventListener('click', () => {
    start = null; end = null; hover = null;
    applyHighlights();
  });

  prevBtn.addEventListener('click', () => changeMonth(-1));
  nextBtn.addEventListener('click', () => changeMonth(1));

  renderGrid();
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。