@charset "UTF-8";

* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif","Malgun Gothic","Gulim";

	text-align: center;
}

ul,
li {
	list-style-type: none;
	
}

a {
	text-decoration: none;
	color:#0099ff;
}

a:hove {
	text-decoration: underline;
}

.sp_only {
	display: none;
}
.pc_only {
	display: inherit;
}


/*----------------------------------------------------
banner area
----------------------------------------------------*/
#banner_area {
	padding: 0px;
	margin-bottom:0px;
	width: 100%;
	height: 400px;/*バナーサイズ修正*/
	/* background: url(../img/top/banner_bacswk.png) center top no-repeat; */
}


/*----------------------------------------------------
subtitle
----------------------------------------------------*/
h3 {
	margin: 0px auto 25px auto;
	padding-left: 5px;
	width: 1010px;
	height: 70px;
	border-bottom: solid 1px #cccccc;
	font-size: 22px;
	text-align: left;
	line-height: normal;
	/*background:#eeeeee;*/
}
h3 span {
	display: block;
	width: 1010px;
	height: 105px;
	display: inline-table;
	vertical-align: middle;
}
h3 span > p {
	display: table-cell;
	vertical-align: middle;
}




/*----------------------------------------------------
container
----------------------------------------------------*/
#container {
	padding:25px 0px 25px;
	margin-bottom:20px;
	width: 100%;
	height: auto;
	overflow: hidden;
	background:rgba(0, 0, 0, 0.6) url(../img/bg_border.png) top center repeat;
	border-top: 1px solid #ccffff;
	border-bottom: 1px solid #ccffff;
}

#container .contents_box  {
	margin: 0px auto 0px auto;
	width: 1000px;
	height: 242px;
	overflow: hidden;
	background:url(../img/top/info_title.png) center top no-repeat;
}

/*-------------------------------------------------*/
#container .news_box {
	float: left;
	margin: 50px 11px 0px 0px;
	width: 326px;
	height: 190px;
	text-align: left;
	border-top:1px solid #ccffff;
	border-bottom:1px solid #ccffff;
	background:rgba(0,0,0,0.5) url(../img/bg_border.png) top center repeat;
}

/*-------------------------------------------------*/
#container .movie_box {
	float: left;
	margin: 50px 11px 0px 0px;
	padding-top:4px;
	width: 326px;
	height: 186px;
	text-align: center;
	border-top:1px solid #ccffff;
	border-bottom:1px solid #ccffff;
	background:rgba(0,0,0,0.5) url(../img/bg_border.png) top center repeat;
}

#container #movie_link {
	position: absolute;
	top: 84px;
	left: 30px;
	width: 251px;
	height: 141px;
}

#container #movie_link a {
	display: block;
	width: 251px;
	height: 141px;
	background: url(../img/top/movie_youtube_button.png) center top no-repeat;
}

#container #movie_link a:hover {
	background: url(../img/top/movie_youtube_button_on.png) center top no-repeat;
}

#movie_thm{
	position: absolute;
	z-index:1;
}

/*-------------------------------------------------*/
#container .campaign_box {
	float: left;
	margin: 50px 0px 0px;
	width: 326px;
	height: 190px;
	text-align: left;
/*	background:#ffcc00;*/
}

#container .campaign_box img {
	margin: 0px 0px 0px 0px;
	width: 326px;
/*3個	height: 59px;*/
/*2個	height: 92px;*/
	border: none;
}

/*----------------------------------------------------
NEWS
----------------------------------------------------*/
#news {
	width:auto;
	height: 159px;
	text-align: left;
	margin: 15px auto 15px auto;
	padding:0px 15px 0px;
	overflow: auto;
}

#news dl{
}

#news dt{
	font-size: 11px;
	line-height: 120%;
	font-weight:bold;
	color:#00ccff;
}

#news dd{
	font-size: 12px;
	line-height: 160%;
	border-bottom:1px dotted #999999;
	margin-bottom:12px;
	padding-bottom:8px;
	color: #ffffff;
}

#news dd a {
	text-decoration: none;
/*	border-bottom: 1px solid;*/
	color: #ffffff;
}

#news dd a:hover {
/*	text-decoration: underline;*/
	text-decoration: none;
	border-bottom: 1px dotted;
	color: #ccffff;
}

#news dd span{
	margin-right:8px;
	padding:0px 10px 0px;
	background:#0099ff;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	text-shadow: 
	0 0 2px #33ccff, 
	0 0 2px #33ccff, 
	0 0 0.8px #33ccff;

}




/*----------------------------------------------------
container2
----------------------------------------------------*/
#container2 {
	margin: 0px auto 0px auto;
	width: 900px;
	height: 64px;
	overflow: hidden;
	text-align: left;
	background: url(../img/top/onsale_date.png) center center no-repeat;
	background-size: 910px 73px ;
}

/*#container2 .sns_box {
	margin-top: 8px;
	width: 900px;
	text-align: left;
}

#container2 .sns_box img {
	margin-left: 3px;
	padding:0px;
	width: 30px;
	height: 30px;
	border: none;
}*/


/*----------------------------------------------------
container3
----------------------------------------------------
#container3 {
	padding: 0px 0px 20px;
	margin: 0px auto 0px auto;
	width: 1000px;
	height: auto;
	overflow: hidden;
	background:rgba(0,0,0,0.5);
}



#container3 .twitter_box {
	float: left;
	margin: 0px 10px 0px 20px;
	width: 313px;
	height: 200px;
	text-align: left;
/*	background:#ffcc00;*/
}
*/

/*----------------------------------------------------
iframe
----------------------------------------------------*/
iframe {
/*border: 1px #ccc solid;*/
	width:320px;
	height:180px; 
}

/*----------------------------------------------------
chara_link
----------------------------------------------------*/


.chara_link {
	margin: 15px auto 0px auto;
	padding: 0px;
	width:996px;
}

.chara_link a{
	margin-bottom:10px;
	display: block;
	float: left;
	height: 39px;
	box-sizing: border-box;
	display: inline-table;
	text-decoration: none;
}

.chara_link .back {
	float: left;
	text-align: left;
}

.chara_link a#link00 {background: url(../img/character/chara000_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link01 {background: url(../img/character/chara01_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link02 {background: url(../img/character/chara02_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link03 {background: url(../img/character/chara03_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link04 {background: url(../img/character/chara04_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link05 {background: url(../img/character/chara05_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link06 {background: url(../img/character/chara06_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link07 {background: url(../img/character/chara07_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link08 {background: url(../img/character/chara08_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link09 {background: url(../img/character/chara09_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link10 {background: url(../img/character/chara10_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link11 {background: url(../img/character/chara11_btn.png) left top no-repeat ; width: 166px; background-size:cover;}
.chara_link a#link12 {background: url(../img/character/chara12_btn.png) left top no-repeat ; width: 166px; background-size:cover;}

.chara_link a:hover#link00,
.chara_link a:hover#link01,
.chara_link a:hover#link02,
.chara_link a:hover#link03,
.chara_link a:hover#link04,
.chara_link a:hover#link05,
.chara_link a:hover#link06,
.chara_link a:hover#link07,
.chara_link a:hover#link08,
.chara_link a:hover#link09,
.chara_link a:hover#link10,
.chara_link a:hover#link11,
.chara_link a:hover#link12 {
	background-position: 0px -40px;
}

.chara_link a.off#link00,
.chara_link a.off#link01,
.chara_link a.off#link02,
.chara_link a.off#link03,
.chara_link a.off#link04,
.chara_link a.off#link05,
.chara_link a.off#link06,
.chara_link a.off#link07,
.chara_link a.off#link08,
.chara_link a.off#link09,
.chara_link a.off#link10,
.chara_link a.off#link11,
.chara_link a.off#link12 {
	background-position: 0px -80px;
}

.chara_link a.on#link00,
.chara_link a.on#link01,
.chara_link a.on#link02,
.chara_link a.on#link03,
.chara_link a.on#link04,
.chara_link a.on#link05,
.chara_link a.on#link06,
.chara_link a.on#link07,
.chara_link a.on#link08,
.chara_link a.on#link09,
.chara_link a.on#link10,
.chara_link a.on#link11,
.chara_link a.on#link12 {
	background-position: 0px -40px;
}


.clear {	
	clear: both;
		}


/*-----------------------------------------------------	*/
/*	for - 800px以下の記述　*/
/*-----------------------------------------------------	*/
@media screen and (max-width: 800px) {

.sp_only {
	display: inherit;
}
.pc_only {
	display: none;
}


/*----------------------------------------------------
banner area
----------------------------------------------------*/
#banner_area {
	height: 280px;
}

/*----------------------------------------------------
subtitle
----------------------------------------------------*/
h3 {
	width: 505px;
	font-size: 24px;
}

h3 span {
	width: 505px;
}

/*----------------------------------------------------
container
----------------------------------------------------*/


#container .contents_box  {
	width: 510px;
	height: auto;
	background:url(../img/top/info_title_sp.png) center top no-repeat;
}

#container .news_box {
	margin: 80px auto 0px auto;
	width: 510px;
	height: 300px;
}

#container .movie_box {
	margin: 110px 0px 0px 0px;
	padding:0px;
	width: 510px;
	height: auto;
}


#container .campaign_box {
	margin: 110px 0px 0px;
	width: 510px;
	height: auto;
}

#container .campaign_box img {
	margin: 0px 0px 10px;
	width: 510px;
	height: auto;
	border: none;
}


/*----------------------------------------------------
container2
----------------------------------------------------*/
#container2 {
	margin: 0px auto 0px auto;
	width: 510px;
	height: 55px;
	overflow: hidden;
	text-align: left;
	background: url(../img/top/onsale_date.png) center top no-repeat;
	background-size: 510px 54px ;
}



/*----------------------------------------------------
iframe
----------------------------------------------------*/
iframe {
/*border: 1px #ccc solid;*/
	width:510px;
	height:286px;
}

/*----------------------------------------------------
NEWS
----------------------------------------------------*/
#news {
	width:480px;
	height: 270px;
	padding:0px;
}
#news dl{
}
#news dt{
	font-size: 16px;
	line-height: 120%;
	font-weight:bold;
	color:#00ccff;
}
#news dd{
	width:480px;
	font-size: 18px;
	line-height: 160%;
	border-bottom:1px dotted #999999;
	margin-bottom:12px;
	padding-bottom:8px;
	color: #ffffff;
}

/*----------------------------------------------------
chara_link
----------------------------------------------------*/

.chara_link {
	margin: 20px auto 20px auto;
	padding: 0px;
	width:510px;
}

.chara_link img {
	margin-bottom: -7px;
}

.chara_link a {
	margin-bottom: 10px;
	height: 61px;
}

.chara_link a#link00 {width: 255px; background-size:cover;}
.chara_link a#link01 {width: 255px; background-size:cover;}
.chara_link a#link02 {width: 255px; background-size:cover;}
.chara_link a#link03 {width: 255px; background-size:cover;}
.chara_link a#link04 {width: 255px; background-size:cover;}
.chara_link a#link05 {width: 255px; background-size:cover;}
.chara_link a#link06 {width: 255px; background-size:cover;}
.chara_link a#link07 {width: 255px; background-size:cover;}
.chara_link a#link08 {width: 255px; background-size:cover;}
.chara_link a#link09 {width: 255px; background-size:cover;}
.chara_link a#link10 {width: 255px; background-size:cover;}
.chara_link a#link11 {width: 255px; background-size:cover;}
.chara_link a#link12 {width: 255px; background-size:cover;}

.chara_link a:hover#link00,
.chara_link a:hover#link01,
.chara_link a:hover#link02,
.chara_link a:hover#link03,
.chara_link a:hover#link04,
.chara_link a:hover#link05,
.chara_link a:hover#link06,
.chara_link a:hover#link07,
.chara_link a:hover#link08,
.chara_link a:hover#link09,
.chara_link a:hover#link10,
.chara_link a:hover#link11,
.chara_link a:hover#link12 {
	background-position: 0px -61px;
}

.chara_link a.off#link00,
.chara_link a.off#link01,
.chara_link a.off#link02,
.chara_link a.off#link03,
.chara_link a.off#link04,
.chara_link a.off#link05,
.chara_link a.off#link06,
.chara_link a.off#link07,
.chara_link a.off#link08,
.chara_link a.off#link09,
.chara_link a.off#link10,
.chara_link a.off#link11,
.chara_link a.off#link12 {
	background-position: 0px -122px;
}

.chara_link a.on#link00,
.chara_link a.on#link01,
.chara_link a.on#link02,
.chara_link a.on#link03,
.chara_link a.on#link04,
.chara_link a.on#link05,
.chara_link a.on#link06,
.chara_link a.on#link07,
.chara_link a.on#link08,
.chara_link a.on#link09,
.chara_link a.on#link10,
.chara_link a.on#link11,
.chara_link a.on#link12 {
	background-position: 0px -61px;
}