/* /assets/css/style.css の先頭（1行目）に追加 */

@import url("/assets/css/rc-tokens.css");
@import url("/assets/css/right-column-new-101-2.css");
@import url("/assets/css/card-rating.css");



@import url("/assets/css/card.css");

@import url("/assets/css/tag-common.css");


@import url("/assets/css/modal.css");



/* 可愛いポップなフォントを適用 */
/* 可愛いポップなフォントを適用 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');





/* 20250523クリックテスト */
.stat-text.click-count {
  font-size: 12px;
  color: #555;
  margin-left: 4px;
}


/* 20250523クリックテスト */
.clicked {
  color: #c66;
  font-weight: bold;
}



label {
  display: block;
  margin-top: 12px;
}


.stars {
  color: gold;
  font-size: 1.1em;
}







.heart-icon {
  font-size: 1.2em;
  cursor: default;
  transition: color 0.3s ease;
}

.heart-rated {
  color: #ff5c8a; /* ピンク系ハート */
}

.heart-unrated {
  color: #ccc; /* グレー（未評価） */
}

.heart-icon:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
  transform: translateY(-130%);
  white-space: nowrap;
}







.platform-text {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-color: #eee;
  color: #333;
  text-align: center;
  line-height: 1.5em;
  font-weight: bold;
  font-size: 0.9em;
}

.fanza-red {
  background-color: #e60033;
  color: #fff;
}





.selected {
  background-color: #ffd1dc;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  padding: 2px 6px;
}


.viewed {
  color: #e60073;       /* 濃いピンク */
  font-weight: bold;
  text-shadow: 0 0 5px #ffc0cb;
  transform: scale(1.1);
  transition: all 0.2s ease;
}



.main-image[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="] {
  background-color: #eee;
  width: 100%;
  height: 150px;
  object-fit: contain;
  display: block;
  content: "NO IMAGE";
  position: relative;
}













.series-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.series-list .sidebar-link {
  text-decoration: none;
  color: #444;
  font-size: 0.9em;
  transition: color 0.2s;
}

.series-list .sidebar-link:hover {
  color: #e97ea1; /* ピンク系 */
}








.index-layout {
  display: flex;
  margin: 0;
  font-family: sans-serif;
}

.index-sidebar {
  width: 220px;
  padding: 16px;
  background: #f9f9f9;
  border-right: 1px solid #ddd;
}


/* レフトカラムをライトカラムと同じカードUIにする */
.index-sidebar {
  background: #FCFCFC;              /* 白カード */
  border: 1px solid #ffdbe7;        /* ピンク枠 */
  border-radius: 22px;              /* 角丸 */
  box-shadow: 0 6px 22px rgba(0,0,0,0.08);

  padding: 16px 14px;
  
  /* 旧サイドバー仕様を無効化 */
  border-right: none;
}


.index-main {
  flex: 1;
  padding: 16px;
}



/* sidebar-series-listのリスト用スタイル */
#sidebar-series-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#sidebar-series-list li {
  margin-bottom: 8px;
}

#sidebar-series-list a {
  text-decoration: none;
  color: #333;
}

#sidebar-series-list a:hover {
  text-decoration: underline;
}



.sidebar-link {
  color: #333;
  text-decoration: none;
}

.sidebar-link:hover {
  text-decoration: underline;
}




.site-footer {
  background: #f0f0fa;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.site-footer .footer-links ul,
.site-footer .footer-account ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.site-footer ul li {
  display: inline-block;
  margin: 0 10px;
}

.site-footer a {
  text-decoration: none;
  color: #777;
}

.site-footer a:hover {
  color: #E97EA1; /* ピンク系アクセント */
}











.contact-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.contact-container input,
.contact-container textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.contact-container button {
  background-color: #E97EA1;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

.contact-container button:hover {
  background-color: #d86b8f;
}

.note {
  font-size: 12px;
  color: #888;
  margin-top: 20px;
}











/* === Mobile: tap/form optimization ≤768px === */
@media (max-width: 768px){
  /* Tap targets */
  button,
  [role="button"],
  .btn,
  .button,
  .main-nav a,
  .nav a {
    min-height: 44px;           /* 推奨タップ高さ */
    padding: 12px 14px;
  }

  /* Form fields */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px;            /* iOSズーム防止 */
    line-height: 1.4;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Checkbox/Radio touch area */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  label { display: block; margin: 8px 0 4px; }
  .form-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
}





/* === Mobile: media / overflow guard ≤768px === */
@media (max-width: 768px){
  html, body { overflow-x: hidden; }

  /* 画像・動画・iframe を枠内に収める */
  img, video, iframe { max-width: 100%; height: auto; display: block; }

  /* 長い文字の折り返し */
  h1, h2, h3, .type-heading, .card-title { overflow-wrap: anywhere; word-break: break-word; }

  /* テーブルは横スクロールで逃がす */
  .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { width: 100%; border-collapse: collapse; }
  th, td { word-break: break-word; }

  /* カード類の幅をはみ出さないように */
  .type-container .card, .genre-item, .card { max-width: 100%; }


}



/* === Accessibility: Reduce Motion ============================== */
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto !important; }
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }


}

/* === Auto Dark Mode (prefers-color-scheme) ==================== */
@media (prefers-color-scheme: dark){
  :root{ color-scheme: dark; }
  html, body{ background:#0b1220; color:#e5e7eb; }

  a{ color:#93c5fd; }

  /* 見出し */
  h1,h2,h3,.type-heading{ color:#e5e7eb; }



  /* ナビ */
  .main-nav a,.nav a{
    background:#111827;
    color:#e5e7eb;
    border-color:#1f2937;
  }
  .main-nav a:hover,.nav a:hover{
    background:#0b1220;
  }

  /* テーブル */
  table{ background:#0f172a; }
  th,td{ border-color:#1f2937; }

  /* legacy modal layout */
  #age-modal{ background:rgba(5,10,20,.6); }
  #age-modal .age-box{
    background:#0f172a;
    color:#e5e7eb;
    border:1px solid #1f2937;
  }
  #age-yes{ background:#2563eb; color:#e5e7eb; }
  #age-no { background:#374151; color:#e5e7eb; }
}








/* === Tablet layout: 769–1024px =============================== */
@media (min-width: 769px) and (max-width: 1024px){
  /* レイアウト：左/中央/右の並びを復活、余白は控えめ */
  .columns{
    display:flex;
    gap:16px;
    max-width: 100%;
    padding: 0 16px;
  }
  .left-column{flex:0 0 240px; order:1;}
  .center-column{flex:1 1 auto; order:2; padding: 8px 0;}
  .right-column{flex:0 0 260px; order:3;}


  
  /* カード/作品リスト：3列 */
  .type-container{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:12px;
  }
  .type-heading{font-size: 20px; margin: 12px 0;}

  /* ナビ：2〜3列グリッドで折返し */
  .main-nav,.nav{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:10px;
    margin-top: 8px;
  }
  .main-nav a,.nav a{
    text-align:center;
    padding:10px 12px;
    font-size:16px;
  }

  /* 画像/スライダ高さを少し拡張 */
  .swiper{ height: 300px; }

  /* フィルター/フォームの密度を少し上げる */
  .filter-wrapper{ padding:12px; }
  .form-row{ grid-template-columns: 1fr 1fr; gap:12px; }
  .form-actions{ justify-content:flex-start; }
}


/* モバイル基準（デフォルト） */
.columns{flex-direction:column;gap:12px;padding:0 12px;}
.center-column{order:1}.left-column{order:2}.right-column{order:3}
.type-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.main-nav,.nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.left-column,.center-column,.right-column{width:100%;margin:0}










/* PCだけ適用（1024px以上） */
@media (min-width:1024px){



  
  /* ←今あるPC向けの .columns / .left-.center-.right / .type-container / .main-nav の既存ルールをここへ移す */
}






/* 4101 PC-LOCK: 横3カラム & 並び順を強制（左→中→右） */
@media (min-width: 1025px){
  .columns{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* 並び順を左(1)→中(2)→右(3)に固定 */
  .left-column{  order: 1 !important; width: 250px !important; flex: 0 0 250px !important; margin: 0 !important; }
  .right-column{ order: 3 !important; width: 210px !important; flex: 0 0 210px !important; margin: 0 !important; }
}





/* 4201 PC ORDER FIX: 左→中→右 の順に強制（PC幅のみ） */
@media (min-width: 1025px){
  .columns{
    display: flex ;
    flex-direction: row ;
    align-items: flex-start ;
    gap: 16px ;
  }
  /* 左カラム */
  .left-column{
    order: 1 ;
    flex: 0 0 240px ;
    width: 240px ;
    margin: 0 ;
  }

  /* 右カラム（どちらの実装でも右端に来るよう両方指定） */
  .right-column,
  #right-column-placeholder{
    order: 3 !important;
    flex: 0 0 260px !important;
    width: 260px !important;
    margin: 0 !important;
  }
}




/* 6101 NAV BASE: ナビの余白と行間（displayは変更しない） */
.main-nav, .nav{ gap: 10px; }
.main-nav a, .nav a,
.main-nav button, .nav button{
  line-height: 1.4;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 10px;
}

/* 6102 NAV Tablet（≤1024px）：文字をやや小さく、余白少しだけ縮める */
@media (max-width:1024px){
  .main-nav a, .nav a,
  .main-nav button, .nav button{
    font-size: 15px;
    padding: 10px 12px;
  }
}

/* 6103 NAV Small（≤480px）：指で押しやすく縦詰め */
@media (max-width:480px){
  .main-nav, .nav{ gap: 8px; }
  .main-nav a, .nav a,
  .main-nav button, .nav button{
    font-size: 14px;
    padding: 10px;         /* 44px高さは維持 */
  }
}

/* 6104 FILTER BASE: フィルター枠の内部余白と見出し */
.filter-wrapper{
  box-sizing: border-box;
  padding: 14px;
  border-radius: 12px;
  line-height: 1.5;
}
.filter-wrapper h3,
.filter-wrapper .filter-title{
  font-size: 16px;
  margin: 0 0 10px;
}

/* 6105 FILTER 行間＆行内の間隔（チェックボックス/ラジオの並び） */
.filter-row, .form-row, .filter-group{
  display: block;          /* 既存displayは上書きしない */
  gap: 10px;
  margin: 10px 0;
}
.filter-row label,
.form-row label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

/* 6106 FILTER トグル・ボタンのタップ域 */
.filter-toggle,
.filter-wrapper .button,
.filter-actions .button{
  min-height: 44px;
  padding: 8px 12px;
}

/* 6107 FILTER Tablet（≤1024px）：少しだけコンパクトに */
@media (max-width:1024px){
  .filter-wrapper{ padding: 12px; }
  .filter-wrapper h3, .filter-wrapper .filter-title{ font-size: 15px; }
}

/* 6108 FILTER Small（≤480px）：横詰めしつつ可読性を維持 */
@media (max-width:480px){
  .filter-wrapper{ padding: 10px; }
  .filter-row, .form-row, .filter-group{ margin: 8px 0; gap: 8px; }
  .filter-row label, .form-row label{ min-height: 36px; }
}

/* 6109 MISC: ラベルや小テキストの読みやすさ */
.small, .meta, .hint, .note{
  font-size: 13px;
  line-height: 1.5;
}

/* 6110 SAFETY: 画像/iframe/動画のはみ出し保険（再掲しても無害） */
.nav img, .filter-wrapper img,
.nav iframe, .filter-wrapper iframe,
.nav video, .filter-wrapper video{
  max-width: 100%;
  height: auto;
}



/* 6210 CENTER: セクション見出しとカード列の上下マージン（列数には未干渉） */
.type-heading{ margin: 16px 0 10px; font-size: 18px; }

/* 6211 CENTER: カードリスト（.type-container）の上下マージンだけ付与 */
.type-container{ margin: 8px 0 20px; }






















/* ======================= STEP-6700: Modals & Toasts —— START ======================= */
/* 6701 TOKENS: 色トークン（ライト/ダークで上書き可能） */
:root{
  --modal-bg:#fff; --modal-fg:#111; --modal-border:#e5e5e5; --modal-accent:#E97EA1;
  --overlay: rgba(0,0,0,.55);
  --toast-bg:#111; --toast-fg:#fff; --toast-border:#2a2a2a;
}

/* 6702 OVERLAY: 半透明オーバーレイ（モーダル背面） */
.modal-overlay{
  position: fixed; inset: 0;
  background: var(--overlay);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 980;
}
/* 6703 OVERLAY open状態（is-open / aria-hidden="false" / open 属性に対応） */
.modal-overlay.is-open,
.age-modal.is-open + .modal-overlay,
.shelf-modal.is-open + .modal-overlay,
.modal-overlay[aria-hidden="false"],
dialog[open] + .modal-overlay{
  opacity: 1; pointer-events: auto;
}

/* 6704 MODAL CONTAINER: age/shelf モーダル本体（センタリング） */
.age-modal, .shelf-modal{
  position: fixed; inset: 0;
  display: none; place-items: center;
  z-index: 990;
}
/* 6705 open状態：複数の状態表現に対応 */
.age-modal.is-open, .shelf-modal.is-open,
.age-modal[open], .shelf-modal[open],
.age-modal[aria-hidden="false"], .shelf-modal[aria-hidden="false"]{
  display: grid;
}

/* 6706 MODAL DIALOG: 中身の箱 */
.age-modal .modal-dialog, .shelf-modal .modal-dialog{
  background: var(--modal-bg); color: var(--modal-fg);
  border: 1px solid var(--modal-border);
  width: min(92vw, 680px);
  max-height: 86vh; overflow: auto;
  border-radius: 16px; padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform: translateY(8px) scale(.98);
  opacity: 0; transition: transform .18s ease, opacity .18s ease;
}
/* 6707 open時のアニメーション終端 */
.age-modal.is-open .modal-dialog,
.shelf-modal.is-open .modal-dialog,
.age-modal[open] .modal-dialog,
.shelf-modal[open] .modal-dialog,
.age-modal[aria-hidden="false"] .modal-dialog,
.shelf-modal[aria-hidden="false"] .modal-dialog{
  transform: none; opacity: 1;
}

/* 6708 MODAL HEADER/BODY/ACTIONS（命名が無くても“それっぽい”要素に効く） */
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; }
.modal-title, .age-modal h2, .shelf-modal h2{ font-size:18px; margin:0; }
.modal-body{ line-height:1.6; }
.modal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

/* 6709 BUTTONS: 44pxタップ域＆フォーカスリング */
.modal-actions .button, .modal-actions button,
.age-modal .button, .shelf-modal .button,
.age-modal button, .shelf-modal button{
  min-height:44px; padding:10px 14px; border-radius:10px;
}
.age-modal .close, .shelf-modal .close{
  min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center;
}
.age-modal .close:focus-visible, .shelf-modal .close:focus-visible,
.modal-actions .button:focus-visible, .modal-actions button:focus-visible{
  outline:2px solid #8ab4f8; outline-offset:2px;
}

/* 6710 SCROLL-LOCK: モーダルopen時は背面スクロール禁止 */
html.modal-open, body.modal-open{ overflow:hidden; }
/* :has()対応ブラウザ向けの自動ロック（JSがクラスを付けなくても効く） */
body:has(.age-modal.is-open), body:has(.shelf-modal.is-open){ overflow:hidden; }

/* 6711 TOAST: 画面下の通知（複数積める） */
.toast-container{
  position: fixed; left:50%; transform:translateX(-50%);
  bottom: 24px; width: min(92vw, 560px);
  display: grid; gap:8px; z-index: 995;
}
.toast{
  background: var(--toast-bg); color: var(--toast-fg);
  border:1px solid var(--toast-border);
  border-radius:12px; padding:12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  opacity:0; transform: translateY(8px); pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-show, .toast[aria-hidden="false"]{
  opacity:1; transform:none; pointer-events:auto;
}

/* 6712 SMALL DEVICES: モバイルでの余白最適化 */
@media (max-width:480px){
  .age-modal .modal-dialog, .shelf-modal .modal-dialog{ width: min(96vw, 560px); padding:16px; border-radius:14px; }
  .modal-title, .age-modal h2, .shelf-modal h2{ font-size:16px; }
}

/* 6713 DARK MODE: 自動ダーク同期（眩しさ軽減） */
@media (prefers-color-scheme: dark){
  :root{
    --modal-bg:#121214; --modal-fg:#E9E9E9; --modal-border:#2A2A2E;
    --overlay: rgba(0,0,0,.7);
    --toast-bg:#1a1a1a; --toast-fg:#ffffff; --toast-border:#333;
  }
  .modal-actions .button, .modal-actions button{ color:#fff; }
  .modal-title, .age-modal h2, .shelf-modal h2{ color: var(--modal-fg); }
}

/* 6714 REDUCE MOTION: 動きが苦手な人への配慮 */
@media (prefers-reduced-motion: reduce){
  .modal-overlay, .age-modal .modal-dialog, .shelf-modal .modal-dialog, .toast{
    transition: none !important;
    animation: none !important;
  }
}
/* ======================= STEP-6700 —— END ======================= */







/* ======================= STEP-6800: Tables (横スク標準化) —— START ======================= */
/* 6801 WRAP: 横スク用のラッパ（.table-wrap で囲むだけ） */
.table-wrap{
  overflow-x: auto;            /* 横スクを許可 */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* 6802 TABLE: はみ出し防止＆最小幅を確保（PCはそのまま） */
.table-wrap > table{
  width: max(720px, 100%);     /* 小画面で列つぶれを防ぐ最小幅 */
  border-collapse: collapse;
  border-spacing: 0;
}

/* 6803 CELL: 余白と罫線（読みやすさ） */
.table-wrap th,
.table-wrap td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: middle;
  line-height: 1.5;
  background: var(--table-bg, #fff);
  color: var(--table-fg, inherit);
}


/* 6805 STICKY（任意）：ヘッダー固定したい場合は .table-sticky を併用 */
.table-wrap.table-sticky thead th{
  position: sticky; top: 0; z-index: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* 6806 文字折返し：長いURL/IDの崩れ防止（必要に応じてクラスを付与） */
.nowrap{ white-space: nowrap; }
.break-anywhere{ overflow-wrap:anywhere; word-break: break-word; }

/* 6807 ALIGN: 数値や日付を右寄せしたい列用（任意） */
.text-right{ text-align: right; }
.text-center{ text-align: center; }

/* 6808 Tablet（≤1024px）：セル余白をややコンパクトに */
@media (max-width:1024px){
  .table-wrap th, .table-wrap td{ padding: 8px 10px; }
}

/* 6809 Small（≤768px）：さらにコンパクト、見出しサイズも控えめに */
@media (max-width:768px){
  .table-wrap thead th{ font-size: 15px; }
  .table-wrap th, .table-wrap td{ padding: 8px; }
}

/* 6810 Phone（≤480px）：最低限の余白にして視認性キープ */
@media (max-width:480px){
  .table-wrap thead th{ font-size: 14px; }
  .table-wrap th, .table-wrap td{ padding: 6px 8px; }
}

/* 6811 DARK: 自動ダーク時の色味を穏やかに反転 */
@media (prefers-color-scheme: dark){
  :root{
    --table-bg:#121214; --table-fg:#E9E9E9; --table-head:#1a1a1d;
  }
  .table-wrap{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .table-wrap th, .table-wrap td{ border-bottom-color: rgba(255,255,255,.08); }
}
/* ======================= STEP-6800 —— END ======================= */









/* ======================= STEP-6900: Responsive Embeds (iframe/video) —— START ======================= */
/* 6901 BASE: iframe / video を横幅フィット（displayは変更しない） */
iframe, video{
  max-width: 100%;
  height: auto;               /* video用。iframeはラッパで高さ制御 */
  display: block;
  border: 0;
}

/* 6902 WRAP: 埋め込み用の安全ラッパ（どれかを使えばOK） */
.embed, .video-wrap, .iframe-wrap{
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 12px;
  background: #000;           /* 読み込み前の透け防止 */
  aspect-ratio: var(--embed-ratio, 16/9);  /* 既定=16:9 */
}
/* 中の iframe / video をラッパいっぱいにフィット */
.embed > iframe, .video-wrap > iframe, .iframe-wrap > iframe,
.embed > video,  .video-wrap > video,  .iframe-wrap > video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* videoは有効／iframeは無害 */
}

/* 6903 RATIO HELPERS: HTML側でクラスを追加するだけで比率切替 */
.ratio-16x9{ --embed-ratio: 16/9; }
.ratio-4x3 { --embed-ratio: 4/3; }
.ratio-1x1 { --embed-ratio: 1/1; }
.ratio-9x16{ --embed-ratio: 9/16; }  /* 縦動画にも対応 */

/* 6904 SMALL DEVICES: 画面が小さい時の過度な縦長を抑制（見切れ防止） */
@media (max-width:480px){
  .embed, .video-wrap, .iframe-wrap{ border-radius: 10px; }
  /* 画面の60vhを超えないように（縦長端末での暴れ抑制） */
  .embed, .video-wrap, .iframe-wrap{ max-height: 60vh; }
}

/* 6905 REDUCE MOTION: 自動再生やアニメが多い埋め込み環境向けの配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .embed, .video-wrap, .iframe-wrap{ animation: none !important; }
}
/* ======================= STEP-6900 —— END ======================= */






/* LC-8310: シリーズ欄の「・」マーカーを消す */
#sidebar-series-list :is(ul, ol),
.index-sidebar :is(ul, ol) {
  list-style: none !important;   /* マーカー非表示 */
  padding-left: 0 !important;    /* 左の字下げを消す */
  margin: 0 !important;
}

#sidebar-series-list li,
.index-sidebar li {
  margin: 6px 0;                  /* 行間（お好みで調整） */
}

/* ブラウザの ::marker を明示的に無効化（保険） */
#sidebar-series-list li::marker,
.index-sidebar li::marker {
  content: "" !important;
}

/* テーマが疑似要素で点を足している場合の保険（あれば効く） */
#sidebar-series-list li::before,
.index-sidebar li::before {
  content: none !important;
}






/* 🔧 開発用メモ：対応HTML → character-detail.html  ／ 対応JS → character-170-3.js 13001 */
/* ピル型セクション見出し */
.pill-title{
  display:block;
  text-align:center;
  padding:16px 20px;
  margin:24px 0 12px;
  background:#FFF0F4;         /* #D3EFFF系とベースのピンクに合わせた淡色 */
  border-radius:24px;
  border:1px solid #F7AEC2;
  box-shadow:0 3px 0 #F7AEC2, 0 8px 24px rgba(233,126,161,.15);
  font-weight:700;
  color:#333;
}




/* 🔧 開発用メモ：対応HTML → character-detail.html ／ 対応JS → character-170-3.js 13001 */
/* ピル型セクション見出し */
.pill-title{
  display:block;
  text-align:center;
  padding:16px 20px;
  margin:24px 0 12px;
  background:#FFF0F4;              /* ベースの淡いピンク */
  border-radius:24px;
  border:1px solid #F7AEC2;        /* 薄ピンクの縁 */
  box-shadow:0 3px 0 #F7AEC2, 0 8px 24px rgba(233,126,161,.15);
  font-weight:700;
  color:#333;
}

/* 区分ごとのカード列の余白を少し広めに */
.wd-section > .cm-grid{ margin-top:12px; }









/* 🔧 開発用メモ：対応HTML → character-detail.html ほか共通 ／ 目的：文字色をインクブルー系に統一 20250924 */
:root{
  --cm-ink-blue: #43558B;  /* インクブルー（濃紺寄り） */
}

/* 中央カラム・見出し */
#character-main,
#character-main h1,
#character-main h2,
#character-main p,
.pill-title{
  color: var(--cm-ink-blue) !important;
}

/* 左カラム（シリーズ・フィルターの見出し＆項目） */
.index-sidebar,
.index-sidebar h3,
.filter-toggle,
#sidebar-series-list{
  color: var(--cm-ink-blue) !important;
}




/* character-detail 件数表示の圧縮 */
#char-title{
  margin-bottom: 8px !important;  /* タイトル直下の余白を縮小 */
}
#char-note{
  display: inline-block;          /* コンテンツ幅に合わせる */
  margin: 6px 0 8px !important;   /* 上下の余白を小さく */
  padding: 0;                      /* 余白ナシ */
  font-size: 0.95rem;              /* 文字少し小さめ */
  line-height: 1.35;
  color: #43558Bcc;                /* 指定色の80%不透明で控えめに */
}
.pill-title{
  margin-top: 14px !important;    /* ピル見出しの上の余白も少し詰める */
}



/* 🔧 character-detail：件数ピルバッジ */
:root{
  --cm-ink-blue: #43558B;
}
#char-title{
  margin-bottom: 8px !important; /* タイトル直下を詰める */
}
#char-count.count-badge{
  display: inline-block;
  margin: 6px auto 10px;          /* 上下の間隔を控えめに */
  padding: 4px 12px;
  border-radius: 999px;
  background: #FFF5F8;            /* ほんのりピンク基調 */
  border: 1px solid #F7AEC2;      /* 既存ピンクの縁色に合わせる */
  color: var(--cm-ink-blue);      /* 指定のインクブルー */
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  box-shadow: 0 2px 0 #F7AEC2, 0 6px 18px rgba(233,126,161,.08);
  text-align: center;
}
.pill-title{
  margin-top: 14px !important;    /* セクション見出しも少しだけ詰める */
}








/* character-detail の一番最初のセクションは余白&線ナシにする */
#character-main > .wd-section:first-of-type{
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 10px;              /* 好みで 0〜12px に調整OK */
}

/* タイトルまわりも少しだけ詰める */
#char-title{
  margin-bottom: 8px !important;
}

/* ピル見出しの上の余白も少しだけ詰める */
.pill-title{
  margin-top: 12px !important;
}
#char-note{ display:none !important; }
#character-main .wd-section{ padding-top: 12px; }   /* 既定20px → 12px */






/* character-detail：メイン上の余白を圧縮  */
#character-main.main-content{
  margin-top: 20px !important;   /* ← 80px から詰める */
  padding-top: 10px;             /* 見出し直上も少しだけ余白 */
}


/* SP ではさらに詰める */
@media (max-width: 768px){
  #character-main.main-content{ margin-top: 12px !important; }
  .center-column{ padding: 8px 12px 16px !important; }
}

/* 既に入れていなければ：最初のセクションの線/余白を無効化してさらにスッキリ */
#character-main > .wd-section:first-of-type{
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 8px;
}








/* character-detail 用の余白＆線リセット */
#character-main .wd-section{
  /* まず全セクションで線を消して上余白も最小に */
  border-top: none !important;
  padding-top: 6px !important;     /* 20px → 6px に圧縮 */
  margin-top: 8px;                 /* セクション同士の基本距離 */
}

/* ピル見出しの上余白も縮める（線の直上に来ないように） */
#character-main .pill-title{
  margin: 6px 0 12px !important;   /* 上12px→6px に */
}

/* 区切り線は “セクション同士の間” に1本だけ入れる */
#character-main .wd-section + .wd-section{
  border-top: 1px solid rgba(233,126,161,0.2) !important;
  padding-top: 8px !important;     /* 線の直後だけ少し余白を戻す */
}

/* 一番最初のセクションは線ナシ＆さらに詰める */
#character-main .wd-section:first-of-type{
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 6px !important;
}





/* character-detail：タイトル上の余白をもっと詰める */
#character-main.main-content{
  margin-top: 8px !important;    /* ← 20px→8px */
  padding-top: 6px !important;   /* ← 10px→6px */
}

/* タイトルの上下もさらに圧縮（下線用の余白は最小に） */
#char-title{
  margin: 8px 0 6px !important;  /* ← 22.78px→8px、下8px→6px */
  padding-bottom: 2px !important;/* ← 5px→2px（下線がある想定なら最低限） */
}


/* character-detail：ピル見出しの配色をブルー系に */
#character-main .pill-title{
  background: #D3EFFF !important;          /* 旧: #FFF0F4 */
  border: 1px solid #9BC9FF !important;    /* 旧: #F7AEC2 */
  box-shadow:
    0 3px 0 #9BC9FF,                       /* 旧: #F7AEC2 */
    0 8px 24px rgba(27, 97, 173, .12);     /* ブルー系の淡い影 */
  color: #43558B !important;               /* 見出し文字は指定のインクブルー */
}


/* series：タイトル周りの余白圧縮 */
.center-column .main-content{
  margin-top: 8px !important;     /* ページ先頭との距離を最小に */
  padding-top: 6px !important;
}
.center-column .main-content h1{
  margin: 8px 0 6px !important;   /* 既定 ~22px をギュッと */
  padding-bottom: 2px !important; /* 下線等がある場合の最小パディング */
}




/* series：タイプ見出し（動画など）の配色と余白 */
.center-column .main-content .type-heading{
  display: block;
  text-align: center;
  background: #D3EFFF !important;        /* 旧 F8BEC1 → 指定色 */
  border: 1px solid #9BC9FF !important;  /* 枠もブルー系に */
  color: #43558B !important;             /* 文字はインクブルー */
  border-radius: 24px;
  padding: 12px 20px;                     /* 既定より少しコンパクト */
  margin: 10px 0 10px !important;         /* 上下の間隔を圧縮 */
  box-shadow:
    0 3px 0 #9BC9FF,
    0 8px 24px rgba(27,97,173,.12);
}
/* ピル直下のカードグリッドとの隙間も少しだけ */
.center-column .main-content .type-container{
  margin-top: 8px;
}



/* series：ページタイトル（シリーズ名）をインクブルーに */
.center-column .main-content h1{
  color: #43558B !important;   /* インクブルーで固定 */
}



/* 作品リスト直下のセクションの上マージンを少しだけ詰める（詳細ページ用） */
#works-list > .wd-section { margin-top: 8px; } /* お好みで 8〜16px に調整OK */



card-render-20-score100-ui.js


.list-summary{display:flex;gap:12px;align-items:flex-start;margin:12px 0}
.list-summary .ls-cover img{width:96px;height:96px;object-fit:cover;border-radius:12px}
.list-summary .ls-title{margin:0 0 6px;font-weight:700}
.list-summary .ls-meta{font-size:.95rem;opacity:.9;margin-bottom:6px}
.list-summary .ls-open{margin-left:8px}
.list-detail{padding:8px 0 6px}






/* ⭐100点UI */
.rating-input-100 {
  display:flex; align-items:center; gap:8px;
}
.rating-input-100 input[type="range"] { width:140px; }
.rating-input-100 input[type="number"] { width:64px; padding:4px 6px; border-radius:8px; border:1px solid #bcdcff; }
















/* コントローラ全体を2カラム+最下段フル幅に */
.genre-item .rating-ctrl {
  display: grid;
  grid-template-columns: auto 1fr;  /* 左=ボタン, 右=数値/ステッパー */
  align-items: center;
  gap: 8px 12px;
}

/* 行コンテナは中身だけをグリッドに載せる */
.genre-item .rating-ctrl .row { display: contents; }

/* 1行目：右側のステッパーは右寄せ */
.genre-item .rating-ctrl .row-list > .rating-stepper { justify-self: end; }

/* 2行目：右側のレビュー点は右寄せ */
.genre-item .rating-ctrl .row-review > .avg-score-display { justify-self: end; }

/* 3行目：スライダーは全幅 */
.genre-item .rating-ctrl .row-slider { grid-column: 1 / -1; }
.genre-item .rating-ctrl .row-slider input[type="range"] { width: 100%; }

/* リスト／レヴューボタンは横幅自動（100%化を上書き） */
.genre-item .add-to-shelf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 96px;
  padding: 8px 12px;
  line-height: 1;
}

/* ステッパー（− 50 ＋）の見た目 */
.genre-item .rating-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eaf4ff;
  border-radius: 12px;
  padding: 4px 8px;
}
.genre-item .rating-stepper .step {
  width: 24px; height: 32px;
  border: 0; border-radius: 8px;
  background: #dfefff; font-size: 18px;
  cursor: pointer;
}
.genre-item .rating-stepper .val {
  min-width: 24px; text-align: center; font-weight: 600;
}

/* レビュー点の小さなピルを崩さない */
.genre-item .avg-score-display .avg-score-link {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 16px;
  background: #eef5ff;
  text-decoration: underline;   /* 既存のリンクスタイルを維持 */
}






/* スコア行：左に「リスト」、右にスコアのピル */
.genre-item .rating-area > div {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* 1行目のステッパーは右側に固定（「リスト」を上に移したため） */
.genre-item .rating-ctrl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; }
.genre-item .rating-ctrl .row { display: contents; }
.genre-item .rating-ctrl .row-list .rating-stepper {
  grid-column: 2 / 3;            /* 右カラムに配置 */
  justify-self: end;
}

/* 3行目のスライダーは全幅のまま */
.genre-item .rating-ctrl .row-slider { grid-column: 1 / -1; }
.genre-item .rating-ctrl .row-slider input[type="range"] { width: 100%; }





/* ---- 評価コントローラの行構成 ---- */
.rating-ctrl { width: 100%; display: grid; gap: 8px; }
.rating-ctrl .row { display: flex; align-items: center; gap: 10px; }

/* 1行目（リスト）…左寄せのままでOK */
.rating-ctrl .row-list { justify-content: flex-start; }

/* 2行目（レヴュー + 点数リンク）…点数は右端に収める */
.rating-ctrl .row-review { justify-content: flex-start; }
.rating-ctrl .row-review .avg-score-display {
  margin-left: auto;            /* 右端へ */
  min-width: 64px;
  max-width: 84px;              /* はみ出し防止 */
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rating-ctrl .row-review .avg-score-link {
  display: inline-block;
  line-height: 1;
}

/* 3行目（スライダー + ステッパー）…ステッパーを右側に */
.rating-ctrl .row-slider { justify-content: space-between; }
.rating-ctrl .row-slider input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;                 /* iOS/Safari のはみ出し対策 */
}

/* − 50 ＋ のまとまり（右側・コンパクト） */
.rating-stepper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(135, 176, 255, .18);  /* 薄いブルーのピル */
}
.rating-stepper .step {
  border: none;
  background: #e8f1ff;
  border-radius: 10px;
  width: 36px;
  height: 32px;
  font-size: 18px;
  line-height: 32px;
}
.rating-stepper .val {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}







/* ====== rating-ctrl（カード操作エリア）だけに効く安全レイアウト ====== */
.genre-item .rating-ctrl { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  width: 100%;
  box-sizing: border-box;
}

.genre-item .rating-ctrl .row { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

/* 行1：リストだけ（左寄せ） */
.genre-item .rating-ctrl .row-list { 
  justify-content: flex-start; 
}

/* 行2：レヴュー（左） ＋ 点数ピル（右端・カード内に収める） */
.genre-item .rating-ctrl .row-review { 
  justify-content: space-between; 
}
.genre-item .rating-ctrl .row-review .avg-score-display {
  margin-left: auto;            /* 右側に寄せる */
  flex: 0 0 auto;
  max-width: 90px;              /* はみ出し防止の上限幅 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}
.genre-item .avg-score-display .avg-score-link {
  display: inline-block;
  padding: 4px 8px;             /* 収まりやすく少し小さめ */
  border-radius: 14px;
  background: #eef5ff;
  text-decoration: underline;
}

/* 行3：スライダー（伸びる） + 右にステッパー（固定幅） */
.genre-item .rating-ctrl .row-slider { 
  justify-content: space-between; 
}
.genre-item .rating-ctrl .row-slider .rating-range {
  flex: 1 1 auto;               /* 余白を全部スライダーに */
  min-width: 0;                 /* はみ出し防止 */
}
.genre-item .rating-ctrl .row-slider .rating-stepper {
  flex: 0 0 auto;               /* 右側に固定 */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.genre-item .rating-ctrl .rating-stepper .step {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--rc-btn-bg, #D3EFFF);
  color: var(--rc-btn-fg, #334155);
  font-size: 20px;
  cursor: pointer;
}
.genre-item .rating-ctrl .rating-stepper .val {
  min-width: 28px;
  text-align: center;
}

/* 最後に、はみ出し全体の保険（視覚のみ） */
.genre-item .r18-card-actions { overflow: hidden; }









/* === スライダー最大化 & 右ステッパー縮小（安全上書き）=== */

/* ① row-slider をグリッドにして「左=1fr（スライダー最大） / 右=auto（最小）」 */
.genre-item .rating-ctrl .row-slider{
  display: grid !important;
  grid-template-columns: 1fr auto; /* 左が余り全部、右は必要最小 */
  align-items: center;
  column-gap: 8px;
}

/* ② スライダーは幅いっぱい使う */
.genre-item .rating-ctrl .row-slider .rating-range{
  width: 100%;
  min-width: 0;       /* はみ出し防止 */
  margin-right: 0;    /* 余白は grid-gap に任せる */
  flex: 1 1 auto;     /* 念のための互換（古いflex指定があっても上書き） */
}

/* ③ ステッパーをコンパクトに */
.genre-item .rating-ctrl .row-slider .rating-stepper{
  display: inline-flex;
  align-items: center;
  gap: 6px;           /* コンパクト */
  flex: 0 0 auto;
}

.genre-item .rating-ctrl .rating-stepper .step{
  width: 28px;        /* ← 40px から縮小 */
  height: 28px;
  border-radius: 10px;
  border: none;
  padding: 0;
  background: var(--rc-btn-bg, #D3EFFF);
  color: var(--rc-btn-fg, #334155);
  font-size: 16px;    /* アイコンサイズも控えめに */
  line-height: 1;
  cursor: pointer;
}

.genre-item .rating-ctrl .rating-stepper .val{
  min-width: 26px;    /* 数字は省スペース */
  text-align: center;
  font-size: 14px;
}

/* ④ 極小幅対策：さらに狭い時は数字を省略（任意） */
@media (max-width: 420px){
  .genre-item .rating-ctrl .rating-stepper{ gap: 4px; }
  .genre-item .rating-ctrl .rating-stepper .step{ width:26px; height:26px; font-size:15px; }
  /* 数字を消したい場合は下をON
  .genre-item .rating-ctrl .rating-stepper .val{ display:none; }
  */
}




/* スライダー行：スライダーを最大、右の(− 50 ＋)は最小 */
.genre-item .rating-ctrl .row-slider{
  display: grid;
  grid-template-columns: 1fr auto;  /* ← これで横幅が伸びる */
  align-items: center;
  column-gap: 10px;
}

/* range を「幅:100% / 余白ゼロ」で広げる */
.genre-item .rating-ctrl .row-slider input[type="range"]{
  width: 100%;
  min-width: 0;   /* grid内の縮み対策 */
  flex: 1 1 auto; /* 念のため */
}

/* 右側の (− 50 ＋) をコンパクト固定幅に */
.genre-item .rating-ctrl .row-slider .rating-stepper{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #e8f2ff;
  flex: 0 0 auto;
}

/* ボタンと数値を詰める（お好みで数値だけ小さくも可） */
.genre-item .rating-ctrl .rating-stepper .step{
  width: 32px; height: 32px; line-height: 32px;
  border: none; border-radius: 10px; background: #d3efff;
}
.genre-item .rating-ctrl .rating-stepper .val{
  width: 32px; text-align: center; font-variant-numeric: tabular-nums;
}

/* レビュー行は右の点数を自動で内側に寄せる（はみ出し防止） */
.genre-item .rating-ctrl .row-review{
  display: grid;
  grid-template-columns: auto 1fr;  /* ボタン + 右側スペーサ */
  align-items: center;
}
.genre-item .rating-ctrl .row-review .avg-score-display{
  margin-left: auto; max-width: 84px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}



.genre-item{ width: 210px !important; max-width: 210px !important; }



/* row-slider の4カラム： [−] [slider:1fr] [+] [value] */
.genre-item .rating-ctrl .row-slider{
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 10px;
  margin-top: 6px;
}

/* スライダーを最大幅に */
.genre-item .rating-ctrl .row-slider .rating-range{
  width: 100%;
  min-width: 0;  /* grid内の縮み抑止 */
}

/* − / ＋ をコンパクトに */
.genre-item .rating-ctrl .row-slider .step{
  width: 36px; height: 36px;
  border: 0; border-radius: 10px;
  background: #d3efff;
  font-weight: 600;
  cursor: pointer;
}

/* 右端の数値 */
.genre-item .rating-ctrl .row-slider .rating-value{
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 念のため古いステッパーを消す（残っている場合） */
.genre-item .rating-stepper{ display:none !important; }




/* 上の平均スコア行と「リスト」の行の間隔をとる */
.genre-item .rating-area{
  margin: 6px 0 12px;   /* 下にスペース */
}

/* 1行目（リスト）と2行目（レヴュー）のレイアウトを統一 */
.genre-item .rating-ctrl .row-list,
.genre-item .rating-ctrl .row-review{
  display: grid;
  grid-template-columns: auto 1fr; /* 左：ボタン / 右：ピル */
  align-items: center;
  column-gap: 10px;
  margin-top: 8px;                 /* 行間 */
}

/* 右側の値（点数ピル）を右寄せ */
.genre-item .rating-ctrl .row-review .avg-score-display{
  justify-self: end;
}

/* 1行目と同じ“水色のピル”に統一（レビュー側のリンク） */
.genre-item .avg-score-display .avg-score-link{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F7FCFF;
  border: 1px solid #dbeafe;
  color: #1f3370;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;  /* 下線を消す（下線が欲しければ削除） */
}

/* 上の平均点ピル（#average-rating-display-…）も見た目を固定 */
.genre-item .score-display .score-main{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F7FCFF;
  border: 1px solid #dbeafe;
  color: #1f3370;
  line-height: 1;
  font-weight: 600;
}





/* まず、このエリアは左揃えベースにする */
.genre-item .r18-card-actions,
.genre-item .action-button-grid{
  text-align: left !important;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;   /* ← 中央寄せを打消し */
  gap: 8px;                          /* 行間（リスト↔レヴュー） */
  padding: 10px 12px 12px;           /* ばらつき防止：左右12に統一 */
}

/* ボタンにかかっている相対位置ズレをリセット */
.genre-item .add-to-shelf-button{
  position: static !important;
  top: auto !important; bottom: auto !important;
  left: auto !important; right: auto !important;
  margin: 0 !important;
}

/* リスト/レヴューボタンの左端ラインを揃える（幅を揃える） */
.rating-ctrl .mylist-main,
.rating-ctrl .review-button{
  min-width: 120px !important;  /* 必要なら110〜130で微調整 */
  align-self: flex-start;
  margin: 0;                    /* 余計な外側余白を消す */
}

/* 各行の基本レイアウト＆上下間隔を固定 */
.rating-ctrl .row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}
.rating-ctrl .row + .row{        /* リスト行の下・レヴュー行の下の間隔 */
  margin-top: 8px !important;
}

/* レヴュー右の点数ピルは右端へ。はみ出し防止 */
.rating-ctrl .avg-score-display{
  margin-left: auto;
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* スライダー行：横幅を優先、右側はコンパクトに */
.rating-ctrl .row-slider input[type="range"]{
  flex: 1 1 120px;   /* スライダーを広く見せる */
  min-width: 120px;
}
.rating-ctrl .row-slider .step{  /* ±ボタンを小さめに */
  width: 36px; height: 36px; padding: 0; border-radius: 12px;
}
.rating-ctrl .row-slider .val{
  width: 28px; text-align: right; margin-left: 6px;
}











/* === Tag Pills: fixed 2 cols × 3 rows ========================= */
/* 🔧 開発用メモ：対応JS → card-render-50-800-5.js (.r18-card-tags / .cmx-tag / .tag-edit) */




.r18-card-tags .cmx-tag{
  display: inline-flex;
  align-items: center;
  height: 24px;                              /* 行高と一致 */
  max-width: 140px;                          /* 必要なら 120〜160 で調整可 */
  padding: 0 10px;
  border-radius: 9999px;
  background: var(--tag-bg, #D3EFFF);        /* アオ基調 */
  color: var(--tag-fg, #30424f);
  font-size: 12px;
  line-height: 24px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;

  white-space: nowrap;                       /* 1行固定（…は出さない） */
  overflow: hidden;
  text-overflow: clip;                       /* 省略記号なしでカット */
}

/* タグアイコンは使わない */
.r18-card-tags .cmx-tag::before{ content: none; }

/* 編集ピル（6枠目）だけ色を変える */
.r18-card-tags .cmx-tag.tag-edit{
  background: #FFE5EF;                       /* Cocoピンク */
  border-color: rgba(233,126,161,.35);
}
.r18-card-tags .cmx-tag:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  background: var(--tag-bg-hover, #EAF6FF);
}
.r18-card-tags .cmx-tag.tag-edit:hover{
  background: #ffd4e3;
}

/* モバイルはピル幅を少し狭く */
@media (max-width: 480px){
  .r18-card-tags .cmx-tag{ max-width: 120px; }
}





/* 🔧 タグ編集モーダル（共通） */
.cmx-modal{position:fixed;inset:0;display:none}
.cmx-modal[aria-hidden="false"], .cmx-modal.show{display:block}
.cmx-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:12001}
.cmx-modal__panel{
  position:relative;max-width:720px;margin:6vh auto;background:#fff;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);padding:16px;z-index:12001
}
.cmx-modal__header,.cmx-modal__footer{display:flex;align-items:center;gap:8px}
.cmx-modal__header{justify-content:space-between;margin-bottom:8px}
.cmx-modal__body{max-height:65vh;overflow:auto}

/* スクロールロック（共通） */
html.modal-open{overflow:hidden}

/* タグエディタ内のチップ等（最低限） */
.tag-edit-wrap .chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tag-chip{display:inline-flex;align-items:center;gap:6px;background:#f4f6fb;border-radius:999px;padding:4px 8px}
.tag-chip .chip-del{border:0;background:transparent;cursor:pointer}
.suggest-list{display:grid;gap:8px;margin-top:8px}
.suggest-item{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center}




/* 🔧 タグ編集モーダル：常に最前面に固定（スタッキングコンテキスト対策） */
.cmx-modal{
  position: fixed;
  inset: 0;
  /* 32bit環境でも安全域の最大級値にゃ */
  z-index: 2147483000; /* 背景より上 */
}
.cmx-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 2147483000; /* オーバーレイ層 */
}
.cmx-modal__panel{
  position: relative;
  max-width: 720px;
  margin: 6vh auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 16px;
  z-index: 2147483001; /* パネルはオーバーレイの上 */
}










/* ========= タグ編集モーダルの見た目アップデート ========= */
/* パレット（必要なら既存と統合してね） */
:root{
  --ink-blue: #1f2a44;   /* インクブルー */
  --pink:     #E97EA1;   /* 既定ピンク */
  --pale-blue:#D3EFFF;   /* 既定アオ（薄） */
}

/* 見出し：インクブルーに */
.cmx-modal__header h2{
  color: #4B4B69;

  font-weight: 800;
  letter-spacing: .02em;
  position: relative;
}
.cmx-modal__header h2::after{
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--pink), transparent 70%);
  margin-top: .5rem;
}

/* ×ボタン：丸く、ホバーで少し濃く */
.cmx-modal__close{
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  display: inline-grid; place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cmx-modal__close:hover{
  background: var(--pale-blue);
  border-color: rgba(0,0,0,.18);
  transform: scale(1.05);
}

/* ボタンの共通 */
.cmx-modal__footer .btn{
  -webkit-appearance: none; appearance: none;
  font-weight: 700;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.cmx-modal__footer .btn:active{ transform: translateY(1px); }

/* キャンセル＝アウトライン（インクブルー枠） */
.cmx-modal__footer .btn.btn-secondary{
  background: #fff;
  color: #4B4B69;

  border-color: #4B4B69;
}
.cmx-modal__footer .btn.btn-secondary:hover{
  background: rgba(31,42,68,.06);
}

/* 保存＝主ボタン（インクブルー塗り＋薄いブルー影） */
.cmx-modal__footer .btn.btn-primary{
  background: #4B4B69;

  color: #fff;
  box-shadow: 0 6px 14px rgba(31,42,68,.18);
}
.cmx-modal__footer .btn.btn-primary:hover{
  filter: brightness(1.05);
}

/* スマホでのボタン間隔 */
@media (max-width: 480px){
  .cmx-modal__footer{ gap: .5rem; }
  .cmx-modal__footer .btn{ flex: 1 1 auto; }
}






/* 20251020 サムネ固定サイズ：210×180 */
.cmx-card img.main-image{
  display:block;
  width:210px !important;
  height:180px !important;
  object-fit:cover;          /* 端をトリムして枠にフィット */
  object-position:center;    /* 中央でトリム */
  border-radius: 8px;        /* 任意：角丸が必要なら */
}

/* もし親がアスペクト比を強制していたら解除（保険） */
.cmx-card .card-thumb,
.cmx-card .image-wrap{
  aspect-ratio:auto !important;
  height:auto !important;
  overflow:hidden;           /* トリム時のはみ出し防止 */
}




/* ===== FINAL OVERRIDE: force 2-col grid for .r18-card-tags and fix 'edit' position ===== */
.cmx-card .r18-card-tags{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  align-items: start;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.cmx-card .r18-card-tags > .cmx-tag{
  white-space: nowrap;
  width: max-content;
}
.cmx-card .r18-card-tags > a.cmx-tag.tag-edit{
  grid-column: 2 !important;
  grid-row: 3 !important;
  justify-self: end;
  margin-left: 0 !important;
}





/* =========================================================
   🔘 チェックフィルターボタン（全部 / チェックだけ / 隠す）
   パステルデザイン
   ========================================================= */
/* ===== series modal background : FIXED ===== */

/* body に疑似要素を出す */
body.sp-modal-open::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9990;
  pointer-events: none; /* クリックはモーダル側へ */
}

/* モーダル本体は必ず前 */
#series-picker-root{
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.sp-sheet{
  position: relative;
  z-index: 10001;
}














/* 🔧 概要：チェック済みフィルター（.view-filter-btn）をヘッダーの .cmh-btn と同じトーンに揃える */

/* バー全体：横並び＆間隔 */
.view-filter-bar{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ボタン本体：マイページ/ログアウト寄せ */
.view-filter-btn{
  appearance: none;
  border: 1px solid rgba(233, 126, 161, 0.55); /* #E97EA1 */
  background: #F7FCFF;
  color: #4B4B69;

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

  font-weight: 700;
  letter-spacing: .02em;

  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  cursor: pointer;

  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}

.view-filter-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  background: #FFFFFF;
}

/* 選択中（is-active）：淡いピンクで強調 */
.view-filter-btn.is-active{
  background: #FFE5EF;
  border-color: rgba(233, 126, 161, 0.75);
}

/* フォーカス輪郭（アクセシビリティ） */
.view-filter-btn:focus,
.view-filter-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(211, 239, 255, 0.95);
}






/* PCでは columns を必ず横並びにする（display 競合を起こさない） */
@media (min-width: 1025px){
  .columns{
    flex-direction: row;
  }
}




/* ===== カード内：新しい 3行レイアウトを安定させる ===== */
.genre-item .r18-card-actions { padding: 8px 12px 12px; }




/* ===== カード内：アクションエリア（3行構成の土台） ===== */
.genre-item .action-button-grid {
  display: block;        /* 通常指定で十分 */
}

/* アクション全体の余白 */
.genre-item .r18-card-actions {
  padding: 8px 12px 12px;
}


/* ===============================
   columns 基本レイアウト（PC）
================================ */
.columns {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* 左・中央・右カラム */
.left-column {
  width: 240px;
  flex-shrink: 0;
}

.center-column {
  flex: 1;
  min-width: 0;          /* ← 折り返しの要 */
  padding: 12px 20px 20px;
}

.right-column {
  width: 260px;
  flex-shrink: 0;
}





/* ===============================
   Mobile ≤768px
================================ */
@media (max-width: 768px) {
  .columns {
    flex-direction: column;
    gap: 12px;
    padding: 0 12px;
  }

  .left-column,
  .center-column,
  .right-column {
    width: 100%;
    margin: 0;
  }

  .center-column {
    order: 1;
    padding: 12px 0;
  }

  .left-column { order: 2; }
  .right-column { order: 3; }
}




/* ===============================
   カード列（共通・唯一）
================================ */

/* カードが直接入る親 */
#home-new,
#home-clicks,
#home-likes,
#home-rating,
#home-detail-recommendation,
#home-score,
#work-list-root {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;                 /* ← カード間隔は常に固定 */
  justify-content: flex-start;
}

/* カード本体 */
.cmx-card {
  width: 260px;              /* 基準カード幅 */
  margin: 0;                 /* 勝手な余白を完全排除 */
}



@media (max-width: 480px) {
  .cmx-card {
    width: 100%;
  }
}






/* 🔽 スマホ・タブレット用だけ */
@media (max-width: 1024px) {

  .columns {
    display: flex;
    flex-direction: column;
  }

  .center-column {
    order: 1;
  }

  .left-column {
    order: 2;
  }

  #right-column-placeholder {
    order: 3;
  }

}








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

.page-preference-area{

  max-width:1200px;
  margin:24px auto 32px;
  padding:24px;

  background:#FFFFFF;

  border:1px solid #E8E8F5;

  border-radius:18px;

  box-shadow:
    0 6px 18px rgba(75,75,105,.08);

}


.page-preference-area .preference-box{

  max-width:720px;

  margin:0 auto;

}









/* =====================================
   Preference Page Header
===================================== */

.page-preference-area {

  width: 100%;
  max-width: 1200px;

  margin: 24px auto 36px;

  padding: 28px 24px;

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

  background: #fff;

  border: 1px solid #ECEAF8;
  border-radius: 22px;

  box-shadow:
    0 6px 18px rgba(60,60,100,.06);

}

/* タイトル */

.page-preference-title {

  margin-bottom: 18px;

  color: #4B4B69;

  font-size: 26px;
  font-weight: 700;

  text-align: center;

}

/* Preference本体 */

.page-preference-area .preference-box {

  width: 100%;
  max-width: 420px;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

}

/* スマホ */

@media (max-width:768px){

  .page-preference-area{

    margin:16px auto 24px;

    padding:20px 16px;

    border-radius:18px;

  }

  .page-preference-title{

    font-size:22px;

    margin-bottom:14px;

  }

  .page-preference-area .preference-box{

    max-width:320px;

  }

}





.preference-btn.is-hidden {
  opacity: .35;
  pointer-events: none;
}




.preference-buttons {

  display: flex;

  justify-content: center;

  gap: 10px;

}

.preference-item {

  transition:
    opacity .2s ease,
    transform .2s ease;

}

.preference-item.is-hidden {

  display: none;

}