@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media print {#dvdBtn a{ display: none }}
/* -----------------------------------------------------------
   COMMON
------------------------------------------------------------*/

/*/TEXT/*/
.blue{ color:#0bc1f5 !important;}
.green{ color:#52b145 !important;}
.turquoise{ color:#2fbdb5 !important;}
.yellow{ color:#d6d414 !important;}
.orange{ color:#ee8020 !important;}
.pink{ color:#e4007f !important;}
.red{ color:#eb3434 !important;}
.purple{ color:#9362dd !important;}
.brown{ color:#a05f37 !important;}
.navy{color:#1a44ad !important;}

.tCenter{ text-align:center !important;}
.tLeft{ text-align:left !important;}
.tRight{ text-align:right !important;}

/*/LINK/*/
a { text-decoration:none;}
a:hover { text-decoration:underline;}
a:visited { text-decoration:none;}

/*/MARGIN/*/
.mgBtm15{ margin-bottom:15px !important;}
.mgBtm25{ margin-bottom:25px !important;}
.mgBtm35{ margin-bottom:35px !important;}
.mgBtm45{ margin-bottom:45px !important;}
.mgBtm55{ margin-bottom:55px !important;}

@media all and (min-width: 768px) {
.fade a:hover{
	opacity:0.3;
	-webkit-opacity:0.3;
	-moz-opacity:0.3;
	filter: alpha(opacity=0.3);
	-ms-filter: "alpha(opacity=0.3)";
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
	}
}
/* -----------------------------------------------------------
   BASE
------------------------------------------------------------*/
body {
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust: 100%;
	color:#575757;
	background-color:#000;
}
#wrap{
	background-image:url(../img/bg.jpg);
	}
@media all and (min-width: 768px) {
#wrap{
	padding:30px 0;
	}
.centerArea{
	width:980px;
	margin:0 auto;
	}
.centerArea .r-box{
	float:left;
	width:610px;
	}
#rBanner{
	width:300px;
	float:left;
	}
}
@media all and (max-width: 767px) {
#wrap{
	padding:0 0 10px;
	}

.centerArea{
	width:100%;
	margin:0 auto 1px;
	}
#rBanner{
	width:300px;
	margin:0 auto 10px;
	text-align:center;
	}
}

/* -----------------------------------------------------------
   NAVIGATION
------------------------------------------------------------*/

@media all and (min-width: 768px) {
#con-body nav{
	background-color:#e4007f;
	}
#con-body nav ul{
	width:980px;
	height:100px;
	margin:0 auto;
	list-style:none;
	}
#con-body nav li{
	float:left;
	background-image:url(../img/menu.png);
	}
#con-body nav a{
	display:block;
	height:100px;
	background-image:url(../img/menu.png);
	text-indent:-9999px;
	}

#con-body nav li#m1 a{ width:146px;background-position:0 0;}
#con-body nav li#m2 a{ width:145px;background-position:-146px 0;}
#con-body nav li#m3 a{ width:145px;background-position:-291px 0;}
#con-body nav li#m4 a{ width:190px;background-position:-436px 0;}
#con-body nav li#m5 a{ width:145px;background-position:-626px 0;}
#con-body nav li#m6 a{ width:209px;background-position:-771px 0;}

#con-body nav li#m1,.Intro #con-body nav li#m1 a{ background-position:0 -100px;}
#con-body nav li#m2,.News #con-body nav li#m2 a{ background-position:-146px -100px;}
#con-body nav li#m3,.Story #con-body nav li#m3 a{ background-position:-291px -100px;}
#con-body nav li#m4,.Chart #con-body nav li#m4 a{ background-position:-436px -100px;}
#con-body nav li#m5,.Staff #con-body nav li#m5 a{ background-position:-626px -100px;}
#con-body nav li#m6,.Msg #con-body nav li#m6 a{ background-position:-771px -100px;}

#con-body nav a:hover{
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)";
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
	}
}
@media all and (max-width: 767px) {
#con-body nav{
	width:100%;
	background-color:#e4007f;
	background-image:url(../img/bg_menu_r.png);
	background-position:right top;
	background-repeat:no-repeat;
	background-size:30%;
	}
#con-body nav ul{
	width:100%;
	list-style:none;
	background-image:url(../img/bg_menu_l.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	background-size:30%;
	}
#con-body nav li{
	width:50%;
	height:10%;
	float:left;
	border-bottom:1px solid #a0025a;
	box-sizing:border-box;
	}
#con-body nav li:nth-last-child(2),#con-body nav li:last-child{border-bottom:none;}
#con-body nav a{
	display:block;

	color:#fff;
	text-align:center;
	font-size:80%;
	line-height:3.0;
	font-weight:bold;
	}
#con-body nav li:nth-child(2n) {
	margin-right:0px;
	border-left:1px solid #a0025a;
}


}

/* -----------------------------------------------------------
   BTN-AREA TOP
------------------------------------------------------------*/
.centerArea a,#btnList li a,#btnList li span{ text-indent:-9999px;}
#btnList{ list-style:none;}


@media all and (min-width: 768px) {
#commentBtn a{background-image:url(../img/btn_comment.jpg?);}
#chartBtn a{background-image:url(../img/btn_chart.jpg?);}
#originalBtn a{background-image:url(../img/btn_original.jpg?);}
#musicBtn a{background-image:url(../img/btn_music.jpg?);}
#galleryBtn a{background-image:url(../img/btn_gallery.jpg?);}
#interviewBtn a{background-image:url(../img/btn_interview.jpg?);}
#movieBtn span{background-image:url(../movie/img/btn_movie.jpg?);}
#coffeeBtn a{background-image:url(../img/btn_coffee.jpg?);}
#diaryBtn a{background-image:url(../img/btn_diary.jpg?);}
#tbsfreeBtn span{background-image:url(../img/btn_tbsfree.jpg?);}

#spotBtn{
	width:350px;
	height:250px;
	float:left;
	margin-right:20px;
	background-color:#000;
	background-image:url(../img/spot_pc.jpg?);
	text-indent:-9999px;
	}

#leftBtn{
	width:310px;
	float: left;
	margin-right: 10px;
	}
#ishopBtn a{
	display:block;
	height:120px;
	background-image:url(../img/btn_ishop.jpg?);
	text-indent:-9999px;
	margin-bottom: 10px;
	}
#dvdBtn a{
	display: block;
}
#dvdBtn img{
	width: 310px;
	height:120px;
	background-image:url(../img/btn_dvd.jpg?);
	text-indent:-9999px;
	}
#btnList{
	width:980px;
	margin:0 auto ;
	}
#btnList ul{
	margin-top:10px;
	}
#btnList li{
	width:320px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	background-color:#000;
	}
	#btnList li.ver1{height:120px;}
	#btnList li.ver2{height:180px;}

#btnList li:nth-child(3n) {
	margin-right:0;
	}
#btnList li a,#btnList li span{
	display:block;
	width:320px;
	}
	#btnList li.ver1 a{height:120px;}
	#btnList li.ver2 a,#btnList li.ver2 span{height:180px;}
}
@media all and (max-width: 767px) {
#commentBtn a{background-image:url(../img/btn_comment_smp.jpg?);}
#chartBtn a{background-image:url(../img/btn_chart_smp.jpg?);}
#originalBtn a{background-image:url(../img/btn_original_smp.jpg?);}
#musicBtn a{background-image:url(../img/btn_music_smp.jpg?);}
#galleryBtn a{background-image:url(../img/btn_gallery_smp.jpg?);}
#interviewBtn a{background-image:url(../img/btn_interview_smp.jpg?);}
#movieBtn span{background-image:url(../movie/img/btn_movie_smp.jpg?);}
#coffeeBtn a{background-image:url(../img/btn_coffee_smp.jpg?);}
#diaryBtn a{background-image:url(../img/btn_diary_smp.jpg?);}
#tbsfreeBtn span{background-image:url(../img/btn_tbsfree_smp.jpg?);}

/*#spotBtn{
	width:70%;
	height:0;
	padding-top:50.63%;
	background-image:url(../img/spot_smp.jpg?);
	background-size:cover;
	margin:0 auto 10px;
	text-indent:-9999px;
	}*/
#spotBtn{
	display: none;

}
#ishopBtn a{
	display:block;
	width:50%;
	height:0;
	padding-top:19.354%;
	background-image:url(../img/btn_ishop.jpg?);
	background-size:cover;
	margin:0 auto 2px;
	text-indent:-9999px;
	}
#dvdBtn img{
	display:block;
	width:50%;
	height:0;
	padding-top:19.354%;
	background-image:url(../img/btn_dvd.jpg?);
	background-size:cover;
	margin:0 auto 2px;
	text-indent:-9999px;
	}
#btnList{
	width:100%;
	margin:0 auto;
	}
#btnList li{
	float:left;
	border-right:1px solid #e4e7e8;
	border-bottom:1px solid #e4e7e8;
	box-sizing:border-box;
	}

#btnList li:nth-child(3n) {
	border-right:none;
	}
#btnList li a,#btnList li span{
	display:block;
	width:100%;
	height:0;
	background-size:cover;
	}
#btnList li.ver1{width:33.333%;}
#btnList li.ver2{width:33.333%;}
	#btnList li.ver1 a{padding-top:58.064%;}
	#btnList li.ver2 a,#btnList li.ver2 span{padding-top:64.51%;}

#musicBtn{text-indent:-9999px;}
}

/* -----------------------------------------------------------
   BTN
------------------------------------------------------------*/
.button a,.button2 a{
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #53a7c3;
	color: #fff;
}

.button a:hover,.button2 a:hover {
	background-color: #e4007f;
	text-decoration:none;
}

.button a::before,
.button a::after,
.button2 a::before,
.button2 a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button a,
.button a::before,
.button a::after,
.button2 a,
.button2 a::before,
.button2 a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
@media all and (min-width: 768px) {
.button{
	width:260px;
	margin: 0 auto;
}
.button a{
	width:260px;
	height:70px;
	line-height:70px;
	font-size:120%;
	}
.button2{
	text-align: center;

}
.button2 a{
	padding: 0 30px;
	height:60px;
	line-height:60px;
	font-size:110%;
	}
}
@media all and (max-width: 767px)  {

.button{
	width:50%;
	margin:0 auto;
	}
.button a{
	width:100%;
	height:40px;
	line-height:40px;
	font-size:90%;
	}
.button2{
	width:80%;
	margin:0 auto;
	}
.button2 a{
	width:100%;
	height:50px;
	line-height:50px;
	font-size:100%;
	}
}


/* -----------------------------------------------------------
   TWITTER-TIMELINE TOP
------------------------------------------------------------*/
.p-author .profile .p-name {
  color: #18b194;
}
@media all and (min-width: 768px) {
#twit_tl{
	width:350px;
	height:250px;
	float:left;
	background-color:#fff;
	margin-right:10px;
	}
#twit_tl .box{
	padding:10px;
	}
}
@media all and (max-width: 767px) {
#twit_tl{
	width:94%;
	padding:1%;
	background-color:#fff;
	margin:10px auto ;
	}
#twit_tl .box{
	padding:5%;
	}
}

/* -----------------------------------------------------------
   PAGETOP
------------------------------------------------------------*/
#pagetop a{
	display: block;
	overflow:hidden;

	}
@media all and (min-width: 768px) {
#pagetop {
    position:fixed;
    bottom:90px;
    right: 20px;
}
#pagetop a {
    background-image:url(../img/pagetop.png);
    width:160px;
	height:146px;
	background-position:left center;
	text-indent:-9999px;
}
#pagetop a:hover{
	background-position:center right;
	background-position:right center;
}
}
@media all and (max-width: 767px)  {
#pagetop{
	width:100%;
	background-color:#e4017f;
	text-align:center;
	}
#pagetop a {
	color:#fff;
	font-size:80%;
	padding:10px 0;
	line-height:1.0;
	font-weight:bold;
}
}

/* -----------------------------------------------------------
   SOCIAL
------------------------------------------------------------*/
@media all and (min-width: 768px) {
#social{
	margin-top:5px;
	}
#social iframe{
	margin-bottom:8px;
	}
}
@media all and (max-width: 767px)  {
#social {
	text-align:center;
	}
#social iframe{
	margin:10px auto 0;
	}
}


/* -----------------------------------------------------------
   FOOTER
------------------------------------------------------------*/
footer{
	width:100%;
	background-color:#000;
}
p.copyright {
	color:#fff;
	font-size:75%;
	line-height:1.25;
}
p.copyright a{
	font-weight:bold;
	color:#fff;
	}
@media all and (min-width: 768px) {
footer{
	padding:30px 0;
	}
p.copyright {
	text-align:center;
	}
}
@media all and (max-width: 767px)  {
footer #rBanner{
	margin:10px auto;
	}
p.copyright{
	padding:10px 10px;
	text-align:center;
	}
}