﻿body {
    background-color:#ffffff;
}

body {
    min-width: 1024px;
}
.content_width {
    width: 1024px;
    margin: 0 auto;
}


/* top header  -----------------------------------------------*/
#bg_top_header_00{
    background-image: url('img/bg_top_header_00.jpg');
    background-repeat: repeat-x;
    background-position: center top;
}
#bg_top_header_10{
    background-image: url('img/bg_top_header_10.jpg');
    background-repeat:no-repeat;
    background-position: center top;
}
#top_header{
    height:600px;
}



/* header -----------------------------------------------*/
#bg_header_00{
  /*  background-image: url('img/bg_header_00.jpg');*/
    background-repeat: repeat-x;
    background-position: center top;
    background-color: #000000;
}
#bg_header_10{
    background-image: url("img/bg_header_10.jpg");
    background-repeat: no-repeat;
    background-position: center top;
}
#header{
    height: 100px;
}

/* menu -----------------------------------------------*/
#bg_menu_00{
    background-color: #282FA2;
/*    background-repeat: no-repeat;
    background-position: center top;
    background-color: #000000;*/
}
#bg_menu_10{
/*    background-repeat: no-repeat;
    background-position: center top;*/
}
#menu{
    /* [height]+[padding-top] = bg_menuの[background-image]の高さに設定する*/
    height: 50px;
    padding-top: 0px;
}
#menu table{
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    border-collapse: separate;
    border-spacing: 0px 0px;

}
#menu a{
    display:inline-block;
}

		.text_menu a{
    display: inline-block;
    width: 140px;
    height: 50px;
    padding: 7px;
    box-sizing: border-box;
    background-color: #282FA2;
    text-decoration: none;
    font-size: 18px;
    line-height: 120%;
    font-weight: bold;
    /*	border: solid 1px #ff0000;*/
    text-align: center;
    color: #FFFFFF;
		}
		.text_menu a:hover{
    color: #FFE500;
		}
		
		.text_menu a .alpha{
						font-size: 14px;
			line-height: 100%;	
			text-align: center;			
		}


/* footer -----------------------------------------------*/
#bg_footer_00 {
    background-repeat: repeat;
/*    background-image: url(img/footer.jpg);*/
		background-color: #000000;

    }

#bg_footer_10 {
	background-image: url('img/bg_footer_10.png');
    background-repeat:no-repeat;
    background-position: right;
}
#footer{
   /* background-image: url(img/footer.png);*/
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 40px;
    padding-bottom: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

		#footer_left{
	color: #FFFFFF;
    padding: 10px;
    font-weight: bold;
    font-size: 14px;
    line-height: 150%;
    text-align: left;
		}
		#footer_left strong{
			    font-size: 18px;
		}
		#footer_left .staff{
			    font-size: 16px;
    line-height: 150%;			
		}
				#footer_left .sell_type{
					margin-top: 20px;
					    font-weight:normal;

		}

		#footer_right{
	color: #FFFFFF;
    padding: 10px;
    font-weight: normal;
    font-size: 14px;
    line-height: 150%;
    text-align: left;
		}




		
		








/* content default -----------------------------------------------*/
#bg_content_00{
    overflow: hidden;
  /*  background-attachment: fixed;*/
    background-image: url(img/bg02.jpg);
    background-repeat: repeat;
    background-position: center top;
    background-color: #000000;
}
        
#bg_content_fix{
/*    background-image: url('img/bg_content_fix.png');*/
    background-repeat: repeat-y;
    background-position: center top;
    padding-top:1px;
    height:879px;
}

#bg_content_fix #content{

}

#bg_content_loop {
    background-image: url('img/bg_content_loop.png');
    background-repeat: repeat-y;
    background-position: center top;
    position: relative;
    padding-top:1px;    
	min-height:1000px;
}

#bg_content_loop_top{
	
}

#bg_content_loop_bottom{
    background-image:none;
    height: 0px;


}



#bg_content_loop #content{
    position: relative;
    min-height: 750px;
    padding-bottom: 0px;
}

/* h1 h2 h3 -----------------------------------------------*/



		
		h1{
    text-align: center;
    font-family: "Playfair Display SC" ,メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    margin: 0;
    height: 45px;
    background-image: url(img/bg.jpg);
    background-position: center -722px;
    font-size: 48px;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 50px;
    color: #ffffff;
    line-height: 100%;
    text-shadow: 0px 0px 5px hsla(0,0%,0%,1.00);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
		}
		h1 .alpha{
						font-size: 20px;
						line-height: 100%;
			text-align: center;
			width: 800px;
			margin: 20px auto;
		}



/* ギャラリー関連　-----------------------------------------------*/
h2.gallery{
	text-align: center;
	margin: 10px auto;
}

.next_cg{
margin: 0px auto;
}

.next_cg a{
    display: inline-block;
    width: 80px;
    height: 600px;
    background-color: #3F4BAF;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 12px;
    border: 2px solid hsla(253,66%,89%,1.00);
}
.next_cg a.prev_button{
    background-image: url(img/gallery_prev.png);
	
}
.next_cg a.next_button{
	    background-image: url(img/gallery_next.png);
}
.next_cg a:hover{
			background-color: #C2CB9A;
}
		.subcg_list{
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 21px;
    border-collapse: separate;
    border-spacing: 10px 1px;
		}
		.subcg_list div{
			background-color: #3F4BAF;

		}
		.subcg_list div:hover{
			background-color: #C2CB9A;
		}
				
		.subcg_list div img{
						opacity: 0.5;
		}
		.subcg_list div.this_page img{
			opacity: 1.0;
		}
		.cg_story {
    margin: 10px auto;
    width: 1000px;
    padding: 20px 40px;
    /* [disabled]background-color: hsla(235,47%,38%,0.80); */
    color: #ffffff;
    font-size: 18px;
    line-height: 175%;
    font-weight: bold;
    border-radius: 20px;

    background-image: url(img/cg_story_bg.png);
		}
		.cg_story.sakura{
			    text-shadow: 0px 4px 5px #BD094C,0px 0px 3px #BD094C,0px 0px 3px #BD094C,0px 0px 1px #BD094C;
		}
		.cg_story.yuzuha{
    text-shadow: 0px 4px 5px #086BBD,0px 0px 3px #086BBD,0px 0px 3px #086BBD,0px 0px 1px #086BBD;
		}
		.cg_story.kyouka{
    text-shadow: 0px 4px 5px #048E14,0px 0px 3px #048E14,0px 0px 3px #048E14,0px 0px 1px #048E14;
		}
		.cg_story.touka{
    text-shadow: 0px 4px 5px #8F8A04,0px 0px 3px #8F8A04,0px 0px 3px #8F8A04,0px 0px 1px #8F8A04;
		}

/*キャラクター紹介ページ用共通・始まり -----------------------------------------------*/

#char_menu{
    margin: 20px auto;
    border-spacing: 0px 0px;
    border-collapse: separate;
}
#character{
    padding-top:0px;
    text-align:center;	
}


		.voice_list{
			/*background-color: #FF0004;*/
			padding-left: 20px;
			margin-top: 10px;
		}
		.voice_list .sample_text{
			    font-size: 24px;
		    line-height: 0%;
		    font-weight: bold;
			margin-right: 10px;
			color: aliceblue;
		}


.voice_list a{
    display: inline-block;
    font-size: 24px;
    line-height: 100%;
    font-weight: bold;
    text-align: center;
    padding: 14px;
    border: 2px solid #1E4E2C;
    background-color: #5CC07A;
    text-decoration: none;
    border-radius: 10px;
    color: #FFFFFF;
		}
	.voice_list a:hover{
    border: 2px solid #4E1E4D;
    background-color: #E97BF4;
    color: #FFFABB;
	}


		#char_desc{
    margin-top: 18px;
	width: 1400px;
    height: 618px;
			 position: relative;
		}
		#char_text{
    position: absolute;
    width: 420px;
    background-color: hsla(0,0%,0%,0.59);
    right: 32px;
    bottom: 32px;
    padding: 8px 16px;
    border-radius: 16px;
    min-height: 179px;
		}
		
		#char_text p {
    color: #F1E0E1;
    font-size: 14px;
    line-height: 159%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-shadow: 0px 0px 5px #2B2C2A,0px 0px 3px #2C2D2B,0px 0px 3px #2C2D2B,0px 0px 1px #2C2D2B;
    padding-bottom: 0px;
    margin-top: 8px;
}
		
		#char_ev{
    position: absolute;
    left: 20px;
    bottom: 15px;
    border-collapse: separate;
    border-spacing: 6px 6px;
		}	

.char_hensin_btn {
    position: absolute;
    left: 453px;
    top: 592px;
    width: 167px;
}
.change_btn {
    position: absolute;
    width: 167px;
    height: 171px;
    top: 592px;
}

.change_btn:hover {
    background-color: rgba(255, 255, 0, 0.5);
    box-shadow: 0px 0px 22px 22px rgba(255, 255, 0, 0.5);
    border-radius: 20px;
}
.change_btn_right {
    left: 453px;
}
.change_btn_left {
    left: 453px;
    opacity: 0.0;
}

#character{
    padding-top: 0px;
    text-align: center;
    width: 980px;
    height: 735px;
			position: relative;
			margin: 0 auto;
		
}
#character div{
    font-family: "ＭＳ Ｐ明朝" , "MS PMincho" , Meiryo, Osaka,  sans-serif;
    /*    background-color: hsla(356,29%,12%,0.65);*/
    background-color: hsla(30,47%,63%,0.83);
    width: 275px;
    height: 500px;
    top: 30px;
    right: 83px;
    position: absolute;
    box-shadow: 0px 0px 2px 2px hsla(0,0%,0%,0.1),0px 0px 5px 5px hsla(0,0%,0%,0.1);
    writing-mode: vertical-rl;
    font-size: 28px;
    color: hsla(37,100%,11%,1.00);
    line-height: 200%;
    padding: 25px;
    box-sizing: border-box;
    font-weight: bold;
    text-shadow: 0px 0px 2px hsla(0,88%,90%,0.55);
    text-shadow: 0px 0px 4px hsla(0,88%,90%,0.55);
}
#character.char01{
    background-image: url(img/char01.jpg);
}
#character.char02{
    background-image: url(img/char02.jpg);
}
#character.char03{
    background-image: url(img/char03.jpg);
}
#character.char04{
    background-image: url(img/char04.jpg);
}
#character.char05{
    background-image: url(img/char05.jpg);
}




.bg_char {
    height: 1214px;
    background-repeat: no-repeat;
    background-position: center 151px;
    position: absolute;
    width: 100%;
}
.bg_char01 {
    background-image: url('img/char_bg01.png');
}
.bg_char02 {
    background-image: url('img/char_bg02.png');
    background-repeat: repeat-x;
}

.char_tachi {
    position: absolute;
    left: 623px;
    width: 441px;
    top: 29px;
}
.char_spec {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 980px;
}

.character_in {
    position: relative;
    width: 1400px;
    height: 1114px;
    margin: 0px auto;
}
/*キャラクター紹介ページ用共通・終わり -----------------------------------------------*/

.float{
	position: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}
.float a{
    display: inline-block;
}

.float a:hover {
    opacity: 0.9;
}

#float_twitter{
	    top: 0px;
    right: 100px;
}
#float_twitter a{
	    width: 69px;
    height: 114px;
	    background-image: url(img/float_twitter.png);
}

#float_tinker{
	    top: 0px;
    right: 30px;
	}
#float_tinker a{
	    width: 69px;
    height: 114px;
	    background-image: url(img/float_tinker.png);
}


#float_shop{
	    bottom: 200px;
    left: 0px;
	}
#float_shop a{	
	    width: 129px;
    height: 511px;
	    background-image: url(img/float_shop.png);
}



#float_index{
	    bottom: 500px;
    right: 0px;
	}
#float_index a{		
	    width: 87px;
    height: 76px;
	    background-image: url(img/float_index.png);
}


#float_campaign{
	    bottom: 400px;
    right: 0px;
	}
#float_campaign a{		
	    width: 87px;
    height: 76px;
	    background-image: url(img/float_campaign.png);
}

#float_movie{
	    bottom: 300px;
    right: 0px;
	}
#float_movie a{		
	    width: 87px;
    height: 76px;
	    background-image: url(img/float_movie.png);
}





/*●back-top begin-----------------------------------------*/
#back-top {
    position: fixed;
    bottom: 100px;
    right: 16px;
 /*   background-color: hsla(307,18%,49%,0.85);*/
    border-radius: 10px;
    background-image: url(img/upa.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#back-top a{
    display: block;	

    width: 180px;
    height: 190px;
}

#back-top a:hover {
   /* background-color: #FF326D;*/
	opacity: 0.9;
}
/*●back-top end-----------------------------------------*/
