@charset "utf-8";
body {
		/* background: #cfdcea; */
}
footer {
		background: #f7f9fb;
}

.top_section_outer {
		position: relative;
}
.top_section_outer::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: background 0.4s;
		background: #cfdcea;
}
.top_section_outer.blueBG::before {
		background: #003d72;
}
.top_section_outer.lightBG::before {
		background: #e0e5ea;
}
.top_section_outer.redBG::before {
		background: #e5003f;
}
.blueBG section, .redBG section {
		color: #fff;
}
.lightBG section {
		color: #003d72;
}
section {
		box-sizing: border-box;
		padding: 180px 40px;
		min-height: 800px;
		display: flex;
		align-items: center;
		position: relative;
		color: #003d72;
}
section.top_business {
		padding-bottom: 200px;
}
section.top_recruit {
		padding-bottom: 250px;
}
section .detail_btn {
		width: 210px;
		box-sizing: border-box;
		margin-top: 60px;
		border-radius: 40px;
}
section.top_recruit .detail_btn {
		width: 280px;
}
section .detail_btn a {
		color: #003d72;
		border: 2px solid #003d72;
}
.blueBG .detail_btn a {
		color: #003d72;
		background: #fff;
}
.blueBG .detail_btn a::after {
		background-image: url("../images/arrow_blu.svg");
}
.redBG .detail_btn a {
		color: #e5003f;
		background: #fff;
		border: 2px solid #fff;
}
.redBG .detail_btn a::after {
		background-image: url("../images/arrow_red.svg");
}
@media (hover: hover) {
		.blueBG .detail_btn a:hover {
				color: #fff;
				background: #003d72;
				border: 2px solid #fff;
		}
		.blueBG .detail_btn a:hover::after {
				background-image: url("../images/arrow_wht.svg");
		}
		.lightBG .detail_btn a:hover {
				color: #fff;
				background: #003d72;
				border: 2px solid #003d72;
		}
		.lightBG .detail_btn a:hover::after {
				background-image: url("../images/arrow_wht.svg");
		}
		.redBG .detail_btn a:hover:hover {
				color: #fff;
				background: #e5003f;
				border: 2px solid #fff;
		}
		.redBG .detail_btn a:hover::after {
				background-image: url("../images/arrow_wht.svg");
		}
}
.lightBG section {
		color: #003d72;
}
.top_section_caption {
		opacity: 0.1;
		transition: opacity 0.4s;
}
.activeBG .top_section_caption {
		opacity: 1;
}
/* COMPANY */
.top_company {
		position: relative;
}
.top_company_flex {
		width: 1170px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 5
}
.top_company_illust {
		width: 601px;
}
.top_company_illust img, .top_business_illust img, .top_recruit_illust img, .company_run img {
		width: 100%;
		height: auto;
}
.top_company .run_col {
		position: absolute;
		width: 100%;
		bottom: -44px;
		left: 0;
		z-index: 50;
		box-sizing: border-box;
		padding: 0 20px;
}
.run_col_flex {
		max-width: 1170px;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;
}
.run_col_flex .company_run {
		width: 171px;
		opacity: 0;
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
		transition-delay: 0.1s;
		transform: translateX(500px);
}
.run_col_flex .company_run img {
		width: 100%;
		height: auto;
}
.activeBG .company_run {
		opacity: 1;
		transform: translateX(0);
}
/* BUSINESS */
.top_business_flex {
		width: 1170px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 5
}
@media (hover: hover) {
		.top_business .detail_btn a:hover {
				background: #003d72;
				color: #fff;
		}
		.top_business .detail_btn a:hover::after {
				background-image: url("../images/arrow_wht.svg");
		}
}
.top_business_illust {
		width: 540px;
}
.top_business .run_col {
		position: absolute;
		width: 100%;
		bottom: -44px;
		left: 0;
		z-index: 50;
}
.top_business .run_col_flex {
		display: flex;
		justify-content: flex-start;
		padding: 0 20px;
}
.run_col_flex .business_run {
		width: 171px;
		opacity: 0;
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
		transition-delay: 0.1s;
		transform: translateX(-500px);
}
.business_run img {
		width: 100%;
		height: auto;
}
.activeBG .business_run {
		opacity: 1;
		transform: translateX(0);
}
/* RECRUIT */
.top_recruit {
		position: relative;
}
.top_recruit_illust {
		width: 498px;
		position: relative;
		left: -70px;
}
.top_section_flex {
		width: 1170px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 5;
}
.top_section_caption {
		width: 500px;
}
.top_section_caption .section_caption {
		line-height: 2.0;
		text-align: justify;
}
.top_recruit .loop_wrap {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
}
.loop_slider, .reverse_slider {
		display: flex;
		width: 100%;
		overflow: hidden;
}
.loop_inner, .reverse_inner {
		display: flex;
}
.loop_item.joinus {
		width: 1980px;
		margin: 0;
}
.loop_inner:first-child {
		animation: loop 75s linear infinite;
}
.loop_inner:nth-child(2) {
		animation: loop2 75s -50s linear infinite;
}
.loop_inner:last-child {
		animation: loop3 75s -25s linear infinite;
}
.reverse_slider .reverse_inner:first-child {
		animation: loop4 180s linear infinite;
}
.reverse_slider .reverse_inner:nth-child(2) {
		animation: loop5 180s -120s linear infinite;
}
.reverse_slider .reverse_inner:last-child {
		animation: loop6 180s -60s linear infinite;
}
.loop_item img {
		width: 100%;
		height: auto;
		vertical-align: top;
}
@keyframes loop {
		0% {
				transform: translateX(200%);
		}
		to {
				transform: translateX(-100%);
		}
}
@keyframes loop2 {
		0% {
				transform: translateX(100%);
		}
		to {
				transform: translateX(-200%);
		}
}
@keyframes loop3 {
		0% {
				transform: translateX(0%);
		}
		to {
				transform: translateX(-300%);
		}
}
@keyframes loop4 {
		0% {
				transform: translateX(-100%);
		}
		to {
				transform: translateX(200%);
		}
}
@keyframes loop5 {
		0% {
				transform: translateX(-200%);
		}
		to {
				transform: translateX(100%);
		}
}
@keyframes loop6 {
		0% {
				transform: translateX(-300%);
		}
		to {
				transform: translateX(0%);
		}
}
.top_recruit_btn {
		position: relative;
}
.top_recruit_btn .detail_btn {
		position: relative;
		z-index: 5;
}
.top_recruit_btn .top_recruit_btn_txt {
		width: 182px;
		position: absolute;
		top: -58px;
		left: 154px;
		z-index: 0;
		opacity: 0;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
		transition-delay: 0.6s;
		transform: rotate(90deg);
}
@media(max-width: 767px) {
		.top_recruit_btn .top_recruit_btn_txt {
				width: 182px;
				top: -62px;
				left: 62px;
		}
}
.activeBG .top_recruit_btn .top_recruit_btn_txt {
		opacity: 1;
		transform: rotate(0deg);
}
.top_recruit_btn_txt img {
		width: 100%;
		height: auto;
}
@media(max-width: 840px) {
		.loop_item {
				width: 400vw;
		}
}
@media(max-width: 1200px) {
		.top_section_caption {
				width: 50%;
		}
		.top_company_illust {
				width: 46%;
		}
		.top_company .top_section_caption {
				margin-left: 4%;
		}
		.top_business_illust {
				width: 50%;
				margin-left: 4%;
		}
		.top_recruit_illust {
				width: 55%;
				left: -1%;
				margin-right: 3%;
		}
		.run_col_flex .business_run {
				width: 150px;
		}
		.run_col_flex .company_run {
				width: 184px;
		}
}
@media(min-width: 768px) {
		.sp_illust {
				display: none;
		}
}
@media(max-width: 767px) {
		.pc_illust {
				display: none;
		}
		section {
				padding: 90px 25px;
				min-height: inherit;
		}
		.top_section_caption {
				width: auto;
		}
		.top_company .top_section_caption {
				margin-left: 0;
		}
		.top_company_illust, .top_business_illust, .top_recruit_illust {
				width: 100%;
				margin: 0 0 30px;
		}
		.top_section_caption .section_caption {
				font-size: 15px;
				line-height: 1.8;
		}
		.top_company .run_col {
				bottom: -10px;
		}
		.top_company_flex {
				position: relative;
				z-index: 100;
		}
		.run_col_flex .company_run {
				width: 36vw;
		}
		.run_col_flex .business_run {
				width: 32.8vw;
		}
		.top_recruit .section_title {
				text-align: right;
		}
		section.top_recruit {
				padding-bottom: 120px;
		}
		.loop_item.joinus {
				width: 1000px;
		}
}