@charset "UTF-8";
/* stylelint-disable value-no-vendor-prefix */
:root {
  --imgpath: "/img/usr/design/";
  --notification-height: 48px;
  --scroll-x: 0;
  --scroll-y: 0;
  --gnav-height: 50px;
  --gnav-shrinkheight: 42px;
  --header-height: 94px;
  --header-shrinkheight: 77px;
  --sp-header-height: 86px;
  --sp-header-shrinkheight: 77px;
}

.top-kv {
  margin-bottom: 40px;
}
.top-kv a,
.top-kv button {
  opacity: 1;
  -webkit-transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  will-change: opacity;
}
[data-browse-mode=P] .top-kv a:hover {
  opacity: 0.75;
}

[data-browse-mode=P] .top-kv button:hover {
  opacity: 0.75;
}

.top-kv_slider {
  overflow: hidden;
}
.top-kv_slider .splide__track {
  overflow: visible;
}
.top-kv_slider .splide__arrow {
  width: 48px;
  height: 48px;
  -webkit-transform: translateY(-50%) translateY(-24px);
          transform: translateY(-50%) translateY(-24px);
}
.top-kv_slider .splide__arrow--prev {
  left: 40px;
  background: url("../../img/design/btn/carousel-prev_wh.png") 0 0/contain no-repeat;
}
.top-kv_slider .splide__arrow--next {
  right: 40px;
  background: url("../../img/design/btn/carousel-next_wh.png") 0 0/contain no-repeat;
}
.top-kv_slide img {
  width: 100%;
}
.top-kv_count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 1256px;
  margin-inline: auto;
  margin-top: 18px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 16px;
  font-weight: bold;
}
.top-kv .splide__progress {
  position: relative;
  width: 120px;
  height: 2px;
  margin-top: -2px;
  background-color: #000;
}
.top-kv .splide__progress__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: auto;
  content: "";
  background-color: #d9d9d9;
}

.top-info--header, .block-recent-item--header, .block-top-free2--header, .block-top-ranking--hdg, .block-top-event--header a, .block-pagecategory-caption--text, .block-top-topic--header {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 32px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  margin-top: 0;
  margin-bottom: 32px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 32px;
  font-weight: 600;
  text-align: left;
  border-top: 0;
}
.top-info--header span, .block-recent-item--header span, .block-top-free2--header span, .block-top-ranking--hdg span, .block-top-event--header a span, .block-pagecategory-caption--text span, .block-top-topic--header span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #b8b8b8;
}

.block-pagecategory .more_btn a, .block-top-topic--next-page a {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 280px;
  height: 64px;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #333;
  -webkit-transition: color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.block-pagecategory .more_btn a::before, .block-top-topic--next-page a::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  content: "";
  background-color: #333;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.block-pagecategory .more_btn a::after, .block-top-topic--next-page a::after {
  position: absolute;
  top: 50%;
  right: 17px;
  width: 13px;
  height: 14px;
  content: "";
  background: url("../../img/design/icn/arrow-right.png") 0 0/contain no-repeat;
  -webkit-transition: right 0.3s cubic-bezier(0.39, 0.575, 0.565, 1), background 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: right 0.3s cubic-bezier(0.39, 0.575, 0.565, 1), background 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.block-pagecategory .more_btn a span, .block-top-topic--next-page a span {
  position: relative;
}
.block-pagecategory .more_btn a:hover, .block-top-topic--next-page a:hover {
  color: #fff;
  text-decoration: none;
}
.block-pagecategory .more_btn a:hover::before, .block-top-topic--next-page a:hover::before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.block-pagecategory .more_btn a:hover::after, .block-top-topic--next-page a:hover::after {
  right: 13px;
  background: url("../../img/design/icn/arrow-right_wh.png") 0 0/contain no-repeat;
}

.block-top-topic {
  margin-top: 96px;
}
.block-top-topic:not(:last-child) {
  margin-bottom: 96px;
}
.block-top-topic--body {
  margin-bottom: 0;
}
.block-top-topic--items li {
  padding: 40px 0;
  border-bottom: 1px solid #ebebeb;
}
.block-top-topic--items li a {
  opacity: 1;
  -webkit-transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  will-change: opacity;
}
.block-top-topic--items li a:hover {
  text-decoration: none;
}
[data-browse-mode=P] .block-top-topic--items li a:hover {
  opacity: 0.75;
}

.block-top-topic--items dl {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 40px;
}
.block-top-topic--items dl dt {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #b8b8b8;
}
.block-top-topic--items dl dd {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 16px;
}
.block-top-topic--next-page {
  text-align: center;
}
.block-pagecategory-page-list--frame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
}
.block-pagecategory-page-list--frame.splide__track {
  display: block;
  padding: 0 10px 13px 0;
  margin-right: -10px;
}
.block-pagecategory-page-list--frame.splide__track .splide__list {
  margin-right: 10px !important;
}
.block-pagecategory-page-list--frame.splide__track .splide__slide .block-pagecategory-page-list--page {
  height: 100%;
}
.block-pagecategory-page-list--page {
  display: block;
  width: 228px;
  background-color: #fff;
  -webkit-transition: -webkit-box-shadow 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-box-shadow 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: box-shadow 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: box-shadow 0.3s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-box-shadow 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.block-pagecategory-page-list--page dt {
  margin-bottom: 16px;
}
.block-pagecategory-page-list--page dt figure {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.block-pagecategory-page-list--page dt figure img {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.block-pagecategory-page-list--page:hover {
  text-decoration: none;
  -webkit-box-shadow: 3px 4px 10px rgba(153, 153, 153, 0.25);
          box-shadow: 3px 4px 10px rgba(153, 153, 153, 0.25);
}
.block-pagecategory-page-list--page:hover dt figure img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.block-pagecategory-page-list--date {
  padding: 0 16px;
}
.block-pagecategory-page-list--page-caption {
  padding: 8px 16px 16px;
  font-size: 16px;
  font-weight: bold;
}
.block-pagecategory .more_btn {
  text-align: center;
}
.block-top-event--header {
  padding: 0;
  margin: 96px 0 0;
  text-align: left;
  border: 0;
}
.block-top-event--header a:hover {
  text-decoration: none;
}

.block-top-ranking--head {
  position: relative;
  margin-top: 32px;
}
.block-top-ranking--head-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  background-color: #fff;
  border-radius: 40px;
}
.block-top-ranking--head .js-tab-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-color: #000;
  border-radius: 40px;
  -webkit-transition: left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.block-top-ranking--head button {
  z-index: 1;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #b8b8b8;
  text-align: center;
  background-color: transparent;
  border: 0;
  border-radius: 40px;
  -webkit-transition: color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.block-top-ranking--head button.is-active {
  color: #fff;
}
.block-top-ranking--body {
  margin-top: 24px;
}
.block-top-ranking--body .block-goods-list-d--items {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  counter-reset: number 0;
}
.block-top-ranking--body .block-goods-list-d--items li[id*=slide01] .block-goods-list-d--item-body::before {
  background-color: #ffd700;
}
.block-top-ranking--body .block-goods-list-d--items li[id*=slide02] .block-goods-list-d--item-body::before {
  background-color: #bfb4b4;
}
.block-top-ranking--body .block-goods-list-d--items li[id*=slide03] .block-goods-list-d--item-body::before {
  background-color: #c47221;
}
.block-top-ranking--body .block-goods-list-d--items li[id*=slide04] .block-goods-list-d--item-body::before {
  background-color: #6c8ead;
}
.block-top-ranking--body .block-goods-list-d--item-body {
  position: relative;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.block-top-ranking--body .block-goods-list-d--item-body::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  padding-top: 4px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
  color: #fff;
  text-align: center;
  pointer-events: none;
  content: counter(number) " ";
  counter-increment: number 1;
  background-color: #000;
}

.block-recent-item--header span {
  color: #333;
}
.block-recent-item--items {
  width: auto;
}
.block-recent-item--keep-history a {
  color: #333;
  text-decoration: none;
}

.top-info {
  margin-bottom: 80px;
}
.top-info--header {
  padding: 0;
  margin: 0 0 32px;
  text-align: left;
  background-color: transparent;
  border: 0;
}
.top-info--list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.top-info--item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 285px;
  padding: 25px;
  margin-right: 24px !important;
  background-color: #999;
  border-radius: 4px;
}
.is-info .top-info--item {
  padding: 19px;
  background-color: #eee;
  border: 6px solid transparent;
}
.top-info--item[data-type=洋楽] {
  background-color: #e63033;
}
.top-info--item[data-type=名盤] {
  background-color: #bb6658;
}
.top-info--item[data-type=J-INDIES] {
  background-color: #81b8ff;
}
.top-info--item[data-type=日本語RAP] {
  background-color: #131313;
}
.top-info--item[data-type=J-POP] {
  background-color: #ff68ac;
}
.top-info--item[data-type=SOLID邦楽] {
  background-color: #3325b0;
}
.top-info--item[data-type=新譜予約（早割）] {
  border-color: #e6ff07;
}
.top-info--item[data-type="新着 NEWリリース"] {
  border-color: #9f4f45;
}
.top-info--item[data-type="WEEKLY RECOMMEND"] {
  border-color: #e63033;
}
.top-info--item[data-type="SALE&アウトレット"] {
  border-color: #619d26;
}
.top-info--item[data-type=キャンペーン] {
  border-color: #5145f1;
}
.top-info--item-ttl {
  position: relative;
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
}
.is-info .top-info--item-ttl {
  color: #333;
}
.top-info--item-ttl:has(.is-logo) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.top-info--item-ttl:has(.is-logo) .is-logo {
  width: 64px;
}
.top-info--item-ttl .is-gekioshi {
  position: absolute;
  top: -23px;
  left: -16px;
  display: inline-block;
  width: 112px;
}
.top-info--item-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[2];
  grid-template-rows: repeat(2, 1fr);
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.top-info--item-grid a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #fff;
  opacity: 1;
  -webkit-transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  will-change: opacity;
}
[data-browse-mode=P] .top-info--item-grid a:hover {
  opacity: 0.75;
}

/* 修正①：余計な閉じカッコを削除 */
.top-info--item-grid a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* はみ出た部分はトリミング */
}
/* ============================= */
/* ▼▼▼ ここから追記部分 ▼▼▼ */
/* ============================= */

/* ▼▼ Aパターン（縦2段・画像＋テキスト下配置） ▼▼ */

.top-info--item-vertical {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.album-row-a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}


.album-img-a {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}


.album-text-a {
  text-align: center;
}

.album-text-a .artist {
  font-size: 1.3em;
  font-weight: bold;
  color: #111;
  margin: 0;
}

.album-text-a .title {
  font-size: 1.3em;
  color: #444;
  margin: 0;
}

/* ▲▲ Aパターンここまで ▲▲ */


/* ▼▼ Bパターン（横型：画像の右にテキスト） ▼▼ */

.top-info--item-horizontal {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.top-info--item.is-horizontal {
  width: 100%;
  max-width: 420px;
}

.album-row-b {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
}

.album-img-b {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.album-text-b {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.album-text-b .artist {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
  color: #111;
}

.album-text-b .title {
  font-size: 1.2em;
  margin: 0;
  color: #666;
}

/* ▲▲ Bパターンここまで ▲▲ */
/* === ULTRA PUSH新ジャンル カラーリング === */
.top-info--item[data-type="J-INDIES / ROCK / J-POP"] { background-color: #81b8ff; }
.top-info--item[data-type="和モノ / 歌謡曲"] { background-color: #f57f17; }
.top-info--item[data-type="ROCK / POPS"] { background-color: #7986cb; }
.top-info--item[data-type="日本語RAP"] { background-color: #131313; }
.top-info--item[data-type="HIPHOP/R&B"] { background-color: #8d6e63; }
.top-info--item[data-type="SOUL / BLUES"] { background-color: #5c6bc0; }
.top-info--item[data-type="JAZZ"] { background-color: #4db6ac; }
.top-info--item[data-type="CLASSIC / NEWAGE"] { background-color: #9575cd; }
.top-info--item[data-type="CLUB/DANCE"] { background-color: #f06292; }
.top-info--item[data-type="Reggae / World"] { background-color: #00acc1; }
.top-info--item[data-type="K-POP"] { background-color: #ec407a; }
.top-info--item[data-type="SOUNDTRACK / 映像作品"] { background-color: #b0bec5; }
.top-info--item[data-type="SOLID RECORDS"] { background-color: #37474f; }
.top-info.is-recommend .top-info--item[data-type="J-INDIES / ROCK / J-POP"] { background-color: rgba(129, 184, 255, 0.5); }
.top-info.is-recommend .top-info--item[data-type="和モノ / 歌謡曲"] { background-color: rgba(245, 127, 23, 0.5); }
.top-info.is-recommend .top-info--item[data-type="ROCK / POPS"] { background-color: rgba(121, 134, 203, 0.5); }
.top-info.is-recommend .top-info--item[data-type="日本語RAP"] { background-color: rgba(19, 19, 19, 0.5); }
.top-info.is-recommend .top-info--item[data-type="HIPHOP/R&B"] { background-color: rgba(141, 110, 99, 0.5); }
.top-info.is-recommend .top-info--item[data-type="SOUL / BLUES"] { background-color: rgba(92, 107, 192, 0.5); }
.top-info.is-recommend .top-info--item[data-type="JAZZ"] { background-color: rgba(77, 182, 172, 0.5); }
.top-info.is-recommend .top-info--item[data-type="CLASSIC / NEWAGE"] { background-color: rgba(149, 117, 205, 0.5); }
.top-info.is-recommend .top-info--item[data-type="CLUB/DANCE"] { background-color: rgba(240, 98, 146, 0.5); }
.top-info.is-recommend .top-info--item[data-type="Reggae / World"] { background-color: rgba(0, 172, 193, 0.5); }
.top-info.is-recommend .top-info--item[data-type="K-POP"] { background-color: rgba(236, 64, 122, 0.5); }
.top-info.is-recommend .top-info--item[data-type="SOUNDTRACK / 映像作品"] { background-color: rgba(176, 190, 197, 0.5); }
.top-info.is-recommend .top-info--item[data-type="SOLID RECORDS"] { background-color: rgba(55, 71, 79, 0.5); }

/* 修正②：セレクタのタイプミスを修正（ドット1個に） */
.top-info.is-recommend .top-info--item {
  width: 228px !important;
  padding: 15px 15px !important;
}

.top-info.is-recommend .album-row-a {
  gap: 0.3em; /* 画像とテキストの間隔を縮める */
}

.top-info.is-recommend .album-img-a {
  aspect-ratio: 1 / 1;         /* 必要なら 4 / 5 などに変更して高さ圧縮 */
}

.top-info.is-recommend .album-text-a .artist,
.top-info.is-recommend .album-text-a .title {
  font-size: 1.1em;            /* 少しだけ小さく */
  margin: 0.2em 0;             /* 余白を詰める */
}

/* ============================= */
/* ▲▲▲ ここまで追記部分 ▲▲▲ */
/* ============================= */
/* ▲▲▲ 1.全画面共通 / トップページ予備テンプレート1から移植▲▲▲ */
/* 見出しの装飾：ニュース＆インフォ / ウルトラ・プッシュ共通 */
.block-pagecategory-caption--text,
.top-info--header {
  color: #2c3e50;
  text-decoration: underline;
  text-shadow: 2px 2px 4px rgba(180,180,180,.4), -1px -1px 2px rgba(180,180,180,.2);
  font-weight: bold;           /* 既存の600と整合・上書きOK */
  letter-spacing: .04em;
  display: inline-block;       /* 既存と同じなので安全 */
  padding: .2em .5em;
  transition: text-shadow .3s ease;
}

/* SP調整 */
@media (max-width: 768px) {
  .block-pagecategory-caption--text,
  .top-info--header {
    text-shadow: 1px 1px 2px rgba(180,180,180,.3);
    letter-spacing: .03em;
    padding: .1em .3em;
  }
}

/* 「一覧を見る」ボタン：ピンク系に変更（既存の黒帯アニメを無効化） */
.block-pagecategory .more_btn a {
  color: #e91e63;
  font-size: 1.2em;
  font-weight: bold;
  background-color: #ffe4ec;
  padding: .5em 1em;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;              /* 既存と整合 */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  border: 0;                         /* 既存の1px枠を消す */
  transition: all .3s ease;
}

/* 既存 top.css の ::before（黒い横バー演出）と ::after（矢印画像）を打ち消し */
.block-pagecategory .more_btn a::before,
.block-pagecategory .more_btn a::after {
  content: none !important;
}

.block-pagecategory .more_btn a:hover {
  background-color: #f8bbd0;
  color: #c2185b;
  box-shadow: 0 6px 10px rgba(0,0,0,.15);
  transform: translateY(-2px);
}
/* hoverでも下線維持 */
.block-top-event--header a:hover { text-decoration: underline; }
/* ▲▲▲ 1.全画面共通 / トップページ予備テンプレート1から移植　終わり▲▲▲ */
/* 黒い横バーは殺すまま、矢印だけテキストで復活＋ちょいスライド */
.block-pagecategory .more_btn a::before { content: none !important; }

.block-pagecategory .more_btn a {
  padding-right: 2.25em; /* 矢印ぶんの余白 */
  transition: background-color .3s, color .3s, box-shadow .3s, transform .3s;
}

.block-pagecategory .more_btn a::after {
  content: "→" !important;           /* 画像じゃなくテキスト矢印 */
  position: absolute; top: 50%; right: 16px;
  transform: translateY(-50%) translateX(0);
  opacity: .75;
  background: none !important;        /* top.cssの背景画像を無効化 */
  width: auto !important; height: auto !important; /* 既存の13x14を無効化 */
  transition: transform .2s, opacity .2s;
}
.block-pagecategory .more_btn a:hover::after {
  transform: translateY(-50%) translateX(4px); /* すこし右にヌルっと */
  opacity: 1;
}
.block-top-topic--next-page a::before { content: none !important; }
.block-top-topic--next-page a {
  color:#e91e63; background:#ffe4ec; border:0;
  padding:.5em 1em; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 6px rgba(0,0,0,.1); transition: all .3s;
  padding-right: 2.25em;
}
.block-top-topic--next-page a::after {
  content:"→" !important; position:absolute; top:50%; right:16px;
  transform:translateY(-50%); opacity:.75; background:none !important; width:auto !important; height:auto !important;
  transition: transform .2s, opacity .2s;
}
.block-top-topic--next-page a:hover {
  background:#f8bbd0; color:#c2185b; box-shadow:0 6px 10px rgba(0,0,0,.15); transform:translateY(-2px);
}
.block-top-topic--next-page a:hover::after { transform:translateY(-50%) translateX(4px); opacity:1; }

/* --- patch: 余白だけちょい圧縮（任意） --- */
.top-kv { margin-bottom: 24px; }
.block-pagecategory-page-list--frame { margin-bottom: 16px; }
.top-info { margin-bottom: 36px; }

/* --- patch: ピンクボタン／黒帯OFF／矢印をテキスト化 --- */
.block-pagecategory .more_btn a,
.block-top-topic--next-page a {
  position: relative;           /* 矢印の基準点 */
  border: 0;
  padding-right: 2.25em;        /* 矢印ぶんの余白 */
}

.block-pagecategory .more_btn a { color:#e91e63; background:#ffe4ec; }
.block-pagecategory .more_btn a:hover {
  background:#f8bbd0; color:#c2185b;
  box-shadow:0 6px 10px rgba(0,0,0,.15); transform:translateY(-2px);
}

.block-top-topic--next-page a { color:#e91e63; background:#ffe4ec; }
.block-top-topic--next-page a:hover {
  background:#f8bbd0; color:#c2185b;
  box-shadow:0 6px 10px rgba(0,0,0,.15); transform:translateY(-2px);
}

/* 黒帯アニメ演出を確実に殺す */
.block-pagecategory .more_btn a::before,
.block-top-topic--next-page a::before { content: none !important; }

/* 画像矢印→テキスト矢印に */
.block-pagecategory .more_btn a::after,
.block-top-topic--next-page a::after {
  content: "→" !important;
  position: absolute; top: 50%; right: 16px;
  transform: translateY(-50%); opacity: .75;
  background: none !important; width: auto !important; height: auto !important;
  transition: transform .2s, opacity .2s;
}
.block-pagecategory .more_btn a:hover::after,
.block-top-topic--next-page a:hover::after {
  transform: translateY(-50%) translateX(4px); opacity: 1;
}

/* --- patch: キーボード操作の視認性（任意） --- */
.block-pagecategory .more_btn a:focus-visible,
.block-top-topic--next-page a:focus-visible {
  outline: 2px solid #c2185b; outline-offset: 2px;
}
/* タイル見出しの白文字を少し浮かせる */
.top-info--item-ttl {
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
/* [Monthly Recommend] 縦余白を圧縮する */
.top-info:has(.reco-splide) .top-info--header { 
  margin-bottom: 6px !important;          /* 見出し下の余白 */
}

.reco-splide { 
  margin: .25em auto .75em !important;    /* 上下 2em → 0.25/0.75em 程度に */
  max-width: 1000px;                      /* HTMLのinline指定をここに移す場合 */
}

/* カード内の余白を少しだけ詰める */
.reco-splide .splide__slide > div {
  padding: .75em !important;
  min-height: 340px !important;           /* 380 → 340（もっと詰めたければ 320〜） */
}

/* 動画とテキストの間を詰める */
.reco-splide .splide__slide > div > div {
  margin-bottom: .5em !important;         /* 1em → 0.5em */
}

@media (max-width: 768px){
  .reco-splide { 
    margin: .25em auto .5em !important; 
  }
  .reco-splide .splide__slide > div {
    min-height: 300px !important;
    padding: .6em !important;
  }
}
/* 再入荷見出しの上余白を圧縮 */
.block-top-event--header {
  margin-top: 24px !important;   /* 96px → お好みで 16〜32px */
}
/* おすすめブロックの下余白を軽く詰める（ある場合） */
.block-recent-item { 
  margin-bottom: 16px !important;    /* 例：デフォが大きければ */
}

/* おすすめブロックの下余白を軽く詰める（ある場合） */
.block-recent-item { 
  margin-bottom: 16px !important;    /* 例：デフォが大きければ */
}
/* リストの下マージンが強い場合の保険 */
.block-recent-item--items { 
  margin-bottom: 8px !important; 
}
/* サブスクヒットだけ配色＆テキスト色を変更 */
.top-info--subsuc .top-info--item{
  --sub-bg:#f7f7f9; --sub-fg:#111; --sub-bd:#e5e7eb;
  background:var(--sub-bg) !important;
  color:var(--sub-fg) !important;
  border:1px solid var(--sub-bd) !important;
  border-radius:8px;
}
.top-info--subsuc .top-info--item-ttl,
.top-info--subsuc .top-info--item-ttl a,
.top-info--subsuc .album-text-b .artist,
.top-info--subsuc .album-text-b .title,
.top-info--subsuc .album-desc-b { color:var(--sub-fg) !important; }

/* トークン別（SUBSUC1〜13） */
.top-info--subsuc .top-info--item[data-type="SUBSUC1"] { --sub-bg:#f6faff; --sub-bd:#dbe8f6; }
.top-info--subsuc .top-info--item[data-type="SUBSUC2"] { --sub-bg:#fef7f4; --sub-bd:#f3dfd7; }
.top-info--subsuc .top-info--item[data-type="SUBSUC3"] { --sub-bg:#faf6ff; --sub-bd:#e4dbf5; }
.top-info--subsuc .top-info--item[data-type="SUBSUC4"] { --sub-bg:#f4fbf6; --sub-bd:#d9eee0; }
.top-info--subsuc .top-info--item[data-type="SUBSUC5"] { --sub-bg:#fef6fb; --sub-bd:#f1dbe8; }
.top-info--subsuc .top-info--item[data-type="SUBSUC6"] { --sub-bg:#f3f9ff; --sub-bd:#d6e7fb; }
.top-info--subsuc .top-info--item[data-type="SUBSUC7"] { --sub-bg:#f8fff6; --sub-bd:#e0f1db; }
.top-info--subsuc .top-info--item[data-type="SUBSUC8"] { --sub-bg:#f9f9f2; --sub-bd:#e7e4cf; }
.top-info--subsuc .top-info--item[data-type="SUBSUC9"] { --sub-bg:#f6f8ff; --sub-bd:#dbe2fb; }
.top-info--subsuc .top-info--item[data-type="SUBSUC10"]{ --sub-bg:#f5fff7; --sub-bd:#d8f1dc; }
.top-info--subsuc .top-info--item[data-type="SUBSUC11"]{ --sub-bg:#fff6fb; --sub-bd:#f0d8e8; }
.top-info--subsuc .top-info--item[data-type="SUBSUC12"]{ --sub-bg:#f6ffff; --sub-bd:#d8eeee; }
.top-info--subsuc .top-info--item[data-type="SUBSUC13"]{ --sub-bg:#f7f7f7; --sub-bd:#e5e5e5; }

/* サムネを大きく＆正方形に（必要なら） */
.top-info--subsuc .album-row-b{ display:flex; align-items:center; gap:12px; --thumb:140px; }
.top-info--subsuc .album-thumb-b{ flex:0 0 var(--thumb); width:var(--thumb); height:var(--thumb); aspect-ratio:1/1; overflow:hidden; border-radius:6px; }
.top-info--subsuc .album-img-b{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 768px){
  /* STREAMING HIT（サブスクヒット）用のベース */
  .top-info.top-info--subsuc .top-info--item{
    --sub-bg:#f7f7f9; --sub-fg:#111; --sub-bd:#e5e7eb;
    background:var(--sub-bg) !important;
    color:var(--sub-fg) !important;
    border:1px solid var(--sub-bd) !important;
    border-radius:8px;
  }
  .top-info.top-info--subsuc .top-info--item-ttl,
  .top-info.top-info--subsuc .top-info--item-ttl a,
  .top-info.top-info--subsuc .album-text-b .artist,
  .top-info.top-info--subsuc .album-text-b .title,
  .top-info.top-info--subsuc .album-desc-b{
    color:var(--sub-fg) !important;
    text-shadow:none !important;
    background:transparent !important;
  }

  /* トークン別（必要分だけ例示。残りも同様に） */
  .top-info.top-info--subsuc .top-info--item[data-type="SUBSUC1"]{ --sub-bg:#f6faff; --sub-bd:#dbe8f6; }
  .top-info.top-info--subsuc .top-info--item[data-type="SUBSUC2"]{ --sub-bg:#fef7f4; --sub-bd:#f3dfd7; }
  /* …SUBSUC3〜13 も同様に追加 … */
}
/* ==== 激推し予約商品：マット金（25%） ==== */
.top-info.top-info--reserve .top-info--item{
  background: none !important;                    /* 既定背景を殺す */
  border: 1px solid rgba(212,175,55,.10) !important;  /* 0.18 → 0.10 */
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),       /* 0.18 → 0.10 */
    0 2px 8px rgba(212,175,55,.04);              /* 0.08 → 0.04 */
  overflow: hidden;
}

/* 背景グラデはさらに淡く（アルファを .25 に） */
.top-info.top-info--reserve .top-info--item::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(135deg,
    rgba(255,247,214,.25) 0%,
    rgba(255,230,128,.25) 40%,
    rgba(255,201, 75,.25) 100%) !important;
}

/* 中身は前面へ */
.top-info.top-info--reserve .top-info--item > *{ position:relative; z-index:1; }

/* 文字色は据え置き */
.top-info.top-info--reserve .top-info--item-ttl,
.top-info.top-info--reserve .top-info--item-ttl a{ color:#222; }
.top-info.top-info--reserve .album-text-b .artist{ color:#111; }
.top-info.top-info--reserve .album-text-b .title { color:#444; }

/* 説明は3行で省略 */
.top-info.top-info--reserve .album-desc-b{
  margin:.25em 0 0; line-height:1.5;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}

/* きらめき系の強調は完全OFF */
.top-info.top-info--reserve .top-info--item:hover{ filter:none !important; }


/* ==== 激推し予約商品：4行説明＋画像縮小＋縦詰め ==== */

/* 見出し下の余白も短く */
.top-info.top-info--reserve .top-info--header{
  margin-bottom: 16px !important;          /* 32px → 16px */
}

/* カード自体の内側余白を圧縮 */
.top-info.top-info--reserve .top-info--item{
  padding: 12px 12px 10px !important;      /* 25px → 12/12/10 */
}

/* タイトル行の余白を詰める */
.top-info.top-info--reserve .top-info--item-ttl{
  margin-bottom: 8px !important;
}

/* 本文ブロックの縦間隔を詰める */
.top-info.top-info--reserve .top-info--item-horizontal{
  gap: 6px !important;                      /* 12px → 6px */
}

/* 画像→テキストの縦積み（維持）＋さらにギュッと */
.top-info.top-info--reserve .album-row-b{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;                      /* 8px → 6px */
}

/* ジャケットを小さく（高さを稼ぐ） */
.top-info.top-info--reserve .album-row-b > a{
  width: 72% !important;                    /* 84% → 72% */
  max-width: 180px !important;              /* 220px → 180px */
  margin: 0 auto !important;
  aspect-ratio: 1/1;
  border-radius: 6px;
  overflow: hidden;
}
.top-info.top-info--reserve .album-row-b > a img,
.top-info.top-info--reserve .album-row-b > a .album-img-b{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* アーティスト／タイトルは両方強調、さらに行間・余白を圧縮 */
.top-info.top-info--reserve .album-text-b{
  width: 100% !important;
  text-align: left !important;
}
.top-info.top-info--reserve .album-text-b .artist,
.top-info.top-info--reserve .album-text-b .title{
  font-weight: 700 !important;              /* 強調 */
  line-height: 1.3 !important;
  margin: 0 0 0 !important;                 /* 余白ゼロ */
  letter-spacing: .01em;
  color: #111;
}

/* 説明は最大4行まで表示（読みやすさ優先でわずかに余白） */
.top-info.top-info--reserve .album-desc-b{
  margin: 6px 0 0 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4;                    /* ← 4行に拡張 */
  overflow: hidden !important;
  color: #333;
}/* サブスクヒット：アーティスト名は絶対省略しない */
.top-info--subsuc .album-text-b .artist{
  white-space: normal !important;      /* nowrap を打消し */
  overflow-wrap: anywhere !important;  /* 長語も折返す */
  word-break: break-word !important;
  display: block !important;           /* line-clamp系の前提を崩す */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

/* もし見出し側で2行制限を全体にかけているなら、ここでは解除 */
.top-info--subsuc .album-text-b .title{
  /* タイトルはVBAでバイト丸めするのでCSS側は制限しない */
  white-space: normal;
}
/* サブスクヒット：アーティスト名/タイトルを1段階だけ小さく */
.top-info--subsuc .album-text-b .artist,
.top-info--subsuc .album-text-b .title{
  font-size: 1.0em !important;   /* 既定 1.2em → 1.1em に微下げ */
  line-height: 1.25;              /* 孤立改行（"US"だけ等）をやや起きにくく */
}
/* NEW RELEASE：カテゴリ見出しの孤立1文字回避（PC/SP共通） */
.top-info--item-ttl a{
  display:inline-block;
  word-break: keep-all;     /* 日本語をむやみに分割しない */
  overflow-wrap: normal;
  text-wrap: balance;       /* 2行化するときにバランス良く割る（対応ブラウザで有効） */
  font-feature-settings: "palt"; /* 全角のアキを自然に詰めて収まりを良くする */
}