/* Vimeo動画の再生枠と操作ボタン（/js/vimeo-facade.js と組み合わせて使う） */
.vf { width: 100%; }
.vf-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #faf7f0; box-shadow: 0 10px 30px rgba(9, 61, 124, .12); }
.vf-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vf-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #faf7f0; }
.vf-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #faf7f0; cursor: pointer; }
.vf-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(0, 69, 143, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .15s; }
.vf-play::after { content: ""; position: absolute; left: 33px; top: 25px; border-style: solid; border-width: 17px 0 17px 27px; border-color: transparent transparent transparent #fff; }
.vf-facade:hover .vf-play, .vf-facade:focus-visible .vf-play { transform: scale(1.08); }
.vf-facade:focus-visible { outline: 3px solid #ffcc00; outline-offset: -3px; }
.vf-hint { margin: 10px 0 0; color: #5e6f87; font-size: 14px; text-align: center; }
.vf-note { margin: 10px 0 0; padding: 10px 14px; border-left: 4px solid #ff8a00; border-radius: 6px; background: #fff6e9; color: #10233f; font-size: 15px; font-weight: 700; line-height: 1.6; }
.vf-note[hidden] { display: none; }
.vf-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.vf-bar[hidden] { display: none; }
.vf-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; border: 2px solid #00458f; border-radius: 999px; background: #fff; color: #00458f; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; cursor: pointer; text-align: left; }
.vf-btn svg { flex: 0 0 22px; width: 22px; height: 22px; fill: currentColor; }
.vf-btn small { display: block; font-size: 12px; font-weight: 500; opacity: .85; }
.vf-btn:hover { background: #eaf5ff; }
.vf-btn:focus-visible { outline: 3px solid #ffcc00; outline-offset: 2px; }
.vf-sound { flex: 1 1 240px; justify-content: center; }
.vf-sound.is-muted { border-color: #e87500; background: #ff8a00; color: #fff; animation: vf-pulse 1.6s ease-in-out infinite; }
.vf-sound.is-muted:hover { background: #e87500; }
@keyframes vf-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, .45); } 50% { box-shadow: 0 0 0 8px rgba(255, 138, 0, 0); } }
@media (max-width: 480px) {
  .vf-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .vf-play::after { left: 27px; top: 20px; border-width: 14px 0 14px 22px; }
  .vf-bar { gap: 8px; }
  .vf-btn { padding: 8px 14px; font-size: 15px; }
  .vf-sound { order: -1; flex-basis: 100%; }
  .vf-toggle, .vf-full { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .vf-sound.is-muted { animation: none; } }