@import "general.css";

body{
	height: 100%;
	position: relative;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","HiraKakuProN-W3",Meiryo,"メイリオ",sans-serif;
	background: url("../img/bg_body.png") no-repeat top center #fff;
	line-height: 150%;
	color: #333;
}
img{
	vertical-align: bottom;
}
a:link, a:visited { color: #0A6CCF; }
a:hover { color: #2A8CEF; }




#logo {
	position: absolute;
	top: 15px; left: 0px;
	z-index: 100;
}
.headArea{
	top: 0;
	background: url(../img/bg_header.png) repeat-x 0 0;
	height: 102px;
	width: 100%;
}
.headArea .container {
	position: relative;
}
.headArea .navi{
	width: 580px;
	float: right;
	margin-top: 10px;
}
.headArea .navi ul{
	overflow: hidden;
	float: right;
}
.headArea .navi ul li{
	float: left;
	padding: 2px 10px 0 0;
}
.headArea .navi ul li.badge{
	padding: 0px 0px 0 10px;
}


.container {
	width: 980px;
	margin: 0 auto;
}
.contentsArea{
	background: url(../img/bg_main.jpg) no-repeat center top;
	background-attachment: fixed;
	background-size: cover;
	min-width: 1028px;
	overflow: hidden;
}
.contentsArea .container{
	width: 1028px;
	margin: 0 auto;
	/*outline: 126px solid #FF9999;*/
	position: relative;
}
#footArea {
	text-align: center;
	height: 140px;
	padding: 10px 0 0 0;
	width: 100%;
	z-index: 9999;
	color:#FFFFFF;
	font-size:12px;
	background-color: #393939;
	position: relative;
}
#footArea .links {
	width: 900px;
	margin: 0 auto;
}
#footArea .links dl {
	float: left;
	width: 450px;
	text-align: left;
	margin-bottom: 20px;
}
#footArea .links dl dt {
	padding-bottom: 15px;
}
#footArea .links dl dd {
	height: 80px;
}
#footArea .links dl dd a {
	margin-right: 15px;
}

.under {
	background-color: #222;
	font-size: 16px;
	color: #fff;
	padding: 20px 0px;
}
.under .box {
	width: 900px;
	margin: 0 auto;
	height: 28px;
}
.under a {
	float: left;
}
.under .copyright {
	float: right;
}
.under a {
	color: #fff;
	text-decoration: none;
}
.under a:hover {
	text-decoration: underline;
}


/* 汎用BOX -------------------------------------------------------*/
section.box {
	background: url("../img/bg_box.png") repeat-y;
	position: relative;
	margin-bottom: 148px;
	margin-top: 88px;
	padding-top: 20px;
}
section.box h1,
section.box h2 {
	position: absolute;
	height: 88px;
	top: -88px;
}
section.box:after {
	background: url("../img/bg_box_after.png") no-repeat;
	width: 900px; height: 35px;
	display: block;
	content: "";
	position: absolute;
	bottom: -35px;
}


/* 事前登録キャンペーン帯 -------------------------------------------------------*/
.campaign_belt {
	background: url("../img/bg_campaign_belt.png") no-repeat top center;
	height: 160px;
	margin: 0 auto;
}
.campaign_belt .inner{
	position: relative;
	width: 980px;
	margin: 0 auto;
}
.btnAndApp { position: absolute; top: 50px; left: 690px; }
.btnAmazon { position: absolute; top: 50px; left: 460px; }
.btn1 { position: absolute; top: 50px; left: 0px; }
.btn2 { position: absolute; top: 50px; left: 230px; }
.tokuten { position: absolute; top: -45px; right: 10px; }


/* ページトップへ -------------------------------------------------------*/
#pagetop {
	position: absolute;
	bottom: -20px; right: 10px;
	width: auto;
	cursor: pointer;
}


/* キャラクター紹介用モーダル -------------------------------------------------------*/
#char_modal { display:none;}
#char_modal .modalBody {position: fixed; z-index:9999; width:624px; height: 704px; left:50%; top:50%; padding: 0; }
#char_modal .modalBK{position: fixed; z-index:8000; height:100%; width:100%; background: rgba(0,0,0, 0.6); top: 0; left: 0; }
#char_modal .modal{width:690px; color: #fff;}
#char_modal .modalBody{padding: 0px;}

#characterBox {
	width: 100%; height: 100%;
	position: relative;
}
#characterBox .introduction {
	width: 100%; height: 100%;
}
#characterBox .introduction img.all { position: absolute; top: -50px; left: 4px; z-index: 10002; }
#characterBox .introduction img.bg { position: absolute; top: 4px; right: 4px; z-index: 10000; }
#characterBox .introduction img.name { position: absolute; top: 180px; left: 4px; z-index: 10001; }
#characterBox .introduction img.badge { position: absolute; bottom: 17px; left: 16px; z-index: 10003; }
#characterBox .introduction a.voice1 { position: absolute; top: 260px; left: 270px; z-index: 10003; }
#characterBox .introduction a.voice2 { position: absolute; top: 260px; left: 425px; z-index: 10003; }
#characterBox div.profile {
	width: 330px; font-size: 15px;
	text-shadow: 0px 0px 8px 4px rgba(255,255,255, 1);
	position: absolute; right: 24px; bottom: 33px;
	z-index: 10003;
	line-height: 120%;
}
#characterBox div.profile p {
	margin-bottom: 20px;
}
#characterBox div.profile dl {
}
#characterBox div.profile dl dt {
	width: 130px; float: left; clear: both;
	font-weight: bold;
	border-bottom: 1px dotted #A3A3A3;
	padding: 5px;
}
#characterBox div.profile dl dd {
	margin-left: 130px;
	border-bottom: 1px dotted #A3A3A3;
	padding: 5px;
}
#characterBox div.profile dl dt:last-child,
#characterBox div.profile dl dd:last-child {
	border: none;
}
a#char_modal_close { position: absolute; top: 0px; right: 0px; z-index: 10005; }
a#char_modal_close_btn { display: none; }
#characterBox a.char_prev { position: absolute; top: 320px; left: -107px; z-index: 10005; }
#characterBox a.char_next { position: absolute; top: 320px; right: -107px; z-index: 10005; }

#char_modal .bg01 {background: url("/data/modal/common/bg_char_modal_01.png"); width: 100%; height: 100%; }
#char_modal .bg02 {background: url("/data/modal/common/bg_char_modal_02.png"); width: 100%; height: 100%; }
#char_modal .bg01 div.profile dl {
	border-top: 2px solid #F1A0B9;
	border-bottom: 2px solid #F1A0B9;
}
#char_modal .bg01 div.profile dl dt {
	color: #E65B85;
}
#char_modal .bg02 div.profile dl {
	border-top: 2px solid #BCDEFA;
	border-bottom: 2px solid #BCDEFA;
}
#char_modal .bg02 div.profile dl dt {
	color: #5590FA;
}


/* その他汎用定義 -------------------------------------------------------*/
.btn_a {
	-webkit-transition: all .3s;
	transition: all .3s;
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	cursor: pointer;
}
.btn_a:hover {
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

input[type="image"] {
	outline: none;
}

.sdw {
	box-shadow: 2px 2px 6px rgba(0,0,0, 0.65);
}

/* clearfix -------------------------------------------------------------------*/
.cf:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.cf{ display:inline-table; }
* html .cf{ height:1%; }
.cf{ display:block; }
br.clear { clear: both; }