@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:#012;
	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:#003;
	border-radius:32px;
	cursor:pointer;
}

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

#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:104px;
	height:23px;
	float:left;
	border-left:1px #003 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_head{background-position:0 3px;}
#menu ul li.menu_bt{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_title_en{width:14.33%;top:14.15%;left:26.66%;}
#head_wrap #head h2#head_lead{width:12.5%;right:3.33%;}
#head_wrap #head h2#head_book_01{width:18%;right:6.66%;top:55.5%;}
#head_wrap #head h2#head_pv{width:18.66%;left:3.33%;top:74.77%;}

#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_01 a{background-color:inherit;background-size:100%;}
#head_wrap #head h2#head_book_01 a{background-image:url("../../img/bt/he_book_02_bg.png");}



/* =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:10%;background-color: #c30;background-size:cover;}
.cont_wrap:nth-child(odd) .cont_head{background-image:url("../../img/bg/al_conthead.png");}
.cont_wrap:nth-child(even) .cont_head{background-image:url("../../img/bg/al_contbottom.png");}
.cont_wrap:nth-child(odd) .cont_main{background:#003;}
.cont_wrap:nth-child(odd) .cont_main .cont h2 img{padding-top: 1%;}
.cont_wrap:nth-child(even) .cont_main{background:#c30;}

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

.cont_wrap .cont h2 img{margin:0 auto;width:66.66%; display: block;}
.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{display:flex;flex-wrap:wrap;justify-content:space-between;}
.cont_wrap .cont ul li{margin-top:4%;text-align:justify;}
.cont_wrap .cont ul li img,
.cont_wrap .cont dl dd 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,
.cont_wrap .cont dl dd img{opacity:1;display:block;}
.cont_wrap .cont ul li a img:hover,
.cont_wrap .cont dl dd a img:hover{opacity:0.66;}

.cont_wrap.cont_story{margin:-8% 0 0 0;}
.cont_wrap.cont_story .cont_head{padding-top:10%;background:url("../../img/bg/al_conthead.png") #fff;background-size:cover;}
.cont_wrap.cont_story .cont p{margin:3% auto 0 auto;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%;}

.cont_wrap.cont_character .cont ul li h3{margin-top:24px;font-size:32px;}
.cont_wrap.cont_character .cont ul li p{margin-top:16px;color:#fc9;letter-spacing:0.2em}

.cont_wrap.cont_book .cont ul{justify-content: space-around;}
.cont_wrap.cont_book .cont ul li{ position: relative;;}
.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 div img{
	width: 50%;
	background: #003;
	border-radius: 50%;
	display: block;
	position: absolute;
	right: -40%;
	top: 30%;
}
.cont_wrap.cont_book .cont ul li div img:hover{background: #c30; opacity: 1;}
.cont_wrap.cont_book .cont ul li.bo_head img,
.cont_wrap.cont_book .cont ul li div img{box-shadow:none;}

.cont_wrap.cont_special .cont div{text-align: center; color: #c4af87;}
.cont_wrap.cont_special .cont dl{margin-top: 4%;}
.cont_wrap.cont_special .cont dt{display: flex;align-items: center;}
.cont_wrap.cont_special .cont dl dt h3,
.cont_wrap.cont_special .cont dl dt p{display: inline;}
.cont_wrap.cont_special .cont dl dt h3{margin-right: 0.33em;font-size: 32px;}
.cont_wrap.cont_special .cont dl dt h4{
	padding: 4px 10px;
	margin-right: 0.5em;
	color: #c4af87;
	text-decoration: none;
	background: #003;
	display: inline-block;
}
.cont_wrap.cont_special .cont dl dt p{margin-right: 1em;}
.cont_wrap.cont_special .cont dl dt a{
	padding: 4px 10px;
	color: #c4af87;
	text-decoration: none;
	border: solid 1px #c4af87;
	display: inline-block;
}
.cont_wrap.cont_special .cont dl dt a:hover{background-color: #003;}
.cont_wrap.cont_special .cont dl dd{margin-top: 2%;margin-bottom: 2%;padding-bottom: 2%;border-bottom:solid 1px #d64;}
.cont_wrap.cont_special .cont dl dd img{box-shadow:0px 2px 8px rgba(1,0,0,0.5);}

.cont_wrap.cont_series .cont{padding-bottom: 24px;}
.cont_wrap.cont_series .cont ul{margin-top:2%;width: 66%; margin-left:auto; margin-right:auto;}
.cont_wrap.cont_series .cont ul li{width:47.5%;}
.cont_wrap.cont_series .cont ul li a,
.cont_wrap.cont_series .cont ul li img{border-radius: 3px;}
address{
	margin-top:4%;
	color:#c4af87;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-style:normal;
	text-align:center;
	letter-spacing:0.25em;
}

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

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

}



/* =modal
-------------------------------------------------------------- */

button#modaal-close.modaal-close:after,
button#modaal-close.modaal-close:before{
	background:#ccc;
}

button#modaal-close.modaal-close:focus:after,
button#modaal-close.modaal-close:focus:before,
button#modaal-close.modaal-close:hover:after,
button#modaal-close.modaal-close:hover:before{
	background:#666;
}



/* =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);
}