@charset "utf-8";
/*.design-bg{ width: 1400px; height: 4580px; background: url('../design_img/top.png') 0 0 no-repeat; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: -1; opacity: .5; background-size: 1400px; }*/


@media print, screen and (min-width: 751px) {
#main .mv 				{ height: 740px; position: relative; overflow: hidden; /*background: url('../img/top/mv.jpg') 50% 50% no-repeat; background-size: cover;*/ }
#main .mv video 		{ position: absolute; width: 100%; height: auto; min-width: 1920px; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: -5; }
#main .mv .textBox 		{ padding: 0 0; position: absolute; top: 54%; left: 13.5%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); color: #fff; }
#main .mv .textBox p 	{ margin-top: 20px; font-size: 1.66rem; font-weight: bold; color: #22be97; }

#about 					{ min-height: 725px; margin-top: 75px; position: relative; overflow: hidden; }
#about .master 			{ max-width: 1150px; margin-top: 60px; position: absolute; top: 30px; left: 55.5%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#about video 			{ position: absolute; width: 100%; height: auto; min-width: 1200px; left: 50%; bottom: -20%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); z-index: -5; }
#about .box 			{ display: -webkit-box; display: -ms-flexbox; display: flex; }
#about .box>div:nth-of-type(1){ width: 36.348%; }
#about .box>div:nth-of-type(1) h3{ margin-bottom: 17px; font-size: 1.6rem; color: #22be97; line-height: 1.4; }
#about .box>div:nth-of-type(1) p{ line-height: 2.1; }
#about .box>div:nth-of-type(1) ul{ margin-top: 22px; }
#about .box>div:nth-of-type(1) ul li{ border-bottom: 1px solid #ccc; }
#about .box>div:nth-of-type(1) ul li a{ padding: 23px 0; display: block; position: relative; left: 0; -webkit-transition: .3s; transition: .3s; font-weight: bold; }
#about .box>div:nth-of-type(1) ul li a:hover{ left: 10px; }
#about .box>div:nth-of-type(1) ul li a:after{ content: ''; width: 7px; height: 13px; background: url('../img/top/arrow-g.svg') 0 0 no-repeat; background-size: 7px; display: block; position: absolute; top: 50%; right: 18px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
#about .box>div:nth-of-type(1) ul li a:hover{ opacity: 1; }
#about .box>div:nth-of-type(1) .btnG{ margin-top: 50px; }
#about .box>div:nth-of-type(2){ width: 56.957%; margin-left: auto; position: relative; }
#about .box>div:nth-of-type(2)>div{ width: 42.596%; position: absolute; top: 8%; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#about .box>div:nth-of-type(2)>div .illust{ position: absolute; top: 0; left: 0; }
#about .box>div:nth-of-type(2)>div img:nth-of-type(2){ z-index: 5; }

#business 				{ padding-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); color: #fff; }
#business .image 		{ width: 50%; position: absolute; top: 0;left: 0; }
#business .box 			{ width: 41.8%; margin-left: auto; padding-top: 74px; }
#business .box h2 		{ text-align: left; }
#business .box h3 		{ margin-top: 63px; margin-bottom: 17px; font-size: 1.6rem; line-height: 1.4; white-space: nowrap; }
#business .box p 		{ line-height: 2.1; }
#business .box ul 		{ margin-top: 22px; }
#business .box ul li 	{ border-bottom: 1px solid #ccc; }
#business .box ul li a 	{ padding: 23px 0; display: block; position: relative; left: 0; -webkit-transition: .3s; transition: .3s; font-weight: bold; }
#business .box ul li a:hover{ left: 10px; }
#business .box ul li a:after{ content: ''; width: 7px; height: 13px; background: url('../img/top/arrow-w.svg') 0 0 no-repeat; background-size: 7px; display: block; position: absolute; top: 50%; right: 18px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
#business .box ul li a:hover{ opacity: 1; }
#business .box .btnW 	{ margin-top: 53px; }

#company 				{ padding: 75px 0 207px; position: relative; }
#company:after 			{ content: ''; width: 44.2%; height: 360px; display: block; background: rgb(34,200,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,200,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,200,151,1) 0%, rgba(34,208,151,1) 100%); position: absolute; top: 0; right: 0; z-index: -3; }
#company .box 			{  }
#company .master .box{ width: 41.8%; }
#company .master .box h2{ text-align: left }
#company .master .box h3{ margin-top: 60px; margin-bottom: 17px; font-size: 1.6rem; color: #22be97; line-height: 1.4; }
#company .master .box p{ line-height: 2.1; }
#company .master .box ul{ margin-top: 22px; }
#company .master .box ul li{ border-bottom: 1px solid #ccc; }
#company .master .box ul li a{ padding: 23px 0; display: block; position: relative; left: 0; -webkit-transition: .3s; transition: .3s; font-weight: bold; }
#company .master .box ul li a:hover{ left: 10px; }
#company .master .box ul li a:after{ content: ''; width: 7px; height: 13px; background: url('../img/top/arrow-g.svg') 0 0 no-repeat; background-size: 7px; display: block; position: absolute; top: 50%; right: 18px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
#company .master .box ul li a:hover{ opacity: 1; }
#company .master .box .btnG{ margin-top: 50px; }
#company .image 		{ width: 50%; position: absolute; top: 0; right: 0; }
#company .image div 	{ position: relative; top: 160px; }
#company .image div img:nth-of-type(1){ width: 100%; position: absolute; top: -300px; left: 0; z-index: -2; }
#company .image div img:nth-of-type(2){ width: 51.716%; position: absolute; top: 650px; left: -40px; z-index: -1; }

#recruit 				{ padding: 74px 0 166px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; background: url('../img/top/recruit-bg.jpg') 50% 50% no-repeat; background-size: cover; background-attachment: fixed; color: #fff; }
#recruit .image 		{ width: 50%; position: absolute; top: 170px; left: 0; }
#recruit .box 			{ width: 41.8%; margin-left: auto; padding-top: 65px; }
#recruit .box h3 		{ margin-bottom: 17px; font-size: 1.6rem; line-height: 1.4; white-space: nowrap; }
#recruit .box p 		{ line-height: 2.1; }
#recruit .box .btnG 	{ margin-top: 43px; }
}


@media print, screen and (min-width: 1750px) {
#business 				{ padding-bottom: 150px; }
}


@media print, screen and (min-width: 1650px) {
#recruit 				{ padding: 74px 0 250px; }
}


@media screen and (max-width: 1200px) {
#about .box>div:nth-of-type(2)>div{ top: 5%; }
}


@media screen and (max-width: 900px) {
#about .box>div:nth-of-type(2)>div{ top: 3.5%; }
}

@media screen and (max-width: 1150px) {
	#about .master 			{ left: 50%; }
}


@media screen and (max-width: 1140px) and (min-width: 415px) {
#business .box h3 		{ white-space: normal; }
#recruit .box h3 		{ white-space: normal; }
}


@media screen and (max-width: 750px) {
#main .mv 				{ height: 100vh; position: relative; overflow: hidden; /*background: url('../img/top/mv.jpg') 50% 50% no-repeat; background-size: cover;*/ }
#main .mv video 		{ position: absolute; width: 100%; height: auto; min-width: 1600px; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: -5; }
#main .mv .textBox{ width: 90%; padding: 0 0; position: absolute; top: 50%; left: 5%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); color: #fff; }
#main .mv .textBox p 	{ margin-top: 10px; font-size: 1rem; font-weight: bold; color: #22be97; }

#about 					{ margin-top: 75px; padding-bottom: 75px; position: relative; overflow: hidden; }
#about .master 			{  }
#about video 			{ position: absolute; width: 100%; height: auto; min-width: 750px; left: 50%; bottom: -7%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); z-index: -5; }
#about .box 			{  }
#about .box>div:nth-of-type(1){ margin-top: 40px; }
#about .box>div:nth-of-type(1) h3{ margin-bottom: 17px; font-size: 1.1rem; color: #22be97; line-height: 1.4; }
#about .box>div:nth-of-type(1) p{ line-height: 1.7; }
#about .box>div:nth-of-type(1) ul{ margin-top: 22px; }
#about .box>div:nth-of-type(1) ul li{ border-bottom: 1px solid #ccc; }
#about .box>div:nth-of-type(1) ul li a{ padding: 23px 0; display: block; position: relative; left: 0; -webkit-transition: .3s; transition: .3s; font-weight: bold; }
#about .box>div:nth-of-type(1) ul li a:hover{ left: 10px; }
#about .box>div:nth-of-type(1) ul li a:after{ content: ''; width: 7px; height: 13px; background: url('../img/top/arrow-g.svg') 0 0 no-repeat; background-size: 7px; display: block; position: absolute; top: 50%; right: 18px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
#about .box>div:nth-of-type(1) ul li a:hover{ opacity: 1; }
#about .box>div:nth-of-type(2){ margin-top: 50px; position: relative; }
#about .box>div:nth-of-type(2)>div{ width: 42.596%; position: absolute; top: 10%; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#about .box>div:nth-of-type(2)>div .illust{ position: absolute; top: 0; left: 0; }
#about .box>div:nth-of-type(2)>div img:nth-of-type(2){ z-index: 5; }
#about .btnG 				{ margin: 50px auto 0; }

#business 				{ padding: 75px 0; position: relative; background: rgb(34,190,151); background: -webkit-gradient(linear, left top, right top, from(rgba(34,190,151,1)), to(rgba(34,208,151,1))); background: linear-gradient(90deg, rgba(34,190,151,1) 0%, rgba(34,208,151,1) 100%); color: #fff; }
#business .master 		{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
#business .image 		{ margin-top: 50px;  -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
#business .box 			{ width: 90%; margin: 0 auto; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
#business .box h2 		{  }
#business .box h3 		{ margin-top: 40px; margin-bottom: 17px; font-size: 1.1rem; line-height: 1.4; }
#business .box p 		{ line-height: 1.7; }
#business .box ul 		{ margin-top: 22px; }
#business .box ul li 	{ border-bottom: 1px solid #ccc; }
#business .box ul li a 	{ padding: 23px 0; display: block; position: relative; left: 0; -webkit-transition: .3s; transition: .3s; font-weight: bold; }
#business .box ul li a:hover{ left: 10px; }
#business .box ul li a:after{ content: ''; width: 7px; height: 13px; background: url('../img/top/arrow-w.svg') 0 0 no-repeat; background-size: 7px; display: block; position: absolute; top: 50%; right: 18px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
#business .box ul li a:hover{ opacity: 1; }
#business .btnW 	{ margin: 50px auto 0; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }

#company 				{ padding: 75px 0; position: relative; }
#company .box 			{  }
#company .master .box 	{  }
#company .master .box h2{ text-align: left; }
#company .master .box h3{ margin-top: 40px; margin-bottom: 17px; font-size: 1.1rem; color: #22be97; line-height: 1.4; }
#company .master .box p{ line-height: 1.7; }
#company .master .box ul{ margin-top: 22px; }
#company .master .box ul li{ border-bottom: 1px solid #ccc; }
#company .master .box ul li a{ padding: 23px 0; display: block; position: relative; left: 0; -webkit-transition: .3s; transition: .3s; }
#company .master .box ul li a:hover{ left: 10px; }
#company .master .box ul li a:after{ content: ''; width: 7px; height: 13px; background: url('../img/top/arrow-g.svg') 0 0 no-repeat; background-size: 7px; display: block; position: absolute; top: 50%; right: 18px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
#company .master .box ul li a:hover{ opacity: 1; }
#company .image 		{ margin-top: 50px; }
#company .image div 	{ position: relative; }
#company .image div img:nth-of-type(1){ width: 95%; margin-left: auto; display: block; }
#company .image div img:nth-of-type(2){ width: 48%; position: absolute; bottom: -95px; z-index: 2; }
#company .btnG 				{ margin: 145px auto 0; }

#recruit 				{ padding: 75px 0; position: relative; background: url('../img/top/recruit-bg.jpg') 50% 50% no-repeat; background-size: cover; /*background-attachment: fixed;*/ color: #fff; }
#recruit .master 		{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
#recruit h2 			{ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
#recruit .image 		{ margin-top: 75px; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
#recruit .box 			{ padding: 0 5%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
#recruit .box h3 		{ margin-top: 45px; margin-bottom: 17px; font-size: 1.1rem; line-height: 1.4; }
#recruit .box p 		{ line-height: 1.7; }
#recruit .btnG 			{ margin: 43px auto 0; }
}