/* 原画像は常に残し、生成に成功した場合だけ写真由来の点を重ねる。 */
.reveal-media { position: relative; font-size: 16px; }
.reveal-media .reveal-media__canvas[hidden], .reveal-media .reveal-media__toggle[hidden] { display: none !important; }
.reveal-media .reveal-media__surface { position: relative; display: block; overflow: hidden; isolation: isolate; }
.reveal-media .reveal-media__surface > img { display: block; width: 100%; height: auto; object-fit: cover; }
.reveal-media .reveal-media__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 460ms cubic-bezier(.22, 1, .36, 1); }
.reveal-media.reveal-media--ready .reveal-media__canvas { opacity: 1; }
.reveal-media.reveal-media--ready.reveal-media--photo .reveal-media__canvas { opacity: 0; }
.reveal-media figcaption { margin-top: 12px; color: #276e53; font-size: 14px; line-height: 1.8; }
.reveal-media .reveal-media__toggle { display: none; margin-top: 12px; min-height: 44px; padding: 9px 16px; border: 1px solid #276e53; border-radius: 0; background: #fff; color: #276e53; font: inherit; font-size: 16px; line-height: 1.5; cursor: pointer; touch-action: manipulation; }
.reveal-media:focus-visible, .reveal-media .reveal-media__toggle:focus-visible { outline: 2px solid #276e53; outline-offset: 5px; }
@media (any-pointer: coarse), (hover: none) {
  .reveal-media.reveal-media--ready .reveal-media__toggle { display: inline-flex; align-items: center; }
}
/* スマホでは写真を覆わず、切替操作も不要にする。 */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .reveal-media .reveal-media__canvas, .reveal-media .reveal-media__toggle { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-media .reveal-media__canvas { transition: none; }
}
@media print {
  .reveal-media .reveal-media__canvas, .reveal-media .reveal-media__toggle { display: none !important; }
}