/*

トップアニメーション

*/

.shape-group {
    position: fixed;
    overflow: hidden;
    /* z-index: -10 */
}

.shape-group-top-left {
    width: 500px;
    height: 500px;
}

.shape-group-bottom-left {
    width: 500px;
    height: 500px;

}

.blended-circles {
    mix-blend-mode: screen;
}

.circle1,
.circle2 {
    /* アニメーションの基点を要素の中心に設定 */
    transform-origin: center;
    /* transformが適用されるボックスを要素自体に設定（より確実） */
    transform-box: fill-box;
}

.circle1 {
    fill: none;
    /* stroke: #ffd700; */
    stroke: #ffffff;
    stroke-width: 15;
    /* SVG側で初期値を設定するため、こちらは削除してもOK */
    animation: growAndShrink 13s infinite ease-in-out;
}

.circle2 {
    fill: none;
    /* stroke: #0db9d7; */
    stroke: #ffffff;
    stroke-width: 10;
    animation: moveRightDown 20s infinite ease-in-out;
}