/* ===========================================
common css
=============================================*/

/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:block;
overflow:hidden;
}

.cf:after {
clear:both;
}
.clear{
clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}

/* hide-txt */

.hide-txt {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}


/* ===========================================
CSS STYLE
=============================================*/

@font-face{ 
	font-family: 'mplus-2c-light';
	src: url('./mplus-2c-light.eot');
	src: url('./mplus-2c-light.eot?#iefix') format('embedded-opentype'),
		url('./mplus-2c-light.woff') format('woff'),
		url('./mplus-2c-light.ttf') format('truetype');
}

@font-face{ 
	font-family: 'mplus-2c-medium';
	src: url('./mplus-2c-medium.eot');
	src: url('./mplus-2c-medium.eot?#iefix') format('embedded-opentype'),
		url('./mplus-2c-medium.woff') format('woff'),
		url('./mplus-2c-medium.ttf') format('truetype');
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
	width: 100%;
 	height: 100%;
	font-family: "mplus-2c-medium", Avenir, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size:62.5%; /* 1em=10px */
}

body {
	width: 100%;
	height: 100%;
	min-width: 1100px;
 	font-size:1.2rem; /*1rem=10px */
 	line-height: 2.0;
	-webkit-text-size-adjust:100%;
 	color: #3c3c3c;
 	overflow-y: scroll;
	position:relative;
 	z-index: 0;
}


/*---------------------------
Wrapper
---------------------------*/

div#wrapper {
	width: 100%;
	height: 100%;
	background-color: #000;
	position: relative;
	z-index: 1;
}


/*-----------------------------------------------------------------------------
	No Support
-----------------------------------------------------------------------------*/

article#no-support {
	width: 100%;
	height: 100%;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	display: none;
}

article#no-support p {
	margin: 30px;
}

/*-----------------------------------------------------------------------------
	Preloader
-----------------------------------------------------------------------------*/

article#preloader {
	width: 100%;
	height: 100%;
	background: #FFF;
	color: #000;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 99998;
}

article#preloader img{
	position: absolute;
	top: 50%;
	left: 50%;
}

article#preloader img.img {
	margin: -73px 0 0 -53px;
}

article#preloader img.text {
	margin: 46px 0 0 -39px;
}


/*---------------------------
Contents
---------------------------*/

article#contents {
	width: 100%;
	min-width: 1100px;
	max-width: 3000px;
	height: 100%;
	overflow: hidden;
	display: none;
	margin: 0 auto;
}

section#top-content {
	width: 100%;
	min-width: 1100px;
	height: 100%;
	position: fixed;
	z-index: 1;
}

section#top-content .inner {
	position: relative;
	z-index: 3;
}

section#top-content .inner h1 {
	width: 758px;
	height: 519px;
	text-align: center;
	position: absolute;
	top: 120px;
	left: 50%;
	margin-left: -379px;
	z-index: 1;
	display: none;
	opacity: 0;
}

section#top-content .chara { 
	position: absolute;
	left: 50%;
	margin-left: 26px;
	z-index: 2;
	display: none;
}

section#top-content .bg,
section#top-content .bg-light {
	width: 100%;
	/* height: 100%; */
	min-height: 1000px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: auto;
	/* background-attachment: fixed; */
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	opacity: 0;
}

section#top-content .bg {
	background-image: url(../img/top_bg.jpg);
	z-index: 1;
}

section#top-content .bg-light {
	background-image: url(../img/top_bg_light.png);
	z-index: 2;
}

section#introduction-content {
	width: 100%;
	height: 1649px;
	background: url(../img/introduction_bg.png) no-repeat 50% 0;
	background-size: auto;
	position: relative;
	z-index: 3;
}

section#introduction-content .inner {
	width: 1100px;
	margin: 0 auto;
	position: relative;
}

section#introduction-content .inner h2 {
	position: absolute;
	top: 492px;
	left: 587px;
}

section#introduction-content .inner h2 img {
	position: absolute;
	opacity: 0;
}

section#introduction-content .inner h2 img.title-1 {
	top: 0;
	left: -107px; /* 93px */
}

section#introduction-content .inner h2 img.title-2 {
	top: 108px;
	left: 200px; /* 0 */
}

section#introduction-content .inner h2 img.chara {
	top: 38px;
	left: 278px;
}

section#introduction-content .inner h3 {
	position: absolute;
	top: 606px; /* 406px */
	left: 348px;
	opacity: 0;
}

section#introduction-content .inner p {
	width: 524px;
	font-size: 1.4rem;
	line-height: 1.5;
	position: absolute;
	top: 858px;
	left: 130px;
	opacity: 0;
}

section#middle-bg {
	width: 100%;
	height: 1330px;
	background: url(../img/middle_bg.jpg) no-repeat 50% 0 #000;
	/* background-attachment: fixed; */
	position: relative;
	margin-top: -844px;
	z-index: 2;
}

section#story-content {
	width: 100%;
	background: url(../img/story_bg.png) no-repeat 50% 0;
	position: relative;
	z-index: 5;
	margin-top: -844px;
}

section#story-content .inner {
	width: 1100px;
	margin: 0 auto;
	position: relative;
	padding-top: 590px;
}

section#story-content .inner h2 {
	position: absolute;
	top: 267px;
	left: 502px;
}

section#story-content .inner h2 img {
	position: absolute;
	opacity: 0;
}

section#story-content .inner h2 img.title-1 {
	top: 0;
	left: 200px; /* 0 */ 
	z-index: 2;
}

section#story-content .inner h2 img.title-2 {
	top: 0;
	left: 0; 
	z-index: 1;
}

section#story-content .inner ul {
	text-align: center;
}

section#story-content .inner ul li {
	width: 265px;
	font-size: 1.1rem;
	vertical-align: top;
	margin: 0 46px;
	display: inline-block;
	opacity: 0;
}

section#story-content .inner ul li h3 {
	margin-bottom: 46px;
}

section#story-content .inner ul li p {
	text-align: left;
	margin-top: 14px;
}

section#story-content .inner .attention {
	font-size: 1.0rem;
	text-align: right;
	text-decoration: underline;
	margin: 44px 66px 0 0;
}

section#character-content {
	width: 100%;
	height: 856px;
	background: #FFF;
	position: relative;
	z-index: 6;
}

section#character-content .bg {
	width: 0; /* 3000px */
	height: 856px;
	background: url(../img/character_bg.png) no-repeat 0 0;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	margin-left: -1500px;
}

section#character-content .inner {
	width: 1100px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

section#character-content .inner h2 {
	position: absolute;
	top: 70px;
	left: 100px;
	z-index: 1;
}

section#character-content .inner h2 img {
	position: absolute;
	opacity: 0;
}

section#character-content .inner h2 img.title-1 {
	top: 0;
	left: 200px; /* 0 */ 
	z-index: 2;
}

section#character-content .inner h2 img.title-2 {
	top: 0;
	left: -200px; /* 0 */
	z-index: 3;
}

section#character-content .inner h2 img.title-3 {
	top: 0;
	left: 0; 
	z-index: 1;
}

section#character-content .inner .chara {
	position: absolute;
	top: 306px; /* 106px */
	left: 216px; 
	z-index: 3;
	opacity: 0;
}

section#character-content .inner .profile-1 {
	width: 280px;
	position: absolute;
	top: 428px;
	left: 86px; 
	z-index: 2;
	opacity: 0;
}

section#character-content .inner .profile-2 {
	width: 280px;
	position: absolute;
	top: 220px;
	right: 41px; 
	z-index: 4;
	opacity: 0;
}

section#character-content .inner .profile-1 p,
section#character-content .inner .profile-2 p {
	margin-top: 22px;
}

section#world-content {
	width: 100%;
	background: #FFF;
	position: relative;
	z-index: 7;
}

section#world-content .inner {
	width: 1100px;
	margin: 0 auto;
	position: relative;
}

section#world-content .inner h2 {
	position: absolute;
	top: 0;
	left: 280px;
	z-index: 1;
}

section#world-content .inner h2 img {
	position: absolute;
	opacity: 0;
}

section#world-content .inner h2 img.title-1 {
	top: 0;
	left: -200px; /* 0 */ 
	z-index: 2;
}

section#world-content .inner h2 img.title-2 {
	top: 0;
	left: 0;
	z-index: 1;
}

section#world-content .inner .slide {
	width: 1100px;
	padding-top: 316px;
	position: relative;
}

section#world-content .inner .slide ul {
	
}

section#world-content .inner .slide li {
	width: 293px;
	height: 600px;
	background: url(../img/world_term_under.png) no-repeat 0 100% #FFF;
	border-left: 1px solid #dcdcdc;
	border-right: 1px solid #dcdcdc;
	text-align: center;
	float: left;
	padding-bottom: 12px;
	margin-right: 20px;
	opacity: 0;
}

section#world-content .inner .slide li:last-child {
	margin-right: 0;
}

section#world-content .inner .slide li p {
	width: 270px;
	font-size: 1.1rem;
	text-align: left;
	margin: 10px auto 0 auto;
}

section#world-content .inner .btn-l {
	position: absolute;
	top: 586px;
	left: 0;
	cursor: pointer;
}

section#world-content .inner .btn-r {
	position: absolute;
	top: 586px;
	right: 0;
	cursor: pointer;
}

section#goods-content {
	width: 100%;
	height: 1012px;
	background: #FFF;
	position: relative;
	z-index: 8;
}

section#goods-content .bg {
	width: 0; /* 3000px */
	height: 675px;
	background: url(../img/goods_bg.png) no-repeat 0 0;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	margin-left: -1500px;
}

section#goods-content .inner {
	width: 1100px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

section#goods-content .inner h2 {
	position: absolute;
	top: 82px;
	left: 538px;
	z-index: 1;
}

section#goods-content .inner h2 img {
	position: absolute;
	opacity: 0;
}

section#goods-content .inner h2 img.title-1 {
	top: 0;
	left: 200px; /* 0 */ 
	z-index: 2;
}

section#goods-content .inner h2 img.title-2 {
	top: 0;
	left: 0;
	z-index: 1;
}

section#goods-content .inner .goods-1 {
	position: absolute;
	top: 533px; /* 333px */
	left: 62px;
	z-index: 1;
	opacity: 0;
}

section#goods-content .inner .goods-2 {
	position: absolute;
	top: 533px; /* 333px */
	left: 640px;
	z-index: 2;
	opacity: 0;
}

section#goods-content .inner .text {
	width: 208px;
	line-height: 1.5;
	float: left;
	margin: 10px 0 0 10px;
}

section#goods-content .inner .text .date {
	font-size: 1.3rem;
	color: #5b5b5b;
}

section#goods-content .inner .text .name {
	font-size: 1.6rem;
	font-family: "mplus-2c-medium";
}

section#goods-content .inner .text .detail {
	font-size: 1.3rem;
	font-family: "mplus-2c-medium";
}


/*---------------------------
header
---------------------------*/

header#header {
	width: 100%;
	min-width: 1100px;
	height: 33px;
	position: fixed;
	top: 10px;
	z-index: 99998;
}

header#header .inner {
	width: 0;
	height: 33px;
	background: url(../img/navi_bg.png) no-repeat 0 0;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -410px;
	overflow: hidden;
}

header#header .inner nav {
	width: 821px;
}

header#header .inner .main {
	float: left;
	margin-left: 118px;
}

header#header .inner .main li {
	margin-left: 14px;
}

header#header .inner .sns {
	float: left;
	margin-left: 98px;
}

header#header .inner .sns li {
	margin-left: 5px;
}

header#header .inner li {
	display: inline-block;
}


/*---------------------------
footer
---------------------------*/

footer#footer {
	width: 100%;
	min-width: 1100px;
	height: 17px;
	background: #FFF;
	font-size: 1.1rem;
	line-height: 17px;
	text-align: center;
	padding: 16px 0;
	position: relative;
	z-index: 10;
}

footer#footer .inner {
	width: 100%;
	height: 17px;
	background: #f1476f;
}

footer#footer .inner p {
	width: 432px;
	height: 17px;
	background: #fff;
	margin: 0 auto;
}