/* =====================================
   MUSIC PAGE
===================================== */

/* =============================
   music page 背景画像
============================= */

@media (min-width: 1000px) {
   .l-wrapper {
      background-image: url('/image/background01.png'); /* 画像パス調整 */
      background-repeat: no-repeat;
      background-position: 20px 30px; /* 左20 上30 */
   }
}

.music-page {
   max-width: 900px;
}

.header-music {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   margin-bottom: 30px;
}

@media (max-width: 999px) {
   .header-music {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 30px;
   }
}

@media (max-width: 768px) {
   .header-music {
      margin-bottom: 0;
   }
}

/* スマホ表示でヘッダーが表示されるように */
.page-header {
   margin-bottom: 0;
   position: relative;
   z-index: 1;
}

.page-header h1 {
   margin-bottom: 10px;
}

.inner-header-music {
   display: inline-block;
   /* background-color: #ccc; */
}

.header-music .music-intro {
   line-height: 1.4;
   font-size: 0.85rem;
   background: rgba(255, 255, 255, 0.8);
}

.header-music .music-intro img {
   border: 1px solid #ccc;
   margin: 0 5px 10px 10px;
   width: 200px;
}

.header-music .music-intro ul {
   list-style: disc;
}

hr {
   margin: 30px 0;
}
.music-genre {
   margin-bottom: 2rem;
}
/* =============================
   カテゴリブロック
============================= */

.music-category {
   display: flex;
   gap: 0;
   flex-direction: row;
   align-items: flex-start;
   /* align-items: center; */
   margin-bottom: 20px;
   /* justify-content: flex-end; */
}

/* 左カテゴリラベル */
.category-label {
   width: 90px;
   height: 100px;
   font-size: 0.9rem;
   display: flex;
   align-items: center;
   font-weight: normal;
   color: #4da05d;
   line-height: 1.2;
   /* transform: translateY(40px); */
   text-align: right;
   margin-right: 1rem;
   justify-content: flex-end;
}

/* =============================
   アルバムグリッド
============================= */

.album-wrapper {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   row-gap: 0;
   column-gap: 0.7rem;
   flex: 1;
}

.album-card {
   width: 100px;
   text-align: center;
}

.album-card img {
   width: 100%;
   height: auto;
   display: block;
   border: 1px solid #ddd;
}

.album-card h3 {
   font-size: 0.75rem;
   font-weight: normal;
   margin-top: 6px;
}

.album-card a {
   text-decoration: none;
   color: inherit;
}

/* =============================
   SP
============================= */

@media (max-width: 768px) {
   .music-category {
      flex-direction: column;
   }

   .category-label {
      width: auto;
      margin-bottom: 10px;
   }
   .music-genre {
      margin: 1rem 0;
   }
   .music-category {
      display: flex;
      gap: 0;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      /* align-items: center; */
      margin-bottom: 40px;
      /* justify-content: flex-end; */
   }
   /* 左カテゴリラベル */
   .category-label {
      width: 90px;
      height: 100px;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      font-weight: normal;
      color: #4da05d;
      line-height: 1.2;
      /* transform: translateY(40px); */
      text-align: center;
      margin-right: 1rem;
      justify-content: flex-end;
   }
}

/* =====================================
   SP MUSIC LAYOUT 完全制御
===================================== */
@media (max-width: 768px) {
   /* -----------------
      inner内 全体中央寄せ
   ----------------- */
   .sp-inner {
      text-align: center;
   }

   /* 見出し中央 */
   .music-genre {
      text-align: center;
      margin: 1.2rem 0 1.6rem;
   }

   /* -----------------
      カテゴリブロック縦並び
   ----------------- */
   .music-category {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 2rem;
   }

   /* category-label中央 */
   .category-label {
      width: auto;
      height: auto;
      margin: 0 0 0.8rem 0;
      text-align: center;
      justify-content: center;
      align-items: center;
   }

   /* -----------------
      アルバムラッパー
   ----------------- */

   .album-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
   }

   /* カード */
   .album-card {
      /* width: 40vw; */
      width: 35vw;
   }

   .category-label {
      font-size: 1rem;
      margin-bottom: 1.5rem;
   }
}

/* =====================================
   tablet（2→4列）
===================================== */
@media (min-width: 600px) and (max-width: 768px) {
   .album-wrapper {
      gap: 2rem;
   }
   /* カード */
   .album-card {
      /* width: 40vw; */
      width: 25vw;
   }
}