@charset "UTF-8";
/* ==========================================================
   LOCAZOO Case（導入事例）
   lcz-blog.css のカード・本文スタイルを土台に、差分だけを定義。
   すべて .lcz-case 配下にスコープしています。
   ========================================================== */

.lcz-case{
  --lcz-navy:#2f67b6;
  --lcz-navy-soft:#eef3fa;
}

/* ---------- ページ上部・タイトル ----------
   lcz-blog.css の #Blog_page / #MemberSeminar_page と同一の指定 */
#Case_page{
  padding-top:0rem;
  padding-bottom:12rem;
}
#Case_page .lcz_tit_{
  padding-top:1.6rem;
  padding-bottom:1rem;
}
#Case_page .lcz_ct_jt{
  font-size:2.5rem;
  color:var(--bs-color-blue);
  justify-content:center;
  padding-bottom:0.4rem;
}
#Case_page .lcz_ct_jt::after{
  display:none;
}
#Case_page .lcz_ct_et{
  color:#2C3E50;
  font-size:1.1rem;
  letter-spacing:0.4rem;
  font-weight:500;
}

/* ---------- 一覧 ---------- */

/* 絞り込み：白いパネルに「見出し｜チップ」を左寄せで並べる。チップは掛け合わせ可能 */
.lcz-case-filter{
  background:#fff;border-radius:10px;padding:6px 32px;margin:0 0 18px;
  box-shadow:0 2px 12px rgba(20,60,75,.05);
}
.lcz-case-filter__row{
  display:flex;align-items:flex-start;gap:24px;padding:22px 0;
}
.lcz-case-filter__row + .lcz-case-filter__row{border-top:1px solid #e3edf1;}
.lcz-case-filter__label{
  flex-shrink:0;width:6em;padding-top:12px;
  font-size:14px;font-weight:700;color:var(--lcz-ink);
}
.lcz-chips{display:flex;flex-wrap:wrap;gap:10px;}
.lcz-case .lcz-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:5px 20px 5px 5px;border-radius:999px;
  background:#f3f8fa;border:2px solid transparent;
  font-size:14px;line-height:1.4;color:var(--lcz-ink);
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.lcz-chip__icon{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--lcz-sub);font-size:14px;
  transition:background .18s,color .18s;
}
.lcz-case a.lcz-chip:hover{background:var(--lcz-brand-soft);}
.lcz-case a.lcz-chip:hover .lcz-chip__icon{color:var(--lcz-brand-dark);}
/* 選択中 */
.lcz-case .lcz-chip.is-on{
  background:#fff;border-color:var(--lcz-brand);
  box-shadow:0 4px 14px rgba(12,191,222,.18);font-weight:700;
}
.lcz-chip.is-on .lcz-chip__icon{background:var(--lcz-brand);color:#fff;font-size:16px;}
.lcz-case a.lcz-chip.is-on:hover{background:#fff;}
.lcz-case a.lcz-chip.is-on:hover .lcz-chip__icon{color:#fff;}
/* 組み合わせると0件になる条件 */
.lcz-case .lcz-chip.is-disabled{color:var(--lcz-muted);cursor:not-allowed;opacity:.6;}
.lcz-chip.is-disabled .lcz-chip__icon{color:var(--lcz-muted);}

.lcz-case-filter__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid #e3edf1;padding:16px 0;
}
.lcz-case-filter__count{margin:0;font-size:13px;color:var(--lcz-sub);}
.lcz-case-filter__count b{font-size:18px;color:var(--lcz-ink);margin:0 2px;}
.lcz-case a.lcz-case-filter__clear{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--lcz-sub);text-decoration:underline;
}
.lcz-case a.lcz-case-filter__clear:hover{color:var(--lcz-ink);}
.lcz-case .lcz-empty a{color:var(--lcz-brand-dark);text-decoration:underline;}

/* アイキャッチ（画像なし時：ネイビーの面） */
.lcz-case .lcz-case-eye:not(.has-image){
  background:linear-gradient(135deg,var(--lcz-navy) 0%,#2a8fc6 100%);
}

/* カード */
.lcz-case-card__company{
  font-size:12px;color:var(--lcz-sub);margin:0 0 8px;font-weight:700;
}
.lcz-case-card .lcz-card__title{font-size:16px;}

.lcz-case-card .lcz-tags{margin:auto 0 0;gap:6px 12px;}

/* ---------- 詳細：ヘッダー ---------- */
.lcz-case-company{font-size:13px;color:var(--lcz-sub);}

/* ---------- 詳細：本文 ----------
   本文の見た目は lcz-blog.css の .lcz-body（ブログ記事）と共通。
   引用ブロックは「お客様の声」として使うため、引用符を添える。 */
.lcz-case-body blockquote{position:relative;padding-left:56px;}
.lcz-case-body blockquote::before{
  content:"\201C";position:absolute;top:10px;left:18px;
  font-family:Georgia,serif;font-size:56px;line-height:1;color:var(--lcz-brand);opacity:.5;
}
.lcz-case-body blockquote p + p{margin-top:12px;}
/* 2段落目以降の最後の段落は、話者名として右寄せで小さく */
.lcz-case-body blockquote p:last-child:not(:first-child){
  text-align:right;font-size:13px;color:var(--lcz-sub);
}

/* CTA */
.lcz-case-cta{margin-top:40px;}
#Case_page > .container > .lcz-case-cta{margin-top:64px;}
.lcz-case .lcz-cta__btns{gap:12px;flex-wrap:wrap;}
.lcz-case a.lcz-btn--fill{background:var(--lcz-brand);color:#fff;}
.lcz-case a.lcz-btn--fill:hover{background:var(--lcz-brand-dark);border-color:var(--lcz-brand-dark);}

/* トップページのCaseセクション */
#Case #Cs_desc .lcz-grid{padding-top:40px;}

/* ---------- レスポンシブ ---------- */
@media (max-width:560px){
  .lcz-case-filter{padding:4px 20px;}
  .lcz-case-filter__row{flex-direction:column;gap:12px;padding:18px 0;}
  .lcz-case-filter__label{width:auto;padding-top:0;font-size:13px;}
  .lcz-chips{gap:8px;}
  .lcz-case .lcz-chip{font-size:13px;padding-right:16px;gap:8px;}
  .lcz-chip__icon{width:28px;height:28px;font-size:12px;}
}