/*** ----------------------------------------------------------------------------- 

reset

-----------------------------------------------------------------------------  ***/
.clearfix:after {
	content:".";
	display:block;
	visibility:hidden;
	clear:both;
	height:0.1px;
	font-size:0.1em;
	line-height:0;
}
.clearfix {
	display:inline-table;
	zoom:1;
}
/*Hides from IE-mac \*/
* html .clearfix {
	height:1%;
}
.clearfix {
	display:block;
}
/* End hide from IE-mac */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0px;
	padding:0px;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, th, var {
	font-style:normal;
	font-weight:normal;
}
li {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
	font-variant:normal;
}
sup {
	vertical-align:top;
}
sub {
	vertical-align:text-bottom;
}
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
input, textarea, select {
 *font-size:100%;
}
legend {
	color:#000000;
}
img {
	vertical-align:bottom;
}
/*** ------------------------------------------------------------------------------ 

common

-----------------------------------------------------------------------------  ***/
html {
	overflow-y:scroll;
}
body {
	color:#333;
	line-height: 1.6;
	font-size: 12px;
	font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka;
}
body.menu-open {
    background: #F5F5F5;
}

/*** ------------------------------------------------------------------------------ 

リンク

-----------------------------------------------------------------------------  ***/
/* 基本 */
a{
	outline:none;
}
a:link {
	color: #333333;
	text-decoration:none;
}
a:visited {
	color: #333333;
	text-decoration:none;
}
a:hover {
	color: #333333;
	text-decoration:underline;
}
a:active {
	color: #333333;
	text-decoration:underline;
}
.opacity a:hover img {
	opacity:0.7;
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
}
/*** ------------------------------------------------------------------------------ 

wrapper

-----------------------------------------------------------------------------  ***/
#wrapper {
	position:relative;
	width:100%;
	border-top:#000 5px solid;
}
@media screen and (max-width:737px){
	#wrapper {
		border-top:#000 3px solid;
	}
}

/*** ------------------------------------------------------------------------------ 

header

-----------------------------------------------------------------------------  ***/
#header {
	width:960px;
	margin: 0 auto;
	position:relative;
	padding:2px 0 0;
}
#header .description {
	margin:0 0 8px;
	font-size:0.917em;
}
#header .logo{
	float:left;
	width:502px;
	margin:0 0 15px;
}
#header .logo.pc_none{ display:none;}
#header .logo.sp_none{ display:block;}

#header .tel{
	float:right;
	padding:30px 0 0;
}
#header .header-nav{
	position:absolute;
	right:0;
	top:0;
}
#header .header-nav li{
	float:left;
	margin:0 0 0 3px;
}

#header #menu{
	display:none;
}

@media screen and (max-width:737px){
	#header {
		width: auto;
	}
	#header .description{
		font-size:9px;
		margin:0 0 5px 12px;
	}
	#header .logo.pc_none{
		margin:0 0 8px 12px;
	}
	#header .logo.pc_none img{
		max-width: 140px;
	}
	#header .logo{
		float: none;
		width: auto;
		margin:0 0 15px;
	}
	#header .logo.pc_none{ display:block;}
	#header .logo.sp_none{ display:none;}
	
	#header .logo img{
		max-width:100%;
		height:auto;
	}
	#header .tel{
		display: none;
		float: none;
		padding:30px 0 0;
	}
	#header .tel img{
		max-width:100%;
		height:auto;
	}
	#header .header-nav{
		display: none;
	}
	#header #menu{
		display:block;
		position: absolute;
		right:0;
		top:0;
		z-index:9999;
		background:#000;
		color:#FFFFFF;
		font-size:0.76em;
		height:60px;
		overflow:hidden;
	}
	#header #menu:before{
		content:"MENU";
		display:block;
		position:absolute;
		left:0;
		top:37px;
		width:60px;
		text-align: center;
		font-size:1.167em;
	}
	#header #menu.close{
		background: url(../img/header_menu_bg02.png) center 40px no-repeat #31A9D8;
		background-size: auto 7px ;
	}
	#header #menu a{
	  display: inline-block;
	  position: relative;
	  width: 60px;
	  height:60px;
	  overflow:hidden;
	}
	#header #menu a span{
	  display: block;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 24px;
	  height: 2px;
	  margin: -6px 0 0 -12px;
	  background: #FFF;
	  transition: .2s;
	  text-indent:-9999px;
	}
	#header #menu a span:before, #header #menu a span:after{
	  display: block;
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 0;
	  width: 24px;
	  height: 2px;
	  background: #FFF;
	  transition: .3s;
	}
	#header #menu a span:before{
	  margin-top: -6px;
	}
	#header #menu a span:after{
	  margin-top: 4px;
	}
	#header #menu a .close{
	  background: transparent;
	}
	#header #menu a .close:before, #header #menu a .close:after{
	  margin-top: 0;
	}
	#header #menu a .close:before{
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
	}
	#header #menu a .close:after{
	  transform: rotate(-135deg);
	  -webkit-transform: rotate(-135deg);
	}

}

/*** ------------------------------------------------------------------------------ 

nav

-----------------------------------------------------------------------------  ***/
#nav {
	width:960px;
	margin:0 auto 26px;
}
#nav .header-sp p.description{
	display: none;
}
#nav ul{
	height:35px;
}
#nav ul li{
	display:block;
    white-space:nowrap;
	float:left;
	position:relative;
	width:135px;
}
#nav ul li.pc_none{
	display: none;
}
#nav ul li.nav01,
#nav ul li.nav03,
#nav ul li.nav05{
	margin:0 3px 0 0;
}
#nav ul li.nav02,
#nav ul li.nav04,
#nav ul li.nav06{
	margin:0 2px 0 0;
}
#nav ul li a{
	list-style: none;
	height:35px;
	text-indent:-9999px;
	display: block;
}
#nav ul li.nav01 a{
	background: url(../img/nav_btn01.png) no-repeat;
}
#nav ul li.nav02 a{
	background: url(../img/nav_btn02.png) no-repeat;
}
#nav ul li.nav03 a{
	background: url(../img/nav_btn03.png) no-repeat;
}
#nav ul li.nav04 a{
	background: url(../img/nav_btn04.png) no-repeat;
}
#nav ul li.nav05 a{
	background: url(../img/nav_btn05.png) no-repeat;
}
#nav ul li.nav06 a{
	background: url(../img/nav_btn06.png) no-repeat;
}
#nav ul li.nav07 a{
	background: url(../img/nav_btn07.png) no-repeat;
}

#nav ul li a:hover,
#home #nav ul li.nav01 a,
#about #nav ul li.nav02 a,
#lineup #nav ul li.nav03 a,
#guide #nav ul li.nav04 a,
#sample #nav ul li.nav05 a,
#qa #nav ul li.nav06 a,
#flow #nav ul li.nav07 a{
	background-position: left -35px;
}

#nav .logo,
#nav .contact,
#nav .menu-btn{
	display: none;
}

@media screen and (max-width:737px){
	#nav {
		width: 100%;
		min-height: 100%;
		position: absolute;
		top: 0;
		left:0;
		z-index: 9998;
		display: none;
		box-sizing:border-box;
		background:#F5F5F5;
	}
	#nav .header-sp{
		background: #FFF;
	}
	#nav .header-sp p.description{
		display: block;
		font-size: 9px;
		margin: 2px 0 5px 12px;
	}
	
	#nav .logo{
		display:block;
		width: 100%; 
		border-bottom: #CCC 1px solid;
		padding:0 10px 8px 12px;
		box-sizing:border-box;
	}
	#nav .logo img{
	    max-width: 140px;
		height: auto;
	}
	#nav ul{
		width: auto;
		height:auto;
		margin:0 auto;
	}
	#nav > ul{
		background:#F5F5F5;
		font-size:1.333em;
	}
	#nav ul li{
		width:100%;
		border-bottom: 1px solid #CCC;
		float:none;
	}
	#nav ul li.pc_none{
		display:block;
	}
	#nav ul li.nav01 a,
	#nav ul li.nav02 a,
	#nav ul li.nav03 a,
	#nav ul li.nav04 a,
	#nav ul li.nav05 a,
	#nav ul li.nav06 a,
	#nav ul li.nav07 a,
	#nav ul li.pc_none a{
		background: url(../img/arrow01.png) no-repeat left 15px center;
		background-size: 8px;
	}
	#home #nav ul li.nav01 a,
	#about #nav ul li.nav02 a,
	#lineup #nav ul li.nav03 a,
	#guide #nav ul li.nav04 a,
	#sample #nav ul li.nav05 a,
	#qa #nav ul li.nav06 a,
	#flow #nav ul li.nav07 a{
		background: url(../img/arrow01.png) no-repeat left 15px center;
		background-size: 8px;
	}
	#nav ul li a{

		text-indent:0;
		width: auto !important;
		height: auto;
		text-align: left;
		display: block;
		text-decoration: none;
		padding:13px 13px 13px 35px;
		font-size:15px;
	}
	#nav ul li a:after{
		display:none;
	}
	#nav ul li a:before{
		content:"";
		width:34px;
		height:34px;
		border-radius:50%;
		position:absolute;
		left:10px;
		top:50%;
		margin:-17px 0 0 0;
	}
	#nav ul li a:hover:after,
	#home #nav ul li.nav-home a:after,
	#service #nav ul li.nav-service a:after,
	#company #nav ul li.nav-company a:after,
	.recruit #nav ul li.nav-recruit a:after,
	#requirements nav ul li.nav-requirements a:after{
		display:none;
	}
	#nav .contact,
	#nav .menu-btn{
		display: block;
	}
	#nav > ul.contact{
		margin:15px 10px;
		text-align: center;
	}
	#nav > ul.contact li{
		float:left;
		width:49%;
		border:none;
	}

	#nav > ul.contact li:nth-child(2){
		float:right;
		width:49%;
	}
	#nav > ul.contact li a{
		text-align: center;
		color: #FFF !important;
		padding: 10px;
		display:block;
	}
	#nav > ul.contact li:nth-child(1) a{
		background: #e6336d !important;
	}
	#nav > ul.contact li:nth-child(2) a{
		background: #4ecd00 !important;
	}
	#nav > ul.contact li a img{
		max-width: 100%;
	}
	#nav p.menu-btn a{
		display:block;
		background: #666;
		color:#FFFFFF;
		padding:10px 10px;
		text-align: center;
		margin:10px;
		font-size:1.167em;
	}
	#nav p.menu-btn a:hover{
		text-decoration: none;
	}
	#nav p.menu-btn a span{
		/*display:inline-block;
		padding:0 0 0 25px;
		background: url(../img/icon_close.png) left center no-repeat;
		background-size: 11px auto;*/
	}
	
	#nav p.menu-btn a span{
		display:inline-block;
		background-size: 11px auto;
	}
}

@media screen and (min-width: 737px){
	#nav{
		display:block !important;
	}
}



/*** ------------------------------------------------------------------------------ 

visual

-----------------------------------------------------------------------------  ***/
#visual {
	width:960px;
	margin:0 auto 35px;
}

@media screen and (max-width:737px){
	#visual {
		width: auto;
		margin:0 auto 35px;
	}	
}

/*** ------------------------------------------------------------------------------ 

cont

-----------------------------------------------------------------------------  ***/
#cont {
	width:960px;
	margin: 0px auto 50px;
	position:relative;
}

@media screen and (max-width:737px){
	#cont {
		width: auto;
		margin: 0 auto;
		padding:0 3%;
	}	
}


/*** ------------------------------------------------------------------------------ 

footer

-----------------------------------------------------------------------------  ***/
#footer{
	background:#EEEEEE;
    display: block;
    height: 340px;
    padding: 30px 0;
    margin: 0 auto;
}
/*#footer-box{
	position:relative;
	width:960px;
	height:353px;
	margin:0 auto;
}
.footer-box01{
	position:absolute;
	top:0;
}*/

#footer .copyright{
	position:absolute;
	bottom: 40px;
	width:100%;
	text-align:center;
}


#footer .inner{
	width:960px;
	margin:0 auto;
}
#footer .contact{
	position:relative;
	width:424px;
	float:left;
}
#footer .contact ul li{
	float:left;
	margin:0 2px 20px 0;
}
#footer .contact .tel{
	margin:0 0 15px;
}
#footer .contact .balloon{
	position:absolute;
	right:0;
	top:15px;
}

#footer .banner{
	float:right;
	width:531px;
	padding:20px 0 0;
	margin:0 0 15px;
}
#footer .banner li{
	float:left;
	width:250px;
	margin:0 0 10px 15px;
}
#footer .banner li a:hover{
	text-decoration: none;
}

#footer .footer-nav{
	clear:both;
	margin:0 auto 25px;
	width:850px;
}
#footer .footer-nav ul{
	text-align: center;
	padding:7px 0;
}
#footer .footer-nav ul li{
	display:inline-block;
	padding:0 7px;
	line-height:1.1;
}
#footer .footer-nav ul.corporate {
	border-top:#FFF 1px solid;
}
#footer .footer-nav ul.corporate li{
	border-right: #333 1px solid;
	padding:0 9px 0 7px;
}
#footer .footer-nav ul.corporate li:first-child{
	border-left: #333 1px solid;
}
#footer .footer-nav ul li a{
}
#footer .footer-nav ul li a:hover{
	text-decoration: underline;
}
#footer .copyright{
	text-align: center;
	font-size:0.917em;
	padding:0 0 1em;
}
#footer .copyright a:hover{
	text-decoration: none;
	cursor:default;
}

@media screen and (max-width:737px){
	#footer-box{
		position: static;
		width: auto;
		height: inherit;
	}
	.footer-box01{
		position: static;
	}
	#footer .footer-nav{
		position: static;
	}
	#footer .copyright{
		position: static;
		width:100%;
		text-align:center;
	}
	#footer .inner{
		width: auto;
		padding:5% 3% 0;
	}
	#footer .contact{
		width: auto;
		float: none;
	}
	#footer .banner{
		float: none;
		width: auto;
	}
	#footer .footer-nav{
		margin:0 auto 15px;
		width: auto;
	}
	#footer .contact ul{
		display: none;
	}
	#footer .contact .balloon{
		display: none;
	}
	#footer .contact .tel img{
		max-width: 100%;
		height:auto;
	}
	#footer .banner li{
		width: 49%;
		float:left;
		margin:0 2% 2% 0;
		text-align:center;
		font-size: 10px;
	}
	#footer .banner li:nth-child(2n){
		margin:0;
	}
	#footer .banner li img{
		max-width: 100%;
		height:auto;
	}
	#footer .footer-nav ul{
		text-align:left;
		padding:0;
		border-top:1px solid #aaa;
	}
	#footer .footer-nav ul li{
		display:block;
		padding:0;
	}
	#footer .footer-nav ul li a{
		display:block;
		padding:17px 12px 17px 25px;
		border-bottom:1px solid #aaa;
		background:url(../img/arrow01.png) no-repeat left 10px center;
		background-size: 5px;
	}
	#footer .footer-nav ul.corporate {
		border-top: none;
	}
	#footer .footer-nav ul.corporate li {
		border-right: none;
		padding: 0;
	}
	#footer .footer-nav ul.corporate li:first-child {
		border-left: none;
	}
	#footer .copyright{
		padding:0 0 60px 0;
	}	
}

/*** ------------------------------------------------------------------------------ 

トップアンカー

-----------------------------------------------------------------------------  ***/
#scroll {
	position:absolute;
	left:50%;
	margin:0 0 0 495px;
	width:46px;
	height:46px;
	bottom:344px;
	z-index:9999;
}
#scroll.ptop {
	position: fixed;
	left:50%;
	margin:0 0 0 495px;
	bottom:25px;
	display:none;
}
#scroll .tel{
	display:none;
}

@media screen and (max-width: 737px){
	#scroll,
	#scroll.ptop {
		position:fixed !important;
		left:0;
		margin:0;
		bottom:0;
		width: 100%;
		height: auto;
	}
	#scroll a{
		display:block;
		background: none;
		width: auto;
		height: auto;
		border-radius:0;
		text-indent:0;
		color:#FFFFFF;
	}
	#scroll a:after{
		display:none;
	}
	#scroll .tel{
		display: block;
	}
	
	#scroll ul{
		width: 100%;
		background: #CCC;
	}
	#scroll ul li{
		float:left;
		text-align: center;
	}
	#scroll ul li:nth-child(1) ,
	#scroll ul li:nth-child(2) {
		width:43%;
		overflow:hidden;
	}
	#scroll ul li img{
		max-width: 100%;
	}
	#scroll ul li:nth-child(1) a,
	#scroll ul li:nth-child(2) a{
		padding:12px 0 11px;
		box-sizing:border-box;
		border-right:1px #FFFFFF solid;
		display:block;
	}
	#scroll ul li:nth-child(1) a{ background:#e6326d;}
	#scroll ul li:nth-child(2) a{ background:#4ecd00;}
	#scroll ul li.top img{
		display: none;
	}
	#scroll ul li a:hover{
		text-decoration: none;
	}
	#scroll ul li:nth-child(1) img,
	#scroll ul li:nth-child(2) img{
		height:27px;
		width: auto;
		margin:0 10px 0 0;
	}
	#scroll ul li:nth-child(3) {
		width:14%;
		overflow:hidden;
	}
	#scroll ul li:nth-child(3) a{
		padding: 0;
		background: #CCC;
		box-sizing:border-box;
		display:block;
		position:relative;
		height: 50px;
	}
	#scroll ul li:nth-child(3) a:after{
		content:"";
		display:block;
		width:0;
		height:0;
		position:absolute;
		left:50%;
		margin:0 0 0 -10px;
		top:10px;
		border: #CCC 10px solid;
		border-bottom: #FFF 10px solid;
	}
}




/*** ------------------------------------------------------------------------------ 

共通設定

-----------------------------------------------------------------------------  ***/
#cont p,
#cont ul,
#cont dl,
#cont table{
	font-size:1.167em;
	margin:0 0 1em;
}
#cont > p.experience{
	text-align: center;
}
#cont h1{
	margin:0 0 40px;
}
#cont h2{
	margin:0 0 20px;
}
#cont .section{
	margin:0 0 40px;
}
#cont .experience img{
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}
#cont .experience img:hover{
    -webkit-transform: scale(1.1);  
    -moz-transform: scale(1.1);  
    transform: scale(1.1);  
	box-shadow: none;
}
#cont .mail-banner{
	display: none;
}



@media screen and (max-width:737px){
	#cont > p.experience{
		display: none;
	}
	#cont .mail-banner{
		display: block;
		text-align:center;
	}
	#cont .mail-banner img{
		max-width: 100%;
	}
	#cont p,
	#cont ul,
	#cont dl,
	#cont table{
		font-size:15px;
		margin:0 0 1em;
	}
}


/*** ------------------------------------------------------------------------------ 

キャンペーン（見積り・資料請求共通）

-----------------------------------------------------------------------------  ***/
#form .section .campaign,
#estimate02 .section .campaign{
	margin:0 0 20px;
	width:880px;
	position:relative;
}
#form .section .campaign.three,
#estimate02 .section .campaign.three{
	height:290px;
}
#form .section .campaign .img,
#estimate02 .section .campaign .img{
	margin:0;
}
#form .section .campaign .img .sp-img,
#estimate02 .section .campaign .img .sp-img{
	display:none;
}
#form .section .campaign .absolute,
#estimate02 .section .campaign .absolute{
	position:absolute;
	left:23px;
	top:127px;
	line-height:1.4;
	width: 830px;
}
#form .section .campaign.three .absolute,
#estimate02 .section .campaign.three .absolute{
	top:130px;
}
#form .section .campaign .absolute p,
#estimate02 .section .campaign .absolute p{
	margin:0 0 10px;
}
#form .section .campaign .absolute p.indent,
#estimate02 .section .campaign .absolute p.indent{
	text-indent:-5em;
	margin:0 0 0 5em;
}
#form .section .campaign .absolute span,
#estimate02 .section .campaign .absolute span{
	color:#FD0247;
	display:inline !important;
}
#form .section .campaign .absolute ul li,
#estimate02 .section .campaign .absolute ul li{
	font-size:0.86em;
	text-indent:-1em;
	margin:0 0 0 1em;
}