:root {
  --triangle-height: 55%;   /* 三角形の高さ */
  --circle-size: 36%;       /* 円の直径 */
  --circle-offset: 50%;     /* 三角形頂点からのずらし量 */
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 背景 */
.bg {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}

.bg.left {
  left: 0;
  background: #9ea7a1;
}

.bg.right {
  right: 0;
  background: #d6cec5;
}

/* 下部三角形 */
.bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 140%;
  height: var(--triangle-height);
  background: #3a323d;
  transform: translateX(-50%);
  clip-path: polygon(
    0 100%,
    50% 0,
    100% 100%
  );
}

/* 円（★三角形基準） */
.circle {
  position: absolute;
  left: 50%;
  bottom: var(--triangle-height);
  width: var(--circle-size);
  aspect-ratio: 1 / 1;
  background: #a2736a;
  border-radius: 50%;
  transform: translate(
    -50%,
    var(--circle-offset)
  );
}