@charset "UTF-8";

/**		MAIN-VISUAL		**/
#main-visual {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 550px;
	margin-top: -78px;
	margin-bottom: 20px;
	overflow: hidden;
	z-index: -1;
	background: url(../img/top/bg_dragon.jpg) no-repeat;
	background-size: cover;
}
#animation_container, #_preload_div_ {
	position:absolute;
	margin:auto;
	left:-100%;right:-100%;
	top:-100%;bottom:-100%;
}
#animation_container {
	width:2330px;
	height:1024px;
}
#animation_container > #canvas {
	position: absolute;
	display: none;
}
#animation_container > #dom_overlay_container {
	pointer-events:none;
	overflow:hidden;
	width:2330px;
	height:1024px;
	position: absolute;
	left: 0px; top: 0px;
	display: none;
}
#_preload_div_ {
	display: inline-block;
	height:1024px;
	width: 2330px;
	vertical-align:middle;
	position:absolute;
	text-align: center;
}
#_preload_div_ > span {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
#_preload_div_ > img {
	vertical-align: middle;
	max-height: 100%;
}
@media screen and (max-width:690px){
	#main-visual { height: 55vw; margin-top: 0; }
	#main-visual::before {
		content: "";
		position: absolute;
		display: block;
		background: url(../img/top/line.png) no-repeat;
		top: -25px;
		left: 0;
		width: 100%;
		height: 83px;
		z-index: 9999;
	}
}

body > .container > .new_arrival {
	position: absolute;
	top: 274px;
	right: 0;
	width: 242px;
	height: auto;
	margin: 0 10px 10px 0;
	background: url(../img/top/bg_newarrival.png) no-repeat;
	background-size: 100% 100%;
}
body > .container > .new_arrival a {
	display: block;
	text-decoration: none;
}
body > .container > .new_arrival h3 {
	background: rgba(0, 0, 0, 0.5);
	margin: 15px 20px 10px 20px;
	color: #FFF;
	text-align: center;
}
body > .container > .new_arrival figure {
	margin: 0 10px 12px 10px;
	text-align: center;
}
body > .container > .new_arrival figure figcaption {
	color: #FFF;
}
@media screen and (max-width:690px){
	body > .container > .new_arrival { display: none; }
}

body > .container > .banner {
	position: absolute;
	top: 90px;
	right: 10px;
	width: 242px;
	text-align: center;
	letter-spacing: -.40em;
	font-size: 0;
}
body > .container > .banner > div {
	display: inline-block;
	letter-spacing: normal;
	font-size: 0;
	margin-bottom: 5px;
}
body > .container > .banner > div a {
	display: block;
}
body > .container > .banner > div img { max-width: 100%; }
@media screen and (max-width:690px){
	body > .container > .banner {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
	}
	body > .container > .banner > div {
		margin: 5px;
	}
}

/** news **/
body > .container section.news {
	padding-right: 10px;
	margin-bottom: 20px;
}
body > .container section.news > .title {
	display: block;
	background: url(../../news/img/title.png) no-repeat;
	overflow: hidden;
	height: 59px;
	text-indent: -9999px;
}
@media screen and (max-width:690px){
	body > .container section.news { padding: 0; }
}

/** event **/
body > .container section.event {
	padding-left: 10px;
	margin-bottom: 20px;
}
body > .container section.event > .title {
	display: block;
	background: url(../../event/img/title.png) no-repeat;
	overflow: hidden;
	height: 59px;
	text-indent: -9999px;
}
@media screen and (max-width:690px){
	body > .container section.event { padding: 0; }
}


body > .container > .produts-block {
	color: #FFF;
	margin-top: -12px;
	margin-bottom: 20px;
}
body > .container > .produts-block dl dt::after {
	border-color: #FFF;
}
body > .container > .produts-block::before {
	content: "";
	position: absolute;
	display: block;
	background: url(../img/top/line.png) no-repeat;
	top: -30px;
	left: 0;
	width: 100%;
	height: 83px;
}
body > .container > .produts-block > h2 {
	border-color: #FFF;
}
body > .container > section.dnd_starterset { background-image: url(../img/top/sec_bg01.jpg); }