/*---------------------------------------------------------------

AtelierK
common

---------------------------------------------------------------*/

/*----------------------------
common
----------------------------*/

html, h1, h2, h3, h4, h5, h6, table {
	font-size: 100%;
}

body {
	background: #fff;
	color: #333;
	font-family: Arial, Helvetica, Verdana, 'Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	margin: 0;
	padding: 0 0 100px 0;
	font-size: 62.5%; /* for IE */
	line-height: 1.6;
}

html>body {
	font-size: 10px;
}

img {
	vertical-align: middle;
}

a {
	color: #845218;
}

a:hover {
	color: #e70818;
}

a img {
	border: none;
}

/*----------------------------
layout
----------------------------*/

#outline {
	margin: 0 0 0 150px;
	width: 770px;
}

#branding {
	width: 150px;
	float: left;
	border-top: solid 7px #e70818;
}

#contents {
	width: 600px;
	float: right;
	border-top: solid 7px #e70818;
	font-size: 1.2em;
}

#footer {
	clear: both;
	border-top: dotted 1px #666;
	padding-top: 15px;
}

/*----------------------------
branding
----------------------------*/

#pagetitle {
	position: relative;
	height: 150px;
}

#title {
	margin: 0;
	padding: 15px 0 0 0;
}

#logo {
	margin: 0;
	width: 200px;
	height: 47px;
	position: absolute;
	top: 55px;
	left: -50px;
}

#main-navi {
	list-style-type: none;
	margin: 0 0 30px 0;
	padding: 0;
}

	#main-navi li a {
		display: block;
		overflow: hidden;
		text-indent: -5000px;
		text-decoration: none;
		width: 150px;
		height: 21px;
		background-image: url(../img/common/navi.gif);
		background-repeat: no-repeat;
	}

	#n01 a       { background-position: 0 0;}
	#n01 a:hover { background-position: -150px 0;}
	
	#n02 a       { background-position: 0 -21px;}
	#n02 a:hover { background-position: -150px -21px;}
	
	#n03 a       { background-position: 0 -42px;}
	#n03 a:hover { background-position: -150px -42px;}
	
	#n04 a       { background-position: 0 -63px;}
	#n04 a:hover { background-position: -150px -63px;}
	
	#n05 a       { background-position: 0 -84px;}
	#n05 a:hover { background-position: -150px -84px;}
	
	#n06 a       { background-position: 0 -105px;}
	#n06 a:hover { background-position: -150px -105px;}
	
	#n07 a       { background-position: 0 -126px;}
	#n07 a:hover { background-position: -150px -126px;}
	
	#n08 a       { background-position: 0 -147px;}
	#n08 a:hover { background-position: -150px -147px;}
	
	#n09 a       { background-position: 0 -168px;}
	#n09 a:hover { background-position: -150px -168px;}
	
#address p {
	margin: 0 0 30px 0;
}

#address #contact a{
	display: block;
	overflow: hidden;
	height: 14px;
	line-height: 1;
	text-indent: -5000px;
	text-decoration: none;
	background: url(../img/common/contact.gif) 0 0;
}

#address #contact a:hover {
	background-position: 0 -14px;
}


/*----------------------------
contents
common
----------------------------*/

#contents table {
	border-collapse: collapse;
}

	#contents table th {
		border: solid 1px #ccc;
		background: #eee;
		padding: 4px;
	}
	
	#contents table td {
		border: solid 1px #ccc;
		padding: 4px;
	}

#contents .section {
	margin: 0 0 50px 0;
}


/*----------------------------
contents
top
----------------------------*/

#top #slideshow {
    position:relative;
    height:400px;
	margin: 50px 0;
}

#top #slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 400px;
    background-color: #FFF;
}

#top #slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#top #slideshow DIV.last-active {
    z-index:9;
}

#top #slideshow DIV IMG {
    height: 400px;
    display: block;
    border: 0;
}


#top #news {
	clear: both;
	margin: 0 0 15px 0;
}

	#top #news h2 {
		width: 150px;
		float: left;
		text-align: center;
		margin: 0;
		padding: 5px 0;
	}

	#top #news ul {
		margin: 0 0 0 170px;
		padding: 0;
		list-style-type: none;
	}
	
	#top #news ul li {
		border-bottom: solid 1px #ccc;
		padding: 2px 0;
		font-size: 1.2em;
	}
	
	#top #news ul li.end {
		border-bottom: none;
		margin-bottom: 30px;
	}
	
	#top #news ul li span {
		padding: 0 30px 0 0;
	}
	
	#top #news ul li a {
		display: block;
		color: #333;
		text-decoration: none;
	}
	
	#top #news ul li a:hover {
		background: #ccc;
	}
	
#top #tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
	font-size: 1.2em;
}
#top #tooltip h3, #tooltip div { margin: 0; }


#top #information {
	margin-top: 15px;
	border-top: dotted 1px #666;
	padding-top: 15px;
	color: #666;
	font-size: 1.2em;
}

#top #information:after {
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#top #information {
    display: inline-block;
}

#top #information {
    display: block;
}

#top #information h3,
#top #information h4{
	color: #333;
	margin: 1em 0 0.5em 0;
}

#top #information p {
	margin: 0 0 1em 0;
}

#top .zissekichi {
	background: #eee;
	padding: 1px 10px;
	margin: 0 0 1em 0;
}




/*----------------------------
contents
project-ing
----------------------------*/

#projecting h2 {
	font-size: 1.25em;
	margin: 20px 0 50px 0;
	color: #bd5000;
}

#projecting .project-group:after {
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#projecting .project-group {
    display: inline-block;
}

#projecting .project-group {
    display: block;
}

#projecting .project-group-end {
	margin: 0 0 50px 0;
}

#projecting .project-group h3 {
	width: 100px;
	float: left;
	margin: 0;
	font-size: 1.2em;
	font-weight: 100;
	color: #dd8800;
}

#projecting .project-group ul {
	width: 500px;
	float: right;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

	#projecting .project-group ul li {
		width: 80px;
		float: left;
		padding: 0 0 20px 20px;
	}
	
	#projecting .project-group ul li a {
		display: block;
		background: #000;
		margin:0;
	}
	
	#projecting .project-group ul li a img {
		opacity: 0.8;
    	filter: alpha(opacity=80);
	}
	
	#projecting .project-group ul li a:hover img {
		opacity: 1;
    	filter: alpha(opacity=100);
	}

#projecting #tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
	font-size: 1.2em;
}
#projecting #tooltip h3, #tooltip div { margin: 0; }


/*----------------------------
contents
works
----------------------------*/

#works #topics {
	list-style-type: none;
	margin: 45px 0 30px 0;
	padding: 0;
}

	#works #topics li {
		float: left;
		width: 200px;
		text-align: center;
		padding-bottom: 10px;
	}
	
		#works #topics li a:hover img {
			opacity: 0.8;
    		filter: alpha(opacity=80);
		}

#works #works-navi {
	margin: 20px 0;
	border-bottom: solid 7px #ddd;
	padding: 0 0 20px 0;
}

	#works #works-navi h2 {
		margin: 0;
		padding: 0;
		float: left;
		width: 100px;
	}
	
	#works #works-navi ul {
		list-style-type: none;
		margin: 0 0 0 100px;
		padding: 0;
	}
	
		#works #works-navi ul li {
			float: left;
			width: 99px;
		}
		
			#works #works-navi ul li a {
				padding: 0 0 0 15px;
				background: url(../img/common/point.gif) no-repeat left center;
			}
			
	#works .visited {
		color: #f00;
	}
		
	#works #works-navi ul:after,
	#works #topics:after {
		content: ".";
		clear: both;
		height: 0;
		display: block;
		visibility: hidden;
	}

	#works #works-navi ul,
	#works #topics {
		display: inline-block;
	}

	#works #works-navi ul,
	#works #topics {
		display: block;
	}
	
#works #works-list {
	margin: 0 0 50px 0;
}
	
	#works #works-list h2 {
		font-size: 1.25em;
		margin: 15px 0;
		color: #e6af30;
	}
	
	#works #works-list table {
		width: 100%;
	}
	
		#works #works-list table td {
			border: none;
			padding: 4px 0;
			width: 140px;
		}
		
			#works #works-list table td strong {
				font-weight: 100;
				color: #f60;
			}
		
		#works #works-list table td.works-name {
			width: 320px;
		}
	
#works #tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
	font-size: 1.2em;
}

#works #tooltip h3, #tooltip div { margin: 0; }


/*----------------------------
contents
profile
----------------------------*/

#profile #message {
	margin:55px 0;
}

#profile .boss {
	margin: 20px 0;
}

	#profile .boss .photo {
		float: left;
		width: 120px;
		margin: 0;
	}

	#profile .boss ul {
		list-style-type: none;
		margin: 0 0 15px 150px;
		padding: 0;
	}

#profile ul.staff:after,
#profile ul.staff li:after {
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#profile ul.staff,
#profile ul.staff li {
    display: inline-block;
}

#profile ul.staff,
#profile ul.staff li {
    display: block;
}


#profile ul.staff {
	list-style-type: none;
	margin: 0 0 50px 0;
	padding: 0;
}

	#profile ul.staff li {
		float: left;
		width: 300px;
		padding: 0;
		margin: 0;
	}
	
		#profile ul.staff li .photo {
			float: left;
			width: 100px;
		}
		
		#profile ul.staff li .name {
			float: right;
			width: 200px;
		}


/*----------------------------
contents
atelier
----------------------------*/

#atelier #atelier-image {
	margin: 55px 0 50px 0;
}

	#atelier #atelier-image img {
		margin: 0 5px 0 0;
	}
	
		#atelier #atelier-image a:hover img {
			opacity: 0.8;
    		filter: alpha(opacity=80);
		}
	
	#atelier #atelier-image img.end {
		margin: 0;
	}
	
#atelier #googlemap {
	float: right;
	width: 250px;
	padding: 5px;
	border: solid 1px #ccc;
	text-align: center;
}

#atelier .win dd {
	margin: 0 0 15px 30px;
}


/*----------------------------
contents
how to
----------------------------*/

#howto h2 {
	font-size: 1.25em;
	margin: 20px 0 0px 0;
	color: #4d2c59;
}

#howto h3 {
	font-size: 1.25em;
	margin: 50px 0 15px 0;
	color: #e6af30;
}

#howto .step-table {
	width: 80%;
	margin: 15px auto;
}

	#howto .step-table th {
		width: 30%;
	}
	
	#howto .step-table td.next {
		border: none;
		text-align:center;
		color: #999;
	}

#howto .price-table {
	table-layout: fixed;
	width: 80%;
	margin: 15px auto;
}

	#howto .price-table caption {
		font-weight: bold;
		background: #eee;
	}
	
	#howto .price-table td {
		text-align: center;
	}

#howto h4 {
	margin: 15px 0 0 0;
}


/*----------------------------
contents
link
----------------------------*/

#link h2 {
	font-size: 1.25em;
	margin: 50px 0 15px 0;
	color: #e6af30;
}

#link dl {
	margin: 0 0 50px 0;
}

	#link dl dd {
		margin: 0 0 10px 30px;
	}


/*----------------------------
contents
faq
----------------------------*/

#faq h2 {
	font-size: 1.25em;
	margin: 20px 0 50px 0;
	color: #004966;
}

#faq #faq-list {
	list-style-type: none;
	margin: 0 0 50px 0;
	padding: 0;
}

	#faq #faq-list li {
		margin: 0 0 10px 0;
	}
	

/*----------------------------
contents
sitemap
----------------------------*/

#sitemap h2 {
	font-size: 1.25em;
	margin: 50px 0 15px 0;
	color: #e6af30;
}

	#sitemap dl {
		margin: 0 0 50px 0;
		
	}
	
	#sitemap dt {
		width: 200px;
		float: left;
		padding: 10px 0;
	}
	
	#sitemap dd {
		margin: 0 0 0 200px;
		padding: 10px 0;
	}


/*----------------------------
contents
policy
----------------------------*/

#policy h2 {
	font-size: 1.25em;
	margin: 50px 0 15px 0;
	color: #e6af30;
}


/*----------------------------
footer
----------------------------*/

#keyword {
	border-top: dotted 1px #666;
	padding-top: 15px;
	color: #999;
	line-height: 1.2;
}

#copyright {
	width: 500px;
	float: left;
	margin: 0;
}

#footer ul {
	list-style-type: none;
	text-align: right;
	margin: 0 0 0 500px;
	padding: 0;
}

	#footer ul li {
		display: inline;
	}
	
		#footer ul li a {
			padding: 0 0 0 10px;
			background: url(../img/common/point.gif) no-repeat left center;
			color: #333;
			text-decoration: none;
		}
		
		#footer ul li a:hover {
			color: #e70818;
		}