@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Limelight&family=Zen+Maru+Gothic&display=swap');

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

html {
	font-size: 62.5%;
	}
	
a:link {color:#d97b24;text-decoration:none;}
a:visited {color:#d97b24;}
a:hover {color:#d97b24;}	

.url {word-break:break-all;}

body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #fbfaf9;
  background-image: linear-gradient(90deg, #ffe8d6 2px, transparent 2px), linear-gradient(#ffe8d6 2px, transparent 2px);
  background-position: 10px 10px;
  background-size: 32px 32px;
  color:#857162;
  font-size:1.4rem;
}

header {
	padding:4rem 0;
	text-align:center;
}

.top-img img{
	width:200px;
}

.site-title a {
	font-family: "Limelight", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#d97b24;
	text-decoration:none;
	font-size:4rem;
}

main {
	width:80%;
	display:flex;
	margin:0 auto 8rem;
}

.left-area {
	background-color:#ffffff;
	border-radius:3rem;
	width:75%;
	padding:6rem 6rem;
}

.onelogbox {
	margin:0 0 15rem;
}

.post-date {
	font-family: "Limelight", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#d97b24;
	font-size:2rem;
	margin:0 0 2rem;
}

.post-comment {
	letter-spacing:0.2em;
	line-height:2;
}


.pagenavi {
	text-align: center;
	margin:4rem 0 2rem;
}

.pagelinks {
	margin:0 0 2rem;
}

p.pagenums {
	display:grid;
    grid-template-columns: repeat(auto-fit, minmax(3rem, 3rem));
    gap: 2rem;
	place-content:center;
}

/* ▼ページ番号リンクの数字 */
.pagenums a.pagenumlink {
	display:flex;
	width:3rem;
	height:3rem;
	justify-content:center;
	align-items:center;
	border-radius:9999px;
	padding: 1rem;
	font-size: 1rem;
	text-decoration: none;
	border:1px solid #d97b24;
}

/* ▽現在のページ番号の装飾 */
a.pagenumhere {
	background-color:#d97b24;
	color:#ffffff
}
/* ▽ページ番号リンクにマウスが載った際の装飾 */
a.pagenumlink:hover {
}

.pagehome {
	}

	
.right-area {
	width:25%;
	padding:0 0 0 3rem;
}
.aboutarea {
	letter-spacing:0.3em;
	line-height:1.7;
}

ul.datelimitlist {
	margin:2rem 0 0;
	padding:0;
}

.datelimitlist .datelimitsublist .year {
	display: none;
}

.datelimitlist .num {font-size:1.3rem;letter-spacing:0.2em;}

li.datelimit-month {
	list-style-type:none;
}

footer {
	text-align:center;
}

.situation:empty { display: none; }


	.cardlink {
		display: inline-block;
		width: 100%;
		max-width: 500px;			/* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
		padding: 0 0.25em 0.5em 0;	/* 内側の余白量 */
		font-size: 0.9rem;			/* 文字サイズ */
		text-decoration: none;		/* リンク文字の下線を消す */
		vertical-align: middle;		/* 行内の上下方向では中央配置 */
	}

		/* ------------------------------------- */
		/* リンクカードの装飾(サイズS/L共通部分) */		/* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
		/* ------------------------------------- */
		/* カード外枠 */
		.cardlinkbox {
			border: 1px solid #ccc;		/* 枠線 */
			border-radius: 7px;			/* 角丸 */
			background-color: white;	/* 背景色 */
			display: flex;				/* 内部レイアウトのFlexbox化 */
		}
		/* (マウスが載ったとき) */
		.cardlinkbox:hover {
			background-color: #f5fff5;	/* 背景色 */
			border-color: #8c8;			/* 枠線色 */
		}
			/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
			.cardlinkimage {
				background-image: linear-gradient(-30deg, #8a8, #e0f0e0);		/* プレースホルダ的な背景グラデーション(※og:imageの画像指定が読み込まれたら、この値は上書きされます) */
				background-size: cover;					/* 背景画像で枠を埋める */
				background-position: center center;		/* 背景画像を中央に寄せる */
				background-repeat: no-repeat;			/* 背景画像を繰り返さない */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardlinktextbox {
				display: flex;				/* Flexbox化 */
				flex-direction: column;		/* 子要素を縦方向に並べる */
				padding: 0.5em 1em;			/* 内側の余白量 */
			}
				/* ▽リンクカードのテキスト枠内の3要素共通 */
				.cardlinktitle,
				.cardlinkdescription,
				.cardlinkurl {
					/* ↓表示行数を制限するための準備 (※システム側では文字数は制限せずに「記述されている全文字」をHTMLに出力しますので、表示分量を制限したい場合はCSSで制御する必要があります。) */
					display: -webkit-box;			/* -webkit-line-clampを使うために必要な記述1 ※A */
					-webkit-box-orient: vertical;	/* -webkit-line-clampを使うために必要な記述2 ※A */
					overflow: hidden;				/* 表示量を制限する場合に必須の記述 */
					/* ↓制限の仕様 */
					line-clamp: 1;				/* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
					-webkit-line-clamp: 1;		/* 1行だけ見せる (今のブラウザにはこちらが必要で、そのためには上記「※A」も必要) */
					text-overflow: ellipsis;	/* 省略記号(三点リーダー) */
				}
				/* リンクタイトル */
				.cardlinktitle {
					padding-bottom: 0.25em;		/* 内側下端の余白量 */
				}
				/* リンク概要文 */
				.cardlinkdescription {
					line-height:1.3;			/* 行の高さ */
					color:#555;					/* 文字色 */
					line-clamp: 2;				/* (既存指定の上書き) 最大2行まで見せる */
					-webkit-line-clamp: 2;		/* (既存指定の上書き) 最大2行まで見せる */
				}
				/* リンクドメイン */
				.cardlinkurl {
					color: #999;				/* 文字色 */
				}

		/* ----------------------------------- */
		/* リンクカードの装飾(サイズS用の追記) */		/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
		/* ----------------------------------- */
		.cardsize-S {
			flex-direction: row;				/* 画像とテキストは横に並べる(Flexbox) */
		}
			/* ▽リンクカード内の画像枠 */
			.cardsize-S .cardlinkimage {
				min-width: 100px;				/* 最小の横幅 */
				min-height: 100px;				/* 最小の高さ */
				border-radius: 6px 0 0 6px;		/* 左側だけ角丸 */
				flex-shrink: 0;					/* 枠サイズを自動縮小させない */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardsize-S .cardlinktextbox {
				border-left: 1px solid #ccc;	/* 左側の枠線 */
				justify-content:center;			/* Flexboxの上下方向での中央寄せ */
			}
				/* ▽リンクカードのテキスト枠内の3要素 */
				.cardsize-S .cardlinktitle { order: 2; }		/* タイトルは、2番目に表示 */
				.cardsize-S .cardlinkdescription { order: 3; }	/* 概要文　は、3番目に表示 */
				.cardsize-S .cardlinkurl { order: 1; }			/* ドメインは、1番上に表示 */

		/* ----------------------------------- */
		/* リンクカードの装飾(サイズL用の追記) */		/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
		/* ----------------------------------- */
		.cardsize-L {
			flex-direction: column;			/* 画像とテキストは縦に並べる(Flexbox) */
		}
			/* ▽リンクカード内の画像枠 */
			.cardsize-L .cardlinkimage {
				aspect-ratio: 1.91 / 1;		/* 画像枠の縦横比を指定= (横)1.91：(縦)1 */
				width: 100%;				/* 横幅は枠最大に拡げる */
				height: auto;				/* 高さは自動計算 */
				border-radius: 6px 6px 0 0;	/* 上側だけ角丸 */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardsize-L .cardlinktextbox {
				border-top: 1px solid #ccc;	/* 上側の枠線 */
			}
				/* ▽リンクカードのテキスト枠内の3要素 */
				.cardsize-L .cardlinktitle { font-weight: bold; }			/* 太字 */
				.cardsize-L .cardlinkdescription { min-height: 2.5em; }		/* 内容量が少ない場合でも一定の高さを確保 */
				.cardsize-L .cardlinkurl {
					border-top: 1px solid #ddd;		/* 上側の枠線 */
					margin-top:0.5em;				/* 上側の枠線より上の余白量 */
					padding-top:0.5em;				/* 上側の枠線より下の余白量 */
					font-size:0.75rem;				/* 文字サイズ(小さめ) */
				}

	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 */
	/* ---------------------------------------------------- */
	/* B:太字(Bold) */
	.decorationB {
		font-weight: bold;		/* 太字 */
	}
	/* D:削除(Delete) */
	.decorationD {
		color: #888;	/* 文字色 */
		text-decoration-line: line-through;	/* 取り消し線 */
		text-decoration-color: red;			/* 線の色 */
	}
	/* E:強調(Emphasis) */
	.decorationE {
		color: #050;	/* 文字色 */
		font-style: normal;
		font-weight: bold;
	}
	/* I:斜体(Italic) */
	.decorationI {
		font-style: italic;		/* 斜体 */
	}
	/* Q:引用(Quote) */
	.decorationQ {
		margin: 1em 0.3em 1em 1em;		/* 外側の余白(上→右→下→左) */
		padding: 0.75em 0.5em;			/* 内側の余白(上下→左右) */
		border-left: 5px double #5c5;	/* 左端の枠線 */
		background-color: #efe;			/* 背景色 */
		font-size: 0.95em;				/* 文字サイズ */
		display: block;					/* ※Ver 2.2.0以降必須の記述 */
	}
	.decorationQ::before,
	.decorationQ::after {
		content: '';			/* 標準で付加されてしまう引用符を無効にする */
	}
	.decorationQ + br {
		display: none;	/* 引用直後の改行を無効化する */
	}
	/* S:小文字(Small) */
	.decorationS {
		font-size: 0.8em;	/* 文字サイズ */
	}
	/* T:極小文字(Tiny) */
	.decorationT {
		font-size: 0.6em;	/* 文字サイズ */
	}
	/* U:下線(Underline) */
	.decorationU {
		text-decoration-line: underline;	/* 線位置 */
		text-decoration-style: double;		/* 線種類 */
		text-decoration-color: lime;		/* 線配色 */
	}

	/* ---------------------- */
	/* ▼自由装飾用の装飾の例 */	/* 自由装飾は [F:myclass:対象文字] の記法で <span class="deco-myclass">対象文字</span> のようにマークアップされる機能です。あらかじめclassを用意しておくことで自由な装飾を個数制限なく使い分けられます。 */
	/* ---------------------- */	/* 投稿者の自由な記述によって意図せずページが崩れてしまうのを防ぐために、適用されるclass名の先頭には必ず deco- が付加されます。 */
	.deco-scream {
		font-size: 1.67em;	/* 文字サイズ(1.67倍) */
	}

	.deco-code {
		display: inline-block;	/* インラインブロック化 */
		font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;	/* 等幅フォント */
		background-color: snow;	/* 背景色 */
		color: black;			/* 文字色 */
		border: 1px solid #eee;	/* 枠線 */
		border-radius: 3px;		/* 角丸 */
		padding: 0px 3px;		/* 内側の余白量 */
	}

	.deco-separator {
		display: block;					/* ブロック化 */
		border-bottom: 1px dotted gray;	/* 下線 */
	}

	.deco-flex {
		display: flex;				/* Flexbox */
		gap: 1em;					/* 余白量 */
		align-items: start;			/* 上寄せ */
		justify-content: start;		/* 左寄せ */
		flex-wrap: wrap;			/* 折り返し許可 */
	}

	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像 */	/* この部分は、文字装飾領域内に含まれた画像を装飾するための記述です。 */
	/* ---------------------------------------------------- */
	/* B:太字(Bold)に含まれる画像に対する装飾 */
	.decorationB img {
		box-shadow: 5px 5px 5px yellowgreen;		/* 右下に黄緑色の影を付ける */
	}
	/* D:削除(Delete)に含まれる画像に対する装飾 */
	.decorationD img {
		opacity: 0.5;	/* 半透明にする */
	}
	/* E:強調(Emphasis)に含まれる画像に対する装飾 */
	.decorationE img {
		outline: 8px ridge rgba(50, 236, 70, 0.6);		/* 浮き上がる淡緑色の枠線を付加 */
	}
	/* I:斜体(Italic)に含まれる画像に対する装飾 */
	.decorationI img {
		box-shadow: -5px 5px 5px pink;	/* 左下に黄緑色の影を付ける */
	}
	/* Q:引用(Quote)に含まれる画像に対する装飾 */
	.decorationQ img {
		vertical-align: middle;			/* 行の上下方向で真ん中に寄せる */
	}
	/* S:小文字(Small)に含まれる画像に対する装飾 */
	.decorationS img {
		border-radius: 15px;			/* 半径15pxで角丸にする */
		vertical-align: middle;			/* 行の上下方向で真ん中に寄せる */
	}
	/* T:極小文字(Tiny)に含まれる画像に対する装飾 */
	.decorationT img {
		max-height: 75px;				/* 高さを最大75pxに抑える */
		width: auto;					/* 横幅は縦横比を維持する */
		vertical-align: middle;			/* 行の上下方向で真ん中に寄せる */
	}
	/* U:下線(Underline)に含まれる画像に対する装飾 */
	.decorationU img {
		box-shadow: 5px 5px 5px skyblue;	/* 右下に空色の影を付ける */
	}

	/* -------------- */
	/* ▼埋め込み画像 */
	/* -------------- */
	/* ▽画像ボックス(FIGオプション指定時) */
	.embeddedpictbox {
		margin: 0;					/* 外側の余白を消す */
		padding: 0;					/* 内側の余白を消す */
		display: inline-table;		/* 横方向に並べる */
		border-collapse: collapse;	/* displayをinline-tableにする場合に必要 */
		border: 1px solid #e0eee0;	/* 枠線 */
		vertical-align: top;		/* 行内では上に寄せる */
	}
		/* キャプション */
		.embeddedpictbox figcaption {
			display: table-caption;		/* キャプションが画像幅から外に出ないようにする */
			caption-side: bottom;		/* キャプションの位置(上にしたければtop) */
			font-size: 0.8em;			/* 文字サイズ */
			text-align: center;			/* センタリング */
			background-color: #e0eee0;	/* 背景色 */
		}

		/* 画像ボックスに含まれる画像 */
		.embeddedpictbox img {
			vertical-align: middle;
		}

	/* ▽画像リンク */
	.imagelink {
		display: inline-block;
		line-height: 1;				/* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
		vertical-align: inherit;	/* 同上 */
	}

	/* ▽画像そのもの */
	.embeddedimage {
		max-width: 100%;	/* 横方向にはみ出ないようにする */
		max-height: 240px;	/* 大きくなりすぎないようにする */
		width: auto;	/* 画像サイズを固定したい場合はここに具体的なpx値を指定するのがお勧め */
		height: auto;	/* 高さを固定したい場合を除いて、ここは auto のままにするのがお勧め */
	}

	/* ▽フラグ付き画像 (※設定や採用記法によって出力パターンが複数あるため、あらゆるパターンに対応させるべく同じスタイルを2重に指定しています。) */
	figure.nsfw {
		overflow: hidden;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	}
	.imagelink.nsfw {
		overflow: hidden;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	}
	img.nsfw {
		filter: blur(9px);	/* ぼかす */
	}

	/* -------------- */
	/* ▼埋め込み動画 */
	/* -------------- */
	/* ▽[VIDEO:キャプション]URL記法で、キャプション付きで掲載される場合の外側要素 */
	figure.embeddedvideo {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column-reverse;
	}
		/* ▽[VIDEO:キャプション]URL記法で、キャプション付きで掲載される場合のキャプション部分 */
		.videotitle {
			text-align: center;
			background-color: #dcf3dc;
		}

	/* ▽[VIDEO]URL記法（または [VIDEO:キャプション]URL記法）で掲載されるvideo要素部分 */
	video.embeddedvideo {
		display: inline-block;
		max-width: 100%;
		width: auto;
		height: auto;
	}

	/* YouTube埋め込み */
	@media all and (max-width: 600px) {
		.embeddedmovie {
			display: inline-block;
			max-width: 100%;	/* はみ出ないようにする */
			width: auto;
			height: auto;
		}
	}

	/* --------------- */
	/* ▼埋め込みTweet */	/* これはツイートが埋め込まれる処理「前」用の装飾です。実際に埋め込まれるツイートはTwitter側のiframeで装飾されますので、てがろぐ側では指定できません。(ただし横幅を制限することはできます。→後述) */
	/* --------------- */
	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;
		text-shadow: 1px 1px 1px #fff;
	}

	/* ▼埋め込みツイートの横幅を強制的に制限 */
	div.twitter-tweet {
		max-width: 350px !important;
	}

	/* -------------------- */
	/* ▼検索語のハイライト */
	/* -------------------- */
	.searchword {
		font-weight: bold;
		background: linear-gradient(transparent 60%, #aaf0aa 60%);		/* 文字の下半分くらいにマーカーっぽい線を引く */
	}
	

@media (max-width:600px) {
	main {display:block;width:95%;}
	.left-area {width:100%;margin:0 0 4rem;padding:5rem 3rem;}
	.right-area {width:100%;padding:0 2rem;}
}