:root {
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* ジャケット・アーティスト写真の外周の薄い印影 */
  --media-image-shadow: 0 2px 4px rgba(0, 0, 0, 0.48),
    0 4px 14px rgba(0, 0, 0, 0.1);
  --site-link-color: #3a7ec2;
  --site-link-color-rgb: 58, 126, 194;
  }

img.jacket-image {
  box-shadow: var(--media-image-shadow);
  /* 印影の外形が角丸に沿う（チャート一覧・カルーセル等） */
  border-radius: 3px;
}

img.jacket-image:not(.jacket-image--row) {
  border: 1px solid rgb(170, 170, 170);
}

.playlist-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.playlist-create {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;

  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, #ff3a50 0%, #fa243c 55%, #e91f35 100%);
  color: #fff;

  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--media-image-shadow), 0 10px 24px rgba(0, 0, 0, 0.16);
  transform: translateY(0);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease,
    opacity 0.12s ease, filter 0.14s ease;
}

.playlist-create::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.14) 24%,
    rgba(255, 255, 255, 0) 55%
  );
  opacity: 0.9;
  pointer-events: none;
}

.playlist-create > * {
  position: relative;
  z-index: 1;
}

.playlist-create-beta {
  flex-shrink: 0;
}

.playlist-create:hover:not(:disabled) {
  background: linear-gradient(180deg, #ff4b5f 0%, #fa243c 55%, #d91f35 100%);
  transform: translateY(-2px);
  box-shadow: var(--media-image-shadow), 0 14px 34px rgba(0, 0, 0, 0.22);
  filter: saturate(1.02);
}

.playlist-create:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--media-image-shadow), 0 8px 18px rgba(0, 0, 0, 0.18);
  filter: saturate(0.98);
}

.playlist-create:focus-visible {
  outline: 3px solid rgba(var(--site-link-color-rgb), 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .playlist-create {
    transition: background 0.14s ease, opacity 0.12s ease;
    transform: none;
  }
  .playlist-create:hover:not(:disabled),
  .playlist-create:active:not(:disabled) {
    transform: none;
  }
}

.top-attention {
  padding: 8px;
  border: 4px solid #dc65a5;
  color: #dc65a5;
  background-color: #fffbf5;
  font-weight: 600;
  border-radius: 8px;
}
.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

#album-description {
  position: relative;
  padding-bottom: 24px;
}

.wikipedia-link {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-weight: 300;
}

body {
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}

main {
  background-color: #fff;
}

footer {
  background-color: #fff;
}

.footer-amazon-note {
  font-size: 10px;
  line-height: 1.3;
  color: #aaa;
}

.footer-spacer {
  height: 100px;
  background-color: #fff;
}

a {
  text-decoration: none;
  color: var(--site-link-color);
}
a:hover {
  text-decoration: underline;
  color: var(--site-link-color);
}

.chart-description {
  --chart-desc-fw: 300;
  --chart-desc-paragraph-gap: 16px;
  position: relative;
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid #d4cbbb;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
  font-weight: var(--chart-desc-fw);
}

/* トグルボタンは position:absolute のため、本文と重ならないよう下だけ広げる */
.chart-description:has(> .chart-description__more) {
  padding-bottom: 44px;
}

.artist-description__description {
  --chart-desc-fw: 300;
  --chart-desc-paragraph-gap: 16px;
  position: relative;
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid #d4cbbb;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
  font-weight: var(--chart-desc-fw);
}

/* トグルボタンは position:absolute のため、本文と重ならないよう下だけ広げる */
.artist-description__description:has(> .artist-description__more) {
  padding-bottom: 44px;
}

.release-description__description {
  --chart-desc-fw: 300;
  --chart-desc-paragraph-gap: 16px;
  position: relative;
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid #d4cbbb;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
  font-weight: var(--chart-desc-fw);
}

/* トグルボタンは position:absolute のため、本文と重ならないよう下だけ広げる */
.release-description__description:has(> .release-description__more) {
  padding-bottom: 44px;
}

.chart-description__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 5;
  overflow: hidden;
  word-break: break-word;
}

.artist-description__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 5;
  overflow: hidden;
  word-break: break-word;
}

.release-description__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 5;
  overflow: hidden;
  word-break: break-word;
}

.chart-description__body a {
  font-weight: calc(var(--chart-desc-fw) + 0);
  color: #777777;
}

.artist-description__body a {
  font-weight: calc(var(--chart-desc-fw) + 0);
  color: #777777;
}

.release-description__body a {
  font-weight: calc(var(--chart-desc-fw) + 0);
  color: #777777;
}

.chart-description__body-text,
.chart-description__body-text a,
.chart-description__body-text a:hover,
.chart-description__body-text a:visited,
.chart-description__body-text a:active {
  font-size: 16px;
  font-weight: 400;
}

.artist-description__body-text,
.artist-description__body-text a,
.artist-description__body-text a:hover,
.artist-description__body-text a:visited,
.artist-description__body-text a:active {
  font-size: 16px;
  font-weight: 400;
}

.release-description__body-text,
.release-description__body-text a,
.release-description__body-text a:hover,
.release-description__body-text a:visited,
.release-description__body-text a:active {
  font-size: 16px;
  font-weight: 400;
}

/* flex だと linkify 後の __paragraphs が親の -webkit-line-clamp と相性が悪い（チャート Review 等） */
.chart-description__paragraphs {
  display: block;
}

.artist-description__paragraphs {
  display: block;
}

.release-description__paragraphs {
  display: block;
}

.chart-description__p {
  margin: 0;
}

.chart-description__p:not(:last-child) {
  margin-bottom: var(--chart-desc-paragraph-gap);
}

.artist-description__p {
  margin: 0;
}

.artist-description__p:not(:last-child) {
  margin-bottom: var(--chart-desc-paragraph-gap);
}

.release-description__p {
  margin: 0;
}

.release-description__p:not(:last-child) {
  margin-bottom: var(--chart-desc-paragraph-gap);
}

.chart-description--expanded .chart-description__body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.js-artist-description.is-expanded .artist-description__body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.release-description__description.is-expanded .release-description__body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.chart-description__more,
.chart-description__less {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--site-link-color);
  font-size: 24px;
  font-weight: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.artist-description__more,
.artist-description__less {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--site-link-color);
  font-size: 24px;
  font-weight: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.release-description__more,
.release-description__less {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--site-link-color);
  font-size: 24px;
  font-weight: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.chart-description__more:hover,
.chart-description__less:hover {
  color: var(--site-link-color);
}

.artist-description__more:hover,
.artist-description__less:hover {
  color: var(--site-link-color);
}

.release-description__more:hover,
.release-description__less:hover {
  color: var(--site-link-color);
}

@media (min-width: 992px) {
  .licence-announcement {
    text-align: center;
  }
}

.chart-week a {
  color: #777;
}

.chart-week a:hover {
  text-decoration: underline;
  color: #777;
}

text {
  font-weight: 300;
  font-style: normal;
}

dir[dir="ltr"] {
  width: 100% !important;
}

h2 {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 16px;
}

p {
  font-weight: 300;
}

.container > div {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

/* ナビの固定: sticky は flex 子の .navbar よりラッパーの header に付けると安定する。
   祖先に overflow:hidden 等があると無効になるため header は明示的に visible。 */
header[role="banner"] {
  position: sticky;
  top: 0;
  z-index: 1030;
  overflow: visible;
  box-shadow: 0 4px 18px rgba(22, 6, 32, 0.14);
}

.scroll-to-top-btn {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(74, 22, 100, 0.92);
  color: #fff;
  box-shadow: 0 2px 14px rgba(22, 6, 32, 0.22);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.scroll-to-top-btn:hover {
  background: rgba(107, 35, 128, 0.98);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(22, 6, 32, 0.28);
}

.scroll-to-top-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.scroll-to-top-btn .material-icons {
  font-size: 28px;
  line-height: 1;
}

.navbar.bg-gradient-brand {
  background: linear-gradient(135deg, #4A1664 0%, #6B2380 40%, #8E4F5A 100%) !important;
}

.dropdown-item {
  font-size: 14px;
}
.dropdown-submenu {
  position: relative;
}

.navbar button.nav-link,
.navbar button.nav-link:active,
.navbar button.nav-link:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  font: inherit;
}

.dropdown-menu button.dropdown-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dropdown-menu button.dropdown-item:focus {
  outline: none;
  box-shadow: none;
}

.dropdown-menu button.dropdown-item.dropdown-toggle {
  padding-right: 1.75rem;
}

.dropdown-submenu a::after,
.dropdown-submenu button::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

.cookie-consent-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2147483645;
  box-sizing: border-box;
  width: 100%;
  background-color: #F1F6F4;
}

.cookie-consent-banner__inner {
  max-width: 90%;
  margin: 0 auto;
  padding: 32px 0;
}

.cookie-consent-banner__copy {
  margin-bottom: 16px;
}

.cookie-consent-banner__header {
  margin-bottom: 8px;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__description {
  font-weight: normal;
  color: #838F93;
  font-size: 12px;
  line-height: 20px;
}

.cookie-consent-banner__cta {
  box-sizing: border-box;
  display: inline-block;
  min-width: 164px;
  padding: 11px 13px;
  border-radius: 2px;
  background-color: #2CE080;
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
}

.cookie-consent-banner__cta--secondary {
  padding: 9px 13px;
  border: 2px solid #3A4649;
  background-color: transparent;
  color: #2CE080;
}

.cookie-consent-banner__cta:hover {
  background-color: #20BA68;
}

.cookie-consent-banner__cta--secondary:hover {
  border-color: #838F93;
  background-color: transparent;
  color: #22C870;
}

.cookie-consent-banner__cta:last-child {
  margin-left: 16px;
}

.starter-template {
  text-align: center;
}

.chart-flex {
  display: flex;
  gap: 16px;
  font-weight: 300;
}
.relation {
  margin: 10px auto auto auto;
  overflow: hidden;
  text-align: left;
}
.relation-tag {
  background-color: #f2f8fd;
  font-size: 10pt;
  font-weight: 500;
  float: left;
  margin: 5px;
  padding: 3px 7px 3px 7px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-shadow: 0.5px 0.5px 0.5px lightsteelblue;
}

.news-relation {
  margin-top: 6px;
  overflow: hidden;
  text-align: left;
}

.news-item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 6px;
  width: 100%;
}

.news-item__title {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  color: #777;
}

.news-item__meta {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.news-item__tags {
  grid-column: 1 / span 2;
  grid-row: 2;
  margin-top: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 8px;
}

.news-relation__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  flex: 1 1 0;
}

.news-relation.is-collapsed .news-relation__inner {
  overflow: hidden;
}

.news-relation__toggle {
  flex-shrink: 0;
  margin: 0;
  padding: 3px 0 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: #9ca3af;
  cursor: pointer;
  text-decoration: underline;
  align-self: flex-start;
}

.news-relation__toggle:hover,
.news-relation__toggle:focus-visible {
  color: #374151;
}

.news-relation__toggle--icon {
  text-decoration: none;
  align-self: flex-start;
  padding: 2px 2px 0 0;
  line-height: 1;
}

.news-relation__toggle--icon .mdi {
  display: block;
  font-size: 16px;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  /* SP: |タイトル| → |関連アーティスト| → |ソース・配信日時| */
  .news-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .news-item__title {
    order: 1;
    grid-column: unset;
    grid-row: unset;
  }

  .news-item__tags {
    order: 2;
    grid-column: unset;
    grid-row: unset;
    margin-top: 0; /* .news-relation の margin と gap の二重を避ける */
  }

  .news-item__meta {
    order: 3;
    grid-column: unset;
    grid-row: unset;
    justify-self: unset;
    text-align: right;
    width: 100%;
  }
}

.news-relation-tag {
  background-color: #f3f4f6;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.news-relation-tag a:link,
.news-relation-tag a:visited {
  color: #aaa;
}

.news-relation-tag a:hover,
.news-relation-tag a:active {
  color: #374151;
  text-decoration: underline !important;
}

/* 説明文・チャート Review 下の関連アーティスト（news-relation はトピック専用 DOM 前提のため別系統） */
.description-relation {
  margin-top: 8px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 4px 8px;
}

.description-relation__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.description-relation.is-collapsed .description-relation__inner {
  overflow: hidden;
}

.description-relation__toggle {
  flex-shrink: 0;
  margin: 0;
  padding: 3px 0 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: #9ca3af;
  cursor: pointer;
  text-decoration: underline;
  align-self: flex-start;
}

.description-relation__toggle:hover,
.description-relation__toggle:focus-visible {
  color: #374151;
}

.description-relation__toggle--icon {
  text-decoration: none;
  align-self: flex-start;
  padding: 3px 2px 0 0;
  line-height: 1;
}

.description-relation__toggle--icon .mdi {
  display: block;
  font-size: 16px;
  line-height: 1;
}

.description-relation-tag {
  background-color: #f3f4f6;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.description-relation .description-relation-tag,
.description-relation .description-relation-tag a,
.description-relation .description-relation-tag a:link,
.description-relation .description-relation-tag a:visited,
.description-relation .description-relation-tag a:hover,
.description-relation .description-relation-tag a:active {
  font-size: 12px;
  font-weight: 500;
}

.description-relation-tag a:link,
.description-relation-tag a:visited {
  color: #aaa;
}

.description-relation-tag a:hover,
.description-relation-tag a:active {
  color: #374151;
  text-decoration: underline !important;
}

/* タグ hover 時に本文内の同一アーティストリンクを強調（href 一致）
   縦 padding は行ボックスが動いてグラつくため付けない。縦方向の広がりは box-shadow spread のみ（レイアウトに含まれない）。
   横 8px 分は padding + 同量の負 margin で相殺し、文字位置を維持したまま背景幅だけ広げる。 */
.chart-description__body-text a.js-description-link-highlight,
.artist-description__body-text a.js-description-link-highlight,
.release-description__body-text a.js-description-link-highlight {
  padding: 0 8px;
  margin: 0 -8px;
  background-color: rgba(255, 237, 160, 0.55);
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow:
    0 0 0 1px rgba(234, 179, 8, 0.35),
    0 0 0 4px rgba(255, 237, 160, 0.55);
}

.relation-tag a:link {
    color: #0268cc;
}

.relation-tag a:visited {
    color: #0268cc;
}

.relation-tag a:hover {
    color: #0268cc;
    text-decoration: underline !important;
}

.relation-tag a:active {
    color: #0268cc;
    text-decoration: underline !important;
}

.artist-description {
  position: relative;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;

  @media screen and (max-width: 767px) {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }
}

/* アーティスト欄: align-items:flex-end だと子が shrink し、.wikipedia-link の right がパネル端に合わない */
.artist-description .artist-description__description {
  align-items: stretch;
}

/* ジャケ＋説明の横並びで説明パネルが残り幅を取る（/album /single /artist 共通） */
.artist-description > .artist-description__description {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 240px;
}

.artist-description .artist-description__body,
.artist-description .artist-description__body-text {
  width: 100%;
  box-sizing: border-box;
}

/* アーティスト欄: Wikipedia 等は全文。DB は 5 行折りたたみ（flex 行内のため __paragraphs に line-clamp） */
.artist-description .artist-description__description:not(.artist-description__description-db) .artist-description__body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* DB 説明: __body の line-clamp は flex 子では不安定なため __paragraphs に付与 */
.artist-description .artist-description__description-db .artist-description__body {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  min-height: 0;
}

.artist-description .artist-description__description-db .artist-description__body-text {
  display: block;
  overflow: visible;
}

.js-artist-description-db .js-artist-description-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 5;
  overflow: hidden;
  word-break: break-word;
}

.js-artist-description-db.is-expanded .js-artist-description-clamp {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  -webkit-box-orient: unset;
}

/* Wikipedia 説明: .wikipedia-link を description 直下に置くための余白 */
.artist-description .artist-description__description.position-relative {
  padding-bottom: 28px;
}

.release-description {
  position: relative;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;

  @media screen and (max-width: 767px) {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ジャケ＋説明の横並びで説明パネルが残り幅を取る（/album /single 用） */
.release-description > .release-description__description {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 240px;
}

.release-description .release-description__body,
.release-description .release-description__body-text {
  width: 100%;
  box-sizing: border-box;
}

/* /album /single: Wikipedia 等は全文。DB は 5 行折りたたみ（flex 行内のため clamp ラッパーに line-clamp） */
.release-description .release-description__description:not(.release-description__description-db) .release-description__body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.release-description .release-description__description-db .release-description__body {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  min-height: 0;
}

.release-description .release-description__description-db .release-description__body-text {
  display: block;
  overflow: visible;
}

.release-description .release-description__description-db .js-release-description-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 5;
  overflow: hidden;
  word-break: break-word;
}

.release-description .release-description__description-db.is-expanded .js-release-description-clamp {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  -webkit-box-orient: unset;
}

/* Wikipedia 説明: .wikipedia-link を description 直下に置くための余白 */
.release-description .release-description__description.position-relative {
  padding-bottom: 28px;
}

.artist-image {
  float: left;
  overflow: hidden;
  border-radius: 4px;
  /* 子 img の box-shadow は親の overflow で欠けるため、印影はラッパーに付与して角丸と共存 */
  box-shadow: var(--media-image-shadow);
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  position: relative;
  z-index: 1;
  margin: 24px 24px 8px 24px;

  @media screen and (max-width: 767px) {
    width: 100% !important;
    height: fit-content !important;
    margin: 0
  }
}

.artist-image a {
  display: block;
  border-radius: inherit;
}

.artist-image img {
  display: block;
  max-width: 100%;
  max-height: 192px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: inherit;
  /* ラッパーに印影を集約（overflow:hidden と両立） */
  box-shadow: none;
  @media screen and (max-width: 767px) {
    width: 100% !important;
    height: auto !important;
    max-height: none;
    object-fit: contain;
  }
}

/* 横並びジャケは角丸は .artist-image のクリップに合わせ、自身の 3px 丸は打ち消す */
.artist-image img.jacket-image {
  border-radius: inherit;
}

.artist-text {
  margin: 8px;
  position: relative;
  font-weight: 300;
  font-size: 14px;
  padding-bottom: 24px;
}

.artist-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 16px;
}

.artist-right .chart-week-specification {
  width: 100%;
  text-align: right;
  color: #aaa;
}

.album-card img {
  width: 200px;
  box-shadow: var(--media-image-shadow);
  @media screen and (max-width: 767px) {
    width: 100%;
    height: 100%;
  }
}

.album-description {
  flex-direction: row;
  position: relative;
  display: flex;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
  @media screen and (max-width: 767px) {
    display: block !important;
  }
}

.container-fluid {
  padding-right: 0 !important;
}
/* 外枠 */
.gsc-input-box {
  height: 40px !important;
  width: 480px !important;
  display: flex;
  align-items: center;

  @media screen and (max-width: 767px) {
    width: 240px !important;
  }
}

/* input本体 */
.gsc-input {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 !important;
  margin: 0 4px !important;
  box-sizing: border-box;

  @media screen and (max-width: 767px) {
    padding: 0 !important;
    margin: 0 10px !important;
  }
}

.gsc-input table tbody {
  width: 100% !important;
}

/* アイコン・内部要素の調整 */
.gsib_a {
  padding: 0 !important;
}

/* テーブルレイアウトを潰す（これ重要） */
form.gsc-search-box {
  margin: 0 8px !important;

  @media screen and (max-width: 991px) {
    margin: 0 !important;
  }
}

.gsc-search-box table {
  display: flex;
  align-items: center;
}

/* セル調整 */
.gsc-input-cell {
  flex: 1;
}

.gsc-search-button {
  display: none !important;
}

.gsc-search-button-cell {
  display: none !important;
}

input[name="search"] {
  height: 38px !important;
}

.add-to-any {
  display: flex;
  flex-direction: row-reverse;
}

.align-right {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.title-flex {
  display: flex ;
  justify-content: space-between;
}

div[style="width: 100%; height: auto; clear: both;"] {
  display: none;
}

html {
  scroll-padding-top: 72px;
}

.news-list {
  list-style-type: circle;
}

/**
 * 箇条書き（利用規約・プライバシー等）— マーカーを控えめに
 */
.list-soft {
  list-style-type: circle;
  list-style-position: outside;
  padding-left: 1.45rem;
  margin-bottom: 0;
}

.list-soft > li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  padding-left: 0.2rem;
}

.list-soft > li::marker {
  color: #b8c1cc;
  font-size: 0.72em;
}

.news-list-item {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #eee;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-feature-settings: 'palt';
  flex-direction: row;
  justify-content: space-between;

  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
}

.featured-artist-name {
  font-weight: 300;
  font-size: 18px;
  font-style: italic;
}

.artist-name {
  font-weight: 600;
}
.artist-name a {
  color: #666;
}
.list-group-item {
  background-color: #fffbf5;
  border: 1px solid #d4cbbb;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
}

/* list-group-itemのhover時の背景色を変更 */
.list-group-item:hover {
  background-color: #fff;
}

.list-group-item.list-group-item-action:hover {
  background-color: #fff;
}

.apple-music-iframe {
  margin-top: 56px;
  @media screen and (max-width: 767px) {
    margin-top: 24px;
  }
}
.chart-discography-grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto;
  gap: 0 8px;
  font-weight: 300;
}
.chart-discography-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-row: 1 / 3;

  @media screen and (max-width: 767px) {
    grid-row: 1;
  }
}
.chart-discography-top {
  grid-column: 2;
  grid-row: 1;

  display: grid;
  grid-template-columns: 1fr 88px;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 8px;
}
.chart-discography-bottom {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  @media screen and (max-width: 767px) {
    grid-column: 1 / span 2;
    align-content: flex-end;
  }
}
.chart-debut-peak {
  display: flex;
  gap: 0;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
  font-weight: 600;

  @media screen and (max-width: 767px) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.chart-debut-peak a {
  color: #aaa;
}
.chart-debut-peak a:hover {
  color: #aaa;
}
.chart-debut-peak a:visited {
  color: #aaa;
}
.chart-debut-peak a:active {
  color: #aaa;
}

.chart-debut-peak > :nth-child(1) + :nth-child(2),
.chart-debut-peak > :nth-child(3) + :nth-child(4),
.chart-debut-peak > :nth-child(5) + :nth-child(6),
.chart-debut-peak > :nth-child(7) + :nth-child(8) {
    margin-left: 8px;
}

.chart-debut-peak > :nth-child(2) + :nth-child(3),
.chart-debut-peak > :nth-child(4) + :nth-child(5),
.chart-debut-peak > :nth-child(6) + :nth-child(7) {
  margin-left: 16px;
}

.chart-debut-icon {
  white-space: nowrap;
  font-variation-settings: "wdth" 90;
  color: #777;
  font-size: 14px;
  cursor: pointer;
}
.chart-peak-icon {
  white-space: nowrap;
  font-variation-settings: "wdth" 90;
  color: #777;
  font-size: 14px;
  cursor: pointer;
}
.chart-debut-date {
  display: block;
  white-space: nowrap;
  font-variation-settings: "wdth" 90;
  width: 80px;
}
.chart-peak-date {
  display: block;
  white-space: nowrap;
  font-variation-settings: "wdth" 90;
  width: 80px;
}
.chart-debut-rank {
  display: block;
  white-space: nowrap;
  width: 32px;
}
.chart-peak-rank {
  display: block;
  white-space: nowrap;
  width: 32px;
}
.chart-last-icon {
  white-space: nowrap;
  color: #777;
  cursor: pointer;
  font-size: 14px;
}
.chart-last-rank {
  color: #aaa;
  width: 32px;
}
.chart-weeks-icon {
  width: fit-content;
  color: #777;
  cursor: pointer;
  font-size: 14px;
}

.chart-weeks-icon::before {
  content: "🅦";
}

.chart-last-icon::before {
  content: "🅛";
}

.chart-debut-icon::before {
  content: "🅓";
}

.chart-peak-icon::before {
  content: "🅟";
}
.chart-weeks-value {
  color: #aaa;
  width: 24px;
}
.chart-week-top {
  grid-column: 3;
  grid-row: 1;

  display: flex;
  flex-direction: row;
  justify-content: space-between;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
  }

  height: 100%;
  width: 100%;
  flex-shrink: 100;
}
.chart-week-bottom {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  @media screen and (max-width: 767px) {
    grid-column: 1 / span 3;
    align-content: flex-end;
  }
}
.chart-week-artist {
  @media screen and (min-width: 768px) {
      white-space: nowrap;
  }
  font-size: 16px;
  font-weight: 600;
}

.chart-week-rank {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "palt";
  color: cornflowerblue;

  @media screen and (max-width: 767px) {
    font-size: 14px;
  }
}
.chart-week-arrow {
  font-size: 16px;
  color:#aaa;

  @media screen and (max-width: 767px) {
    font-size: 14px;
  }
}
.chart-week-grid {
  display: grid;
  grid-template-columns: 64px 48px 1fr;
  grid-template-rows: auto auto;
  gap: 0 8px;
  font-weight: 300;
}
.chart-week-new {
  background-color: #a539a3;
  padding: 0.35em 0.65em;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2px;
}
.chart-week {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-feature-settings: "palt";
  font-weight: 300;
  white-space: nowrap;
}
.chart-week-image {
  width: 64px;
  grid-column: 1; 
  grid-row: 1 / 3;

  @media screen and (max-width: 767px) {
    grid-row: 1;
  }
}
.chart-week-specification {
  width: 48px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: flex-start;
  font-size: 12px;
  gap: 4px;
  align-items: center;
  
  grid-column: 2; 
  grid-row: 1 / 3;

  @media screen and (max-width: 767px) {
    width: 48px;
    font-size: 10px;
    justify-content: flex-start;
    grid-row: 1;
  }
}
.chart-week-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.chart-week-rank-arrow {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 8px;
  justify-content: space-around;
}

.chart-weeks {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  color:#888;
  font-weight: 600;
  white-space: nowrap;
  width: 72px;
}
.chart-action {
  margin-bottom: 16px;
  width: auto;
  height: auto;
  background-color: #fffbf5;
  border: 1px solid #d4cbbb;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
}
.chart-normal-grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto;
  gap: 0 8px;
  font-weight: 300;
}
.chart-normal-grid-with-rank {
  grid-template-columns: 64px 48px 1fr;
}
.chart-normal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-row: 1 / 3;

  @media screen and (max-width: 767px) {
    grid-row: 1;
  }
}
.chart-normal-specification {
  width: 48px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: flex-start;
  font-size: 12px;
  gap: 4px;
  align-items: center;
  
  grid-column: 2; 
  grid-row: 1 / 3;

  @media screen and (max-width: 767px) {
    width: 48px;
    font-size: 10px;
    justify-content: flex-start;
    grid-row: 1;
  }
}
.chart-normal-top {
  grid-column: 2;
  grid-row: 1;

  display: grid;
  grid-template-columns: 1fr 88px;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 8px;

  height: 100%;
  width: 100%;
  flex-shrink: 100;
}
.chart-normal-top-with-rank {
  grid-column: 3;
}
.chart-normal-top .chart-artist {
  font-size: 14px;
}
.chart-normal-bottom {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  @media screen and (max-width: 767px) {
    grid-column: 1 / span 2;
    align-content: flex-end;
  }
}
.chart-normal-bottom-with-rank {
  grid-column: 3;

  @media screen and (max-width: 767px) {
    grid-column: 1 / span 3;
  }
}
.chart-normal-artist {
  font-size: 16px;
  font-weight: 600;
}
.chart-year-grid {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;
  gap: 0 8px;
  font-weight: 300;
}
.chart-year-top {
  grid-column: 2;
  grid-row: 1;

  display: grid;
  grid-template-columns: 1fr 88px;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 8px;

  height: 100%;
  width: 100%;
  flex-shrink: 100;
}
.chart-year-bottom {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  @media screen and (max-width: 767px) {
    grid-column: 1 / span 3;
    align-content: flex-end;
  }
}
.chart-title {
  font-size: 16px;
  font-weight: 600;
}
.chart-title a {
  color: var(--site-link-color);
}
.chart-artist {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  text-align: start;

  @media screen and (max-width: 767px) {
    font-size: 14px;
    text-align: left;
  }
}
.chart-artist a {
  color: var(--site-link-color);
}
.chart-year {
  font-size: 16px;
  font-weight: 300;
  text-align: right;
  margin-right: 16px;
}
.chart-year-image {
  width: 64px;
  grid-column: 1; 
  grid-row: 1 / 3;

  @media screen and (max-width: 767px) {
    grid-row: 1;
  }
}
.chart-year-link {
   color: #666;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  white-space: nowrap;
}
.chart-year-link:hover {
  color: #666;
}
  

.chart-specification {
  background-color: #f6f0e9;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  color: #3e3e3e;
}

.chart-specification-container {
  background-color: #fffbf5;
  border: 1px solid #d4cbbb; /* より薄いボーダーカラー */
  padding: 24px 36px;
  width: 100%;
  max-width: 550px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08); /* より小さく、透明度を上げたシャドウ */
}

.chart-specification-header {
  text-align: center;
  margin-bottom: 30px;
}

.chart-specification-main-title {
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.chart-specification-divider {
  width: 100%;
  height: 1px;
  background-color: #e0ded7; /* ボーダーカラーに合わせた色 */
  margin: 16px 0;
}

.chart-specification-ranks-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.rank-card {
  text-align: center;
  padding: 4px;
  border-bottom: 1px dashed #d4cbbb;
}

.rank-card.peak-card .rank-label {
  color: #dc3545;
}

.rank-card.debut-card .rank-label {
  color: #198754;
}

.rank-card.final-card .rank-label {
  color: #6610f2;
}

.rank-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 8px;
}

.rank-details {
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
}

.rank-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.rank-date, .rank-date a {
  font-size: 14px;
  font-weight: 600;
  color: #6a6a6a;
  @media screen and (max-width: 767px) {
    font-size: 12px;
  }
}

.stats-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 5px;
  border-bottom: 1px dashed #d4cbbb; /* ボーダーカラーに合わせた色 */
}

.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #6a6a6a;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
}

.stat-value.dash-value {
  font-weight: normal;
}

.pagination-info {
  font-size: 16px;
  font-weight: 600;
  color: #6a6a6a;
}

.pagination-block {
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media screen and (max-width: 767px) {
    flex-direction: column-reverse;
    gap: 16px;
  }
}

.chart-complement  {
  font-size: 14px;
  font-weight: 300;
  color: #6a6a6a;
}

/* ALBUM/SINGLE 切替タブ: 週・年・アーティスト共通のフォント */
.chart-switch-tabs .nav-link {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.chart-switch-tabs .nav-link.active {
  font-weight: 600;
}
.chart-switch-tabs button.nav-link {
  font-family: inherit;
}

.nav-tabs-grid {
  @media screen and (max-width: 767px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: #dee2e6;
    border: 1px solid #dee2e6;
  }
}
.nav-tabs-grid .nav-link,
.nav-tabs-grid .nav-link.active {
  @media screen and (max-width: 767px) {
    font-size: 14px;
    background-color: #fff;
    border: none;
    border-radius: 0;
    text-align: center;
    margin-bottom: 0;
  }
}

.gsib_a::before {
  content: none !important;
}

.amazon-associates {
  --amazon-associates-image-width: 144px;
  --amazon-associates-box-padding: 8px;
  --amazon-associates-box-border: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.amazon-associates__group {
  width: calc(
    var(--amazon-associates-image-width)
    + 2 * var(--amazon-associates-box-padding)
    + 2 * var(--amazon-associates-box-border)
  );
  max-width: 100%;
}

.amazon-associates__box {
  border: var(--amazon-associates-box-border) solid #aaa;
  padding: var(--amazon-associates-box-padding);
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}