@charset "utf-8";

header.header--lighten { z-index: 999; }
#recruit {
	font: 1.0rem/1.6 'SSTJapanesePro',sans-serif; font-weight: normal; color: #343841;
}
#recruit :focus { outline: solid 1px #fff; }

/* --------------------------------------------------------------------------
   header
-------------------------------------------------------------------------- */

#recruit .bar { position: relative; width: 1220px; height: 3px; margin: 0 auto; }
#recruit .bar::before {
	content: ''; display: block; position: absolute; top: 0; left: 0; width: 611px; height: 3px;
	background: center/contain repeat-y url(/assets/img/bg_line01_typeb.png);
}

@media screen and (max-width:769px) {
	#recruit .bar { width: 100%; }
	#recruit .bar::before { width: 280px; }
}

/* --------------------------------------------------------------------------
   common
-------------------------------------------------------------------------- */

#recruit .nopc { display: none; }
#recruit .nosp { display: inline-block; }
#recruit * img { width: 100%; }
#recruit * { box-sizing: border-box; }
#recruit .kome { padding-left: 1.0em; text-indent: -1.0em each-line; font-size: 0.875rem; }

#recruit section { position: relative; padding: 0 0 120px; }
#recruit article { width: 1220px; margin: 0 auto; }
#recruit h1 { font-size: 3.0rem; color: #fff; font-weight: normal; }
#recruit h2 {
	position: relative; width: 1220px; margin: 0 auto 64px; padding: 36px 0 0;
	font-size: 2.5rem; color: #2846a0; font-weight: normal;
	font-family: 'RopaSans','SSTJapanesePro';
}
#recruit h2 span { display: block; font-size: 1.0rem; color: #343841; }
#recruit h2::before {
	content: ''; position: absolute; top: 0; left: 50%; width: 611px; height: 3px;
	background: center/contain repeat-y url(/assets/img/bg_line01_typeb.png);
	transform: translateX(-610px);
}

@media screen and (max-width:769px) {
	#recruit .nopc { display: inline-block; }
	#recruit .nosp { display: none; }
	#recruit section { padding: 0 0 64px; }
	#recruit article { width: 90%; }
	#recruit h1 { font-size: 2.125rem; }
	#recruit h2 { width: 100%; margin: 0 auto 36px; padding: 24px 0 0 5%; font-size: 1.875rem; }
	#recruit h2::before { left: 0; width: 280px; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   main
-------------------------------------------------------------------------- */

#recruit .index_lead { width: 780px; margin: 0 auto; padding: 72px 0; }

@media screen and (min-width: 770px) {
	#recruit .index_ttl {
		display: flex; flex-direction: column; justify-content: center; height: 400px;
		background-image: url(../img/bg_main2.png), url(../img/bg_main1.jpg);
		background-position: center,top right; background-size: auto 100%;
		background-repeat: no-repeat; background-color: #2846a0;
	}
	#recruit .index_ttl h1 { width: 1220px; margin: 0 auto; }
}
@media screen and (max-width:769px) {
	#recruit .index_ttl {
		position: relative; width: 100%; height: 100vw;
		background: center/cover no-repeat url(../img/bg_main1_s.jpg);
	}
	#recruit .index_ttl h1 { position: absolute; bottom: 12%; left: 5%; }
	#recruit .index_lead { width: 90%; padding: 48px 0; }
}

/* --------------------------------------------------------------------------
   message
-------------------------------------------------------------------------- */

#recruit .message {
	max-height: 2000px; padding: 0 0 14.5rem; background: #f3f6fb;
	transition: max-height .3s ease-in-out;
}
#recruit .message h2 { margin: 0 auto; }
#recruit .message h3 { margin: 36px 0 24px; font-size: 1.625rem; }
#recruit .message .caja {
	display: flex; flex-direction: row-reverse; justify-content: space-between;
}
#recruit .message .caja div { width: 570px; }
#recruit .message .ceo { margin: 2.0em 0 0; text-align: right; }
#recruit .message .ceo span {
	display: inline-block; margin-left: 16px; font-size: 1.625rem; font-weight: normal;
}
#recruit .message .more {
	position: absolute; bottom: 0; left: 0; width: 100%; padding: 5rem 0 7.5rem;
	text-align: center; z-index: 99;
}
#recruit .message button {
	appearance: none; outline: none; width: 168px; border: solid 1px #2846a0;
	border-width: 0 0 1px 0; line-height: 2.0; 
}
#recruit .message button::after {
	content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 10px;
	background: 0 0/300% auto no-repeat url(../img/ico.svg) #2846a0; border-radius: 16px;
	transform: rotate(180deg); vertical-align: text-top;
}
#recruit .message.close { max-height: 900px; overflow: hidden; }
#recruit .message.close::after {
	content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
	background: linear-gradient(transparent 52%,rgba(255,255,255,.5) 60%,#f3f6fb 75%);
	opacity: 1; transition: opacity .5s ease-in-out;
}
#recruit .message.close button::after { margin-right: 10px; transform: rotate(0); }

@media screen and (min-width:770px) {
	#recruit .message .caja:nth-of-type(even) { margin: 100px auto; flex-direction: row; }
}
@media screen and (max-width:769px) {
	#recruit .message { max-height: 1000vw; padding: 0 0 8.25rem; }
	#recruit .message h3 { margin: 0 0 24px; font-size: 1.125rem; }
	#recruit .message .caja { display: block; }
	#recruit .message .caja div { width: 100%; margin: 36px 0 0; }
	#recruit .message .more { padding: 2.5rem 0 3.75rem; }
	#recruit .message button { width: 44%; }
	#recruit .message.close { max-height: 250vw; }
	#recruit .message.close::after {
		background: linear-gradient(transparent 75%,rgba(255,255,255,.5) 80%,#f3f6fb 90%);
	}
}

/* --------------------------------------------------------------------------
   business introduction
-------------------------------------------------------------------------- */

#recruit .business .ttl {
	position: relative; width: 100%; height: 372px; margin: 72px 0 0; padding: 72px 0 0;
	background: center right/60% auto no-repeat url(../img/bg_top1.jpg); 
}
#recruit .business .ttl.dm { background-image: url(../img/bg_top2.jpg); }
#recruit .business .ttl.op { background-image: url(../img/bg_top3.jpg); }
#recruit .business h3 { width: 1220px; margin: 0 auto; font-size: 2.375rem; color: #2846a0; }
#recruit .business h3 span {
	display: block; font-size: 1rem; color: #343841; font-family: 'RopaSans'; font-weight: normal;
}
#recruit .business h4 { width: 350px; font-size: 1.75rem; font-weight: normal; }
#recruit .business h4 span {
	position: relative; display: block; margin: 1.0em 0 0; padding-left: 20px;
	font-size: 1.125rem; font-family: 'RopaSans';
}
#recruit .business h4 span::before {
	content: ''; position: absolute; top: 50%; left: 0; width: 12px; height: 15px;
	clip-path: polygon(0% 0%,40% 0%,100% 50%,40% 100%,0% 100%); transform: translateY(-50%);
}
#recruit .business li p { width: 806px; margin: 0; }
#recruit .business ul { position: relative; width: 1220px; margin: -90px auto 0; z-index: 9; }
#recruit .business li {
	display: flex; margin: 0 0 30px; padding: 64px 72px; background: #fff;
	box-shadow: 0 0 6px rgba(0,0,0,.16);
}
#recruit .business li.mf { border-left: solid 26px #d733b4; }
#recruit .business li.mf h4 span::before { background: #d733b4; }
#recruit .business li.sm { border-left: solid 26px #00a7d4; }
#recruit .business li.sm h4 span::before { background: #00a7d4; }
#recruit .business li.it { border-left: solid 26px #4555c7; }
#recruit .business li.it h4 span::before { background: #4555c7; }
#recruit .business li.rd { border-left: solid 26px #62bd19; }
#recruit .business li.rd h4 span::before { background: #62bd19; }
#recruit .business li.si { border-left: solid 26px #ff9f00; }
#recruit .business li.si h4 span::before { background: #ff9f00; }

@media screen and (max-width:769px) {
	#recruit .business .ttl {
		height: 130vw; margin: 48px 0 0; padding: 77vw 0 0;
		background-image: linear-gradient(transparent 40%,#f3f6fb 55%),url(../img/bg_top1.jpg);
		background-position: 0 0,top right; background-size: auto 100%,auto 65%;
		background-repeat: no-repeat;
	}
	#recruit .business .ttl.dm {
		background-image: linear-gradient(transparent 40%,#f3f6fb 55%),url(../img/bg_top2.jpg);
	}
	#recruit .business .ttl.op {
		height: 120vw; 
		background-image: linear-gradient(transparent 40%,#f3f6fb 55%),url(../img/bg_top3.jpg);
	}
	#recruit .business h3 { width: 90%; font-size: 1.5rem; }
	#recruit .business h4 { width: 100%; margin: 0 0 24px; font-size: 1.125rem; }
	#recruit .business h4 span { margin: 0.5em 0 0; }
	#recruit .business ul { width: 90%; margin: -16vw auto 0; }
	#recruit .business li { display: block; padding: 36px 20px 36px 30px; }
	#recruit .business li.mf, #recruit .business li.sm, #recruit .business li.it,
	#recruit .business li.rd, #recruit .business li.si {
		border-width: 0 0 0 10px;
	}
	#recruit .business li p { width: 100%; }
}

/* --------------------------------------------------------------------------
   relation
-------------------------------------------------------------------------- */

#recruit .relation { padding: 130px 0; background: #edf0f4; text-align: center; }
#recruit .relation::before {
	content: ''; position: absolute; top: -60px; left: 50%; width: 120px; height: 120px;
	background: #fff; transform: translateX(-50%) rotate(45deg);
}
#recruit .relation h2 { font-size: 2.375rem; color: #2846a0; font-weight: bold; }
#recruit .relation h2::before { content: none; }
#recruit .relation .scheme { position: relative; margin: 72px auto 0; padding: 30px 0; }
#recruit .relation .scheme::before {
	content: ''; position: absolute; top: 0; left: 50%; width: 736px; height: 100%;
	background: #2846a0; box-shadow: 0 0 6px rgba(0,0,0,.1); border-radius: 6px;
	transform: translateX(-50%); 
}
#recruit .relation .scheme h3 {
	position: relative; width: 280px; margin: 0 auto 20px; z-index: 9;
}
#recruit .relation .scheme h3 span {
	display: block; width: 100%; height: 0; padding: 0 0 10%;
	background: 0 0/100% auto no-repeat url(../img/logo.svg);
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
#recruit .relation .scheme .overall {
	display: flex; justify-content: space-between;
}
#recruit .relation .scheme .lside {
	display: flex; justify-content: space-between; flex-wrap: wrap; width: 978px;
}
#recruit .relation .scheme .operator {
	position: relative; display: flex; flex-direction: column; justify-content: center;
	width: 222px; margin: 0 0 10px; background: #fff; border-radius: 6px;
	box-shadow: 0 0 6px rgba(0,0,0,.1);
}
#recruit .relation .scheme .operator.man { margin: 0; }
#recruit .relation .scheme .operator h4 {
	font-size: 1.25rem; color: #2846a0; font-weight: normal;
}
#recruit .relation .scheme .operator h4::before {
	content: ''; display: block; width: 100px; height: 100px; margin: 0 auto 16px;
	background: 0 0/300% auto no-repeat url(../img/ico_scheme.svg);
}
#recruit .relation .scheme .operator.man h4::before { background-position: 50% 0; }
#recruit .relation .scheme .operator p { margin: 1.0em 0 0; }
#recruit .relation .scheme .operator span { display: block; }
#recruit .relation .scheme .platform { width: 736px; padding: 0 30px; }
#recruit .relation .scheme .platform .type {
	position: relative; width: 100%; margin: 0 0 10px; padding: 0 20px 20px; background: #fff;
	border-radius: 4px;
}
#recruit .relation .scheme .platform .type.si { margin: 0; }
#recruit .relation .scheme .platform h4 { padding: 0.4em 0; font-size: 1.25rem; color: #2846a0; }
#recruit .relation .scheme .platform h5 { font-size: 1.125rem; }
#recruit .relation .scheme .platform p { margin: 0; }
#recruit .relation .scheme .platform ul { margin: 0; }
#recruit .relation .scheme .platform li {
	margin: 0 0 6px; padding: 16px 8px; background: #edf0f4;
}
#recruit .relation .scheme .platform li:last-child { margin: 0; }
#recruit .relation .scheme .platform li:last-child { margin: 0; }
#recruit .relation .scheme .platform li.mf { border-top: solid 6px #d733b4; }
#recruit .relation .scheme .platform li.sm { border-top: solid 6px #00a7d4; }
#recruit .relation .scheme .platform li.it { border-top: solid 6px #4555c7; }
#recruit .relation .scheme .platform li.rd { border-top: solid 6px #62bd19; }
#recruit .relation .scheme .platform li.si { border-top: solid 6px #ff9f00; }
#recruit .relation .scheme .platform .type i {
	position: absolute; top: 50%; width: 70px; height: 50px; padding: 0 10px;
	background: #fff; border-radius: 6px; transform: translateY(-50%); z-index: 99;
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
#recruit .relation .scheme .platform .type i::before {
	content: ''; display: block; width: 50px; height: 50px;
	background: 50% 0/300% auto no-repeat url(../img/ico.svg);
}
#recruit .relation .scheme .platform .type i.left {
	left: -65px; box-shadow: -4px 0 6px rgba(0,0,0,.1);
}
#recruit .relation .scheme .platform .type i.right {
	right: -65px; box-shadow: 4px 0 6px rgba(0,0,0,.1);
}
#recruit .relation .scheme .platform .type i.right::before { transform: rotate(180deg); }
#recruit .relation .scheme .user {
	position: relative; display: flex; flex-direction: column; justify-content: center;
	width: 222px; background: #fff; border-radius: 6px; box-shadow: 0 0 6px rgba(0,0,0,.1);
}
#recruit .relation .scheme .user h4 { font-size: 1.25rem; color: #2846a0; font-weight: normal; }
#recruit .relation .scheme .user h4::before {
	content: ''; display: block; width: 100px; height: 100px; margin: 0 auto 16px;
	background: 100% 0/300% auto no-repeat url(../img/ico_scheme.svg);
}

@media screen and (max-width:769px) {
	#recruit .relation { padding: 64px 0; }
	#recruit .relation::before { top: -30px; width: 60px; height: 60px; }
	#recruit .relation h2 { font-size: 1.625rem; }
	#recruit .relation .scheme { margin: 48px auto 0; padding: 16px 0; }
	#recruit .relation .scheme::before { width: 54vw; }
	#recruit .relation .scheme h3 { width: 40vw; margin: 0 auto 10px; }
	#recruit .relation .scheme .lside { width: 74vw; }
	#recruit .relation .scheme .operator { width: 16vw; }
	#recruit .relation .scheme .operator h4 {
		display: block; width: 100%; height: 0; padding: 0 0 164%;
		background: 0 0/300% auto no-repeat url(../img/scheme_ttl.png);
		text-indent: 120%; white-space: nowrap; overflow: hidden;
	}
	#recruit .relation .scheme .operator.man h4 { padding: 0 0 174%; background-position: 50% 0; }
	#recruit .relation .scheme .operator h4::before { content: none; }
	#recruit .relation .scheme .operator p {
		width: 100%; height: 0; padding: 0 0 400%;
		background: 0 0/200% auto no-repeat url(../img/scheme_txt.png);
		text-indent: 120%; white-space: nowrap; overflow: hidden;
	}
	#recruit .relation .scheme .operator.man p { padding: 0 0 150%; background-position: 100% 0; }
	#recruit .relation .scheme .operator span { display: inline; margin: 0.5em 0 0; }
	#recruit .relation .scheme .platform { width: 58vw; padding: 0 4vw; }
	#recruit .relation .scheme .platform .type { padding: 0 10px 10px; }
	#recruit .relation .scheme .platform h4 { font-size: 0.9375rem; }
	#recruit .relation .scheme .platform h5 { font-size: 0.875rem; }
	#recruit .relation .scheme .platform p { margin: 0; font-size: 0.875rem; }
	#recruit .relation .scheme .platform li { padding: 8px; }
	#recruit .relation .scheme .platform .type i { width: 30px; height: 30px; padding: 5px; }
	#recruit .relation .scheme .platform .type i::before { width: 20px; height: 20px; }
	#recruit .relation .scheme .platform .type i.left { left: -25px; }
	#recruit .relation .scheme .platform .type i.right { right: -25px; }
	#recruit .relation .scheme .user { width: 16vw; }
	#recruit .relation .scheme .user h4 {
		display: block; width: 100%; height: 0; padding: 0 0 196%;
		background: 100% 0/300% auto no-repeat url(../img/scheme_ttl.png);
		text-indent: 120%; white-space: nowrap; overflow: hidden;
	}
	#recruit .relation .scheme .user h4::before { content: none; }
}

/* --------------------------------------------------------------------------
   job introduction
-------------------------------------------------------------------------- */

#recruit .job .lead { margin: 64px 0; color: #343841; }
#recruit .job ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
#recruit .job li { width: 370px; border-bottom: solid 1px #b3b3b3; text-align: center; }
#recruit .job li h3 { margin: 36px 0; font-size: 1.75rem; color: #2846a0; }
#recruit .job li h4 {
	display: block; background: #2846a0; color: #fff; font-size: 1.25rem; line-height: 2.0;
	font-family: 'RopaSans'; font-weight: normal;
}
#recruit .job li p { margin: 36px 0; text-align: left; }

@media screen and (max-width:769px) {
	#recruit .job .lead { margin: 36px 0; }
	#recruit .job ul { display: block; }
	#recruit .job li { width: 100%; }
	#recruit .job li h3 { margin: 24px 0; font-size: 1.25rem; }
	#recruit .job li h4 { font-size: 1rem; }
	#recruit .job li p { margin: 36px 0; }
}

/* --------------------------------------------------------------------------
   development flow
-------------------------------------------------------------------------- */

#recruit .flow { background: #edf0f4; }
#recruit .flow .lead { margin: 64px 0; color: #343841; }
#recruit .flow ul { display: flex; justify-content: space-between; }
#recruit .flow li {
	position: relative; width: 172px; padding: 40px 0; background: #fff; text-align: center;
}
#recruit .flow li::after {
	content: ''; position: absolute; top: 50%; right: -9px; width: 12px; height: 15px;
	clip-path: polygon(0% 0%,40% 0%,100% 50%,40% 100%,0% 100%); 
	background: #2846a0; transform: translateY(-50%); z-index: 9;
}
#recruit .flow li:last-child::after { content: none; }
#recruit .flow .num {
	width: 46px; margin: 0 auto; background: #2846a0; font-size: 1.25rem; line-height: 46px;
	color: #fff; font-family: 'RopaSans';
}
#recruit .flow h3 { margin: 36px 0 0; font-size: 1.25rem; color: #2846a0; font-weight: normal; }
#recruit .flow h3 span {
	display: block; margin: 36px 0 0; font-size: 1rem; font-family: 'RopaSans'; color: #343841;
}

@media screen and (max-width:769px) {
	#recruit .flow .lead { margin: 36px 0; }
	#recruit .flow ul { display: block; }
	#recruit .flow li {
		display: flex; align-items: center; width: 100%; margin: 0 0 5px; padding: 30px 10%;
		text-align: left;
	}
	#recruit .flow li::after {
		top: auto; bottom: -10px; right: auto; left: 16%; transform: translateY(0) rotate(90deg);
	}
	#recruit .flow li .num {
		width: 14vw; margin: 0 30px 0 0; line-height: 14vw; text-align: center;
	}
	#recruit .flow h3, #recruit .flow h3 span { margin: 0; }
}

/* --------------------------------------------------------------------------
   requirement
-------------------------------------------------------------------------- */

#recruit .require { background: #2846a0; }
#recruit .require h2, #recruit .require h2 span { color: #fff; }
#recruit .require article { margin: 0 auto 30px; padding: 72px; background: #fff; }
#recruit .require .category { display: flex; }
#recruit .require h3 { width: 276px; font-size: 2.375rem; font-weight: normal; }
#recruit .require h3 span { display: block; font-size: 1.125rem; }
#recruit .require .detail { width: 800px; }
#recruit .require button {
	position: relative; appearance: none; outline: none; width: 800px; border: solid 1px #999;
	border-radius: 4px; font-size: 1.125rem; line-height: 2.8; text-align: center;
}
#recruit .require button::after {
	content: ''; position: absolute; top: 50%; right: 20px; width: 18px; height: 18px;
	background: 0 0/300% auto no-repeat url(../img/ico.svg) #dc0028; border-radius: 20px;
	transform: translateY(-50%);
}
#recruit .require button.open::after { transform: translateY(-50%) rotate(180deg); }
#recruit .require .infra { display: none; }
#recruit .require .infra dl { display: flex; justify-content: space-between; flex-wrap: wrap; }
#recruit .require .infra dt {
	display: flex; flex-direction: column; justify-content: center; width: 156px; 
	border-bottom: solid 3px #dc0028; font-size: 1rem; text-align: center;
}
#recruit .require .infra dd {
	width: 640px; padding: 36px 20px; border-bottom: solid 1px #b3b3b3;
}
#recruit .require .infra dd .gist { margin: 0; }
#recruit .require .infra dd .gist li {
	position: relative; margin: 0; padding-left: 20px; font-size: 1rem;
}
#recruit .require .infra dd .gist li::before {
	content: ''; position: absolute; top: 5px; left: 0; width: 12px; height: 14px;
	clip-path: polygon(0% 0%,40% 0%,100% 50%,40% 100%,0% 100%); background: #2846a0;
}
#recruit .require a {
	position: relative; display: block; width: 530px; margin: 64px auto 0; color: #fff;
	border-radius: 16px; box-shadow: 6px 6px 6px rgba(0,0,0,.1);
	font-size: 1.25rem; line-height: 4.0; font-weight: bold; text-align: center; 
	transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#recruit .require a i {
	position: absolute; top: 50%; right: 20px; width: 28px; height: 28px;
	background: 100% 0/300% auto no-repeat url(../img/ico.svg); transform: translateY(-50%);
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
#recruit .require a:hover {
	opacity: 1; transform: scale(1.05,1.05);
	transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#recruit .require .career h3, #recruit .require .career .infra dt { color: #dc0028; }
#recruit .require .career a { background: #dc0028; }
#recruit .require .newgrad h3 { color: #2846a0; }
#recruit .require .newgrad .infra dt { border-bottom: solid 3px #2846a0; color: #2846a0; }
#recruit .require .newgrad button::after { background-color: #2846a0; }
#recruit .require .newgrad a { background: #2846a0; }
#recruit .require .challenge h3 { color: #008539; }
#recruit .require .challenge .infra dt { border-bottom: solid 3px #008539; color: #008539; }
#recruit .require .challenge a { background: #008539; }
#recruit .require .challenge button::after { background-color: #008539; }

@media screen and (min-width:770px) {
}
@media screen and (max-width:769px) {
	#recruit .require article { margin: 0 auto 20px; padding: 24px 5%; }
	#recruit .require .category { display: block; }
	#recruit .require h3 { width: 100%; font-size: 1.5rem; }
	#recruit .require h3 span { display: inline-block; font-size: 1rem; }
	#recruit .require .detail { width: 100%; margin: 36px 0 0; }
	#recruit .require button { width: 100%; font-size: 1rem; }
	#recruit .require .infra dt {
		display: block; width: 100%; padding: 24px 0 0; border: none; text-align: left;
		font-size: 1.125rem;
	}
	#recruit .require .infra dt::after {
		content: ''; display: block; width: 100px; margin: 20px 0 0;
		border-bottom: solid 4px #dc0028;
	}
	#recruit .require .newgrad .infra dt { border: none; color: #2846a0; }
	#recruit .require .newgrad .infra dt::after { border-bottom: solid 4px #2846a0; }
	#recruit .require .challenge .infra dt { border: none; color: #008539; }
	#recruit .require .challenge .infra dt::after { border-bottom: solid 4px #008539; }
	#recruit .require .infra dd { width: 100%; padding: 24px 0; }
	#recruit .require .infra dd .gist li::before { top: 6px; }
	#recruit .require a {
		width: 100%; margin: 36px auto 0; padding: 0 20px; font-size: 1rem; text-align: left;
	}
	#recruit .require a i { right: 16px; }
}

/* --------------------------------------------------------------------------
   interview
-------------------------------------------------------------------------- */

#recruit .entrevista { background: #edf0f4; }
#recruit .entrevista h3 {
	position: relative; width: 100%; margin: 0 0 24px; padding-left: 24px;
	font-size: 1.5rem; color: #2846a0;
}
#recruit .entrevista h3::before {
	content: ''; position: absolute; top: 50%; left: 0; width: 12px; height: 15px;
	clip-path: polygon(0% 0%,40% 0%,100% 50%,40% 100%,0% 100%); background: #2846a0;
	transform: translateY(-50%); 
}
#recruit .entrevista h4 {
	margin: 0 0 0.5em; font-size: 1.5rem; color: #2846a0; font-weight: normal;
}
#recruit .entrevista div { width: 570px; }
#recruit .entrevista a {
	position: relative; display: block; width: 220px; margin: 60px 0 0 auto; background: #2846a0;
	border-radius: 10px; box-shadow: 6px 6px 6px rgba(0,0,0,.1);
	font-size: 1.125rem; line-height: 2.8; color: #fff; text-align: center; 
	transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#recruit .entrevista a::after {
	content: ''; position: absolute; top: 50%; right: 16px; width: 20px; height: 20px;
	background: 0 0/300% auto no-repeat url(../img/ico.svg) rgba(0,0,0,.5); border-radius: 20px;
	transform: translateY(-50%) rotate(-90deg);
}
#recruit .entrevista a:hover {
	opacity: 1; transform: scale(1.05,1.05);
	transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#recruit .entrevista .line {
	display: block; width: calc(50% + 610px); border-top: solid 1px #2846a0;
}
#recruit .entrevista .line:nth-of-type(even) { margin-left: auto; }

@media screen and (min-width:770px) {
	#recruit .entrevista article {
		display: flex; justify-content: space-between; margin: 80px auto; flex-wrap: wrap;
	}
	#recruit .entrevista article:last-of-type { margin: 80px auto 0; }
	#recruit .entrevista article:nth-of-type(even) { flex-direction: row-reverse; }
	#recruit .entrevista article:nth-of-type(even) h3 { width: 570px; margin-left: 650px; }
}
@media screen and (max-width:769px) {
	#recruit .entrevista article { margin: 64px auto; }
	#recruit .entrevista article:last-of-type { margin: 64px auto 0; }
	#recruit .entrevista h3 { margin: 0 0 1.125em; font-size: 1rem; }
	#recruit .entrevista h4 { font-size: 1.25rem; }
	#recruit .entrevista div { width: 100%; }
	#recruit .entrevista .photo { margin: 0 0 36px; }
	#recruit .entrevista a { width: 60%; margin: 40px auto 0; }
	#recruit .entrevista .line { width: 95%; }
}

/* --------------------------------------------------------------------------
   knowledge
-------------------------------------------------------------------------- */

#recruit .knowledge { padding: 130px 0; }
#recruit .knowledge::before {
	content: ''; position: absolute; top: -60px; left: 50%; width: 120px; height: 120px;
	background: #edf0f4; transform: translateX(-50%) rotate(45deg);
}
#recruit .knowledge h2 {
	font-size: 2.375rem; color: #2846a0; font-weight: bold; text-align: center; 
}
#recruit .knowledge h2::before { content: none; }
#recruit .knowledge h3 {
	display: flex; flex-direction: column; justify-content: center; width: 264px;
	padding: 0 0 0.3em 30px; border-left: solid 8px #2846a0; font-size: 1.5rem; color: #2846a0;
}
#recruit .knowledge h3 span {
	display: block; width: 100%; height: 0; padding: 0 0 10%;
	background: 0 100%/100% auto no-repeat url(../img/logo.svg);
	text-indent: 120%; white-space: nowrap; overflow: hidden;
}
#recruit .knowledge .photo { width: 100%; margin: 0 0 20px; }
#recruit .knowledge a {
	position: relative; display: block; width: 220px; margin: 7px 0; background: #2846a0;
	border-radius: 10px; box-shadow: 6px 6px 6px rgba(0,0,0,.1); font-size: 1.125rem;
	line-height: 2.8; color: #fff; text-align: center;
	transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#recruit .knowledge a::after {
	content: ''; position: absolute; top: 50%; right: 16px; width: 20px; height: 20px;
	background: 0 0/300% auto no-repeat url(../img/ico.svg) rgba(0,0,0,.5); border-radius: 20px;
	transform: translateY(-50%) rotate(-90deg);
}
#recruit .knowledge a.oubo {
	width: 528px; margin: 0 auto; font-size: 1.5625rem; line-height: 3.8; font-weight: bold;
}
#recruit .knowledge a.oubo::after {
	width: 28px; height: 28px; transform: translateY(-50%) rotate(-90deg);
}
#recruit .knowledge a:hover {
	opacity: 1; transform: scale(1.05,1.05);
	transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

@media screen and (min-width:770px) {
	#recruit .knowledge article {
		display: flex; justify-content: space-between; margin: 100px auto 120px;
	}
	#recruit .knowledge div {
		display: flex; justify-content: space-between; flex-wrap: wrap; width: 570px;
	}
}
@media screen and (max-width:769px) {
	#recruit .knowledge { padding: 64px 0; }
	#recruit .knowledge::before { top: -30px; width: 60px; height: 60px; }
	#recruit .knowledge h2 { font-size: 1.625rem; }
	#recruit .knowledge article { margin: 0 auto; }
	#recruit .knowledge div { margin: 64px 0 0; }
	#recruit .knowledge h3 {
		width: 70%; height: 3.6rem; font-size: 1.25rem; white-space: nowrap;
	}
	#recruit .knowledge a { width: 60%; margin: 36px auto 0; }
	#recruit .knowledge a.oubo { width: 90%; margin: 72px auto 0; font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   faq
-------------------------------------------------------------------------- */

#recruit .faq { background: #edf0f4; }
#recruit .faq article { width: 940px; }
#recruit .faq button {
	position: relative; width: 100%; margin: 0 0 16px; padding: 30px 86px; background: #fff;
	box-shadow: 0 0 6px rgba(0,0,0,.1); appearance: none; outline: none; border: none;
	font-size: 1.125rem; color: #2846a0; text-align: left; 
}
#recruit .faq button::before {
	content: 'Q.'; position: absolute; top: 50%; left: 30px; font-size: 2.5rem; line-height: 1.0;
	font-family: 'RopaSans'; color: #2846a0; transform: translateY(-50%);
}
#recruit .faq button::after {
	content: ''; position: absolute; top: 50%; right: 30px; width: 24px; height: 24px;
	background: 0 0/300% auto no-repeat url(../img/ico.svg) #2846a0; border-radius: 24px;
	transform: translateY(-50%);
}
#recruit .faq button.open::after { transform: translateY(-50%) rotate(180deg); }
#recruit .faq .answer { position: relative; display: none; padding: 48px 30px 48px 86px; }
#recruit .faq .answer::before {
	content: 'A'; position: absolute; top: 36px; left: 30px; width: 40px; height: 40px;
	background: #2846a0; border-radius: 40px; font-size: 1.625rem; line-height: 40px;
	color: #fff; text-align: center; font-family: 'RopaSans';
}
#recruit .faq .answer a { border-bottom: solid 1px #2846a0; color: #2846a0; }

@media screen and (max-width:769px) {
	#recruit .faq article { width: 90%; }
	#recruit .faq button {
		display: flex; flex-direction: column; justify-content: center; height: 4.25rem;
		margin: 0 0 10px; padding: 0 40px; font-size: 1rem;
	}
	#recruit .faq button::before { left: 12px; font-size: 1.375rem; }
	#recruit .faq button::after { right: 12px; width: 20px; height: 20px; }
	#recruit .faq .answer { padding: 30px 0 30px 40px; }
	#recruit .faq .answer::before {
		top: 28px; left: 8px; width: 24px; height: 24px; font-size: 1rem; line-height: 24px;
	}
}

/* --------------------------------------------------------------------------
   animation
-------------------------------------------------------------------------- */

.di { opacity: 0; transform: translateY(-30px); }
.di.active {
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
	opacity: 1; transform: translateY(0);
}