@charset "utf-8";
@import '../css/common.css';


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

	■ページ最上部(ヘッダ)領域
		▼タイトル区画
		▼管理・投稿ボタン区画
		▼ヘッダ領域：画面の横幅が800px以上の場合
		▼ヘッダ領域：画面の横幅が480px以下の場合

	■入力フォームの表示領域
		▼本文入力欄
		▼投稿コントロール部分(ボタンや字数カウンタなど)
		▼投稿ボタン
		▼文字装飾ボタン群

	■段組構成（画面の幅が800px以上ある広い場合限定）
		▼大外枠の装飾
		▼メイン段の装飾
		▼サブ段の装飾

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

	■投稿ボックス(一発言)ごとの表示
		▼投稿情報カラム
			▼ユーザアイコン＆ユーザ名リンク
		▼投稿本文カラム
			▼投稿本文
			▼続きを読むリンク（ボタン）
			▼投稿日時などの情報表示
		▼画面幅が狭い場合の上書き装飾

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

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

	■サブ領域
		▼サブ領域の見出し(DASHBOARD)部分
		▼検索窓区画
		▼日付一覧リスト・日付検索区画
			▼日付リンクリスト区画
			▼日付プルダウンメニュー区画
		▼ハッシュタグリスト区画
		▼フリースペース区画

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


/* ============== */
/* ■全体共通装飾 */
/* ============== */
body {
	margin: 0;
	padding: 0;
	background-color: #191b22;
	color: #fafafa;
	box-sizing: border-box;
	font: normal 15px/22px Verdana,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo',sans-serif;
}
#wrap {
	width: 1200px;
	margin: 0 auto;
}

/* スクロールバーデザイン変更 */
::-webkit-scrollbar {
	width: 10px;
 }
 ::-webkit-scrollbar-track {
	background-color: #191b22;
}
 ::-webkit-scrollbar-thumb {
	background-color: #454957;
	border: 1px solid #454957;
	border-radius: 4px;
  }
 

	/* -------------- */
	/* ▼リンクの装飾 */
	/* -------------- */
	a {
		color: #2b90d9;
		text-decoration: none;
	}
	a:hover {
		color: #fafafa;
		text-decoration: underline;
	}
	/* -------------- */
	/* ▼水平線の装飾 */
	/* -------------- */
	hr {
		border: none;
		border-top: 1px solid #444b5d;
		background-color: #606984;
		width: 100%;	/* 横幅 */
		height: 0;	/* 高さ */
	}


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

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

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

/* ========================== */
/* ■ページ最上部(ヘッダ)領域 */
/* ========================== */
header {
	display: none;
/* 	margin: 0 0 1em 0; */
/* 	width: 100%;				横幅 */
/*	height: 70px; */
/*	display: block; */
/*	position: fixed; */
/*	z-index: 9999; */
/*	background-color: #191b22; */
}

	/* -------------- */
	/* ▼タイトル区画 */
	/* -------------- */
	.headtitle {
		line-height: 1;			/* 行の高さ */
	}
		.tegatter {
		margin-right: 4px;
		}
		/* ▽メインタイトル */
		.maintitle {
			padding: 0;
			margin: 0;			/* 外側の余白量 */
		}
		/* ▽メインタイトルのリンク */
		.maintitle a {
			text-decoration: none;	/* 下線を消す */
		}
		/* ▽メインタイトルのリンクにマウスが載ったとき */
		.maintitle a:hover {
			text-decoration: none;
		}

		/* ▽サブタイトル */
		.subtitle {
			display: inline-block;	/* インラインブロック化 */
			font-size: 0.55em;		/* 文字サイズ */
		}

		/* ▽タイトル下部の概要文 */
		.mainguide {
			margin: 3px 0 0 0;	/* 外側の余白量 */
			line-height: 1.2;	/* 行の高さ */
		}
	/* ---------------------- */
	/* ▼管理・投稿ボタン区画 */
	/* ---------------------- */
		.headcontrol {
			display: block;
			width: 100%;		/* 横幅 */
			font-size: 20px;
			margin-top: 1em;
		}
	
		/* ▼ボタンの包含ボックス */
		.control-links {
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			margin: 0;
		}
		.control-links a {
			display: block;
			width: auto;
			height: 30px;
			text-decoration: none;
			color: #606984;
			font-size: 16px;
		}
/* ======================== */
/* ■入力フォームの表示領域 */		/* ※これはQUICKPOST用です。新規投稿専用画面や編集画面ではCGI内蔵のCSSが使われるため、ここの記述は適用されません。 */
/* ======================== */
.postarea {
	margin-top: 1em;
}
.postform {
	background-color: inherit;	/* 背景色 */
	padding: 0;
}
.postform p {
	margin: 0;
}

	/* ------------ */
	/* ▼本文入力欄 */
	/* ------------ */
	textarea.tegalogpost {
		box-sizing: border-box;		/* サイズ解釈方法 */
		width: 100%;				/* 横幅 */
		height: 8em !important;				/* 高さ */
		overflow-wrap: break-word;	/* 折り返し方法 */
		overflow: auto;				/* はみ出した場合の処理 */
		/* font-size: 16px !important; */
		border: 0;
		border-radius: 4px;
		padding: 0.5em;
	}

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


/* ================================================= */
/* ■段組構成（画面の幅が800px以上ある広い場合限定） */		/* ※段組(2カラム構成)にしたくない場合は、この区画を全削除して下さい。 */
/* ================================================= */
@media all and (min-width: 800px) {

	/* -------------- */
	/* ▼大外枠の装飾 */
	/* -------------- */
	.contents {
		display: flex;
		flex-direction: row;		/* サイドバー(サブ側)を右側にしたい場合はこの値を「row」に、左側にしたい場合は「row-reverse」にして下さい。 */
		margin: 0;					/* 外側の余白量 */
		padding: 20px 0 0;					/* 内側の余白量 */
		width: 100%;				/* 横幅 */
		z-index: 1;
	}
	/* ---------------- */
	/* ▼メイン段の装飾 */
	/* ---------------- */
	.contents .mainarea {
		width: 56%;				/* 横幅 */
		height: 92dvh;
		overflow-y: scroll;
		vertical-align: top;	/* 上に寄せる */
		padding: 0 2em;
	}
	/* -------------- */
	/* ▼サブ段の装飾 */
	/* -------------- */
	.contents .subarea {
		width: 24%;				/* 横幅 */
		height: 92dvh;
		overflow-y: scroll;
		vertical-align: top;	/* 上に寄せる */
		padding: 0 1.5em;
	}
}


/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */
.mainarea {
	margin: 0;	/* 外側の余白量 */
	padding: 1em;		/* 内側の余白量 */
	background-color: #282c37;
	border-radius: 8px;
}

hr.pageTop {
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	border: none;
    border-top: 1px solid #282c37;
    background-color: #282c37;
    clear: both;
}

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

	/* ------------------ */
	/* ▼日付セパレータ行 */
	/* ------------------ */
	.dateseparator {
		background-color: #444b5d;
		padding: 0 0.5em;
	}

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

/* ================================ */
/* ■投稿ボックス(一発言)ごとの表示 */	/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
/* ================================ */
.onelogbox {
margin: 1em 0.25em;
}

	/* ---------------- */
	/* ▼投稿情報カラム */
	/* ---------------- */
	.onelogside {
		display: block;
	}

		/* ………………………………………… */
		/* ▼ユーザアイコン＆ユーザ名リンク */
		/* ………………………………………… */
		.usericonlink a:hover {
			text-decoration: none;
		}

			/* ‥‥‥‥‥‥‥ */
			/* ▼アイコン部分 */
			/* ‥‥‥‥‥‥‥ */
			.iconearea {
				display: block;
			}
			.iconarea img {
				width: 48px;
				height: 48px;
				vertical-align: bottom;
				border-radius: 4px;
				margin-right: 4px;
			}

			/* ‥‥‥‥‥‥‥ */
			/* ▼ユーザ名部分 */
			/* ‥‥‥‥‥‥‥ */
			.username {
				line-height: 0.1;
				font-size: 16px;
				color: #fafafa;
			}

			
			/* ‥‥‥‥‥‥‥ */
			/* ▼メモ番号部分 */
			/* ‥‥‥‥‥‥‥ */
			.memonum {
				font-size: 0.8em;	/* 文字サイズ */
			}

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

			/* ▽メモ番号のリンクにマウスが載ったとき */
			.memonum a:hover {
			text-decoration: underline;
			}

			/* ‥‥‥‥‥‥‥‥ */
			/* ▼New!サイン部分 */
			/* ‥‥‥‥‥‥‥‥ */
			.newsign {
				display: inline-block;	/* インラインブロック化 */
				font-size: 0.8em;		/* 文字サイズ */
			}

	/* ---------------- */
	/* ▼投稿本文カラム */
	/* ---------------- */
	.onelogbody {
	margin-top: 0.5em;
	}

		/* …………… */
		/* ▼投稿本文 */
		/* …………… */
		.comment {
			min-height: 4em;		/* 最低限確保する高さ */
		}

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

			/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
			/* ▼続きを読むリンク（ボタン） */		/* ※注：「続きを読む」機能は、JavaScriptが無効な閲覧環境では機能せず、その場合はボタンも表示されません。 */
			/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */

		/* ……………………………… */
		/* ▼投稿日時などの情報表示 */
		/* ……………………………… */
		.oneloginfo {
			font-size: 0.8em;		/* 文字サイズ */
			text-align: right;		/* 右寄せ */
		}

			/* ‥‥‥‥‥‥‥ */
			/* ▼投稿ユーザID */
			/* ‥‥‥‥‥‥‥ */
			.postuserid {
				color: #606984;
				font-size: 14px;
			}

			/* ‥‥‥‥‥‥‥‥‥ */
			/* ▼投稿日時のリンク */
			/* ‥‥‥‥‥‥‥‥‥ */
			.postdate a {
				display: inline-block;		/* インラインブロック化 */
			}

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

			/* ‥‥‥‥‥‥ */
			/* ▼編集リンク */
			/* ‥‥‥‥‥‥ */
			.editlink a {
				display: inline-block;	/* インラインブロック化 */
				font-size: 0.82em;		/* 文字サイズ */
			}

			/* ▽編集リンクにマウスが載ったとき */
			.editlink a:hover {
				color: white;			/* 文字色 */
			}


/* ====================================================================== */
/* ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾 */	/* 各投稿の個別ページでのみ表示される囲みナビ用の装飾です。 */
/* ====================================================================== */
.utilitylinks {
	margin: 2em 1em 1em 1em;	/* 外側の余白量 */
	padding: 0.5em;				/* 内側の余白量 */
	font-size: 0.9em;			/* 文字サイズ */
}
/* ▼ナビのリンクリスト */
.utilitylinks ul {
	list-style: none;
}


/* ========================== */
/* ■ページナビゲーション領域 */
/* ========================== */
.pagenavi {
	margin: 1em 0px;			/* 外側の余白 */
	padding: 0.5em 0px;			/* 内側の余白 */
	text-align: center;			/* 中央寄せ */
	text-align: center;			/* センタリング */
}

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

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

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

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

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


/* ========== */
/* ■サブ領域 */
/* ========== */
.subarea {
	margin: 0 0.5em 1em 1em;
	padding: 0;
	font-size: 0.9em;
	color: #606984;
}

	/* --------------------------------- */
	/* ▼サブ領域の見出し(DASHBOARD)部分 */
	/* --------------------------------- */
	.subhead {
		line-height: 1;						/* 行の高さ */
		text-align: left;					/* センタリング */
		font-weight: bold;					/* 太字 */
	}

	/* ------------ */
	/* ▼検索窓区画 */
	/* ------------ */
	.searcharea {
	margin: 0 0 1em 0;
	padding: 0.25em;
	}
	/* ▼見出し */
	.searcharea .cornertitle {
		margin: 0;
		font-weight: bold;
	}

		/* ▽検索フォーム */
		.searchbox {
		margin: 0;
		}
			.queryinput {
			font-size: 16px;
			width: 10em;
			height: 20px;
			margin: 0;
			vertical-align: top;
			}
			.searchbox .submitbutton {
				color: inherit;
			}
			.searchbox .submitbutton:hover {
				color: white;
			}

		/* ▽検索対象を限定するチェックボックス */
		.searchtarget {
		margin: 0;
		}

	/* ------------------------------ */
	/* ▼日付一覧リスト・日付検索区画 */
	/* ------------------------------ */
	.datelistarea {
	margin: 0 0 1em 0;
	padding: 0.25em;
	}
	/* ▼見出し */
	.datelistarea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
	}

		/* …………………………… */
		/* ▼日付リンクリスト区画 */
		/* …………………………… */
		/* ▽日付リスト(年単位) */
		.datelimitlist {
			display: block;
		}
		/* ▽日付リスト(月単位) */
		.datelimitsublist {
			list-style-type: none;	/* リストの先頭記号(なし) */
			font-size: 0.9em;		/* 文字サイズ */
		}
			/* ――――――――――――――――――――――――― */
			/* ▽年表記が単独で存在する場合に、月表示を横に並べる */	/* 縦に並べたい場合は、この区画を削除して下さい。 */
			/* ――――――――――――――――――――――――― */
			.datelimitlist .datelimitsublist .datelimit-month {
				display: inline-block;
				margin-right: 0.9em;
			}
			/* ―――――――――――――――――――――――――――――――――――― */
			/* ▽年表記が単独で存在する場合に、月リンク内に含まれる年表記を非表示にする */	/* 年表記も表示したい場合は、この区画を削除して下さい。 */
			/* ―――――――――――――――――――――――――――――――――――― */
			.datelimitlist .datelimitsublist .year {
				display: none;
			}

		/* ▽日付リスト内の該当件数 */
		.datelimitlist .num {
			font-size: 0.85em;		/* 文字サイズ */
		}

		/* …………………………………… */
		/* ▼日付プルダウンメニュー区画 */
		/* …………………………………… */
		.datelimitbox {
		margin: 0;
		}

		.datelimitbox select {
		font-size: 16px;
		width: auto;
		height: 26px;
		vertical-align: top;
		}

		/* ▽昇順/降順選択ラジオボタン区画 */
		.datelimitboxoptions {
			display: block;			/* ブロック化 */
			font-size: 0.9em;		/* 文字サイズ */
			margin-top: 0.5em;
		}

		/* ▽ラジオボタンのラベル */
		.datelimitboxoptions label {
			display: inline-block;	/* インラインブロック化 */
			margin-right: 0.5em;	/* 外側右の余白量 */
		}

	/* ------------------------ */
	/* ▼ハッシュタグリスト区画 */
	/* ------------------------ */
	.hashtaglistarea {
	margin: 0 0 1em 0;
	padding: 0.25em;
	}
	/* ▼見出し */
	.hashtaglistarea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
	}
		/* ▽ハッシュタグリスト */
		.hashtaglist {
			line-height: 1.5;		/* 行の高さ */
		}

		/* ▽ハッシュタグリストの1項目 */
		.hashtaglist li {
			display: inline-block;	/* インラインブロック化(横に並べる) */		/* ※ハッシュタグ一覧を横に並べたくない場合は、この行を削除して下さい。 */
		}

		/* ▽ハッシュタグリスト内の該当件数 */
		.hashtaglist .num {
			font-size: 0.9em;		/* 文字サイズ */
			margin-left: 0.25em;	/* 外側左の余白量 */
		}

	/* -------------------- */
	/* ▼フリースペース区画 */
	/* -------------------- */
	.freespacearea {
	margin: 0 0 1em 0;
	padding: 0.25em;
	border-bottom: 1px solid #282c37;	/* 下線 */
}
	/* ▼見出し */
	.freespacearea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
	}

		/* ▽フリースペースの本文 */
		.freespacebody {
			font-size: 14px;
		}

		/* ▽フリースペースの編集リンク */
		.freespaceedit {
			margin: 0;
			text-align: left;
			font-size: 12px;
		}
		.profileicon {
			display: flex;
			width: 90%;
		}
		.profileicon img {
			margin-right: 8px;
			width: 48px;
			height: auto;
			aspect-ratio: 1 / 1;
			border-radius: 4px;
		}

	/* ▼その他の情報表示 */
	.infotitle {
		font-size: 0.95em;
	}
	.infobody {
		text-align: right;
	}

/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */
footer {
	margin: 0 auto;
	width: 100%;				/* 横幅 */
	height: 40px;
	color: #93959a;					/* 文字色 */
	display: block;
	position: fixed;
}

	/* ▼管理操作リンク群 */
	footer .control-links {
		text-align: center;		/* 中央寄せ */
	}

	/* ▼戻るリンク */
	.backlink {
		text-align: center;		/* 中央寄せ */
		margin: 0 auto;
		padding: 0 0 1.5em;
	}

	/* 著作権表示(Poweredby)のデザイン */
	.poweredby {
		margin: 0 1em;
		padding: 0;
		font-size: 0.8em;
	}

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


/* End of file */