@charset "UTF-8";
/* =========================================================
   11-page-archive.css — works/column アーカイブ + 単記事
   FAMiLIA の single/archive パターンを Libero 配色（B&W）で移植
   ========================================================= */

/* ============================================
   SINGLE POST: 記事ヘッダ（FAMiLIA fam-article__head 踏襲・中央寄せ大見出し）
   ============================================ */
.single .c-pageTitle,
.single .p-articleHead {
  display: block !important;
  max-width: 840px;
  margin: 0 auto !important;
  padding: 80px 32px 48px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--ink-100) !important;
  background: transparent !important;
  position: relative !important;
}
.single .c-pageTitle::before,
.single .c-pageTitle::after,
.single .p-articleHead::before,
.single .p-articleHead::after { content: none !important; display: none !important; }

.single .c-pageTitle__main,
.single .p-articleHead__title,
.single .p-articleHead h1 {
  font-family: "Noto Sans JP", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-1000) !important;
  margin: 0 0 20px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: center !important;
}

/* SWELL の big-date 表示（年/月日の縦並び）を非表示 */
.single .p-articleHead .c-articleHead__date,
.single .p-articleHead .c-articleHead__year,
.single .p-articleHead .c-articleHead__day,
.single .p-articleHead__date,
.single .p-articleHead .__date,
.single .p-articleHead .c-postTimes__day,
.single .p-articleHead .c-postTimes__year { display: none !important; }

/* 投稿日と更新日（c-postTimes）はシンプルな1行表示で残す */
.single .c-postTimes,
.single .p-articleHead .c-postTimes,
.single .p-articleHead time {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-500) !important;
}
.single .p-articleHead .c-postTimes {
  justify-content: center !important;
  display: flex !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

/* カテゴリラベル：タイトル上に中央表示 */
.single .p-articleHead .post-categories,
.single .p-articleHead .c-postCat,
.single .p-articleHead .p-postList__cat {
  display: flex !important;
  justify-content: center !important;
  margin: 0 0 16px !important;
  list-style: none !important;
  padding: 0 !important;
  gap: 8px !important;
}
.single .p-articleHead .post-categories a,
.single .p-articleHead .c-postCat a,
.single .p-articleHead .p-postList__cat a {
  background: var(--ink-1000) !important;
  color: var(--paper) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
}

/* ============================================
   SINGLE POST: 本文
   ============================================ */
.single .post_content,
.single article.l-article .post_content,
.single article.l-article {
  max-width: 840px !important;
  margin: 0 auto !important;
  padding-inline: 32px !important;
  padding-block: 48px 96px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-700);
}
.single .post_content p { margin-block: 1.5em; }

/* h2 — 黒の縦バー + 下罫線 */
.single .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)),
.single .post_content h2 {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ink-1000) !important;
  padding: 0 0 14px 18px !important;
  margin-block: 56px 24px !important;
  border-left: 4px solid var(--ink-1000) !important;
  border-bottom: 1px solid var(--ink-100) !important;
  font-family: "Noto Sans JP", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
}
.single .post_content h2::before,
.single .post_content h2::after,
.single .post_content h3::before,
.single .post_content h3::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}
.single .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)),
.single .post_content h3 {
  padding: 0 0 8px 0 !important;
  margin-block: 40px 16px !important;
  font-family: "Noto Sans JP", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--ink-1000) !important;
  border-bottom: 1px solid var(--ink-100) !important;
}

.single .post_content a {
  color: var(--ink-1000);
  border-bottom: 1px solid var(--ink-300);
  transition: border-color 200ms;
}
.single .post_content a:hover { border-color: var(--ink-1000); }

.single .post_content blockquote {
  border-left: 3px solid var(--ink-1000);
  background: var(--ink-50);
  padding: 16px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--ink-700);
}
.single .post_content code {
  background: var(--ink-50);
  padding: 2px 6px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Table of Contents（SWELLの p-toc） */
.single .p-toc,
.single .p-toc.-double {
  background: var(--ink-50) !important;
  border: 1px solid var(--ink-200) !important;
  border-radius: 4px !important;
  padding: 28px 32px !important;
  margin: 32px auto !important;
  max-width: 720px !important;
}
.single .p-toc::before,
.single .p-toc::after { display: none !important; background: none !important; }
.single .p-toc__ttl {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ink-1000) !important;
  margin-bottom: 12px !important;
}
.single .p-toc__ttl::before { color: var(--ink-1000) !important; }
.single .p-toc__list a,
.single .p-toc__link {
  color: var(--ink-700) !important;
  font-size: 14px !important;
}

/* 関連記事 */
.single .swell-block-relatedPosts > h2,
.single .p-relatedPosts > h2,
.single .c-secTitle,
.single .p-relatedPosts__title {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ink-1000) !important;
  padding: 0 0 14px 18px !important;
  border-left: 4px solid var(--ink-1000) !important;
  border-bottom: 1px solid var(--ink-100) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
}

/* ============================================
   ARCHIVE（works / column 一覧）
   ============================================ */
.archive .l-mainContent,
.post-type-archive .l-mainContent,
.post-type-archive-works .l-mainContent,
.post-type-archive-column .l-mainContent {
  padding: 80px 32px 96px;
  max-width: 1240px;
  margin: 0 auto;
}
.archive .p-archiveContent { margin: 0 !important; }
.archive .p-postList,
.lib-postlist .p-postList {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
.archive .p-postList__item,
.lib-postlist .p-postList__item,
.lib-postlist .p-postList.-type-card .p-postList__item {
  background: var(--paper) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 4px !important;
  overflow: hidden;
  box-shadow: none !important;
  transition: all 220ms;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}
.archive .p-postList__item:hover,
.lib-postlist .p-postList__item:hover {
  transform: translateY(-2px);
  border-color: var(--ink-1000) !important;
}
.archive .p-postList__link,
.lib-postlist .p-postList__link {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
}
.archive .p-postList__thumb,
.archive .p-postList__thumb.c-postThumb,
.lib-postlist .p-postList__thumb {
  aspect-ratio: 16/10 !important;
  width: 100% !important;
  background: linear-gradient(135deg, #1a1a1a, #3d3d3d) !important;
}
.archive .p-postList__thumb.noimg_ {
  background: linear-gradient(135deg, #1a1a1a, #3d3d3d) !important;
}
.archive .p-postList__thumb img,
.archive .c-postThumb__img,
.lib-postlist .p-postList__thumb img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
}
.archive .p-postList__body,
.lib-postlist .p-postList__body {
  padding: 20px 22px 22px !important;
}
.archive .p-postList__title,
.lib-postlist .p-postList__title {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--ink-1000) !important;
  margin: 0 0 12px !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.archive .p-postList__title::before,
.archive .p-postList__title::after { display: none !important; }
.archive .p-postList__excerpt,
.lib-postlist .p-postList__excerpt {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--ink-700) !important;
  margin: 0 0 12px !important;
}
.archive .p-postList__times,
.archive .c-postTimes,
.lib-postlist .p-postList__times {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  color: var(--ink-500) !important;
  letter-spacing: 0.04em !important;
}
.archive .p-postList .p-postList__cat,
.lib-postlist .p-postList .p-postList__cat {
  background: var(--ink-1000) !important;
  color: var(--paper) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 2px !important;
}

/* アーカイブのページタイトル */
.archive .c-pageTitle,
.archive .p-archiveTitle {
  text-align: center;
  margin-bottom: 56px !important;
  font-family: "Noto Sans JP", sans-serif;
  display: block !important;
}
.archive .c-pageTitle__main,
.archive .p-archiveTitle__main {
  font-weight: 900 !important;
  font-size: clamp(32px, 4.2vw, 56px) !important;
  color: var(--ink-1000) !important;
  letter-spacing: -0.02em !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: "Inter", "Noto Sans JP", sans-serif !important;
  text-transform: uppercase;
}
.archive .c-pageTitle__sub,
.archive .p-archiveTitle__sub {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 12px;
}

/* 単記事レイアウト調整 */
.single-works .l-mainContent,
.single-column .l-mainContent {
  max-width: 880px;
  margin: 0 auto;
  padding: calc(var(--lib-header-h) + 80px) var(--lib-gutter) 96px;
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .archive .p-postList,
  .lib-postlist .p-postList { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .archive .p-postList,
  .lib-postlist .p-postList { grid-template-columns: 1fr !important; }
  .archive .l-mainContent,
  .post-type-archive .l-mainContent,
  .post-type-archive-works .l-mainContent,
  .post-type-archive-column .l-mainContent { padding: 64px 20px 80px; }
  .single .post_content,
  .single article.l-article { padding-block: 32px; }
}