@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD - 内緒のはなし
    Theme URI: https://swell-theme.com/
    Description: SWELL子テーマ (内緒のはなし カスタム)
    Version: 1.1.0
    Author: naisho editorial
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================
   Design Tokens (静的サイト style.css と同期)
   ============================================ */
:root {
  --c-base:       #F5F1EA;
  --c-base-deep:  #EDE7DD;
  --c-ink:        #805346;
  --c-ink-soft:   #3A3633;
  --c-greige:     #9C8F82;
  --c-greige-lt:  #C9C0B5;
  --c-gold:       #B8985A;
  --c-bordeaux:   #6B1F2A;
  --c-line:       #D9D2C5;

  --f-mincho: 'Shippori Mincho', 'Yu Mincho', '游明朝', serif;
  --f-sans:   'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --f-en:     'Cormorant Garamond', 'Times New Roman', serif;
}

/* Google Fonts 読み込み (SWELL本体が読み込まない補完) */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

/* ============================================
   Body / 全体トーン
   ============================================ */
body {
  font-family: var(--f-sans) !important;
  color: var(--c-ink) !important;
  background: var(--c-base) !important;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* リンク色をブランドカラーに */
a { color: var(--c-bordeaux); }
a:hover { color: var(--c-gold); }

/* ============================================
   記事本文 (single.php)
   本文余白・明朝書体・Pickアクセント色
   ============================================ */
.post_content {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 2.1;
  color: var(--c-ink-soft);
  letter-spacing: 0.04em;
  max-width: 760px;
  margin: 0 auto;
}

.post_content p {
  margin: 0 0 1.8em;
  letter-spacing: 0.04em;
}

/* 見出しは明朝で重厚に */
.post_content h2 {
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--c-ink);
  margin: 3em 0 1em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--c-line);
  position: relative;
}
.post_content h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 60px;
  height: 2px;
  background: var(--c-gold);
}

.post_content h3 {
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  margin: 2.4em 0 0.8em;
  padding-left: 16px;
  border-left: 3px solid var(--c-gold);
}

.post_content h4 {
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--c-ink);
  margin: 2em 0 0.6em;
}

/* 引用・装飾 */
.post_content blockquote {
  margin: 2em 0;
  padding: var(--s-3, 24px) var(--s-4, 32px);
  background: var(--c-base-deep);
  border-left: 3px solid var(--c-gold);
  font-family: var(--f-mincho);
  font-size: 15px;
  color: var(--c-ink);
  letter-spacing: 0.06em;
  line-height: 2;
}

/* リスト */
.post_content ul,
.post_content ol {
  margin: 0 0 1.8em 1em;
  padding-left: 1em;
}
.post_content ul li,
.post_content ol li {
  margin-bottom: 0.6em;
  line-height: 1.9;
}
.post_content ul li::marker { color: var(--c-gold); }

/* 強調 */
.post_content strong {
  color: var(--c-bordeaux);
  font-weight: 600;
}

.post_content a {
  color: var(--c-bordeaux);
  text-decoration: none;
  border-bottom: 1px solid var(--c-greige-lt);
  transition: border-color .25s ease;
}
.post_content a:hover {
  border-bottom-color: var(--c-bordeaux);
}

/* 画像周りの余白 */
.post_content img {
  margin: 2em auto;
  display: block;
}

/* SWELL投稿タイトル */
.p-postTitle__ttl,
.entry-title,
.l-postTitle .ttl {
  font-family: var(--f-mincho) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--c-ink) !important;
  line-height: 1.6 !important;
}

/* SWELL記事メタ情報 */
.p-postList__meta,
.c-postMeta,
.p-postInfo {
  font-family: var(--f-en) !important;
  font-size: 12px !important;
  color: var(--c-greige) !important;
  letter-spacing: 0.08em !important;
}

/* カテゴリラベル */
.p-postList__cat,
.cat-label,
.c-catLabel {
  font-family: var(--f-mincho) !important;
  font-size: 11px !important;
  color: var(--c-gold) !important;
  background: transparent !important;
  border: 1px solid var(--c-gold) !important;
  letter-spacing: 0.16em !important;
}

/* 一覧ページの記事カード */
.p-postList,
.p-archive {
  font-family: var(--f-sans);
}

/* サイドバー・ウィジェット */
.l-sidebar,
.p-widget {
  font-family: var(--f-sans);
}
.p-widget__title {
  font-family: var(--f-mincho) !important;
  letter-spacing: 0.12em !important;
  color: var(--c-ink) !important;
  border-bottom: 1px solid var(--c-line) !important;
}

/* SWELLヘッダー (任意・必要に応じてコメントアウト) */
.l-header {
  background: rgba(245, 241, 234, 0.92) !important;
  backdrop-filter: blur(8px);
}

/* フッター */
.l-footer {
  background: var(--c-ink) !important;
  color: var(--c-base) !important;
}
.l-footer a { color: var(--c-greige-lt) !important; }

/* 目次 (SWELL標準TOC) */
.swell-toc {
  background: var(--c-base-deep) !important;
  border: 1px solid var(--c-line) !important;
}
.swell-toc__title {
  font-family: var(--f-mincho) !important;
  color: var(--c-ink) !important;
  letter-spacing: 0.1em !important;
}

/* ============================================
   SWELL カラーシステム全面上書き
   (SWELLは独自CSS変数で色管理しているため、
    まとめてブランドカラーに置換)
   ============================================ */
:root {
  --color_main: #805346 !important;   /* テラコッタ (ブランド主役) */
  --color_text: #3A3633 !important;
  --color_text_thin: #9C8F82 !important;
  --color_link: #805346 !important;
  --color_link_hover: #B8985A !important;
  --color_bg: #F5F1EA !important;
  --color_bg_thin: #EDE7DD !important;
  --color_border: #D9D2C5 !important;
}

/* ヘッダー (SWELL) - サイトタイトル/ロゴをブランド書体に */
.c-headLogo,
.c-headLogo a,
.l-header .site-name a,
.l-header__logo a {
  font-family: var(--f-mincho) !important;
  font-weight: 500 !important;
  color: var(--c-ink) !important;
  letter-spacing: 0.12em !important;
  text-transform: lowercase;
  font-size: 22px !important;
}

/* SWELLグローバルナビ */
.c-gnav,
.c-gnav a,
.l-header__gNav a {
  font-family: var(--f-mincho) !important;
  color: var(--c-ink) !important;
  letter-spacing: 0.1em !important;
  font-size: 14px !important;
}
.c-gnav a:hover { color: var(--c-bordeaux) !important; }

/* パンくず */
.p-breadcrumb,
.p-breadcrumb a,
.c-breadcrumb,
.c-breadcrumb a {
  font-family: var(--f-en) !important;
  font-size: 12px !important;
  color: var(--c-greige) !important;
  letter-spacing: 0.06em !important;
}
.p-breadcrumb a:hover,
.c-breadcrumb a:hover { color: var(--c-bordeaux) !important; }

/* 投稿日 (2026 / 6/25 のあの縦並びデザイン) */
.p-postList__date,
.c-postTimes,
.p-postList__times,
.entry-date {
  font-family: var(--f-en) !important;
  color: var(--c-greige) !important;
  letter-spacing: 0.08em !important;
}

/* SWELLの「見出しブロック」(濃紺背景h2) を上書き */
.post_content .swell-block-fullWide,
.post_content .wp-block-cover,
.post_content [class*='swell-block-fullWide'] {
  background: var(--c-base-deep) !important;
}

/* 強調 (本文「テスト」が赤太字になる問題) */
.post_content b,
.post_content strong {
  color: var(--c-bordeaux) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* SNSシェアボタン下のアコーディオン色味 */
.p-articleFoot,
.p-shareBtns {
  border-top-color: var(--c-line) !important;
}

/* SWELLメインカラー要素 (リンク、ボタン強調等) を一括上書き */
.has-swl-main-color { color: var(--c-bordeaux) !important; }
.has-swl-main-color-background-color,
.has-swl-main-background-color { background-color: var(--c-bordeaux) !important; }

/* サイドバー検索ボックス・ボタン */
.p-searchBox input[type="search"] {
  background: #fff !important;
  border: 1px solid var(--c-line) !important;
}
.p-searchBox button {
  background: var(--c-bordeaux) !important;
  color: #fff !important;
}

/* カテゴリラベル (記事ヘッダーの紺バッジ) */
.p-postList__cat .cat-label,
.c-postThumb__cat,
.cat-label {
  background: var(--c-bordeaux) !important;
  color: var(--c-base) !important;
  font-family: var(--f-mincho) !important;
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
  border-radius: 0 !important;
}

/* 投稿タイトル下部の区切り */
.l-mainContent__inner,
.p-postContent {
  background: transparent !important;
}

/* SWELLのトップに戻るボタン */
.p-pageTopBtn {
  background: var(--c-ink) !important;
  color: var(--c-base) !important;
  border-radius: 50% !important;
}

/* シェアボタンエリアのタグ装飾 */
.p-shareBtns__title {
  font-family: var(--f-mincho) !important;
  color: var(--c-ink) !important;
  letter-spacing: 0.1em !important;
}

/* ============================================
   ヘッダー最上部の赤い装飾帯を消す
   (SWELLのヘッダーバー / アクセントライン)
   ============================================ */
.l-header::before,
.l-header__inner::before,
.l-header__bar,
.l-header__bar-wrap,
.p-headerBar,
.l-fixHeader::before,
.p-fixHeader::before,
body::before {
  background: transparent !important;
  background-color: transparent !important;
  display: none !important;
  height: 0 !important;
  border: 0 !important;
}

/* ============================================
   投稿タイトルの紺色背景を撤去
   (SWELLの「タイトル背景画像」スタイルを無効化)
   ============================================ */
.p-postTitle,
.p-postTitle__bg,
.l-mainContent__head,
.c-postThumb__figure,
.p-postTitle::before,
.p-postTitle::after,
.p-postTitle__bgImg {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* タイトル本体は明朝・墨色で */
.p-postTitle__ttl,
.entry-title,
.l-mainContent .c-postTitle {
  color: var(--c-ink) !important;
  background: transparent !important;
  text-shadow: none !important;
  font-family: var(--f-mincho) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

/* タイトル下のメタ情報 (投稿日/カテゴリ) */
.p-postTitle__meta,
.p-postTitle .c-postTimes,
.p-postTitle .c-postMeta {
  color: var(--c-greige) !important;
  background: transparent !important;
}

/* 目次 — 全テキストを明朝に */
.p-toc,
.swell-toc {
  background: var(--c-base) !important;
  border: 1px solid var(--c-line) !important;
}
.p-toc,
.p-toc *,
.swell-toc,
.swell-toc *,
.p-toc__title,
.swell-toc__title,
.p-toc__list,
.p-toc__list a,
.swell-toc__list,
.swell-toc__list a {
  font-family: var(--f-mincho) !important;
}
.p-toc__title,
.swell-toc__title {
  background: transparent !important;
  color: var(--c-ink) !important;
  border-bottom: 1px solid var(--c-line) !important;
  letter-spacing: 0.12em !important;
}

/* ============================================
   Gutenberg 標準見出しブロック (wp-block-heading)
   を明朝に。h2の塗りつぶし背景も撤去
   ============================================ */
.post_content .wp-block-heading,
.post_content h1.wp-block-heading,
.post_content h2.wp-block-heading,
.post_content h3.wp-block-heading,
.post_content h4.wp-block-heading,
.post_content h5.wp-block-heading,
.post_content h6.wp-block-heading {
  font-family: var(--f-mincho) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

/* SWELLが h2 に塗りつぶしブロック背景を当てるのを無効化
   (本文「テスト」が見えなくなる現象の修正) */
.post_content h2,
.post_content h2.wp-block-heading,
.post_content .swell-block-h2,
.l-mainContent .post_content h2 {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--c-ink) !important;
  padding: 0 0 0.6em 0 !important;
  border-bottom: 1px solid var(--c-line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  position: relative !important;
}
.post_content h2::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 60px !important;
  height: 2px !important;
  background: var(--c-gold) !important;
}
.post_content h2::after {
  display: none !important;
}

/* h3 の縦線ゴールド・h4 の明朝も上書き保険 */
.post_content h3,
.post_content h3.wp-block-heading {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--c-ink) !important;
  border-left: 3px solid var(--c-gold) !important;
  border-bottom: 0 !important;
  padding: 0 0 0 16px !important;
}

/* ============================================
   パンくず背景をベース色に統一
   (白浮きを解消)
   ============================================ */
.p-breadcrumb,
.l-breadcrumb,
.c-breadcrumb,
.l-mainContent .p-breadcrumb,
.l-mainContent > .p-breadcrumb,
.l-content > .p-breadcrumb {
  background: var(--c-base) !important;
  background-color: var(--c-base) !important;
}
.p-breadcrumb__inner,
.c-breadcrumb__inner {
  background: transparent !important;
}

/* ============================================
   フッターのSNSリンク (2026-09-15 追加)
   静的ページ側のフッターと同じ並びを記事ページにも出す
   ============================================ */
.naisho-foot-sns-ttl {
  margin: 0 0 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #D9C89A;
}
.naisho-foot-sns {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
}
.naisho-foot-sns li { margin: 0; }
.naisho-foot-sns a {
  color: #F5F1EA;
  opacity: 0.88;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.naisho-foot-sns a:hover { opacity: 1; text-decoration: underline; }
.l-footer .widget_custom_html { margin-bottom: 0; }
.l-footer__widgetArea { padding-top: 32px; padding-bottom: 8px; }
@media (max-width: 480px) {
  .naisho-foot-sns { gap: 10px 20px; padding: 0 12px; }
  .naisho-foot-sns a { font-size: 12.5px; }
}