@charset "utf-8";

.trouble_intro {
  .ttl {
    position: relative;
    span {
      position: relative;
      &::before {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        background-image: url(../img/waterpipe/snow_01.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0.10rem;
        left: -0.50rem;
        @media screen and (max-width: 640px) {
          width: 0.25rem;
          height: 0.25rem;
          top: 0.05rem;
          left: -0.35rem;
        }
      }
    }
  }
  .list {
    .txt {
      display: inline-flex;
      text-align: left;
      align-items: center;
      img {
        width: 0.80rem;
        display: block;
        padding-left: 0.20rem;
        padding-right: 0.10rem;
        @media screen and (max-width: 640px) {
          width: 0.40rem;
          padding-left: 0.10rem;
          padding-right: 0.05rem;
        }
      }
    }
  }
}

/* 信頼できる業者へ */
.trust {
  background-color: #d2ecfa;
  padding: 0.20rem;
  .in_box {
    border: 0.04rem solid #0068b6;
    background-color: #FFF;
    border-radius: 0.10rem;
    padding-bottom: 0.40rem;
    @media screen and (max-width: 640px) {
      padding-bottom: 0.20rem;
    }
    .trust_ttl {
      background-color: #0068b6;
      text-align: center;
      padding: 0.20rem;
      position: relative;
      font-size: 0.50rem;
      font-weight: 900;
      color: #FFF;
      line-height: 1.3;
      position: relative;
      @media screen and (max-width: 640px) {
        font-size: 0.30rem;
      }
      &::before {
        content: "";
        width: 0.80rem;
        height: 0.80rem;
        background-image: url(../img/waterpipe/trust_ttl_deco01.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0.20rem;
        left: 0.20rem;
        @media screen and (max-width: 640px) {
          width: 0.40rem;
          height: 0.40rem;
        }
      }
      &::after {
        content: "";
        width: 0.80rem;
        height: 1.40rem;
        background-image: url(../img/waterpipe/trust_ttl_deco02.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0.20rem;
        right: 0.20rem;
        @media screen and (max-width: 640px) {
          width: 0.40rem;
          height: 0.70rem;
        }
      }
    }
    .lead {
      padding: 0.20rem 0.30rem;
      font-size: 0.32rem;
      font-weight: 700;
      text-align: center;
      line-height: 1.3;
      @media screen and (max-width: 640px) {
        padding: 0.20rem;
        font-size: 0.18rem;
      }
    }
    .list {
      padding: 0 0.40rem;
      @media screen and (max-width: 640px) {
        padding: 0 0.20rem;
      }
      .list_txt {
        font-size: 0.32rem;
        font-weight: 700;
        line-height: 1.35;
        padding-bottom: 0.10rem;
        text-indent: -0.40rem;
        margin-left: 0.40rem;
        @media screen and (max-width: 640px) {
          font-size: 0.18rem;
          text-indent: -0.27rem;
        }
        &::before {
          content: "";
          width: 0.30rem;
          height: 0.30rem;
          background-image: url(../img/common/check_icon_blue.svg);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          display: inline-block;
          position: relative;
          top: 0.02rem;
          margin-right: 0.10rem;
          @media screen and (max-width: 640px) {
            width: 0.18rem;
            height: 0.18rem;
          }
        }
      }
    }
    .kakomi {
      margin: 0 0.40rem;
      background-color: #0068b6;
      padding: 0.15rem 0;
      border-radius: 0.10rem;
      font-size: 0.26rem;
      font-weight: 700;
      color: #FFF;
      line-height: 1.4;
      text-align: center;
      @media screen and (max-width: 640px) {
        margin: 0.10rem 0.15rem 0;
        font-size: 0.15rem;
        padding: 0.10rem 0 0.12rem;
      }
    }
    .tel_link {
      padding: 0.30rem 0.40rem 0;
      position: relative;
      @media screen and (max-width: 640px) {
        padding: 0.20rem 0.15rem 0;
      }
      a {
        display: block;
        border: 0.04rem solid #0068b6;
        border-radius: 0.10rem;
        padding: 0.15rem 0.20rem;
        color: #0068b6;
        position: relative;
        @media screen and (max-width: 640px) {
          border: 0.02rem solid #0068b6;
        }
        &::after {
          content: "";
          width: 0.40rem;
          height: 0.40rem;
          background-image: url(../img/common/tel_icon_blue.svg);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          position: absolute;
          bottom: 0.15rem;
          right: 0.20rem;
          @media screen and (max-width: 640px) {
            width: 0.32rem;
            height: 0.32rem;
            right: 0.15rem;
          }
        }
        .tel_txt {
          font-size: 0.40rem;
          font-weight: 700;
          @media screen and (max-width: 640px) {
            font-size: 0.20rem;
          }
        }
        span {
          font-size: 0.34rem;
          font-weight: 700;
          display: block;
          padding-top: 0.10rem;
          @media screen and (max-width: 640px) {
            font-size: 0.16rem;
          }
        }
      }
    }
  }
}

.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;
    @media screen and (max-width: 640px) {
      margin-top: 0.10rem;
    }
    .icon {
      width: 1.00rem;
      @media screen and (max-width: 640px) {
        width: 0.50rem;
      }
    }
    .txt {
      width: calc(100% - 1.20rem);
      font-size: 0.26rem;
      font-weight: 700;
      color: #01456c;
      line-height: 1.3;
      @media screen and (max-width: 640px) {
        width: calc(100% - 0.70rem);
        font-size: 0.16rem;
      }
    }
  }
}