@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){
  /*必要ならばここにコードを書く*/
}

/* =========================================================
   ★ Phase 1 拡張CSS（3エージェント統合案）
   Agent A（デザイン）提案の実装
   ========================================================= */

/* --- LCP対策：背景二重塗り解消 --- */
.wrap, .main {
  background-color: inherit;
}
.footer,
.sidebar {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* --- アクセシビリティ：フォーカスリング（ゴールドでブランド整合） --- */
:focus-visible {
  outline: 3px solid var(--phj-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- prefers-reduced-motion 対応 --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 320px未満の破綻防止ガード --- */
@media (max-width: 360px) {
  .article { padding: var(--phj-space-md) var(--phj-space-sm); }
  .article h2 { font-size: 1.35rem; }
  .article h3 { font-size: 1.15rem; }
}

/* --- トップページ ヒーロー（キャッチコピー最大化） --- */
.phj-hero {
  background-color: var(--phj-brown);
  color: var(--phj-sand);
  text-align: center;
  padding: var(--phj-space-2xl) var(--phj-space-md);
  border-bottom: 4px solid var(--phj-gold);
}
.phj-hero__catchcopy {
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  font-weight: 700;
  color: var(--phj-gold);
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin: 0 0 var(--phj-space-md);
}
.phj-hero__sub {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: var(--phj-sand);
  opacity: 0.85;
  max-width: 480px;
  margin: 0 auto var(--phj-space-lg);
  line-height: 1.7;
}
.phj-hero__badge {
  display: inline-block;
  background-color: var(--phj-gold);
  color: var(--phj-brown);
  font-size: 0.8rem;
  font-weight: 700;
  padding: var(--phj-space-xs) var(--phj-space-md);
  border-radius: 100px;
  letter-spacing: 0.08em;
  margin-bottom: var(--phj-space-lg);
}

/* --- Buy記事CTA（アフィリエイト導線・目立たせ用） --- */
.phj-cta-buy {
  display: block;
  background: linear-gradient(135deg, var(--phj-gold) 0%, var(--phj-gold-soft) 100%);
  color: var(--phj-brown);
  text-align: center;
  padding: var(--phj-space-lg) var(--phj-space-xl);
  border-radius: var(--phj-radius);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  margin: var(--phj-space-xl) 0;
  border: 3px solid var(--phj-brown);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.phj-cta-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(47, 36, 29, 0.25);
  color: var(--phj-brown);
}
.phj-cta-buy::before { content: "▶ "; }

/* --- Know記事：データテーブル（Statcast可視化用） --- */
.phj-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: var(--phj-space-xl) 0;
  overflow-x: auto;
  display: block;
}
.phj-data-table th {
  background-color: var(--phj-brown);
  color: var(--phj-gold);
  padding: var(--phj-space-sm) var(--phj-space-md);
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}
.phj-data-table td {
  padding: var(--phj-space-sm) var(--phj-space-md);
  border-bottom: 1px solid var(--phj-border);
  vertical-align: top;
}
.phj-data-table tr:nth-child(even) { background-color: var(--phj-sand); }
.phj-data-table tr:hover { background-color: rgba(255, 196, 37, 0.12); }

/* --- FAQ / Q&A ブロック（AIO引用最適化・憲法第6章） --- */
.phj-faq { margin: var(--phj-space-xl) 0; }
.phj-faq__question {
  background-color: var(--phj-brown);
  color: var(--phj-gold);
  padding: var(--phj-space-sm) var(--phj-space-md);
  font-weight: 700;
  border-radius: var(--phj-radius) var(--phj-radius) 0 0;
  font-size: 1rem;
}
.phj-faq__question::before { content: "Q. "; }
.phj-faq__answer {
  background-color: var(--phj-sand-lighter);
  border: 1px solid var(--phj-border);
  border-top: none;
  padding: var(--phj-space-md) var(--phj-space-lg);
  border-radius: 0 0 var(--phj-radius) var(--phj-radius);
  line-height: 1.9;
}

/* --- 出典・データキャプション（憲法第5章・データ出典明記） --- */
.phj-source {
  font-size: 0.78rem;
  color: var(--phj-text-mute);
  text-align: right;
  margin-top: calc(var(--phj-space-xs) * -1);
  margin-bottom: var(--phj-space-md);
}
.phj-source a { color: var(--phj-ocean); }