/* =========================================
   音符のあしらい
========================================= */
.xcs-trial-deco{
    position: relative;
}

.xcs-trial-deco::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -5%;
    width: 25%;
    height: auto;
    aspect-ratio: 1266 /536 ;
    background: url('../images/onpu_3.webp') no-repeat center center / contain;
    z-index: -1;
    rotate: 8deg;
}

.xcs-trial-deco::before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0%;
    width: 11%;
    height: auto;
    aspect-ratio: 828 /1144 ;
    background: url('../images/onpu_4.webp') no-repeat center center / contain;
    z-index: -1;
    rotate: 15deg;
}




/* =========================================
   下側を白くフェードアウト
   使い方：対象要素に xcs-bottom-fadeout を付与
========================================= */
.xcs-bottom-fadeout {
  position: relative;
  overflow: hidden; /* はみ出したフェードを隠す */
}

.xcs-bottom-fadeout::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: clamp(60px, 12vw, 160px); /* フェードの高さ */
  pointer-events: none; /* クリックを邪魔しない */

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 80%,
    #fff 100%
  );
}