@charset "UTF-8";
/*
京都アニメーション
Copyright (C) Kyoto Animaion Co.,Ltd. All Rights Reserved.
*/

/*
font-size list (base: 12px)
 67% =  8px
 75% =  9px
 83% = 10px
 92% = 11px        175% = 21px
100% = 12px        184% = 22px
108% = 13px        192% = 23px
117% = 14px        200% = 24px
125% = 15px        209% = 25px
133% = 16px        217% = 26px
142% = 17px
150% = 18px
159% = 19px
167% = 20px
*/

.border2 {
	padding-top: 20px;
}
#contentWrap > header {
	text-align: center;
}
.content {
	position: relative;
}
.charaNav {
	position: absolute;
	top: 25px;
	left: 75px;
	z-index: 5;
}
.charaNavList {
}
.charaNavList li {
	display: inline-block;
	margin: 0 2px;
	cursor: pointer;
}
.charaNavList li a {
	display: block;
	width: 100px;
	height: 100px;
	background: url(/books/violet/img/character/nav_chara.png) no-repeat;
	text-indent: -999em;
	opacity: 1;
	-webkit-transition: .3s ease-out;transition: .3s ease-out;
}
.charaNavList li a:hover {
	opacity: .5;
}
.charaNavList .cNavi01 a {
	background-position: 0 0;
}
.charaNavList .cNavi02 a {
	background-position: -100px 0;
}
.charaNavList .cNavi03 a {
	background-position: -200px 0;
}
.charaNavList .cNavi04 a {
	background-position: -300px 0;
}
.charaNavList .cNavi05 a {
	background-position: -400px 0;
}
.charaNavList .cNavi06 a {
	background-position: -500px 0;
}
.charaData {
	text-align: center;
}
.chara_none {
	display :none;
}
#Violet .block_Violet {display :block;}
#Hodgins .block_Hodgins {display :block;}
#Gilbert .block_Gilbert {display :block;}
#Benedict .block_Benedict {display :block;}
#Cattleya .block_Cattleya {display :block;}
#Lux .block_Lux {display :block;}

	.charaBox {
		z-index: 3;
	}



/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Media Screen     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          SP          */
@media screen and (max-width:768px) {
/*  
font-size設定
PC      SP
1.0rem->2.2vw
1.4rem->2.6vw
+1.2
  */
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          Site Contents          */
	.charaNav {
		position: initial;
	}
	.charaNavList li {
		width: 80px;
		margin: 5px 2px;
	}
	.charaNavList li a {
		
	}
	.charaNavList {
		width: 100%;
		margin: auto;
		max-width: 321px;
		text-align: center;
	}
	.nav_btn img {
		width: 100%;
	}
	.chara_none img {
		width: 100%;
		max-width: 500px;
		margin: auto;
	}
	.charaBox {
		padding: 10px 0;
	}
	
}

/*          PC          */
@media screen and (min-width:769px) {
/*          Site Contents          */
	.nav_btn {
		transition: .3s ease-out;
	}
	.nav_btn:hover {
		opacity: .5;
	}
	.charaBox {
		height: 865px;
	}
	.charaNavList li img {
		width: 100px;
	}
	#mainWrap {
		background-image: url(/books/violet/img/character/bg_CharaBottom.jpg);
		background-position: left bottom;
		background-repeat: no-repeat;
	}

}