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


header{
	height:130px;
}
header h1{
	font-size:1.5em;
	color:#fff;
	text-align:center;
	font-weight:100;
	text-shadow:0 1px 1px #222;
	height:80px;
	line-height:80px;
}

nav{
	width:700px;
	margin:0 auto;
}
nav li{
	float:left;
	text-align:center;
}
li.w100{
	width:100px;
}
li.w170{
	width:170px;
}
li.w130{
	width:130px;
}
nav li a{
	font-size:1.1em;
	height:30px;
	display:block;
	color:#fff;
	text-shadow:0 1px 1px #222;
}

/**topbar**/
header.scroll{
	position:fixed;
	width:100%;
	height:100px;
	background-color:rgba(0,0,0,0.2);
	top:0;
	z-index:9999;
	box-shadow:0 0 8px #111;
}

header.scroll h1{
	height:60px;
	line-hegiht:60px;
	font-size:1.2em;
}
header.scroll li a{
	font-size:1em;
}

#kirikae{
	width:100%;
	margin:0;
	padding:0;
}


/****contents***/

#contents{
	width:100%;
	height:auto;
	overflow:hidden;
	background-color:#fff;
	padding-bottom:30px;
}

/****catch**/
#catch{
	width:980px;
	margin:30px auto;
	height:300px;
}

/***box***/
#box{
	width:980px;
	margin:0 auto;
}
#box h2,#box p{
	text-align:center;
	line-height:40px;
}
#box p{
	border-bottom:1px dotted #ccc;
	margin-bottom:30px;
}

#box ul li{
	float:left;
	width:300px;
	margin:10px;
}

#box li a span{
	display:inline-block;
}

.button {
  border: 1px solid #eee;
  padding: 10px 40px;
  position: relative;
  margin-left:60px;
}

/* Effect1
 *************************************** */
/* 擬似要素の共通スタイル */
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
  background-color: #3498db;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
/* 左上へ配置 */
.change-border01::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}
/* 右下へ配置 */
.change-border01::before {
  bottom: -1px;
  height: 1px;
  right: -1px;
  width: 0px;
}
/* 左下へ配置 */
.change-border01__inner::after {
  bottom: -1px;
  height: 0px;
  left: -1px;
  width: 1px;
}
/* 右下へ配置 */
.change-border01__inner::before {
  height: 0px;
  right: -1px;
  top: -1px;
  width: 1px;
}

/* hover */
.change-border01:hover::after,
.change-border01:hover::before {
  width: 100%;
  width: calc(100% + 1px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
  height: 100%;
  height: calc(100% + 1px);
}

/**bottom***/
#bottom_contents{
	clear:both;
	background-color:#fff;
	background-image:url(../img/pattern4.png);
	height:700px;
}

#b_wrapper{
	width:980px;
	margin:0 auto;
	padding-top:80px;
}

#fb{
	width:300px;
	height:500px;
}
#fb,#tmap_canvas{
	float:left;
	
}
#tmap_canvas{
	width:620px;
	height:500px;
	margin-left:50px;
}



/***共通***/
/**top_header**/
.title{
	height:150px;
	background-color:#555;
	background-image:url(../img/pattern4.png);
}

#kuzu{
	clear:both;
	width:100%;
	background-color:#666;
	height:30px;
}
#kuzu ul{
	width:980px;
	margin:0 auto;
}
#kuzu li{
	float:left;
	margin-right:20px;
	line-height:30px;
}
#kuzu li a{
	color:#999;
}
#kuzu li a:hover{
	color:#ccc;
}

/**main***/
#main{
	width:980px;
	margin:0 auto;
}
#main h2,#mail h2{
	font-size:1.1em;
	border-left:3px solid #333;
	padding-left:10px;
	background-color:#f9f9f9;
	width:97%;
}
/***company**/
#gaiyou{
	width:800px;
	margin:30px auto;
}
#gaiyou table{
	width:800px;
	margin-top:30px;
}
#gaiyou td{
	border-bottom:1px solid #ccc;
	padding:10px;
}




/**company2***/
#company{
	width:950px;
	margin-top:30px;
}
#company table{
	width:690px;
	margin-top:30px;
}
#company td{
	border-bottom:1px solid #ccc;
	padding:10px;
}

#dam{
	height:10px;
	margin-bottom:100px;
}
#link{
	margin-bottom:50px;
	height:550px;
}
#link_w{
	width:690px;
}
.link_box{
	margin:20px;
}





#link p{
	margin-top:10px;
	margin-bottom:10px;
}

/**work**/
#work{
	width:950px;
	margin-top:30px;
}
#work h3{
	color:#333;
	padding-left:20px;
	background-image:url(../img/stripe.gif);
	background-repeat:repeat-x;
	background-position:bottom;
	margin-top:30px;
	margin-left:10px;
	width:660px;
	padding-bottom:5px;
	margin-bottom:20px;
	
}
.box1,.box2{
	height:530px;
}
.box3{
	height:300px;
}
#left{
	width:700px;
	float:left;
	height:auto;
}
#left li{
	float:left;
	margin:10px;
	
}
#right{
	width:240px;
	float:right;
	height:auto;
}

#right ul{
	background-color:#f9f9f9;
	border-top:3px solid #333;
}

#right li{
	padding:10px 10px 10px 20px;
	border-bottom:1px dotted #ddd;
}
#right li a{
	display:block;
}
#right li a:hover{
	color:#999;
}
#right li:last-child{
	border-bottom:1px solid #ccc;
}

#right li.arrow{
	background-image:url(../img/arrow.png);
	background-repeat:no-repeat;
	background-position:left 20px center;
	padding-left:40px;
}

/**flow**/
#flow{
	width:980px;
	margin:30px auto;
}
#flow h4{
	font-size:1.3em;
	margin-top:30px;
	width:300px;
	border-bottom:1px solid #333;
	padding-left:20px;
}
#flow h5{
	font-size:1.5em;
	letter-spacing:2px;
	background-image:url(../img/stripe.gif);
	background-repeat:repeat-x;
	background-position:bottom;
	margin-top:30px;
}
#flow p,#mail p{
	margin-top:20px;
}
.large{
	font-size:1.2em;
	background-color:#84e0e0;
	padding:5px;
	border-radius:3px;
	margin-right:5px;
}
.secound{
	font-size:1.2em;
	background-color:#66c1e0;
	padding:5px;
	border-radius:3px;
	margin-right:5px;
}
.last{
	margin-bottom:30px;
}
/**eco**/
#eco{
	width:800px;
	margin:40px auto;
}
#eco #eco_text{
	font-size:1.5em;
	width:750px;
	margin:40px auto;
}
#eco_text p{
	line-height:60px;
}

/**thanks**/
#thanks{
	width:700px;
	height:450px;
	margin:80px auto;
}
#thanks h2{
	font-size:1.2em;
}
#thanks p{
	line-height:40px;
	margin-top:10px;
	font-size:1.1em;
}
#thanks h3{
	margin-top:20px;
	font-size:1.2em;
	border-bottom:1px solid #333;
	width:200px;
}
p.size{
	font-size:1.2em;
}

/**mail**/
#mail{
	width:820px;
	margin:30px auto;
}
#mail p{
	width:730px;
	margin:20px auto;
	line-height:35px;
}
#mail h4{
	width:730px;
	margin:0 auto;
}
/***footer***/

footer{
	clear:both;
	width:100%;
	height:220px;
	background-color:#333;
	color:#fff;
}

#f_wrapper{
	width:980px;
	height:150px;
	margin:0 auto;
	padding-top:30px;
}
#f_left{
	width:350px;
	float:left;
}
#f_right{
	float:right;
	width:630px;
}
#f_right li{
	float:left;
}
#f_right li a{
	color:#ccc;
	padding:14px;
	display:block;
}
#f_right li a:hover{
	text-decoration:underline;
}
#copy{
	text-align:center;
	color:#777;
}