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

#header_img{width:100%; background:url("../jpg/bg_sustainable.jpg") no-repeat 50% 50% #FFF; background-size:cover; overflow:hidden;}
#wrapper{max-width:1024px; width:96%; margin:0 auto; padding-bottom:30px;}
#content_box{width: 74%; float: right; margin: 0 0 30px;}
.next{margin: 20px 0; text-align: right;}

a.exlink{background:url(../gif/icon_exlink_g.gif) no-repeat right 50%; padding-right:20px;}

.clear{clear:both;}

.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.flo_l{float:left; margin-right:15px;}
.flo_r{float:right; margin-left:15px;}
.bold{font-weight:bold;}
.normal{font-weight:normal;}
.special_content_box{
  border:4px solid #DDD;
  padding:10px 20px;
  margin:30px 0;
}
.pdd_b10{padding-bottom: 10px;}

/* pc */
/*ここにpc用スタイルを記述*/
#header_img{height:120px;}
h2.listh2{width:96%; max-width:1024px; margin:15px auto; padding: 15px 0; line-height:1.3em; border-bottom:#0096AE 2px solid; font-size:20px; font-weight:bold;}
#sustainability .lead_box_heading{margin:10px 0 20px 0; font-weight: bold; font-size: 18px; color:#45b035;}
h4.sush4{border-left: 6px solid #45b035; padding: 5px 15px; margin: 60px 0 20px; font-size: 1.5em; font-weight: bold;}
#sustainability h3.topic{font-size:1.3em; font-weight:bold; color:#00558D; line-height:1.5; padding:0 0 15px 0;}
.icon{float: left; margin: 0 10px 0 0;}
.activities_box{display: flex; flex-wrap: wrap;}
.activities_box div{background: #D8F0EC; border-radius: 5px; padding: 10px; margin:10px; width:calc(50% - 40px);}
ul.sus_plant{margin:10px 0 0 20px; width:calc(100% - 110px); float: left;}
.graph_title{font-weight: bold; font-size: 1.25em; margin: 20px 0 10px; border-left: 6px solid #333; padding-left: 10px;}

.gunma-complex{color:#00558D; border: 1px solid #00558D; padding:10px 20px; margin: 20px 0 20px;}
.gunma-complex .flo_l{width: 200px;}
.gunma-complex .flo_r{width:calc(100% - 230px);}

.examples_box{margin: 60px 0 20px; padding: 30px 20px 1px; color: #FFF;}
.examples_box.bgc_01{background:#00558D;}
.examples_box.bgc_02{margin: 20px 0 20px; background:#2a99d8;}
.examples_box>h4{font-size: 1.3em; font-weight: bold; margin: 0 0 20px;}
.examples{margin: 0 0 30px;}
.examples_img{width: 40%; margin:0 5% 0 0; float: left;}
.examples_img img{width:100%; height: auto;}
.examples_txt h5{font-size: 1.5em; font-weight: bold; margin: 0 0 10px;}
.examples_txt span{font-size: 0.6em; display: inline-block; line-height: 1.4em; font-weight: normal; padding: 2px 10px 0; background: #FFF; color:#00558D;}
.examples_txt .fsize_s{display: inline; font-size: 0.8em;}
.point{background: #DFED72; color: #333; padding: 20px; border-radius: 5px;}
.point img{float: left; margin: 0 15px 0 0;}

.examples_box.bgc_03{margin: 20px 0 20px;  border: 3px solid #00489F; color: #333; padding: 20px 20px 1px;}
.examples_box.bgc_03>h4{font-size: 1.3em; font-weight: bold; margin: 0 0 20px; background:#00489F; color: #FFF; text-align: center; padding: 15px 0;}
.examples_box.bgc_03 .examples_img{width: 44%; margin:0 0 0 3%; float: right;}
.examples_box.bgc_03 .examples_txt h5{border-left: 4px solid #00489F; padding: 4px 0 4px 8px} 
.examples_box.bgc_03 .examples_txt span{font-size: 0.6em; display: inline-block; line-height: 1.4em; font-weight: normal; padding: 2px 10px 0; background: #2DB000; color:#FFF;}
.examples_box.bgc_03 .examples_txt span.bg_matsuida{background: #0090CC;}
.fig_box{text-align: center;}
.fig_box img{max-width: 100%; height: auto;}

.side_bunner_box{text-align: center; margin: 5px 0 0;}
.side_bunner_box img{max-width: 100%; height: auto;}

.lead_box{padding: 20px; background: #D8F3C6}
.lead{font-size:14px; font-weight:bold; padding:0; margin-bottom:20px;}
.content_box{width:96%; max-width:1024px; margin:0 auto;}
.content_box>h3{font-size: 18px; background:#00558D; color: #FFF; padding:10px; margin: 40px 0 30px;}
/*.content_box>ul{list-style:none; width:102%; margin:0 0 40px -2%; overflow:hidden;}
.content_box>ul>li{display:block; width:31.3333%; max-width:330px; float:left; margin:0 0 40px 2%;}*/
.content_box>ul{list-style:none; width:101.5%; margin:0 0 20px -1.5%; overflow:hidden;}
.content_box>ul>li{display:block; width:23.5%; max-width:330px; float:left; margin:0 0 20px 1.5%;}
.content_box>ul>li a{color:#333;}
.content_box>ul>li a:hover, .content_box>ul>li a:focus{color:#666; text-decoration:none;}
.list_img{width:100%; height:146px; overflow:hidden;}
.list_img img{width:100%; height:auto; transition: .3s ease-in-out;}
a:hover .list_img img{-webkit-transform:scale(1.03,1.03); -moz-transform:scale(1.03,1.03); -ms-transform:scale(1.03,1.03); -o-transform:scale(1.03,1.03); transform: scale(1.03,1.03);}
.content_box h4{font-size:18px; padding:13px 0 13px 20px; font-weight:bold; background:url(../png/arrow_index.png) no-repeat 0 50%;}

.sustainability_product{text-align: center; margin: 30px 0 0;}
.sustainability_product img{max-width: 100%; height: auto;}

.pdf_dl{margin: 0 0 40px;}
.pdf_dl img.thumb{border: #CCC 1px solid;margin-right: 15px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);}


table.sdgs{
  width:100%;
  border-left:#00558D 1px solid;
  border-bottom:#00558D 1px solid;
  padding:0;
  margin:0;
  border-collapse:collapse;
  border-spacing:0;
  line-height: 1.5em;
}

table.sdgs th{
  padding:5px;
  text-align:center;
  font-weight:bold;
  border-top:#00558D 1px solid;
  border-right:#DDD 1px solid;
  background:#00558D;
	color: #FFF;
}

table.sdgs td{
  padding:5px;
  vertical-align:top;
  text-align:left;
  border-top:#00558D 1px solid;
  border-right:#00558D 1px solid;
}

table.sdgs td.usage{font-weight: bold; white-space: nowrap; background: #CAE2F7;}
table.sdgs td.img_sdgs{background: #EEE;}

/*新着情報*/
dl#news_list{font-size: 15px;}
dl#news_list dt{width:200px; float:left; padding:15px 0;}
dl#news_list dd{padding:15px 0 15px 200px; border-bottom: 1px dotted #CCC;}
dt.news_info{background:url(../gif/icon_news_info.gif) no-repeat 105px 50%;}
dt.news_event{background:url(../gif/icon_news_event.gif) no-repeat 105px 50%;}
dt.news_product{background:url(../gif/icon_news_product.gif) no-repeat 105px 50%;}
dt.news_release{background:url(../gif/icon_news_release.gif) no-repeat 105px 50%;}
dt.news_others{background:url(../gif/icon_news_others.gif) no-repeat 105px 50%;}


/*************** サイドメニュー（PC） *********************************/

/*階層1*/
#sidemenu_box{width:23%; margin:0 3% 30px 0; padding:0; float:left;}

.sidemenu,
.sidemenu_sub,
.sidemenu_sub_sub{list-style:none;}
.sidemenu{padding-bottom:10px; background:url(../gif/bg_shadow.gif) repeat-x bottom;}

li.main{
  font-size:14px;
  font-weight:bold;
  border-top:1px solid #DDD;
  border-left:1px solid #DDD;
  border-right:1px solid #DDD;
}

li.main a{
  display:block;
  width:94%;
  padding:7px 3%;
  color:#333;
}

li.main a:hover,
li.main a:focus{
  display:block;
  width:94%;
  padding:7px 3%;
  color:#FFF;
  text-decoration:none;
  background:#0096AE;
}

/*カレント表示*/

#sustainability a#main_sustainability{
  display:block;
  color:#FFF;
  text-decoration:none;
  background:#0096AE;
}

#side_sustainability #main_sustainability{
  display:block;
}

/*階層2*/

.sidemenu_sub li{
  border-top:1px solid #DDD;
  font-size:12px;
  line-height:1.5;
}

.sidemenu_sub li span,
.sidemenu_sub li a{
  background:url(../gif/arrow_blue.gif) no-repeat 5px 13px;
  display:block;
  width:88%;
  padding:7px 3% 7px 9%;
  font-weight:normal;
}

.sidemenu_sub li a:hover,
.sidemenu_sub li a:focus{
  background:url(../gif/arrow_blue.gif) no-repeat 5px 13px;
  display:block;
  width:88%;
  padding:7px 3% 7px 9%;
  font-weight:normal;
  color:#00778C;
}

.sidemenu_sub li a.active{
  background:url(../gif/arrow_blue.gif) no-repeat 5px 13px;
  display:block;
  width:88%;
  padding:7px 3% 7px 9%;
  font-weight:bold;
  color:#00778C;
}

/*階層3*/

.sidemenu_sub_sub li{
  border-top:none;
  font-size:inherit;
  line-height:1.5;
  background:#EEE;
}

.sidemenu_sub_sub li a{
  background:none;
  width:calc(100% - 20px);
  padding:5px 5px 5px 15px;
  font-weight:normal;
}

.sidemenu_sub_sub li a:hover,
.sidemenu_sub_sub li a:focus{
  background:none;
  width:calc(100% - 20px);
  padding:5px 5px 5px 15px;
  color:#00778C;
}

.sidemenu_sub_sub li a.active{
  background:none;
  font-weight:bold;
  width:calc(100% - 20px);
  padding:5px 5px 5px 15px;
  color:#00778C;
}

@media screen and (max-width: 768px) {
/*ここにスマホ用スタイルを記述*/

#content_box{width: 100%; float:none;}
.special_content_box{margin:15px 0 30px;}
.special_content_box h3{font-size:14px;}

/*************** サイドメニュー（SP） *********************************/

#sidemenu_box{
  width:100%;
  margin:0;
  padding:0;
  float:none;
}

.sidemenu,
.sidemenu_sub,
.sidemenu_sub_sub{
  list-style:none;
}

.sidemenu{
  padding-bottom:10px;
  background:none;
}

li.main:last-child{border-bottom:1px solid #DDD;}

.sidemenu_sub li span,
.sidemenu_sub li a{
  width:94%;
  padding:7px 0 7px 20px;
}

.sidemenu_sub li a:hover,
.sidemenu_sub li a:focus{
  width:94%;
  padding:7px 0 7px 20px;
}

.sidemenu_sub li a.active{
  width:94%;
  padding:7px 0 7px 20px;
}
}


/* tablet  */
@media print, screen and (min-width: 641px) and (max-width: 1023px) {
/*ここにtablet用スタイルを記述*/
#header_img,#banner_box{min-width: 750px;}
h2.listh2{min-width: 720px; margin: 15px;}
#wrapper{width:96%; min-width: 720px; margin:0 auto; padding:0 15px 30px;}
.content_box{min-width: 720px; padding: 0 15px;}


.list_img{width:100%; height:auto; overflow:hidden;}
.list_img img{width:100%; height:auto; transition:none;}
a:hover .list_img img{transform:none;}
}
 
/* smartPhone */
@media screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/
h2.listh2{width:96%; margin:15px auto; line-height:1.3em; border-bottom:#0096AE 2px solid; font-size:18px; font-weight:bold;}

.lead{font-size:12px;}
#header_img{height:100px;}
#breadcrumbs{display:none;}

#wrapper{width:96%; margin:0 auto; position:relative; padding-bottom:0;}

.flo_l{float:none; margin:0 0 15px 0;}
.flo_r{float:none; margin:0;}
.gunma-complex .flo_l{width:100%;}
.gunma-complex .flo_r{width:100%;}
.examples_img,.examples_box.bgc_03 .examples_img{width: 100%; margin:0 0 15px 0; float:none;}

.activities_box div{margin:10px 5px; width:calc(100% - 30px);}

.side_bunner_box{margin: 10px 0 5px;}
.side_bunner_box:last-child{margin: 5px 0 20px;}

.content_box{width:96%; margin:0 auto;}
.content_box>ul{list-style:none; width:100%; margin:0 0 60px; overflow:hidden;}
.content_box>ul>li{display:block; width:100%; max-width:inherit; float:none; margin:0 0 25px 0;}
.content_box>ul>li p{}
.content_box>ul>li a{color:#333;}
.content_box>ul>li a:hover, .content_box>ul>li a:focus{color:#666; text-decoration:none;}

.list_img{width:100%; height:auto; overflow:hidden;}
.list_img img{width:100%; height:auto; transition:none;}
a:hover .list_img img{transform:none;}
.list_img{width:100%; height:auto; overflow:hidden;}
.list_img img{width:100%; height:auto; transition:none;}
a:hover .list_img img{transform:none;}
.content_box h4{font-size:16px; padding:8px 0 0 20px; font-weight:bold; background:url(../png/arrow_index.png) no-repeat 0 70%;}

table.sdgs td.img_sdgs img{width: 80px; height: auto;}

/*新着情報*/
dl#news_list{margin: 0px auto 30px; font-size: 14px;}
dl#news_list dt{width:100%; float:none; padding:10px 0 0;}
dl#news_list dd{padding:0 0 10px; border-bottom: 1px dotted #CCC;}
dt.news_info{background:url(../gif/icon_news_info.gif) no-repeat 75px 80%; background-size: 55px;}
dt.news_event{background:url(../gif/icon_news_event.gif) no-repeat 75px 80%; background-size: 55px;}
dt.news_product{background:url(../gif/icon_news_product.gif) no-repeat 75px 80%; background-size: 55px;}
dt.news_release{background:url(../gif/icon_news_release.gif) no-repeat 75px 80%; background-size: 55px;}
dt.news_others{background:url(../gif/icon_news_others.gif) no-repeat 75px 80%; background-size: 55px;}


}