/* ==========================================================
   固定ページ（LP）共通 ── Cocoonの装飾を消してLPを全幅表示
   ※ .page は固定ページ全体に付くクラス。ブログ記事には影響しません
   ========================================================== */

/* --- 消す要素 --- */
.page .entry-title,          /* ページタイトル */
.page .article-header,       /* タイトル周りの枠 */
.page .date-tags,            /* 日付エリア */
.page .post-date,            /* 投稿日 */
.page .post-update,          /* 更新日 */
.page .sns-share,            /* シェアボタン（上下とも） */
.page .sns-follow,           /* フォローボタン */
.page .author-info,          /* 投稿者情報 */
.page .breadcrumb,           /* パンくず */
.page .footer-meta,
.page .entry-card-wrap,
.page .mobile-menu-buttons,  /* スマホ下部の固定メニュー */
.page #header-container,     /* 上部ヘッダー（ロゴ＋キャッチフレーズ） */
.page .header-container,
.page .footer,               /* 最下部のCocoonフッター */
.page #footer {
  display: none !important;
}

/* --- 本文の余白をなくして全幅にする --- */
.page .content,
.page .main {
  margin-top: 0;
  padding: 0;
  border: none;
}
.page .entry-content {
  margin-top: 0;
}
/* 固定ページのサイドバーを消して本文を全幅に */
.page #sidebar,
.page .sidebar {
  display: none !important;
}
.page #main,
.page .main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.page #content,
.page .content {
  max-width: 100% !important;
}

/* =====================================================================
   ブログ記事用 追加CSS（Cocoon）  2026-09-10 v2
   貼る場所：外観 → カスタマイズ → 追加CSS
   レイアウトは .single-post（投稿ページのbody）、本文装飾は .post（記事ブロック）にだけ効く。固定ページ・LPには影響しない。
   ===================================================================== */

/* ---------- 1. 投稿ページだけ1カラム（.single-post = 投稿ページのbodyに付くクラス） ---------- */
.single-post #sidebar,
.single-post .sidebar {
  display: none !important;
}
.single-post .content-in {
  justify-content: center;
}
.single-post #main,
.single-post .main {
  width: 100%;
  max-width: 860px;
  flex: none;
  margin: 0 auto;
  border: none;
  box-shadow: none;
  background: #fff;
  padding: 36px 40px;
}
.post .article {
  border: none;
  box-shadow: none;
  background: #fff;
}
@media (max-width: 834px) {
  .single-post .main { padding: 20px 16px; }
}

/* ---------- 2. 記事タイトル ---------- */
.post .entry-title {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 30px;
  line-height: 1.45;
  margin: 8px 0 14px;
  color: #1f2a37;
}
@media (max-width: 600px) {
  .post .entry-title { font-size: 23px; }
}

/* ---------- 3. アイキャッチ ---------- */
.post .eye-catch img {
  border-radius: 16px;
}
/* Cocoon側のカテゴリーラベル（アイキャッチ左上）は画像に描いてあるので非表示 */
.post .eye-catch .cat-label {
  display: none;
}

/* ---------- 4. 本文の文字 ---------- */
.post .entry-content {
  font-size: 17px;
  line-height: 1.9;
  color: #1f2a37;
}
.post .entry-content p {
  margin-bottom: 1.5em;
}
.post .entry-content strong {
  color: #005ba3;
}
.post .entry-content a {
  color: #0079d3;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post .entry-content ul,
.post .entry-content ol {
  margin-bottom: 1.5em;
}
.post .entry-content li {
  margin: 0.35em 0;
}

/* ---------- 5. 見出し ---------- */
/* h2：灰色背景をやめ、青の下線＋ゴールドのアクセント */
.post .entry-content h2 {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 24px;
  line-height: 1.4;
  color: #1f2a37;
  background: none;
  border: none;
  border-bottom: 3px solid #0079d3;
  border-radius: 0;
  padding: 0 0 12px;
  margin: 56px 0 22px;
  position: relative;
}
.post .entry-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 64px;
  height: 3px;
  background: #f5b731;
}
/* h3：左にゴールドの線 */
.post .entry-content h3 {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 19px;
  line-height: 1.4;
  color: #1f2a37;
  background: none;
  border: none;
  border-left: 4px solid #f5b731;
  border-radius: 0;
  padding: 2px 0 2px 14px;
  margin: 36px 0 14px;
}
@media (max-width: 600px) {
  .post .entry-content h2 { font-size: 21px; margin-top: 44px; }
  .post .entry-content h3 { font-size: 17px; }
}

/* ---------- 6. 目次 ---------- */
.post .toc {
  background: #f2f9ff;
  border: none;
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 32px;
}
.post .toc-title {
  color: #005ba3;
  font-weight: 700;
}
.post .toc a {
  text-decoration: none;
}

/* ---------- 7. 記事の付属情報 ---------- */
/* 記事上のSNSシェアボタンを非表示（記事下は残す） */
.single-post .sns-share.ss-top {
  display: none;
}
/* 投稿者名を非表示 */
.single-post .author-info,
.single-post .post-author {
  display: none;
}
/* 日付は小さく右寄せのまま、色だけ薄く */
.post .post-date,
.post .post-update {
  color: #7a8794;
  font-size: 13px;
}

/* ---------- 8. 記事中のNOBUイラスト（本文側のstyleと同じ内容。念のため） ---------- */
.post .nobu-intro {
  float: right;
  width: 150px;
  margin: 0 0 12px 22px;
}
.post .nobu-intro img {
  height: auto;
}
.post .nobu-say {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 28px 0;
}
.post .nobu-say img {
  width: 96px;
  height: auto;
  flex: none;
}
@media (max-width: 600px) {
  .post .nobu-intro { width: 104px; margin: 0 0 8px 14px; }
  .post .nobu-say { gap: 10px; }
  .post .nobu-say img { width: 68px; }
}

/* =====================================================================
   カテゴリー・タグ一覧ページ用 追加CSS（Cocoon）  2026-09-10
   貼る場所：外観 → カスタマイズ → 追加CSS（ブログ記事用の下に追記）
   .archive = カテゴリー／タグ／日付一覧ページのbodyに付くクラス。
   投稿ページ・固定ページには効かない。
   ===================================================================== */

/* ---------- 1. 一覧ページも1カラム ---------- */
.archive #sidebar,
.archive .sidebar {
  display: none !important;
}
.archive .content-in {
  justify-content: center;
}
.archive #main,
.archive .main {
  width: 100%;
  max-width: 1080px;
  flex: none;
  margin: 0 auto;
  border: none;
  box-shadow: none;
  background: #fff;
  padding: 36px 40px;
}
@media (max-width: 834px) {
  .archive .main { padding: 20px 16px; }
}

/* ---------- 2. 一覧のタイトル（「はじめての経理」など） ---------- */
.archive .archive-title,
.archive .archive-header,
.archive .category-header {
  border: none;
  background: none;
  padding: 0;
}
.archive .archive-title {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 28px;
  line-height: 1.4;
  color: #1f2a37;
  margin: 8px 0 6px;
  padding-bottom: 12px;
  border-bottom: 3px solid #0079d3;
  position: relative;
}
.archive .archive-title::before {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 64px; height: 3px;
  background: #f5b731;
}
.archive .archive-title .fa {
  display: none;
}
.archive .category-description,
.archive .tag-description {
  color: #4a5a6a;
  font-size: 15px;
  margin: 12px 0 0;
}

/* ---------- 3. 記事カードをグリッドに ---------- */
.archive .list {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}
@media (min-width: 640px) {
  .archive .list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .archive .list { grid-template-columns: repeat(3, 1fr); }
}
.archive .entry-card-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 60, 120, 0.08);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.archive .entry-card-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 60, 120, 0.14);
}
.archive .entry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.archive .entry-card-thumb {
  width: 100%;
  margin: 0;
  float: none;
}
.archive .entry-card-thumb img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.archive .entry-card-content {
  margin: 0;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.archive .entry-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: #1f2a37;
  margin: 0;
}
.archive .entry-card-snippet {
  font-size: 13px;
  color: #4a5a6a;
  line-height: 1.7;
  margin: 0;
}
.archive .entry-card-meta {
  font-size: 12px;
  color: #7a8794;
  margin: 0;
}
/* アイキャッチに描いてあるので、Cocoonのカテゴリーラベルは消す */
.archive .cat-label {
  display: none;
}

/* ---------- 4. ページ送り ---------- */
.archive .pagination {
  margin-top: 36px;
}
.archive .pagination .page-numbers {
  border-radius: 999px;
  border: 1px solid #cfe4f5;
  color: #0079d3;
}
.archive .pagination .page-numbers.current {
  background: #0079d3;
  border-color: #0079d3;
  color: #fff;
}