/* ==========================================================
   サンプル共通の最小限（リセット＋「制作イメージ」バー）
   レイアウト・配色は各サンプルの <style> で個別に定義
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: 44px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.demo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: 44px;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: #16130f; color: #fff; font-size: .82rem; line-height: 1;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; overflow-x: auto; white-space: nowrap;
}
.demo-bar__tag { background: #f26522; border-radius: 999px; padding: 4px 10px; font-weight: 700; }
.demo-bar__txt { opacity: .9; }
.demo-bar__plan { color: #ffd400; font-weight: 700; }
.demo-bar__cta { margin-left: auto; background: #fff; color: #16130f; border-radius: 999px; padding: 6px 14px; text-decoration: none; font-weight: 700; }
.demo-bar__back { text-decoration: none; opacity: .8; font-weight: 700; }
.demo-bar__back:hover { opacity: 1; }
@media (max-width: 760px) { .demo-bar__txt, .demo-bar__plan { display: none; } }

/* サンプル共通のフッター注記 */
.demo-foot { background: #16130f; color: #fff; padding: 36px 20px; text-align: center; font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.demo-foot p { margin: 0 auto 16px; max-width: 46em; font-size: .82rem; line-height: 1.9; opacity: .78; }
.demo-foot strong { color: #ffd400; }
.demo-foot__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.demo-foot__row a {
  text-decoration: none; font-weight: 700; font-size: .88rem; border-radius: 999px; padding: 10px 20px;
  background: #f26522; color: #fff; border: 2px solid #f26522;
}
.demo-foot__row a + a { background: transparent; border-color: rgba(255, 255, 255, .45); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.demo-foot__pages { display: inline-block; margin-top: 6px; color: #ffd400; }