@charset "UTF-8";

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

/* 色基本設定 */
:root {
	--main-color: #e0e0e0;		/* メインの色 */
	--sub-color: #111;      	/* サブの色 */
	--accent-color: #888;		/* アクセントの色*/
	--accent2-color: #007199;	/* アクセントの色2-ダックブルー*/
	--link-color: #007199;		/* リンクの色*/
	--link-hover-color: #fff;	/* リンクホバーの色*/
	}

/* 基本のリンク設定 */
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(--sub-color);
	color: var(--main-color);
	}

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

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


/* ===================================== */
/* 共通設定 */
/* ===================================== */

.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: 2rem;
	background-color: var(--sub-color);
	color: var(--main-color);
	}
	
	
/* テキスト設定 */
h1 {
	font-family: brandon-grotesque, sans-serif;
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: 0;
	padding-top: 2rem;
	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;
	}
	

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

.sns-header {
	position: relative;
	padding-top: 60px;
	margin-bottom: 1.5rem;
	width: 100%;	
	line-height: 2rem;
	background-color: var(--sub-color);
	color: var(--main-color);
	}

/* カバー画像部分 */
.cover-image {
	width: 100%;
	aspect-ratio: 3 / 1;		/* 横長に固定（Twitter風） */
	background-image: url('http://awonoblue.com/tegalog-test-1column-xx2zf9/mur_heder.png');
	background-size: cover;		/* 隙間なく埋める */
	object-fit: cover;
	background-position: center;	/* 中央でトリミング */
	background-color: var(--accent2-color);   	/* 画像がない時の予備色 */
	}
	
/* プロフィールエリア（アイコンを少し上に浮かせる） */
.profile-area {
	display: flex;         /* 横並びにする */
	align-items: flex-end; /* 下揃えにする（Twitter風） */
	gap: 15px;             /* アイコンとテキストの間の余白 */
	padding: 0 1rem 1rem;
	position: relative;
	}

/* アイコンのサイズ固定 */
.user-icon {
	flex-shrink: 0;		/* 画面が狭くなってもアイコンが潰れないようにする */
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 0.2rem solid var(--sub-color); 
	overflow: hidden;
	background-color: var(--sub-color); 
	margin-top: -40px; 	/* 画像に半分被せる */
	z-index: 2;		/* カバー画像より上に表示 */
	}

.user-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

/* テキストエリアの調整 */
.user-profile-text {
	padding-bottom: 5px;   /* 下揃え時の微調整 */
	}

.sns-site-title {
	font-family: brandon-grotesque, sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
	letter-spacing: 0.1rem;
	}
	
.sns-site-title a:link,
.sns-site-title a:visited {
	color: var(--main-color); 
	}
	
.sns-site-title a:hover {
	color: var(--accent2-color);
	}


.sns-description {
	font-size: 1rem;
	color: var(--main-color); 
	line-height: 1.4;
	}

/* ===================================== */
/* フリースペース設定 */
/* ===================================== */

.freespacearea {
	display: inline-block;
	background-color: none;
	color: var(--main-color);
	border-radius: 0;
	border: none;
	}

.freespacearea .cornertitle {
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--main-color);
	text-shadow: none;
	letter-spacing: 0.3rem;
	margin-top: 1.2rem;
	padding: 0.7rem;
	}

.freespacebody {
	background-color: none;
	color: var(--main-color);
	border-radius: 0;
	padding: 0 0 0.7rem 0;
	}

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

.tegalogpost {
	width: 100%;
	box-sizing: border-box; /* 枠からはみ出さない設定 */
	background-color: var(--sub-color);
	} 
	
.postarea{
	background-color: var(--sub-color);
	}
	
.postform {
	background-color: var(--sub-color);
	margin: 2rem;			/* 外側の余白量 */
	padding: 1rem;			/* 内側の余白量 */
}

/* ↓投稿フォーム*/
form.postform textarea{
	background-color: var(--main-color);
	color: var(--sub-color);
	}

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

textarea.tegalogpost {
	border: 0.1rem solid var(--main-color);
	border-radius: 0;
	background-color: var(--sub-color);
	font-size: 1rem;
	line-height: 1.6rem;
	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: var(--sub-color); 		/* 文字色 */
	font-size: 1rem;			/* 文字サイズ */
	font-weight: 700;			/* 太字 */
	text-decoration: none;			/* 下線を消す */
	padding: 0.5rem;			/* 内側の余白量 */
	border: solid 0.1rem var(--main-color);	/* 枠線 */
	border-radius: 0;			/* 枠の角丸 */
	}

.postbutton:hover {
	background-color: var(--accent2-color);	/* 背景色 */
	color: var(--sub-color); 
	}

/* 管理・投稿ボタン区画 */
.headcontrol {
	display: table-cell;	/* タイトルとボタンで2段組 */
	text-align: right;		/* 右寄せ */
	vertical-align: middle;	/* 上下の中心寄せ */
	padding: 0 0.2rem;			/* 内側の余白量 */
	}

.headcontrol a {
	display: inline-block;		/* インラインブロック化 */
	text-align: center;			
	border: 0.1rem solid var(--main-color);
	background-color: var(--sub-color);
	background-image: none;		/* 背景グラデーション */
	color: var(--main-color); 
	border-radius: 0;		
	padding: 0 0.5em;		
	margin-bottom: 0.1rem;		
	text-decoration: none;		
	white-space: nowrap;		/* 折り返さない */
	}
	
.headcontrol a:hover {
	text-decoration: underline;		/* 下線を引く */
	background-color: var(--accent2-color);	/* 背景色 */
	background-image: none;		/	* 背景グラデーション */
	color: var(--sub-color);
	}

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

/* D:削除(Delete) */
.decorationD {
	color: var(--main-color);
	text-decoration-line: line-through;		/* 取り消し線 */
	text-decoration-color: var(--main-color);	/* 線の色 */
	}
/* E:強調(Emphasis) */
.decorationE {
	color: var(--accent2-color);
	font-style: normal;
	font-weight: 700;
	}
	
/* U:下線(Underline) */
.decorationU {
	text-decoration-line: underline;			/* 線位置 */
	text-decoration-style: double;				/* 線種類 */
	text-decoration-color: var(--accent2-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: var(--main-color);	/* 背景色(グラデーション非対応の環境のみ) */
	background-image: none;			/* 背景グラデーション */
	color: var(--sub-color);		/* 文字色 */
	text-decoration: none;			/* リンク装飾を消す */
	}
	
.readmorebutton:hover {
	background-image: none;			/* グラデーションなし */
	background-color: var(--accent2-color);	/* 背景色 */
	border: 1px solid var(--accent2-color);	/* 枠線の装飾 */
	color: var(--sub-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(--accent2-color);	/* 枠線の装飾 */
	border-radius: 0;			/* 枠線の角丸 */
	background-color: var(--accent2-color);	/* 背景色(グラデーション非対応の環境のみ) */
	background-image: none;			/* 背景グラデーション */
	color: var(--sub-color);		/* 文字色 */
	line-height: 1;				/* 行高 */
	cursor: pointer;			/* マウス形状をポインタに */
	}

.foldlabel:hover {
	background-image: none;				/* グラデーションなし */
	background-color: var(--accent2-color);		/* 背景色 */
	color: var(--sub-color);			/* 文字色 */
	}
/* ▽折り畳まれている空間 */
.foldedarea {
	border-left:3px solid var(--accent2-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(--sub-color);	
	font-size: 0.9em;
	}
	
/* ▼ナビのリンクリスト */
.utilitylinks ul {
	color: var(--accent2-color);
	}
	
/* ------------------------------------------ */
/* ▼表示対象の限定時などの「限定条件」表示行 */
/* ------------------------------------------ */
.situation {
	margin: 0 0 1em 0;	/* 外側の余白量 */
	font-weight: bold;	/* 太字 */
	color: var(--accent-color);			/* 文字色 */
	}
.situation:empty { display: none; }	/* 限定表示がない場合は存在自体を消す */


/* ===================================== */
/* 記事の設定 */
/* ===================================== */

/* 投稿全体 */
.onelogbox {
	position: relative;
	display: block;				/* 投稿情報と投稿本文とで2段組 */
	border-collapse: separate;		/* 段の間隔を空ける */
	border-spacing: 0 1.5rem;		/* 段の間隔量 */
	background-color: var(--sub-color); 
	border-radius: 0.5rem;
	box-shadow: none;
	border: solid 0.1rem var(--accent-color);
	width: 100%;				/* 横幅 */
	margin-bottom: 1rem;
	padding: 1.5rem 1.5rem 1rem 1.5rem;	/* 上 右 下 左の余白量 */
	position: relative;        /* 浮かせたアイコンの基準にする */
	overflow: visible;         /* 重要：はみ出しを許可する */
	}

/* アイコン周り */
.onelogside {
	display: block;			/* 投稿情報と投稿本文とで2段組 */
	vertical-align: top;		/* 上に寄せる */
	text-align: center;		/* センタリング */
	width: auto;			/* 横幅 */
	border-bottom: 0.1rem solid var(--accent-color);
	}

/* -------------------------------- */
/* ユーザー名＋タイムスタンプ＋カテゴリ */
/* -------------------------------- */
.user-info {
	display: flex;
	align-items: auto;
	margin: 0 0 0.5rem 0;	/* 上 右 下 左の余白量 */
	vertical-align: top;	
	font-size: 1rem;
	text-align: left;
	line-height: 1.3rem;
	background-color: none;
	color: var(--accent-color);
	}

.post-meta {
	display: flex;
	align-items: flex-start;
	margin: 0 0 0 1rem;	/* 上 右 下 左の余白量 */
	text-align: left;
	}

.iconarea{
	display: flex;
	}
	
/* アイコンを上に浮かせる設定 */
.user-icon-small {
	margin-top: -2.2rem;         /* ここで上にズラす（数値はお好みで） */
	flex-shrink: 0;
	}

.user-icon-small img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 0.1rem solid var(--accent-color);
	background-color: var(--accent-color);
	object-fit: cover;
	}

.username {
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--main-color);
	letter-spacing: 0.1rem;
	margin: 0;	/* 上 右 下 左の余白量 */
	padding-top: 0;
	}	

.postdate a:link,
.postdate a:visited,
.postdate a:active {
	display: inline-block;
	flex-wrap: wrap; /* 名前が長い場合は時間の下に回る */
	font-weight: 400;
	font-size: 0.8rem;
	text-decoration: none;
	color: var(--accent-color);
	letter-spacing: 0.1rem;
	}	

.postdate a:hover {
	text-decoration: none;
	color: var(--accent-color);
	}
	
/* ▽カテゴリリンク1つ */
.categories {
	display: inline-block;
	font-size: 1rem;
	letter-spacing: 0.1rem;
	color: var(--accent-color);
	}

.categories i {
	font-size: 1rem;
	color: var(--accent-color);
	margin: 0 0.3rem;
	}

.categories a:link,
.categories a:visited,
.categories a:active {
	text-decoration: none;
	color: var(--accent-color);
	}

.categories a:hover {
	text-decoration: none;
	color: var(--accent-color);
	}
	
/* ▽カテゴリ間のセパレータ */
.catseparator {
	display: inline-block;
	margin: 0 0.5rem;
	color: var(--accent-color);
	}

/* ▽カテゴリアイコン */
.categoryicon img {
	height: 1.2em;
	width: auto;
	vertical-align: text-top;
	margin: 0 1px;
	}

/* -------------------------------- */
/* 本文 */
/* -------------------------------- */
.onelogbody {
	display: block;		/* 投稿情報と投稿本文とで2段組 */
	vertical-align: top;	/* 上に寄せる */
	border-top: 0.1rem solid var(--accent-color);
	pading: 0;		/* 上 右 下 左の余白量 */
	}

.comment {
	margin: 1rem 0 0.6rem 0;	/* 上 右 下 左の余白量 */
	line-height: 1.6rem;		/* 行の高さ */
	min-height: 2rem;		/* 最低限確保する高さ */
	}

.comment .taglink {
	display: inline-block;		/* 必須：長いURLのハッシュタグの折り返し */
	word-break: break-all;  	/* 必須：長いURLのハッシュタグの折り返し */
	display: inline-block;		/* インラインブロック化 */
	margin: 0 0.2rem;		/* 外側の余白量 */
	text-decoration: none;		/* 下線を消す */
	word-break:break-all;		/* 自動リンクのはみ出しを防ぐ */
	}
	
.comment .taglink a:link,
.comment .taglink a:visited,
.comment .taglink a:active {
	color: var(--link-color);
	text-decoration: none;	
	}
.comment .taglink a:hover {
	color: var(--link-hover-color);
	text-decoration: none;	
	}
	
/* ===================================== */
/* フッター設定	*/
/* ===================================== */

footer{
	background-color: var(--sub-color);
	color: var(--main-color);
	text-align: center;
	margin-bottom: 0;
	}
	
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); }	/* アクティブ時 */


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

.pagenavi { 
	clear: both;
	text-align: center;
	font-weight: 700;
	background-color: var(--sub-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(--sub-color);		/* 文字色 */
		border-radius: 1rem;			/* 角丸 */
	}

/* ===================================== */
/* 上部固定メニュー設定	*/
/* ===================================== */

.bottom-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;    		/* 画面の端から端まで広げる */
	height: 60px;
	background-color: var(--sub-color);
	display: flex;
	justify-content: center; 	/* 中のアイコンを中央に寄せる */
	align-items: center;
	gap: 50px;      		 /* アイコン同士の適度な間隔 */
	border-bottom: 0.1rem solid var(--accent-color);
	z-index: 9999;
	}

.menu-item {
	flex: 0 1 auto;
	text-align: center;
	font-size: 1.5rem;
	}
	
.menu-item i {
	font-size: 1.4rem;
	color: var(--main-color); 
	}

/* ホバー・選択時の色変化 */
.menu-item:hover i,
.menu-item[open] summary i {
	color: var(--accent2-color); 
	}

/* summaryの中のアイコンが少しズレる場合の調整 */
.menu-item summary {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	}

/* ポップアップ（detailsタグ）の装飾 */
.popup {
	position: relative;
	}

/* summaryの「▼」を消す */
.popup summary {
	list-style: none;
	outline: none;
	}
	
.popup summary::-webkit-details-marker {
	display: none;
	}

/* ポップアップの中身 */
.popup-content {
	position: fixed;
	top: 70px;
	left: 50%;
	padding: 1rem;
	transform: translate(-50%);
	height: auto;
	width: auto;
	min-width: 150px;
	max-width: 100%;       /* 親（ポップアップ）の幅を超えない */
	overflow-y: auto;
	box-sizing: border-box; /* 余白を含めたサイズ計算にする */
	background-color: var(--accent2-color);
	color: var(--sub-color);
	font-size: 1rem;
	border: solid 0.1rem var(--sub-color);
	border-radius: 0.5rem;
	text-align: left;
	}
	
.popup-content a:link,
.popup-content a:visited,
.popup-content a:active {
	color: var(--sub-color);
	}

.popup-content a:hover{
	color: var(--link-hover-color);
	}
	
/* カテゴリー */
.categoryTree {
	border-radius: 0;
	border-bottom: 0.1rem solid var(--accent-color);
	}

/* ハッシュタグ */
.hashtaglist {
	background-color: var(--accent2-color);
	color: var(--sub-color);
	padding: 0;
	}


/* ▽検索フォーム */
.searchbox {
	margin: 0;			/* 外側の余白量 */
	display: flex;
	border: none;
	}
	
/* 検索語(テキスト)入力欄 */
.popup-content .queryinput {
	background-color:  var(--main-color);
	color:  var(--sub-color);
	border: 0.1rem solid var(--sub-color);
	border-radius: 0;
	font-size: 1rem;
	padding: 0.25em 0.5em;
	max-width: calc( 25vw - 9em);	/* 横幅最大値 */
	min-width: 150px;		/* 横幅最小値 */
	}
	
/* 検索(送信)ボタン */
.searchbox .submitbutton {
	display: inline-block;
	background-color:  var(--sub-color);
	color:  var(--main-color);
	border: solid 0.1rem var(--sub-color);
	font-size: 1rem;
	padding: 0.25em 0.67em;
	border-radius: 0;
	font-weight: 700;
	margin: 0;
	}
	
.searchbox .submitbutton:hover {
	background-color: var(--accent-color);
	color: var(--sub-color);
	}
		
/* 検索窓のプレースホルダーの入力文字色 */
.searchbox input.queryinput::placeholder{
	color:  var(--sub-color);
	}
	

/* ===================================== */
/* PC基本設定 */
/* ===================================== */
@media screen and (min-width: 768px) {

.sns-header {
	max-width: 700px; /* Xのように少し細めにするのがコツ */
	}

/* SNS風レイアウト基本 */
.sns-contents {
	max-width: 700px; /* Xのように少し細めにするのがコツ */
	margin: 0 auto;
	padding-bottom: 0.5rem; /* 下部メニューと被らないための余白 */
	}

.cover-image {
        margin-top: 0; /* 上部固定メニューのすぐ下に画像が来るようにする */
        border-radius: 0; /* PCでも端まで画像がある方がX（Twitter）らしいです */
	}
	
.contents,
.postform,
.textarea,
.tegalogpost {
	width: 100%;
	margin: 0 auto;
	}

}


/* ===================================== */
/* スマホ・タブレット基本設定	*/
/* ===================================== */

@media screen and (max-width: 767px) {

/* SNS風レイアウト基本 */
.sns-header{
	width: 100%;
	}

.sns-contents {
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 0.5rem; /* 下部メニューと被らないための余白 */
	}
	
.contents,
.postform,
.textarea,
.tegalogpost {
	width: 100%;
	margin: 0 auto;
	}
 
}