@charset "utf-8";

#KeyVisual .img::before{
	content: "";
	display: block;
	background: url("../img/img_keyvisual_pc.svg") no-repeat center / contain;
	width: 1210px;
	height: 454px;
	position: absolute;
	top: -36px;
	left: calc(100% / 2 - 605px);
}

#contentsBlock .js-fadein{
	opacity: 1;
	transform: translateY(0);
}

#contentsBlock{
	margin-top: 46px;
}

#recruitingContainer{
	margin-top: 200px;
}

#sec_number .container + .container{
	margin-top: 100px;
}

.hd03{
	text-align: left;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #1F1F1F;
}
.hd03::before{
	content: "";
	display: inline-block;
	width: 56px;
	height: 56px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 10px;
}
	#container1 .hd03::before{
		background-image: url("../img/hd_icon_company.svg");
	}
	#container2 .hd03::before{
		background-image: url("../img/hd_icon_employee.svg");
	}
	#container3 .hd03::before{
		background-image: url("../img/hd_icon_work.svg");
	}

.hd03 + .cardBlock{
	margin-top: 27px;
}

.cardBlock{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 26px;
}

.cardBlock .card{
	background: #E0F0FF;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 25px 5px 35px;
	min-height: 227px;
}
.cardBlock .card .card--inner{
	width: 100%;
}
	.cardBlock .card .ttl{
		font-weight: 400;
		color: #025BB2;
		margin-bottom: 1em;
	}

.card .flexBox{
	display: flex;
	justify-content: center;
	align-items: flex-end;
}


.coutUp {
	font-weight: 700;
	color: #025BB2;
}
	.coutUp .num{
		font-family: "Lato", serif;
		font-size: 10rem;
		font-weight: 900;
		line-height: 0.8;
		margin-right: 6px;
	}

.coutUp span + .num{
	margin-left: 6px;
}

.coutUp .block{
	display: block;
	text-align: right;
}

.card .fnt60{
	font-size: 6rem;
}
.card .fnt30{
	font-size: 3rem;
}
.card .fnt20{
	font-size: 2rem;
}
.card .min{
	font-size: 1.4rem;
	color: #025BB2;
}

#container1 .card2 .card--inner,
#container1 .card3 .card--inner,
#container1 .card4,
#container1 .card5,
#container1 .card6,
#container1 .card7 .ttl,
#container1 .card9,
#container2 .card2 .card--inner,
#container2 .card3 .card--inner{
	position: relative;
}


@media screen and (max-width: 1024px){
	.cardBlock .card{
		min-height: inherit;
	}
	.coutUp .num{
		font-size: clamp(6rem,9vw,10rem);
	}
	.card .fnt60{
		font-size: clamp(1.4rem,5vw,6rem);
	}
	.card .fnt30{
		font-size: clamp(1.8rem,3vw,3rem);
	}
	.card .fnt20{
		font-size: clamp(1.8rem,2vw,2rem);
	}
	.card .min{
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 810px){
	#KeyVisual .img::before{
		background-image: url("../img/img_keyvisual_sp.svg");
		width: 80%;
		height: auto;
		aspect-ratio: 428/295;
		top: 34px;
		left: 50%;
		transform: translateX(calc(-50% + 11px));
	}
	.coutUp .num{
		font-size: 6rem;
	}
	.card .fnt60{
		font-size: 9rem;
	}
	.card .fnt30{
		font-size: clamp(1.8rem,3vw,3rem);
	}
	.card .fnt20{
		font-size: 2.4rem;
	}
	.card .min{
		font-size: 1.4rem;
		margin-top: 1em;
	}
	.cardBlock{
		margin: 0 auto;
		max-width: 430px;
	}
	.cardBlock .card .ttl{
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 767px){
	#KeyVisual .img::before{
		width: 114.5%;
		transform: translateX(calc(-50% + -16px));
	}
	#contentsBlock {
		margin-top: 34px;
	}
	#sec_number .container + .container {
		margin-top: 90px;
	}
	.hd03{
		font-size: 2rem;
	}
	.hd03::before{
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	.hd03 + .cardBlock{
		margin-top: 16px;
	}
	.cardBlock{
		gap: 15px 9px;
	}
	.cardBlock .card{
		padding: 18px 5px;
	}
}
@media screen and (max-width: 374px){
	.coutUp .num{
		font-size: 5rem;
	}
}
/* ------------------------------------------------------------------------ */

/*  会社について

/* ------------------------------------------------------------------------ */
#container1 .cardBlock{
	grid-template-rows: 1fr 146px 1fr;
}
#container1 .card1{
	grid-column: 1/2;
	grid-row: 1 / 2;
}
#container1 .card2{
	grid-column: 2/3;
	grid-row: 1 / 2;
}
#container1 .card3{
	grid-column: 3/4;
	grid-row: 1 / 3;
}

#container1 .row-2{
	grid-column: 1/3;
	grid-row: 2 / 3;
	
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

#container1 .row-2 .card{
	min-height: 146px;
}

#container1 .card1{
	background-image: url("../img/icon_founding.svg");
	background-repeat: no-repeat;
	background-position: center;
}

#container1 .card2 .card--inner::before{
	content: "";
	display: block;
	background: url("../img/icon_sales.svg") no-repeat center / contain;
	margin-right: 10px;
	max-width: 126px;
	width: 42%;
	aspect-ratio: 126/138;
}

#container1 .card3 .card--inner::after{
	content: "";
	display: inline-block;
	background: url("../img/icon_client.svg") no-repeat center / contain;
	margin-top: 13px;
	max-width: 246px;
	width: 100%;
	aspect-ratio: 246/170;
}

#container1 .card4::before{
	content: "";
	display: block;
	background: url("../img/icon_pr.svg") no-repeat center / contain;
	max-width: 76px;
	width: 100%;
	aspect-ratio: 76/53;
	position: absolute;
	top: 0;
	left: -20px;
}

#container1 .card5::before{
	content: "";
	display: block;
	background: url("../img/icon_production.svg") no-repeat center / contain;
	max-width: 68px;
	width: 100%;
	aspect-ratio: 68/65;
	position: absolute;
	top: -17px;
	left: -38px;
}
#container1 .card6::before{
	content: "";
	display: block;
	background: url("../img/icon_smartphone.svg") no-repeat center / contain;
	max-width: 40px;
	width: 100%;
	aspect-ratio: 40/57;
	position: absolute;
	top: 0;
	left: -5px;
}

#container1 .card7 .ttl{
	display: flex;
	justify-content: center;
	align-items: center;
}
#container1 .card7 .ttl::before{
	content: "";
	display: inline-block;
	background: url("../img/icon_handshake.svg") no-repeat center / contain;
	margin-right: 10px;
	max-width: 68px;
	width: 100%;
	aspect-ratio: 68/42;
}

#container1 .card8 .card--inner::before{
	content: "";
	display: block;
	background: url("../img/icon_flag.svg") no-repeat center / contain;
	margin-bottom: -47px;
	max-width: 100px;
	width: 33%;
	aspect-ratio: 1/2;
}
	#container1 .card8 .txtBox{
		width: calc(100% - 100px);
	}
		#container1 .card8 .fnt20{
			padding-right: 1em;
		}

#container1 .card9 .coutUp .img{
	margin-right: 8px;
}
	#container1 .card9 .coutUp .img::before{
		content: "";
		display: block;
		background: url("../img/icon_sns.svg") no-repeat center / contain;
		max-width: 74px;
		width: 100%;
		aspect-ratio: 74/37;
	}

#container1 .card9::before{
	content: "";
	display: inline-block;
	background: url("../img/icon_play.svg") no-repeat center / contain;
	max-width: 60px;
	width: 100%;
	aspect-ratio: 60/49;
	position: absolute;
	top: 42px;
	right: -14px;
}

.card2 .coutUp .num,
.card4 .coutUp .num,
.card5 .coutUp .num,
.card6 .coutUp .num,
.card8 .coutUp .num{
	margin-right: 2px;
}
.card4 .coutUp .num,
.card5 .coutUp .num,
.card6 .coutUp .num{
	margin-left: 3px;
}

@media screen and (max-width: 1024px){
	#container1 .card1{
		background-size: 83%;
	}
	#container1 .card4::before{
		top: -20px;
		left: -5px;
	}
	#container1 .card5::before{
		top: -27px;
		left: -28px;
	}
	#container1 .card6::before{
		top: -20px;
		left: -5px;
	}
	#container1 .card8 .card--inner::before{
		margin-bottom: -32px;
		width: 26%;
	}
	#container1 .card8 .txtBox{
		width: calc(100% - 40%);
	}
	#container1 .card7 .ttl::before{
		max-width: 57px;
		aspect-ratio: 57 / 35;
	}
}
@media screen and (max-width: 810px){
	#container1 .cardBlock{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 180px 180px 1fr 180px 180px;
	}
	
	#container1 .card1 {
		background-size: 93%;
		background-position: 50% 59%;
	}
	#container1 .card1 .fnt30{
		font-size: 2.4rem;
	}
	
	
	#container1 .card2 .card--inner{
		display: block;
	}
	#container1 .card2 .card--inner::before{
		content: none;
	}
	#container1 .card2 .txtBox,
	#container1 .card8 .txtBox{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	#container1 .card2 .txtBox::after{
		content: "";
		display: block;
		background: url("../img/icon_sales.svg") no-repeat center / contain;
		margin-right: 2px;
		max-width: 72px;
		width: 46%;
		aspect-ratio: 126/138;
		order: 2;
	}
	#container1 .card2 .fnt20{
		font-size: 1.8rem;
	}
	#container1 .card2 .txtBox .ttl{
		order: 1;
		width: 100%;
	}
	#container1 .card2 .txtBox p{
		order: 3;
	}
	
	#container1 .card3{
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
		#container1 .card3 .card--inner{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		#container1 .card3 .card--inner::after{
			margin: 0;
			margin-left: 10px;
			max-width: 135px;
			width: 40%;
		}
			#container1 .card3 .ttl{
				width: 100%;
			}
	
	#container1 .row-2{
		grid-column: 1 / 3;
		grid-row: 3 / 4;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(3, 180px);
		gap: 15px 9px;
	}
	
	#container1 .card4::before{
		top: -5px;
		left: 14px;
		max-width: 101px;
	}
	
	#container1 .card5::before{
		top: -20px;
		right: 8px;
		left: auto;
		max-width: 90px;
	}
	
	#container1 .card6::before{
		top: -5px;
		left: 26px;
		max-width: 53px;
	}
	#container1 .card6 .fnt{
		font-size: 2.4rem;
	}
	
	#container1 .card7 .ttl,
	#container1 .card8 .ttl{
		font-size: 1.6rem;
	}
	
	#container1 .card7{
		padding: 18px 0;
	}
		#container1 .card7 .card--inner{
			position: relative;
		}
			#container1 .card7 .card--inner::after{
				content: "";
				display: inline-block;
				background: url("../img/icon_handshake.svg") no-repeat center / contain;
				margin-top: 10px;
				max-width: 57px;
				width: 100%;
				aspect-ratio: 57/35;
			}
				#container1 .card7 .ttl{
					margin-bottom: 1.5em;
				}
				#container1 .card7 .ttl::before{
					content: none;
				}
				#container1 .card7 .fnt30{
					font-size: 2.4rem;
				}
	
	#container1 .card8 .card--inner{
		position: relative;
	}
		#container1 .card8 .card--inner::before{
			background-image: url("../img/icon_flag_sp.svg");
			position: absolute;
			margin: 0;
			bottom: -31px;
			left: 0;
			max-width: 75px;
			width: 100%;
			aspect-ratio: 75/98;
		}
		#container1 .card8 .ttl{
			width: 100%;
		}
		#container1 .card8 .txtBox{
			justify-content: flex-end;
			position: relative;
			z-index: 2;
			width: 100%;
		}
		#container1 .card8 .txtBox .coutUp{
			padding-right: 6px;
		}
		#container1 .card8 .fnt20{
			font-size: 1.8rem;
			padding-right: 0;
		}
	
	#container1 .card9{
		grid-column: 1 / 3;
		grid-row: 5 / 6;
	}
		#container1 .card9::before{
			top: auto;
			right: 24px;
			bottom: -13px;
			max-width: 48px;
		}
		#container1 .card9 .coutUp .num{
			font-size: 9rem;
		}
		#container1 .card9 .fnt30{
			font-size: 2.4rem;
		}
}

@media screen and (max-width: 767px){
	#container1 .card1{
		background-size: 91%;
		background-position: 50% 49%;
	}
	#container1 .card3 .coutUp{
		text-align: left;
		width: 46%;
	}
	#container1 .card3 .card--inner::after{
		margin-left: 10px;
		width: 45%;
	}
	#container1 .card8 .card--inner::before{
		bottom: -38px;
		left: -9px;
	}
}
@media screen and (max-width: 374px){
	#container1 .card1{
		background-size: 93%;
		background-position: 50% 44%;
	}
		#container1 .card1 .coutUp .num{
			font-size: 5rem
		}
	
	#container1 .card2 .txtBox::after{
		max-width: 50px;
	}
	
	#container1 .card3 .card--inner::after{
		width: 36%;
	}
		#container1 .card3 .coutUp{
			width: 49%;
		}
			#container1 .card3 .coutUp .num{
				font-size: 5rem
			}
	
	#container1 .card7 .fnt30{
		font-size: 1.8rem
	}
		#container1 .card7 .coutUp .num{
			font-size: 4.5rem
		}
	
	#container1 .card8 .card--inner::before{
		bottom: -50px;
	}
		#container1 .card8 .coutUp .num{
			font-size: 4.5rem
		}
}


/* ------------------------------------------------------------------------ */

/*  社員について

/* ------------------------------------------------------------------------ */

#container2 .cardBlock{
	grid-template-rows: repeat(2, 1fr);
}
	#container2 .card{
		padding: 25px 5px 15px;
	}

#container2 .card2 .card--inner::after{
	content: "";
	display: inline-block;
	background: url("../img/img_averageage.svg") no-repeat center / contain;
	margin-top: 10px;
	max-width: 260px;
	width: 100%;
	aspect-ratio: 260/155;
}

#container2 .card3 .card--inner::after{
	content: "";
	display: inline-block;
	background: url("../img/icon_beginner.svg") no-repeat center / contain;
	margin-top: 20px;
	max-width: 119px;
	width: 100%;
	aspect-ratio: 119/92;
}

#container2 .card5{
	grid-column: 2 / 4;
}
	#container2 .card5 .flexBox{
		align-items: center;
		gap: 10px;
	}
		#container2 .card5 .flexBox .txt{
			padding-bottom: 32px;
		}
			#container2 .card5 .txt .ttl{
				padding-right: 1em;
			}
			#container2 .card5 .flexBox .img{
				content: "";
				display: block;
				background: url("../img/icon_mtof.svg") no-repeat center / contain;
				max-width: 266px;
				width: 42%;
				aspect-ratio: 266/252;
			}

@media screen and (max-width: 810px){
	#container2 .cardBlock{
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: 338px 338px 180px 338px 180px;
	}
	
	#container2 .card{
		padding: 18px 5px;
	}
	
	#container2 .card .min{
		margin-top: 9px;
	}
	#container2 .card4 .min{
		margin-top: 12px !important;
	}
	
	#container2 .card1 .ttl{
		margin-bottom: 10px;
	}
	
	#container2 .card2 .coutUp .num{
		font-size: 9rem;
	}
	#container2 .card2 .fnt30{
		font-size: 2.4rem;
	}
	
	#container2 .card3 .card--inner{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	#container2 .card3 .ttl{
		margin-bottom: 10px;
		width: 100%;
	}
	#container2 .card3 .ttl br{
		display: none;
	}
	#container2 .card3 .coutUp .num{
		font-size: 10rem;
	}
	#container2 .card3 .fnt30{
		font-size: 3rem;
	}
	#container2 .card3 .card--inner::after{
		margin-top: 0;
		margin-left: 10px;
		max-width: 98px;
		width: 31%;
	}
	
	#container2 .card5{
		grid-column: 1 / 2;
	}
		#container2 .card5 .ttl{
			margin-bottom: 4px;
		}
		#container2 .card5 .txt .ttl{
			padding-right: 0;
			margin-bottom: 3px;
		}
		#container2 .card5 .flexBox .txt{
			padding-bottom: 12px;
		}
		#container2 .card5 .flexBox .img{
			max-width: 113px;
		}
}
@media screen and (max-width: 374px){
	#container2 .card5 .flexBox .img {
		max-width: 65px;
	}
}



/* ------------------------------------------------------------------------ */

/*  働き方について

/* ------------------------------------------------------------------------ */

#container3 .cardBlock{
	grid-template-rows: repeat(1, 1fr);
}
	#container3 .card{
		padding: 25px 5px 15px;
	}
		#container3 .flexBox{
			align-items: center;
		}

#container3 .card1 .flexBox::before{
	content: "";
	display: inline-block;
	background: url("../img/icon_calendar.svg") no-repeat center / contain;
	margin-right: 11px;
	margin-bottom: 24px;
	max-width: 74px;
	width: 100%;
	aspect-ratio: 74/68;
}

#container3 .card2 .flexBox::before{
	content: "";
	display: inline-block;
	background: url("../img/icon_clock.svg") no-repeat center / contain;
	margin-right: 3px;
	margin-left: -4px;
	max-width: 81px;
	width: 100%;
	aspect-ratio: 1/1;
}

#container3 .card3{
	background: #E0F0FF url("../img/icon_employment.svg") no-repeat left bottom / 30%;
}
	#container3 .card3 .coutUp{
		padding-left: 18%;
	}

@media screen and (max-width: 1024px){
	#container3 .card3 .flexBox::before{
		margin-bottom: -5%;
		margin-left: -13.5%;
	}
}
@media screen and (max-width: 810px){
	#container3 .cardBlock{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 180px);
	}
		#container3 .card{
			padding: 18px 5px;
		}
	
	#container3 .card1{
		grid-column: 1 / 3;
	}
		#container3 .card1 .flexBox::before{
			margin-right: 6px;
			max-width: 77px;
		}
		#container3 .card1 .fnt20{
			display: inline-block;
			font-size: 2rem;
			margin-bottom: 18px;
		}
		#container3 .card1 .coutUp .num{
			font-size: 9rem;
		}
		#container3 .card1 .coutUp br{
			display: none;
		}
	
	#container3 .card2{
		position: relative;
	}
		#container3 .card2 .flexBox::before{
			max-width: 56px;
			position: absolute;
			bottom: 8px;
			left: 14px;
		}
		#container3 .card2 .coutUp{
			padding-left: 28px;
		}
	
	#container3 .card3{
		background-size: 39%;
	}
		#container3 .card3 .coutUp{
			text-align: right;
			padding-left: 0;
			padding-right: 9px;
		}
			#container3 .card3 .coutUp .fnt30{
				display: block;
			}
}
@media screen and (max-width: 767px){
	#container3 .card2 .coutUp{
		padding-right: 9px;
		padding-left: 0;
		text-align: right;
		width: 100%;
	}
	#container3 .card2 .coutUp .num{
		margin-right: 6px;
	}
	#container3 .card2 .coutUp .fnt20{
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 374px){
	#container3 .card1 .coutUp .num{
		font-size: 7rem;
	}
	#container3 .card1 .flexBox::before{
		max-width: 61px;
	}
	#container3 .card2 .flexBox::before{
		max-width: 46px;
	}
	#container3 .card2 .coutUp{
		padding-right: 10px;
	}
	#container3 .card2 .coutUp .fnt20{
		display: block;
	}
}