@charset "utf-8";

/* ------------------------------------- /
/   contentsBox
/* ------------------------------------- */

div.topMain {
	position: relative;
	width: 800px;
	height: 840px;
	margin-bottom: 20px;
}

div.topMain div.soundBox {
	position: absolute;
	right: 0;
}

div.topMain h1 {
	display: none;
}

div.topMain p.main {
	padding-top: 30px;
}

div.topMain_s {
	display: none;
}

div.movieBox {
	display: none;
}

p.try {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-bottom: 0;
	text-indent: -9999px;
	display: block;
	width: 300px;
	height: 66px;
	background: url(../img/btn_try_on.png);
}

p.try a {
	display: block;
	width: 300px;
	height: 66px;
	background: url(../img/btn_try_off.png);
	-webkit-transition: 0.5s ease-in-out;  
	-moz-transition: 0.5s ease-in-out;  
	-o-transition: 0.5s ease-in-out;  
	transition: 0.5s ease-in-out; 
}

p.try a:hover {
	opacity: 0;  
    filter: alpha(opacity=100); 
}

p.twCam {
	position: absolute;
	right: 310px;
	bottom: 0;
	margin-bottom: 0;
	text-indent: -9999px;
	display: block;
	width: 300px;
	height: 66px;
	background: url(../img/btn_tw_on.png);
}

p.twCam a {
	display: block;
	width: 300px;
	height: 66px;
	background: url(../img/btn_tw_off.png);
	-webkit-transition: 0.5s ease-in-out;  
	-moz-transition: 0.5s ease-in-out;  
	-o-transition: 0.5s ease-in-out;  
	transition: 0.5s ease-in-out; 
}

p.twCam a:hover {
	opacity: 0;  
    filter: alpha(opacity=100); 
}

p.fes {
	position: absolute;
	right: 0;
	bottom: 70px;
	margin-bottom: 0;
	text-indent: -9999px;
	display: block;
	width: 610px;
	height: 66px;
	background: url(../img/btn_fes_on.png);
}

p.fes a {
	display: block;
	width: 610px;
	height: 66px;
	background: url(../img/btn_fes_off.png);
	-webkit-transition: 0.5s ease-in-out;  
	-moz-transition: 0.5s ease-in-out;  
	-o-transition: 0.5s ease-in-out;  
	transition: 0.5s ease-in-out; 
}

p.fes a:hover {
	opacity: 0;  
    filter: alpha(opacity=100); 
}

p.dlc {
	position: absolute;
	right: 310px;
	bottom: 0;
	margin-bottom: 0;
	text-indent: -9999px;
	display: block;
	width: 300px;
	height: 66px;
	background: url(../img/btn_dlc_on.png);
}

p.dlc a {
	display: block;
	width: 300px;
	height: 66px;
	background: url(../img/btn_dlc_off.png);
	-webkit-transition: 0.5s ease-in-out;  
	-moz-transition: 0.5s ease-in-out;  
	-o-transition: 0.5s ease-in-out;  
	transition: 0.5s ease-in-out; 
}

p.dlc a:hover {
	opacity: 0;  
    filter: alpha(opacity=100); 
}

/* 更新情報 */
div.newsBox {
	background: url(../img/bg_news.png);
	width: 390px;
	height: 295px;
	margin-right: 20px;
	float: left;
	font-size: 13px; font-size: 1.3rem;
	line-height: 160%;
}

div.newsBox h2 {
	display: none;
}

div.newsBox h3 {
	font-size: 13px; font-size: 1.3rem;
	margin: 0 0 5px 0;
	font-weight: bold;
}

div.newsBox div {
	margin: 45px 25px 0 30px;
	height: 215px;
	overflow: auto;
}

div.newsBox ul {
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	border-bottom: dotted 1px #fe31ba;
}

div.newsBox ul li {
	background: url(../img/ico_onpu.png) no-repeat left top;
	padding-left: 20px;
	margin-bottom: 5px;
}

/* Twitter */
div.twBox {
	position: relative;
	background: url(../img/bg_tw.png);
	margin-left: 410px;
	width: 390px;
	height: 295px;
	font-size: 13px; font-size: 1.3rem;
}

div.twBox h2 {
	display: none;
}

div.twBox p.flw {
	position: absolute;
	top: -30px;
	right: 10px;
}

div.twBox div {
	position: absolute;
	left: 30px;
	top: 70px;
	width: 335px;
}

div.twBox iframe {
	height: 195px !important;
}

p.block {
	display: none;
}


/* スペック */
body#index div.container-fluid {
	background: rgba(0,0,0,0.40);
	text-align: left;
	color: #FFF;
	margin-top: 20px;
}

body#index div.container-fluid div.row {
	width: 1050px;
	text-align: left;
	margin: 0 auto;
}

body#index div.container-fluid h2 {
	margin: -3px 0 10px 0;
}

body#index div.container-fluid dl {
	line-height: 250%;
	margin-bottom: 10px;
	text-shadow: 1px 1px 1px #000;
}

body#index div.container-fluid dt {
	font-weight: normal;
	float: left;
	clear: left;
	background: url(../img/ico_star.png) no-repeat left center;
	padding-left: 25px;
	line-height: 200%;
	width: 150px;
}

body#index div.container-fluid dd {
	padding-left: 150px;
	line-height: 200%;
}

body#index div.container-fluid p {
	text-shadow: 1px 1px 1px #000;
	margin-left: 15px;
}

/* クレジット */

div.credit {
	text-align: left;
	text-shadow: #F7C0D8 1px 1px 2px;
}

div.credit h2 {
	font-size: 13px; font-size: 1.3rem;
	margin-bottom: 5px;
	padding-bottom: 0;
}

div.credit dl {
	font-size: 11px; font-size: 1.1rem;
}

div.credit dt {
	float: left;
	clear: left;
	width: 50px;
	font-weight: normal;
}

div.credit dd {
	padding-left: 50px;
}

@media screen and (max-width: 768px) { /* 767px以下の場合 */

/* ------------------------------------- /
/   contentsBox
/* ------------------------------------- */

div.topMain {
	display: none;
}

div.topMain_s {
	display: block;
}

div.movieBox {
	display: block;
	background: url(../img/bg_movie_s.png) no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	padding: 6.8% 5.2% 13.6% 5.2%;
	margin-bottom: 0;
}

div.movieBox h2 {
	display: none;
}


/* 更新情報 */
div.newsBox {
	background: none;
	width: 100%;
	height: auto;
	margin-right: 0;
	margin-bottom: 20px;
	float: inherit;
	font-size: 13px; font-size: 1.3rem;
}

div.newsBox h2 {
	display: block;
	background: url(../img/h2_new.png) no-repeat;
	background-size: contain;
	width: 50.8%;
	height: 0;
	padding-top: 5.3%;
	text-indent: -9999px;
	margin: 0 0 0 10px;
}

div.newsBox h3 {
	font-size: 13px; font-size: 1.3rem;
	margin: 0 0 5px 0;
}

div.newsBox div {
	background: url(../img/bg_sub_s.png) #e3f6ff no-repeat;
	background-size: cover;
	margin:0;
	padding: 10px;
	border: solid 3px #31a7e0;
	border-radius: 10px;
	height: 215px;
	overflow: auto;
}

/* Twitter */

div.twBox {
	display: none;
}

p.block {
	display: block;
}

/*div.twBox {
	position: relative;
	background: none;
	margin-left: 0;
	margin-bottom: 20px;
	width: 100%;
	height: auto;
	font-size: 13px; font-size: 1.3rem;
}

div.twBox iframe {
	word-wrap:break-word;
	width: 100% !important;
	max-width: 100% !important;
}

div.twBox h2 {
	display: block;
	background: url(../img/h2_tw.png) no-repeat;
	background-size: contain;
	width: 20%;
	height: 0;
	padding-top: 5.3%;
	text-indent: -9999px;
	margin: 0 0 0 10px;
}

div.twBox p.flw {
	position: absolute;
	top: -30px;
	right: 10px;
}

div.twBox div {
	background: url(../img/bg_sub_s.png) #e3f6ff no-repeat;
	background-size: cover;
	margin:0;
	padding: 10px;
	border: solid 3px #31a7e0;
	border-radius: 10px;
	height: 215px;	
	position: inherit;
	left: inherit;
	top: inherit;
	width: 100% !important;
}*/


/* スペック */

body#index div.container-fluid div.row {
	width: 100%;
	text-align: left;
	padding: 0;
	margin: 0;
}

body#index div.container-fluid h2 {
	margin: -3px 0 10px 0;
}

body#index div.container-fluid dl {
	font-size: 1.2rem;
	text-shadow: 1px 1px 1px #000;
	margin-left: -10px;
}

body#index div.container-fluid dl:last-child {
	margin-bottom: 10px;
}

body#index div.container-fluid dt {
	font-weight: normal;
	float: left;
	clear: left;
	background: url(../img/ico_star.png) no-repeat left center;
	padding-left: 25px;
	line-height: 200%;
	width: 130px;
}

body#index div.container-fluid dd {
	padding-left: 130px;
	line-height: 200%;
}


/* ページの上へ */
body#index p.pagetop {
	text-align: left;
	display: inline-block;
	text-indent: 0;
    position: inherit;
    bottom:  inherit;
    right: inherit;
	background: url(../img/ico_up.png) no-repeat left center;
	padding-left: 30px;
	margin-bottom: 0;
}

body#index p.pagetop a {
	display: block;
	width: auto;
	height: auto;
	background: none;
	-webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}


}