@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
*/

/* =========================================================
 * ゴルフランキングサイト カスタムデザイン
 * テーマ：ナチュラル / ゴルフ場グリーン
 * ========================================================= */

:root{
  --golf-green:        #2e7d32;
  --golf-green-dark:   #1b5e20;
  --golf-green-deep:   #14532d;
  --golf-accent:       #66bb6a;
  --golf-green-light:  #eef5ec;
  --golf-green-pale:   #f5faf4;
  --golf-text:         #333333;
  --golf-cta:          #bf0000;
  --golf-cta-dark:     #a00000;
}

/* ---------- ベース / タイポグラフィ ---------- */
body{
  color: var(--golf-text);
  background-color: #f7f9f6;
}
.article p,
.entry-content p{
  line-height: 1.9;
}
a{ color: var(--golf-green); }
a:hover{ color: var(--golf-green-dark); }

/* 記事カラム自体を白く浮かせて読みやすく */
#main .article{
  background:#fff;
}

/* ---------- 見出し（H2 / H3 / H4） ---------- */
.article h2,
.entry-content h2{
  position: relative;
  background: var(--golf-green-light);
  color: var(--golf-green-deep);
  border: none;
  border-left: 6px solid var(--golf-green);
  border-radius: 4px;
  padding: .6em .8em;
  margin: 2em 0 1em;
  font-weight: 700;
}
.article h3,
.entry-content h3{
  border: none;
  border-left: 5px solid var(--golf-accent);
  border-bottom: 1px dashed #cfe3cc;
  padding: .3em .7em;
  color: var(--golf-green-deep);
  font-weight: 700;
}
.article h4,
.entry-content h4{
  border-left: 4px solid #cfe3cc;
  padding-left: .6em;
  color: var(--golf-green-dark);
}

/* ---------- ヘッダー / ロゴ ---------- */
#header,
.header-container{
  background:#fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.site-name-text,
.site-name a{
  color: var(--golf-green-deep) !important;
  font-weight: 700;
}
.tagline,
.catch-phrase{ color:#6b8068; }

/* ---------- グローバルナビ（緑バー・回遊性） ---------- */
#navi,
.navi-in{
  background: linear-gradient(180deg, var(--golf-green) 0%, var(--golf-green-dark) 100%);
}
#navi .navi-in > ul > li > a,
.navi-in > ul > li > a{
  color:#fff;
  font-weight:600;
}
#navi .navi-in > ul > li > a:hover,
.navi-in > ul > li > a:hover{
  background: rgba(255,255,255,.18);
  color:#fff;
}
/* PCではナビを追従させて回遊しやすく */
@media screen and (min-width: 835px){
  #navi{ position: sticky; top: 0; z-index: 900; }
}

/* ---------- トップページ：県ボタン一覧 ---------- */
.region{
  margin: 0 0 26px;
  padding: 16px 18px;
  background: var(--golf-green-pale);
  border: 1px solid #e0ece0;
  border-radius: 10px;
}
.region h2{
  /* 記事H2より軽い、地方名見出し */
  background: transparent;
  border: none;
  border-left: 5px solid var(--golf-green);
  border-radius: 0;
  color: var(--golf-green-deep);
  margin: 0 0 12px;
  padding: .2em .6em;
  font-size: 1.15em;
}
.button-container{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gora-search-btn{
  background:#fff;
  color: var(--golf-green);
  border: 2px solid var(--golf-green);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1.2;
}
.gora-search-btn:hover{
  background: var(--golf-green);
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(46,125,50,.30);
}
.gora-search-btn:active{ transform: translateY(0); }

/* ---------- ランキングカード（ショートコード）との調和 ---------- */
.golf-course-card{
  border: 1px solid #dce8da !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(20,83,45,.08) !important;
}
.golf-course-card h3{
  border-left: 5px solid var(--golf-accent);
  background: var(--golf-green-light);
}

/* ---------- 予約CTAボタン ---------- */
.gora-cta-btn,
.wp-block-button__link{
  background: var(--golf-cta) !important;
  border-radius: 8px !important;
}
.gora-cta-btn:hover{ background: var(--golf-cta-dark) !important; }

/* ---------- フッター ---------- */
#footer,
.footer-in{
  background: var(--golf-green-deep);
  color:#dce8da;
}
#footer a,
.footer-in a{ color:#cfe3cc; }
.footer-bottom,
.copyright{
  background: var(--golf-green-deep);
  color:#bcd0b8;
}

/* ---------- 共通パーツの微調整 ---------- */
.widget-entry-cards.card-thumbnail-image,
.entry-card-wrap{ border-radius: 8px; }
.toc{ border-color:#dce8da; background:var(--golf-green-pale); }
.toc-title{ color: var(--golf-green-deep); }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
}

/*834px以下*/
@media screen and (max-width: 834px){
  .article h2,
  .entry-content h2{ font-size: 1.2em; }
  .region{ padding: 12px 12px; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .gora-search-btn{
    padding: 9px 11px;
    font-size: 13px;
  }
  .button-container{ gap: 6px; }
}