@charset "UTF-8";
/* ==========================================================
   LOCAZOO Blog
   すべて .lcz-blog 配下にスコープしています。
   既存テーマのCSSには影響しません。
   ========================================================== */

.lcz-blog{
  --lcz-brand:#0cbfde;
  --lcz-brand-dark:#0aa3bf;
  --lcz-brand-soft:#e9f8fb;
  --lcz-ink:#16323c;
  --lcz-sub:#5f727a;
  --lcz-muted:#9fadb4;
  --lcz-pill:999px;

  color:var(--lcz-ink);
  line-height:1.75;
}

.lcz-blog *{box-sizing:border-box;}
.lcz-blog a{color:inherit;text-decoration:none;}
.lcz-blog img{max-width:100%;display:block;}
.lcz-blog :focus-visible{outline:2px solid var(--lcz-brand-dark);outline-offset:3px;}

.lcz-narrow{max-width:760px;margin:0 auto;}

/* ---------- ページ上部・タイトル ----------
   common.css の #Members に対する指定をそのまま移植しています。
   （#Page_head_ の height:200px と背景オブジェクトは全ページ共通のため指定不要）*/
#Blog_page{
  padding-top:0rem;
  padding-bottom:12rem;
}
#Blog_page .lcz_tit_{
  padding-top:1.6rem;
  padding-bottom:1rem;
}
#Blog_page .lcz_ct_jt{
  font-size:2.5rem;
  color:var(--bs-color-blue);
  justify-content:center;
  padding-bottom:0.4rem;
}
/* メンバー紹介と同じく、見出し下の罫線は表示しない */
#Blog_page .lcz_ct_jt::after{
  display:none;
}
#Blog_page .lcz_ct_et{
  color:#2C3E50;
  font-size:1.1rem;
  letter-spacing:0.4rem;
  font-weight:500;
}

/* パンくずの区切り（ー）は common.css の .ln_link_::after で
   サイト全体を統一したため、ここでの上書きは不要です。 */

/* ---------- カテゴリタブ ---------- */
.lcz-tabs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:18px;}
.lcz-tab{
  background:#fff;border:1px solid #bfe6ef;color:var(--lcz-sub);
  border-radius:var(--lcz-pill);padding:10px 24px;font-size:13px;
  transition:all .18s;
}
.lcz-tab:hover{border-color:var(--lcz-brand);color:var(--lcz-brand);}
.lcz-tab.is-active{background:var(--lcz-brand);color:#fff;border-color:var(--lcz-brand);}

/* ---------- タグ絞り込みバー ---------- */
.lcz-tagbar{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid #bfe6ef;border-radius:var(--lcz-pill);
  max-width:540px;margin:6px auto 0;padding:12px 24px;
  font-size:13px;color:var(--lcz-sub);
}
.lcz-tagbar b{color:var(--lcz-brand);font-size:14px;}
.lcz-tagbar a{color:var(--lcz-muted);text-decoration:underline;font-size:12px;}
.lcz-tagbar a:hover{color:var(--lcz-ink);}

/* ---------- グリッド / カード ---------- */
.lcz-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:36px 34px;padding:30px 0 0;
}
.lcz-card{
  background:#fff;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 12px rgba(20,60,75,.05);
  transition:transform .22s ease,box-shadow .22s ease;
}
.lcz-card:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(20,60,75,.11);}
.lcz-card__thumb{display:block;}

/* アイキャッチ（一覧） */
.lcz-eyecatch{position:relative;aspect-ratio:16/9;overflow:hidden;flex-shrink:0;}
.lcz-eyecatch .frame{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.35);}
.lcz-eyecatch .cat{position:absolute;top:26px;left:28px;font-size:12px;color:#fff;z-index:2;}
.lcz-eyecatch .ghost{
  position:absolute;top:44px;left:24px;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:52px;line-height:1.2;color:#fff;opacity:.22;white-space:nowrap;
}
/* 任意画像を設定した場合（テンプレート要素は非出力なので画像のみ） */
.lcz-eyecatch.has-image img{width:100%;height:100%;object-fit:cover;}

.lcz-card__body{padding:26px 28px 24px;display:flex;flex-direction:column;flex:1;}
.lcz-card__title{font-size:17px;font-weight:700;line-height:1.6;margin:0 0 14px;}
.lcz-card__title a:hover{color:var(--lcz-brand);}
.lcz-card__excerpt{font-size:13px;color:var(--lcz-sub);line-height:1.85;margin:0 0 18px;}
.lcz-card__meta{margin-top:auto;font-size:12px;color:var(--lcz-muted);}

/* ---------- タグ ---------- */
/* .lcz-blog a{color:inherit} より詳細度を高くする必要があります */
.lcz-blog .lcz-tags{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px;}
.lcz-blog a.lcz-tag{font-size:12px;color:var(--lcz-brand);}
.lcz-blog a.lcz-tag:hover{color:var(--lcz-brand-dark);text-decoration:underline;}

/* ---------- ページャー ---------- */
.lcz-pager{padding:56px 0 0;text-align:center;}
.lcz-pager__nums{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;}
/* .lcz-pager__nums が無い場合のフォールバック（inline-flex要素を中央寄せ＋間隔） */
.lcz-blog .lcz-pager > .page-numbers{margin:0 7px;}
.lcz-blog .lcz-pager .page-numbers{
  min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #bfe6ef;border-radius:50%;
  font-size:13px;color:var(--lcz-sub);transition:all .18s;text-decoration:none;
}
.lcz-blog .lcz-pager a.page-numbers:hover{border-color:var(--lcz-brand);color:var(--lcz-brand);}
.lcz-blog .lcz-pager .page-numbers.current{background:var(--lcz-brand);color:#fff;border-color:var(--lcz-brand);}
.lcz-blog .lcz-pager .dots{border:none;background:transparent;}
.lcz-pager__status{
  text-align:center;font-size:12px;color:var(--lcz-muted);margin:18px 0 0;
}

.lcz-empty{text-align:center;color:var(--lcz-sub);font-size:14px;padding:80px 0 0;}

/* ==========================================================
   詳細ページ
   ========================================================== */
/* 起点は一覧の .lcz_tit_（padding-top:1.6rem）と同値に揃える */
.lcz-article-head{padding:1.6rem 0 2rem;}
.lcz-badge-row{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
/* CTAボタンと同じ配色（白塗り・水色の線と文字）。
   .lcz-blog a{color:inherit} より詳細度を高くする必要があります */
.lcz-blog a.lcz-badge,
.lcz-blog span.lcz-badge{
  background:#fff;
  border:1px solid var(--lcz-brand);
  color:var(--lcz-brand);
  font-size:12px;border-radius:var(--lcz-pill);padding:5px 18px;
  display:inline-flex;align-items:center;transition:all .2s;
}
.lcz-blog a.lcz-badge:hover{background:var(--lcz-brand);color:#fff;}
.lcz-date{font-size:12px;color:var(--lcz-muted);}
.lcz-article-head h1{font-size:30px;font-weight:700;line-height:1.55;margin:0;}
.lcz-lead{font-size:15px;color:var(--lcz-sub);line-height:1.95;margin:20px 0 0;}
.lcz-article-head .lcz-tags{margin-top:22px;}

/* アイキャッチ（詳細） */
.lcz-hero{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin-bottom:44px;}
.lcz-hero .frame{position:absolute;inset:18px;border:1px solid rgba(255,255,255,.35);}
.lcz-hero .cat{position:absolute;top:34px;left:38px;font-size:13px;color:#fff;z-index:2;}
.lcz-hero .ghost{
  position:absolute;top:58px;left:32px;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:86px;line-height:1.2;color:#fff;opacity:.22;white-space:nowrap;
}
.lcz-hero.has-image img{width:100%;height:100%;object-fit:cover;}

/* 本文シート */
.lcz-sheet{
  background:#fff;border-radius:10px;
  padding:52px 60px 60px;
  box-shadow:0 2px 12px rgba(20,60,75,.05);
}

/* 目次 */
.lcz-toc{background:var(--lcz-brand-soft);border-radius:10px;padding:24px 28px;margin-bottom:48px;}
.lcz-toc__title{font-size:14px;font-weight:700;margin-bottom:14px;}
.lcz-toc ol{list-style:none;counter-reset:lcztoc;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.lcz-toc li{counter-increment:lcztoc;font-size:14px;}
.lcz-toc li::before{content:counter(lcztoc) ".";color:var(--lcz-brand);font-weight:700;margin-right:9px;}
.lcz-toc a:hover{color:var(--lcz-brand);}

/* 本文（ブロックエディタ出力） */
.lcz-body h2{
  font-size:21px;font-weight:700;line-height:1.6;
  padding-bottom:12px;margin:56px 0 22px;
  border-bottom:2px solid var(--lcz-brand);
  scroll-margin-top:24px;
}
.lcz-body h2:first-child{margin-top:0;}
.lcz-body h3{font-size:17px;font-weight:700;line-height:1.6;margin:36px 0 14px;}
.lcz-body p{font-size:16px;line-height:2;margin:0 0 24px;}
.lcz-body ul,.lcz-body ol{margin:0 0 28px;padding-left:1.4em;}
.lcz-body li{font-size:16px;line-height:1.9;margin-bottom:8px;}
.lcz-body img{border-radius:8px;margin:0 auto 32px;}
.lcz-body figure{margin:0 0 32px;}
.lcz-body figcaption{font-size:12px;color:var(--lcz-muted);text-align:center;margin-top:10px;}
.lcz-body a{color:var(--lcz-brand);text-decoration:underline;}

/* 引用をポイント枠として利用（ブロックエディタの「引用」） */
.lcz-body blockquote{
  background:var(--lcz-brand-soft);border-radius:10px;
  padding:20px 24px;margin:0 0 32px;border:none;
}
.lcz-body blockquote p{font-size:15px;line-height:1.9;margin:0;}

/* CTA */
.lcz-cta{
  background:#fff;border:2px solid var(--lcz-brand);border-radius:10px;
  text-align:center;padding:40px 36px;margin:56px 0 0;
}
.lcz-cta h2{font-size:19px;font-weight:700;border:none;padding:0;margin:0 0 10px;}
.lcz-cta p{font-size:14px;color:var(--lcz-sub);margin:0 0 26px;}
.lcz-cta__btns{display:flex;justify-content:center;}
.lcz-blog a.lcz-btn{
  background:#fff;
  border:1px solid var(--lcz-brand);
  color:var(--lcz-brand);
  border-radius:var(--lcz-pill);padding:14px 44px;font-size:14px;
  transition:all .2s;display:inline-flex;align-items:center;justify-content:center;
}
.lcz-blog a.lcz-btn:hover{background:var(--lcz-brand);color:#fff;}

/* 関連記事（見出しは .lcz_tit_ を使うためテーマのCSSに従う） */
.lcz-related{padding:76px 0 0;}

.lcz-back{text-align:center;padding:56px 0 0;}
.lcz-back a{
  display:inline-block;background:#fff;border:1px solid var(--lcz-brand);
  color:var(--lcz-brand);border-radius:var(--lcz-pill);
  padding:15px 46px;font-size:14px;transition:all .2s;
}
.lcz-back a:hover{background:var(--lcz-brand);color:#fff;}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .lcz-sheet{padding:40px 34px 46px;}
  .lcz-hero .ghost{font-size:66px;}
}
@media (max-width:560px){
  .lcz-grid{grid-template-columns:1fr;gap:28px;}
  .lcz-eyecatch .ghost{font-size:44px;}
  .lcz-article-head h1{font-size:23px;}
  .lcz-sheet{padding:32px 22px 40px;}
  .lcz-body p,.lcz-body li{font-size:15px;}
  .lcz-hero .ghost{font-size:50px;top:52px;}
  .lcz-cta{padding:32px 22px;}
  .lcz-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .lcz-blog *{transition:none !important;}
}