@charset "utf-8";
/* CSS Document */

/*==========================================

	[*]回り込み解除
	[1]共通設定・レイアウト
	[2]メニュー
	[3]ストーリー
	[4]キャスト
	[5]相関図
	[6]FlexSlider
	[7]メインメニュー
	[8]sns
	[9]スマホ対応
	
==========================================*/


/*==========================================

[*]回り込み解除

==========================================*/

.cl_both {clear:both;}
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clear { display: inline-table; }
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
/* Hides from IE-mac \*/
* html .clear { height: 1%; }
.clear { display: block; }
/* End hide from IE-mac */

/*==========================================
	
	[1]共通設定・レイアウト
	
==========================================*/

body,td,th { font-family: "ＭＳ ゴシック", "Osaka－等幅"; color: #333333;}
body {margin-left: 0px;	margin-top: 0px;}
h1,h2,h3,h4,h5,h6,p{ margin: 0px; padding: 0px;}
#kandora #wrapper {	background-image: none;	background-color: #FFF;}
#bg01 {
	background-repeat: repeat-x;
	background-position: center top;
	background-attachment: fixed;
	background-image: url(../images/bg_top.jpg);
	background-color: #ffffff;
}
#kandora #wrapper #content {background-color: transparent; background-image: none;}
#copy_inner {
	text-align: center;
	font-size: 12px;
	color: #F3F3F3;
	line-height: 3;
	clear: both;
	font-family: "Arial Black", Gadget, sans-serif;
	margin: 0px;
	font-weight: bold;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}


#copy {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #990000;
	background-color: #CC3333;
}

#kandora_header {position: relative; background:url(../images/bg_header.png) no-repeat center top; -webkit-background-size:100%; background-size:100%;}
#kandora_box #kandora_box_inner {
	z-index: 99;
	background-image: url(../images/bg_contents.png);
	margin-top: -70px;
	background-repeat: repeat;
}
#kandora_box h3 {
	/*font-family: Georgia, "Times New Roman", Times, serif;*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	line-height: 1.5;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	padding-left: 20px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 20px;
	display: block;
	margin-top: 0px;
	padding-top: 20px;
}

.kandora_banner{text-align: center;width: 100%; background:#fff;}
.kandora_banner img{margin-bottom:50px;}

/*タイトルカラー・サイズ設定*/
.tit_blue {color: #49BBE4;	font-size: 40px;}
.tit_mosgreen {color: #8fc31f;	font-size: 40px;}
.tit_green {color: #99CC00;	font-size: 40px;}
.tit_matpink {color: #DD7587;	font-size: 40px;}
.tit_pink {color: #FF3366;	font-size: 40px;}
.tit_black {color: #000000;	font-size: 40px;}
.tit_earth {color: #BBBB77;	font-size: 40px;}
.tit_purple {color: #4E0073; font-size: 40px;}
.tit_deepred {color: #820000; font-size: 40px;}
.tit_orange {color: #D15A03;font-size: 40px;}
.tit_gold {color: #CC9900;font-size: 40px;}
.tit_red {color: #e4002b;font-size: 36px;}


/*==========================================
	
	[2]メニュー
	
==========================================*/

#menu_list {list-style-type: none;	margin: 0px;}
#menu_list li {	float: left; margin: 0px; padding: 0px;}
#anc_story,#anc_cast,#anc_chart {
/*	height: 50px;*/
	clear: both;
	padding-top:0;
	margin-top:-40px;
}
#anc_story { padding-top:25px;}
/*==========================================
	
	[3]ストーリー
	
==========================================*/


#story {background-repeat: no-repeat; background-position: center bottom; margin-bottom: 20px; padding-bottom: 20px; position:relative; top:-20px;}

#storybox {float: right; width: 575px; margin-top: 0px; margin-right: 25px;	margin-bottom: 40px;}
#storybox h4 {
	color: #1db39f;
	font-size: 24px;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-top: 20px;
	letter-spacing: 0.2em;
	display: block;
	padding-top: 10px;
	margin-left: 20px;
}
#storybox .photo { text-align: center;}
#storybox p { line-height: 2; padding: 20px; color: #333; font-size:14px;}
#storybox p.day { color: #333; font-weight: bold; text-align: right; margin-left: 0px; font-size: 90%; line-height: 2; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 20px; margin-right: 20px;}
/*.s_text {padding: 10px;}*/

#story_list {
	position:relative; top:-20px;
	margin-right: 0px;
	margin-left: 20px;
	float: left;
	width: 360px;
	margin-top: 30px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
#story_list li {/* text-align:center; */font-family: "ＭＳ ゴシック", "Osaka－等幅"; font-size: 14px; list-style-position: outside; list-style-type: none;	line-height: 1.2; display: block;	font-weight: bold; color: #666; padding:2px 2px 2px 20px; margin-bottom: 3px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999; letter-spacing: 0.2em;}
#story_list li.off{	padding-top: 3px;	padding-right: 3px;	padding-bottom: 3px;}

#story_list li a {
	color: #0f99b3;
	text-decoration: none;
	display: block;
	transition:0.4s;
}
#story_list a:visited {
	color: #0c8484;
	transition: 0.4s;
}
#story_list a:hover {
	color: #8cd8d0;
	text-decoration: none;
}

/* 階伯-ケベク- アコーディオンメニュー */
#story_list .menu_swich {
	text-align: center;
	padding: 6px;
	font-size: 18px;
	font-weight: bold;
	color: #CC9900;
	margin-bottom: 5px;
	cursor: pointer;
	background-image: url(../images/bg_menu_swich_right.png);
	background-repeat: no-repeat;
	background-position: 15px center;
	border: 2px solid #999999;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#story_list .menu_swich.active {
	background-image: url(../images/bg_menu_swich_down.png);
	background-repeat: no-repeat;
	background-position: 15px center;
	
} 
#tab_box1{ margin-bottom:10px;}

/*※アコーディオンがあらかじめ開いておく方をコメントアウト*/
/*#tab_box1{display:none;}*/ /*あらすじ～第25話*/
#tab_box2{display:none;} /*第26話～第51話*/


/*==========================================
	
	[4]キャスト
	
==========================================*/


#castbox {margin-bottom: 20px; padding-bottom: 20px; padding-left: 40px;}
#castbox p {
	color: #333;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 100%;
}
#castbox .cast_details {
	float: left;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	width: 218px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-top: 20px;
}

.cast_details.cast_01 {	background-image: url(../images/img_cast01.png); background-repeat: no-repeat; background-position: center top;}
.cast_details.cast_02 {	background-image: url(../images/img_cast02.png); background-repeat: no-repeat; background-position: center top;}
.cast_details.cast_03 {	background-image: url(../images/img_cast03.png); background-repeat: no-repeat; background-position: center top;}
.cast_details.cast_04 {	background-image: url(../images/img_cast04.png); background-repeat: no-repeat; background-position: center top;}
.cast_details.cast_05 {	background-image: url(../images/img_cast05.png); background-repeat: no-repeat; background-position: center top;}
.cast_details.cast_06 {	background-image: url(../images/img_cast06.png); background-repeat: no-repeat; background-position: center top;}
.cast_details.cast_07 {	background-image: url(../images/img_cast07.png); background-repeat: no-repeat; background-position: center top;}
.cast_details.cast_08 {	background-image: url(../images/img_cast08.png); background-repeat: no-repeat; background-position: center top;}
.cast_details .cast_txt {margin-top: 330px;	padding-bottom: 5px;}
.cast_details .cast_txt span { text-align: center; display: block;}

/*==========================================
	
	[5]相関図
	
==========================================*/

#soukanzu_box {margin-top: 30px;
	margin-bottom: 20px;
/*	margin-left: 10px;*/
}
#soukanzu_box img {	width: 100%;}
.over img{ opacity:0.5;}
.chart_nav ul{
	padding: 0;
	width: 800px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.chart_nav li{
	display: block;
	list-style: none;
	padding: 0px;
	float: left;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
}
.chart_nav li a {
	padding: 10px;
	background-color: #F5F5F5;
	border: 1px solid #8C7040;
	display: block;
	color: #333333;
	text-decoration: none;
	font-weight: bold;
	font-size: 12px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	width: 170px;
	transition:0.5s;
}
.chart_nav li a:hover {
	background-color: #FF3399;
}

/*==========================================
	
	[6]FlexSlider
	
==========================================*/

#storybox .flexslider {	width: 520px; margin-left: 30px;}

/*==========================================
	
	[7]メインメニュー
	
==========================================*/

.main_menu {
	position: relative;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	margin-top: -1px;
}

.main_menu_inner {
	/*background-color: #000000;*/
	background-color: rgba(17,151,170,0.5);
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	/*	opacity: 0.8;*/
	text-align: center;
	margin-top: -1px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.main_menu_inner li {
	display: inline-block;
	width: 300px;
	text-align: center;
	font-size: 24px;
	/*font-family: Georgia, "Times New Roman", Times, serif;*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	line-height:2;

}
.main_menu_inner li a {
	display: block;
	color: #e4002b;/*	text-shadow: 2px 0px 2px #FFF;*/
	 text-shadow:0 0 1px #e4002b,0 0 1px #e4002b;
}
.main_menu_inner li a:hover {
	color: #f0728a;/*	text-shadow: 2px 0px 2px #FFF;*/
	 text-shadow:0 0 1px #f0728a,0 0 1px #f0728a;
	/*text-shadow: 2px 2px 2px #6d6c85;*/
	text-decoration: none;
}


.navfix{ position: fixed; top: 0; z-index:2000;  }
  


/*==========================================
	
	[8]sns
	
==========================================*/

/* snsボタン */
#box-sns{width:40%; margin-left: auto; margin-top:0; padding-top:15px; position:relative; top:0;}
#box-sns div{float:left; padding-left:5px; padding-bottom:5px;}

/* Twitter ウィジェット追記20160408NISHINA*/


/*#box_twitter{
	width:760px; margin:20px auto 0;
}

#box_info{
	width:435px;
	margin:10px 25px 0 0;
	float:left;
}

#box_info img{
opacity:0.8;
}


#widget_twitter{
	width:300px;;float:left;
}
*/
/*==========================================
	181108リニューアル用追記
==========================================*/
#kandora #wrapper { margin-bottom:-50px;}
#kandora_header,
#kandora #kandora_header_sub { position:relative; width:980px; margin:0 auto;}
#kandora_box #kandora_box_inner { width:980px; margin:0 auto;}
#kandora_box #kandora_box_inner,
#story_list,
footer { font-family:sans-serif;}
#kandora_box #kandora_box_inner { z-index: 900;}
.kandora_banner imgbanner_patch { display:block; height:100px; width:auto;}
/*メニューリストに戻るをieだけ表示する*/
#kandora p.goto_list { font-size:14px; padding-bottom:20px; text-align:center;}
#kandora p.goto_list a { color:#888; text-decoration:none;}
#kandora p.goto_list a:hover { opacity: 0.7;  filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)";  /* ie 8 */}
#kandora p.goto_list  
{
  display: none;
  *display: block;  /* IE7以下 (上書きされて結果的にIE7のみ) */
  _display: block;  /* IE6のみ */
}
#kandora p.goto_list   
{
  display: block\9;  /* IE8のみ */
}
#kandora p.goto_list   
{
  display: block\9;  /* IE9,10 (上書きされて結果的にIE9のみ) */
}
@media all and (-ms-high-contrast: none) 
{
#kandora p.goto_list:not(:target)
  {
    display: block;  /* IE10,11 (上書きされて結果的にIE10のみ) */
  }
*::-ms-backdrop,#kandora p.goto_list:not(:target) 
  {
    display: block;  /* IE11のみ */
  }
}
.cast_details .cast_txt { font-size:14px !important; line-height:1.5 !important;}
.main_menu {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	z-index:900;
}
@supports (position: sticky) or (position: -webkit-sticky) {
#kandora_box .main_menu {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  }
}
.main_menu_inner li a { text-decoration:none;}


/*オリジナル*/
#kandora_header { margin-bottom:-48px;}
.end_txt { font-size:150%; font-weight:bold; color:#e4002b; position:absolute; top:50px; left:470px;}

/*==========================================
	
	[9]スマホ対応
	
==========================================*/




@media screen and (max-width: 768px) {


/* 全体BOX幅調整 ※グローバルナビに影響があるので保留 */
/**, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}*/
#kandora #wrapper #content {width: 100%;}
#kandora #kandora_header img,#kandora #kandora_header_sub img {width: 100%; height:auto; padding-top:5px;}
#kandora h3 img {width: 100%;}
#kandora_box h3 {margin:0px; font-size:20px; }
/*タイトルカラー・サイズ設定*/
#bg01 {background-size:200% auto;}
#kandora_box #kandora_box_inner {margin-top: -30px;}

#box-sns{width:100%;	margin: auto; top:20px;}
#kandora_box_inner #story #storybox { float: none; width: 94%; margin-right: auto;	margin-left: auto;}
#kandora_box_inner #story #storybox .flexslider {width: 80%; margin:0px auto 30px;}
#kandora_box_inner #story #story_list {	width: 100%; margin: 0px;}
#kandora_box_inner #story #story_list ul li{ width: 48%; float: left; margin:2px 2px;  border: 1px dotted #CCC; padding:6px 4px; font-size: 10px;	letter-spacing: 0em;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;}
		
/*#story_list li a {	padding-left: 0px;}*/
#kandora_box_inner #story #storybox p {	font-size: 100%;}
#storybox h4 {font-size: 16px;	padding-top: 5px;	margin-left: 5px;}
#storybox p.day {font-size: 80%;	line-height: 1.5;	padding:0 0 10px 0;	margin-right: 0px;}

#castbox {margin-bottom: 0px; padding-bottom: 10px;	padding-left: 10px;}
#kandora_box_inner #castbox p {	font-size: 100%;}
#cast #castbox .cast_details { width: 46%;	background-size: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;}
.cast_details .cast_txt {
	margin-top: 145%;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}
.main_menu {width: 100%;}
.main_menu_inner {
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
}
.main_menu_inner li {width: 30%; font-size: 16px; line-height:2.5;
	    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;

}
#soukanzu_box {	margin: 5px 0px;}

.chart_nav ul{width: 98%; margin:0 auto; margin-bottom:10px;clear:both;}
.chart_nav li{margin: 2px 2px 5px 2px; width:48%;}
.chart_nav li a {padding: 5px; font-size: 12px;	border-radius: 6px;	-webkit-border-radius: 6px;	-moz-border-radius: 6px; width: auto;}

.kandora_banner{width: 100%;}
.kandora_banner img{width: 50%;}

#copy_inner {font-size: 10px;line-height: 1;padding-top: 20px;	padding-bottom: 20px;}
#anc_story,#anc_cast,#anc_chart {height: 20px;}

/* 画像長押し保存禁止(iphone) */
img {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}

/*==========================================
	181108リニューアル用追記
==========================================*/

#kandora_header,
#kandora #kandora_header_sub,
#kandora_box #kandora_box_inner { width:100%;}
@supports (position: sticky) or (position: -webkit-sticky) {
#kandora_box .main_menu {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  }
}

/*オリジナル*/
#kandora_header { margin-bottom:0;}
.end_txt { font-size:100%;top:20px; left:10px;}

/*ここまでスマホ対応=====================*/
}