/*
Theme Name: AGA Compass Child
Template: cocoon-master
Version: 1.0.0
Description: AGA料金コンパス（agacompass.com）用 Cocoon子テーマ。白＋緑基調・清潔・煽りゼロ・E-E-A-T重視（YMYL）。比較表UI（料金数値大きく/ゼブラ行/◎○△×/スマホ先頭列固定横スクロール）を純CSSで実装。JSゼロ・速度優先。
Author: agacompass
Text Domain: agacompass-child
*/

/* ============================================================
   出典（設計正本）:
   - サイト設計書_ペルソナと検品体制_2026-08-11.md
     （サイト②トンマナ: 白＋緑・煽りゼロ／ペルソナP3／構成: 比較表→院別詳細→シミュ→選び方）
   - リサーチ_ブログデザイン戦略_2026-08-11.md
     （§6 YMYL信頼性デザイン: 比較表UI仕様・E-E-A-T実装／§5 着地記事）

   パレットは5色: 白 / 濃グリーングレー(文字) / グリーン / 淡グリーン / グレー。
   同系トーンの明度違いは各色の階調として扱い、全てCSS変数経由で参照。
   コントラスト実測（WCAG 2.x 相対輝度で再計算。2026-08-12検品反映）:
   - 本文 #2F3833 on #FFFFFF = 12.11:1
   - 補助文字 #5A6560 on #FFFFFF = 6.06:1 ／ on ゼブラ淡緑 #EAF4EF = 5.39:1
   - 白文字 on #2E7D5B = 5.00:1
   （本文・補助文字とも AA 4.5:1 以上を達成）
   煽り色（赤・オレンジの強調、点滅、過剰装飾）は使用禁止。
   ============================================================ */

:root {
  /* --- パレット（5色） --- */
  --ag-white:  #FFFFFF; /* ベース背景 */
  --ag-text:   #2F3833; /* 文字: 濃いグリーングレー */
  --ag-green:  #2E7D5B; /* メイングリーン（見出し・ボタン・◎） */
  --ag-pale:   #EAF4EF; /* 淡グリーン（ゼブラ行・面） */
  --ag-gray:   #5A6560; /* グレー（補助文字・△×・罫線系統） */

  /* --- 階調（上記5色の明度違い。独立色ではない） --- */
  --ag-green-dark: #236247; /* グリーン濃色: hover */
  --ag-line:       #D9E4DE; /* 淡グリーン系罫線 */
  --ag-gray-light: #F4F6F5; /* グレー極淡: 面 */

  /* --- 寸法 --- */
  --ag-radius: 8px;
}

/* ============================================================
   1. ベース（タイポグラフィ・背景）
   Noto Sans系細めゴシック・行間広め。Webフォント読込なし（速度優先）。
   ============================================================ */

body {
  background-color: var(--ag-white);
  color: var(--ag-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

a {
  color: var(--ag-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ag-green-dark);
}

/* ============================================================
   2. ヘッダー・グローバルメニュー
   ============================================================ */

.header {
  background-color: var(--ag-white);
  border-bottom: 2px solid var(--ag-green);
}

.site-name-text {
  color: var(--ag-text);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.tagline {
  color: var(--ag-gray);
  font-size: 12px;
}

.navi {
  background-color: var(--ag-white);
  border-bottom: 1px solid var(--ag-line);
}

.navi-in > ul li {
  background-color: transparent;
}

.navi-in a {
  color: var(--ag-text);
  text-decoration: none;
  font-size: 14px;
}

.navi-in a:hover {
  background-color: var(--ag-pale);
  color: var(--ag-text);
}

.breadcrumb {
  color: var(--ag-gray);
  font-size: 12px;
}

.breadcrumb a {
  color: var(--ag-gray);
  text-decoration: none;
}

/* ============================================================
   3. 記事一覧カード
   ============================================================ */

.entry-card-wrap {
  background-color: var(--ag-white);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius);
  overflow: hidden;
  margin-bottom: 1.5em;
  text-decoration: none;
}

.entry-card-title {
  color: var(--ag-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.entry-card-snippet {
  color: var(--ag-gray);
  font-size: 12px;
}

.cat-label {
  background-color: var(--ag-green);
  color: var(--ag-white);
  border: none;
  border-radius: 3px;
  font-size: 10px;
}

/* ============================================================
   4. 記事本文（見出し・目次・引用・通常テーブル）
   ============================================================ */

.entry-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
}

.article h2 {
  background: none;
  border: none;
  border-bottom: 2px solid var(--ag-green);
  color: var(--ag-text);
  font-size: 20px;
  font-weight: 600;
  padding: 0.3em 0.1em;
  margin-top: 2.5em;
}

.article h3 {
  background: none;
  border: none;
  border-left: 4px solid var(--ag-green);
  color: var(--ag-text);
  font-size: 17px;
  font-weight: 600;
  padding: 0.2em 0 0.2em 0.7em;
  margin-top: 2em;
}

.article p {
  margin-bottom: 1.6em;
}

.toc {
  background-color: var(--ag-gray-light);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius);
  padding: 1em 1.4em;
}

.toc-title {
  color: var(--ag-text);
  font-weight: 600;
}

.toc a {
  color: var(--ag-text);
  text-decoration: none;
}

.article blockquote {
  background-color: var(--ag-gray-light);
  border-left: 4px solid var(--ag-gray);
  color: var(--ag-text);
}

/* 記事内の通常テーブル（比較表は .aga-compare を使う） */
.article table {
  border-collapse: collapse;
  width: 100%;
}

.article th {
  background-color: var(--ag-pale);
  color: var(--ag-text);
  border: 1px solid var(--ag-line);
  font-weight: 600;
}

.article td {
  border: 1px solid var(--ag-line);
  background-color: var(--ag-white);
}

/* ============================================================
   5. ボタン
   緑単色・落ち着いたトーン。煽り系装飾（グラデ・アニメ・点滅）禁止。
   ============================================================ */

.btn,
.wp-block-button__link {
  background-color: var(--ag-green);
  color: var(--ag-white);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}

.btn:hover,
.wp-block-button__link:hover {
  background-color: var(--ag-green-dark);
  color: var(--ag-white);
  opacity: 1;
}

/* ============================================================
   6. 料金比較表UI（.aga-compare クラス群）
   仕様（リサーチ§6）:
   - 料金数値を大きく（.aga-price）
   - ゼブラ行
   - ◎○△×アイコン（.aga-mark--*）
   - スマホは先頭列固定＋横スクロール（純CSS: sticky + overflow-x）
   - 比較軸5〜7項目・出典と確認日の欄つき
   ============================================================ */

/* 横スクロールの外枠
   検品#13: overflow-y:hidden を明示（border-radius角からの
   はみ出し・不要な縦スクロールバー発生の対策） */
.aga-compare-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0 0.5em;
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius);
}

.aga-compare {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 720px; /* 比較軸6列が潰れない幅。列数を増減したら調整 */
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.aga-compare th,
.aga-compare td {
  padding: 0.8em 0.7em;
  border-bottom: 1px solid var(--ag-line);
  border-right: 1px solid var(--ag-line);
  background-color: var(--ag-white);
  text-align: center;
  vertical-align: middle;
}

.aga-compare th:last-child,
.aga-compare td:last-child {
  border-right: none;
}

.aga-compare tbody tr:last-child th,
.aga-compare tbody tr:last-child td {
  border-bottom: none;
}

/* ヘッダー行 */
.aga-compare thead th {
  background-color: var(--ag-green);
  color: var(--ag-white);
  font-weight: 600;
  white-space: nowrap;
}

/* ゼブラ行（淡グリーン） */
.aga-compare tbody tr:nth-child(even) th,
.aga-compare tbody tr:nth-child(even) td {
  background-color: var(--ag-pale);
}

/* 先頭列（院名）: スマホ横スクロール時に固定 */
.aga-compare th:first-child,
.aga-compare td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  font-weight: 600;
  min-width: 8.5em;
  border-right: 2px solid var(--ag-line); /* 固定列の境界を明示 */
}

.aga-compare thead th:first-child {
  z-index: 3;
  background-color: var(--ag-green);
}

/* 料金数値は大きく（数字が主役・煽り色は使わない） */
.aga-price {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--ag-text);
  line-height: 1.3;
}

.aga-price-note {
  display: block;
  font-size: 0.85em;
  color: var(--ag-gray);
  font-weight: 400;
}

/* ◎○△× 評価マーク（色は落ち着いたトーン・◎のみ緑） */
.aga-mark {
  display: inline-block;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
}

.aga-mark--best { color: var(--ag-green); }  /* ◎ */
.aga-mark--good { color: var(--ag-text); }   /* ○ */
.aga-mark--fair { color: var(--ag-gray); }   /* △ */
.aga-mark--poor { color: var(--ag-gray); }   /* × */

/* 表内の出典リンクセル */
.aga-compare .aga-source-cell {
  font-size: 0.85em;
  color: var(--ag-gray);
  white-space: nowrap;
}

/* 表の下に置く出典・確認日・評価基準の注記 */
.aga-source {
  font-size: 12px;
  color: var(--ag-gray);
  line-height: 1.7;
  margin: 0.5em 0 2em;
}

.aga-source a {
  color: var(--ag-gray);
}

/* スマホ・タブレット縦に横スクロールを知らせるヒント（純CSS）
   検品#13: 表min-width 720pxはタブレット縦（〜834px、Cocoonの
   1カラム落ち閾値と同帯域）でもはみ出すため、表示帯域を834pxまで拡大 */
.aga-scroll-hint {
  display: none;
  font-size: 11px;
  color: var(--ag-gray);
  text-align: right;
  margin: 0.3em 0 0;
}

@media screen and (max-width: 834px) {
  .aga-scroll-hint {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .aga-compare {
    font-size: 12px;
  }
}

/* ============================================================
   7. E-E-A-T・トップページ用パーツ（patterns-top.html が参照）
   検品#2: Cocoonは固定ページ本文も .article でラップするため、
   .article h2/h3（0,1,1）が独自クラス単体（0,1,0）に勝つ。
   トップ用パーツは .article 前置きの高詳細度セレクタを併記し、
   本文見出しの緑下線・左罫線をリセットする。
   ============================================================ */

/* フロント固定ページのページタイトルを非表示（検品#5） */
.home.page .entry-title {
  display: none;
}

/* リード帯（煽りゼロの静かな導入） */
.aga-hero {
  background-color: var(--ag-pale);
  border-radius: var(--ag-radius);
  padding: 1.8em 1.4em;
  margin-bottom: 2em;
}

/* ヒーロー内h2は .article h2 の緑下線をリセット */
.article .aga-hero h2,
.aga-hero h2 {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.6em;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
}

.article .aga-hero p,
.aga-hero p {
  margin-bottom: 0.4em;
}

.article .aga-hero .aga-updated,
.aga-hero .aga-updated {
  font-size: 12px;
  color: var(--ag-gray);
  margin-bottom: 0;
}

/* 導線カード（院別詳細/費用シミュレーション/選び方） */
.aga-nav-card {
  background-color: var(--ag-white);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius);
  padding: 1.3em 1.2em;
  height: 100%;
}

.article .aga-nav-card h3,
.aga-nav-card h3 {
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 0.4em;
  font-size: 16px;
  font-weight: 600;
  color: var(--ag-green);
}

.article .aga-nav-card p,
.aga-nav-card p {
  font-size: 13px;
  color: var(--ag-gray);
  margin-bottom: 1em;
}

/* 運営者情報・広告掲載ポリシーの明示帯（E-E-A-T） */
.aga-disclosure {
  background-color: var(--ag-gray-light);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius);
  padding: 1em 1.4em;
  font-size: 12px;
  color: var(--ag-gray);
  line-height: 1.8;
  margin: 2.5em 0 1em;
}

.aga-disclosure a {
  color: var(--ag-gray);
}

/* セクション見出し（検品#2: .article h2 に勝つ詳細度で上書き） */
.article .aga-section-title,
.aga-section-title {
  font-size: 18px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid var(--ag-green);
  padding: 0 0 0.3em;
  margin: 2.5em 0 1em;
}

/* ============================================================
   8. フッター・ページネーション
   ============================================================ */

.footer {
  background-color: var(--ag-gray-light);
  color: var(--ag-text);
}

.footer a {
  color: var(--ag-text);
  text-decoration: none;
}

.footer-bottom,
.copyright {
  color: var(--ag-gray);
  font-size: 11px;
}

.pagination .page-numbers {
  color: var(--ag-text);
  background-color: var(--ag-white);
  border: 1px solid var(--ag-line);
  border-radius: 4px;
}

.pagination .current {
  background-color: var(--ag-green);
  color: var(--ag-white);
  border-color: var(--ag-green);
}

.go-to-top-button {
  background-color: var(--ag-green);
  color: var(--ag-white);
  opacity: 0.85;
}

/* ============================================================
   9. スマホ微調整
   ============================================================ */

@media screen and (max-width: 480px) {
  .entry-title {
    font-size: 19px;
  }

  .article h2 {
    font-size: 18px;
  }

  .article h3 {
    font-size: 15px;
  }
}

/* ============================================================
   10. 要実機確認（実DOM確認後に有効化・調整すること）

   [チェックリスト]
   - .navi-in a（検品#6）: Cocoon親CSS側が「#navi .navi-in > ul > li > a」等の
     高詳細度セレクタで色指定している場合、本ファイルの .navi-in a（0,1,1）が
     負ける。実機DevToolsで確認し、負けていたら親と同型のセレクタに引き上げる
   - .appeal / .author-box: クラス名自体が想定値
   - 比較表: 実機スマホでsticky先頭列とゼブラ行の重なり・
     Lazy Loadとの干渉を確認
   ============================================================ */

/* 要実機確認: アピールエリア（Cocoon設定→アピールエリア使用時のクラス名） */
.appeal {
  background-color: var(--ag-pale);
}

/* 要実機確認: 著者ボックス（E-E-A-T用に必ず実機で構造確認して整える） */
.author-box {
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius);
  background-color: var(--ag-white);
}


/* ============================================================
   記事冒頭の表記（PR＋AI開示・チップ型1行）
   正本: vault 設計_記事冒頭表記ブロック_2026-08-13
   ============================================================ */
.pr-disclosure {
  font-size: 0.75rem;
  color: #7f8a84;
  line-height: 1.6;
  margin: 0 0 1.6em;
}
.pr-disclosure .pr-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7f8a84;
  border: 1px solid #cfd8d2;
  border-radius: 3px;
  padding: 0 0.45em;
  margin-right: 0.6em;
  vertical-align: 0.08em;
}