@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: var(--border-radius);
	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;
}