@charset "UTF-8";

/*--------------------------------------------------------------------
works.html
works.css
--------------------------------------------------------------------*/

/*------------Title---------------------------------------------------------------*/
div#Title h2 { background-image: url(../../img/title/works.png); }

/*------------TopNav------------*/
div#TopNav { width: 450px; }


/*------------About---------------------------------------------------------------*/
div#About div.AboTxt { width: 590px; }
div#About div.AboPho { width: 350px; }
div#About div.Inner:nth-child(odd) div.AboTxt  { float: left; }
div#About div.Inner:nth-child(even) div.AboTxt { float: right; }
div#About div.Inner:nth-child(odd) div.AboPho  { float: right; }
div#About div.Inner:nth-child(even) div.AboPho { float: left; }
div#About div.PhoList {
	width: 100%;
	margin-bottom: 10px;
	overflow: hidden;
}
div#About div.PhoList div.PhoL {
	width: 470px;
	float: left;
}
div#About div.PhoList div.PhoR {
	width: 470px;
	float: right;
}
div#About p + p { margin-top: 0.5em; }
div#About dl dt {
	margin: 20px 0 15px;
	padding: 0 10px 10px;
	border-bottom: 1px solid #959595;
	line-height: 1.2;
	font-size: 157.1428571428571%;
}
div#About dl dd ul {
	width: 100%;
	list-style: none;
	overflow: hidden;
}
div#About dl dd ul li {
	width: 50%;
	float: left;
}
div#About dl dd ul li:before { content: "● "; }


/*------------Example---------------------------------------------------------------*/
/*div#Example div.history { width: 48%; }
div#Example div#cons { float: left; }
div#Example div#faci { float: right; }*/
div#Example ul {
	width: 100%;
	list-style: none;
	overflow: hidden;
}
div#Example ul li {
	width: 48%;
	float: left;
}
div#Example ul li + li { float: right; }
div#Example ul li a {
	display: block;
	padding: 0.15em 20px;
	background: #0087ff url(../../img/top_nav_arrow.png) no-repeat right center;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	text-align: center;
	font-size: 128.5714285714286%;
	color: #fff;
	transition: opacity .3s;
}
div#Example ul li a:hover {
	text-decoration: none;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

div#Example h5 {
	margin-bottom: 15px;
	padding: 0 10px 8px;
	border-bottom: 1px solid #bfbfbf;
	line-height: 1.2;
	font-size: 145%;
	color: #0087ff;
}
div#Example table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #bfbfbf;
}
div#Example table tr th {
	width: auto;
	padding: 10px 20px;
	background: #eaeaea;
	border-left: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
	text-align: center;
	vertical-align: top;
}
div#Example table tr td {
	width: auto;
	padding: 10px 20px;
	border-left: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
	text-align: left;
	vertical-align: middle;
}
div#Example table tr th:nth-of-type(1),
div#Example table tr td:nth-of-type(1) {
	width: 12.5%;
	border-left: 0 none;
}
div#Example table tr th:nth-of-type(2),
div#Example table tr td:nth-of-type(2) {
	width: 55%;
}