.r18-card-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.r18-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.r18-card-info {
  text-align: center;
  padding: 5px 0;
}

.r18-card-stats {
  position: absolute;
  bottom: 40px;
  right: 10px;
  font-size: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}




.r18-card {
  display: flex;
  flex-direction: column;
  align-items: center;

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  overflow: hidden;
  position: relative;
  padding: 10px;
}





.affiliate-card {
  border: 1px solid #ccc;
  padding: 8px;
  max-width: 200px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 10px auto;
}

.affiliate-thumb {
  width: 100%;
  border-radius: 4px;
  border: 2px solid #e97ea1;
}

.affiliate-link-text {
  margin-top: 8px;
  font-weight: bold;
  color: #a030a0;
  text-decoration: none;
}








/* =====================================
   CARD BASE
===================================== */

.type-container .work-card,
.type-container .card {
  --card-gap: 12px;
  --card-pad: 14px;

  padding: var(--card-pad);
  border-radius: 14px;
  gap: var(--card-gap);
  line-height: 1.5;

  background: var(--card-bg, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}


/* =====================================
   MEDIA（画像比率統一）
===================================== */

.type-container .work-card :is(.thumb,.media,figure),
.type-container .card      :is(.thumb,.media,figure){
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3 / 4;
}

.type-container .work-card :is(.thumb,.media,figure) img,
.type-container .card      :is(.thumb,.media,figure) img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =====================================
   TITLE（2行省略）
===================================== */

.type-container .work-card .title,
.type-container .card .title{
  font-size: 16px;
  line-height: 1.4;
  margin: 4px 0 6px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;

  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}


/* =====================================
   META / TAGS
===================================== */

.type-container .work-card :is(.meta,.tags),
.type-container .card      :is(.meta,.tags){
  font-size: 13px;
  line-height: 1.5;
  gap: 6px;
}


/* =====================================
   STATS（👁❤️📎）
===================================== */

.type-container .work-card .stats,
.type-container .card .stats{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}


/* =====================================
   ACTIONS / BUTTON ROW
===================================== */

.type-container .work-card :is(.actions,.btn-row),
.type-container .card      :is(.actions,.btn-row){
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.type-container .work-card button,
.type-container .card button{
  min-height: 44px;
  padding: 8px 12px;
}

/* スマホ：縦積み */
@media (max-width:480px){
  .type-container .work-card button,
  .type-container .card button{
    flex: 1 1 100%;
  }
}


/* =====================================
   SAFETY（はみ出し防止）
===================================== */

.type-container img,
.type-container iframe,
.type-container video{
  max-width: 100%;
  height: auto;
}









/* 🔧 開発用メモ：対応JS → card-tab-slider-score.js ／ 対応HTML → カード内「⭐分布」タブ
   🔧 概要：100点スライダーの分布バー表示 */

.slider-score-wrapper{
  padding: 8px 10px 10px;
  font-size: 13px;
}
.slider-score-header{
  margin-bottom: 6px;
  font-weight: 700;
  color: #4b4b69;
}
.slider-score-row{
  display: grid;
  grid-template-columns: 70px 1fr 32px;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}
.slider-score-label{
  font-variant-numeric: tabular-nums;
  color: #4b4b69;
}
.slider-score-bar-wrap{
  position: relative;
  height: 12px;
  border-radius: 999px;
  background:#F7FCFF;
  overflow: hidden;
}
.slider-score-bar{
  height:100%;
  border-radius:999px;
  background:#E97EA1;
}
.slider-score-count{
  text-align:right;
  font-variant-numeric: tabular-nums;
}





/* 🔧 スライダースコア分布（distタブ） */

.cmx-slider-dist {
  padding: 8px 10px 10px;
}

.cmx-slider-dist-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #4B4B69 !important;  /* インクブルー */
  text-align: center;
}

.cmx-slider-dist-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmx-slider-dist-row {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center;
  column-gap: 6px;
  font-size: 12px;
}

.cmx-slider-dist-label {
  white-space: nowrap;
}

.cmx-slider-dist-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #f3f4f6;
  overflow: hidden;
}

.cmx-slider-dist-bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #e97ea1;      /* ← あとで好きな色に */
  transition: width .25s ease-out;
}

.cmx-slider-dist-count {
  text-align: right;
  white-space: nowrap;
}




/* =========================================================
   スライダースコア分布（右タブ） → ジャンル別スコアと統一デザイン
   ========================================================= */

/* 行の高さ・文字揃え */
.cmx-slider-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  font-size: 15px;
  color: #4B4B69;
}

/* 左側の「10〜19点」などのラベル */
.cmx-slider-label {
  width: 90px;
  text-align: left;
}

/* 棒グラフ（左のジャンル別スコアと完全一致） */
.cmx-slider-bar {
  flex: 1;
  height: 16px;
  margin: 0 10px;
  background-color: #F7FCFF;      /* 薄い水色（サイト基調） */
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* 棒グラフの中の進捗部分 */
.cmx-slider-bar-fill {
  height: 100%;
  background-color: #E97EA1;      /* ピンク（サイト基調） */
  border-radius: 10px;
}

/* 右側の人数 */
.cmx-slider-count {
  width: 40px;
  text-align: right;
  color: #4B4B69;
  font-weight: 500;
}





/* ▼ ジャンル別スコアの 1 行全体 */
.detail-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
  font-size: 14px;
}

/* 左ラベル */
.cmx-detail-score-label {
  flex: 0 0 90px;
  text-align: left;
  font-size: 15px;
}

/* バー外枠 */
.cmx-detail-score-bar {
  flex: 1;
  height: 8px;
  margin: 0 8px;
  background: #E6EEF7;
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}

/* バー中身 */
.cmx-detail-score-bar-inner {
  height: 100%;
  background: #E97EA1;
  border-radius: 999px;
}

/* 右の点数 */
.cmx-detail-score-value {
  flex: 0 0 40px;
  text-align: right;
  font-size: 15px;
}







/* ラベル文字 */
.cmx-viewcheck-label {
  font-size: 14px;
  color: #555;
}




.cmx-viewcheck {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}


.cmx-viewcheck-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #E97EA1;
  background: #fff;
  box-sizing: border-box;
}



/* チェックマーク */
.cmx-viewcheck-input:checked + .cmx-viewcheck-box {
  background: #E97EA1;
  border-color: #E97EA1;
}

.cmx-viewcheck-input:checked + .cmx-viewcheck-box::after {
  content: "✓";
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-30%, -50%);
}





/* ★ チェック枠の位置と中央揃え */
.cmx-viewcheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;      /* 大きさはあなたの今の見た目に合わせてある */
  height: 32px;
  border-radius: 8px;
}

/* ★ ボックス内の ✓ を中央に配置 */
.cmx-viewcheck-box {
    width: 16px;
    height: 16px;
  border: 2px solid #E97EA1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

/* チェック済みのとき */
.cmx-viewcheck-input:checked + .cmx-viewcheck-box {
  background: #E97EA1;
  color: white;
  content: "✓";
}









/* 背景（黒ではなく半透明） */
.detail-score-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.detail-score-modal.hidden {
  display: none;
}






.score100-dist-wrapper {
  margin-top: 4px;
  padding: 6px 4px;
}

.score100-dist-row {
  display: flex;
  align-items: center;
  margin: 6px 0;
  font-size: 14px;
}

.score100-dist-label {
  width: 70px;
  color: #4B4B69;
}

.score100-dist-bar {
  flex: 1;
  height: 6px;
  background: #F7FCFF;
  margin: 0 8px;
  border-radius: 4px;
  overflow: hidden;
}

.score100-dist-inner {
  height: 100%;
  background: #F7A7C9;
  border-radius: 4px;
}

.score100-dist-count {
  width: 28px;
  text-align: right;
  color: #4B4B69;
}






/* モーダルの１行を左右そろえて１行で収める */
.detail-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ← これで右端の点数が横並びに */
  gap: 8px;
}

/* 左のラベル */
.cmx-detail-score-label {
  flex: 0 0 90px;   /* ← 固定幅で揃える */
  white-space: nowrap;
}

/* 真ん中のバー */
.cmx-detail-score-bar {
  flex: 1;
  height: 10px;
  margin: 0 8px;
  background: #F7FCFF;
  border-radius: 999px;
  min-width: 40px; /* ← 幅が小さい時の崩れ防止 */
}

/* ピンクの中身 */
.cmx-detail-score-bar-inner {
  height: 100%;
  background: #E97EA1;
  border-radius: 999px;
}

/* 右側の点数 */
.cmx-detail-score-value {
  flex: 0 0 40px;
  white-space: nowrap;
  text-align: right;
}

/* ジャンル別スコア：タイトルをインクブルーに変更 */
.detail-score-modal-content h2,
.detail-score-modal-content h3 {
  color: #4B4B69 !important;  /* インクブルー */
}
/* ジャンル別スコア：ラベル＆点数もインクブルーに統一 */
.detail-score-row,
.cmx-detail-score-label,
.cmx-detail-score-value,
.cmx-detail-score__label,
.cmx-detail-score__value {
  color: #4B4B69;
}






.stat-item.like-button.is-on {
  color: #E97EA1;
}




.r18-card-source {
  pointer-events: auto;
}


.cm-maker-link{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;     /* 折り返し禁止 */
  overflow: hidden;        /* はみ出し隠す */
  text-overflow: ellipsis; /* …で省略 */
  vertical-align: bottom;
}


.r18-card-maker{
  overflow: hidden;
}


/* メーカー行：1行固定＋中央寄せ */
.r18-card-maker {
  display: flex;
  align-items: center;
  justify-content: center; /* 行を中央寄せ */
  gap: 6px;

  font-size: 12px;
  color: #666;
  margin-top: 2px;

  text-align: center;
}

/* メーカー名（リンク群）側 */
.r18-card-maker .cm-maker-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* メーカー名をまとめているラッパ（無ければ a に適用） */
.r18-card-maker > span,
.r18-card-maker > a {
flex: 0 1 auto;   /* ← 伸びて右に押し出さない */
  min-width: 0; /* ← これが重要 */
  max-width:70%; 
}


/* ===============================
   カード共通（genre-item）
=============================== */
.genre-item {
  position: relative;
  display: inline-block;
  width: 200px;
  margin: 10px auto 50px;
  padding: 12px;
  text-align: center;
  font-family: 'Zen Maru Gothic', sans-serif;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.3s;
}

.genre-item:hover {
  transform: translateY(-4px);
}

/* テキスト類 */
.genre-item p {
  margin: 4px 0;
  font-size: 14px;
  color: #333;
}

.genre-item .title {
  font-weight: bold;
  font-size: 16px;
  color: #444;
}

.genre-item .rating {
  margin-top: 5px;
  font-size: 14px;
  color: #ffcc00;
}

.creator {
  font-size: 12px;
  color: #555;
}

.actress {
  font-size: 12px;
  color: #E97EA1;
}

/* ===============================
   画像まわり
=============================== */
.image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.image-slider {
  display: flex;
  transition: transform 0.3s ease;
}

.image-slider img {
  width: 100%;
  height: auto;
  display: none;
}

.image-slider img:first-child {
  display: block;
}

.genre-link {
  position: relative;
  z-index: 1;
}












/* ===============================
   CARD：トグルボタン選択状態
=============================== */

/* 共通（選択時） */
.toggle-preference.selected{
  border-radius: 6px;
  padding: 4px 6px;
  font-weight: bold;
  transition: all 0.2s ease;
}

/* ❤️ 良かった（like） */
.toggle-preference[data-type="like"].selected{
  background-color: #ffe0e9;
  color: #d81b60;
}

/* 🔁 今は観ない（notnow） */
.toggle-preference[data-type="notnow"].selected{
  background-color: #ede7f6;
  color: #5e35b1;
}









.r18-card-cast {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}





.type-heading.visible {
  display: block;
}

.type-container {
  display: none;
}








/* ✅ 女優名を1行省略・ホバー時に全体表示にぇ */
.r18-card-actress {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  transition: all 0.2s ease-in-out;
}

.r18-card-actress:hover {
  white-space: normal;
  overflow: visible;
  background: #fff;
  z-index: 10;
  position: relative;
  padding: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}










.type-heading.visible {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin: 1.5em 0 0.5em;
  padding: 0.4em 0.8em;
  border-left: 5px solid #E97EA1; /* ピンク見出しライン */
  background: #fff0f5; /* 薄ピンク背景 */
  border-radius: 12px;
  color: #333;
  box-shadow: 0 0 5px rgba(233, 126, 161, 0.3);
  transition: all 0.2s ease;
}





/* 🐭 マウスオーバー時に展開するにぇ〜！ */
.r18-card-character:hover {
  max-height: 100px; /* 実質制限解除 */
  white-space: normal;
}




/* ===============================
   カード：タイトル表示（WebKit依存なし）
=============================== */

/* 2行固定（line-clamp不使用） */
.r18-card-title{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #4B4B69;
  text-decoration: none;

  /* 2行分の高さで切る（14px * 1.4 * 2 = 39.2px） */
  max-height: 2.8em;
  overflow: hidden;

  position: relative;
  background: #fff;
}

/* リンク下線なし＋色統一 */
.r18-card-title a{
  color: #4B4B69;
  text-decoration: none;
}

/* ホバーで全文（折り返し表示） */
.r18-card-title:hover{
  max-height: none;
  overflow: visible;
  z-index: 10;
  box-shadow: 0 0 8px rgba(0,0,0,0.08);
}




.link-icons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
}

.link-icon {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  transition: background 0.3s;
}

.link-icon:hover {
  background: rgba(0, 0, 0, 0.9);
}







/* ===============================
   アフィリエイトバー（横長の楕円）
=============================== */
.r18-link-icons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;

  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 999px;

  box-sizing: border-box;
}

/* ===============================
   アイコン本体
=============================== */
.r18-link-icon{
  width: 32px;
  height: 32px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;

  cursor: pointer;
  position: relative;

  transition: transform 0.2s, box-shadow 0.2s;
}

.r18-link-icon:hover{
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}

/* ===============================
   ツールチップ（重要）
=============================== */
.r18-link-icon::after{
  content: attr(data-title);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);

  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;

  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;

  opacity: 0;
  transition: opacity 0.2s;
}

.r18-link-icon:hover::after{
  opacity: 1;
}

/* ===============================
   サービス別カラー
=============================== */
.r18-link-icon.dmm      { background-color: #E9A1D2; }
.r18-link-icon.unext    { background-color: #A8D9FF; }
.r18-link-icon.fanza    { background-color: #FFB3B3; }
.r18-link-icon.fantia   { background-color: #FFC0CB; }
.r18-link-icon.fc2      { background-color: #FFC107; }
.r18-link-icon.dlgetchu { background-color: #FF69B4; }












/* ▼ カード本体：タブの位置基準になる */
.cmx-card {
  position: relative;
}

/* ▼ カード上タブ（詳細 / 分布） */
.cmx-card-toptabs {
  position: absolute;
  top: -14px;          /* ← サムネの上に生やす距離 */
  left: 12px;          /* ← カード左側からの距離 */
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;   /* ← 折り返し禁止 */
  z-index: 5;
}

/* ▼ タブのボタン共通 */
.cmx-card-toptab {
  white-space: nowrap;
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;     /* ベース ※クラスで色上書き */
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
}

/* ▼ アクティブ状態 */
.cmx-card-toptab--active {
  border-color: #D3EFFF;
  box-shadow: 0 0 0 1px #D3EFFF;
  font-weight: 600;
}

/* ▼ 色バリエーション（Coco さん指定） */
.cmx-card-toptab--top {
  background: #F7FCFF; /* TOP（今は未使用） */
}



.cmx-card-toptab--dist {
  background: #FFE5BA; /* 分布 */
}

/* ▼ タブとサムネの間のスペース（AFTERぽいやつ） */
.cmx-card-topspace {
  height: 20px; /* 好きに調整してOK（12〜24推奨） */
}

/* ▼ スマホ縮小対応（764px以下） */
/* ▼ スマホ縮小対応（764px以下） */
@media (max-width: 764px) {
  .cmx-card-toptabs {
    left: 8px;      /* ちょっと内側に寄せる（お好みで） */
    gap: 6px;
  }

  .cmx-card-toptab {
    font-size: 11px;   /* 文字小さめ */
    padding: 1px 6px;  /* 上下の余白をギュッと減らす → 楕円が細くなる */
    line-height: 1.1;  /* 高さが伸びないように */
  }
}



/* ▼ 764px以下のときだけ、タブの縦位置＆間隔を調整 */
@media (max-width: 764px) {
  .cmx-card-toptabs {
    top: -20px;        /* サムネに少し近づける（お好みで -8〜0 に調整） */
  }
  .cmx-card-topspace {
    height: 19px;     /* サムネとの間の余白を少し減らす */
  }
}








/* ===============================
   ステータス共通
=============================== */
.stats,
.stats-row {
  font-size: 14px;
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* フローティング版 */
.stats {
  position: absolute;
  bottom: 5px;
  right: 5px;
  padding: 4px 8px;
  justify-content: end;
}

/* 行レイアウト（基本） */
.stats-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  margin-top: 8px;
  border-bottom: 1px solid #ddd;
}


/* cmx-card 内だけの微調整 */
.cmx-card .stats-row {
  padding: 6px 8px;
  min-height: 28px;   /* 押しつぶし防止 */
  visibility: visible !important;
}



.stat-text {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  background: #d3f4ff;
  color: #007bff;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  font-weight: bold;
  font-family: 'Zen Maru Gothic', sans-serif;
}



.stat-item:hover .stat-text {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}







/* ===== 最終オーバーライド：タグ2列固定＋編集は3行目右列 ===== */
/* flex!important が下にあっても勝てるように、詳細度を上げて !important で上書きするにぇ */
:root body .cmx-card.cmx-card .r18-card-tags.r18-card-tags{
  display: grid !important;               /* ← これが肝心（flex!important を潰す） */
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  align-items: start;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* タグのチップは1行保持（折返しで段ズレしないように） */
:root body .cmx-card .r18-card-tags > .cmx-tag{
  white-space: nowrap;
  width: max-content;
}

/* ＋編集を「3行目・右列」に常に固定（= 5位の右側） */
:root body .cmx-card .r18-card-tags > a.cmx-tag.tag-edit{
  grid-column: 2 !important;              /* 右列 */
  grid-row: 3 !important;                 /* 3行目固定 */
  justify-self: end;                      /* 右寄せ */
  margin-left: 0 !important;              /* 旧flex右寄せの名残を無効化 */
}






/* 🔧 カード下タグ：2列グリッド化（1位 2位 / 3位 （空）4位 / 5位 ＋編集） */
.cmx-card .r18-card-tags{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右2列 */
  gap: 6px 10px;
  align-items: start;
}
.cmx-card .r18-card-tags .cmx-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;background:#F7F8FF;
  line-height:1.8;text-decoration:none;
  white-space: nowrap; width: max-content;
}
/* ＋編集は常に 3行目・右列（= 5位の右側） */
.cmx-card .r18-card-tags a.cmx-tag.tag-edit{
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  margin-left: 0; /* 以前のflex右寄せを打ち消し */
  border:1px dashed #E97EA1;opacity:.85;
}
.cmx-card .r18-card-tags a.cmx-tag.tag-edit:hover{opacity:1}
@media (max-width:480px){.cmx-card .r18-card-tags{gap:4px}}




.btn-tag-delete:disabled{ opacity:.4; cursor:not-allowed; }




/* 🔧 開発用メモ：対応HTML → top.html ／ 対応JS → tags-init-top-50-800-6.js 13001 */
/* タグ編集モーダル・オーバーレイ */
#tag-edit-modal {
  position: fixed;          /* 画面全体を覆う */
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; と同義 */
  display: none;            /* 初期は非表示 */
  background: rgba(0,0,0,.45);  /* 半透明の背景 */
  z-index: 9999;            /* ほぼ最前面に */
}

/* JS側：showModalEl() で .is-open を付与／aria-hidden を外す */
#tag-edit-modal.is-open,
#tag-edit-modal[aria-hidden="false"] {
  display: block;
}

/* コンテンツ本体（中央寄せの白い箱） */
#tag-edit-modal .modal-content {
  position: relative;
  max-width: 760px;
  width: min(96vw, 760px);
  margin: 6vh auto;         /* 画面中央寄せ */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 16px;
}

/* 閉じるボタンの配置 */
#tag-edit-modal .tag-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
}

/* 背景スクロール抑止 */
body.scroll-lock {
  overflow: hidden;
}





/* ===============================
   🎚 スコアスライダー配色リセット
   （ 基準色）
================================ */

/* track（溝） */
.cmx-card .cmx-row--slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* Chrome / Edge / Safari */
.cmx-card .cmx-row--slider input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: var(--track); /* #E6EEF7 */
}

/* thumb（つまみ） */
.cmx-card .cmx-row--slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px; /* track中央に合わせる */

  width: 20px;
  height: 20px;
  border-radius: 50%;

  background: var(--thumb); /* #0B70FF */
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Firefox */
.cmx-card .cmx-row--slider input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--track);
}
.cmx-card .cmx-row--slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--thumb);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}








.detail-score-modal-content {
  background: #FCFCFC;
  width: 90%;
  max-width: 420px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}




/* =========================================================
   slider-dist-modal：閉じるボタン最終定義（important不使用）
   ========================================================= */

#slider-dist-modal .detail-score-modal-content {
  display: flex;
  flex-direction: column;
}

/* 本文の下に余白（ボタン用） */
#slider-dist-modal #slider-dist-body {
  margin-bottom: 16px;
}

/* 閉じるボタン：右下・共通デザイン */
#slider-dist-modal .detail-score-close-btn {
  align-self: flex-end;      /* 右寄せ */
  margin: 12px 16px 0 0;

  background: #fff;
  border: 2px solid #cfeeff;
  color: #4b4b69;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#slider-dist-modal .detail-score-close-btn:hover {
  background: #f7fcff;
}


.cmx-viewcheck-input {
  position: absolute;
  opacity: 0;
}



/* 被っている装飾はクリック無効 */
.cmx-card .r18-link-icons.absolute{
  pointer-events: none;
}






/* ✅ アフィリンク：カード中央寄せ（サイズは極力いじらない） */
.cmx-card .r18-link-icons{
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 320px);  /* ← 横幅だけ少し広げて中央に収める */
}

/* ✅ 2つ＋+N：中央揃え */
.cmx-card .r18-link-pills{
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* ✅ ボタン：ほんの少し小さく（最小限） */
.cmx-card .r18-link-pill,
.cmx-card .r18-link-more{
  padding: 6px 12px;   /* ← 小さめ */
  font-size: 12px;     /* ← 小さめ */
  min-width: 0;        /* ← 無理な横幅固定をしない */
}

/* ✅ 展開パネル：行間ムラを消す（均一gap） */
.cmx-card .r18-link-more-panel{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}




/* アフィリエイトリンク　アフィリンク🔧 アフィアイコン（r18-link-icons）を下げて被り防止 */
.cmx-card .r18-link-icons.absolute{
  top: auto !important;
  bottom: -24px !important; /* まずは10pxで */
}


/* ✅ 念のため：margin混入で「1行目/2行目だけ広い」を潰す */
.cmx-card .r18-link-more-panel .r18-link-pill{
  margin: 0 !important;
}



/* ✅ 追加：アフィリンクを「必ずクリックできる」状態にする */
.cmx-card .r18-link-icons,
.cmx-card .r18-link-pills,
.cmx-card .r18-link-pill,
.cmx-card .r18-link-more{
  pointer-events: auto !important;
  position: relative;
  z-index: 20; /* カード内の上に出す */
}



/* クリックしたい列を最前面に */
.cmx-card .stats-row{
  position: relative;
  z-index: 2;
}

/* 念のためボタン */
.cmx-card .stats-row .stat-item{
  cursor: pointer;
  user-select: none;
}





.cmx-card .stat-item.view-button{
  position: relative ;
  top: -5px;   /* ← 数値をここで調整 */
}











/* 🔧 概要：アフィリンクを「フル表記のピル＋＋N」表示にする（見た目だけ先に用意） */

/* 置き場（既存の absolute を維持するなら、ここはそのまま） */
.cmx-card .r18-link-icons{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

/* 2つまで横並び＋右端に +N（JS側で制御する想定） */
.cmx-card .r18-link-icons .r18-link-pills{
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 共通ピル（画像の丸いボタンっぽい形） */
.cmx-card .r18-link-icons .r18-link-pill,
.cmx-card .r18-link-icons .r18-link-more{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;               /* 画像の楕円感 */
  padding: 0 16px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 700;
  color: #4B4B69;             /* 指定どおり */
  text-decoration: none;
  user-select: none;
  cursor: pointer;

  background: var(--pill-bg, #F7FCFF); /* 中の色 */
  border: 2px solid var(--pill-bd, #D3EFFF); /* 外枠 */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* +N（例：+3）ボタンは少しだけ控えめ */
.cmx-card .r18-link-icons .r18-link-more{
  font-weight: 800;
  padding: 0 14px;
}

/* ------- プラットフォーム別：色（中＋外枠） ------- */
/* ※細かい色はCocoさんが後で調整する前提で、仮色を置いておくにぇ */

.cmx-card .r18-link-icons .r18-link-pill.is-fanza{
  --pill-bg: #FFE5EF;
  --pill-bd: #E97EA1;
}
.cmx-card .r18-link-icons .r18-link-pill.is-fc2{
  --pill-bg: #FFF3D6;
  --pill-bd: #F6B100;
}
.cmx-card .r18-link-icons .r18-link-pill.is-fantia{
  --pill-bg: #EAF7FF;
  --pill-bd: #8BCBFF;
}
.cmx-card .r18-link-icons .r18-link-pill.is-unext{
  --pill-bg: #EAF2FF;
  --pill-bd: #7AA7FF;
}
.cmx-card .r18-link-icons .r18-link-pill.is-getchu{
  --pill-bg: #F0FFF3;
  --pill-bd: #66D38A;
}

/* +N の色（中＋外枠）も別にできる */
.cmx-card .r18-link-icons .r18-link-more{
  --pill-bg: #F7FCFF;
  --pill-bd: #D3EFFF;
}

/* +N の展開（簡易パネル） */
.cmx-card .r18-link-icons .r18-link-more-panel{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}







/* +N 展開パネル：見やすさ強化 */
.cmx-card .r18-link-icons .r18-link-more-panel{
  padding-top: 6px;
  row-gap: 8px;
}

/* モバイル配慮：指で押しやすく */
@media (max-width: 640px){
  .cmx-card .r18-link-icons .r18-link-pill,
  .cmx-card .r18-link-icons .r18-link-more{
    min-height: 44px;     /* タップ最小サイズ */
    padding: 0 14px;
  }
}





/* =========================================
   🔧 カードタイトル：必ず2行分の高さを確保する
   ・1行しかない場合も2行目を空欄で確保
   ・カード高さズレ防止
   ========================================= */


/* 🔧 カードタイトル：2行分を必ず確保 */
.r18-card-title {
  line-height: 1.4;                 /* 1行の高さ */
  min-height: calc(1.4em * 2);      /* 2行分を強制確保 */
  margin-bottom: 6px;

  display: block;
}

/* タイトル内リンクも同じ高さに従わせる */
.r18-card-title .work-link {
  display: block;
  line-height: inherit;
}


/* =========================================
   🔧 タグ編集：type別カード種別バッジ
   ========================================= */

.cmx-card[data-type="works"]
  .cmx-tag-edit-row[data-slot="edit"]::after{
  content: "🎬";
}

.cmx-card[data-type="doujin_gallery"]
  .cmx-tag-edit-row[data-slot="edit"]::after{
  content: "🖼️";
}

.cmx-card[data-type="asmr"]
  .cmx-tag-edit-row[data-slot="edit"]::after{
  content: "🎧";
}

.cmx-card[data-type="game"]
  .cmx-tag-edit-row[data-slot="edit"]::after{
  content: "🎮";
}

.cmx-card[data-type="novel"]
  .cmx-tag-edit-row[data-slot="edit"]::after{
  content: "📖";
}


.cmx-tag-edit-row[data-slot="edit"]{
  position: relative;
}
.cmx-tag-edit-row[data-slot="edit"]::after{
  right: -16px; /* ここを -6〜-16 で調整 */
}










.detail-score-row--line{
  display:grid;
  grid-template-columns: 90px 170px 70px; /* ラベル / ⭐ / 点数 */
  align-items:center;
  column-gap:10px;
}

.detail-score-row--line .detail-score-label{
  white-space:nowrap;
}

.detail-score-row--line .detail-score-stars{
  display:block;
  text-align:left;     /* ⭐を右端で揃える（これが効く） */
  white-space:nowrap;
  letter-spacing:1px;
}

.detail-score-row--line .detail-score-value{
  text-align:right;
  white-space:nowrap;
}







.detail-score-modal-content{
  position:relative;
  padding:24px 24px 70px 24px; /* 下にボタン分の余白 */
  background:#fff;
  border-radius:16px;
}





.detail-score-close-btn{
  position:absolute;
  right:20px;
  bottom:18px;

  padding:8px 18px;
  border-radius:10px;

  background:#fff;
  color:#333;
  border:1px solid #d8d8d8;

  font-size:14px;
  font-weight:600;
  cursor:pointer;

  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease;
}

.detail-score-close-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}




.cmx-score-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
}

.cmx-score-label{
  font-size:12px;
  color:#666;
}











.lr-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:20px;
}

.lr-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:none;
  border-radius:10px;
  padding:12px;
  font-size:14px;
  cursor:pointer;
  box-sizing:border-box;
}

.lr-btn-primary{
  background:#ff5f8f;
  color:#fff;
  font-weight:700;
}

.lr-btn-secondary{
  background:#4f8df7;
  color:#fff;
  font-weight:700;
}

.lr-btn-cancel{
  background:#f3f3f3;
  color:#666;
}





.lr-card{
  color:#4B4B69;
}

.lr-card h3{
  color:#4B4B69;
}





.reaction-help-button{
  border-left:1px solid #ddd;
  padding-left:8px;
}










.work-thumb-link{
  position:relative;
  display:block;
}

.cmx-type-badge{
  position:absolute;

  top:-5px;
  right:2px;

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,.92);

  font-size:18px;
  z-index:20;

  pointer-events:none;

  box-shadow:
    0 2px 8px rgba(0,0,0,.25);
}









/* スマホ */
@media (max-width: 950px) {

  .fixed-tag,
  .edit-tag,
  .card-tag,
  .tag-btn {

    min-width: auto;
    width: auto;
    height: auto;
    min-height: 32px;

    padding: 6px 10px;

    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;

    flex: 0 0 auto;
  }

}





.cmx-rank-badge {

  position: absolute;

  top: -4px;
  left: -4px;

  font-size: 26px;
  line-height: 1;

  z-index: 20;

  pointer-events: none;

}




/* =========================
   Character
========================= */

.r18-card-character{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin:3px 0;

  color:#234A91;
  font-size:13px;
  line-height:1.35;
}



.r18-card-character a{
  color:#234A91;
    display: inline;  /* aタグが折返し可能に */
  text-decoration:underline;
}


/* =========================
   Maker
========================= */

.r18-card-maker{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin:3px 0;

  color:#234A91;
}

.r18-card-maker a{
  color:#234A91;
}


/* =========================
   Series
========================= */

.r18-card-source{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin:3px 0;

  color:#234A91;
}

.r18-card-source a{
  color:#234A91;
}


.character-more-wrap {

  display: flex;

  justify-content: center;

  margin: 10px 0 8px;

}

.character-more-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 88px;

  height: 24px;

  padding: 0 10px;

  border: 1px solid #d8d8d8;

  border-radius: 999px;

  background: #fafafa;

  color: #666;

  font-size: 12px;

  line-height: 1;

  cursor: pointer;

}

.character-more-btn:hover {

  background: #f2f2f2;

  border-color: #bdbdbd;

}











/* =====================================
   Preference
===================================== */

.preference-box{

  margin-top:12px;
  display:flex;

  flex-direction:column;

  gap:8px;
}

.preference-buttons{

  display:flex;

  gap:4px;

  margin-top:8px;

}

.preference-btn{

  flex:1;
  min-width:0;
  padding:3px;
  font-size:12px;
  line-height:1.2;
  border:1px solid #ddd;
  background:#fff;
  border-radius:8px;
  cursor:pointer;

}

.preference-bar{
  display:flex;
  width:100%;
  height:16px;
  overflow:hidden;
  border-radius:999px;
  background:#ececec;
  margin-top:8px;
}

.preference-normal{

  width:34%;

}

.preference-like{

  width:33%;

}

.preference-very{

  width:33%;

}

.preference-percent{

  display:flex;

   justify-content:space-between;

  margin-top:6px;

  font-size:12px;

}










/* =====================================
   Preference
===================================== */

.preference-box{

  margin-top:12px;

}

.preference-bar{

  display:flex;

  width:100%;

  height:14px;

  border-radius:999px;

  overflow:hidden;

  background:#ececec;

}

.preference-bar > div{

  height:100%;

  transition:.25s;

}

.preference-normal{

  width:0%;

  background:#bde8ff;

}

.preference-like{

  width:0%;

  background:#ffd39b;

}

.preference-very{

  width:0%;

  background:#ffb6d5;

}

.preference-percent{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:6px;

  font-size:12px;

}

.preference-buttons{

  display:flex;

  gap:8px;

  margin-top:8px;

}

.preference-btn{

  flex:1;

  padding:4px 6px;

  border:1px solid #ddd;

  border-radius:8px;

  background:#fff;

  cursor:pointer;

  font-size:12px;

}

.preference-btn:hover{

  background:#f7f7f7;

}

.preference-very-text{

  color:#d84d8a;

}

.preference-like-text{

  color:#d38b22;

}

.preference-normal-text{

  color:#4d93d8;

}



.preference-btn.is-selected{

  background:#444;

  color:#fff;

  border-color:#444;

}



.preference-btn[data-preference="normal"]{

  background:#FBFEFF;
  border:1px solid #BFE6FF;
  color:#4B4B69;

}

.preference-btn[data-preference="normal"]:hover{
  background:#D8ECFF;
}

.preference-btn[data-preference="normal"].is-selected{
  background:#BFE4FF;
  border-color:#5EB6F0;
  color:#4B4B69;
  font-weight:700;
}



.preference-btn[data-preference="like"]{

  background:#FFFDF9;
  border:1px solid #FFD79A;
  color:#4B4B69;

}

.preference-btn[data-preference="like"]:hover{
  background:#FFE8C7;
}

.preference-btn[data-preference="like"].is-selected{
  background:#FFD094;
  border-color:#FF9C2B;
  color:#4B4B69;
  font-weight:700;
}


.preference-btn[data-preference="veryLike"]{

  background:#FFF9FC;
  border:1px solid #FFC5DC;
  color:#4B4B69;

}

.preference-btn[data-preference="veryLike"]:hover{
  background:#FFD5E7;
}

.preference-btn[data-preference="veryLike"].is-selected{
  background:#FFBEDA;
  border-color:#FF6FA6;
  color:#4B4B69;
  font-weight:700;
}



.preference-percent{

  color:#4B4B69;

}


.preference-percent span{

  color:#4B4B69;

}

.preference-percent > span{

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:44px;
  line-height:1.2;

}

.preference-percent-value{

  font-size:11px;
  white-space:nowrap;

}

.preference-vote-count{

  font-size:10px;
  color:#9A9AAF;
  white-space:nowrap;

}

.preference-normal-text .preference-percent-value{

  color:#4d93d8;

}

.preference-like-text .preference-percent-value{

  color:#d38b22;

}

.preference-very-text .preference-percent-value{

  color:#d84d8a;

}