@charset "utf-8";
/* CSS Document */
/* clearfix */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* 画像センタリング */

.cr {margin:0 auto;}



/* FireFoxFadeブレ防止 */

img { display:block; box-shadow: #000 0 0 0; }


/* 全体・枠作り */

html,body {
  height:100%;
}

html {
	font-size:62.5%;
}

img { display:block; }

a img {
	transition: all 0.3s;
	opacity: 1;
}

a:hover img {
	opacity: 0.6;
}

body {
	font-family: Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size:62.5%;
	text-align:center;
	background-color: #000;
}

#PageWrapper {
	min-width:1328px;
	min-height: 2100px;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
	background:url("../img/background.jpg") center top no-repeat;
}

#Bannerbody {
	min-height: 1600px;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
	background:url("../img/banner_bg.jpg") center top no-repeat;
}


#Menu {
	padding-top:27px;
}

#Menu ul {
	width:1138px;
	height:97px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin:0 auto 77px;
}

#Menu ul li {
	display: block;
	height:97px;
}

#Menu ul li a {
	display: block;
	height:97px;
	position: relative;
}

#Menu ul li a:after {
	content: "";
	display: block;
	height:97px;
	position: absolute;
	left:0;
	top:0;
	opacity: 0;
	transition: all 0.3s;
}

#Menu ul li a:hover:after {
	opacity: 1;
}

#Menu ul li.menu01 a {background:url("../img/menu_01.png") left top no-repeat; width:135px;}
#Menu ul li.menu02 a {background:url("../img/menu_02.png") left top no-repeat; width:180px;}
#Menu ul li.menu03 a {background:url("../img/menu_03.png") left top no-repeat; width:171px;}
#Menu ul li.menu04 a {background:url("../img/menu_04.png") left top no-repeat; width:229px;}
#Menu ul li.menu05 a {background:url("../img/menu_05.png") left top no-repeat; width:112px;}
#Menu ul li.menu06 a {background:url("../img/menu_06.png") left top no-repeat; width:126px;}
#Menu ul li.menu07 a {background:url("../img/menu_07.png") left top no-repeat; width:185px;}

#Menu ul li.menu01 a:hover:after {background:url("../img/menu_01o.png") left top no-repeat; width:135px;}
#Menu ul li.menu02 a:hover:after {background:url("../img/menu_02o.png") left top no-repeat; width:180px;}
#Menu ul li.menu03 a:hover:after {background:url("../img/menu_03o.png") left top no-repeat; width:171px;}
#Menu ul li.menu04 a:hover:after {background:url("../img/menu_04o.png") left top no-repeat; width:229px;}
#Menu ul li.menu05 a:hover:after {background:url("../img/menu_05o.png") left top no-repeat; width:112px;}
#Menu ul li.menu06 a:hover:after {background:url("../img/menu_06o.png") left top no-repeat; width:126px;}
#Menu ul li.menu07 a:hover:after {background:url("../img/menu_07o.png") left top no-repeat; width:185px;}


.shopbox {
	background:url("../img/shoplink_bg.png") center top no-repeat;
	width:100%;
	height:239px;
}

.shopwrap {
	width:1230px;
	margin:0 auto 7px;
	padding-top:30px;
}

.shopwrap p {
	color:#ede8dd;
	text-align: left;
	font-size: 1.4rem;
	line-height: 1;
	font-weight: bold;
}

.shopline {
	display: flex;
	justify-content: space-between;
	margin-bottom:8px;
}

.shopblock {
	width:200px;
	color:#ede8dd;
	text-align: left;
	font-size: 1.4rem;
	font-weight: bold;
}

.shopblock a {
	display: block;
	width:200px;
	height:40px;
	background-color:#fff;
	transition: all 0.3s;
}

.shopblock a:hover {
	box-shadow:0 0 15px rgba(255,255,255,1);
}

.upper_visual {
	background:url("../img/upper_visual.png") center top no-repeat;
	width:100%;
	height:247px;
	margin:0 auto 5px;
	position: relative;
}

.upper_visual a {
	display: block;
	width:1266px;
	height:188px;
	position: absolute;
	left:50%;
	margin-left:-615px;
	top:20px;
	transition: all 0.3s;
	background-color:rgba(255,255,255,0);
}

.upper_visual a:hover {
	opacity: 1;
	background-color:rgba(255,255,255,0.3);
	box-shadow:0 0 15px rgba(255,255,255,1);
}

.mainvisual {
	background:url("../img/mainvisual.png") center top no-repeat;
	width:100%;
	height:1026px;
	margin:0 auto;
}

.return {
	width:85px;
	height:85px;
	position: absolute;
	left:50%;
	margin-left:-42px;
	bottom:273px;
}

.return a {
	background:url("../img/return.png") left top no-repeat;
	width:85px;
	height:85px;
	display: block;
}

.return2 {
	width:85px;
	height:85px;
	position: absolute;
	left:50%;
	margin-left:-42px;
	bottom:100px;
}

.return2 a {
	background:url("../img/return.png") left top no-repeat;
	width:85px;
	height:85px;
	display: block;
}

footer {
	width:1000px;
	height:240px;
	color:#ede8dd;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.7;
	text-align: center;
	position: absolute;
	bottom:0;
	left:50%;
	margin-left:-500px;
}

footer p {
	padding-top:10px;
}

footer p span {
	font-size:130%;
}

.sns_link {
	width:220px;
	height:20px;
	margin:8px auto;
	display: flex;
	justify-content: space-between;
}

.sns_link a {
	background:#e4007f;
	width:93px;
	height:20px;
	line-height: 20px;
	color:#ede8dd;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	display: block;
	text-decoration: none;
	border-radius: 5px;
}

.story_body {
	background:url("../img/story_body.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.character_body {
	background:url("../img/character_body.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.chara_inner1 {
	background:url("../img/chara_inner1.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.chara_inner2 {
	background:url("../img/chara_inner2.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.outline_body {
	background:url("../img/outline_body.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.concept_body {
	background:url("../img/concept_body.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.monster_body {
	background:url("../img/monster_body.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.world_body {
	background:url("../img/world_body.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.special_body {
	background:url("../img/miyage_body.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.gallery_body {
	background:url("../img/gallery_body.png") left top no-repeat;
	width:1328px;
	height:1281px;
	margin:0 auto;
	position: relative;
}

.midokoro_menu {
	width:1328px;
	position: absolute;
	left:0;
	top:136px;
}

.midokoro_menu ul {
	width:500px;
	margin:0 auto;
	display: flex;
	justify-content: space-around;
}

.midokoro_menu ul li {
}

.character_body a {
	display: block;
	width:146px;
	height:146px;
}

.chara01 {position:absolute; top:174px; left:67px;}
.chara02 {position:absolute; top:711px; left:563px;}
.chara03 {position:absolute; top:276px; left:949px;}
.chara04 {position:absolute; top:994px; left:81px;}