/* トップ画像のcss */
.img_header {
    width: 60rem;
    height: 29.5rem;
    object-fit: cover;
    position: relative;
}

.colorfilter-base {
    background-color: whitesmoke;
    /* カラーフィルタ効果の色を指定 */
    display: inline-block;
    /* (任意：インラインブロック化したい場合) */
}

.colorfilter-image {
    opacity: 0.25;
    /* カラーフィルタ効果の度合いを指定(※) */
    display: block;
}

/* think createの部分 */
svg {
    height: 100vmin;
    left: calc(50% - 50vmin);
    position: relative;
    width: 100vmin;
    position: absolute;
    top: 45%;
    left: 54%;
    transform: translate(-50%, -50%);
}

.ball-top {
    animation: BallTopMove 4s both infinite;
    motion-path: path("m 66.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208");
    offset-path: path("m 66.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208");
    motion-offset: 0%;
    offset-distance: 0%;
}

.ball-bottom {
    animation: BallBottomMove 4s both infinite;
    motion-path: path("m 66.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208");
    offset-path: path("m 66.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208");
    motion-offset: 100%;
    offset-distance: 100%;
}

.thinkMaskCircle {
    animation: ClipSmallMove 4s both infinite;
}

.createMaskCircle {
    animation: ClipBigMove 4s both infinite;
}

@keyframes BallTopMove {
    0% {
        motion-offset: 0%;
        offset-distance: 0%;
        transform: scale(0);
    }

    10% {
        transform: scale(1);
    }

    42.5% {
        transform: scale(1);
    }

    50% {
        motion-offset: 100%;
        offset-distance: 100%;
        transform: scale(0);
    }

    100% {
        motion-offset: 100%;
        offset-distance: 100%;
        transform: scale(0);
    }
}

@keyframes BallBottomMove {
    0% {
        motion-offset: 100%;
        offset-distance: 100%;
        transform: scale(0);
    }

    50% {
        motion-offset: 100%;
        offset-distance: 100%;
        transform: scale(0);
    }

    60% {
        transform: scale(1);
    }

    92.5% {
        transform: scale(1);
    }

    100% {
        motion-offset: 0%;
        offset-distance: 0%;
        transform: scale(0);
    }
}

@keyframes ClipSmallMove {
    0% {
        transform: translateY(-63%);
    }

    17.5% {
        transform: translateY(-63%);
    }

    50% {
        transform: translateY(0%);
    }

    62.5% {
        transform: translateY(63%);
    }

    100% {
        transform: translateY(63%);
    }
}

@keyframes ClipBigMove {
    0% {
        transform: translateY(0%);
    }

    17.5% {
        transform: translateY(-63%);
    }

    50% {
        transform: translateY(-63%);
    }

    62.499% {
        transform: translateY(-63%);
    }

    62.5% {
        transform: translateY(63%);
    }

    100% {
        transform: translateY(0%);
    }
}

/* my profile */
.read_more {
    position: absolute;
    bottom: 0%;
    left: 46%;
    transform: translate(-50%, -50%);
}

.scroll {
    display: inline-block;
    padding-top: 70px;
    position: relative;
}

.scroll::before {
    animation: scroll 3.5s infinite;
    border: solid #000;
    border-width: 0 0 1px 1px;
    content: "";
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: rotate(-45deg);
    width: 20px;
    height: 20px;
}

@keyframes scroll {
    0% {
        transform: rotate(-45deg) translate(0, 0);
    }

    80% {
        transform: rotate(-45deg) translate(-30px, 30px);
    }

    0%,
    80%,
    100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

.fuwafuwa {
    -webkit-animation-name: fuwafuwa;
    /* fuwafuwaっていうアニメーションをしてね！ */
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    /*-webkit-animation-direction:alternate;*/
    -webkit-animation-timing-function: ease;

    -moz-animation-name: fuwafuwa;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    /*-moz-animation-direction:alternate;*/
    -moz-animation-timing-function: ease;
}

/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwafuwa {
    0% {
        -webkit-transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0, -10px);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}

@-moz-keyframes fuwafuwa {
    0% {
        -moz-transform: translate(0, 0);
    }
    50% {
        -moz-transform: translate(0, -10px);
    }
    100% {
        -moz-transform: translate(0, 0);
    }
}

.card-body {
    height: 9rem;
}

.card-text {
    font-size: 0.7rem;
}