@charset "utf-8";

.discographyList {
  display: grid;
  gap: min(6.52vw,90px) min(5.07vw,70px);
  grid-template-columns: repeat(3,1fr);
}
@media screen and (width <= 768px) {
  .discographyList {
    gap: max(13.33vw,50px) 0;
    grid-template-columns: max(66.66vw,320px);
    justify-content: center;
  }
}

.discography {
  
}

.discography-img {
  box-shadow: 5px 5px 10px rgba(0,0,0,.16);
  transition: scale .3s;
  .discography:hover & {
    scale: 1.03;
  }
}
@media screen and (width <= 768px) {
  .discography-img {
    & img {
      width: 100%;
    }
  }
}

.discography-contents {
  margin-top: 20px;
}
@media screen and (width <= 768px)  {
  .discography-contents {
    margin-top: max(2.66vw,10px);
  }
}

.discography-release {
  display: flex;
  justify-content: space-between;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}
@media screen and (width <= 768px) {
  .discography-release {
    font-size: max(3.73vw,14px);
  }
}

.discography-ttl {
  margin-top: 10px;
  color: #333;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
}
@media screen and (width <= 768px) {
  .discography-ttl {
    margin-top: max(1.33vw,5px);
    font-size: max(5.33vw,20px);
  }
}

.discographyDetails {
  display: grid;
  gap: 0 min(8.69vw,120px);
  grid-template-areas: "areaA areaB"
  "areaC areaC"
  "areaD areaD";
  grid-template-columns: min(28.98vw,400px) 1fr;
  grid-template-rows: auto auto auto;
}
@media screen and (width <= 768px) {
  .discographyDetails {
    grid-template-areas: "areaA"
    "areaB"
    "areaC"
    "areaD";
    grid-template-columns: 100%;
  }
}

.discographyDetails-img {
  grid-area: areaA;
}
@media screen and (width <= 768px) {
  .discographyDetails-img {
    width: max(52.08vw,320px);
    margin: 0 auto;
  }
}

.discographyDetails-stream {
  grid-area: areaB;
  & ul {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4,1fr);
  }
  & a {
    position: relative;
    display: block;
    background-color: #FFF;
    text-align: center;
    &::before,&::after {
      position: absolute;
      z-index: -1;
      width: 20px;
      height: auto;
      aspect-ratio: 1;
      transition: all .3s;
      content: "";
    }
    &::before {
      top: 2px;
      left: 2px;
      border-top: 2px solid #541B86;
      border-left: 2px solid #541B86;
    }
    &::after {
      right: 2px;
      bottom: 2px;
      border-right: 2px solid #541B86;
      border-bottom: 2px solid #541B86;
    }
    &:hover {
      &::before {
        z-index: 1;
        top: -2px;
        left: -2px;
      }
      &::after {
        z-index: 1;
        right: -2px;
        bottom: -2px;
      }
    }
  }
}
@media screen and (width <= 768px) {
  .discographyDetails-stream {
    margin-top: max(5.33vw,20px);
    & ul {
      display: grid;
      gap: 10px max(9.33vw,35px);
      grid-template-columns: repeat(2,1fr);
      justify-content: center;
    }
  }
}

.discographyDetails-comment {
  grid-area: areaC;
  margin-top: 60px;
}
@media screen and (width <= 768px) {
  .discographyDetails-comment {
    margin-top: max(13.33vw,50px);
  }
}

.discographyDetails-track {
  grid-area: areaD;
  margin-top: 90px;
  & h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.23;
  }
  & ol {
    counter-reset: decimal-zero;
  }
  & li {
    position: relative;
    padding: 25px 0 25px 2em;
    border-bottom: 1px solid #DDBFF3;
    font-size: 16px;
    font-weight: 500;
    counter-increment: decimal-zero;
    &::before {
      position: absolute;
      top: auto;
      left: 0;
      content: counter(decimal-zero, decimal-leading-zero)'.';
    }
  }
}
@media screen and (width <= 768px) {
  .discographyDetails-track {
    margin-top: max(13.33vw,50px);
    & h2 {
      font-size: max(6.4vw,24px);
    }
    & li {
      padding-top: max(6.66vw,25px);
      padding-bottom: max(6.66vw,25px);
      font-size: max(4.26vw,16px);
    }
  }
}