@charset "UTF-8";

/*!
 * C&C — Keni80 Child / component layer
 * cos_store#31
 *
 * base.css の続き（ロード順 5 番目）。本文コンポーネント・ウィジェット・
 * cs-shop の商品カードを扱う。トークンの定義は base.css を参照。
 *
 * 注意: 親 default-style.css(6) が持つセレクタ（.toc-area のマーカー、
 * .item-box02、.box_style01/03/06、.contact-box、.page-nav の current、
 * .sub-section_title の背景、.btn_style01-03 など）は、このファイルでは
 * 上書きできない。それらは child/default-style.css(7) に書いてある。
 */


/*
# =================================================================
# 1. 記事本文のタイポグラフィ
# =================================================================
*/

.article-body p {
	margin-bottom: 1.9em;
}

.article-body > *:last-child {
	margin-bottom: 0;
}

.article-body strong,
.article-body b {
	font-weight: 700;
	color: var(--cc-ink);
}

/* 本文中のマーカーは黄色の蛍光ペンではなくブランドの淡色にする */
.article-body mark,
.marker,
.marker_y {
	padding: .1em .1em;
	background: linear-gradient(transparent 62%, var(--cc-brand-100) 62%);
	color: inherit;
}

.article-body ul,
.article-body ol {
	margin-bottom: 1.9em;
}

.article-body li {
	margin-bottom: .5em;
}

.article-visual {
	margin-bottom: 32px;
}

.article-visual img,
.article-body img {
	border-radius: var(--cc-r-panel);
}

blockquote {
	margin: 2em 0;
	padding: 1.4em 1.6em;
	border: 0;
	border-left: 3px solid var(--cc-accent);
	border-radius: 0 var(--cc-r-panel) var(--cc-r-panel) 0;
	background: var(--cc-tint);
	color: var(--cc-ink-2);
}

blockquote::before,
blockquote::after {
	display: none;
}

blockquote p:last-child {
	margin-bottom: 0;
}

code,
pre {
	border-radius: var(--cc-r-ui);
	background: var(--cc-surface-2);
	color: var(--cc-ink);
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
		'Liberation Mono', monospace;
}


/*
# =================================================================
# 2. 記事ヘッダー（日付・カテゴリ）
# =================================================================
*/

.entry_status {
	margin-bottom: 4px;
}

.entry_status .entry_date_item {
	color: var(--cc-muted);
	font-size: 1.25rem;
	letter-spacing: .04em;
}

.entry_status .entry_date_item:nth-child(2) {
	border-left: 1px solid var(--cc-line-2);
}

.entry_pv {
	color: var(--cc-muted);
}

/* カテゴリのチップ。親の #f0efe9 はベージュでブランドの寒色と衝突する */
.entry_status .entry_category_item {
	padding: .3em .8em;
	border-radius: var(--cc-r-ui);
	background: var(--cc-tint);
	font-size: 1.25rem;
	line-height: 1.6;
	transition: background-color .2s var(--cc-ease);
}

.entry_status .entry_category_item:hover {
	background: var(--cc-brand-100);
}

.entry_category_item a {
	color: var(--cc-accent-ink);
	font-weight: 500;
	text-decoration: none;
}


/*
# =================================================================
# 3. 目次
# ---------------------------------------------------------------
# 親は 3px の #f0f0f0 枠 + #f0f0f0 のセンター寄せ見出し。
# 罫線 1 本と余白で「記事の中の索引」だと分かる程度に落とす。
# =================================================================
*/

.toc-area {
	margin: 48px auto;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-panel);
	background: var(--cc-surface-2);
	overflow: hidden;
}

.toc_title {
	padding: 14px 16px;
	background-color: transparent;
	border-bottom: 1px solid var(--cc-line);
	color: var(--cc-ink);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: .04em;
	text-align: left;
}

.toc-area_inner .toc-area_list {
	margin-left: 12px;
	padding: 16px 16px 16px 20px;
}

.toc-area_inner .toc-area_list li {
	margin-bottom: 12px;
	font-size: 1.45rem;
	line-height: 1.7;
}

.toc-area_inner .toc-area_list li:last-child {
	margin-bottom: 0;
}

.toc-area_inner .toc-area_list a {
	color: var(--cc-ink-2);
	text-decoration: none;
}

.toc-area_inner .toc-area_list a:hover,
.toc-area_inner .toc-area_list a:active,
.toc-area_inner .toc-area_list a:focus {
	color: var(--cc-accent-ink);
	text-decoration: underline;
}

.toc-area_inner .toc-area_list > li::before {
	border-radius: 4px;
	font-size: 1.2rem;
	font-weight: 700;
}

.toc-area_btn {
	color: var(--cc-muted);
}


/*
# =================================================================
# 4. 表
# =================================================================
*/

.keni-main table {
	margin: 2em 0;
	border-radius: var(--cc-r-panel);
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--cc-line);
}

.keni-main th,
.keni-main td {
	padding: .85em 1em;
	line-height: 1.7;
}

.keni-main th {
	border: 0;
	border-bottom: 1px solid var(--cc-line);
	background-color: var(--cc-accent-fill);
	color: var(--cc-on-accent);
}

.keni-main td {
	border: 0;
	border-bottom: 1px solid var(--cc-line);
	border-left: 1px solid var(--cc-line);
	background: var(--cc-surface);
	color: var(--cc-ink);
}

.keni-main td:first-child {
	border-left: 0;
}

.keni-main tbody th {
	border: 0;
	border-bottom: 1px solid var(--cc-line);
	background: var(--cc-surface-2);
	color: var(--cc-ink);
	text-align: left;
}

.keni-main tbody tr:last-child th,
.keni-main tbody tr:last-child td {
	border-bottom: 0;
}


/*
# =================================================================
# 5. サイドバー / フッターのウィジェット見出し
# ---------------------------------------------------------------
# 親は #333 のベタ塗り + カード padding 前提の負マージン。
# base.css でカードをやめたので負マージンも外し、h2 と同じ
# 「アクセントバー付きの罫線」に統一する（形の語彙を 1 つに保つ）。
# =================================================================
*/

.keni-section .sub-section_title,
.keni-main .keni-section .sub-section_title,
.keni-sub .widget > .keni-section .sub-section_title,
.keni-footer .widget > .keni-section .sub-section_title,
.keni-sub .widget > .keni-section .cast-box_sub_title,
.keni-footer .widget > .keni-section .cast-box_sub_title {
	position: relative;
	margin: 0 0 16px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 1px solid var(--cc-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--cc-ink);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .06em;
}

.keni-section .sub-section_title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 32px;
	height: 3px;
	border-radius: 2px;
	background: var(--cc-accent);
}

.keni-section .sub-section_title a {
	color: var(--cc-ink);
}


/*
# =================================================================
# 6. ウィジェットのリスト
# ---------------------------------------------------------------
# 親はカードの padding を前提に margin: -16px -20px -20px を当てている。
# base.css でカードをやめたので打ち消す。
# =================================================================
*/

.widget_recent_entries .keni-section > ul,
.widget_recent_comments .keni-section > ul,
.widget_archive .keni-section > ul,
.widget_categories .keni-section > ul,
.widget_pages .keni-section > ul,
.widget_nav_menu .keni-section ul,
.widget_rss .keni-section > ul,
.widget_meta .keni-section > ul {
	margin: 0;
}

.widget_recent_entries .keni-section ul li,
.widget_recent_comments .keni-section ul li,
.widget_archive .keni-section > ul li,
.widget_categories .keni-section > ul li,
.widget_pages .keni-section > ul li,
.widget_nav_menu .keni-section ul li,
.widget_rss .keni-section > ul li,
.widget_meta .keni-section > ul li {
	border-bottom: 1px solid var(--cc-line);
	font-size: 1.4rem;
}

.widget_categories .keni-section > ul ul,
.widget_pages .keni-section > ul ul,
.widget_nav_menu .keni-section ul ul {
	border-top: 1px solid var(--cc-line);
}

.widget_recent_entries .keni-section ul li,
.widget_recent_comments .keni-section ul li,
.widget_rss .keni-section ul li,
.widget_meta .keni-section ul li {
	padding: 11px 4px 11px 24px;
	color: var(--cc-ink-2);
}

.widget_archive .keni-section > ul li a,
.widget_categories .keni-section > ul li a,
.widget_pages .keni-section > ul li a,
.widget_nav_menu .keni-section ul li a {
	padding: 11px 4px 11px 24px;
	color: var(--cc-ink-2);
	line-height: 1.6;
	transition: color .2s var(--cc-ease), background-color .2s var(--cc-ease);
}

.widget_archive .keni-section > ul li a:hover,
.widget_categories .keni-section > ul li a:hover,
.widget_pages .keni-section > ul li a:hover,
.widget_nav_menu .keni-section ul li a:hover,
.widget_recent_entries .keni-section ul li a:hover {
	color: var(--cc-accent-ink);
}

.widget_recent_entries_img .list_widget_recent_entries_img
	.widget_recent_entries_img_entry_title a {
	color: var(--cc-ink-2);
}


/*
# =================================================================
# 7. 人気記事ランキング（サイドバー）
# ---------------------------------------------------------------
# 親は左上に灰色の三角リボン + 白抜き数字。ブランド色の角丸バッジにする。
# =================================================================
*/

.ranking-list > li {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cc-line);
	text-align: left;
}

.ranking-list > li:last-child {
	border-bottom: 0;
}

.ranking-list > li::before {
	top: 8px;
	left: 8px;
	z-index: 2;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: var(--cc-r-ui);
	background: var(--cc-brand-900);
	opacity: .92;
}

.ranking-list > li::after {
	top: 8px;
	left: 8px;
	z-index: 3;
	width: 26px;
	color: #fff;
	font-size: 1.3rem;
	line-height: 26px;
	text-align: center;
}

.ranking-list .rank_title {
	margin-bottom: 8px;
	padding-left: 0;
	font-size: 1.45rem;
	line-height: 1.65;
}

.ranking-list .rank_title a {
	color: var(--cc-ink-2);
	text-decoration: none;
}

.ranking-list .rank_title a:hover,
.ranking-list .rank_title a:active,
.ranking-list .rank_title a:focus {
	color: var(--cc-accent-ink);
	text-decoration: underline;
}

.ranking-list img {
	border-radius: var(--cc-r-panel);
}


/*
# =================================================================
# 7-b. 画像付き記事リスト / 人気記事ランキング（サイドバー）
# ---------------------------------------------------------------
# こちらは .ranking-list ではなく widget_recent_entries_ranking。
# 親は左上に 20px の三角リボン（金 / 銀 / 銅 / #80cbc4）を出す。
# 順位という意味は残しつつ、角丸バッジに置き換える。
# セレクタは親 base.css:5216- と同じ深さで書く（順序で勝つため）。
# =================================================================
*/

.widget_recent_entries_img .list_widget_recent_entries_img li,
.widget_recent_entries_img02 .list_widget_recent_entries_img li,
.widget_recent_entries_img03 .list_widget_recent_entries_img li {
	border-radius: var(--cc-r-panel);
	overflow: hidden;
	background-color: var(--cc-surface-2);
}

/* 全面 rgba(0,0,0,.5) のベタだと背景画像がほぼ見えない。
   タイトルを下寄せにして下端グラデーションに置き換える。
   サムネイル未設定の記事は明るいグレーの no-image になるため、
   文字がかかる 50% 以降で不透明度 .58 以上を確保して白文字の AA を守る。 */
.widget_recent_entries_img03 .list_widget_recent_entries_img
	.widget_recent_entries_img_entry_title {
	background-color: transparent;
	background-image: linear-gradient(
		to bottom,
		rgba(0, 20, 22, .10) 26%,
		rgba(0, 20, 22, .58) 50%,
		rgba(0, 20, 22, .90) 100%
	);
	font-size: 1.35rem;
	line-height: 1.6;
}

.widget_recent_entries_img03 .list_widget_recent_entries_img
	.widget_recent_entries_img_entry_title a {
	vertical-align: bottom;
	padding: 15px;
	text-shadow: 0 1px 2px rgba(0, 20, 22, .85);
}

.widget_recent_entries_ranking .list_widget_recent_entries_img > li::before,
.widget_recent_entries_img.widget_recent_entries_ranking
	.list_widget_recent_entries_img > li::before {
	top: 8px;
	left: 8px;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: var(--cc-r-ui);
	background: var(--cc-brand-900);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.widget_recent_entries_ranking .list_widget_recent_entries_img > li::after,
.widget_recent_entries_img.widget_recent_entries_ranking
	.list_widget_recent_entries_img > li::after {
	top: 8px;
	left: 8px;
	width: 26px;
	font-size: 1.3rem;
	line-height: 26px;
	text-align: center;
}

/* 1-3 位のメダル色は順位の情報なので残す（色だけ落ち着かせる） */
.widget_recent_entries_ranking .list_widget_recent_entries_img > li:nth-child(1)::before {
	background: #b8860b;
	border: 0;
}

.widget_recent_entries_ranking .list_widget_recent_entries_img > li:nth-child(2)::before {
	background: #78838a;
	border: 0;
}

.widget_recent_entries_ranking .list_widget_recent_entries_img > li:nth-child(3)::before {
	background: #8d6e63;
	border: 0;
}


/*
# =================================================================
# 8. 関連記事
# =================================================================
*/

.keni-related-title {
	background: transparent;
}

.related-entry-list li {
	background: transparent;
}

.related-entry-list_style01 > .entry-list_item,
.related-entry-list_style01 > .entry-list_item:last-child {
	border-bottom: 1px solid var(--cc-line);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	margin: 0;
	padding: 12px 0;
}

.related-entry-list_style01 > .entry-list_item:last-child {
	border-bottom: 0;
}

.related-entry-list_style01 > .entry-list_item:hover {
	transform: none;
	box-shadow: none;
}

.related-entry-list_style01 .related-entry_thumb {
	border-radius: var(--cc-r-ui);
}

.related-entry-list_style01 .related-entry_title {
	padding: 4px 0 4px 14px;
	font-size: 1.45rem;
	line-height: 1.65;
}

.related-entry-list .related-entry_title a {
	color: var(--cc-ink-2);
}

.related-entry-list .related-entry_title a:hover,
.related-entry-list .related-entry_title a:active,
.related-entry-list .related-entry_title a:focus {
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 9. ブログカード（内部リンク）
# ---------------------------------------------------------------
# #25 のトピッククラスター内部リンクが本文中でこの形になる。
# =================================================================
*/

.keni-link-card_wrap {
	padding: 16px;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-panel);
	background: var(--cc-surface-2);
	transition: border-color .2s var(--cc-ease), box-shadow .2s var(--cc-ease);
}

.keni-link-card_wrap:hover {
	border-color: var(--cc-line-2);
	box-shadow: var(--cc-shadow-1);
}

.keni-link-card_wrap .keni-link-card {
	color: var(--cc-muted);
}

.keni-link-card_thumb {
	border-radius: var(--cc-r-ui);
}

.keni-link-card_title a {
	color: var(--cc-ink);
}

.keni-link-card_url {
	color: var(--cc-muted);
}


/*
# =================================================================
# 10. ページャ
# =================================================================
*/

.page-nav li {
	margin-right: 6px;
	padding: 0;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-ui);
	background-color: var(--cc-surface);
	overflow: hidden;
	transition: border-color .2s var(--cc-ease);
}

.page-nav li:hover {
	border-color: var(--cc-accent);
}

.page-nav li a,
.page-nav li span.current {
	margin: 0;
	padding: 8px 14px;
	color: var(--cc-ink-2);
	font-size: 1.4rem;
}


/*
# =================================================================
# 10-b. 前後の記事ナビ
# ---------------------------------------------------------------
# 親は color:#000 直書き + 矢印が固定色の SVG 背景画像で、
# ダークでは矢印が背景に沈む。矢印は currentColor の CSS シェブロンに
# 置き換えて両モードで成立させる。
# =================================================================
*/

.nav-links .nav-previous a,
.nav-links .nav-next a {
	position: relative;
	background-image: none;
	color: var(--cc-ink-2);
	font-size: 1.3rem;
	transition: color .2s var(--cc-ease);
}

.nav-links .nav-previous a {
	padding: 10px 10px 10px 22px;
}

.nav-links .nav-next a {
	padding: 10px 22px 10px 10px;
}

.nav-links .nav-previous a::before,
.nav-links .nav-next a::before {
	content: "";
	position: absolute;
	top: 1.15em;
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.nav-links .nav-previous a::before {
	left: 6px;
	transform: rotate(-135deg);
}

.nav-links .nav-next a::before {
	right: 6px;
	transform: rotate(45deg);
}

.nav-links .nav-previous a:hover,
.nav-links .nav-previous a:active,
.nav-links .nav-previous a:focus,
.nav-links .nav-next a:hover,
.nav-links .nav-next a:active,
.nav-links .nav-next a:focus {
	color: var(--cc-accent-ink);
}

.nav-links::before {
	background: var(--cc-line);
}


/*
# =================================================================
# 11. 汎用ボックス
# ---------------------------------------------------------------
# .box_style01 / 03 / 06 と .item-box02 / .contact-box は背景が
# 親 default-style.css 側にあるため、色は child/default-style.css で扱う。
# ここでは形（角丸・余白・罫線）だけ揃える。
# =================================================================
*/

.box_style,
.box_style01,
.box_style02,
.box_style03,
.box_style04,
.box_style05,
.box_style06 {
	margin: 2em 0;
	border-radius: var(--cc-r-panel);
	overflow: hidden;
}

.box_style01 .box_inner,
.box_style02 .box_inner,
.box_style03 .box_inner {
	padding: 20px;
}

.item-box,
.item-box02,
.item-box03 {
	border-radius: var(--cc-r-panel);
	overflow: hidden;
}

.item-box .item-box_title,
.item-box02 .item-box_title,
.item-box03 .item-box_title {
	font-size: 1.7rem;
	line-height: 1.6;
}

.commentary-box {
	border-radius: var(--cc-r-panel);
}


/*
# =================================================================
# 12. SNS ボタン / タグ / サムネイルの下地
# ---------------------------------------------------------------
# 親が白・ベージュ・薄グレーを直書きしている面。ライトでもパレット外
# （#f0efe9 は暖色ベージュで寒色のブランドと衝突する）なので、
# ダークモード限定ではなく両モードでトークンに寄せる。
# =================================================================
*/

.sns-btn_wrap > div {
	background-color: var(--cc-surface-2);
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-ui);
	transition: border-color .2s var(--cc-ease);
}

.sns-btn_wrap > div:hover,
.sns-btn_wrap > div:active,
.sns-btn_wrap > div:focus {
	opacity: 1;
	border-color: var(--cc-line-2);
}

.sns-btn_wrap ul li a {
	border-radius: var(--cc-r-ui);
}

/* 親はラベルもアイコンも各 SNS のブランド色にしている。
   11px の "Tweet" が #1da1f2 で 2.7:1 しかなく AA を満たさない。
   ラベルは本文色、アイコンだけブランド色に分け、アイコンも
   グラフィックの下限 3:1 を満たす濃さまで落とす。 */
.sns-btn_wrap > div a span {
	color: var(--cc-ink-2);
	font-weight: 700;
}

.sns-btn_wrap > .sns-btn_tw a { color: #1a91da; }
.sns-btn_wrap > .sns-btn_fb a { color: #3b5998; }
.sns-btn_wrap > .sns-btn_hatena a { color: #0089ba; }
.sns-btn_wrap > .sns-btn_line a { color: #009000; }
.sns-btn_wrap > .sns-btn_gplus a { color: #b03626; }

/* 記事下のタグ */
.post-tag dd li {
	border-radius: var(--cc-r-ui);
	background: var(--cc-tint);
}

.post-tag dd li a {
	color: var(--cc-accent-ink);
}

/* 画像の読み込み前・no-image の下地
   （style02 は .related-entry-list_style02 .related-entry_thumb で
   詳細度 0,2,0 のため、こちらも同じ深さで書く） */
.related-entry_thumb,
.related-entry-list_style01 .related-entry_thumb,
.related-entry-list_style02 .related-entry_thumb,
.keni-link-card_thumb,
.widget_recent_entries_thumb {
	background-color: var(--cc-surface-2);
}


/*
# =================================================================
# 12-b. コメントフォーム
# ---------------------------------------------------------------
# 「必須」バッジは親が #eb3b54 + 白文字 = 3.97:1 で、12px の文字には
# AA(4.5:1) が足りない。同系統で濃度だけ上げる。
# =================================================================
*/

.required {
	background-color: #c62b41;
	border-radius: 4px;
}

.comment-form_item_title {
	background: var(--cc-surface-2);
	color: var(--cc-ink);
}

.comment-form_item_input,
.comment-form_item_textarea {
	background: transparent;
}


/*
# =================================================================
# 13. cs-shop（楽天商品カード）
# ---------------------------------------------------------------
# プラグイン側 CSS は点線 1 本だけで、商品が本文に埋もれる。
# アフィリエイト導線なのでカードとして独立させる。
# 本文の h3 スタイルが商品名にも当たるため打ち消す。
# =================================================================
*/

div.csshop-item {
	margin: 20px 0;
	padding: 18px;
	border: 1px solid var(--cc-line);
	border-top: 1px solid var(--cc-line);
	border-radius: var(--cc-r-panel);
	background: var(--cc-surface);
	transition: border-color .2s var(--cc-ease), box-shadow .2s var(--cc-ease);
}

div.csshop-item:hover {
	border-color: var(--cc-line-2);
	box-shadow: var(--cc-shadow-1);
}

div.csshop-item h3,
.keni-section div.csshop-item h3 {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	color: var(--cc-ink);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.6;
}

div.csshop-item h3 a {
	color: var(--cc-ink);
	text-decoration: none;
}

div.csshop-item h3 a:hover,
div.csshop-item h3 a:active,
div.csshop-item h3 a:focus {
	color: var(--cc-accent-ink);
	text-decoration: underline;
}

div.csshop-item div.image {
	margin: 0 16px 10px 0;
}

div.csshop-item div.image img {
	border-radius: var(--cc-r-ui);
}

div.csshop-item div.price {
	color: var(--cc-price);
	font-size: 1.7rem;
	letter-spacing: .01em;
}

div.csshop-item div.shop {
	font-size: 1.3rem;
	color: var(--cc-muted);
}

div.csshop-item div.shop a {
	color: var(--cc-muted);
}

div.csshop-item div.shop a:hover,
div.csshop-item div.shop a:active,
div.csshop-item div.shop a:focus {
	color: var(--cc-accent-ink);
}

div.csshop-item div.description {
	color: var(--cc-ink-2);
	font-size: 1.4rem;
	line-height: 1.8;
}

div.csshop-service-credits {
	color: var(--cc-muted);
	font-size: 1.2rem;
}

div.csshop-page-navi a.page,
div.csshop-page-navi span.current {
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-ui);
	padding: 6px 12px;
}

div.csshop-page-navi span.current {
	border-color: var(--cc-accent);
	background: var(--cc-tint);
	color: var(--cc-accent-ink);
}


/*
# =================================================================
# 13-b. 楽天商品カード（.cc-card）
# ---------------------------------------------------------------
# 記事本文に埋め込まれた <style> が #fff / #e2e2e2 / #c0392b を直書き
# している。body 内の <style> は head のスタイルシートより後に来るため、
# 詳細度で上回る必要がある（.cc-card = 0,1,0 → .article-body .cc-card = 0,2,0）。
# 角丸も 6px なので、サイト全体のパネル 12px に揃える。
# =================================================================
*/

.article-body .cc-cards {
	gap: 14px;
	margin: 2em 0;
}

.article-body .cc-card {
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-panel);
	background: var(--cc-surface);
	transition: border-color .2s var(--cc-ease), box-shadow .2s var(--cc-ease),
		transform .2s var(--cc-ease);
}

.article-body .cc-card:hover {
	border-color: var(--cc-line-2);
	box-shadow: var(--cc-shadow-2);
	transform: translateY(-2px);
}

.article-body .cc-card-img img {
	border-radius: 0;
}

.article-body .cc-card-name {
	color: var(--cc-ink);
}

.article-body .cc-card-name:hover {
	color: var(--cc-accent-ink);
	text-decoration: underline;
}

.article-body .cc-card-price {
	color: var(--cc-price);
}

.article-body .cc-card-review,
.article-body .cc-card-shop,
.article-body .cc-shop-credit {
	color: var(--cc-muted);
}

@media (prefers-reduced-motion: reduce) {

	.article-body .cc-card:hover {
		transform: none;
	}
}


/*
# =================================================================
# 14. コメント
# =================================================================
*/

.comments-area h2 {
	background: transparent;
}

.comment-list,
.comment-respond {
	font-size: 1.5rem;
}

.comment-body {
	border-bottom: 1px solid var(--cc-line);
}


/*
# =================================================================
# 15. ダークモードの補正
# ---------------------------------------------------------------
# 親 base.css / advanced.css には #fff・#f7f7f7・#eee 等が直接
# 書かれた箇所が多い。トークンで拾えないものをここで潰す。
# =================================================================
*/

@media (prefers-color-scheme: dark) {

	.keni-main th {
		color: #fff;
	}

	/* 親が背景色を直書きしている面をサーフェスに寄せる */
	.keni-header_cont .header-mail,
	.keni-footer-panel_wrap,
	.profile-box,
	.review_desc,
	.box_style03,
	.box_style06,
	.voice_styl02,
	.item-box02 .item-box_inner,
	.contact-box_inner,
	.keni-section_outer {
		background-color: var(--cc-surface-2);
		color: var(--cc-ink);
	}

	/* 灰色系の罫線 */
	.keni-breadcrumb-list_wrap,
	.keni-copyright_wrap,
	.comment-body,
	.related-entry-list_style01 > .entry-list_item {
		border-color: var(--cc-line);
	}

	/* ダークでは白背景の画像・ロゴが浮くのでわずかに落ち着かせる */
	.article-body img,
	.entry-list .entry_thumb img,
	div.csshop-item div.image img {
		filter: brightness(.94);
	}

	/* 商品価格はダークでは暖色を持ち上げないと沈む */
	div.csshop-item div.price {
		color: #fb923c;
	}

	.article-body mark,
	.marker,
	.marker_y {
		background: linear-gradient(transparent 62%, rgba(79, 201, 208, .28) 62%);
	}

	::selection {
		background: var(--cc-accent-fill);
		color: #fff;
	}
}


/*
# =================================================================
# 16. 印刷
# =================================================================
*/

@media print {

	.keni-gnav_wrap,
	.keni-sub,
	.page-top,
	.sns-btn_wrap,
	.keni-footer-panel_wrap {
		display: none !important;
	}

	.keni-section_wrap {
		box-shadow: none;
		border: 0;
	}
}