@charset "utf-8";

/* common
--------------------------------------------------------------------*/
body {
	letter-spacing: 1px;
}
h2 {
	font-size: 30px;
}
h3 {
	font-size: 24px;
}
h4 {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: 8px;
}

/* header
--------------------------------------------------------------------*/
#header {
	overflow: hidden;
	position: relative;
	margin-bottom: 135px;
	width: 100%;
	height: 860px;
}
	#header h1 {
		font-size: 0;
		line-height: 0;
		position: absolute;
		top: 20px;
		left: 0px;
		text-align: center;
		width: 100%;
	}
	#header p {
		font-size: 100px;
		color: #ffffff;
		position: absolute;
		bottom: 300px;
		left: 0px;
		letter-spacing: 4px;
		text-align: center;
		width: 100%;
		font-family: 'Dosis', sans-serif;
	}

@media screen and (max-width: 560px) {
	#header p {
		font-size: 24px;
	}
}
@media screen and (max-width: 404px) {
#header {
	margin-bottom: 65px;
	height: 317px;
}
	#header h1 {
		top: 25px;
	}
	#header h1 img {
		width: 135px;
		height: 22px;
	}
	#header p {
		font-size: 28px;
		bottom: 100px;
	}
}

/* navi
--------------------------------------------------------------------*/
#navi {
	font-size: 14px;
	position: absolute;
	top: 775px;
	left: 0px;
	width: 100%;
	z-index: 100;
}
#navi.fix {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 100;
}
#navi .bg2 {
	background: url("../images/navi_bg2.png") repeat-x;
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 74px;
}
	#navi .inner {
		position: relative;
		margin: 0 auto;
		max-width: 660px;
		height: 74px;
	}

		#navi .inner ul {
			position: relative;
			margin: 0 auto;
			
		}
		#navi .inner li {
			display: -moz-inline-box;
			display: inline-block;
			/display: inline;
			/zoom: 1;
			 padding-right: 10px;
					}
		#navi .inner li.n1 {
			width: 100px;
			margin-left: 45px;
		}
		#navi .inner li.n2 {
			width: 80px;
		}
		#navi .inner li.n3 {
			width: 120px;
		}
		#navi .inner li.n4 {
			margin-right: 0px;
			width: 140px;
		}
		#navi .inner li a {
			color: #ffffff;
			display: block;
			line-height: 20px;
			text-align: center;
			padding: 27px 0 27px 0;
		}
		#navi .inner li a:hover {
			background: url("../images/navi_active.gif") repeat-x;
			text-decoration: none;
		}
		#navi.fix .inner a:hover {
			background: url("../images/navi_active.gif") left bottom repeat-x;
			text-decoration: none;
		}
		#navi.s1 .inner li.n1 a {
			background: url("../images/navi_active.gif") left bottom repeat-x;
		}
		#navi.s2 .inner li.n2 a {
			background: url("../images/navi_active.gif") left bottom repeat-x;
		}
		#navi.s3 .inner li.n3 a {
			background: url("../images/navi_active.gif") left bottom repeat-x;
		}
		#navi.s4 .inner li.n4 a {
			background: url("../images/navi_active.gif") left bottom repeat-x;
		}
		
@media screen and (max-width: 500px) {
#navi {
	font-size: 13px;
}
	#navi .inner ul {
		margin: 0 auto;
	}
	#navi .inner li {
		margin-right: 0;
	}
}
@media screen and (max-width: 404px) {
#navi {
	font-size: 14px;
	top: 261px;
}
#navi .bg2 {
	height: 37px;
}
	#navi .inner {
		position: relative;
		margin: 0 auto;
		max-width: 660px;
		height: 37px;
	}

		#navi .inner li a {
			padding: 8px 0 9px 0;
		}
		#navi .inner ul {
			margin: 0 auto;
			width: 100%;
			text-align: center;
		}
		#navi .inner li {
			padding-right: 10px; 
		}
		#navi .inner li a:hover {
			background: none;
		}
		#navi.fix .inner a:hover {
			background: none;
		}
		#navi .inner li.n1 {
			width: 55px;
			margin-left: 10px;
		}
		#navi .inner li.n2 {
			width: 44px;
		}
		#navi .inner li.n3 {
			width: 66px;
		}
		#navi .inner li.n4 {
			margin-right: 0px;
			width: 77px;
		}
	#header p br {
		display: inline;
	}
	#header p span {
		display: none;
	}
		#navi .inner p {
			top: 6px;
		}
		#navi .inner p.p1 {
			right: 35px;
		}
		#navi .inner p img {
		}

}

/* footer
--------------------------------------------------------------------*/
#footer {
	background-color: #333333;
	line-height: 24px;
	padding: 28px 0 110px 0;
}
	#footer ul {
		float: left;
		padding: 0 0 0 15px;
	}
	#footer li {
		float: left;
		font-size: 0;
		line-height: 0;
		padding-right: 10px;
	}
	#footer p {
		float: right;
		color: #ffffff;
		text-align: right;
		padding: 0 15px;
	}
		#footer li a {
			display: block;
			font-size: 0;
			line-height: 0;
			overflow: hidden;
			width: 24px;
			height: 24px;
		}

@media screen and (max-width: 404px) {
#footer {
	padding: 14px 0 110px 0;
}
	#footer li {
		padding-top: 1px;
	}
	#footer li img {
	}

}

/* anc
--------------------------------------------------------------------*/
.anc {
	position: relative;
	height: 0px;
}
	.anc div {
		position: absolute;
		top: -80px;
		left: 0px;
	}
@media screen and (max-width: 404px) {
	.anc div {
		top: -45px;
	}
}

/* imgBlock
--------------------------------------------------------------------*/
.imgBlock {
	margin-bottom: 130px;
}
	.imgBlock p {
		font-size: 0;
		line-height: 0;
		text-align: center;
	}
		.imgBlock p img {
			width: 80px;
			height: 44px;
		}
		.imgBlock p a:hover img {
			filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
			-moz-opacity: 0.7;
			opacity: 0.7;
		}
	.imgBlock div {
		font-size: 0;
		line-height: 0;
		overflow: hidden;
		width: 100%;
		height: 668px;
	}
@media screen and (max-width: 404px) {
.imgBlock {
	margin-bottom: 65px;
}
		.imgBlock p img {
			width: 40px;
			height: 22px;
		}
	.imgBlock div {
		height: 175px;
	}
}

/* about
--------------------------------------------------------------------*/
#about {
	padding-bottom: 115px;
}
	#about .inner {
		text-align: left;
		margin: 0 auto;
		max-width: 828px;
	}
		#about .inner h2 {
			border-bottom: 1px solid #000000;
			text-align: center;
			margin-bottom: 30px;
			padding-bottom: 25px;
		}
		#about .inner h3 {
			text-align: center;
			margin-bottom: 30px;
		}
		#about .inner p {
		}
	#about .company {
		text-align: left;
		margin: 0 auto;
		max-width: 828px;
	}
		#about .company h2 {
			border-bottom: 1px solid #000000;
			text-align: center;
			margin-bottom: 20px;
			padding-bottom: 15px;
			font-size:22px
		}
		#about .inner h3 {
			text-align: center;
			margin-bottom: 30px;
		}
		#about .company p {
		}		
		#about .company li {
			float: left;
			margin: 30px 15px;
			width: 45%;
		}
@media screen and (max-width: 844px) {
		#about .inner p {
			padding: 0 15px;
		}
		#about .company ul {
			padding: 0 15px;
		}
		#about .company li {
			float: none;
			margin: 30px 0 0 0;
			width: auto;
			
		}		
}
@media screen and (max-width: 404px) {
#about {
	padding-bottom: 40px;
}
	#about .inner {
	}
		#about .inner h2 {
			margin-bottom: 15px;
			padding-bottom: 15px;
		}
		#about .inner h3 {
			margin-bottom: 15px;
			padding: 15px 10px;
			font-size:16px;
			font-weight:bold;			
		}

}

/* work
--------------------------------------------------------------------*/
#work {
	padding-bottom: 115px;
}
	#work .inner {
		text-align: left;
		margin: 0 auto;
		max-width: 828px;
	}
		#work .inner h2 {
			border-bottom: 1px solid #000000;
			text-align: center;
			margin-bottom: 30px;
			padding-bottom: 25px;
		}
		#work .inner h3 {
			text-align: center;
			margin-bottom: 30px;
		}
		#work .inner p {
		}
	#work .inner {
		text-align: left;
		margin: 0 auto;
		max-width: 828px;
	}
		#work .inner h2 {
			border-bottom: 1px solid #000000;
			text-align: center;
			margin-bottom: 20px;
			padding-bottom: 15px;
			font-size:22px
		}
		#work .inner h3 {
			text-align: center;
			margin-bottom: 30px;
		}
		#work .inner h4 {
			text-align: center;
			margin-bottom: 30px;
				
		}
		#work .inner span {
			color:#666666;
			margin-top:5px;
			
		}				
		#work .inner p {
		}		
		#work .inner li {
			float: left;
			margin: 30px 15px;
			width: 45%;
		}
@media screen and (max-width: 844px) {
		#work .inner p {
			padding: 0 15px;
		}
		#work .inner h4 img{
			width:100%;
				
		}			
		#work .inner ul {
			padding: 0 15px;
		}
		#work .inner li {
			float: none;
			margin: 30px 0 0 0;
			width: auto;
			
		}		
}
@media screen and (max-width: 404px) {
#work {
	padding-bottom: 40px;
}
	#work .inner {
	}
		#work .inner h2 {
			margin-bottom: 15px;
			padding-bottom: 15px;
			font-size:16px;
		}
		#work .inner h3 {
			margin-bottom: 15px;
			padding: 15px 10px;
			font-size:16px;
			font-weight:bold;			
		}

}
/* ACCESS
--------------------------------------------------------------------*/
#access {
	padding-bottom: 115px;
}
	#access .inner {
		text-align: left;
		margin: 0 auto;
		max-width: 828px;
	}
		#access .inner h2 {
			border-bottom: 1px solid #000000;
			text-align: center;
			margin-bottom: 30px;
			padding-bottom: 25px;
		}
		#access .inner ul {
			
		}
		#access .inner li {
			float:left;
			margin: 0 30px;
		#access .inner p {
			width:40%;
			
		}
		
			padding-left:10px;
		}
		#access .inner p.right {
			letter-spacing: 4px;
			text-align: right;
			padding-top: 35px;
		}
		.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media screen and (max-width: 844px) {
		#access .inner p {
			padding: 0 15px;
		}
		#access .inner ul {
			
		}
		#access .inner li {
			width:90%;
			
		}
}
@media screen and (max-width: 404px) {
#access {
	padding-bottom: 40px;
}
	#access .inner {
	}
		#access .inner h2 {
			margin-bottom: 15px;
			padding-bottom: 15px;
		}
		#access .inner h3 {
			margin-bottom: 15px;
		}
		#access .inner p.right {
			padding: 20px 15px 0 15px;
		}
}

/* contact
--------------------------------------------------------------------*/
#contact {
	padding-bottom: 50px;
}
	#contact .inner {
		text-align: left;
		margin: 0 auto;
		max-width: 828px;
	}
		#contact .inner h2 {
			border-bottom: 1px solid #000000;
			text-align: center;
			margin-bottom: 30px;
			padding-bottom: 25px;
		}
		#contact .inner h3 {
			text-align: center;
			margin-bottom: 30px;
		}
		#contact .inner p {
			text-align:center;
		}
		#contact .btn_basic01 {
	display:block;
	text-align:center;
	position:relative;
	font-size:16px;
	line-height:20px;
	padding:12px 0;
	color: #FFF;
	font-weight:bold;
	background-color: #000;
	width:50%;
	margin: 30px auto 20px; 
	
}

#contact .btn_basic01:after {
		content:'';
		width:6px;
		height:12px;
		position:absolute;
		right:10px;
		top:50%;
		margin-top:-6px;
		background: url(../images/ico_arrow01.png) no-repeat left center;
		background-size:6px 12px;
	}
	

@media screen and (max-width: 844px) {
		#contact .inner p {
			padding: 0 15px;
		}
		#contact .btn_basic01 {
			width:100%;
	
}
	
}
@media screen and (max-width: 404px) {
#contact {
	padding-bottom: 40px;
}
	#contact .inner {
	}
		#contact .inner h2 {
			margin-bottom: 15px;
			padding-bottom: 15px;
		}
		#contact .inner h3 {
			margin-bottom: 15px;
			padding: 15px 10px;
			font-size:16px;
			font-weight:bold;			
		}

}

/* form
--------------------------------------------------------------------*/

#formWrap {
	padding-bottom: 115px;
	
}
#formWrap .inner {
		text-align: left;
		margin: 0 auto;
		max-width: 828px;
		
	}
#formWrap .inner h3 {
			text-align: center;
			margin-bottom: 10px;
		}
#formWrap .inner p {
			text-align: center;
			border-top: 1px #000000 dotted;
			text-align: center;
			padding: 40px;
		}			
#formWrap .formTable {
		width: 100%;
		max-width: 628px;
		margin: 15px 100px;
	}
#formWrap th {
		padding: 15px 0 0 0;
	}	
@media screen and (max-width: 844px) {
#formWrap {
	border-top:dotted 
	padding-bottom: 35px;
	
}
#formWrap .formTable {
		width: 90%;
		margin: 15px 10px;
	}

#formWrap .inner p {
			text-align: center;
			border-top: 1px #000000 dotted;
			text-align: center;
			padding: 40px 0;
						
		}			
	
}
@media screen and (max-width: 404px) {
#formWrap .inner h3 {
			margin-bottom: 15px;
			padding: 0 10px;
			font-size:16px;
			font-weight:bold;			
		}
#formWrap input[type=submit]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:200px;
   height:40px;
   padding:0;
   cursor:pointer;
   color:#fff;
   font-weight:bold;
   background:#e95880;
   margin-bottom:10px;
  
}
#formWrap input[type=reset]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:200px;
   height:40px;
   padding:0;
   cursor:pointer;
   color:#fff;
   font-weight:bold;
   background:#00ddff;
  
}		
}	
		
#formWrap input[type=text]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:100%;
   height:25px;
   padding:0 3px;
}
 
#formWrap input[type=text]:focus {
   border:solid 1px #20b2aa;
}
 
#formWrap input[type=text], select { 
   outline: none;
}

#formWrap textarea{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:100%;
   height:100px;
   padding:0 3px;
}
 
#formWrap textarea:focus {
   border:solid 1px #20b2aa;
}
 
#formWrap textarea, select { 
   outline: none;
}

#formWrap input[type=submit]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:200px;
   height:40px;
   padding:0 3px;
   cursor:pointer;
   color:#fff;
   font-weight:bold;
   background:#e95880;
   margin: 5px
  
}
#formWrap input[type=reset]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:200px;
   height:40px;
   padding:0 3px;
   cursor:pointer;
   color:#fff;
   font-weight:bold;
   background:#00ddff;
   margin: 5px
  
}