@charset "euc-jp";

/* ==================================================================

	page  : ¥¢¡¼¥È¥é¥ó¥Ð¥ê¥Õ
	author: °Âã
	
	09/06/01 À©ºî¡¡ver 1.00
	
=================================================================== */

/* ¥³¥á¥ó¥È¥Æ¥ó¥×¥ì¡¼¥È */

/* =================================
   ¢£ ¶¦ÄÌ
================================== */

.ceiling #breadcrumbs{
	margin-bottom:17px;
}

.ceiling .contents h2{
	display:inline;
	float:left;
	height:44px;	
	margin:0px;

}

.ceiling .contents .chapter{
	width:911px;
	padding:15px 17px 17px 17px;
	background:#757575;
}


.ceiling .contents ul.items li dl{
	display:inline;
	float:left;
}

ul.pageNavigation li a:hover img,
.ceiling .contents ul.items li dl a:hover img,
.popup div.item ul.relation li dl a:hover img{
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}


.ceiling .contents p.catalog a{
	right:30px;
}

.ceiling .contents .section{
	clear:both;
	background:#fff;
}

.ceiling .contents .section h3{
	padding:3px 0 0 3px;
}

/* --------------------------------
   ¢¢ navigation
-------------------------------- */
.ceiling .contents ul.navigation{
	display:inline;
	float:right;
	width:538px;
	height:21px;
	margin:6px 0 0 0;
}
	
	.ceiling .contents ul.navigation li{
		height:100%;
		margin-left:5px;
		background:0 0 no-repeat;
	}
	
	.ceiling .contents ul.navigation li a{
		width:100%;
		height:100%;
		background:0 0 no-repeat;
	}

	html .ceiling .contents ul.navigation li a:hover{ background-position:0 -21px ;}
	
	/* ¸ÄÊÌ»ØÄê */	
	.ceiling .contents ul.navigation li.top{ width:87px;}
	.ceiling .contents ul.navigation li.outline{ width:68px;}
	.ceiling .contents ul.navigation li.eatsick{ width:70px;}
	.ceiling .contents ul.navigation li.type{ width:57px;}
	.ceiling .contents ul.navigation li.color{ width:117px;}
	.ceiling .contents ul.navigation li.relation{ width:109px;}
	
	.ceiling .contents ul.navigation li.top a{	background-image:url(../../images/lineup/ceiling/harmoceiling/share/navigation/top.gif);}
	.ceiling .contents ul.navigation li.outline a{	background-image:url(../../images/lineup/ceiling/harmoceiling/share/navigation/outline.gif);}
	.ceiling .contents ul.navigation li.eatsick a{	background-image:url(../../images/lineup/ceiling/harmoceiling/share/navigation/eatsick.gif);}
	.ceiling .contents ul.navigation li.type a{	background-image:url(../../images/lineup/ceiling/harmoceiling/share/navigation/type.gif);}
	.ceiling .contents ul.navigation li.color a{	background-image:url(../../images/lineup/ceiling/harmoceiling/share/navigation/color.gif);}
	.ceiling .contents ul.navigation li.relation a{	background-image:url(../../images/lineup/ceiling/harmoceiling/share/navigation/relation.gif);}
	
	#harmoceiling .contents ul.navigation li.top a,
	#harmo-outline .contents ul.navigation li.outline a,
	#harmo-eatsick .contents ul.navigation li.eatsick a,
	#harmo-type .contents ul.navigation li.type a,
	#harmo-color .contents ul.navigation li.color a,
	#harmo-relation .contents ul.navigation li.relation a{ background-position:0 -21px;}

#harmoceiling .contents ul.navigation{
	position:absolute;
	top:21px;
	right:17px;
	margin:0;
}


/* =================================
   ¢£ #harmoceiling
================================== */

#harmoceiling .contents .chapter{
	position:relative;
	width:945px;
	height:686px;
	padding:0;
}

#ceiling-top .contents p.err{
	padding:0 15px;
	color:#FFFFFF;
}

#ceiling-top .contents p.err a{
	color:#FFFFFF;
	text-decoration:underline;
}

/* =================================
   ¢£ #harmo-outline
================================== */

/* --------------------------------
   ¢¢ functional
-------------------------------- */
#harmo-outline #functional ul.items li{
	position:relative;
	margin-left:-11px;
	padding-bottom:24px;

}

#harmo-outline #functional ul.items li dl{
	display:inline;
	float:left;
	width:420px;
	height:117px;
	margin-left:25px;
}

#harmo-outline #functional ul.items li dl.rightColumn{
	float:right;
	margin-right:32px;
}

html > #harmo-outline #functional ul.items li dl{
	height:auto;
	min-height:117px;
}

#harmo-outline #functional ul.items li dl dt{
	position:relative;
	margin-right:-10px;
	padding:2px 0 8px 180px;
	color:#066c00;
	font-size:108%;
	font-weight:700;
}

	#harmo-outline #functional ul.items li dl dt img{
		position:absolute;
		top:0;
		left:0;
	}

	*html #harmo-outline #functional ul.items li dl dt img{
		left:-180px;
	}


#harmo-outline #functional ul.items li dl dd{
	position:relative;
	margin-right:-5px;
	padding:0px 0 0px 180px;
	font-size:92%;
	line-height:1.3;
}

/* --------------------------------
   ¢¢ additional
-------------------------------- */
#harmo-outline #additional{
	padding-bottom:31px;
}


#harmo-outline #additional h3{
	padding-bottom:10px;
}

#harmo-outline #additional .pic{
	display:inline;
	float:left;
	margin-left:16px;
}

#harmo-outline #additional .explain{
	display:inline;
	float:right;
	width:641px;
	margin-right:34px;
}

	#harmo-outline #additional .explain h4{
		display:inline;
		float:left;
		width:290px;
		padding-top:5px;
		color:#066c00;
		font-size:108%;
		font-weight:700;
	}
	
	#harmo-outline #additional .explain .icon{
		display:inline;
		float:right;
		width:341px;
	}
	
		#harmo-outline #additional .explain .icon li{
			display:inline;
			float:left;
		}
		
		#harmo-outline #additional .explain .icon dl dt{
			font-weight:700;
			margin-left:2px;
		}
		
		#harmo-outline #additional .explain .icon li.outline{
			width:90px;
		}
		
		#harmo-outline #additional .explain .icon li.correspondence{
			float:right;
			width:246px;
		}
		
		#harmo-outline #additional .explain .icon li.correspondence ul li{
			display:inline;
			float:none;
		}
		
	#harmo-outline #additional .explain p.text{
		clear:both;
		padding-top:16px;
	}		

	#harmo-outline #additional .explain .example h5{
		margin-bottom:6px;
		padding:2px;
		color:#145354;
		border-bottom:1px solid #145354;
	}	

	#harmo-outline #additional .explain .example .items li{
		margin-left:-14px;
	}
	
	#harmo-outline #additional .explain .example .items li dl{
		width:203px;
		margin-left:14px;
	}
	
	#harmo-outline #additional .explain .example .items li dl dt{
		padding-bottom:8px;
		text-align:center;
	}	
	
	
/* =================================
   ¢£ #harmo-eatsick
================================== */	
#harmo-eatsick .contents .section{
	padding:0 10px;
}

#harmo-eatsick .contents .section h3{
	position:relative;
	margin:0 -10px;
}
	
#harmo-eatsick .contents .icon{
	position:relative;
	padding:8px 0px 0 0;
	text-align:right;
}

#harmo-eatsick .contents .section h4{
	padding-bottom:20px;
}

#harmo-eatsick .contents .subsection{
	padding-bottom:23px;
}


#harmo-eatsick .contents .thirdsection{
	width:403px;
}

#harmo-eatsick .contents .thirdsection h5{
	padding-bottom:6px;
	color:#066c00;
	font-size:108%;
	font-weight:700;
}

/* --------------------------------
   ¢¢ eatsick1
-------------------------------- */
#harmo-eatsick .contents #eatsick1{
	margin-top:-20px;
	background:url(../../images/lineup/ceiling/harmoceiling/eatsick/img1-3.jpg) 432px 64px no-repeat;
}

#harmo-eatsick .contents #eatsick1 .thirdsection .pic{
	text-align:center;
	margin:23px auto;
}

/* --------------------------------
   ¢¢ eatsick2
-------------------------------- */
#harmo-eatsick .contents #eatsick2 {
	margin-left:-46px;
	zoom:1;
}

#harmo-eatsick .contents #eatsick2 h4{
	margin-left:46px;
}

#harmo-eatsick .contents #eatsick2 .column{
	display:inline;
	float:left;
	margin-left:46px;
}

#harmo-eatsick .contents #eatsick2 .thirdsection{
	padding-bottom:23px;
}


#harmo-eatsick .contents #eatsick2 #eatsick2-1 p.pic{
	position:relative;
	margin:0 -22px 0 0;
}

#harmo-eatsick .contents #eatsick2 #eatsick2-2 p{
	margin:0;
}

#harmo-eatsick .contents #eatsick2 #eatsick2-3 p.pic{
	position:relative;
	display:inline;
	float:right;
	margin:-15px 0 0 10px;
}

/* --------------------------------
   ¢¢ eatsick3
-------------------------------- */
#harmo-eatsick .contents #eatsick3 {
	margin-left:-46px;
	zoom:1;
}

#harmo-eatsick .contents #eatsick3 h4{
	margin-left:46px;
}

#harmo-eatsick .contents #eatsick3 .column{
	display:inline;
	float:left;
	margin-left:46px;
}


#harmo-eatsick .contents #eatsick3 #eatsick3-1 p.pic{
	position:relative;
	margin:0 -35px 0 -8px;
}


/* =================================
   ¢£ #harmo-type
================================== */
#harmo-type .contents h4{
	margin:10px 0 3px 17px;
	color:#066c00;
	font-size:108%;
	font-weight:700;
}

#harmo-type .contents .chapter p{
	margin:0px 0 20px 17px;
}


#harmo-type ul.items li{
	position:relative;
	margin-left:7px;
	padding-bottom:20px;

}

#harmo-type ul.items li dl{
	display:inline;
	float:left;
	width:432px;
	margin-left:10px;
}

#harmo-type ul.items li dl dt{
	padding-bottom:10px;
}

#harmo-type ul.items li dl dl.explain{
	display:block;
	float:none;
}

#harmo-type ul.items li dl dl.explain dt{
	display:inline;
	float:left;
	padding:0;
	width:200px;
	
}

#harmo-type ul.items li dl dl.explain dd{
	display:inline;
	float:right;
	margin-right:8px;
	width:210px;
}


/* =================================
   ¢£ #harmo-color
================================== */

/* pageNavigation ------------- */

#harmo-color ul.pageNavigation{
	margin-left:7px;
	padding:6px 0 19px 0;
}

#harmo-color ul.pageNavigation li{
	float:left;
	display:inline;
	width:207px;
	margin-left:13px;
	text-align:center;
}

#harmo-color .contents .section{
	margin-bottom:13px;
}

#harmo-color .contents .section h4{
	padding:18px 0 0 22px;
}

#harmo-color .contents .section p.link{
	position:relative;
	margin:-32px 10px 20px 0;
	text-align:right;
}

#harmo-color .contents .section p.pagetop{
	margin:10px 10px 10px 0;
	text-align:right;
}

/* item ------------- */

#harmo-color ul.items li dl dd{
	padding-top:5px;
}

#harmo-color ul.items li dl dd img{
	margin:0px 0 0 7px;
	vertical-align:middle;
}

/* --------------------------------
   ¢¢ #regularBox
-------------------------------- */
#harmo-color #regularBox ul.items li{
	position:relative;
	padding-bottom:12px;
}

#harmo-color #regularBox ul.items li dl{
	display:inline;
	float:left;
	width:427px;
	margin-left:17px;
}

#harmo-color #regularBox ul.items li dl dd{
	text-align:right;
	font-weight:700;
}

/* --------------------------------
   ¢¢ #halfBox
-------------------------------- */
#harmo-color #halfBox ul.items li{
	position:relative;
	padding-bottom:12px;
}

#harmo-color #halfBox ul.items li dl{
	display:inline;
	float:left;
	width:427px;
	margin-left:17px;
}

#harmo-color #halfBox ul.items li dl dd{
	text-align:right;
	font-weight:700;
}

/* --------------------------------
   ¢¢ #gridBox
-------------------------------- */
#harmo-color #gridBox ul.items li{
	margin-left:7px;
	padding-bottom:35px;
}

#harmo-color #gridBox ul.items li dl{
	display:inline;
	float:left;
	width:210px;
	margin-left:10px;
}

#harmo-color #gridBox ul.items li dl dd{
	padding-left:6px;
	font-weight:700;
}

#harmo-color #gridBox ul.items li.eatsick{
	position:relative;
	margin-left:-6px;
}

#harmo-color #gridBox ul.items li.eatsick dl{
	width:304px;
	margin-left:23px;
}

#harmo-color #gridBox ul.items li.eatsick dl.remarks{
	position:relative;
	width:227px;
	margin:-43px 0 0 0;
}

#harmo-color #gridBox ul.items li.eatsick dl.remarks dt{
	text-align:center;
}
#harmo-color #gridBox ul.items li.eatsick dl.remarks dd{
	padding-top:23px;
	font-weight:100;
	font-size:84%;
}

/* --------------------------------
   ¢¢ #plasterBox
-------------------------------- */
#harmo-color #plasterBox ul.items li{
	position:relative;
	padding-bottom:12px;
}

#harmo-color #plasterBox ul.items li dl{
	display:inline;
	float:left;
	width:427px;
	margin-left:17px;
}

#harmo-color #plasterBox ul.items li dl dd{

	text-align:right;
	font-weight:700;
}


/* =================================
   ¢£ #harmo-relation
================================== */
#harmo-relation ul.items{
	padding-top:25px;
}


#harmo-relation ul.items li{
	position:relative;
	margin-left:6px;
	padding-bottom:20px;
}

#harmo-relation ul.items li dl{
	display:inline;
	float:left;
	width:287px;
	margin-left:10px;
}

#harmo-relation ul.items li dl dt{
	padding-bottom:3px;
}

#harmo-relation ul.items li dl dd{
	text-align:right;
	font-weight:700;
}

/* =================================
   ¢£ #harmoceiling-figure
================================== */

#harmoceiling-figure p{
	text-align:center;
	margin:40px auto;
}


/* =================================
   ¢£ .harmoceiling-color
================================== */
.harmoceiling-color h1{
	margin:10px;
}

.harmoceiling-color div.item{
	width:740px;
}


.harmoceiling-color div.item h2{
	margin:0 -1px 30px -1px;
}


.harmoceiling-color div.item p.pic{
	margin-bottom:40px;
}

.harmoceiling-color div.table{
	display:inline;
	float:left;
	width:60%;
}

	.harmoceiling-color div.table table.size{
		margin-left:40px;
	}

	.harmoceiling-color div.table table.size caption{
		font-weight:700;
		text-align:left;
	}


.harmoceiling-color .expansion{
	position:relative;
	display:inline;
	float:right;
	width:35%;
	margin-top:-10px;
}

.harmoceiling-color .expansion dt,
.harmoceiling-color .expansion dd{
	text-align:center;
	padding:3px 0 0 0;
}

/* =================================
   ¢£ harmoceiling-grid
================================== */

#harmoceiling-grid div.item p.pic{
	display:inline;
	float:left;
	width:310px;
}

#harmoceiling-grid div.item div.outline{
	display:inline;
	float:right;
	width:330px;
}

#harmoceiling-grid div.table{
	display:block;
	float:none;
	width:100%;
}

	#harmoceiling-grid div.table table.size{
		margin-left:0px;
	}

#harmoceiling-grid div.table{
	display:block;
	float:none;
	width:100%;
}

#harmoceiling-grid div.item .outline .figure{
	display:block;
	float:none;
	width:auto;
	margin:37px 0 0 0;
}


#harmoceiling-grid #item8 p.pic,
#harmoceiling-grid #item9 p.pic{
	display:block;
	float:none;
	width:auto;
	margin-left:29px;
	margin-bottom:17px;
	text-align:left;
}

#harmoceiling-grid #item8 div.outline,
#harmoceiling-grid #item9 div.outline{
	display:block;
	float:none;
	width:auto;
}

	#harmoceiling-grid #item8 div.table table.size,
	#harmoceiling-grid #item9 div.table table.size{
		margin-left:40px;
	}

/* =================================
   ¢£ .harmoceiling-relation
================================== */
.harmoceiling-relation h1{
	margin:10px;
}

.harmoceiling-relation div.item{
	width:740px;
}


.harmoceiling-relation div.item h2{
	margin:0 -1px 30px -1px;
}

/* =================================
   ¢£ harmo-relation-details
================================== */

#harmo-relation-details .pictures{
	display:inline;
	float:left;
	width:405px;
	margin-left:5px;
}

#harmo-relation-details .pictures ul.icon{
	font-size:82%;
}

#harmo-relation-details .pictures ul.icon{
	margin:18px 0 0 0;
}

#harmo-relation-details .pictures ul.icon li{
	display:inline;
	float:left;
	height:88px;
	margin:0 0 0 12px;
	text-align:center;
	font-size:84%;
}

#harmo-relation-details .pictures ul.icon > li{
	height:auto;
	min-height:88px;
}

#harmo-relation-details div.item div.outline{
	display:inline;
	float:right;
	width:330px;
}

	#harmo-relation-details div.item div.outline .figure{
		width:100%;
		margin:15px 0 0 0;
		text-align:center;
	}
	
	#harmo-relation-details div.item div.outline .figure img{
		margin:0;
	}

#harmo-relation-details #item5 .pictures,
#harmo-relation-details #item6 .pictures{
	width:340px;
}

#harmo-relation-details #item5 div.outline,
#harmo-relation-details #item6 div.outline{
	width:374px;
	margin-right:10px;
}