/*
 * szx — SOUNDZOO の記事の動く部品の見た目（2026-11-02）
 * 本番のサイト（AFFINGER）に合わせる：文字はテーマのまま（Noto Sans JP・#333）、罫は表と同じ #D4D4D4、
 * 角は箱が6px・ボタンが3px、マーカーはサイトと同じ淡い黄色 #FFF9C4。
 * 色は design_SOUNDZOO の §3。コーラルは申し込みの導線に取っておき、部品では使わない
 * （条件に合う行の面だけ、推奨の淡コーラル #FCEEEC）。明るい表示だけ（暗い表示は作らない）
 */
.szx {
  --szx-ink: #3F3531;
  --szx-text: #333333;
  --szx-sub: #666666;
  --szx-faint: #A0A0A0;
  --szx-line: #D4D4D4;
  --szx-paper: #F4F0EB;
  --szx-card: #FFFFFF;
  --szx-pick: #FCEEEC;
  --szx-mark: #FFF9C4;
  --szx-off: #EDE8E1;
  --szx-focus: #3F3531;
  margin: 0 0 20px;
  color: var(--szx-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.8;
}
.szx p { margin: 0; }
/* 枠：本文の箱（会話・表・枠線の箱）と見分けがつき、どの記事でも同じ形で覚えてもらう。
   濃い茶の2pxの枠＋下の影＋見出しの帯（生成りの地と印）。h2（黒い帯）・h3（下線）とも別の形 */
.szx.is-on {
  padding: 0;
  background: var(--szx-card);
  border: 2px solid var(--szx-ink);
  border-radius: 10px;
  box-shadow: 0 4px 0 #E4DCD2;
}
.szx-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--szx-paper); border-bottom: 2px solid var(--szx-ink); border-radius: 8px 8px 0 0; }
.szx-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #FFFFFF; background: var(--szx-ink); border-radius: 8px; }
.szx-icon svg { display: block; }
.szx .szx-title { margin: 0; padding: 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--szx-ink); border: 0; }
.szx-body { padding: 4px 18px 18px; }
.szx .szx-q { margin: 18px 0 0; font-size: 16px; font-weight: 700; line-height: 1.6; }
/* 何のサービスの部品かを示すロゴ（data-logo）。白い地に高さを決めて置く。周りにロゴの高さの半分以上の余白（Spotify の決まり） */
.szx-logo { margin: 18px 0 0; height: 28px; line-height: 0; }
.szx .szx-logo img { display: block; width: auto !important; height: 28px !important; max-width: none; margin: 0 !important; }
.szx-logo + .szx-q { margin-top: 16px; }
/* 押せることを知らせる一言。目立たせず、ボタンのすぐ下に */
.szx .szx-hint { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--szx-sub); }
.szx-hint::before { content: ""; flex: none; width: 13px; height: 13px; border: 1.5px solid rgba(63,53,49,.45); border-radius: 50%; background: radial-gradient(circle, var(--szx-ink) 0 2.5px, transparent 3px); }
.szx-after { margin: 20px 0 0; }
.szx-after:empty { display: none; }
.szx-after > .szx-feats { margin-top: 0; }
.szx-ans {
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--szx-paper);
  border-radius: 3px;
  font-size: 15px;
  line-height: 1.85;
  min-height: 3.6em;
}
.szx .szx-ans strong { background: linear-gradient(transparent 70%, var(--szx-mark) 0%); font-weight: 700; color: var(--szx-text); }
.szx-ans .szx-small { display: block; margin-top: 4px; font-size: 13px; color: var(--szx-sub); }
.szx-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.szx .szx-row-label { width: 100%; margin: 4px 0 0; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--szx-sub); }
.szx-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  color: var(--szx-text);
  background: var(--szx-card);
  border: 1px solid var(--szx-line);
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--szx-line); /* 押せるボタンに見えるよう、下に薄い厚み（位置は動かさない） */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.szx-btn:hover { border-color: var(--szx-ink); }
.szx-btn:focus-visible { outline: 3px solid var(--szx-focus); outline-offset: 2px; }
.szx-btn[aria-pressed="true"] { color: #FFFFFF; background: var(--szx-ink); border-color: var(--szx-ink); box-shadow: 0 2px 0 #1F1916; }
.szx-step { display: flex; flex-direction: column; align-items: center; min-width: 4.6em; padding: 6px 10px; }
.szx-step-no { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.szx-step-name { font-size: 13.5px; font-weight: 700; }
.szx-step.is-next { border-color: var(--szx-ink); border-style: dashed; }
.szx-fallback-wrap { margin: 18px 0 0; }
.szx-fallback-wrap > summary { cursor: pointer; font-size: 13px; color: var(--szx-sub); }
.szx-fallback-wrap[open] > summary { margin-bottom: 8px; }

/* needs：条件で表の行を光らせる */
.szx-needs tr.szx-hit > *, .szx-pick tr.szx-hit > * { background: var(--szx-pick) !important; }
.szx-needs tr.szx-miss > *, .szx-pick tr.szx-miss > * { opacity: .38; }
.szx-needs tr.szx-best > *:first-child { box-shadow: inset 4px 0 0 var(--szx-ink); }
.szx-needs tr > * { transition: opacity .2s, background-color .2s; }
.szx-price-dim { opacity: .4; text-decoration: line-through; text-decoration-color: rgba(63,53,49,.5); }
.szx-badge { display: inline-block; margin: 0 0 0 6px; padding: 0 6px; font-size: 11.5px; font-weight: 700; line-height: 1.7; color: #FFFFFF; background: var(--szx-ink); border-radius: 3px; vertical-align: 1px; white-space: nowrap; }

/* ladder：段の図 */
.szx-stairs { display: grid; grid-template-columns: repeat(var(--szx-n, 4), 1fr); align-items: end; gap: 6px; height: 170px; margin: 14px 0 0; padding: 0 2px; }
.szx-stair { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; cursor: pointer; }
.szx-stair-track { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.szx-stair-bar { flex: 0 0 auto; background: var(--szx-off); border-radius: 4px 4px 0 0; transition: background-color .2s, height .25s; }
.szx-stair.is-past .szx-stair-bar { background: #D9D1C7; }
.szx-stair.is-on .szx-stair-bar { background: var(--szx-ink); }
.szx-stair-price { margin: 0 0 4px; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; color: var(--szx-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.szx-stair.is-on .szx-stair-price { color: var(--szx-ink); }
.szx-stair-name { flex: 0 0 auto; height: 2.7em; margin: 4px 0 0; overflow: hidden; font-size: 12.5px; font-weight: 700; line-height: 1.35; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.szx-feats { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--szx-line); }
.szx-feat { display: grid; grid-template-columns: 1.8em 1fr; column-gap: 8px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid var(--szx-line); font-size: 14px; }
.szx-feat-mark { font-weight: 700; text-align: center; }
.szx-feat-val { grid-column: 2; font-size: 12.5px; color: var(--szx-sub); }
.szx-feat.is-no { color: var(--szx-faint); }
.szx-feat.is-up .szx-feat-name::after { content: "増えた"; display: inline-block; margin-left: 8px; padding: 0 6px; font-size: 11.5px; font-weight: 700; line-height: 1.7; color: var(--szx-ink); background: var(--szx-mark); border-radius: 3px; white-space: nowrap; vertical-align: 1px; }

/* annual・compare：横の棒 */
.szx-bars { margin: 14px 0 0; }
.szx-bar { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 8px; margin: 0 0 8px; }
.szx-bar-name { font-size: 13px; font-weight: 700; line-height: 1.35; word-break: keep-all; } /* 「ファミリ／ー」と切れないよう、空白で折り返す */
/* 「ロゴ サービス名」（行に data-logo があるとき） */
.szx .szx-bar-name.has-logo { display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
/* テーマや本文の img の決まり（左右の余白を自動・高さを自動）に負けないよう、強く指定する */
.szx img.szx-bar-logo { flex: none; display: block; width: 20px !important; height: 20px !important; max-width: none; margin: 0 !important; border-radius: 4px; }
.szx-bar-text { min-width: 0; }
.szx-compare .szx-bar.has-logo { grid-template-columns: 13em 1fr; }
.szx-bar-track { position: relative; height: 26px; background: var(--szx-paper); border-radius: 3px; }
.szx-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; background: #CFC6BB; border-radius: 3px; transition: width .25s; }
.szx-bar.is-main .szx-bar-fill { background: var(--szx-ink); }
.szx-bar-val { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.szx-bar-val.is-in { color: #FFFFFF; }
.szx-bar.is-none .szx-bar-val { color: var(--szx-faint); font-weight: 400; }
.szx-bar-line { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--szx-ink); }
.szx-range { width: 100%; margin: 6px 0 0; accent-color: #3F3531; }
.szx-range-out { font-size: 14px; font-weight: 700; }
.szx-ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--szx-sub); }

/* discount：段を進むと下がる額。下がった分を黄色の斜線で残す */
.szx-dbar { display: grid; grid-template-columns: 9em 1fr 5.4em; align-items: center; gap: 8px; margin: 0 0 9px; }
.szx-dbar .szx-bar-fill { background: var(--szx-ink); transition: width .35s; }
.szx-dbar.is-same .szx-bar-fill { background: #CFC6BB; }
.szx-dbar-cut { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #FFF3A6 0 5px, #F0D66E 5px 9px); border-radius: 0 3px 3px 0; transition: left .35s, width .35s; }
.szx-dbar-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.szx-dbar-now { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.szx-dbar-off { min-height: 1.3em; font-size: 11.5px; font-weight: 700; white-space: nowrap; } /* 空の段でも高さを保つ（ボタンが動かない） */
.szx-dbar.is-down .szx-dbar-off { padding: 0 4px; background: var(--szx-mark); border-radius: 3px; }
.szx-dbar.is-same .szx-dbar-off { font-weight: 400; color: var(--szx-faint); }
.szx-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; font-size: 12px; color: var(--szx-sub); }
.szx-legend span::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.szx-legend-pay::before { background: var(--szx-ink); }
.szx-legend-cut::before { background: repeating-linear-gradient(135deg, #FFF3A6 0 4px, #F0D66E 4px 7px); }

/* campaign：年ごとの帯に開催を置く（高さは年の数で決まり、押しても変わらない） */
.szx-cal { display: block; margin: 14px 0 0; overflow: visible; }
.szx-cal-bar { transition: opacity .2s; }
.szx-cal-legend span::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.szx-cal-key-4::before { background: #3F3531; }
.szx-cal-key-3::before { background: #8C7F77; }
.szx-cal-key-2::before { background: #CFC6BB; box-shadow: inset 0 0 0 1px #8C7F77; }
.szx-cal-key-half::before { background: repeating-linear-gradient(135deg, #FFFFFF 0 2px, #8C7F77 2px 4px); box-shadow: inset 0 0 0 1px #8C7F77; }
.szx-cal-key-guess::before { background: transparent; box-shadow: none; outline: 1.5px dashed #3F3531; outline-offset: -1.5px; }
.szx-campaign tr.szx-miss > * { opacity: .38; }
.szx-campaign tr > * { transition: opacity .2s; }

@media (max-width: 480px) {
  .szx-dbar { grid-template-columns: 6.2em 1fr 4.9em; gap: 6px; }
  .szx-top { padding: 10px 12px; }
  .szx .szx-title { font-size: 16px; }
  .szx-body { padding: 2px 12px 14px; }
  .szx-bar { grid-template-columns: 6.2em 1fr; }
  .szx-compare .szx-bar.has-logo { grid-template-columns: 8.8em 1fr; }
  .szx-stairs { height: 150px; }
  .szx-stair-price { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .szx *, .szx *::before, .szx *::after { transition: none !important; }
}
/* 部品の末尾の申し込み（2026-11-03 CEO「すべての動く部品の末尾にCTA」）。答えを見た直後に、その答えに合う行き先を1つ。ボタンの色は申し込みの部品が持つ */
.szx-cta { margin: 0 18px 18px; padding-top: 16px; border-top: 1px dashed var(--szx-line); text-align: center; }
.szx-cta-lead { display: block; margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--szx-text); }
.szx-cta-note { display: block; margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--szx-sub); }
.szx-cta-note a { color: var(--szx-ink); }
/* 選択肢ごとの行き先（2026-11-04 CEO「選択肢ごとにボタンを並べる」）。どれを押すかが一目で分かるよう、選択肢の一言とボタンを組にする */
.szx-cta-choice { margin: 14px 0 0; }
.szx-cta-choice:first-of-type { margin-top: 4px; }
.szx-cta-choice .szx-cta-lead { margin-bottom: 6px; font-weight: 700; }
.szx-cta-choice p { margin: 0 !important; }
/* finder：問いに答えると、サービスをまたいで合う上位3つが出る（2026-11-04 music-app-ranking） */
.szx-finder .szx-row { margin-top: 14px; }
.szx-finder .szx-row:first-child { margin-top: 10px; }
.szx-finder .szx-btn.szx-none { color: var(--szx-sub); }
.szx-finder-list { margin: 0; padding: 0; list-style: none; }
.szx-finder-item { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--szx-line); }
.szx-finder-item:first-child { padding-top: 2px; }
.szx-finder-item:last-child { border-bottom: 0; }
.szx-finder-head { display: flex; align-items: baseline; gap: 8px; }
.szx-finder-rank { flex: none; display: inline-block; padding: 0 7px; font-size: 12.5px; font-weight: 700; line-height: 1.8; color: #FFFFFF; background: var(--szx-ink); border-radius: 3px; }
.szx-finder-name { font-size: 16px; font-weight: 700; line-height: 1.5; }
.szx-finder-hits { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--szx-sub); }
.szx-finder-why { margin: 6px 0 0; font-size: 14px; line-height: 1.75; }
.szx-finder-price { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--szx-sub); }
.szx-finder-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 0; }
.szx-finder-acts a.szx-finder-more, .szx-finder-jumps a { font-size: 13.5px; color: var(--szx-ink); }
.szx-finder-jumps { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--szx-line); }
.szx-finder table td[data-svc] { white-space: nowrap; }
.szx-finder-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--szx-sub); }
.szx-finder-cta { flex: 1 1 100%; }
.szx-finder-cta > p { margin: 0 !important; }
.szx-finder-acts a.szx-finder-cta-text { font-size: 14px; font-weight: 700; color: var(--szx-ink); }