/*
Theme Name: Cocoon Child (asioto)
Theme URI: https://asioto.com/
Description: asioto.com用 Cocoon子テーマ。asioto.jpのブランドカラー・フォントを継承。
Author: asioto
Template: cocoon-master
Version: 1.0.0
*/

/* ============================================
   asioto.com — ブランドカラー
   Palette:
     bg        #FFFFFF / alt #F8FBFD
     text      #3E5C70 / sub #8FA9BB
     blue      #6EC2EE / deep #4FA8D8
     green     #A6D46B / deep #7CB342
     yellow    #F6C26B / deep #F0A73A
     pink      #F48FB1 / soft #FBD3E0
   ============================================ */

:root {
  --asioto-bg: #FFFFFF;
  --asioto-bg-alt: #F8FBFD;
  --asioto-text: #3E5C70;
  --asioto-text-sub: #8FA9BB;
  --asioto-blue: #6EC2EE;
  --asioto-blue-deep: #4FA8D8;
  --asioto-green: #A6D46B;
  --asioto-green-deep: #7CB342;
  --asioto-yellow: #F6C26B;
  --asioto-yellow-deep: #F0A73A;
  --asioto-pink: #F48FB1;
  --asioto-pink-soft: #FBD3E0;
}

body {
  font-family: "meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
  background-color: var(--asioto-bg);
  color: var(--asioto-text);
}

/* ---- ヘッダー / フッター ---- */
#header-container,
#logo,
.footer-widget-area {
  background-color: var(--asioto-bg);
}

#site-header .site-name a,
#site-header .site-description {
  color: var(--asioto-text);
}

/* ---- リンク ---- */
a {
  color: var(--asioto-blue-deep);
}

a:hover {
  color: var(--asioto-blue);
}

/* ---- 見出し（記事内） ---- */
.entry-content h2 {
  color: var(--asioto-text);
  background: var(--asioto-bg-alt);
  border-left: 6px solid var(--asioto-blue);
  border-bottom: none;
  padding: 10px 14px;
}

.entry-content h3 {
  color: var(--asioto-text);
  border-bottom: 3px solid var(--asioto-green);
  padding-bottom: 6px;
}

.entry-content h4 {
  color: var(--asioto-text);
  border-left: 4px solid var(--asioto-yellow-deep);
  padding-left: 10px;
}

/* ---- 引用 ---- */
.entry-content blockquote {
  background: var(--asioto-bg-alt);
  border-left: 5px solid var(--asioto-pink);
  color: var(--asioto-text);
}

/* ---- ボタン ---- */
.entry-content .btn,
.wp-block-button__link {
  background: var(--asioto-blue-deep);
  border-color: var(--asioto-blue-deep);
  color: #fff;
  border-radius: 24px;
}

.entry-content .btn:hover,
.wp-block-button__link:hover {
  background: var(--asioto-blue);
  border-color: var(--asioto-blue);
}

/* ---- タグ / カテゴリラベル ---- */
.entry-tags a,
.cat-label {
  background: var(--asioto-pink-soft);
  color: var(--asioto-text);
  border: none;
}

/* ---- サイドバーウィジェットタイトル ---- */
.widget-title {
  border-left: 6px solid var(--asioto-green-deep);
  color: var(--asioto-text);
}