@charset "utf-8";


#esg1-1 {height:510px; background:url('/images/sub/esg1-1-bg.png') no-repeat left top; background-size:50% auto;}
#esg1-1 .in-box {width:800px; height:100%; background:#FFF;  padding-left:80px; margin-left:auto; 
					display:flex; flex-direction: column;  justify-content:center;}

@media all and (max-width:1780px) {
	#esg1-1 {background-size:auto 100%}
}
@media all and (max-width:1780px) {
	#esg1-1 .in-box {width:50% }
}
@media all and (max-width:1280px) {
	#esg1-1 {height:580px; background-position:-65% top}
	#esg1-1 .in-box { padding-left:50px; }
}
@media all and (max-width:1024px) {
	#esg1-1 {height:auto; background-position:center top; background-size:100% auto;}
	#esg1-1 .in-box {padding-top:63vw; padding-left:0; width:100%; background-color:transparent}
}



#numList {width:100%}
#numList li {margin-bottom:10px; background:#f0f4fa; padding:1.5em 0.5em; position:relative; counter-increment: number;}
#numList li:before {content: counter(number, decimal-leading-zero); color:#0d3f9e ; font-family:'Jost'; 
						font-weight:600; position:absolute; left:1.5em; top:1.4em}
#numList li p {font-size:1.8rem; padding-left:3em; color:#111; line-height:1.4em}

@media all and (max-width:976px) {
	#numList li {  padding:1.0em 0.5em; }
	#numList li:before { left:1em; top:0.9em}
	#numList li p { padding-left:2.3em;}
}
@media all and (max-width:767px) {
	#numList li p {font-size:1.7rem; }
}



#esg1-1-2 {text-align:center}
#esg1-1-2 .esg1-2-img {width:100%; max-width:690px}



#esg1-1-3 .in-box {display:flex;}
#esg1-1-3 .in-box + .in-box {margin-top:80px;}
#esg1-1-3 .in-box:last-child {margin-top:30px;}

#esg1-1-3 .stit1 {width:300px;}
#esg1-1-3 .cont {width:calc(100% - 300px);}
#esg1-1-3 .bg {padding:50px; background:#f0f4fa}

#esg1-1-3 .cont h4 {padding:1.8em 0.5em; border-radius:100px; box-shadow:0 0 20px #e6ebf3; text-align:Center }
#esg1-1-3 .cont h4 p { font-size:2.6rem; color:#111;  position:relative}
#esg1-1-3 .cont h4 p .point {color:#0d3f9e}

#esg1-1-3 .dl-flex {display:flex; gap:30px;} 
#esg1-1-3 .dl-flex dl {width:calc((100% - 30px *2)/3);}
#esg1-1-3 .dl-flex dl dt {font-size:2.4rem; font-weight:600; text-align:center; color:#FFF; padding:1.0em 0.3em;}
#esg1-1-3 .dl-flex dl dt .eng {font-family:'Jost'; font-size:1.7rem; opacity:.5; font-weight:500; padding-top:0.3em}
#esg1-1-3 .dl-flex dl dt.bg1 {background:#d6004a}
#esg1-1-3 .dl-flex dl dt.bg2 {background:#023b92}
#esg1-1-3 .dl-flex dl dt.bg3 {background:#74b845}
#esg1-1-3 .dl-flex dl dd {font-size:1.8rem; color:#111; padding:30px; background:#f9f9f9}
#esg1-1-3 .dl-flex dl .arrow {padding-top:30px}
#esg1-1-3 .dl-flex dl.mo dt {display:none}
#esg1-1-3 .dl-flex dl.mo:nth-child(1) dd {border-top:2px solid #d6004a}
#esg1-1-3 .dl-flex dl.mo:nth-child(2) dd {border-top:2px solid #023b92}
#esg1-1-3 .dl-flex dl.mo:nth-child(3) dd {border-top:2px solid #74b845}

@media all and (max-width:1280px) {
	#esg1-1-3 .stit1 {width:200px;}
	#esg1-1-3 .cont {width:calc(100% - 200px);}
	#esg1-1-3 .dl-flex {gap:20px;} 
	#esg1-1-3 .dl-flex dl {width:calc((100% - 20px *2)/3);}
}
@media all and (max-width:976px) {
	#esg1-1-3 .in-box {flex-wrap:wrap}
	#esg1-1-3 .stit1 {width:100%; text-align:center}
	#esg1-1-3 .cont {width:100%}
	#esg1-1-3 .dl-flex dl dd {padding:20px;}
	#esg1-1-3 .dl-flex dl .arrow {display:none}
	#esg1-1-3 .dl-flex dl.mo dt {display:block}
	#esg1-1-3 .dl-flex dl.mo:nth-child(1) dd,
	#esg1-1-3 .dl-flex dl.mo:nth-child(2) dd,
	#esg1-1-3 .dl-flex dl.mo:nth-child(3) dd {border-top:0}

	#esg1-1-3 .bg {padding:30px; }
	#esg1-1-3 .in-box + .in-box {margin-top:50px;}
	#esg1-1-3 .in-box:last-child {margin-top:50px;}

	#esg1-1-3 .dl-flex {gap:10px;} 
	#esg1-1-3 .dl-flex dl {width:calc((100% - 10px *2)/3);}

}
@media all and (max-width:480px) {
	#esg1-1-3 .cont h4 p { font-size:2.4rem;}
	#esg1-1-3 .dl-flex dl dt {font-size:2.2rem; }
	#esg1-1-3 .dl-flex dl dd {font-size:1.7rem;}

	#esg1-1-3 .dl-flex {flex-wrap:wrap; gap:10px 0;} 
	#esg1-1-3 .dl-flex dl {width:100%;}
}






#dotList {width:100%}
#dotList li {position:relative;}
#dotList li + li {margin-top:0.5em}
#dotList li:before {content: ''; width:3px; height:3px; background:#111; 
						font-weight:600; position:absolute; left:0; top:0.7em}
#dotList li p {font-size:1.8rem; padding-left:13px; color:#111; line-height:1.4em}

@media all and (max-width:767px) {
	#dotList li p {font-size:1.7rem;}
}





#esg1-2 .eng {padding-top:0.3em; font-size:0.8em; font-family:'Jost'; opacity:.5}
#esg1-2 .img {width:100%; max-width:1600px}


#esg1-2-2 ul {display:flex; flex-wrap:wrap; gap:20px}
#esg1-2-2 ul li { width:calc((100% - 20px *1) /2); background:#FFF; padding:20px 50px;
					display:flex; justify-content:space-between; align-items: center;
					transition: all 0.1s ease-out; border:1px solid #e9e9e9}
#esg1-2-2 ul li:hover {background:#f9f9f9; }
#esg1-2-2 ul li .t1 {font-size:2.0rem; color:#111; font-weight:500}
#esg1-2-2 ul li .btn {border-radius:60px; padding:1em 2em; background:#f0f4fa; font-size:1.8rem; color:#1a2f56}
#esg1-2-2 ul li .btn i {padding-left:10px}
#esg1-2-2 ul li .btn:hover {background:#0d3f9e; color:#FFF }

@media all and (max-width:1280px) {
	#esg1-2-2 ul {gap:10px}
	#esg1-2-2 ul li { width:calc((100% - 10px *1) /2);  padding:20px 30px;}
}
@media all and (max-width:1024px) {
	#esg1-2-2 ul {}
	#esg1-2-2 ul li {  padding:15px 20px;}
	#esg1-2-2 ul li .btn {padding:1em 1.5em;}
}
@media all and (max-width:890px) {
	#esg1-2-2 ul {gap:10px 0}
	#esg1-2-2 ul li {width:100%;  padding:20px 30px;}
}
@media all and (max-width:480px) {
	#esg1-2-2 ul li {padding:10px 20px;}
	#esg1-2-2 ul li .t1 {font-size:1.8rem; }
	#esg1-2-2 ul li .btn { font-size:1.7rem; }
}




#esg2New {width:100%; max-width:1400px; margin:0 auto}
#esg2New .cont {display:flex; gap: 0 30px}
#esg2New .cont .in-box {width:calc((100% - 30px *2)/3); text-align:center; background:#f9f9f9; position:relative}
#esg2New .cont .in-box .img {width:100%}
#esg2New .cont .in-box h3 {padding:1em 0.3em; font-size:2.4rem; text-align:center; color:#FFF;
									font-weight:600}
#esg2New .cont .in-box ul { padding:50px; padding-top:30px }
#esg2New .cont .in-box ul li {text-align:center; border-bottom:1px dashed #e9e9e9}
#esg2New .cont .in-box ul li:last-child {border-bottom:0}
#esg2New .cont .in-box ul li p {font-size:1.8rem; padding:0.7em; 0; color:#111}

#esg2New .cont .in-box .btn { width:180px; border-radius:60px; padding:0 1em; line-height:54px; background:#FFF; font-size:1.8rem; color:#111;
									border:1px solid #e9e9e9; position:absolute; left:50%; bottom:-27px; transform:translateX(-50%)}
#esg2New .cont .in-box .btn i {padding-left:10px}
#esg2New .cont .in-box .btn:hover {background:#111; color:#FFF; border:1px solid #111 }

#esg2New .cont .in-box:nth-child(1) h3 {background:#d6004a}
#esg2New .cont .in-box:nth-child(2) h3 {background:#023b92}
#esg2New .cont .in-box:nth-child(3) h3 {background:#74b845}

@media all and (max-width:1280px) {
	#esg2New .cont { gap: 0 20px}
	#esg2New .cont .in-box {width:calc((100% - 20px *2)/3);}
	#esg2New .cont .in-box ul { padding:30px; padding-bottom:50px}
}
@media all and (max-width:1024px) {
	#esg2New .cont { gap: 0 10px}
	#esg2New .cont .in-box {width:calc((100% - 10px *2)/3);}
	#esg2New .cont .in-box ul { padding:20px; padding-bottom:50px}
}
@media all and (max-width:840px) {
	#esg2New .cont { gap:10px; flex-wrap:wrap;; justify-content:center}
	#esg2New .cont .in-box {width:calc((100% - 10px *1)/2); margin-bottom:30px}
}
@media all and (max-width:580px) {
	#esg2New .cont { gap:10px 0;}
	#esg2New .cont .in-box {width:100%; margin-bottom:30px}
	#esg2New .cont .in-box .btn { line-height:46px;}
}
@media all and (max-width:480px) {
	#esg2New .cont .in-box h3 {font-size:2.2rem; }
	#esg2New .cont .in-box ul li p {font-size:1.7rem;}
	#esg2New .cont .in-box .btn { width:160px; font-size:1.7rem;}
}






#esg3-1 {background:url('/images/sub/esg3-bg.png') no-repeat center top; background-size:cover; }
#esg3-1 #tit {color:#FFF; padding:100px 50px; text-align:center}
#esg3-1 h3 {color:#FFF}

#esg3-1 .btn { margin-top:30px; border-radius:60px; padding:1em 2em; font-size:1.8rem; color:#FFF;
				  font-weight:500; background-color:#111; display:inline-block}
#esg3-1 .btn i {padding-left:20px}
#esg3-1 .btn:hover {background:#004ddf; color:#FFF;  }


#esg3-1 #cont {display:flex; width:100%; background:rgba(0,0,0,0.3); border-top:1px solid rgba(255,255,255,0.2);
					backdrop-filter: blur(5px);}
#esg3-1 #cont dl {width:33.33%; padding:50px; border-left:1px solid rgba(255,255,255,0.2); color:#FFF;
						position:relative}
#esg3-1 #cont dl .icon {width:50px; line-height:50px; border-radius:50%; position:absolute; right:20px; top:20px;
							background:#004ddf; text-align:center; font-size:2.0rem; }
#esg3-1 #cont dl dt,
#esg3-1 #cont dl dt a {color:#FFF ; font-size:2.4rem; font-weight:600; line-height:1.2em}
#esg3-1 #cont dl dt .st1 {font-size:0.8em}
#esg3-1 #cont dl dd {font-size:1.8rem; margin-bottom:0.5em}

@media all and (max-width:1600px) {
	#esg3-1 #cont dl { padding:30px;}
	#esg3-1 #cont dl .icon {width:40px; line-height:40px;  font-size:1.8rem; }
	#esg3-1 #cont dl dt,
	#esg3-1 #cont dl dt a {color:#FFF ; font-size:2.2rem;}
}
@media all and (max-width:1280px) {
	#esg3-1 #cont dl { padding:30px 20px;}
	#esg3-1 #cont dl .icon {right:20px; top:10px }
	#esg3-1 #cont dl dt,
	#esg3-1 #cont dl dt a {color:#FFF ; font-size:2.2rem;}
	#esg3-1 #cont dl:nth-child(1) {width:25%;}
	#esg3-1 #cont dl:nth-child(2) {width:35%;}
	#esg3-1 #cont dl:nth-child(3) {width:40%;}
}
@media all and (max-width:976px) {
	#esg3-1 #tit {color:#FFF; padding:10vw 20px; }
	#esg3-1 #cont {flex-wrap:wrap}
	#esg3-1 #cont dl { padding:30px 20px;}
	#esg3-1 #cont dl .icon {right:20px; top:10px }
	#esg3-1 #cont dl:nth-child(1) {width:50%;}
	#esg3-1 #cont dl:nth-child(2) {width:50%;}
	#esg3-1 #cont dl:nth-child(3) {width:100%;  border-top:1px solid rgba(255,255,255,0.2);}
}
@media all and (max-width:640px) {
	#esg3-1 #cont {border-top:0}
	#esg3-1 #cont dl {width:100% !important; border-left:0;  border-top:1px solid rgba(255,255,255,0.2);}
}





#esg3-2 {display:flex; flex-wrap:wrap}
#esg3-2 h3 {width:300px;}
#esg3-2 .cont {width:calc(100% - 300px);}
#esg3-2 .cont .stxt1 {color:#111}
#esg3-2 .bgCont {margin-top:30px; background:#f0f4fa; padding:50px}
#esg3-2 .bgCont .t1 {padding-bottom:1em; margin-bottom:1em; border-bottom:1px solid #c7cdd9;
						font-size:2.0rem; font-weight:500; color:#0f244d}

@media all and (max-width:1530px) {
	#esg3-2 h3 {width:230px;}
	#esg3-2 .cont {width:calc(100% - 230px);}
}
@media all and (max-width:1280px) {
	#esg3-2 h3 {width:180px;}
	#esg3-2 .cont {width:calc(100% - 180px);}
}
@media all and (max-width:1024px) {
	#esg3-2 h3 {width:100%;}
	#esg3-2 .cont {width:100%;}
	#esg3-2 .bgCont {margin-top:20px;  padding:30px}
}

.bdBox2 { border: 10px solid #f5f5f5; padding: 3em; }
@media all and (max-width:1280px) {
  .bdBox2 { padding: 2.5em; }
}
@media all and (max-width:480px) {
  .bdBox2 { padding: 2em; border-width: 8px; }
}



#circleList {display:flex; gap:50px;}
#circleList li {width:230px; height:230px; border-radius:50%; background:#0d3f9e; text-align:center; color:#FFF;
				display:flex; align-items: center; flex-direction: column;  justify-content:center; position:relative}
#circleList li:before {content:''; width:50px; height:50px;; background:url('/images/sub/esg3-2-arrow.png') no-repeat left center / 100% auto;
						position:absolute; left:-50px; top:50%; transform:translateY(-50%); }
#circleList li:first-child::before {display:none}
#circleList li h4 {padding-top:1em; font-size:2.2rem; font-weight:600}

@media all and (max-width:1640px) {
	#circleList li {width:200px; height:200px}
}
@media all and (max-width:1280px) {
	#circleList {gap:3vw;}
	#circleList li {width:13vw; height:13vw}
	#circleList li:before {width:3vw;  left:-3vw}
	#circleList li img {width:50px}
}
@media all and (max-width:1024px) {
	#circleList { justify-content:center;}
	#circleList li {width:17vw; height:17vw}
	#circleList li img {width:50px}
}
@media all and (max-width:700px) {
	#circleList { flex-wrap:wrap;}
	#circleList li {width:27vw; height:27vw}
	#circleList li img {width:50px}
}
@media all and (max-width:480px) {
	#circleList li {width:30vw; height:30vw}
	#circleList li img {width:10vw}
	#circleList li h4 {font-size:2.0rem}
}