/* =========================================================
   YIN YAN NEWS（一覧・カテゴリー・詳細）
   functions.php から NEWS のページだけで読み込み
   既存の style.css（.blog_wrap ほか固定ページ用）とは独立
   ========================================================= */

:root{
  --nw-bg:        #EFEDE8;  /* 背景。白に戻すなら #fff */
  --nw-ink:       #33312D;
  --nw-ink-soft:  #7A766F;
  --nw-ink-meta:  #8E8A82;
  --nw-thumb-txt: #E3E0D9;
  --nw-line:      #D6D2CA;

  --nw-fs: .8;          /* 文字サイズの倍率（PC・タブレット）。元に戻すなら 1 */
  --nw-fs-sp: .9;       /* 文字サイズの倍率（SP）。元に戻すなら 1 */

  --nw-ratio: 5 / 7;
  --nw-side: 8vw;       /* 旧 6vw：カードを約10%小さくして余白を確保 */
  --nw-col-gap: 48px;   /* 旧 32px */
  --nw-row-gap: 88px;
  --nw-w-body: 640px;
  --nw-w-wide: 880px;

  --nw-f-en:   "adobe-garamond-pro", "Cormorant Garamond", serif;
  --nw-f-title: "Yu Mincho", "shippori-mincho-b1", "hiragino-mincho-pron", serif;
  --nw-f-body:  "Yu Mincho", "hiragino-mincho-pron", "Yu Mincho","Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

body:has(.news_wrap){ background:var(--nw-bg); }

.news_wrap{
  padding:max(140px, 10vw) var(--nw-side) 0;
  color:var(--nw-ink);
  font-family:var(--nw-f-body);
  -webkit-font-smoothing:antialiased;
}
.news_wrap a,
.news_wrap a:link,
.news_wrap a:visited{ color:inherit; text-decoration:none; }
.news_wrap img{ max-width:100%; height:auto; display:block; }


/* ---------- 見出し + 絞り込み ---------- */
.news_head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin-bottom:72px;
}
.news_head_title{
  font-family:var(--nw-f-en); font-weight:400;
  font-size:clamp(calc(28px * var(--nw-fs)), calc(3.2vw * var(--nw-fs)), calc(40px * var(--nw-fs)));
  letter-spacing:.42em; line-height:1.2;
}
.news_filter{ display:flex; flex-wrap:wrap; gap:8px 28px; list-style:none; }
.news_filter a{
  display:inline-block; padding:4px 0;
  font-family:var(--nw-f-en); font-size:calc(15px * var(--nw-fs)); letter-spacing:.24em;
  color:var(--nw-ink-meta) !important;
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.news_filter a:hover,
.news_filter a[aria-current="page"]{ color:var(--nw-ink) !important; border-color:var(--nw-ink); }


/* ---------- グリッド ---------- */
.news_grid{
  list-style:none;
  display:grid; grid-template-columns:repeat(4, 1fr);
  column-gap:var(--nw-col-gap); row-gap:var(--nw-row-gap);
  align-items:start;   /* 上端は揃え、下端は成り行きでずらす */
}
.news_card{ display:block; }
.news_card:focus-visible,
.news_wrap a:focus-visible{ outline:1px solid var(--nw-ink); outline-offset:6px; }

.news_thumb{ aspect-ratio:var(--nw-ratio); overflow:hidden; background:#d9d5cd; }
.news_thumb img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(.96);   /* 写真のムラを少しだけ均す */
  transition:opacity .5s;
}
.news_card:hover .news_thumb img{ opacity:.82; }

.news_thumb--text{ background:var(--nw-thumb-txt); display:flex; align-items:center; justify-content:center; }
.news_thumb--text span{
  font-family:var(--nw-f-en); font-size:clamp(calc(15px * var(--nw-fs)), calc(1.3vw * var(--nw-fs)), calc(19px * var(--nw-fs)));
  letter-spacing:.42em; padding-left:.42em; color:var(--nw-ink-meta);
}

.news_title{
  margin-top:28px;
  font-family:var(--nw-f-title); font-weight:500;
  font-size:calc(16px * var(--nw-fs)); line-height:1.75; letter-spacing:.08em;
}
.news_excerpt{
  margin-top:14px;
  font-size:calc(12.5px * var(--nw-fs)); line-height:2; letter-spacing:.04em; color:var(--nw-ink-soft);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news_meta{
  margin-top:20px;
  font-family:var(--nw-f-en); font-size:calc(13px * var(--nw-fs)); letter-spacing:.15em; color:var(--nw-ink-meta);
}
.news_meta .sep{ margin:0 .9em; }
.news_empty{ padding:40px 0 120px; font-size:calc(14px * var(--nw-fs)); }


/* ---------- ページ送り ---------- */
.news_pager{ padding:120px 0 140px; }
.news_pager ul.page-numbers{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 32px;
  font-family:var(--nw-f-en); font-size:calc(16px * var(--nw-fs)); letter-spacing:.2em;
}
.news_pager .page-numbers li{ margin:0; }
.news_pager a.page-numbers{ color:var(--nw-ink-meta) !important; transition:color .3s; }
.news_pager a.page-numbers:hover{ color:var(--nw-ink) !important; }
.news_pager span.page-numbers.current{ border-bottom:1px solid var(--nw-ink); }


/* ---------- 詳細ページ ---------- */
.news_wrap--single{ padding-left:20px; padding-right:20px; }

.news_post_head{ max-width:var(--nw-w-body); margin:0 auto; }
.news_post_head .news_meta{ margin-top:0; font-size:calc(13px * var(--nw-fs)); }
.news_post_head .news_meta a{ transition:color .3s; }
.news_post_head .news_meta a:hover{ color:var(--nw-ink); }
.news_post_title{
  margin-top:24px;
  font-family:var(--nw-f-title); font-weight:500;
  font-size:clamp(calc(20px * var(--nw-fs)), calc(2vw * var(--nw-fs)), calc(26px * var(--nw-fs))); line-height:1.7; letter-spacing:.1em;
}

.news_post_figure{ max-width:var(--nw-w-wide); margin:64px auto 0; }
.news_post_figure img{ width:100%; }

.news_post_body{
  max-width:var(--nw-w-body); margin:64px auto 0;
  font-size:calc(14.5px * var(--nw-fs)); line-height:2.2; letter-spacing:.06em;
}
.news_post_body > * + *{ margin-top:1.6em; }
.news_post_body h2,
.news_post_body h3{
  margin-top:3.2em; margin-bottom:-.4em;
  font-family:var(--nw-f-title); font-weight:500; line-height:1.8; letter-spacing:.1em;
}
.news_post_body h2{ font-size:calc(17px * var(--nw-fs)); }
.news_post_body h3{ font-size:calc(15.5px * var(--nw-fs)); }
.news_post_body a{ border-bottom:1px solid var(--nw-line); transition:border-color .3s; }
.news_post_body a:hover{ border-color:var(--nw-ink); }
.news_post_body ul,
.news_post_body ol{ padding-left:1.4em; }
.news_post_body ul{ list-style:disc; }
.news_post_body ol{ list-style:decimal; }
.news_post_body strong{ font-weight:500; }

/* 本文中の画像：投稿時に選んだサイズ（中など）のまま、本文幅の中で中央に */
.news_post_body .wp-block-image,
.news_post_body .wp-block-gallery{
  margin-top:3.6em; margin-bottom:3.6em;
}
.news_post_body .wp-block-image img,
.news_post_body p img{
  width:auto; max-width:100%; height:auto; margin:0 auto;
}
.news_post_body figcaption{
  margin-top:12px; text-align:center;
  font-size:calc(11.5px * var(--nw-fs)); letter-spacing:.06em; color:var(--nw-ink-meta);
}

/* 前後の記事 */
.news_post_nav{
  max-width:var(--nw-w-body); margin:120px auto 0;
  padding-top:32px; border-top:1px solid var(--nw-line);
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.news_post_nav a{ display:block; }
.news_post_nav .next{ text-align:right; }
.news_post_nav .dir{
  display:block;
  font-family:var(--nw-f-en); font-size:calc(13px * var(--nw-fs)); letter-spacing:.22em; color:var(--nw-ink-meta);
}
.news_post_nav .t{
  display:block; margin-top:8px;
  font-family:var(--nw-f-title); font-size:calc(13.5px * var(--nw-fs)); line-height:1.8; letter-spacing:.06em;
  transition:opacity .3s;
}
.news_post_nav a:hover .t{ opacity:.6; }

/* More News */
.news_more{ margin:160px calc(var(--nw-side) - 20px) 0; padding-bottom:160px; }
.news_more_head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:48px;
}
.news_more_head h2{
  font-family:var(--nw-f-en); font-weight:400;
  font-size:clamp(calc(22px * var(--nw-fs)), calc(2.4vw * var(--nw-fs)), calc(30px * var(--nw-fs))); letter-spacing:.2em;
}
.news_more_head a{
  font-family:var(--nw-f-en); font-size:calc(15px * var(--nw-fs)); letter-spacing:.22em;
  color:var(--nw-ink-meta) !important;
  border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.news_more_head a:hover{ color:var(--nw-ink) !important; border-color:var(--nw-ink); }
.news_more .news_grid{ row-gap:56px; }


/* ---------- レスポンシブ ---------- */
@media (max-width:1100px){
  .news_grid{ grid-template-columns:repeat(3, 1fr); }
  .news_more .news_grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px){
  :root{ --nw-side:7vw; --nw-col-gap:14px; --nw-row-gap:52px; }   /* 左右7vw＝中身は約86%幅 */

  .news_wrap{ padding-top:21vw; }
  .news_head{ flex-direction:column; gap:20px; margin-bottom:40px; }
  .news_filter{ gap:8px 22px; }
  .news_filter a{ font-size:calc(13px * var(--nw-fs-sp)); }

  .news_grid{ grid-template-columns:repeat(2, 1fr); }
  .news_title{ margin-top:16px; font-size:calc(12px * var(--nw-fs-sp)); line-height:1.7; letter-spacing:.04em; }
  .news_excerpt{ display:none; }   /* SPは抜粋を省いて一覧性優先 */
  .news_meta{ margin-top:10px; font-size:calc(11px * var(--nw-fs-sp)); letter-spacing:.12em; }
  .news_meta .sep{ margin:0 .6em; }
  .news_pager{ padding:80px 0 96px; }

  /* SP：文章エリアを幅83%に */
  .news_wrap--single{ padding-left:0; padding-right:0; }
  .news_post_head,
  .news_post_body,
  .news_post_nav{ width:86%; margin-left:auto; margin-right:auto; }

  .news_post_head .news_meta{ font-size:calc(12px * var(--nw-fs-sp)); }
  .news_post_title{ margin-top:16px; font-size:calc(18px * var(--nw-fs-sp)); letter-spacing:.03em; }
  .news_post_figure{ margin:40px -20px 0; }          /* SPは画像を左右いっぱいに */
  .news_post_body{ margin-top:40px; font-size:calc(0.9rem * var(--nw-fs-sp)); line-height:2.2; letter-spacing:.03em; }
  .news_post_nav{ margin-top:80px; }
  .news_more{ margin:100px var(--nw-side) 0; padding-bottom:96px; }
  .news_more_head{ margin-bottom:28px; }
  .news_more .news_grid{ row-gap:40px; }
}
@media (prefers-reduced-motion:reduce){
  .news_wrap *{ transition:none !important; }
}