/* ==========================================================
   和モダン カスタムCSS for Cocoon(八洲庵風)
   基調: 白 × やわらかいグレー × 藤紫
   ========================================================== */

:root {
  --wa-bg:        #f9f5e8;                    /* 純白 */
  --wa-text:      #666666;                    /* やわらかいグレー */
  --wa-text-dark: #444444;                    /* 少し濃いグレー */
  --wa-fuji-deep: #493d7a;                    /* 深い藤紫(見出し・強調) */
  --wa-fuji:      #a78ec2;                    /* 藤色(フッター・帯) */
  --wa-fuji-wash: rgba(161, 114, 173, 0.15);  /* 薄紫のウォッシュ */
  --wa-line:      #e3e0e9;                    /* 罫線 */
  --wa-serif: "Times New Roman", "游明朝", "Yu Mincho", YuMincho,
              "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

/* --- 全体 --- */
body {
  background-color: var(--wa-bg);
  color: var(--wa-text);
  font-family: var(--wa-serif);
  letter-spacing: 0.08em;
  line-height: 2.0;
}
#container, .main, .sidebar {
  background-color: transparent;
}
.article, .main {
  box-shadow: none;
  color: var(--wa-text);
}

/* --- ヘッダー --- */
.header, .header-container {
  background-color: var(--wa-bg);
  border-bottom: 1px solid var(--wa-line);
}
.site-name-text {
  font-family: var(--wa-serif);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--wa-text-dark);
}
.tagline {
  color: var(--wa-text);
  letter-spacing: 0.15em;
  font-size: 12px;
}

/* --- グローバルナビ --- */
.navi, .navi-in {
  background-color: transparent;
}
.navi-in > ul li { border: none; }
.navi-in > ul > li > a {
  color: var(--wa-text);
  font-family: var(--wa-serif);
  font-size: 15px;
  letter-spacing: 0.15em;
  position: relative;
  transition: color .3s;
}
.navi-in > ul > li > a:hover {
  background: none;
  color: var(--wa-fuji-deep);
}
.navi-in > ul > li > a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 8px;
  width: 0; height: 1px;
  background: var(--wa-fuji-deep);
  transition: width .3s ease, left .3s ease;
}
.navi-in > ul > li > a:hover::after {
  left: 15%;
  width: 70%;
}

/* --- 見出し --- */
/* h2: 装飾を消し、藤紫の文字色+中央寄せで上品に */
.article h2 {
  background: none;
  border: none;
  padding: 0.6em 0;
  text-align: center;
  color: var(--wa-fuji-deep);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.2em;
  position: relative;
}
/* 見出し下に短い藤色の線 */
.article h2::after {
  content: '';
  display: block;
  width: 2.5em; height: 1px;
  background: var(--wa-fuji);
  margin: 0.6em auto 0;
}
.article h3 {
  border: none;
  border-bottom: 1px solid var(--wa-line);
  padding: 0.3em 0.2em;
  color: var(--wa-text-dark);
  font-weight: 500;
  letter-spacing: 0.15em;
}
.article h4 {
  border: none;
  padding: 0.2em 0;
  color: var(--wa-fuji-deep);
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* --- 本文リンク --- */
.article a:not(.entry-card-wrap):not(.btn) {
  color: var(--wa-fuji-deep);
  text-decoration: underline;
  text-decoration-color: var(--wa-line);
  text-underline-offset: 4px;
  transition: text-decoration-color .3s;
}
.article a:not(.entry-card-wrap):not(.btn):hover {
  text-decoration-color: var(--wa-fuji-deep);
}

/* --- 記事カード(一覧・関連記事) --- */
.entry-card-wrap, .related-entry-card-wrap {
  background: var(--wa-bg);
  border: 1px solid var(--wa-line);
  box-shadow: none;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.entry-card-wrap:hover, .related-entry-card-wrap:hover {
  border-color: var(--wa-fuji);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(73, 61, 122, 0.08);
}
.entry-card-title, .related-entry-card-title {
  font-family: var(--wa-serif);
  font-weight: 500;
  color: var(--wa-text-dark);
  letter-spacing: 0.06em;
}
.entry-card-snippet { color: var(--wa-text); }

/* --- サイドバー --- */
.sidebar h3 {
  background: var(--wa-fuji-wash);   /* 薄紫のウォッシュ */
  border: none;
  padding: 0.5em 0.8em;
  font-family: var(--wa-serif);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--wa-fuji-deep);
}
.sidebar a {
  color: var(--wa-text);
  transition: color .3s;
}
.sidebar a:hover { color: var(--wa-fuji-deep); }

/* --- ボタン(八洲庵風: 白地+黒細枠+角なし) --- */
.btn, input[type="submit"], button[type="submit"],
.wp-block-button__link {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #000;
  border-radius: 0;
  color: #000;
  font-family: var(--wa-serif);
  font-size: 14px;
  letter-spacing: 0.15em;
  padding: 0.8em 2.5em;
  box-shadow: none;
  transition: background .3s, color .3s, border-color .3s;
}
.btn:hover, input[type="submit"]:hover, button[type="submit"]:hover,
.wp-block-button__link:hover {
  background: var(--wa-fuji-deep);
  border-color: var(--wa-fuji-deep);
  color: #fff;
  box-shadow: none;
}

/* --- 引用 --- */
.article blockquote {
  background: var(--wa-fuji-wash);
  border: none;
  border-left: 2px solid var(--wa-fuji);
  color: var(--wa-text);
  padding: 1em 1.4em;
  font-style: normal;
}

/* --- テーブル --- */
.article table {
  border: none;
  border-top: 1px solid var(--wa-fuji);
  border-bottom: 1px solid var(--wa-fuji);
}
.article th {
  background: var(--wa-fuji-wash);
  border: none;
  border-bottom: 1px solid var(--wa-line);
  color: var(--wa-text-dark);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.article td {
  border: none;
  border-bottom: 1px solid var(--wa-line);
}

/* --- ページネーション --- */
.pagination .current,
.pagination a:hover {
  background: var(--wa-fuji-deep);
  color: #fff;
  border-radius: 0;
}
.pagination a {
  border-radius: 0;
  border: 1px solid var(--wa-line);
  background: transparent;
  color: var(--wa-text);
}

/* --- フッター(藤色の帯) --- */
.footer {
  background-color: var(--wa-fuji);
  color: #fff;
}
.footer a { color: #fff; }
.footer a:hover { text-decoration: underline; }
.copyright {
  letter-spacing: 0.12em;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

/* --- トップへ戻るボタン --- */
.go-to-top-button {
  background: var(--wa-fuji-deep);
  border-radius: 0;
  opacity: 0.85;
}

/* --- モバイルメニュー --- */
.mobile-menu-buttons {
  background: var(--wa-bg);
  border-top: 1px solid var(--wa-line);
}
.menu-drawer {
  background: var(--wa-bg);
  font-family: var(--wa-serif);
}
/* --- フォーム --- */
input[type="text"], input[type="search"], input[type="email"], textarea {
  background: #fff;
  border: 1px solid var(--wa-line);
  border-radius: 0;
}
input:focus, textarea:focus {
  border-color: var(--wa-fuji);
  outline: none;
}
/* --- スキン(シンプルグリーン)のナビ色を上書き: 藤色バージョン --- */
.header-container .navi {
  background: var(--wa-fuji);   /* 藤色 #a78ec2 */
  border-top: none;
}
#navi .navi-in a {
  color: #ffffff;
}
#navi .navi-in a:hover {
  background: none;
  color: #ffffff;
  opacity: 0.75;
}
/* ホバー時の下線(白)— 前回の設定を藤色地用に上書き */
.navi-in > ul > li > a::after {
  background: #ffffff;
}
/* ドロップダウン(サブメニュー) */
#navi .navi-in > .menu-header .sub-menu {
  background: var(--wa-fuji);
  border: none;
}
#navi .navi-in > .menu-header .sub-menu a {
  color: #ffffff;
}
#navi .navi-in > .menu-header .sub-menu a:hover {
  background: var(--wa-fuji-deep);   /* 濃い藤紫 */
  color: #ffffff;
}