/* ═══════════════════════════════════════════════════════════
   とやパン ─ はてなブログ用 デザインCSS
   貼り付け先: 管理画面 → デザイン → カスタマイズ → {} デザインCSS
   前提: 公式テーマ「Minimalism」または「Report」など素直なテーマ
         トップページの表示形式 → 「一覧形式」／記事一覧のサムネイル → ON
   ═══════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&family=Noto+Sans+JP:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --tp-paper:       #FDFCF8;
  --tp-paper-soft:  #F7F3E8;
  --tp-paper-bone:  #F2EBD6;
  --tp-ink:         #1A1814;
  --tp-ink-soft:    #36312A;
  --tp-ink-mute:    #6B6558;
  --tp-ink-faint:   #A59C87;
  --tp-rule:        #E5DECB;
  --tp-rule-dark:   #BEB29A;
  --tp-warm:        oklch(58% 0.11 28);   /* 柿渋 — 日付・アクセント */
  --tp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --tp-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --tp-mono:  "JetBrains Mono", ui-monospace, monospace;
}

/* ─── 全体 ─────────────────────────────────────────── */
body {
  background: var(--tp-paper) !important;
  color: var(--tp-ink-soft);
  font-family: var(--tp-serif);
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}
#container, #content, #main, #main-inner, #wrapper, #box2 { background: transparent !important; }
#globalheader-container { background: var(--tp-paper) !important; }

#content-inner {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 5vw, 60px) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
#main, #box2 { width: 100% !important; float: none !important; margin: 0 !important; }

/* ─── マストヘッド ─────────────────────────────────── */
#blog-title {
  background: var(--tp-paper) !important;
  border: 0 !important;
  padding: 56px 24px 0 !important;
  text-align: center;
}
#blog-title::before {
  content: "BREAD & SWEETS JOURNAL";
  display: block;
  font-family: var(--tp-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--tp-warm);
  margin-bottom: 22px;
}
#title {
  font-family: var(--tp-serif) !important;
  font-weight: 500;
  font-size: 32px !important;
  letter-spacing: 0.28em !important;
  text-indent: 0.28em;
  margin: 0 !important;
}
#title a { color: var(--tp-ink) !important; text-decoration: none !important; }
#blog-description {
  font-family: var(--tp-serif) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: 0.14em;
  color: var(--tp-ink-mute) !important;
  margin: 12px 0 0 !important;
}
/* ヘッダ下ナビ（ヘッダ→タイトル下 HTML に .tp-nav を貼る）— 罫線はナビの下に */
#top-editarea { border-bottom: 1px solid var(--tp-rule); background: var(--tp-paper); }
.tp-nav {
  display: flex; justify-content: center; gap: 36px;
  margin: 0 auto; padding: 34px 0 22px;
  font-family: var(--tp-sans); font-size: 11px; letter-spacing: 0.25em;
}
.tp-nav a { color: var(--tp-ink-mute); text-decoration: none; }
.tp-nav a:hover, .tp-nav a.is-current { color: var(--tp-ink); }
#blog-title-inner { padding-bottom: 0; }

/* ─── パンくず ─────────────────────────────────────── */
.breadcrumb, #top-box .breadcrumb, .breadcrumb-inner {
  font-family: var(--tp-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: var(--tp-ink-mute) !important;
  max-width: 1080px !important;
  margin: 32px auto 0 !important;
  padding: 0 clamp(20px, 5vw, 60px) !important;
  box-sizing: border-box;
}
.breadcrumb .breadcrumb-inner { margin: 0 !important; padding: 0 !important; }
.breadcrumb-gt { margin: 0 8px; color: var(--tp-ink-faint); }
.breadcrumb a { color: var(--tp-ink-mute) !important; text-decoration: none !important; }

/* ─── 記事一覧（一覧形式 → 写真グリッド） ────────────── */
.archive-entries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 32px;
  padding-top: 56px;
}
.archive-entry {
  display: flex !important; flex-direction: column !important; gap: 14px;
  background: transparent !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 !important;
}
/* サムネイルを先頭に・正方形に（DOMでは見出しの後にあるので order で並べ替え） */
.archive-entry > .entry-thumb-link { order: -1 !important; display: block !important; width: 100%; margin: 0 !important; }
.archive-entry > .archive-entry-header { order: 1 !important; }
.archive-entry > .categories { order: 2 !important; }
.archive-entry .entry-thumb,
.archive-entry .entry-thumb-link img {
  display: block; width: 100% !important; height: auto !important;
  aspect-ratio: 1 / 1 !important; object-fit: cover;
  background-size: cover !important; background-position: center;
  background-color: var(--tp-paper-bone);
  filter: saturate(0.92);
  float: none !important; margin: 0 !important; border-radius: 0 !important;
}
/* 写真がない記事は淡い紙色のタイル */
.archive-entry:not(:has(.entry-thumb-link)) .archive-entry-header::before {
  content: "NO PHOTO";
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; margin-bottom: 14px;
  background: var(--tp-paper-soft); border: 1px solid var(--tp-rule);
  font-family: var(--tp-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--tp-ink-mute);
}
.archive-entry-header { margin: 0 !important; }
.archive-date {
  display: block; margin-bottom: 14px;
  font-family: var(--tp-mono) !important; font-size: 10px !important;
  letter-spacing: 0.28em; color: var(--tp-warm) !important;
}
.archive-date a { color: inherit !important; text-decoration: none !important; }
.archive-entry .entry-title,
.archive-entry .archive-entry-title {
  font-family: var(--tp-serif) !important; font-weight: 500 !important;
  font-size: 17px !important; line-height: 1.7 !important; letter-spacing: 0.04em !important;
  margin: 0 !important; padding: 0 !important; max-width: none !important; text-align: left !important; text-wrap: pretty;
}
.archive-entry .entry-title a { color: var(--tp-ink) !important; text-decoration: none !important; }
.archive-entry .entry-title a:hover { opacity: 0.6; }
.archive-entry-body, .entry-description, .archive-entry-tags, .social-buttons { display: none !important; }
.archive-entry .categories {
  margin: 0 !important; display: flex !important; gap: 18px;
  font-family: var(--tp-sans); font-size: 10px; letter-spacing: 0.25em;
}
.archive-entry .categories a {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: var(--tp-ink-mute) !important; text-decoration: none !important;
}

/* カテゴリ／アーカイブページの見出し */
.archive-header-category, .archive-heading {
  text-align: center; border-bottom: 1px solid var(--tp-rule);
  padding: 56px 0 48px !important; margin: 0 !important;
}
.archive-heading {
  font-family: var(--tp-serif) !important; font-weight: 500 !important;
  font-size: 40px !important; letter-spacing: 0.3em; text-indent: 0.3em; color: var(--tp-ink);
}
.archive-header-category .archive-heading { border: 0; padding: 0 !important; }
.archive-header-category .archive-heading::before {
  content: "CATEGORY"; display: block; margin-bottom: 16px;
  font-family: var(--tp-mono); font-size: 10px; letter-spacing: 0.3em; text-indent: 0; color: var(--tp-warm);
}
.archive-header-category .archive-description { font-size: 13px; letter-spacing: 0.1em; color: var(--tp-ink-mute); margin: 14px 0 0; }
/* 新着順｜人気順（直後の要素を汎用的に捕まえる） */
.archive-header-category + *:not(.archive-entries) {
  display: flex; gap: 28px; margin: 32px 0 8px !important; padding: 0 !important;
  font-family: var(--tp-sans); font-size: 11px; letter-spacing: 0.22em; font-weight: 400;
}
.archive-header-category + *:not(.archive-entries) a,
.archive-header-category + *:not(.archive-entries) span,
.archive-header-category + *:not(.archive-entries) strong,
.archive-header-category + *:not(.archive-entries) b {
  color: var(--tp-ink-mute); text-decoration: none; font-weight: 400; padding-bottom: 6px; font-family: var(--tp-sans);
}
.archive-header-category + *:not(.archive-entries) strong,
.archive-header-category + *:not(.archive-entries) b,
.archive-header-category + *:not(.archive-entries) .selected { color: var(--tp-ink); border-bottom: 1px solid var(--tp-ink); }
.archive-sort, .archive-header-category + .archive-sort {
  display: flex; gap: 28px; margin: 32px 0 8px;
  font-family: var(--tp-sans); font-size: 11px; letter-spacing: 0.22em;
}
.archive-sort a, .archive-sort span, .archive-sort .archive-sort-item { color: var(--tp-ink-mute); text-decoration: none; padding-bottom: 6px; font-weight: 400; }
.archive-sort .archive-sort-item.selected, .archive-sort > span:not(.archive-sort-sep) { color: var(--tp-ink); border-bottom: 1px solid var(--tp-ink); }
.archive-sort .archive-sort-sep, .archive-sort .sep { display: none; }

/* ページャー */
.pager {
  border: 0 !important; border-top: 1px solid var(--tp-rule) !important; border-bottom: 1px solid var(--tp-rule) !important;
  margin: 72px 0 0 !important; padding: 32px 0 !important;
  display: flex !important; justify-content: space-between; gap: 24px; background: none !important;
}
.pager a {
  font-family: var(--tp-mono); font-size: 10px; letter-spacing: 0.3em;
  color: var(--tp-ink) !important; text-decoration: none !important;
  background: none !important; border: 0 !important; padding: 0 !important;
}
.pager .pager-next { margin-left: auto; }

/* ─── 記事ページ ───────────────────────────────────── */
.entry {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 56px 0 0 !important; margin: 0 !important;
}
.entry-header { text-align: center; border: 0 !important; padding: 0 !important; margin-bottom: 44px !important; }
.entry-header .date {
  display: block; margin-bottom: 16px;
  font-family: var(--tp-mono) !important; font-size: 10px !important; letter-spacing: 0.3em; color: var(--tp-warm) !important;
}
.entry-header .date a { color: inherit !important; text-decoration: none !important; }
.entry-title {
  font-family: var(--tp-serif) !important; font-weight: 500 !important;
  font-size: 32px !important; line-height: 1.65 !important; letter-spacing: 0.08em;
  max-width: 680px; margin: 0 auto !important; text-wrap: pretty;
}
.entry-title a { color: var(--tp-ink) !important; text-decoration: none !important; }
.entry-header .entry-categories {
  display: flex; justify-content: center; gap: 18px; margin-top: 18px;
  font-family: var(--tp-sans); font-size: 10px; letter-spacing: 0.25em;
}
.entry-header .entry-categories a { background: none !important; border: 0 !important; padding: 0 !important; color: var(--tp-ink-mute) !important; text-decoration: none !important; }
.entry-header::after { content: ""; display: block; width: 32px; height: 1px; background: var(--tp-warm); margin: 26px auto 0; }

/* 本文 */
.entry-content {
  max-width: 680px; margin: 0 auto;
  font-family: var(--tp-serif) !important; font-size: 16px !important; line-height: 2.2 !important;
  letter-spacing: 0.04em; color: var(--tp-ink-soft);
}
.entry-content p { margin: 1.4em 0; }
.entry-content h2 {
  font-family: var(--tp-serif) !important; font-weight: 500 !important; font-size: 22px !important;
  letter-spacing: 0.08em; color: var(--tp-ink) !important;
  border: 0 !important; border-top: 1px solid var(--tp-ink) !important; background: none !important;
  padding: 28px 0 0 !important; margin: 64px 0 22px !important;
}
.entry-content h3 {
  font-family: var(--tp-serif) !important; font-weight: 500 !important; font-size: 17px !important;
  letter-spacing: 0.05em; color: var(--tp-ink) !important;
  border: 0 !important; border-left: 2px solid var(--tp-warm) !important; background: none !important;
  padding: 0 0 0 14px !important; margin: 40px 0 14px !important;
}
.entry-content h4 { font-family: var(--tp-serif) !important; font-weight: 500 !important; font-size: 15px !important; color: var(--tp-ink) !important; border: 0 !important; background: none !important; margin: 28px 0 8px !important; }
.entry-content ul, .entry-content ol { padding-left: 1.2em; line-height: 2.1; }
.entry-content a { color: var(--tp-ink) !important; text-decoration: none !important; border-bottom: 1px solid var(--tp-warm); transition: opacity .2s; }
.entry-content a:hover { opacity: 0.55; }
.entry-content a.keyword { border-bottom: 1px dotted var(--tp-rule-dark); color: inherit !important; }

/* 写真：全幅・角なし。直後の1行段落をキャプション扱いに */
.entry-content img { max-width: 100%; height: auto; border-radius: 0 !important; box-shadow: none !important; display: block; margin: 0 auto; }
.entry-content p:has(> img:only-child), .entry-content .hatena-fotolife { margin: 44px 0 12px; }
.entry-content p:has(> img:only-child) + p {
  margin: 0 0 44px; text-align: center;
  font-size: 12px; letter-spacing: 0.06em; color: var(--tp-ink-mute);
}
.entry-content blockquote {
  border: 0 !important; border-top: 1px solid var(--tp-ink) !important; border-bottom: 1px solid var(--tp-ink) !important;
  background: none !important; border-radius: 0 !important;
  padding: 32px 0 !important; margin: 56px 0 !important;
  font-size: 18px !important; line-height: 1.9 !important; letter-spacing: 0.05em; color: var(--tp-ink) !important; text-align: center;
}
.entry-content hr { border: 0 !important; border-top: 1px solid var(--tp-rule) !important; margin: 56px auto !important; }

/* Amazon／楽天 商品カード → 細い横長カード */
.entry-content .hatena-asin-detail, .entry-content .rakuten-affiliate, .entry-content .freezed-asin-detail {
  display: flex; gap: 22px; align-items: center;
  border: 0 !important; border-top: 1px solid var(--tp-rule) !important; border-bottom: 1px solid var(--tp-rule) !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 20px 0 !important; margin: 36px 0 !important;
}
.entry-content .hatena-asin-detail-image-link, .entry-content .rakuten-affiliate-image-link { flex: none; }
.entry-content .hatena-asin-detail-image, .entry-content .rakuten-affiliate-image { width: 64px !important; height: 88px !important; object-fit: cover; margin: 0 !important; background: var(--tp-paper-bone); }
.entry-content .hatena-asin-detail-info, .entry-content .rakuten-affiliate-info { flex: 1; min-width: 0; padding: 0 !important; }
.entry-content .hatena-asin-detail-title, .entry-content .rakuten-affiliate-title { font-size: 14px !important; line-height: 1.7 !important; letter-spacing: 0.03em; margin: 0 !important; }
.entry-content .hatena-asin-detail-title a, .entry-content .rakuten-affiliate-title a { color: var(--tp-ink) !important; border: 0 !important; }
.entry-content .hatena-asin-detail-title::before { content: "RECIPE BOOK"; display: block; margin-bottom: 6px; font-family: var(--tp-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--tp-warm); }
.entry-content .hatena-asin-detail-meta, .entry-content .rakuten-affiliate-meta { font-family: var(--tp-sans); font-size: 11px !important; letter-spacing: 0.1em; color: var(--tp-ink-mute); margin: 4px 0 0 !important; padding: 0 !important; list-style: none; }
.entry-content .hatena-asin-detail-meta li { display: inline; }
.entry-content .hatena-asin-detail-meta li + li::before { content: " · "; }
.entry-content .hatena-asin-detail-meta a, .entry-content .rakuten-affiliate-meta a { color: inherit !important; border: 0 !important; }
.entry-content .asin-detail-foot, .entry-content .rakuten-affiliate-foot {
  flex: none; font-family: var(--tp-mono); font-size: 10px; letter-spacing: 0.25em; color: var(--tp-ink-mute);
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
.entry-content .asin-detail-foot a, .entry-content .rakuten-affiliate-foot a { color: var(--tp-ink-mute) !important; border: 0 !important; }
.entry-content .asin-detail-foot a::after { content: " »"; }

/* 埋め込みカード（はてなブログカード）を細く */
.entry-content iframe.embed-card { border-top: 1px solid var(--tp-rule) !important; border-bottom: 1px solid var(--tp-rule) !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }

/* 記事フッタ（著者・日時・ボタン） */
.entry-footer { max-width: 680px; margin: 56px auto 0; }
.entry-footer-section, .entry-footer .author, .entry-footer-time, .author-name {
  font-family: var(--tp-sans) !important; font-size: 11px !important; letter-spacing: 0.12em; color: var(--tp-ink-mute) !important;
}
.entry-footer-section a { color: var(--tp-ink-mute) !important; text-decoration: none !important; }
.entry-footer .hatena-id-icon { width: 16px !important; height: 16px !important; border-radius: 50%; vertical-align: -3px; margin-right: 6px; }
.entry-footer .social-buttons { display: flex; gap: 22px; margin-top: 16px; }
.entry-footer .hatena-star-container, .entry-footer .customized-footer { margin-top: 16px; }

/* 前後の記事 */
.entry .pager { max-width: 680px; margin: 56px auto !important; padding: 36px 0 !important; }
.entry .pager a {
  display: block; max-width: 46%;
  font-family: var(--tp-serif); font-size: 14px; line-height: 1.6; letter-spacing: 0.05em; color: var(--tp-ink) !important;
}
.entry .pager-prev a::before, .entry .pager-next a::before {
  display: block; margin-bottom: 6px;
  font-family: var(--tp-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--tp-warm);
}
.entry .pager-prev a::before { content: "« PREV"; }
.entry .pager-next a::before { content: "NEXT »"; }
.entry .pager-next { text-align: right; }
.entry .pager .pager-arrow { display: none; }

/* ─── サイドバー → 記事下に3列で横並び ─────────────── */
#box2 { border: 0 !important; margin-top: 0 !important; }
#box2-inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px;
  padding: 96px 0 64px;
}
.hatena-module { background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; }
.hatena-module-title {
  font-family: var(--tp-sans) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.3em; color: var(--tp-ink) !important;
  background: none !important; border: 0 !important; border-top: 1px solid var(--tp-ink) !important;
  padding: 14px 0 0 !important; margin: 0 0 16px !important;
}
.hatena-module-title a { color: inherit !important; text-decoration: none !important; }
.hatena-module-body { font-size: 13px; line-height: 1.95; letter-spacing: 0.08em; }
.hatena-module-body a { color: var(--tp-ink-soft) !important; text-decoration: none !important; }
.hatena-module-body a:hover { color: var(--tp-warm) !important; }
.hatena-module-body ul { list-style: none; padding: 0; margin: 0; }
/* プロフィール */
.hatena-module-profile .profile-icon { width: 40px !important; height: 40px !important; border-radius: 50%; float: none !important; }
.hatena-module-profile .id { font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.15em; }
.hatena-module-profile .hatena-follow-button-box, .hatena-module-profile .profile-pro-badge { display: none !important; }
/* カテゴリ：件数を右寄せ・等幅 */
.hatena-module-category li a { display: flex; justify-content: space-between; }
.hatena-module-category li a::after { content: attr(data-count); }
/* 月別アーカイブ：年だけ横並び、月は折りたたみに */
.hatena-module-archive .archive-module-calendar { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hatena-module-archive .archive-module-year { font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.15em; }
.hatena-module-archive .archive-module-months { display: none; }
.hatena-module-archive .archive-module-year.expanded .archive-module-months { display: block; }
.hatena-module-archive .archive-module-button { color: var(--tp-ink-faint); }
/* 検索・リンク・参加グループは非表示（残す場合は行を消す） */
.hatena-module-search-box, .hatena-module-links, .hatena-module-circles { display: none !important; }

/* ─── フッター ─────────────────────────────────────── */
#footer {
  background: var(--tp-paper) !important; border-top: 1px solid var(--tp-ink);
  padding: 36px 0 !important; text-align: center;
  font-family: var(--tp-sans); font-size: 10px !important; letter-spacing: 0.25em; color: var(--tp-ink-mute) !important;
}
#footer a { color: var(--tp-ink-soft) !important; text-decoration: none !important; }
#footer .footer-logo, #footer address img { display: none; }

/* ─── モバイル ─────────────────────────────────────── */
@media (max-width: 768px) {
  #blog-title { padding: 38px 16px 0 !important; }
  #blog-title::before { font-size: 9px; letter-spacing: 0.35em; margin-bottom: 16px; }
  #title { font-size: 22px !important; letter-spacing: 0.24em !important; text-indent: 0.24em; }
  #blog-description { font-size: 12px !important; }
  .tp-nav { gap: 22px; padding: 24px 0 16px; }
  .tp-nav a { padding: 6px 0; }
  .archive-entries { grid-template-columns: 1fr 1fr; gap: 32px 16px; padding-top: 32px; }
  .archive-entry { gap: 10px; }
  .archive-date { font-size: 9px !important; margin-bottom: 0; }
  .archive-entry .entry-title, .archive-entry .archive-entry-title { font-size: 14px !important; line-height: 1.65 !important; }
  .archive-entry .categories { font-size: 9px; }
  .archive-heading { font-size: 28px !important; }
  .entry-title { font-size: 24px !important; letter-spacing: 0.06em; }
  .entry-content { font-size: 16px !important; line-height: 2.05 !important; }
  .entry-content .hatena-asin-detail, .entry-content .rakuten-affiliate { flex-wrap: wrap; gap: 14px; }
  .entry-content .asin-detail-foot { width: 100%; }
  .pager { margin-top: 44px !important; padding: 24px 0 !important; }
  #box2-inner { grid-template-columns: 1fr; gap: 32px; padding: 64px 0 44px; }
  #footer { padding: 28px 0 !important; font-size: 9px !important; }
}