/* =========================
   1. ベース背景
========================= */
html {
  background-color: #fff8f1 !important;
}
body {
  background-color: transparent !important;
  position: relative;
}

/* =========================
   2. 背景コンテナ（absoluteで広告バグを回避）
========================= */
.my-custom-bg-wrap {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
  pointer-events: none;
  overflow: hidden;
}

/* =========================
   3. 図形の基本スタイル
========================= */
.my-bg-item {
  position: absolute;
  opacity: 0.5; /* 数が増えるので、文字が読みやすいように少し薄くしました */
  will-change: transform;
}

.my-circle { border-radius: 50%; }
.my-square { background-color: transparent !important; border: 3px solid; }
.my-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

.my-blue { background-color: rgba(136,196,216,0.4); border-color: rgba(136,196,216,0.4); }
.my-orange { background-color: rgba(255,164,92,0.4); border-color: rgba(255,164,92,0.4); }

/* =========================
   4. ふわふわループアニメーション
========================= */
@keyframes myFloat1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate3d(40px, -50px, 0) rotate(45deg) scale(1.1); }
}
@keyframes myFloat2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate3d(-50px, 30px, 0) rotate(-45deg) scale(0.9); }
}
@keyframes myFloat3 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate3d(30px, 40px, 0) rotate(90deg) scale(1.05); }
}