@charset "utf-8";

/* スキン「ippen03(いきなり一覧版)」配布用 */
/* スキン改造 byあやはらさより */

/* -------------------- */
/* カスタム用色変更欄 */
/* -------------------- */
:root{
	--haikei-iro: #fafafa; /* 全体背景色 */
	--naiyou-iro: #fafafa; /* 記事内背景色 */
	--mozi-iro: #242424; /* メイン文字色 */
	--usu-mozi-iro: #aaaaaa; /* ↑よりちょっと薄い文字色 */
	--siro-mozi: #f5f5f5; /* 濃い背景に乗せる白文字色 */
	--koi-iro: #777; /* 濃いアクセント色 */
	--usu-iro: #bbb; /* ↑の濃い色にマウス乗せたときの色など */
	--link-iro: #4f638c; /* リンクの色など */
	--link-hover-iro: #7d97b8; /* リンクにマウス乗せたときの色と強調のマーカー色 */
	--iconfont: "Font Awesome 6 Free"; /* アイコンフォントの名前 */
	--titlefont: "Lato","IBM Plex Sans JP", sans-serif; /* タイトルなどのフォント */
}

/* ヘッダーからフッターを囲むエリア */
.bodyarea {
	max-width: 85rem;
	padding: 1rem 3rem;
	margin: 4rem auto;
	background-color: var(--haikei-iro);
	color: var(--mozi-iro);
	display: grid;/* ↓4行 フッターを下部固定する */
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
	background-color: #fff;
	border-radius: 2rem;
}
@media all and (max-width: 768px) {
	.bodyarea {
		padding: 0.5rem 1rem;
		border-radius: 1rem;
	}
}

/* メニューとメインコンテンツを囲むエリア */
main { margin: 0; padding: 0;}

/* メニュー除いたメイン部分を囲むエリア(横幅を狭くする) */
.mainarea {
	width: min(100%,1000px);/* メイン領域の横幅 */
	margin: 0 auto;
	padding: 2rem 1.3rem 1rem;
	line-height: 1.65;
}

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

/* 画像そのもの */
.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);	/* ぼかして暗くする */
	width: 200px;
	aspect-ratio: 1;
	object-fit: cover;
}

/* NSFWマークを重ねる */
.imagelink.nsfw::after{
	content:"\f071";
	font-family: var(--iconfont);
	font-weight: 900;
	font-size: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--siro-mozi);
}

/* タグリストないけどリスト入れたいときのための先頭シャープ */
ul.hashtaglist .taglink::before{ content: '\23';}

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

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

/* 投稿ボックス(一発言)ごとの表示 */
.onelogbox {
	width: 100%;
	margin: 0 auto 3rem;
}

/*ユーティリティリンク枠を非表示*/
.utilitylinks { display: none;}

/* ページナビゲーション領域 */
.pagenavi { padding: 1.5rem 1.8rem; text-align: center;}

/* ページリンク */
.pagelinks {
	margin-bottom: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1px;
}
.prevlink,.nextlink,.pagenumlink,.omitmark {
	display: block;
	background-color: var(--koi-iro);
	color: var(--siro-mozi);
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.prevlink,.nextlink { width: fit-content; padding: 0 0.8rem;}
.pagenumlink,.omitmark { width: 30px;}

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

/* フッター */
#tega_footer {
	margin-bottom: 1rem;
	padding: 0;
	text-align: right;
	font-size: 80%;
	color: #666;
}

/* -----状況別表示切り替え指定ゾーン----- */
/* トップ以外ではクイックポストを非表示 */
body:not(.home) .postarea { display: none;}

/* 一覧ではキャプションを非表示 */
.ichiran figcaption { display: none;}
/* ---------- */