@charset "UTF-8";

/* ========================================
	common
======================================== */
body {
	background: #FF0000;
}

#wrapper {
	background: url(../images/bg_btm.png) repeat-x center bottom;
}
#header {
	position: relative;
	z-index: 50;
}

/* ========================================
	#main-visual
======================================== */
#main-visual {
	position: relative;
	width: 960px;
	height: 839px;
	margin: 0 auto;
}
.js-on #ttl h1,
.js-on #chara01 div,
.js-on #chara02 div,
.js-on #card,
.js-on #trial-btn,
.js-on #direct-btn,
.js-on #direct-btn02,
.js-on #gnavi-top {
	display: none;
}
.js-on #card {
	opacity: 0;
}

#chara01 div img,
#chara02 div img {
	position: relative !important;
}

#ttl {
	position: absolute;
	top: 70px;
	left: 480px;
	z-index: 50;
}

#chara01 {
	position: absolute;
	top: 1px;
	left: 80px;
	z-index: 10;
}
#chara02 {
	position: absolute;
	top: -14px;
	left: -227px;
}

#card {
	position: absolute;
	top: -31px;
	left: 50%;
	width: 1700px;
	height: 1300px;
	margin-left: -850px;
	z-index: 30;
}
#card div {
	position: absolute;
	top: 0;
	width: 1700px;
	height: 1300px;
	background: url(../images/visual_card.png) no-repeat center 0;
}

#direct-btn {
	position: absolute;
	top: 547px;
	left: 265px;
	z-index: 30;
}
#direct-btn div .layer {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 272px;
	height: 127px;
	background: url(../images/btn_direct_on.png) no-repeat center top;
	opacity: 0;
	transition: opacity 0.6s;
	z-index: 10;
}
#direct-btn div:hover .layer {
	opacity: 100;
	transition: opacity 0.6s;
}

#direct-btn02 {
	position: absolute;
	top: 547px;
	left: -10px;
	z-index: 30;
}
#direct-btn02 div .layer {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 272px;
	height: 127px;
	background: url(../images/btn_direct02_on.png) no-repeat center top;
	opacity: 0;
	transition: opacity 0.6s;
	z-index: 10;
}
#direct-btn02 div:hover .layer {
	opacity: 100;
	transition: opacity 0.6s;
}
#direct-btn02 div .ico-new {
	position: absolute;
	top: -7px;
	left: -3px;
	z-index: 50;
}

#trial-btn {
	position: absolute;
	top: 628px;
	left: 832px;
	z-index: 30;
}
#trial-btn div .layer {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 178px;
	height: 178px;
	background: url(../images/btn_trial_on.png) no-repeat center top;
	opacity: 0;
	transition: opacity 0.6s;
	z-index: 10;
}
#trial-btn div:hover .layer {
	opacity: 100;
	transition: opacity 0.6s;
}

/* ========================================
	#contents
======================================== */
#gnavi-top {
	position: absolute;
	top: 677px;
	left: -9px;
	width: 849px;
	z-index: 50;
}
#gnavi-top li {
	position: relative;
	float: left;
}
#gnavi-top li .ico-new {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
}
#gnavi-top li .layer {
	display: block;
	height: 128px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.6s;
}
#gnavi-top li:hover .layer {
	opacity: 100;
	transition: opacity 0.6s;
}
#gnavi-top .gnavi01 .layer {
	width: 172px;
	background: url(../images/gnavi01_on.png) no-repeat left top;
}
#gnavi-top .gnavi02 .ico-new {
	top: -1px;
	left: 1px;
}
#gnavi-top .gnavi02 .layer {
	width: 164px;
	background: url(../images/gnavi02_on.png) no-repeat left top;
}
#gnavi-top .gnavi03 .layer {
	width: 127px;
	background: url(../images/gnavi03_on.png) no-repeat left top;
}
#gnavi-top .gnavi04 .ico-new {
	top: 11px;
	left: 3px;
}
#gnavi-top .gnavi04 .layer {
	width: 126px;
	background: url(../images/gnavi04_on.png) no-repeat left top;
}
#gnavi-top .gnavi05 .layer {
	width: 126px;
	background: url(../images/gnavi05_on.png) no-repeat left top;
}
#gnavi-top .gnavi06 .ico-new {
	top: 11px;
	left: 5px;
}
#gnavi-top .gnavi06 .layer {
	width: 134px;
	background: url(../images/gnavi06_on.png) no-repeat left top;
}

/* ========================================
	#contents
======================================== */
#contents {
	position: relative;
	margin-top: 0;
	z-index: 50;
}
#contents-inner {
	position: relative;
	width: 870px;
	height: 229px;
	padding: 0 62px;
}

.info {
	float: left;
	margin-top: -44px;
}
#update {
	display: table;
	width: 489px;
	margin: 0 0 15px;
	background: url(../images/bg_update.png) no-repeat right top;
	vertical-align: middle;
}
#update-ttl {
	display: table-cell;
	float: left;
}
#update .text-area {
	display: table-cell;
	width: 325px;
	padding: 0 15px 0 15px;
	vertical-align: middle;
}
.update-area {
	max-height: 110px;
	overflow: auto;
}
#update ul {
	font-size: 14px;
	font-weight: bold;
	color: #3e210f;
	line-height: 1.4;
}
#update span {
	display: block;
}
#update .date {
	float: left;
	width: 85px;
	letter-spacing: 1.4px;
	font-family: Helvetica;
}
#update .update-txt {
	margin-top: 3px;
	margin-bottom: 7px;
	padding: 0 10px 0 100px;
}
#update li a {
	display: block;
	margin-left: -12px;
	padding-left: 12px;
	background: url(../images/arw_update.png) no-repeat left 4px;
}
#update li a:link, #update li a:visited {
	text-decoration: underline;
}
#update li a:hover, #update li a:active {
	text-decoration: none;
}

#spec {
	position: relative;
	float: left;
	width: 434px;
	margin-left: 28px;
}
#spec ul li {
	position: absolute;
}
.spec-pack {
	top: 0;
	left: 0;
}
.spec-ico {
	top: 0;
	left: 130px;
}
.spec-cero {
	top: 53px;
	left: 130px;
}
.spec-img01 {
	top: 0;
	left: 195px;
}
.spec-img02 {
	top: 28px;
	left: 195px;
}
.spec-img03 {
	top: 60px;
	left: 195px;
}
.spec-detail {
	top: 85px;
	left: 195px;
}
.spec-update {
	top: 129px;
	left: 126px;
}
.spec-guide {
	top: 129px;
	left: 318px;
}

#tweet {
	float: right;
	width: 360px;
	height: 297px;
	margin-top: -43px;
	margin-right: 2px;
	padding: 4px;
	background: url(../images/bg_tweet.png) no-repeat left top;
	overflow: hidden;
}
.twitterWidget {
	width: 360px;
}
.twitterWidget iframe {
	height: 297px !important;
}

/* ========================================
	#footer
======================================== */
#footer {
	position: relative;
	margin: 50px auto 30px;
	z-index: 50;
}
.topicpath {
	float: left;
	margin-top: 48px;
}

#footer-r {
	float: right;
	width: 589px;
}
#footer-r #sns {
	float: right;
	margin: 0 0 10px;
}
#footer-r #sns li {
	float: left;
	margin-left: 9px;
	margin-right: 1px;
}
#footer-r .foot-copyright {
	float: right;
}
#footer-r .foot-copyright p {
	float: left;
}