@charset "UTF-8";

/*================================================
 *  ダイバーシティ（diversity）
 ================================================*/

/*******共通*******/
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: 6rem 0 7rem 13rem;
	position: relative;
	z-index: 10;
}
section .main_box h3 > span {
	white-space: nowrap;
}

section .main_box .img_bg {
	grid-area: bg;
	width: 100%;
}
@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 h4 {
	font-size: 3.6rem;
	font-weight: bold;
	line-height: 1.75;
	letter-spacing: 0.04em;
	margin: 0 -1em 0.7em 0;
	text-align: left;
}
section .main_box .txt_box p + p {
	margin-top: 1em;
}




/*******ダイバーシティ＆インクルージョンへの取り組み*******/
section#di_area {
	margin-top: 10rem;
}

section#di_area .img_box {
	margin-top: 6rem;
}


section#di_area .di_list {
	margin-top: 6rem;
}
section#di_area .di_list li {
	border: 2px solid var(--black);
	letter-spacing: 0.04em;
	padding: 5rem 3.9rem;
	width: calc((100% - 8rem) / 3);
}

@media screen and (min-width: 800.1px) {
	section#di_area .di_list li:nth-child(n+4) {
		margin-top: 4rem;
	}
	section#di_area .di_list li:not(:nth-child(3n+1)) {
		margin-left: 4rem;
	}
	section#di_area .di_list li:nth-child(3n+2) {
		animation-delay: 0.3s;
	}
	section#di_area .di_list li:nth-child(3n) {
		animation-delay: 0.6s;
	}
}

section#di_area .di_list li h5 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-align: center;
	margin: 0 -2em 0.7em;
}





/*================================================================================================
 *  スマートフォン向けデザイン
 ================================================================================================*/
@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 > em {
	font-size: 3.7vw;
	margin-right: -1em;
}
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 .main_box .txt_box h4 {
	font-size: 5.6vw;
}




/*******ダイバーシティ＆インクルージョンへの取り組み*******/
section#di_area {
	margin-top: 10vw;
}

section#di_area .img_box {
	margin-top: 10vw;
}


section#di_area .di_list {
	margin-top: 10vw;
}
section#di_area .di_list li {
	padding: 10vw 13vw;
	width: 100%;
	margin: 0;
}
section#di_area .di_list li + li {
	margin-top: 5vw;
}
section#di_area .di_list li h5 {
	font-size: 5.6vw;
}





	
}