@charset "utf-8";
/*------------------------------------------------------------
	project
------------------------------------------------------------*/
#main .pageTitle {
	margin-bottom: 9.8rem;
}
#main .topText {
	margin-bottom: 10.1rem;
	text-align: center;
}
#main .topText h3 {
	margin-bottom: 3rem;
	position: relative;
	padding-bottom: 2.3rem;
	font-size: 3.6rem;
}
#main .topText h3::after {
	width: 4rem;
	height: 0.4rem;
	position: absolute;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	content: "";
	border-radius: 0.4rem;
	background: linear-gradient(90deg, #A2DB00 0%, #007EC0 50%, #7556F0 100%), #000;
}
#main .topText p {
	font-weight: 400;
	line-height: 2;
}
#main .sec01 .innerBox {
	padding: 10rem 0;
	background-color: rgba(0, 126, 192, 0.10);
}
#main .sec01 .innerBox .imgBox{
	position: relative;
}
#main .sec01 .innerBox .imgBox h3 {
	padding: 0.9rem 0.7rem 0.9rem 0;
	width: 10rem;
	height: 10rem;
	color: #007EC0;
	text-align: center;
	font-size: 1.8rem;
	line-height: 0.95;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
}
#main .sec01 .innerBox .imgBox h3 .num {
	display: block;
	font-size: 7rem;
}
#main .sec01 .innerBox .imgBox .comLink01 a {
	min-height: 7rem;
}
#main .sec01 .innerBox .imgBox .photoBox {
	margin-bottom: 3rem;
	position: relative;
	--width: 5rem;
	--height: 5rem;
	--mask: 2.2rem;
	--mask1: calc(var(--mask) - 0.1rem);
}
#main .sec01 .innerBox .imgBox .photo {
	position: relative;
	overflow: hidden;
	padding-bottom: 46%;
	border-radius: 2rem;
}
#main .sec01 .innerBox .imgBox .maskBox {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 200 / 92;
	border-radius: 0 2rem 0 0;
	overflow: hidden;
	-webkit-mask: url(../img/common/mask08.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
	url(../img/common/mask07.png) no-repeat var(--width) top / var(--mask),
	url(../img/common/mask07.png) no-repeat left var(--height) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
	-moz-mask: url(../img/common/mask08.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
	url(../img/common/mask07.png) no-repeat var(--width) top / var(--mask),
	url(../img/common/mask07.png) no-repeat left var(--height) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
	mask: url(../img/common/mask08.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
	url(../img/common/mask07.png) no-repeat var(--width) top / var(--mask),
	url(../img/common/mask07.png) no-repeat left var(--height) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
}
#main .sec01 .innerBox .imgBox .photo img {
	position: relative;
	z-index: 2;
	transition: 0.3s;
}
#main .sec01 .innerBox .imgBox .photoBox .text {
	position: absolute;
	z-index: 2;
	bottom: 2.1rem;
	left: 0;
}
#main .sec01 .innerBox .imgBox .photoBox .text span {
	padding: 1rem 2rem;
	color: #fff;
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1.57;
	background: -webkit-linear-gradient(#007EC0,#007EC0) repeat-x left bottom 0.7rem  / 100% 5.4rem;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
#main .sec01 .innerBox .imgBox .textBox .text {
	margin-bottom: 3.1rem;
	line-height: 2;
	text-align: justify;
}
#main .sec01 .innerBox01 {
	background-color: #fff;
}
#main .sec01 .innerBox01 .imgBox h3 {
	color: #A2DB00;
}
#main .sec01 .innerBox01 .imgBox .photoBox .text span {
	background: -webkit-linear-gradient(#A2DB00,#A2DB00) repeat-x left bottom 0.7rem  / 100% 5.4rem;
}
#main .sec01 .innerBox02 {
	background-color: rgba(117, 86, 240, 0.10);}
#main .sec01 .innerBox02 .imgBox h3 {
	color: #7556F0;
}
#main .sec01 .innerBox02 .imgBox .photoBox .text span {
	background: -webkit-linear-gradient(#7556F0,#7556F0) repeat-x left bottom 0.7rem  / 100% 5.4rem;
}
#main .comRecruitBox .photoList {
	justify-content: center;
}
@media all and (min-width: 897px) {
	#main .sec01 .innerBox .imgBox a:hover .photo img {
		transform: scale(1.05);
	}
}
@media all and (max-width: 896px) {
	#main .pageTitle {
		margin-bottom: 5rem;
	}
	#main .topText {
		margin: 0 2rem 5rem;
		text-align: left;
	}
	#main .topText h3 {
		margin-bottom: 1.9rem;
		padding-bottom: 1.5rem;
		font-size: 2.4rem;
	}
	#main .topText h3::after {
		width: 4rem;
		height: 0.4rem;
		left: 0;
		transform: translateX(0);
	}
	#main .sec01 .innerBox {
		padding: 5rem 0;
	}
	#main .sec01 .innerBox .imgBox h3 {
		padding: 0.3rem 0;
		width: 3.5rem;
		height: 3.5rem;
		font-size: 0.7rem;
		line-height: 0.93;
	}
	#main .sec01 .innerBox .imgBox h3 .num {
		font-size: 2.6rem;
	}
	#main .sec01 .innerBox .imgBox .photoBox {
		margin-bottom: 2rem;
		--mask: 1.2rem;
	}
	#main .sec01 .innerBox .imgBox .photo {
		border-radius: 1rem;
	}
	#main .sec01 .innerBox .imgBox .maskBox {
		aspect-ratio: 700 / 322;
		border-radius: 0 1rem 0 0;
		-webkit-mask: url(../img/common/mask01_sp.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
		-moz-mask: url(../img/common/mask01_sp.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
		mask: url(../img/common/mask01.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
	}
	#main .sec01 .innerBox .imgBox .photoBox .text {
		bottom: 0.5rem;
	}
	#main .sec01 .innerBox .imgBox .photoBox .text span {
		padding: 0.5rem 1rem;
		font-size: 1.4rem;
		line-height: 1.7;
		background-position: left bottom 0.3rem;
		background-size: 100% 2.4rem;
	}
	#main .sec01 .innerBox .imgBox .textBox .text {
		margin-bottom: 2.1rem;
	}
	#main .sec01 .innerBox .imgBox .comLink01 a {
		padding: 0.5rem 2rem;
		min-height: 5rem;
	}
}