@charset "UTF-8";
/* ブログ一覧のカードとサイドバーのアーカイブ（T367）
   page-system.css の #blog .system-list2（灰色の枠の中に小さな写真と題名の 1 列）を、写真の大きいカードの格子に置き換える。
   blog/index・listing・search が読む。サイドバーのアーカイブは blog/entry も読む。
   page-system.css の後に読み込むこと（同じ詳細度のルールを後勝ちで上書きしている） */

/* ---------- 一覧のカード ---------- */
#blog .mainContents .system-list2 { background: none; padding: 0; margin-bottom: 48px; }
#blog .mainContents .system-list-inner2 {
  background: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px;
}
#blog .mainContents .system-list2 li { overflow: visible; margin: 0; padding: 0; border: none; line-height: 1.5; }
#blog .mainContents .system-list2 li a { display: flex; flex-direction: column; height: 100%; color: #222; }
#blog .mainContents .system-list2 .system-pic {
  float: none; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin-bottom: 12px; border-radius: 6px; background: #f3f1ec;
}
#blog .mainContents .system-list2 .system-pic img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform .5s ease;
}
#blog .mainContents .system-list2 li a:hover .system-pic img { transform: scale(1.04); }
#blog .mainContents .system-list2 li a:hover .system-ttl-01 { text-decoration: underline; }
#blog .mainContents .system-list2 .system-category-set {
  float: none; width: auto; overflow: visible; margin: 0 0 6px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
#blog .mainContents .system-list2 .system-category {
  float: none; width: auto; margin: 0; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: bold; line-height: 1.5; letter-spacing: .04em;
}
/* 金色の日付は白地で読みにくかった（コントラスト約 2.3:1）ので同系の濃い色にする */
#blog .mainContents .system-list2 .system-date {
  float: none; width: auto; margin: 0 0 4px; font-size: 13px; line-height: 1.4; letter-spacing: .04em; color: #8a6a3c;
}
#blog .mainContents .system-list2 .system-ttl-01 {
  float: none; width: auto; margin: 0; font-size: 15px; font-weight: bold; line-height: 1.65;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* 一覧の幅が狭くなる範囲（blog.css で mainContents が 65%）は 2 列 */
@media screen and (min-width: 801px) and (max-width: 1100px) {
  #blog .mainContents .system-list-inner2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  #blog .mainContents .system-list2 { margin-bottom: 32px; }
  #blog .mainContents .system-list-inner2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; padding: 0 3%; }
  #blog .mainContents .system-list2 .system-pic { margin-bottom: 8px; border-radius: 4px; }
  #blog .mainContents .system-list2 .system-category { padding: 2px 8px; font-size: 10px; }
  #blog .mainContents .system-list2 .system-date { font-size: 11px; }
  #blog .mainContents .system-list2 .system-ttl-01 { font-size: 13px; line-height: 1.6; }
}

/* ---------- サイドバーのアーカイブ（年ごとの折りたたみ） ---------- */
aside.sidebar .blog-archive { border-top: 1px solid #e5e1d8; }
aside.sidebar .blog-archive-year { border-bottom: 1px solid #e5e1d8; }
aside.sidebar .blog-archive-year summary {
  display: flex; align-items: center; padding: 12px 4px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: bold; line-height: 1.4;
}
aside.sidebar .blog-archive-year summary::-webkit-details-marker { display: none; }
aside.sidebar .blog-archive-year summary::after {
  content: "+"; width: 1em; margin-left: 10px; text-align: center; font-weight: normal; color: #8a6a3c;
}
aside.sidebar .blog-archive-year[open] summary::after { content: "−"; }
aside.sidebar .blog-archive-count { margin-left: auto; font-size: 12px; font-weight: normal; color: #888; }
aside.sidebar .blog-archive-year ul { padding: 0 4px 10px; }
aside.sidebar .blog-archive-year a { padding: 6px 0; margin: 0 !important; border-bottom: none; font-size: 13px; }