@charset "utf-8";

/* 超シンプル画像展示スキン「zikken01」 */
/* てがろぐ -Fumy Otegaru Memo Logger- 標準スタイルシート for Ver 4.1.0 を改変したCSSです */

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

/* -------------------- */
/* カスタム用色変更欄 */
/* -------------------- */
:root{
	--haikei-iro: #f8f8f8; /* 全体背景色 */
	--mozi-iro: #242424; /* 文字色 */
	--usu-mozi-iro: #979797; /* ↑よりちょっと薄い文字色など */
	--siro-mozi: #f5f5f5; /* 濃い背景に乗せる白文字 */
	--koi-iro: #1d1d1d; /* 濃いアクセント色 */
	--link-iro: #2684D7; /* リンクの色 */
	--link-hover-iro: #81CCF0; /* リンクにマウス乗せたときの色 */
}


/* ■全体共通装飾 */
body {
	font-size: 0.9rem;
	line-height: 1.5rem;
	font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--haikei-iro);
	color: var(--mozi-iro);
}

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

/* ▽画像ボックス(FIGオプション指定時) */
.embeddedpictbox {
	margin: 0;
	padding: 0;
	display: inline-table;
	border-collapse: collapse;
	border: none;
	vertical-align: top;
}
/* キャプション */
.embeddedpictbox figcaption {
	padding: 2px;
	display: table-caption;	
	caption-side: bottom;
	font-size: 0.7rem;
	color: var(--usu-mozi-iro);
	line-height: 1rem;
}

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

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

/* ▽画像そのもの */
.embeddedimage {
	max-width: 100%;	/* 横方向にはみ出ないようにする */
	height: auto;	/* 高さを固定したい場合を除いて、ここは auto のままにするのがお勧め */
}

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

/* NSFWマークを重ねる */
.imagelink.nsfw::after{
	content:"\e8b2";
	font-family: "Material Icons Round";
	font-size: 60px;      
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}

/* 表示全体エリア */
.bodyarea{
	margin: 0 auto;
	padding: 3rem 1rem 0;
	width: 100%;
	max-width: 1000px;
}

/* メインタイトル */
.maintitle{ font-size: 1.2rem; font-weight: bold; margin-bottom: 2rem;}
.maintitlelink{ color: var(--mozi-iro);}

/* homeと管理ボタン */
.home_btn {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
}
.home_btn a {
	display: block;
	text-align: center;
	color: var(--siro-mozi);
	background-color: var(--koi-iro);
	width: 40px;
	height: 40px;
	line-height: 40px;
}
.home_btn a:hover { background-color: var(--link-hover-iro);}

/* HOMEへ戻るリンクのテキストを消してアイコンを挿入 */
.home_btn .homelink a { font-size: 0;}
.home_btn .homelink a::before {
	content:'\e88a';
	font-family: "Material Icons Round";
	font-size: 30px;
}

.home_btn .kanri { margin-top: 0.2rem;}
.home_btn .material-icons-round { font-size: 28px; line-height: 40px;}

/* QUICKPOST装飾 */
.postform { border: 1px solid var(--usu-mozi-iro); margin-bottom: 2rem; padding: 1rem;}
.postform p { margin: 0;}

/* 本文入力欄 */
textarea.tegalogpost {
	border: 1px var(--usu-mozi-iro) solid;	/* 枠線 */
	background-color: #fefefe;	/* 背景色 */
	color: #242424;/* 文字色 */
	padding: 0.5rem;				/* 内側の余白量 */
	box-sizing: border-box;		/* サイズ解釈方法 */
	width: 100%;				/* 横幅 */
	height: 4.3rem;				/* 高さ */
	overflow-wrap: break-word;	/* 折り返し方法 */
	overflow: auto;				/* はみ出した場合の処理 */
	font-size: 1rem;
	font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	line-height: 1.3rem;
}

/* ▼投稿ボタン */
.postbutton {
	display: inline-block;
	background: var(--koi-iro);
	color: var(--siro-mozi);
	font-size: 0.9rem;
	text-decoration: none;
	padding: 5px 15px;
	border: none;
	cursor: pointer;
}
.postbutton:hover { background-color: var(--link-hover-iro);}

/* 装飾ボタン掲載領域全体 */ .decoBtns { display: inline-block; margin-top: 5px; }
/* 全ボタン装飾 */ 
.decoBtns input {
	min-width: 32px;
	min-height: 28px;
	margin:1px;
	cursor: pointer;
	font-size: 0.8rem;
	border: 1px solid var(--usu-mozi-iro);
	border-radius: 3px;
	vertical-align: middle;
}

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

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

/*プルダウンの装飾*/
.postarea select {
	border:1px solid var(--usu-mozi-iro);
	border-radius: 3px;
	padding: 5px;
	box-shadow: none;
	cursor: pointer;
}

/* カテゴリー欄 */
.categorylistarea { margin-bottom: 2rem; text-align: center;}
.cattree li { display: inline-block; list-style: none;}
a.catlink {
	display: inline-block;
	color: var(--usu-mozi-iro);
	margin: 0.5rem 0.2rem 0 0.5rem;
	padding: 0 0.3rem;
	border: 1px solid var(--usu-mozi-iro);
}
.cattree .num { font-size: 0.8rem; color: var(--usu-mozi-iro);}
a.catlink:hover { background-color: var(--link-hover-iro); color: var(--siro-mozi);}

/* 表示対象の限定時などの「限定条件」表示行 */
.situation {
	margin-bottom: 1rem;
	font-size: 0.8rem;
	color: var(--usu-mozi-iro);
}
.situation:empty { display: none; }

/* メイン部分のグリッド表示 */
.maingrid{
	display: grid;
	gap: 0.5rem;
	margin-bottom: 3rem;
}

@media only screen and (min-width: 768px) { .maingrid{ grid-template-columns: repeat(5,1fr);}}
@media only screen and (min-width: 521px) and (max-width: 768px) { .maingrid { grid-template-columns: repeat(4,1fr);}}
@media only screen and (max-width: 520px) { .maingrid { grid-template-columns: repeat(3,1fr);}}

/* 画像そのものの大きさ */
.embeddedimage,.embeddedimage.nsfw,.imagelink {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
  }

/* 日付境界バー非表示 */
.dateseparator{ display: none;}

/* ページナビゲーション領域 */
.utilitylinks { display: none;}
.pagenavi { text-align: center;}
.pagenavi p { margin-bottom: 1rem;}
.pagenavi p:empty { display: none;}

/* ページ番号リンクの数字 */
a.pagenumlink {
	display: inline-block;
	width: 25px;
	height: 25px;
	color: var(--usu-mozi-iro);
	border: 1px solid var(--usu-mozi-iro);
	text-decoration: none;
	margin-top: 5px;
}

 /* 現在のページ番号とマウスオーバー時の装飾 */	
a.pagenumhere,.pagenumlink:hover {	background-color: var(--link-hover-iro); color: var(--siro-mozi);}

/* フッター */
footer { margin: 3rem 1rem 1rem 0; text-align: right;}
footer .material-icons-round { font-size: 20px; margin-right: 0.5rem; vertical-align: middle;}
.poweredby { font-size: 0.8rem; }