…
--------------------------------------------------------------------------- */
/* サムネ左・本文右の横並び。Cocoonのカードタイプ設定に依存しないよう明示する。
`align-items: stretch` にしているのは、**サムネの高さをテキスト側に合わせる**ため。
固定比率で置くと、テキストが2〜3行のときにサムネの上下だけ余白が余って見える
（2026-07-28の実機で発生）。 */
.entry-card-wrap .entry-card,
.entry-card-wrap .e-card {
display: flex;
align-items: stretch;
gap: 0.75em; /* スマホでテキストの幅を稼ぐため0.9em→0.75em（2026-07-28） */
}
/* **`!important` を付けている理由**（2026-07-28の実機で確認）
Cocoonは横型カードを「サムネを左に絶対配置し、本文に `margin-left: 330px` を空ける」
という組み方で作っており、`.entry-card-thumb { width: 320px }` とセットで効いている。
こちらはflexで組み替えるので、その2つが残っていると
- サムネが指定幅にならない
- テキストがカードの右端へ押し出される（実測：サムネ右端から344px空く）
という壊れ方をする。詳細度を上げるだけでは競合が読みにくいため、
**この2プロパティに限って**強制する。他の箇所では使わないこと。 */
/* **枠の比率は元画像（1200×630）に合わせる。**
カードの高さに合わせて縦に伸ばすと、横長の絵が左右から切られて
文字が読めなくなる（2026-07-28の実機で発生）。絵を切らないことを優先し、
高さはテキスト側に合わせず、上下中央に置く。 */
.entry-card-wrap .entry-card .entry-card-thumb,
.entry-card-wrap .e-card .entry-card-thumb {
display: block;
float: none;
flex: none;
width: 116px !important; /* 130px→116px（2026-07-28）。テキスト側を約20px広げる */
max-width: 116px !important;
margin: 0;
border-radius: 10px;
overflow: hidden;
align-self: center; /* 上下中央＝画像の上下の余白が対称になる */
aspect-ratio: 1200 / 630; /* 元画像と同じ比率。ここで切り取りが起きない */
min-height: 0;
background: var(--ren-accent-weak);
}
/* タブレット（768〜1023px）。**PCと同じくgridで組む。**
ここをflexのままにすると、`aspect-ratio`のせいで幅指定が効かずスマホと同じ116pxに
なる（2026-07-29に実測して判明。旧`width: 190px !important`は無視されていた）。 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.entry-card-wrap .entry-card,
.entry-card-wrap .e-card {
display: grid;
grid-template-columns: 190px 1fr;
gap: 1em;
align-items: center;
}
.entry-card-wrap .entry-card .entry-card-thumb,
.entry-card-wrap .e-card .entry-card-thumb {
width: auto !important;
max-width: none !important;
height: auto !important;
aspect-ratio: 1200 / 630;
}
}
/* テキスト側。min-width:0 がないと、長いタイトルでflexが破綻して横に溢れる。 */
.entry-card-wrap .entry-card .entry-card-content,
.entry-card-wrap .e-card .entry-card-content {
flex: 1 1 auto;
min-width: 0;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.entry-card-thumb img,
.entry-card-thumb .card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
/* アイキャッチ未設定の記事には、Cocoonが `no-image` の代替画像を出す。
それは紙面に合わないので、その場合だけ枠ごと畳んでテキストのカードにする。 */
.entry-card-thumb:has(.no-image) { display: none; }
/* Cocoonはサムネの左上に**黒いカテゴリラベル**（.cat-label）を重ねる。
小さいサムネの上に載ると絵を隠すうえ、色もこの配色に合わない（実機で「未分類」の
黒箱が画像を潰していた）。ここでは消して、カテゴリはテキスト側の
`.entry-category`（ピル型・ペール緑）だけで見せる。 */
.entry-card-thumb .cat-label,
.card-thumb .cat-label,
.entry-card-thumb .entry-category { display: none; }
/* カードの余白と角丸（2026-07-28 実機で詰めた）。
スマホでは padding 1em＋角丸16px だと、枠が主張するわりに中身の入る幅が足りず、
タイトルが4行に折り返していた。**枠を細く・角を小さく・中身を広く**にする。 */
.entry-card-wrap {
display: block;
background: var(--ren-surface);
border: 1px solid var(--ren-border);
border-radius: var(--ren-radius-sm);
padding: 0.8em 0.85em 0.7em;
margin-bottom: 0.6em;
transition: border-color 0.15s ease;
}
@media screen and (min-width: 768px) {
/* PCは横幅に余裕があるので、従来どおりゆったり見せる */
.entry-card-wrap {
border-radius: var(--ren-radius);
padding: 0.95em 1em 0.85em;
}
}
.entry-card-wrap:hover {
background: var(--ren-surface);
border-color: var(--ren-accent-soft);
}
.entry-card-wrap:focus-visible {
outline: 2px solid var(--ren-accent);
outline-offset: 2px;
}
/* 一覧のタイトルは**3行で切る**（2026-07-28 実機で修正）。
スマホでタイトルが4行に折り返し、テキスト側だけが縦に伸びてサムネとの釣り合いが
崩れていた（西森さん指摘「画像と文字と枠のバランスが悪い」）。
行間も本文ほど空けない——一覧の見出しは読み流す対象で、1.75だと間延びする。 */
.entry-card-title {
font-family: var(--ren-font-round);
font-size: 0.95em;
line-height: 1.55;
font-weight: 700;
color: var(--ren-ink);
margin: 0 0 0.4em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* 抜粋は「この記事が想定している読者」の1行として使う（記事側の書き出しと同じ文字列）。
2行で切る。3行以上出すと、どの記事も同じ長さに見えて選べなくなる。 */
.entry-card-snippet {
font-size: 0.8em;
line-height: 1.8;
color: var(--ren-muted);
margin: 0 0 0.5em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* Cocoonがスマホで抜粋を消す指定（.no-sp-snippet .entry-card-snippet）に負けないよう
詳細度を合わせる。MMA Watch側で同じ問題が起きている（適用メモ⓪-1-2）。 */
.no-sp-snippet .entry-card-snippet { display: -webkit-box; }
/* カテゴリ＝クラスター名。ピル型のラベルにして、束の切り替わりを見せる。 */
.entry-card-categorys .entry-category,
.entry-category {
font-family: var(--ren-font-round);
display: inline-block;
background: var(--ren-accent-weak);
color: var(--ren-accent);
font-size: 0.72em;
font-weight: 700;
padding: 0.25em 0.9em;
border-radius: var(--ren-radius-pill);
border: none;
margin-bottom: 0.5em;
}
/* ---------------------------------------------------------------------------
13. 日付の扱い（2026-07-28 西森さん決定）
- **所要時間（約7分）は出さない**……文字数からの機械計算で、出所として弱いため
- **公開日は出さない**……確認日と2つ並ぶと、どちらを見ればいいか分からなくなる
- **確認日は残す**……「確認した日を書いています」がこのサイトの芯（プロフィール文）
Cocoonが出す投稿日・更新日はここで畳む。確認日は記事本文の `.ren-meta` に出る。
※一覧カードにも確認日を出すには生成側の対応が要る（下の「未対応」を参照）。
--------------------------------------------------------------------------- */
.entry-card-meta .post-date,
.entry-card-meta .post-update,
.entry-card-info .post-date,
.entry-card-info .post-update,
.entry-card-wrap .date-tags {
display: none;
}
/* 記事ページ側も同様（本文の .ren-meta にある確認日だけを見せる） */
.article .post-date,
.article .post-update,
.date-tags .post-date,
.date-tags .post-update {
display: none;
}
/* ---------------------------------------------------------------------------
14. トップページのパーツ ※HTMLの生成は未実装
トップは `_ルール\トップページ構成.md` の並び（悩みへの共感 → 悩みから探す →
今の状態から探す → 無料・身近な相談 → 利用前の確認 → サービス情報 → 方針）で組む。
ピラー記事（who-to-consult）は**他のカードと同じ見た目にしない**——「まず読む記事」
であることが階層の説明になるため。
下のクラスは、生成側（build_home.py 相当）が対応したときに効く。
**現状の build_home.py は SITE_ID = "kakutogi" を直に持っており、renai では使えない**
（2026-07-28に確認。--site 引数はあるが、モジュール定数の ARTICLES_DIR が
kakutogi 固定のまま）。トップを組むときはここから直すこと。
--------------------------------------------------------------------------- */
.ren-pillar {
background: var(--ren-surface);
border: 2px solid var(--ren-accent-weak);
border-radius: var(--ren-radius-lg);
padding: 1.1em 1.1em 1em;
margin: 0 0 1.6em;
}
.ren-pillar__label {
display: inline-block;
font-family: var(--ren-font-round);
font-size: 0.72em;
font-weight: 700;
color: var(--ren-surface);
background: var(--ren-accent);
padding: 0.25em 0.9em;
border-radius: var(--ren-radius-pill);
margin: 0 0 0.7em;
}
.ren-pillar__title {
font-family: var(--ren-font-round);
font-size: 1.05em;
line-height: 1.7;
font-weight: 700;
margin: 0 0 0.5em;
}
.ren-pillar__desc {
margin: 0 0 0.7em;
font-size: 0.85em;
line-height: 1.9;
color: var(--ren-muted);
}
/* クラスター見出し。左のドットだけ明度を3段に振る。**色だけに意味を持たせない**
（束の名前が文字で出るので、色覚特性や暗所でも情報は落ちない）。 */
.ren-cluster__name {
font-family: var(--ren-font-round);
display: flex;
align-items: center;
gap: 0.6em;
font-size: 0.85em;
font-weight: 700;
color: var(--ren-accent);
background: var(--ren-accent-weak);
border-radius: var(--ren-radius-pill);
padding: 0.45em 1em;
margin: 0 0 0.7em;
}
.ren-cluster__name::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ren-accent);
}
.ren-cluster--2 .ren-cluster__name::before { background: var(--ren-accent-soft); }
.ren-cluster--3 .ren-cluster__name::before { background: #8ab0a6; }
.ren-cluster__count {
margin-left: auto;
font-weight: 400;
font-size: 0.85em;
}
/* 無料窓口の枠。**砂色はここと安全案内だけに使う**——色に意味を持たせるなら、
その色を他で使わないほうが強い（＝砂色＝お金がかからない選択肢／安全側）。 */
.ren-free {
background: var(--ren-safety-bg);
color: var(--ren-safety-ink);
border-radius: var(--ren-radius-lg);
padding: 1.1em 1.15em;
margin: 0 0 1.6em;
}
.ren-free__title {
font-family: var(--ren-font-round);
font-size: 0.95em;
font-weight: 700;
margin: 0 0 0.5em;
}
.ren-free p { margin: 0; font-size: 0.86em; line-height: 1.9; }
/* 広告を含む記事のバッジ。目立たせないが、読み飛ばせない濃さ。 */
.ren-ad-badge {
display: inline-block;
font-size: 0.68em;
color: var(--ren-ad-ink);
background: var(--ren-ad-bg);
padding: 0.2em 0.8em;
border-radius: var(--ren-radius-pill);
}
/* ---------------------------------------------------------------------------
14-2. ハーブの装飾（2026-07-28 v2.1）
**本文の邪魔をしないことが条件。** 守っているルールは3つ。
- 置くのは「枠の余白」だけ。文字の背後・行間には置かない
- 不透明度は0.2〜0.35。地の色に沈む濃さにする
- `pointer-events: none` で操作の邪魔もしない
増やしたくなったときも、本文（.entry-content p）まわりには広げないこと。
--------------------------------------------------------------------------- */
/* PCの左右の余白に、大きな枝を1本ずつ。
**コンテンツの外側にしか出さない。** 画面が1180px以上あるときだけ表示し、
それ未満（＝余白が足りない幅）では出さない。position:fixed なので
スクロールしても動かず、背景の一部として静かに存在する。 */
@media screen and (min-width: 1180px) {
body::before,
body::after {
content: "";
position: fixed;
top: 12vh;
width: 120px;
height: 320px;
z-index: 0;
pointer-events: none;
opacity: 0.14;
background: var(--ren-accent-soft);
-webkit-mask-image: var(--ren-bough);
mask-image: var(--ren-bough);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
body::before { left: 12px; }
body::after { right: 12px; transform: scaleX(-1); }
/* 枝より前面にコンテンツを置く（Cocoonのラッパー） */
#container,
.wrap,
#header-container { position: relative; z-index: 1; }
}
/* 枠の右上に小枝を1本。安全案内・無料窓口・ピラーの3つだけに付ける
（どれも「囲みの中で完結する」ブロックなので、隅に余白がある）。 */
.ren-safety,
.ren-free,
.ren-pillar {
position: relative;
overflow: hidden; /* 小枝が枠からはみ出さない */
}
.ren-safety::after,
.ren-free::after,
.ren-pillar::after {
content: "";
position: absolute;
top: 0.5em;
right: 0.6em;
width: 54px;
height: 36px;
pointer-events: none;
background: currentColor;
opacity: 0.22;
-webkit-mask-image: var(--ren-sprig);
mask-image: var(--ren-sprig);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transform: scaleX(-1); /* 枝先を内側へ向ける */
}
/* ピラーだけは文字色が本文色なので、枝はセージにする（濃くなりすぎるため） */
.ren-pillar::after {
background: var(--ren-accent-soft);
opacity: 0.3;
}
/* 記事中の区切り線。ただの罫線を、中央に小枝を置いた区切りにする。
`hr` は記事末の出所注記の前などに入る。**本文の途中には増やさない**。 */
.entry-content hr {
border: none;
height: 1px;
background: var(--ren-border);
margin: 2.6em 0;
position: relative;
overflow: visible;
}
.entry-content hr::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 46px;
height: 30px;
transform: translate(-50%, -50%);
background: var(--ren-page); /* 罫線を隠して、その上に枝を置く */
pointer-events: none;
-webkit-mask-image: none;
mask-image: none;
}
.entry-content hr::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 42px;
height: 28px;
transform: translate(-50%, -50%);
z-index: 1;
background: var(--ren-accent-soft);
opacity: 0.55;
pointer-events: none;
-webkit-mask-image: var(--ren-sprig);
mask-image: var(--ren-sprig);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
/* 記事本文の面（.main）は白なので、hrの中央マスクも白に合わせる */
.main .entry-content hr::after { background: var(--ren-surface); }
/* mask未対応なら装飾は出さない（四角い塗りが残るのを避ける） */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
.ren-safety::after,
.ren-free::after,
.ren-pillar::after,
.entry-content hr::before,
.entry-content hr::after { display: none; }
}
/* ---------------------------------------------------------------------------
15. 操作の配慮
--------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--ren-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------------------------------------------------------------------------
ヘッダーのロゴ（2026-07-29）
----------------------------------------------------------------------------
本×電球×ハートのロゴ（`design
enairand-proposals\c-deep-diveook-bulb-heart\`）を
ヘッダーへ出す。**Cocoon設定の「ヘッダーロゴ」はREST APIに出ておらずスクリプトから
設定できない**ため、サイト名のテキストをCSSで画像に差し替えている。
文字（`恋の相談先ガイド`）は**消さずに画面外へ送る**。読み上げと検索エンジンには
テキストとして残す必要があるため（画像だけにするとサイト名が機械に伝わらない）。
画像は 960×180。幅は画面に合わせて詰め、比率は `aspect-ratio` で保つ
（高さを固定すると、狭い画面で左右に余白が出て中央がずれる）。
--------------------------------------------------------------------------- */
/* **セレクタを`.logo-header .site-name .site-name-text`（詳細度0,3,0）にしている理由**
`.logo-header .site-name-text` では、Cocoonが持つ下マージン（実測67.5px）に負けて
ヘッダーが197pxまで伸びた（2026-07-29 実測）。ロゴの下に見えない余白が積まれる。 */
/* **サイズは高さで決める。** 幅で指定すると、画像の縦横比が変わったときに
ヘッダーの高さが勝手に伸びる（2026-07-29、ロゴ画像の余白を削ったときに発生）。
ロゴは横に伸びても許容できるが、縦に伸びると記事に着くまでのスクロールが増える。 */
.logo-header .site-name .site-name-text {
display: block;
height: 56px;
aspect-ratio: 662 / 169; /* 余白を削った実画像の比率 */
width: auto;
max-width: 72vw;
margin: 0 auto;
text-indent: -9999px;
white-space: nowrap;
overflow: hidden;
background: url("https://koi-soudansaki.jp/wp-content/uploads/2026/07/logo-book-bulb-heart-v2.png") no-repeat center / contain;
}
/* ロゴにしたぶん、ヘッダーの上下を詰める（Cocoon既定は 20px / 30px）。
**スマホのヘッダーは画面の1/4を超えさせない**——記事に着くまでのスクロールが増え、
夜に短時間で読む読者には邪魔になる。 */
/* ヘッダーの上下は**極限まで詰める**（2026-07-29 西森さん指摘）。
Cocoon既定は 20px/30px。スマホで記事に着くまでのスクロールを減らすため、
ロゴの上下は6px/8pxまで落とす。ロゴ自体は56pxに拡大しているので、
詰めても窮屈には見えない。 */
.header-in h1.logo,
.header-in .logo-header {
padding: 6px 0 8px;
margin: 0;
}
/* キャッチフレーズの余白も詰める（ロゴの上に載る1行） */
.tagline {
margin: 2px 0 0 !important;
padding: 0 12px !important;
font-size: 12px;
}
/* ---------------------------------------------------------------------------
PC（1024px以上）の一覧まわり（2026-07-29）
----------------------------------------------------------------------------
西森さん指摘「トップの表示バランス。小さい気がする」。実測すると**PCでもサムネが
116px**しかなかった（カード幅828pxに対して14%）。文字も小さい（タイトル16px）。
原因は横並びをflexで組んでいたこと。figureに`aspect-ratio`があると
**高さから幅が逆算され、`width` は `!important` でも効かない**
（既存のPC指定 190px も無視されていた。2026-07-29に実測して判明）。
**PCだけgridに切り替える。** 列幅で決まるので逆算が起きない。
スマホ（1023px以下）はflexのまま＝実機で調整した見え方を変えない。
--------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
.entry-card-wrap .entry-card,
.entry-card-wrap .e-card {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1.1em;
align-items: center;
}
.entry-card-wrap .entry-card .entry-card-thumb,
.entry-card-wrap .e-card .entry-card-thumb {
width: auto !important;
max-width: none !important;
height: auto !important;
aspect-ratio: 1200 / 630;
}
/* 読む距離が違うので、一覧の文字もPCでは上げる */
.entry-card-title { font-size: 1.15em; line-height: 1.6; }
.entry-card-snippet { font-size: 0.92em; }
.entry-card-wrap { padding: 1.1em 1.2em 1em; }
/* ロゴ。**画面が広いほど大きくする**（2026-07-29 西森さん指摘「ロゴが小さい」）。
ヘッダーはサイトの看板なので、幅が増えたぶんはロゴに回す。 */
.logo-header .site-name .site-name-text { height: 72px; }
}
/* ---------------------------------------------------------------------------
広い画面（1700px以上）でサイト幅を広げる（2026-07-29）
----------------------------------------------------------------------------
西森さん指摘「小さい」。実測すると1920pxの画面で**サイト幅は1256px**しかなく、
左右332pxずつ＝**画面の35%を余白に捨てていた**。個々の要素を大きくするより、
使っていない幅を使うほうが効く。
1700px未満は従来どおり（ノートPCの1440px前後では1256pxがちょうどよい）。
**記事本文だけは行長を制限する**——日本語は1行45文字を超えると目が戻れなくなる。
--------------------------------------------------------------------------- */
@media screen and (min-width: 1700px) {
/* **サイト幅は`width`で上書きする。**
Cocoon親テーマは `.wrap { width: 1256px }` `.main { width: 860px }` と、
`max-width` ではなく **width** で幅を決めている（2026-07-29にサーバーの
`cocoon-master/style.css:673,687` を読んで確認）。
最初 `max-width` を上書きして効かず、mainだけが広がってサイドバーが下へ落ちた。
**外枠（.wrap）と中身（.main）は必ずセットで広げること。**
sidebarは376pxのまま＝広げた分はすべて本文側に回す。 */
.wrap { width: 1600px; }
.main { width: 1180px; }
/* サイト幅1600pxに合わせてロゴも上げる */
.logo-header .site-name .site-name-text { height: 88px; }
.entry-card-wrap .entry-card,
.entry-card-wrap .e-card { grid-template-columns: 320px 1fr; }
.entry-card-title { font-size: 1.25em; }
.single .entry-content { max-width: 900px; }
}
/* ---------------------------------------------------------------------------
一覧カードのサムネと、カテゴリラベルの位置（2026-07-29 西森さん指摘）
---------------------------------------------------------------------------
- サムネは**画像全体を見せる**（`cover`で切り取らない）。記事の絵は文字入りの
アイキャッチが多く、切ると文字が欠ける。空いた分は地色で埋める。
- カテゴリラベルは**サムネの外**、カード下の区切り線の上に左寄せで置く。
サムネに重ねると絵が隠れる（実測：112×63のサムネに78×19のラベル）。
--------------------------------------------------------------------------- */
.entry-card-thumb img,
.entry-card-thumb .card-thumb img {
object-fit: contain !important;
background: var(--ren-accent-weak);
}
.entry-card-wrap { position: relative; padding-bottom: 2.1em; }
.entry-card-thumb .cat-label,
.card-thumb .cat-label,
.entry-card .cat-label {
position: absolute !important;
left: 0.85em !important;
bottom: 0.6em !important;
top: auto !important;
right: auto !important;
display: inline-block !important;
font-size: 11px !important;
line-height: 1.6 !important;
padding: 1px 8px !important;
border-radius: 999px;
z-index: 2;
}
/* ---------------------------------------------------------------------------
ヘッダーの余白を極限まで詰める（2026-07-29 西森さん指摘）
---------------------------------------------------------------------------
ロゴ56px＋上下14pxで70pxのはずが、h1が135pxあった（実測）。差の65pxは
Cocoonがロゴのリンク（.site-name）に持たせている行間とマージン。
**見えない余白なので全部落とす。** ロゴ画像は`display:block`で高さが決まるので、
行間を1にしても表示は変わらない。
--------------------------------------------------------------------------- */
.logo-header .site-name,
.logo-header .site-name-text-link,
.header-in .logo a {
display: block;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
font-size: 0 !important; /* テキストの行ボックスを消す（画像・背景は影響を受けない） */
}
.logo-header { line-height: 1 !important; }
/* ---------------------------------------------------------------------------
カード下段：カテゴリラベル（左）と日付（右）を同じ高さに揃える
---------------------------------------------------------------------------
2026-07-29 西森さん指摘。ラベルがまだ画像に重なっていた原因は、
**サムネ（figure）自身が `position: relative` を持っていた**こと。
絶対配置の基準がカードではなくサムネになるので、どこへ動かしても枠の中に留まる。
→ サムネを `static` に戻し、基準をカード（`.entry-card-wrap`）へ移す。
ラベルと日付は**同じ `bottom` ・同じ文字サイズ**に置く。左右に離れて並ぶ2つが
高さ違い・大きさ違いだと、視線が2回止まる。
--------------------------------------------------------------------------- */
.entry-card-wrap .entry-card-thumb,
.entry-card-wrap .card-thumb { position: static !important; }
.entry-card-wrap { position: relative !important; padding-bottom: 2.6em !important; }
.entry-card-wrap .cat-label {
position: absolute !important;
left: 0.9em !important;
bottom: 0.75em !important;
top: auto !important;
right: auto !important;
font-size: 11px !important;
line-height: 1.6 !important;
padding: 1px 8px !important;
z-index: 2;
}
/* 日付。既定はカード内の右端に流し込まれていて、ラベルより13px上にあった（実測）。 */
.entry-card-wrap .entry-card-info,
.entry-card-wrap .e-card-info {
position: absolute !important;
right: 0.9em !important;
bottom: 0.75em !important;
margin: 0 !important;
padding: 0 !important;
font-size: 11px !important;
line-height: 1.6 !important;
}
.entry-card-wrap .entry-card-info .post-date,
.entry-card-wrap .entry-card-info .entry-date { font-size: 11px !important; }
/* カテゴリラベルは**一覧に出さない**（2026-07-29 西森さん判断「見にくい」）。
分類はWordPress側に持っているので、カテゴリページ・記事ページから辿れる。
一覧の小さなカードでは、絵とタイトルの邪魔になるほうが損。
ラベルの分の余白も返す（日付だけなら下は詰められる）。 */
.entry-card-wrap .cat-label,
.entry-card-thumb .cat-label,
.card-thumb .cat-label { display: none !important; }
.entry-card-wrap { padding-bottom: 1.9em !important; }
/* ============================================================================
物販カード（AUTO:product_card・2026-07-29）
----------------------------------------------------------------------------
レンダラ（enginelogmedia
ender.py）はサイト共通で `.mmaw-*` のクラス名を出すため、
恋の相談先ガイド側では **クラス名はそのまま・配色だけ --ren-* トークンに読み替える**。
画像は128px固定（楽天ウェブサービス規約 第10条(7)＝商品情報の改変禁止のため
`?_ex=` を書き換えない）。器を128pxに合わせ、拡大せず余白で見せる。
========================================================================== */
.entry-content .mmaw-product{
margin: 1.6em 0;
padding: 1.1em;
border: 1px solid var(--ren-border);
border-radius: var(--ren-radius);
background: var(--ren-surface);
}
.mmaw-product__rakuten{ display: flex; gap: 1em; align-items: flex-start; }
.mmaw-product__thumb{ flex: 0 0 128px; line-height: 0; }
.mmaw-product__thumb img{
width: 128px; height: 128px;
object-fit: contain;
background: #fff;
border: 1px solid var(--ren-border);
border-radius: var(--ren-radius-sm);
}
.mmaw-product__body{ flex: 1 1 auto; min-width: 0; }
.entry-content .mmaw-product__name{
margin: 0 0 .4em;
font-size: 15px; font-weight: 700; line-height: 1.6;
color: var(--ren-ink);
}
.entry-content .mmaw-product__meta,
.entry-content .mmaw-product__review{
margin: 0 0 .35em;
font-size: 13px;
color: var(--ren-muted);
font-variant-numeric: tabular-nums;
}
/* ボタンは共通の器に等幅で並べる（1つでも2つでも左端が揃い、商品名の行数で動かない） */
.mmaw-product__actions{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: .7em;
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid var(--ren-border);
}
.entry-content .mmaw-product__btn{
display: block; margin: 0;
padding: 12px 16px;
border-radius: var(--ren-radius-sm);
font-size: 14px; font-weight: 700; text-align: center;
text-decoration: none;
background: var(--ren-accent);
border: 1px solid var(--ren-accent);
color: #fff !important;
}
.entry-content .mmaw-product__btn:hover{ background: var(--ren-accent-dark); }
/* Amazonは楽天データの外側。想起色オレンジ（ロゴ画像は使わない＝商標ガイドライン第4条） */
.entry-content .mmaw-product__btn.is-amazon{
background: #FF9900;
border-color: #FF9900;
color: #0F1111 !important;
}
/* ステマ表示は renai の広告表示（.ren-disclosure）と同じ見え方に寄せる。
2026-08-10：Codex監査指摘①＝#999はコントラスト不足のため14px・#6F6A63へ修正 */
.entry-content .mmaw-disclosure{
margin: .6em 0 1em;
color: #6F6A63;
font-size: 14px;
}
/* 楽天のクレジット表示（規約 第13条）。控えめだが消さない */
.entry-content .mmaw-credit{
margin: .6em 0 1.4em;
font-size: 12px;
color: var(--ren-muted);
}
@media screen and (max-width: 480px){
.mmaw-product__rakuten{ gap: .7em; }
.mmaw-product__thumb{ flex-basis: 96px; }
.mmaw-product__thumb img{ width: 96px; height: 96px; }
.mmaw-product__actions{ grid-template-columns: 1fr; }
}