@charset "UTF-8";
/* new_graduate.css */

.rec_mv {
	position: relative;
	z-index: 10;
}
.rec_mv h1 + p {
	color: #03008b;
}
.rec_mv h1 + p:before {
	background-image: url(../../img/common/mv_maru_star_blue.svg);
}


/* ===== ながれぼし アニメーション ===== */
main {
	position: relative;
}
.stars {
	z-index: 1;
	clip-path: inset(0 round 0);
	pointer-events: none !important;
}

/* ===== 最初のテキスト アニメーション ===== */
#sec_first .js-target.is-active h2,
#sec_first .js-target.is-active h2 + p {
	transform: translateY(.75vw);
	opacity: 0;
	animation: fadeup .5s ease forwards;
}
#sec_first .js-target.is-active h2 {
	animation-delay: .3s;
}
#sec_first .js-target.is-active h2 + p {
	animation-delay: 1s;
}

@keyframes fadeup {
  0% {
    transform: translateY(.75vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
	opacity: 1;
  }
}



/* ===== gradation ===== */
.bg_grad {
	position: relative;
	z-index: 0;
  	background-size: 200% 200%;
  	animation: newGradAnim 5s ease infinite;
	overflow: hidden;
}
@keyframes newGradAnim { 
  0%   { background-position:60% 0%   }
  50%  { background-position:50% 100% }
  100% { background-position:50% 0%   }
}

/* 背景装飾 線 */
.bg_grad:before {
	content: "";
	width:  100%;
	height: 100%;
	display: block;
	position: absolute;
	background: linear-gradient(
		to right,
		transparent calc(50% - 0.5px),
		rgba(255,255,255,.5) calc(50% - 0.5px),
		rgba(255,255,255,.5) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
	z-index: -1;
}
.grad_bg_border {
	width: 100%;
	max-width: 1280px;
	height: 5px;
	display: flex;
	flex-direction: column;
	margin-left:  auto;
	margin-right: auto;
	padding: 0 40px;
}
.grad_bg_border:before,
.grad_bg_border:after {
	content: "";
	width:  1px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	pointer-events: none;
	z-index: 5;
	background-color: rgba(255,255,255,1);
}
.grad_bg_border:before {
	align-self: flex-start;
}
.grad_bg_border:after  {
	align-self: flex-end;
}
@media screen and (max-width:768px) {
	#bottom_reclink .grad_bg_border {
		max-width: 640px;
		padding-left:  20px;
		padding-right: 20px;
	}
} 





/* ===== はじめに ===== */
#sec_first .inner_wrap {
	position: relative;
	z-index: 5;
}
#sec_first h2 {
	font-size: min(3.4vw,34px);
	font-weight: bold;
	color: #03008b;
	text-align: center;
	margin-bottom: 1em;
}
#sec_first h2 + p {
	font-weight: 500;
	line-height: 2;
	letter-spacing: .15em;
	text-align: center;
	color: #03008b;
}
.first_img {
	width: 90%;
	max-width: 820px;
	display: block;
	margin: auto;
}

/* ===== インターンシップ ===== */
.white_box,
.intern_card {
	padding: min(5vw,50px);
	background-color: #fff;
}
.intern_card {
	position: relative;
	box-shadow: 0px 0px 4.5px rgba(3,0,139,.3);
	z-index: 5;
}
.intern_flex {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}
.intern_flex .img_wrap {
	width: 45%;
	padding-right: 3%;
}
.intern_flex .cont_wrap {
	width: 55%;
}
/* テキスト */
.intern_card h3 {
	font-size: min(2.8vw,32px);
	line-height: 1.3;
	margin-bottom: .5em;
	color: #03008b;
}
.intern_info {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
}
.intern_info li {
	width: fit-content;
	font-weight: 500;
	line-height: 1;
	display: inline-block;
	flex-wrap: nowrap;
	align-items: center;
	justify-content : space-between;
	padding: .5em 1em;
	color: #03008b;
	border: 1.5px solid #03008b;
	border-radius: 50px;
	background-color: #fff;
}
.intern_info li:not(:last-of-type) {
	margin-right: .5em;
}
.intern_info li.tag_blue {
	color: #fff;
	background-color: #03008b;
}
.intern_card h4 {
	font-size: 20px;
	font-size: clamp(18px,2vw,20px);
	color: #03008b;
}
.intern_card .cont {
	line-height: 2;
	color: #000;
}
/* ご希望の方はお問い合わせより申し込みください */
.intern_card p.gokibou {
	font-weight: 500;
	text-align: center;
	margin-bottom: 1.5em;
	color: #000;
}


/* ===== 求める人材像 ===== */
.ideal_flex {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
}
.ideal_card {
	width: calc(100%/3 - 2%);
}
.ideal_head {
	font-size: clamp(14px,1.8vw,20px);
	line-height: 1.3;
	letter-spacing: .075em;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 1em 0 .75em;
	color: #03008b;
}
.ideal_head:before {
	content: "";
	width:  1.25em;
	height: 1.25em;
	min-width: 1.25em;
	display: block;
	background-image: url(../../img/new_graduate/sikaku01.svg);
	margin-right: .5em;
	transform: translateY(.1em);
}
.ideal_head.num02:before {
	background-image: url(../../img/new_graduate/sikaku02.svg);
}
.ideal_head.num03:before {
		background-image: url(../../img/new_graduate/sikaku03.svg);
}


.ideal_card .cont {
	line-height: 2;
	color: #000;
}


/* ===== キャリアプラン ===== */
.head_flex {
	width: 100%;
}
.carrier_img {
	width: 100%;
	display: block;
	margin: 0 auto;
}
.colorful_list li + li {
	margin-top: min(3vw,30px);
}

.colorful_list .carrier_purple { background-color:#f0f0f8; }
.colorful_list .carrier_blue   { background-color:#e5eff8; }
.colorful_list .carrier_yellow { background-color:#f8f8e4; }
.colorful_list .carrier_red    { background-color:#f9e9ec; }

.carrier_flex {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
}
.carrier_flex .img_wrap {
	width: 180px;
	max-width: 16vw;
	min-width: 80px;
}
.carrier_flex .img_wrap img {
	width:  100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.carrier_flex .cont_wrap {
	width: calc(100% - clamp(80px,16vw,180px));
}

/* text */
.colorful_list li .cont_wrap {
	padding: 30px;
	padding-left: min(2vw,20px);
}
h3.head_white {
	width: 100%;
	font-size: clamp(16px,1.8vw,18px);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	margin-bottom: .75em;
	padding: .5em;
	color: #03008b;
	background-color: #fff;
}
h3.head_white span {
	font-size: clamp(12px,1.4vw,14px);
	color: #4d4d4d;
	margin-left: 1em;
}
h3.head_white + p {
	line-height: 2;
	color: #000;
}

.carrier_box {
	padding: 0 30px 30px;
}
.carrier_box .bg_white {
	padding: 30px 40px;
	padding: min(3vw,30px) min(4vw,40px);
}


/* ===== 選考フロー ===== */
.senkou_flow {
	width: fit-content;
	margin-left:  auto;
	margin-right: auto;
}
.senkou_flow li {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
}
.senkou_flow li:not(:last-of-type) {
	padding-bottom: min(7vw,70px);
}
.senkou_flow li:not(:last-of-type):after {
	content: "";
	width: 1px;
	height: 100%;
	display: block;
	position: absolute;
	top:  0;
	left: calc(clamp(40px,6vw,60px)/2);
	background-color: #03008b;
	z-index: -1;
}


.senkou_flow li:before {
	content: "";
	width:  clamp(40px,6vw,60px);
	height: clamp(40px,6vw,60px);
	min-width: clamp(40px,6vw,60px);
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 30px;
}
.flow01:before { background-image:url(../../img/new_graduate/sikaku_flow01.svg); }
.flow02:before { background-image:url(../../img/new_graduate/sikaku_flow02.svg); }
.flow03:before { background-image:url(../../img/new_graduate/sikaku_flow03.svg); }
.flow04:before { background-image:url(../../img/new_graduate/sikaku_flow04.svg); }
.flow05:before { background-image:url(../../img/new_graduate/sikaku_flow05.svg); }

.senkou_flow dl {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	margin-top: 10px;
}
.senkou_flow dt {
	min-width: fit-content;
	font-size: min(2.4vw,24px);
	font-weight: 500;
	line-height: 1.3;
	margin-right: .75em;
	color: #03008b;
}
.senkou_flow dd,
.senkou_flow dd a {
	color: #03008b;	
}
.senkou_flow dd {
	margin-top: .25em;
}
.senkou_flow dd a {
	text-decoration: underline;
	padding-left:  .25em;
	padding-right: .25em;
}


/* ===== 募集要項（背景） ===== */
.bosyuu_bg_head {
	width: 100%;
	height: 300px;
	display: inline-block;
	position: relative;
	background-image: url(../../img/new_graduate/bosyuu_head.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	z-index: 10;
}
.bosyuu_bg_head .wrap,
.bosyuu_bg_head .middle_wrap {
	height: 100%;
}
.bosyuu_bg_head .middle_wrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.bosyuu_bg_head * {
	color: #fff !important;
}
.bosyuu_bg_head h2 {
	text-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
.bosyuu_bg_head small {
	margin-left:  0;
	margin-right: auto;
}


/* ===== 募集要項（コンテンツ） ===== */
.z_top {
	position: relative;
	z-index: 10;
}
/* 中途採用の募集はこちらから */
#sec_bosyuu .tyuuto {
	width: 100%;
	font-weight: 500;
	text-align: right;
	text-decoration: underline;
	display: inline-block;
	color: #000;
}

/* タブボタン */
.tabbtn_wrap {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
}
.tabbtn_wrap li {
	width: calc(100%/4);
	margin-left: -1px;
}
.tabbtn_wrap a {
	width: 100%;
	font-weight: 500;
	text-align: center;
	display: inline-block;
	padding: .25em 1em;
	color: #03008b;
	border: 1px solid #03008b;
}

/* タブボタン アクティブ */
.tabbtn_wrap li.uk-active a {
	color: #fff;
	background-color: #03008b;
}





@media screen and (max-width:768px) {
	/* ===== gradation ===== */
	.grad_bg_border {
		max-width: 640px;
		padding-left:  20px;
		padding-right: 20px;
	}

	/* ===== はじめに ===== */
	#sec_first .inner_wrap {
		width: 100%;
	}
	#sec_first h2 {
		font-size: 24px;
		font-size: min(6.4vw,24px);
	}
	#sec_first h2 + p {
		font-size: 12px;
		font-size: min(3.2vw,12px);
	}
	.first_img {
		width: 100%;
		max-width: 450px;
	}
	/* ----- インターンシップ ----- */
	.intern_card {
		padding: clamp(15px,4vw,25px);
	}
	.intern_flex {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.intern_flex .img_wrap,
	.intern_flex .cont_wrap {
		width: 100%;
		padding-right: 0;
	}
	.intern_card h3 {
		font-size: 24px;
		text-align: center;
		margin-top:    .75em;
		margin-bottom: .75em;
	}
	.intern_card h4 {
		font-size: 16px;
	}


	/* ===== 求める人材像 ===== */
	.ideal_flex {
		width: 100%;
		flex-wrap: wrap;
	}
	.ideal_card {
		width: 100%;
	}
	.ideal_card + .ideal_card {
		margin-top: clamp(25px,6.667vw,30px);
	}
	.ideal_head {
		font-size: 16px;
		justify-content: center;
		margin-top:    1.25em;
		margin-bottom: 1em;
	}
	.ideal_card .cont {
		width: fit-content;
		margin-left:  auto;
		margin-right: auto;
	}


	/* ===== キャリア ===== */
	/* ▼ 背景装飾（ボーダー） */
	.bg_lightblue {
		position: relative;
	}
	.bg_lightblue:before {
		content: "";
		width:  100%;
		height: 100%;
		position: absolute;
		top:  0;
		left: 0;
		background: linear-gradient(
			to right,
			transparent calc(50% - 0.5px),
			rgba(0,94,181,.15) calc(50% - 0.5px),
			rgba(0,94,181,.15) calc(50% + 0.5px),
			transparent calc(50% + 0.5px)
		);
		z-index: -1;
	}
	/* ▲ 背景装飾（ボーダー） */

	.carrier_flex {
		flex-wrap: wrap;
	}
	.carrier_flex .img_wrap {
		width: 50%;
		height: 36vw;
		max-width: inherit;
		min-width: inherit;
		max-height:  180px;
		min-height: 135px;
		margin-left:  auto;
		margin-right: auto;
		padding-top:    clamp(20px,5.333vw,30px);
		padding-bottom: clamp(15px,4vw,25px);
	}
	.colorful_list li .cont_wrap,
	.carrier_box {
		width: 100%;
		padding: 0 clamp(15px,4vw,25px) clamp(15px,4vw,25px);
	}
	h3.head_white {
		font-size: min(3.733vw,14px);
	}
	h3.head_white span {
		font-size: min(3.2vw,12px);
		display: inline-block;
	}
	.carrier_box .bg_white {
		padding: 0;
	}


	/* ===== Flow ===== */
	#sec_flow .head_flex {
		width: 100%;
		max-width: 410px;
		flex-direction: column;
	}
	.senkou_flow li:not(:last-of-type) {
		padding-bottom: 30px;
	}
	.senkou_flow dl {
		margin-top: 5px;
	}
	.senkou_flow dt {
		width: 100%;
		font-size: 18px;
		margin-right: 0;
		margin-bottom: .5em;
	}
	.senkou_flow dd  {
		margin-top: 0;
	}
	.senkou_flow dd,
	.senkou_flow dd a {
		font-size: 12px;
	}

	
	/* ===== 募集要項 ===== */
	/* 背景画像 */
	.bosyuu_bg_head {
		height: 53.333vw;
		max-height: 250px;
		min-height: 200px;
	}
	.bosyuu_bg_head .middle_wrap {
		align-items: flex-end;
	}
	.bosyuu_bg_head h2 {
		padding-bottom: clamp(30px,8vw,40px);
	}

	/* 中途採用はこちら */
	#sec_bosyuu .tyuuto {
		text-align: center;
	}

	/* タブリンクボタン */
	.tabbtn_wrap {
		flex-wrap: wrap;
	}
	.tabbtn_wrap li {
		width: calc(100%/2);
		margin-top: -1px;
	}
	.tabbtn_wrap a {
		font-size: 14px;
	}

	/* 募集要項テーブル */
	.table_bosyuu dl > div:last-of-type {
		padding-bottom: 0;
		border-bottom: none;
	}
}