@charset "UTF-8";


/**************************************************
 base1
**************************************************/

html{
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #000 url(null) fixed;
	color: #333;
	line-height: 150%;
	font-size: 83%;
	font-family: Meiryo, Verdana, "メイリオ", "ＭＳ Ｐゴシック", Hiragino Kaku Gothic Pro, Osaka;
	position: static;
	
}
/* IE6 */
* html body { font-size: 80%; font-family: Meiryo, Verdana, "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; }
* html table { font-size: 80%; }
/* IE7 */
*: first-child+html body { font-size: 80%; }


/**************************************************
 base background : Flash背景 100% x 100%
**************************************************/

#bg_flash{
	z-index: 1;
	position: fixed; 
	top: 0; 
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
#wrap{
	z-index: 2;
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	_position: absolute;
}
	/* ie対策 */
	* html #bg_flash{
		behavior: expression(IEPNGFIX.fix(this));
		position: expression('absolute');
		top: expression(documentElement.scrollTop + 0 + 'px'); 
		margin-left: expression(documentElement.scrollLeft + 0 + 'px'); 
	}


/**************************************************
 ie6、ie7 PNG透過対策
**************************************************/

/*
	pngの透過画像を背景に敷いている場合は
	「class="png_clear"」とすると透過にできる
	<div class="png_clear">xxxxx</div>
*/

	* html .png_clear{
		behavior: expression(IEPNGFIX.fix(this));
	}


/**************************************************
 背景透過画像
**************************************************/

div.b10{ background: url(/img/bg_b10.png) repeat; color: #fff; }
div.b20{ background: url(/img/bg_b20.png) repeat; color: #fff; }
div.b30{ background: url(/img/bg_b30.png) repeat; color: #fff; }
div.b40{ background: url(/img/bg_b40.png) repeat; color: #fff; }
div.b50{ background: url(/img/bg_b50.png) repeat; color: #fff; }
div.b60{ background: url(/img/bg_b60.png) repeat; color: #fff; }
div.b70{ background: url(/img/bg_b70.png) repeat; color: #fff; }
div.b80{ background: url(/img/bg_b80.png) repeat; color: #fff; }
div.b90{ background: url(/img/bg_b90.png) repeat; color: #fff; }
div.w10{ background: url(/img/bg_w10.png) repeat; color: #000; }
div.w20{ background: url(/img/bg_w20.png) repeat; color: #000; }
div.w30{ background: url(/img/bg_w30.png) repeat; color: #000; }
div.w40{ background: url(/img/bg_w40.png) repeat; color: #000; }
div.w50{ background: url(/img/bg_w50.png) repeat; color: #000; }
div.w60{ background: url(/img/bg_w60.png) repeat; color: #000; }
div.w70{ background: url(/img/bg_w70.png) repeat; color: #000; }
div.w80{ background: url(/img/bg_w80.png) repeat; color: #000; }
div.w90{ background: url(/img/bg_w90.png) repeat; color: #000; }


/**************************************************
 base2
**************************************************/

body,a{
	color: #fff;
}

h1#logo{
	z-index: 30;
	position: fixed;
	bottom: 20px;
	right: 5px;
	width: 30px;
	height: 262px;
	background: url(/img/logo_h.png) no-repeat;
}
h1#logo span{
	display: none;
}
h1#logo a{
	width: 30px;
	height: 262px;
	display: block;
}



div#plus{
	z-index: 101;
	position: fixed;
	bottom: 1px;
	right: 30px;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
#plus span.left{
	float: left;
	width: 110px;
}
#plus span.gplus{
	width: 70px;
}

div.fb-like{
	display: inline;
}


/**************************************************
 main
**************************************************/

div#main{
	z-index: 40;
	position: fixed;
	min-width: 350px;
	bottom: 0;
	background: url(/img/bg_b50.png) repeat;
	color: #fff;
	width:100%;
	text-align:center;
	clear: both;
}
div#navi{
	padding: 3px 0 3px 30px;
	color: #fff;
	text-align:left;
}
div#navi a,
div#navi span{
	padding: 0;
	margin: 0 7px;
	color: #fff;
	text-decoration: none;
}
div#navi a:hover,
div#navi span:hover{
	color: #ff0000;
}
div#contents{
	display: none;
	margin: 10px auto;
	width: 400px;
	text-align: left;
}
div#photodata{
	padding: 5px 0;
}
div#credit{
	padding: 5px 0;
	text-align: right;
}
div#caption div.right{
	float: right;
}

div#photodata div.title{
	margin-bottom: 5px;
	font-size: 150%;
}
div#photodata div.date,
div#photodata div.camera{
	text-align: right;
}

	/* IE6 */
	* html #main { background: #000; }
	* html #navi { background: #000; }
	* html #news { background: #000; }
	* html #category { background: #000; }
	/* IE7 */
	*: first-child+html #main { background: #000; }
	*: first-child+html #navi { background: #000; }
	*: first-child+html #news { background: #000; }
	*: first-child+html #category { background: #000; }


/**************************************************
 taglist
**************************************************/

div#taglist{
	margin: 10px;
}
div#taglist h2{
	font-size: 130%;
}
div#taglist h3{
	font-size: 110%;
	clear: both;
}
div#taglist ul{
	margin: 0 20px 30px 20px;
}
div#taglist li{
	width: 150px;
	font-size: 110%;
	float: left;
}


/**************************************************
 photolist
**************************************************/

div#photolist div.thumbnail{
	margin: 3px;
	padding: 3px;
	width: 150px;
	height: 150px;
	border: 1px #333 solid;
	float: left;
}


/**************************************************
 information
**************************************************/

div#information{
	margin: 10px auto;
	width: 900px;
}
div#information div.title{
	padding: 10px 0;
	margin: 0 0 10px 0;
	border-bottom: 2px #ccc solid;
	font-size: 140%;
}
div#information h2{
	padding: 5px 0;
	border-bottom: 1px #666 solid;
	font-size: 120%;
}
div#information h3{
	font-size: 110%;
}
div#information div.contents{
	margin: 10px 20px;
}
div#information ul{
	margin: 10px 0 10px 40px;
	list-style-type: circle;
}
div#information ol{
	margin: 10px 0 10px 40px;
	list-style-type: decimal;
}