@charset "utf-8";

/* ============================================================
   スキン「naizou」配布用 CSS
   「skin-kozin」をベースに、サイドバー固定レイアウトへ改変
   ============================================================ */

*,*::before,*::after { box-sizing: inherit; }
html { box-sizing: border-box; }
h1,h2,h3,h4,h5,img,p,ul,ol,li { margin: 0; padding: 0; }
img { border: none; max-width: 100%; }

/* -------------------- */
/* カスタム用色変更欄　この8色だけ変えればサイト全体の配色が変わります */
/* -------------------- */
:root{
	--haikei-iro: #f5f5f5;     /* 全体背景色 */
	--naiyou-iro: #ffffff;     /* 記事内背景色 */
	--koi-iro: #65ab31;        /* ★アクセントカラー：ここを変えればサイト全体の配色が変わります★ */
	--koi-iro-rgb: 101, 171, 49; /* ↑の同じ色のRGB値（透明度付き表現に使用。色を変えるときは必ずこの行も合わせて変更） */
	/* ホバー時の色：アクセントカラーに黄色を10%混ぜた色。--koi-iroを変えれば自動で連動する */
	--koi-iro-hover: color-mix(in srgb, var(--koi-iro) 0%, #cccc3b 100%);
	--mozi-iro: #1a1a1a;       /* メイン文字色 */
	--usu-mozi-iro: #999999;   /* ↑よりちょっと薄い文字色など */
	--siro-mozi: #ffffff;      /* 濃い背景に乗せる白文字 */
	--check-iro: rgba(0,0,0,0.055); /* 背景チェック柄の色 */
	--sidebar-w: 250px;        /* サイドバー幅 */
}

/* 全体共通装飾 */
html, body { height: 100%; margin: 0; }
body {
	font-size: 16px;
	line-height: 1.65;
	font-family: "Hiragino Sans", "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
	background-color: var(--haikei-iro);
	color: var(--mozi-iro);
	overflow-wrap: break-word;
}

/* リンクの装飾 */
a { text-decoration: none; color: var(--koi-iro); }
a:hover { text-decoration: underline dotted; color: var(--koi-iro-hover); }

/* ─── グリッド背景（固定・ウィンドウ全体） ─── */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--check-iro) 1px, transparent 1px),
		linear-gradient(90deg, var(--check-iro) 1px, transparent 1px);
	background-size: 24px 24px;
}

/* ─── スクロールバー（太く・アクセントカラー×白） ─── */
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: var(--koi-iro); }
::-webkit-scrollbar-thumb {
	background: #fff;
	border-radius: 8px;
	border: 3px solid var(--koi-iro);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--koi-iro) 15%, white 85%); }

/* ============================================================
   レイアウト：中央配置 + サイドバー固定
   ============================================================ */
.page-center {
	position: relative;
	z-index: 1;
	max-width: 980px;
	margin: 0 auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.layout { display: flex; flex: 1; }

/* ─── サイドバー（PC用） ─── */
#sidebar {
	width: var(--sidebar-w);
	min-width: var(--sidebar-w);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	padding: 18px 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	scrollbar-width: none; /* Firefox：スクロールバーを非表示 */
	-ms-overflow-style: none; /* 旧Edge：スクロールバーを非表示 */
}
#sidebar::-webkit-scrollbar { display: none; width: 0; } /* Chrome/Safari：スクロールバーを非表示 */

/* サイドバーの内容が画面の高さに収まらず、下に続きがある場合のインジケーター。
   #sidebar内の最後の子要素として配置し、position:stickyでサイドバーの
   表示領域下端に常に追従させる（fixed配置による中央寄せレイアウトとのズレを回避） */
.sidebar-more-indicator {
	display: none;
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48px;
	background: linear-gradient(to bottom, transparent, var(--haikei-iro) 60%);
	pointer-events: none;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 6px;
	z-index: 5;
}
.sidebar-more-indicator .material-icons {
	color: var(--usu-mozi-iro);
	font-size: 26px;
	opacity: 0.8;
}
/* JSでサイドバーがスクロール可能な高さのときだけ.showクラスが付与される */
.sidebar-more-indicator.show { display: flex; }

/* ─── ロゴ（CSS maskでアクセントカラー単色化） ─── */
.logo-wrap { display: flex; justify-content: center; padding-bottom: 10px; }
.logo-link { display: block; width: 100%; max-width: 210px; }
.logo-mask {
	display: block;
	width: 100%;
	aspect-ratio: 1450 / 1550;
	background-color: var(--koi-iro);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color .2s;
}

/* ─── ナビ（フォント拡大・字間ゆとり・罫線なし） ─── */
.site-nav { display: flex; flex-direction: column; gap: 4px; }
.site-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--usu-mozi-iro);
	text-decoration: none;
	cursor: pointer;
	transition: color .12s;
}
.site-nav a:hover { color: var(--koi-iro); text-decoration: none; }
.site-nav a .material-icons { font-size: 21px; color: inherit; }
/* 現在のページを強調：[[SITUATION:CLASS]]がbodyに出力する mode-xxx クラスと
   各ナビリンクのdata-nav属性を組み合わせ、確実にアクティブ判定する。
   home クラスは「1ページ目であれば常に付く」仕様（ギャラリー等でも付与される）のため、
   「モードもスキンも一切指定されていない、純粋なトップページのときだけ付く」
   grandhome クラスを使う */
body.grandhome .site-nav a[data-nav="top"],
body.mode-about .site-nav a[data-nav="about"],
body.mode-gallery .site-nav a[data-nav="gallery"] {
	color: var(--koi-iro);
	font-weight: 700;
}

/* ─── セクションラベル ─── */
.sec-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--usu-mozi-iro);
	text-transform: uppercase;
	margin-top: 10px;
	margin-bottom: 8px;
}
.side-block { margin: 0; }

/* ─── カテゴリ（横）：デフォルトグレー→ホバーでアクセント ─── */
.categoryarea-yoko {
	background: none;
	padding: 0;
	margin: 0;
}
.categoryarea-yoko::before { display: none; } /* 元スキンの重ねアイコンは非表示 */
.categoryarea-yoko .cattree {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	list-style: none;
}
.categoryarea-yoko .cattree li { display: inline-block; margin: 0; }
.categoryarea-yoko .catlink {
	font-size: 11px;
	padding: 3px 9px;
	border-radius: 20px;
	background: #e8e8e8;
	color: #777;
	border: 1px solid #e8e8e8;
	cursor: pointer;
	transition: all .12s;
	text-decoration: none;
	display: inline-block;
}
.categoryarea-yoko .catlink:hover {
	background: var(--koi-iro);
	color: #fff;
	border-color: var(--koi-iro);
	text-decoration: none;
}
.categoryarea-yoko .catlink::before { content: none; } /* 元スキンのアイコン無効化 */
.categoryarea-yoko .num { font-size: 9px; color: inherit; opacity: .7; }

/* ─── タグ：デフォルトグレー→ホバーでアクセント＋太下線 ─── */
.hashtagarea {
	background: none;
	padding: 0;
	margin: 0;
}
.hashtagarea::before { display: none; }
.hashtaglist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 7px;
	list-style: none;
}
.hashtaglist li { display: inline-block; margin: 0; }
.hashtaglist .taglink {
	font-size: 11px;
	color: #999;
	cursor: pointer;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: color .12s, border-color .12s, font-weight .12s;
}
.hashtaglist .taglink:hover {
	color: var(--koi-iro);
	border-bottom: 2px solid var(--koi-iro);
	font-weight: 700;
	text-decoration: none;
}
.hashtaglist .taglink::before { content: '\23'; } /* # */
.hashtaglist .num { font-size: 9px; color: inherit; opacity: .7; }

/* ─── 検索窓：薄いグレー、虫眼鏡アイコンが実際に機能するボタン ─── */
/* [[SEARCHBOX]]が実際に出力するHTML構造（実機で確認済み）：
   .searchboxarea > form.searchbox
     > span.searchinputs（入力欄とボタンの両方を内包する箱）
       > input.queryinput（テキスト入力）
       > span.submitcover（送信ボタンのラッパー）
         > input.submitbutton[type=submit]（送信ボタン本体）
   input[type=submit]はCSS仕様上::before/::afterが効かない置換要素のため、
   虫眼鏡アイコンは親のsubmitcover側に表示する */
.searchboxarea { margin: 0; text-align: left; }
.searchinputs {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 32px;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	box-sizing: border-box;
}
.queryinput {
	display: block;
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	font-size: 12px;
	padding: 0 9px;
	background-color: transparent;
	color: var(--mozi-iro);
	box-sizing: border-box;
}
/* submitbuttonの直接の親であるsubmitcoverを、虫眼鏡を表示するボタンの見た目にする。
   アーカイブの「表示」ボタンも同じ.submitcover構造を使うため、
   検索窓(.searchinputs内)に限定してスコープを絞る */
.searchinputs .submitcover {
	position: relative;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	background-color: var(--koi-iro);
	display: block;
	cursor: pointer;
	transition: background-color .12s;
}
.searchinputs .submitcover:hover {
	background-color: var(--koi-iro-hover);
}
.searchinputs .submitcover::after {
	content: '\e8b6'; /* search アイコン（Material Icons コードポイント） */
	font-family: 'Material Icons';
	font-size: 17px;
	color: #fff;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none; /* アイコンが下のinputへのクリックを邪魔しないようにする */
}
/* submitbutton本体は不可視化しつつ、クリック領域としてsubmitcoverいっぱいに広げる */
.searchinputs .submitbutton {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.searchtarget.limitedsearch { display: none; } /* サイドバーでは省略 */

/* ─── アーカイブ（薄いグレー） ─── */
.dateboxarea { margin: 0; }
.datelimitboxoptions { display: none; }
.datelimitbox select {
	width: 100%;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 5px 7px;
	font-size: 12px;
	outline: none;
	background: #f5f5f5;
	color: var(--mozi-iro);
	box-shadow: none;
	cursor: pointer;
}
.datelimitbox .submitbutton {
	margin-left: 4px;
	padding: 0.3rem 0.6rem;
	border: 0;
	border-radius: 20px;
	background-color: var(--koi-iro);
	color: var(--siro-mozi);
	cursor: pointer;
	font-size: 11px;
}
.datelimitbox .submitbutton:hover { background-color: var(--koi-iro-hover); }

/* ─── RSS・管理リンク（アイコングレー） ─── */
.quick-links { display: flex; flex-direction: column; gap: 4px; }
.quick-links a {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--usu-mozi-iro);
	text-decoration: none;
	padding: 3px 2px;
	cursor: pointer;
	transition: color .12s;
}
.quick-links a:hover { color: var(--koi-iro); text-decoration: none; }
.quick-links a .material-icons { font-size: 16px; color: inherit; }

/* ============================================================
   メインエリア
   ============================================================ */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ─── 吹き出しピル（FREE:TITLE:SUBを表示）：さりげなく控えめなグレーに ─── */
#site-header { padding: 14px 28px 8px; }
.speech-pill {
	display: inline-block;
	background: #eeeeee;
	color: var(--usu-mozi-iro);
	font-size: 16px;
	padding: 6px 18px;
	border-radius: 100px;
	letter-spacing: .03em;
	font-weight: 500;
}

#posts-wrap { flex: 1; padding: 0 28px 20px; }

/* ─── QUICKPOST（投稿フォーム） ─── */
.postarea { margin-bottom: 16px; }
/* postareaの中身が空（ログアウト時の標準挙動）のときは余白も含めて完全に消す保険 */
.postarea:empty { display: none; margin: 0; }
.postform {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 16px;
	background: var(--naiyou-iro);
	line-height: 1.5;
}
textarea.tegalogpost {
	border: 1px #e0e0e0 solid;
	background-color: #fefefe;
	color: var(--mozi-iro);
	padding: 0.5rem;
	box-sizing: border-box;
	width: 100%;
	height: 4.3rem;
	overflow-wrap: break-word;
	overflow: auto;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.5;
}
.postbutton {
	display: inline-block;
	background: var(--koi-iro);
	color: var(--siro-mozi);
	font-size: 0.9rem;
	text-decoration: none;
	padding: 0.3rem 1rem;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}
.postbutton:hover { background-color: var(--koi-iro-hover); }

/* 文字装飾ボタン群 */
.decoBtns { display: inline-block; margin-top: 5px; }
.decoBtns input {
	min-width: 32px; min-height: 28px; margin: 1px;
	color: var(--mozi-iro); background-color: #fefefe;
	border: 1px solid #e0e0e0; cursor: pointer;
	border-radius: 6px; font-size: 0.8rem; vertical-align: middle;
}
.decoBtns input:hover { border: 1px dotted var(--usu-mozi-iro); }
.decoBtnB { font-weight: bold; }
.decoBtnD { text-decoration: line-through; }
.decoBtnE { font-weight: bold; background: linear-gradient(transparent 60%, #ffe082 60%); }
.decoBtnI { font-style: italic; }
.decoBtnT { font-size: 11px !important; }
.decoBtnU { text-decoration: underline; }
.decoBtnC { color: red !important; }
.decoBtnM { background-color: greenyellow !important; }

.catChecks { font-size: 0.9rem; padding-top: 0.5rem; }
.catChecks label { display: inline-block; cursor: pointer; margin: 0 0.75rem 0 0; }
.catChecks input { min-width: 0; min-height: 0; margin-right: 0.2rem; }

select {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 0.3rem;
	background: #fefefe;
	color: var(--mozi-iro);
	box-shadow: none;
	cursor: pointer;
}

/* ─── 状況見出し ─── */
.situation { margin: 0 0 1rem 0; font-size: 0.8rem; color: var(--usu-mozi-iro); line-height: 1.5; }
.situation:empty { display: none; }
.nodata { line-height: 1.5; }

/* 検索結果ページで検索語にハイライトを付ける（元のkozinスキンから踏襲） */
.searchword { font-weight: bold; text-decoration: underline 2px double var(--koi-iro); }

/* ─── 日付境界バー ─── */
.dateseparator {
	margin: 20px 0 10px;
	padding: 7px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--koi-iro);
	color: var(--siro-mozi);
	font-size: 13px;
	font-weight: 700;
	border-radius: 6px;
}
.datereverse, .dateexport { font-size: 0; color: var(--siro-mozi); }
.datereverse::before {
	font-family: 'Material Icons'; content: '\e8d5'; /* swap_vert */
	font-size: 18px;
}
.dateexport { display: none !important; }

/* ============================================================
   文字装飾・カード型リンク（てがろぐ標準機能のスタイル定義）
   ============================================================ */

/* 記事内リストの装飾(余白調整) */
.comment ul, .comment ol { margin: 0.3rem 0; padding-left: 1.5rem; }

/* E:強調(Emphasis) */
/* アクセントカラーを30%の薄さで使用。--koi-iro と --koi-iro-rgb を変えると自動連動する */
.decorationE {
	font-style: normal;
	font-weight: bold;
	background: linear-gradient(transparent 60%, rgba(var(--koi-iro-rgb), 0.3) 60%);
}

/* I:斜体(Italic) */
.decorationI {
	font-family: 'Hiragino Kaku Gothic ProN', '游ゴシック';
	font-style: italic;
}

/* Q:引用(Quote) */
.decorationQ {
	margin: 1rem;
	padding: 0.5rem;
	border: 1px solid var(--koi-iro);
	border-left-width: 10px;
	border-radius: 3px;
	display: block;
}
.decorationQ::before, .decorationQ::after { content: ''; }
.decorationQ + br { display: none; }

/* T:極小文字(Tiny) */
.decorationT { font-size: 0.6rem; }

/* URLが書かれた場合の装飾 */
.url { word-break: break-all; }

/* ─── カード型リンクの装飾 ─── */
.cardlink {
	display: inline-block;
	width: 100%;
	max-width: 500px;
	margin: 0 0.3rem 0.5rem 0;
	font-size: 0.9rem;
	text-decoration: none;
	vertical-align: middle;
}
.cardlink:hover { text-decoration: none; }

.cardlinkbox {
	border: 1px solid var(--usu-mozi-iro);
	border-radius: 0.5rem;
	background-color: #fefefe;
	display: flex;
	overflow: hidden;
	isolation: isolate;
}
.cardlinkbox:hover { opacity: 0.7; }

.cardlinkimage {
	background-color: var(--koi-iro);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.cardlinktextbox {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0.5rem 1rem;
}

.cardlinktitle, .cardlinkdescription, .cardlinkurl {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-clamp: 1;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
}

.cardlinktitle { font-weight: bold; color: #242424; margin-bottom: 0.25rem; }
.cardlinkdescription { line-height: 1.3; color: #999; line-clamp: 2; -webkit-line-clamp: 2; }
.cardlinkurl { font-size: 0.8rem; color: #999; text-align: right; }

/* Sサイズ（横並び） */
.cardsize-S { flex-direction: row; }
.cardsize-S .cardlinkimage { min-width: 100px; min-height: 100px; flex-shrink: 0; }
.cardsize-S .cardlinktextbox { border-left: 1px solid #999; justify-content: center; }
.cardsize-S .cardlinkurl { margin-top: 0.25rem; }

/* Lサイズ（縦並び） */
.cardsize-L { flex-direction: column; }
.cardsize-L .cardlinkimage { aspect-ratio: 1.91 / 1; width: 100%; height: auto; }
.cardsize-L .cardlinktextbox { border-top: 1px solid #999; }
.cardsize-L .cardlinkdescription { min-height: 2rem; }
.cardsize-L .cardlinkurl { border-top: 1px solid #999; margin-top: 0.5rem; padding-top: 0.5rem; font-size: 0.75rem; }

/* ─── 埋め込み動画（YouTube等）：スマホ画面でのはみ出し対策 ─── */
.embeddedmovie {
	display: inline-block;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 500px;
	height: auto;
}
.embeddedmovie iframe,
.embeddedmovie img,
.embeddedmovie video {
	width: 100%;
	height: 100%;
	max-width: 100%;
	display: block;
}

/* ─── 埋め込みツイート（処理前の表示・実際の埋め込みはTwitter側iframeで装飾） ─── */
blockquote.twitter-tweet {
	background-color: #f8f8f8;
	border: 1px dashed #ddd;
	border-radius: 9px;
	margin: 0.3rem 0;
	padding: 1rem;
	font-size: 0.95rem;
	color: #999;
	text-shadow: 1px 1px 1px #fff;
	max-width: 100%;
	box-sizing: border-box;
}
div.twitter-tweet {
	max-width: 350px !important;
	width: 100% !important;
}

/* ─── 本文内画像（埋め込み画像）：通常記事では本来サイズのまま、引き延ばし・トリミングしない ─── */
.embeddedimage {
	max-width: 100%;
	height: auto;
}
.embeddedpictbox {
	margin: 0;
	padding: 0;
	display: inline-table;
	border-collapse: collapse;
	border: none;
	vertical-align: top;
}
.embeddedpictbox figcaption {
	padding: 0.1rem 0.2rem;
	display: table-caption;
	caption-side: bottom;
	font-size: 0.7rem;
	color: var(--usu-mozi-iro);
	line-height: 1.5;
}
.embeddedpictbox img { vertical-align: middle; }
.imagelink {
	display: inline-block;
	line-height: 1;
	font-size: 0;
	vertical-align: top;
}

/* ─── 投稿ボックス（カード） ─── */
.onelogbox, .galmainbox {
	margin: 0 auto 12px auto;
	padding: 22px 18px; /* 上下にゆとりを持たせる（左右は変更なし） */
	border: 1px solid #e0e0e0;
	background-color: var(--naiyou-iro);
	border-radius: 6px;
	width: auto;
	overflow-x: hidden; /* 埋め込みコンテンツのはみ出しを防止 */
}
.comment { font-size: 16px; line-height: 1.85; }
/* 改行（<br>）の間隔は、br要素自体を変更せず、skin-cover.html側のJSで
   br直後に高さを持つ要素を動的挿入する方式で実現している
   （brのdisplayやmarginを直接変更すると改行効果自体に影響するリスクがあるため） */
.comment img { max-width: 100%; border-radius: 4px; display: block; margin: 8px 0; }

/* ─── 投稿フッター（右寄せ：いいね｜カテゴリ　日時｜編集） ─── */
.oneloginfo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	margin: 10px 0 0 0;
	padding-top: 8px;
	border-top: 1px solid #e0e0e0;
	font-size: 13px;
	line-height: 1.6;
	gap: 4px 6px;
	text-align: right;
}
.oneloginfo-sep { color: #e0e0e0; user-select: none; }
/* gapが既に各要素間の間隔を確保しているため、固定幅16pxの追加スペーサーは廃止し、
   カテゴリと日時のブロックの間にだけ少し広めの余白を持たせる */
.oneloginfo-spacer { color: #e0e0e0; user-select: none; }

/* グッドボタン：waveboxへの別ウィンドウリンク */
.iinebtn {
	color: var(--usu-mozi-iro);
	display: inline-flex;
	align-items: center;
	gap: 2px;
	cursor: pointer;
	transition: color .12s;
	text-decoration: none;
}
.iinebtn:hover { color: var(--koi-iro); text-decoration: none; }
.iinebtn .material-icons { font-size: 16px; vertical-align: middle; }

/* カテゴリ（記事内・未分類含めデフォルトグレー→ホバーでアクセント） */
.categories {
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
}
.categorylink {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--usu-mozi-iro);
	border: 0;
	line-height: 1;
	margin: 0;
	padding: 0;
	border-radius: 0;
	transition: color .12s;
}
.categorylink:hover { color: var(--koi-iro); text-decoration: none; }
.categorylink::before {
	content: '\e892'; /* label アイコン */
	font-family: 'Material Icons';
	font-size: 14px;
	vertical-align: middle;
	margin: 0;
}
.categorywavebox { display: none; } /* wavebox個別記事リンクは非表示（サイドバーに集約） */
.catseparator { display: inline-flex; align-items: center; margin: 0; color: var(--usu-mozi-iro); }

/* 日時 */
.datelink { color: var(--usu-mozi-iro); display: inline-flex; align-items: center; gap: 3px; }
.datelink::before {
	content: '\e8b5'; /* schedule アイコン */
	font-family: 'Material Icons';
	font-size: 13px;
}
.postdate:hover .datelink { color: var(--koi-iro); }

/* 編集アイコン */
.editlink { color: var(--usu-mozi-iro); display: inline-flex; align-items: center; transition: color .12s; }
.editlink:hover { color: var(--koi-iro); text-decoration: none; }
.editlink .material-icons { font-size: 15px; vertical-align: middle; }

/* 先頭固定記事の装飾 */
.onelogbox.logstatus-fixed { position: relative; border: 2px solid var(--koi-iro); }
.onelogbox.logstatus-fixed::before {
	content: '\f10d';
	font-family: 'Material Icons';
	font-size: 24px;
	color: var(--koi-iro);
	position: absolute;
	top: -14px;
	right: 10px;
	background: var(--haikei-iro);
}

/* 続きを読む・鍵フォーム送信ボタン */
a.readmorebutton, .passkeysubmit {
	display: inline-block;
	margin: 0.5rem;
	border: 0;
	text-decoration: none;
	color: var(--siro-mozi);
	background-color: var(--koi-iro);
	text-align: center;
	padding: 0.1rem 1rem;
	border-radius: 6px;
	cursor: pointer;
}
a.readmorebutton:hover, .passkeysubmit:hover { background-color: var(--koi-iro-hover); }

/* 折り畳みボタン */
.foldswitch {
	width: fit-content; margin: 0.2rem; padding: 0.4rem 1rem;
	color: var(--siro-mozi); background-color: var(--koi-iro);
	border-radius: 6px; line-height: 1; cursor: pointer;
}
.foldswitch:hover { background-color: var(--koi-iro-hover); color: var(--siro-mozi); }
.decorationO + br { display: none; }

/* 鍵付き投稿 */
.passkeyform { display: block; margin: 0; padding: 0.6rem; }
.passkeyerror {
	display: block; color: var(--siro-mozi); background-color: var(--koi-iro);
	font-weight: bold; line-height: 1; margin: 0 0 0.5rem 0; padding: 0.4rem 0.8rem;
	border-radius: 6px;
}
.passkeybox { display: block; }
.passkeyguide { display: block; margin-bottom: 0.5rem; }
.passkeyinput {
	border: 1px solid #e0e0e0; width: 10rem; padding: 0.2rem;
	font-size: 1rem; background-color: #fefefe; color: var(--mozi-iro); vertical-align: middle;
}

/* ユーティリティリンク */
.utilitylinks { margin: 1.5rem 1rem 0 0; line-height: 1.65; }
.utilitylinks ul { margin: 0.3rem 0; padding-left: 1.5rem; }

/* ─── ページナビゲーション ─── */
.pagenavi { margin-top: 16px; margin-bottom: 40px; text-align: center; }
.pagelinks, .pagehome { margin-top: 1rem; }
.pagenums { margin: 0.8rem; }
a.pagenumlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	text-decoration: none;
	color: var(--mozi-iro);
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	margin-top: 0.3rem;
	font-size: 12px;
}
a.pagenumhere, a.pagenumlink:hover { background-color: var(--koi-iro); color: #fff; border-color: var(--koi-iro); text-decoration: none; }

/* ─── フッター ─── */
footer { margin: 1rem 28px 3rem; text-align: right; }
.poweredby { font-size: 11px; color: var(--usu-mozi-iro); }
.poweredby a { color: inherit; }

/* ─── トップへ戻るボタン（右下ひとつだけ） ─── */
.ue_btn {
	position: fixed;
	z-index: 101;
	bottom: 24px; right: 24px;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--koi-iro);
	display: grid;
	place-items: center;
	transition: background .15s;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.ue_btn:hover { background-color: var(--koi-iro-hover); text-decoration: none; }
.ue_btn .material-icons { color: var(--siro-mozi); font-size: 24px; }

/* ============================================================
   ハンバーガーメニュー（スマホ用）
   ============================================================ */
#hamburger-btn {
	display: none;
	position: fixed;
	top: 14px; left: 14px;
	z-index: 200;
	width: 42px; height: 42px;
	border-radius: 6px;
	background: var(--koi-iro);
	color: #fff;
	border: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
#hamburger-btn .material-icons { font-size: 24px; }

#drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 150;
	background: rgba(0,0,0,.4);
}
#drawer-overlay.open { display: block; }

#drawer {
	position: fixed;
	top: 0; left: 0;
	z-index: 160;
	width: 260px;
	height: 100%;
	background: var(--haikei-iro);
	transform: translateX(-100%);
	transition: transform .25s;
	overflow-y: auto;
	padding: 16px 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
#drawer.open { transform: translateX(0); }
#drawer-close {
	align-self: flex-end;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--usu-mozi-iro);
	padding: 4px;
}
#drawer-close .material-icons { font-size: 22px; }

/* ─── レスポンシブ（620px以下でハンバーガー化） ─── */
@media screen and (max-width: 768px) {
	#sidebar { display: none; }
	#hamburger-btn { display: flex; }
	/* ハンバーガーボタン（固定配置・幅42px+左14px）と被らないよう左に余白を確保 */
	#site-header { padding: 14px 16px 12px 70px; }
	#posts-wrap { padding: 0 14px 16px; }
	.speech-pill { font-size: 13px; padding: 5px 16px; }
	.ue_btn { bottom: 16px; right: 16px; width: 42px; height: 42px; }
	footer { margin: 1rem 14px 3rem; }
	/* 投稿フッター：狭い画面でも折り返しが破綻しないようフォント・余白を圧縮 */
	.oneloginfo { font-size: 11px; gap: 3px 5px; }
	.categorylink::before { font-size: 12px; }
	.categorylink .categoryname,
	.categorylink .nocategory { white-space: nowrap; }
}

/* ============================================================
   ギャラリーモード専用スタイル（一覧表示と同じ色・フォント・余白感で統一）
   ============================================================ */

/* キャプション非表示 */
figcaption { display: none !important; }

/* 画像をグリッド表示 */
.galmainbox {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px 8px;
	background: none !important; /* 通常カードの背景・枠は解除 */
	border: none !important;
	padding: 0 !important;
	margin: 0 0 12px 0 !important;
}

/* 2枚目以降の画像を非表示（ギャラリー内のみ） */
.galmainbox .imagebox :nth-child(n+2) { display: none; }

/* 画像枚数バッジ */
.gallogbox { position: relative; cursor: pointer; }
/* 画像枚数バッジ：控えめな半透明デザインに */
.pictcount {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px 6px;
	top: 5px;
	left: 5px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.35);
	color: rgba(255, 255, 255, 0.85);
	font-size: 10px;
	backdrop-filter: blur(2px);
}
.pictcount .material-icons { font-size: 12px; }

/* 画像本体：ギャラリー内（.galmainbox配下）だけ正方形クロップ。通常記事の画像には影響しない */
.galmainbox .imagebox,
.galmainbox .embeddedimage,
.galmainbox .embeddedimage.nsfw,
.galmainbox .embeddedpictbox {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 6px;
}
.galmainbox .imagelink { width: 100%; height: auto; }

/* 画像に被せる単独記事リンク */
.boxlink { position: relative; line-height: 1; font-size: 0; overflow: hidden; border-radius: 6px; }
.imgpermalink { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.gallogbox:not(.logstatus-lock) .imgpermalink { display: none; }

/* マウスオーバー時、画像をはっきり暗くする */
.boxlink::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background .15s;
	pointer-events: none;
}
.gallogbox:hover .boxlink::after {
	background: rgba(0, 0, 0, 0.35);
}

/* 画像下の日時表示：元記事への導線として復活、ただし主張しすぎないさりげないデザイン */
.galloginfo {
	display: block;
	text-align: center;
	padding: 4px 2px 0;
	margin: 0;
}
.galloginfo .datelink {
	font-size: 10px;
	color: var(--usu-mozi-iro);
	text-decoration: none;
	transition: color .12s;
}
.galloginfo .datelink:hover {
	color: var(--koi-iro);
	text-decoration: none;
}

/* 鍵投稿の代替アイコン */
.logstatus-lock .imagebox { background-color: var(--usu-mozi-iro); position: relative; }
.logstatus-lock .imagebox::before {
	content: '\e897'; /* lock アイコン */
	font-family: 'Material Icons';
	font-size: 48px;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}

/* ギャラリーページのナビでの現在地強調は上部の body.mode-xxx 方式に統合済み */

/* ─── てがろぐ標準Lightboxの表示崩れ対策 ─── */
/* ドロワー・ハンバーガーより手前に出るようz-indexを明示し、横幅制約を受けないようにする */
.lightbox-overlay, .lb-outerContainer, .lb-dataContainer,
[class*="lightbox"], [id*="lightbox"] {
	z-index: 9999 !important;
}