@charset "utf-8";

/* スキン「zikken04」配布用 */

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

/* -------------------- */
/* カスタム用色変更欄 */
/* -------------------- */
:root{
	--haikei-iro: #f3f2ed ; /* 全体背景色 */
	--mozi-iro: #1a1a1a ; /* メイン文字色 */
	--usu-mozi-iro: #979797 ; /* ↑よりちょっと薄い文字色 */
	--siro-mozi: #f5f5f5 ; /* 濃い背景に乗せる白文字色 */
	--koi-iro: #1d1d1d ; /* 濃いアクセント色 */
	--link-iro: #8fbc8f ; /* リンクの色など */
	--link-hover-iro: #dbc7ed ; /* リンクにマウス乗せたときの色と強調のマーカー色 */
	--iconfont: "Material Icons Outlined"; /* アイコンフォントの名前 */
}

/* 全体共通装飾 */
body {
	font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	background-color: var(--haikei-iro);
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.3;
	display: grid;/* ↓4行 中身少なくてもフッターを下部固定する */
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
	min-height: 100svh;
}

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

/* URLが書かれた場合の装飾 */
.url { word-break:break-all;}/* 自動リンクのはみ出しを防ぐ */

/* ヘッダー */
header {
	margin: 0;
	padding: 2.5rem;
	text-align: center;
	width: 100%;
	background-color: var(--link-iro);
	color: var(--siro-mozi);
}

/* タイトル部分 */
.maintitlelink {
	margin-bottom: 0;
	font-size: 2rem;
	color: var(--siro-mozi);
}
.subtitle { font-size: 1rem; font-weight: bold;}

/* 検索窓 */
.searchboxarea { margin: 0 auto 1rem; text-align: right;}
.queryinput {
	font-size: 1rem;
	vertical-align: middle;
	color: var(--mozi-iro);
}
.searchbox .submitbutton {
	margin-left: 5px;
	padding: 0.2rem 0.6rem;
	border: 0px;
	background-color: var(--koi-iro);
	color: var(--siro-mozi);
	cursor: pointer;
  }
.searchbox .submitbutton:hover { background-color: var(--link-hover-iro);}
.searchoption { font-size: 0.8rem; color: var(--usu-mozi-iro);}

/* メイン(ログ掲載)領域 */
.mainarea {
	margin: 0 auto;
	padding: 1.5rem 1.2rem;
	width: min(100%,1000px);
}

/* 表示対象の限定時などの「限定条件」表示行 */
.situation {
	margin: 0 0 1rem 0.2rem;
	font-size: 0.8rem;
	color: var(--usu-mozi-iro);
}
.situation:empty { display: none; }	/* 限定表示がない場合は存在自体を消す */
body.onelog .situation { display: none; }	/* 画像の単独表示ページでも消す */

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

/* ページ内の画像群(一覧表示時はグリッド) */
.tegalogImages { margin-bottom: 3rem;}
body:not(.onelog) .tegalogImages {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px,1fr));/* 一つのサムネが横幅150px以下で折り返す */
	gap: 0.5rem 0.5rem;
}

/* 投稿ボックス(1画像)ごとの表示 */
/* 共通装飾（一覧表示時・画像単独表示時共通） */

/* 画像ボックス(FIG付き) */
.embeddedpictbox {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: table;
	border-collapse: collapse;
	vertical-align: top;
	position: relative;
}
/* キャプション */
.embeddedpictbox figcaption {
	font-size: 0.8rem;
	text-align: center;
	padding: 0.3rem;
	line-height: 1.2;
	background-color: rgb(0, 0, 0,0.6);
	color: var(--siro-mozi);
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

/* キャプションがない場合は、キャプション枠自体を非表示にする */
.embeddedpictbox figcaption:empty { display: none;}

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

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

/* 画像そのもの */
.embeddedimage {
	max-width: 100%;	/* 横方向にはみ出ないようにする */
	/* width: auto; */	/* 横幅を固定したい場合は、ここではなく「一覧表示時」と「単独表示時」とで別個に指定する方が望ましいと思います。 */
	height: auto;	/* 高さを固定したい場合は、ここではなく「一覧表示時」と「単独表示時」とで別個に指定する方が望ましいと思います。 */
}

/* NSFWフラグ付き画像用の装飾 */
.imagelink.nsfw,
figure.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:"\e002";
	font-family: var(--iconfont);
	font-size: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--siro-mozi);
}
/* 一覧表示時 */
.forList {
	vertical-align: top;
	position: relative;
}

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

/* 詳細リンクアイコンなど */
.forList .imagebox { position: relative;}
.piconarea {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0.3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pictInfoBtn,.pictSearchBtn {
	.material-icons-outlined {
	font-size: 1.8rem;
	color: var(--siro-mozi);
	text-shadow: 0 0 3px rgb(0, 0, 0);
}}
.pictInfoBtn,.pictSearchBtn { .material-icons-outlined:hover { color: var(--link-hover-iro);}}

/* 単独表示時 */
/* 画像タイトル */
.pictTitle {
	text-align: center;
	font-weight: bold;
	word-break: break-all;
	margin-bottom: 1rem;
}

/* 画像掲載部分 */
.onePictBox {
	width: fit-content;
	margin: 0 auto;
}

/* キャプションを下に */
body.onelog .embeddedpictbox figcaption {
	position: relative;
	background-color: transparent;
	color: var(--usu-mozi-iro);
}

/* 画像情報部分 */
.onePictMeta {
	margin: 2rem auto;
	max-width: 600px;
	text-align: left;
}
/* 情報リスト */
.onePictMeta ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* 項目見出し */
.onePictMeta small {
	background-color: var(--usu-mozi-iro);
	color: var(--siro-mozi);
	display: inline-block;
	min-width: 6rem;
	line-height: 1;
	text-align: center;
	padding: 2px 0.5rem;
	vertical-align: middle;
}

/* ユーザリンク */
.usericon {
	width: 16px;
	height: 16px;
	vertical-align: -6%;
}

/* 使用投稿検索 */
.onePictSearch { text-align: center; margin-top: 1rem;}
.onePictSearch .pictSearchBtn .material-icons-outlined {
	font-size: 1.2rem;
	vertical-align: middle;
	color: var(--mozi-iro);
	text-shadow: none;
}
.onePictSearch .pictSearchBtn:hover {
 .material-icons-outlined { color: var(--link-hover-iro);
}}

/* ページナビゲーション領域 */
.pagenavi { text-align: center; }
.pagenavi .pageln { margin-bottom: 0.7rem;}

/* ページ番号リンクの数字 */
p.pageln {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem;
}
a.pagenumlink {
	width: 25px;
	height: 25px;
	text-decoration: none;
	line-height: 25px;
}
.pagenumlink,.prevlink,.nextlink { color: var(--usu-mozi-iro);}
.pagenumlink:hover { background-color: var(--link-hover-iro); color: var(--siro-mozi);}
a.pagenumhere { background-color: var(--koi-iro); color: var(--siro-mozi);}

.prevlink,.nextlink {
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--usu-mozi-iro);
}
.prevlink,.nextlink {
&:hover {
	background-color: var(--link-hover-iro);
	border-color: var(--link-hover-iro);
	color: var(--siro-mozi);
}}

/* フッター */
footer {
	width: 100%;
	height: 40px;
	margin: 3rem 0 0;
	padding: 0.5rem 3rem 0.5rem 1rem;
	background-color: var(--link-iro);
	color: var(--siro-mozi);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* 著作権表示(Poweredby)のデザイン */
.poweredby { font-size: 0.8em;}
.poweredby .kanri .material-icons-outlined {
	font-size: 1.2rem;
	text-shadow: none;
	vertical-align: middle;
	margin-right: 0.5rem;
	color: var(--siro-mozi);
}
.poweredby .kanri .material-icons-outlined:hover { color: var(--link-hover-iro);}

/*上に戻るボタンの装飾*/
a.ue_btn {
	position: fixed;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	bottom: 0;
	right: 0;
	background: var(--link-iro);
	color: var(--siro-mozi);
	text-decoration: none;
}
.ue_btn .material-icons-outlined { font-size: 30px;}
.ue_btn:hover{ background-color: var(--link-hover-iro);}