@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（rv-summary限定フィルター安定版）
Template:   cocoon-master
Version:    1.1.6
*/

/* =========================
   TOKENS
========================= */
:root{
  --rv-brand   : #00c2b2;
  --rv-title   : #0b8a82;
  --rv-border  : #c7eeeb;
  --rv-divider : #eef3f2;

  /* meter badge */
  --badge-w    : 5ch;
  --badge-pad  : .5rem;

  /* filter layout */
  --left-w     : 13.6rem;
  --gap-x      : 1rem;
  --title-fs   : .9rem;
  --title-lh   : 1.25;
}

/* =========================
   REVIEW METERS（共通）
========================= */
.rv-meters{
  --rv-gap:14px;
  --rv-bar-h:48px;
  --rv-radius:calc(var(--rv-bar-h)/2);
  display:grid;
  gap:var(--rv-gap);
}
.rv-meter--inline{
  display:grid;
  grid-template-columns: clamp(10ch,28vw,18ch) 1fr;
  align-items:center;
  gap:.8rem;
}

.rv-meter__label{
  font-weight:700;
  color:#0f3e3a;
  line-height:1.2;
}
.rv-meter__bar{
  position:relative;
  height:var(--rv-bar-h);
  border:2px solid var(--rv-border);
  border-radius:var(--rv-radius);
  overflow:hidden;
  background:
    linear-gradient(#0000,#0000) padding-box,
    repeating-linear-gradient(90deg,var(--rv-border) 0 1px,transparent 1px 10%) border-box;
}

/* 幅は --p（0–100%）を参照。安全のため 0–100 に丸める */
.rv-meter__fill{
  height:100%;
  width:clamp(0%, var(--p,0%), 100%);
  background:linear-gradient(90deg,#02cec0,#009b8b);
  border-radius:inherit;
  transition:width .7s cubic-bezier(.2,.8,.2,1);
}

/* SPはバー高だけ縮める（レイアウトはPCと同じ） */
@media (max-width:480px){
  .rv-meters{ --rv-bar-h:36px; }
}

/* =========================
   REVIEW CARD（共通）
========================= */
.rvx-card{ border:1px solid #ddd; border-radius:8px; padding:1rem; background:#fff; }
.rvx-row{ display:flex; gap:1rem; align-items:flex-start; }
.rvx-media{ flex:0 0 200px; }
.rvx-info{ flex:1 1 auto; min-width:0; }
@media (max-width:768px){ .rvx-row{ flex-direction:column; } }

/* =========================================================
   REVIEW SUMMARY FILTER（まとめ記事専用）
   ※ 重複していたブロックを統合
========================================================= */
.rv-summary #rv-filter-wrap{
  display:block;
  margin-bottom:1.75rem;
  border:1px solid #e0e7e9;
  border-radius:16px;
  background:#f8fbfc;
}

/* トグル見出し */
.rv-summary .rv-filter__summary{
  display:flex; align-items:center; gap:.5rem;
  margin:0; padding:.9rem 1.25rem;
  font-size:1.05rem; font-weight:700; color:#045d56;
  cursor:pointer; list-style:none;
  border-bottom:1px solid #d0e3e5; border-radius:16px 16px 0 0;
}
.rv-summary .rv-filter__summary::after{ content:'▾'; margin-left:auto; transition:transform .2s ease; }
.rv-summary .rv-filter__summary::-webkit-details-marker{ display:none; }
.rv-summary details[open] .rv-filter__summary::after{ transform:rotate(180deg); }

/* 本体 */
.rv-summary .rv-filter{
  display:grid; gap:1.25rem; margin:0; padding:1.25rem;
  border-top:1px solid #d0e3e5; background:#f8fbfc;
  border-bottom-left-radius:16px; border-bottom-right-radius:16px;
}

/* 各行：PCは2カラム */
.rv-summary .rv-filter__group{
  display:grid;
  grid-template-columns: var(--left-w) minmax(0,1fr);
  column-gap: var(--gap-x);
  align-items:start;
  padding:10px 0;
  border-top:1px solid var(--rv-divider);
}
.rv-summary .rv-filter__group:first-child{ border-top:0; }

/* ラベルは左カラムに右寄せボックス */
@media (min-width:769px){
  .rv-summary .rv-filter__label{
    grid-column:1;
    justify-self:stretch;
    display:block; width:100%; box-sizing:border-box;
    margin:0 !important; padding:.5em .9em;
    text-align:right;
    background:#f9f9f9; border-radius:.4em;
    color:var(--rv-title);
    font:700 var(--title-fs)/var(--title-lh) inherit;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .rv-summary .rv-filter__label + *{ grid-column:2; }
}

/* SPは1カラム（ラベルは左寄せ） */
@media (max-width:768px){
  .rv-summary .rv-filter__group{ grid-template-columns:1fr; row-gap:.4rem; }
  .rv-summary .rv-filter__label{
    grid-column:1; justify-self:stretch;
    width:100%; margin:0 0 .35rem 0 !important; padding:.5em .8em;
    text-align:left; background:#f9f9f9; border-radius:.4em;
  }
  .rv-summary .rv-filter__label + *{ grid-column:1; }
}

/* オプション群 */
.rv-summary .rv-filter__options{ display:flex; flex-wrap:wrap; gap:.45rem .7rem; }
.rv-summary .rv-filter__chip,
.rv-summary .rv-filter__option{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .75rem; border-radius:999px; box-sizing:border-box;
  background:#fff; border:1px solid #d0e3e5;
  font-size:.92rem; cursor:pointer; white-space:nowrap;
}
.rv-summary .rv-filter__chip input,
.rv-summary .rv-filter__option input{ accent-color:#00a89b; }

/* 特集ポイント行だけ左幅拡張 */
.rv-summary .rv-filter [data-group="point"]{ --left-w:16.8rem; }

/* アクション行など */
.rv-summary .rv-filter__actions{ display:flex; justify-content:flex-end; }
.rv-summary .rv-filter__reset{
  padding:.45rem 1.1rem; border-radius:999px;
  border:1px solid #00a89b; background:#00a89b; color:#fff;
  font-weight:700; cursor:pointer;
}
.rv-summary .rv-filter__reset:hover{ opacity:.85; }
.rv-summary .rv-count{ margin:.5rem 0 1rem; font-weight:600; color:#007f76; }
.rv-summary [hidden]{ display:none !important; }

/* ======================================
   レビュー記事 固定レイアウト補強
====================================== */
body.single-review .review-wrap{
  display:block; margin:0 auto; max-width:1100px; padding:0 1rem;
}
body.single-review .review-card:not(.review-card--shell){
  margin-bottom:2.4rem; background:var(--rv-card,#fff);
  border:1px solid var(--rv-line,#e9e6e0); border-radius:14px; padding:1.4rem 1.6rem;
}
body.single-review .review-card--shell .review-grid{
  display:grid !important; grid-template-columns:1fr; gap:1.5rem;
}
@media (min-width:900px){
  body.single-review .review-card--shell .review-grid{
    grid-template-columns:minmax(340px,420px) 1fr; align-items:start;
  }
}
body.single-review .review-media{ display:flex; flex-direction:column; align-items:center; }
body.single-review .review-details,
body.single-review .review-body{ display:grid; gap:1.5rem; }
body.single-review .review-title{
  font-size:clamp(26px,3.6vw,34px); font-weight:800; margin-bottom:.5em;
}

/* ======================================
   投稿フッターのメタを非表示
====================================== */
.entry-footer .tagcloud,
.entry-footer .post-tags{ display:none !important; }
.article-footer .entry-categories{ display:none !important; }

/* === Meter layout hardening (mobile-safe) === */

/* 1) Gridの右列は minmax(0,1fr) にして“最小内容幅しばり”を無効化 */
.rv-meter--inline{
  grid-template-columns: clamp(10ch,28vw,18ch) minmax(0, 1fr) !important;
}

/* 2) バーの基準枠を安定化（幅計算ズレ対策） */
.rv-meter__bar{
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* 4) iOSの自動文字サイズ調整でchが暴れないように */
.rv-meters{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* === Meter: 角丸を考慮したバッジ位置補正 === */
.rv-meter__bar{
  /* 角丸と通常の余白の“どちらか大きいほう”をエッジ余白として使う */
  --edge-pad: max(var(--badge-pad, .5rem), var(--rv-radius, 24px));
}
/* === RV meter: 最終版（角丸＋中央補正＋改行禁止） === */
.rv-meter__pct{
  position: absolute;
  top: 50%;
  left: clamp(
    var(--edge-pad, var(--badge-pad, .5rem)),                /* 角丸も考慮した下限 */
    calc(var(--p, 0%) - (var(--badge-w, 5ch) / 2)),         /* 中央 */
    calc(100% - var(--badge-w, 5ch) - var(--edge-pad, var(--badge-pad, .5rem))) /* 上限 */
  );
  transform: translate(-50%, -50%); /* X/Yともに中央合わせ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-w, 5ch);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
  white-space: nowrap;
}
.rv-meter__pct { transform: translate(calc(-50% + 5px), -50%); }