@charset "UTF-8";

a {
	outline:none !important;
}

body {
	background:#000;
	font-family: Geneva, Verdana,Arial, Helvetica, sans-serif;
	color:#6b6b6b;
	-webkit-text-size-adjust:none;
	line-height:150%;
}

.clear {
	clear:both;
}

div#container {
	overflow:hidden;
}

.contents {
	margin:0 auto;
	width:90%;
}

li {
	list-style-type:none;
}

li img {
	vertical-align:top;
}

img {
	width:100%;
}

.left {
	float:left;
	height:100%;
}

.right {
	float:right;
	height:100%;
}

dl, dt, dd, li {
	margin:0;
	padding:0;
}

/* ========================= HEADER ========================= */ 

div#navi_btn {
	display:none;
}

div#header {
	height:100px;
	position:relative;
	background:#000;
}

div#header a#logo {
	display:block;
	position:absolute;
	top:20px;
	left:20px;
	width:90px;
}

div#header ul#navi {
	width:65%;
	position:absolute;
	top:20px;
	right:0px;
	height:60px;
	list-style:none;
	margin:0;
	padding:0;
}

div#header ul#navi li {
	float:left;
	width:20%;
	padding:0px;
	maring:0px;
	text-align:right;
}

div#header ul#navi li a {
	display:block;
	width:85%;
	background:#3e3e3e;
}

div#header ul#navi li.current a {
	background:#fff;
}

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

/*
ul#lang {
	width:98%;
	margin:0 auto;
	padding:20% 10px;
	background:#fff;
}

ul#lang li {
	text-align:center;
	margin:5%;
}

ul#lang li img {
	width:50%;
}
*/

/* ========================= HEADER END ========================= */ 





/* ========================= MAIN ========================= */ 

#h_img {
	width:100%;
	margin:0px auto 0 auto;
}

#h_img #h_text {
	width:35%;
}

#h_img #h_logo {
	width:25%;
}

#h_img #h_bg {
	width:90%;
}

#h_img #h_text, #h_img #h_logo , #h_img #h_bg {
	position:absolute;
	top:-9999px;
}

p.top_text {
	padding-top:15px;
	width:73%;
	font-size:16px;
}

#main {
	background:#fff;
	margin:0;
	padding-top:10px;
}

#video {
	position:relative;
	width:80%;
	padding-bottom:45%;
	height:0;
	margin:0px auto 0 auto;
	z-index:0;
}

#video iframe {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:0;
}

h1 {
	margin:30px 10px 0 20px;
	width:20%;
	position:relative;
}

h2 {
	margin:20px 0;
	width:100%;
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

div.design h2 {
	margin:0;
}

div.sound h2 {
	margin:0px;
}

div.info_block h2 {

}

#lineup {
	padding-top:20px;
	clear:both;
}

#lineup img#lineup_h {
	width:20%;
	margin-left:1%;
}

#lineup ul {
	width:100%;
	margin:10px 0 0 1%;
	padding:0px;
}

#lineup ul li {
	float:left;
	width:24%;
	padding:0;
	margin-bottom:30px;
}
#lineup ul li.current img {
	opacity:0.4;
	filter:alpha(opacity=40); 
}

#navi_b_01 {
	border-left:1px solid #efefef;
}

#navi_b_02 {
	border-left:1px solid #efefef;
	border-right:1px solid #efefef;
}

#navi_b_03, #navi_b_04 {
	border-right:1px solid #efefef;
}

div.info_block {
	height:100%;
	clear:both;
	margin-top:10px;
}

div.text, div.image {
	width:46%;
}

div.text p {
	margin:10px 0;
}

div.info_block .left {
	margin-left:20px;
}

div.info_block .right {
	margin-right:20px;	
}

div.design {
	position:relative;
	padding-bottom:20px;
}
div.design div.text, div.design div.image {
	width:100%;
}

div.design div.image {
	position:relative;
	height:100%;
}
ul.gallery_list {
	position:absolute;
	width:46%;
	right:-10px;
	bottom:0px;
}

ul.gallery_list li {
	position:absolute;
	top:0px;
	right:0px;
	text-align:right;
	width:100%;
}

div.gallery_navi_block {
	width:50%;
	position:absolute;
	height:100%;
	bottom:15px;
	left:0px;
}

dl.gallery_navi {
	width:100%;
	position:absolute;
	bottom:0px;
	right:0;
	margin-right:10px;
}
	
dl.gallery_navi dt {
	clear:both;
	font-size:0.9em;
	padding-top:5px;
	margin-left:7%;
	padding-bottom:5px;
	text-align:right;
	cursor:pointer;
	font-style:italic;
	font-family:serif;
}
dl.gallery_navi dt img {
	width:10%;
}

dl.gallery_navi dd {
	float:right;
	width:25%;
	cursor:pointer;
	text-align:right;
	padding:7px 0;
}

dl.gallery_navi dd img {
	width:70%;
}

dl.gallery_navi dd.current img {
	border:7px solid #ccc;
	overflow:hidden;
	margin:-7px;
}
.list1 {
	z-index:100;
}
.list2 {
	z-index:99;
}
.list3 {
	z-index:98;
}
.list4 {
	z-index:97;
}
.list5 {
	z-index:96;
}
.list6 {
	z-index:95;
}
.list7 {
	z-index:94;
}
.list8 {
	z-index:93;
}
.list9 {
	z-index:92;
}
.list10 {
	z-index:91;
}

div.sound {
	position:relative;
	height:100%;
	border-top:1px solid #e9e9e9;
	border-bottom:1px solid #e9e9e9;
	padding:0;
}

div.sound div.text {
	margin-top:20px;
}

div.extra {
	position:relative;
	border-bottom:1px solid #e9e9e9;
	padding-bottom:30px;
}

div.extra ul {
	margin-left:20px;
}

div.extra ul li {
	list-style-type:disc;
	margin-bottom:10px;
}

div.extra div.image {
	position:relative;
	top:50px;
	left:0px;
	width:46%;
}

div.extra div.image div {
	overflow:hidden;
	position:absolute;
	top:0px;
	left:0px:
	width:100%;
}

div.extra div.image div.list1 {
	opacity:1;
	filter: alpha(opacity=100);
	width:100%;
}

div.extra div.image div.list2 {
	opacity:0;
	filter:alpha(opacity=0);
	width:100%;
}

div.extra ul.extra_img li {
	float:left;
	list-style-type:none;
	text-indent:20px;
	cursor:pointer;
	font-family:serif;
	font-style:italic;	
}
div.extra ul.extra_img li.current {
	font-weight:bold;
}
div.extra ul.extra_img {
	position:absolute;
	bottom:0px;
	right:10px;
}

span.st {
	font-size:0.8em;
}

p.pagetop {
	text-align:right;
	clear:both;
	font-size: 0.8em !important;
	padding-top:20px;
}

a {
	color:#666;
}

div#main p {
	background-color:#fff;
}
/* ========================= MAIN END ========================= */ 





/* ========================= FOOTER ========================= */ 

div#footer {
	margin:0px;
	background:#e9e9e9;
	height:80px;
	border:1px solid #e9e9e9;
}

div#footer p {
	margin-top:10px;
	text-align:right;
}
div#footer p img {
	width:25%;
}

/* ========================= FOOTER END ========================= */ 



/* ========================= Media queries ========================= */ 

/* PC, wide device */
@media screen and (min-width:1024px) {
	.contents {
		max-width:985px;
		min-width:600px;
	}
	
	div#header ul#navi {
		display:block;
	}
	
}

@media screen and (max-width:800px) {
	.contents {
		max-width:700px;
		min-width:480px;
	}
	
	div#header ul#navi {
		display:block;
	}

	div#header ul#navi {
		width:70%;
	}
	
}

/* tablet */
@media screen and (max-device-width:600px) {

	div#header ul#navi {
		width:80%;
		display:block;
	}

	div#header ul#navi li img {
		width:99%;
	}
	#lineup ul li {
		width:24%;
	}
	
	div.info_block h2 {
		width:100%;
	}
	
	div.sound h2 {
		marign-top:3px;
	}
	
	div#footer p {
		background-color:#e9e9e9;
	}
	
	div#footer p img {
		width:35%;
	}
	

}