/*
Theme Name: Cocoon Child (Asuka Blog v6)
Theme URI: https://wp-cocoon.com/
Description: あすかの実家じまいブログ用 Cocoon子テーマ v6。30〜50代女性の嗜好調査を踏まえ、紺色系を廃し葡萄鼠・若草鼠・蘇芳という温かみのある配色に再刷新。
Author:
Template: cocoon-master
Version: 9.3.0
*/

/* ==========================================================
   1. カラートークン(v2から継承)
   ========================================================== */
:root {
	--asuka-paper: #E7E3DA;        /* 鈍色がかった生成り(背景) */
	--asuka-paper-deep: #DDD7C9;   /* 生成り濃(カード背景) */
	--asuka-ink: #2A2B2E;          /* 藍墨(本文) */
	--asuka-indigo: #5C4A52;       /* 葡萄鼠(見出し・リンク) ※旧:深藍から変更、温かみを補強 */
	--asuka-moss: #7C8560;         /* 若草鼠(タグ・補助) ※旧:鶯色から変更、爽やかさを補強 */
	--asuka-clay: #7D3C4A;         /* 蘇芳(CTA・強調) */
	--asuka-line: #CBC4B4;         /* 罫線・区切り線 */

	--font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
	--font-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ==========================================================
   2. 全体・本文(v2から継承・タイポグラフィ数理規律を反映)
   ========================================================== */

/* ----- 高PVブログ向けタイポグラフィ変数(本文17px・行高1.6em基準) ----- */
:root {
	--font-base-size: 17px;
	--line-height-base: 1.6em;
	--content-max-width: 780px;
	--letter-spacing-base: 0.06em;
}

html {
	font-size: clamp(15px, 1.4vw + 10px, 17px);
}
body {
	background-color: var(--asuka-paper) !important;
	color: var(--asuka-ink);
	font-family: var(--font-gothic);
	letter-spacing: 0.02em;
}
a {
	color: var(--asuka-indigo);
	text-decoration: none;
	border-bottom: 1px solid rgba(63, 80, 99, 0.35);
	transition: opacity 0.2s ease;
}
a:hover { opacity: 0.7; }

#header-container {
	background: linear-gradient(180deg, var(--asuka-paper-deep) 0%, #FFFFFF 100%) !important;
	border-bottom: 1px solid var(--asuka-line) !important;
	position: relative;
	padding-bottom: 14px;
}

/* キャッチフレーズ(タグライン) */
.site-description {
	position: relative;
	display: inline-block;
	font-family: var(--font-gothic);
	color: var(--asuka-indigo) !important;
	letter-spacing: 0.15em;
	font-size: 0.82rem;
	padding: 0 20px;
}
.site-description::before,
.site-description::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 1px;
	background-color: var(--asuka-clay);
}
.site-description::before { left: -6px; }
.site-description::after { right: -6px; }

.site-name,
.site-name a,
.site-name a:visited {
	border-bottom: none !important;
	text-decoration: none !important;
}
.site-name a, .site-name a:visited {
	font-family: var(--font-mincho) !important;
	color: var(--asuka-ink) !important;
	font-weight: 700;
	font-size: 2.1rem;
	letter-spacing: 0.12em;
	text-shadow: 0 1px 0 rgba(255,255,255,0.6);
	transition: color 0.2s ease, opacity 0.2s ease;
}
.site-name a:hover, .site-name a:visited:hover {
	color: var(--asuka-clay) !important;
	opacity: 0.85;
}
#navi, #navi-in { background-color: var(--asuka-indigo) !important; }
#navi a { color: #FFFFFF !important; font-family: var(--font-gothic); border-bottom: none; }

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
	font-family: var(--font-mincho) !important;
	color: var(--asuka-ink) !important;
	letter-spacing: var(--letter-spacing-base);
	font-weight: 700;
	line-height: 1.25em !important; /* 見出しはタイトな行高で視覚的一体感を保つ */
}
.entry-content h2 {
	background: none !important;
	border: none !important;
	border-left: 4px solid var(--asuka-indigo) !important;
	padding: 6px 0 6px 16px !important;
	margin: 1.8em 0 0.8em !important; /* フォントサイズの1.5〜2倍を目安に調整 */
	font-size: 1.7rem !important; /* ジャンプ率:本文比 約1.7倍 */
}
.entry-content h3 {
	border: none !important;
	border-bottom: 1px dotted var(--asuka-line) !important;
	padding: 4px 0 8px 2px !important;
	margin: 1.5em 0 0.6em !important;
	font-size: 1.3rem !important; /* ジャンプ率:本文比 約1.3倍 */
	color: var(--asuka-moss) !important;
}
.entry-content {
	line-height: var(--line-height-base) !important; /* 1.6em:読書疲労軽減の推奨値 */
	font-size: var(--font-base-size) !important; /* 17px:日本語の読了率が最も高い基準 */
	letter-spacing: var(--letter-spacing-base);
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
}
.entry-content p { margin-bottom: 1.8em; } /* フォントサイズの1.5〜2倍の段落間隔 */
.entry-content strong { color: var(--asuka-clay); font-weight: 700; }

.entry-content blockquote {
	background-color: var(--asuka-paper-deep) !important;
	border: none !important;
	border-radius: 2px;
	padding: 1.8em 1.6em 1.8em 2.2em !important;
	position: relative;
	font-family: var(--font-mincho);
	color: var(--asuka-ink);
	overflow: hidden;
}
.entry-content blockquote::before {
	content: "\300C";
	position: absolute;
	top: -0.3em;
	left: 0.05em;
	font-size: 3.5rem;
	color: var(--asuka-indigo);
	opacity: 0.15;
	font-family: var(--font-mincho);
	line-height: 1;
}
.entry-content ul > li::marker { color: var(--asuka-clay); }
.entry-content hr {
	border: none;
	border-top: 1px dashed var(--asuka-line);
	margin: 3em 0;
}

/* ==========================================================
   3. 【SWELLオマージュ①】チャット形式の会話デザイン
   アイコン(丸型・漢字一文字)+吹き出しが、左右に分かれて
   会話しているように見えるデザイン。左=相手、右=あすか。
   ========================================================== */
.chat-row {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 1.5em 0;
	overflow: visible;
}
.chat-left { justify-content: flex-start; }
.chat-right { justify-content: flex-end; }

.chat-avatar {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 1rem;
	color: #FFFFFF;
	box-shadow: 0 2px 5px rgba(46, 42, 36, 0.15);
}
.chat-left .chat-avatar { background-color: var(--asuka-moss); }
.chat-right .chat-avatar { background-color: var(--asuka-indigo); }

.chat-bubble {
	position: relative;
	max-width: 74%;
	padding: 12px 18px;
	border-radius: 18px;
	font-family: var(--font-gothic);
	line-height: 1.85;
	font-size: 0.96rem;
}

.chat-left .chat-bubble {
	background: #FFFFFF;
	border: 1px solid var(--asuka-line);
	color: var(--asuka-ink);
	border-bottom-left-radius: 4px;
	overflow: visible;
}
/* しっぽ:外側(枠線色)+内側(背景色)の二重構造で継ぎ目をなめらかに */
.chat-left .chat-bubble::before {
	content: "";
	position: absolute;
	left: -9px;
	bottom: 3px;
	width: 0; height: 0;
	border: 9px solid transparent;
	border-right-color: var(--asuka-line);
	border-left: 0;
	z-index: 1;
}
.chat-left .chat-bubble::after {
	content: "";
	position: absolute;
	left: -7px;
	bottom: 4px;
	width: 0; height: 0;
	border: 7px solid transparent;
	border-right-color: #FFFFFF;
	border-left: 0;
	z-index: 2;
}

.chat-right .chat-bubble {
	background: var(--asuka-paper-deep);
	border: 1px solid var(--asuka-indigo);
	color: var(--asuka-ink);
	border-bottom-right-radius: 4px;
	overflow: visible;
}
.chat-right .chat-bubble::before {
	content: "";
	position: absolute;
	right: -9px;
	bottom: 3px;
	width: 0; height: 0;
	border: 9px solid transparent;
	border-left-color: var(--asuka-indigo);
	border-right: 0;
	z-index: 1;
}
.chat-right .chat-bubble::after {
	content: "";
	position: absolute;
	right: -7px;
	bottom: 4px;
	width: 0; height: 0;
	border: 7px solid transparent;
	border-left-color: var(--asuka-paper-deep);
	border-right: 0;
	z-index: 2;
}

/* 発言者名(任意、吹き出し内の先頭に小さく表示したい場合) */
.chat-name {
	display: block;
	font-size: 0.72rem;
	color: #8A7F68;
	margin-bottom: 2px;
	font-family: var(--font-gothic);
}

/* ==========================================================
   3-2. ヘッダー下メニュー(カテゴリータグ風デザイン)
   タイトル下のグローバルナビゲーションを、通常の横並びメニュー
   バーではなく、丸みのあるタグ(ピル)風のボタン群として表示する。
   ========================================================== */
#navi, #navi-in {
	background-color: transparent !important;
	border: none !important;
}

#navi .navi-in ul,
#navi ul.gnav-list {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 0 !important;
	list-style: none;
}

#navi ul li,
#navi ul.gnav-list > li {
	background: none !important;
	border: none !important;
	width: auto !important;
	height: auto !important;
	line-height: normal !important;
}

#navi a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background-color: transparent !important;
	color: var(--asuka-indigo) !important;
	border: 1.5px solid var(--asuka-indigo) !important;
	border-radius: 6px !important;
	padding: 8px 16px !important;
	height: auto !important;
	line-height: 1.4 !important;
	font-family: var(--font-gothic) !important;
	font-size: 0.82rem !important;
	font-weight: 500;
	letter-spacing: 0.03em;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#navi a:hover {
	background-color: var(--asuka-indigo) !important;
	color: #FFFFFF !important;
}

/* サブメニューの矢印などは非表示にして、タグらしいシンプルさを保つ */
#navi .arrow,
#navi .caret {
	display: none !important;
}

/* ==========================================================
   4. 【SWELLオマージュ②】目次(もくじ)デザイン
   Cocoon標準の目次(.toc, #toc)を、和紙の栞のような見た目に。
   ========================================================== */
#toc, .toc {
	background-color: #FFFFFF !important;
	border: 1px solid var(--asuka-line) !important;
	border-left: 5px solid var(--asuka-clay) !important;
	border-radius: 6px !important;
	padding: 1.4em 1.6em !important;
	margin: 2em 0 !important;
	box-shadow: 0 2px 8px rgba(46, 42, 36, 0.05);
}

#toc .toc-title, .toc-title {
	font-family: var(--font-mincho) !important;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--asuka-ink) !important;
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	gap: 8px;
}
#toc .toc-title::before {
	content: "\76EE\6B21"; /* 目次 */
	display: none; /* テキストが元から入っている場合の重複防止、必要に応じて調整 */
}

#toc ol, .toc ol {
	counter-reset: toc-counter;
	padding-left: 0;
}
#toc ol li, .toc ol li {
	list-style: none;
	counter-increment: toc-counter;
	position: relative;
	padding: 0.45em 0 0.45em 1.8em;
	border-bottom: 1px dotted var(--asuka-line);
	font-family: var(--font-gothic);
}
#toc ol li:last-child, .toc ol li:last-child { border-bottom: none; }
#toc ol li::before, .toc ol li::before {
	content: counter(toc-counter, decimal-leading-zero);
	position: absolute;
	left: 0;
	color: var(--asuka-clay);
	font-family: var(--font-mincho);
	font-size: 0.85em;
}
#toc a, .toc a {
	border-bottom: none;
	color: var(--asuka-ink) !important;
}
#toc a:hover, .toc a:hover { color: var(--asuka-indigo) !important; }

/* ==========================================================
   5. 【SWELLオマージュ③】カード型の関連記事・新着記事
   ========================================================== */
.a-post, .post-list-card, .article-card, .related-entry-card {
	background-color: #FFFFFF;
	border: 1px solid var(--asuka-line) !important;
	border-radius: 10px !important;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.a-post:hover, .post-list-card:hover, .article-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(46, 42, 36, 0.10);
}
.a-post .cat-link, .post-list-card .cat-link {
	font-family: var(--font-gothic);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}
.a-post .entry-card-title, .post-list-card .card-title {
	font-family: var(--font-mincho) !important;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--asuka-ink) !important;
}

/* ==========================================================
   6. ボタン・CTA(v2から継承)
   ========================================================== */
input[type="submit"], .wpcf7-submit, .btn_arrow_r, .a-btn {
	background-color: var(--asuka-clay) !important;
	border: none !important;
	color: #FFFFFF !important;
	border-radius: 4px;
	font-family: var(--font-gothic);
	letter-spacing: 0.05em;
	min-height: 44px; /* モバイルでの誤タップ防止(推奨タップ領域) */
	min-width: 44px;
	padding: 10px 20px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
input[type="submit"]:hover, .wpcf7-submit:hover { opacity: 0.85; }

/* ==========================================================
   6-2. サービス紹介用CTAボックス(画像付きアフィリエイト紹介)
   PR表記を明示しつつ、記事内で目立たせたいサービス紹介を
   カード状に囲むデザイン。
   使い方: <div class="asuka-cta-box">の中に画像リンクとテキストを入れる
   ========================================================== */
.asuka-cta-box {
	position: relative;
	background-color: #FFFFFF;
	border: 2px solid var(--asuka-clay);
	border-radius: 12px;
	padding: 28px 24px 24px;
	margin: 2em 0;
	box-shadow: 0 4px 16px rgba(46, 42, 36, 0.08);
	text-align: center;
}

/* 左上の「PR」ラベル */
.asuka-cta-box::before {
	content: "PR";
	position: absolute;
	top: -12px;
	left: 20px;
	background-color: var(--asuka-clay);
	color: #FFFFFF;
	font-family: var(--font-gothic);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 4px 14px;
	border-radius: 999px;
}

.asuka-cta-box .cta-lead {
	font-family: var(--font-mincho);
	font-size: 1.05rem;
	color: var(--asuka-ink);
	margin-bottom: 16px;
	line-height: 1.7;
}

.asuka-cta-box img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 16px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.asuka-cta-box a:hover img {
	transform: scale(1.02);
	opacity: 0.92;
}

.asuka-cta-box .cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--asuka-clay);
	color: #FFFFFF !important;
	font-family: var(--font-gothic);
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 12px 32px;
	border-radius: 999px;
	min-height: 44px;
	text-decoration: none !important;
	border-bottom: none !important;
	transition: opacity 0.2s ease;
}
.asuka-cta-box .cta-button:hover {
	opacity: 0.85;
}

.asuka-cta-box .cta-note {
	display: block;
	font-size: 0.75rem;
	color: #8A7F68;
	margin-top: 12px;
}

/* ==========================================================
   6-2. SNSシェアボタン(統一デザイン)
   Cocoon標準では各SNSのブランドカラー(X=黒、Facebook=青、
   はてブ=青、LINE=緑、Pinterest=赤など)がそのまま使われ、
   派手で統一感がなくなるため、藍墨・蘇芳ベースの落ち着いた
   トーンに統一する。
   ※レイアウト(幅・並び方)には触れず、色だけを上書きする。
   ========================================================== */
.sns-share a,
.sns-share-buttons a,
.share-buttons a,
.snsbtn-position-top a,
.snsbtn-position-bottom a,
a.btn-x, a.btn-facebook, a.btn-hatebu, a.btn-line, a.btn-pinterest, a.btn-copy,
a.share-x, a.share-facebook, a.share-hatebu, a.share-line, a.share-pinterest, a.share-copy,
.snsbtn-x, .snsbtn-facebook, .snsbtn-hatebu, .snsbtn-line, .snsbtn-pinterest, .snsbtn-copy {
	background-color: var(--asuka-ink) !important;
	border-color: var(--asuka-ink) !important;
	color: #FFFFFF !important;
}

/* ホバー時は蘇芳に変化させ、単調になりすぎないようにする */
.sns-share a:hover,
.sns-share-buttons a:hover,
.share-buttons a:hover,
.snsbtn-position-top a:hover,
.snsbtn-position-bottom a:hover,
a.btn-x:hover, a.btn-facebook:hover, a.btn-hatebu:hover,
a.btn-line:hover, a.btn-pinterest:hover, a.btn-copy:hover {
	background-color: var(--asuka-clay) !important;
	border-color: var(--asuka-clay) !important;
}

/* アイコン画像がSVG/フォントアイコンの場合、白抜きに寄せる */
.sns-share a i,
.sns-share-buttons a i,
.share-buttons a i,
.snsbtn-position-top i,
.snsbtn-position-bottom i {
	color: #FFFFFF !important;
}

/* ボタン内テキストのフォントも本文と統一(サイズは元のまま維持) */
.sns-share a,
.sns-share-buttons a,
.share-buttons a {
	font-family: var(--font-gothic) !important;
}

/* ==========================================================
   7. サイドバー・フッター(v2から継承)
   ========================================================== */


.widget-title {
	font-family: var(--font-mincho) !important;
	border-bottom: 2px solid var(--asuka-clay) !important;
	color: var(--asuka-ink) !important;
	letter-spacing: 0.05em;
	font-size: 1.05rem;
	padding-bottom: 8px !important;
}

/* ウィジェット全体を紙のカード風に統一 */
.widget {
	background-color: #FFFFFF !important;
	border: 1px solid var(--asuka-line) !important;
	border-radius: 8px !important;
	padding: 1.4em 1.5em !important;
	margin-bottom: 1.8em !important;
	box-shadow: 0 2px 8px rgba(46, 42, 36, 0.04);
}

/* ウィジェット内のリスト項目 */
.widget ul li {
	font-family: var(--font-gothic);
	padding: 0.55em 0 !important;
	border-bottom: 1px dotted var(--asuka-line) !important;
	font-size: 0.92rem;
}
.widget ul li:last-child { border-bottom: none !important; }
.widget ul li a {
	color: var(--asuka-ink) !important;
	border-bottom: none;
}
.widget ul li a:hover { color: var(--asuka-clay) !important; }

/* 検索ウィジェット */
.widget input[type="search"],
.widget input[type="text"] {
	border: 1px solid var(--asuka-line) !important;
	border-radius: 4px !important;
	font-family: var(--font-gothic);
	padding: 8px 10px !important;
}

.cat-link a, .tag-link a {
	background-color: var(--asuka-moss) !important;
	color: #FFFFFF !important;
	border-radius: 3px;
}
#footer, #footer-in {
	background-color: var(--asuka-ink) !important;
	color: var(--asuka-paper) !important;
}
#footer a {
	color: var(--asuka-paper) !important;
	border-bottom-color: rgba(239, 233, 220, 0.3);
}
/* プロフィールウィジェットの自己紹介文内にあるリンク(あすかについて 等)を、本文より一回り小さく */
.author-description a {
	font-size: 0.82em;
	color: var(--asuka-indigo) !important;
}
.asuka-profile-link {
	font-family: var(--font-mincho);
	font-size: 0.92rem;
	color: #7A6F5C;
	border-top: 1px dashed var(--asuka-line);
	padding-top: 1.2em;
	margin-top: 1.5em;
}

/* ==========================================================
   8-2. 記事一覧カードの装飾(Goodpatch Blogオマージュ)
   ※レイアウト構造(グリッド化)がサイドバーとの位置関係を崩す
   ことが判明したため撤回し、Cocoon標準の縦一列レイアウトの
   ままで、色・タイポグラフィ・情報の見せ方のみ変更する。
   ========================================================== */

/* カード本体(縦一列のまま、白背景・角丸に) */
#list .entry-card-wrap {
	display: block;
	margin-bottom: 28px !important;
}

#list .entry-card {
	background-color: #FFFFFF;
	border: 1px solid var(--asuka-line) !important;
	border-radius: 10px !important;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
	padding: 18px !important;
	gap: 20px !important;
}
#list .entry-card:hover {
	box-shadow: 0 8px 20px rgba(46, 42, 36, 0.10);
}

/* サムネイル:カード内側に収まるよう角丸をつけて独立させる */
#list .entry-card-thumb {
	border-radius: 8px !important;
	overflow: hidden;
}
#list .entry-card-thumb-image {
	object-fit: cover;
	border-radius: 8px;
}

/* 本文エリアの余白をゆったりと(カード自体の余白と合わせて二重に取りすぎないよう調整) */
#list .entry-card-content {
	padding: 4px 4px 4px 0 !important;
	display: grid;
	grid-template-areas:
		"title"
		"tags"
		"date";
}

#list .entry-card-title {
	grid-area: title;
	margin-bottom: 10px !important;
	margin-top: 2px !important;
	line-height: 1.5 !important;
	font-size: 1.3rem !important;
}

/* 本文の抜粋は非表示にし、タイトルのみのシンプルな一覧にする */
#list .entry-card-snippet {
	display: none !important;
}

/* サムネイル上に重なるカテゴリーラベルは不要なため非表示(下部のハッシュタグのみ表示する) */
#list .entry-card-thumb .cat-label {
	display: none !important;
}

/* カテゴリーごとの色分けは、下部のハッシュタグボタン側でのみ適用する */

#list .entry-card-title {
	font-family: var(--font-mincho) !important;
	color: var(--asuka-ink) !important;
}

/* PVカウンター(管理者向け表示)は見た目がうるさいため非表示に */
#list .admin-pv {
	display: none !important;
}

/* .entry-card-metaは箱としては解除し、中身(日付・ハッシュタグ)を
   直接グリッドの構成要素として扱えるようにする */
#list .entry-card-meta {
	display: contents;
}

#list .entry-card-info {
	grid-area: date;
	padding-top: 12px;
	margin-top: 6px;
	border-top: 1px dotted var(--asuka-line);
}

#list .entry-card-info .post-date {
	font-size: 0.72rem;
	color: #8A7F68;
}

/* ハッシュタグはタイトルのすぐ下に配置 */
#list .entry-card-categorys {
	grid-area: tags;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
#list .entry-card-categorys .entry-category {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 500;
	color: #FFFFFF !important;
	background-color: var(--asuka-indigo) !important;
	padding: 5px 14px !important;
	border-radius: 999px !important;
	transition: opacity 0.2s ease;
}
#list .entry-card-categorys .entry-category:hover {
	opacity: 0.8;
}
#list .entry-card-categorys .entry-category::before {
	content: "#";
	margin-right: 2px;
}

/* カテゴリーごとの色分け(下部ハッシュタグボタンにも適用) */
#list .entry-card-categorys .cat-label-8  { background-color: var(--asuka-clay) !important; }
#list .entry-card-categorys .cat-label-9  { background-color: var(--asuka-indigo) !important; }
#list .entry-card-categorys .cat-label-10 { background-color: var(--asuka-moss) !important; }
#list .entry-card-categorys .cat-label-11 { background-color: #6E5A7A !important; }
#list .entry-card-categorys .cat-label-12 { background-color: #7A6A46 !important; }


@media screen and (max-width: 768px) {
	:root {
		--font-base-size: 16px; /* モバイルは16px基準 */
		--line-height-base: 1.6em;
	}
	.entry-content h2 { font-size: 1.4rem !important; padding-left: 12px !important; }
	.entry-content h3 { font-size: 1.15rem !important; }
	.entry-content blockquote { padding: 1.4em 1.2em 1.4em 1.6em !important; }
	.entry-content blockquote::before { font-size: 2.6rem; }
	.site-name a { font-size: 1.15rem !important; }

	/* チャット形式の吹き出しはスマホでは幅を広げ、アイコンを少し小さく */
	.chat-avatar { width: 36px; height: 36px; font-size: 0.85rem; }
	.chat-bubble { max-width: 82%; font-size: 0.92rem; padding: 10px 14px; }

	#toc { padding: 1.1em 1.2em !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--asuka-clay);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}