@charset "utf-8";

/*デフォルトはスマホ表示*/

.sp{display:block;}
.pc{display:none;}

/*li{
	float:left;
}*/
.autoCenter{
	width:auto;
	margin:0 auto;
}
.clear{
	clear:both;
}

img.common_img{
	max-width:100%;
	}

hr {
	border-top: 1px dotted #cc0a6f;
}
body{
	background-image:url(../img/body_bg.jpg);
	background-repeat:repeat-x;
	background-position:top center;
	background-color:#34141f;	
	/*color:#322523;*/
}
/*ナビゲーション*/
.ktHeader{
	width:100%;
	max-witdh:960px;
	margin:0 auto;
}



#nav{
	width:100%;
	background-image:url(../img/nav_bg.jpg);
	height:130px;
	
	border-bottom:2px solid #834e00;
	border-top:2px solid #834e00;
	
}


#nav ul{
	width:100%;
	max-width:960px;
	height:60px;
	text-align:center;
	margin:0 auto;	
}

#nav ul li{
	float:left;
	padding:0;
	cursor:pointer;
	width:33%;
	height:65px;
	border-bottom:2px solid #834e00;
}

#nav ul li a{
	display:block;
	width:100%;
	height:100%;
	text-indent: -9999px;
	background-size:100%;
}

#nav ul li.update {
	background-image:url(../img/update.gif);
	background-position:top center;
	background-repeat:no-repeat;
	
}

#nav ul li.top a{
	background-image:url(../img/nav_top_off.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.top a:hover{
	background-image:url(../img/nav_top_on.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.story a{
	background-image:url(../img/nav_story_off.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.story a:hover{
	background-image:url(../img/nav_story_on.png);
	background-position:center center;
	background-repeat:no-repeat;
}


#nav ul li.feature a{
	background-image:url(../img/nav_feature_off.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.feature a:hover{
	background-image:url(../img/nav_feature_on.png);
	background-position:center center;
	background-repeat:no-repeat;
}


#nav ul li.chara a{
	background-image:url(../img/nav_chara_off.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.chara a:hover{
	background-image:url(../img/nav_chara_on.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.gallery a{
	background-image:url(../img/nav_gallery_off.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.gallery a:hover{
	background-image:url(../img/nav_gallery_on.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.box a{
	background-image:url(../img/nav_box_off.png);
	background-position:center center;
	background-repeat:no-repeat;
}

#nav ul li.box a:hover{
	background-image:url(../img/nav_box_on.png);
	background-position:center center;
	background-repeat:no-repeat;
}


#chara_prof #chara_info .jp-play img, #chara_prof #chara_info .jp-pause img{
	width:auto;!important
	display:block;
	margin-right:10px;
}

#chara_prof #chara_info hr{
	margin:1em 0;
	border-bottom:none;
	border-right:none;	
}
.jp-controls span{
	line-height:42px;
	font-weight:bold;
	vertical-align:15px;
	margin-right:1em;
}
div.jp-jplaye,div.jp-audio{
	float:left;
	
	}

/*FOOTER*/
#footer{
	margin-top:20px;
	width:100%;
	background-color:#fff;
	border-top:2px solid #834e00;
	padding-bottom:80px;
}

#footer .sns{
	width:100%;
	text-align:center;
	padding-top:10px;
}


#footer .sns img{
	display:inline-block;
	
	margin:20px 10px;
}

#footer .sns img:nth-child(1){
	margin-left:0;
}

.link ul{
	width:98%;
	margin:0 auto;
	text-align:center;
	}

.link ul li{
	text-align:center;
	padding:3px;
	margin:3px;
	
	}


/*TOPページ*/

#visualWrapper{
	width:100%;
	background-color:#000;
}

#visualArea img.souki_sp{
	display:block;
	width: 96%;
	margin:0 auto;
	height:auto;
	}

#visualArea img.souki_pc{
	display:none;
	}



/*更新履歴*/	
#wrap_info{
	margin-bottom:10px;}
#info{
	height:2em;
	width:100%;
	margin:10px auto;/* 2px auto*/
	margin-bottom:0;/* 15*/
	color:#FFF6E4;
	background-color:#462032;
	z-index:9999;
	position:relative;
	border:1px solid #834e00;
}

#info #topic{
	width:95%;/*90%*/
	height:2em;
	margin:0 auto;
	float:left;
}

#info #topic #text{
	width:100%;/*820px*/
	overflow:hidden;
}

#info #topic #text span{
	white-space:nowrap;
}

#info #topic #text span a{
	color:#ebff9c;
	text-decoration:none;
	font-weight:bold;
}

#info #topic #text span a:hover{
	text-decoration:underline;
	font-weight:bold;
}

#info #bn-opener{
	display: block;
	width: 5%;
	height: 1em;
	vertical-align:top;
	color:#FFF6E4;
	text-align: center;
	font-size: 16px;
	line-height: 26px;
	float: left;
	cursor: pointer;
}

#info #topic-backnumber{
	width:100%;
	margin:0 auto;
	padding:0;
	display:none;
	border-left:1px solid #834e00;
	border-right:1px solid #834e00;
	border-bottom:1px solid #834e00;

}

#info #topic-backnumber table{
	font-size:13px;
	border-collapse:collapse;
	background-color:rgba(70,32,50,0.7);
	width:100%;	
}

#info #topic-backnumber *{
	vertical-align:top;
	padding:5px;
}

#info #topic-backnumber tr{
	border:1px #CCC dotted;
	border-width:1px 0 0 0;
	
}
#info #topic-backnumber tr:first-child{
	border-width:0;
}

#info #topic-backnumber a{
	color:#ebff9c;
	text-decoration:underline;
}

#info #topic-backnumber tr td:nth-child(1){
	width:30%;}	
	
#timeline{
	margin-top:20px;
	
	background-color:rgba(0,0,0,0.3);
	
}
	


/*更新履歴おわり*/	


#dramacdTop{
	width:100%;
	margin-bottom:1em;
	/*border-top:1px solid #fff;*/
	border-bottom:1px solid #fff;
		
	}

#dramacdTop ul{
	width:100%;
	margin:0.5em 0 0 0;
	}

#dramacdTop ul li{
	width:33%;
	margin:0;
	display:block;
	float:left;
	}

#dramacdTop ul li img{
	width:98%;
}

	
#bnn{
	margin:0 auto;
	width:100%;
	max-width:470px;
	position:relative;
	
}

#bnn a{
	position:relative;
	
}



#bnn img{
	width:100%;
	max-width:470px;
	display:block;
}


#bnn img:nth-child(1){
	margin:12px auto 0 auto;
}

#bnn img:nth-child(n+2){
	margin:6px auto;
}

#bnn img.update{
	z-index:999;
	width:auto;
	display:block;
	position:absolute;
}




#spec{
	margin:12px 0;
	width:96%;
	padding:2%;
	border:1px solid #000;
	background-color:#fff;
	color:#DDD;
	
	background-image:url(../img/spec_bg.png);
	background-position:right bottom;
	background-repeat:no-repeat;
	background-size:contain;
	background-color:rgba(0,0,0,0.5);
}

#spec strong{
	font-size:116%;
	display:block;
	margin-bottom:0.5em;
}

#spec ul li{
	float:none;
	width:100%;
}	

/*ストーリー*/

.img_quater, .img_quater,ul{ width:100%;}
.img_quater li{ width:50%; display:inline-block; margin:0; padding:0;}
.img_quater li img{ width:100%;margin:0; padding:0;}

.story_text{
	text-align:left;
	font-size:140%;
	line-height:160%;
	font-family : YuMincho, '游明朝', 'ヒラギノ明朝', 'HiraMinProN-W6';
	text-shadow:0 0 2px #BA225D;
	margin-bottom:2em;

	}
.story_text h3{
	font-family : YuMincho, '游明朝', 'ヒラギノ明朝 ', 'HiraMinProN-W6';
	font-weight:bold;
	}	
.story_text .bold{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-shadow:0 0 2px #BA225D;
	color:#C72262;
	}

/*キャラクター*/

.chara_tab{
}


.chara_tab ul {
	width:100%;
}

.chara_tab ul li{
	width:16%;
	margin:0.3%;
	float:left;
	opacity:0.6;
}

.chara_tab ul li img{
	width:100%;
	float:left;
	opacity:1;
}

.chara_tab ul li.selected{
	opacity:1;
	
	
}

chara_tab ul li:hover{
	
	cursor:pointer;
	opacity:1;
}


/*キャラクター*/
#chara_prof{
	overflow:hidden;
	width:100%;
	height:auto;
	position:relative;
	
}


#chara_prof img#chara_bg{
	overflow:hidden;
	position:relative;
	width:150%;
	right:50%;
	z-index:0;
}


#chara_prof #chara_info{
	position:relative;
	width:100%;
	height:auto;
	text-shadow:0 0 2px #F8EAE3,0 0 4px #F8EAE3,0 0 6px #F8EAE3;
	margin-top:-4em;
	z-index:100;
	
}

#chara_prof #chara_info img{
	width:100%;	
}



/*各ページ共通*/
h3 img.update{
	display:inline-block;
    vertical-align: middle;
    padding-left: 0.3em;
	
}
.contents_taikenban{
	background-image:url(../img/contents_bg_01.jpg),url(../img/contents_bg_03.jpg),url(../img/contents_bg_02.jpg);
	background-position:top,bottom,top;
	background-repeat:no-repeat,no-repeat,repeat-y;
	background-size:100%,100%,100%;
	border:2px solid #cb782c;
}
.contents_taikenban .gaiyou{
	width:90%;
	margin:5%;

	
}

.contents_taikenban .gaiyou h3{
	text-align:left;
}

.contents2{
	overflow:hidden;
	width:90%;
	padding:5%;
	background-color:#fff;
	background-image:url(../img/contents_bg_01.jpg),url(../img/contents_bg_03.jpg),url(../img/contents_bg_02.jpg);
	background-position:top,bottom,top;
	background-repeat:no-repeat,no-repeat,repeat-y;
	background-size:100%,100%,100%;
	border:2px solid #cb782c;
}

.contents2 h1 {
	margin:0;
}
.contents2 h1 img{
	display:block;
	margin:0 auto;
	max-width:100%;
	width:auto;
	
}

.contents2 h2{
	color:#cc0a6f;
	font-size:182%;
	line-height:120%;
	background-image:url(../img/midashi.png);
	background-position:left 3px;
	background-repeat:no-repeat;
	text-indent:1em;
	margin-bottom:0.5em;
	vertical-align:middle;
}

.contents2 h2 a{
	color:#cc0a6f;
	text-decoration:underline;
}

.contents2 h2 img.update2{
	display:inline-block;
    vertical-align: middle;
    padding-left: 0.3em;
	
}
h3{
	color:#700;
	font-size:138.5%;
	line-height:138.5%;
	margin-top:0.5em;
	margin-bottom:0.5em;
}

.layout1{
	margin:1em 0;
	}

.layout1 img{
	display:block;
	margin:0.5em auto;
	width:auto;
	max-width:100%;
	}

/*武将診断*/

.kekka{
	width:100%;}
	
.kekka ul{
	width:100%;}

.kekka ul li{
	border-radius:10px;
	display:block;
	float:left;
	width:33%;
	margin:0;
}


.kekka ul li a{
display:block;
width:90%;
margin:0 auto 5px auto;
}

.kekka ul li img{
width:100%;
}

	
	
/*ギャラリー*/

.nobunaga{
	color:#C03;
}


.ieyasu{
	color:#158d7d;
}

.hotaru{
	color:#bc136f;
}

.mitsuhide{
	color:#6960c6;
}

.kanbe{
	color:#18768a;
	
}
.hanbe{
	color:#FF80B3;
	
}

.sakichi{
	color:#D46225;
}
	
.galleryThm{
	text-align:center;
	border-top:1px solid #CB782B;
	border-bottom:1px solid #CB782B;
	padding:0;
	margin:10px auto;
	
	width:100%;
	max-width:960px;
	
}
.galleryThm ul{
	
	width:100%;
	margin:0 auto;
	text-align:center;
	
}

.galleryThm ul li{
	display:inline-block;
	box-sizing:border-box;
	border:1px solid #555;
	width:10.4%;
	max-width:88px;
	margin-top:1%;
	margin-bottom:0.7%;
	margin-right:0.7%;
}


.galleryThm ul li.selected{
	
	border:2px solid #cc0835;
	
	}

.galleryThm ul li img{
	display:block;
	position:relative;
	width:100%;
	
}

.galleryThm img.update{
	position:absolute;
	z-index:99;
	width:5.2%;
	max-width:44px;
	margin:0 auto;
	margin-top:0;
	}

.galleryThm ul li img:last-child{
	margin-right:0;

}
	

/*豪華版*/
.dramaCD ul{
	width:100%;
	
}

.dramaCD ul li{
	width:32%;
	float:left;
	margin-right:1%;
	
}
.dramaCD ul li:nth-child(3n){
	 margin-right:0%;
}

	
.dramaCD img{
	display:block;
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 
}

.dramaCD img.update{
	width:auto;
	display:block;
	position:absolute;
	
}

.movie-wrap {
     height: 0;
  overflow: hidden;
  padding-top:56.25%;
  position: relative;
}
 
.movie-wrap iframe {
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*ページ内タブ*/
.disnon {
  display: none;
}

ul#tab {
	width:100%;
	margin:0 auto;
	}

ul#tab li{
	width: 45%;
    float: left;
    height: 2em;
	font-size:77%;
	padding:0.5em 0 0 0;
	margin:1%;
    text-align: center;
    color:#da9238;
	border:2px solid #da9238;
	cursor:pointer;
}


ul#tab li:hover,ul#tab li.select{
    color:#fff;
	background-color:#ba225d;
	border:3px solid #da9238;
}

.tabbtn{
	width: 45%;
    height: 2em;
	font-size:1em;
	padding:0.5em 0 0 0;
	margin:1% auto;
    text-align: center;
    color:#ba225d;
	border:2px solid #da9238;
	cursor:pointer;
	}
	
.tabbtn a{
	width: 100%;
	height: 2em;
	display: block;
	color: #ba225d;
}

.tabbtn:hover{
    color:#fff;
	background-color:#ba225d;
}
.tabbtn a:hover{
    color:#fff;
	z-index:99;
}
	

.clearfix{display: inline-block;} 

/*PAGETOP*/
#pagetop{position: fixed;bottom: 30px;right: 30px; z-index:9999; margin:0; padding:0;}


@media screen and (min-width: 680px) {

#nav{

height:75px;
background-image:url(../img/nav_bg.jpg);
background-repeat:repeat;
}

#nav ul{
	width:100%;
	max-width:960px;
	
	text-align:center;
	margin:0 auto;
}

#nav ul li{
	float:left;
	padding:0;
	cursor:pointer;
	width:16.6%;
	height:75px;
}

#nav ul li a{
	display:block;
	width:100%;
	height:100%;
	text-indent: -9999px;
	background-size:100%;
}



}

/*PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC */
/*PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC */
/*PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC */
/*PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC */


@media screen and (min-width: 960px) {

	.sp{display:none;}
	.pc{display:block;}
	
img.common_img{
	width:auto;
	}	
	


/*nav*/	

#nav{
margin-bottom:20px;
height:75px;
background-image:url(../img/nav_bg.jpg);
background-repeat:repeat;
}

#nav ul{
	width:100%;
	max-width:960px;
	height:75px;
	text-align:center;
	margin:0 auto;
}

#nav ul li{
	float:left;
	padding:0;
	cursor:pointer;
	width:16.6%;
	height:75px;
}

#nav ul li a{
	display:block;
	width:100%;
	height:100%;
	text-indent: -9999px;
	background-size:100%;
}



/*footer*/

#footer .sns ul{
	margin:0 auto;
	text-align:center;
}

#footer .sns ul li{
	margin:30px;
	display:inline-block;
}

.link ul li{
	padding:0.5em 1.2em 0.3em 1.2em;
	/*border-right:2px solid #900;*/
	display:inline;
	vertical-align:middle;
	background-color:#EDE1F7;
	border-radius:20px;
	}
	
.link ul li:last-child{
	/*border:none;*/
	}	
.link ul li:hover{
	background-color:#DFDEF6;
	}


/*TOPページ*/



#visualArea{
	position:relative;
	width:960px;
	height:712px;
	margin:0 auto;
	
}

#visualArea img{
	position: absolute;
	width: auto;
	left: 1px;
	top: -1px;
}

#visualArea img.souki_sp{
	display:none;
}

#visualArea img.souki_pc{
	position: absolute;
	display:block;
	z-index:999;
	width: auto;
	margin:0 auto;
	left:20px;
	top:15px;

	}


#visualArea img.logo{
	top: 169px;
	left: 523px;
}

#visualArea img.vita{
	top: 525px;
	left: 724px;/*19*/
}



#visualArea img.hatsubaibi{
	top: 528px;
	left: 426px;/*305*/
}
#visualArea img.btn{
	top: 619px;
	left: 295px;
}

#visualArea img.shindan{
	top: 619px;
	left: 599px;
}

#visualArea img.pv{
	top: 2.4px;
	left: 2.4px;
}


#info #topic-backnumber tr td:nth-child(1){
	width:50px;}
	
	
#dramacdTop ul li{
	width:20%;
	margin:0;
	display:block;
	float:left;
	}
			
/*
#bnn img{
	width:470px;
	display:block;
	float:left;
	margin:5px;
}
#bnn img:nth-child(1){
	margin-right:14px;
}

#bnn img:nth-child(n+2){
	margin:0;
}

#bnn img:nth-child(odd){
	display:block;
	margin-right:8px;
}
*/

#bnn{
	max-width:100%;
}

#bnn img{
	width:470px;
	float:left;
	}

#bnn img:nth-child(1){
	margin:0;
}

#bnn img:nth-child(n+2){
	margin:0;
}

#bnn a img{
	padding-bottom:15px;
}

#bnn img.leftbnn{
	margin-right:15px;
	display:block;
}


.contents{
	width:960px;
	margin:0 auto;
	position:relative;
}

.contents_taikenban{
	width:960px;
	margin:0 auto;
	position:relative;
}
.contents_taikenban .gaiyou{
	width:840px;
	margin:0 auto;
	padding:0 60px 40px 60px;
	
	
}

.contents_taikenban .gaiyou h3{
	text-align:center;
}


.contents_taikenban .gaiyou dl{
	width:80%;
	margin:0 auto;
}

.contents_taikenban .gaiyou dt{
	float:left;
	width:25%;
	line-height:2em;
	}

.contents_taikenban .gaiyou dd{
	float:left;
	width:75%;
	line-height:2em;
	}



#timeline{
	float:left;
	width:370px;
	margin-top:0px;
}

#timeline img{
	display:block;
	margin:0 auto;
	width:auto;
	max-width:100%;
}


#spec{
	width:528px;
	height:260px;
	float:left;
	border:1px solid #000;
	padding:20px;
	margin:0px 0 20px 20px;
}

	
#spec ul li{
	/*float:left;
	width:50%;*/
}



/*各ページ共通*/
.contents2{
	width:840px;
	margin:0 auto;
	padding:40px 60px;
}

.contents2 h1 img{
	margin:0px auto 0 auto;
}

.layout1{
	width:100%;
	padding:0;
	margin:0 0 0.5em 0;
	}
	
.layout1 .left{
	float:left;
	width:48.8%;
}

.layout1 .right{
	float:right;
	width:48.8%;	
}

.layout1 img{
	width:auto;
	max-width:100%;
	
}


.layout1{
	width:100%;
	padding:0;
	margin:0 0 0.5em 0;
	}
	
.layout1 .left2{
	float:left;
	width:61.9%;
}

.layout1 .right2{
	float:right;
	width:35.7%;
}


/*ページ内タブ*/


ul#tab {
	width:80%;
	margin:0 auto;
	}

ul#tab li{
	width: 46%;
    float: left;
    height: 2em;
	font-size:1em;
	padding:0.5em 0 0 0;
	margin:1%;
    text-align: center;
    color:#ba225d;
	border:3px solid #da9238;
	cursor:pointer;
}

ul#tab li:hover,ul#tab li.select{
    color:#fff;
	background-color:#ba225d;
	border:3px solid #da9238;
}


/*キャラクター*/
#chara_prof{
	width:100%;
	height:770px;
	position:relative;
	
}


#chara_prof img#chara_bg{
	position:absolute;
	width:100%;
	top:0;
	left:0;
	z-index:0;
}


#chara_prof #chara_info{
	width:440px;
	height:auto;
	position:absolute;
	top:186px;
	left:0;
	z-index:999;
	text-shadow:0 0 2px #F8EAE3,0 0 4px #F8EAE3,0 0 6px #F8EAE3;

}

#chara_prof #chara_info img{
	width:auto;	
}

/*武将診断*/


.kekka ul li{
	width:270px;
	margin:15px 15px 0 0;
}


.kekka ul li:nth-child(3n){
	margin:15px 0 0 0;
}



}


/*PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC */
/*PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC PC */