@charset "utf-8";
/*reset*/
#contents{overflow: hidden}
#main-contents p { line-height:180%}
#main-contents { width:100%; margin:0 !important; padding:0 !important; font-size:16px !important;overflow: hidden}
#editor .wapper-special { width:100%; max-width:none !important; border:none; !important}
#contents { margin:0 !important; padding:0; !important}
#onmyoji2 header { margin:0}
.special-sns{ display:none!important}
#editor .wrapper, #editor #wrapper_P2, #editor #wrapper_P3, #editor #wrapper_P4, #editor #wrapper_P5, #editor #wrapper_P6 { padding:0 0 0em}

/********************* 特設サイト共通 *********************/
#editor .wapper-special{ width:100%; max-width:980px; margin: 0 auto; padding:0; line-height:1.8em; font-size:105%; position:relative; }
#editor .wapper-special img{ width:100%; vertical-align:bottom}
#onmyoji2 figure { margin-bottom:1em;max-width: 250px;margin: 0 auto 0.5em;}
#onmyoji2 figcaption { font-size:.8em}

#main-contents .wapper-special #onmyoji2 h2{ margin:0}
#main-contents .wapper-special #onmyoji2 h3, #main-contents .wapper-special #onmyoji2 h4, #main-contents .wapper-special #onmyoji2 h5, #main-contents .wapper-special{ margin-bottom:1.2em; border:none; text-align:center; letter-spacing: .07em;}
#main-contents .wapper-special{margin-bottom: 0;}
#onmyoji2 nav{border:none; text-align:center; letter-spacing: .07em;}
#main-contents .wapper-special #onmyoji2 h3 { margin-top:0.5em;margin-bottom:1.5em; font-size:200%; position:relative; line-height: 1.2em}
#main-contents .wapper-special #onmyoji2 h3.section_title { position: relative; padding-top:80px}
#main-contents .wapper-special #onmyoji2 h3.section_title::before { position: absolute; content: ""; background-image: url(../img/bg_h_01.png);background-size: auto 100%;width: 80px;height: 80px;top: -20px;left: calc(50% - 40px);z-index: -1;background-repeat: no-repeat;background-position: center;}
#main-contents .wapper-special #onmyoji2 h3.section_title2::before { background-image: url(../img/bg_h_02.png);}
#main-contents .wapper-special #onmyoji2 h3.section_title3::before { background-image: url(../img/bg_h_03.png);}
#main-contents .wapper-special #onmyoji2 h3.section_title4::before { background-image: url(../img/bg_h_04.png);}

#main-contents .wapper-special #onmyoji2 h3 span { font-size: 60%; line-height: 1.2em; }
#main-contents .wapper-special #onmyoji2 h3 img{ width:80%; max-width:300px}
#main-contents .wapper-special #onmyoji2 h4, #main-contents .wapper-special #onmyoji2 h5 { margin-top:.5em; margin-bottom:1.5em; font-size:140%; text-align:center;}
#main-contents .wapper-special #onmyoji2 h5 { font-size:120%; margin-bottom: 0.5em}

#main-contents .wapper-special p + p{ margin-top:1em}
#onmyoji2 .container{ padding:2em 2em ; max-width:980px; margin:0 auto; }
#onmyoji2 a{cursor: pointer}


@media screen and (min-width: 768px){
	#onmyoji2 .container{ padding:5em 2em;}
}

/*全体背景 色関係*/
#onmyoji2 {background: #C6C5C2 url("../img/bg_texture.jpg"); color:#222 ;}
#onmyoji2 .bg_dark{ background: rgba(0,0,0,.1);}
#onmyoji2 .bg_light{ background: rgba(255, 255, 255,.3);}

/*リンク設定*/
#main-contents #onmyoji2 a{color:#000; }
#main-contents #onmyoji2 a:hover{ text-decoration:none; opacity:0.75}
.wrapper .navi a:hover{border-bottom: none; opacity:0.4}

#main-contents #onmyoji2 .link_b a{color:#000; border-bottom:#cc3355 solid 2px}
#main-contents #onmyoji2 .link_b a:hover{ border-bottom:#cc3355 solid 2px; text-decoration:none; opacity:0.8}

/*helper*/
.min{ font-family:'Shippori Mincho', 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#main-contents .wapper-special #onmyoji2 .m_b_2em { margin-bottom:2em !important}
#main-contents .wapper-special #onmyoji2 .m_t_2em { margin-top:2em !important}
.t_center { text-align:center !important}
.t_right { text-align:right !important}
.t_left { text-align:left !important}
.t_small { font-size:70%}
.t_red { color:#f00 }
.mb_2em { margin-bottom:2em}
/*#page-bottom { display:block !important}ページトップへのボタンを強制表示*/


/***** 部品 *****************************************************************/
/*--flexbox--*/
/*基本のflexbox*/
.flex_b { display:flex; flex-wrap: wrap; justify-content: space-between; align-items:flex-start}
.flex_b img { width:100%; height:auto; display:block; margin:0 auto;object-fit: contain; }


	@media screen and (min-width: 768px){
		.flex_b { display:flex; flex-direction:row; justify-content: space-between }
		.flex_b > p,
		.flex_b_imgL > div{ width:48%; }/*.flex_b_imgLは左側に画像がある場合につけるクラス*/

		.flex_b_imgL div { flex-basis:300px; flex-grow:1}
		.flex_b_imgL div:nth-child(2) { flex-grow:6; margin-left:3%}

	}
	@media screen and (min-width: 1024px){
		.flex_b_imgL p,
		.flex_b_imgL > div { flex-basis:150px; }
		.flex_b_imgL div:nth-child(2) { flex-grow:10;}
	}


/********************* loading *********************/
#loader { display: none; position: fixed; top: 50%; left: 50%; z-index: 100;
/*	_position: absolute;*/ /* IE6対策 */
	margin-top: -30px; /* heightの半分のマイナス値 */
	margin-left: -30px; /* widthの半分のマイナス値 */
}
#loader p { width:auto; height:16%; max-width:200px; text-align:center; margin:0 auto; color:#fff; line-height:4em}
#loader p img { height:100%}
#fade {	width: 100%; height: 100%; display: none; background:#C6C5C2 /*url("../img/bg_loading.jpg") repeat scroll right bottom*/; position: absolute; top: 0px; left: 0px; z-index: 50;}

/********************* header *********************/
#onmyoji2 header { width:100%;}
#onmyoji2 #header { position:relative; padding:0; background:url("../img/bg_top.jpg") no-repeat;background-size: cover;  }
#onmyoji2 #header > p { margin:0 auto; padding:0.5em; max-width:600px}
#onmyoji2 #header .main_title_img {width: 90%;margin: 0 auto 0;padding: 1em;display: flex; flex-direction: row-reverse;justify-content: center; align-items: flex-end;}
#onmyoji2 #header .main_title_img p{margin-top:2%;margin-bottom:2%}
#onmyoji2 #header .title_1{max-width: 50%;}
#onmyoji2 #header .title_2{max-width: 13%;}
#onmyoji2 #header .year{max-width: 20%; position: absolute; left: 15%; bottom: 40%;}

@media screen and (min-width: 768px){
	#onmyoji2 #header { padding:0; background-position:left}
	#onmyoji2 #header .title_1{max-width: 25%;}
	#onmyoji2 #header .title_2{max-width: 8%;}
	#onmyoji2 #header .year{max-width: 10%; position: absolute; left: 30%; bottom: 45%;}
}


/********************* navi *********************/
#onmyoji2 nav { background:rgba(0,0,0,.1);}
#onmyoji2 nav ul{ display:flex; justify-content: center; width:100%; max-width:980px; margin:0 auto}
#onmyoji2 nav ul li { padding:0 0em; font-size:130%; text-align:center}
#onmyoji2 nav ul li a{ display:block; border-bottom: none; padding:.3em 1em; color:#cc3355 !important; font-weight:600}
#onmyoji2 nav ul li a:hover{ display:block; background:rgba(255, 255, 255, .3); }
@media screen and (min-width: 768px){
	#onmyoji2 .navi li a{ padding:.5em 1em}
}

/*YouTubeレスポンシブ*/
#main-contents .wapper-special #onmyoji2 .youtube { position:relative; width: 90%; max-width:800px; margin:2em auto }
#main-contents .wapper-special #onmyoji2 .youtube::before { content: ""; display: block; width: 100%; padding-top: 56.25%;}
#main-contents .wapper-special #onmyoji2 .youtube iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}

/*バナー*/
#main-contents .wapper-special .bnr { justify-content:center; width:100%; margin:2em auto 0}
#main-contents .wapper-special .bnr p { width:100%; max-width:500px; margin:0 1em 2em;}
#main-contents .wapper-special .bnr_piccoma { width:90%; max-width:800px; margin: 0 auto}

@media screen and (min-width: 768px){
	#main-contents .wapper-special .bnr { width:90%}
	#main-contents .wapper-special .bnr p { margin: 0 2% 2em; width: 46%;}
}

/********************* newbook *********************/
#onmyoji2 #newbook{ }

#onmyoji2 #newbook .newbook_list li { margin-bottom:2.5em}
#onmyoji2 #newbook .newbook_list li img { width:100%; max-width:300px;}
/*#onmyoji2 #newbookr .newbook_list2 li img {max-width:150px;}*/
#main-contents .wapper-special #onmyoji2 .newbook_list li h5 {margin-bottom:.5em}
#onmyoji2 #newbook .newbook_list figure { width:80%; margin:0 auto}
#onmyoji2 #newbook .newbook_about{text-align: justify}
#onmyoji2 #newbook .newbook_subinfo{line-height: 1.4em}
#main-contents .wapper-special #onmyoji2 #newbook h6 { margin: 2.5em auto 1.5em}
#main-contents .wapper-special #onmyoji2 #newbook h3 { margin: 2.5em auto 1.5em}
#main-contents .wapper-special #onmyoji2 #newbook h3 span{ font-size: 0.78em}
#main-contents .wapper-special #onmyoji2 #newbook h3 img{ width: 100%; max-width: 600px; margin:0 auto}
#onmyoji2 .comment {padding: 0;}
#onmyoji2 .comment li { margin: 0 auto;}
#onmyoji2 .comment li figure{ width: 100%; max-width: 800px; margin: 0 auto;}
#onmyoji2 .comment li img{ width: 100%; max-width: 700px; margin: 5px auto;}
.fw_list{justify-content:space-evenly;align-items:center;padding:0}
.fw_list li{padding: 1.5em;}
#main-contents .wapper-special #onmyoji2 h5.fw_ttl { margin:0 ; font-size:18px; line-height:1.4em; text-align:center}
@media screen and (min-width: 768px){
#main-contents .wapper-special #onmyoji2 #newbook h3 span{ font-size: 0.8em}
#onmyoji2 #newbook .newbook_list li { width:45%; margin-bottom:0em}
/*#onmyoji2 #newbook .newbook_list2 { margin-top:4em}
#onmyoji2 #newbook .newbook_list2 li { width:30%;}*/
#onmyoji2 #newbook .newbook_list figure { width:100%; }
#onmyoji2 #newbook .newbook_list span { font-size:60%}
#main-contents .wapper-special #onmyoji2 #newbook h3 img{ width: 100%; max-width: 700px; margin:0 auto}
.fw_list{justify-content:space-evenly;align-items:center;padding: 0;}
.fw_list img{}
}




/********************* news *********************/
#news { width:100%; justify-content: space-between;}
#news dl{ position:relative; margin:1em 0; text-align:left; font-size:1rem; line-height:1.6em;display:flex; flex-wrap:wrap
}
#news dt{ font-weight:bold;word-break: normal;}
#news dd{ margin-bottom:1.5em;}	

#main-contents .wapper-special #onmyoji2 #news .more{ width: 80%;margin:5% auto;padding:0.3em; border:1px #cc3355 solid; border-radius:3px; background:#cc3355 ;font-size:80%; font-weight:bold; color:#fff !important; text-align:center;}
#news .more a{ display:block; padding:0.3em; border:1px #cc3355 solid; border-radius:3px; background:#cc3355 ;font-size:80%; font-weight:bold; color:#fff !important; text-align:center;}
#news .more a:hover{ color:#FFF; opacity:0.9;border:1px #cc3355 solid; text-decoration:none}

#news dd.finished:after{ content:"　※終了しました"; color:#f00}	
@media screen and (min-width: 768px){
#news { margin-bottom:0 }
#news dt, #news dd{ display:inline-block}
#main-contents .wapper-special #onmyoji2 #news dt{ width:8em ; vertical-align:top; font-weight:bold;}
#main-contents .wapper-special #onmyoji2 #news dd{ width:calc(100% - 9em); margin-bottom:1.4em}	
#main-contents .wapper-special #onmyoji2 #news .more{ margin:0 auto}
}
#news dt:nth-of-type(n + 6),
#news dd:nth-of-type(n + 6){display: none}

/********************* story *********************/
#story { background:rgba(0, 0, 0,.2) url("../img/bg_story.png") no-repeat fixed 0 0 ; } 
#main-contents .wapper-special #onmyoji2 #story .story_lead { width: 100%; max-width: 600px; margin: 5em auto 3em}


/********************* charactor *********************/
#onmyoji2 #charactor{ }

#onmyoji2 #charactor .charactor_chart { width:80%; max-width:500px; margin:1em auto 4em auto !important}
#onmyoji2 #charactor .charactor_list li { margin-bottom:2.5em}
#onmyoji2 #charactor .charactor_list li img { width:80%; max-width:300px;}
#onmyoji2 #charactor .charactor_list2 li img {max-width:150px;}
#main-contents .wapper-special #onmyoji2 .charactor_list li h5 {margin-bottom:.5em}
#onmyoji2 #charactor .charactor_list figure { width:60%; margin:0 auto}
#onmyoji2 #charactor .charactor_list p { text-align: justify}

@media screen and (min-width: 768px){
#onmyoji2 #charactor .charactor_list li { width:45%; margin-bottom:0em}
#onmyoji2 #charactor .charactor_list2 { margin-top:4em}
#onmyoji2 #charactor .charactor_list2 li { width:30%;}
#onmyoji2 #charactor .charactor_list figure { width:100%; }
#onmyoji2 #charactor .charactor_list span { font-size:60%}
}


/********************* author *********************/
#author .author_img { width:60%; margin:1em auto;} 
#author .comment {background:#fff; padding:2em 5% ; border-radius: 1em; font-size:1.2em; position:relative}
#author .comment::after{ content: "";position: absolute; width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid white;top: -12px;left: calc(50% - 15px);}
#author .authors { text-align: justify}
#author .authors_blog { text-align: center}
#main-contents .wapper-special #author h4 { margin:0em 0 0.8em 0; text-align:center}
.txt{ overflow: hidden;}

@media screen and (min-width: 768px){
	#author .author_img{ width:40%; margin:0} 
	#author .comment{ width:57%;}
	#author .comment::after { top: 1.8em; left: -28px; margin-top: 5em; border: 15px solid transparent; border-right-width: 15px; border-right-style: solid;border-right-color: transparent; border-right: 15px solid #fff; z-index: 0;}
	#author .txt{ width:55%;}
	#main-contents .wapper-special #author .authors_official { width:60%; margin:2em auto }
}


/********************* Twitter *********************/
.twit{width:100%; max-width: 560px; margin:2em auto 0 auto;}
.twitter-timeline{ height:250px !important}
#onmyoji2 .SandboxRoot.env-bp-430 .timeline-Tweet-text { font-size:16px !important}

@media screen and (min-width: 768px){
	.wapper-special ul.movie_twit li { width:48%}
}




/********************* special *********************/
#special {background:rgba(0, 0, 0,.2) url("../img/bg_section_title.png") no-repeat fixed 0 0}
#main-contents .wapper-special #onmyoji2 .link_special { width:80%; max-width:800px; margin:3em auto 2em}
#main-contents .wapper-special #onmyoji2 .sp_contents_banner{width:100%;margin:2em auto;}
#main-contents .wapper-special #onmyoji2 .sp_contents_banner img{filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.2));}

#main-contents .wapper-special #onmyoji2 .sp_slider{margin:0 auto 100px}

@media screen and (min-width: 768px){
#main-contents .wapper-special #onmyoji2 .sp_contents_banner{width:80%;margin:4em auto;}
}
/********************* series *********************/
#series { }
#main-contents .wapper-special #onmyoji2 #series.list,
#main-contents .wapper-special #onmyoji2 #series ul.list { display:flex; flex-wrap:wrap; justify-content:center; margin-bottom: 20px }
#main-contents .wapper-special #onmyoji2 #series ul.list li { width:40%; font-size: 14px; margin:15px 5%}
#main-contents .wapper-special #onmyoji2 #series ul.list p { text-align:left}

#main-contents .wapper-special #onmyoji2 #series figure{ margin-bottom:0.8em; }

#main-contents .wapper-special #onmyoji2 #series figcaption { position:absolute; top:0px; left:0; width:173px; height:auto; min-height:259px; margin:0; padding:5%; color:#fff; opacity:0; line-height:1.5em; transition: all 0.2s ease 0s; z-index: 3; text-align:left; background: rgba(0,0,0,.8) ; font-size:1em;}
#main-contents .wapper-special #onmyoji2 #series figcaption a { color:#fff; font-size:1em !important}
#main-contents .wapper-special #onmyoji2 #series figure:hover figcaption { opacity: 1 }

#main-contents .wapper-special #onmyoji2 #series .list li h3 { margin:0 ; font-size:18px; line-height:1.4em; text-align:left}
#main-contents .wapper-special #onmyoji2 #series .list li h3.new::after { content:"new!"; margin-left:.5em; color: #e60019; font-weight: bold; font-size: 60%; }


@media screen and (min-width: 768px){
	#main-contents .wapper-special #onmyoji2 #series .list, ul.list { justify-content:flex-start}
	#main-contents .wapper-special #onmyoji2 #series ul.list li{ width:20%; margin:15px 2%}

}


/********************* footer *********************/
#new_book{ padding:4em 1.5em;background:#2a1820 url("../img/bg_footer.png") no-repeat scroll left top/cover; color:#FFF}
#main-contents .wapper-special #onmyoji2 .footer_book{ padding:4em 0; flex-direction:column ; }
#main-contents .wapper-special #onmyoji2 .footer_book .img_book { display:block; width:80%; max-width:250px; margin:0 auto 1em; border:1px solid #555}

#main-contents .wapper-special #onmyoji2 .footer_book h3 { margin-top:0; text-align:center;font-size: 150%;}
#main-contents .wapper-special #onmyoji2 .footer_book h3 span.name { display:block; margin-top:1em}

#main-contents .wapper-special #onmyoji2 .footer_book .book { margin:0.5em auto 0}
#main-contents .wapper-special #onmyoji2 .footer_book .book p{ margin:0 auto 1em auto; text-align:center;}
#main-contents .wapper-special #onmyoji2 .footer_book a.button { display:block; width:80%; margin:0 auto; padding:3% 0; text-align:center; font-weight:bold;background:#cc3355; color:#fff;font-size: 20px;}
#main-contents .wapper-special #onmyoji2 .footer_book a.button:hover{opacity: .8;}	 

@media screen and (min-width: 768px){
	#main-contents .wapper-special #onmyoji2 .footer_book{ flex-direction:row; justify-content:center;align-items: center;}
	#main-contents .wapper-special #onmyoji2 .footer_book h3{    margin-top: 0; text-align: center;font-size: 200%;}
	#main-contents .wapper-special #onmyoji2 .footer_book .img_book { width:30%; margin:0 1em; padding:0em}
	#main-contents .wapper-special #onmyoji2 .footer_book .book { width:60%; max-width:550px; margin:0 1em}

	#new_book{ padding:4em 1.5em;background:#2a1820 url("../img/bg_footer.png") no-repeat scroll right top/contain; color:#FFF}
}
  


/********************* bxslider *********************/
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {bottom:-48px}
.bx-wrapper{margin:0 auto}