@charset "UTF-8";

/*================================================
 *  高校生の方へ（students）
 ================================================*/

/*******共通*******/
section .main_box {
	max-width: 160rem;
	margin: 0 auto;
	width: 100%;
}
@media screen and (min-width: 800.1px) {
	section .main_box {
		display: grid; 
		grid-template-columns: minmax(0, 1fr) calc(50% - 20rem); 
		grid-template-rows: auto 1fr; 
		gap: 0 13rem; 
		grid-template-areas: "title bg" "txt bg"; 
	}
}


section .main_box h3 {
	grid-area: title;
	padding: 0 0 8rem 13rem;
	position: relative;
	z-index: 10;
}
section .main_box h3 > span {
	white-space: nowrap;
}

section .main_box .img_bg {
	grid-area: bg;
	width: 100%;
	margin-top: 13rem;
}
@media screen and (min-width: 800.1px) {
	section .main_box .img_bg .inr {
		width: calc(50vw - 20rem);
	}
}
section .main_box .img_bg img {
	width: 100%;
}


section .main_box .txt_box {
	grid-area: txt;
	margin-left: auto;
	width: 55rem;
}
section .main_box .txt_box p + p {
	margin-top: 1em;
}



/*******クルマの仕事に興味がある高校生の方へ*******/
section#intro_area {
	margin-top: 10rem;
}
section#intro_area h3 {
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 0.8em;
}

/*******エンジニアを目指す*******/
section#engineer_area {
	margin-top: 10rem;
}

section#engineer_area .step_box {
	margin: 3rem auto 0;
	width: 94rem;
}

section#engineer_area .step_box .notes {
	padding: 3rem 3rem 0;
}


/*******営業スタッフ・レセプションスタッフを目指す*******/
section#salesrecep_area {
	margin-top: 15rem;
}






/*================================================================================================
 *  スマートフォン向けデザイン
 ================================================================================================*/
@media screen and (max-width:800px) {


/*******共通*******/
section .main_box {
	max-width: inherit;
}

section .main_box h3 {
	padding: 0!important;
	margin-left: -3vw;
}
section .main_box h3 > span {
	font-size: 13.8vw;
}

section .main_box .img_bg {
	width: 92.5vw;
	margin: -5vw 0 0;
}


section .main_box .txt_box {
	width: 100%;
	margin: 0;
	padding: 8vw 0 0;
}




/*******クルマの仕事に興味がある高校生の方へ*******/
section#intro_area {
	margin-top: 13vw;
}
section#intro_area h3 {
	font-size: 5.6vw;
}



/*******エンジニアを目指す*******/
section#engineer_area {
	margin-top: 10vw;
}

section#engineer_area .step_box {
	margin-top: 6vw;
}

section#engineer_area .step_box .notes {
	padding: 8vw 0 0;
}


/*******営業スタッフ・レセプションスタッフを目指す*******/
section#salesrecep_area {
	margin-top: 15vw;
}








	
}