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

/* =tags
-------------------------------------------------------------- */

body,h1,h2,h3,h4,ul,li,dl,dt,dd,table,tr,th,td,p,a,div,span,address,hr,time{margin:0;padding:0;}
ul,li{list-style:none;}
address,em{font-style:normal;}
div,img,a{border:none;}

html{width:100%;height:100%;overflow-y:scroll;}

body{
	width:100%;
	height:100%;
	color:#024;
	font-family:"Yu Gothic", "���S�V�b�N", YuGothic, "���S�V�b�N��", "���C���I", Meiryo, "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif;
	font-size:14px;
	background:#fff;
}

p{line-height:175%;}

a{color:#510;}
a:link{outline:none;}
a:visited{outline:none;}
a:hover{color:#f74;outline:none;}
a:active{outline:none;}

a,
img{transition:0.3s ease-in-out;}









/* =btop
-------------------------------------------------------------- */

#btop{
	width:64px;
	height:64px;
	position:fixed;
	right:24px;
	bottom:24px;
	display:none;
}

#btop a{
	width:64px;
	height:64px;
	display:block;
	background:#012;
	border-radius:32px;
	cursor:pointer;
}

#btop a:hover{background:#246;}

#btop_arrow{fill:#fff;}





/* =menu
-------------------------------------------------------------- */

#menu_wrap{
	width:100%;
	height:72px;
	background-color:rgba(255,255,255,0);
	transition:0.3s ease-in-out;
	position:fixed;
	z-index:150;
}

#menu{
	margin:0 auto;
	width:100%;
	min-width:800px;
	max-width:1200px;
	height:72px;
	position:relative;
}

#menu ul{margin:24px 0 0 0;position:absolute;right:40px;}
#menu ul:first-child{left:40px;}

#menu ul li{
	width:100px;
	height:23px;
	float:left;
	border-left:1px #420 solid;
	cursor:pointer;
	position:relative;
}
#menu ul li:first-child{border:none;}
#menu ul li a img{width:100%;height:auto;}
#menu ul li a+img{width:60px; position:absolute;bottom:-16px;left:21px;}

#menu+ul li{width:115px;}

#menu ul li a{opacity:1;}
#menu ul li a:hover{opacity:0.5;}

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

#menu ul li.menu_01{background-position:0 3px;}
#menu ul li.menu_02,
#menu ul li.menu_03,
#menu ul li.menu_04,
#menu ul li.menu_05,
#menu ul li.menu_06,
#menu ul li.menu_07,
#menu ul li.menu_08,
#menu ul li.menu_09{background-position:0 1px;}

}

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

#menu ul li{width:115px;height:26px;}
#menu+ul li{width:128px;}
#menu ul li a+img{width:83px; position:absolute;left:16px;}

}

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

#menu ul li{width:130px;height:29px;}
#menu+ul li{width:144px;}
#menu ul li a+img{width:94px; position:absolute;left:18px;}

}

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

#menu ul li{width:144px;height:32px;}
#menu+ul li{width:160px;}
#menu ul li a+img{width:104px; position:absolute;left:20px;}

}





/* =head
-------------------------------------------------------------- */

#head_wrap{
	width:100%;
	min-width:800px;
	height:auto;
	background:#fff;
	background-size:auto 100%;
}

#head_wrap #head{
	margin:0 auto;
	width:100%;
	min-width:800px;
	max-width:1200px;
	height:auto;
	position:relative;
}

#head_wrap #head img{width:100%;height:auto;display:block;}
#head_wrap #head h1,
#head_wrap #head h2,
#head_wrap #head p,
#head_wrap #head a{position:absolute;top:0;z-index:50;}
#head_wrap #head h1#head_title{width:30%;left:0;}
#head_wrap #head h2#head_lead{width:12.5%;right:0;}
#head_wrap #head h2#head_lead_02{width:3.33%;left:27.33%;top:10%;}
#head_wrap #head h2#head_book_03{width:17.33%;right:20.83%;top:13.07%;}
#head_wrap #head h2#head_book_04{width:14.5%;right:12.16%;top:10%;}
#head_wrap #head h2#head_book_05{width:14.5%;right:12.16%;top:33.84%;}
#head_wrap #head h2#head_book_06{width:17.33%;left:8%;top:70.8%;}
#head_wrap #head a#head_comment{width:20.33%;right:3.33%;top:57.12%;z-index:75;}
#head_wrap #head a#head_banner{width:20%;right:3.33%;top:27.54%;z-index:75;}
#head_wrap #head p#head_comic{width:66.66%;left:16.66%;top:69.23%;}
#head_wrap #head p#head_comic_lead{width:7.33%;left:11%;top:71.53%;z-index:75;}
#head_wrap #head a{background:#fff;display:block;}
#head_wrap #head a img{opacity:1;}
#head_wrap #head a img:hover{opacity:0.5;}
#head_wrap #head h2#head_book_04 a,
#head_wrap #head h2#head_book_05 a,
#head_wrap #head h2#head_book_06 a{background-color:inherit;background-size:100% 100%;}
#head_wrap #head h2#head_book_04 a{background-image:url("../../img/bt/he_book_06_bg.png");}
#head_wrap #head h2#head_book_05 a{background-image:url("../../img/bt/he_book_c02_bg.png");}
#head_wrap #head h2#head_book_06 a{background-image:url("../../img/bt/he_book_c03_bg.png");}
#head_wrap #head a#head_va_ban{width:20%;right:3.33%;top:38.16%;z-index:75;}
#head_wrap #head a#head_tensei_ban{width:20%;right:3.33%;top:15.93%;z-index:75;}
#head_wrap #head p#head_title_en{width:18%;left:15.33%;top:61.95%;z-index:75;}




/* =cont
-------------------------------------------------------------- */

.content_wrap{width:100%;}

.cont_wrap{
	margin:0 auto;
	width:100%;
	min-width:800px;
	clear:both;
}

.cont_wrap .cont_head{width:100%;padding-top:5%;}
.cont_wrap:nth-child(odd) .cont_head{background:url("../../img/bg/al_conthead_a.png") #038;background-size:cover;}
.cont_wrap:nth-child(even) .cont_head{background:url("../../img/bg/al_conthead_b.png") #903;background-size:cover;}

.cont_wrap .cont_main{background:#903;}
.cont_wrap:nth-child(even) .cont_main{background:#038;}

.cont_wrap .cont{
	margin:0 auto;
	padding:0 4% 6% 4%;
	width:92%;
	min-width:736px;
	max-width:1200px;
	color:#fff;
	line-height:175%;
}

.cont_wrap .cont h2 img{margin:6% 0 0 27.33%;width:45.33%;}
.cont_wrap .cont h3{font-family: "��������", "Yu Mincho", YuMincho, "�q���M�m���� Pro", "Hiragino Mincho Pro", "MS P����", "MS PMincho", serif;}
.cont_wrap .cont ul{margin-top:4%;display:flex;flex-wrap:wrap;justify-content:space-between;}
.cont_wrap .cont ul li{text-align:justify;}
.cont_wrap .cont ul li img{width:100%;}
.cont_wrap .cont ul li img:first-child{box-shadow:0px 2px 8px rgba(1,0,0,0.5);}
.cont_wrap .cont ul li a{background:#fff;display:block;}
.cont_wrap .cont ul li a img{opacity:1;display:block;}
.cont_wrap .cont ul li a img:hover{opacity:0.66;}

.cont_wrap.cont_story{margin:-10% 0 0 0;}
.cont_wrap.cont_story .cont_head{padding-top:7.5%;background:url("../../img/bg/al_conthead_al.png") #fff;background-size:cover;}
.cont_wrap.cont_story .cont h2 img{margin-top:9%;}
.cont_wrap.cont_story .cont p,
.cont_wrap.cont_comment .cont p{margin:2.5% 0 0 16.66%;width:66.66%;line-height:175%;letter-spacing:0.25em;text-align:justify;}

.cont_wrap.cont_character .cont ul li,
.cont_wrap.cont_book .cont ul li{width:22%;margin-left:4%;}
.cont_wrap.cont_character .cont ul li:first-child,
.cont_wrap.cont_book .cont ul li:first-child{margin-left:0;}
.cont_wrap.cont_character .cont ul li h3{margin-top:24px;font-size:32px;line-height:50%;}
.cont_wrap.cont_character .cont ul li p{margin-top:16px;color:#dba;letter-spacing:0.2em}

.cont_wrap.cont_book.cont_book_all .cont ul li{width:14%;margin-left:3.2%;}
.cont_wrap.cont_book.cont_book_all .cont ul li:first-child{margin-left:0;}

.cont_wrap.cont_illust .cont ul li{width:31%;margin-left:3.5%;}
.cont_wrap.cont_illust .cont ul li:first-child{margin-left:0;}

.cont_wrap.cont_comicalize .cont p{margin-top:24px;width:100%;background: #fff;}
.cont_wrap.cont_comicalize .cont p a{opacity:1;}
.cont_wrap.cont_comicalize .cont p a:hover {opacity:0.5;}
.cont_wrap.cont_comicalize .cont p a img{width:100%; display: block;}

.cont_wrap.cont_book .cont ul li h3{margin-top:12px;font-size:24px;font-weight:normal;letter-spacing: -0.05em;}
.cont_wrap.cont_book .cont ul li p{color:#c4af87;}
.cont_wrap.cont_book .cont ul li.bo_head img{box-shadow:none;}

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

.cont_wrap.cont_story{margin:-90px 0 0 0;}

}








/* =foot
-------------------------------------------------------------- */

#foot{
	padding:24px 0 0 0;
	width:100%;
	min-width:800px;
	height:32px;
	background:#012;
}

address{
	color:#c4af87;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-style:normal;
	text-align:center;
	letter-spacing:0.25em;
}





/* =common
-------------------------------------------------------------- */

.red{color:#f66;}
.green{color:#8a0;}
.yellow{color:fb1;}
.black{color:#642;}

.sh{
	box-shadow:2px 2px 6px rgba(1,0,0,0.25);
	-moz-box-shadow:2px 2px 6px rgba(1,0,0,0.25);
	-webkit-box-shadow:2px 2px 6px rgba(1,0,0,0.25);
}





/* =clearfix
-------------------------------------------------------------- */

.clearfix:after {
	content:" ";
	display:block;
	clear:both;
}