@charset "utf-8";
/**----------------------------------------------------------
 *CSS information 
 *
 * file name	: index.css Version:1.0
 -----------------------------------------------------------*/

h1 {
  font-size: 2.2rem;
  border-bottom:3px solid #333;
  padding:5px;
  float: left;
  width:100%;
  margin-bottom:30px;
  }

.charamalink {
  font-size: 1.8rem;
  border-bottom:2px solid #333;
  padding:5px;
  float: left;
  width:100%;
  margin-bottom:30px;
  }

.box {
  font-size:1.4rem;
  margin-bottom:30px;
}

/* top chara list */
.top_chara_list {
clear: both;
margin: 0 auto 40px auto;
padding:0 0 0 25px;
overflow: hidden;}

.top_chara_list li {
display: block;
width:148px;
height:48px;
margin: 0 35px 50px 0;
border: 1px solid #ccc;
float: left;
}

.top_chara_list li div {
width:148px;
height:48px;
text-indent: -9999px;
filter:grayscale(100%) opacity(70%) brightness(40%);
-webkit-filter:grayscale(100%) opacity(70%) brightness(40%);   // for Google Chrome and Safari
-moz-filter:grayscale(100%) opacity(70%) brightness(40%);      // for Firefox
-o-filter:grayscale(100%) opacity(70%) brightness(40%);        // for Oper
-ms-filter:grayscale(100%) opacity(70%) brightness(40%);       // for Internet Explorer
}


.top_chara_list li a {
display: block;
width:148px;
height:48px;
text-indent: -9999px;
filter:grayscale(50%);
-webkit-filter:grayscale(50%);   // for Google Chrome and Safari
-moz-filter:grayscale(50%);      // for Firefox
-o-filter:grayscale(50%);        // for Oper
-ms-filter:grayscale(50%);       // for Internet Explorer
}

.top_chara_list li a:hover {
filter:grayscale(0%) brightness(115%);
-webkit-filter:grayscale(0%) brightness(115%);   // for Google Chrome and Safari
-moz-filter:grayscale(0%) brightness(115%);      // for Firefox
-o-filter:grayscale(0%) brightness(115%);        // for Oper
-ms-filter:grayscale(0%) brightness(115%);       // for Internet Explorer
}

.list_miki {background:url(../img/common/01.jpg) no-repeat;}
.list_jamil {background:url(../img/common/02.jpg) no-repeat;}
.list_abel {background:url(../img/common/03.jpg) no-repeat;}
.list_meary {background:url(../img/common/04.jpg) no-repeat;}
.list_mieger {background:url(../img/common/05.jpg) no-repeat;}
.list_asuka {background:url(../img/common/06.jpg) no-repeat;}
.list_freed {background:url(../img/common/07.jpg) no-repeat;}
.list_neena {background:url(../img/common/08.jpg) no-repeat;}
.list_sarutobi {background:url(../img/common/09.jpg) no-repeat;}
.list_miranda {background:url(../img/common/10.jpg) no-repeat;}
.list_kreis {background:url(../img/common/11.jpg) no-repeat;}
.list_deute {background:url(../img/common/12.jpg) no-repeat;}
.list_malc {background:url(../img/common/13.jpg) no-repeat;}
.list_pochi {background:url(../img/common/14.jpg) no-repeat;}
.list_yukine {background:url(../img/common/15.jpg) no-repeat;}
.list_diana {background:url(../img/common/16.jpg) no-repeat;}
.list_masamune {background:url(../img/common/17.jpg) no-repeat;}
.list_triffy {background:url(../img/common/18.jpg) no-repeat;}
.list_mark {background:url(../img/common/19.jpg) no-repeat;}
.list_catherine {background:url(../img/common/20.jpg) no-repeat;}
.list_nettysoon {background:url(../img/common/21.jpg) no-repeat;}
.list_elma {background:url(../img/common/22.jpg) no-repeat;}
.list_ashelena {background:url(../img/common/23.jpg) no-repeat;}
.list_cotton {background:url(../img/common/24.jpg) no-repeat;}
.list_vitz {background:url(../img/common/25.jpg) no-repeat;}
.list_botan {background:url(../img/common/26.jpg) no-repeat;}
.list_dieta {background:url(../img/common/27.jpg) no-repeat;}
.list_karin {background:url(../img/common/28.jpg) no-repeat;}
.list_ryvel {background:url(../img/common/29.jpg) no-repeat;}
.list_recy {background:url(../img/common/30.jpg) no-repeat;}
.list_kieli {background:url(../img/common/31.jpg) no-repeat;}
.list_baldur {background:url(../img/common/32.jpg) no-repeat;}
.list_malachite {background:url(../img/common/33.jpg) no-repeat;}
.list_creil {background:url(../img/common/34.jpg) no-repeat;}
.list_ente {background:url(../img/common/35.jpg) no-repeat;}
.list_wallace {background:url(../img/common/36.jpg) no-repeat;}
.list_cacus {background:url(../img/common/37.jpg) no-repeat;}
.list_marl {background:url(../img/common/38.jpg) no-repeat;}
.list_amethys {background:url(../img/common/39.jpg) no-repeat;}
.list_royard {background:url(../img/common/40.jpg) no-repeat;}
.list_fia {background:url(../img/common/41.jpg) no-repeat;}
.list_riria {background:url(../img/common/42.jpg) no-repeat;}
.list_saffyne {background:url(../img/common/43.jpg) no-repeat;}
.list_willi {background:url(../img/common/44.jpg) no-repeat;}
.list_henrietta {background:url(../img/common/45.jpg) no-repeat;}
.list_helios {background:url(../img/common/46.jpg) no-repeat;}
.list_landis {background:url(../img/common/47.jpg) no-repeat;}
.list_leano {background:url(../img/common/48.jpg) no-repeat;}
.list_mileena {background:url(../img/common/49.jpg) no-repeat;}
.list_cultus {background:url(../img/common/50.jpg) no-repeat;}
.list_vein {background:url(../img/common/51.jpg) no-repeat;}
.list_latte {background:url(../img/common/52.jpg) no-repeat;}
.list_ivrik {background:url(../img/common/53.jpg) no-repeat;}
.list_melior {background:url(../img/common/54.jpg) no-repeat;}
.list_yutia {background:url(../img/common/55.jpg) no-repeat;}
.list_martini {background:url(../img/common/56.jpg) no-repeat;}
.list_canard {background:url(../img/common/57.jpg) no-repeat;}
.list_koharu {background:url(../img/common/58.jpg) no-repeat;}
.list_luct {background:url(../img/common/59.jpg) no-repeat;}
.list_shihou {background:url(../img/common/60.jpg) no-repeat;}
.list_rufika {background:url(../img/common/61.jpg) no-repeat;}
.list_keina {background:url(../img/common/62.jpg) no-repeat;}
.list_roberto {background:url(../img/common/63.jpg) no-repeat;}
.list_theobald {background:url(../img/common/64.jpg) no-repeat;}

@media screen and (max-width:480px){
#header,
#contents,
#footer {
box-sizing: border-box;
min-width: 100%;
width:100%;}

#contents {padding:10px !important;}

.top_chara_list {width:100%;}

h1 {
  font-size: 2rem;
  float:none;
  width:100%;
  margin:0 auto 20px auto;
  box-sizing: border-box;
  }

.top_chara_list {
width: 100%;
box-sizing: border-box;
clear: both;
margin: 0 auto 10px auto;
padding:0;
overflow: hidden;}

.top_chara_list li {
box-sizing: border-box;
display: block;
width:46%;
height:44px;
margin: 0 2% 40px 2%;
border: 1px solid #888;
float: left;
}

.top_chara_list li div,
.top_chara_list li a {
box-sizing: border-box;
display: block;
width:100%;
height:100%;
background-size:100% auto;
}


}