/*
##################################################
 ワガハイCSS
##################################################
*/

/* 選択中の文字色 */
::selection { background: #e4007f; color: #fff; /* Safari */ }
::-moz-selection { background: #e4007f; color: #fff; /* Firefox */ }

/* RESET */
html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style:none;
	line-height: 150%;
}

html { height: 100%; }
body
{
	height: 100%;
    font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック", "MS P Gothic", Geneva, Verdana, sans-serif;
    text-align: center;
    font-size: 14px;
    color: #30353a;
    
	background: url("img/bg.jpg") no-repeat center center fixed;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


/*----------------*/

/* area点線消し */
area
{
	border:none;
	outline:none;
}

/* リンク */
.tra
{
	background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(228,0,127,1) 50%);
	background-position: 0% 0;
	background-size: 200% auto;
	transition: 0.3s;
	color: #e4007f;
	text-decoration: underline; 
}
.tra:hover
{
	background-position: -100% 0;
	color: #fff;
}

.clear{ clear: both; line-height: 0}

/*.zoomin { opacity: 0; }*/


.disabled
{
    pointer-events: none;
    cursor: default;
	filter: alpha(opacity=30);
	-moz-opacity:0.30;
	opacity:0.30;
}


/*----------------*/

#main
{
	background: url("img/bg_star.png") fixed;
	background-position:0px 0px;
    /*animation: bgslide 5s linear infinite;
	-webkit-animation: bgslide 5s linear infinite;*/
}
@keyframes bgslide {
  0%    { background-position:0px 0px;  }
  100%  { background-position:-53px -53px;  }
}
@-webkit-keyframes bgslide {
  0%    { background-position:0px 0px;  }
  100%  { background-position:-53px -53px;  }
}

#header
{
	position: absolute;
	left: 0;
	top: 0;
	text-align: left;
	/*animation-delay: 2s;
	-webkit-animation-delay: 2s;*/
	z-index: 1;
	margin: 0px 24px;
}
#header img
{
	position: absolute;
	/*opacity: 0.0;*/
}

#menu
{
	text-align: left;
	position: absolute;
	margin-left: 0px;
	margin-top: 330px;
}
#menu ul a
{
	/*opacity: 0.0;*/
}
#menu li.top a span,
#menu li.news a span,
#menu li.onair a span,
#menu li.staff a span,
#menu li.story a span,
#menu li.concept a span,
#menu li.character a span,
#menu li.gallery a span,
#menu li.bluray a span,
#menu li.music a span,
#menu li.goods a span,
#menu li.radio a span,
#menu li.special a span,
#menu li.contact a span
{
	position: absolute;
	height: 39px;
	width: 0%;
	background: url("img/menu_top_on.png") no-repeat;
}
#menu li.news a span {		background: url("img/menu_news_on.png") no-repeat; }
#menu li.onair a span {		background: url("img/menu_onair_on.png") no-repeat; }
#menu li.staff a span {		background: url("img/menu_staff_on.png") no-repeat; }
#menu li.story a span {	background: url("img/menu_story_on.png") no-repeat; }
#menu li.concept a span {	background: url("img/menu_concept_on.png") no-repeat; }
#menu li.character a span {	background: url("img/menu_character_on.png") no-repeat; }
#menu li.gallery a span {	background: url("img/menu_gallery_on.png") no-repeat; }
#menu li.bluray a span {	background: url("img/menu_bluray_on.png") no-repeat; }
#menu li.music a span {		background: url("img/menu_music_on.png") no-repeat; }
#menu li.goods a span {		background: url("img/menu_goods_on.png") no-repeat; }
#menu li.radio a span {		background: url("img/menu_radio_on.png") no-repeat; }
#menu li.special a span {	background: url("img/menu_special_on.png") no-repeat; }
#menu li.contact a span {	background: url("img/menu_contact_on.png") no-repeat; }

#socialbox
{
	padding: 25px 0 0 38px;
	text-align: left;
}
#socialbox div
{
	height: 22px;
	margin-top: 3px;
	float: left;
}

#copyright
{
	position: fixed;
	bottom: 20px;
	right: 25px;
	z-index: 5;
}

#infomation
{
	position: absolute;
	top: 920px;
	width: 100%;
	height: 628px;
	background: url("img/infomation_bg.png");
}
#infomation .line
{
	text-align: left;
	max-width: 1200px;
	margin: 0 auto;
	margin-top: 15px;
}
#infomation .line span
{
	color: #fff;
	font-weight: bold;
	font-size: 11px;
	background: #e4007f;
	padding: 2px 20px;
}
.shika
{
	position: absolute;
	left: 50%;
	bottom: 30px;
	margin-left: -27px;
}
#toppage,
#base
{
	text-align:center;
	margin: 0 auto;
	padding-top: 100px;
	max-width: 1280px;
	min-height: 1448px;
	background: url("img/main_key.jpg") no-repeat center -150px;
	
	box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 6px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 6px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 6px 0px;
}
#toppage
{
	animation: mainbg 1.5s;
	animation-delay: 0.7s;
	animation-timing-function: ease-out;
	-webkit-animation: mainbg 1.5s; /* Safari & Chrome */
	-webkit-animation-delay: 0.7s;
	-webkit-animation-timing-function: ease-out;
}
#base
{
	background: url("img/common_bg.jpg") fixed;
	padding-top: 50px;
}
@keyframes mainbg {
	0%   { max-width: 0px;}
	100%  { max-width: 1280px; }
}
@-webkit-keyframes mainbg {
	0%   { max-width: 0px;}
	100%  { max-width: 1280px; }
}

#side
{
	position: absolute;
	top: 30px;
	right: 30px;
	text-align: right;
	width: 300px;
}
#side img
{
	width: 100%;
	box-shadow:rgba(0, 0, 0, 0.3) 0px 2px 6px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 2px 6px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 2px 6px 0px;
}
.twitter-timeline
{
	box-shadow:rgba(0, 0, 0, 0.3) 0px 2px 6px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 2px 6px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 2px 6px 0px;
}


#common
{
	text-align: left;
	padding: 30px;
	padding-top: 0px;
	width: 800px;
	margin: auto;
}

h1
{
	font-size: 14px;
	font-weight: bold;
	color: #e4007f;
}
.common_box
{
	padding-left: 20px;
	padding-bottom: 10px;
}

.common_cap
{
	height: 26px;
	background: #55b9f7;
	margin-bottom: 10px;
	color: #fff;
}
.min
{
	font-size: 10px;
	line-height: 14px;
}
a.boxlink
{
	padding: 8px 30px 8px 30px;
	border: 1px solid #55b9f7;
	background: #55b9f7;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
    line-height: 300%;
}
a:hover.boxlink
{
	border: 1px solid #55b9f7;
	background: #fff;
	color: #55b9f7;
}

table.kounyu td
{
	padding-left: 17px;
	padding-bottom: 17px;
}

table.tenpo
{
	width: 100%;
}
table.tenpo,table.tenpo td,table.tenpo th
{
    border-collapse: collapse;
    border:1px solid #55b9f7;
    background: #fff;
    padding: 5px;
    font-size: 12px;
}
table.tenpo .head
{
	background: #55b9f7;
	color: #fff;
}
table.tenpo .right
{
	font-size: 10px;
}

.youtube
{
	width: 300px;
	height: 169px;
}

/*---------------------------------*/

@media screen and (min-width: 640px)
{
	.pcNone { display:none; }
}
@media screen and (max-width: 1800px)
{
	#header { width:350px; }
	#header img { width:100%; }
}

@media screen and (max-width: 1600px)
{
	.youtube
	{
		width: 200px;
		height: 113px;
	}

	#side { width:200px; }
	#header { width:250px; }
	#header img { width:100%; }
	#menu { margin-top: 200px; }
	#common {margin-left: 260px;}
}
@media screen and (max-width: 1200px)
{
	.tabletNone { display:none; }
}
/*
@media screen and (max-width: 900px)
{
	#toppage {
		width: 100%;
		background: url("img/main_key.jpg") no-repeat center 0px;
		background-size: 100%;
	}
}
*/
@media screen and (max-width: 639px)
{
	#common {margin-left: 0px;}
	.pcOnly { display:none; }
	.tabletNone { display:block; }
	html {width: 100%; min-width: 100%;}
	body
	{
		min-width: 100%;
    }
	img { width: 100%; }
	#side { position: static; opacity: 1.0; width: 100%; }
	.youtube
	{
		width: 100%;
		min-height: 169px;
	}
	#common
	{
		padding: 0px;
		width: 100%;
	}
}