/* 導入のご相談（soudan.php）… 見本の絵を そのまま1枚。ボタンの上に 本物のリンク */
* { box-sizing: border-box; }
body.sd2 { margin: 0; min-height: 100vh; background: #bfe6fb var(--bg) center / cover fixed no-repeat; font-family: "M PLUS Rounded 1c", sans-serif; }
body.sd2::before { content: ""; position: fixed; inset: 0; backdrop-filter: blur(10px); background: rgba(255, 250, 238, .25); }
.sd2-page { position: relative; width: min(520px, 100%); margin: 0 auto; line-height: 0; box-shadow: 0 0 60px rgba(40, 25, 5, .35); }
.sd2-art { display: block; width: 100%; height: auto; }
.sd2-hit { position: absolute; display: block; border-radius: 999px; }
.sd2-hit--line { left: 7%; top: 68%; width: 86%; height: 8%; animation: sd2-glow 1.8s ease-in-out infinite; }
.sd2-hit--tel { left: 9.5%; top: 77.2%; width: 81.5%; height: 7.8%; }
.sd2-hit--fw { left: 7%; top: 86.5%; width: 86%; height: 10%; border-radius: 24px; }
.sd2-hit:hover { background: rgba(255, 255, 255, .14); }
.sd2-hit:active { background: rgba(0, 0, 0, .1); transform: translateY(2px); }
.sd2-hit:focus-visible { outline: 3px solid #1f6fe0; outline-offset: 2px; }
@keyframes sd2-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); } 50% { box-shadow: 0 0 0 6px rgba(6, 199, 85, .35), 0 0 24px rgba(6, 199, 85, .45); } }
.sd2-back { position: fixed; left: 12px; top: 12px; z-index: 5; padding: 7px 16px; border-radius: 99px; background: rgba(255, 255, 255, .95); color: #6b3a12; font-weight: 900; font-size: 14px; text-decoration: none; line-height: 1.2; box-shadow: 0 3px 0 #d8b27a, 0 6px 14px rgba(0, 0, 0, .2); }
.sd2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sd2-hit--line { animation: none; } }
/* うしろは 入口と同じ 動く背景（ぼかし）。PCでは 絵が 画面の高さに ぴったり おさまる（下が 切れない） */
.sd2-video { position: fixed; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: blur(12px) brightness(1.05); z-index: 0; }
body.sd2::before { z-index: 1; backdrop-filter: none; background: rgba(255, 250, 238, .15); }
.sd2-page { z-index: 2; }
@media (min-width: 521px) {
  body.sd2 { display: grid; place-items: center; height: 100vh; height: 100dvh; overflow: hidden; }
  .sd2-page { width: min(520px, calc((100dvh - 24px) * 941 / 1672)); border-radius: 22px; overflow: hidden; }
}