@charset "UTF-8";
.selectpamphlet {
  p.mb-10 {
    width: 100%;
    @media (max-width: 480px) {
      margin: unset;
    }
    label {
      &::after {
        content: "必須";
        font-size: 10px;
        line-height: 1;
        text-shadow: none;
        color: #fff;
        background-color: #f34955;
        border-radius: 3px;
        margin-left: 10px;
        padding: 0.2em 0.7em;
      }
    }
  }
  .group {
    display: flex;
    &:has(.errField) {
      label {
        figure {
          &::before {
            border: 0.3cqw solid red;
            box-shadow: 0.2cqw 0.2cqw 0.2cqw rgba(255, 0, 0, 0.2);
          }
        }
      }
    }
    label {
      container-name: check;
      &::after {
        content: none;
      }
      input {
        &[type="checkbox"] {
          display: none;
        }
      }
      figure {
        position: relative;
        margin: unset;
        margin: 3cqw;
        user-select: none;
        cursor: pointer;
        &::before {
          content: "";
          display: block;
          aspect-ratio: 1/1;
          width: 3cqw;
          border: 0.3cqw solid #333;
          background-color: white;
          background-size: 2cqw;
          background-repeat: no-repeat;
          background-position: center;
          position: absolute;
          left: -1cqw;
          top: -1cqw;
          z-index: 4;
          box-shadow: 0.2cqw 0.2cqw 0.2cqw rgba(0, 0, 0, 0.2);
          @media (max-width: 480px) {
            width: 5cqw;
            border: 0.7cqw solid #333;
            background-size: 3cqw;
            left: -1.5cqw;
            top: -1.5cqw;
            box-shadow: 0.4cqw 0.4cqw 0.4cqw rgba(0, 0, 0, 0.2);
          }
        }
        img {
          display: block;
          margin-bottom: 0.5cqw;
          border: 0.3cqw solid #6254ff;
          border-radius: 0.5cqw;
          filter: grayscale(100%);
          opacity: 0.5;
          @media (max-width: 480px) {
            border: 0.7cqw solid #6254ff;
            border-radius: 1cqw;
          }
        }
        figcaption {
          color: #333;
          text-align: center;
          font-weight: 600;
          @media (max-width: 480px) {
            font-size: 3cqw;
          }
        }
      }
      &:has(:checked) {
        > figure {
          &::before {
            border-color: #6254ff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%236254ff%27%3E%3Cpath d=%27M0 0h24v24H0V0z%27 fill=%27none%27/%3E%3Cpath d=%27M19.77 5.03l1.4 1.4L8.43 19.17l-5.6-5.6 1.4-1.4 4.2 4.2L19.77 5.03m0-2.83L8.43 13.54l-4.2-4.2L0 13.57 8.43 22 24 6.43 19.77 2.2z%27/%3E%3C/svg%3E");
          }
          > img {
            filter: unset;
            opacity: 1;
          }
          > figcaption {
            color: #6254ff;
          }
        }
      }
    }
    & + div:has(.errField_for_document_type) {
      margin-top: -2.5cqw;
      color: red;
    }
  }
}