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

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6,
p, a, em, img, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, canvas, footer, header, menu, nav, output, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



html { width: 100%; }
body { font-family: "メイリオ","Meiryo","ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka","sans-serif" !important; }

/*全体
--------------------------------------------*/
#wrap { margin: 0 auto;}
a img,a:hover img {transition:.3s;}
a:hover img {opacity:.85;-ms-filter: "alpha(opacity=85)";}

/*ローディング
--------------------------------------------*/
#loader { width: 48px; height: 48px; display: none; position: fixed; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; z-index: 30; }
#fade { width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0; z-index: 25; background-color: #FFFFFF; }
	@media screen and (max-width: 767px){
		#loader { width: 48px; height: 48px; display: none; position: fixed; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px;	z-index: 30; }
		#loader img{ width: 48px; height: 48px; }
	}


/*メインビジュアル
--------------------------------------------*/
#main_wrap { background: url(../images/main_bg_sp.jpg) repeat center 0; height: 2377px; }

#main { background: url(../images/main_sp.jpg) no-repeat center 0; height: 2377px; max-width: 1200px; margin: 0 auto; text-align: center;}
#main_inner {width: 960px; margin: 0 auto; position: relative;}
h2 { width: 448px; height: 357px; padding: 820px 40px 0;}
.move { position: relative; margin-top: 80px;}
.move_head {position: absolute; top: -94px; left: 73px;}
.delivery { padding: 80px 0}
.main_copy {font-size:10px; font-weight: bold; color:#133569; text-align: right; padding: 50px 0 0 0;}

/*メニュー
--------------------------------------------*/
#menu { background:#133569; }
#nav {
  list-style: none; overflow: hidden; padding: 40px 0; text-align: center; width: 767px; margin: 0 auto
}

#nav li {
   float: left; width: 255px;
}

#nav li a {
  text-decoration: none;
}


/*あらすじ
--------------------------------------------*/
#story { background: url(../images/story_bg.jpg) repeat center 0; text-align:center;}
.story_img {padding:75px 0; margin: 0 auto; position: relative; width: 884px;}
.chara_img_01_sp {position: absolute; top: 23px; left: -21px;}
.chara_img_02 {position: absolute; bottom: 12px; right: -40px;}
.story_btn {padding-bottom:55px;}



/*すたっふ＆きゃすと
--------------------------------------------*/
#staff_cast { background: url(../images/staff_bg.jpg) repeat center 0; text-align:center;}
.staff_ttl {padding:75px 0 25px 0;}
.cast_ttl {padding:75px 0 25px 0;}
.staff_img {margin: 0 auto; position: relative; width: 884px; }
.chara_img_03_sp {position: absolute; top: -76px; right: -39px;}
.chara_img_04_sp {position: absolute; bottom: -155px; left: -21px;}

.cast_img {margin: 0 auto; position: relative; width: 884px; padding-bottom:200px;}
.chara_img_05_sp {position: absolute; bottom:49px; left: -35px;}
.chara_img_06_sp {position: absolute; bottom: 76px; right: -33px;}
.chara_img_07_sp {position: absolute; top: -137px; right: -41px;}



/*きゃらくたー
--------------------------------------------*/
.chara_line_head { background: url(../images/chara_line_head.jpg) repeat-x center; height: 41px;}
.chara_line_bottom { background: url(../images/chara_line_bottom.jpg) repeat-x center; height: 100px;}
#chara { background: url(../images/chara_bg_sp.jpg) no-repeat center 0 ; text-align:center; height: 4884px; position: relative;}

.chara_ttl { padding-top: 40px;}
.chara_list {width: 960px; margin: 0 auto; padding-top: 20px;}
.space {margin-right: 40px;}
.chara_list li {width: 460px; height: 234px; padding-top: 30px; float: left;}


/*きゃらくたー（スマホ用）
--------------------------------------------*/
.chara_sp {margin-top: 30px;}


/*フッター
--------------------------------------------*/
#footer {text-align: center;}
.sp_btn {padding:50px 0 35px 0;}
.copy {font-size:13px; padding-bottom: 35px;}





/*ここ以下、下層ページ用
--------------------------------------------*/

/*下層メニュー
--------------------------------------------*/
#menu_2 { background:#133569;}
#menu_2 .story_logo { float: left; margin-top: -25px; }
#menu_2 .menu_inner{ width:960px; margin: 0 auto; }
#nav_2 {
  list-style: none; overflow: hidden; padding: 30px 0; text-align: center; width: 767px; margin: 0 auto; 
}


.list_01 { float: left; width: 82px; margin: 0 65px;}
.list_02 { float: left; width: 255px; margin-right: 65px;}
.list_03 { float: left; width: 167px;}


#nav_2 li a {
  text-decoration: none;
}


/*各話あらすじ
--------------------------------------------*/
#all_story { background: url(../images/story_bg.jpg) repeat center 0;  margin: 0 auto; padding-top: 50px;}

.story_ttl{ text-align: center; margin: 50px 0;}
.story_box {width: 700px; background-color: #fdf7e3; border-radius: 10px; padding: 70px 50px; color: #7c7770; margin: 0 auto 50px auto;}
.story_number {font-size: 40px; font-weight: bold;}
.story_menber {text-align: right; margin-bottom: 5px;}
.thum_main { margin-top: 35px;}
.thum_under { margin: 15px 0 25px 0; height: 214px;}
.thum_under li {float: left;}
.thum_left {margin-right: 30px;}
.story_txt { font-size: 21px; font-weight: bold; line-height: 150%;}
.story_copy { font_size: 12px; padding-top: 25px;}

.all_story_btn {padding-bottom:55px; text-align: center;}