@charset "UTF-8";
/* ============================================================
   al-collabo article styles
   Cocoon 子テーマの style.css から @import する。

   設計の前提（2026-08-19 改訂）:
   - 背景色を持つブロック（面）は1つだけ。区切りは余白と細い罫線で作る。
     面が増えるとスマホで縦に連続してごちゃつき、結果どれも目立たなくなる。
   - 見出しに色付き左ボーダーを使わない。日本のブログテーマで最頻出の形なので、
     消すこと自体が差になる。階層はサイズ・ウェイト・余白と、h2の書体で作る。
   - Webフォントは読み込まない（配信管理を自走の障害にしないため）。
     代わりにOS標準搭載の中から、量産サイトで使われにくい順に積む。
   正本= al-collabo/docs/00_思想設計_2026-08-19.md
   ============================================================ */

:root {
  --alc-bg: #ffffff;
  --alc-text: #1b1e1d;
  --alc-text-sub: #56605e;
  --alc-text-faint: #667070;
  --alc-line: #e0e4e3;
  --alc-line-strong: #c4cbc9;
  --alc-rule: #1b1e1d;
  --alc-accent: #0f6e5c;
  --alc-warn: #8f4a16;
  --alc-warn-weak: #f7f0e8;
  --alc-measure: 42rem;

  /* Noto・メイリオを先頭に置かない。游ゴシック Medium → ヒラギノ の順。
     Windows の游ゴシックが細すぎる問題は Medium 指定で回避する */
  --alc-font: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Yu Gothic",
              "Hiragino Sans", "Hiragino Kaku Gothic ProN",
              "BIZ UDPGothic", system-ui, sans-serif;
  /* h2 のみ明朝。商業メディアの定番で、アフィサイトではまず使われない */
  --alc-font-h: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --alc-bg: #15191b;
    --alc-text: #e7ebea;
    --alc-text-sub: #a3aeab;
    --alc-text-faint: #8d9794;
    --alc-line: #2a3235;
    --alc-line-strong: #3c4548;
    --alc-rule: #e7ebea;
    --alc-accent: #58bfa7;
    --alc-warn: #e0a468;
    --alc-warn-weak: #241f18;
  }
}

/* ---- Cocoon 既定装飾の打ち消し ---------------------------- */
.entry-content .alc-body h2,
.entry-content .alc-body h3,
.entry-content .alc-body h4 {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.entry-content .alc-body h2 {
  font-family: var(--alc-font-h);
  font-size: 1.52em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
  margin: 3.6em 0 1.2em;
  color: var(--alc-text);
}
.entry-content .alc-body h3 {
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.6;
  margin: 2.6em 0 .8em;
  color: var(--alc-text);
}
.entry-content .alc-body h4 {
  font-size: .86em;
  font-weight: 700;
  letter-spacing: .07em;
  margin: 1.8em 0 .6em;
  color: var(--alc-text-sub);
}

/* ---- 本文 --------------------------------------------------- */
.alc-body {
  font-family: var(--alc-font);
  color: var(--alc-text);
  font-size: 1.03rem;
  line-height: 1.95;
  letter-spacing: .015em;
  font-feature-settings: "palt" 1;
}
.alc-body > * { max-width: var(--alc-measure); box-sizing: border-box; }
.alc-body > .alc-full { max-width: none; }
.alc-body *, .alc-body *::before, .alc-body *::after { box-sizing: border-box; }
.alc-body p { margin: 0 0 1.6em; }
.alc-body a { color: var(--alc-accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.alc-body strong { font-weight: 700; background: none; }
.alc-body ul, .alc-body ol { margin: 0 0 1.6em; padding-left: 1.3em; }
.alc-body li { margin: 0 0 .45em; line-height: 1.85; }
.alc-body table, .alc-rating, .alc-spec, .alc-num { font-variant-numeric: tabular-nums; }

/* ---- 調査時点（面にしない） --------------------------------- */
.alc-asof {
  margin: 0 0 2.4em;
  font-size: .8em;
  letter-spacing: .04em;
  color: var(--alc-text-faint);
}

/* ---- リード（面にしない・下罫線で締める） -------------------- */
.alc-lead {
  margin: 0 0 3em;
  padding: 0 0 1.6em;
  border-bottom: 1px solid var(--alc-line);
}
.alc-lead p { margin: 0 0 1em; font-size: 1.08em; line-height: 1.9; }
.alc-lead p:last-child { margin-bottom: 0; }
.alc-lead .alc-lead-label {
  display: block;
  margin-bottom: .9em;
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--alc-text-faint);
}

/* ---- ①客観仕様 --------------------------------------------- */
.alc-spec { margin: 0 0 1.4em; border-top: 1.5px solid var(--alc-rule); }
.alc-spec table { width: 100%; border-collapse: collapse; margin: 0; font-size: .95em; }
.alc-spec th, .alc-spec td {
  padding: .82em .2em;
  border-bottom: 1px solid var(--alc-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.75;
}
.alc-spec th {
  width: 30%;
  padding-right: 1.2em;
  font-weight: 500;
  color: var(--alc-text-sub);
  background: none;
}
.alc-spec td { color: var(--alc-text); }
.alc-spec .alc-unknown { color: var(--alc-text-faint); }

/* 結論の表。条件が主語なので左列を広く取る。面は増やさない */
.alc-conclusion th { width: 42%; font-weight: 700; color: var(--alc-text); }
.alc-conclusion td { color: var(--alc-text); }
@media screen and (max-width: 768px) { .alc-conclusion th { width: 46%; } }

/* ---- ②ブランド価値・生産背景 -------------------------------- */
.alc-background { margin: 0 0 1.4em; }
.alc-background blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 1.3em;
  border-left: 2px solid var(--alc-line-strong);
  background: none;
  color: var(--alc-text-sub);
  font-size: .96em;
}

/* ---- ③評価データの分布 -------------------------------------- */
.alc-rating { margin: 0 0 1.4em; }
.alc-rating-head {
  display: flex;
  align-items: baseline;
  gap: .5em;
  flex-wrap: wrap;
  margin-bottom: 1.2em;
}
.alc-rating-avg { font-size: 2.4em; font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.alc-rating-scale { font-size: .92em; color: var(--alc-text-faint); }
.alc-rating-n { font-size: .84em; color: var(--alc-text-faint); margin-left: auto; letter-spacing: .03em; }

.alc-bars { display: grid; gap: .5em; margin: 0 0 1.4em; }
.alc-bar { display: grid; grid-template-columns: 2.4em 1fr 3.8em; align-items: center; gap: .8em; }
.alc-bar > p:not([class]) { display: none; }
.alc-bar-label { grid-column: 1; font-size: .84em; color: var(--alc-text-faint); text-align: right; }
.alc-bar-track { grid-column: 2; min-width: 0; }
.alc-bar-val { grid-column: 3; }
.alc-bar-track { height: .5em; background: var(--alc-line); }
.alc-bar-fill { display: block; height: 100%; background: var(--alc-text-sub); }
.alc-bar-val { font-size: .82em; color: var(--alc-text-faint); text-align: right; }

/* 一覧グラフ。製品名を左に置くので列幅が上のバーとは別 */
.alc-bars .alc-bar { grid-template-columns: minmax(7em, 13em) 1fr 5.4em; }
.alc-bar-name { grid-column: 1; font-size: .84em; line-height: 1.5; color: var(--alc-text-sub); }
.alc-bar-hi .alc-bar-name { color: var(--alc-text); font-weight: 700; }
.alc-bar-hi .alc-bar-fill { background: var(--alc-accent); }
.alc-bar-hi .alc-bar-val { color: var(--alc-text); font-weight: 600; }
.alc-bar-tag { grid-column: 1 / -1; margin: -.2em 0 .3em; font-size: .78em; color: var(--alc-text-faint); }
@media (max-width: 480px) {
  .alc-bars .alc-bar { grid-template-columns: minmax(6em, 9em) 1fr 4.6em; gap: .5em; }
  .alc-bar-name { font-size: .78em; }
}

/* 商品ブロック。h3 は群あたり5件までなので目次が商品名で埋まらない */
.alc-prods { margin: 1.4em 0 0; }
.alc-prod { padding: 1.6em 0; border-bottom: 1px solid var(--alc-line); }
.alc-prod:first-child { border-top: 1.5px solid var(--alc-rule); }
.alc-prod h3 { margin: 0 0 .6em !important; font-size: 1.06em !important; line-height: 1.6 !important; }
.alc-prod-sub { margin: -.4em 0 .8em; font-size: .84em; color: var(--alc-text-faint); }
.alc-prod-verdict { margin: .2em 0 .8em; font-size: .95em; line-height: 1.9; }
/* 短所は許容範囲の補足とセットで置く。ここだけ枠で囲って読み飛ばさせない */
.alc-drawback {
  margin: 0 0 .9em; padding: .7em .9em; font-size: .87em; line-height: 1.8;
  border: 1px solid var(--alc-line-strong); color: var(--alc-text-sub);
}
.alc-drawback-label {
  display: block; font-size: .8em; font-weight: 700; letter-spacing: .06em;
  color: var(--alc-warn); margin: 0 0 .3em;
}
.alc-drawback p { margin: 0; }
.alc-cta-inline {
  margin: 1em 0 0; padding: .8em 1em; font-size: .92em; line-height: 1.8;
  background: var(--alc-warn-weak); border-left: 2px solid var(--alc-accent);
}

/* 唯一の面。ここだけ塗るから目に留まる */
.alc-complaints { margin: 1.8em 0 0; padding: 1.2em 1.3em; background: var(--alc-warn-weak); }
.alc-complaints-label {
  display: block; margin-bottom: .8em;
  font-size: .76em; font-weight: 700; letter-spacing: .1em; color: var(--alc-warn);
}
.alc-complaints ul { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.alc-complaints li {
  margin: 0; padding: .25em .85em;
  background: var(--alc-bg); border: 1px solid var(--alc-line-strong);
  font-size: .87em; color: var(--alc-text-sub);
}

/* ---- 誰に向くか / 向かないか（枠を持たせない） --------------- */
.alc-verdict {
  display: grid; gap: 1.8em;
  margin: 3em 0;
  padding: 1.6em 0;
  border-top: 1px solid var(--alc-line);
  border-bottom: 1px solid var(--alc-line);
}
@media (min-width: 700px) { .alc-verdict { grid-template-columns: 1fr 1fr; gap: 2.4em; } }
.alc-verdict > div { background: none; padding: 0; }
.alc-verdict h4 { margin: 0 0 .8em; }
.alc-verdict-fit h4 { color: var(--alc-accent); }
.alc-verdict-unfit h4 { color: var(--alc-warn); }
.alc-verdict ul { margin: 0; padding-left: 1.15em; }
.alc-verdict li { font-size: .94em; line-height: 1.8; color: var(--alc-text-sub); }

/* ---- 出典 --------------------------------------------------- */
.alc-source { margin: 0 0 2.6em; font-size: .78em; line-height: 1.7; color: var(--alc-text-faint); letter-spacing: .02em; }
.alc-source a { color: var(--alc-text-sub); }
.alc-sources { margin: 3.4em 0 0; padding-top: 1.5em; border-top: 1px solid var(--alc-line); }
.alc-sources h2 {
  font-family: var(--alc-font) !important;
  font-size: .76em !important; font-weight: 700 !important;
  letter-spacing: .1em !important;
  margin: 0 0 1em !important; color: var(--alc-text-faint) !important;
}
.alc-sources ol { font-size: .82em; line-height: 1.85; color: var(--alc-text-sub); padding-left: 1.4em; }
.alc-sources li { margin-bottom: .5em; }

/* ---- 商品リンク枠（上下罫線のみ） ---------------------------- */
.alc-buy { margin: 3em 0; padding: 1.6em 0; border-top: 1px solid var(--alc-line); border-bottom: 1px solid var(--alc-line); }
.alc-buy-note { margin: 1em 0 0; font-size: .78em; color: var(--alc-text-faint); line-height: 1.7; }

/* ---- 一覧（カード枠を持たせない） ---------------------------- */
.alc-cards { display: grid; gap: 0; margin: 2.4em 0; }
.alc-card { padding: 1.3em 0; border-bottom: 1px solid var(--alc-line); }
.alc-card:first-child { border-top: 1px solid var(--alc-line); }
.alc-card h3 { margin: 0 0 .4em !important; font-size: 1.02em !important; }
.alc-card p { margin: 0; font-size: .89em; color: var(--alc-text-sub); line-height: 1.75; }

/* ---- ランキング（面を持たせず罫線で刻む） -------------------- */
.alc-rank { list-style: none; margin: 2em 0; padding: 0; border-top: 1.5px solid var(--alc-rule); }
.alc-rank-item {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 1em;
  padding: 1.6em 0; border-bottom: 1px solid var(--alc-line);
}
/* 列を明示する。WordPress の wpautop が本文に空の <p> を差し込むため、
   自動配置に任せると本体が次の行の1列目（2.4em）へ落ちて潰れる。
   :empty では捕まらない（空白文字が入る）ので、クラスの無い直下の p を消す */
.alc-rank-item > p:not([class]) { display: none; }
.alc-rank-no { grid-column: 1; grid-row: 1; }
.alc-rank-body { grid-column: 2; grid-row: 1; min-width: 0; }
.alc-rank-no {
  font-size: 1.45em; font-weight: 700; line-height: 1.25;
  color: var(--alc-text-faint); font-variant-numeric: tabular-nums;
}
.alc-rank-body h3 { margin: 0 0 .55em !important; font-size: 1.04em !important; line-height: 1.6 !important; }
/* 一目で拾える特徴。読者は本文より先にここを見る */
.alc-badges { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 .9em; padding: 0; list-style: none; }
.alc-badge {
  font-size: .76em; line-height: 1.5; padding: .18em .7em;
  border: 1px solid var(--alc-line-strong); color: var(--alc-text-sub);
  letter-spacing: .02em; white-space: nowrap;
}
.alc-badge-strong { border-color: var(--alc-accent); color: var(--alc-accent); }
/* 買い時。価格の幅とクーポンは、順位より購入判断に効く */
.alc-timing {
  margin: .9em 0 0; padding: .7em .9em; font-size: .86em; line-height: 1.75;
  border-left: 2px solid var(--alc-accent); background: var(--alc-warn-weak);
  color: var(--alc-text-sub);
}
.alc-timing b { color: var(--alc-text); font-weight: 600; }
.alc-rank-praise { margin: 0 0 .7em; font-size: .87em; color: var(--alc-text-sub); line-height: 1.8; }
.alc-rank-rating { font-size: .84em; color: var(--alc-text-faint); margin: 0 0 .6em; letter-spacing: .02em; }
.alc-rank-rating b { color: var(--alc-text); font-weight: 600; font-size: 1.12em; }
.alc-rank-metric { display: flex; align-items: baseline; gap: .4em; margin: 0 0 .8em; }
.alc-rank-metric b { font-size: 1.85em; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.alc-rank-metric span { font-size: .8em; color: var(--alc-text-faint); letter-spacing: .02em; }
.alc-rank-facts {
  display: grid; grid-template-columns: auto 1fr; gap: .25em 1.1em;
  margin: 0 0 .8em; font-size: .87em; line-height: 1.7;
}
.alc-rank-facts dt { color: var(--alc-text-faint); white-space: nowrap; }
.alc-rank-facts dd { margin: 0; color: var(--alc-text); }
.alc-rank-note { margin: 0 0 .8em; font-size: .9em; color: var(--alc-text-sub); line-height: 1.8; }
.alc-rank-cta { margin: 0; font-size: .86em; }
/* Rinker のショートコードが展開される枠。プラグイン側の見た目に任せる */
.alc-rank-buy { margin: 1em 0 0; }
.alc-rank-buy .yyi-rinker-box { margin: 0; }
/* 画像が入っていない商品だけ枠を畳む（入っているものは出す） */
.yyi-rinker-contents .yyi-rinker-image:has(img[src=""]) { display: none; }
.yyi-rinker-contents .yyi-rinker-image img[src=""] { display: none; }
.alc-rank-cta a { margin-right: 1em; }

/* ---- 並べ替えタブ（JSなし・ラジオで切り替え） ---------------- */
.alc-tabs { margin: 2em 0; }
.alc-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.alc-tabs > label {
  display: inline-block; margin: 0 1.4em .2em 0; padding: .35em 0;
  font-size: .88em; color: var(--alc-text-faint);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.alc-tabs > input:checked + label { color: var(--alc-text); border-bottom-color: var(--alc-accent); font-weight: 700; }
.alc-tabs > input:focus-visible + label { outline: 2px solid var(--alc-accent); outline-offset: 3px; }
.alc-tab-panel { display: none; }
.alc-tabs > input:nth-of-type(1):checked ~ .alc-tab-panel:nth-of-type(1),
.alc-tabs > input:nth-of-type(2):checked ~ .alc-tab-panel:nth-of-type(2),
.alc-tabs > input:nth-of-type(3):checked ~ .alc-tab-panel:nth-of-type(3) { display: block; }

/* ---- 比較表（スマホでは表だけ横スクロール） ------------------ */
.alc-table-wrap { overflow-x: auto; margin: 2em 0; -webkit-overflow-scrolling: touch; }
.alc-table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .87em; }
.alc-table th, .alc-table td {
  padding: .72em .9em .72em 0; border-bottom: 1px solid var(--alc-line);
  text-align: left; line-height: 1.65; white-space: nowrap;
}
.alc-table thead th { border-bottom: 1.5px solid var(--alc-rule); font-weight: 600; color: var(--alc-text-sub); }
.alc-table td.alc-td-wrap { white-space: normal; min-width: 12rem; }
.alc-table-note { margin: .6em 0 0; font-size: .78em; color: var(--alc-text-faint); }

/* ---- 計算方法の開示（指標を自前で作る以上、定義を隠さない） ---- */
.alc-method { margin: 2em 0; padding: 1.2em 0; border-top: 1px solid var(--alc-line); border-bottom: 1px solid var(--alc-line); }
.alc-method summary { cursor: pointer; font-size: .86em; font-weight: 700; letter-spacing: .06em; color: var(--alc-text-sub); }
.alc-method summary::marker { color: var(--alc-text-faint); }
.alc-method-body { margin-top: 1em; font-size: .89em; line-height: 1.85; color: var(--alc-text-sub); }
.alc-method-body p { margin: 0 0 .9em; }
/* 塗らない。warn-weak を使うと不満点と同じ色になり、注意事項に見える */
.alc-method-body code {
  display: block; margin: .9em 0; padding: .6em 0 .6em 1em;
  background: none; border-left: 2px solid var(--alc-line-strong);
  font-size: .92em; line-height: 1.75;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
}

/* ---- FAQ ---------------------------------------------------- */
.alc-faq { margin: 2.4em 0; }
.alc-faq-item { padding: 1.2em 0; border-bottom: 1px solid var(--alc-line); }
.alc-faq-item:first-child { border-top: 1px solid var(--alc-line); }
.alc-faq-q { margin: 0 0 .5em; font-size: .98em; font-weight: 700; }
.alc-faq-a { margin: 0; font-size: .93em; color: var(--alc-text-sub); line-height: 1.85; }

/* ---- 価格帯セグメントの見出し --------------------------------- */
.alc-seg { margin: 3em 0 1.2em; padding-bottom: .5em; border-bottom: 1.5px solid var(--alc-rule); }
.alc-seg-range { display: block; font-size: .76em; font-weight: 700; letter-spacing: .1em; color: var(--alc-accent); margin-bottom: .3em; }
.alc-seg-title { display: block; font-family: var(--alc-font-h); font-size: 1.32em; font-weight: 600; line-height: 1.5; }

/* ---- レスポンシブ ------------------------------------------- */
@media screen and (max-width: 768px) {
  .alc-body { font-size: .99rem; line-height: 1.9; }
  .entry-content .alc-body h2 { font-size: 1.3em; margin: 2.8em 0 1em; }
  .entry-content .alc-body h3 { margin: 2.2em 0 .7em; }
  .alc-lead { margin-bottom: 2.4em; padding-bottom: 1.3em; }
  .alc-lead p { font-size: 1.04em; }
  .alc-spec th { width: 36%; padding-right: .8em; }
  .alc-bar { grid-template-columns: 2.1em 1fr 3.4em; gap: .6em; }
  .alc-rating-avg { font-size: 2.1em; }
  .alc-rating-n { margin-left: 0; width: 100%; }
  .alc-verdict { margin: 2.4em 0; gap: 1.5em; }
  .alc-source { margin-bottom: 2.2em; }
}
@media screen and (max-width: 480px) {
  .alc-spec table { font-size: .92em; }
  .alc-spec th, .alc-spec td { padding: .7em .1em; }
  .alc-complaints { padding: 1.1em 1em; }
}

/* ---- 印刷 --------------------------------------------------- */
@media print {
  .alc-buy, .alc-cards { display: none; }
  .alc-body { font-size: 10.5pt; line-height: 1.7; }
}

/* ---- 図（インラインSVG） -------------------------------------- */
.alc-fig { margin: 1.8em 0; padding: 0; }
.alc-fig svg { display: block; width: 100%; height: auto; }
.alc-fig figcaption {
  margin: .7em 0 0; font-size: .8em; line-height: 1.7; color: var(--alc-text-faint);
}
/* 図は本文の行長より広く見せたい。alc-body > * の max-width を外す */
.alc-body > .alc-fig { max-width: none; }
@media (max-width: 560px) {
  /* 狭い画面では文字が潰れるので、横スクロールさせて原寸を保つ。
     スクロールできることが分からないと切れた図だと思われるので、右端に影を出す */
  .alc-fig {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--alc-bg) 30%, transparent),
      linear-gradient(to left, var(--alc-bg) 30%, transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .alc-fig svg { min-width: 34rem; }
  .alc-fig figcaption::after { content: "（図は横にスクロールできます）"; }
}

/* ベネフィット。数字ではなく「それで何が変わるか」を並べる */
.alc-benefits { margin: 0 0 1em; padding: 0; list-style: none; }
.alc-benefits li {
  position: relative; padding-left: 1.5em; margin: 0 0 .4em;
  font-size: .92em; line-height: 1.85;
}
.alc-benefits li::before {
  content: ""; position: absolute; left: .3em; top: .82em;
  width: .5em; height: .5em; border-radius: 50%; background: var(--alc-accent);
}