/* ============================================================
   news.css — お知らせ一覧（news.html）固有スタイル
   目次:
     1. Shared content  見出し・コンテナ
     2. Page hero       ページヒーロー
     3. News index   記事一覧・カテゴリフィルタ
     4. Pagination      ページ送り
     5. Responsive      レスポンシブ（〜760px）
     6. Reduced motion  アニメーション抑制
   ============================================================ */

/* ─── 1. Shared content ─── */
.inner{max-width:1080px;margin:0 auto}
.eyebrow{
  font-family:'Cormorant Garamond',serif;
  font-size:.8rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ai);margin-bottom:.6rem;display:block;
}
.eyebrow::after{
  content:"";display:inline-block;width:48px;height:1px;
  background:var(--ai);vertical-align:middle;margin-left:1.1em;opacity:.5;
}

/* ─── 2. Page hero ─── */
.page-hero{position:relative;margin-top:var(--header-h);height:38vh;min-height:320px;overflow:hidden;display:flex;align-items:flex-end}
.page-hero-bg{position:absolute;inset:0;background-image:url('../image/mcn.hp60.JPG');background-size:cover;background-position:center;background-repeat:no-repeat}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(35,33,28,.4),rgba(35,33,28,.68))}
.page-hero-inner{position:relative;z-index:2;width:100%;padding:0 2rem 4rem;color:var(--washi)}
.page-hero-content{max-width:1080px;margin:0 auto}
.page-hero .eyebrow{color:rgba(242,239,231,.75)}
.page-hero .eyebrow::after{background:rgba(242,239,231,.4)}
.page-hero h1{font-size:clamp(1.5rem,3vw,2.05rem);font-weight:500;letter-spacing:.2em;line-height:1.9;margin:.6rem 0 1.1rem}
.page-hero-lead{font-size:.88rem;line-height:2;color:rgba(242,239,231,.85);max-width:34em}

/* ─── 3. News index ─── */
.news-section{padding:6rem 2rem 8rem}
.news-layout{display:grid;grid-template-columns:200px 1fr;gap:1rem 8rem;align-items:start}
.news-filter{position:sticky;top:calc(var(--header-h) + 3rem)}
.toolbar-label{
  text-align:left;font-family:'Cormorant Garamond',serif;font-size:.72rem;
  letter-spacing:.38em;text-transform:uppercase;color:var(--kobi);margin-bottom:1.4rem;
}
.filter-tabs-wrap{position:relative}
.filter-tabs{
  position:relative;display:flex;flex-direction:column;
  border-top:1px solid var(--line);
}
.filter-btn{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:.6em;
  width:100%;text-align:left;
  font-family:'Zen Kaku Gothic New',sans-serif;font-size:.78rem;letter-spacing:.12em;
  padding:.95em 0 .95em .9em;border:none;border-bottom:1px solid var(--line);
  border-left:2px solid transparent;background:transparent;color:var(--usuzumi);
  cursor:pointer;transition:color .25s,border-color .25s;
}
.filter-btn:hover{color:var(--ai)}
.filter-btn.active{color:var(--sumi);border-left-color:var(--sumi)}
.filter-count{
  font-family:'Cormorant Garamond',serif;font-size:.74rem;letter-spacing:0;
  color:var(--kobi);background:var(--ai-lt);border-radius:100px;padding:.05em .6em;
  min-width:1.7em;text-align:center;transition:background .25s,color .25s;
}
.filter-btn.active .filter-count{background:var(--sumi);color:var(--washi)}
.scroll-hint{display:none}

.news-list{border-top:1px solid var(--line)}
.news-item{
  display:flex;align-items:center;gap:2rem;
  padding:2rem 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:opacity .2s;
}
.news-item:hover{opacity:.6}
.news-date{
  font-family:'Cormorant Garamond',serif;
  font-size:.85rem;letter-spacing:.06em;color:var(--usuzumi);
  white-space:nowrap;flex-shrink:0;min-width:6rem;
}
.news-cat{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:.65rem;letter-spacing:.18em;color:var(--ai);
  border:1px solid var(--ai);
  padding:.2em .75em;white-space:nowrap;flex-shrink:0;
}
.news-title{
  font-family:'Shippori Mincho',serif;
  font-size:.9rem;letter-spacing:.1em;line-height:1.7;
  flex:1;color:var(--sumi);
}
.news-arrow{
  flex-shrink:0;margin-left:auto;
  font-size:.8rem;color:var(--ai);opacity:.6;
}

/* ─── 4. Pagination ─── */
.news-pagination{display:flex;justify-content:center;align-items:center;gap:.6rem;margin-top:5rem}
.page-btn{
  min-width:2.3em;height:2.3em;padding:0 .3em;border-radius:50%;border:1px solid var(--line);
  background:transparent;font-family:'Cormorant Garamond',serif;font-size:.88rem;color:var(--usuzumi);
  cursor:pointer;transition:border-color .25s,color .25s,background .25s;
  display:flex;align-items:center;justify-content:center;
}
.page-btn:hover:not(:disabled):not(.active){border-color:var(--ai);color:var(--ai)}
.page-btn.active{background:var(--sumi);border-color:var(--sumi);color:var(--washi);cursor:default}
.page-btn:disabled{opacity:.3;cursor:not-allowed}
.page-btn.page-arrow{border-color:transparent;font-size:1.1rem}
.page-dots{color:var(--kobi);font-family:'Cormorant Garamond',serif;font-size:.88rem;padding:0 .2em}

/* ─── 5. Responsive（〜760px）─── */
@media(max-width:760px){
  .page-hero{height:34vh;min-height:260px}
  .page-hero-inner{padding:0 1.5rem 2.6rem}
  .page-hero h1{font-size:1.35rem;letter-spacing:.15em;line-height:1.8}
  .page-hero-lead{font-size:.76rem;line-height:2.1}
  .eyebrow{font-size:.7rem;letter-spacing:.3em}
  .news-section{padding:3.5rem 1.5rem 6rem}
  .news-layout{display:block}
  .news-filter{position:static;margin-bottom:2.6rem}
  .toolbar-label{text-align:center;font-size:.64rem;letter-spacing:.28em;margin-bottom:1rem}
  .filter-tabs{flex-direction:row;border-top:none;border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-tabs::-webkit-scrollbar{display:none}
  .filter-btn{font-size:.7rem;padding:.8em 1.1em;white-space:nowrap;flex:0 0 auto;width:auto;border-left:none;border-bottom:2px solid transparent}
  .filter-btn.active{border-left-color:transparent;border-bottom-color:var(--sumi)}
  .filter-count{font-size:.68rem;padding:.05em .5em}
  .scroll-hint{
    display:block;position:absolute;top:0;right:0;bottom:1px;width:2.8rem;
    background:linear-gradient(to right, rgba(242,239,231,0), var(--washi) 65%);
    pointer-events:none;transition:opacity .3s;
  }
  .scroll-hint::after{
    content:'›';position:absolute;right:.2rem;top:50%;
    transform:translateY(-50%);font-family:'Cormorant Garamond',serif;
    font-size:1.2rem;color:var(--kobi);animation:scrollHintPulse 1.6s ease-in-out infinite;
  }
  .filter-tabs-wrap.at-end .scroll-hint{opacity:0}
  .news-item{
    display:grid;
    grid-template-columns:auto auto 1fr auto;
    grid-template-areas:"date cat . ." "title title title arrow";
    gap:1rem;padding:1.5rem 0;
  }
  .news-date{grid-area:date;min-width:auto;font-size:.8rem}
  .news-cat{grid-area:cat}
  .news-title{grid-area:title;font-size:.82rem}
  .news-arrow{grid-area:arrow;align-self:center}
  .news-pagination{margin-top:3rem;gap:.4rem}
  .page-btn{min-width:2.1em;height:2.1em;font-size:.8rem}
}
@keyframes scrollHintPulse{
  0%,100%{transform:translate(0,-50%);opacity:.6}
  50%{transform:translate(4px,-50%);opacity:1}
}

/* ─── 6. Reduced motion ─── */
@media(prefers-reduced-motion:reduce){
  .scroll-hint::after{animation:none}
}