@charset "UTF-8";
/*
  Skin Name: Chobiganba
  Description: ちょびがんば オリジナルスキン
  Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ===========================
   CSS カスタムプロパティ
=========================== */
:root {
  --color-main:        #4A9FD4;
  --color-main-dark:   #2C7BB6;
  --color-accent:      #FF8C42;
  --color-accent-dark: #E07830;
  --color-bg:          #FAFAFA;
  --color-text:        #333333;
  --color-subtext:     #777777;
  --color-white:       #FFFFFF;
  --font-base:         'Noto Sans JP', sans-serif;
}

/* ===========================
   ベース
=========================== */
body {
  font-family: var(--font-base);
  font-size: 16px;
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ===========================
   ヘッダー
=========================== */
#header {
  background-color: var(--color-main);
}

.header-container,
.header-container-in {
  background-color: var(--color-main);
}

.site-name-text,
.tagline {
  display: none;
}

/* ===========================
   ナビゲーション
=========================== */
.navi {
  background-color: var(--color-main-dark);
}

.navi-in > ul > li > a {
  color: var(--color-white);
}

.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* ===========================
   見出し
=========================== */
.article h2,
.entry-content h2 {
  border-left: 4px solid var(--color-main);
  padding-left: 12px;
  color: var(--color-text);
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

.article h3,
.entry-content h3 {
  border-bottom: 2px solid var(--color-main);
  padding-bottom: 6px;
  color: var(--color-text);
  font-weight: 700;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
}

/* ===========================
   リンク
=========================== */
a {
  color: var(--color-main);
  text-decoration: none;
}

a:hover {
  color: var(--color-main-dark);
  text-decoration: underline;
}

/* ===========================
   ボタン・CTA
=========================== */
.btn,
.wp-block-button__link,
.more-link,
.post-list-link {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s;
}

.btn:hover,
.wp-block-button__link:hover,
.more-link:hover,
.post-list-link:hover {
  background-color: var(--color-accent-dark);
  color: var(--color-white);
  text-decoration: none;
}

/* ===========================
   プロフィール欄（サイドバー）
=========================== */
.author-box {
  border: 2px solid var(--color-main);
  border-radius: 8px;
  padding: 16px;
  background-color: var(--color-white);
}

.author-widget-image img {
  border-radius: 50%;
  border: 3px solid var(--color-accent);
}

.author-widget-name {
  color: var(--color-main-dark);
  font-weight: 700;
}

/* ===========================
   吹き出し（キャラクター）
=========================== */
.speech-wrap .speech-balloon {
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-text);
}

.speech-wrap.sbp-l .speech-balloon::before {
  content: '';
  border-right-color: var(--color-accent);
}

.speech-wrap.sbp-r .speech-balloon::before {
  content: '';
  border-left-color: var(--color-accent);
}

.speech-wrap .speech-person img {
  border-radius: 50%;
  border: 2px solid var(--color-accent);
}

/* ===========================
   フッター
=========================== */
#footer {
  background-color: var(--color-main-dark);
  color: var(--color-white);
}

#footer a {
  color: rgba(255, 255, 255, 0.85);
}

#footer a:hover {
  color: var(--color-white);
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85em;
}

/* ===========================
   レスポンシブ
=========================== */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  .article h2,
  .entry-content h2 {
    font-size: 1.2em;
    padding-left: 10px;
  }

  .article h3,
  .entry-content h3 {
    font-size: 1.1em;
  }

  .btn,
  .wp-block-button__link,
  .more-link,
  .post-list-link {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .speech-wrap .speech-balloon {
    font-size: 0.95em;
  }
}