@charset "utf-8";

/*  **********************
skin-_Xmodki2 for てがろぐ ver.4.5.0～
Ver. 2025/01/31
https://10prs.com
 ************************ */

/* cssリセット */

/* form, */
.search {
    display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
}

table {
	caption-side: top;
	/* border-collapse: collapse; */
}

button,
input,
optgroup,
select,
textarea {
	-webkit-appearance: auto;
	appearance: auto;
}

textarea {
	font-size: 1.0rem;
	/* iOS zoom対策 */
}

small,
.small {
	font-size: 80%;
}

/* 投稿フォーム */

.catpullbox,
.datelimitbox,
.hashtagpullbox,
.searchbox,
.searchinputs {
	display: flex;
	flex-flow: row nowrap;
	width: var(--percent100);
}

.datelimitboxoptions {
	display: none;
}

input.queryinput,
/* input.passkeyinput, */
select.datelimitpull {
	/* display: inline-flex; */
	/* flex-flow: column nowrap; */
	/* justify-content: center; */
	background-color: var(--my-white);
	border: 1px solid var(--my-color);
	/* border-radius: var(--radius-mini) 0 0 var(--radius-mini); */
	color: var(--my-text-color);
	height: 2rem;
	vertical-align: middle;
	width: calc(100% - 3rem);
	/* width: auto; */
	/* flex-grow: 3; */
	padding: 0 0.5rem;
}

input[type="submit"],
.postarea input[type="button"] {
	background-color: var(--my-color);
	border: none;
	/* border-radius: var(--radius-mini); */
	color: var(--my-white);
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: bold;
	/* width: 100%; */
	height: 2rem;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	padding: 0 0.5rem;
	transition: background-color 0.2s ease-in-out;
	vertical-align: middle;
	text-align: center;
	line-height: 1;
	flex-grow: 1;
}

input[type="submit"]:hover,
.postarea input[type="button"]:hover {
	background-color: var(--my-text-color);
}

input[type="submit"],
select+input[type="button"] {
	border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
}


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

.nav-sticky .submitcover {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: stretch;
	/* margin-bottom: 1rem; */
	/* text-align: right; */
	width: 3.5rem;
	flex-grow: 1;
}

/* postarea ---- */

.postarea {
	/* background-color: var(--accent1); */
	/* border-radius: var(--radius); */
	display: block;
	margin: 0 auto 1.5rem;
	padding: 1.0rem 0;

	summary {
		color: var(--my-color);
		cursor: pointer;
		font-weight: bold;
		padding: 1rem 4%;
		background-color: transparent;
		font-size: 1.2rem;
		padding: 0;
	}

	summary::after {
		display: none;
	}

	summary::before {
		display: inline-block;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		-webkit-font-smoothing: antialiased;
		content: "\f13a";
		margin: 0 0 0 -1.0rem;
		/* color: var(--my-text-color); */
		width: 2.0rem;
		/* height: 1.0rem; */
		vertical-align: middle;
	}

	form.postform {
		display: block;
		margin: auto;
		padding: 0 1.0rem;
	}

	textarea.tegalogpost {
		background-color: var(--my-white);
		/* border: none; */
		border-radius: var(--radius-mini) var(--radius-mini) 0 var(--radius-mini);
		color: var(--my-text-color);
		field-sizing: content;
		min-height: 10rem;
		padding: 0.2em 0.6em;
		resize: vertical;
		vertical-align: bottom;
		width: 100%;
	}

	input[type="text"] {
		background-color: var(--accent-30);
		border: none;
		border-radius: var(--radius-mini);
		color: var(--my-text-color);
		letter-spacing: 2px;
		margin-bottom: 10px;
		padding: 0 0.6em;
	}

	.submitcover {
	display: flex;
	margin: 0 0 1rem;
	text-align: right;
	width: auto;
	flex-grow: 0;
}

	input.postbutton {
		color: var(--my-white);
		background-color: var(--my-color);
		/* border-radius: 0 0 var(--radius-mini) var(--radius-mini); */
		width: 50%;
	}

	input.postbutton:hover {
		background-color: var(--my-text-color);
	}

	.line-control {
		font-size: 0.9rem;
		padding-bottom: 1rem;
	}

	input[type="button"] {
		font-weight: normal;
		margin: 0 5px 5px 0;
		vertical-align: middle;
		padding: 0 0.25rem;
	}

	select {
		margin-bottom: 5px;
		width: unset;
	}

	select+input[type="button"] {
		border-radius: 0 var(--radius-mini) var(--radius-mini) 0;
	}

	label {
		display: inline-block;
		margin: 0;
		padding: 0 0.5rem 0.25rem 0;
		vertical-align: middle;
	}

	label input[type="checkbox"] {
		margin-right: 3px;
	}

	input[type="file"] {
		border: 1px solid var(--my-text-color-75);
		border-radius: var(--radius-mini);
		height: 2rem;
		margin: 0 5px 5px 0;
		vertical-align: middle;
	}

	::file-selector-button {
		background-color: var(--my-text-color-75);
		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.2s ease-in-out;
	}

	::file-selector-button:hover {
		background-color: var(--my-text-color);
	}

	.catChecks {
		display: block;
		font-size: 0.9rem;
		padding: 0.25rem 0;
	}

	.funcUIs .catChecks {
		display: inline;
	}

	.QP_footer {
		padding: 0 1.6rem 1rem;
		text-align: right;
	}
}

/* ページナビ ここから */

.pages {
	text-align: center;
	font-weight: bold;

	a {
		background-color: var(--my-text-color-50);
		/* border-radius: var(--radius-mini); */
		color: var(--my-text-color);
		display: inline-flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		/* letter-spacing: 0; */
		margin-bottom: 5px;
		min-width: 2em;
		min-height: 2em;
		line-height: 1;
		padding: 0;
		text-decoration: none;
		transition: all 0.2s ease-in-out;
	}

	a:hover {
		background-color: var(--text-color-40);
	}

	.pagenumhere {
		background-color: var(--my-color);
		color: var(--sub-bg-color);
	}
}

.pages.onelog {
	a.nextlink {
		clip-path: polygon(0 50%, 15% 0, 100% 0, 100% 100%, 15% 100%);
		padding-left: 1.5em;
		padding-right: 1em;
	}

	a.prevlink {
		clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
		padding-left: 1em;
		padding-right: 1.5em;
	}
}

/* ページナビ ここまで */

/* 固定ナビ ここから */
.nav-sticky {
	margin: 0 auto;
	padding: 0 0 1.0rem;
	position: sticky;
	top: 1.0rem;
	/* line-height: 1.8; */
}

.cattree {

	margin: 2.0rem auto;
	padding: 0;

	li {
		margin: 0 0 0.25rem;
		font-size: 1.0rem;
		line-height: 1.8;
		/* border-bottom: 1px solid var(--text-color-30); */
	}

	a {
		display: block;
	}

	.num {
		display: none;
	}
}

.hashtaglist {

	margin: 2.0rem auto;
	padding: 0;
	/* line-height: 1.8; */

	li {
		font-size: 1.0rem;
		display: inline-block;
		padding-right: 0.75rem;
		line-height: 1.8;
	}

	li::before {
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		-webkit-font-smoothing: antialiased;
		content: '\23';
		color: var(--my-text-color-75);
	}

	.num {
		display: none;
	}
}

.freespace {
	margin-bottom: 2em;

	.author {
		font-size: 1rem;
		font-weight: bold;
	}

	a {
		display: block;
		border-bottom: 1px solid var(--text-color-30);
	}

	p {
		line-height: 1.8;
		margin-bottom: 1em;
	}

	.Login-Required a::before,
	a.Login-Required::before {
		content: "\f023";
		font-family: "Line Awesome Free";
		font-weight: 900;
	}
}

table.calendar {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	font-size: 0.75rem;
	margin-top: 2em;
	line-height: 1.8;

	caption {
		text-align: left;
	}

	thead {
		background-color: var(--text-color-10);
		/* line-height: 1.8; */
	}

	tr {
		border-bottom: 1px solid var(--text-color-30);
		/* line-height: 1.8; */
	}

	tr:last-child {
		border-bottom: none;
	}

	th,
	td {
		padding: 0.5rem 0;
		/* line-height: 1.8; */
	}

	.sun,
	.sat {
		background-color: var(--sub-bg-color);
	}

	.today {
		background-color: var(--accent-30);
	}

	a {
		color: var(--main-text-color);
	}

	span.nolink {
		color: var(--text-color-50);
	}
}

.calbtm {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 0.8rem;
}

a.btn {
	border: 1px solid var(--text-color-30);
	border-radius: var(--radius-mini);
	display: block;
	padding: 0.1em 0.6em 0.2em;
	margin-top: 2em;
	transition: 0.2s background-color ease-in-out;
}

a.btn:hover {
	background-color: var(--text-color-20);
}

a.btn+a.btn {
	margin-top: 0.5em;
}

.latestpostlist {
	li {
		border-bottom: 1px solid var(--text-color-30);
		line-height: 1.4;
		padding: 0.5em 0;
	}
}

.imagelist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;

	img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
		width: 100%;
	}
}

.category a::before,
.cattree a::before,
a.categorylink::before {
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	-webkit-font-smoothing: antialiased;
	content: "\e185";
	margin: 0 0.25rem 0 0;
	color: var(--my-text-color);
	width: 1.0rem;
	height: 1.0rem;
}

/* フリースペース ここから */
.freespace {
	margin-bottom: 2em;

	.author {
		font-size: 1rem;
		font-weight: bold;
	}

	a {
		display: block;
		border-bottom: 1px solid var(--text-color-30);
	}

	p {
		line-height: 1.8;
		margin-bottom: 1em;
	}

	.Login-Required a::before,
	a.Login-Required::before {
		content: "\f023";
		font-family: "Line Awesome Free";
		font-weight: 900;
	}
}

/* フリースペース ここまで */



/* 記事タイトル */
.post_title {
	display: none;
}

/* 固定記事 */
.onelogbox.logstatus-fixed::before {
	margin-left: 20px;
	content: "📌固定";
	display: block;
	width: 100%;
	color: var(--light-text-color);
	font-size: .8em;
	font-weight: bold;
}

/* 記事本文内 */
.post_content {

	/* 各種リスト */
	>ul,
	>ol {
		margin: 1em 0;
		padding-left: 2em;
		font-size: 1.0rem;
	}

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

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

	dt {
		font-weight: bold;
	}

	dd {
		padding-left: 1em;
	}

	:where(ul, ol, dl)+br {
		display: none;
	}

	/* 装飾のない画像 */
	a.imagelink:not(.embeddedpictbox a, .deco-twimage a) {
		border: 1px solid #e0e0e0;
		border-radius: 1em;
	}
}

/* もっと読む・畳むボタン */
.decorationH {}

a:not(.readmorebutton):not(.cardlink):not(.uc-btn) {
	/* text-decoration: underline; */
	text-decoration-color: var(--my-white);
}

.readmorebutton {
	background-color: var(--accent1);
	/* border-radius: var(--radius-mini); */
	color: var(--my-white);
	display: block;
	font-weight: bold;
	font-size: 0.9rem;
	margin: 0 0 5px 0;
	padding: 0.1em 0.6em 0.2em;
	text-decoration: none;
	transition: background-color 0.3s ease-in-out;
}

.readmorebutton::hover {
	background-color: var(--my-color);
}

.readmoreclose {
	background-color: transparent;
	border-radius: 0;
	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;
}

.readmoreclose::hover {
	background-color: transparent;
	color: var(--accent);
}

/* --------------------------------------------
	汎用装飾(てがろぐ専用記法で書かれた場合のみ)
----------------------------------------------- */

em,
mark.searchword {
	text-decoration: underline;
	text-decoration-thickness: 0.5em;
	text-underline-offset: -0.2em;
	text-decoration-skip-ink: none;
}

em {
	filter: saturate(200%);
	font-style: normal;
	font-weight: bold;
	margin-inline: 0.2em;
	text-decoration-color: var(--accent1);
}

/* 引用 */
.decorationQ {
		background-color: #f5f5f5;
		padding: 1em 2em;
		font-size: 0.9rem;
		margin: 0.5em 0;
		position: relative;
	}

.decorationQ::before {
		content: "\f10d";
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		color: var(--text-color-50);
		position: absolute;
		left: 6px;
		top: 0;
	}

.decorationQ::after {
		content: "\f10e";
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		color: var(--text-color-50);
		position: absolute;
		right: 6px;
		bottom: 0;
	}

.decorationT {
	font-size: .5em;
}

/* 記事内フッター */
.post_footer {
	width: var(--percent100);
	position: relative;
	margin: 0 auto 1.0rem;

	.reaction-counts {
		font-size: 1.0rem;
		justify-content: center;
		margin: 1.0rem auto;
	}

	>ul {
		padding-left: 0;
		display: flex;
		align-items: center;
		/* list-style: none; */


		>li {
			width: 100%;
			color: var(--my-text-color-75);
			text-align: center;
			font-size: 1.0rem;
		}
	}

	.reply a {
		font-size: 1.4em;
		filter: grayscale(1) drop-shadow(0 0 1px #ccc);
		transition: .8s;
	}

	.reply a:hover {
		filter: grayscale(0);
	}

	details summary {
		margin: 0 auto;
		width: 2.0rem;
		height: 2.0rem;
		line-height: 2.0rem;
		color: var(--my-text-color-75);
		font-size: 1.2rem;
		text-align: center;
		border-radius: 100vmax;
		transition: .2s;
	}

	details ul {
		padding-left: 0;
		border: 1px solid var(--my-color);
		min-width: 15rem;
		position: absolute;
		right: 0;
		bottom: 2em;
		background-color: var(--my-white);
		/* box-shadow: 0 0 3px #eee; */
		font-size: 1.0rem;
	}

	details ul li {
		text-align: center;
		list-style: none;
	}

	details ul li :where(button, a) {
		margin-inline: 0;
		padding: 3px 8px;
		display: block;
		color: var(--main-text-color);
		font-size: 1.2rem;
		text-align: center;
	}

	.copy {
		width: 100%;
	}

	.reaction-buttons {
		margin: 10px;
		gap: .5em;

		button {
			padding: 0 .5em;
			height: 1.6em;
			line-height: 1;
		}
	}
}

:is(.reply, .edit) summary:hover {
	color: rgb(29, 155, 240);
	background-color: rgba(29, 155, 240, .1);
}

.share summary:hover {
	color: rgb(0, 186, 124);
	background-color: rgba(0, 186, 124, .1);
}

.favorite summary:hover {
	color: rgb(249, 24, 128);
	background-color: rgba(249, 24, 128, .1);
}

/* 境界バー */
.dateseparator {
	display: none;
}

/* 先頭固定専用の日付境界バー */
.fixedseparator {
	display: none;
}

/* 検索タブ（検索ボックス・カテゴリ・ハッシュタグ一覧）・アーカイブタブ（カレンダー・年月リスト）共通スタイル */
:where(.cattree, .datelimitlist) li {
	list-style: none;
}

.depth2,
.datelimitsublist {
	margin-left: 1em;
}

:where(.depth2, .hashtaglist, .datelimitsublist) li {
	display: inline;
}

:where(.depth1, .datelimitlist)>li>a {
	font-weight: bold;
}

:where(.cattree, .hashtaglist, .datelimitlist) .num {
	margin: 0 2px;
	color: var(--light-text-color);
	font-size: .8em;
}

/* ページのフッタ部分に表示するリンクURLが空の場合グローバルナビゲーション内「ホーム」非表示 */
#free_homelink:has(a[href=""]) {
	display: none;
}

/* フリースペースが空の場合グローバルナビゲーション内「プロフィール」非表示 */
body:has(.tab_content .onelogbox.freespace:empty) .global_nav .profile {
	display: none;
}

/* コンテナ */

.container {
	.situation {
		border: 1px solid var(--text-color-30);
		border-radius: var(--radius);
		color: var(--text-color-70);
		filter: var(--shadow);
		font-size: 0.9rem;
		margin-bottom: 3rem;
		padding: 0.5em;
		text-align: center;
	}

	.situation:empty {
		display: none;
	}
}

/* グローバルナビゲーション ここまで */

/* グローバルフッター ここから */
footer {

	overflow: auto;

	.material {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-content: center;
		align-self: center;

		li {
			text-align: center;
			display: inline-block;
			font-size: 0.84rem;
		}

		li:not(:first-child)::before {
			display: inline-block;
			content: '/';
			width: 1.0rem;
		}
	}
}

/* グローバルフッター ここまで */

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

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

	a:hover {
		opacity: .8;
	}

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

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

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

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

	a span {
		display: none;
	}
}

/* スクロールボタン ここまで */

/* .postidlink クリックで開くポップアップ ここから */
#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;

	.popup_content {
		margin-top: 1.4em;
		max-height: 500px;
		overflow: auto;
		font-size: .9em;
	}

	.popup_number {
		position: absolute;
		top: .5em;
		left: .5em;
		font-weight: bold;
		font-size: .9em;
	}
}

/* .postidlink クリックで開くポップアップ ここまで */

/* ギャラリーモード グリッドレイアウト ここから */
.gallery_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	grid-template-rows: auto;

	.gallery_contents {
		position: relative;
		display: grid;
		place-content: center;
		background-color: var(--lighter-color);

		.imagelink,
		figure {
			display: none;
		}

		.imagelink:first-child,
		figure:first-child {
			display: block;
		}

		img,
		video {
			width: 100%;
			max-width: 100%;
			height: auto;
			aspect-ratio: 1/1;
		}

		.pictcount {
			padding: 3px 5px;
			position: absolute;
			bottom: .3em;
			left: .2em;
			line-height: 1;
			background-color: var(--my-white);
			font-size: .8em;
			border-radius: 3px;

			span {
				display: none;
			}

			a {
				color: currentColor;
			}
		}

		.posttime {
			display: none;
		}
	}
}

.lb-caption {
	margin: .3em 0;
	padding: .3em 1em;
	background-color: var(--my-white);
}

/* ギャラリーモード グリッドレイアウト ここまで */

/* ローディング画面アニメーション
-- HTML: <div class="loader"></div>
The Filling CSS Loaders Collection https://css-loaders.com/filling/ */
.loader {
	width: fit-content;
	font-size: 40px;
	line-height: 1.5;
	font-family: system-ui, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color: #0000;
	-webkit-text-stroke: 1px #000;
	background:
		radial-gradient(1.13em at 50% 1.6em, #000 99%, #0000 101%) calc(50% - 1.6em) 0/3.2em 100% text,
		radial-gradient(1.13em at 50% -0.8em, #0000 99%, #000 101%) 50% .8em/3.2em 100% repeat-x text;
	animation: l9 1s linear infinite;
}

.loader:before {
	content: "Loading";
}

@keyframes l9 {
	to {
		background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) .8em
	}
}