@charset "UTF-8";
/* CSS Document */
#news {
   background-image: url("https://ange-vierge-anime.com/character/img/bg_body.jpg");
}


#main {
   width: 800px;
}



#bx-pager {
   text-align: center;
   width: 880px;
}

.character .bx-wrapper {
   width: 880px;

}

.character .bx-viewport {
   height: 780px!important;
   width: 880px!important;
}





/* Effect 9: second text and borders */
.cl-effect-9 {
   height: 80px;
   position: relative;
   }

.cl-effect-9 a {
	margin-bottom: 0;
	margin-left: 13px;
	margin-right: 10px;
	margin-top: 0;
	padding: 18px 7px;
	float: left;
	width: 135px;
	position: relative;
	color: #000;
}

.cl-effect-9 a#c_1 {
   margin-left: 0;
}
.cl-effect-9 a#c_5 {
   font-size:1.5rem;
   letter-spacing: -1px;
}


.cl-effect-9 a::before,
.cl-effect-9 a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #000;
	content: '';
	opacity: 0.5;
	-webkit-transition: opacity 0.3s, height 0.3s;
	-moz-transition: opacity 0.3s, height 0.3s;
	transition: opacity 0.3s, height 0.3s;
}



.cl-effect-9 a#c_1::before,
.cl-effect-9 a#c_1::after {
   background: #2793D7;
}

.cl-effect-9 a#c_2::before,
.cl-effect-9 a#c_2::after {
   background: #AA5DC1;
}

.cl-effect-9 a#c_3::before,
.cl-effect-9 a#c_3::after {
   background: #F1525A;
}

.cl-effect-9 a#c_4::before,
.cl-effect-9 a#c_4::after {
   background: #F1D809;
}

.cl-effect-9 a#c_5::before,
.cl-effect-9 a#c_5::after {
   background: #2AA92A;
}




.cl-effect-9 a::after {
	top: 100%;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect-9 a span:first-child {
	z-index: 2;
	display: block;
	font-weight: bold;
	margin-left: 0;
}

.cl-effect-9 a span:last-child {
	z-index: 1;
	display: block;
	padding: 2px 0 0 0;
	color: rgba(0,0,0,0.4);
	text-shadow: none;
	text-transform: none;
	font-size: 0.55em;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}
.cl-effect-9 a#c_1 span:last-child {
	color: #2793D7;
}
.cl-effect-9 a#c_2 span:last-child {
	color: #AA5DC1;
}
.cl-effect-9 a#c_3 span:last-child {
	color: #F1525A;
}
.cl-effect-9 a#c_4 span:last-child {
	color: #F1D809;
}
.cl-effect-9 a#c_5 span:last-child {
	color: #2AA92A;
}


.chara_list {
   width: 800px;
}








.cl-effect-9 a:hover::before,
.cl-effect-9 a:focus::before {
	height: 6px;
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:hover::after,
.cl-effect-9 a:focus::before,
.cl-effect-9 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.cl-effect-9 a:hover span:last-child,
.cl-effect-9 a:focus span:last-child {
	opacity: 1;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}



.btn_chara {
   display: inline-block;
   width: 145px;
   height: 145px;
   margin: 8px;
}

#cboxPrevious,
#cboxNext {
   display: block !important;
   width: 35px;
   height: 65px;
   z-index: 1000;
}
#cboxPrevious:hover,
#cboxNext:hover {
   background-position: top center;
}

#cboxPrevious {
   top:300px;
   left: -40px;
   background: url("../img/arrow_prev.png") no-repeat;
}

#cboxNext {
   top:300px;
   right: -40px;
   background: url("../img/arrow_next.png") no-repeat;
}
#cboxLoadedContent,#cboxWrapper,#colorbox {
   overflow: visible !important;
}
.chara_list h2 {
   margin-bottom: 0;
}

.chara_list figure {
   display:block;
   float: left;
   width: 145px;
   height: 145px;
   margin-right: 15px;
   margin-bottom: 15px;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}


.chara_list .img_chara:hover img {
   opacity:1;
   filter: alpha(opacity=100);
   -ms-filter: "alpha( opacity=100 )";
   background: none;
   display: block;
   width: 145px;
   height: 145px;
   margin: 0;
   padding: 0;
}
.chara_list figure .img_chara {
   width: 145px;
   height: 145px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	height: 100%;
	-webkit-transition: .4s;
	transition: .4s;
	opacity: 0;
	color: #ffffff;
	margin: 0;
	line-height: 0;
}

.chara_list figure .chara_white {
	background: rgba(255,255,255,.8);
	color: #000000;
}

.chara_blue{
	background: rgba(6,119,178,.6);

}
.chara_black{
	background: rgba(0,0,0,.6);
} 
.chara_red {
	background: rgba(241,29,54,.6);
} 
.chara_yellow {
	background: rgba(229,194,2,.8);
} 
.chara_list figure .chara_green {
	background: rgba(41,157,112,.8);
} 




.chara_list figure #chara-1 h3,
.chara_list figure #chara-2 h3,
.chara_list figure #chara-11 h3,
.chara_list figure #chara-5 h3,
.chara_list figure #chara-10 h3,
.chara_list figure #chara-14 h3,
.chara_list figure #chara-15 h3 {
   padding-top: 45px;

}


.chara_list figure .img_chara h3 {
   text-indent: 0;
   font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", ".HiraKakuInterface-W1";
   font-size: 20px;
   padding-top: 55px;
   line-height: 1.2em;
   margin-bottom: 10px;
}
.chara_list figure .img_chara p {
   font-size: 8px;
   font-weight: bold;
}

.chara_list figure .thumb {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition:all .3s ease-in-out;
   transition:all .3s ease-in-out;
   width: 145px;
   height: 145px;
   display: block;
}

figure:hover .thumb {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    transition:all .3s ease-in-out;
}


.chara_list figure:hover .img_chara{
	opacity: 1;
}









.link_4koma {
   font-size: 0.9em;
}