@charset "utf-8";

.sub_wrap + .sub_wrap {margin-top: 80px;}
.sub_wrap:has(.sub_btn) {text-align: center;}

.gap_wrap {display: flex; flex-direction: column;}
.grid_wrap {display: grid;}
	.gap10 {gap: 10px;}
	.gap20 {gap: 20px;}
	.gap24 {gap: 24px;}
	.gap40 {gap: 40px;}	
	.grid2 {grid-template-columns: repeat(2, 1fr);}
	.grid3 {grid-template-columns: repeat(3, 1fr);}
	.grid4 {grid-template-columns: repeat(4, 1fr);}

.box_wrap {position: relative; width: 100%; box-sizing: border-box; padding: 50px; text-align:center;}
.box_wrap.txt {text-align: left;}
	.box_wrap.txt .sub_title h3 {font-size: 160%; color: var(--point-color01);}
	.box_wrap.txt .sub_title h3 + p {margin-top: 14px; font-size: 100%; color: var(--black-color03); line-height: 1.6;}
.box_wrap.img {padding: 0; border: 0;}
	.box_wrap.img .thumb {width: 100%; height: 100%; overflow: hidden;}
	.box_wrap.img .thumb img {width: 100%; height: 100%; object-fit: cover;}
.box_wrap:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--border-color01); pointer-events:none}
.box_wrap.txt:after {border: 2px solid var(--point-color01);}
.box_wrap.img:after {display: none;}

.sub_title {font-size: var(--title-20);}
.sub_title .dot_tit {font-size:140%;font-weight:600;color:var(--point-color01);line-height:1.5;word-break:keep-all;}
	.sub_title .dot_tit {display: flex; align-items: stretch; gap: 0 12px; color:var(--black-color03);}
	.sub_title .dot_tit > span {position: relative; min-width: max-content; box-sizing: border-box; padding-top: 14px; font-size: 0;}
	.sub_title .dot_tit > span:before, .dot_tit > span:after {content:'';display:inline-block;width:12px;height:12px;background:var(--point-color01);mix-blend-mode: multiply;border-radius:100%;}
	.sub_title .dot_tit > span:after {background:var(--point-color02);margin-left:-4px;}
	.sub_title .dot_tit > span em {display: block; position:absolute;right:0;top:50%;transform: translateY(-50%);width: 12px; height:12px; background:var(--point-color02);border-radius:100%;opacity:0.5;}
.sub_title .dot_tit + .txt,
.sub_title .dot_tit + .dot_list {margin-top: 20px;}
.sub_title .dot_tit + .txt p {color: var(--black-color03); font-family: var(--font-type02);}
.sub_title .dot_tit + .txt p > * {color: inherit; font-family: inherit;}
.sub_title .dot_tit + .txt p + p {margin-top: 16px;}

.dot_list {display: flex; flex-direction: column; gap: 8px; font-size: var(--title-20);}
.dot_list > li {position: relative; display: flex; align-items: baseline; gap: 7px; font-size: 90%; color: var(--black-color04); line-height: 1.6; font-family: var(--font-type02);}
.dot_list > li:before{content:''; display: inline-flex; width: 3px; aspect-ratio: auto 1; background: var(--black-color08); flex-shrink: 0; translate: 0 -4px;}
.dot_list > li strong {font-weight: 500; color: var(--black-color03); font-family: var(--font-type02);}
	.dot_list.ft16 > li {font-size: var(--title-16);}
	
.prg_list {display: flex; justify-content: center; align-items: center; gap: 30px; width: 100%;}
.prg_list li {text-align: center;}
.prg_list .arw {display: inline-flex; width: 20px; flex-shrink: 0;}
.prg_list .circle {display: inline-flex; justify-content: center; align-items: center; width: 100%; aspect-ratio: auto 1; flex: 1; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);}
.prg_list li dl {font-size: var(--title-20);}
.prg_list li dt {font-size: 100%; color: var(--black-color03);}
.prg_list li dd {margin-top: 10px; font-size: 80%; color: var(--black-color06); line-height: 1.6;}

.num_list {counter-reset: numlist;}
.num_list li {width: 100%; background: var(--gray-bg02); box-sizing: border-box; padding: 32px 30px; font-size: var(--title-20);}
.num_list li strong {display: block; width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--border-color01); padding-block: 0 22px; margin-block: 0 22px; font-size: 110%; font-weight: 500; color: var(--black-color03);}
.num_list li strong:before {content: counter(numlist, decimal-leading-zero) "."; counter-increment: numlist; display: inline-block; transform: translateY(-1px); margin-right: 14px; font-size: var(--title-20); font-weight: 600; color: var(--point-color01);}
.num_list li p {font-size: 90%; color: var(--black-color06); line-height: 1.6;}

.chk_list {}
.chk_list li {display: flex; align-items: flex-start; gap: 14px; width: 100%; box-sizing: border-box; border: 1px solid var(--border-color01); padding-inline: 30px; padding-block: 26px 22px; font-size: var(--title-20);}
.chk_list li:before {content: ""; width: 16px; aspect-ratio: auto 0.55; background: url("../images/sub/sub_chk_ico.svg") no-repeat center / 100% auto; translate: 0 1px;}
.chk_list li dl {width: calc(100% - 30px);}
.chk_list li dt {font-size: 100%; font-weight: 500; color: var(--black-color03);}
.chk_list li dd {padding-block: 10px 0; font-size: 90%; color: var(--black-color04); line-height: 1.6;}

.ico_list {}
.ico_list li {display: flex; align-items: center; gap: 20px; width: 100%; box-sizing: border-box; padding: 37px 40px; font-size: var(--title-20);}
.ico_list li dl {width: calc(100% - 72px);}
.ico_list li dt {font-size: 110%;}
.ico_list li dd {padding-block: 8px 0; font-size: 90%; font-weight: 300; letter-spacing: -0.05em;}

.info_box {display: flex; align-items: center; width: 100%; background: var(--gray-bg02); box-sizing: border-box; padding: 25px 30px; font-size: var(--title-20);}
.info_box dt {display: inline-flex; align-items: center; font-size: 110%; font-weight: 500; color: var(--point-color03);}
.info_box dt:after {content:''; display: inline-flex; width: 1px; height: 20px; background: var(--border-color01); margin-inline: 30px;}
.info_box dt .ico {width: 50px; aspect-ratio: auto 1; background: var(--point-color03); border-radius: 100%; margin-inline: 0 20px;}
.info_box dd {font-size: 90%; color: var(--black-color04);}
.info_box dd strong {font-size: inherit; font-weight: 500; color: var(--black-color03);}
.info_box dd em {font-size: var(--title-16); font-weight: 400; color: var(--black-color08); margin-inline: 10px;}
		
.sub_btn {display: inline-flex; justify-content: center; align-items: center; width: 200px; padding-block: 18px; background: var(--point-color01);}
.sub_btn span {font-size: var(--title-20); color: var(--point-white); font-weight: 700;}

.color_blue {color: var(--point-color01) !important;}
.color_green {color: var(--point-color06) !important;}

.scr_wrap p.txt { font-size: var(--title-16); text-align: right; margin-bottom: 10px; color: var(--black-color03); }


@media (max-width:1217px){
	.gap20 {gap: 18px;}
	
	.box_wrap {padding: clamp(24px, 4.11vw, 50px) clamp(24px, 4.11vw, 50px);}
	.box_wrap.img .thumb {height: clamp(300px, 32.46vw, 395px);}
	
	.sub_title .dot_tit > span {padding-top: 13px;}
	.sub_title .dot_tit + .txt, .sub_title .dot_tit + .dot_list {margin-top: 18px;}
	
	.chk_list li {padding-inline: clamp(20px, 2.47vw, 30px); padding-block: clamp(18px, 2.14vw, 26px) clamp(16px, 1.81vw, 22px);}
	.chk_list li:before {width: 14px;}
	.chk_list li dl {width: calc(100% - 28px);}
	
	.ico_list li {padding: clamp(25px, 2.71vw, 33px) clamp(25px, 2.96vw, 36px);}
	.ico_list li .ico {width: 48px;}
	.ico_list li dl {width: calc(100% - 68px);}
	.ico_list li dd {padding-block: 6px 0;}
	
	.info_box {padding: clamp(20px, 2.05vw, 25px) clamp(20px, 2.47vw, 30px);}
	.info_box dt:after {height: clamp(12px, 2vw, 20px); margin-inline: clamp(20px, 3vw, 30px);}
	.info_box dt .ico {width: clamp(40px, 4.11vw, 50px); margin-inline: 0 clamp(10px, 1.64vw, 20px);}
	.info_box dd em {display: block; margin-inline: 0; margin-block: 2px 0;}
}
@media (max-width:1023px){
	.gap20 {gap: 16px;}
	.gap24 {gap: 20px;}
	.gap40 {gap: 30px;}
	.grid4 {grid-template-columns: repeat(3, 1fr);}
	
	.box_wrap.txt .sub_title h3 + p {margin-top: 12px;}
	
	.sub_title .dot_tit {gap: 0 10px;}
	.sub_title .dot_tit > span:before, .dot_tit > span:after {width: 10px; height: 10px;}
	.sub_title .dot_tit > span:after {margin-left: -3px;}
	.sub_title .dot_tit + .txt, .sub_title .dot_tit + .dot_list {margin-top: 16px;}
	.sub_title .dot_tit + .txt p + p {margin-top: 14px;}
	 
	.prg_list .arw {width: 16px;}
	
	.num_list li {padding: clamp(24px, 3.13vw, 32px) clamp(20px, 2.93vw, 30px);}
	.num_list li strong {padding-block: 0 clamp(12px, 2.15vw, 22px); margin-block: 0 clamp(12px, 2.15vw, 22px);}
	.num_list li strong:before {margin-right: 12px;}
	
	.chk_list li {gap: 12px;}
	.chk_list li dl {width: calc(100% - 26px);}
	.chk_list li dd {padding-block: 8px 0;}
	
	.ico_list li {align-items: flex-start; flex-direction: column;}
	.ico_list li .ico {width: 46px;}
	.ico_list li dl {width: 100%;}
	
	.sub_btn {width: clamp(160px, 20vw, 200px); padding-block: clamp(14px, 1.76vw, 18px);}
}
@media (max-width:860px){
	.sub_wrap + .sub_wrap {margin-top: 65px;}
	
	.gap20 {gap: 14px;}
	.gap24 {gap: 18px;}
	.gap40 {gap: 24px;}
	.grid3 {grid-template-columns: repeat(2, 1fr);}
	.grid4 {grid-template-columns: repeat(2, 1fr);}
	
	.box_wrap.txt .sub_title h3 + p {margin-top: 10px;}
	
	.scr_wrap {overflow: hidden; overflow-x: auto; width: calc(100% + 30px); margin-left: -15px;}
	.scr_wrap .info_table {width: 860px; padding-inline: 15px;}
	
	.sub_title .dot_tit + .txt, .sub_title .dot_tit + .dot_list {margin-top: 14px;}
	.sub_title .dot_tit + .txt p + p {margin-top: 12px;}
	
	.num_list li strong:before {margin-right: 10px;}
	
	.chk_list li:before {width: 12px; translate: 0 2px;}
	.chk_list li dl {width: calc(100% - 24px);}
	
	.ico_list li .ico {width: 44px;}
}
@media (max-width:767px){
	.box_wrap.txt .sub_title h3 {font-size: 150%; line-height: 1.5;}
	
	.info_box {align-items: flex-start; flex-direction: column; gap: 10px;}
	.info_box dt:after {display: none;}
	.info_box dt .ico {width: clamp(28px, 4.56vw, 35px); margin-inline: 0 10px;}
	.info_box dd em {margin-block: 4px 0;}
}
@media (max-width:640px){
	.grid2 {grid-template-columns: repeat(1, 1fr);}
	
	.box_wrap.img .thumb {height: clamp(180px, 46.88vw, 300px);}
	.box_wrap.txt .sub_title h3 + p {font-size: 95%;}
	
	.sub_title .dot_tit + .txt, .sub_title .dot_tit + .dot_list {margin-top: 12px;}
	.sub_title .dot_tit + .txt p + p {margin-top: 10px;}
	
	.dot_list {gap: 6px;}
	
	.prg_list .arw {width: 14px;}
	
	.ico_list li {align-items: center; flex-direction: row;}
	.ico_list li .ico {width: 42px;}
	.ico_list li dl {width: calc(100% - 62px);}
}
@media (max-width:479px){
	.sub_wrap + .sub_wrap {margin-top: 50px;}
	
	.gap24 {gap: 16px;}
	.grid3 {grid-template-columns: repeat(1, 1fr);}
	.grid4 {grid-template-columns: repeat(1, 1fr);}

	.box_wrap.txt .sub_title h3 {font-size: 145%;}
	
	.sub_title .dot_tit {gap: 0 8px;}
	.sub_title .dot_tit > span {padding-top: 11px;}
	.sub_title .dot_tit > span:before, .dot_tit > span:after {width: 9px; height: 9px;}
	.sub_title .dot_tit + .txt, .sub_title .dot_tit + .dot_list {margin-top: 10px;}
	.sub_title .dot_tit + .txt p + p {margin-top: 8px;}
	
	.chk_list li {gap: 10px;}
	.chk_list li dl {width: calc(100% - 22px);}
	.chk_list li dd {padding-block: 6px 0;}
}
		
		
/*───────────────────────────────────────────────────────────
	 CARBON
───────────────────────────────────────────────────────────*/
	.sub_gas .info_table {margin-top: 0; border-top: 0;}
	.sub_gas .info_table :where(th, td) {padding-inline: 12px; font-family: var(--font-type02);}
    .sub_gas .info_table thead th {color: var(--point-white); background: var(--black-color03);}
	.sub_gas .info_table .total :where(th, td){background: var(--point-bg01); color: var(--point-color01);}
	
	.sub_goal .goal_detail {}
	.sub_goal .goal_detail > div {display: flex; font-size: var(--title-20);}
	.sub_goal .goal_detail h5, .sub_goal .goal_detail .cont:not(.grid_wrap) {display: inline-flex; flex-direction: column; justify-content: center; align-items: center;}
	.sub_goal .goal_detail h5 {width: 15%; min-width: 120px; box-sizing: border-box; padding: 14px 20px;}
		.sub_goal .goal_detail .vision h5 {background: var(--point-color03);}
		.sub_goal .goal_detail .goal h5 {background: var(--point-color01);}
		.sub_goal .goal_detail .strategy h5 {background: var(--point-color04);}
		.sub_goal .goal_detail .strength h5 {background: var(--point-color05);}
	.sub_goal .goal_detail h5 span {font-size: 110%; color: var(--point-white); font-weight: 500; text-align: center;}
	.sub_goal .goal_detail h5 span em {display: block; font-size: 90%; font-weight: 300;}
	
	.sub_goal .goal_detail .cont {width: calc(100% - 15%); min-height: 140px; box-sizing: border-box; padding: 20px; border: 1px solid var(--border-color01);}
		.sub_goal .goal_detail .goal .cont {padding-top: 30px; padding-bottom: 30px;}
	.sub_goal .goal_detail .cont span {font-size: inherit; font-weight: inherit;}
	.sub_goal .goal_detail .cont > strong {font-size: 140%; color: var(--point-color01); font-weight: 600; text-align: center;}
	.sub_goal .goal_detail .cont > p {font-size: 100%; font-weight: 500; color: var(--black-color05); font-family: var(--font-type02); text-align: center;}
	.sub_goal .goal_detail .cont > p strong {font-weight: inherit;}
	.sub_goal .goal_detail .cont br.m_br {display: none;}
	
	.sub_goal .goal_detail .cont .prg_list {margin-top: 28px;}
	.sub_goal .goal_detail .cont .prg_list .circle {max-width: 160px;}
	.sub_goal .goal_detail .cont .prg_list .arw + .circle {border-width: 2px; border-color: var(--point-color01);}
	.sub_goal .goal_detail .cont .prg_list .circle:last-child {border-width: 3px;}
	.sub_goal .goal_detail .cont .prg_list li dt {font-size: 130%; font-weight: 600;}
	.sub_goal .goal_detail .cont .prg_list li dd {display: inline-flex; align-items: center; margin-top: 5px; font-weight: 500; color: var(--point-color01); font-family: var(--font-type02);}
	.sub_goal .goal_detail .cont .prg_list li dd:before {content: ""; width: 0; height: 0; border-style: solid; border-width: 0px 4px 6px 4px; border-color: transparent transparent var(--point-color01); transparent; margin-right: 6px;}
	
	.sub_goal .goal_detail .cont .gap_wrap dl {font-size: var(--title-20);}
	.sub_goal .goal_detail .cont .gap_wrap dt {display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; box-sizing: border-box; padding: 11px 20px; font-size: 90%; font-weight: 600;}
	.sub_goal .goal_detail .cont .gap_wrap dd {width: 100%; height: 100%; box-sizing: border-box; padding: 20px;}
		.sub_goal .goal_detail .strategy .cont .gap_wrap dt {border: 1px solid var(--point-color04); color: var(--point-color04);}
		.sub_goal .goal_detail .strategy .cont .gap_wrap dd {background: var(--point-bg02);}
		.sub_goal .goal_detail .strength .cont .gap_wrap dt {border: 1px solid var(--point-color05); color: var(--point-color05);}
		.sub_goal .goal_detail .strength .cont .gap_wrap dd {background: var(--point-bg03);}
	
	
	@media (max-width:1023px){
		.sub_goal .goal_detail .cont .gap_wrap dd {padding: clamp(15px, 1.96vw, 20px);}
		
		.sub_goal .goal_detail .cont .prg_list {margin-top: 24px; gap: 24px;}
		.sub_goal .goal_detail .cont .prg_list .circle {max-width: 150px;}
	}
	@media (max-width:860px){
		.sub_goal .goal_detail .cont .gap_wrap dt {font-size: 95%;}
		
		.sub_goal .goal_detail .cont .prg_list {gap: 14px;}
		.sub_goal .goal_detail .cont .prg_list .circle {max-width: 140px;}
		.sub_goal .goal_detail .cont .prg_list li dd:before {margin-right: 4px;}
	}
	@media (max-width:640px){
		.sub_goal .goal_detail > div {flex-direction: column;}
		.sub_goal .goal_detail h5, .sub_goal .goal_detail .cont {width: 100%;}
		.sub_goal .goal_detail h5 span em {display: inline-block;}
		.sub_goal .goal_detail h5 span br {display: none;}
		
		.sub_goal .goal_detail .goal .cont {padding-top: 20px; padding-bottom: 20px;}
		.sub_goal .goal_detail .cont .prg_list {flex-direction: column; margin-top: 20px;}
		.sub_goal .goal_detail .cont .prg_list .arw {transform: rotate(90deg);}
	}
	@media (max-width:479px){
		.sub_goal .goal_detail .cont br.m_br {display: block;}
	}
	


/*───────────────────────────────────────────────────────────
	 BUSINESS
───────────────────────────────────────────────────────────*/
	.sub_support .box_wrap.img {flex-direction: row;}
	
	.sub_education .prg_list {justify-content: space-between; align-items: flex-start; gap: 30px 11px; counter-reset: steplist;}
	.sub_education .prg_list li:not(.arw) {width: calc((100% - 100px) / 6);}
	.sub_education .prg_list .arw {height: 100px;}
	.sub_education .prg_list .circle {width: 100px; box-shadow: none;}
	.sub_education .prg_list li dt {font-size: 100%; font-weight: 500; color: var(--black-color03);}
	.sub_education .prg_list li dt:before {content: "Step " counter(steplist); counter-increment: steplist; display: block; padding-block: 14px 10px; font-size: var(--title-15); font-weight: 600; color: var(--point-color01);}
	
	.sub_governance .ico_list li {background: var(--point-color03);}
	.sub_governance .ico_list li + li {background: var(--point-color01);}
	.sub_governance .ico_list li + li + li {background: var(--point-color04);}
	.sub_governance .ico_list li :is(dt, dd) {color: var(--point-white);}
	
	@media (max-width:1217px){
		.sub_support .box_wrap.img .thumb {height: clamp(230px, 32.46vw, 395px);}
		
		.sub_education .prg_list .arw {height: 90px;}
		.sub_education .prg_list .circle {width: 90px;}
	}
	@media (max-width:860px){
		.sub_governance .ico_list.grid3 {grid-template-columns: repeat(3, 1fr);}
		
		.sub_education .prg_list {flex-wrap: wrap;}
		.sub_education .prg_list li:not(.arw) {width: calc((100% - 80px) / 3);}
		.sub_education .prg_list li:nth-child(6) {display: none;}
		.sub_education .prg_list .arw {height: 80px;}
		.sub_education .prg_list .circle {width: 80px;}
		.sub_education .prg_list li dt:before {padding-block: 12px 8px;}
		.sub_education .prg_list li dd {margin-top: 8px;}
	}
	@media (max-width:640px){
		.sub_support .box_wrap.img {flex-direction: column;}
		.sub_support .box_wrap.img .thumb {height: clamp(180px, 46.88vw, 300px);}
		
		.sub_governance .ico_list.grid3 {grid-template-columns: repeat(1, 1fr);}
	}
	@media (max-width:479px){
		.sub_education .prg_list {gap: 24px 8px;}
		.sub_education .prg_list li:not(.arw) {width: calc((100% - 30px) / 2);}
		.sub_education .prg_list li:nth-child(6) {display: inline-flex;}
		.sub_education .prg_list li:nth-child(4n) {display: none;}
	}