/* Dixlase ブログ：記事ごとの軽い装飾（.dx-post の中だけに効く） */
.dx-post h2 {
  padding-left: .6em;
  border-left: 3px solid color-mix(in srgb, currentColor 25%, transparent);
}
.dx-post img {
  border-radius: 10px;
}
.dx-post .dx-src {
  font-size: .85em;
  opacity: .72;
}
.dx-post .dx-roles {
  padding: 1em 1.2em;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* スクロールで、本文の段落・見出し・画像・まとめがふわっと出る（JS が動いたときだけ） */
.dx-post.dx-js .dx-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 2s ease, transform .6s ease;
}
.dx-post.dx-js .dx-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media print, (prefers-reduced-motion: reduce) {
  .dx-post.dx-js .dx-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* PC（画面の広いとき）だけ、本文中の図版の幅を抑える。
   縦長の図は本文幅いっぱいだと画面からはみ出すため。
   スマートフォンではこれまでどおり横いっぱいに表示する */
@media (min-width: 48rem) {
  .dixlase-blog-prose .dx-post img,
  .dx-post img {
    display: block;
    max-width: 30rem; /* 480px。もう少し大きくしたいときは 34rem などに */
    height: auto;
    margin-inline: auto;
  }
}