/*
 Theme Name: Astra Child Theme
 Theme URI: https://yourwebsite.com/
 Description: My custom Astra child theme.
 Author: Your Name
 Author URI: https://yourwebsite.com/
 Template: astra
 Version: 1.0.0
 Text Domain: astra-child
*/

/*
 * ここから下に、親テーマのスタイルを上書きしたり、
 * 新しく追加したいカスタムCSSを記述してください。
 */

/* -------------------------------------------
 * 全体の基本設定
 * ------------------------------------------- */

/* 親テーマのスタイルを強力にリセット */
.ast-separate-container .ast-article-inner,
.ast-separate-container .ast-article-inner .ast-row,
.ast-separate-container .ast-article-post {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* -------------------------------------------
 * 投稿カード全体（.custom-post-wrapper）のスタイル
 * ------------------------------------------- */

/* 投稿カード全体に新しいスタイルを適用 */
#primary #main .ast-row article.custom-post-wrapper {
    display: flex !important;
    gap: 20px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    align-items: center !important;

    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: none !important; /* 影を完全に削除 */

    width: 100% !important;
    min-height: 150px !important;
}

/* ホバー時のスタイルを完全に無効化 */
#primary #main .ast-row article.custom-post-wrapper:hover {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.custom-post-thumbnail img:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* -------------------------------------------
 * 投稿カードの内部要素のスタイル
 * ------------------------------------------- */

/* 左側の画像コンテナ */
.custom-post-thumbnail {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
}
.custom-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.custom-post-thumbnail img:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* 右側のコンテンツコンテナ */
.custom-post-content {
    flex-grow: 1;
}

/* 記事タイトル (Astraのデフォルトタイトルを流用) */
.custom-post-content .entry-header h2.entry-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 5px 0;
    display: block !important;
}
.custom-post-content .entry-header h2.entry-title a {
    color: #060097;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 🔧 タイトルホバー色を強制的に変更 */
.custom-post-content .entry-header h2.entry-title a:hover {
    color: #ff3366 !important;
    text-decoration: none !important;
}

/* 日付とタグのコンテナ */
.entry-meta-container {
 font-size: 0.9em;
 margin-top: 10px;
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

/* 日付の文字色を強制的に変更 */
.custom-post-content .entry-meta-container .posted-on {
    color: #666 !important; /* 濃い灰色に強制変更 */
}

/* タグのコンテナ */
.custom-post-content .post-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.custom-post-content .post-tags-container a:hover {
    background-color: #ddd;
}

/* デフォルトのメタ情報を非表示に */
.ast-article-post .entry-meta {
    display: none !important;
}


/* -------------------------------------------
 * タイトル上の日付とカテゴリーのスタイル
 * ------------------------------------------- */
.entry-meta-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7em;
    color: #666;
    margin-bottom: 5px;
}

.posted-on-top {
    font-weight: normal;
}

/* カテゴリーのボタン装飾を削除 */
.category-list a {
    display: inline-block;
    padding: 0; /* paddingを0に */
    background-color: transparent; /* 背景色を透明に */
    color: #666; /* 文字色を日付と同じ色に */
    border-radius: 0; /* 角丸をなくす */
    font-size: 10px;
    text-decoration: none;
    transition: none; /* transitionも不要に */
}

.category-list a:hover {
    background-color: transparent;
    text-decoration: underline; /* ホバーで下線を表示 */
}

/* -------------------------------------------
 * DLsite風のメタ情報装飾（記事内表示用）
 * ------------------------------------------- */

.dlsite-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85em;
    margin-top: 10px;
    align-items: center;
    line-height: 1.6;
}

.dlsite-label {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 13px;
}

.dlsite-label a {
    color: #3366cc;
    text-decoration: none;
    transition: color 0.2s ease;
}

.dlsite-label a:hover {
    color: #ff3366;
    text-decoration: underline;
}

/* 年齢ラベル全体の基本スタイル */
.age-label {
    display: inline-block !important;
    padding: 1px 6px !important;
    font-size: 0.85em !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.03em !important;
    font-family: inherit !important;
}


/* 全年齢（背景薄い緑 + 緑文字） */
.age-label.all-age {
    background-color: #d7f0d7 !important;
    border: 1px solid #a8d5a2 !important;
    color: #4a9250 !important;
}

/* R18（背景薄いピンク + 赤文字） */
.age-label.r18 {
    background-color: #f8d7da !important;
    border: 1px solid #f5c2c7 !important;
    color: #c44141 !important;
}

/* 高優先度で定義 */
.entry-meta-container .age-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    vertical-align: middle;
    line-height: 1;
}

.entry-meta-container .age-badge.r18 {
    background-color: #f8d2d2 !important;
    color: #c44141 !important;
}

.entry-meta-container .age-badge.all-age {
    background-color: #d6efd6 !important;
    color: #4a9250 !important;
}

.entry-meta-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.post-tags-container a {
    background-color: #f0f0f0;
    padding: 2px 6px;              /* ← 内側の余白を減らす */
    margin-right: 4px;             /* ← タグ同士の間隔を縮める */
    margin-bottom: 3px;
    border-radius: 12px;           /* ← 角丸はやや小さく */
    display: inline-block;
    font-size: 12px;               /* ← 少し小さめの文字に */
    color: #060097;
    text-decoration: none;
    line-height: 1.4;              /* ← 縦の詰まり感を防止 */
}

/* サークル（maker） */
.post-tags-container a[href*="/maker/"] {
    background-color: #e3f2fd !important; /* 水色 */
    color: #2c3e50 !important;             /* やわらかい青 */
	font-weight: 500;
}
.post-tags-container a[href*="/maker/"]:hover {
    background-color: #bbdefb !important;
    color: #224466 !important;
}

/* 声優（voice_actor） */
.post-tags-container a[href*="/voice_actor/"] {
    background-color: #fff3e0 !important; /* オレンジ */
    color: #c25a00 !important;             /* 控えめなオレンジ */
	font-weight: 500;
}
.post-tags-container a[href*="/voice_actor/"]:hover {
    background-color: #ffe0b2 !important;
    color: #aa5500 !important;
}

/* モバイルだけ横スクロールにする */
@media (max-width: 768px) {
  /* 投稿カード本体 */
  article.custom-post-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* 左画像 */
  .custom-post-thumbnail {
    width: 100% !important;
    height: auto !important;
    margin-right: 0 !important;
  }

  .custom-post-thumbnail img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* テキスト部分 */
  .custom-post-content {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

/* ✅ PCでは折り返し */
@media (min-width: 769px) {
  .post-tags-container .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    padding: 0.5em 0;
  }
}

/* タグの基本デザイン */
.post-tags-container .tag-container a {
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 0.2em 0.6em;
  border-radius: 9999px;
  background-color: #f2f2f2;
  font-size: 0.9em;
  color: #333;
  text-decoration: none;
}

.post-tags-container .tag-container a:hover {
  background-color: #ddd;
}

#primary #main .ast-row article.custom-post-wrapper {
  margin-bottom: 8px !important;
}

@media (max-width: 768px) {
  .dlsite-title {
    margin-bottom: 0.5em !important;
  }

  .dlsite-title a {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ホーム画面の投稿タイトルにマウスホバーしたとき色変化 */
.ast-article-post .entry-title a:hover {
  color: #e200b6; /* 適宜色変更、記事内と同じに */
  text-decoration: none; /* アンダーバーを消す場合 */
  transition: color 0.3s ease;
}

/* ✅ 投稿タイトルの色（通常） */
.custom-post-content .entry-header h2.entry-title a,
.ast-article-post .entry-title a {
    color: #060097;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 🔥 より強いセレクタで上書き */
body .custom-post-content .entry-header h2.entry-title a:hover,
body .ast-article-post .entry-title a:hover {
    color: #c10fff !important;
    text-decoration: none !important;
}

/* ✅ visited 色も統一 */
.custom-post-content .entry-header h2.entry-title a:visited,
.ast-article-post .entry-title a:visited {
    color: #060097 !important;
}

/* 🔷 タイトル */
.dlsite-title {
  margin-top: 1em;
	margin-bottom: 0.8em; /* 👈 ここでサークルとの間隔を調整 */
  font-size: 1.6em;
  font-weight: bold;
}

/* 🔷 作品情報ブロック全体 */
.dlsite-work-meta {
  margin-top: 1em;
  font-size: 0.95em;
  line-height: 1.4;
}

/* 🔷 短い紹介文（ACF） */
.dlsite-intro-text {
  margin-top: 1em;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

/* 🔷 タグから生成した紹介文（自動） */
.tag-generated-description {
  margin-top: 1em;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

/* 🔷 chobitプレイヤー */
.dlsite-chobit-player {
  margin-top: 1em;
}

/* 🔷 年齢ラベル */
.age-label.r18 {
  color: white;
  background-color: crimson;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  font-size: 0.9em;
}

.age-label.all-age {
  color: #006400;
  background-color: #d6f5d6;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* メタ情報テーブル */
.dlsite-work-meta-table {
  display: table;
  width: 100%;
  margin-top: 2em;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

.dlsite-work-meta-table .meta-row {
  display: table-row;
}

.dlsite-work-meta-table .meta-label,
.dlsite-work-meta-table .meta-value {
  display: table-cell;
  vertical-align: top;
  padding: 0.6em 0;
  line-height: 1.6;
  font-size: 1em;
}

.dlsite-work-meta-table .meta-label {
  width: 6em;
  text-align: right;
  padding-right: 0.5em;
  white-space: nowrap;
}

.dlsite-work-meta-table .meta-value {
  text-align: left;
}

/* 関連記事カード＆サムネ（共通） */
/* --- 関連記事：4列グリッド（PC） --- */
.yn-related { margin: 2rem 0; }
.yn-related-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ← 4列 */
  gap: 14px;
}

/* 影や浮き上がりは無し（見た目はそのまま） */
.yn-related-item{
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(2,6,23,.06), 0 1px 0 rgba(2,6,23,.03);
}
.yn-related-item:hover{
  transform:none;
  box-shadow:0 6px 16px rgba(2,6,23,.06), 0 1px 0 rgba(2,6,23,.03);
}

/* 画像はカード幅いっぱい。上下は切らない＝contain */
.yn-related-thumb{
  width: 100%;
  aspect-ratio: 4 / 3;     /* ← 少し縦長に。16/9より“切れ”が減ります（好みで調整OK） */
  object-fit: contain;      /* ← cover から変更：上下を切らない */
  display: block;
  background: #f6f7fb;      /* レターボックス部の淡色（好みで #fff に） */
  border-radius: 16px 16px 0 0;
}

/* タイトルはコンパクト＆3行まで */
.yn-related-name{
  margin: 10px 14px 14px;
  font-size: .85rem;
  line-height: 1.35;
  font-weight: 500;
  color: inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /* ← 2 から 3 に */
  overflow: hidden;
}

/* レスポンシブ：画面幅に応じて列数を落とす */
@media (max-width: 1200px){
  .yn-related-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
  .yn-related-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .yn-related-grid{ grid-template-columns: 1fr; }
}

/* 画像が無い時の見た目（薄いグラデの板） */
.yn-related-thumb.yn-ph { background:linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.12)); }


/* 関連記事 見出しを控えめに */
.yn-related-title{
  font-size: 1rem;         /* 16px相当：本文見出し級 */
  font-weight: 600;        /* ちょい太め→控えめ */
  line-height: 1.4;
  margin: 0 0 .75rem;      /* 余白を詰める */
  color: inherit;          /* テーマの本文色に合わせる */
  letter-spacing: .02em;   /* 読みやすく軽く */
}

/* さらに馴染ませたい場合は細字＆色薄めに（上とどちらか片方） */
.yn-related-title{
  font-size: .95rem;
  font-weight: 500;
  color: rgba(0,0,0,.72);  /* ダークテーマなら適宜調整 */
}

/* カード内を上下2段（画像 / タイトル）でレイアウトして高さ揃え */
.yn-related-link{
  display:grid;
  grid-template-rows:auto 1fr;
  height:100%;
}

/* Astraのデフォルト前後ナビを隠す（うちの yn-nav は残す） */
.navigation.post-navigation,
.ast-post-navigation,
.ast-single-post-navigation {
  display: none !important;
}

/* ===== 調整ノブ（デフォルト値） ===== */
.yn-nav-item{
  --nav-thumb: 172px;           /* 画像の高さ（既存基準） */
  --nav-thumb-ratio: 4 / 3;     /* 画像の比率（既存基準） */
  --paddle: 52px;               /* パドルの一辺（既存基準） */
  --paddle-radius: 12px;        /* パドル角丸 */
  --gap: 12px;                  /* すき間 */
}

/* =========================================================
   Prev/Next（前/次）カード - 完全上書き版
   ・左右のボタン（パドル）を上下いっぱい（height:100%）
   ・三角アイコンを大きく中央に
   ・ホバーは色だけ少し濃く、位置や影は動かさない
   ・タイトル/画像は高さの中央に揃える
   ========================================================= */

/* ===== Prev/Next：フルハイトのパドル + 水平の余白 + タイトルは元のサイズ/色 ===== */

/* ノブ（必要なら数値だけ微調整） */
.yn-nav{
  --thumb-h: 136px;                 /* サムネ高さ */
  --thumb-ratio: 4/3;
  --paddle-fill-w: 96px;            /* パドルの横幅（80〜112で好み） */
  --tri-big: clamp(28px, calc(var(--thumb-h)*.42), 52px); /* 三角サイズ */
  --pad-v: 6px;                      /* 上下の余白（縦） */
  --pad-x: 12px;                     /* パドル横の余白（横） */
}

/* 基本レイアウト：パドル | サムネ | タイトル（等間隔） */
.yn-nav .yn-nav-item > .yn-link{
  display: grid;
  grid-template-columns: var(--paddle-fill-w) auto minmax(0,1fr);
  grid-template-areas: "paddle thumb title";
  align-items: center;                  /* 縦中央 */
  column-gap: var(--pad-x);            /* パドルと中身の“横の余白” */
  padding: var(--pad-v) var(--pad-x);  /* 上下の余白 + 外側の左右余白 */
  min-height: calc(var(--thumb-h) + var(--pad-v)*2);
  border: 1px solid rgba(2,6,23,.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,6,23,.06);
  overflow: hidden;                     /* 枠からはみ出さない */
}

/* 右（次）は左右反転 */
.yn-nav .yn-nav-item > .yn-link.is-next{
  grid-template-columns: minmax(0,1fr) auto var(--paddle-fill-w);
  grid-template-areas: "title thumb paddle";
}

/* サムネは“高さ基準”で中央そろえ */
.yn-nav .yn-thumb{
  grid-area: thumb;
  height: var(--thumb-h);
  aspect-ratio: var(--thumb-ratio);
  object-fit: cover;
  border-radius: 8px;
  align-self: center;
  display: block;
}

/* タイトルはテーマ準拠（サイズ/色ともに inherit）＋縦中央 */
.yn-nav .yn-title{
  grid-area: title;
  margin: 0;
  align-self: center;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* ===== パドル（ボタン）と三角（大） ===== */

/* パドル本体（::before）：縦いっぱい＋色だけホバーで少し濃く */
.yn-nav .yn-nav-item > .yn-link::before{
  content: "";
  grid-area: paddle;
  width: 100%;
  height: 100%;
  border-radius: 10px 0 0 10px;
  background: #eef2ff;                 /* 左（前）通常色 */
  box-shadow: 0 1px 3px rgba(2,6,23,.08);
  transition: background .2s ease;
}
.yn-nav .yn-nav-item > .yn-link.is-next::before{
  border-radius: 0 10px 10px 0;
  background: #ffe8ef;                 /* 右（次）通常色 */
}
.yn-nav .yn-nav-item > .yn-link:hover::before{
  background: #e2e7ff;                 /* 左ホバー色（色だけ） */
}
.yn-nav .yn-nav-item > .yn-link.is-next:hover::before{
  background: #ffd6e4;                 /* 右ホバー色（色だけ） */
}

/* 三角（::after）：大きく、中央、白。ホバーで位置・サイズは不変 */
.yn-nav .yn-nav-item > .yn-link::after{
  content: "";
  grid-area: paddle;
  width: var(--tri-big);
  height: var(--tri-big);
  align-self: center;
  justify-self: center;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
      <polygon points='25,15 85,50 25,85'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
      <polygon points='25,15 85,50 25,85'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(2,6,23,.35));
  transform: none !important;          /* 動かさない */
}
.yn-nav .yn-nav-item > .yn-link.is-prev::after{
  transform: scaleX(-1) !important;    /* 左だけ反転（◀） */
}

/* 低モーションの人にも安心（色以外のアニメなし） */
@media (prefers-reduced-motion: reduce){
  .yn-nav .yn-nav-item > .yn-link::before{ transition: none; }
}

/* スマホは少しだけ控えめ（任意） */
@media (max-width: 640px){
  .yn-nav{
    --pad-v: 5px;
    --pad-x: 10px;
    --paddle-fill-w: 88px;
    --tri-big: clamp(24px, calc(var(--thumb-h)*.42), 48px);
  }
}

/* === Prev / Next の色を逆にする（次=青、前=赤） === */

/* 前（左）＝赤系 */
.yn-nav .yn-nav-item > .yn-link::before{
  background: #ffe8ef !important;   /* 通常 */
}
.yn-nav .yn-nav-item > .yn-link:hover::before{
  background: #ffd6e4 !important;   /* ホバー */
}

/* 次（右）＝青系 */
.yn-nav .yn-nav-item > .yn-link.is-next::before{
  background: #eef2ff !important;   /* 通常 */
}
.yn-nav .yn-nav-item > .yn-link.is-next:hover::before{
  background: #e2e7ff !important;   /* ホバー */
}

/* =========================================================
   モバイル（～480px）：前/次カードを関連記事風に縦並びへ
   - サムネ 100% 幅 → タイトルを下に
   - パドル（矢印）はサムネ左上/右上に重ねる
   ========================================================= */
@media (max-width: 480px){

  /* ちょい調整用ノブ */
  .yn-nav{
    --thumb-h: 200px;                 /* サムネの目安高さ（お好みで） */
    --gap: 10px;
    --mob-paddle: 44px;               /* モバイルのパドル一辺 */
    --mob-tri: 28px;                  /* モバイルの三角一辺 */
    /* 色は「前=赤 / 次=青」に統一（前回のご希望） */
    --mob-prev: #ffd9e3;              /* 前（左）通常色 */
    --mob-prev-hover: #ffd1de;        /* 前（左）ホバー色 */
    --mob-next: #e2e7ff;              /* 次（右）通常色 */
    --mob-next-hover: #dbe3ff;        /* 次（右）ホバー色 */
  }

  /* a 全体：縦2段（thumb / title）にして中央揃え */
  .yn-nav .yn-nav-item > .yn-link{
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "thumb" "title" !important;
    row-gap: var(--gap) !important;
    align-items: start !important;
    padding: 10px !important;
    min-height: auto !important;
    column-gap: 0 !important;         /* 既存の横ギャップ無効化 */
  }

  /* サムネ：100%幅 / 高さは比率で管理 */
  .yn-nav .yn-thumb{
    grid-area: thumb !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;              /* 過度に縦長にならないように */
    object-fit: cover;
    border-radius: 10px;
    align-self: start !important;
  }

  /* タイトル：下に。サイズ/色は既存準拠（読みやすく） */
  .yn-nav .yn-title{
    grid-area: title !important;
    margin: 0 !important;
    align-self: start !important;
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.5 !important;
    color: inherit !important;        /* PCと同じ薄めの色に */
  }

  /* パドル（::before / ::after）は絶対配置でサムネ上に重ねる */
  .yn-nav .yn-nav-item > .yn-link::before,
  .yn-nav .yn-nav-item > .yn-link::after{
    position: absolute !important;
    grid-area: auto !important;       /* PCの grid-area を打ち消す */
    width: var(--mob-paddle) !important;
    height: var(--mob-paddle) !important;
    top: 10px !important;
    transform: none !important;       /* 位置を固定 */
    box-shadow: 0 1px 3px rgba(2,6,23,.12) !important;
    border-radius: 12px !important;
  }

  /* 三角は中央に（白・影あり） */
  .yn-nav .yn-nav-item > .yn-link::after{
    width: var(--mob-tri) !important;
    height: var(--mob-tri) !important;
    background: #fff !important;
    -webkit-mask: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
        <polygon points='25,15 85,50 25,85'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
        <polygon points='25,15 85,50 25,85'/></svg>") no-repeat center / contain;
    filter: drop-shadow(0 1px 2px rgba(2,6,23,.35)) !important;
  }

  /* 前（左上）＝赤系 */
  .yn-nav .yn-nav-item > .yn-link.is-prev::before{
    left: 10px !important;
    background: var(--mob-prev) !important;
  }
  .yn-nav .yn-nav-item > .yn-link.is-prev:hover::before{
    background: var(--mob-prev-hover) !important;
  }
  .yn-nav .yn-nav-item > .yn-link.is-prev::after{
    left: 10px !important;
    transform: scaleX(-1) !important; /* 左向きに反転 */
  }

  /* 次（右上）＝青系 */
  .yn-nav .yn-nav-item > .yn-link.is-next::before{
    right: 10px !important;
    background: var(--mob-next) !important;
  }
  .yn-nav .yn-nav-item > .yn-link.is-next:hover::before{
    background: var(--mob-next-hover) !important;
  }
  .yn-nav .yn-nav-item > .yn-link.is-next::after{
    right: 10px !important;
  }

  /* PC向けルールの“縦いっぱいパドル”を打ち消し */
  .yn-nav .yn-nav-item > .yn-link{
    align-items: start !important;
  }
  .yn-nav .yn-nav-item > .yn-link::before{
    height: var(--mob-paddle) !important;
  }
}

/* プレイヤーと本文の間を少しだけ詰める */
.dlsite-chobit-player{ margin:8px 0 12px; }
.dlsite-work-meta{ margin-top:.5rem; }

/* 前後ナビの横の窮屈さをほんの少し緩和＋フォーカス見やすく */
.yn-nav { margin-top:10px; margin-bottom:12px; }
.yn-nav .yn-link { column-gap:12px; }
.yn-nav .yn-link:focus-visible{
  outline:2px solid #60a5fa; outline-offset:2px;
}

/* パドル（ボタン）がボックスに“ベタ付き”に見えないよう、ほんのり余白 */
.yn-nav .yn-nav-item:first-child .yn-link::before{ margin-left:4px; }
.yn-nav .yn-nav-item:last-child  .yn-link::before{ margin-right:4px; }

/* モバイルでパドルが大きすぎる端末をケア（横幅をクランプ） */
@media (max-width:480px){
  .yn-nav{ --paddle-fill-w: min(88px,22vw); --thumb-h:120px; }
}

/* 記事下の関連記事を“同じ高さ”に見せる（タイトルの段数を固定） */
.yn-related-item{ display:flex; flex-direction:column; }
.yn-related-name{ -webkit-line-clamp:2; min-height:2.6em; }


/* 値の部分をフレックスで並べる＆間隔は gap で管理 */
.dlsite-work-meta-table .meta-row .meta-value{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

/* =========================================================
   Work meta（サークル/販売日/年齢/声優/ジャンル）— 行ごとのシンプル版
   ・左端からラベルが始まる（行頭揃え）
   ・行ごとの薄い区切り線
   ・値側リンクは「タイトル色」に合わせて表示（Astra変数→無ければフォールバック）
   ========================================================= */

/* ---- 色の基本。Astra の変数が無い環境でも落ちないようフォールバックを用意 ---- */
:root{
  --yn-meta-line: rgba(2,6,23,.10);      /* 罫線の薄い色 */
  --yn-meta-muted: #64748b;              /* ラベル文字色（slate-500 相当） */

  /* タイトル色に合わせたい：Astra があれば優先、無ければ既定色へ */
  --yn-title-color: var(--ast-global-color-0, #355cff);
  --yn-title-hover: var(--ast-global-color-1, #7c5cff);
}

/* 全体の文字サイズと行高（必要ならお好みで） */
.dlsite-work-meta{
  margin-top: 1rem;
  font-size: 16px;
  line-height: 1.9;
  /* 行頭をピタッと合わせるため、左右余白をゼロに */
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 最初と最後に薄い線を入れるラッパー */
.dlsite-work-meta-table.yn-meta{
  border-top: 1px solid var(--yn-meta-line);
  border-bottom: 1px solid var(--yn-meta-line);
}

/* ===== 1行のレイアウト（ラベル / 値） =====
   ・左カラムは内容幅（max-content）＝ラベルが行頭から始まる
   ・右カラムは可変（minmax(0,1fr)）
   ・下罫線で区切る
*/
.dlsite-work-meta-table.yn-meta .meta-row{
  display: grid;
  grid-template-columns: max-content minmax(0,1fr); /* ← ここが“行頭からラベル”の肝 */
  align-items: center;
  padding: 10px 0;
  padding-left: 0 !important;                       /* 念のため左余白をゼロ */
  border-bottom: 1px solid var(--yn-meta-line);
}
.dlsite-work-meta-table.yn-meta .meta-row:last-child{
  border-bottom: none;
}

/* ラベルは右寄せにしてコロンを CSS で付ける（PHP 側はコロン無し想定） */
.dlsite-work-meta-table.yn-meta .meta-label{
  justify-self: end;
  position: relative;
  padding-right: 1.2em;         /* コロン分のスペース */
  color: var(--yn-meta-muted);
  font-weight: 600;
  letter-spacing: .02em;
}
.dlsite-work-meta-table.yn-meta .meta-label::after{
  content: "：";
  position: absolute;
  right: .2em;
  color: var(--yn-meta-muted);
}

/* ===== 値（右側）リンクの見た目 =====
   ・下線なし
   ・色は「タイトル色（--yn-title-color）」に統一
   ・hover はタイトルの hover 色へ（変数が無い環境はフォールバック）
*/
.dlsite-work-meta-table.yn-meta .meta-value a{
  text-decoration: none;
  color: var(--yn-title-color);
  transition: color .18s ease, opacity .18s ease;
}
.dlsite-work-meta-table.yn-meta .meta-value a:hover{
  color: var(--yn-title-hover);
}

/* もし過去の“チップ”風スタイルが残っていてもフラット化する */
.yn-meta .chip{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
}

/* ===== モバイル微調整（幅が狭い時はラベル幅を少し詰める） ===== */
@media (max-width: 640px){
  .dlsite-work-meta{ font-size: 15.5px; }
  .dlsite-work-meta-table.yn-meta .meta-row{
    /* ラベルが長いと折り返すため、若干の余白感が欲しい場合は padding を調整 */
    padding: 8px 0;
  }
}


/* カード見出しの調整 */
.dlsite-work-meta .yn-head{
  display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap;
  font-weight:700; font-size:1.2rem;
  background:rgba(2,6,23,.04); border:1px solid rgba(2,6,23,.10);
  padding:.38rem .65rem; border-radius:12px;  /* 少しだけタイトに */
}

/* 出典（本文色・小さめ） */
.dlsite-work-meta .yn-head .source-note{
  font-size:.70em; font-weight:500; color:inherit; opacity:.9;
}
.dlsite-work-meta .yn-head .source-note a{ color:inherit; text-decoration:none; }
.dlsite-work-meta .yn-head .source-note a:hover{ text-decoration:underline; }

/* 見出しと本文の間隔を統一 */
.dlsite-work-meta .yn-block .dlsite-intro-text,
.dlsite-work-meta .yn-block .voice-actor-comment{ margin-top:.45rem; }

/* セクション同士の間隔（作品紹介→おすすめポイント） */
.dlsite-work-meta .yn-block + .yn-block{ margin-top:1rem; }

/* スマホで出典を少し小さく */
@media (max-width: 480px){
  .dlsite-work-meta .yn-head{ gap:.45em; }
  .dlsite-work-meta .yn-head .source-note{ font-size:.64em; }
}


/* =========================================================
   DLsite CTA（確実動作・一括版）
   調整は :root の “つまみ” だけでOK
   ========================================================= */
:root{
  /* 色 */
  --yn-cta-sky:       #55b3f3;
  --yn-cta-sky-dark:  #118be1;

  /* 幅（プレイヤーに合わせたい時は数値を変更） */
  --yn-cta-maxw:      900px;

  /* つまみ（PC） */
  --yn-icon-col:        96px;  /* 左の水色帯の幅（90–100pxで微調整） */
  --yn-icon-square:     64px;  /* カートの箱（正方形） */
  --yn-icon-size:       60px;  /* カートSVGサイズ */
  --yn-text-bias:       30px;  /* テキストを右に寄せる量 */
  --yn-icon-nudge:     -10px;  /* カートを帯の中央から左右に微調整（負=左 / 正=右） */
}

/* プレイヤー直下＆幅そろえ */
.dlsite-chobit-player{ margin-bottom:4px !important; }
.yn-cta-wrap{ margin:0 auto 20px !important; }
.yn-cta-wrap .yn-btn{ max-width:var(--yn-cta-maxw); margin-left:auto; margin-right:auto; }

/* ---------- ボタン本体：3列グリッド（左=帯 / 中=テキスト / 右=ダミー） ---------- */
.yn-btn{
  display:grid !important;
  grid-template-columns: var(--yn-icon-col) 1fr calc(var(--yn-icon-col) - var(--yn-text-bias)) !important;
  align-items:center !important;
  position:relative; overflow:hidden;
  border-radius:14px; padding:20px 24px;
  border:2px solid transparent;
  font-weight:700; line-height:1.1; text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}

/* テーマ（ホバーで本体だけ反転。左帯とカートは色固定） */
.yn-btn--sky{ background:var(--yn-cta-sky); border-color:var(--yn-cta-sky); color:#fff; }
.yn-btn--sky:hover{ background:#fff; color:var(--yn-cta-sky-dark); border-color:var(--yn-cta-sky-dark); }

/* 左の水色帯 */
.yn-btn.yn-btn--sky.yn-btn--lefticon::before{
  content:""; position:absolute; z-index:0;
  left:-2px; top:-2px; bottom:-2px;
  width: calc(var(--yn-icon-col) + 4px);
  background: var(--yn-cta-sky);
  border-top-left-radius:inherit; border-bottom-left-radius:inherit;
}

/* ---------- アイコン列：帯の中で中央配置 ---------- */
.yn-btn.yn-btn--sky.yn-btn--lefticon{ position:relative !important; }
.yn-btn.yn-btn--sky.yn-btn--lefticon .yn-btn__icon{
  position:absolute !important;
  left:0 !important; top:0 !important; bottom:0 !important; right:auto !important;
  width:var(--yn-icon-col) !important;
  height:100% !important;
  display:flex !important; justify-content:center !important; align-items:center !important;
  transform: translateX(var(--yn-icon-nudge)) !important;
  margin:0 !important; padding:0 !important; border:none !important; background:transparent !important;
  z-index:1 !important;
}
.yn-btn--lefticon .yn-btn__icon svg{
  width: var(--yn-icon-size) !important;
  height:var(--yn-icon-size) !important;
  color:#fff !important;
}

/* ---------- テキスト列 ---------- */
.yn-btn__text{
  grid-column:2 !important; grid-row:1 !important; z-index:1;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; text-align:center !important;
  transform:none !important; margin:0 !important; padding:0 !important;
}
.yn-btn--lg .yn-btn__main{ font-size:28px; line-height:1.2; letter-spacing:.01em; }
.yn-btn--lg .yn-btn__sub { font-size:20px; line-height:1.2; margin-top:8px; font-weight:700; }

/* ---------- スマホ ---------- */
@media (max-width:480px){
  :root{
    --yn-icon-col:     80px;
    --yn-icon-square:  54px;
    --yn-icon-size:    36px;
    --yn-text-bias:    12px;
    --yn-icon-nudge:   -3px;
  }
  .yn-btn{ padding:16px 18px !important; }
  .yn-btn--lg .yn-btn__main{ font-size:24px; }
  .yn-btn--lg .yn-btn__sub { font-size:18px; }
}

/* ===== CTA内のテキスト色を“全状態”で固定 ===== */
/* ボタン自体（アンカー）のリンク状態をすべて上書き */
a.yn-btn.yn-btn--sky:link,
a.yn-btn.yn-btn--sky:visited,
a.yn-btn.yn-btn--sky:active{
  color:#fff !important;           /* 既定の紫/青を無効化 */
  text-decoration:none !important;
}

/* 既存のホバー反転は維持（必要なら調整） */
a.yn-btn.yn-btn--sky:hover{
  color:var(--yn-cta-sky-dark) !important;
}

/* 子要素も親の色を必ず継承させる（visited色の伝播を防止） */
.yn-btn .yn-btn__main,
.yn-btn .yn-btn__sub{
  color:inherit !important;
}

/* ===== ドラッグ時（テキスト選択）の見え方を統一 or 無効化 ===== */
/* 選択色を透明にして“色変化しない”ようにする */
.yn-btn ::selection{
  background:transparent;
  color:inherit;
}

/* そもそもボタン内は選択できないようにする（任意） */
.yn-btn, .yn-btn *{
  -webkit-user-select:none;
  user-select:none;
}

/* スマホのタップ時の青いハイライトを無効化（任意） */
a.yn-btn{
  -webkit-tap-highlight-color: transparent;
}

/* キーボード操作のアクセシビリティは確保 */
a.yn-btn:focus-visible{
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* ===== DLsite CTA 固定版（競合しないように .yn-cta-v2 に限定） ===== */

/* 好みの数値はここで一括調整 */
:root{
  --cta-h: 132px;          /* ボタン高さ */
  --cta-charw: 170px;      /* 左のキャラ枠の幅 */
  --cta-bleed: 28px;       /* 上下はみ出し量 */
}

/* 位置（記事末尾での中央寄せ/左寄せはここ） */
.dlsite-work-meta .yn-dl-cta--bottom{
  display:flex; justify-content:center;  /* ←左寄せにするなら flex-start */
  margin:18px 0 24px;
}

/* 本体：grid で 2 カラム。!important で古い指定に勝つ */
.dlsite-work-meta .yn-cta-v2{
  display:grid !important;
  grid-template-columns: var(--cta-charw) 1fr;
  align-items:center;
  column-gap:16px;
  width:min(100%, 940px);
  min-height:var(--cta-h);
  background:#f59e0b; color:#fff; text-decoration:none;
  border-radius:14px; border:2px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  overflow:visible;  /* 画像はみ出しOK */
}

/* 反転ホバー */
.dlsite-work-meta .yn-cta-v2.is-invert:hover{
  background:#fff; color:#f59e0b; border-color:#f59e0b; transform:translateY(-1px);
  transition:background .15s,color .15s,border-color .15s,transform .06s;
}

/* --- CTAキャラの2枚重なり対策（v2用） --- */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char{
  position: relative;
}
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char img{
  position: absolute;           /* 2枚を完全に重ねる */
  inset: 0;                     /* 親内で中央合わせ */
  margin: auto;
  display: block;
  pointer-events: none;         /* 画像がhoverターゲットにならないように */
  transition: opacity .15s ease;
}

/* まず両方ゼロ、通常のみ1にする（ベース状態） */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char img{ opacity: 0 !important; }
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char img.is-normal{ opacity: 1 !important; }

/* ホバー時にだけ入れ替え */
.dlsite-work-meta .yn-cta-v2:hover .yn-dl-cta__char img.is-normal{ opacity: 0 !important; }
.dlsite-work-meta .yn-cta-v2:hover .yn-dl-cta__char img.is-hover { opacity: 1 !important; }

/* 右カラム（ラベル）— 左寄せ＆サイズを固定pxで明示 */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
  grid-column:2;
  position:static !important; inset:auto !important;
  display:flex; align-items:center; justify-content:flex-start !important;
  text-align:left !important;
  padding:0 24px 0 4px;

  font-weight:800;
  font-size:32px !important;    /* ←固定pxで“安定”。好みで 30/34 に */
  line-height:1.05; letter-spacing:.04em;
}

/* スマホは控えめ */
@media (max-width:640px){
  :root{ --cta-h:112px; --cta-charw:148px; --cta-bleed:18px; }
  .dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{ font-size:20px !important; padding:0 16px 0 2px; }
}


/* ===== CTAキャラの裏に出る四角を完全に消す（最優先） ===== */

/* 1) ラッパーと疑似要素の背景・影・枠を無効化 */
.dlsite-work-meta .yn-cta-v2.yn-dl-cta__link::before,
.dlsite-work-meta .yn-cta-v2.yn-dl-cta__link::after,
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char::before,
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char::after{
  content:none !important;
}

.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  position:relative;   /* 画像をabsolute配置する土台 */
  z-index:1;           /* 背景より前に */
}

/* 2) 画像そのものに付く背景・影・枠も無効化 */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char img{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  filter:none !important;
  display:block;

  /* 2枚を完全に重ねて opacity で切替 */
  position:absolute; inset:0; margin:auto;
  pointer-events:none;
  transition:opacity .15s ease;
}

/* 3) “通常=1 / ホバー=0” のベース。ホバー時だけ反転 */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char img{ opacity:0 !important; }
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char img.is-normal{ opacity:1 !important; }
.dlsite-work-meta .yn-cta-v2:hover .yn-dl-cta__char img.is-normal{ opacity:0 !important; }
.dlsite-work-meta .yn-cta-v2:hover .yn-dl-cta__char img.is-hover { opacity:1 !important; }

/* === DLsite CTA 調整：キャラ小さめ＆文字は必ず1行 === */

/* サイズをここで一気に調整（必要なら数値だけ変えればOK） */
:root{
  --yn-dl-cta-h: 112px;   /* ボタンの高さ（→小さめに） */
  --yn-dl-cta-charw: 128px; /* 左のキャラ枠の幅（→小さめに） */
  --yn-dl-cta-bleed: 50px;  /* はみ出し量（控えめに） */
}

/* 余白を少し詰めて文字側の横幅を確保 */
.dlsite-work-meta .yn-cta-v2.yn-dl-cta__link{ column-gap: 12px !important; }

/* 文字は1行固定＋左寄せ。入らない時は自動で小さくなる幅連動フォント */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
  white-space: nowrap !important;
  word-break: keep-all !important;  /* CJKの不意な改行を抑制 */
  overflow: hidden;
  text-overflow: clip;              /* 省略記号が要るなら 'ellipsis' */

  /* 文字サイズ：最大28px。横幅が厳しい時は連動で縮む */
  font-size: clamp(18px, 2.2vw, 28px) !important;
  letter-spacing: .03em;
  padding-right: 20px;              /* 右の余白を少し確保 */
}

/* 画像のはみ出しは変えずに高さだけ連動（現状のルールを上書き） */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char{
  width: var(--yn-dl-cta-charw) !important;
  min-height: var(--yn-dl-cta-h) !important;
}
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__char img{
  height: calc(var(--yn-dl-cta-h) + var(--yn-dl-cta-bleed)) !important;
  transform: translateY(calc(-1 * var(--yn-dl-cta-bleed) / 2)) !important;
}

/* スマホはさらに小さめ（必要に応じて調整） */
@media (max-width:640px){
  :root{ --yn-dl-cta-h: 100px; --yn-dl-cta-charw: 116px; --yn-dl-cta-bleed: 10px; }
  .dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
    font-size: clamp(16px, 4.6vw, 22px) !important;
  }
}


/* —— DLsite CTA 文字が切れる修正（v2専用・上書き） ——————————— */

/* 右カラムに絶対に収まるように：1fr を minmax(0,1fr) に */
.dlsite-work-meta .yn-cta-v2{
  grid-template-columns: var(--cta-charw) minmax(0,1fr) !important;
}

/* ラベルは折り返しOKにして、縮められるようにする */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
  white-space: normal !important;          /* ← nowrap を無効化 */
  word-break: break-word !important;        /* ← keep-all を打ち消し */
  overflow-wrap: anywhere !important;       /* 日本語でも必ず折り返す */
  text-overflow: clip !important;
  min-width: 0 !important;                  /* Grid/Flex の子要素対策 */
  font-size: clamp(16px, 4.4vw, 22px) !important; /* モバイルで少し縮む */
  padding-right: 20px !important;
}

/* === CTA見栄えアップ（2行時の整え） ===================== */

/* テキスト側がちゃんと縮むように（はみ出し事故の予防） */
.dlsite-work-meta .yn-cta-v2{
  grid-template-columns: var(--cta-charw) minmax(0,1fr) !important;
  padding-block: 10px !important; /* 上下に少し息継ぎ */
}

/* 文字ブロック：2行のときの見栄えを整える */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
  line-height: 1.25 !important;      /* 行間で読みやすさUP */
  letter-spacing: .02em !important;  /* ほんの少し詰める */
  min-width: 0 !important;           /* Gridの縮小妨げを解除 */

  /* できるブラウザでは“バランスよく改行” */
  text-wrap: balance;
  /* Chrome 123+ の自然な日本語改行（フォールバック） */
  word-break: auto-phrase;
}

/* さらに狭い幅ではキャラを少し小さめ＋文字に空間を */
@media (max-width: 520px){
  .dlsite-work-meta .yn-cta-v2{ column-gap: 18px !important; }
  :root{
    --cta-charw: 150px;        /* ほんの少しだけ縮める */
  }
}

/* モバイル寄りの最終仕上げ：文字もう一段だけ落として均整を取る */
@media (max-width: 430px){
  .dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
    font-size: clamp(15px, 4.4vw, 20px) !important;
  }
}

/* モバイルだけテキストをキャラ側に寄せる */
@media (max-width: 520px){
  /* キャラ枠を少しだけ細く＋列のすき間も狭く */
  :root{ --cta-charw: 138px; } /* ← 150px から少し縮める */
  .dlsite-work-meta .yn-cta-v2{ column-gap: 10px !important; }

  /* ラベルの左パディングを詰める */
  .dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
    padding-left: 0 !important;
  }
}

/* さらに狭い幅ではもう一段階だけ寄せる */
@media (max-width: 400px){
  :root{ --cta-charw: 132px; }
  .dlsite-work-meta .yn-cta-v2{ column-gap: 8px !important; }

  /* ほんの少しだけ左に寄せる（重ならない範囲） */
  .dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
    margin-left: -2px; /* 好みで 0～-6px 程度 */
  }
}

/* グリッド内でラベル列を縮められるように（これ大事） */
.dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
  min-width: 0;  /* ← grid/flex 子要素は既定で min-width:auto なので縮められず溢れやすい */
}

/* スマホだけは2行OKにして途切れを解消、少し寄せる */
@media (max-width: 640px){
  .dlsite-work-meta .yn-cta-v2{
    column-gap: 10px;                 /* 文字をキャラに近づける（お好みで） */
  }
  .dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
    white-space: normal !important;   /* ← 2行折り返しを許可 */
    font-size: 20px !important;       /* 20〜22pxの範囲でお好みで */
    line-height: 1.25;
    padding-right: 12px;              /* 右の余白を少しだけ */
    overflow: visible;                 /* 念のため切り捨てを無効化 */
  }
}

/* PCのCTAラベル文字サイズを28pxで固定 */
@media (min-width: 641px){
  .dlsite-work-meta .yn-cta-v2 .yn-dl-cta__label{
    font-size: 28px !important;
    line-height: 1.15; /* お好みで */
  }
}


/* 体験版バッジ */
:root{
  --yn-badge-purple: #8b5cf6; /* 紫 */
  --yn-badge-yellow: #f59e0b; /* 黄 */
}

.yn-badge {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem .6rem;
  border-radius:9999px;
  font-size:.85rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}

.yn-badge-trial{ color:#fff !important; }
.yn-badge-audio{ background:var(--yn-badge-purple); }
.yn-badge-video{ background:var(--yn-badge-yellow); }

/* 既存のバッジ列が flex であれば、年齢指定の右に自然に並びます。
   もし間隔が狭ければ以下で微調整 */
.badge-row .yn-badge + .yn-badge{ margin-left:.4rem; }


/* タイトル上のカテゴリ列から “体験版” 系だけ隠す */
.entry-meta-top .category-list a[href*="audio-trial"],
.entry-meta-top .category-list a[href*="video-trial"]{
  display:none !important;
}

/* タイトル上のカテゴリ列をフレックス化して間隔を付ける */
.entry-meta-top .category-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;               /* ← ここが“空白”。好みで 4〜10px に調整 */
}

/* 既存スタイルはそのまま活かす（必要なら上書き） */
.entry-meta-top .category-list a{
  padding:0;
  background:transparent;
  color:#666;
  font-size:10px;
  line-height:1;
  text-decoration:none;
}
.entry-meta-top .category-list a:hover{
  text-decoration:underline;
}


/* 画像の上に置くメタ行（従来の見た目＋整列） */
.custom-post-thumbnail .entry-meta-top--thumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;               /* 日付とカテゴリの間隔 */
  font-size:.75rem;
  color:#666;
  margin:0 0 6px;        /* サムネとの間の余白 */
}

/* カテゴリ間の空白 */
.custom-post-thumbnail .entry-meta-top--thumb .category-list{
  display:flex; flex-wrap:wrap; gap:6px;
}

/* 体験版は表示しない（下のバッジ列で出すため） */
.custom-post-thumbnail .entry-meta-top--thumb .category-list a[href*="audio-trial"],
.custom-post-thumbnail .entry-meta-top--thumb .category-list a[href*="video-trial"]{
  display:none !important;
}

/* ボタン装飾を外した素のリンク（あなたの既存スタイルに合わせて維持） */
.custom-post-thumbnail .entry-meta-top--thumb .category-list a{
  padding:0;
  background:transparent;
  color:#666;
  border-radius:0;
  font-size:10px;
  line-height:1;
  text-decoration:none;
}
.custom-post-thumbnail .entry-meta-top--thumb .category-list a:hover{
  text-decoration:underline;
}

.entry-header .entry-meta-top{ display:none !important; }


/* 左カラムを縦積みにして、並び順を入れ替える */
.yn-side{
  display:flex;
  flex-direction: column;           /* 縦方向に積む */
  align-items:flex-start;           /* 左寄せ（好みで center でもOK） */
}

/* 左：見出し+マスコット ／ 右：検索結果 */
.yn-search-grid{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

/* 左カラムを軽く追従（任意） */
.yn-side{
  position: sticky;
  top: 110px;
}

/* テキスト見出し */
.yn-head{ margin: 0 0 14px; }
.yn-head-title{
  font-weight: 800;
  line-height: 1.2;
  color: #24324a;
  font-size: clamp(24px, 2.6vw, 34px);
}
.yn-head-sub{
  margin-top: 8px;
  color: #5f6b85;
  font-weight: 600;
  font-size: clamp(13px, 1.6vw, 16px);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 件数バッジ */
.yn-count{
  display: inline-block;
  min-width: 1.9em;
  height: 1.9em;
  line-height: 1.9em;
  text-align: center;
  border-radius: 999px;
  background: #eff4ff;
  color: #2745ff;
  font-weight: 800;
  padding: 0 .35em;
}

/* マスコット（反転は好みで） */
.yn-mascot img{
  display: block;
  height: auto;
  max-width: 240px;
  transform: scaleX(-1); /* 反転いらなければ削除 */
}

/* 右カラムが潰れない保険 */
.yn-results{ min-width: 0; }

/* レスポンシブ */
@media (max-width: 1280px){
  .yn-search-grid{ grid-template-columns: 260px 1fr; gap: 24px; }
  .yn-mascot img{ max-width: 220px; }
}
@media (max-width: 1024px){
  .yn-search-grid{ grid-template-columns: 220px 1fr; gap: 22px; }
  .yn-mascot img{ max-width: 200px; }
}
@media (max-width: 768px){
  .yn-search-grid{ grid-template-columns: 1fr; }
  .yn-side{ position: static; }
  .yn-head-title{ font-size: clamp(20px, 5.2vw, 28px); }
}

/* ── 検索ページの上余白（ヘッダーとの距離を下げる） ───────── */

/* 余白量（画面幅で少し増やす） */
:root{
  --yn-search-top-gap: 32px;      /* スマホ～タブレット */
}
@media (min-width: 1024px){
  :root{ --yn-search-top-gap: 48px; }  /* PC で少し大きめ */
}

/* 検索結果があるとき：あなたの検索レイアウト全体を下げる */
body.search .yn-search-grid{
  margin-top: var(--yn-search-top-gap);
}

/* 検索結果が0件のとき：テーマのメインコンテナに余白を付与
   （WordPress はこの状態で body に search-no-results を付けます） */
body.search-no-results .site-content > .ast-container{
  padding-top: var(--yn-search-top-gap);
}

/* もし .yn-noresult を使っているなら保険で↓もOK（任意） */
body.search .yn-noresult{
  margin-top: var(--yn-search-top-gap);
}

/* モバイルで検索ヘッダーを左右に少し内側へ */
@media (max-width: 768px){
  body.search .yn-side{
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* ==== 検索・アーカイブのページ上部に共通の余白を作る ==== */
:root{
  /* 好みで調整（PC時の余白 / SP時の余白） */
  --yn-top-gap-desktop: 48px;
  --yn-top-gap-mobile: 28px;
}

/* Astra のメインコンテナに余白を与える（保険で複数のラッパを指定） */
.search .site-content > .ast-container,
.archive .site-content > .ast-container,
.category .site-content > .ast-container,
.tag .site-content > .ast-container,
.author .site-content > .ast-container,
.tax .site-content > .ast-container{
  margin-top: var(--yn-top-gap-desktop);
  padding-top: 0; /* 余白の二重化を防止 */
}

/* 念のため、グリッド本体にも軽く余白（テンプレート直下の場合の保険） */
.yn-search-grid,
.yn-archive-grid{
  margin-top: 16px;
}

@media (max-width: 768px){
  .search .site-content > .ast-container,
  .archive .site-content > .ast-container,
  .category .site-content > .ast-container,
  .tag .site-content > .ast-container,
  .author .site-content > .ast-container,
  .tax .site-content > .ast-container{
    margin-top: var(--yn-top-gap-mobile);
  }
}

/* すべての一覧（検索/アーカイブ/タグ/カテゴリ/著者…）のレイアウトを統一 */
.archive .yn-search-grid,
.tax    .yn-search-grid,
.author .yn-search-grid,
.search .yn-search-grid {
  /* 左カラムは控えめ、右は「minmax(0,1fr)」で最大化 */
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
}

/* 右カラムの“縮まない”問題を根こそぎ無効化（保険） */
.archive .yn-results,
.tax    .yn-results,
.author .yn-results,
.search .yn-results {
  min-width: 0 !important;   /* grid item のデフォルト min-width:auto を打ち消す */
  width: 100%;
}

/* マスコットのサイズ（広げすぎ防止） */
.archive .yn-mascot img,
.tax    .yn-mascot img,
.author .yn-mascot img,
.search .yn-mascot img {
  max-width: 200px;
  height: auto;
}

/* Astra 側のコンテナ制限が強い環境向けの“上書き”保険  */
.archive .site-content .ast-container,
.tax    .site-content .ast-container,
.author .site-content .ast-container,
.search .site-content .ast-container {
  max-width: 1200px;   /* 必要なら 1280 や 1320 に上げてもOK */
}

/* 一覧の上マージン（ヘッダーに近すぎ対策）も統一しておく */
.archive .yn-search-grid,
.tax    .yn-search-grid,
.author .yn-search-grid,
.search .yn-search-grid {
  margin-top: 32px;
}

/* ▼ ここから：マスコット付き一覧（検索/アーカイブ/タグ/カテゴリ/著者）を全幅に */
.search .yn-search-grid #primary,
.archive .yn-search-grid #primary,
.tax .yn-search-grid #primary,
.author .yn-search-grid #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;   /* Astra が float を当てている場合に備えて */
  flex: none !important;    /* Flex 幅の干渉も無効化 */
}

/* Astra 側の「右サイドバー用の幅計算」を無効化（.yn-search-grid がある時だけ） */
@media (min-width: 921px) {
  .ast-right-sidebar .yn-search-grid #primary {
    width: 100% !important;
  }
}

/* 念のため、右サイドバー領域があっても非表示（.yn-search-grid がある時だけ） */
.yn-search-grid ~ #secondary,
.yn-search-grid #secondary {
  display: none !important;
}

/* 右カラムが縮まない問題の保険（Grid 子要素の min-width:auto を打ち消す） */
.search  .yn-results,
.archive .yn-results,
.tax     .yn-results,
.author  .yn-results {
  min-width: 0 !important;
  width: 100%;
}

/* 左250px/右可変（必要なら 200〜240px に） */
.search  .yn-search-grid,
.archive .yn-search-grid,
.tax     .yn-search-grid,
.author  .yn-search-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  margin-top: 32px;    /* ヘッダーからの余白 */
}

/* マスコットの最大幅（広がり過ぎ防止） */
.search  .yn-mascot img,
.archive .yn-mascot img,
.tax     .yn-mascot img,
.author  .yn-mascot img {
  max-width: 200px;
  height: auto;
}

/* ===== モバイル：統一リストのレイアウト修正 ===== */
@media (max-width: 768px) {

  /* 左右2カラム → 1カラムに */
  .yn-search-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 左カラム（キャラ）を通常フローに戻して上に表示 */
  .yn-side{
    position: static !important;
    margin: 0 0 8px !important;
    overflow: visible !important;
    text-align: center;
  }
  .yn-side .yn-mascot img{
    max-width: 180px;
    height: auto;
    margin: 8px auto 0;
  }

  /* 右カラム（記事リスト）を全幅に */
  .yn-results{
    width: 100% !important;
    min-width: 0 !important;  /* これが無いとタイトルが縦長に潰れることがある */
  }

  /* Astra のカードを1列に固定して横幅を100%に */
  .yn-results .ast-row{
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .yn-results .ast-row > article{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* カード内の左右に少し余白（端に寄りすぎ問題の保険） */
  .yn-results .ast-article-post{
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* === tokens === */
:root{
  --yn-content-max: 760px;
  --yn-header: #0f1f3a;
  --yn-header-hover: #0b162b;
  --yn-link-soft: #5a79e6;
  --yn-link-soft-hover: #2f4db0;
  --yn-cite-soft: #6b8df0;
}

/* === コメント行（安定した2列+右端 reply） === */
.yn-c-item{ list-style:none; margin:0 0 18px; padding:0; }
.yn-c-item > article{
  display:grid;
  grid-template-columns: max-content 1fr auto; /* [番号] [名前/日時/本文] [返信] */
  column-gap:10px;
  align-items:baseline;
}

.yn-c__no{
  grid-column:1; font-size:13px; line-height:1.2; font-weight:400; color:inherit;
}
.yn-c__head{ grid-column:2; display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline; }
.yn-c__author{ color:#16a34a; font-weight:700; }
.yn-c__time{ color:#64748b; font-weight:400; font-size:13px; }
.yn-reply{ grid-column:3; text-decoration:none; color:var(--yn-link-soft); font-weight:400; }
.yn-reply::before{ content:"▼"; margin-right:.15rem; }
.yn-reply:hover{ color:var(--yn-link-soft-hover); }

.yn-body{
  grid-column:2 / -1;
  margin:.25rem 0 0; padding:0;
  color:#0f172a; font-size:16px; line-height:1.8; font-weight:700;
}

/* ※/>> の色 */
.yn-body .yn-cite{
  color:var(--yn-cite-soft);
  font-weight:700;
  background:transparent; border:0; padding:0; border-radius:0;
  cursor:default; user-select:text;
}

/* プレビュー */
.yn-cite-preview{
  position:absolute; z-index:9999; pointer-events:none;
  max-width:640px; padding:12px 14px; border-radius:14px; background:#fff;
  border:1px solid rgba(15,31,58,.08); box-shadow:0 18px 36px rgba(2,6,23,.12);
  line-height:1.7; font-size:14px;
}
.yn-cite-card__no{ font-weight:800; margin-bottom:6px; }
.yn-cite-card__no .who{ margin-left:8px; color:#16a34a; font-weight:700; }
.yn-cite-card__no .when{ margin-left:8px; color:#64748b; font-weight:600; }

/* ===== コメントブロック幅 & 見出し ===== */
#comments, #comments .comment-list, #comments .comment-respond{
  max-width:var(--yn-content-max); margin-left:auto; margin-right:auto;
}
#respond .comment-reply-title{
  margin:0 0 6px; padding:0; border:0; font-size:17px; font-weight:500; line-height:1.3;
}
#respond .comment-reply-title::before, #respond .comment-reply-title::after{ content:none; }

/* ===== 匿名トグル ===== */
.yn-label{ display:block; font-size:13px; color:#64748b; margin-bottom:6px; }
#yn-controls #yn-anonymous:not(:checked) ~ #yn-name-wrap{ display:block; }
#yn-controls #yn-anonymous:checked ~ #yn-name-wrap{ display:none; }

/* ===== 投稿ボタン（中央・半幅・ネイビー） ===== */
#commentform .form-submit .submit,
#commentform input[type="submit"].submit,
#respond .form-submit .submit{
  display:block !important;
  margin:16px auto 24px !important;           /* 中央 */
  width:clamp(240px, 50%, 420px) !important;  /* 半幅 */
  padding:16px 28px !important;
  font-size:20px !important; font-weight:800 !important;
  color:#fff !important; background:var(--yn-header) !important;
  border:0 !important; border-radius:12px !important; box-shadow:none !important;
  transition:background-color .15s !important;
}
#commentform .form-submit .submit:hover{ background:var(--yn-header-hover) !important; }

/* WP側の装飾抑止（保険） */
.comment-list, .comment-list ol, .comment-list ul{ list-style:none; margin-left:0; padding-left:0; }
a.comment-reply-link::before{ content:none; }

/* スマホ少しだけ */
@media (max-width:480px){
  .yn-c__head{ gap:.45rem; }
}

/* ▼返信は日時と同サイズ / 名前は日時より一段大きく */
.yn-c__time,
.yn-reply{ font-size:13px !important; }
.yn-c__author{ font-size:14px !important; }

/* >>番号 をクリックできる見た目に */
.yn-body .yn-cite{ cursor:pointer !important; }

/* クリックで飛んだ先を軽くハイライト */
.yn-c-item.yn-flash{ animation:ynFlash 1.2s ease; }
@keyframes ynFlash{
  0%{ background:rgba(59,92,204,.12); }
  100%{ background:transparent; }
}

/* テキストボックス → 匿名行 → 送信ボタン の縦間隔をさらに詰める */
#respond .comment-form-anonymous{
  margin: 2px 0 2px !important;   /* 以前より更に小さく */
  line-height: 1.25 !important;
}
#commentform p.form-submit{
  margin: 2px 0 12px !important;  /* ボタンの段落の上マージンを最小化 */
  padding-top: 0 !important;
}
#commentform #submit{
  margin-top: 0 !important;       /* 念のためボタン自身もゼロ */
}

/* それでも足りなければ “超コンパクト” に（必要な時だけ有効化） */
/*
#respond .comment-form-anonymous{ margin-bottom: 0 !important; }
#commentform p.form-submit{       margin-top: 0 !important; }
*/


/* □ 「匿名で投稿」 を少しだけ大きく（テキスト＋チェックボックス） */
#respond .comment-form-anonymous,
#respond .comment-form-anonymous label{
  font-size: 16px !important;         /* お好みで 16px にしてもOK */
}
#respond .comment-form-anonymous input[type="checkbox"]{
  transform: scale(1.15);             /* チェックボックスを少し拡大 */
  vertical-align: -2px;               /* 文字と高さを揃える微調整 */
}

/* 見出しボックス（薄いグレー）を本文幅＆小さめに */
#comments .yn-comments-box{
  max-width: var(--yn-content-max);
  margin: 10px auto 16px;
  padding: 10px 12px;
  background:#f7f8fa;
  border:1px solid #e5e7eb;
  border-radius:8px;
}
#comments .yn-comments-box .comments-title{
  margin:0 !important;              /* 余白を詰める */
}

/* 匿名ONで名前欄を消す（.yn-controls 内のチェックを見て切替） */
.yn-controls .comment-form-author{
  display:block !important;          /* まず常に表示 */
}
.yn-controls:has(input[type="checkbox"]:checked) .comment-form-author{
  display:none !important;           /* 匿名ONで非表示 */
}

/* チェックとラベルを少し大きく（見やすさ） */
.comment-form-anonymous{ font-size:15px; }
.comment-form-anonymous input[type="checkbox"]{
  transform:scale(1.1);
  margin-right:.35rem;
}

/* 見出しの薄いグレー枠をスリムに */
.yn-comments-box{
  max-width: var(--yn-content-max, 760px);
  margin: 8px auto 18px !important;
  padding: 10px 16px !important;
  border: 1px solid #e9edf3 !important;
  background: #f7f9fc !important;
  border-radius: 10px !important;
  box-sizing: border-box;
}
.yn-comments-box .comments-title{
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

/* 匿名トグル（top/bottom両フォームで動くように、ID前方一致で指定） */
[id^="yn-controls"] [id^="yn-anonymous"]:not(:checked) ~ [id^="yn-name-wrap"]{ display:block; }
[id^="yn-controls"] [id^="yn-anonymous"]:checked      ~ [id^="yn-name-wrap"]{ display:none; }

/* ※ / >> はクリック不可っぽく（でも hover は効かせたい） */
.yn-body .yn-cite{
  cursor: default;
  text-decoration: none;
  pointer-events: auto; /* hover を効かせるため */
}

/* プレビューの軽い装飾（あなたの既存に合わせる） */
#yn-cite-preview,
.yn-cite-preview{
  position:absolute; z-index:9999; pointer-events:none;
  max-width:640px; padding:12px 14px; border-radius:14px;
  background:#fff; border:1px solid rgba(15,31,58,.08);
  box-shadow:0 18px 36px rgba(2,6,23,.12);
  line-height:1.7; font-size:14px;
}
.yn-cite-card__no{ font-weight:800; margin-bottom:6px; }
.yn-cite-card__no .who{ margin-left:8px; color:#16a34a; font-weight:700; }
.yn-cite-card__no .when{ margin-left:8px; color:#64748b; font-weight:600; }

/* 見出しボックスをコンパクトに */
.yn-comments-box{
  max-width: var(--yn-content-max, 760px);
  margin: 0 auto 14px;
  padding: 14px 18px;
  background: #f5f7fb;
  border-radius: 12px;
}

/* 見出し「コメント(◯件)」の薄い枠をコンパクトに */
#comments .yn-comments-box{
  max-width: var(--yn-content-max, 760px);
  margin: 8px auto 16px;       /* 上下の間隔（小さめ） */
  padding: 10px 14px;          /* 枠の厚み（薄め） */
  background: #f5f7fb;         /* 薄いグレー */
  border: 1px solid rgba(2, 6, 23, .06);
  border-radius: 12px;
}

/* 枠の中の見出しをキュッと詰める（テーマの余白を打ち消し） */
#comments .yn-comments-box .comments-title{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}

/* さらに細くしたい場合はパディングだけ少し減らす（任意） */
/* #comments .yn-comments-box{ padding: 8px 16px; } */

@media (max-width: 480px){
  #comments .yn-comments-box{ padding: 8px 12px; margin: 6px auto 12px; }
  #comments .yn-comments-box .comments-title{ font-size: 16px; }
}

/* コメント(◯件) の数字だけ“普通の数字”に強制 */
#comments .yn-comments-box .comments-title,
#comments .yn-comments-box .comments-title *{
  font-family: inherit !important;                /* 本文と同じフォントに */
  font-variant-numeric: lining-nums proportional-nums !important;
  font-feature-settings: "lnum" 1, "pnum" 1, "onum" 0, "tnum" 0 !important;
  /* ↑ oldstyle数字を無効化して、通常のライニング＋プロポーショナルに */
}

/* コメント(◯件) の枠色・高さを「おすすめポイント」と揃える */
#comments .yn-comments-box{
  background: rgba(2,6,23,.04) !important;   /* #0206170A と同じ薄グレー */
  border: none !important;                   /* 枠線は無し（同じ見た目に） */
  border-radius: 10px !important;
  display: flex !important;                  /* 高さ固定＋中央寄せ */
  align-items: center !important;
  min-height: 57px !important;               /* おすすめポイントと同じ高さ */
  padding: 0 14px !important;                /* 左右余白だけ */
  box-sizing: border-box;
}

/* 中の見出しは中央にキュッと */
#comments .yn-comments-box .comments-title{
  margin: 0 !important;
  line-height: 1 !important;
}

#comments .yn-comments-box .comments-title{
  color:rgba(2,6,23,.72) !important;
}


/* ---- コメント上のマスコット吹き出し ---- */
.yn-mascot{
  display:flex;
  align-items:center;
  gap:14px;
  margin:8px 0 12px;
}
.yn-mascot__img{
  width:clamp(80px, 12vw, 110px); /* ←好みで調整 */
  height:auto;
  display:block;
}
.yn-mascot__balloon{
  position:relative;
  max-width:min(720px, 90%);
  padding:12px 16px;
  font-size:15.5px;
  line-height:1.6;
  color:#374151;
  background:#fff;
  border:1px solid #e9edf3;
  border-radius:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.yn-mascot__balloon::before{
  content:"";
  position:absolute;
  left:-10px; top:14px;
  border-width:8px 10px 8px 0;
  border-style:solid;
  border-color:transparent #e9edf3 transparent transparent;
}
.yn-mascot__balloon::after{
  content:"";
  position:absolute;
  left:-9px; top:14px;
  border-width:8px 10px 8px 0;
  border-style:solid;
  border-color:transparent #fff transparent transparent;
}
@media (max-width:480px){
  .yn-mascot__img{ width:64px; }
  .yn-mascot__balloon{ font-size:14px; }
}


/* --- Mascot --- */
.yn-mascot{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin: 8px 0 12px;
}

/* 画像サイズ：関連記事くらいに。最大値はお好みで調整 */
.yn-mascot__img{
  width: clamp(96px, 14vw, 148px);  /* もっと大きく → 168px などに */
  height:auto;
  display:block;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.03));
}

/* 吹き出し：枠＆グローが毎回ランダム色 */
.yn-mascot__balloon{
  display:inline-block;
  background:#fff;
  border: 2px solid var(--mascot-accent, #e9edf3);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.5;
  color:#374151;
  /* 外側リング＋柔らかい光彩 */
  box-shadow:
    0 0 0 3px var(--mascot-accent-15, rgba(2,6,23,.06)),
    0 0 22px var(--mascot-accent-40, rgba(2,6,23,.12));
}

/* モバイル微調整 */
@media (max-width: 480px){
  .yn-mascot__img{ width: clamp(82px, 28vw, 120px); }
  .yn-mascot__balloon{ font-size: 15px; padding: 9px 12px; }
}


/* ===== マスコット吹き出し：位置と高さの微調整 ===== */
/* ここだけ変えれば全体の“下げ量”を一括調整できます */
.yn-mascot{ --bubble-shift: 16px; } /* 8〜16pxくらいで好みに調整 */

.yn-mascot__balloon{
  /* バルーンを下にズラす */
  margin-top: var(--bubble-shift);

  /* 縦に少しゆったり → 細長くなりすぎないように */
  padding-block: 22px 26px;  /* 上下の余白を増やす（お好みで） */

  /* 枠線をちょい太め＆おしゃれ感 */
  border-width: 3px;         /* 2.5〜4pxあたりで調整可 */
  border-radius: 16px;       /* 角も少しだけ丸く */
}

/* しっぽ（三角）も同じだけ下げる */
.yn-mascot__balloon::before{
  top: calc(26px + var(--bubble-shift));  /* 以前 26px 相当ならここを基準に */
}
.yn-mascot__balloon::after{
  top: calc(26px + var(--bubble-shift));
}

/* 吹き出しを少し下げる（三角も自動で追従） */
#comments .yn-mascot{ --bubble-shift: 22px; }  /* 少し下げる: 20〜24px で微調整可 */


/* ==== Share buttons ==== */
.yn-share-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin:12px auto 24px;
  max-width: var(--yn-cta-maxw, 900px); /* CTAと横幅を合わせる */
}
.yn-share-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 12px; border-radius:16px; line-height:1;
  font-weight:700; font-size:16px; text-decoration:none; color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.08);
  transition:transform .05s ease, filter .15s ease;
  cursor:pointer; border:none;
}
.yn-share-btn:hover{ filter:brightness(1.05); }
.yn-share-btn:active{ transform:translateY(1px); }
.yn-share-btn svg{ width:20px; height:20px; fill:currentColor; }

/* ブランド色（好みで変更OK） */
.yn-x  { background:#000; }
.yn-fb { background:#1877F2; }
.yn-ig {
  background-image: linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
}

@media (max-width:480px){
  .yn-share-row{ gap:8px; }
  .yn-share-btn{ padding:12px 10px; font-size:14px; }
}

/* === Share buttons: hoverで少しだけ浮かせる（文字色は固定） === */
.yn-share-btn{
  color:#fff !important;                /* 文字色固定 */
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  will-change: transform, box-shadow;
}

.yn-share-btn:hover,
.yn-share-btn:focus-visible{
  text-decoration:none;
  color:#fff !important;                /* hoverでも色を変えない */
  filter:none !important;               /* 明るさ変化を無効化 */
  transform: translateY(-2px);          /* ほんの少し“浮く” */
  box-shadow:0 8px 16px rgba(0,0,0,.14), 0 3px 6px rgba(0,0,0,.10);
}

.yn-share-btn:active{
  transform: translateY(-1px);          /* 押し込んだ感 */
  box-shadow:0 4px 8px rgba(0,0,0,.14), 0 2px 4px rgba(0,0,0,.10);
}

/* === Share buttons: ミドル濃度・中太リング・やや速め（最終） === */
@property --yn-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root{
  --yn-btn-radius: 16px;  /* ボタンと同じ角丸に合わせる */
  --yn-ring: 6px;         /* リングの太さ（中太） */
  --yn-speed: 2.2s;       /* 回転速度（速すぎないゲーミング感） */
  --yn-op: .90;           /* 明るさ（濃いめ） */
  --yn-sat: .95;          /* 彩度（強めだがギラつかない） */
}

.yn-share-btn{
  position: relative;
  border-radius: var(--yn-btn-radius);
  color:#fff !important;
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .16s ease;
  isolation: isolate;
}

/* 縁の“虹リング”のみ。内側のボタン色は一切変更しない */
.yn-share-btn::before{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--yn-ring));                 /* 外側へ */
  border-radius: calc(var(--yn-btn-radius) + var(--yn-ring));
  background: conic-gradient(
    from var(--yn-angle),
    /* 少し柔らかめの配色（後段の saturate で濃さ調整） */
    #ff6aa3 0deg, #ffb066 60deg, #ffe680 120deg,
    #8ff2bf 180deg, #7ecbff 240deg, #b59cff 300deg, #ff6aa3 360deg
  );
  padding: var(--yn-ring);                          /* リングの厚み */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  /* 濃さ・彩度の最終調整（数値は上の変数で統一管理） */
  filter: saturate(var(--yn-sat)) brightness(1.0);

  opacity: 0;                                       /* 通常は非表示 */
  transition: opacity .15s ease;
  z-index: 0;
  pointer-events: none;
}

/* ホバー：少し浮く＋リングが周回（形は固定・色だけ回る） */
.yn-share-btn:hover,
.yn-share-btn:focus-visible{
  transform: translateY(-2px);
  box-shadow:0 8px 16px rgba(0,0,0,.14), 0 3px 6px rgba(0,0,0,.10);
}
.yn-share-btn:hover::before,
.yn-share-btn:focus-visible::before{
  opacity: var(--yn-op);
  animation: yn-ring-spin var(--yn-speed) linear infinite;
}

.yn-share-btn:active{ transform: translateY(-1px); }

@keyframes yn-ring-spin { to { --yn-angle: 360deg; } }

@media (prefers-reduced-motion: reduce){
  .yn-share-btn::before{ animation:none !important; }
}


/* ==== コメントを見る（中央寄せ・ちょい大きめ・隙間圧縮） ==== */
.yn-cta-wrap .yn-btn--gray{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* ← 高さを“少しだけ”UP */
  padding:12px 16px !important;     /* 以前: 10px 14px */
  min-height:52px;                   /* 以前: 44px */
  line-height:1.05 !important;
  font-size:clamp(15px, 2.8vw, 18px) !important; /* 文字を少し大きく */
  font-weight:800;

  background:#e5e7eb;
  color:#111827;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
}
.yn-cta-wrap .yn-btn--gray:hover,
.yn-cta-wrap .yn-btn--gray:active,
.yn-cta-wrap .yn-btn--gray:focus{
  background:#e5e7eb;
  color:#111827;
}

/* ==== 縦の隙間をさらに詰める ==== */
.yn-cta-wrap{ margin:0 auto 10px !important; }   /* 既定より少なめ */
.yn-cta-wrap + .yn-cta-wrap{ margin-top:4px !important; }   /* 青CTA↔灰ボタン */
.yn-cta-wrap + .yn-share-row{ margin-top:6px !important; }  /* 灰ボタン↔シェア */
.yn-share-row{ margin-top:6px !important; }                 /* 念のため */

/* コメントを見る：文字を少し大きく＆薄めの色に */
.yn-cta-wrap .yn-btn--gray{
  font-size: clamp(16px, 3vw, 20px) !important;  /* 以前より少しUP */
  color: #374151 !important;                     /* やや薄めのグレー（slate-700） */
  letter-spacing: .2px;                          /* 読みやすさ微調整 */
  font-weight: 800;                               /* 必要なら 700 に */
}

/* ホバーでも色を固定 */
.yn-cta-wrap .yn-btn--gray:hover,
.yn-cta-wrap .yn-btn--gray:active,
.yn-cta-wrap .yn-btn--gray:focus{
  color: #374151 !important;
}


/* === ホーム/アーカイブのカード見出し：元のベースを少しだけ小さく === */
.blog  article.custom-post-wrapper .custom-post-content .entry-header .entry-title,
.blog  article.custom-post-wrapper .custom-post-content .entry-header .entry-title a,
.archive article.custom-post-wrapper .custom-post-content .entry-header .entry-title,
.archive article.custom-post-wrapper .custom-post-content .entry-header .entry-title a{
  font-size: 0.985em;
  line-height: 1.35;
  letter-spacing: .01em;
}

@media (max-width: 544px){
  .blog  article.custom-post-wrapper .custom-post-content .entry-header .entry-title,
  .blog  article.custom-post-wrapper .custom-post-content .entry-header .entry-title a,
  .archive article.custom-post-wrapper .custom-post-content .entry-header .entry-title,
  .archive article.custom-post-wrapper .custom-post-content .entry-header .entry-title a{
    font-size: 0.99em; /* SPはほぼ据え置き */
  }
}


/* サイドバー内の“検索”を必ず先頭にする（ブロック/旧ウィジェット両対応） */
#secondary.widget-area { display: flex; flex-direction: column; }
#secondary.widget-area > .widget { order: 0; }

/* 旧ウィジェット形式（widget_search クラスが付く） */
#secondary.widget-area > .widget.widget_search { order: -100; }

/* ブロックウィジェット形式（wp-block-search を内包） */
#secondary.widget-area > .widget.widget_block:has(.wp-block-search) { order: -100; }

/* 余白調整（任意） */
#secondary.widget-area > .widget { margin-bottom: 20px; }


/* コメントフォームの下に出る前後ナビを、最後のフォームの後ろだけ表示する */
.comment-respond + .yn-nav { display: none; }                   /* まず全部隠す */
.comment-respond:last-of-type + .yn-nav { display: block; }     /* 一番下のフォームの後ろだけ表示 */

/* お好みで下側の余白を少し足す */
.comment-respond:last-of-type + .yn-nav { margin-top: 16px; }


/* Astra の既定のコピーライト／Powered by を隠す（ビルダー含む） */
.site-footer .ast-footer-copyright,
.site-footer .ast-theme-credit,
.site-footer .ast-powered-by,
.site-footer .site-info { display: none !important; }

/* 追加したコピーライトの見た目 */
.yn-bottom-copyright{
  text-align: center;
  padding: 14px 0;
  font-size: .95rem;
}
.yn-bottom-copyright .yn-footer-link{
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 4px 6px;         /* クリック領域を少し広く */
}
.yn-bottom-copyright .yn-footer-link:hover{
  text-decoration: underline;
}

/* Astra フッターがグリッド配置でも中央寄せを維持 */
.ast-builder-grid-row-container.ast-builder-grid-row { justify-content: center; }


/* お問い合わせフォームの見た目 */
.yncf-wrap { max-width: 720px; margin: 0 auto; }
.yncf-row { margin: 12px 0; }
.yncf-row label { display: block; font-weight: 600; margin-bottom: 6px; }
.yncf-row input[type="text"],
.yncf-row input[type="email"],
.yncf-row textarea {
  width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px;
}
.req { color: #c00; font-size: .85em; margin-left: 4px; }
.yncf-notice { padding: 10px 12px; border-radius: 8px; margin: 10px 0; }
.yncf-notice.success { background: #f0fff4; border: 1px solid #b8f0c2; }
.yncf-notice.error   { background: #fff5f5; border: 1px solid #ffc9c9; }
.yncf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.yncf-submit { margin-top: 6px; }


/* --- 「サイトについて」ページだけ文字サイズを抑える --- */
.page-id-588 .entry-content {
  max-width: 860px;          /* 読みやすい横幅に */
  margin: 0 auto;
  font-size: 16px;           /* 本文ベース */
  line-height: 1.8;
}

/* 見出しをコンパクトに（画面幅に応じて可変） */
.page-id-588 .entry-content h1 {
  font-size: clamp(26px, 4.5vw, 36px);
  margin: 1.2em 0 .6em;
}
.page-id-588 .entry-content h2 {
  font-size: clamp(20px, 3.5vw, 28px);
  margin: 1.6em 0 .6em;
}
.page-id-588 .entry-content h3 {
  font-size: clamp(18px, 3vw, 22px);
  margin: 1.2em 0 .4em;
}

/* 箇条書きの詰め／インデントを少しだけ */
.page-id-588 .entry-content ul,
.page-id-588 .entry-content ol {
  margin: .4em 0 1em 1.2em;
}
.page-id-588 .entry-content li {
  margin: .2em 0;
}

/* 小さめ要素の整え（コード/バッジ等） */
.page-id-588 .entry-content code { font-size: .95em; }


/* ================= YN: 単一記事ヘッダー（メタ＋タイトル）統一 ================= */
:root{
  /* 色はここだけ触れば全体に反映されます */
  --yn-title-base:  var(--ast-global-color-1, #0f172a); /* タイトル通常色（落ち着いた濃いグレー） */
  --yn-title-hover: var(--ast-global-color-0, #2563eb); /* タイトルのホバー色（アクセント） */
  --yn-muted:       var(--ast-global-color-3, #64748b); /* 日付/カテゴリ/PR のくすみ色 */
  --yn-accent:      var(--ast-global-color-0, #2563eb); /* 「コメントを見る」のリンク色 */
}

/* ── メタ行（日時・カテゴリ・PR・コメント） ───────────────────────── */
.single .yn-post-meta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.25rem .75rem;               /* メタ同士の間隔 */
  margin:.25rem 0 .45rem;
  font-size:.95rem; line-height:1.35;
  color:var(--yn-muted);
}

/* チップ/バッジ風の装飾はすべて無効化（テキスト表示に統一） */
.single .yn-post-meta .chip,
.single .yn-post-meta .yn-badge--pr,
.single .yn-post-meta .yn-cmt-link,
.single .yn-post-meta .yn-post-cats a{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* カテゴリ：横並び・適度な余白・落ち着いた色調 */
.single .yn-post-cats{ display:inline-flex; gap:.6rem; }
.single .yn-post-cats a{
  color:var(--yn-muted) !important;
  font-weight:400 !important;
  text-decoration:none !important;
}
.single .yn-post-cats a:hover{
  color:var(--yn-title-base) !important;
  text-decoration:underline !important;
}
/* もし区切り記号が出る環境なら非表示に */
.single .yn-post-cats .yn-sep,
.single .yn-post-meta .meta-separator,
.single .yn-post-meta .ast-separator,
.single .yn-post-meta .cat-links .ast-terms-separator{ display:none !important; }

/* PR：他メタと同じトーン・同サイズ（違和感をなくす） */
.single .yn-post-meta .yn-badge--pr{
  color:var(--yn-muted) !important;
  font-weight:400 !important;
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important;
  font-size:inherit !important; line-height:inherit !important;
  letter-spacing:0 !important;
}

/* コメントリンク：文字色のみでアクセント（背景なし） */
.single .yn-post-meta .yn-cmt-link{
  color:var(--yn-accent) !important;
  display:inline-flex; align-items:center; gap:.35rem;
  text-decoration:none !important;
}
.single .yn-post-meta .yn-cmt-link:hover{ text-decoration:underline !important; }
.single .yn-post-meta .yn-cmt-link svg{ width:1em; height:1em; fill:currentColor; opacity:.95; }

/* ── タイトル ─────────────────────────────────────── */
/* 小さめ＆落ち着いた色。ここで“常時の色”を決める */
.single .yn-post-title{
  font-size: clamp(1.00rem, 0.55vw + 0.90rem, 1.30rem) !important; /* 約16–21px */
  line-height: 1.28 !important;
  margin: .2rem 0 .55rem !important;
  font-weight: 600 !important;
  color: var(--yn-title-base) !important;
}

/* 通常＆既読：落ち着いた色／下線なし（!importantで固定） */
html body.single article .yn-post-title > a:link,
html body.single article .yn-post-title > a:visited{
  color: var(--yn-title-base) !important;
  text-decoration: none !important;
}

/* ホバー/フォーカス時だけ色変更（下線は出さない） */
html body.single article .yn-post-title > a:hover,
html body.single article .yn-post-title > a:focus,
html body.single article .yn-post-title > a:active{
  color: var(--yn-title-hover) !important;
  text-decoration: none !important;
}

/* ===== 単一記事タイトル：通常は落ち着いた色、ホバーで“ピンク”に ===== */
/* Astraのリンクホバー色があればそれを使い、なければ #ec4899(ピンク) を使う */
:root{
  --yn-title-base-fixed:  #334155;                               /* 通常：落ち着いた濃グレー */
  --yn-title-hover-fixed: var(--ast-link-hover-color, #ec4899);  /* ホバー：他と同じピンク */
}

/* タイトルサイズもさらに控えめに */
html body.single.single-post article[id^="post-"] h1.yn-post-title{
  font-size: clamp(0.95rem, 0.55vw + 0.88rem, 1.22rem) !important; /* ≒ 15–19px */
  line-height: 1.28 !important;
  margin: .2rem 0 .55rem !important;
  font-weight: 600 !important;
  color: var(--yn-title-base-fixed) !important;  /* 見出し自体の色も落ち着かせる */
}

/* 通常（link/visited）は落ち着いた色・下線なし */
html body.single.single-post article[id^="post-"] h1.yn-post-title > a:link,
html body.single.single-post article[id^="post-"] h1.yn-post-title > a:visited{
  color: var(--yn-title-base-fixed) !important;
  text-decoration: none !important;
}

/* ホバー/フォーカス時だけ “ピンク” に（下線は出さない）*/
html body.single.single-post article[id^="post-"] h1.yn-post-title > a:hover,
html body.single.single-post article[id^="post-"] h1.yn-post-title > a:focus,
html body.single.single-post article[id^="post-"] h1.yn-post-title > a:active{
  color: var(--yn-title-hover-fixed) !important;
  text-decoration: none !important;
}

/* 3) 通常色をほんの少し明るく（読みやすく） */
:root{ --yn-title-base-fixed: #374151; }  /* Slate-700くらい */

/* 5) 「コメントを見る」の色を少し優しめに、ホバーでピンク */
.single .yn-post-meta .yn-cmt-link{
  color: var(--ast-global-color-2, #475569) !important;
}
.single .yn-post-meta .yn-cmt-link:hover{
  color: var(--yn-title-hover-fixed, #e879f9) !important;
  text-decoration: none !important;
}

/* コンテナ */
.yn-ranks{margin:1rem 0}

/* 見出し */
.rank-head{display:flex;align-items:baseline;gap:.5rem;margin:.25rem 0 .6rem}
.rank-head h2{margin:0;font-size:1.05rem}
.chip-pr{font-size:.75rem;font-weight:700;color:#64748b;opacity:.9}

/* PC並び */
.yn-ranks__grid{display:grid;gap:1.25rem}
@media (min-width: 1024px){
  .yn-ranks__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width: 1280px){
  .yn-ranks__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* スロットのはみ出し防止 */
.rank-slot{max-width:100%;overflow:hidden}

/* スマホセレクタ（PCでは非表示） */
.yn-ranks__switch{
  display:none;position:sticky;top:0;z-index:2;
  background:var(--ast-global-color-background,#fff);
  border:1px solid rgba(2,6,23,.08);
  padding:.55rem .7rem; border-radius:.75rem; margin-bottom:.75rem;
  gap:.6rem; align-items:center;
}
.yn-ranks__switch label{font-size:.9rem;color:#475569}
.yn-ranks__switch select{
  flex:1; padding:.4rem .6rem; border:1px solid rgba(2,6,23,.15);
  border-radius:.6rem; background:#fff; font-size:.95rem;
}

/* スマホ：選択中だけ表示、セレクタを表示 */
@media (max-width: 680px){
  .yn-ranks__switch{display:flex}
  .yn-ranks__grid .rank-wrap{display:none}
  .yn-ranks__grid .rank-wrap.is-active{display:block}
}



/* ===== よるのつき：もっと見る/閉じる（最終版レイアウト） ===== */

/* タグクラウド本体：横並び */
.yn-cloud{
  display: flex; flex-wrap: wrap;
  gap: .25rem .5rem;
}
.yn-cloud a.tag-cloud-link{ display:inline-block; }

/* タームリスト本体：横並び（UL/LI） */
.yn-termlist{
  display:flex; flex-wrap:wrap;
  gap:.25rem .75rem;
  margin:0; padding:0; list-style:none;
}
.yn-termlist > li{ margin:0; }

/* 改行強制シム（バックアップ用。インラインstyleでも折り返すが一応CSSでも定義） */
.yn-break{ flex-basis:100%; width:100%; display:block; height:0; }

/* 「もっと見る」を必ず改行・独立行に（両タイプ対応） */
.yn-cloud .yn-more-inline{
  flex-basis:100%;
  width:100%;
  display:block;
  margin-top:.4rem;
}
.yn-termlist > .yn-more-li{
  flex-basis:100%;
  width:100%;
  list-style:none;
  margin-top:.4rem;
}

/* 展開後の残りを同じトーンで横並びに */
.yn-rest{
  display:flex; flex-wrap:wrap;
  gap:.25rem .5rem;
  margin:.35rem 0 0 0;
}
.yn-termlist .yn-rest{
  list-style:none; padding:0; margin-left:0;
  gap:.25rem .75rem; /* term-listは少し広め */
}

/* もっと見る（小さめリンク風） — 色はヘッダーCSSが!importantで適用済み */
.yn-more-inline > summary.yn-open-btn{
  all:unset;
  display:inline-flex; align-items:center; gap:.25rem;
  cursor:pointer; font-weight:500; font-size:.88rem; line-height:1.2;
  text-underline-offset:.16em;
}
.yn-more-inline > summary.yn-open-btn::after{
  content:"▾"; font-size:.85em; opacity:.6;
}
/* 開いたらsummaryは必ず隠す（競合対策はヘッダー側にも） */
.yn-more-inline[open] > summary.yn-open-btn{ display:none !important; }

/* 閉じるは必ず改行して最下段に（tag-cloud/term-list両対応） */
.yn-close-wrap, .yn-close-li{
  flex-basis:100%;
  display:flex; justify-content:flex-start;
  margin-top:.4rem; padding-left:0; list-style:none;
}

/* 閉じる（小さめリンク風） — 色はヘッダーCSSが!importantで適用済み */
.yn-close-bottom{
  all:unset;
  display:inline-flex; align-items:center; gap:.25rem;
  cursor:pointer; font-weight:500; font-size:.86rem; line-height:1.2;
  text-underline-offset:.16em;
}
.yn-close-bottom::before{
  content:"⌃"; font-size:.82em; opacity:.6;
}


/* --- 販売日まわりの崩れ対策（最小修正） --- */
.custom-post-content .entry-meta-container{ 
  display:block;               /* グリッド計算を乱さない */
  width:100%;
}

.entry-meta-container .posted-on{
  display:inline-flex;         /* ラベルとバッジを横並び */
  align-items:center;
  gap:.4rem;
  vertical-align:middle;
  max-width:100%;
  /* Astra の flex レイアウトに飲み込まれないように */
  flex:0 0 auto;
}

.entry-meta-container .posted-on a{
  display:inline-flex;         /* バッジを行内要素に */
  align-items:center;
  text-decoration:none;
  line-height:1;
  padding:.35em .6em;
  border-radius:999px;
  background:rgba(2,6,23,.06);
  border:1px solid rgba(2,6,23,.10);
}

/* もしタグ群(.post-tags-container 等)が横に回り込むテーマなら保険でクリア */
.entry-meta-container::after{ content:""; display:block; clear:both; }

/* 販売日リンクの見た目は元の行レイアウトのまま軽く強調 */
.posted-on .yn-date-link{
  font-weight:700;
  text-decoration:none;
  color:var(--yn-meta-link, #355cff);
}
.posted-on .yn-date-link:hover{
  text-decoration:underline;
  color:var(--yn-meta-link-h, #7c5cff);
}


/* ===== タイトルの折り返し制御 ===== */

/* 販売日ページのタイトル */
.archive .page-header .page-title {
  font-size: 1.6rem;         /* 少し小さめ */
  white-space: nowrap;       /* 折り返さない */
  overflow: hidden;          /* はみ出すときは隠す */
  text-overflow: ellipsis;   /* 長いときは「…」で省略 */
  line-height: 1.4;
  margin-bottom: 0.5em;
}

/* 一覧や記事内のタイトル */
.entry-title, .entry-title a {
  word-break: normal !important;      /* 強制改行を無効化 */
  overflow-wrap: normal !important;   /* 自然な改行だけにする */
  white-space: normal;                /* 通常の折り返し */
}

/* 販売日アーカイブだけで、タイトルの折り返しを自然にする（レイアウトは変更しない） */
.yn-release :is(h1,h2,h3).entry-title,
.yn-release :is(h1,h2,h3).entry-title *,
body.is-release-archive :is(h1,h2,h3).entry-title,
body.is-release-archive :is(h1,h2,h3).entry-title * {
  /* Astra が当ててくる break-word / anywhere / break-all を打ち消す */
  word-break: normal !important;        /* 日本語を1文字単位で切らない */
  overflow-wrap: break-word !important; /* 英単語だけ必要時に折る */
  word-wrap: normal !important;
  white-space: normal !important;
  hyphens: manual !important;
  line-break: loose !important;         /* 句読点禁則をやや緩める */
  text-wrap: balance;                   /* 新ブラウザで行バランスを最適化 */
}

/* 1) タイトルの横幅制限を完全解除（Astraの max-width / inline-block を打ち消す） */
body.is-release-archive .ast-article-post .entry-header .entry-title,
body.is-release-archive .ast-article-post .entry-header .entry-title a {
  display: block !important;
  max-width: none !important;
  width: auto !important;
  word-break: normal !important;        /* 途中切りをやめる */
  overflow-wrap: break-word !important; /* 英単語だけ折る */
  white-space: normal !important;
  line-break: loose !important;
}

/* 2) 販売日ブロックを “タイトルの下” の1行に落とす（横並びさせない） */
body.is-release-archive .ast-article-post .entry-meta-container {
  float: none !important;               /* 右寄せの回り込みを解除 */
  clear: both !important;               /* 前の行から改行させる */
  display: block !important;
  width: 100% !important;
  margin-top: .35rem !important;
}

/* 3) 親が flex の場合に備えて、子を改行できるようにしておく（wrap を許可） */
body.is-release-archive .ast-article-post .custom-post-content {
  flex-wrap: wrap !important;           /* 親が flex でない場合は無害 */
}


/* 販売日アーカイブで、Astraの 50% 幅(.ast-width-md-6)を解除して
   タイトルブロックを横いっぱいに広げる */
body.is-release-archive .post-content.ast-width-md-6 {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100% !important;   /* 親が flex の場合でも広がるように */
}

/* 念のため、タイトル自身の幅制限も外して自然な折返しに */
body.is-release-archive .entry-header .entry-title,
body.is-release-archive .entry-header .entry-title a{
  display: block !important;
  max-width: none !important;
  width: auto !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  line-break: loose !important;
}


/* ================================
   よるのつき：販売日アーカイブ専用まとめCSS
   影響範囲：body.is-release-archive のときだけ
   ================================ */

/* ───────── タイトル折り返し（自然に） ───────── */
body.is-release-archive .entry-header .entry-title,
body.is-release-archive .entry-header .entry-title a {
  display: block !important;
  max-width: none !important;
  width: auto !important;
  /* 日本語を1文字で切らない・英単語のみ必要時に折る */
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  line-break: strict !important;
  text-wrap: pretty; /* 新しめのブラウザでより自然に */
  line-height: 1.35;
}

/* Astraの「幅50%列」などでタイトル側が狭くなるのを解除 */
body.is-release-archive .post-content.ast-width-md-6 {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100% !important;
}

/* ───────── カード枠（ホームと同系） ───────── */
body.is-release-archive .site-main .ast-article-post,
body.is-release-archive .site-main .ast-article-post > .ast-article-inner {
  background: #fff !important;
  border: 1px solid rgba(2, 6, 23, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  padding: 16px 18px !important;
  margin: 0 0 28px !important;
  transition: box-shadow .2s ease, transform .2s ease;
}

/* ホバー時の軽い浮き上がり */
body.is-release-archive .site-main .ast-article-post:hover,
body.is-release-archive .site-main .ast-article-post > .ast-article-inner:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;
}

/* サムネ画像の角丸をカードと馴染ませる */
body.is-release-archive .custom-post-thumbnail img {
  display: block;
  border-radius: 8px !important;
}

/* ───────── カード内の余白と段組の安定化 ───────── */
body.is-release-archive .entry-header { 
  margin-bottom: .5rem !important; 
}

body.is-release-archive .entry-meta-container {
  display: block !important;
  width: 100% !important;
  margin: .35rem 0 .25rem !important;
  clear: both !important; /* サムネ直下メタ等が食い込まない保険 */
}

body.is-release-archive .post-tags-container { 
  margin-top: .4rem !important; 
}

/* ───────── 「販売日：◯◯◯◯年◯◯月◯◯日」をテキスト化 ─────────
   （ボタン風の背景/枠/角丸/色をすべて剥がして薄グレーに固定） */
body.is-release-archive .entry-meta-container .posted-on a,
body.is-release-archive .entry-meta .posted-on a,
body.is-release-archive .entry-meta-container .posted-on a.yn-badge,
body.is-release-archive .entry-meta-container .posted-on a.yn-badge-date,
body.is-release-archive .posted-on .yn-date-link {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  color: #666 !important;          /* 薄いグレー */
  text-decoration: none !important;
  line-height: 1.4 !important;
}

/* hover時も色・下線を変えない */
body.is-release-archive .entry-meta-container .posted-on a:hover,
body.is-release-archive .posted-on .yn-date-link:hover {
  color: #666 !important;
  text-decoration: none !important;
}

/* 万一 .yn-badge 系の内側スタイルが強い時の保険 */
body.is-release-archive .entry-meta-container .posted-on a.yn-badge *,
body.is-release-archive .entry-meta-container .posted-on a.yn-badge-date * {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ───────── 一覧見出し（ページタイトル）の調整 ─────────
   ※必要なら。大見出しを大きすぎないサイズにして自然な1行〜複数行に */
body.is-release-archive .page-header .page-title{
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.4;
  margin-bottom: .6rem;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ================================
   ホーム/一覧ページ：日付をテキスト（薄グレー）に統一
   影響範囲：ホーム・ブログトップ・各種アーカイブ・検索結果
   ================================ */
body.home .entry-meta .posted-on a,
body.blog .entry-meta .posted-on a,
body.archive .entry-meta .posted-on a,
body.search .entry-meta .posted-on a,
body.paged .entry-meta .posted-on a,
body.home .posted-on .yn-date-link,
body.blog .posted-on .yn-date-link,
body.archive .posted-on .yn-date-link,
body.search .posted-on .yn-date-link,
body.paged .posted-on .yn-date-link,
body.home .entry-meta .posted-on a.yn-badge,
body.blog .entry-meta .posted-on a.yn-badge,
body.archive .entry-meta .posted-on a.yn-badge,
body.search .entry-meta .posted-on a.yn-badge,
body.paged .entry-meta .posted-on a.yn-badge,
body.home .entry-meta .posted-on a.yn-badge-date,
body.blog .entry-meta .posted-on a.yn-badge-date,
body.archive .entry-meta .posted-on a.yn-badge-date,
body.search .entry-meta .posted-on a.yn-badge-date,
body.paged .entry-meta .posted-on a.yn-badge-date {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  color: #666 !important;             /* 薄いグレー */
  text-decoration: none !important;
  line-height: 1.4 !important;
}

/* hoverでも色/下線を変えない */
body.home   .entry-meta .posted-on a:hover,
body.blog   .entry-meta .posted-on a:hover,
body.archive.entry .entry-meta .posted-on a:hover,
body.archive .entry-meta .posted-on a:hover,
body.search .entry-meta .posted-on a:hover,
body.paged  .entry-meta .posted-on a:hover,
body.home   .posted-on .yn-date-link:hover,
body.blog   .posted-on .yn-date-link:hover,
body.archive .posted-on .yn-date-link:hover,
body.search .posted-on .yn-date-link:hover,
body.paged  .posted-on .yn-date-link:hover {
  color: #666 !important;
  text-decoration: none !important;
}

/* 万一 .yn-badge 内部の装飾が残る場合の保険 */
body.home .entry-meta .posted-on a.yn-badge *,
body.blog .entry-meta .posted-on a.yn-badge *,
body.archive .entry-meta .posted-on a.yn-badge *,
body.search .entry-meta .posted-on a.yn-badge *,
body.paged .entry-meta .posted-on a.yn-badge *,
body.home .entry-meta .posted-on a.yn-badge-date *,
body.blog .entry-meta .posted-on a.yn-badge-date *,
body.archive .entry-meta .posted-on a.yn-badge-date *,
body.search .entry-meta .posted-on a.yn-badge-date *,
body.paged .entry-meta .posted-on a.yn-badge-date * {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* お気に入り一覧（[yn_favorites]）内だけ、ラベルを非表示にして★だけにする */
#yn-favs-root .yn-fav-inline .label { display: none; }

/* 文字が消えた分、ボタンの横幅を少し詰める・星を少し大きくする（お好みで） */
#yn-favs-root .yn-fav-inline { padding: .32rem .48rem; gap: .25rem; }
#yn-favs-root .yn-fav-inline .star { font-size: 1rem; }  /* 大きさはお好みで 0.95〜1.1rem */


.yn-pager{display:flex;gap:.5rem;justify-content:center;align-items:center;margin:28px 0}
.yn-pager .yn-page{
  display:inline-flex;min-width:38px;height:38px;padding:0 .9rem;
  border:1px solid rgba(2,6,23,.12);border-radius:10px;
  align-items:center;justify-content:center;font-weight:700;
  color:#0f172a;background:#fff;text-decoration:none;transition:.15s;
}
.yn-pager .yn-page:hover{background:#f8fafc;border-color:#cbd5e1}
.yn-pager .yn-page.nav{min-width:auto;padding:0 .9rem}
.yn-pager .yn-page.is-disabled{opacity:.45;pointer-events:none}
.yn-pager .yn-page.is-current{
  background:#0f172a;color:#fff;border-color:#0f172a;pointer-events:none
}
.yn-pager .yn-ellipsis{padding:0 .25rem;color:#64748b;user-select:none}


.yn-favs-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:.75rem; margin:8px 0 12px;
}
.yn-favs-actions{ display:flex; gap:.5rem; }
.yn-favs-count{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border:1px solid #e2e8f0; background:#f8fafc;
  border-radius:9999px; font-weight:700; font-size:.9rem; color:#0f172a;
}
@media (max-width:480px){
  .yn-favs-count{ font-size:.82rem; }
}


/* ▼ ロゴ左端合わせ：コンテナ左端＋ロゴ側の左パディング分を“帯の左padding”で再現 */
:root{
  /* ロゴ側の左パディング量：24px前後が多い。ここだけ1～2px刻みで微調整 */
  --yn-left-pad: 1.5rem; /* = 約24px。合わなければ 1.375rem(22px) / 1.625rem(26px) などに調整 */
}

.yn-site-intro{
  background:#0f172a;
  color:rgba(255,255,255,.92);
  font-size:.85rem;
  line-height:1.5;
  font-weight:500;
  /* 上下は薄め。右は少し逃がし。左は“中央→コンテナ左端”+“ロゴの左padding”を計算で付与 */
  padding: .55em 1rem .55em
           calc((100vw - var(--ast-container-width, 1200px)) / 2 + var(--yn-left-pad)) !important;
  text-align:left;
}

/* スマホは読みやすさ優先で通常余白に戻す */
@media (max-width: 768px){
  .yn-site-intro{
    padding: .5em var(--ast-container-padding, 1rem) !important;
  }
}


/* コメント数（シンプル・淡いピンク・少し大きめ） */
.yn-comment-chip {
  display:inline-flex;
  align-items:center;
  gap:.3em;
  margin-left:.55em;
  font-size:.9rem;          /* ← 少し大きめに */
  line-height:1.3;
  font-weight:600;
  color:#64748b;   /* slate-500 */
  text-decoration:none;
  vertical-align:middle;
}
.yn-comment-chip:hover {
  color:#3b82f6;   /* blue-500 */

}

.yn-comment-chip__icon {
  width:16px;               /* アイコンも少し拡大 */
  height:16px;
}

.yn-comment-chip__num {
  font-weight:700;
}



/* === 11位以降（小カード）の余白を詰める＆タイトルを確実に2行で省略 === */

/* 高さが内容にフィットするように（伸びすぎ防止） */
.yn-ranking .grid-small .yn-cell{ height:auto !important; }
.yn-ranking .grid-small .yn-card{ height:auto !important; }

/* 11位〜の番号行：薄く＆低く */
.yn-ranking .grid-small .yn-rankrow{
  height:16px !important;
  margin:0 0 4px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.yn-ranking .grid-small .yn-rankrow span{
  color:#0f172a !important;   /* 黒 */
  font-weight:800 !important;
  font-size:.8rem !important;
}

/* サムネ周りの余白をゼロに（画像下の謎の隙間対策） */
.yn-ranking .grid-small .yn-thumb{ line-height:0 !important; }
.yn-ranking .grid-small .yn-thumb img{
  display:block !important;
  width:100% !important;
  aspect-ratio:1/1 !important;   /* 正方形 */
  object-fit:cover !important;
}

/* タイトル：必ず2行で省略＆はみ出し防止（paddingは外してmargin上に） */
.yn-ranking .grid-small .yn-title{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.35 !important;
  height:calc(1.35em * 2) !important;
  margin:.35rem .45rem 0 .45rem !important;
  padding:0 !important;
  font-size:.78rem !important;
  overflow-wrap:anywhere !important;
}

/* WPの自動 <p> による余白混入を無効化（安全側） */
.yn-ranking p{ margin:0 !important; }
.yn-ranking .grid-small > p{ display:contents !important; }

/* 列数レスポンシブ（必要ならそのまま） */
@media (max-width: 1200px){ .yn-ranking .grid-small{ grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 900px) { .yn-ranking .grid-small{ grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .yn-ranking .grid-small{ grid-template-columns: repeat(2, 1fr) !important; } }


/* ===== 1〜10位の見た目の微調整 ===== */

/* 画像下の“謎の余白”を消して、画像とタイトルの間を詰める（1〜10位） */
.yn-ranking .grid-top3 .yn-thumb,
.yn-ranking .grid-mid7 .yn-thumb{
  line-height:0 !important;
}
.yn-ranking .grid-top3 .yn-thumb img,
.yn-ranking .grid-mid7 .yn-thumb img{
  display:block !important;
}

/* 1〜3位（lg） ランクバーをほんの少しだけ高く */
.yn-ranking .yn-card.lg .yn-rankbar{
  height:30px !important;          /* ← 以前より+6pxほど */
  font-size:1rem !important;
}

/* 4〜10位（md） ランクバーも少しだけ高く */
.yn-ranking .yn-card.md .yn-rankbar{
  height:26px !important;          /* ← 以前より+6pxほど */
  font-size:.95rem !important;
}

/* 1〜3位（lg）のタイトル：文字を少し小さく、2行枠を広げ、隙間を詰める */
.yn-ranking .grid-top3 .yn-title{
  /* 2行省略は維持 */
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  /* 行高＝枠の基準 */
  line-height:1.32 !important;
  height:calc(1.32em * 2) !important;      /* ← 2行分を確保（枠を少し広げる） */

  /* 文字サイズをほんの少しだけ小さく */
  font-size:.95rem !important;             /* もともと ≈1.05rem */

  /* 画像との隙間を詰める。左右は気持ち広めで読みやすく */
  margin:.35rem .8rem .55rem .8rem !important;
  padding:0 !important;
  overflow-wrap:anywhere !important;
}

/* 4〜10位（md）のタイトル：同様に調整 */
.yn-ranking .grid-mid7 .yn-title{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  line-height:1.32 !important;
  height:calc(1.32em * 2) !important;

  font-size:.88rem !important;             /* もともと ≈.95rem */

  margin:.32rem .65rem .5rem .65rem !important;
  padding:0 !important;
  overflow-wrap:anywhere !important;
}

/* 念のため：1〜10位のカードを高さオートに（内側の枠拡張に追従） */
.yn-ranking .grid-top3 .yn-card,
.yn-ranking .grid-mid7 .yn-card{
  height:auto !important;
}

/* 4〜10位のランクバーをもっと薄いグレーに（テキストは黒） */
.yn-ranking .yn-card.md .yn-rankbar{
  background-color: #C2C2C2 !important;   /* 明るいグレー */
  color:#0f172a !important;         /* 黒に近い濃いめの文字色 */
}

/* “もっと見る” を小さく上品に（丸 pill ボタン） */
.yn-ranking details.yn-more{
  margin-top:14px !important;
  text-align:center;
}
.yn-ranking details.yn-more > summary{
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
  font-size:.85rem !important;
  padding:.35rem .75rem !important;           /* 小ぶりに */
  border-radius:9999px !important;
  border:1px solid rgba(2,6,23,.12) !important;
  background:#f8fafc !important;
  color:#0f172a !important;
  box-shadow:0 1px 2px rgba(2,6,23,.04) !important;
  transition:background .15s ease, transform .15s ease !important;
}
.yn-ranking details.yn-more > summary:hover{
  background:#eef2f7 !important;
  transform:translateY(-1px) !important;
}
/* 既存の「（閉じる）」文言はそのまま活かしつつアイコンを追加 */
.yn-ranking details.yn-more > summary::before{
  content:"▸";
  font-size:.9em;
  transform:translateY(1px);
}
.yn-ranking details.yn-more[open] > summary::before{
  content:"▾";
}

/* ── ランク帯と画像の重なり解消（画像を帯の高さぶん下げる） ── */
.yn-ranking .yn-card.lg,
.yn-ranking .yn-card.md { position: relative; overflow: hidden; }

/* ランク帯の高さ（お好みで微調整OK） */
.yn-ranking .yn-card.lg .yn-rankbar { height: 32px !important; }
.yn-ranking .yn-card.md .yn-rankbar { height: 26px !important; }

/* サムネ開始位置をランク帯ぶん下げる */
.yn-ranking .yn-card.lg .yn-thumb { margin-top: 32px !important; }
.yn-ranking .yn-card.md .yn-thumb { margin-top: 26px !important; }

/* 画像はブロック化して隙間・ズレ防止 */
.yn-ranking .yn-thumb img { display:block; width:100%; height:auto; }

/* （ついでに）画像とタイトルの間を少し詰めるなら ↓ を有効化
.yn-ranking .yn-card.lg .yn-title { padding-top:.5rem !important; }
.yn-ranking .yn-card.md .yn-title { padding-top:.45rem !important; }
*/

/* カードの作品タイトル（1〜以降すべて）を黒に */
.yn-ranking .yn-card .yn-title { color:#000 !important; }
.yn-ranking .yn-card:hover .yn-title { color:#000 !important; }
.yn-ranking .yn-card:visited .yn-title { color:#000 !important; }

/* 上の見出し（CSSで差し替えている場合も含む）を黒に */
.yn-ranking .yn-meta > div:first-child,
.yn-ranking .yn-meta > div:first-child::after { color:#000 !important; }

/* 4〜10位（mdカード）の順位番号を白文字に */
.yn-ranking .yn-card.md .yn-rankbar {
  color: #fff !important;
}


/* ==== フォーカス時の点線（outline）を全体で無効化 ==== */
:focus {
  outline: none !important;
}


/* ==== ランキングのレスポンシブ（inline style を上書き） ==== */

/* デフォルト（PC相当）— 念のため明示しておく */
.yn-ranking .grid-top3 { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:18px !important; }
.yn-ranking .grid-mid7 { display:grid !important; grid-template-columns:repeat(7,1fr) !important; gap:14px !important; }
.yn-ranking .grid-small { display:grid !important; grid-template-columns:repeat(10,minmax(0,1fr)) !important; gap:8px !important; }

/* タブレット (<=1024px) */
@media (max-width:1024px){
  .yn-ranking .grid-top3 { grid-template-columns:repeat(3,1fr) !important; gap:12px !important; }
  .yn-ranking .grid-mid7 { grid-template-columns:repeat(4,1fr) !important; gap:10px !important; } /* ← 7列→4列 */
  .yn-ranking .grid-small { grid-template-columns:repeat(6,1fr) !important; gap:6px !important; }  /* ← 10列→6列 */
}

/* スマホ横/小さめタブ (<=768px) */
@media (max-width:768px){
  .yn-ranking .grid-top3 { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; } /* 1位と2・3位で2列 */
  .yn-ranking .grid-mid7 { grid-template-columns:repeat(3,1fr) !important; gap:8px !important; }  /* ← 7列→3列 */
  .yn-ranking .grid-small { grid-template-columns:repeat(4,1fr) !important; gap:6px !important; } /* ← 10列→4列 */
}

/* スマホ縦 (<=480px) */
@media (max-width:480px){
  .yn-ranking .grid-top3 { grid-template-columns:1fr !important; gap:10px !important; }           /* 1〜3位は縦に1列 */
  .yn-ranking .grid-mid7 { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }  /* ← 7列→2列 */
  .yn-ranking .grid-small { grid-template-columns:repeat(3,1fr) !important; gap:6px !important; } /* ← 10列→3列 */

  /* タイトルを少しだけ小さくして2行収まりやすく */
  .yn-ranking .grid-top3 .yn-title { font-size:.9rem !important; }
  .yn-ranking .grid-mid7 .yn-title { font-size:.85rem !important; }
}


/* お願いウィジェットはスクロールアンカー無効化して揺れ防止 */
.yn-og-wrap { overflow-anchor: none; }


.yn-dmm-card{
  background:#fff;
  border:1px solid rgba(2,6,23,.10);
  border-radius:12px;
  padding:.5rem;
  box-shadow:0 1px 2px rgba(2,6,23,.04);
}
.yn-dmm-card img{ display:block; width:100%; height:auto; border-radius:8px; }
.yn-dmm-under-pager{ margin-top:12px; }
.sidebar-main .yn-dmm-card{ margin-bottom:16px; }