@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; }
/* Hides from IE-mac \*/
* html .clear { height: 1%; }
.clear { display: block; }
/* End hide from IE-mac */

/*==========================================
	
	[1]共通設定・レイアウト
	
==========================================*/
/*共通変数：
メインカラー（メインメニュー背景色・見出し）
サブカラー（各話メニューhover）*/
:root{
 --main-color:#000;
 --sub-color:#EA002B;
}
/*リンク位置調整*/
html{
scroll-behavior: smooth;
scroll-padding-top: 100px;
}

/*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;	}
#kandora #wrapper img{height: auto;}
/*#bg01 {
	background-repeat:repeat-x;
	background-repeat: no-repeat;
	background-position: center 0px;
	background-image: url(../images/bg_top.jpg);
	color: var(--main-color);
	position: relative;
}*/
#kandora #wrapper #content {background-color: #ffffff; background-image: none; width:100%;}
#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: 30px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 0px;
}

#copy {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #CCC;
	background-color: #000;
}
#kandora_header,#kandora_header_sub {position: relative;background-repeat: no-repeat; width:100%; background-image: url(../images/bg_top.jpg);background-position: center bottom ;background-color: #FAEEF8;}
#kandora #kandora_header img,#kandora #kandora_header_sub img {width: 100%; max-width: 1200px; margin: 0 auto; display: block;}
#kandora_box  {
	position:relative;
	width:1200px;
	margin: 0 auto;
	background-color: transparent;
}
#kandora_box #kandora_box_inner {
	background-color: transparent;
}
#kandora_box h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	line-height: 1.2;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	padding-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 20px;
	display: block;
	color: var(--main-color);
	font-size:2.5rem;
}

/*韓流情報バナー*/
.kandora_banner{text-align: center;width: 100%;padding-bottom: 2rem;}
.kandora_banner img{}
/*韓ドラ会員バナー*/
.bnr_hanryu{display: block;width: 90%;max-width: 450px;margin: 1rem auto;}
.bnr_hanryu img{width: 100%;}

/*scrollin_anime.js*/
.scrollin { opacity: 0; transition: all .2s ease;}
.scrollin.show { opacity: 1; transform: none;}
.scr_lr { transform: translate(-16px, 0);}
.scr_rl { transform: translate(16px, 0);}
.scr_fadein{ transform: translate(0, 0px);}
.scr_up { transform: translate(0, 16px);}
.scr_down { transform: translate(0, -16px);}
.scr_scaleUp { transform: scale(.8);}
.scr_scaleDown { transform: scale(1.5);}
.scr_rotateL { transform: rotate(60deg);}
.scr_rotateR { transform: rotate(-60deg);}
/*/scrollin_anime.js*/
/*==========================================
	
	[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: 20px;*/
	clear: both;
  margin-top: -46px;  /*固定ナビの高さ分のネガティブマージン */
  padding-top: 46px;  /*打ち消し用のパディング */
}

/*==========================================
	
	[3]ストーリー
	
==========================================*/


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

#storybox {float: right; width: 775px; margin-top: 0px; margin-right: 25px;}
#storybox h4 {
	color: #616161;
	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;
	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;}

#story_list {
	margin-right: 0px;
	margin-left: 20px;
	float: left;
	width: 300px;
/*	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: #999;  margin-bottom: 3px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999; letter-spacing: 0.2em;padding:0.25em;}
/*#story_list li.off{	padding-top: 3px;	padding-right: 3px;	padding-bottom: 3px;}*/

#story_list li a {
	color: var(--main-color);
	text-decoration: none;
	display: block;
	transition: 0.4s;
	/*padding:3px;*/
}
#story_list a:visited {
	color:var(--sub-color);
	transition: 0.4s;
}
#story_list a:hover {
	color:var(--sub-color);
	text-decoration: none;
}

/* アコーディオンメニュー */
/*#story_list .menu_swich {
	text-align: center;
	padding: 6px;
	font-size: 18px;
	font-weight: bold;
	color: var(--main-color);
	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;
}

#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話*/

/* アコーディオンメニュー */
.toggle summary::marker {font-size: 1.25rem; color:var(--sub-color);}
#story_list .toggle summary{
	text-align: center;	padding: 0.25em 0.5em 0.4em;font-size: 1.125rem;font-weight: bold;color: var(--main-color);margin-bottom: 0.5em;border: 1px solid #AFAFAF;border-radius: 0.25em;background-color: #f6f6f6;cursor: pointer;
}
#story_list .toggle summary:hover{color:var(--sub-color);}
/* /アコーディオンメニュー */


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


/*cast flex*/
	#castbox_flex{display:flex;flex-wrap: wrap;width: 96%;max-width: 1200px;margin: 0 auto;}
/*	#castbox_flex div{width: calc(100% / 3 - 1em); padding: 0.5em 0.5em 1em 0.5em;}3人*/
	#castbox_flex div{width: calc(100% / 4 - 1em); padding: 0.5em 0.5em 1em 0.5em;}/*4人*/
	#castbox_flex div img{display: block;width: 100%;height: auto;}
#kandora #wrapper #castbox_flex strong{font-weight: bold;}
#castbox_flex div p{color: #333;}
	
@media screen and (max-width: 768px) {
	#castbox_flex{}
	#castbox_flex div{width:calc(100% / 2 - 1em);}
	}

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

/*#soukanzu_box {	margin-bottom: 20px;}
#soukanzu_box img {
	display: block;
	margin: 0 auto;
	border-radius: 6px;
	width: 100%;
}*/
/*PhotoSwipe*/
.soukanz {margin-bottom: 20px;border-radius: 6px;width: 100%;max-width: 1200px;}
.soukanz img {display: block;margin: 0 auto;width: 60%;}

.over img{ opacity:0.5;}
.chart_nav ul{
	padding: 0;
	text-align: center;
}
.chart_nav li{
	display: inline-block;
	list-style: none;
	padding: 0px;
	margin-right: 5px;
	margin-bottom: 10px;

	text-align: center;
}
.chart_nav li a {
	padding: 5px;
	background-color: #F5F5F5;
	border: 1px solid var(--sub-color);
	display: block;
	color::var(--sub-color);
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	border-radius: 10px;
	width: 200px;
	transition: 0.5s;
}
.chart_nav li a:hover {
	background-color:var(--sub-color);;
	color: #FFF;
}

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

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


/*==========================================
	
	[6]slickslider　221122追記
	
==========================================*/

/*#storybox .slider{
    margin: 0px auto;
    width: 90%;
	max-width: 775px;
}*/
/*==========================================
	
	[]swiper　240411追記
	
==========================================*/
#storybox .swiper{margin:0 auto; width:90%;max-width: 680px;overflow: hidden;}
#storybox .swiper .swiper-wrapper{width: 100%;margin-bottom: 1.5rem;}
#storybox .swiper .swiper-wrapper img{width: 100%;}

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


.main_menu {
	position: relative;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: -1px;
	z-index:100; 
}

.main_menu_inner {
background-color:var(--main-color);
/*	background: linear-gradient(#826e1d , #c39815 );*/

/*	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 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: 200px;
	text-align: center;
	font-size: 24px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	line-height:2;

}

.main_menu_inner li a {
	display: block;
	color: #FFFFFF;
	padding: 10px 0;
}
.main_menu_inner li a:hover {
	color: #DDDDDDD;
	text-shadow: 0px 0px 4px #FFF;
	text-decoration: none;
}


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

/*==========================================
	
	[]韓流バナー　241217追記
	
==========================================*/

/*#bnr_mail_box2{	width:900px;margin: 1rem auto;display:grid;	grid-template-columns: repeat(2, 1fr);gap: 0.5em;}
#bnr_mail_box2 img{width:100%;max-width: 450px;height: auto;}
@media screen and (max-width: 768px) {
#bnr_mail_box2{width:80%;grid-template-columns: repeat(1, 1fr);margin: 1rem auto 0;}
}*/
/*==========================================
	
	[8]sns
	
==========================================*/

/* snsボタン */
#box-sns{
	position:absolute;
	top:5px;
	left:5px;
}
#box-sns div{float:left; padding-left:5px; padding-bottom:0px; margin:0;}

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


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


.w100{width: 100%;}
.w80{width: 80%; margin:0 auto; display:block;}
/*調整*/
#kandora #kandora_header,#kandora #kandora_header_sub {width:inherit;background-position: center;background-size: cover;}	


#kandora #wrapper #content {width: 100%; clear: both}
#kandora #kandora_header img,#kandora #kandora_header_sub img{width: 100%; min-width: inherit; margin: 0;}
/*#kandora h3 img{width: 100%;}*/
#kandora_box  {width: 100%;}
#kandora_box h3 {margin:10px 0 10px 0; font-size:20px; }

#box-sns{width:96%; margin: 0; padding:0px;}

#kandora_box_inner #story { margin-bottom: 10px; padding-bottom: 10px;margin-top:0px;}
#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: 96%; padding-bottom:0px; margin:0px 10px 10px;}
/*#kandora_box_inner #story #story_list ul li{ width: 48%; float: left; margin:2px 2px;  border: 1px dotted #CCC; padding:8px 6px; font-size: 10px;	letter-spacing: 0em; box-sizing: border-box;}*/
#kandora_box_inner #story #story_list ul li{ width: 48%; float: left; margin:1px 1px;  border: 1px dotted #CCC; font-size: 10px;padding:2px;letter-spacing: 0em; box-sizing: border-box;}
#kandora_box_inner #story #story_list ul li a{padding:10px 5px; }
		
#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;}

.main_menu {width: 100%;}
.main_menu_inner {
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
}
.main_menu_inner li {width: 30%; font-size: 16px; line-height:2.5; box-sizing: border-box; }
.main_menu_inner li a {	padding: 0px;}

#soukanzu_box {	margin: 5px 0px;}
#soukanzu_box img {	width: 96%;}
.chart_nav ul{width: 98%; margin:0 auto; margin-bottom:10px;clear:both;}
.chart_nav li{margin: 2px 0px 5px 0px; width:48%;}
.chart_nav li a {padding: 5px; font-size: 12px;	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 {
  margin-top: -35px; /* 固定ナビの高さ分のネガティブマージン */
  padding-top: 35px; /*打ち消し用のパディング */
}

/* 画像長押し保存禁止(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;
}


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