@charset "utf-8";

/*-------------------------------------------------------------
			commonの上書き
-------------------------------------------------------------*/
.chara-nav-wrap{
	width:1000px;
	margin:0 auto;
}
.chara-nav-wrap:after{
     content:" ";
     display:block;
     clear:both;
}
.header-section-ttl {
	float:left;
	width:34%;
	text-align:left;
	padding-left:50px;
	box-sizing:border-box;
}

footer{
	margin-top: 0px;
}

/*-------------------------------------------------------------
			character-nav
-------------------------------------------------------------*/
.character-nav{
	float:left;
	position:relative;
	width:65%;
	margin:24px auto 0px;
	/*top:-80px;*/
	/*text-align:center;*/
}
.character-nav:after{
     content:" ";
     display:block;
     clear:both;
}
.family-nav h3{
	float:left;
	margin-right:12px;
}
.character-nav-list{
	float:left;
	padding-left:0px;
	font-size:0;
}
.character-nav-list li{
	display:inline-block;
	margin-right:14px;
	font-size:.6875rem;
	text-align:center;
	width:76px;
	height:79px;
}
.character-nav-list li a{
	position:relative;
	transition:0.2s;
}
.character-nav-list li a:not(.nav-active){
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.character-nav-list li a:hover{
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}
.character-nav-list li a:active{
	transform:translateY(4px);
}
.nav-image{
	display:block;
	width:84px;
	height:100px;
	margin-bottom:5px;
	
	background-image:url(../img/character/chara_nav@2x.png);
	background-size:420px;
	
	overflow: hidden;
  	text-indent: 120%;
  	white-space: nowrap;
}
.nav-image-Sakuragi{
	background-position:0px;
}
.nav-image-Anarami{
	background-position:-84px;
}
.nav-image-Niizuma{
	background-position:-168px;
}
.nav-image-Yohakari{
	background-position:-252px;
}
.nav-image-Sub{
	background-position:-336px;
}

/*-------------------------------------------------------------
			family nav
-------------------------------------------------------------*/

.family-nav{
	position:relative;
	width:920px;
	margin:0px auto;
	padding-top:0px;
	top:0px;
	z-index:3;
}
.family-nav h3{
	margin-bottom:10px;
}
.family-nav-list{
	font-size:0;
	padding-left:0px;
}
.family-nav-list li{
	display:inline-block;
	margin-right:8px;
	font-size:.6875rem;
	text-align:center;
	/*box-shadow:#555555 2px 2px 2px 0px;*/
}
.family-nav-list li a{
	position:relative;
	transition:0.2s;
}
.family-nav-list li a:not(.Fnav-active){
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.family-nav-list li a:hover{
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}
.family-nav-list li a:active{
	transform:translateY(3px);
}
.Fnav-image{
	display:block;
	width:72px;
	height:86px;
	margin-bottom:5px;
	
	background-image:url(../img/character/family-nav@2x.png);
	background-size:1080px;
	
	overflow: hidden;
  	text-indent: 120%;
  	white-space: nowrap;
}
/*-------------------------------------------------------------
			character-setting
-------------------------------------------------------------*/

/*javascript用*/
#contents{
	min-height: 1190px;
}

.character-box{
	width:100%;
	min-width:1040px;
	
	height: 1020px;
	position:relative;
	padding-top: 110px;
	overflow:hidden;
	box-sizing:border-box;
}
.character-bg{
	position: absolute;
	width:100%;
	height:520px;
	text-align:center;
	top:215px;
	z-index:-1;
	background-color:#FFF;
	border-top:5px solid #FFF;
	border-bottom:5px solid #FFF;
	background-color:#FFF;
	
	/*background-image:url(../img/character/chara-bg@1x.jpg);*/
	background-repeat:no-repeat;
	background-position:center center;
	box-sizing:border-box;
}
.character-bg img{
	margin-top:140px;/*gif loderイメージ*/
}
/**====**/

.character-Area{
	width:920px;
	margin:0 auto;
	padding-top:20px;
	position:relative;
}
#chara-name{
	position:relative;
	left:0px;
	width:400px;
	margin-top:55px;
	opacity:0;
}
#chara_image{
	position:absolute;
	/*top:-130px;
	right:25px;/*40px*/
	opacity:0;
}
#chara_text{
	position:relative;
	left:0px;
	margin-top:30px;
	opacity:0;
}
#chara_catch{
	position:absolute;
	/*top:50px;
	right:10px;*/
	opacity:0;
}
#chara-point{
	position:absolute;
	/*top:520px;
	left:315px;*/
}

/*SAMPLE VOICW*/
#chara_voice{
	margin-top:55px;
	opacity:1;
}
#chara_voice h4{
	position:relative;
	height:30px;
	margin-bottom:5px;
}
.soundjs{
	padding-left:0;
	font-size:0px;
}
.soundjs li{
	display:inline-block;
	list-style:none;
	width:50px;
	height:50px;
	margin-right:10px;
	opacity:1;/*読み込み完了したら１になる*/
	/*background-color:#FFF;*/
	cursor:pointer;
}
.voice-btn{
	display:block;
	width:50px;
	height:50px;
	border-radius:2px;
	/*border-radius:25px;*:/
	border-radius:2px;
	/* box-shadow */
	background-color:#FFF;
	box-shadow: 1px 2px 2px #808080;
	transition:all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);

}
.voice-btn:hover{
	opacity:0.75;
}
.voice-btn:active{
	transform:translateY(4px);	
}
.audioStop{
	background-image:url(../img/voicebtn@2x.png);
	background-size:100px;
	background-position:0 0;
}
.audioActive{
	background-image:url(../img/voicebtn@2x.png);
	background-size:100px;
	background-position:-50px 0;
}
.sv-new{
	display:inline-block;
	margin-left:5px;
}
/*===next prec btn===*/
.nextprev-btn{
	width:50px;
	position:absolute;
}
.prev-nav{
	top:250px;
	left:-110px;
}
.next-nav{
	top:250px;
	right:-110px;
}
.nextprev-btn a{
	opacity:0.6;
	transition:0.2s;
}
.nextprev-btn a:hover{
	opacity:1;
}
/*===sp btn===*/

.Christmas-voicebtn{
	cursor:pointer;
	position:absolute;
	top:300px;
	left:402px;
	display:block;
	opacity:0;

	width:172px;
	height:144px;
	background-image:url(../img/character/Christmas-btn@1x.png);
	background-repeat:no-repeat;
	transition: 0.2s;
}
.Christmas-voicebtn:hover{
	opacity:0.85;
}
.Christmas-voicebtn:active{
	transform:translateY(3px);
}
.MaudioActive{
	background-image:url(../img/character/Christmas-btn-play@1x.png);
}