@charset "UTF-8";
:root {
  --c_black: #707070;
  --c_dark: #3A3A3A;
  --c_base: #4F9FC7;
  --c_gray: #F5F5F5;
  --c_green: #009D37;
  --c_red: #CC0022;
}

#Section04 .BtnWrap a, #Section03 article .BtnWrap a {
  display: flex;
  position: relative;
  height: 52px;
  color: #fff;
  font-size: 125%;
  font-weight: bold;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px inset var(--c_green);
  background: var(--c_green);
}
@media only screen and (max-width: 1199px) {
  #Section04 .BtnWrap a, #Section03 article .BtnWrap a {
    height: 37px;
    font-size: 87.5%;
  }
}
#Section04 .BtnWrap a:after, #Section03 article .BtnWrap a:after {
  content: "";
  position: absolute;
  width: 14px;
  height: 22px;
  top: 50%;
  right: 20px;
  background: #fff;
  -webkit-mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_next.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 14px;
  mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_next.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 14px;
  transform: translateY(-50%);
}
@media only screen and (min-width: 751px), print {
  #Section04 .BtnWrap a, #Section03 article .BtnWrap a {
    transition: 0.3s;
  }
  #Section04 .BtnWrap a:after, #Section03 article .BtnWrap a:after {
    transition: 0.3s;
  }
  #Section04 .BtnWrap a:hover, #Section03 article .BtnWrap a:hover {
    color: var(--c_green);
    background: #fff;
  }
  #Section04 .BtnWrap a:hover:after, #Section03 article .BtnWrap a:hover:after {
    background: var(--c_green);
  }
}

#Contents.Value {
  color: #000;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
}
@media only screen and (max-width: 750px) {
  #Contents.Value {
    padding-inline: 0 !important;
  }
}
#Contents.Value * {
  box-sizing: border-box;
}
#Contents.Value section {
  max-width: 1200px;
  margin: 25px auto 45px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.34);
}
#Contents.Value section .SectionInner {
  padding: 55px 80px 30px;
  overflow: hidden;
}
@media only screen and (max-width: 1199px) {
  #Contents.Value section .SectionInner {
    padding: 35px 16px 20px;
  }
}
#Contents.Value section h3 {
  position: relative;
  padding-left: 125px;
  color: var(--c_black);
  font-size: 150%;
  font-weight: bold;
  line-height: 1.7;
}
@media only screen and (max-width: 1199px) {
  #Contents.Value section h3 {
    padding-left: 60px;
    font-size: 87.5%;
  }
}
#Contents.Value section h3:before {
  content: attr(data-num);
  position: absolute;
  top: 0;
  left: -0.1em;
  color: var(--c_base);
  font-family: "Bahnschrift", "DIN Alternate";
  font-size: 458.3333333333%;
  font-weight: normal;
  line-height: 1;
}
@media only screen and (max-width: 1199px) {
  #Contents.Value section h3:before {
    font-size: 333.3333333333%;
  }
}
#Contents.Value section h3 strong {
  display: block;
  color: var(--c_base);
  font-size: 133.3333333333%;
  text-indent: -0.5em;
}
@media only screen and (max-width: 1199px) {
  #Contents.Value section h3 strong {
    font-size: 112.5%;
  }
}
#Contents.Value section .LeadText {
  margin-top: 35px;
  padding-left: 125px;
  font-size: 100%;
}
@media only screen and (max-width: 1199px) {
  #Contents.Value section .LeadText {
    margin-top: 25px;
    padding-left: 0;
    font-size: 87.5%;
  }
}
@media only screen and (min-width: 751px), print {
  #Contents.Value .OnlySP {
    display: none;
  }
}
#Contents.Value article,
#Contents.Value aside {
  overflow: hidden;
}
#Contents.Value .JS-ScrollAnimation {
  opacity: 0;
  transform: translateY(30px);
  transition: 0.8s;
}
#Contents.Value .JS-ScrollAnimation.JS-Visible {
  opacity: 1;
  transform: translateY(0);
}

.Value * {
  color: inherit;
  margin: 0;
  padding: 0;
  background: none;
}

.slick-track {
  z-index: 1;
}
@media only screen and (min-width: 751px), print {
  .slick-track a {
    transition: 0.3s;
  }
  .slick-track a:hover {
    background: #EAF0CC;
  }
}

.SlideControler {
  display: flex;
  margin-top: 20px;
  padding-block: 5px;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.SlideControler button {
  position: relative;
  width: 40px;
  height: 40px;
  font-size: 0;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--c_green);
  background-color: var(--c_green);
}
@media only screen and (max-width: 1199px) {
  .SlideControler button {
    width: 29px;
    height: 29px;
  }
}
.SlideControler button:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 22px;
  top: 50%;
  left: 50%;
  background: #fff;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 14px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 14px;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 1199px) {
  .SlideControler button:before {
    width: 10px;
    height: 16px;
    -webkit-mask-size: 10px;
    mask-size: 10px;
  }
}
.SlideControler button.slick-prev:before {
  -webkit-mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_prev.svg);
  mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_prev.svg);
}
.SlideControler button.slick-next:before {
  -webkit-mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_next.svg);
  mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_next.svg);
}
.SlideControler button.Pause:before {
  -webkit-mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_pause.svg);
  mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_pause.svg);
}
.SlideControler button.Play {
  display: none;
}
.SlideControler button.Play:before {
  -webkit-mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_play.svg);
  mask-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_play.svg);
}
@media only screen and (min-width: 751px), print {
  .SlideControler button {
    transition: 0.3s;
  }
  .SlideControler button:before {
    transition: 0.3s;
  }
  .SlideControler button:hover {
    background: #fff;
  }
  .SlideControler button:hover:before {
    background: var(--c_green);
  }
}

#MainImageWrap {
  padding-block: 80px 72px;
  background: url(/products/infrastructure/product_site/water_environment/value/image/bg_mainimage.jpg) no-repeat center center;
  background-size: cover;
}
@media only screen and (max-width: 1199px) {
  #MainImageWrap {
    padding: 28px 16px;
  }
}
@media only screen and (max-width: 750px) {
  #MainImageWrap {
    padding-inline: 0;
  }
}
#MainImageWrap .MainImageInner {
  padding: 20px 30px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}
@media only screen and (max-width: 1199px) {
  #MainImageWrap .MainImageInner {
    padding-bottom: 10px;
  }
}
#MainImageWrap .MainImageInner h1 {
  color: #000;
  font-size: 162.5%;
  font-weight: bold;
}
@media only screen and (max-width: 1199px) {
  #MainImageWrap .MainImageInner h1 {
    font-size: 87.5%;
  }
}
#MainImageWrap .MainImageInner h2 {
  color: #000;
  font-size: 212.5%;
  font-weight: bold;
}
@media only screen and (max-width: 1199px) {
  #MainImageWrap .MainImageInner h2 {
    font-size: 137.5%;
  }
}
#MainImageWrap .MainImageInner h2 strong {
  font-size: 128.5714285714%;
}
@media only screen and (max-width: 1199px) {
  #MainImageWrap .MainImageInner h2 strong {
    font-size: 127.2727272727%;
  }
}
#MainImageWrap .MainImageInner .LeadText {
  margin-top: 1em;
  color: var(--c_dark);
  font-size: 87.5%;
  font-weight: bold;
}

.ContentIndex {
  display: flex;
  max-width: 1200px;
  margin: 55px auto 0;
  gap: 10px;
  justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
  .ContentIndex {
    flex-wrap: wrap;
    gap: 40px 20px;
    justify-content: center;
  }
}
.ContentIndex li {
  display: flex;
  position: relative;
  width: 25%;
  padding-block: 15px 5px;
  color: var(--c_black);
  font-size: 87.5%;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  background: var(--c_gray);
}
@media only screen and (min-width: 751px) and (max-width: 1199px) {
  .ContentIndex li {
    width: calc(50% - 10px);
  }
}
@media only screen and (max-width: 750px) {
  .ContentIndex li {
    width: 60%;
    min-width: 280px;
  }
}
.ContentIndex li:before {
  content: attr(data-num);
  position: absolute;
  top: -25px;
  left: 50%;
  padding: 5px 24px;
  color: #fff;
  font-size: 128.5714285714%;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background: var(--c_base);
  transform: translateX(-50%);
}
.ContentIndex li strong {
  color: var(--c_base);
  font-size: 128.5714285714%;
  font-weight: bold;
}


#Section01 .LeadText p,
#Section02 .LeadText p,
#Section03 .LeadText p,
#Section04 .LeadText p {
    color: #000;
    font-size: 110%;
}



#Section01 .Infographics {
  position: relative;
  margin: 100px -80px;
  padding: 10px 80px 0;
  color: #fff;
  background: #3c6c95;
}
@media only screen and (min-width: 751px) and (max-width: 1199px) {
  #Section01 .Infographics {
    margin-inline: -15px;
  }
}
@media only screen and (max-width: 1199px) {
  #Section01 .Infographics {
    padding-inline: 0;
  }
}
#Section01 .Infographics:before, #Section01 .Infographics:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
}
#Section01 .Infographics:before {
  bottom: 100%;
  height: 92px;
  background: url(/products/infrastructure/product_site/water_environment/value/image/wave_top.svg) no-repeat center bottom;
}
@media only screen and (max-width: 1199px) {
  #Section01 .Infographics:before {
    transform: translateY(2px);
  }
}
#Section01 .Infographics:after {
  top: 100%;
  height: 88px;
  background: url(/products/infrastructure/product_site/water_environment/value/image/wave_bottom.svg) no-repeat center top;
}
@media only screen and (max-width: 1199px) {
  #Section01 .Infographics:after {
    transform: translateY(-2px);
  }
}
@media only screen and (min-width: 1200px) {
  #Section01 .DetailList {
    display: flex;
    gap: 10px;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 1199px) {
  #Section01 .DetailList {
    display: block;
    pointer-events: none;
  }
  #Section01 .DetailList .slick-track {
    position: relative;
    width: 100%;
    height: 180px;
  }
  #Section01 .DetailList .slick-track li {
    display: flex;
    position: absolute !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0 !important;
    left: 0 !important;
  }
}
#Section01 .DetailList li {
  text-align: center;
}
#Section01 .DetailList .DetailCounter {
  font-size: 187.5%;
  font-weight: bold;
}
#Section01 .DetailList .DetailCounter strong {
  font-family: "Bahnschrift", "DIN Alternate";
  font-weight: 500;
  font-size: 213.3333333333%;
}
#Section01 .DetailList .DetailCounter strong span {
  opacity: 0;
  transition: 0.5s;
}
#Section01 .DetailList .DetailCounter strong.JS-Visible span {
  opacity: 1;
}
#Section01 .DetailList .DetailComment {
  display: flex;
  height: calc(100% - 54px);
  font-size: 100%;
  align-items: center;
}
@media only screen and (min-width: 1200px) {
  #Section01 .IconList {
    display: flex;
    margin-top: 25px;
    gap: 13px;
    justify-content: center;
  }
}
@media only screen and (max-width: 1199px) {
  #Section01 .IconList {
    pointer-events: none;
  }
  #Section01 .IconList .slick-track {
    display: flex;
    gap: 13px;
  }
  #Section01 .IconList .slick-list {
    margin-block: -30px;
    padding-block: 30px;
    overflow: hidden;
  }
}
#Section01 .IconList li {
  display: flex;
  position: relative;
  width: 135px;
  height: 135px;
  padding-top: 70px;
  font-weight: bold;
  font-size: 87.5%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.16);
  background: #fff;
  z-index: 2;
}
#Section01 .IconList li:before {
  content: "";
  position: absolute;
  top: 58px;
  left: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform: translate(-50%, -50%);
}
#Section01 .IconList .Icon01 {
  color: #407936;
}
#Section01 .IconList .Icon01:before {
  width: 59px;
  height: 51px;
  background-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_section01_01.svg);
}
#Section01 .IconList .Icon02 {
  color: #D35B1C;
}
#Section01 .IconList .Icon02:before {
  width: 62px;
  height: 45px;
  background-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_section01_02.svg);
}
#Section01 .IconList .Icon03 {
  color: #4F9FC7;
}
#Section01 .IconList .Icon03:before {
  width: 47px;
  height: 55px;
  background-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_section01_03.svg);
}
#Section01 .IconList .Icon04 {
  color: #003061;
}
#Section01 .IconList .Icon04:before {
  width: 68px;
  height: 41px;
  background-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_section01_04.svg);
}
#Section01 .IconList .Icon05 {
  color: #9D322A;
}
#Section01 .IconList .Icon05:before {
  width: 63px;
  height: 41px;
  background-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_section01_05.svg);
}
#Section01 .IconList .Icon06 {
  color: #735800;
}
#Section01 .IconList .Icon06:before {
  width: 59px;
  height: 52px;
  background-image: url(/products/infrastructure/product_site/water_environment/value/image/icon_section01_06.svg);
}
#Section01 .EmphasisStyle {
  color: #000;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
}
@media only screen and (max-width: 1199px) {
  #Section01 .EmphasisStyle {
    font-size: 106.25%;
  }
}

#Section02 h4 {
  margin-top: 50px;
  color: #003061;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
}
@media only screen and (max-width: 1199px) {
  #Section02 h4 {
    margin-top: 20px;
    font-size: 87.5%;
  }
}
#Section02 .ImageSet {
  max-width: 781px;
  margin: 10px auto 0;
}
#Section02 .ImageSet .Annotation {
  display: flex;
  margin-top: 20px;
  font-size: 87.5%;
}
@media only screen and (max-width: 750px) {
  #Section02 .ImageSet .Annotation {
    display: block;
  }
  #Section02 .ImageSet .Annotation dt, #Section02 .ImageSet .Annotation dd {
    display: inline;
  }
  #Section02 .ImageSet .Annotation br {
    display: none;
  }
}
#Section02 .ImageSet .Annotation dt {
  flex-shrink: 0;
}

#Section03 .UseCase h4 {
  margin-block: 45px 15px;
  color: #000;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
}
@media only screen and (max-width: 1199px) {
  #Section03 .UseCase h4 {
    font-size: 100%;
  }
}
#Section03 .UseCase .Slider {
  margin: -8px;
  padding: 8px;
  overflow: hidden;
}
#Section03 .UseCase .slick-track {
  display: flex;
}
#Section03 .UseCase .slide {
  display: inline-block;
  width: 310px;
  margin-inline: 21px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background: #fff;
}
#Section03 .UseCase .slide a {
  display: flex;
  height: 100%;
  padding: 10px 13px;
  color: #000;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
}
#Section03 .UseCase .slide .Caption {
  margin-top: 5px;
  font-size: 87.5%;
  font-weight: bold;
}
#Section03 article {
  display: grid;
  max-width: 780px;
  margin: 15px auto 0;
  padding: 20px 30px 25px;
  gap: 20px;
  grid-template-columns: calc(100% - 300px) auto;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background: var(--c_gray);
}
@media only screen and (max-width: 1199px) {
  #Section03 article {
    display: block;
  }
}
#Section03 article .Text {
  grid-area: 1/1/2/2;
}
#Section03 article .Text h4 {
  margin-bottom: 15px;
  color: #000;
  font-size: 150%;
  font-weight: bold;
  text-align: left;
}
@media only screen and (max-width: 1199px) {
  #Section03 article .Text h4 {
    font-size: 100%;
  }
}
#Section03 article .Text p {
  font-size: 87.5%;
}
@media only screen and (max-width: 1199px) {
  #Section03 article .Text p br {
    display: none;
  }
}
#Section03 article .BtnWrap {
  grid-area: 2/1/3/2;
  margin-top: 20px;
}
#Section03 article .BtnWrap a {
  width: 100%;
}
#Section03 article .SDGsIcons {
  grid-area: 1/2/3/3;
  display: flex;
  max-width: 240px;
  margin-left: 60px;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center;
  gap: 9px 6px;
}
#Section03 article .SDGsIcons img {
  display: block;
  width: 75px;
}
@media only screen and (max-width: 1199px) {
  #Section03 article .SDGsIcons {
    width: 100%;
    max-width: 100%;
    margin: 20px auto 0;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: center;
  }
  #Section03 article .SDGsIcons li {
    width: 58px;
  }
  #Section03 article .SDGsIcons img {
    width: 100%;
  }
}

#Section04 .InsertImage {
  height: 130px;
  margin: 43px -80px;
  background: url(/products/infrastructure/product_site/water_environment/value/image/bg_section04.jpg) repeat-x;
  background-position: 0 0;
  animation: 40s linear infinite InsertImage;
}
@media only screen and (max-width: 1199px) {
  #Section04 .InsertImage {
    margin-inline: -15px;
  }
}
@media only screen and (max-width: 1199px) {
  #Section04 .InsertImage {
    margin-block: 20px;
  }
}
#Section04 .BtnWrap {
  display: flex;
  margin-top: 35px;
  gap: 25px;
  justify-content: center;
}
@media only screen and (max-width: 750px) {
  #Section04 .BtnWrap {
    padding-inline: 15px;
    flex-direction: column;
  }
}
#Section04 .BtnWrap a {
  width: 300px;
}
@media only screen and (max-width: 750px) {
  #Section04 .BtnWrap a {
    width: 100%;
  }
}
#Section04 .BtnWrap a small {
  font-size: 80%;
}
@media only screen and (max-width: 1199px) {
  #Section04 .BtnWrap a small {
    transform: translateY(0.1em);
  }
}

@keyframes InsertImage {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1203px 0;
  }
}
#Documents {
  max-width: 1040px;
  margin: auto;
}
#Documents h3 {
  margin-bottom: 20px;
  color: #000;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
}
@media only screen and (max-width: 1199px) {
  #Documents h3 {
    font-size: 100%;
  }
}
#Documents .Slider {
  margin: -8px;
  padding: 8px;
  overflow: hidden;
}
#Documents .slick-track {
  display: flex;
}
#Documents .slide {
  display: inline-block;
  width: 235px;
  margin-inline: 17px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background: #fff;
}
#Documents .slide a {
  display: flex;
  height: 100%;
  color: #000;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
}
#Documents .slide .Thumbnail img {
  display: block;
  max-width: 100%;
  margin: auto;
}
#Documents .slide .Caption {
  display: flex;
  height: 100%;
  margin-block: 5px;
  color: var(--c_red);
  font-size: 87.5%;
  text-align: center;
  line-height: 1.4;
  align-items: center;
  justify-content: center;
}
#Documents .slide .Caption span:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 3px;
  background: url(/image/jp/r1/icon/icon_pdf_hd.gif) no-repeat center center;
  background-size: cover;
}

.ContactInformation {
  position: relative;
  margin-top: 30px;
  padding-block: 40px 105px;
  color: #000;
  text-align: center;
  background: #ECF9FF;
}
@media only screen and (max-width: 1199px) {
  .ContactInformation {
    padding: 30px 15px 90px;
    padding-inline: 15px;
  }
}
.ContactInformation h4 {
  margin-bottom: 16px;
  font-size: 150%;
  font-weight: bold;
}
@media only screen and (max-width: 1199px) {
  .ContactInformation h4 {
    font-size: 112.5%;
  }
}
.ContactInformation p {
  font-weight: bold;
  font-size: 87.5%;
}
.ContactInformation:after {
  content: "";
  position: absolute;
  width: 130px;
  height: 72px;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  background: url(/products/infrastructure/product_site/water_environment/value/image/arw_contact.svg) no-repeat center center;
  background-size: cover;
}
@media only screen and (max-width: 1199px) {
  .ContactInformation:after {
    width: 89px;
    height: 48px;
    bottom: 30px;
  }
}