@charset "UTF-8";
/* ==========================================================================
   ミニPC界隈 — 記事ページ本文UI
   Cocoon標準の目次・関連記事・著者欄・コメントの構造は維持し、装飾のみ調整。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 記事ヘッダー
   -------------------------------------------------------------------------- */
.article-header,
.entry-header {
  margin-bottom: var(--mpk-space-lg);
}

.entry-title,
.article h1.entry-title {
  margin: 0 0 var(--mpk-space-sm);
  font-size: var(--mpk-fs-h-lg);
  font-weight: 800;
  line-height: 1.45;
  color: var(--mpk-text);
  letter-spacing: 0.005em;
}

@media screen and (min-width: 1024px) {
  .entry-title,
  .article h1.entry-title {
    font-size: var(--mpk-fs-h-xl);
  }
}

/* Cocoon 標準の .date-tags は line-height:0.8 / text-align:right */
.date-tags,
.entry-categories-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mpk-space-xs) var(--mpk-space-md);
  margin: 0;
  font-size: var(--mpk-fs-sm);
  line-height: 1.7;
  text-align: left;
  color: var(--mpk-text-muted);
}

.eye-catch-wrap,
.entry-content > figure.wp-block-image:first-child {
  margin-bottom: var(--mpk-space-lg);
}

.eye-catch img {
  width: 100%;
  height: auto;
  border-radius: var(--mpk-radius-md);
}

/* --------------------------------------------------------------------------
   2. 見出し階層（H2を最も強く、H3・H4を段階的に弱く）
   -------------------------------------------------------------------------- */
.entry-content h2 {
  margin: var(--mpk-space-3xl) 0 var(--mpk-space-lg);
  padding: 0 0 var(--mpk-space-sm);
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: var(--mpk-lh-heading);
  letter-spacing: 0.01em;
  color: var(--mpk-text);
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--mpk-text);
  border-radius: 0;
}

.entry-content h3 {
  display: flex;
  align-items: baseline;
  gap: var(--mpk-space-xs);
  margin: var(--mpk-space-2xl) 0 var(--mpk-space-md);
  padding: 0;
  font-size: var(--mpk-fs-h-sm);
  font-weight: 800;
  line-height: var(--mpk-lh-heading);
  color: var(--mpk-text);
  background-color: transparent;
  border: 0;
}

.entry-content h3::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 4px;
  height: 1.05em;
  background-color: var(--mpk-primary);
  border-radius: var(--mpk-radius-pill);
}

.entry-content h4 {
  margin: var(--mpk-space-xl) 0 var(--mpk-space-xs);
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: var(--mpk-lh-heading);
  color: var(--mpk-text);
  background-color: transparent;
  border: 0;
}

.entry-content h5,
.entry-content h6 {
  margin: var(--mpk-space-lg) 0 var(--mpk-space-2xs);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mpk-text-muted);
  background-color: transparent;
  border: 0;
}

@media screen and (min-width: 1024px) {
  .entry-content h2 { font-size: 1.5rem; }
  .entry-content h3 { font-size: 1.25rem; }
  .entry-content h4 { font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   3. 段落・リスト・引用
   -------------------------------------------------------------------------- */
.entry-content p {
  margin: 0 0 var(--mpk-space-lg);
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--mpk-space-lg);
  padding-left: 1.6em;
}

.entry-content li {
  margin-bottom: var(--mpk-space-2xs);
  line-height: 1.85;
}

.entry-content blockquote {
  margin: 0 0 var(--mpk-space-lg);
  padding: var(--mpk-space-md) var(--mpk-space-lg);
  font-style: normal;
  color: var(--mpk-text-muted);
  background-color: var(--mpk-surface-muted);
  border: 0;
  border-left: 3px solid var(--mpk-primary);
  border-radius: 0 var(--mpk-radius-md) var(--mpk-radius-md) 0;
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content hr {
  margin: var(--mpk-space-2xl) 0;
  border: 0;
  border-top: 1px solid var(--mpk-border);
}

/* --------------------------------------------------------------------------
   4. 表（横スクロール可能・文字を小さくしすぎない）
   -------------------------------------------------------------------------- */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table,
.mpk-table-scroll {
  max-width: 100%;
  margin: 0 0 var(--mpk-space-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
  スクロール用ラッパー（figure.wp-block-table / .scrollable-table）を持たず
  .entry-content の直下に置かれた表は、それ自身をスクロールコンテナにする。
  ラッパーの中にある表は直下ではないのでこの指定を受けず、通常の table のまま。
*/
.entry-content > table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entry-content table {
  width: 100%;
  min-width: 480px;
  font-size: var(--mpk-fs-sm);
  line-height: 1.75;
  border-collapse: collapse;
  border: 1px solid var(--mpk-border);
}

.entry-content th,
.entry-content td {
  padding: 10px var(--mpk-space-sm);
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--mpk-border);
}

.entry-content thead th,
.entry-content th {
  font-weight: 700;
  color: var(--mpk-text);
  background-color: var(--mpk-surface-muted);
}

.entry-content thead th {
  color: var(--mpk-surface);
  background-color: var(--mpk-primary);
  border-color: var(--mpk-primary);
}

.entry-content tbody tr:nth-child(even) td {
  background-color: var(--mpk-surface-muted);
}

.entry-content table caption,
.entry-content figcaption {
  padding: var(--mpk-space-xs) 0;
  font-size: var(--mpk-fs-xs);
  line-height: 1.7;
  color: var(--mpk-text-muted);
  text-align: left;
  caption-side: bottom;
}

/* 数値列を読みやすく（列に .mpk-num を付けた場合） */
.entry-content td.mpk-num,
.entry-content th.mpk-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. コード（画面外へ出さない）
   -------------------------------------------------------------------------- */
.entry-content code {
  padding: 0.15em 0.4em;
  font-family: var(--mpk-font-mono);
  font-size: 0.9em;
  color: var(--mpk-text);
  background-color: var(--mpk-surface-muted);
  border: 1px solid var(--mpk-border);
  border-radius: var(--mpk-radius-sm);
  word-break: break-all;
}

.entry-content kbd {
  padding: 0.15em 0.45em;
  font-family: var(--mpk-font-mono);
  font-size: 0.85em;
  color: var(--mpk-text);
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--mpk-radius-sm);
}

.entry-content pre {
  max-width: 100%;
  margin: 0 0 var(--mpk-space-lg);
  padding: var(--mpk-space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--mpk-font-mono);
  font-size: var(--mpk-fs-sm);
  line-height: 1.75;
  color: var(--mpk-text);
  background-color: var(--mpk-surface-muted);
  border: 1px solid var(--mpk-border);
  border-radius: var(--mpk-radius-md);
  tab-size: 2;
}

.entry-content pre code {
  padding: 0;
  font-size: inherit;
  white-space: pre;
  word-break: normal;
  background-color: transparent;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. 画像・figure（レイアウトシフト防止）
   -------------------------------------------------------------------------- */
.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content figure {
  margin: 0 0 var(--mpk-space-lg);
}

.entry-content figure img {
  border-radius: var(--mpk-radius-sm);
}

/* --------------------------------------------------------------------------
   7. 目次（Cocoon標準）
   -------------------------------------------------------------------------- */
.entry-content .toc,
.toc {
  margin: var(--mpk-space-xl) 0;
  padding: var(--mpk-space-md);
  background-color: var(--mpk-surface-muted);
  border: 0;
  border-radius: var(--mpk-radius-md);
}

.toc-title {
  font-size: var(--mpk-fs-lg);
  font-weight: 800;
  color: var(--mpk-text);
}

.toc-content ol,
.toc-content ul {
  font-size: var(--mpk-fs-sm);
  line-height: 1.9;
}

.toc-content a {
  color: var(--mpk-link);
  text-decoration: none;
}

.toc-content a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   8. ブログカード（内部リンク）
   -------------------------------------------------------------------------- */
.blogcard-wrap {
  margin: var(--mpk-space-lg) 0;
}

.blogcard {
  padding: var(--mpk-space-md);
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-border);
  border-radius: var(--mpk-radius-md);
  box-shadow: none;
  transition: border-color var(--mpk-transition), box-shadow var(--mpk-transition);
}

.blogcard-wrap:hover .blogcard {
  background-color: var(--mpk-surface);
  border-color: transparent;
  box-shadow: var(--mpk-shadow-md);
}

.blogcard-title {
  font-weight: 700;
  line-height: var(--mpk-lh-tight);
  color: var(--mpk-text);
}

.blogcard-snippet {
  font-size: var(--mpk-fs-xs);
  color: var(--mpk-text-muted);
}

/* --------------------------------------------------------------------------
   9. 関連記事（Cocoon標準）
   -------------------------------------------------------------------------- */
.related-entries {
  margin-top: var(--mpk-space-2xl);
  padding-top: var(--mpk-space-lg);
  border-top: 1px solid var(--mpk-border);
}

.related-entry-heading .main-caption {
  font-size: var(--mpk-fs-h-md);
  font-weight: 800;
  color: var(--mpk-text);
}

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

.related-entry-card-wrap:hover {
  background-color: var(--mpk-surface-muted);
}

/* --------------------------------------------------------------------------
   10. 著者欄
   -------------------------------------------------------------------------- */
.author-box {
  margin-top: var(--mpk-space-xl);
  padding: var(--mpk-space-lg);
  background-color: var(--mpk-surface-muted);
  border: 0;
  border-radius: var(--mpk-radius-md);
}

.author-name {
  font-weight: 700;
  color: var(--mpk-text);
}

.author-description {
  font-size: var(--mpk-fs-sm);
  line-height: 1.8;
  color: var(--mpk-text-muted);
}

/* --------------------------------------------------------------------------
   11. コメント
   -------------------------------------------------------------------------- */
/*
  #comments は「コメント」見出し（h2）に付くID。包む要素ではない。
  実際のコンテナは div#comment-area。ここを取り違えると、見出しに枠線が付いて
  空の箱が見えたり、フォームの指定が一切効かなくなる。
*/
.comment-area {
  margin-top: var(--mpk-space-2xl);
  padding-top: var(--mpk-space-xl);
  border-top: 1px solid var(--mpk-border);
}

.comment-title,
.comment-reply-title {
  font-size: var(--mpk-fs-h-md);
  font-weight: 800;
  color: var(--mpk-text);
}

.comment-area textarea,
.comment-area input[type="text"],
.comment-area input[type="email"],
.comment-area input[type="url"] {
  width: 100%;
  padding: var(--mpk-space-xs) var(--mpk-space-sm);
  font-size: 1rem;
  border: 1px solid var(--mpk-border-strong);
  border-radius: var(--mpk-radius-sm);
}

.comment-area label {
  display: block;
  margin-bottom: var(--mpk-space-2xs);
  font-size: var(--mpk-fs-sm);
  font-weight: 600;
}

.comment-area input[type="submit"],
.comment-area #submit {
  min-height: 52px;
  padding-inline: var(--mpk-space-xl);
  font-weight: 700;
  color: var(--mpk-surface);
  background-color: var(--mpk-primary);
  border: 0;
  border-radius: var(--mpk-radius-pill);
  cursor: pointer;
  transition: background-color var(--mpk-transition);
}

.comment-area input[type="submit"]:hover,
.comment-area #submit:hover {
  background-color: var(--mpk-primary-dark);
}

/* --------------------------------------------------------------------------
   12. 前後記事ナビ
   -------------------------------------------------------------------------- */
.pager-post-navi a {
  border: 1px solid var(--mpk-border);
  border-radius: var(--mpk-radius-md);
  transition: border-color var(--mpk-transition), box-shadow var(--mpk-transition);
}

.pager-post-navi a:hover {
  background-color: var(--mpk-surface);
  border-color: transparent;
  box-shadow: var(--mpk-shadow-md);
}

/* --------------------------------------------------------------------------
   13. コメント一覧
   -------------------------------------------------------------------------- */
.commets-list,
.commets-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.commets-list .comment-body {
  margin: 0 0 var(--mpk-space-lg);
  padding: var(--mpk-space-lg);
  background-color: var(--mpk-surface-muted);
  border: 0;
  border-radius: var(--mpk-radius-md);
}

.comment-author.vcard {
  display: flex;
  align-items: center;
  gap: var(--mpk-space-sm);
  margin-bottom: var(--mpk-space-2xs);
  font-size: var(--mpk-fs-sm);
}

.comment-author.vcard img.avatar {
  order: -1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-author.vcard .fn,
.comment-author.vcard cite {
  font-style: normal;
  font-weight: 700;
  color: var(--mpk-text);
}

.comment-author.vcard a,
.comment-meta a {
  color: var(--mpk-text-muted);
  font-style: normal;
  text-decoration: none;
}

.comment-author.vcard a:hover,
.comment-meta a:hover {
  color: var(--mpk-primary);
  text-decoration: underline;
}

.comment-meta.commentmetadata {
  margin-bottom: var(--mpk-space-sm);
  font-size: var(--mpk-fs-xs);
  color: var(--mpk-text-muted);
}

.commets-list .comment-body p {
  margin: 0 0 var(--mpk-space-xs);
  font-size: var(--mpk-fs-md);
}

.comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding-inline: var(--mpk-space-md);
  font-size: var(--mpk-fs-xs);
  font-weight: 700;
  color: var(--mpk-primary);
  text-decoration: none;
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-border-mid);
  border-radius: var(--mpk-radius-pill);
  transition: color var(--mpk-transition), background-color var(--mpk-transition), border-color var(--mpk-transition);
}

.comment-reply-link:hover {
  color: var(--mpk-surface);
  background-color: var(--mpk-primary);
  border-color: var(--mpk-primary);
}

/* 「コメントを書き込む」開閉ボタン */
.comment-btn,
.comment-area .comment-btn.key-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: var(--mpk-space-lg);
  font-size: var(--mpk-fs-md);
  font-weight: 700;
  color: var(--mpk-primary);
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-primary);
  border-radius: var(--mpk-radius-pill);
  cursor: pointer;
  transition: color var(--mpk-transition), background-color var(--mpk-transition);
}

.comment-btn:hover,
.comment-area .comment-btn.key-btn:hover {
  color: var(--mpk-surface);
  background-color: var(--mpk-primary);
}

/* --------------------------------------------------------------------------
   14. SNSシェアボタン
       記事タイトル直下（ss-top）は導線として控えめに。
       記事末尾（ss-bottom）は従来どおりの大きさで残す。
   -------------------------------------------------------------------------- */
.sns-share,
.sns-follow {
  margin-block: var(--mpk-space-xl);
}

.sns-buttons a {
  border-radius: var(--mpk-radius-sm);
}

.sns-share.ss-top {
  margin-block: var(--mpk-space-md) var(--mpk-space-lg);
}

.sns-share.ss-top .sns-buttons a {
  flex-wrap: nowrap;
  gap: 6px;
  height: 40px;
  font-size: var(--mpk-fs-md);
}

.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-top .sns-buttons a .button-caption {
  width: auto;
}

.sns-share.ss-top .sns-buttons a .button-caption {
  font-size: var(--mpk-fs-xs);
}

.sns-share-message,
.sns-follow-message {
  font-size: var(--mpk-fs-sm);
  font-weight: 700;
  color: var(--mpk-text-muted);
}

/* --------------------------------------------------------------------------
   15. トップへ戻る
   -------------------------------------------------------------------------- */
.go-to-top-button {
  color: var(--mpk-surface);
  background-color: var(--mpk-primary);
  border-radius: var(--mpk-radius-md);
  box-shadow: var(--mpk-shadow-md);
  transition: background-color var(--mpk-transition);
}

.go-to-top-button:hover {
  background-color: var(--mpk-primary-dark);
}

/* --------------------------------------------------------------------------
   16. 関連記事が0件のときに空の枠を作らない
   -------------------------------------------------------------------------- */
.related-entries .related-entry-heading + p,
.related-entries > p {
  margin: 0;
  font-size: var(--mpk-fs-sm);
  color: var(--mpk-text-muted);
}

/* 投稿者リンク（記事末尾） */
.entry-footer .author-info,
.footer-meta .author-info {
  font-size: var(--mpk-fs-xs);
}

.entry-footer .author-info a,
.footer-meta .author-info a {
  color: var(--mpk-text-muted);
  text-decoration: none;
}

.entry-footer .author-info a:hover,
.footer-meta .author-info a:hover {
  color: var(--mpk-primary);
  text-decoration: underline;
}