@charset "utf-8";
@import url("alpha.css");
@import url("bate.css");
@import url("works.css");
@import url("shop.css");
@import url("tv.css");
@import url("tv_bate.css");
@import url("catalog.css");
/*
Theme Name: Sclover Design 2010
Theme URI: http://www.scloverdesign.com/
Description: SclovrDesignの2010年テーマ。
Author: Yosuke Ishizaka
Version: 1.0
Tags: 
*/

/* Reset default browser CSS. Based on work by Eric Meyer: http://www.cpfe.net/yosukeishizaka/all/
-------------------------------------------------------------- */



/* ---------------------
 * FONTSIZE MODEL * 
 * ---------------------
 *63% ->	10pxに相当
 *70% ->	11pxに相当
 *75% ->	12pxに相当
 *82% ->	13pxに相当
 *88% ->	14pxに相当
 *94% ->	15pxに相当
 * 100% ->	16pxに相当
 * 107% ->	17pxに相当
 * 113% ->	18pxに相当
 * 119% ->	19pxに相当
 * 125% ->	20pxに相当
 * --------------------- */






/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 01.全体*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


body {
	margin:0;
	padding:0;
	text-align:center;
	background-color: #000000;
	font-family : "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Geneva, Arial, Verdana, sans-serif;

	}


H1,H2,H3,H4{
	margin-bottom : 0px;
	font-family: "Arial","Myriad Pro","verdana","Helvetica","sans-serif";
	font-size : 18px ;
	}


*{
	margin: 0;
	padding: 0;
	}


img {
	border-style:none;
	}


A {
	color : #000000 ;
	text-decoration : none ;
	}


A:hover {
	color : #000000 ;
	text-decoration : underline ;
	}

p {
	font-size : 12px ;
	line-height : 160%;
	}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 02.レイアウト構成*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

html,body,div#footer_fix {
	height:100%;
	}


body > div#footer_fix {
	height: auto;
	min-height: 100%;
	}


div#footer_fix {
	width:100%;
	margin:0 auto;
	text-align:center;
	}


div#header_area {
	width:100%;
	height:50px;
	margin-bottom:45px;
	}


div#header_line {
	position : absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	background-color: #000000;
	filter: alpha(opacity=60);
	-moz-opacity: 0.60;
	-khtml-opacity: 0.60;
	opacity: 0.60;
	}


div#header {
	position: relative;
	width : 976px;
	margin : 0px auto;
	text-align:left;
	}


div#contents_area {
	padding-bottom:335px;/* フッター+15pxの高さと同じ値にする */
	}


div#contents_area {
	clear:both;
	width:100%;
	}


div#contents {
	width : 976px;
	margin : 0px auto;
	text-align:left;
	background : url(./images/back_white.png);
	}


div#contents:after { /* 回り込み解除 */
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}


div#footer_area {
	position:relative;
	margin-top:-320px;/* フッターの高さと同じ値にする */
	height:320px;/* フッターの高さを指定 */
	}


div#footer_line {
	width: 100%;
	height: 320px;/* フッターの高さと同じ値にする */
	background-color: #000000;
	filter: alpha(opacity=60);
	-moz-opacity: 0.60;
	-khtml-opacity: 0.60;
	opacity: 0.60;
	}


div#footer {
	position: relative;
	top: -320px;/* フッターの高さと同じ値にする */
	width : 976px;
	margin : 0px auto;
	text-align:left;
	/*overflow: hidden;*/
	}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 03.ヘッダーの中身*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

div#header H1 {
	position: absolute;
	top: 10px;
	left: 5px;
	width: 235px;
	height: 30px;
	display: block;
	background-image: url(./images/scloverdesign.png);
	background-repeat: no-repeat;
	font-size: 75%;
	}

div#header H1 A {
	width: 235px;
	height: 30px;
	display: block;
	text-indent: -9999px;
	}

div#infomation {
	position: absolute;
	top: 20px;
	right: 2px;
	width: 400px;
	height: 30px;
	display: block;
	}

div#infomation ul {
	font-size: 75%;
	list-style-type : none;
	}

div#infomation ul li {
	float: right;
	padding: 0px 5px 0px 5px;
	border-left: 1px solid #FFFFFF;
	}

div#infomation ul li a{
	color: #FFFFFF;
	}

div#infomation ul li a:hover{
	color: #898989;
	}



/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 04.フッター中身*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


div#closeup {
	position : absolute;
	top : 15px;
	left : 0px;
	}

div#blog {
	position : absolute;
	top : 15px;
	left : 338px;
	}

div#banner1 {
	position : absolute;
	top : 171px;
	left : 338px;
	}

div#banner2 {
	position : absolute;
	top : 236px;
	left : 338px;
	}

div#footer_menu {
	position : absolute;
	top : 15px;
	left : 756px;
	}


div#closeup h3, div#blog h3, div#footer_menu h3 {
	font-family: "Arial","Myriad Pro","verdana","Helvetica","sans-serif";
	font-size : 12px ;
	color: #FFFFFF;
	margin : 0px 0px 10px 0px;
	}

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

div#closeupbox {
	width : 320px;
	height : 255px;
	overflow : hidden;
	background-image : url(./images/back_black.png);
	}


div#closeupbox ul {
	margin : 12px 20px 0px 10px ;
	padding : 0;
	list-style-type: none;
	}

div#closeupbox li {
	clear : both;
	hight : 50px;
	font-size : 70%;
	line-height : 140%;
	color : #4d4d4d ;
	}

div#closeupbox li img{
	float: left;
	margin: 0 7px 10px 0;
	}

div#closeupbox li a{
	color : #FFFFFF ;
	text-decoration : none ;
	}

div#closeupbox li a:hover{
	color : red ;
	text-decoration : none ;
	}

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

div#blogbox {
	width : 400px;
	height : 126px;
	overflow : hidden;
	background-color: #000000;
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
	-khtml-opacity: 0.70;
	opacity: 0.70;
	}

div#blogbox ul {
	margin : 11px 20px 0px 20px ;
	padding : 0;
	list-style-type: none;
	}

div#blogbox li {
	font-size : 70%;
	line-height : 190%;
	}

div#blogbox li a{
	color : #FFFFFF ;
	text-decoration : none ;
	}

div#blogbox li a:hover{
	color : red ;
	text-decoration : none ;
	}

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

div#banner1 ul, div#banner2 ul {
	margin : 0 ;
	padding : 0;
	list-style-type: none;
	}

div#banner1 ul li, div#banner2 ul li {
	float: left;
	}

li#quiksilver {
	width: 120px;
	height: 60px;
	display: block;
	margin: 0px 20px 0px 0px;
	background : url(./images/quiksilver.png);
	}

li#quiksilver a {
	display:block;
	width:120px;
	height:60px;
	background :url(./images/quiksilver.gif) ;
	text-indent:-9999em;
	}

li#quiksilver a:hover {
	background : url(./images/quiksilver_over.gif);
	}

li#roxy {
	width: 120px;
	height: 60px;
	display: block;
	margin: 0px 20px 0px 0px;
	background: url(./images/roxy.gif);
	}

li#roxy a {
	width: 120px;
	height: 60px;
	display: block;
	text-indent: -5000px;
	}

li#roxy a:hover {
	background : url(./images/roxy_over.gif);
	}

li#bonfire {
	width: 120px;
	height: 60px;
	display: block;
	margin: 0px 0px 5px 0px;
	background: url(./images/bonfire.gif);
	}

li#bonfire a {
	width: 120px;
	height: 60px;
	display: block;
	text-indent: -5000px;
	}

li#bonfire a:hover {
	background : url(./images/bonfire_over.gif);
	}


li#scorpionheadwear {
	width: 120px;
	height: 60px;
	display: block;
	background: url(./images/scorpion.gif);
	}

li#scorpionheadwear a {
	width: 120px;
	height: 60px;
	display: block;
	text-indent: -5000px;
	}

li#scorpionheadwear a:hover {
	background: url(./images/scorpion_over.gif);
	}

li#sunclothing {
	width: 120px;
	height: 60px;
	display: block;
	margin: 0px 20px 0px 20px;
	background: url(./images/sunclothing.gif);
	}

li#sunclothing a {
	width: 120px;
	height: 60px;
	display: block;
	text-indent: -5000px;
	}

li#sunclothing a:hover {
	background: url(./images/sunclothing_over.gif);
	}

li#stonewallet {
	width: 120px;
	height: 60px;
	display: block;
	background: url(./images/stonewallet.gif);
	}

li#stonewallet a {
	width: 120px;
	height: 60px;
	display: block;
	text-indent: -5000px;
	}

li#stonewallet a:hover {
	background: url(./images/stonewallet_over.gif);
	}

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

div#footer_menu ul {
	width: 220px;
	height: 255px;
	display: block;
	margin : 0 ;
	padding : 0 ;
	}

div#footer_menu ul li {
	float: left;
	}

div#footer_menu ul li a {
	color: #FFFFFF;
	font-size: 12px;
	font-weight : bolder;
	line-height: 3.3em;
	font-family: "Arial","Myriad Pro","verdana","Helvetica","sans-serif";
	text-decoration : none ;
	background-color: #000000;
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
	-khtml-opacity: 0.70;
	opacity: 0.70;
	}


li#m_works, li#m_collection, li#m_blog, li#m_closeup {
	width: 220px;
	height: 40px;
	display: block;
	margin: 0px 0px 3px 0px;
	}

li#m_tv, li#m_friends {
	width: 80px;
	height: 40px;
	display: block;
	margin: 0px 3px 3px 0px;
	}

li#m_dealer, li#m_company {
	width: 137px;
	height: 40px;
	display: block;
	margin: 0px 0px 3px 0px;
	}


li#m_works a, li#m_collection a, li#m_blog a, li#m_closeup a {
	width: 210px;
	height: 40px;
	display: block;
	padding: 0px 0px 0px 10px;
	}

li#m_tv a, li#m_friends a {
	width: 70px;
	height: 40px;
	display: block;
	padding: 0px 0px 0px 10px;
	}

li#m_dealer a,li#m_company a {
	width: 127px;
	height: 40px;
	display: block;
	padding: 0px 0px 0px 10px;
	}

li#m_tv,li#m_dealer {
	margin-bottom: 3px;
	}

li#m_works a:hover, li#m_collection a:hover, li#m_blog a:hover, li#m_closeup a:hover,
li#m_tv a:hover, li#m_friends a:hover, li#m_dealer a:hover,li#m_company a:hover {
	color: #000000;
	background-color: #FFFFFF;
	text-decoration: none;
	}

div#copyright {
	top: 305px;
	right: 0px;
	position : absolute;
	width: 100%;
	margin: 0px 10px 0px auto;
	text-align: right;
	}

div#copyright p {
	font-size: 10px;
	font-family: "Arial","Myriad Pro","verdana","Helvetica","sans-serif";
	color : #999999
	}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 05.fixed style */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

div#fixed {
	position:fixed;
	top:50px;
	right:0px;
	}

div#fixed ul li {
	margin: 0 0 3px 0px;
	}

li#fixed_scorpion {
	width: 30px;
	height: 100px;
	display: block;
	background: url(./images/fix_scorpion.gif);
	}

li#fixed_scorpion a {
	width: 30px;
	height: 100px;
	display: block;
	text-indent: -5000px;
	}

li#fixed_scorpion a:hover {
	background: url(./images/fix_scorpion_over.gif);
	}

li#twitter {
	width: 30px;
	height: 100px;
	display: block;
	background: url(./images/twitter.gif);
	}

li#twitter a {
	width: 30px;
	height: 100px;
	display: block;
	text-indent: -5000px;
	}

li#twitter a:hover {
	background: url(./images/twitter_over.gif);
	}

li#youtube {
	width: 30px;
	height: 100px;
	display: block;
	background: url(./images/youtube.gif);
	}

li#youtube a {
	width: 30px;
	height: 100px;
	display: block;
	text-indent: -5000px;
	}

li#youtube a:hover {
	width: 30px;
	height: 100px;
	background: url(./images/youtube_over.gif);
	}

li#mixi {
	width: 30px;
	height: 100px;
	display: block;
	background: url(./images/mixi.gif);
	}

li#mixi a {
	width: 30px;
	height: 100px;
	display: block;
	text-indent: -5000px;
	}

li#mixi a:hover {
	width: 30px;
	height: 100px;
	background: url(./images/mixi_over.gif);
	}

* html div#fixed {
	position:absolute;
	}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 06.menu */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


div#menu_area {
	width : 100%;
	position : absolute;
	top : 50px;
	left : 0px;
	}

div#wrapper {
	width : 977px;
	margin:0 auto;
	}


/*------------------------------------
	#menu スタイル
-------------------------------------- */
dl#menu{
	background-color: #FFFFFF;
	filter: alpha(opacity=95);
	-moz-opacity: 0.95;
	-khtml-opacity: 0.95;
	opacity: 0.95;
	float: left;
	font-family: "Arial","Myriad Pro","verdana","Helvetica","sans-serif";
	}

dl#menu ul{
	list-style: none;
	}

dl#menu dd{
	border-right: solid 1px #999999;
	float: left;
	text-align: center;
	position: relative;
	width: 121px;
	height: 30px;
	}

dl#menu dd a{
	display: block;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	font-size: 63%;
	line-height: 30px;
	width: 121px;
	height: 30px;
	}

dl#menu dd a:hover{
	background-color: #000000;
	color: #FFFFFF;
	}

/*グローバルメニュー下、プルダウンメニューのスタイル。*/

dl#menu dd ul{
	background-color: #FFFFFF;
	border-left: solid 1px #999999;
	border-top: solid 1px #999999;
	border-right: solid 1px #999999;
	border-bottom: solid 1px #999999;
	display: none;
	position: absolute;
	top: 30px;
	left: -1px;
	z-index: 0;
	}

dl#menu dd ul a{
	font-size: 63%;
	color: #000000;
	height: auto;
	line-height: 100%;
	text-align: left;
	padding: 5px 10px;
	width: 101px;
	}

dl#menu dd ul a.hierarchy{
	background: url(./images/gmArrow.gif) 107px center no-repeat;
	}

/*プルダウンメニュー、マウスオーバー時のスタイル。*/

dl#menu dd ul li.rollOver{
	background-color: #000000;
	}

dl#menu dd ul li.rollOver a.rollOverA{
	color: #FFFFFF;
	}

dl#menu dd ul li{
	position: relative;
	}

dl#menu dd ul li ul{
	display: none;
	position: absolute;
	top: 0px;
	left: 120px;
	z-index: 0;
	}




/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 06.menu */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



div#bg {
	position : fixed;
	top : 0px;
	right : 0px;
	z-index : -1;
	}

div#bg img{
	min-height:50%;
	min-width:50%;
	margin:0 auto;
	visibility:hidden;
	}


* html div#bg {
	position:absolute;
	}