﻿@charset "utf-8";
/* *************************************

	住友商事　Estilo[エスティーロ]
	
	top.css

************************************* */



/*#containts-in{
	padding-top: 25px;
}*/
#share{
	padding:6px 0px;
	line-height:1;
	float:none;
	text-align:right;
}



/*  01
------------------------------------------------  */

/* title */

#special{
	float:left;
	width:181px;
}
	.top h2.special{
		width:180px;
		height:300px;
	}
	.top .special-tx{
		color:#444;
		margin-top:5px;
	}
	#special p a .tx-normal{font-weight:normal;}

#feature{
	float:right;
	width:476px;
}
	.top h2.feature{
		/*float:right;*/
		width:476px;
		height:300px;
	}
	.top .feature-tx{
		/*float:right;*/
		color:#444;
		margin-top:5px;
	}

/* visual */

.top .db{display:block;}
.top .dn{display:none;}



/* link */

.top a:hover, .top a:hover img{
	opacity:0.7;
	filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
}





/*  02
------------------------------------------------  */

/* onstyle */
.top .onstyle{
	width: 668px;
	margin-top: 30px;
	}	
.top .onstyle-in{
	width: 423px;
	float: left;
	}
.top .onstyle img{
	width: 245px;
	float: right;
	}
	.top .onstyle h3{
		width: 423px;
		height: 26px;
		background: url(/img/top/01/cap-onstyle.gif) left top no-repeat;
		text-indent: -9999px;
		}
	.top .onstyle p{
		width: 423px;
		height: 115px;
		background: url(/img/top/01/lead-onstyle.gif)  left top no-repeat;
		text-indent: -9999px;
		}
	.top .onstyle ul li{
		width: 132px;
		margin-right: 5px;
		float: left;
		}
		.top .onstyle ul li a{
			display: block;
			width: 132px;
			height: 81px;
			background-image: url(/img/top/01/nav-onstyle.jpg);
			background-repeat: no-repeat;
			text-indent: -9999px;
			}
		.top .onstyle ul li a:hover{
			opacity: 0.7;
			filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
			}
		.top .onstyle ul li.commute a{ background-position: 0 0; }
		.top .onstyle ul li.lunch a{ background-position: -137px 0; }
		.top .onstyle ul li.meeting a{ background-position: -274px 0; }

/* offstyle */
.top .offstyle{
	width: 668px;
	margin-top: 30px;
	padding-bottom: 15px;
	border-bottom: solid 1px #81753d;
	}
.top .offstyle-in{
	width: 332px;
	float: right;
	}
.top .offstyle img{
	width: 336px;
	float: left;
	}
	.top .offstyle h3{
		width: 332px;
		height: 26px;
		background: url(/img/top/01/cap-offstyle.gif) left top no-repeat;
		text-indent: -9999px;
		}
	.top .offstyle p{
		width: 332px;
		height: 118px;
		background: url(/img/top/01/lead-offstyle.gif) left top no-repeat;
		text-indent: -9999px;
		}
.top .offstyle ul{
	width: 668px;
	margin-top: 14px;
	}
 	.top .offstyle li{
		width: 220px;
		height: 46px;
		float: left;
		margin-right: 4px;
		}
	.top .offstyle li.last{ margin-right: 0; }
	.top .offstyle li a{
		display: block;
		width: 220px;
		height: 46px;
		background-image: url(/img/top/01/nav-offstyle.gif);
		background-repeat: no-repeat;
		text-indent: -9999px;
		}
		.top .offstyle li a:hover{
			opacity: 0.7;
			filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
			}
		.top .offstyle li.off01 a{ background-position: 0 0; }
		.top .offstyle li.off02 a{ background-position: -224px 0; }
		.top .offstyle li.off03 a{ background-position: -448px 0; }

/* category3 */
.top .category3{
	width: 418px;
	float: left;
	margin-top: 9px;
	padding-right:21px;
	border-right: solid 1px #81753d;
	}
.top .categoty-cap a{
	color: #81753d;
	font-weight: bold;
	font-size: 120%;
	line-height: 1.2;
	}

/* how to */
.top .howto{
	width: 259px;
	border-bottom: solid 1px #81753d;
	background: url(/img/top/01/img-howto.gif) left top no-repeat;
	padding-left: 159px;
	padding-bottom: 15px;
	}
	.top .howto h3{
		width: 259px;
		height: 119px;
		}
	.top .howto h3 a{
		display: block;
		width: 259px;
		height: 128px;
		background: url(/img/top/01/cap-howto.gif) left top no-repeat;
		text-indent: -9999px;
		}

/* snap */
.top .snap{
	width: 260px;
	min-height: 120px;
	height: auto !important;
	height: 120px;
	border-bottom: solid 1px #81753d;
	background: url(/img/top/01/img-snap.gif) right top no-repeat;
	padding-right: 158px;
	padding-bottom: 15px;
	}
	.top .snap h3{
		width: 260px;
		height: 69px;
		}
	.top .snap h3 a{
		display: block;
		width: 260px;
		height: 69px;
		background: url(/img/top/01/cap-snap.gif) left top no-repeat;
		text-indent: -9999px;
		}

/* seminar */
.top .seminar{
	width: 262px;
	background: url(/img/top/01/photo-seminar.jpg) left top no-repeat;
	margin-top: 15px;
	padding-left: 156px;
	}
	.top .seminar h3{
		width: 262px;
		height: 95px;
		}
	.top .seminar h3 a{
		display: block;
		width: 262px;
		height: 95px;
		background: url(/img/top/01/cap-seminar.gif) left top no-repeat;
		text-indent: -9999px;
		}

/* brand */
.top .brand{
	width: 210px;
	float: right;
	margin-top: 9px;
	/*padding-left:21px;
	border-left: solid 1px #81753d;*/
	}
	.top .brand h3{
		width: 210px;
		height: 26px;
		background: url(/img/top/01/cap-brand.gif) left top no-repeat;
		text-indent: -9999px;
		}
	.top .brand h4{
		width: 210px;
		height: 34px;
		background: url(/img/top/01/cap-history.gif) left top no-repeat;
		text-indent: -9999px;
		}
	.top .brand a:hover img{
		opacity: 0.7;
		filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
		}





/*  03
------------------------------------------------  */

/* whats-new */

#whats-new{
	border:2px solid #ffffff;
	padding:4px 9px;
	background-color:#f6f6f1;
	margin-bottom:30px;
	margin-top:8px;}
	
	#whats-new h2{
		background:url(/img/top/03/Estilo_top-whatsnew.gif) no-repeat; 
		height:18px;
		width:648px;
		text-indent:-9999px;
		margin-bottom: 6px;
		border-bottom:1px solid #d51b77;
	}
	#whats-new li{
		background:url(/img/top/03/ya.gif) no-repeat scroll left 2px;
		text-indent:1em;
		background-color:#f6f6f1;
		border-bottom:1px dotted #CCCCCC;
		margin-bottom:6px;
		padding-bottom:4px;
	}
#whats-new li.list-none{border-bottom:none; 
		margin-bottom:0;
		padding-bottom:0;
 }
 #whats-new li a{color:#444444; font-weight:normal;}
 
 #whats-new li strong{font-weight:bold;}
#whats-new span{color:#ff0099;}

/* 03共通 */

.contents-long{
	width:668px;
	margin-bottom:30px;
	background:url(/img/top/03/Estilo_top-ttl-long.gif) repeat-x;
}
.contents-short-l{
	float:left;
	width:328px;
	margin-bottom:30px;
	background:url(/img/top/03/Estilo_top-ttl-long.gif) repeat-x;
}
.contents-short-r{
	float:right;
	width:326px;
	margin-bottom:30px;
	background:url(/img/top/03/Estilo_top-ttl-long.gif) repeat-x;
}
.contents-short-l a:hover img{
			opacity: 0.7;
			filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
			}
.contents-short-r a:hover img{
			opacity: 0.7;
			filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
			}
	.contents-long h2, .contents-short-l h2, .contents-short-r h2{
		float:left;
		height:38px;
		width:162px;
		text-indent:-9999px;
	}
	.contents-long h3, .contents-short-l h3, .contents-short-r h3{
		color:#8a1940;
		font-weight:bold;
		margin-bottom:6px;
	}
	.contents-long h3 {
	font-size:130%;
	}
	.contents-short-l h3, .contents-short-r h3{
	font-size:100%;
	}
	
	p.btn a{
		display:block;
		float:right;
		height:27px;
		text-indent:-9999px;
		
		
	}

	.top-inside a:hover img{
			opacity: 0.7;
			filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
			}

/* top-special */
#top-special h2{
	background:url(/img/top/03/Estilo_top-ttl-sp.gif) no-repeat left top;
}
	#top-special p.btn a{
		background:url(/img/top/03/Estilo_top_btn.gif) no-repeat top;
		width:94px;
	}

#top-special h3 span{color:#000000; font-size:85%; font-weight:normal;}

#top-special .top-inside{margin-bottom:20px;}


#blue{background-color:#8595e8;
color:#FFFFFF;
margin-top:10px;
padding: 4px 4px 4px 8px;
}
#blue p{ float:left; padding-top:3px;}

#gr{background-color:#47bdc1;
color:#FFFFFF;
margin-top:4px;
padding: 4px 4px 4px 8px;
 }
#gr p{float:left;padding-top:3px;}

#pp{background-color:#cd6fde;
margin-top:4px;
color:#FFFFFF;
padding: 4px 4px 4px 8px;
 }
#pp p{ float:left;padding-top:3px;}
#top-special li {float:right; margin-left:8px;}



/* top-men-lad */
#top-men-lad h2{
	background:url(/img/top/03/Estilo_top-ttl-ml.gif) no-repeat left top;
}
#top-men-lad .mens-line{
margin-bottom:10px;
border-bottom:1px solid #81753d;
padding-bottom:10px;
}

	#top-men-lad .top-inside-r{
		float:right;
		width:476px;
	}
	#top-men-lad .top-inside-l{
		float:left;
		width:476px;
		margin-right:12px;
	}
	
	#top-men-lad ul{
	background:#FFFFFF;
	margin-top:6px;
	padding:0px 5px 5px 5px;
	}
	#top-men-lad li{padding:5px 0px 0px 12px;
	background:url(/img/top/03/ya.gif) no-repeat left 10px;
		color:#999999;
		font-weight:bold;
	}

	#top-men-lad span{
	color:#ff0099;
	}
	
	#top-men-lad li.ml-list-none{
	background-image:none;
	color:#999999;
 }
/* top-sp-int */

#top-sp-int h2{
	background:url(/img/top/03/Estilo_top-ttl-spi.gif) no-repeat left top;
}
	#top-sp-int p.btn a{
		background:url(/img/top/03/Estilo_top_btn-02.gif) no-repeat top;
		width:94px;
	}
	#top-sp-int .top-inside-r{
		float:right;
		width:180px;
		}

#paparati{
background:url(/img/top/03/Estilo_top-back-stage.jpg) no-repeat;
background-color:#fee1d7;
border: 2px solid #FFFFFF;
padding:8px 30px 8px 296px;
}



#paparati h3{ background:url(/img/top/03/ya.gif) no-repeat left 4px;
text-indent: 10px;}

/* top-ps */
#top-ps h2{
	background:url(/img/top/03/Estilo_top-ttl-ps.gif) no-repeat left top;
}
	#top-ps p.btn a{
		background:url(/img/top/03/Estilo_top_btn-03.gif) no-repeat top;
		width:128px;
	}
	#top-ps .top-inside-r{
		float:right;
		width:108px;
	}
	/*11.06.06 add*/
	#top-ps .top-inside-l{
		float:left;
		width:108px;
	}

/* top-mn */
#top-mn h2{
	background:url(/img/top/03/Estilo_top-ttl-mn.gif) no-repeat left top;
}
	#top-mn p.btn a{
		background:url(/img/top/03/Estilo_top_btn-02.gif) no-repeat top;
		width:94px;
	}
	#top-mn .top-inside-r{
		float:right;
		width:180px;
	}

/* top-pub */
#top-pub h2{
	background:url(/img/top/03/Estilo_top-ttl-pub.gif) no-repeat left top;
}
	#top-pub p.btn a{
		background:url(/img/top/03/Estilo_top_btn-02.gif) no-repeat top;
		width:94px;
	}
	#top-pub .top-inside-r{
		float:right;
		width:180px;
	}
	/*11.06.06 add*/
	#top-pub .top-inside-l{
		float:left;
		width:180px;
	}


.top-sp-list{margin-bottom:2px; width:476px;}


.top-inside{width:668px;}
.top-inside img{float:left;}
.top-inside-r {width:476px; float:right; }
.top-inside-r span{color:#000000;}

.white {color:#FFFFFF;}
#blue .list-txt li{text-align:left;}
.top-sp-list{margin-bottom:2px; width:476px;}
.top-sp-list ul{width:183px;}
.top-sp-list li{height:24px; float:left;}

#men-lad .top-inside-r li{background:url(/img/top/03/ya.gif) no-repeat scroll left 2px; text-indent:1em; margin-left:10px; w}








#top-special.top-inside{ height:200px;}

#containts a{ font-size:110%; color:#8a1940; font-weight:bold; }


#men-lad h2{background: url(/img/top/03/Estilo_top-ttl-ml.gif)no-repeat;}
#men-lad ul{background:#FFFFFF; margin-top:5px;}

#men-lad2 h2{background: url(/img/top/03/Estilo_top-ttl-ml.gif)no-repeat; height:38px;}
#men-lad2 ul{background:#FFFFFF; margin-top:5px;}

