@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;   /* 見出し固定幅（12–15remで調整） */
  --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;
}
.rv-meter__fill {
  height:100%;
  width:var(--p,0%);
  background:linear-gradient(90deg,#02cec0,#009b8b);
  border-radius:inherit;
  transition:width .7s cubic-bezier(.2,.8,.2,1);
}
.rv-meter__pct {
  position:absolute; top:50%;
  left:clamp(var(--badge-pad,.5rem), calc(var(--p,0%) - (var(--badge-w,5ch)/2)), calc(var(--p,0%) - var(--badge-w,5ch) - var(--badge-pad,.5rem)));
  transform:translateY(-50%);
  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;
}
@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;
}

/* 各行グループ（デスクトップは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; }

/* ================================
   ★ 見出しを「左右フル幅・右寄せ」に統一
   - ラベルは必ず行頭で全幅（1 / -1）に広げる
   - 直後のコンテンツは次行でフル幅
=================================== */
.rv-summary .rv-filter__label{
  grid-column:1 / -1;                 /* ← フル幅化のキモ */
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0 0 .4rem 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:1 / -1;
  margin:0;
  padding:0;
}

/* オプション群 */
.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; }

/* inline系（連載状況・NG除外など）も上の統一仕様でOK
   既存の右寄せ押し出しはストレッチに変更 */
.rv-summary .rv-filter__group--inline{
  display:grid;
  grid-template-columns: var(--left-w) minmax(0,1fr);
  column-gap: var(--gap-x);
  align-items:center;
}
.rv-summary .rv-filter__group--inline .rv-filter__label{
  justify-self:stretch !important;    /* ← 右端寄せではなく全幅 */
}
.rv-summary .rv-filter__group--inline > .rv-filter__options{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .7rem;
}

/* 特集ポイント行 */
.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; }

/* モバイル：1カラム化（見出しはそのまま右寄せフル幅） */
@media (max-width:768px){
  .rv-summary .rv-filter__group,
  .rv-summary .rv-filter__group--inline {
    grid-template-columns:1fr;
    row-gap:.4rem;
  }
  .rv-summary .rv-filter__label{
    grid-column:1 / -1;
    margin:0 0 .35rem 0 !important;
    text-align:right;                 /* ← 右寄せ維持 */
    padding:.5em .8em;
  }
  .rv-summary .rv-filter__options { gap:.4rem .6rem; }
  .rv-summary .rv-filter__chip,
  .rv-summary .rv-filter__option { font-size:.88rem; }
}

/* 特集ポイント行のモバイル修正 */
@media (max-width:768px){
  .rv-summary .rv-filter [data-group="point"] > .rv-filter_label{
    white-space:normal;
    min-height:0;
  }
}

/* ======================================
   レビュー記事 固定レイアウト補強（復旧版）
====================================== */
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;
}

/* 2カラム構成 */
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;
}

/* =========================================================
   REVIEW SUMMARY FILTER（まとめ記事専用）— clean
========================================================= */

/* フィルター枠全体 */
.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; }

/* ===== PC：2カラムを維持しつつ、左カラムの項目名だけ「左右フル枠・文字右寄せ」 */
@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; }
}

/* オプション群 */
.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; }

/* inline系（連載状況・NG除外など）も同じ2カラム設計のまま */
.rv-summary .rv-filter__group--inline{
  display:grid;
  grid-template-columns: var(--left-w) minmax(0,1fr);
  column-gap: var(--gap-x);
  align-items:center;
}
.rv-summary .rv-filter__group--inline .rv-filter__label{ justify-self:stretch !important; }
.rv-summary .rv-filter__group--inline > .rv-filter__options{
  display:flex; flex-wrap:wrap; gap:.45rem .7rem;
}

/* 特集ポイント行だけ左カラム幅を拡げる */
.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; }

/* ===== SP：1カラム。項目名は左寄せ（希望どおり） */
@media (max-width:768px){
  .rv-summary .rv-filter__group,
  .rv-summary .rv-filter__group--inline{
    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{ gap:.4rem .6rem; }
  .rv-summary .rv-filter__chip,
  .rv-summary .rv-filter__option{ font-size:.88rem; }
}

/* 特集ポイント行のSP修正（クラス名のタイポ修正） */
@media (max-width:768px){
  .rv-summary .rv-filter [data-group="point"] > .rv-filter__label{
    white-space:normal; min-height:0;
  }
}
/* 投稿下部のタグリストを非表示 */
.entry-footer .tagcloud,
.entry-footer .post-tags {
  display: none !important;
}
/* 投稿フッターのカテゴリ・タグバッジ群を非表示 */
.article-footer .entry-categories {
  display: none !important;
}