/* =========================================================
 * 比較ページ（電子書籍アプリ比較・VOD比較の共通部分）
 * ======================================================= */
.cmp-wrap { padding: 20px var(--gutter) 56px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; align-items: start; }
.cmp-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.cmp-main [id] { scroll-margin-top: 20px; }
.medal { color: #fff; font-weight: 900; font-size: 13px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* タイトル */
.cmp-head { display: flex; flex-direction: column; gap: 14px; }
.cmp-head__tag { align-self: flex-start; font-size: 12px; font-weight: 900; padding: 4px 10px; border-radius: 4px; background: var(--ebook-bg); color: #c2332c; }
.cmp-head__tag.is-vod { background: var(--blue-bg); color: var(--blue); }
.cmp-head__title { margin: 0; font-size: clamp(23px, 2.6vw, 32px); font-weight: 900; line-height: 1.45; text-wrap: pretty; word-break: auto-phrase; }
.cmp-head__meta { display: flex; gap: 18px; align-items: center; font-size: 13px; color: var(--sub); flex-wrap: wrap; }
.cmp-head__by { font-weight: 700; color: var(--ink); }
.cmp-head__upd { color: var(--red); font-weight: 700; }
.cmp-head__check { display: flex; align-items: center; gap: 6px; }
.cmp-head__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.cmp-head__pr { font-size: 12px; color: var(--sub); background: #f5f7fa; border-radius: 6px; padding: 8px 12px; }

/* 結論 */
.cmp-hero {
	background: linear-gradient(120deg, #fff4f2, #ffe9e5); border-radius: 14px; padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1fr) 230px;
	gap: 28px; align-items: center;
}
.cmp-hero__text { display: flex; flex-direction: column; gap: 10px; }
.cmp-hero__eyebrow { font-size: 13px; font-weight: 900; color: var(--red); }
.cmp-hero__name { font-size: 30px; font-weight: 900; line-height: 1.3; word-break: auto-phrase; }
.cmp-hero__desc { font-size: 15px; line-height: 1.85; color: var(--body); word-break: auto-phrase; }
.cmp-hero__points { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-hero__points span { background: #fff; border: 1px solid #f3c4bf; color: #c2332c; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.cmp-hero__cta { display: flex; flex-direction: column; gap: 8px; }
.cmp-hero__banner { width: 100%; height: 110px; border-radius: 10px; }
.cmp-hero__btn { font-size: 15px; padding: 14px; }
.cmp-hero__note { font-size: 11px; color: var(--sub); text-align: center; }

/* 目的別 */
.cmp-purpose { display: flex; flex-direction: column; gap: 14px; }
.cmp-purpose__h { margin: 0; font-size: 20px; font-weight: 900; }
.cmp-purpose__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cmp-purpose__card {
	border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: transform .15s, box-shadow .15s; color: var(--ink); min-width: 0;
}
.cmp-purpose__card.is-vod { padding: 14px 12px; }
.cmp-purpose__card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(29, 33, 48, .12); color: var(--ink); }
.cmp-purpose__need { font-size: 13px; font-weight: 700; color: var(--c); line-height: 1.5; word-break: auto-phrase; }
.cmp-purpose__app { font-size: 17px; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; word-break: auto-phrase; } /* 「BOOK☆WALKER読み放題」など長い名前は折り返す */
.cmp-purpose__card.is-vod .cmp-purpose__app { font-size: 15px; }
.cmp-purpose__why { font-size: 12px; color: var(--body); line-height: 1.6; word-break: auto-phrase; }
.cmp-purpose__go { margin-top: auto; font-size: 12px; font-weight: 900; color: var(--c); }

/* 比較表 */
.cmp-h2 {
	margin: 0; background: var(--navy); color: #fff; font-size: 22px; font-weight: 900; line-height: 1.5; padding: 14px 20px; border-radius: 6px; word-break: auto-phrase;
}
.cmp-table-sec { display: flex; flex-direction: column; gap: 16px; }
.cmp-focus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-focus__label { font-size: 13px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.cmp-focus__btn {
	border: 1.5px solid var(--bd2); background: #fff; color: var(--body); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
	cursor: pointer; font-family: inherit;
}
.cmp-focus__btn:hover { border-color: var(--navy); }
.cmp-focus__btn.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }
.cmp-table { border: 1px solid var(--bd2); border-radius: 10px; overflow: hidden; }
.cmp-table__row { display: grid; grid-template-columns: 96px repeat(var(--n), minmax(0, 1fr)); border-top: 1px solid var(--row); background: #fff; }
.cmp-table__row--head { border-top: 0; }
.cmp-table__label { padding: 10px; font-size: 12px; font-weight: 900; background: #f5f7fa; display: flex; align-items: center; line-height: 1.45; }
/* 比較表は電子書籍・読み放題・VODで同じ詰め方（ユーザーの希望 2026-10-27：電子書籍もVODと同じように見やすく） */
.cmp-table__app {
	padding: 14px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; border-left: 1px solid var(--row); min-width: 0; background: #fff;
}
.cmp-table__app.is-top, .cmp-table__cta.is-top { background: #fff7f6; }
.cmp-table__app .medal { font-size: 11px; width: 22px; height: 22px; }
.cmp-table__logo { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px var(--bd); } /* 白い地のロゴもアイコンと同じタイルに見せる */
.cmp-table__name { font-weight: 900; font-size: 12px; text-align: center; line-height: 1.35; overflow-wrap: anywhere; word-break: auto-phrase; } /* 長い名前は列の中で折り返す */
.cmp-table__star { font-size: 11px; font-weight: 900; }
.cmp-table__star span { color: #f0a000; }
.cmp-table__cell { padding: 9px 4px; border-left: 1px solid var(--row); display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; min-width: 0; }
.cmp-table__mark { font-size: 18px; font-weight: 900; line-height: 1.2; }
.cmp-table__note { font-size: 11px; color: var(--body); line-height: 1.45; word-break: auto-phrase; overflow-wrap: anywhere; max-width: 100%; } /* 長い言葉（Vポイント0.5〜3% など）は、マスの中で折り返します（はみ出して隣のマスにかかるため）。2026-11-02 */
.cmp-table__row.is-focus { background: #fffaf0; }
.cmp-table__row.is-focus .cmp-table__label { background: var(--navy); color: #fff; }
.cmp-table__cta { padding: 10px 5px; border-left: 1px solid var(--row); }
.cmp-table__btn {
	display: block; background: var(--btn); color: #fff; text-align: center; font-weight: 900; font-size: 12px; padding: 9px 2px; border-radius: 999px;
	box-shadow: none; white-space: nowrap;
}
.cmp-table__btn:hover { color: #fff; filter: brightness(1.05); }
.cmp-table__btn.is-navy { background: var(--navy); box-shadow: none; }
.cmp-table__legend { font-size: 12px; color: var(--sub); }

/* 診断（トップページと同じ部品を、少し大きく） */
.cmp-diag .diag {
	background: #fff7f6; border-radius: 14px; padding: 22px 24px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.cmp-diag .diag__title { font-size: 18px; }
.cmp-diag .diag__opt { padding: 8px 14px; }
.cmp-diag .diag__result { background: #fff; border-radius: 12px; }
.cmp-diag .diag__btn { padding: 12px; }

/* 評価カード */
.cmp-cards { display: flex; flex-direction: column; gap: 22px; }
.cmp-card { border: 1px solid var(--bd2); border-radius: 14px; overflow: hidden; }
.cmp-card.is-top { border: 2px solid var(--red); }
.cmp-card__head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--row); }
.cmp-card.is-vod .cmp-card__head { padding: 14px 20px; }
.cmp-card.is-top .cmp-card__head { background: #fff7f6; }
.cmp-card__medal { font-size: 15px; width: 32px; height: 32px; }
.cmp-card__name-wrap { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; align-items: flex-start; }
.cmp-card__name { margin: 0; font-size: 21px; font-weight: 900; word-break: auto-phrase; }
.cmp-card.is-vod .cmp-card__name { font-size: 20px; }
.cmp-card__star { font-size: 14px; font-weight: 900; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: var(--ink); }
.cmp-card__star:hover { color: var(--ink); }
.cmp-card__star-label { font-size: 11px; font-weight: 700; color: var(--sub); text-decoration: underline dotted; }
.cmp-card__star-val { display: flex; align-items: center; gap: 4px; }
.cmp-table__label--star { align-items: flex-end; font-size: 11px; font-weight: 700; line-height: 1.4; }
.cmp-table__label--star a { color: var(--sub); text-decoration: underline dotted; }
.cmp-card__star .stars { font-size: 14px; letter-spacing: 1px; }
.cmp-card__star1 { color: #f0a000; }
.cmp-card__body { padding: 20px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }
.cmp-card.is-vod .cmp-card__body { padding: 18px 20px; display: block; }
.cmp-card__side { display: flex; flex-direction: column; gap: 10px; }
.cmp-card__shots { display: flex; flex-direction: column; gap: 8px; }
.cmp-card__shot { aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid var(--bd); }
.cmp-card__shot .thumb__img { object-position: left top; } /* 公式サイトの画面は、ロゴのある左上を見せます */
.cmp-card__shot-label { position: absolute; left: 8px; bottom: 8px; z-index: 1; font-family: var(--mono); font-size: 10px; color: #7a8090; }
.cmp-card__bonus { background: #fff7f6; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cmp-card__bonus span { font-size: 11px; font-weight: 900; color: #c2332c; }
.cmp-card__bonus b { font-size: 13px; font-weight: 700; line-height: 1.5; }
.cmp-card__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cmp-card.is-vod .cmp-card__main { gap: 12px; }
.cmp-card__sum { margin: 0; font-size: 15px; line-height: 1.9; }
.cmp-card__pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cmp-card__good, .cmp-card__bad { border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cmp-card__good { background: #e9f6ef; }
.cmp-card__bad { background: #f5f7fa; }
.cmp-card__good > span:first-child { font-size: 12px; font-weight: 900; color: var(--green); }
.cmp-card__bad > span:first-child { font-size: 12px; font-weight: 900; color: var(--sub); }
.cmp-card__li { font-size: 13px; line-height: 1.6; display: flex; gap: 6px; }
.cmp-card__good .cmp-card__li b { color: var(--green); font-weight: 900; }
.cmp-card__bad .cmp-card__li b { color: var(--sub); font-weight: 900; }
.cmp-card__foot { display: flex; flex-direction: column; gap: 14px; }
.cmp-card.is-vod .cmp-card__foot { flex-direction: row; gap: 10px; align-items: center; flex-wrap: wrap; }
.cmp-card__who { font-size: 13px; line-height: 1.7; }
.cmp-card.is-vod .cmp-card__who { flex: 1; min-width: 240px; }
.cmp-card__who b { font-weight: 900; }
.cmp-card__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-card__cta {
	background: var(--btn); color: #fff; font-weight: 900; font-size: 14px; padding: 12px 26px; border-radius: 999px; box-shadow: 0 3px 0 var(--btn-sh);
	white-space: nowrap; transition: transform .1s;
}
.cmp-card.is-vod .cmp-card__cta { padding: 12px 24px; }
.cmp-card__cta:hover { color: #fff; transform: translateY(-2px); }
.cmp-card__cta.is-navy { background: var(--navy); box-shadow: 0 3px 0 #142a52; }
.cmp-card__review { border: 1.5px solid var(--navy); color: var(--navy); font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: 999px; white-space: nowrap; }
.cmp-card__review:hover { background: var(--navy); color: #fff; }

/* 選び方 */
.cmp-howto { display: flex; flex-direction: column; gap: 16px; }
.cmp-howto__item { display: flex; flex-direction: column; gap: 8px; }
.cmp-howto__h {
	margin: 0; font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--bd);
	word-break: auto-phrase;
}
.cmp-howto__h span { font-family: var(--mono); color: var(--red); font-size: 15px; }
.cmp-howto__p { margin: 0; font-size: 16px; line-height: 2; }

/* どうやって比べたか */
.cmp-method { background: #f5f7fa; border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.cmp-method.is-text { padding: 20px 22px; gap: 8px; }
.cmp-method__h { margin: 0; font-size: 19px; font-weight: 900; }
.cmp-method.is-text .cmp-method__h { font-size: 18px; }
.cmp-method__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cmp-method__box { background: #fff; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cmp-method__box span { font-size: 12px; font-weight: 700; color: var(--sub); }
.cmp-method__box b { font-size: 14px; font-weight: 700; line-height: 1.6; }
.cmp-method__note { margin: 0; font-size: 13px; color: var(--body); line-height: 1.8; }
.cmp-method__note a { color: var(--navy); text-decoration: underline; }

/* よくある質問（本文） */
.cmp-content { margin: 0; }
.cmp-content > :first-child { margin-top: 0; }

/* 編集部・出典 */
.cmp-editor { background: #f5f7fa; border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.8; color: var(--body); }
.cmp-editor__name { font-weight: 900; font-size: 15px; color: var(--ink); }
.cmp-editor b { font-weight: 700; color: var(--ink); }
.cmp-editor__links { display: flex; gap: 16px; font-weight: 700; }
.cmp-editor__links a { color: var(--navy); text-decoration: underline; }

/* サイドバー */
.cmp-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
.side-box { border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.side-box__h { padding: 12px 16px; font-weight: 900; font-size: 14px; background: var(--bg2); }
.side-toc__list { display: flex; flex-direction: column; padding: 6px 0; max-height: 50vh; overflow-y: auto; }
.side-toc__item { padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--body); border-left: 3px solid transparent; line-height: 1.5; }
.side-toc__item.is-active { font-weight: 900; color: var(--red); border-left-color: var(--red); }
.cmp-rank__h { display: flex; justify-content: space-between; }
.cmp-rank__pr { font-size: 10px; color: var(--sub); font-weight: 700; }
.cmp-rank__row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--row); }
.cmp-rank__row .medal { font-size: 11px; width: 22px; height: 22px; }
.cmp-rank__name { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; color: var(--ink); }
.cmp-rank__btn { background: var(--btn); color: #fff; font-size: 11px; font-weight: 900; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.cmp-rank__btn:hover { color: #fff; filter: brightness(1.05); }
.cmp-rank__btn.is-navy { background: var(--navy); }
.cmp-rank__row.is-paused .cmp-rank__name { color: var(--sub); white-space: normal; line-height: 1.4; }
.cmp-rank__wait { font-size: 11px; font-weight: 900; color: var(--sub); background: #e9ecf1; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.cmp-line { background: #eafaf0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.cmp-line__t { font-size: 14px; font-weight: 900; line-height: 1.5; }
.cmp-line__btn { font-size: 14px; padding: 11px; }
.cmp-ebook { background: #fff7f6; border: 1px solid #f6d3d0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.cmp-ebook__t { font-size: 14px; font-weight: 900; line-height: 1.5; }
.cmp-ebook__s { font-size: 12px; color: var(--body); line-height: 1.6; }
.cmp-ebook__btn { border: 1.5px solid var(--btn); color: var(--btn); text-align: center; font-weight: 900; font-size: 13px; padding: 10px; border-radius: 999px; }
.cmp-ebook__btn:hover { background: var(--btn); color: #fff; }

/* 目次（本文） */
.toc { border: 1px solid var(--bd2); border-radius: 10px; overflow: hidden; line-height: normal; }
.toc__head {
	width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--bg2);
	cursor: pointer; border: 0; font-family: inherit; color: var(--ink);
}
.toc__title { font-weight: 900; font-size: 15px; }
.toc__state { font-size: 13px; font-weight: 700; color: var(--navy); }
.toc__list { margin: 0; padding: 14px 20px 18px 44px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.6; }
.toc__item { font-weight: 700; color: var(--navy); }
.toc__item a { color: var(--navy); }
.toc__item a:hover { color: var(--red); }
.toc.is-closed .toc__list { display: none; }

@media (max-width: 1000px) and (min-width: 769px) {
	.cmp-wrap { grid-template-columns: 1fr; }
	.cmp-side { position: static; }
	.cmp-purpose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
 * スマホ
 * ======================================================= */
@media (max-width: 768px) {
	.cmp-wrap { display: block; padding: 14px 16px 0; }
	.cmp-main { gap: 24px; }
	.cmp-main [id] { scroll-margin-top: 80px; }
	.cmp-head { gap: 10px; }
	.cmp-head__tag { font-size: 11px; padding: 3px 8px; }
	.cmp-head__title { font-size: 22px; line-height: 1.5; }
	.cmp-head__meta { gap: 12px; font-size: 11px; }
	.cmp-head__pr { font-size: 11px; padding: 7px 10px; line-height: 1.6; }
	.cmp-hero { border-radius: 14px; padding: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: linear-gradient(150deg, #fff4f2, #ffe9e5); }
	.cmp-hero__eyebrow { font-size: 12px; }
	.cmp-hero__name { font-size: 26px; }
	.cmp-hero__desc { font-size: 14px; line-height: 1.8; }
	.cmp-hero__points span { font-size: 11px; padding: 4px 9px; }
	.cmp-hero__cta { display: contents; }
	.cmp-hero__btn { font-size: 16px; padding: 14px; }
	.cmp-hero__note { font-size: 10px; }
	.cmp-purpose { gap: 10px; }
	.cmp-purpose__h { font-size: 17px; }
	.cmp-purpose__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.cmp-purpose__card, .cmp-purpose__card.is-vod { padding: 12px; gap: 5px; min-height: 110px; }
	.cmp-purpose__card.is-vod { min-height: 96px; }
	.cmp-purpose__card:hover { transform: none; box-shadow: none; }
	.cmp-purpose__need { font-size: 11px; }
	.cmp-purpose__app, .cmp-purpose__card.is-vod .cmp-purpose__app { font-size: 15px; }
	.cmp-purpose__go { font-size: 11px; }
	.toc__head { padding: 0 16px; min-height: 48px; }
	.toc__list { padding: 10px 16px 14px 36px; gap: 10px; line-height: 1.55; }
	.cmp-h2 { font-size: 18px; padding: 12px 14px; }
	.cmp-table-sec { gap: 12px; }
	.cmp-table__hint { font-size: 12px; color: var(--sub); }
	.cmp-table__scroll { overflow-x: auto; scrollbar-width: thin; margin: 0 -16px; padding: 0 16px; }
	.cmp-table { width: max-content; }
	/* スマホの比較表：文字を米粒にしない（説明12px・項目13px）。列を広げて横にスクロール、左の項目名は固定 */
	.cmp-table__row { grid-template-columns: 100px repeat(var(--n), 124px); }
	.cmp-table__label { position: sticky; left: 0; z-index: 1; padding: 10px 8px; font-size: 13px; line-height: 1.4; word-break: auto-phrase; }
	.cmp-table__app { padding: 10px 4px; gap: 4px; }
	.cmp-table__app .medal { font-size: 10px; width: 20px; height: 20px; }
	.cmp-table__logo { width: 28px; height: 28px; border-radius: 6px; }
	.cmp-table__name { font-size: 13px; }
	.cmp-table__star { font-size: 12px; }
	.cmp-table__cell { padding: 10px 6px; gap: 2px; }
	.cmp-table__mark { font-size: 20px; }
	.cmp-table__note { font-size: 12px; line-height: 1.5; color: var(--ink); }
	.cmp-table__cta { padding: 10px 6px; }
	.cmp-table__btn { font-size: 13px; padding: 11px 4px; box-shadow: none; }
	.cmp-table__cta.is-top { background: #fff; }
	.cmp-table__legend { font-size: 12px; line-height: 1.6; }
	.cmp-diag .diag { border-radius: 12px; padding: 16px; }
	.cmp-diag .diag__title { font-size: 16px; }
	.cmp-diag .diag__opt { padding: 11px 4px; }
	.cmp-diag .diag__result { border-radius: 10px; padding: 14px; }
	.cmp-diag .diag__btn { padding: 13px; }
	.cmp-cards { gap: 14px; }
	.cmp-card { border-radius: 12px; }
	.cmp-card__head, .cmp-card.is-vod .cmp-card__head { gap: 10px; padding: 12px 14px; }
	.cmp-card.is-vod .cmp-card__head { padding: 11px 14px; }
	.cmp-card__medal { font-size: 13px; width: 28px; height: 28px; }
	.cmp-card__name, .cmp-card.is-vod .cmp-card__name { font-size: 17px; }
	.cmp-card__star { font-size: 13px; }
	.cmp-card__body, .cmp-card.is-vod .cmp-card__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
	.cmp-card.is-vod .cmp-card__body { padding: 12px 14px; }
	.cmp-card__side { display: contents; }
	.cmp-card__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.cmp-card__shot { aspect-ratio: auto; height: 140px; }
	.cmp-card__shots.is-one { grid-template-columns: 1fr; }
	.cmp-card__shots.is-one .cmp-card__shot { height: auto; aspect-ratio: 16 / 10; }
	.cmp-card__shot-label { left: 6px; bottom: 6px; }
	.cmp-card__bonus { flex-direction: row; gap: 8px; align-items: center; padding: 9px 12px; }
	.cmp-card__bonus span { font-size: 10px; white-space: nowrap; }
	.cmp-card__main, .cmp-card.is-vod .cmp-card__main { display: contents; }
	.cmp-card__sum { font-size: 14px; line-height: 1.85; }
	.cmp-card__pc { display: contents; }
	.cmp-card__good, .cmp-card__bad { padding: 10px 12px; gap: 4px; }
	.cmp-card__good > span:first-child, .cmp-card__bad > span:first-child { font-size: 11px; }
	.cmp-card__foot, .cmp-card.is-vod .cmp-card__foot { display: contents; }
	.cmp-card__btns { flex-direction: column; gap: 10px; }
	.cmp-card__cta, .cmp-card.is-vod .cmp-card__cta { text-align: center; font-size: 15px; padding: 13px; }
	.cmp-card__review { text-align: center; font-size: 13px; padding: 11px; }
	.cmp-howto { gap: 12px; }
	.cmp-howto__item { gap: 6px; }
	.cmp-howto__h { font-size: 16px; align-items: flex-start; gap: 8px; padding-bottom: 6px; line-height: 1.5; }
	.cmp-howto__h span { font-size: 14px; padding-top: 1px; }
	.cmp-howto__p { font-size: 15px; line-height: 1.95; }
	.cmp-method { border-radius: 12px; padding: 16px; gap: 10px; }
	.cmp-method.is-text { padding: 14px; gap: 6px; }
	.cmp-method__h { font-size: 16px; }
	.cmp-method.is-text .cmp-method__h { font-size: 15px; }
	.cmp-method__grid { display: flex; flex-direction: column; gap: 10px; }
	.cmp-method__box { background: none; padding: 0; flex-direction: row; gap: 10px; font-size: 13px; }
	.cmp-method__box span { width: 72px; flex-shrink: 0; font-size: 13px; }
	.cmp-method__box b { font-size: 13px; }
	.cmp-method__note { font-size: 12px; }
	.cmp-editor { padding: 14px; gap: 6px; font-size: 12px; line-height: 1.75; }
	.cmp-editor__name { font-size: 14px; }
	.cmp-line { padding: 14px; }
	.cmp-line__btn { padding: 13px; }
	.fixbar--cmp { grid-template-columns: 1fr 1.5fr; }
	.fixbar__btn--outline-navy { border: 1.5px solid var(--navy); background: #fff; color: var(--navy); padding: 12px 4px; }
	.fixbar__btn--outline-navy:hover { color: var(--navy); }
}

/* サービス停止中（比較表の下に「−位」で出す） */
.cmp-paused { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 18px; border: 1px dashed var(--bd2); border-radius: 10px; background: #f7f8fa; color: var(--sub); }
.cmp-paused .medal { flex-shrink: 0; }
.cmp-paused__logo { width: 40px; height: 40px; border-radius: 8px; }
.cmp-paused__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-paused__name { font-weight: 900; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-paused__name .etable__paused { display: inline-block; padding: 2px 10px; font-size: 11px; font-weight: 900; color: var(--sub); background: #e9ecf1; border-radius: 999px; white-space: nowrap; }
.medal.is-paused { background: #b8bfcc; }
.cmp-paused__note { font-size: 13px; line-height: 1.7; }
.cmp-paused__more { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: underline; } /* 停止の状況のレビュー記事へ */


/* スマホ：停止中のカードは、1行めに「−・ロゴ・名前」、その下に説明を横いっぱいで（左が大きく空かないように。2026-11-02） */
@media (max-width: 768px) {
	.cmp-paused { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 10px; padding: 14px; }
	.cmp-paused__text { display: contents; }
	.cmp-paused__name { grid-column: 3; }
	.cmp-paused__note, .cmp-paused__more { grid-column: 1 / -1; }
}