/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Description: Cocoonの子テーマ — Pitchside公式サイト用カスタムスタイル
Author: YK
Template: cocoon-master
Version: 1.0.0
*/

/* ============================================================
   Pitchside ブランドカラー変数（スキームB スカーレット）
   ============================================================ */
:root {
  --ps-primary:      #E8001D;  /* メイン赤：CTAボタン・強調 */
  --ps-primary-dark: #C0001A;  /* ホバー時の赤 */
  --ps-gold:         #F0B429;  /* Proプランアクセント・ラベル */
  --ps-navy:         #003087;  /* ナビ・フッター・CTAバナー背景 */
  --ps-text:         #222222;  /* 本文テキスト */
  --ps-text-muted:   #848484;  /* 補足テキスト */
  --ps-bg:           #FFFFFF;  /* ページ背景 */
  --ps-surface:      #F5F5F5;  /* セクション・カード背景 */
  --ps-border:       #D0D0D0;  /* 区切り線・枠線 */
}


/* ============================================================
   Google Fonts — Noto Sans JP + Montserrat
   ※ functions.phpでenqueueしているのでここでは不要
   ============================================================ */


/* ============================================================
   基本タイポグラフィ
   ============================================================ */
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ps-text);
  background-color: var(--ps-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: var(--ps-text);
}

/* 英数字・数字強調（Montserrat） */
.ps-montserrat,
.ps-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
}


/* ============================================================
   ヘッダー
   ============================================================ */
#header {
  background-color: var(--ps-bg);
}

/* サイトタイトル */
#site-name a {
  color: var(--ps-navy) !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
}


/* ============================================================
   ナビゲーション
   ============================================================ */
#navi .navi-in > ul > li > a {
  color: var(--ps-navy);
  font-weight: 700;
}

#navi .navi-in > ul > li > a:hover {
  color: var(--ps-primary);
  border-bottom: 2px solid var(--ps-primary);
}

/* ============================================================
   ボタン（WPブロック + カスタム）
   ============================================================ */
/* プライマリCTAボタン */
.wp-block-button__link,
.ps-btn-primary {
  background-color: var(--ps-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
.ps-btn-primary:hover {
  background-color: var(--ps-primary-dark) !important;
  color: #FFFFFF !important;
}

/* アウトラインボタン */
.ps-btn-outline {
  background-color: transparent;
  color: var(--ps-primary);
  border: 2px solid var(--ps-primary);
  border-radius: 6px;
  font-weight: 700;
  padding: 10px 28px;
  transition: all 0.2s ease;
}

.ps-btn-outline:hover {
  background-color: var(--ps-primary);
  color: #FFFFFF;
}

/* 準備中ボタン */
.ps-btn-coming-soon .wp-block-button__link {
  background-color: #B0B0B0 !important;
  color: #FFFFFF !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ============================================================
   ラベル・バッジ
   ============================================================ */
/* ゴールドラベル（FEATURES / FOR WHO / PLANS など） */
.ps-label {
  color: var(--ps-gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 13px;
}

/* Proプランバッジ */
.ps-badge-pro {
  display: inline-block;
  background-color: var(--ps-gold);
  color: #1A1A1A;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}

/* 番号ラベル（01 / 02 / 03） */
.ps-feature-num {
  color: var(--ps-primary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;
}


/* ============================================================
   セクション背景
   ============================================================ */
.ps-section-surface {
  background-color: var(--ps-surface);
}

.ps-section-white {
  background-color: var(--ps-bg);
}

/* CTAバナー（ネイビー背景） */
.ps-cta-banner {
  background-color: var(--ps-navy);
  color: #FFFFFF;
  padding: 80px 20px; /* ← 追加 */
}

.ps-cta-banner h2,
.ps-cta-banner p {
  color: #FFFFFF;
}


/* ============================================================
   カード
   ============================================================ */
.ps-card {
  background-color: var(--ps-bg);
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

/* Proプランカード強調 */
.ps-card-pro {
  background-color: var(--ps-navy);
  border: 2px solid var(--ps-gold);
  border-radius: 8px;
  color: #FFFFFF;
}

.ps-card-pro h2,
.ps-card-pro h3,
.ps-card-pro p {
  color: #FFFFFF;
}


/* ============================================================
   タグチップ（試合設定 / 選手登録 など）
   ============================================================ */
.ps-chip {
  display: inline-block;
  font-size: 12px;
  color: var(--ps-navy);
  background: var(--ps-surface);
  padding: 4px 12px;
  border-radius: 14px;
  margin: 2px 4px 2px 0;
}


/* ============================================================
   フッター
   ============================================================ */
#footer {
  background-color: #F5F5F5;
  color: var(--ps-text);
  border-top: 1px solid var(--ps-border);
}
#footer a {
  color: var(--ps-text);
  opacity: 0.7;
}
#footer a:hover {
  opacity: 1;
  color: var(--ps-primary);
}
#footer-nav a,
#footer .footer-nav a,
.footer-nav a {
  color: var(--ps-text) !important;
  opacity: 0.7;
}
#footer-nav a:hover,
#footer .footer-nav a:hover,
.footer-nav a:hover {
  color: var(--ps-primary) !important;
  opacity: 1;
}
#copyright {
  background-color: #E8E8E8;
  color: var(--ps-text-muted);
  font-size: 12px;
}


/* ============================================================
   レスポンシブ補助
   ============================================================ */
@media (max-width: 768px) {
  .ps-cta-banner {
    padding: 40px 20px;
  }
  .ps-forwho-section {
    margin-left: -18px;
    margin-right: -18px;
    width: calc(100% + 30px);
  }
}

/* ============================================================
   PC タイポグラフィ（768px以上）— eFootball 参考スタイル
   ・見出し：太字・大きめ・トラッキング広め
   ・本文：14-15px・行間1.75
   ============================================================ */
@media (min-width: 768px) {

  /* --- 本文 --- */
  body {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  /* --- H1（ヒーロー大見出し） --- */
  h1,
  .wp-block-heading[class*="h1"],
  .entry-content h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
  }

  /* --- H2（セクション見出し） --- */
  h2,
  .wp-block-heading:not([class*="h3"]):not([class*="h4"]),
  .entry-content h2 {
    font-size: 26px;
    font-weight: 450;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }

  /* --- H3（機能・カード見出し） --- */
  h3,
  .entry-content h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.03em;
  }

  /* --- H4 --- */
  h4,
  .entry-content h4 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* --- セクションラベル（FEATURES / PLANS / FOR WHO など英語大文字） ---
       eFootball の細くてトラッキング広いラベル風 */
  .ps-label,
  .wp-block-paragraph.has-small-font-size[style*="#F0B429"],
  p.has-small-font-size[style*="#F0B429"] {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* --- 機能番号ラベル（01 / 02 / 03） --- */
  .ps-feature-num,
  p.has-small-font-size[style*="#E8001D"] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  /* --- 本文段落 --- */
  .entry-content p,
  .wp-block-paragraph {
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.02em;
  }

  /* --- プラン価格（¥0 / ¥700 の大きい数字）--- */
  .wp-block-group span[style*="font-size:36px"] {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.02em; /* 大きい数字は詰める */
  }

  /* --- プランカード見出し（Entry / Pro ラベル）--- */
  p[style*="letter-spacing:0.06em"] {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  /* --- リストアイテム（機能リスト）--- */
  .plan-list li {
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.01em;
  }

  /* --- タグチップ --- */
  .ps-chip,
  div[style*="border-radius:14px"] span {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  /* --- CTAバナー「今すぐ無料でダウンロード」--- */
  .ps-cta-banner p[style*="font-size:17px"],
  .ps-cta-banner p {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.06em;
  }

  /* --- FOR WHOカード見出し --- */
  .wp-block-column h3[style*="font-size:15px"] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  /* --- FOR WHOカード 本文 --- */
  .wp-block-column p[style*="font-size:13px"] {
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  /* --- ヒーローキャッチコピー（サブテキスト）--- */
  .wp-block-paragraph[style*="font-size:15px"] {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.025em;
  }

  /* --- 注釈テキスト（※ まず無料〜など）--- */
  p[style*="font-size:13px"][style*="#9CA3AF"] {
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.7;
  }
}