@charset "UTF-8";
/* CSS Document */


/* SDGsテーブル */
.csrSDGs_table { margin-left: auto; margin-right: auto;}
.csrSDGs_table tr:first-of-type { text-align: center; }
@media (min-width: 768px){
.csrSDGs_table { margin-bottom: 3em; margin-left: auto; margin-right: auto; width: 1080px;}
.sdgs_img { text-align: center; margin: 50px 0;}
.sdgs_img img{ width: 450px;}
.sdgs_img2 { text-align: center; margin: 50px 0;}
.sdgs_img2 img{ width: 700px;}
.t-right{ text-align: right; font-size: 14px;}
	
	.gaibu_link	{ width: 14px; height: 14px; position: relative; top: -2px; margin: 0 0 0 10px;}
	#jclp{ padding-top: 110px; margin-top: -110px;}
}
@media (max-width: 767.98px){
.csrSDGs_table { margin-bottom: 10px; margin-top: 10px; width: 770px; font-size: 12px;}
.sdgs_img { text-align: center; margin: 30px 20px;}
.sdgs_img img{ width: 80%;}
.sdgs_img2 { text-align: center; margin: 30px 20px;}
.sdgs_img2 img{ width: 90%;}
.t-right{ text-align: right; font-size: 12px;}
	
	.gaibu_link	{ width: 14px; height: 14px; position: relative; top: -2px; margin: 0 0 0 10px;}
	#jclp{ padding-top: 100px; margin-top: -100px;}
}

/*.table_icon_sdgs { width: calc( 70px + 2em ); text-align: center; } /*  マージンと画像サイズ */
.table_icon_sdgs  { width: calc( 100px + 2em ); text-align: center; } /*  マージンと画像サイズ */
.table_icon_sdgs img { width: 70px; } /* 画像の元サイズは180px */
.table_icon_sdgs p { font-size: 12px; margin-top: 3px; } 

.large_text { font-size: 20px; }
.textred{ color: #e4011e;}
.SDGs_lineHeightLarge { line-height: 3em; }


/* 当社の取り組み事例 */
@media (min-width: 768px){
	.sdgs_ul{ display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;}
	.sdgs_ul li{ width: 160px; height: auto; margin-right: 24px; margin-bottom: 24px; position: relative; transition: 0.2s;}
	.sdgs_ul li a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
	.sdgs_ul li:nth-child(1),.sdgs_ul li:nth-child(2){ opacity: 1;}
	.sdgs_ul li:hover{ opacity: 0.7;}
	.sdgs_ul li:nth-child(1):hover,.sdgs_ul li:nth-child(2):hover{ opacity: 1;}
	.sdgs_ul li:nth-child(18):hover{ opacity: 1.0;}
	.sdgs_ul li:nth-child(6n){ margin-right: 0;}
	
	.icon_box { text-align: center; margin: 30px 0 60px;}
	.icon_box img{ width: 200px; height: auto; margin: 0 10px;}
	.icon_box2 { text-align: center; margin: 20px 0; display: block; width: 100%;}
	.icon_box2 img{ width: 200px; height: auto;}
	
	.sdgs_photo { text-align: center; margin: 0 0 15px;}
	.sdgs_photo img { width: 700px; height: auto;}
	.sdgs_photo2 { text-align: center; margin: 0 0 15px;}
	.sdgs_photo2 img { width: 900px; height: auto;}
	
	.sdgs_photo_flex{ display: flex; margin: 0 0 15px;}
	.sdgs_photo_flex img{ width: 525px; height: auto; margin-right: 30px;}
	.sdgs_photo_flex img:last-child{ width: 525px; height: auto; margin-right: 0;}
	
	.sdgs_photo_flex2{ display: flex; margin: 0 auto 15px; justify-content: center;}
	.sdgs_photo_flex2 img{ width: 325px; height: auto; margin-right: 30px;}
	.sdgs_photo_flex2 img:last-child{ width: 325px; height: 433px; margin-right: 0;}
	
	.kpi_box{display: flex; margin-bottom: 50px;}
	.kpi_box img{width: 100px; margin-left: 10px; margin-right: 10px;}
	.kpi_box dl{border: 1px solid #ccc; padding: 10px; width: 960px;}
}
@media (max-width: 767.98px){
	.sdgs_ul{ display: flex; flex-wrap: wrap; list-style: none; margin: 0 auto; padding: 0; justify-content: center;}
	.sdgs_ul li:nth-child(1),.sdgs_ul li:nth-child(2){ opacity: 1;}
	.sdgs_ul li:nth-child(odd){ width: 45%; height: auto; margin-right: 1%; margin-bottom: 2%; position: relative;}
	.sdgs_ul li:nth-child(even){ width: 45%; height: auto; margin-left: 1%; margin-bottom: 2%; position: relative;}
	.sdgs_ul li a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
	
	.icon_box { text-align: center; margin: 20px 0 40px;}
	.icon_box img{ width: 150px; height: auto; margin: 0 5px;}
	.icon_box2 { text-align: center; margin: 10px 0; display: block; width: 100%;}
	.icon_box2 img{ width: 150px; height: auto;}
	
	.sdgs_photo { text-align: center; margin: 0 0 10px;}
	.sdgs_photo img { width: 100%; height: auto;}
	.sdgs_photo2 { text-align: center; margin: 0 0 10px;}
	.sdgs_photo2 img { width: 100%; height: auto;}
	
	.sdgs_photo_flex{ margin: 0 0 10px;}
	.sdgs_photo_flex img{ width: 100%; height: auto;}
	.sdgs_photo_flex img:last-child{　width:  100%; height: auto; margin-top: 10px;}
	
	.sdgs_photo_flex2{ margin: 0 auto 10px; justify-content: center; text-align: center;}
	.sdgs_photo_flex2 img{ width: 80%; height: auto;}
	.sdgs_photo_flex2 img:last-child{ width: 80%; height: auto; margin-top: 10px;}
	
	.kpi_box{display:block; text-align: center; }
	.kpi_box img{width: 150px; margin-bottom: 20px;}
	.kpi_box dl{border: 1px solid #ccc; padding: 10px; width: 100%;}
}
@media (min-width: 768px) {
	.modal { top: 100px; max-height: calc(100vh - 100px);}
	.modal-body { padding: 20px;}
	.modal-dialog { max-width: 800px;}
	.modal-header { font-size: 22px;}
	.modal_button { width: 200px; line-height: 30px; background-color: #0088d2; padding: 10px 20px; color: #fff; border-radius: 10px; display: inline-block; margin: 20px 0 0; background-image: url(../../common/images/icon/arrow.svg); background-repeat: no-repeat; background-position: right 10px center;}
	.modal_button:hover{ color: #fff; opacity: 0.8; text-decoration: none;}
}
@media (max-width: 767.98px) {
	.modal-body { padding: 20px;}
	.modal-dialog { max-width: 800px;}
	.modal-header { font-size: 22px;}
	.modal_button { width: 200px; line-height: 30px; background-color: #0088d2; padding: 10px 20px; color: #fff; border-radius: 10px; display: inline-block; margin: 20px 0 0; background-image: url(../../common/images/icon/arrow.svg); background-repeat: no-repeat; background-position: right 10px center;}
	.modal_button:hover{ color: #fff; opacity: 0.8; text-decoration: none;}
}

@media (min-width: 768px){
	.governance_box { border: 1px solid #0088d2; margin: 30px 0 30px; width: 800px; padding: 40px; text-align: center; border-radius: 10px;}
	.governance_box .policy_strong_box{ display: block; text-align: center; margin: 0 0 40px;}
	.governance_box .policy_strong{ font-size: 22px; display: inline-block; border-bottom: 3px double #0088d2; padding-bottom: 5px;}
}
@media (max-width: 767.98px){
	.governance_box { border: 1px solid #0088d2; margin: 20px 0 20px; width: 100%; padding: 20px; text-align: center; border-radius: 10px;}
	.governance_box .policy_strong_box{ display: block; text-align: center; margin: 0 0 20px;}
	.governance_box .policy_strong{ font-size: 14px; display: inline-block; border-bottom: 3px double #0088d2; padding-bottom: 5px;}
}


@media (min-width: 768px){
	.tate{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; white-space: pre; display: block; margin: 0 auto;}
	.GrayTableBase th, .GrayTableBase td { padding: 10px;}
	.GrayTableBase tr:nth-child(2) th { background-color: #666; color: #fff; text-align: center;}
	
	.small_td{ background-color: #d7e8e8; text-align: center;}
	.middle_td{ background-color: #b3d6d2; text-align: center;}
	.big_td{ background-color: #87c1b8; text-align: center;}
	
	.ghg_tb{ width: 600px; margin-bottom: 0;}
	.ghg_tb td:last-child{ text-align: right;}
	.ghg_tb td:nth-last-child(2){ text-align: right;}
	.ghg_tb td:nth-last-child(3){ text-align: right;}
	
	.img1_box{ text-align: center; margin: 50px 0 0 0;}
	.img1_box img{ width: 700px;}
	
	.img2_box{ text-align: left; margin: 50px 0 30px 0;}
	.img2_box img{ width: 700px;}
	
	.st_title{ margin: 50px 0 5px 0; display: block; font-size: 18px;}
	
	.ghg{ text-align: center; margin: 50px 0 0 0;}
	.ghg img{ width: 500px;}
}
@media (max-width: 767.98px){
	.tate{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; white-space: pre; display: block; margin: 0 auto;}
	.GrayTableBase th, .GrayTableBase td { padding: 7px;}
	.tdx{ padding: 6px!important;}
	.GrayTableBase tr:nth-child(2) th { background-color: #666; color: #fff; text-align: center;}
	
	.small_td{ background-color: #d7e8e8; text-align: center;}
	.middle_td{ background-color: #b3d6d2; text-align: center;}
	.big_td{ background-color: #87c1b8; text-align: center;}
	
	.ghg_tb{ width: 100%; margin-bottom: 0;}
	.ghg_tb td:last-child{ text-align: right;}
	.ghg_tb tr:first-child th:first-child{ writing-mode: vertical-rl; text-orientation: upright;}
	
	.img1_box{ text-align: center; margin: 30px 0 0 0;}
	.img1_box img{ width: 100%;}
	
	.img2_box{ text-align: center; margin: 30px 0 20px 0;}
	.img2_box img{ width: 100%;}
	
	.st_title{ margin: 30px 0 3px 0; display: block; font-size: 13px;}
	
	.ghg{ text-align: center; margin: 30px 0 0 0;}
	.ghg img{ width: 100%;}
}

@media (min-width: 768px){}
@media (max-width: 767.98px){}