@charset "UTF-8";

/*****egao CAMPAIGN****************/

body {
    overflow-x: hidden;
    font-family:  "游ゴシック体", YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif !important; color:#666 ; font-size:14px ;
}
a{ outline: 0;  }
a img { transition: 0.4s ; }
a img:hover { opacity: 0.5 ; }
.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 0;
    margin-bottom: 0;
}
a:hover, a:focus, a:active, a.active { color:#999 !important;text-decoration: none; }
.row {
    margin-right: 0px;
    margin-left: 0px;
}
ol , ul { list-style: none;margin-left:-1rem; }


@media (min-width: 1200px){
	.container {width: 1000px;}
}
@media (min-width: 992px){
	.container {width: 1000px;}
}
/*****  CTA  ****************/
.btnBox {
    padding: 10px 0;
}

.btnBox a {
    display: block;
    width: 250px;
	margin:0 auto;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    line-height: 14px;
    outline: none;
	position: relative;
    z-index: 2;
    color: #fff;
	font-weight: bold;
	box-shadow:0px 0px 5px 0px #dbdbdb;
}

.btnBox a::before,
.btnBox a::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

.btnBox a,
.btnBox a::before,
.btnBox a::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btnBox a:hover {
    background-color: #fff;
    border-color: #FFF;
    color: #333 !important;
}

.btnBox a::before,
.btnBox a::after {
    top: 0;
    width: 50%;
    height: 100%;
}

.btnBox a::before {
    right: 0;
}

.btnBox a::after {
    left: 0;
}

a.inquiry { 
	background:#f39800;
}
a.request { 
	background:#1a3551;
}
a.trial { 
	background:#B60000;
}

a.demo { 
	width:600px;
	padding:20px 0;
	background:#cc3d1b;
	font-size:16px;
}
a.sensor { 
	width:150px;
	padding:10px 0;
	background:#333;
	font-size:12px;
}


.btnBox a.inquiry:hover::before,
.btnBox a.inquiry:hover::after {
    width: 0;
	background:#f39800;
}
.btnBox a.request:hover::before,
.btnBox a.request:hover::after {
    width: 0;
	background:#1a3551;
}
.btnBox a.trial:hover::before,
.btnBox a.trial:hover::after {
    width: 0;
	background:#B60000;
}

.btnBox a.demo:hover::before,
.btnBox a.demo:hover::after {
    width: 0;
	background:#cc3d1b;
}

.btnBox a.sensor:hover::before,
.btnBox a.sensor:hover::after {
    width: 0;
	background:#333;
}

.btnBlock { display:flex;justify-content: center;padding:40px 0 0; }
.btnBlock div  { margin:0 10px; }

.cvLead { text-align:center;margin:4rem 0 0;font-size:18px; }

/*****  start css  ****************/
/* main */
main { padding:80px 0 50px;position:relative;background:url(../images/bg_main.jpg) top center no-repeat fixed; }
main .wrap { min-height:800px;width:100%;background:url(../images/img_main.png) center center no-repeat; }
main .mainBg { z-index: 0;max-height: 700px; }
main .mainLogo { }
main h2 { padding:3rem 0;text-align:center;}
main h2 strong { font-size:5rem; }
main h3 { font-size:20px;padding:3rem 0; }
main .mainBox { max-width:525px;text-align: center; }

/* about */
.aboutBlock { padding:80px 0;background:url(../images/bg_about.png) top center repeat-x transparent; }
.aboutBlock h2 { font-size:20px;text-align: center; }
.aboutBlock h2 strong { font-weight: normal;font-size:54px;display:block;padding:0 0 20px;  }
.aboutBlock .leadBox { font-size:22px;padding:40px 0 80px;text-align:center; }
.aboutBlock .wrap { max-width:1500px;margin:0 auto; }
.aboutBlock .wrap .block { padding:100px 0 0;display: flex; }
.aboutBlock .wrap .block .imgBox { padding:100px 20px 0; }
.aboutBlock .wrap .block h3 em { display:block;font-style: normal;font-size:18px;padding:30px;line-height: 30px; }
.aboutBlock .btnBox { padding:100px 0 0; }

/* sensor */
.sensorBlock { background:#e8f0f7;padding:80px 0 100px; }
.sensorBlock .wrap { max-width:1500px;margin:0 auto; }
.sensorBlock h2 { text-align: center;font-size:46px;margin:0;padding:0; }
.sensorBlock .leadBox { font-size:22px;padding:40px 0;text-align:center; }
.sensorBlock .row { display:flex;justify-content: space-between; }
.sensorBlock .row .box { padding:20px 0 10px;margin:5px;background:#FFF;width: 100%; }
.sensorBlock .row .box h3 { font-size:12px;padding:0 5px 20px;border-bottom:1px solid #EEE;text-align: center; }
.sensorBlock .row .box h3 strong { display: block;font-size:16px;padding-top:10px; }
.sensorBlock .row .box h4 { font-size:12px;padding:0 20px 10px;text-align: center; }
.sensorBlock .row .box .img { padding:20px 0; }

.caseBlock { padding:0 0 100px; }
.caseBlock h2 { background:#004160;padding:40px 0;text-align: center;color:#FFF; }
.caseBlock .wrap { padding:0; }
.caseBlock .wrap .lead { padding:80px 0;text-align: center;font-size:28px; }

.clientBlock { padding:80px 0; }
.clientBlock h2 { text-align: center;font-size:40px; }
.clientBlock h3 { text-align: center;font-size:30px; }
.clientBlock .logoBox { display: flex;justify-content: space-between;align-items: center;padding:80px 0; }
.clientBlock .logoBox div { padding:10px;width:100%; }
.clientBlock ul { padding:40px;font-size:20px; }
.clientBlock ul li { display:block;padding:20px 0;border-bottom:1px dotted #EEE; }


.planBlock { padding:80px 0;border-top:1px solid #EEE; }
.planBlock h3 { font-size:40px;text-align:center; }
.planBlock h3:after { 
	content:"";
	display:block;
	width:150px;
	height:30px;
	border-bottom:2px solid #333;
	margin:0 auto;
}
.planBlock .wrp { 
	padding:60px 0 0;
	display:flex;
}
.planBlock .wrp .box { 
	margin:0;
	color:#FFF;
	padding:4rem 3rem;
}
.planBlock .wrp .box.planA { background:#24baef; }
.planBlock .wrp .box.planB { background:#0068b7; }
.planBlock .wrp .box h4 { text-align:center;font-size:24px;font-weight: bold;padding:0 0 2rem; }
.planBlock .trialBox { 
	margin:0;
	padding:4rem;
	background:#0a0467;
	color:#FFF;
	text-align:center;
}
.planBlock .trialBox h4 { text-align:center;font-size:24px;font-weight: bold;padding:0 0 2rem; }
.planBlock .trialBox .hBox { padding:2rem;background:#FFF;font-size:16px;color:#333; }
.planBlock .trialBox .hBox .title {  }
.planBlock .trialBox .hBox p { margin:0;font-size:16px; }
.planBlock .trialBox .plus { font-size:24px;padding:0.5rem 0; }
.planBlock .trialBox h2 { padding:2rem 0 0;font-size:24px; }

.movieBlock { background:#666;color:#FFF;padding:80px 0;text-align:center; }
.movieBlock h2 { padding:0 0 40px; }

	.movieBox {
		 position: relative;
		 padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
		 height: 0;
		margin:1rem 0;
		 overflow: hidden;
	}

	.movieBox iframe {
		 position: absolute;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
	}

/* QA accordiongs */
.qaBlock { padding:80px 0; }
.qaBlock h2 { text-align: center;font-size:30px;margin:0;padding:0 0 60px;font-weight: normal; }
.qaBlock h4 a { text-decoration: none;font-weight: normal; }
.qaBlock h4 a:hover { text-decoration: none; }
.qaBlock .panel-group .panel { 
	border-radius: 0;
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,.05);
    box-shadow: 0 0 0 rgba(0,0,0,.05);
}
.qaBlock .panel-default>.panel-heading { background:#FFF; }
.qaBlock .panel-default>.panel-heading+.panel-collapse>.panel-body { background:#EFEFEF; }
.qaBlock .panel-title {  }
.qaBlock .panel-title a { display:block;padding: 20px 10px;position: relative;font-weight: bold;color:#000; }
.qaBlock .panel-title a:hover { color:#000; }
.qaBlock .panel-title a span { display:block;position:absolute;right:0;top:21%;width:70px;padding:10px 0;text-align:center;color:#FFF;background:#CCC;font-size:12px; }
.qaBlock .panel-title a.collapsed { color:#666; }
.qaBlock .panel-title a.collapsed span { background:#333; }
.qaBlock .panel-title a span em { font-style: normal; }
.qaBlock .panel-body { padding:30px; }
.qaBlock .panel-group .panel+.panel { margin-top:-1px; }

/* footer */
footer {  }
footer .footNav { padding:50px 0;background:#2796cb;color:#FFF; }
footer .footNav .container { display:flex;align-items:flex-end;  }
footer .footNav .container .apLogo { margin-left:auto;  }

footer .footNav li { padding:0 0 5px 0; }
footer .footNav li a { color:#FFF;text-decoration: none; }
footer .footNav li a:hover { color:#FFF !important;text-decoration:underline; }
footer .copyright { padding:10px 0;text-align:center;font-size:12px; }


#forms { padding:2rem 0; }
#forms h2 { padding:4rem 0 0;text-align: center;font-size:20px; }

@media screen and (min-width:768px) { 
	.container{ width:1000px; }
	/* nav */
	nav.header { padding:0 4rem;position:fixed;width:100%;top:0;left:0;right:0;margin:auto;z-index:999;background:rgba(255,255,255,0.0);transition: .3s;  }
	nav.header .wrap { position:relative;padding:2rem; }
	nav.header .wrap ul { position:absolute;top:20%;right:10px;display:flex; }
	nav.header .wrap ul li { display:block;font-size:12px;padding:20px 5px; }
	nav.header .wrap ul li a { display:block;padding:10px 15px;text-decoration: none;width:150px; }
	nav.header .wrap ul li a:hover { }
	nav.header.is-animation { 
		padding:10px 0;
		background:rgba(255,255,255,0.9);
		box-shadow: 0px 3px 3px -3px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0px 3px 3px -3px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 3px 3px -3px rgba(0,0,0,0.3);
	}
	nav.header.is-animation .wrap { padding:0 2rem; }
	nav.header.is-animation .wrap ul li { display:block;font-size:12px;padding:0 5px; }
	nav.header.is-animation .container ul li { padding:0; }
}


@media screen and (max-width:767px) { 
	body { line-height:2.2rem;font-size:13px; }
	.container { padding:0 2.85rem; }
	nav.header { display:none; }
	
	#spMain { padding:2rem 2rem;background:url(../images/sp_bg.png) center left repeat-x; }
	#spMain .apLogo img { width:140px; }
	#spMain h1 { padding:3rem 2rem 3rem; }
	#spMain h2 { padding:1rem;font-size:15px;font-weigth:bold;text-align:center;line-height:24px;font-weight: bold;text-align:left; }
	#spMain .imgBox img { width:250px; }
	#spMain .btnBlock { display:flex; }
	#spMain .btnBlock .btnBox a { width:150px; }
	.aboutBlock { padding:3rem 0; }
	.aboutBlock h2 { font-size:14px; }
	.aboutBlock h2 strong {
		font-size: 28px;
		padding: 0 0 10px;
	}
	.aboutBlock .leadBox {
		font-size: 1.5rem;
		padding: 3rem 0;
		line-height: 2.5rem;
		text-align: left;
	}
	.aboutBlock .wrap { padding:1rem; }
	.aboutBlock .wrap .block { display:block;padding:2rem 0; }
	.aboutBlock .wrap .block h3 em { font-size:1.5rem; padding:15px;line-height: 2.5rem;}
	.aboutBlock .wrap .block .imgBox { padding:2rem 0; }
	.aboutBlock .btnBox { padding:0; }
	
	.sensorBlock { padding: 3rem 1.5rem ; }
	.sensorBlock h2 { font-size:20px; }
	.sensorBlock .leadBox { font-size:1.5rem;padding:3rem 0; }
	.sensorBlock .row { display:block; }
	.sensorBlock .row .box { margin:0 0 10px; }
	h4.modal-title { font-size:14px; }
	.modal-body { padding:0 10px; }
	.modal-body .leadBox { padding:1rem; }
	
	.caseBlock { padding: 0 0 3rem; }
	.caseBlock h2 { padding: 2rem 1rem;font-size:18px; }
	.caseBlock .wrap .lead { padding:2rem 0;text-align: left;font-size:1.5rem; }
	.caseBlock .imgBox { padding:0 1rem;font-weight: bold; }
	
	.clientBlock { padding:2rem 0; }
	.clientBlock h2 { font-size:20px;border-bottom:1px solid #CCC;border-top:1px solid #CCC;padding:2rem 0; }
	.clientBlock .logoBox { display:block;padding:2rem 0; }
	.clientBlock .logoBox div { margin-bottom:1rem; }
	.clientBlock  h3 { font-size:18px; }
	.clientBlock ul { padding:0;font-size:14px; }
	.clientBlock ul li { padding:10px 0; }

	.planBlock { padding:3rem 0; }
	.planBlock h3 { font-size:20px; }
	.planBlock h3:after { 
		content:"";
		display:block;
		width:50px;
		height:15px;
	}
	.planBlock .wrp { 
		padding:2rem 0 0;
		display:block;
	}
	.planBlock .wrp .box { 
		margin:0;
		color:#FFF;
		padding:2.5rem;
	}
	.planBlock .wrp .box h4 { text-align:center;font-size:18px;padding:0 0 1rem; }
	.planBlock .trialBox { 
		margin:0;
		padding:2.5rem;
	}
	.planBlock .trialBox h4 { font-size:18px;padding:0 0 1rem; }
	.planBlock .trialBox .hBox { padding:1rem;font-size:14px; }
	.planBlock .trialBox .hBox .title {  }
	.planBlock .trialBox h2 { padding:2rem 0 0;font-size:18px; }
	
	.movieBlock { padding:3rem 0; }
	.movieBlock h2 { font-size:20px; }
	.movieBlock .lead { font-size:14px;text-align:left; }
	
	.qaBlock { padding:3rem 0; } 
	.qaBlock .container { padding:0 1.5rem; } 
	.qaBlock h2 { font-size:20px;padding:0 0 3rem; }
	.qaBlock .panel-title a {
		padding: 5px 20px 5px 10px;
		font-size:13px;
		line-height:20px;
	}
	.qaBlock .panel-title a span em { display:none; }
	.qaBlock .panel-title a span {
			top: 40%;
			width: 13px;
			padding:2px;
			font-size: 8px;
			line-height: 10px;
		}
	.qaBlock .panel-heading { padding: 5px 10px; }
	.qaBlock .panel-body { padding: 15px; }
	
	a.demo {
    width: auto;
    padding: 20px 0;
    background: #cc3d1b;
    font-size: 16px;
}
	
	.btnBlock { display: block;padding:1rem; }
	
	.drawer-nav { padding:2rem;width:25.25rem;background-color:rgba(0,0,0,0.9); }
	.drawer-nav .logo img { width:100px; }
	.drawer-nav ul {  }
	.drawer-nav li { padding:0.5rem 1rem; }
	.drawer-nav li a { color:#FFF; }
	.drawer-hamburger { padding-right:1.75rem;z-index:999; }
	.drawer--right .drawer-nav { right:-25.25rem; }
	.drawer--right.drawer-open .drawer-hamburger { right:25.25rem; }
	
	footer {  }
	footer .footNav  { padding:2rem 0;text-align:center;  }
	footer .footNav .container { display:block;align-items:flex-end;  }
	footer .footNav .container .apLogo { padding:2rem 0 0;  }
	footer .footNav .container ul { padding:0;margin:0;  }
}