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

/*
* DISCOGRAPHY
*/

/* 共通 */
.section-discography {
  padding-top: 80px;
  padding-bottom: 128px;
}

/* 一覧 */
.main-discography-list {
  .section-discography {
    ol {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      row-gap: 48px;
      margin: 0 auto;
      padding: 0;
      list-style-type: none;
      @media screen and (min-width:769px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
      }
      li {
        /* アートワーク */
        figure {
          display: inline-block;
          margin-bottom: 8px;
          img {
            max-width: 100%;
          }
        }
        /* タイトルなど */
        figcaption {
          text-align: center;
          cite {
            font-size: 1.4rem;
            font-weight: 200;
            font-style: normal;
            text-decoration: none;
            @media screen and (min-width:769px) {
              font-size: 1.6rem;
            }
          }
        }
      }
    }
  }
}

/* 詳細 */
.main-discography {
  .section-discography {
    article {
      .discography {
        display: grid;
        grid-template-columns: 1fr;
        align-items: flex-start;
        @media screen and (min-width:769px) {
          grid-template-columns: 0.56fr 0.44fr;
          column-gap: 16px;
        }
        /* アートワーク */
        figure {
          position: relative;
          margin-bottom: 2.4rem;
          width: 100%;
          z-index: 100;
          img {
            width: 100%;
            max-width: 100%;
            height: auto !important;
          }
        }
        /* タイトルなど */
        figcaption {
          width: 100%;
          @include mq() {
            width: 48%;
          }
          /* タイトル */
          h1 {
            position: relative;
            margin-bottom: 0.8rem;
            padding-bottom: 0.8rem;
            font-size: 24px;
            font-weight: 200;
            line-height: 1.0;
            z-index: 5;
            &::after {
              display: block;
              content: '';
              position: relative;
              bottom: -16px;
              left: 0;
              width: 100%;
              height: 1px;
              background-color: rgba(0, 0, 0, 0.48);
              @media screen and (min-width:769px) {
                width: 110%;
                left: -10%;
              }
            }
          }          
          /* 発売日・価格 */
          .info {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            
          }
          /* 曲 */
          .songs {
            margin-left: 16px;
            padding-bottom: 2.4rem;
            padding-left: 14px;
            list-style-type: decimal;
          }
          /* 説明文 */
          .explanatory {
            padding: 2.4rem 1.6rem;
          }
        }
      }
    }
  }
}