@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
body{
	font-size			: 14px;
	line-height			: 1.5;
	color				: #252525;
	font-family			: "ヒラギノ角ゴ Pro W3",'Hiragino Kaku Gothic Pro W3',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	background			: url(../images/01.jpg) center top repeat fixed;
}

/* inline element
-----------------------------------------------------*/
/* link
----------------------------------*/
a:link{
	text-decoration		: underline;
	color				: #0099CC;
}
a:visited{
	color				: #003399;
}
a:hover{
	text-decoration		: none;
}
a:active{
	color				: #FF0033;
}
a[name]{
	text-decoration		: none;
	color				: #252525;
}
/*-----------------------------------------------------
 class
-----------------------------------------------------*/
/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}

/* fixed
-----------------------------------------------------*/
.fixed{
	position			: fixed;
	width				: 100%;
}

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
}
#wrap{
	background			: url(../images/header-bg.png) center top no-repeat;
}
/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	clear				: both;
	position			: relative;
	margin				: 0 auto;
}
#header{
	width				: 860px;
}
#profile{
	width				: 800px;
	padding				: 0 30px;
}
#contents{
	width				: 860px;
}
#footer{
	width				: 100%;
	background: #666 url(../images/footer-bg.gif) left top repeat-x;
}

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header .logo{
	position			: absolute;
	left				: -77px;
	top					: -40px;
}
/*-----------------------------------------------------
 profile
-----------------------------------------------------*/
#profile h1{
	display				: none;
}

#profile dl{
	margin				: 0 0 60px 0;
	padding				: 230px 0 0 0;
	*zoom				:1;
}

/* name */
#profile dt{
	position			: absolute;
	left				: 425px;
	top					: 90px;
	color				: #000;
}
#profile dt ruby{
	position			: relative;
	display				: inline-block;
	height				: 40px;
	padding				: 23px 0 0 0;
	line-height			: 1;
	font-size			: 30px;
}
#profile dt ruby .surname{ padding: 0 0.5em 0 0; }
#profile dt ruby rt{ font-size: 15px; }
#profile dt ruby rt span{ position: absolute; }
#profile dt ruby rt span.surname{
	left				: 0px;
	top					: 0px;
	padding				: 0 0 0 4px;
	letter-spacing		: 3px;
}
#profile dt ruby rt span.first-name{
	right				: 0px;
	*right				: 20px;
	top					: 0px;
}

/* title */
#profile .title{
	position			: absolute;
	left				: 430px;
	top					: 160px;
	font-size			: 16px;
	color				: #000;
}

/* profile */
#profile .profile{
	width				: 370px;
}

/* links */
#profile .links{
	position			: absolute;
	left				: 430px;
	top					: 240px;
	font-size			: 12px;
}
#profile .links ul{  }
#profile .links ul li{
	padding				: 0 0 5px 0;
}
#profile .links ul li ul{  }
#profile .links ul li ul li{
	float				: left;
	padding				: 0 5px 0 0;
}

/* replica */
#profile .replica{
	position			: absolute;
	left				: 430px;
	bottom				: 0px;
	font-size			: 12px;
	color				: #666;
}
/*-----------------------------------------------------
 floatingHeader
-----------------------------------------------------*/
.floatingHeader{
	z-index				: 50;
	top					: -80px;
	width				: 100%;
	height				: 80px;
	background			: url(../images/floating_bg.png) left top repeat-x;
}
.floatingHeader dl{
	position			: relative;
	overflow			: hidden;
	clear				: both;
	margin				: 0 auto;
	width				: 900px;
}
.floatingHeader dl dt{
	float				: left;
	padding				: 5px 0 0 0;
}
.floatingHeader dl dd{
	float				: right;
}
.floatingHeader dl dd ul{
	padding				: 35px 0 5px 0;
}
.floatingHeader dl dd ul li{
	display				: inline-block;
	padding				: 0 0 0 5px;
}
.floatingHeader dl dd ul li a{
	transition			: opacity .3s;
	opacity				: 0.7;
}
.floatingHeader dl dd ul li a:hover{
	opacity				: 1;
}

/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
#contents h1{
	display				: none;
}

/* resultsList
-----------------------------------------------------*/
#contents .resultsList{
	margin				: 0 0 30px 0;
}
#contents .resultsList>li{
	margin				: 0 0 10px 0;
	padding				: 5px;
	background			: url(../images/item-bg.gif) left top repeat;
	*zoom				: 1;
}
#contents .resultsList li.loading,
#contents .resultsList li.noscript{
	padding				: 10px 20px;
	background			: #FFF;
	text-align			: center;
}
#contents .resultsList li dl{
	padding				: 25px;
	background			: #FFF;
}

/* name */
#contents .resultsList dl dt{
	font-family			: OCRB,OCRA,Helvetica,sans-serif;
	border-bottom		: 1px solid #999;
	padding				: 5px 0 3px 0;
}
#contents .resultsList dl dt a,
#contents .resultsList dl dt .no-link{
	overflow			: hidden;
	display				: block;
	position			: relative;
	width				: 100%;
	min-height			: 30px;
	line-height			: 30px;
	text-decoration		: none;
	color				: #000;
}
#contents .resultsList dl dt .no-link,
#contents .resultsList dl dt a:first-child{
	font-size			: 30px;
}
#contents .resultsList dl dt a .site-url{
	float				: right;
	font-size			: 14px;
}
#contents .resultsList dl dt a:hover span{
	opacity				: 0.8;
}
#contents .resultsList dl dt .no-link small{
	display				: inline-block;
	padding				: 0 10px;
	font-size			: 18px;
	color				: #999;
}

/* data */
#contents .resultsList dl .data{
	padding				: 15px 0;
	font-size			: 10px;
}

/* ss */
#contents .resultsList dl .ss,
#contents .html_photoset{
	overflow			: hidden;
	clear				: both;
	position			: relative;
	margin				: 0 auto;
	width				: 700px;
	line-height			: 1px;
}

#contents .resultsList dl .ss ul li img{
	width				: 700px;
	height: auto;
}



/* attention
-----------------------------------------------------*/
#contents .attention{
	margin				: 30px 0 50px 0;
	font-size			: 12px;
}

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer .container{
	position			: relative;
	margin				: 0 auto;
	width				: 860px;
	height				: 50px;
	padding				: 20px 0 0 0;
	color				: #fff;
}

/* pagetop */
.fadeTopBtn a {
	display				: block;
	border-radius		: 5px;
	padding				: 15px 20px;
	background			: rgba(0,0,0,0.8);
	text-decoration		: none;
	font-size			: 20px;
	color				: #fff;
	transition			: background 0.2s linear;
}
.fadeTopBtn a:link {
	color				: #fff;
}
.fadeTopBtn a:hover {
	color				: #fff;
	background			: #dc143c;
}
/* copy */
#footer .container .copy{
	line-height			: 20px;
	font-size			: 10px;
	font-family: Verdana;
}
#footer .container .copy .copy-mark{
	display				: inline-block;
	margin				: 0 10px 0 0;
	width				: 35px;
	height				: 20px;
	padding				: 5px 0 0 0;
	vertical-align		: 0;
	background			: url(../images/footer_copy-bg.png) left top no-repeat;
	text-align			: center;
	font-size			: 12px;
	color				: #666;
}