@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（親父の背中 ミニマルデザイン）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    2.0.0
*/

/************************************
** 親父の背中 — Minimal
** 紙のような白地 / 墨色の文字 / オリーブ1色のアクセント
************************************/

:root {
  --ob-bg: #fbfaf7;
  --ob-surface: #ffffff;
  --ob-text: #2b2a26;
  --ob-sub: #7d7a70;
  --ob-line: #e7e4dc;
  --ob-accent: #8a865d;
  --ob-accent-soft: #f2f1ea;
  --ob-max: 720px;
  --ob-wide: 1080px;
  --ob-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ob-ease: 0.25s ease;
  --hover-text-color: var(--ob-accent);
}

/* ---------- ベース ---------- */
html { scroll-padding-top: 80px; }

body,
body.public-page {
  background: var(--ob-bg);
  color: var(--ob-text);
  font-family: var(--ob-serif);
  font-weight: 400;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ob-text); transition: color var(--ob-ease), opacity var(--ob-ease); }
a:hover { color: var(--ob-accent); }

::selection { background: var(--ob-accent-soft); color: var(--ob-text); }

/* ---------- ヘッダー ---------- */
.header-container,
body .header-container,
.header-container .navi,
#header-container #navi,
#header-container .navi,
#navi .navi-in > ul > li > a,
.header-container-in {
  background: transparent;
  background-color: transparent;
}

#header-container {
  background: rgba(251, 250, 247, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ob-line);
}

/* ヘッダー固定：Cocoonのスクロール時の固定（JSで top をずらす方式）を
   sticky に置き換え、常に上部に残す。z-index でサブメニューを本文より前面に */
#header-container,
#header-container.fixed-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  width: 100% !important;
  z-index: 1000 !important;
}
.admin-bar #header-container,
.admin-bar #header-container.fixed-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar #header-container,
  .admin-bar #header-container.fixed-header { top: 46px !important; }
}
#header-fixed { display: none !important; }

#header-container #header-container-in {
  max-width: var(--ob-wide);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

#header-container #header-container-in .header,
#header-container #header-container-in .header-in {
  width: auto;
  background: transparent;
}

.logo-text,
.logo-header {
  padding: 0;
  margin: 0;
  text-align: left;
}

.site-name-text,
.site-name-text-link {
  color: var(--ob-text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-decoration: none;
}

.tagline { display: none; }

#header-container #navi,
#header-container .navi,
#navi .navi-in {
  width: auto;
  height: auto;
  background: transparent;
}

#navi .navi-in > ul {
  display: flex;
  gap: 0 28px;
  justify-content: flex-end;
}

#navi .navi-in > ul > li {
  width: auto;
  height: 64px;
  line-height: 64px;
}

#navi .navi-in > ul > li > a {
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ob-sub);
  position: relative;
}

#navi .navi-in > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 1px;
  background: var(--ob-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ob-ease);
}

#navi .navi-in > ul > li > a:hover { color: var(--ob-text); background: transparent; }
#navi .navi-in > ul > li > a:hover::after { transform: scaleX(1); }
#navi .navi-in > ul > li.menu-item-has-children > a::after { right: 14px; }

/* サブメニュー（投稿一覧 > カテゴリ） */
#header-container #navi .navi-in > ul .sub-menu,
#header-container #navi .navi-in > .menu-header .sub-menu {
  top: 100%;
  left: -20px;
  width: 220px;
  padding: 8px 0;
  margin: 0;
  background: var(--ob-surface);
  border: 1px solid var(--ob-line);
  border-top: 1px solid var(--ob-accent);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  z-index: 1001;
}
#header-container #navi .navi-in > ul .sub-menu li {
  width: 100%;
  height: auto;
  line-height: 1.6;
  background: transparent;
}
#header-container #navi .navi-in > ul .sub-menu a {
  display: block;
  padding: 12px 24px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--ob-text);
  background: transparent;
}
#header-container #navi .navi-in > ul .sub-menu a::after { display: none; }
#header-container #navi .navi-in > ul .sub-menu a:hover {
  background: var(--ob-accent-soft);
  color: var(--ob-accent);
}

/* ---------- トップのアピールエリア（写真） ---------- */
#appeal {
  height: 62vh;
  min-height: 360px;
  max-height: 640px;
  background-position: center 35%;
  background-size: cover;
  filter: grayscale(100%) contrast(1.02);
  margin-bottom: 0;
}
#appeal-in { display: none; }

/* ---------- レイアウト：1カラム ---------- */
#content { margin-top: 0; }

.content-in,
#content-in {
  display: block;
  max-width: var(--ob-max);
  margin: 0 auto;
  padding: 0 24px;
}

#main,
.main {
  width: 100%;
  max-width: var(--ob-max);
  margin: 0 auto;
  padding: 72px 0 40px;
  background: transparent;
  border: none;
  border-radius: 0;
  float: none;
}

#sidebar { display: none; }

/* ---------- 記事ヘッダー ---------- */
.article-header { margin-bottom: 48px; }

.entry-title,
.article h1 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin: 0 0 20px;
  padding: 0;
  color: var(--ob-text);
}

.date-tags {
  text-align: left;
  font-size: 12px;
  color: var(--ob-sub);
  letter-spacing: 0.1em;
  margin: 0 0 32px;
}
.date-tags .fa-clock,
.date-tags .fa-history { opacity: 0.6; }

.eye-catch-wrap { margin: 0 0 8px; }
.eye-catch img,
.eye-catch-wrap img { border-radius: 2px; }
.eye-catch .cat-label { display: none; }

/* カテゴリラベル */
.cat-link,
.entry-categories .cat-link {
  background: transparent;
  color: var(--ob-accent);
  border: 1px solid var(--ob-accent);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 2px 12px;
}
.cat-link:hover { background: var(--ob-accent); color: #fff; }

.tag-link {
  border: none;
  color: var(--ob-sub);
  font-size: 12px;
  padding: 0 8px 0 0;
}
.tag-link::before { content: "#"; }
.tag-link .fa-tag { display: none; }

/* ---------- 本文 ---------- */
.entry-content {
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: 0.05em;
  color: var(--ob-text);
  margin: 0;
}

.entry-content > * + * { margin-top: 1.6em; }
.entry-content p { margin-bottom: 0; }

.entry-content a {
  color: var(--ob-text);
  text-decoration: underline;
  text-decoration-color: var(--ob-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.entry-content a:hover { color: var(--ob-accent); }

.entry-content strong { font-weight: 700; }

/* 見出し：装飾を削ぎ、余白と細い罫線で区切る */
.article h2,
.entry-content h2 {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--ob-text);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin: 4.2em 0 1.4em;
  padding: 0 0 0.8em;
  position: relative;
  border-bottom: 1px solid var(--ob-line);
}
.article h2::after,
.entry-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 1px;
  background: var(--ob-accent);
}

.article h3,
.entry-content h3 {
  background: none;
  border: none;
  border-left: 2px solid var(--ob-accent);
  border-radius: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  margin: 3em 0 1.1em;
  padding: 0.1em 0 0.1em 0.9em;
}

.article h4,
.entry-content h4 {
  background: none;
  border: none;
  font-size: 17px;
  font-weight: 600;
  margin: 2.4em 0 0.8em;
  padding: 0;
}
.article h4::before,
.entry-content h4::before {
  content: "— ";
  color: var(--ob-accent);
}

.article h5,
.article h6 { border: none; background: none; padding: 0; }

/* リスト */
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li { margin: 0.35em 0; }
.entry-content ul li::marker { color: var(--ob-accent); }

/* 引用 */
.entry-content blockquote,
.wp-block-quote {
  background: transparent;
  border: none;
  border-left: 1px solid var(--ob-accent);
  color: var(--ob-sub);
  margin-left: 0;
  padding: 0.2em 0 0.2em 1.6em;
  font-size: 15px;
}
.entry-content blockquote::before,
.entry-content blockquote::after,
.wp-block-quote::before,
.wp-block-quote::after { display: none; }

/* 画像・キャプション */
.entry-content img { border-radius: 2px; }
.wp-element-caption,
.wp-block-image figcaption {
  color: var(--ob-sub);
  font-size: 12px;
  text-align: center;
  margin-top: 0.8em;
}

/* 区切り線 */
.wp-block-separator,
.entry-content hr {
  border: none;
  border-top: 1px solid var(--ob-line);
  width: 64px;
  margin: 3.5em auto;
}

/* 情報ボックス等（Cocoonのブロックスタイル） */
.is-style-information-box,
.is-style-question-box,
.is-style-alert-box,
.is-style-memo-box,
.is-style-comment-box,
.is-style-ok-box,
.is-style-ng-box,
.is-style-good-box,
.is-style-bad-box,
.is-style-profile-box,
.information-box,
.question-box,
.alert-box,
.memo-box,
.comment-box,
.blank-box {
  background: var(--ob-accent-soft);
  border: none;
  border-radius: 4px;
  padding: 1.4em 1.6em;
  font-size: 15px;
  line-height: 1.95;
}
.is-style-information-box::before,
.information-box::before { color: var(--ob-accent); border-color: var(--ob-line); }

/* マーカー */
.vk_highlighter,
.marker,
.marker-under {
  background: linear-gradient(transparent 62%, rgba(138, 134, 93, 0.22) 62%);
}

/* 本文中の赤文字を少し落ち着いた色に */
.entry-content .has-vivid-red-color { color: #b5523d !important; }

/* ---------- 目次 ---------- */
.toc {
  display: block;
  width: 100%;
  border: 1px solid var(--ob-line);
  border-radius: 4px;
  background: var(--ob-surface);
  padding: 28px 32px;
  margin: 3em 0;
  font-size: 14px;
  line-height: 1.9;
}
.toc-center { text-align: left; }
.toc-title {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ob-sub);
  text-align: left;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ob-line);
  margin-bottom: 12px;
  display: block;
}
.toc-title::after { color: var(--ob-accent); }
.toc-content { text-align: left; }
.toc-list { margin: 0; padding-left: 1.4em; }
.toc-list li { margin: 0.2em 0; }
.toc-list a,
.toc .toc-list a {
  color: var(--ob-text);
  text-decoration: none;
}
.toc-list a:hover { color: var(--ob-accent); }
.toc .toc-list ul,
.toc .toc-list ol { padding-left: 1.2em; font-size: 13px; color: var(--ob-sub); }

/* ---------- トップページ：最新の投稿（ブロック） ---------- */
.wp-block-latest-posts.is-grid,
.wp-block-latest-posts__list.is-grid {
  display: block !important;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  border-top: 1px solid var(--ob-line);
}

.entry-content h2 + .wp-block-latest-posts { border-top: none; margin-top: 0; }
.front-top-page .date-tags { display: none; }

.wp-block-latest-posts.is-grid li,
.wp-block-latest-posts__list.is-grid li {
  display: grid;
  grid-template-columns: 1fr 132px;
  grid-template-areas:
    "title thumb"
    "date  thumb";
  grid-template-rows: auto 1fr;
  column-gap: 28px;
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 0;
  border-bottom: 1px solid var(--ob-line);
  list-style: none;
}
.entry-content .wp-block-latest-posts li::marker { content: none; }

.wp-block-latest-posts__featured-image {
  grid-area: thumb;
  margin: 0 !important;
  width: 132px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ob-accent-soft);
}
.wp-block-latest-posts__featured-image a,
.wp-block-latest-posts__featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter var(--ob-ease);
}
.wp-block-latest-posts li:hover .wp-block-latest-posts__featured-image img { transform: scale(1.04); }

.wp-block-latest-posts__post-title,
.entry-content .wp-block-latest-posts__post-title {
  grid-area: title;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.75;
  text-decoration: none;
  color: var(--ob-text);
  align-self: start;
}
.wp-block-latest-posts__post-title:hover { color: var(--ob-accent); }

.wp-block-latest-posts__post-date {
  grid-area: date;
  font-size: 12px;
  color: var(--ob-sub);
  letter-spacing: 0.12em;
  margin-top: 10px;
}

/* ---------- 記事一覧（カテゴリ・アーカイブ） ---------- */
.list,
.ect-entry-card .list { margin: 0; }

.entry-card-wrap,
.a-wrap.entry-card-wrap {
  background: transparent;
  margin: 0;
  padding: 28px 0;
  border-bottom: 1px solid var(--ob-line);
  border-radius: 0;
  box-shadow: none;
}
.list > .entry-card-wrap:first-child,
.list > a:first-child { border-top: 1px solid var(--ob-line); }
.a-wrap:hover,
.a-wrap.entry-card-wrap:hover {
  background: transparent;
  color: var(--ob-accent);
}

.entry-card {
  display: grid;
  grid-template-columns: 1fr 132px;
  grid-template-areas:
    "content thumb"
    "meta    thumb";
  grid-template-rows: auto 1fr;
  column-gap: 28px;
}
.entry-card-content { grid-area: content; padding-bottom: 0; }
.entry-card-meta {
  grid-area: meta;
  position: static;
  text-align: left;
  margin-top: 10px;
  letter-spacing: 0.12em;
}
.entry-card-info { justify-content: flex-start; }
.entry-card-info .fa-clock { opacity: 0.6; }
.entry-card-thumb {
  grid-area: thumb;
  width: 132px;
  margin: 0;
  float: none;
  border-radius: 2px;
  overflow: hidden;
}
.entry-card-content { margin: 0; }
.entry-card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.75;
  margin: 0 0 8px;
}
.entry-card-snippet {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ob-sub);
}
.entry-card-meta,
.entry-card-info { font-size: 12px; color: var(--ob-sub); }
.entry-card-thumb .cat-label { display: none; }

.archive-title,
.list-title {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ob-sub);
  font-weight: 400;
  margin-bottom: 32px;
}
.archive-title .fa { display: none; }

/* ページネーション */
.pagination { margin: 48px 0 0; }
.page-numbers {
  border: 1px solid var(--ob-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ob-sub);
  font-size: 13px;
}
.pagination .current,
.page-numbers:hover { background: var(--ob-text); border-color: var(--ob-text); color: #fff; }
.pagination-next-link {
  border: 1px solid var(--ob-line);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.2em;
}
.pagination-next-link:hover { background: var(--ob-text); color: #fff; }

/* ---------- ボタン（「投稿一覧はこちら」など） ---------- */
/* Cocoonのボタンブロックの背景色・幅・シャイン効果を打ち消し、細線のピル型に */
.entry-content .button-block {
  margin-top: 3.2em;
  text-align: center;
}
.btn,
.button-block .btn,
.button-block .btn.has-background,
.wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: auto !important;
  min-width: 240px;
  max-width: 100%;
  padding: 16px 36px;
  background: transparent !important;
  background-image: none !important;
  color: var(--ob-text) !important;
  border: 1px solid var(--ob-text);
  border-radius: 999px;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-decoration: none !important;
  overflow: hidden;
  transform: none !important;
  animation: none !important;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
/* シャイン効果（光が走るアニメーション）を無効化 */
.btn::before,
.btn-shine::before,
.btn-wrap-shine > a::before {
  display: none !important;
  animation: none !important;
}
/* 右側の細い線（矢印の代わり）。ホバーで少し伸びる */
.btn::after,
.wp-block-button__link::after {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s ease;
}
.btn:hover,
.button-block .btn:hover,
.button-block .btn.has-background:hover,
.wp-block-button__link:hover {
  background: var(--ob-text) !important;
  border-color: var(--ob-text);
  color: #fff !important;
  opacity: 1;
}
.btn:hover::after,
.wp-block-button__link:hover::after { width: 30px; }
.btn:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 1px solid var(--ob-accent);
  outline-offset: 4px;
}

/* ---------- Pochipp（物販ボックス） ---------- */
.pochipp-box {
  border: 1px solid var(--ob-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: var(--ob-surface) !important;
  padding: 24px !important;
}
.pochipp-box__title {
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.7 !important;
}
.pochipp-box__title a { text-decoration: none; }
.pochipp-box__info,
.pochipp-box__price { color: var(--ob-sub) !important; font-size: 12px !important; }
.pochipp-box__btn {
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-decoration: none !important;
}

/* ---------- 記事フッター ---------- */
.article-footer { margin-top: 72px; }

.entry-categories-tags { margin: 0 0 40px; }

.sns-share-message,
.sns-follow-message {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ob-sub);
  text-align: center;
}

.sns-share-buttons,
.sns-follow-buttons { justify-content: center; gap: 10px; }

.sns-share.ss-col-3 .sns-buttons a,
.sns-buttons a,
.bc-monochrome .sns-buttons a,
.bc-monochrome a.sns-button {
  background: transparent;
  color: var(--ob-sub);
  border: 1px solid var(--ob-line);
  border-radius: 999px;
  box-shadow: none;
  width: 44px;
  height: 44px;
  margin: 0;
  font-size: 16px;
}
.sns-share.ss-col-3 .sns-buttons a .button-caption,
.sns-buttons .share-count,
.sns-buttons .follow-count { display: none; }
.sns-buttons a:hover,
.bc-monochrome .sns-buttons a:hover {
  background: var(--ob-text);
  border-color: var(--ob-text);
  color: #fff;
  opacity: 1;
}
.sns-share.ss-col-3 .sns-buttons { display: flex; flex-wrap: wrap; }
.sns-share.ss-col-3 .sns-buttons a { flex: 0 0 44px; }

/* 著者ボックス（記事下・トップページ下で共通） */
.widget_author_box .widget-title,
.widget-single-content-bottom-title,
.main-widget-label,
.author-box .author-widget-name {
  background: none;
  border: none;
  color: var(--ob-sub);
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 400;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
}
.author-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  align-items: flex-start;
  margin: 0;
  padding: 36px 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--ob-line);
  border-bottom: 1px solid var(--ob-line);
  border-radius: 0;
}
.author-box .author-widget-name { flex-basis: 100%; margin-bottom: 24px; }
.author-box .author-thumb {
  float: none;
  width: 80px;
  flex-shrink: 0;
  margin: 0;
}
.author-box .author-thumb img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
}
.author-box .author-content { flex: 1; min-width: 0; margin: 0; }
.author-box .author-name {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: left;
}
.author-box .author-name a { color: var(--ob-text); text-decoration: none; }
.author-box .author-name a:hover { color: var(--ob-accent); }
.author-box .author-description {
  font-size: 13px;
  line-height: 1.95;
  letter-spacing: 0.05em;
  color: var(--ob-sub);
}
.author-box .author-description p { margin: 0; }
.author-box .author-description p + p { margin-top: 1em; }

/* フォローボタン：小さめの丸に */
.author-box .author-follows { margin-top: 20px; text-align: left; }
.author-box .author-follows .sns-follow-message { display: none; }
.author-box .author-follows .sns-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}
.author-box .author-follows .sns-buttons a,
.author-box .author-follows a.sns-button {
  width: 36px;
  height: 36px;
  margin: 0;
  font-size: 14px;
  border-radius: 50%;
  border: 1px solid var(--ob-line);
  background: transparent;
  color: var(--ob-sub);
  text-decoration: none;
}
.author-box .author-follows .sns-buttons a:hover {
  background: var(--ob-text);
  border-color: var(--ob-text);
  color: #fff;
}

/* 本文内（トップページのショートコード）に置いたとき */
.entry-content .author-box { margin-top: 5em; }
.entry-content .author-box a { text-decoration: none; }

/* ---------- プロフィールページ ---------- */
/* 先頭の大きな画像を、小さめの丸いアイコンに */
.page-id-66 .entry-content > .wp-block-image:first-child,
.page-id-66 .entry-content > figure:first-child {
  margin: 0 0 32px;
  text-align: left;
}
.page-id-66 .entry-content > .wp-block-image:first-child img,
.page-id-66 .entry-content > figure:first-child img {
  display: block;
  width: 120px;
  height: 120px;
  max-width: 120px;
  object-fit: cover;
  border-radius: 50%;
}

/* 前後記事・関連記事 */
/* 記事末尾の「前後の記事」リンクは非表示 */
.pager-post-navi,
#pager-post-navi { display: none; }

.pager-post-navi a {
  background: transparent;
  border: 1px solid var(--ob-line);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.75;
}
.pager-post-navi a:hover { background: var(--ob-accent-soft); }
.pager-post-navi .iconfont { color: var(--ob-sub); }

.related-entry-heading,
.comment-title {
  background: none;
  border: none;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ob-sub);
  font-weight: 400;
  text-align: center;
  padding: 0;
  margin: 72px 0 24px;
}
.comment-title::after,
.related-entry-heading::after { display: none; }

/* 関連記事：トップの「最新の投稿」と同じリスト型 */
.related-entries {
  margin: 88px 0 0;
  padding: 0;
  background: transparent;
  border: none;
}

.related-entries .related-entry-heading {
  position: relative;
  text-align: left;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ob-text);
  margin: 0;
  padding: 0 0 0.8em;
  border-bottom: 1px solid var(--ob-line);
}
.related-entries .related-entry-heading::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 1px;
  background: var(--ob-accent);
  border: none;
}
.related-entries .related-entry-heading .related-entry-sub-heading,
.related-entries .related-entry-heading .sub-caption { display: none; }

.related-entries .related-list {
  display: block;
  margin: 0;
  padding: 0;
}

.related-entries .related-entry-card-wrap,
.related-entries .related-list > a {
  display: block;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  padding: 28px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ob-line);
  border-radius: 0;
  box-shadow: none;
  color: var(--ob-text);
  text-decoration: none;
}
.related-entries .related-entry-card-wrap:hover {
  background: transparent;
  color: var(--ob-accent);
}

.related-entries .related-entry-card {
  display: grid;
  grid-template-columns: 1fr 132px;
  grid-template-areas: "content thumb";
  column-gap: 28px;
  align-items: start;
  margin: 0;
  padding: 0;
  width: 100%;
}

.related-entries .related-entry-card-thumb {
  grid-area: thumb;
  width: 132px !important;
  max-width: none;
  aspect-ratio: 4 / 3;
  margin: 0 !important;
  float: none;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ob-accent-soft);
}
.related-entries .related-entry-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.related-entries .related-entry-card-wrap:hover .related-entry-card-thumb img { transform: scale(1.04); }
.related-entries .related-entry-card-thumb .cat-label { display: none; }

.related-entries .related-entry-card-content {
  grid-area: content;
  margin: 0 !important;
  padding: 0;
  min-width: 0;
}

.related-entries .related-entry-card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.75;
  margin: 0;
  padding: 0;
  color: inherit;
  /* 長いタイトルは3行で省略 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-entries .related-entry-card-snippet { display: none; }

.related-entries .related-entry-card-meta,
.related-entries .e-card-meta {
  position: static;
  margin: 10px 0 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ob-sub);
}
.related-entries .related-entry-card-info,
.related-entries .e-card-info { justify-content: flex-start; }
.related-entries .e-card-info .fa-clock,
.related-entries .e-card-info .fa-history { opacity: 0.6; }
.related-entries .e-card-categorys { display: none; }

.comment-btn,
.key-btn {
  background: transparent;
  border: 1px solid var(--ob-line);
  border-radius: 999px;
  color: var(--ob-sub);
  font-size: 13px;
  letter-spacing: 0.15em;
}
.comment-btn:hover { background: var(--ob-text); color: #fff; border-color: var(--ob-text); }

/* パンくず */
.breadcrumb {
  font-size: 12px;
  color: var(--ob-sub);
  letter-spacing: 0.08em;
  margin: 40px 0 0;
  padding: 0;
}
.breadcrumb a { color: var(--ob-sub); text-decoration: none; }
.breadcrumb .fa-home,
.breadcrumb .fa-folder,
.breadcrumb .fa-file { display: none; }

/* フォーム */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
.search-edit {
  background: var(--ob-surface);
  border: 1px solid var(--ob-line);
  border-radius: 4px;
  box-shadow: none;
  font-family: inherit;
}
input:focus,
textarea:focus { border-color: var(--ob-accent); outline: none; }

/* ---------- フッター ---------- */
#footer,
.footer {
  background: transparent;
  border-top: 1px solid var(--ob-line);
  margin-top: 96px;
  padding: 56px 24px 40px;
  color: var(--ob-sub);
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.footer-bottom-logo .site-name-text { font-size: 15px; color: var(--ob-text); }
.footer-bottom-content { text-align: center; float: none; }
.navi-footer-in > .menu-footer {
  justify-content: center;
  border: none;
}
.footer-bottom-logo,
.fdt-logo .footer-bottom-logo {
  order: 1;
  float: none;
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  margin: 0;
}
.footer-bottom-content { order: 2; }
.navi-footer-in > .menu-footer li,
.navi-footer-in > .menu-footer li:last-child { border: none; }
.navi-footer-in > .menu-footer li a { font-size: 12px; color: var(--ob-sub); letter-spacing: 0.12em; }
.copyright,
.source-org { font-size: 11px; letter-spacing: 0.15em; color: var(--ob-sub); }

/* トップへ戻る */
.go-to-top-button {
  background: var(--ob-surface);
  color: var(--ob-sub);
  border: 1px solid var(--ob-line);
  border-radius: 50%;
  box-shadow: none;
  width: 44px;
  height: 44px;
  font-size: 14px;
}
.go-to-top-button:hover { color: var(--ob-text); border-color: var(--ob-text); }

/************************************
** レスポンシブ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  #main,
  .main { padding-top: 56px; }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  #header-container #header-container-in {
    justify-content: center;
    min-height: 56px;
  }
  #navi { display: none; }
  .no-mobile-header-logo #header-container { display: none; }

  .mobile-menu-buttons,
  .mobile-header-menu-buttons {
    /* backdrop-filter は付けない（ドロワーが50pxのバー内に閉じ込められるため） */
    background: rgba(251, 250, 247, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--ob-line);
    box-shadow: none !important;
    color: var(--ob-sub);
  }
  .mobile-footer-menu-buttons { border-bottom: none; border-top: 1px solid var(--ob-line); }
  .mobile-menu-buttons .logo-menu-button .site-name-text { font-size: 17px; letter-spacing: 0.2em; }
  .mobile-menu-buttons .menu-button > a,
  .mobile-menu-buttons .menu-button-in { color: var(--ob-sub); }
  .mobile-menu-buttons .menu-caption { font-size: 10px; letter-spacing: 0.1em; }

  /* ---------- スマホのドロワーメニュー（PCのサブメニューと同じトーン） ---------- */
  .navi-menu-content,
  .search-menu-content {
    background: var(--ob-surface);
    color: var(--ob-text);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
  }
  .navi-menu-content {
    width: 82%;
    max-width: 320px;
    border-right: 1px solid var(--ob-line);
    border-top: 1px solid var(--ob-accent);
    overflow-y: auto;
  }

  /* 開いたときの背景の暗幕 */
  .menu-close,
  #navi-menu-close,
  #search-menu-close {
    background-color: rgba(43, 42, 38, 0.6) !important;
  }

  /* 閉じるボタン */
  .navi-menu-content .menu-close-button,
  .search-menu-content .menu-close-button {
    display: block;
    height: 56px;
    line-height: 56px;
    padding: 0 20px;
    text-align: right;
    font-size: 18px;
    color: var(--ob-sub);
    border-bottom: 1px solid var(--ob-line);
    cursor: pointer;
  }

  .navi-menu-content .menu-drawer {
    margin: 0;
    padding: 8px 0 40px;
  }
  .navi-menu-content .menu-drawer li {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
  }
  .navi-menu-content .menu-drawer a {
    display: block;
    padding: 15px 24px;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.12em;
    color: var(--ob-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ob-line);
    text-decoration: none;
  }
  .navi-menu-content .menu-drawer a:hover,
  .navi-menu-content .menu-drawer a:active,
  .navi-menu-content .menu-drawer .current-menu-item > a {
    background: var(--ob-accent-soft);
    color: var(--ob-accent);
  }

  /* サブメニュー（投稿一覧 > カテゴリ）：常に展開、少し下げて表示 */
  .navi-menu-content .menu-drawer .sub-menu {
    display: block;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    background: var(--ob-bg);
    border: none;
    box-shadow: none;
  }
  .navi-menu-content .menu-drawer .sub-menu a {
    position: relative;
    padding: 13px 24px 13px 44px;
    font-size: 13px;
    color: var(--ob-text);
  }
  .navi-menu-content .menu-drawer .sub-menu a::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--ob-accent);
  }
  .navi-menu-content .menu-drawer .menu-item-has-children > a::after { display: none; }

  /* 検索ドロワー */
  .search-menu-content .search-box { padding: 24px 20px; }

  #appeal {
    height: 46vh;
    min-height: 260px;
  }

  #content-in { padding: 0 20px; }
  #main,
  .main { padding-top: 44px; }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .entry-title,
  .article h1 { font-size: 23px; line-height: 1.65; }

  .entry-content { font-size: 15.5px; line-height: 2; }

  .article h2,
  .entry-content h2 { font-size: 20px; margin-top: 3.4em; }
  .article h3,
  .entry-content h3 { font-size: 17px; }

  .toc { padding: 20px 22px; }

  .wp-block-latest-posts.is-grid li,
  .wp-block-latest-posts__list.is-grid li {
    grid-template-columns: 1fr 96px;
    column-gap: 18px;
    padding: 22px 0;
  }
  .wp-block-latest-posts__featured-image { width: 96px; }
  .wp-block-latest-posts__post-title,
  .entry-content .wp-block-latest-posts__post-title { font-size: 15px; }

  .entry-card { grid-template-columns: 1fr 96px; column-gap: 18px; }
  .entry-card-thumb { width: 96px; }
  .entry-card-title { font-size: 15px; }
  .entry-card-snippet { display: none; }

  .related-entries { margin-top: 64px; }
  .related-entries .related-entry-heading { font-size: 20px; }
  .related-entries .related-entry-card-wrap { padding: 22px 0; }
  .related-entries .related-entry-card { grid-template-columns: 1fr 96px; column-gap: 18px; }
  .related-entries .related-entry-card-thumb { width: 96px !important; }
  .related-entries .related-entry-card-title { font-size: 15px; }

  .author-box { gap: 0 18px; padding: 28px 0; }
  .author-box .author-thumb,
  .author-box .author-thumb img { width: 60px; height: 60px; }
  .author-box .author-name { font-size: 16px; }
  .entry-content .author-box { margin-top: 4em; }

  .page-id-66 .entry-content > .wp-block-image:first-child img,
  .page-id-66 .entry-content > figure:first-child img { width: 96px; height: 96px; max-width: 96px; }

  .btn,
  .button-block .btn,
  .wp-block-button__link { min-width: 220px; padding: 15px 30px; }

  .pochipp-box { padding: 18px !important; }
}