@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** 害獣駆除Lab.（PHASE 3-B で追記）
** 色：メイン #2F6B4F／アクセント #8BC34A（装飾のみ。文字色・白文字の背景には使わない）
**     背景 #F7FAF8／本文 #333333
** Cocoon のキーカラー（#2F6B4F）はヘッダー・フッターの背景にも使われるため、
** 濃い緑のロゴが見えるよう、ヘッダーとフッターは明るい背景に戻す。
************************************/
:root {
  --gk-main: #2F6B4F;
  --gk-accent: #8BC34A;
  --gk-bg: #F7FAF8;
  --gk-text: #333333;
  --gk-muted: #666666;
  --gk-line: #DCE6E0;
  --gk-soft: #EEF4F0;
}

body.body {
  background-color: var(--gk-bg);
  color: var(--gk-text);
}

/* ヘッダー・グローバルナビ：明るい背景＋メイン色の文字 */
body #header-container,
body #header-container .navi,
body #navi .navi-in > .menu-header .sub-menu {
  background-color: #fff;
}
body #header-container {
  border-bottom: 3px solid var(--gk-accent);
}
body #header-container .navi a,
body #header-container .navi .item-label,
body #header-container .site-name-text,
body #header-container .tagline {
  color: var(--gk-main);
}
body #navi .navi-in a:hover {
  background-color: var(--gk-soft);
}
.logo-header img {
  max-height: 60px;
  width: auto;
}

/* フッター：明るい背景（濃い背景ではロゴが見えないため） */
body #footer {
  background-color: #fff;
  border-top: 1px solid var(--gk-line);
  color: var(--gk-text);
}
body #footer a:not(.sns-button) {
  color: var(--gk-main);
}
body #footer a:not(.sns-button):hover {
  background-color: var(--gk-soft);
}
.footer-bottom-logo img {
  max-width: 240px;
  height: auto;
}

/* 見出し：塗りつぶしの帯をやめ、左線と淡い背景に */
.article h2 {
  background-color: var(--gk-soft);
  color: var(--gk-main);
  border-left: 5px solid var(--gk-main);
  padding: 0.6em 0.8em;
}

/* 共通の表 */
.gk-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.4em;
}
.gk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.6;
}
.article .gk-table th,
.article .gk-table td {
  border: 1px solid var(--gk-line);
  padding: 0.6em 0.7em;
  vertical-align: top;
  background-color: #fff;
}
.article .gk-table thead th,
.article .gk-info th {
  background-color: var(--gk-soft);
  color: var(--gk-main);
  font-weight: bold;
  text-align: left;
}
.article .gk-info th {
  width: 30%;
}
.article .gk-table tr.gk-current td {
  background-color: #F4F9EC;
}
.gk-table-notes,
.gk-table-note {
  font-size: 0.85em;
  color: var(--gk-muted);
}
.gk-sep {
  border: 0;
  border-top: 1px dashed var(--gk-line);
  margin: 0.5em 0;
}
.gk-mini {
  margin: 0;
  font-size: 0.95em;
}
.gk-mini dt {
  font-weight: bold;
  color: var(--gk-main);
}
.gk-mini dd {
  margin: 0 0 0.3em;
}

/* 事実・出典の表示 */
.gk-unknown {
  color: var(--gk-muted);
}
.gk-fact-note,
.gk-sub-label {
  color: var(--gk-muted);
  font-size: 0.9em;
}
.gk-badge {
  display: inline-block;
  padding: 0 0.4em;
  font-size: 0.75em;
  line-height: 1.6;
  border: 1px solid var(--gk-line);
  border-radius: 3px;
  color: var(--gk-muted);
}
.gk-ref {
  font-size: 0.75em;
}
.gk-sources {
  font-size: 0.85em;
}
.gk-src-meta {
  color: var(--gk-muted);
}
.gk-verified {
  font-size: 0.85em;
  color: var(--gk-muted);
}

/* 広告の表示（目立たせすぎず、隠さない） */
.gk-ad-label {
  display: inline-block;
  padding: 0 0.4em;
  font-size: 0.75em;
  line-height: 1.6;
  border: 1px solid currentColor;
  border-radius: 3px;
  vertical-align: middle;
}
.gk-disclosure,
.gk-partner-note,
.gk-footer-disclosure {
  font-size: 0.85em;
  color: var(--gk-muted);
}
.gk-footer-disclosure {
  text-align: center;
  margin: 0.5em 0 0;
}

/* ボタン・リンク */
.gk-button,
.gk-cta {
  display: inline-block;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 4px;
  background-color: var(--gk-main);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}
.gk-button:hover,
.gk-cta:hover {
  background-color: #24543E;
  color: #fff;
}
.gk-cta-box {
  margin: 1.5em 0;
  text-align: center;
}
.gk-next {
  margin: 0.8em 0;
}
.gk-link-list li {
  margin-bottom: 0.3em;
}

/* 絞り込みフォーム */
.gk-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.2em;
  align-items: center;
  padding: 1em;
  margin-bottom: 1.4em;
  background-color: #fff;
  border: 1px solid var(--gk-line);
  border-radius: 4px;
}
.gk-filter-form select {
  max-width: 100%;
}
.gk-filter-inline {
  border-left: 4px solid var(--gk-accent);
}
.gk-notice {
  padding: 0.6em 0.8em;
  background-color: var(--gk-soft);
  border-left: 4px solid var(--gk-accent);
}

/* よくある質問 */
.gk-faq dt {
  font-weight: bold;
  color: var(--gk-main);
  margin-top: 1em;
}
.gk-faq dd {
  margin: 0.3em 0 0;
}

/* 害獣一覧のカード（枠は細い線だけ） */
.gk-cards {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1em;
}
.article .gk-cards li {
  margin: 0;
}
.gk-card a {
  display: block;
  height: 100%;
  padding: 1em;
  background-color: #fff;
  border: 1px solid var(--gk-line);
  border-top: 3px solid var(--gk-accent);
  border-radius: 4px;
  color: var(--gk-text);
  text-decoration: none;
}
.gk-card a:hover {
  border-color: var(--gk-main);
}
.gk-card-title {
  display: block;
  font-weight: bold;
  color: var(--gk-main);
}
.gk-card-sub,
.gk-card-text {
  display: block;
  font-size: 0.85em;
  color: var(--gk-muted);
  margin-top: 0.3em;
}

/* 834px以下：比較表をカード型に */
@media screen and (max-width: 834px) {
  .gk-compare thead {
    display: none;
  }
  .gk-compare,
  .gk-compare tbody,
  .gk-compare tr,
  .gk-compare td {
    display: block;
    width: 100%;
  }
  .gk-compare tr {
    margin-bottom: 1em;
    border: 1px solid var(--gk-line);
    border-top: 3px solid var(--gk-main);
  }
  .article .gk-compare td {
    border: 0;
    border-bottom: 1px solid var(--gk-line);
  }
  .gk-compare td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--gk-main);
  }
  .gk-table-wrap {
    overflow-x: visible;
  }
  .article .gk-info th {
    width: 36%;
  }
}