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

/* ============================================================
   PC相場チェッカー デザイントークン

   出典と根拠は blog/DESIGN.md にまとめてある。要点だけ再掲する。

   - 色は「見た目」ではなく「役割」で定義する（Apple HIG / Material 3 共通）
   - ライトとダークで同じ変数名に別の値を与える（両社が同じ結論）
   - ダークの本文を純白にしない。Material が halation（光のにじみ）を
     明示的に問題として挙げているため
   - 本文の行間は日本語向けに広げる。Material 公式が
     「日本語は Latin より行高 約7%増」と規定している
   ============================================================ */

:root {
  /* --- サーフェス（背景）と、その上に乗る色 --- */
  --pcs-surface:            #ffffff;
  --pcs-surface-container:  #f6f7f9;
  --pcs-surface-high:       #eef0f4;
  --pcs-on-surface:         #111827;  /* 本文。ブランドのインク色 */
  --pcs-on-surface-variant: #4b5563;  /* 補足・キャプション */

  /* --- 罫線 --- */
  /* Material: 「区切り線に outline を使うな。outline-variant を使え」 */
  --pcs-outline:            #cbd2dc;  /* 入力欄の枠など、境界が意味を持つもの */
  --pcs-outline-variant:    #e3e7ec;  /* 装飾的な区切り線・表の罫線 */

  /* --- アクセント --- */
  /* ブランドのアンバー #D97706 は白背景で約3.4:1。本文リンクの
     4.5:1 に届かないので、リンク用だけ暗い #B45309 を使う。
     大きな面・図形には 3:1 で足りるのでブランド色をそのまま使う。 */
  --pcs-primary:            #b45309;  /* リンク・主要アクション（4.5:1確保） */
  --pcs-primary-brand:      #d97706;  /* 面・線・バッジ（3:1で足りる用途） */
  --pcs-primary-container:  #fff7ed;
  --pcs-on-primary:         #ffffff;

  /* --- セマンティック（アクセントとは別系統） --- */
  /* Apple: 色の意味は文化で変わる。日本の価格文脈では
     「赤＝安い・お得」が自然に読まれるため、欧米式の緑＝良を採らない。
     ただし色だけに頼らず、必ずテキストか記号を併記する。 */
  --pcs-cheap:              #b91c1c;  /* 最安・値下がり */
  --pcs-cheap-container:    #fef2f2;

  /* --- 8pxグリッド（Material の spacing scale） --- */
  --pcs-sp-1: 4px;
  --pcs-sp-2: 8px;
  --pcs-sp-3: 12px;
  --pcs-sp-4: 16px;
  --pcs-sp-5: 24px;
  --pcs-sp-6: 32px;
  --pcs-sp-7: 48px;

  --pcs-radius: 8px;

  /* ヘッダーとフッターは、テーマに関係なく常にブランドのインク色で固定する。
     読む場所（本文）だけがテーマで切り替わる。 */
  --pcs-ink: #111827;
}

/* テーマは3状態ある。OS任せ（属性なし）／明示的にライト／明示的にダーク。
   素の :root にライト一式を置き、ダークは上書きだけにする。
   :not([data-theme="light"]) を付けないと、OSがダークのとき明示的なライト指定を
   上書きできなくなる（一度その状態になっていた）。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pcs-surface:            #0d1117;
    --pcs-surface-container:  #161c25;
    --pcs-surface-high:       #1e252f;
    --pcs-on-surface:         #e8eaed;  /* 純白にしない（halation対策） */
    --pcs-on-surface-variant: #a0a9b6;
    --pcs-outline:            #39424f;
    --pcs-outline-variant:    #262e39;
    --pcs-primary:            #f0a73b;
    --pcs-primary-brand:      #f59e0b;
    --pcs-primary-container:  #241c10;
    --pcs-on-primary:         #17120a;
    --pcs-cheap:              #f87171;
    --pcs-cheap-container:    #24140f;
  }
}

/* 明示的にダークを選んだときも同じ値を当てる（トグル側の勝ち筋） */
:root[data-theme="dark"] {
  --pcs-surface:            #0d1117;
  --pcs-surface-container:  #161c25;
  --pcs-surface-high:       #1e252f;
  --pcs-on-surface:         #e8eaed;  /* 純白にしない（halation対策） */
  --pcs-on-surface-variant: #a0a9b6;
  --pcs-outline:            #39424f;
  --pcs-outline-variant:    #262e39;
  --pcs-primary:            #f0a73b;
  --pcs-primary-brand:      #f59e0b;
  --pcs-primary-container:  #241c10;
  --pcs-on-primary:         #17120a;
  --pcs-cheap:              #f87171;
  --pcs-cheap-container:    #24140f;
}



/* ============================================================
   1. タイポグラフィ

   Apple の実測仕様では Headline と Body が同じ14ptで、
   ウェイトだけが違う（Semibold / Regular）。
   見出しは「サイズ」ではなく「サイズ＋ウェイト」で作る。

   Apple:「通常はフォントのライトウェイトを避ける」
   和文ゴシックの Light は画数の多い漢字が小サイズで潰れるため、
   本文まわりに font-weight:300 を使わない。
   ============================================================ */

body {
  font-size: 17px;                     /* Apple の iOS デフォルト本文と同値 */
  line-height: 1.85;                   /* Latin向け1.5 × 日本語補正 + 長文ぶん */
  color: var(--pcs-on-surface);
  background: var(--pcs-surface);
  font-feature-settings: "palt";       /* 和文の詰め。約物の間延びを抑える */
}

.entry-content p,
.article p {
  margin-block: 0 1.1em;               /* Material: 段落間隔は文字サイズの .75〜1.25倍 */
}

/* 大きい文字ほど行間比を詰める（Apple・Material が独立に同じ結論） */
.entry-title, .article-title,
h1.entry-title { line-height: 1.35; font-weight: 700; }

.article h2,
.entry-content h2 {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.4;
  margin-block: var(--pcs-sp-7) var(--pcs-sp-4);
  padding: 0 0 var(--pcs-sp-3);
  background: none;
  border: none;
  border-bottom: 2px solid var(--pcs-on-surface);
  color: var(--pcs-on-surface);
}

.article h3,
.entry-content h3 {
  font-size: 1.18em;
  font-weight: 700;
  line-height: 1.5;
  margin-block: var(--pcs-sp-6) var(--pcs-sp-3);
  padding: 0 0 0 var(--pcs-sp-3);
  background: none;
  border: none;
  border-left: 4px solid var(--pcs-primary-brand);
  color: var(--pcs-on-surface);
}

/* h4 は本文と同サイズ。ウェイトだけで階層を作る（Appleの構造） */
.article h4,
.entry-content h4 {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.6;
  margin-block: var(--pcs-sp-5) var(--pcs-sp-2);
  border: none;
  padding: 0;
  background: none;
}

.article strong,
.entry-content strong { font-weight: 700; color: var(--pcs-on-surface); }


/* ============================================================
   2. リンク

   Material:「リンクテキストには下線が必須」
   色だけで相互作用を示すと、色覚特性によっては伝わらないため。
   ============================================================ */

.article a,
.entry-content a {
  color: var(--pcs-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.article a:hover,
.entry-content a:hover { text-decoration-thickness: 2px; }

/* フォーカスは必ず見えるようにする */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--pcs-primary-brand);
  outline-offset: 2px;
  border-radius: 3px;
}


/* ============================================================
   3. 価格表 — このサイトの主役

   Material:「値が変わりうる表には tabular figures（等幅数字）を使い、
   光学的に揃えてスキャンしやすくする」
   価格比較サイトにとって、これが最も費用対効果の高い指定になる。

   Apple:「単にデータを提示するだけなら、グラフではなく
   スクロール・検索・並べ替えできる表を検討せよ」
   ============================================================ */

.entry-content figure.wp-block-table,
.article figure.wp-block-table {
  margin-block: var(--pcs-sp-5);
  overflow-x: auto;                    /* 狭い画面でも本文が横に伸びない */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pcs-outline-variant);
  border-radius: var(--pcs-radius);
  background: var(--pcs-surface);
}

.entry-content .wp-block-table table,
.article .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
  line-height: 1.7;
  margin: 0;
  border: none;
}

.entry-content .wp-block-table th,
.article .wp-block-table th {
  background: var(--pcs-surface-container);
  color: var(--pcs-on-surface-variant);
  font-weight: 700;                    /* Material: ヘッダーは本文と重みを変える */
  font-size: 0.88em;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  padding: var(--pcs-sp-3) var(--pcs-sp-4);
  border: none;
  border-bottom: 1px solid var(--pcs-outline-variant);
}

.entry-content .wp-block-table td,
.article .wp-block-table td {
  padding: var(--pcs-sp-3) var(--pcs-sp-4);
  border: none;
  border-bottom: 1px solid var(--pcs-outline-variant);
  vertical-align: top;
  color: var(--pcs-on-surface);
  background: transparent;
}

.entry-content .wp-block-table tbody tr:last-child td,
.article .wp-block-table tbody tr:last-child td { border-bottom: none; }

/* ホバーで行を追えるようにする（Material の data table の作法） */
.entry-content .wp-block-table tbody tr:hover td,
.article .wp-block-table tbody tr:hover td {
  background: var(--pcs-surface-container);
}

/* --- 数字を等幅にして縦に揃える。ここが本丸 --- */
.entry-content .wp-block-table td,
.entry-content .wp-block-table th,
.article .wp-block-table td,
.article .wp-block-table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "palt" 1;
}

/* --- 最安行の強調 --- */
/* 記事内には構成表・保証表・FAQ表も並ぶ。それらの1行目まで色が付くと
   「最安」の意味が消えるので、価格表だけに限定する。
   価格表は最安行のメーカー名だけを <strong> で囲んでいるので、それを目印にする。 */
/* 色だけに頼らない。表の中に「最安」というテキストが入っているうえで、
   左の帯と太字を足して三重にしている。 */
.entry-content .wp-block-table tbody tr:first-child:has(td:first-child strong) td,
.article .wp-block-table tbody tr:first-child:has(td:first-child strong) td {
  background: var(--pcs-primary-container);
}
.entry-content .wp-block-table tbody tr:first-child:has(td:first-child strong) td:first-child,
.article .wp-block-table tbody tr:first-child:has(td:first-child strong) td:first-child {
  box-shadow: inset 4px 0 0 var(--pcs-primary-brand);
}
.entry-content .wp-block-table tbody tr:first-child:has(td:first-child strong):hover td,
.article .wp-block-table tbody tr:first-child:has(td:first-child strong):hover td {
  background: var(--pcs-primary-container);
}

/* 価格の列を右揃えにして桁を突き合わせやすくする。
   「ちょうど4列の表」＝価格表、という条件で絞る。
   6列ある保証表を右揃えにすると、かえって読みにくくなるため。 */
.entry-content .wp-block-table:has(thead th:nth-child(4)):not(:has(thead th:nth-child(5))) td:nth-child(3),
.entry-content .wp-block-table:has(thead th:nth-child(4)):not(:has(thead th:nth-child(5))) td:nth-child(4),
.entry-content .wp-block-table:has(thead th:nth-child(4)):not(:has(thead th:nth-child(5))) th:nth-child(3),
.entry-content .wp-block-table:has(thead th:nth-child(4)):not(:has(thead th:nth-child(5))) th:nth-child(4) {
  text-align: right;
  white-space: nowrap;
}


/* ============================================================
   4. リスト
   ============================================================ */

.entry-content ul.wp-block-list,
.article ul.wp-block-list {
  padding-left: 1.3em;
  margin-block: var(--pcs-sp-4);
}
.entry-content ul.wp-block-list li,
.article ul.wp-block-list li {
  margin-block: var(--pcs-sp-2);
  padding-left: var(--pcs-sp-1);
}
.entry-content ul.wp-block-list li::marker,
.article ul.wp-block-list li::marker { color: var(--pcs-primary-brand); }


/* ============================================================
   5. 記事上のPR表記

   A8.net の規定「ファーストビュー等、一般消費者が認識できる位置に
   わかりやすく表示」に対応。本文と同じ文字サイズを保つ。
   ============================================================ */

.single-content-top .textwidget p,
.single-content-top p {
  font-size: 1em !important;
  line-height: 1.75;
}


/* ============================================================
   6. 全体の余白と読みやすさ
   ============================================================ */

.entry-content > * + * { margin-top: var(--pcs-sp-4); }

blockquote {
  border-left: 3px solid var(--pcs-outline);
  background: var(--pcs-surface-container);
  color: var(--pcs-on-surface-variant);
  padding: var(--pcs-sp-3) var(--pcs-sp-4);
  margin-block: var(--pcs-sp-5);
  border-radius: 0 var(--pcs-radius) var(--pcs-radius) 0;
}

code {
  background: var(--pcs-surface-container);
  border: 1px solid var(--pcs-outline-variant);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.88em;
}

/* ナビゲーションのタップ領域を確保（Apple 44 / Material 48 の重なり） */
.navi-in > ul > li > a,
.menu-drawer a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* 目次 */
.toc {
  background: var(--pcs-surface-container);
  border: 1px solid var(--pcs-outline-variant);
  border-radius: var(--pcs-radius);
  padding: var(--pcs-sp-4) var(--pcs-sp-5);
}
.toc-title { font-weight: 700; }

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

@media (max-width: 560px) {
  body { font-size: 16px; line-height: 1.8; }
  .article h2, .entry-content h2 { font-size: 1.35em; }
  .entry-content .wp-block-table th,
  .entry-content .wp-block-table td { padding: var(--pcs-sp-2) var(--pcs-sp-3); }
}

/* ============================================================
   7. サイトの外側 — ヘッダー・一覧・サイドバー・フッター

   Cocoonの記事カードは 画像を float:left にして、本文側の margin-left で
   避けさせる作りになっている。**この margin を消すと本文が画像に潜り込む。**
   （一度それをやって表示が崩れた）

   floatに依存する作りは壊れやすいので、カードごと flex に置き換える。
   flexアイテムは float を無視するので、Cocoon側の指定と喧嘩しない。

   Apple:「画面上のコントロールの数を絞って、主要なタスクとコンテンツに
   集中できるようにする」— ランキングやSNSボタンを盛らず、記事への導線だけ残す。
   ============================================================ */

/* --- ヘッダー --- */
/* ロゴのRGBリングと、アイキャッチ下端のストリップと同じ色環を
   ヘッダーの下にも引く。サイト全体で同じ記号を使って、同じ場所だと分かるようにする。 */
.header-container {
  background: var(--pcs-ink);
  border: none;
  position: relative;
}
.header-container::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #ef4444 0%, #f59e0b 14%, #facc15 28%, #10b981 42%,
    #22d3ee 56%, #60a5fa 70%, #c084fc 84%, #ef4444 100%);
}
.header, .header-container-in, .navi, .navi-in > .menu-header {
  background: transparent;
  border: none;
}
.site-name-text, .header .site-name a {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.tagline {
  color: #9aa5b1;
  font-size: 0.82em;
}
.logo-header img, .header img { max-width: 100%; height: auto; }

/* --- グローバルナビ --- */
.navi-in > ul > li > a {
  color: #e8eaed;
  font-weight: 700;
  font-size: 0.92em;
  padding-inline: var(--pcs-sp-4);
  border-bottom: 2px solid transparent;
  background: transparent;
}
.navi-in > ul > li > a:hover {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: var(--pcs-primary-brand);
  color: #ffffff;
}

/* --- パンくず --- */
.breadcrumb {
  font-size: 0.8em;
  color: var(--pcs-on-surface-variant);
  padding: var(--pcs-sp-3) 0;
}
.breadcrumb a { color: var(--pcs-on-surface-variant); }

/* --- 記事一覧のカード -------------------------------------------
   構造: a.entry-card-wrap > article.entry-card > (figure.thumb + div.content)
   flexは article 側に掛ける。 */

.entry-card-wrap,
.related-entry-card-wrap {
  background: var(--pcs-surface);
  border: 1px solid var(--pcs-outline-variant);
  border-radius: var(--pcs-radius);
  overflow: hidden;
  padding: 0;
  box-shadow: none;
  transition: border-color .12s ease;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  background: var(--pcs-surface);
  border-color: var(--pcs-primary-brand);
}

.entry-card, .related-entry-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
}

.entry-card-thumb,
.related-entry-card-thumb {
  float: none;                 /* flexアイテムなので効かないが、意図を明示しておく */
  flex: 0 0 300px;
  margin: 0;
  padding: 0;
  align-self: flex-start;
}
.entry-card-thumb img,
.related-entry-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

/* アイキャッチの左上にはロゴを入れてある。カテゴリーを重ねると隠れるので、
   画像の上には何も乗せず、下のメタ行にテキストで出す。 */
.entry-card-thumb .cat-label,
.related-entry-card-thumb .cat-label { display: none; }

.entry-card-content,
.related-entry-card-content {
  /* margin は 0 にしない。Cocoonが float 回避に使っている値を潰さないため。
     flex化したので左マージンは不要だが、明示的に left だけ 0 にする。 */
  margin-left: 0;
  flex: 1 1 auto;
  min-width: 0;                /* これが無いと長いタイトルでカードが横に伸びる */
  padding: var(--pcs-sp-4) var(--pcs-sp-5);
}

.entry-card-title,
.related-entry-card-title {
  font-size: 1.04em;
  font-weight: 700;
  line-height: 1.55;
  color: var(--pcs-on-surface);
  margin: 0 0 var(--pcs-sp-2);
}
.entry-card-snippet {
  font-size: 0.87em;
  line-height: 1.8;
  color: var(--pcs-on-surface-variant);
  margin: 0;
}

/* メタ行。カテゴリーと日付を並べる */
.entry-card-meta, .related-entry-card-meta {
  display: flex;
  align-items: center;
  gap: var(--pcs-sp-3);
  margin-top: var(--pcs-sp-3);
  font-size: 0.76em;
  color: var(--pcs-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.entry-card-categorys { display: block !important; }
.entry-category {
  display: inline-block;
  background: var(--pcs-primary-container);
  color: var(--pcs-primary);
  border: 1px solid var(--pcs-primary-brand);
  border-radius: 4px;
  font-size: 0.95em;
  font-weight: 700;
  padding: 1px 8px;
  line-height: 1.7;
}
.entry-card-info { margin: 0; }
.post-date, .post-update, .date-tags {
  color: var(--pcs-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* 管理者だけに出るPV表示。読むものではないので小さく沈める */
.admin-pv {
  font-size: 0.72em;
  color: var(--pcs-on-surface-variant);
  opacity: .55;
  margin-top: var(--pcs-sp-2);
}

/* --- 記事ページのアイキャッチ --- */
.eye-catch img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: var(--pcs-radius);
}
.eye-catch-label { display: none; }

/* --- 本文中の画像 --- */
.entry-content figure.wp-block-image { margin-block: var(--pcs-sp-5); }
.entry-content .wp-block-image img {
  border-radius: var(--pcs-radius);
  border: 1px solid var(--pcs-outline-variant);
}
.entry-content .wp-element-caption,
.entry-content figcaption {
  font-size: 0.82em;
  line-height: 1.7;
  color: var(--pcs-on-surface-variant);
  margin-top: var(--pcs-sp-2);
  text-align: left;
}

/* --- サイドバー -------------------------------------------------
   ウィジェットの見出しは h2.wp-block-heading（20px）で入る。
   .sidebar h3 では当たらない。実際のDOMを見て選択子を決めた。 */
.sidebar { color: var(--pcs-on-surface); }
.widget-sidebar, .widget-sidebar-scroll {
  background: transparent;
  box-shadow: none;
  margin-bottom: var(--pcs-sp-6);
  padding: 0;
}
.widget-sidebar .wp-block-heading,
.widget-sidebar h2,
.widget-sidebar h3,
.widget-sidebar-title {
  font-size: 0.8rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pcs-on-surface-variant);
  background: none;
  border: none;
  border-bottom: 1px solid var(--pcs-outline-variant);
  padding: 0 0 var(--pcs-sp-2);
  margin: 0 0 var(--pcs-sp-3);
  text-align: left;
  position: relative;
}
/* 見出しの左下にアンバーの短い線。装飾ではなく「ここが区切り」の合図 */
.widget-sidebar .wp-block-heading::after,
.widget-sidebar h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 28px; height: 2px;
  background: var(--pcs-primary-brand);
}
.widget-sidebar ul { list-style: none; margin: 0; padding: 0; }
.widget-sidebar li { border-bottom: 1px solid var(--pcs-outline-variant); }
.widget-sidebar li:last-child { border-bottom: none; }
.widget-sidebar li a {
  display: block;
  padding: var(--pcs-sp-3) 0;
  font-size: 0.88em;
  line-height: 1.7;
  color: var(--pcs-on-surface);
  text-decoration: none;
}
.widget-sidebar li a:hover { color: var(--pcs-primary); }

/* --- 検索フォーム --- */
.wp-block-search__label { display: none; }
.wp-block-search__input {
  border: 1px solid var(--pcs-outline);
  border-radius: var(--pcs-radius) 0 0 var(--pcs-radius);
  background: var(--pcs-surface);
  color: var(--pcs-on-surface);
  padding: 0 var(--pcs-sp-3);
  height: 44px;                /* Apple 44 / Material 48 の重なり */
  font-size: 0.92em;
}
/* WordPressのブロック用スタイルは :root :where(.wp-element-button) で入っており、
   同じ詳細度だと後から読まれるあちらが勝つ。:root を足して1段上げる。 */
:root .wp-block-search__button,
:root .wp-element-button,
:root .wp-block-button__link {
  background: var(--pcs-primary-brand);
  color: #111827;
  border: none;
  border-radius: 0 var(--pcs-radius) var(--pcs-radius) 0;
  font-weight: 700;
  font-size: 0.88em;
  height: 44px;
  padding-inline: var(--pcs-sp-4);
  cursor: pointer;
}
:root .wp-block-search__button:hover { filter: brightness(1.08); }

/* --- フッター --- */
/* ヘッダーと同じインク色で上下を挟む。間の白が「読む場所」になる。 */
.footer {
  background: var(--pcs-ink);
  border-top: none;
  color: #9aa5b1;
  margin-top: var(--pcs-sp-7);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #ef4444 0%, #f59e0b 14%, #facc15 28%, #10b981 42%,
    #22d3ee 56%, #60a5fa 70%, #c084fc 84%, #ef4444 100%);
}
.footer a { color: #c7cdd6; }
.footer a:hover { color: var(--pcs-primary-brand); }
.footer-bottom-logo, .copyright, .footer .menu-footer a {
  font-size: 0.8em;
  color: #9aa5b1;
}

/* --- ページ送り --- */
.pagination .page-numbers {
  background: var(--pcs-surface);
  border: 1px solid var(--pcs-outline-variant);
  color: var(--pcs-on-surface);
  border-radius: var(--pcs-radius);
  min-width: 44px;
  min-height: 44px;
  line-height: 44px;
  font-variant-numeric: tabular-nums;
}
.pagination .page-numbers.current {
  background: var(--pcs-primary-brand);
  border-color: var(--pcs-primary-brand);
  color: #111827;
  font-weight: 700;
}

/* --- Cocoon の装飾を止める --- */
/* 影と枠を重ねると数字を読む邪魔になる。面と線だけで階層を作る。 */
.entry-card-wrap, .related-entry-card-wrap,
.widget-sidebar, .article, .main, .content {
  box-shadow: none;
}
.main, .content, .article { background: var(--pcs-surface); }

/* --- 狭い画面 --- */
@media (max-width: 680px) {
  .entry-card, .related-entry-card { flex-direction: column; }
  .entry-card-thumb, .related-entry-card-thumb { flex: 0 0 auto; width: 100%; }
  .entry-card-content, .related-entry-card-content {
    padding: var(--pcs-sp-3) var(--pcs-sp-4);
  }
  .entry-card-title { font-size: 0.98em; }
}


/* ============================================================
   8. 表の種類をクラスで指定する

   前は「ちょうど4列なら価格表」と列数から推測していたが、
   列が増えると壊れる。記事側でクラスを付けるようにしたので、そちらを正とする。
   （クラスの無い古い記事のために、7章までの列数による推測も残してある）
   ============================================================ */

/* --- 価格表: メーカー / モデル / 価格 / 最安との差 --- */
.entry-content .pcs-prices td:nth-child(3),
.entry-content .pcs-prices th:nth-child(3),
.entry-content .pcs-prices td:nth-child(4),
.entry-content .pcs-prices th:nth-child(4) {
  text-align: right;
  white-space: nowrap;
}

/* --- 価格の推移: 調査日 / 最安 / 最安のメーカー / 最高 / 差 --- */
/* 金額の列だけ右に揃える。日付とメーカー名は左のまま。 */
.entry-content .pcs-history td:nth-child(2),
.entry-content .pcs-history th:nth-child(2),
.entry-content .pcs-history td:nth-child(4),
.entry-content .pcs-history th:nth-child(4),
.entry-content .pcs-history td:nth-child(5),
.entry-content .pcs-history th:nth-child(5) {
  text-align: right;
  white-space: nowrap;
}
.entry-content .pcs-history td:nth-child(1),
.entry-content .pcs-history td:nth-child(3) { white-space: nowrap; }

/* 推移表の1行目は「最新の調査」であって「最安」ではない。
   価格表と同じ強調が付くと意味を取り違えるので、明示的に外す。 */
.entry-content .pcs-history tbody tr:first-child td {
  background: transparent;
  box-shadow: none;
}

/* Cocoonが .a-wrap / .border-element 側で枠線の色を持っていて、こちらの
   .entry-card-wrap（詳細度 0,1,0）では勝てなかった。クラスを2つ重ねて上げる。
   ライトなのに枠線だけダークの色が残る、という状態になっていた。 */
:root .entry-card-wrap.a-wrap,
:root .entry-card-wrap.border-element,
:root .related-entry-card-wrap.a-wrap,
:root .related-entry-card-wrap.border-element {
  border: 1px solid var(--pcs-outline-variant);
  border-radius: var(--pcs-radius);
  background: var(--pcs-surface);
}
:root .entry-card-wrap.a-wrap:hover,
:root .entry-card-wrap.border-element:hover,
:root .related-entry-card-wrap.a-wrap:hover,
:root .related-entry-card-wrap.border-element:hover {
  border-color: var(--pcs-primary-brand);
  background: var(--pcs-surface);
}


/* ============================================================
   10. 価格アラート（Webプッシュの購読ボックス）

   記事の最後に置く。Apple HIG の「操作要素を絞る」に従い、
   ボタンは1つだけ。ソーシャルボタンを並べたりしない。
   ============================================================ */

.pcs-alert {
  margin: var(--pcs-sp-7) 0 var(--pcs-sp-5);
  padding: var(--pcs-sp-5);
  border: 1px solid var(--pcs-outline-variant);
  border-left: 3px solid var(--pcs-primary-brand);
  border-radius: var(--pcs-radius);
  background: var(--pcs-surface-container);
}

.pcs-alert-lead {
  margin: 0 0 var(--pcs-sp-2);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pcs-on-surface);
}

.pcs-alert-desc {
  margin: 0 0 var(--pcs-sp-4);
  font-size: .85rem;
  line-height: 1.8;
  color: var(--pcs-on-surface-variant);
}

/* 44px は Apple のタップ領域の下限。Material は48dp。重なるほうを採った */
:root .pcs-alert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--pcs-sp-5);
  border: 0;
  border-radius: var(--pcs-radius);
  background: var(--pcs-primary-brand);
  color: #111827;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

:root .pcs-alert-btn:hover { background: var(--pcs-primary); color: #fff; }

/* 押せない状態を色だけに頼らない。文字が「〜できません」に変わる作りにしてある */
:root .pcs-alert-btn:disabled {
  opacity: .55;
  cursor: default;
  background: var(--pcs-outline);
  color: var(--pcs-on-surface-variant);
}

/* 購読済み。色を反転させて「もう入っている」ことを面で示す */
:root .pcs-alert-btn[data-on="1"] {
  background: transparent;
  border: 1px solid var(--pcs-primary-brand);
  color: var(--pcs-primary);
}

.pcs-alert-note {
  margin: var(--pcs-sp-3) 0 0;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--pcs-on-surface-variant);
}

@media (max-width: 480px) {
  .pcs-alert { padding: var(--pcs-sp-4); }
  :root .pcs-alert-btn { width: 100%; }
}