@charset "utf-8";
/* CSS Document */


#evnt2019kuma-wrap{
 background: url("../img/main-back-8.png") no-repeat top center / cover;
 text-align: center;
 position: relative;
 margin-left: -15px;
 width: calc(100% + 30px);
 overflow: hidden;
}

#evnt2019kuma-wrap img{
 max-width:100%;
 height: auto;
}


.logo-space{
 background:url("../img/visual-back.png") no-repeat top center / 100%;
 padding-top: 36px;
 padding-bottom: 63px;
 position: relative;
 transition: all .3s ease-in;
}





.logo{
 z-index:2;
 position:relative;
 opacity: 0;
 transition: all .5s ease-out;
 transform: scale(0.5,0.5);
}
.logo-space.is-animate .logo{
 opacity: 1; 
 transform: scale(1,1);
 transition-delay: .2s;
}


.logo-bottom{
 position:relative;
 margin-top: -11px;
 z-index: 1;
 transition: all .4s ease-out;
 opacity: 0;
 transform: translateY(30px);
}
.logo-space.is-animate .logo-bottom{
 opacity: 1;
 transform: translateY(0);
 transition-delay: .3s;
}

.kuma-01{
 position:absolute;
 top: 80px;
 left: 100px;
 width: 115px;
 transition: all .4s ease-out;
 transform: rotate(20deg);
 opacity: 0;
}
.logo-space.is-animate .kuma-01{
 transform: rotate(0);
 opacity: 1;
}

.kuma-02{
 position:absolute;
 top: 273px;
 left: 186px;
 width: 133px;
 transition: all .4s ease-out;
 transform: rotate(-20deg);
 opacity: 0;
}
.logo-space.is-animate .kuma-02{
 transform: rotate(0);
 opacity: 1;
 transition-delay: .3s;
}

.kuma-03{
 position:absolute;
 top: 490px;
 left: 68px;
 width: 138px;
 transition: all .4s ease-out;
 transform: rotate(20deg);
 opacity: 0;
}

.logo-space.is-animate .kuma-03{
 transform: rotate(0);
 opacity: 1;
 transition-delay: .5s;
}

.kuma-04{
 position:absolute;
 top: 25px;
 right: 193px;
 width: 135px;
 transition: all .4s ease-out;
 transform: rotate(20deg);
 opacity: 0;
}
.logo-space.is-animate .kuma-04{
 transform: rotate(0);
 opacity: 1;
 transition-delay: .7s;
}

.kuma-05{
 position:absolute;
 top: 328px;
 right: 71px;
 width: 135px;
 transition: all .4s ease-out;
 transform: rotate(-20deg);
 opacity: 0;
}
.logo-space.is-animate .kuma-05{
 transform: rotate(0);
 opacity: 1;
 transition-delay: .5s;
}

.kuma-06{
 position:absolute;
 top: 498px;
 right: 150px;
 width: 135px;
 z-index: 4;
 transition: all .4s ease-out;
 transform: rotate(20deg);
 opacity: 0;
}
.logo-space.is-animate .kuma-06{
 transform: rotate(0);
 opacity: 1;
 transition-delay: 1s;
}

.sec-01{
 transition: all .4s ease-out;
 opacity: 0;
 transform: translateY(50px);
}
.sec-01.is-animate{
 opacity: 1;
 transform: translateY(0);
}

.sec-02{
 margin-bottom: 66px;
 transition: all .4s ease-out;
 opacity: 0;
 transform: translateY(50px);
}
.sec-02.is-animate{
 opacity: 1;
 transform: translateY(0);
}

.sec-03{
 margin-bottom: 95px;
 transition: all .4s ease-out;
 opacity: 0;
 transform: translateY(50px);
}
.sec-03.is-animate{
 opacity: 1;
 transform: translateY(0);
}


.sec-04{
 margin-bottom: 95px;
 transition: all .4s ease-out;
 opacity: 0;
 transform: translateY(50px);
}
.sec-04.is-animate{
 opacity: 1;
 transform: translateY(0);
}
 
 
.sec-05{
 margin-bottom: 30px;
 transition: all .4s ease-out;
 opacity: 0;
 transform: translateY(50px);
}
.sec-05.is-animate{
 opacity: 1;
 transform: translateY(0);
}
 

.event2019-kuma-bottom{
 background:url("../img/bottom-back.png") no-repeat top center / 100%,
  url("../img/line.png") no-repeat top center / 98%;
 padding-top: 58px;
 padding-bottom: 22px;
}


.sec-06{
 margin-bottom:70px;
 transition: all .4s ease-out;
 opacity: 0;
 transform: translateY(50px);
}
.sec-06.is-animate{
 opacity: 1;
 transform: translateY(0);
}
.sec-07{
 transition: all .4s ease-out;
 opacity: 0;
 transform: translateY(50px);
}
.sec-07.is-animate{
 opacity: 1;
 transform: translateY(0);
}



.sec-08{
 position:relative;
 margin-top: -30px;
 width: 955px;
 margin-left: 150px;
 transition: all .4s ease-out;
 opacity: 0;
 transform: scale(1.5,1.5);
}
.sec-08.is-animate{
 opacity: 1;
 transform: scale(1,1);
}



.sec-08 .twitter{
 position: absolute;
 top: 92px;
 left: 210px;
}
.sec-08 .facebook{
 position: absolute;
 top: 92px;
 left: 302px;
}
.sec-08 .insta{
 position: absolute;
 top: 92px;
 left: 393px;
}



.notes-m{
 text-align:right;
 padding-right: 10%;
}
ul.notes-m li{
 display:inline-block;
}



@media screen and (max-width: 640px){
 
 #evnt2019kuma-wrap{
 background:#FFECA7 url("../img/main-back-sp.png") no-repeat top center / 100%;
 text-align: center;
 position: relative;
 margin-left: -12px;
 width: calc(100% + 24px );
  overflow: hidden;
}
 .logo-space{
 background:url("../img/visual-back-sp.png") no-repeat top center / 100%;
 padding-top: 20%;
 padding-bottom: 3%;
 position: relative;
 transition: all .3s ease-in;
}
 
 .logo{
  width: 70%;
  margin: 0 auto 5%;
}
 .logo-bottom{
 margin-top: 0;
  padding: 0 3%;
}
 
 
 .sec-01{
  margin-bottom: 5%;
 }
 
 .sec-02{
  padding:0 3%;
  margin-bottom: 5%;
 }
 
  .sec-03{
  margin-bottom: 10%;
 }
   .sec-04{
  margin-bottom: 10%;
 }
 
 .event2019-kuma-bottom{
 background:url("../img/line-sp.png") no-repeat top center / 98%;
 padding: 5% 3% 5%;
}
 
 .sec-06{
  margin-bottom: 5%;
 }
  
 .sec-07{
  margin-bottom: 3%;
 }
 
.sec-08{
 position:relative;
 width: 100%;
 margin-top: 0;
 margin-left: 0;
 transition: all .4s ease-out;
 opacity: 0;
 transform: scale(1.5,1.5);
}
 .notes-m{
 text-align:left;
 padding-right: 0;
 font-size: 2.2vw;
}
 
 
.sec-08 .twitter{
 position: absolute;
 top: 23%;
 left: 19%;
 width: 18%;
}
.sec-08 .facebook{
 position: absolute;
 top: 23%;
 left: 39%;
 width: 18%;
}
.sec-08 .insta{
 position: absolute;
 top: 23%;
 left: 59%;
 width: 18%;
}


 
.kuma-01{
 position:absolute;
 top: 6%;
 left: 15%;
 width: 15%;
}

.kuma-02{
 position:absolute;
 top: 25%;
 left: 2%;
 width: 17%;
}

.kuma-03{
 position:absolute;
 top: 55%;
 left: 7%;
 width: 17%;
}

.kuma-04{
 position:absolute;
 top: 2%;
 right: 18%;
 width: 17%;
}

.kuma-05{
 position:absolute;
 top: 20%;
 right: 2%;
 width: 17%;
}


.kuma-06{
 position:absolute;
 top: 58%;
 right: 12%;
 width: 17%;
}
 .notes-m{
  display: none;
}
 
}