@charset "utf-8";
/**********************************************
 * 
 * WATER
 *
***********************************************/

.water .col3 {
  display: flex;
  flex-wrap: wrap;
  margin: -15px -15px 75px;
}

.water .col3 > .item {
  width: calc( (100% - 90px ) / 3 );
  margin: 15px;
}

.water .col3 img {
  width: 100%;
  height: auto;
}

.col3 .img-description {
  margin-top: 20px;
}

.img-description dt {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 2rem;
}

.img-description dd {
  color: #333;
  font-size: 1.8rem;
}

.img-description dd > .attention {
  margin-top: 30px;
}

.attention {
  display: block;
  font-size: 1.4rem;
}

.note-box {
  margin-bottom: 100px;
  padding: 50px;
  border-radius: 20px;
  background: #f0f7ea;
  font-size: 2rem;
  line-height: 2;
}

.note-box dt {
  margin-bottom: 20px;
  font-size: 2.6rem;
  font-weight: 700;
}

.note-box dt span {
  color: #007e43;
}

.note-box .circle > li::before {
  top: 14px;
}

@media ( max-width: 767px ) {
  .water .col3 {
    flex-direction: column;
    margin: 0 0 40px;
  }

  .water .col3 > .item {
    width: 100%;
    margin: 0;
  }

  .water .col3 > .item + .item {
    margin-top: 30px;
  }

  .note-box    { margin-bottom: 40px; padding: 20px; font-size: 1.6rem; line-height: 1.75; }
  .note-box dt { margin-bottom: 10px; font-size: 2rem; }
  .note-box dd { text-align: left; }
}