:root {
  /* 区分の印（フォルダ）。色は使う側の文字色を流す */
  --yms-ico-folder: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h5.6l1.7 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"/></svg>');
}
/* 間取り gallery（にじエロ型）。数値は nijifan-net-design-probe-20260904.md の実測。色の帯・フッターは間取りの一部なのでここに持つ。9/4 夜 */
.yms-layout-gallery { --gwidth: 1232px; --gred: #C50025; }
.yms-layout-gallery .yms-gwrap, .yms-layout-gallery .yms-shell { max-width: calc(var(--gwidth) + 48px); margin: 0 auto; padding: 0 24px 48px; }
.yms-layout-gallery .yms-gwrap--narrow { max-width: 1116px; }

/* 記事0件のデモ骨格。架空作品を作らず、実データ投入後の情報密度と優先順だけ見せる。 */
.yms-demo-shell { padding-top: 20px; color: #171717; }
.yms-demo-label { display: block; margin-bottom: 7px; color: #b40022; font: 800 11px/1.2 Poppins, Roboto, system-ui, sans-serif; letter-spacing: .15em; }
.yms-demo-types { display: flex; gap: 8px; padding: 8px 0 6px; overflow-x: auto; }
.yms-demo-types span { flex: 0 0 auto; min-width: 104px; padding: 9px 16px; background: #111; color: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.yms-demo-status { margin: 7px 0 0; color: #888; font-size: 10.5px; line-height: 1.5; text-align: right; }
.yms-demo-grid { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) minmax(180px, 240px); grid-template-areas: "categories main ranking"; gap: 32px; align-items: start; padding: 36px 0 48px; }
.yms-demo-panel--categories { grid-area: categories; }
.yms-demo-main { grid-area: main; }
.yms-demo-panel--ranking { grid-area: ranking; }
.yms-demo-grid h2 { margin: 0 0 18px; color: #111; font-size: 19px; line-height: 1.35; }
.yms-demo-category { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #e8e8e8; color: #333; font-size: 12px; font-weight: 700; }
.yms-demo-category b { color: #b40022; }
.yms-demo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 15px; }
.yms-demo-card { min-width: 0; }
.yms-demo-cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(145deg, #e8e8e8 0 48%, #dedede 48% 100%); }
.yms-demo-cover::before { content: ""; position: absolute; inset: 12% 17% 31%; border-radius: 50% 50% 44% 44%; background: #d1d1d1; }
.yms-demo-cover i:first-child { position: absolute; left: 12%; right: 12%; bottom: 11%; height: 29%; background: #d4d4d4; border-radius: 50% 50% 0 0; }
.yms-demo-cover i:last-child { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #b40022; }
.yms-demo-line { display: block; height: 8px; margin-top: 8px; background: #e4e4e4; }
.yms-demo-line--short { width: 42%; height: 6px; margin-top: 11px; background: #cfcfcf; }
.yms-demo-ranking { display: flex; flex-direction: column; }
.yms-demo-rank { display: grid; grid-template-columns: 22px 54px 1fr; gap: 9px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e8e8e8; }
.yms-demo-rank > b { align-self: start; color: #b40022; font-size: 16px; font-style: italic; }
.yms-demo-rank-cover { display: block; aspect-ratio: 4 / 5; background: #e2e2e2; }
.yms-demo-rank > span:last-child i { display: block; height: 7px; margin: 7px 0; background: #dedede; }
.yms-demo-rank > span:last-child i:last-child { width: 62%; background: #ededed; }
body.home:has(.yms-demo-shell) .yms-credit { display: none; }

@media (max-width: 900px) {
  .yms-demo-grid { grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: "main main" "categories ranking"; }
}
@media (max-width: 760px) {
  .yms-layout-gallery .yms-gwrap, .yms-layout-gallery .yms-shell { padding-left: 16px; padding-right: 16px; }
  .yms-demo-shell { padding-top: 8px; }
  .yms-demo-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .yms-demo-types span { min-width: 0; padding: 9px 4px; font-size: 11px; }
  .yms-demo-grid { grid-template-columns: 1fr; grid-template-areas: "main" "categories" "ranking"; gap: 34px; padding: 28px 0 38px; }
  .yms-demo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
}

/* 姉妹サイトのタブ（9/6）: 帯の上の細い段 28px・#1A1A1A・12px。option yms_sister_sites が空なら出ない */
.yms-sisters { background: #1A1A1A; color: #BDBDBD; }
.yms-sisters__in { max-width: calc(var(--gwidth) + 48px); margin: 0 auto; padding: 0 24px; min-height: 28px; display: flex; align-items: center; gap: 2px; overflow-x: auto; white-space: nowrap; }
.yms-sisters__lab { font-size: 11px; letter-spacing: .1em; color: #8A8A8A; margin-right: 8px; }
.yms-sisters a { color: #BDBDBD; text-decoration: none; font-size: 12px; font-weight: 700; padding: 0 10px; min-height: 28px; display: inline-flex; align-items: center; }
.yms-sisters a.is-here { color: #fff; border-bottom: 2px solid var(--gred); }
@media (max-width: 767px) { .yms-sisters__in { padding: 0 12px; } }

/* 帯: 高さ60（SP54）・#0A0A0A。名前・メニュー14px/700・検索 */
.yms-topbar { background: #0A0A0A; color: #fff; }
.yms-topbar__in { max-width: calc(var(--gwidth) + 48px); margin: 0 auto; padding: 0 24px; min-height: 60px; display: flex; align-items: center; gap: 22px; }
.yms-topbar__name { color: #fff; text-decoration: none; font-size: 18px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; }
/* ロゴ（9/5 Codex納品 banners-<skin>/logo-header.svg）: PC 130×40・SP 104×32。参考サイトの帯60pxに40pxの白抜き */
.yms-topbar__name.yms-brand--logo { display: inline-flex; align-items: center; }
.yms-topbar__name img { display: block; width: 130px; height: 40px; }
.yms-gfoot__name img { display: block; width: 156px; height: 48px; }
.yms-topbar__nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }   /* overflow-x を付けると overflow-y も auto になり、開閉パネル（絶対配置）が帯の箱で切り落とされる（9/5 レビューで実測） */
.yms-topbar__nav a, .yms-topbar__nav .yms-topbar__dd > label { color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.yms-topbar__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.yms-topbar__search { display: flex; margin-left: auto; }
.yms-topbar__search input { width: 150px; min-height: 40px; border: 1px solid #333; background: #1c1c1c; color: #fff; padding: 0 10px; border-radius: 2px 0 0 2px; font-size: 13px; }
.yms-topbar__search button { min-width: 44px; min-height: 40px; border: 1px solid #333; border-left: 0; background: #1c1c1c; color: #fff; font-size: 18px; border-radius: 0 2px 2px 0; cursor: pointer; }
@media (max-width: 767px) { .yms-topbar__in { min-height: 54px; gap: 10px; padding: 0 12px; } .yms-topbar__search input { width: 84px; } .yms-topbar__name { font-size: 16px; } .yms-topbar__name img { width: 104px; height: 32px; } }

/* 節の見出し: 英字11px 字間広め #999 → 和名 17px/700 #111。左に3pxの黒線 */
.yms-ghead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 28px 0 14px; padding-left: 12px; border-left: 3px solid #111; }
.yms-ghead__en { display: block; font-size: 11px; letter-spacing: .14em; color: #999; font-weight: 600; font-family: Poppins, Roboto, system-ui, sans-serif; }
.yms-ghead h2 { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: #111; }
.yms-gmain > .yms-ghead h2 { font-size: 20px; }
.yms-ghead__more { font-size: 11.5px; font-weight: 700; color: #555; text-decoration: none; }

/* 表紙の帯: 5列（画像は売場の原画の比のまま）。題 11px/600 #333 */
.yms-gstrip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .yms-gstrip { grid-template-columns: repeat(5, 1fr); gap: 10px; } }
.yms-gstrip .yms-card { border: 0; background: transparent; box-shadow: none; }
.yms-gstrip .yms-card__cover { border-radius: 2px; overflow: hidden; background: #F0F0F0; }
.yms-gstrip .yms-card__body { padding: 6px 0 0; }
.yms-gstrip .yms-card__title { font-size: 11px; font-weight: 600; color: #333; -webkit-line-clamp: 1; line-height: 1.6; }
.yms-gstrip .yms-card__meta { margin-top: 2px; }
.yms-gstrip .yms-card__meta > span:first-child, .yms-gstrip .yms-card__meta > time { display: none; }
.yms-gstrip .yms-card__price { font-size: 12px; }

/* 3列: 280｜24｜624｜24｜280 */
.yms-gcols { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1100px) {
  .yms-gcols { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
  .yms-gcols--archive { grid-template-columns: minmax(0, 1fr) 317px; }
  .yms-gcols--noleft { grid-template-columns: minmax(0, 1fr) 300px; }   /* 左の脇が空（新しい面でタグがまだ無い等）の時は2列 */
  .yms-gcols--noright { grid-template-columns: 280px minmax(0, 1fr); }   /* 右の脇が空の時も同じ扱い */
  /* 9/10 深瀬「記事は1カラムにしたい」。絵が主役の面は脇を持たず、真ん中に寄せる */
  .yms-gcols--one { grid-template-columns: minmax(0, 1fr); }
  .yms-gcols--term-full { grid-template-columns: minmax(0, 1fr); }
  .yms-gcols--one .yms-gmain { max-width: 760px; margin: 0 auto; width: 100%; }
}
@media (max-width: 1099px) { .yms-gside--l { order: 3; } .yms-gmain { order: 1; } .yms-gside--r { order: 2; } }
.yms-gside__sec + .yms-gside__sec { margin-top: 6px; }

/* 中央の記事カード: 2列の格子（9/6 深瀬: 原本560pxを1列640pxに引き伸ばすと荒れる → 2列で原寸以下に）。題 17px/700 #222、区分 13px/600、日付 12px #999、札 12px #555 on #ECECEC */
.yms-gmain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; align-content: start; }
.yms-gmain > :not(.yms-gpost) { grid-column: 1 / -1; }   /* 見出し・パンくず・送りは全幅 */
.yms-gmain > .yms-ghead { margin-bottom: 0; }
.yms-gpost { margin: 0; display: flex; flex-direction: column; }
.yms-gpost__cover .yms-card__cover { aspect-ratio: 4 / 3; }
.yms-gpost__cover .yms-card__cover img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) { .yms-gmain { gap: 18px 10px; } .yms-gpost__title { font-size: 14px; } .yms-gpost .yms-gtags { display: none; } .yms-gbadge { top: 6px; left: 6px; font-size: 11px; padding: 4px 5px; } }
.yms-gpost__cover { position: relative; display: block; border-radius: 2px; overflow: hidden; background: #F0F0F0; color: inherit; text-decoration: none; }
.yms-gpost__cover .yms-card__cover { width: 100%; }
.yms-gbadge { position: absolute; top: 12px; left: 12px; background: var(--gred); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 6px 7px; line-height: 1; border-radius: 4px; }
.yms-gpost__meta { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; font-size: 12px; color: #999; }
.yms-gpost__cat { font-size: 13px; font-weight: 600; color: #222; }
/* 9/11 深瀬「カテゴリの左の図形ダサいからフォルダとかのアイコンに」。
   色は文字に追従させたいので mask で塗る（1色のSVGを型紙にして currentColor を流す） */
.yms-gpost__cat::before { content: ""; display: inline-block; width: 13px; height: 13px;
  margin-right: 5px; vertical-align: -2px; background-color: currentColor; opacity: .55;
  -webkit-mask: var(--yms-ico-folder) center / contain no-repeat; mask: var(--yms-ico-folder) center / contain no-repeat; }
.yms-gpost__title { margin: 0 0 8px; font-size: 17px; line-height: 1.4; font-weight: 700; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.4em * 2); }
.yms-gpost__title a { color: inherit; text-decoration: none; }
.yms-gcols--archive .yms-gpost__title { font-size: 17px; }
.yms-gtags { display: flex; flex-wrap: wrap; gap: 6px; }
.yms-gtag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 6px 11px; background: #ECECEC; color: #555; text-decoration: none; font-size: 12px; font-weight: 400; line-height: 1; border-radius: 4px; }
/* 脇のタグ: 11px #333・白・枠 #E0E0E0・角4。件数 10px→11px #999（D-185 の刻み） */
.yms-gside .yms-gtag { background: #fff; border: 1px solid #E0E0E0; color: #333; font-size: 11px; padding: 5px 10px; min-height: 28px; }
.yms-gtag--n span { color: #999; font-size: 11px; font-variant-numeric: tabular-nums; }
.yms-gside .yms-gtags { gap: 6px; }

/* 右の脇の行・ボタン（280×41・11.5px/700・#111・角2） */
.yms-grows { display: flex; flex-direction: column; }
.yms-grow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #EEE; color: inherit; text-decoration: none; }
.yms-grow .yms-card__cover { flex: 0 0 96px; width: 96px; border-radius: 2px; overflow: hidden; background: #F0F0F0; }
.yms-grow__t { font-size: 13px; font-weight: 600; line-height: 1.5; color: #222; min-width: 0; }
.yms-grow__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* 9/6: 切るのは題だけ。日付・価格は下に必ず出す */
.yms-grow__t time { display: block; font-size: 11px; color: #999; font-weight: 400; margin-top: 2px; }
.yms-grow__sub { display: block; font-size: 11px; color: #999; font-weight: 400; margin-top: 2px; }
/* 左の脇の割引の行（9/6）: 表紙96px（4:3）に %OFF の赤札、現在価格は赤太字 */
.yms-grow__cover { position: relative; flex: 0 0 96px; width: 96px; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; background: #F0F0F0; }
.yms-grow__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yms-grow__off { position: absolute; left: 4px; top: 4px; background: var(--gred); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 5px; border-radius: 2px; }
.yms-grow--sale .yms-grow__t time { color: var(--gred); font-weight: 800; font-size: 13px; }
.yms-gbtn { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; background: #111; color: #fff; text-decoration: none; font-size: 11.5px; font-weight: 700; border-radius: 2px; letter-spacing: .02em; }
.yms-gbtn--red { background: var(--gred); }
.yms-gside .yms-sale { grid-template-columns: 1fr; }
.yms-gside .widget__title, .yms-gside .yms-rankhead h2 { font-size: 17px; font-weight: 700; color: #111; padding-left: 12px; border-left: 3px solid #111; }

/* 記事の看板: 500px（SP380）・表紙を背景に暗く重ねる・パンくず45px・題32px白 */
.yms-ghero { position: relative; min-height: 500px; background: #111; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
/* 9/10 深瀬「ぼかさなくていい。タイトルが載る部分だけちょっと黒くしているんでしょ本家は。それで良くない？」
   以前は絵ぜんぶを 1px ぼかして 45% まで暗くしていた。高精細画面では2画素ぶんのぼけになり、
   これが「上の画像だけ荒い」の正体だった。**絵はそのまま出し、題字が載る下側だけ暗くする。** */
.yms-ghero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yms-ghero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.30) 0, rgba(0,0,0,.10) 30%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.82) 100%);
}
.yms-ghero__in { position: relative; z-index: 1; max-width: calc(var(--gwidth) + 48px); width: 100%; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 500px; }
.yms-gcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 45px; font-size: 12px; color: rgba(255,255,255,.8); }
.yms-gcrumb a { color: inherit; text-decoration: none; }
.yms-gcrumb__cur { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.yms-gcrumb--dark { color: #777; min-height: 36px; }
.yms-gcrumb--dark .yms-gcrumb__cur { color: #222; }
.yms-ghero__title { padding: 0 0 28px; }
.yms-gchip--cat { display: inline-block; background: #1A1A1A; color: #fff; font-size: 12px; font-weight: 700; padding: 7px 10px; line-height: 1; border-radius: 2px; text-decoration: none; margin-bottom: 12px; }
.yms-ghero .entry-title { margin: 0 0 8px; font-size: 28px; line-height: 1.35; font-weight: 700; color: #fff; max-width: 800px; text-wrap: balance; }
.yms-ghero__date { margin: 0; font-size: 12px; color: rgba(255,255,255,.75); }
@media (max-width: 767px) { .yms-ghero, .yms-ghero__in { min-height: 380px; } .yms-ghero .entry-title { font-size: 22px; } }

/* 同人プリズムの記事見出し: 上部に表紙を重複させず、作品名を短く読ませる。 */
.yms-ghero--title-only {
  width: 100%; min-height: 220px; background: #0b0b0d;
}
.yms-ghero--title-only::after { display: none; }
.yms-ghero--title-only .yms-ghero__in { min-height: 217px; padding-top: 20px; padding-bottom: 30px; }
.yms-ghero--title-only .yms-gcrumb { min-height: 34px; }
.yms-ghero--title-only .yms-ghero__title { padding: 34px 0 0; }
.yms-ghero--title-only .entry-title { font-size: clamp(24px, 2.45vw, 35px); line-height: 1.45; }
@media (max-width: 767px) {
  .yms-ghero--title-only { min-height: 168px; }
  .yms-ghero--title-only .yms-ghero__in { min-height: 165px; padding: 10px 16px 22px; }
  .yms-ghero--title-only .yms-ghero__title { padding: 16px 0 0; }
  .yms-ghero--title-only .entry-title { font-size: 21px; }
}

/* 記事脇のタグは探索語として残しつつ、主役の表紙と本文を押し下げない。 */
.yms-gside .yms-gtags--compact { gap: 4px; }
.yms-gside .yms-gtags--compact .yms-gtag {
  min-height: 22px; padding: 3px 7px; border-radius: 3px; font-size: 10.5px; line-height: 1.25;
}
.yms-gside .yms-gtags--compact .yms-gtag span { margin-left: 4px; font-size: 9.5px; }
.yms-gside__more {
  display: inline-flex; margin-top: 8px; color: #555; font-size: 11px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.yms-layout-gallery .yms-gcols--article { margin-top: 28px; }
.yms-layout-gallery .yms-single--gallery .entry-content { max-width: none; }
.yms-layout-gallery .yms-single--gallery .entry-content > h2 { font-size: 24px; font-weight: 800; color: #16161A; }
.yms-layout-gallery .yms-single--gallery .entry-content img { border-radius: 2px; }

/* 同人プリズム本文: 白黒を主役にして、区切りだけピンク×水色で識別する。 */
.yms-profile-doujin .yms-single--gallery .entry-content h2 {
  position: relative; margin: 34px 0 16px; padding: 0 0 10px; border: 0;
  font-size: 22px; line-height: 1.45;
}
.yms-profile-doujin .yms-single--gallery .entry-content h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 84px; height: 3px;
  background: linear-gradient(90deg, #ff78b8, #82d9ff);
}
.yms-profile-doujin .yms-single--gallery .yf-five-lead {
  margin: 0 0 28px; padding: 16px 18px; border-left: 3px solid #ff78b8;
  background: #fafafa; color: #333; line-height: 1.9;
}
.yms-profile-doujin .yms-single--gallery .yf-five-facts {
  margin: 0 0 24px; border-top: 0; border-bottom: 1px solid #e5e5e8;
}
.yms-profile-doujin .yms-single--gallery .yf-five-facts > div { border-color: #ececf0; }
.yms-profile-doujin .yms-single--gallery .yf-fanza-gallery { gap: 10px; }
.yms-gpackage {
  margin: 0 auto 24px; padding: 0; text-align: center;
}
.yms-gpackage__image {
  display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: 2px;
}
.yms-gcommerce {
  margin: 24px 0 4px; padding: 0; text-align: center;
}
.yms-gcommerce__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(100%, 460px); min-height: 48px; padding: 10px 18px;
  border: 1px solid rgba(17,17,17,.12); border-radius: 4px;
  background: linear-gradient(90deg, #ff78b8 0%, #d89bdb 48%, #82d9ff 100%); color: #111 !important;
  box-shadow: 0 8px 20px rgba(70, 120, 160, .14);
  font-size: 15px; font-weight: 800; text-decoration: none;
}
.yms-gcommerce__btn:hover, .yms-gcommerce__btn:focus-visible { filter: saturate(1.08) brightness(.98); }
.yms-gcommerce__btn:focus-visible { outline: 3px solid #82d9ff; outline-offset: 3px; }
@media (max-width: 767px) {
  .yms-profile-doujin .yms-single--gallery .entry-content h2 { margin-top: 28px; font-size: 20px; }
  .yms-profile-doujin .yms-single--gallery .yf-five-lead { padding: 14px; }
  .yms-gpackage { margin-bottom: 20px; }
}

/* 一覧の題: 32px/700 #222 ＋ 件数 */
.yms-garchive-head { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 22px; }
.yms-garchive-head h1 { margin: 0; font-size: 28px; font-weight: 700; color: #222; }
.yms-garchive-head__n { font-size: 13px; color: #999; }
.yms-layout-gallery .pagination, .yms-layout-gallery .nav-links { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.yms-layout-gallery .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #E0E0E0; border-radius: 4px; color: #333; text-decoration: none; font-size: 13px; font-weight: 700; }
.yms-layout-gallery .nav-links .page-numbers.current { background: #111; color: #fff; border-color: #111; }

/* 割引の札を赤に（訴求色は #C50025 の1系統） */
.yms-layout-gallery .yms-price-off, .yms-layout-gallery .yms-sale-tile__pill { background: var(--gred); color: #fff; border-radius: 3px; font-weight: 800; }
.yms-layout-gallery .yms-price-now { color: var(--gred); font-weight: 800; }

/* 再生の印（サンプル動画のある作品だけ） */
.yms-card--movie .yms-card__cover::after { content: ""; position: absolute; left: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.58) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5v9l7.5-4.5z' fill='%23fff'/%3E%3C/svg%3E") center / 14px 14px no-repeat; pointer-events: none; }

/* 黒いフッター: #101013・中身1120・小見出し 11px/600 #E8E8EC 字間広め・下の帯70 */
.yms-gfoot { background: #101013; color: #d6d6d6; margin-top: 48px; }
.yms-gfoot__in { max-width: 1120px; margin: 0 auto; padding: 48px 24px 32px; display: grid; gap: 28px; }
@media (min-width: 900px) { .yms-gfoot__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; } }
.yms-gfoot__name { color: #fff; font-size: 22px; font-weight: 900; text-decoration: none; }
.yms-gfoot__col h2 { margin: 0 0 14px; font-size: 11px; letter-spacing: .16em; color: #E8E8EC; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid #2a2a2e; font-family: Poppins, Roboto, system-ui, sans-serif; }
.yms-gfoot__in > * { min-width: 0; }   /* 9/4 実測: SPでフッターの格子が中身の幅に引かれて417pxへはみ出した */
.yms-gfoot__posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yms-gfoot__post > span { min-width: 0; }
.yms-gfoot__post { display: flex; gap: 10px; color: #e6e6e6; text-decoration: none; }
.yms-gfoot__post .yms-card__cover { flex: 0 0 72px; width: 72px; border-radius: 2px; overflow: hidden; }
.yms-gfoot__post b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.45; }
.yms-gfoot__post small { display: block; margin-top: 4px; font-size: 11px; color: #8a8a8a; letter-spacing: .04em; }
.yms-gfoot__tags { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.yms-gfoot__tags a { color: #cfcfcf; text-decoration: none; font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
.yms-layout-gallery .yms-foot { background: #0B0B0D; color: #8a8a8a; margin: 0; padding: 22px 24px; min-height: 70px; max-width: none; width: 100%; box-sizing: border-box; }
.yms-layout-gallery .yms-foot > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.yms-layout-gallery .yms-foot a { color: #cfcfcf; font-size: 12px; }
.yms-layout-gallery .yms-foot__note { color: #7d7d7d; }

/* SPのメニュー: 三本線（checkbox＋CSS・JSなし）。PCは常に横並び */
.yms-topbar__burger { display: none; }
@media (max-width: 767px) {
  .yms-topbar__burger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; order: -1; }
  .yms-topbar__burger span { display: block; width: 20px; height: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; }
  .yms-topbar { position: relative; }
  .yms-topbar__nav { display: none; position: absolute; left: 0; right: 0; top: 54px; z-index: 30; flex-direction: column; gap: 0; background: #0A0A0A; border-top: 1px solid #222; padding: 6px 0 10px; }
  .yms-topbar__toggle:checked ~ .yms-topbar__nav { display: flex; }
  .yms-topbar__nav a, .yms-topbar__nav .yms-topbar__dd > label { min-height: 45px; padding: 0 20px; font-size: 14px; }
}

.yms-grank__tabs { display: flex; gap: 6px; background: #F7F7F7; padding: 4px; border-radius: 12px; margin: 0 0 10px; }
.yms-grank__tabs input { position: absolute; opacity: 0; pointer-events: none; }
.yms-grank__tabs label { flex: 1; text-align: center; font-size: 12.5px; font-weight: 500; color: #9A9A9A; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; }
.yms-grank__list { list-style: none; margin: 0; padding: 0; display: none; }
.yms-grank__tabs:has(#yms-grank-day:checked) ~ .yms-grank__list--day, .yms-grank__tabs:has(#yms-grank-week:checked) ~ .yms-grank__list--week,
.yms-grank__tabs:has(#yms-grank-month:checked) ~ .yms-grank__list--month, .yms-grank__tabs:has(#yms-grank-all:checked) ~ .yms-grank__list--all { display: block; }
.yms-grank__tabs:has(#yms-grank-day:checked) label[for="yms-grank-day"], .yms-grank__tabs:has(#yms-grank-week:checked) label[for="yms-grank-week"],
.yms-grank__tabs:has(#yms-grank-month:checked) label[for="yms-grank-month"], .yms-grank__tabs:has(#yms-grank-all:checked) label[for="yms-grank-all"] { background: #1A1A1A; color: #fff; }
.yms-grank__row a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EEE; color: inherit; text-decoration: none; }
.yms-grank__pos { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: #222; }
.yms-grank__pos--1 { background: #C9A227; } .yms-grank__pos--2 { background: #8C8C8C; } .yms-grank__pos--3 { background: #A0653A; }
.yms-grank__thumb { flex: 0 0 60px; width: 60px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #F0F0F0; }
.yms-grank__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 9/20 深瀬「ランキングのやつ上下に薄い灰色が載っている」。実測: 枠は 60×45（4:3）なのに
   中の `.yms-card__cover` が 800/538 で 60×40 になり、**下に 5px の下地（#F0F0F0）が出ていた**。
   絵の高さは中の箱にぶら下がるので、枠と同じ形にしないと height:100% が 40px を指す */
.yms-grank__thumb .yms-card__cover { aspect-ratio: auto; width: 100%; height: 100%; background: transparent; }
.yms-grank__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.45; color: #222; }
.yms-grank .yms-rank__source { font-size: 11px; color: #999; margin: 8px 0 0; }

/* ランキングのページ: 題30px、切替130×36、順位の札「N位」41×22 角3 */
.yms-layout-gallery .yms-rankhead h1 { font-size: 30px; font-weight: 400; color: #111; }
.yms-layout-gallery .yms-rank__badge { font-size: 12px; font-weight: 700; color: #fff; background: #222; border-radius: 3px; padding: 3px 8px; }
.yms-layout-gallery .yms-rank__badge--1 { background: #C9A227; } .yms-layout-gallery .yms-rank__badge--2 { background: #8C8C8C; } .yms-layout-gallery .yms-rank__badge--3 { background: #A0653A; }
.yms-layout-gallery .yms-rankcard__title { font-size: 17px; font-weight: 700; color: #222; }

/* 上の帯をランキング板で作る時（5列・順位の丸・題1行・値段） */
.yms-gstrip--rank { display: block; }
/* 9/5 深瀬: SPは3列（15枚で5行。2列だと帯が伸びる）。
   9/20 深瀬「スマホ上だと2カラムにしたほうがいいかもね」で2列へ。9/5の心配は本当で、
   実測(375px)は 3列15枚=帯540px・最新記事714px / 2列15枚=帯1,217px・最新記事1,390px（約2画面先）。
   そこで **SPだけ9枚目から隠して8枚**にした → 帯606px・最新記事779px で今とほぼ同じ高さ。
   絵は 110px → 169px（1.5倍）。**PC（≥900px）は5列15枚のまま**で、隠すのはSPの表示だけ。 */
.yms-gstrip--rank .yms-homerank__board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 899px) { .yms-gstrip--rank .yms-homerank__board > *:nth-child(n+9) { display: none; } }
@media (min-width: 900px) { .yms-gstrip--rank .yms-homerank__board { grid-template-columns: repeat(5, 1fr); gap: 10px; } }
.yms-gstrip--rank .yms-homerank__cell { margin: 0; }
.yms-gstrip--rank .yms-homerank__link { display: block; color: inherit; text-decoration: none; }
.yms-gstrip--rank .yms-homerank__cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #F0F0F0; }
.yms-gstrip--rank .yms-homerank__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yms-gstrip--rank .yms-homerank__badge { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: #222; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.yms-gstrip--rank .yms-homerank__cell:nth-child(1) .yms-homerank__badge { background: #C9A227; }
.yms-gstrip--rank .yms-homerank__cell:nth-child(2) .yms-homerank__badge { background: #8C8C8C; }
.yms-gstrip--rank .yms-homerank__cell:nth-child(3) .yms-homerank__badge { background: #A0653A; }
.yms-gstrip--rank .yms-homerank__name { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; color: #333; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yms-gstrip--rank .yms-rank__source { font-size: 11px; color: #999; margin: 8px 0 0; }

/* 同人デモTOP: 公式人気順15枚を主役にし、余分な見出しと三段サイドバーを置かない。 */
.yms-layout-gallery .yms-doujin-home { padding-top: 0; }
.yms-doujin-popular { margin: 8px 0 12px; }
.yms-doujin-popular .yms-homerank__board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; list-style: none; margin: 0; padding: 0; }
.yms-doujin-popular .yms-homerank__cell { min-width: 0; margin: 0; }
.yms-doujin-popular .yms-homerank__link { display: block; line-height: 0; }
.yms-doujin-popular img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.yms-doujin-home .yms-gcols--one { display: block; margin: 0; }
.yms-doujin-home .yms-gcols--one .yms-gmain { width: 100%; max-width: none; margin: 0; }
.yms-doujin-home .yms-gmain > .yms-ghead { display: none; }
@media (min-width: 900px) {
  .yms-doujin-popular .yms-homerank__board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .yms-doujin-home .yms-gmain { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 6px; }
}

/* 左の脇: カテゴリー・サークルの行（名前＋件数の丸 11px #999 on #F5F5F5 角10） */
.yms-gcats { display: flex; flex-direction: column; }
.yms-gcat { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 2px; border-bottom: 1px solid #EEE; color: #222; text-decoration: none; font-size: 13px; font-weight: 600; }
.yms-gcat b { font-size: 11px; font-weight: 400; color: #999; background: #F5F5F5; border-radius: 10px; padding: 2px 8px; font-variant-numeric: tabular-nums; }

/* 帯: カテゴリの開閉（hover/focus-within・JSなし）と虫眼鏡の検索 */
.yms-topbar__dd { position: relative; display: inline-flex; }
.yms-topbar__ddmenu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: #111; border: 1px solid #2a2a2a; padding: 6px 0; z-index: 40; grid-template-columns: repeat(2, minmax(180px, 1fr)); }   /* 9/6: ジャンル別で21項目 → 2列（1列だと906pxで画面を超えた） */
.yms-topbar__dd:hover .yms-topbar__ddmenu, .yms-topbar__dd:focus-within .yms-topbar__ddmenu, .yms-topbar__ddtoggle:checked ~ .yms-topbar__ddmenu { display: grid; }
.yms-topbar__dd > label { cursor: pointer; }
.yms-topbar__ddtoggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.yms-topbar__ddtoggle:focus-visible + label { outline: 2px solid #fff; outline-offset: -4px; }
.yms-topbar__ddmenu a { display: flex; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 14px; font-size: 13px; }
.yms-topbar__ddmenu a b { font-weight: 400; color: #9a9a9a; }
.yms-topbar__sicon { margin-left: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; cursor: pointer; }
.yms-topbar__search { display: none; margin-left: 0; }
.yms-topbar__stoggle:checked ~ .yms-topbar__search { display: flex; }
.yms-topbar__stoggle:checked ~ .yms-topbar__sicon { color: #9a9a9a; }
.yms-topbar__search input { width: 220px; }
@media (max-width: 767px) {
  .yms-topbar__search { position: absolute; left: 0; right: 0; top: 54px; padding: 8px 12px; background: #0A0A0A; border-top: 1px solid #222; z-index: 31; }
  .yms-topbar__search input { flex: 1; width: auto; }
  .yms-topbar__ddmenu { position: static; border: 0; padding-left: 12px; grid-template-columns: 1fr; }   /* SP は縦1列 */
  .yms-topbar__nav .yms-topbar__dd { flex-direction: column; align-items: stretch; }
}
/* タグ一覧・サークル一覧のページ */
.yms-gtags--big .yms-gtag { font-size: 13px; min-height: 36px; padding: 0 12px; background: #fff; border: 1px solid #E0E0E0; color: #333; }
.yms-gcols--two { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .yms-gcols--two { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* 記事: 看板の下のおすすめ6枚（198×159・5:4） */
.yms-greco { border-bottom: 1px solid #EEE; }
.yms-greco__in { max-width: calc(var(--gwidth) + 48px); margin: 0 auto; padding: 12px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 900px) { .yms-greco__in { grid-template-columns: repeat(6, 1fr); } }
.yms-greco__item { position: relative; display: block; color: #fff; text-decoration: none; border-radius: 2px; overflow: hidden; background: #F0F0F0; }
.yms-greco__item .yms-card__cover { aspect-ratio: 5 / 4; }
.yms-greco__item .yms-card__cover img { width: 100%; height: 100%; object-fit: cover; }
/* 9/10 深瀬「画像のタイトル下の黒が画像とずれていて変」。黒を題名の箱に持たせていたので、
   1行の題名と2行の題名で黒の高さが変わり、隣のカードと揃わなかった。
   **黒はカード側に固定の高さで持たせ、題名は文字だけ**にする。 */
.yms-greco__item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.45) 45%, rgba(0,0,0,.78) 100%); }
.yms-greco__t { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 8px; border-bottom: 6px solid transparent; font-size: 12px; font-weight: 700; line-height: 1.4;   /* 9/6: padding-bottom があると line-clamp の外の3行目が下に覗く（SPで実測）→ 余白は border で取る */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* 記事: 買うボタンは赤の大ボタン（274×49・角8・15.2px/800） */
.yms-layout-gallery .entry-content .wp-block-button__link { min-height: 49px; border-radius: 8px !important; font-size: 15px; font-weight: 800; max-width: 420px; margin-left: auto; margin-right: auto; }
/* 記事: 関連する同人作品 */
.yms-grels { margin: 36px 0 0; }
.yms-grels__h { margin: 0 0 14px; font-size: 24px; font-weight: 800; color: #16161A; display: flex; align-items: baseline; gap: 12px; }
.yms-grels__h small { font-size: 12px; font-weight: 600; color: #999; }
.yms-grels__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .yms-grels__grid { grid-template-columns: repeat(2, 1fr); } }
/* 9/5 深瀬「段々にならないように」: カードは縦の flex。題は2行固定、札は1行だけ、ボタンは下端（margin-top:auto）。
   表紙は 4:3 の箱に収める（縦長の表紙で高さが変わらない） */
.yms-grel { border: 1px solid #EEE; border-radius: 6px; padding: 12px; background: #fff; display: flex; flex-direction: column; }
.yms-grel__cover { display: block; border-radius: 4px; overflow: hidden; background: #F0F0F0; aspect-ratio: 4 / 3; }
.yms-grel__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.yms-grel__title { margin: 10px 0 8px; font-size: 16px; font-weight: 700; line-height: 1.45; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.45em * 2); }
.yms-grel__title a { color: inherit; text-decoration: none; }
.yms-grel .yms-gtags { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; max-height: 26px; }
.yms-grel .yms-gtag { font-size: 11px; min-height: 24px; padding: 4px 8px; background: #FAF9FB; border: 1px solid #E7E7EC; color: #6E6E78; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.yms-grel__foot { display: flex; align-items: center; margin-top: auto; padding-top: 10px; }
.yms-grel__btn { margin: 0; flex: 1; min-height: 48px; font-size: 15px; font-weight: 800; border-radius: 8px; }
/* SPの関連作品は2列の小カード（1列だと節が3画面を超える: D-184 実測 2533px） */
@media (max-width: 899px) {
  .yms-grels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .yms-grel { padding: 8px; }
  .yms-grel__title { font-size: 13px; margin: 8px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yms-grel .yms-gtags { display: none; }
  .yms-grel__foot { flex-direction: column; align-items: stretch; gap: 6px; }
  .yms-grel__btn { max-width: none; min-height: 44px; font-size: 13px; }
}

/* 数字送り */
.yms-gpager { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 24px; }
.yms-gpager__a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #E0E0E0; border-radius: 4px; color: #333; text-decoration: none; font-size: 13px; font-weight: 700; }
.yms-gpager__a.is-current { background: #111; color: #fff; border-color: #111; }
.yms-gpager__dots { display: inline-flex; align-items: center; padding: 0 4px; color: #999; }
.yms-gside--r .yms-gside__sec { margin-top: 18px; }

.yms-grank__tabs--page { display: flex; flex-wrap: wrap; gap: 8px; background: transparent; padding: 0; margin: 6px 0 14px; }
.yms-gpilltab { display: inline-flex; align-items: center; justify-content: center; min-width: 130px; min-height: 36px; padding: 0 16px; border-radius: 10px; background: #F7F7F7; color: #9A9A9A; font-size: 12.5px; font-weight: 500; text-decoration: none; }
.yms-gpilltab.is-active { background: #1A1A1A; color: #fff; }
.yms-layout-gallery .yms-rankfilter label:has(select[name="win"]) { display: none; }

/* ランキングページの札は「N位」 */
.yms-layout-gallery .yms-rankcard .yms-rank__badge::after { content: "位"; font-size: 10px; margin-left: 1px; }

/* 9/9 深瀬「本家と同じにしたい。画像は横長で隙間を作らないように処理してからサムネに」。
   枠は本家（最強エロ漫画）と同じ横長のまま。縦長のイラストは**はみ出す分を切って**枠を満たす。
   既定の contain（枠に収める）だと左右に地の色が出るので、この売場だけ cover にする。 */
.yms-provider-pixiv .yms-gpost__cover .yms-card__cover img,
.yms-provider-pixiv .yms-grow__cover img,
.yms-provider-pixiv .yms-grel__cover img,
.yms-provider-pixiv .yms-grank__thumb img { object-fit: cover; object-position: center 30%; }

/* うごイラ（9/10）。GIF の代わりに mp4 を置く。自動再生・ループ・音なしで GIF と同じ見え方 */
.yms-pxvids { margin: 0 0 12px; }
.yms-pxvid { margin: 0 auto 12px; max-width: var(--cap2, none); }   /* 9/11: 動画も元の画素で等倍に出せる幅まで */
@media (max-width: 767px) { .yms-pxvids .yms-pxvid { max-width: min(100%, var(--cap3, 100%)); } }
.yms-pxvid video { display: block; width: 100%; height: auto; background: #000; border-radius: 2px; }
/* 動くアイキャッチ。静止画と同じ枠・同じ埋め方にする（9/10） */
.yms-cover-img--moving { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.yms-provider-pixiv .yms-card__cover--moving video { object-position: center 30%; }

/* 記事の保存（マイリスト）9/10 */
.yms-bm { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; }
.yms-bm__btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 18px;
  border: 1px solid #d9d4cc; background: #fff; color: #333; font-size: 14px; font-weight: 700;
  border-radius: 3px; cursor: pointer; }
.yms-bm__btn:hover { background: #faf8f5; }
.yms-bm__btn.is-on { background: #e8355f; border-color: #e8355f; color: #fff; }
.yms-bm__icon { font-size: 15px; line-height: 1; }
.yms-bm__list { font-size: 13px; color: #6b6b6b; text-decoration: underline; }
.yms-bm-list { margin: 8px 0 40px; }
.yms-bm__empty { color: #6b6b6b; font-size: 14px; padding: 28px 0; }
.yms-bm__drop { display: block; width: 100%; min-height: 34px; margin-top: 4px; border: 0;
  background: #f2efea; color: #6b6b6b; font-size: 12px; cursor: pointer; }
.yms-bm__drop:hover { background: #e8e4dd; color: #333; }
/* マイリストの並び。一覧と同じ密度にする（9/10 実測: 1枚が全幅になっていた） */
.yms-bm-list .yms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.yms-bm-list .yms-card { background: #fff; border: 1px solid #e5e2dd; overflow: hidden; }
.yms-bm-list .yms-card__link { display: block; text-decoration: none; color: inherit; }
.yms-bm-list .yms-card__cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #eee; }
.yms-bm-list .yms-card__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.yms-bm-list .yms-card__title { display: -webkit-box; padding: 8px 10px; font-size: 13px; line-height: 1.5;
  font-weight: 700; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) { .yms-bm-list .yms-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* 脇のバナー（9/10 深瀬「左のサイドバーとかにも動くバナーとか入れたい」）。
   売場の素材はそのまま出す（切らない・歪めない: D-064）。中身が無ければ枠ごと出ない */
.yms-gside__sec--banners { display: grid; gap: 10px; }
.yms-gbanner { display: block; line-height: 0; border-radius: 2px; overflow: hidden; background: #F0F0F0; }
.yms-gbanner__img { display: block; width: 100%; height: auto; }

/* 9/11 深瀬「今後は二列でいいかな」。実測で 3列=199px／2列=305px、どちらも引き伸ばし無し
   （供給÷必要 1.93 と 1.26）。違いは絵の大きさと縦の長さだけなので、大きい方を採る。
   題名は2行で高さを固定したままにする（段々にしない: D-183） */
@media (min-width: 1100px) {
  .yms-provider-pixiv .yms-gcols:not(.yms-gcols--one) .yms-gmain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yms-provider-pixiv .yms-gpost__title { font-size: 14px; }
}
/* 9/11 深瀬「スマホも2列で、いらない情報は載せないでタイトルだけ」。
   1列は縦が1万pxになり、探すのが大変だった。2列＋題だけなら、1画面に4枚入る。
   絵は 167px 枠＝DPR2で334px 必要。srcset の注文（50vw）と同じ段で合わせる */
@media (max-width: 767px) {
  .yms-provider-pixiv .yms-gmain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  /* 高さを揃えるため、2行ぶんの下限も同じ行間で持つ（1.4em のままだと 198/201px に割れる） */
  .yms-provider-pixiv .yms-gpost__title { font-size: 13px; line-height: 1.5; min-height: calc(1.5em * 2); }
  /* 題だけ残す。区分・日付・札はスマホでは出さない */
  .yms-provider-pixiv .yms-gpost__meta { display: none; }
  .yms-provider-pixiv .yms-gpost .yms-gtags { display: none; }
  .yms-provider-pixiv .yms-gseries { font-size: 9.5px; padding: 2px 5px; }
  .yms-provider-pixiv .yms-gpost__title { margin: 6px 0 0; }
}

/* 9/11 深瀬「画像が載る部分でいっぱいにしたい、隙間を少なくして」。
   表紙105枚の実測: 正方形63・横長24・縦長18（中央の比 1.00）。
   枠が 4:3 の横長だったので、**6割の絵を上下25%切って**いたうえ、
   カードの中で絵の占める面積が小さかった。枠を正方形にして絵に場所を渡す */
.yms-provider-pixiv .yms-gpost__cover .yms-card__cover { aspect-ratio: 1 / 1; }
.yms-provider-pixiv .yms-gmain { gap: 16px 12px; }
.yms-provider-pixiv .yms-gpost__meta { margin: 8px 0 4px; }
@media (max-width: 767px) {
  .yms-provider-pixiv .yms-gmain { gap: 12px 8px; }
}

/* 9/11 深瀬「できるだけコンパクトに隙間少なく」。見出しも順位の丸も無い帯（pixiv 面の上） */
.yms-gstrip--bare { margin: 10px 0 14px; }
.yms-gstrip--bare .yms-homerank__board { gap: 6px; }
.yms-gstrip--bare .yms-homerank__name { margin-top: 3px; font-size: 11.5px; line-height: 1.35; }
.yms-provider-pixiv .yms-gcols { gap: 18px; }
.yms-provider-pixiv .yms-gmain { gap: 16px 12px; }
.yms-provider-pixiv .yms-gpost__meta { margin: 6px 0 3px; }
.yms-provider-pixiv .yms-gpost__title { margin: 0 0 4px; }
.yms-provider-pixiv .yms-gside__sec { margin-bottom: 18px; }


/* 9/11: うごイラの看板は動画そのもの。静止画の看板と同じ枠・同じ埋め方で動く */
.yms-ghero > video.yms-ghero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* 9/11 深瀬「大きくしてほしいのに」。看板は**全幅のまま、もっと大きく**。
   絵が主役の面なので、第一画面をほぼ看板で埋める。
   表紙は「その作品で一番大きいページ」を使うようにした（103本中46本で画素が増えた） */
.yms-provider-pixiv .yms-ghero { min-height: 620px; }
.yms-provider-pixiv .yms-ghero__in { min-height: 620px; }
@media (max-width: 767px) {
  .yms-provider-pixiv .yms-ghero, .yms-provider-pixiv .yms-ghero__in { min-height: 460px; }
}

/* 9/11 深瀬「タグの大きさもう少し小さくしたら？」。
   3列にしたぶん1枚が細くなり、札が絵より場所を取っていた。札を小さくして行数を抑える */
.yms-provider-pixiv .yms-gpost .yms-gtags { gap: 4px; }
.yms-provider-pixiv .yms-gpost .yms-gtag {
  min-height: 22px; padding: 3px 7px; font-size: 10.5px; border-radius: 3px;
}
/* 4つを超える札はしまう（1〜2行に収める） */
.yms-provider-pixiv .yms-gpost .yms-gtag:nth-of-type(n+5) { display: none; }

/* 9/11: 作品名の札。絵の左下に重ねるので、カードの高さは1pxも増えない。
   題の行から冠を外した分、題は素の2行に戻る */
.yms-gseries {
  position: absolute; left: 0; bottom: 0; max-width: 100%;
  padding: 3px 7px; font-size: 10.5px; line-height: 1.3; font-weight: 700;
  color: #fff; background: rgba(17, 17, 17, .82);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 0 3px 0 0; pointer-events: none;
}

/* 9/11 お問い合わせの用紙。読みやすさだけを見る（飾りを足さない） */
.yms-cform { max-width: 620px; display: grid; gap: 16px; margin: 0 0 32px; }
.yms-cform__lead { margin: 0; font-size: 13px; line-height: 1.8; color: #555; }
.yms-cform__row { display: grid; gap: 6px; }
.yms-cform__row > span { font-size: 13px; font-weight: 700; }
.yms-cform input, .yms-cform select, .yms-cform textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #111;
}
.yms-cform textarea { line-height: 1.7; resize: vertical; }
.yms-cform input:focus, .yms-cform select:focus, .yms-cform textarea:focus { outline: 2px solid #111; outline-offset: 1px; }
.yms-cform__err { font-size: 12.5px; color: #c0392b; }
.yms-cform__err--top { padding: 10px 12px; border: 1px solid #e6b4ae; background: #fdf3f2; border-radius: 3px; }
.yms-cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.yms-cform__send {
  justify-self: start; padding: 12px 34px; font: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: #111; border: 0; border-radius: 3px; cursor: pointer;
}
.yms-cform__send:hover { background: #333; }
.yms-cform__done { padding: 18px 20px; border: 1px solid #bcd9c2; background: #f3faf5; border-radius: 3px; font-size: 14px; line-height: 1.9; }

/* 9/11: 固定ページ（お問い合わせ等）に親テーマの共有ボタン・著者フォロー・著者欄が
   上下2か所に出ていた。用件を書くだけのページなので、全部落とす */
.page .sns-share, .page .sns-follow, .page .author-info, .page .author-box,
.page .sns-share-message, .page .sns-follow-message { display: none !important; }

/* 9/11: 札列が1行と2行の記事が混ざり、同じ横並びでカードの高さが 325px と 351px に割れていた。
   高さを揃える（深瀬「カードの高さ統一」）。入り切らない札は落とす */
.yms-provider-pixiv .yms-gpost .yms-gtags {
  max-height: 22px; overflow: hidden;
}

/* 9/11 深瀬「本家サイトのように画像と画像の間に他の記事紹介を挟む機能」。
   本文の絵の流れを切らないよう、上下の細い線だけで区切る。値段も日付も出さない（D-101） */
.yms-pxreco { margin: 22px 0; padding: 14px 0; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; }
.yms-pxreco__lab { display: block; margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #999; }
.yms-pxreco__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.yms-pxreco__a { display: block; color: inherit; text-decoration: none; }
.yms-pxreco__a .yms-card__cover { aspect-ratio: 1 / 1; }
.yms-pxreco__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: 12px; line-height: 1.45; font-weight: 600; color: #333; }
@media (max-width: 767px) {
  .yms-pxreco { margin: 16px 0; padding: 12px 0; }
  .yms-pxreco__list { gap: 8px; }
  .yms-pxreco__t { font-size: 11px; }
}

/* 9/11 深瀬「こういうPOST INFOと」（手本 nijifan の形）。
   黒い帯に見出しと日付、その下に 区分／札／キャラ の行。中身が無い行は出さない */
/* 作品データ（9/12 深瀬「もっとコンパクトにしたいのと隙間は少なく」）。
   記事の一番上に来るので、**高さを取らない**。行の区切り線もやめて、ラベルを小さく前に置く */
/* 作品のページの「登場人物」帯（2026-09-15 深瀬「作品ごとのページもちゃんと作りたい」）。
   タイルの形はキャラ一覧と同じ物を使い、間だけ詰める */
.yms-sericha { margin: 0 0 22px; }
.yms-sericha .yms-ctiles { margin-bottom: 0; }

.yms-pinfo { margin: 0 0 14px; border: 1px solid #E4E4E4; border-radius: 3px; overflow: hidden; }
.yms-pinfo__head { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: #1A1A1A; color: #fff; }
.yms-pinfo__t { position: relative; padding-left: 9px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.yms-pinfo__t::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; background: #fff; }
.yms-pinfo__head time { font-size: 11px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.yms-pinfo__body { padding: 7px 10px; display: grid; gap: 4px; }
.yms-pinfo__row { display: flex; align-items: center; gap: 8px; padding: 0; border-bottom: 0; }
.yms-pinfo__lab { flex: 0 0 42px; padding-top: 0; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; color: #999; }
.yms-pinfo__chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* 9/11 深瀬「全部丸ごとパクらないでずらして」: 手本は黒ベタの札。
   うちは輪郭線を基本にして、**キャラの行だけ塗る**（この面の軸はキャラと作品なので、そこを立てる） */
.yms-pinfo__chip { display: inline-block; padding: 3px 8px; font-size: 11.5px; font-weight: 600;
  line-height: 1.5; color: #333; background: #fff; border: 1px solid #DDD; border-radius: 3px; text-decoration: none; }
.yms-pinfo__chip:hover { border-color: #1A1A1A; color: #1A1A1A; }
.yms-pinfo__row--char .yms-pinfo__chip { color: #fff; background: #1A1A1A; border-color: #1A1A1A; }
.yms-pinfo__row--char .yms-pinfo__chip:hover { background: #444; }
@media (max-width: 767px) {
  /* 携帯でも縦に積まない（積むと行数が倍になる）。ラベルを詰めて横のまま */
  .yms-pinfo__lab { flex: 0 0 36px; font-size: 10px; }
  .yms-pinfo__chip { font-size: 11px; padding: 3px 7px; }
}

/* 9/11 深瀬「おすすめ記事みたいな感じで並べてほしい」（手本 nijifan）。
   黒い帯の見出し → 大きいカード2列 → 小さいカード3列。題は絵の上に重ねる */
.yms-rsec { margin: 28px 0 8px; }
/* 9/11 深瀬「ずらしてパクって」: 手本は全幅の黒帯に中央寄せ。
   うちは他の見出し（yms-ghead）と同じ「左の太線＋左寄せ」に揃える。借り物に見えず、面の中で揃う */
.yms-rsec__h { position: relative; margin: 0 0 14px; padding: 2px 0 2px 13px;
  font-size: 19px; font-weight: 800; color: #16161A; letter-spacing: .02em; }
.yms-rsec__h::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px;
  background: #1A1A1A; border-radius: 2px; }
.yms-rsec__big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yms-rsec__small { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.yms-rtile { position: relative; display: block; overflow: hidden; border-radius: 3px; text-decoration: none; }
/* 9/12 深瀬「おすすめ記事も黒い余白が気になる。基本余白は作らないで」。
   正方形の枠に縦長・横長の絵を入れていたので、上下に黒い帯が出ていた。
   **枠いっぱいに満たす**（はみ出す分だけ切る。帯は作らない） */
.yms-rtile .yms-card__cover { aspect-ratio: 1 / 1; background: transparent; }
.yms-rtile .yms-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yms-rtile__t { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px;
  font-size: 12px; line-height: 1.45; font-weight: 700; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); }
/* 9/11 実測: 親テーマの span 向けの指定が display を flow-root に戻していて、2行で切る指定が効いていなかった
   （3行目が途中で切れて出る）。**この2つを別の、より強い選び方で当て直す。** */
/* 9/11 実測: 余白を持つ箱の上で2行に切ると、**3行目が下の余白に半分だけ出る**
   （はみ出しの切り取りは余白の外側＝padding box で起きるため）。
   切る役だけを内側の span に分ける。字の大きさと行の高さは外側から受け継ぐ */
.yms-rtile__tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yms-rtile--big .yms-rtile__t { font-size: 15px; padding: 32px 12px 11px; }
@media (max-width: 767px) {
  .yms-rsec__h { font-size: 16px; padding-left: 11px; }
  .yms-rsec__big, .yms-rsec__small { gap: 8px; }
  .yms-rtile__t { font-size: 11px; padding: 20px 7px 7px; }
  .yms-rtile--big .yms-rtile__t { font-size: 13px; padding: 24px 9px 8px; }
}

/* 一覧ページの行（作品一覧・キャラ一覧）。脇より広い場所なので2〜3列に流す */
.yms-gcats--wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 22px; }
@media (max-width: 899px) { .yms-gcats--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .yms-gcats--wide { grid-template-columns: 1fr; } }

/* 9/11 深瀬「タップで切り替えみたいな関連ポストも」（手本 nijifan）。
   JavaScript 無し: radio が選ばれたら、同じ並びの n 番目の板を出す */
.yms-tsw { margin: 22px 0 26px; }
/* 9/18 深瀬「このキャラの他の絵を出そう」。見出しが無く、20 画面ぶんの絵を読み終えた所に
   札だけが出ていたので、何の枠か分かる名前を付ける */
.yms-tsw__h { font-size: 17px; font-weight: 800; line-height: 1.4; margin: 0 0 6px; }
/* 札の中は 4 本で終わる。**その札の一覧へ出る道**を、枠いっぱいの 1 行として最後に置く */
.yms-tsw__more { grid-column: 1 / -1; display: block; text-align: center;
  margin-top: 2px; padding: 9px 12px; border: 1px solid #DDD; border-radius: 6px;
  font-size: 12.5px; font-weight: 700; color: #222; text-decoration: none; background: #FAFAFA; }
.yms-tsw__more:hover { border-color: var(--gred); color: var(--gred); }
.yms-tsw__lead { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.yms-tsw__lead b { font-size: 13px; font-weight: 700; color: #222; }
.yms-tsw__lead span { font-size: 11px; color: #999; }
.yms-tsw__in { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.yms-tsw__in > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.yms-tsw__in > label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  font-size: 12px; font-weight: 700; color: #444; background: #fff; border: 1px solid #DDD;
  border-radius: 999px; cursor: pointer; }
.yms-tsw__in > label b { font-size: 11px; font-weight: 700; color: #999; }
.yms-tsw__in > input:checked + label { color: #fff; background: #1A1A1A; border-color: #1A1A1A; }
.yms-tsw__in > input:checked + label b { color: rgba(255,255,255,.7); }
.yms-tsw__in > input:focus-visible + label { outline: 2px solid #1A1A1A; outline-offset: 2px; }
/* 9/18: 4 列固定だと、記事が 2 本しかない札で**右に 2 マス空く**（実測: 3 本の札は
   自分を除いて 2 枚しか出ない）。列を items に合わせて詰め、**カードの大きさは変えない**
   （深瀬の好み「カードの高さ統一」。伸ばすと札ごとに大きさが変わる） */
.yms-tsw__panel { flex: 0 0 100%; display: none;
  grid-template-columns: repeat(auto-fit, minmax(120px, 150px)); gap: 10px; margin-top: 4px;
  justify-content: start; }
.yms-tsw__in > input:nth-of-type(1):checked ~ .yms-tsw__panel:nth-of-type(1),
.yms-tsw__in > input:nth-of-type(2):checked ~ .yms-tsw__panel:nth-of-type(2),
.yms-tsw__in > input:nth-of-type(3):checked ~ .yms-tsw__panel:nth-of-type(3) { display: grid; }
@media (max-width: 767px) {
  .yms-tsw__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .yms-tsw__in > label { padding: 7px 12px; font-size: 11px; }
}

/* 9/11 深瀬「記事ごとのアニメ作品と関連づけたセール作品のページ」。
   ここは**値段を出してよい面**（セール系）。割引率を左上に出す */
/* 記事末の「人気作品」（9/13 深瀬「UIが酷い。本家寄りに」）。
   手本 nijifan の実測: 見出し24px/800・2列・表紙306×230(4:3)・OFFの赤札は表紙の左上・
   題15px/700 2行・値段は取消線＋赤の大きい数字・赤い全幅ボタン。灰色の箱と長い注記は無い。 */
.yms-wsale { margin: 32px 0 8px; }
.yms-wsale__h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-left: 12px;
  border-left: 3px solid #111; font-size: 20px; font-weight: 800; color: #111; }
.yms-wsale__pr { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #fff; background: var(--gred);
  padding: 2px 6px; border-radius: 2px; line-height: 1.4; }
.yms-wsale__work + .yms-wsale__work { margin-top: 22px; }
.yms-wsale__wh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #333; }
.yms-wsale__more { font-size: 12px; font-weight: 700; color: var(--gred); text-decoration: none; white-space: nowrap; }
.yms-wsale__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.yms-wsale__grid--page { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.yms-wsale__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E6E6E6; border-radius: 8px;
  overflow: hidden; text-decoration: none; color: #111; }
.yms-wsale__cover { position: relative; display: block; aspect-ratio: 4 / 3; background: #F2F2F2; }
.yms-wsale__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yms-wsale__off { position: absolute; top: 8px; left: 8px; padding: 5px 10px; border-radius: 999px;
  background: var(--gred); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.yms-wsale__off b { font-size: 15px; font-weight: 900; margin-right: 1px; }
.yms-wsale__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.yms-wsale__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 700; line-height: 1.45; min-height: calc(1.45em * 2); }
.yms-wsale__rv { font-size: 12px; color: #B7791F; font-weight: 700; }
.yms-wsale__rv small { color: #888; font-weight: 500; font-size: 11px; }
.yms-wsale__p { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.yms-wsale__p s { font-size: 12px; color: #999; }
.yms-wsale__p b { font-size: 20px; font-weight: 900; color: var(--gred); font-variant-numeric: tabular-nums; }
.yms-wsale__btn { display: block; text-align: center; min-height: 44px; line-height: 44px; border-radius: 6px;
  background: var(--gred); color: #fff; font-size: 14px; font-weight: 800; }
.yms-wsale__card:hover .yms-wsale__btn { background: #A3001E; }
@media (max-width: 599px) { .yms-wsale__grid, .yms-wsale__grid--page { gap: 10px; }
  .yms-wsale__body { padding: 8px 9px 10px; } .yms-wsale__t { font-size: 12.5px; } .yms-wsale__p b { font-size: 17px; }
  .yms-wsale__btn { font-size: 13px; min-height: 40px; line-height: 40px; } }
/* 脇の広告枠。9/17 深瀬「できたらコンパクトにして欲しい」。
   1枚 約460px → 約250px（表紙を高さで抑え、大きなボタンを1行の文字に、★と値段を同じ行へ）。
   表紙は本の縦長（425×600）なので **上を残して切る**（題と主役が上にある）。 */
/* 文字の段を **3行**（題 / 値段＋数字 / ボタン）にたたむ。
   9/17 実測の内訳: 1枚 315px = 表紙172＋題36＋★19＋値段28＋ボタン26＋余白34。
   題は `min-height: calc(1.45em * 2)` で **2行ぶんの高さが常に確保されていた**（1行にしても縮まない）。 */
/* ボタンは枠の中の細い一行に（44px の塊をやめる） */
/* 枠と枠の間、見出しの上下も詰める（深瀬「隙間と情報はできるだけコンパクトに」） */
.yms-fbn .yms-ghead { margin-bottom: 8px; padding-bottom: 6px; }
/* 売り場ごとの差し色。左右に 2 枠並ぶので、どちらの店かを見出しの下線で示す。
   9/17 点検で見つけた穴: この 2 つの class は**指定が 1 行も無いまま**本番に出ていた
   （修飾 class を関数の引数へ渡したので守り手の走査から外れていた）*/
.yms-fbn--dl .yms-ghead { border-bottom: 2px solid #0C7CD5; }      /* DLsite = 青 */
.yms-fbn--books .yms-ghead { border-bottom: 2px solid #E8358A; }   /* FANZA ブックス = 桃 */
/* 9/18 深瀬「一番上だけでかい画像にすると縮小した時の表示が変。一番上だけでかい形いらない、全て同じでいい」
   ＋「Dlsite も横の画像が切られている。横幅いっぱいサムネ表示して並べられないか」。
   **表紙を切らない**のが要点。枠の比を表紙の実比に合わせれば、cover でも欠けない。
   実測 9/18: DLsite / FANZA 同人 = 560x420（4:3 横長）、FANZA ブックス = 425x600（縦長）。 */
.yms-fbn__tiles { display: grid; gap: 12px; }
.yms-fbn__tile { display: block; text-decoration: none; color: #111; }
.yms-fbn__timg { position: relative; display: block; overflow: hidden; border-radius: 6px;
  background: #F2F2F2; aspect-ratio: 4 / 3; }
.yms-fbn__timg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yms-fbn__tbody { display: block; padding: 6px 1px 0; }
.yms-fbn__tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; font-weight: 700; line-height: 1.38; }
/* 9/18: 値段をやめ、**売れている証拠だけ**を出す（9/5「値段は一覧に載せない」）。
   色は赤（値段の色）をやめ、控えめな灰にする ―― 主役は表紙 */
.yms-fbn__tp { display: block; margin-top: 2px; font-size: 11px; color: #888;
  font-variant-numeric: tabular-nums; }
.yms-fbn__tile:hover .yms-fbn__tt { color: var(--gred); }

/* ブックスだけ 2 列。縦長を脇いっぱい（300px）にすると 1 枚 423px になり、5 枚で 2,000px を超えて
   脇が広告で埋まる（深瀬「デカすぎてサイドバー埋めないように上手く調整」）。
   2 列なら 1 枚 145x205px で、**表紙は全部見えたまま**高さが 1/4 になる */
.yms-fbn--books .yms-fbn__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.yms-fbn--books .yms-fbn__timg { aspect-ratio: 425 / 600; }
.yms-fbn--books .yms-fbn__tt { font-size: 11px; -webkit-line-clamp: 2; }

.yms-fbn .yms-ghead__en { color: #D32F2F; font-weight: 800; }
/* 脇が本文の下へ回る幅では、横長も 2 列にして縦に伸びすぎないようにする */
@media (max-width: 767px) { .yms-fbn__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 脇「pixivで保存が多い」。順位の数字を持たないぶん、ランキングと見た目を変える（9/12） */
.yms-gsaveds { display: grid; gap: 8px; }
.yms-gsaved { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 9px; align-items: center;
  text-decoration: none; color: var(--text); padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.yms-gsaved:last-child { border-bottom: 0; }
.yms-gsaved__thumb { width: 56px; height: 56px; overflow: hidden; border-radius: var(--radius); background: var(--surface-alt); }
.yms-gsaved__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yms-gsaved__t { display: grid; gap: 2px; min-width: 0; }
.yms-gsaved__title { font-size: 12.5px; font-weight: 700; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.yms-gsaved__n { font-size: 11px; color: var(--accent); font-weight: 800; }

/* 脇の検索（9/12）。帯の検索と同じ口だが、脇では縦に置いて言葉を添える */
.yms-gsearch__lab { display: block; font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 6px; }
.yms-gsearch__row { display: flex; }
.yms-gsearch input { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: #fff; color: var(--text); }
.yms-gsearch button { min-height: 40px; padding: 0 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--text); background: var(--text); color: #fff; border-radius: 0 var(--radius) var(--radius) 0; }

/* 他サイトの新着（題名と日付だけ。絵は貼らない） */
.yms-gfeed + .yms-gfeed { margin-top: 12px; }
.yms-gfeed__from { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 2px; margin-bottom: 6px; }
.yms-gfeed__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.yms-gfeed__list li { display: grid; gap: 1px; padding-bottom: 7px; border-bottom: 1px solid var(--line-soft); }
.yms-gfeed__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.yms-gfeed__list a { font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--text); text-decoration: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.yms-gfeed__list time { font-size: 11px; color: var(--text-faint); }

/* マイリストの入口（件数は手元の script が入れる） */
.yms-gmylist { display: flex; align-items: center; justify-content: center; gap: 2px; }

/* 脇の最後の枠だけ、スクロールについてくる（9/12）。
   **脇そのものを sticky にしない。** 脇は画面より縦に長いので、丸ごと貼り付けると
   下の枠が二度と見られなくなる。最後の1枠だけなら、長い本文の横が空かず、下も読める */
@media (min-width: 1100px) {
  /* 脇の箱は行いっぱいに伸ばす。伸ばさないと sticky が脇の高さの中でしか効かず、
     本文の途中で止まる（9/12 実測: 4000px 送ると画面の外へ出ていた） */
  .yms-gcols--article .yms-gside { align-self: stretch; }
  /* 9/12 レビュー指摘: 貼り付く指定だけ範囲が広いと、一覧や記事以外の脇まで貼り付く。
     さらに、貼り付く枠自体が画面より長いと下が読めなくなる（バナー4枚で約1030px） */
  .yms-gcols--article .yms-gside > :last-child {
    position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto;
  }
}

/* 人気ランキングの期間切替（9/12）。`yms-rankpill` は 9/10 に作った時から**どのCSSにも指定が無く**、
   ただの青い文字リンクとして出ていた。脇の切替（.yms-gpilltab）と同じ形にそろえる。 */
.yms-rankfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
.yms-rankpill { display: inline-flex; align-items: center; justify-content: center; min-width: 104px;
  min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-alt); color: var(--text-soft); font-size: 13px; font-weight: 700;
  text-decoration: none; }
.yms-rankpill:hover { border-color: var(--text-soft); color: var(--text); }
.yms-rankpill.is-on { background: var(--text); border-color: var(--text); color: #fff; }
@media (max-width: 767px) { .yms-rankpill { min-width: 0; flex: 1; padding: 0 10px; font-size: 12.5px; } }

/* 一覧カードの作品名（9/12 に日付と入れ替えた）。区分と同じ行に小さく置く */
.yms-gpost__series { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 60%; }

/* カードの作品名（9/12 に日付と入れ替えた）。区分と同じ行に小さく置く */
.yms-card__series { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 作品別の人気作品のページ（9/13）。記事末と同じカードを2列で。作品一覧は表紙の格子 */
.yms-wsale--page { margin-top: 8px; }
.yms-wsale__grid--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yms-wsale__back { margin: 18px 0 0; font-size: 13px; }
.yms-wsale__back a { color: var(--text-soft); text-decoration: none; font-weight: 700; }
.yms-garchive-head h1 .yms-wsale__pr { vertical-align: middle; margin-right: 10px; font-size: 11px; }
/* 9/15 深瀬「作品別の人気も画像が小さすぎるので大きく見せたい」: この面は脇を残すので、列を減らして絵を大きくする（3列 139px → 2列 229px） */
.yms-wsale__works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.yms-wsale__wtile { display: block; text-decoration: none; color: #111; border: 1px solid #E6E6E6; border-radius: 8px; overflow: hidden; background: #fff; }
.yms-wsale__wcover { display: block; aspect-ratio: 4 / 3; background: #F2F2F2; }
.yms-wsale__wcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yms-wsale__wname { display: block; padding: 9px 10px 2px; font-size: 13.5px; font-weight: 700; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yms-wsale__wn { display: block; padding: 0 10px 10px; font-size: 11.5px; color: #888; }
@media (max-width: 599px) { .yms-wsale__works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* 看板の帯（9/13）。看板は原本の幅で止め、余った左右は墨で埋める。絵は伸ばさない */
.yms-ghero-band { background: #111; }
.yms-ghero { margin: 0 auto; }

/* キャラ一覧の顔タイル（9/13）。3:4 の長方形・上寄りで切る（顔は上にある）・名前順。PC6列/SP3列 */
.yms-ctiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.yms-ctile { display: block; text-decoration: none; color: #111; }
.yms-ctile__face { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: #F2F2F2; }
.yms-ctile__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block;
  transition: transform .2s; }
.yms-ctile:hover .yms-ctile__face img { transform: scale(1.04); }
.yms-ctile__name { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yms-ctile__work { display: block; font-size: 10.5px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yms-ctile__work b { font-weight: 600; margin-left: 4px; color: #aaa; }
/* 9/17 深瀬「作品ごとに並べて」: 作品名の見出し。札の中の作品名はここへ移したので、札には本数だけ残る */
.yms-cwork { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 0; font-size: 13.5px; font-weight: 700;
  color: #111; border-top: 1px solid #ECECEC; padding-top: 14px; }
.yms-cwork:first-of-type { border-top: 0; margin-top: 4px; padding-top: 0; }
.yms-cwork b { font-weight: 600; font-size: 11px; color: #999; }
@media (max-width: 899px) { .yms-ctiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .yms-ctiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* 9/20 深瀬「2カラム統一でいい」: ランキングは全部おなじ2列の大きいカードに揃える。
   9/13 の「5位以降は4列の小タイル」（.yms-rtiles / .yms-rtile*）はここで廃止した。
   縦が伸びる分は1ページ20位までで抑える（実測 9/20: 60本を2列にすると 11,338px、20本なら 4,200px 台） */
.yms-rankpager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.yms-rankpager .yms-gbtn { flex: 1; min-width: 160px; }
@media (max-width: 1099px) {
  /* ランキングの塊は yms-gmain を名乗るので、脇を後ろへ回す order:1 が掛かって下へ落ちていた（SP実測 9/13） */
  .yms-gmain--rank { order: 0; }
}

/* 9/13 タグ一覧の圧縮（実測 10.3画面）。索引は2記事以上の語だけ、1記事だけの語は折りたたみに入れる。
   676語のうち436語が1記事だけ（実測）。消さずに畳む */
.yms-gtags--dense .yms-gtag { min-height: 28px; font-size: 12px; padding: 0 9px; }
.yms-gtagfold { margin-top: 18px; }
.yms-gtagfold summary { cursor: pointer; font-size: 13px; color: #555; padding: 10px 12px; background: #F5F5F5; border-radius: 4px; }
.yms-gtagfold summary:hover { background: #ECECEC; color: #222; }
.yms-gtagfold[open] summary { margin-bottom: 10px; }
.yms-gtagfold .yms-ghead { margin-top: 12px; }

/* 9/13 見直し: 作品一覧は3列の格子（行の側に掛ける。外側に重ねると1マス目に潰れる: A12） */
.yms-gserieslist .yms-gcats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 899px) { .yms-gserieslist .yms-gcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 顔タイルの切り抜き（3:4・顔を中心に切ってある）は上寄せしない */
.yms-ctile__face--picked img { object-position: 50% 50%; }
/* 9/14: 顔タイルも単体記事も無い人は絵を出さず、名前の頭文字の札（別人の絵を出さない） */
/* 9/13 作品一覧のタイル（代表キャラの顔）。作品名は2行まで */
/* 作品一覧。9/17 深瀬「作品一覧も横に大きい画像を使用してら？ タグ一覧みたいに」
   → キャラ一覧と同じ 6列・縦長（3:4）をやめ、タグ一覧と同じ **4列・横長（4:3）** にする */
.yms-wtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
.yms-wtiles .yms-ctile__face { aspect-ratio: 4 / 3; border-radius: 4px; }
.yms-wtiles .yms-ctile__face img { object-position: 50% 30%; }
.yms-wtiles .yms-ctile__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.3; margin-top: 6px; }
.yms-wtiles .yms-ctile__work { font-size: 11.5px; }
@media (max-width: 599px) { .yms-wtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yms-wtiles .yms-ctile__name { font-size: 13.5px; } }
/* 9/13 タグ一覧の場面タイル（4:3・4列、SP 2列）。名は左下に重ねず下に置く（読みやすさ） */
.yms-ttiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; margin: 8px 0 16px; }
.yms-ttile { display: block; text-decoration: none; color: #222; min-width: 0; }
.yms-ttile__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #F2F2F2; }
.yms-ttile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.yms-ttile:hover .yms-ttile__img img { transform: scale(1.04); }
/* 9/17 深瀬「タグ一覧の巨乳とかのタグ名もう少し大きくした方が見やすいのでは？
   今は少しなんのジャンルかわかりづらい」→ 12.5px → 15px、1行で切らず2行まで出す。
   括弧付きの長い名前（ミルコ(僕のヒーローアカデミア)）が「…」で消えていたのが読みづらさの正体 */
.yms-ttile__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.yms-ttile__name b { font-weight: 400; color: #999; font-size: 11.5px; margin-left: 5px; }
@media (max-width: 599px) { .yms-ttiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; } .yms-ttile__name { font-size: 11.5px; } }   /* SP は3列（2列だと 31語で12画面になった: 9/14 実測） */
.yms-fanza-product-banner { position: relative; }
.yms-fanza-product-banner__link { display: block; color: inherit; text-decoration: none; }
.yms-fanza-product-banner__media {
  position: relative; display: block; width: min(100%, 250px); margin: 0 auto 9px; overflow: hidden;
}
.yms-fanza-product-banner__media img { display: block; width: 100%; height: auto; }
.yms-fanza-product-banner__pr {
  position: absolute; top: 6px; left: 6px; padding: 2px 6px; background: #111; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1.4; letter-spacing: .08em;
}
.yms-fanza-product-banner__title {
  display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 13px; line-height: 1.55;
}
.yms-fanza-product-banner__context { display: block; margin-top: 3px; color: #777; font-size: 11px; line-height: 1.45; }
.yms-fanza-product-banner--compact .yms-fanza-product-banner__media { max-width: 200px; }
.yms-fanza-product-banners { display: grid; gap: 12px; }
.yms-fanza-product-banners__note { margin: -4px 0 2px; color: #666; font-size: 11px; line-height: 1.5; }
.yms-fanza-product-banners .yms-fanza-product-banner__title { margin-top: 6px; }
.yms-fanza-product-banners .yms-fanza-product-banner { margin: 0; padding: 0; border: 0; }
.yms-fanza-product-banners .yms-fanza-product-banner__media { margin-bottom: 0; }
.yms-fanza-product-banners .yms-fanza-product-banner__link--post img { display: block; width: 100%; height: auto; }

/* 動くGIFの枠（9/17 深瀬「もっと大きくできないかな。できたら横幅いっぱいに」）。
   柱の幅いっぱい。GIF は縦横がまちまちなので、**切らずに実物の形のまま**出す */
.yms-ggifs { display: flex; flex-direction: column; gap: 10px; }
.yms-ggif { display: block; text-decoration: none; color: #111; }
.yms-ggif__img { display: block; width: 100%; height: auto; border-radius: 6px; background: #F2F2F2; }
.yms-ggif__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.yms-ggif:hover .yms-ggif__t { color: var(--gred); }

/* 上の帯の PR の印（9/17）。帯は 15 本とも紹介リンクなのに印が無かった。
   **題名の行の先頭**に置く: 既にある 11px の行に入るので高さは増えず、
   絵の上でなく白地なので原寸で読め、代表の1個でなく**1本ずつ**宣言になる。
   最初に試した「帯の右上に1個の札」は、3列/5列の格子では**3枚目・5枚目の表紙の上**に乗り、
   既にある個別バッジ（.yms-homerank__badge）と見分けが付かなかったのでやめた */
.yms-homerank__pr { display: inline-block; margin-right: 4px; padding: 1px 4px; border-radius: 2px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em; line-height: 1.4;
  color: #fff; background: #5F5F5F; vertical-align: 1px; }
/* 地の色は #8A8A8A（白抜きで 3.45:1・WCAG AA 不合格）から #5F5F5F（**6.385:1**）へ。
   9px は「大きい文字」(24px以上)ではないので 4.5:1 が要る。
   面が既に持つ PR（脇の #D32F2F on 白 = 4.98:1）より暗い印は筋が通らない */

/* 相互RSS・相互リンクの募集ページ（9/19）。深瀬「コンパクト・文字少なめ」に寄せて、
   囲み・影・色の帯を使わない。読む物なので行間だけ広めに取る。
   class は page-partners.php だけが使う新しい名前なので、既存の面の見た目には当たらない */
.yms-partners { line-height: 1.85; }
.yms-partners h2 {
  margin: 2em 0 .6em; font-size: 1.05rem; font-weight: 700;
  padding-left: .6em; border-left: 3px solid currentColor;
}
.yms-partners p { margin: 0 0 .9em; }
.yms-partners ul, .yms-partners ol { margin: 0 0 1em; padding-left: 1.4em; }
.yms-partners li { margin-bottom: .35em; }
.yms-partners__facts { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.yms-partners__facts th, .yms-partners__facts td {
  text-align: left; vertical-align: top; padding: .5em .6em;
  border-bottom: 1px solid rgba(128, 128, 128, .28); font-weight: 400;
}
.yms-partners__facts th { width: 8.5em; white-space: nowrap; opacity: .78; }
/* 狭い画面では表を縦に積む（8.5em の見出し列を残すと本文が潰れる） */
@media (max-width: 599px) {
  .yms-partners__facts th, .yms-partners__facts td { display: block; width: auto; }
  .yms-partners__facts th { border-bottom: 0; padding-bottom: 0; font-size: .86em; }
}
.yms-partners__list { list-style: none; padding-left: 0; }
.yms-partners__list li { margin-bottom: .2em; }
/* 9/19 深瀬「送る側の気持ち考えるともっと短縮したい」。
   節を 8 → 3 に削った。残った分は、頼み事の一文が一番先に目に入るようにする */
.yms-partners__lead { opacity: .82; }
.yms-partners__ask { font-size: 1.06rem; margin-bottom: 1.4em; }
.yms-partners__note { font-size: .9em; opacity: .74; line-height: 1.7; }
/* 9/19 深瀬「URLを貼ってあとは定型文送ればいいみたいな感じ」。
   貼る物 → 送る文 → こちらの情報、の順にして往復を消す */
.yms-partners__code { margin: 0 0 1.2em; }
.yms-partners__code dt { font-size: .9em; opacity: .74; margin-top: .7em; }
.yms-partners__code dd { margin: .2em 0 0; }
.yms-partners__code code, .yms-partners__tpl {
  display: block; padding: .7em .8em; border: 1px solid rgba(128,128,128,.32); border-radius: 6px;
  font-size: .92em; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
}
.yms-partners__tpl { margin: 0 0 1em; }
/* URLを入れて押すだけの入口（9/19）。項目は1つに見えるように、任意の欄は小さく下げる */
.yms-partnership--quick form { margin: 0 0 .6em; }
.yms-partnership--quick label { display: block; font-size: .9em; opacity: .78; margin-bottom: .3em; }
.yms-partnership--quick input[type="url"], .yms-partnership--quick input[type="email"] {
  display: block; width: 100%; box-sizing: border-box; padding: .7em .8em; font-size: 1rem;
  border: 1px solid rgba(128,128,128,.4); border-radius: 6px; background: transparent; color: inherit;
}
.yms-partnership__url { margin: 0 0 .8em; }
.yms-partnership__mail { margin: 0 0 1em; }
.yms-partnership__mail label { font-size: .82em; opacity: .62; }
.yms-partnership__send {
  display: block; width: 100%; padding: .85em 1em; font-size: 1rem; font-weight: 700;
  border: 0; border-radius: 6px; background: currentColor; cursor: pointer;
}
.yms-partnership__send { color: #211d1b; background: #e8e6e3; }
.yms-partnership__privacy { font-size: .82em; opacity: .62; margin: .8em 0 0; }
.yms-partnership__notice { padding: .8em 1em; border-radius: 6px; border: 1px solid rgba(128,128,128,.35); }
.yms-partnership__notice--error { border-color: rgba(200,80,80,.6); }

/* 相互RSS（最新記事の下）と、脇の相互リンク（9/21）。
   深瀬「俺のサイトのどこにRSSの記事が載っているの？」→ どこにも無かったので作った。
   相手の見出しは**題名が主役**。絵は持たない（他所の画像を並べると自分の面に見えなくなる） */
/* 9/22: 記事の格子（2列）の**中**に挟むので、全幅に広げないと片側の1マスに押し込まれる */
/* 9/22 深瀬「やっぱりPR帯の下」: PR帯の直後・全幅。他サイト7件の実測（相手の新着は上から1〜7%・6〜24本）に合わせた */
.yms-prss { grid-column: 1 / -1; margin: 14px 0 26px; }
/* SP は 6 本まで（12本だと 820px の帯になり、PR帯と合わせて記事が2画面先へ沈む。PC は全幅なので12本を3列で） */
@media (max-width: 767px) { .yms-prss__row:nth-child(n+7) { display: none; } }
.yms-prss__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .yms-prss__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
/* 全幅（PR帯の直後）に置くので PC は3列。**900px の2列より後ろ**に書く（同じ強さは後勝ち。前に書いて2列のままだった 9/22 実測） */
@media (min-width: 1100px) { .yms-prss__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; } }
.yms-prss__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #ECECEC; min-width: 0; }
/* 9/22 深瀬「画像出すと重いの？」→ 添える。脇のランキングと同じ 60×45（相手の絵は縦横がばらばらなので cover で揃える） */
.yms-prss__thumb { flex: 0 0 60px; width: 60px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #F0F0F0; }
.yms-prss__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yms-prss__title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.5; color: #222; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yms-prss__title:hover { text-decoration: underline; }
/* 出どころを必ず添える。**どこの記事か分からない見出しは置かない** */
.yms-prss__site { flex: 0 0 auto; font-size: 11px; color: #888; text-decoration: none; max-width: 40%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { .yms-prss__title { font-size: 13px; } .yms-prss__site { font-size: 10.5px; } }

.yms-plinks__list { list-style: none; margin: 0; padding: 0; }
.yms-plinks__list li { border-bottom: 1px solid #ECECEC; }
.yms-plinks__list a { display: block; padding: 8px 0; font-size: 12.5px; line-height: 1.45; color: #222; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yms-plinks__list a:hover { text-decoration: underline; }