/* =========================================================================
   INSURANCE JOURNAL 公開サイト（INS_JOURNAL-90 再デザイン）
   方針：白ヘッダー＋実ロゴ／左メイン＋右サイド320pxの2カラム／記事はリスト型
   （画像左・本文右）／影・角丸を抑え罫線と余白で整理／明色フッター。
   ========================================================================= */
:root {
  --ink: #14161a;
  --ink-soft: #3c4149;
  --muted: #767b84;
  --line: #e6e8eb;
  --line-2: #d3d6db;
  --bg: #ffffff;
  --wash: #f7f8f9;
  --accent: #b3121f;      /* ブランドアクセント（1色） */
  --accent-2: #0b57a4;    /* リンク・日付など補助 */
  --maxw: 1180px;

  /* カテゴリ配色（小面積のラベルのみで使用） */
  --c-news: #334155;      /* ニュース */
  --c-industry: #0b57a4;  /* 業界動向 */
  --c-prod: #0d7d63;      /* 商品改定・新商品 */
  --c-camp: #c26a00;      /* キャンペーン・お知らせ */
  --c-feat: #7a2ca0;      /* 特集 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
img { display: block; }

/* スクリーンリーダー/検索エンジン向けの視覚的非表示（INS_JOURNAL-113）。
   display:none/visibility:hidden は使わず、支援技術には読み上げ可能なまま画面から隠す。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   ヘッダー（白背景・実ロゴ・折り返さない）
   ========================================================================= */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.hdr-top {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 15px 24px 13px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand { flex-shrink: 0; display: block; }
/* ヘッダーの INSURANCE JOURNAL ロゴは約1/2へ（42px→22px）。存在感は残しつつ主張を抑える（追加指示） */
.brand img { height: 22px; width: auto; display: block; }
.brand-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.14em;
  margin-top: 4px;
}
.hdr-spacer { flex: 1; }
.header-search { position: relative; flex-shrink: 0; }
.header-search input {
  width: 240px;
  max-width: 46vw;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13.5px;
  background: var(--wash);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.header-search input:focus { border-color: var(--accent-2); background: #fff; }
.header-search::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border: 2px solid var(--muted);
  border-radius: 50%;
  box-shadow: 8px 8px 0 -6px var(--muted);
  pointer-events: none;
}

/* カテゴリナビ（2段目・折り返さない） */
.navbar { border-top: 1px solid var(--line); background: #fff; }
.site-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  align-items: stretch;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.nav-link {
  padding: 15px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
  flex-shrink: 0;
}
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  background: var(--accent);
}

/* ハンバーガー（SPのみ表示） */
.nav-toggle {
  display: none;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.25s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* SPメニューはデスクトップでは非表示（≡で開くモバイル専用）。
   ※この基底ルールが無いと PC でも複製ナビが表示され、ヘッダーが二重に見える。 */
.mobile-menu { display: none; }

/* =========================================================================
   レイアウト（トップ＝2カラム／下層＝1カラム）
   ========================================================================= */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 44px 24px 108px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
}
.page-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 46px 24px 100px;
}
.page-wrap.narrow { max-width: 880px; }
.main-col { min-width: 0; }

/* =========================================================================
   記事リスト行（画像左・本文右）
   ========================================================================= */
.article-list { display: block; }
.li-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 30px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.li-row:first-child { padding-top: 8px; }
.li-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--wash);
}
.li-thumb img.li-img { width: 100%; height: 100%; object-fit: cover; }
/* 出典ロゴ代替：INS_JOURNAL-105（岩淵さん指示 07-13）で背景の薄グレー枠を撤去。
   ロゴはカードと同じ白地に直接載せ、枠のない見た目にする（span はサムネ枠を 100% 覆うため、
   白地にすることで親サムネの --wash グレーも隠れる＝どのロゴ枠でもグレーが出ない）。余白のみ維持。
   INS-112（岩淵さん 07-15）：新着記事など一覧のロゴが小さいので、カテゴリ別パネル（.pnl-thumb）の
   ロゴと同じ扱いに揃える＝余白 padding を 10% → 5% に詰め、白地サムネいっぱいまでロゴを拡大する。 */
.li-logo-bg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  /* INS-112（岩淵さん 07-15「ロゴが小さい・倍でもいい」）：出典ロゴ（多くは正方形）は
     横長サムネ内では“高さ”で頭打ちになる。余白 padding を 5% → 0 にし、白地サムネの
     高さいっぱいまでロゴを拡大する（縦横比は object-fit:contain で維持・切れない）。 */
  padding: 0;
}
/* 出典社ロゴ（画像/バナー無し記事の代替表示）。INS_JOURNAL-105 で出典マスタ登録ロゴを反映するにあたり、
   従来の「主役にしない」極小サイズ（44%×36%＋16〜19%padding＝実測20px強）は小さすぎたため引き上げ、
   さらに 07-13 岩淵さん指示「画像は全体が入る大きさで縦横比を維持」に合わせ上限を撤廃。
   width/height 100%＋object-fit:contain で、枠（.li-logo-bg の padding 分の余白を残しつつ）に収まる最大
   サイズまで拡大・縮小しつつ、縦横比を保ったまま画像全体を必ず表示する（intrinsic が小さいロゴも枠まで拡大）。
   背景の薄グレー枠は 07-13 に撤去（白地）。
   INS-112（岩淵さん 07-15）：カテゴリ別パネルのロゴ（.pnl-thumb .li-logo）と大きさ・見え方を揃えるため、
   薄め表示(opacity .85)・彩度落とし(saturate .95)をやめ、実色（opacity 1・filter なし）で表示する。 */
.li-logo { width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: none; }
/* プレースホルダ（画像もロゴも無い記事）：薄背景＋出典名・上辺アクセントは細く淡く（主張を弱める・点1/点4） */
.th-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px;
  background: var(--wash);
  border-top: 1px solid var(--line);
  text-align: center;
}
.th-ph-mark {
  font-weight: 700; font-size: 11px; letter-spacing: 0.2em;
  color: #bcc0c6; line-height: 1;
}
.th-ph-src {
  font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* カテゴリ色をプレースホルダ上辺のアクセントに反映（控えめ） */
.th-ph.tp--news { border-top-color: var(--c-news); }
.th-ph.tp--industry { border-top-color: var(--c-industry); }
.th-ph.tp--prod { border-top-color: var(--c-prod); }
.th-ph.tp--camp { border-top-color: var(--c-camp); }
.th-ph.tp--feat { border-top-color: var(--c-feat); }
/* 旧マークアップ（.th-src）が残っても破綻しないためのフォールバック */
.th-src { color: #fff; font-weight: 700; font-size: 13px; text-align: center; padding: 0 10px; line-height: 1.5; }
.li-body { min-width: 0; }
.li-meta-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.li-meta-top time { font-size: 12px; color: var(--muted); }
.li-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.52;
  color: var(--ink);
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.li-row:hover .li-title { color: var(--accent); }
.li-lead {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.li-foot { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.li-src { font-size: 12px; color: var(--muted); }
.li-author { font-size: 12px; color: var(--muted); }
.li-author::before { content: "✎ "; }

/* リード（ヒーロー）記事：画像大＋見出し大（トップ1本のみ許容） */
.li-row--lead {
  grid-template-columns: 1fr;
  gap: 22px;
  border-bottom: 2px solid var(--ink);
  padding-top: 0;
  padding-bottom: 44px;
  margin-bottom: 14px;
}
.li-row--lead .li-thumb { aspect-ratio: 16 / 7.6; border-radius: 6px; }
.li-row--lead .li-meta-top { gap: 12px; margin-bottom: 12px; }
.li-row--lead .li-title {
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  letter-spacing: 0.005em;
}
.li-row--lead .li-lead { font-size: 15px; line-height: 1.85; margin-top: 12px; -webkit-line-clamp: 3; }
.li-row--lead .li-foot { margin-top: 14px; }
/* ヒーロー周辺のカテゴリラベル・日付は主張を少し抑える（ヒーロー記事本体を主役に・点2） */
.li-row--lead .cat { font-size: 11px; padding: 2px 9px; }
.li-row--lead .li-meta-top time { font-size: 12px; }

/* ヒーロー・カルーセル（PICKUPの新しいもの最大5件・INS_JOURNAL-99）
   ・トラックは scroll-snap の横並び。JS無効でも横スクロールで全件閲覧できる。
   ・アクセント下線はカルーセル外枠に付け、各スライドの下線は消す。 */
.hero-carousel { position: relative; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-carousel .hero-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 30px;
}
/* 操作バー（前へ／ドット／次へ）。JSで hidden を外して表示する。 */
.hero-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 0 14px;
}
.hero-ctrl[hidden] { display: none; }
.hero-nav {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.hero-nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.hero-nav:disabled { opacity: .35; cursor: default; background: #fff; color: var(--ink); border-color: var(--line); }
.hero-dots { display: flex; align-items: center; gap: 9px; }
.hero-dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.hero-dot:hover { background: var(--muted); }
.hero-dot.is-active { background: var(--accent); transform: scale(1.25); }

/* カテゴリ配色サムネ（画像・ロゴが無い場合の背景） */
.th--news, .cat--news { background: var(--c-news); }
.th--industry, .cat--industry { background: var(--c-industry); }
.th--prod, .cat--prod { background: var(--c-prod); }
.th--camp, .cat--camp { background: var(--c-camp); }
.th--feat, .cat--feat { background: var(--c-feat); }
.li-thumb.th--news { background: linear-gradient(135deg, #546074, #2b3444); }
.li-thumb.th--industry { background: linear-gradient(135deg, #1e6fbf, #0b3d78); }
.li-thumb.th--prod { background: linear-gradient(135deg, #15997a, #0b5a47); }
.li-thumb.th--camp { background: linear-gradient(135deg, #e08a1e, #a5560a); }
.li-thumb.th--feat { background: linear-gradient(135deg, #9a52c0, #5c1c7a); }

/* INS-112（岩淵さん 07-15）：ヒーロー（リード）の実画像も cover で上下が切れていた
   （例:「【特集】『ハ方式』がなくなる。…」のバナーが上下トリミングされていた）。
   パネル（INS-106）と同じく contain に変更し、縦横比を保ったまま画像“全体”を表示する。
   contain のレターボックス余白がカテゴリ色のグラデ地に透けないよう、リード枠の背景は白に統一。
   （小サムネ .li-thumb の cover は据え置き＝一覧の左サムネは従来どおり枠を埋める。） */
.li-row--lead .li-thumb { background: #fff; }
.li-row--lead .li-thumb img.li-img { object-fit: contain; }

/* カテゴリラベル */
.cat {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 2px 9px;
  border-radius: 2px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* =========================================================================
   パネル型（トップのカテゴリ別セクションのみ／新着・一覧はリスト型のまま）
   方針：影は使わず罫線＋余白で整理・角丸控えめ・タイトルを主役・高さを揃える。
   1段目＝2カラム大パネル / 2段目以降＝3〜4カラム（自動でカラム数調整）。
   ========================================================================= */
/* 1段目：2カラム大パネル（記事が1本なら1カラム＝空枠を出さない） */
.panel-lead-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.panel-lead-row.pll--1 { grid-template-columns: 1fr; }
/* 2〜3段目：小パネルは常に2カラム固定（INS-112 岩淵さん 07-15・2-2-2）。
   旧 auto-fit(minmax 236px) はサイドバー併存でメインが狭まると3列→2列に折れ、小3枚が 2+1 になって
   5枚目が孤立し、段いっぱいの横罫も出なかった。2列固定にして横幅に依らず必ず 2-2-2 で並べる。
   小パネルは home.php 側で2枚ずつ段に割って複数の .panel-grid として描画する（1段＝1グリッド）。 */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
/* 段の“間”に横の仕切り線を1本ずつ均等に引く（INS-112 岩淵さん 07-15）。
   隣り合う段（大パネル段→小パネル段、および小パネル段→小パネル段）の“上下の間”に1本の横罫を引く。
   .panel-grid はメインカラム幅いっぱいのグリッドなので、その上辺 border-top が段いっぱいの1本罫になる
   （左右＝列の間には線を引かない）。線の上（前段の余白）と線の下（padding-top）で中身に接しないようにする。 */
.panel-lead-row + .panel-grid,
.panel-grid + .panel-grid {
  border-top: 1px solid var(--line-2);
  padding-top: 36px;
}
/* 小パネル段どうしの間は、前段（.panel-grid）に下の余白が無いため上に余白を足して線を中央寄せにする。 */
.panel-grid + .panel-grid { margin-top: 48px; }
/* 枠線を無くしたボーダーレス表示（INS-112 岩淵さん）。カードの囲み罫線・角丸は撤去し、
   サムネ画像＋余白だけでパネルを区切る（影は使わない従来方針は維持）。ホバーは枠色ではなく
   タイトルのアクセント色で反応を出す。列間の縦罫は引かない（仕切りは上記の段間の横罫1本のみ）。 */
.pnl {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  position: relative;
}
.pnl:hover .pnl-title { color: var(--accent); }
.pnl-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* サムネ背景は白で統一（INS_JOURNAL-107・岩淵さん）。contain 表示の余白（レターボックス）が
     --wash のグレーだと画像パネルだけ枠がグレーに見え、ロゴパネル(白・INS-105)と不揃いになるため白へ。 */
  background: #fff;
  border-radius: 6px;
}
/* サムネは切らずに縮小して全体を見せる（INS_JOURNAL-106・岩淵さん）。cover=枠を埋めて上下/左右が切れる→
   contain＝縦横比を維持したまま枠に収まる最大サイズへ縮小し画像全体を表示（余白は白地）。
   INS-112（岩淵さん 07-15）：拡大するのは出典マスタ登録ロゴ（.li-logo）だけとし、実画像は“拡大しない”。
   width/height:100% だと intrinsic の小さい画像まで枠いっぱいに引き伸ばしてしまうため、max-width/max-height
   に変更＝大きい画像は枠に収まるよう縮小して全体表示、小さい画像は等倍のまま（親 .pnl-thumb が flex 中央寄せ）。 */
.pnl-thumb img.pnl-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* 枠線を撤去した（INS-112）ぶん、ロゴはより大きく見せてよい（岩淵さん指示 07-15）。
   余白 padding を 10% → 5% に詰め、白地サムネに対しロゴを一回り大きく表示する。 */
.pnl-thumb .li-logo-bg { padding: 0; border-bottom: none; }
/* パネルでも上限を撤廃：padding(5%) の余白を残した枠に収まる最大サイズまで拡大（縦横比は object-fit:contain で維持）。
   枠が無くなりロゴが主役になるため、薄め表示(opacity .85)をやめ実色で表示する。 */
.pnl-thumb .li-logo { max-width: 100%; max-height: 100%; opacity: 1; filter: none; }
/* ロゴ枠は白地でカード地と一体化するので、サムネ／本文を分ける区切り線も出さず枠を完全に消す（INS-105 07-13）。
   :has 非対応ブラウザでは区切り線が残るだけで、グレー枠の撤去（白地）は上の .li-logo-bg で全環境有効。 */
.pnl-thumb:has(> .li-logo-bg) { background: #fff; border-bottom: none; }
.pnl-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 枠を外したぶん本文はサムネ左端に揃える（左右パディングを詰め、画像との間だけ余白を残す）。 */
  padding: 18px 2px 6px;
}
.pnl-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.pnl-meta time { font-size: 11.5px; color: var(--muted); }
.pnl-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.62;
  color: var(--ink);
  transition: color 0.15s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pnl:hover .pnl-title { color: var(--accent); }
.pnl-lead {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pnl-foot { margin-top: auto; padding-top: 14px; }
.pnl-src { font-size: 11.5px; color: var(--muted); }

/* 大パネル（1段目）：画像・タイトルを大きく・要約あり */
.pnl--big .pnl-thumb { aspect-ratio: 16 / 9; }
.pnl--big .pnl-body { padding: 20px 2px 8px; }
.pnl--big .pnl-title { font-size: 18px; -webkit-line-clamp: 3; letter-spacing: 0.005em; }
.pnl--big .pnl-thumb .li-logo { max-width: 100%; max-height: 100%; }

/* =========================================================================
   セクション見出し（罫線＋左アクセントバー＋すべて見る）
   ========================================================================= */
.sec { margin-top: 112px; }
.sec:first-child { margin-top: 0; }
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
  margin-bottom: 44px;
  gap: 12px;
}
.sec-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding-left: 15px;
  position: relative;
}
.sec-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 6px;
  border-radius: 1px;
  background: var(--accent);
}
.sec-title.st--news::before { background: var(--c-news); }
.sec-title.st--industry::before { background: var(--c-industry); }
.sec-title.st--prod::before { background: var(--c-prod); }
.sec-title.st--camp::before { background: var(--c-camp); }
.sec-title.st--feat::before { background: var(--c-feat); }
/* 「すべて見る」は控えめに（主張しすぎない・点5） */
.sec-more {
  font-size: 12px; color: var(--muted); font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sec-more span { margin-left: 4px; color: var(--muted); font-weight: 700; }
.sec-more:hover { color: var(--accent); border-color: var(--line-2); }
.sec-more:hover span { color: var(--accent); }
.sec-sub { font-size: 13px; color: var(--muted); margin: 8px 0 -4px; }

/* =========================================================================
   バナー枠（active・期間内・データありのみ表示。helpers::render_banners）
   ========================================================================= */
.banner-slot { margin: 40px 0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.banner-item { display: block; max-width: 100%; overflow: hidden; }
.banner-img { display: block; width: 100%; height: auto; }
.banner-header .banner-item { flex: 1 1 100%; max-width: 970px; }
/* 記事ページ ヘッダー下（サイトヘッダー直下・ワイド。INS_JOURNAL-110） */
.banner-article-header { margin: 24px 0 0; padding: 0 24px; }
.banner-article-header .banner-item { flex: 1 1 100%; max-width: 970px; }
.banner-infeed .banner-item { flex: 1 1 300px; max-width: 728px; }
.banner-sidebar { margin: 0; }
.banner-sidebar .banner-item { flex: 1 1 100%; max-width: 300px; }

/* =========================================================================
   サイドバー（右カラム）
   ========================================================================= */
.side { display: flex; flex-direction: column; gap: 56px; }
.sb { padding-bottom: 4px; }
/* サイドバー見出しは補助導線らしく控えめに（罫線を細く淡く・字も少し小さく・点5） */
.sb-head {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0 0 10px;
  border-bottom: 1.5px solid var(--line-2);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ラベルバッジは赤を使わずニュートラルな濃灰に（赤の使いすぎを避ける・点1/点5） */
.sb-head .en {
  font-size: 9.5px; color: #fff; background: var(--ink-soft); font-weight: 800;
  letter-spacing: 0.12em; padding: 3px 6px; border-radius: 2px; line-height: 1;
}

/* 注目の記事（ランキング枠の代替：順位バッジ無し・"ランキング"表現なし） */
.rk-list { list-style: none; }
.rk-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.rk-item:last-child { border-bottom: none; }
.rk-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 99px; margin-top: 8px; background: var(--line-2); }
.rk-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rk-cat { font-size: 11px; font-weight: 700; color: var(--muted); }
.rk-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rk-item:hover .rk-title { color: var(--accent); }

/* 会社・機関別で探す（チップ） */
.sb-group { margin-top: 14px; }
.sb-group:first-of-type { margin-top: 2px; }
.sb-group-kind {
  font-size: 11px; font-weight: 800; color: var(--muted);
  letter-spacing: 0.06em; margin-bottom: 9px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fbfbfc;
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.chip img { width: 13px; height: 13px; object-fit: contain; }
.chip .chip-n { font-size: 10px; color: var(--muted); }

/* INS_JOURNAL-111 会社・機関別ページ（/companies/）だけ発信元チップを大きく・読みやすく。
   トップのサイドバー(.sb .chips)や記事詳細の .chips には影響させない（.companies-page で限定）。 */
.companies-page .chips { gap: 12px; }
.companies-page .chip {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  padding: 10px 18px;
  gap: 11px;
  border-radius: 14px;
}
/* ロゴをさらに目立たせる（点2）：サイズ拡大＋白カード枠で背景から浮かせる */
.companies-page .chip img {
  width: 40px;
  height: 40px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.companies-page .chip:hover img { border-color: var(--accent); }
.companies-page .chip .chip-n {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}
@media (max-width: 600px) {
  .companies-page .chip { font-size: 14px; padding: 9px 15px; }
  .companies-page .chip img { width: 34px; height: 34px; padding: 3px; }
}
/* 「すべての会社・機関を見る」は自然な補助導線に（点8） */
.sb-all {
  display: block; margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
}
.sb-all:hover { color: var(--accent); }
.sb-all span { margin-left: 4px; color: var(--muted); }
.sb-all:hover span { color: var(--accent); }

/* 資料ダウンロード（データがある場合のみ・フェーズ1は枠と非表示FBのみ） */
.dl-card { border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: flex; gap: 12px; margin-top: 10px; }
.dl-thumb { width: 64px; height: 80px; background: var(--wash); border: 1px solid var(--line); border-radius: 3px; flex-shrink: 0; object-fit: cover; }
.dl-t { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.dl-d { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* イベント・セミナー（開催日が未来のもののみ・データが無ければ枠ごと非表示） */
.ev-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ev-item:last-child { border-bottom: none; }
.ev-date { font-size: 11.5px; font-weight: 700; color: var(--accent-2); }
.ev-t { font-size: 13.5px; font-weight: 600; line-height: 1.5; margin-top: 3px; }

/* =========================================================================
   下層ページ（一覧・検索・会社別・カテゴリ）ヘッダー
   ========================================================================= */
.list-head { border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 4px; }
.list-title { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.list-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.empty-msg {
  color: var(--muted);
  margin-top: 28px;
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  background: var(--wash);
}

/* =========================================================================
   記事詳細・固定ページ
   ========================================================================= */
.article-wrap { max-width: 860px; margin: 0 auto; }
.article-top { margin-bottom: 18px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.back-link:hover { color: var(--accent); }
.article-banner { width: 100%; height: auto; border-radius: 4px; margin-bottom: 22px; display: block; }
/* 記事ヒーローの実画像（og:image 等）。INS-112（岩淵さん 07-15）：拡大するのは出典マスタ登録ロゴだけとし、
   実画像は cover（大きいと上下/左右が切れる）をやめ、画像全体を表示する。max-width:100%/max-height:440px で
   大きい画像は枠に収まるよう縮小して全体表示・小さい画像は等倍のまま（引き伸ばさない）、中央寄せで配置。 */
.article-hero { max-width: 100%; max-height: 440px; width: auto; height: auto; object-fit: contain; border-radius: 4px; margin: 0 auto 22px; display: block; }
/* 記事ページのヒーロー（画像なし記事の出典ロゴ代替）。INS-112 でパネルを枠線なしにした流れに合わせ、
   ここも 07-15 岩淵さん指示でロゴを大きく表示する。囲みの 1px 枠を撤去し（白地・ボーダーレス）、
   枠が無くなったぶんロゴ自体の上限を 50%/120px → 78%/188px まで引き上げてゆったり大きく見せる。 */
.hero-logo-bg {
  width: 100%; height: 240px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 4px; margin-bottom: 22px;
}
/* INS-112（岩淵さん 07-15「ロゴが小さい・倍でもいい」）：240px 枠に対しロゴをさらに大きく。
   上限 78%/188px → 94%/224px（枠いっぱいまで拡大・縦横比維持で切れない）。 */
.hero-logo { max-width: 94%; max-height: 224px; object-fit: contain; }
.article-hero-placeholder { width: 100%; height: 220px; border-radius: 4px; margin-bottom: 22px; }
.article-hero-placeholder.th--news { background: linear-gradient(135deg, #546074, #2b3444); }
.article-hero-placeholder.th--industry { background: linear-gradient(135deg, #1e6fbf, #0b3d78); }
.article-hero-placeholder.th--prod { background: linear-gradient(135deg, #15997a, #0b5a47); }
.article-hero-placeholder.th--camp { background: linear-gradient(135deg, #e08a1e, #a5560a); }
.article-hero-placeholder.th--feat { background: linear-gradient(135deg, #9a52c0, #5c1c7a); }
.badges { margin-bottom: 10px; }
.article-title {
  font-size: clamp(22px, 3.4vw, 31px);
  font-weight: 800;
  line-height: 1.42;
  color: var(--ink);
  margin: 10px 0 14px;
}
.article-byline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: var(--muted);
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.dot { color: var(--line-2); }
.cat-link { font-weight: 700; color: var(--accent-2); }
.source-label { color: var(--ink-soft); font-weight: 600; }
.btn-source-top {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 20px 0 24px; padding: 11px 24px;
  background: var(--ink); color: #fff; border-radius: 4px;
  font-weight: 700; font-size: 14px; max-width: 100%; flex-wrap: wrap;
}
.btn-source-top:hover { background: var(--accent); }
.prose { font-size: 16px; line-height: 1.9; color: var(--ink-soft); margin-top: 40px; word-break: break-word; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--ink); margin: 34px 0 14px; line-height: 1.4; font-weight: 800; }
.prose h1 { font-size: 22px; border-bottom: 2px solid var(--line); padding-bottom: 8px; }
.prose h2 { font-size: 20px; border-bottom: 2px solid var(--line); padding-bottom: 6px; }
.prose h3 { font-size: 17px; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 24px; margin-bottom: 16px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--wash); font-weight: 700; color: var(--ink); }
.prose img { max-width: 100%; height: auto; border-radius: 4px; margin: 16px 0; display: block; }
.prose a { color: var(--accent-2); text-decoration: underline; font-weight: 600; }
.prose strong, .prose b { font-weight: 700; color: var(--ink); }
.prose blockquote { border-left: 3px solid var(--line-2); padding: 8px 16px; color: var(--muted); background: var(--wash); margin: 16px 0; }
.prose pre { background: #1c1f24; color: #f3f4f6; border-radius: 4px; padding: 16px; overflow-x: auto; font-size: 14px; margin: 16px 0; }
.prose * { float: none !important; position: static !important; max-width: 100% !important; }
.prose [class*="slick"], .prose [class*="modaal"], .prose [class*="popup"], .prose link { display: none !important; }
.article-source-box { margin: 32px 0 12px; padding: 14px 18px; background: var(--wash); border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
.source-box-label { font-weight: 700; color: var(--accent-2); margin-right: 8px; }
.article-source-box a { color: var(--accent-2); word-break: break-all; text-decoration: underline; }
.article-credit { margin-top: 32px; font-size: 12.5px; color: var(--muted); line-height: 1.8; border-top: 1px solid var(--line); padding-top: 16px; }
.page-lead { font-size: 16px; line-height: 1.9; color: var(--ink-soft); margin: 14px 0 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }

/* =========================================================================
   フッター（明色背景・TypeB2段ロゴ）
   ========================================================================= */
.site-footer { border-top: 3px solid var(--ink); background: var(--wash); margin-top: 24px; }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}
.footer-logo img { height: 52px; width: auto; margin-bottom: 12px; display: block; }
.footer-about { font-size: 12.5px; color: var(--muted); line-height: 1.8; max-width: 42ch; }
.footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 12px; }
.footer-links { list-style: none; }
.footer-links li { margin: 8px 0; }
.footer-links a { font-size: 13px; color: var(--ink-soft); }
.footer-links a:hover { color: var(--accent); }
.footer-copy {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 24px 28px;
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width: 980px) {
  .wrap { grid-template-columns: 1fr; gap: 64px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  /* タブレット：パネルは2カラム */
  .panel-grid { grid-template-columns: repeat(2, 1fr); }
  /* サイドバーは本文の下に回り込むので、横幅いっぱいで自然に並べる */
  .side { max-width: 640px; }
}

@media (max-width: 720px) {
  /* ヘッダー：ロゴ＋ハンバーガーのみ。検索とナビは折り返さず非表示（≡内へ） */
  .hdr-top { padding: 12px 16px; gap: 12px; }
  /* スマホでも潰れないサイズを維持しつつ縮小（30px→20px・追加指示） */
  .brand img { height: 20px; }
  .brand-sub { display: none; }
  .header-search { display: none; }
  .navbar { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }

  /* SPメニュー（≡で開閉）：検索＋カテゴリナビを縦に格納 */
  .mobile-menu { border-top: 1px solid var(--line); background: #fff; }
  .mobile-menu.open { display: block; }
  .mobile-menu .header-search { display: block; padding: 14px 16px 8px; }
  .mobile-menu .header-search input { width: 100%; max-width: none; }
  .mobile-menu .site-nav {
    flex-direction: column;
    padding: 4px 8px 12px;
    overflow: visible;
    white-space: normal;
  }
  .mobile-menu .nav-link { padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .mobile-menu .nav-link.active::after { display: none; }

  .wrap { padding: 24px 16px 60px; }
  .page-wrap { padding: 24px 16px 60px; }
  .side { max-width: none; }

  /* 記事行：画像左116pxを維持（縦積みにしない＝一覧性を確保） */
  .li-row { grid-template-columns: 116px 1fr; gap: 16px; padding: 24px 0; }
  .li-title { font-size: 15.5px; }
  .li-lead { -webkit-line-clamp: 2; }
  .li-row--lead { grid-template-columns: 1fr; }
  .li-row--lead .li-title { font-size: 21px; }
  .hero-nav { width: 30px; height: 30px; font-size: 18px; }
  .hero-ctrl { gap: 10px; }

  /* パネル：スマホは1カラム（画像上・本文下） */
  .panel-lead-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .panel-grid { grid-template-columns: 1fr; gap: 24px; }
  /* スマホは縦積み。段と段の間に加え、積み重なる各パネルの間にも横罫を1本入れて上下に仕切る */
  .panel-grid .pnl + .pnl,
  .panel-lead-row .pnl + .pnl { border-top: 1px solid var(--line-2); padding-top: 24px; }
  /* スマホは縦積みなので段間の線もタイトに（上余白は詰め、線下だけ24px）。段どうし・段内パネル間を揃える。 */
  .panel-lead-row + .panel-grid,
  .panel-grid + .panel-grid { margin-top: 0; padding-top: 24px; }
  /* スマホの通常パネルは画像左・タイトル右の簡易リスト風にして一覧性を確保 */
  .panel-grid .pnl { flex-direction: row; }
  .panel-grid .pnl-thumb { width: 116px; flex-shrink: 0; aspect-ratio: 16 / 11; border-bottom: none; border-right: 1px solid var(--line); }
  /* スマホ横並びでもロゴ枠は白地一体化＝右の区切り線も出さない（INS-105 07-13） */
  .panel-grid .pnl-thumb:has(> .li-logo-bg) { border-right: none; }
  .panel-grid .pnl-body { padding: 12px 14px; }
  .panel-grid .pnl-title { font-size: 15.5px; line-height: 1.6; -webkit-line-clamp: 3; }
  .pnl--big .pnl-thumb { aspect-ratio: 16 / 9; }

  .sec { margin-top: 64px; }
  .sec-title { font-size: 19px; }
  .sec-head { margin-bottom: 28px; }
  .list-title { font-size: 19px; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .article-title { margin-top: 8px; }
}

/* =========================================================================
   INS_JOURNAL-91 記事詳細ページ（2カラムのメディア型）
   トップ(INS-90)の共通トークン・部品（.sb/.rk-list/.chips/.pnl/.cat）を流用。
   本文幅は約752px（1120 - サイド320 - gap48）。データが無い枠は出さない。
   ※ このブロックは既存 main.css の末尾に追記して使う（正本 ins-journal-php にも同様に追記）。
   ========================================================================= */
.article-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 108px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 68px;
  align-items: start;
}
.article-main { min-width: 0; }

/* パンくず */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); margin-bottom: 16px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .bc-sep { color: var(--line-2); }
.breadcrumb .bc-current {
  color: var(--ink-soft); font-weight: 600;
  min-width: 0; flex: 0 1 auto;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 記事冒頭（カテゴリ→タイトル→メタ→シェア）を1ブロックに */
.a-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 22px; }
.a-head .badges { margin-bottom: 10px; }
.a-head .article-title { margin: 4px 0 12px; }
/* 冒頭ブロック内のメタ行は下罫線をブロック側に移すため個別罫線を消す */
.a-head .article-byline { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.author-label { color: var(--ink-soft); font-weight: 600; }
.author-label::before { content: "✎ "; color: var(--muted); }

/* SNSシェア（X / LINE / URLコピー） */
.share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.share-label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 14px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700; line-height: 1;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-soft);
  cursor: pointer; font-family: inherit; transition: all 0.15s ease;
}
.share-btn:hover { border-color: var(--ink); color: var(--ink); }
.share-x { background: #14171a; border-color: #14171a; color: #fff; }
.share-x:hover { background: #000; color: #fff; }
.share-line { background: #06c755; border-color: #06c755; color: #fff; }
.share-line:hover { background: #05b34c; color: #fff; }
.share-copy.copied { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.share-bottom { margin: 30px 0 4px; padding-top: 18px; border-top: 1px solid var(--line); }

/* リード文（手動lead優先／無ければ本文冒頭の自動抜粋） */
.article-lead {
  font-size: 15.5px; line-height: 1.9; color: var(--ink-soft);
  margin: 22px 0 4px; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--accent);
}

/* 目次（本文h2から自動生成・h2が2未満なら非表示。details で開閉可） */
.toc {
  border: 1px solid var(--line); background: var(--wash);
  border-radius: 6px; padding: 14px 18px; margin: 26px 0 8px;
}
.toc[open] { padding-bottom: 16px; }
.toc-head {
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  letter-spacing: 0.06em; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.toc-head::-webkit-details-marker { display: none; }
.toc-head::before {
  content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s ease;
}
.toc[open] .toc-head::before { transform: rotate(90deg); }
.toc-list { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: toc; }
.toc-list li { counter-increment: toc; margin: 0; }
.toc-list li + li { border-top: 1px dashed var(--line); }
.toc-list a {
  display: block; padding: 8px 0 8px 26px; position: relative;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); font-weight: 600;
}
.toc-list a::before {
  content: counter(toc); position: absolute; left: 0; top: 8px;
  width: 18px; height: 18px; border-radius: 99px;
  background: var(--ink); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.toc-list a:hover { color: var(--accent); }

/* 補足ボックス（.note）：編集側で <div class="note"> を使えば整形される（任意） */
.prose .note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
  background: var(--wash); border-radius: 4px;
  padding: 14px 18px; margin: 20px 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft);
}
.prose .note p:last-child { margin-bottom: 0; }

/* 記事下の回遊：関連記事／同じ出典の記事 */
.rel { margin-top: 72px; }
.rel-title {
  font-size: 18px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink);
  padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid var(--ink);
}
.rel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

/* 前後の記事 */
.pn-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px; }
.pn-item {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px;
  transition: border-color 0.15s ease; min-width: 0;
}
a.pn-item:hover { border-color: var(--line-2); }
.pn-next { text-align: right; align-items: flex-end; }
.pn-dir { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pn-t {
  font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.pn-item:hover .pn-t { color: var(--accent); }
.pn-empty { border: none; padding: 0; background: none; }

/* =========================================================================
   取材・寄稿の応募（INS_JOURNAL-96）: トップ導線 + フォーム
   ========================================================================= */
/* トップの導線（キャンペーン・お知らせの直前）。「企画応募はこちら」はグレー帯に白抜き。 */
.contrib-cta {
  margin-top: 84px; padding: 38px 24px;
  text-align: center;
}
.contrib-cta-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.contrib-cta-text { font-size: 16px; font-weight: 400; line-height: 1.9; color: var(--ink); margin: 0 0 28px; }
.contrib-cta-btn {
  display: inline-block;
  background: #156082; color: #fff;               /* 濃い青緑・白抜き文字（画像採色） */
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
  padding: 15px 64px; border-radius: 4px; white-space: nowrap;
  transition: background 0.15s ease;
}
.contrib-cta-btn:hover { background: #124f6b; }

/* フォーム本体 */
.contrib-form { margin-top: 28px; }
.cf-field { margin-bottom: 22px; border: none; padding: 0; }
.cf-label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.cf-req {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 2px; letter-spacing: 0.02em;
}
.cf-input {
  width: 100%; font: inherit; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 4px;
  background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cf-input:focus {
  outline: none; border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(11, 87, 164, 0.12);
}
.cf-textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.cf-radios { display: flex; gap: 12px; flex-wrap: wrap; }
.cf-radio {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 18px; border: 1px solid var(--line-2); border-radius: 4px; font-weight: 600;
}
.cf-radio input { accent-color: var(--accent-2); }
.cf-radio:has(input:checked) { border-color: var(--accent-2); background: rgba(11, 87, 164, 0.06); }
.cf-err { color: var(--accent); font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.cf-summary {
  margin: 24px 0; padding: 12px 16px; border-radius: 4px;
  background: rgba(179, 18, 31, 0.07);
  border: 1px solid rgba(179, 18, 31, 0.3); color: var(--accent); font-size: 13.5px; font-weight: 600;
}
.cf-actions { margin-top: 28px; }
.cf-submit {
  font: inherit; font-weight: 700; font-size: 15px; color: #fff; cursor: pointer;
  background: var(--accent); border: none; border-radius: 4px; padding: 13px 34px;
  transition: opacity 0.15s ease;
}
.cf-submit:hover { opacity: 0.9; }
.cf-privacy { margin-top: 12px; font-size: 12px; color: var(--muted); }
.cf-privacy a { color: var(--accent-2); text-decoration: underline; }
/* ハニーポット（人間には見せない・支援技術からも隠す） */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 720px) {
  .contrib-cta { margin-top: 44px; padding: 24px 18px; }
  .contrib-cta-title { font-size: 14.5px; }
  .contrib-cta-text { font-size: 14.5px; }
  .contrib-cta-btn { display: block; padding: 14px 20px; text-align: center; }
  .cf-submit { width: 100%; }
}

/* =========================================================================
   INS_JOURNAL-91 レスポンシブ
   ========================================================================= */
@media (max-width: 980px) {
  /* PC2カラム → 1カラム。サイドバー要素は本文下へ回り込む */
  .article-layout { grid-template-columns: 1fr; gap: 48px; padding-top: 28px; }
  .article-layout .side { max-width: 640px; }
}
@media (max-width: 720px) {
  .article-layout { padding: 18px 16px 48px; gap: 32px; }
  .article-layout .side { max-width: none; }
  .article-lead { font-size: 14.5px; margin-top: 18px; }
  .rel-grid { grid-template-columns: 1fr; gap: 14px; }
  /* 関連・同出典パネルはスマホで画像左・タイトル右のリスト風（トップと同じ挙動に揃える） */
  .rel-grid .pnl { flex-direction: row; }
  .rel-grid .pnl-thumb { width: 116px; flex-shrink: 0; aspect-ratio: 16 / 11; border-bottom: none; border-right: 1px solid var(--line); }
  .rel-grid .pnl-thumb:has(> .li-logo-bg) { border-right: none; }
  .rel-grid .pnl-body { padding: 12px 14px; }
  .pn-nav { grid-template-columns: 1fr; gap: 12px; }
  .pn-next { text-align: left; align-items: flex-start; }
  .share-bottom { margin-top: 24px; }
}