@charset "UTF-8";

/* ↓ページ全体の設定 */
html{
	scroll-behavior: smooth;
}

body{
	position: relative;
	width:100%;
	min-height:100dvh;
	display: flex;
	flex-flow: column;
	background-color: var(--color-base);
	color: var(--color-text);
	letter-spacing: 0.12em;
	line-height: 1.8;
	font-family: var(--font-primary);
	animation: fadein 1s ease-out;
}

strong{
	color: var(--color-main);
	font-weight: 600;
}

#wrap{
	display: flex;
	flex-direction: column;
    justify-content: start;
	min-height: 100dvh;
	padding: var(--margin-base);
}

/* ↓サイドバー */
.side > *{
	margin-top: calc(var(--margin-base) * 0.7);
}

.side > div h2{
	display: flex;
	align-items: center;
	gap: 0 0.4em;
	margin-bottom: 0.6em;
	font-family: var(--font-alphanumeric);
	color: var(--color-main);
	font-weight: bold;
}

.side > div h2::after{
	content:'';
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--color-main);
}

.num{
	font-family: var(--font-alphanumeric);
	font-size: 0.9em;
}

/* ↓リンク一覧 */
.link ul{
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em 0;
}

.link ul li a{
	display: block;
	background-color: var(--color-main);
	color: var(--color-base);
	font-family: var(--font-alphanumeric);
	text-align: center;
	font-weight: bold;
	line-height: 2em;
	border-radius:2em;
	transition : all 0.3s ease 0s;
}

.link ul li a:hover{
	background-color: var(--color-accent);
}

/* ↓カテゴリーリスト */
ul.cattree li::before {
	margin-right: 0.3em;
	content: '\f07b';
	font-family: var(--font-icon);
	color: var(--color-main);
}

/* ↓ハッシュタグ */
ul.hashtaglist{
	display: flex;
	flex-wrap: wrap;
	gap:0.8rem;
}

ul.hashtaglist .num{
	display: none;
}

ul.hashtaglist li{
	padding: 0 0.5em;
	background-color: rgba(0,0,0,0.05);
	font-size: 0.9em;
	font-weight: 500;
	border-radius: calc(var(--border-radius) / 2);
}

ul.hashtaglist li.notexist{
	padding: 0;
	background-color: transparent;
}

/* ↓日付リスト */
form.datelimitbox{
	line-height: 2em;
	display: flex;
	background-color: var(--color-light);
}

form.datelimitbox select{
	flex: 1;
	padding: 0 0.6em;
	font-family: var(--font-alphanumeric);
	font-size: 0.9em;
	letter-spacing: 0.1em;
	z-index: 2;
}

form.datelimitbox input{
	width: 4em;
	letter-spacing: 0.2em;
	text-align: center;
	color: var(--color-light);
	background-color: var(--color-accent);
}

form.datelimitbox {
	position: relative;
}

form.datelimitbox::before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	right: 4.5em;
	margin: auto;
	content: '\f078';
	font-family: var(--font-icon);
	color: var(--color-accent);
	font-weight: bold;
}

/* ↓検索 */
.searchbox{
	position: relative;
}

.searchbox::after{
	font-family: var(--font-icon);
	content:'\f002';
	font-weight: bold;
	position: absolute;
	right: 1rem;
	top: 0;
	bottom: 0;
	color: var(--color-main);
	z-index: -1;
}

.searchinputs{
	height: 2.2em;
	padding-left: 1em;
	border: solid 1px var(--color-main);
	display: block;
	border-radius: 2.2em;
}

.searchbox input{
	display:inline-block;
}

.searchbox input:focus {
	outline: none;
}

.searchbox input.queryinput{
	width: calc(100% - 2em);
}

.searchbox input.queryinput::placeholder{
	font-family: var(--font-alphanumeric);
	color: var(--color-main);
}

.searchbox input.submitbutton{
	font-size: 0;
	width: 1.5em;
	height: 1.5em;
}

/* ↓各記事 */
.main{
	width: 100%;
}

article{
	background-color: var(--color-light);
}

article .comment::after {
   content: "";
   display: block;
   clear: both;
}

article,
.nodata,
.nolist
{
	margin-top: var(--margin-base);
	border-radius: var(--border-radius);
}

article:first-of-type{
	margin-top: 0;
}

article .comment::after {
	content: "";
	display: table;
	clear: both;
}

article .comment a{
	color: var(--color-main);
	text-decoration: underline;
	transition : 0.5s;
}

article .comment a.taglink{
	text-decoration: none;
}

article .comment a:hover{
	color: var(--color-main);
}

article .link a{
	display: inline-block;
	padding: 0 1em;
	border: solid 1px var(--color-accent);
	border-radius: 1.7em;
	text-decoration: none;
}

article .link a:hover{
	color: var(--color-base);
	background-color: var(--color-accent);
}

article .decorationE{
	font-style: normal;
	font-weight: 600;
}

ul.decorationL{
	margin: 1em 0;
}

ul.decorationL li{
	position: relative;
	padding: 0 0 0.6em 1.4em;
}


ul.decorationL li:last-child{
	padding-bottom: 0;
}

ul.decorationL li::before {
	content:'\f058';
	position: absolute;
	left: 0;
	font-family: var(--font-icon);
	color: var(--color-accent);
	font-size: 1.1em;
}

article .decorationQ::before,
article .decorationQ::after{
	font-family: var(--font-icon);
	color: var(--color-accent);
	font-size: 1.4em;
	line-height:1;
	font-weight: bold;
}

article .decorationQ::before{
	content:'\f10d';
	margin-right: 0.2em;
}

article .decorationQ::after{
	content:'\f10e';
	margin-left: 0.2em;
}

/* ↓続きを読むボタン */
article .comment a.readmorebutton{
	display: block;
	margin: 1em 0;
	width: 100%;
	color: var(--color-accent);
	line-height: 2.3em;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-align: center;
	border: solid 1px var(--color-accent);
	border-radius: var(--border-radius);
	transition : 0.5s;
}

article .comment a.readmorebutton:hover{
	background-color: var(--color-accent);
	color: var(--color-light);
}

article img{
	max-width: 50vw;
}

/* ↓パスワード入力 */
.passkeybox{
	line-height: 2.4em;
}

.passkeyguide{
	display: block;
}

.passkeyinput{
	padding: 0 0.8em;
	border: solid 1px var(--color-accent);
}

.passkeysubmit{
	padding: 0 1em;
	letter-spacing: 0.15em;
	background-color: var(--color-accent);
	color: var(--color-light);
	border: solid 1px var(--color-accent);
}

/* ↓画像 */
article .comment a.imagelink img.embeddedimage{
	margin: 0.65em 0;
	max-width: 100%;
	height: auto;
}

article .comment a.nsfw{
	display: block;
	float: left;
	margin-right: calc(var(--margin-base) * 0.7);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	width:  calc(var(--margin-base) * 5);
	max-width:50%;
}

article .comment a.nsfw img.nsfw{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(0.8em);
}

iframe.embeddedmovie{
	display: block;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* ↓日付・カテゴリ */
article .oneloginfo{
	display: flex;
	flex-wrap: wrap;
	gap: 0 1em;
	color: var(--color-accent);
}

article .oneloginfo::after{
	content:'';
	display: block;
	width:100%;
	background-image: repeating-linear-gradient(
		-45deg,
		var(--color-accent),
		var(--color-accent) 1px,
		transparent 2px,
		transparent 5px
	);
	background-position: center bottom;
	background-repeat: repeat-x;
	background-size: 100% 100%;
	opacity: 0.5;
	border-radius: 0.5em;
}

article .oneloginfo .category{
	display: flex;
	gap: 0 1em;
}

article .oneloginfo .categorylink::before {
	margin-right: 0.2em;
	content: '\f07b';
	font-family: var(--font-icon);
}

.postdate{
	font-family: var(--font-alphanumeric);
}

/* ↓ページネーション */
.pagenums{
	margin-top: var(--margin-base);
	font-family: var(--font-alphanumeric);
	text-align: center;
}

.pagenums .pagenumlink{
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	border-radius: 50%;
}

.pagenums .pagenumlink.pagenumhere{
	background-color: var(--color-accent);
	color: var(--color-base);
}

.pagenumhere{
	pointer-events: none;
}

/* ↓投稿フォーム表示ボタン */
.newpost button{
	width: var(--margin-base);
	height: var(--margin-base);
	font-size: calc(var(--margin-base) * 0.8);
	line-height: var(--margin-base);
}

.newpost{
	position: fixed;
	width: fit-content;
	z-index: 101;
}

.newpost button{
	display: block;
	font-size: 1.2em;
	text-align: center;
	vertical-align:middle;
	border-radius:50%;
	background-color: var(--color-accent);
	color: var(--color-base);
	transition: 0.5s;
}

.newpost.show button{
	background-color: var(--color-main);
	color: var(--color-light);
}

/* ↓投稿フォーム */
.postarea{
	position: fixed;
	right: 0;
	top: 0;
	padding: var(--margin-base);
	background-color: var(--color-accent);
	z-index: 100;
	transition: all .4s linear;
	overflow: auto;
}

.postarea::-webkit-scrollbar {
   width: 1rem;
}

.postarea::-webkit-scrollbar-track {
	background-color: transparent;
}

.postarea::-webkit-scrollbar-thumb {
  background-color: var(--color-main);
}

.postarea.show{
  transform: translateX(0);
}

form.postform textarea{
	resize: none;
	background-color: var(--color-light);
	padding: 1em;
	width: 100%;
	border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
}

form.postform textarea:focus {
    outline: none;
}

.postbutton{
	margin-right: 1em;
	padding: 0 1.5em;
	background-color: var(--color-main);
	color: var(--color-light);
	line-height: 2.8em;
	letter-spacing: 0.2em;
	font-weight: bold;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.changelink{
	display: inline-block;
	line-height: 2.5em;
}

.line-control span.decoBtns{
	display: flex;
	flex-wrap: wrap;
	margin-top: 2em;
}

.line-control span.decoBtns input{
	padding: 0 1rem;
	height: 2.4em;
	line-height: 2.4em;
	letter-spacing: 0.15rem;
	background-color: rgba(255,255,255,0.4);
}

span.catChecks{
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
}

span.catChecks label{
	line-height: 1.5em;
	display: inline-block;
	vertical-align: top;
}

span.catChecks input[type=checkbox]{
	height: 1.4em;
	width: 1.4em;
	margin-right: 0.4em;
	background-color: var(--color-light);
	appearance: auto;
}

input[name="upload_file"]{
	background-color: transparent !important;
	padding: 0 !important;
}

select.hashtagEasyInput{
	padding: 0 0.8em;
	background-color: #fff;
	line-height: 2.2em;
	vertical-align: top;
}

/* ↓フッター */
footer{
	margin-top: var(--margin-base);
	text-align: center;
	line-height: 1;
	color: var(--color-main);
}


/* ↓float解除 */
.clear::after {
	content: "";
	display: table;
	clear: both;
}

/* ↓非表示 */
.dateseparator,
.utilitylinks,
.datelimitboxoptions,
.searchtarget,
.limitedsearch{
	display: none;
}

	/* ---------------------- */
	/* ▼カード型リンクの装飾 */
	/* ---------------------- */
	.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: #8c8;        /* 枠線色 */
		}
			/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
			.cardlinkimage {
				background-image: linear-gradient(-30deg, #8a8, #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;           /* 文字サイズ(小さめ) */
				}