/*ESG*/
#esg .headline{
  text-align: right;
  color:rgba(236,106,2,1);
  margin:1em 0;
}
#esg .headline span{
  display:inline-block;
  margin-right:1em;
}
#esg .headline::after{
    content: "";
    display: inline-block;
    width:40px;
    height:40px;
    background: url(../img/ESG_icon.png) center no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin:0 0 .5em 1em;
}
 /*////////////////////*/
#esg .catch{color:rgba(236,106,2,1);}
#esg p.catch span{border:solid 1px #ec6a02;}
#esg h2{background:rgba(236,106,2,1);}
#esg h2::before {border-top: 15px solid rgba(236,106,2,1);}
/*//////box_area/////*/
#esg .box_area{
  border: solid 2px #ec6a02;
  border-radius:10px;
  text-align: center;
}
#esg .box_area h3{position: relative;l}
#esg .box_area h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 100%;
  height: 5px;
  background: -webkit-repeating-linear-gradient(-45deg, #ec6a02, #ec6a02 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #ec6a02, #ec6a02 2px, #fff 2px, #fff 4px);
}
#esg .box_area h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: -15px;
  width: 100%;
  height: 5px;
  background: -webkit-repeating-linear-gradient(-45deg, #ec6a02, #ec6a02 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #ec6a02, #ec6a02 2px, #fff 2px, #fff 4px);
}
#esg .box_area h3 small{color:#ec6a02;}
#esg .box_area h4{color:#ec6a02;}

#esg .box_area h4{
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
}

#esg .box_area h4:before,#esg .box_area h4:after {
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

#esg .box_area h4:before {
  border-left: solid 1px #ec6a02;
  border-top: solid 1px #ec6a02;
  top:0;
  left: 0;
}

#esg .box_area h4:after {
  border-right: solid 1px #ec6a02;
  border-bottom: solid 1px #ec6a02;
  bottom:0;
  right: 0;
}


#esg .box_area p.txt{
    color: rgb(255 255 255);
    text-align: center;
    background: rgba(235,106,2,1);
    border-radius: 17px 17px 0 0;
}
#esg .box_area p.on_link{
text-align: right;
margin: 0 1em .5em 0;
}
#esg .box_area p.on_link a{
font-size: 80%;
color: rgba(235,106,2,1);
}
#esg .box_area p.on_link a:hover{
color: rgba(96,96,96,1);
}


/*//////sub_menu/////*/
#esg .sub_menu a{
  display: block;
  margin: auto;
  color:rgba(236,106,2,1);
}
#esg .sub_menu li{
  color: rgba(236,106,2,1) !important;
  border-left:solid 1px rgba(236,106,2,1);
  text-align: center;
}
#esg .sub_menu li:nth-child(3){
  border-right:solid 1px rgba(236,106,2,1);
}

#esg #environment .sub_menu li:nth-child(1),
#esg #society .sub_menu li:nth-child(2),
#esg #governance .sub_menu li:nth-child(3),
#esg .sub_menu li:hover{
  text-decoration:underline;
  -webkit-text-decoration-style: wavy;
  -moz-text-decoration-style: wavy;
  text-decoration-style:wavy;
  text-underline-offset: 3px;
}
/*////////////////////*/

#esg ul.other_list{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-around;
  border:dashed 2px;
  border-radius: 10px;
  }
#esg ul.other_list li:first-of-type{
width: 100%;
text-align: center;
font-size: 120%;
margin-bottom: 1em;
background:#ec6a02;;
color: #fff ;
}

#esg ul.other_list a{
  position: relative;
  color:#ec6a02;;
  text-decoration: underline;
  text-underline-offset: .3em;
}

#esg ul.other_list a::after{
  position: absolute;
  content:"▶︎";
  display: inline-block;
  right:-20%;
}
#esg ul.other_list a:hover::after{
  content:"▶︎";
  display: inline-block;
  right:-25%;
  transition: all .3s;
}
#esg ul.other_list{border-color:#ec6a02;}


#esg ul.txt_list a{color:#ec6a02;
  text-decoration: underline;
  text-underline-offset: .3em;
}

#esg ul.txt_list{
  position: relative;
}
#esg ul.txt_list li{
  margin:0;
  padding-left:1.5em;
}
#esg ul.txt_list li::before{
  position: absolute;
  content:"■";
  display:block;
  color:rgba(0,80,255,1);
  left:0;
}
#esg ul.txt_list a:hover{color:#ec6a02;
  text-decoration: none;
}

#esg .attention_Area{
  border:solid 2px rgba(236,106,2,1);
  border-radius:20px;
}
#esg .attention_Area .txt_list span{
  color:rgba(0,80,255,1);
}
#esg .attention_Area h3{
  text-align: center;line-height:1.5;
  border-bottom:solid 2px rgba(236,106,2,1);
  margin-bottom: 1em !important;
}
#esg .attention_Area h3 span{
  position: relative;
}
#esg .attention_Area h3::after,
#esg .attention_Area h3::before {
    background:none;
}
#esg ul.icon_Area{
  display:flex;
  justify-content:space-around;
  align-items: center;
  flex-wrap: wrap;
  }
#esg ul.icon_Area li{
  padding:0;
  margin-top:0;
  width:15%;
}

#esg ul.icon_Area .icon{
  width:100%;
  height:0;
  padding-top:100%;
}

#esg .box_area .ph_in{
  display: block;
  margin-top:1em;
}
#esg .fig{
  display: block;
  width: 100%;
  height:0;
  background-size: contain;
}

#esg .arrow {
       width: 0;
       height: 0;
}

/*///////// 記事 ///////////*/
/*///////// article_txt ///////////*/
#esg .article_txt{
  padding-bottom: 2em;
  border-bottom:solid 1px rgba(236,106,2,1);
}
#esg .article_txt p:nth-of-type(1)::first-letter{
font-size: 160%;
color:rgba(236,106,2,1);
 }
#esg .article_txt a{
  color:rgba(0,80,255,1);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
#esg .article_txt a::after{
  content:"▶︎";
  display:inline-block;
  color:rgba(0,80,255,1);
}
#esg .article_txt a:hover{
  opacity: 0.8;}
#esg .article_txt figcaption{
  font-size: 80%;
  line-height: 1.2;
  color: rgba(236,106,2,1);
  text-align: center;
margin-bottom:2em;
width: 100%;
}

#esg .article_txt .mini_box{
margin-bottom:3em;
}
#esg .article_txt .mini_box:last-of-type{
margin-bottom:0;
}
#esg .article_txt .mini_box p:nth-of-type(1)::first-letter{
font-size: 100% !important;
color:rgba(96,96,96,1);
 }
@media all and (max-width:961px) {
#esg .article_txt .mini_box p:nth-of-type(1)::first-letter{
font-size: 90% !important;
 }
}

/*///////// article_list ///////////*/

#esg #article_list h5{
  position: relative;
  padding-left:1.5em;
}
#esg #article_list h5::before{
  position: absolute;
  content:"■";
  display:block;
  color:rgba(236,106,2,1);
  left:0;
}
#esg #article_list ul{
  margin-bottom:2em;
}
#esg #article_list li{
  position: relative;
  padding:0 0 0 1.5em;
  margin: 0;
}
#esg #article_list li::before{
  position: absolute;
  content:"・";
  display:block;
  color:rgba(236,106,2,1);
  left:0;
}
#esg #article_list li a{
  color:rgba(236,106,2,1);
}
#esg #article_list li a:hover{
  color:rgba(96,96,96,1);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media all and (min-width:960px) {
#esg .catch{
    text-align: center;
  }
#esg .sub_menu li{
    padding:0 2em;
  }

#esg ul.other_list{
  width: 400px;
  margin:2em auto 0;
    padding:1em 2em 2em 2em;
}

#esg .attention_Area{
  width: 700px;
  margin:0 auto;
}

#esg .attention_Area h3 span{
  display: block;
padding:.5em 0;
}

#esg .attention_Area .txt_list{
    width: 600px;
    margin:0 auto 1.5em;
}

#esg .icon_Area{
    width: 600px;
    margin:30px auto;
}


#esg .arrow {
       border-left: 30px solid transparent;
       border-right: 30px solid transparent;
       border-top: 30px solid #ec6a02;
       margin:30px auto;
}

#esg .box_area .line_2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#esg .box_area .line_2 .ph_in{width:48%;}
#esg .box_area .line_1 .ph_in{width:70%;margin:0 auto;}
#esg .box_area p.txt{font-size: 120%;}

}

@media all and (max-width:961px) {
  #esg .catch{
    text-align: left;
  }
  #esg .box_area h4 {
  display: block;
  text-align: center;
  }
  #esg .box_area h5 {
  display: block;
  }
  #esg .sub_menu li{
    padding:0 2em;
    min-height:3em;
  }
  #esg ul.other_list{
margin:2em auto;
padding:1.5em 0;
  }
  #esg ul.other_list li{
width: 90%;
margin:1em auto 0;
line-height:2em;
}
  #esg ul.other_list li:first-of-type{
width: 90%;
font-size: 100%;
margin:0 auto;
}
  #esg .attention_Area h3{
    font-size: 80%;
  }
  #esg ul.txt_list{
    width:90%;
    margin:0 auto 1em;
  }
  #esg ul.txt_list{
      font-size:80%;
  }
  #esg .icon_Area{
      width:90%;
      margin:1em auto;
  }
  #esg .icon_Area li{
      width:20%;
  }

  #esg .arrow {
         border-left: 15px solid transparent;
         border-right: 15px solid transparent;
         border-top: 15px solid #ec6a02;
         margin:2em auto;
  }

  #esg .box_area .ph_in{width:100%;}
#esg .box_area .line_1 .ph_in{width:90%;margin:0 auto;}

  #esg .box_area p.txt{font-size: 100%;}
  /*///////// article_list ///////////*/
  #esg #article_list h5{
  margin-top:2em;
  line-height: 1.5;
  }
}

/*環境*/
#environment .attention_Area h3 span::before{
  content: "";
  background: url(../img/materiality_icon/icon_04.png) center no-repeat;
  background-size: contain;
}
#environment .fig{
  display: block;
  width: 100%;
  height:0;
  padding-top:29.2307692307692%;
  background-size: contain;
}
#environment section a.in_link{
  display:block;
  color:rgba(0,80,255,1);
  text-decoration: none;
  width:90%;
  margin:0 5% 1em;
}
#environment section a.in_link::after{
  content: "＞＞";
}
#environment section a.in_link:hover{
  opacity: 0.6;
}
/*記事*/
#environment .photo{
  display: block;
  width: 100%;
  height:0;
  padding-top:75%;
  background-size: contain;
  background-position: center center;
}

@media all and (min-width:960px) {
  #environment .attention_Area h3{line-height: 50px;}
  #environment .attention_Area h3 span::before{
    display: inline-block;
    width:50px;
    height:50px;
    vertical-align: top;
  }
  #environment .fig{
    margin:1em 0;
  }

}
@media all and (max-width:961px) {
  #environment .attention_Area h3 span{
    position:relative;
    display: block;
    padding-bottom:.5em;
  }
  #environment .attention_Area h3 span::before{
    display: block;
    margin:auto;
    width:40px;
    height:40px;
  }
  #environment .fig{
    margin:2em auto 1em;
  }
#environment section a.in_link{
  font-size: 70%;
}
}

/*社会*/
#society .attention_Area h3 span::before{
  content: "";
  background: url(../img/materiality_icon/icon_05.png) center no-repeat;
  background-size: contain;
}
#society .fig{
  display: block;
  width: 100%;
  height:0;
  padding-top:68.6%;
  background-size: contain;
}
/*記事*/
#society  .photo{
  display: block;
  width: 100%;
  height:0;
  padding-top:75%;
  background-size: contain;
  background-position: center center;
}

@media all and (min-width:960px) {
#society .attention_Area h3{line-height: 50px;}
#society .attention_Area h3 span::before{
  display: inline-block;
  width:50px;
  height:50px;
  vertical-align: top;
  }
}
@media all and (max-width:961px) {
#society .attention_Area h3 span{
    position:relative;
    display: block;
    padding-bottom:.5em;
  }
#society .attention_Area h3 span::before{
  display: block;
  margin:auto;
  width:40px;
  height:40px;
  }
}
/*ガバナンス*/
#governance .attention_Area h3 span::before{
  content: "";
  background: url(../img/materiality_icon/icon_06.png) center no-repeat;
  background-size: contain;
}
#governance .btn {
	display:inline-block;
	text-align: left;
	letter-spacing: .2em;
	text-indent: .2em;
	text-decoration: none;
	position: relative;
	background: rgba(236,106,2,1);
	color: #fff;
  font-size: 80%;
  line-height:1.5;
  padding:1em 50px 1em 30px;
}
#governance a.btn::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	width: 0;
	height: 0;
	margin: auto 0;
	border-top: solid 6px transparent;
	border-bottom: solid 6px transparent;
	border-left: solid 12px #fff;
}
#governance .btn small{
  display: block;
}

#governance .btn:hover {
	background: rgba(236,106,2,0.8);
}

#governance .fig{
  display: block;
  width: 100%;
  height:0;
  padding-top:68.6%;
  background-size: contain;
}
@media all and (min-width:960px) {
#governance .attention_Area h3{line-height: 50px;}
#governance .attention_Area h3 span::before{
    display: inline-block;
    width:50px;
    height:50px;
    vertical-align: top;
  }
  #governance .btn {
    margin:80px auto 0;
  }
}
@media all and (max-width:961px) {
#governance .attention_Area h3 span{
    position:relative;
    display: block;
    padding-bottom:.5em;
  }
#governance .attention_Area h3 span::before{
    display: block;
    margin:auto;
    width:40px;
    height:40px;
  }
}


/*btn*/
#esg .btn {
	display:inline-block;
	text-align: left;
	letter-spacing: .2em;
	text-indent: .2em;
	text-decoration: none;
	position: relative;
	background: rgba(236,106,2,1);
	color: #fff;
  font-size: 80%;
  line-height:1.5;
  letter-spacing:0.01em;
}
#esg a.btn::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	width: 0;
	height: 0;
	margin: auto 0;
	border-top: solid 6px transparent;
	border-bottom: solid 6px transparent;
	border-left: solid 12px #fff;
}

#esg .btn small{
  display: block;
}

#esg .btn:hover {
	background: rgba(236,106,2,0.8);
}

@media all and (min-width:960px) {
#esg .btn {
  margin:80px auto 0;
  padding:1em 50px 1em 30px;
  }
}
@media all and (max-width:961px) {
#esg .btn {
  font-size: 60%;
  margin:3em auto 0;
  padding:1em 40px 1em 20px;
  }
}


/*pdfリスト*/
#esg ul.pdf_list{
position: relative;
}
#esg ul.pdf_list li{
line-height: 1;
padding: 0;
margin:0 0 1em 1.5em;
}
#esg ul.pdf_list li:last-child{
margin-bottom: 0;
}

#esg ul.pdf_list li::before{
position: absolute;
content:"PDF";
font-size: 80%;
display: inline-block;
color:rgba(255,255,255,1);
background:rgba(236,106,2,0.8);
padding:.2em;
left:0;
}

#esg ul.pdf_list a::after{
  display:none ;
}

#esg ul.pdf_list a{
  color:rgba(236,106,2,1);
}
#esg ul.pdf_list a:hover{
  color:rgba(96,96,96,1);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media all and (min-width:960px) {
#esg ul.pdf_list{
      padding:2em 0 0 1.5em;
}
}
@media all and (max-width:961px) {
#esg ul.pdf_list{
      padding:1em 0 0 1.5em;
}
}
/*///////////////// customize ////////////////*/

#esg div.link_Area{
border-top: solid 2px rgba(236,106,2,1);
margin-top:3em;
padding-top:3em;
}