/*
Theme Name: 津山城・城下町泊プロジェクト お知らせ
Theme URI: https://tsuyama-shirohaku.vmg.co.jp/news/
Description: 「お知らせ」用カスタムテーマ。既存LPのstyle.cssを基盤に読み込み、同じヘッダー/フッター/ボタン/見出し/ページネーションのデザインをそのまま継承。本ファイルはお知らせ固有部分の追加スタイルのみ。
Author: NAUHA
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: tsuyama-news
*/

/* ============================================================
   お知らせ固有スタイル（ベース・ヘッダー・フッター・ボタン・
   ページネーション・見出しは 既存LPの css/style.css を継承）
   単位はLPに合わせて rem（PC=16px基準／SP時はLP側でvwスケール）
   ============================================================ */

/* 色は実サイト css/style.css で使われている値に統一 */
:root{ --gold:#c48f32; --blue:#5a788d; --sub:#6e6e6e; --line:#e2e2e2; --soft:#f3f3f3; }

/* 固定ヘッダー分の余白（LPの .l-main と同値） */
.news-main{ padding-top:6.9375rem; }
@media (width <= 768px){ .news-main{ padding-top:3.8125rem; } }

.news-inner{ max-width:75rem; margin:0 auto; padding:3.75rem 1.875rem 6.25rem; }
@media (width <= 768px){ .news-inner{ padding:2.5rem 1.75rem 3.75rem; } }

/* パンくず */
.breadcrumb{ font-size:.875rem; color:var(--sub); margin-bottom:2.5rem; line-height:1.9; }
.breadcrumb a{ color:var(--sub); }
.breadcrumb a:hover{ color:var(--gold); opacity:1; }
.breadcrumb .sep{ margin:0 .5rem; color:#c3c3c3; }
@media (width <= 768px){ .breadcrumb{ font-size:.78rem; margin-bottom:1.5rem; } }

/* ページ見出し：実サイトの c-title クラス（c-title__en / c-title__h2）をそのまま使用し、
   フォント・サイズ・色を完全一致させる。ここでは中央寄せと重なりの調整のみ行う。 */
.pagehead{ position:relative; text-align:center; margin-bottom:3.75rem; }
.pagehead .c-title__en{ display:block; letter-spacing:.04em; }
.pagehead .c-title__h2{ margin-top:-4.5rem; margin-bottom:0; }
@media (width <= 768px){
  .pagehead{ margin-bottom:2.25rem; }
  .pagehead .c-title__h2{ margin-top:-1.5rem; }
}

/* 2カラム */
.wrap{ display:grid; grid-template-columns:1fr 17rem; gap:3.5rem; align-items:start; }
@media (width <= 900px){ .wrap{ grid-template-columns:1fr; gap:3rem; } }

/* ===== 一覧：カテゴリタブ＋3カラムグリッド（提案書2-2準拠） ===== */
.pagehead__lead{ font-size:.95rem; color:var(--sub); margin-top:1rem; }
@media (width <= 768px){ .pagehead__lead{ font-size:.8rem; margin-top:.6rem; } }

.cat-tabs{ display:flex; align-items:center; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.cat-tabs__label{ font-size:.95rem; font-weight:600; }
.cat-tabs__list{ display:flex; gap:.5rem; flex-wrap:wrap; }
.cat-tab{ display:inline-block; padding:.45rem 1.3rem; font-size:.9rem; border:1px solid var(--line); background:#fff; color:#3a3a3a; transition:.3s; }
.cat-tab:hover{ border-color:#333; opacity:1; }
.cat-tab.is-active{ background:#333; border-color:#333; color:#fff; }
@media (width <= 768px){ .cat-tabs{ gap:.6rem; margin-bottom:1.75rem; } .cat-tab{ font-size:.8rem; padding:.35rem 1rem; } }

.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem 1.75rem; }
@media (width <= 900px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }
@media (width <= 560px){ .news-grid{ grid-template-columns:1fr; gap:1.5rem; } }

.ncard{ display:flex; flex-direction:column; border:1px solid var(--line); background:#fff; transition:.3s; }
.ncard:hover{ opacity:1; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.ncard__thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--soft); }
.ncard__thumb img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.ncard:hover .ncard__thumb img{ transform:scale(1.05); }
.ncard__ph{ display:flex; height:100%; align-items:center; justify-content:center; color:#b7b7b7; font-size:.75rem; letter-spacing:.12em; background:linear-gradient(135deg,#eef1f2,#e0e5e8); }
.ncard__cat{ position:absolute; top:0; left:0; background:rgba(30,30,30,.82); color:#fff; font-size:.72rem; letter-spacing:.06em; padding:.3rem .9rem; z-index:1; }
.ncard__date{ font-size:.82rem; color:var(--sub); margin:1rem 1.25rem .3rem; }
.ncard__title{ font-size:1.12rem; font-weight:600; line-height:1.55; margin:0 1.25rem; transition:.3s; }
.ncard:hover .ncard__title{ color:var(--gold); }
.ncard__excerpt{ font-size:.85rem; color:#555; line-height:1.8; margin:.6rem 1.25rem 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ncard__more{ margin:1rem 1.25rem 1.25rem; font-size:.85rem; color:var(--gold); display:inline-flex; align-items:center; gap:.3rem; }
.ncard__arrow{ font-size:1rem; }
@media (width <= 768px){ .ncard__title{ font-size:1rem; } }

/* タグ（記事詳細のメタで使用） */
.tag{ display:inline-block; background:var(--blue); color:#fff; font-size:.72rem; padding:.15rem .8rem; letter-spacing:.06em; }
a.tag:hover{ opacity:.85; }
.empty{ padding:4rem 0; text-align:center; color:var(--sub); }

/* ===== ページネーション（指示書準拠：「‹ 1 2 3 ›」のミニマル表示） ===== */
.pager{ margin-top:3.5rem; }
.pager .nav-links{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1.1rem; }
.pager .page-numbers{ font-size:1rem; color:#3a3a3a; line-height:1; padding:.2rem .3rem; transition:.3s; }
.pager a.page-numbers:hover{ color:var(--gold); opacity:1; }
.pager .page-numbers.current{ color:var(--gold); font-weight:600; border-bottom:1px solid var(--gold); padding-bottom:.35rem; }
.pager .page-numbers.prev,.pager .page-numbers.next{ color:var(--sub); font-size:1.05rem; }
.pager .page-numbers.dots{ color:#bbb; }

/* ===== フッター（指示書準拠：ご支援CTAバー＋濃色フッター） ===== */
.ft-cta{ background:#f2ebe5; }
.ft-cta__inner{ max-width:75rem; margin:0 auto; padding:1.75rem 1.875rem; display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; }
.ft-cta__text{ font-size:1.12rem; }
@media (width <= 768px){ .ft-cta__inner{ padding:1.5rem 1.75rem; gap:1rem; } .ft-cta__text{ font-size:.9rem; } }

.ft{ background:#191814; color:#fff; }
.ft__inner{ max-width:75rem; margin:0 auto; padding:2.75rem 1.875rem 3rem; }
.ft__name{ font-size:1.25rem; font-weight:600; letter-spacing:.04em; color:#fff; }
.ft__tag{ font-size:.82rem; color:#a9a49c; margin-top:.4rem; }
.ft__nav{ display:flex; flex-wrap:wrap; gap:1.75rem; margin-top:1.75rem; }
.ft__nav a{ font-size:.85rem; color:#d5d1c9; }
.ft__nav a:hover{ color:var(--gold); opacity:1; }
@media (width <= 768px){
  .ft__inner{ padding:2rem 1.75rem 2.25rem; }
  .ft__name{ font-size:1rem; }
  .ft__nav{ gap:.9rem 1rem; margin-top:1.25rem; }
  .ft__nav a{ font-size:.75rem; }
}

/* ===== サイドバー ===== */
.side{ display:flex; flex-direction:column; gap:2.5rem; }
.side__blk h3{ font-size:1.05rem; font-weight:600; letter-spacing:.06em; padding-bottom:.6rem; border-bottom:2px solid #333; margin-bottom:.8rem; }
.cat{ list-style:none; margin:0; padding:0; }
.cat li{ border-bottom:1px solid var(--line); }
.cat li a{ display:block; padding:.7rem .3rem .7rem 1.1rem; font-size:.9rem; position:relative; color:#3a3a3a; }
.cat li a:before{ content:"›"; position:absolute; left:.1rem; color:var(--gold); }
.cat li a:hover,.cat li.current-cat>a{ color:var(--gold); opacity:1; }
.cat .children{ padding-left:.8rem; }
.recent{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.recent li a{ display:grid; grid-template-columns:4rem 1fr; gap:.8rem; align-items:center; }
.recent li a:hover{ opacity:1; }
.recent__th{ aspect-ratio:1; overflow:hidden; background:var(--soft); }
.recent__th img{ width:100%; height:100%; object-fit:cover; }
.recent__ph{ display:block; width:100%; height:100%; background:linear-gradient(135deg,#eef1f2,#e0e5e8); }
.recent__d{ font-size:.72rem; color:var(--sub); }
.recent__t{ font-size:.82rem; line-height:1.5; margin-top:.15rem; display:block; }
.recent li:hover .recent__t{ color:var(--gold); }
.cta{ background:var(--blue); color:#fff; padding:1.75rem 1.4rem; text-align:center; }
.cta h4{ font-size:1.1rem; font-weight:600; letter-spacing:.06em; }
.cta p{ font-size:.78rem; color:rgba(255,255,255,.85); margin:.5rem 0 1.1rem; }

/* ===== 記事詳細 ===== */
.article{ min-width:0; }
.article__meta{ display:flex; align-items:center; gap:1rem; font-size:.82rem; color:var(--sub); margin-bottom:.9rem; flex-wrap:wrap; }
.article__title{ font-size:2rem; line-height:1.5; font-weight:600; letter-spacing:.02em; }
.article__title .bar{ display:block; width:2.5rem; height:2px; background:var(--gold); margin-top:1.1rem; }
@media (width <= 768px){ .article__title{ font-size:1.35rem; } }
.article__eyecatch{ overflow:hidden; margin:1.75rem 0; }
.article__eyecatch img{ width:100%; }

/* 本文は実サイトの p（1.12rem / line-height:2）に一致 */
.prose{ font-size:1.12rem; line-height:2; }
.prose p{ font-size:1.12rem; margin-bottom:1.5rem; }
@media (width <= 768px){ .prose,.prose p{ font-size:.85rem; } }
.prose h2{ font-size:1.5rem; font-weight:600; margin:2.5rem 0 1rem; padding-left:.9rem; border-left:4px solid var(--gold); line-height:1.5; }
.prose h3{ font-size:1.25rem; font-weight:600; margin:2rem 0 .8rem; }
.prose ul,.prose ol{ margin:0 0 1.5rem 1.4em; }
.prose li{ margin:.3rem 0; }
.prose a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--gold); opacity:1; }
.prose img{ margin:.6rem 0; }
.prose blockquote{ border-left:3px solid var(--line); padding:.4rem 0 .4rem 1.1rem; color:#555; margin:0 0 1.5rem; }
/* YouTube等のレスポンシブ埋め込み */
.prose figure.wp-block-embed{ margin:1.75rem 0; }
.prose .wp-block-embed iframe,.prose iframe[src*="youtube"],.prose iframe[src*="youtu.be"]{ width:100%; aspect-ratio:16/9; height:auto; border:0; }
/* Googleドライブ / PDF リンクをバッジ表示（クエリ・大文字対応） */
.prose a[href*="drive.google.com"],.prose a[href$=".pdf"],.prose a[href*=".pdf?"],.prose a[href$=".PDF"],.prose a[href*=".PDF?"]{ display:flex; align-items:center; gap:1rem; border:1px solid var(--line); background:var(--soft); padding:1rem 1.25rem; margin:0 0 1.5rem; text-decoration:none; color:#000; transition:.3s; }
.prose a[href*="drive.google.com"]:hover,.prose a[href$=".pdf"]:hover,.prose a[href*=".pdf?"]:hover,.prose a[href$=".PDF"]:hover,.prose a[href*=".PDF?"]:hover{ border-color:var(--gold); opacity:1; }
.prose a[href*="drive.google.com"]:before,.prose a[href$=".pdf"]:before,.prose a[href*=".pdf?"]:before,.prose a[href$=".PDF"]:before,.prose a[href*=".PDF?"]:before{ content:"PDF"; flex:none; width:2.6rem; height:2.6rem; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.prose a[href*="drive.google.com"]:after,.prose a[href$=".pdf"]:after,.prose a[href*=".pdf?"]:after,.prose a[href$=".PDF"]:after,.prose a[href*=".PDF?"]:after{ content:"›"; margin-left:auto; color:var(--gold); font-size:1.2rem; }

.article__foot{ display:flex; justify-content:center; margin-top:3rem; }
/* 白抜きの戻るボタン（c-btnのゴールドに対し枠線版） */
.c-btn--outline{ background:#fff; color:var(--gold); border:1px solid var(--gold); }
.c-btn--outline:after{ border-color:var(--gold) !important; }

/* ============================================================
   トップページの「お知らせ」セクション（提案書2-1）
   ※既存LPのデザイン内に馴染ませる。見出しはLPの c-title__h2 を使用。
   ============================================================ */
.p-lp__news{ background:#fbfaf8; }
.p-lp__news-inner{ padding:6.25rem 1.875rem !important; text-align:center; max-width:80rem !important; }
@media (width <= 768px){ .p-lp__news-inner{ padding:3.125rem 1.75rem !important; } }
.lp-news__title{ margin-bottom:.75rem !important; }
.lp-news__lead{ font-size:1rem; color:var(--sub); }
@media (width <= 768px){ .lp-news__lead{ font-size:.8rem; } }
.lp-news__bar{ display:block; width:2.5rem; height:2px; background:var(--gold); margin:1.5rem auto 3rem; }
@media (width <= 768px){ .lp-news__bar{ margin:1rem auto 2rem; } }

.lp-news__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; text-align:left; }
@media (width <= 900px){ .lp-news__grid{ grid-template-columns:repeat(2,1fr); } }
@media (width <= 560px){ .lp-news__grid{ grid-template-columns:1fr; gap:1.5rem; } }

.lpnews-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); transition:.3s; }
.lpnews-card:hover{ opacity:1; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.lpnews-card__thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--soft); }
.lpnews-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.lpnews-card:hover .lpnews-card__thumb img{ transform:scale(1.05); }
.lpnews-card__ph{ display:flex; height:100%; align-items:center; justify-content:center; color:#b7b7b7; font-size:.75rem; letter-spacing:.12em; background:linear-gradient(135deg,#eef1f2,#e0e5e8); }
.lpnews-card__body{ display:flex; flex-direction:column; padding:1.25rem; flex:1; }
.lpnews-card__meta{ font-size:.8rem; color:var(--gold); letter-spacing:.04em; }
.lpnews-card__sep{ margin:0 .6rem; color:#d9c9a8; }
.lpnews-card__title{ font-size:1.12rem; font-weight:600; line-height:1.55; margin-top:.5rem; transition:.3s; }
.lpnews-card:hover .lpnews-card__title{ color:var(--gold); }
.lpnews-card__excerpt{ font-size:.85rem; color:#555; line-height:1.8; margin-top:.6rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lpnews-card__more{ font-size:.85rem; color:var(--gold); margin-top:1.25rem; align-self:flex-end; display:inline-flex; align-items:center; gap:.3rem; }
.lpnews-card__arrow{ font-size:1rem; }
@media (width <= 768px){ .lpnews-card__title{ font-size:1rem; } }

.lp-news__more{ margin-top:3rem; }
@media (width <= 768px){ .lp-news__more{ margin-top:2rem; } }