/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 15 2026 | 03:54:17 */
.main-visual-back {
  z-index: -2;
}

/* 写真のコンテナ設定 */
.bubble-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* 泡のような写真の共通スタイル */
.bubble-photo {
  filter: sepia(80%); /* セピア色を80%適用 */
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  /* 複数のアニメーションを適用 */
  animation: rise-and-sway var(--duration) ease-in-out infinite; 
  animation-fill-mode: both;

  -webkit-mask-image: radial-gradient(black 50%, transparent 60%);
  mask-image: radial-gradient(black 50%, transparent 60%);

  will-change: transform; /* ハードウェアアクセラレーションを有効化 */
}
/* 複合アニメーションの定義 */
@keyframes rise-and-sway {
   0% {
    bottom: -500px;
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    bottom: 100vh;
  }
}