@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:    1.1.3
*/

/* =====================================================================
   カスタムデザイン : Emerald / Teal
   ---------------------------------------------------------------------
   目次
     01. カラー変数・全体設定
     02. ベース / タイポグラフィ
     03. ヘッダー・グローバルナビ
     04. モバイルメニュー
     05. パンくずリスト
     06. 記事一覧カード
     07. ページネーション
     08. 記事ページ（タイトル・メタ情報）
     09. 本文の書式（見出し・段落・リスト・表など）
     10. Cocoon装飾パーツ（ボックス・ブログカード等）
     11. 目次（TOC）
     12. サイドバー / ウィジェット
     13. 関連記事・著者・コメント・前後ナビ
     14. フッター
     15. 検索・トップへ戻る
     16. 既存記事の書式統一（インライン指定の上書き）
     17. レスポンシブ
   ===================================================================== */


/* =====================================================================
   01. カラー変数・全体設定
   色を変えたいときは、基本的にこのブロックだけ書き換えればOKです。
   ===================================================================== */
:root {
  /* ブランドカラー */
  --gc-main:      #00B5A0;  /* メインのティールグリーン */
  --gc-main-dark: #00806F;  /* 濃色（ヘッダー・フッター・見出し） */
  --gc-main-deep: #005E52;  /* さらに濃い色（グラデーションの終点） */
  --gc-accent:    #7BE8D8;  /* 明るいアクセント */
  --gc-accent-2:  #34D9BC;  /* 中間トーン */

  /* 背景 */
  --gc-bg:        #F2FAF8;  /* サイト全体の背景 */
  --gc-bg-soft:   #E6F5F2;  /* うっすら色のついた面 */
  --gc-surface:   #FFFFFF;  /* カード・記事本文の面 */

  /* 文字 */
  --gc-text:      #1B2B28;  /* 本文 */
  --gc-text-sub:  #5B706C;  /* 補足・メタ情報 */
  --gc-text-weak: #8DA09C;  /* さらに薄い文字 */
  --gc-text-inv:  #FFFFFF;  /* 濃色背景の上の文字 */

  /* 線・影 */
  --gc-line:      #DCEAE7;  /* 標準の罫線 */
  --gc-line-soft: #EDF5F3;  /* 薄い罫線 */
  --gc-shadow:    0 2px 10px rgba(0, 96, 84, .06);
  --gc-shadow-mid:0 8px 24px rgba(0, 96, 84, .12);
  --gc-shadow-up: 0 14px 32px rgba(0, 96, 84, .18);

  /* マーカー（既存記事のハイライト統一にも使用） */
  --gc-marker:    rgba(123, 232, 216, .55);

  /* 形状 */
  --gc-radius:    10px;
  --gc-radius-sm: 6px;
  --gc-radius-lg: 16px;

  /* 調整用（数値を変えるだけで効きます） */
  --gc-shift:     0px;   /* サイト全体を右にずらす量。0pxで中央揃え */
  --gc-eyecatch:  72%;   /* 記事上部アイキャッチ画像の横幅。小さくすると細くなる */
  --gc-main-pad:  46px;  /* 記事エリアの左右の余白。大きくすると文字が端から離れる */

  /* グラデーション */
  --gc-grad:      linear-gradient(135deg, var(--gc-main) 0%, var(--gc-main-deep) 100%);
  --gc-grad-line: linear-gradient(90deg, var(--gc-accent) 0%, var(--gc-main) 50%, var(--gc-main-deep) 100%);
}


/* =====================================================================
   02. ベース / タイポグラフィ
   ===================================================================== */
body {
  background-color: var(--gc-bg);
  color: var(--gc-text);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  font-feature-settings: "palt";
  letter-spacing: .02em;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

/* 記事本文・サイドバーの「面」を白いカードに統一 */
.main,
.sidebar {
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-lg);
  box-shadow: var(--gc-shadow);
}

a {
  color: var(--gc-main-dark);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
a:hover { color: var(--gc-main); }

/* 選択範囲の色もブランドに合わせる */
::selection      { background: var(--gc-accent); color: var(--gc-text); }
::-moz-selection { background: var(--gc-accent); color: var(--gc-text); }

/* スクロールバー（対応ブラウザのみ） */
* { scrollbar-color: var(--gc-main) var(--gc-bg-soft); }
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: var(--gc-bg-soft); }
::-webkit-scrollbar-thumb  { background: var(--gc-main); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gc-main-dark); }


/* =====================================================================
   03. ヘッダー・グローバルナビ
   ===================================================================== */
.header-container {
  background-color: var(--gc-surface);
  position: relative;
  box-shadow: 0 1px 0 var(--gc-line);
}

/* ヘッダー最上部の細いグラデーションライン（サイトの識別線） */
.header-container::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gc-grad-line);
  z-index: 2;
}

#header,
.header {
  background-color: transparent;
  color: var(--gc-text);
}

#header .site-name-text,
.site-name-text {
  color: var(--gc-main-dark);
  font-weight: 700;
  letter-spacing: .04em;
}
#header .tagline,
.tagline {
  color: var(--gc-text-sub);
  font-size: .8em;
  letter-spacing: .06em;
}

/* --- グローバルナビ --- */
#navi,
.navi {
  background-color: var(--gc-surface);
  border-top: 1px solid var(--gc-line-soft);
}

#navi .navi-in > ul > li > a,
.navi-in > ul > li > a {
  color: var(--gc-text);
  font-weight: 600;
  letter-spacing: .05em;
  position: relative;
  transition: color .2s ease;
}

/* ホバー時に下から伸びるアンダーライン */
#navi .navi-in > ul > li > a::after,
.navi-in > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 0;
  height: 2px;
  background: var(--gc-grad-line);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width .25s ease;
}
#navi .navi-in > ul > li > a:hover,
.navi-in > ul > li > a:hover {
  background-color: transparent;
  color: var(--gc-main);
}
#navi .navi-in > ul > li > a:hover::after,
.navi-in > ul > li > a:hover::after {
  width: calc(100% - 24px);
}

/* 現在地のメニュー項目 */
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current_page_item > a {
  color: var(--gc-main-dark);
}
.navi-in > ul > li.current-menu-item > a::after,
.navi-in > ul > li.current_page_item > a::after {
  width: calc(100% - 24px);
}

/* サブメニュー（ドロップダウン） */
.navi-in > ul .sub-menu {
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  box-shadow: var(--gc-shadow-mid);
  overflow: hidden;
  padding: 6px 0;
}
.navi-in > ul .sub-menu li a {
  color: var(--gc-text);
  border-bottom: none;
  font-size: .92em;
}
.navi-in > ul .sub-menu li a:hover {
  background-color: var(--gc-bg-soft);
  color: var(--gc-main-dark);
}

/* ヘッダー内のCTAボタン（ナビにclass="cta"を付けたメニュー項目） */
.navi-in > ul > li.cta > a {
  background: var(--gc-grad);
  color: var(--gc-text-inv);
  border-radius: 999px;
  padding: .5em 1.6em;
  margin: 8px 6px;
  box-shadow: var(--gc-shadow);
}
.navi-in > ul > li.cta > a:hover {
  color: var(--gc-text-inv);
  filter: brightness(1.08);
}
.navi-in > ul > li.cta > a::after { display: none; }


/* =====================================================================
   04. モバイルメニュー
   ===================================================================== */
.mobile-menu-buttons,
.mobile-header-menu-buttons {
  background-color: var(--gc-main-dark);
  color: var(--gc-text-inv);
}
.mobile-menu-buttons .menu-button a,
.mobile-menu-buttons .menu-icon,
.mobile-menu-buttons .menu-caption {
  color: var(--gc-text-inv);
}
.navi-menu-content,
.menu-drawer {
  background-color: var(--gc-main-deep);
  color: var(--gc-text-inv);
}
.menu-drawer a,
.navi-menu-content a {
  color: var(--gc-text-inv);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.menu-drawer a:hover {
  background-color: rgba(255, 255, 255, .08);
  color: var(--gc-accent);
}
.menu-close-button { color: var(--gc-text-inv); }


/* =====================================================================
   05. パンくずリスト
   ===================================================================== */
#breadcrumb,
.breadcrumb {
  color: var(--gc-text-weak);
  font-size: .78em;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
#breadcrumb a,
.breadcrumb a { color: var(--gc-text-sub); }
#breadcrumb a:hover,
.breadcrumb a:hover { color: var(--gc-main); }
.breadcrumb .fa { color: var(--gc-main); }


/* =====================================================================
   06. 記事一覧カード
   一覧・アーカイブ・検索結果のカードを共通の見た目に統一します。
   ===================================================================== */
.entry-card-wrap,
.related-entry-card-wrap {
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* ホバーで上部にブランドラインが走る */
.entry-card-wrap::before,
.related-entry-card-wrap::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 3px;
  background: var(--gc-grad-line);
  transition: width .3s ease;
  z-index: 3;
}
.entry-card-wrap:hover::before,
.related-entry-card-wrap:hover::before { width: 100%; }

.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  background-color: var(--gc-surface);
  border-color: var(--gc-accent-2);
  box-shadow: var(--gc-shadow-up);
  transform: translateY(-3px);
}

/* Cocoonのリンク共通クラス。既定のホバー背景色を打ち消す */
.a-wrap:hover { background-color: transparent; }

/* サムネイル */
.entry-card-thumb,
.related-entry-card-thumb {
  overflow: hidden;
  border-radius: var(--gc-radius-sm);
}
.entry-card-thumb img,
.related-entry-card-thumb img {
  transition: transform .45s ease;
  display: block;
  width: 100%;
}
.entry-card-wrap:hover .entry-card-thumb img,
.related-entry-card-wrap:hover .related-entry-card-thumb img {
  transform: scale(1.06);
}

/* タイトル */
.entry-card-title,
.related-entry-card-title {
  color: var(--gc-text);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
  transition: color .2s ease;
}
.entry-card-wrap:hover .entry-card-title,
.related-entry-card-wrap:hover .related-entry-card-title {
  color: var(--gc-main-dark);
}

.entry-card-snippet,
.related-entry-card-snippet {
  color: var(--gc-text-sub);
  font-size: .86em;
  line-height: 1.8;
}

/* 日付などのメタ情報 */
.entry-card-meta,
.related-entry-card-meta,
.e-card-info,
.post-date,
.post-update {
  color: var(--gc-text-weak);
  font-size: .76em;
  letter-spacing: .04em;
}
.entry-card-meta .fa,
.post-date .fa,
.post-update .fa { color: var(--gc-main); }

/* カテゴリラベル（角ばったバッジで引き締める） */
.cat-label {
  background-color: var(--gc-main-dark);
  border: none;
  border-radius: var(--gc-radius-sm) 0 var(--gc-radius-sm) 0;
  color: var(--gc-text-inv);
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .3em .9em;
}

/* カテゴリ・タグのリンク（記事下など） */
.entry-categories a,
.entry-tags a,
.cat-link,
.tag-link {
  background-color: var(--gc-bg-soft);
  border: 1px solid var(--gc-line);
  border-radius: 999px;
  color: var(--gc-main-dark);
  display: inline-block;
  font-size: .78em;
  line-height: 1.6;
  margin: 0 6px 6px 0;
  padding: .25em 1em;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.entry-categories a:hover,
.entry-tags a:hover,
.cat-link:hover,
.tag-link:hover {
  background-color: var(--gc-main);
  border-color: var(--gc-main);
  color: var(--gc-text-inv);
}

/* 一覧の見出し（新着記事 / カテゴリー名など） */
.archive-title,
.list-title,
.category-page-title,
.tag-page-title,
.author-title,
.h-arc {
  border-left: 6px solid var(--gc-main);
  color: var(--gc-text);
  font-weight: 700;
  letter-spacing: .04em;
  padding-left: .7em;
}


/* =====================================================================
   07. ページネーション
   ===================================================================== */
.pagination .page-numbers,
.pagination-next-link,
.comment-btn {
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  color: var(--gc-main-dark);
  font-weight: 600;
  transition: all .2s ease;
}
.pagination .page-numbers:hover,
.pagination-next-link:hover {
  background-color: var(--gc-main);
  border-color: var(--gc-main);
  color: var(--gc-text-inv);
}
.pagination .current,
.pagination .page-numbers.current {
  background: var(--gc-grad);
  border-color: var(--gc-main-dark);
  color: var(--gc-text-inv);
}


/* =====================================================================
   08. 記事ページ（タイトル・メタ情報）
   ===================================================================== */
.article-header .entry-title,
.entry-title,
.page .entry-title {
  color: var(--gc-text);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .01em;
  border: none;
  padding: 0 0 .6em;
  margin-bottom: .8em;
  position: relative;
}
/* タイトル下の二重ライン（細い全幅ライン＋濃いアクセント） */
.article-header .entry-title::after,
.entry-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--gc-line);
}
.article-header .entry-title::before,
.entry-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 3px;
  background: var(--gc-grad-line);
  border-radius: 2px;
  z-index: 1;
}

/* 日付・更新日 */
.date-tags,
.article .post-date,
.article .post-update {
  color: var(--gc-text-weak);
  font-size: .8em;
}

/* アイキャッチ
   横幅を抑えて中央揃え。height:auto を必ず付けて縦横比を保つ
   （width だけ指定すると、img の height 属性が効いて画像が潰れます） */
.eye-catch-wrap,
.eye-catch {
  border-radius: var(--gc-radius);
  box-shadow: var(--gc-shadow);
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--gc-eyecatch);
  overflow: hidden;
  text-align: center;
  width: auto;
}
.eye-catch img,
.eye-catch-wrap img {
  display: block;
  height: auto !important;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* ヘッダーロゴなども同じ理由で潰れないように保険をかける */
.logo-header img,
.header img,
.site-name-text img { height: auto; max-width: 100%; }


/* =====================================================================
   09. 本文の書式（見出し・段落・リスト・表など）
   ここが「既存記事の書式を揃える」ための中心部分です。
   投稿時期に関係なく、同じ要素は必ず同じ見た目になります。
   ===================================================================== */
.entry-content {
  color: var(--gc-text);
  font-size: 1rem;
  line-height: 1.95;
}
.entry-content > *:first-child { margin-top: 0; }

.entry-content p {
  margin: 0 0 1.6em;
}

.entry-content a {
  color: var(--gc-main-dark);
  font-weight: 600;
  border-bottom: 1px solid var(--gc-accent);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.entry-content a:hover {
  background-color: var(--gc-bg-soft);
  border-bottom-color: var(--gc-main);
  color: var(--gc-main);
}
/* 画像リンク・ボタン・ブログカードには下線を付けない */
.entry-content a:has(> img),
.entry-content a.btn,
.entry-content .blogcard-wrap a,
.entry-content figure a {
  border-bottom: none;
  background-color: transparent;
}

/* --- 見出し --- */
/* h2 : 縦のグラデーションバー＋下線。記事の大区切り */
.entry-content h2,
.article h2 {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--gc-line);
  color: var(--gc-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  margin: 3em 0 1.4em;
  padding: .1em 0 .55em .95em;
  position: relative;
}
.entry-content h2::before,
.article h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .62em;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gc-accent) 0%, var(--gc-main) 55%, var(--gc-main-deep) 100%);
}
.entry-content h2::after,
.article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 22%;
  min-width: 90px;
  height: 3px;
  border-radius: 2px;
  background: var(--gc-grad-line);
}

/* h3 : 左の太バー。h2より軽く */
.entry-content h3,
.article h3 {
  background-color: transparent;
  border: none;
  border-left: 5px solid var(--gc-main);
  color: var(--gc-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 2.6em 0 1.1em;
  padding: .15em 0 .15em .75em;
}

/* h4 : 小さな四角のマーカー付き */
.entry-content h4,
.article h4 {
  background-color: transparent;
  border: none;
  color: var(--gc-main-dark);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 2.2em 0 .9em;
  padding-left: 1.1em;
  position: relative;
}
.entry-content h4::before,
.article h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--gc-grad);
  transform: rotate(45deg);
}

/* h5 / h6 */
.entry-content h5,
.article h5 {
  border: none;
  border-bottom: 2px dotted var(--gc-line);
  color: var(--gc-text);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 2em 0 .8em;
  padding-bottom: .3em;
}
.entry-content h6,
.article h6 {
  border: none;
  color: var(--gc-text-sub);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 1.8em 0 .7em;
}

/* --- リスト --- */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.7em;
  padding-left: 1.6em;
}
.entry-content li {
  margin-bottom: .55em;
  line-height: 1.85;
}
.entry-content li::marker { color: var(--gc-main); font-weight: 700; }
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin: .55em 0 0;
}

/* --- 引用 --- */
.entry-content blockquote,
blockquote {
  background-color: var(--gc-bg-soft);
  border: none;
  border-left: 5px solid var(--gc-main);
  border-radius: 0 var(--gc-radius-sm) var(--gc-radius-sm) 0;
  color: var(--gc-text-sub);
  margin: 0 0 1.8em;
  padding: 1.3em 1.5em .6em 1.6em;
  position: relative;
}
.entry-content blockquote::before,
blockquote::before {
  content: "\201C";
  position: absolute;
  right: 16px;
  top: 0;
  color: var(--gc-accent);
  font-family: Georgia, serif;
  font-size: 3.4em;
  line-height: 1;
  opacity: .8;
}
.entry-content blockquote cite {
  color: var(--gc-text-weak);
  display: block;
  font-size: .82em;
  font-style: normal;
  margin-top: .4em;
}

/* --- 表 --- */
.entry-content table {
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--gc-radius-sm);
  overflow: hidden;
  margin: 0 0 1.8em;
  width: 100%;
}
.entry-content table th {
  background-color: var(--gc-main-dark);
  border: none;
  border-bottom: 1px solid var(--gc-line);
  color: var(--gc-text-inv);
  font-weight: 700;
  letter-spacing: .04em;
  padding: .85em 1em;
  text-align: left;
}
.entry-content table td {
  border: none;
  border-bottom: 1px solid var(--gc-line-soft);
  padding: .85em 1em;
  vertical-align: middle;
}
/* 縦見出し（1列目がth）の場合 */
.entry-content table tbody th {
  background-color: var(--gc-bg-soft);
  color: var(--gc-main-dark);
  border-bottom: 1px solid var(--gc-line-soft);
}
.entry-content table tbody tr:last-child th,
.entry-content table tbody tr:last-child td { border-bottom: none; }
.entry-content table tbody tr:nth-child(even) td { background-color: rgba(0, 181, 160, .035); }

/* 横幅が足りない表は横スクロールに（スマホ対策） */
.entry-content .scrollable-table,
.entry-content .wp-block-table {
  overflow-x: auto;
}

/* --- 画像・図 --- */
.entry-content img {
  border-radius: var(--gc-radius-sm);
  height: auto;
  max-width: 100%;
}
.entry-content figure {
  margin: 0 0 1.8em;
}
.entry-content figcaption,
.entry-content .wp-caption-text {
  color: var(--gc-text-weak);
  font-size: .8em;
  line-height: 1.7;
  margin-top: .6em;
  text-align: center;
}

/* --- 区切り線 --- */
.entry-content hr {
  background: var(--gc-grad-line);
  border: none;
  height: 2px;
  margin: 3em auto;
  opacity: .5;
  width: 100%;
}

/* --- コード --- */
.entry-content code {
  background-color: var(--gc-bg-soft);
  border: 1px solid var(--gc-line);
  border-radius: 4px;
  color: var(--gc-main-deep);
  font-size: .88em;
  padding: .15em .45em;
}
.entry-content pre {
  background-color: #0E1F1C;
  border: none;
  border-left: 4px solid var(--gc-main);
  border-radius: var(--gc-radius-sm);
  color: #E4F5F1;
  line-height: 1.7;
  margin: 0 0 1.8em;
  overflow-x: auto;
  padding: 1.2em 1.4em;
}
.entry-content pre code {
  background-color: transparent;
  border: none;
  color: inherit;
  padding: 0;
}

/* --- 強調 --- */
.entry-content strong,
.entry-content b { font-weight: 700; }
.entry-content mark,
.entry-content .marker {
  background: linear-gradient(transparent 62%, var(--gc-marker) 0);
  color: inherit;
  padding: 0 .1em;
}


/* =====================================================================
   10. Cocoon装飾パーツ（ボックス・ブログカード等）
   投稿ごとにバラつきがちなパーツを、同じトーンに揃えます。
   ===================================================================== */

/* --- 各種ボックス --- */
.blank-box,
.information-box,
.question-box,
.alert-box,
.memo-box,
.comment-box,
.common-icon-box,
.sticky-box {
  background-color: var(--gc-bg-soft);
  border: 1px solid var(--gc-line);
  border-left: 5px solid var(--gc-main);
  border-radius: var(--gc-radius-sm);
  box-shadow: none;
  color: var(--gc-text);
  margin: 0 0 1.8em;
  padding: 1.2em 1.4em;
}
.blank-box > *:last-child,
.information-box > *:last-child,
.question-box > *:last-child,
.alert-box > *:last-child { margin-bottom: 0; }

/* 種類ごとにアクセント色だけ変える（形はすべて共通） */
.information-box { border-left-color: var(--gc-main); }
.question-box    { border-left-color: #3A9BD9; background-color: #EEF6FC; }
.alert-box       { border-left-color: #E0733C; background-color: #FDF2EC; }
.memo-box        { border-left-color: var(--gc-accent-2); }
.sticky-box      { border-left-color: var(--gc-main-deep); }

/* Cocoonの色付きボックス（blank-box bb-*）も角丸と余白だけ統一 */
.blank-box.bb-tab,
.blank-box.bb-key,
.blank-box.bb-check,
.blank-box.bb-good,
.blank-box.bb-bad {
  border-radius: var(--gc-radius-sm);
  padding: 1.2em 1.4em;
}

/* --- ボタン --- */
.btn,
.btn-wrap > a,
a.btn-l,
a.btn-m,
a.btn-s,
.wp-block-button__link {
  background: var(--gc-grad);
  border: none;
  border-radius: 999px;
  box-shadow: var(--gc-shadow);
  color: var(--gc-text-inv) !important;
  display: inline-block;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .85em 2.2em;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover,
.btn-wrap > a:hover,
.wp-block-button__link:hover {
  box-shadow: var(--gc-shadow-mid);
  filter: brightness(1.08);
  transform: translateY(-2px);
}
/* 白抜き（アウトライン）ボタン */
.btn-wrap.btn-wrap-border > a,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--gc-surface);
  border: 2px solid var(--gc-main);
  color: var(--gc-main-dark) !important;
}
.btn-wrap.btn-wrap-border > a:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--gc-main);
  color: var(--gc-text-inv) !important;
}

/* --- ブログカード（内部・外部リンク） --- */
.blogcard-wrap,
.blogcard {
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  box-shadow: none;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.blogcard-wrap:hover {
  border-color: var(--gc-accent-2);
  box-shadow: var(--gc-shadow-mid);
  transform: translateY(-2px);
}
.blogcard-title {
  color: var(--gc-text);
  font-weight: 700;
}
.blogcard-snippet { color: var(--gc-text-sub); }
.blogcard-label {
  background-color: var(--gc-main-dark);
  border-radius: var(--gc-radius-sm) 0 var(--gc-radius-sm) 0;
  color: var(--gc-text-inv);
  font-size: .72em;
  letter-spacing: .06em;
}
.blogcard-footer,
.blogcard-domain { color: var(--gc-text-weak); }

/* --- 吹き出し --- */
.speech-wrap .speech-balloon {
  background-color: var(--gc-bg-soft);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  color: var(--gc-text);
}
.speech-wrap .speech-balloon::before { border-right-color: var(--gc-line); }
.speech-wrap .speech-balloon::after  { border-right-color: var(--gc-bg-soft); }
.speech-wrap.sbs-flat .speech-balloon { box-shadow: none; }
.speech-person figure img {
  border: 2px solid var(--gc-line);
  border-radius: 50%;
}
.speech-name { color: var(--gc-text-sub); font-size: .78em; }

/* --- 開閉ボックス（トグル） --- */
.toggle-wrap {
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  margin: 0 0 1.8em;
  overflow: hidden;
}
.toggle-button {
  background-color: var(--gc-bg-soft);
  border: none;
  color: var(--gc-main-dark);
  font-weight: 700;
  padding: .9em 1.2em .9em 2.4em;
}
.toggle-button:hover { background-color: var(--gc-accent); color: var(--gc-main-deep); }
.toggle-checkbox:checked ~ .toggle-content { border-top: 1px solid var(--gc-line); }
.toggle-content { padding: 1.2em 1.4em; }

/* --- 参考・囲みラベル --- */
.caption-box {
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  overflow: hidden;
}
.caption-box-label {
  background-color: var(--gc-main-dark);
  color: var(--gc-text-inv);
  font-weight: 700;
  letter-spacing: .04em;
}
.caption-box-content { background-color: var(--gc-surface); }

/* --- 広告・アピールエリア --- */
.appeal {
  background: var(--gc-grad);
  color: var(--gc-text-inv);
}
.appeal-content,
.appeal .appeal-message { color: var(--gc-text-inv); }
.appeal .appeal-button {
  background-color: var(--gc-surface);
  border-radius: 999px;
  color: var(--gc-main-deep);
  font-weight: 700;
}


/* =====================================================================
   11. 目次（TOC）
   ===================================================================== */
.toc {
  background-color: var(--gc-bg-soft);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  box-shadow: none;
  padding: 1.4em 1.6em;
  width: 100%;
}
.toc-title {
  color: var(--gc-main-deep);
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: .6em;
  padding-bottom: .5em;
  border-bottom: 2px solid var(--gc-accent);
  text-align: left;
}
.toc-content ol,
.toc-content ul { padding-left: 1.3em; }
.toc-list > li { margin-bottom: .45em; }
.toc-list a {
  color: var(--gc-text);
  border-bottom: none;
  font-weight: 600;
}
.toc-list a:hover { color: var(--gc-main); }
.toc-list ol a,
.toc-list ul a { font-weight: 400; font-size: .93em; color: var(--gc-text-sub); }
.toc-checkbox + .toc-title::after { color: var(--gc-main); }


/* =====================================================================
   12. サイドバー / ウィジェット
   ===================================================================== */
.sidebar h2,
.sidebar h3,
.widget-sidebar-standard .widget-title,
.widget_block h2,
.sidebar-menu-content h3 {
  background-color: transparent;
  border: none;
  border-left: 6px solid var(--gc-main);
  color: var(--gc-text);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 1em;
  padding: .1em 0 .1em .7em;
  text-align: left;
}

.widget-sidebar,
.widget_block,
.widget {
  margin-bottom: 2.2em;
}

/* サイドバーの記事リスト */
.widget-entry-cards .widget-entry-card-title,
.widget-entry-cards a .widget-entry-card-title {
  color: var(--gc-text);
  font-weight: 600;
  line-height: 1.55;
}
.widget-entry-cards .a-wrap:hover .widget-entry-card-title { color: var(--gc-main-dark); }
.widget-entry-cards figure img { border-radius: var(--gc-radius-sm); }
.widget-entry-card-date,
.widget-entry-card-meta { color: var(--gc-text-weak); font-size: .74em; }

/* ランキング番号などのバッジ */
.widget-entry-cards.ranking-visible .no,
.card-thumb .no {
  background-color: var(--gc-main);
  border-radius: var(--gc-radius-sm) 0 var(--gc-radius-sm) 0;
  color: var(--gc-text-inv);
  font-weight: 700;
}

/* カテゴリー・アーカイブなどのリスト型ウィジェット
   （カード型ウィジェットに影響しないよう、対象を明示的に絞っています） */
.widget_categories li a,
.widget_archive li a,
.widget_recent_entries li a,
.widget_pages li a,
.widget_meta li a,
.widget_nav_menu li a {
  border-bottom: 1px solid var(--gc-line-soft);
  color: var(--gc-text);
  display: block;
  padding: .6em .2em .6em 1.1em;
  position: relative;
  transition: color .2s ease, padding-left .2s ease;
}
.widget_categories li a::before,
.widget_archive li a::before,
.widget_recent_entries li a::before,
.widget_pages li a::before,
.widget_nav_menu li a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--gc-main);
  transform: translateY(-50%);
}
.widget_categories li a:hover,
.widget_archive li a:hover,
.widget_recent_entries li a:hover,
.widget_pages li a:hover,
.widget_nav_menu li a:hover {
  color: var(--gc-main-dark);
  padding-left: 1.4em;
}

/* 追従サイドバー内も同じ見た目に */
.sidebar-scroll .widget { margin-bottom: 1.6em; }


/* =====================================================================
   13. 関連記事・著者・コメント・前後ナビ
   ===================================================================== */
.related-entries .related-entry-heading,
.comment-title,
.comment-reply-title,
.author-box-title {
  border-left: 6px solid var(--gc-main);
  color: var(--gc-text);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding-left: .7em;
  margin-bottom: 1.2em;
}

/* 著者情報 */
.author-box {
  background-color: var(--gc-bg-soft);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  padding: 1.5em;
}
.author-box .author-name a { color: var(--gc-main-dark); font-weight: 700; }
.author-box .author-thumb img {
  border: 3px solid var(--gc-surface);
  border-radius: 50%;
  box-shadow: var(--gc-shadow);
}

/* 前後の記事ナビ */
.pager-post-navi a {
  border-color: var(--gc-line);
  transition: background-color .2s ease;
}
.pager-post-navi a:hover { background-color: var(--gc-bg-soft); }
.pager-post-navi .fa { color: var(--gc-main); }
.pager-post-navi .post-navi-title {
  color: var(--gc-main-dark);
  font-size: .76em;
  font-weight: 700;
  letter-spacing: .06em;
}

/* コメント */
.comment-area,
.comment-respond {
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  padding: 1.6em;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  color: var(--gc-text);
  padding: .7em .9em;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--gc-main);
  box-shadow: 0 0 0 3px rgba(0, 181, 160, .16);
  outline: none;
}
.comment-form input[type="submit"],
input[type="submit"],
button[type="submit"] {
  background: var(--gc-grad);
  border: none;
  border-radius: 999px;
  color: var(--gc-text-inv);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .8em 2.2em;
  transition: filter .2s ease, transform .2s ease;
}
.comment-form input[type="submit"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* SNSシェアボタン（形だけ統一） */
.sns-share .snsbtn,
.sns-follow .snsbtn {
  border-radius: var(--gc-radius-sm);
}
.sns-share-message,
.sns-follow-message {
  color: var(--gc-text-sub);
  font-weight: 700;
  letter-spacing: .04em;
}


/* =====================================================================
   14. フッター
   ===================================================================== */
.footer,
#footer {
  background: var(--gc-grad);
  color: var(--gc-text-inv);
  position: relative;
}
/* 内側の要素はグラデーションを重ねない（色ムラ防止） */
.footer-in,
.footer-bottom {
  background-color: transparent;
  color: inherit;
}
.footer::before,
#footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gc-grad-line);
}
.footer a,
#footer a { color: var(--gc-text-inv); }
.footer a:hover,
#footer a:hover { color: var(--gc-accent); }

.footer h3,
.footer .widget-title,
#footer h3 {
  border-left: 4px solid var(--gc-accent);
  color: var(--gc-text-inv);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding-left: .7em;
}
.footer-bottom,
.footer-bottom-logo,
.copyright {
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .8);
  font-size: .8em;
}
.navi-footer-in > .menu-footer li a {
  border: none;
  color: var(--gc-text-inv);
  opacity: .9;
}
.navi-footer-in > .menu-footer li a:hover { color: var(--gc-accent); opacity: 1; }
.footer .widget ul li a { border-bottom-color: rgba(255, 255, 255, .15); }
.footer .widget ul li a::before { background-color: var(--gc-accent); }


/* =====================================================================
   15. 検索・トップへ戻る
   ===================================================================== */
.search-box,
.search-form {
  border: 1px solid var(--gc-line);
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--gc-surface);
}
.search-edit,
.search-box input[type="text"] {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding-left: 1.2em;
}
.search-edit:focus { box-shadow: none; }
.search-submit,
.search-box button {
  background-color: var(--gc-main);
  border: none;
  color: var(--gc-text-inv);
  transition: background-color .2s ease;
}
.search-submit:hover { background-color: var(--gc-main-dark); }

/* トップへ戻るボタン */
.go-to-top .go-to-top-button,
.go-to-top-button {
  background: var(--gc-grad);
  border-radius: 50%;
  box-shadow: var(--gc-shadow-mid);
  color: var(--gc-text-inv);
  transition: transform .2s ease, filter .2s ease;
}
.go-to-top .go-to-top-button:hover {
  filter: brightness(1.1);
  transform: translateY(-3px);
}


/* =====================================================================
   16. 既存記事の書式統一（インライン指定の上書き）
   ---------------------------------------------------------------------
   過去の記事にエディタで直接指定された文字色・文字サイズ・書体・
   背景色を、テーマ側の統一書式に強制的に寄せます。
   これにより投稿時期によるムラがなくなります。

   ※ 意図的な装飾も打ち消されます。
     ・特定の要素だけ元の指定を残したい場合 → その要素に class="keep-style" を付ける
     ・この統一処理そのものが不要な場合     → このセクション（ここから
       「16 ここまで」まで）を丸ごと削除する
   ===================================================================== */

/* 文字サイズ・書体・行間の直接指定をリセット */
.entry-content [style*="font-size"]:not(.keep-style),
.entry-content [style*="font-family"]:not(.keep-style),
.entry-content [style*="line-height"]:not(.keep-style) {
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}

/* 文字色の直接指定をリセット（本文色に統一） */
.entry-content span[style*="color"]:not(.keep-style),
.entry-content p[style*="color"]:not(.keep-style),
.entry-content div[style*="color"]:not(.keep-style),
.entry-content li[style*="color"]:not(.keep-style),
.entry-content font[color]:not(.keep-style) {
  color: inherit !important;
}

/* 見出しの色指定も打ち消して、見出し書式を完全に統一 */
.entry-content h2[style],
.entry-content h3[style],
.entry-content h4[style],
.entry-content h5[style],
.entry-content h6[style] {
  color: inherit !important;
  font-size: inherit !important;
  background-color: transparent !important;
  text-align: left !important;
}
/* ↑ font-size:inherit だと親サイズになるため、見出しサイズを再指定 */
.entry-content h2[style] { font-size: 1.5rem !important; }
.entry-content h3[style] { font-size: 1.25rem !important; }
.entry-content h4[style] { font-size: 1.1rem !important; color: var(--gc-main-dark) !important; }
.entry-content h5[style] { font-size: 1.02rem !important; }
.entry-content h6[style] { font-size: .95rem !important; }

/* バラバラな背景色ハイライトを、ブランドカラーのマーカーに統一
   （インライン要素のみが対象。グループブロック等の面の背景色は壊さない） */
.entry-content span[style*="background-color"]:not(.keep-style),
.entry-content span[style*="background:"]:not(.keep-style),
.entry-content strong[style*="background"]:not(.keep-style),
.entry-content em[style*="background"]:not(.keep-style),
.entry-content mark[style*="background"]:not(.keep-style) {
  background: linear-gradient(transparent 62%, var(--gc-marker) 0) !important;
  color: inherit !important;
  padding: 0 .1em;
}

/* ブロックエディタの文字色クラス（has-***-color）も統一 */
.entry-content span.has-text-color:not(.keep-style),
.entry-content p.has-text-color:not(.keep-style),
.entry-content li.has-text-color:not(.keep-style) {
  color: inherit !important;
}
/* 同じくハイライト用の背景色クラス（インライン要素のみ） */
.entry-content span.has-background:not(.keep-style),
.entry-content mark.has-inline-color:not(.keep-style) {
  background: linear-gradient(transparent 62%, var(--gc-marker) 0) !important;
  color: inherit !important;
}

/* 文字寄せ（text-align）の直接指定は、レイアウト崩れを防ぐため
   あえて上書きしていません。統一が必要なのは見出しのみで、
   見出しは上の h2〜h6 の指定で左寄せに統一済みです。 */

/* 16 ここまで */


/* =====================================================================
   17. レスポンシブ
   ===================================================================== */

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .main,
  .sidebar {
    border-radius: var(--gc-radius);
  }
  .entry-content h2,
  .article h2 { font-size: 1.35rem; margin-top: 2.6em; }
  .entry-content h3,
  .article h3 { font-size: 1.16rem; }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .main,
  .sidebar {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .article-header .entry-title,
  .entry-title { font-size: 1.4rem; }

  .entry-content { font-size: .97rem; line-height: 1.85; }

  /* スマホでは表を横スクロール可能にして、はみ出しを防ぐ
     （nowrapは付けない。日本語のセルが極端に横長になるのを避けるため） */
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .entry-content table th,
  .entry-content table td { padding: .7em .8em; }

  .toc { padding: 1.1em 1.2em; }
  .footer h3 { font-size: .92rem; }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .entry-content h2,
  .article h2 {
    font-size: 1.22rem;
    margin: 2.2em 0 1.1em;
    padding-left: .75em;
  }
  .entry-content h2::before,
  .article h2::before { width: 5px; }
  .entry-content h3,
  .article h3 { font-size: 1.08rem; border-left-width: 4px; }
  .entry-content h4,
  .article h4 { font-size: 1.02rem; }

  .article-header .entry-title,
  .entry-title { font-size: 1.25rem; }

  .entry-card-title { font-size: .96rem; }

  .btn,
  .btn-wrap > a,
  .wp-block-button__link {
    display: block;
    padding: .85em 1.2em;
    width: 100%;
  }

  .blank-box,
  .information-box,
  .question-box,
  .alert-box,
  .memo-box { padding: 1em 1.1em; }

  .entry-content blockquote { padding: 1.1em 1.1em .4em 1.2em; }

  /* スマホではアイキャッチを幅いっぱいに戻す（細くしすぎると見えないため） */
  .eye-catch-wrap,
  .eye-catch { max-width: 100%; }
}


/* =====================================================================
   18. レイアウト調整・非表示設定
   このセクションは後から追加した個別調整です。
   ファイルの最後にあるため、上の指定より優先されます。
   ===================================================================== */

/* --- 記事下の関連記事を非表示 --- */
/* ※ CSSで隠しているだけなので、HTML自体は出力され続けます。
     完全に止めるなら Cocoon設定 → 投稿 → 関連記事 で表示をOFFにしてください
     （そのほうがページの読み込みも軽くなります）。 */
.related-entries,
#related-entries,
.related-list,
.under-entry-content .related-entries {
  display: none !important;
}

/* --- サイト全体をやや右へずらす --- */
/* ずらす量は :root の --gc-shift で調整できます（0px で中央のまま）。
   幅の広い画面でのみ適用し、タブレット・スマホでは何もしません。 */
@media screen and (min-width: 1024px) {
  #content .wrap,
  #content > .wrap,
  .content .wrap,
  #main-content .wrap {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gc-shift);
  }
}


/* =====================================================================
   19. ヘッダーのサイト名・リンク列
   ===================================================================== */

/* --- サイト名（日常リーガル）を中央揃え --- */
#header .logo-header,
#header-in .logo-header,
.header-container .logo-header,
#header .site-name,
#header .site-name-text,
#header .site-name-text-link,
#header .tagline,
.header-container .tagline {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 100%;
}
#header .site-name-text {
  font-size: 1.7rem;
  letter-spacing: .16em;  /* 字間を広げて落ち着いた印象に */
  line-height: 1.4;
}
/* ロゴ画像を使っている場合も中央に */
#header .logo-header img,
#header .site-name-text img { margin-left: auto; margin-right: auto; }


/* --- ヘッダー内のリンク4つを横並びに --- */
/* 「・」付きで縦に並ぶのを解除し、ハイライン区切りの1行に整えます。
   ヘッダー内のメニュー・固定ページ一覧のどれで出力されていても効くよう、
   対象を広めに指定しています。 */
#header .widget ul,
#header-in .widget ul,
.header-container .widget ul,
.header-container .widget_pages ul,
.header-container .widget_nav_menu ul,
.header-container .widget_categories ul,
.header-container .menu,
#header .menu {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  list-style: none;
  margin: 6px auto 0;
  padding: 0;
}

/* 各項目：区切り線で仕切るだけの控えめな作り */
.header-container .widget li,
#header .widget li,
.header-container .menu > li,
#header .menu > li {
  border-bottom: none;
  line-height: 1.2;
  list-style: none;
  margin: 2px 0;
  padding: 0;
}
.header-container .widget li + li,
#header .widget li + li,
.header-container .menu > li + li,
#header .menu > li + li {
  border-left: 1px solid var(--gc-line);
}

.header-container .widget li a,
#header .widget li a,
.header-container .menu > li > a,
#header .menu > li > a {
  border-bottom: none;
  color: var(--gc-text-sub);
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .3em 1.1em;
  position: relative;
  transition: color .2s ease;
  white-space: nowrap;
}

/* セクション12で付けた緑の丸を、ヘッダー内では消す */
.header-container .widget li a::before,
#header .widget li a::before,
.header-container .menu > li > a::before {
  content: none;
  display: none;
}

/* ホバー：色が変わり、下から細いラインが伸びる（派手さを抑えた演出） */
.header-container .widget li a::after,
#header .widget li a::after,
.header-container .menu > li > a::after {
  background: var(--gc-main);
  bottom: 0;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: width .25s ease;
  width: 0;
}
.header-container .widget li a:hover,
#header .widget li a:hover,
.header-container .menu > li > a:hover {
  background-color: transparent;
  color: var(--gc-main-dark);
  padding-left: 1.1em;  /* セクション12の padding 変化を打ち消す */
}
.header-container .widget li a:hover::after,
#header .widget li a:hover::after,
.header-container .menu > li > a:hover::after {
  width: calc(100% - 2.2em);
}

/* ヘッダー内ウィジェットの見出しは不要なので隠す */
.header-container .widget .widget-title,
#header .widget .widget-title { display: none; }

/* 狭い画面では区切り線を外して折り返す */
@media screen and (max-width: 480px) {
  .header-container .widget li + li,
  #header .widget li + li,
  .header-container .menu > li + li { border-left: none; }

  .header-container .widget li a,
  #header .widget li a,
  .header-container .menu > li > a {
    font-size: .74rem;
    padding: .3em .7em;
  }
  #header .site-name-text { font-size: 1.35rem; letter-spacing: .1em; }
}


/* =====================================================================
   20. 固定ページリンク列の横並び（場所を問わず適用）
   ---------------------------------------------------------------------
   「お問い合わせフォーム / このサイトについて / サイトマップ /
     プライバシーポリシー」の列を1行に整えます。
   ヘッダーの内か外かに関係なく効くよう、ウィジェットの種類で指定し、
   サイドバーとフッターだけ従来の縦積みに戻す構成にしています。
   ===================================================================== */

.widget_pages > ul,
.widget_nav_menu ul.menu,
.widget_nav_menu > div > ul,
.widget_meta > ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  list-style: none !important;
  margin: 0 auto;
  padding: 0 !important;
}

.widget_pages > ul > li,
.widget_nav_menu ul.menu > li,
.widget_nav_menu > div > ul > li,
.widget_meta > ul > li {
  border-bottom: none;
  line-height: 1.2;
  list-style: none !important;
  margin: 3px 0;
  padding: 0;
}
/* 項目間の細い区切り線 */
.widget_pages > ul > li + li,
.widget_nav_menu ul.menu > li + li,
.widget_nav_menu > div > ul > li + li,
.widget_meta > ul > li + li {
  border-left: 1px solid var(--gc-line);
}

.widget_pages > ul > li > a,
.widget_nav_menu ul.menu > li > a,
.widget_nav_menu > div > ul > li > a,
.widget_meta > ul > li > a {
  border-bottom: none;
  color: var(--gc-text-sub);
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .3em 1.2em;
  position: relative;
  transition: color .2s ease;
  white-space: nowrap;
}
/* セクション12で付けた緑の丸を消す */
.widget_pages > ul > li > a::before,
.widget_nav_menu ul.menu > li > a::before,
.widget_meta > ul > li > a::before {
  content: none !important;
  display: none !important;
}
/* ホバー：文字色が変わり、下から細いラインが伸びる */
.widget_pages > ul > li > a::after,
.widget_nav_menu ul.menu > li > a::after,
.widget_meta > ul > li > a::after {
  background: var(--gc-main);
  bottom: 0;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: width .25s ease;
  width: 0;
}
.widget_pages > ul > li > a:hover,
.widget_nav_menu ul.menu > li > a:hover,
.widget_meta > ul > li > a:hover {
  background-color: transparent;
  color: var(--gc-main-dark);
  padding-left: 1.2em;
}
.widget_pages > ul > li > a:hover::after,
.widget_nav_menu ul.menu > li > a:hover::after,
.widget_meta > ul > li > a:hover::after {
  width: calc(100% - 2.4em);
}

/* --- サイドバー・フッター内は従来どおり縦積みに戻す --- */
#sidebar .widget_pages > ul,
#sidebar .widget_nav_menu ul.menu,
#sidebar .widget_meta > ul,
#footer .widget_pages > ul,
#footer .widget_nav_menu ul.menu,
.footer .widget_pages > ul,
.footer .widget_nav_menu ul.menu {
  display: block;
}
#sidebar .widget_pages > ul > li + li,
#sidebar .widget_nav_menu ul.menu > li + li,
#sidebar .widget_meta > ul > li + li,
#footer .widget_pages > ul > li + li,
#footer .widget_nav_menu ul.menu > li + li,
.footer .widget_pages > ul > li + li,
.footer .widget_nav_menu ul.menu > li + li {
  border-left: none;
}
#sidebar .widget_pages > ul > li > a,
#sidebar .widget_nav_menu ul.menu > li > a,
#sidebar .widget_meta > ul > li > a {
  display: block;
  padding: .6em .2em .6em 1.1em;
  white-space: normal;
}


/* =====================================================================
   21. サイト名まわりの余白 / アーカイブの非表示
   ===================================================================== */

/* --- サイト名を上のグラデーションラインから離す --- */
/* ::before のラインは position:absolute で上端に固定されているため、
   中身だけが下がります。数値を変えれば余白量を調整できます。 */
.header-container { padding-top: 14px; }
#header .logo-header,
#header .site-name,
.header-container .logo-header { padding-top: 6px; }

/* --- ページ下部のアーカイブを非表示 --- */
/* 月別アーカイブのウィジェットをすべて隠します。
   サイドバーのアーカイブだけは残したい場合は、下にある
   「#sidebar .widget_archive」の行を囲っているコメント記号を外してください。 */
.widget_archive,
.widget_calendar {
  display: none !important;
}
/*
#sidebar .widget_archive { display: block !important; }
*/


/* =====================================================================
   22. モバイル表示の中央寄せ / 横はみ出し防止
   ---------------------------------------------------------------------
   スマホで「全体が左に寄る」症状は、どれか1つの要素が画面幅を超えて
   横スクロールが発生し、その広い幅を基準に配置されることが原因です。
   はみ出しを止めたうえで、主要ブロックを中央に揃えます。
   ===================================================================== */

/* 画像・表・埋め込みが画面幅を超えないようにする（全画面共通） */
img,
video,
iframe,
embed,
object,
table,
pre {
  max-width: 100%;
}

/* 長いURLや英単語が横に伸びて画面を押し広げるのを防ぐ */
.entry-content,
.entry-card-snippet,
.entry-card-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media screen and (max-width: 1023px) {
  /* 横スクロールを止める。
     これが左寄りの直接の原因になっていることが多いです。 */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* PC用の「右にずらす」指定をモバイルでは完全に無効化 */
  #content .wrap,
  #content > .wrap,
  .content .wrap,
  #main-content .wrap {
    padding-left: 0;
    padding-right: 0;
  }

  /* 主要ブロックを中央揃えにし、画面幅に収める */
  #content,
  #content-in,
  .content,
  .wrap,
  #main,
  .main,
  #sidebar,
  .sidebar,
  .header-container-in,
  .navi-in,
  .footer-in {
    box-sizing: border-box;
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  /* ヘッダーのサイト名とリンク列も中央に */
  #header .logo-header,
  #header .site-name,
  #header .site-name-text,
  .widget_pages > ul,
  .widget_nav_menu ul.menu,
  .widget_meta > ul {
    justify-content: center;
    text-align: center;
  }
}


/* =====================================================================
   23. 全体の中央揃え / 記事エリアの左右のゆとり
   ---------------------------------------------------------------------
   セクション18で入れた「右にずらす」指定を中央揃えに切り替え、
   あわせて記事エリアの内側に余白を確保します。
   ファイル末尾にあるため、これまでの指定より優先されます。
   ===================================================================== */

/* --- 外枠を中央に --- */
.wrap,
#content .wrap,
#content > .wrap,
.content .wrap,
#main-content .wrap,
#container .wrap,
#content-in,
.content-in {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* セクション18の右ずらしを打ち消す（--gc-shift は 0px に変更済み） */
@media screen and (min-width: 1024px) {
  #content .wrap,
  #content > .wrap,
  .content .wrap,
  #main-content .wrap {
    padding-left: var(--gc-shift);
    padding-right: var(--gc-shift);
  }
}

/* --- 記事エリアの左右にゆとりを持たせる --- */
/* 文字が白い面の端に寄りすぎて読みにくいのを解消します。
   余白量は :root の --gc-main-pad で調整できます。 */
.main {
  box-sizing: border-box;
  padding-left: var(--gc-main-pad);
  padding-right: var(--gc-main-pad);
}
.sidebar {
  box-sizing: border-box;
  padding-left: 22px;
  padding-right: 22px;
}

/* 記事タイトル・アイキャッチ・シェアボタンも同じ余白の内側に収める */
.main .article,
.main .article-header,
.main .entry-content,
.main .sns-share,
.main .date-tags {
  margin-left: 0;
  margin-right: 0;
}

/* 画面が狭いときは余白を詰めて、本文の幅を確保する */
@media screen and (max-width: 1023px) {
  .main { padding-left: 24px; padding-right: 24px; }
  .sidebar { padding-left: 16px; padding-right: 16px; }
}
@media screen and (max-width: 480px) {
  .main { padding-left: 15px; padding-right: 15px; }
  .sidebar { padding-left: 12px; padding-right: 12px; }
}


/* =====================================================================
   24. スマホ表示：本文を画面いっぱいに広げる
   ---------------------------------------------------------------------
   外側コンテナの余白と記事エリアの余白が重なって本文が細くなるため、
   携帯幅では外側の余白をすべて外し、画面幅いっぱいに使います。
   PC表示（835px以上）には一切影響しません。
   ===================================================================== */
@media screen and (max-width: 834px) {

  /* 記事エリアの左右余白。0pxにすると完全に端まで広がります */
  :root { --gc-main-pad: 12px; }

  /* 外側コンテナの余白・幅制限をすべて解除 */
  #content,
  #content-in,
  .content,
  .content-in,
  #main-content,
  .wrap,
  #content .wrap,
  #content > .wrap,
  .content .wrap,
  #main-content .wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  /* 記事エリア・サイドバーを画面幅いっぱいに */
  .main,
  .sidebar {
    border-left: none;
    border-radius: 0;
    border-right: none;
    box-shadow: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding-left: var(--gc-main-pad);
    padding-right: var(--gc-main-pad);
    width: 100%;
  }

  /* 記事本体まわりの幅制限も解除 */
  .main .article,
  .main .article-header,
  .main .entry-content,
  .main .post-date,
  .main .sns-share {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: auto;
  }

  /* アイキャッチもPCの72%制限を外して幅いっぱいに */
  .eye-catch-wrap,
  .eye-catch {
    max-width: 100%;
    width: 100%;
  }
  .eye-catch img,
  .eye-catch-wrap img { width: 100%; }
}


/* =====================================================================
   25. スマホ表示：本文幅の強制解除（セクション24の補強）
   ---------------------------------------------------------------------
   セクション24が効かない場合の対策です。
   Cocoon側が #main のようなID指定で幅や余白を決めていると、
   クラス指定（.main）では優先度が足りず上書きできません。
   ここでは body を頭に付けて優先度を上げ、!important で確定させます。
   PC表示（835px以上）には影響しません。
   ===================================================================== */
@media screen and (max-width: 834px) {

  /* 幅を決めていそうな入れ物をすべて画面幅いっぱいにする */
  body #content,
  body #content-in,
  body #container,
  body #main,
  body #main-content,
  body .main,
  body .main-in,
  body .content,
  body .content-in,
  body .wrap,
  body #content .wrap,
  body .article,
  body article.article,
  body .entry-content {
    box-sizing: border-box !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* 外側の入れ物は左右の余白をゼロに */
  body #content,
  body #content-in,
  body #container,
  body #main-content,
  body .content,
  body .content-in,
  body .wrap,
  body #content .wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 記事エリアだけ、読みやすさのため最小限の余白を残す */
  body #main,
  body .main {
    padding-left: var(--gc-main-pad) !important;
    padding-right: var(--gc-main-pad) !important;
  }

  /* 記事本体は余白を持たせない（.main の余白と二重になるため） */
  body .article,
  body article.article,
  body .entry-content,
  body .main-in {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* サイドバーも同様に */
  body #sidebar,
  body .sidebar {
    box-sizing: border-box !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding-left: var(--gc-main-pad) !important;
    padding-right: var(--gc-main-pad) !important;
    width: 100% !important;
  }
}