枠線ドロー

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

# 追加してほしい効果
枠線ドロー（ボタン）
枠線だけのシンプルなボタン。ホバーすると上辺→右辺→下辺→左辺の順で枠線が一筆書きのように描かれ輪郭が浮かび上がります。控えめな副次アクションに向く上品な演出です。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 枠線ドローボタン: hoverで枠線が上辺→右辺→下辺→左辺の順に一筆書きで描かれる -->
<div class="stage">
  <button class="btn-draw" type="button" aria-label="資料をダウンロードする">
    <svg class="btn-draw__border" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
      <rect x="1" y="1" width="98" height="98" rx="12"></rect>
    </svg>
    <span class="btn-draw__label">資料をダウンロード</span>
  </button>
  <p class="hint">ホバーで枠線が一筆書きに描かれます。待機中も影がゆっくり呼吸しています</p>
</div>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 15%, #fbf9f4 0%, #f2ede1 45%, #e7ddc9 100%);
}

.stage {
  display: grid;
  place-items: center;
  gap: 22px;
  padding: 24px;
}

/* ボタン本体: 背景は透明、輪郭はSVGのrectで描く。padding分の余白をラベルの周囲に確保する */
.btn-draw {
  position: relative;
  border: none;
  background: transparent;
  padding: 20px 48px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #5a4a2f;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(120, 96, 46, .12);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, color .3s ease;
  /* 待機時のアイドル: 影がゆっくり呼吸してクリック可能なことを伝える */
  animation: draw-idle-breathe 3.2s ease-in-out infinite;
}

@keyframes draw-idle-breathe {
  0%, 100% { box-shadow: 0 10px 24px rgba(120, 96, 46, .12); }
  50%      { box-shadow: 0 14px 30px rgba(120, 96, 46, .22); }
}

.btn-draw__label {
  position: relative;
  z-index: 1;
}

.btn-draw__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* --len はJSがrect.getTotalLength()で測った実際の経路長(px)。
   dasharrayを経路長ちょうどにし、dashoffsetを同じ値にすることで初期状態を完全に不可視にする */
.btn-draw__border rect {
  fill: none;
  stroke: #b6893f;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1);
}

.btn-draw:hover,
.btn-draw:focus-visible {
  color: #3c2f18;
  transform: translateY(-2px);
  animation-play-state: paused;
}

.btn-draw:hover .btn-draw__border rect,
.btn-draw:focus-visible .btn-draw__border rect {
  stroke-dashoffset: 0;
}

.btn-draw:active {
  transform: translateY(0) scale(.98);
}

.btn-draw:focus-visible {
  outline: 3px solid rgba(182, 137, 63, .5);
  outline-offset: 4px;
}

.hint {
  margin: 0;
  font-size: 13px;
  color: #8a7c5e;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .btn-draw { animation: none; }
  .btn-draw__border rect { transition-duration: .01ms; }
}

【JavaScript】
// 枠線ドローボタン: rectの実際の経路長を測ってCSS変数--lenに反映する。
// (stroke-dasharray/dashoffsetをその長さに合わせることで、hover前は完全に不可視、
//  hover/focus-visibleでCSSがdashoffsetを0へ遷移させ一筆書きに描かれる)
(() => {
  const rect = document.querySelector('.btn-draw__border rect');
  if (!rect) return; // null安全

  const measure = () => {
    if (typeof rect.getTotalLength !== 'function') return;
    const len = rect.getTotalLength();
    if (Number.isFinite(len) && len > 0) {
      rect.style.setProperty('--len', String(len));
    }
  };

  measure();
  window.addEventListener('resize', measure);
})();

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

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