/* =========================================================================
   症例一覧ページ (/cases) 固有スタイル
   フィルターバー（カテゴリー→施術内容の連動プルダウン）とカードグリッド。
   ========================================================================= */

/* ---- 追従フィルターバー（スマホは縦並び） ---- */
.filterbar{
  /* position:sticky; */
  top:var(--head-h);z-index:80;background:rgba(247,244,239,.92);backdrop-filter:blur(12px);border-block:1px solid var(--line);}
.fb-inner{padding-block:12px;}
.fb-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;}
.fb-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.fb-field.full{grid-column:1 / -1;}
.fb-field > span{font-family:var(--f-body);font-weight:700;font-size:.7rem;letter-spacing:.04em;color:var(--ink-faint);}
.fb-field select{width:100%;font-family:inherit;font-size:.92rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.7em 2.2em .7em 1.1em;cursor:pointer;appearance:none;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A7B4F' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;transition:border-color .3s;}
.fb-field select:hover{border-color:var(--bronze);}
.count{display:flex;align-items:center;justify-content:flex-end;font-size:.88rem;color:var(--ink-soft);font-weight:400;white-space:nowrap;}
.count b{font-family:var(--f-disp);font-weight:700;font-size:1.15rem;color:var(--ink);margin-right:.25em;}
@media (min-width:760px){
  .fb-inner{display:flex;align-items:flex-end;justify-content:flex-start;gap:14px;flex-wrap:wrap;padding-block:14px;}
  .fb-selects{display:contents;}
  .fb-field{width:auto;}
  .fb-field select{width:auto;min-width:150px;max-width:230px;}
  .count{margin-left:auto;}
}

/* ---- Grid ---- */
.cases-sec{padding-block:clamp(40px,5.5vh,60px) var(--sect-y);}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px);}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.ccard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(33,30,26,.4);border-color:var(--blush);}
.ccard-ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:7/5;background:var(--line);position:relative;}
.ba2{position:relative;background-size:cover;background-position:center;}
.ba2-label{position:absolute;left:10px;bottom:9px;font-family:var(--f-body);font-weight:500;font-size:.68rem;letter-spacing:.04em;color:#fff;background:rgba(33,30,26,.5);padding:.2em .75em;border-radius:999px;}
.ccard-ba::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.6);transform:translateX(-.5px);}

/* ★追加：Before/Afterを1枚にまとめた画像用のサムネイル（既存の.ccard-ba/.ba2の
   定義は変更せず、新しいクラス名として追加している）。 */
.ccard-thumb-single{aspect-ratio:7/5;background-size:cover;background-position:center;background-color:var(--line);}
.ccard-body{padding:clamp(15px,1.6vw,20px) clamp(15px,1.6vw,20px) clamp(17px,2vw,22px);display:flex;flex-direction:column;gap:9px;flex:1;}
.ccard-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ctag{font-family:var(--f-body);font-weight:700;font-size:.68rem;letter-spacing:.02em;color:var(--bronze);border:1px solid var(--blush);border-radius:999px;padding:.24em .85em;}
.cmonitor{font-size:.7rem;letter-spacing:.01em;color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:.24em .75em;}
.ctitle{font-family:var(--f-disp);font-weight:700;font-size:1.06rem;line-height:1.6;letter-spacing:.005em;margin:0;}
.cmeta{font-size:.84rem;color:var(--ink-soft);font-weight:400;display:flex;flex-wrap:wrap;gap:.4em 1em;margin-top:auto;}
.cmeta .price{color:var(--ink);font-weight:700;}
.cmeta i{font-style:normal;color:var(--ink-faint);}
.cview{margin-top:4px;font-family:var(--f-body);font-weight:500;font-size:.76rem;letter-spacing:.02em;color:var(--bronze);display:inline-flex;gap:.5em;}
.ccard:hover .cview .ar{transform:translateX(4px);}.cview .ar{transition:transform .3s;}
.empty{text-align:center;color:var(--ink-soft);font-weight:400;padding:clamp(40px,7vh,72px) 0;font-size:1rem;line-height:1.9;}
.more-wrap{display:flex;justify-content:center;margin-top:clamp(34px,5vh,52px);}
.more-btn{font-family:var(--f-body);font-weight:500;letter-spacing:.02em;font-size:.9rem;color:var(--ink);border:1px solid var(--ink);background:transparent;border-radius:999px;padding:1.05em 2.6em;cursor:pointer;transition:all .4s var(--ease);}
.more-btn:hover{background:var(--ink);color:var(--porcelain);}

@media (max-width:980px){.cgrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){
  .cgrid{grid-template-columns:1fr 1fr;gap:12px;}
  .ccard-body{padding:12px 12px 15px;gap:7px;}
  .ctitle{font-size:1rem;}
  .cmeta{font-size:.82rem;}
  .fb-selects{width:100%;}
  .fb-field select{width:100%;font-size:.96rem;}
  .count{width:100%;font-size:.92rem;}
}
@media (max-width:380px){.cgrid{grid-template-columns:1fr;}}

/* ---- ★更新：カードの表示項目を「項目名＋値」の固定行に統一（文字数が違ってもそろう） ---- */
.ccard-thumb-single{aspect-ratio:7/5;}
.ctitle{min-height:3.2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cinfo{margin:auto 0 0;padding:0;border-top:1px solid var(--line);}
.cinfo > div{display:grid;grid-template-columns:5.2em 1fr;gap:8px;align-items:baseline;padding:.55em 0;border-bottom:1px solid var(--line);}
.cinfo dt{font-family:var(--f-body);font-weight:700;font-size:.68rem;letter-spacing:.02em;color:var(--bronze);white-space:nowrap;}
.cinfo dd{margin:0;font-size:.84rem;line-height:1.5;color:var(--ink-soft);min-width:0;overflow-wrap:anywhere;}
.cinfo .is-price dd{color:var(--ink);font-weight:700;}
.cview{margin-top:8px;}
@media (max-width:600px){
  .cinfo > div{grid-template-columns:1fr;gap:1px;padding:.5em 0;}
  .cinfo dt{font-size:.64rem;}
  .cinfo dd{font-size:.82rem;}
  .ctitle{min-height:3.2em;}
}
.cinfo .is-period dd{min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cinfo > div:first-child dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}