@charset "UTF-8";

body::before{
	background-size: cover;
	content: "";
	inset: 0;
	position: fixed;
	z-index: -1;
}

/* ===================================== */
/* 全体共通色設定 */
/* ===================================== */

/* 色基本設定 */
:root {
	--main-color: #111;    				/* メイン＋文字の色 */
	--bg-color: #DDD;     				/* 背景色 */
	--accent-color:  #777;				/* 濃いめグレー */
	--accent2-color:  #999;				/* 薄いグレー */
	--link-color: #0d4680;				/* 濃いめブルー */
	--link-hover-color: #111; 
	--midashi-font: josefin-sans, sans-serif; 	/* 見出しの欧文書体 */
	}

/* 基本のリンク設定 */
a:link    { color: var(--link-color); text-decoration: none; font-weight: 700; }
a:active  { color: var(--link-color); text-decoration: none; font-weight: 700; }
a:visited { color: var(--link-color); text-decoration: none; font-weight: 700; }
a:hover   { color: var(--link-hover-color); text-decoration: none; font-weight: 700; }

/* 記事周りの色 */
article,
article.logstatus-fixed,
.main,
.contents,
.mainarea,
.nodata,
.nolist {
	background-color: var(--bg-color);
	color: var(--main-color);
	}

/* リストの飾りの色 */
ul.decorationL li::before{
	color: var(--accent-color);
	}

ul.cattree li{
	border-bottom: solid 0.1rem var(--main-color);
	}

/* ↓強調文字のマーカー */
article em{
	font-style: normal;
	background:linear-gradient(transparent 60%, #ffffff 60%);
	}

/* 検索窓のプレースホルダーの色 */
.searchbox input.queryinput::placeholder{
	color:  var(--main-color);
	}

/* 検索窓の実線 */
.searchbox{
	border: none;
	}

input.passkeyinput{
	background-color: #fff;
}


/* ===================================== */
/* ページ基本設定		 */
/* ===================================== */

.clearfix {zoom:1;}
.clearfix:after { content: ""; display: block; clear: both;}

html {
	font-size: 14px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	}

body{
	width:100%;
    	font-family: "ryo-gothic-plusn", sans-serif;
    	font-weight: 400;
    	font-style: normal;
	font-size: 1rem;
	line-height: 1.7rem;
	background-color: var(--bg-color);
	color: var(--main-color);
	}
	
/* テキスト設定 */
h1 {
	font-family: var(--midashi-font);
	font-size: 3rem;
	font-weight: 700;
	color: var(--main-color);
	letter-spacing: 0.1rem;
	padding-top: 2rem;
	padding-bottom: 1rem;
	align: center;
	}


h2 {
	font-weight: 700;
	font-size: 2rem;
	color: var(--main-color);
	letter-spacing: 0.1em;
	margin-top: auto;
	padding-bottom: 1.5rem;
	}


h3 {
    	font-weight: 700;
	font-size: 1.2rem;
	color: var(--main-color);
	letter-spacing: 0;
	padding-bottom: 0.8rem;
	}
	
.headtitle,
.pagenavi {
	background-color: var(--bg-color);
	color: var(--main-color);
	}

.headtitle:link{
	color: var(--main-color);
	}
	
.headtitle:hover{
	color: var(--link-color);
	}
	
.pagenavi {
	border: none;
	}

/* ===================================== */
/* ヘッダー設定		 */
/* ===================================== */

.blogtitle {
	font-family: var(--midashi-font);
	font-size: 3rem;
	font-weight: 700;
	color: var(--main-color);
	letter-spacing: 0.1rem;
	padding-top: 2rem;
	padding-bottom: 1rem;
	align: center;
	}

.blogtitle a:link,
.blogtitle a:visited {
	color: var(--main-color);
	}
	
.blogtitle a:hover{
	color: var(--link-color);
	}

/* ===================================== */
/* 投稿フォーム設定 */
/* ===================================== */

.postarea{
	background-color: var(--bg-color);
	}

/* ↓投稿フォームの背景色 */
form.postform textarea{
	background-color: var(--bg-color);
	}

/* 投稿フォームのボタンの色 */
.line-control input,
.changelink{
	background-color: #fff;
	color: var(--main-color);
	}

.postform {
	background-color: var(--bg-color);
	margin: 2rem;			/* 外側の余白量 */
	padding: 1rem;			/* 内側の余白量 */
}

textarea.tegalogpost {
	border: 0.1rem solid var(--main-color);
	border-radius: 0;
	background-color: #fff;
	font-size: 1rem;
	padding: 0.5rem;	
	margin-bottom: 1rem;
	box-sizing: border-box;	
	width: 100%;	
	height: 6rem;
	overflow-wrap: break-word;	/* 折り返し方法 */
	overflow: auto;			/* はみ出した場合の処理 */
	}
	
.postbutton {
	display: inline-block;			/* インラインブロック化 */
	background-color: var(--main-color);	/* 背景色 */
	color: #fff;				/* 文字色 */
	font-size: 1rem;			/* 文字サイズ */
	font-weight: 700;			/* 太字 */
	text-decoration: none;			/* 下線を消す */
	padding: 0.25em 0.75em;			/* 内側の余白量 */
	border: solid 0.1rem var(--main-color);	/* 枠線 */
	border-radius: 0;			/* 枠の角丸 */
	}

.postbutton:hover {
	background-color: var(--main-color);	/* 背景色 */
	color: #fff;
	}

/* -------------------------------- */
/* 文字装飾機能 */
/* -------------------------------- */
/* 全ボタン装飾 */
.decoBtns input { 
	min-width: 32px;
	min-height: 28px;
	margin:0.2rem;
	padding: 0 0.3rem;
	background-color: var(--main-color);
	color: var(--bg-color);
	border: 1px solid var(--main-color);
	cursor: pointer;
	border-radius: 0;
	font-size: 1rem;
	vertical-align: middle;
	}
	
/* マウス載る際 */ 
.decoBtns input:hover {
	background-color: #fff;
	border-color: var(--main-color);
	color: var(--main-color);
	}

/* D:削除(Delete) */
.decorationD {
	color: var(--main-color);
	text-decoration-line: line-through;		/* 取り消し線 */
	text-decoration-color: var(--main-color);	/* 線の色 */
	}
/* E:強調(Emphasis) */
.decorationE {
	color: var(--accent-color);
	font-style: normal;
	font-weight: 700;
	}
	
/* U:下線(Underline) */
.decorationU {
	text-decoration-line: underline;			/* 線位置 */
	text-decoration-style: double;				/* 線種類 */
	text-decoration-color: var(--accent-color);		/* 線配色 */
	}


/* 続きを読むボタン */
/* ▽ボタン枠の装飾(共通) */
.readmorebutton {
	display: inline-block;	/* インラインブロック化 */
	padding: 0 0.5rem;	/* 内側の余白 */
	margin: 0 0.1rem;	/* 外側の余白 */
	border: 1px solid var(--main-color);	/* 枠線の装飾 */
	border-radius: 0;
	}
	
/* ▽ボタン表面の装飾(共通) */
.readmorebutton:link,
.readmorebutton:visited {
	background-color: #fff;			/* 背景色(グラデーション非対応の環境のみ) */
	border: 1px solid var(--main-color);	/* 枠線の装飾 */
	background-image: none;			/* 背景グラデーション */
	color: var(--main-color);		/* 文字色 */
	text-decoration: none;			/* リンク装飾を消す */
	}
	
.readmorebutton:hover {
	background-image: none;			/* グラデーションなし */
	background-color: var(--accent-color);	/* 背景色 */
	border: 1px solid var(--main-color);	/* 枠線の装飾 */
	color: var(--main-color);		/* 文字色 */
	text-decoration: none;			/* 下線を加える */
	}

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

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


/* ▼折り畳み空間 */	/* details要素＋summary要素で実現されており、JavaScriptが無効でも動作します。 */
/* ▽ボタンカバー */
.foldswitch {
	width: fit-content;		/* 横幅を中身のサイズに制限 */
	}
	
/* ▽ボタン */
.foldlabel {
	display: inline-block;			/* インラインブロック化 */
	padding:0.25rem 0.5rem;			/* 内側の余白 */
	border:1px solid var(--accent-color);	/* 枠線の装飾 */
	border-radius: 0;			/* 枠線の角丸 */
	background-color: var(--accent-color);	/* 背景色(グラデーション非対応の環境のみ) */
	background-image: none;			/* 背景グラデーション */
	color: var(--bg-color);		/* 文字色 */
	line-height: 1;				/* 行高 */
	cursor: pointer;			/* マウス形状をポインタに */
	}

.foldlabel:hover {
	background-image: none;				/* グラデーションなし */
	background-color: var(--accent-color);		/* 背景色 */
	color: var(--bg-color);			/* 文字色 */
	}
	
/* ▽折り畳まれている空間 */
.foldedarea {
	border-left:3px solid var(--accent-color);	/* 左側の枠線 */
	margin: 0.25rem 0 0 0.125rem;			/* 外側の余白 */
	padding: 0.25rem 0.5rem;			/* 内側の余白 */
	}

/* -------------------------------- */
/* ▼カテゴリ選択チェックボックス群 */	/* ★Ver 3.0.0以降で使用 */
/* -------------------------------- */

/* チェックボックスとラジオボタンの装飾をリセット */

input[type="checkbox"],
input[type="radio"] {
	appearance: auto;       /* ブラウザ標準の見た目に戻す */
	-webkit-appearance: auto;
	width: 0.6rem;
	height: 0.6rem;
	background-color: initial; /* 背景色設定を無効化 */
	cursor: pointer;
	}

input.passkeyinput{
	background-color: var(--accent2-color);
	}

/* -------------------------------- */
/* ユーティリティリンク */
/* -------------------------------- */

.utilitylinks {
	margin: 2em 1em 1em 1em;
	padding: 0.5rem;
	border: 1px solid var(--accent-color);	
	border-radius: 0.5rem;
	background-color: var(--bg-color);	
	font-size: 0.9em;
	}
	
/* ▼ナビのリンクリスト */
.utilitylinks ul {
	color: var(--accent-color);
	}
	
/* ------------------------------------------ */
/* ▼表示対象の限定時などの「限定条件」表示行 */
/* ------------------------------------------ */
.situation {
	margin: 0 0 1em 0;	/* 外側の余白量 */
	font-weight: bold;	/* 太字 */
	color: var(--accent-color);			/* 文字色 */
	}
	
.situation:empty { display: none; }	/* 限定表示がない場合は存在自体を消す */



/* ===================================== */
/* メインエリアの設定 */
/* ===================================== */
.onelogbox {
	display: table;						/* 投稿情報と投稿本文とで2段組 */
	line-height: 1.8rem;
	border-collapse: separate;				/* 段の間隔を空ける */
	border-spacing: 0 1.5rem;				/* 段の間隔量 */
	border-bottom: dashed 0.1rem var(--accent2-color);
	width: 100%;
	margin-bottom: 2rem;
	padding: 0 1.7rem 1.5rem;				/* 上 左右 下 */
	position: relative;
	}
	
/* ▽記事サムネ画像 */
.onelogbox .embeddedimage {
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
	border-radius: 1rem;
	border: solid 0.1rem var(--accent2-color);
	margin-top: 0.5rem;
	}

/* ------------------------------------------ */
/* リンクカードの装飾(サイズS/L共通部分)*/
/* ------------------------------------------ */

.cardlinkbox {
	margin: 0.5rem 0;
	}


.cardlinkbox:hover {
	background-color: #f0f8ff;		/* アイスブルー */
	border-color: #ccc;
	}

/* ------------------------------------------ */
/* 投稿日時とかカテゴリとかの基本設定*/
/* ------------------------------------------ */

.oneloginfo{
	display: flex;
	margin: 0;	
	background-color: var(--bg-color);
	color: var(--main-color);
	font-size: 1rem;
	line-height: 1.6rem;
	text-align: left;
	flex-wrap: wrap;
	align-items: center;
	}
	
.oneloginfo a:link{
	color: var(--main-color);
	}
	
.oneloginfo a:hover{
	color: var(--accent-color);
	}

/* ------------------------------------------ */
/* 投稿日時*/
/* ------------------------------------------ */

.postdate {
	font-family: var(--midashi-font);
	border-radius: 0;
	font-size: 2.5rem;
	letter-spacing: 0.15rem;
	padding: 0 ; 			/* 上 右 下 左 */
	margin: 0 0 2.5rem -0.5rem;	/* 上 右 下 左 */
	}

.postdate a{
	color: var(--main-color) !important;
	font-weight: 700;
	}

.postdate a:hover {
	text-decoration: none;
	}
	
.postdate2 {
	display: inline-flex;
	color: var(--main-color);
	font-size: 1rem;
	letter-spacing: 0.1rem;
	}
	
.postdate2 a{
	font-weight: 400;
	}

/* ------------------------------------------ */
/* 本文*/
/* ------------------------------------------ */

.comment {
	margin-left: 0;
	line-height: 1.8rem;		/* 行の高さ */
	min-height: 4em;		/* 最低限確保する高さ */
	}
	
.comment a {
	color: var(--link-color);
	}

.comment a:hover {
	color: var(--link-hover-color);
	}

/* ------------------------------------------ */
/* 記事内ハッシュタグ */
/* ------------------------------------------ */

.comment .taglink {
	color: var(--accent-color) ;
	display: inline-block;		/* インラインブロック化 */
	margin: 0;			/* 外側の余白量 */
	text-decoration: none;		/* 下線を消す */
	word-break:break-all;		/* 自動リンクのはみ出しを防ぐ */
	}

.comment .taglink:hover {
	color: var(--link-hover-color);
	text-decoration: none;
	}
	
	
/* ------------------------------------------ */
/* カテゴリ */
/* ------------------------------------------ */

.categories, .categories div {
	margin: 0 !important;
	padding: 0 !important;
	}
	
.categories {
	display: inline-flex;
	align-items: center;
	font-size: 1rem;
	letter-spacing: 0.1rem;
	color: var(--accent-color);
	gap: 5px;
	margin-top: 0.5rem;
	}

/* ▽カテゴリリンク1つ */
.categorylink {
	display: inline-flex;
	text-decoration: none;
	}
	
.categorylink:hover {
	text-decoration: none;
	}

/* ▽カテゴリ間のセパレータ */
.catseparator {
	display: inline-flex;
	margin: 0;
	color: var(--main-color);
	}

/* ▽カテゴリアイコン */
.categories img{
	width: 1rem;
	height: 1rem;
	margin-right: 0.1rem;
	}
	
.categoryicon svg {
	width: 1em;          	/* 文字サイズに合わせる */
	height: 1em;
	middle; 		/* flexが効かない環境への保険 */
	fill: currentColor;     /* 文字色と同じ色にする */
	}
	
/* ===================================== */
/* サイドバー設定	*/
/* ===================================== */

.sidearea {
	border: none;
	background-color: var(--bg-color);
	color: var(--main-color);
	}
	
.sidearea .cornertitle {
	font-family: var(--midashi-font);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--main-color);
	text-shadow: none;
	letter-spacing: 0.1em;
	margin: 1.2rem 0 1rem 0;
	}

/* subareaの中にある、〇〇areaというクラスがつくdivすべて */
.sidearea div[class$="area"] {
	border-bottom: none;
	}
	
.sidearea a:link,
.sidearea a:visited{
	color: var(--main-color);
	}
.sidearea a:hover{
	color: var(--link-color);
	}

.sidehead {
	font-family: var(--midashi-font);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2rem;
	text-align: center;
	margin-bottom: 1rem;
	border-bottom: none;
	background-color: var(--bg-color);
	color: var(--main-color);
	}
	

/* ------------------------------------------ */
/* フリースペース */
/* ------------------------------------------ */

.freespacebody {
	background-color: var(--bg-color);
	color: var(--main-color);
	padding: 0
	}
	
/* ------------------------------------------ */
/* 検索フォーム */
/* ------------------------------------------ */

.searchbox {
	margin: 0;		/* 外側の余白量 */
	display: flex;
	}
	
/* 検索語(テキスト)入力欄 */
.queryinput {
	border: 0.1rem solid var(--main-color);
	border-radius: 2rem;
	font-size: 1rem;
	padding: 0.25em 0.5em;
	width: 70%;
	min-width: 200px;		/* 横幅最小値 */
	}
	
/* 検索(送信)ボタン */
.searchbox .submitbutton {
	color: var(--main-color);
	background-color: var(--bg-color);
	border: 0.1rem solid var(--bg-color);
	font-size: 1rem;
	padding: 0.25em 0.5em;
	border-radius: 0;
	font-weight: 700;
	display: inline-block;
	margin: 0;
	}

.searchbox .submitbutton:hover {
	background-color: var(--bg-color);
	color: var(--link-color);
	}
	
/* ------------------------------------------ */
/* カテゴリ */
/* ------------------------------------------ */

.categoryTree {
	background-color: var(--bg-color);
	color: var(--main-color);
	letter-spacing: 0.1rem;
	border-radius: 0;
	align-items: center;
	gap:5px;
	}
	
.categoryTree .num {
	display: inline-block;
	margin-left: 0.2rem;
	font-size: 0.9rem;
	letter-spacing: 0.1rem;
	color: (--main-color);
	}

.categoryTree ul {
	list-style: none !important; /* デフォルトの「・」を確実に消す */
	padding-left: 0 !important;
	margin-left: 0 !important;
	}

/* ------------------------------------------ */
/* ハッシュタグリスト */
/* ------------------------------------------ */

.hashtaglist {
	background-color: var(--bg-color);
	padding: 0;
	}	

/* ハッシュタグリスト内の件数を消す */
.hashtaglist span,
.categoryTree span {
	display: none !important;
	}

/* ハッシュタグリストの各リンクの前に # を追加 */
.hashtaglist li a::before {
	content: "#";
	margin-right: 0.2rem;
	color: var(--main-color); 
	font-weight: 700;
	}

/* ------------------------------------------ */
/* カレンダー */
/* ------------------------------------------ */
/* ▽カレンダーカバー */
.calendarplace {
	margin: 0.3rem 0;			/* 外側の余白量 */
	padding: 0;				/* 内側の余白量 */
	background-color: var(--bg-color);	
	color: var(--main-color);
	border-radius: 0.5rem;			
	line-height: 1.5rem;			
	overflow: auto;				/* はみ出る場合の処理 */
	}

/* ▽カレンダーテーブル */
.calendar {
	width: 100%;
	border-collapse: collapse;		/* 枠を結合 */
	border: 1px solid var(--bg-color);	/* テーブル外側の枠線 */
	}

.calendar th,
.calendar td {
	border-bottom: 1px solid var(--main-color);	/* テーブル内側の枠線 */
	border-top: none;
	border-left: none;
	border-right: none;
	padding: 0.15rem;				/* セル内側の余白 */
	text-align: center;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.5rem;
	item-align: center;
	}

/* 年月キャプション */
.calendar caption {
	color: var(--main-color);		/* 文字色 */
	font-weight: 700;
	letter-spacing: 0.1rem;
	}

/* 曜日行 */
.daysofweek th {
	background-color: #fff;
	color: var(--main-color);
	font-weight: 700;
	padding: 6px 0;
	font-size: 0.8em;
	line-height: 1;
	}

/* 日付数値の装飾（リンクになる場合も、ならない場合も共通） */
.calendar a,
.calendar .nolink {
	display: inline-block;
	border-radius: 0;
	padding: 0;			/* 内側の余白 */
	width: 100%;
	height: 100%;
	background-color: transparent;
	}

/* 日付数値のリンク（※リンクになる場合だけの装飾） */
.calendar td a {
	text-decoration: none;
	background-color: #fff;
	color: var(--main-color);
	}
			
/* 日付数値のリンクにマウスが載った際 */
.calendar td a:hover {
	background-color: #fff;
	color: var(--link-color);
	}

/* 今日の枠（カレンダー内での「今日」のセルだけの装飾） */
.today {
	background-color: var(--main-color);
	color: var(--bg-color);
	position: relative;
	}

/* ===================================== */
/* ページナビ設定	*/
/* ===================================== */

.pagenavi { 
	clear: both;
	text-align: center;
	font-weight: 700;
	background-color: var(--bg-color);
	color: var(--main-color);
	border: none;
	margin: 1rem;			/* 外側の余白 */
	padding: 0;			/* 内側の余白 */
	}
	
.pagenavi a { 
	display: inline-block;
	padding: 1rem;
	}

/* ▽現在のページ番号の装飾 */
	a.pagenumhere {
		text-decoration: none;			/* リンク装飾を消す */
		background-color: var(--accent-color);	/* 背景色 */
		color: var(--main-color);		/* 文字色 */
		border-radius: 1rem;			/* 角丸 */
	}
/* ▽ページ番号リンクにマウスが載った際の装飾 */
	a.pagenumlink:hover {
		text-decoration: none;			/* リンク装飾を消す */
		background-color: var(--main-color);	/* 背景色 */
		color: var(--bg-color);		/* 文字色 */
		border-radius: 1rem;			/* 角丸 */
	}

/* ===================================== */
/* フッター */
/* ===================================== */
footer{
	background-color: var(--bg-color);
	color: var(--main-color);
	text-align: center;
	}

	/* ▼フッタ内リンクの装飾 */
	footer a:link    { color: var(--main-color); }  	/* 未訪問 */
	footer a:visited { color: var(--main-color);}  		/* 訪問済み */
	footer a:hover   { color: var(--accent-color); } 	/* マウスが乗ったとき */
	footer a:active  { color: var(--accent-color); }	/* アクティブ時 */

/* ===================================== */
/*page top----------------------*/
/* ===================================== */

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 15px;
    width: 15px;
    border-top: 3px solid var(--main-color);
    border-right: 3px solid var(--main-color);
    transform: translateY(20%) rotate(-45deg);
}

/* ===================================== */
/* PC（2カラム）基本設定 */
/* ===================================== */
@media screen and (min-width: 821px) {

header {
	width: 100%;
	max-width: 1200px; 
	text-align: center;
	margin: 0 auto;
	}

.contents{
	display: flex;
	align-items: flex-start; /* ←重要！これを入れるとサイドバーが不必要に伸びなくなります */
	max-width: 1200px; 
	margin: 0 auto;
	}

.postform,
.textarea,
.tegalogpost {
	max-width: 1200px; 
	margin: 0 auto;
	}

.mainarea {
	width: 800px;
	display: flex;
	}
	
.sidearea {
	position: sticky;
	top: 3rem;              	 /* 画面上部からどの位置で止まるか */
	width: 300px;           	 /* 任意の幅 */
	height: auto;
	max-height: calc(100vh - 6rem); /* topを抜いた分の高さ */
	overflow-y: auto; 		/* はみ出た分をスクロール可能にする */
	scrollbar-width: thin;		/* スクロールバーが目立たないようにする*/
	}
}


/* ===================================== */
/* スマホ・タブレット（1カラム）基本設定	*/
/* ===================================== */
@media screen and (max-width: 820px) {

header {
	width: 100%;
	text-align: center;
	margin: 0 auto;
	}

.postform {
	margin: 1rem;
	padding: 0;
	}

.contents {
	display: flex;
        flex-direction: column;
        align-items: center; /* これで子要素を中央に寄せます */
	}

.onelogbox {
	line-height: 1.3rem;
	margin-bottom: 1.8rem;
	padding: 0 1rem 1.5rem;	/* 上 左右 下 */
	}

.sidearea {
	order: 2;  /* サイドバーを下に */
	width: 100%;
        max-width: 400px;    /* 広がりすぎないよう制限（お好みで） */
        margin: 2rem auto;   /* 上下に余白を作りつつ中央へ */
        padding: 0 1.5rem;     /* 画面端にぴったりくっつくのを防ぐ */
        box-sizing: border-box;
	}
 
}