@charset "utf-8"

html {
	font-size: 100%;
}

/*  色を変更したい場合はここの色を変えてください。 */
:root {
	/* 基本の文字色 */
	--text-main: #666666;

	/* メインの背景色 */
	--background-main: #ffffff;

	/* サブ背景色。罫線の色 */
	--background-sub: #aaaaaa;

	/* ボタン用の背景色 */
	--background-button: #eeeeee;

	/* アクセント用の色。強調やリンク、タイトルの影色などに使用しています。濃い目の色がいいです。 */
	--accent-main: #F18484;

	/* サブアクセント色。リンクにマウスが乗った時の色や、「続きを読む」ボタン等に使用しています。薄めの色でも大丈夫だと思います。 */
	--accent-sub: #eaeaea;
}


/*** フェードインアニメーションを作って ***/
@keyframes fadein {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
	}
  /*** bodyやメインコンテンツの要素に反映させる ***/
 .wrap {
	animation: fadein 2s forwards;
  }


body {
	background-color: var(--background-main);
	color: var(--text-main);
	font-family: 'Zen Kaku Gothic New', sans-serif;
}


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

a:hover {
	color: var(--accent-sub);
	transition: .5s;
}

img {
	width: 100%;
	height: 400px;
	border-radius: 10px;
	object-fit: cover;
}

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

/*  -----------全体ラップ----------- */
.wrap {
	position: relative;
	width: 50vw;
	min-width: 300px;
	max-width: 500px;
	margin: 0 auto;
	padding-bottom: 10px;
}


/* 固定ポストにピンのアイコンを表示する */
.fixedseparator+.date::before {
	padding-right: 5px;
	content: "\f08d";
	font-family: FontAwesome;
}

/* 日付バーを消す */
.dateseparator {
	display: none;
}

/* 単体投稿ページの細かいメニューを消す */
.utilitylinks {
	display: none;
}


/*  -----------タイトル部分----------- */
header {
	top: 0;
	margin: 0;
	padding: 10px 0;
	background-color: var(--background-main);
	text-align: center;
}

header h2 a {
	margin: 0;
	color: var(--text-main);
	font-weight: 700;
	font-size: 24px;
	font-family: 'Quicksand', 'Zen Kaku Gothic New', cursive;
}

header h2 a:hover {
	color: var(--accent-sub);
}

header small {
	font-size: .8rem;
	margin: 0;
}

/* 上に戻る・管理画面ボタン */

.admin {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* カテゴリ選択ボックス */
.catpull {
	width:fit-content; 
	border: 2px solid #aaaaaa;
	border-radius: 20px;
	text-align: center;
}

/* -----------クイックポストの設定----------- */

/* ボタンの設定 */
details.quickpost {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	padding: 15px;
	border: 2px solid var(--background-sub);
	border-radius: 50%;
	box-shadow: 2px 2px 0 var(--accent-sub), inset 2px 2px 0 var(--background-main);
	background-color: var(--accent-sub);
	color: var(--text-main);
	font-size: 0.8rem;
}

details.quickpost:hover {
	box-shadow: none;
	background-color: var(--accent-main);
	color: var(--background-main);
	transition: 0.5s;
}

details.quickpost[open] {
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
	background-color: var(--background-main);
	color: var(--text-main);
	transition: .5s;
}

summary {
	display: block;
	font-size: 1.5rem;
}

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

details .fa-xmark {
	display: none;
}

details[open] .fa-pen {
	display: none;
}

details[open] .fa-xmark {
	display: block;
	font-size: 2rem;
	text-align: end;
}

/* フォーム自体の設定 */
.postform {
	max-width: 600px;
	margin: 1rem auto 0;
}

.tegalogpost {
	width: 100%;
	margin-bottom: 10px;
	padding: 0.5rem 0.3rem;
	border: 1px solid var(--text-main);
	border-radius: 0;
	background-color: var(--background-main);
}

.line-control {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: baseline;
	gap: 5px;
}

.postbutton {
	width: 100%;
}

.decoBtns input[type="button"],
select,
label {
	margin: 1px 3px;
	padding: 6px 3px;
	color: var(--text-main);
	font-size: 0.8rem;
}

.decoBtns input[type="button"] {
	border: 1px solid var(--text-main);
	background-color: var(--background-button);
}

.decoBtns select {
	background-color: var(--background-button);
}

.decoBtns input[type="checkbox"] {
	-webkit-appearance: auto;
	appearance: auto;
	accent-color: var(--accent-main);
}


input[type="submit"] {
	padding: 2px 5px;
	border: none;
	border-radius: 0;
	background-color: var(--accent-main);
	color: var(--background-main);
	font-weight: bolder;
	font-size: 1rem;
	text-align: center;
}

input[type="submit"]:hover {
	background-color: var(--accent-sub);
	color: var(--text-main);
	transition: .5s;
}




/* -----------記事部分----------- */

.post-list {
	display: block;
}

.post-one {
	width: 100%;
	padding: 8px 15px 8px 15px;
	background-color: var(--background-main);
	border: 3px solid #aaaaaa;
	border-radius: 20px;
	font-size: 13px;
	line-height: 25px;
}

.date {
	margin: 50px auto 5px 5px;
	color: var(--background-sub);
	font-size: 1rem;
	font-family: 'Quicksand' 
}

.post-menu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 10px 3px;
	font-size: .75rem;
	gap: 10px;
}

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

.post-menu a:hover {
	color: var(--accent-sub);
}

.categories {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 10px 3px;
	font-size: .55rem;
	gap: 10px;
}

.categories a {
	color: var(--background-sub);
}

.categories a:hover {
	color: var(--accent-sub);
}

.categoryname.cat-info::before {
	display: inline-block;
	text-align: center;
	font-family: 'FontAwesome';
	content:'\f0a1';
}

.categoryname.cat-memo::before {
	display: inline-block;
	text-align: center;
	font-family: 'FontAwesome';
	content:'\f02d';
}

.categoryname.cat-murmur::before {
	display: inline-block;
	text-align: center;
	font-family: 'FontAwesome';
	content:'\f4ba';
}

iframe {
	max-width: 100%; !important;
}

/*  -----------ページナビ----------- */

.pagepn {
	font-size: 0.80rem;
	text-align: center;
	color: var(--background-main);
	padding: 30px 10px 10px 10px;
}

.pagepn a {
	padding: 10px;
}

/*  -----------フッター----------- */

footer {
	margin: 50px auto;
	font-size: .7rem;
	text-align: center;
}



/*  -----------装飾系----------- */

/* ▼URLが書かれた場合の装飾 自動リンクのはみ出しを防ぐ */
.url {
	word-break: break-all;
}


/* ▼埋め込み動画 */
.embeddedmovie {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.embeddedmovie iframe {
	width: 100%;
	height: 100%;
	margin: 15px 0;
}


/* B:太字(Bold) */
.decorationB {
	font-weight: bold;
}

/* D:削除(Delete) */
.decorationD {
	opacity: .5;
	text-decoration-color: var(--text-main);
	text-decoration-line: line-through;
}

/* E:強調(Emphasis) */
.decorationE {
	color: var(--accent-main);
	font-style: normal;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 50px;
}

/* I:斜体(Italic) */
.decorationI {
	font-style: italic;
}

/* Q:引用(Quote) */

.decorationQ {
	position: relative;
	width: fit-content;
	margin-top: 2px;
	margin-bottom: 2px;
	padding: 10px 20px;
	border: 1px solid var(--accent-main);
	background: var(--background-main);
}

.decorationQ::before {
	content: '';

}

.decorationQ:after {
	position: absolute;
	top: -1px;
	right: -1px;
	border-width: 0px 20px 20px 0;
	border-style: solid;
	border-color: var(--accent-main) var(--background-main) var(--accent-main);
	content: '';
}


/* S:小文字(Small) */
.decorationS {
	font-size: 10px;
	line-height: 22px;
}

/* T:極小文字(Tiny) */
.decorationT {
	font-size: 7px;
	line-height: 20px;
}

/* U:下線(Underline) */
.decorationU {
	text-decoration-color: var(--accent-sub);
	text-decoration-style: solid;
	text-decoration-line: underline;
}


/* 続きを読むボタン枠の装飾(共通) */
.readmorebutton {
	display: block;
	width: 100%;
	margin: 7px 1px;
	padding: 5px 0.5em;
	text-align: center;
}

/* 続きを読むボタン表面の装飾(共通) */
.readmorebutton:link,
.readmorebutton:visited {
	background-color: var(--accent-sub);
	color: var(--text-main);
}

/* 続きを読むボタンにマウスが載った際の装飾(共通) */
.readmorebutton:hover {
	background-color: var(--accent-main);
	color: var(--background-main);

}

/* 鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾 */
.passkeyform {
	display: block;
	margin: 0;
	padding: 0.6em;
	border: 1px solid var(--background-sub);
	background-color: var(--background-main);
}

/* ▼鍵違いエラーの表示 */
.passkeyerror {
	display: block;
	margin: 0 0 0.5em 0;
	padding: 0.35em 0.25em;
	background-color: crimson;
	color: white;
	font-weight: bold;
	line-height: 1;
}

/* ▼入力フォーム枠 */
.passkeybox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 2px;
}

/* ▼鍵入力欄 */
.passkeyinput {
	width: 10em;
}


/* 画像に関する設定（てがろぐ Ver 3.9.0以降対応） */
.nsfw img {
	filter: blur(5px) grayscale(1);
}