@charset "utf-8";

/* ………………………………………………………………………………………………………………… */
/* てがろぐ -Fumy Otegaru Memo Logger- シンプル日記スキン用スタイルシート for Ver 4.5.5＋ */
/* ………………………………………………………………………………………………………………… */
/* ※装飾面のカスタマイズ方法については、配布サイト内にある「カスタマイズ方法」ページ https://www.nishishi.com/cgi/tegalog/custom/ の『装飾のカスタマイズ方法』区画にある解説や記述例もご参照下さい。 */

/* Table of Contents：
   -------------------
	■全体共通装飾
		▼リンクの装飾
		▼URLが書かれた場合の装飾
		▼カード型リンクの装飾
		▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字
		▼自由装飾用の装飾の例
		▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像
		▼埋め込み画像
		▼埋め込み動画
		▼埋め込みTweet
		▼検索語のハイライト

	■ページ最上部(ヘッダ)領域
		▼検索ボックス
		▼タイトル区画

	■入力フォームの表示領域
		▼本文入力区画
		▼投稿コントロール部分(ボタンや字数カウンタなど)
		▼投稿ボタン
		▼文字装飾ボタン群
		▼カテゴリ選択チェックボックス群

	■メイン(ログ掲載)領域
		▼表示対象の限定時などの「限定条件」表示行
		▼日付境界バー

	■投稿ボックス(一発言)ごとの表示
		▼ヘッダ
			▽先頭矢印
			▽投稿日時
			▽ボタンリンク
			▽カテゴリ名
			▽New!サイン部分
		▼投稿本文
			▽本文内に含まれるハッシュタグリンク

	■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾
		▼鍵違いエラーの表示
		▼入力フォーム枠
			▼入力欄前のガイド文
			▼鍵入力欄
			▼送信ボタン

	■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾

	■ページナビゲーション領域
		▼ページ前後移動リンク群ボックス全体
		▼ページ番号リンク群ボックス全体
		▼限定解除リンク(＝HOMEに戻るリンク)

	■フリースペース領域

	■サブ領域
		▼ハッシュタグリスト区画
		▼日付別リスト区画
		▼カテゴリツリー区画
			▼カテゴリツリー内の各要素（アイコン・カテゴリ名・該当件数・概要等）
		▼新着投稿リスト区画
		▼画像一覧リスト区画
		▼カレンダー区画
		▼汎用サブ区画

	■ページ最下部(フッタ)領域
*/

/* 変数 */
:root {
  --accent: #D11C2C;
  --back: #EEEEEE;
  --hover: #6B0E17;
  --text-color: #494340;
  --pale-text-color: #b8b8b8;
  --white-text-color: #fefefe;
  --btn-bg-color: #fefefe;

  --highlight: #FFD3DC;
}

/* リセットスタイル */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Quicksand", YuGothic, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--back);
}



	/* -------------- */
	/* ▼リンクの装飾 */
	/* -------------- */

a {
  text-decoration: none;
  color: var(--accent); /* 赤 (#D11C2C) */
  transition: color 0.3s ease; /* 色の変化をふわっと */
}

a:hover {
  color: var(--hover); /* 濃い赤 (#6B0E17) */
}
	/* ------------------------- */
	/* ▼URLが書かれた場合の装飾 */
	/* ------------------------- */
	.url {
		word-wrap: break-word;		/* 自動リンクのはみ出しを防ぐ */
		overflow-wrap: break-word;
	}

	/* ---------------------- */
	/* ▼カード型リンクの装飾 */
	/* ---------------------- */
	.cardlink {
		display: inline-block;
		width: 100%;
		max-width: 500px;			/* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
		padding: 0 0.25em 0.5em 0;	/* 内側の余白量 */
		font-size: 0.9rem;			/* 文字サイズ */
		text-decoration: none;		/* リンク文字の下線を消す */
		vertical-align: middle;		/* 行内の上下方向では中央配置 */
	}

		/* ------------------------------------- */
		/* リンクカードの装飾(サイズS/L共通部分) */		/* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
		/* ------------------------------------- */
		/* カード外枠 */
		.cardlinkbox {
			border: 1px solid #ccc;		/* 枠線 */
			border-radius: 7px;			/* 角丸 */
			background-color: white;	/* 背景色 */
			display: flex;				/* 内部レイアウトのFlexbox化 */
		}
		/* (マウスが載ったとき) */
		.cardlinkbox:hover {
			background-color: #f5fff5;	/* 背景色 */
			border-color: var(--accent);			/* 枠線色 */
		}
			/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
			.cardlinkimage {
				background-image: linear-gradient(-30deg,  var(--accent), #e0f0e0);		/* プレースホルダ的な背景グラデーション(※og:imageの画像指定が読み込まれたら、この値は上書きされます) */
				background-size: cover;					/* 背景画像で枠を埋める */
				background-position: center center;		/* 背景画像を中央に寄せる */
				background-repeat: no-repeat;			/* 背景画像を繰り返さない */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardlinktextbox {
				display: flex;				/* Flexbox化 */
				flex-direction: column;		/* 子要素を縦方向に並べる */
				padding: 0.5em 1em;			/* 内側の余白量 */
			}
				/* ▽リンクカードのテキスト枠内の3要素共通 */
				.cardlinktitle,
				.cardlinkdescription,
				.cardlinkurl {
					/* ↓表示行数を制限するための準備 (※システム側では文字数は制限せずに「記述されている全文字」をHTMLに出力しますので、表示分量を制限したい場合はCSSで制御する必要があります。) */
					display: -webkit-box;			/* -webkit-line-clampを使うために必要な記述1 ※A */
					-webkit-box-orient: vertical;	/* -webkit-line-clampを使うために必要な記述2 ※A */
					overflow: hidden;				/* 表示量を制限する場合に必須の記述 */
					/* ↓制限の仕様 */
					line-clamp: 1;				/* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
					-webkit-line-clamp: 1;		/* 1行だけ見せる (今のブラウザにはこちらが必要で、そのためには上記「※A」も必要) */
					text-overflow: ellipsis;	/* 省略記号(三点リーダー) */
				}
				/* リンクタイトル */
				.cardlinktitle {
					padding-bottom: 0.25em;		/* 内側下端の余白量 */
				}
				/* リンク概要文 */
				.cardlinkdescription {
					line-height:1.3;			/* 行の高さ */
					color:#555;					/* 文字色 */
					line-clamp: 2;				/* (既存指定の上書き) 最大2行まで見せる */
					-webkit-line-clamp: 2;		/* (既存指定の上書き) 最大2行まで見せる */
				}
				/* リンクドメイン */
				.cardlinkurl {
					color: #999;				/* 文字色 */
				}

		/* ----------------------------------- */
		/* リンクカードの装飾(サイズS用の追記) */		/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
		/* ----------------------------------- */
		.cardsize-S {
			flex-direction: row;				/* 画像とテキストは横に並べる(Flexbox) */
		}
			/* ▽リンクカード内の画像枠 */
			.cardsize-S .cardlinkimage {
				min-width: 100px;				/* 最小の横幅 */
				min-height: 100px;				/* 最小の高さ */
				border-radius: 6px 0 0 6px;		/* 左側だけ角丸 */
				flex-shrink: 0;					/* 枠サイズを自動縮小させない */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardsize-S .cardlinktextbox {
				border-left: 1px solid #ccc;	/* 左側の枠線 */
				justify-content:center;			/* Flexboxの上下方向での中央寄せ */
			}
				/* ▽リンクカードのテキスト枠内の3要素 */
				.cardsize-S .cardlinktitle { order: 2; }		/* タイトルは、2番目に表示 */
				.cardsize-S .cardlinkdescription { order: 3; }	/* 概要文　は、3番目に表示 */
				.cardsize-S .cardlinkurl { order: 1; }			/* ドメインは、1番上に表示 */

		/* ----------------------------------- */
		/* リンクカードの装飾(サイズL用の追記) */		/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
		/* ----------------------------------- */
		.cardsize-L {
			flex-direction: column;			/* 画像とテキストは縦に並べる(Flexbox) */
		}
			/* ▽リンクカード内の画像枠 */
			.cardsize-L .cardlinkimage {
				aspect-ratio: 1.91 / 1;		/* 画像枠の縦横比を指定= (横)1.91：(縦)1 */
				width: 100%;				/* 横幅は枠最大に拡げる */
				height: auto;				/* 高さは自動計算 */
				border-radius: 6px 6px 0 0;	/* 上側だけ角丸 */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardsize-L .cardlinktextbox {
				border-top: 1px solid #ccc;	/* 上側の枠線 */
			}
				/* ▽リンクカードのテキスト枠内の3要素 */
				.cardsize-L .cardlinktitle { font-weight: bold; }			/* 太字 */
				.cardsize-L .cardlinkdescription { min-height: 2.5em; }		/* 内容量が少ない場合でも一定の高さを確保 */
				.cardsize-L .cardlinkurl {
					border-top: 1px solid #ddd;		/* 上側の枠線 */
					margin-top:0.5em;				/* 上側の枠線より上の余白量 */
					padding-top:0.5em;				/* 上側の枠線より下の余白量 */
					font-size:0.75rem;				/* 文字サイズ(小さめ) */
				}

	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 */
	/* ---------------------------------------------------- */
	/* B:太字(Bold) */
	.decorationB {
		font-weight: bold;		/* 太字 */
	}
	/* D:削除(Delete) */
	.decorationD {
		color: var(--text-color);
		text-decoration-line: line-through;
		text-decoration-color:  var(--text-color);	/* 線の色 */
	}
	/* E:強調(Emphasis) */
	.decorationE {
		font-style: normal;
		font-weight: bold;
		color: var(--accent);
		font-family: "Quicksand", YuGothic, "Helvetica Neue", Arial, sans-serif;
	}
	/* I:斜体(Italic) */
	.decorationI {
		font-style: italic;		/* 斜体 */
	}
	/* Q:引用(Quote) */
	.decorationQ {
		border-left: 5px double var(--accent);
		margin: 1em 0.3em 1em 1em;
		padding: 0.75em 0.5em;
		font-style: italic;
		font-size: 0.95em;
		display: block;					/* ※Ver 2.2.0以降必須の記述 */
	}
	.decorationQ::before,
	.decorationQ::after {
		content: '';			/* 標準で付加されてしまう引用符を無効にする */
	}
	.decorationQ + br {
		display: none;	/* 引用直後の改行を無効化する */
	}
	/* S:小文字(Small) */
	.decorationS {
		font-size: 0.8em;
	}
	/* T:極小文字(Tiny) */
	.decorationT {
		font-size: 0.6em;
	}
	/* U:下線(Underline) */
	.decorationU {
		text-decoration-line: underline;	/* 線位置 */
		text-decoration-style: double;		/* 線種類 */
		text-decoration-color: #ffffff;	/* 線配色 */
	}

	/* ---------------------- */
	/* ▼自由装飾用の装飾の例 */	/* 自由装飾は [F:myclass:対象文字] の記法で <span class="deco-myclass">対象文字</span> のようにマークアップされる機能です。あらかじめclassを用意しておくことで自由な装飾を個数制限なく使い分けられます。 */
	/* ---------------------- */	/* 投稿者の自由な記述によって意図せずページが崩れてしまうのを防ぐために、適用されるclass名の先頭には必ず deco- が付加されます。 */
	.deco-scream {
		font-size: 1.67em;	/* 文字サイズ(1.67倍) */
	}

	.deco-code {
		display: inline-block;	/* インラインブロック化 */
		font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;	/* 等幅フォント */
		background-color: snow;	/* 背景色 */
		color: black;			/* 文字色 */
		border: 1px solid #eee;	/* 枠線 */
		border-radius: 3px;		/* 角丸 */
		padding: 0px 3px;		/* 内側の余白量 */
	}

	.deco-separator {
		display: block;					/* ブロック化 */
		border-bottom: 1px dotted gray;	/* 下線 */
	}

	.deco-flex {
		display: flex;				/* Flexbox */
		gap: 1em;					/* 余白量 */
		align-items: start;			/* 上寄せ */
		justify-content: start;		/* 左寄せ */
		flex-wrap: wrap;			/* 折り返し許可 */
	}

	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像 */	/* この部分は、文字装飾領域内に含まれた画像を装飾するための記述です。 */
	/* ---------------------------------------------------- */
	/* B:太字(Bold)に含まれる画像に対する装飾 */
	.decorationB img {
		box-shadow: 5px 5px 5px  var(--back);		/* 右下に黄緑色の影を付ける */
	}
	/* D:削除(Delete)に含まれる画像に対する装飾 */
	.decorationD img {
		opacity: 0.5;	/* 半透明にする */
	}
	/* E:強調(Emphasis)に含まれる画像に対する装飾 */
	.decorationE img {
		outline: 8px ridge var(--back);		
	}
	/* I:斜体(Italic)に含まれる画像に対する装飾 */
	.decorationI img {
		box-shadow: -5px 5px 5px var(--back);	/* 左下に黄緑色の影を付ける */
	}
	/* Q:引用(Quote)に含まれる画像に対する装飾 */
	.decorationQ img {
		vertical-align: middle;			/* 行の上下方向で真ん中に寄せる */
	}
	/* S:小文字(Small)に含まれる画像に対する装飾 */
	.decorationS img {
		border-radius: 15px;			/* 半径15pxで角丸にする */
		vertical-align: middle;			/* 行の上下方向で真ん中に寄せる */
	}
	/* T:極小文字(Tiny)に含まれる画像に対する装飾 */
	.decorationT img {
		max-height: 300px;				/* 高さを最大300pxに抑える */
		width: auto;					/* 横幅は縦横比を維持する */
		vertical-align: middle;			/* 行の上下方向で真ん中に寄せる */
	}
	/* U:下線(Underline)に含まれる画像に対する装飾 */
	.decorationU img {
		box-shadow: 5px 5px 5px skyblue;	/* 右下に空色の影を付ける */
	}

	/* -------------- */
	/* ▼埋め込み画像 */
	/* -------------- */
	/* ▽画像ボックス(FIGオプション指定時) */
	.embeddedpictbox {
		margin: 0;					/* 外側の余白を消す */
		padding: 0;					/* 内側の余白を消す */
		display: inline-table;		/* 横方向に並べる */
		border-collapse: collapse;	/* displayをinline-tableにする場合に必要 */
		border: 1px solid #fff;	/* 枠線 */
		vertical-align: top;		/* 行内では上に寄せる */
	}
		/* キャプション */
		.embeddedpictbox figcaption {
			display: table-caption;		/* キャプションが画像幅から外に出ないようにする */
			caption-side: bottom;		/* キャプションの位置(上にしたければtop) */
			font-size: 0.8em;			/* 文字サイズ */
			text-align: center;			/* センタリング */
			background-color:  var(--btn-bg-color);	/* 背景色 */
		}

		/* 画像ボックスに含まれる画像 */
		.embeddedpictbox img {
			vertical-align: middle;
		}

	/* ▽画像リンク */
	.imagelink {
		display: inline-block;
		line-height: 1;				/* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
		vertical-align: inherit;	/* 同上 */
	}


	/* ▽フラグ付き画像 (※設定や採用記法によって出力パターンが複数あるため、あらゆるパターンに対応させるべく同じスタイルを2重に指定しています。) */
	figure.nsfw {
		overflow: hidden ;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
    display: inline-block;
    line-height: 0;
	}
	.imagelink.nsfw {
		overflow: hidden ;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	    display: inline-block;
    line-height: 0;
	}
img.nsfw {
		filter: blur(5px);	/* ぼかす */
	}

	/* ▽画像そのもの */
.embeddedimage {
  height: 100px;
 		max-width: 100%;	/* 横方向にはみ出ないようにする */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
	/* -------------- */
	/* ▼埋め込み動画 */
	/* -------------- */
	@media all and (max-width: 600px) {
		.embeddedmovie {
			display: inline-block;
			max-width: 100%;	/* はみ出ないようにする */
			width: auto;
			height: auto;
		}
	}

	/* --------------- */
	/* ▼埋め込みTweet */	/* これはツイートが埋め込まれる処理「前」用の装飾です。実際に埋め込まれるツイートはTwitter側のiframeで装飾されますので、てがろぐ側では指定できません。(ただし横幅を制限することはできます。→後述) */
	/* --------------- */
	blockquote.twitter-tweet {
		background-color: #f8f8f8;
		border: 1px dashed #ddd;
		border-radius: 9px;
		margin: 0.3em 0;
		padding: 1em;
		font-size: 0.95em;
		color: #999;
		text-shadow: 1px 1px 1px #fff;
	}

	/* -------------------- */
	/* ▼検索語のハイライト */
	/* -------------------- */
.searchword {
	font-weight: bold;
	background: linear-gradient(
		transparent 60%,
		var(--highlight) 60%
	);
}

/* ========================== */
/* ■ページ最上部(ヘッダ)領域 */
/* ========================== */



	/* -------------- */
	/* ▼タイトル区画 */
	/* -------------- */
	.custom-site-title {
  width: 90%;
  max-width: 900px; /* .text, .novel-contentと同幅 */
  margin: 20px auto;
  text-align: center;
  color: var(--accent); 
  font-size: 5em;
  font-family: "Quicksand", YuGothic, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
	}


/* ======================== */
/* ■入力フォームの表示領域 */
/* ======================== */
.postform {
	background-color: var(--back);
	padding: 1em;
}
.postform p {
	margin: 0;
}
	/* -------------- */
	/* ▼本文入力区画 */
	/* -------------- */
	.line-textarea {
		/* display: inline-block; */
	}

		/* ……………… */
		/* ▼本文入力欄 */
		/* ……………… */
		textarea.tegalogpost {
			font-size: 0.9rem;
			box-sizing: border-box;
			width: 100%;
			max-width: 100%;
			height: 4.3em;
			overflow-wrap: break-word;
			overflow: auto;
		}
			/* ▽プレースホルダ(※入力文字数ゼロの際だけ見える薄文字)の装飾 */
			textarea.tegalogpost:placeholder-shown { color: #777; }			/* 通常時 */
			textarea.tegalogpost:focus:placeholder-shown { color: #bbb; }	/* カーソルが入ったとき */
			textarea.tegalogpost:-ms-input-placeholder { color: #aaa; }		/* for IE */

		/* 横幅800px以下の環境の場合 */
		@media all and (max-width: 800px) {
			textarea.tegalogpost {
				font-size: 16px;	/* 文字サイズ */
			}
		}

	/* ------------------------------------------------ */
	/* ▼投稿コントロール部分(ボタンや字数カウンタなど) */
	/* ------------------------------------------------ */
	.line-control {
		margin: 0.25em 0;
		display: inline-block;
	}

	/* ------------ */
	/* ▼投稿ボタン */
	/* ------------ */
	.postbutton {
		font-size: 1rem;
		font-weight: bold;
	}

	/* ------------------ */
	/* ▼文字装飾ボタン群 */
	/* ------------------ */
	/* 掲載領域全体 */ .decoBtns { display: inline-block; margin-top: 0.5em; }
	/* 全ボタン装飾 */ .decoBtns input { min-width: 30px; min-height: 26px; margin:1px; background-color:var(--highlight); border: 1px solid #aaa; cursor: pointer; border-radius: 3px; font-size: 12px; vertical-align: middle; }
	/* マウス載る際 */ .decoBtns input:hover { background-color:var(--highlight); border-color: var(--highlight); }
	/* 太字  :B */ .decoBtnB { font-weight: bold; }
	/* 取消線:D */ .decoBtnD { text-decoration: line-through; text-decoration-color: red; text-decoration-style: double; }
	/* 強調  :E */ .decoBtnE { font-weight: bold; color: blue; }
	/* 斜体  :I */ .decoBtnI { font-style: italic; }
	/* 引用  :Q */ .decoBtnQ {  }
	/* 小さめ:S */ .decoBtnS {  }
	/* 極小  :T */ .decoBtnT { font-size: 11px !important; }
	/* 下線  :U */ .decoBtnU { text-decoration: underline; text-decoration-color: red; }
	/* 文字色:C */ .decoBtnC { color: red; }
	/* 背景色:M */ .decoBtnM { color: blue; }

h4 {
  font-size: 1.3em;
  margin: 20px 0;
  color: var(--text-color);
  padding-bottom: 5px;
  font-family: "Kiwi Maru", sans-serif;
}

h3 {
  font-family: "Kiwi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  border-bottom: solid 3px var(--accent);
  margin-top: 60px;
  color: var(--text-color);
}
h2 {
  margin: 20px auto;
  text-align: center;
  color: var(--accent); 
  font-size: 2em;
  font-family: "Quicksand","Kiwi Maru", YuGothic, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.3em;
}


/* でかボタン風 */
.uc-btnfubig {
  margin: 5px 10px 5px 10px;
  display: inline-block; /* ボタンのように振る舞う */
  text-decoration: none; /* 下線なし */
  color: var(--white-text-color); /* テキスト色 */
  background-color: var(--accent); /* 背景色 */
  padding: 10px 20px; /* 小さめの内余白 */
  border-radius: 100px; /* 長丸の角丸 */
  font-family: "Quicksand","Kiwi Maru", YuGothic, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; /* 小さめのフォント */
  font-weight: 500; /* やや太めの文字 */
  transition: background-color 0.3s ease, color 0.3s ease; /* ふわっと変化 */
}

.uc-btnfubig:hover {
  background-color: var(--hover); /* ホバー時の背景色 */
  color: var(--white-text-color); /* ホバー時のテキスト色 */
}

/* ちびボタン風 */
.uc-btnfu {
  margin: 5px 2px 5px 2px;
  display: inline-block; /* ボタンのように振る舞う */
  text-decoration: none; /* 下線なし */
  color: var(--white-text-color); /* テキスト色 */
  background-color: var(--accent); /* 背景色 */
  padding: 8px 16px; /* 小さめの内余白 */
  border-radius: 100px; /* 長丸の角丸 */
  font-size: 14px; /* 小さめのフォント */
  font-weight: 500; /* やや太めの文字 */
  font-family: "Quicksand","Kiwi Maru", YuGothic, "Helvetica Neue", Arial, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease; /* ふわっと変化 */
}

.uc-btnfu:hover {
  background-color: var(--hover); /* ホバー時の背景色 */
  color: var(--white-text-color); /* ホバー時のテキスト色 */
}
.uc-btnfu i {
    font-size: 15px; 
  margin: 0px 8px 0px 0px ;
}
	/* ………………………… */
	/* ※狭い画面用の上書き */
	/* ………………………… */
	@media all and (max-width: 480px) {
		.line-textarea {
			display: block;
		}
	}

	/* -------------------------------- */
	/* ▼カテゴリ選択チェックボックス群 */	/* ★Ver 3.0.0以降で使用 */
	/* -------------------------------- */
	.catChecks { font-size:0.9em; padding-top: 0.5em; }
	.catChecks label { display:inline-block; cursor:pointer; margin:0 0.75em 0 0; }
	.catChecks label:hover { text-decoration:underline; }
	.catChecks input { min-width:0; min-height:0; margin-right:0.2em; }

	/* 投稿欄下部：「鍵付き」チェックボックスと「個別鍵」ボタンの間を詰める一時的なスタイル */
	.funcUIs .catChecks { margin:0 0.75em 0 0; }
	.funcUIs .catChecks label { margin: 0; }


/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */


	/* ------------------------------------------ */
	/* ▼表示対象の限定時などの「限定条件」表示行 */
	/* ------------------------------------------ */

	
	/* -------------- */
	/* ▼日付境界バー */
	/* -------------- */
	.situation , .dateseparator {
		width: 90%;
		margin: 5px auto;
		padding: 10px;
		padding-left: 10px;
		max-width: 900px;
		font-weight: bold;
		font-size: 1.2em;
		color: white;
		font-family: "Quicksand", "Kiwi Maru", sans-serif;
		border-radius: 10px;
		background-color:  var(--accent);
	}

	.situation:empty { display: none; }	/* 限定表示がない場合 */


/* ================================ */
/* ■投稿ボックス(一発言)ごとの表示 */		/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
/* ================================ */
.onelogbox {
	width: 100%;
	box-sizing: border-box;
	margin: 2em 0 3em 0;

}

	/* -------- */
	/* ▼ヘッダ */
	/* -------- */
	.onehaad {
		margin: 0;
	}


		/* …………… */
		/* ▽投稿日時 */
		/* …………… */
		.postdate {
			font-weight: bold;
			font-family: "Quicksand", "Kiwi Maru", sans-serif;
		}
			/* 日付 */
			.date {
				font-size: 1.3em;
			}

/* 記事のブロック */
.text {
  width: 100%;
  margin: 0;
  padding: 1px;
  box-sizing: border-box;
  background: white;
}

/* 記事一覧 */
.mainarea {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
}

@media screen and (min-width: 768px) {
.mainarea {
  display: grid;
  grid-template-columns: repeat(5, 150px);
  gap: 10px;
  justify-content: center;
}
}		/* ……………… */
		/* ▽カテゴリ名 */
		/* ……………… */
		.categories {
			font-size: 0.8em;				/* 文字サイズ */
			margin-right: 0.5em;			/* 右側の余白 */
		}
			/* ▽カテゴリリンク1つ */
			.categorylink {
				display: inline-block;
			}
			/* ▽カテゴリ間のセパレータ */
			.catseparator {
				display: inline-block;
				margin: 0 2px;			/* 左右に2pxの余白 */
				color: gray;			/* 文字色 */
			}

				/* ▽カテゴリアイコン */
				.categoryicon img {
					height: 1.2em;
					width: auto;
					vertical-align: text-top;
					margin: 0 1px;
				}



	/* ---------- */
	/* ▼投稿本文 */
	/* ---------- */
	.comment {
		margin: 0.5em 0em 1em 0em;
		line-height: 1.5;
		color: var(--text-color);
	}


		/* ……………………………………………… */
		/* ▽本文内に含まれるハッシュタグリンク */
		/* ……………………………………………… */
		.comment  {
			display: inline-block;	/* インラインブロック化 */
			text-decoration: none;	/* 下線を消す */
			word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
			margin: 2px;
  font-size: 0.7em;
		}
.text .comment .taglink {
    padding: 2px 2px;
  color: var(--accent);
  text-decoration: none;
  font-size: 1em;
}		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		/* ▼続きを読むリンク（ボタン） */		/* ※注：「続きを読む」機能は、JavaScriptが無効な閲覧環境では機能せず、その場合はボタンも表示されません。 */
		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		/* ▽ボタン枠の装飾(共通) */
		.readmorebutton {
			display: inline-block;	/* インラインブロック化 */
			padding: 5px 10px 5px 10px;		/* 内側の余白 */
			margin: 5px;			/* 外側の余白 */
			border: 1px solid   var(--accent);	/* 枠線の装飾 */
			border-radius: 50px;	/* 枠線の角丸 */
		}
		/* ▽ボタン表面の装飾(共通) */
		.readmorebutton:link,
		.readmorebutton:visited {
			background-color: white;	/* 背景色(グラデーション非対応の環境のみ) */
			color:   var(--accent);		/* 文字色 */
			text-decoration: none;	/* リンク装飾を消す */
		}
		/* ▽ボタンにマウスが載った際の装飾(共通) */
		.readmorebutton:hover {
			background-image: none;		/* グラデーションなし */
			background-color:   var(--accent);
			color: white;		/* 文字色 */
		}

		/* ▽開く（続きを読む）ボタン専用の装飾 */
		.readmorebutton.readmoreopen {
			font-size: 0.95em;		/* 文字サイズ */
		}

		/* ▽閉じる（畳む）ボタン専用の装飾 */
		.readmorebutton.readmoreclose {
			font-size: 0.75em;		/* 文字サイズ */
		}
		
/* ============================================================ */
/* ■検索フォーム */
/* ============================================================ */

.searchbox {
	margin: 1em 0;
}

.searchinputs {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em;
	background: var(--back);
	border-radius: 999px;
}

/* ▼検索入力欄 */
.queryinput {
	width: 14em;
	padding: 0.55em 1em;
	border: none;
	border-radius: 999px;
	background: #fff;
	color: var(--text-color);
	font-size: 0.95rem;
}

.queryinput::placeholder {
	color: var(--pale-text-color);
}

.queryinput:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgb(209 28 44 / 12%);
}

/* ▼検索ボタン */
.submitbutton {
	padding: 0.55em 1.2em;
	border: none;
	border-radius: 999px;
	background: var(--accent);
	color: var(--white-text-color);
	font-weight: bold;
	cursor: pointer;
	transition: .2s;
	box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
}

.submitbutton:hover {
	background: var(--hover);
	transform: translateY(-1px);
}

.submitbutton:active {
	transform: translateY(0);
}

/* ============================================================ */
		
/* ============================================================ */
/* ■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾 */
/* ============================================================ */

.passkeyform {
	display: inline-block;
	margin: 1em 0;
	padding: 1em 1.2em;
	background: #fff;

}

/* ▼鍵違いエラーの表示 */
.passkeyerror {
	display: block;
	margin: 0 0 0.8em;
	padding: 0.6em 0.8em;
	color: var(--accent);
	background: #FDECEF;
	border-radius: 8px;
	font-weight: bold;
}

/* ▼入力フォーム枠 */
.passkeybox {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
}

/* ▼入力欄前のガイド文 */
.passkeyguide {
	color: var(--text-color);
	font-weight: bold;
}

/* ▼鍵入力欄 */
.passkeyinput {
	width: 10em;
	padding: 0.5em 0.8em;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: #fff;
	color: var(--text-color);
	transition: .2s;
}

.passkeyinput:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgb(209 28 44 / 12%);
}

/* ▼送信ボタン */
.passkeysubmit {
	padding: 0.55em 1.2em;
	border: none;
	border-radius: 999px;
	background: var(--accent);
	color: var(--white-text-color);
	font-weight: bold;
	cursor: pointer;
	transition: .2s;
	box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
}

.passkeysubmit:hover {
	background: var(--hover);
	transform: translateY(-1px);
}

.passkeysubmit:active {
	transform: translateY(0);
}

/* ============================================================ */
/* ====================================================================== */
/* ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾 */	/* 各投稿の個別ページでのみ表示される囲みナビ用の装飾です。表示項目の取捨選択や詳細な装飾方法は https://www.nishishi.com/cgi/tegalog/custom/#customizecss-utilitylinkbox をご覧下さい。 */
/* ====================================================================== */
.utilitylinks {
	margin: 2em 1em 1em 1em;
	padding: 0.5em;
	border: 0px;
	border-radius: 1em;
	background-color: white;
	font-size: 0.9em;
}
.utilitylinks ul {
	color:  var(--back);
}



	/* ------------------------------------ */
	/* ▼ページ前後移動リンク群ボックス全体 */
	/* ------------------------------------ */
	.pagelinks {
		margin: 0.75em;		/* 外側の余白 */
	}

	/* ▼ページ移動リンクの文字 */
	.pagelinks a {
		font-weight: bold;
	}
	.pagelinks a:hover {
		color: var(--hover);
	}

	/* -------------------------------- */
	/* ▼ページ番号リンク群ボックス全体 */
	/* -------------------------------- */
	.pagenums {
		margin: 0.75em;		/* 外側の余白 */
	}

	/* ▼ページ番号リンクの数字 */
	.pagenums a.pagenumlink {
		margin: 0px 2px 0px 2px;	/* 外側の余白 */
		padding: 0.2em 0.5em;		/* 内側の余白 */
		font-size: 1em;				/* 文字サイズ */
		font-weight: bold;			/* 太字 */
		border-radius: 100px;		/* 角丸 */
		transition: background-color 0.3s ease, color 0.3s ease; /* ふわっと変化 */
	}
	/* ▽現在のページ番号の装飾 */
	a.pagenumhere {
		text-decoration: none;		/* リンク装飾を消す */
		background-color: var(--accent);	/* 背景色 */
		color: white;				/* 文字色 */
		border-radius: 100px;			/* 角丸 */
	}
	/* ▽ページ番号リンクにマウスが載った際の装飾 */
	a.pagenumlink:hover {
		text-decoration: none;		/* リンク装飾を消す */
		background-color: var(--hover);	/* 背景色 */
		color: white;				/* 文字色 */
		border-radius: 100px;		/* 角丸 */
	}



/* アイコン */
.BTN-02-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0px; /* 左右のマージン */
}

.cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px; /* PCでのサイズ */
    color: var(--accent); 
    text-decoration: none;
}

.cat:hover {
    color: var(--hover); /* ホバー時の暗い赤 */
}

.cat i {
    font-size: 25px; /* アイコンをやや大きめ */
    order: 2; /* アイコンを下に */
}

.cat span {
    font-size: 10px; /* リンク名の文字を小さめ */
    font-weight: 700;
    order: 1; /* リンク名を上に */
    margin-bottom: 10px; /* アイコンとの間隔 */
}

/* 画面幅が1200px以下の場合 */
@media screen and (max-width: 1200px) {


    .cat i {
        font-size: 25px; /* モバイルではアイコンを小さく */
    }

    .cat span {
        font-size: 10px; /* モバイルでは文字をさらに小さく */
    }
  }
/* スマートフォン向けの調整 */
@media (max-width: 768px) {
    .cat {
        width: 75px;
    }

    .cat i {
        font-size: 20px; /* モバイルではアイコンを小さく */
    }

    .cat span {
        font-size: 9px; /* モバイルでは文字をさらに小さく */
    }
}

/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */
footer {
	margin: 1em 0 0 0;
}
footer p {
	margin: 0;
	padding: 5px 0;
}


/* ハンバーガーメニュー（スマホや狭い画面） */
.hamburger {
  display: block;
  font-size: 30px;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1001;
  background: none;
  border: none;
  color: #333;
}

.sidebar {
  background: transparent;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.sidebar.active {
  transform: translateX(0);
}

.sidebar ul {
  list-style: none;
  padding: 10px;
  border-radius: 5px;
}

.sidebar li {
  margin: 10px 20px;
}

.sidebar a {
  text-decoration: none;
  color: var(--white-text-color); /* 白 (#fefefe) */
  font-size: 18px;
  background: var(--accent); /* 赤 (#D11C2C) */
  padding: 10px 20px;
  border-radius: 100px; /* 丸いボタン */
  display: block;
  margin: 10px 0; /* 上下に余白を追加 */
  transition: background-color 0.3s ease, transform 0.2s ease; /* スムーズな変化 */
  position: relative;
  overflow: hidden; /* アニメーション用 */
  text-align: center;
  font-family: "Quicksand", YuGothic, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.sidebar a:hover {
  background-color: var(--hover); /* 濃い赤 (#6B0E17) */
  transform: scale(1.05); /* ホバー時に軽く拡大 */
}

.sidebar a:focus {
  outline: 2px solid var(--accent); /* フォーカス時に枠線 */
  outline-offset: 2px;
}

/* サイドバーがアクティブなときの余白（スマホ画面） */
@media screen and (max-width: 767px) {
  .sidebar.active ~ .content-wrapper {
    padding-top: 0px;
  }
}


/* ページアップボタン */
.page-up-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  border: none;
  z-index: 1002;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-up-btn.visible {
  opacity: 1;
  transform: scale(1);
}

.page-up-btn:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.page-up-btn .material-icons {
  font-size: 24px;
}
	/* Powered-by表記のデザイン */
	.poweredby { margin: 0; font-size: 0.5em; text-align: right; }


/* PCや広い画面（768px以上） */
@media screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }

  .sidebar {
    display: block;
    width: 250px;
    right: 0;
    left: auto;
    top: 0;
    background: transparent;
    height: auto;
    position: fixed;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .BTN-02-container ,.situation , .dateseparator, .custom-site-title ,.postarea{
    width: 65%;
    max-width: 900px;
    margin-top: 20px;
    margin-right: 270px;
    margin-left: auto;
  }
}

/* 画面幅が1200px以上の場合 */
@media screen and (min-width: 1200px) {
.BTN-02-container ,.situation , .dateseparator, .custom-site-title{
    margin: 20px auto; /* 上下マージン保持、中央揃え */
    width: 65%;
  }
}
  
  
/* スマホ向け調整 */
@media screen and (max-width: 767px) {

.BTN-02-container,
.situation,
.dateseparator,
.custom-site-title {

    width: 90%;
    margin: 20px auto; /* 右余白リセット、中央揃え */
    max-width: 900px;
  }
  .mainarea a {
    font-size: 14px; /* スマホで読みやすく */
  }
  .page-up-btn {
    width: 40px;
    height: 40px;
  }

  .page-up-btn .material-icons {
    font-size: 20px;
  }

  .mainarea {
    font-size: 14px;
  }

  h3 {
    font-size: 20px;
  }
  .sidebar a {
    font-size: 16px; /* スマホで少し小さく */
    padding: 8px 16px;
  }

  .custom-site-title {
    font-size: 2em;
  }


}
/* End of file */