.JS #Contents {
  padding-bottom: 75px; }
  @media screen and (min-width: 768px) and (max-width: 994px) {
    .JS #Contents {
      padding-left: 50px;
      padding-right: 50px; } }
  .JS #Contents * {
    box-sizing: border-box; }
  .JS #Contents h2 {
    position: relative;
    margin: 0;
    padding: 0 0 20px;
    /*font-size: 36px;*/
    font-size: 225%;
    font-weight: bold;
    text-align: center;
    background: none; }
    .JS #Contents h2:before {
      content: "";
      position: absolute;
      width: 200px;
      height: 1px;
      left: 50%;
      bottom: 0;
      background: #606060;
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%); }
      @media screen and (max-width: 399px) {
        .JS #Contents h2 {
          font-size: 180%; } }
  .JS #Contents .LeadText {
    max-width: 860px;
    margin: auto; }

#Contents.SDGsTop {
  color: #333; }
  #Contents.SDGsTop #MainImageWrap {
    display: flex;
    position: relative;
    height: 270px;
    align-items: center;
    justify-content: center;
    background: url(/products/infrastructure/product_site/water_environment/sdgs/image/bg_mainimage_01.jpg) no-repeat center center;
    background-size: cover; }
    #Contents.SDGsTop #MainImageWrap h1 {
      position: relative;
      width: 100%;
      max-width: 1000px;
      margin: 0;
      padding: 0 15px;
      color: #333;
      text-align: left;
      /*font-size: 42px;*/
      font-size: 262.5%;
      font-weight: bold;
      background: none;
      z-index: 2;
      text-shadow: 0 0 10px #fff, 0 0 10px #fff; }
      @media screen and (min-width: 768px) and (max-width: 994px) {
        #Contents.SDGsTop #MainImageWrap h1 {
          padding: 0 50px; } }
      @media screen and (max-width: 399px) {
        #Contents.SDGsTop #MainImageWrap h1 {
          font-size: 200%; } }
    @media screen and (min-width: 995px) {
      #Contents.SDGsTop #MainImageWrap:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 50%;
        left: 0;
        bottom: -1px;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
        background-size: 100%;
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #ffffff));
        background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%); } }
    @media screen and (max-width: 1304px) {
      #Contents.SDGsTop #MainImageWrap {
        width: calc(100% + 30px);
        margin-left: -15px; } }
    @media screen and (min-width: 768px) and (max-width: 994px) {
      #Contents.SDGsTop #MainImageWrap {
        width: calc(100% + 100px);
        height: 230px;
        margin-left: -50px; } }
    @media screen and (max-width: 767px) {
      #Contents.SDGsTop #MainImageWrap {
        display: block;
        height: auto;
        background: none; }
        #Contents.SDGsTop #MainImageWrap:before {
          content: "";
          display: block;
          width: 100%;
          height: 230px;
          background: url(/products/infrastructure/product_site/water_environment/sdgs/image/bg_mainimage_01.jpg) no-repeat center center;
          background-size: cover; }
        #Contents.SDGsTop #MainImageWrap h1 {
          margin-top: 20px;
          text-align: center; } }
  #Contents.SDGsTop .LeadText {
    max-width: 970px; }
  #Contents.SDGsTop .SDGsCaseSection {
    position: relative;
    max-width: 1275px;
    margin: 30px auto 0; }
    @media screen and (min-width: 995px) {
      #Contents.SDGsTop .SDGsCaseSection {
        margin-top: -50px; } }
    @media screen and (max-width: 767px) {
      #Contents.SDGsTop .SDGsCaseSection {
        margin-top: 20px; } }
    #Contents.SDGsTop .SDGsCaseSection .SDGsList {
      display: flex;
      flex-wrap: wrap;
      margin: 40px auto 0; }
      #Contents.SDGsTop .SDGsCaseSection .SDGsList a {
        display: block;
        height: 100%;
        color: #333;
        text-decoration: none; }
        #Contents.SDGsTop .SDGsCaseSection .SDGsList a:hover {
          opacity: 0.7; }
      #Contents.SDGsTop .SDGsCaseSection .SDGsList li {
        width: 240px;
        margin-left: 18px; }
        @media screen and (min-width: 1305px) {
          #Contents.SDGsTop .SDGsCaseSection .SDGsList li:first-child {
            margin-left: 0; } }
        #Contents.SDGsTop .SDGsCaseSection .SDGsList li.Case06 dl:before {
          border-color: transparent transparent #00A6D9 transparent; }
        #Contents.SDGsTop .SDGsCaseSection .SDGsList li.Case11 dl:before {
          border-color: transparent transparent #F5A20B transparent; }
        #Contents.SDGsTop .SDGsCaseSection .SDGsList li.Case09 dl:before {
          border-color: transparent transparent #EC6A06 transparent; }
        #Contents.SDGsTop .SDGsCaseSection .SDGsList li.Case13 dl:before {
          border-color: transparent transparent #407936 transparent; }
        #Contents.SDGsTop .SDGsCaseSection .SDGsList li.Case04 dl:before {
          border-color: transparent transparent #C50E28 transparent; }
      #Contents.SDGsTop .SDGsCaseSection .SDGsList dl {
        position: relative;
        height: 100%;
        background: #E6E6E6; }
        #Contents.SDGsTop .SDGsCaseSection .SDGsList dl:before {
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          right: 0;
          bottom: 0;
          border-style: solid;
          border-width: 0 0 25px 25px; }
        #Contents.SDGsTop .SDGsCaseSection .SDGsList dl dd {
          padding: 15px 10px 25px; }
      @media screen and (min-width: 995px) and (max-width: 1304px) {
        #Contents.SDGsTop .SDGsCaseSection .SDGsList {
          max-width: 756px; }
          #Contents.SDGsTop .SDGsCaseSection .SDGsList li:nth-child(3n+1) {
            margin-left: 0; }
          #Contents.SDGsTop .SDGsCaseSection .SDGsList li:nth-child(n+4) {
            margin-top: 18px; } }
      @media screen and (max-width: 994px) {
        #Contents.SDGsTop .SDGsCaseSection .SDGsList {
          display: block; }
          #Contents.SDGsTop .SDGsCaseSection .SDGsList li {
            width: 100%;
            margin: 0; }
            #Contents.SDGsTop .SDGsCaseSection .SDGsList li:nth-child(n+2) {
              margin-top: 30px; }
            #Contents.SDGsTop .SDGsCaseSection .SDGsList li dl {
              display: flex; }
              #Contents.SDGsTop .SDGsCaseSection .SDGsList li dl dt {
                width: 140px;
                flex-shrink: 0; }
              #Contents.SDGsTop .SDGsCaseSection .SDGsList li dl dd {
                display: flex;
                align-items: center;
                padding: 10px 5%;
                /*font-size: 14px;*/
                font-size: 87.5%; } }
  #Contents.SDGsTop .UseCaseSection {
    max-width: 1275px;
    margin: 100px auto 0; }
    #Contents.SDGsTop .UseCaseSection .UseCaseList {
      display: flex;
      margin-top: 50px;
      flex-wrap: wrap; }
      @media screen and (min-width: 995px) and (max-width: 1304px) {
        #Contents.SDGsTop .UseCaseSection .UseCaseList {
          max-width: 625px;
          margin: 50px auto 0;
          justify-content: center; } }
      #Contents.SDGsTop .UseCaseSection .UseCaseList a {
        display: block;
        text-decoration: none; }
        #Contents.SDGsTop .UseCaseSection .UseCaseList a:hover {
          opacity: 0.7; }
        #Contents.SDGsTop .UseCaseSection .UseCaseList a.IconBlank dt:after, #Contents.SDGsTop .UseCaseSection .UseCaseList a.IconMov dt:after {
          content: "";
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-left: 3px;
          vertical-align: middle;
          background-size: 20px !important; }
        #Contents.SDGsTop .UseCaseSection .UseCaseList a.IconBlank dt:after {
          background: url(/products/infrastructure/product_site/water_environment/sdgs/image/icon_new_window_white_hd.gif) no-repeat; }
        #Contents.SDGsTop .UseCaseSection .UseCaseList a.IconMov dt:after {
          background: url(/products/infrastructure/product_site/water_environment/sdgs/image/icon_movie_white_hd.gif) no-repeat; }
      #Contents.SDGsTop .UseCaseSection .UseCaseList li {
        background: #333; }
        @media screen and (min-width: 995px) {
          #Contents.SDGsTop .UseCaseSection .UseCaseList li {
            width: 300px;
            margin-left: 25px; }
            #Contents.SDGsTop .UseCaseSection .UseCaseList li:first-child {
              margin-left: 0; } }
        @media screen and (min-width: 995px) and (max-width: 1304px) {
          #Contents.SDGsTop .UseCaseSection .UseCaseList li:nth-child(2n+1) {
            margin-left: 0; }
          #Contents.SDGsTop .UseCaseSection .UseCaseList li:nth-child(n+3) {
            margin-top: 25px; } }
        #Contents.SDGsTop .UseCaseSection .UseCaseList li .ImageWrap {
          position: relative; }
          #Contents.SDGsTop .UseCaseSection .UseCaseList li .ImageWrap:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            box-shadow: 0 0 0 1px #ccc inset; }
          #Contents.SDGsTop .UseCaseSection .UseCaseList li .ImageWrap img {
            width: 100%; }
        #Contents.SDGsTop .UseCaseSection .UseCaseList li dl {
          height: calc(100% - 160px);
          padding: 10px;
          color: #fff; }
          #Contents.SDGsTop .UseCaseSection .UseCaseList li dl dt {
            /*font-size: 18px;*/
            font-size: 112.5%;
            font-weight: bold;
            line-height: 28px; }
          #Contents.SDGsTop .UseCaseSection .UseCaseList li dl dd {
            margin-top: 10px;
            /*font-size: 14px;*/
            font-size: 87.5%;
            line-height: 20px; }
      @media screen and (max-width: 994px) {
        #Contents.SDGsTop .UseCaseSection .UseCaseList {
          display: block; }
          #Contents.SDGsTop .UseCaseSection .UseCaseList li {
            width: 100%; }
            #Contents.SDGsTop .UseCaseSection .UseCaseList li:nth-child(n+2) {
              margin-top: 30px; } }
      @media screen and (min-width: 768px) and (max-width: 994px) {
        #Contents.SDGsTop .UseCaseSection .UseCaseList li a {
          display: flex; }
          #Contents.SDGsTop .UseCaseSection .UseCaseList li a .ImageWrap {
            position: relative;
            width: 330px;
            min-height: 176px;
            overflow: hidden;
            flex-shrink: 0; }
            #Contents.SDGsTop .UseCaseSection .UseCaseList li a .ImageWrap:before {
              z-index: 2; }
            #Contents.SDGsTop .UseCaseSection .UseCaseList li a .ImageWrap img {
              position: absolute;
              height: 100%;
              top: 50%;
              left: 50%;
              -moz-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
          #Contents.SDGsTop .UseCaseSection .UseCaseList li a dl {
            height: 100%; } }
  #Contents.SDGsTop .AdditionalNotes {
    max-width: 1275px;
    margin: 100px auto 0; }

#Contents.SDGsDetail.Case06 #PageTitleWrap h1:before {
  background: url(/products/infrastructure/product_site/water_environment/sdgs/image/ph_sdgs_06.png); }
#Contents.SDGsDetail.Case06 h2:before, #Contents.SDGsDetail.Case06 h3:before {
  background: #00A6D9; }
#Contents.SDGsDetail.Case11 #PageTitleWrap h1:before {
  background: url(/products/infrastructure/product_site/water_environment/sdgs/image/ph_sdgs_11.png); }
#Contents.SDGsDetail.Case11 h2:before, #Contents.SDGsDetail.Case11 h3:before {
  background: #F5A20B; }
#Contents.SDGsDetail.Case09 #PageTitleWrap h1:before {
  background: url(/products/infrastructure/product_site/water_environment/sdgs/image/ph_sdgs_09.png); }
#Contents.SDGsDetail.Case09 h2:before, #Contents.SDGsDetail.Case09 h3:before {
  background: #EC6A06; }
#Contents.SDGsDetail.Case13 #PageTitleWrap h1:before {
  background: url(/products/infrastructure/product_site/water_environment/sdgs/image/ph_sdgs_13.png); }
#Contents.SDGsDetail.Case13 h2:before, #Contents.SDGsDetail.Case13 h3:before {
  background: #407936; }
#Contents.SDGsDetail.Case04 #PageTitleWrap h1:before {
  background: url(/products/infrastructure/product_site/water_environment/sdgs/image/ph_sdgs_04.png); }
#Contents.SDGsDetail.Case04 h2:before, #Contents.SDGsDetail.Case04 h3:before {
  background: #C50E28; }
#Contents.SDGsDetail #PageTitleWrap h1 {
  display: flex;
  align-items: center;
  max-width: 1275px;
  margin: auto;
  /*font-size: 55px;*/
  font-size: 343.5%;
  font-weight: bold;
  line-height: 1.4; }
  @media screen and (min-width: 995px) and (max-width: 1304px) {
    #Contents.SDGsDetail #PageTitleWrap h1 {
      /*font-size: 40px;*/
      font-size: 250%; } }
  @media screen and (max-width: 994px) {
    #Contents.SDGsDetail #PageTitleWrap h1 {
      /*font-size: 28px;*/
      font-size: 175%; } }
  @media screen and (max-width: 767px) {
    #Contents.SDGsDetail #PageTitleWrap h1 {
      padding-top: 20px;
      align-items: flex-start; }
      #Contents.SDGsDetail #PageTitleWrap h1 br {
        display: none; } }
  #Contents.SDGsDetail #PageTitleWrap h1:before {
    content: "";
    width: 240px;
    height: 240px;
    margin-right: 20px;
    background-size: 100% !important;
    background-repeat: no-repeat !Important;
    flex-shrink: 0; }
    @media screen and (max-width: 994px) {
      #Contents.SDGsDetail #PageTitleWrap h1:before {
        width: 140px;
        height: 140px; } }
  @media screen and (max-width: 399px) {
    #Contents.SDGsDetail #PageTitleWrap h1 {
      display: block; }
      #Contents.SDGsDetail #PageTitleWrap h1:before {
        display: block;
        margin: 0 auto 20px; } }
#Contents.SDGsDetail .LeadText {
  /*font-size: 20px;*/
  font-size: 125%;
  margin-top: 50px; }
  @media screen and (max-width: 994px) {
    #Contents.SDGsDetail .LeadText {
      margin-top: 30px; } }
#Contents.SDGsDetail h2 {
  padding: 35px 15px 60px;
  margin-top: 60px;
  line-height: 1.2;
  background: #F2F2F2; }
  @media screen and (max-width: 994px) {
    #Contents.SDGsDetail h2 {
      margin-top: 30px; } }
  #Contents.SDGsDetail h2:before {
    bottom: 40px; }
#Contents.SDGsDetail h3 {
  position: relative;
  margin: 0;
  padding: 0;
  background: 0;
  color: #333;
  line-height: 1.2;
  padding-left: 20px;
  margin-bottom: 30px;
  /*font-size: 32px;*/
  font-size: 200%;
  font-weight: bold; }
  @media screen and (max-width: 767px) {
    #Contents.SDGsDetail h3 br {
      display: none; } }
  #Contents.SDGsDetail h3 .TextSmall {
    display: block;
    margin-bottom: 10px;
    /*font-size: 26px;*/
    font-size: 81%; }
  #Contents.SDGsDetail h3:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: 0; }
#Contents.SDGsDetail section + section h2 {
  margin-top: 150px; }
  @media screen and (max-width: 994px) {
    #Contents.SDGsDetail section + section h2 {
      margin-top: 75px; } }
#Contents.SDGsDetail article,
#Contents.SDGsDetail aside {
  max-width: 1160px;
  margin: auto; }
  #Contents.SDGsDetail article .ComboBox,
  #Contents.SDGsDetail aside .ComboBox {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 994px) {
      #Contents.SDGsDetail article .ComboBox,
      #Contents.SDGsDetail aside .ComboBox {
        display: block; } }
    #Contents.SDGsDetail article .ComboBox .RightSide,
    #Contents.SDGsDetail aside .ComboBox .RightSide {
      width: 490px;
      max-width: 100%;
      margin-left: 50px;
      flex-shrink: 0; }
      @media screen and (max-width: 994px) {
        #Contents.SDGsDetail article .ComboBox .RightSide,
        #Contents.SDGsDetail aside .ComboBox .RightSide {
          margin: 30px auto 0; } }
      #Contents.SDGsDetail article .ComboBox .RightSide.Border img,
      #Contents.SDGsDetail aside .ComboBox .RightSide.Border img {
        border: 1px solid #D9D9D9; }
#Contents.SDGsDetail article {
  margin-top: 50px; }
  #Contents.SDGsDetail article + article {
    margin-top: 100px; }
  #Contents.SDGsDetail article .AdditionalNotesStyle3 {
    margin-top: 1em; }
  #Contents.SDGsDetail article p {
    text-indent: 1em; }
#Contents.SDGsDetail aside {
  margin-top: 100px; }