html {
  overflow-y: scroll;
  /* 常に垂直スクロールバーを表示 */
}

.pc-hr {
  display: none;
}

.openchat {
  display: block;
  padding-bottom: 0;
  font-family: var(--font-family);
  max-width: 812px;
}

.openchat-header {
  display: flex;
  padding: 1rem;
  padding-top: 0;
}

.openchat-graph-section {
  padding: 1rem;
}

/* オプチャグラフの分析 (narrative) section
 * 既存 description / graph-title トーンに合わせつつ、
 * 左の細いアクセントラインで「分析セクション」であることを示す。
 */
.oc-narrative {
  padding: 12px 1rem 14px 1rem;
  font-family: var(--font-family);
  color: var(--c-text-1);
}

.oc-narrative__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-1);
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}

.oc-narrative__title-icon {
  font-size: 14px;
  user-select: none;
  line-height: 1;
}

.oc-narrative__summary {
  margin: 0;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-body);
  background-color: var(--c-bg-sub);
  border-left: 3px solid var(--c-brand-2);
  border-radius: 0 6px 6px 0;
  font-weight: 500;
  word-break: break-word;
}

.oc-narrative__detail {
  margin: 10px 0 0 0;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-text-soft);
  word-break: break-word;
}

@media screen and (min-width: 512px) {
  .oc-narrative {
    padding: 14px 1rem 16px 1rem;
  }

  .oc-narrative__title {
    font-size: 1rem;
    margin-bottom: 10px;
  }

  .oc-narrative__title-icon {
    font-size: 15px;
  }

  .oc-narrative__summary {
    font-size: 14px;
    padding: 10px 12px;
  }

  .oc-narrative__detail {
    font-size: 14px;
    line-height: 1.8;
  }
}

.open-btn.sp-btn {
  margin: 0;
  white-space: nowrap;
  display: flex;
  /* スマホ幅: ボタンを行いっぱい(全幅)に。PCでは下の @media で右寄せに戻す */
  justify-content: stretch;
}

.comment-section {
  padding: 1rem;
}

.comment-section .share-nav {
  padding-bottom: 0;
}

.recommend-list-aside {
  padding: 0 1rem;
}

.recommend-list-aside:has(.top-ranking.not-rank) {
  padding: 0;
}

.recommend-list-aside:has(.top-ranking.not-rank) .top-ranking.not-rank {
  padding: 0.5rem 1rem;
}

.oc-page-footer {
  padding: 1rem;
}

.openchat .graph-title {
  font-weight: bold;
  font-size: 16px;
  color: var(--c-text-1);
  margin: 0;
}

.talkroom_description_box.close br {
  display: none;
}

.oc-desc-nav {
  display: flex;
  flex-direction: column;        /* スマホ幅: カテゴリ/タグの下に「LINEで開く」を独立行(全幅)で落とし、長いタグとの重なりを解消 */
  justify-content: space-between;
  gap: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--c-border);
}

/* スマホ幅: カテゴリ/タグ ブロックとボタンの間に細い区切り線を入れ、
   2つの役割(回遊チップ / 主アクション)を視覚的に分離。上下に均等な余白。 */
.oc-desc-nav .oc-desc-nav-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}

@media screen and (min-width: 512px) {
  .oc-desc-nav {
    display: flex;
    flex-direction: row;         /* PC: カテゴリ/タグとボタンを横並び(現状維持) */
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--c-border);
  }

  /* PC: 区切り線/上余白は解除。width:100%(基底)を維持して aside(min-width:50%) と分け合い、
     ボタンは下の max-width:250px で頭打ち＋右寄せ＝元のPCレイアウトに復元。
     長いタグがボタン下に潜り込まないよう、チップ側を max-width で頭打ちにし省略(…)で truncate(下の .oc-nav-chip)。 */
  .oc-desc-nav .oc-desc-nav-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .oc-desc-nav .open-btn.sp-btn {
    justify-content: flex-end;
  }

  /* PC: 長いタグ/カテゴリのチップはボタンへ被らないよう一定幅で省略(…)する。
     チップ自身に max-width を効かせるので grid 列(max-content)もここで頭打ちになる。
     ellipsis を効かせるため inline-block に切替(inline-flex 直下のテキストでは … が出ない)。
     単一行テキストなので line-height + padding で縦中央は崩れない。 */
  .oc-desc-nav .oc-nav-chip {
    display: inline-block;
    max-width: 220px;
  }
}

.openchat-header a {
  cursor: pointer;
}

/* メインエリア */
/* オープンチャットヘッダー*/

.talkroom_banner_img_area {
  min-width: 30.44316%;
  max-width: 30.44316%;
  display: flex;
  flex-direction: column;
}

.talkroom_banner_img {
  object-fit: cover;
  display: flex;
  border-radius: 7px;
  aspect-ratio: 1;
  width: 100%;
}

.openchat-header-right {
  margin-left: 2.89017%;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.1px;
  gap: 4px;
  width: 100%;
}

.h1-link {
  all: unset;
  display: flex;
  flex-direction: column;
  font-weight: 700;
}

/* オープンチャットのタイトル*/
.talkroom_link_h1 {
  line-height: 125%;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--c-text-1);
  display: block;
  white-space: break-spaces;
  word-break: break-all;
}

.link-mark {
  display: flex;
  align-items: center;
}

.link-mark .line-link-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.link-mark .link-title {
  font-size: 11px;
  display: block;
  width: fit-content;
  background: -webkit-linear-gradient(
    98deg,
    var(--grad-green-1),
    var(--grad-green-2) 23.96%,
    var(--grad-green-3) 55.46%,
    var(--grad-green-4) 83.85%,
    var(--grad-green-5)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-text-taupe);
}

#read_more_btn {
  line-height: 130%;
}

/* メンバー数 */
.talkroom_number_of_members {
  color: var(--c-text-4);
}

.number_of_members {
  display: block;
  color: var(--c-text-stat);
  font-weight: bold;
  font-size: 13px;
}

.openchat-itme-stats-title {
  margin-right: 2px;
}

.openchat-item-stats.percent {
  margin-left: 1px;
}

/* オープンチャットの詳細エリア */
.talkroom_description_box {
  font-size: 13px;
  margin-top: 3px;
  margin-bottom: 1px;
  position: relative;
  background-color: var(--c-bg);
}

.talkroom_description_box .more {
  display: none;
  line-height: 125%;
}

.talkroom_description_box.close .more {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  visibility: hidden;
  color: var(--c-text-4);
}

.more-text {
  background-color: var(--c-bg);
}

.talkroom_description_box .more-separater {
  width: 4rem;
  background-image: var(--c-fade-right-2);
}

/* オープンチャットの説明 */
.talkroom_description {
  margin: 0;
  line-height: 130%;
  color: var(--c-text-body);
  text-align: center;
}

#talkroom-description-btn {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

.talkroom_description_box.close #talkroom-description-btn {
  white-space: unset;
}

.talkroom_description_box.close {
  cursor: pointer;
  user-select: none;
}

.talkroom_description_box .close-btn {
  margin-left: auto;
  display: block;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  background: inherit;
  color: var(--c-text-1);
  border: 0;
}

.talkroom_description_box.close .close-btn {
  display: none;
}

.talkroom_description_box.close .talkroom_description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

.talkroom_description_box.close.hidden {
  cursor: unset;
  user-select: unset;
}

/* ボトムエリア */
.openchat-bottom {
  display: flex;
  justify-content: space-evenly;
}

.openchat-list-date {
  display: flex;
  flex-direction: row;
  color: var(--c-text-3);
  font-size: 13px;
  align-items: flex-start;
  gap: 4px;
}

.openchat-list-date.inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.refresh-icon {
  height: 12px;
  aspect-ratio: 1/1;
  background-image: var(--icon-refresh);
}

.openchat-list-date time {
  display: inline-block;
}

.talkroom_number_of_stats {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: fit-content;
  align-items: flex-start;
  margin-top: 2px;
}

.number-box {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--c-text-3);
}

.number-box .openchat-itme-stats-title {
  font-size: 13px;
  word-break: keep-all;
  text-wrap: nowrap;
  color: var(--c-text-3);
}

.number-box.created-at {
  line-height: 1.5;
  margin-left: auto;
  text-wrap: nowrap;
  flex-wrap: nowrap;
}

.number-box.created-at .openchat-itme-stats-title {
  color: var(--c-text-3);
  font-size: 12px;
  margin: 0;
}

.number-box.created-at.registed .openchat-itme-stats-title {
  font-size: 12px;
  color: var(--c-text-3);
}

.number-box.bold {
  font-weight: bold;
}

.number-box.weekly.negative .openchat-item-stats,
.negative .openchat-item-stats {
  font-weight: normal;
}

.my-list-form {
  all: unset;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  margin-top: 6px;
  width: 100%;
}

.my-list-form .checkbox-label {
  height: fit-content;
  border-radius: 7px;
  word-break: keep-all;
  color: var(--c-text-1);
  line-height: normal;
  font-weight: bold;
}

.open-btn.pc-btn {
  display: none;
}

.openchat_link {
  background: linear-gradient(
    -156deg,
    var(--grad-green-1),
    var(--grad-green-2) 23.96%,
    var(--grad-green-3) 55.46%,
    var(--grad-green-4) 83.85%,
    var(--grad-green-5)
  );
  border-radius: 99px;           /* 角の丸さをタグチップ(pill)と揃える */
  box-sizing: border-box;
  color: var(--c-text-inverse);
  font-weight: 700;
  /* height: 24px; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none;
  width: 100%;                   /* スマホ幅: 行いっぱい(全幅)。PCは下で max-width を付与 */
  height: 51px;
  line-height: 1;
  gap: 6px;
  flex-direction: column;
}

@media screen and (min-width: 512px) {
  .openchat_link {
    max-width: 250px;            /* PC: 適度な幅に抑える */
  }
}

.openchat_link .text {
  line-height: 1;
}

.number-box .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: 0px 0px 1px 0px;
}

.title-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 6px;
}

.title-bar-oc-name-wrapper {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.title-bar-oc-name {
  font-size: 11px;
  color: var(--c-text-3);
  font-weight: normal;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  word-break: break-all;
}

.title-bar-oc-member {
  font-size: 11px;
  color: var(--c-text-3);
  font-weight: normal;
  line-height: 1.3;
  text-wrap: nowrap;
}

.title-bar-oc-name .super-icon.sp {
  scale: 0.6;
  margin: -5px -2px 0px -4px;
}

.title-bar-oc-name .super-icon.official {
  scale: 0.6;
  margin: -4px -2px 0px -4px;
}

.openchat-item-title-img {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  display: block;
  margin: auto 0;
  margin-right: 2px;
}

@media screen and (max-width: 359px) {
  .talkroom_number_of_stats {
    margin-right: -0.5rem;
  }

  .openchat-bottom {
    justify-content: space-between;
  }

  .openchat .graph-title {
    font-size: 14px;
  }

  .my-list-form .checkbox-label {
    font-size: 11px;
    margin-right: 0px;
    text-wrap: unset;
  }

  .number-box.created-at {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (min-width: 512px) {
  .openchat-header {
    padding-top: 1rem;
  }

  .openchat-graph-section {
    padding-top: 25px;
  }

  .title-bar-oc-name {
    font-size: 13px;
  }

  .number-box.created-at {
    margin-left: auto;
    color: var(--c-text-3);
  }

  .number-box.created-at .openchat-itme-stats-title {
    font-size: 13px;
    color: var(--c-text-3);
  }

  .number-box.created-at.registed .openchat-itme-stats-title {
    font-size: 13px;
    color: var(--c-text-3);
  }

  .number-box .openchat-itme-stats-title {
    font-size: 14px;
    word-break: keep-all;
    text-wrap: nowrap;
  }

  .openchat-item-title-img {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .first-recommend {
    margin: 2rem 0;
  }

  .link-mark .link-title {
    font-size: 12px;
  }

  .talkroom_link_h1 {
    font-size: 21px;
    line-height: 125%;
  }

  .h1-link:hover .talkroom_link_h1 {
    -webkit-text-decoration: underline 2px currentColor;
    text-decoration: underline 2px currentColor;
  }

  .talkroom_description_box.close:not(.hidden):hover {
    background-color: var(--c-bg-sub);
  }

  .link-mark .line-link-icon777 {
    width: 16px;
    height: 16px;
  }

  .number-box.bold {
    font-weight: normal;
    color: var(--c-text-3);
  }

  .openchat-header,
  .talkroom_description_box {
    font-size: 13px;
    letter-spacing: -0.1px;
  }

  .openchat-header {
    padding: 1rem;
  }

  .openchat-item-stats {
    font-size: 14px;
  }

  .number_of_members {
    font-size: 14px;
  }

  .openchat-item-stats.percent {
    margin-left: 1px;
    font-size: 14px;
  }

  .openchat-list-date {
    font-size: 13px;
  }

  .openchat .graph-title {
    font-size: 1rem;
  }

  .title-bar {
    margin-bottom: 1rem;
  }

  .title-bar-oc-name .super-icon.official {
    scale: 0.7;
    margin: -1px -2px 0px -4px;
  }

  .talkroom_description_box .more,
  .talkroom_description {
    font-size: 14px;
  }

  .talkroom_description_box {
    margin-top: 4px;
    margin-bottom: 1px;
  }

  .openchat-header-right {
    gap: 4px;
  }

  .pc-hr {
    display: block;
  }

  .openchat .footer {
    justify-content: center;
    gap: 2rem;
  }

  .talkroom_number_of_members,
  .openchat-itme-stats-title,
  .talkroom_number_of_stats {
    font-size: 14px;
  }

  summary:hover {
    -webkit-text-decoration: underline 2px currentColor;
    text-decoration: underline 2px currentColor;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}

#comment-root .MuiPaper-outlined.MuiPaper-rounded {
  border: 1px solid var(--c-border);
}

#comment-root .comment-term-text-color {
  color: var(--c-text-5);
}

.list-aside {
  all: unset;
  display: block;
  padding: 0 1rem;
}

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

.list-aside summary h3 {
  all: unset;
}

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

.list-aside .summary-p {
  margin: 0.75rem 0;
  padding: 0;
  width: 100%;
  margin-top: 6px;
  padding-left: 0.5rem;
  font-size: 13px;
  color: var(--c-text-3);
  line-height: 1.8;
}

.list-aside ol {
  padding-left: 1rem;
}

.comment-aside {
  margin-top: 0.2rem;
  padding: 0;
}

.MuiToggleButton-sizeSmall.MuiToggleButton-standard {
  border-radius: 7px;
}

.MuiTypography-root.MuiTypography-h3 {
  font-size: 16px;
  color: var(--c-text-1);
  font-family: var(--font-family);
}

@media screen and (min-width: 768px) {
  .title-bar .number-box,
  .openchat-header,
  .graph-title,
  nav,
  #comment-root,
  .footer-link-box-outer,
  .title-bar-oc-name-wrapper {
    zoom: 110%;
  }

  .talkroom_description_box.close #talkroom-description-btn {
    white-space: pre-wrap;
  }

  .talkroom_description_box.close .talkroom_description {
    -webkit-line-clamp: 5;
    line-clamp: 5;
    text-align: center;
    text-align: left;
    line-height: 1.5;
  }

  .talkroom_description {
    text-align: left;
    line-height: 1.5;
  }
}

/* ---------- /oc ナビチップ（oc_content.php の埋め込み<style>から移設）
     カテゴリ・タグを「押せる」チップ化（回遊強化）。タグ=緑→/recommend、カテゴリ=中立→/ranking。 ---------- */

.oc-nav-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 14px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.12s,
    border-color 0.12s,
    transform 0.08s;
}

.oc-nav-chip:active {
  transform: scale(0.97);
}

.oc-nav-chip--category {
  background: var(--c-chip-cat-bg);
  color: var(--c-cool-text-strong);
  border-color: var(--c-border-2);
}

.oc-nav-chip--category:hover {
  background: var(--c-chip-cat-bg-hover);
}

.oc-nav-chip--tag {
  background: var(--c-chip-hot-bg);
  color: var(--c-chip-hot-text);
  border-color: var(--c-chip-hot-border);
}

.oc-nav-chip--tag:hover {
  background: var(--c-chip-hot-bg-hover);
  border-color: var(--c-chip-hot-border-hover);
}

/* チップ前置きラベル(カテゴリー/タグ)。チップを主役にし、ラベルは小さく控えめなグレーで補助。
   「ラベル+チップ」を1ユニット(.oc-nav-pair)としてグルーピングし、左揃え・横並び→入らなければ
   ユニット単位で改行(各チップが自分のラベルを連れて折り返すので列ズレが出ない)。 */
.oc-nav-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
  width: 100%;
}

.oc-nav-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.oc-nav-pair__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-cool-text-weak);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}