/* ==========================================================================
   news-b.css — お知らせページ（/news/index-b.html）専用のスタイル

   このファイルは **news/index-b.html からのみ読み込む。** 他ページ・案Aに影響しない。

   共通パーツ（ヘッダー／ドロワー／お知らせカルーセル `.b-news`／
   セクション見出し `.b-sechead`）は home-b.css にある。
   ここには**お知らせページ固有のもの**だけを書く：
     N-1. ページヘッダー（FVアニメーションなし）
     N-2. ソートタブ
     N-3. 記事グリッド
     N-4. ページネーション
     N-5. 記事詳細（article.php）

   使うトークン：
     --b-title(#025589) / --b-line(#afafaf) / --b-bg-tint(#e9f2fa) は home-b.css に定義済み。
     --c-ink / --c-text-sub / --ff-title / --fw-* / --radius / --radius-lg / --t-fast は base・theme-b に定義済み。

   **--b-title-light / --b-title-dark / --b-bg-page / --b-img-shadow は service-b.css にしか無い**
   （お知らせページは service-b.css を読み込まないため、ここで補って定義する）。値はサービス／料金ページと同じ
   （--b-bg-page は service-b.css と同じく --b-bg-tint-light を参照。この変数自体は home-b.css 定義済みで、
   news-b.css も home-b.css を読み込む前提のページでしか使わないため参照できる）。
   セクションタイトル・アイキャッチの2色の青、記事本文の引用ブロックの地色、
   カバー画像の右下の青いずれ影をそろえるために必要。

   --b-img-shadow は service-b.css（52・57行目）と同じく768px未満／以上で値が変わる
   （767px以下はvwだと影がほとんど消えるため固定6px）。ブレークポイントも含めて移す。
   ========================================================================== */

.theme-b {
  --b-title-light: #489ad8;
  --b-title-dark: #176ebc;
  --b-bg-page: var(--b-bg-tint-light);
  --b-img-shadow: 6px 6px 0 rgba(23, 110, 187, 0.55);
}

@media (min-width: 768px) {
  .theme-b {
    --b-img-shadow: 0.55vw 0.55vw 0 rgba(23, 110, 187, 0.55);
  }
}

/* ==========================================================================
   N-1. ページヘッダー（FVアニメーションなし・2026-08-25 指示）

   サービス／料金ページの .b-svc-hero は右にビジュアル（作業員アニメ）を置くが、
   お知らせは「アニメーションは不要」の指示なので、文字だけの簡素なヘッダーにする。
   **文字の体裁（アイブロウの縦棒・見出しの2色の青・本文の行送り）は他ページの
   .b-svc-hero にそろえている**（2026-08-25 指示）。 service-b.css の S-2 と同じ値。
   ========================================================================== */

.b-page-hero {
  padding-block: clamp(16px, 2vw, 32px) clamp(40px, 6vw, 88px);
  background-color: #fff;
}

.b-page-hero__inner {
  width: min(94%, 1600px);
  margin-inline: auto;
}

.b-page-hero .breadcrumb {
  margin-bottom: clamp(20px, 3.4vw, 52px);
}

/* アイブロウ：見出しの前に黒い縦棒（.b-svc-hero__eyebrow と同じ） */
.b-page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: clamp(8px, 1vw, 16px);
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--c-text-sub);
}

.b-page-hero__eyebrow::before {
  content: "";
  width: 4px;
  height: 1.15em;
  background-color: var(--c-ink);
}

/* 見出し：Zen Kaku・1文字おきに濃さの違う青（.b-svc-hero__catch と同じ）。
   2色分けは <em> で行う（JSは使わない）。base=薄い青、<em>=濃い青。 */
.b-page-hero__title {
  font-family: var(--ff-title);
  font-size: clamp(20px, 3.2vw, 46px);
  font-weight: var(--fw-title);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--b-title-light);
}

.b-page-hero__title em {
  font-style: normal;
  color: var(--b-title-dark);
}

.b-page-hero__text {
  margin-top: clamp(16px, 2vw, 28px);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 2;
  color: var(--c-ink);
}

/* --- タイトルとキャンペーンバナーの左右並び --- */
.b-page-hero__row {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}

@media (min-width: 768px) {
  .b-page-hero__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* --- お得なキャンペーンのバナー（FVタイトルの横） --- */
.b-campaign {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  position: relative;
  padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
  border-radius: var(--radius-lg);
  /* 目を引く濃い青のグラデーション。文字は白。 */
  background-image: linear-gradient(120deg, var(--b-title) 0%, var(--b-title-dark) 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(2, 85, 137, 0.22);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

@media (min-width: 768px) {
  .b-campaign {
    width: clamp(300px, 27vw, 400px);
  }
}

/* タイトルは1行に収める（「お得なキャンペーン」が1文字だけ折り返さないように）。
   万一入りきらない狭い枠では、はみ出さずに省略する。 */
.b-campaign__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b-campaign:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 85, 137, 0.3);
}

/* 右上の小さなラベル */
.b-campaign__badge {
  position: absolute;
  top: 0;
  left: clamp(18px, 2vw, 28px);
  transform: translateY(-50%);
  padding: 0.25em 0.8em;
  border-radius: 999px;
  background-color: #fff;
  color: var(--b-title-dark);
  font-family: var(--ff-title);
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.b-campaign__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.6vw, 48px);
  height: clamp(38px, 3.6vw, 48px);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.b-campaign__icon svg {
  width: 56%;
  height: 56%;
}

.b-campaign__body {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 0;
}

.b-campaign__title {
  font-family: var(--ff-title);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: var(--fw-title);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.b-campaign__text {
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: var(--fw-label);
  color: rgba(255, 255, 255, 0.9);
}

.b-campaign__arrow {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.2em;
  transition: transform var(--t-fast);
}

.b-campaign:hover .b-campaign__arrow {
  transform: translateX(3px);
}

/* アンカーで飛んだとき、記事一覧が追従ヘッダーに隠れないように */
#articles {
  scroll-margin-top: clamp(72px, 8.4vw, 124px);
}

@media (prefers-reduced-motion: reduce) {
  .b-campaign,
  .b-campaign__arrow {
    transition: none;
  }
}

/* ==========================================================================
   N-2〜N-4. 記事一覧（ソートタブ／記事グリッド／ページネーション）
   ========================================================================== */

.b-articles {
  padding-block: clamp(28px, 4vw, 64px) clamp(40px, 6vw, 96px);
  background-color: #fff;
}

.b-articles__inner {
  width: min(94%, 1600px);
  margin-inline: auto;
}

/* --- N-2. ソートタブ（グリッドの左上） --- */
.b-articles__head {
  margin-bottom: clamp(18px, 2.4vw, 32px);
}

.b-articles__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
}

.b-articles__tab {
  padding: 0.5em 1.1em;
  border: 1px solid var(--b-line);
  border-radius: 999px;
  background-color: #fff;
  color: var(--c-text-sub);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.b-articles__tab:hover {
  border-color: var(--b-title-light);
  color: var(--b-title);
}

.b-articles__tab.is-active {
  border-color: var(--b-title);
  background-color: var(--b-title);
  color: #fff;
}

/* --- N-3. 記事グリッド --- */
.b-articles__grid {
  display: grid;
  gap: clamp(18px, 2.2vw, 32px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .b-articles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .b-articles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 4:3 になったぶんカードが縦に伸びるので、広い画面では列を増やして幅で吸収する
   （2026-08-26 の「カード幅も変更」の指示）。
   器は width: min(94%, 1600px)。1600px で 3列＝511px → 4列＝373px、画像は 319px → 280px。 */
@media (min-width: 1280px) {
  .b-articles__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* .b-article 自体にはスタイルを持たせない。news-b.js の絞り込み（data-news-cat）と
   hidden 属性（付けると display:none になる）だけが対象にするJSフック用クラス。
   見た目は全部 .b-article__* 側で定義する */

.b-article__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  background-color: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.b-article__link:hover {
  box-shadow: 0 6px 20px rgba(2, 85, 137, 0.12);
  transform: translateY(-2px);
}

/* サムネイル枠の背景（TOPの .b-news__thumb と同じ扱い）。
   カバー画像が無い記事は下の img ルールが適用されず、このグラデーションがそのまま出る。

   **2026-08-26：16/10 から 4/3 に変更（指示）。TOPのカルーセルと同じ比率。**
   同じ記事のカバー画像なので、片方だけ比率が違うと行った先で切り口が変わってしまう。
   画像そのものは触っていない（img.php は幅だけでリサイズして元の比率を保つ作りで、
   切り取りは object-fit: cover が行う。比率を変えても再生成もキャッシュ削除も要らない）。 */
.b-article__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background-color: #e7edf2;
  background-image: linear-gradient(135deg, #eef3f7 0%, #dde7ef 100%);
}

/* カバー画像（あるときのみ出力される）。 */
.b-article__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-article__body {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(14px, 1.6vw, 22px);
}

.b-article__meta {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap;
}

.b-article__cat {
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background-color: var(--b-bg-tint);
  color: var(--b-title-dark);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: var(--fw-bold);
}

.b-article__date {
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: var(--fw-label);
  color: var(--c-text-sub);
}

.b-article__title {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: var(--fw-bold);
  line-height: 1.55;
  color: var(--c-ink);
}

.b-article__excerpt {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-label);
  line-height: 1.8;
  color: var(--c-text-sub);
}

/* 該当なしの案内 */
.b-articles__empty {
  margin-top: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px dashed var(--b-line);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: var(--fw-label);
  color: var(--c-text-sub);
}

/* --- N-4. ページネーション（仮） --- */
.b-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 10px);
  margin-top: clamp(28px, 4vw, 56px);
}

.b-pager__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.7em;
  border: 1px solid var(--b-line);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--c-text-sub);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

a.b-pager__item:hover {
  border-color: var(--b-title-light);
  color: var(--b-title);
}

.b-pager__item.is-current {
  border-color: var(--b-title);
  background-color: var(--b-title);
  color: #fff;
  cursor: default;
}

.b-pager__item--next {
  gap: 0.4em;
}

@media (prefers-reduced-motion: reduce) {
  .b-article__link,
  .b-articles__tab,
  .b-pager__item {
    transition: none;
  }
}

/* ==========================================================================
   N-5. 記事詳細（article.php）
   本文は WordPress のブロックHTMLがそのまま入る。
   最低限の要素にだけスタイルを当て、サイトのトークンに合わせる。
   ========================================================================== */

.b-article-single {
  width: min(94%, 820px);
  margin-inline: auto;
  padding-block: clamp(28px, 4vw, 56px);
}

.b-article-single__meta {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  margin-bottom: clamp(10px, 1.4vw, 18px);
}

.b-article-single__title {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.5;
  color: var(--b-title-dark);
  margin-bottom: clamp(16px, 2vw, 28px);
}

.b-article-single__cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: clamp(20px, 2.6vw, 36px);
  box-shadow: var(--b-img-shadow);
}

/* flow-root：本文の alignleft/alignright（float）がここより高いと、float が
   ブロックの外（.b-article-nav の前後記事リンク）まで回り込んでレイアウトが崩れる。
   新しいBFCを作ってfloatをこの要素の内側に閉じ込める */
.b-article-body { display: flow-root; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.95; }
.b-article-body > * + * { margin-top: 1.4em; }

.b-article-body h2 {
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.5;
  color: var(--b-title-dark);
  margin-top: 2.2em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--b-title-light);
}

.b-article-body h3 {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--b-title-dark);
  margin-top: 1.9em;
}

.b-article-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* WordPressのブロック画像（figure／キャプション／中央・左右寄せ）。
   いまの記事にはまだ少ないが、投稿側で自由に使われるため崩れないよう最低限備えておく。 */
.b-article-body figure.wp-block-image { margin-block: 1.4em; }

.b-article-body figcaption {
  margin-top: 0.6em;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--c-text-sub);
  text-align: center;
}

.b-article-body .aligncenter { text-align: center; }

/* 左右寄せは回り込ませる。回り込む側にだけ余白を付ける（もう片方は0のまま） */
.b-article-body .alignleft,
.b-article-body .alignright {
  max-width: 50%;
}

.b-article-body .alignleft {
  float: left;
  margin: 0 clamp(12px, 1.6vw, 20px) 1em 0;
}

.b-article-body .alignright {
  float: right;
  margin: 0 0 1em clamp(12px, 1.6vw, 20px);
}

/* SPは本文幅が狭く、回り込みだと文章が読みにくくなるため解除して全幅にする */
@media (max-width: 599px) {
  .b-article-body .alignleft,
  .b-article-body .alignright {
    float: none;
    max-width: 100%;
    margin: 1em 0;
  }
}

.b-article-body ul,
.b-article-body ol { padding-left: 1.5em; }
.b-article-body li + li { margin-top: 0.5em; }
.b-article-body ul { list-style: disc; }
.b-article-body ol { list-style: decimal; }
.b-article-body a { color: var(--b-cta); text-decoration: underline; }

.b-article-body blockquote {
  padding: clamp(12px, 1.6vw, 20px);
  border-left: 4px solid var(--b-title-light);
  background: var(--b-bg-page);
}

.b-article-body table { width: 100%; border-collapse: collapse; }
.b-article-body th,
.b-article-body td { padding: 0.6em 0.8em; border: 1px solid var(--b-line); }

/* 表が広いときは枠内だけ横に流す（料金ページの比較表と同じ考え方） */
.b-article-body .wp-block-table { overflow-x: auto; }

/* --- 前後記事 --- */
.b-article-nav {
  display: flex;
  justify-content: space-between;
  gap: clamp(10px, 1.6vw, 20px);
  margin-top: clamp(30px, 4vw, 56px);
}

.b-article-nav__link {
  flex: 1 1 0;
  padding: clamp(12px, 1.6vw, 18px);
  border: 1px solid var(--b-line);
  border-radius: 10px;
  background-color: var(--c-bg);
  text-decoration: none;
  color: var(--b-title-dark);
}

.b-article-nav__label { display: block; font-size: 13px; color: var(--c-text-sub); }
.b-article-nav__title { display: block; margin-top: 4px; line-height: 1.5; }
.b-article-nav__link--next { text-align: right; }

/* 最古／最新の記事は前後どちらか片方しか無い。flex:1 1 0 のままだと
   残った1枚が行全体に伸び、テキストだけ右端（または左端）に寄って不自然に見えるため、
   片方だけのときは中身の幅だけ取り、本来の位置（次の記事は右）に留める。 */
.b-article-nav__link:only-child {
  flex: 0 1 auto;
}

.b-article-nav__link--next:only-child {
  margin-left: auto;
}

.b-article-back { margin-top: clamp(24px, 3vw, 40px); text-align: center; }

/* 2026-08-26 指示：「お知らせ一覧へ」を他ページと同じピルボタンにそろえた。
   もとは共通の .btn.btn--primary で、**緑（--c-accent: #0e7c7b）で1つだけ浮いていた。**

   塗り・グラデーション・ホバーは home-b.css の .b-news__more をそのまま借りている。
   **お知らせページは service-b.css を読まないので .b-svc-btn は使えない**（9-1の罠）。
   借りたぶん、トップの「View more」用に付いている上余白だけここで打ち消す
   （このボタンの上余白は親の .b-article-back が持っている）。
   トップのクリーニング例が .b-service__btn を借りている形（.b-cases__btn）と同じ。 */
.b-article-back__btn { margin-top: 0; }

@media (max-width: 599px) {
  .b-article-nav { flex-direction: column; }
  .b-article-nav__link--next { text-align: left; }
}