/*csr*/
#csr .headline{
 text-align: right;
 color:rgba(4,156,216,1);
 margin:1em 0;
}
#csr .headline span{
 display:inline-block;
 margin-right:1em;
}
#csr .headline::after{
  content: "";
  display: inline-block;
  width:40px;
  height:40px;
  background: url(../img/CSR_icon.png) center no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin:0 0 .5em 1em;
}
 /*////////////////////*/
#csr p.catch span{border:solid 1px rgba(4,156,216,1);}
#csr h2{background:rgba(4,156,216,1);}
#csr h2::before {border-top: 15px solid rgba(4,156,216,1);}

/*//////box_area/////*/
#csr .box_area{
 border: solid 2px rgba(4,156,216,1);
 border-radius:10px;
}
#csr .box_area h3{position: relative;}
#csr .box_area h3:after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -15px;
 width: 100%;
 height: 5px;
 background: -webkit-repeating-linear-gradient(-45deg, #04a5d8, #04a5d8 2px, #fff 2px, #fff 4px);
 background: repeating-linear-gradient(-45deg, #04a5d8, #04a5d8 2px, #fff 2px, #fff 4px);
}
#csr .box_area h3::before {
 content: "";
 position: absolute;
 left: 0;
 top: -15px;
 width: 100%;
 height: 5px;
 background: -webkit-repeating-linear-gradient(-45deg, #04a5d8, #04a5d8 2px, #fff 2px, #fff 4px);
 background: repeating-linear-gradient(-45deg, #04a5d8, #04a5d8 2px, #fff 2px, #fff 4px);
}


#csr .box_area h4{color:rgba(4,156,216,1);}
#csr .box_area h4{
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
}

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

#csr .box_area h4:before {
  border-left: solid 1px rgba(4,156,216,1);
  border-top: solid 1px rgba(4,156,216,1);
  top:0;
  left: 0;
}

#csr .box_area h4:after {
  border-right: solid 1px rgba(4,156,216,1);
  border-bottom: solid 1px rgba(4,156,216,1);
  bottom:0;
  right: 0;
}



#csr .box_area p:nth-of-type(1)::first-letter{
font-size: 160%;
color:rgba(4,156,216,1);
 }

 
 /*////////////////////*/

#csr .catch{color:rgba(4,156,216,1);}
#csr a{color:rgba(4,156,216,1);}
#csr a:hover{
  text-decoration: underline;
  color: rgba(96,96,96,1);
}
@media all and (min-width:960px) {
 #csr .catch{
  text-align: center;
 }
 #csr .sub_menu li{
  padding:0 2em;
 }
}
@media all and (max-width:961px) {
 #csr .catch{
  text-align: left;
 }
 #csr .sub_menu li{
  padding:0 1em;
  min-height:3em;
 }
}


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

#csr #article_list h5{
  position: relative;
  padding-left:1.5em;
}
#csr #article_list h5::before{
  position: absolute;
  content:"■";
  display:block;
  color:rgba(4,156,216,1);
  left:0;
}
#csr #article_list ul{
  margin-bottom:2em;
}
#csr #article_list li{
  position: relative;
  padding:0 0 0 1.5em;
  margin: 0;
}
#csr #article_list li::before{
  position: absolute;
  content:"・";
  display:block;
  color:rgba(4,156,216,1);
  left:0;
}
#csr #article_list li a{
  color:rgba(4,156,216,1);
}
#csr #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) {
#csr .catch{
    text-align: center;
  }
#csr .sub_menu li{
    padding:0 2em;
  }

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

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

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

#csr .attention_Area .txt_list{
    width: 600px;
    margin:0 auto;
}

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


#csr .arrow {
       border-left: 30px solid transparent;
       border-right: 30px solid transparent;
       border-top: 30px solid rgba(4,156,216,1);
       margin:30px auto;
}

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

}

@media all and (max-width:961px) {
  #csr .catch{
    text-align: left;
  }
  #csr .box_area h4 {
  display: block;
  text-align: center;
  }
  #csr .box_area h5 {
  display: block;
  }
  #csr .sub_menu li{
    padding:0 2em;
    min-height:3em;
  }
  #csr ul.other_list{
    width:100%;
    margin:2em auto;
  }
  #csr ul.other_list li{
    margin:1em auto;
    line-height:2em;
  }

  #csr .attention_Area h3{
    font-size: 80%;
  }
  #csr ul.txt_list{
    width:90%;
    margin:0 auto;
  }
  #csr ul.txt_list{
      font-size:80%;
  }
  #csr .icon_Area{
      width:90%;
      margin:1em auto;
  }
  #csr .icon_Area li{
      width:20%;
  }

  #csr .arrow {
         border-left: 15px solid transparent;
         border-right: 15px solid transparent;
         border-top: 15px solid rgba(4,156,216,1);
         margin:2em auto;
  }

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

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


.cer_bnr {
margin: auto;
border: solid 2px #0050ff;
padding:0 .5em;
border-radius: 8px;
transition: all .5s ease-in-out;
}
.cer_bnr a{
display: block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background: url(../img/csr/csr_logo.png) center center no-repeat;
background-size: contain;
aspect-ratio:900/160 ;
}

.cer_bnr:hover{
opacity: .5;
}
@media all and (min-width:960px) {
.cer_bnr {
width: 260px;
}
}
@media all and (max-width:961px) {
.cer_bnr {
width:60%;
}
}