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

@charset "utf-8";
/* CSS Document */
.pc { display:block; }
.phone { display:none;}
.sdgs_base1{ background-color:#FFF; margin:10px auto; padding:0; box-sizing:border-box;}
.sdgs_base2{ border:2px solid #e0070a; margin:0; padding:5px 10px; box-sizing:border-box;  }
.sdgs_base3{ margin:0; padding:0 0 30px 0; box-sizing:border-box; width:100%; z-index:1; position:relative; }
img{ height:auto !important }
.sdgs_logo{ max-width:100px !important; width:30% !important; margin-bottom:15px}
.sdgs_ttl{ font-size:24px !important; line-height:30px !important; color:#000 !important; margin:10px auto !important; text-align:center !important}
.sdgs_ttl2{ font-size:16px !important; line-height:22px !important; color:#000 !important; margin:0 auto !important; text-align:center !important}
.sdgs_border{ margin:0; padding:0; box-sizing:border-box; position:absolute; }
.sdgs_b1{ border-top:1px solid #4390b0; border-left:1px solid #4390b0; z-index:11; width:250px !important; height: calc(30vw * 1); top:0; left:0 }
.sdgs_b2{ border-top:1px solid #f18713;border-left:1px solid #f18713; z-index:12; width:230px; height: calc(28vw - 1vh); top:5px; left:5px }
.sdgs_b3{ border-top:1px solid #52a224;border-left:1px solid #52a224; z-index:13; width:200px; height: calc(24vw * 1); top:5px; left:5px }
.sdgs_b4{ border-top:1px solid #52a224; border-right:1px solid #52a224; z-index:14; width:250px; height: calc(30vw * 1); top:0; right:0 }
.sdgs_b5{ border-top:1px solid #f18713;border-right:1px solid #f18713; z-index:15; width:230px; height: calc(28vw - 1vh); top:5px; right:5px }
.sdgs_b6{ border-top:1px solid #4390b0;border-right:1px solid #4390b0; z-index:16; width:200px; height: calc(24vw * 1); top:5px; right:5px }

.sdgs_b7{ border:1px solid #52a224; border-top:none !important; 
z-index:17; width: calc(100% - 0px); height: calc(30vw * 1); bottom:0; right:0 }
.sdgs_b8{ border:1px solid #f18713; border-top:none !important; 
z-index:18; width: calc(100% - 10px); height: calc(28vw - 1vh); bottom:5px; right:5px }
.sdgs_b9{ border:1px solid #4390b0; border-top:none !important;
z-index:19; width: calc(100% - 10px); height: calc(24vw * 1); bottom:5px; right:5px }

.sdgs_subttl{ margin:30px auto; color:#000 !important; width:80%; text-align:center; font-size:26px; line-height:30px; }
.sdgs_subttl p{ margin:5px 10px !important; padding:0 !important; box-sizing:border-box; border-bottom: solid 2px #e0070a;
box-shadow: 0px 1px #FFFFFF, 0px 2px #52a224, 0px 3px #FFFFFF, 0px 4px #f18713, 0px 5px #FFFFFF, 0px 6px #4390b0; margin-bottom: 6px;}
.sdgs_cont{ width:100%; box-sizing:border-box; padding:20px; margin:0; display: flex; flex-flow: row wrap;justify-content: space-around;}
.sdgs_cont div{ width:47%; text-align:left; font-weight:normal; margin:20px 0; box-sizing:border-box }
.sdgs_cont div img{ width:12%}
.sdgs_cont div h2{ background:none !important; width:100%; color:#000 !important; margin:0 !important; padding:0 0 0 20px !important; text-align:left !important; font-weight:bold !important; font-size:20px !important;  line-height:30px !important}
.sdgs_cont div p{ width:100%; margin:10px 0 !important; padding:0 !important; font-size:16px; line-height:26px }
.sdgs_cont div ul{ width:95%; margin:5px 0 10px 10px; list-style:disc; padding:0 0 0 20px !important; box-sizing:border-box}
.sdgs_cont div ul li{ margin:0 !important; padding:0; }
.sdgs_kome{ width:96%; box-sizing:border-box; padding:20px 0 0 0; margin:0 auto; display: flex; flex-flow: row wrap;justify-content: center; align-items: center; }
.sdgs_kome1{ text-align:right !important; padding-right:10px; margin-bottom:10px; color:#004ea2; box-sizing:border-box; width:150px;}
.sdgs_kome2{ text-align:left; font-size:10px; line-height:16px;width : -webkit-calc(100% - 150px) ; width : calc(100% - 150px) ;}
.sdgs_kome3{ color:#000;  font-size:10px; line-height:16px; }

.index_sdgs{ width:100%; box-sizing:border-box; padding:20px; margin:0; display: flex; flex-flow: row wrap;justify-content: space-around; 
}
.index_sdgs div{ width:47%; text-align:left; font-weight:normal; margin:20px 0; box-sizing:border-box }

	
@media only screen and (max-width: 1200px) {
.sdgs_base3 h1{ color:#000 !important }
.sdgs_base3 h2{ color:#000 !important; border-bottom:3px double #69C }
.pc { display:none; }
.phone { display:block;}
.sdgs_cont div{ width:100% }
.sdgs_kome{ display:block }
.sdgs_kome1{ width:90%; text-align:center !important; }
.sdgs_kome2{ width:90%; margin:0 auto; text-align:left}
}
@media only screen and (max-width:555px) {
.sdgs_b1{ width:70px !important; height:70px }
.sdgs_b2{ width:60px !important; height:60px }
.sdgs_b3{ width:50px !important; height:50px }
.sdgs_b4{ width:70px !important; height:70px }
.sdgs_b5{ width:60px !important; height:60px }
.sdgs_b6{ width:50px !important; height:50px }
.sdgs_ttl2{ font-size:13px !important; line-height:20px !important; margin-top:20px !important}
.sdgs_ttl{ font-size:16px !important; line-height:20px !important;}
p { font-size:12px; line-height:20px}
.sdgs_subttl{ margin:30px auto; width:90%; font-size:16px; line-height:20px; }
.sdgs_cont{ width:100%;  padding:0}
.sdgs_cont div h2{ font-size:14px !important; line-height:20px; width:90%}
.sdgs_cont div p ,.sdgs_cont div ul li{ font-size:14px; line-height:20px;}
}