@charset 'utf-8';

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSansCJKjp-Regular.otf') format('opentype');
    font-weight: normal;
  	font-style: normal;
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('fonts/Roboto-Black.ttf') format('truetype'), url('fonts/Roboto-Black.woff') format('woff');
    font-weight: normal;
  	font-style: normal;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('fonts/Roboto-Bold.ttf') format('truetype'), url('fonts/Roboto-Bold.woff') format('woff');
    font-weight: normal;
  	font-style: normal;
}

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: 'Meiryo', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #545455;
}

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a:link { text-decoration: none; color: #000; }
a:visited { text-decoration: none; color: #000; }
a:hover { text-decoration: underline; }

.NotoSans { font-family: 'Noto Sans'; }
.RBlack { font-family: 'Roboto-Black'; }
.RBold { font-family: 'Roboto-Bold'; }

.pc { display: block !important; }
.sp { display: none !important; }

/* clearfix
------------------------------------------------ */
.clearfix {
	clear: both;
	*zoom: 1;
}
.clearfix:before,.clearfix:after {
	content: ' ';
	display: table;
}
.clearfix:after { clear: both; }

/* container
------------------------------------------------ */
#container {
	position: relative;
}
	.wrap { 
		max-width: 1110px; 
		margin: 0 auto; 
		position: relative; 
	}

/* header
------------------------------------------------ */
#header {
	width: 100%;
	height: 60px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 1px solid #707070;
	background: #fff;
	z-index: 999;
	position: relative;
}

	#logo { 
		position: absolute;
		width: 125px;
		line-height: 1.2;
		top: 15px;
		left: 0;
	}
		#logo a { display: block; }

	#header .info {
		position: relative;
		float: right;
		max-width: 484px;
	}
		#header .links,
		#header .links li {
		    display: inline-block;
		    vertical-align: middle;
		}

		#header .links li { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.074em; line-height: 60px; }
		#header .links li:not(:last-child) { margin-right: 58px; }
		#header .links li a { color: #545455; display: block; text-decoration: none; }
		#header .links li a:hover { color: #E83828; }

		#head_menu {
		    display: none;
		    position: absolute;
		    top: 40px;
		    left: 0;
		    width: 100%;
		    background: #fff;
		}
			#head_menu .frame {
			    /*height: -webkit-calc(100vh - 40px);
			    height: calc(100vh - 40px);
			    -webkit-overflow-scrolling: touch;
			    overflow: auto;*/
			}
				#gnav ul li { border-bottom: solid #707070 1px; font-size: 12px; font-size: 1.2rem; line-height: 1.2; }
				#gnav ul li a { color: #E83828; display: block; text-decoration: none; padding: 19px 20px 17px; }
				#gnav ul li a:after { content: ''; display: inline-block; margin-left: 10px; width: 7px; height: 7px; border-right: 1px solid #545455; border-bottom: 1px solid #545455; transform: rotate(-45deg); }

#header .fixed { position: fixed; top: 0; left: 0; }

.fix_header #header { position: fixed; top: 0; left: 0; }

/* main
------------------------------------------------ */
#main {
	display: block;
	position: relative;
	width: 100%;
}
	/* service */
	#service { padding: 53px 0 75px; }
	#service .wrap { max-width: 990px; }
	.service--block { text-align: center; }
	.service--block dt { background: #545455; color: #fff; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.074em; line-height: 36px; margin-bottom: 32px; }
	.service__lists {  }
	.service__lists li { position: relative; background: #fff; width: 30.3%; float: left; border: 2px solid #000; padding: 40px 0 35px; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.service__lists li:not(:last-child) { margin-right: 4.55%; }
	.service__lists li:not(:last-child):after { content: ''; position: absolute; right: -11%; top: 50%; margin-top: -10px; display: inline-block; width: 12px; height: 20px; background: url(../img/share/arrow_service.svg); background-size: 100%; }
	.service__lists .service__lists--reserch { border-color: #4CC7D8; }
	.service__lists .service__lists--product { border-color: #ED716F; }
	.service__lists .service__lists--develop { border-color: #92DA65; }
	.service__lists--pic { width: 40%; margin: 0 auto; }
	.service__lists--desc { margin-top: 12px; }
	.service__lists--titleEn { font-size: 24px; font-size: 2.4rem; line-height: 1.4; }
	.service__lists--titleJp { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.074em; }
	.service__lists--cmn { font-size: 14px; font-size: 1.4rem; letter-spacing: 0.074em; margin-top: 15px; }

	#pageVisual {
		padding: 80px 0;
		background: #eee;
	}
		.pageVisual--title { color: #fff; max-width: 640px; height: 230px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid #fff; }
		.pageVisual--title .en { font-size: 60px; font-size: 6rem; line-height: 1.3; }
		.pageVisual--title .jp { font-size: 24px; font-size: 2.4rem; font-weight: bold; }

	.btn--more { font-family: 'Noto Sans'; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.074em; width: 260px; height: 60px; line-height: 60px; margin: 0 auto; text-align: center; }
	.btn--more a { position: relative; background: #fff; color: #545455; display: block; text-decoration: none; }
	.btn--more a:after { content: ''; display: inline-block; position: absolute; right: 27px; top: 50%; margin-top: -6px; width: 8px; height: 12px; background: url(../img/share/arrow_link.svg); background-size: 100%; }

/* footer
------------------------------------------------ */
#footer {
	background: #545455;
	padding: 40px 0 10px;
	text-align: center;
	color: #fff;
}
	#footer .foot--links,
	#footer .foot--links li { display: inline-block; vertical-align: middle; }
	#footer .foot--links { margin-top: -15px; }
	#footer .foot--links li { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.075em; margin: 15px 25px 0; }
	#footer .foot--links li a { text-decoration: none; color: #fff; }

	#copyright { margin-top: 28px; }
	#copyright small { display: inline-block; font-size: 14px; font-size: 1.4rem; }


/* responsive style
------------------------------------------------ */
@media screen and (max-width: 1150px) {
	.wrap { padding: 0 20px; }
	#logo { left: 20px; }
}

@media screen and (max-width: 1030px) {
	/* service */
	.service__lists--titleEn { font-size: 1.94174757vw; }
	.service__lists--titleJp { font-size: 1.55339806vw; }
	.service__lists--cmn { font-size: 1.3592233vw; }
}

@media screen and (max-width: 800px) {
	#header .links li { font-size: 14px; font-size: 1.4rem; }
	#header .links li:not(:last-child) { margin-right: 35px; }
}

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

	.pc { display: none !important; }
	.sp { display: block !important; }

	/* service */
	#service { padding: 23px 0 32px; }
	.service--block {  }
	.service--block dt { font-size: 11px; font-size: 1.1rem; letter-spacing: 0.034rem; line-height: 30px; margin-bottom: 0; }
	.service__lists { padding: 24px 0 75px; background: url(../img/share/bg_service.png) no-repeat top center; background-size: 120px 100%; }
	.service__lists li { width: 236px; margin: 0 auto; float: none; border-width: 1px; padding: 32px 0 30px; }
	.service__lists li:not(:last-child) { margin: 0 auto 38px; }
	.service__lists li:not(:last-child):after { display: none; }
	.service__lists--pic { width: 95px; }
	.service__lists--desc { margin-top: 5px; }
	.service__lists--titleEn { font-size: 20px; font-size: 2rem; }
	.service__lists--titleJp { font-size: 12px; font-size: 1.2rem; }
	.service__lists--cmn { font-size: 10px; font-size: 1rem; margin-top: 12px; }

	#pageVisual { padding: 40px 0; background-size: cover; }
	.pageVisual--title { max-width: 280px; height: 115px; border-width: 1px; }
	.pageVisual--title .en { font-size: 26px; font-size: 2.6rem; line-height: 1.3; margin-bottom: 8px; width: 100%;
    text-align: center; }
	.pageVisual--title .jp { font-size: 12px; font-size: 1.2rem; }

	.btn--more { font-size: 12px; font-size: 1.2rem; letter-spacing: 0.037em; width: 236px; height: 50px; line-height: 50px; }
	.btn--more a:after { right: 24px; margin-top: -5px; width: 6px; height: 9.5px; }

	/* header */
	#main {}
	#header { height: 40px; }
	#logo { width: 100px;top: 8px; left: 20px; line-height: 0; }
	#header .info { margin-top: 12px; }
	#header .links { display: none; }
	#header .menu { display: inline-block !important; width: 23px; vertical-align: middle; }
	#header .menu a { width: 100%; height: 100%; }
	#header .menu span { display: block; position: relative; width: 100%; height: 16px; border-top: solid #000 2px; text-indent: 100%; white-space: nowrap; overflow: hidden; }
	#header .menu span:before,
	#header .menu span:after { content: ' '; position: absolute; left: 0; width: 100%; height: 2px; background: #000; -webkit-transition: all .3s; transition: all .3s; }
	#header .menu span:before { top: 6px; }
	#header .menu span:after { bottom: 0; }

	/* footer */
	#footer { padding: 20px 0 8px; }
	#footer .foot--links { margin-top: -21px; }
	#footer .foot--links li { font-size: 12px; font-size: 1.2rem; margin: 21px 15px 0; }

	#copyright { margin-top: 25px; }
	#copyright small { font-size: 9px; font-size: .9rem; }
}