/**
 * サイト全体のモーダル：ふわっと出現
 * display:none / [hidden] の解除後にキーフレームが走るように、
 * 「開いている状態」のセレクタにだけ animation を付ける。
 */
@keyframes tbt-modal-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tbt-modal-panel-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tbt-tajima-modal:not([hidden]) .tbt-tajima-modal__backdrop,
.tcf-sp-preservation-modal:not([hidden]) .tcf-sp-preservation-modal-backdrop,
.tcf-sp-legal-modal:not([hidden]) .tcf-sp-legal-backdrop,
.tcf-sp-lightbox:not([hidden]),
#tbt-tel-confirm-modal.is-active .tbt-tel-confirm-modal__overlay,
.tbt-delivery-select-modal.is-active .tbt-delivery-select-modal__overlay,
.tbt-shop-search-modal.is-open .tbt-shop-search-modal__backdrop,
#dps-change-modal.dps-modal-open .dps-modal-overlay,
#dps-modal.dps-modal-open .dps-modal-overlay,
#tcf-incompatible-warning-modal:not([aria-hidden="true"]),
.tbt-loop-add-modal:not([hidden]) .tbt-loop-add-modal__backdrop {
  animation: tbt-modal-veil-in 0.32s ease-out both;
}

.tbt-tajima-modal:not([hidden]) .tbt-tajima-modal__dialog,
.tcf-sp-preservation-modal:not([hidden]) .tcf-sp-preservation-modal-dialog,
.tcf-sp-legal-modal:not([hidden]) .tcf-sp-legal-dialog,
.tcf-sp-lightbox:not([hidden]) .tcf-sp-lightbox-img,
#tbt-tel-confirm-modal.is-active .tbt-tel-confirm-modal__content,
.tbt-delivery-select-modal.is-active .tbt-delivery-select-modal__content,
.tbt-shop-search-modal.is-open .tbt-shop-search-modal__panel,
#dps-change-modal.dps-modal-open .dps-modal-content,
#dps-modal.dps-modal-open .dps-modal-content,
#tcf-incompatible-warning-modal:not([aria-hidden="true"]) .tcf-modal-inner,
.tbt-loop-add-modal:not([hidden]) .tbt-loop-add-modal__dialog {
  animation: tbt-modal-panel-in 0.38s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .tbt-tajima-modal:not([hidden]) .tbt-tajima-modal__backdrop,
  .tbt-tajima-modal:not([hidden]) .tbt-tajima-modal__dialog,
  .tcf-sp-preservation-modal:not([hidden]) .tcf-sp-preservation-modal-backdrop,
  .tcf-sp-preservation-modal:not([hidden]) .tcf-sp-preservation-modal-dialog,
  .tcf-sp-legal-modal:not([hidden]) .tcf-sp-legal-backdrop,
  .tcf-sp-legal-modal:not([hidden]) .tcf-sp-legal-dialog,
  .tcf-sp-lightbox:not([hidden]),
  .tcf-sp-lightbox:not([hidden]) .tcf-sp-lightbox-img,
  #tbt-tel-confirm-modal.is-active .tbt-tel-confirm-modal__overlay,
  #tbt-tel-confirm-modal.is-active .tbt-tel-confirm-modal__content,
  .tbt-delivery-select-modal.is-active .tbt-delivery-select-modal__overlay,
  .tbt-delivery-select-modal.is-active .tbt-delivery-select-modal__content,
  .tbt-shop-search-modal.is-open .tbt-shop-search-modal__backdrop,
  .tbt-shop-search-modal.is-open .tbt-shop-search-modal__panel,
  #dps-change-modal.dps-modal-open .dps-modal-overlay,
  #dps-change-modal.dps-modal-open .dps-modal-content,
  #dps-modal.dps-modal-open .dps-modal-overlay,
  #dps-modal.dps-modal-open .dps-modal-content,
  #tcf-incompatible-warning-modal:not([aria-hidden="true"]),
  #tcf-incompatible-warning-modal:not([aria-hidden="true"]) .tcf-modal-inner,
  .tbt-loop-add-modal:not([hidden]) .tbt-loop-add-modal__backdrop,
  .tbt-loop-add-modal:not([hidden]) .tbt-loop-add-modal__dialog {
    animation: none !important;
  }
}