@charset "utf-8";

/* ……………………………………………………………………………………………………………… */
/* てがろぐ -Fumy Otegaru Memo Logger- シンプル日記スキン用スタイルシート for Ver 3.3.0 */
/* ……………………………………………………………………………………………………………… */
/* Table of Contents：
   -------------------
	■全体共通装飾
		▼リンクの装飾
		▼URLが書かれた場合の装飾
		▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字
		▼自由装飾用の装飾の例
		▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像
		▼埋め込み画像
		▼埋め込み動画

	■ページ最上部(ヘッダ)領域
		▼検索ボックス
		▼タイトル区画

	■入力フォームの表示領域
		▼本文入力区画
		▼投稿コントロール部分(ボタンや字数カウンタなど)
		▼投稿ボタン
		▼文字装飾ボタン群
		▼カテゴリ選択チェックボックス群

	■メイン(ログ掲載)領域
		▼表示対象の限定時などの「限定条件」表示行
		▼日付境界バー

	■投稿ボックス(一発言)ごとの表示
		▼ヘッダ
			▽先頭矢印
			▽投稿日時
			▽ボタンリンク
			▽カテゴリ名
			▽New!サイン部分
		▼投稿本文
			▽本文内に含まれるハッシュタグリンク

	■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾

	■ページナビゲーション領域
		▼ページ前後移動リンク群ボックス全体
		▼ページ番号リンク群ボックス全体
		▼限定解除リンク(＝HOMEに戻るリンク)

	■フリースペース領域

	■サブ領域
		▼ハッシュタグリスト区画
		▼日付別リスト区画
		▼カテゴリツリー区画
		▼新着投稿リスト区画
		▼カレンダー区画				new!
		▼汎用サブ区画

	■ページ最下部(フッタ)領域
*/

/* ============== */
/* ■全体共通装飾 */
/* ============== */
body {
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic","游ゴシック","YuGothic",sans-serif;
	background-color: #e4e2e2;
	background-image:
		linear-gradient(0deg, rgba(190,200,206,0.3) 1px, rgba(0,0,0,0) 0),
		linear-gradient(90deg, rgba(190,200,206,0.3) 1px, rgba(0,0,0,0) 0);
	background-size: 20px 20px;
	background-position: center;
}

	/* -------------- */
	/* ▼リンクの装飾 */
	/* -------------- */
	a:link, a:visited  { color: #313131;
		background: linear-gradient(90deg, transparent, #d60000, transparent) 
		bottom /var(--d, 0) 3px no-repeat;
		transition: .3s;
		text-decoration: none;}		/* 未・既訪問リンク */
	a:hover {  --d: 100%;}	/* マウスが載ったとき */

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

	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 */
	/* ---------------------------------------------------- */
	/* B:太字(Bold) */
	.decorationB {
		font-weight: bold;		/* 太字 */
	}
	/* D:削除(Delete) */
	.decorationD {
		color: #888;
		text-decoration-line: line-through;
		text-decoration-color: #605952;	/* 線の色 */
	}
	/* E:強調(Emphasis) */
	.decorationE {
		font-style: normal;
		font-weight: bold;
		color: #ac1e19;
	}
	/* I:斜体(Italic) */
	.decorationI {
		font-style: italic;		/* 斜体 */
	}
	/* Q:引用(Quote) */
	.decorationQ {
		border-left: 5px double #d8d6d5;
		margin: 1em 0.3em 1em 1em;
		padding: 0.75em 0.5em;
		font-style: italic;
		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: #f09a93;	/* 線配色 */
	}

	/* ---------------------- */
	/* ▼自由装飾用の装飾の例 */	/* 自由装飾は [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;	/* 下線 */
	}

	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像 */	/* この部分は、文字装飾領域内に含まれた画像を装飾するための記述です。 */
	/* ---------------------------------------------------- */
	/* 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(170, 236, 50, 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;	/* 右下に空色の影を付ける */
	}

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

	/* -------------- */
	/* ▼埋め込み動画 */
	/* -------------- */
	@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;
	}


/* ========================== */
/* ■ページ最上部(ヘッダ)領域 */
/* ========================== */

	/* -------------- */
	/* ▼検索ボックス */
	/* -------------- */
	.searchbox {
		float: right;		/* 右端に寄せる */
		text-align: right;	/* 右寄せにする */
	}

		/* ▽検索対象を限定するチェックボックス */
		.searchtarget {
			margin: 0;
			font-size: 0.85em;
			line-height: 1.3;
		}

		/* ………………………… */
		/* ※狭い画面用の上書き */
		/* ………………………… */
		@media all and (max-width: 480px) {
			.searchbox {
				float: none;		/* 狭いときは配置を標準に戻す */
				text-align: left;	/* 左寄せにする */
			}
		}

	/* -------------- */
	/* ▼タイトル区画 */
	/* -------------- */
	.pagetitle {
		margin: 0;
	}
		/* ▽タイトルのリンク */
		.pagetitle a {
			color: black;
			text-decoration: none;
		}
		.pagetitle a:hover {
			text-decoration: underline;
		}

	.pageguide {
		margin: 0;
	}


/* ======================== */
/* ■入力フォームの表示領域 */
/* ======================== */
.postform {
	background-color: rgba(0,0,0,0);
	padding: 1em 0;
	width: 800px;
	max-width: 100%;
	margin: 10px auto;
}
.postform p {
	margin: 10px auto;
}
	/* -------------- */
	/* ▼本文入力区画 */
	/* -------------- */
	.line-textarea {
		/* display: inline-block; */
	}

		/* ……………… */
		/* ▼本文入力欄 */
		/* ……………… */
		textarea.tegalogpost {
			font-size: 0.9rem;
			box-sizing: border-box;
			width: 800px;
			max-width: 100%;
			height: 4.3em;
			overflow-wrap: break-word;
			overflow: auto;
		}
			/* ▽プレースホルダ(※入力文字数ゼロの際だけ見える薄文字)の装飾 */
			textarea.tegalogpost:placeholder-shown { color: #777; }			/* 通常時 */
			textarea.tegalogpost:focus:placeholder-shown { color: #bbb; }	/* カーソルが入ったとき */
			textarea.tegalogpost:-ms-input-placeholder { color: #aaa; }		/* for IE */

		/* 横幅800px以下の環境の場合 */
		@media all and (max-width: 800px) {
			textarea.tegalogpost {
				font-size: 16px;	/* 文字サイズ */
			}
		}

	/* ------------------------------------------------ */
	/* ▼投稿コントロール部分(ボタンや字数カウンタなど) */
	/* ------------------------------------------------ */
	.line-control {
		margin: 0.25em 0;
		display: inline-block;
	}

	/* ------------ */
	/* ▼投稿ボタン */
	/* ------------ */
	.postbutton {
		font-size: 1rem;
		font-weight: bold;
	}

	/* ------------------ */
	/* ▼文字装飾ボタン群 */
	/* ------------------ */
	/* 掲載領域全体 */ .decoBtns { display: inline-block; margin-top: 0.5em; }
	/* 全ボタン装飾 */ .decoBtns input { min-width: 30px; min-height: 26px; margin:1px; background-color:#ecf9ec; border: 1px solid #aaa; cursor: pointer; border-radius: 3px; font-size: 12px; vertical-align: middle; }
	/* マウス載る際 */ .decoBtns input:hover { background-color:#e5f1fb; border-color: #0078d7; }
	/* 太字  :B */ .decoBtnB { font-weight: bold; }
	/* 取消線:D */ .decoBtnD { text-decoration: line-through; text-decoration-color: red; text-decoration-style: double; }
	/* 強調  :E */ .decoBtnE { font-weight: bold; color: blue; }
	/* 斜体  :I */ .decoBtnI { font-style: italic; }
	/* 引用  :Q */ .decoBtnQ {  }
	/* 小さめ:S */ .decoBtnS {  }
	/* 極小  :T */ .decoBtnT { font-size: 11px !important; }
	/* 下線  :U */ .decoBtnU { text-decoration: underline; text-decoration-color: red; }
	/* 文字色:C */ .decoBtnC { color: red; }
	/* 背景色:M */ .decoBtnM { color: blue; }

	/* ………………………… */
	/* ※狭い画面用の上書き */
	/* ………………………… */
	@media all and (max-width: 480px) {
		.line-textarea {
			display: block;
		}
	}

	/* -------------------------------- */
	/* ▼カテゴリ選択チェックボックス群 */	/* ★Ver 3.0.0以降で使用 */
	/* -------------------------------- */
	.catChecks { font-size:0.9em; padding-top: 0.5em; }
	.catChecks label { display:inline-block; cursor:pointer; margin:0 0.75em 0 0; }
	.catChecks label:hover { text-decoration:underline; }
	.catChecks input { min-width:0; min-height:0; margin-right:0.2em; }


/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */
.mainarea {
	margin: 0 auto;
	padding: 0;
	width: 800px;
	max-width: 100%;
}

	/* ------------------------------------------ */
	/* ▼表示対象の限定時などの「限定条件」表示行 */
	/* ------------------------------------------ */
	.situation {
		font-size: 1.143em;/* 文字の大きさ */
		font-weight: bold;/* 文字の太さ */
		color: #5C4747;/* 文字の色 */
		border-bottom: 2px dashed #D26466;/* 文字下の点線の太さ・種類・カラー */
		margin: 0.5em 0 1.5em;
		padding: 0.2em 0 0 1.7em;
		position: relative;
		}
		.situation::before {
		background: #d48789;/* 左上四角部分の色 */
		top: 0;/* 左上四角部分の位置 */
		left: 0.5em;/* 左上四角部分の位置 */
		height: 12px;/* 左上四角の大きさ */
		width: 12px;/* 左上四角の大きさ */
		position: absolute;
		transform: rotate(45deg);
 		-moz-transform: rotate(45deg);
 		-webkit-transform: rotate(45deg);
 		-o-transform: rotate(45deg);
  		-ms-transform: rotate(45deg);
    		content: "";
		}
		.situation::after {
		background:#d26466;/* 左下四角部分の色 */
		top: 0.8em;/* 左下四角部分の位置 */
		left: 0.2em;/* 左下四角部分の位置 */
		height: 8px;/* 左下四角の大きさ */
		width: 8px;/* 左下四角の大きさ */
		position: absolute;
		transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-webkit-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
		content: "";
		}
	.situation:empty { display: none; }	/* 限定表示がない場合 */

	/* -------------- */
	/* ▼日付境界バー */
	/* -------------- */
	.dateseparator {
		border-width: 1px 0px;
		border-style: dashed;
		border-color: #cec;
		color: #8ab77f;
		background-color: white;
		padding: 0.5em 0;
		margin: 1em;
		font-weight: bold;
	}

	/* ▼日付境界バーの表示文字列の先頭に付加する記号 */
	.dateseparator::before {
		content: '▽';
	}

	/* ▼日付境界バー内のリンク */
	.dateseparator a {
		display: inline-block;
		font-size: 0.6em;
		margin: 0 1em;
		font-weight: normal;
	}


/* ================================ */
/* ■投稿ボックス(一発言)ごとの表示 */		/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
/* ================================ */
.onelogbox {
	width: auto;
	margin: 3em 0;
	position: relative;
	background: #f6f5f4;
	border-left:4px dotted rgba(0,0,0,.1);
	border-right:4px dotted rgba(0,0,0,.1);
	box-shadow:0 0 5px rgba(0,0,0,.2);
	padding: 2em 1em;
	color: #313131;
}

	/* ------ */
	/* ▼装飾 */
	/* ------ */
	.masking-tape{
		position: absolute;
		top: -1em;
		left: 37%;
		width: 150px;
		height: 30px;
		max-width: 15%;
		background-size: 20px 20px;
		border-left: 2px dotted rgba(0,0,0,.1);
		border-right: 2px dotted rgba(0,0,0,.1);
		box-shadow: 0 0 5px rgb(0 0 0 / 20%);
		padding: 0.25em 2em;
		color: #65513f;
		transform: rotate(-3deg);
		}

/* ------------------------------------------------ */
	/* ▼付箋の色：投稿時刻によって配色を変更したい場合 */
	/* ------------------------------------------------ */
	/* ▽投稿が00～09秒の場合： */
	.sec00 .masking-tape, .sec01 .masking-tape, .sec02 .masking-tape, .sec03 .masking-tape, .sec04 .masking-tape, .sec05 .masking-tape, .sec06 .masking-tape, .sec07 .masking-tape, .sec08 .masking-tape, .sec09 .masking-tape 
	{ background-image: linear-gradient(-45deg, rgba(140, 212, 227,.4) 25%, transparent 25%, transparent 50%, rgba(140, 212, 227,.4) 50%, rgba(140, 212, 227,.4) 75%, transparent 75%, transparent 100%);  }

	/* ▽投稿が10～19秒の場合： */
	.sec10 .masking-tape, .sec11 .masking-tape, .sec12 .masking-tape, .sec13 .masking-tape, .sec14 .masking-tape, .sec15 .masking-tape, .sec16 .masking-tape, .sec17 .masking-tape, .sec18 .masking-tape, .sec19 .masking-tape
	{ background-image: linear-gradient(-45deg, rgba(155, 140, 227,.4) 25%, transparent 25%, transparent 50%, rgba(155, 140, 227,.4) 50%, rgba(155, 140, 227,.4) 75%, transparent 75%, transparent 100%);  }

	/* ▽投稿が20～29秒の場合： */
	.sec20 .masking-tape, .sec21 .masking-tape, .sec22 .masking-tape, .sec23 .masking-tape, .sec24 .masking-tape, .sec25 .masking-tape, .sec26 .masking-tape, .sec27 .masking-tape, .sec28 .masking-tape, .sec29 .masking-tape
	{ background-image: linear-gradient(-45deg, rgba(227, 140, 212,.4) 25%, transparent 25%, transparent 50%, rgba(227, 140, 212,.4) 50%, rgba(227, 140, 212,.4) 75%, transparent 75%, transparent 100%);  }

	/* ▽投稿が30～39秒の場合： */
	.sec30 .masking-tape, .sec31 .masking-tape, .sec32 .masking-tape, .sec33 .masking-tape, .sec34 .masking-tape, .sec35 .masking-tape, .sec36 .masking-tape, .sec37 .masking-tape, .sec38 .masking-tape, .sec39 .masking-tape 
	{ background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, transparent 25%, transparent 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, transparent 75%, transparent 100%);  }

	/* ▽投稿が40～49秒の場合： */
	.sec40 .masking-tape, .sec41 .masking-tape, .sec42 .masking-tape, .sec43 .masking-tape, .sec44 .masking-tape, .sec45 .masking-tape, .sec46 .masking-tape, .sec47 .masking-tape, .sec48 .masking-tape, .sec49 .masking-tape 
	{ background-image: linear-gradient(-45deg, rgba(212, 227, 140,.4) 25%, transparent 25%, transparent 50%, rgba(212, 227, 140,.4) 50%, rgba(212, 227, 140,.4) 75%, transparent 75%, transparent 100%); }

	/* ▽投稿が50～59秒の場合： */
	.sec50 .masking-tape, .sec51 .masking-tape, .sec52 .masking-tape, .sec53 .masking-tape, .sec54 .masking-tape, .sec55 .masking-tape, .sec56 .masking-tape, .sec57 .masking-tape, .sec58 .masking-tape, .sec59 .masking-tape 
	{ background-image: linear-gradient(-45deg, rgba(140, 227, 155,.4) 25%, transparent 25%, transparent 50%, rgba(140, 227, 155,.4) 50%, rgba(140, 227, 155,.4) 75%, transparent 75%, transparent 100%); }






	/* -------- */
	/* ▼ヘッダ */
	/* -------- */
	.onehaad {
		margin: 0;
	}
		/* …………… */
		/* ▽先頭矢印 */
		/* …………… */
		.arrow {
			color: #cec;
			font-size: 1.2em;
			vertical-align: middle;
		}

		/* …………… */
		/* ▽投稿日時 */
		/* …………… */
		.postdate {
			 	   float: right;
		}
			
			/* 日付 */
			.date {
				font-size: 0.9em;
			}
			/* 時刻 */
			.time {
				font-size: 0.85em;
			}

		/* ……………… */
		/* ▽カテゴリ名 */
		/* ……………… */
		.categories {
			font-size: 0.8em;				/* 文字サイズ */
			margin-right: 0.5em;			/* 右側の余白 */
		}
			/* ▽カテゴリリンク1つ */
			.categorylink {
				display: inline-block;
			}
			/* ▽カテゴリ間のセパレータ */
			.catseparator {
				display: inline-block;
				margin: 0 2px;			/* 左右に2pxの余白 */
				color: gray;			/* 文字色 */
			}


		/* ………………… */
		/* ▽ボタンリンク */
		/* ………………… */
		.buttonlink {
			vertical-align: middle;
			display: inline-block;
			text-decoration: none;
			border: 1px solid skyblue;
			border-radius: 1em;
			padding: 0.25em;
			width: 1em;
			height: 1em;
			line-height: 1;
			text-align: center;
			background-color: #f0faf0;
		}
		.buttonlink:hover {
			border-color: #08f;
			background-color: #08f;
			color: white;
		}

		/* …………………… */
		/* ▽New!サイン部分 */
		/* …………………… */
		.newsign {
			display: inline-block;
			color: #f55;
			font-size: 80%;
			margin-right: 0.35em;
		}

	/* ---------- */
	/* ▼投稿本文 */
	/* ---------- */
	.comment {
		margin: 0.5em 1em 1em;
		line-height: 1.5;
	}

		/* ……………………………………………… */
		/* ▽本文内に含まれるハッシュタグリンク */
		/* ……………………………………………… */
		.comment .taglink {
			display: inline-block;	/* インラインブロック化 */
			text-decoration: none;	/* 下線を消す */
			word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
		}
		/* ▼ハッシュタグリンクにマウスが載ったとき */
		.comment .taglink:hover {
			text-decoration: none;		/* 下線を引く */
		}

		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		/* ▼続きを読むリンク（ボタン） */		/* ※注：「続きを読む」機能は、JavaScriptが無効な閲覧環境では機能せず、その場合はボタンも表示されません。 */
		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		/* ▽ボタン枠の装飾(共通) */
		.readmorebutton {
			box-sizing: border-box;
			position: relative;
			width: 100%;
 			max-width: 100%;
			padding: 0.1em 1em;
			text-align: center;
		}
		/* ▽ボタン表面の装飾(共通) */
		.readmorebutton:link,
		.readmorebutton:visited {
			display: inline;
			background-image: linear-gradient(90deg, #ffcccc, #ffcccc); /* マーカーの色を指定 */
			background-repeat: no-repeat;
			background-position: left bottom; /* マーカーの発生位置を左下に設定 */
			background-size: 0 40%; /* マーカーの横幅 / 縦幅 */
			transition: all 0.5s ease; /* マーカーを引く速度 */
			cursor: pointer; /* ホバー時のカーソルをポインターにする */
			color: #8f7070; 
		}
		/* ▽ボタンにマウスが載った際の装飾(共通) */
		.readmorebutton:hover {
		background-size: 100% 40%; /* マーカーの横幅を100%にする */
	        color: #5f4b4b;
		}

		/* ▽開く（続きを読む）ボタン専用の装飾 */
		.readmorebutton.readmoreopen {
			font-size: 0.95em;		/* 文字サイズ */
		}

		/* ▽閉じる（畳む）ボタン専用の装飾 */
		.readmorebutton.readmoreclose {
			font-size: 0.75em;		/* 文字サイズ */
		}

/* ====================================================================== */
/* ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾 */
/* ====================================================================== */
.utilitylinks {
	margin: 2em 1em 1em 1em;
	padding: 0.5em;
	border: 1px dotted #7a7;
	border-radius: 1em;
	background-color: white;
	font-size: 0.9em;
}
.utilitylinks ul {
	color: darkgreen;
}


/* ========================== */
/* ■ページナビゲーション領域 */
/* ========================== */
.pagenavi {
	margin: 2.5em 0 0 0;		/* 外側の余白 */
	padding: 0.5em 0;			/* 内側の余白 */
	background-color: rgba(0,0,0,0);	/* 背景色 */
}
.pagenavi p {
	margin: 1em;
}

	/* ------------------------------------ */
	/* ▼ページ前後移動リンク群ボックス全体 */
	/* ------------------------------------ */
	.pagelinks {
		margin: 0.75em;		/* 外側の余白 */
	}

	/* ▼ページ移動リンクの文字 */
	.pagelinks a {
		font-weight: bold;
	}


	/* -------------------------------- */
	/* ▼ページ番号リンク群ボックス全体 */
	/* -------------------------------- */
	.pagenums {
		margin: 0.75em;		/* 外側の余白 */
	}

	/* ▼ページ番号リンクの数字 */
	.pagenums a.pagenumlink {
		background-image:none;
		margin: 0px 2px 0px 2px;	/* 外側の余白 */
		padding: 0.2em 0.5em;		/* 内側の余白 */
		font-size: 1em;				/* 文字サイズ */
		font-weight: bold;			/* 太字 */
	}
	/* ▽現在のページ番号の装飾 */
	a.pagenumhere {
		background: #fbf9f6;
		line-height: 1.3em;
		border: 3px solid #960000;
		border-bottom-right-radius: 6px;
 		border-bottom-left-radius: 6px;
		box-shadow: 0 0 0 4px #fbf9f6, 2px 1px 6px 2px rgba(10, 10, 0, 0.5);
		}
	/* ▽ページ番号リンクにマウスが載った際の装飾 */
	a.pagenumlink:hover {
		background-color: #960000;	/* 背景色 */
		color: white;				/* 文字色 */
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	/* ------------------------------------ */
	/* ▼限定解除リンク(＝HOMEに戻るリンク) */
	/* ------------------------------------ */
	.pagehome {
		font-weight: bold;
	}


/* ==================== */
/* ■フリースペース領域 */
/* ==================== */
.freespacearea {
	background-color: #cec;
	padding: 1em;
}
/* ▼見出し */
.freespacearea .cornertitle {
	font-weight: bold;
	margin: 0;
	color: darkgreen;
	text-shadow: 1px 1px 1px white;
}

	/* ▼フリースペースの編集リンク区画 */
	.freespacebottom {
		margin: 0;
		padding: 0;
		text-align: right;
	}

		/* ▽フリースペースの編集リンク */
		.freespaceedit {
			display: inline-block;
			border: 1px solid green;
			border-radius: 1em;
			padding: 3px 1em;
			background-color: white;
			text-decoration: none;
			font-size: 0.8em;
		}
		/* ▽フリースペースの編集リンクにマウスが載ったとき */
		.freespaceedit:hover {
			background-color: green;
			color: white;
		}

/* ========== */
/* ■サブ領域 */
/* ========== */
.subarea {
	margin: 1em 0px;
}

	/* ------------------------ */
	/* ▼ハッシュタグリスト区画 */
	/* ------------------------ */
	.hashtaglistarea {
		margin-left: auto;
		margin-right: auto;
		width: 800px;
		max-width: 100%;
		margin-top: 10px;
	}
	/* ▼見出し */
	.hashtaglistarea .cornertitle {
		font-weight: bold;
		margin: 0;
		color: #585;
		text-shadow: 1px 1px 1px white;
		border-bottom: 1px dashed #5a5;
	}
		/* ▽ハッシュタグリスト */
		.hashtaglist {
			position: relative;
			display: inline-block; 
			padding: 0.5em 1em;
			margin: 1em 0;
			background: #f4f4f4;
			border-left: solid 25px #e35f66;
    		}
        	.hashtaglist:before {
        		content:"";
			position: absolute;
			z-index: -1;/*影を下の層に持っていく*/
			bottom: 10px;
			display: block;
			width: 60%;
			height: 50%;
			box-shadow: -20px 10px 5px #999;
			left: 5px;
			transform:rotate(-3deg);
			}
		
		.hashtaglist p {
			margin: 0; 
			padding: 0;
		}
		.hashtaglist li {
			display: inline-block;
		}
		/* ▽ハッシュタグリスト内の該当件数 */
		.hashtaglist .num {
			font-size: 0.9em;
			color: #8a8181;
			margin-left: 0.25em;
		}

	/* ------------------ */
	/* ▼日付別リスト区画 */
	/* ------------------ */
	.datelistarea {
		margin: 0px 0px 0.5em 0px;
		padding: 1em;
		background-color: white;
		border: 1px solid #bdb;
		border-radius: 1em;
		display: inline-block;
		vertical-align: top;
		min-height: 7em;
		max-width: 48%;
		box-sizing: border-box;
	}
	/* ▼見出し */
	.datelistarea .cornertitle {
		font-weight: bold;
		margin: 0;
		color: #969;
		text-shadow: 1px 1px 1px white;
		border-bottom: 1px dashed #5a5;
	}
		/* ▽日付リスト(年単位) */
		.datelimitlist {
			margin: 0.5em 0;
			padding: 0 0 0 20px;
		}
		/* ▽日付リスト(月単位) */
		.datelimitsublist {
			margin: 0;
			padding: 0 0 0 10px;
			list-style-type: none;
			font-size: 0.95em;
		}
			/* ▽年表記が単独で存在する場合に、月表示を横に並べる */
			.datelimitlist .datelimitsublist .datelimit-month {
				display: inline-block;
				margin-right: 0.9em;
			}
			/* ▽年表記が単独で存在する場合に、月リンク内に含まれる年表記を非表示にする */
			.datelimitlist .datelimitsublist .year {
				display: none;
			}
		/* ▽日付リスト内の該当件数 */
		.datelimitlist .num {
			font-size: 0.85em;
			color: #66a;
			margin-left: 0.3em;
		}
		/* ▽日付リンク項目 */
		.datelistlink:hover {
			color: white;
			background-color: green;
			border-radius: 3px;
		}

		/* ▽日付プルダウンメニュー区画 */
		.datelimitbox {
			margin: 0.5em;
		}

		/* ▽昇順/降順選択ラジオボタン区画 */
		.datelimitboxoptions {
			display: block;
			font-size: 0.9em;
		}
		.datelimitboxoptions label {
			display: inline-block;
			margin-right: 0.5em;
		}
		.datelimitboxoptions input {
		}

	/* -------------------- */
	/* ▼カテゴリツリー区画 */
	/* -------------------- */
	.categoryarea {
		position: relative;
		width: 800px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		padding: 30px 0 10px 0;
		background-color: #e8ddbd; /*枠背景色*/
		box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 3px rgb(0 0 0 / 33%);
	}

		.categoryarea::before, 
		.categoryarea::after {
			position: absolute;
			content: '';
			top: 15px;
			width: 30px;
			border: 1.5px solid #C0C0C0; /*ホチキス*/
			border-radius: 20px;
			box-shadow: 0 -1px 2px #555;
			}

.categoryarea::before { left: 80px;}
.categoryarea::after { right: 80px;}

	/* ▼見出し */
	.categoryarea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
		color: #585;						/* 文字色 */
		text-shadow: 1px 1px 1px white;		/* 文字の影 */
	}
	.categoryTree {
	}
		/* ▽カテゴリツリー */
		.categoryTree ul {
		box-sizing: border-box;
		display: table;
		margin: 0 auto;
		padding: 0 5px 0 5px;
		width: 100%;
		text-align: center;
		}

				.categoryTree li {
					display: table-cell;
					min-width: 50px;
					}


				.categoryTree a {
					display: block;
					width: 100%;
					text-decoration: none;
					padding-bottom: 5px;
					}

		/* ▽カテゴリツリー内の該当件数 */
		.categoryTree .num {
			display: inline-block;
			margin-left: 0.4em;
			font-size: 0.9em;
			color: #8a8181;
		}

	/* ---------------- */
	/* ▼全文検索窓区画 */
	/* ---------------- */
	.searcharea {
		margin: 0px 0px 0.5em 0px;
		padding: 1em;
		background-color: white;
		border: 1px solid #bdb;
		border-radius: 1em;
		display: inline-block;
		vertical-align: top;
		min-height: 7em;
	}
	/* ▼見出し */
	.searcharea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
		color: #585;						/* 文字色 */
		text-shadow: 1px 1px 1px white;		/* 文字の影 */
		border-bottom: 1px dashed #5a5;
	}

		/* 検索窓 */
		.searcharea .searchbox {
			float: none;
			text-align: left;
		}

		/* ▽複合検索フォーム */
		#complexsearch {
			display: none;	/* 複合検索窓は、最初は非表示にしておく */
		}

			/* 検索オプションリスト */
			.searchoptions {
				font-size: 0.9em;
				margin: 0.75em 0 1em 0.5em;
				padding: 0 0 0 0.5em;
			}

			/* 項目名 */
			.solabel {
				display: inline-block;
				min-width: 5em;
			}

			/* セレクトボックス */
			.searchoptions select {
				max-width: 175px;
				overflow: hidden;
			}

	/* -------------------- */
	/* ▼新着投稿リスト区画 */
	/* -------------------- */
	.latestpostarea {
		margin: 0px 0px 0.5em 0px;
		padding: 1em;
		background-color: white;
		border: 1px solid #bdb;
		border-radius: 1em;
		display: inline-block;
		vertical-align: top;
		min-height: 7em;
	}
	/* ▼見出し */
	.latestpostarea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
		color: #585;						/* 文字色 */
		text-shadow: 1px 1px 1px white;		/* 文字の影 */
		border-bottom: 1px dashed #5a5;
	}
		/* ▽新着投稿グリスト */
		.latestpostlist {
			margin: 0;			/* 外側の余白量 */
			padding: 0.3em 0.5em 0.3em 1.2em;		/* 内側の余白量 */
			line-height: 1.25;		/* 行の高さ */
		}
			/* 各項目 */
			.latestpostlist li {
				margin: 0.75em 0;
			}
			/* タイトルリンク以外の項目 */
			.latestpostlist span {
				display: inline-block;
				font-size: 0.8em;
			}
				.latestpostlist .postdate { color: gray; }	/* 投稿日付 */
				.latestpostlist .posttime { color: gray; }	/* 投稿時刻 */
				.latestpostlist .username { color: #558855; }	/* 投稿者名 */
				.latestpostlist .userid   { color: #555588; }	/* 投稿者ID */
				.latestpostlist .postid   { color: gray; }		/* 投稿番号 */
				.latestpostlist .length   { color: gray; }	/* 本文文字数 */

	/* ---------------- */
	/* ▼カレンダー区画 */
	/* ---------------- */
	.calendararea {
		margin: 0px 0px 0.5em 0px;
		padding: 1em;
		background-color: white;
		border: 1px solid #bdb;
		border-radius: 1em;
		display: inline-block;
		vertical-align: top;
		min-height: 7em;
	}
	/* ▼見出し */
	.calendararea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
		color: #585;						/* 文字色 */
		text-shadow: 1px 1px 1px white;		/* 文字の影 */
		border-bottom: 1px dashed #5a5;
	}

		/* ▽カレンダーカバー */
		.calendarplace {
			margin: 0.5em 0;		/* 外側の余白量 */
			padding: 0;		/* 内側の余白量 */
			line-height: 1.5;		/* 行の高さ */
			overflow: auto;			/* はみ出る場合の処理 */
		}

		/* ▽カレンダーテーブル */
		.calendar {
			border-collapse: collapse;	/* 枠を結合 */
			border: 1px solid #8cd98c;	/* テーブル外側の枠線 */
		}
		.calendar th,
		.calendar td {
			border: 1px solid #ace3ac;	/* テーブル内側の枠線 */
			padding: 2px;				/* セル内側の余白 */
			text-align: center;			/* 中央寄せ */
			font-size: 0.9em;			/* 文字サイズ */
			line-height: 1;				/* 行の高さ */
		}
			/* 年月キャプション */
			.calendar caption {
				color: darkgreen;		/* 文字色 */
			}

			/* 曜日行 */
			.daysofweek th {
				background-color: #d9ffd9;
				font-weight: normal;
				padding: 6px 0;
				font-size: 0.8em;
				line-height: 1;
			}

			/* 日付数値の装飾（リンクになる場合も、ならない場合も共通） */
			.calendar a,
			.calendar .nolink {
				display: inline-block;	/* インラインブロック化 */
				border-radius: 50%;		/* 角丸 */
				padding: 0.4em;			/* 内側の余白 */
				width: 1.2em;			/* 横幅 */
				height: 1.1em;			/* 高さ */
				background-color: transparent;
			}

			/* 日付数値のリンク（※リンクになる場合だけの装飾） */
			.calendar td a {
				text-decoration: none;		/* 下線を消す */
				background-color: #ace3ac;	/* 背景色 */
				color: black;				/* 文字色 */
			}
			/* 日付数値のリンクにマウスが載った際 */
			.calendar td a:hover {
				background-color: green;	/* 背景色 */
				color: white;				/* 文字色 */
			}

			/* 今日の枠（カレンダー内での「今日」のセルだけの装飾） */
			.today {
				background-color: #ffffcc;	/* 背景色 */
			}

	/* -------------- */
	/* ▼汎用サブ区画 */
	/* -------------- */
	.multisubbox {
		margin: 0px 0px 0.5em 0px;
		padding: 1em;
		background-color: white;
		border: 1px solid #bdb;
		border-radius: 1em;
		display: inline-block;
		vertical-align: top;
		min-height: 7em;
	}
		/* ▽リスト装飾 */
		.multisubbox ul {
			margin: 0.5em;
			padding: 0.5em;
		}
		.multisubbox .sublist {
			margin: 0;
			font-size: 0.9em;
		}


/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */
footer {
	margin: 1em 0 0 0;
}
footer p {
	margin: 0;
	padding: 5px 0;
}

	/* ▼リンク群区画 */
	.backlink {
		border-width: 10px 0px;
		border-style: solid;
		border-color: rgba(0,0,0,0);
		padding: 1em;
	}

	/* Powered-by表記のデザイン */
	.poweredby { margin: 0; font-size: 0.8em; text-align: right; }


/* End of file */


img {
width: 400px;
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
	}

.menubar {
	text-align: center;
	padding: 2em 0 0.5em;
	}