@charset "utf-8";

/*
01.all
02.headBox
03.leftBox
04.rightBox
05.footBox
06.other
*/

/*----- 01.all -----*/
body {
	margin:0;
	padding:0;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',' Meiryo', 'メイリオ', 'sans-serif';
	font-size:14px;
	color:#B87070;
}

body a {
	color:#B87070;
	text-decoration:none;
}

body a:hover {
	text-decoration:underline;
}
/*----- 01.all end-----*/

/*----- 02.headBox -----*/
#headBox {
	width:920px;
	padding:20px;
	margin:0 auto;
}
/*----- 02.headBox end -----*/

/*----- 03.leftBox -----*/
#main {
	width:960px;
	margin:0 auto;
}


#leftBox {
	float:left;
	width:140px;
	padding:20px 0 0 40px;
}

#leftBox ul {
	margin:0;
	padding:0;
}

#leftBox ul li {
	margin:0 0 10px 0;
	padding:0;
	list-style:none;
}

#leftBox ul li#self span#colName {
	font-size:30px;
	color:#B87070;
}

#leftBox ul li#toMail {
	margin-top:50px;
	margin-bottom:300px;
}

#leftBox ul li dl dd {
	margin:10px 0 0 1em;
}

#leftBox ul li dl dd ul li.colP span {
	color: #F9C;
}

#leftBox ul li dl dd ul li.colR span {
	color: #F00;
}

#leftBox ul li dl dd ul li.colO span {
	color: #F90;
}

#leftBox ul li dl dd ul li.colY span {
	color: #FC0;
}

#leftBox ul li dl dd ul li.colG span {
	color: #399;
}

#leftBox ul li dl dd ul li.colB span {
	color: #39F;
}

#leftBox ul li dl dd ul li.colK span {
	color:#000;
}
/*----- 03.leftBox end -----*/

/*----- 04.rightBox -----*/
#rightBox {	
	float:left;
	width:720px;
	padding:10px 0 20px 50px;	
	position:relative;
}

.pageBox p {
	width:300px;
	margin:0 50px 30px 0;
	float:left;
	text-align:right;
	font-size:12px;
}
.pageBox p img {
	margin-bottom:10px;
}

.colorBox p.lBox {
	width:648px;
	border:1px solid #B87070;
	text-align:center;
	margin-bottom:30px;
}

.colorBox p.sBox {
	width:298px;
	height:132px;
	margin:0 50px 30px 0;
	float:left;
	text-align:center;
	border:1px solid #B87070;
}

#view {
	overflow:hidden;
	width:650px;
	height:300px;
	text-align:center;
	position: absolute;
	top:0px;
	left:50px;
}
#view p {
	margin:0;
}

#viewP {
	overflow:hidden;
	width:650px;
	height:300px;
	text-align:center;
	position: absolute;
	top:0px;
	left:50px;
}

#viewP p {
	margin:0;
}

#thumbBtn {
	position:absolute;
	top:350px;
	left:50px;
	padding:0;
}
#caption {
	position:absolute;
	top:620px;
	left:100px;
	text-align:left;
	width:220px;
}

#caption li {
	list-style:none;
}


#thumbBtn li {
	width:298px;
	height:132px;
	margin:0 50px 30px 0;
	float:left;
	cursor:pointer;
	list-style:none;
	
}
#thumbBtn li.active {
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}
#thumbBtn li img {
	border: none;
}

/*----- 04.rightBox end -----*/

/*----- 05.footBox -----*/
#pic {
	width:920px;
	margin:0 auto 50px auto;
	text-align:center;
}

#footBox {
	width:920px;
	text-align:center;
	border-top:1px solid #B87070;
	margin:20px auto 50px auto;
	font-size:10px;
	padding:20px;
}
/*----- 05.footBox end -----*/

/*----- 06.other -----*/ 
.clearfix:after {  
	content: ".";   
	display: block;   
	height: 0;   
	clear: both;   
	visibility: hidden;  
}  

.clearfix { display: inline-table; }  
 
/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */  

li.mt50 {
	margin-top:50px;
}

a img {
	border:none;
}

a:hover img {
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}

a:hover {
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
/*----- 06.other end -----*/