@charset "UTF-8";
@import url("_root.css");

/* ALBUM */
.section-album {

  .album-item {
    margin-bottom: 64px;
    background-color: #FFFFFF;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.64));
    @media screen and (min-width:769px) {
      margin-bottom: 80px;
    }
    /* カバー画像 */
    figure {
      margin-bottom: 24px;
    }
    /* タイトル・リリース日 */
    /* リリース日 */
    .titles {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      column-gap: 16px;
      /* タイトル */
      h1, h3 {
        margin: 0 auto 8px 0;
        font-size: 40px;
        text-align: left;
      }
      /* リリース日 */
      time {
        font-size: 18px;
      }
    }
    /* 説明文 */
    figcaption {
      font-size: 16px;
    }
    /* 詳細へリンク */
    .listen-more {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      margin: 40px auto 0 auto;
      font-size: 16px;
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      text-align: center;
      a {
        position: relative;
        padding-right: 26px;
        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 2px;
          right: 0px;
          bottom: 0;
          left: auto;
          width: 20px;
          height: 20px;
          background-image: url(../../images/arrow_right.svg);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          transition: all 0.3s ease;
        }
        &:hover {
          &::after {
            right: -4px
          }
        }
      }
    }
    /* 配信先URL */
    .distribution-url {
      margin: 40px auto;
      padding: 32px 16px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.08);
      @media screen and (min-width:769px) {
        margin: 64px auto;        
      }
    }
    /* TRACK LIST */
    .track-list {
      text-align: left;
      h2 {
        margin-bottom: 8px;
        font-family: "Montserrat", sans-serif;
        font-size: 24px;
      }
      .song {
        margin-bottom: 8px;
        padding-left: 1.2rem;
      }
    }
  }
}

/* 詳細画面 */
.main-album-detail {
  .album-item {
    margin-bottom: 24px;
  }
}