/* ………………………………………………………………………………………… */
/* てがろぐ -Fumy Otegaru Memo Logger- 標準スタイルシート for Ver 1.2.0 */
/* ………………………………………………………………………………………… */
/* Table of Contents：
   -------------------
	■全体共通装飾
	×ページ最上部(ヘッダ)領域
	■入力フォームの表示領域
	■段組構成（画面の幅が800px以上ある広い場合限定）
	■メイン(ログ掲載)領域
	■投稿ボックス(一発言)ごとの表示
	■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾
	×ページナビゲーション領域
	×サブ領域
		（検索窓区画、日付別リスト区画、ハッシュタグリスト区画、フリースペース区画など）
	■ページ最下部(フッタ)領域
*/


/* ============== */
/* ■全体共通装飾 */
/* ============== */
body {
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic","游ゴシック","YuGothic",sans-serif;
	margin: 0;
	padding: 0;
}

/* ▼リンクの装飾 */
a:link { color: #000; }		/* 未訪問リンク */
a:visited { color: #000; }	/* 既訪問リンク */
a:hover { color: #000; }	/* マウスが載ったとき */

.url {
	display:inline-block;
	word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
}


	/* ---------------------- */
	/* ▼管理・投稿ボタン区画 */
	/* ---------------------- */
	.headcontrol {
		display: table-cell;	/* タイトルとボタンで2段組 */
		text-align: right;		/* 右寄せ */
		vertical-align: middle;	/* 上下の中心寄せ */
		padding: 0 3px;			/* 内側の余白量 */
	}

	/* ▼ボタンの包含ボックス */
	.control-links {
		margin: 0;				/* 外側の余白量 */
	}

	/* ▼管理・投稿用リンクボタン */
	.headcontrol a {
		display: inline-block;		/* インラインブロック化 */
		text-align: center;			/* センタリング */
		border: 2px solid white;	/* 枠線 */
		border-radius: 0;		/* 枠の角丸 */
		padding: 0.5em;				/* 内側の余白量 */
		margin-bottom: 1px;			/* 外側下の余白量 */
		background-color: skyblue;	/* 背景色 */
		background-image: linear-gradient( 180deg, skyblue, #8080ff 25%, blue );	/* 背景グラデーション */
		color: white;				/* 文字色 */
		text-decoration: none;		/* 下線を消す */
		white-space: nowrap;		/* 折り返さない */
	}
	/* ▼管理・投稿用リンクボタンにマウスが載った際 */
	.headcontrol a:hover {
		text-decoration: underline;	/* 下線を引く */
		background-color: #000;	/* 背景色 */
		background-image: linear-gradient( 180deg, #ffffaa, #ffffcc 55%, white );	/* 背景グラデーション */
		color: blue;				/* 文字色 */
	}

	/* ----------------------------------------- */
	/* ▼ヘッダ領域：画面の横幅が800px以上の場合 */
	/* ----------------------------------------- */
	@media all and (min-width: 800px) {
		/* 投稿・管理ボタン区画 */
		.headcontrol {
			white-space: nowrap;	/* ヘッダ領域のボタン部分を横並びに強制する */
		}
	}

	/* ----------------------------------------- */
	/* ▼ヘッダ領域：画面の横幅が800px以上の場合 */
	/* ----------------------------------------- */
	@media all and (min-width: 800px) {
		/* 投稿・管理ボタン区画 */
		.headcontrol {
			white-space: nowrap;	/* ヘッダ領域のボタン部分を横並びに強制する */
		}
		/* タイトル区画 */
		.mainguide {
			line-height: 1;			/* 行の高さ */
		}
	}

	/* ----------------------------------------- */
	/* ▼ヘッダ領域：画面の横幅が480px以下の場合 */
	/* ----------------------------------------- */
	@media all and (max-width: 480px) {
		/* タイトル区画 */
		.subtitle {
			font-size: 0.35em;		/* 文字サイズ */
			vertical-align: middle;	/* 上下の中心寄せ */
		}
		.mainguide {
			font-size: 0.8em;		/* 文字サイズ */
			line-height: 1.25;		/* 行の高さ */
		}
	}


/* ======================== */
/* ■入力フォームの表示領域 */		/* ※これはQUICKPOST用です。 */
/* ======================== */
.postform {
	background-color: #eee;	/* 背景色 */
	margin: 1em;			/* 外側の余白量 */
	padding: 1em;			/* 内側の余白量 */
}
.postform p {
	margin: 0;
}
	/* ------------ */
	/* ▼本文入力欄 */
	/* ------------ */
	textarea.tegalogpost {
		border: 2px #ccc solid;	/* 枠線 */
		border-radius: 0.67em;		/* 枠の角丸 */
		background-color: #f8f5ee;	/* 背景色 */
		font-size: 0.9rem;			/* 文字サイズ */
		padding: 0.5em;				/* 内側の余白量 */
		margin-bottom: 0.25em;		/* 外側下の余白量 */
		box-sizing: border-box;		/* サイズ解釈方法 */
		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 */

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

	/* ------------ */
	/* ▼投稿ボタン */
	/* ------------ */
	.postbutton {
		display: inline-block;		/* インラインブロック化 */
		background: #000;			/* 背景色 */
		color: white;				/* 文字色 */
		font-size: 1rem;			/* 文字サイズ */
		font-weight: bold;			/* 太字 */
		text-decoration: none;		/* 下線を消す */
		padding: 0.25em 0.75em;		/* 内側の余白量 */
		border: 1px solid #d3edfb;	/* 枠線 */
		border-radius: 0;			/* 枠の角丸 */
	}
	/* ▼投稿ボタンにマウスが載ったとき */
	.postbutton:hover {
		background-color: #7ecef4;	/* 背景色 */
	}


/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */
.mainarea {
	margin: 1em;	/* 外側の余白量 */
	padding: 0;		/* 内側の余白量 */
}

	/* ------------------------------------------ */
	/* ▼表示対象の限定時などの「限定条件」表示行 */
	/* ------------------------------------------ */
	.situation {
		margin: 0 0 1em 0;	/* 外側の余白量 */
		font-weight: bold;	/* 太字 */
		color: #000;		/* 文字色 */
	}
	.situation:empty { display: none; }	/* 限定表示がない場合は存在自体を消す */



/* ================================ */
/* ■投稿ボックス(一発言)ごとの表示 */	/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
/* ================================ */
.onelogbox {
	display: table;					/* 投稿情報と投稿本文とで2段組 */
	border-collapse: separate;		/* 段の間隔を空ける */
	border-spacing: 0 0.75em;		/* 段の間隔量 */
	border-bottom: 1px #ccc dashed;	/* 下線 */
	width: 100%;					/* 横幅 */
}

	/* ---------------- */
	/* ▼投稿情報カラム */
	/* ---------------- */
	.onelogside {
		display: table-cell;	/* 投稿情報と投稿本文とで2段組 */
		vertical-align: top;	/* 上に寄せる */
		text-align: center;		/* センタリング */
		width: 96px;			/* 横幅 */
		min-width: 64px;		/* 最低横幅 */
	}

		/* ………………………………………… */
		/* ▼ユーザアイコン＆ユーザ名リンク */
		/* ………………………………………… */
		.usericonlink {
			display: block;				/* ブロック化 */
			margin: 0 3px;				/* 外側の余白量 */
			padding: 0.75em 0;			/* 内側の余白量 */
			color: #050;				/* 文字色 */
			background-color: #f5fff5;	/* 背景色 */
			border: 1px solid #e0eee0;	/* 枠線 */
			border-radius: 1em;			/* 枠の角丸 */
			font-size: 0.8em;			/* 文字サイズ */
			line-height: 1;				/* 行の高さ */
			text-decoration: none;		/* 下線を消す */
		}
		/* ▽マウスが載ったとき */
		.usericonlink:hover {
			border-color: #aea;			/* 枠線の色 */
			background-color: #ffc;		/* 背景色 */
		}

			/* ‥‥‥‥‥‥‥ */
			/* ▼アイコン部分 */
			/* ‥‥‥‥‥‥‥ */
			.iconarea {
				display: block;		/* ブロック化 */
			}

			/* ‥‥‥‥‥‥‥ */
			/* ▼ユーザ名部分 */
			/* ‥‥‥‥‥‥‥ */
			.username {
				display: block;		/* ブロック化 */
				padding-top: 4px;	/* 内側上の余白量 */
			}

			/* ‥‥‥‥‥‥‥ */
			/* ▼メモ番号部分 */
			/* ‥‥‥‥‥‥‥ */
			.memonum {
				margin: 0.3em 0;	/* 外側の余白量 */
				font-size: 0.8em;	/* 文字サイズ */
				color: gray;		/* 文字色 */
			}

			/* ▽メモ番号のリンク */
			.memonum a {
				text-decoration: none;	/* 下線を消す */
			}

			/* ▽メモ番号のリンクにマウスが載ったとき */
			.memonum a:hover {
				color: red;			/* 文字色 */
			}

			/* ‥‥‥‥‥‥‥‥ */
			/* ▼New!サイン部分 */
			/* ‥‥‥‥‥‥‥‥ */
			.newsign {
				display: inline-block;	/* インラインブロック化 */
				color: #f55;			/* 文字色 */
				font-size: 0.8em;		/* 文字サイズ */
				margin-right: 0.35em;	/* 外側下の余白量 */
			}

	/* ---------------- */
	/* ▼投稿本文カラム */
	/* ---------------- */
	.onelogbody {
		display: table-cell;	/* 投稿情報と投稿本文とで2段組 */
		vertical-align: top;	/* 上に寄せる */
	}

		/* …………… */
		/* ▼投稿本文 */
		/* …………… */
		.comment {
			margin-left: 0.2em;		/* 外側左の余白量 */
				font-size: 14px;		/* 文字サイズ */
				color: #666:
			line-height: 1.55;		/* 行の高さ */
			min-height: 4em;		/* 最低限確保する高さ */
		}

			/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
			/* ▼本文内に含まれるハッシュタグリンク */
			/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
			.comment .taglink {
				display: inline-block;	/* インラインブロック化 */
				margin: 0 3px;			/* 外側の余白量 */
				text-decoration: none;	/* 下線を消す */
				word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
			}
			/* ▼ハッシュタグリンクにマウスが載ったとき */
			.comment .taglink:hover {
				color: blue;					/* 文字色 */
				border-color: white;			/* 枠線の色 */
				text-decoration: underline;		/* 下線を引く */
			}

		/* ……………………………… */
		/* ▼投稿日時などの情報表示 */
		/* ……………………………… */
		.oneloginfo {
			margin: 0.75em 0 0 0;	/* 外側の余白量 */
			color: #999;			/* 文字色 */
			font-size: 0.7em;		/* 文字サイズ */
			text-align: left;		/* 左寄せ */
		}

			/* ‥‥‥‥‥‥‥ */
			/* ▼投稿ユーザID */
			/* ‥‥‥‥‥‥‥ */
			.postuserid {
				margin: 0 0.3em;	/* 外側の余白量 */
			}

			/* ▽ユーザIDのリンク */
			.postuserid a {
				text-decoration: none;		/* 下線を消す */
				color: inherit;				/* 文字色(継承) */
			}
			/* ▽ユーザIDのリンクにマウスが載ったとき */
			.postuserid a:hover {
				text-decoration: underline;	/* 下線を引く */
			}

			/* ‥‥‥‥‥‥‥‥‥ */
			/* ▼投稿日時のリンク */
			/* ‥‥‥‥‥‥‥‥‥ */
			.postdate a {
				display: inline-block;		/* インラインブロック化 */
				padding: 0 0.25em;			/* 内側の余白量 */
				color: #999;			/* 文字色 */
				text-decoration: none;		/* 下線を消す */
			}

			/* ▽投稿日時リンクにマウスが載ったとき */
			.postdate a:hover {
				text-decoration: underline;	/* 下線を引く */
			}

			/* ‥‥‥‥‥‥ */
			/* ▼編集リンク */
			/* ‥‥‥‥‥‥ */
			.editlink a {
				display: inline-block;	/* インラインブロック化 */
				font-size: 0.82em;		/* 文字サイズ */
				color: black;			/* 文字色 */
				text-decoration: none;	/* 下線を消す */
				background-color: #eee;	/* 背景色 */
				border: 1px solid #ccc;	/* 枠線 */
				border-radius: 0.5em;	/* 枠の角丸 */
				padding: 0 0.5em;		/* 内側の余白量 */
			}

			/* ▽編集リンクにマウスが載ったとき */
			.editlink a:hover {
				color: white;			/* 文字色 */
				background-color: #08f;	/* 背景色 */
				border-color: #08f;		/* 枠線の色 */
			}

	/* ------------------------------ */
	/* ▼画面幅が狭い場合の上書き装飾 */
	/* ------------------------------ */
	@media all and (max-width: 480px) {
		/* ▼投稿情報カラム */
		.onelogside {
			width: 64px;		/* 横幅 */
		}
		/* ▼投稿本文 */
		.comment {
			margin-left: 0.3em;	/* 外側左の余白量 */
			line-height: 1.45;	/* 行の高さ */
		}
	}


/* ====================================================================== */
/* ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾 */	/* 各投稿の個別ページでのみ表示される囲みナビ用の装飾です。 */
/* ====================================================================== */
.utilitylinks {
	margin: 2em 1em 1em 1em;	/* 外側の余白量 */
	padding: 0.5em;				/* 内側の余白量 */
	border: 1px solid #7a7;		/* 枠線 */
	border-radius: 1em;			/* 枠の角丸 */
	background-color: #efd;		/* 背景色 */
	font-size: 0.9em;			/* 文字サイズ */
}
/* ▼ナビのリンクリスト */
.utilitylinks ul {
	color: #ccc;			/* 文字色 */
}


/* ========================== */
/* ■ページナビゲーション領域 */
/* ========================== */
.pagenavi {
	margin: 2.5em 0px;			/* 外側の余白 */
	padding: 0.5em 0px;			/* 内側の余白 */
	text-align: center;			/* 中央寄せ */
	font-size: 0.8em;			/* 文字サイズ */
	background-color: #f8f5ee;	                /* 背景色 */
	text-align: center;			/* センタリング */
}

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

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

	}

	/* -------------------------------- */
	/* ▼ページ番号リンク群ボックス全体 */
	/* -------------------------------- */
	p.pagenums {
		margin: 0.5em;		/* 外側の余白 */
		font-size: 0.8em;	/* 文字サイズ */
	}

	/* ▼ページ番号リンクの数字 */
	.pagenums a.pagenumlink {
		margin: 0px 2px 0px 2px;	/* 外側の余白 */
		padding: 0.2em 0.5em;		/* 内側の余白 */
		font-weight: bold;			/* 太字 */
	}
	/* ▽現在のページ番号の装飾 */
	a.pagenumhere {
		text-decoration: none;		/* リンク装飾を消す */
		background-color: fff;	/* 背景色 */
		color: white;				/* 文字色 */
		border-radius: 1em;			/* 角丸 */
	}
	/* ▽ページ番号リンクにマウスが載った際の装飾 */
	a.pagenumlink:hover {
		text-decoration: none;		/* リンク装飾を消す */
		background-color: #c6deeb;	/* 背景色 */
		color: white;				/* 文字色 */
		border-radius: 0.3em;		/* 角丸 */
	}

	/* ------------------------------------ */
	/* ▼限定解除リンク(＝HOMEに戻るリンク) */
	/* ------------------------------------ */
	.pagehome {
		margin: 0.15em;		/* 外側の余白 */
		font-weight: bold;	/* 太字 */
	}


/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */
footer {
	margin: 1em 0px 0px 0px;	/* 外側の余白 */
	padding: 0.5em 0px;		/* 内側の余白 */
	background-color: #f8f5ee;	　　　　/* 背景色 */
	color: #666;			/* 文字色 */
	text-align: center;		/* 中央寄せ */
	}

	footer a:link    { color: #ccc; }  	/* リンク色 */
	footer a:visited { color: #ccc; }  	/* 訪問済み */
	footer a:hover   { color: #c6deeb; } 	/* マウスオーバー */
	footer a:active  { color: #ccc; }	/* アクティブ */


	/* 著作権表示(Poweredby)のデザイン */
	.poweredby { margin: 2em 1em 0px 1em; color: #ccc; font-size: 0.6em; }


/* End of file */