@charset "utf-8";


/*------------------------------------------------- 
    20191015
---------------------------------------------------*/

/* ▼共通▼ */
.mb1{
  margin-bottom: 1em;
}
.mb2{
  margin-bottom: 2em;
}
.mb30{
  margin-bottom: 30px;
}
.mb40{
  margin-bottom: 40px;
}
.mb60{
  margin-bottom: 60px;
}
.mt1{
  margin-top: 1em;
}
.ml1{
  margin-left: 1em;
}
.taC{
  text-align: center !important;
}
.taR{
  text-align: right !important;
}
.taL{
  text-align: left !important;
}
.bold{
  font-weight: bold;
}

.red{
  color: #f00;
}
.blue{
  color: #4472C4;
}

.viewPc{
  display: block;
}
.viewSp{
  display: none;
}

.imgw{
  text-align: center !important;

}
.imgw img{
  width: 100%;
  height: auto;
}

/* TABLE */
.csrTbl {
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 1.3;
}
.csrTbl th {
  text-align: center;
  font-size: 13px;
  padding: 10px 5px;
  vertical-align: middle;
  border-color: #666;
}
.csrTbl td {
  background-color: #fff;
  vertical-align: middle;
  padding: 10px 5px;
  font-size: 13px;
  border-color: #666;
}
.csrTbl td .indent {
  text-indent: -1em;
  padding-left: 1em;
}
.csrTbl td .indent2 {
  text-indent: -1em;
  padding-left: 1em;
  margin: 0 0 0 1em !important;
}

.csrTbl.cl1 .bgc1 { background-color: #ccc; color: #333;}
.csrTbl.cl1 .bgc2 { background-color: #E2E2E2;}
.csrTbl.cl1 .bgc3 { background-color: #C8E6F5;}
.csrTbl.cl1 .bgc4 { background-color: #EBF6FC;}

.csrTbl.cl2 .bgc1 { background-color: #ccc; color: #333;}
.csrTbl.cl2 .bgc2 { background-color: #E2E2E2;}
.csrTbl.cl2 .bgc3 { background-color: #CDDBBE;}
.csrTbl.cl2 .bgc4 { background-color: #ECF1E6;}

.csrTbl.cl3 .bgc1 { background-color: #ccc; color: #333;}
.csrTbl.cl3 .bgc2 { background-color: #E2E2E2;}
.csrTbl.cl3 .bgc3 { background-color: #FCDCB7;}
.csrTbl.cl3 .bgc4 { background-color: #FEF2E3;}

.csrTbl.cl4 .bgc1 { background-color: #ccc; color: #333;}
.csrTbl.cl4 .bgc2 { background-color: #E2E2E2;}
.csrTbl.cl4 .bgc3 { background-color: #DCC9E2;}
.csrTbl.cl4 .bgc4 { background-color: #F1EBF4;}

.csrTbl2 {
  margin-bottom: 0;
  padding-bottom: 0;
}
.csrTbl2 th {
  text-align: center;
  font-size: 13px;
  padding: 5px 2px;
  vertical-align: middle;
  border-bottom: 6px solid #fff;
  border-color: #fff;
  background-color: #089CE2;
  color: #fff;
  font-weight: bold;
}
.csrTbl2 td {
  background-color: #fff;
  vertical-align: middle;
  padding: 5px 2px;
  font-size: 13px;
  border-bottom: 6px solid #fff;
  border-color: #fff;
}

/* SP */
@media screen and ( max-width: 768px ) {
  .csrTbl th {
    font-size: 12px;
    padding: 5px;
  }
  .csrTbl td {
    padding: 5px;
    font-size: 12px;
  }
  .mb30{
    margin-bottom: 15px;
  }
  .mb40{
    margin-bottom: 20px;
  }
  .mb60{
    margin-bottom: 30px;
  }
  .viewPc{
    display: none;
  }
  .viewSp{
    display: inline-block;
  }
}

@media screen and ( max-width: 480px ) {

  img.img_w{
    width: 100%;
    height: auto;
  }
  .w1024{
    min-width: 1024px;
  }

}



/* Pdca
----------------------------------------*/
#pdca {
  padding-top: 40px;
}
#pdca .pdcaArea {
  padding-bottom: 80px;
}
#pdca .caps {
  font-size: 13px;
  text-align: right;
}
#pdca table {
  min-width: 1140px;
}
#pdca h2,
#pdca h3,
#pdca h4{
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#pdca h2 {
  font-size: 28px;
  margin-bottom: 40px;
}
#pdca h3 {
  font-size: 18px;
  margin-bottom: 20px;
}
#pdca h4 {
  font-size: 16px;
  margin-bottom: 10px;
}
#pdca h2.type1,
#pdca h3.type1,
#pdca h4.type1 span{
  color:#148ECE;
}
#pdca h2.type2,
#pdca h3.type2,
#pdca h4.type2 span{
  color:#207F2C;
}
#pdca h2.type3,
#pdca h3.type3,
#pdca h4.type3 span{
  color:#E96E04;
}
#pdca h2.type4,
#pdca h3.type4,
#pdca h4.type4 span{
  color:#78247C;
}

/* SP */
@media screen and ( max-width: 768px ) {
  #pdca .caps {
    font-size: 12px;
    text-align: left;
  }
}


/* Csr Top
----------------------------------------*/
#csrTop {
  padding-top: 40px;
  max-width: 1140px;
  margin: 0 auto;
}
#csrTop dl,
#csrTop dt,
#csrTop dd,
#csrTop h2,
#csrTop h3,
#csrTop ul,
#csrTop li{
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#csrTop .sct01{
  margin-bottom: 40px;
}
#csrTop .sct01 .cl01 {
  float: left;
  width: 49%;
}
#csrTop .sct01 .cl02 {
  float: right;
  width: 49%;
  max-width: 554px;
}
#csrTop .sct01 .cl01 li {
  position: relative;
  color: #fff;
}
#csrTop .sct01 .cl01 li + li {
  margin-top: 28px;
}
#csrTop .sct01 .cl01 li:hover {
  opacity: 0.8;
}
#csrTop .sct01 .cl01 li a { 
  color: #fff;
  font-weight: bold;
}
#csrTop .sct01 .cl01 li p span {
  display: inline-block;
  font-size: 18px;
  padding-bottom: 10px;
}
#csrTop .sct01 .cl01 li.link01 p {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 240px;
}
#csrTop .sct01 .cl01 li.link02 p {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 240px;
}

#csrTop .sct01 .cl02 dl {
  border: 1px solid #C8C8C8;
  background-color: #fff;
}
#csrTop .sct01 .cl02 dt {
  position: relative;
}
#csrTop .sct01 .cl02 dtimg {
  vertical-align: bottom;
}
#csrTop .sct01 .cl02 dt:hover {
  opacity: 0.8
}
#csrTop .sct01 .cl02 dt a {
  color: #fff;
  font-weight: bold;
}
#csrTop .sct01 .cl02 dt p {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 240px;
}
#csrTop .sct01 .cl02 dt p span {
  display: inline-block;
  font-size: 18px;
  padding-bottom: 5px;
}
#csrTop .sct01 .cl02 dd {
  padding: 20px 10px 10px;
  background-color: #fff;
}
#csrTop .sct01 .cl02 dd li {
  float: left;
  width: 49%;
  font-weight: bold;
  box-sizing: border-box;
  margin-top: 10px;
}
#csrTop .sct01 .cl02 dd li:nth-child(2n) {
  float: right;
}

#csrTop .sct01 .cl02 dd li.btn01 {
  color: #148ECE;
  border: 2px solid #148ECE;
  border-radius: 15px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/top_img13.jpg") 0 0 no-repeat;
  background-size: 96px 98px;
  min-height: 98px;
}
#csrTop .sct01 .cl02 dd li.btn01 a {
  display: block;
  padding: 25px 0 0 116px;
  color: #148ECE;
}
#csrTop .sct01 .cl02 dd li.btn01 a span {
  color: #333;
  display: inline-block;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/top_img17.jpg") 100% 47% no-repeat;
  padding-right: 15px;
}
#csrTop .sct01 .cl02 dd li.btn02 {
  color: #207F2C;
  border: 2px solid #207F2C;
  border-radius: 15px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/top_img14.jpg") 0 0 no-repeat;
  background-size: 96px 98px;
  min-height: 98px;
}
#csrTop .sct01 .cl02 dd li.btn02 a {
  display: block;
  padding: 11px 0 0 116px;
  color: #207F2C;
}
#csrTop .sct01 .cl02 dd li.btn02 a span {
  color: #333;
  display: inline-block;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/top_img18.jpg") 100% 47% no-repeat;
  padding-right: 15px;
}
#csrTop .sct01 .cl02 dd li.btn02 a font {
  color: #333;
}
#csrTop .sct01 .cl02 dd li.btn03 {
  color: #E96E04;
  border: 2px solid #E96E04;
  border-radius: 15px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/top_img15.jpg") 0 0 no-repeat;
  background-size: 96px 98px;
  min-height: 98px;
}
#csrTop .sct01 .cl02 dd li.btn03 a {
  display: block;
  padding: 25px 0 0 116px;
  color: #E96E04;
}
#csrTop .sct01 .cl02 dd li.btn03 a span {
  color: #333;
  display: inline-block;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/top_img19.jpg") 100% 47% no-repeat;
  padding-right: 15px;
}
#csrTop .sct01 .cl02 dd li.btn04 {
  color: #8F4C9B;
  border: 2px solid #8F4C9B;
  border-radius: 15px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/top_img16.jpg") 0 0 no-repeat;
  background-size: 96px 98px;
  min-height: 98px;
}
#csrTop .sct01 .cl02 dd li.btn04 a {
  display: block;
  padding: 11px 0 0 116px;
  color: #8F4C9B;
}
#csrTop .sct01 .cl02 dd li.btn04 a span {
  color: #333;
  display: inline-block;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/top_img20.jpg") 100% 47% no-repeat;
  padding-right: 15px;
}
#csrTop .sct01 .cl02 dd li.btn04 a font {
  color: #333;
}


#csrTop .sct01 .cl02 dd li:hover {
  opacity: 0.8;
}

#csrTop .sct02{
  margin-bottom: 40px;
}
#csrTop .sct02 .menu li{
  float: left;
  width: 100%;
  max-width: 350px;
}
#csrTop .sct02 .menu li + li{
  margin-left: 40px;
}
#csrTop .sct02 .menu li:hover{
  opacity: 0.9;
}
#csrTop .sct02 .menu li img{
  vertical-align: bottom;
}
#csrTop .sct02 .menu .box{
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/csr/img/img04.png) 98% 91% no-repeat;
  background-color: #004386;
  padding: 15px 10px;
  color: #fff;
}
#csrTop .sct02 .menu .box h2{
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}
#csrTop .sct02 .menu .box .txt{
  font-size: 14px;
  line-height: 1.5;
}

#csrTop .sct03{
  margin-bottom: 40px;
}
#csrTop .sct03 .cl01 {
  float: left;
  width: 49%;
}
#csrTop .sct03 .cl02 {
  float: right;
  width: 49%;
}
#csrTop .sct03 dl{
  padding: 10px;
  background-color: #E2E2E2;
}
#csrTop .sct03 dt{
  float: left;
}
#csrTop .sct03 dd{
  padding-left: 130px;
}
#csrTop .sct03 dd h3{
  font-size: 18px;
  margin-bottom: 5px;
}
#csrTop .sct03 dd .txt{
  font-size: 14px;
  margin-bottom: 10px;
}
#csrTop .sct03 dd .btn{
  float: right;
  display: inline-block;
  background-color: #fff;
  min-width: 180px;
}
#csrTop .sct03 dd .btn a{
  display: block;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/img/top_img10.png) 95% 50% no-repeat;
  padding: 3px 10px;
  text-align: center;
  color: #000;
}#csrTop .sct03 dd .btn a:hover{
  text-decoration: underline;
}

#csrTop .sct04{
  margin-bottom: 40px;
}
/*
#csrTop .sct04 li{
  float: left;
  width: 19%;
  margin-right: 0.6%;
}
*/
#csrTop .sct04 li{
  float: left;
  width: 21%;
  margin-right: 5%;
}
#csrTop .sct04 li:last-child{
  margin-right: 0;
}
#csrTop .sct04 li.link01,
#csrTop .sct04 li.link02{
  border: 1px solid #CCC;
  background-color: #EFF7F9;
  padding-top: 12px;
}
#csrTop .sct04 li.link01 a{
  display: block;
  padding: 22px 10px 22px 30px;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/img/top_img11.png) 10px 50% no-repeat;
  background-color: #fff;
  color: #000;
  font-size: 14px;
}
#csrTop .sct04 li.link02 a{
  display: block;
  padding: 12px 10px 11px 30px;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/img/top_img11.png) 10px 23px no-repeat;
  background-color: #fff;
  color: #000;
  font-size: 14px;
}
#csrTop .sct04 li a:hover{
  text-decoration: underline;
}


/* SP */
@media screen and ( max-width: 768px ) {

  #csrTop img{
    width: 100%;
    height: auto;
  }
  
  #csrTop .sct01{
    margin-bottom: 20px;
  }
  #csrTop .sct01 .cl01 {
    float: none;
    width: 100%;
  }
  #csrTop .sct01 .cl02 {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-top: 15px;
  }
  #csrTop .sct01 .cl01 li + li {
    margin-top: 15px;
  }
  #csrTop .sct01 .cl01 li p span {
    font-size: 2.8vw;
    padding-bottom: 0;
  }
  #csrTop .sct01 .cl01 li.link01 p {
    top: auto;
    bottom: 3vw;
    left: 15px;
    font-size: 2.3vw;
    width: 100%;
    line-height:1.3;
  }
  #csrTop .sct01 .cl01 li.link02 p {
    top: auto;
    bottom: 3vw;
    left: 15px;
    font-size: 2.3vw;
    width: 100%;
line-height:1.3;
  }
  #csrTop .sct01 .cl02 dt p {
    top: auto;
    bottom: 2vw;
    left: 15px;
    font-size: 2.3vw;
    width: 100%;
    line-height:1.3;
  }
  #csrTop .sct01 .cl02 dt p span {
    font-size: 2.8vw;
    padding-bottom: 0;
  }
  #csrTop .sct01 .cl02 dd {
    padding: 0 10px 10px;
    background-color: #fff;
  }
  #csrTop .sct01 .cl02 dd li {
    float: none;
    width: 100%;
    font-size: 14px;
  }
  #csrTop .sct01 .cl02 dd li:nth-child(2n) {
    float: none;
  }
  #csrTop .sct01 .cl02 dd li.btn01,
  #csrTop .sct01 .cl02 dd li.btn02,
  #csrTop .sct01 .cl02 dd li.btn03,
  #csrTop .sct01 .cl02 dd li.btn04{
      min-height: 52px;
      background-size: 48px 49px;
      border-radius: 8px;
  }
  #csrTop .sct01 .cl02 dd li.btn01 a,
  #csrTop .sct01 .cl02 dd li.btn02 a,
  #csrTop .sct01 .cl02 dd li.btn03 a,
  #csrTop .sct01 .cl02 dd li.btn04 a{
    display: block;
    padding: 3px 0 0 58px;
    font-size: 14px;
  }
  

  #csrTop .sct02{
    margin-bottom: 20px;
  }
  #csrTop .sct02 .menu li{
    float: none;
    width: 100%;
    max-width: 100%;
  }
  #csrTop .sct02 .menu li + li{
    margin-left: 0;
    margin-top: 15px;
  }
  #csrTop .sct02 .menu .box h2{
    font-size: 14px;
  }
  #csrTop .sct02 .menu .box .txt{
    font-size: 12px;
  }

  #csrTop .sct03{
    margin-bottom: 20px;
  }
  #csrTop .sct03 .cl01 {
    float: none;
    width: 100%;
  }
  #csrTop .sct03 .cl02 {
    float: none;
    width: 100%;
    margin-top: 15px;
  }
  #csrTop .sct03 dd h3{
    font-size: 14px;
  }
  #csrTop .sct03 dd .txt{
    font-size: 12px;
  }

  #csrTop .sct04{
    margin-bottom: 0;
  }
  #csrTop .sct04 li{
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  #csrTop .sct04 li.link01,
  #csrTop .sct04 li.link02{
    border: 1px solid #CCC;
    background-color: #EFF7F9;
    padding-top: 15px;
  }
  #csrTop .sct04 li.link01 a{
    display: block;
    padding: 16px 10px 16px 30px;
  }
  #csrTop .sct04 li.link02 a{
    display: block;
    padding: 10px 10px 10px 30px;
  }

}


/* Magazine
----------------------------------------*/
#magazine {
  max-width: 1140px;
  margin: 0 auto;
}

#magazine h1 {
  text-align: center;
}

#magazine .sct01 { margin-bottom: 40px;}
#magazine .sct01 dl,
#magazine .sct01 dt,
#magazine .sct01 dd,
#magazine .sct01 dt h2,
#magazine .sct01 dd h3{
  padding: 0;
  margin: 0;
}
#magazine .sct01 dl dt {
  float: left;
  width: 17%;
}
#magazine .sct01 dl dd {
  float: right;
  width: 81%;
  padding-top: 10px;
}
#magazine .sct01 dl dd h3 {
  font-size: 36px;
  padding: 0 0 0 110px;
  margin-bottom: 10px;
  min-height: 90px;
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_01.png) 0 0 no-repeat;
  background-size: 90px 90px;
}
#magazine .sct01 dl dd h3.sdgs01,
#magazine .sct04 .sdgsList li.sdgs01{
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_01.png);
}
#magazine .sct01 dl dd h3.sdgs02,
#magazine .sct04 .sdgsList li.sdgs02 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_02.png);
}
#magazine .sct01 dl dd h3.sdgs03,
#magazine .sct04 .sdgsList li.sdgs03 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_03.png);
}
#magazine .sct01 dl dd h3.sdgs04,
#magazine .sct04 .sdgsList li.sdgs04 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_04.png);
}
#magazine .sct01 dl dd h3.sdgs05,
#magazine .sct04 .sdgsList li.sdgs05 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_05.png);
}
#magazine .sct01 dl dd h3.sdgs06,
#magazine .sct04 .sdgsList li.sdgs06 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_06.png);
}
#magazine .sct01 dl dd h3.sdgs07,
#magazine .sct04 .sdgsList li.sdgs07 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_07.png);
}
#magazine .sct01 dl dd h3.sdgs08,
#magazine .sct04 .sdgsList li.sdgs08 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_08.png);
}
#magazine .sct01 dl dd h3.sdgs09,
#magazine .sct04 .sdgsList li.sdgs09 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_09.png);
}
#magazine .sct01 dl dd h3.sdgs10,
#magazine .sct04 .sdgsList li.sdgs10 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_10.png);
}
#magazine .sct01 dl dd h3.sdgs11,
#magazine .sct04 .sdgsList li.sdgs11 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_11.png);
}
#magazine .sct01 dl dd h3.sdgs12,
#magazine .sct04 .sdgsList li.sdgs12 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_12.png);
}
#magazine .sct01 dl dd h3.sdgs13,
#magazine .sct04 .sdgsList li.sdgs13 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_13.png);
}
#magazine .sct01 dl dd h3.sdgs14,
#magazine .sct04 .sdgsList li.sdgs14 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_14.png);
}
#magazine .sct01 dl dd h3.sdgs15,
#magazine .sct04 .sdgsList li.sdgs15 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_15.png);
}
#magazine .sct01 dl dd h3.sdgs16,
#magazine .sct04 .sdgsList li.sdgs16 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_16.png);
}
#magazine .sct01 dl dd h3.sdgs17,
#magazine .sct04 .sdgsList li.sdgs17 {
  background-image: url(/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_17.png);
}
#magazine.type1 .sct01 dl dd h3 {
  color: #148ECE;
}
#magazine.type2 .sct01 dl dd h3 {
  color: #207F2C;
}
#magazine.type3 .sct01 dl dd h3 {
  color: #E96E04;
}
#magazine.type4 .sct01 dl dd h3 {
  color: #78247C;
}
#magazine .sct01 dl dd h3.none {
  color: #333333 !important;
}

#magazine .sct01 dl dd p {
  line-height: 1.8;
}

#magazine .sct02 { margin-bottom: 20px;}
#magazine .sct02 .prof{
  position: relative;
}
#magazine .sct02 .prof p{
  position: absolute;
  bottom: 0;
  left: 212px;
}
#magazine .sct02 .prof p .name{
  display: inline-block;
  padding-top: 10px;
  font-size: 20px;
  font-weight: bold;
}

#magazine .sct03 { margin-bottom: 40px;}
#magazine .sct03 h2,
#magazine .sct03 .txtBox h3{
  padding: 0;
  margin: 0;
}
#magazine .sct03 .txtBox p {
  line-height: 2;
}
#magazine .sct03 .txtBox h3{
  color: #089CE2;
  font-size: 16px;
  margin-bottom: 10px;
}
#magazine .sct03 h2 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/img/case01_img04.png) 0 50% no-repeat;
  color: #fff;
  font-size: 28px;
  margin-bottom: 20px;
}
#magazine.type1 .sct03 h2 {
  background-color:#148ECE;
}
#magazine.type2 .sct03 h2 {
  background-color:#207F2C;
}
#magazine.type3 .sct03 h2 {
  background-color:#E96E04;
}
#magazine.type4 .sct03 h2 {
  background-color:#78247C;
}
#magazine .sct03 h2 span {
  display: inline-block;
  padding: 13px 10px 13px 30px;
}

#magazine.type1 .sct03 h2.tp2020 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/img/2020/case01_bg01.png) 0 50% no-repeat;
  background-color:#DEEFF8;
}
#magazine.type2 .sct03 h2.tp2020 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/img/2020/case02_bg01.png) 0 50% no-repeat;
  background-color:#DDEDE0;
}
#magazine.type3 .sct03 h2.tp2020 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/img/2020/case03_bg01.png) 0 50% no-repeat;
  background-color:#FDF0E1;
}
#magazine.type4 .sct03 h2.tp2020 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/img/2020/case04_bg01.png) 0 50% no-repeat;
  background-color:#EEE5F1;
}
#magazine.type1 .sct03 h2.tp2020 span,
#magazine.type2 .sct03 h2.tp2020 span,
#magazine.type3 .sct03 h2.tp2020 span,
#magazine.type4 .sct03 h2.tp2020 span{
  color: #333;
}

#magazine .sct03 .step2 .cl01 {
  float: left;
  width: 48%;
}
#magazine .sct03 .step2 .cl02 {
  float: right;
  width: 48%;
  text-align: right;
}
#magazine .sct03 .step2 .cl02.left {
  text-align: left;
}

#magazine .sct03 .step3 .cl01 {
  float: left;
  width: 33%;
}
#magazine .sct03 .step3 .cl02 {
  float: left;
  width: 33%;
  margin-left: 0.5%;
}
#magazine .sct03 .step3 .cl03 {
  float: right;
  width: 33%;
}
#magazine .sct03 .step2 .caps {
  display: block;
  font-size: 15px;
  margin-top: 5px;
  text-align: left;
}
#magazine .sct03 .step3 .caps {
  display: block;
  font-size: 15px;
  margin-top: 5px;
}


#magazine .sct04 { margin-bottom: 40px;}
#magazine .sct04 h2,
#magazine .sct04 h3,
#magazine .sct04 ul,
#magazine .sct04 li{
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#magazine .sct04 h2 {
  font-size: 28px;
  margin-bottom: 20px;
  border-radius: 5px;
}
#magazine.type1 .sct04 h2 {
  background-color:#E5EEF9;
  color: #148ECE;
}
#magazine.type2 .sct04 h2 {
  background-color:#E6EFE1;
  color: #207F2C;
}
#magazine.type3 .sct04 h2 {
  background-color:#FEEEDC;
  color:#E96E04;
}
#magazine.type4 .sct04 h2 {
  background-color:#EEE5F1;
  color: #78247C;
}
#magazine .sct04 h2.tp2020 {
  background-color:#F4C91C;
  color: #333;
}

#magazine .sct04 h2 span {
  display: inline-block;
  padding: 13px 10px 13px 30px;
}
#magazine .sct04 h3{
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}
#magazine.type1 .sct04 h3{
  color: #148ECE;
}
#magazine.type2 .sct04 h3{
  color: #207F2C;
}
#magazine.type3 .sct04 h3{
  color: #E96E04;
}
#magazine.type4 .sct04 h3{
  color: #78247C;
}
#magazine .sct04 h3.tp2020{
  font-size: 26px;
  margin-bottom: 20px;
  font-weight: normal;
  color: #333 !important;
}
#magazine .sct04 h4{
  font-size: 16px;
  margin: 0 0 5px;
  padding-top: 15px;
  font-weight: bold;
}

#magazine .sct04 p {
  line-height: 2;
}
#magazine .sct04 p.mb2,
#magazine .sct03 .mb2 {
  margin-bottom: 25px;
}
#magazine .sct04 dl dt{
  margin-bottom: 10px;
}
#magazine .sct04 dl li{
  float: left;
  width: 20%;
  max-width: 140px;
}
#magazine .sct04 dl li + li{
  margin-left: 20px;
}
#magazine .sct04 dl li .caps{
  display: block;
  font-size: 15px;
  margin-top: 5px;
  font-weight: bold;
}

#magazine .sct04 .sdgsList li{
  padding-left: 110px;
  min-height: 110px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#magazine .sct04 .sdgsList.step2 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/img/case01_img09.png) 50% 0 repeat-y;
}
#magazine .sct04 .step2 li{
  float: left;
  width: calc(46% - 110px);
  margin-bottom: 10px;
}
#magazine .sct04 .step2 li:nth-child(2n){
  float: right;
}
#magazine .sct04 .sdgsList li.listBr,
#magazine .sct04 dl.listBr{
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px dashed #999;
}
#magazine .sct04 .arrow{
  margin: 1em;
}

#magazine .sct03 .picC {
  text-align: center;
}

#magazine .ctNav { margin-bottom: 40px;}
#magazine .ctNav ul,
#magazine .ctNav li{
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#magazine .ctNav li {
  float: left;
  width: 18%;
}
#magazine .ctNav li + li {
  margin-left: 9%;
}
#magazine .ctNav li a {
  text-decoration: none;
}
#magazine .ctNav li.act a,
#magazine .ctNav li a:hover{
  text-decoration: underline;
}
#magazine .note{
  display: block;
  font-size: 12px;
  margin-top: 15px;
}

/* Priority
----------------------------------------*/
#priority {
  max-width: 1140px;
  margin: 0 auto;
}
#priority p {
  line-height: 2;
}
#priority h2,
#priority h3,
#priority h4,
#priority ul,
#priority li{
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#priority .leadBox{
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/img01.png) 0 0 no-repeat;
}
#priority .leadBox div{
  padding: 35px 30px 25px;
  font-size: 16px;
}
#priority .leadBox div h2{
  color: #004386;
  font-size: 35px;
  margin-bottom: 20px;
}

#priority .topBox {
  background-color: #CDDEF2;
  padding: 30px 70px 10px;
  position: relative;
}
#priority .topBox ul {
}
#priority .topBox li {
  float: left;
  margin-right: 2%;
  width: 26%;
}
#priority .topBox li.last {
  margin-right: 0;
  width: 44%;
}
#priority .topBox li .inner {
  padding-top: 35px;
}
#priority .topBox .nado {
  position: absolute;
  bottom:10px;
  right: 60px;
}

#priority .title {
  border-top:2px solid #004386;
  border-bottom:2px solid #004386;
  text-align: center;
  color: #004386;
  padding: 15px 0 10px;
  margin-bottom: 40px;
  font-size: 2rem;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/bg02.png) 0 0 no-repeat;
}

#priority .topMenu dt {
  float: left;
}
#priority .topMenu dt p {
  text-align: center;
  color: #004386;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
  padding-top: 10px;
}
#priority .topMenu dd {}
#priority .topMenu dd li {
  margin-bottom: 30px;
}
#priority .topMenu dd li .ttl {
  float: left;
  width: 150px;
}
#priority .topMenu dd li .ttl p {
  text-align: center;
  font-size: 16px;
  line-height: 1.3;
}
/*
#priority .topMenu dd li.type1 .ttl,
#priority .topMenu dd li.type1 .txt .btn{
  border:5px solid #089CE2;
  box-sizing: border-box;
}
#priority .topMenu dd li.type2 .ttl,
#priority .topMenu dd li.type2 .txt .btn {
  border:5px solid #23954D;
  box-sizing: border-box;
}
#priority .topMenu dd li.type3 .ttl,
#priority .topMenu dd li.type3 .txt .btn {
  border:5px solid #E96E04;
  box-sizing: border-box;
}
#priority .topMenu dd li.type4 .ttl,
#priority .topMenu dd li.type4 .txt .btn {
  border:5px solid #594692;
  box-sizing: border-box;
}
*/

#priority .topMenu dd li .txt {
  float: left;
  width: 550px;
  margin-left: 20px;
}
#priority .topMenu dd li .txt h3 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: bold;
}
#priority .topMenu dd li .txt .btn {
  max-width: 240px;
  margin-top: 10px;
}
#priority .topMenu dd li .txt .btn a {
  display: block;
  padding: 2px 10px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/img08.png) 95% 50% no-repeat;
}
#priority .topMenu dd li .txt .btn:hover {
  opacity: 0.8;
}
#priority .topMenu dd li.type1 .txt p span {
  color: #225ba9;
}
#priority .topMenu dd li.type2 .txt p span {
  color: #23954D;
}
#priority .topMenu dd li.type3 .txt p span {
  color: #E96E04;
}
#priority .topMenu dd li.type4 .txt p span {
  color: #78247C;
}

#priority .sct01 { margin-bottom: 60px;}
#priority .sct01 img { vertical-align: bottom;}

#priority .sct01 .leadArea {
  position: relative;
  margin-bottom: 30px;
  padding-top: 5px;
}
#priority .sct01 .leadArea .icon {
  position: absolute;
  top: -15px;
  left: 0;
}
#priority .sct01 .leadArea.governance .icon {
  position: absolute;
  top: 15px;
  left: 0;
}
#priority .sct01 .leadArea h3 {
  padding: 0 0 5px 120px;
  margin-bottom: 10px;
  font-weight: bold;
}
#priority .sct01 .leadArea.society h3{
  border-bottom: 3px solid #225ba9;
}
#priority .sct01 .leadArea.environment h3{
  border-bottom: 3px solid #007858;
}
#priority .sct01 .leadArea.people h3{
  border-bottom: 3px solid #de1d2f;
}
#priority .sct01 .leadArea.governance h3{
  border-bottom: 3px solid #7d3086;
}
#priority .sct01 .leadArea p {
  padding: 0 0 0 120px;
}


#priority .sct01 .ambBox {
  padding: 10px;
  background: #F0F0F0;
}
/*
#priority .sct01 .ambBox.society{
  border:1px solid #148ECE;
}
#priority .sct01 .ambBox.environment{
  border:1px solid #207F2C;
}
#priority .sct01 .ambBox.people{
  border:1px solid #E96E04;
}
#priority .sct01 .ambBox.governance{
  border:1px solid #78247C;
}
*/
#priority .sct01 .ambBox li {
  float: left;
  margin-right: 20px;
}

#priority .sct02 { margin-bottom: 60px;}
#priority .sct02 h2 {
  color: #004386;
  padding-bottom: 5px;
  border-bottom: 1px solid #004386;
  font-weight: bold;
  font-size: 20px;
}
#priority .sct02 li {
  float: left;
  width: 49%;
  margin-right: 2%;
  text-align: center;
  color: #004386;
  border: 1px solid #004386;
  font-weight: bold;
  box-sizing: border-box;
  margin-top: 10px;
}
#priority .sct02 li a {
  display: block;
  padding: 10px 0;
}
#priority .sct02 li a:hover {
  background-color: #33699E;
  color: #fff;
}
#priority .sct02 li:nth-child(2n) {
  margin-right: 0;
}

#priority.type1 .sct02 h2 {
  color: #225ba9;
  border-bottom: 1px solid #225ba9;
}
#priority.type1 .sct02 li {
  border: 1px solid #225ba9;
}
#priority.type1 .sct02 li a {
  color: #225ba9;
}
#priority.type1 .sct02 li a:hover {
  color: #fff;
  background-color: #225ba9;
}
#priority.type2 .sct02 h2 {
  color: #007858;
  border-bottom: 1px solid #007858;
}
#priority.type2 .sct02 li {
  border: 1px solid #007858;
}
#priority.type2 .sct02 li a {
  color: #007858;
}
#priority.type2 .sct02 li a:hover {
  color: #fff;
  background-color: #007858;
}
#priority.type3 .sct02 h2 {
  color: #de1d2f;
  border-bottom: 1px solid #de1d2f;
}
#priority.type3 .sct02 li {
  border: 1px solid #de1d2f;
}
#priority.type3 .sct02 li a {
  color: #de1d2f;
}
#priority.type3 .sct02 li a:hover {
  color: #fff;
  background-color: #de1d2f;
}
#priority.type4 .sct02 h2 {
  color: #7d3086;
  border-bottom: 1px solid #7d3086;
}
#priority.type4 .sct02 li {
  border: 1px solid #7d3086;
}
#priority.type4 .sct02 li a {
  color: #7d3086;
}
#priority.type4 .sct02 li a:hover {
  color: #fff;
  background-color: #7d3086;
}

#priority .sct03 { margin-bottom: 80px;}
#priority .sct03 h2 {
  font-size: 32px;
  font-weight: bold;
  padding: 5px 0 0;
  margin-bottom: 40px;
}
#priority .sct03 .tcp {
  font-weight: bold;
}
#priority.type1 .sct03 .tcp span,
#priority.type1 .sct03 h2{
  color: #225ba9;
}
#priority.type2 .sct03 .tcp span,
#priority.type2 .sct03 h2{
  color: #007858;
}
#priority.type3 .sct03 .tcp span,
#priority.type3 .sct03 h2{
  color: #de1d2f;
}
#priority.type4 .sct03 .tcp span,
#priority.type4 .sct03 h2{
  color: #7d3086;
}

#priority .sct03 h3.cmn1 {
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #225ba9;
  font-size: 28px;
  margin-bottom: 20px;
}
#priority.type1 .sct03 h3.cmn1 {
  border-bottom: 5px solid #225ba9;
}
#priority.type2 .sct03 h3.cmn1 {
  border-bottom: 5px solid #007858;
}
#priority.type3 .sct03 h3.cmn1 {
  border-bottom: 5px solid #de1d2f;
}
#priority.type4 .sct03 h3.cmn1 {
  border-bottom: 5px solid #7d3086;
}
#priority.type5 .sct03 h3.cmn1 {
  border-bottom: 5px solid #004386;
}

#priority .sct03 h3.cmn2 {
  color: #fff;
  padding: 7px 10px 5px 30px;
  font-size: 30px;
  margin-bottom: 30px;
}
#priority.type1 .sct03 h3.cmn2 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/h3_bg.png) 0 100% no-repeat;
  background-color: #225ba9;
}
#priority.type2 .sct03 h3.cmn2 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/h3_bg.png) 0 100% no-repeat;
  background-color: #007858;
}
#priority.type3 .sct03 h3.cmn2 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/people/ttl_h3.png) 100% 100% no-repeat;
  background-color: #EAEAEA;
}
#priority.type4 .sct03 h3.cmn2 {
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/governance/ttl_h3.png) 100% 100% no-repeat;
  background-color: #EAEAEA;
}
#priority .sct03 h3.cmn3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
#priority.type1 .sct03 h3.cmn3 {
  color:#225ba9;
}
#priority.type2 .sct03 h3.cmn3 {
  color:#007858;
}
#priority.type3 .sct03 h3.cmn3 {
  color:#de1d2f;
}
#priority.type4 .sct03 h3.cmn3 {
  color:#7d3086;
}

#priority .sct03 h4 {
  font-size: 25px;
  margin-bottom: 20px;
  padding: 3px 0 0 10px;
}
#priority .sct03 h4.fs {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 10px;
}
#priority .sct03 h4.fs2 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 10px;
}
#priority.type1 .sct03 h4 {
  color: #225ba9;
  font-weight: bold;
}
#priority.type2 .sct03 h4 {
  border-left: 7px solid #007858;
}
#priority.type3 .sct03 h4 {
  border-left: 7px solid #de1d2f;
}
#priority.type4 .sct03 h4 {
  border-left: 7px solid #7d3086;
}

#priority.type2 .sct03 h4.none {
  color: #007858;
  border: none;
}

#magazine .sct03 h5,
#priority .sct03 h5 {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}
#magazine.type1 .sct03 h5 span,
#priority.type1 .sct03 h5 span {
  color: #225ba9;
}
#magazine.type2 .sct03 h5 span,
#priority.type2 .sct03 h5 span {
  color: #007858;
}
#magazine.type3 .sct03 h5 span,
#priority.type3 .sct03 h5 span {
  color: #de1d2f;
}
#magazine.type4 .sct03 h5 span,
#priority.type4 .sct03 h5 span {
  color: #7d3086;
}

#magazine.type3 .sct03 h5.ty2 span,
#priority.type3 .sct03 h5.ty2 span {
  color: #de1d2f;
}

#priority .sct03 h6 {
  font-size: 20px;
  color: #fff;
  padding: 8px 10px;
  margin: 0 0 20px;
}
#priority.type1 .sct03 h6 {
   background-color: #225ba9;
}
#priority.type2 .sct03 h6 {
   background-color: #007858;
}
#priority.type3 .sct03 h6 {
   background-color: #de1d2f;
}
#priority.type4 .sct03 h6 {
   background-color: #7d3086;
}

#priority .sct03 .step2 .cl01 {
  float: left;
  width: 48%;
}
#priority .sct03 .step2 .cl02 {
  float: right;
  width: 48%;
  text-align: right;
}
#priority .sct03 .step2 .cl02.left {
  text-align: left;
}
#priority .sct03 .picC {
  text-align: center;
}
#priority .sct03 .fs_s {
  font-size: 14px;
}
#priority .sct03 .pic {
  width: 100%;
  height: auto;
  border: 1px solid #cacaca;
}

#priority .sct03 .brBox {
  border: 1px solid #CACACA;
  padding: 35px 25px 30px;
  background-color: #fff;
}
#priority .sct03 .brBox.inline {
  display: inline-block;
}
#priority .sct03 .list01 li {
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.5;
}
#priority .sct03 .list01 li + li {
  margin-top: 10px;
}
#priority .sct03 .list02 li {
  text-indent: -5.5em;
  padding-left: 5.5em;
  line-height: 1.5;
}
#priority .sct03 .list02 li + li {
  margin-top: 10px;
}
#priority .sct03 ol {
  margin: 0 0 0 1.5em;
  padding: 0;
}
#priority .sct03 ol li {
  line-height: 1.5;
  list-style-type: decimal;
}
#priority .sct03  ol li + li {
  margin-top: 10px;
}

#priority .sct03 p.indent {
  text-indent: -1em;
  padding-left: 1em;
}
#priority .sct03 p.indent2 {
  text-indent: -2em;
  padding-left: 2em;
}

#priority .evTheme li {
  float: left;
  width: 33%;
  margin-top: 20px;
}
#priority .evTheme li .ttl {
  display: block;
  padding: 5px 0;
  font-weight: bold;
font-size: 30px;
}
#priority .evTheme li.theme1 .ttl {
  color: #08489A;
}
#priority .evTheme li.theme2 .ttl {
  color: #de1d2f;
}
#priority .evTheme li.theme3 .ttl {
  color: #007858;
}
#priority .evTheme li .txt {
  display: block;
  font-size: 14px;
  padding: 0 3.5vw;
}
#priority .evTtl1 {
  font-size: 20px;
  color: #08489A;
  padding: 1vw 0 1vw 70px;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/environment/img13.png) 0 50% no-repeat;
  font-weight: bold;
  margin: 1vw 1vw 1vw 2vw;
}
#priority .evTtl2 {
  font-size: 20px;
  color: #de1d2f;
  padding: 1vw 0 1vw 70px;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/environment/img14.png) 0 50% no-repeat;
  font-weight: bold;
  margin: 1vw 2vw;
}
#priority .evTtl3 {
  font-size: 20px;
  color: #007858;
  padding: 1vw 0 1vw 70px;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/environment/img15.png) 0 50% no-repeat;
  font-weight: bold;
  margin: 1vw 2vw;
}

#priority .ctLink li {
  float: left;
  width: 22%;
  font-weight: bold;
  box-sizing: border-box;
}
#priority .ctLink li + li {
  margin-left: 4%;
}
#priority .ctLink li:hover {
  opacity: 0.8;
}

#priority .ctLink li.btn01 {
  color: #225ba9;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg01.png") 0 0 no-repeat;
  min-height: 78px;
}
#priority .ctLink li.btn01 a {
  display: block;
  padding: 20px 0 0 85px;
  color: #225ba9;
  line-height: 1.3;
  font-size: 16px;
}
#priority .ctLink li.btn01 a span {
  color: #333;
  display: inline-block;
  font-size:15px;
}
#priority .ctLink li.btn02 {
  color: #007858;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg02.png") 0 0 no-repeat;
  min-height: 78px;
}
#priority .ctLink li.btn02 a {
  display: block;
  padding: 20px 0 0 85px;
  color: #007858;
  line-height: 1.3;
  font-size: 16px;
}
#priority .ctLink li.btn02 a span {
  color: #333;
  display: inline-block;
  font-size: 15px;
}
#priority .ctLink li.btn03 {
  color: #de1d2f;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg03.png") 0 0 no-repeat;
  min-height: 78px;
}
#priority .ctLink li.btn03 a {
  display: block;
  padding: 15px 0 0 85px;
  color: #de1d2f;
  line-height: 1.1;
  font-size: 16px;
}
#priority .ctLink li.btn03 a span {
  color: #333;
  display: inline-block;
  font-size: 15px;
}
#priority .ctLink li.btn04 {
  color: #7d3086;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg04.png") 0 0 no-repeat;
  min-height: 78px;
}
#priority .ctLink li.btn04 a {
  display: block;
  padding: 20px 0 0 85px;
  color: #7d3086;
  line-height: 1.3;
  font-size: 16px;
}
#priority .ctLink li.btn04 a span {
  color: #333;
  display: inline-block;
  font-size: 15px;
}

#priority .atLink a {
   font-weight: bold;
   font-size: 14px;
}
#priority.type1 .atLink a {
   color: #225ba9;
}
#priority.type2 .atLink a {
   color: #007858;
}
#priority.type3 .atLink a {
   color: #de1d2f;
}
#priority.type4 .atLink a {
   color: #7d3086;
}
#priority.type1 .atLink a:hover,
#priority.type2 .atLink a:hover,
#priority.type3 .atLink a:hover,
#priority.type4 .atLink a:hover{
  text-decoration: underline;
}

#priority .w820 {
  max-width: 820px !important;
}
#priority .w520 {
  max-width: 520px !important;
}

/* SP */
@media screen and ( max-width: 768px ) {

  #magazine img,
  #priority img{
    width: 100%;
    height: auto;
  }

/* Magazine
----------------------------------------*/
  #magazine .sct01 {
    margin-bottom: 20px;
  }
  #magazine .sct01 dl dt {
    float: left;
    width: 20%;
  }
  #magazine .sct01 dl dd {
    float: right;
    width: 79%;
  }
  #magazine .sct01 dl dd h3 {
    font-size: 16px;
    padding: 0 0 0 70px;
    margin-bottom: 10px;
    min-height: 60px;
    background-size: 60px 60px;
  }
  #magazine .sct01 dl dd p {
    font-size: 14px;
  }

  #magazine .sct02 {
    margin-bottom: 20px;
  }
  #magazine .sct02 .prof{
    position: relative;
    width: 150px;
  }
  #magazine .sct02 .prof p{
    position: absolute;
    bottom: 0;
    left: 160px;
    font-size: 14px;
    width: 160px;
  }
  #magazine .sct02 .prof p .name{
    display: inline-block;
    padding-top: 10px;
    font-size: 16px;
    font-weight: bold;
  }

  #magazine .sct03 { margin-bottom: 20px;}
  #magazine .sct03 .txtBox p {
    font-size: 14px;
  }
  #magazine .sct03 h2 {
    background-size: 18px auto;
    font-size: 16px;
  }
  #magazine .sct03 h2 span {
    padding: 11px 10px 11px 25px;
  }
  #magazine .sct03 .step2 .cl01 {
    float: none;
    width: 100%;
  }
  #magazine .sct03 .step2 .cl02 {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  #magazine .sct03 .step3 .cl01 {
    float: none;
    width: 100%;
  }
  #magazine .sct03 .step3 .cl02 {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
  #magazine .sct03 .step3 .cl03 {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  #magazine .sct03 .step3 .caps {
    font-size: 13px;
  }

  #magazine .sct04 { margin-bottom: 20px;}
  #magazine .sct04 h2 {
    font-size: 16px;
  }
  #magazine .sct04 h2 span {
    display: inline-block;
    padding: 11px 10px 8px 10px;
  }
  #magazine .sct04 h3{
    font-size: 14px;
  }
  #magazine .sct04 p {
    font-size: 14px;
  }
  #magazine .sct04 .sdgsList li{
    padding-left: 65px;
    min-height: 55px;
    background-size: 55px 55px;
  }
  #magazine .sct04 .sdgsList.step2 {
    background: none;
  }
  #magazine .sct04 .step2 li{
    float: none;
    width: calc( 100% - 65px );
  }
  #magazine .sct04 .step2 li:nth-child(2n){
    float: none;
  }
  #magazine .sct04 .arrow{
    text-align: center;
  }
  #magazine .sct04 .arrow img{
    max-width: 50px;
  }
}

@media all and (min-width: 768px) and (max-width: 1024px) {
  #priority .ctLink li {
    float: left;
    width: 48%;
  }
  #priority .ctLink li {
    margin: 0 0 10px;
  }
  #priority .ctLink li + li {
    margin: 0 0 10px;
  }
  #priority .ctLink li.btn01 a,
  #priority .ctLink li.btn02 a,
  #priority .ctLink li.btn03 a,
  #priority .ctLink li.btn04 a{
    padding: 20px 0 0 15vw;
    line-height: 1.3;
  }
  #priority .ctLink li.btn03 a{
    padding: 10px 0 0 15vw;
    line-height: 1.3;
  }
  #priority .ctLink li.btn01 {
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg01_sp.png") 50% 0 no-repeat;
  }
  #priority .ctLink li.btn02 {
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg02_sp.png") 50% 0 no-repeat;
  }
  #priority .ctLink li.btn03 {
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg03_sp.png") 50% 0 no-repeat;
  }
  #priority .ctLink li.btn04 {
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg04_sp.png") 50% 0 no-repeat;
  }
}


@media screen and ( max-width: 767px ) {
/* Priority
----------------------------------------*/

  #priority .leadBox{
    background-size: cover;
  }
  #priority .leadBox div{
    padding: 20px 15px;
    font-size: 14px;
  }
  #priority .leadBox div h2{
    color: #004386;
    font-size: 22px;
    margin-bottom: 10px;
  }

  #priority .topBox {
    margin-bottom: 0;
    padding: 20px 10px;
  }
  #priority .topBox ul {
    margin-bottom: 10px;
  }
  #priority .topBox li {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #priority .topBox li.last {
    float: none;
    width: 100%;
  }
  #priority .topBox li:first-child img {
     width: auto;
     height: auto;
  }
  #priority .topBox li .inner {
    padding-top: 0;
  }
  
  #priority .title {
  margin: 10px 0  40px;
  font-size: 1.4rem;
}

  #priority .topMenu dt {
    float: none;
    text-align: center;
    margin-bottom: 20px;
  }
  #priority .topMenu dt img {
    max-width: 180px;
  }
  #priority .topMenu dt p {
    font-size: 16px;
  }
  #priority .topMenu dd {
    float: none;
    margin-left: 0;
  }
  #priority .topMenu dd li {
    margin-bottom: 40px;
  }
  #priority .topMenu dd li .ttl {
    float: none;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }
  #priority .topMenu dd li .ttl img {
    max-width: 150px;
  }
  #priority .topMenu dd li .ttl p {
    font-size: 16px;
    padding: 5px 0;
    margin-bottom: 0;
  }
  #priority .topMenu dd li .txt {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  #priority .topMenu dd li .txt h3 {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.3;
  }
  #priority .topMenu dd li .txt .btn {
    max-width: 200px;
    margin: 10px auto 0;
  }
  

  #priority p {
    font-size: 14px;
  }

  #priority .sct01 { margin-bottom: 20px;}
  #priority .sct01 .ambBox {
    padding: 10px 10px 5px;
  }
  #priority .sct01 .leadArea {
    position: relative;
    margin-bottom: 30px;
    padding-top: 5px;
  }
  #priority .sct01 .leadArea .icon {
    position: absolute;
    top: 0;
    left: 0;
  }
  #priority .sct01 .leadArea .icon img {
      width: 100%;
      height: auto;
      max-width: 60px;
    }
  #priority .sct01 .leadArea h3 {
    padding: 8px 0 5px 70px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    min-height: 70px;
  }
  #priority .sct01 .leadArea.society h3,
  #priority .sct01 .leadArea.environment h3,
  #priority .sct01 .leadArea.people h3,
  #priority .sct01 .leadArea.governance h3{
    border-bottom: none;
  }
  #priority .sct01 .leadArea p {
    padding: 0;
  }

  #priority .sct01 .ambBox li {
    float: none;
    margin-right: 0;
    text-align: center;
  }

  #priority .sct02 { margin-bottom: 20px;}
  #priority .sct02 h2 {
    font-size: 16px;
  }
  #priority .sct02 li {
    float: none;
    width: 100%;
    margin-right: 0;
    padding: 10px 0;
    margin-top: 10px;
    font-size: 14px;
  }

  #priority .sct03 { margin-bottom: 20px;}
  #priority .sct03 h2 {
    font-size: 18px;
    padding: 0;
    margin-bottom: 20px;
    font-weight: bold;
  }

  #priority .sct03 h3.cmn1 {
    font-weight: bold;
    font-size: 16px;
  }
  #priority .sct03 h3.cmn2 {
    font-size: 16px;
    margin-bottom: 20px;
  }
  #priority.type1 .sct03 h3.cmn2,
  #priority.type2 .sct03 h3.cmn2,
  #priority.type3 .sct03 h3.cmn2,
  #priority.type4 .sct03 h3.cmn2{
    background-size: 32px;
  }
  #priority .sct03 h3.cmn3 {
    font-size: 15px;
  }
  #priority .sct03 h4 {
    font-size: 15px;
    margin-bottom: 20px;
    background-size: 50%;
  }
  #priority .sct03 h4.fs2 {
    font-size: 15px;
  }
  

  #priority .sct03 .step2 .cl01 {
    float: none;
    width: 100%;
  }
  #priority .sct03 .step2 .cl02 {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  #priority .sct03 .brBox {
    padding: 25px 15px 20px;
  }
  #priority .evTheme li {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
#priority .evTheme li .ttl {
  font-size: 16px;
}
  #priority .evTheme li img {
      max-width: 194px;
    }
  #priority .evTtl1 {
    font-size: 12px;
    padding: 50px 0 1vw 0;
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/environment/img13.png) 50% 0 no-repeat;
    background-size: 45px;
    margin: 1vw 2vw;
  }
  #priority .evTtl2 {
    font-size: 12px;
    color: #E96E04;
    padding: 50px 0 1vw 0;
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/environment/img14.png) 50% 0 no-repeat;
    background-size: 45px;
    margin: 1vw 2vw;
  }
  #priority .evTtl3 {
    font-size: 12px;
    padding: 50px 0 1vw 0;
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/priority/img/environment/img15.png) 50% 0 no-repeat;
    background-size: 45px;
    margin: 1vw 2vw;
  }
  
  #priority .ctLink li {
    float: none;
    width: 100%;
  }
  #priority .ctLink li + li {
    margin: 10px 0 0;
  }
  #priority .ctLink li.btn01 a,
  #priority .ctLink li.btn02 a,
  #priority .ctLink li.btn03 a,
  #priority .ctLink li.btn04 a{
    padding: 20px 0 0 40vw;
    line-height: 1.3;
  }
  #priority .ctLink li.btn03 a{
    padding: 10px 0 0 40vw;
    line-height: 1.3;
  }
#priority .ctLink li.btn01 {
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg01_sp.png") 50% 0 no-repeat;
}
#priority .ctLink li.btn02 {
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg02_sp.png") 50% 0 no-repeat;
}
#priority .ctLink li.btn03 {
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg03_sp.png") 50% 0 no-repeat;
}
#priority .ctLink li.btn04 {
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/linkbg04_sp.png") 50% 0 no-repeat;
}

}

@media screen and ( max-width: 480px ) {

  #magazine .sct01 dl dt {
    float: none;
    width: 40%;
  }
  #magazine .sct01 dl dd {
    float: none;
    width: 100%;
  }

  #priority .topBox li {
    text-align: left;
  }
  #priority .topBox li:first-child {
    text-align: center;
  }
  #priority .ctLink li.btn01 a,
  #priority .ctLink li.btn02 a,
  #priority .ctLink li.btn03 a,
  #priority .ctLink li.btn04 a{
    padding: 20px 0 0 28vw;
  }
  #priority .ctLink li.btn03 a{
    padding: 10px 0 0 28vw;
  }
}

/* CSR
----------------------------------------*/
#csrlink {
  max-width: 1140px;
  margin: 0 auto;
}
#csrlink p {
  line-height: 1;
}
#csrlink h2,
#csrlink ul,
#csrlink li{
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#csrlink .menu{
  margin-top: 150px;
}
#csrlink .menu.l2{
  width: 740px;
  margin: 150px auto 0;
}
#csrlink .menu li{
  float: left;
  width: 100%;
  max-width: 350px;
}
#csrlink .menu li + li{
  margin-left: 35px;
}
#csrlink .menu li:hover{
  opacity: 0.9;
}
#csrlink .menu li img{
  vertical-align: bottom;
}
#csrlink .menu .box{
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/csr/img/img04.png) 98% 91% no-repeat;
  background-color: #004386;
  padding: 15px 10px 20px;
  color: #fff;
}
#csrlink .menu .box h2{
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}
#csrlink .menu .box .txt{
  font-size: 14px;
  line-height: 1.5;
}

/* SP */
@media screen and ( max-width: 768px ) {

  #csrlink img{
    width: 100%;
    height: auto;
  }
  #csrlink .menu{
    margin-top: 40px;
  }
  #csrlink .menu li{
    float: left;
    width: 100%;
    max-width: 100%;
  }
  #csrlink .menu li + li{
    margin-left: 0;
    margin-top: 20px;
  }
  #csrlink .menu .box{
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/csr/img/img04.png) 98% 91% no-repeat;
    background-color: #004386;
    padding: 15px 10px 25px;
    color: #fff;
  }
  #csrlink .menu .box h2{
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px;
  }
  #csrlink .menu .box .txt{
    font-size: 12px;
    line-height: 1.5;
  }

}


/* Clear
----------------------------------------*/

.clear {
	clear: both;
}

/* Clear Fix */
.clfx {
	display: block;
	min-height: 1%;
}
.clfx:after {
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clfx {
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}


/* management
----------------------------------------*/
#management h2,
#management h3,
#management h4,
#management ul,
#management li,
#data ul,
#data li,
#feature ul,
#feature li{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#management{
    max-width: 1140px;
    margin: 0 auto;
}
#management p{
	line-height: 1.86; 
}
#management .sct01{margin-bottom:60px;}
#management .sct01 h3.cmn1 {
    padding: 8px 10px 10px;
    margin-bottom: 30px;
	background:url(/content/dam/nttcom/hq/jp/about-us/csr/management/ttl_h3.png) no-repeat 100% 100%;
	background-color:#004386 ;
    color: #fff;
    font-size: 30px;
}
#management .sct01 .cmn2 {
    font-size: 25px;
    margin-bottom: 20px;
	color:#004386;
}
#management .sct01 .cmn3{
	margin-bottom: 25px;
	border:1px solid #004386;
	line-height: 48px;
	color:#004386;
    font-size: 29px;
}
#management .sct01 .cmn3:after{
	content:"";
	display: block; 
	clear: both;
}
#management .sct01 .cmn3 .order{
	display:block;
	float:left;
	margin-right:18px;
	width:160px;
	background:#004386;
	text-align: center;
	color:#fff;
	font-size: 30px;
padding-bottom:5px;
}
#management .sct01 .step2 li .cmn3 .order:after{
	content:counter(sectioncounter); 
	counter-increment:sectioncounter;
	display:inline-block;
	vertical-align: middle;
	margin-left:10px;
	width:30px;
	height:30px;
	line-height: 28px;
	text-align: center;
	background:#fff;
	border-radius: 32px;
	color:#004386;
    font-size: 20px;
}
#management .sct01 .cmn3 .txt{
display:inline-block;
padding-top:3px;
}
#management .sct01 .step .cl01 {
    float: left;
    width: 48%;
}
#management .sct01 .step .cl02 {
    float: right;
    width: 48%;
    text-align: right;
}
#management .sct01 .step2{
	counter-reset:sectioncounter;
}
#management .sct01 .step2 li{
	position:relative;
	margin-bottom:70px;
}
#management .sct01 .step2 li + li:before{
	content:"";
	position:absolute;
	left:55px;
	top:-55px;
	width:0;
	height: 0;
	border-top:24px solid #004386;
	border-left:25px solid transparent;
	border-right:25px solid transparent;
}

/* data
----------------------------------------*/
#data p{line-height:1.65;}
#data .subtxt{ 
	margin-bottom:60px;
    text-align: center;
}
#data .sct01{
	position: relative;
	z-index: 0;
	padding:100px 0 45px;
	background:url(/content/dam/nttcom/hq/jp/about-us/csr/data/bg02.png) no-repeat right top #004386;
	background-color:#004386;
}
#data .sct01 .sec_inner{
    margin: 0 auto;
	position: relative;
	z-index: 2;
    max-width: 1140px;
}
#data .sct01 .pic{
	position:absolute;
	left:0;
	top:0;
	z-index: 1;
	width:100%;
}
#data .sct01 .pic img{width:100%;} 
#data .sct01 .step1{margin-left:-80px;}
#data .sct01 .step1 li{
	float:left;
	padding-left:80px;
	margin:25px 0;
	width:50%; 
	box-sizing: border-box;
}
#data .sct01 .step1 li .bg{
	padding:20px 26px;
	background:rgba(0,26,53,0.85);
  border: 2px solid #fff;
  box-sizing: border-box;
  min-height: 240px;
}
#data .sct01 .step1 .cmn1{
	margin:0 auto 20px;
	padding:5px 0;
	text-align: center;
	color:#fff;
	font-size:23px;
	font-weight: bold;
	border-bottom:1px solid #fff;
}
#data .sct01 .step1 .num{
	margin:0 auto 10px;
	text-align: center;
}
#data .sct01 .step1 .num.picR{text-align:right;}
#data .sct01 .step1 .num.picL{text-align:left;}
#data .sct01 .step1 .num img{max-width:100%;}
#data .sct01 .txt{
	line-height: 1.575;
  color: #fff;
  font-size: 15px;
}
#data .sct01 .step1 li.one{
	width:100%;
} 
#data .sct01 .step2 li{
	padding-left:2em;
	text-indent: -2em;
	color:#fff;
	font-size:14px;
}



/* feature
----------------------------------------*/
#feature .bg1{
	padding:0 0 100px;
	background:#fef8e5;
}
#feature .sec_inner{
	margin:auto;
	max-width: 1140px;
}
#feature p{
	line-height: 1.86;
}
#feature .past{
  text-align: center;
  padding-top: 40px;
}
#feature .picC{
  text-align: center !important;
}
#feature h2,
#feature h3,
#feature h4{
	margin:0;
	padding:0;
} 
#feature .sct01{
	margin-bottom:40px;
} 
#feature .sct01 img{
	width:100%;
}
#feature .sct02{
	margin-bottom:60px;
}
#feature .sct03{
	margin-bottom:60px;
} 
#feature .cmn1{
	padding: 15px 10px 15px 30px;
	background-color: #004386;
	color:#fff;
  font-size: 25px;
}
#feature .cmn2{
	padding: 12px 10px 12px 30px;
	background:url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/feature/case01_img01.png.png) 0 50% no-repeat;
    background-color: #004386;
    color: #f4c91c;
    font-size: 30px;
    margin-bottom: 20px;
}
#feature .cmn2.t2020{
	background:url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/feature/feature2020_ttlbg.png) 0 50% no-repeat;
  background-color: #004386;
  padding: 12px 10px 8px 50px;
}
#feature .cmn3 img{display:block;}
#feature .cmn4{
	padding: 12px 10px 12px 30px;
	background:url(/content/dam/nttcom/hq/jp/about-us/csr/magazine/feature/case01_img01.png.png) 0 50% no-repeat;
    background-color: #004386;
    color: #f4c91c;
    font-size: 30px;
    margin-bottom: 20px;
}
#feature .cmn5{
	padding: 12px 10px 10px;
	background-color: #727171;
	color:#fff;
  font-size: 18px;
  text-align: center;
}
#feature .sct02 .step1{
	overflow:hidden;
	border-radius:8px;
}
#feature .sct02 .step1.none{
	border-radius:0;
}
#feature .sct02 .bg_box{
	padding:25px 30px;
	background:#fff; 
}
#feature .sct02 .step1 .cl01{
	float:left;
	width:45%
}
#feature .sct02 .step1 .cl02{
	float:right;
	width:45%
}
#feature .sct02 .step1 dl{margin-bottom:8px;}
#feature .sct02 .step1 dt{
	float:left;
	margin-right:20px;
	padding:5px 0;
	width:75px; 
	color:#004386;
	font-size:18px;
	font-weight: bold;
	border-bottom:1px solid #004386;
}
#feature .sct02 .step1 dd{
	overflow:hidden;
	font-size:17px;
}
#feature .sct02 .step1 dd span{
	margin-right:5px;
	color:#004386;
}
#feature .sct02 .step1 li{
	padding-left:1em;
	text-indent: -1em;
}
#feature .sct02 .step1 .note li{
	font-size:16px;
}
#feature .sct02 .table01{
	width:100%;
	border-spacing: 0;
	border:0;
	line-height: 1.5;
}
#feature .sct02 .table01 th{
	padding:0;
	background:transparent;
	border:0;
}
#feature .sct02 .table01 th:first-child{
	padding-right:15px;
}
#feature .sct02 .table01 .th1{
	padding:10px 0; 
	text-align: left;
	color:#004386;
	font-size:18px;
	font-weight: bold;
	border-bottom:1px solid #004386;
}
#feature .sct02 .table01 tr td:first-child{
	position:relative;
	padding:15px 30px 10px 0;
	border-bottom:0;
}
#feature .sct02 .table01 td{
	vertical-align: middle;
	position: relative;
	padding:15px 15px 10px 0;
	border:0;
	border-bottom:1px dashed #3e3a39;
	font-size:17px;
}
#feature .sct02 .table01 td.dod{
	border-bottom:1px dashed #3e3a39 !important;
}
#feature .sct02 .table01 .txt1{
	display:flex;
	align-items: center;
	position: relative;
	padding:0 15px;
	height:76px;
	background-color: #004386;
	line-height: 1.5;

	color:#fff;
	font-weight: bold;
	border-radius:8px;
	font-size:16px;
}
#feature .sct02 .table01 .txt1:after{
	content:"";
	position:absolute;
	right:-16px;
	top:50%;
	margin-top:-11px;
	border-left:16px solid #004386;
	border-top:11px solid transparent;
	border-bottom:11px solid transparent;
}
#feature .sct02 .table01 .txt2{
	display:flex; 
	align-items: center;
	padding:0 15px;
	height:76px;
	background:#bfd3ef;
	color: #004386;
	font-weight: bold;
	font-size:16px;
}
#feature .sct02 .table01 .txt3{
	display:flex;
	align-items: center;
	position: relative;
	padding:0 15px;
	height:280px;
  max-width: 230px;
	background-color: #004386;
	line-height: 1.5;
	color:#fff;
	font-weight: bold;
	border-radius:3px;
	font-size:16px;
}
#feature .sct02 .table01 .txt3:after{
	content:"";
	position:absolute;
	right:-16px;
	top:50%;
	margin-top:-11px;
	border-left:16px solid #004386;
	border-top:11px solid transparent;
	border-bottom:11px solid transparent;
}
#feature .sct02 .table01 .txt4{
	display:flex;
	align-items: center;
	position: relative;
	padding:0 15px;
	height:180px;
  min-width: 224px;
  max-width: 230px;
	background-color: #004386;
	line-height: 1.5;
	color:#fff;
	font-weight: bold;
	border-radius:3px;
	font-size:16px;
}
#feature .sct02 .table01 .txt4:after{
	content:"";
	position:absolute;
	right:-16px;
	top:50%;
	margin-top:-11px;
	border-left:16px solid #004386;
	border-top:11px solid transparent;
	border-bottom:11px solid transparent;
}
#feature .sct02 .table01 td .base{
  position: absolute;
  top:15px;
  left:0;
}
#feature .sct04{
	padding:30px 0;
	background-color: #004386;
}
#feature .sct04 .step2 .pic{
	float: left;
	margin-right:4%;
	width:26%;
	min-width:300px;
	text-align: center;
}
#feature .sct04 .step2 .pic img{max-width:100%;}
#feature .sct04 .step2 .pic .info{
	margin-top:10px;
	text-align: left;
	color:#fff;
	font-size:13px;
}
#feature .sct04 .step2 .pic .left{
	float:left;
	margin:0;
	width:45%;
}
#feature .sct04 .step2 .pic .right{
	float:right;
	margin:0;
	width:50%;
}
#feature .sct04 .step2 .pic .name{
	line-height: 1.4;
	font-size:18px;
	font-weight: bold;
} 
#feature .sct04 .step2 .cl01{
	overflow:hidden;
	color:#fff;
}
#feature .sct04 .step2 h4{
	margin-bottom:10px;
	line-height: 1.5;
	color:#f4c91c;
	font-size:20px;
}

#feature .sct03 .box2{
  margin-bottom: 40px;
}
#feature .sct03 .box2 .leftBox{
  float:left;
  width: 48%;
}
#feature .sct03 .box2 .rightBox{
  float:right;
  width: 48%;
}


/* SP */
@media screen and ( max-width: 768px ){
	#management p,#data p{font-size:14px;}
	#management img {
		width: 100%;
		height: auto;
	}
	#management .sct01 h3.cmn1{
		margin-bottom: 20px;
		font-size: 16px;
	}
	#management .sct01 .cmn2{font-size: 15px;}
	#management .sct01 .cmn3 {
		margin-bottom: 20px; 
		line-height: 36px; 
		font-size: 15px;
	}
	#management .sct01 .cmn3 .order{ 
		margin-right:15px;
		width:100px; 
		font-size: 16px;
	}	
	#management .sct01 .step2 li .cmn3 .order:after{
		width: 20px;
		height: 20px;
		line-height: 22px;
		font-size: 14px;
	}
	#management .sct01 .step .cl01{
		float:none;
		width:100%;
	}
	#management .sct01 .step .cl02{
		margin-top:20px;
		float:none;
		width:100%;
		text-align:center;
	}
	#management .sct01 .step2 li{ 
		margin-bottom:40px;
	}
	#management .sct01 .step2 li + li:before{
		left:30px;
		top:-30px;
		border-width:14px 15px 0 15px;
	}
	
	/* data
	----------------------------------------*/
	#data .sct01{
		overflow:hidden;
		padding:60px 0 40px;
	} 
	#data .sct01 .pic{ 
		width:768px;
		left:50%;
		transform: translateX(-50%);
	}
	#data .sct01 .step1 li{width:100%;}
	#data .sct01 .step1 li{margin:0 0 25px 0;}
	#data .sct01 .step1 li .bg{padding:15px; min-height: auto;}
	#data .sct01 .step1 .cmn1{
		font-size:15px;
	}
	#data .sct01 .step1 .num.picR,
	#data .sct01 .step1 .num.picL{text-align:center;}
	#data .sct01 .step1 .num img{
		height:55px;
	} 
	#data .sct01 .step1 li.one .num img{
		height:auto;
		width:100%;
	}
	#data .sct01 .step2 li{font-size:12px;}
	
	/* feature
	----------------------------------------*/
	#feature p{
		line-height: 1.5;
		font-size:14px;
	}
	#feature .cmn1{font-size:15px;}
	#feature .cmn2{font-size:16px;}
  #feature .cmn5{font-size:14px;}
	#feature .sct02 .bg_box{padding:10px 15px;}
	#feature .sct02 .step1 .cl01,
	#feature .sct02 .step1 .cl02{
		float:none;
		width:100%;
	}
	#feature .sct02 .step1 dt{
		margin-right: 6px;
		width:60px;
		font-size: 13px;
	}
	#feature .sct02 .step1 li{margin-bottom:5px;}
	#feature .sct02 .step1 .note li{
		margin-bottom:0;
		font-size: 12px;
	}
	
	#feature .sct02 .table01 thead{display:none;}
	#feature .sct02 .table01 td,
	#feature .sct02 .table01 tr td:first-child{
		display:block;
		padding:50px 0 0;
		width:100%;
		border-bottom:0;
		font-size:13px;
	}
	#feature .sct02 .table01 tr td:before{ 
		position: absolute;
		left:0;
		top:15px;
		width:100%;
		border-bottom: 1px solid #004386;
		color: #004386;
		font-size: 14px;
		font-weight: bold;
	}
  #feature .sct02 .table01 td.dod{
    border-bottom:none !important;
  }
  #feature .sct02 .table01 td .viewSp{
    width: 100%;
  }
	#feature .sct02 .table01 tr td:nth-of-type(1):before{content:"課題";}
	#feature .sct02 .table01 tr td:nth-of-type(2):before{content:"提案機能";}
	#feature .sct02 .table01 tr td:nth-of-type(3):before{content:"NTTコミュニケーションズの提供価値";}
  
  #feature .sct02 .table01.t2020 tr td:nth-of-type(1):before{content:"企業名";}
	#feature .sct02 .table01.t2020 tr td:nth-of-type(2):before{content:"対象";}
	#feature .sct02 .table01.t2020 tr td:nth-of-type(3):before{content:"実施内容";}
  #feature .sct02 .table01.t2020 tr td:nth-of-type(4):before{content:"期間";}
	#feature .sct02 .table01 .txt1,
	#feature .sct02 .table01 .txt2{
		height:60px;
		font-size: 13px;
	}
	#feature .sct02 .table01 .txt1:after{content:none;}
	#feature .sct04 .step2 .pic,
	#feature .sct04 .step2 .cl01{
		float:none; 
		width:100%;
	}
	#feature .sct04 .step2 .pic{
		min-width:100%;
		margin-bottom:30px;
	}
	#feature .sct04 .step2 .pic img{max-width:100%;}
	#feature .sct04 .step2 .pic .info{
		font-size:12px;
	}
	#feature .sct04 .step2 .pic .name{
		font-size:15px;
	}
	#feature .sct04 .step2 h4{font-size:15px;}
  
  #feature .picC img{
    width: 100%;
    height: auto;
  }
  #feature .sct03 .box2{
    margin-bottom: 20px;
  }
  #feature .sct03 .box2 .leftBox{
    float:none;
    width: 100%;
    margin-bottom: 20px;
  }
  #feature .sct03 .box2 .rightBox{
    float:none;
    width: 100%;
  }
  #feature .sct03 .box2 .rightBox img{
    width: 100%;
    height: auto;
  }
  
  #feature .ttlBox{
    background-color: #004381;
    padding: 7vw 0 5vw;
    line-height: 1.3;
    width: 100%;
  }
  #feature .ttlBox h2{
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    padding: 0 5vw;
  }
  #feature .ttlBox .lead{
    display: inline-block;
    font-size: 14px;
    padding: 1vw 3em 1vw 0;
    position: relative;
    color: #004381;
    z-index: 1;
    line-height: 1.2;
    margin-bottom: 15px;
  }
  #feature .ttlBox .lead::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #EFC41C;
    transform: scaleY(1.1) perspective(.7em) rotateX(1deg);
    transform-origin: bottom left;
  }
  #feature .ttlBox .lead span{
    display: inline-block;
    border-left: 1px solid #004381;
    padding-left: 0.5em;
    margin-left: 5vw;
  }
  #feature .ttlBox h2 .flag {
    display: inline-block;
    padding-right: 35px;
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/magazine/feature/top_img03.png") 100% 50% no-repeat;
    background-size: 30px 21px;
  }
  #feature .ttlBox .sdgs2019 {
    padding: 10px 5vw 0;
  }
  #feature .ttlBox .sdgs2019 img {
    max-width: 253px;
  }

}



/* evaluation
----------------------------------------*/
#evaluation p{line-height:1.58;}
#evaluation img{max-width:100%;}
#evaluation ul,
#evaluation li{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#evaluation .subtxt {
    margin-bottom: 60px;
    text-align: center;
}
#evaluation .sct01{ margin-bottom: 60px;}
#evaluation .sct01 h3.cmn1 {
    padding: 8px 10px 10px;
    margin-bottom: 30px;
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/evaluation/ttl_h3.png) no-repeat 100% 100%;
    background-color: #004386;
    color: #fff;
    font-size: 30px;
	font-weight: bold;
}
#evaluation .sct01 h3.cmn2{ 
	color: #004386;
    font-size: 20px;
	font-weight: 500;
}
#evaluation .sct01 .step{
	padding:0 25px;
    margin-bottom: 30px;
}
#evaluation .sct01 .step li{
	float:left;
	position:relative;
}
#evaluation .sct01 .step li.replace:after{
	content:"差し替え";
	position:absolute;
	left:10%;
	top:50%;
	transform: translateY(-50%);
	padding:7px 0 5px;
	width:80%;
	background:#ffff00;
	text-align: center;
    font-size: 20px;
	font-weight: bold;
}
#evaluation .sct01 .step li + li{
	margin-left:60px;
}
#evaluation .sct02{
	border:8px solid #e2e2e2;
	border-radius:8px;
}
#evaluation .sct02 .cmn1{
	margin:0;
	padding:6px 0 10px;
	background:#e2e2e2;
	text-align: center;
	color: #004386;
    font-size: 30px;
	font-weight: bold;
}
#evaluation .sct02 .step{
	padding:30px 55px;
	background:#fff;
}
#evaluation .sct02 .step ul{margin-left:-80px;}
#evaluation .sct02 .step li{
	float:left;
	padding-left:80px;
	width:33.33%;
	box-sizing: border-box;
}
#evaluation .sct02 .step li .img{
	display:block;
	margin-bottom:20px;
	height: 130px;
	line-height: 130px;
	text-align: center;
}
#evaluation .sct02 .step li .img img{
	display: inline-block;
	vertical-align: middle;
}
@media screen and (max-width: 768px){
	#evaluation .sct01{ margin-bottom: 30px;}
	#evaluation .sct01 h3.cmn1 {
		margin-bottom: 20px;
		background-size:40px;
		font-size: 16px;
	}
	#evaluation .sct01 h3.cmn2{
		font-size:15px;
	}
	#evaluation .sct01 .step{
		margin-bottom:20px;
		padding:0;
	}
	#evaluation .sct01 .step li,
	#evaluation .sct01 .step li + li{
		margin:0 5%;
		width:40%;
	}
	#evaluation .sct01 .step li.replace:after{
		font-size: 15px;
	}
	#evaluation .sct02 .cmn1{
		font-size: 16px;
	}
	#evaluation .sct02 .step{
		padding:15px;
	}
	#evaluation .sct02 .step li{
		margin:10px 0;
		width:100%;
	}
}

/* 20200121 */
.fcbl{
  color: #000 !important;
}
.bgbl{
  background-color: #000 !important;
}
.brbl{
  border-color: #000 !important;
}

.bgwh{
  background-color: #fff !important;
}

.fcpl{
  color:#E96E04 !important;
}
.bgpl{
  background-color: #E96E04 !important;
}
.brpl{
  border-color: #E96E04 !important;
}

.bgev{
  background-color: #D7ECE7 !important;
}


#priority .topMenu dd li .ttl p {
  font-weight: bold;
}
#priority .topMenu dd li.type1 .txt .btn{
  background-color: #fff;
  border: 1px solid #999 ;
  box-shadow:  2px 2px 2px 2px rgba(0,0,0,0.2);
  border-radius: 2px;
}
#priority .topMenu dd li.type2 .txt .btn {
  background-color: #fff;
  border: 1px solid #999 ;
  box-shadow:  2px 2px 2px 2px rgba(0,0,0,0.2);
  border-radius: 4px;
}
#priority .topMenu dd li.type3 .txt .btn{
  background-color: #fff;
  border: 1px solid #999 ;
  box-shadow:  2px 2px 2px 2px rgba(0,0,0,0.2);
  border-radius: 2px;
}
#priority .topMenu dd li.type4 .txt .btn {
  background-color: #fff;
  border: 1px solid #999 ;
  box-shadow:  2px 2px 2px 2px rgba(0,0,0,0.2);
  border-radius: 2px;
}
#priority .topMenu dd li .txt .btn a {
  color: #000;
}

#priority .sct03 h5.mb {
  font-size: 18px;
  margin-bottom: 20px;
}
#priority .sct03 h6.mb {
  font-size: 18px;
  margin: 0 0 10px;
}

.csrTbl2 {
  border-collapse: separate;
  border-spacing: 0;
}
.csrTbl2 th.ty2 {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  box-sizing: border-box;
}

.capsleft{
  display:block;
  text-align:left;
  padding-left:3em;
}
.baseind {
  text-indent: -1em;
  padding-left: 1em;
}
.baseind2 {
  text-indent: -1.3em;
  padding-left: 1.3em;
}

@media screen and (max-width: 768px){
.capsleft{
  text-align:center;
  padding-left:0;
}
}

/* topMsg
----------------------------------------*/
#topMsg .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 30px;
}

#topMsg .scArea .name{
  text-align: right;
  margin-top: 90px;
}

#topMsg .scArea .tpBox{
  padding-bottom: 40px;
}
#topMsg .scArea .tpBox img{
  width: 100%;
  height: auto;
}
#topMsg .scArea .ttBox{}

#topMsg .scArea .ttBox h2{
  font-size:2rem;
  line-height: 1.5;
  margin: 0 0 30px;
  padding: 0;
  color: #0E367D;
}
#topMsg .scArea .ttBox p + p{
  margin-top: 1em;
}
#topMsg .scArea .ttBox p.caps{
  font-size: 85%;
}

/* SP */
@media screen and ( max-width: 480px ) {
  #topMsg .scArea{
    padding-top: 0;
  }

  #topMsg .scArea .ttBox h2{
    font-size:1.4rem;
    line-height: 1.5;
    margin: 0 0 30px;
    padding: 0;
  }

  #topMsg .scArea .tpBox{
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
    text-align: center;
  }
  #topMsg .scArea .tpBox img{
    width: 100%;
    height: auto;
  }
  #topMsg .scArea .ttBox{
    float: none;
    width: 100%;
  }
  
}


/* 20201006 */

/* SOCIAL */

#social .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
#social ul.linkList,
#social .linkList li{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#social ul.linkList{
  padding-top: 80px;
}
#social .linkList li{
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/social/img/link_bg.png) 98.5% 94% no-repeat;
  background-size: 25px;
  background-color: #004385;
  float: left;
  width: 48%;
  margin-bottom: 40px;
}
#social .linkList li:nth-child(2n){
  float: right;
}
#social .linkList li a{
  color: #fff;
}
#social .linkList li:hover{
  opacity: 0.8;
}
#social .linkList li dt {
  float: left;
  width: 30%;
}
#social .linkList li dt img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
#social .linkList li dd {
  float: right;
  width: 70%;
  padding: 3%;
  font-size: 15px;
}
#social .linkList li dd span {
  display: block;
  font-size: 18px;
  font-weight: bold;
}


@media screen and (max-width: 768px){

  #social ul.linkList{
    padding-top: 40px;
  }

  #social .linkList li{
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/social/img/link_bg.png) 99% 98.5% no-repeat;
    background-size: 18px;
    background-color: #004385;
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
  #social .linkList li:nth-child(2n){
    float: none;
  }
  #social .linkList li dt {
    float: none;
    width: 100%;
    max-height: auto;
  }
  #social .linkList li dt p {
    width: 100%;
  }
  #social .linkList li dt img {
    width: 100%;
    height: auto;
  }
  #social .linkList li dd {
    float: none;
    width: 100%;
    padding: 1.5% 1%;
    font-size: 12px;
  }
  #social .linkList li dd span {
    display: block;
    font-size: 15px;
    font-weight: bold;
  }

}

/* CASE */

#case .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

#case ul.linkList,
#case .linkList li,
#case .ftList li{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#case ul.linkList{
  padding-top: 20px;
}
#case .linkList li{
  float: left;
  width: 48%;
  margin-bottom: 40px;
}
#case .linkList li.link01{
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/case/bg01.png) 100% 0 no-repeat;
}
#case .linkList li.link02{
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/case/bg02.png) 100% 0 no-repeat;
}
#case .linkList li.link03{
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/case/bg03.png) 100% 0 no-repeat;
}
#case .linkList li.link04{
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/case/bg04.png) 100% 0 no-repeat;
}
#case .linkList li:nth-child(2n){
  float: right;
}
#case .linkList li a{
  color: #333;
}
#case .linkList li:hover{
  opacity: 0.8;
}
#case .linkList li dt {
  float: left;
  width: 32%;
}
#case .linkList li dt img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
#case .linkList li dd {
  float: right;
  width:68%;
  padding: 1.3% 3% 2% ;
  font-size: 15px;
}
#case .linkList li dd span {
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}

#case .ttl_case{
  margin-bottom: 5px;
  font-weight: bold;
}
#case .txt_case{
  text-indent: 1em;
  margin-bottom: 20px;
}
#case .ttl_case .case01{
  color: #225ba9;
}
#case .ttl_case .case02{
  color: #207F2C;
}
#case .ttl_case .case03{
  color: #E96E04;
}
#case .ttl_case .case04{
  color: #924898;
}

#case .ftList {
  margin: 0;
  padding: 0;
}
#case .ftList li{
  background-color: #004386;
  margin-bottom: 40px;
}
#case .ftList li a{
  color: #333;
}
#case .ftList li:hover{
  opacity: 0.8;
}
#case .ftList li dt {
  float: left;
  width: 32%;
}
#case .ftList li dt img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
#case .ftList li dd {
  float: right;
  width:68%;
  padding: 0;
  font-size: 15px;
}
#case .ftList li dd h3 {
  display: block;
  background-color: #F4C91C;
  color:#004386;
  padding: 8px 10px 8px 30px;
  font-weight: bold;
}
#case .ftList li dd h3 span {
  display: inline-block;
  font-size: 18px;
  position: relative;
  top:-2px;
}
#case .ftList li dd p {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  padding: 0 30px;
}
#case .ftList li dd p .flag {
  display: inline-block;
  padding-right: 70px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/magazine/feature/top_img03.png") 100% 50% no-repeat;
}


@media screen and (max-width: 768px){

  #case ul.linkList{
    padding-top: 40px;
  }

  #case .linkList li{
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
  #case .linkList li:nth-child(2n){
    float: none;
  }
  #case .linkList li.link01{
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/case/bg01_sp.png) 100% 100% no-repeat;
    background-size: contain;
  }
  #case .linkList li.link02{
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/case/bg02_sp.png) 100% 100% no-repeat;
    background-size: contain;
  }
  #case .linkList li.link03{
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/case/bg03_sp.png) 100% 100% no-repeat;
    background-size: contain;
  }
  #case .linkList li.link04{
    background: url(/content/dam/nttcom/hq/jp/about-us/csr/case/bg04_sp.png) 100% 100% no-repeat;
    background-size: contain;
  }

  #case .linkList li dt {
    float: none;
    width: 100%;
    max-height: 180px;
    overflow: hidden;
  }
  #case .linkList li dt img {
    width: 100%;
    height: auto;
  }
  #case .linkList li dd {
    float: none;
    width: 100%;
    padding: 0 0 2%;
    font-size: 12px;
  }
  #case .linkList li dd span {
    display: block;
    width: 100%;
    padding: 2% 2% 1%;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  #case .linkList li dd p {
    padding: 0 2% 4%;
  }

  #case .linkList li.link01 dd span {
    background-color: #E96E04;
  }
  #case .linkList li.link02 dd span {
    background-color: #207F2C;
  }
  #case .linkList li.link03 dd span {
    background-color: #E96E04;
  }
  #case .linkList li.link04 dd span {
    background-color: #924898;
  }

  #case .txt_case{
    text-indent: 0;
  }

  #case .ftList li dt {
    float: none;
    width: 100%;
    max-height: 180px;
    overflow: hidden;
  }
  #case .ftList li dt img {
    width: 100%;
    height: auto;
  }
  #case .ftList li dd {
    float: none;
    width: 100%;
    padding: 0 0 2%;
    font-size: 12px;
  }
  #case .ftList li dd h3 {
    font-size: 16px;
    padding: 1vw 10px ;
  }
  #case .ftList li dd div.ind {
    padding-left: 3em;
    text-indent: -3em;
  }
  #case .ftList li dd h3 span {
    font-size: 16px;
    display: inline;
    top: 0;
  }
  #case .ftList li dd p {
    font-size: 16px;
    padding: 0 10px 10px;
  }
  #case .ftList li dd p .flag {
    display: inline-block;
    padding-right: 35px;
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/magazine/feature/top_img03.png") 100% 50% no-repeat;
    background-size: 30px 21px;
  }

}


.t-c{
  padding-top: 20px;
}

.ttlty01{
  color: #148ece;
  font-weight: bold;
}
.ttlty02{
  color: #207F2C;
  font-weight: bold;
}
.ttlty03{
  color: #E96E04;
  font-weight: bold;
}
.ttlty04{
  color: #8F4C9B;
  font-weight: bold;
}
.inner001{
  padding: 0 40px;
}

@media screen and (max-width: 768px){

  .inner001{
    padding: 0 10px;
  }

}

#esg .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
#esg ul,
#esg li{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#esg .subtxt {
    margin-bottom: 60px;
    text-align: center;
}
#esg .sct01 h2 {
  color: #333;
  padding-bottom: 10px;
  border-bottom: 3px solid #004386;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 50px;
}
#esg .sct01 h3 {
  color: #004386;
  padding-bottom: 5px;
  border-bottom: 1px solid #CBCBCB;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}
#esg .sct01 h4 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  margin-bottom: 10px;
}
#esg .sct01 h4 span {
  color: #004386;
}

#esg .sct01 .graph {
  margin-bottom: 70px;
}
#esg .sct01 .graph li {
  float: left;
  width: 48%;
}
#esg .sct01 .graph li:nth-child(2n) {
  margin-left: 4%;
}
#esg .sct01 .graph .caps {
  font-size: 12px;
  line-height: 1.5;
}

@media screen and (max-width: 768px){

  #esg .sct01 h2 {
    font-size: 18px;
    margin-bottom: 30px;
  }
  #esg .sct01 h3 {
    padding-bottom: 5px;
    font-size: 16px;
    margin-bottom: 20px;
  }
  #esg .sct01 h4 {
    margin: 0;
    padding: 0;
    font-size: 13px;
    margin-bottom: 5px;
  }

  #esg .sct01 .graph {
    margin-bottom: 30px;
  }
  #esg .sct01 .graph li {
    float: none;
    width: 100%;
    margin-bottom: 30px;
  }
  #esg .sct01 .graph li:nth-child(2n) {
    margin-left: 0;
  }
  #esg .sct01 .graph li img {
    width: 100%;
    height: auto;
  }
  #esg .sct01 .graph .caps {
    font-size: 11px;
    text-indent: -1.4em;
    padding-left: 1.4em;
  }
  #esg .sct01 .txt{
    font-size: 14px;
  }

}

.accordion_component.max{
	max-width:100% !important;
	margin:0 auto 100px;
}
.accordion_component.max .accordion_header {
	color:#333;
	border-top: none;
  padding-bottom: 10px;
  border-bottom: 3px solid #004386;
}

#management h5 {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}
#management h5 span {
  color: #103675;
}

/* base */

#base .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

/* csrdl */

#csrdl .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
#csrdl .scArea .step2 dl {
    padding: 0 10px 20px;
    margin: 0;
}
#csrdl .scArea .step2 dt{
  float: left;
  width: 100%;
  max-width: 400px;
}
#csrdl .scArea .step2 dd{
  float: right;
  width: 100%;
  max-width: 700px;
  position: relative;
  top: -1em;
}

@media screen and (max-width: 768px){

#csrdl .scArea .step2 dl {
    padding: 0 0 20px;
    margin: 0;
}
#csrdl .scArea .step2 dt{
  float: none;
  max-width: auto;
  margin-bottom: 20px;
}
#csrdl .scArea .step2 dt img{
  width: 100%;
  height: auto;
}
#csrdl .scArea .step2 dd{
  float: none;
  width: 100%;
  max-width: auto;
  top: 0;
}

#management .download img {
  max-width: 14px;
  height: auto;
}

}

/* global
----------------------------------------*/

#global p {
  line-height: 2;
}
#global h2,
#global h3,
#global h4,
#global h6,
#global ul,
#global li{
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#global .sct03 { margin-bottom: 60px;}
#global .sct03 h2 {
  font-size: 32px;
  font-weight: bold;
  padding: 5px 0 0;
  margin-bottom: 40px;
}

#global .sct03 h3.cmn2 {
  color: #fff;
  padding: 6px 10px;
  font-size: 30px;
  margin-bottom: 30px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/magazine/img/global/ttl_h3.png") 100% 100% no-repeat;
  background-color: #004386;
}

#global .sct03 h4 {
  font-size: 25px;
  margin-bottom: 20px;
  padding: 3px 0 0 10px;
  border-left: 7px solid #004386;
  color: #004386;
}
#global .sct03 h4.fs {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 10px;
}
#global .sct03 h4.fs2 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 10px;
}
#global.type2 .sct03 h4.none {
  color: #207F2C;
  border: none;
}

#feature .sct03 h5,
#global .sct03 h5{
  font-size: 25px;
  margin-bottom: 20px;
  color: #004386;
}
#global .sct03 h5 .arrow {
  position: relative;
  display: inline-block;
  padding: 10px 30px 8px 15px;
  margin-right: 15px;
  color: #333;
  background-color: #BFD9E6;
  line-height: 1;
  min-height: 44px;
}
#global .sct03 h5 .arrow:before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top:0;
  right: 0;
  border-top: 22px solid #fff;
  border-left: 22px solid transparent;
  border-bottom:22px solid #fff;
}
#feature .sct03 h5 .arrow {
  position: relative;
  display: inline-block;
  padding: 10px 30px 8px 15px;
  margin-right: 15px;
  color: #fff;
  background-color: #004380;
  line-height: 1;
  min-height: 44px;
}
#feature .sct03 h5 .arrow:before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top:0;
  right: 0;
  border-top: 22px solid #FBF5E2;
  border-left: 22px solid transparent;
  border-bottom:22px solid #FBF5E2;
}
#global h6 img {
  vertical-align: bottom;
}

#global .sct03 .step2 .cl01 {
  float: left;
  width: 72%;
}
#global .sct03 .step2 .cl02 {
  float: right;
  width: 25%;
}
#global .sct03 .step2 .cl02.left {
  text-align: left;
}

#feature .sct03 .step3 li,
#global .sct03 .step3 li{
  margin-bottom: 2em;
}
#feature .sct03 .step3 li,
#global .sct03 .step3 li {
  float: left;
  width: 32%;
}
#feature .sct03 .step3 li + li,
#global .sct03 .step3 li + li {
  margin-left: 2%;
}

#feature .sct03 .glbox .glpic,
#global .sct03 .glbox .glpic {
  float: right;
  padding: 0 0 10px 30px;
  font-size: 14px;
}
#feature .sct03 .glbox .glpic span,
#global .sct03 .glbox .glpic span {
  display: inline;
  color: #004386;
}

#feature .sct03 h6,
#global .sct03 h6 {
  font-size: 14px;
}
#feature .sct03 h6 span,
#global .sct03 h6 span {
  display: inline;
  color: #004386;
}

#global .sct03 .picC {
  text-align: center;
}
#global .sct03 .fs_s {
  font-size: 14px;
}
#global .sct03 .pic {
  width: 100%;
  height: auto;
  border: 1px solid #cacaca;
}

#feature .mv,
#global .sct03 .mv {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 850px;
  max-height: 478px;
  margin: 0 auto;
  padding-top: 45%;
}

#feature .mv iframe,
#global .sct03 .mv iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: 478px;
}

#global .sct03 p.indent {
  text-indent: -1em;
  padding-left: 1em;
}
#global .sct03 p.indent2 {
  text-indent: -2em;
  padding-left: 2em;
}

#global .sec_inner{
	margin:auto;
	max-width: 1140px;
}
#global .sct04{
	padding:30px 0;
	background-color: #004386;
}
#global .sct04 .step2 .pic{
	float: left;
	margin-right:2%;
	width:16%;
  min-width: 175px;
	text-align: center;
}
#global .sct04 .step2 .pic img{max-width:100%;}
#global .sct04 .step2 .pic .info{
	margin-top:10px;
	text-align: left;
	color:#fff;
	font-size:13px;
}
#global .sct04 .step2 .pic .name{
	line-height: 1.4;
	font-size:18px;
	font-weight: bold;
} 
#global sct04 .step2 .cl01{
	overflow:hidden;
	color:#fff;
}
#global .sct04 .step2 h4{
	margin-bottom:10px;
	line-height: 1.5;
	color:#fff;
	font-size:20px;
  font-weight: bold;
}
#global .sct04 .step2 p{
  color: #fff !important;
}
#feature .sct05{
	padding:30px 0;
	background-color: #004386;
}
#feature .sct05 .step2 .pic{
	float: left;
	margin-right:2%;
	width:16%;
  min-width: 175px;
	text-align: center;
}
#feature .sct05 .step2 .pic img{max-width:100%;}
#feature .sct05 .step2 .pic .info{
	margin-top:10px;
	text-align: left;
	color:#fff;
	font-size:13px;
}
#feature .sct05 .step2 .pic .name{
	line-height: 1.4;
	font-size:18px;
	font-weight: bold;
} 
#feature .sct05 .step2 .cl01{
	overflow:hidden;
	color:#fff;
}
#feature .sct05 .step2 h4{
	margin-bottom:10px;
	line-height: 1.5;
	color:#fff;
	font-size:20px;
  font-weight: bold;
}
#feature .sct05 .step2 p{
  color: #fff !important;
}
#feature .mb2 p.mvcaps,
#feature p.mvcaps,
#global .sct03 p.mvcaps{
  text-indent:-1em;
  padding-left:1em;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

/* SP */
@media screen and ( max-width: 768px ) {

  #global img{
    width: 100%;
    height: auto;
  }


/* global
----------------------------------------*/


  #global .sct03 { margin-bottom: 20px;}
  #global .sct03 h2 {
    font-size: 18px;
    padding: 0;
    margin-bottom: 20px;
    font-weight: bold;
  }

  #global .sct03 h3.cmn2 {
    font-size: 14px;
    margin-bottom: 20px;
  }
  #global.type1 .sct03 h3.cmn2{
    background-size: contain;
  }
  
  #global .sct03 h4 {
    font-size: 14px;
    margin-bottom: 20px;
    background-size: 50%;
  }
  
  #global .sct03 p {
    font-size: 13px;
  }

  #global .sct03 .step2 .cl01 {
    float: none;
    width: 100%;
  }
  #global .sct03 .step2 .cl02 {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  #global .sct03 .brBox {
    padding: 25px 15px 20px;
  }
  #global .sct03 .picw {
    text-align: center;
  }
  #global .sct03 .picw img {
    max-width: 268px;
  }
  
  #feature .sct03 h5,
  #global .sct03 h5 {
    font-size: 14px;
  }
  #feature .sct03 h5 .text,
  #global .sct03 h5 .text {
    line-height: 1.3;
    padding-top: 8px;
    display: inline-block;
  }
  #feature .sct03 h5 .text2,
  #global .sct03 h5 .text2 {
    line-height: 1.3;
  }
  #feature .sct03 h5 .arrow,
  #global .sct03 h5 .arrow {
    padding: 10px 20px 8px 10px;
    margin-right: 10px;
    min-height: 32px;
    float: left;
  }
  #feature .sct03 h5 .arrow:before,
  #global .sct03 h5 .arrow:before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top:0;
    right: 0;
    border-top: 16px solid #fff;
    border-left: 16px solid transparent;
    border-bottom: 16px solid #fff;
  }
  #feature .sct03 .step3,
  #global .sct03 .step3 {
    margin-bottom: 2em;
  }
  #feature .sct03 .step3 li,
  #global .sct03 .step3 li {
    margin-bottom: 10px;
  }
  #feature .sct03 .step3 li,
  #global .sct03 .step3 li {
    float: none;
    width: 100%;
  }
  #feature .sct03 .step3 li + li,
  #global .sct03 .step3 li + li {
    margin-left: 0;
  }
  #feature .sct03 .glbox .glpic,
  #global .sct03 .glbox .glpic {
    float: none;
    padding: 1em 0;
    text-align: left;
  }

  #global .sec_inner .message img{
    max-width: 141px;
  }

  #global .sct04 p {
    font-size: 13px;
  }

	#global .sct04 .step2 .pic,
	#global .sct04 .step2 .cl01{
		float:none; 
		width:100%;
	}
	#global .sct04 .step2 .pic{
		min-width:100%;
		margin-bottom:30px;
	}
	#global .sct04 .step2 .pic img{max-width:174px;}
	#global .sct04 .step2 .pic .info{
		font-size:12px;
	}
	#global .sct04 .step2 .pic .name{
		font-size:15px;
	}
	#global .sct04 .step2 h4{font-size:15px;}

  #feature .sct05 p {
    font-size: 13px;
  }

	#feature .sct05 .step2 .pic,
	#feature .sct05 .step2 .cl01{
		float:none; 
		width:100%;
	}
	#feature .sct05 .step2 .pic{
		min-width:100%;
		margin-bottom:30px;
	}
	#feature .sct05 .step2 .pic img{max-width:174px;}
	#feature .sct05 .step2 .pic .info{
		font-size:12px;
	}
	#feature .sct05 .step2 .pic .name{
		font-size:15px;
	}
	#feature .sct05 .step2 h4{font-size:15px;}

#feature .mv,
#global .sct03 .mv {
  padding-top: 56.25%;
}
#feature .mv + .mv,
#global .sct03 .mv  + mv{
   margin-top:15px;
}
#feature .mb2 p.mvcaps,
#feature p.mvcaps,
#global .sct03 p.mvcaps{
padding-top:10px;
}

}


/* dialog
----------------------------------------*/
#dialog .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

#dialog .scArea .cls01{
  color: #004386;
}
#dialog .scArea .cls02{
  margin-bottom: 1em;
  margin-top: 1em;
}
#dialog .scArea .cls03{
  line-height: 1.5;
}
#dialog .scArea .cls04{
  margin: 0px;
  padding: 0px;
  float: left;
}
#dialog .scArea .cls05{
  color: rgb(0, 67, 134);
}
#dialog .scArea .cls06{
  margin-top: 15px !important;
}
#dialog .scArea .cls07{
  margin: 0px 0px 0px 3em;
  padding: 0px;
}

#dialog .scArea .pic{
  text-align: center;
  padding: 20px 0;
}
#dialog .scArea .pic img{
  width: 100%;
  height: auto;
}
#dialog .scArea .step2 .picBox{
  float: left;
  padding: 15px 0 0 0;
  width: 27%;
}
#dialog .scArea .step2 .txtBox{
  float: right;
  width: 70%;
}

/* SP */
@media screen and ( max-width: 768px ) {
  #dialog .scArea .pic2 img{
    width: 100%;
    height: auto;
  }
  #dialog .scArea .step2 .picBox{
    float: none;
    padding: 15px 0;
    width: 100%;
  }
  #dialog .scArea .step2 .txtBox{
    float: none;
    width: 100%;
  }
  #dialog .scArea .fs-30{
    font-size: 20px !important;
  }
}

/* 202109 */
#priority .sct03 .att {
  padding-top: 2em;
}
#priority p.indentatt {
  text-indent: -1em;
  padding-left: 1em;
  padding-top: 20px;
}
#social .sct03 p.indent {
  text-indent: -1em;
  padding-left: 1em;
}

#base .lead {
  font-size: 22px;
  text-align: center;
  padding: 30px 0;
  margin: 60px 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
#base .pic {
  text-align: center;
  margin-bottom: 80px;
}
#base .pic img {
  max-width:90%;
  height:auto;
}

#base .ttl01 {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
#base .lead02 {
  text-align: center;
  padding: 20px 0;
}
#base .lead03 {
  padding: 0 20px 60px;
}

#base .list {
  list-style-type: none;
  margin: 0 20px 20px;
  padding: 0;
}
#base .list li {
  width: 46%;
  max-width: 502px;
  float: left;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}
#base .list li:nth-child(2n) {
  float: right;
}
#base .list li img {
  width: 100%;
  height: auto;
}
#base .list li .list_txt {
  padding: 20px 15px;
}
#base .list li a {
color:#333;
}
#base .list li:hover {
opacity: 0.8;
}

@media all and (min-width: 768px) and (max-width: 1024px) {
  #base .lead03 {
    padding: 0 0 60px;
  }
  #base .list li {
    width: 48%;
    min-height: 365px;
  }
}

/* SP */
@media screen and ( max-width: 767px ) {

#base .lead {
  font-size: 16px;
  text-align: left;
  padding: 15px 0;
  margin: 30px 0;
}
#base .pic {
  margin-bottom: 30px;
}
#base .pic img {
  width: 100%;
  height: auto;
}

#base .ttl01 {
  font-size: 18px;
}
#base .lead02 {
  padding: 0 0 20px;
  font-size: 14px;
  text-align: left;
}
#base .lead03 {
  padding: 0 0 20px;
  font-size: 14px;
  text-align: left;
}

#base .list {
  list-style-type: none;
  margin: 0 0 20px;
  padding: 0;
}
#base .list li {
  width: 100%;
  font-size: 14px;
  float: none;
  margin-bottom: 20px;
}
#base .list li:nth-child(2n) {
  float: none;
}
#base .list li .list_txt {
  padding: 10px;
}

}

/* 2022
----------------------------------------*/

/* *****  contribute ***** */

#contribute {}
#contribute .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

#contribute .lead {
  padding-bottom: 40px;
}
#contribute .sct01 {
  margin-bottom: 100px;
}
#contribute .pic {
  text-align: center;
}
#contribute .pic img {
  max-width: 832px;
}
#contribute .pic2 {
  text-align: center;
}
#contribute .pic2 img {
  max-width: 830px;
}

#contribute h3 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 50px;
}
#contribute .btn {
  padding: 30px 0 100px;
}
#contribute .btn a {
  display: block;
  width: 100%;
  max-width: 250px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #0B3775;
  border-radius: 5px;
  padding: 15px;
  margin:  0 auto;
}
#contribute .btn a:hover,
#contribute .pic a:hover{
  opacity: 0.8;
}
#contribute .link a {
  display: block;
  width: 100%;
  color: #0B3775;
  font-weight: bold;
  text-align: center;
  border: 1px solid #0B3775;
  padding: 10px;
}
#contribute .link a:hover {
  background-color:#0B3775;
  color: #fff;
}

@media all and (min-width: 768px) and (max-width: 1024px) {
  #contribute .pic img,
  #contribute .pic2 img{
    max-width: auto;
    width: 100%;
  }
}

/* SP */
@media screen and ( max-width: 767px ) {
  #contribute .lead {
    padding-bottom: 20px;
  }
  #contribute .pic img,
  #contribute .pic2 img{
    max-width: auto;
    width: 100%;
    height: auto;
  }
  #contribute .sct01 {
    margin-bottom: 60px;
  }
  #contribute h3 {
    margin-bottom: 30px;
  }
}


/* *****  solution ***** */


#slTop .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
#slTop ul.slList,
#slTop .slList li{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#slTop ul.slList{
  padding-top: 80px;
}
#slTop ul.slList li{
  float: left;
  position: relative;
  width: 100%;
  max-width: 531px;
  margin-bottom: 40px;
}
#slTop ul.slList li:nth-child(2n){
  float: right;
}
#slTop ul.slList li:hover{
  opacity: 0.8;
}
#slTop ul.slList p{
  position: absolute;
  top:115px;
  left: 110px;
  text-align: center;
  width: 424px;
  font-size: 14px;
}

@media screen and (max-width: 768px){

#slTop ul.slList li{
  float: none;
  max-width: auto;
  margin-bottom: 20px;
}
#slTop ul.slList li:nth-child(2n){
  float: none;
}
#slTop ul.slList li img{
  width: 100%;
  height: auto;
}
#slTop ul.slList p{
  top: 19vw;
  left: 15vw;
  width: calc(100% - 15vw);
  font-size: 11px;
  line-height: 1.3;
}
#slTop ul.slList p.line3{
  top: 17.8vw;
}

}

#solution{}
#solution .scArea{
  width: 100%;
  max-width: 930px;
  margin: 0 auto;
}

#solution .lead {
  text-align: center;
  padding-bottom: 40px;
}
#solution .pic {
  text-align: center;
}

#solution .ttlBox {
  padding: 15px;
  border-top: 5px solid #0B3775;
  border-bottom: 5px solid #0B3775;
  margin-bottom: 40px;
}
#solution .st01 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/ttl_img01.png) 20px center no-repeat;
}
#solution .st02 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/02/ttl_img01.png) 20px center no-repeat;
}
#solution .st03 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/03/ttl_img01.png) 20px center no-repeat;
}
#solution .st04 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/04/ttl_img01.png) 20px center no-repeat;
}
#solution .st05 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/05/ttl_img01.png) 20px center no-repeat;
}
#solution .ttlBox dl {
  padding-left: 130px;
}
#solution .ttlBox dt {
  float: left;
}
#solution .ttlBox dd {
  float: left;
  padding-left: 30px;
}
#solution .ttlBox h3 {
  font-weight: bold;
  font-size: 26px;
  line-height: 1.6;
}

#solution .sct01 {
  margin-bottom: 80px;
}
#solution .sct01 h4 {
  font-size: 125%;
  line-height: 1.3;
}
#solution .sct01 h4.type01 {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/h4_icon01.png) 20px center no-repeat;
  background-color: #F2C81F;
  color: #0B3775;
}
#solution .sct01 h4.type02 {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/h4_icon02.png) 20px center no-repeat;
  background-color: #0B3775;
  color: #fff;
}
#solution .sct01 h4.type03 {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/h4_icon03.png) 20px center no-repeat;
  background-color: #0B3775;
  color: #fff;
}

#solution .sct01 h4.line1 {
  padding: 20px 0 12px 190px;
}
#solution .sct01 h4.line2 {
  padding: 15px 0 7px 190px;
}

#solution .sct01 .txtBox {
  padding-bottom: 80px;
  margin-bottom: 40px;
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/arrow.png) center bottom no-repeat;
}

#solution .sct02 .voice {
  padding: 20px;
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/voice_bg.png) right 50px top no-repeat;
  background-color: #EBECEC;
}
#solution .sct02 .voice dt {
  float: left;
}
#solution .sct02 .voice dd {
  padding-left: 180px;
}
#solution .sct02 .voice dd .name {
  font-weight: bold;
  font-size: 115%;
  margin-bottom: 0.8em;
}
#solution .sct02 .voice dd .name span {
  font-size: 75%;
}
#solution .sct02 .voice dd .txt {
  font-size: 85%;
}

@media all and (min-width: 768px) and (max-width: 1024px) {

#solution .st01 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/ttl_img01.png) 20px 40px no-repeat;
  background-size: 60px;
}
#solution .st02 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/02/ttl_img01.png) 20px 40px no-repeat;
  background-size: 60px;
}
#solution .st03 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/03/ttl_img01.png) 20px 40px no-repeat;
  background-size: 60px;
}
#solution .st04 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/04/ttl_img01.png) 20px 40px no-repeat;
  background-size: 60px;
}
#solution .st05 .ttlBox {
  background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/05/ttl_img01.png) 20px 40px no-repeat;
  background-size: 60px;
}
#solution .ttlBox dl {
  padding-left: 90px;
}
#solution .ttlBox dt {
  width: 240px;
}
#solution .ttlBox dt img {
  width: 100%;
}
#solution .ttlBox dd {
  padding-left: 25px;
}
#solution .ttlBox h3 {
  font-size: 20px;
  line-height: 1.5;
}
  #solution .sct01 {
    margin-bottom: 40px;
  }
  #solution .sct01 .pic img {
    width: 100%;
  }
  #solution .sct01 .pic238 img {
    width: 238px;
  }
}

/* SP */
@media screen and ( max-width: 767px ) {
  #solution .ttlBox {
    padding: 90px 10px 15px;
    border-top: 5px solid #0B3775;
    border-bottom: 5px solid #0B3775;
    margin-bottom: 40px;
  }
  #solution .st01 .ttlBox {
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/ttl_img01.png) center top 20px no-repeat;
    background-size: 43px;
  }
  #solution .st02 .ttlBox {
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/02/ttl_img01.png) center top 20px no-repeat;
    background-size: 43px;
  }
  #solution .st03 .ttlBox {
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/03/ttl_img01.png) center top 20px no-repeat;
    background-size: 43px;
  }
  #solution .st04 .ttlBox {
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/04/ttl_img01.png) center top 20px no-repeat;
    background-size: 43px;
  }
  #solution .st05 .ttlBox {
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/05/ttl_img01.png) center top 20px no-repeat;
    background-size: 43px;
  }
  #solution .ttlBox dl {
    padding: 0;
    margin: 0;
  }
  #solution .ttlBox dt {
    float: none;
    text-align: center;
  }
  #solution .ttlBox dd {
    float: none;
    padding:10px 0 0;
  }
  #solution .ttlBox h3 {
    font-size: 100%;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  #solution .sct01 {
    margin-bottom: 40px;
  }
  #solution .sct01 .pic img {
    width: 100%;
  }
  #solution .sct01 .pic238 img {
    width: 238px;
  }
  #solution .sct01 h4 {
    font-size: 100%;
    text-align: center;
  }
  #solution .sct01 h4.type01 {
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/h4_icon01.png) center 10px no-repeat;
    background-color: #F2C81F;
  }
  #solution .sct01 h4.type02 {
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/h4_icon02.png) center 10px no-repeat;
    background-color: #0B3775;
  }
  #solution .sct01 h4.type03 {
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/h4_icon03.png) center 10px no-repeat;
    background-color: #0B3775;
  }

  #solution .sct01 h4.line1,
  #solution .sct01 h4.line2 {
    padding: 65px 10px 7px;
  }

  #solution .sct01 .txtBox {
    padding-bottom: 40px;
    margin-bottom: 20px;
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/arrow.png) center bottom no-repeat;
    background-size: 46px;
  }
  
  #solution .sct02 .voice {
    padding: 90px 20px 20px;
    background:url(/content/dam/nttcom/hq/jp/about-us/csr/solution/01/voice_bg.png) center top 10px no-repeat;
    background-color: #EBECEC;
  }
  #solution .sct02 .voice dt {
    float: none;
    text-align: center;
  }
  #solution .sct02 .voice dd {
    padding-left: 0;
    padding-top: 10px;
  }
  #solution .sct02 .voice dd .name {
    text-align: center;
  }

}


/* *****  commit ***** */

#commit{}
#commit .scArea{
  width: 100%;
  max-width: 930px;
  margin: 0 auto;
  padding-bottom: 100px;
}

#commit .lead {
  text-align: center;
  padding-bottom: 40px;
}
#commit .pic {
  text-align: center;
}

#commit .sct01 {
  border-top: 20px solid #0F3675;
  border-bottom: 20px solid #0F3675;
  padding: 20px 0;
  margin-bottom: 80px;
}
#commit .sct01 .txt {
  font-size: 15px;
}
#commit .sct01 dl {
  margin-bottom: 20px;
}
#commit .sct01 dt {
  float: left;
}
#commit .sct01 dd {
  padding-left: 270px;
}
#commit .sct01 dd h3 {
  font-size: 125%;
  font-weight: bold;
  line-height: 1.5;
}
#commit .sct01 dd .name {
  font-size: 115%;
}
#commit .sct01 dd .name span {
  font-size: 80%;
}
#commit .sct02 .brbox{
    border-bottom: 10px solid #225BA9;
    margin-bottom: 60px;
}
#commit .sct02 .brbox.br02{
    border-bottom: 10px solid #007858;
}
#commit .sct02 .brbox.br03{
    border-bottom: 10px solid #DE1D2F;
}
#commit .sct02 .brbox.br04{
    border-bottom: 10px solid #7D3086;
}
#commit .sct02 .brbox p{
  font-size: 15px;
}
#commit .sct02 .acd-check{
    display: none;
}
#commit .sct02 .acd-label{
    display: block;
    position: relative;
}
#commit .sct02 .acd-label img{
  vertical-align: bottom;
  width: 100%;
}
#commit .sct02 .acd-label:after{
    box-sizing: border-box;
    color: #000;
    content: '▼';
    font-size: 20px;
    display: block;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
}
#commit .sct02 .brbox.br01 .acd-label:after{
    color: #225BA9;
}
#commit .sct02 .brbox.br02 .acd-label:after{
    color: #007858;
}
#commit .sct02 .brbox.br03 .acd-label:after{
    color: #DE1D2F;
}
#commit .sct02 .brbox.br04 .acd-label:after{
    color: #7D3086;
}

#commit .sct02 .acd-content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0;
    transition: .2s;
    visibility: hidden;
}
#commit .sct02 .acd-check:checked + .acd-label:after{
    content: '▲';
}
#commit .sct02 .acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 20px 0;
    visibility: visible;
}


/* SP */
@media screen and ( max-width: 768px ) {

  #commit .sct01 {
    border-top: 10px solid #0F3675;
    border-bottom: 10px solid #0F3675;
    padding: 10px 0;
    margin-bottom: 40px;
  }
  #commit .sct01 .txt {
    font-size: 13px;
  }
  #commit .sct01 dl {
    margin-bottom: 20px;
  }
  #commit .sct01 dt {
    float: none;
  }
  #commit .sct01 dd {
    padding-left: 0;
  }
  #commit .sct01 dd h3 {
    font-size: 16px;
  }
  #commit .sct01 dd .name {
    font-size: 16px;
  }
  #commit .sct01 dd .name span {
    font-size: 14px;
  }
  #commit .sct02 .brbox{
      border-bottom: 5px solid #225BA9;
      margin-bottom: 20px;
  }
  #commit .sct02 .brbox.br02{
      border-bottom: 5px solid #007858;
  }
  #commit .sct02 .brbox.br03{
      border-bottom: 5px solid #DE1D2F;
  }
  #commit .sct02 .brbox.br04{
      border-bottom: 5px solid #7D3086;
  }
  #commit .sct02 .acd-label:after{
      font-size: 12px;
      bottom: 2px;
  }
  #commit .sct02 .brbox p{
    font-size: 12px;
  }
}

/* *****  pr_top ***** */

#pr_top{}
#pr_top .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-bottom: 100px;
}

#pr_top .scArea h3{
  font-size: 24px;
  color: #0B3775;
  font-weight: bold;
}
#pr_top .scArea .lead{
  font-size: 16px;
}

#pr_top .scArea .sct01{
  margin-bottom: 80px;
}
#pr_top .scArea .step2{
  padding: 40px 0 0;
}
#pr_top .scArea .step2 .leftBox{
  float: left;
  width: 49%;
}
#pr_top .scArea .step2 .rightBox{
  float: right;
  width: 49%;
  text-align: center;
}
#pr_top .scArea .step2 h4{
  display: block;
  padding: 7px 5px 7px;
  background-color: #0B3775;
  color: #fff;
  font-weight: bold;
  line-height: 1.5;
}
#pr_top .scArea .step2 h4 span{
  display: inline-block;
  padding: 2px 5px ;
  margin-right: 10px;
  color: #0B3775;
  background-color: #FABD00;
  border-radius: 2px;
  font-weight: normal;
}
#pr_top .scArea .step2 p{
  font-size: 14px;
}
#pr_top .scArea .step2 p.caps{
  font-size: 12px;
  padding-top: 1em;
}
#pr_top .scArea .step2 p + h4{
  margin-top: 30px;
}


#pr_top .scArea .sct02 h4{
  display: block;
  padding: 10px 5px 7px 110px;
  background-color: #0B3775;
  color: #fff;
  font-weight: bold;
}
#pr_top .scArea .sct02 .ftBox{
  position: relative;
  margin-top: 60px;
}
#pr_top .scArea .sct02 .ftBox .txt{
  padding-left: 110px;
  margin-bottom: 20px;
}
#pr_top .scArea .sct02 .ftBox .icon01{
  position: absolute;
  top: -21px;
  left: -25px;
}
#pr_top .scArea .sct02 .ftBox .icon02{
  position: absolute;
  top: 50px;
  right: 0;
}
#pr_top .scArea .sct02 .caps{
  font-size: 13px;
  padding-top: 10px;
  text-align: right;
}
#pr_top .scArea .sct02 table{}
#pr_top .scArea .sct02 th{
  padding: 7px 10px 5px;
  background-color: #fff;
  font-weight: bold;
}
#pr_top .scArea .sct02 td p + p{ margin-top:5px;}
#pr_top .scArea .sct02 td .constant01{
  display: inline-block;
  padding-top: 18px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/2021/icon01.png") 0 0 no-repeat;
  background-size: 32px;
}
#pr_top .scArea .sct02 td .constant02{
  display: inline-block;
  padding-top: 18px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/2021/icon02.png") 0 0 no-repeat;
  background-size: 32px;
}
#pr_top .scArea .sct02 td .constant03{
  display: inline-block;
  padding-left: 37px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/2021/icon01.png") 0 3px no-repeat;
  background-size: 32px;
}
#pr_top .scArea .sct02 td .constant04{
  display: inline-block;
  padding-left: 37px;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/priority/img/2021/icon02.png") 0 3px no-repeat;
  background-size: 32px;
}
#pr_top .scArea .sct02 .type1 td.bg01{
  background-color: #A3BAD6;
  vertical-align: top;
}
#pr_top .scArea .sct02 .type1 td.bg02{
  background-color: #DCE5EF;
}
#pr_top .scArea .sct02 .type2 td.bg01{
  background-color: #95C3B7;
  vertical-align: top;
}
#pr_top .scArea .sct02 .type2 td.bg02{
  background-color: #D7E8E3;
}
#pr_top .scArea .sct02 .type3 td.bg01{
  background-color: #EAA0A7;
  vertical-align: top;
}
#pr_top .scArea .sct02 .type3 td.bg02{
  background-color: #F8DBDE;
}
#pr_top .scArea .sct02 .type4 td.bg01{
  background-color: #C7A9C9;
  vertical-align: top;
}
#pr_top .scArea .sct02 .type4 td.bg02{
  background-color: #EADEEB;
}

/* SP */
@media screen and ( max-width: 768px ) {

  #pr_top .scArea h3{
    font-size: 18px;
    text-align: center;
  }
  #pr_top .scArea .lead{
    font-size: 14px;
  }

  #pr_top .scArea .sct01{
    margin-bottom: 50px;
  }
  #pr_top .scArea .step2{
    padding: 40px 0 0;
  }
  #pr_top .scArea .step2 .leftBox{
    float: none;
    width: 100%;
  }
  #pr_top .scArea .step2 .rightBox{
    float: none;
    width: 100%;
    padding-top: 20px;
  }
  #pr_top .scArea .step2 .rightBox img{
    width: 100%;
    height: auto;
  }
  #pr_top .scArea .step2 p{
    font-size: 13px;
  }
  #pr_top .scArea .step2 p.caps{
    font-size: 11px;
    padding-top: 1em;
  }
  #pr_top .scArea .step2 p + h4{
    margin-top: 20px;
  }

  #pr_top .scArea .sct02 h4{
    display: block;
    padding: 10px 5px 7px 80px;
    background-color: #0B3775;
    color: #fff;
    font-weight: bold;
  }
  #pr_top .scArea .sct02 .ftBox{
    position: relative;
    margin-top: 60px;
  }
  #pr_top .scArea .sct02 .ftBox .txt{
    padding: 40px 0 0;
    font-size: 13px;
  }
  #pr_top .scArea .sct02 .ftBox .icon01{
    position: absolute;
    top: -30px;
    left: -15px;
  }
  #pr_top .scArea .sct02 .ftBox .icon01 img{
    width: 75%;
  }
  #pr_top .scArea .sct02 .ftBox .icon02{
    top: 40px;
    text-align: right;
  }
  #pr_top .scArea .sct02 .ftBox .icon02 img{
    width: 75%;
  }
  #pr_top .scArea .sct02 .caps{
    font-size: 12px;
    padding-top: 10px;
  }

}




/* ***** vision ***** */

#vision{}
#vision .scArea{
  width: 100%;
  max-width: 923px;
  min-height: 2100px;
  margin: 0 auto;
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg02.png") 0 50% no-repeat;
  position: relative;
}

#vision .wrap{
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg01.jpg") 0 0 no-repeat;
  background-size: cover;
  padding: 0;
  margin-top: 80px;
  width: 100%;
}

#vision .box01{
  position: absolute;
  top: 100px;
  left: 120px;
}
#vision .box02{
  position: absolute;
  top: 170px;
  right: 150px;
}
#vision .box02 p + p{
  padding-top: 25px;
}
#vision .box03{
  position: absolute;
  top: 420px;
  left: 230px;
}
#vision .box04{
  position: absolute;
  top: 610px;
  left: 130px;
}
#vision .box04 p{
  text-align: center;
}
#vision .box04 p + p{
  padding-top: 10px;
}
#vision .box05{
  position: absolute;
  top: 720px;
  left: 20px;
}
#vision .box06{
  position: absolute;
  top: 400px;
  right: 80px;
}
#vision .box06 p{
  text-align: center;
}
#vision .box06 p.txt{
  max-width: 370px;
  padding: 25px 0 10px 50px;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
}

#vision .box07{
  position: absolute;
  top: 1170px;
  left: 230px;
}
#vision .box08{
  position: absolute;
  top: 1320px;
  left: 120px;
}
#vision .box09{
  position: absolute;
  top: 1020px;
  right: 80px;
}
#vision .box09 p,
#vision .box09 div{
  text-align: center;
}
#vision .box09 p.ttl{
  max-width: 350px;
  padding: 10px 0 0;
  font-size: 18px;
  font-weight: bold;
}
#vision .box09 p.txt{
  max-width: 350px;
  padding: 10px 15px 15px;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
}
#vision .box10{
  position: absolute;
  bottom: 200px;
  left: 230px;
}
#vision .box11{
  position: absolute;
  bottom: 60px;
  left: 120px;
}

#vision .box09 .fdList {
  margin: 0;
  padding: 0;
}
#vision .box09 .fdList li{
  float: left;
}
#vision .box09 .fdList li + li{
  margin-left: 12px;
}
#vision .box09 .fdList li img{
  -webkit-filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));
  -moz-filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));
  -ms-filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));
  filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));
}

.tooltip1{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.description1 {
    display: none;
    position: absolute;
    padding: 10px;
    background: rgba(255,255,255,0.8);
    width: 340px;
}
.tooltip1:hover .description1{
    display: inline-block;
    top: 80px;
    left: 0px;
}
.tooltip2{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.description2 {
    display: none;
    position: absolute;
    padding: 10px;
    background: rgba(255,255,255,0.8);
    width: 340px;
}
.tooltip2:hover .description2{
    display: inline-block;
    top: 80px;
    left: -87px;
}
.tooltip3{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.description3 {
    display: none;
    position: absolute;
    padding: 10px;
    background: rgba(255,255,255,0.8);
    width: 340px;
}
.tooltip3:hover .description3{
    display: inline-block;
    top: 80px;
    left: -174px;
}
.tooltip4{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.description4 {
    display: none;
    position: absolute;
    padding: 10px;
    background: rgba(255,255,255,0.8);
    width: 340px;
}
.tooltip4:hover .description4{
    display: inline-block;
    top: 80px;
    left: -261px;
}

#vision .box09 .fdTtl{
  display: block;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 0 15px 45px;
  text-align: left;
}
#vision .box09 .fdTtl.icon01{
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg03.png") 0 0 no-repeat;
}
#vision .box09 .fdTtl.icon02{
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg04.png") 0 0 no-repeat;
}
#vision .box09 .fdTtl.icon03{
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg05.png") 0 5px no-repeat;
}
#vision .box09 .fdTtl.icon04{
  background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg06.png") 0 0 no-repeat;
}
#vision .box09 .fdTxt{
  display: block;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 5px;
  text-align: left;
}
#vision .box09 .fdBtn{
  display: block;
  text-align: right;
  position: relative;
  bottom: -10px;
  right: -15px;
}

/* SP */
@media screen and ( max-width: 768px ) {
  #vision .scArea{
    min-height: 2950px;
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg02_sp.png") 0 50% no-repeat;
  }
  #vision .imgw img{
    width: 90%;
  }
  #vision .sbox01 .pic01{
    text-align: center;
    padding: 20px 0 15px;
  }
  
  #vision .sbox02 .pic01{
    text-align: center;
    padding: 0 0 10px;
  }
  #vision .sbox02 .txt{
    text-align: right;
  }

  #vision .sbox03 .pic01{
    text-align: center;
    padding: 0 0 10px;
  }
  #vision .sbox03 .txt{
    text-align: center;
  }

  #vision .sbox04 .pic01{
    text-align: center;
    padding: 0 0 10px;
  }
  #vision .sbox04 .txt{
    font-size: 12px;
    padding: 0 20px 10px;
    font-weight: bold;
  }
  #vision .sbox04 .btn{
    text-align: center;
  }
  
  #vision .sbox05 .pic01{
    text-align: center;
    padding: 0 0 10px;
  }
  #vision .sbox05 .ttl{
    font-size: 14px;
    padding: 10px 20px;
    text-align: center;
    font-weight: bold;
  }
  #vision .sbox05 .txt{
    font-size: 12px;
    padding: 0 20px 10px;
    font-weight: bold;
  }
  #vision .sbox05 .btn{
    text-align: center;
  }

  #vision .sbox05 .fdList {
    margin: 0 0 0 20px;
    padding: 0;
  }
  #vision .sbox05 .fdList li + li{
    margin-left: 5px;
  }
  #vision .sbox05 .fdList li img{
    -webkit-filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));
    -moz-filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));
    -ms-filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));
    filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));
  }
  .tooltip1:hover .description1{
      display: inline-block;
      top: 80px;
      left: 0px;
  }
  .tooltip2:hover .description2{
      display: inline-block;
      top: 80px;
      left: -85px;
  }
  .tooltip3:hover .description3{
      display: inline-block;
      top: 80px;
      left: -171px;
  }
  .tooltip4:hover .description4{
      display: inline-block;
      top: 80px;
      left: -256px;
  }

  #vision .sbox05 .fdTtl{
  display: block;
  font-size: 14px;
  font-weight: bold;
  padding:5px 0 15px 45px;
  text-align: left;
}
  #vision .sbox05 .fdTtl.icon01{
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg03.png") 0 0 no-repeat;
  }
  #vision .sbox05 .fdTtl.icon02{
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg04.png") 0 0 no-repeat;
  }
  #vision .sbox05 .fdTtl.icon03{
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg05.png") 0 2px no-repeat;
  }
  #vision .sbox05 .fdTtl.icon04{
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/vision/vision01/bg06.png") 0 0 no-repeat;
  }
  #vision .sbox05 .fdTxt{
  display: block;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 5px;
  text-align: left;
}
  #vision .sbox05 .fdBtn{
  display: block;
  text-align: right;
  position: relative;
  bottom: -10px;
  right: -15px;
}
  #vision .sbox06{
    padding: 20px 0 0;
  }
  #vision .sbox06 .pic01{
    text-align: center;
    padding: 50px 0 15px;
  }

}


/* ***** report ***** */
#priority.type5 .sct03 .ctStep2{
  margin-bottom: 40px;
}
#priority.type5 .sct03 .ctStep2 li{
  float: left;
  width: 48%;
  text-align: center;
}
#priority.type5 .sct03 .ctStep2 li + li{
  margin-left: 4%;
}
#priority.type5 .sct03 .ctStep3 li{
  float: left;
  width: 32%;
  text-align: center;
  margin-bottom: 20px;
}
#priority.type5 .sct03 .ctStep3 li + li{
  margin-left: 2%;
}
#priority.type5 .sct03 .ttl{
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}
#priority.type5 .sct03 .ttl2{
  font-size: 20px;
  margin-bottom: 10px;
  padding-left: 55px;
}
#priority.type5 .sct03 .ctPic{
  text-align: center;
}
#priority.type5 .sct03 .ctPic img{
  width: 100%;
  max-width: 800px;
}
#priority.type5 .sct03 .accordion_component.max{
	max-width:100% !important;
	margin:0 auto 50px;
}

#priority .mainIcon{
  text-align: center;
  padding: 80px 0;
}
#priority .sct03 .caps{
  padding-bottom: 1vw;
  font-size: 90%;
  line-height: 1.3;
}
#priority .sct03 h5.cmn1{
  font-size: 18px;
}

#priority .sct03 .picStep{}
#priority .sct03 .picStep + .picStep{
  margin-top: 20px;
}
#priority .sct03 .picStep li{
  width: 31%;
  float: left;
}
#priority .sct03 .picStep li + li{
  margin-left: 3.5%;
}
#priority .sct03 .picStep2{}
#priority .sct03 .picStep + .picStep{
  margin-top: 20px;
}
#priority .sct03 .picStep2 li{
  width: 48%;
  float: left;
}
#priority .sct03 .picStep2 li + li{
  margin-left: 2%;
}
#priority .sct03 .picStep3{}
#priority .sct03 .picStep3 + .picStep3{
  margin-top: 20px;
}
#priority .sct03 .picStep3 li{
  float: left;
}
#priority .sct03 .picStep3 li + li{
  margin-left: 30px;
}
#priority .sct03 .sdgicon01{
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_13.png") 100% 50% no-repeat;
    background-size: 50px;
    padding:20px 60px 20px 0;
    display: inline-block;
}
#priority .sct03 .sdgicon02{
    background: url("/content/dam/nttcom/hq/jp/about-us/csr/img/csr_sdgs_11.png") 100% 50% no-repeat;
    background-size: 50px;
    padding:20px 60px 20px 0;
    display: inline-block;
}

/* SP */
@media screen and ( max-width: 768px ) {

  #priority.type5 .sct03 .ctStep2{
    margin-bottom: 20px;
  }
  #priority.type5 .sct03 .ctStep2 li{
    float: none;
    width: 100%;
  }
  #priority.type5 .sct03 .ctStep2 li + li{
    margin-left: 0;
  }
  #priority.type5 .sct03 .ctStep3 li{
    float: none;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  #priority.type5 .sct03 .ctStep3 li + li{
    margin-left: 0;
  }
  #priority.type5 .sct03 .ttl{
    text-align: center;
    font-size: 16px;
  }
  #priority.type5 .sct03 .ttl2{
    font-size: 16px;
    padding-left: 0;
  }
  #priority.type5 .sct03 .ctPic{
    text-align: center;
  }
  #priority.type5 .sct03 .ctStep2 li img,
  #priority.type5 .sct03 .ctStep3 li img,
  #priority.type5 .sct03 .ctPic img{
    width: 100%;
    max-width: 800px;
  }
  #priority.type5 .sct03 .accordion_component.max{
    max-width:100% !important;
    margin:0 auto 30px;
  }

  #priority .mainIcon{
    padding: 40px 0;
  }
  #priority .mainIcon img{
    width: 100%;
    max-width: 101px;
  }
  #priority .sct03 .caps{
    font-size: 80%;
  }
  #priority .sct03 h5.cmn1{
    font-size: 15px;
  }

  #priority .sct03 .picStep + .picStep{
    margin-top: 10px;
  }
  #priority .sct03 .picStep li{
    width: 100%;
    float: none;
  }
  #priority .sct03 .picStep li + li{
    margin-left: 0;
    margin-top: 10px;
  }
  #priority .sct03 .picStep2{}
  #priority .sct03 .picStep + .picStep{
    margin-top: 20px;
  }
  #priority .sct03 .picStep2 li{
    width: 100%;
    float: none;
  }
  #priority .sct03 .picStep2 li + li{
    margin-left: 0;
    margin-top: 10px;
  }
  #priority .sct03 .picStep3 + .picStep3{
    margin-top: 10px;
  }
  #priority .sct03 .picStep3 li{
    float: none;
  }
  #priority .sct03 .picStep3 li + li{
    margin-left: 0;
    margin-top: 10px;
  }

  #priority .sct03 .w100{
    text-align: center;
  }
    #priority .sct03 .w100 img{
    max-width: 173px;
  }

}



/* 202203 */

/* about */
#about .scArea{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

#about .scArea .lead{
  text-align: center;
  font-size: 30px;
  padding-top: 40px;
  margin-bottom: 30px;
}
#about .scArea .lead02{
  text-align: center;
  font-size: 26px;
  margin-bottom: 60px;
}

#about .scArea .txt01{ 
  line-height: 1.8;
}
#about .scArea .txt01 a{ 
  text-decoration: underline;
}
#about .scArea .txt01 a:hover{ 
  text-decoration: none;
}

#about .scArea .about_list,
#about .scArea .about_list li,
#about .scArea .link_list,
#about .scArea .link_list li{ 
  list-style: none;
  padding: 0;
  margin: 0;
}

#about .scArea .about_list{
  width: 760px;
  padding: 40px 0;
  margin: 0 auto;
}
#about .scArea .about_list li{ 
  float: left;
  width: 187px;
}
#about .scArea .about_list li + li{ 
  margin-left: 2px;
}
#about .scArea .about_list li .box .text01{ 
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
#about .scArea .about_list li .box .text02{ 
  font-size: 13px;
  font-weight: bold;
}
#about .scArea .about_list li.list01 .box{ 
  background-color: #DBE1F2;
  padding: 15px;
}
#about .scArea .about_list li.list01 .box .text01{ 
  border-bottom: 1px solid #6589C5;
}
#about .scArea .about_list li.list02 .box{ 
  background-color: #D4E5DF;
  padding: 15px;
}
#about .scArea .about_list li.list02 .box .text01{ 
  border-bottom: 1px solid #00896D;
}
#about .scArea .about_list li.list03 .box{ 
  background-color: #FBDED4;
  padding: 15px;
}
#about .scArea .about_list li.list03 .box .text01{ 
  border-bottom: 1px solid #E8343D;
}
#about .scArea .about_list li.list04 .box{ 
  background-color: #E7DBEC;
  padding: 15px;
}
#about .scArea .about_list li.list04 .box .text01{ 
  border-bottom: 1px solid #924898;
}

#about .scArea .pic{ 
  text-align: center;
  padding: 60px 0;
}
#about .scArea .pic img{ 
  width: 100%;
  max-width: 832px;
}

#about .scArea .caps{ 
  font-size: 14px;
}
#about .scArea .caps + .caps{ 
  margin-top: 30px;
}

#about .scArea .msg_box{
  padding: 40px 0 100px;
}
#about .scArea .msg_box dt{
  float: left;
  width: 25%;
}
#about .scArea .msg_box dt h3{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
#about .scArea .msg_box dd{
  float: right;
  width: 71%;
}
#about .scArea .msg_box dd h3{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
#about .scArea .msg_box dd p{
  font-size: 14px;
}
#about .scArea .ttl01 {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}

#about .scArea .link_list{
  padding-bottom: 30px;
}
#about .scArea .link_list li{
  float: left;
  margin-left: 4%;
  display: inline-block;
}
#about .scArea .link_list li a{
  color: #000;
  font-size: 14px;
}
#about .scArea .link_list li .img{
  padding-bottom: 5px;
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/sustainability/about/line_bg.gif) no-repeat center bottom;
}
#about .scArea .link_list li .img img{
  vertical-align: bottom;
}
#about .scArea .link_list li:hover .img img{
  opacity: 0.7;
}
#about .scArea .link_list li p + p{
  margin-top: 10px;
}

/* SP */
@media screen and ( max-width: 768px ) {
#about .scArea .lead{
  text-align: center;
  font-size: 18px;
  padding-top: 20px;
  margin-bottom: 20px;
}
#about .scArea .lead02{
  text-align: center;
  font-size: 16px;
  margin-bottom: 30px;
}

#about .scArea .txt01{ 
  line-height: 1.5;
  font-size: 14px;
}

#about .scArea .about_list{
  width: 100%;
  padding: 20px 0;
}
#about .scArea .about_list li{ 
  float: none;
  width: 100%;
}
#about .scArea .about_list li + li{ 
  margin-left: 0;
  margin-top: 20px;
}
#about .scArea .about_list li .ttl{ 
  text-align: center;
}
#about .scArea .about_list li.list01 .ttl{ 
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/sustainability/about/bg01.png) no-repeat;
  background-position: left 0px bottom 18px;
}
#about .scArea .about_list li.list02 .ttl{ 
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/sustainability/about/bg02.png) no-repeat;
  background-position: left 0px bottom 18px;
}
#about .scArea .about_list li.list03 .ttl{ 
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/sustainability/about/bg03.png) no-repeat;
  background-position: left 0px bottom 18px;
}
#about .scArea .about_list li.list04 .ttl{ 
  background: url(/content/dam/nttcom/hq/jp/about-us/csr/sustainability/about/bg04.png) no-repeat;
  background-position: left 0px bottom 18px;
}

#about .scArea .pic{ 
  padding: 30px 0;
}


#about .scArea .caps{ 
  font-size: 12px;
}
#about .scArea .caps + .caps{ 
  margin-top: 15px;
}

#about .scArea .msg_box{
  padding: 30px 0;
}
#about .scArea .msg_box dt{
  float: none;
  width: 100%;
  margin-bottom: 20px;
}
#about .scArea .msg_box dt h3{
  font-size: 18px;
  margin-bottom: 5px;
}
#about .scArea .msg_box dd{
  float: none;
  width: 100%;
}
#about .scArea .msg_box dd h3{
  font-size: 18px;
  margin-bottom: 5px;
}
#about .scArea .msg_box dd p{
  font-size: 12px;
}
#about .scArea .ttl01 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

#about .scArea .link_list{
  padding-bottom: 0px;
}
#about .scArea .link_list li{
  float: none;
  margin-left: 0;
  margin-bottom: 15px;
  width: 100%;
}
#about .scArea .link_list li img{
  width: 100%;
  height: auto;
}
#about .scArea .link_list li a{
  text-align: center;
}
#about .scArea .link_list li p + p{
  margin-top: 5px;
}

}