/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応 - cafekumapapa風プロデザイン
Version: 20260413c
*/

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

/* ============================================
   デザイン変数
   ============================================ */
:root {
  --green:       #00b900;
  --green-dk:    #009900;
  --green-bg:    #e8f9e8;
  --green-pale:  #f2fbf2;
  --navy:        #1e2a3a;
  --text:        #333333;
  --muted:       #777777;
  --bg:          #f2f2f2;
  --white:       #ffffff;
  --border:      #e0e0e0;
  --shadow-s:    0 2px 8px rgba(0,0,0,.08);
  --shadow-m:    0 6px 20px rgba(0,0,0,.10);
  --r-s:         6px;
  --r-m:         12px;
  --r-pill:      9999px;
  --ease:        all .22s ease;
}

/* ============================================
   ベース
   ============================================ */
body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-dk); transition: var(--ease); }
a:hover { color: var(--green); text-decoration: none; }

/* ============================================
   ヘッダーバー（#headbox-bg のみ対象）
   ※ #header-full はコンテンツも含むので触らない
   ============================================ */
#headbox-bg {
  background-color: var(--white);
  border-bottom: 3px solid var(--green);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ロゴ */
#st-text-logo a {
  color: var(--navy) !important;
  font-weight: 900;
}

/* PCナビ */
#header-r ul.menu > li > a {
  color: var(--navy);
  font-weight: 600;
  font-size: .9rem;
}
#header-r ul.menu > li > a:hover {
  color: var(--green);
}

/* ============================================
   body背景
   ============================================ */
#wrapper { background-color: var(--bg); }

/* ============================================
   記事一覧カード（ホーム）
   ============================================ */
main .kanren dt img {
  border-radius: var(--r-s);
}
main .kanren {
  background: var(--white);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  border: 1px solid var(--border);
  transition: var(--ease);
  overflow: hidden;
  margin-bottom: 1.2rem;
}
main .kanren:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
}

/* ============================================
   見出し H2
   ※ AFFINGERがmain .post h2に独自スタイルを当てるため
     !importantで確実に上書き
   ============================================ */
main .post h2:not(.st-css-no):not(.wp-block-heading),
main .entry-content h2 {
  color: var(--navy) !important;
  background: linear-gradient(90deg, var(--green-bg) 0%, #f6fff6 100%) !important;
  border-left: 6px solid var(--green) !important;
  border-bottom: 1px solid #c8eac8 !important;
  border-top: none !important;
  border-right: none !important;
  padding: .7rem 1.1rem !important;
  border-radius: 0 var(--r-s) var(--r-s) 0 !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

/* ============================================
   見出し H3
   ============================================ */
main .post h3:not(.st-css-no):not(.wp-block-heading),
main .entry-content h3 {
  color: var(--navy) !important;
  background: transparent !important;
  border-left: 4px solid var(--green) !important;
  border-bottom: 1px dashed var(--border) !important;
  border-top: none !important;
  border-right: none !important;
  padding: .45rem .9rem !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* ============================================
   見出し H4
   ============================================ */
main .post h4:not(.st-css-no),
main .entry-content h4 {
  color: var(--navy) !important;
  border-left: 3px solid #f5d000 !important;
  padding-left: .7rem !important;
  background: none !important;
  box-shadow: none !important;
}

/* ============================================
   本文テキスト・strong
   ============================================ */
.entry-content p { line-height: 1.95; color: var(--text); }

.entry-content strong {
  font-weight: 700;
  background: linear-gradient(transparent 60%, #ffe066 60%);
  padding: 0 .1em;
}

/* リストマーカー色 */
.entry-content ul > li::marker { color: var(--green); }
.entry-content ol > li::marker { color: var(--green-dk); font-weight: 700; }

/* ============================================
   コードブロック
   ============================================ */
.entry-content pre {
  background: #1e2a3a !important;
  color: #d4e6f1 !important;
  border-left: 4px solid var(--green) !important;
  border-radius: var(--r-m) !important;
  padding: 1.3rem 1.5rem !important;
  font-size: .875rem !important;
  line-height: 1.75 !important;
  overflow-x: auto;
}
.entry-content code {
  background: var(--green-bg);
  color: var(--green-dk);
  padding: .1em .4em;
  border-radius: 4px;
  border: 1px solid #b8e0b8;
  font-size: .875em;
}
.entry-content pre code {
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  border: none !important;
}

/* ============================================
   テーブル
   ============================================ */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  font-size: .93rem;
  margin: 1.4rem 0;
}
.entry-content table thead tr { background: var(--navy); }
.entry-content table th {
  color: #fff;
  padding: .8rem 1rem;
  font-weight: 700;
  font-size: .88rem;
  text-align: left;
}
.entry-content table td {
  padding: .72rem 1rem;
  border-bottom: 1px solid var(--border);
}
.entry-content table tbody tr:nth-child(even) { background: #f9f9f9; }
.entry-content table tbody tr:hover { background: var(--green-pale); }

/* ============================================
   記事内カスタムボックス
   ============================================ */

/* 目次 */
.article-toc {
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--r-m);
  padding: 1.3rem 1.6rem;
  margin: 1.8rem 0;
  box-shadow: var(--shadow-s);
}
.article-toc .toc-title {
  font-weight: 900;
  color: var(--navy);
  margin-bottom: .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.article-toc .toc-title::before { content: '📋 '; }
.article-toc ol { margin: 0; padding-left: 1.2rem; }
.article-toc li { font-size: .93rem; margin-bottom: .3rem; }
.article-toc a { color: var(--navy); font-weight: 500; }
.article-toc a:hover { color: var(--green); }

/* フローボックス */
.flow-box {
  background: #fff9c4;
  border-left: 5px solid #f5d000;
  border-radius: var(--r-s);
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
  line-height: 2;
  color: #5a4800;
}

/* 情報ボックス */
.info-box {
  background: #eaf4fb;
  border-left: 5px solid #3498db;
  border-radius: var(--r-s);
  padding: 1rem 1.3rem;
  margin: 1.3rem 0;
}
.info-box p { margin-bottom: 0; }

/* メリットボックス */
.merit-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: var(--r-m);
  padding: 1.2rem 1.3rem;
  margin: 1.1rem 0;
  box-shadow: var(--shadow-s);
  transition: var(--ease);
}
.merit-box:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.merit-box h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 0 .4rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.merit-box p { font-size: .95rem; margin-bottom: 0; }

/* FAQボックス */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  margin: 1.1rem 0;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
.faq-q {
  background: var(--green-bg) !important;
  color: var(--navy) !important;
  font-weight: 700;
  padding: .8rem 1.1rem !important;
  margin: 0 !important;
  border-bottom: 1px solid #c8e8c8;
}
.faq-q::before {
  content: 'Q ';
  background: var(--green);
  color: #fff;
  font-weight: 900;
  font-size: .78rem;
  padding: .1em .45em;
  border-radius: var(--r-pill);
  margin-right: .4em;
}
.faq-a {
  background: var(--white);
  padding: .8rem 1.1rem !important;
  margin: 0 !important;
  font-size: .95rem;
}
.faq-a::before {
  content: 'A ';
  background: #e0e0e0;
  color: #555;
  font-weight: 900;
  font-size: .78rem;
  padding: .1em .45em;
  border-radius: var(--r-pill);
  margin-right: .4em;
}

/* CTAボックス */
.cta-box {
  background: linear-gradient(135deg, var(--navy) 0%, #2d3e50 100%);
  border-radius: var(--r-m);
  padding: 1.8rem 1.8rem;
  margin: 2.2rem 0;
  text-align: center;
  box-shadow: var(--shadow-m);
}
.cta-box p {
  color: rgba(255,255,255,.9) !important;
  margin-bottom: .7rem;
}
.cta-box a {
  display: inline-block;
  background: var(--green) !important;
  color: #fff !important;
  font-weight: 900;
  font-size: 1rem;
  padding: .8rem 2rem;
  border-radius: var(--r-pill);
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0,185,0,.35);
  transition: var(--ease);
}
.cta-box a:hover {
  background: var(--green-dk) !important;
  transform: translateY(-2px);
}

/* .simple-table（記事内テーブル） */
.simple-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  font-size: .93rem;
  margin: 1.4rem 0;
}
.simple-table thead tr { background: var(--navy); }
.simple-table th { color: #fff; padding: .8rem 1rem; font-weight: 700; font-size: .88rem; text-align: left; }
.simple-table td { padding: .72rem 1rem; border-bottom: 1px solid var(--border); }
.simple-table tbody tr:nth-child(even) { background: #f9f9f9; }
.simple-table tbody tr:hover { background: var(--green-pale); }

/* ============================================
   サイドバー（#side）
   ============================================ */
#side .widget_wrap {
  background: var(--white);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  border: 1px solid var(--border);
  margin-bottom: 1.3rem;
  overflow: hidden;
}
#side .widgettitle {
  font-size: .96rem;
  font-weight: 700;
  color: var(--navy);
  padding-bottom: .5rem;
  margin-bottom: .8rem;
  border-bottom: 2px solid var(--green);
}
#side ul li a {
  color: var(--text);
  font-size: .9rem;
  display: block;
  padding: .28rem 0;
  border-bottom: 1px dashed var(--border);
  transition: var(--ease);
}
#side ul li a:hover {
  color: var(--green);
  padding-left: 5px;
}

/* ============================================
   フッター
   ============================================ */
#footer-wrapper {
  background-color: var(--navy) !important;
  color: rgba(255,255,255,.7);
}
#footer-in { border-top: 1px solid rgba(255,255,255,.1); }
#footer-in a { color: rgba(255,255,255,.55); }
#footer-in a:hover { color: var(--green); }

/* ============================================
   カテゴリーラベル
   ============================================ */
.cat-label,
.cat-label a {
  background-color: var(--green) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !important;
}

/* ============================================
   スマートフォン（599px以下）
   ============================================ */
@media screen and (max-width: 599px) {
  .entry-content pre {
    font-size: .8rem !important;
    padding: 1rem !important;
  }
  .simple-table,
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .83rem;
  }
  .cta-box { padding: 1.3rem 1rem; }
  .cta-box a { padding: .75rem 1.4rem; font-size: .93rem; }
}