@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap');

/*
	Tegalog skin by pipi
	https://pipi.noor.jp/t/
*/

/* reset css */
*,*::before,*::after{box-sizing:border-box}*{margin:0}body{font-feature-settings:"palt" 1;overflow-wrap: anywhere;word-break: normal;line-break: strict;}picture,video,canvas{display:block;max-width:100%}input,button,textarea,select{font:inherit}img{max-width:100%;height:auto}nav ul{list-style-type:none}:where(:any-link) {color:currentColor;text-decoration-skip-ink:auto;text-decoration-color:color-mix(in srgb, currentcolor 30%, transparent);text-underline-offset: 0.2em;}

:root{
	/* ページ全体の背景色 */
	--body-bg: #eee;
	/* メインの文字色 */
	--main-text-color: #555;
	/* アクセントカラー */
	--accent: #2e8bb0;
	/* レイアウトボックスの背景色 */
	--sub-bg-color: #fff;
	/* 赤文字の色 */
	--red: mediumvioletred;
	
	/* レイアウトボックスの角丸 */
	--radius: 1rem;
	/* レイアウトボックスのドロップシャドウ */
	--shadow: drop-shadow(0 1px 1px var(--text-color-20));
	/* メインのフォントファミリー */
	--main-font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Segoe UI", "Meiryo", sans-serif;

	/* メインの文字色・アクセントカラーを薄くしたバリエーション（自動作成されるので変更不要です） */
	--text-color-10: color-mix(in srgb, var(--main-text-color) 10%, transparent);
	--text-color-15: color-mix(in srgb, var(--main-text-color) 15%, transparent);
	--text-color-20: color-mix(in srgb, var(--main-text-color) 20%, transparent);
	--text-color-30: color-mix(in srgb, var(--main-text-color) 30%, transparent);
	--text-color-40: color-mix(in srgb, var(--main-text-color) 40%, transparent);
	--text-color-50: color-mix(in srgb, var(--main-text-color) 50%, transparent);
	--text-color-70: color-mix(in srgb, var(--main-text-color) 70%, transparent);
	--accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
	--accent-60: color-mix(in srgb, var(--accent) 60%, transparent);
	--accent-20-sub: color-mix(in srgb, var(--accent) 20%, var(--sub-bg-color));
	--accent-50-sub: color-mix(in srgb, var(--accent) 50%, var(--sub-bg-color));
	--radius-mini: calc( var(--radius) * 0.3 );
}
html{
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	accent-color: var(--accent);
	background: var(--body-bg);
	color: var(--main-text-color);
	font-family: var(--main-font-family);
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin: 3vw 5vw;
}
a{
	font-weight: bold;
}
ul{
	padding: 0 0 0 0;
	list-style-type: none;
}

article a.imagelink,
article img.embeddedimage{
   pointer-events: none;
   -webkit-touch-callout:none;
   -webkit-user-select:none;
   -moz-touch-callout:none;
   -moz-user-select:none;
   user-select:none;
}

::marker{
	color: var(--accent);
}
img{
	height: auto;
	max-width: 100%;
	object-position: top;
	vertical-align: bottom;
}
textarea{
	font-size: 16px;	/* iOS zoom対策 */
}


/* header main --------------------------------------------*/

body > header{
	margin: 0 auto 3rem;
	text-align: center;
	img{
		margin: 0 5px 10px;
		vertical-align: bottom;
	}
	h1{
		font-size: 1.5rem;
	}
	.pageinfo{
		font-size: 0.85rem;
	}
	a{
		text-decoration: none;
	}
}
div.container{
	display: grid;
	gap: 1rem 3rem;
	grid-template-columns: 1fr 3fr 1fr;
	margin: 0 auto;
	max-width: 1200px;
	text-align: left;
	main{
		order: 2;
		.situation{
			border: 1px solid var(--text-color-30);
			border-radius: var(--radius);
			color: var(--text-color-70);
			filter: var(--shadow);
			font-size: 0.9rem;
			margin-bottom: 3rem;
			padding: 0.5em;
			text-align: center;
		}
		.situation:empty{
			display: none;
		}
	}
	aside.box1{
		order: 1;
	}
	aside.box2{
		order: 3;
	}
}
body.mode-sitemap div.container{
	max-width: unset;
}
main .situation::before{
	font-family: "Line Awesome Free";
	font-weight: 900;
	font-size: 1.4rem;
	vertical-align: text-top;
	margin-right: 5px;
	line-height: 1;
}
body.selected-tag main .situation::before{
	content: "\f02c";
}
body.selected-cat main .situation::before{
	content: "\f0da";
}
body.search-result main .situation::before{
	content: "\f002";
}
body.selected-date main .situation::before{
	content: "\f133";
}
.dateseparator{
	color: var(--text-color-70);
	font-size: 0.85rem;
	margin-bottom: 1rem;
}
.dateseparator::before{
	content: "\f0d7";
	font-family: "Line Awesome Free";
	font-weight: 900;
	margin-right: 0.25em;
}

/* article --------------------------------------------*/
article{
	background-color: var(--sub-bg-color);
	border-radius: var(--radius);
	filter: var(--shadow);
	margin-bottom: 3rem;
	padding: 3.5% 5% 5%;
	position: relative;

	a{
		text-decoration: none;
	}
	header{
		display: flex;
		font-size: 0.85rem;
		gap: 0.6rem;
		margin-bottom: 1rem;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid var(--text-color-30);

		.postdate{
			flex: 1;
		}
		small{
			color: var(--text-color-50);
		}
		a.categorylink,
		.Login-Required a{
			color: var(--text-color-50);
		}
	}
	.content{
		a:not(.readmorebutton):not(.cardlink):not(.uc-btn){
			text-decoration: underline;
			text-decoration-color: var(--text-color-30);
		}
		a:not(.cardlink)[target~="_blank"]::after{
			content: " \f35d";
			font-family: 'Line Awesome Free';
			font-weight: 900;
		}
		a.uc-btn{
			background-color: var(--accent);
			border-radius: var(--radius-mini);
			color: var(--sub-bg-color);
			display: inline-block;
			font-weight: bold;
			font-size: 0.9rem;
			margin: 0 0 5px 0;
			padding: 0.1em 0.6em 0.2em;
			text-decoration: none;
			transition: background-color 0.3s ease-in-out;
		}
		a.uc-btn:hover{
			background-color: var(--main-text-color);
		}
		img:not(.emoji){
			margin: 0.5em 0;
		}
		/*-- NSFW --*/
		a.nsfw{
			display: inline-block;
			margin: 5px 0;
			width: 50%;
		}
		img.nsfw,
		.thumbnails a[data-flag*="nsfw"] img{
			filter: blur(10px);
			opacity: 0.5;
			margin: 0;
		}
		.comment a.imagelink.nsfw img{
			margin: 0 0;
		}
		a.imagelink.nsfw,
		a[data-flag*="nsfw"],
		a:has( > img.nsfw ){
			background-color: var(--text-color-50);
			overflow: hidden;
			position: relative;
			text-decoration: none;
		}
		a.imagelink.nsfw:before,
		a[data-flag*="nsfw"]:before,
		:has( > img.nsfw ):before{
			color: #fff;
			content: '画像を見る';
			font-size: 0.85rem;
			left: calc(50% - 2.5em);
			line-height: 1;
			position: absolute;
			top: calc(50% - 0.5em);
			z-index: 500;
		}
		figure.nsfw a.nsfw{
			margin: 0;
		}
		/*-- リストで囲んだ画像 --*/
		ul.listdeco-img{
			display: grid;
			gap: 5px;
			grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
			list-style-type: none;
			padding-left: 0;
			a{
				display: block;
				overflow: hidden;
			}
			img{
				aspect-ratio: 1/1;
				margin: 0 0;
				object-fit: cover;
				object-position: top center;
				width: 100%;
			}
			a.nsfw,figure{
				margin: 0 0;
				width: 100%;
			}
			figcaption{
				margin: 0 0 1em;
			}
		}
		/*-- 折り畳み機能対応 --*/
		details{
			::marker{
				color: var(--text-color-70);
			}
			summary{
				background-color: var(--text-color-15);
				border-radius: var(--radius-mini);
				cursor: pointer;
				font-size: 0.9rem;
				font-weight: bold;
				padding: 0.1em 0.6em 0.2em;
			}
			.foldedarea{
				border-bottom: 5px solid var(--text-color-15);
				border-radius: var(--radius-mini);
				padding: 1em 0;
			}
			details{
				margin: 1em;
			}
		}
	}
	figcaption {
		color: var(--text-color-70);
		font-size: 0.85rem;
		line-height: 1.5;
		margin: -5px 0 1em;
		a{
			color: var(--text-color-70);
			font-weight: normal;
		}
	}
	q.decorationQ{
		background-color: var(--accent-20-sub);
		padding: 1em 2em;
		font-size: 0.9rem;
		margin: 0.5em 0;
		position: relative;
	}
	q.decorationQ:before{
		content: "\f10d";
		font-family: 'Line Awesome Free';
		font-weight: 900;
		color: var(--text-color-50);
		position: absolute;
		left: 6px;
		top: 0;
	}
	q.decorationQ:after{
		content: "\f10e";
		font-family: 'Line Awesome Free';
		font-weight: 900;
		color: var(--text-color-50);
		position: absolute;
		right: 6px;
		bottom: 0;
	}
	a.readmorebutton{
		background-color: var(--text-color-70);
		border-radius: var(--radius-mini);
		color: var(--sub-bg-color);
		display: inline-block;
		font-weight: bold;
		font-size: 0.9rem;
		margin: 0 0 5px 0;
		padding: 0.1em 0.6em 0.2em;
		text-decoration: none;
		transition: background-color 0.3s ease-in-out;
	}
	a.readmorebutton:hover{
		background-color: var(--accent);
	}
	a.readmoreclose{
		background-color: transparent;
		border-radius: 0;
		border-top: 1px solid var(--text-color-20);
		color: var(--text-color-50);
		display: block;
		font-size: 0.8em;
		margin: 2rem 0;
		text-align: right;
	}
	a.readmoreclose:hover{
		background-color: transparent;
		color: var(--accent);
	}
	small:has(img) {
		display: inline-block;
		width: 50%;
	}
}
article.logstatus-lock:before{
	content: "\f023";
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 1.3em;
	position: absolute;
	right: calc(50% - 0.6em);
	top: -20px;
}
article.logstatus-fixed:before{
	content: "\f08d";
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 1.3em;
	position: absolute;
	right: calc(50% - 0.6em);
	top: -20px;
}
.nodata,
.nolist{
	background-color: var(--sub-bg-color);
	border-radius: var(--radius);
	filter: var(--shadow);
	margin-bottom: 3rem;
	padding: 3rem 5%;
}
nav.pages{
	text-align: center;
	font-weight: bold;
	a{
		background-color: var(--text-color-20);
		border-radius: var(--radius-mini);
		color: var(--main-text-color);
		display: inline-block;
		letter-spacing: 0;
		margin-bottom: 5px;
		min-width: 2em;
		padding: 0 0.3em 0.2em;
		text-decoration: none;
		transition: all 0.3s ease-in-out;
	}
	a:hover{
		background-color: var(--text-color-40);
	}
	.pagenumhere{
		background-color: var(--accent);
		color: var(--sub-bg-color);
	}
}
nav.pages.onelog{
	a.nextlink{
		clip-path: polygon(0 50%,15% 0,100% 0,100% 100%,15% 100%);
		padding-left: 1.5em;
		padding-right: 1em;
	}
	a.prevlink{
		clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
		padding-left: 1em;
		padding-right: 1.5em;
	}
}
.utilitylinks{
	font-size: 0.85rem;
	margin-bottom: 2rem;
}



/* aside --------------------------------------------*/
div.container > aside{
	color: var(--text-color-70);
	font-size: 0.85rem;
	line-height: 2;
	position: relative;

	nav{
		padding: 1em 0;
		position: sticky;
		top: 0;
	}
	h2{
		font-size: 0.8rem;
		font-weight: normal;
		margin-top: 2em;
	}
	h2:first-child{
		margin-top: 0;
	}
	a{
		text-decoration: none;
	}
	a:hover{
		color: var(--main-text-color);
	}
	.cattree{
		li{
			border-bottom: 1px solid var(--text-color-30);
		}
		a{
			display: block;
		}
		.num{
			display: none;
		}
	}
	.freespace {
		margin-bottom: 2em;
		.author{
			font-size: 1rem;
			font-weight: bold;
		}
		a{
			display: block;
			border-bottom: 1px solid var(--text-color-30);
		}
		p{
			line-height: 1.8;
			margin-bottom: 1em;
		}
		.Login-Required a::before,a.Login-Required::before{
			content: "\f023";
			font-family: "Line Awesome Free";
			font-weight: 900;
		}
	}
	.hashtaglist{
		li {
			display: inline-block;
			padding-right: 0.5em;
		}
		li:before {
			content: '#';
			color: var(--text-color-50);
		}
		.num{
			display: none;
		}
	}
	table.calendar{
		width: 100%;
		border-collapse: collapse;
		text-align: center;
		font-size: 0.75rem;
		margin-top: 2em;
		caption{
			text-align: left;
		}
		thead{
			background-color: var(--text-color-10);
		}
		tr {
			border-bottom: 1px solid var(--text-color-30);
		}
		tr:last-child {
			border-bottom: none;
		}
		.sun,.sat {
			background-color: var(--sub-bg-color);
		}
		.today {
			background-color: var(--accent-30);
		}
		a{
			color: var(--main-text-color);
		}
		span.nolink{
			color: var(--text-color-50);
		}
	}
	.calbtm {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 0.8rem;
	}
	a.btn{
		border: 1px solid var(--text-color-30);
		border-radius: var(--radius-mini);
		display: block;
		padding: 0.1em 0.6em 0.2em;
		margin-top: 2em;
		transition: 0.3s background-color ease-in-out;
	}
	a.btn:hover{
		background-color: var(--text-color-20);
	}
	a.btn + a.btn{
		margin-top: 0.5em;
	}
	.latestpostlist{
		li{
			border-bottom: 1px solid var(--text-color-30);
			line-height: 1.4;
			padding: 0.5em 0;
		}
	}
	.imagelist{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 5px;
		img{
			aspect-ratio: 1 / 1;
			object-fit: cover;
			width: 100%;
		}
	}
}


/* common parts --------------------------------------------*/
em,mark.searchword{
	text-decoration: underline;
	text-decoration-thickness: 0.5em;
	text-underline-offset: -0.2em;
	text-decoration-skip-ink: none;
}
em{
	filter: saturate(200%);
	font-style: normal;
	font-weight: bold;
	margin-inline: 0.2em;
	text-decoration-color: var(--accent-30);
}
mark.searchword{
	background-color: transparent;
	color: currentColor;
	text-decoration-color:  rgba(222, 222, 0, 0.5);
}

u{
	text-underline-offset: 0.2em;
}
small.decorationT{
	color: var(--text-color-50);
}
ul.decorationL,
.utilitylinks ul{
	list-style-type: disc;
	padding-left: 2rem;
	list-style-position: outside;
	margin: 0.5em 0;
}
.utilitylinks ul ul ::marker{
	color: var(--accent-60);
}
.category a::before,
.cattree a::before,
a.categorylink::before{
	content: "\f0da";
	font-family: "Line Awesome Free";
	font-weight: 900;
}
.num{
	color: var(--text-color-70);
	font-size: 0.8em;
}
img.circle{
	aspect-ratio: 1 / 1;
	border-radius: calc(infinity * 1px);
	object-fit: cover;
	height: 72px;
	vertical-align: middle;
	width: 72px;
}
img.emoji {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	margin: 0 3px 3px;
}
.small{
	font-size: 0.85rem;
}
hr{
	border: none;
	border-top: 1px solid var(--text-color-30);
	margin: 1em 0;
}
code{
	background-color: var(--text-color-20);
	border-radius: var(--radius-mini);
	font-size: 0.9em;
	padding: 0.2em 0.5em;
}
ruby > rt{
	margin-bottom: -3px;
}
.backto{
	font-size: 0.9rem;
	margin-top: 1rem;
	text-align: center;
}
.decoration2{
	background-color: var(--accent-20-sub);
	margin: 2em 0 0.5em;
	padding: 0.3em 1em;
}
.decoration2 + br{
	display: none;
}
.decoration3{
	color: var(--red);
}


/* cardlink -------------------------------------------- */
.cardlink {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: normal;
	margin: 0.5em 0;
	text-decoration: none;
	vertical-align: middle;
	width: 100%;
}
.cardlink::before{
	display: none;
}
.cardlinkbox {
	background-color: white;
	border: 1px solid var(--text-color-30);
	border-radius: var(--radius-mini);
	display: flex;
}
.cardlinkimage {
	aspect-ratio: 1.91 / 1;
	background-image: url(imgforskin/noimage.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--radius-mini) 0 0 var(--radius-mini);
	height: auto;
	width: 100%;
}
.cardlinktextbox {
	display: flex;
	flex-direction: column;
	padding: 0.7em 1em 1em;
}
.cardlinktitle,
.cardlinkdescription,
.cardlinkurl {
	display: -webkit-box;			/* -webkit-line-clampを使うために必要な記述 */
	line-clamp: 1;					/* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
	overflow: hidden;				/* 表示量を制限する場合に必須の記述 */
	text-overflow: ellipsis;		/* 省略記号(三点リーダー) */
	-webkit-line-clamp: 1;			/* 1行だけ見せる (今のブラウザにはこちらが必要) */
	-webkit-box-orient: vertical;	/* -webkit-line-clampを使うために必要な記述 */
}
.cardlinktitle {
	font-weight: bold;
}
.cardlinkdescription {
	line-height: 1.4;
	color: var(--text-color-70);
	line-clamp: 2;
	-webkit-line-clamp: 2;
}
.cardlinkurl {
	border-top: 1px dotted var(--text-color-30);
	color: var(--text-color-70);
	font-size: 0.8em;
	margin-top: 0.5em;
	padding-top: 0.2em;
}

.cardsize-S {
	flex-direction: row;
	.cardlinkimage {
		border-radius: var(--radius-mini) 0 0 var(--radius-mini);
		height: 120px;
		width: unset;
	}
	.cardlinktextbox {
		border-left: 1px solid var(--text-color-30);
		flex: 1;
		justify-content: center;
		padding: 0em 1em;
	}
}
@media (max-width: 599px) {
	.cardsize-S{
		font-size: 0.85rem;
	}
	.cardsize-S .cardlinkimage {
		aspect-ratio: 1 / 1;
	}
}

.cardlink:has(.cardsize-L){
	max-width: 450px;
}
.cardsize-L {
	flex-direction: column;

	.cardlinkimage{
		border-radius: var(--radius-mini) var(--radius-mini) 0 0;
	}
	.cardlinktextbox {
		border-top: 1px solid var(--text-color-30);
	}
}



/* input -------------------------------------------- */
.catpullbox,
.datelimitbox,
.hashtagpullbox,
.searchinputs{
	display: flex;
}
.datelimitboxoptions{
	display: none;
}
input.queryinput,
input.passkeyinput,
select{
	background-color: var(--sub-bg-color);
	border: 1px solid var(--text-color-70);
	border-radius: var(--radius-mini) 0 0 var(--radius-mini);
	color: var(--main-text-color);
	height: 2rem;
	vertical-align: middle;
	width: calc(100% - 3rem);
}
input[type="submit"],
.postarea input[type="button"]{
	background-color: var(--text-color-70);
	border: none;
	border-radius: var(--radius-mini);
	color: var(--sub-bg-color);
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: bold;
	height: 2rem;
	letter-spacing: 0.1em;
	padding: 0 0.5rem;
	transition: background-color 0.3s ease-in-out;
	vertical-align: middle;
}
input[type="submit"]:hover,
.postarea input[type="button"]:hover{
	background-color: var(--main-text-color);
}
input[type="submit"],
select + input[type="button"]{
	border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
}


/* locked post ---- */
input.passkeyinput{
	width: calc(100% - 7rem);
}
input.passkeysubmit{
	padding: 0 0 2px;
	width: 7rem;
}
span.passkeybox{
	display: block;
	margin-bottom: 0.3rem;
}
span.passkeyguide{
	display: block;
}


/* postarea ---- */
.postarea{
	background-color: var(--accent-30);
	border-radius: var(--radius);
	margin-bottom: 3rem;
	summary{
		color: var(--accent);
		cursor: pointer;
		font-weight: bold;
		padding: 1rem 4%;
	}
	form.postform{
		padding: 0 4%;
	}
	textarea.tegalogpost{
		background-color: var(--sub-bg-color);
		border: none;
		border-radius: var(--radius-mini) var(--radius-mini) 0 var(--radius-mini);
		color: var(--main-text-color);
		field-sizing: content;
		min-height: 10rem;
		padding: 0.2em 0.6em;
		resize: vertical;
		vertical-align: bottom;
		width: 100%;
	}
	input[type="text"]{
		background-color: var(--accent-30);
		border: none;
		border-radius: var(--radius-mini);
		color: var(--main-text-color);
		letter-spacing: 2px;
		margin-bottom: 10px;
		padding: 0 0.6em;
	}
	.submitcover{
		display: block;
		margin-bottom: 1rem;
		text-align: right;
	}
	input.postbutton{
		background-color: var(--accent);
		border-radius: 0 0 var(--radius-mini) var(--radius-mini);
		width: 50%;
	}
	input.postbutton:hover{
		background-color: var(--main-text-color);
	}
	.line-control{
		font-size: 0.9rem;
		padding-bottom: 1rem;
	}
	input[type="button"]{
		font-weight: normal;
		margin: 0 5px 5px 0;
		vertical-align: middle;
	}
	select{
		margin-bottom: 5px;
		width: unset;
	}
	select + input[type="button"]{
		border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
	}
	label{
		display: inline-block;
		padding: 0 1em 5px 0;
		vertical-align: middle;
	}
	label input[type="checkbox"]{
		margin-right: 3px;
	}
	input[type="file"]{
		border: 1px solid var(--text-color-70);
		border-radius: var(--radius-mini);
		height: 2rem;
		margin: 0 5px 5px 0;
		vertical-align: middle;
	}
	::file-selector-button{
		background-color: var(--text-color-70);
		border: none;
		color: var(--sub-bg-color);
		cursor: pointer;
		margin-right: 0.7em;
		padding: 0.7em;
		text-box-edge: cap alphabetic;
		text-box-trim: trim-both;
		transition: background-color 0.3s ease-in-out;
	}
	::file-selector-button:hover{
		background-color: var(--main-text-color);
	}
	.catChecks{
		display: block;
	}
	.funcUIs .catChecks{
		display: inline;
	}
	div.QP_footer{
		padding: 0 1.6rem 1rem;
		text-align: right;
	}
}


/* articlelist --------------------------------------------*/
.articlelist{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	margin-bottom: 3rem;
	gap: 2rem;

	> a{
		font-weight: normal;
		text-decoration: none;
	}
	article{
		display: flex;
		flex-direction: row;
		margin-bottom: 0;
		padding: 0;

		div.imagearea{
			aspect-ratio: 1 / 1;
			background-color: var(--accent-30);
			border-radius: var(--radius) 0 0 var(--radius);
			display: grid;
			width: 120px;
		}
		div.articleinfo{
			border-radius: 0 var(--radius) var(--radius) 0;
			color: var(--text-color-70);
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			line-height: 1.6;
			padding: 0 5%;
			b{
				color: var(--main-text-color);
				font-size: 0.85rem;
			}
			p{
				display: -webkit-box;			/* -webkit-line-clampを使うために必要な記述 */
				line-clamp: 2;					/* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
				overflow: hidden;				/* 表示量を制限する場合に必須の記述 */
				text-overflow: ellipsis;		/* 省略記号(三点リーダー) */
				-webkit-line-clamp: 2;			/* 1行だけ見せる (今のブラウザにはこちらが必要) */
				-webkit-box-orient: vertical;	/* -webkit-line-clampを使うために必要な記述 */
			}
		}
	}
	article.logstatus-fixed:before,
	article.logstatus-lock:before{
		right: 1rem;
	}
	img{
		aspect-ratio: 1 / 1;
		border-radius: var(--radius) 0 0 var(--radius);
		object-fit: cover;
		object-position: 50%;
		width: 150px;
	}
	div.imagearea:empty::before,
	div.imagearea:has(.nsfw)::before,
	article.logstatus-lock div.imagearea::before{
		color: var(--accent);
		font-size: 0.8rem;
		margin: auto;
		padding-bottom: 5px;
	}
	div.imagearea:empty::before{
		content: "no image";
	}
	div.imagearea:has(.nsfw)::before{
		content: "NSFW";
	}
	article.logstatus-lock div.imagearea::before{
		content: "\f023";
		font-family: "Line Awesome Free";
		font-size: 2rem;
		font-weight: 900;
	}
	img.nsfw,
	img.emoji,
	article.logstatus-lock div.imagearea img{
		display: none;
	}
}
body.mode-sitemap div.container main .situation{
	margin-bottom: 2rem;
}
body.mode-sitemap .postarea{
	margin-bottom: 2rem;
}


/* footer --------------------------------------------*/
footer{
	color: var(--text-color-50);
	font-size: 0.8rem;
	padding: 100px 0 0;
	text-align: center;
}


/* utility --------------------------------------------*/
.mt0{	margin-top: 0 !important; }
.mt05{	margin-top: 0.5rem !important; }
.mt1{	margin-top: 1rem !important; }
.mt2{	margin-top: 2rem !important; }
.mb0{	margin-bottom: 0 !important; }
.mb05{	margin-bottom: 0.5rem !important; }
.mb1{	margin-bottom: 1rem !important; }
.mb2{	margin-bottom: 2rem !important; }
.mb3{	margin-bottom: 3rem !important; }
.mb4{	margin-bottom: 4rem !important; }

.colorchange{
	button{
		margin-bottom: 5px;
	}
	button:nth-child(1)::first-letter{
		color: #e7ae13;
	}
	button:nth-child(2)::first-letter{
		color: #769834;
	}
	button:nth-child(3)::first-letter{
		color: #b17964;
	}
	button:nth-child(4)::first-letter{
		color: #999;
	}
	button:nth-child(5)::first-letter{
		color: #8DB9D4;
	}
	button:nth-child(6)::first-letter{
		color: #DABDD5;
	}
	button:nth-child(7)::first-letter{
		color: #304D78;
	}
	button:nth-child(8)::first-letter{
		color: #6F2D44;
	}
}


/* responsive --------------------------------------------*/
@media (max-width: 1000px) {
	div.container{
		grid-template-columns: 3fr 1fr;
		grid-template-rows: auto 1fr;
		main{ grid-area: 1 / 1 / 3 / 2; }
		aside.box1{ grid-area: 1 / 2 / 2 / 3; }
		aside.box2{ grid-area: 2 / 2 / 3 / 3; }
		aside nav{
			position: unset;
		}
	}
}
@media (max-width: 600px) {
	html{
		font-size: 95%;
	}
	body{
		margin: 3rem 3vw 3vw;
	}
	div.container {
		gap: 5rem 2rem;
		grid-template-columns: repeat(2, 1fr);
		main { grid-area: 1 / 1 / 2 / 3; }
		aside.box1 { grid-area: 2 / 1 / 3 / 2; }
		aside.box2 { grid-area: 2 / 2 / 3 / 3; }
	}
}