@charset "UTF-8";

/*
 * DAW Store — テーマ刷新レイヤ (issue #83)
 *
 * 賢威8.0 の CSS の後ろに読み込まれ、上から塗り替える。テーマ本体は編集しない。
 *
 * 設計の前提:
 *   全1,952記事のうち、表示できる商品画像は 0 件(実測)。
 *   よって画像を骨格にしたレイアウトは作れない。タイトルが持つ情報
 *   (先頭のブランド名・型番)を主役に置いた、走査できるカタログにする。
 *
 * 色は1アクセント(アンバー)に固定。賢威既定のシアン(#05a5ab / #00858a)と
 * 関連記事見出しのティールを、すべてトークン経由に置き換える。
 */

/* ============================================================
   1. トークン
   ============================================================ */

:root {
	/* アクセントは1色だけ。--accent はテキスト用(白背景で 5.9:1、AA)、
	   --accent-signal は面・インジケータ用で、テキストには使わない。 */
	--daw-accent:        #b45309;
	--daw-accent-hover:  #92400e;
	--daw-accent-signal: #f59e0b;
	--daw-accent-wash:   #fef6ec;
	/* アクセント面の上に載せる文字色。ライトでは濃いアンバーなので白、
	   ダークではアクセント自体が明るいので黒に反転させる。
	   これを固定色にすると、どちらかのモードで必ずコントラストが落ちる。 */
	--daw-on-accent:     #ffffff;

	/* ニュートラルは cool gray 1系統のみ。純黒・純白は使わない。 */
	--daw-ink:      #18181b;
	--daw-ink-soft: #3f3f46;
	--daw-muted:    #52525b;
	--daw-line:     #e4e4e7;
	--daw-line-soft:#f1f1f3;
	--daw-surface:  #fafaf9;
	--daw-card:     #ffffff;

	--daw-radius:      10px;
	--daw-radius-tight: 6px;
	--daw-radius-pill: 999px;

	/* 影は背景の色味に寄せる。純黒の影は使わない。 */
	--daw-shadow:    0 1px 2px rgba(24, 24, 27, .04), 0 8px 24px -12px rgba(24, 24, 27, .10);
	--daw-shadow-lift: 0 2px 4px rgba(24, 24, 27, .05), 0 14px 32px -14px rgba(24, 24, 27, .16);

	--daw-ease: cubic-bezier(.16, 1, .3, 1);

	/* 和文は既存のシステムフォントに任せる。Web フォントは追加しない
	   (本文の95%が日本語。和文 Web フォントは1,952ページに対して
	   LCP 上の負債が大きすぎる)。型番が読めることを優先する。 */
	--daw-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
	            "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--daw-accent:        #fbbf24;
		--daw-accent-hover:  #fcd34d;
		--daw-accent-signal: #f59e0b;
		--daw-accent-wash:   #26200f;
		--daw-on-accent:     #18181b;

		--daw-ink:      #f4f4f5;
		--daw-ink-soft: #d4d4d8;
		--daw-muted:    #a1a1aa;
		--daw-line:     #2e2e33;
		--daw-line-soft:#242428;
		--daw-surface:  #131316;
		--daw-card:     #1b1b1f;

		--daw-shadow:      0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px -12px rgba(0, 0, 0, .60);
		--daw-shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px -14px rgba(0, 0, 0, .70);
	}
}

/* ============================================================
   2. 土台
   ============================================================ */

body,
.keni-container {
	background-color: var(--daw-surface);
	color: var(--daw-ink);
	font-family: var(--daw-font);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.keni-main_wrap,
.keni-main,
.keni-sub {
	background-color: transparent;
}

/* 型番・日付・価格が並ぶので、数字は等幅にして桁を揃える。 */
.entry_date_item,
.entry_title,
.article-header .entry_title,
.page-nav,
.ranking-list {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

a {
	color: var(--daw-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover,
a:active,
a:focus {
	color: var(--daw-accent-hover);
}

/* キーボード操作を見えるようにする。マウス操作では出さない。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--daw-accent);
	outline-offset: 2px;
	border-radius: var(--daw-radius-tight);
}

/* ============================================================
   3. ヘッダー / グローバルナビ
   ============================================================ */

/* 既定の斜めストライプ(シアンのキャンディ柄)をやめて、静かな面にする。 */
.keni-header_wrap {
	background-image: none;
	background-color: var(--daw-card);
	border-bottom: 1px solid var(--daw-line);
}

.keni-header_outer,
.keni-header {
	background-color: transparent;
}

.site-title > a span,
.site-title > a {
	color: var(--daw-ink);
	letter-spacing: -.01em;
	font-weight: 700;
}

.site-title > a:hover span {
	color: var(--daw-accent);
}

.keni-header_desc,
.header-desc {
	color: var(--daw-muted);
}

.keni-gnav_wrap,
.keni-gnav {
	background-color: var(--daw-card);
	border-bottom: 1px solid var(--daw-line);
}

/* ul.keni-gnav_cont も既定で白ベタ。ここを残すとダークモードで
   ナビだけ白い帯になり、ページ内でテーマが反転して見える。 */
.keni-gnav_cont,
.keni-gnav_inner,
.keni-gnav_outer,
.keni-gnav .keni-gnav_cont {
	background-color: transparent;
}

/* 既定は .keni-gnav_inner li a に color:#000 直指定。同じ詳細度で受ける。 */
.keni-gnav a,
.keni-gnav_inner li a {
	color: var(--daw-ink-soft);
	text-decoration: none;
	font-weight: 500;
	transition: color .18s var(--daw-ease), box-shadow .18s var(--daw-ease);
}

.keni-gnav a:hover,
.keni-gnav a:focus {
	color: var(--daw-accent);
	box-shadow: inset 0 -2px 0 var(--daw-accent);
}

/* 現在地を示す。 */
.keni-gnav .current-menu-item > a,
.keni-gnav .current_page_item > a {
	color: var(--daw-accent);
	box-shadow: inset 0 -2px 0 var(--daw-accent);
}

/* ============================================================
   4. パンくず
   ============================================================ */

/* 既定は background:#fff 固定。ダークモードで白帯が残るので面ごと差し替える。 */
.keni-breadcrumb-list_wrap {
	background: var(--daw-card);
	border-top: 1px solid var(--daw-line);
	border-bottom: 1px solid var(--daw-line);
}

.keni-breadcrumb-list,
.keni-breadcrumb_wrap {
	background-color: transparent;
	color: var(--daw-muted);
}

.keni-breadcrumb-list li a {
	color: var(--daw-muted);
}

.keni-breadcrumb-list li a:hover,
.keni-breadcrumb-list li a:active,
.keni-breadcrumb-list li a:focus {
	color: var(--daw-accent);
}

/* ============================================================
   5. 記事一覧 — グレー枠カードから、走査できるカタログへ
   ============================================================ */

/* 賢威既定の斜めストライプ見出し。 */
.archive_title {
	background-image: none;
	background-color: transparent;
	padding: 0 0 12px;
	border-bottom: 2px solid var(--daw-ink);
	color: var(--daw-ink);
	font-size: 2.2rem;
	letter-spacing: -.01em;
}

/*
 * 商品画像は 1件も表示できない(1,939件はアイキャッチ未設定、13件は添付消失)。
 * 「No Image」のグレー枠を1,939個並べる意味は無いので、サムネイル列ごと畳む。
 */
.entry-list .entry_thumb,
.entry-list_style01 .entry_thumb,
.entry-list_style02 .entry_thumb {
	display: none;
}

/* float 前提のレイアウトを解除して Grid に載せ替える。 */
.entry-list,
.entry-list_style01,
.entry-list_style02 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 40px;
	padding: 0;
}

.entry-list_item,
.entry-list > .entry-list_item,
.entry-list_style01 > .entry-list_item,
.entry-list_style02 > .entry-list_item {
	float: none;
	width: auto;
	margin: 0;
	padding: 18px 20px;
	background-color: var(--daw-card);
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius);
	box-shadow: var(--daw-shadow);
	transition: box-shadow .2s var(--daw-ease), border-color .2s var(--daw-ease),
	            transform .2s var(--daw-ease);
}

.entry-list > .entry-list_item:hover,
.entry-list_style01 > .entry-list_item:hover,
.entry-list_style02 > .entry-list_item:hover {
	border-color: var(--daw-accent-signal);
	box-shadow: var(--daw-shadow-lift);
}

.entry-list .entry,
.entry-list .entry_inner {
	overflow: visible;
	font-size: 1.4rem;
}

/*
 * ブランドチップ。
 * content は PHP 側のブランド表から生成した inline CSS が入れる
 * (daw_store_theme_brand_css)。ここでは見た目だけを定義する。
 * ブランドを判定できなかった記事にはチップを出さない。
 */
.daw-has-brand .entry_inner::before,
.daw-has-brand .article-header::before {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 9px;
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius-pill);
	background-color: var(--daw-accent-wash);
	color: var(--daw-accent);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
}

.entry-list .entry_title {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background-color: transparent;
	font-weight: 700;
	font-size: 1.65rem;
	line-height: 1.55;
	letter-spacing: -.005em;
	text-wrap: pretty;
}

.entry-list .entry_title a {
	color: var(--daw-ink);
	text-decoration: none;
	transition: color .18s var(--daw-ease);
}

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

/* メタ行(日付・カテゴリ)は情報の背景に下げる。 */
.entry_status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 10px;
	color: var(--daw-muted);
	font-size: 1.25rem;
}

.entry-list_style01 .entry_status > ul,
.entry_status > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
}

.entry-list_style01 .entry_status .entry_date_item,
.entry_status .entry_date_item {
	list-style: none;
	font-size: 1.25rem;
	color: var(--daw-muted);
}

/* 既定は #f0efe9 のベタ塗り。ダークモードで「明るい札に薄い字」になり
   コントラストが 2.22 まで落ちるので、枠線だけのチップにする。 */
.entry_category_item,
.entry_status .entry_category_item {
	display: inline-block;
	margin: 0;
	padding: .2em .7em;
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius-pill);
	background: transparent;
	font-size: 1.15rem;
	line-height: 1.6;
}

.entry_category_item a,
.entry_status .entry_category_item a {
	color: var(--daw-muted);
	text-decoration: none;
}

.entry_category_item a:hover,
.entry_category_item a:focus,
.entry_status .entry_category_item a:hover,
.entry_status .entry_category_item a:focus {
	color: var(--daw-accent);
}

/*
 * 抜粋は、実のある文がある記事だけに出す。
 * 1,952件中1,665件は本文が完全に空で、抜粋も空になる(issue #84)。
 * 空の器を並べて余白だけ増えるのを避けるため、PHP 側で付けた
 * .daw-has-excerpt が無い記事では畳む。
 */
.entry_description {
	display: none;
}

.daw-has-excerpt .entry_description {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 12px;
	color: var(--daw-muted);
	font-size: 1.35rem;
	line-height: 1.75;
}

/* 大きな枠線ボタンをやめ、静かなテキストリンクにする。 */
.entry-list_style01 .ently_read-more,
.ently_read-more {
	float: none;
	width: auto;
	margin: 0;
	text-align: left;
}

.ently_read-more .btn,
.ently_read-more .btn.dir-arw_r {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--daw-accent);
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.6;
	text-decoration: none;
	transition: color .18s var(--daw-ease), transform .18s var(--daw-ease);
}

.ently_read-more .btn:hover,
.ently_read-more .btn:focus {
	color: var(--daw-accent-hover);
	text-decoration: underline;
}

.ently_read-more .btn:active {
	transform: translateY(1px);
}

/* 一覧のSNSボタンは PHP 側で出力を止めているが、
   オプションが戻された場合に崩れないよう保険で詰めておく。 */
.entry-list_item .sns-btn_wrap {
	margin-top: 12px;
}

@media (min-width: 768px) {
	/* 1,952件を走査する前提なので、デスクトップは2列にして
	   1画面あたりの件数を稼ぐ。 */
	.entry-list,
	.entry-list_style01,
	.entry-list_style02 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.entry-list_style02 > .entry-list_item,
	.entry-list_style02 .entry-list_item:nth-child(2n) {
		width: auto;
		margin: 0;
	}

	.entry-list .entry_title {
		font-size: 1.7rem;
	}
}

/* 高変化のレイアウトはモバイルで必ず1列に畳む。 */
@media (max-width: 767px) {
	.entry-list,
	.entry-list_style01,
	.entry-list_style02 {
		grid-template-columns: 1fr;
	}

	.entry-list_item,
	.entry-list > .entry-list_item {
		padding: 16px;
	}
}

/* ============================================================
   6. 記事詳細
   ============================================================ */

.keni-section_wrap.article_wrap,
.keni-section {
	background-color: var(--daw-card);
	border-color: var(--daw-line);
}

.article_wrap {
	border-radius: var(--daw-radius);
	border: 1px solid var(--daw-line);
	box-shadow: var(--daw-shadow);
}

/* 賢威既定の斜めストライプが記事上部にも出るので消す。 */
.keni-section_wrap.article_wrap::before,
.article_wrap::before {
	background-image: none;
}

.article-header .entry_title,
.keni-section h1.entry_title {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--daw-ink);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.015em;
	text-wrap: pretty;
}

@media (min-width: 768px) {
	.article-header .entry_title,
	.keni-section h1.entry_title {
		font-size: 3rem;
	}
}

/* 本文は 1行の文字数を抑えて読めるようにする。 */
.article-body {
	color: var(--daw-ink-soft);
	font-size: 1.55rem;
	line-height: 1.95;
}

.article-body p {
	margin-bottom: 1.6em;
	max-width: 42em;
	text-wrap: pretty;
}

.article-body h2,
.article-body h3,
.article-body h4 {
	color: var(--daw-ink);
	letter-spacing: -.01em;
}

/* 記事詳細のシェアボタンは残すが、主張を下げる。 */
.sns-btn_wrap {
	margin: 18px 0;
}

.sns-btn_wrap ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sns-btn_wrap li {
	list-style: none;
	flex: 0 1 auto;
}

/* 既定は rgba(255,255,255,.85) の白ベタ。ダークモードで白い札が残る。
   記事下の共有バー(.sns-btn_wrap_style02 等)は #f7f7f7 の帯を敷くので
   そちらも面ごと透過させる。 */
.sns-btn_wrap > div,
.sns-btn_wrap > ul > li,
.sns-btn_wrap li.btn_share,
.sns-btn_wrap_style01,
.sns-btn_wrap_style02,
.sns-btn_wrap_style03 {
	background-color: transparent;
}

.sns-btn_wrap li.btn_share {
	color: var(--daw-muted);
}

/*
 * 既定は各SNSのブランド色を文字色に使う(Twitter #1da1f2 等)。
 * ブランド色は白背景でも 2.8:1 程度しか出ず AA を満たさない。
 * シェア数はいずれも0で、色で主張する価値も無いため、中立に倒す。
 * 詳細度は base.css の `.sns-btn_wrap > .sns-btn_tw a` に合わせる。
 */
.sns-btn_wrap a,
.sns-btn_wrap > div a,
.sns-btn_wrap > .sns-btn_tw a,
.sns-btn_wrap > .sns-btn_fb a,
.sns-btn_wrap > .sns-btn_hatena a,
.sns-btn_wrap > .sns-btn_line a,
.sns-btn_wrap > .sns-btn_pocket a,
.sns-btn_wrap > .sns-btn_feedly a {
	border-radius: var(--daw-radius-tight);
	border: 1px solid var(--daw-line);
	background: transparent;
	color: var(--daw-muted);
	transition: border-color .18s var(--daw-ease), color .18s var(--daw-ease);
}

.sns-btn_wrap a span,
.sns-btn_wrap > div a span {
	color: inherit;
}

.sns-btn_wrap a:hover,
.sns-btn_wrap a:focus,
.sns-btn_wrap > div a:hover,
.sns-btn_wrap > div a:focus {
	border-color: var(--daw-accent);
	color: var(--daw-accent);
}

.post-tag {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--daw-line);
	font-size: 1.3rem;
}

.post-tag dt {
	color: var(--daw-muted);
}

.post-tag a {
	color: var(--daw-muted);
	text-decoration: none;
}

.post-tag a:hover,
.post-tag a:focus {
	color: var(--daw-accent);
}

/* ============================================================
   7. アフィリエイトウィジェット (cs-shop)
   ============================================================ */

.csshop-search-form {
	margin: 24px 0;
	padding: 16px;
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius);
	background-color: var(--daw-surface);
}

.csshop-search-form input[type="text"],
.csshop-search-form select,
.csshop-search-form input,
.article-body .csshop-search-form input[type="text"],
.article-body .csshop-search-form select {
	padding: 8px 10px;
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius-tight);
	background-color: var(--daw-card);
	color: var(--daw-ink);
	font-family: inherit;
	font-size: 1.4rem;
}

.csshop-search-form input[type="text"]::placeholder {
	color: var(--daw-muted);
}

.csshop-service-credits {
	margin-top: 16px;
	opacity: .75;
}

.csshop-service-credits img {
	height: auto;
}

/* ============================================================
   8. 関連記事 / ランキング / サイドバー
   ============================================================ */

/* 賢威既定ではティールのベタ塗り見出し。アクセント1色の原則に合わせる。 */
.keni-section .sub-section_title,
.keni-section h2.sub-section_title,
.keni-related-area .keni-related-title,
.keni-section h2.keni-related-title,
h2.keni-related-title,
.comments-area .comment-reply-title,
h2.comment-reply-title,
.comments-area .screen-reader-text,
h2.screen-reader-text {
	background: none;
	background-color: transparent;
	margin: 0 0 6px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid var(--daw-ink);
	border-radius: 0;
	color: var(--daw-ink);
	font-size: 1.8rem;
	letter-spacing: -.01em;
}

.keni-related-area,
.keni-section_wrap_style02 {
	background: none;
	background-color: transparent;
}

/* 関連記事・ランキングのサムネイルも実体が無く no-image.jpg なので畳む。 */
.related-entry-list .related-entry_thumb,
.related-entry-list_style01 .related-entry_thumb,
.related-entry-list_style02 .related-entry_thumb,
.widget_recent_entries_img .widget_recent_entries_img_thumb,
.ranking-list .ranking-list_thumb {
	display: none;
}

.related-entry-list,
.related-entry-list_style01,
.related-entry-list_style02 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.related-entry-list_style02 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 24px;
	}
}

.related-entry-list .related-entry-list_item,
.related-entry-list_item,
.related-entry-list_style01 > .entry-list_item,
.related-entry-list_style02 .related-entry-list_item {
	float: none;
	width: auto;
	margin: 0;
	padding: 12px 0;
	background-color: transparent;
	border-bottom: 1px solid var(--daw-line-soft);
}

/* 既定の padding:15px は、左に浮いた90px のサムネイルを避けるためのもの。
   サムネイルを畳んだので、その余白も要らない。 */
.related-entry-list_style01 .related-entry_title,
.related-entry-list_style02 .related-entry_title,
.related-entry_title {
	margin: 0;
	padding: 0;
}

/* 既定は .related-entry-list .related-entry_title a に color:#000。
   同じ詳細度で受けないとダークモードで黒字が沈む。 */
.related-entry-list .related-entry_title a,
.related-entry-list_style01 .related-entry_title a,
.related-entry-list_style02 .related-entry_title a,
.related-entry_title a {
	color: var(--daw-ink-soft);
	text-decoration: none;
	font-size: 1.4rem;
	line-height: 1.65;
}

.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(--daw-accent);
}

.keni-sub .widget,
.keni-sub .sub-section {
	margin-bottom: 26px;
	background-color: transparent;
}

/*
 * 人気記事ランキング (Keni_PV_Widget)。
 *
 * 既定では <li> の inline style で no-image.jpg を背景に敷き、その上に
 * 白文字のタイトルを 200px の箱で重ねる。画像が1件も無いこのサイトでは
 * 「グレーの箱に白文字」が5つ並ぶだけになる。
 * 背景を外し、順位バッジ + タイトルの素の行にする。
 *
 * 背景は inline style なので !important でしか外せない。
 * テーマは既に counter-increment: num を li に付けているので、
 * 順位の数字はその counter をそのまま使う。
 */
/* 既定は 200px 固定高・最大幅300px・中央寄せの「画像タイル」。
   画像を外す以上、高さも幅も内容に合わせる。 */
.widget_recent_entries_img03 .list_widget_recent_entries_img li,
.widget_recent_entries_img03 .list_widget_recent_entries_img > li,
.widget_recent_entries_ranking .list_widget_recent_entries_img > li {
	background-image: none !important;
	background-color: transparent;
	border-bottom: 1px solid var(--daw-line-soft);
	height: auto;
	max-width: none;
	margin: 0;
	overflow: visible;
}

.widget_recent_entries_ranking .list_widget_recent_entries_img {
	margin: 0;
	padding: 0;
	counter-reset: num;
}

.widget_recent_entries_ranking .list_widget_recent_entries_img > li {
	position: relative;
	counter-increment: num;
	list-style: none;
	padding: 11px 0 11px 32px;
}

/* 既定は角の三角リボン。丸バッジに置き換える。 */
.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: 11px;
	left: 0;
	z-index: 1;
	width: 21px;
	height: 21px;
	border: 0;
	border-radius: var(--daw-radius-pill);
	background-color: var(--daw-line);
	content: "";
}

.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: 11px;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	color: var(--daw-ink);
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* 1位だけアンバーで示す。2位以降はニュートラル。 */
.widget_recent_entries_ranking .list_widget_recent_entries_img > li:nth-child(1)::before {
	background-color: var(--daw-accent-signal);
}

.widget_recent_entries_ranking .list_widget_recent_entries_img > li:nth-child(1)::after {
	color: #1c1917;
}

.widget_recent_entries_ranking .list_widget_recent_entries_img > li:nth-child(2)::before,
.widget_recent_entries_ranking .list_widget_recent_entries_img > li:nth-child(3)::before {
	background-color: var(--daw-line);
}

/* 200px の箱と白文字を解除する。 */
.widget_recent_entries_img03 .list_widget_recent_entries_img .widget_recent_entries_img_entry_title {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background-color: transparent;
	font-size: 1.35rem;
	line-height: 1.65;
}

.widget_recent_entries_img03 .list_widget_recent_entries_img .widget_recent_entries_img_entry_title a,
.widget_recent_entries_img03 .list_widget_recent_entries_img a {
	display: block;
	padding: 0;
	color: var(--daw-ink-soft);
	text-decoration: none;
	vertical-align: baseline;
}

.widget_recent_entries_img03 .list_widget_recent_entries_img a:hover,
.widget_recent_entries_img03 .list_widget_recent_entries_img a:focus {
	color: var(--daw-accent);
}

/* カテゴリ一覧などのウィジェット。
   既定は color:#000 直指定。ダークモードで黒字が背景に沈む
   (実測コントラスト 1.22)ので、同じ詳細度で上書きする。 */
.keni-sub .widget li {
	border-bottom: 1px solid var(--daw-line-soft);
}

.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,
.widget_recent_entries .keni-section ul li a,
.widget_recent_comments .keni-section ul li a,
.widget_rss .keni-section ul li a,
.widget_meta .keni-section ul li a,
.keni-sub .widget a {
	color: var(--daw-ink-soft);
	text-decoration: none;
}

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

/* サイドバー見出しのリンクは既定で色 #fff 固定。 */
.keni-section .sub-section_title a {
	color: var(--daw-ink);
}

/* ============================================================
   9. 検索フォーム
   ============================================================ */

/* 絶対配置に頼らず、フォーム自体を行にする(入力欄とボタンがずれない)。 */
.search-box {
	position: static;
}

.searchform {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius);
	background-color: var(--daw-card);
	overflow: hidden;
}

.searchform:focus-within {
	border-color: var(--daw-accent);
}

.searchform input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	padding: 10px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--daw-ink);
	font-family: inherit;
	font-size: 1.4rem;
}

.searchform input[type="text"]:focus {
	outline: none;
}

.searchform input[type="text"]::placeholder {
	color: var(--daw-muted);
}

.searchform .btn-search {
	flex: 0 0 auto;
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transform: none;
}

.searchform .btn-search:active {
	transform: translateY(1px);
}

/* 検索アイコンは黒い SVG なので、ダークモードでは反転させる。 */
@media (prefers-color-scheme: dark) {
	.searchform .btn-search img,
	.btn-search img {
		filter: invert(1) opacity(.8);
	}
}

/* ============================================================
   10. ページネーション
   ============================================================ */

.page-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0;
	padding: 0;
}

/* li 自体にも白ベタが乗っている(.page-nav_next / _prev)。
   面は a 側で持たせ、li は透過させる。 */
.page-nav li,
.page-nav li.page-nav_next,
.page-nav li.page-nav_prev,
.page-nav ol,
.page-nav ul {
	list-style: none;
	background-color: transparent;
}

/* 「次へ」「前へ」は base.css で色を直指定されている。 */
.page-nav a,
.page-nav li a,
.page-nav li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius-tight);
	background-color: var(--daw-card);
	color: var(--daw-ink-soft);
	text-decoration: none;
	transition: border-color .18s var(--daw-ease), color .18s var(--daw-ease);
}

.page-nav .current,
.page-nav li a:hover,
.page-nav li a:active,
.page-nav li a:focus {
	background: var(--daw-accent);
	border-color: var(--daw-accent);
	color: var(--daw-on-accent);
}

.page-nav li a:active {
	transform: translateY(1px);
}

/* ============================================================
   11. 汎用ボタン / 賢威のパーツ色を1アクセントに寄せる
   ============================================================ */

.btn_style01 { color: var(--daw-accent); }

.btn_style02 {
	background-color: var(--daw-surface);
	color: var(--daw-accent);
}

.btn_style03 { background: var(--daw-accent); color: var(--daw-on-accent); }

.toc_title,
.toc-area_inner .toc-area_list > li::before,
.list_style02 li::before,
.dl_style02 dt,
.accordion-list dt,
.item-box .item-box_title,
.item-box02 .item-box_title,
.item-box03 .item-box_title,
.ranking-list .review_desc_title,
.cast-box .cast_name,
.cast-box_sub .cast_name,
.voice-box .voice_title,
.commentary-box .commentary-box_title,
.contact-box_tel,
.form-mailmaga .form-mailmaga_title,
.form-login .form-login_title,
.form-login-item .form-login_title,
.tagcloud a::before {
	color: var(--daw-accent);
}

.toc-area_inner .toc-area_list > li::before,
.list_style02 li::before,
.dl_style02 dt,
.accordion-list dt,
.item-box02 .item-box_title,
.item-box03 .item-box_title,
.chat_style02 .bubble {
	background: var(--daw-accent);
	color: var(--daw-on-accent);
}

.dl_style02 dd,
.profile-box,
.review_desc,
.box_style01 .box_inner,
.box_style03,
.box_style06,
.voice_styl02,
.item-box02 .item-box_inner,
.contact-box_inner,
q {
	background-color: var(--daw-accent-wash);
}

/* 斜めストライプの背景を使っているパーツをすべて静かな面に置き換える。 */
.item-box02,
.contact-box,
.voice_styl03,
.widget .cast-box_sub .cast-box_sub_title {
	background-image: none;
	background-color: var(--daw-accent-wash);
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius);
}

.keni-section h1 a:hover, .keni-section h1 a:active, .keni-section h1 a:focus,
.keni-section h3 a:hover, .keni-section h3 a:active, .keni-section h3 a:focus,
.keni-section h4 a:hover, .keni-section h4 a:active, .keni-section h4 a:focus,
.keni-section h5 a:hover, .keni-section h5 a:active, .keni-section h5 a:focus,
.keni-section h6 a:hover, .keni-section h6 a:active, .keni-section h6 a:focus,
.keni-link-card_title a:hover, .keni-link-card_title a:active, .keni-link-card_title a:focus,
.widget_recent_entries_img .list_widget_recent_entries_img .widget_recent_entries_img_entry_title a:hover,
.widget_recent_entries_img .list_widget_recent_entries_img .widget_recent_entries_img_entry_title a:focus,
.calendar tfoot td a:hover, .calendar tfoot td a:active, .calendar tfoot td a:focus {
	color: var(--daw-accent);
}

.keni-link-card_wrap .keni-link-card {
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius);
	background-color: var(--daw-card);
}

/* ============================================================
   12. フッター
   ============================================================ */

.keni-footer_wrap,
.keni-footer {
	background-color: var(--daw-card);
	border-top: 1px solid var(--daw-line);
	color: var(--daw-muted);
}

.keni-footer a,
.keni-footer_wrap a,
.keni-footer_outer .footer-menu li a {
	color: var(--daw-muted);
	text-decoration: none;
}

.keni-footer a:hover,
.keni-footer a:focus,
.keni-footer_outer .footer-menu li a:hover,
.keni-footer_outer .footer-menu li a:focus {
	color: var(--daw-accent);
	text-decoration: underline;
}

.keni-footer_outer,
.keni-footer-cont,
.menu-men-container {
	background-color: transparent;
}

.keni-copyright {
	color: var(--daw-muted);
	font-size: 1.2rem;
}

/* モバイルの固定ユーティリティバー(シェア・目次等)。
   既定は #f7f7f7 の明るい帯で、ダークモードだと下端だけ白く光る。 */
.keni-footer-panel,
.keni-footer-panel .utility-menu,
.utility-menu {
	background-color: var(--daw-card);
	border-top: 1px solid var(--daw-line);
	color: var(--daw-ink-soft);
}

.keni-footer-panel .utility-menu li,
.keni-footer-panel .utility-menu_item,
.keni-footer-panel_sns,
.keni-footer-panel_outer,
.utility-menu li {
	background-color: transparent;
	color: var(--daw-ink-soft);
}

.keni-footer-panel a,
.keni-footer-panel .utility-menu_item a,
.utility-menu a,
.utility-menu_item a {
	color: var(--daw-ink-soft);
}

.keni-footer-panel a:hover,
.keni-footer-panel a:focus {
	color: var(--daw-accent);
}

/* ページトップへ戻るボタン。 */
.page-top a,
#page-top a {
	background-color: var(--daw-ink);
	color: var(--daw-surface);
	border-radius: var(--daw-radius);
}

.page-top a:hover,
#page-top a:hover {
	background-color: var(--daw-accent);
}

/* ============================================================
   12.5 前後記事ナビ / コメントフォーム
   ============================================================ */

/* 既定は color:#000 直指定。 */
.link-next a,
.link-back a,
.nav-links .nav-next a,
.nav-links .nav-previous a {
	color: var(--daw-ink-soft);
	background-color: transparent;
	text-decoration: none;
}

/* ページャの前後リンクは、他のページ番号と同じ面に揃える。 */
.page-nav .page-nav_prev a,
.page-nav .page-nav_next a,
.page-nav_prev a,
.page-nav_next a {
	color: var(--daw-ink-soft);
	background-color: var(--daw-card);
	text-decoration: none;
}

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

/* 必須バッジ。既定の #eb3b54 は白抜き文字で 3.97:1 しか出ない(AA未達)。
   赤のままコントラストだけ上げる。 */
.required,
.comment-form .required,
.comment-form_item_title .required {
	background-color: #c2183a;
	color: #fff;
}

.link-next a:hover,
.link-next a:focus,
.link-back a:hover,
.link-back a:focus {
	color: var(--daw-accent);
}

.link-next,
.link-back {
	border-color: var(--daw-line);
}

.comments-area,
.comment-respond,
.comment-form,
.comment-form_item_input,
.comment-form_item_textarea,
.comment-form_item {
	background-color: transparent;
	color: var(--daw-ink-soft);
}

/* ラベル行は既定で薄いグレーの帯 + 黒文字。両方トークンに寄せる。 */
.comment-form_item_title,
.comment-form label,
.comment-form_item_title label {
	background-color: var(--daw-line-soft);
	color: var(--daw-ink);
}

.comment-form .required,
.comment-form_item_title .required {
	color: #fff;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	padding: 10px 12px;
	border: 1px solid var(--daw-line);
	border-radius: var(--daw-radius-tight);
	background-color: var(--daw-card);
	color: var(--daw-ink);
	font-family: inherit;
	font-size: 1.4rem;
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
	color: var(--daw-muted);
}

.comment-form input[type="submit"],
.comment-form #submit {
	padding: 12px 28px;
	border: 0;
	border-radius: var(--daw-radius-tight);
	background-color: var(--daw-accent);
	color: var(--daw-on-accent);
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .18s var(--daw-ease);
}

.comment-form input[type="submit"]:hover,
.comment-form #submit:hover {
	background-color: var(--daw-accent-hover);
}

.comment-form input[type="submit"]:active,
.comment-form #submit:active {
	transform: translateY(1px);
}

/* ============================================================
   13. 404 / 検索結果
   ============================================================ */

.keni-section .not-found,
.search-no-results .keni-section {
	color: var(--daw-muted);
}

/* ============================================================
   14. 画像まわりの保険
   ============================================================ */

/*
 * src が空の img はブラウザが破損アイコンを出す。
 * 発生源は PHP 側(daw_store_theme_drop_orphan_thumbnail)で塞いでいるが、
 * 別経路から出た場合に破損アイコンを見せないための保険。
 */
img[src=""],
img:not([src]) {
	display: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   15. モーション
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}