@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:100,200,300,400,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Jost:100,200,300,400,500,600,700,800,900);

@font-face {
	font-family:'ProximanovaLight';
	src:url('../fonts/ProximanovaLight.eot?') format('eot'),url('../fonts/ProximanovaLight.woff') format('woff'),url('../fonts/ProximanovaLight.svg#ProximanovaLight') format('svg'),url('../fonts/ProximanovaLight.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}

@font-face {
	font-family:'NewYork';
	src:url('../fonts/NewYork.eot?') format('eot'),url('../fonts/NewYork.woff') format('woff'),url('../fonts/NewYork.svg#NewYork') format('svg'),url('../fonts/NewYork.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}

html{
	font-size:62.5%;
}

body{
	margin:0 auto;
	padding:0;
	background:#FFF;
	color:#333;
	font-size:1.4rem;
	font-family:'Times New Roman','BIZ UD明朝','BIZ UDMincho','游明朝','YuMincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','メイリオ','Meiryo','ＭＳ Ｐ明朝','MS PMincho',serif;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-o-text-size-adjust:100%;
	text-size-adjust:100%;
}
body.active{
	overflow:hidden;
}

h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
	font-weight:normal;
	line-height:150%;
}

p{
	margin:0;
	padding:0;
	line-height:180%;
}
img{
	border:none 0;
	width:100%;
}

a{
	color:#666;
	text-decoration:none;
	-webkit-transition:ease-in-out 0.5s;
	-moz-transition:ease-in-out 0.5s;
	-ms-transition:ease-in-out 0.5s;
	-o-transition:ease-in-out 0.5s;
	transition:ease-in-out 0.5s;
}
a:hover{
	color:#666;
	text-decoration:none;
}

br.clearb,
.clear{
	clear:both;
}

@media (min-width: 568px) {
	br.spbr{
		display:none;
	}
}
@media (min-width: 768px) {
	br.tabletbr{
		display:none;
	}
}
@media (min-width: 1024px) {
	br.pcbr{
		display:none;
	}
}
br.br375-2,br.br414-2,br.br568-2,br.br667-2,br.br736-2,br.br768-2,br.br1024-2,br.br1080-2,br.br1180-2,br.br1300-2{
	display:none;
}
@media (min-width: 375px) {
	br.br375{
		display:none;
	}
	br.br375-2{
		display:inline;
	}
}
@media (min-width: 414px) {
	br.br414{
		display:none;
	}
	br.br414-2{
		display:inline;
	}
}
@media (min-width: 568px) {
	br.br568{
		display:none;
	}
	br.br568-2{
		display:inline;
	}
}
@media (min-width: 667px) {
	br.br667{
		display:none;
	}
	br.br667-2{
		display:inline;
	}
}
@media (min-width: 736px) {
	br.br736{
		display:none;
	}
	br.br736-2{
		display:inline;
	}
}
@media (min-width: 768px) {
	br.br768{
		display:none;
	}
	br.br768-2{
		display:inline;
	}
}
@media (min-width: 812px) {
	br.br812{
		display:none;
	}
}
@media (min-width: 1024px) {
	br.br1024{
		display:none;
	}
	br.br1024-2{
		display:inline;
	}
}
@media (min-width: 1080px) {
	br.br1080{
		display:none;
	}
	br.br1080-2{
		display:inline;
	}
}
@media (min-width: 1180px) {
	br.br1180{
		display:none;
	}
	br.br1180-2{
		display:inline;
	}
}
@media (min-width: 1300px) {
	br.br1300{
		display:none;
	}
	br.br1300-2{
		display:inline;
	}
}

ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
ul li{
	margin:0;
	padding:0;
}

ol,
ol li{
	margin:0;
	padding:0;
}

dl{
	margin:0;
	padding:0;
}
dt{
	margin:0;
	padding:0;
}
dd{
	margin:0;
	padding:0;
}

.pc{
	display:none;
}
@media (min-width: 768px) {
	.sp{
		display:none;
	}
	.pc{
		display:inline;
	}
}
.pc568, .pc667, .pc736, .pc768, .pc812, .pc1024{
	display:none;
}
@media (min-width: 568px) {
	.sp568{
		display:none;
	}
	.pc568{
		display:inline;
	}
}
@media (min-width: 667px) {
	.sp667{
		display:none;
	}
	.pc667{
		display:inline;
	}
}
@media (min-width: 736px) {
	.sp736{
		display:none;
	}
	.pc736{
		display:inline;
	}
}
@media (min-width: 768px) {
	.sp768{
		display:none;
	}
	.pc768{
		display:inline;
	}
}
@media (min-width: 812px) {
	.sp812{
		display:none;
	}
	.pc812{
		display:inline;
	}
}
@media (min-width: 1024px) {
	.sp1024{
		display:none;
	}
	.pc1024{
		display:inline;
	}
}

.back-black{
	background:#333;
	line-height:0;
	vertical-align:bottom;
	overflow:hidden;
}


/* ヘッダー*/
header{
	position:fixed;
	width:100%;
	height:60px;
	background:#697580;
	color:#FFF;
	box-shadow:0 0 10px rgba(255,255,255,0.3);
  	z-index:99;
	-webkit-transition:ease-in-out 0.5s;
	-moz-transition:ease-in-out 0.5s;
	-ms-transition:ease-in-out 0.5s;
	-o-transition:ease-in-out 0.5s;
	transition:ease-in-out 0.5s;
}
#header{
	font-size:0;
	padding:15px 15px 0;
}
@media (min-width: 568px) {
	#header{
		padding:15px 30px 0;
	}
}
@media (min-width: 768px) {
	#header{
		padding:15px 40px 0;
	}
}
@media (min-width: 1180px) {
	header{
		height:80px;
	}
	header.hide{
		-webkit-transform:translateY(-100%);
		-moz-transform:translateY(-100%);
		-ms-transform:translateY(-100%);
		-o-transform:translateY(-100%);
		transform:translateY(-100%);
	}
	#header{
		padding-top:25px;
	}
}
@media (min-width: 1300px) {
	#header{
		padding:24px 4% 0;
	}
}

/* ロゴ */
#logo h1 img{
	width:160px;
	height:auto;
}
@media (min-width: 1024px) {
	#logo{
		display:inline-block;
		vertical-align:top;
		width:200px;
	}
}
@media (min-width: 1300px) {
	#logo h1 img{
		width:170px;
	}
}

/* ナビゲーションラベル */ 
#gnavi-label{
	position:absolute;
	top:0;
	right:0;
	width:60px;
	height:60px;
	cursor:pointer;
}
#gnavi-label span{
	position:absolute;
	right:20px;
	width:20px;
	height:2px;
	background-color:#FFF;
	-webkit-transition:ease-in-out 0.3s;
	-moz-transition:ease-in-out 0.3s;
	-ms-transition:ease-in-out 0.3s;
	-o-transition:ease-in-out 0.3s;
	transition:ease-in-out 0.3s;
}
#gnavi-label span:nth-of-type(1){
	top:25px;
}
#gnavi-label span:nth-of-type(2){
	top:33px;
}
#gnavi-label.active span:nth-of-type(1) {
	top:29px;
	transform:rotate(45deg);
}
#gnavi-label.active span:nth-of-type(2) {
	top:29px;
	transform:rotate(-45deg);
}
@media (min-width: 568px) {
	#gnavi-label{
		right:10px;
	}
}
@media (min-width: 768px) {
	#gnavi-label{
		right:20px;
	}
}
@media (min-width: 1180px) {
	#gnavi-label{
		display:none;
	}
}

/* ナビゲーション */
#gnavi{
	position:fixed;
	top:60px;
	right:0;
  	z-index:99;
	width:100%;
	height:calc(100vh - 60px);
	background:#697580;
	border-top:1px solid rgba(255,255,255,0.2);
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration:0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.3, 0, 0.3, 1);
	-moz-transition-timing-function:cubic-bezier(0.3, 0, 0.3, 1);
	-ms-transition-timing-function:cubic-bezier(0.3, 0, 0.3, 1);
	-o-transition-timing-function:cubic-bezier(0.3, 0, 0.3, 1);
	transition-timing-function:cubic-bezier(0.3, 0, 0.3, 1);
	-webkit-transform:translate3d(100%, 0, 0);
	-moz-transform:translate3d(100%, 0, 0);
	-ms-transform:translate3d(100%, 0, 0);
	-o-transform:translate3d(100%, 0, 0);
	transform:translate3d(100%, 0, 0);
	-webkit-overflow-scrolling:touch;
	-moz-overflow-scrolling:touch;
	-ms-overflow-scrolling:touch;
	-o-overflow-scrolling:touch;
	overflow-scrolling:touch;
	overflow:scroll;
}
#gnavi.active{
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
#gnavi ul{
	font-size:0;
	padding:15px 15px 70px;
}
#gnavi ul li{
	font-family:'Nunito Sans';
	font-family:'Jost';
	font-weight:500;
	font-size:1.6rem;
	padding:10px 0;
}
#gnavi ul li.dead{
	color:rgba(255,255,255,0.5);
	padding:10px 0;
}
.jap{
	font-size:70%;
	font-weight:normal;
	font-family:'Verdana','BIZ UDゴシック','BIZ UDGothic','游ゴシック','YuGothic','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
#gnavi ul li a{
	color:#FFF;
	position:relative;
	display:inline-block;
}
#gnavi ul li a::after{
	content:'';
	position:absolute;
	bottom:-6px;
	left:0;
	width:100%;
	height:1px;
	-webkit-transform:scaleX(0);
	-moz-transform:scaleX(0);
	-ms-transform:scaleX(0);
	-o-transform:scaleX(0);
	transform:scaleX(0);
	background-color:#FFF;
	-webkit-transition:ease-in-out 0.3s;
	-moz-transition:ease-in-out 0.3s;
	-ms-transition:ease-in-out 0.3s;
	-o-transition:ease-in-out 0.3s;
	transition:ease-in-out 0.3s;
}
#gnavi ul li a:hover::after{
	-webkit-transform:scaleX(1);
	-moz-transform:scaleX(1);
	-o-transform:scaleX(1);
	-ms-transform:scaleX(1);
	transform:scaleX(1);
}
#home #gnavi ul li.home a::after,
#roots #gnavi ul li.roots a::after,
#services #gnavi ul li.services a::after,
#technology #gnavi ul li.technology a::after,
#lineup #gnavi ul li.lineup a::after,
#works #gnavi ul li.works a::after,
#voice #gnavi ul li.voice a::after,
#recruit #gnavi ul li.recruit a::after,
#aboutus #gnavi ul li.aboutus a::after,
#contact #gnavi ul li.contact a::after,
#privacy #gnavi ul li.privacy a::after{
	-webkit-transform:scaleX(1);
	-moz-transform:scaleX(1);
	-ms-transform:scaleX(1);
	-o-transform:scaleX(1);
	transform:scaleX(1);
}
@media (min-width: 768px) {
	#gnavi{
		width:500px;
	}
}
@media (min-width: 1180px) {
	#gnavi{
		position:static;
		top:auto;
		right:auto;
		width:calc(100% - 200px);
		height:auto;
		border-top:none;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		display:inline-block;
		vertical-align:top;
		overflow:hidden;
	}
	#gnavi ul{
		padding:6px 0;
		text-align:right;
	}
	#gnavi ul li{
		display:inline-block;
		font-size:1.3rem;
		padding:0;
		padding-left:20px;
		letter-spacing:0.05em;
	}
	#gnavi ul li.dead{
		padding:0;
		padding-left:20px;
	}
	#gnavi ul li a::after{
		bottom:-2px;
	}
	.jap{
		display:none;
	}
}
@media (min-width: 1300px) {
	#gnavi ul li{
		font-size:1.4rem;
		letter-spacing:0.1em;
	}
}

/* 背景 */
#cover{
	visibility:hidden;
	position:fixed;
	top:60px;
	left:0;
	width:100%;
	height:calc(100% - 60px);
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
	-o-transition:0.3s;
	-ms-transition:0.3s;
	transition:0.3s;
	opacity:0;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	background:url(../img_cmn/cover.png) repeat center;
	background-size:cover;
	z-index:-1000;
}
#cover.active{
	visibility:visible;
	opacity:1;
    filter:alpha(opacity=100);
    -moz-opacity:1;
	z-index:-1;
}
@media (min-width: 1180px) {
	#cover{
		display:none;
	}
}

/* コンテンツ */
#contents{
	padding:60px 0;
}
.content{
	padding-top:60px;
	margin:0 15px;
}
.content.bottom{
	padding-bottom:60px;
}
@media (min-width: 568px) {
	.content{
		margin:0 30px;
	}
}
@media (min-width: 768px) {
	#contents{
		padding-bottom:70px;
	}
	.content{
		padding-top:70px;
		margin:0 40px;
	}
	.content.bottom{
		padding-bottom:70px;
	}
}
@media (min-width: 1024px) {
	.content.narrow{
		margin:0 15%;
	}
}
@media (min-width: 1180px) {
	#contents{
		padding:80px 0;
	}
}
@media (min-width: 1300px) {
	.content{
		padding-top:80px;
		margin:0 4%;
	}
	.content.narrow{
		margin:0 20%;
	}
	.content.bottom{
		padding-bottom:80px;
	}
}

/* メインイメージ */
#main-image img{
	line-height:0;
	vertical-align:bottom;
}

/* タイトル */
#title{
	background:#697580;
	color:#FFF;
	text-align:center;
	padding:25px 0 20px;
}
#title h2{
	font-size:2.3rem;
	font-family:'Jost';
	font-weight:500;
	letter-spacing:0.2em;
}
#title h2.sub-title{
	font-size:1.3rem;
	font-weight:normal;
	padding-top:5px;
	font-family:'Times New Roman','BIZ UD明朝','BIZ UDMincho','游明朝','YuMincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','メイリオ','Meiryo','ＭＳ Ｐ明朝','MS PMincho',serif;
}
#title img{
	width:45px;
	height:auto;
	padding-top:15px;
}
@media (min-width: 768px) {
	#title h2{
		font-size:2.4rem;
	}
}
@media (min-width: 1024px) {
	#title h2{
		font-size:2.5rem;
	}
	#title h2.sub-title{
		font-size:1.4rem;
	}
}
@media (min-width: 1300px) {
	#title h2{
		font-size:2.6rem;
	}
	#title h2.sub-title{
		font-size:1.5rem;
	}
}

/* READ MORE */
.morebox{
	width:120px;
	border:1px #FFF solid;
	text-align:center;
	padding:13px 0 12px;
	margin:5px 0 10px;
	text-shadow:none;
	background:#FFF;
	overflow:hidden;
	position:relative;
	-webkit-transition:ease-in-out 0.5s;
    -moz-transition:ease-in-out 0.5s;
    -ms-transition:ease-in-out 0.5s;
    -o-transition:ease-in-out 0.5s;
    transition:ease-in-out 0.5s;
	z-index:2;
}
a .morebox .eff{
  	width:100%;
  	height:40px;
	top:-2px;
  	left:-100%;
  	background:#333;
  	position:absolute;
	-webkit-transition:ease-in-out 0.5s;
    -moz-transition:ease-in-out 0.5s;
    -ms-transition:ease-in-out 0.5s;
    -o-transition:ease-in-out 0.5s;
    transition:ease-in-out 0.5s;
  	z-index:0;
}
a:hover .morebox{
	border:1px #333 solid;
}
a:hover .morebox .eff{
	left:0;
}
.readmore{
	font-family:'Jost';
	font-weight:400;
	font-size:1.4rem;
	letter-spacing:0.05em;
}
a .readmore{
	color:#333;
	position:relative;
	-webkit-transition:ease-in-out 0.5s;
    -moz-transition:ease-in-out 0.5s;
    -ms-transition:ease-in-out 0.5s;
    -o-transition:ease-in-out 0.5s;
    transition:ease-in-out 0.5s;
	z-index:2;
}
a:hover .readmore{
	color:#FFF;
	z-index:2;
}
@media (min-width: 1024px) {
	.morebox{
		width:140px;
		padding:13px 0 13px;
	}
	.readmore{
		font-size:1.5rem;
	}
}

/* PARALLAX */
.parallax{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	height:50vh;
	background-attachment:fixed;
}
@media (min-width: 568px) {
	.parallax{
		height:90vh;
	}
}
@media (min-width: 768px) {
	.parallax{
		height:50vh;
	}
}
@media (min-width: 812px) {
	.parallax{
		height:90vh;
	}
}


/* フッター */
footer{
	background:#697580;
	color:#FFF;
	padding:30px 0 15px;
	font-family:'Verdana','BIZ UDゴシック','BIZ UDGothic','游ゴシック','YuGothic','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
#footer{
	font-size:0;
	margin:0 15px;
}
.footer{
	fot-size:0;
}
.footer h2 img{
	width:25px;
	height:auto;
}
.footer h2{
	font-size:1.5rem;
	padding-bottom:5px;
}
.footer p{
	font-size:1.3rem;
	line-height:160%;
}
.footer#foot-menu{
	display:none;
}
address{
	padding-top:15px;
	text-align:center;
	font-family:'ProximanovaLight';
	font-size:1.3rem;
	font-style:normal;
}
@media (min-width: 568px) {
	#footer{
		margin:0 30px;
	}
}
@media (min-width: 768px) {
	footer{
		padding:30px 0;
	}
	#footer{
		margin:0 40px;
		position:relative;
	}
	.footer{
		display:inline-block;
		vertical-align:bottom;
		width:55%;
	}
	.footer h2 img{
		position:absolute;
		top:0;
		right:0;
	}
	.footer#foot-menu{
		display:inline-block;
		width:45%;
	}
	.footer#company{
		text-align:right;
	}
	.foot-menu{
		display:inline-block;
		vertical-align:bottom;
		width:45%;
	}
	.foot-menu#japanese{
		width:55%;
	}
	.foot-menu ul li{
		font-family:'Jost','BIZ UDゴシック','BIZ UDGothic','游ゴシック','YuGothic','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
		font-weight:500;
		font-size:1.4rem;
		line-height:150%;
		padding-bottom:15px;
		letter-spacing:0.1em;
	}
	.foot-menu ul li.dead{
		color:rgba(255,255,255,0.5);
	}
	.foot-menu ul li:last-child{
		padding-bottom:0;
	}
	.foot-menu#japanese ul li{
		font-size:1.3rem;
		line-height:157%;
		padding-bottom:15px;
	}
	.foot-menu#japanese ul li:last-child{
		padding-bottom:0;
	}
	.foot-menu ul li a{
		display:inline-block;
		position:relative;
		color:#FFF;
	}
	.foot-menu ul li a::after{
		content:'';
		position:absolute;
		bottom:-3px;
		left:0;
		width:100%;
		height:1px;
		-webkit-transform:scaleX(0);
		-moz-transform:scaleX(0);
		-ms-transform:scaleX(0);
		-o-transform:scaleX(0);
		transform:scaleX(0);
		background-color:#FFF;
		-webkit-transition:ease-in-out 0.3s;
		-moz-transition:ease-in-out 0.3s;
		-ms-transition:ease-in-out 0.3s;
		-o-transition:ease-in-out 0.3s;
		transition:ease-in-out 0.3s;
	}
	.foot-menu ul li a:hover::after{
		-webkit-transform:scaleX(1);
		-moz-transform:scaleX(1);
		-ms-transform:scaleX(1);
		-o-transform:scaleX(1);
		transform:scaleX(1);
	}
	#home .foot-menu ul li.home a::after,
	#roots .foot-menu ul li.roots a::after,
	#services .foot-menu ul li.services a::after,
	#technology .foot-menu ul li.technology a::after,
	#lineup .foot-menu ul li.lineup a::after,
	#works .foot-menu ul li.works a::after,
	#voice .foot-menu ul li.voice a::after,
	#recruit .foot-menu ul li.recruit a::after,
	#aboutus .foot-menu ul li.aboutus a::after,
	#contact .foot-menu ul li.contact a::after,
	#privacy .foot-menu ul li.privacy a::after{
		-webkit-transform:scaleX(1);
		-moz-transform:scaleX(1);
		-ms-transform:scaleX(1);
		-o-transform:scaleX(1);
		transform:scaleX(1);
	}
	address{
		text-align:right;
		padding-top:25px;
		padding-bottom:2px;
	}
}
@media (min-width: 1024px) {
	.footer,
	.footer#foot-menu{
		width:50%;
	}
	.footer h2{
		font-size:1.6rem;
		padding-bottom:10px;
	}
	.foot-menu{
		width:35%;
	}
	.foot-menu#japanese{
		width:65%;
	}
	address{
		padding-top:30px;
	}
}
@media (min-width: 1180px) {
	.footer h2{
		font-size:1.7rem;
	}
	address{
		font-size:1.5rem;
	}
}
@media (min-width: 1300px) {
	#footer{
		margin:0 4%;
	}
}

.daihyo{
	display:none;
	padding-right:50px
}
@media (min-width: 568px) and (max-width: 767px) {
	br.br568-767{
		display:none;
	}
}
@media (min-width: 768px) {
	.space768{
		display:none;
	}
	.daihyo{
		display:inline;
	}
}