@charset "utf-8";

body{
width:100%;
	background-color:#33827E;
}
.top{
	width:100%;
	padding:20px 0;
	background-color:#fff;
}

a:link,
a:visited,
a:hover,
a:active{
	text-decoration:none;
	color:#ffffff;
}

.clearfix:after{
	 content: "."; 
	 display: block; 
	 height: 0; 
	 font-size:0;	
	 clear: both; 
	 visibility:hidden;
}
a.green:link,
a.green:visited,
a.green:hover,
a.green:active{
	text-decoration:underline;
	color:#33827E;
}
.member table{
	width:60%;
	margin:50px auto 0;
	border:1px solid #fff;
}
.member table td{
	border:10px solid #33827E;
	background-color:#fff;
}
.member table td img{
	width:100%;
}

/*===============================================
 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
	.logo{
		width:889px;
		text-align:center;
		margin:100px auto 0;
		padding:50px 0;
		background:url(/images/bg.png) no-repeat;
	}
	.bot{
		width:100%;
		text-align:center;
		background-color:#33827E;
	}
	/* Navigation */
	.nav, 
	.nav ul { 
			width:525px;
			margin:0 auto;
			padding:20px 0;
	}
	.nav {
	  z-index: 100;
	  position: relative;
	}
	.nav li {
	  border-left: 1px solid #fff;
	  float: left;
	  color:#fff;
	  width:130px;
	  position: relative;
	}
	.r_border{
	 border-right: 1px solid #fff;
	}
	.nav li a, 
	.nav li a:link, 
	.nav li a:active, 
	.nav li a:visited {
	  color: #fff;
	  display: block;
	  padding:15px 0;
	  text-transform: lowercase;
	  text-decoration: none;
	}

	.nav li a:hover {
	  background:#3E3A39;
	  color: #000;
	}
	#nav-one li:hover a, 
	#nav-one li.sfHover a {
	  background:#3E3A39;
	  color:#fff;
	}
	#nav-one li:hover ul a, 
	#nav-one li.sfHover ul a {
	  background:#565656;
	  color:#959595;	
	}
	#nav-one li:hover ul a:hover, 
	#nav-one li.sfHover ul a:hover {
	  background: #ccc;
	  color: #000;	
	}

	.nav ul {
	  width: 130px;
	  position: absolute;
	  top: -999em;
	  left: -1px;
	}
	.nav li:hover ul,
	.nav li.sfHover ul {
	  top: 25px;
	}
	.nav ul li {
	  float: none;
	}
	.nav ul a {
	  border-bottom: 1px solid #fff;
	  padding-right: 20px;
	  width:130px;
	  white-space: nowrap;
	}
	.nav ul a:hover {
	  background:#3E3A39;
	  color:#fff;
	}
	.work{
		width:850px;
		margin:30px auto 0; 
	}
	.work img{
		width:30%;
		margin:0 10px;
	}


	.box{
		width:850px;
		margin:60px auto 0;
	}
	#news{
	display:inline;
		float:left;
		width:580px;
		padding:20px;
		background-color:#fff;
		opacity:0.7;
		text-align:left;
		border-radius:10px 10px 10px 10px;
		-moz-border-radius:10px 10px 10px 10px;
		-webkit-border-radius:10px 10px 10px 10px;
		-o-border-radius:10px 10px 10px 10px;
		-ms-border-radius:10px 10px 10px 10px; 
	}
	#news .title{
		font-size:20px;
		font-weight:bold;
		color:#1C3E3D;
		margin-bottom:15px;
		border-bottom:1px solid #1C3E3D;
	}
	#news p{
		line-height:30px;
	}
	span.date{
		color:#fff;
		font-weight:bold;
		padding:0 5px;
		background-color:#1C3E3D;
	}
	.banner{
	display:inline;
		float:right;
		width:200px;
	}
	.banner img{
		width:200px;
	}
	.banner p{
		display:inline;
		padding-bottom:10px;
	}
}
/*===============================================
 画面の横幅が768pxまで
===============================================*/

@media screen and (max-width: 768px){
	.logo{
		width:80%;
		text-align:center;
		margin:20px auto 0;
		padding:20px 0;
		background:url(/images/bg.png) no-repeat;
		background-size:contain;
	}
	.bot{
		width:100%;
		text-align:center;
		background-color:#33827E;
	}

	
	/* Navigation */
	.nav, 
	.nav ul { 
			width:400px;
			margin:0 auto;
			padding:20px 0;
	}
	.nav {
	  z-index: 100;
	  position: relative;
	}
	.nav li {
	  border-left: 1px solid #fff;
	  float: left;
	  color:#fff;
	  width:130px;
	  position: relative;
	}
	.r_border{
	 border-right: 1px solid #fff;
	}
	.nav li a, 
	.nav li a:link, 
	.nav li a:active, 
	.nav li a:visited {
	  color: #fff;
	  display: block;
	  padding:15px 0;
	  text-transform: lowercase;
	  text-decoration: none;
	}

	.nav li a:hover {
	  background:#3E3A39;
	  color: #000;
	}
	#nav-one li:hover a, 
	#nav-one li.sfHover a {
	  background:#3E3A39;
	  color:#fff;
	}
	#nav-one li:hover ul a, 
	#nav-one li.sfHover ul a {
	  background:#565656;
	  color:#959595;	
	}
	#nav-one li:hover ul a:hover, 
	#nav-one li.sfHover ul a:hover {
	  background: #ccc;
	  color: #000;	
	}

	.nav ul {
	  width:130px;
	  position: absolute;
	  top:-999em;
	  left:-1px;
	}
	.nav li:hover ul,
	.nav li.sfHover ul {
	  top:25px;
	}
	.nav ul li {
	  float: none;
	}
	.nav ul a {
	  border-bottom: 1px solid #fff;
	  width:130px;
	  white-space: nowrap;
	}
	.nav ul a:hover {
	  background:#3E3A39;
	  color:#fff;
	}
	.work{
		width:680px;
		margin:30px auto; 
	}
	.work img{
		width:30%;
		margin:0 5px;
	}

	.box{
		width:680px;
		margin:20px auto 0;

	}
	#news{
		float:left;
		width:310px;
		padding:20px;
		background-color:#fff;
		opacity:0.7;
		text-align:left;
		border-radius:10px 10px 10px 10px;
		-moz-border-radius:10px 10px 10px 10px;
		-webkit-border-radius:10px 10px 10px 10px;
		-o-border-radius:10px 10px 10px 10px;
		-ms-border-radius:10px 10px 10px 10px; 
	}
	#news p{
		line-height:30px;
	}
	span.date{
		color:#fff;
		font-weight:bold;
		padding:0 5px;
		background-color:#1C3E3D;
	}
	#news .title{
		font-size:20px;
		font-weight:bold;
		color:#1C3E3D;
		margin-bottom:10px;
		border-bottom:1px solid #1C3E3D;
	}
	.banner {
		float:left;
		width:300px;
		margin-left:20px;
	}
	.banner  img{
		width:300px;
	}
}

/*===============================================
画面の横幅が640pxまで
===============================================*/

@media screen and (max-width:640px){
	body{
	
	}
	.logo{
		text-align:center;
		background:url(/images/bg.png) 0 60px no-repeat;
		background-size:contain;
	}
	.logo img{
		width:60%;
		margin:30px auto 0;
	}
	.bot{
		width:100%;
		margin:0 auto;
		text-align:center;
		
	}

		
		/* Navigation */
	.nav, 
	.nav ul{ 
			width:400px;
			margin:0 auto;
			padding:20px 0;
	}
	.nav{
	  z-index:100;
	  position:relative;
	}
	.nav li{
	  position: relative;
	  float: left;
	  color:#fff;
	  width:98px;
	  border-left: 1px solid #fff;
	}
	.r_border{
	 border-right: 1px solid #fff;
	}
	.nav li a, 
	.nav li a:link, 
	.nav li a:active, 
	.nav li a:visited {
	  color: #fff;
	  display: block;
	  padding:15px 0;
	  text-transform:lowercase;
	}
	.nav li a:hover {
	  background:#3E3A39;
	  color:#fff;
	}
	#nav-one li:hover a, 
	#nav-one li.sfHover a {
	  color:#fff;
	}
	#nav-one li:hover ul a:hover, 
	#nav-one li.sfHover ul a:hover {
	  background:#3E3A39;
	  color:#fff;
	}
	.nav ul {
	  width:98px;
	  position: absolute;
	  top:-999em;
	  left:-1px;
	}
	.nav li:hover ul,
	.nav li.sfHover ul {
	  top:25px;
	}
	.nav ul li {
	  float:none;
	  border-left:none;
	}
	.nav ul a {
	  width:98px;
	  white-space: nowrap;
	}
	.nav ul a:hover {
	  background:#3E3A39;
	}
	.work{
	width:90%;
	text-align:center;
	margin:30px auto; 
	}
	.work img{
		width:100%;
		margin:10px auto;
	}

	.box{
		width:90%;
		text-align:center;
		margin:20px auto 0;
	}
	#news{
		width:100%;
		float:none;
		padding:20px 0;
		margin:10px auto 20px;
		background-color:#fff;
		opacity:0.7;
		text-align:left;
		border-radius:10px 10px 10px 10px;
		-moz-border-radius:10px 10px 10px 10px;
		-webkit-border-radius:10px 10px 10px 10px;
		-o-border-radius:10px 10px 10px 10px;
		-ms-border-radius:10px 10px 10px 10px; 
	}
	#news .title{
		font-size:20px;
		font-weight:bold;
		color:#1C3E3D;
		margin-bottom:10px;
		padding:0 20px 5px 20px;
		border-bottom:1px solid #1C3E3D;
	}
	#news p{
		line-height:19px;
		padding:5px 20px;
	}
	span.date{
		color:#fff;
		font-weight:bold;
		padding:0 5px;
		background-color:#1C3E3D;
	}
	.banner {
		float:none;
		width:100%;
		margin:0 auto 10px;
	}
	.banner  img{
		width:100%;
	}
}

#footer{
	text-align:center;
	color:#fff;
	margin:20px 0;
}