@charset "utf-8";

/* ………………………………………………………………………………………………………………… */
/* てがろぐ -Fumy Otegaru Memo Logger- ツイッターっぽい感じのスタイルシート for Ver 3.6.0 */
/* ………………………………………………………………………………………………………………… */
/* ※装飾面のカスタマイズ方法については、配布サイト内にある「カスタマイズ方法」ページ https://www.nishishi.com/cgi/tegalog/custom/ の『装飾のカスタマイズ方法』区画にある解説や記述例もご参照下さい。 */

/* 改装のとき変える色…#EA616F（リンク・主に続きを読むボタン）、#61C1BE;（リストの頭）、#DDf9f9（月名とかのdeco-sub背景、検索結果） /*

/* Table of Contents：
   -------------------
	■全体共通装飾
		×リンクの装飾
		×URLが書かれた場合の装飾
		▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字
		×自由装飾用の装飾の例
		×汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像
		▼埋め込み画像
		▼埋め込み動画

	■ページ最上部(ヘッダ)領域
		×タイトル区画
		×管理・投稿ボタン区画

	■入力フォームの表示領域
		×本文入力欄
		×投稿ボタン
		×文字装飾ボタン群
		×カテゴリ選択チェックボックス群

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

	■メイン(ログ掲載)領域
		▼表示対象の限定時などの「限定条件」表示行
		×日付セパレータ行

	■投稿ボックス(一発言)ごとの表示
		×ユーザアイコン表示
		▼投稿内容側
			▼投稿情報表示
			×ユーザ名領域
			×投稿日時領域
			×New!サイン部分
			▼カテゴリ名
			×投稿No.
			×文字数
			×編集ボタン
			▼投稿本文
				▼続きを読むリンク（ボタン）

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

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

	■サブ領域
		×フリースペース区画
		▼検索窓区画
		×ハッシュタグリスト区画
		▼カテゴリツリー区画
			▼カテゴリツリー内の各要素（アイコン・カテゴリ名・該当件数・概要等）	new!
		×日付別リスト区画
		×新着投稿リスト区画
		×カレンダー区画
		▼汎用ボックス

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


/* ============== */
/* ■カテゴリなしのときに非表示にする */
/* ============== */

body.onelog .subarea { display: none; } 


/* ============== */
/* ■全体共通装飾 */
/* ============== */



	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 */
	/* ---------------------------------------------------- */
	/* B:太字(Bold) */
	.decorationB {
		font-weight: bold;		/* 太字 */
	}
	/* D:削除(Delete) */
	.decorationD {
		text-decoration-line: line-through;
		text-decoration-color: darkblue;	/* 線の色 */
	}
	/* E:強調(Emphasis) */
	.decorationE {
		color: #ffAA88;
		font-style: normal;
		font-weight: normal;
	}
	/* I:斜体(Italic) */
	.decorationI {
		font-style: italic;		/* 斜体 */
	}
	/* Q:引用(Quote) */
	.decorationQ {
		margin: 1em 0.3em 1em 1em;
		padding: 0.75em 0.5em;
		background-color: #FAFAFA;
		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;
		color: #ffAA88;
	}
	/* T:極小文字(Tiny) */
	.decorationT {
		font-size: 0.6em;
	}
	/* U:下線(Underline) */
	.decorationU {
		text-decoration-line: underline;	/* 線位置 */
	}
	/* F:自由装飾 */
	.deco-sub {
		padding: 0px 10px 0px 2px;
		font-size: 1.5rem;
		font-weight: bold;
		line-height: 2.0;
		background-image: repeating-linear-gradient(-45deg,
		#DDf9f9 0, #DDf9f9 3px,
		transparent 3px, transparent 6px);
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 100% 50%;
	}
	/* L:リスト */
	.decorationL {
		line-height:1.3;
	}
	.onelogcontent Li {	/* onelogcontentクラスの中にあるli要素だけに適用 */
		padding-top:0.4rem;
		padding-bottom:0.4rem;
		padding-left: 1.3em; /* リストマーカー以外を1文字分右にずらす */ 
		position: relative;
	}
	.onelogcontent Li::before {	/* onelogcontentクラスの中にあるli要素だけに適用 */
		content: "";
		position: absolute;
		top: 0.7em;
		left: 0.5em;
		width: 0.3em;
		height: 0.3em;
		background-color: #61C1BE;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	/* 検索結果 */
	.searchword {
		font-weight: nomal;
		background:#DDf9f9;
	}

	/* -------------- */
	/* ▼埋め込み画像 */
	/* -------------- */
	.embeddedimage {
		max-width: 100%;	
		max-height: 100%;	
		height: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;
	}




/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */
.mainarea {
	padding: 0;
	background-color: white;
}

	/* ------------------------------------------ */
	/* ▼表示対象の限定時などの「限定条件」表示行 */
	/* ------------------------------------------ */
	.situation {
		color: #333;
	}
	.situation:empty { display: none; }	/* 限定表示がない場合はボックス自体を非表示にする。 */



/* ================================ */
/* ■投稿ボックス(一発言)ごとの表示 */	/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
/* ================================ */
.onelogbox {
	margin: 0;
	padding: 2em 0;
	display: table;
	width: 100%;
	box-sizing: border-box;
}

.situation + .onelogbox {
	/* 限定条件表示行の直下に表示される場合 */
}


	/* ------------ */
	/* ▼投稿内容側 */
	/* ------------ */

		/* -------------- */
		/* ▼投稿情報表示 */
		/* -------------- */
		.oneloginfo {
			margin: 0 0 0.3em 0;
		}

			.onelogctrl {
				margin: 0;
				float: right;
			}


		/* ------------ */
		/* ▼カテゴリ名 */
		/* ------------ */
		.categories {
			font-size: 0.8em;				/* 文字サイズ */
			margin-right: 0.25em;			/* 右側の余白 */
		}
			/* ▽カテゴリリンク1つ */
			.categorylink {
				display: inline-block;
				text-decoration: none;		/* リンクの下線を消す */
			}

		a.categorylink:link{
				color: #ccc;
			}
		a.categorylink:visited{
				color: #ccc;
			}

			/* ▽カテゴリ間のセパレータ */
			.catseparator {
				display: inline-block;
				margin: 0 1px;			/* 左右に1pxの余白 */
				color: gray;			/* 文字色 */
			}


		/* ---------- */
		/* ▼投稿本文 */
		/* ---------- */
		.onelogcontent {
			margin: 0;
		}
		.comment {
		}

		/* ▽投稿本文に含まれるURLリンク */
		.comment .url {
		}
		.comment .url:hover {
		}

		/* ▽投稿本文に含まれるハッシュタグリンク */
		.onelog .taglink {
			display: inline-block;
			color: #85973e;
			text-decoration: none;
			word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
		}
		/* ▽投稿本文に含まれるハッシュタグリンクにマウスが載ったとき */
		.onelog .taglink:hover {
			text-decoration: underline;
		}

			/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
			/* ▼続きを読むリンク（ボタン） */		/* ※注：「続きを読む」機能は、JavaScriptが無効な閲覧環境では機能せず、その場合はボタンも表示されません。 */
			/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
			/* ▽ボタン枠の装飾(共通) */
			.readmorebutton {
				display: inline-block;	/* インラインブロック化 */
				padding: 1px 0.2em;		/* 内側の余白 */
				margin-left: 1em;		/* 外側の余白 */
				border: 1px solid #ccd;	/* 枠線の装飾 */
				border-radius: 0.5em;	/* 枠線の角丸 */
			}
			/* ▽ボタン表面の装飾(共通) */
			.readmorebutton:link,
			.readmorebutton:visited {
				background-color: #eee;	/* 背景色(グラデーション非対応の環境のみ) */
				background-image: linear-gradient( 0deg, #ddd, #eee 55%, white );	/* 背景グラデーション */
				color: ff5353;		/* 文字色 */
				text-decoration: none;	/* リンク装飾を消す */
			}
			/* ▽ボタンにマウスが載った際の装飾(共通) */
			.readmorebutton:hover {
				background-image: none;		/* グラデーションなし */
				background-color: #eee;		/* 背景色 */
			}
			a.readmorebutton:hover {
				color: ff5353;			/* 文字色 */
				text-decoration: none;	/* リンク装飾を消す */
			}

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

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

/* ====================================================================== */
/* ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾 */	/* 各投稿の個別ページでのみ表示される囲みナビ用の装飾です。表示項目の取捨選択や詳細な装飾方法は https://www.nishishi.com/cgi/tegalog/custom/#customizecss-utilitylinkbox をご覧下さい。 */
/* ====================================================================== */
.utilitylinks {
	margin: 2em 1em 1em 1em;
	padding: 0.5em;
	border-radius: 1em;
	background-color: #eff8fe;
	font-size: 0.9em;
}
.utilitylinks ul {
	color: darkblue;
}


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

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

	/* ▼ページ移動リンクの文字 */
	.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;		/* リンク装飾を消す */
		background-color: #5bf;		/* 背景色 */
		color: white;				/* 文字色 */
		border-radius: 1em;			/* 角丸 */
	}
	/* ▽ページ番号リンクにマウスが載った際の装飾 */
	a.pagenumlink:hover {
		text-decoration: none;		/* リンク装飾を消す */
		background-color: #08f;		/* 背景色 */
		color: white;				/* 文字色 */
		border-radius: 0.3em;		/* 角丸 */
	}

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


/* ========== */
/* ■サブ領域 */
/* ========== */
.subarea {
	font-size: 0.9em;
	padding: 0;
	display: flex;
}

	/* ------------ */
	/* ▼検索窓区画 */
	/* ------------ */

		/* ▽複合検索フォーム */
		#complexsearch {
		margin: 10px;
		align: bottom;
		max-width:50%;
		font-size: 0.9em;
		}

			/* 検索オプションリスト */
			.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;
			}



	/* -------------------- */
	/* ▼カテゴリツリー区画 */
	/* -------------------- */
	.categoryTree {
		margin: 10px;
	}
		/* ▽カテゴリツリー */
		.categoryTree ul {
			padding-left: 10px;
			font-size: 0.9em;
		}
		/* ▽カテゴリツリー内の該当件数 */
		.categoryTree .num {
			display: inline-block;
			margin-left: 0.4em;
			font-size: 0.9em;
			color: #aaa;
		}

		/* ………………………………………………………………………………………… */
		/* ▼カテゴリツリー内の各要素（アイコン・カテゴリ名・該当件数・概要等） */
		/* ………………………………………………………………………………………… */
		/* ▽カテゴリアイコン */
		.categoryTree .caticon img {
			height: 1.2em;				/* アイコンの高さを1.2文字分に制限する */
			width: auto;				/* アイコンの横幅は自動調整する */
			vertical-align: text-top;	/* アイコンの上端位置をテキストの上端に合わせる */
		}

		/* ▽カテゴリ名 */
		.categoryTree .cattext {
		}

		/* 間隔調整：カテゴリアイコンとカテゴリ名が並ぶ際には間隔を空ける */
		.categoryTree .caticon + .cattext,
		.categoryTree .cattext + .caticon {
			margin-left: 3px;
		}

		/* ▽該当件数 */
		.categoryTree .num {
			display: inline-block;
			margin-left: 0.4em;
			font-size: 0.9em;
			color: #aaa;
		}

		/* ▽カテゴリ概要文 */
		.categoryTree .catdescription {
			font-size: smaller;
			color: #555;
		}


	/* -------------- */
	/* ▼汎用ボックス */
	/* -------------- */
	.subbox {
		margin: 0 0 1em 0;
		padding: 1em;
		font-size: 0.9em;
		background-color: #fcfcfc;
	}


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


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

	/* Powered-by表記のデザイン */

	.poweredby { margin: 0 1em; font-size: 0.8em;
		text-align: center;			/* 中央寄せ */ }
	}


/* End of file */