@charset "UTF-8";
/* ==========================================================================
   news.css — News一覧（02 news.html / p-news-list）・News詳細（03 news_detail.html / p-news-detail）共用
   参照カンプ：comps/pc/02_news-list_pc_01・02（PCのみ。SPカンプ無し）
   共通トークン＝base.css／共通c-・l-＝common.css。ここはページ固有のみ。
   ヒーロー大見出し＝common .c-heading--page／末尾CONTACT＝common .c-contact を使用。
   行ホバー・矢印サークルは TOP（top.css p-top-news）を踏襲。カテゴリ絞り込みJS＝common.js §9
   ========================================================================== */

/* ページスコープ変数（他ページ確定で base.css へ昇格）
   タブ識別色＝TOP/features 踏襲。行ホバー色＝TOP NEWS（--top-news-hover）踏襲 */
.p-news-list,
.p-news-detail {
  --nw-blue:  var(--c-blue); /* #2673BC すべて */
  --nw-green: #8AC54B;        /* お知らせ */
  --nw-teal:  #1DA3A2;        /* イベント・セミナー */
  --nw-deepblue: #15668C;     /* コラム（45）。TOP EXPERTISE 04 の識別色＝青→緑→青緑の次の色 */
  --nw-row-hover: #D7E7F7;    /* 記事行ホバー背景（TOP NEWS 踏襲） */
  --nw-line: #888888;         /* 記事行の破線ボーダー */
}

/* --------------------------------------------------------------------------
   ページヒーロー（大見出し＋パンくず。写真無し）
   -------------------------------------------------------------------------- */
.p-news-hero { padding-block: var(--sp-6) var(--sp-5); }

.p-news-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-news-hero .c-breadcrumb { padding-block: var(--sp-3) 0; }

/* --------------------------------------------------------------------------
   一覧本体：内側に寄せる（カンプ：タイトルより内側）
   -------------------------------------------------------------------------- */
.p-news-body { padding-block: var(--sp-4) var(--sp-8); }

.p-news__inner {
  max-width: 1040px;
  margin-inline: auto;
}

/* 区切り線（タブ下・リスト下。#707070） */
.p-news__rule {
  height: 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}

.p-news__rule--top    { margin-top: var(--sp-5); }
.p-news__rule--bottom { margin-top: 0; }

/* --------------------------------------------------------------------------
   絞り込み（カテゴリタブ＋年別セレクト）
   -------------------------------------------------------------------------- */
.p-news-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.p-news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* タブ：非アクティブ＝白地＋細枠／アクティブ・ホバー＝識別色で塗り＋白文字 */
.p-news-tab {
  min-width: 180px;
  padding: 14px 28px;
  border: 1px solid var(--c-gray-light);
  border-radius: 10px; /* R10 */
  background: var(--c-white);
  color: var(--c-text);
  font-size: var(--fs-base); /* 16px */
  font-weight: 500; /* Medium */
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ホバー＝選択時と同じ塗り（マウスオーバーで選択色をプレビュー） */
.p-news-tab:hover,
.p-news-tab.is-active {
  border-color: transparent;
  color: var(--c-white);
}

/* 識別色（スラッグ別）。タブはタームから動的生成（45）＝下記に無いスラッグは既定色ネイビー（白文字が消えないための保険） */
.p-news-tab:hover,
.p-news-tab.is-active          { background: var(--c-navy); }
.p-news-tab--all:hover,
.p-news-tab--all.is-active     { background: var(--nw-blue); }
.p-news-tab--info:hover,
.p-news-tab--info.is-active    { background: var(--nw-green); }
.p-news-tab--event:hover,
.p-news-tab--event.is-active   { background: var(--nw-teal); }
.p-news-tab--column:hover,
.p-news-tab--column.is-active  { background: var(--nw-deepblue); } /* コラム（45） */

/* 年別セレクト（ネイティブselect＋自前の▼） */
.p-news-year { position: relative; }

.p-news-year__select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 120px;
  padding: 14px 44px 14px 20px;
  border: 1px solid var(--c-gray-light);
  border-radius: 12px;
  background: var(--c-white);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.p-news-year::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--c-text);
  border-bottom: 2px solid var(--c-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   記事リスト（行：日付＋カテゴリ＋タイトル＋矢印サークル。行間は破線）
   -------------------------------------------------------------------------- */
.p-news-item {
  transition: background-color var(--dur) var(--ease);
}

.p-news-item:not(:last-child) {
  border-bottom: 1px dashed var(--nw-line); /* #888888 */
}

.p-news-item[hidden] { display: none; }

/* ホバー：行背景を淡水色に／タイトルを青＋下線に（TOP NEWS 踏襲） */
.p-news-item:hover { background: var(--nw-row-hover); }

.p-news-item:hover .p-news-title {
  color: var(--c-blue);
  text-decoration: underline;
}

.p-news-link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: 40px; /* 各項目（行）の天地パディング40px */
  padding-inline: var(--sp-3);
}

.p-news-date {
  flex-shrink: 0;
  font-size: var(--fs-base); /* 16px */
  font-weight: 700; /* Bold */
  letter-spacing: 0;
}

.p-news-cat {
  flex-shrink: 0;
  width: 150px;
  padding: 6px 12px;
  border-radius: 10px; /* R10（指定：カテゴリーの長方形を角丸に） */
  background: var(--c-bg-tint);
  color: var(--c-text);
  font-size: .875rem; /* 14px */
  text-align: center;
  line-height: 1.5;
}

.p-news-title {
  flex: 1;
  font-size: var(--fs-base); /* 16px */
  font-weight: 400; /* Regular */
  line-height: 1.6;
  transition: color var(--dur) var(--ease);
}

.p-news-arrow {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   News詳細（03 news_detail.html / p-news-detail）
   本文（左）＋カテゴリーサイド（右）の2カラム。本文はブロックエディター（Gutenberg）想定。
   ========================================================================== */
.p-news-detail__sec { padding-block: var(--sp-4) var(--sp-8); }

.p-news-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-12);
  align-items: start;
}

/* 記事メタ・タイトル */
.p-news-detail__date {
  display: block;
  font-size: .9375rem; /* 15px */
  letter-spacing: 0;
}

.p-news-detail__title {
  margin-top: var(--sp-2);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 1.875rem); /* 24→30px */
  font-weight: 700;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   ブロックエディター本文（the_content 出力）の汎用スタイル
   段落／見出し／リスト／画像／引用／リンク／文字色（accent）を p-news-detail__content 配下で統一
   -------------------------------------------------------------------------- */
.p-news-detail__content {
  max-width: 800px; /* ブロックエディター本文の読み幅上限 */
  margin-top: var(--sp-5);
}

/* ブロック間の標準余白（Gutenberg のブロック積み） */
.p-news-detail__content > * + * { margin-top: 1.75em; }

.p-news-detail__content p { line-height: 2; }

.p-news-detail__content h2 {
  margin-top: 2em;
  padding-left: var(--sp-2);
  border-left: 5px solid var(--c-accent);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1.5;
}

.p-news-detail__content h3 {
  margin-top: 1.8em;
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.6;
}

.p-news-detail__content ul,
.p-news-detail__content ol {
  padding-left: 1.6em;
  line-height: 1.9;
}
.p-news-detail__content ul { list-style: disc; }
.p-news-detail__content ol { list-style: decimal; }
.p-news-detail__content li + li { margin-top: .5em; }

/* 画像ブロックは前後に広めの余白を取る（カンプ準拠） */
.p-news-detail__content figure { margin-block: var(--sp-8); margin-inline: 0; }
.p-news-detail__content img { max-width: 100%; height: auto; }

.p-news-detail__content a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all; /* 長いURLの折返し */
}
.p-news-detail__content a:hover { opacity: .7; }

.p-news-detail__content strong { font-weight: 700; }
.p-news-detail__content u { text-decoration: underline; text-underline-offset: 3px; }

/* 文字色・背景色（ブロックエディターのカラーパレット。inc/setup.php の editor-color-palette と対応）
   WP コアも .has-{slug}-color / .has-{slug}-background-color を出力するが、本文エリア内で確実に効くようテーマ側でも定義（45） */
.p-news-detail__content .has-accent-color { color: var(--c-accent); }
.p-news-detail__content .has-blue-color   { color: var(--c-blue); }        /* 45：ブルー #2673BC */
.p-news-detail__content .has-lavender-background-color { background-color: var(--c-bg-tint); } /* 45：ラベンダー #F1EFF8 */
/* 背景色つきブロックの内側余白（WP 標準 p.has-background と同等。コアCSSが無い場合の保険） */
.p-news-detail__content .has-background { padding: 1em 1.25em; }

.p-news-detail__content blockquote {
  padding: var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--c-gray-light);
  color: var(--c-gray);
}

/* カテゴリーサイド（右） */
.p-news-side__title {
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-lg); /* 18px */
  font-weight: 700;
}

.p-news-side__list {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.p-news-side__cat {
  display: block;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--c-bg-tint);
  color: var(--c-text);
  font-size: var(--fs-base); /* 16px */
  font-weight: 500; /* Medium */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ホバー：カテゴリごとの識別色（青/緑/青緑/コラム=深青）で塗り＋白文字。未定義スラッグは既定色ネイビー（45） */
.p-news-side__cat:hover { background: var(--c-navy); color: var(--c-white); }
.p-news-side__cat--all:hover    { background: var(--nw-blue); }
.p-news-side__cat--info:hover   { background: var(--nw-green); }
.p-news-side__cat--event:hover  { background: var(--nw-teal); }
.p-news-side__cat--column:hover { background: var(--nw-deepblue); } /* コラム（45） */

/* ==========================================================================
   SP（〜767px）：カンプ支給無し。TOP/features の縮退ルールで展開
   ・タブは横スクロールせず折返し／年別は次行／行は日付・カテゴリ→タイトル→矢印で折返し
   ========================================================================== */
@media (max-width: 767px) {

  .p-news-hero { padding-block: var(--sp-4) var(--sp-3); }

  .p-news-body { padding-block: var(--sp-2) var(--sp-6); }

  .p-news__inner { max-width: none; }

  .p-news-filter { align-items: stretch; }
  .p-news-tabs { width: 100%; }
  /* SPはタブ3つを1行に収める（文字14px・左右パディング圧縮） */
  .p-news-tab { flex: 1 1 auto; min-width: 0; padding: 12px 8px; font-size: .875rem; }
  .p-news-year { width: 100%; }
  .p-news-year__select { width: 100%; }

  /* 行：日付＋カテゴリを上段、タイトルを次段、矢印を右端に（TOP SP 踏襲） */
  .p-news-link {
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding-inline: var(--sp-1);
  }
  .p-news-cat { width: auto; }
  .p-news-title { flex: 1 1 100%; order: 1; }
  .p-news-arrow { margin-left: auto; }

  /* 詳細：1カラム化（本文の下にカテゴリーサイド） */
  .p-news-detail__sec { padding-block: var(--sp-2) var(--sp-6); }
  .p-news-detail__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
}