/* =========================================================
   TARNAR WHITE — Cocoon着せ替えCSS（記事・固定ページ用）
   既存のHTML構造・URL・本文には触れず、見た目だけを整える。
   Cocoonの「スキン」や「カスタマイザーの色設定」より優先させるため、
   一部に !important を使っています。
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho+B1:wght@500;600&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap");

:root {
  --bg: #FFFFFF;
  --bg-sub: #F7F6F3;
  --text: #1A1A1A;
  --text-sub: #6B6B6B;
  --line: #E5E3DE;
  --group-mark: #B5432A;
  --accent: #1E3A5F;
  --font-jp-serif: "Shippori Mincho B1", serif;
  --font-jp-sans: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-en-sans: "Inter", sans-serif;
  --font-heading: var(--font-jp-sans);
}

/* ---------- 全体 ---------- */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { opacity: .75; }

/* ---------- ヘッダー ---------- */
#header-container, .header-container {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}
#header, .header { background: transparent !important; }
#header .header-in { min-height: 0; padding: 20px 0; }
.logo-text .site-name-text, .site-name-text {
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  letter-spacing: 0.1em;
  color: var(--text) !important;
}
.tagline { color: var(--text-sub) !important; font-size: 12px !important; letter-spacing: .08em; }

/* グローバルメニュー */
#navi, .navi { background: var(--bg) !important; border-bottom: 1px solid var(--line); }
#navi .navi-in > ul > li > a,
.navi-in a {
  color: var(--text) !important;
  font-size: 14px !important;
  letter-spacing: 0.08em;
  background: transparent !important;
}
#navi .navi-in > ul > li > a:hover { color: var(--accent) !important; opacity: 1; }
#navi .sub-menu { background: var(--bg) !important; border: 1px solid var(--line); box-shadow: none !important; }
#navi .navi-in > ul > li.current-menu-item > a { color: var(--accent) !important; }

/* ---------- 本文エリア ---------- */
#content, .content { background: var(--bg) !important; }
#main, .main {
  background: var(--bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.article {
  font-size: 17px;
  line-height: 2.0;
}
.entry-title, .article h1 {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.04em;
  color: var(--text) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 8px 0 24px !important;
}
.article h2 {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.6;
  color: var(--text) !important;
  background: none !important;
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 16px !important;
  margin: 72px 0 24px !important;
}
.article h3 {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  color: var(--text) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 0 0 10px !important;
  margin: 48px 0 20px !important;
}
.article h4, .article h5, .article h6 {
  font-family: var(--font-heading) !important;
  color: var(--text) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.article p { margin-bottom: 1.6em; }
.article img { border-radius: 0; }
.date-tags, .post-date, .post-update { color: var(--text-sub) !important; font-family: var(--font-en-sans); font-size: 12px; }
.eye-catch { margin-bottom: 40px; }

/* 目次 */
.toc {
  background: var(--bg-sub) !important;
  border: 0 !important;
  padding: 28px 32px !important;
  font-size: 15px;
}
.toc-title {
  font-family: var(--font-en-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.2em;
  color: var(--accent) !important;
}
.toc-content a { color: var(--text) !important; text-decoration: none; }
.toc-content a:hover { color: var(--accent) !important; }

/* 引用・ボックス */
.article blockquote {
  background: var(--bg-sub) !important;
  border: 0 !important;
  border-left: 2px solid var(--accent) !important;
  color: var(--text) !important;
}
.article blockquote::before, .article blockquote::after { display: none !important; }

/* ブログカード（記事リンク） */
.blogcard {
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg) !important;
}
.blogcard-title { color: var(--text) !important; font-weight: 500 !important; }
.blogcard-snippet { color: var(--text-sub) !important; }

/* ボタン */
.btn, .btn-wrap > a, .ranking-item-link-buttons a, .wp-block-button__link {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* SNSシェア・フォローボタン：色を抑えて白基調に揃える */
.sns-share .sns-buttons a, .sns-follow .sns-buttons a {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sns-share .sns-buttons a:hover, .sns-follow .sns-buttons a:hover { border-color: var(--accent) !important; color: var(--accent) !important; opacity: 1; }
.sns-share-message, .sns-follow-message { font-family: var(--font-en-sans); font-size: 12px !important; letter-spacing: .2em; color: var(--text-sub) !important; }

/* 表 */
.article table { border-collapse: collapse; }
.article th, .article td { border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 14px 12px !important; }
.article th { background: var(--bg-sub) !important; color: var(--text) !important; font-weight: 500; }

/* 記事一覧カード */
.entry-card-wrap, .related-entry-card-wrap {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.entry-card-title, .related-entry-card-title { color: var(--text) !important; font-weight: 500 !important; }
.entry-card-snippet { color: var(--text-sub) !important; }
.cat-label {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 0 !important;
  font-family: var(--font-en-sans);
  font-size: 10px !important;
}

/* パンくず */
.breadcrumb { font-size: 12px; color: var(--text-sub) !important; }
.breadcrumb a { color: var(--text-sub) !important; }

/* ---------- サイドバー ---------- */
#sidebar, .sidebar { background: var(--bg) !important; border: 0 !important; box-shadow: none !important; }
.sidebar h2, .sidebar h3, .widget-title {
  font-family: var(--font-en-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  color: var(--accent) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 0 0 10px !important;
}
.sidebar a { color: var(--text) !important; }

/* ---------- フッター ---------- */
#footer, .footer {
  background: var(--bg-sub) !important;
  color: var(--text-sub) !important;
  border-top: 1px solid var(--line);
}
#footer a, .footer a { color: var(--text) !important; }
.footer-bottom { border: 0 !important; }
#go-to-top .go-to-top-button {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- TARNAR GROUP 帯（全ページ共通） ---------- */
.tarnar-group-band {
  background: var(--bg-sub);
  border-top: 1px solid var(--line);
  padding: 32px 0 40px;
  font-family: var(--font-body);
}
.tarnar-group-band .container {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.tarnar-group-band .group-band__head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-family: var(--font-en-sans); font-size: 11px; letter-spacing: .24em; color: var(--text);
}
.tarnar-group-band .group-band__head::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--group-mark);
}
.tarnar-group-band .group-band__list {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  list-style: none; margin: 0; padding: 0; font-size: 12px;
}
.tarnar-group-band .group-band__list a { color: var(--text-sub) !important; text-decoration: none; }
.tarnar-group-band .group-band__list a:hover { color: var(--text) !important; }
.tarnar-group-band .copyright {
  margin: 24px 0 0; font-family: var(--font-en-sans); font-size: 11px; letter-spacing: .1em; color: var(--text-sub);
}
/* ---------- ATOスクールの旧子テーマから移植 ---------- */
/* 30周年ページ（ID 11691）はヘッダー・フッターを出さないランディングページ */
.page-id-11691 .header-container,
.page-id-11691 .breadcrumb,
.page-id-11691 .mobile-footer-menu-buttons,
.page-id-11691 footer { display: none; }
.page-id-11691 .content { margin-top: -20px; }
.page-id-11691 h1.entry-title { text-align: center; margin-top: 30px; }
.page-id-11691 main { margin-bottom: -80px !important; }
/* トップページのお知らせ一覧 */
p.news, p.news a { text-decoration: none; margin-bottom: 0; }
@media screen and (max-width: 834px) { p.news a { display: block; } }
@media screen and (max-width: 480px) {
  .mobile-header-menu-buttons .mobile-menu-buttons .menu-caption { font-size: 14px; }
}

@media (max-width: 640px) {
  .tarnar-group-band .group-band__list { display: grid; grid-template-columns: 1fr 1fr; }
  .entry-title, .article h1 { font-size: 23px !important; }
  .article { font-size: 16px; }
  .article h2 { font-size: 20px !important; margin-top: 56px !important; }
}