@charset "UTF-8";

/* -----------------------------------
▼　全体のデザイン　▼
----------------------------------- */

/* 全体共通装飾 -------------------------------------------- */
html {
	font-size: 100%;
	scroll-behavior: smooth;
}
/* デバイスサイズが指定以下ならフォントサイズを変更 */
@media screen and (max-width: 599px){
	html{
		font-size: 90%;
		scroll-behavior: smooth;
	}
}
  
body {
	line-height: 1.8rem; /* 文字の高さ */
	font-family: var(--font-main); /* フォントの種類 */
	font-feature-settings: "palt" 1; /* フォント指定補助 */
	font-size: 0.95rem;
	font-weight: 400; /* フォントの太さ */
	letter-spacing: 0.1rem; /* 文字の間隔 */
	margin: 0; /* 要素の外側の余白 */
	padding: 0; /* 要素の内側の余白 */
	background-color: var(--haikei-iro); /* 背景色 */
	color: var(--mozi-iro); /* 文字色 */
	overflow-wrap: break-word;/* 文字がはみ出さないように */
	overflow-y: scroll; /* ボックスからはみ出た場合スクロールにする */
}

/* 全体の幅決め -------------------------------------------- */
.contents {
	margin: 0 auto; /* 中央配置 */
	padding: 2rem 0.8rem 1.5rem; /* 上・左右・下の内側への余白 */
	max-width: 700px; /* コンテンツの最大幅 */
	width: 100%;
}

/* 中の要素を中央寄せ -------------------------------------------- */
.center-wrapper {
	justify-content: center;
	align-items: center; /* 縦方向も中央にしたい場合 */
	text-align: center;
}  

/* リンクへの装飾 -------------------------------------------- */
a {
	text-decoration: none; /* リンクに装飾しない */
	color: var(--link-iro);
}
a:hover {
	text-decoration: none; /* 同上・オンマウス時 */
	color: var(--link-h-iro);
}

/* アイコンのカラー装飾 -------------------------------------------- */
i {
	color: var(--link-h-iro);
}

/* フェードイン効果 -------------------------------------------- */
/* コンテンツ（body）が0.2秒で透明から不透明に「フェードイン」する */
body {
    animation: fadein 0.2s ease-out forwards;
}
@keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

/* -----------------------------------
▼　ヘッダー　▼
----------------------------------- */

header{
	text-align: center; /* 中央寄せ */
	padding: 1.5rem; /* 要素の内側の余白 */
	margin-bottom: 3rem;
}

/* ページタイトルエリア -------------------------------------------- */
.titlearea {
    margin: 0.8rem 0 0.8rem; /* 上・左右・下の外側への余白 */
}
.pagetitle {
	color: var(--link-iro); /* タイトル色 */
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.8; /* 文字の高さ */
}

/* ホームへのリンク -------------------------------------------- */
.relink {
	margin: 0 0.8rem 0 auto; /* 上・右・下・左への外側の余白 */
	display: inline-block; /* 要素の並び方 */
    font-size: 1rem;
    line-height: 1.8; /* 文字の高さ */
    font-weight: 500; /* フォントの太さ */
}

/* ヘッダーにテキストを置く場合（仮） -------------------------------------------- */
header p{
	font-size: 0.8rem;
	margin-bottom: 1rem;
}

/* -----------------------------------
▼　カテゴリリスト　▼
----------------------------------- */

.category a{
	background-color: var(--link-iro);
	color: var(--siro-mozi);
	display: inline-block;
	font-size: 0.8rem;
	line-height: 1.6;
	padding: 0.4rem 0.4rem;
	text-decoration: none;
	transition: background-color 0.3s ease-in-out; /* ゆっくり反応する */
}
.category a::before {
	content: "\f114";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.7rem;
	line-height: 1.3;
	vertical-align: middle;
	margin-right: 0.2rem;
}
.category a:hover{
	background-color: var(--link-h-iro);
}

.category ul li{
	display: inline-block;
	margin-right: 0.5rem; /* リスト内の隣のカテゴリとの余白 */
}
.category ul li:last-child{
	margin-right: 0;
}
.taglink + .num,
.catlink + .num,
.datelistlink + .num{
	display: none;
}

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

.hashtaglist li{
	display: inline-block;
	padding-right: 0.5em; /* リスト内の隣のタグとの余白 */
	font-size: 0.9rem;
	font-weight: bold;
}
.hashtaglist li:before{
	content: '#'; /* タグの頭にマークを付ける */
	color: var(--mozi-iro);
}
.hashtaglist .num{
	display: none;
}

.hashtaglist a:hover {
	color: var(--link-h-iro);
}

/* -----------------------------------
▼　一覧デザイン　▼
----------------------------------- */

/* 表示制限あり、単独表示じゃないとき */
body:not(.nofiltering):not(.onelog) .maingrid {
	margin-bottom: 3rem;
}

/* 一覧・情報（タイトル・カテゴリ・タグ・抜粋）部分 */
.ichiinfo {
	width: 100%;
	margin: 0 0.7rem 1.5rem;
}

/* 一覧・タイトル横にボーダーをつける */
.ichiran {
	margin: 0 0 1.5rem 0;
	overflow: hidden;
	border-left: 6px solid var(--link-iro);
}

/* 一覧・タイトル部分 */
.ichititle {
	margin-bottom: 0.3rem;
	padding-bottom: 0.2rem;
	font-size: 1.1rem;
	font-family: var(--font-main);
	font-weight: 700; /* フォントの太さ */
	line-height: 1.3;
	overflow-wrap: break-word;/*↓2行 日本語改行タイミングの調整 */
	word-break: keep-all;
}
.ichititlelink {
	color: var(--mozi-iro);
}

/* 一覧・カテゴリ表示 */
.ichicats {
	background-color: var(--link-iro);
	color: var(--siro-mozi);
	display: inline-block;
	width: fit-content; /* 内容に合わせて幅を自動調整 */
	font-size: 0.7rem;
	line-height: 1.6;
	padding: 0.3rem 0.3rem;
	margin-bottom: 0.2rem;
	margin-top: 0.2rem;
}
/* 一覧・カテゴリリンクの前にフォルダアイコンを付ける */
.ichicats::before {
	content: "\f114";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.5rem;
	line-height: 1.3;
	vertical-align: middle;
	margin-right: 0.2rem;
}

.ichicats a {
	color: var(--siro-mozi);
	text-decoration: none;
}
.ichicats:hover{
	background-color: var(--link-h-iro);
	transition: background-color 0.3s ease-in-out; /* ゆっくり反応する */
}

/* 一覧・タグ部分 */
.ichitags {
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.6;
	margin-top: 0.2rem;
}
.taglink {
	display: inline-block;
}

/* 一覧・抜粋部分 */
.ichibassui {
	color: var(--mozi-iro)!important;
	font-size: 1rem!important;
	line-height: 1.6;
	color: var(--usu-mozi-iro);
	margin-top: 0.2rem;
	margin-bottom: 0.1rem;
}

/* 一覧・画像部分非表示 */
.ichimai {
	display: none;
}

/* 鍵投稿のときのボーダーの色変える */
.ichiran.logstatus-lock { border-color: var(--usu-mozi-iro)!important;}


/* -----------------------------------
▼　単独デザイン　▼
----------------------------------- */

/* 単独・本文ボックス */
.onelogbox {
	width: 100%;
	margin: 0 auto 3rem;
}

/* 単独・タイトル */
.onelogtitle,.freespacetitle,
.deco-midasi1 {
	display: block;
	font-size: 1.2rem;
	line-height: 1.5rem;
	font-weight: bold;
	border-left: 6px solid var(--link-iro);
	margin-bottom: 3rem;
	padding: 0.2rem 0.5rem 0.3rem 0.5rem;
}

/* 単独・カテゴリ表示 */
.onelogcats {
	background-color: var(--link-iro);
	color: var(--siro-mozi);
	display: block; /* ブロック要素に */
	width: fit-content; /* 内容に合わせて幅を自動調整 */
	margin-left: auto; /* 右寄せ */
	margin-right: 0;
	font-size: 0.8rem;
	line-height: 1.6;
	padding: 0.4rem 0.4rem;
	margin-bottom: 0.5rem;
	text-align: right;
}
.onelogcats::before {
	content: "\f114";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.7rem;
	line-height: 1.3;
	vertical-align: middle;
	margin-right: 0.2rem;
}
.onelogcats a {
	color: var(--siro-mozi);
	text-decoration: none;
}
.onelogcats:hover{
	background-color: var(--link-h-iro);
	transition: background-color 0.3s ease-in-out; /* ゆっくり反応する */
}

/* 単独・抜粋 */
.onelogbassui {
	color: var(--usu-mozi-iro);
	font-size: 1rem;
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 5rem;
	margin-left: auto; /* 右寄せ */
	text-align: right;
}

/* 単独・タグ表示 */
.onelogtag {
	font-weight: bold;
	margin-left: auto; /* 右寄せ */
	text-align: right;
}

/* 単独・本文 */
.comment {
	margin-top: 2rem;
	margin-bottom: 7rem;
}

/* 単独・投稿日時と編集リンク */
.oneloginfo {
	font-size: 0.8rem;
	text-align: right;
	margin-top: 2rem;
	margin-bottom: 5rem;
}
.oneloginfo :where(.kizino,.postdate) {
	color: var(--usu-mozi-iro);
	display: inline-block;
	margin-right: 0.5rem;
}
.editlink {
	color: var(--mozi-iro);
	vertical-align: top;
}

/* -----------------------------------
▼　ページネーション　▼
----------------------------------- */

nav.pagenums{
	text-align: center;
	font-weight: bold;
}
nav.pagenums a{
	background-color: var(--link-iro); /* ページネーションの背景色（濃い色がベター） */
	color: var(--siro-mozi); /* ページネーションの文字色（白に近い色がベター） */
	display: inline-block;
	letter-spacing: 0.1rem;
	font-size: 0.9rem;
	margin: 0 0 5px 0; /* 上・右・下・左への外側の余白 */
	padding: 0.1rem 0.6rem 0.2em; /* 上・左右・下の内側の余白 */
	margin-bottom: 5px; /* 下の外側への余白 */
	transition: all 0.3s ease-in-out;
	min-width: 2rem;
}
nav.pagenums a:hover{
	background-color: var(--link-h-iro); /* オンマウス時の背景色 */
}
nav.pagenums .pagenumhere{
	background-color: var(--koi-iro); /* 現在のページを示す（より濃い色がベター） */
	color: var(--siro-mozi);
}

body.onelog .onelogonly{
	display: block;
}
body.onelog nav.pagenums .onelogonly a{
	padding: 1rem 0.2rem; /* 上下・左右の内側の余白 */
	margin-right: 1rem; /* 隣のボタンとの余白 */
}
body.onelog nav.pagenums .onelogonly a:last-child{
	margin-right: 0;
}

/* -----------------------------------
▼　HOMEへ戻るリンク　▼
----------------------------------- */

.homelink {
	font-size: 1rem;
}
.homelink a::before{
	content: "\f053";
	color: var(--link-h-iro);
	font-family: "Font Awesome 6 Free";
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 900;
	line-height: 1.3;
	vertical-align: middle;
	margin-right: 0.3rem;
}

/* -----------------------------------
▼　フッター　▼
----------------------------------- */

footer{
	font-size: 0.8rem;
	text-align: center;
	margin-top: 5rem;
	margin-bottom: 3rem;
}

/* -----------------------------------
▼　上に戻るボタン　▼
----------------------------------- */

a.ue_btn {
	position: fixed;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	bottom: 0;
	right: 0;
	background: var(--mozi-iro);
	color: var(--siro-mozi);
	text-decoration: none;
}
.ue_btn .material-icons-round {
	font-size: 30px;
}
.ue_btn:hover{ 
	background-color: var(--link-h-iro);
}

/* -----------------------------------
▼　その他装飾　▼
----------------------------------- */

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

/* -----状況別表示切り替え指定ゾーン----- */
/* トップ以外ではクイックポストを非表示 */
body:not(.home) .postarea {
	display: none;
}
/* 単独ページではページナビを非表示 */
body.onelog .pageln {
	display: none;
}
/* 一覧ではキャプションを非表示 */
.ichiran figcaption {
	display: none;
}

/* -----------------------------------
▼　自由装飾　▼
----------------------------------- */

/* 小説本文 */
.deco-novel {
	display: block;
	max-width: 700px;
	margin: 0 auto;
	line-height: 1.8rem;
}

/* 見出し2 */
.deco-midasi2 {
	font-weight: bold; margin-bottom: 0.5rem;
}
.deco-midasi2::before {
	content: '▶';
}

/* 大文字 */
.deco-omozi { font-size: 1.2rem; line-height: 1.8rem;}

/* 画像サムネイル */
.deco-thumb {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
	gap: 5px;
}
.deco-thumb :where(.embeddedimage,.imagelink) {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

/* 縦書き */
.deco-tate {
	display: block;
	width: min(700px,100%);
	height: min(700px,80vh);
	margin: 0 auto;
	padding: 1.5rem;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 1rem;
	font-family: serif;
	line-height: 1.8rem;
	overflow-x: auto;
	scrollbar-color: var(--usu-mozi-iro) var(--haikei-iro);
}
.deco-tate::-webkit-scrollbar { height: 8px; background: var(--haikei-iro);}
.deco-tate::-webkit-scrollbar-thumb { background:var(--usu-mozi-iro); border-radius: 4px;}

/* 仕切り線 */
.deco-sen { display: block; border-bottom: 1px solid var(--usu-mozi-iro);}

/* 中央寄せ */
.deco-center { display: block; text-align: center;}

/* 右寄せ */
.deco-right { display: block; text-align: right;}

/* ボタン(リンクは自由装飾の中に貼ってください) */
.deco-button a {
	display: inline-block;
	min-width: 5rem;
	margin: 3px;
	padding: 0.3rem 1rem;
	background-color: var(--link-iro);
	border-radius: 5px;
	color: var(--siro-mozi);
	text-align: center;
	font-weight: bold;
	box-shadow: 2px 2px 2px rgb(0, 0, 0, 0.2);
}
.deco-button a:hover { background-color: var(--link-hover-iro); box-shadow: 0 0;}

/* ボックス1 */
.deco-box1 {
	display: block;
	margin: 0 auto;
	width: fit-content;
	border: 5px double var(--link-iro);
	padding: 1.3rem;
}

/* -----------------------------------
▼　input　▼
----------------------------------- */

input.queryinput,
select.datelimitpull,
select.hashtagEasyInput,
input.passkeyinput{
	border: 1px solid var(--mozi-iro);
	background-color: var(--haikei-iro);
	color:  var(--mozi-iro);
	vertical-align: bottom;
	width: calc(100% - 3rem);
	height: 2rem;
}
input.submitbutton,
input.passkeysubmit,
.postarea input[type="button"],
.postarea input[type="submit"],
.postarea input[type="text"]{
	border: none;
	background-color: var(--mozi-iro);
	color: var(--siro-mozi);
	cursor: pointer;
    font-family: var(--font-main); /* フォントの種類 */
	font-weight: 900;
	font-size: 0.9rem;
	font-weight: bold;
	height: 2rem;
	letter-spacing: 2px;
	padding: 0 0.5rem 0 0.6rem;
	vertical-align: bottom;
}
main input.passkeyinput{
	width: calc(100% - 7rem);
	max-width: 300px;
}
main input.passkeysubmit{
	letter-spacing: 1px;
	padding: 0 0 2px;
	text-align: center;
	width: 7rem;
}

/* -----------------------------------
▼　postarea ▼
----------------------------------- */

.postarea{
	background-color: var(--haikei-sub);
	margin-bottom: 3rem;
}
.postarea a{
	color: var(--koi-iro);
}
.postarea i{
	color: var(--koi-iro);
}

.postarea form.postform{
	padding: 0 5%;
}
.postarea input[type="text"]{
	font-weight: normal;
}
textarea.tegalogpost{
	background-color: var(--siro-mozi);
	border: none;
	border-radius: 0;
	color: var(--mozi-iro);
    font-family: var(--font-main); /* フォントの種類 */
	min-height: 10rem;
	padding: 0.2em 0.6em;
	resize: vertical;
	vertical-align: bottom;
	width: 100%;
}
.postarea .submitcover{
	display: block;
	text-align: right;
}
.postarea input.postbutton{
	background-color: var(--link-iro);
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 2px;
	margin-top: 1rem; /* 入力フォームと投稿ボタンを少し離す */
	margin-right: 0;
	width: 50%;
}
.postarea input.postbutton:hover {
	color: var(--siro-mozi);
	background-color: var(--link-h-iro);
}
.postarea .line-control{
	font-size: 0.9rem;
	padding-bottom: 0.5rem;
}
.postarea .decoBtns{
	display: block;
}
.postarea input[type="button"]{
	font-weight: normal;
	letter-spacing: 1px;
	margin: 0 5px 5px 0;
	vertical-align: middle;
}
.postarea input[type="file"]{
	vertical-align: bottom;
	margin-bottom: 5px;
	height: 2rem;
}
select.hashtagEasyInput{
	margin-bottom: 5px;
}
.postarea label{
	display: inline-block;
	padding: 0 1em 5px 0;
	vertical-align: middle;
	line-height: 1.8;
}
.postarea label input[type="checkbox"]{
	margin-right: 5px;
}
.funcUIs label{
	padding: 0 5px 5px 0;
}
.funcUIs .catChecks,
.funcUIs > input:first-child{
	margin-right: 1em;
}
.postarea p.right_block{
	padding: 0 5% 3.5%;
}

/* 特定の要素を左寄せ -------------------------------------------- */
.right_block{
	text-align: right;
}

/* 開くボタン -------------------------------------------- */
details summary{
	cursor: pointer;
	padding: 3.5% 5%;
}

/* -----------------------------------
▼　カテゴリごとにバーの色を変える ▼
----------------------------------- */

.ichiran.gbf {
	border-color:#a0d8ef;
}
.ichiran.mhyk {
	border-color:#e73562;
}