@charset "utf-8";
@import url("../kozin_uramemo/tegalog-kozin.css");

/* スキン「kozin」ギャラリーモード配布用 */

/* -------------------- */
/* ↓ここからスキンkozinと同じ */
/* -------------------- */



/* -------------------- */
/* ↓ここからギャラリーモード用 */
/* -------------------- */

/* ギャラリーモード時カテゴリーなどの数非表示(全投稿数が出ちゃうので) */
.cattree,.hashtaglist { .num { display: none;}}
figcaption { display: none!important;} /* キャプションを消す */

/* カテゴリの1項目もう少し隙間空ける */
.categoryarea-yoko .cattree li { margin-right: 0.7rem;}

/* 画像欄をグリッド表示にする */
.galmainbox {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px,1fr));/* 一つのサムネが横幅160px以下で折り返す */
	gap: 1.5rem 0.5rem;
}

/* 2枚目以降の画像を非表示 */
.imagebox :nth-child(n+2) { display: none;}

/* 画像枚数を画像に重ねる */
.gallogbox { position: relative;}
.pictcount {
   position: absolute;
   z-index: 1;
   display: block;
   padding: 0.3rem 0.3rem;
   top: 0.3rem;
   left: 0.3rem;
   border-radius: 0.3rem;
   background-color: var(--mozi-iro);
   color: var(--siro-mozi);
   font-size: 0.8rem;
}
.pictcount .material-icons-round {
	font-size: 1rem;
	margin-right: 0.1rem;
	vertical-align: middle;
}

/* 画像そのもののサイズ */
.imagebox,.embeddedimage,.embeddedimage.nsfw,.embeddedpictbox {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* 画像リンクも合わせる */
.imagelink {
	width: 100%;
	height: auto;
}

/* 画像に単独記事リンクを重ねる */
.boxlink {
	position: relative;
	line-height: 1;
	font-size: 0;
}
.imgpermalink {
	display: block; 
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* 画像から単独記事リンクを鍵投稿のときだけにしておく(カスタマイズもできるように) */
.gallogbox:not(.logstatus-lock) .imgpermalink { display: none;}

/* 画像下の情報部分 */
.galloginfo{ padding: 0.3rem; font-size: 0.8rem;}

/* 投稿日時(記事単体へのリンク) */
.datelink {
	display: block;
	text-align: center;
	border : 1px solid var(--usu-mozi-iro);
	margin: 0.2rem 0.3rem 0.3rem;
	padding: 0.3rem;
	border-radius: 1rem;
}
.datelink .material-icons-round { font-size: 1rem; vertical-align: middle; margin-right: 0.2rem;}
.datelink:hover {
	text-decoration: none;
	background-color: var(--link-hover-iro);
	color: var(--siro-mozi);
	border-color: var(--link-hover-iro);
}

/* カテゴリとタグ */
.galcattag { display: block; text-align: right; line-height: 1.5;}
.galcat .categorylink { border: 0; padding: 0; margin: 0;}
.galcat .categorylink:hover { text-decoration: underline dotted;}
.galcat,.galtag,.galtag .taglink { display: inline-block;}
.galcattag,.galcat,.galtag { &:empty { display: none;}}

/* 鍵投稿の画像に代替アイコンを入れる */
.logstatus-lock .imagebox { background-color: var(--usu-mozi-iro); position: relative;}
.logstatus-lock .imagebox::before{
	content: '\e73c';
	font-family: var(--iconfont);
	font-size: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}

/* 画面幅599px以下で画像を2列にする */
@media screen and (max-width:599px) {
	.galmainbox { grid-template-columns: repeat(2 , 1fr);}
}