@charset "UTF-8";
/* ==========================================================================
   ミニPC界隈 — 記事一覧 / カテゴリー / パンくず / ページネーション / サイドバー
   Cocoon標準のエントリーカード構造をそのまま使い、見た目だけ整える。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. アーカイブ見出し
   -------------------------------------------------------------------------- */
.archive-title {
  display: flex;
  align-items: center;
  gap: var(--mpk-space-xs);
  margin: 0 0 var(--mpk-space-lg);
  padding: 0 0 var(--mpk-space-md);
  font-size: var(--mpk-fs-h-md);
  font-weight: 800;
  line-height: var(--mpk-lh-heading);
  letter-spacing: 0.01em;
  color: var(--mpk-text);
  border-bottom: 1px solid var(--mpk-border);
}

@media screen and (min-width: 1024px) {
  .archive-title {
    font-size: var(--mpk-fs-h-lg);
  }
}

.archive-title .fa,
.archive-title [class^="icon-"] {
  color: var(--mpk-primary);
  font-size: 0.72em;
}

/* カテゴリーページの説明文（管理画面から編集する） */
.category-description,
.tag-description,
.archive-description {
  margin: 0 0 var(--mpk-space-xl);
  padding: var(--mpk-space-md) var(--mpk-space-lg);
  font-size: var(--mpk-fs-sm);
  line-height: 1.9;
  color: var(--mpk-text-muted);
  background-color: var(--mpk-surface-muted);
  border: 0;
  border-radius: var(--mpk-radius-md);
}

/* --------------------------------------------------------------------------
   2. エントリーカード（PC：画像とテキストの横並び）
   -------------------------------------------------------------------------- */
.entry-card-wrap {
  display: block;
  margin-bottom: 0;
  padding: var(--mpk-space-lg) 0;
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--mpk-border);
  border-radius: 0;
  box-shadow: none;
}

.entry-card-wrap:hover {
  background-color: transparent;
  box-shadow: none;
}

.entry-card-wrap:first-child {
  padding-top: 0;
}

.entry-card {
  display: flex;
  align-items: flex-start;
  gap: var(--mpk-space-lg);
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.entry-card-thumb {
  flex: 0 0 36%;
  max-width: 36%;
  width: auto;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--mpk-radius-md);
  background-color: var(--mpk-surface-muted);
}

.entry-card-thumb-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--mpk-transition);
}

.entry-card-wrap:hover .entry-card-thumb-image {
  transform: scale(1.04);
}

.entry-card-content {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-top: 2px;
}

.entry-card-title {
  margin: 0 0 var(--mpk-space-xs);
  font-size: var(--mpk-fs-h-sm);
  font-weight: 700;
  line-height: var(--mpk-lh-tight);
  letter-spacing: 0.005em;
  color: var(--mpk-text);
  transition: color var(--mpk-transition);
}

.entry-card-wrap:hover .entry-card-title {
  color: var(--mpk-primary);
}

.entry-card-snippet {
  margin: 0 0 var(--mpk-space-sm);
  font-size: var(--mpk-fs-sm);
  line-height: 1.8;
  color: var(--mpk-text-muted);
}

.entry-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mpk-space-xs) var(--mpk-space-sm);
  position: static;
  font-size: var(--mpk-fs-xs);
  line-height: 1.6;
  color: var(--mpk-text-muted);
}

.entry-card-info,
.entry-card-categorys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mpk-space-xs);
  position: static;
  margin: 0;
}

/*
  Cocoon 標準は
    .post-date, .post-update, .post-author, .amp-back, .entry-category
    { font-size: 0.7em; display: inline; padding: 2px; }
  を持つ。親が14pxだと日付が約10pxになり読めないほど小さくなるため、
  サイト全体で親のサイズを継承させる。
*/
.post-date,
.post-update,
.post-author,
.entry-category {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 0; /* Cocoonの margin-right:8px を打ち消す（間隔は親の gap で取る） */
  padding: 0;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}

.post-date .fa,
.post-update .fa,
.post-author .fa {
  font-size: 0.95em;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   3. カテゴリーラベル（ピル形）
   -------------------------------------------------------------------------- */
/*
  アイキャッチの上に重ねるラベル。位置の基準は .entry-card-thumb
  （position:relative + overflow:hidden を持たせてあるので角丸で切り取られる）。

  内側に 12px も入れると、被写体が中央にある画像でラベルが本体に重なる。
  隅に寄せて小さくし、余白の部分に収める。
*/
.cat-label {
  top: var(--mpk-space-xs);
  left: var(--mpk-space-xs);
  max-width: calc(100% - var(--mpk-space-xs) * 2);
  padding: 3px 9px;
  font-size: var(--mpk-fs-2xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--mpk-surface);
  background-color: rgba(22, 24, 29, 0.72);
  border: 0;
  border-radius: var(--mpk-radius-pill);
  backdrop-filter: blur(4px);
}

/*
  モバイルはサムネイル自体が 40% 幅（実寸 170px 前後）まで小さくなる。
  ラベルの寸法は据え置きだと画像の3分の1を覆ってしまうので、あわせて縮める。
*/
@media screen and (max-width: 640px) {
  .cat-label {
    top: var(--mpk-space-2xs);
    left: var(--mpk-space-2xs);
    max-width: calc(100% - var(--mpk-space-2xs) * 2);
    padding: 2px 7px;
    font-size: 11px;
  }
}

.entry-card-categorys .cat-link,
.entry-categories .cat-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--mpk-fs-xs);
  font-weight: 700;
  color: var(--mpk-primary-dark);
  text-decoration: none;
  background-color: var(--mpk-primary-soft);
  border: 0;
  border-radius: var(--mpk-radius-pill);
  transition: background-color var(--mpk-transition);
}

.entry-card-categorys .cat-link:hover,
.entry-categories .cat-link:hover {
  background-color: #DCE8FF;
}

/* --------------------------------------------------------------------------
   4. モバイル（コンパクト横並び）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .entry-card-wrap {
    padding: var(--mpk-space-md) 0;
  }

  .entry-card {
    gap: var(--mpk-space-sm);
  }

  .entry-card-thumb {
    flex-basis: 40%;
    max-width: 40%;
  }

  .entry-card-title {
    font-size: var(--mpk-fs-md);
  }

  /* 抜粋はモバイルでは非表示にして一覧性を上げる */
  .entry-card-snippet {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. ページネーション（各ページ固有URLを維持）
   -------------------------------------------------------------------------- */
.pagination {
  margin-top: var(--mpk-space-2xl);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0 6px 6px 0;
  padding: 0 var(--mpk-space-sm);
  font-size: var(--mpk-fs-sm);
  font-weight: 700;
  color: var(--mpk-text);
  text-decoration: none;
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-border-mid);
  border-radius: var(--mpk-radius-sm);
  transition: background-color var(--mpk-transition), color var(--mpk-transition), border-color var(--mpk-transition);
}

.pagination .page-numbers:hover {
  color: var(--mpk-primary);
  background-color: var(--mpk-primary-tint);
  border-color: var(--mpk-primary);
}

.pagination .page-numbers.current {
  color: var(--mpk-surface);
  background-color: var(--mpk-primary);
  border-color: var(--mpk-primary);
}

.pagination-next-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--mpk-space-xl);
  font-weight: 700;
  color: var(--mpk-surface);
  text-decoration: none;
  background-color: var(--mpk-primary);
  border: 0;
  border-radius: var(--mpk-radius-pill);
  transition: background-color var(--mpk-transition);
}

.pagination-next-link:hover {
  background-color: var(--mpk-primary-dark);
}

/* --------------------------------------------------------------------------
   6. パンくず
   -------------------------------------------------------------------------- */
.breadcrumb {
  margin: 0 0 var(--mpk-space-md);
  padding: 0;
  font-size: var(--mpk-fs-xs);
  color: var(--mpk-text-muted);
}

.breadcrumb a {
  color: var(--mpk-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--mpk-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. サイドバー（ウィジェット内容は管理画面で編集可能なまま）
   -------------------------------------------------------------------------- */
.sidebar .widget {
  margin-bottom: var(--mpk-space-lg);
  padding: var(--mpk-space-lg);
  background-color: var(--mpk-surface);
  border: 0;
  border-radius: var(--mpk-radius-md);
  box-shadow: var(--mpk-shadow-sm);
}

.sidebar h2,
.sidebar h3,
.sidebar .widget-sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--mpk-space-xs);
  margin: 0 0 var(--mpk-space-md);
  padding: 0;
  font-size: var(--mpk-fs-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--mpk-text);
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

.sidebar h2::before,
.sidebar h3::before,
.sidebar .widget-sidebar-title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1em;
  background-color: var(--mpk-primary);
  border-radius: var(--mpk-radius-pill);
}

.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar li {
  border-bottom: 1px solid var(--mpk-border);
}

.sidebar li:last-child {
  border-bottom: 0;
}

.sidebar li > a {
  display: block;
  padding: 11px 0;
  font-size: var(--mpk-fs-sm);
  line-height: 1.6;
  color: var(--mpk-text);
  text-decoration: none;
  transition: color var(--mpk-transition);
}

.sidebar li > a:hover {
  color: var(--mpk-primary);
}

/*
  サイドバーの記事カード（新着記事・人気記事など）。

  Cocoon 標準は figure を 120px 固定、本文側を margin-left:126px で逃がしている。
  この作りだと本文がカードの上端から始まるため、サムネイル（16:9 で約68px）の
  下半分の横が空いて、タイトルとサムネイルの高さが揃わない。
  flex にして縦中央で揃え、間隔も margin ではなく gap で取る。
*/
.sidebar .widget-entry-cards .widget-entry-card {
  display: flex;
  align-items: center;
  gap: var(--mpk-space-sm);
}

.sidebar .widget-entry-cards figure {
  flex: 0 0 100px;
  width: 100px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mpk-radius-sm);
  background-color: var(--mpk-surface-muted);
}

.sidebar .widget-entry-cards figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.sidebar .widget-entry-cards .widget-entry-card-content {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0; /* Cocoon の margin-left:126px を打ち消す（間隔は gap で取る） */
}

.sidebar .widget-entry-cards .widget-entry-card-title {
  font-size: var(--mpk-fs-sm);
  font-weight: 700;
  line-height: var(--mpk-lh-tight);
  color: var(--mpk-text);
}

.sidebar .a-wrap {
  border-radius: var(--mpk-radius-sm);
}

.sidebar .a-wrap:hover {
  background-color: var(--mpk-primary-tint);
}

/* --------------------------------------------------------------------------
   8. フォーム部品
   -------------------------------------------------------------------------- */
.search-edit,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
  min-height: 44px;
  padding: 0 var(--mpk-space-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--mpk-text);
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-border-strong);
  border-radius: var(--mpk-radius-sm);
  transition: border-color var(--mpk-transition), box-shadow var(--mpk-transition);
}

.search-edit:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--mpk-primary);
  box-shadow: var(--mpk-shadow-focus);
  outline: none;
}

/* --------------------------------------------------------------------------
   9. 記事が見つからないとき（架空カードは出さない）
   -------------------------------------------------------------------------- */
.not-found-message,
.no-post {
  padding: var(--mpk-space-xl);
  font-size: var(--mpk-fs-sm);
  text-align: center;
  color: var(--mpk-text-muted);
  background-color: var(--mpk-surface-muted);
  border: 0;
  border-radius: var(--mpk-radius-md);
}

/* --------------------------------------------------------------------------
   10. ウィジェット内テキストのサイズを揃える
       小さすぎる文字を作らないため、サイドバー内は 15px を下限にする。
   -------------------------------------------------------------------------- */
.sidebar .widget,
.sidebar .widget p,
.sidebar .widget li,
.sidebar .textwidget {
  font-size: var(--mpk-fs-sm);
  line-height: 1.75;
}

/* ブロックウィジェットの見出し（「検索」など）も他のウィジェット見出しに揃える */
.sidebar .wp-block-search__label,
.sidebar .wp-block-heading,
.sidebar .wp-block-group > h2 {
  display: flex;
  align-items: center;
  gap: var(--mpk-space-xs);
  margin: 0 0 var(--mpk-space-md);
  padding: 0;
  font-size: var(--mpk-fs-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--mpk-text);
}

.sidebar .wp-block-search__label::before,
.sidebar .wp-block-heading::before,
.sidebar .wp-block-group > h2::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1em;
  background-color: var(--mpk-primary);
  border-radius: var(--mpk-radius-pill);
}

/* 検索フォーム */
.sidebar .wp-block-search__inside-wrapper {
  gap: var(--mpk-space-xs);
}

.sidebar .wp-block-search__input {
  min-height: 46px;
  font-size: var(--mpk-fs-md);
  border: 1px solid var(--mpk-border-strong);
  border-radius: var(--mpk-radius-sm);
}

.wp-block-search__button,
.sidebar .wp-block-search__button {
  min-height: 46px;
  padding-inline: var(--mpk-space-lg);
  font-size: var(--mpk-fs-sm);
  font-weight: 700;
  color: var(--mpk-surface);
  background-color: var(--mpk-primary);
  border: 0;
  border-radius: var(--mpk-radius-sm);
  cursor: pointer;
  transition: background-color var(--mpk-transition);
}

.wp-block-search__button:hover,
.sidebar .wp-block-search__button:hover {
  background-color: var(--mpk-primary-dark);
}

/* 最近のコメントなど、既定色のリンクを落ち着かせる */
.sidebar .wp-block-latest-comments__comment,
.sidebar .wp-block-latest-posts__list li {
  font-size: var(--mpk-fs-sm);
  line-height: 1.75;
  color: var(--mpk-text-muted);
}

.sidebar .wp-block-latest-comments__comment a,
.sidebar .wp-block-latest-posts__list a {
  color: var(--mpk-text);
  font-weight: 600;
  text-decoration: none;
}

.sidebar .wp-block-latest-comments__comment a:hover,
.sidebar .wp-block-latest-posts__list a:hover {
  color: var(--mpk-primary);
  text-decoration: underline;
}

.sidebar .wp-block-latest-comments__comment-date {
  font-size: var(--mpk-fs-xs);
  color: var(--mpk-text-muted);
}

/* 見つからないときの見出し */
.main .no-post h2,
.not-found-message h2 {
  font-size: var(--mpk-fs-h-md);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   11. ブロックウィジェットのリスト（最近の投稿 / カテゴリー / アーカイブ）
   -------------------------------------------------------------------------- */
.sidebar .wp-block-latest-posts__list,
.sidebar .wp-block-categories-list,
.sidebar .wp-block-archives-list,
.sidebar .wp-block-latest-comments {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar .wp-block-latest-posts__list li,
.sidebar .wp-block-categories-list li,
.sidebar .wp-block-archives-list li {
  padding: 0;
  border-bottom: 1px solid var(--mpk-border);
}

.sidebar .wp-block-latest-posts__list li:last-child,
.sidebar .wp-block-categories-list li:last-child,
.sidebar .wp-block-archives-list li:last-child {
  border-bottom: 0;
}

.sidebar .wp-block-latest-comments li {
  margin: 0 0 var(--mpk-space-sm);
  padding: 0 0 var(--mpk-space-sm);
  border-bottom: 1px solid var(--mpk-border);
}

.sidebar .wp-block-latest-comments li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}