@charset "utf-8";


#bread{ padding: 100px 0 0; }

/* ------------------------------------------------------------ fv */
.f_inner{ margin: 0 auto; /* width: 1390px; */ position: absolute; z-index: 1; left: calc(50% - 730px); top: 50%; transform: translate(0,-50%); padding: 0 20px; }

#firstview{ width: 100%; padding: 0; margin: 110px 0 0; }
#firstview .flex{ position: relative; display: flex; flex-direction: row-reverse; min-height: 40.6rem; }

#firstview .pic{ width: 68vw; min-width: 1090px; position: relative; right: 0; }
#firstview .pic img{ width: 100%; height: auto; }


/* ------------------------------------------------------------ initiatives */
#initiatives{ padding: 140px 0 130px; }
#initiatives .ttl_box{ background: url(../images/renewal_2023/sdgs/img_01.png) calc(50% + 400px) top no-repeat; }
#initiatives .box{display: flex;justify-content: space-between; flex-wrap: wrap;}

#initiatives .initiatives_box{ width: 650px; font-feature-settings: "palt"; }
#initiatives h3{ padding: 0 0 40px; }
#initiatives h3 span{ padding: 0 0 10px; }
#initiatives .subttl{ letter-spacing: 0.05em; line-height: 200%; font-size: 16px; }
#initiatives .description{ padding: 30px 0 0; font-size: 14px; }
#initiatives .description span{ font-size: 16px; font-weight: 600; padding: 0 0 10px; display: block; }

#initiatives .icns{ width: 692px; margin: 0 auto; padding: 70px 0 100px; }
#initiatives .icns a{ display: inline-block; width: 160px; margin: 0 5px 15px; }

#initiatives .sdgs{ padding: 0 0 10px; }
#initiatives .sdgs span{ font-weight: 600; font-family: "fot-tsukuardgothic-std", sans-serif; font-size: 40px; text-align: center; padding: 0 0 5px; }
#initiatives .sdgs_description{ padding: 0 0 100px; font-size: 16px; text-align: center; line-height: 170%; }


#initiatives .sdgs_box{ height: auto; display: flex; padding: 70px 0 50px; border-top: 1px solid #d5dedf; justify-content: center; align-items: center; }
#initiatives .sdgs_box:last-of-type{ border-bottom: 1px solid #b2b2b2; }

#initiatives .sdgs_box .icn_area{ width: 440px; display: flex; flex-wrap: wrap; }
#initiatives .sdgs_box .icn_area img{ width: 31%; height: auto; margin: 0 2% 2% 0;  }

#initiatives .attempt{ position: relative; padding: 0 0 50px; background: url(../images/renewal_2023/sdgs/img_03.png) calc(50% + 330px) bottom/200px no-repeat; font-size: 40px; text-align: center; font-family: "fot-tsukuardgothic-std", sans-serif; font-weight: 600; } 
#initiatives .attempt:before{ position: absolute; top: -40px; left: calc(50% - 300px); content: ""; width: 70px; height: 87px; background: url(../images/renewal_2023/sdgs/img_02.png) center/cover; }


#initiatives .sdgs_box h4{ padding: 0 0 30px; font-size: 24px; line-height: 130%; font-family: "fot-tsukuardgothic-std", sans-serif; font-weight: 700; font-style: normal; }
#initiatives .sdgs_box .text{ width: 530px; padding: 0 0 0 60px; }
#initiatives .sdgs_box .text p{ width: 127px; font-size: 16px; letter-spacing: 0.05em; text-align: center; border: 1px solid #0f285f; border-radius: 50px; }
#initiatives .sdgs_box .text .txt{ padding: 10px 0 0; font-size: 15px; line-height: 180%; }

#initiatives .sdgs_box .text ul{ padding: 17px 0 0; }
#initiatives .sdgs_box .text ul li{ padding: 0 0 10px; font-size: 16px; letter-spacing: 0.05em; display: flex;}
#initiatives .sdgs_box .text ul li span:nth-child(1){ margin: 2px 9px 0 5px; font-size: 16px; text-align: center; color: #fff; font-family: 'Jost', sans-serif; font-style: normal; background: #0f285f; border-radius: 50px; display: inline-block; width: 20px; height: 20px; line-height: 130%; }
#initiatives .sdgs_box .text ul li span:nth-child(2){display: block;width: calc(100% - 17px); font-feature-settings: "palt"; }


#pictures{ margin: 100px 0 0; text-align: center; }
#pictures img{ width: 650px; height: auto; }


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){


	/* ------------------------------------------------------------ fv */
	#firstview{ margin: 30px 0 0; padding: 0; width: 100%; background: none; }
	#firstview .flex{ flex-direction: column; width: 100vw; min-height: auto; }
	#firstview .pic{ width: 100vw; min-width: auto; }
	#firstview .fv_img{ width: 100%; height: auto; }
	#initiatives .ttl_box{ background:none; }
	#firstview h2 span{ font-size: 50px; }
	

	#initiatives{ padding: 50px 0 65px; }
	#initiatives .box{display: flex;justify-content: space-between; flex-wrap: wrap;}
	#initiatives .box .initiatives_box{width: auto;order: 1;}
	#initiatives .box .img_01{order: 3; width: 100%; height: 100%; padding: 0 0 60px;}
	#initiatives .box .wow img{order: 2; width: 100%; height: 100%; padding: 0 ;}
	
	#initiatives h3{ padding: 0 0 18px; }
	#initiatives h3 span{ padding: 0 0 10px; line-height: 100%; font-size: 40px}
	#initiatives .subttl{ letter-spacing: 0.05em; line-height: 200%; }
	
	#initiatives .description{ padding: 18px 0 20px; font-size: 12px; order: 2; }
	#initiatives .description span{ font-size: 14px; padding: 0 0 3px; }
	
	
	/* ------------------------------------------------------------ initiatives */
	
	
	#initiatives .subttl{ font-size: 12px; }
	
	#initiatives .icns{ width: 100%; padding: 30px 0 25px; order: 3; }
	#initiatives .icns a{ width: 22.5%; margin: 0 2% 10px 0; }
	#initiatives .icns a:nth-of-type(4n){ margin-right: 0; }
	
	#initiatives .sdgs{ padding: 0; }
	#initiatives .sdgs span{ font-size: 25px; text-align: left; line-height: 150%; }
	#initiatives .sdgs_description{ padding: 0 0 25px; font-size: 13px; text-align: left; }
	
	#initiatives .attempt{ padding: 50px 0; font-size: 26px; background: url(../images/renewal_2023/sdgs/img_03.png) calc(50% + 100px) bottom/100px no-repeat; }
	#initiatives .attempt:before{ top: 20px; left: calc(50% - 170px); width: 35px; height: 45px; }
	
	#initiatives .sdgs_box{ flex-direction: column; padding: 30px 0; }
	#initiatives .sdgs_box img{ /* width: calc(100% - 80%); */ height: auto; padding: 0 0;}
	
	#initiatives .sdgs_box .text{ width: 100%; margin: 0 auto 0;padding: 0px; }
	#initiatives .sdgs_box .text .SP_box{ /* display: flex; align-items: center; padding: 0 0 20px; */ padding: 0 0 10px; }
	#initiatives .sdgs_box .text .txt{ padding: 10px 0 0; font-size: 13px; font-feature-settings: "palt"; }
	
	#initiatives .sdgs_box .icn_area{ width: 100%; justify-content: flex-start; }
	#initiatives .sdgs_box .icn_area img{ width: 30%; margin: 0 3% 3% 0; }
	
	#initiatives .sdgs_box .text h4{ /* padding: 0 0 0 15px; font-size: 14px; */ padding: 10px 0 0; font-size: 17px; line-height: 180%; }
	#initiatives .sdgs_box .text p{ width: 85px; font-size: 12px; }
	
	#initiatives .sdgs_box .text ul{ padding: 10px 0 0; }
	#initiatives .sdgs_box .text ul li{ padding: 0 0 5px; font-size: 12px; }
	#initiatives .sdgs_box .text ul li:last-of-type{ padding: 0; }
	#initiatives .sdgs_box .text ul li span:nth-child(1){ font-size: 12px; width: 17px; height: 17px; line-height: 150%; margin: 2px 5px 0; }


	#pictures{ margin: 50px 0 0; }
	#pictures img{ width: 100%; }

}