index.module.scss

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

  .container {
    padding: min(15px, 2.5%) min(50px, 5%);
    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 min(15px, 3%);
        background-color: #e3e3e3;
        border-radius: 6px;
      }
    }

    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 (max-width: 540px) {
  .containers {
    .container {
      h1 {
        font-size: $font-size-md;
      }

      p {
        font-size: $font-size-sm;
      }

      summary {
        font-size: $font-size-sm;
      }

      span {
        font-size: $font-size-sm;
      }

      .score_box {
        p {
          padding-top: 0px;
        }
      }

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