/* ============================================================
 * page-manga.css
 * 原作漫画(manga)用の追加スタイル。
 * - 単一ページ（single-manga.php）: メタ・登場人物・クロスリンク・お得に読む・スコア・関連作
 * - ドラマ詳細の原作誘導（.drama-original）
 * .ds-card 等の共通スタイルは page-single.css を流用する。
 * ============================================================ */

/* ── ヒーロー：PCは2カラム（左=導入＋あらすじ／右=X埋め込み）、スマホは1カラム ── */
.manga-hero {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	margin-top: 0.5rem;
}
.manga-hero__main {
	flex: 1 1 0;
	min-width: 0;
	max-width: 620px;
}
.manga-hero__aside {
	flex: 0 0 400px;
	max-width: 400px;
	min-width: 0;
}
.manga-hero__aside .twitter-tweet {
	margin: 0 !important;
}
.manga-hero__synopsis {
	margin-top: 1.2rem;
	font-size: 16px; /* あらすじ本文：PC16px（ドラマの .story-text と共通） */
	line-height: 1.9;
	color: var(--ad-ink-soft, #444);
}
@media (max-width: 768px) {
	.manga-hero__synopsis {
		font-size: 15px; /* スマホ15px */
	}
}
.manga-hero__synopsis p {
	margin: 0 0 0.8em;
}
/* 原題：ドラマの「右寄せ＋装飾ライン」を解除し、タイトル下の左寄せ副題に */
.single-manga .drama-title {
	margin-bottom: 1rem;
}
.single-manga .drama-title-ko {
	justify-content: flex-start;
	margin-top: 0.3rem;
	font-size: 0.95rem;
}
.single-manga .drama-title-ko::before {
	content: none;
}
@media (max-width: 900px) {
	.manga-hero {
		flex-direction: column;
		gap: 1.6rem;
	}
	.manga-hero__aside {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}
}

/* 原作ラベル（ページタイプのアイブロウ：webトゥーンだと一目で分かる印）
 * 上品に：英字は大きく細身のセリフ斜体、日本語は控えめなミュート副題、
 * 下線は重い2px深紅 → 細いゴールド罫にして主張を抑える。 */
.manga-pagetype {
	display: inline-flex;
	align-items: baseline;
	gap: 0.75em;
	margin: 0 0 1.1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--ad-gold, #B8956A);
}
.manga-pagetype__en {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 1.7rem;
	font-weight: 500;
	color: var(--ad-primary, #8B1E3F);
	letter-spacing: 0.04em;
	line-height: 1;
}
.manga-pagetype__ja {
	font-family: var(--ad-font-serif);
	font-size: 0.92rem;
	font-weight: 400;
	color: var(--ad-mute, #9A8589);
	letter-spacing: 0.16em;
}
@media (max-width: 600px) {
	.manga-pagetype__en {
		font-size: 1.5rem;
	}
}

/* ── メタ行（原作者・国・年） ── */
.manga-meta {
	margin: .4em 0 1em;
	font-size: .9rem;
	color: #666;
}
.manga-meta__sep {
	margin: 0 .5em;
	color: #ccc;
}

/* ── ページ全体のレイアウト：ドラマ詳細(.single-drama)と同じ最大幅・左右余白に揃える ── */
body.single-manga .l-mainContent,
body.single-manga .l-mainContent.l-article,
body.single-manga #main_content {
	max-width: var(--ad-content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 56px;
	padding-right: 56px;
	box-sizing: border-box;
}

/* 原作ページは末尾に類似作品セクションが無いため、フッターとの余白を確保 */
.single-manga #main_content {
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

/* スマホの左右余白もドラマ詳細と同値（22px）に揃える */
@media (max-width: 768px) {
	body.single-manga .l-mainContent,
	body.single-manga .l-mainContent.l-article,
	body.single-manga #main_content {
		padding-left: 22px;
		padding-right: 22px;
	}
}

/* ============================================================
 * ヒーロー左カラムに移設した「お得に読む(Read)」ストア一覧
 * 縦型カードグリッド(.ds-card)は約280px幅前提で、約620pxの左カラムでは
 * 4列に潰れて破綻する。ここでは .manga-hero__read スコープ限定で
 * 「1ストア＝横1行」のリスト型に上書きする（HTMLは共通のまま）。
 * 他ページ(.single-drama 等)の .drama-streaming には一切影響しない。
 * ============================================================ */
.manga-hero__read {
	margin-top: 1.8rem;
}

/* グリッド → 縦積みの行リスト */
.manga-hero__read .manga-read {
	margin-top: 0;
}
.manga-hero__read .drama-streaming__grid {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

/* 各ストア＝横1行：[左アクセント｜ブランド名＋クーポン] … [CTA] */
.manga-hero__read .ds-card {
	flex-flow: row wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	padding: 0.8rem 1rem 0.8rem 1.15rem;
	border-radius: 12px;
	box-shadow: 0 1px 6px rgba(20, 28, 44, 0.07);
	text-align: left;
}
.manga-hero__read .ds-card:hover {
	transform: none;
	box-shadow: 0 4px 14px rgba(20, 28, 44, 0.11);
}
/* 上ストライプ → 左の縦アクセントバーへ */
.manga-hero__read .ds-card::before {
	top: 0.7rem;
	bottom: 0.7rem;
	left: 0;
	right: auto;
	width: 4px;
	height: auto;
	border-radius: 0 3px 3px 0;
}

/* ブランド名：左寄せ＋固定幅。全行でクーポンバッジの開始位置を揃える */
.manga-hero__read .ds-card__brand {
	flex: 0 0 150px;
	width: 150px;
	min-height: 0;
	margin: 0;
	padding: 0;
	justify-content: flex-start;
}
.manga-hero__read .ds-card__brand-name {
	font-size: 1.05rem;
	font-weight: 800;
	text-align: left;
	white-space: nowrap;
}

/* クーポン／配信ありバッジ：行内に */
.manga-hero__read .ds-card .ds-badge {
	margin: 0;
	flex: 0 1 auto;
}

/* 区切り線は行レイアウトでは不要 */
.manga-hero__read .ds-card__divider {
	display: none;
}

/* CTA：全幅をやめて右側の固定ボタンに */
.manga-hero__read .ds-card__cta {
	width: auto;
	flex: 0 0 auto;
	margin-left: auto;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.6rem 1.1rem;
	font-size: 0.85rem;
}
.manga-hero__read .ds-card__cta-label {
	flex: 0 0 auto;
	padding-left: 0;
}
.manga-hero__read .ds-card__cta .ds-icon {
	width: 16px;
	height: 16px;
}

/* 狭幅（スマホ＝1カラム時など）：ブランド＋バッジを1行、CTAを下に全幅 */
@media (max-width: 600px) {
	.manga-hero__read .ds-card__brand {
		flex: 1 1 100%;
	}
	.manga-hero__read .ds-card__cta {
		flex: 1 0 100%;
		margin-left: 0;
	}
}

/* ── お得に読む：クーポンバッジ ──
 * ビビッドなオレンジ塗り＋絵文字をやめ、サイトの深紅×ゴールド基調に統一。
 * ごく淡いクリーム地＋深紅文字＋細いゴールド罫で、主張を抑えつつ視認性を確保。
 */
.mr-coupon {
	background: var(--ad-bg, #FBF6F2);
	color: var(--ad-primary, #8B1E3F);
	border: 1px solid var(--ad-gold, #B8956A);
	font-weight: 700;
	letter-spacing: .02em;
}

/* ── ピッコマは明るい黄色のため、ボタン文字を濃色にして可読性を確保 ── */
.manga-read .ds-card__cta.cta-svc--piccoma {
	color: #4a3b00 !important;
}

/* ── 登場人物（テキストのみ・編集カードデザイン） ──
 * 画像を持たない制約下で、明朝の人物名＋ボルドーの左アクセント＋
 * 破線区切り＋「実写」チップで、見出し/見どころと統一した世界観に。
 */
.manga-chars {
	margin: 1.5rem 0 2rem;
}
.manga-chars__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.8rem;
}
/* SWELLコアの .post_content ul の左インデントに勝つため左paddingを明示的に0に */
.single-manga .post_content .manga-chars__list {
	padding-left: 0;
}
.manga-chars__item {
	padding: 0;
}

/* SWELL等が付与する装飾フレーム・四隅/区切りのキラキラ（疑似要素・背景画像・枠）を全除去 */
.single-manga .post_content .manga-chars,
.single-manga .post_content .manga-chars__list,
.single-manga .post_content .manga-chars__item {
	background: none !important;
	background-image: none !important;
	border: none !important;
	border-image: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}
.single-manga .post_content .manga-chars::before,
.single-manga .post_content .manga-chars::after,
.single-manga .post_content .manga-chars__list::before,
.single-manga .post_content .manga-chars__list::after,
.single-manga .post_content .manga-chars__item::before,
.single-manga .post_content .manga-chars__item::after,
.single-manga .post_content .manga-chars__name::before,
.single-manga .post_content .manga-chars__name::after,
.single-manga .post_content .manga-chars__role::before,
.single-manga .post_content .manga-chars__role::after,
.single-manga .post_content .manga-chars__desc::before,
.single-manga .post_content .manga-chars__desc::after {
	content: none !important;
	display: none !important;
	background: none !important;
}
.manga-chars__name {
	margin: 0;
	font-family: var(--ad-font-serif, serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ad-ink, #222);
	line-height: 1.35;
	letter-spacing: 0.02em;
}
@media (max-width: 600px) {
	.manga-chars__name {
		font-size: 1.35rem;
	}
}
.manga-chars__role {
	margin: 0.3rem 0 0;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid #dcd6ca;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ad-primary, #8c2624);
	letter-spacing: 0.03em;
}
.manga-chars__desc {
	margin: 0.7rem 0 0;
	font-size: 0.92rem;
	color: #444;
	line-height: 1.85;
}
.manga-chars__cast {
	margin: 0.85rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px dashed #e3ddd3;
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.82rem;
}
.manga-chars__cast-label {
	flex: none;
	background: var(--ad-primary, #8c2624);
	color: #fff;
	border-radius: 4px;
	padding: 0.12em 0.5em;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.manga-chars__cast-link {
	color: var(--ad-primary, #8c2624);
	font-weight: 700;
	text-decoration: none;
}
.manga-chars__cast-link:hover {
	text-decoration: underline;
}
.manga-chars__cast-arrow {
	font-size: 0.9em;
}
.manga-chars__cast-name {
	color: #555;
	font-weight: 600;
}

/* ── 実写ドラマへの相互リンク（サムネ＋バッジ＋プレーンな線） ── */
.manga-cross {
	margin: 1.5rem 0;
	display: grid;
	gap: 1rem;
}
.manga-cross__card {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding: 1.5rem 1.8rem;
	background: #fffdfb;
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(120, 60, 60, 0.07);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.manga-cross__card:hover {
	box-shadow: 0 12px 30px rgba(120, 60, 60, 0.13);
	transform: translateY(-2px);
}
/* サムネイル（実画像 or プレーンなプレースホルダ） */
.manga-cross__thumb {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	border-radius: 10px;
	overflow: hidden;
	background: #f4ecec;
	display: flex;
	align-items: center;
	justify-content: center;
}
.manga-cross__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.manga-cross__thumb-placeholder {
	font-size: 0.8rem;
	color: var(--ad-primary, #8c2624);
	opacity: 0.55;
	letter-spacing: 0.05em;
}
/* 本文 */
.manga-cross__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}
.manga-cross__label {
	display: inline-block;
	background: var(--ad-primary, #8c2624);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.25em 0.9em;
	border-radius: 4px;
}
.manga-cross__title {
	width: 100%;
	font-family: var(--ad-font-serif, serif);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--ad-ink, #2a2320);
	line-height: 1.3;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e3d7d7; /* 普通の線 */
}
.manga-cross__meta {
	font-size: 0.92rem;
	color: var(--ad-mute, #8a8079);
	letter-spacing: 0.04em;
}
/* CTA（右側・枠線ボタン。カードホバーで反転） */
.manga-cross__cta {
	flex: 0 0 auto;
	align-self: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ad-primary, #8c2624);
	border: 1.5px solid var(--ad-primary, #8c2624);
	border-radius: 9px;
	padding: 0.7rem 1.5rem;
	white-space: nowrap;
	transition: background-color 0.16s ease, color 0.16s ease;
}
.manga-cross__card:hover .manga-cross__cta {
	background: var(--ad-primary, #8c2624);
	color: #fff;
}
.manga-cross__cta-arrow {
	margin-left: 0.5em;
}
@media (max-width: 600px) {
	.manga-cross__card {
		flex-wrap: wrap;
		gap: 0.9rem 1rem;
		padding: 1.1rem 1.2rem;
	}
	.manga-cross__thumb {
		flex: 0 0 78px;
		width: 78px;
		height: 78px;
	}
	.manga-cross__body {
		flex: 1 1 0;
		gap: 0.35rem;
	}
	.manga-cross__title {
		font-size: 1.25rem;
		padding-bottom: 0.4rem;
	}
	.manga-cross__meta {
		font-size: 0.86rem;
	}
	/* CTAは次の行で全幅のボタンに（右寄せの間延びを解消・下線→枠線） */
	.manga-cross__cta {
		flex: 1 0 100%;
		align-self: stretch;
		text-align: center;
		border: 1.5px solid var(--ad-primary, #8c2624);
		border-radius: 9px;
		padding: 0.75rem 1rem;
		margin-top: 0.2rem;
		font-size: 0.95rem;
	}
}

/* SWELL等が付与する装飾フレーム・キラキラ（疑似要素・背景画像・枠）を除去 */
.single-manga .post_content .manga-cross,
.single-manga .post_content .manga-cross__card,
.single-manga .post_content .manga-cross__thumb,
.single-manga .post_content .manga-cross__body {
	background-image: none !important;
	border-image: none !important;
	outline: none !important;
}
.single-manga .post_content .manga-cross::before,
.single-manga .post_content .manga-cross::after,
.single-manga .post_content .manga-cross__card::before,
.single-manga .post_content .manga-cross__card::after,
.single-manga .post_content .manga-cross__thumb::before,
.single-manga .post_content .manga-cross__thumb::after,
.single-manga .post_content .manga-cross__title::before,
.single-manga .post_content .manga-cross__title::after,
.single-manga .post_content .manga-cross__cta::before,
.single-manga .post_content .manga-cross__cta::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

/* ── 総合おすすめ度（★のみ） ── */
.manga-score {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 1.2em 0;
	padding: .8em 1em;
	background: #fffaf0;
	border-radius: 10px;
}
.manga-score__label {
	font-size: .85rem;
	color: #8a6d4b;
	font-weight: 700;
}
.manga-score__stars {
	color: #f4b400;
	font-size: 1.25rem;
	letter-spacing: .05em;
}
.manga-score__num {
	font-size: .9rem;
	color: #555;
}

/* ── ドラマ詳細ページの「原作を読む」副CTA ── */
.drama-original {
	margin: 1.4em 0;
	padding: .9em 1.1em;
	border: 1px dashed #d8c4a8;
	border-radius: 10px;
	background: #fffdf8;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1em;
}
.drama-original__lead {
	font-weight: 700;
	color: #8a6d4b;
}
.drama-original__link {
	font-weight: 700;
	color: #c0392b;
	text-decoration: none;
}

/* ── アーカイブ用 manga カード ── */
.manga-card {
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow .2s ease;
}
.manga-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.manga-card__link {
	display: block;
	padding: 1em;
	text-decoration: none;
	color: inherit;
}
.manga-card__title {
	font-size: 1rem;
	margin: 0 0 .4em;
	line-height: 1.4;
}
.manga-card__meta,
.manga-card__author {
	font-size: .82rem;
	color: #888;
	margin: .2em 0 0;
}

/* ============================================================
 * ドラマページと同じ「見出し」「見どころ」デザインを .single-manga に移植
 * （正本は page-single.css の .single-drama スコープ。漫画にも同じ見た目を当てる）
 * ============================================================ */

/* ── 見出し（英語＋日本語：.adra-custom-h2） ── */
.single-manga .post_content h2.adra-custom-h2 {
	background: transparent !important;
	-webkit-text-fill-color: initial !important;
	color: inherit !important;
	border: none !important;
	padding: 0 !important;
	margin: 4rem 0 1.2em 0 !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 0.8em !important;
}
.single-manga .post_content h2.adra-custom-h2::after,
.single-manga .post_content h2.adra-custom-h2::before {
	content: none !important;
}
.single-manga .post_content h2.adra-custom-h2 .adra-heading-en {
	font-family: 'Playfair Display', serif !important;
	font-size: 2.4rem;
	font-weight: 500;
	color: var(--ad-primary) !important;
	letter-spacing: 0.08em;
	line-height: 1;
	font-style: italic;
}
.single-manga .post_content h2.adra-custom-h2 .adra-heading-ja {
	font-family: var(--ad-font-serif) !important;
	font-size: 1.05rem;
	color: var(--ad-mute);
	font-weight: 400;
	letter-spacing: 0.15em;
}
@media (max-width: 640px) {
	.single-manga .post_content h2.adra-custom-h2 .adra-heading-en { font-size: 2.2rem; }
	.single-manga .post_content h2.adra-custom-h2 .adra-heading-ja { font-size: 0.95rem; }
}

/* ── 見どころ（番号付き2カラム・破線：is-style-num_circle） ── */
.single-manga .post_content ul.is-style-num_circle.-list-under-dashed,
body.single-manga ul.is-style-num_circle.-list-under-dashed {
	display: grid !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 2rem 0 !important;
	counter-reset: sd-point-counter;
	border: none !important;
	background: transparent !important;
}
.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li,
body.single-manga ul.is-style-num_circle.-list-under-dashed > li {
	position: relative !important;
	counter-increment: sd-point-counter;
	color: #444;
	line-height: 1.7;
	background: none !important;
}
@media (min-width: 769px) {
	.single-manga .post_content ul.is-style-num_circle.-list-under-dashed,
	body.single-manga ul.is-style-num_circle.-list-under-dashed {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 2.5rem 0 !important;
	}
	.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li,
	body.single-manga ul.is-style-num_circle.-list-under-dashed > li {
		border-bottom: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li:nth-child(odd),
	body.single-manga ul.is-style-num_circle.-list-under-dashed > li:nth-child(odd) {
		padding-right: 2rem !important;
		border-right: 1px dashed #d3d3d3 !important;
	}
	.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li:nth-child(odd):last-child,
	body.single-manga ul.is-style-num_circle.-list-under-dashed > li:nth-child(odd):last-child {
		border-right: none !important;
	}
	.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li:nth-child(even),
	body.single-manga ul.is-style-num_circle.-list-under-dashed > li:nth-child(even) {
		padding-left: 2rem !important;
	}
}
@media (max-width: 768px) {
	.single-manga .post_content ul.is-style-num_circle.-list-under-dashed,
	body.single-manga ul.is-style-num_circle.-list-under-dashed {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}
	.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li,
	body.single-manga ul.is-style-num_circle.-list-under-dashed > li {
		border-right: none !important;
		border-bottom: 1px dashed #d3d3d3 !important;
		padding: 0 0 1.8rem 0 !important;
		margin: 0 0 1.8rem 0 !important;
	}
	.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li:last-child,
	body.single-manga ul.is-style-num_circle.-list-under-dashed > li:last-child {
		border-bottom: none !important;
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
}
.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li::before,
body.single-manga ul.is-style-num_circle.-list-under-dashed > li::before {
	content: counter(sd-point-counter, decimal-leading-zero) !important;
	display: block !important;
	font-family: 'Playfair Display', var(--ad-font-serif) !important;
	font-size: 2.2rem !important;
	font-weight: 700 !important;
	font-style: italic !important;
	color: var(--ad-primary) !important;
	line-height: 1 !important;
	margin-bottom: 0.8rem !important;
	position: static !important;
	background: none !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	text-align: left !important;
	top: auto !important;
	left: auto !important;
	border: none !important;
	box-shadow: none !important;
}
.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li strong,
body.single-manga ul.is-style-num_circle.-list-under-dashed > li strong {
	display: block !important;
	font-family: var(--ad-font-serif) !important;
	font-size: 1.3rem !important;
	font-weight: 600 !important;
	color: var(--ad-ink) !important;
	line-height: 1.4 !important;
	margin-bottom: 0.8rem !important;
}
.single-manga .post_content ul.is-style-num_circle.-list-under-dashed > li br,
body.single-manga ul.is-style-num_circle.-list-under-dashed > li br {
	display: none !important;
}

/* ============================================================
 * 電子書籍ストア別カラートークン（VODの .cta-svc--{key} と同じ仕組み）
 * .ds-card / .ds-card__cta が var(--svc-color) を参照してボタン色に使う。
 * 各社のロゴ／ブランドカラーに準拠。
 * ============================================================ */
.cta-svc--cmoa        { --svc-color: #F39800; } /* コミックシーモア（オレンジ） */
.cta-svc--ebookjapan  { --svc-color: #DF0011; } /* ebookjapan（レッド） */
.cta-svc--mangaoukoku { --svc-color: #B81C22; } /* まんが王国（深紅） */
.cta-svc--ameba       { --svc-color: #19A23E; } /* Amebaマンガ（グリーン） */
.cta-svc--dmm         { --svc-color: #E60044; } /* DMMブックス（レッド） */
.cta-svc--booklive    { --svc-color: #00A0E9; } /* BookLive（ブルー） */
.cta-svc--renta       { --svc-color: #FF6E00; } /* Renta!（オレンジ） */
.cta-svc--piccoma     { --svc-color: #FCD400; } /* ピッコマ（イエロー） */
.cta-svc--linemanga   { --svc-color: #06C755; } /* LINEマンガ（グリーン） */