@charset "utf-8";

/* スキン「hokan」一覧デザイン　デフォルト用 */
/* 表示制限あり、単独表示じゃないときは横並び表示 */
body:not(.nofiltering):not(.onelog) .ichigrid {
	margin: 0 auto 3rem;
	display: flex;
	flex-wrap: wrap;
	/*grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));/* 一つの欄が横幅300px以下で折り返す */
	gap: 0.5rem;
}

.ichiran {
	/*width: calc(45% / 3);*/
	margin: 0;
	/*overflow: hidden;*/
	/*display: flex;*/
}

/* 一覧での画像の大きさを合わせる */
.ichiran {
	.embeddedimage,.imagelink,.embeddedpictbox {
	width: 100%;
	height: auto;
}}

/* 一覧サムネの大きさ */
.ichimai {
	width: 100px;
	height: 100px;
	position: relative;
	line-height: 1;
	font-size: 0;
	flex-shrink: 0; /*画面幅狭くなっても画像は縮めない*/
}

/* 一覧サムネに単独記事へのリンクを重ねる */
.imgpermalink {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* 画像横情報部分 
.ichiinfo { width: 100%; padding: 0.3rem 0.5rem; overflow: hidden;}*/
.ichiinfo{
	display: none;
}

.ichititle {
	font-size: 1rem;
	line-height: 1.3;
	font-family: var(--titlefont);
	margin-bottom: 0.3rem;
	padding-bottom: 0.1rem;
	border-bottom: 1px solid var(--mozi-iro);
	text-overflow: ellipsis;/* ↓3行 長いタイトルを…で省略 */
    overflow: hidden;
    white-space: nowrap;
}
.ichititlelink { color: var(--mozi-iro);}
.ichibassui { display: none;}
.ichitags { font-size: 0.8rem; line-height: 1.5; margin-top: 0.2rem;}
.taglink { display: inline-block;}

/* 記事に画像がないときのサムネ */
.NoImageError {
	display: block;
	width: 100px;
	height: 100px;
	background-color: var(--koi-iro);
	position: relative;
}

/* 記事に画像がないときのサムネに重ねるアイコン */
.NoImageError::before {
	content: '\EAD2';
	font-family: var(--iconfont);
	font-size: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--siro-mozi);
}

/* 鍵投稿のサムネ表示 */
.ichiran.logstatus-lock {
.NoImageError,.NoImageError::before,.embeddedimage,.imagelink.nsfw::after { display: none;}}/* まず被ってる要素を消す */

.ichiran.logstatus-lock .ichimai {
	background-color: var(--usu-mozi-iro);
	position: relative;
}

/* 鍵投稿のサムネのアイコン */
.logstatus-lock .ichimai::before{
	content: '\EECB';
	font-family: var(--iconfont);
	font-size: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--siro-mozi);
}




#onsei-post{
  gap: 15px; /* 要素間の余白 */
  width: calc(95% / 3);
  max-width: 600px; /* 全体の最大幅（任意） */
      border: 2px dotted var(--color-main);
    border-radius: 10px;
    padding: 0.5em;
}
#onsei-post .comment{
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 要素間の余白 */
  width: 100%;
  max-width: 600px; /* 全体の最大幅（任意） */
}

/* 共通スタイリング */
#onsei-post .comment .imagelink:not(:first-child) {
  display: flex;
  justify-content: center;
  align-items: center;
  
/* 3列に並べるための幅計算（gap: 8px が2つ分＝16px） */
  width: calc((100% - 16px) / 2);
  box-sizing: border-box;
}

/* 1番（メインエリア）のみ100%幅にする */
#onsei-post .comment .imagelink:first-child{
  width: 100%;
}


#portfolio_img{
	gap: 15px; /* 要素間の余白 */
	width: calc(95% / 5);
	max-width: 600px; /* 全体の最大幅（任意） */
}



/* 親要素の定義 */
.onelog_article{
}


#menu-btn{
	display: none;
}

/* 画面幅767px以下のとき横の余白を狭くする */
@media only screen and (max-width: 1000px) {
	.mainarea { 
		padding: 1rem 1.3rem 2rem;
	}

	.maintitlelink{
		margin: 0.5em 0;
	}

	.headmenu h2{
		font-size: 1em;
	}

	#portfolio_img{
		width: calc(95% / 3);
	}

	main,
	#left,
	#right{
		display: block;
		width: 100%;
		background: var(--color-bg);
	}
	#left{
		background: var(--color-bg);
		display: block;
        width: 90%;
        position: relative;
		float: none;
		margin: 0 auto;
		padding: 0;
	}
	#right{
		float: none;
	}
	#onsei-post{
		width: calc(95% / 2);
	}
	#menu-btn{
		display: block;
		top: 10px;
        right: 10px;
        border: 3px solid var(--color-bg);
        border-radius: 10px;
        color: var(--color-bg);
        font-weight: bold;
        z-index: 1001;
        position: fixed;
        padding: 0.5em 1.3em;
        cursor: pointer;
		background-color: var(--color-main);
	}

	#left {
		/* 固定表示にして画面左上に配置 */
		position: fixed;
		top: 0;
		left: 0;
		width: 80%;
		height: 100vh;
		background: var(--color-bg);
		z-index: 1000;
		border-right: 2px solid var(--color-main);
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out;
	}
	#left.open {
	transform: translateX(0);
	}

	.headmenu{
		padding: 0 1em;
	}

	/* 初期状態：閉じるボタンのテキストを非表示 */
	#menu-btn .text-open {
	display: none;
	}
	#menu-btn .text-close {
	display: inline;
	}

	/* ボタン自体に .open がついたら切り替える */
	#menu-btn.open .text-open {
	display: inline;
	}
	#menu-btn.open .text-close {
	display: none;
	}
}