@charset "UTF-8";

/*
Theme Name: Cocoon Child
Template: cocoon-master
Description: Cocoon child theme.
*/

/* ============================================================================
   ガジェットコスト（site: gadget_telecom）Cocoon子テーマ CSS
   ----------------------------------------------------------------------------
   適用：`python engine\scripts\apply_theme_css.py --site gadget_telecom --apply --owner claude_code`
        （**このファイルがローカルの正**。管理画面側で直接編集したら必ずここへ書き戻す）

   読者は買い替え・乗り換えの直前で、金額を突き合わせて判断しようとしている人。
   だから「読ませる」より「確かめられる」ことを優先する。

     - 数字が縦に揃って読めること（tabular-nums を全面に効かせる）
     - 見出しで階層が分かること（線を重ねない。h2だけに1本）
     - 一覧が判断の入口になること（カードは装飾ではなく分類の表示）
     - 煽らない（赤を使わない・影を濃くしない・動きを付けない）

   色（`design\gadget_telecom\_marks\` のロゴ、アイキャッチ生成と同じ値を使う）
   ---------------------------------------------------------------------------
   地   #F7F8F9  わずかに青を含む紙色
   面   #FFFFFF  カード・表・本文の紙
   基調 #16324A  濃いインクブルー
   従   #4A5F73  補助のインク（メタ・注記）
   強調 #B5651D  銅色。見出しの線・選択状態・ロゴの下線だけに使う
   注意 #8C5A00  琥珀。不利益条件の注記（赤は使わない）
   罫線 #DDE3E8 / #C3CED8

   命名規則：このサイト固有のクラスは `gdc-` 接頭辞。
   ========================================================================= */

:root {
  --gdc-bg: #f7f8f9;
  --gdc-surface: #ffffff;
  --gdc-ink: #16324a;
  --gdc-ink-soft: #4a5f73;
  --gdc-ink-mute: #6b7d8d;
  --gdc-link: #0f5b8a;
  --gdc-accent: #b5651d;
  --gdc-accent-soft: #f3ece3;
  --gdc-caution: #8c5a00;
  --gdc-rule: #dde3e8;
  --gdc-rule-strong: #c3ced8;
  --gdc-tint: #eef2f5;
  --gdc-radius: 10px;
  --gdc-radius-sm: 4px;
  --gdc-shadow: 0 2px 10px rgba(22, 50, 74, 0.07);
  --gdc-measure: 44rem;
}

/* ---------------------------------------------------------------------------
   1. 地・書体・行長
   ------------------------------------------------------------------------ */
body {
  background-color: var(--gdc-bg);
  color: var(--gdc-ink);
}

body,
button,
input,
textarea,
select {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}

/* **数字は全面で等幅にする。** このサイトは金額・容量・速度の比較が目的で、
   桁がずれると本文中でも比較できない（表だけに掛けても足りない）。 */
body {
  font-variant-numeric: tabular-nums;
}

.entry-content {
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

/* 本文の行長を抑える。日本語で1行が長いと、条件の読み比べで行を見失う。
   表・図・カードは対象外（`.gdc-wide` を付けた要素は全幅のまま）。 */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote {
  max-width: var(--gdc-measure);
}

.entry-content p {
  margin: 0 0 1.5em;
}

.entry-content strong {
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   2. 見出し（線は h2 に1本だけ。h3・h4 は太さと色で分ける）
   ------------------------------------------------------------------------ */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: none;
  color: var(--gdc-ink);
  text-wrap: balance;
}

.entry-content h2 {
  position: relative;
  margin: 3.2em 0 1.1em;
  padding: 0 0 0 0.85em;
  font-size: 1.42em;
  line-height: 1.5;
  font-weight: 700;
}

.entry-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 999px;
  background: var(--gdc-accent);
}

.entry-content h3 {
  margin: 2.4em 0 0.9em;
  padding: 0;
  font-size: 1.16em;
  line-height: 1.6;
  font-weight: 700;
}

.entry-content h4 {
  margin: 2em 0 0.7em;
  padding: 0;
  font-size: 1.02em;
  font-weight: 700;
  color: var(--gdc-ink-soft);
}

/* ---------------------------------------------------------------------------
   3. 目次（Cocoon既定。判断の材料を先に見せる場所なので、控えめに整える）
   ------------------------------------------------------------------------ */
.entry-content .toc {
  max-width: var(--gdc-measure);
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius);
  background: var(--gdc-surface);
  padding: 1.1em 1.3em;
  font-size: 0.95em;
}

/* 目次は中央寄せにしない（見出しの一覧は左端が揃っていた方が拾い読みできる）。 */
.entry-content .toc.toc-center {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.entry-content .toc .toc-title {
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gdc-ink-soft);
}

.entry-content .toc a {
  color: var(--gdc-ink);
  text-decoration: none;
}

.entry-content .toc a:hover {
  color: var(--gdc-accent);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   4. 比較表（このサイトの主役）
   ------------------------------------------------------------------------ */
.entry-content table {
  width: 100%;
  border: 1px solid var(--gdc-rule);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--gdc-radius-sm);
  margin: 1.9em 0;
  font-size: 0.94em;
  line-height: 1.7;
  background: var(--gdc-surface);
}

.entry-content table th,
.entry-content table td {
  border-right: 1px solid var(--gdc-rule);
  border-bottom: 1px solid var(--gdc-rule);
  padding: 0.75em 0.95em;
  text-align: left;
  vertical-align: top;
}

.entry-content table tr:last-child th,
.entry-content table tr:last-child td {
  border-bottom: 0;
}

.entry-content table th:last-child,
.entry-content table td:last-child {
  border-right: 0;
}

.entry-content table th {
  background: var(--gdc-tint);
  color: var(--gdc-ink);
  font-weight: 700;
  white-space: nowrap;
}

.entry-content table tbody tr:nth-child(even) td {
  background: #fbfcfd;
}

/* 金額・数量の列は右寄せ（桁の比較は右揃えでないと読めない） */
.entry-content table td.gdc-num,
.entry-content table th.gdc-num {
  text-align: right;
  white-space: nowrap;
}

/* **スマホでは表だけを横に流す。** 折り返すと桁が崩れて比較できない。 */
.entry-content .gdc-table-scroll,
.entry-content figure.wp-block-table,
.entry-content .scrollable-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
   5. 箇条書き（確認手順が多いサイトなので、行間と記号を整える）
   ------------------------------------------------------------------------ */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.6em;
  padding-left: 1.4em;
}

.entry-content li {
  margin-bottom: 0.5em;
}

.entry-content ul > li::marker {
  color: var(--gdc-rule-strong);
}

.entry-content ol > li::marker {
  color: var(--gdc-ink-soft);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   6. 条件分岐ブロック（「この条件ならA、対象外ならB」）
   ------------------------------------------------------------------------ */
.gdc-branch {
  max-width: var(--gdc-measure);
  background: var(--gdc-surface);
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius);
  padding: 1.2em 1.3em;
  margin: 2em 0;
}

.gdc-branch > .gdc-branch-label {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gdc-ink-soft);
  border: 1px solid var(--gdc-rule-strong);
  border-radius: 999px;
  padding: 0.15em 0.8em;
  margin-bottom: 0.9em;
}

.gdc-branch dl {
  margin: 0;
}

.gdc-branch dt {
  font-weight: 700;
  color: var(--gdc-ink);
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--gdc-rule);
}

.gdc-branch dt:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.gdc-branch dd {
  margin: 0.25em 0 0;
  color: var(--gdc-ink-soft);
}

/* ---------------------------------------------------------------------------
   7. 注記（不利益条件は赤ではなく琥珀で示す）
   ------------------------------------------------------------------------ */
.gdc-caution {
  max-width: var(--gdc-measure);
  background: #fdf8ef;
  border: 1px solid #ecdcbe;
  border-left: 4px solid var(--gdc-caution);
  border-radius: 0 var(--gdc-radius-sm) var(--gdc-radius-sm) 0;
  padding: 1em 1.2em;
  margin: 1.8em 0;
  color: #5c4a2a;
}

.gdc-caution strong {
  color: var(--gdc-caution);
}

/* ---------------------------------------------------------------------------
   8. 出典・注記行
   ------------------------------------------------------------------------ */
.gdc-source,
.entry-content h2 + ul.gdc-source-list {
  font-size: 0.88em;
  color: var(--gdc-ink-soft);
  line-height: 1.8;
}

.gdc-observed-at {
  display: inline-block;
  font-size: 0.82em;
  color: var(--gdc-ink-soft);
  background: var(--gdc-tint);
  border-radius: var(--gdc-radius-sm);
  padding: 0.1em 0.6em;
  margin-left: 0.4em;
}

/* 広告表示（H1直下の1行）。読み飛ばせる位置に埋めないが、煽りもしない。 */
.entry-content > p:first-child small,
.gdc-disclosure {
  display: block;
  font-size: 0.8em;
  color: var(--gdc-ink-mute);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   9. リンクとCTA
   ------------------------------------------------------------------------ */
.entry-content a {
  color: var(--gdc-link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

.entry-content a:hover {
  color: var(--gdc-accent);
}

.gdc-cta {
  max-width: var(--gdc-measure);
  background: var(--gdc-surface);
  border: 1px solid var(--gdc-rule-strong);
  border-radius: var(--gdc-radius);
  padding: 1.3em 1.4em;
  margin: 2.2em 0;
}

.gdc-cta .gdc-cta-button {
  display: inline-block;
  background: var(--gdc-ink);
  color: #fff;
  border-radius: var(--gdc-radius-sm);
  padding: 0.75em 1.7em;
  text-decoration: none;
  font-weight: 700;
}

.gdc-cta .gdc-cta-button:hover {
  background: #0f2537;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   10. 記事ヘッダー（タイトル・カテゴリ・日付）
   ------------------------------------------------------------------------ */
.entry-title,
.article h1.entry-title {
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--gdc-ink);
  margin-bottom: 0.7em;
}

.date-tags,
.entry-categories-tags {
  font-size: 0.82em;
  color: var(--gdc-ink-mute);
}

.cat-link,
.entry-categories a {
  background: var(--gdc-tint);
  border: 1px solid var(--gdc-rule);
  border-radius: 999px;
  color: var(--gdc-ink-soft);
  font-size: 0.92em;
  padding: 0.15em 0.85em;
  text-decoration: none;
}

.cat-link:hover,
.entry-categories a:hover {
  border-color: var(--gdc-accent);
  color: var(--gdc-accent);
}

.eye-catch {
  border-radius: var(--gdc-radius);
  overflow: hidden;
  border: 1px solid var(--gdc-rule);
}

/* ---------------------------------------------------------------------------
   11. 一覧のカード（トップ・カテゴリ・関連記事）
   ----------------------------------------------------------------------------
   一覧は「読み物の棚」ではなく**判断の入口**。カテゴリ・タイトル・要約が
   同じ形で並ぶことを優先し、影と角丸は最小限にする。
   ------------------------------------------------------------------------ */
/* 記事一覧は2列のグリッド。アイキャッチがイラストになったので、横並びの小さなサムネより
   絵が読める大きさで並べたほうが「何の記事か」が早く分かる。

   **対象はトップ・カテゴリ・タグ・検索結果の一覧だけに絞る。** `.list` はCocoonが
   複数の文脈で使うクラスなので、無条件にgrid化すると関連記事など別の並びまで
   作り替えてしまう（2026-08-11・別担当レビュー指摘）。 */
@media screen and (min-width: 835px) {
  body.home .list,
  body.archive .list,
  body.search .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }

  body.home .list .entry-card-wrap,
  body.archive .list .entry-card-wrap,
  body.search .list .entry-card-wrap {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  body.home .list .entry-card-thumb,
  body.archive .list .entry-card-thumb,
  body.search .list .entry-card-thumb {
    float: none;
    width: 100%;
    margin: 0;
  }

  body.home .list .entry-card-content,
  body.archive .list .entry-card-content,
  body.search .list .entry-card-content {
    margin: 0;
    padding: 1rem 1.1rem 1.2rem;
  }
}

.list .entry-card-wrap,
.list .related-entry-card-wrap {
  background: var(--gdc-surface);
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.list .entry-card-wrap:hover,
.list .related-entry-card-wrap:hover {
  border-color: var(--gdc-rule-strong);
  box-shadow: var(--gdc-shadow);
  background: var(--gdc-surface);
}

.entry-card-thumb img,
.related-entry-card-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
  background: var(--gdc-tint);
}

.entry-card-title,
.related-entry-card-title {
  color: var(--gdc-ink);
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 700;
}

.entry-card-snippet,
.related-entry-card-snippet {
  color: var(--gdc-ink-soft);
  font-size: 0.86rem;
  line-height: 1.75;
}

.entry-card-info,
.entry-card-meta {
  color: var(--gdc-ink-mute);
  font-size: 0.76rem;
}

/* カード上のカテゴリラベル（Cocoonの `.cat-label`）は**出さない**。
   アイキャッチの左上に「ガジェットコスト｜〔カテゴリ〕」が入っているので、
   同じ位置に黒い札を重ねると自分のブランド行を隠してしまう（実機の一覧で確認）。 */
.list .cat-label,
.related-entry-card .cat-label,
.eye-catch .cat-label {
  display: none;
}

/* ---------------------------------------------------------------------------
   12. ヘッダー（ロゴマーク＋ワードマーク）
   ----------------------------------------------------------------------------
   ロゴは画像アップロードではなく、**CSSのdata URI（SVG）**で置く。
   同名上書きによるキャッシュ事故（AGENTS.md §4.6-10）が原理的に起きず、
   どの解像度でも輪郭が崩れない。マークの正は
   `design\gadget_telecom\_marks\gadgetcost-mark.svg`。
   ------------------------------------------------------------------------ */
.header-container,
#header {
  background: var(--gdc-surface);
  border-bottom: 1px solid var(--gdc-rule);
}

.header-container .tagline {
  order: 2;
  color: var(--gdc-ink-mute);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  margin-top: 0.3em;
}

.logo-header .site-name-text {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  color: var(--gdc-ink);
  /* 2026-08-12：PCで小さいという指摘（西森さん・実機PC）を受けて1.6倍へ。
     旧 clamp(1.35rem, 2.6vw, 1.7rem)＝上限27px。新は上限2.72rem＝約44px、
     マークは 1.5em で約66px。モバイル側（§21 max-width:834px）は据え置き。 */
  font-size: clamp(2.16rem, 4.2vw, 2.72rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.logo-header .site-name-text::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Crect x='36' y='8' width='48' height='68' rx='11' stroke='%2316324A' stroke-width='8.5'/%3E%3Cpath d='M52 62H68' stroke='%2316324A' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M16 100H104' stroke='%23B5651D' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.logo-header a,
.logo-header a:hover {
  text-decoration: none;
}

/* グローバルナビ */
.navi-in > ul > li > a {
  color: var(--gdc-ink);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navi-in > ul > li > a:hover {
  background: var(--gdc-tint);
  color: var(--gdc-accent);
}

.navi-in > ul > li.current-menu-item > a {
  box-shadow: inset 0 -3px 0 var(--gdc-accent);
}

/* ---------------------------------------------------------------------------
   12.5 記事まわりの部品（SNSボタン・パンくず・ページャ・関連記事の見出し）
   ----------------------------------------------------------------------------
   Cocoon既定のSNSボタンは各社のブランド色（黒・青・緑・赤）で並ぶ。**赤を使わない**
   という配色方針と正面から衝突し、記事の判断材料より目立つので、輪郭だけの無彩色にする。
   ------------------------------------------------------------------------ */
.sns-share a.sns-button,
.sns-follow a.sns-button,
.sns-share .snsbtns a,
.sns-follow .snsbtns a {
  background: var(--gdc-surface) !important;
  border: 1px solid var(--gdc-rule) !important;
  border-radius: var(--gdc-radius-sm);
  color: var(--gdc-ink-soft) !important;
  box-shadow: none;
}

.sns-share a.sns-button:hover,
.sns-follow a.sns-button:hover,
.sns-share .snsbtns a:hover,
.sns-follow .snsbtns a:hover {
  border-color: var(--gdc-rule-strong) !important;
  color: var(--gdc-accent) !important;
  background: var(--gdc-tint) !important;
}

.sns-share .snsbtns a .button-caption {
  font-size: 0.76rem;
}

.breadcrumb {
  color: var(--gdc-ink-mute);
  font-size: 0.78rem;
  padding: 0.6em 0;
}

.breadcrumb a {
  color: var(--gdc-ink-soft);
}

.pagination .page-numbers,
.pagination-next-link {
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius-sm);
  background: var(--gdc-surface);
  color: var(--gdc-ink);
}

.pagination .current {
  background: var(--gdc-ink);
  border-color: var(--gdc-ink);
  color: #fff;
}

.related-entry-heading,
.comment-title,
.article-footer .widget-entry-cards + h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gdc-ink-soft);
  border: 0;
  border-bottom: 1px solid var(--gdc-rule);
  padding-bottom: 0.5em;
}

/* ---------------------------------------------------------------------------
   13. サイドバー
   ------------------------------------------------------------------------ */
#sidebar .widget {
  background: var(--gdc-surface);
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius);
  padding: 1.1em 1.2em;
  margin-bottom: 1.4em;
}

#sidebar .widget-sidebar-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gdc-ink-soft);
  border: 0;
  border-bottom: 1px solid var(--gdc-rule);
  padding: 0 0 0.6em;
  margin: 0 0 0.8em;
  background: none;
}

#sidebar a {
  color: var(--gdc-ink);
  text-decoration: none;
}

#sidebar a:hover {
  color: var(--gdc-accent);
}

#sidebar li {
  line-height: 1.7;
  margin-bottom: 0.5em;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   14. フッター
   ------------------------------------------------------------------------ */
.footer {
  background: var(--gdc-ink);
  color: #cfd9e2;
  margin-top: 3.5rem;
}

.footer a {
  color: #e2ebf2;
  text-underline-offset: 0.18em;
}

.footer a:hover {
  color: #fff;
}

.footer .menu-footer li a {
  border: 0;
  font-size: 0.88rem;
}

.footer-bottom-logo .site-name-text,
.footer .logo-image {
  color: #fff;
  font-weight: 700;
}

.copyright {
  color: #9fb0be;
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   15. モバイル
   ------------------------------------------------------------------------ */
@media screen and (max-width: 834px) {
  .entry-content {
    font-size: 16px;
    line-height: 1.9;
  }

  .entry-content h2 {
    font-size: 1.24em;
    margin-top: 2.6em;
  }

  .entry-content h3 {
    font-size: 1.1em;
  }

  .entry-content table {
    font-size: 0.9em;
  }

  .entry-content table th {
    white-space: normal;
  }

  .logo-header .site-name-text {
    font-size: 1.24rem;
  }

  .header-container .tagline {
    font-size: 0.74rem;
  }

  .entry-title,
  .article h1.entry-title {
    font-size: 1.42rem;
  }
}

/* ---------------------------------------------------------------------------
   16. 物販カード（AUTO:product_card）
   ------------------------------------------------------------------------ */

/* 2026-08-30 追加。**このサイトには物販カードのCSSが1行も無かった。**
   `render_product_cards()` は 2026-07-29 から `.mmaw-product` を出しているが、
   当たるスタイルが無いので本番では枠も背景も無く、ボタンは Cocoon 既定の
   `.btn`（#333 の地に、リンク色の青文字）を拾って **地と文字のコントラストが
   足りない小さな箱**になっていた（2026-08-30 に本番のDOMで実測）。
   西森さんの指摘「購入リンクの出し方ももっときれいにわかりやすく出してほしい」は
   ここが原因。

   **他媒体の実測を踏まえる**（同日・マクリン `makuring.jp` のDOMを計測）。
   ガジェット系の商品リンクは Rinker 系プラグインの形が標準で、共通するのは
   次の3点だった——カードを枠で本文から切り離す／ボタンはモール別の色で**塗り**、
   白文字・太字で高さ46px前後／ボタンは横並び。ここではその3点を
   このサイトのトークン（`--gdc-*`）で組み直す。色そのものは真似ない。

   **構造は3層で、役割が違う。**
     `__intro`   こちらが書いた紹介（表示名・説明）＝読者が最初に読む主役
     `__rakuten` 楽天APIの原文（画像・商品名・店名・レビュー）＝典拠として従属
     `__actions` ボタン行
   楽天の商品名は原文のまま出す決まりで、実物は40〜80字と長い。ここを主役の級数で
   出すと紹介文が負けるので、**原文は小さく落として `__intro` を主役にする**。

   画像は128px固定（楽天ウェブサービス規約 第10条(7)＝`?_ex=` を書き換えない）。
   器の側を128pxに合わせ、拡大せず余白で見せる。 */

.entry-content .mmaw-product {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--gdc-surface);
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius);
  box-shadow: var(--gdc-shadow);
}

/* --- 紹介（こちらの言葉）------------------------------------------------ */
.mmaw-product__intro {
  margin-bottom: 1rem;
}

.entry-content .mmaw-product__title {
  margin: 0 0 0.45rem;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--gdc-ink);
}

.entry-content .mmaw-product__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--gdc-ink-soft);
}

/* 関係の申告（「愛用」「提供」等）は事実の申告なので、説明文と混ぜず前に出す。 */
.entry-content .mmaw-product__relation {
  margin: 0 0 0.45rem;
  padding: 0.15rem 0.5rem;
  display: inline-block;
  font-size: 0.78rem;
  color: var(--gdc-caution);
  background: var(--gdc-accent-soft);
  border-radius: var(--gdc-radius-sm);
}

.entry-content .mmaw-product__evidence {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
}

/* --- 楽天区画（原文データ・典拠）---------------------------------------- */
/* 面を一段沈めて「ここから先は楽天の原文」と分かるようにする。
   この中に楽天以外へのリンクを入れないのは render 側の責務（RULE-035）。 */
.mmaw-product__rakuten {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.9rem;
  background: var(--gdc-tint);
  border-radius: var(--gdc-radius-sm);
}

/* Markdown→HTMLの変換で、サムネ直後に空の `<p></p>` が1つ入る（本番で6件とも実測）。
   flexアイテムとして数えられ、gapが1つ余分に空くので畳む。 */
.mmaw-product__rakuten > p:empty {
  display: none;
}

.mmaw-product__thumb {
  flex: 0 0 128px;
  line-height: 0;
}

.mmaw-product__thumb img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius-sm);
}

.mmaw-product__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* 楽天の原文商品名。長いので級数を落として典拠の扱いにする。 */
.entry-content .mmaw-product__name {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--gdc-ink-mute);
}

.entry-content .mmaw-product__meta,
.entry-content .mmaw-product__review {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--gdc-ink-mute);
  font-variant-numeric: tabular-nums;
}

/* --- ボタン行 ------------------------------------------------------------ */
/* 等幅グリッドなので、モールが1つでも2つでも左端が揃い、商品名の行数で位置が動かない。 */
.mmaw-product__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

/* `.btn` は Cocoon 側にも定義があるので、`.entry-content` を足して詳細度で上回る。
   色は `!important` を付ける——Cocoonのリンク色プリセットが `a` に効くため。 */
.entry-content .mmaw-product__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none !important;
  border: 0;
  border-radius: var(--gdc-radius-sm);
  transition: filter 0.15s ease;
}

.entry-content .mmaw-product__btn:hover {
  filter: brightness(1.08);
  text-decoration: none !important;
}

/* 楽天は公式の赤（#BF0000）。白文字とのコントラストは 7.4:1 で AA を満たす。
   ロゴ画像は使わず色と文字だけにする（楽天ウェブサービス規約 第13条の
   クレジット表示は `.mmaw-credit` が別に出す）。 */
.entry-content .mmaw-product__btn.is-rakuten {
  background: #bf0000;
  color: #ffffff !important;
}

/* Amazonは想起色のオレンジ（2026-07-29 西森指示・kakutogiと同じ）。
   **文字は黒**——オレンジ地に白文字はコントラスト 2.1:1 で読めない。黒なら 10:1。
   Amazonのロゴ画像は使わない（商標ガイドライン第4条＝提供された商標画像の改変禁止）。 */
.entry-content .mmaw-product__btn.is-amazon {
  background: #ff9900;
  color: #0f1111 !important;
}

/* --- 記事末尾のまとめ表（AUTO:product_summary）---------------------------- */
/* 本文の各セクションに置いたカードは「読み進めた人」に効く。この表は
   **読み終えてから見比べて決める人**に効く。

   列は「画像｜商品｜特徴｜評価｜購入先」（2026-08-30 西森指示
   「特徴や口コミ数、★表示とか、性能比較含めた表にすべきじゃないの？」
   「名前のすぐ右に於くのはいいかもやけどそれだけだと買わない」
   「できればここにも画像入れた方がいい」）。

   PCでは5列の表、スマホでは**行をカードに組み替える**。5列を375pxへ押し込むと
   どの列も読めなくなり、横スクロールにすると購入先が画面の外へ出る。 */
.mmaw-summary {
  margin: 2rem 0;
  overflow-x: auto;
}

/* **列幅は固定で配る。** 自動レイアウトのままだと、楽天の商品名（40〜80字）と
   特徴の文が列を押し広げ、表が本文幅（800px）を超えて器の中で横スクロールになる。
   同時に画像列が圧縮され、72px指定の画像が28pxまで潰れた（2026-08-30 実測）。 */
.entry-content .mmaw-summary__table {
  table-layout: fixed;
}

/* 画像列。楽天の128px画像を器だけ72pxに縮めて出す（URLは書き換えない）。
   **列幅は72px＋左右padding（28.8px）＋余白**を確保する。テーマの
   `img{max-width:100%}` が効くので、列が狭いと画像がそこまで縮む
   （88pxにしたら59pxまで潰れた・2026-08-30 実測）。 */
.entry-content .mmaw-summary__img {
  width: 108px;
  text-align: center;
}

.entry-content .mmaw-summary__table thead th:nth-child(2) {
  width: 24%;
}

.entry-content .mmaw-summary__table thead th:nth-child(4) {
  width: 100px;
}

.entry-content .mmaw-summary__table thead th:nth-child(5) {
  width: 160px;
}

.mmaw-summary__thumb {
  display: inline-block;
  line-height: 0;
}

.mmaw-summary__thumb img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius-sm);
}

/* 特徴列。幅指定を持たない唯一の列＝残りをここが取る（比較の主役なので）。 */
.entry-content .mmaw-summary__feature {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--gdc-ink-soft);
}

/* 商品名は `display_name` が無いと楽天の原文（40〜80字）が入る。**切らない**
   （規約 第10条(7)の改変に当たりうる）ので、折り返しで受ける。 */
.entry-content .mmaw-summary__name,
.entry-content .mmaw-summary__feature {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 評価列。数字が縦に揃うよう等幅の数字を使う。 */
.entry-content .mmaw-summary__review {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mmaw-summary__star {
  font-weight: 700;
  color: var(--gdc-accent);
}

.mmaw-summary__count {
  font-size: 0.8rem;
  color: var(--gdc-ink-mute);
}

.entry-content .mmaw-summary__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.entry-content .mmaw-summary__table th,
.entry-content .mmaw-summary__table td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--gdc-rule);
  text-align: left;
  vertical-align: middle;
}

.entry-content .mmaw-summary__table thead th {
  background: var(--gdc-tint);
  border-bottom: 2px solid var(--gdc-rule-strong);
  font-size: 0.85rem;
  color: var(--gdc-ink-soft);
}

/* **ゼブラ（偶数行の色替え）を止める。** Cocoonが `tbody tr:nth-child(2n)` に
   薄い背景を当てており、比較表では商品ごとに地色が変わって読みにくい。
   スマホのカード表示では「2枚目だけ灰色の帯」に見えていた（2026-08-30 実測）。 */
.entry-content .mmaw-summary__table tbody tr,
.entry-content .mmaw-summary__table tbody tr:nth-child(2n),
.entry-content .mmaw-summary__table tbody tr:nth-child(2n) td,
.entry-content .mmaw-summary__table tbody tr:nth-child(2n) th {
  background: var(--gdc-surface);
}

.entry-content .mmaw-summary__name {
  font-weight: 700;
  line-height: 1.6;
  color: var(--gdc-ink);
}

.mmaw-summary__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  white-space: nowrap;
}

/* 表の中なので、カードのボタンより一回り小さく。色は同じ体系で揃える。 */
.entry-content .mmaw-summary__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: var(--gdc-radius-sm);
  transition: filter 0.15s ease;
}

.entry-content .mmaw-summary__link:hover {
  filter: brightness(1.08);
  text-decoration: none !important;
}

.entry-content .mmaw-summary__link.is-rakuten {
  background: #bf0000;
  color: #ffffff !important;
}

.entry-content .mmaw-summary__link.is-amazon {
  background: #ff9900;
  color: #0f1111 !important;
}

/* --- 表示義務（ステマ表示・楽天クレジット）-------------------------------- */
/* 控えめだが消さない。カード直後に続くので、上の余白だけ詰める。 */
.entry-content .mmaw-credit,
.entry-content .mmaw-disclosure--amazon {
  margin: 0.6rem 0 1.5rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--gdc-ink-mute);
}

/* --- モバイル ------------------------------------------------------------ */
@media screen and (max-width: 480px) {
  .entry-content .mmaw-product {
    padding: 1rem;
  }

  .mmaw-product__rakuten {
    gap: 0.75rem;
    padding: 0.7rem;
  }

  .mmaw-product__thumb {
    flex-basis: 96px;
  }

  .mmaw-product__thumb img {
    width: 96px;
    height: 96px;
  }

  /* 幅が足りないので1列に落とす（auto-fitのminmaxだけだと横に潰れる）。 */
  .mmaw-product__actions {
    grid-template-columns: 1fr;
  }

  /* **まとめ表は5列を押し込まず、1行を1枚のカードへ組み替える。**
     375pxに5列を入れるとどの列も読めず、横スクロールにすると購入先が画面外へ出る。
     `display:block` で表の骨を外し、画像を左に浮かせて情報を右へ回す。 */
  .mmaw-summary {
    overflow-x: visible;
  }

  /* カードに組み替えるので、PCで入れた固定レイアウトと列幅は解除する。 */
  .entry-content .mmaw-summary__table {
    table-layout: auto;
  }

  .entry-content .mmaw-summary__table,
  .entry-content .mmaw-summary__table tbody,
  .entry-content .mmaw-summary__table tr,
  .entry-content .mmaw-summary__table td,
  .entry-content .mmaw-summary__table th {
    display: block;
    width: auto;
  }

  /* 見出し行は読み上げには要るが、カード形では意味を持たないので隠す。 */
  .entry-content .mmaw-summary__table thead {
    display: none;
  }

  .entry-content .mmaw-summary__table tr {
    position: relative;
    margin-bottom: 1rem;
    padding: 0.9rem 0.9rem 0.9rem 5.6rem;
    min-height: 88px;
    background: var(--gdc-surface);
    border: 1px solid var(--gdc-rule);
    border-radius: var(--gdc-radius);
  }

  /* **枠線は4辺すべて外す。** `border-bottom` だけ消していたら、Cocoon側の
     `border-top` が残ってセルごとに横罫が走った（2026-08-30 実測）。
     商品名セルの背景も、th に付く既定のグレー（rgb(238,242,245)）を明示的に消す
     ——カードの中で1行だけ帯になる。 */
  .entry-content .mmaw-summary__table td,
  .entry-content .mmaw-summary__table th {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }

  /* 画像は左上へ絶対配置。行の左padding（5.6rem）がその居場所。 */
  .entry-content .mmaw-summary__img {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    width: 72px;
  }

  .entry-content .mmaw-summary__name {
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
  }

  .entry-content .mmaw-summary__feature {
    margin-bottom: 0.35rem;
    min-width: 0;
    font-size: 0.82rem;
  }

  .entry-content .mmaw-summary__review {
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
  }

  /* カード表示では列が縦に積まれるので、評価が「—」だけの行は
     意味を持たない記号が1つ浮いて見える。表と違って列を保つ必要も無いので畳む。 */
  .entry-content .mmaw-summary__review:has(> .mmaw-summary__count:only-child) {
    display: none;
  }

  /* ボタンは画像の下の空きへ回り込ませて、カードの全幅を使う。
     行の左padding（5.6rem）を打ち消す形で戻す。

     **`display:flex` をここで戻す。** 上の td 一括指定（`display:block`）に
     この器も巻き込まれ、ボタンが伸びずに左へ寄っていた（2026-08-30 実測）。
     セレクタは `td.mmaw-summary__links` まで書く——クラス1つ（0,1,0）では
     td 一括指定（0,3,1）に負けて効かない。 */
  .entry-content .mmaw-summary__table td.mmaw-summary__links {
    display: flex;
    margin-left: -4.7rem;
    margin-top: 0.2rem;
    flex-direction: row;
    gap: 0.5rem;
  }

  .entry-content .mmaw-summary__link {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   17. 一覧とトップの見え方（2026-08-30）
   ----------------------------------------------------------------------------
   西森さんの「サイトのデザインはどう？ 色とかも含めもっと魅力的にできひんかな？」
   に対して、本番を実機で見て出した5点。**新しい色は足していない。**
   決めてある `--gdc-accent`（#b5651d）が、ロゴの下線とH2の縦棒にしか出ておらず、
   一覧を1画面見ても紺とグレーの2色に見えていた——足りないのは色数ではなく、
   決めた色を使い切っていないことだった。
   ------------------------------------------------------------------------ */

/* --- ① トップの名乗り ------------------------------------------------------
   「元大手キャリア勤務のガジェットオタク」はこのサイトの一番強い属性なのに、
   ヘッダーで最も小さいグレー文字（0.8rem・ink-mute）だった。
   競合はどちらも信頼の根拠を大きく出している（マクリン「レビュー100件以上」＋
   ヒーロー、デジスタは運営者の顔写真とプロフィール）。
   **文言は変えずに、見せ方だけ変える。** */
.header-container .tagline {
  color: var(--gdc-ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  margin-top: 0.7em;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* トップだけ、もう一段大きくして名乗りとして立てる。 */
body.home .header-container .tagline {
  font-size: 1.05rem;
  color: var(--gdc-ink);
  padding-top: 0.7em;
  border-top: 2px solid var(--gdc-accent);
  display: inline-block;
}

/* --- ② 一覧カードに輪郭 ---------------------------------------------------
   区切りが余白だけで、一覧が平坦に見えていた（実測：border 0・shadow none）。
   影は薄く1枚だけ。角丸と罫線はサイトの既定トークンに合わせる。 */
.entry-card,
.related-entry-card {
  border: 1px solid var(--gdc-rule);
  border-radius: var(--gdc-radius);
  overflow: hidden;
  background: var(--gdc-surface);
  box-shadow: var(--gdc-shadow);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.entry-card:hover {
  border-color: var(--gdc-rule-strong);
  box-shadow: 0 4px 16px rgba(22, 50, 74, 0.11);
}

/* カードの中身は枠の内側へ入れる（サムネは全幅のまま）。 */
.entry-card .entry-card-content {
  padding: 0 1rem 0.9rem;
}

/* --- ③ 一覧タイトルを主役の大きさに --------------------------------------
   1.02rem（≒16px）で、サイドバーの文字とほぼ同じだった。一覧の主役なので上げる。 */
.entry-card-title {
  font-size: 1.15rem;
  line-height: 1.5;
}

/* --- ④ アクセントを実際に使う ---------------------------------------------
   カード上の `.cat-label` は出さない方針を変えない（アイキャッチ左上の
   ブランド行と重なるため・§11）。**本文側メタのカテゴリ**に色を置く。

   **器がCocoon側で `display:none` で、しかも親のメタ行が `position:absolute`
   （幅75px・右下に固定）だった**（2026-08-30 実測）。器を表示しただけでは
   その狭い箱の中に入り、本文と日付に重なる。

   メタ行ごと通常フローへ戻し、カードの最終行として日付とカテゴリを横に並べる。 */
.entry-card .entry-card-meta {
  position: static;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.7em;
  margin-top: 0.7em;
  padding-top: 0.6em;
  border-top: 1px solid var(--gdc-rule);
}

.entry-card .entry-card-info,
.entry-card .entry-card-categorys {
  display: block;
  margin: 0;
}

/* 日付は従。カテゴリより弱くする。 */
.entry-card .entry-card-info {
  color: var(--gdc-ink-mute);
  font-size: 0.76rem;
}

.entry-card-categorys .entry-category,
.entry-card-categorys a {
  display: inline-block;
  padding: 0.15em 0.6em;
  background: var(--gdc-accent-soft);
  color: var(--gdc-accent);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.entry-card-categorys a:hover {
  background: var(--gdc-accent);
  color: #fff;
}

/* ページャの現在地。紺の塗りだと他のUIと同化していたので、アクセントで示す。 */
.pagination .current {
  background: var(--gdc-accent);
  border-color: var(--gdc-accent);
}

.pagination .page-numbers:hover {
  border-color: var(--gdc-accent);
  color: var(--gdc-accent);
}

/* 「次のページ」も同じ体系に乗せる（いまは無地の枠だけで、押せると分からない）。 */
.pagination-next-link a,
a.pagination-next-link {
  border-color: var(--gdc-rule-strong);
  color: var(--gdc-ink);
}

.pagination-next-link a:hover,
a.pagination-next-link:hover {
  border-color: var(--gdc-accent);
  color: var(--gdc-accent);
}

/* --- ⑤ サイドバーの強弱 ---------------------------------------------------
   タグ・最近の投稿・カテゴリーが同じ見た目で3つ並び、優先順位が無かった。
   **カテゴリを主**（回遊の入口）、タグと最近の投稿を従にする。
   ウィジェットの並び順はCocoon側の設定なので、ここでは見出しの強さで差を付ける。 */
/* **見出しは `h2.wp-block-heading`**（2026-08-30 実測）。ウィジェットが
   ブロックエディタ製（`widget_block`）なので、Cocoon 既定の
   `.widget-sidebar-title` は出てこない。両方を対象にする。 */
#sidebar .widget-sidebar-title,
#sidebar .widget_block h2.wp-block-heading {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gdc-ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--gdc-rule-strong);
  padding: 0 0 0.6em;
  margin: 0 0 0.9em;
}

/* 見出しの左に短い縦棒。本文のH2と同じ体系で、サイドバーも「節」だと分かる。 */
#sidebar .widget-sidebar-title::before,
#sidebar .widget_block h2.wp-block-heading::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-right: 0.5em;
  vertical-align: -0.12em;
  background: var(--gdc-accent);
  border-radius: 2px;
}

/* サイドバーのリンクは、ホバーで色が変わるだけにする（下線は本文用）。 */
#sidebar .widget a:hover {
  color: var(--gdc-accent);
}