@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Prata);
@import url(http://fonts.googleapis.com/css?family=Lato:700);

* {
	margin:0;
	padding:0;
}
html,body{
	min-height:100%;
}
img{
	border:0 none;
	vertical-align:bottom;
}
body {
	font-family: 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;
	font-size:13px; 
	letter-spacing:0.1;
	line-height:1.5;
	background:url(images/top/bg_body01.png) no-repeat left top;
	background-size:500px auto;
}
a {	color: #333; text-decoration: none; outline:none;}
a:link { color: #333;}
a:visited { color: #333;}
a:hover {	color: #666; text-decoration:underline;}
a:active { color: #16A085;}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
ul, ol { list-style: none;}
.txtAR { text-align: right;}
#container .txtAL { text-align: left;}
.txtAC { text-align: center;}
#wrapper .tabAL td { text-align: left;}
.floatL { float: left;}
.floatR { float: right;}
.clear { clear: both;}
/*Color---*/
.colorRed{ color:#F33;}
/*margin-padding---*/
.padLR10{ padding-left:10px; padding-right:10px;}
.padB50{ padding-bottom:50px;}
.marT20{ margin-top:20px;}
.marB10{ margin-bottom:10px;}
/*negative-indent*/
.indent1em{ padding-left:1em; text-indent:-1em;}
.indent2em{ padding-left:2em; text-indent:-2em;}
/*list*/
.ul_disc{ list-style:disc; padding:0 0 5px 20px;}
/*link*/
/*font*/
.bold{ font-weight:bold;}
.fontSS{ font-size:78%;}

.areaBtn input{
	padding:3px 5px;
}
input{ padding:2px;}

/*clear fix*/
.clearFix:after {/*clear-fix*/
	clear: both;
	content: ".";
	display: block;
	height: 1px;
	visibility: hidden;
}
.clearFix {
	display: inline-block;
	min-height: 1%;
}
* html .clearFix {
	height: 1%;
}
.clearFix {
	display: block;
}

#container{
	width:980px;
	margin:0 auto;
}
header{
	overflow:hidden;
}
header h1{
	float:left;
}
header ul{
	float: right;
	margin-top:30px;
}
header ul li{
	float:left;
	padding-left:20px;
	margin-top:3px;
}
header ul li.lastC{
	padding-left:10px;
}
header ul li.btn{
	margin-top:0;
}
header ul li a:hover{
	opacity:0.7;
}

#contents{
	clear:both;
}
#footer{
	
	}
	
/*=====================
TITLE
=====================*/
.pageTit{
	text-align:right;
}
.pageTit h2{
	font-family: 'Lato', sans-serif;
	text-align:center;
	font-size:28px;
	float:right;
	margin-left:5px;
}
.pageTit span{
	padding-top:17px;
	display:block;
}

/*=====================
TOP
=====================*/
body.top{
	background-image: url(images/top/bg_body01.png),url(images/top/bg_body02.png),url(images/top/bg_body03.png);
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-position: left top, left bottom, right bottom;
	background-size:500px auto,500px auto,450px auto;
}
.main{
	clear:both;
	position:relative;
}
.m1{
	text-align:center;
	margin-top:40px;
}
.sub1{
	position: absolute;
	top:66px; left:340px;
}
.sub1:hover{
	top:61px;
}
.sub1 p{
	position: absolute;
	top:-40px; left:-10px;
	border:1px #333 solid;
	padding:2px 10px;
	font-size:19px;
	font-weight:bold;
	border-radius:3px;
	display:none;
}
.sub1 p:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid #333;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.sub1 p:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.sub2{
	position: absolute;
	top:365px; left:110px;
}
.sub2:hover{
	top:360px; 
}
.sub2 p{
	position: absolute;
	top:-45px; left:-10px;
	border:1px #333 solid;
	padding:2px 10px;
	font-size:19px;
	font-weight:bold;
	border-radius:3px;
	display:none;
}
.sub2 p:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid #333;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.sub2 p:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

/*=====================
WORKS
=====================*/
.works h3{
	clear:both;
	font-family: 'Lato', sans-serif;
	font-size:15px;
	color:#FFF;
	margin-bottom:15px;
}
.works h3 span{
	background:#D1C089;
	padding:3px 5px 5px;
}
.works ul{
	overflow:hidden;
	padding-bottom:16px;
}
.works ul li{
	margin:0 20px 20px 0;
	float:left;
	width:140px;
	position:relative
}
.works ul li p{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height:112px;
	background: rgba(0,0,0,0);
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-transition: .5s;
	transition: .5s;
	opacity: 0;
	text-align:center;
	color:#fff;
	display:table;
}
.works ul li:hover p{
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	background: rgba(0,0,0,0.6);
	opacity: 1;
}
.works ul li p span{
	display:table-cell;
	vertical-align:middle;
	padding:5px;
	word-break: break-all;
	opacity: 0;
}
.works ul li:hover p span{
	opacity: 1;
}
.slideArea{
	width:640px;
	float:left;
}
.profile{
	background:url(images/common/table_back_3.gif) repeat;
	padding:20px;
	margin-top:30px;
	overflow:hidden;
}
.setumei{
	width:200px;
	float:right;
	background:#fff;
	margin-top:100px;
	border:5px #991A1D solid;
	padding:10px;
}
.pager{
	text-align:center;
}
.pager li{
	display:inline;
	padding:20px;
	font-size:24px;

}