@charset "utf-8";
/* CSS Document */

:root {

	/* 色設定 */

	--os1: #F5B1AA;
	--os2: #A1D8E6;
	--main-text-color: #cdc1c8e3;
	--main-text-rgb:43, 59, 101;
	--sub-text-color: #11191f;
	--sub-bg-color: #fff8f7;
	--sub-bg-color2: #01010a2e;
	--accent: #688dae;
	--accent2: #f697ca;
	--accent3: #429590;
	--main-bg-design: #11191f;


	--light-text-color:#515151;
	--light-bg-color:#f0ebdf;
	--light-accent:#d4d0c7;
	--light-accent2:#98a335;
	--light-accent3:#D9EF1E;
	--light-text-rgb:rgb(196 157 122 / 17%);

		/* ほか */
	--border-radius:0.3rem;
	--font-primary: "Montserrat", "Zen Kaku Gothic New", YuGothic, "Yu Gothic", sans-serif;
    --font-alphanumeric: "Montserrat", YuGothic, "Yu Gothic";
    --font-icon: 'Font Awesome 6 Free';
	
}

@media (prefers-color-scheme: light) {
	body {
	  background-color: var(--light-bg-color);
	  color: var(--light-text-color);
	  background-image:none;
	}
	.icon{
		filter: hue-rotate(38deg);
	}
	.category a:hover, a.readmorebutton:hover{
		background-color:var(--light-accent2);
	}
	.postarea{
		background-color:var(--light-accent)
	}
	textarea.tegalogpost{
		background-color:var(--light-bg-color);
		color: var(--light-text-color);
	}
	article{
		background-color:transparent;
		border:1px solid var(--light-accent2);
	}
	a{
		color:var(--light-accent2);
		font-weight: bold;
	}
	a.readmorebutton{
		background-color:var(--light-accent3);
		color:var(--light-text-color);
		border:var(--light-accent3)

	}
	.oneloginfo a{
		color:var(--light-accent2);
	}
	span.categoryname{
		background-color:var(--light-accent2);
		color:var(--light-bg-color);
	}
	.comment a.taglink{
		color:var(--light-accent2);
	}
	nav.pagenums .pagenumhere{
		color:var(--light-bg-color);
		background-color:var(--light-accent2);
	}
	nav.pagenums a{
		color:var(--light-text-color);
		background-color: var(--light-accent);
	}
	b{
		color:var(--light-text-color);
		background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, var(--light-accent3) 50%);
	}
	em{
		color:var(--light-text-color);
    background: var(--light-accent3);
	}
	.deco-hr{
		border-top:1px solid var(--light-accent);
	 }
	aside h2{
		color:var(--light-accent2);
	}
	input.queryinput, select.datelimitpull, select.hashtagEasyInput, input.passkeyinput{
		border:1px solid var(--light-accent2);
		background-color:var(--light-accent);
	}
	input.submitbutton, input.passkeysubmit, .postarea input[type="button"], .postarea input[type="submit"], .postarea input[type="text"]{
		background-color:var(--light-accent2);
		color:var(--light-bg-color);
	}
	.category a{
		background-color:var(--light-accent2);
		color:var(--light-bg-color);
	}
	aside .hashtaglist li:before{
		color:var(--light-accent2);
	}
	aside .hashtaglist a{
		color:var(--light-text-color);
	}
	ul.decorationL li::before{
		color:var(--light-accent2);
	}
	figure{
		background-color: var(--sub-bg-color);
		display: inline-block;
		margin: 5px 0;
		padding: 5px 10px;
		vertical-align: top;
	}
}  

/*
	os1、os2 = 推したちの色を入力してください。Googleで「カラーピッカー」と検索すると色づくりが簡単です。

	main-text-color = メインの文字色です。os1、os2が暗い色なら#fffなど（白系）を、明るい色なら#333など（黒系）がオススメ。
	main-text-rgb = １つ上の色をRGB値に変換したものを入れます。Googleで「カラーピッカー」と検索してみてください。

	sub-bg-color = main-textが暗い色なら#fffなど（白系）を、明るい色なら#333など（黒系）がオススメ。
	sub-bg-color2 = １つ上の色の最後に80を足すのがオススメです。透明度のことで、00～FFの範囲を入力できます。

	accent = 推したちの目の色など、アクセントカラーをどうぞ。
	accent2 = １つ上の色の最後に60を足すのがオススメです。透明度のことで、00～FFの範囲を入力できます。


	main-bg-design = ページ全体の背景色です。
	1. なめらかなグラデーション
	linear-gradient(160deg, var(--os1) 20%, var(--os2) 80%) fixed;
	
	2. パキッとしたツートンカラー
	linear-gradient(160deg, var(--os1) 49.9%, var(--os2) 50%) fixed;
	
	3. 単色カラー
	#ffffff などのカラーコードを入れると単色にできます。
*/


/* ================================================================ */
/* てがろぐVer 4.5.5β以降で使える、カード型リンク用CSSの抜粋です。 */
/* お使いのスキンのCSSに追記するなどしてご活用下さい。              */
/* 次の正式版(Ver 4.6.0)では、標準添付各スキンに追加する予定です。  */
/* ================================================================ */

	/* ---------------------- */
	/* ▼カード型リンクの装飾 */
	/* ---------------------- */
	.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;		/* 行内の上下方向では中央配置 */
	}

	.comment a.url.cardlink[target~="_blank"]:before {
		content: none;
	}

	.comment a.url.cardlink {
		text-decoration: none;
	}

		/* ------------------------------------- */
		/* リンクカードの装飾(サイズ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;				/* 文字サイズ(小さめ) */
				}