@charset "UTF-8";

/*コンテンツ内アニメーションプリセット*/
/* cubic-bezierベース値 */
/* Quint（強いが、Expoより弱め） */
/* cubic-bezier(0.755, 0.05, 0.855, 0.06);  easeInQuint */
/* cubic-bezier(0.23, 1, 0.32, 1); easeOutQuint */
/* cubic-bezier(0.86, 0, 0.07, 1); easeInOutQuint */

/* Expo（強い） */
/* cubic-bezier(0.95, 0.05, 0.795, 0.035); easeInExpo */
/*cubic-bezier(0.19, 1, 0.22, 1);  easeOutExpo */
/*cubic-bezier(1, 0, 0, 1);  easeInOutExpo */

/* フェードアップ */
.anim-box.fadeup {
    opacity: 0;
    transform: translateY(50px);
    transition: 1.0s ease-out;
}
.anim-box.fadeup.is-animated-01 {
    opacity: 1;
    transform: translateY(0);
    transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.anim-box.slidein {
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.5s ease-out;
/*    transition-delay: 1s;*/
}
.anim-box.slidein.is-animated-sub-01 {
    opacity: 1;
    transform: translateX(0);
    transform: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}



  @keyframes fadeup {
    0% {
      transform: translateY(30px);
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 0;
      transform: translateY(0);
    }
  }


/*ローディング*/

/*ローディング背景*/
div#loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #FFF;
    z-index: 100;
}

div#loading .loading-bg {
    width: 100vw;
    height: 100vw;
    position: fixed;
/*    top:-50vw;
    left:-50vw;*/
    inset: 0;
    margin: auto;
    background: #FFF;
}

/*ローダー*/
.loader/* {
    display: block;
    background-image: url(../img/loading-icon-01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background: #000;
}*/

.loader-test {
    display: block;
    background: #000;
    width: 50px;
    height: 50px;
}

#link {color: #E45635;display:block;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:center; text-decoration: none;}
#link:hover {color: #CCCCCC}

#link, #link:hover {-webkit-transition: color 0.5s ease-out;-moz-transition: color 0.5s ease-out;-ms-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;}

        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-moz-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-webkit-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-o-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }
        .loading-container,
        .loading {
            width: 100px;
            height: 100px;
            position: relative;
            border-radius: 100%;
            z-index: 100;
        }


        .loading-container { margin: 40px auto }

        .loading {
            border: 2px solid transparent;
            border-color: transparent #fff transparent #FFF;
            -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
            -moz-transform-origin: 50% 50%;
            -o-animation: rotate-loading 1.5s linear 0s infinite normal;
            -o-transform-origin: 50% 50%;
            -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
            -webkit-transform-origin: 50% 50%;
            animation: rotate-loading 1.5s linear 0s infinite normal;
            transform-origin: 50% 50%;
        }

        .loading-container:hover .loading {
            border-color: transparent #E45635 transparent #E45635;
        }
        .loading-container:hover .loading,
        .loading-container .loading {
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }

        #loading-text {
            -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
            -o-animation: loading-text-opacity 2s linear 0s infinite normal;
            -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
            animation: loading-text-opacity 2s linear 0s infinite normal;
            color: #ffffff;
            font-family: "Helvetica Neue, "Helvetica", ""arial";
            font-size: 10px;
            font-weight: bold;
            margin-top: 45px;
            opacity: 0;
            position: absolute;
            text-align: center;
            text-transform: uppercase;
            top: 0;
            width: 100px;
        }

/*ローダー＆背景｜動作確認用*/
/*div#loading > div {
    width: 50px;
    height: 50px;
    background: #000;
}*/




/*背景ビジュアル*/

/*マテリアル-01*/
.material-v-wrap-01{
    display: block;
    width: 42px;
    height: 42px;
    background-image: url(../img/anime-item-hana01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


/*背景ビジュアル｜位置設定｜ランダム生成なしVer*/
.material-v-wrap-position-01{
    position: absolute;
    bottom: 38%;
    left: 13%;
}

.material-v-wrap-position-02{
    position: absolute;
    bottom: 62%;
    left: 38%;
}

.material-v-wrap-position-03{
    position: absolute;
    bottom: 30%;
    left: 42%;
}

.material-v-wrap-position-04{
    position: absolute;
    bottom: 68%;
    left: 84%;
}

@media screen and (max-width:415px) {
    .material-v-wrap-position-01{
        position: absolute;
        bottom: 63%;
        left: 10%;
    }
}



@keyframes pulseMotion {
    0% {
      transform: translate(-50%, -50%) scale(1, 1);
      background-color: rgba(170, 143, 123, 0.4)
    }
    100% {
      transform: translate(-50%, -50%) scale(6.5, 6.5);
      background-color: rgba(170, 143, 123, 0)
    }
  }
  
  /*マテリアルアニメーションセット*/
  /*見出し動くグラデーション*/
  @keyframes gradient {
    0% {
    background-position: 0% 50%
    }
    50% {
    background-position: 100% 50%
    }
    100% {
    background-position: 0% 50%
    }
    }
    
    .gradation  {
    /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
    background: linear-gradient(-45deg, #d6d6dd, #e8eac6, #97d2e8, #c2cfcc);
    background-size: 400% 400%;
    animation: gradient 16s ease infinite;
    display: block;
    border-radius: 0%;
    line-height: 3px;
    width: 60px;
    text-align: center;
    color: #fff;
    opacity: 0.9;
    }

    .midashi_h2_01 {
        /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
        background: linear-gradient(-45deg, #d6d6dd, #e8eac6, #97d2e8, #c2cfcc);
        background-size: 400% 400%;
        animation: gradient 16s ease infinite;
        display: block;
        border-radius: 0%;
        text-align: center;
        color: #fff;
        opacity: 0.9;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }





/*矢印と下線の形状*/
.btnlinestretches5{
    /*線の基点とするためrelativeを指定*/
  position:relative;
    /*リンクの形状*/ 
    color: #c9d56a!important;
    padding: 0px 0;
    display: inline-block!important;
    text-decoration: none;
    outline: none;
    text-align: right!important;
    font-weight: normal!important;
}

/*線の設定*/
.btnlinestretches5::before {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 8px;
    /*線の形状*/
/*    width: 100%;*/
    width: 0px;
    height: 1px;
    background: #fff;
}

/*矢印の設定*/
.btnlinestretches5::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:8px;
    /*矢印の形状*/
    width: 8px;
    height: 8px;
/*    border-top: 1px solid #fff;*/
/*    border-right: 1px solid #fff;*/
/*border-top: 8px solid transparent;
border-left: 8px solid #6aa7cd;*/
/*    transform: rotate(45deg);*/
}

/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
    animation: arrowlong01 8s ease infinite;
}
.btnlinestretches5::after {
    animation: arrowlong02 8s ease infinite;
}

@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    60%{width:100px;opacity:1}
    80%{width:100px;opacity:1}
    100%{width:100px;opacity:0}

/*    60%{width:80%;opacity:1}
    80%{width:80%;opacity:1}
    100%{width:80%;opacity:0}*/
}

@keyframes arrowlong02{
    0%{left:0;opacity:0}
    20%{left:0;opacity:1}
    60%{left:40px;opacity:1}
    80%{left:40px;opacity:1}
    100%{left:40px;opacity:0}

/*    60%{left:82.5%;opacity:1}
    80%{left:82.5%;opacity:1}
    100%{left:82.5%;opacity:0}*/
}