@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c");
.heading__h, .text__text {
  font-family: 'M PLUS Rounded 1c';
}
@view-transition {navigation: auto;}

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

/* reset css */
*,*::before,*::after{box-sizing:border-box}*{margin:0}html{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}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}nav ul{list-style-type:none;padding: 0}: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{
	/* 色設定 */
	--body-bg: #f3f3f3;
	--sub-bg-color: #6facbe;
	--main-text-color: #333;
	--accent: #70a5ba;
	--red: #e5171f;
	
	/* レイアウトボックスの角丸 */
	--radius: 10px;
	/* レイアウトボックスのドロップシャドウ */
	--shadow: 0px 2px 6px #0005;


	/* 投稿単独表示時の横幅設定 */
	--article-width: 900px;

	/* 自動バリエーション設定（変更不要です） */
	--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-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);
	--sub-text-color-30: color-mix(in srgb, var(--accent2) 30%, transparent);
	--sub-text-color-60: color-mix(in srgb, var(--accent2) 60%, transparent);
	--radius-mini: calc( var(--radius) * 0.3 );
}
html{
	font-size: 100%;
	scroll-behavior: smooth;
}
body{
	accent-color: var(--accent);
	background: var(--body-bg);
	color: var(--main-text-color);
	font-family: var(--main-font-family);
	font-weight: 400;
	gap: 3rem;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin: 0 5vw;
}


/* MARK: common parts
--------------------------------------------*/
a{
	font-weight: bold;
	transition-property: color, background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
}
a:hover{
	color: var(--accent);
	text-decoration: none;
}
a.catlink,
a.categorylink{
	background-color: var(--accent-60);
	border-radius: var(--radius-mini);
	padding: 0.1em 0.4em 0.2em;
	text-decoration: none;
}
a.catlink:hover,
a.categorylink:hover,
nav.pagination a:hover{
	background-color: var(--text-color-20);
}
a.cat-adults{
	background-color: color-mix(in srgb, var(--red) 30%, transparent);
	color: color-mix(in srgb, var(--red) 50%, var(--main-text-color));
}
a.cat-adults:hover{
	background-color: color-mix(in srgb, var(--red) 50%, transparent);
}
a.cat-large,
li.cat-large,
.catlink + .num,
.datelistlink + .num,
.taglink + .num{
	display: none;
}
details{
	margin-block: 0.5em;
}
details ::marker{
	color: var(--text-color-70);
}
details summary{
	background-color: var(--text-color-15);
	border-radius: var(--radius-mini);
	font-size: 0.9rem;
	font-weight: bold;
	padding: 0.1em 0.6em 0.2em;
}
details[open] summary{
	margin-bottom: 0.5em;
}
dl{
	display: grid;
	font-size: 0.85rem;
	grid-template-columns: auto 1fr;
}
dt{
	color: var(--text-color-70);
	padding-right: 1em;
}
i.las,
i.lar{
	font-size: 1.2em;
}
img{
	object-position: top center;
	vertical-align: middle;
}
img.emoji,
.comment img.emoji{
	width: 1em;
	vertical-align: middle;
	margin: 0 3px 3px;
}
input[type="button"],
input[type="submit"]{
	transition: background-color 0.3s ease-in-out;
}
::marker{
	color: var(--text-color-50);
}
.mobile-visible{
	display: none;
}
.shareBtns{
	cursor: pointer;
}
textarea{
	font-size: 16px;	/* iOS zoom対策 */
}
.cattree{
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 5px;
}


/* MARK: header
--------------------------------------------*/
header.pageheader{
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 auto;
	max-width: var(--article-width);
	padding-block: 3rem;
	position: relative;
}
hr{
	border: none;
	border-top: 1px dashed var(--text-color-30);
	margin-block: 1.8em;
}
h1 a,
h2 a{
	text-decoration: none;
}
h1.sitename{
	line-height: 1.2;
	margin-bottom: 1rem;
}
h2.pagetitle{
	font-size: 1.2rem;
	font-weight: normal;
	letter-spacing: 0.15em;
	line-height: 1.3;
}
p.description{
	font-size: 0.8rem;
}
header.pageheader .freespace{
	margin-block: 2rem 1rem;
	padding: 2% 5%;
	position: relative;
}
header.pageheader .freespace::before,
header.pageheader .freespace::after{
	border: 1px solid var(--text-color-50);
	content: '';
	display: inline-block;
	height: 100%;
	position: absolute;
	top: 0;
	width: 10px;
}
header.pageheader .freespace::before{
	border-right: 0;
	left: 0;
}
header.pageheader .freespace::after{
	border-left: 0;
	right: 0;
}
header.pageheader .freespace h3{
	font-size: 0.9rem;
}
header.pageheader .freespace-edit{
	color: var(--text-color-70);
	position: absolute;
	right: 5px;
	top: 0;
}
header.pageheader .cattree{
	justify-content: center;
	margin-top: 1rem;
}
header.pageheader .controls{
	display: grid;
	font-size: 1.5rem;
	gap: 0.7rem;
	line-height: 1;
	padding: 10px;
	position: fixed;
	right: 0;
	bottom: 0;
}
header.pageheader .controls button{
	background-color: transparent;
	border: 0;
	color: var(----text-color-30);
	padding: 0;
}
header.oshinagaki-header,
footer.oshinagaki-footer{
	display: none;
}


/* MARK: situation
--------------------------------------------*/
.situation{
	color: var(--text-color-70);
	font-size: 0.9rem;
	margin-bottom: 3rem;
	text-align: center;
}
.situation:empty{
	display: none;
}
.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 .situation::before{
	content: "\f02c";
}
body.selected-cat .situation::before{
	content: "\f07b";
	display: inline-block;
	transform: rotate(-90deg);
}
body.search-result .situation::before{
	content: "\f002";
}
body.selected-date .situation::before{
	content: "\f133";
}
body.somelogs .situation::before{
	content: "\f0c6";
}


/* MARK: サムネイル一覧
--------------------------------------------*/
.articlelist{
	display: grid;
	gap: 5rem 3rem;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	margin: 0 auto 5rem;
	max-width: var(--article-width);
}
article.excerpt{
	display: grid;
	font-size: 0.9rem;
	gap: 1rem;
	grid-row: span 3;
	grid-template-rows: subgrid;
	position: relative;
}
article.excerpt.logstatus-fixed::before{
	content: "\f08d";
	font-family: "Line Awesome Free";
	font-size: 1.5rem;
	font-weight: 900;
	left: calc(50% - 0.5em);
	line-height: 1;
	position: absolute;
	top: -0.7em;
}
article.excerpt .cover{
	align-items: flex-end;
	display: flex;
	margin-bottom: 4px;
}
article.excerpt .decoration1{
	margin-bottom: 0.3em;
}
article.excerpt .decoration2{
	display: block;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 12px;
}
article.excerpt .decoration3,
article.excerpt .decoration4{
	display: block;
}
article.excerpt .post-tags a{
	color: var(--text-color-70);
	font-size: 0.75rem;
	padding-right: 0.5em;
}
article.excerpt .passkeyform{
	display: none;
}
article.excerpt .buttons-area .Login-Required{
	color: var(--text-color-70);
	text-align: right;
}
/* 鍵付き投稿 */
body:not(.oshinagaki) article.excerpt.logstatus-lock h3::before{
	content: "\f023";
	font-family: 'Line Awesome Free';
}


/* MARK: 投稿全文表示用
--------------------------------------------*/
body.onelog main{
	max-width: 1200px;
	margin: 0 auto;
}
body.onelog header.pageheader .freespace,
body.onelog header.pageheader .category{
	display: none;
}
.articlelist:has(> article.full){
	display: block;
}
article.full{
	background-color: var(--sub-bg-color);
	clear: both;
	display: grid;
	gap: 4vw;
	grid-template-columns: 5fr 8fr;
	margin: 0 auto 5rem;
}
article.full .cover a:has(img:not([src*="."])){
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-touch-callout: none;
	-moz-user-select: none;
	user-select: none;
}
article.full .post-categories{
	margin-bottom: 1rem;
}
article.full .decoration1{

	font-size: 1.3rem;
	margin-bottom: 1em;
}
article.full .decoration6{
	margin-top: 1rem;
}
article.full .decoration7{
	border-left: 10px solid var(--accent-60);
	font-size: 1.15rem;
	margin-block: 0.5em;
	padding-left: 10px;
}
article.full .decoration7 + br{
	display: none;
}
article.full footer{
	border-top: 1px solid var(--text-color-50);
	color: var(--text-color-50);
	display: flex;
	font-size: 0.8rem;
	gap: 1rem;
	justify-content: flex-end;
	margin-top: 1rem;
	padding-top: 0.3em;
}
article.full footer a{
	text-decoration: none;
}
article.full footer span.reaction{
	flex-grow: 1;
}
article.full footer span.reaction img{
	width: 20px;
}
.utilitylinks{
	font-size: 0.85rem;
	margin: -3rem 0 3rem;
}


/* MARK: お品書きモード
--------------------------------------------*/
html:has(> body.oshinagaki){
	font-size: 110%;
}
body.oshinagaki{
	margin: 5vw;
}
body.oshinagaki header.oshinagaki-header{
	border-bottom: 2px solid var(--main-text-color);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin: 0 auto 3rem;
	max-width: var(--article-width);
	padding-bottom: 1em;
}
header.oshinagaki-header .event-info{
	align-items: flex-start;
	display: flex;
	flex-basis: 75%;
	flex-direction: column;
	justify-content: center;
}
header.oshinagaki-header h3{
	cursor: pointer;
	font-size: clamp(26px, 5vw, 50px);
	line-height: 1;
	margin-bottom: 0.5rem;
}
header.oshinagaki-header .sp-circle{
	align-items: flex-end;
	border-left: 1px dotted var(--main-text-color);
	display: flex;
	flex-basis: 25%;
	flex-direction: column;
	justify-content: flex-end;
	padding-left: 1em;
	text-align: right;
}
header.oshinagaki-header .sp-circle img{
	border-radius: calc(infinity * 1px);
	margin-bottom: 10px;
	width: 4rem;
}
header.oshinagaki-header small{
	font-size: 0.7em;
}
body.oshinagaki .articlelist{
	gap: 2rem 3rem;
	margin-bottom: 0;
}
body.oshinagaki article.excerpt{
	display: flex;
	flex-direction: column;
	grid-row: unset;
	grid-template-rows: unset;
	order: 2;
}
body.oshinagaki article.excerpt.logstatus-fixed::before{
	all: unset;
}
body.oshinagaki article.large{
	order: 1;
	grid-column: span 2;
	grid-row: span 2;
}
body.oshinagaki article.new .cover{
	position: relative;
}
body.oshinagaki article.new .cover::before{
	background-color: var(--accent);
	clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
	color: var(--sub-bg-color);
	content: 'NEW';
	font-size: 1rem;
	font-weight: bold;
	left: -1rem;
	line-height: 2;
	padding-inline: 0.6em 1em;
	position: absolute;
	top: 2rem;
	z-index: 100;
}
body.oshinagaki a:has(> .decoration1){
	text-decoration: none;
}
body.oshinagaki article.large .decoration1{
	font-size: 2rem;
}
body.oshinagaki .article-body{
	flex: 1;
}
body.oshinagaki .decoration4{
	font-size: 0.85em;
}
body.oshinagaki .decoration5{
	display: block;
	font-family: "Fjalla One", sans-serif;
	font-size: 1.3rem;
	font-style: normal;
	font-weight: 400;
	text-align: right;
}
body.oshinagaki .decoration5::before{
	content: '￥';
	font-size: 0.7em;
	font-family: var(--main-font-family);
	font-weight: bold;
}
body.oshinagaki .deco-yotei::after{
	content: '（予定）';
	font-size: 0.7em;
	font-family: var(--main-font-family);
	font-weight: bold;
}
body.oshinagaki article.large .decoration6{
	font-size: 2rem;
}
body.oshinagaki header.pageheader,
body.oshinagaki .situation,
body.oshinagaki .pagination,
body.oshinagaki aside,
body.oshinagaki footer.pagefooter,
body.oshinagaki .buttons-area,
body.oshinagaki article.soldout,
body.oshinagaki .post-tags{
	display: none;
}
body.oshinagaki footer.oshinagaki-footer{
	border-top: 2px solid var(--main-text-color);
	display: block;
	font-size: 0.9rem;
	margin: 2rem auto 0;
	max-width: var(--article-width);
	padding-top: 0.8em;
}
footer.oshinagaki-footer ul{
	padding-left: 1.3em;
}


/* MARK: articlelist 共通
--------------------------------------------*/
article .cover a{
	box-shadow: var(--shadow);
	display: block;
	margin-block: 0;
	overflow: hidden;
}
article .cover a:has(img:not([src*="."])){
	aspect-ratio: 1 / 1.41;
	background-color: var(--text-color-20);
	display: grid;
	place-items: center;
	text-decoration: none;
	width: 100%;
}
article .cover a:has(img:not([src*="."]))::before{
	content: 'NO IMAGE';
}
article .cover a:has(img:not([src*="."])) img{
	display: none;
}
article .post-categories{
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8rem;
	gap: 5px;
	line-height: 1.4;
	margin-bottom: 0.5em;
}
article .decoration1{
	line-height: 1.4;
}
.decoration5{
	display: none;
}
article .decoration6{
	display: flex;
	gap: 5px;
	line-height: 2;
}
article .decoration6 a.uc-btn,
article .decoration6 b{
	flex-grow: 1;
	padding: 0;
	text-align: center;
}
article .decoration6 b{
	background-color: var(--text-color-15);
	border-radius: var(--radius-mini);
	display: inline-block;
	font-size: 0.9rem;
	margin: 3px 0;
}
a:has(img.nsfw){
	background-color: var(--text-color-50);
	position: relative;
}
body:not(.oshinagaki) a:has(img.nsfw)::before{
	color: var(--sub-bg-color);
	content: "\f06a";
	font-family: 'Line Awesome Free';
	font-size: 2rem;
	left: calc(50% - 0.5em);
	line-height: 1;
	margin: auto;
	position: absolute;
	top: calc(50% - 0.5em);
	z-index: 1;
}
body:not(.oshinagaki) img.nsfw{
	filter: blur(20px);
}


/* MARK: 本文内要素
-------------------------------------------- */
a.imagelink{
	display: inline-block;
	margin-block: 0.7em;
}
article.full a.imagelink.nsfw{
	overflow: hidden;
	width: 50%;
}
.comment a:not(.cardlink)[target~="_blank"]::after{
	content: " \f35d";
	font-family: 'Line Awesome Free';
	font-weight: 900;
}
a.uc-btn,
a.readmorebutton{
	background-color: var(--accent-60);
	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(--text-color-20);
}
a.readmoreclose{
	background-color: var(--accent);
	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);
}
code{
	background-color: var(--text-color-20);
	border-radius: var(--radius-mini);
	font-size: 0.9em;
	padding: 0.2em 0.5em;
}
.decorationL + br,
.decorationQ + br,
.decoration2 + br{
	display: none;	/* 本文内ブロック要素の下の余白調整 */
}
.decorationM{
	padding: 0 0.2em;
}
.decorationS a.imagelink{
	width: 50%;
}
.decorationS,
.smalltext{
	font-size: 0.85rem;
}
.decorationT{
	font-size: 0.7rem;
}
.comment details .foldedarea{
	border-bottom: 5px solid var(--text-color-15);
	border-radius: var(--radius-mini);
	padding: 1em 0;
}
.comment details details{
	margin: 1em;
}
em,
.searchword{
	font-style: normal;
	font-weight: bold;
	margin-inline: 0.1em;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 0.5em;
	text-underline-offset: -0.2em;
}
em{
	filter: saturate(200%);
	text-decoration-color: var(--accent-30);
}
.searchword{
	background-color: transparent;
	color: currentColor;
	text-decoration-color:  rgba(222, 222, 0, 0.5);
}
figcaption{
	color: var(--text-color-70);
	font-size: 0.85rem;
	line-height: 1.5;
	margin-top: -0.5em;
}
figcaption a{
	color: var(--text-color-70);
	font-weight: normal;
}
iframe.embeddedmovie{
	max-width: 100%;
}
q.decorationQ{
	background-color: var(--text-color-15);
	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{
	list-style-type: disc;
	padding-left: 1.5rem;
	list-style-position: outside;
	margin: 0.5em 0;
}
ul.decorationL li{
	padding-bottom: 0.7em;
}
/*-- リストで囲んだ画像 --*/
ul.listdeco-img{
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	list-style-type: none;
	padding-left: 0;
}
ul.listdeco-img a{
	aspect-ratio: 1/1;
	display: block;
	margin: 0;
	overflow: hidden;
}
ul.listdeco-img img.embeddedimage{
	aspect-ratio: 1/1;
	border: 1px solid var(--text-color-50);
	margin: 0 0;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}
ul.listdeco-img a.nsfw,
ul.listdeco-img figure{
	margin: 0 0;
	width: 100%;
}
ul.listdeco-img figcaption{
	margin: 0.3em 0 1em;
}


/* 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%;
}
.cardlinkbox {
	border: 1px solid var(--text-color-50);
	border-radius: var(--radius-mini);
	display: flex;
}
.cardlinkimage {
	aspect-ratio: 1.91 / 1;
	background-image: url(partsforskin/noimage.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--radius-mini) 0 0 var(--radius-mini);
	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-50);
	color: var(--text-color-70);
	font-size: 0.8em;
	margin-top: 0.5em;
	padding-top: 0.2em;
}
.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-50);
}
.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-50);
	flex: 1;
	justify-content: center;
	padding: 0em 1em;
}
@media (max-width: 600px) {
	.cardsize-S{
		font-size: 0.85rem;
	}
	.cardsize-S .cardlinkimage {
		aspect-ratio: 1 / 1;
	}
}


/* MARK: input
-------------------------------------------- */
select,
input.queryinput,
input.passkeyinput{
	background-color: var(--sub-text-color);
	border: 1px solid var(--main-text-color);
	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"],
input[type="button"],
.postarea input[type="text"]{
	background-color: var(--main-text-color);
	border: 1px solid var(--main-text-color);
	border-radius: var(--radius-mini);
	color: var(--sub-text-color);
	cursor: pointer;
	font-size: 0.9rem;
	height: 2rem;
	letter-spacing: 2px;
	padding: 0 0.5rem;
	vertical-align: middle;
}
input[type="submit"]:hover,
input[type="button"]:hover{
	background-color: color-mix(in srgb, var(--accent) 50%, var(--main-text-color));
}
input[type="submit"]{
	border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
}
input[type="checkbox"]{
	margin: 2px;
	vertical-align: baseline;
}
form.passform{
	margin: 2rem 0;
}
form.passkeyform span.passkeyguide{
	display: block;
	margin-bottom: 0.3em;
}
form.passkeyform input.passkeyinput{
	padding-left: 0.5em;
	width: calc(100% - 7rem);
}
form.passkeyform input.passkeysubmit{
	border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
	padding: 0 0 2px;
	width: 7rem;
}


/* MARK: postform
-------------------------------------------- */
details.postarea{
	background-color: var(--accent-30);
	border-radius: var(--radius);
	max-width: var(--article-width);
	text-align: left;
}
details.postarea summary{
	background-color: transparent;
	font-weight: bold;
	padding: 2% 5%;
}
form.postform{
	padding-inline: 5%;
}
form.postform input{
	font-weight: normal;
	margin: 2px;
}
form.postform input[type="text"]{	/* 日付入力 */
	border-radius: var(--radius-mini) var(--radius-mini) 0 0;
	margin: 0;
}
form.postform textarea.tegalogpost{
	background-color: var(--sub-bg-color);
	border: 1px solid var(--main-text-color);
	border-radius: 0;
	color: var(--sub-text-color);
	field-sizing: content;
	min-height: 10rem;
	padding: 0.2em 0.6em;
	resize: vertical;
	vertical-align: middle;
	width: 100%;
}
form.postform .submitcover{
	display: block;
	margin-bottom: 1em;
	text-align: right;
}
form.postform input.postbutton{
	background-color: var(--sub-text-color);
	border-radius: 0 0 var(--radius-mini) var(--radius-mini);
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 0;
	width: 50%;
}
form.postform .line-control{
	font-size: 0.9rem;
}
form.postform input[type="button"]{
	letter-spacing: 1px;
}
form.postform select{
	margin: 2px 0 2px 2px;
	width: unset;
}
form.postform select + input[type="button"]{
	border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
	margin-left: 0;
	width: unset;
}
form.postform input[type="file"]{
	border: 1px solid var(--sub-text-color);
	border-radius: var(--radius-mini);
	height: 2rem;
	vertical-align: middle;
}
form.postform ::file-selector-button{
	background-color: var(--sub-text-color);
	border: none;
	color: var(--sub-bg-color2);
	cursor: pointer;
	margin-right: 0.7em;
	padding: 0.7em;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both;
}
form.postform label:has(input[name="category"]){
	background-color: var(--text-color-30);
	border-radius: var(--radius-mini);
	display: inline-block;
	font-weight: bold;
	margin: 2px 5px 2px 0;
	padding-inline: 5px;
	vertical-align: middle;
}
form.postform .catChecks{
	margin-right: 1em;
}
form.postform .decoBtns{
	display: inline-block;
	margin: 0 0 5px;
	vertical-align: middle;
}
form.postform img.recentoneimage{
	aspect-ratio: 1 / 1;
	object-fit: cover;
	vertical-align: middle;
	width: 3rem;
}
div.edit-htm{
	font-size: 0.8rem;
	padding: 2% 5%;
}
div.QP_footer{
	padding: 0 5% 3.5%;
	text-align: right;
}


/* MARK: pagination
--------------------------------------------*/
nav.pagination{
	display: flex;
	flex-direction: column;
	font-weight: bold;
	gap: 2rem;
	text-align: center;
}
nav.pagination a{
	background-color: var(--sub-bg-color);
	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;
}
nav.pagination a.pagenumhere{
	background-color: var(--main-text-color);
	color: var(--sub-bg-color);
}
nav.pagination .backto a{
	color: var(--text-color-50);
	border-radius: calc(infinity * 1px);
	letter-spacing: 0.05em;
	padding: 1em 2em;
}


/* MARK: 特殊な状況
--------------------------------------------*/
.articlelist:has(.nodata),
.articlelist:has(.nolist){
	display: block;
	text-align: center;
}
body.mode-about article{
	display: block;
	max-width: calc(var(--article-width) * 0.7);
}
body.mode-about article div.cover{
	display: none;
}


/* MARK: aside
-------------------------------------------- */
aside{
	display: grid;
	gap: 3rem;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto auto;
	margin: 5rem auto 0;
	max-width: var(--article-width);
}
aside details.postarea { grid-area: 1 / 1 / 2 / 3; }
aside .sec1 { grid-area: 2 / 1 / 3 / 2; }
aside .sec2 { grid-area: 2 / 2 / 3 / 3; }
aside section > div,
aside section > nav:not(:empty),
aside section form:not(:empty){
	margin-bottom: 2rem;
}
aside .freespace{
	border: 1px solid var(--text-color-50);
	border-inline: none;
	font-size: 0.9rem;
	padding: 1em 0;
}
aside .freespace a.uc-btn{
	margin: 6px 0;
}
aside .freespace-edit{
	color: var(--text-color-70);
	margin: -2rem 0 0;
	text-align: right;
}
aside h2{
	font-size: 0.8rem;
	font-weight: normal;
	padding: 0 0 0.4em;
	text-align: left;
}
aside ul.cattree{
	justify-content: flex-start;
}
aside ul.depth2{
	display: inline-block;
}
aside ul.depth2 li{
	margin-right: 0;
}
aside ul.depth2 a{
	background-color: var(--text-color-20);
	margin-left: 1px;
}
aside .searchtarget{
	font-size: 0.8rem;
}
aside input[type="submit"]{
	width: 3rem;

}
.hashtaglist li{
	display: inline-block;
	padding-right: 0.5em;
	font-size: 0.85rem;
	font-weight: bold;
}
.hashtaglist li:before{
	content: '#';
	color: var(--text-color-50);
}


/* MARK: footer
-------------------------------------------- */
footer.pagefooter{
	color: var(--text-color-50);
	font-size: 0.7rem;
	max-width: var(--article-width);
	margin: 2rem auto 1rem;
	text-align: center;
}
.backto-home{
	color: var(--text-color-50);
	font-size: 0.9rem;
	margin-bottom: 1rem;
}


/* MARK: responsive
-------------------------------------------- */
@media (max-width: 600px) {
	html:has(> body.oshinagaki){
		font-size: 100%;
	}
	body.oshinagaki header.oshinagaki-header{
		font-size: 0.9rem;
	}
	.articlelist{
		grid-template-columns: 1fr 1fr;
		gap: 3rem 2rem;
	}
	body.oshinagaki article.excerpt.large .cover{
		margin-inline: auto;
		max-width: 60%;
	}
	details.postarea[open]{
		border-radius: 0;
		margin-inline: -5vw;
	}
	article.full{
		gap: 2rem;
		grid-template-columns: 1fr;
	}
	article.full .decoration1{
		display: block;
	}
	aside{
		gap: 1rem;
		grid-template-columns: 1fr;
	}
	aside details.postarea,
	aside .sec1,
	aside .sec2{
		grid-area: unset;
	}
	.mobile-visible{
		display: initial;
	}
	.mobile-hidden{
		display: none;
	}
}