/* =====================================
   ALBUM PAGE
===================================== */

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

/* タイトル */
.header-album {
   margin-bottom: 30px;
}

.page-header h1 {
   margin-bottom: 10px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   column-gap: 1rem;
}

.page-header h1 .subttl {
   font-size: 1.3rem;
   color: #555;
   line-height: 2rem;
}

.album-title-small {
   font-size: 18px;
   /* padding-left: 0.5rem; */
   color: #666;
   font-weight: normal;
   display: inline-block;
   line-height: 2rem;
   /* padding: 0 10px; */
}

.artist-name {
   color: #666;
}

.artist-name .text {
   color: #9dd3a7;
   margin-right: 0.5rem;
}

.btn-format {
   display: inline-block;
   background-color: #9dd3a7;
   color: #000;
   padding: 2px 10px;
   font-size: 1rem;
   font-weight: normal;
   border-radius: 2px;
}

/* 960以下では改行消す */
/* @media (max-width: 960px) {
   .pc-br {
      display: none;
   }
} */

/* ===============================
   リード
=============================== */
.lead-album {
   line-height: 1.9;
   margin-bottom: 2rem;
}

.lead-album .catch-copy {
   font-size: 1.2rem;
   font-weight: bold;
   line-height: 1.4;
}

.artist-note {
   font-family: serif;
   line-height: 1.5rem;
}

.note {
   margin-top: 1.5rem;
   line-height: 1.5rem;
   padding: 1.5rem;
   background-color: #eee;
}
.note p {
   margin-bottom: 0.8rem;
}

/* ===============================
   GRID本体
=============================== */
.album-contents {
   display: grid;
   gap: 2rem;
   margin: 2rem 0;
}

/* ===============================
   森羅の瞑想用　PC
=============================== */

.album-contents-shinra {
   display: grid;
   gap: 2rem;
   grid-template-columns: repeat(2, 1fr);
   margin: 2rem 0;
   align-items: start;
   align-content: start;
}

.album-contents-shinra .shinra-inner {
   background-color: #eee;
   padding: 2rem;
   text-align: center;
}

.album-contents-shinra .shinra-inner img {
   width: 100;
}

.album-contents-shinra .shinra-inner .release {
   display: flex;
   justify-content: center;
   gap: 1rem;
}

.album-contents-shinra .shinra-inner .title-shinra {
   font-size: 1.5rem;
   font-weight: bold;
   margin-top: 1rem;
}

/* ===============================
   森羅の瞑想用　SP
=============================== */

@media (max-width: 667px) {
   .album-contents-shinra {
      display: grid;
      grid-template-columns: 1fr;
      margin: 2rem 0;
   }
   .album-contents-shinra .shinra-inner {
      padding: 2rem;
   }
}

/* ===============================
   PC
=============================== */
@media (min-width: 900px) {
   .album-contents {
      grid-template-columns: clamp(240px, 30%, 340px) 1fr;
      align-items: start;
   }

   /* 左カラム：縦積み */
   .album-left {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      align-items: flex-start;
   }

   /* 右 */
   .track-list {
      width: 100%;
   }

   .track-list p {
      margin-bottom: 0;
   }

   .track-list .desc-yesallyess p {
      margin: 1rem 0;
   }
}

/* ===============================
   jacket
=============================== */

.jacket img {
   border: 1px solid #ddd;
   background: rgba(244, 244, 244, 0.7);
}

.jacket .jacket-art {
   margin-top: 0.5rem;
   font-size: 0.9rem;
   color: #666;
   line-height: 1.3rem;
}

.jacket .jacket-art ul {
   margin: 0;
   padding: 0 16px;
   list-style: circle;
}

.jacket .small-text {
   line-height: 1rem;
   color: #666;
}

.release {
   margin-top: 1rem;
}

.release p.format {
   margin-bottom: 0;
}

.format {
   margin-top: 1rem 0 0 0;
}

.format-on,
.format-off {
   display: inline-block;
   width: 90px;
   text-align: center;
   padding: 0.25rem 0;
   font-size: 0.85rem;
}

.format-on {
   background: #b8e1c0;
}

.format-off {
   background: #eee;
   color: #999;
}

/* ===============================
   曲
=============================== */

.l-container h2 {
   font-size: 1rem;
   font-weight: normal;
}

.track-list .ttl,
.listen .ttl {
   font-weight: bold;
   margin-bottom: 0.5rem;
}

.album-contents .track-list li {
   line-height: 1.5; /* 曲番号の改行 */
   padding: 0.3rem 0;
}

.album-contents .track-list-double li {
   /* line-height: 1.3; */
   padding: 0.1rem 0;
}

/* .track-list ol, */
.track-list-double ol,
.track-list ol.button,
.track-list-double ol.button,
.track-list ol.tracklist {
   /* padding-left: 0; */
   list-style: decimal;
}

/* .tracklist {
   list-style-position: outside;
   padding-left: 1.4em;
}

.tracklist li {
   padding-left: 0.2em;
   vertical-align: top;
} */

.track-line {
   display: inline-flex;
   flex-wrap: wrap;
}

.track-btn {
   white-space: normal;
}

/* .play-mark {
   white-space: nowrap;
   margin-left: 0.35em;
   display: inline-block;
} */

.tracklist li button {
   /* display: block; */
   display: inline-block;
}

.play-mark {
   white-space: nowrap;
   display: inline-block;
   margin-left: 0.3em;
}

.track-list .disc-no {
   display: inline-block;
   background-color: #ceeeed;
   padding: 0 0.5rem;
   margin: 0.5rem 0 1rem 0;
   max-width: 70%;
   min-width: 300px;
}

.album-credit {
   margin: 1.5rem 0 0 0;
}
.album-credit p {
   margin: 0.5rem 0;
   /* font-size: 0.9rem; */
}

.track-list h3.track-title {
   display: inline-block;
   font-weight: normal;
   font-size: 1rem;
   margin-bottom: 0;
}

.listen-mark {
   color: rgb(247, 197, 197);
   margin-left: 0.3em;
}

/* 番号付きトラックリスト完成版 */
.track-list-group {
   list-style: none !important; /* ← デフォルト番号消す（重要） */
   padding-left: 0 !important;
   counter-reset: track;
}

/* 通常曲 */
.track-list-group li {
   counter-increment: track;
   margin-left: 0;
   position: relative;
}

.track-list-group li.group-title {
   margin-left: -2em;
}

/* 番号表示 */
.track-list-group li:not(.group-title)::before {
   content: counter(track) '.';
   position: absolute;
   left: -2.5em;
   width: 2em;
   text-align: right;
}

/* グループタイトル */
.track-list-group .group-title {
   counter-increment: none; /* ← 番号進めない */
   margin: 1em 0 0.4em;
}

/* ===== 番号付きリスト完全制御 ===== */
ol.button,
ol.tracklist {
   list-style: none; /* デフォ番号消す */
   counter-reset: track; /* カウンター開始 */
   padding-left: 0;
   margin-left: 0;
}

ol.button li,
ol.tracklist li {
   counter-increment: track;
   display: flex;
   align-items: flex-start; /* ←番号を1行目に固定 */
   gap: 0.6em;
   margin-bottom: 0.4em;
}

/* 番号生成 */
ol.button li::before,
ol.tracklist li::before {
   content: counter(track) '.';
   min-width: 1em; /* ←番号幅固定 */
   text-align: right;
   flex-shrink: 0;
}

/* button全体 */
ol.button .track-btn,
ol.tracklist .track-btn {
   all: unset;
   cursor: pointer;
   display: block;
   width: 100%;
   line-height: 1.6;
}

/* mp3試聴がないアルバム（新の音、おくる音楽） */
.track-movie {
   list-style: decimal;
   padding-left: 1.5em; /* 番号分の余白 */
   margin: 0;
}

.track-movie li {
   margin-bottom: 0.5em;
}

.track-title,
.track-desc {
   margin: 0;
   display: inline;
}

.track-desc {
   margin-left: 0.5em;
}

.track-movie .wbr {
   word-break: break-word;
   display: inline-block;
}

/* ===============================
   youtube
=============================== */
.youtube-box {
   width: 100%;
   aspect-ratio: 16/9;
}

.youtube-box iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

.musicVideo {
   margin-top: 3rem;
}

.musicVideo img {
   width: 100%;
}

.youtubeVideo:before {
   content: '';
   display: inline-block;
   width: 25px;
   height: 25px;
   background-image: url(/image/logo_btn/youtube_social_circle_red.png);
   background-size: contain;
   vertical-align: middle;
   margin-right: 7px;
}

.track-btn {
   background: none;
   border: none;
   padding: 0;
   margin: 0;
   font: inherit;
   color: #333;
   cursor: pointer;
   text-align: left;
}

.track-btn:hover {
   opacity: 0.7;
   text-decoration: none;
}

ol.button .track-btn:hover {
   opacity: 0.7;
   text-decoration: none;
}

/* ===============================
   store
=============================== */

/* .album-store p {
   margin: 1rem;
} */

/* .album-store img {
   border: 1px solid #ccc;
   width: 40%;
} */

.store-links {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 1rem;
   padding: 1rem;
   background-color: #eee;
   margin: 0;
   text-align: center;
}

.album-store {
   /* display: flex;
   flex-wrap: wrap;
   justify-content: center; */
   text-align: center;
   background-color: #eee;
   margin: 2rem 0 0 0;
   padding: 1.3rem 1rem 0 1rem;
}

.store-links p {
   text-align: center;
   margin-bottom: 0;
}
.album-store a {
   width: 45%;
   border: 1px solid #ccc;
}

/* ===============================
   SP
=============================== */
@media (max-width: 768px) {
   .sp-inner {
      text-align: left;
   }

   .album-contents {
      grid-template-columns: 1fr;
   }

   .store-links {
      display: flex;
      flex-direction: column;
      justify-content: center;
   }
   .album-store a {
      width: 100%;
   }

   .artist-name {
      max-width: 96%;
      padding: 0 0 0 1rem;
   }
   .track-list ol {
      padding-left: 1.7rem;
   }
}

/* ===============================
   SP 並び順制御
=============================== */
@media (max-width: 900px) {
   .album-contents {
      display: flex;
      flex-direction: column;
   }

   /* jacket */
   .album-left {
      display: contents; /* ← 中身だけ展開 */
   }

   .jacket {
      order: 1;
   }

   /* track */
   .track-list {
      order: 2;
   }

   .track-list-group {
      order: 2;
   }

   /* listen */
   .listen {
      order: 3;
   }
}

/* =========================
   SP header music top中央
========================= */
.music-top-link {
   display: none;
}

@media (max-width: 768px) {
   header {
      position: fixed;
      width: 100%;
   }

   /* 中央配置 */
   .music-top-link {
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 50%;
      transform: translate(-50%, -50%);

      font-size: 0.95rem;
      color: #666;
      text-decoration: none;
      white-space: nowrap;
      z-index: 1400;
   }
}

/* =========================
   試聴の表示
========================= */

audio {
   max-width: 100%;
   /* min-width: 300px; */
}

.shicho {
   margin-bottom: 1rem;
}

.shicho p {
   margin-bottom: 0;
}

@media (max-width: 768px) {
   .shicho {
      margin-bottom: 1.5rem;
   }
}

/* .safari-only {
   font-size: 0.9rem;
}
.safari-only img {
   width: 18px;
   vertical-align: middle;
} */