@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%;
  }
}

/************************************
** 害獣駆除Lab. トップページ（固定ページ ID56 の本文 .gk-home の中だけに効く）
** 色：深緑 #064C3D／明るい緑 #81B837（装飾のみ）／アイボリー #F7F4EA（ロゴ・OGP素材に合わせる）
** 画像の差し込み口（任意。なくても崩れない）：
**   ・ヒーロー：.gk-home-hero の中、.gk-home-hero-body の後に
**     <figure class="gk-home-hero-media"><img src="…" alt="…" width="1280" height="720"></figure>
**     を入れると、文章の上に全幅で表示される（PC・スマホとも1列）
**   ・カード：<a> の先頭に <span class="gk-card-img"><img …></span> を入れると、16:9で上に表示
************************************/
.gk-home {
  --gk-brand-deep: #064C3D;
  --gk-brand-light: #81B837;
  --gk-brand-ivory: #F7F4EA;
}
.gk-home .gk-button {
  background-color: var(--gk-brand-deep);
}
.gk-home .gk-button:hover {
  background-color: #04382D;
}
.article .gk-home h2 {
  margin-top: 2.2em;
  background-color: transparent;
  color: var(--gk-brand-deep);
  border-left: 0;
  border-bottom: 2px solid var(--gk-line);
  padding: 0 0 0.4em 1.1em;
  position: relative;
}
.article .gk-home h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 0.45em;
  height: 1.1em;
  border-radius: 2px;
  background-color: var(--gk-brand-light);
}

/* ヒーロー */
.gk-home-hero {
  display: grid;
  gap: 1.2em;
  align-items: center;
  padding: 1.6em 1.4em;
  background-color: var(--gk-brand-ivory);
  border-radius: 8px;
  border-left: 6px solid var(--gk-brand-light);
}
.article .gk-home-hero p {
  margin: 0 0 0.9em;
}
.article .gk-home-hero .gk-home-hero-actions {
  margin: 1.2em 0 0;
}
.gk-home-hero-lead {
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.5;
  color: var(--gk-brand-deep);
}
.gk-home-hero-text {
  font-size: 0.95em;
}
.gk-home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1em;
  align-items: center;
}
.gk-home-hero-actions a {
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.gk-home-sub-button {
  padding: 0.6em 1.2em;
  border: 1px solid var(--gk-brand-deep);
  border-radius: 4px;
  background-color: #fff;
  color: var(--gk-brand-deep);
  font-weight: bold;
  text-decoration: none;
}
.gk-home-sub-button:hover {
  background-color: var(--gk-soft);
  color: var(--gk-brand-deep);
}
.gk-home-hero-media {
  margin: 0;
}
.gk-home-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* 画像は文章の上に全幅で表示（2列だと画像が小さくなるため、PC・スマホとも1列） */
.gk-home-hero-media {
  order: -1;
}

/* サイトの特徴（3点） */
.article ul.gk-home-points {
  list-style: none;
  padding: 0;
  margin: 1.2em 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8em;
}
.article .gk-home-points li {
  margin: 0;
  padding: 0.8em 1em;
  background-color: #fff;
  border: 1px solid var(--gk-line);
  border-radius: 6px;
}
.gk-home-point-title {
  display: block;
  font-weight: bold;
  color: var(--gk-brand-deep);
}
.gk-home-point-title::before {
  content: "✓";
  margin-right: 0.35em;
  color: var(--gk-brand-light);
}
.gk-home-point-text {
  display: block;
  margin-top: 0.2em;
  font-size: 0.85em;
  color: var(--gk-muted);
}

/* 調べる順番（3ステップ） */
.article ol.gk-home-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8em;
}
.article .gk-home-steps li {
  margin: 0;
}
.gk-home-steps a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 0.9em 1em;
  background-color: var(--gk-brand-ivory);
  border-radius: 6px;
  color: var(--gk-text);
  text-decoration: none;
}
.gk-home-steps a:hover {
  outline: 2px solid var(--gk-brand-light);
}
.gk-home-step-num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background-color: var(--gk-brand-deep);
  color: #fff;
  font-weight: bold;
  font-size: 0.9em;
}
.gk-home-step-title {
  display: block;
  margin-top: 0.4em;
  font-weight: bold;
  color: var(--gk-brand-deep);
}
.gk-home-step-text {
  display: block;
  font-size: 0.85em;
  color: var(--gk-muted);
}

/* カード（既存の .gk-cards／.gk-card を使い、トップでは色だけ合わせる） */
.article ul.gk-home-cards {
  padding: 0;
  margin: 0 0 1em;
}
.gk-home .gk-card a {
  border-top-color: var(--gk-brand-light);
}
.gk-home .gk-card a:hover {
  border-color: var(--gk-brand-deep);
}
.gk-home .gk-card-title {
  color: var(--gk-brand-deep);
}
.gk-home-cards-wide {
  grid-template-columns: 1fr;
}
.gk-home-cards-pest {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.gk-home-feature a {
  background-color: var(--gk-brand-ivory);
  border-left: 6px solid var(--gk-brand-deep);
  border-top-width: 1px;
}
.gk-home-label {
  display: inline-block;
  margin-bottom: 0.4em;
  padding: 0 0.5em;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 1.7;
  border-radius: 3px;
  background-color: var(--gk-brand-deep);
  color: #fff;
}
.gk-card-img {
  display: block;
  margin: -1em -1em 0.8em;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
  background-color: var(--gk-brand-ivory);
}
.gk-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article .gk-home-more {
  margin: 0 0 1em;
  text-align: right;
}
.gk-home-more a::after {
  content: " →";
}

/* このサイトについて */
.article ul.gk-home-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.2em;
}
.article .gk-home-links li {
  margin: 0;
}
.gk-home-links a {
  display: inline-block;
  padding: 0.4em 0;
  color: var(--gk-brand-deep);
}

@media screen and (max-width: 480px) {
  .gk-home-hero {
    padding: 1.2em 1em;
  }
  .gk-home-hero-lead {
    font-size: 1.15em;
  }
  .gk-home-br {
    display: none;
  }
  .gk-home-hero-actions a {
    width: 100%;
    justify-content: center;
  }
}