@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

#header {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}

/*------------------------------------------------------------ 
    Visual 
------------------------------------------------------------*/  

#mainVisual{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	width:9999px;
	height:670px;
	background:url(../img/visual.jpg) no-repeat 50% 50%;
	background-size:cover;
	border-bottom:4px solid #00CC99;
}

#visualLogo{
	width:77px;
	margin:0 auto;
}

#visualLead-en{
	margin:25px 0 20px;
	color:#fff;
	font-size:56px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:2px;
	text-shadow:1px 1px 0 #000;
}

#visualLead-jp{
	color:#fff;
	font-size:36px;
	font-weight:bold;
	letter-spacing:7px;
	text-shadow:1px 1px 0 #000;
}


/*------------------------------------------------------------ 
    News 
------------------------------------------------------------*/  

#newsColumn{
	padding-top:30px;
	padding-bottom:30px;
	background:#fff;
	position:relative;
}

#newsHd{
	float:left;
	padding-left:50px;
	line-height:32px;
	font-family: 'Roboto', sans-serif;
	font-size:150%;
	position:relative;
}

#newsHd:before{
	display:block;
	content:"";
	width:32px;
	height:25px;
	background:url(../common/img/icons.png) no-repeat -35px -26px;
	background-size:250px 250px;
	position:absolute;
	left:0;
	top:3px;
}

#newsLink{
	width:122px;
	height:32px;
	float:right;
}

#newsLink a{
	display:block;
	width:120px;
	height:30px;
	text-align:center;
	line-height:30px;
	color:#000;
	font-size:117%;
	border:1px solid #999999;
	border-radius:3px;
	transition:all 0.2s ease-out;
}

#newsLink a:before{
	display:inline-block;
	vertical-align:middle;
	margin-right:5px;
	content:"";
	width:0;
	height:0;
	border:5px solid transparent;
	border-left:6px solid #000;
	transition:all 0.2s ease-out;
}

#newsLink a:hover{
	color:#fff;
	background:#999;
}

#newsLink a:hover:before{ border-left-color:#fff;}

#newsList{
	width:100%;
	margin-top:20px;
	letter-spacing:-0.4em;
}

#newsList li{
	display:inline-block;
	vertical-align:top;
	letter-spacing:normal;
	width:23.05555555555556%;
	padding-bottom:20px;
}

#newsList li:not(:last-child){ margin-right:2.592592592592593%;}

#newsList a{
	display:block;
	width:100%;
	height:100%;
}

.news-date{
	font-family:Arial, Helvetica, sans-serif;
	font-size:109%;
	color:#666666;
	padding:10px 0 8px;
}

.news-ttl{
	font-size:117%;
	color:#000;
}

#banner{
	width:100%;
	margin-top:35px;
}

/*------------------------------------------------------------ 
    Service
------------------------------------------------------------*/  

.service{
/*	width:31.48148148148148%;*/
width:48.61111111111111%;
	text-align:center;
	height:210px;
	float:left;
	padding-top:50px;
	background-repeat:no-repeat;
	background-size:cover;
}

.service:not(:last-child){ margin-right:2.777777777777778%;}

.service-snow{
	background-image:url(../img/bg-snow.png);
	background-position:50% 0;
}

.service-school{
	background-image:url(../img/bg-school.png);
	background-position:50% 50%;
}

.service-building{
	background-image:url(../img/bg-building.png);
	background-position:50% 50%;
}

.serviceHd{
	width:100%;
	text-align:center;
	color:#fff;
	text-shadow:1px 1px 0 #000;
}

.serviceHd p{
	display:table-cell;
	width:580px;
	height:60px;
	vertical-align:middle;
	font-family:Arial, Helvetica, sans-serif;
	font-size:200%;
	font-weight:bold;
	text-shadow:1px 1px 0 #000;
}

.service-building .serviceHd p{ font-size:32px;}

.serviceHd h2{
	font-size:134%;
	margin-top:15px;
	height:50px;
}

.button{
	width:154px;
	height:36px;
	margin:20px auto 0;
}

.button a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:36px;
	color:#000;
	font-size:117%;
	background:#fff;
	border-radius:5px;
}


/*------------------------------------------------------------ 
    Vision & promise
------------------------------------------------------------*/  

#vision{
	width:100%;
	margin-top:60px;
	padding:60px 0;
	color:#fff;
	background:url(../img/bg-vision.jpg) no-repeat 50% bottom;
	background-size:cover;
	background-attachment:fixed;
	position:relative;
}

#visionHd{
	width:100%;
	text-align:center;
}

.logo{
	width:50px;
	margin:0 auto 20px;
}

#visionHd h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:48px;
	text-shadow:1px 1px 0 #000;
}

#visionTxt{
	margin-top:45px;
	font-size:134%;
	line-height:2;
	text-align:center;
	text-shadow:1px 1px 0 #000;
}

#promiseHd{
	width:100%;
	text-align:center;
	font-size:48px;
	padding-top:80px;
	text-shadow:1px 1px 0 #000;
}

#promiseList{
	width:100%;
	overflow:hidden;
}

#promiseList li{
	width:31.48148148148148%;
	float:left;
	padding:60px 0 0 60px;
	box-sizing:border-box;
	position:relative;
}

#promiseList li:nth-child(3n+2){ margin:0 2.777777777777778%;}

#promiseList li.bdr{
	height:156px;
	border-bottom:1px solid #fff;
}

#promiseList span{
	width:34px;
	height:34px;
	text-align:center;
	line-height:34px;
	font-size:200%;
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #fff;
	position:absolute;
	left:0;
	top:60px;
	text-shadow:1px 1px 0 #000;
}

#promiseList p{
	display:table-cell;
	height:36px;
	vertical-align:middle;
	line-height:1.3;
	font-size:134%;
	text-shadow:1px 1px 0 #000;
}


/*------------------------------------------------------------ 
    Staff 
------------------------------------------------------------*/  

#staffHd{
	width:100%;
	padding:80px 0 60px;
	text-align:center;
}

#staffHd h2{
	font-size:48px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

/* 3人ver
#staffList{
	width:100%;
	overflow:hidden;
}

#staffList li{
	width:29.62962962962963%;
	float:left;
}


#staffList li:not(:nth-child(3n)){ margin-right:5.555555555555556%;}

#staffList li:nth-child(n+4){ margin-top:5.555555555555556%;}
*/

#staffList{
	width:100%;
	max-width:700px;
	margin:0 auto;
	overflow:hidden;
}

#staffList li{ width:45.71428571428571%; margin:0 auto;}

#staffList a{
	display:block;
	width:100%;
	height:100%;
	position:relative;
}

#staffList a:before{
	display:block;
	content:"";
	width:100%;
	height:100%;
	background:rgba(0,0,0,.5);
	position:absolute;
	left:0;
	top:0;
	z-index:2;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
}

#staffList a:hover:before{ background:rgba(0,0,0,0);}

#staffList p{
	width:100%;
	padding:0 10px;
	text-align:center;
	color:#fff;
	font-size:117%;
	position:absolute;
	bottom:20px;
	left:0;
	z-index:10;
	box-sizing:border-box;
	text-shadow:1px 1px 0 #000;
}

#staffList span{
	display:block;
	margin-bottom:10px;
	font-size:28px;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow:1px 1px 0 #000;
}

#staffList strong{ font-family:Arial, Helvetica, sans-serif;}


/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

/* PC */
@media screen and (max-width: 1080px){

.serviceHd p { font-size:2.3vw;}
.service-building .serviceHd p{ font-size:2.8vw;}
.serviceHd h2{ font-size:1.5vw;}

}


/* TABLET */
@media screen and (max-width: 788px){

#header{ position:static;}

/* visual */

#mainVisual{ height:500px;}

#visualLead-en{
	margin:20px 0 15px;
	font-size:6.4vw;
	letter-spacing:1px;
}

#visualLead-jp{
	font-size:4.6vw;
	letter-spacing:4px;
}


/* News */

#newsColumn{ padding-bottom:0px;}

#newsList li{ width:48.61111111111111%;}

#newsList li:not(:last-child){ margin-right:inherit;}
#newsList li:nth-child(odd){ margin-right:2.777777777777778%;}

.news-ttl{ font-size:109%;}

/* Service */

#service{ padding:25px 10px;}

.service{
	height:190px;
	padding-top:0px;
}

.serviceHd p{ vertical-align:bottom;}

.serviceHd h2{
	font-size:1.8vw;
	height:40px;
}

#banner{
	width:auto;
	margin:10px -10px 0;
}


/* Vision & promise */

.bg-w{ background:#fff;}


/* スマホ用背景画像 */
#vision::before{
	background:url(../img/bg-vision.jpg) no-repeat 50% bottom;
	background-size:cover;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	z-index:-1;
}

#vision{
	margin-top:40px;
	padding:40px 0;
	background:none;
}

#visionHd h2{ font-size:6.4vw;}

#visionTxt{
	margin-top:30px;
	font-size:117%;
	line-height:1.8;
}

#promiseHd{
	font-size:6.4vw;
	padding-top:60px;
}

#promiseList li{
	padding:40px 0 0 40px;
}

#promiseList li.bdr{
	height:110px;
	border-bottom:1px solid #fff;
}

#promiseList span{
	width:28px;
	height:28px;
	text-align:center;
	line-height:28px;
	font-size:175%;
	left:0;
	top:40px;
}

#promiseList p{
	height:30px;
	font-size:117%;
}

#promiseList p br{ display:none;}


/* Staff */

#staffHd{ padding:60px 0 40px;}

#staffHd h2{ font-size:6.4vw;}
/* 3人ver
#staffList li{ width:31%;}

#staffList li:not(:nth-child(3n)){ margin-right:3.5%;}
#staffList li:nth-child(n+4){ margin-top:3.5%;}
*/

#staffList li{ width:48.14814814814815%;}

#staffList p{
	font-size:100%;
	bottom:15px;
}

#staffList span{ font-size:2.8vw;}


}


/* SP */

@media screen and (max-width: 560px){


/* Visual */

#mainVisual{
	height:300px;
	background-image:url(../img/visual-sp.jpg);
}

#visualLogo{ width:38px;}



/* News */

#newsColumn{
	padding-top:20px;
	padding-bottom:0px;
}

#newsHd{
	line-height:26px;
	padding-left:36px;
}

#newsHd:before{
	width:26px;
	height:19px;
	top:4px;
	background-position:-68px -26px;
}


#newsLink{
	width:100px;
	height:26px;
}

#newsLink a{
	width:98px;
	height:24px;
	line-height:24px;
	font-size:109%;
}

.news-date{
	font-size:100%;
	padding:8px 0 6px;
}

#banner{
	width:auto;
	margin:5px 10px 0;
}


/* Service */

#service{ padding-top:0px;}

.service{
	width:auto;
	max-width:520px;
	height:auto;
	padding:20px 10px;
	margin:25px 10px 0;
	float:none;
}

.serviceHd p{
	vertical-align:bottom;
	height:56px;
	font-size:6vw;
}

.service-building .serviceHd p{ font-size:7vw;}

.serviceHd h2{
	font-size:3.6vw;
	height:50px;
}

.button{
	margin-top:15px;
	width:124px;
	height:29px;
}

.button a{
	line-height:29px;
	font-size:100%;
}


/* Vision & Primise */

.bg-w{ background:#fff;}

#vision{
	margin-top:0;
	padding:40px 0 25px;
	background:none;
}

/* スマホ用背景画像 */
#vision::before{
	background:url(../img/bg-vision.jpg) no-repeat 50% bottom;
	background-size:cover;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	content:"";
	z-index:-1;
}

.logo{
	width:25px;
	margin-bottom:10px;
}

#visionTxt{
	margin-top:20px;
	font-size:109%;
}

#promiseHd{ padding-top:40px;}

#promiseList li{
	width:100%;
	float:none;
	margin-top:20px;
	padding:0 0 0 40px;
}

#promiseList li:nth-child(3n+2){
	margin-left:0;
	margin-right:0;
	margin-top:20px;
}

#promiseList li.bdr{ height:auto;}

#promiseList li:not(:last-child){
	padding-bottom:20px;
	border-bottom:1px solid #fff;
}

#promiseList span{ top:0;}

#promiseList p{
	height:30px;
	font-size:117%;
}


/* Staff */

#staffHd{ padding:40px 0 20px;}

#staffList{
	width:auto;
	margin:0 -5px;
}

#staffList li{
	width:100%;
	float:none;
	box-sizing:border-box;
	padding:5px;
}

#staffList li:not(:nth-child(3n)){ margin-right:0;}
#staffList li:nth-child(n+4){ margin-top:0;}

#staffList p{ font-size:109%;}

#staffList span{
	font-size:4vw;
	margin-bottom:5px;
}


}