@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{
	padding-top: 60px;
	width: 100%;
	height: 100%;
	color: #fff;
	font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
	font-size: 14px;
}

p{line-height: 200%;}
img{display: block;}

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;}





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

#menu{
	width: 100%;
	height: 60px;
	transition: 0.3s ease-in-out;
	position: fixed;
	top:0;
	z-index: 1000;
	background: #012;
}

#menu ul{
	margin: 0 auto;
	min-width: 800px;
	max-width: 1200px;
	height: 60px;
}

#menu ul li{
	width: 13.333%;
	height: 60px;
	float: left;
	cursor: pointer;
	display: flex;
	align-items: center;
}
#menu ul li:first-child{margin-left: 10%;}
#menu ul li a img{width: 100%; height: auto; display: block;}

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





/* =side
-------------------------------------------------------------- */

#side{
	width: 100%;
	min-width: 800px;
	position: relative;
}

#side img {width: 100%}

#side div{
	width: 5%;
	min-width: 40px;
	max-width: 60px;
	height: 446px;
	position: fixed;
	z-index: 200;
	top: 180px;
}

#side #side_tp{left: 0;}
#side #side_se{right: 0;}

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

	#side div{position: absolute;;}

}



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

#head_wrap{
	width: 100%;
	min-width: 800px;
	background: #fff url(../../img/bg/gl_bg.png) 50% 0;
	background-size: 100%;
	position: relative;
}

#head_wrap img,
#head_wrap h1{position: absolute; top: 0;}

#head_wrap img{width: 100%; display: block;}

#head_wrap h1{width: 20%; z-index: 800;}
#head_wrap h1#he_tp_logo{left: 0;}
#head_wrap h1#he_se_logo{right: 0;}
#head_wrap img#he_copy{z-index: 600;}
#head_wrap img#he_main{z-index: 400;}

#head_wrap img:first-child{position: relative;;}





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

.content_wrap{
	width: 100%;
	min-width: 800px;
	background: url(../../img/bg/gl_bg.png) 50% 0;
	background-size: 100%;
	position: relative;
}

.content_wrap p{text-align: justify;}
.content_wrap img{width: 100%;}
.content_wrap h1{margin-bottom: 64px;}

.cont_wrap{
	margin: 0 auto;
	padding-top: 160px;
	width: 90%;
	min-width: 720px;
	max-width: 1080px;
	clear: both;
}

.cont_wrap:first-child{padding-top: 100px;}
.cont_wrap .cont_tp,
.cont_wrap .cont_se{width: 50%; float: left;}
.cont_wrap ul li a{background: #fff; display: block;}
.cont_wrap ul li a img{opacity:1;}
.cont_wrap ul li a img:hover{opacity:0.66;}



.cont_wrap#cont_story p,
.cont_wrap#cont_comment p,
.cont_wrap#cont_comment h2{width: 66.666%;}
.cont_wrap#cont_story .cont_tp p,
.cont_wrap#cont_comment .cont_tp p,
.cont_wrap#cont_comment .cont_tp h2{margin-left: 11.111%;}
.cont_wrap#cont_story .cont_se p,
.cont_wrap#cont_comment .cont_se p,
.cont_wrap#cont_comment .cont_se h2{margin-left: 22.222%;}
.cont_wrap#cont_comment p{margin-top: 12px;}



.cont_wrap#cont_character li,
.cont_wrap#cont_gallery li{width: 42.222%; float: left;}
.cont_wrap#cont_character .cont_tp li,
.cont_wrap#cont_gallery .cont_tp li{margin-right: 4.444%}
.cont_wrap#cont_character .cont_se li:nth-child(odd),
.cont_wrap#cont_gallery .cont_se li:nth-child(odd){margin-left: 11.111%; margin-right: 4.444%;}

.cont_wrap#cont_character li+li+li{margin-top: 48px;}
.cont_wrap#cont_character h2{
	margin-top: 24px;
	font-size: 28px;
	font-family: 'Yu Mincho', YuMincho, serif;
	line-height: 100%;
}
.cont_wrap#cont_character .cont_se li:nth-child(3) h2{letter-spacing: -0.15em;}
.cont_wrap#cont_character p{margin-top: 12px; color: rgba(255,255,255,0.75);}



.cont_wrap#cont_books{
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}
.cont_wrap#cont_books div{background: #012;}

.cont_wrap#cont_books div h1,
.cont_wrap#cont_books div ul
{
	margin: 0 auto;
	padding-top:100px;
	width: 90%;
	min-width: 720px;
	max-width: 1080px;
	clear: both;
	background: #012;
}

.cont_wrap#cont_books div ul{padding-bottom: 160px;}
.cont_wrap#cont_books div ul li{
	margin-left: 2.222%;
	width: 23.333%;
	float: left;
}
.cont_wrap#cont_books div ul li:first-child{margin-left: 0;}
.cont_wrap#cont_books div ul li h2{margin-top: 10px; font-size: 18px; font-family: 'Yu Mincho', YuMincho, serif;}
.cont_wrap#cont_books div ul li p{margin-top: -4px; font-size: 12px; color: #c0a888;}





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

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

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





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

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