@charset "utf-8";
.alistel_ch ul,.celestia_ch ul,.historia_ch ul,.granorg_ch ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
}
.alistel_ch li,.celestia_ch li,.historia_ch li,.granorg_ch li {
	float: left;
	width: 80px;
	height: 80px;
	margin: 0;
	padding: 0;
	text-align: center;
}
.alistel_ch li a,.celestia_ch li a,.historia_ch li a,.granorg_ch li a {
	display: block;
	padding: 0;
	height: 100%;
	text-decoration: none;
}
.chara-container, .titlebar {
	text-align: center;
	margin: 0 auto
}
body#character .game-logo {
	left: 50%;
	transform: translate(-50%, -15%)
}
.hero .chara-logo {
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 65%;
	height: auto;
}
.chara-container {
	width: 100%;
	font-family: mrs-eaves-xl-serif, serif;
	background-color: #faebd7;
	padding: 0 0 .5%;
	background-image: url(../img/characters/bg_01.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover
}
.charaButtons, .gameFlowImageGroup img {
	margin: 1.5%;
	display: inline-block
}
.charaButtons a {
	display:inline-block;
	background:url(../img/characters/btn_alistel_on.png) left top no-repeat;
	background-size:100% auto
}
.charaButtons a#chara-granorg{background-image:url(../img/characters/btn_granorg_on.png)}
.charaButtons a#chara-celestia{background-image:url(../img/characters/btn_celestia_on_2.png)}
.charaButtons a#chara-historia{background-image:url(../img/characters/btn_historia_on.png)}
.clearfloats {
	clear: left;
	height: 20px
}
.cselect, .cselect2, .cselect3 {
	display: none;
	opacity: 0
}
#div1, #fiv1, #siv1 {
	display: block
}
.titlebar {
	width: 50%;
	padding: 40px 0
}
.titlebar img {
	width: 100%;
	height: auto
}
.alistel_ch {
	width: 65%;
	text-align: center;
	margin: 0 auto;
}
.alistel_ch .ch1,.granorg_ch .ch1 {
	background-image: url(../img/characters/ch_stocke_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.granorg_ch .ch1{
	background-image:url(../img/characters/ch_eruca_th.png);
	background-position:0 0;
	background-size:100% auto}

.alistel_ch .ch1over,.granorg_ch .ch1over {
	background-image: url(../img/characters/ch_stocke_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.granorg_ch .ch1over{
	background-image:url(../img/characters/ch_eruca_th.png);
	background-position:0 -80px;
	background-size:100% auto;
}
.alistel_ch .ch2 {
	background-image: url(../img/characters/ch_raynie_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.alistel_ch .ch2over {
	background-image: url(../img/characters/ch_raynie_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.alistel_ch .ch3 {
	background-image: url(../img/characters/ch_marco_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.alistel_ch .ch3over {
	background-image: url(../img/characters/ch_marco_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.alistel_ch .ch4 {
	background-image: url(../img/characters/ch_rosch_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.alistel_ch .ch4over {
	background-image: url(../img/characters/ch_rosch_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.a_charainfo {
	margin: 30px auto;
	width: 900px;
	height: 800px;
}
.a_charainfo .ach1 {
	background-image: url(../img/characters/stocke_p.png);
	background-position: top;
	min-height: 1000px;
	background-size: 100%;
	background-repeat: no-repeat;
}
.a_charainfo .info-text1, .info-text3 {
	width: 60%;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
	left: 475px;
}
.a_charainfo .ach2 {
	background-image: url(../img/characters/raynie_p.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top;
	min-height: 1000px;
}
.a_charainfo .ach5 .info-text1, .a_charainfo .info-text2, .info-text4 {
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.a_charainfo .ach3, .a_charainfo .ach4, .a_charainfo .ach5, .a_charainfo .ach6, .a_charainfo .ach7 {
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top;
}
.a_charainfo .info-text2, .info-text4 {
	width: 50%;
	left: 70px;
}
.a_charainfo .ach3, .a_charainfo .ach4, .a_charainfo .ach5 {
	min-height: 1000px;
}
.a_charainfo .ach3 {
	background-image: url(../img/characters/marco_p.png);
}
.a_charainfo .ach4 {
	background-image: url(../img/characters/rosch_p.png);
}
.a_charainfo .ach5 {
	background-image: url(../img/characters/aht_p.png?v=1.1);
}
.a_charainfo .ach5 .info-text1 {
	width: 60%;
	left: 375px;
}
.a_charainfo .ach6 {
	min-height: 1000px;
	background-image: url(../img/characters/gafka_p.png);
}
.a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3 {
	width: 65%;
	left: 300px;
}
.a_charainfo .ach7 {
	background-image: url(../img/characters/nemesia_p.png);
	min-height: 800px;
}
.a_charainfo .ach7 .info-text1 {
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.a_charainfo .ach8, .a_charainfo .ach9 {
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top;
	min-height: 1000px;
}
.a_charainfo .ach8 {
	background-image: url(../img/characters/lippit_p.png);
}
.a_charainfo .ach9 {
	background-image: url(../img/characters/teo_p.png);
}
.a_charainfo .ach9 .info-text3 {
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.a_charainfo .ach5 .info-text1, .a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3, .a_charainfo .info-text1, .a_charainfo .info-text2, .g_charainfo, .info-text3, .info-text4 {
	padding: 25px;
	box-shadow: 10px 15px 10px 5px rgba(0,0,0,.25), inset 0 0 20px 5px rgba(0,0,0,.75);
	color: #FFF;
	border: 2px solid #FFF;
	font-size: 20px;
	text-shadow:2px -2px 4px #000, -2px 2px 4px #000,2px 2px 4px #000,-2px -2px 4px #000;
	position: relative;
	top: 275px;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.g_chara {
	margin: 30px auto 50px;
	width: 900px;
	height: 800px;
	background-image: url(../img/characters/eruca_p.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top
}
.g_charainfo {
	width: 60%;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
	left: 325px
}
.celestia_ch .ch1 {
	background-image: url(../img/characters/ch_aht_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.celestia_ch .ch5over {
	background-image: url(../img/characters/ch_aht_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.celestia_ch .ch2 {
	background-image: url(../img/characters/ch_gafka_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.celestia_ch .ch6over {
	background-image: url(../img/characters/ch_gafka_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.a_charainfo .ach5 .info-text1, .a_charainfo .info-text2, .info-text4 {
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.a_charainfo .ach5 {
	background-image: url(../img/characters/aht_p.png?v=1.1)
}
.a_charainfo .ach5 .info-text1 {
	width: 60%;
	left: 375px
}
.a_charainfo .ach6 {
	min-height: 1000px;
	background-image: url(../img/characters/gafka_p.png)
}
.a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3 {
	width: 65%;
	left: 40%
}
.historia_ch .ch1 {
	background-image: url(../img/characters/ch_nemesia_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.historia_ch .ch7over {
	background-image: url(../img/characters/ch_nemesia_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.historia_ch .ch2, .historia_ch .ch2:hover {
	background-image: url(../img/characters/ch_lippit_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.historia_ch .ch8over {
	background-image: url(../img/characters/ch_lippit_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.historia_ch .ch3 {
	background-image: url(../img/characters/ch_teo_th.png);
	background-position: 0 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.historia_ch .ch9over {
	background-image: url(../img/characters/ch_teo_th.png);
	background-position: 0 -80px;
	opacity: 0;
	width: 80px;
	height: 80px;
	background-size: 100%;
}
.line {
	width: 70%;
	height: auto;
}
@media only screen and (max-width:1200px) {
	.titlebar {
		width: 70%;
	}
}
@media only screen and (max-width:1096px) {
.alistel_ch, .titlebar {
	text-align: center;
	margin: 0 auto
}
/*.hero .chara-logo {
	position: absolute;
	top: 40px;
	left: 18.75%;
	width: 65%;
	height: auto
}*/
.a_charainfo .ach5 .info-text1, .a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3, .a_charainfo .info-text1, .a_charainfo .info-text2, .g_charainfo, .info-text3, .info-text4 {
	box-shadow: 10px 15px 10px 5px rgba(0,0,0,.25), inset 0 0 20px 5px rgba(0,0,0,.75);
	color: #FFF;
	border: 2px solid #FFF;
	font-size: 15px;
	text-shadow:2px -2px 4px #000, -2px 2px 4px #000,2px 2px 4px #000,-2px -2px 4px #000;
	position: relative
}
.titlebar {
/*	width: 75%;*/
	padding: 40px 0
}
.alistel_ch {
	width: 95%
}
.a_charainfo {
	margin: 30px auto;
	width: 65%;
	height: 550px
}
.a_charainfo .info-text1, .a_charainfo .info-text2, .info-text3, .info-text4 {
	width: 63%px;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
	top: 180px
}
.a_charainfo .ach1, .ach2, .ach3, .ach4 {
	min-height: 550px
}
.a_charainfo .info-text1, .info-text3 {
/*	left: 325px*/
	left: 55%;
}
.a_charainfo .info-text2, .info-text4 {
	padding: 25px;
/*	left: 50px*/
	left: -5%;
}
.a_charainfo .ach7 .info-text1, .g_charainfo {
	padding: 25px;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.g_charainfo {
	width: 60%;
	top: 275px;
	left: 40%;
}
.a_charainfo .ach7 .info-text1 {
	width: 65%;
	top: 180px;
	left: 250px
}
.a_charainfo .ach5 .info-text1 {
	width: 60%;
	padding: 25px;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
	top: 180px;
	left: 275px
}
.a_charainfo .ach9 .info-text3 {
	width: 65%;
	left: 40%;
	padding: 25px;
	top: 275px
}
}
@media only screen and (max-width:950px) {
	.g_chara {
		width: 90%;
	}
}
@media only screen and (max-width:850px) {
	.titlebar {
		width: 90%;
	}
}
@media only screen and (max-width:768px) {
.alistel_ch, .titlebar {
	text-align: center;
	margin: 0 auto
}
/*
.hero .chara-logo {
	position: absolute;
	top: 40px;
	left: 18.75%;
	width: 65%;
	height: auto
}
*/
.a_charainfo .ach5 .info-text1, .a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3, .a_charainfo .info-text1, .a_charainfo .info-text2, .g_charainfo, .info-text3, .info-text4 {
	box-shadow: 10px 15px 10px 5px rgba(0,0,0,.25), inset 0 0 20px 5px rgba(0,0,0,.75);
	color: #FFF;
	border: 2px solid #FFF;
	font-size: 12px;
	text-shadow:2px -2px 4px #000, -2px 2px 4px #000,2px 2px 4px #000,-2px -2px 4px #000;
	position: relative;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.titlebar {
/*	width: 75%;*/
	padding: 40px 0
}
.alistel_ch {
	width: 95%
}
	.g_chara{
		width:90%;
		height:580px
	}
.a_charainfo {
	margin: 30px auto;
	width: 65%;
	height: 550px
}
.a_charainfo .info-text1, .a_charainfo .info-text2, .info-text3, .info-text4 {
	width: 63%;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
	top: 140px
}
.a_charainfo .ach1, .ach2, .ach3, .ach4 {
	min-height: 550px
}
.a_charainfo .info-text1, .info-text3 {
/*	left: 200px*/
	left: 60%;
}
.a_charainfo .info-text2, .info-text4 {
	padding: 25px;
	left: -15%;
}
.a_charainfo .ach5 .info-text1 {
	width: 60%;
	padding: 25px;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
	top: 150px;
	left: 215px
}
.a_charainfo .ach7 .info-text1, .g_charainfo {
	padding: 25px;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.g_charainfo {
	width: 50%;
	top: 35%;
	left: 35%
}
.a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3 {
	width: 65%;
	top: 150px;
	left: 175px
}
.a_charainfo .ach9 .info-text3 {
	padding: 25px
}
}

@media only screen and (max-width:640px) {
.alistel_ch, .titlebar {
	text-align: center;
	margin: 0 auto
}
/*
.hero .chara-logo {
	position: absolute;
	top: 40px;
	left: 18.75%;
	width: 65%;
	height: auto
}
*/
.a_charainfo .ach5 .info-text1, .a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3, .a_charainfo .info-text1, .a_charainfo .info-text2, .g_charainfo, .info-text3, .info-text4 {
	box-shadow: 10px 15px 10px 5px rgba(0,0,0,.25), inset 0 0 20px 5px rgba(0,0,0,.75);
	color: #FFF;
	border: 2px solid #FFF;
	font-size: 12px;
	text-shadow:2px -2px 4px #000, -2px 2px 4px #000,2px 2px 4px #000,-2px -2px 4px #000;
	position: relative
}
.titlebar {
/*	width: 75%;*/
	padding: 40px 0
}
.alistel_ch {
	width: 95%
}
.a_charainfo {
	margin: 30px auto;
	width: 65%;
	height: 550px
}
.a_charainfo .info-text1, .a_charainfo .info-text2, .info-text3, .info-text4 {
/*	width: 63%;*/
	width: 120%;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
/*	top: 125px*/
	top: 300px;
}
.a_charainfo .ach1, .ach2, .ach3, .ach4 {
	min-height: 550px
}
.a_charainfo .info-text1, .info-text3 {
/*	left: 200px*/
	left: -10%;
}
.a_charainfo .info-text2, .info-text4 {
	padding: 25px;
	left: -10%;
}
.a_charainfo .ach5 .info-text1 {
	width: 120%;
	padding: 25px;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
	top: 308px;
	left: -10%;
}
.a_charainfo .ach7 .info-text1, .g_charainfo {
	padding: 25px;
	background:url(../img/system/info_bg.png) left top repeat,url(../img/system/info_grunge_bg.png) left top repeat-y rgba(0,0,0,0.6);
	background-size:20% auto,100% auto;
}
.g_chara {
	margin: 30px auto 50px;
	width: 80%;
	height: 450px;
	background-image: url(../img/characters/eruca_p.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top
}
.g_charainfo {
	width: 100%;
	top: 420px;
	left: 0;
}
.a_charainfo .ach7 .info-text1 {
	width: 120%;
	top: 355px;
	left: -10%;
}
.a_charainfo .ach9 .info-text3 {
	width: 120%;
	padding: 25px;
	top: 310px;
	left: -10%;
}
}
@media screen and (max-width: 550px) {
	.g_charainfo {
		top: 350px;
	}
}
@media screen and (max-width: 500px) {
	.a_charainfo .info-text1, .info-text3, .a_charainfo .info-text2, .info-text4,
	.a_charainfo .ach5 .info-text1, .a_charainfo .ach7 .info-text1,
	.a_charainfo .ach9 .info-text3{
		left: 0;
	}
	.a_charainfo .info-text1, .a_charainfo .info-text2, .info-text3, .info-text4,
	.a_charainfo .ach5 .info-text1, .a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3{
		width: 100%;
	}
	.a_charainfo .info-text1, .a_charainfo .info-text2, .info-text3, .info-text4, .a_charainfo .ach7 .info-text1,
	.a_charainfo .ach9 .info-text3 {
		top: 240px;
	}
}
@media screen and (max-width: 400px) {
	.g_charainfo {
		top: 280px;
	}
}
@media screen and (max-width: 350px) {
	.a_charainfo .info-text1, .info-text3, .a_charainfo .ach5 .info-text1, .a_charainfo .info-text2, .a_charainfo .ach7 .info-text1,
	.a_charainfo .ach9 .info-text3{
		left: -10%;
	}
	.a_charainfo .info-text1, .a_charainfo .info-text2, .info-text3, .info-text4, 
	.a_charainfo .ach5 .info-text1, .a_charainfo .ach7 .info-text1, .a_charainfo .ach9 .info-text3{
		width: 120%;
	}
	.a_charainfo .info-text1, .a_charainfo .info-text2, .info-text3, .info-text4 {
		top: 180px;
	}
	.a_charainfo .ach5 .info-text1 {
		top: 208px;
	}
	.a_charainfo .ach7 .info-text1,.a_charainfo .ach9 .info-text3 {
		top: 180px;
	}
}