@charset "UTF-8";

/* 「ホームドクター119の場合」だけを、元の画像位置に重ねて表示。 */
.direct-emphasis {
  position: absolute;
  z-index: 2;
  left: var(--panel-x);
  top: var(--panel-y);
  width: var(--panel-width);
  pointer-events: none;
}

.direct-emphasis__content {
  transform-origin: center;
}

.direct-emphasis img {
  width: 100%;
  height: auto;
}

/* 待機中も通常表示。フェードせず、一度だけ10%拡大して戻す。 */
.direct-emphasis[data-emphasis-state='playing'] .direct-emphasis__content {
  animation: direct-panel-emphasis 500ms both;
}

@keyframes direct-panel-emphasis {
  0% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  40% {
    transform: scale(1.10);
    animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 767px) {
  .direct-emphasis {
    left: var(--panel-x-sp);
    top: var(--panel-y-sp);
    width: var(--panel-width-sp);
  }
}

@media (prefers-reduced-motion: reduce) {
  .direct-emphasis .direct-emphasis__content {
    animation: none !important;
    transform: none !important;
  }
}

@media print {
  .direct-emphasis .direct-emphasis__content {
    animation: none !important;
    transform: none !important;
  }
}