body {margin:0;
       background:#F2F2F2;}



/*　　　トップスペース　　*/
.top_space{
height:500px;
width:100%;
position:relative;
z-index:-1;
background:#FFFFFF;
}

              .top_back{
              background:url(../img/glid.png);  
              background-size:100% 100%;
              position:absolute; top:0; left:0;
              width:100%; height:100%;
              animation: top_back 4s infinite ease;
              }

              @keyframes top_back{
                0%{opacity: 0.8;}
              50%{opacity:0.3;}
              }



.top_logo{
position:absolute;    
height:250px; top:25px; left:50px;
margin:auto; z-index:10;
cursor: pointer;
}

.top_logo:hover{
height:300px;    
}

   .top_sentence{
   position:absolute;
   bottom:15%; left:80px;
   font-size:0.9rem; color:#444444;
   background:#FFFFFF;
   padding:2rem; border-radius:3rem;
   animation: sentence 2s infinite;
   box-shadow: 0px 0px 10px rgba(255,255,255,0.8);
   }


.caution{
position:absolute;
bottom:1rem;  left:6rem;
font-size:0.7rem;
}


@keyframes sentence{
    0%{transform: scale(1); } 
  40%{transform: scale(1.02); } 
}

.top_img{
position:absolute;
width:80%; height:100%; 
right:0; bottom:0; 
display: inline-flex; justify-content: flex-start;
pointer-events: none;
user-select: none;
}

.top_kyara img{
animation: kokyuu 3s infinite ;    
}

@keyframes kokyuu{
    0%{transform: scale(1);}
    30%{transform: scale(1.007);}
    100%{transform: scale(1);}
}

.top_img img{position:absolute; bottom:0;}

.top_01 img{left:20%; height:60%; animation-delay: 0s;}
.top_02 img{left:30%; height:59%; animation-delay: 0.3s;}  
.top_03 img{left:40%; height:80%; animation-delay: 0.7s;}  
.top_04 img{left:52%; height:70%; animation-delay: 1.3s;}  
.top_05 img{left:65%; height:65%; animation-delay: 1.7s;}  
.top_06 img{left:78%; height:100%; animation-delay: 2.2s;}  



/*　でかしゅみへのリンク　sns　*/



.deka_go{
width:70%;
margin-left:15%; margin-top:1rem;
display: flex; justify-content: space-between;
}

.play{
border-radius:3rem;
color:#FFFFFF;
background:#00BFFF;
font-size:2rem;
line-height: 4rem;
height:4rem;
width:30%; text-align: center;
text-decoration: none;
transition:0.3s;
}

.play:hover{
transform: scale(1.05);
box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}

.sns{
margin-top:0.6rem;
width:65%;
}


/*　説明　*/


.setsumei{margin-top:1rem; width:85%;  margin-left:7.5%; position:relative;}
.setsumei img{width:100%; pointer-events: none; user-select: none;}

.t{
position: absolute;   
background:#FFFFFF;
padding:0.4rem 1rem 0.4rem 1rem;
box-shadow:0px 0px 10px rgba(0,0,0,0.4);
border-radius:20px;
font-size:0.65rem;
animation: t 3s infinite;
transition:0.2s;   
cursor: pointer;
}

.t:hover{
font-size:100%
}

@keyframes t{
    0%{transform: translateY(0px);} 
    30%{transform: translateY(2px);}  
}

.t1_01{top:1%; right:20%; animation-delay: 0.3s;}

.t2_01{top:8%; right:20%; animation-delay: 0.5s;}
.t2_02{top:15%; right:20%; animation-delay: 0.7s;}
.t2_03{top:21%; right:20%; animation-delay: 0.03s;}

.t3_01{top:32%; right:20%; animation-delay: 0.41s;}

.t4_01{top:50%; right:20%; animation-delay: 1.32s;}

.t5_01{top:66%; right:20%; animation-delay: 1.51s;}


.kai{
bottom:15%; right:38%;    
padding:1rem 2rem 1rem 2rem;
font-size:0.8rem;
 animation-delay: 1.772s;
}

.t_height{
top:35%; right:48%;  
padding:1rem 2rem 1rem 2rem;
font-size:0.8rem;
 animation-delay: 1.823s;
}

.t_box{
top:2%; right:65%;  
padding:1rem 2rem 1rem 2rem;
font-size:0.8rem;
 animation-delay: 1.623s;
}



/* キャラ　アイテム　一覧 */




.list{
width:90%; position:relative;
left:5%; background:#FFFFFF;
margin-top:2rem;
padding-bottom:3rem;
margin-bottom:1rem;
}

.list_title{
width:95%;
padding-top:1em; padding-left:5%;
font-size:1.3rem;
border-bottom:solid 0.5px #999999;
line-height: 3rem;
}

.list-block p{
padding-left:3rem;
font-size:2remm;
border-bottom:solid 0.5px #BBBBBB;
padding-bottom:0.5rem;
}

.honbun{
margin-left:5%; 
margin-top:1rem; margin-bottom:1rem;
font-size:0.8rem;
}

.kyara-item{display: flex;}

.list-block{
width:45%; border-radius:10px;
background:#FFFFFF;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3)}

.kyara-block{margin-left:4%;}
.item-block{margin-left:2%;}

.content{
display: flex; flex-wrap: wrap;
margin-left:5%;width:90%;
margin-top:1rem;
}

.box{
width:30%;
margin:0 1.5% 1rem 1.5%;
background:#FFFFFF; padding-bottom:0.5rem;
border-radius:20px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
text-align: center;
user-select: none;
transition:0.3s;
}

.box:hover{transform: scale(1.1);}

.name{font-size:0.9rem;}
.height{font-size:0.65rem; color:#F44292;}

.content img{
width:90%;
margin-left:5%;
pointer-events: none;
}


.list_bottom{
position:absolute;
right:5%; bottom:1rem;
color:#777777;
font-size:0.75rem;
}


/*　　form　　*/

.toll{
width:80%;
margin-left:10%;
display: flex;
}

.sozai{
width:100%;
background:#FFFFFF;
position: relative;
}

.sozai h3{
padding-left:2rem;
font-weight:500;
width:60%;
margin-left:10%;
border-bottom:solid 0.5px #999999;
font-size:1.1rem;
}

.sozai .sozai_p{
font-size:0.8rem;
margin-left:2.5rem;
color:#444444;
}

.note{
font-size:0.6rem;  
margin-top:1rem;
padding-top:1rem;
width:80%;
border-top: solid 0.5px #999999;
}

.download{
height:80px; width:80px;
text-align: center; line-height: 80px;
position:absolute; bottom:50px; right:6%;
text-decoration: none; background:#FF8000;
color:#FFFFFF; border-radius:50%;
font-weight:600; border: double 10px #FFFFFF;
font-size:0.7rem;
} 

.form{
position:relative;  
width:100%; margin-left:5%;}