@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.0.0/dist/css/yakuhanjp.css");
@import url('https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP&family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP&family=Lato&display=swap');

/* スキン「sirason」配布用 */

*,*::before,*::after { box-sizing: inherit;}
html { box-sizing: border-box; scroll-behavior: smooth}
h1,h2,h3,h4,h5,img,p,ul,ol,li { margin: 0; padding: 0;}
img { border: none; max-width: 100%;}

/* -------------------- */
/* カスタム用色変更欄 */
/* -------------------- */
:root{
	--haikei-iro: #F9F9F9; /* 全体背景色 */
	--naiyou-iro: #fff; /* 記事内背景色 */
	--koi-iro: #5aaecc; /* 濃いアクセント色 */
	--usu-iro: #D1D1D1; /* 薄いアクセント色 */
	--mozi-iro: #595959; /* メイン文字色 */
	--usu-mozi-iro: #a5a0a0; /* ↑よりちょっと薄い文字色など */
	--siro-mozi: #fefefe; /* 濃い背景に乗せる白文字 */
	--link-iro: #f49d9c; /* リンクの色など */
	--hi-iro: #2d2d2d;; /* 日付リンクの色など */
	--link-hover-iro: #D1D1D1; /* リンクにマウス乗せたときの色と強調のマーカー色 */
	--iconfont: "Material Symbols Sharp"; /* アイコンフォントの名前 */
	--titlefont: 'Sawarabi Gothic', sans-serif; /* タイトルなどのフォントの名前 */
}

/* マテリアルシンボルの表示調整 */
.material-symbols-sharp { vertical-align: middle;}

/* 全体共通装飾 */
body {
	font-size: 1rem;
	line-height: 1;letter-spacing: 0em;
	font-family:  YakuHanJP, 'Noto Sans JP',"メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--haikei-iro);
	color: var(--mozi-iro);
text-align: justify;
overflow-wrap:break-word;
}

/* リンクの装飾 */
a { color: var(--link-iro); text-decoration: none;}
a:hover { color: var(--link-hover-iro); }

/* リストの装飾(余白調整) */
ul,ol{ margin: 0.3rem 0; padding-left: 1.5rem;}
/* ↓リストの飾りの色 */
ul.decorationL li::before{
	color: #7bbccd;
}



/* E:強調(Emphasis) */
.decorationE {
	font-style: normal;
    font-weight: bold;
    margin: 0 0.2em;
    padding: 0 0.2em;color:#f49d9c;	font-size: 1.1rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #E2F2F2 50%);font-family:'Noto Sans JP';
}

/* I:斜体(Italic) */
.decorationI {
	font-family: 'Hiragino Kaku Gothic ProN','游ゴシック';
	font-style: italic;	/* 斜体 */
}

/* Q:引用(Quote) */
.decorationQ {
    max-width: 800px;
    position: relative;
    padding: 1.5em 2.5em 1.5em 3.5em;
    color: #7f7f7f;
    background-color: #f2f2f2;
}

.decorationQ::before {
    display: inline-block;
    position: absolute;
    top: 1em;
    left: 1.5em;
    width: 2em;
    height: 2em;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%23ff8080'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
    content: '';
}

.decorationQ p {
    margin-top: 0;
}

.decorationQ p:last-of-type {
   margin-bottom: 0;
}



.decorationQ + br {
		display: none;	/* 引用直後の改行を無効化する */
	}



.decorationQ2 {
  border-bottom: solid 3px skyblue;
  position: relative;
}

.decorationQ2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffc778;
  bottom: -3px;
  width: 30%;
}

.decorationQ + br {
		display: none;	/* 引用直後の改行を無効化する */
	}





.deco-o {
  background: #9baec8; /*背景色*/
  padding: 0.7em;/*文字周りの余白*/
  color: #34495E;/*文字を白に*/
    line-height: 3.0;border-radius:10px;margin: 0.8em 0em;
	}

.deco-p {font-weight:  700; font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN",  "Yu Gothic Medium", "游ゴシック Medium","游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 background: linear-gradient(transparent 90%, #2b90d9 90%);color: #5aaecc;
	}

.deco-q {
font-size: 1.3em;	/* 文字サイズ */
  line-height: 1.7;
font-weight:700;background: linear-gradient(transparent 90%, #0078a2 90%);color: #000;
	}



.deco-r{font-weight:  700; 
       font-family:YakuHanJP, 'Noto Sans JP',"Lato","IBM Plex Sans JP",Gothic MB101,'Noto Sans JP',"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック体",  "Yu Gothic Medium", "游ゴシック Medium","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 1.5em;margin-bottom: 0.8rem;color: #2d2d2d;


	}


.deco-r:before{
    font-family:'FontAwesome';
	content:'\f058';color: #5aaecc;
	margin-right: 0.8rem;font-size: 1.5em;margin-bottom: 0.8rem;

	}



.deco-c {
display: block;
  text-align: center;

	}

.deco-m{font-weight:  700; 
font-family:YakuHanJP, 'Noto Sans JP',"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック体",  "Yu Gothic Medium", "游ゴシック Medium","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 1.3em;margin-bottom: 0.8rem;color: #2d2d2d;
	}

.deco-m:before{
    font-family:'FontAwesome';
	content:'\f0a9';color: #5aaecc;
	margin-right: 0.8rem;font-size: 1.3em;margin-bottom: 1.2rem;

	}


.deco-1 {
font-size: 1.3em;color: #f49d9c;
font-weight:  700; font-family:YakuHanJP, 'Noto Sans JP', sans-serif;

  padding: 0.25em 0.5em;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #E2F2F2;/*左線*/
}

.deco-2 {
  border-left: 5px solid var(--link-iro);color:#2d2d2d;;
  padding: 0px 10px;
  margin: 2em 0 1em;
font-size: 1.2em;
font-weight:  700; font-family:"Lato",YakuHanJP, 'Noto Sans JP', sans-serif;
}











/* T:極小文字(Tiny) */
.decorationT { font-size: 0.6rem;}

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

/* 埋め込み画像 */
div.imagebox{ margin: 0; padding: 0; line-height:1; font-size: 0;} /* 画像の下の謎の空白を消す */

/* 画像ボックス(FIGオプション指定時) */
.embeddedpictbox {
	margin: 0;
	padding: 0;
	display: inline-table;
	border-collapse: collapse;
	border: none;
	vertical-align: top;
}

/* キャプション */
.embeddedpictbox figcaption {
	padding: 0.2rem;
	display: table-caption;	
	caption-side: bottom;
	font-size: 0.8rem;
	color: var(--usu-mozi-iro);
	line-height: 1.5;
}

/* 画像ボックスに含まれる画像 */
.embeddedpictbox img { vertical-align: middle;}

/* 画像リンク */
.imagelink {
	display: inline-block;
	line-height: 1;				/* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
/* 		vertical-align: inherit;	同上 */
	font-size: 0;
	vertical-align: top;
}

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

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

/* NSFWマークを重ねる */
.imagelink.nsfw::after{
	content:"\e002";
	font-family: var(--iconfont);
	font-size: 60px;    
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}

/* 埋め込み動画 */
.embeddedmovie{
	display: inline-block;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 500px;
	height: auto;
}

/* 埋め込みTweet */	/* これはツイートが埋め込まれる処理「前」用の装飾です。実際に埋め込まれるツイートはTwitter側のiframeで装飾されますので、てがろぐ側では指定できません。 */
blockquote.twitter-tweet {
	background-color: #f8f8f8;
	border: 1px dashed #ddd;
	border-radius: 9px;
	margin: 0.3rem 0;
	padding: 1rem;
	font-size: 0.95rem;
	color: #999;
	text-shadow: 1px 1px 1px #fff;
}

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

/* 検索語のハイライト */
.searchword { font-weight: bold; text-decoration: underline 2px double var(--link-hover-iro);}

/* ヘッダーからフッターを囲むエリア */
.bodyarea{
	margin: 0 auto;
	padding: 0px;
	width: 100%;
	max-width: 800px; /* 全体の横幅 */
	background-color: var(--naiyou-iro);
}

/* ヘッダー */
header {
	position: sticky; /* 上に固定 */
	z-index: 100;
	top: 0;
	left: 0;
}
.headmenu {
	width: 100%;
	min-height: 50px;
	background-color:;
	margin: 0;
	padding: 0.3rem 1rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
}
.headmenu .material-symbols-sharp { font-size: 40px; color: var(--mozi-iro);}
.headmenu .material-symbols-sharp:hover { color: var(--link-hover-iro);}

/* 最初のli(ロゴ)だけ左寄せ */
.headmenu li:first-child { margin-right: auto;}
img.headlogo { height: 40px; vertical-align: bottom;}

/* HOMEへ戻るリンクのテキストを消してアイコンを挿入 */
.headmenu .homelink a { font-size: 0; color: var(--mozi-iro);}
.headmenu .homelink a::before {
	content:'\f015';
    font-family:'FontAwesome';
	font-size: 40px;
}
.headmenu .homelink a:hover { color: var(--link-hover-iro);}

/* 内容の幅と余白 */
main { width: 100%; padding: 1.3rem;}

/* メインタイトル */
.titlearea { padding: 0.8rem; line-height: 1.3;}
.maintitle,.subtitle { display: inline-block;}
.maintitle {
	font-size: 1.5rem;
	font-family: var(--titlefont);
	font-weight: bold;
	letter-spacing: 0.1rem;
	margin-right: 0.5rem;
}
.maintitlelink { color: var(--mozi-iro);}
.subtitle { font-size: 0.9rem; font-weight: bold; color: var(--usu-mozi-iro);}
.mainguide { margin-top: 0.5rem; font-size: 0.8rem; color: var(--usu-mozi-iro);}

/* QUICKPOST装飾 */
.postform {
	border: 1px solid var(--usu-mozi-iro);
	margin-bottom: 1.5rem;
	padding: 1rem;
}
.postform p { margin: 0;}

/* 本文入力欄 */
textarea.tegalogpost {
	border: 1px var(--usu-mozi-iro) solid;	/* 枠線 */
	background-color: #fefefe;	/* 背景色 */
	color: #242424;/* 文字色 */
	padding: 0.5rem;				/* 内側の余白量 */
	box-sizing: border-box;		/* サイズ解釈方法 */
	width: 100%;				/* 横幅 */
	height: 4.3rem;				/* 高さ */
	overflow-wrap: break-word;	/* 折り返し方法 */
	overflow: auto;				/* はみ出した場合の処理 */
	font-size: 1rem;
	font-family: YakuHanJP, 'Noto Sans JP',"メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	line-height: 1.5;
}

/* 投稿コントロール部分(ボタンや字数カウンタなど) */
/* 投稿ボタン */
.postbutton {
	display: inline-block;		/* インラインブロック化 */
	background: var(--koi-iro);
	color: var(--siro-mozi);
	font-size: 0.9rem;
	text-decoration: none;
	padding: 0.3rem 1rem;
	border: none;
	cursor: pointer;
}

/* 投稿ボタンにマウスが載ったとき */
.postbutton:hover { background-color: var(--usu-iro);}

/* 文字装飾ボタン群 */
/* 掲載領域全体 */ .decoBtns { display: inline-block; margin-top: 5px; }
/* 全ボタン装飾 */ 
.decoBtns input {
	min-width: 32px;
	min-height: 28px;
	margin:1px;
	color: #242424;
	background-color: #fefefe;
	border: 1px solid var(--usu-mozi-iro);
	cursor: pointer;
	border-radius: 0.2rem;
	font-size: 0.8rem;
	vertical-align: middle;
}
/* マウス載る際 */ .decoBtns input:hover{ border: 1px dotted var(--usu-mozi-iro);}
/* 太字  :B */ .decoBtnB { font-weight: bold; }
/* 取消線:D */ .decoBtnD { text-decoration: line-through;}
/* 強調  :E */ .decoBtnE { font-weight: bold; background: linear-gradient(transparent 60%, var(--link-hover-iro) 60%); }
/* 斜体  :I */ .decoBtnI { font-style: italic; font-family: 'Hiragino Kaku Gothic ProN','游ゴシック';}
/* 極小  :T */ .decoBtnT { font-size: 11px !important; }
/* 下線  :U */ .decoBtnU { text-decoration: underline;}
/* 文字色:C */ .decoBtnC { color: red !important; }
/* 背景色:M */ .decoBtnM { background-color: greenyellow !important;}

/* カテゴリ選択チェックボックス群 */
.catChecks { font-size:0.9rem; padding-top: 0.5rem; }
.catChecks label { display:inline-block; cursor:pointer; margin:0 0.75rem 0 0; }
.catChecks label:hover { text-decoration:underline; }
.catChecks input { min-width:0; min-height:0; margin-right:0.2rem; }

/* 投稿欄下部：「鍵付き」チェックボックスと「個別鍵」ボタンの間を詰める一時的なスタイル */
.funcUIs .catChecks { margin:0 0.75rem 0 0; }
.funcUIs .catChecks label { margin: 0; }

/*プルダウンの装飾*/
.decoBtns select {
	border:1px solid var(--koi-iro);
	padding: 0.3rem;
	background: #fefefe;
	color: #242424;
	box-shadow: none;
	cursor: pointer;
}

/*検索窓*/
.searchboxarea { margin-bottom: 1.5rem; text-align: right;}
.searchinputs {
	border: 1px solid var(--koi-iro);
	padding: 0.3rem 0.8rem;
	overflow: hidden;
}
.queryinput {
	border: none;
	outline: none;
	background-color: var(--naiyou-iro);
	color: var(--mozi-iro);
	font-size: 1rem;
	vertical-align: middle;
}

/* 検索アイコン */
.searchinputs::before {
	content:"\f002";
    font-family:'FontAwesome';
	font-size: 24px;
	display: inline-flex;
	vertical-align: middle;
	color: var(--mozi-iro);
}

/* 検索ボタンと全年月表示ボタン */
.searchbox .submitbutton,.datelimitbox .submitbutton {
	margin: 0 0 0 0.3rem;
	padding: 0.2rem 0.4rem;
	border: 0;
	background-color: var(--koi-iro);
	color: var(--siro-mozi);
	cursor: pointer;
}
.searchbox .submitbutton,.datelimitbox .submitbutton {
&:hover { background-color: var(--usu-iro);}}

/* 検索オプション行 */
.searchtarget.limitedsearch{
	font-size: 0.8rem;
	color: var(--usu-mozi-iro);
	margin-top: 0.3rem;
}
.searchtarget.limitedsearch input { vertical-align: middle;}

/* 表示対象の限定時などの「限定条件」表示行 */
.situation {
	margin-bottom: 1rem;
	font-size: 0.8rem;
	color: var(--usu-mozi-iro);
}
.situation:empty { display: none; }

/* 日付境界バー(フリースペースのタイトル装飾も一緒に) */
.dateseparator,.fstitle { padding: 2rem 2rem 1rem;}
.datetitle,.fixedlabel,.fstitle {
	display:flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: var(--koi-iro);
font-family:"Lato",YakuHanJP, 'Noto Sans JP', sans-serif;
	letter-spacing: 0.1rem;

	&::before,&::after {
	content: "";
	flex-grow:1;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, var(--koi-iro) 0, var(--koi-iro) 2px, transparent 0, transparent 50%);
	background-size: 8px 8px;}

	&::before { margin-right: 1rem;}
	&::after { margin-left: 1rem;}
}
/* 時系列順とファイル出力リンク(文字を消してアイコンを入れる) */
.datefunclinks {
	display: block;
	margin-top: 0.3rem;
	text-align: right;
}
.datereverse,.dateexport {
	font-size: 0;
	&::before {
    font-family:'FontAwesome';
	font-size: 20px;
	margin-right: 0.5rem;
	display: inline-block;}
}
.datereverse::before { content: "\f2f9";}/* 時系列順アイコン */
.dateexport::before { content: "\ED5F";}/* ファイル出力アイコン */

/* 投稿ボックス(一発言)ごとの表示 */
.onelogbox {
	margin: 0 auto 0.5rem;
	padding: 0.7rem 0.7rem 1rem;
	border-bottom: 0px dotted var(--usu-mozi-iro);
}

.oneloghead { margin: 0 0 0.8rem 0.2rem;}

/* ユーザーアイコンを丸くする */
img.usericon { border-radius: 50%; vertical-align: bottom;}

/* ユーザー名と投稿日時 */
.username {font-family:"Lato",YakuHanJP, 'Noto Sans JP', sans-serif;
	font-size: 1.3rem;
	color: var(--hi-iro);

}
.username { margin-right: 0.5rem;}
.username:hover {color: var(--link-hover-iro);}








/* 投稿本文 */
.comment { line-height: 1.8;
text-align: justify;
overflow-wrap:break-word;}

/* 先頭固定記事の装飾 */
.onelogbox.logstatus-fixed{
	border: 0px solid var(--koi-iro);
	background-image: linear-gradient(-135deg, var(--koi-iro) 10px, transparent 0);
}

/*続きを読むボタンと鍵フォーム送信ボタン*/
a.readmorebutton,.passkeysubmit {
	display: inline-block;
    margin: 0.5rem;
    border: 0;
    text-decoration: none;
    color: var(--siro-mozi);
    background-color: var(--koi-iro);
    text-align: center;
    padding: 0.1rem 1rem;
	cursor: pointer;
	&:hover { background-color: var(--usu-iro);}
}

/* 鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾 */
.passkeyform {
	display: block;
	margin: 0;
	padding: 0.6rem;
}

/* 鍵違いエラーの表示 */
.passkeyerror {
	display: block;
	color: var(--siro-mozi);
	background-color: var(--koi-iro);
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 0.5rem;
	padding: 0.3rem 0.8rem;
}

.passkeybox { display: block; }/* 入力フォーム枠 */
.passkeyguide { display: block; margin-bottom: 0.5rem; } /* 入力欄前のガイド文 */
.passkeyinput { /* 鍵入力欄 */
	border: 1px solid var(--usu-mozi-iro);
	width: 10rem;
	padding: 0.2rem;
	font-size: 1rem;
	background-color: #fefefe;
	color: #242424;
	vertical-align: middle;
}

/* カテゴリ名などの情報表示 */
.oneloginfo {
	margin: 1rem 0 0 0;
	text-align: right;	font-size: 1rem;
}

.oneloginfoc {
	margin: 0.2rem 0 0 0;
	text-align: right;	font-size: 0.9rem;
}

/* 編集アイコン */
.editlink { color: var(--mozi-iro);}
.editlink .material-symbols-sharp { font-size: 24px;}

/* 1記事内のカテゴリーの装飾 */
.categories { margin: 0 0.3rem 0  0.8rem;}
.categorylink,.catlink {
	display: inline-block;
	line-height: 1;
	border: 0px solid var(--link-hover-iro);
	color: var(--link-iro);
	margin: 0.1rem;
	padding: 0.3rem 0rem; 0.3rem  0.4rem;
}
.categorylink,.catlink { &:hover { border-color: var(--link-hover-iro);}}

/* 記事内と下のリストのカテゴリーリンクの項目前にアイコンを付ける */
.categorylink,.catlink { &::before {
	content:"\f07b";
    font-family:'FontAwesome';
	margin-right: 0.1rem;
	vertical-align: middle;
}}

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


/* ユーティリティリンク */
.utilitylinks { margin: 1.5rem 1rem 0 0; line-height: 1.65;}
.utilitylinks ul { margin: 0.3rem 0; padding-left: 1.5rem;}

/* ページナビゲーション領域 */
.pagenavi { margin-bottom: 3rem; text-align: center;}
.pagelinks,.pagehome { margin-top: 1.5rem;}
.pagenums { margin: 0.8rem;}

/* ページ番号リンクの数字 */
a.pagenumlink {
	display: inline-block;
	color: var(--koi-iro);
	border: 1px solid var(--koi-iro);
	width: 25px;
	height: 25px;
	line-height: 25px;
	margin-top: 0.3rem;
}

/* 現在のページ番号とマウスオーバー時の装飾 */	
a.pagenumhere,.pagenumlink:hover {
	color: var(--siro-mozi);
	background-color: var(--koi-iro);
}

/* サブ領域 */
.subarea { margin: 2rem auto 1rem;}

/* 各コーナーのタイトル */
.cornertitle {
	margin-bottom: 0.3rem;
	font-size: 1rem;
	font-weight: bold;
	font-family: var(--titlefont);
	letter-spacing: 0.1rem;
}

/* ハッシュタグリスト */
.hashtagarea { margin-bottom: 1.5rem; line-height: 1.5;}
.hashtaglist { margin: 0; padding: 0; }
.hashtaglist li { display: inline-block; margin-right: 0.3rem;} 
ul.hashtaglist .taglink::before { content: '\23';}/* 先頭の＃ */

/* 2カラム部分 */
.twocol {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));/* 各段落横幅が250px以下になると折り返す */
	gap: 0 1.5rem;
}

/* カテゴリー */
.categoryarea { margin-bottom: 1.5rem; line-height: 1.5;}
.categoryarea .cattree { list-style: none;}
.categoryarea .depth1{ padding-left: 0.8rem;}

/* カテゴリとタグリストの記事数まとめて装飾 */
.cattree,.hashtaglist { .num { font-size: 0.8rem; color: var(--usu-mozi-iro);}}

/* 年月リスト */
.dateboxarea { margin-bottom: 1.5rem; line-height: 1.5;}
.datelimitbox select {
	border:1px solid;
	padding: 0.3rem;
	background: var(--naiyou-iro);
	color: var(--mozi-iro);
	box-shadow: none;
	cursor: pointer;
}
.datelimitboxoptions { display: block; margin-top: 0.3rem;}

/* フリースペース */
.freespacearea { margin-bottom: 1.5rem; line-height: 1.5;}

/* フッター */
footer { padding: 1rem 4rem 1rem 1rem; text-align: right;}
.poweredby { font-size: 0.8rem;}
.kanri { margin-right: 0.5rem;}

/* ボタンエリア */
.btnarea {
	width: 100%;
	max-width: 800px;
	position: fixed;
	z-index: 101;
	bottom: 0;
	pointer-events:none;
}

/* 上に戻るボタンと管理ボタン */
.ue_btn,.kanri_btn {
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--koi-iro);
	pointer-events:auto;
	&:hover{ background-color: var(--usu-iro);}
}
.btnarea .material-symbols-sharp { color: var(--siro-mozi);}
.ue_btn .material-symbols-sharp { font-size: 32px;}
.kanri_btn { margin-bottom: 0.5rem;}






.datelink {
    display: flex;
    align-items: center;font-family:"Lato",YakuHanJP, 'Noto Sans JP', sans-serif;
	font-size: 1.5rem;
	color: var(--hi-iro);
}

.datelink:before,
.datelink:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}

.datelink:before {
    margin-right: 1rem;
}

.datelink:after {
    margin-left: 1rem;
}

/* ================================================================ */
/* てがろぐVer 4.5.5β以降で使える、カード型リンク用CSSの抜粋です。 */
/* お使いのスキンのCSSに追記するなどしてご活用下さい。              */
/* ================================================================ */

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

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