@charset "utf-8";



/* ===========================================================

	basic

=========================================================== */
html {
}
html.loading-delay {
}



body{
	font-family: "Noto Sans JP", serif, "Font Awesome 5 Free", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size:16px;
	background:#f3f3f3;
	position: relative;
}
main{
	overflow: hidden;

}


/* link */
a{
	color:#5482b7;
	text-decoration:none;
	transition: 0.3s all;
}
a:hover{
	color:#34a86d;
	text-decoration:underline;
}
.btn{
	transition:0.2s opacity;
}
.btn:hover{
	opacity:0.8;
}
p.linkarrow a:before{
	display: inline-block;
	content: "\f101";
	padding-right:0.25em;
	font-weight:900;
}



/* ===========================================================

	header

=========================================================== */
header{
	width:100%;
	background:rgba(255,255,255,1);
	position: fixed;
	top:0;
	z-index: 10;
	transition: 0.3s all;
}
header.scroll{
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
header > div{
	display: flex;
	width:1000px;
	margin:0 auto;
	align-items: center;
	position:relative;
}


/* h1
------------------------------------------------------------ */
header > div > a{
	display: inline-block;
	width:460px;
	transition: 0.3s all;
}
header > div > a:hover{
	text-decoration: none;
	opacity: 0.7;
}
header > div > a h1{
	color:#000;
	font-size:13px;
	text-decoration:none;
	overflow: hidden;
}
header > div a h1 img{
	display: block;
	width:450px;
	margin:5px 0;
	float:left;
}


/* nav
------------------------------------------------------------ */
header > div > p{
	display:none;
}
header div nav{
}
header div nav ul{
	margin:0;
	padding:0;
	list-style: none;
	overflow: hidden;
}
header div nav ul li{
	font-size:14px;
	float:left;
}
header div nav ul li:before{
	content: "｜";
	padding:0 5px;
	opacity: 0.5;
}
header div nav ul li:first-child{
	margin-left:24px;
}
header div nav ul li:first-child:before{
	content: normal;
}
header div nav ul li a{
	display: inline-block;
	margin:0;
	padding:16px 0 20px 0;
	color:#333;
	transition: 0.3s all;
}
header div nav ul li:hover a{
	color:#0185cf;
	text-decoration: none;
}





/* ===========================================================

	article

=========================================================== */
div.inquiryarea{
	width:1000px;
	margin:120px auto;
}
div.inquiryarea a{
	display: block;
	width:700px;
	height: 90px;
	margin:auto;
	padding:20px 20px 20px 10px;
	color:#fff;
	border-radius: 10px;
	background:#0185cf;
	position: relative;
	transition: 0.3s all;
}
div.inquiryarea a:before{
	content: "\f138";
	font-size:24px;
	font-weight:900;
	position: absolute;
	top:calc(50% - 14px);
	left:20px;
}
div.inquiryarea a:after{
	content:"";
	display: block;
	width:120px;
	height:80px;
	padding:10px;
	border-radius:10px;
	background:#fff url("../images/img_inquiry.png") no-repeat 50% 50% / cover;
	position: absolute;
	top:15px;
	right:15px;
}
div.inquiryarea a:hover{
	text-decoration: none;
	background:#34a86d;
}
div.inquiryarea a strong{
	display: block;
	padding:0 0 0 50px;
	font-size:32px;
	font-weight: normal;
}
div.inquiryarea a p{
	margin:1em 0 0 0;
	padding-left:50px;
	font-size:14px;
	line-height:1.5;
}





/* ===========================================================

	footer

=========================================================== */
footer{
	background: #e5e5e5;
}
footer > div{
	display: flex;
	width:1000px;
	margin:0 auto;
	align-items: center;
}
footer > div a{
	width:140px;
	margin:0;
	padding:0;
}
footer > div a img{
	width:100%;
}
footer > div ul{
	width:520px;
	margin:0;
	padding:0 20px 0 40px;
	font-size:14px;
	list-style:none;
}
footer > div ul li{
	display: inline-block;
	margin-right:20px;
}
footer > div ul li a{
	color:#666;
}
footer > div ul li a:hover{
	color:#0185cf;
	text-decoration: none;
}
footer > div ul li a:after{
	content: "\f2d2";
	padding-left:0.5em;
}
footer > div p{
	width:280px;
	margin:0;
	padding:0;
	font-size:10px;
}


/* pagetop
------------------------------------------------------------ */
#pagetop{
	display: block;
	padding:0;
	color:#0185cf;
	font-size:42px;
	line-height:1;
	position: fixed;
	right:20px;
	bottom:20px;
	z-index: 2;
	opacity: 0;
	transition: color 0.3s , opacity 0.3s;
}
#pagetop:hover{
	color:#34a86d;
}


/* extra
------------------------------------------------------------ */
/* AI検証バナー */
a.bnr_ailab{
	display: block;
	padding:20px 140px 20px 40px;
	color:#fff;
	line-height:1.5;
	background:linear-gradient(30deg, #5482b7, #34a86d);
	position: relative;
	transition:  0.3s all;
}
a.bnr_ailab:before{
	content: "\f138";
	font-size:18px;
	font-weight:bold;
	position: absolute;
	top:calc(50% - 16px);
	left:10px;
}
a.bnr_ailab:after{
	content: "";
	width:150px;
	height:100%;
	background:url("../images/img_pickup.png") no-repeat 50% 35% / contain;
	opacity: 0.5;
	position: absolute;
	top:0;
	right:0;
}
a.bnr_ailab:hover{
	text-decoration: none;
	opacity: 0.8;
}
a.bnr_ailab h3{
	margin-bottom:0.5em;
	font-size:24px;
	font-weight: bold;
}
a.bnr_ailab p{
	font-size:14px;
	margin:0;
}

/* DX_LABバナー */
a.bnr_dxlab{
	display: block;
	padding:20px 140px 20px 40px;
	color:#fff;
	line-height:1.5;
	background:linear-gradient(30deg, #2b7548, #22a7aa);
	position: relative;
	transition:  0.3s all;
}
a.bnr_dxlab:before{
	content: "\f138";
	font-size:18px;
	font-weight:bold;
	position: absolute;
	top:calc(50% - 16px);
	left:10px;
}
a.bnr_dxlab:after{
	content: "";
	width:60%;
	height:100%;
	background:url("../images/img_pickup_dxlab.png") no-repeat -50% 100% / cover;
	opacity: 0.5;
	position: absolute;
	top:0;
	right:0;
}
a.bnr_dxlab:hover{
	text-decoration: none;
	opacity: 0.8;
}
a.bnr_dxlab h3{
	margin-bottom:0.5em;
	font-size:24px;
	font-weight: bold;
}
a.bnr_dxlab p{
	font-size:14px;
	margin:0;
}





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



body{
	background:#fefefe;
}



/* ===========================================================

	header

=========================================================== */
header{
	width:100vw;
}
header.scroll{
}
header > div{
	display: flex;
	width:100vw;
	height:8vh;
	margin:0 auto;
	align-items: center;
	position:relative;
}
/* h1
------------------------------------------------------------ */
header > div > a{
	width:auto;
	padding:0;
}
header > div > a:hover{
	text-decoration: none;
	opacity: 0.7;
}
header > div > a h1{
	width:86vw;
	padding:0.25vh 2vw 0 2vw;
	font-size:2.5vw;
}
header > div a h1 img{
	width:100%;
}


/* nav
------------------------------------------------------------ */
header div:after{
	content: "\f0c9";
	display: block;
	margin:0;
	padding:0;
	color: #000;
	font-size:8vw;
	font-weight: 900;
	line-height:1;
	position: absolute;
	top:1.75vh;
	right:2vw;
}
header div.navopen:after{
	content: "\f00d";
}
header > div > p{
	display: block;
	width:1em;
	margin:0;
	padding:0;
	font-size:8vw;
	line-height:1;
	position: absolute;
	top:2vw;
	right:4vw;
	z-index: 150;
}
header div.navopen{
	position: relative;
}
header div nav{
	display: block;
	width:100vw;
	position: absolute;
	top:8vh;
	right:-100vw;
	transition:0.3s all;
}
header div nav ul{
	overflow: auto;
}
header div nav ul li{
	margin:0;
	border-bottom:1px rgba(255,255,255,0.4) solid;
	background:rgba(0,0,0,0.8);
	float:none;
}
header div nav ul li:before{
	content:normal;
}
header div nav ul li:first-child{
	margin:0;
}
header div nav ul li a{
	width:100vw;
	padding:8vw 0;
	color:#fff;
	font-size:4.5vw;
	text-align: center;
}
header div.navopen nav{
	right:0;
}



/* ===========================================================

	inquiryarea

=========================================================== */
div.inquiryarea{
	width:90vw;
	margin-bottom:70px;
}
div.inquiryarea a{
	display: block;
	width:auto;
	height: auto;
	margin:auto;
	padding:20px 20px 20px 10px;
}
div.inquiryarea a:before{
	font-size:5vw;
	top:calc(50% - 2.5vw);
	left:10px;
}
div.inquiryarea a:after{
	content:"";
	display: block;
	width:12vw;
	height:6vw;
	background:#fff url("../images/img_inquiry.png") no-repeat 50% 50% / cover;
	position: absolute;
	top:5px;
	right:5px;
}
div.inquiryarea a:hover{
}
div.inquiryarea a strong{
	padding:0 0 0 30px;
	font-size:5vw;
}
div.inquiryarea a p{
	padding-left:30px;
	font-size:3.25vw;
}



/* ===========================================================

	footer

=========================================================== */
#pagetop{
	font-size:8vw;
	right:10px;
	bottom:40px;
	z-index: 2;
	opacity: 0;
}

footer{
	background: #e5e5e5;
}
footer > div{
	display: block;
	width:100vw;
	margin:0 auto;
	padding:5vw 0;
}
footer > div > a{
	display: block;
	width:35vw;
	margin:0 auto;
}
footer > div > a img{
	width:35vw;
}
footer > div ul{
	width:auto;
	margin:0;
	padding:20px 40px 0 40px;
	font-size:4vw;
}
footer > div ul li{
	display: block;
	margin:0 0 1.5em 0;
	font-size:3vw;
}
footer > div ul li a{
	width:auto;
	color:#000;
}
footer > div p{
	width:100vw;
	margin:0;
	padding:3vw 0 0 0;
	font-size:3vw;
	text-align:center;
}



}






@media (orientation:landscape){
	header div nav > ul li ul li,
	header div nav > ul li :hover ul li{
		padding:0;
		float:left;
		box-sizing: border-box;
	}
}