li {
  all: unset;
}

.recommend-header-wrapper {
  all: unset;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 512px) {
  .recommend-header-wrapper {
  }
}

.recommend-header {
  padding: 1rem;
  padding-top: 20px;
  text-align: start;
}

.recommend-header-time {
  font-size: 13px;
  color: var(--c-text-3);
}

.ranking-page-main {
  display: block;
  font-family: var(--font-family);
  max-width: 812px;
}

.ranking-page-main .talkroom_banner_img_figure {
  padding: 0;
  width: 100%;
  margin-bottom: 6px;
}

.ranking-page-main .talkroom_banner_img_figure figcaption {
  font-size: 9px;
  color: var(--c-text-5);
  display: block;
  /*   text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; */
  margin: 0 1rem;
  line-height: 120%;
  margin-bottom: 1px;
}

.ranking-page-main .talkroom_banner_img_area {
  width: calc(100% - 2rem);
  margin: auto;
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    'img1 img1 img2 img3'
    'img1 img1 img4 img5';
  gap: 4px;
}

.ranking-page-main .talkroom_banner_img_area_inner {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
}

.ranking-page-main .talkroom_banner_img_area_inner:nth-child(1) {
  grid-area: img1;
}

.ranking-page-main .talkroom_banner_img_area_inner:nth-child(2) {
  grid-area: img2;
}

.ranking-page-main .talkroom_banner_img_area_inner:nth-child(3) {
  grid-area: img3;
}

.ranking-page-main .talkroom_banner_img_area_inner:nth-child(4) {
  grid-area: img4;
}

.ranking-page-main .talkroom_banner_img_area_inner:nth-child(5) {
  grid-area: img5;
}

.ranking-page-main .talkroom_banner_img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}

.ranking-page-main .talkroom_link_h1 {
  font-size: 21px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--c-text-1);
  display: block;
  white-space: break-spaces;
  margin-bottom: 4px;
  font-family:
    'meiryo UI',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

.recommend-header-bottom {
  margin: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
}

.recommend-data-desc {
  font-size: 13px;
  color: var(--c-brand);
}

.recommend-header-desc {
  display: block;
  padding: 0 1rem;
  font-size: 14px;
  color: var(--c-text-mid-2);
  line-height: 1.3;
  margin-bottom: 8px;
}

.recommend-header-desc.desc-bottom {
  font-size: 15px;
  color: var(--c-text-mid-2);
  line-height: 1.6;
  margin: 0;
}

.recommend-header-desc.desc-bottom .desc-aside {
  font-size: 12px;
  color: var(--c-text-3);
}

.top-ranking-list-aside {
  all: unset;
  display: block;
}

.tag-list-section {
  all: unset;
  display: block;
}

.openchat-item-list.parent {
  counter-reset: openchat-counter2 0;
}

.openchat-item-list.parent .top-ranking:not(.not-rank) .openchat-item::before {
  content: counter(openchat-counter2);
  counter-increment: openchat-counter2 1;
}

.openchat-item-list.parent .top-ranking:not(.not-rank) .openchat-item.hundred::before {
  left: -2rem;
}

.openchat-item-list.parent .top-ranking .openchat-item.goldmedal::before {
  content: '🥇';
  font-style: normal;
  font-size: 24px;
  left: -31px;
  top: 23px;
  line-height: 1;
}

.openchat-item-list.parent .top-ranking .openchat-item.silvermedal::before {
  content: '🥈';
  font-style: normal;
  font-size: 22px;
  left: -30px;
  top: 23px;
  line-height: 1;
}

.openchat-item-list.parent .top-ranking .openchat-item.blonzemedal::before {
  content: '🥉';
  font-style: normal;
  font-size: 20px;
  left: -29px;
  top: 23px;
}

.openchat-item-list.parent .top-ranking:not(.not-rank) .openchat-item.goldmedal {
  margin-bottom: 1.5rem;
}

.openchat-item-list.parent .ranking-page-main .openchat-item-lower-outer {
  flex-direction: row;
  gap: 8px;
  margin-top: 1px;
  align-items: center;
}

.openchat-item-list.parent .ranking-page-main .openchat-item-mui-chip-outer {
  margin-top: 0;
}

.recommend-ranking-section-header {
  all: unset;
  display: block;
}

.recommend-ranking-section-header .list-aside {
  margin: 0;
  margin-top: 4px;
}

.recommend-ranking-bottom.list-aside {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.app_link.open-chat-guide {
  display: block;
  margin: auto;
  width: fit-content;
}

.app_link.open-chat-guide a {
  padding: 0.5rem 0;
  display: block;
  font-size: 12px;
}

.recommend-ranking-bottom.list-aside .readMore-btn {
  margin: 2rem 0 1rem 0;
}

.list-aside.recommend-ranking-bottom .tag-list {
  margin: 6px 0 1rem 0;
}

.list-aside {
  all: unset;
  display: block;
}

.list-aside .tag-list {
  all: unset;
  list-style: none;
  display: block;
}

.list-aside .tag-list li {
  all: unset;
  display: inline-block;
  margin: 7px 0 0 2px;
  max-width: calc(100% - 5px);
  vertical-align: top;
}

.list-aside .tag-btn {
  text-decoration: none;
  cursor: pointer;
  align-items: center;
  background-color: var(--c-bg);
  border: 1px solid var(--c-border-plain);
  border-radius: 36px;
  box-sizing: border-box;
  color: var(--c-text-1);
  display: inline-flex;
  font-size: 13px;
  height: 36px;
  letter-spacing: -0.3px;
  line-height: 15px;
  padding: 0 12px;
}

.list-aside.ranking-desc {
  margin: 0px 0 11px 0;
}

.recommend-ranking-section {
  all: unset;
  display: block;
}

.ranking-page-main .share-nav {
  margin-bottom: 20px;
}

.recommend-desc {
  color: var(--c-text-mid-2);
  font-size: 14px;
  line-height: 1.9;
}

.recommend-desc2 {
  color: var(--c-text-mid-2);
  font-size: 14px;
  line-height: 1.9;
}

.ranking-desc .recommend-desc {
  margin-top: 6px;
  padding-left: 0.5rem;
}

.small {
  font-size: 85%;
}

section aside:hover {
  box-shadow: unset;
}

.list-aside {
  all: unset;
  display: block;
  margin: 2rem 0;
}

.list-title {
  color: var(--c-text-1);
  font-size: 15px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 0;
}

.list-title.oc-list {
  margin-bottom: 4px;
}

.list-aside details {
  margin: 0;
  font-size: 13px;
  color: var(--c-text-3);
  font-weight: normal;
}

.list-aside summary {
  width: fit-content;
}

.list-aside-details {
  padding-left: 0.5rem;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-aside-desc {
  font-size: 13px;
  color: var(--c-text-mid-2);
  display: block;
}

.openchat-item-list .css-162gv95 {
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  color: var(--c-up);
  font-size: 11px;
  margin: -1px -4px;
}

.list-aside {
  all: unset;
  display: block;
}

.list-aside .tag-btn.close-btn {
  border-radius: 99rem;
  display: block;
}

.list-aside .tag-btn.close-btn::after {
  display: inline-block;
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--c-text-1);
  border-right: 1px solid var(--c-text-1);
  transform: rotate(135deg);
  margin-bottom: 3px;
}

.diff-member {
  all: unset;
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--c-text-mid-3);
}

.diff-member div {
  padding: 2px 4px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
}

.app_link a {
  font-size: 13px;
  color: var(--c-text-3);
}

.recommend-header-desc-text {
  color: var(--c-text-1);
  font-size: 18px;
  white-space: unset;
  font-weight: bold;
  font-family:
    'Yu Gothic',
    -apple-system,
    system-ui,
    blinkmacsystemfont,
    Helvetica Neue,
    helvetica,
    Hiragino Sans,
    arial,
    sans-serif;
  line-height: 1.3;
  padding: 0 1rem;
  margin: 6px 0 2px 0;
}

.hr-top.recommend {
  all: unset;
  display: block;
  border-bottom: 1px solid var(--c-border);
  margin: 0 auto;
  margin-bottom: 1px;
  padding: 1px 0;
  width: calc(100% - 2rem);
}

@media screen and (min-width: 512px) {
  .ranking-page-main .share-nav {
    margin: 11px 0;
    margin-bottom: -5px;
  }

  .recommend-header-desc-text {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: bold;
  }

  .ranking-page-main .share-nav-inner {
    width: 100%;
    flex-direction: column;
  }

  .recommend-header h2 {
    color: var(--c-text-1);
    line-height: 1.5;
    font-size: 21px;
  }

  .recommend-desc {
    font-size: 14px;
  }

  .recommend-desc2 {
    font-size: 14px;
  }

  .ranking-page-main .talkroom_banner_img_figure figcaption {
    font-size: 11px;
    margin-bottom: 5px;
  }

  .recommend-header-desc {
    font-size: 15px;
  }

  .recommend-header-desc.desc-bottom {
    margin-top: 8px;
    font-size: 16px;
    line-height: 2;
  }

  .ranking-desc .recommend-desc {
    font-size: 14px;
  }

  .list-title {
    margin-top: 1rem;
    font-size: 17px;
  }

  .list-aside .tag-list li {
    margin: 8px 0 0 4px;
  }

  .list-aside .tag-btn {
    font-size: 14px;
    font-weight: 500;
  }

  .more-text {
    font-size: 14px;
  }

  .close-btn {
    font-size: 14px;
  }
}

.list-title.oc-list a {
  all: unset;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.top-ranking .openchat-item::before {
  font-size: 13px;
  text-align: end;
  left: -27px;
}

@media screen and (min-width: 768px) {
  .recommend-header-desc.desc-bottom,
  .list-aside.recommend-ranking-bottom,
  .recommend-header-wrapper {
    zoom: 110%;
  }

  .recommend-ranking-section-header {
    margin: 8px 0;
    zoom: 110%;
  }
}

/* タグ固有の紹介リード。h1 を唯一の見出しとし、ここは「リード本文」として従属させる。 */
/* 旧版は __main を h1 と同等の太字18pxで出していたため、見出しが二重に並び、       */
/* タイトルとほぼ同義の文が大きく繰り返される=量産ページ的な見え方になっていた。     */
/* H1直下のサブタイトル(リストの説明)。カード(勢い)と競合しないよう、緑罫・箱を外した素のテキストにする。 */
.recommend-lead {
  display: block;
  margin: 5px 1rem 0;
  padding: 0;
  text-align: left;
}

.recommend-lead__main,
.recommend-lead__theme {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: var(--c-rg-text);
}

@media screen and (min-width: 512px) {
  .recommend-lead__main,
  .recommend-lead__theme {
    font-size: 14px;
  }
}

/* 継続チャンクの順位区切り。反復していた同一H2の置き換え(見出しではない控えめなラベル)。 */
.recommend-ranking-continue {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-rg-muted);
  padding: 2px 0 2px 2px;
}

/* テーマの勢い: LINE×オープンチャットのブランドロックアップ + ヒーロー(ランキング最高順位)。 */
/* サーバー側でインラインSVGを生成するため JS/Webフォント不要・高さ固定/img は width&height 明示で CLSなし。 */
/* 順位改善=緑(#06c755) / 悪化=赤橙(#e8553e) / 横ばい=灰(#9aa0a6)。数値は等幅で誠実に揃える。       */
.recommend-growth {
  --rg-color: var(--c-rg-muted);
  /* 方向色(ヒーロー方向クラスで上書き)。淡い色味も同時に持たせて装飾に使う。 */
  display: block;
  position: relative;
  margin: 12px 1rem 4px;
  padding: 11px 14px 11px;
  border: 1px solid var(--c-rg-border);
  border-radius: 14px;
  background: var(--c-bg);
  /* 白地に白で同化しないよう、極薄2枚のシャドウで唯一の"箱"として持ち上げる(主役化)。 */
  box-shadow: var(--c-rg-shadow);
  overflow: hidden;
  /* 統計の信頼感: 数字は等幅(tabular)で桁を揃える。 */
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}

/* ---- ブランドロックアップ(LINE × オープンチャット)+ 勢いラベル ---- */
.recommend-growth__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.recommend-growth__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.recommend-growth__brandmarks {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.recommend-growth__brandimg {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

/* 2つのアイコンをわずかに重ねて「LINE×オプチャ」のアプリ・ロックアップに見せる。 */
.recommend-growth__brandimg--oc {
  margin-left: -5px;
  box-shadow: -1px 0 0 0 var(--c-bg), 0 0 0 1.5px var(--c-bg);
}

.recommend-growth__brandtext {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-rg-text-strong);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* カードの主タイトル(これが何か)。出典(LINE オープンチャット)の下で最も目を引く要素にする。 */
.recommend-growth__title {
  margin: 0 0 1px;
  font-size: 16px;
  font-weight: 800;
  color: var(--c-rg-text-heading);
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* グラフが何を測っているかの小キャプション(タイトルの補足)。控えめにしてタイトルと競合させない。 */
.recommend-growth__metric {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-rg-text-soft);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* グラフを言語化した1行(誠実・簡潔)。色はカーブが担うのでここは読みやすい本文色。 */
.recommend-growth__line {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-rg-text-strong);
}

/* どの部屋の話か: 最高順位を持つ部屋への小さなリンク(サムネ+名前+順位+人数)。 */
.recommend-growth__leader {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  padding: 7px 9px;
  border: 1px solid var(--c-rg-line);
  border-radius: 11px;
  background: var(--c-rg-surface);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.recommend-growth__leader:hover {
  background: var(--c-rg-green-bg);
  border-color: var(--c-rg-green-border);
}

.recommend-growth__leader-img {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--c-rg-line);
}

.recommend-growth__leader-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.recommend-growth__leader-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-rg-text-strong);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommend-growth__leader-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-rg-text-mid);
  line-height: 1.3;
}

.recommend-growth__leader-arrow {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--rg-color, var(--c-rg-muted));
  line-height: 1;
  transition: transform 140ms ease;
}

/* ホバー可能端末でだけ、チップの矢印を1〜2pxだけ進めて"開ける"感を出す。 */
@media (hover: hover) {
  .recommend-growth__leader:hover .recommend-growth__leader-arrow {
    transform: translateX(2px);
  }
}

/* グラフの時間軸(開始日 → 今)。上罫線でx軸として明示し、いつからいつかを必ず分かるようにする。 */
.recommend-growth__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-rg-muted);
  letter-spacing: 0.02em;
}

/* 曲線(背景) + 大きな現在値(前景)を重ねて、同じ指標だと一目で分かるようにする。 */
.recommend-growth__heroplot {
  position: relative;
  min-height: 58px;
  margin-top: 4px;
}

.recommend-growth__svg {
  display: block;
  width: 100%;
  /* 高さ固定で CLS を防ぐ。 */
  height: 58px;
}

/* 終点ドットの絶対配置基準(=SVGと同じ箱。軸は含めない)。
   ロード時の演出は左→右の clip-path ワイプで線・塗り・終点ドットを一括表示する。
   stroke-dasharray 方式は preserveAspectRatio="none" + vector-effect="non-scaling-stroke" と
   相性が悪く(デスクトップで線が破線化して途切れて見える)ため使わない。 */
.recommend-growth__chart {
  position: relative;
  clip-path: inset(-8px 100% -8px -8px);
  animation: rg-wipe 820ms ease-out forwards;
}

@keyframes rg-wipe {
  to {
    clip-path: inset(-8px -8px -8px -8px);
  }
}

/* 現在値(=「今」)を指す終点ドット。preserveAspectRatio="none"で円が歪むためSVG内<circle>ではなくCSSで配置。
   left=lastX/width%, top=lastY/height% をインラインで受け取り、横引き伸ばしと自動一致。ワイプで終端に現れる。 */
.recommend-growth__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--rg-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-color) 20%, transparent);
  pointer-events: none;
}

/* 動きを抑える設定ではワイプせず即表示。 */
@media (prefers-reduced-motion: reduce) {
  .recommend-growth__chart {
    clip-path: none;
    animation: none;
  }
}

/* デスクトップ: zoom ではなくパディング/余白を素直に広げて精度を保つ。 */
@media screen and (min-width: 768px) {
  .recommend-growth {
    padding: 14px 18px 14px;
    border-radius: 16px;
  }

  .recommend-growth__metric {
    font-size: 15px;
  }

  .recommend-growth__heroplot {
    min-height: 64px;
  }

  .recommend-growth__svg {
    height: 64px;
  }

  

  

}