/*
Theme Name: SERUM Child (oobe)
Theme URI: https://oobe-io.com
Template: serum_tcd096
Description: SERUM 子テーマ。ブログ一覧（/category/blog/）に年度別フィルター機能を追加（oobe / phd-achd）。親テーマ更新やテーマオプション(dp_options)に影響を与えない。
Author: MOROOKA Seita (oobe)
Author URI: https://oobe-io.com
Version: 1.0.0
Text Domain: tcd-serum-child
*/

/* 親テーマ SERUM のメインスタイルを読み込む
   （親は main-style を get_stylesheet_uri() で読むため、子テーマでは @import で親 style.css を取り込む必要がある） */
@import url("../serum_tcd096/style.css");

/* =====================================================================
   年度別フィルター（年度ボタンバー）… blog / news 共通
   アクセント: main_color #937960 / hover #7c6552 / bg #f4f1ef
   ===================================================================== */
/* お知らせのカテゴリーバー(.news_category_button)と同じピル意匠を流用。
   ラッパーは独自クラス .oobe-year-bar（テーマのスクロールJSと干渉させないため）。
   内側の <ol class="news_category_button"> でボタン見た目を親テーマから継承する。 */
.oobe-year-bar{ width:930px; margin:0 auto 80px; }
/* news: カテゴリーバー直下に置くときは隙間を詰める */
.news_category_button_wrap + .oobe-year-bar{ margin-top:-50px; }
.oobe-year-bar .news_category_button{ display:flex; flex-wrap:wrap; }
.oobe-year-bar .news_category_button li{ font-size:16px; flex:1 1 0%; }
/* 年は項目数が多いので左右paddingを詰めて1行に収める */
.oobe-year-bar .news_category_button li a{ padding:0 8px; }
/* 選択中の年をアクセントでハイライト（カテゴリーバーの素の挙動に対する唯一の差分） */
.oobe-year-bar .news_category_button li.current a{ background:#937960; color:#fff; }
.oobe-year-bar .news_category_button li.current a:hover{ color:#fff !important; }
/* AJAX読み込み中の軽いフィードバック */
#archive_news.is-loading, #archive_blog.is-loading{ opacity:.55; transition:opacity .15s ease; }

@media screen and (max-width:1221px){
  .oobe-year-bar{ width:auto; margin:0 100px 80px; }
  .news_category_button_wrap + .oobe-year-bar{ margin-top:-50px; }
  .oobe-year-bar .news_category_button li{ font-size:14px; }
}
@media screen and (max-width:1000px){
  .oobe-year-bar{ margin:0 60px 80px; }
  .news_category_button_wrap + .oobe-year-bar{ margin-top:-50px; }
}
@media screen and (max-width:800px){
  .oobe-year-bar{ margin:0 20px 40px; }
  .news_category_button_wrap + .oobe-year-bar{ margin-top:-30px; }
  /* モバイルはスクロールではなく折返し（年は数が多いので2段以上で見せる） */
  .oobe-year-bar .news_category_button{ flex-wrap:wrap; justify-content:center; }
  .oobe-year-bar .news_category_button li{ min-width:0; flex:1 1 22%; }
  .oobe-year-bar .news_category_button li a{ height:46px; padding:0 6px; white-space:nowrap; }
}

/* =====================================================================
   /news/ 専用「過去の投稿」右サイドバー（左右余白を使う2カラム）
   ===================================================================== */
/* 余白が十分にある幅(>=1280px)でだけ2カラム化。中央コンテンツ(930px)はそのまま、右にサイドバー */
@media screen and (min-width:1280px){
  .post-type-archive-news .oobe-news-layout{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:40px;
    width:1210px;
    max-width:calc(100% - 40px);
    margin:0 auto;
  }
  .post-type-archive-news .oobe-news-main{ width:930px; flex:0 0 930px; }
  .post-type-archive-news .oobe-news-main .news_category_button_wrap,
  .post-type-archive-news .oobe-news-main #news_list{ margin-left:auto; margin-right:auto; }
  .post-type-archive-news .oobe-news-side{ flex:0 0 240px; width:240px; margin-top:0; }
}
/* サイドバー意匠 */
.oobe-news-side{ box-sizing:border-box; }
.oobe-side-widget{ border:1px solid #e5ddd6; background:#fff; }
.oobe-side-ttl{
  margin:0; padding:14px 18px;
  background:#f4f1ef; color:#5b5048;
  font-size:15px; letter-spacing:.08em; font-weight:700;
}
.oobe-side-years{ list-style:none; margin:0; padding:0; }
.oobe-side-years li{ margin:0; }
.oobe-side-years li a{
  display:block; padding:13px 18px;
  border-top:1px solid #efe9e3;
  color:#5b5048; font-size:14px; text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.oobe-side-years li a:hover{ background:#f7f4f1; color:#937960; }
.oobe-side-years li.current a{ color:#937960; font-weight:700; }
.oobe-side-back{
  display:block; padding:14px 18px;
  border-top:1px solid #efe9e3;
  color:#937960; font-size:13px; text-decoration:none;
}
.oobe-side-back:hover{ text-decoration:underline; }
/* 1280px未満は余白が無いので一覧の下に回す */
@media screen and (max-width:1279px){
  .oobe-news-side{ width:auto; max-width:930px; margin:50px auto 0; }
}
@media screen and (max-width:1000px){ .oobe-news-side{ margin:50px 60px 0; } }
@media screen and (max-width:800px){ .oobe-news-side{ margin:40px 20px 0; } }