@charset "utf-8";

/* 戸建て住宅排水管の高圧洗浄 */
.haisuikan {
  .header {
    padding: 0.40rem 0.30rem;
    @media screen and (max-width: 640px) {
      padding: 0.30rem 0.20rem;
    }
    .ttl {
      font-size: 0.60rem;
      font-weight: 700;
      text-align: center;
      line-height: 1.3;
      color: #0068b6;
      padding-bottom: 0.20rem;
      @media screen and (max-width: 640px) {
        font-size: 0.30rem;
      }
    }
  }
  .overview {
    background-color: #fdfce9;
    padding: 0.30rem;
    @media screen and (max-width: 640px) {
      padding: 0.20rem;
    }
    img {
      display: block;
    }
    .lead {
      font-size: 0.26rem;
      font-weight: 700;
      text-align: center;
      padding: 0.20rem 0 0.10rem;
      @media screen and (max-width: 640px) {
        font-size: 0.16rem;
      }
    }
    .txt {
      font-size: 0.18rem;
      font-weight: 700;
      text-align: center;
      @media screen and (max-width: 640px) {
        font-size: 0.12rem;
      }
    }
  }
  .needs {
    background-color: #FFF;
    padding: 0.30rem;
    @media screen and (max-width: 640px) {
      padding: 0.20rem;
    }
    .kakomi {
      border: 0.04rem solid #0068b6;
      padding: 0.30rem;
      border-radius: 0.10rem;
      color: #0068b6;
      @media screen and (max-width: 640px) {
        padding: 0.20rem;
      }
      .kakomi_ttl {
        font-size: 0.40rem;
        font-weight: 700;
        text-align: center;
        padding-bottom: 0.15rem;
        border-bottom: 0.03rem solid #0068b6;
        @media screen and (max-width: 640px) {
          font-size: 0.26rem;
          border-bottom: 0.02rem solid #0068b6;
        }
      }
      .txt {
        font-size: 0.22rem;
        font-weight: 600;
        line-height: 1.65;
        text-align: justify;
        padding-top: 0.20rem;
        @media screen and (max-width: 640px) {
          font-size: 0.14rem;
          padding-top: 0.10rem;
        }
      }
    }
  }
  .checkpoint {
    padding: 0.30rem 0;
    @media screen and (max-width: 640px) {
      padding-bottom: 0;
    }
    .checkpoint_ttl {
      font-size: 0.27rem;
      font-weight: 700;
      text-align: center;
      padding-bottom: 0.15rem;
      border-bottom: 0.03rem solid #0068b6;
      color: #0068b6;
      margin-bottom: 0.20rem;
      @media screen and (max-width: 640px) {
        font-size: 0.16rem;
        padding-bottom: 0.10rem;
        border-bottom: 0.02rem solid #0068b6;
      }
    }
    .list {
      border: 0.04rem solid #0068b6;
      padding: 0.30rem;
      border-radius: 0.10rem;
      color: #0068b6;
      display: flex;
      flex-wrap: wrap;
      gap: 0.30rem 0;
      @media screen and (max-width: 640px) {
        padding: 0.20rem;
        gap: 0.20rem 0;
      }
      .detail {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        .icon {
          width:1.00rem;
          @media screen and (max-width: 640px) {
            width: 0.50rem;
            position: relative;
            left: -0.05rem;
          }
          img {
            display: block;
          }
        }
        .txt_box {
          width: calc(100% - 1.20rem);
          @media screen and (max-width: 640px) {
            width: calc(100% - 0.60rem);
          }
          .list_ttl {
            font-size: 0.22rem;
            font-weight: 700;
            padding-bottom: 0.10rem;
            @media screen and (max-width: 640px) {
              font-size: 0.15rem;
              padding-bottom: 0.06rem;
              letter-spacing: 0;
            }
          }
        }
        .txt {
          font-size: 0.18rem;
          line-height: 1.5;
          text-align: justify;
          @media screen and (max-width: 640px) {
            font-size: 0.11rem;
            font-weight: 500;
          }
        }
      }
    }
  }
  .kodawari {
    background-color: #f8f4e8;
    padding: 0.30rem;
    color: #164565;
    @media screen and (max-width: 640px) {
      padding: 0.30rem 0.20rem;
    }
    .kodawari_ttl {
      font-size: 0.40rem;
      font-weight: 700;
      text-align: center;
      padding-bottom: 0.15rem;
      border-bottom: 0.03rem solid #164565;
      margin-bottom: 0.30rem;
      @media screen and (max-width: 640px) {
        font-size: 0.28rem;
        border-bottom: 0.02rem solid #164565;
      }
    }
    .icon {
      width: 1.80rem;
      float: left;
      padding: 0.10rem 0.20rem 0 0;
      @media screen and (max-width: 640px) {
        width: 0.90rem;
      }
    }
    .txt {
      font-size: 0.24rem;
      font-weight: 500;
      line-height: 1.65;
      @media screen and (max-width: 640px) {
        font-size: 0.15rem;
        line-height: 1.75;
      }
    }
  }
}



.price_list {
  .list {
    .detail {
      .txt_box {
        .price_ttl {
          font-size: 0.30rem;
          @media screen and (max-width: 640px) {
            font-size: 0.18rem;
          }
        }
        .price {
          bottom: 50%;
          transform: translateY(50%);
        }
      }
    }
  }
  .attention {
    background-color: #FFF;
    border-radius: 0.10rem;
    padding: 0.20rem;
    margin-top: 0.20rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    .icon {
      width: 1.00rem;
    }
    .txt {
      width: calc(100% - 1.20rem);
      font-size: 0.26rem;
      font-weight: 700;
      color: #01456c;
      line-height: 1.3;
    }
  }
}