@charset "utf-8";
/*  **********************
共通CSS
Ver. 2024/08/10 12:18
https://10prs.com
 ************************ */
/* CSS変数設定 */
/*:root {}*/

*,
*:before,
*:after {
	box-sizing: border-box
}

:not(img)*:empty {
	margin: 0;
	padding: 0;
	display: none;
}

/* スムーズスクロール */
html {
	scroll-behavior: smooth;
}

/* ダイアログ表示時背景スクロール禁止 */
html:has(dialog[open]) {
	overflow: hidden;
}

body {
	min-width: 320px;
	line-height: 1.6;
	font-size: clamp(12px, 3.75vw, 16px);
	/* 禁則処理*/
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

a {
	text-decoration: none;
	transition: .3s;
}

/* iOSでのデフォルトスタイルをリセット */
button {
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	border: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

button::-webkit-search-decoration {
	display: none;
}

button::focus {
	outline-offset: -2px;
}

button,
[type="button"],
[type="submit"],
label,
summary {
	cursor: pointer;
}

textarea,
select {
	border-style: solid;
	border-width: 1px;
}

select {
	-moz-appearance: menulist-button;
	-webkit-appearance: menulist-button;
	appearance: menulist-button;
}

textarea {
	field-sizing: content;
	min-width: 150px;
	min-height: min-content;
	height: unset !important;
}

iframe,
audio,
video {
	max-width: 100%;
}

table {
	border-collapse: collapse;
}

details summary {
	list-style: none
}

details summary::-webkit-details-marker {
	display: none
}

details[open] div {
	animation: accordion .4s linear;
	overflow: hidden
}

@keyframes accordion {
	0% {
		opacity: 0;
		height: 0
	}

	70% {
		opacity: 0;
		height: 100px
	}

	100% {
		opacity: 1
	}
}

/* Twiemoji */
img.emoji {
	margin: 0 .05em 0 .1em;
	height: 1em;
	width: 1em;
	vertical-align: -.1em;
}

/* カスタム絵文字 */
.cemoji img {
	width: auto;
	height: auto;
	max-height: 2em;
	/* デフォ設定ではインラインスタイルにmiddleが出力される */
}

/* スクロールボタン */
.scroll_btn {
	position: fixed;
	top: calc(50% - 36px);
	right: .5em;
	z-index: 2;
}

.scroll_btn a {
	display: grid;
	place-content: center;
	opacity: .5;
}

.scroll_btn a:hover {
	opacity: .8;
}

.scroll_btn a::after {
	content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23ffffff"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
	/* https://fonts.google.com/icons?selected=Material+Symbols+Outlined:chevron_right:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23FFFFFF&icon.query=arrow */
	display: grid;
	place-content: center;
	width: 24px;
	height: 24px;
	line-height: .5em;
	background-color: #333;
	opacity: .5;
}

.scroll_btn a:first-child {
	transform: rotate(-90deg);
}

.scroll_btn a:first-child::after {
	border-radius: 0 5px 5px 0;
}

.scroll_btn a:last-child::after {
	border-radius: 0 5px 5px 0;
	transform: rotate(90deg);
}

.scroll_btn a span {
	display: none;
}

/* カテゴリアイコンを設定しているとき */
.categoryicon img
/*本文内*/
,
.caticon img

/*カテゴリ一覧内*/
	{
	height: 1.2em;
	width: auto;
	vertical-align: middle;
	margin: 0 1px;
	border-radius: 50%;
}

/* 画像の表示（最大サイズ・キャプション付・NSFWフラグ付）・新着画像一覧のNSFWフラグ付*/
img {
	max-width: 100%;
	max-height: 500px;
	width: auto;
	height: auto;
	vertical-align: middle;
	object-fit: cover;
}

@media (width < 600px) {
	.post-content img {
		max-height: 300px;
	}
}

.embeddedpictbox {
	display: inline-table;
	border-collapse: collapse;
	position: relative;
}

.embeddedpictbox figcaption {
	padding: 3px;
	display: table-caption;
	caption-side: bottom;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background: rgba(0, 0, 0, .3);
	font-size: .8em;
	text-align: center;
}

.imagelink,
.imagesearch {
	display: inline-block;
	line-height: 1;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
	/* ソース内改行による余白除け */
}

.imagelink img {
	transition: .5s;
}

.imagelink:hover img {
	transform: scale(1.02);
}

/*
.embeddedpictbox.nsfw {}
*/

.imagelink.nsfw::after,
.imagesearch:has(img.nsfw)::after {
	content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 -960 960 960" fill="%23ffffff"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>');
	/* https://fonts.google.com/icons?selected=Material+Symbols+Outlined:warning:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23FFFFFF&icon.query=alert */
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	background-color: rgba(0, 0, 0, .6);
	font-size: 2em;
	font-weight: 900;
	backdrop-filter: blur(1em);
	transition: 1s;
}

.imagelink.nsfw:hover::after {
	backdrop-filter: blur(10px);
}

:where(.imagelink, .imagesearch) img.nsfw {
	filter: grayscale(1);
	transition: 1s;
}

:where(.imagelink, .imagesearch):hover img.nsfw {
	filter: grayscale(0);
}

.imagesearch:has(img.nsfw)::after {
	background-color: rgba(0, 0, 0, .3);
	backdrop-filter: blur(5px);
}

/* リンクが張られていないNSFWフラグ付の画像 */
:not(a)>.embeddedimage.nsfw {
	overflow: hidden;
	opacity: .3;
	filter: invert(.9) hue-rotate(120deg) blur(5px);
}


/* 埋め込みツイート・動画のサイズ */
blockquote.twitter-tweet {
	background-color: #f8f8f8;
	border: 1px dashed #ddd;
	border-radius: 9px;
	margin: 0.3em 0;
	padding: 1em;
	font-size: 0.95em;
	color: #999;
}

div.twitter-tweet {
	max-width: 350px !important;
}

iframe.instagram-media.instagram-media-rendered {
	min-width: revert !important;
}

.embeddedmovie {
	display: inline-block;
	width: 100%;
	max-width: 100%;
}

@media (width < 600px) {
	.embeddedmovie {
		width: auto;
		height: auto;
	}
}

/* 記事本文内リスト */
.post_content {

	&>ul,
	>ol {
		margin: 1em 0;
		padding-left: 2em;
	}

	& ul,
	ol {
		padding-left: 1.5em;
	}

	& dl {
		margin: .5em 0 .5em .5em;
		padding-left: .5em;
	}

	& dd {
		padding-left: .5em;
	}
}

/* 各ブロック要素の次の改行タグを無効に */
:is(.deco-hr, c.decorationQ, .decorationL, .deco-center, .deco-right)+br {
	display: none;
}

/* 隠しハッシュタグ非表示 */
.taglink[title^="-"] {
	display: none !important;
}

/* 独自自由装飾 */
.decorationQ::before,
.decorationQ::after {
	content: none;
}

.uc-btn {
	margin: .5em auto;
	padding: 1em;
	border: 2px solid;
	display: inline-block;
	color: currentColor;
}

.decorationI .decorationI {
	transform: skewX(-30deg);
	font-style: normal;
	display: inline-block;
	font-size: .94em;
}

.decorationD .decorationD {
	display: inline-block;
	position: relative;
}

.decorationD .decorationD {
	text-decoration: none;
}

.decorationD .decorationD::after {
	content: '';
	display: inline-block;
	width: 100%;
	height: .5em;
	background-color: currentColor;
	position: absolute;
	top: .6em;
	left: 0;
}

.deco-bokashi {
	filter: blur(.3em);
}

.deco-bokashi:is(:hover, :active) {
	filter: revert;
}

.decorationL.listdeco-yoko {
	padding-left: 0;
}

.decorationL.listdeco-yoko li {
	padding: 0;
	display: inline;
}

.post_content .listdeco-yoko li::before {
	content: none;
}

.post_content .listdeco-yoko li:not(:last-child)::after {
	content: ' / ';
}

.decorationL.listdeco-cards {
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1em .8em;
	grid-template-rows: auto;
}

.decorationL.listdeco-cards li {
	padding: .2em;
	list-style: none;
	box-shadow: 0 0 3px #c0c0c0;
	background-color: #fff;
}

.decorationL.listdeco-cards li::before {
	content: none;
}

.decorationL.listdeco-cards img {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 320/240;
	object-position: top center;
}

.decorationL.listdeco-cards a {
	font-weight: bold;
}

.deco-center {
	display: block;
	text-align: center;
}

.deco-right {
	display: block;
	text-align: right;
}

/* 独自装飾・画像を旧ツイッターぽくまとめて表示 */
.deco-twimage {
	border: 1px solid rgb(207, 217, 222);
	display: flex;
	overflow: hidden;
	gap: 1px;
	flex-wrap: wrap;
	border-radius: 16px;
}

.deco-twimage>:is(.embeddedpictbox, .imagelink) {
	margin: 0;
	display: inline-block;
	width: calc(50% - 1px);
	height: 180px;
}

.deco-twimage>.embeddedpictbox>.imagelink {
	margin: 0;
	display: inline-block;
	width: 100%;
	height: 180px;
}

.deco-twimage .embeddedimage {
	width: 100%;
	height: 100%;
	max-height: fit-content;
	object-fit: cover;
}

.deco-twimage br {
	display: none;
}

/* 記事Noリンクポップアップ */
#popupContent {
	margin: .5em;
	padding: 1em .5em;
	z-index: 1;
	max-width: 600px;
	line-height: 1.2;
	background-color: rgba(255, 255, 255, .8);
	box-shadow: 0 0 3px #aaa;
}

#popupContent>a {
	position: absolute;
	top: .5em;
	left: .5em;
	font-weight: bold;
}

#popupContent>div {
	max-height: 300px;
	overflow: auto;
	font-size: .9em;
}

#popupContent .imagelink {
	pointer-events: none;
}

#popupContent img {
	max-height: 200px;
}

/* QUICKPOST周り */
/* 管理用リンク */
.to_adminpage {
	display: block;
}

.to_adminpage span {
	display: none;
}

.to_adminpage::after {
	content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23666666"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>');
	/* https://fonts.google.com/icons?selected=Material+Symbols+Outlined:settings:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23666666 */
	display: grid;
	place-content: center;
	width: 100%;
	line-height: .5em;
}

/* QUICKPOST表示非表示トグル */
#quickpost_toggle,
:is([for="quickpost_toggle"]) span,
#quickpost {
	display: none;
}

label#open_form_btn::after {
	margin-bottom: .5em;
	content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="%23ffffff" viewBox="0 0 32 32"><path d="M 19.15625 3 C 18.390625 3.003906 17.644531 3.300781 17.09375 3.90625 C 17.085938 3.914063 17.101563 3.929688 17.09375 3.9375 C 15.863281 5.175781 15.386719 6.40625 14.96875 7.5 C 14.789063 7.972656 14.609375 8.417969 14.375 8.875 C 13.914063 8.34375 13.25 8 12.5 8 C 11.132813 8 10 9.132813 10 10.5 C 10 11.867188 11.132813 13 12.5 13 C 13.242188 13 13.882813 12.648438 14.34375 12.125 L 14.40625 12.1875 L 5.28125 21.28125 L 5 21.59375 L 5 25.5625 L 4 26.59375 L 5.40625 28 L 6.4375 27 L 10.40625 27 L 10.71875 26.71875 L 27.28125 10.125 L 27.3125 10.09375 C 28.464844 8.941406 28.464844 7.058594 27.3125 5.90625 L 26.09375 4.6875 C 25.515625 4.109375 24.765625 3.8125 24 3.8125 C 23.285156 3.8125 22.589844 4.089844 22.03125 4.59375 L 21.3125 3.90625 C 20.722656 3.316406 19.933594 2.996094 19.15625 3 Z M 19.1875 5 C 19.433594 5.003906 19.699219 5.105469 19.90625 5.3125 L 20.59375 6 L 14.46875 12.09375 C 15.824219 10.65625 16.421875 9.320313 16.84375 8.21875 C 17.273438 7.09375 17.542969 6.269531 18.5 5.3125 L 18.5625 5.25 C 18.710938 5.082031 18.941406 4.996094 19.1875 5 Z M 24 5.78125 C 24.234375 5.78125 24.464844 5.871094 24.6875 6.09375 L 25.90625 7.3125 C 26.351563 7.757813 26.351563 8.242188 25.90625 8.6875 L 25 9.5625 L 22.4375 7 L 23.21875 6.21875 L 23.3125 6.09375 C 23.535156 5.871094 23.765625 5.78125 24 5.78125 Z M 21 8.4375 L 23.5625 11 L 16 18.5625 L 13.4375 16 Z M 12.5 10 C 12.789063 10 13 10.210938 13 10.5 C 13 10.789063 12.789063 11 12.5 11 C 12.210938 11 12 10.789063 12 10.5 C 12 10.210938 12.210938 10 12.5 10 Z M 12 17.4375 L 14.5625 20 L 9.5625 25 L 7 25 L 7 22.4375 Z"/></svg>');
	/* https://icons8.com/line-awesome */
	display: grid;
	place-content: center;
	width: 4em;
	height: 4em;
	line-height: .5em;
	background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
	border-radius: 50%;
}

label#close_form_btn::after {
	border: 2px solid #666;
	content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 -960 960 960" width="1.5em" fill="%23666666"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>');
	/* https://fonts.google.com/icons?selected=Material+Symbols+Outlined:close:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23666666 */
	display: grid;
	place-content: center;
	width: 2.5em;
	height: 2.5em;
	line-height: .5em;
	position: absolute;
	top: -1em;
	right: -1em;
	background-color: #efefef;
	border-radius: 50%;
}

#quickpost_toggle:checked~#quickpost {
	display: block;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	overflow: auto;
	background-color: rgba(0, 0, 0, .6);
}

#quickpost_toggle:checked~#quickpost label[for="quickpost_toggle"] {
	display: block;
}

#quickpost_toggle:checked~#quickpost #close_form_btn {
	margin: auto;
	width: fit-content;
}

#quickpost_toggle:checked~#quickpost>label[for="quickpost_toggle"] {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.postarea {
	margin: 1.5em;
	padding-bottom: 1em;
	position: relative;
	background-color: #fff;
}

.postform {
	padding: 1em;
	background-color: #eee;
}

.postform p {
	margin: 0;
}

/* 以下ほぼてがろぐ公式のままです */
textarea.tegalogpost {
	padding: .5em;
	border: 1px solid rgba(0, 0, 0, .3);
	width: 100%;
	height: auto !important;
	line-height: 1.2;
	overflow-wrap: break-word;
	overflow: auto;
	background-color: #fff;
}

/* 設定で日時自由記入OKにした時 */
input[name="datetime"] {
	margin-bottom: 2px;
	padding: 0 0 0 2px;
	border: 1px solid rgba(0, 0, 0, .3);
	background-color: #fff;
}

/* field-sizingがFirefoxに対応するまで以下でテキストエリア自動拡大 */
/* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
.line-textarea {
	display: grid;
}

.line-textarea::after {
	content: attr(data-replicated-value) " ";
	white-space: pre-wrap;
	visibility: hidden;
}

.line-textarea>textarea {
	resize: none;
	overflow: hidden;
}

.line-textarea>textarea,
.line-textarea::after {
	font: inherit;
	grid-area: 1 / 1 / 2 / 2;
}

@media (width < 800px) {
	textarea.tegalogpost {
		font-size: 16px;
		padding: 0.4em;
	}
}

.line-control {
	margin-top: .25em;
}

.postbutton[type="submit"] {
	display: inline-block;
	color: #fff;
	background: #333;
	font-weight: bold;
	text-decoration: none;
	padding: .25em 2em;
}

.postbutton:hover {
	background-color: #aaa;
}

/* 装飾ボタン */
.decoBtns {
	display: inline-block;
	margin-top: 0.5em;
}

@media (width < 800px) {
	.decoBtns {
		margin-top: 0;
	}
}

.decoBtns input,
.hashtagEasyInput,
#replaceButton {
	margin: 1px;
	padding: 0 4px;
	border: 1px solid #aaa;
	min-width: 32px;
	min-height: 28px;
	background-color: #eee;
	font-size: 14px;
	border-radius: 3px;
	vertical-align: middle;
}

.decoBtns input:hover,
#replaceButton:hover {
	background-color: #e5f1fb;
	border-color: #0078d7;
}

.decoBtnB {
	font-weight: bold;
}

.decoBtnD {
	text-decoration: line-through;
	text-decoration-color: red;
	text-decoration-style: double;
}

.decoBtnE {
	font-weight: bold;
	color: blue;
}

.decoBtnI {
	font-style: italic;
}

.decoBtnT {
	font-size: 11px !important;
}

.decoBtnU {
	text-decoration: underline;
	text-decoration-color: red;
}

.decoBtnC {
	color: red;
}

.decoBtnM {
	color: blue;
}

/* カテゴリ選択チェックボックス */
.catChecks {
	font-size: 0.9em;
	padding-top: 0.5em;

	& label {
		display: inline-block;
		margin: 0 0.75em 0 0;
	}

	& label:hover {
		text-decoration: underline;
	}

	& input {
		min-width: 0;
		min-height: 0;
		margin-right: 0.2em;
	}

}


/* 投稿欄下部：「鍵付き」チェックボックスと「個別鍵」ボタンの間を詰める一時的なスタイル */
.funcUIs .catChecks {
	margin: 0 0.75em 0 0;
}

.funcUIs .catChecks label {
	margin: 0;
}

/* カスタム絵文字ピッカー(その1) | Takotubo Club
https://10rin0.github.io/takodoc/tegalog/%E3%83%91%E3%83%BC%E3%83%84/cemoji_01/ */
.cepicker {
	margin: 10px auto;
	padding: 5px 0;
	max-height: 300px;
	overflow-y: auto;
	background-color: #dfdfdf;

	& #CemojiList {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 3px;
	}

	& .oneCemoji {
		display: inline-grid;
		justify-items: center;
		padding: 2px;
		background-color: #f0f0f0;
	}

	& .cename, .cectrl {
		display: none;
	}

	& .oneCemoji img {
		height: 2em;
		cursor: pointer;
	}
}

/* 画像一覧取得 */
#quickpost .img_list {
	width: 100%;
	overflow-x: scroll
}

#quickpost .images.standard {
	& :is(.embcode *, img[src$=".mp3"], img[src$=".mp4"]) {
		display: none;
	}

	& td:has(img[src$=".mp3"])::before {
		display: block;
		width: 100px;
		content: 'mp3';
		font-size: 1.2em;
		font-weight: bold;
		text-align: center;
	}

	& td:has(img[src$=".mp4"])::before {
		display: block;
		width: 100px;
		content: 'mp4';
		font-size: 1.2em;
		font-weight: bold;
		text-align: center;
	}

	& .embcode :is(.codeui, .codeui input[type="text"]) {
		display: block;
	}

	& tr {
		padding: 0 .25em;
		display: table-cell;
		background-color: #efefef;
	}

	& tr:nth-child(even) {
		background-color: #e0e0e0;
	}

	& td {
		font-size: .7em;
	}

	& img {
		max-width: 100px;
		max-height: 100px;
		width: auto;
		height: auto;
	}
}


/* クイック投稿フォーム簡易プレビュー */
#quickpost details {
	margin-top: .5em;
}

#quickpost summary {
	margin: auto;
	padding: .25em .25em .25em .5em;
	display: flex;
	align-items: center;
	width: fit-content;
	background: #efefef;
	font-weight: bold;
}

#quickpost summary::after {
	margin: 3px .25em;
	display: grid;
	place-content: center;
	width: 20px;
	height: 20px;
	line-height: .5em;
	content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="%23ffffff"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
	background-color: #666;
	border-radius: 50%;
	transition: .5s;
	transform: rotate(90deg);
}

#quickpost details[open] summary::after {
	transform: rotate(-90deg);
}

/* for jscolor */
.jscolor {
	width: 8em;
}