@charset "UTF-8";
#character .charaBox li p.pic img {
border:1px solid #fff;
}

/*-------------------------------
SP only
--------------------------------*/
@media screen and (max-width: 768px) {
.charaBox{
position: relative;
width:96%;
margin:0 auto 30px;
padding:10% 0;
background: url(img/charaBoxBG01.png) no-repeat top center,
url(img/charaBoxBG02.png) no-repeat bottom center																																																																																																																																;
background-size: 100%;
}
.charaBox p.charaAnime{
width:40%;
margin:0 auto;
}
#character .charaBox ul {
width: 100%;
margin: 10px auto 20px;
display: flex;
flex-wrap: wrap;
}
#character .charaBox li {
width:80%;
margin: 0 auto 10px;
float: none;
}
#character .charaBox li p.pic {
position: relative;
}
}
/*-------------------------------
PC only
--------------------------------*/
@media screen and (min-width: 769px) {
.charaBox{
position: relative;
width:840px;
margin:0 auto 30px;
padding:76px 0;
background: url(img/charaBoxBG01.png) no-repeat top center,
url(img/charaBoxBG02.png) no-repeat bottom center																																																																																																																																;
background-size: 100%;
}
.charaBox p.charaAnime{
position: absolute;
width:256px;
top:450px;
right:0;
}
#character .charaBox ul {
width: 830px;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
}
#character .charaBox li {
margin: 0 auto 20px;
float: left;
width: 400px;
}
#character .charaBox li p.pic {
position: relative;
}
}