#inn-box ul.category {
	list-style: none;
	margin: 0px 0px 0px 20px;
	clear: both;
  	width:740px;
}
#inn-box ul.category li {
	line-height: 0;
	text-align: left;
  	text-indent:0.5em;
    border:0px;
 	background:transparent;
  	float:left;
    height:130px;
}
#inn-box ul.category li a {
	line-height: 1.5em;
    display: block;
    width: 170px;
    height: 60px;
}
#inn-box ul.category li img {
	display: block;
	border-style: none;
    width: 100%;
    object-fit: cover;
    height: 70px;
}

/* カテゴリ・グループのフリースペース内全体の指定 */
#inn-box div.cg_freespace_01 {
	color:#666666;
	margin:0 30px 30px 30px;
	padding:0 0 0 0;
}
#inn-box div.cg_freespace_02 {
	color:#666666;
	margin:0 30px 30px 30px;
	padding:0 0 0 0;
}

/* カテゴリ・グループのフリースペース内の<p>タグの余白設定 */
#inn-box div.cg_freespace_01 p,
#inn-box div.cg_freespace_02 p {
	margin:0 0 10px 0;
}
/* カテゴリ・グループのフリースペース内の<ul>タグの余白設定 */
#inn-box div.cg_freespace_01 ul,
#inn-box div.cg_freespace_02 ul {
	margin:0 0 10px 0;
}
#inn-box div.cg_freespace_01 li,
#inn-box div.cg_freespace_02 li {
	padding:0 0 0 15px;
}
img.items {
    width: 160px;
    height: 160px;
    object-fit: cover;
}
/* ===== サブカテゴリ画像だけにドットを重ねる ===== */
#inn-box ul.category{
  /* 表示サイズはここで調整 */
  --thumb-w: 170px;   /* 画像の横幅（aの横幅も揃える） */
  --thumb-h: 90px;    /* 画像の高さ */
  --dot-size: 3px;    /* ドットの粗さ */
  --dot-opacity: .35; /* ドットの濃さ */
}

#inn-box ul.category li {               /* テキスト分の高さを足す */
  height: calc(var(--thumb-h) + 40px);
}

#inn-box ul.category li a{
  position: relative;
  display: block;
  width: var(--thumb-w);
  line-height: 1.4;
}

#inn-box ul.category li a img{
  display: block;
  width: 100%;
  height: var(--thumb-h);
  object-fit: cover;
  image-rendering: pixelated;   /* 80px拡大時のボケ隠し */
  image-rendering: crisp-edges;
  border-radius: 6px;
    filter: blur(1px);
}

/* 画像の範囲（上部 var(--thumb-h)）だけにドットを重ねる */
#inn-box ul.category li a::after{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--thumb-h);
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(0,0,0,.6) 0 32%, transparent 33%)
    0 0 / var(--dot-size) var(--dot-size);
  mix-blend-mode: multiply;
  opacity: var(--dot-opacity);
  border-radius: 6px;
}

/* お好み：ホバー時はドットを薄く */
#inn-box ul.category li a:hover::after{
  opacity: .2;
}