@charset "utf-8";




/*
--------------------------------
	basic
--------------------------------
*/


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

body {
	color: #eeeae2;
	min-width: 1000px;
	background: #301c30 url(../img/header_bg.jpg) repeat-x right top;
}


/* ---- others ---- */

a {
	color: #bca058;
	text-decoration: none;
}

a:hover,
a:active {
	color: #e0cc96;
	text-decoration: none;
}




/*
--------------------------------
	header
--------------------------------
*/


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

#header-container {
	position: relative;
	padding: 4px 0 22px;
	background: url(../img/header_right.jpg) no-repeat right top;
}
#header-container .bg {
	position: absolute;
	top: 0; right: 0;
}


/* ---- site id ---- */

#site-id {
	width: 190px;
	height: 110px;
	margin: 0;
	overflow: hidden;
}


/* ---- global navigation ---- */

#global-navigation {
	margin-top: -10px;
	padding: 0 1%;
}

#global-navigation ul li {
	float: left;
	position: relative;
}

#global-navigation ul li#gn1 { width: 12%; }
#global-navigation ul li#gn2 { width: 11.5%; }
#global-navigation ul li#gn3 { width: 13%; }
#global-navigation ul li#gn4 { width: 17%; }
#global-navigation ul li#gn5 { width: 11.5%; }
#global-navigation ul li#gn6 { width: 13.5%; }
#global-navigation ul li#gn7 { width: 21.5%; }

#global-navigation ul li a,
#global-navigation ul li div {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}

#global-navigation ul li a img {
	margin-top: 0;
}

#global-navigation ul li a:hover img,
#global-navigation ul li a:active img,
#global-navigation ul li.current a img {
	margin-top: -50px;
}

#global-navigation li.new:after {
	content: url(../img/new.png);
	display: block;
	position: absolute;
	left: 96%;
	top: -4px;
	width: 28px;
	height: 28px;
}

#global-navigation li#gn1.new:after { left: calc(50% + 37px); }
#global-navigation li#gn2.new:after { left: calc(50% + 31px); }
#global-navigation li#gn3.new:after { left: calc(50% + 38px); }
#global-navigation li#gn4.new:after { left: calc(50% + 66px); }
#global-navigation li#gn5.new:after { left: calc(50% + 35px); }
#global-navigation li#gn6.new:after { left: calc(50% + 42px); }
#global-navigation li#gn7.new:after { left: calc(50% + 94px); }

#global-navigation li.has-local:before {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 0;
	height: 0;
	margin-left: -13px;
	border: 11px solid transparent;
	border-bottom-color: #382054;
	opacity: .9;
}


/* ---- local navigation ---- */

#local-navigation {
	margin: 5px 3% 0 3%;
	padding: 10px 0;
	border-radius: 4px;
	background: -moz-linear-gradient(top, rgba(56,32,84,.9) 0%, rgba(78,28,72,.9) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,32,84,.9)), color-stop(100%,rgba(78,28,72,.9)));
	background: -webkit-linear-gradient(top, rgba(56,32,84,.9) 0%,rgba(78,28,72,.9) 100%);
	background: -o-linear-gradient(top, rgba(56,32,84,.9) 0%,rgba(78,28,72,.9) 100%);
	background: -ms-linear-gradient(top, rgba(56,32,84,.9) 0%,rgba(78,28,72,.9) 100%);
	background: linear-gradient(to bottom, rgba(56,32,84,.9) 0%,rgba(78,28,72,.9) 100%);
	box-shadow: 0 0 3px #140c14;
}

#local-navigation ul:before,
#local-navigation ul:after {
	content: "";
	display: table;
}
#local-navigation ul:after {
	clear: both;
}
#local-navigation ul {
	*zoom: 1;
}

#local-navigation ul li {
	float: left;
	position: relative;
	border-right: 1px solid #6f457c;
}

#local-navigation ul li a {
	padding: 0 30px;
	font-size: 88%;
	line-height: 1.8;
	white-space: nowrap;
	color: #eeeae2;
}
#local-navigation ul li a:hover {
	color: #CcB068;
}
#local-navigation ul li.current a,
#local-navigation ul li.current a:hover {
	color: #bc6cc6;
	cursor: default;
}

#local-navigation ul li.new:after {
	content: url(../img/new.png);
	display: block;
	position: absolute;
	right: -6px;
	top: -16px;
	width: 28px;
	height: 28px;
}




/*
--------------------------------
	body
--------------------------------
*/


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

#body-container {
	position: relative;
	padding: 0 0 40px;
	background-color: #fff;
	overflow: hidden;
}

#body-container .inner {
	width: 980px;
	min-height: 400px;
	margin: 0 auto;
}

#mask-top {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 30px;
	background: url(../img/mask_t.png) repeat-x;
	z-index: 10;
}

#mask-bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30px;
	background: url(../img/mask_b.png) repeat-x;
	z-index: 10;
}


/* ---- page title ---- */

#page-title {
	margin-left: 3%;
	padding-top: 30px;
}



/*
--------------------------------
	footer
--------------------------------
*/


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

#footer-container {
	height: 100px;
	background: url(../img/footer_bg.jpg) repeat-x right top;
}

#footer-container .inner {
	position: relative;
	height: 100px;
	background: url(../img/footer_right.jpg) no-repeat right top;
}

#footer-container #sound {
	position: absolute;
	right: 160px;
	top: 42px;
}

/* ---- sns ---- */

ul#sns {
	display: table;
	position: absolute;
	left: 25px;
	bottom: 30px;
}

ul#sns li {
	display: table-cell;
	padding-right: 5px;
	vertical-align: top;
}

ul#sns li:first-child {
	padding-right: 10px;
}

ul#sns li.sns-twitter a,
ul#sns li.sns-facebook a,
ul#sns li.sns-line a {
	position: relative;
	top: -6px;
	display: block;
	overflow: hidden;
	width: 32px; height: 32px;
	background: url(../img/sns.png) no-repeat 0 0;
	text-indent: -999em;
}
ul#sns li.sns-twitter a {
	background-position: -35px 0;
}
ul#sns li.sns-facebook a {
	background-position: 0 0;
}
ul#sns li.sns-line a {
	background-position: -70px 0;
}


/* ---- copyright ---- */

#copyright {
	position: absolute;
	left: 25px;
	bottom: 20px;
	color: #605060;
	font-size: 63%;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: .05em;
}


/* ---- marvelous logo ---- */

a#marv {
	display: block;
	position: absolute;
	right: 25px;
	bottom: 24px;
	width: 100px;
	height: 47px;
}