index.module.scss

.containers {
  padding: 50px 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;

  .container {
    padding: 15px min(50px, 7%);
    border: solid 1.5px #333; /*線の種類・太さ・色*/
    width: 95%;
    max-width: 800px;
    border-radius: 10px; /*角の丸み*/

    h1 {
      font-size: $font-size-lg;
    }

    .tags {
      display: flex;
      justify-content: start;
      p {
        padding: 0.5px 15px;
        border: solid 2px #333; /*線の種類・太さ・色*/
        border-radius: 10px; /*角の丸み*/
      }
    }

    p,
    img,
    details {
      margin: 5px;
    }

    .score_box {
      display: flex;
      p {
        padding-top: 5px;
        padding-left: 25px;
      }
    }
    .kuso_box {
      position: relative;
      width: 225px; 
      height: 35px;
      img {
        position: absolute;
        background-color: #ffff;
        //$score: calc(var(--score) * 20);
        &:nth-of-type(1) {
          clip-path: polygon(0% 0%, var(--score) 0%, var(--score) 100%, 0% 100%);
        }
        &:nth-of-type(2) {
          opacity: 0.1;
        }
        pointer-events: none;
      }
    }
  }
}

@media screen and (max-width: 650px) {
  .score_box {
    p{
      padding-top: 0px;
    }
  }

  .kuso_box {
    width: 150px;
    img {
      width: 150px;
    }
  }
}