/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下から */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上から */

.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から */

.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown {
    animation-name: flipDownAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes flipDownAnime {
    from {
        transform: perspective(2500px) rotateX(100deg);
        opacity: 0;
    }

    to {
        transform: perspective(2500px) rotateX(0);
        opacity: 1;
    }
}


/* 左へ */
.flipLeft {
    animation-name: flipLeftAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    perspective-origin: left center;
    opacity: 0;
}

@keyframes flipLeftAnime {
    from {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
        opacity: 0;
    }

    to {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 1;
    }
}


/* 左上へ */
.flipLeftTop {
    animation-name: flipLeftTopAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes flipLeftTopAnime {
    from {
        transform: translate(-20px,80px) rotate(-15deg);
        opacity: 0;
    }

    to {
        transform: translate(0,0) rotate(0deg);
        opacity: 1;
    }
}

/* 右へ */
.flipRight {
    animation-name: flipRightAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    perspective-origin: right center;
    opacity: 0;
}

@keyframes flipRightAnime {
    from {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
        opacity: 0;
    }

    to {
        transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 1;
    }
}

/* 右上へ */
.flipRightTop {
    animation-name: flipRightTopAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes flipRightTopAnime {
    from {
        transform: translate(-20px,80px) rotate(25deg);
        opacity: 0;
    }

    to {
        transform: translate(0,1) rotate(0deg);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
    opacity: 0;

}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX {
    animation-name: rotateXAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
    from {
        transform: rotateX(0);
        opacity: 0;
    }

    to {
        transform: rotateX(-360deg);
        opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY {
    animation-name: rotateYAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
    from {
        transform: rotateY(0);
        opacity: 0;
    }

    to {
        transform: rotateY(-360deg);
        opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ {
    animation-name: rotateLeftZAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateLeftZAnime {
    from {
        transform: rotateZ(0);
        opacity: 0;
    }

    to {
        transform: rotateZ(-360deg);
        opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ {
    animation-name: rotateRightZAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateRightZAnime {
    from {
        transform: rotateZ(0);
        opacity: 0;
    }

    to {
        transform: rotateZ(360deg);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn {
    animation-name: zoomInAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 縮小 */
.zoomOut {
    animation-name: zoomOutAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
    from {
        transform: scale(1.2);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.zoomInTrigger,
.zoomOutTrigger {
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1);
        opacity: 0;
    }

    to {
        filter: blur(0);
        transform: scale(0.98);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger {
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth {
    animation-name: smoothAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transform-origin: left;
    opacity: 0;
}

@keyframes smoothAnime {
    from {
        transform: translate3d(0, 100%, 0) skewY(12deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0) skewY(0);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.smoothTrigger {
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger {
    position: relative; /* 枠線が書かれる基点*/
    opacity: 0;
}

    .lineTrigger.lineanime {
        animation-name: lineAnimeBase;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

@keyframes lineAnimeBase {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: #333; /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 0;
    background: #333; /* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
    top: 0;
    left: 0;
}

.lineTrigger.lineanime::before {
    animation: lineAnime .5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
    top: 0;
    right: 0;
}

.lineTrigger.lineanime .line2::before {
    animation: lineAnime2 .5s linear .5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after {
    bottom: 0;
    right: 0;
}

.lineTrigger.lineanime::after {
    animation: lineAnime .5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
    bottom: 0;
    left: 0;
}

.lineTrigger.lineanime .line2::after {
    animation: lineAnime2 .5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes lineAnime2 {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear {
    animation: lineInnerAnime .5s linear 1.5s forwards; /*1.5秒後に中央のエリアが0.5秒かけて表示*/
    opacity: 0; /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend {
    animation-name: bgextendAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    position: relative;
    overflow: hidden; /*　はみ出た色要素を隠す　*/
    opacity: 0;
}

@keyframes bgextendAnimeBase {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*中の要素*/
.bgappear {
    animation-name: bgextendAnimeSecond;
    animation-duration: 1s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes bgextendAnimeSecond {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*左から*/
.bgLRextend::before {
    animation-name: bgLRextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666; /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }

    50% {
        transform-origin: left;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}

/*右から*/
.bgRLextend::before {
    animation-name: bgRLextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666; /*伸びる背景色の設定*/
}

@keyframes bgRLextendAnime {
    0% {
        transform-origin: right;
        transform: scaleX(0);
    }

    50% {
        transform-origin: right;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: left;
    }

    100% {
        transform-origin: left;
        transform: scaleX(0);
    }
}

/*下から*/
.bgDUextend::before {
    animation-name: bgDUextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666; /*伸びる背景色の設定*/
}

@keyframes bgDUextendAnime {
    0% {
        transform-origin: bottom;
        transform: scaleY(0);
    }

    50% {
        transform-origin: bottom;
        transform: scaleY(1);
    }

    50.001% {
        transform-origin: top;
    }

    100% {
        transform-origin: top;
        transform: scaleY(0);
    }
}

/*上から*/
.bgUDextend::before {
    animation-name: bgUDextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666; /*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime {
    0% {
        transform-origin: top;
        transform: scaleY(0);
    }

    50% {
        transform-origin: top;
        transform: scaleY(1);
    }

    50.001% {
        transform-origin: bottom;
    }

    100% {
        transform-origin: bottom;
        transform: scaleY(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
    opacity: 0;
}





/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/


.countinfinite {
    animation-iteration-count: infinite; /*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05 {
    animation-delay: 0.5s;
}

.delay-time1 {
    animation-delay: 1s;
}

.delay-time15 {
    animation-delay: 1.5s;
}

.delay-time2 {
    animation-delay: 2s;
}

.delay-time25 {
    animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05 {
    animation-duration: 0.5s;
}

.change-time1 {
    animation-duration: 1s;
}

.change-time15 {
    animation-duration: 1.5s;
}

.change-time2 {
    animation-duration: 2s;
}

.change-time25 {
    animation-duration: 2.5s;
}


.float3 {
    position: relative;
    top: 0;
   
    display: inline-block;
   
    color: #333;
    text-decoration: none;
    outline: none;
    /*アニメーションの設定*/
    transition: all .3s;
}

    /*hoverをしたらボックスに影がつき、上に上がる*/
    .float3:hover {
        top: -3px;
        filter:drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.4));
    }






/*========= 流体ランダムに出現するテキスト ===============*/
.randomAnime {
    visibility: hidden;
}

.border {
    position: relative;
   
   
}

    .border:before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        border-bottom: solid 2px gray;
        transform: translateX(-50%);
        animation: border_anim 3s linear forwards;
        text-underline-offset: -3px;
    }

@keyframes border_anim {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/*========= ページトップのためのCSS ===============*/
/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 10px;
    bottom: 30px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(150px);
}

    /*　上に上がる動き　*/
    #page-top.UpMove {
        animation: UpAnime 0.5s forwards;
    }

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(150px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*　下に下がる動き　*/
#page-top.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(150px);
    }
}


/*===/*========= 流体シェイプを動かす ===============*/
.firstcircle {
    position: absolute;
    top: -23rem;
    left: -5rem;
    /*横幅*/
    width: 45vw;
    /*縦幅*/
    height: 45vh;
    　
    /*影色*/
    box-shadow: 12px 12px 2px 1px rgba(251, 128, 128, 0.4);
    /*背景色*/
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgb(128, 128, 128) 0%, rgba(0, 0, 0, 0.3) 90% );
    /*アニメーションの設定*/
    animation: fluidrotate 10s ease 0s infinite;
}

@keyframes fluidrotate {
    0%, 100% {
        /*【解説】border-radius:楕円の横の半径/楕円の縦の半径;*/
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 30%/49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 90% 34% 66%/56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
}