@charset "utf-8";

/* ========== TOP ======================================== */

.inner {
	padding: 3.6em 0;
}
@media screen and (min-width: 751px) {
	.inner {
		padding: 4.5em 0;
	}
}



#header {
	opacity: 0;
	transition: 0.2s;
}
#header.show {
	opacity: 1;
}

#header a.logo{
	pointer-events: none;
}

main {
	padding-top: 0;
}

.sec .sec_ttl{
	margin-bottom: .9em;
	font-size: 3em;
	font-weight: 700;
	text-align: center;
}

.sec p{
	margin-bottom: 1.8em;
	text-align: center;
}

@media screen and (max-width: 750px) {
}
@media screen and (min-width: 751px) {
}




/* ========== KEY VISUAL ======================================== */

#main_visual{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

#main_visual .inner {
	max-width: none;
	height: 100%;
	padding: 1.8em 3.6em;
}

@media screen and (min-width: 751px) {
	#main_visual{
		height: 52vw;
		font-size: 1.333vw;
	}
	#main_visual .inner {
		padding: 4.5em;
	}
}

/* background back */
#main_visual{
	background: url("../img/kv_bg1.svg") 10% top no-repeat;
	background-size: cover;
}

/* background front / plant */
#main_visual::before, 
#main_visual::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	pointer-events: none;
}
#main_visual::before {
	z-index: 2;
	background: url("../img/kv_bg2.svg") 26% top no-repeat;
	background-size: cover;
}
#main_visual::after {
	z-index: 3;
	background: url("../img/kv_green.svg") 10% top no-repeat;
	background-size: cover;
}

@media screen and (min-width: 751px) {
	#main_visual,
	#main_visual::before,
	#main_visual::after {
		background-position: center top;
	}
}

/* flying object */
#main_visual .inner::before,
#main_visual .inner::after {
	content: "";
	display: block;
	width: 200%;
	height: 5em;
	position: absolute;
	top: 11em;
	z-index: 1;
}
#main_visual .inner::before {
	right: 0;
	background: url("../img/kv_light.svg") center center repeat-x;
	background-size: 300%;
	animation: light_right 160s linear infinite;
}
#main_visual .inner::after{
	left: 0;
	background: url("../img/kv_light.svg") bottom center repeat-x;
	background-size: 300%;
	animation: light_left 140s linear infinite;
}

@media screen and (min-width: 751px) {
	#main_visual .inner::before,
	#main_visual .inner::after {
		width: 300%;
		height: 3.7em;
		top: 11em;
	}
	#main_visual .inner::before,
	#main_visual .inner::after{
		background-size: calc(100% / 3);
	}
}

/* robot */
#main_visual .robo {
	position: absolute;
	bottom: 35%;
	left: 0;
	z-index: 3;
	width: 27vh;
	height: 27vh;
	background: url("../img/kv_robo.svg") left bottom no-repeat;
	background-size: contain;
	pointer-events: none;
	animation: robo_anime 4s infinite reverse;
}
@media screen and (min-width: 751px) {
	#main_visual .robo {
		bottom: 19em;
		left: auto;
		right: 14.2em;
		width: 12.5em;
		height: 12.5em;
	}
}

/* human */
#main_visual .human {
	position: absolute;
	bottom: 20%;
	right: 0;
	z-index: 3;
	width: 35vh;
	height: 35vh;
	background: url("../img/kv_human.svg") center bottom no-repeat;
	background-size: contain;
	pointer-events: none;
	animation: human_anime 3s infinite;
}

/* human shadow */
#main_visual .human::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -3em;
	left: 1em;
	z-index: -1;
	width: 20.8em;
	height: 7em;
	background: url("../img/kv_human_shadow.svg") center bottom no-repeat;
	background-size: contain;
	animation: human_shadow 3s infinite;
}

@media screen and (min-width: 751px) {
	#main_visual .human {
		bottom: 11em;
		right: 6.5em;
		width: 16em;
		height: 16em;
	}
}

/* message */
#main_visual .msg {
	position: relative;
	z-index: 4;
	margin-top: 9vh;
	font-family: 'Oswald', sans-serif;
	/*font-size: 5.1em;*/
	font-size: 3.78em;
	line-height: 1.08;
	transform: scaleX(0.94);
	transform-origin: left;
}

/* button */
#main_visual .btn {
	position: absolute;
	left: calc(50% - 6.75em);
	bottom: 8em;
	z-index: 4;
	margin: 0;
	font-size: 1.2em;
}
#main_visual .btn::before {
	z-index: 5;
}

@media screen and (min-width: 751px) {
	#main_visual .msg {
		margin-top: 2em;
		font-size: 5em;
		line-height: 1.06;
	}

	#main_visual .btn {
		bottom: 4.5em;
	}
}

/* animation */
@keyframes light_left{
	0%	{
		left: 0;
	}
	100%{
		left: -200%;
	}
}
@keyframes light_right{
	0%	{
		right: 0;
	}
	100%{
		right: -200%;
	}
}
@keyframes robo_anime{
	0%,
	2%,
	12%,
	100% {
		opacity: 0.8;
	}
	1%	{
		opacity: 0.3;
	}
	10%	{
		opacity: 0.6;
	}
}
@keyframes human_anime{
	0%,
	100% {
		transform: translate(0,0);
	}
	50%	{
		transform: translate(1em,1em);
	}
}
@keyframes human_shadow{
	0%,
	100% {
		transform: translate(0.01em,0.01em);
		opacity: 0.7;
	}
	50%	{
		transform: translate(-1em,-1em);
		opacity: 1;
	}
}



/* ========== ABOUT ======================================== */

#about {
	position: relative;
}

#about .inner {
}

#about p {
	margin: 9em 0 1.8em;
	font-size: 1.2em;
}

@media screen and (min-width: 751px) {
	#about {
		min-height: 45em;
	}

	#about .inner {
		padding: 6em 0;
	}

	#about p {
		margin: 4em 0 ;
	}
}

/* hands */
#about::before,
#about::after {
	content: "";
	width: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: -1;
	display: none;
}
#about::before{
	right: 0;
	background: url("../img/about_img_human_hand.png") left 25% no-repeat;
	background-size: 150%;
}
#about::after{
	left: 0;
	background: url("../img/about_img_robot_hand.png") right 35% no-repeat;
	background-size: 155%;
}

/* with anime */
#about.anime::before,
#about.anime::after{
	display: block;
}
#about.anime::before{
	animation: hand1 1s ease-out;
}
#about.anime::after{
	animation: hand2 1s ease-out;
}

@media screen and (min-width: 751px) {
	#about::before{
		right: -13%;
		background-position: left top;
		background-size: 100%;
	}
	#about::after{
		left: -13%;
		background-position: right bottom;
		background-size: 105%;
	}
}

/* animation  */
@keyframes hand1{
	0% {
		opacity: 0;
		transform: translate(80%,0);
	}
	10% {
		opacity: 1;
	}
	100%	{
		transform: translate(0,0)
	}
}
@keyframes hand2{
	0% {
		opacity: 0;
		transform: translate(-80%,0);
	}
	10% {
		opacity: 1;
	}
	100%	{
		transform: translate(0,0)
	}
}


/* ========== PRODUCTS ======================================== */

#products {
	background: rgba(170,195,215,0.1);
	overflow: hidden;
}

#products svg{
	display: block;
}

#path1{
	animation: amoeva1 8s linear infinite;
}
#path2 {
	animation: amoeva2 10s linear infinite;
}
#path3 {
	animation: amoeva3 10s linear infinite;
}

@keyframes amoeva1{
	0%,
	100% {
		transform: scale(1,1) rotate(0deg) translate(0,0);
		transform-origin: 10em 10em;
	}
	50%	{
		transform: scale(0.94,0.94) rotate(9deg);
	}
}

@keyframes amoeva2{
	0%,
	100% {
		transform: scale(1,1) rotate(0deg) translate(0,0);
		transform-origin: 10em 10em;
	}
	50%	{
		transform: scale(0.94,1.06) rotate(-9deg);
	}
}

@keyframes amoeva3{
	0%,
	100% {
		transform: scale(1,1) rotate(0deg) translate(0,0);
		transform-origin: 10em 10em;
	}
	50%	{
		transform: scale(0.9,0.9) rotate(5deg);
	}
}

/* text */
.product .txt{}

.product .ttl{
	margin-bottom: .9em;
	font-size: 1.8em;
	text-align: center;
}

.product p{
	max-width: 30em;
	margin: 0 auto 1.8em;
}
.product p.catch{
	margin-bottom: .9em;
	font-size: 1.8em;
	font-weight: 700;
	line-height: 1.4;
}

/* image */
.product .img {
	padding: 1.8em;
	margin-bottom: 1.8em;
	pointer-events: none;
}
.product .img svg{
	width: 100%;
	height: 15em;
	overflow: visible;
}
.product .img image{
	width: 100%;
	height: 41em;
}

.product .img .bg1,
.product .img .bg2,
.product .img .bg3{
	opacity: 0.4;
}
.product .bg1,
.product .bg3{
	fill: #c8e1ee;
}
.product .bg2{
	fill: #bed6e2;
}


.product.test .img image{
	height: 44em;
}
.product.monitoring .img image{
	height: 37em;
}


@media screen and (max-width: 750px) {
}
@media screen and (min-width: 751px) {
	#products .sec_ttl {
		margin-bottom: 0;
	}
 
	.product {
		display: flex;
		align-items: center;
	}
	
	/* text */
	.product .txt {
		width: 47%;
	}
	.product .ttl{
		font-size: 2em;
	}

	/* iamge */
	.product .img {
		width: 53%;
		margin-bottom: 0;
	}
	.product .img svg{
		height: 32em;
	}
	.product .img image{
		height: 32em;
	}

	
	.product.cms,
	.product.monitoring{
		flex-direction: row-reverse;
	}
	
	.product.test .img image{
		height: 34em;
	}
	.product.monitoring .img image{
		height: 30em;
	}

}




/* ========== COMPANY ======================================== */

#company {
	position: relative;
	overflow: hidden;
}
#company::before {
	content: "";
	display: block;
	width: 140vh;
	height: 140vh;
	position: absolute;
	top: calc(50% - 70vh);
	left: calc(50% - 70vh);
	z-index: -1;
	background: repeating-conic-gradient(transparent,transparent 8deg,#fafafa 8deg 12deg);
	pointer-events: none;
	animation: radial 30s linear infinite;
}
@keyframes radial{
	0%	{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}

#company .sec_ttl::after {
	content: "";
	display: block;
	width: 100%;
	height: 4.5em;
	margin-top: .9em;
	background: url("../img/company_img.png") center bottom no-repeat;
	background-size: contain;
	pointer-events: none;
}

#company .catch{
	font-size: 1.1em;
}

#company .address{
	color: #999;
}

@media screen and (max-width: 750px) {
}
@media screen and (min-width: 751px) {
	#company::before {
		width: 140%;
		height: 140vw;
		top: calc(50% - 70vw);
		left: calc(50% - 70vw);
	}

	#company .sec_ttl::after {
		height: 6.6em;
	}
}