:root{
  --min-h: 620px;
  --pink: #ff2ea6;
  --blue: #00d2ff;
  --gray-hsl: 210 5%;
}
.block {
  position: relative;
  min-height: var(--min-h);
  max-width: 1080px;
  margin: 48px auto;
  background: linear-gradient(180deg,#f7f8fb,#eef1f6);
  overflow: clip;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  padding: 200px 2%;

  /* ★ここで菱形化 */
  clip-path: polygon(
    0% 0%,        /* 左上 */
    100% 100px,   /* 右上：100px下げる */
    100% 100%,    /* 右下 */
    0% calc(100% - 100px) /* 左下：100px上げる */
  );
}

/* JSが自動で作る背景レイヤー */
.block .bg-layer{
  position:absolute; inset:0;
  pointer-events:none; z-index:0; /* ← 背景は常に最背面 */
}

/* パーティクル共通 */
.obj{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--w); height:var(--h);
  transform: translate(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px)));
  will-change: transform, filter, opacity;
}
/* 円 */
.circle{
  border-radius:50%;
  background: hsl(var(--gray-hsl) 86%);
  filter: blur(var(--c-blur,0px));
  opacity: var(--c-opacity,0.22);
  animation: breatheCircle var(--c-dur,10s) ease-in-out infinite;
  animation-delay: var(--c-delay,0s);
}
@keyframes breatheCircle{
  0%{filter:blur(var(--c-bmin));opacity:var(--c-omin);transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) scale(1)}
  50%{filter:blur(var(--c-bmax));opacity:var(--c-omid);transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) scale(1.04)}
  100%{filter:blur(var(--c-bmin));opacity:var(--c-omin);transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) scale(1)}
}
/* 三角形 */
.tri svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.12)); }
.tri polygon{ fill: var(--tri-fill); }

@keyframes spin{
  from{ transform: translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) rotate(0deg) }
  to  { transform: translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) rotate(360deg) }
}
@keyframes blurPulse{
  0%{filter:blur(var(--t-bmin))} 50%{filter:blur(var(--t-bmax))} 100%{filter:blur(var(--t-bmin))}
}

@media (max-width:640px){ :root{ --min-h:520px } }
@media (prefers-reduced-motion:reduce){ .tri,.circle{ animation:none!important } }