/* =====================================================
   リード文の部品（includes/lead-parts.php・2026-09-10 代表指示）
   「先に結論」の囲み・「こんな相談に答えます」（悩む人の画像＋吹き出し）
   人物は images/common/concern-*.webp（高さで揃える・幅は画像の比率まかせ）
   ===================================================== */

/* 結論の段落＝薄い柿色の面に左の太い線。リードの中で「ここだけ読めば分かる」場所 */
.ranking-article > p.lead-point {
  padding: 16px 20px;
  background: var(--kaki-tint);
  border-left: 4px solid var(--kaki);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ---- こんな相談に答えます ---- */
.concerns {
  max-width: var(--container-narrow);
  margin-top: 40px;
}

/* 記事のいちばん最初に置く（代表指示 2026-09-12）＝本文の最初の要素なら上の余白は要らない */
.ranking-article > .concerns:first-child { margin-top: 8px; }

.concerns__title {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-deep);
}

/* 相談1つ＝人物＋吹き出し。奇数は人物が左、偶数は右（row-reverse）で交互に（2026-09-10 代表指示） */
.concerns__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.concerns__item {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.concerns__item--right {
  flex-direction: row-reverse;
}

.concerns__figure {
  flex: 0 0 auto;
  width: auto;
  height: 120px;
}

/* 吹き出し＝白い箱に人物側のしっぽ */
.concerns__bubble {
  position: relative;
  flex: 1 1 auto;
  margin: 0 0 12px;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.concerns__bubble::before,
.concerns__bubble::after {
  content: "";
  position: absolute;
  bottom: 16px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.concerns__bubble::before {
  left: -14px;
  border-right-color: var(--hair-strong);
}

.concerns__bubble::after {
  left: -12px;
  border-right-color: var(--paper);
}

.concerns__item--right .concerns__bubble::before {
  left: auto;
  right: -14px;
  border-right-color: transparent;
  border-left-color: var(--hair-strong);
}

.concerns__item--right .concerns__bubble::after {
  left: auto;
  right: -12px;
  border-right-color: transparent;
  border-left-color: var(--paper);
}

/* =====================================================
   冒頭の並び「相談 → リード → 先に結論」（代表指示 2026-09-12）
   主張したいところは大きく、伝わらなくてよいところ（原文の出どころ・調べ方）は小さく薄く
   ===================================================== */

/* 相談の原文＝控えめな引用。吹き出しの後ろで「実際の声」として添える */
.ranking-article > p.lead-quote {
  margin-top: 32px;
  padding-left: 16px;
  border-left: 2px solid var(--hair-strong);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.ranking-article > p.lead-quote + p { margin-top: 16px; }

/* 世間の声＝顔だけ小さく丸く（2026-09-16 代表指示）。上の相談の吹き出しと同じ2人を使うので、
   同じ大きさで出すと絵の繰り返しになる。ここは顔だけ48pxに切り出して、地の文の一部として読ませる */
.ranking-article .opinions {
  display: grid;
  gap: 8px;
  max-width: var(--container-narrow);
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
}

.opinions__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
}

.opinions__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper-3);
  object-fit: cover;
  object-position: 50% 4%;
}

.opinions__text { line-height: 1.8; }

/* 調べ方の開示＝リードの下に小さく1行（2026-09-16・「先に結論」の枠を外したので、
   枠の中にあった facts / note の置き場をここに移した）。主張ではないので薄く、小さく */
.ranking-article > p.lead-method {
  max-width: var(--container-narrow);
  margin: 8px auto 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* 選ぶ条件の札 */
.ranking-article .lead-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--container-narrow);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ranking-article .lead-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px 8px 8px;
  background: var(--paper-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-deep);
}

.lead-points__no {
  padding: 0 8px;
  background: var(--ink-deep);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.8;
  color: #FFFFFF;
}

/* 先に結論＝記事でいちばん目立つ枠。太い柿色の枠と大きな1文 */
.ranking-article .lead-conclusion {
  max-width: var(--container-narrow);
  margin-top: 32px;
  background: var(--paper);
  border: 2px solid var(--kaki);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ranking-article .lead-conclusion__label {
  display: inline-block;
  margin: 0;
  padding: 4px 16px;
  background: var(--kaki);
  border-bottom-right-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

.ranking-article .lead-conclusion__claim {
  margin: 0;
  padding: 16px 24px 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-deep);
  text-wrap: balance;
  /* 「足り／ない日に」のように語の途中で折れないよう、文節で改行する（2026-09-16）。
     未対応のブラウザは normal のまま＝これまでと同じ折り返しに戻るだけ */
  word-break: auto-phrase;
}

.lead-conclusion__mark {
  padding: 0 2px;
  background: linear-gradient(transparent 60%, var(--kaki-light) 60%);
  color: inherit;
}

.ranking-article .lead-conclusion__sub {
  margin: 8px 0 0;
  padding: 0 24px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

/* 相談への短い答え＝3つ並べ、根拠は前提の枠（premise.css）へリンク（2026-09-12） */
.ranking-article .lead-conclusion__answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 8px;
  margin: 16px 24px 0;
  padding: 0;
  list-style: none;
}

.ranking-article .lead-conclusion__answers li {
  display: grid;
  align-content: start;
  gap: 4px;
  margin: 0;
  padding: 12px;
  background: var(--kaki-tint);
  border-radius: var(--radius-md);
}

.lead-conclusion__answers-q { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); }
.lead-conclusion__answers-a { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-deep); }
.lead-conclusion__answers-link { font-size: 0.75rem; color: var(--kaki-deep); }

/* 根拠＝左に幅の大きな数字、右に種類ごとの棒 */
.lead-conclusion__evidence {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 16px 24px;
  align-items: center;
  margin: 24px 24px 0;
  padding: 16px 0 24px;
  border-top: 1px solid var(--hair);
}

.lead-conclusion__answers + .lead-conclusion__foot { margin-top: 16px; }

.ranking-article .lead-conclusion__range { display: grid; gap: 4px; margin: 0; }

.lead-conclusion__range-label { font-size: 0.75rem; color: var(--ink-soft); }

.lead-conclusion__range-num {
  font-family: var(--num);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--kaki);
  white-space: nowrap;
}

.lead-conclusion__range-num small { margin-left: 2px; font-size: 1rem; }

.lead-conclusion__range-ratio { font-size: 0.875rem; font-weight: 700; color: var(--ink-deep); }

.lead-conclusion__range-ratio b { margin: 0 2px; font-family: var(--num); font-size: 1.25rem; color: var(--kaki); }

.ranking-article .lead-conclusion__bars { display: grid; gap: 8px; margin: 0; }

.lead-conclusion__bar {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 88px;
  gap: 0 8px;
  align-items: center;
  font-size: 0.875rem;
}

.ranking-article .lead-conclusion__bar dt { color: var(--ink-soft); }
.ranking-article .lead-conclusion__bar dd { margin: 0; }
.lead-conclusion__track svg { display: block; }
.lead-conclusion__rail { fill: var(--paper-3); }
.lead-conclusion__fill { fill: var(--ink-faint); }

.lead-conclusion__val { font-family: var(--num); font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

.lead-conclusion__val small { margin-left: 8px; font-family: var(--sans); font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }

.lead-conclusion__bar.is-top .lead-conclusion__fill { fill: var(--kaki); }
.ranking-article .lead-conclusion__bar.is-top dt { font-weight: 700; color: var(--ink-deep); }
.lead-conclusion__bar.is-top .lead-conclusion__val { color: var(--kaki); }

.ranking-article .lead-conclusion__groups-note { margin: 8px 0 0; font-size: 0.75rem; color: var(--ink-soft); }

/* 調べ方＝小さく薄く（伝わらなくてよいが、隠さない） */
.lead-conclusion__foot {
  padding: 8px 24px 12px;
  background: var(--paper-2);
  border-top: 1px solid var(--hair);
}

.ranking-article .lead-conclusion__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.ranking-article .lead-conclusion__facts li { margin: 0; }

.lead-conclusion__facts b { margin-left: 4px; font-family: var(--num); color: var(--ink-deep); }

.ranking-article .lead-conclusion__note { margin: 4px 0 0; font-size: 0.75rem; color: var(--ink-soft); }

@media (max-width: 767px) {
  .concerns__item { gap: 8px; }
  .concerns__figure { height: 88px; }
  .concerns__bubble { padding: 8px 12px; font-size: 0.875rem; margin-bottom: 8px; }
  .ranking-article > p.lead-point { padding: 12px 16px; }
  .ranking-article .lead-points li { font-size: 0.875rem; }
  .ranking-article .lead-conclusion__claim { padding: 12px 16px 0; font-size: 1.25rem; }
  .ranking-article .lead-conclusion__sub { padding: 0 16px; font-size: 0.875rem; }
  .lead-conclusion__evidence { grid-template-columns: 1fr; margin: 16px 16px 0; padding: 12px 0 16px; }
  .lead-conclusion__bar { grid-template-columns: 112px minmax(0, 1fr) 72px; }   /* 「ほかの野菜100%」が1行に収まる幅 */
  .lead-conclusion__foot { padding: 8px 16px 12px; }
  .ranking-article .lead-conclusion__answers { grid-auto-flow: row; grid-template-columns: 1fr; margin: 12px 16px 0; }
}