@charset "utf-8";
/**
 * カニ通販おすすめ.com ｜ 表示部品のスタイル
 *
 * @package kani-osusume
 * @version 1.2.0
 * @updated 2026-08-06
 */

/* ---------- 実測メーター ---------- */
.meter{
  background:var(--c-ice);border:1px solid var(--c-line);border-radius:8px;
  padding:.95rem 1.1rem;margin:1rem 0 0;
}
.meter__t{
  margin:0 0 .7em;font-family:var(--f-display);font-weight:900;font-size:.86rem;
  display:flex;align-items:center;gap:.5em;
}
.meter__t::before{content:"";width:4px;height:1em;background:var(--c-shu);border-radius:2px}
.meter__row{display:grid;grid-template-columns:5.6em 1fr 4.2em;align-items:center;gap:.7rem;margin:.3rem 0}
.meter__k{font-size:.74rem;color:var(--c-gray)}
.meter__bar{height:14px;background:var(--c-ice-2);border-radius:2px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--c-line)}
.meter__row.is-real .meter__bar i{background:var(--c-shu)}
.meter__row.is-real .meter__k{color:var(--c-sumi);font-weight:700}
.meter__v{font-family:var(--f-num);font-weight:500;font-size:.86rem;text-align:right;font-variant-numeric:tabular-nums}
.meter__note{margin:.7em 0 0;font-size:.74rem;color:var(--c-gray);line-height:1.7}
.meter__note b{color:var(--c-shu);font-family:var(--f-num);font-size:.95rem}

/* ---------- 1kgあたり単価（カード内） ---------- */
.rank-card__unit{
  margin:.5rem 0 0;font-size:.8rem;color:var(--c-gray);
  display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
}
.rank-card__unit b{font-family:var(--f-num);font-size:1.05rem;color:var(--c-sumi);font-variant-numeric:tabular-nums}
.rank-card__unit small{font-size:.68rem}

/* ---------- 採点の内訳 ---------- */
.breakdown{margin:.8rem 0 0;font-size:.84rem}
.breakdown summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4em;
  color:var(--c-gray);font-size:.78rem;border-bottom:1px dotted var(--c-line);
}
.breakdown summary::-webkit-details-marker{display:none}
.breakdown summary::after{content:"＋";font-family:var(--f-num);color:var(--c-shu)}
.breakdown[open] summary::after{content:"－"}
.breakdown__body{margin-top:.7rem;padding:.9rem 1rem;background:var(--c-ice);border-radius:8px}
.breakdown__row{display:grid;grid-template-columns:8.5em 1fr 2.4em;align-items:center;gap:.7rem;margin:.35rem 0}
.breakdown__k{font-size:.76rem;line-height:1.35}
.breakdown__k small{display:block;font-size:.64rem;color:var(--c-gray)}
.breakdown__bar{height:8px;background:var(--c-ice-2);border-radius:99px;overflow:hidden}
.breakdown__bar i{display:block;height:100%;background:var(--c-navy-2)}
.breakdown__row b{font-family:var(--f-num);font-weight:500;text-align:right;font-size:.82rem}
.breakdown__note{margin:.7em 0 0;font-size:.7rem;color:var(--c-gray)}

/* ---------- 結論ボックス ---------- */
.verdict{
  border:2px solid var(--c-navy);border-radius:10px;background:var(--c-paper);
  padding:1.2rem 1.3rem 1.3rem;margin:2rem 0;position:relative;
}
.verdict__t{
  position:absolute;top:-.85em;left:1rem;margin:0;background:var(--c-navy);color:#fff;
  font-family:var(--f-display);font-weight:900;font-size:.78rem;letter-spacing:.1em;
  padding:.3em 1em;border-radius:4px;
}
.verdict__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.5rem}
.verdict__col{display:flex;flex-direction:column;gap:.35rem;padding:.2rem 0 0}
.verdict__col+.verdict__col{border-left:1px solid var(--c-line);padding-left:1rem}
.verdict__label{
  font-family:var(--f-display);font-weight:900;font-size:.76rem;color:var(--c-shu);
  letter-spacing:.04em;
}
.verdict__name{font-family:var(--f-display);font-weight:900;font-size:.98rem;line-height:1.5;color:var(--c-sumi);text-decoration:none}
.verdict__name:hover{color:var(--c-shu);text-decoration:underline}
.verdict__price{font-family:var(--f-num);font-weight:500;font-size:1.05rem;font-variant-numeric:tabular-nums}
.verdict__price small{display:block;font-family:var(--f-body);font-size:.7rem;color:var(--c-gray);font-weight:400}
.verdict__note{margin:1rem 0 0;font-size:.74rem;color:var(--c-gray)}

/* ---------- 絞り込み ---------- */
.filter{background:var(--c-paper);border:1px solid var(--c-line);border-radius:10px;padding:1rem 1.1rem;margin:1.6rem 0}
.filter__head{display:flex;align-items:center;gap:1rem;margin-bottom:.8rem}
.filter__t{font-family:var(--f-display);font-weight:900;font-size:.9rem}
.filter__reset{
  margin-left:auto;background:none;border:1px solid var(--c-line);border-radius:99px;
  color:var(--c-gray);font-size:.72rem;padding:.3em .9em;cursor:pointer;font-family:var(--f-body);
}
.filter__reset:hover{border-color:var(--c-shu);color:var(--c-shu)}
.filter__group{display:grid;grid-template-columns:3.4em 1fr;align-items:center;gap:.7rem;margin:.45rem 0}
.filter__k{font-size:.76rem;color:var(--c-gray)}
.filter__chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{
  border:1px solid var(--c-line);background:#fff;border-radius:99px;
  padding:.42em 1em;font-size:.8rem;font-family:var(--f-body);cursor:pointer;color:var(--c-sumi);
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
.chip:hover{border-color:var(--c-shu)}
.chip[aria-pressed="true"]{background:var(--c-shu);border-color:var(--c-shu);color:#fff;font-weight:700}
.filter__count{margin:.8rem 0 0;font-size:.76rem;color:var(--c-gray)}
.filter__count b{color:var(--c-shu);font-family:var(--f-num);font-size:1rem}
.rank-card[hidden]{display:none}

/* ---------- 単価チャート ---------- */
.chart{background:var(--c-paper);border:1px solid var(--c-line);border-radius:10px;padding:1.2rem 1.3rem;margin:1.6rem 0}
.chart__t{margin:0 0 1rem;font-family:var(--f-display);font-weight:900;font-size:1rem}
.chart__row{display:grid;grid-template-columns:minmax(0,12em) 1fr 5em;align-items:center;gap:.9rem;margin:.5rem 0}
.chart__k{font-size:.8rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis}
.chart__bar{height:20px;background:var(--c-ice);border-radius:2px;overflow:hidden}
.chart__bar i{display:block;height:100%;background:var(--c-navy-2);border-radius:2px}
.chart__row.is-best .chart__bar i{background:var(--c-shu)}
.chart__row.is-best .chart__k{font-weight:700}
.chart__v{font-family:var(--f-num);font-weight:500;text-align:right;font-size:.9rem;font-variant-numeric:tabular-nums}
.chart__row.is-best .chart__v{color:var(--c-shu)}
.chart__note{margin:1rem 0 0;font-size:.74rem;color:var(--c-gray);line-height:1.7}

/* ---------- 注文時期 ---------- */
.calendar{background:var(--c-paper);border:1px solid var(--c-line);border-radius:10px;padding:1.2rem 1.3rem;margin:1.6rem 0}
.calendar__t{margin:0 0 .9rem;font-family:var(--f-display);font-weight:900;font-size:1rem}
.calendar__row{
  display:grid;grid-template-columns:5.4em auto 4.6em 1fr;align-items:center;gap:.8rem;
  padding:.55em 0;border-bottom:1px dashed var(--c-line);
}
.calendar__row:last-child{border-bottom:0}
.calendar__m{font-family:var(--f-display);font-weight:900;font-size:.86rem}
.calendar__gauge{display:flex;gap:3px}
.calendar__gauge i{width:14px;height:14px;border-radius:2px;background:var(--c-ice-2);display:block}
.calendar__gauge i.on{background:var(--c-navy-2)}
.calendar__row[data-level="3"] .calendar__gauge i.on{background:#2E7D4F}
.calendar__row[data-level="1"] .calendar__gauge i.on{background:#D9861F}
.calendar__row[data-level="0"] .calendar__gauge i.on{background:var(--c-shu)}
.calendar__lv{font-size:.74rem;color:var(--c-gray)}
.calendar__row[data-level="0"] .calendar__lv{color:var(--c-shu);font-weight:700}
.calendar__d{font-size:.8rem;color:var(--c-gray);line-height:1.6}

/* ---------- 更新履歴 ---------- */
.updates{border-top:1px solid var(--c-line);margin:2.4rem 0 0;padding-top:1.2rem}
.updates__t{margin:0 0 .7rem;font-family:var(--f-display);font-weight:900;font-size:.86rem;color:var(--c-gray)}
.updates ol{list-style:none;margin:0;padding:0;font-size:.8rem}
.updates li{display:grid;grid-template-columns:7em 1fr;gap:.8rem;padding:.4em 0;border-bottom:1px dashed var(--c-line)}
.updates li:last-child{border-bottom:0}
.updates time{font-family:var(--f-num);color:var(--c-gray);letter-spacing:.04em}

/* ---------- 読了プログレス ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--c-shu);transition:width .1s linear}

/* ---------- 追従目次（記事のサイドバー） ---------- */
.toc-follow{background:var(--c-paper);border:1px solid var(--c-line);border-radius:10px;padding:1rem 1.1rem}
.toc-follow__t{
  margin:0 0 .7rem;font-family:var(--f-display);font-weight:900;font-size:.86rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--c-navy);
}
.toc-follow ol{list-style:none;margin:0;padding:0;font-size:.8rem}
.toc-follow ol ol{padding-left:.9em;font-size:.76rem}
.toc-follow li{margin:.1em 0}
.toc-follow a{
  display:block;color:var(--c-gray);text-decoration:none;padding:.32em .6em;
  border-left:2px solid transparent;line-height:1.5;
}
.toc-follow a:hover{color:var(--c-sumi);background:var(--c-ice)}
.toc-follow a.is-active{color:var(--c-shu);border-left-color:var(--c-shu);font-weight:700;background:var(--c-ice)}

/* ---------- レスポンシブ ---------- */
@media (max-width:820px){
  .verdict__grid{grid-template-columns:1fr}
  .verdict__col+.verdict__col{border-left:0;border-top:1px solid var(--c-line);padding-left:0;padding-top:.9rem}
  .chart__row{grid-template-columns:1fr 4.6em;grid-template-areas:"k v" "bar bar";gap:.3rem .6rem;margin:.9rem 0}
  .chart__k{grid-area:k}.chart__v{grid-area:v}.chart__bar{grid-area:bar}
  .calendar__row{grid-template-columns:5em auto 1fr;row-gap:.2rem}
  .calendar__lv{display:none}
  .calendar__d{grid-column:1/-1;font-size:.76rem}
  .filter__group{grid-template-columns:1fr;gap:.3rem}
  .meter__row{grid-template-columns:4.8em 1fr 3.8em;gap:.5rem}
  .breakdown__row{grid-template-columns:7em 1fr 2.2em}
}

/* ---------- 仕上げ ---------- */
/* 「避けたい」時期は、点灯していなくても色で伝わるようにする */
.calendar__row[data-level="0"] .calendar__gauge i:first-child{background:var(--c-shu)}
.calendar__row[data-level="0"]{background:linear-gradient(90deg,rgba(214,55,28,.06),transparent 60%)}
/* 横幅の広い画面でグラフが間延びしないよう上限をつける */
.meter{max-width:720px}
.breakdown__body{max-width:560px}