@charset "UTF-8";

#article-326 .fade-mask {
  width: min(300px, calc(300 / 640 * 100vw));
  height: min(150px, calc(150 / 640 * 100vw));
  background: url('../img/article326_img01.webp') center / cover no-repeat;
  mask-image: linear-gradient(to right, #000 60%, transparent);
  margin-inline: auto;
}

#article-326 .scroll-box {
  width: min(300px, calc(300 / 640 * 100vw));
  height: min(100px, calc(100 / 640 * 100vw));
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #ccc;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  margin-inline: auto;
  margin-top: min(20px, calc(20 / 640 * 100vw));
  margin-bottom: min(20px, calc(20 / 640 * 100vw));
}
#article-326 .scroll-box p + p {
  margin-top: 0;
}

#article-326 .spotlight {
  width: min(200px, calc(200 / 640 * 100vw));
  height: min(200px, calc(200 / 640 * 100vw));
  background: url('../img/article326_img01.webp') center / cover;
  mask-image: radial-gradient(circle at center, black 40%, transparent 60%);
  margin-inline: auto;
}

@keyframes maskMove {
  0% {
    mask-position: 0 0;
  }
  100% {
    mask-position: 200% 0;
  }
}

#article-326 .mask-anim {
  width: min(600px, calc(600 / 640 * 100vw));
  height: min(150px, calc(150 / 640 * 100vw));
  background: url('../img/article326_img01.webp') center / cover;
  mask-image: linear-gradient(to right, transparent, #000, transparent);
  mask-size: 200% 100%;
  animation: maskMove 2s linear infinite;
  margin-inline: auto;
}

#article-326 .image-mask {
  width: min(300px, calc(300 / 640 * 100vw));
  height: min(200px, calc(200 / 640 * 100vw));
  background: url('../img/article326_img01.webp') center / cover;
  mask-image: url('../img/mask.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  margin-inline: auto;
}