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

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

*,*::before,*::after{box-sizing:border-box}*{margin:0}body{font-feature-settings:"palt" 1;overflow-wrap: anywhere;word-break: normal;line-break: strict;text-size-adjust:100%;-webkit-text-size-adjust:100%}picture,video,canvas{display:block;max-width:100%}input,button,textarea,select{font:inherit}img{max-width:100%;height:auto;vertical-align:bottom}ul{list-style-type:""}: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}summary,button{cursor:pointer}em{font-style:normal}

:root {
	--main-bg-color: #eeeeec;
	--main-text-color:#444;
	--sub-bg-color: #fff;
	--accent: #8AAC58;
	--red: #ce351d;

	--main-font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
	--radius: 1rem;
	--shadow: 0px 3px 6px #0003;
	--padding: clamp(20px, 3vw, 40px);

	--content-middle: 900px;
	--content-nallow: 600px;
	--thumbnail: 1.91 / 1;
	--articles-grid: 250px;

	--text-color-10: color-mix(in srgb, var(--main-text-color) 10%, 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-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-15: color-mix(in srgb, var(--accent) 15%, transparent);
	--accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
	--accent-50: color-mix(in srgb, var(--accent) 50%, transparent);
	--mix-color: color-mix(in srgb, var(--accent) 50%, var(--main-text-color));
	--radius-mini: calc(var(--radius) * 0.3);
}

html{
	font-size: 100%;
	scroll-behavior: smooth;
}
body{
	accent-color: var(--accent);
	background-color: var(--main-bg-color);
	color: var(--main-text-color);
	display: flex;
	flex-direction: column;
	font-family:var(--main-font-family);
	font-weight: 400;
	gap: 3rem;
	letter-spacing: 0.05em;
	line-height: 1.8;
	min-height: 100dvh;
}


/* MARK: header / main
--------------------------------------------*/
header.page_header{
	border-bottom: 1px solid var(--text-color-20);
	margin: 0 5vw;
	padding: 14px 0;
	text-align: center;
}
h1{
	line-height: 1.2;
}
h1 a{
    text-decoration: none;
}
main{
	flex: 1;
	font-size: 0.9rem;
	padding: 0 5vw;
}
hgroup{
	margin-bottom: 3rem;
	text-align: center;
}
h2{
	font-size: 1.2rem;
	line-height: 1.2;
	text-align: center;
}
h2 a{
	text-decoration: none;
}
h2 a:empty{
	visibility: hidden;
}
.situation{
	display: inline;
}
.situation-catname{
	display: none;
}
.situation-tagname::before{
	content: "#";
}
.situation-search::before{
	content: "\f002";
	font-family: "Line Awesome Free";
	font-size: 1em;
	font-weight: 900;
}
hgroup .hashtagpullbox{
	margin: 1rem auto 0;
	max-width: 250px;
}
hgroup .hashtaglist{
	margin-top: 1rem;
}


/* MARK: link
--------------------------------------------*/
a{
	font-weight: 600;
	transition-property: color, background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
}
a:hover{
	color: var(--accent);
	text-decoration: none;
}
.Login-Required{
	color: var(--text-color-50);
}
a[target="_blank"]:not(:has(img))::after{
	content: "\f35d";
	font-family: "Line Awesome Free";
	font-weight: 900;
}
.cardlink::after,
.backto-navi{
	display: none;
}
a img{
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}
a:hover img{
	opacity: 0.7;
}
a.catlink,
a.taglink,
a.categorylink{
	display: inline-block;
}
.categorylink::before{
	content: "\f07b";
	font-family: "Line Awesome Free";
	font-weight: 900;
}
.hashtaglist li{
	display: inline-block;
	font-size: 0.8rem;
	padding-right: 0.5em;
}
.hashtaglist li a::before{
	content: '#';
	color: color-mix(in srgb, currentColor 50%, transparent);
}
.hashtaglist li a{
	text-decoration: none;
}
a.taglink[title*="成人向"],
a.taglink[title*="R18"]{
	color: var(--red);
}
a.imagearea::before,
a.imagelink::before,
a[data-flag*="nsfw"]::before{
	color: var(--text-color-70);
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 2rem;
	left: calc(50% - 1rem);
	line-height: 1;
	position: absolute;
	top: calc(50% - 1rem);
	z-index: 5;
}
a:has(> img.nsfw)::before,
a[data-flag*="nsfw"]::before{
	content: "\f071";
}


/* MARK: common parts
--------------------------------------------*/
hr{
	border: none;
	border-top: 1px dashed var(--text-color-30);
	margin-block: 1.8em;
}
ul{
	padding: 0;
}
.hidden{
	display: none;
}
.num{
	display: none;
}
.right_block{
	text-align: right;
}
.lar,
.las{
	font-size: 1.2em;
}
.shareBtns{
	cursor: pointer;
}
.searchword{
	background-color: var(--accent-50);
	filter: saturate(200%);
	font-weight: bold;
}


/* MARK: grandhome
--------------------------------------------*/
body.grandhome{
	gap: 2rem;
}
body.grandhome header.page_header{
	border: none;
	padding: 0;
}
body.grandhome main{
	display: grid;
	gap: 2rem;
	place-content: center;
}
body.grandhome hgroup{
	margin-bottom: 0;
}
body.grandhome hgroup,
body.grandhome main > nav,
body.grandhome main > div{
	max-width: var(--content-nallow);
}
body.grandhome .main_visual{
	aspect-ratio: 1.91 / 1;
	box-shadow: var(--shadow);
	position: relative;
}
body.grandhome .main_visual img{
	aspect-ratio: 1.91 / 1;
	left: 0;
	margin: 0 auto;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity 2s ease;
	width: 100%;
}
body.grandhome .main_visual img.active{
	opacity: 1;
}
body.grandhome .freespace{
	padding-top: 1rem;
}
body.grandhome ul.flex{
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 2vw, 16px);
	justify-content: center;
}
body.grandhome ul.flex li.sub,
body.grandhome ul.flex li.minor{
	display: none;
}
body.grandhome ul.flex a{
	transition: all 0.1s ease-in-out;
}
body.grandhome ul.flex a:has(> img),
body.grandhome ul.flex a:has(> i.las){
	display: block;
	font-size: 0.7rem;
	text-align: center;
	text-decoration: none;
}
body.grandhome ul.flex img{
	background-color: var(--text-color-20);
	border-radius:  calc(infinity * 1px);
	display: block;
	height: 3rem;
	margin: 0 auto;
	object-fit: cover;
	width: 3rem;
}
body.grandhome ul.flex i.las{
	background-color: var(--text-color-20);
	border-radius:  calc(infinity * 1px);
	display: block;
	font-size: 2rem;
	height: 3rem;
	line-height: 3rem;
	margin-inline: auto;
	width: 3rem;
}
body.grandhome ul.flex a:hover{
	transform: translateY(-5px);
}
body.grandhome ul.flex a:hover i.las{
	background-color: var(--accent);
	color: var(--main-text-color);
}
body.grandhome .article-list{
	display: none;
}
body.grandhome h2{
	font-size: 0.7rem;
	font-weight: normal;
	margin-bottom: 0.5em;
	text-align: left;
}
.latestpostlist{
	border: 1px solid var(--text-color-20);
	color: var(--text-color-70);
	font-size: 0.8rem;
	height: 10em;
	padding: 3% 5%;
	overflow-y: scroll;
}
.latestpostlist li{
	padding: 0.2em 0;
}
.latestpostlist .postdate::after{
	content: '…';
}
.latestpostlist .catname::after{
	content: ':';
}
@media (max-width: 600px) {
	.main_visual{
		margin-inline: -5vw;
	}
}


/* MARK: article-excerpt
--------------------------------------------*/
div.article-list:has(article.excerpt){
	display: grid;
	gap: 3rem 2rem;
	grid-template-columns: repeat(auto-fill, minmax(var(--articles-grid), 1fr));
	margin: 0 0 3rem;
}
article.excerpt a.imagearea:empty{
	background: url(imgforskin/noimage.png) no-repeat 50% 50% / cover;
}
article.excerpt a.imagearea{
	aspect-ratio: var(--thumbnail);
	background-color: var(--sub-bg-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}
article.excerpt a.imagearea img.embeddedimage{
	aspect-ratio: var(--thumbnail);
	border-radius: var(--radius);
	margin: 0;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}
article.excerpt h3{
	line-height: 1.5;
	margin-top: 1em;
}
article.excerpt.logstatus-fixed h3::before{
	content: "\f08d";
	font-family: 'Line Awesome Free';
	font-weight: 900;
}
article.excerpt.logstatus-lock a.imagearea::before{
	content: "\f023";
}
article.excerpt .text > a{
	color: currentColor;
	font-weight: normal;
	text-decoration: none;
}
article.excerpt footer{
	color: var(--text-color-50);
	font-size: 0.8rem;
	line-height: 1.5;
	margin-top: 1em;
}
article.excerpt footer .date-edit{
	display: flex;
	gap: 0.5em;
}
article.excerpt footer .date-edit time{
	flex: 1;
}
article.excerpt footer a{
	text-decoration: none;
}
article.excerpt .categorylink{
	margin-right: 0.5em;
}
article.excerpt .comment br + br,
article.excerpt.logstatus-lock img.embeddedimage,
body.selected-cat article.excerpt .categorylink{
	display: none;
}


/* MARK: article.full / onelog
--------------------------------------------*/
article.full{
	background-color: var(--sub-bg-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin: 0 auto 2rem;
	max-width: var(--content-nallow);
	position: relative;
}
article.full::before{
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 1.3em;
	position: absolute;
	right: 10px;
	top: -16px;
}
article.full.logstatus-lock::before{
	content: "\f023";
}
article.full.logstatus-fixed::before{
	content: "\f08d";
}
header.oneloginfo{
	color: var(--text-color-50);
	font-size: 0.8rem;
	padding: 10px 1rem 0;
}
header.oneloginfo h3{
	display: none;
}
article.full .comment{
	padding: var(--padding);
}
article.full footer.oneloginfo{
	color: var(--text-color-50);
	display: flex;
	font-size: 0.8rem;
	justify-content: flex-end;
	gap: 0.5em;
	padding: 0px 12px 10px;
}
article.full footer.oneloginfo a{
	text-decoration: none;
	font-weight: normal;
}
.utilitylinks{
	margin: 2rem auto 0;
	max-width: var(--content-nallow);
}
body.onelog .backto-navi{
	display: revert;
}


/* MARK: about
--------------------------------------------*/
body.onelog main:has(article.about) a.hidden.backto-about{
	display: initial;
}
article.about header,
article.about .postdate,
article.about .reaction,
article.about .shareBtns{
	display: none;
}
article.about.full .comment{
	padding-bottom: calc(var(--padding) * 0.6);
}


/* MARK: memo
--------------------------------------------*/
main:has(article.memo) a.hidden.backto-memo{
	display: initial;
}
article.memo header.oneloginfo{
	padding: 2rem 1rem 0;
	text-align: center;
}
article.memo header.oneloginfo h3{
	color: var(--main-text-color);
	display: block;
}
body.cat-memo header.oneloginfo .cat-tags,
body.cat-memo footer a.postdate{
	display: none;
}
article.memo header a.postdate{
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 1.5rem;
	font-style: normal;
	line-height: 1.3;
	text-decoration: none;
}


/* MARK: gallery
--------------------------------------------*/
main:has(article.gallery) a.hidden.backto-gallery{
	display: initial;
}
body.onelog article.gallery header.oneloginfo{
	display: none;
}
article.gallery a.imagelink{
	display: block;
	line-height: 1;
	margin: 1rem calc(var(--padding) * -1);
	width: unset;
}
article.gallery a.imagelink + br{
	display: none;
}
article.gallery a.imagelink + a.imagelink{
	margin: -2rem calc(var(--padding) * -1) 2rem;
}
article.gallery.full img.embeddedimage{
	display: block;
	margin: 0;
	width: 100%;
}
article.gallery .decorationS a.imagelink{
	display: inline;
	margin: 0;
}
article.gallery .decorationS img.embeddedimage{
	display: inline;
	margin: 3px 0;
	width: unset;
}


/* MARK: novels
--------------------------------------------*/
main:has(article.novels) a.hidden.backto-novels{
	display: initial;
}
body.cat-novels div.article-list{
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
body.cat-novels article.novels.excerpt{
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 1rem;
}
body.cat-novels article.excerpt a.imagearea,
body.cat-novels article.excerpt img.embeddedimage{
	aspect-ratio: 1 / 1.42;
	border-radius: var(--radius-mini);
}
article.novels.excerpt a.imagearea:empty,
article.novels.excerpt.logstatus-lock a.imagearea{
	background: color-mix(in srgb, var(--accent) 70%, var(--sub-bg-color));
}
article.novels.excerpt a.imagearea:empty::before{
	color: var(--mix-color);
	content: "\f036";
}
article.novels.excerpt.logstatus-lock a.imagearea::before{
	color: var(--mix-color);
	content: "\f023";
}
body.cat-novels article.excerpt h3{
	margin-top: 0;
}
body.cat-novels article.excerpt footer{
	border-bottom: 1px solid var(--text-color-20);
	padding-bottom: 0.3em;
}
@media (max-width: 600px) {
	body.cat-novels div.article-list:has(article.excerpt){
		grid-template-columns: 1fr;
	}
}
body.onelog article.novels header.oneloginfo{
	display: none;
}


/* MARK: books
--------------------------------------------*/
main:has(article.books) a.hidden.backto-books{
	display: initial;
}
body.cat-books div.article-list{
	gap: 1rem 2rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
body.cat-books article.excerpt{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
}
body.cat-books article.excerpt div.cover{
	display: flex;
	align-items: flex-end;
}
body.cat-books article.excerpt a.imagearea{
	aspect-ratio: unset;
	border-radius: unset;
}
body.cat-books article.excerpt.logstatus-lock a.imagearea,
body.cat-books article.excerpt a.imagearea:empty{
	aspect-ratio: 1 / 1.42;
	width: 100%;
}
body.cat-books article.excerpt a.imagearea img.embeddedimage{
	aspect-ratio: unset;
	border-radius: 0;
}
body.cat-books article.excerpt div.text{
	padding-bottom: 1rem;
}
body.cat-books article.excerpt h3{
	margin-top: 0;
}
body.cat-books article.excerpt h3 a,
body.cat-books article.excerpt .comment a{
	color: currentColor;
	font-weight: unset;
	text-decoration: none;
}
body.cat-books article.excerpt footer{
	display: flex;
	gap: 0.5em;
}
body.cat-books article.excerpt footer .cat-tags{
	flex: 1;
}
body.onelog article.books header,
body.cat-books article.excerpt time,
article.books.full:has(form.passkeyform) a.imagelink{
	display: none;
}
@media (max-width: 600px) {
	body.cat-books div.article-list:has(article.excerpt){
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	body.cat-books div.article-list article.excerpt{
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: unset;
    	grid-row: unset;
	}
	body.cat-books div.article-list div.cover{
		all: unset;
	}
	body.cat-books article.excerpt div.text{
		padding-bottom: 0;
	}
}


/* MARK: picts
--------------------------------------------*/
section.mode-picts{
	margin: 0 auto 2rem;
	max-width: var(--content-nallow);
}
section.mode-picts .freespace{
	margin-bottom: 1rem;
}
.thumbnails{
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	margin: 0 auto 2rem;
	max-width: var(--content-nallow);
}
.thumbnails:has(> :nth-child(11)){
	max-width: unset;
}
.thumbnails a{
	background-color: var(--sub-bg-color);
	border-radius: var(--radius-mini);
	box-shadow: var(--shadow);
	display: flex;
	overflow: hidden;
	position: relative;
}
.thumbnails img{
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}


/* MARK: somelogs 連結表示
--------------------------------------------*/
.situation-postno,
.situation-search-cover{
	color: var(--text-color-70);
	font-size: 0.85rem;
	font-weight: normal;
}
.situation-postno::before{
	content: "\f0c6";
	font-family: "Line Awesome Free";
	font-weight: 900;
}
.situation-search-cover{
	display: inline-block;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	white-space: nowrap;
}
.situation-tagname-cover{
	display: inline-block;
}


/* MARK: 特殊な状況
--------------------------------------------*/
.nodata,
.nolist{
	background-color: var(--sub-bg-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin: 0 auto;
	max-width: var(--content-nallow);
	padding: var(--padding);
	text-align: center;
}
.recountlink{
	padding-top: 1em;
	text-align: center;
}
.situation-username::before{
	content: "\f007";
	font-family: "Line Awesome Free";
	font-weight: 900;
}
.situation-date::before{
	content: "\f133";
	font-family: "Line Awesome Free";
	font-weight: 900;
}


/* MARK: comment parts
--------------------------------------------*/
a.uc-btn,
a.readmorebutton{
	background-color: var(--main-text-color);
	border-radius: var(--radius-mini);
	color: var(--sub-bg-color);
	display: inline-block;
	font-size: 0.9rem;
	margin: 3px 0;
	padding: 0.1em 0.6em 0.2em;
	text-decoration: none;
}
a.uc-btn:hover,
a.readmorebutton:hover{
	background-color: var(--accent);
}
a.readmoreclose{
	background-color: transparent;
	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);
}
.decorationE{
	font-weight: bold;
	text-decoration: underline var(--accent-50) 0.5em;
	text-decoration-skip-ink: none;
	text-underline-offset: -0.2em;
}
code{
	background-color: var(--text-color-20);
	border-radius: var(--radius-mini);
	font-size: 0.9em;
	padding: 0.2em 0.5em;
}
.decoration1{
	border-left: 0.5em solid var(--accent);
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 0.5em;
	padding-left: 0.5em;
}
br + .decoration1{
	margin-top: 2rem;
}
.decorationS{
	font-size: 0.8rem;
}
.decorationT{
	color: var(--text-color-70);
	font-size: 0.7rem;
}
.decorationU{
	text-decoration: underline dotted var(--text-color-70) 1px;
    text-decoration-skip-ink: none;
    text-underline-offset: 0.2em;
}
.decorationL + br,
.decorationQ + br,
.decoration1 + br,
figure + br{
	display: none;
}
details{
	margin-block: 0.5em;
}
details ::marker{
	color: var(--text-color-70);
}
summary{
	background-color: var(--text-color-20);
	border-radius: var(--radius-mini);
	font-size: 0.9rem;
	font-weight: bold;
	padding: 0.1em 0.6em 0.2em;
}
.foldedarea{
	border-bottom: 5px solid var(--text-color-20);
	border-radius: var(--radius-mini);
	padding: 1em 0;
}
details details{
	margin: 1em;
}
iframe.embeddedmovie{
	max-width: 100%;
}
q.decorationQ{
	background-color: var(--text-color-10);
	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-70);
	position: absolute;
	left: 6px;
	top: 0;
}
q.decorationQ:after{
	content: "\f10e";
	font-family: 'Line Awesome Free';
	font-weight: 900;
	color: var(--text-color-70);
	position: absolute;
	right: 6px;
	bottom: 0;
}
ul.decorationL,
ol.decorationL,
.freespace ul,
.utilitylinks ul{
	list-style-type: revert;
	padding-left: 1.5em;
}
::marker{
	color: var(--accent);
	font-weight: bold;
}
ul.decorationL.listdeco-border{
	border-left: 2px dotted var(--accent);
	list-style-type: none;
	margin: 0.4em;
	padding-left: 0.8em;
}


/* MARK: img
--------------------------------------------*/
img.emoji{
	height: 1em;
	margin: 0 3px 3px;
	vertical-align: middle;
	width: 1em;
}
img.embeddedimage{
	margin: 5px 0;
}
div#lightbox .lb-image{
	border: none;
	border-radius: 0;
}
div#lightbox .lb-data{
	padding: 0;
}
div#lightbox .lb-outerContainer{
	background-color: transparent;
}
img.nsfw,
.thumbnails a[data-flag*="nsfw"] img{
	filter: blur(10px);
	opacity: 0.7;
}
a:has(> img.nsfw),
a[data-flag*="nsfw"]{
	position: relative;
}
a.imagelink.nsfw{
	display: inline-block;
	overflow: hidden;
	width: 50%;
}
figcaption{
	color: var(--text-color-70);
	font-size: 0.8rem;
	line-height: 1.2;
	margin: 0 0 1em;
}
figcaption a{
	color: var(--text-color-70);
	font-weight: normal;
}
small img.embeddedimage{
	width: 50%;
}
ul.listdeco-img{
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	list-style-type: none;
	margin-block: 0.5em;
	padding-left: 0;
}
ul.listdeco-img a,
ul.listdeco-img a.imagelink.nsfw{
	display: block;
	overflow: hidden;
}
ul.listdeco-img img{
	aspect-ratio: 1/1;
	margin: 0 0;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}
ul.listdeco-img a.nsfw,figure{
	margin: 0 0;
	width: 100%;
}
ul.listdeco-img figcaption{
	margin: 0.2em 0 0.6em;
}


/* MARK: pagenavi
--------------------------------------------*/
.article_ft{
	display: none;
}
body.selected-tag .article_ft,
body.selected-cat .article_ft{
	display: flex;
	gap: 0.5em;
	justify-content: center;
	margin-top: 2rem;
}
.article_ft a{
	background-color: var(--text-color-20);
	display: inline-block;
	padding-block: 0.3em;
	text-decoration: none;
}
.article_ft a:hover{
	background-color: var(--accent-30);
}
a.nextlink{
	clip-path: polygon(0 50%,15% 0,100% 0,100% 100%,15% 100%);
	padding-inline: 1.5em 1em;
}
a.prevlink{
	clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
	padding-inline: 1em 1.5em;
}
nav.pagenavi{
	text-align: center;
}
.pagenums{
	margin-bottom: 1rem;
	text-align: center;
}
a.pagenumlink{
	border: 1px solid var(--text-color-30);
	border-radius: var(--radius-mini);
	display: inline-block;
	margin-bottom: 10px;
	min-width: 2em;
	padding: 2px 5px;
	text-align: center;
	text-decoration: none;
}
a.pagenumlink:hover{
	background-color: var(--accent-50);
	color: var(--mix-color);
}
a.pagenumhere{
	background-color: var(--text-color-70);
	color: var(--sub-bg-color);
}


/* MARK: aside.filters
--------------------------------------------*/
aside.filters{
	background-color: var(--text-color-10);
	font-size: 0.85rem;
	padding: 3rem 5vw;
}
aside.filters div.inner{
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;
	margin-inline: auto;
	max-width: var(--content-nallow);
}
aside.filters h2{
	font-size: 0.7rem;
	font-weight: normal;
	margin-bottom: 0.5em;
	text-align: left;
}
aside.filters h2:not(:first-child){
	margin-top: 2em;
}
aside.filters a{
	text-decoration: none;
}
search{
	background-color: var(--text-color-20);
	border-radius: var(--radius);
	padding: 10px;
}
search li{
	padding-top: 0.5em;
}
search span.solabel{
	display: block;
	line-height: 1.8;
}
search select{
	border-radius: var(--radius-mini);
	width: 100%;
}
search li.somode{
	line-height: 1.5;
}
search input[type="checkbox"]{
	margin: 0 0.2em 0.2em 0;
	vertical-align: middle;
}
table.calendar{
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	font-size: 0.75rem;
	margin: 2em 0 0.5em;
}
table.calendar caption{
	text-align: left;
}
table.calendar thead{
	background-color: var(--text-color-10);
}
table.calendar tr {
	border-bottom: 1px solid var(--text-color-30);
}
table.calendar tr:last-child {
	border-bottom: none;
}
table.calendar .sun,.sat {
	background-color: var(--sub-bg-color);
}
table.calendar .today {
	background-color: var(--accent-30);
}
table.calendar span.nolink{
	color: var(--text-color-50);
}
.calbtm {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 0.8rem;
}
@media (max-width: 600px) {
	aside.filters div.inner{
		gap: 2rem;
		grid-template-columns: 1fr;
	}
}


/* MARK: footer
--------------------------------------------*/
footer.page_footer{
	color: var(--text-color-50);
	font-size: 0.7rem;
	padding: 1em;
	text-align: center;
}
.backto-home{
	font-size: 0.9rem;
	margin-bottom: 1rem;
}


/* MARK: 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: var(--sub-bg-color);
	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;
	line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.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;
}
.cardsize-S .cardlinkimage {
	border-radius: var(--radius-mini) 0 0 var(--radius-mini);
	height: 120px;
	width: unset;
}
.cardsize-S .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;
}
.cardsize-L .cardlinkimage{
	border-radius: var(--radius-mini) var(--radius-mini) 0 0;
}
.cardsize-L .cardlinktextbox {
	border-top: 1px solid var(--text-color-30);
}


/* MARK: 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;
}
body.nologin option[value="-"],
option[value="about"]{
	display: none;
}


/* 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;
}


/* MARK: postarea
--------------------------------------------*/
form.postform{
	padding: 4% 4% 0;
}
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%;
}
form.postform 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;
}
form.postform .submitcover{
	display: block;
	margin-bottom: 1rem;
	text-align: right;
}
form.postform input.postbutton{
	background-color: var(--accent);
	border-radius: 0 0 var(--radius-mini) var(--radius-mini);
	width: 50%;
}
form.postform input.postbutton:hover{
	background-color: var(--main-text-color);
}
.line-control{
	font-size: 0.9rem;
	padding-bottom: 1rem;
}
form.postform input[type="button"]{
	margin: 0 5px 5px 0;
	vertical-align: middle;
}
form.postform select{
	margin-bottom: 5px;
	width: unset;
}
form.postform select + input[type="button"]{
	border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
}
form.postform label{
	display: inline-block;
	margin: 0 5px 5px 0;
	padding-inline: 0.5em;
}
form.postform label[title*="カテゴリID"]{
	background-color: var(--accent-50);
}
form.postform label input[type="checkbox"]{
	margin-right: 3px;
}
form.postform 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;
}
form.postform ::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;
}
form.postform ::file-selector-button:hover{
	background-color: var(--main-text-color);
}
img.recentoneimage{
	aspect-ratio: 1 / 1;
	object-fit: cover;
	vertical-align: middle;
	width: 3rem;
}
.catChecks{
	display: block;
}
.funcUIs .catChecks{
	display: inline;
}
div.QP_footer{
	padding: 0 1.6rem 1rem;
	text-align: right;
}


/* MARK: quickpost modal
--------------------------------------------*/
.button-open {
	background-color: transparent;
	border: none;
	color: var(--main-text-color);
	display: grid;
	line-height: 1;
	padding: 10px;
	place-content: center;
	place-items: center;
	position: fixed;
	right: 0;
	top: 63px;
	transition: all 0.6s;
	z-index : 490;
}
.button-open i.las{
	font-size: 2rem;
}
#modalWindow {
	background-color: color-mix(in srgb, var(--accent) 30%, var(--sub-bg-color));
	border-radius: var(--radius);
	visibility: hidden;
	left: 50%;
	max-width: var(--content-middle);
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	z-index: 1000;
}
.button-close {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	padding: 1em;
	background-color: #c96931;
	color: #eaeaea;
	border-radius: 20rem;
	cursor: pointer;
}
.overlay {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	z-index: 900;
}
.no_scroll {
	overflow: hidden;
}


/* MARK: global nav
-------------------------------------------- */
nav#global_nav{
	background: var(--accent);
	color: var(--sub-bg-color);
	height: 100dvh;
	opacity: 0;
	position: fixed;
	right: 0;
	text-align: left;
	top: 0;
	transform: translateX(13em);
	transition: all 0.6s;
	visibility: hidden;
	width: 13em;
	z-index : 300;
}
nav#global_nav ul{
	height: 100%;
	overflow-y: auto;
	padding-top: 50px;
}
nav#global_nav li{
	padding: 0 0 0;
	line-height: 1;
	display: block;
}
nav#global_nav li.sub{
	font-size: 0.9em;
	padding: 0 0 0 20px;
}
nav#global_nav i{
	margin-right: 5px;
	font-size: 1.55rem;
	vertical-align: text-top;
}
nav#global_nav a{
	display: block;
	padding: 15px 20px;
	text-decoration: none;
}
nav#global_nav a:hover{
	color: currentColor;
	text-decoration: underline;
}
nav#global_nav img{
	height: 1.5em;
	margin-right: 6px;
	vertical-align: middle;
	width: 1.5em;
}
button#global_nav_btn{
	background-color: transparent;
	border: none;
	color: var(--main-text-color);
	display: grid;
	line-height: 1;
	padding: 10px;
	place-content: center;
	place-items: center;
	position: fixed;
	right: 0;
	top: 0;
	transition: all 0.6s;
	z-index : 500;
}
button#global_nav_btn::before{
	content: "\f0c9";
	font-family: "Line Awesome Free";
	font-size: 2rem;
	font-weight: 900;
}
button#global_nav_btn:hover{
	background-color: var(--accent-50);
}
button#global_nav_btn span{
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}
button#global_nav_btn span::before{
	content: "Menu";
}
/* active */
nav#global_nav.active{
	transform: translateX(0px);
	opacity: 1;
	visibility: initial;
}
button#global_nav_btn.active::before{
	content: "\f00d";
}
button#global_nav_btn.active span::before{
	content: "Close";
}