@charset "utf-8";

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}.clearfix:after {content: "";clear: both;display: block;height:0;visibility:hidden;}h2, h3, dl, dt, dd, ol, ul, li {list-style:none; margin:0; padding:0;}img {vertical-align: bottom;}a:link, a:visited, a:hover, a:active {border-style:none;text-decoration: none;color:#0a9be6;}a:focus {outline:none;}
body {
	position:relative;
	font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS P Gothic",sans-serif;
	color:#333;
	font-size: 14px;
	width:100%;
	height:100%;
	background-color:#fff;
	background-image:url(../img/bg.png);
	background-repeat:repeat;
	background-position:top center;
	background-attachment:fixed;
	text-align:center;
}
#KVyuika, #KVchloe, #KVsnow, #KVstar, #esumaLogo, #title, #author, #release, #movie, #copy, #topics2, #topics, #update {position:absolute;}
#topicsLink, #topics, #sample, #buy, #retailer, #esuma, #kyoani, #pagetop, #headerLink, #footerLink, #releaseLink, #xmasLink {display:block;}
#loader {
	display:none;
	background-image:url(../favicon-32x32.png);
	position:fixed;
	top:50%;
	left:50%;
	width:32px;
	height:32px;
	margin-left:-16px;
	z-index:5000;
	-webkit-animation: loading 2s infinite linear;animation: loading 2s infinite linear;
}
@-webkit-keyframes loading {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(-360deg);}}
@keyframes loading {0% {transform: rotate(0deg);}100% { transform: rotate(-360deg);}}
#fade {
	display:none;
	width:100%;
	height:100%;
	background-color:#fff;
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
}
#star{
	position:absolute;
	background-image:url(../img/side_star.png);
	background-position:top center;
	background-repeat:repeat-y;
	background-attachment:fixed;
	width:100%;
	height:100%;
	z-index: 1;
}
#contents{
	width:1100px;
	margin:0 auto;
	position: relative;
	z-index: 10;
	padding-bottom: 100px;
}
#header{
	position:relative;
	height: 1060px;
}
#KV{
	background-image:url(../img/KV.jpg);
	background-size:100% 100%;
	width:1080px;
	height:1060px;
}
#title{
	background-image:url(../img/top_logo.png);
	background-size:100% 100%;
	width:233px;
	height:493px;
	top: 30px;
	right: 40px;
}
#copy{
	background-image:url(../img/top_catch.png);
	background-size:100% 100%;
	width:68px;
	height:693px;
	left: 40px;
	top: 30px;
}
#author{
	background-image:url(../img/top_writer.png);
	background-size:100% 100%;
	width:207px;
	height:88px;
	right: 40px;
	top: 770px;
}
#release{
	background-image:url(../img/top_release.png);
	background-size:100% 100%;
	width:472px;
	height:146px;
	bottom: 39px;
	left: 40px;
}
#update{
	background-color:#fff;
	background-image:url(../img/top_update.png);
	background-size:25px 25px;
	background-repeat:no-repeat;
	background-position: 12px 16px;
	border:2px solid #0a9be6;
	color:#0a9be6;
	width:510px;
	height:140px;
	border-radius:10px;
	bottom: 40px;
	right: 40px;
	overflow:auto;
}
/*#KVyuika{
	background-image:url(../img/top_KV_yuika.png);
	background-size:100% 100%;
	width:1100px;
	height:1140px;
}
#KVchloe{
	background-image:url(../img/top_KV_chloe.png);
	background-size:100% 100%;
	width:1100px;
	height:1140px;
}
#KVsnow{
	background-image:url(../img/top_KV_snow.png);
	background-size:100% 100%;
	width:1100px;
	height:1140px;
}*/
/*#KVstar{
	background-image:url(../img/top_KV_star.png);
	background-size:100% 100%;
	width:1100px;
	height:1140px;
}
#esumaLogo{
	background-image:url(../img/top_esma.png);
	background-size:100% 100%;
	width:141px;
	height:26px;
	top: 25px;
	left: 20px;
}
#topics2{
	background-image:url(../img/top_topics3.png);
	background-size:100% 100%;
	width:160px;
	height:160px;
	right: 60px;
	bottom: 264px;
}
.C89PV {
	background-image:url(../img/top_topics5.png);
	background-size:100% 100%;
	width:199px;
	height:199px;
	top: 10px;
	left: 169px;
}
*/
#update dl {
	display:-webkit-box;display:-webkit-flex;display: flex;
	-webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content: flex-start;
	padding: 0 0 16px 0;
	margin:16px 20px 0 50px;
	border-bottom: 1px solid #0A9BE6;
}
#update dl:last-child {border:none;}
#update dd {padding-left: 12px;text-align: left;}
#update dd a {text-decoration: underline;}
#update dd a:hover {text-decoration:none;}

#topicsWrap, #introWrap, #worldWrap, #charaWrap, #specialWrap, #booksWrap {overflow: hidden;}
#KV, .topicsMain, .introMain, .worldMain, .charaList, .specialList, .booksList {margin:0 auto;}
.topicsHead{
	background-image:url(../img/topics_h.png);
	background-size:100% 100%;
	width:1100px;
	height:70px;
	margin: -10px auto 30px;
	z-index: 2;
	position: absolute;
}
.topicsMain{
	width:1020px;
	margin-top: 90px;
}
.topicsList, .galleryList {
	display:-webkit-box;display:-webkit-flex;display: flex;
	-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content: space-between;
}
.topicsList a {
	display:block;
	width:330px;
	height:204px;
}
.topicsList a img {width:100%;height:100%;}
.introHead{
	background-image:url(../img/intro_h.png);
	background-size:100% 100%;
	width:1100px;
	height:70px;
	margin: 60px auto 30px;
}
.introMain{
	background-image:url(../img/intro.jpg);
	background-size:100% 100%;
	width:1020px;
	height:1104px;
}
.worldHead{
	background-image:url(../img/world_h.png);
	background-size:100% 100%;
	width:1100px;
	height:70px;
	margin: 60px auto 20px;
}
.worldMain{
	background-image:url(../img/world_text.png);
	background-size:100% 100%;
	width:721px;
	height:267px;
}

.charaHead {
	background-image:url(../img/chara_h.png);
	background-size:100% 100%;
	width:1100px;
	height:70px;
	margin: 60px auto 20px;
}
.charaList {
	font-size:0;
}
.chara01{
	background-image:url(../img/chara_naoto.png);
	background-size:100% 100%;
	width:500px;
	height:360px;
	margin: 0 auto 5px;
}
.chara02, .chara03, .chara04, .chara05, .chara06, .chara07{
	display: inline-block;
	margin: 5px;
}
.chara02{
	background-image:url(../img/chara_snow.png);
	background-size:100% 100%;
	width:500px;
	height:360px;
}
.chara03{
	background-image:url(../img/chara_chloe.png);
	background-size:100% 100%;
	width:500px;
	height:360px;
}
.chara04{
	background-image:url(../img/chara_yuika.png);
	background-size:100% 100%;
	width:500px;
	height:360px;
}
.chara05{
	background-image:url(../img/chara_machina.png);
	background-size:100% 100%;
	width:500px;
	height:360px;
}
.chara06{
	background-image:url(../img/chara_syogo.png);
	background-size:100% 100%;
	width:500px;
	height:360px;
}
.chara07{
	background-image:url(../img/chara_masataka.png);
	background-size:100% 100%;
	width:500px;
	height:360px;
}
.specialHead{
	background-image:url(../img/special_h.png);
	background-size:100% 100%;
	width:1100px;
	height:70px;
	margin: 60px auto 20px;
}
.specialTextHead {
	font-size:24px;
	color:#f34f85;
	border-bottom:1px solid #f34f85;
	padding-bottom: 10px;
	margin-bottom: 20px;
	font-weight: normal;
}
.specialList {
	background-color:rgba(255,255,255,.8);
	border: 1px dotted #f34f85;
	width:1020px;
	overflow: hidden;
	padding: 30px;
	text-align: left;
	margin-bottom: 20px;
}
.specialList > p {
	margin:0 0 15px 15px;;
	text-align: left;
}
.wallPaper {
	overflow: hidden;
	clear: both;
	margin-left: 15px;
}
.wallPaperThumb {
	display: block;
	width: 450px;
	float: left;
}
.wallPaperList {
	display: block;
	margin-left: 480px;
}
.wallPaperList dt {
	font-size: 18px;
	color: #f34f85;
}
.wallPaperList dd {
	margin: 10px 0 30px;
}
.wallPaperList dd a {
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	background: #0a9be6;
	border: solid 1px #0a9be6;
	padding: 5px 10px;
	color: #FFF;
	margin-right: 10px;
}
.icon {
	width: 960px;
	font-size: 0;
	margin-left: 15px;
}
.icon a {
	display:inline-block;
	width:170px;
	height:170px;
	margin: 0 10px 10px 0;
}
.icon a img {width:100%;height:100%;}
.movieList {
	width:920px;
	margin:0 auto;
}
.movieDetail {
	width:420px;
	height:300px;
	margin: 0 20px;
	float:left;
}
.movieList p {
	text-align:center;
	width:420px;
}
.galleryList {
	width: 930px;
	margin: 0 auto;
	text-align: center;
}
.galleryList a {
	display:block;
	width:300px;
	height:270px;
}
.galleryList p {
	text-align:center;
}

/*xmas special
#xmasHead{
	background-image:url(../img/xmas_h.png);
	background-size:100% 100%;
	width:1100px;
	height:70px;
	margin: 60px auto 20px;
}
#xmasWrap {
	background-color:#fff;
	padding: 40px 44px;
	width: 1020px;
}
#xmasWrap p {
	margin:0 0 30px;
	text-align: left;
}
#xmasLink {
	width: 356px;
	height: 60px;
	margin-bottom: 30px;
}
#xmasWrap .xmasText {
	color:#f34f85;
	margin-bottom: 10px;
}
.xmasTopText {
	color:#f34f85;
	font-size:20px;
	font-weight:bold;
	margin-bottom:60px;
}
*/
.booksHead{
	background-image:url(../img/books_h.png);
	background-size:100% 100%;
	width:1100px;
	height:70px;
	margin: 60px auto 20px;
}
.booksList{
	display:-webkit-box;display:-webkit-flex;display: flex;
	-webkit-box-lines:multiple;-webkit-flex-wrap:wrap;flex-wrap: wrap;
	width:1020px;
	overflow:hidden;
	padding: 30px;
	text-align: left;
	margin-bottom: 20px;
	background-color:rgba(255,255,255,.8);
	border: 1px dotted #f34f85;
}
.booksCover{
	width:420px;
	height:585px;
	float: left;
}
.booksInfo {
	margin-left:28px;
	width:510px;
}
.bookTextHead {
	font-size:24px;
	border-bottom:1px solid #333;
	padding-bottom: 15px;
	margin-bottom: 20px;
	font-weight: normal;
}
.bookTextHead span {
	display:block;
	font-size:14px;
}
.bookDetails {
	font-size:12px;
	margin: 30px 0;
}
.sample, .buy, .retailer {
	width:320px;
	height:60px;
}
.buy img, .retailer img {margin-top: 10px;}
#copyright{
	font-size: 12px;
	margin: 60px 0 20px;
}
#footer, #share, #link {
	display:-webkit-box;display:-webkit-flex;display: flex;
	-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content: space-between;
	-webkit-box-align:center;-webkit-align-items: center;align-items: center;
}
#share{width: 90px;}
#twitter, #facebook {
	background-size:100% 100%;
	cursor:pointer;
}
#twitter{
	width:37px;
	height:30px;
	background-image:url(../img/share_twitter.png);
}
#facebook{
	width:30px;
	height:30px;
	background-image:url(../img/share_facebook.png);
}
#link {width:400px;}
#esuma{
	background-image:url(../img/link_esuma.png);
	background-size:100% 100%;
	width:70px;
	height:60px;
}
#kyoani{
	background-image:url(../img/link_kyoani.png);
	background-size:100% 100%;
	width:310px;
	height:60px;
}
#pagetop{
	position: fixed;
	bottom: 15px;
	right: 30px;
	z-index: 100;
	background-image:url(../img/pagetop.png);
	background-size:100% 100%;
	width:80px;
	height:80px;
}
.right {text-align:right;}

/* ---------- colorbox setting ---------- */
#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; outline: 0; }
#cboxOverlay { position: fixed; width: 100%; height: 100%; }
#cboxMiddleLeft, #cboxBottomLeft { clear: left; }
#cboxContent { position: relative; }
#cboxLoadedContent { overflow: auto; }
#cboxTitle { margin: 0; }
#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }
#cboxOverlay { background: #fff; }
#cboxContent { overflow:hidden; }
#cboxError { padding: 50px; border: 1px solid #ccc; }
#cboxLoadedContent { margin: 60px 0 0; overflow: hidden; }
#cboxTitle { position: absolute; bottom: 4px; left: 0; text-align: center; width: 100%; color: #949494; }
#cboxCurrent { display: none; }
#cboxSlideshow { position: absolute; right: 30px; bottom: 4px; color: #0a9be6; }
/*
#cboxPrevious { position: absolute; left: 0; top: 0; border: none; background: url(/img/icon/control.png) no-repeat 0 0; width: 25px; height: 25px; text-indent:-9999px; }
#cboxPrevious:hover{ background-position: 0 -25px; }
#cboxNext { position: absolute; left: 27px; top: 0; border: none; background: url(/img/icon/control.png) no-repeat -25px 0; width: 25px; height: 25px; text-indent:-9999px; }
#cboxNext:hover { background-position: -25px -25px; }
#cboxLoadingGraphic { background: url(/img/icon/loading.gif) no-repeat center center; }
*/
#cboxClose { position: absolute; right: 0; top: 0; border: none; background: url(../img/cbClose.png) no-repeat left top; width: 60px; height: 60px; text-indent:-9999px; }
#cboxClose:hover { opacity: .5; }
.cboxIframe { width: 100%; height: 100%; display: block; border: 0; }