@charset "utf-8";

/*フォント読み込み*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/*フォント*/
body {
     font-family: "Montserrat","Noto Sans JP", serif;
}

/*画像を画面内に表示させる*/
img {
   width: 100%;
   height: 100%;
}

/*URL折り返し*/
.comment a {
   overflow-wrap: break-word;
}

/*先頭固定記事下余白*/
.logstatus-fixed .comment {
    padding-bottom: 1.5rem;
    padding-top: 0;
}

/*装飾ボタンを整える*/
span.decoBtns{
	display: block !important;
        margin-bottom: 0.8rem;
}

.decoBtns input[type=button] {
       padding: 0.5rem;

}

.line-control input[type=checkbox]{
	background-color: #fff;
	appearance: auto;
}

.catChecks label{
	display: inline-block;
	vertical-align: top;
}

/*リストの装飾*/
.decorationL {
   list-style: circle;
   padding-left: 1rem;
}


/*極小サイズの文字サイズ*/
.decorationT {
   font-size: 70%;
}

/*引用*/
.decorationQ {
  padding: 1rem;
}

/*投稿するボタン*/
.postbutton {
    display: block;
    width: 100%;
    padding: 0.8rem;
    margin: 0.5rem 0;
    text-align: center;
    font-weight: 700;
}


/*ページャー*/
.number {
    margin-top: 2rem;
    text-align: center;
}

a.pagenumlink {
    display: inline-block;
    text-decoration: none;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: 50%;
}

/*非表示*/
.logstatus-fixed .side-item,
.dateseparator,
.utilitylinks,
.num
{
   display: none !important;
}

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

	/* ▽フラグ付き画像 (※設定や採用記法によって出力パターンが複数あるため、あらゆるパターンに対応させるべく同じスタイルを2重に指定しています。) */
	figure.nsfw {
		overflow: hidden;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	}
	.imagelink.nsfw {
		overflow: hidden;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	}
	img.nsfw {
		filter: blur(9px);	/* ぼかす */
	}

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

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

	/* ▼埋め込みツイートの横幅を強制的に制限 */
	div.twitter-tweet {
		max-width: 350px !important;
	}

	/* -------------------- */
	/* ▼検索語のハイライト */
	/* -------------------- */
	.searchword {
		font-weight: bold;
		background: linear-gradient(transparent 60%, #aaf0aa 60%);		/* 文字の下半分くらいにマーカーっぽい線を引く */
	}

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