@charset "utf-8";
/* CSS Document */

.maincont{margin-bottom: 100px}

.subinline{display: inline-block; text-align: center}

.blog .eria {font-size: 11px; background: #282828; color: #fff; display: inline-block; padding: 0 10px; position: absolute; right: 5px; top: -10px; z-index: 2;}
.blog .syurui {font-size: 11px; padding: 10px 0;}
.blog h3 {font-size: 11px; position: absolute; left: 5%; top: 5%; padding-right: 5%; line-height: 1.2; color: #fff; z-index: 2;}
.blog a {display: block;}
.blog ul {display: flex; justify-content: flex-start; gap: 4%; flex-flow: wrap;}
.blog li {position: relative; margin-bottom: 50px; width: calc((100% - (4% * 3)) / 4);}
.blog li img {width: 100%;}

/* --- 画像の枠（はみ出しを隠す＋フィルターの基準） --- */
.blog li .pic {
  overflow: hidden; /* 拡大した画像が枠外にはみ出さないようにする必須設定 */
  position: relative; /* 暗いフィルターを重ねるための基準点 */
}

/* --- 【追加】画像の上に重ねる暗いフィルター --- */
.blog li .pic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* ★常時この暗さを維持（ホバーしても変わりません） */
  /* transition: background-color 0.3s ease;  ←明るさが変わらないため、この行は削除しました */
  pointer-events: none; /* マウスのクリックを邪魔しない */
  z-index: 1; /* 画像より上、テキスト（z-index: 2）より下に配置 */
}

/* --- 画像の初期状態とアニメーション設定 --- */
.blog li .pic img {
  width: 100%;
  height: auto;
  display: block; /* img特有の下部にある謎の隙間を消す */
  transition: transform 0.3s ease; /* 0.3秒かけて滑らかに変化させる */
}

/* --- aタグにマウスオーバーした時の動き --- */

/* 1. 画像の拡大だけを実行 */
.blog li a:hover .pic img {
  transform: scale(1.05); 
}


/* 記事詳細 */
.syousai .name{font-size:22px ; margin-bottom: 10px; }
.syousai .cate{letter-spacing: 2px; display: flex; display: inline-block; margin-bottom: 30px; font-size: 12px; }
.syousai .ken{display: inline-block; text-align: left}
.syousai .nanika{display: inline-block; }
.syousai .nanika a{color: #253440}

/* ページャー全体のコンテナ */
.pager {
  display: flex;
  align-items: center;
  gap: 10px; /* 四角同士の隙間 */
  margin: 40px 0; /* 上下の余白（必要に応じて調整してください） */
}

/* ページ番号・矢印の共通スタイル（四角形を定義） */
.pager .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;  /* 四角の幅 */
  height: 40px; /* 四角の高さ */
  text-decoration: none;
  box-sizing: border-box; /* 境界線を幅・高さに含める */
  transition: all 0.3s ease; /* ホバー時のふわっとした変化 */
}

/* 非アクティブのページ（白い四角・黒い境界線） */
.pager a.page-numbers {
  background-color: #f7f7f7;
  border: 1px solid #282828;
  color: #282828;
}

/* 非アクティブページのホバー時（マウスオーバーで色を反転） */
.pager a.page-numbers:hover {
  background-color: #282828;
  color: #ffffff;
}

/* アクティブになっているページ（黒い四角・リンクなし） */
.pager span.current {
  background-color: #282828;
  border: 1px solid #282828; /* 非アクティブ時とサイズを揃えるための境界線 */
  color: #ffffff;
}



@media screen and (max-width: 639px) {
.blog ul{ gap: 6%; }
.blog li{ width: calc((100% - (6% * 1)) / 2); }
}


@media screen and (min-width: 980px) {
.syousai{max-width: 1200px; margin: 0 auto}
.syousai .name{font-size:23px; letter-spacing: 2px;}
.syousai .cate{font-size: 12px; margin-bottom: 50px}

}