#mainEnvironment,
#mainGovernance,
#mainSociety {
  background-color: #fff;
  padding-bottom: 80px;
}
#mainEnvironment.water-risk .waterTable tr td:first-of-type,
#mainGovernance.water-risk .waterTable tr td:first-of-type,
#mainSociety.water-risk .waterTable tr td:first-of-type {
  width: 33%;
}
#mainEnvironment.water-risk .waterTable tr td:last-of-type,
#mainGovernance.water-risk .waterTable tr td:last-of-type,
#mainSociety.water-risk .waterTable tr td:last-of-type {
  width: 67%;
}
@media print {
  #mainEnvironment #pageHeader,
  #mainGovernance #pageHeader,
  #mainSociety #pageHeader {
    padding-bottom: 80px;
  }
}
#mainEnvironment #pageHeader .pageHeaderBg::before,
#mainGovernance #pageHeader .pageHeaderBg::before,
#mainSociety #pageHeader .pageHeaderBg::before {
  background-image: linear-gradient(90deg, #C1D16D 80%, transparent 94%);
}
@media screen and (max-width: 1280px) {
  #mainEnvironment #pageHeader .pageHeaderBg::before,
  #mainGovernance #pageHeader .pageHeaderBg::before,
  #mainSociety #pageHeader .pageHeaderBg::before {
    width: 100%;
    background-image: linear-gradient(90deg, #C1D16D 44%, transparent 68%);
  }
}
@media screen and (max-width: 1000px) {
  #mainEnvironment #pageHeader .pageHeaderBg .pageHeaderTitle,
  #mainGovernance #pageHeader .pageHeaderBg .pageHeaderTitle,
  #mainSociety #pageHeader .pageHeaderBg .pageHeaderTitle {
    background-color: #C1D16D;
  }
}
@media print {
  #mainEnvironment #pageHeader .pageHeaderBg .pageHeaderTitle,
  #mainGovernance #pageHeader .pageHeaderBg .pageHeaderTitle,
  #mainSociety #pageHeader .pageHeaderBg .pageHeaderTitle {
    background-color: #C1D16D;
  }
}
#mainEnvironment .wrapper_csr .flexBox,
#mainGovernance .wrapper_csr .flexBox,
#mainSociety .wrapper_csr .flexBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 80px;
}
@media screen and (max-width: 1000px) {
  #mainEnvironment .wrapper_csr .flexBox,
  #mainGovernance .wrapper_csr .flexBox,
  #mainSociety .wrapper_csr .flexBox {
    display: block;
    margin-top: 50px;
  }
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox,
#mainGovernance .wrapper_csr .flexBox .contentsBox,
#mainSociety .wrapper_csr .flexBox .contentsBox {
  padding: 35px 20px 20px;
  border-radius: 6px;
  width: 31.4%;
  display: block;
  box-shadow: 0 0 30px rgba(40, 127, 179, 0.25);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox:hover,
#mainGovernance .wrapper_csr .flexBox .contentsBox:hover,
#mainSociety .wrapper_csr .flexBox .contentsBox:hover {
  background-color: #057A87;
  color: #fff;
  text-decoration: none;
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox:hover .contentsTitle,
#mainGovernance .wrapper_csr .flexBox .contentsBox:hover .contentsTitle,
#mainSociety .wrapper_csr .flexBox .contentsBox:hover .contentsTitle {
  color: #fff;
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox:hover .contentsTitle::before,
#mainGovernance .wrapper_csr .flexBox .contentsBox:hover .contentsTitle::before,
#mainSociety .wrapper_csr .flexBox .contentsBox:hover .contentsTitle::before {
  background-image: url(../images/csr/arw03.svg);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox:hover .contentsTitle::after,
#mainGovernance .wrapper_csr .flexBox .contentsBox:hover .contentsTitle::after,
#mainSociety .wrapper_csr .flexBox .contentsBox:hover .contentsTitle::after {
  filter: brightness(0) invert(1);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox:nth-child(n+4),
#mainGovernance .wrapper_csr .flexBox .contentsBox:nth-child(n+4),
#mainSociety .wrapper_csr .flexBox .contentsBox:nth-child(n+4) {
  margin-top: 32px;
}
@media screen and (max-width: 1000px) {
  #mainEnvironment .wrapper_csr .flexBox .contentsBox,
  #mainGovernance .wrapper_csr .flexBox .contentsBox,
  #mainSociety .wrapper_csr .flexBox .contentsBox {
    width: 100%;
  }
  #mainEnvironment .wrapper_csr .flexBox .contentsBox + .contentsBox,
  #mainGovernance .wrapper_csr .flexBox .contentsBox + .contentsBox,
  #mainSociety .wrapper_csr .flexBox .contentsBox + .contentsBox {
    margin-top: 24px;
  }
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .contentsTitle,
#mainGovernance .wrapper_csr .flexBox .contentsBox .contentsTitle,
#mainSociety .wrapper_csr .flexBox .contentsBox .contentsTitle {
  color: #057A87;
  position: relative;
  padding-left: 56px;
  padding-right: 30px;
  font-size: 15px;
  font-weight: 500;
  height: 36px;
  margin-bottom: 22px;
  line-height: 18px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  #mainEnvironment .wrapper_csr .flexBox .contentsBox .contentsTitle,
  #mainGovernance .wrapper_csr .flexBox .contentsBox .contentsTitle,
  #mainSociety .wrapper_csr .flexBox .contentsBox .contentsTitle {
    margin-bottom: 31px;
    height: auto;
  }
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .contentsTitle::before,
#mainGovernance .wrapper_csr .flexBox .contentsBox .contentsTitle::before,
#mainSociety .wrapper_csr .flexBox .contentsBox .contentsTitle::before {
  content: "";
  background-image: url(../images/csr/environment/arrow_btn.webp);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  transition: all 0.4s;
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .contentsTitle::after,
#mainGovernance .wrapper_csr .flexBox .contentsBox .contentsTitle::after,
#mainSociety .wrapper_csr .flexBox .contentsBox .contentsTitle::after {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 48px;
  height: 48px;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .contentsText,
#mainGovernance .wrapper_csr .flexBox .contentsBox .contentsText,
#mainSociety .wrapper_csr .flexBox .contentsBox .contentsText {
  font-size: 13px;
  padding-top: 16px;
  border-top: 1px solid #E0F4F2;
  line-height: 160%;
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .manezimento::after,
#mainGovernance .wrapper_csr .flexBox .contentsBox .manezimento::after,
#mainSociety .wrapper_csr .flexBox .contentsBox .manezimento::after {
  background-image: url(../images/csr/environment/kankyoumanezimento_icon.svg);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .kankyousengen::after,
#mainGovernance .wrapper_csr .flexBox .contentsBox .kankyousengen::after,
#mainSociety .wrapper_csr .flexBox .contentsBox .kankyousengen::after {
  background-image: url(../images/csr/environment/kankyousengen_icon.svg);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .kikouhendou::after,
#mainGovernance .wrapper_csr .flexBox .contentsBox .kikouhendou::after,
#mainSociety .wrapper_csr .flexBox .contentsBox .kikouhendou::after {
  content: "";
  background-image: url(../images/csr/environment/kikouhendou_icon.svg);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .sizenkanren::after,
#mainGovernance .wrapper_csr .flexBox .contentsBox .sizenkanren::after,
#mainSociety .wrapper_csr .flexBox .contentsBox .sizenkanren::after {
  content: "";
  background-image: url(../images/csr/environment/sizenkanren_icon.svg);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .sigenjunan::after,
#mainGovernance .wrapper_csr .flexBox .contentsBox .sigenjunan::after,
#mainSociety .wrapper_csr .flexBox .contentsBox .sigenjunan::after {
  content: "";
  background-image: url(../images/csr/environment/sigen_icon.svg);
}
#mainEnvironment .wrapper_csr .flexBox .contentsBox .mizurisk::after,
#mainGovernance .wrapper_csr .flexBox .contentsBox .mizurisk::after,
#mainSociety .wrapper_csr .flexBox .contentsBox .mizurisk::after {
  content: "";
  background-image: url(../images/csr/environment/mizurisk_icon.svg);
}

#mainEnvironment .flexArea {
  display: flex;
}
@media screen and (max-width: 1000px) {
  #mainEnvironment .flexArea {
    flex-direction: column;
  }
}

#mainGovernance {
  background-color: #fff;
  padding-bottom: 80px;
}
#mainGovernance #pageHeader .pageHeaderBg::before {
  background-image: linear-gradient(90deg, #DFECF4 80%, transparent 94%);
}
@media screen and (max-width: 1280px) {
  #mainGovernance #pageHeader .pageHeaderBg::before {
    background-image: linear-gradient(90deg, #DFECF4 49%, transparent 66%);
  }
}
@media screen and (max-width: 1000px) {
  #mainGovernance #pageHeader .pageHeaderBg .pageHeaderTitle {
    background-color: #DFECF4;
  }
}
@media print {
  #mainGovernance #pageHeader .pageHeaderBg .pageHeaderTitle {
    background-color: #DFECF4;
  }
}
#mainGovernance .wrapper_csr .flexBox .contentsBox .corporate::after {
  background-image: url(../images/csr/governance/corporate.svg);
}
#mainGovernance .wrapper_csr .flexBox .contentsBox .riskmanagement::after {
  background-image: url(../images/csr/governance/riskmanagement.svg);
}
#mainGovernance .wrapper_csr .flexBox .contentsBox .compliance::after {
  background-image: url(../images/csr/governance/compliance.svg);
}

#mainSociety #pageHeader .pageHeaderBg::before {
  background-image: linear-gradient(90deg, #BDE0F9 60%, transparent 95%);
}
@media screen and (max-width: 1280px) {
  #mainSociety #pageHeader .pageHeaderBg::before {
    background-image: linear-gradient(90deg, #BDE0F9 47%, transparent 65%);
  }
}
@media screen and (max-width: 1000px) {
  #mainSociety #pageHeader .pageHeaderBg .pageHeaderTitle {
    background-color: #BDE0F9;
  }
}
@media print {
  #mainSociety #pageHeader .pageHeaderBg .pageHeaderTitle {
    background-color: #BDE0F9;
  }
}
#mainSociety .wrapper_csr .flexBox .contentsBox .senryaku::after {
  background-image: url(../images/csr/society/senryaku.svg);
}
#mainSociety .wrapper_csr .flexBox .contentsBox .ikusei::after {
  background-image: url(../images/csr/society/ikusei.svg);
}
#mainSociety .wrapper_csr .flexBox .contentsBox .tayousei::after {
  background-image: url(../images/csr/society/tayousei.svg);
}
#mainSociety .wrapper_csr .flexBox .contentsBox .kenkou::after {
  background-image: url(../images/csr/society/kenkou.svg);
}
#mainSociety .wrapper_csr .flexBox .contentsBox .roudouanzen::after {
  background-image: url(../images/csr/society/roudouanzen.svg);
}
#mainSociety .wrapper_csr .flexBox .contentsBox .zinken::after {
  background-image: url(../images/csr/society/zinken.svg);
}
#mainSociety .wrapper_csr .flexBox .contentsBox .sapuraitye-n::after {
  background-image: url(../images/csr/society/sapuraitye-n.svg);
}
#mainSociety .wrapper_csr .flexBox .contentsBox .hinsitu::after {
  background-image: url(../images/csr/society/hinsitu.svg);
}
#mainSociety .wrapper_csr .flexBox .dummyBox {
  visibility: hidden;
  pointer-events: none;
}
#mainSociety .wrapper_csr .flexBox .dummyBox:hover {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}
#mainSociety .socialflex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#mainSociety .socialflex .socialItem {
  width: 31.4%;
}
@media screen and (max-width: 1000px) {
  #mainSociety .socialflex .socialItem {
    width: 48%;
  }
  #mainSociety .socialflex .socialItem:nth-child(n+3) {
    margin-top: 32px;
  }
}
@media screen and (max-width: 769px) {
  #mainSociety .socialflex .socialItem {
    width: 100%;
  }
  #mainSociety .socialflex .socialItem:nth-child(n+2) {
    margin-top: 24px;
  }
}