div.main_box{border:1px solid rgba(250, 210, 203,1.0);padding:1%;background-color:rgba(0,0,30,0.5);box-shadow:#ACF 1px 1px 10px!important;}
h1, h2{text-align:center;margin:0px auto 1% auto;width:100%;}
h1 > img{max-width:100%;}

#c_detail .contents_box{box-shadow:none;}

/*
==========================================================================
背景
==========================================================================
*/
.top_bg01{
background-image:url("../images/bg/world_bg.jpg");
background-position:center top -150px;
background-repeat:repeat-x;
background-size:auto;
-webkit-background-size:auto;
-moz-background-size:auto;
-o-background-size:auto;
background-color:rgba(255,255,255,1.0);}

.top_bg00, .top_bg00::before,
.top_bg01, .top_bg01::before{
-webkit-transition:all 0s ease;
-moz-transition:all 0s ease;
transition:all 0s ease;}

/*
==========================================================================
キャラクターページ
==========================================================================
*/
div.chara_box{position:relative; margin-bottom:-70px;}
div.chara_sp_box{position:relative; margin-bottom:-20px;}

.charalist ul{
display:flex !important;
flex-wrap:wrap;
color:#fff;
font-size:9px !important;
letter-spacing:-0.1em !important;
text-align:center;
justify-content:start !important;
margin-top:10px;}
.charalist ul li{width:8.5%; height:auto; margin:0 0.25% 10px;}
.charalist ul li a{
display:block;
width:100%;
height:70px;
background-color:#1d1b1d !important;
background-size:100% auto !important;
background-position:center !important;
background-repeat:no-repeat !important;
border:1px solid #fad2cb;
border-radius:5px;
cursor:pointer;
margin:0 auto 5px;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
transition:.3s ease-in-out;}
.charalist ul li a:hover{
background-color:#ba2037 !important;
background-size:110% auto !important;
box-shadow:0px 0px 6px 3px #fad2cb inset !important;}

/*キャラ画像 生徒*/
.charalist ul li#btn000 a{background:url("../images/world/chara/btn/btn_000.png");}
.charalist ul li#btn001 a{background:url("../images/world/chara/btn/btn_001.png");}
.charalist ul li#btn002 a{background:url("../images/world/chara/btn/btn_002.png");}
.charalist ul li#btn003 a{background:url("../images/world/chara/btn/btn_003.png");}
.charalist ul li#btn004 a{background:url("../images/world/chara/btn/btn_004.png");}
.charalist ul li#btn005 a{background:url("../images/world/chara/btn/btn_005.png");}
.charalist ul li#btn006 a{background:url("../images/world/chara/btn/btn_006.png");}
.charalist ul li#btn007 a{background:url("../images/world/chara/btn/btn_007.png");}
.charalist ul li#btn008 a{background:url("../images/world/chara/btn/btn_008.png");}
.charalist ul li#btn100 a{background:url("../images/world/chara/btn/btn_100.png");}
.charalist ul li#btn101 a{background:url("../images/world/chara/btn/btn_101.png");}
.charalist ul li#btn102 a{background:url("../images/world/chara/btn/btn_102.png");}
.charalist ul li#btn103 a{background:url("../images/world/chara/btn/btn_103.png");}
.charalist ul li#btn104 a{background:url("../images/world/chara/btn/btn_104.png");}
.charalist ul li#btn105 a{background:url("../images/world/chara/btn/btn_105.png");}
.charalist ul li#btn106 a{background:url("../images/world/chara/btn/btn_106.png");}
.charalist ul li#btn107 a{background:url("../images/world/chara/btn/btn_107.png");}
.charalist ul li#btn108 a{background:url("../images/world/chara/btn/btn_108.png");}
.charalist ul li#btn109 a{background:url("../images/world/chara/btn/btn_109.png");}
.charalist ul li#btn110 a{background:url("../images/world/chara/btn/btn_110.png");}
.charalist ul li#btn111 a{background:url("../images/world/chara/btn/btn_111.png");}
.charalist ul li#btn112 a{background:url("../images/world/chara/btn/btn_112.png");}
/*キャラ画像 生徒グリム*/
.charalist ul li#btn300 a{background:url("../images/world/chara/btn/btn_300.png");}
.charalist ul li#btn301 a{background:url("../images/world/chara/btn/btn_301.png");}
.charalist ul li#btn302 a{background:url("../images/world/chara/btn/btn_302.png");}
.charalist ul li#btn303 a{background:url("../images/world/chara/btn/btn_303.png");}
.charalist ul li#btn304 a{background:url("../images/world/chara/btn/btn_304.png");}
.charalist ul li#btn305 a{background:url("../images/world/chara/btn/btn_305.png");}
.charalist ul li#btn306 a{background:url("../images/world/chara/btn/btn_306.png");}
.charalist ul li#btn307 a{background:url("../images/world/chara/btn/btn_307.png");}
.charalist ul li#btn308 a{background:url("../images/world/chara/btn/btn_308.png");}
.charalist ul li#btn400 a{background:url("../images/world/chara/btn/btn_400.png");}
.charalist ul li#btn401 a{background:url("../images/world/chara/btn/btn_401.png");}
.charalist ul li#btn402 a{background:url("../images/world/chara/btn/btn_402.png");}
.charalist ul li#btn403 a{background:url("../images/world/chara/btn/btn_403.png");}
.charalist ul li#btn404 a{background:url("../images/world/chara/btn/btn_404.png");}
.charalist ul li#btn405 a{background:url("../images/world/chara/btn/btn_405.png");}
.charalist ul li#btn406 a{background:url("../images/world/chara/btn/btn_406.png");}
.charalist ul li#btn407 a{background:url("../images/world/chara/btn/btn_407.png");}
.charalist ul li#btn408 a{background:url("../images/world/chara/btn/btn_408.png");}
.charalist ul li#btn409 a{background:url("../images/world/chara/btn/btn_409.png");}
.charalist ul li#btn410 a{background:url("../images/world/chara/btn/btn_410.png");}
.charalist ul li#btn411 a{background:url("../images/world/chara/btn/btn_411.png");}
.charalist ul li#btn412 a{background:url("../images/world/chara/btn/btn_412.png");}
/*キャラ画像 先生*/
.charalist ul li#btn200 a{background:url("../images/world/chara/btn/btn_200.png");}
.charalist ul li#btn201 a{background:url("../images/world/chara/btn/btn_201.png");}
.charalist ul li#btn202 a{background:url("../images/world/chara/btn/btn_202.png");}
.charalist ul li#btn203 a{background:url("../images/world/chara/btn/btn_203.png");}
.charalist ul li#btn204 a{background:url("../images/world/chara/btn/btn_204.png");}
.charalist ul li#btn205 a{background:url("../images/world/chara/btn/btn_205.png");}
.charalist ul li#btn206 a{background:url("../images/world/chara/btn/btn_206.png");}
.charalist ul li#btn207 a{background:url("../images/world/chara/btn/btn_207.png");}
.charalist ul li#btn208 a{background:url("../images/world/chara/btn/btn_208.png");}
.charalist ul li#btn210 a{background:url("../images/world/chara/btn/btn_210.png");}
.charalist ul li#btn211 a{background:url("../images/world/chara/btn/btn_211.png");}
.charalist ul li#btn212 a{background:url("../images/world/chara/btn/btn_212.png");}
.charalist ul li#btn120 a{background:url("../images/world/chara/btn/btn_120.png");}
/*キャラ画像 追加*/
.charalist ul li#btn500 a{background:url("../images/world/chara/btn/btn_500.png");}
.charalist ul li#btn501 a{background:url("../images/world/chara/btn/btn_501.png");}
.charalist ul li#btn502 a{background:url("../images/world/chara/btn/btn_502.png");}
.charalist ul li#btn503 a{background:url("../images/world/chara/btn/btn_503.png");}
.charalist ul li#btn504 a{background:url("../images/world/chara/btn/btn_504.png");}
.charalist ul li#btn505 a{background:url("../images/world/chara/btn/btn_505.png");}

@media screen and (max-width:799px){
.charalist ul li{width:15%; margin:0 0.8% 10px;}
.charalist ul li a{height:80px;}}

@media screen and (max-width:600px){
.charalist ul li a{height:70px; background-size:150% auto !important;}
.charalist ul li a:hover{background-size:170% auto !important;}}

@media screen and (max-width:400px){
.charalist ul li{width:30%; margin:0 auto 10px;}
.charalist ul li a{background-size:100% auto !important;}
.charalist ul li a:hover{background-size:110% auto !important;}}

/*
==========================================================================
キャラクター詳細
==========================================================================
*/
div.chara_sp_box div.chara_detail_box div#c_na{position:absolute;top:11%;left:0px;}
div.chara_sp_box div.chara_detail_box div#c_bi{position:absolute;top:29%;left:25%;color:#fff;}
div.chara_sp_box div.chara_detail_box div#c_hi{position:absolute;top:36%;left:25%;color:#fff;}
div.chara_sp_box div.chara_detail_box div#c_bl{position:absolute;top:42.5%;left:25%;color:#fff;}
div.chara_sp_box div.chara_detail_box div#c_li{position:absolute;top:49.5%;left:25%;color:#fff;}
div.chara_sp_box div.chara_detail_box div#c_ds{position:absolute;top:56.2%;left:25%;color:#fff;}
div.chara_sp_box div.chara_detail_box div#c_de{position:absolute;top:62%;left:5%;color:#fff;width:90%;height:35%;overflow:auto;}


div.chara_sp_box div.chara_detail_box{
position:absolute;
width:508px;
top:20%;
font-size:14px;
text-align:left;
margin:0 auto 0px 0px;}
div.chara_sp_box div.chara_img_box img#c_gra{position:relative; width:60%; margin-left:8%; z-index:-1;}

@media (min-width:1119px){
div.chara_sp_box div.chara_img_box{position:relative; width:100%; text-align:right; margin-left:0%; margin-top:-60px;}}

@media (min-width:1020px) and (max-width:1120px){
div.chara_sp_box div.chara_img_box{position:relative; width:110%; text-align:right; margin-left:-2%; margin-top:-60px;}}

@media (min-width:980px) and (max-width:1019px){
div.chara_sp_box div.chara_img_box{position:relative; width:114%; text-align:right; margin-left:-3%; margin-top:-60px;}
}


@media (max-width:979px){
div.chara_sp_box div.chara_img_box{text-align:center;}
div.chara_sp_box div.chara_img_box img#c_gra{position:relative; width:100%; max-width:620px; margin-top:-20px; margin-left:0px; z-index:-1;}
div.chara_sp_box div.chara_detail_box{position:relative; width:100%; max-width:504px !important; font-size:1.8vw; margin:0% auto 0px auto;}}

@media (min-width:640px){div.chara_sp_box div.chara_detail_box{font-size:14px;}}

/*
==========================================================================
キャラクター詳細 ボタン装飾
==========================================================================
*/
div.back{width:100%; max-width:500px; margin:-15% auto 10% 0px;}
div.back a{
display:block;
width:240px;
background:#0340b8;
background:-moz-linear-gradient(top, #aeb2b3 0%, #262727 100%);
background:-webkit-linear-gradient(top, #aeb2b3 0%,#262727 100%);
background:linear-gradient(to bottom, #aeb2b3 0%,#262727 100%);
text-align:center;
border-radius:5px;
padding:10px;
margin:0 auto;}
div.back a:hover{
background:#067dfd;
background:-moz-linear-gradient(top, #d3d7d8 0%, #686a6b 100%);
background:-webkit-linear-gradient(top, #d3d7d8 0%,#686a6b 100%);
background:linear-gradient(to bottom, #d3d7d8 0%,#686a6b 100%);}

div.chara_sp_box div.chara_img_box div#prev_btn,
div.chara_sp_box div.chara_img_box div#next_btn{position:absolute; width:70px; height:50px; text-align:center; line-height:50px; cursor:pointer;}
div.chara_sp_box div.chara_img_box div#prev_btn p,
div.chara_sp_box div.chara_img_box div#next_btn p{position:relative;}
div.chara_sp_box div.chara_img_box div#prev_btn p span:before,
div.chara_sp_box div.chara_img_box div#next_btn p span:after{content:""; position:absolute; top:0; border:25px solid transparent;}
div.chara_sp_box div.chara_img_box div#prev_btn p span:before{left:-40px; border-right:15px solid #da0f01;}
div.chara_sp_box div.chara_img_box div#next_btn p span:after{right:-40px; border-left:15px solid #da0f01;}
div.chara_sp_box div.chara_img_box div#prev_btn:hover p span:before{border-right:15px solid #e65e55;}
div.chara_sp_box div.chara_img_box div#next_btn:hover p span:after{border-left:15px solid #e65e55;}

div.chara_sp_box div.chara_img_box div#prev_btn{
background:#0340b8;
background:-moz-linear-gradient(left, #da0f01 0%, #cecccd 100%);
background:-webkit-linear-gradient(left, #da0f01 0%,#cecccd 100%);
background:linear-gradient(to right, #da0f01 0%,#cecccd 100%);}
div.chara_sp_box div.chara_img_box div#next_btn{
background:#0340b8;
background:-moz-linear-gradient(left, #cecccd 0%, #da0f01 100%);
background:-webkit-linear-gradient(left, #cecccd 0%,#da0f01 100%);
background:linear-gradient(to right, #cecccd 0%,#da0f01 100%);}
div.chara_sp_box div.chara_img_box div#prev_btn:hover{
background:#067dfd;
background:-moz-linear-gradient(left, #e65e55 0%, #dedadb 100%);
background:-webkit-linear-gradient(left, #e65e55 0%,#dedadb 100%);
background:linear-gradient(to right, #e65e55 0%,#dedadb 100%);}
div.chara_sp_box div.chara_img_box div#next_btn:hover{
background:#0118ff;
background:-moz-linear-gradient(left, #dedadb 0%, #e65e55 100%);
background:-webkit-linear-gradient(left, #dedadb 0%,#e65e55 100%);
background:linear-gradient(to right, #dedadb 0%,#e65e55 100%);}

/*マウスオーバー*/
div.back a,
div#prev_btn p span,
div#next_btn p span{
color:#fff;
font-size:16px;
font-weight:bold;
letter-spacing:1px;
text-shadow:2px 0px 2px #38321f,1px 2px 2px #38321f;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
transition:.3s ease-in-out;}
div.back a:hover,
div#prev_btn:hover p span,
div#next_btn:hover p span{
text-shadow:0 0 2px rgba(255,255,255,0.4),
      0 0 4px rgba(255,255,255,0.4),
      0 0 6px rgba(238,242,243,1),
      0 0 8px rgba(238,242,243,1),
      0 0 10px rgba(238,242,243,1),
      0 0 12px rgba(120,237,254,1);}

@media (min-width:980px){
div.chara_sp_box div.chara_img_box div#prev_btn,
div.chara_sp_box div.chara_img_box div#next_btn{top:48%;}
div.chara_sp_box div.chara_img_box div#prev_btn{left:50%;}
div.chara_sp_box div.chara_img_box div#next_btn{right:9%;}}

@media (max-width:979px){
div.back{margin:20px auto 0;}
div.chara_sp_box div.chara_img_box div#prev_btn,
div.chara_sp_box div.chara_img_box div#next_btn{top:20%;}
div.chara_sp_box div.chara_img_box div#prev_btn{left:2%;}
div.chara_sp_box div.chara_img_box div#next_btn{right:2%;}}

@media (max-width:480px){
div.back a,
div#prev_btn p span,
div#next_btn p span{font-size:13px;}

div.chara_sp_box div.chara_img_box div#prev_btn,
div.chara_sp_box div.chara_img_box div#next_btn{height:34px; line-height:34px;}
div.chara_sp_box div.chara_img_box div#prev_btn p span:before,
div.chara_sp_box div.chara_img_box div#next_btn p span:after{content:""; position:absolute; top:0; border:17px solid transparent;}
div.chara_sp_box div.chara_img_box div#prev_btn p span:before{left:-27px; border-right:10px solid #da0f01;}
div.chara_sp_box div.chara_img_box div#next_btn p span:after{right:-27px; border-left:10px solid #da0f01;}
div.chara_sp_box div.chara_img_box div#prev_btn:hover p span:before{border-right:10px solid #da0f01;}
div.chara_sp_box div.chara_img_box div#next_btn:hover p span:after{border-left:10px solid #da0f01;}}