@charset "utf-8";
/*-------------------------------------------------

	MAIN

--------------------------------------------------*/
#main {
	background: url("../img/top/bg.png") no-repeat center / cover;
	position: relative;
	padding: 13rem 0 6rem;
	overflow: hidden;
}
#main figure {
	position: absolute;
	left: 3%;
	bottom: 50%;
	transform: translate(0,50%);
	width: 9rem;
}
#main .logo {
	position: absolute;
	left: 15%;
	bottom: 50%;
	transform: translate(0,50%);
	width: 142rem;
 	animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
	opacity: .5;
	z-index: 1;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: .5}
}
#main .box { 
	position: relative;
	max-width: 80%;
	height: 57.8rem;
	margin: 0 0 2rem auto;
	overflow: hidden;
}
 #main .bg {
	width: 100%;
	height: 72.8rem;
	position: absolute;
	top: 0;
	left: 0;
	background: url("../img/top/main.jpg") no-repeat center / cover;
	animation-name: slider-zoomout;
	animation-delay: -3s;
	animation-duration: 40s;
	opacity: 1;
}
@keyframes slider-zoomout {
	0% {
		opacity: 0;
		transform: scale(1.3);
	}
	12.5% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	27.5% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
#main .txtbox {
	position: absolute;
	left: 0;
	bottom: 50%;
	transform: translate(0,50%);
	width: 100%;
	z-index: 2;
}
#main .txtbox p {
	margin-bottom: 1rem;
	animation: ltxt 3s ease-in-out;
	animation-fill-mode: forwards;
}
#main .txtbox p span {
	display: table;
	padding: 1rem 2rem;
	background: #002548;
	color: #fff;
    font-size: 2.1rem;
	white-space: nowrap;
}
#main .txtbox p:last-child span {display: inherit;width: 100%;z-index: 2;}
@keyframes ltxt {
	0% {
	    overflow: hidden;
	    width: 0;
	    opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
	    width: 100%;
	    opacity: 1;
	}
}
#main .copy {font-size: 1.2rem;text-align: right;}
#main .scroll {
	position: absolute;
	left: 3%;
	bottom: 8.6rem;
	transform: rotate(90deg);
	font-size: 1.5rem;
	z-index: 1;
}
#main .scroll span {position: relative;}
#main .scroll span::before {
	content: '';
	position: absolute;
	right: -4rem;
	bottom: 50%;
	transform: translate(0,50%);
	width: 2.5rem;
	height: .1rem;
	background: #002548;
}
@media only screen and ( max-width : 896px ) {
	#main {padding-bottom: 10rem;}
	#main figure {display: none;}
	#main .logo {
		left: 50%;
		bottom: 35%;
		transform: translate(-50%,50%);
		width: 80rem;
	}
	#main .box {max-width: 95%;height: 41.7rem;}
	#main .txtbox p span {font-size: 1.6rem;}
	#main .scroll {
		left: 50%;
		bottom: 4rem;
		transform: translate(-50%,0) rotate(0deg);
		font-size: 1.2rem;
	}
	#main .scroll span::before {
		left: 50%;
		right: inherit;
		bottom: -2.2rem;
		transform: translate(-50%,0) rotate(90deg);
		width: 3.5rem;
	}
}
@media only screen and ( max-width : 500px ) {
}
/*-------------------------------------------------

	OUR SERVICE

--------------------------------------------------*/
#svc {background: #002548;padding-top: 7rem;}
#svc .flexbox {align-items: center;}
#svc .box {color: #fff;width: 54%;}
#svc .svgbox {font-size: 11.4rem;}
#svc figure {width: 40%;}
#svc h3 {margin-bottom: 5.5rem;font-size: 2.2rem;}
#svc h2.text_title {margin-bottom: 3.5rem;}
#svc h2 span {color: #ADD2FF;font-size: 3rem;line-height: 1.4;}
#svc p {max-width: 50.2rem;margin-bottom: 5.3rem;}
@media only screen and ( max-width : 1700px ) {
	#svc .svgbox {font-size: 6.2vw;}
}
@media only screen and ( max-width : 1400px ) {
	#svc .svgbox {font-size: 5vw;}
}
@media only screen and ( max-width : 896px ) {
	#svc {padding-top: 4rem;}
	#svc .inner {padding: 0;}
	#svc figure {width: 100%;}
	#svc .box {padding: 0 3rem;width: 100%;}
	#svc .svgbox {font-size: 4.4rem;height: 8.5rem;}
	#svc h3 {margin-bottom: 2rem;font-size: 1.6rem;}
	#svc h2.text_title {margin-bottom: 4rem;}
	#svc h2 span {font-size: 2.4rem;}
}
@media only screen and ( max-width : 500px ) {
	#svc .svgbox {font-size: 3.8rem;}
}
/*-------------------------------------------------

	PHILOSOPHY

--------------------------------------------------*/
#philo {background: #002548;}
#philo .flexbox {align-items: center;}
#philo .box {color: #fff;width: 54%;}
#philo .svgbox {font-size: 11.4rem;}
#philo figure {width: 40%;}
#philo h3 {margin-bottom: 8.5rem;font-size: 2.2rem;}
#philo h2.text_title {margin-bottom: 3.5rem;}
#philo h2 span {color: #ADD2FF;font-size: 3rem;line-height: 1.4;}
#philo p {max-width: 50.2rem;margin-bottom: 5.3rem;}
@media only screen and ( max-width : 1700px ) {
	#philo .svgbox {font-size: 6.2vw;}
}
@media only screen and ( max-width : 1400px ) {
	#philo .svgbox {font-size: 5vw;}
}
@media only screen and ( max-width : 896px ) {
	#philo .inner {padding: 0;}
	#philo figure {width: 100%;}
	#philo .box {padding: 0 3rem;width: 100%;}
	#philo .svgbox {font-size: 4.4rem;height: 8.5rem;}
	#philo h3 {margin-bottom: 2rem;font-size: 1.6rem;}
	#philo h2.text_title {margin-bottom: 4rem;}
	#philo h2 span {font-size: 2.4rem;}
}
@media only screen and ( max-width : 500px ) {
	#philo .svgbox {font-size: 3.8rem;}
}
/*-------------------------------------------------

	RECRUIT & OUTLINE

--------------------------------------------------*/
#bottom {background: #002548;padding-bottom: 33rem;}
#bottom .bg {width: 48%;padding: 16rem 0;}
#bottom .bg:nth-child(1) {background: url("../img/top/recruit.jpg") no-repeat center / cover;}
#bottom .bg:nth-child(2) {background: url("../img/top/outline.jpg") no-repeat center / cover;}
#bottom .bg div {
	max-width: 37rem;
	margin: 0 auto;
	padding: 2rem 0;
	background: #fff;
}
#bottom h3 {text-align: center;}
#bottom .svgbox {
	display: block;
	max-width: 21.8rem;
	height: 7.8rem;
	margin: 0 auto;
	font-size: 4.8rem;
}
@media only screen and ( max-width : 896px ) {
	#bottom {padding-bottom: 8.4rem;}
	#bottom .bg {width: 100%;padding: 6.5rem 0;}
	#bottom .bg:nth-child(1) {margin-bottom: 3rem;}
}
@media only screen and ( max-width : 500px ) {
	#bottom .bg div {max-width: 24rem;}
}
/*-------------------------------------------------

	CONTACT

--------------------------------------------------*/
#contact {padding: 18rem 0;background: url("../img/top/bg.png") no-repeat center / cover;}
#contact h3 {margin-bottom: 1rem;font-size: 1.2rem;text-align: center;}
#contact h2 {margin-bottom: 2rem;font-size: 4.8rem;text-align: center;}
#contact p {margin-bottom: 2rem;text-align: center;}
@media only screen and ( max-width : 896px ) {
	#contact {padding: 10rem 0;}
}
footer {margin-top: 0;}