/*

スクロールアニメーション

*/

.scroll-up {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 1s;
    transition: all 1s;
}

.scroll-up.is-show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

/*

トップアニメーション

*/

.shape-group {
    position: fixed;
    overflow: hidden;
}

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

.shape-group-top-right {
    width: 200px;
    height: 200px;
    top: 130px;
    right: -50px;
}

.shape-group-bottom-left {
    width: 500px;
    height: 500px;
    top: 49%;
    left: 50px;
}

.blur-circles {
    filter: blur(5px)
}

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

#circle1,
#circle2,
#circle3 {
    z-index: -11;
}

#circle4,
#circle5,
#circle6,
#circle7,
#circle8,
#circle9 {
    z-index: -11;
}

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

.circle2 {
    fill: none;
    stroke: #e22980;
    stroke-width: 10;
    animation: moveRightDown 20s infinite ease-in-out;
}

.circle3 {
    fill: none;
    stroke: #706fb0;
    stroke-width: 15;
    animation: moveRightUp 19s infinite ease-in-out;
}

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

.circle5,
.circle8 {
    fill: none;
    stroke: #ffffff;
    stroke-width: 10;
    animation: moveRightDown 20s infinite ease-in-out;
}

.circle6,
.circle9 {
    fill: none;
    stroke: #ffffff;
    stroke-width: 15;
    animation: moveRightUp 19s infinite ease-in-out;
}

/* r のアニメーションを transform: scale() に変更 */
@keyframes growAndShrink {

    0%,
    100% {
        transform: scale(1.0);
        /* 元の大きさ (r:35) */
        stroke-width: 14;
    }

    50% {
        /* 40 / 35 ≒ 1.143倍に拡大 */
        transform: scale(1.143);
        /* (r:40) */
        stroke-width: 16;
    }
}

/* cx, cy のアニメーションを transform: translate() に変更 */
@keyframes moveRightUp {

    0%,
    100% {
        transform: translate(0, 0);
        /* 初期位置 (cx:40, cy:50) */
    }

    50% {
        /* x方向に+20, y方向に-10移動 */
        transform: translate(20px, -10px);
        /* (cx:60, cy:40) */
    }
}

/* cx, cy のアニメーションを transform: translate() に変更 */
@keyframes moveRightDown {

    0%,
    100% {
        transform: translate(0, 0);
        /* 初期位置 (cx:40, cy:50) */
    }

    50% {
        /* x方向に+20, y方向に+10移動 */
        transform: translate(20px, 10px);
        /* (cx:60, cy:60) */
    }
}

/* 1文字ずつ表示するアニメーション設定
---------------------------*/
.eachTextAnime {
    display: flex;
}

.eachTextAnime span.char-wrapper {
    display: block;
    overflow: hidden;
}

.eachTextAnime span.char-wrapper span {
    display: inline-block;
    opacity: 0;
    /* 初期状態は非表示 */
    -webkit-transform: translate(0, 100%) skewX(12deg);
    transform: translate(0, 100%) skewX(12deg);
    -webkit-transition: opacity 1s cubic-bezier(0.36, 0.14, 0, 1), -webkit-transform 1s cubic-bezier(0.36, 0.14, 0, 1);
    transition: opacity 1s cubic-bezier(0.36, 0.14, 0, 1), -webkit-transform 1s cubic-bezier(0.36, 0.14, 0, 1);
    transition: opacity 1s cubic-bezier(0.36, 0.14, 0, 1), transform 1s cubic-bezier(0.36, 0.14, 0, 1);
    transition: opacity 1s cubic-bezier(0.36, 0.14, 0, 1), transform 1s cubic-bezier(0.36, 0.14, 0, 1), -webkit-transform 1s cubic-bezier(0.36, 0.14, 0, 1);
}

.eachTextAnime.appeartext span.char-wrapper span {
    opacity: 1;
    -webkit-transform: translate(0, 0%) skewX(0deg);
    transform: translate(0, 0%) skewX(0deg);
    /* appeartext クラスが付いたらアニメーションを実行 */
}

/* スライドイン表示するアニメーション設定
---------------------------*/
.js-inview {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: opacity 1s cubic-bezier(0.36, 0.14, 0, 1), -webkit-transform 1s cubic-bezier(0.36, 0.14, 0, 1);
    transition: opacity 1s cubic-bezier(0.36, 0.14, 0, 1), -webkit-transform 1s cubic-bezier(0.36, 0.14, 0, 1);
    transition: opacity 1s cubic-bezier(0.36, 0.14, 0, 1), transform 1s cubic-bezier(0.36, 0.14, 0, 1);
    transition: opacity 1s cubic-bezier(0.36, 0.14, 0, 1), transform 1s cubic-bezier(0.36, 0.14, 0, 1), -webkit-transform 1s cubic-bezier(0.36, 0.14, 0, 1);
}

.js-inview.is-inview {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}