@charset "UTF-8";

.coin-laundry_catch {
  border-top: 2px solid #6baed6;
  border-bottom: 2px solid #6baed6;
  padding: 40px 10px 50px;
  text-align: center;
  margin-top: 80px;

  @media screen and (max-width: 800px) {
    margin-top: 60px;
    padding: 30px 10px 40px;
  }
}

.page-wrap .coin-laundry_catch_text {
  margin-top: 0;
  margin-bottom: 30px;
  line-height: 2;
  font-size: 20px;
  font-weight: bold;
  @media screen and (max-width: 600px) {
    text-align: left;
    font-size: 18px;
  }
}

.illust-laundry1 {
  position: relative;

  &::before,
  &::after {
    content: "";
    position: absolute;
  }

  &::before {
    background: url(../img/coin-laundry/illust_laundry1.svg) 0 0 no-repeat;
    background-size: 100%;
    width: 120px;
    height: 80px;
    left: -20px;
    bottom: 0px;

    @media screen and (max-width: 800px) {
      left: -10px;
      bottom: 20px;
    }

    @media screen and (max-width: 600px) {
      width: 100px;
      height: 64px;
    }
  }

  &::after {
    background: url(../img/coin-laundry/illust_laundry2.svg) 0 0 no-repeat;
    background-size: 100%;
    width: 70px;
    height: 45px;
    left: 100px;
    bottom: -30px;

    @media screen and (max-width: 800px) {
      left: 110px;
      bottom: -10px;
    }

    @media screen and (max-width: 600px) {
      width: 60px;
      height: 39px;
      left: 100px;
      bottom: -10px;
    }
  }
}

.illust-laundry2 {
  position: relative;
  padding-bottom: 180px;

  @media screen and (max-width: 800px) {
    padding-bottom: 0;
  }

  &::after {
    content: "";
    background: url(../img/coin-laundry/illust_laundry3.svg) 0 0 no-repeat;
    background-size: 100%;
    width: 170px;
    height: 205px;
    position: absolute;
    right: 10%;
    bottom: -10px;

    @media screen and (max-width: 800px) {
      width: 120px;
      height: 145px;
      right: 0;
      bottom: auto;
      top: -150px;
    }

    @media screen and (max-width: 800px) {
      display: none;
    }
  }
}

.coin-laundry_cont {
  @media screen and (max-width: 600px) {
    position: relative;

    &::before {
      content: "";
      background: url(../img/coin-laundry/illust_laundry3.svg) 0 0 no-repeat;
      background-size: 100%;
      width: clamp(6.25rem, calc(5rem + 3.333vw), 7.5rem);
      /* min: 100px, max: 120px */
      height: clamp(7.813rem, calc(6.563rem + 3.333vw), 9.063rem);
      /* min: 125px, max: 145px */
      position: absolute;
      right: 10px;
      top: -10%;
      z-index: 1;
    }
  }
}

.coin-laundry_cont_photo {
  @media screen and (max-width: 800px) {
    margin-bottom: 60px;
  }

  @media screen and (max-width: 600px) {
    padding-bottom: 40px;
    margin-bottom: 40px;
    max-width: 350px;
    margin-inline: auto;
  }
}

.prohibited-washable_list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px 25px;
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
  margin-top: 50px;

  @media screen and (max-width: 800px) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;
  }

  .image {
    margin-bottom: 0;

    figcaption {
      text-align: center;
      font-size: 13px;
      margin-top: 10px;

      @media screen and (max-width: 800px) {
        font-size: 14px;
      }
    }
  }
}

.prohibited-dry_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin-inline: auto;
  gap: 15px;
  margin-top: 30px;

  @media screen and (max-width: 800px) {
    grid-template-columns: repeat(1, 1fr);
  }

  li {
    list-style-type: disc;
    margin-left: 1.6em;
    font-weight: bold;
    color: #5eabd5;
    font-size: 22px;

    @media screen and (max-width: 800px) {
      font-size: 18px;
    }
  }
}

.coin-laundry .prohibited-dry_note {
  max-width: 780px;
  margin-inline: auto;
  width: 100%;
}

.laundry-announce_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 950px;
  margin-inline: auto;
  margin-top: 70px;

  @media screen and (max-width: 600px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.laundry-announce_item {
  display: flex;
  gap: 20px;
  align-items: center;

  @media screen and (max-width: 800px) {
    flex-direction: column;
  }
  @media screen and (max-width: 600px) {
    max-width: 350px;
    margin-inline: auto;
  }

  .item-image {
    margin-bottom: 0;
    width: 25%;

    @media screen and (max-width: 800px) {
      width: 100%;
      max-width: 150px;
    }

    @media screen and (max-width: 600px) {
      max-width: 120px;
    }
  }

  .item-desc {
    flex: 1;

    p {
      margin-top: 0;
      font-size: 16px;
    }
  }
}