/* css/toppic.css
   CyberMareBar.png の上に Trans*.png をぴったり重ねる
   既存の hero の z-index 構造:
     hero::before (bg) = 0
     toppic-layer      = 0.8
     hero__overlay     = 1
     hero__inner       = 2
*/

.toppic-layer{
  position: absolute;
  inset: 0;
  z-index: 0.8;
  pointer-events: none;
}

.toppic-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 背景と同じ “cover” でピッタリ */
  object-position: center;
  opacity: 0;
  transition: opacity 500ms ease;
}

/* 表示中 */
.toppic-img.is-on{
  opacity: 1;
}