/*
Theme Name: YMS White Child
Template: cocoon-master
Description: D型（大画像・高速探索）白版v2。site-d-image-first-v1 の設計を Cocoon 子テーマ化したもの。
Version: 0.1.0
*/
/*
 * D型（大画像・高速探索）— erodougadouzinblog.com 向け設計 v2（ホワイト）
 *
 * v1からの変更（利用者の指定）
 *  - ダーク系 → ホワイト系。記事生成の出力と同じ明るい紙面
 *  - カード下の余白: 実測で原因を特定した。カードの高さは行で揃うのに表紙の高さが
 *    固定だったため、余りが本文の下へ溜まっていた（1件目で82px・印なしカードで47px）。
 *    **余りは表紙が吸う**。画像優先の形なら、余白より画像が大きくなるのが正しい
 *  - ボタンを新規作成（主・副の2種。見た目の組は1つ）
 *
 * v1から変えない規則（実測由来）
 *  - 表紙は必ず <img width height>。CSS背景で描かない（8/21: CSS403で0×0に潰れた実例）
 *  - 表紙が無いカードは代替画像を出さず、題名を大きく組む
 *  - 母数を示せないランキングを置かない
 *  - webfontを読まない（390pxの転送30KBを守る）
 *
 * 明るい紙面に一本化する。夜のテーマは廃止（利用者の指定が明確なため分岐を残さない）。
 */

:root {
  --ground:      #FFFFFF;
  --surface:     #FFFFFF;
  --surface-alt: #F6F4F2;   /* わずかに暖色へ寄せた紙色。純グレーにしない */
  --line:        #DCD5CD;   /* 8/25v2: #E5E0DB は --line-soft(#EFEBE7) と見分けがつかず、
                               2種類ある意味が無かった。強い方をはっきり濃くする */
  --line-soft:   #EFEBE7;
  --text:        #1F1B18;
  --text-soft:   #6D645D;
  /* 8/25v4: #9C938B は白地3.02・薄地2.75で本文の目安4.5に届かず、17箇所で使っていた。
     出ている場所はPR表記・「取得時点」・価格・表紙なしの代替文字＝どれも読ませたい情報。
     暖色の傾きを保ったまま暗くする（白地5.29 / 薄地4.82） */
  --text-faint:  #736A63;
  /* 差し色は1つ。押す場所（販売先リンク）と「いま選んでいる」印にだけ使う */
  --accent:      #C7362B;
  --accent-deep: #A82A21;
  --accent-ink:  #FFFFFF;
  --flag-bg:     #FFFFFF;
  --shadow-card: 0 1px 2px rgba(31,27,24,.05), 0 6px 20px -12px rgba(31,27,24,.18);
  --shadow-cta:  0 2px 6px -2px rgba(199,54,43,.45);

  --gap: 12px;
  --radius: 6px;
  /* 販売先リンクの最小高さ。正本は contract.mjs の THRESHOLDS。ここは実装値 */
  --cta-min-h: 50px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.yms-shell { max-width: 1240px; margin: 0 auto; padding: 0 16px 72px; }

/* --- 上部。説明ヒーローを置かない。名前と検索だけ ---------------------------- */
.yms-mast {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.yms-mast__name {
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.yms-search { flex: 1; display: flex; min-width: 0; }
.yms-search input {
  /* 8/25v4: 入力欄40px・ボタン44px で高さが食い違い、「探す」が4px下へはみ出していた（深瀬指摘）。
     押す部品は44px以上（D-018）なので、**低い方を44pxへ揃える** */
  flex: 1; min-width: 0; height: var(--cta-min-h); padding: 0 14px; text-overflow: ellipsis;
  /* 8/25v5 深瀬「検索フィールドの色のズレが気になる」。実測すると入力欄の背景と帯の背景が
     どちらも #F6F4F2 で**完全に同じ**だった。書き込める場所が紙に溶けていたので、
     入力欄だけ白にして「ここに打てる」と分かるようにする。 */
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-right: none;
  border-radius: 999px 0 0 999px;
  font: inherit; font-size: 14px;
}
.yms-search input::placeholder { color: var(--text-faint); }
.yms-search button {
  height: var(--cta-min-h); padding: 0 18px; border: 1px solid var(--line); border-left: none;
  border-radius: 0 999px 999px 0;
  background: var(--text); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.yms-search input:focus-visible, .yms-search button:focus-visible,
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- 並べ替え。9本なのでタブは置かない --------------------------------------- */
.yms-sort { display: flex; gap: 6px; padding: 2px 0 14px; flex-wrap: wrap; }
.yms-sort a {
  font-size: 13.5px; color: var(--text-soft); text-decoration: none;
  padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
.yms-sort a[aria-current="true"] {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
  font-weight: 700;
}

/* --- モザイク。9件で余りが出ない配り方 --------------------------------------- */
.yms-mosaic {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .yms-mosaic { grid-template-columns: repeat(4, 1fr); }
  .yms-mosaic > .yms-card:first-child { grid-column: span 2; grid-row: span 2; }
  /* 8/25: 2行ぶんに引き伸ばされて表紙だけ比率1.225(-17.6%)になり、一等地の絵が縦に潰れていた。
     そこで一度は上端固定にしたが、**今度は先頭カードの下に87pxの穴が空いた**（深瀬指摘）。
     8/25v5: 表紙は `aspect-ratio` + `flex:0 0 auto`、本文は `flex:1 0 auto` になったので、
     カードを伸ばしても**伸びるのは本文側だけ**で絵は歪まない。上端固定をやめて2行ぶんを埋める。
     （歪んでいないことは mosaic-fit.test.mjs が表紙の実比で見張る） */
  .yms-mosaic > .yms-card:first-child { align-self: stretch; }
}
@media (max-width: 899px) {
  .yms-mosaic > .yms-card:first-child { grid-column: span 2; }
}

/* --- カード ------------------------------------------------------------------ */
.yms-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* 行の余りをどこが吸うか。v1は表紙固定で余りが本文下に白く溜まり、v2は表紙に吸わせた。
   8/25v2の実測: 表紙に吸わせると、行内で背の低いカードの表紙が縦に伸び、
   一覧24枚中2枚が比1.336（規格から-10.1%）まで潰れていた。**作品の絵を歪めるほうが害が大きい**ので、
   余りは文字側が引き受ける（D-064が優先。白い余白は歪みより軽い） */
.yms-card__link {
  display: flex; flex-direction: column; height: 100%;
  color: inherit; text-decoration: none;
}
.yms-card__cover {
  position: relative; display: block;
  flex: 0 0 auto;                /* 表紙は規格比のまま。伸ばさない */
  /* 8/25実測: 販売元の表紙は 800×538(=1.487)。16/9(1.778)の枠に入れると最大33%縦が切れ、
     被写体の頭や下部の帯が消えていた。枠を原画の比に合わせて切り落としを最小にする */
  aspect-ratio: 800 / 538;
  background: var(--surface-alt);
}
.yms-card__cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* 表紙が無いとき。代替画像を出さず、題名を大きく組む */
.yms-card__cover--none {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 16px;
  background:
    linear-gradient(150deg, var(--surface-alt) 0%, #FDFCFB 60%, var(--surface-alt) 100%);
  border-bottom: 1px solid var(--line-soft);
}
/* 8/26の実害: 表紙が無いカードでは、割引の札(.yms-flags)が絶対配置のまま
   題名の1行目に重なっていた。実物のセールページの**一番大きい枠**で起きていた。
   空きを予約する形だと札が無いときに間延びするので、**札を流れに戻す**。 */
.yms-card__cover--none .yms-flags {
  position: static; margin: 0 0 8px; align-self: flex-start;
}
.yms-card__cover--none .yms-nocover__title {
  font-size: clamp(15px, 2.3vw, 21px); font-weight: 700; line-height: 1.5;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; text-wrap: balance;
}
.yms-card__cover--none .yms-nocover__foot {
  font-size: 11.5px; color: var(--text-faint); letter-spacing: .06em;
  display: flex; justify-content: space-between; gap: 8px;
}

.yms-card__body {
  flex: 1 0 auto;   /* 8/25v2: 行の余りはここが引き受ける（表紙を伸ばすと絵が歪む） */
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid var(--line-soft);
}
.yms-card__title {
  margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yms-mosaic > .yms-card:first-child .yms-card__title { font-size: 16px; -webkit-line-clamp: 3; }
.yms-card__meta {
  margin: 0; font-size: 11.5px; color: var(--text-faint);
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* 印。表紙の有無に関わらず同じ位置 */
.yms-flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 1; }
.yms-flag {
  /* 8/26: 10.5px だった。11.5px との差は1pxで、意図した刻みとして読めない。
     文字サイズの種類が14種に増え、見た目の検査D5（決めた表が無い印）が落ちた。
     小さい方の刻みへ畳む */
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--flag-bg); color: var(--text-soft);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(31,27,24,.12);
}
.yms-flag--sample { color: var(--text); }
.yms-flag--deal { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* --- ボタン（新規作成）。見た目の組は1つ、役割で主・副 ------------------------ */
.yms-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--cta-min-h); padding: 12px 20px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent-deep); border-radius: 999px;
  font-size: 15px; font-weight: 800; text-decoration: none; text-align: center;
  box-shadow: var(--shadow-cta);
}
.yms-cta:active { transform: translateY(1px); }
/* 副ボタンは作らない。販売先リンクの見た目の組を1つに保つ（契約が数える）。
   主従の差は並び順と文言で付ける。 */
.yms-cta__row { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
@media (min-width: 700px) { .yms-cta__row { flex-direction: row; } .yms-cta { flex: 1; } }

/* --- 記事 -------------------------------------------------------------------- */
.yms-article { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .yms-article { grid-template-columns: minmax(0,1fr) 272px; } }
.yms-article__title {
  font-size: clamp(19px, 2.6vw, 26px); line-height: 1.5; margin: 16px 0 10px;
  font-weight: 800; text-wrap: balance;
}
.yms-hero {
  position: relative; display: block; aspect-ratio: 800 / 538;
  background: var(--surface-alt); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
}
.yms-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.entry-content { max-width: 64ch; }
/* 8/25v2: 見出し16px / 本文15px = 1.07倍で、節の切れ目が読み取れなかった */
/* 8/25v4: **3度目の同じ型**。本文用の装飾が部品の中の見出しに勝っていた。
   1度目はCTAが赤地に赤文字、2度目は割引一覧の行が赤い下線、今回は関連作品カードの題名が
   19px＋下線＋余白30pxになり、カードが崩れて見えた（一覧ページでは13.5pxで正常）。
   リンクに `yms-blocklink` を決めたのと同じ考えで、**部品の中の見出しは本文の装飾から外す**。
   除外は個々の部品名ではなく「カードの中か」で判定する（部品は今後も増える）。 */
.entry-content :is(.yms-card, .yms-rankcard, .yms-deal-row, .yms-related) h2,
.entry-content :is(.yms-card, .yms-rankcard, .yms-deal-row, .yms-related) h3 {
  margin: 0; padding: 0; border: 0; font-size: inherit; font-weight: inherit;
}

.entry-content h2 {
  font-size: 19px; font-weight: 800; margin: 30px 0 10px; padding: 0 0 6px;
  border-bottom: 2px solid var(--text); width: fit-content; line-height: 1.5;
}
.entry-content p { margin: 0 0 14px; color: var(--text-soft); }
.yms-facts { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 18px; }
.yms-facts th, .yms-facts td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.yms-facts th { width: 128px; background: var(--surface-alt); color: var(--text-soft); font-weight: 700; }
.yms-facts td { font-variant-numeric: tabular-nums; }

/* --- 枠。ランキングは置かない ------------------------------------------------ */
.yms-aside { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.widget {
  background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none;
  border-top: 1px solid var(--line-soft);
}
.widget__title {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--text-soft);
  margin: 0; padding: 14px 0 6px;
}
.widget ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.widget li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.widget li:last-child { border-bottom: none; }
.widget a { color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.55; min-width: 0; }
.widget a:hover { color: var(--accent); }
.widget time { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- 固定ページ --------------------------------------------------------------- */
.yms-page { max-width: 64ch; }
.yms-page h1 { font-size: 22px; margin: 20px 0 14px; font-weight: 800; }
.yms-page h2 { font-size: 19px; margin: 28px 0 8px; }
.yms-page p, .yms-page li { color: var(--text-soft); }
.yms-page dl { display: grid; grid-template-columns: 8em 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.yms-page dt { color: var(--text-faint); }
.yms-page dd { margin: 0; }
.yms-page input, .yms-page textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--text);
}

/* --- 下部 --------------------------------------------------------------------- */
/* 8/25実害: bodyまっすぐ下に出るためコンテナ外で左右余白0だった。本文幅へ揃える */
.yms-foot {
  max-width: 1240px; margin: 48px auto 0; padding: 20px 16px 40px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
}
.yms-foot a { color: var(--text-soft); font-size: 13.5px; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.yms-foot a:hover { color: var(--text); }
.yms-foot__note { width: 100%; font-size: 11.5px; color: var(--text-faint); margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* --- 固定下部CTA（記事のみ）。本文を隠さない: bodyに同じ高さの下余白を足す ------ */
.yms-fixed-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px -8px rgba(31,27,24,.25);
}
.yms-fixed-cta .yms-cta { flex: 1; margin: 0; }
.yms-fixed-cta__close {
  min-width: 44px; min-height: 44px;   /* 8/25v2: 40pxで指1本に足りない。閉じる操作は特に外しやすい */
  flex: none; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-soft);
  font-size: 18px; cursor: pointer;
}
body.yms-has-fixed-cta { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
/* 8/25v4の実害: 下余白だけでは足りなかった。目次のリンクや `scrollIntoView` は
   要素を**画面のいちばん下**へ送るので、そこに居る固定CTAが要素を覆う（契約12が捕まえた）。
   ブラウザに「下から78pxは避けて止まれ」と伝える。これが標準の仕組み。 */
html:has(body.yms-has-fixed-cta) { scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

/* 記事ではCocoonの下部メニューを出さない。固定CTAと同じ場所を取り合うため（8/23実測）。
   anibuta型の「メニュー+CTA統合バー」は次版で作る。 */
body.single .wp-bottom-menu, body.single .wp-bottom-menu-search-form-wrapper { display: none; }

/* 単体ページの表紙はゲート要件で本文が持つ（eager 1枚）。テーマ側のアイキャッチ表示を
   重ねると二重になる（anibuta実査で挙がった不良の型）。表示だけ消す。カードには使う。 */
/* 8/25実害: figureのUA既定marginで表紙だけ本文より内側に入っていた */
.yms-hero { margin-left: 0; margin-right: 0; }
.yms-hero img { width: 100%; height: auto; border-radius: 6px; }

/* Cocoon既定ヘッダー/フッター/浮遊UI: 全ページで自前部品(yms_mast/yms-foot)に置き換え（8/23カンプ反映） */
#header-container,
#footer, .footer,
.mobile-footer-menu-buttons,
#go-to-top { display: none; }
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus {
  position: fixed; left: 8px; top: 8px; z-index: 9999;
  background: var(--surface); color: var(--text); padding: 8px 12px;
}
.yms-mast-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* --- 記事/固定ページのシェル（8/23: Cocoon CSS全停止に伴い子テーマが持つ） ------ */
/* 8/25実測: 器の幅がページ種で3種類(760/1240/1256)に割れていた。ページ名で指定すると
   新しいページを足すたびに漏れるので、**テンプレが .yms-shell を出したかどうか**で自動判定する。
   棚ページ(トップ・一覧・ランキング・セール・検索)は shell が1240pxの器を持つ。
   読み物(記事・固定ページ)は shell を出さないので、ここで読み幅792pxに収める。 */
/* Cocoonは #content / .content-in / #main の3枚に幅を持たせるので、3枚とも同じ判定で揃える。
   1枚だけ絞ると内側が親を突き抜ける（8/25: #content=792 の中で .content-in=1256 になった） */
#content:has(.yms-shell), #content:has(.yms-shell) .content-in, #content:has(.yms-shell) #main {
  display: block; max-width: none; width: auto; margin: 0; padding: 0;
}
#content:not(:has(.yms-shell)), #content:not(:has(.yms-shell)) .content-in,
#content:not(:has(.yms-shell)) #main {
  display: block; max-width: 792px; width: auto; margin: 0 auto; padding: 0;
}
#content:not(:has(.yms-shell)) { padding: 0 16px 72px; }
body.single #sidebar, body.page #sidebar,
.breadcrumb, .pager-post-navi, .comment-respond, #comment-area,
.date-tags-area, .post-update, .entry-categories-tags { display: none; }
body.single .article h1.entry-title, body.page .article h1.entry-title {
  font-size: 22px; line-height: 1.5; font-weight: 800; margin: 20px 0 6px;
}
body.single .post-date { font-size: 12px; color: var(--text-faint); display: block; text-align: right; }
/* 目次（Cocoon生成の.tocをカンプの調子で） */
.toc {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; margin: 18px 0; font-size: 13.5px; background: var(--surface);
}
.toc .toc-title { font-weight: 800; font-size: 13.5px; }
.toc input[type="checkbox"], .toc .toc-widget-label { display: none; } /* Cocoonの開閉チェックボックスは素のまま出ると異物 */
.toc ol, .toc ul { margin: 6px 0 0; padding-left: 1.4em; }
/* 8/25v5（第三者検査が指摘）: 目次のリンクが高さ14px・行間9pxで、
   隣を誤って押しやすかった（D-018は44px以上）。字の大きさは変えず、押せる高さだけ確保する。 */
.toc a {
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; min-height: 44px;
}
.toc li { margin: 0; }
.toc a:hover { color: var(--accent); }

/* --- 壊れ止め(8/23レビュー): 子CSSが面倒を見ないページ種でも崩れない土台 --------- */
img, video { max-width: 100%; height: auto; }
.display-none { display: none !important; } /* Cocoonが付ける非表示クラス。親CSS停止ページでも効かせる */

/* 検索結果ページ: Cocoonの検索窓は自前マストと二重になるため出さない */
body.search .search-box { display: none; }

/* --- バナーレール(8/24稼働・4枚) --------------------------------------------- */
.yms-banner-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 14px; }
.yms-banner img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line-soft); }
.yms-banner:hover img { border-color: var(--accent); }
@media (max-width: 899px) { .yms-banner-rail { grid-template-columns: repeat(2, 1fr); } }

/* --- 人気ランキング(販売元準拠・取得日つき) ----------------------------------- */
.yms-rank { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.yms-rank li { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.yms-rank li:last-child { border-bottom: none; }
.yms-rank li { align-items: center; }
.yms-rank__no { min-width: 1.8em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-soft); text-align: center; }
.yms-rank li:nth-child(-n+3) .yms-rank__no { color: var(--accent); }
.yms-rank__no--medal { font-size: 20px; }
.yms-rank__thumb { width: 88px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-soft); flex: none; }
.yms-rank a { color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.55; }
.yms-rank a:hover { color: var(--accent); }
.yms-rank__source { font-size: 11.5px; color: var(--text-faint); margin: 10px 0 0; }

/* 最近追加のサムネイル（8/24: 文字だけは寂しい、の指摘対応） */
.widget li img.yms-recent__thumb { width: 88px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-soft); flex: none; }
.widget li { align-items: center; }
.widget li a { flex: 1; min-width: 0; }

/* サンプル画像節（記事・8/24採用: 在る時だけ・lazy） */
.yms-samples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 0 18px; }
/* 8/25: 比率がばらつき高さが195pxと421pxに割れて格子に穴があいていた。
   8/25v2: 穴を塞ぐために表紙規格へ潰したところ、縦長サンプル（52枚中16枚）の**55%が切れ**、
   焼き込み文字が読めなくなった。枠は揃えたまま cover→contain にして切らない。
   余白が出るぶんは地色で埋める（サンプルは中身を見せるための画像なので、切るより余白が正しい） */
.yms-samples img { width: 100%; aspect-ratio: 800 / 538; object-fit: contain;
  background: var(--surface-alt);
  border-radius: var(--radius); border: 1px solid var(--line-soft); }
/* 8/25v2: SPで1列だと枠358pxになり、DPR2で716px必要になって重く滲む。2列のまま保つ */
@media (max-width: 599px) { .yms-samples { gap: 8px; } }

/* --- ランキング（8/24v2: 1位大→2〜5位横列→6〜10行。全段ぼかし+全体表示） -------- */
.yms-rank-first { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); }
.yms-rank-first__cover { position: relative; display: block; aspect-ratio: 800/538; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); }

.yms-rank-first__title { font-size: 16px; font-weight: 800; line-height: 1.5; }
.yms-rank-first:hover .yms-rank-first__title { color: var(--accent); }
.yms-rank-first { max-width: 720px; }
.yms-rank-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 6px; }
@media (max-width: 767px) { .yms-rank-row { grid-template-columns: repeat(2, 1fr); } }
.yms-rank-mid { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); min-height: 0; }
.yms-rank-mid__cover { position: relative; aspect-ratio: 800/538; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); }
.yms-rank-mid__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(5px) brightness(.82); transform: scale(1.1); }
.yms-rank-mid__fg { position: relative; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.yms-rank-mid__title { font-size: 12px; font-weight: 700; line-height: 1.45; }
.yms-rank-mid:hover .yms-rank-mid__title { color: var(--accent); }
/* 順位バッジ: 金/銀/銅は順位の意味色(装飾でなく情報)。形は平面・角丸小 */
.yms-rank__badge {
  position: absolute; top: 0; left: 0; min-width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #FFFFFF;
  border-radius: 0 0 6px 0;   /* 8/27: ホーム側の札と揃える（D5が捕まえた） */ z-index: 2;
}
/* 8/25v4: 白文字でメダル色に載せていて、金2.95・銀3.04（目安4.5）だった。
   **メダルの色そのものが順位の意味**なので色は変えず、文字の方を濃くする。
   金5.80 / 銀5.62 / 銅は白のままで4.57 / 黒は白のままで17.10。 */
.yms-rank__badge--1 { background: #B8912B; color: var(--text); }
.yms-rank__badge--2 { background: #8C959D; color: var(--text); }
.yms-rank__badge--3 { background: #9C6B44; }
.yms-rank__badge--4, .yms-rank__badge--5 { background: #1F1B18; }
.yms-rank-first .yms-rank__badge { min-width: 40px; height: 40px; font-size: 21px; }
/* 1位: パッケージ全体を見せる(ぼかし背景+contain前景) */
.yms-rank-first__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(6px) brightness(.82); transform: scale(1.1);
}
.yms-rank-first__fg {
  position: relative; width: 100%; height: 100%; object-fit: contain; z-index: 1;
}
.yms-rank-first__cover img { transition: transform .3s ease; }
.yms-rank-mid__cover img { transition: transform .3s ease; }
.yms-card .yms-cover-img { transition: transform .3s ease; }
.yms-rank-first:hover .yms-rank-first__fg,
.yms-rank-mid:hover .yms-rank-mid__fg,
.yms-card:hover .yms-cover-img { transform: scale(1.04); }
.yms-rank-first:hover .yms-rank-first__bg { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  .yms-rank-first__cover img, .yms-rank-mid__cover img, .yms-card .yms-cover-img { transition: none !important; }
  .yms-rank-first:hover .yms-rank-first__fg, .yms-rank-mid:hover .yms-rank-mid__fg,
  .yms-card:hover .yms-cover-img { transform: none; }
}


/* 固定バー: 初期非表示(事実表を覆わない)→スクロールで出現 */
/* 8/25v4の実害: 「隠す」が**画面外へずらすだけ**で、当たり判定が残っていた。
   ずらした先で事実表の行と重なり、指が本文ではなくバーに当たる（契約12が捕まえた）。
   目に見えないものは押せてもいけない。**当たり判定ごと外す。** */
.yms-fixed-cta--hidden {
  transform: translateY(110%);
  pointer-events: none;
  visibility: hidden;
}
.yms-fixed-cta { transition: transform .25s ease, visibility .25s; }
@media (prefers-reduced-motion: reduce) { .yms-fixed-cta { transition: none; } }

/* 続きの作品(大カード3枚) と 共通「もっと見る」 */
/* 8/25: 3列3枚だとSPの2列で最終行に穴。隣の棚(セール帯・ランキング行)と同じ4列へ揃える */
.yms-recent-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 10px 0; }
@media (max-width: 767px) { .yms-recent-cards { grid-template-columns: 1fr 1fr; } }
.yms-more {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none;
  font-size: 13.5px; font-weight: 700; background: var(--surface);
}
.yms-more:hover { border-color: var(--accent); color: var(--accent); }

/* ホームの割引ストリップ */
.yms-sale-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 6px; }
@media (max-width: 767px) { .yms-sale-strip { grid-template-columns: 1fr 1fr; } }
.yms-sale-tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); }
/* 8/25v2: ここだけ16/9が残り、表紙の上下19.6%を切っていた（他3棚は規格比に直っていた） */
.yms-sale-tile__cover { position: relative; aspect-ratio: 800/538; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); }
.yms-sale-tile__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.yms-sale-tile:hover .yms-sale-tile__cover img { transform: scale(1.04); }
/* サイト名。独立した看板絵はこの直後に置く。 */
.yms-brandbar {
  background: linear-gradient(102deg, #1F1B18 0%, #2C1A18 55%, #451510 100%);
  margin-bottom: 0;
}
.yms-brand {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; padding: 18px 16px;
}
.yms-brand__id { min-width: 0; }
.yms-brand__name {
  display: inline-block; color: #fff; text-decoration: none;
  font-size: clamp(21px, 3vw, 31px); font-weight: 900; letter-spacing: .03em; line-height: 1.15;
}
.yms-brand__name::after {
  content: ""; display: block; width: 42px; height: 3px; margin-top: 6px;
  background: var(--accent); border-radius: 2px;
}
.yms-brand__tag { margin: 7px 0 0; color: #E6DCD6; font-size: 12px; line-height: 1.5; }
.yms-brand .yms-search { flex: 1; min-width: 240px; }
.yms-brand .yms-search input { background: #fff; border-color: transparent; }
.yms-brand .yms-search button { background: var(--accent); border-color: var(--accent); }
@media (max-width: 767px) {
  .yms-brand { gap: 12px; padding: 12px 14px; }
  .yms-brand__name::after { width: 34px; height: 2px; margin-top: 4px; }
  .yms-brand__tag { font-size: 11.5px; margin-top: 5px; }
  .yms-brand .yms-search { min-width: 100%; }
}

/* サイドバーのジャンルバナー(8/24: タグ羅列より視認性が高いという深瀬指摘) */
.yms-side-genres { display: grid; gap: 8px; }
.yms-side-genre { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); }
.yms-side-genre img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.yms-side-genre:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .yms-side-genre img { transition: none; transform: none !important; } }

/* 人気ランキングページ(8/24新設) */
.yms-rankhead { margin: 18px 0 10px; }
/* 8/25v3: 上限が30pxで、看板の31pxと1pxだけ違う刻みを作っていた。誰も見分けられない差は表を汚すだけ */
.yms-rankhead h1 { font-size: clamp(22px, 3vw, 31px); margin: 0 0 6px; }
.yms-rankhead__source { margin: 0; font-size: 12px; color: var(--text-faint); line-height: 1.7; }
/* 8/25v2: 390pxでランキングの絞り込み17個すべてが44px未満（実効34〜36px）だった。
   見た目の丸ボタンは変えず、行の余白で当たり判定を44pxにする */
.yms-ranktabs, .yms-rankgenres { display: flex; flex-wrap: wrap; gap: 8px 8px; margin: 12px 0; }
.yms-ranktabs a, .yms-rankgenres a { position: relative; }
.yms-ranktabs a::before, .yms-rankgenres a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}
.yms-ranktabs a, .yms-rankgenres a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-soft); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--text);
}
.yms-ranktabs a[aria-current], .yms-rankgenres a[aria-current] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.yms-rankgenres a { font-weight: 500; font-size: 12px; min-height: 34px; }
.yms-rankgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 22px; }
@media (max-width: 1099px) { .yms-rankgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .yms-rankgrid { grid-template-columns: repeat(2, 1fr); } }
.yms-rankcard { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); }
.yms-rankcard__cover { position: relative; display: block; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--surface-alt); aspect-ratio: 800 / 538; }
.yms-rankcard__cover img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease; }
.yms-rankcard:hover .yms-rankcard__cover img { transform: scale(1.04); }
.yms-rankcard__title { font-size: 12px; font-weight: 700; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yms-rankcard:hover .yms-rankcard__title { color: var(--accent); }
.yms-rankcard__meta { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .yms-rankcard__cover img { transition: none; transform: none !important; } }

.yms-rank1 { width: 100%; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: center;
  margin: 14px 0 18px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: linear-gradient(150deg, #FFFDF8 0%, #FFF7F6 100%); }
/* 9/2 添削A: 一等地の1位枠だけ aspect-ratio が無く、入る絵（800×600 等）で枠の形が変わっていた
 * （検査B11「枠のずれ最大10.3%」の正体）。枠は他の表紙と同じ規格に固定し、規格外の絵は切らずに収める */
.yms-rank1__cover { position: relative; display: block; aspect-ratio: 800 / 538; background: var(--surface-alt); }
.yms-rank1__cover img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.yms-rank1__cover { border-radius: 8px; overflow: hidden; }
/* 8/25v4: バッジと同じく金地に白文字で2.95だった。金は順位の意味色なので文字の方を濃くする（5.80） */
.yms-rank1__pos { display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: #B8912B; color: var(--text); font-size: 12px; font-weight: 800; }
.yms-rank1__body h2 { font-size: clamp(17px, 2.2vw, 22px); line-height: 1.5; margin: 8px 0; }
.yms-rank1__facts { margin: 0 0 12px; font-size: 13.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; }
.yms-ranklist { list-style: none; margin: 0; padding: 0; }
.yms-ranklist__row { display: grid; grid-template-columns: 34px 48px 1fr auto; gap: 10px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
/* 8/25: 6位以降だけ赤に見える不統一。行の順位は全て同じ色にする */
.yms-ranklist__pos { font-size: 15px; font-weight: 800; color: var(--text-soft);
  text-align: center; font-variant-numeric: tabular-nums; }
/* 販売元サムネは90x122の縦長。切らずに全体を出す(D-012)。原寸以下なので拡大もしない(D-010) */
/* 8/25: 販売元の一覧用画像は90pxしか無い。枠48pxだとDPR2で96px必要になり91枚が滲んでいた。
   45pxにすると原画がちょうど2倍になる（枠を原画に合わせる。D-056の小さい側の適用） */
.yms-ranklist__thumb { width: 45px; height: auto; aspect-ratio: 90 / 122; object-fit: contain;
  border-radius: 6px; display: block; background: var(--surface-alt); }
.yms-ranklist__title { font-size: 13.5px; line-height: 1.5; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.yms-ranklist__title a { color: var(--text); text-decoration: none; position: relative; }
/* 8/25v2: 題名が1行の作品ほど押せる帯が薄く、最小14pxだった。行の高さいっぱいを当たり判定にする
   （行は既に44px以上あるので、見た目を変えずに指1本ぶんを確保できる） */
.yms-ranklist__title a::before { content: ""; position: absolute; inset: -14px 0; }
.yms-ranklist__title a:hover { color: var(--accent); text-decoration: underline; }
.yms-ranklist__meta { font-size: 12px; color: var(--text-faint); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .yms-rank1 { grid-template-columns: 1fr; }
  .yms-ranklist__row { grid-template-columns: 28px 44px 1fr; row-gap: 2px; }
  .yms-ranklist__thumb { width: 45px; }  /* SPでも原画90pxの等倍2xを保つ */
  .yms-ranklist__meta { grid-column: 2 / -1; white-space: normal; }
}

/* PC右サイドバー実験(8/24): 1100px以上でのみ2カラム化。SPは非表示=現行1カラム維持 */
/* サイドバー: PCは右カラム、SPは本文の下へ全幅（display:noneにしない＝lazy画像が読み込まれる・D-015） */
.yms-side { display: block; margin-top: 24px; }
@media (max-width: 1099px) { .yms-side-genres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .yms-shell--with-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .yms-shell--with-side > .yms-shell-main { min-width: 0; }
  /* 8/25v5: 2カラムでは基本の margin-top:24px が残り、左右の柱の書き出しが24px食い違っていた */
  .yms-side { display: block; position: sticky; top: 16px; margin-top: 0; }
  .yms-side .yms-side__w { margin-bottom: 22px; }
  .yms-side .widget__title { font-size: 14px; margin: 0 0 10px; }
  .yms-side ul { list-style: none; margin: 0; padding: 0; }
  .yms-side li { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; }
  .yms-side a { color: var(--text); }
  .yms-side a:hover { color: var(--accent); }
  .yms-side .wp-block-tag-cloud a, .yms-side .tagcloud a {
    display: inline-block; margin: 0 6px 6px 0; padding: 3px 9px;
    border: 1px solid var(--line-soft); border-radius: 999px;
    /* WPタグクラウドは件数比のfont-sizeをinlineで吐くため!importantが必要 */
    font-size: 12px !important; text-decoration: none;
  }
  .yms-side input[type="search"], .yms-side input[type="text"] {
    width: 100%; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px;
  }
}

/* 蛍光マーカー強調: 期限・数字を持たない常設文(evergreen)専用。変動する値には使わない(8/24) */
.yms-marker {
  background: linear-gradient(transparent 58%, #FFE58A 58%);
  font-weight: 700; padding: 0 2px;
}
/* セール・クーポン常設節: 本文と区別できるカード面 */
.yms-dealinfo {
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 16px 18px; margin: 24px 0;
  background: linear-gradient(150deg, #FFFDF8 0%, #FFF9F0 100%);
}
.yms-dealinfo h2 { margin-top: 0; }
.yms-page-hero img { width: 100%; height: auto; border-radius: 8px; }

/* ローカル良画像が無いタイル: 極小外部画像を引き伸ばさず、無地の地にする(8/24) */
.yms-sale-tile__cover--none {
  background: linear-gradient(150deg, var(--surface-alt) 0%, #FDFCFB 60%, var(--surface-alt) 100%);
}
.yms-sale-tile__pill {
  position: absolute; top: 6px; left: 6px; height: 22px; display: inline-flex; align-items: center;
  padding: 0 10px; border-radius: 11px; background: var(--accent); color: #FFFFFF;
  font-size: 11.5px; font-weight: 800;
}
.yms-sale-tile__title { font-size: 12px; font-weight: 700; line-height: 1.45; }
.yms-sale-tile__price { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.yms-sale-tile__price s { color: var(--text-faint); }
.yms-sale-tile__price s { margin: 0 2px; }
@media (prefers-reduced-motion: reduce) { .yms-sale-tile__cover img { transition: none; transform: none !important; } }

/* 固定ページに投稿日は不要(8/24レビュー) */
body.page .post-date { display: none; }

/* バナーのHTMLラベル重畳(画像内文字0の再制作版に必須・8/24検収条件) */
.yms-banner { position: relative; display: block; }
.yms-banner__label {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
  background: rgba(255,255,255,.92); border: 1px solid var(--line-soft); border-radius: 999px;
  font-size: 13.5px; font-weight: 800; color: var(--text); pointer-events: none;
}
/* ジャンルから探す(タグ3本以上で自動出現) */
.yms-genres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 6px; }
@media (max-width: 767px) { .yms-genres { grid-template-columns: repeat(2, 1fr); } }
.yms-genre-tile { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); }
.yms-genre-tile img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.yms-genre-tile:hover img { transform: scale(1.04); }
.yms-genre-tile .yms-banner__label { left: 8px; bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .yms-genre-tile img { transition: none; transform: none !important; } }

/* --- 一覧（カテゴリ/タグ共通・8/24）: 説明なしのカード3カラム ------------------- */
.yms-archive-head { display: flex; align-items: baseline; gap: 12px; padding: 18px 0 6px; }
.yms-archive-head__title { font-size: 22px; font-weight: 800; margin: 0; }
.yms-archive-head__count { font-size: 13.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* 8/25v2: 3列(枠282px)は1枚あたり564px必要で、24件でPC 2,138KB=基準の25%超だった。
   4列(枠209px)なら418pxで足り、件数を減らさずに軽くできる。ホームのモザイクとも同じ大きさになる */
.yms-archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 8px 0 20px; }
@media (max-width: 767px) { .yms-archive-grid { grid-template-columns: repeat(2, 1fr); } }
.yms-archive-empty { color: var(--text-soft); padding: 24px 0; }
.navigation.pagination { display: flex; justify-content: center; padding: 8px 0 28px; }
.navigation.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.navigation.pagination .page-numbers {
  min-height: 44px; min-width: 44px;   /* 8/25v2: 40pxで指1本に足りなかった */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 700; background: var(--surface);
}
.navigation.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.navigation.pagination .page-numbers:hover:not(.current) { border-color: var(--accent); color: var(--accent); }
.screen-reader-text { position: absolute; left: -9999px; }

/* /sale/ の取得時点注記（旧インラインstyleの置き換え） */
.yms-sale-note { color: var(--text-soft); font-size: 12px; }

/* ホーム最上部のランキング帯（8/25） */
.yms-homerank__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* 8/25v2: overflow-x が当たり判定の擬似要素を切り、宣言44pxでも実効36pxだった。
   容器に上下の余白を持たせて44pxが収まるようにする。あわせて右端の見切れに合図を出す
   （390pxでジャンル10個中4個が完全に画面外なのに、スクロールできる印が何も無かった） */
.yms-chiprow { display: flex; gap: 8px; margin: 10px 0; overflow-x: auto;
  padding-block: 5px; scrollbar-width: thin;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); }
/* 端まで見えている時は合図を消す（常時フェードだと最後のチップが薄いまま） */
@media (min-width: 1200px) { .yms-chiprow { mask-image: none; -webkit-mask-image: none; } }
.yms-chiprow a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px;
  border: 1px solid var(--line-soft); border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--text); text-decoration: none; white-space: nowrap; }
.yms-chiprow a[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }
.yms-chiprow--genre a { font-weight: 500; }
/* 掲示板型のランキング（8/25）。文字行から表紙主役へ。
   PC5列×2行 / SP2列×5行。どちらも最終行が埋まる枚数で回している */
.yms-homerank__board {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 12px;
}
/* 親テーマが .widget の li / a に別の display を当ててくるため、升と中身の両方で
   block と width を明示する。8/25: 166pxの升の中でリンクだけ78pxに縮んでいた */
.yms-homerank__board > .yms-homerank__cell { display: block; width: 100%; min-width: 0; }
.yms-homerank__cell > .yms-homerank__link { display: block; width: 100%; text-decoration: none; color: inherit; }
.yms-homerank__cover {
  /* width を明示する。span は親CSSの影響で幅が定まらないことがあり、aspect-ratio が
     高さ側から幅を決めて166pxの升に78pxの絵が入っていた（8/25実測） */
  position: relative; display: block; width: 100%; aspect-ratio: 800 / 538; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--surface-alt);
}
.yms-homerank__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yms-homerank__badge {
  position: absolute; left: 0; top: 0; min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 800;
  border-bottom-right-radius: var(--radius); font-variant-numeric: tabular-nums;
}
/* 1〜3位だけ番号を大きく。順位そのものが情報なので、装飾ではなく段差で示す */
.yms-homerank__cell:nth-child(-n+3) .yms-homerank__badge { min-width: 32px; height: 32px; font-size: 18px; }
.yms-homerank__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 6px 0 2px; font-size: 12px; line-height: 1.45; color: var(--text);
}
.yms-homerank__link:hover .yms-homerank__name { color: var(--accent); }
.yms-homerank__meta { font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { .yms-homerank__board { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
  .yms-homerank__board { grid-template-columns: repeat(2, 1fr); }
  .yms-homerank__name { font-size: 13.5px; }
}

/* お得に買う（金額・期限は書かない。数字は販売元ページの表示が正） */
.yms-deals__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 767px) { .yms-deals__row { grid-template-columns: 1fr; } }
/* 8/27 深瀬「ちょっと目立たないからバナーを作るかなんかしたい」。
   薄いクリーム色の枠で、本文の中に沈んでいた。**ジャンルと出演者の札と同じ家族**に見える
   濃い札へ。絵は無いので、色と大きさで重さを出す。角丸は既存の刻み（var(--radius)）に寄せる */
.yms-deal {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 74px; padding: 14px 40px 14px 16px;
  border: 1px solid transparent; border-radius: var(--radius); text-decoration: none;
  background: linear-gradient(135deg, #2A1730 0%, #4A2340 55%, #6B2E4A 100%);
  transition: transform .2s ease;
}
.yms-deal:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .yms-deal { transition: none; } .yms-deal:hover { transform: none; } }
.yms-deal::after {
  content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: rgba(255,255,255,.6);
}
.yms-deal__label { font-size: 14.5px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.yms-deal__note { font-size: 11.5px; color: rgba(255,255,255,.72); }

/* カードの価格（題名から分離・8/25） */
.yms-card__price { margin-left: auto; font-weight: 700; color: var(--text-soft);
  font-variant-numeric: tabular-nums; }


/* --- 指で押せる大きさ（8/25実測: 390pxで22件が44px未満、最小20px） ----------------- */
/* 見た目の高さは変えず、押せる面だけ44pxまで広げる（縦paddingではなく擬似要素で伸ばす） */
/* ::after は既に飾りで使われている要素がある（.yms-brand__name の赤い下線を潰して
   看板の「Mi」を隠した。8/25の実害）。当たり判定には ::before を使い、
   **飾りに使っていない要素だけ**に当てる。看板の題字は下線が主役なので対象から外す */
/* 看板の題字だけは擬似要素が下線で埋まっているので、余白で当たり判定を広げる。
   同じ幅の負のmarginで戻すため、見た目は1pxも動かない */
.yms-brand__name { display: inline-block; padding-block: 7px; margin-block: -7px; }
.yms-chiprow a, .yms-sort a, .yms-side .widget li > a { position: relative; }
.yms-chiprow a::before, .yms-sort a::before, .yms-side .widget li > a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px; min-height: 100%;
}
.yms-search button, .yms-search input[type="submit"] { min-height: 44px; }


/* --- 本文リンク（8/25: 固定ページの本文だけブラウザ既定の青 rgb(0,0,238) のままだった） ----
   記事テンプレは自前のクラスで色を当てていたが、WPの本文（.entry-content）を通る
   固定ページは素通りしていた。**器ではなく本文そのもの**に当てて取りこぼしを無くす。
   8/25の自傷: この規則の詳細度(0,2,1)が .yms-cta(0,1,0) に勝ち、**本文中のCTAボタンを
   赤地に赤文字（コントラスト1.00:1）にして全記事の購入ボタンを消していた**。
   ボタン部品は今後も増えるので、除外は「本文リンク規則の側」に置く */
/* 8/25v3: 2度目の同じ事故。割引一覧の行を <li> で作ったら、この規則が勝って
   行全体が赤い下線リンクになった（表紙・題名・価格が全部赤）。
   部品を1つ足すたびに除外を1つ足すのは続かないので、**印を1つに決める**。
   これ以降、本文の文章ではない「部品としてのリンク」には `yms-blocklink` を付ける。
   ここに足すのはその1語だけで済む。 */
.entry-content p a:not(.yms-cta):not(.yms-blocklink), .entry-content li a:not(.yms-cta):not(.yms-blocklink),
.yms-page p a:not(.yms-cta):not(.yms-blocklink), .yms-page li a:not(.yms-cta):not(.yms-blocklink),
.yms-article p a:not(.yms-cta):not(.yms-blocklink), .yms-article li a:not(.yms-cta):not(.yms-blocklink) {
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.entry-content p a:not(.yms-cta):not(.yms-blocklink):hover, .entry-content li a:not(.yms-cta):not(.yms-blocklink):hover,
.yms-page p a:not(.yms-cta):not(.yms-blocklink):hover, .yms-page li a:not(.yms-cta):not(.yms-blocklink):hover,
.yms-article p a:not(.yms-cta):not(.yms-blocklink):hover, .yms-article li a:not(.yms-cta):not(.yms-blocklink):hover { color: var(--text); }
/* 目次のリンクは一覧なので下線を出さない（下線だらけになる） */
.toc a, .entry-content .toc a { text-decoration: none; color: var(--text); }


/* --- 行き止まりからの脱出導線（8/25v2: マークアップだけ先に入り、CSSが1行も無かった。
   検索0件・空検索・404の3面がブラウザ既定の青リンクのベタ置きで作りかけに見えていた）--- */
.yms-searchguide { margin: 8px 0 26px; }
.yms-searchguide__lead { font-size: 14px; line-height: 1.7; color: var(--text-soft); margin: 0 0 14px; }
.yms-searchguide__genres, .yms-searchguide__links {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0;
}
/* チップと同じ形に寄せる（新しい寸法を増やさない） */
.yms-searchguide__genres a, .yms-searchguide__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-soft); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none;
}
.yms-searchguide__links a { border-color: var(--accent); color: var(--accent); }
.yms-searchguide__genres a:hover, .yms-searchguide__links a:hover {
  border-color: var(--accent); color: var(--accent);
}


/* 規格外の表紙（縦長など）は切らずに収める（8/25v2: 480×677の作品が中央の帯しか見えなかった）。
   枠の高さは他のカードと揃えたままなので、棚の並びは崩れない */
.yms-card__cover--offspec img { object-fit: contain; background: var(--surface-alt); }

/* --- ランキングの切り替えと100位版の格子（8/25 深瀬要望） ------------------------------ */
/* 切り替え中だけ薄くする。差し替えは一瞬なので回転する印は置かない（動きを増やさない・D-053） */
.yms-rankboard[data-loading] { opacity: .55; transition: opacity .12s ease; }

/* 10位以降: 縦に長い行をやめて、表紙を横に並べる。題名は1行・価格は出さない。
   90件がPC15列・タブレット6列・SP5列のどれでも最終行まで埋まる（90=2·3²·5）。
   枠80pxは原画160wのちょうど半分で、DPR2で等倍2倍を満たす最小の大きさ */
.yms-posters {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 10px 8px;
}
.yms-poster > a { display: block; text-decoration: none; color: inherit; }
.yms-poster__cover {
  position: relative; display: block; width: 100%; aspect-ratio: 800 / 538;
  overflow: hidden; border-radius: 6px; border: 1px solid var(--line-soft); background: var(--surface-alt);
}
.yms-poster__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yms-poster__pos {
  position: absolute; left: 0; top: 0; min-width: 20px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(31, 27, 24, .82); color: #fff; font-size: 11.5px; font-weight: 800;
  border-bottom-right-radius: 6px; font-variant-numeric: tabular-nums;
}
/* 15列だと題名は1文字も読めないので出さない。読み上げ名は a[aria-label] が持つ */
.yms-poster__title { display: none; }
.yms-poster__title--unused {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  margin: 4px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--text-soft);
}
.yms-poster > a:hover .yms-poster__title { color: var(--accent); }
@media (max-width: 1199px) { .yms-posters { grid-template-columns: repeat(9, 1fr); } }
@media (max-width: 599px)  { .yms-posters { grid-template-columns: repeat(5, 1fr); gap: 10px 8px; } }

/* 表紙が未取り込みの枠。順位を欠落させないための受け皿（8/25） */
.yms-poster__cover--none { display: flex; align-items: center; justify-content: center; padding: 4px; }
.yms-poster__none { font-size: 10px; line-height: 1.3; color: var(--text-faint); text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* 8/25: ランキングの絞り込みとポスターが44px未満だった。見た目は変えず当たり判定だけ広げる */
.yms-ranktabs a, .yms-rankgenres a { position: relative; }
.yms-ranktabs a::before, .yms-rankgenres a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}
.yms-poster > a { position: relative; display: block; min-height: 44px; }

/* --- ランキングの「もっと見る」（8/25: 2位以降を同じ大きさで続ける。一度に20枚まで） ------ */
.yms-rankcard--more { display: none; }
.yms-rankcard--more.is-shown { display: block; }
.yms-posters__more { margin: 18px 0 4px; text-align: center; }
.yms-morebtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 26px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--surface); color: var(--accent);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.yms-morebtn:hover { background: var(--accent); color: #fff; }
/* 表紙が未取り込みの枠。順位を欠落させないための受け皿 */
.yms-rankcard__none {
  display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px;
  font-size: 11.5px; line-height: 1.4; color: var(--text-faint); text-align: center;
}
@media (max-width: 767px) { .yms-rankgrid { grid-template-columns: repeat(2, 1fr); } }

/* --- ランキングの絞り込み（8/25: 選択式へ。スマホでは指で回す選択画面が出る） -------------- */
.yms-rankfilter { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 12px 0 4px; align-items: end; }
.yms-rankfilter label { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 160px; }
.yms-rankfilter label > span { font-size: 11.5px; font-weight: 700; color: var(--text-soft); }
.yms-rankfilter select {
  min-height: 44px; padding: 0 34px 0 14px; width: 100%;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--text); font-size: 13.5px; font-weight: 700; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  /* 下向きの印。画像を足さずに描く */
  background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
                    linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.yms-rankfilter select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 900px) { .yms-rankfilter label { flex: 0 0 220px; } }

/* ランキングの行き先の区別（8/25 深瀬の問い）。
   実測: 総合と年間は100件中98〜100件に自サイトの記事があり、今日/今週/今月は1〜3件しかない。
   一律にどちらかへ寄せず、記事があれば自分の記事、無ければ販売元へ送る。
   読者には**どちらへ行くかが押す前に分かる**必要があるので、小さな印を付ける。 */
.yms-rankcard--mine .yms-rankcard__cover::after,
.yms-homerank__link--mine .yms-homerank__cover::after {
  content: "解説";
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.15em 0.5em;
  font-size: 0.71875rem;   /* 11.5px。実測で211箇所ある刻みに合わせる（新しい刻みを作らない） */
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 3px 0 0 0;
}
.yms-rankcard__cover,
.yms-homerank__cover { position: relative; }

/* 1位の「解説を読む」。買う導線(.yms-cta)より弱く見せる（主役を奪わない） */
.yms-rank1__read {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75em;
  /* タップ領域は44px以上（C1）。文字だけの弱いリンクでも押せる大きさを確保する */
  min-height: var(--cta-min-h);
  padding: 0.75em 0;
  font-size: 0.9375rem;   /* 15px。本文と同じ刻み */
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (max-width: 767px) {
  .yms-rank1__read { display: block; margin: 0.6em 0 0; }
}

/* 割引一覧の束の見出し（8/25v3: 12件しか出していなかったのを全件へ。
   件数が増えると「どこから見ればいいか」が分からなくなるので、終わる順に束ねる） */
.yms-sale-head {
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 1.1875rem;   /* 19px。見出しに既にある刻み */
  font-weight: 700;
  color: var(--text);
}
.yms-sale-head:first-of-type { margin-top: 16px; }

/* 割引の一覧行（8/25v3）。
   105件を全部大きなカードで出すと転送が5,302KB（上限1,700KB）になった。
   枚数を削るのではなく、上位6件だけ大きく、残りは1行ずつにする。
   表紙は96px枠＝DPR2で192px必要。yms240 を使うので余裕がある。
   割引を探す読者は「ざっと見て決める」ので、一覧の方が探しやすくもある。 */
.yms-deal-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 900px) {
  .yms-deal-list { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
.yms-deal-row { border-bottom: 1px solid var(--line-soft); }
.yms-deal-row > a {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  min-height: var(--cta-min-h);
  padding: 10px 2px;
  color: var(--text);
  text-decoration: none;
}
.yms-deal-row__cover {
  display: block;
  overflow: hidden;
  width: 96px;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  background: var(--surface-alt);
}
.yms-deal-row__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yms-deal-row__body { display: grid; gap: 4px; min-width: 0; }
.yms-deal-row__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.84375rem;   /* 13.5px。実測で233箇所ある刻み */
  font-weight: 600;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.yms-deal-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: 12.5px;   /* 8/27: 0.8rem=12.8px は独りだけの刻みだった（D5） */
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.yms-deal-row__meta b { color: var(--accent-deep); font-weight: 700; }
.yms-deal-row__meta s { color: var(--text-faint); }
.yms-deal-row > a:hover .yms-deal-row__title { color: var(--accent-deep); }

/* 「いま開催中の割引」（固定ページに差し込む生データの枠）。
   8/25v3: /otoku/ が文章だけで、いま何が割引中かが分からなかった */
.yms-deals-now {
  margin: 24px 0;
  padding: 16px 18px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.yms-deals-now > h2 { margin: 0 0 8px; font-size: 1.1875rem; }
.yms-deals-now__sum { margin: 0 0 12px; font-size: 0.84375rem; line-height: 1.8; color: var(--text-soft); }
.yms-deals-now .yms-deal-list { grid-template-columns: 1fr; border-top: 0; }
.yms-deals-now .yms-deal-row:last-child { border-bottom: 0; }

/* 入力欄の補足（文字数の上限など）。8/25v4: 上限を付けたので、その旨を読者に見せる */
.yms-form-note { display: block; margin-top: 4px; font-size: 0.71875rem; color: var(--text-faint); }

/* あらすじ（販売元の作品紹介の引用）。8/25 深瀬「[comment]を組み込んで」。
   **自分の文章と見分けがつくこと**が要件。言い換えずにそのまま引き、出どころを併記する。 */
.yms-synopsis {
  /* 8/27: 親テーマのblockquoteから `0 6px 6px 0` を継いでおり、**角丸の種類が1つ増えていた**。
     足す側が既存の刻みへ寄せる（見た目の検査D5が捕まえた） */
  border-radius: var(--radius);
  margin: 20px 0;
  padding: 14px 16px 10px;
  border: 0;
  border-left: 3px solid var(--line);
  background: var(--surface-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.yms-synopsis p {
  margin: 0 0 0.7em;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--text);
}
.yms-synopsis p:last-of-type { margin-bottom: 0.4em; }
.yms-synopsis footer {
  font-size: 0.71875rem;
  color: var(--text-soft);
}
.yms-synopsis footer::before { content: "— "; }

/* 記事のタグ（題名の下）。8/25v4: いままで本文の一番下(y=2954px)にしか無かった。
   読者が作品の性質を知りたいのは読み始めなので、題名の直後に置く */
.yms-tagchips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.yms-tagchip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* 8/25v4: 32pxで作って粗探しのC1（タップ領域44px未満）に落ちた。
     指で押す部品は44px以上（D-018）。見た目を細く保ちたいので、
     枠は44pxのまま**背景だけを内側に描く**（::before）
     8/30 深瀬「場所取りすぎ・小さく・色は売場色で見やすく」→ 視覚をさらに薄くし、
     地色と枠を売場の基調色（--accent）の薄まりで塗る。両サイト共通（D-166） */
  min-height: var(--cta-min-h);
  padding: 0 9px;
  border: 0;
  background: none;
  color: var(--accent-deep);
  font-size: 0.75rem;
  line-height: 1;
  text-decoration: none;
}
.yms-tagchip::before {
  content: ""; position: absolute; inset: 12px 0; z-index: -1;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: var(--surface-alt);
  /* color-mix非対応の古い環境は上の2行の地味色で表示される（薄まり色は上書き） */
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.yms-tagchip:hover::before { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.yms-tagchip__k { font-size: 0.75rem; font-weight: 700; color: var(--text-faint); }
.yms-tagchip:hover { color: var(--accent); }

/* 8/30 深瀬「PR・18禁の前置き2行が大きすぎる」→再指摘「もう少し小さくかつ場所取らないように」。
   **在ること・広告より上に在ること**が要件で、大きさは要件ではない（位置はdisclosure検査が守る）。
   inlineで2行→1行に畳む（幅が足りなければ自然に折り返す）。両サイト共通（D-167） */
.yf-pr, .yf-pr--age,
.yf-pr + p {  /* site00は18禁の行が本文に焼き込み（class無しでyf-prの直後）。その形も同じ小ささへ */
  display: inline; font-size: 11px; line-height: 1.5; color: var(--text-faint); margin: 0 10px 0 0;
}

/* 同じジャンルの作品（記事の下）。8/25v4 深瀬「関連作品を記事の下に繋げるとか」 */
.yms-related { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.yms-related > h2 { margin: 0 0 14px; font-size: 1.1875rem; }

/* トップ看板（8/25v5）。深瀬の指示3つを同時に満たす:
   「大きくしなくていい / 画質が荒れない大きさで / スマホは要らない」。
   **元絵は1280pxしかない。** それを超えて引き伸ばすと必ず眠くなるので、
   表示幅を1240pxで止め、1920/2880の水増しファイルも配らない。
   看板は絵で終わらせず、今いちばん得な入口（セール）へのリンクにしてある。 */
.yms-mastvisual {
  display: block;
  position: relative;
  /* 8/25v5（第三者検査が指摘）: 1画面に左端が3つあった。
     看板100px / 本文116px / 検索146px と、上から下へ階段状にずれていた。
     本文は max-width:1240 + 余白16 なので内側は116px。**そこに全部合わせる。** */
  max-width: 1208px;   /* = 1240 - 16*2 。余白を持たないので幅を先に引く */
  margin: 0 auto;
  overflow: hidden;
  background: #1a1024;
  text-decoration: none;
}
.yms-mastvisual__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 416;
}
/* 絵の上の白文字は、暗い覆いを敷いてから置く（敷かないと背景次第で読めなくなる）。
   覆いは下だけ。人物の顔がある上半分は素のまま見せる。 */
.yms-mastvisual__copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 20px 16px;
  background: linear-gradient(to top, rgba(10,5,16,.94) 0%, rgba(10,5,16,.66) 45%, rgba(10,5,16,0) 100%);
  color: #fff;
  font-weight: 700;
  /* 8/25v5: 1.25rem(20px)は**この1箇所だけの新しい刻み**で、D5（寸法の種類）が落ちた。
     既存の22px（記事の題名と同じ段）に寄せる。深瀬指示により小さい方へは寄せない。 */
  font-size: 22px;
  letter-spacing: .02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
a.yms-mastvisual .yms-mastvisual__copy > span {
  border-bottom: 2px solid rgba(255,255,255,.7);
  padding-bottom: 2px;
}
a.yms-mastvisual:hover .yms-mastvisual__copy > span { border-bottom-color: #fff; }
a.yms-mastvisual:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 深瀬「スマホ版は表示しなくてもいい / PC版だけ」。
   スマホは1枚目に作品を出したいので、看板は出さない（転送量も減る）。 */
@media (max-width: 767px) { .yms-mastvisual { display: none; } }

/* 検索の帯（8/25v4）。絵の帯から出して下に置く。
   深瀬「もっと前面に背景を押し出したい / 検索窓は絵の下」。
   帯が検索窓で分断されないぶん、絵が横一杯に見える。 */
.yms-searchbar {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.yms-searchbar .yms-search {
  max-width: 1240px;   /* 余白16を含めて本文と同じ。内側が116pxで揃う（上の注記を参照） */
  margin: 0 auto;
  padding: 10px 16px;
}

/* サイドバーのジャンル、9件目から下は文字で出す（8/25v5）。
   絵で23枚出すと転送が上限を超えた（実測2,092KB/1,700KB）ので、重さは増やさずに件数だけ増やす。 */
.yms-side-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.yms-side-more .yms-tagchip { flex: 0 0 auto; }
.yms-side-more .yms-tagchip span {
  margin-left: 6px; color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums;
}

/* 見出しの脇に並び順を書く（8/25v5）。「終わる順」だけでは何の順か伝わらなかった。 */
.yms-sale-head span {
  /* 8/25v5: 13pxはここだけの新しい刻み。既存の12px（小見出しと同じ段）へ寄せる */
  margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--text-faint);
}
@media (max-width: 599px) { .yms-sale-head span { display: block; margin: 4px 0 0; } }

/* トップの9枚目以降のジャンルバナーはPCだけ（8/25v5）。
   スマホでは枠ごと出さない（絵も1x1に差し替えてあるので通信も増えない）。 */
@media (max-width: 899px) { .yms-side-genre--pc { display: none; } }

/* 記事の横の2枠（8/26）。表紙96px＋題名の横並び。バナーより軽く、件数を出せる。 */
.yms-sidelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.yms-sidecard { margin: 0; position: relative; }
.yms-sidecard .yms-blocklink {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start;
  color: inherit; text-decoration: none;
}
.yms-sidecard__cover { display: block; border-radius: 6px; overflow: hidden; background: var(--surface-alt); }
.yms-sidecard__cover img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 538; object-fit: cover; }
.yms-sidecard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yms-sidecard__title {
  font-size: 12px; font-weight: 700; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.yms-sidecard__meta { font-size: 11.5px; color: var(--text-faint); display: flex; gap: 6px; flex-wrap: wrap; }
.yms-sidecard__meta b { color: var(--accent-deep); font-weight: 700; }
/* 順位。表紙の左上に小さく置く（一覧の大きなバッジとは別の刻みを作らない） */
.yms-sidecard__rank {
  position: absolute; top: 4px; left: 4px; z-index: 1;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px;
  background: var(--text); color: #FFFFFF;
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 単体記事（8/26新設のsingle.php）。
   `yms-article` は既存の別レイアウト用なので使い回さない（本文が272px分縮む）。 */
.yms-single { display: block; }
/* 題名。既存の刻みに合わせる（30pxはここだけの新しい段になり、31pxと見分けがつかない）。
   親テーマ側の規則は `.article` の中でしか効かず、この作りでは当たらない。 */
.yms-single .entry-title { font-size: 22px; line-height: 1.5; font-weight: 800; margin: 20px 0 6px; }
.yms-single__meta { margin: 0 0 18px; font-size: 12px; color: var(--text-faint); }
/* 「もっと見る」の行。8/26: 高さ21pxで、指で押し分けられなかった（D-018は44px以上） */
.yms-more a, .yms-more button {
  display: inline-flex; align-items: center; min-height: var(--cta-min-h);
}

/* 「安く買えるか」の判定（8/26）。一般論をやめ、この作品の実データを並べる。 */
.yms-dealcheck { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.yms-dealcheck li {
  margin: 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.7;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius);
}
.yms-dealcheck b {
  display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--text); color: #FFFFFF; font-size: 11.5px; font-weight: 700;
}
.yms-dealinfo__note { font-size: 12px; color: var(--text-faint); line-height: 1.8; }

/* 期限のある訴求（8/26）。クーポン・プレミアム・ポイント還元。
   期限を過ぎたものは PHP 側が出さないので、CSSは「あるものを整えるだけ」。 */
.yms-offers { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.yms-offer {
  margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: 13.5px; line-height: 1.8;
}
.yms-offer > b {
  display: inline-block; margin-bottom: 4px; padding: 2px 9px; border-radius: 999px;
  background: var(--accent-deep); color: #FFFFFF; font-size: 11.5px; font-weight: 700;
}
.yms-offer__lead { display: block; }
.yms-offer__more { margin: 6px 0 8px; }
.yms-offer__more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text-soft); }
.yms-offer__terms { margin: 4px 0 8px; padding-left: 1.2em; font-size: 12px; color: var(--text-faint); }
.yms-offer__terms li { margin: 0 0 2px; }
.yms-offer > a { display: inline-flex; align-items: center; min-height: var(--cta-min-h); font-weight: 700; }

/* ── プラグインが作る記事の受け皿 ──────────────────────────────
   8/26: 販売元プラグインの変数が返すHTMLを解剖して分かったこと。
   [package] は <div class="wp-block-image"><figure>…</figure></div> を返すので、
   こちらで figure を足すと二重になる。div で受けて中身に当てる。
   [sample-movie] は width="476" height="306" が直書きされた iframe を返す。
   本文は996px幅なので、そのままだと左に小さい箱が1つ残る。比を保って広げる。 */
.yms-hero > .wp-block-image { margin: 0; }
.yms-hero figure { margin: 0; }
.yms-hero img { width: 100%; height: auto; border-radius: var(--radius); }

/* 8/26v2: 比は作品ごとに違う（販売元が返す枠が 720x480 / 644x414 / 476x306 …）。
   固定で書くと上下に黒帯が出る。**比はインラインで作品ごとに渡す。** */
.yms-movie { max-width: 720px; margin: 0 auto 18px; width: 100%; }
/* 8/27: 角丸の種類が11種（上限9）に増えた。**足す側が既存の刻みへ寄せる** */
.yms-movie iframe { width: 100%; height: 100%; display: block; border-radius: var(--radius); border: 0; }

/* 買う前に確かめること。**定型文をやめて実データを出す**節（8/26） */
.yms-formats { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13.5px; }
.yms-formats th, .yms-formats td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.yms-formats thead th { font-size: 11.5px; color: var(--text-faint); font-weight: 700; letter-spacing: .04em; }
.yms-formats tbody th { font-weight: 700; width: 8.5em; }
.yms-formats td { font-variant-numeric: tabular-nums; }
.yms-formats td:last-child { color: var(--text-faint); font-size: 12px; }
.yms-facts { margin: 0 0 12px; padding-left: 1.2em; font-size: 13.5px; line-height: 1.9; }
.yms-note { font-size: 12px; color: var(--text-faint); line-height: 1.8; margin: 0 0 18px; }

/* プラグインが出す [aff-button] を、サイトのボタンと同じ見た目に揃える（8/26）。
   販売元の出力は <div class="wp-block-buttons"><div class="wp-block-button">
   <a class="wp-block-button__link" style="...">文言</a></div></div>。
   色の設定は空なので、こちらで塗る。**販売先リンクの見た目の組を1つに保つ**（契約が数える） */
.yms-cta-wrap { margin: 22px 0 8px; }
.yms-cta-wrap .wp-block-buttons,
.yms-cta-wrap .wp-block-button { display: block; margin: 0; }
.yms-cta-wrap .wp-block-button__link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--cta-min-h); padding: 12px 20px;
  background: var(--accent) !important; color: var(--accent-ink) !important;
  border: 1px solid var(--accent-deep); border-radius: 999px !important;
  font-size: 15px; font-weight: 800; text-decoration: none; text-align: center;
  box-shadow: var(--shadow-cta);
}
.yms-cta-wrap .wp-block-button__link:active { transform: translateY(1px); }

/* 出演者の並び。**ジャンルのタグと見分けが付くようにする**（8/27）。
   同じ見た目だと、人名とジャンルが1つの列に混ざって見える */
.yms-tagchips--actress { margin-bottom: 6px; }
.yms-tagchips--actress .yms-tagchip {
  /* 8/27: --accent-soft は定義が無い。定義済みのものだけを使う（css-syntax が捕まえた） */
  background: var(--surface-alt);
  border-color: var(--accent-deep);
  font-weight: 700;
}
.yms-tagchips--actress .yms-tagchip::before {
  content: "出演"; margin-right: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .04em;
}

/* 一覧ページの並べ方の断り。**当サイトの評価と販売元の事実を混ぜない**（8/27） */
blockquote.yms-synopsis { border-radius: var(--radius); }   /* 親テーマの角丸に勝たせる（8/27） */
.yms-archive-head { flex-wrap: wrap; }   /* 断りを次の行へ落とす。題名を折らない（8/27） */
.yms-archive-head__note {
  flex-basis: 100%; width: 100%; margin: 4px 0 0;
  font-size: 12px; line-height: 1.7; color: var(--text-faint);
}

/* 出演者の一覧。名前と作品数が並ぶだけの軽い行にする（8/27） */
.yms-actress-list { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line-soft); }
@media (min-width: 700px) { .yms-actress-list { grid-template-columns: 1fr 1fr; } }
.yms-actress-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 10px 14px; background: var(--surface); text-decoration: none;
}
.yms-actress-item__name { font-size: 14px; font-weight: 700; color: var(--text); }
.yms-actress-item__meta { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* 出演者への入口。絵は無いので**同じ大きさ・同じ角丸の札**にして、
   ジャンルのバナーと並びの調子を揃える（8/27。1つだけ形が違うと目に付く） */
.yms-side-genre--text {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  aspect-ratio: 300 / 110; padding: 0 16px;
  background: linear-gradient(135deg, #2A1730 0%, #4A2340 55%, #6B2E4A 100%);
  text-decoration: none;
}
.yms-side-genre__label { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.yms-side-genre__sub { font-size: 11.5px; color: rgba(255,255,255,.72); }

/* 「残り◯作品を見る」が左端に寄って浮いていた（8/27）。
   上の並びが中央そろえなので、ここも中央にする */
.yms-more:has(#yms-sale-more) { display: flex; justify-content: center; margin: 18px 0 6px; }

/* Cocoonの管理者パネルは**当サイトの独自テンプレートの外側**に出るため、
   幅の枠を持たず左端いっぱいに広がっていた（管理者にだけ見える。8/27）。
   消さずに、本文と同じ幅へ収める */
.admin-panel {
  max-width: 1208px; margin: 16px auto; padding: 8px 16px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface-alt); font-size: 12px; color: var(--text-faint);
}

/* 割引カードの価格と期限は**別の行**にする（8/27）。1行に詰めると桁数で
   折り返しが変わり、カードごとに高さが揃わなかった */
.yms-sale-tile__until { display: block; font-size: 11.5px; color: var(--text-faint); }
.yms-sale-tile__price { display: block; }

/* セールのカードは価格の桁数で折り返しが変わり、**カードごとに高さが揃わなかった**（8/27）。
   期限は必ず次の行へ落として、どのカードも同じ形にする */
.yms-sale-grid .yms-card__meta { flex-wrap: wrap; }
.yms-sale-grid .yms-card__meta > span:last-child { flex-basis: 100%; }

/* 販売元にある作品（当サイトに記事が無いもの）。**当サイトのカードと見分けが付く形にする**（8/27）。
   表紙は販売元のものを直接読む。ここで手元へ取り込むと66人×12枚＝約800枚が増える */
.yms-extlist { margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.yms-extlist h2 { font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.yms-extlist__note { font-size: 11.5px; line-height: 1.7; color: var(--text-faint); margin: 0 0 12px; }
.yms-extlist__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 767px) { .yms-extlist__grid { grid-template-columns: repeat(2, 1fr); } }
.yms-extcard {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px; background: var(--surface);
}
.yms-extcard__cover { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.yms-extcard__cover img { display: block; width: 100%; height: auto; }
.yms-extcard__tag {
  position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(20,10,24,.82); color: #fff; font-size: 10.5px; font-weight: 700;
}
.yms-extcard__title { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.yms-extcard__price { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* 出演者ランキングの順位。上位3つだけ色を変える（8/27。全部色を付けると順位が読めない） */
.yms-actress-item__rank {
  flex: 0 0 auto; min-width: 26px; text-align: right;
  /* 8/27: 13px は私が今日足した新しい刻みだった。既存の13.5pxへ寄せる（D5） */
  font-size: 13.5px; font-weight: 800; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.yms-actress-item__rank--top { color: var(--accent-deep); }
.yms-actress-item__name { flex: 1 1 auto; }

/* 決済手段。**ロゴ画像は使わない**（JCB・Visa・PayPayの3社とも第三者の使用を認めていない。8/27一次情報） */
.yms-dealinfo__pay {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line-soft);
  font-size: 11.5px; line-height: 1.8; color: var(--text-soft);
}
.yms-dealinfo__pay strong { color: var(--text); font-weight: 700; }

/* 割引の見せ方（8/27）。参考サイトに寄せつつ、**割引率は基礎価格と同じ行**に置く。
   消費者庁の考え方: 算出の基礎を併記しないと、あいまいな表示になる。
   元値は「FANZAが取得時点に表示していた金額」であって当サイトの認定価格ではない */
.yms-price-now { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.yms-price-was { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.yms-price-off {
  /* 8/27: 11px は新しい刻みだった。**見分けの付かない差は表を汚すだけ**（D5） */
  font-style: normal; font-size: 11.5px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
}

/* カードの札。**選ぶ助けになるものだけ**（画質・尺）。8/27 */
.yms-card__cover-wrap { position: relative; display: block; }
/* 8/27の実害: `.yms-flags` の左上への貼りつけ（left:10px top:10px）を引き継いだため、
   入れ物が**表紙いっぱい 193x125 に伸び**、札が左端の中ほどに浮いて見えた。
   **左上の指定を打ち消してから右下へ置く。** 一度直したがCSSを戻したときに巻き添えで消えた */
.yms-flags--spec {
  position: absolute; left: auto; top: auto; right: 6px; bottom: 6px;
  width: auto; height: auto; display: flex; gap: 4px; pointer-events: none;
}
.yms-flag--spec {
  padding: 2px 7px; border-radius: 999px;
  background: rgba(20,10,24,.82); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}

/* 8/27: 読み上げ用の見出し（画面外）が 22.5px で、看板の 22px と**0.5px だけ違う刻み**を
   作っていた。誰にも見分けられない差は表を汚すだけ（D5） */
.screen-reader-text { font-size: 22px; }

/* 「この作品に限らない話」。作品ごとの判定と**混ぜて読めないように**一段下げる（8/27） */
/* 8/27: --text-faint は 2.96:1 で読めなかった（D9が捕まえた）。**読ませたい文字は濃く。**
   「この作品に限らない話」の見出しだけを薄くし、中身は本文と同じ濃さにする */
.yms-dealcheck__sub { list-style: none; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line-soft); font-size: 11.5px; color: var(--text-soft); }
.yms-dealcheck__sub > ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var(--text-soft); }
/* 8/27: ここは既に**濃い札に白文字**の見た目が当たっている。
   色を上書きすると濃い上に濃いで消える（実測 1.00:1・D9が捕まえた）。**上書きしない。** */

/* 販売元のクレジット表記。**APIの素材を使う条件の1つ**なので消さない（8/27） */
.yms-credit { margin: 12px 0 0; text-align: right; }
.yms-credit img { display: inline-block; opacity: .85; }

/* プラグイン（監修テンプレ）が出すブロックボタン。素のままだと行高15pxに潰れ、
 * タップできず文字も白のまま浮く（8/29検査C1/B13）。CTAと同じ部品の見た目へ。 */
.entry-content .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cta-min-h); padding: 0 20px; border-radius: 999px;
  background: var(--accent); color: #FFFFFF; text-decoration: none; font-weight: 700;
}
.entry-content .wp-block-button__link:hover { background: var(--accent-deep); }

/* 8/29検査C1: figure内の画像リンクが inline のままだと、aの矩形が行高15pxしか持たず
 * 「押せない領域」と判定される（実際のタップも画像の一部で外れる）。絵と同じ矩形にする */
.entry-content figure > a { display: block; }

/* 8/30 深瀬「本家もまだ縦並び。出演者の他の作品みたいに大きく横並びに（セール中も同じく）」。
   全幅置き（worksの記事下・site00の1カラム時）だけ横スクロールの大きめカード列へ。
   ≥1100pxの右列は300pxの柱に横スクロールを入れると操作しづらいため縦のまま。
   （8/30訂正: site00の表紙も240〜768wの段階サイズを持つ実測。skin側旧注記「原画90px」は誤りだった） */
.yms-shell:not(.yms-shell--with-side) .yms-sidelist {
  flex-direction: row; overflow-x: auto; gap: 12px; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.yms-shell:not(.yms-shell--with-side) .yms-sidelist .yms-sidecard { flex: 0 0 176px; scroll-snap-align: start; }
.yms-shell:not(.yms-shell--with-side) .yms-sidelist .yms-sidecard .yms-blocklink { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1099px) {
  .yms-shell--with-side .yms-sidelist {
    flex-direction: row; overflow-x: auto; gap: 12px; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .yms-shell--with-side .yms-sidelist .yms-sidecard { flex: 0 0 176px; scroll-snap-align: start; }
  .yms-shell--with-side .yms-sidelist .yms-sidecard .yms-blocklink { display: flex; flex-direction: column; gap: 6px; }
}

/* 8/30 深瀬「（DLsiteの）ページ確認ボタンいいね　これ本家も同じにしたい」→共通化してskinから移した。
   本家の該当ボタンは .yms-offer > a（安く買えるか節の確認リンク）なので同じ意匠を当てる。
   塗りは各サイトの--accent単色（検査B13の規格）。影の色も--accentから作る */
.entry-content .wp-block-button__link, .yms-cta-wrap .wp-block-button__link, .yms-offer > a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--cta-min-h); padding: 14px 22px;
  background: var(--accent) !important; color: #fff !important;
  border: 0; border-bottom: 3px solid var(--accent-deep);
  border-radius: 12px !important;
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
  text-decoration: none; text-align: center;
  box-shadow: var(--shadow-cta);
  transition: transform .12s ease, box-shadow .12s ease;
}
.entry-content .wp-block-button__link::after, .yms-offer > a::after { content: "→"; font-weight: 800; transition: transform .12s ease; }
.entry-content .wp-block-button__link:hover, .yms-offer > a:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
.entry-content .wp-block-button__link:hover::after, .yms-offer > a:hover::after { transform: translateX(3px); }
.entry-content .wp-block-button__link:active, .yms-offer > a:active { transform: translateY(1px); }