/* ==========================================================================
   cehub-theme 基本スタイル（M0）
   すべて tokens.css の変数を参照する。生の色コードは書かない。
   ========================================================================== */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--ce-font);
  font-size: var(--ce-fs-body);
  font-weight: 500; /* 本文を少し太く（2026-08-14 ユーザー要望） */
  line-height: 1.9;
  color: var(--ce-text);
  background: var(--ce-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--ce-ink); line-height: 1.45; }
a { color: var(--ce-primary); }
img { max-width: 100%; height: auto; }

.ce-container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

.ce-skip {
  position: absolute; left: -9999px;
}
.ce-skip:focus {
  left: 8px; top: 8px; z-index: 100;
  background: var(--ce-primary); color: #fff;
  padding: 8px 14px; border-radius: 8px;
}

/* ---------- ヘッダー ---------- */
.ce-topbar { background: var(--ce-primary); color: #fff; font-size: 13px; }
.ce-topbar__inner { display: flex; align-items: center; gap: 16px; min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.ce-topbar__menu,
.ce-topbar__nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ce-topbar__menu a,
.ce-topbar__nav > ul a { color: #fff; text-decoration: none; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
.ce-topbar__menu a:hover,
.ce-topbar__nav > ul a:hover { background: rgba(255, 255, 255, 0.15); }
.ce-topbar__tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ce-topbar__cta {
  color: #fff; text-decoration: none; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 7px 16px;
}
.ce-topbar__cta:hover { background: rgba(255, 255, 255, 0.15); }
.ce-topbar__cta--join { background: #fff; color: var(--ce-primary); border-color: #fff; }
.ce-topbar__cta--join:hover { background: var(--ce-accent-soft); border-color: var(--ce-accent-soft); }

.ce-toggles { display: inline-flex; gap: 6px; }
.ce-toggle {
  appearance: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.55); background: transparent; color: #fff;
  border-radius: 999px; min-width: 30px; height: 24px; padding: 0 8px;
  font-size: 12px; line-height: 1;
  transition: background-color 0.15s var(--ce-ease);
}
.ce-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.ce-toggle[aria-pressed="true"] { background: #fff; color: var(--ce-primary); }

.ce-masthead { background: var(--ce-card); }
.ce-masthead__inner { display: flex; align-items: center; min-height: 84px; }
.ce-logo { display: inline-flex; align-items: center; color: var(--ce-ink); font-weight: 800; font-size: 20px; text-decoration: none; }
.ce-logo img { max-height: 50px; width: auto; }
.ce-logo--compact { display: none; }
html[data-ce-theme="dark"] .ce-logo img { filter: brightness(0) invert(1); }

.ce-nav { background: var(--ce-card); border-top: 1px solid var(--ce-line); border-bottom: 1px solid var(--ce-line); }
.ce-nav__inner { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.ce-nav__menu,
.ce-nav__inner > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
/* トップバーメニューの複製はドロワー（スマホ・展開時）専用。それ以外では常に非表示 */
.ce-nav .ce-nav__menu--topbar { display: none; }
.ce-nav__menu a,
.ce-nav__inner > ul a { display: block; color: var(--ce-ink); font-weight: 700; font-size: 14px; text-decoration: none; padding: 8px 12px; border-radius: 8px; }
.ce-nav__menu a:hover,
.ce-nav__inner > ul a:hover { color: var(--ce-primary); background: var(--ce-accent-soft); }
.ce-nav__search-toggle { margin-left: auto; appearance: none; border: none; background: none; cursor: pointer; font-size: 16px; color: var(--ce-ink); text-decoration: none; padding: 6px; display: inline-flex; }
.ce-nav__search-toggle:hover { color: var(--ce-primary); }
.ce-nav__search-toggle[aria-expanded="true"] { color: var(--ce-primary); }
/* コミュニティ会員だけに見える Slack ボタン（inc/community.php）。
   検索アイコンの margin-left:auto で右寄せしていたので、その役目をこちらに移す。
   ※本文内の .ce-slackbtn とは別物（あちらは .ce-article__content 配下限定） */
.ce-navslack { margin-left: auto; position: relative; }
.ce-navslack + .ce-nav__search-toggle { margin-left: 0; }
.ce-navslack__btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 11px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-card);
  color: var(--ce-ink); font-family: var(--ce-font);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: border-color 0.15s var(--ce-ease), background-color 0.15s var(--ce-ease);
}
/* グローバルナビの親項目と同じ下向きの三角 */
.ce-navslack__btn::after {
  content: ""; display: inline-block; margin-left: 1px;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
}
.ce-navslack__mark { width: 16px; height: 16px; flex: none; display: block; }
/* 開閉はサブメニューと同じくCSSのみ（hover と focus-within） */
.ce-navslack__panel {
  display: none; position: absolute; right: 0; top: 100%; z-index: 50;
  min-width: 210px; padding: 8px; margin-top: 2px;
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: 12px; box-shadow: var(--ce-shadow-hover);
}
.ce-navslack:hover > .ce-navslack__panel,
.ce-navslack:focus-within > .ce-navslack__panel { display: block; }
.ce-navslack__panel a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--ce-ink); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
@media (hover: hover) {
  .ce-navslack__btn:hover { border-color: var(--ce-primary); background: var(--ce-accent-soft); }
  .ce-navslack__panel a:hover { color: var(--ce-primary); background: var(--ce-accent-soft); }
}
/* 幅が足りない画面ではマークだけにする */
@media (max-width: 860px) {
  .ce-navslack__btn { padding: 7px 8px 7px 7px; }
  .ce-navslack__label { display: none; }
}
.ce-nav__search { border-top: 1px solid var(--ce-line); padding: 14px 0; background: var(--ce-card); }
.ce-nav__search[hidden] { display: none; }
.ce-searchform { display: flex; gap: 10px; align-items: center; }

/* サブメニュー: PCはホバー/フォーカスで開くドロップダウン */
.ce-nav__menu li,
.ce-nav__inner > ul li { position: relative; }
.ce-nav__menu .sub-menu,
.ce-nav__inner ul ul {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; left: 0; top: 100%; z-index: 50;
  min-width: 220px;
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: 12px; box-shadow: var(--ce-shadow-hover);
  display: none;
}
.ce-nav__menu li:hover > .sub-menu,
.ce-nav__menu li:focus-within > .sub-menu,
.ce-nav__inner ul li:hover > ul,
.ce-nav__inner ul li:focus-within > ul { display: block; }
.ce-nav__menu .sub-menu a,
.ce-nav__inner ul ul a { font-weight: 600; font-size: 13.5px; padding: 9px 12px; }
.ce-nav__menu .menu-item-has-children > a::after {
  content: ""; display: inline-block; margin-left: 7px; vertical-align: 2px;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
}

/* ---------- カード ---------- */
.ce-main { padding: 26px 0 88px; }
/* min(300px, 100%) にしているのは、入れ物が300pxより狭いときに列が縮まず
   はみ出していたため（2026-08-30 実測。/tools/ が360px＋文字1.15倍で
   横スクロールしていた）。300pxより広いときの見え方は変わらない。 */
.ce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.ce-card {
  position: relative; /* 右上の「あとで読む」ミニボタンの基準 */
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
  box-shadow: var(--ce-shadow); overflow: hidden;
  transition: transform 0.18s var(--ce-ease), box-shadow 0.18s var(--ce-ease), border-color 0.18s var(--ce-ease);
}
/* ホバー装飾はホバーできる端末のみ（タッチではタップ後に:hoverが残り
   保存ボタン押下でタイトルが青くなったままになるため） */
@media (hover: hover) {
  .ce-card:hover { transform: translateY(-3px); box-shadow: var(--ce-shadow-hover); border-color: color-mix(in srgb, var(--ce-primary) 35%, var(--ce-line)); }
}
.ce-card__link { display: block; color: inherit; text-decoration: none; }
.ce-card__thumb { position: relative; aspect-ratio: 420 / 265; background: var(--ce-accent-soft); }
.ce-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-card__badge {
  position: absolute; left: 10px; top: 10px;
  background: var(--ce-primary); color: #fff;
  font-size: calc(10.5px * var(--ce-scale)); font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 11px; border-radius: 999px;
}
.ce-card__body { padding: 14px 16px 16px; }
/* 800だと Hiragino Sans で W8（極太）になり従来より大きく見えるため 700 に
   （旧 ProN 環境の W6 相当の見た目。サイズは16pxのまま） */
.ce-card__title { margin: 0; font-size: var(--ce-fs-title-card); line-height: 1.55; font-weight: 700; }
@media (hover: hover) {
  .ce-card:hover .ce-card__title { color: var(--ce-primary); }
}
.ce-card__meta { margin-top: 6px; font-size: var(--ce-fs-meta); color: var(--ce-text-soft); }

.ce-pagination { margin-top: 28px; }
.ce-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--ce-line); border-radius: 10px;
  color: var(--ce-ink); text-decoration: none; font-weight: 700; font-size: 13.5px;
  background: var(--ce-card);
}
.ce-pagination .page-numbers.current { background: var(--ce-primary); border-color: var(--ce-primary); color: #fff; }
.ce-pagination .page-numbers:hover:not(.current) { border-color: var(--ce-primary); color: var(--ce-primary); }

/* ---------- セクション見出し（トップ・アーカイブ共通） ---------- */
.ce-sec { margin-top: 68px; }
.ce-sec:first-child { margin-top: 6px; }
.ce-sec__head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--ce-line); padding-bottom: 10px; margin-bottom: 16px;
  position: relative;
}
.ce-sec__head::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 42px; height: 3px; background: var(--ce-primary); border-radius: 2px;
}
.ce-sec__head h1, .ce-sec__head h2 { font-size: 15px; letter-spacing: 0.06em; margin: 0; }
/* PCではセクション見出しを大きく（2026-08-14 ユーザー要望。スマホは15pxのまま） */
@media (min-width: 601px) {
  .ce-sec__head h1, .ce-sec__head h2 { font-size: calc(20px * var(--ce-scale)); }
}
/* 一覧ページの補足行（アーカイブの説明・検索結果の件数） */
.ce-sec__desc { margin: -6px 0 16px; font-size: 13px; color: var(--ce-text-soft); }
.ce-sec__more { margin-left: auto; font-size: 12.5px; color: var(--ce-primary); text-decoration: none; font-weight: 700; }

/* 読み上げ専用テキスト。WordPress 標準のクラス名で、テンプレート各所で使っている。
   これまではブロックライブラリのCSSが偶然定義していたので隠れていたが、
   そちらを外しても崩れないようテーマ側で持つ。 */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}
.screen-reader-text:focus {
  position: static !important; width: auto; height: auto;
  margin: 0; overflow: visible; white-space: normal; clip: auto; clip-path: none;
}

/* ==========================================================================
   イベントのアーカイブ動画（inc/archive-video.php）
   会員には本編プレイヤー、非会員にはサムネイル＋登録の訴求を出す
   ========================================================================== */
.ce-archvideo { margin: 0 0 30px; }
.ce-archvideo__frame {
  position: relative; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--ce-radius); overflow: hidden;
}
.ce-archvideo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 非会員向け。YouTubeのサムネイルは限定公開だと灰色のプレースホルダが返る
   ことがあり、記事上部のアイキャッチとも重複するため画像は敷かない。
   ブランド色の淡いパネル＋左の縦線で「ここは別枠」と分かるようにする */
.ce-archvideo__gate {
  background: var(--ce-accent-soft); border: 1px solid var(--ce-line);
  border-left: 4px solid var(--ce-primary);
  border-radius: var(--ce-radius); overflow: hidden;
}
.ce-archvideo__body { padding: 22px 24px 24px; }
.ce-article__content p.ce-archvideo__label {
  margin: 0 0 6px; font-size: calc(12px * var(--ce-scale)); font-weight: 800;
  letter-spacing: 0.06em; color: var(--ce-primary);
  display: flex; align-items: center; gap: 6px;
}
.ce-archvideo__lockmark { display: inline-flex; }
.ce-archvideo__lockmark .ce-icon {
  width: 15px; height: 15px; fill: currentColor; display: block;
}
.ce-article__content .ce-archvideo__title {
  margin: 0 0 10px; padding: 0; border: 0;
  font-size: calc(19px * var(--ce-scale)); line-height: 1.5;
}
.ce-article__content p.ce-archvideo__lead {
  margin: 0 0 16px; font-size: calc(14px * var(--ce-scale)); line-height: 1.9;
  color: var(--ce-text-soft);
}
.ce-article__content p.ce-archvideo__btns {
  margin: 0; display: flex; flex-wrap: wrap; gap: 10px;
}
/* 色は .ce-article__content a（本文リンク色）に負けないよう詳細度を上げる。
   上げ忘れると塗りボタンが青地に青文字になって読めなくなる */
.ce-archvideo .ce-archvideo__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 26px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid var(--ce-primary); color: var(--ce-primary); background: transparent;
  font-size: calc(13.5px * var(--ce-scale)); font-weight: 700;
}
.ce-archvideo .ce-archvideo__btn--primary {
  background: var(--ce-primary); border-color: var(--ce-primary); color: #fff;
}
@media (hover: hover) {
  .ce-archvideo .ce-archvideo__btn:hover { background: var(--ce-accent-soft); }
  .ce-archvideo .ce-archvideo__btn--primary:hover {
    background: var(--ce-primary-dark); border-color: var(--ce-primary-dark); color: #fff;
  }
}
.ce-article__content p.ce-archvideo__note {
  margin: 14px 0 0; font-size: calc(12.5px * var(--ce-scale)); color: var(--ce-text-soft);
}
@media (max-width: 600px) {
  .ce-archvideo__body { padding: 18px 16px 20px; }
  .ce-archvideo__btn { width: 100%; }
}

/* ---------- アーカイブ動画の一覧（/event-archives/） ----------
   ツール一覧（.ce-tools-page）と同じ扱い: 白いカードで囲まずフル幅に広げ、
   動画は3カラムで並べる（2026-08-22 ユーザー要望） */
.ce-article--page:has(.ce-vidlist) {
  max-width: none; background: transparent; border: 0; border-radius: 0; padding: 0;
}
.ce-vidlist { margin: 0; }
/* .ce-grid の auto-fill（4カラムになる）を上書きして3カラム固定にする */
.ce-vidlist .ce-vidlist__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .ce-vidlist .ce-vidlist__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ce-vidlist .ce-vidlist__grid { grid-template-columns: 1fr; }
}
.ce-article__content p.ce-vidlist__count {
  margin: 0 0 6px; font-size: calc(13.5px * var(--ce-scale)); color: var(--ce-text-soft);
}
.ce-vidlist__count strong { font-size: calc(19px * var(--ce-scale)); color: var(--ce-ink); }
.ce-article__content p.ce-vidlist__notice {
  margin: 0 0 26px; padding: 12px 16px; border-radius: 10px;
  background: var(--ce-accent-soft); color: var(--ce-ink);
  font-size: calc(13.5px * var(--ce-scale)); line-height: 1.8;
}
.ce-vidlist .ce-vidlist__notice a { color: var(--ce-primary); font-weight: 700; }
.ce-vidlist__group { margin: 0 0 44px; }
.ce-vidlist__group:last-child { margin-bottom: 0; }
/* 見出しはツール一覧・リソース一覧と同じ「左に青いバー」。
   .ce-sec__head を使うと本文h2の左バーと下線が二重になるため使わない */
.ce-article__content .ce-vidlist__heading { margin: 0 0 0.6em; }
.ce-article__content .ce-vidlist__grid { margin-top: 20px; }
.ce-vidcard {
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); overflow: hidden;
  transition: transform 0.18s var(--ce-ease), box-shadow 0.18s var(--ce-ease), border-color 0.18s var(--ce-ease);
}
@media (hover: hover) {
  .ce-vidcard:hover { transform: translateY(-3px); box-shadow: var(--ce-shadow-hover); border-color: color-mix(in srgb, var(--ce-primary) 35%, var(--ce-line)); }
}
/* 本文リンク色に負けないよう詳細度を上げる（カード見出しが青くなるのを防ぐ） */
.ce-vidcard .ce-vidcard__link { display: block; color: var(--ce-ink); text-decoration: none; }
.ce-vidcard__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.ce-vidcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 再生マーク。動画であることが一目で分かるように */
.ce-vidcard__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.ce-vidcard__play svg {
  width: 40px; height: 40px; fill: #fff; opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.ce-vidcard__body { display: block; padding: 14px 16px 16px; }
.ce-vidcard .ce-vidcard__title {
  display: block; font-size: var(--ce-fs-title-card); line-height: 1.55; font-weight: 700;
  color: var(--ce-ink);
}
@media (hover: hover) {
  .ce-vidcard:hover .ce-vidcard__title { color: var(--ce-primary); }
  .ce-vidcard .ce-vidcard__link:hover { text-decoration: none; }
}
.ce-vidcard .ce-vidcard__meta { display: block; margin-top: 6px; font-size: var(--ce-fs-meta); color: var(--ce-text-soft); }

/* 一覧カード・行の「動画あり」バッジ */
.ce-videobadge { display: inline-flex; vertical-align: middle; margin-right: 5px; }
.ce-videobadge .ce-icon { width: 15px; height: 15px; fill: var(--ce-primary); }

/* 「もっと見る」（トップページのセクション追加ロード） */
.ce-loadmore { text-align: center; margin-top: 28px; }
.ce-loadmore__btn {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--ce-primary);
  border: 1.5px solid var(--ce-primary); border-radius: 999px;
  padding: 11px 52px; font-family: var(--ce-font);
  font-size: calc(14px * var(--ce-scale)); font-weight: 700;
  transition: background-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
.ce-loadmore__btn:hover { background: var(--ce-primary); color: #fff; }
.ce-loadmore__btn[disabled] { opacity: 0.55; cursor: default; }
.ce-grid--more { margin-top: 26px; }
.ce-grid--more[hidden] { display: none; }

/* 新着記事の追加ロードは上のリストに合わせた行形式。PCは2列で敷き詰める */
.ce-rows--more { margin-top: 10px; }
@media (min-width: 601px) {
  .ce-rows--more { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
}
.ce-rows--more[hidden] { display: none !important; }
/* 新着記事: PC用ヒーロー構成とスマホ用全カードの出し分け */
@media (max-width: 600px) {
  .ce-hero--pconly, .ce-rows--pconly { display: none !important; }
}
@media (min-width: 601px) {
  .ce-grid--sponly { display: none !important; }
  /* PCは「新着記事」見出しと「もっと見る」を出さない（2026-08-14 ユーザー要望） */
  .ce-sec[data-cat="0"] > .ce-sec__head,
  .ce-sec[data-cat="0"] > .ce-loadmore { display: none; }
}

/* カード⇄リスト表示切替（スマホのみ表示。ニュース以降のセクション） */
.ce-viewtoggle { display: none; margin-left: auto; gap: 4px; }
.ce-viewtoggle__btn,
.ce-rl-viewbtn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; padding: 0;
  background: transparent; color: var(--ce-text-soft);
  border: 1px solid var(--ce-line); border-radius: 7px;
}
.ce-viewtoggle__btn .ce-icon,
.ce-rl-viewbtn .ce-icon { width: 15px; height: 15px; }
.ce-viewtoggle__btn[aria-pressed="true"],
.ce-rl-viewbtn[aria-pressed="true"] {
  background: var(--ce-primary); border-color: var(--ce-primary); color: #fff;
}

/* ---------- トップ: 新着記事（大1本＋リスト5本） ---------- */
.ce-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; }
.ce-hero__feat .ce-card__thumb { aspect-ratio: 16 / 9; }
.ce-hero__feat .ce-card__title { font-size: calc(23px * var(--ce-scale)); line-height: 1.5; }
.ce-hero__feat .ce-card__body { padding: 18px 20px 20px; }
.ce-row {
  display: flex; gap: 12px; padding: 11px 2px;
  border-bottom: 1px solid var(--ce-line);
  color: inherit; text-decoration: none;
}
@media (hover: hover) {
  .ce-row:hover .ce-row__title { color: var(--ce-primary); }
}
.ce-row__img { width: 92px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; background: var(--ce-accent-soft); }
.ce-row__title { display: block; font-size: calc(14.5px * var(--ce-scale)); font-weight: 700; line-height: 1.5; color: var(--ce-ink); }
.ce-row__meta { display: block; margin-top: 4px; font-size: 11px; color: var(--ce-text-soft); }
.ce-lock { font-size: 0.85em; margin-right: 4px; }
@media (max-width: 900px) { .ce-hero { grid-template-columns: 1fr; } }

/* ---------- 記事ページ ---------- */
.ce-article { max-width: 760px; margin: 0 auto; }
/* 本文背景が薄灰色になったため、記事本体はPCで白カードとして載せる */
@media (min-width: 601px) {
  .ce-article:not(.ce-article--page) {
    max-width: 856px; padding: 36px 48px;
    background: var(--ce-card); border: 1px solid var(--ce-line);
    border-radius: var(--ce-radius);
  }
}
.ce-article__badge {
  display: inline-block; background: var(--ce-primary); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 12px; border-radius: 999px; text-decoration: none;
}
.ce-article__title { font-size: var(--ce-fs-title-post); line-height: 1.45; margin: 12px 0 10px; }
.ce-article__meta {
  color: var(--ce-text-soft); font-size: calc(12.5px * var(--ce-scale)); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
}

/* 会員限定「あとで読む」ボタン（記事ヘッダー） */
.ce-readlater-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1px solid var(--ce-line); border-radius: 999px;
  background: var(--ce-card); color: var(--ce-text-soft);
  font: inherit; font-size: calc(12px * var(--ce-scale)); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: color 0.15s var(--ce-ease), border-color 0.15s var(--ce-ease);
}
.ce-readlater-btn .ce-icon { width: 14px; height: 14px; fill: currentColor; }
.ce-readlater-btn:hover { color: var(--ce-primary); border-color: var(--ce-primary); }
.ce-readlater-btn svg + svg { display: none; }
.ce-readlater-btn.is-saved { color: var(--ce-primary); border-color: var(--ce-primary); background: var(--ce-accent-soft); }
.ce-readlater-btn.is-saved svg:first-of-type { display: none; }
.ce-readlater-btn.is-saved svg + svg { display: inline-block; }

/* 一覧カード右上のアイコンだけの保存ボタン（ログイン会員のみ描画） */
.ce-readlater-btn--mini {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; padding: 0; justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 5px rgba(20, 40, 50, 0.18);
}
.ce-readlater-btn--mini .ce-icon { width: 16px; height: 16px; }
html[data-ce-theme="dark"] .ce-readlater-btn--mini { background: var(--ce-card); }

/* あとで読む一覧（/saved/ の [cehub_readlater]）: カード⇄リスト切替（既定リスト） */
.ce-readlater__toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
/* 最後の1件を外したとき、JSが hidden にしても display 指定に負けて残ってしまう */
.ce-readlater__toolbar[hidden],
.ce-readlater .ce-readlater__grid[hidden] { display: none; }
.ce-readlater__count { color: var(--ce-text-soft); font-size: calc(13px * var(--ce-scale)); }
.ce-readlater__done { color: var(--ce-primary); font-size: calc(12.5px * var(--ce-scale)); font-weight: 600; }
.ce-readlater .ce-viewtoggle { display: inline-flex; } /* このページはPCでも切替可能 */
/* リスト形式: トップのリスト変換と同じ見た目（アイキャッチ付き行）を全幅で適用 */
.ce-readlater.is-list .ce-readlater__grid:not([hidden]) { display: block; }
.ce-readlater.is-list .ce-card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--ce-line);
}
.ce-readlater.is-list .ce-card:hover { transform: none; box-shadow: none; }
.ce-readlater.is-list .ce-card__link { display: flex; gap: 12px; align-items: flex-start; padding: 11px 40px 11px 2px; }
.ce-readlater.is-list .ce-card__thumb {
  width: 92px; height: 64px; aspect-ratio: auto; flex: none;
  border-radius: 8px; overflow: hidden;
}
.ce-readlater.is-list .ce-card__badge { display: none; }
.ce-readlater.is-list .ce-card__body { padding: 0; flex: 1; min-width: 0; }
.ce-readlater.is-list .ce-card__title { font-size: calc(15.5px * var(--ce-scale)); font-weight: 700; line-height: 1.5; }
.ce-readlater.is-list .ce-card__meta { margin-top: 4px; font-size: 11px; }
.ce-readlater.is-list .ce-readlater-btn--mini {
  top: 50%; right: 4px; transform: translateY(-50%);
  background: transparent; border-color: transparent; box-shadow: none;
}

/* 行(.ce-row)内の保存ボタン: PCヒーロー右リスト等。行の右端にインライン配置 */
.ce-row .ce-readlater-btn--mini {
  position: static; align-self: center; margin-left: auto; flex: none;
  width: 30px; height: 30px;
  background: transparent; border-color: transparent; box-shadow: none;
}
.ce-article__thumb img { width: 100%; border-radius: var(--ce-radius); }
.ce-article__content { margin-top: 24px; }
.ce-article__content p { font-size: var(--ce-fs-body); line-height: 2.0; margin: 0 0 1.7em; }
/* 本文内見出しのタイプスケール（本文16.5pxから約1.13倍ずつ:
   h6=16.5 / h5=17.5 / h4=19 / h3=21 / h2=24。2026-08-14 ユーザー要望で体系化） */
.ce-article__content h2 {
  font-size: calc(24px * var(--ce-scale)); line-height: 1.5;
  padding-left: 14px; border-left: 4px solid var(--ce-primary);
  margin: 2.2em 0 1em;
}
.ce-article__content h3 { font-size: calc(21px * var(--ce-scale)); line-height: 1.5; margin: 2em 0 0.9em; }
/* h4-h6 未定義だとブラウザ既定で本文より小さくなる（旧記事はQ&A見出しに h5 を使用） */
.ce-article__content h4 { font-size: calc(19px * var(--ce-scale)); line-height: 1.6; margin: 2em 0 0.9em; }
.ce-article__content h5 { font-size: calc(17.5px * var(--ce-scale)); line-height: 1.7; margin: 1.8em 0 0.8em; }
.ce-article__content h6 { font-size: calc(16.5px * var(--ce-scale)); line-height: 1.7; margin: 1.8em 0 0.8em; }
@media (max-width: 600px) {
  .ce-article__content h2 { font-size: calc(21px * var(--ce-scale)); }
  .ce-article__content h3 { font-size: calc(19px * var(--ce-scale)); }
}
/* 旧記事は見出しの中をさらに <strong> で囲んでいるものが多い。
   strong の既定値 font-weight: bolder は親の太さを基準に一段上げるため、
   もともと太い見出し（700）の中では 900 になり、極端に太く見える。
   見出し内では親の太さをそのまま使う。 */
.ce-article__content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }
/* 本文内に埋め込まれるカード（children_pages・ツール一覧等）には
   本文見出しの装飾やリンク色を波及させない */
.ce-article__content .ce-card__title {
  border-left: 0; padding-left: 0; margin: 0 0 6px;
  font-size: var(--ce-fs-title-card);
}
.ce-article__content .ce-card__link { color: var(--ce-text); }
.ce-article__content .ce-card__body { font-size: calc(14px * var(--ce-scale)); line-height: 1.8; }
.ce-article__content img, .ce-article__content iframe { border-radius: 12px; max-width: 100%; }
.ce-article__content img { height: auto; }
/* wp-caption はインラインで固定幅(width:1280px等)が付くため打ち消す（画像はみ出し防止） */
.ce-article__content figure,
.ce-article__content .wp-caption { max-width: 100%; width: auto !important; height: auto; margin-left: 0; margin-right: 0; }
.ce-article__content .wp-caption-text { font-size: calc(12.5px * var(--ce-scale)); color: var(--ce-text-soft); margin-top: 6px; }
.ce-article__content blockquote {
  background: var(--ce-accent-soft); border-left: 4px solid var(--ce-primary);
  border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 1.6em 0;
  color: var(--ce-ink);
}
.ce-article__content a { color: var(--ce-primary); text-underline-offset: 3px; }
.ce-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.ce-article__tags a {
  background: var(--ce-accent-soft); color: var(--ce-primary);
  border: 1px solid color-mix(in srgb, var(--ce-primary) 28%, transparent);
  border-radius: 999px; font-size: 11px; font-weight: 700;
  padding: 3px 12px; text-decoration: none;
}
.ce-article__tags a:hover { background: var(--ce-primary); color: #fff; }
.ce-author {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); box-shadow: var(--ce-shadow);
  padding: 18px 20px; margin: 30px 0;
}
.ce-author img { border-radius: 50%; flex: none; }
.ce-author__name { font-weight: 800; color: var(--ce-ink); margin: 0 0 4px; font-size: 15px; }
.ce-author__bio { margin: 0; font-size: calc(13px * var(--ce-scale)); line-height: 1.8; }

/* ---------- 固定ページ・アーカイブのタイトル帯 ---------- */
.ce-titlebar { background: var(--ce-accent-soft); padding: 34px 0; margin-bottom: 26px; }
/* タイトル帯で始まるページはナビとの間の隙間（ce-mainの上padding分）を詰める */
.ce-main > .ce-titlebar:first-child { margin-top: -26px; }
.ce-titlebar h1 { margin: 0; font-size: calc(21px * var(--ce-scale)); }
.ce-titlebar p { margin: 6px 0 0; color: var(--ce-text-soft); font-size: 13px; }
/* 固定ページ: 読みやすさのため本文カラムを制限し、白カードとして表示
   （左右に余白＋白背景。2026-08-14 ユーザー要望） */
.ce-article--page {
  max-width: 980px; margin: 0 auto; /* 880→980px（2026-08-15 ユーザー要望でもう少し広く） */
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); padding: 32px 40px;
}
@media (max-width: 600px) {
  .ce-article--page { padding: 20px 16px; }
}
/* ツール埋め込みページ（/tools/startup/ 等）: 同一ドメインの静的アプリを
   iframe 表示。カード・コンテナの制約を外して画面いっぱいのフルカラムにする */
.ce-toolframe { display: block; width: 100%; border: 0; min-height: 85vh; }
.ce-article--page:has(.ce-toolframe),
.ce-article--page:has(.ce-toolteaser) {
  max-width: none; width: 100vw; margin-left: calc(50% - 50vw);
  padding: 0; background: transparent; border: 0; border-radius: 0;
}
.ce-main:has(.ce-toolframe),
.ce-main:has(.ce-toolteaser) { padding: 0 0 32px; }
.ce-main:has(.ce-toolteaser) .ce-article__content > p:empty { display: none; margin: 0; }
/* wpautop が iframe を <p>（下マージン28px）で包むため、その分の余白を除去 */
.ce-article__content p:has(> .ce-toolframe) { margin: 0; line-height: 0; }
.ce-article__content p:has(> .ce-toolframe) br { display: none; }
.ce-main:has(.ce-toolframe) .ce-article__content > p:empty { display: none; margin: 0; }
/* ツール一覧ページ(/tools/): 白カード・880px制限を外しコンテナ幅いっぱいに */
.ce-article--page:has(.ce-tools-page) {
  max-width: none; background: transparent; border: 0; border-radius: 0; padding: 0;
}
.ce-tools-page h2 { border-left: 4px solid var(--ce-primary); padding-left: 14px; margin: 0 0 0.6em; }
.ce-tools-page .ce-grid { margin-top: 26px; }
/* ツール一覧カード: タイトル大きく・説明文小さくしてメリハリをつける */
/* リンクは a で全体を包まず stretched-link 方式（wpautop が
   ブロックを跨ぐ a を壊して空段落を差し込み、カードが縦に伸びるため） */
.ce-tools-page .ce-card { position: relative; }
.ce-tools-page .ce-card__title a { color: inherit; text-decoration: none; }
.ce-tools-page .ce-card__title a::after { content: ""; position: absolute; inset: 0; }
.ce-tools-page .ce-card__body { padding: 20px 22px 24px; }
.ce-tools-page .ce-card__title { font-size: calc(20px * var(--ce-scale)); line-height: 1.5; }
.ce-tools-page .ce-card__desc {
  margin: 10px 0 0; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.85;
  color: var(--ce-text-soft);
}
/* ツール名の共通見出し（.ce-sec__head を併用しトップのセクション見出しと同デザイン） */
.ce-toolhead { margin-top: 18px; }
.ce-toolhead .ce-sec__head { margin-bottom: 6px; }
/* ツール詳細 → 一覧(/tools/)への戻りリンク */
/* p.〜 にして .ce-article__content p（本文サイズ）より優先させる */
p.ce-toolhead__back { margin: 0 0 8px; font-size: calc(11.5px * var(--ce-scale)); line-height: 1.6; }
.ce-toolhead__back a { color: var(--ce-text-soft); text-decoration: none; font-weight: 500; opacity: 0.85; }
.ce-toolhead__back a:hover { color: var(--ce-primary); }
/* 戻りリンクがページ本文、見出しがテーマ側と分かれると枠が2つ続く。
   そのままだと margin-top が二重に効いて間隔が広がるため詰める
   （2026-08-30。EU版のページ本文から見出しだけ消した状態がこれ） */
.ce-toolhead + .ce-toolhead { margin-top: 0; }

/* 旧テーマでは全幅レイアウトを狭めるために vc_col-sm-8/9/10＋オフセットが
   使われていたが、白カード内では二重の余白になるため全幅に展開する */
.ce-article--page .vc_col-sm-8,
.ce-article--page .vc_col-sm-9,
.ce-article--page .vc_col-sm-10 { width: 100%; }
.ce-article--page [class*="vc_col-sm-offset-"] { margin-left: 0; }

/* 旧テーマ（Bootstrap系）のプロフィール行: 左に丸写真・右に文章
   マークアップ例: <div class="row"><div class="col-md-3">img</div><div class="col-md-9">文</div></div> */
.ce-article__content .row { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: flex-start; margin: 0 0 1.4em; }
.ce-article__content .row .col-md-3 { flex: 0 0 130px; }
.ce-article__content .row .col-md-3 img { width: 100%; height: auto; margin: 0; }
.ce-article__content .row .col-md-9 { flex: 1; min-width: 220px; font-size: calc(14.5px * var(--ce-scale)); line-height: 1.9; }
.ce-article__content .img-circle { border-radius: 50% !important; }
@media (max-width: 600px) {
  .ce-article__content .row .col-md-3 { flex-basis: 96px; }
}

/* ---------- SWPM フォーム（ログイン/登録/プロフィール） ---------- */
.swpm-login-widget-form, .swpm-registration-widget-form,
.swpm-profile-widget-form, .swpm-pw-reset-widget-form,
.swpm-login-widget-logged {
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); box-shadow: var(--ce-shadow);
  padding: 26px 28px; max-width: 560px; margin: 10px auto 30px;
}
.swpm-login-widget-form input[type="text"],
.swpm-login-widget-form input[type="password"],
.swpm-registration-widget-form input[type="text"],
.swpm-registration-widget-form input[type="password"],
.swpm-registration-widget-form input[type="email"],
.swpm-profile-widget-form input[type="text"],
.swpm-profile-widget-form input[type="password"],
.swpm-profile-widget-form input[type="email"],
.swpm-pw-reset-widget-form input[type="email"],
.swpm-pw-reset-widget-form input[type="text"] {
  width: 100%; padding: 10px 14px; margin: 4px 0 14px;
  border: 1px solid var(--ce-line); border-radius: 10px;
  background: var(--ce-bg); color: var(--ce-text);
  font-family: var(--ce-font); font-size: 14px;
}
.swpm-login-widget-form input:focus,
.swpm-registration-widget-form input:focus {
  outline: none; border-color: var(--ce-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ce-primary) 20%, transparent);
}
.swpm-login-widget-form input[type="submit"],
.swpm-registration-widget-form input[type="submit"],
.swpm-profile-widget-form input[type="submit"],
.swpm-pw-reset-widget-form input[type="submit"] {
  background: var(--ce-primary); color: #fff; border: none;
  border-radius: 999px; padding: 11px 26px; font-weight: 700;
  font-family: var(--ce-font); font-size: 14px; cursor: pointer;
  transition: background-color 0.15s var(--ce-ease);
}
.swpm-login-widget-form input[type="submit"]:hover,
.swpm-registration-widget-form input[type="submit"]:hover {
  background: var(--ce-primary-dark);
}
.swpm-login-form-inner a, .swpm-login-widget-logged a { color: var(--ce-primary); }
.swpm-logged-label { color: var(--ce-text-soft); }
.swpm-logged-value { font-weight: 700; color: var(--ce-ink); }

/* ---------- ログイン／パスワード再設定ページ（inc/member-auth.php） ---------- */
.ce-auth__head { text-align: center; margin: 0 0 26px; }
.ce-article__content p.ce-auth__en {
  margin: 0 0 6px; font-size: calc(12.5px * var(--ce-scale)); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ce-primary);
}
.ce-article__content h2.ce-auth__title {
  margin: 0 0 10px; padding: 0; border-left: 0;
  font-size: calc(26px * var(--ce-scale)); line-height: 1.4;
  color: var(--ce-ink); text-align: center;
}
.ce-article__content h2.ce-auth__title::before,
.ce-article__content h2.ce-auth__title::after { content: none; }
.ce-article__content p.ce-auth__lead {
  max-width: 40em; margin: 0 auto; text-align: center;
  font-size: calc(14px * var(--ce-scale)); line-height: 1.9; color: var(--ce-text-soft);
}

.ce-auth h2, .ce-auth p, .ce-auth li { word-break: auto-phrase; text-wrap: pretty; }

.ce-auth__cols { display: grid; gap: 22px; grid-template-columns: 1.15fr 0.85fr; align-items: start; }
/* SWPM 側のカードは幅・余白をこのレイアウトに合わせる */
.ce-auth__main .swpm-login-widget-form,
.ce-auth__main .swpm-pw-reset-widget-form,
.ce-auth__main .swpm-login-widget-logged {
  max-width: none; margin: 0; padding: 30px 30px 26px;
}
/* 本文に埋め込まれた高さ調整用の空 div を無効化 */
.ce-auth__main div[style*="height: 40px"] { display: none; }
.ce-auth__main .swpm-label,
.ce-auth__main .swpm_label {
  display: block; margin: 0 0 2px;
  font-size: calc(13px * var(--ce-scale)); font-weight: 700; color: var(--ce-ink);
}
.ce-auth__main .swpm-login-form-submit,
.ce-auth__main .swpm-pw-reset-widget-form input[type="submit"] {
  width: 100%; padding: 13px 26px; font-size: calc(15px * var(--ce-scale));
}
.ce-auth__main .swpm-remember-me { margin: 2px 0 16px; font-size: calc(13.5px * var(--ce-scale)); }
.ce-auth__main .swpm-forgot-pass-link,
.ce-auth__main .swpm-join-us-link { margin-top: 12px; font-size: calc(13.5px * var(--ce-scale)); }
.ce-auth__main .swpm-join-us-link { display: none; } /* 右カラムの導線と重複するため隠す */

/* ログイン済みのアカウント情報: ラベルと値を2列に並べる */
.ce-auth__main .swpm-login-widget-logged > div {
  display: grid; grid-template-columns: 11.5em 1fr; gap: 4px 14px;
  padding: 10px 0; border-bottom: 1px solid var(--ce-line);
  font-size: calc(13.5px * var(--ce-scale));
}
.ce-auth__main .swpm-login-widget-logged > div:first-child { padding-top: 0; }
.ce-auth__main .swpm-login-widget-logged .swpm-logged-label { color: var(--ce-text-soft); }
.ce-auth__main .swpm-login-widget-logged > .swpm-edit-profile-link,
.ce-auth__main .swpm-login-widget-logged > .swpm-logged-logout-link,
.ce-auth__main .swpm-login-widget-logged > .swpm-margin-bottom-10 {
  display: block; border-bottom: 0; padding: 10px 0 0;
}
.ce-auth__main .swpm-login-widget-logged > .swpm-margin-bottom-10 { padding: 0; }

.ce-auth__side {
  padding: 28px 26px 24px;
  background: var(--ce-accent-soft); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
}
.ce-article__content p.ce-auth__side-en {
  margin: 0 0 4px; font-size: calc(11.5px * var(--ce-scale)); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ce-primary);
}
.ce-article__content h2.ce-auth__side-title {
  margin: 0 0 10px; padding: 0; border-left: 0;
  font-size: calc(18px * var(--ce-scale)); line-height: 1.5; color: var(--ce-ink);
}
.ce-article__content h2.ce-auth__side-title::before,
.ce-article__content h2.ce-auth__side-title::after { content: none; }
.ce-article__content p.ce-auth__side-lead {
  margin: 0 0 14px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.85; color: var(--ce-text-soft);
}
.ce-article__content ul.ce-auth__benefits,
.ce-article__content ul.ce-auth__links { margin: 0 0 18px; padding: 0; list-style: none; }
.ce-article__content ul.ce-auth__benefits li {
  position: relative; margin: 0 0 8px; padding-left: 26px;
  font-size: calc(13.5px * var(--ce-scale)); line-height: 1.8; color: var(--ce-text);
}
.ce-article__content ul.ce-auth__benefits li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ce-primary) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ce-article__content ul.ce-auth__links li {
  margin: 0 0 8px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.8;
}
.ce-article__content p.ce-auth__side-actions { margin: 0 0 12px; }
.ce-article__content .ce-auth__btn {
  display: block; padding: 13px 20px; border-radius: 999px;
  background: var(--ce-primary); color: #fff; text-align: center; text-decoration: none;
  font-size: calc(14.5px * var(--ce-scale)); font-weight: 700;
  transition: background-color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-article__content .ce-auth__btn:hover { background: var(--ce-primary-dark); color: #fff; }
}
.ce-article__content p.ce-auth__side-note {
  margin: 0; font-size: calc(12.5px * var(--ce-scale)); line-height: 1.8; color: var(--ce-text-soft);
}
.ce-article__content p.ce-auth__help {
  margin: 24px 0 0; text-align: center;
  font-size: calc(13px * var(--ce-scale)); color: var(--ce-text-soft);
}
@media (max-width: 780px) {
  .ce-auth__cols { grid-template-columns: 1fr; }
  .ce-auth__main .swpm-login-widget-form,
  .ce-auth__main .swpm-pw-reset-widget-form { padding: 24px 20px 22px; }
  .ce-auth__side { padding: 24px 20px 20px; }
}

/* ---------- SWPM 会員ウォール（テーマ側スタイル） ----------
   マークアップは inc/paywall.php（旧 gillion-child から移植）。
   旧テーマのペイウォールCSSをトークン化して全面移植。 */
.swpm-more-tag-not-logged-in .paywall-content,
.swpm-post-not-logged-in-msg .paywall-content {
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); box-shadow: var(--ce-shadow);
  color: var(--ce-text); padding: 28px 24px; margin: 24px 0;
}
.paywall-content p, .paywall-content .message-container { color: var(--ce-text); }
html[data-ce-theme="dark"] .paywall-header img { filter: brightness(0) invert(1); }

/* 本文見出しの装飾（青い縦バー等）をペイウォール内の見出しに波及させない
   （個別の見出しデザインはこの後の各ルールで上書きされる） */
.ce-article__content .paywall-content h2,
.ce-article__content .paywall-recommend h2 {
  border-left: 0; padding-left: 0; margin: 1em 0;
  font-size: calc(17px * var(--ce-scale));
}

.paywall-header { text-align: center; margin-bottom: 20px; }
.paywall-header img { max-height: 40px; width: auto; }
.paywall-content .message-container { text-align: center; margin-bottom: 1.5em; }
.paywall-content .subscriber-detail-link { color: var(--ce-primary); }

/* ボタン列 */
.paywall-content .buttons-container { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.paywall-content .buttons-column { flex: 1 1 260px; max-width: 340px; text-align: center; }
.paywall-content .buttons-column p { margin: 0.5em auto; font-size: 13px; }
.paywall-content .buttons-column a.button {
  display: flex; justify-content: center; align-items: center; flex-direction: column;
  width: 100%; height: 3.2em; border-radius: 999px;
  font-size: 1.05em; font-weight: 800; text-decoration: none;
  transition: background-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
.paywall-content .buttons-column a.button .ex-text { font-size: 0.6em; }
.paywall-content a.register-button { background: var(--ce-primary); color: #fff; }
.paywall-content a.login-button {
  background: var(--ce-card); color: var(--ce-primary);
  box-shadow: inset 0 0 0 2px var(--ce-primary);
}
@media (hover: hover) {
  .paywall-content a.register-button:hover { background: var(--ce-primary-dark); color: #fff; }
  .paywall-content a.login-button:hover { background: var(--ce-accent-soft); color: var(--ce-primary-dark); }
}

/* 会員種別と特典 */
.paywall-content h2.member-info-title { position: relative; padding: 0 2em; text-align: center; margin-top: 40px; font-size: 18px; }
.paywall-content h2.member-info-title::before {
  position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px;
  content: ""; background: var(--ce-line);
}
.paywall-content h2.member-info-title span { position: relative; padding: 0 1em; background: var(--ce-card); }
.paywall-content .member-info-container { display: flex; flex-wrap: wrap; gap: 16px; margin: 1em 0 2em; justify-content: center; }
.paywall-content .member-info-column {
  background: var(--ce-bg); flex: 1 1 260px; max-width: 340px; padding: 0 1em 1em;
  border: 1px solid var(--ce-line); border-radius: 10px; text-align: center;
}
.paywall-content h2.member-level { font-size: 1.05em; margin: 1em 0; }
.paywall-content .member-info-column p { margin-bottom: 1.2em; font-size: 14px; }
.paywall-content p.price-info { font-weight: 600; }
.paywall-content span.price-value { font-size: 2em; margin: 0 0.2em; color: var(--ce-ink); font-weight: 800; }
.paywall-content span.sub-text { font-size: 0.85em; }
.paywall-content ul.check-marker { padding-left: 0; font-size: 0.8em; list-style-type: none; text-align: left; margin: 0 0 1.2em; }
.paywall-content ul.check-marker li { position: relative; padding-left: 2.5em; margin: 0.4em 0; }
.paywall-content ul.check-marker li.check-on { color: var(--ce-ink); }
.paywall-content ul.check-marker li.check-off { color: var(--ce-text-soft); opacity: 0.55; }
.paywall-content ul.check-marker li::before {
  content: ""; position: absolute; top: 0.1em; left: 0.7em;
  width: 1.5em; height: 1.5em; border-radius: 50%;
}
.paywall-content ul.check-marker li::after {
  content: ""; position: absolute; top: 0.4em; left: 1.25em;
  width: 0.45em; height: 0.8em; transform: rotate(50deg);
}
.paywall-content ul.check-marker li.check-on::before { border: 1px solid var(--ce-primary); background: var(--ce-primary); }
.paywall-content ul.check-marker li.check-on::after { border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
.paywall-content ul.check-marker li.check-off::before { border: 1px solid var(--ce-line); background: var(--ce-line); }
.paywall-content ul.check-marker li.check-off::after { border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
.paywall-content a.detail-button {
  display: block; width: 80%; margin: 0 auto; padding: 8px 0;
  border: 2px solid var(--ce-primary); border-radius: 999px;
  color: var(--ce-primary); font-size: 0.9em; font-weight: 700; text-decoration: none;
  transition: background-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .paywall-content a.detail-button:hover { background: var(--ce-primary); color: #fff; }
}

/* おすすめ記事 */
.paywall-recommend h2.title-string { text-align: center; font-size: 1.1em; margin-top: 1.5em; }
.paywall-recpost-wrap { display: flex; flex-wrap: wrap; }
.paywall-recommend article.recommend-post { width: 45%; margin: 0.8em 2.5%; }
.paywall-recommend a { display: flex; gap: 4%; align-items: flex-start; text-decoration: none; color: var(--ce-text); }
.recommend-post-thumbnail { width: 26%; flex: none; }
.recommend-post-thumbnail img { width: 100%; height: auto; border-radius: 8px; margin: 0; }
.recommend-post-info { flex: 1; min-width: 0; }
.paywall-recommend h2.post-title-string { margin: 0; padding-top: 0; font-size: 0.8em; line-height: 1.5; }
.paywall-recommend .post-date-string { font-size: 0.72em; color: var(--ce-text-soft); }
@media (max-width: 600px) {
  .paywall-recommend article.recommend-post { width: 100%; margin: 0.8em 0; }
}

/* ---------- アイコン（インラインSVG） ---------- */
.ce-icon { width: 1em; height: 1em; vertical-align: -0.12em; fill: currentColor; }
.ce-lock { color: #c89127; margin-right: 5px; }
html[data-ce-theme="dark"] .ce-lock { color: #e0b45a; }

/* ---------- モバイルナビ（ドロワー） ---------- */
.ce-nav__hamburger { display: none; appearance: none; border: none; background: none; cursor: pointer; padding: 8px; }
.ce-nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--ce-ink); margin: 5px 0; border-radius: 2px; }
@media (max-width: 600px) {
  /* トップバー: リンク群は隠し、ツール（Aa/🌙）＋ログインだけを1行で */
  .ce-topbar__nav { display: none; }
  .ce-topbar__inner { justify-content: flex-end; gap: 10px; }
  .ce-topbar__cta { white-space: nowrap; font-size: 12px; padding: 6px 13px; }

  /* グローバルナビ: ハンバーガー開閉のドロワーに（構造セレクタ併記） */
  .ce-nav__hamburger { display: block; }
  .ce-nav__inner { flex-wrap: wrap; } /* ドロワー内の複数メニューを縦積みに */
  .ce-nav__menu,
  .ce-nav__inner > ul { display: none; width: 100%; flex-direction: column; gap: 0; padding: 6px 0; }
  .ce-nav.is-open .ce-nav__menu,
  .ce-nav.is-open .ce-nav__inner > ul { display: flex; }
  /* ドロワー下部にトップバーのメニューも表示（トップバーはスマホで非表示のため） */
  .ce-nav.is-open .ce-nav__menu--topbar { display: flex; border-top: 2px solid var(--ce-line); }
  .ce-nav.is-open .ce-nav__menu--topbar a { color: var(--ce-text-soft); font-weight: 600; }
  .ce-nav__menu a,
  .ce-nav__inner > ul a { display: block; padding: 12px 8px; border-bottom: 1px solid var(--ce-line); border-radius: 0; }
  /* ドロワー内のサブメニューはインライン展開（インデント表示） */
  .ce-nav__menu .sub-menu,
  .ce-nav__inner ul ul {
    display: block; position: static;
    min-width: 0; padding: 0 0 0 16px; margin: 0;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
  }
  .ce-nav__menu .menu-item-has-children > a::after { display: none; }

  /* スマホはロゴ帯を畳み、ハンバーガー｜ロゴ｜検索 の1段にまとめる。
     ドロワーを開いてもこの3つは1行目に残るよう order を指定する */
  .ce-masthead { display: none; }
  .ce-nav__inner { min-height: 58px; }
  .ce-nav__hamburger { order: 1; }
  .ce-logo--compact { order: 2; display: inline-flex; margin: 0 auto; }
  .ce-logo--compact img { max-height: 30px; }
  /* Slackボタンは order 未指定だと 0 になって左端に来てしまう（2026-08-22 修正）。
     ハンバーガーは左、Slackと検索は右。 */
  .ce-navslack { order: 3; margin-left: 0; }
  .ce-nav__search-toggle { order: 4; margin-left: 0; }
  .ce-nav__menu,
  .ce-nav__inner > ul { order: 5; }
  /* 左右のボタン幅を揃えてロゴを正確に中央へ。
     ハンバーガーは display:block のまま（flex にすると3本線の
     マージンが相殺されなくなり、線の間隔が開いて大きく見える）。
     3つとも高さを固定しておく。そうしないとドロワーを開いたとき、
     min-height がメニュー全体で満たされて1行目だけ縦に詰まる */
  .ce-nav__hamburger { width: 40px; height: 58px; padding: 16px 9px; }
  .ce-nav__search-toggle {
    width: 40px; height: 58px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ce-logo--compact { height: 58px; }
  /* Slackボタンも他の2つと同じ高さに揃える（1行目が縦に詰まらないように） */
  .ce-navslack { height: 58px; display: inline-flex; align-items: center; }
  .ce-navslack__btn { padding: 7px 6px; gap: 3px; }
  .ce-navslack__btn::after { margin-left: 0; }
  /* ハンバーガー｜ロゴ｜Slack｜検索 の4つを1行に収める。
     入りきらないと検索アイコンが2行目に折り返してしまうため、
     隙間を詰めてロゴが縮む余地をつくる（2026-08-22） */
  .ce-nav__inner { gap: 4px; }
  .ce-logo--compact { min-width: 0; }
  .ce-logo--compact img { max-width: 100%; }
}

/* 狭い端末（360px前後のAndroidなど）でも4つを1行に収める。
   .ce-nav__inner は flex-wrap:wrap（ドロワー用）なので、入りきらないと
   縮まずに折り返す。ロゴの幅を抑え、Slackボタンの三角を省いて幅を稼ぐ。 */
@media (max-width: 400px) {
  .ce-logo--compact img { max-width: 158px; }
  .ce-navslack__btn { padding: 7px 5px; }
  .ce-navslack__btn::after { display: none; }

  /* スマホの見出しサイズ調整（2026-08 ユーザー要望）:
     記事タイトル・トップ1本目は一段小さく、新着リスト行は少し大きく */
  .ce-article__title { font-size: calc(22px * var(--ce-scale)); }
  .ce-titlebar h1 { font-size: calc(18px * var(--ce-scale)); }
  .ce-hero__feat .ce-card__title { font-size: calc(19px * var(--ce-scale)); }
  .ce-row__title { font-size: calc(15.5px * var(--ce-scale)); }

  /* カード⇄リスト切替はスマホのみ（新着記事の1本目カードもリスト時は行に変換） */
  .ce-viewtoggle { display: inline-flex; }
  html[data-ce-view="list"] .ce-sec--switch .ce-grid { display: block; }
  html[data-ce-view="list"] .ce-sec--switch .ce-card,
  html[data-ce-view="list"] .ce-hero__feat .ce-card {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--ce-line);
  }
  html[data-ce-view="list"] .ce-sec--switch .ce-card:hover,
  html[data-ce-view="list"] .ce-hero__feat .ce-card:hover { transform: none; box-shadow: none; }
  html[data-ce-view="list"] .ce-sec--switch .ce-card__link,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__link {
    display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px;
  }
  html[data-ce-view="list"] .ce-sec--switch .ce-card__thumb,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__thumb {
    width: 92px; height: 64px; aspect-ratio: auto; flex: none;
    border-radius: 8px; overflow: hidden;
  }
  html[data-ce-view="list"] .ce-sec--switch .ce-card__badge,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__badge { display: none; }
  html[data-ce-view="list"] .ce-sec--switch .ce-card__body,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__body { padding: 0; flex: 1; min-width: 0; }
  html[data-ce-view="list"] .ce-sec--switch .ce-card__title,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__title {
    font-size: calc(15.5px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  }
  html[data-ce-view="list"] .ce-sec--switch .ce-card__meta,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__meta { margin-top: 4px; font-size: 11px; }

  /* 動画アーカイブのカードもリスト表示に対応させる（2026-08-22 ユーザー要望）。
     .ce-card とは別のクラス構成なので同じ形を別に書く。
     サムネイルは 16:9 のまま小さくし、再生マークもそれに合わせて縮める */
  html[data-ce-view="list"] .ce-sec--switch .ce-vidlist__grid { display: block; }
  html[data-ce-view="list"] .ce-sec--switch .ce-vidcard {
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--ce-line);
  }
  html[data-ce-view="list"] .ce-sec--switch .ce-vidcard:hover { transform: none; box-shadow: none; }
  html[data-ce-view="list"] .ce-sec--switch .ce-vidcard .ce-vidcard__link {
    display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px;
  }
  html[data-ce-view="list"] .ce-sec--switch .ce-vidcard__thumb {
    width: 114px; flex: none; aspect-ratio: 16 / 9;
    border-radius: 8px; overflow: hidden;
  }
  html[data-ce-view="list"] .ce-sec--switch .ce-vidcard__play svg { width: 26px; height: 26px; }
  html[data-ce-view="list"] .ce-sec--switch .ce-vidcard__body { padding: 0; flex: 1; min-width: 0; }
  html[data-ce-view="list"] .ce-sec--switch .ce-vidcard .ce-vidcard__title {
    font-size: calc(15.5px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  }
  html[data-ce-view="list"] .ce-sec--switch .ce-vidcard .ce-vidcard__meta { margin-top: 4px; font-size: 11px; }

  /* リスト表示時の「あとで読む」ミニボタン: タイトルに重ならないよう
     行の右端に控えめに置き、本文側に余白を確保する */
  html[data-ce-view="list"] .ce-sec--switch .ce-card__link,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__link { padding-right: 36px; }
  /* あとで読むミニボタン: スマホのリスト系表示では右端の下寄り
     （日付行の右側）に置く。タイトルは全幅・右親指でも押しやすい位置 */
  html[data-ce-view="list"] .ce-sec--switch .ce-card__link,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__link { padding-right: 2px; }
  .ce-readlater.is-list .ce-card__link { padding-right: 2px; }
  .ce-row { position: relative; }
  html[data-ce-view="list"] .ce-sec--switch .ce-readlater-btn--mini,
  html[data-ce-view="list"] .ce-hero__feat .ce-readlater-btn--mini,
  .ce-readlater.is-list .ce-readlater-btn--mini,
  .ce-row .ce-readlater-btn--mini {
    position: absolute; right: 0; bottom: 9px; left: auto; top: auto; margin: 0; transform: none;
    width: 32px; height: 32px; justify-content: center;
    background: transparent; border: 0; box-shadow: none;
  }
  /* 日付行がボタンの下に潜らないよう右に逃げ幅を取る */
  html[data-ce-view="list"] .ce-sec--switch .ce-card__meta,
  html[data-ce-view="list"] .ce-hero__feat .ce-card__meta,
  .ce-readlater.is-list .ce-card__meta,
  .ce-row .ce-row__meta { padding-right: 36px; }
}

/* ---------- フッター ---------- */
.ce-footer__widgets { background: var(--ce-footer); color: rgba(255, 255, 255, 0.82); padding: 40px 0; }
.ce-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.ce-footer__title { color: #fff; font-size: 14px; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-bottom: 10px; position: relative; }
.ce-footer__title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 42px; height: 3px; background: var(--ce-primary); border-radius: 2px; }
.ce-footer__widgets p { font-size: calc(13px * var(--ce-scale)); line-height: 1.9; }
.ce-footer__copy { background: var(--ce-primary); color: #fff; font-size: 12.5px; }
.ce-footer__copy-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; min-height: 56px; }
.ce-footer__menu { display: flex; flex-wrap: wrap; gap: 2px 18px; list-style: none; margin: 0; padding: 0; }
.ce-footer__menu a { color: #fff; text-decoration: none; }
.ce-footer__menu a:hover { color: var(--ce-accent-soft); }

/* フッター: メニュー列（縦リスト） */
.ce-footer__nav { list-style: none; margin: 0; padding: 0; }
.ce-footer__nav a {
  display: block; padding: 7px 0; color: rgba(255, 255, 255, 0.82);
  text-decoration: none; font-size: calc(13px * var(--ce-scale));
}
.ce-footer__nav a:hover { color: #fff; }

/* フッター: SNSアイコン */
.ce-footer__title--sns { margin-top: 30px; }
.ce-footer__title--services { margin-top: 30px; }
.ce-footer__sns { display: flex; gap: 10px; margin-top: 14px; }
.ce-footer__sns a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
  transition: background-color 0.15s var(--ce-ease), border-color 0.15s var(--ce-ease);
}
.ce-footer__sns a:hover { background: var(--ce-primary); border-color: var(--ce-primary); }
.ce-footer__sns .ce-icon { width: 17px; height: 17px; }

/* フッター: 再エネ運営・CO2排出量表示 */
.ce-footer__eco {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 36px; padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px 32px;
}
.ce-footer__eco-text { min-width: 0; }
.ce-footer__eco p { margin: 4px 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.8; }
/* B Corp 認証バッジ（濃紺地なので白版を使う）: PCは右端、スマホは中央上 */
.ce-footer__bcorp { flex: none; margin: 0; }
.ce-footer__bcorp img { display: block; width: 78px; height: auto; margin: 0; }
@media (max-width: 780px) {
  /* スマホは左にバッジ、右に文章（DOM順は文章→バッジなので row-reverse） */
  .ce-footer__eco { flex-direction: row-reverse; align-items: center; gap: 16px; }
  .ce-footer__eco-text { flex: 1; }
  .ce-footer__bcorp img { width: 64px; }
}
.ce-footer__co2-value { font-weight: 700; color: rgba(255, 255, 255, 0.92); }

/* フッター: ニュースレター（MailChimp for WP）を濃紺地向けに調整 */
.ce-footer__widgets .mc4wp-form-fields p { margin: 0 0 10px; }
.ce-footer__widgets .mc4wp-form input[type="email"] {
  width: 100%; padding: 10px 14px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08);
  color: #fff; font-family: var(--ce-font); font-size: 14px;
}
.ce-footer__widgets .mc4wp-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.ce-footer__widgets .mc4wp-form input[type="email"]:focus { outline: none; border-color: var(--ce-primary); }
.ce-footer__widgets .mc4wp-form button[type="submit"] {
  background: var(--ce-primary); color: #fff; border: none; border-radius: 999px;
  padding: 9px 24px; font-weight: 700; font-family: var(--ce-font); font-size: 13px;
  cursor: pointer; transition: background-color 0.15s var(--ce-ease);
}
.ce-footer__widgets .mc4wp-form button[type="submit"]:hover { background: var(--ce-primary-dark); }
.ce-footer__widgets .mc4wp-response { font-size: 12.5px; }

/* ---------- レガシーショートコードの行リスト（[articles disp=sidebar] 等） ---------- */
.ce-sc-rows { margin: 8px 0 24px; }
.ce-article__content .ce-sc-rows .ce-row__title { font-weight: 700; }

/* ---------- SNSシェアボタン（記事ページ） ---------- */
.ce-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ce-share__label { font-size: 13px; font-weight: 700; color: var(--ce-text-soft); margin-right: 4px; }
.ce-share__btn {
  appearance: none; cursor: pointer; background: var(--ce-card);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--ce-line); color: var(--ce-ink);
  transition: background-color 0.15s var(--ce-ease), border-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
.ce-share__btn:hover { background: var(--ce-primary); border-color: var(--ce-primary); color: #fff; }
.ce-share__btn .ce-icon { width: 17px; height: 17px; }
.ce-share__done { font-size: 12.5px; color: var(--ce-primary); font-weight: 700; }

/* ---------- 記事下: 3カラムの新着・関連リスト ---------- */
.ce-postfoot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 900px) { .ce-postfoot { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- お問い合わせ等のフォーム（Contact Form 7） ---------- */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 input[type="url"], .wpcf7 textarea, .wpcf7 select {
  width: 100%; max-width: 100%; box-sizing: border-box;
  padding: 10px 14px; border: 1px solid var(--ce-line); border-radius: 10px;
  background: var(--ce-bg); color: var(--ce-text);
  font-family: var(--ce-font); font-size: 15px;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
  outline: none; border-color: var(--ce-primary);
}
.wpcf7 input[type="submit"] {
  background: var(--ce-primary); color: #fff; border: none; border-radius: 999px;
  padding: 12px 44px; font-weight: 700; font-family: var(--ce-font); font-size: 15px;
  cursor: pointer; transition: background-color 0.15s var(--ce-ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--ce-primary-dark); }
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ce-primary) 20%, transparent);
}

/* ---------- お問い合わせフォームのレイアウト（.ce-form）----------
   CF7側は table/center 組みをやめ、label と入力欄を紐づけた div 構成にしてある。 */
.ce-form { max-width: 720px; margin: 28px 0 0; }
.ce-form__row {
  display: grid; grid-template-columns: 12em 1fr; gap: 6px 24px;
  align-items: start; margin: 0 0 20px;
}
.ce-article__content .ce-form__label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 11px; margin: 0;
  font-size: calc(14px * var(--ce-scale)); font-weight: 700; color: var(--ce-ink); line-height: 1.5;
}
.ce-form__req, .ce-form__opt {
  flex: none; padding: 2px 7px; border-radius: 4px;
  font-size: calc(10.5px * var(--ce-scale)); font-weight: 800; letter-spacing: 0.02em;
}
.ce-form__req { background: var(--ce-primary); color: #fff; }
.ce-form__opt { background: var(--ce-bg); border: 1px solid var(--ce-line); color: var(--ce-text-soft); }
.ce-form__field { min-width: 0; }
/* CF7 の自動整形が入れる <p> の余白を打ち消す */
.ce-article__content .ce-form p { margin: 0; }
.ce-form__help {
  display: block; margin-top: 6px;
  font-size: calc(12.5px * var(--ce-scale)); line-height: 1.7; color: var(--ce-text-soft);
}
.ce-form__submit { margin: 28px 0 0; text-align: center; }
.ce-form__legal {
  margin: 16px 0 0; text-align: center;
  font-size: calc(12px * var(--ce-scale)); line-height: 1.8; color: var(--ce-text-soft);
}
.ce-form__legal a { color: var(--ce-primary); }
/* CF7 のエラー表示 */
.wpcf7-not-valid-tip {
  display: block; margin-top: 6px;
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 700; color: #c0392b;
}
.wpcf7 .wpcf7-not-valid { border-color: #c0392b; }
.wpcf7-response-output {
  margin: 20px 0 0 !important; padding: 14px 18px !important;
  border-width: 1px !important; border-radius: 10px;
  font-size: calc(13.5px * var(--ce-scale)); line-height: 1.8;
}
@media (max-width: 700px) {
  .ce-form__row { grid-template-columns: 1fr; gap: 4px; margin-bottom: 18px; }
  .ce-article__content .ce-form__label { padding-top: 0; }
  .ce-form__submit .wpcf7-submit { width: 100%; }
}
.ce-article__content table.form { width: 100%; }
.ce-article__content table.form th { text-align: left; vertical-align: top; padding: 14px 12px 14px 0; }
.ce-article__content table.form td { padding: 10px 0; }
/* スマホ: テーブルレイアウトを縦積みに（th width=30% の属性指定を打ち消す） */
@media (max-width: 600px) {
  .ce-article__content table.form,
  .ce-article__content table.form tbody,
  .ce-article__content table.form tr,
  .ce-article__content table.form th,
  .ce-article__content table.form td {
    display: block; width: 100% !important; padding: 0;
  }
  .ce-article__content table.form th { margin-top: 16px; }
  .ce-article__content table.form th p,
  .ce-article__content table.form td p { margin: 4px 0; }
}

/* ---------- 注記ボックス（会員ページ等の補足文） ---------- */
.ce-note {
  max-width: 680px; margin: 20px auto 0;
  background: var(--ce-accent-soft); border-radius: 12px;
  padding: 16px 20px;
  font-size: calc(13px * var(--ce-scale)); line-height: 1.9; color: var(--ce-text);
}
.ce-note a { color: var(--ce-primary); }

/* ==========================================================================
   イベント告知バー（トップページ・グローバルナビ直下）
   最新のイベント記事1本をテキストのみ1行で見せる。
   本文と同じ背景色にとどめ、下の境界線と広めの余白で区切りを示す
   ========================================================================== */
.ce-eventbar {
  background: var(--ce-bg);
  border-bottom: 1px solid var(--ce-line);
}
/* グローバルナビに接するように ce-main の上パディングを打ち消す */
.ce-main > .ce-eventbar:first-child { margin: -26px 0 26px; }
.ce-eventbar__inner {
  display: flex; align-items: center; gap: 12px;
  padding-top: 20px; padding-bottom: 20px;
  font-size: calc(13.5px * var(--ce-scale));
}
.ce-eventbar__label {
  flex: none; padding: 3px 10px; border-radius: 999px;
  background: var(--ce-accent-soft); color: var(--ce-primary-dark);
  font-size: calc(11px * var(--ce-scale)); font-weight: 800; letter-spacing: 0.04em;
}
.ce-eventbar__link {
  flex: 1; min-width: 0;
  color: var(--ce-text); text-decoration: none; font-weight: 600; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) {
  .ce-eventbar__link:hover { color: var(--ce-primary-dark); text-decoration: underline; }
}
.ce-eventbar__date { flex: none; color: var(--ce-text-soft); font-size: calc(12px * var(--ce-scale)); }
@media (max-width: 600px) {
  .ce-eventbar__inner { gap: 9px; padding-top: 16px; padding-bottom: 16px; }
  .ce-eventbar__date { display: none; }
}

/* ==========================================================================
   テーマから記事を探す（トップページ・inc/topics.php）
   注目キーワードと業界・分野の2カラム
   ========================================================================== */
.ce-topics {
  margin-top: 52px; padding: 26px 28px 24px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-topics__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; align-items: start; }
.ce-topicgroup { min-width: 0; }
.ce-topics__title {
  margin: 0 0 16px; font-size: calc(17px * var(--ce-scale)); line-height: 1.5; color: var(--ce-ink);
}
.ce-topicgroup__label {
  margin: 0 0 9px; font-size: calc(12.5px * var(--ce-scale)); font-weight: 800;
  letter-spacing: 0.04em; color: var(--ce-primary);
}
.ce-topicchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ce-topicchips li { margin: 0; }
.ce-topicchips a {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: var(--ce-bg); border: 1px solid var(--ce-line);
  color: var(--ce-ink); text-decoration: none;
  font-size: calc(13px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  transition: background-color 0.15s var(--ce-ease), border-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-topicchips a:hover {
    background: var(--ce-accent-soft); border-color: var(--ce-primary); color: var(--ce-primary-dark);
  }
}
@media (max-width: 780px) {
  .ce-topics__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ce-topics { margin-top: 40px; padding: 20px 18px 18px; }
  .ce-topics__title { font-size: calc(15.5px * var(--ce-scale)); }
}

/* ---------- Slack コミュニティへの参加ボタン（ログイン後） ---------- */
.ce-slackcta { margin: 28px 0 0; text-align: center; }
.ce-article__content p.ce-slackcta__btn { max-width: none; margin: 0; text-align: center; }
.ce-article__content .ce-slackbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 30px; border-radius: 999px;
  background: var(--ce-primary); color: #fff; text-decoration: none;
  font-size: calc(14.5px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  transition: background-color 0.15s var(--ce-ease);
}
.ce-article__content .ce-slackbtn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@media (hover: hover) {
  .ce-article__content .ce-slackbtn:hover { background: var(--ce-primary-dark); color: #fff; }
}
@media (max-width: 600px) {
  .ce-article__content .ce-slackbtn { width: 100%; padding: 14px 18px; }
}

/* ---------- トップへ戻るボタン ---------- */
.ce-totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ce-primary); color: #fff; border: none;
  box-shadow: var(--ce-shadow-hover); cursor: pointer;
  opacity: 0.92; transition: opacity 0.15s var(--ce-ease), background-color 0.15s var(--ce-ease);
}
.ce-totop:hover { opacity: 1; background: var(--ce-primary-dark); }
.ce-totop .ce-icon { width: 19px; height: 19px; }
.ce-totop[hidden] { display: none; }

/* ---------- アクセシビリティ・モーション ---------- */
:focus-visible { outline: 2.5px solid var(--ce-primary); outline-offset: 2px; }
::selection { background: var(--ce-accent-soft); color: var(--ce-ink); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- モバイル（M1で本実装。最低限のみ） ---------- */
@media (max-width: 600px) {
  .ce-topbar__menu { display: none; }
  .ce-nav__menu { flex-wrap: wrap; }
}

/* ==========================================================================
   会員登録LP（/membership-join/ = [cehub_join_lp]）
   記事本文用スタイル（.ce-article__content h2 の左青線・p の余白など）が
   波及しないよう、LP内は .ce-lp スコープで打ち消してから組み立てる。
   ========================================================================== */
/* ページの白カード枠を外して全幅セクション構成に */
.ce-article--page:has(.ce-lp) {
  max-width: none; width: 100vw; margin-left: calc(50% - 50vw);
  padding: 0; background: transparent; border: 0; border-radius: 0;
}
.ce-main:has(.ce-lp) { padding: 0; }
/* グローバルナビ直下の隙間（本文の margin-top）を消してヒーローを密着させる */
.ce-main:has(.ce-lp) .ce-article__content { margin-top: 0; }
.ce-article__content p:has(> .ce-lp),
.ce-main:has(.ce-lp) .ce-article__content > p:empty { margin: 0; }

/* --- 本文スタイルの打ち消し（同詳細度・後勝ち） --- */
.ce-lp h2, .ce-lp h3 { border-left: 0; padding-left: 0; margin: 0; }
.ce-lp p { margin: 0; font-size: calc(14px * var(--ce-scale)); line-height: 1.9; }
.ce-lp ul, .ce-lp ol { margin: 0; }
.ce-lp blockquote {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0; color: inherit;
}
.ce-lp img { border-radius: 0; }
.ce-lp a { color: var(--ce-primary); }

.ce-lp { line-height: 1.9; }
.ce-lp .ce-lp__inner { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.ce-lp .ce-lp__inner--narrow { max-width: 820px; }

/* --- ヒーロー --- */
.ce-lp .ce-lp__hero {
  background: linear-gradient(135deg, var(--ce-primary-dark) 0%, var(--ce-primary) 55%, #21a2dd 100%);
  color: #fff; text-align: center; padding: 66px 0 62px;
}
.ce-lp .ce-lp__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; opacity: 0.85; }
.ce-lp .ce-lp__title {
  margin: 0; color: #fff; font-weight: 800; line-height: 1.5;
  font-size: calc(31px * var(--ce-scale));
}
/* 見出しの改行を文節単位に固定する。span を inline-block にすると
   その内側では折り返さないため、狭い画面でも「深め、」が分断されない。
   句読点が行頭に来ないよう line-break も厳密にしておく。 */
.ce-lp .ce-lp__title span { display: inline-block; line-break: strict; }
.ce-lp .ce-lp__lead {
  margin: 20px auto 0; max-width: 760px;
  font-size: calc(15px * var(--ce-scale)); line-height: 1.9; opacity: 0.94;
}
.ce-lp .ce-lp__cta { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ce-lp .ce-lp__btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 15px 32px; border: 2px solid transparent; border-radius: 14px; text-decoration: none;
  background: #fff; color: var(--ce-primary-dark); font-weight: 800;
  font-size: calc(15.5px * var(--ce-scale)); line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 40, 60, 0.25);
  transition: transform 0.15s var(--ce-ease), box-shadow 0.15s var(--ce-ease), background-color 0.15s var(--ce-ease);
}
.ce-lp .ce-lp__btn span { font-size: 11.5px; font-weight: 600; opacity: 0.72; }
@media (hover: hover) {
  .ce-lp .ce-lp__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 40, 60, 0.32); }
}
/* 主CTA（コミュニティ会員）: 青背景の上で最も目立つ白ベタ＋濃紺文字 */
.ce-lp .ce-lp__btn--primary {
  background: #fff; color: var(--ce-footer);
  padding: 17px 38px; font-size: calc(16.5px * var(--ce-scale));
  box-shadow: 0 10px 26px rgba(0, 28, 45, 0.38);
}
.ce-lp .ce-lp__btn--primary span { color: var(--ce-primary-dark); opacity: 0.85; }
/* 副CTA（読者会員）: 白フチのアウトライン */
.ce-lp .ce-lp__btn--outline {
  background: rgba(255, 255, 255, 0.1); color: #fff;
  border-color: rgba(255, 255, 255, 0.85); box-shadow: none;
}
.ce-lp .ce-lp__btn--outline span { opacity: 0.85; }
@media (hover: hover) {
  .ce-lp .ce-lp__btn--outline:hover { background: rgba(255, 255, 255, 0.2); box-shadow: none; }
}
.ce-lp .ce-lp__btn--ghost {
  background: transparent; color: var(--ce-primary); border: 2px solid var(--ce-primary);
  box-shadow: none; font-size: calc(14px * var(--ce-scale)); padding: 10px 24px;
}
.ce-lp .ce-lp__note { margin: 30px 0 0; font-size: 12.5px; opacity: 0.88; }
.ce-lp .ce-lp__note a { color: inherit; }

/* --- セクション共通（見出しは中央＋下線アクセント） --- */
.ce-lp .ce-lp__sec { padding: 62px 0; background: var(--ce-bg); }
.ce-lp .ce-lp__sec--alt { background: var(--ce-card); }
.ce-lp .ce-lp__h {
  margin: 0 auto 14px; text-align: center;
  font-size: calc(24px * var(--ce-scale)); font-weight: 800; line-height: 1.5;
  border-left: 0; padding-left: 0;
}
.ce-lp .ce-lp__h::after {
  content: ""; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: var(--ce-primary); margin: 16px auto 0;
}
.ce-lp .ce-lp__sub {
  margin: 0 auto 30px; max-width: 760px; text-align: center;
  color: var(--ce-text-soft); font-size: calc(14px * var(--ce-scale));
}
.ce-lp .ce-lp__h + .ce-lp__grid,
.ce-lp .ce-lp__h + .ce-lp__plans,
.ce-lp .ce-lp__h + .ce-lp__collabs,
.ce-lp .ce-lp__h + .ce-lp__tools,
.ce-lp .ce-lp__h + .ce-lp__faq { margin-top: 30px; }

/* --- カードグリッド --- */
.ce-lp .ce-lp__grid { display: grid; gap: 18px; }
.ce-lp .ce-lp__grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ce-lp .ce-lp__grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ce-lp .ce-lp__card {
  position: relative; background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); box-shadow: var(--ce-shadow); padding: 24px 26px;
}
.ce-lp .ce-lp__sec--alt .ce-lp__card { background: var(--ce-bg); box-shadow: none; }
.ce-lp .ce-lp__card h3 { margin: 0 0 10px; font-size: calc(16.5px * var(--ce-scale)); line-height: 1.55; }
.ce-lp .ce-lp__card p { margin: 0 0 0.7em; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.9; color: var(--ce-text-soft); }
.ce-lp .ce-lp__card p:last-child { margin-bottom: 0; }
.ce-lp .ce-lp__badge {
  display: inline-block; vertical-align: 3px; background: #e8503a; color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.7;
  padding: 1px 10px; border-radius: 999px;
}
.ce-lp .ce-lp__card--new { border-color: color-mix(in srgb, #e8503a 45%, var(--ce-line)); }
.ce-lp .ce-lp__card--new .ce-lp__badge { position: absolute; top: -11px; left: 22px; }

/* --- Circular Tool Box 紹介 --- */
.ce-lp .ce-lp__tools-cap {
  max-width: 880px; margin: 0 auto 12px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--ce-text-soft);
}
/* ツールは1段の横スクロール。ツールが増えても縦に伸びない（2026-08-22 ユーザー要望）。
   PCは左右の送りボタン、スマホはスワイプで動かす */
.ce-lp .ce-lp__toolsrail {
  position: relative; max-width: 880px; margin: 0 auto;
}
.ce-lp .ce-lp__tools {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* カードの浮き上がり（hoverでtranslateY）が切れないよう上下に余白を持たせる */
  padding: 4px 2px 14px;
  scroll-padding-left: 2px;
}
.ce-lp .ce-lp__tools::-webkit-scrollbar { height: 6px; }
.ce-lp .ce-lp__tools::-webkit-scrollbar-thumb {
  background: var(--ce-line); border-radius: 999px;
}
/* 幅は「3枚＋次の1枚が少し覗く」ように決めている（880pxのレールで262px×3＋gap）。
   完全に3枚ぴったりだと、まだ続きがあることが伝わらない */
.ce-lp .ce-lp__tool {
  flex: 0 0 262px; scroll-snap-align: start;
}
@media (max-width: 600px) {
  .ce-lp .ce-lp__tool { flex-basis: 78vw; }
}
/* 送りボタン。スクロールの余地がないときは PHP 側で hidden にする */
.ce-lp .ce-lp__toolsnav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  appearance: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-card);
  box-shadow: var(--ce-shadow);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.ce-lp .ce-lp__toolsnav[hidden] { display: none; }
.ce-lp .ce-lp__toolsnav svg { width: 22px; height: 22px; fill: var(--ce-ink); }
.ce-lp .ce-lp__toolsnav--prev { left: -18px; }
.ce-lp .ce-lp__toolsnav--next { right: -18px; }
@media (hover: hover) {
  .ce-lp .ce-lp__toolsnav:hover { border-color: var(--ce-primary); }
  .ce-lp .ce-lp__toolsnav:hover svg { fill: var(--ce-primary); }
}
/* 画面が狭いと外側に置けないので内側に寄せる */
@media (max-width: 960px) {
  .ce-lp .ce-lp__toolsnav--prev { left: 2px; }
  .ce-lp .ce-lp__toolsnav--next { right: 2px; }
}
/* タッチ主体の環境ではスワイプで足りるのでボタンは出さない */
@media (hover: none) {
  .ce-lp .ce-lp__toolsnav { display: none !important; }
}
.ce-lp .ce-lp__tool {
  display: block; background: var(--ce-bg); border: 1px solid var(--ce-line);
  /* flex アイテムとして幅を固定するのは上の .ce-lp__tool ルール側 */
  border-radius: var(--ce-radius); overflow: hidden;
  text-decoration: none; color: var(--ce-text);
  transition: transform 0.15s var(--ce-ease), box-shadow 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-lp .ce-lp__tool:hover { transform: translateY(-3px); box-shadow: var(--ce-shadow-hover); }
  .ce-lp .ce-lp__tool:hover .ce-lp__tool-name { color: var(--ce-primary); }
}
.ce-lp .ce-lp__tool img { display: block; width: 100%; aspect-ratio: 420 / 265; object-fit: cover; border-radius: 0; }
.ce-lp .ce-lp__tool-name {
  display: block; padding: 16px 20px 3px; color: var(--ce-ink);
  font-weight: 800; font-size: calc(15.5px * var(--ce-scale)); line-height: 1.5;
}
.ce-lp .ce-lp__tool-desc { display: block; padding: 0 20px 18px; font-size: calc(12.5px * var(--ce-scale)); color: var(--ce-text-soft); }

/* --- 料金プラン --- */
.ce-lp .ce-lp__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.ce-lp .ce-lp__plan {
  position: relative; background: var(--ce-bg); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); padding: 28px 24px; display: flex; flex-direction: column;
}
.ce-lp .ce-lp__sec:not(.ce-lp__sec--alt) .ce-lp__plan { background: var(--ce-card); }
.ce-lp .ce-lp__plan--featured { border: 2px solid var(--ce-primary); box-shadow: var(--ce-shadow-hover); }
.ce-lp .ce-lp__plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--ce-primary); color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 3px 16px; border-radius: 999px; letter-spacing: 0.06em; white-space: nowrap;
}
.ce-lp .ce-lp__plan h3 { margin: 0; font-size: calc(16px * var(--ce-scale)); text-align: center; }
.ce-lp .ce-lp__price {
  margin: 10px 0 16px; text-align: center; color: var(--ce-ink);
  font-size: calc(36px * var(--ce-scale)); font-weight: 800; line-height: 1.15;
}
.ce-lp .ce-lp__price small { display: block; font-size: 12px; font-weight: 600; color: var(--ce-text-soft); margin-top: 6px; line-height: 1.6; }
.ce-lp .ce-lp__plan ul { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.ce-lp .ce-lp__plan li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: calc(13.5px * var(--ce-scale)); line-height: 1.7; padding: 6px 0;
}
.ce-lp .ce-lp__plan li .ce-icon { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: var(--ce-primary); }
.ce-lp .ce-lp__paybtn { text-align: center; margin-top: auto; }
/* SWPM/Stripe 既定ボタン（.stripe-button-el＋内側spanのグラデーション）を
   打ち消してLPのボタン意匠に統一する。外部CSSのため !important で上書き */
.ce-lp .ce-lp__paybtn .swpm-payment-button,
.ce-lp .ce-lp__paybtn .swpm-button-wrapper,
.ce-lp .ce-lp__paybtn form { display: block; margin: 0; padding: 0; }
.ce-lp .ce-lp__paybtn input[type="submit"],
.ce-lp .ce-lp__paybtn button,
.ce-lp .ce-lp__paybtn a {
  appearance: none !important; cursor: pointer; display: inline-block;
  width: 100%; max-width: 300px;
  background: var(--ce-primary) !important; background-image: none !important;
  color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font: inherit !important; font-weight: 800 !important;
  font-size: calc(14.5px * var(--ce-scale)) !important;
  padding: 14px 26px !important; text-decoration: none; line-height: 1.45 !important;
  height: auto !important; min-height: 0 !important; white-space: normal !important;
  box-shadow: none !important; text-shadow: none !important;
  transition: background-color 0.15s var(--ce-ease), transform 0.15s var(--ce-ease);
}
.ce-lp .ce-lp__paybtn button span,
.ce-lp .ce-lp__paybtn a span {
  display: inline !important; background: none !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  text-shadow: none !important; color: inherit !important; font: inherit !important;
  padding: 0 !important; height: auto !important; min-height: 0 !important; line-height: inherit !important;
}
@media (hover: hover) {
  .ce-lp .ce-lp__paybtn input[type="submit"]:hover,
  .ce-lp .ce-lp__paybtn button:hover,
  .ce-lp .ce-lp__paybtn a:hover { background: var(--ce-primary-dark) !important; transform: translateY(-1px); }
}
.ce-lp .ce-lp__plan--featured .ce-lp__paybtn input[type="submit"],
.ce-lp .ce-lp__plan--featured .ce-lp__paybtn button,
.ce-lp .ce-lp__plan--featured .ce-lp__paybtn a { background: var(--ce-footer) !important; }
@media (hover: hover) {
  .ce-lp .ce-lp__plan--featured .ce-lp__paybtn button:hover,
  .ce-lp .ce-lp__plan--featured .ce-lp__paybtn a:hover { background: #0c1a21 !important; }
}
.ce-lp .ce-lp__caution { margin: 20px 0 0; font-size: 12px; color: var(--ce-text-soft); text-align: center; line-height: 1.8; }

/* --- プラン比較表（常時表示） --- */
.ce-lp .ce-lp__compare { margin-top: 40px; }
.ce-lp .ce-lp__compare-h {
  margin: 0 0 16px; text-align: center;
  font-size: calc(17px * var(--ce-scale)); font-weight: 800;
}
.ce-lp .ce-lp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ce-lp .ce-lp__scroll-hint { display: none; text-align: center; font-size: 11.5px; color: var(--ce-text-soft); margin: 0 0 8px; }
.ce-lp .ce-lp__table {
  width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 0;
  background: var(--ce-card); font-size: calc(13.5px * var(--ce-scale));
  border: 1px solid var(--ce-line); border-radius: 12px; overflow: hidden;
}
.ce-lp .ce-lp__table th,
.ce-lp .ce-lp__table td {
  border-bottom: 1px solid var(--ce-line); padding: 13px 14px;
  text-align: center; vertical-align: middle;
}
.ce-lp .ce-lp__table tbody tr:last-child th,
.ce-lp .ce-lp__table tbody tr:last-child td { border-bottom: 0; }
/* 見出し行 */
.ce-lp .ce-lp__table thead th {
  background: var(--ce-bg); font-weight: 800; line-height: 1.5;
  font-size: calc(13.5px * var(--ce-scale)); white-space: nowrap;
}
.ce-lp .ce-lp__table thead th small {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600;
  color: var(--ce-text-soft);
}
/* 左端の項目名（横スクロール時も固定） */
.ce-lp .ce-lp__table .ce-lp__table-lead {
  position: sticky; left: 0; z-index: 1;
  text-align: left; font-weight: 700; background: var(--ce-card);
  border-right: 1px solid var(--ce-line); min-width: 260px;
}
.ce-lp .ce-lp__table thead .ce-lp__table-lead { background: var(--ce-bg); }
.ce-lp .ce-lp__table tbody tr:nth-child(even) th,
.ce-lp .ce-lp__table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ce-bg) 55%, var(--ce-card)); }
/* コミュニティ会員列を強調 */
.ce-lp .ce-lp__table .is-featured { background: var(--ce-accent-soft) !important; }
.ce-lp .ce-lp__table thead .is-featured { color: var(--ce-primary-dark); box-shadow: inset 0 3px 0 var(--ce-primary); }
/* 記号 */
.ce-lp .ce-lp__yes { display: inline-flex; }
.ce-lp .ce-lp__yes .ce-icon { width: 19px; height: 19px; fill: var(--ce-primary); }
.ce-lp .ce-lp__no { color: color-mix(in srgb, var(--ce-text-soft) 55%, transparent); font-weight: 700; }
.ce-lp .ce-lp__val { font-weight: 700; font-size: calc(12.5px * var(--ce-scale)); color: var(--ce-ink); }
.ce-lp .ce-lp__table .ce-lp__badge { margin-left: 8px; vertical-align: 1px; }
.ce-lp .ce-lp__compare .ce-lp__caution { margin-top: 14px; }

/* --- 法人 --- */
.ce-lp .ce-lp__corp {
  margin-top: 34px; background: var(--ce-bg); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); padding: 26px 30px;
}
.ce-lp .ce-lp__sec--alt .ce-lp__corp { background: var(--ce-card); }
.ce-lp .ce-lp__corp h3 { margin: 0 0 10px; font-size: calc(16px * var(--ce-scale)); }
.ce-lp .ce-lp__corp p { margin: 0 0 14px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.9; }
.ce-lp .ce-lp__corp p:last-child { margin: 0; }

/* --- コラボ事例 --- */
.ce-lp .ce-lp__collabs { display: grid; gap: 20px; }
.ce-lp .ce-lp__collab {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); box-shadow: var(--ce-shadow); padding: 24px 26px;
}
.ce-lp .ce-lp__sec--alt .ce-lp__collab { background: var(--ce-bg); box-shadow: none; }
.ce-lp .ce-lp__collab img { flex: 0 0 152px; width: 152px; height: 152px; object-fit: cover; border-radius: 12px; }
.ce-lp .ce-lp__collab h3 { margin: 0 0 3px; font-size: calc(16px * var(--ce-scale)); line-height: 1.55; }
.ce-lp .ce-lp__collab-tag { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--ce-primary); }
.ce-lp .ce-lp__collab p { margin: 0; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.9; color: var(--ce-text-soft); }

/* --- 会員の声 --- */
.ce-lp .ce-lp__quote {
  margin: 0; background: var(--ce-bg); border: 1px solid var(--ce-line);
  border-radius: 22px 22px 4px 22px; padding: 24px 26px;
}
.ce-lp .ce-lp__sec--alt .ce-lp__quote { background: var(--ce-accent-soft); border-color: transparent; }
.ce-lp .ce-lp__quote p {
  margin: 0 0 12px; font-weight: 700; color: var(--ce-ink);
  font-size: calc(14.5px * var(--ce-scale)); line-height: 1.85;
}
.ce-lp .ce-lp__quote cite {
  display: block; font-style: normal; font-size: 12px; color: var(--ce-text-soft);
  border-top: 1px dotted color-mix(in srgb, var(--ce-ink) 22%, transparent);
  padding-top: 9px; text-align: right;
}

/* --- 申込みの流れ --- */
.ce-lp .ce-lp__card--flow { display: flex; flex-direction: column; }
.ce-lp .ce-lp__flow-tag {
  display: inline-block; align-self: flex-start; margin: 0 0 10px;
  background: var(--ce-accent-soft); color: var(--ce-primary-dark);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 12px; border-radius: 999px;
}
.ce-lp .ce-lp__card--flow > p:last-child { margin-top: auto; padding-top: 6px; }
.ce-lp .ce-lp__after { margin-top: 18px; }
.ce-lp .ce-lp__after h3 { margin-bottom: 10px; }
/* --- 申込みステップ --- */
.ce-lp .ce-lp__steps { margin: 0 0 14px; padding-left: 1.35em; }
.ce-lp .ce-lp__steps li { padding: 4px 0; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.85; }

/* --- FAQ --- */
.ce-lp .ce-lp__faq {
  background: var(--ce-bg); border: 1px solid var(--ce-line); border-radius: 12px;
  padding: 0 22px; margin-bottom: 10px;
}
.ce-lp .ce-lp__sec--alt .ce-lp__faq { background: var(--ce-card); }
.ce-lp .ce-lp__faq summary {
  cursor: pointer; font-weight: 700; padding: 15px 0;
  font-size: calc(14.5px * var(--ce-scale)); line-height: 1.6;
}
.ce-lp .ce-lp__faq p { margin: 0; padding: 0 0 18px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.9; color: var(--ce-text-soft); }

/* --- 最終CTA --- */
.ce-lp .ce-lp__hero--last { padding: 58px 0 66px; }
.ce-lp .ce-lp__plans--cta { max-width: 640px; margin: 32px auto 0; text-align: left; }
.ce-lp .ce-lp__hero--last .ce-lp__plan { background: #fff; border-color: transparent; }
.ce-lp .ce-lp__hero--last .ce-lp__note { margin-top: 24px; }
.ce-lp .ce-lp__hero--last .ce-lp__note a { text-decoration: underline; }

@media (max-width: 600px) {
  .ce-lp .ce-lp__hero { padding: 46px 0 44px; }
  .ce-lp .ce-lp__title { font-size: calc(22px * var(--ce-scale)); }
  .ce-lp .ce-lp__sec { padding: 44px 0; }
  .ce-lp .ce-lp__h { font-size: calc(19.5px * var(--ce-scale)); }
  .ce-lp .ce-lp__h::after { margin-top: 12px; }
  .ce-lp .ce-lp__btn { width: 100%; }
  .ce-lp .ce-lp__collab { flex-direction: column; gap: 16px; }
  .ce-lp .ce-lp__collab img { width: 100%; height: auto; aspect-ratio: 16 / 9; flex: none; }
  .ce-lp .ce-lp__table { min-width: 580px; font-size: calc(12.5px * var(--ce-scale)); }
  .ce-lp .ce-lp__table th, .ce-lp .ce-lp__table td { padding: 11px 10px; }
  .ce-lp .ce-lp__table .ce-lp__table-lead { min-width: 168px; }
  .ce-lp .ce-lp__scroll-hint { display: block; }
}

/* --- 会員登録LP 追加分（2026-08-15 LPO改善 A1/A3/A5・B1/B2/B3） --- */
/* B1: プランの用途ガイド */
.ce-lp .ce-lp__plan-for {
  margin: 6px 0 0; text-align: center; color: var(--ce-primary-dark);
  font-size: calc(12px * var(--ce-scale)); font-weight: 700; line-height: 1.6;
}
html[data-ce-theme="dark"] .ce-lp .ce-lp__plan-for { color: var(--ce-primary-soft); }

/* A4: 比較表セル内の補足（ニュースレター価格など） */
.ce-lp .ce-lp__val small {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600;
  color: var(--ce-text-soft); line-height: 1.5;
}

/* B2: スマホはプラン別カード、PCは表 */
.ce-lp .ce-lp__ccards { display: none; }
.ce-lp .ce-lp__ccard {
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: 12px; overflow: hidden; margin-bottom: 12px;
}
.ce-lp .ce-lp__sec--alt .ce-lp__ccard { background: var(--ce-bg); }
.ce-lp .ce-lp__ccard h4 {
  margin: 0; padding: 12px 16px; background: var(--ce-accent-soft);
  font-size: calc(14.5px * var(--ce-scale)); line-height: 1.5;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.ce-lp .ce-lp__ccard h4 span { font-size: 12px; font-weight: 600; color: var(--ce-primary-dark); white-space: nowrap; }
.ce-lp .ce-lp__ccard dl { margin: 0; }
.ce-lp .ce-lp__ccard dl > div {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 10px 16px; border-top: 1px solid var(--ce-line);
}
.ce-lp .ce-lp__ccard dt { font-size: calc(12.5px * var(--ce-scale)); line-height: 1.6; }
.ce-lp .ce-lp__ccard dd { margin: 0; flex: none; text-align: right; }

/* A3: ニュースレター登録ブロック */
.ce-lp .ce-lp__nl {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 32px; align-items: center;
  margin-top: 34px; padding: 26px 30px;
  background: var(--ce-accent-soft); border-radius: var(--ce-radius);
}
.ce-lp .ce-lp__nl h3 { margin: 0 0 8px; font-size: calc(17px * var(--ce-scale)); }
.ce-lp .ce-lp__nl p { margin: 0; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.85; }
.ce-lp .ce-lp__nl-form form { margin: 0; }
.ce-lp .ce-lp__nl-form p { margin: 0 0 8px; }
.ce-lp .ce-lp__nl-form input[type="email"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--ce-line);
  border-radius: 10px; background: var(--ce-card); color: var(--ce-text); font: inherit;
  font-size: calc(14px * var(--ce-scale));
}
.ce-lp .ce-lp__nl-form button {
  width: 100%; appearance: none; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--ce-primary); color: #fff; font: inherit; font-weight: 800;
  font-size: calc(14px * var(--ce-scale)); padding: 12px 24px;
}
.ce-lp .ce-lp__nl-form button:hover { background: var(--ce-primary-dark); }

/* B3: 法人会員の申込みフォーム（/corporate-application/・LPに依存しない独立ブロック） */
.ce-corpform {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin: 26px 0 18px;
}
.ce-corpform__field--wide { grid-column: 1 / -1; }
.ce-corpform label {
  display: block; margin-bottom: 6px;
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 700; line-height: 1.6;
}
.ce-corpform label span {
  margin-left: 6px; font-size: 10.5px; font-weight: 700; color: #c0392b;
  background: rgba(192, 57, 43, 0.1); padding: 1px 7px; border-radius: 999px;
}
.ce-corpform input,
.ce-corpform select,
.ce-corpform textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--ce-line); border-radius: 10px;
  background: var(--ce-card); color: var(--ce-text); font: inherit;
  font-size: calc(14px * var(--ce-scale));
}
.ce-corpform input:focus,
.ce-corpform select:focus,
.ce-corpform textarea:focus { outline: 2px solid var(--ce-primary); outline-offset: 1px; }
.ce-corpform__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.ce-corpform__submit { text-align: center; }
.ce-corpform__submit button {
  appearance: none; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--ce-primary); color: #fff; font: inherit; font-weight: 800;
  font-size: calc(14.5px * var(--ce-scale)); padding: 14px 34px;
  transition: background-color 0.15s var(--ce-ease);
}
.ce-corpform__submit button:hover:not(:disabled) { background: var(--ce-primary-dark); }
.ce-corpform__submit button:disabled { opacity: 0.6; cursor: default; }
.ce-corpform .ce-corpform__msg {
  margin: 14px 0 0; font-size: calc(13.5px * var(--ce-scale));
  font-weight: 700; color: var(--ce-primary-dark);
}
.ce-corpform .ce-corpform__msg.is-error { color: #c0392b; }
@media (max-width: 600px) {
  .ce-corpform { grid-template-columns: 1fr; }
}

/* A5: 申込みステップ内の補足 */
.ce-lp .ce-lp__step-note {
  display: block; margin-top: 4px; font-size: calc(12px * var(--ce-scale));
  line-height: 1.75; color: var(--ce-text-soft);
}

/* A1: スマホの追従CTA */
.ce-lp .ce-lp__sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ce-card) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ce-line);
  transform: translateY(110%); transition: transform 0.22s var(--ce-ease);
  display: none;
}
.ce-lp .ce-lp__sticky.is-visible { transform: translateY(0); }
.ce-lp .ce-lp__sticky-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
  background: var(--ce-primary); color: #fff; font-weight: 800;
  font-size: calc(15px * var(--ce-scale)); line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 40, 60, 0.22);
}
.ce-lp .ce-lp__sticky-btn span { font-size: 11px; font-weight: 600; opacity: 0.85; }
@media (max-width: 900px) {
  .ce-lp .ce-lp__sticky { display: block; }
  html.ce-has-sticky-cta .ce-totop { bottom: 106px; }
}
@media (prefers-reduced-motion: reduce) {
  .ce-lp .ce-lp__sticky { transition: none; }
}

@media (max-width: 600px) {
  /* B2: 表を隠してプラン別カードに切り替え */
  .ce-lp .ce-lp__scroll, .ce-lp .ce-lp__scroll-hint { display: none; }
  .ce-lp .ce-lp__ccards { display: block; }
  /* A3 / B3 は1カラムに */
  .ce-lp .ce-lp__nl { grid-template-columns: 1fr; padding: 22px 20px; }
  .ce-lp .ce-lp__corp { padding: 22px 18px; }
}

/* C3: ヒーロー直下のページ内アンカー */
.ce-lp .ce-lp__anchors {
  display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; margin-top: 26px;
}
.ce-lp .ce-lp__anchors a {
  color: #fff; text-decoration: none; font-size: calc(12.5px * var(--ce-scale)); font-weight: 700;
  padding: 6px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-lp .ce-lp__anchors a:hover { background: rgba(255, 255, 255, 0.22); }
}
/* アンカー移動時に見出しが隠れないよう余白を確保 */
.ce-lp [id^="ce-lp-"] { scroll-margin-top: 16px; }

/* C6: ツールページ下部の会員案内 */
.ce-membercta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px;
  flex-wrap: wrap; margin: 34px auto 0; max-width: 1180px;
  background: var(--ce-accent-soft); border-radius: var(--ce-radius); padding: 24px 30px;
}
.ce-membercta h3 { margin: 0 0 6px; font-size: calc(17px * var(--ce-scale)); }
.ce-membercta p { margin: 0; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.85; max-width: 62ch; }
/* .ce-article__content a（本文リンク色）に負けないよう詳細度を上げる */
.ce-membercta .ce-membercta__btn {
  flex: none; background: var(--ce-primary); color: #fff; text-decoration: none;
  font-weight: 800; font-size: calc(14.5px * var(--ce-scale));
  padding: 13px 28px; border-radius: 999px; white-space: nowrap;
  transition: background-color 0.15s var(--ce-ease);
}
.ce-membercta .ce-membercta__btn:hover { background: var(--ce-primary-dark); }
@media (max-width: 600px) {
  .ce-membercta { padding: 20px; }
  .ce-membercta .ce-membercta__btn { width: 100%; text-align: center; }
}

/* B4: 月額／年額の切替
   （表ヘッダの small など詳細度の高い既存ルールに勝つ必要があるため !important） */
.ce-lp [data-ce-billing="annual"] { display: none !important; }
.ce-lp.is-annual [data-ce-billing="annual"] { display: block !important; }
.ce-lp.is-annual [data-ce-billing="monthly"] { display: none !important; }
.ce-lp .ce-lp__billing-wrap { text-align: center; margin: 0 0 30px; }
.ce-lp .ce-lp__billing-label {
  margin: 0 0 10px; font-size: calc(12.5px * var(--ce-scale));
  font-weight: 700; color: var(--ce-text-soft); letter-spacing: 0.02em;
}
.ce-lp .ce-lp__billing {
  display: inline-flex; gap: 4px; margin: 0; padding: 5px;
  background: var(--ce-bg); border: 2px solid var(--ce-line); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(20, 40, 50, 0.08);
}
.ce-lp .ce-lp__sec--alt .ce-lp__billing { background: var(--ce-card); }
.ce-lp .ce-lp__billing-btn {
  appearance: none; cursor: pointer; border: 0; border-radius: 999px;
  background: transparent; color: var(--ce-text);
  font: inherit; font-weight: 800; font-size: calc(15px * var(--ce-scale));
  padding: 11px 30px; line-height: 1.4; display: inline-flex; align-items: center; gap: 8px;
  transition: background-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
.ce-lp .ce-lp__billing-btn span {
  font-size: 11px; font-weight: 800; color: #c0392b;
  background: rgba(192, 57, 43, 0.12); padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
@media (hover: hover) {
  .ce-lp .ce-lp__billing-btn:not(.is-on):hover { background: var(--ce-accent-soft); color: var(--ce-primary-dark); }
}
.ce-lp .ce-lp__billing-btn.is-on { background: var(--ce-primary); color: #fff; }
.ce-lp .ce-lp__billing-btn.is-on span { color: #fff; background: rgba(255, 255, 255, 0.25); }
@media (max-width: 600px) {
  .ce-lp .ce-lp__billing { width: 100%; }
  .ce-lp .ce-lp__billing-btn { flex: 1; justify-content: center; padding: 11px 12px; font-size: calc(14px * var(--ce-scale)); }
  .ce-lp .ce-lp__billing-btn span { font-size: 10px; padding: 2px 7px; }
}

/* ------------------------------------------------------------------
   お知らせボックス（規約改定の告知など、固定ページ本文で使う）
   ------------------------------------------------------------------ */
.ce-article__content .ce-notice {
  margin: 0 0 28px;
  padding: 18px 22px;
  background: var(--ce-accent-soft);
  border: 1px solid rgba(2, 137, 201, 0.28);
  border-radius: var(--ce-radius);
}
.ce-article__content .ce-notice p {
  margin: 0;
  font-size: calc(14.5px * var(--ce-scale));
  line-height: 1.85;
  color: var(--ce-ink);
}
.ce-article__content .ce-notice strong { color: var(--ce-primary-dark); }

/* ------------------------------------------------------------------
   用語定義表（会員規約の第1条など）: 1列目を見出し扱いにした2カラム表
   ------------------------------------------------------------------ */
.ce-article__content .ce-deftable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 28px;
  font-size: calc(14.5px * var(--ce-scale));
}
.ce-article__content .ce-deftable td {
  border: 1px solid var(--ce-line);
  padding: 11px 15px;
  vertical-align: top;
  line-height: 1.85;
}
.ce-article__content .ce-deftable tr > td:first-child {
  width: 26%;
  background: var(--ce-bg);
  font-weight: 700;
  color: var(--ce-ink);
}
@media (max-width: 600px) {
  .ce-article__content .ce-deftable { font-size: calc(13px * var(--ce-scale)); }
  .ce-article__content .ce-deftable td { padding: 9px 10px; }
  .ce-article__content .ce-deftable tr > td:first-child { width: 34%; }
}

/* ------------------------------------------------------------------
   お支払い・解約の管理（Stripe カスタマーポータルへの導線）
   ------------------------------------------------------------------ */
.ce-article__content .ce-portal {
  margin: 0 0 32px;
  padding: 26px 28px 24px;
  background: var(--ce-card);
  border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
}
.ce-article__content .ce-portal__title {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: calc(19px * var(--ce-scale));
  font-weight: 800;
  color: var(--ce-ink);
}
.ce-article__content .ce-portal__title::before,
.ce-article__content .ce-portal__title::after { content: none; }
.ce-article__content .ce-portal__lead {
  margin: 0 0 18px;
  font-size: calc(14.5px * var(--ce-scale));
  line-height: 1.85;
}
.ce-article__content .ce-portal__btnwrap { margin: 0 0 20px; }
.ce-article__content .ce-portal .ce-portal__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 240px; padding: 14px 30px;
  background: var(--ce-primary); color: #fff;
  border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: calc(15px * var(--ce-scale));
  transition: background-color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-article__content .ce-portal .ce-portal__btn:hover { background: var(--ce-primary-dark); color: #fff; }
}
.ce-article__content .ce-portal__notes {
  margin: 0; padding-left: 1.3em;
  font-size: calc(13px * var(--ce-scale));
  line-height: 1.9; color: var(--ce-text-soft);
}
.ce-article__content .ce-portal__notes li { margin: 0 0 4px; }
@media (max-width: 600px) {
  .ce-article__content .ce-portal { padding: 20px 18px 18px; }
  .ce-article__content .ce-portal .ce-portal__btn { width: 100%; min-width: 0; }
}

/* 年額プランの返金保証（切替トグルの下に出る安心材料） */
.ce-lp .ce-lp__guarantee {
  display: none;
  max-width: 34em;
  margin: 14px auto 0;
  text-align: center;
  font-size: calc(13.5px * var(--ce-scale));
  font-weight: 700;
  line-height: 1.75;
  color: var(--ce-primary-dark);
}
.ce-lp.is-annual .ce-lp__guarantee { display: block !important; }
.ce-lp .ce-lp__guarantee .ce-icon {
  width: 18px; height: 18px; fill: currentColor;
  vertical-align: -3px; margin-right: 5px;
}
.ce-lp .ce-lp__guarantee strong { color: inherit; }
@media (max-width: 600px) {
  .ce-lp .ce-lp__guarantee { font-size: calc(12.5px * var(--ce-scale)); }
}

/* ツール一覧: 会員限定バッジ（サムネイル左上に重ねる。カード本文の高さを揃えるため） */
.ce-card__thumb { position: relative; }
.ce-card__lock,
.ce-article__content p.ce-card__lock {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(21, 39, 48, 0.82);
  color: #fff;
  font-size: calc(9.5px * var(--ce-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.7;
  backdrop-filter: blur(2px);
}
.ce-card__lock svg,
.ce-article__content p.ce-card__lock svg { width: 10px; height: 10px; fill: currentColor; }

/* ------------------------------------------------------------------
   会員限定ツールのティザー（非会員向け）
   ツール本体と同じフル幅で実画面を敷き、全面にベールをかける。
   画面はそのままスクロールでき、会員導線のカードだけが追従する
   （ツールの全体像を想像してもらうのが目的）
   ------------------------------------------------------------------ */
.ce-toolteaser {
  position: relative;
  width: 100%;
  margin: 0;
  background: var(--ce-bg);
}
.ce-toolteaser__preview { position: relative; overflow: hidden; }
.ce-toolteaser__preview img {
  display: block; width: 100%; height: auto;
  filter: blur(3px) saturate(0.95);
  transform: scale(1.02); /* ぼかしの端が透けるのを防ぐ */
}
/* 全面にかけるベール（下端はページ背景へ溶かす） */
.ce-toolteaser__preview::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(244,246,248,0) 82%, rgba(244,246,248,0.95) 100%),
    rgba(244,246,248,0.6);
}
/* カードだけを追従させるための層。背面のクリックは通す */
.ce-toolteaser__overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
.ce-toolteaser__panel {
  position: sticky;
  top: 84px;
  pointer-events: auto;
  width: min(520px, calc(100% - 36px));
  margin: 74px auto 0;
  padding: 34px 32px 32px;
  text-align: center;
  background: var(--ce-card);
  border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
  box-shadow: 0 16px 44px rgba(20, 40, 50, 0.18);
}
.ce-article__content p.ce-toolteaser__badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 0 14px;
  padding: 4px 13px 4px 10px;
  border-radius: 999px;
  background: var(--ce-ink); color: #fff;
  font-size: calc(11px * var(--ce-scale)); font-weight: 700; line-height: 1.7;
}
.ce-toolteaser__badge svg { width: 12px; height: 12px; fill: currentColor; }
.ce-article__content p.ce-toolteaser__lead {
  margin: 0 0 22px;
  font-size: calc(14px * var(--ce-scale));
  line-height: 1.95;
  color: var(--ce-ink);
}
.ce-article__content p.ce-toolteaser__actions {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0;
}
.ce-article__content .ce-toolteaser__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 260px; padding: 14px 32px;
  background: var(--ce-primary); color: #fff;
  border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: calc(15px * var(--ce-scale));
  transition: background-color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-article__content .ce-toolteaser__btn:hover { background: var(--ce-primary-dark); color: #fff; }
}
.ce-article__content .ce-toolteaser__link {
  font-size: calc(13px * var(--ce-scale)); font-weight: 700; color: var(--ce-primary);
}
/* スマホでは横幅に合わせると縮みすぎてツールの様子が伝わらないため、
   PC相当の幅で表示して左右を切り、縦は画面2枚分弱を確保してスクロールさせる */
@media (max-width: 700px) {
  .ce-toolteaser__preview { height: 150vh; }
  .ce-toolteaser__preview img {
    width: 900px; max-width: none;
    height: 100%; object-fit: cover; object-position: top center;
    margin-left: 50%;
    transform: translateX(-50%) scale(1.02);
  }
}
@media (max-width: 600px) {
  .ce-toolteaser__panel { top: 20px; margin-top: 46px; padding: 26px 18px 24px; }
  .ce-article__content .ce-toolteaser__btn { width: 100%; min-width: 0; }
}

/* ------------------------------------------------------------------
   ランディングページ共通レイアウト（.ce-city）
   1カラムの流し込みではなく、カードグリッド中心の構成にしている
   使用ページ: /city/（自治体の皆様へ）・/business/（企業の皆様へ）
   ------------------------------------------------------------------ */
.ce-article--page:has(.ce-city) {
  max-width: none; width: 100vw; margin-left: calc(50% - 50vw);
  padding: 0; background: transparent; border: 0; border-radius: 0;
}
.ce-main:has(.ce-city) { padding: 0 0 40px; }
.ce-main:has(.ce-city) .ce-article__content { margin-top: 0; }
/* 内側の共通コンテナ幅 */
.ce-city > * { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }

/* ---------- ヒーロー ---------- */
.ce-city > .ce-cityhero {
  max-width: none; padding: 62px 20px 56px;
  background: linear-gradient(180deg, var(--ce-accent-soft) 0%, var(--ce-bg) 100%);
  text-align: center;
}
.ce-article__content p.ce-cityhero__en {
  margin: 0 auto 12px;
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 800; letter-spacing: 0.1em;
  color: var(--ce-primary);
}
.ce-article__content h1.ce-cityhero__title {
  max-width: 20em; margin: 0 auto 20px; padding: 0; border: 0;
  font-size: calc(34px * var(--ce-scale)); font-weight: 800; line-height: 1.45; color: var(--ce-ink);
}
.ce-article__content h1.ce-cityhero__title span { color: var(--ce-primary-dark); }
.ce-article__content p.ce-cityhero__lead {
  max-width: 44em; margin: 0 auto 28px;
  font-size: calc(16px * var(--ce-scale)); line-height: 2; color: var(--ce-ink);
}
.ce-article__content p.ce-cityhero__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin: 0;
}
.ce-article__content .ce-cityhero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 240px; padding: 15px 34px;
  background: var(--ce-primary); color: #fff; border-radius: 999px;
  font-weight: 800; font-size: calc(15px * var(--ce-scale)); text-decoration: none;
  transition: background-color 0.15s var(--ce-ease);
}
.ce-article__content .ce-cityhero__link { font-size: calc(14px * var(--ce-scale)); font-weight: 700; color: var(--ce-primary); }
@media (hover: hover) {
  .ce-article__content .ce-cityhero__btn:hover { background: var(--ce-primary-dark); color: #fff; }
}

/* ---------- セクション見出し ---------- */
.ce-article__content h2.ce-cityh {
  margin: 68px auto 26px; padding: 0;
  border: 0; text-align: center;
  font-size: calc(26px * var(--ce-scale)); line-height: 1.5;
}
.ce-article__content h2.ce-cityh::before { content: none; }
.ce-article__content h2.ce-cityh::after {
  content: ''; display: block; width: 40px; height: 3px; margin: 14px auto 0;
  background: var(--ce-primary); border-radius: 2px;
}
.ce-article__content h2.ce-cityh span {
  display: block; margin: 0 0 6px;
  font-size: calc(12px * var(--ce-scale)); font-weight: 800; letter-spacing: 0.1em;
  color: var(--ce-primary);
}
.ce-article__content h2.ce-cityh--plain { margin-top: 0; }

/* ---------- 課題（3カラム） ---------- */
.ce-cityproblem { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.ce-cityproblem__item {
  position: relative; padding: 22px 22px 20px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-article__content p.ce-cityproblem__label {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 800; color: var(--ce-primary);
}
.ce-article__content p.ce-cityproblem__label::before {
  content: '✓'; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--ce-primary); color: #fff; font-size: 11px; font-weight: 900;
}
.ce-article__content .ce-cityproblem__item p:last-child {
  margin: 0; font-size: calc(14.5px * var(--ce-scale)); font-weight: 700; line-height: 1.85; color: var(--ce-ink);
}

/* ---------- 導入文 ---------- */
.ce-cityintro { margin-top: 68px; }
.ce-article__content .ce-cityintro > p {
  max-width: 46em; margin: 0 auto; font-size: calc(15px * var(--ce-scale)); line-height: 2.05;
}

/* ---------- 運営会社（本文＋B Corp バッジの2カラム） ---------- */
.ce-cityco { display: grid; gap: 32px; grid-template-columns: 2fr 1fr; align-items: start; }
.ce-article__content .ce-cityco__body p {
  margin: 0; font-size: calc(15px * var(--ce-scale)); line-height: 2.05;
}
.ce-cityco__badge { display: flex; justify-content: center; }
.ce-bcorp { width: 100%; max-width: 150px; }
.ce-bcorp img { display: block; width: 100%; height: auto; margin: 0; }
/* 黒版は暗い背景で沈むため、ダークモードでは白版に差し替える */
.ce-bcorp--dark { display: none; }
[data-ce-theme="dark"] .ce-bcorp--light { display: none; }
[data-ce-theme="dark"] .ce-bcorp--dark { display: block; }
@media (max-width: 780px) {
  .ce-cityco { grid-template-columns: 1fr; gap: 24px; }
  .ce-bcorp { max-width: 120px; }
}

/* ---------- サービス ---------- */
.ce-article__content ul.ce-citynav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 auto 34px; padding-left: 20px; padding-right: 20px; list-style: none;
}
.ce-article__content ul.ce-citynav li { margin: 0; }
.ce-article__content ul.ce-citynav a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: 999px;
  font-size: calc(13px * var(--ce-scale)); font-weight: 700; text-decoration: none; color: var(--ce-ink);
}
.ce-article__content ul.ce-citynav a span { color: var(--ce-primary); font-weight: 800; font-size: 11px; }
@media (hover: hover) {
  .ce-article__content ul.ce-citynav a:hover { background: var(--ce-accent-soft); border-color: var(--ce-primary); color: var(--ce-primary-dark); }
}
.ce-citysvc { margin-bottom: 44px; scroll-margin-top: 16px; }
.ce-article__content .ce-citysvc h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px;
  margin: 0 0 18px; padding: 0 0 14px; border: 0; border-bottom: 2px solid var(--ce-line);
  font-size: calc(19px * var(--ce-scale)); line-height: 1.6;
}
.ce-article__content .ce-citysvc h3::before,
.ce-article__content .ce-citysvc h3::after { content: none; }
.ce-citysvc__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--ce-primary); color: #fff; font-size: 12px; font-weight: 800;
}
.ce-citysvc__en {
  flex: 1 0 100%; order: 3; margin: 4px 0 0;
  font-size: calc(12px * var(--ce-scale)); font-weight: 800; letter-spacing: 0.04em; color: var(--ce-primary);
}
.ce-article__content p.ce-citysvc__lead {
  max-width: 46em; margin: 0 0 20px; font-size: calc(14.5px * var(--ce-scale)); line-height: 2;
}
.ce-article__content p.ce-citysvc__note {
  margin: -12px 0 20px; font-size: calc(13.5px * var(--ce-scale)); color: var(--ce-text-soft);
}

/* 日本語の折り返しを文節単位にし、行末に1文字だけ残るのを防ぐ
   （auto-phrase / pretty に未対応のブラウザでは従来どおりの折り返しになる） */
/* グリッド/フレックスの子は既定が min-width:auto のため、長い文節や
   文字サイズ「大」で列幅が押し広げられて横スクロールが出る。
   min-content を下げて、狭い幅でも必ず折り返すようにする */
.ce-cityproblem > *, .ce-citygrid > *, .ce-citywhy > *, .ce-citygallery > *,
.ce-citycols > *, .ce-citycolstack > *, .ce-citysplit > *, .ce-cityco > *,
.ce-members > *, .ce-member > * { min-width: 0; }
.ce-city h1, .ce-city h2, .ce-city h3, .ce-city h4,
.ce-city p, .ce-city li, .ce-city summary { overflow-wrap: anywhere; }
.ce-city h1, .ce-city h2, .ce-city h3, .ce-city h4,
.ce-city p, .ce-city li, .ce-city summary {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* サービスのカード */
.ce-citygrid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.ce-citycard {
  display: flex; flex-direction: column;
  padding: 0 0 20px; overflow: hidden;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-citycard__thumb { display: block; margin: 0 0 4px; background: var(--ce-bg); }
.ce-citycard__thumb img { display: block; width: 100%; height: 190px; object-fit: cover; }
.ce-article__content .ce-citycard h4 {
  margin: 18px 20px 8px; padding: 0; border: 0;
  font-size: calc(15.5px * var(--ce-scale)); line-height: 1.6; color: var(--ce-ink);
}
.ce-article__content .ce-citycard p {
  margin: 0 20px 10px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.9;
}
.ce-article__content .ce-citycard p:last-child { margin-bottom: 0; }
.ce-article__content p.ce-citycase {
  margin-top: auto; padding-top: 10px;
  font-size: calc(12.5px * var(--ce-scale)); color: var(--ce-text-soft);
}

/* 画像を左・説明を右に置く2カラム（01 政策立案支援） */
.ce-citysplit { display: grid; gap: 22px; grid-template-columns: 0.92fr 1.08fr; align-items: start; }
.ce-citysplit__media .ce-cityshot { margin: 0; }
.ce-citysplit__media .ce-cityshot img { max-width: none; }
.ce-citysplit__body { display: grid; gap: 12px; }
.ce-citysplit__body .ce-citycard { padding-bottom: 18px; }
.ce-citysplit__body .ce-citycard h4 { margin-top: 16px; }

/* 図版（サービス冒頭の1枚 / 3枚並び） */
.ce-cityshot { display: block; margin: 0 0 20px; }
.ce-cityshot img {
  display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto;
  background: var(--ce-bg); border: 1px solid var(--ce-line); border-radius: 10px;
}
.ce-citygallery { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; }
.ce-citygallery .ce-cityshot { margin: 0; }
.ce-citygallery .ce-cityshot img { max-width: none; height: 190px; object-fit: cover; }
.ce-article__content ul.ce-citylinks { margin: 0; padding-left: 1.2em; }
.ce-article__content ul.ce-citylinks li {
  margin: 0 0 5px; font-size: calc(13px * var(--ce-scale)); line-height: 1.85; color: var(--ce-text-soft);
}

/* ---------- 選ばれる理由（3カラム） ---------- */
.ce-citywhy { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.ce-citywhy > div {
  padding: 26px 24px 24px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-article__content p.ce-citywhy__en {
  margin: 0 0 8px; font-size: calc(12px * var(--ce-scale)); font-weight: 800;
  letter-spacing: 0.06em; color: var(--ce-primary);
}
.ce-article__content .ce-citywhy h3 {
  margin: 0 0 12px; padding: 0; border: 0;
  font-size: calc(16.5px * var(--ce-scale)); line-height: 1.6;
}
.ce-article__content .ce-citywhy h3::before,
.ce-article__content .ce-citywhy h3::after { content: none; }
.ce-article__content .ce-citywhy p:last-child { margin: 0; font-size: calc(14px * var(--ce-scale)); line-height: 1.95; }

/* ---------- 事例（2カラム） ---------- */
.ce-citycols { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; align-items: start; }
/* 片側に複数のカードを積むとき */
.ce-citycolstack { display: grid; gap: 20px; align-content: start; }
.ce-citycol {
  padding: 26px 26px 20px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-article__content .ce-citycol h3 {
  margin: 0 0 14px; padding: 0 0 10px; border: 0; border-bottom: 2px solid var(--ce-line);
  font-size: calc(16px * var(--ce-scale));
}
.ce-article__content .ce-citycol h3::before,
.ce-article__content .ce-citycol h3::after { content: none; }
.ce-article__content ul.ce-citycases { margin: 0; padding-left: 1.2em; }
.ce-article__content ul.ce-citycases li { margin: 0 0 8px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.85; }
.ce-article__content ul.ce-citycases ul { margin: 5px 0 8px; }

/* ---------- FAQ ---------- */
/* ---------- 他メディア・ニュースレター（/about/） ---------- */
.ce-mediaways { margin-top: 30px; }
.ce-article__content p.ce-mediaways__title {
  margin: 0 0 10px; font-size: calc(14px * var(--ce-scale)); font-weight: 700; color: var(--ce-ink);
}
.ce-newsletter {
  margin-top: 18px; padding: 20px 24px 18px;
  background: var(--ce-accent-soft); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-newsletter__title,
.ce-article__content p.ce-newsletter__title {
  margin: 0 0 4px; font-size: calc(15px * var(--ce-scale)); font-weight: 700; color: var(--ce-ink);
}
.ce-newsletter__lead,
.ce-article__content p.ce-newsletter__lead {
  margin: 0 0 14px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.8; color: var(--ce-text-soft);
}
.ce-newsletter .mc4wp-form-fields p { margin: 0; }
.ce-newsletter .mc4wp-form-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ce-article__content .ce-newsletter .mc4wp-form-fields p { margin: 0; }
.ce-newsletter input[type="email"] {
  width: 300px; max-width: 100%; padding: 11px 14px;
  border: 1px solid var(--ce-line); border-radius: 10px;
  background: var(--ce-card); color: var(--ce-text);
  font-family: var(--ce-font); font-size: calc(14px * var(--ce-scale));
}
.ce-newsletter input[type="email"]:focus {
  outline: none; border-color: var(--ce-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ce-primary) 20%, transparent);
}
.ce-newsletter button[type="submit"] {
  padding: 11px 28px; border: 0; border-radius: 999px;
  background: var(--ce-primary); color: #fff; cursor: pointer;
  font-family: var(--ce-font); font-size: calc(14px * var(--ce-scale)); font-weight: 700;
  transition: background-color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-newsletter button[type="submit"]:hover { background: var(--ce-primary-dark); }
}
.ce-newsletter .mc4wp-response { margin-top: 8px; font-size: calc(13px * var(--ce-scale)); }
@media (max-width: 600px) {
  .ce-newsletter { padding: 18px 18px 16px; }
  /* フォームの各行を横いっぱいに広げてから、入力欄とボタンを全幅にする */
  .ce-article__content .ce-newsletter .mc4wp-form-fields p { width: 100%; }
  .ce-newsletter input[type="email"], .ce-newsletter button[type="submit"] { width: 100%; }
}

/* ---------- 著者プロフィール（著者別の記事一覧） ---------- */
.ce-authorbox {
  display: grid; grid-template-columns: 120px 1fr; gap: 8px 26px; align-items: start;
  margin: 6px 0 8px; padding: 26px 28px 24px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-authorbox__photo { width: 120px; height: 120px; }
.ce-authorbox__photo img {
  display: block; width: 120px; height: 120px; margin: 0;
  border-radius: 50%; object-fit: cover; background: var(--ce-bg);
}
.ce-authorbox__photo--mono {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ce-accent-soft);
  color: var(--ce-primary-dark); font-size: 44px; font-weight: 800;
}
.ce-authorbox__body { min-width: 0; }
.ce-authorbox__en {
  margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ce-primary);
}
.ce-authorbox__name {
  margin: 0 0 10px; padding: 0; border: 0;
  font-size: calc(22px * var(--ce-scale)); line-height: 1.4; color: var(--ce-ink);
}
.ce-authorbox__bio p {
  margin: 0 0 10px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.95; color: var(--ce-text);
  overflow-wrap: anywhere;
}
.ce-authorbox__bio p:last-child { margin-bottom: 0; }
.ce-authorbox__bio a { color: var(--ce-primary); }
.ce-authorbox__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 14px 0 0; font-size: calc(12.5px * var(--ce-scale)); color: var(--ce-text-soft);
}
.ce-authorbox__count strong { color: var(--ce-ink); font-size: calc(14px * var(--ce-scale)); }
.ce-authorbox__link { color: var(--ce-primary); font-weight: 700; text-decoration: none; }
.ce-authorbox__link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  /* 横並びだと本文の幅が足りないので、写真を上に置いて縦積みにする */
  .ce-authorbox { display: block; padding: 22px 18px 20px; text-align: center; }
  .ce-authorbox__photo, .ce-authorbox__photo img { width: 88px; height: 88px; }
  .ce-authorbox__photo { margin: 0 auto 12px; }
  .ce-authorbox__photo--mono { font-size: 34px; }
  .ce-authorbox__name { font-size: calc(19px * var(--ce-scale)); }
  .ce-authorbox__bio { margin-top: 12px; text-align: left; }
  .ce-authorbox__meta { justify-content: center; }
}

/* ---------- 編集部メンバー（/about/） ---------- */
.ce-members { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.ce-member {
  display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start;
  padding: 22px 24px 20px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-member__photo { display: block; }
/* グリッド項目の既定は min-width:auto なので、長い英字やURLでカードがはみ出す */
.ce-member__body { min-width: 0; }
/* wpautop が差し込む空の段落がグリッドの升目を消費しないように */
.ce-article__content .ce-member > p:empty { display: none; }
.ce-member__photo img {
  display: block; width: 84px; height: 84px; margin: 0;
  border-radius: 50%; object-fit: cover; background: var(--ce-bg);
}
.ce-article__content .ce-member h4 {
  margin: 0 0 8px; font-size: calc(15.5px * var(--ce-scale)); line-height: 1.5; color: var(--ce-ink);
}
.ce-article__content .ce-member p {
  margin: 0; font-size: calc(13px * var(--ce-scale)); line-height: 1.9; color: var(--ce-text);
  overflow-wrap: anywhere;
}
.ce-article__content .ce-member h4 { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .ce-members { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ce-member { grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 18px 16px; }
  .ce-member__photo img { width: 64px; height: 64px; }
}

/* ---------- 実績などのタグ列 ---------- */
.ce-article__content ul.ce-citytags {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none;
}
.ce-article__content ul.ce-citytags li {
  margin: 0; padding: 7px 14px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: 999px;
  font-size: calc(13.5px * var(--ce-scale)); font-weight: 700; color: var(--ce-ink);
}

/* ---------- FAQ ---------- */
.ce-cityfaqs { display: grid; gap: 10px; max-width: 880px; }
.ce-cityfaq {
  padding: 0 22px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: 12px;
}
.ce-cityfaq > summary {
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: calc(15px * var(--ce-scale)); font-weight: 700; color: var(--ce-ink);
}
.ce-cityfaq > summary::-webkit-details-marker { display: none; }
.ce-cityfaq > summary::before { content: 'Q. '; color: var(--ce-primary); font-weight: 800; }
.ce-article__content .ce-cityfaq p {
  margin: 0; padding: 0 0 20px; font-size: calc(14.5px * var(--ce-scale)); line-height: 1.95;
}
.ce-article__content .ce-cityfaq p:not(:last-child) { padding-bottom: 6px; }
/* 参照リンクの行は本文より一段小さく */
.ce-article__content p.ce-cityfaq__note {
  font-size: calc(13.5px * var(--ce-scale)); color: var(--ce-text-soft);
}

/* ---------- お問い合わせ ---------- */
.ce-city > .ce-citycta {
  max-width: none; margin: 68px 0 0; padding: 46px 20px 44px;
  background: var(--ce-accent-soft); text-align: center;
}
.ce-city > .ce-citycta--last { margin-bottom: -40px; }
.ce-article__content .ce-citycta h2 {
  margin: 0 0 12px; padding: 0; border: 0; font-size: calc(23px * var(--ce-scale));
}
.ce-article__content .ce-citycta h2::before,
.ce-article__content .ce-citycta h2::after { content: none; }
.ce-article__content .ce-citycta p {
  max-width: 40em; margin: 0 auto 24px; font-size: calc(14.5px * var(--ce-scale)); line-height: 1.95;
}
/* 直前の p ルールの max-width を引き継ぐと左寄せになるため打ち消す */
.ce-article__content p.ce-citycta__btn { max-width: none; margin: 0; text-align: center; }
.ce-article__content .ce-citycta__btn a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 280px; padding: 16px 36px;
  background: var(--ce-primary); color: #fff; border-radius: 999px;
  font-weight: 800; font-size: calc(15.5px * var(--ce-scale)); text-decoration: none;
  transition: background-color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-article__content .ce-citycta__btn a:hover { background: var(--ce-primary-dark); color: #fff; }
}

@media (max-width: 900px) {
  .ce-cityproblem, .ce-citygrid, .ce-citywhy, .ce-citygallery { grid-template-columns: repeat(2, 1fr); }
  .ce-citycols, .ce-citysplit { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ce-cityproblem, .ce-citygrid, .ce-citywhy, .ce-citygallery { grid-template-columns: 1fr; }
  .ce-city > .ce-cityhero { padding: 40px 18px 38px; }
  .ce-article__content h1.ce-cityhero__title { font-size: calc(24px * var(--ce-scale)); }
  .ce-article__content p.ce-cityhero__lead { font-size: calc(14.5px * var(--ce-scale)); }
  .ce-article__content .ce-cityhero__btn { width: 100%; min-width: 0; }
  .ce-article__content h2.ce-cityh { margin-top: 52px; font-size: calc(21px * var(--ce-scale)); }
  .ce-citycol { padding: 20px 18px 16px; }
  .ce-city > .ce-citycta { padding: 34px 18px 32px; }
  .ce-article__content .ce-citycta__btn a { width: 100%; min-width: 0; }
  .ce-citycard__thumb img, .ce-citygallery .ce-cityshot img { height: 200px; }
}

/* ==========================================================================
   リソースライブラリ（inc/resources.php）
   比較しやすさを優先し、学習プログラムは表・その他はカードで見せる
   ========================================================================== */
.ce-res { margin: 8px 0 0; }
/* 件数・検索・絞り込みは白いパネルにまとめて、表と切り分けて見せる */
.ce-res__panel {
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); padding: 18px 22px; margin: 0 0 20px;
}
.ce-res__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.ce-article__content p.ce-res__count { margin: 0; font-size: calc(13.5px * var(--ce-scale)); color: var(--ce-text-soft); }
.ce-res__count strong { font-size: calc(17px * var(--ce-scale)); color: var(--ce-ink); }
.ce-res__search { flex: 1; min-width: 200px; }
/* パネルが白なので、入力欄・ボタンは背景色側の地にして境界を出す */
.ce-res__search input {
  width: 100%; padding: 9px 14px; box-sizing: border-box;
  border: 1px solid var(--ce-line); border-radius: 999px;
  background: var(--ce-bg); color: var(--ce-text);
  font-family: var(--ce-font); font-size: calc(13.5px * var(--ce-scale));
}
.ce-res__search input:focus {
  outline: none; border-color: var(--ce-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ce-primary) 20%, transparent);
}
.ce-res__reset {
  appearance: none; cursor: pointer; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-bg); color: var(--ce-text-soft);
  font-family: var(--ce-font); font-size: calc(12.5px * var(--ce-scale)); font-weight: 700;
}
@media (hover: hover) {
  .ce-res__reset:hover { border-color: var(--ce-primary); color: var(--ce-primary); }
}

/* 絞り込みは2〜3カラムに畳んで高さを抑える */
.ce-res__facets {
  display: grid; gap: 16px 26px;
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--ce-line);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start;
}
.ce-res__facet { min-width: 0; }
/* 出せる絞り込みが1つも無いときは区切り線だけ残らないように畳む */
.ce-res__facets:empty { display: none; }
.ce-article__content p.ce-res__facet-label {
  margin: 0 0 6px; font-size: calc(12px * var(--ce-scale)); font-weight: 800;
  letter-spacing: 0.04em; color: var(--ce-primary);
}
.ce-res__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-res__chip {
  appearance: none; cursor: pointer; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-bg); color: var(--ce-ink);
  font-family: var(--ce-font); font-size: calc(12.5px * var(--ce-scale)); font-weight: 700;
  transition: background-color 0.15s var(--ce-ease), border-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-res__chip:hover { border-color: var(--ce-primary); color: var(--ce-primary); }
}
.ce-res__chip[aria-pressed="true"] {
  background: var(--ce-primary); border-color: var(--ce-primary); color: #fff;
}
@media (hover: hover) {
  .ce-res__chip[aria-pressed="true"]:hover { background: var(--ce-primary-dark); color: #fff; }
}

/* ---------- 表 ---------- */
/* 表も白いカードに載せて、背景色の上に浮かせる */
.ce-res__tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
}
.ce-article__content table.ce-res__table {
  width: 100%; border-collapse: collapse; margin: 0;
  font-size: calc(13px * var(--ce-scale)); white-space: nowrap;
}
.ce-article__content .ce-res__table th,
.ce-article__content .ce-res__table td {
  padding: 12px 14px; border-bottom: 1px solid var(--ce-line); text-align: left; vertical-align: middle;
}
/* カードの縁に文字を寄せすぎないよう、左右端の列だけ余白を足す */
.ce-article__content .ce-res__table tr > :first-child { padding-left: 20px; }
.ce-article__content .ce-res__table tr > :last-child { padding-right: 20px; }
/* 最終行の下線はカードの枠線と重なるので消す */
.ce-article__content .ce-res__table tbody tr:last-child > * { border-bottom: 0; }
/* 提供元は長い機関名が多いので折り返して幅を抑える */
.ce-article__content .ce-res__table td[data-col="ce_res_provider"] {
  white-space: normal; max-width: 15em; min-width: 9em;
}
.ce-article__content .ce-res__table thead th {
  position: sticky; top: 0; z-index: 1;
  background: color-mix(in srgb, var(--ce-primary) 5%, var(--ce-card));
  border-bottom: 1px solid var(--ce-line);
  font-size: calc(12px * var(--ce-scale)); color: var(--ce-text-soft); font-weight: 700;
  white-space: nowrap;
}
.ce-article__content .ce-res__table thead th[data-ce-res-sort] { cursor: pointer; }
.ce-article__content .ce-res__table thead th[data-ce-res-sort]::after { content: ' ↕'; opacity: 0.4; }
.ce-article__content .ce-res__table thead th[data-dir="asc"]::after { content: ' ↑'; opacity: 1; color: var(--ce-primary); }
.ce-article__content .ce-res__table thead th[data-dir="desc"]::after { content: ' ↓'; opacity: 1; color: var(--ce-primary); }
/* 列数が多いので、行を追いやすいよう1行おきに薄く色を敷く
   （縞は絞り込み後の見た目の行数で振るため theme.js が is-alt を付ける） */
.ce-article__content .ce-res__table tbody tr.is-alt {
  background: color-mix(in srgb, var(--ce-ink) 3%, transparent);
}
.ce-article__content .ce-res__table tbody tr:hover { background: var(--ce-accent-soft); }
.ce-article__content .ce-res__name {
  white-space: normal; min-width: 210px; max-width: 24em; font-weight: 700; color: var(--ce-ink);
}
/* 日本語訳は原語の下に小さく置き、英語名を拾いやすくする */
.ce-res__ja {
  display: block; margin-top: 2px; font-weight: 400;
  font-size: calc(11.5px * var(--ce-scale)); line-height: 1.6; color: var(--ce-text-soft);
}
/* 著者名などは長くなるので折り返す */
.ce-article__content .ce-res__meta { white-space: normal; min-width: 180px; max-width: 26em; }
.ce-res__go { text-align: right; }
.ce-article__content .ce-res__link {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--ce-primary); color: #fff; text-decoration: none;
  font-size: calc(12px * var(--ce-scale)); font-weight: 700; white-space: nowrap;
}
@media (hover: hover) { .ce-article__content .ce-res__link:hover { background: var(--ce-primary-dark); color: #fff; } }

/* ---------- カード ---------- */
.ce-res__cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ce-rescard {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
  overflow: hidden;
}
.ce-rescard__thumb {
  display: flex; align-items: center; justify-content: center;
  height: 168px; background: var(--ce-accent-soft); overflow: hidden;
}
.ce-rescard__thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ce-rescard__ph { font-size: 44px; font-weight: 800; color: var(--ce-primary); }
.ce-rescard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ce-article__content .ce-rescard__title {
  margin: 0; padding: 0; border: 0;
  font-size: calc(15px * var(--ce-scale)); line-height: 1.6; color: var(--ce-ink);
}
.ce-article__content .ce-rescard__byline,
.ce-article__content .ce-rescard__meta,
.ce-article__content .ce-rescard__note {
  margin: 0; font-size: calc(12.5px * var(--ce-scale)); line-height: 1.8; color: var(--ce-text-soft);
}
.ce-rescard__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ce-rescard__tag {
  padding: 2px 8px; border-radius: 4px; background: var(--ce-bg); border: 1px solid var(--ce-line);
  font-size: calc(11px * var(--ce-scale)); font-weight: 700; color: var(--ce-text);
}
.ce-article__content .ce-res__btn {
  margin-top: auto; align-self: flex-start;
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: var(--ce-primary); color: #fff; text-decoration: none;
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 700;
}
@media (hover: hover) { .ce-article__content .ce-res__btn:hover { background: var(--ce-primary-dark); color: #fff; } }

.ce-article__content p.ce-res__empty { margin: 24px 0 0; text-align: center; color: var(--ce-text-soft); }
.ce-article__content p.ce-res__disclosure {
  margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--ce-line);
  font-size: calc(12px * var(--ce-scale)); line-height: 1.8; color: var(--ce-text-soft);
}
@media (max-width: 600px) {
  .ce-res__cards { grid-template-columns: 1fr; }
  .ce-article__content .ce-res__name { min-width: 200px; }
  .ce-res__panel { padding: 16px; }
  .ce-article__content .ce-res__table tr > :first-child { padding-left: 14px; }
  .ce-article__content .ce-res__table tr > :last-child { padding-right: 14px; }
}

/* ---------- リソースライブラリのハブ・各ページの見出し ---------- */
.ce-reslib-hub { margin: 0 0 34px; }
.ce-article__content .ce-reslib-hub .ce-grid { margin-top: 16px; }
/* 説明文はカラム幅いっぱいに流す（途中で折り返すと右側が空くため） */
.ce-article__content p.ce-reslib__lead { max-width: none; }
.ce-article__content p.ce-reslib__back {
  margin: -6px 0 20px; font-size: calc(13px * var(--ce-scale));
}
.ce-article__content p.ce-reslib__back a { color: var(--ce-primary); font-weight: 700; }

/* ラーニングハブと各一覧はツール一覧と同じくフル幅（白カードで囲まない） */
.ce-article--page:has(.ce-reslib),
.ce-article--page:has(.ce-reslib-hub) {
  max-width: none; background: transparent; border: 0; border-radius: 0; padding: 0;
}
.ce-reslib h2,
.ce-reslib-hub h2 { border-left: 4px solid var(--ce-primary); padding-left: 14px; margin: 0 0 0.6em; }
/* ハブのカードはツール一覧と同じ見え方に */
.ce-reslib-hub .ce-card { position: relative; }
.ce-reslib-hub .ce-card__title a { color: inherit; text-decoration: none; }
.ce-reslib-hub .ce-card__title a::after { content: ""; position: absolute; inset: 0; }
.ce-reslib-hub .ce-card__body { padding: 20px 22px 24px; }
.ce-reslib-hub .ce-card__title { font-size: calc(20px * var(--ce-scale)); line-height: 1.5; }
.ce-reslib-hub .ce-card__desc {
  margin: 10px 0 0; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.85;
  color: var(--ce-text-soft);
}
.ce-res__select {
  width: 100%; max-width: 320px; padding: 8px 12px; box-sizing: border-box;
  border: 1px solid var(--ce-line); border-radius: 10px;
  background: var(--ce-bg); color: var(--ce-text);
  font-family: var(--ce-font); font-size: calc(13px * var(--ce-scale));
}
.ce-res__chip-n {
  margin-left: 6px; font-size: calc(10.5px * var(--ce-scale)); opacity: 0.65; font-weight: 700;
}

/* ==========================================================================
   会員情報の編集（inc/member-profile.php）
   SWPM のテーブルを解体し、必要な項目だけを縦並びのフォームで見せる
   ========================================================================== */
.ce-auth__main .swpm-edit-profile-form {
  padding: 30px 30px 26px;
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
}
.ce-prof__block { margin: 0 0 26px; }
.ce-prof__block:last-of-type { margin-bottom: 22px; }
.ce-article__content h3.ce-prof__h {
  margin: 0 0 4px; padding: 0 0 8px; border-bottom: 1px solid var(--ce-line);
  font-size: calc(15px * var(--ce-scale)); line-height: 1.5; color: var(--ce-ink);
}
.ce-article__content p.ce-prof__note {
  margin: 10px 0 0; font-size: calc(12.5px * var(--ce-scale));
  line-height: 1.8; color: var(--ce-text-soft);
}
.ce-prof__grid { display: grid; gap: 16px 18px; grid-template-columns: 1fr 1fr; margin-top: 16px; }
.ce-prof__item { grid-column: 1 / -1; min-width: 0; }
.ce-prof__item--half { grid-column: span 1; }
.ce-prof .ce-prof__label {
  display: block; margin: 0 0 5px;
  font-size: calc(13px * var(--ce-scale)); font-weight: 700; color: var(--ce-ink);
}
.ce-prof__item input[type="text"],
.ce-prof__item input[type="email"],
.ce-prof__item input[type="password"] {
  width: 100%; box-sizing: border-box; padding: 11px 14px;
  border: 1px solid var(--ce-line); border-radius: 10px;
  background: var(--ce-bg); color: var(--ce-text);
  font-family: var(--ce-font); font-size: calc(14.5px * var(--ce-scale));
}
.ce-prof__item input:focus {
  outline: none; border-color: var(--ce-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ce-primary) 20%, transparent);
}
/* 変更できない項目は入力欄と区別がつくように地の色で置く */
.ce-article__content p.ce-prof__value {
  margin: 0; padding: 11px 14px; border-radius: 10px;
  background: var(--ce-accent-soft);
  font-size: calc(14.5px * var(--ce-scale)); line-height: 1.5;
  font-weight: 700; color: var(--ce-ink); overflow-wrap: anywhere;
}
.ce-article__content p.ce-prof__hint {
  margin: 5px 0 0; font-size: calc(12px * var(--ce-scale));
  line-height: 1.7; color: var(--ce-text-soft);
}
.ce-auth__main p.swpm-edit-profile-submit-section { margin: 0; }
.ce-auth__main .swpm-edit-profile-submit {
  width: 100%; padding: 13px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ce-primary); color: #fff;
  font-family: var(--ce-font); font-size: calc(15px * var(--ce-scale)); font-weight: 700;
  transition: background-color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-auth__main .swpm-edit-profile-submit:hover { background: var(--ce-primary-dark); }
}
@media (max-width: 600px) {
  .ce-auth__main .swpm-edit-profile-form { padding: 24px 20px 22px; }
  .ce-prof__grid { gap: 14px 12px; }
}

/* ---------- Circular Tool Box の絞り込み（inc/tools-list.php） ----------
   チップの見た目はラーニング一覧（.ce-res__chip）と揃える。
   軸が増えても横に並ぶだけで済むようグリッドにしている */
/* 軸が増えたら折り返して並ぶよう flex にする。grid だと軸が1つのときに
   「絞り込みを解除」が空いた列の右端に飛んで離れて見える */
.ce-toolfilter {
  display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 26px 0 0;
  align-items: flex-end;
}
.ce-toolfilter:empty { display: none; }
.ce-article__content p.ce-toolfilter__label {
  margin: 0 0 6px; font-size: calc(12px * var(--ce-scale)); font-weight: 800;
  letter-spacing: 0.04em; color: var(--ce-primary);
}
.ce-toolfilter__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-toolfilter .ce-toolfilter__chip {
  appearance: none; cursor: pointer; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-card); color: var(--ce-ink);
  font-family: var(--ce-font); font-size: calc(12.5px * var(--ce-scale)); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color 0.15s var(--ce-ease), border-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
@media (hover: hover) {
  .ce-toolfilter .ce-toolfilter__chip:hover { border-color: var(--ce-primary); color: var(--ce-primary); }
}
.ce-toolfilter .ce-toolfilter__chip[aria-pressed="true"] {
  background: var(--ce-primary); border-color: var(--ce-primary); color: #fff;
}
@media (hover: hover) {
  .ce-toolfilter .ce-toolfilter__chip[aria-pressed="true"]:hover { background: var(--ce-primary-dark); color: #fff; }
}
.ce-toolfilter__n { font-size: 0.85em; opacity: 0.7; font-variant-numeric: tabular-nums; }
.ce-article__content p.ce-toolfilter__reset { margin: 0; }
.ce-toolfilter .ce-toolfilter__clear {
  appearance: none; cursor: pointer; background: none; border: 0; padding: 6px 0;
  font-family: var(--ce-font); font-size: calc(12.5px * var(--ce-scale)); font-weight: 700;
  color: var(--ce-primary); text-decoration: underline;
}
.ce-tools-page .ce-grid { margin-top: 22px; }
.ce-article__content p.ce-toolfilter__empty {
  margin: 26px 0 0; padding: 18px 20px; text-align: center;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
  font-size: calc(13.5px * var(--ce-scale)); color: var(--ce-text-soft);
}
/* wpautop がショートコードを <p> で包むため、その残骸（空の段落）を消す */
.ce-tools-page p:empty { display: none; margin: 0; }

/* ==========================================================================
   EU政策ウォッチャー（inc/eu-policy.php）
   iframeではなくページ本文として描画するため、トークンがそのまま効く。
   ========================================================================== */
.ce-pw { margin: 0; }
.ce-article--page:has(.ce-pw) {
  max-width: none; background: transparent; border: 0; border-radius: 0; padding: 0;
}
.ce-pw__intro { margin: 0 0 30px; }
.ce-article__content p.ce-pw__lead {
  margin: 0 0 8px; font-size: calc(15.5px * var(--ce-scale)); line-height: 1.9;
}
.ce-article__content p.ce-pw__meta {
  margin: 0; font-size: calc(12.5px * var(--ce-scale)); color: var(--ce-text-soft);
}
.ce-pw__sec { margin: 0 0 44px; }
.ce-article__content .ce-pw__h {
  margin: 0 0 8px; padding-left: 14px; border-left: 4px solid var(--ce-primary);
  font-size: calc(20px * var(--ce-scale)); line-height: 1.5;
}
.ce-article__content p.ce-pw__note {
  margin: 0 0 18px; font-size: calc(13px * var(--ce-scale)); color: var(--ce-text-soft);
}

/* ---------- 体系図 ----------
   以前は層ごとに「色の左帯つきカード」を積んでいたが、同じ形の箱が6つ
   続くだけで階層が読み取れず、既製のテンプレートのような見た目になって
   いた（ユーザー指摘）。1本の縦線に層の番号を打ち、線から枝が出る形に
   変えて「上から下に降りていく」ことを線そのもので示す。 */
.ce-pw__map { position: relative; padding-left: 30px; }
.ce-pw__map::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 1px; background: var(--ce-line);
}
/* 非会員向け。CSSのぼかしは見た目だけなので、中身はPHP側で出していない */
.ce-pw__map.is-blurred { filter: blur(5px); pointer-events: none; user-select: none; }
.ce-pw__layer { position: relative; padding: 0 0 26px; }
.ce-pw__layer:last-child { padding-bottom: 0; }
.ce-pw__layer-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
  flex-wrap: wrap;
}
.ce-pw__layer-num {
  position: absolute; left: -30px; top: 0;
  width: 23px; height: 23px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ce-bg); border: 1px solid var(--ce-line);
  font-size: calc(9.5px * var(--ce-scale)); font-weight: 800;
  color: var(--ce-text-soft); font-variant-numeric: tabular-nums;
}
.ce-pw__layer-text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ce-pw__layer-name {
  font-size: calc(14px * var(--ce-scale)); font-weight: 800; color: var(--ce-ink);
  letter-spacing: 0.01em;
}
.ce-pw__layer-note { font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft); }
/* 層の性格は、番号の色だけで控えめに示す */
.ce-pw__layer--strategy  > .ce-pw__layer-head > .ce-pw__layer-num { border-color: var(--ce-ink); color: var(--ce-ink); }
.ce-pw__layer--horizontal > .ce-pw__layer-head > .ce-pw__layer-num,
.ce-pw__layer--mechanism  > .ce-pw__layer-head > .ce-pw__layer-num {
  border-color: var(--ce-primary); color: var(--ce-primary);
}
/* 仕組み（DPP）は横断法の中にあるので、一段だけ内側に寄せる */
.ce-pw__layer--mechanism > .ce-pw__chips { margin-left: 18px; }

.ce-pw__chips {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.ce-pw .ce-pw__chip {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 13px; border-radius: 6px;
  /* 上だけ2pxにしていたが、法体系図と同じ理由で意味を持たない装飾なので均した */
  border: 1px solid var(--ce-line);
  background: var(--ce-card);
  font-family: var(--ce-font); color: var(--ce-ink);
  transition: border-color 0.15s var(--ce-ease), background-color 0.15s var(--ce-ease);
}
/*
 * display を明示している要素は、UAスタイルの [hidden] { display: none } に
 * 勝ってしまう。これがないと府省庁で絞り込んでもカードが消えない
 * （2026-08-30 ユーザー指摘。層は display 未指定なので消えており、
 *  「層は減るのにカードは減らない」という見え方になっていた）。
 */
.ce-pw .ce-pw__chip[hidden] { display: none; }
.ce-pw .ce-pw__chip:disabled { cursor: default; }
@media (hover: hover) {
  .ce-pw .ce-pw__chip:not(:disabled):hover { border-color: var(--ce-primary); background: var(--ce-accent-soft); }
}
/* 太さは 700。もとは 800 だったが、これは中身が略称（CID・PPWR）だった頃の指定で、
   日本語表記が入るようになって重すぎた（2026-08-30 ユーザー指摘）。
   Montserrat は 800 を実際に読み込んでいる＝欧文はExtraBoldの実フェイスで出るため、
   短い略称なら締まって見えるが、10〜22文字の日本語だと面積が増えて black に見える。
   層の名前（.ce-pw__layer-name）は 800 のままにして、層＞政策の順位を保つ。 */
.ce-pw__chip-head { font-size: calc(13.5px * var(--ce-scale)); font-weight: 700; line-height: 1.45; }
.ce-pw__chip-name { font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft); line-height: 1.5; }
/* EU版の小見出し。「英語略称（英語表記）」を添える。
   大見出しが日本語表記になり、日本語の行が1本になったぶん
   この行が略称の手がかりを担うので、10px→10.5px にして opacity を外した
   （2026-08-30）。 */
.ce-pw__chip-en {
  font-size: calc(10.5px * var(--ce-scale)); color: var(--ce-text-soft);
  line-height: 1.45;
}
.ce-pw__blurtext { letter-spacing: 0.1em; }

/* ---------- 段階のプログレスバー ----------
   状態を語（適用中／発効済み…）だけで出すと、立法の流れの中の位置が
   伝わらないため、段落の数だけ区切りを並べて「いま何段階目か」を示す。 */
.ce-pw__prog { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.ce-pw__prog-track { display: flex; gap: 2px; flex: 0 0 auto; }
.ce-pw__prog-seg {
  width: 13px; height: 4px; border-radius: 2px;
  background: var(--ce-line);
}
.ce-pw__prog-seg.is-done { background: var(--ce-primary-soft); }
.ce-pw__prog-seg.is-now  { background: var(--ce-primary); }
.ce-pw__prog-label {
  font-size: calc(10px * var(--ce-scale)); font-weight: 800; line-height: 1.5;
  color: var(--ce-text-soft); letter-spacing: 0.01em;
}
.ce-pw__prog--live .ce-pw__prog-label { color: var(--ce-primary); }
.ce-pw__prog--live .ce-pw__prog-seg.is-now { background: var(--ce-primary); }
.ce-pw__prog--next .ce-pw__prog-seg.is-now { background: #e5a33a; }
.ce-pw__prog--next .ce-pw__prog-label { color: #8a5300; }
html[data-ce-theme="dark"] .ce-pw__prog--next .ce-pw__prog-label { color: #f0c478; }

/* バーの読み方。
   段階名を言葉で並べるだけではカード内のバーと結びつかなかったため、
   凡例の各項目に「その段階のときのバーの見た目」をそのまま出す。 */
.ce-pw__phases {
  margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--ce-line);
}
.ce-article__content p.ce-pw__phases-lead {
  margin: 0 0 10px; font-size: calc(12px * var(--ce-scale)); color: var(--ce-text-soft);
  line-height: 1.7;
}
.ce-pw .ce-pw__phases-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
}
.ce-pw .ce-pw__phase {
  margin: 0; padding: 0;
  display: flex; align-items: center; gap: 7px;
}
.ce-pw__phase-name {
  font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text); line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  /* 4つ横並びだと1項目あたりが狭くなるので2列にする */
  .ce-pw .ce-pw__phases-list { gap: 8px 18px; }
  .ce-pw .ce-pw__phase { flex: 0 0 calc( 50% - 9px ); }
}

/* 状態バッジ */
.ce-pw__badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: calc(10.5px * var(--ce-scale)); font-weight: 800; line-height: 1.7;
  border: 1px solid transparent;
}
.ce-pw__badge--live { background: var(--ce-primary); color: #fff; }
.ce-pw__badge--done { background: var(--ce-accent-soft); color: var(--ce-primary-dark); }
.ce-pw__badge--plan { background: transparent; color: var(--ce-text-soft); border-color: var(--ce-line); }
.ce-pw__badge--next { background: #fff4e0; color: #8a5300; }
.ce-pw__badge--dead { background: #f3f4f5; color: #6b7378; text-decoration: line-through; }
html[data-ce-theme="dark"] .ce-pw__badge--next { background: #3a2c14; color: #f0c478; }
html[data-ce-theme="dark"] .ce-pw__badge--dead { background: #24302f; color: #98a3a8; }

/* ---------- 会員登録の案内（ぼかしの下） ---------- */
.ce-pw__gate {
  margin-top: 18px; padding: 22px 24px;
  background: var(--ce-accent-soft); border: 1px solid var(--ce-line);
  border-left: 4px solid var(--ce-primary); border-radius: var(--ce-radius);
}
.ce-article__content p.ce-pw__gate-badge {
  margin: 0 0 8px; display: flex; align-items: center; gap: 6px;
  font-size: calc(12px * var(--ce-scale)); font-weight: 800; color: var(--ce-primary);
}
.ce-pw__gate-badge .ce-icon { width: 15px; height: 15px; fill: currentColor; }
.ce-article__content p.ce-pw__gate-lead {
  margin: 0 0 16px; font-size: calc(14px * var(--ce-scale)); line-height: 1.9; color: var(--ce-text);
}
.ce-article__content p.ce-pw__gate-btns { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ce-pw .ce-pw__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 26px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid var(--ce-primary); color: var(--ce-primary); background: transparent;
  font-size: calc(13.5px * var(--ce-scale)); font-weight: 700;
}
.ce-pw .ce-pw__btn--primary { background: var(--ce-primary); border-color: var(--ce-primary); color: #fff; }
@media (hover: hover) {
  .ce-pw .ce-pw__btn:hover { background: var(--ce-card); }
  .ce-pw .ce-pw__btn--primary:hover { background: var(--ce-primary-dark); border-color: var(--ce-primary-dark); color: #fff; }
}

/* ---------- 今後のスケジュール ---------- */
.ce-article__content ol.ce-pw__deadlines { margin: 0; padding: 0; list-style: none; }
.ce-pw__deadline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--ce-line);
}
.ce-pw__deadline-date {
  flex: 0 0 130px; font-size: calc(12.5px * var(--ce-scale)); font-weight: 800;
  color: var(--ce-ink); font-variant-numeric: tabular-nums;
}
.ce-pw .ce-pw__deadline-abbr,
.ce-pw .ce-pw__news-tag,
.ce-pw .ce-pw__tl-name button,
.ce-pw .ce-pw__dialog-rel button {
  appearance: none; cursor: pointer; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-bg);
  font-family: var(--ce-font); font-size: calc(11px * var(--ce-scale)); font-weight: 800;
  color: var(--ce-primary-dark); flex: none;
}
@media (hover: hover) {
  .ce-pw .ce-pw__deadline-abbr:hover,
  .ce-pw .ce-pw__news-tag:hover,
  .ce-pw .ce-pw__tl-name button:hover { border-color: var(--ce-primary); background: var(--ce-accent-soft); }
}
.ce-pw__deadline-body { flex: 1; min-width: 200px; }
.ce-pw__deadline-label { display: block; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.7; }
.ce-pw__deadline-note { display: block; font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft); }

/* ---------- タイムライン ---------- */
.ce-pw__tlwrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-pw__tl { display: table; min-width: 100%; }
.ce-pw__tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--ce-line); }
.ce-pw__tl-row:last-child { border-bottom: 0; }
.ce-pw__tl-row--head { position: sticky; top: 0; background: var(--ce-card); z-index: 2; }
.ce-pw__tl-name {
  flex: 0 0 152px; position: sticky; left: 0; z-index: 1;
  background: var(--ce-card); border-right: 1px solid var(--ce-line);
  padding: 8px 10px; display: flex; align-items: center;
}
/* 「欧州グリーンディール」のような長いラベルが列の外にはみ出していた。
   列幅を広げるだけでは文字サイズを上げたときに再発するので、
   ピル側にも上限を持たせて、あふれる分は省略記号にする。
   全名称は title 属性で出るうえ、押せばダイアログが開くので情報は失われない。 */
.ce-pw .ce-pw__tl-name button {
  max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ce-pw__tl-year, .ce-pw__tl-cell {
  flex: 0 0 52px; min-height: 38px; border-right: 1px solid var(--ce-line);
  display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap;
}
.ce-pw__tl-year {
  font-size: calc(10.5px * var(--ce-scale)); font-weight: 700; color: var(--ce-text-soft);
  writing-mode: vertical-rl; min-height: 54px; padding: 4px 0;
}
.ce-pw__tl-year.is-now, .ce-pw__tl-cell.is-now { background: var(--ce-accent-soft); }
.ce-pw__tl-year.is-now { color: var(--ce-primary-dark); }
.ce-pw__dot { display: inline-block; width: 11px; height: 11px; border-radius: 999px; flex: none; }
.ce-pw__dot--plan { background: transparent; border: 2px solid var(--ce-primary-soft); }
.ce-pw__dot--done { background: var(--ce-primary-soft); }
.ce-pw__dot--live { background: var(--ce-primary); }
.ce-pw__dot--next { background: #e5a33a; }
.ce-pw__dot--dead { background: #b9c0c4; }
.ce-article__content p.ce-pw__legend {
  margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft);
}
.ce-pw__legend-item { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- 新着一覧 ---------- */
/* EU版は <ul>、日本版は <ol>。ul.… と書くと日本版に当たらず、
   左に 40px の余白と番号が付いてしまう（2026-08-29 修正） */
.ce-article__content ul.ce-pw__news,
.ce-article__content ol.ce-pw__news { margin: 0; padding: 0; list-style: none; }
.ce-pw__newsitem {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--ce-line);
}
.ce-pw__news-date {
  flex: 0 0 118px; font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft);
  font-variant-numeric: tabular-nums;
}
.ce-pw__news-body { flex: 1; min-width: 220px; }
/*
 * 要素名で書かないこと。EU版は <p>、日本版は <a>/<span> で描いているため、
 * p.… と書くと日本版に当たらず、本文と同じ 16.5px で出てしまう（2026-08-29 修正）。
 * 本文リンクの色・字送りに負けないよう、クラス2つで詳細度を稼いでいる。
 */
.ce-article__content .ce-pw__news-title {
  display: block; margin: 0;
  font-size: calc(13.5px * var(--ce-scale)); font-weight: 700; line-height: 1.7;
}
.ce-article__content .ce-pw__news-note {
  display: block; margin: 3px 0 0;
  font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft); line-height: 1.8;
}

/* ---------- 詳細ダイアログ ---------- */
.ce-pw__dialog {
  width: min(680px, calc(100vw - 32px)); max-height: 86vh; overflow-y: auto;
  padding: 26px 28px 30px; border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius); background: var(--ce-card); color: var(--ce-text);
}
.ce-pw__dialog::backdrop { background: rgba(10, 25, 32, 0.55); }
.ce-pw__dialog-close-wrap { margin: 0; float: right; }
.ce-pw .ce-pw__dialog-close {
  appearance: none; cursor: pointer; background: none; border: 0;
  font-size: 26px; line-height: 1; color: var(--ce-text-soft); padding: 0 2px;
}
.ce-pw__dialog p.ce-pw__dialog-kicker {
  margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft);
}
.ce-pw__dialog .ce-pw__dialog-title {
  margin: 0 0 2px; padding: 0; border: 0;
  font-size: calc(20px * var(--ce-scale)); line-height: 1.5; color: var(--ce-ink);
}
.ce-pw__dialog p.ce-pw__dialog-en {
  margin: 0 0 14px; font-size: calc(12px * var(--ce-scale)); color: var(--ce-text-soft);
}
/* 政策名は長いものがあるため、狭い画面では折り返させる。
   flex: none のままだと「サーキュラーエコノミー行動計画」のようなラベルが
   ダイアログの幅をはみ出す。 */
.ce-pw__dialog p.ce-pw__dialog-rel {
  margin: 0 0 8px; font-size: calc(12px * var(--ce-scale)); color: var(--ce-text-soft);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ce-pw .ce-pw__dialog-rel button {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  white-space: normal; text-align: left; line-height: 1.6;
}
.ce-pw__dialog p.ce-pw__dialog-summary {
  margin: 0 0 12px; font-size: calc(14.5px * var(--ce-scale)); line-height: 1.9; font-weight: 700;
}
.ce-pw__dialog p.ce-pw__dialog-detail {
  margin: 0 0 18px; font-size: calc(13.5px * var(--ce-scale)); line-height: 1.95; color: var(--ce-text);
}
.ce-pw__dialog .ce-pw__dialog-h {
  margin: 20px 0 8px; padding: 0; border: 0;
  font-size: calc(13px * var(--ce-scale)); font-weight: 800; color: var(--ce-primary);
}
.ce-pw__dialog ul.ce-pw__dialog-points { margin: 0; padding-left: 1.2em; }
.ce-pw__dialog ul.ce-pw__dialog-points li {
  font-size: calc(13px * var(--ce-scale)); line-height: 1.85; margin-bottom: 4px;
}
/* 掲げている目標。ラベルと数値を2列で並べる。狭いときは縦に積む */
/* 全体像を図として落とすボタン（資料に貼るため・2026-08-30 ユーザー要望） */
.ce-pw__dl {
  margin: 20px 0 0; padding: 15px 17px 16px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
}
.ce-article__content p.ce-pw__dl-lead {
  margin: 0 0 10px; font-size: calc(12.5px * var(--ce-scale)); font-weight: 700;
  color: var(--ce-ink); line-height: 1.7;
}
.ce-article__content p.ce-pw__dl-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ce-pw a.ce-pw__dl-btn,
.ce-pw button.ce-pw__dl-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 36px; padding: 6px 16px; border-radius: 999px;
  border: 1px solid var(--ce-primary); background: var(--ce-primary); color: #fff;
  font-family: var(--ce-font); font-size: calc(12px * var(--ce-scale));
  font-weight: 700; line-height: 1.6; text-decoration: none;
  transition: background-color 0.15s var(--ce-ease), border-color 0.15s var(--ce-ease);
}
/* 要素名まで含めないと .ce-pw button.ce-pw__dl-btn に負ける */
.ce-pw button.ce-pw__dl-btn--sub,
.ce-pw a.ce-pw__dl-btn--sub { background: var(--ce-card); color: var(--ce-primary-dark); border-color: var(--ce-line); }
.ce-pw button.ce-pw__dl-btn[disabled] { opacity: 0.6; cursor: default; }
@media (hover: hover) {
  .ce-pw a.ce-pw__dl-btn:hover { background: var(--ce-primary-dark); border-color: var(--ce-primary-dark); }
  .ce-pw button.ce-pw__dl-btn--sub:hover { border-color: var(--ce-primary); background: var(--ce-accent-soft); }
}
.ce-article__content p.ce-pw__dl-note,
.ce-article__content p.ce-pw__dl-err {
  margin: 10px 0 0; font-size: calc(11px * var(--ce-scale)); font-weight: 500;
  color: var(--ce-text-soft); line-height: 1.8;
}
.ce-article__content p.ce-pw__dl-err { color: var(--ce-primary-dark); font-weight: 700; }
@media (max-width: 600px) { .ce-pw__dl { padding: 13px 14px 14px; } }

/*
 * 段階的に来る義務。年ごとに数値が変わるものを文章に混ぜると追えないため、
 * 日付を見出しにした時系列の箇条書きで出す（2026-08-30 ユーザー要望）。
 * 左に細い縦線を引いて、時間が流れていることを示す。
 */
.ce-pw__dialog ol.ce-pw__sched {
  margin: 0; padding: 0 0 0 15px; list-style: none;
  border-left: 1px solid var(--ce-line);
}
.ce-pw__dialog ol.ce-pw__sched > li { position: relative; margin: 0 0 14px; }
.ce-pw__dialog ol.ce-pw__sched > li:last-child { margin-bottom: 0; }
/* 節目の点 */
.ce-pw__dialog ol.ce-pw__sched > li::before {
  content: ''; position: absolute; left: -19px; top: 7px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--ce-card); border: 2px solid var(--ce-primary);
}
.ce-pw__sched-when {
  display: block; font-size: calc(12.5px * var(--ce-scale)); font-weight: 800;
  color: var(--ce-ink); line-height: 1.7; letter-spacing: 0.01em;
}
.ce-pw__dialog ul.ce-pw__sched-items {
  margin: 3px 0 0; padding: 0 0 0 1.1em; list-style: disc;
}
.ce-pw__dialog ul.ce-pw__sched-items li {
  font-size: calc(12.5px * var(--ce-scale)); line-height: 1.85; margin: 0;
}
.ce-pw__sched-note {
  display: block; margin-top: 3px;
  font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft); line-height: 1.75;
}
@media (max-width: 600px) {
  .ce-pw__dialog ol.ce-pw__sched { padding-left: 13px; }
  .ce-pw__dialog ol.ce-pw__sched > li::before { left: -17px; }
}

.ce-pw__dialog dl.ce-jpp__targets {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 152px) minmax(0, 1fr);
  gap: 0;
}
.ce-pw__dialog dl.ce-jpp__targets dt,
.ce-pw__dialog dl.ce-jpp__targets dd {
  margin: 0; padding: 8px 0; border-bottom: 1px solid var(--ce-line);
  font-size: calc(12.5px * var(--ce-scale)); line-height: 1.7; min-width: 0;
}
.ce-pw__dialog dl.ce-jpp__targets dt { font-weight: 700; padding-right: 10px; }
.ce-pw__dialog dl.ce-jpp__targets dd b { font-weight: 800; color: var(--ce-primary); }
.ce-pw__dialog dl.ce-jpp__targets dd span {
  display: block; color: var(--ce-text-soft); font-size: calc(11.5px * var(--ce-scale));
}
@media (max-width: 600px) {
  .ce-pw__dialog dl.ce-jpp__targets { grid-template-columns: minmax(0, 1fr); }
  .ce-pw__dialog dl.ce-jpp__targets dt { padding: 8px 0 0; border-bottom: 0; }
  .ce-pw__dialog dl.ce-jpp__targets dd { padding-top: 2px; }
}

.ce-pw__dialog ol.ce-pw__steps { margin: 0; padding: 0; list-style: none; }
.ce-pw__step {
  display: grid; grid-template-columns: 14px 118px 84px 1fr; gap: 4px 10px;
  align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--ce-line);
  font-size: calc(12.5px * var(--ce-scale));
}
.ce-pw__step.is-future { opacity: 0.72; }
.ce-pw__step .ce-pw__dot { margin-top: 4px; }
.ce-pw__step-date { font-weight: 800; color: var(--ce-ink); font-variant-numeric: tabular-nums; }
.ce-pw__step-kind { color: var(--ce-text-soft); }
.ce-pw__step-note { display: block; color: var(--ce-text-soft); font-size: calc(11.5px * var(--ce-scale)); }
.ce-pw__dialog ul.ce-pw__sources { margin: 0; padding-left: 1.2em; }
.ce-pw__dialog ul.ce-pw__sources li { font-size: calc(12.5px * var(--ce-scale)); line-height: 1.9; }
.ce-article__content p.ce-pw__disclaimer {
  margin: 34px 0 0; padding: 16px 18px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
  font-size: calc(11.5px * var(--ce-scale)); line-height: 1.9; color: var(--ce-text-soft);
}

@media (max-width: 600px) {
  .ce-pw__layer--mechanism { margin-left: 12px; }
  .ce-pw__deadline-date { flex-basis: 100%; }
  .ce-pw__news-date { flex-basis: 100%; }
  .ce-pw__dialog { padding: 22px 18px 26px; }

  /* 2列（丸・日付）にして、内容は日付の下に回す。
     grid-column を指定しないと、種別を display:none にした分だけ
     内容が繰り上がって14pxの1列目に入り、1文字ずつ改行される。 */
  .ce-pw__step { grid-template-columns: 14px 1fr; row-gap: 2px; }
  .ce-pw__step-kind { display: none; }
  .ce-pw__step-label { grid-column: 2 / -1; }
}

/* ==========================================================================
   日本のCE政策ウォッチャー（.ce-jpp__*）
   体系図・ダイアログ・バーは EU版と共通（.ce-pw__*）。ここは日本版固有の分だけ。
   ========================================================================== */

/* チップに出す起点の年。カードは層のなかでこの年の古い順に並ぶ。
   年・所管・バーはカードの下端に寄せる。正式名称の長さで位置がずれると
   年を横に読み比べられないため（チップは flex-direction: column） */
.ce-pw__chip-year {
  display: block; margin-top: auto; padding-top: 4px;
  font-size: calc(10.5px * var(--ce-scale)); line-height: 1.5;
  color: var(--ce-text-soft); letter-spacing: 0.01em;
}
.ce-pw__chip-year b {
  font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ce-text);
}
.ce-pw__chip-year span { font-weight: 600; }

/* チップに出す所管府省庁 */
.ce-jpp__min {
  font-size: calc(10px * var(--ce-scale)); color: var(--ce-primary-dark);
  line-height: 1.5; letter-spacing: 0.01em;
}

/* 府省庁で絞り込む。日本の分かりにくさの中心は縦割りなので軸として出す。
   以前は地の上に線だけの丸が並んでいて、操作できると気づかれなかった
   （2026-08-30 ユーザー指摘）。白い面として独立させ、押した結果を
   件数で返すようにした。上部に色の線は入れない（装飾に見えるため）。 */
.ce-jpp__filter {
  margin: 0 0 22px; padding: 13px 15px 12px;
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
}
.ce-jpp__filter-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 14px; flex-wrap: wrap; margin: 0 0 10px;
}
.ce-article__content p.ce-jpp__filter-label {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 800;
  color: var(--ce-ink); letter-spacing: 0.02em; line-height: 1.6;
}
/* じょうご。画像を持たせたくないので clip-path で作る */
.ce-jpp__filter-icon {
  flex: none; width: 11px; height: 11px; background: var(--ce-primary);
  clip-path: polygon(0 0, 100% 0, 61% 46%, 61% 100%, 39% 100%, 39% 46%);
}
.ce-article__content p.ce-jpp__filter-count {
  margin: 0; font-size: calc(11.5px * var(--ce-scale)); font-weight: 700;
  color: var(--ce-text-soft); line-height: 1.6; font-variant-numeric: tabular-nums;
}
.ce-jpp__filter-count[data-on] { color: var(--ce-primary-dark); }

.ce-jpp__chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ce-pw .ce-jpp__chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 5px 8px 5px 13px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-bg);
  font-family: var(--ce-font); font-size: calc(12px * var(--ce-scale));
  font-weight: 700; color: var(--ce-ink); line-height: 1.6;
  transition: border-color 0.15s var(--ce-ease), background-color 0.15s var(--ce-ease), color 0.15s var(--ce-ease);
}
.ce-pw .ce-jpp__chip[aria-pressed="true"] {
  background: var(--ce-primary); border-color: var(--ce-primary); color: #fff;
}
.ce-jpp__n {
  flex: none; min-width: 21px; padding: 1px 6px; border-radius: 999px;
  background: var(--ce-card); color: var(--ce-text-soft);
  font-size: calc(10.5px * var(--ce-scale)); font-weight: 800; line-height: 1.6;
  text-align: center; font-variant-numeric: tabular-nums;
}
.ce-pw .ce-jpp__chip[aria-pressed="true"] .ce-jpp__n {
  background: rgba(255, 255, 255, 0.24); color: #fff;
}

.ce-article__content p.ce-jpp__filter-help {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 14px; flex-wrap: wrap; margin: 11px 0 0;
}
.ce-jpp__filter-hint {
  font-size: calc(11px * var(--ce-scale)); font-weight: 500;
  color: var(--ce-text-soft); line-height: 1.75;
}
.ce-pw .ce-jpp__clear {
  appearance: none; cursor: pointer; flex: none;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-card);
  font-family: var(--ce-font); font-size: calc(11px * var(--ce-scale));
  font-weight: 700; color: var(--ce-primary-dark); line-height: 1.6;
  transition: border-color 0.15s var(--ce-ease), background-color 0.15s var(--ce-ease);
}
.ce-pw .ce-jpp__chip:focus-visible,
.ce-pw .ce-jpp__clear:focus-visible {
  outline: 2px solid var(--ce-primary); outline-offset: 2px;
}
@media (hover: hover) {
  .ce-pw .ce-jpp__chip:not([aria-pressed="true"]):hover {
    border-color: var(--ce-primary); background: var(--ce-accent-soft); color: var(--ce-primary-dark);
  }
  .ce-pw .ce-jpp__clear:hover { border-color: var(--ce-primary); background: var(--ce-accent-soft); }
}
@media (max-width: 600px) {
  .ce-jpp__filter { padding: 12px 13px 11px; }
  .ce-jpp__filter-head { margin-bottom: 9px; }
  .ce-article__content p.ce-jpp__filter-help { margin-top: 10px; }
}
/* 業種の絞り込みパネル。府省庁のパネルと縦に並ぶので、間を詰める */
.ce-jpp__filter--ind { margin-bottom: 10px; }

/*
 * 「全業種に共通」。業種を選んだときだけ出す。
 * 体系図の層の意味を壊さないよう、カードではなく名称のボタンだけにしている。
 */
.ce-pw__cross {
  margin: 18px 0 0; padding: 14px 16px 15px;
  background: var(--ce-card); border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
}
.ce-pw__cross[hidden] { display: none; }
.ce-article__content h3.ce-pw__cross-h {
  margin: 0 0 4px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: calc(13px * var(--ce-scale)); font-weight: 800; color: var(--ce-ink);
  letter-spacing: 0.01em; line-height: 1.6;
}
.ce-pw__cross-n {
  font-size: calc(11px * var(--ce-scale)); font-weight: 700;
  color: var(--ce-text-soft); font-variant-numeric: tabular-nums;
}
.ce-article__content p.ce-pw__cross-note {
  margin: 0 0 11px; font-size: calc(11px * var(--ce-scale)); font-weight: 500;
  color: var(--ce-text-soft); line-height: 1.75;
}
.ce-article__content ul.ce-pw__cross-list {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0; padding: 0; list-style: none;
}
.ce-article__content ul.ce-pw__cross-list li { margin: 0; }
.ce-pw .ce-pw__cross-item {
  appearance: none; display: inline-flex; align-items: center;
  min-height: 32px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-bg);
  font-family: var(--ce-font); font-size: calc(11.5px * var(--ce-scale));
  font-weight: 700; color: var(--ce-ink); line-height: 1.6; text-align: left;
  transition: border-color 0.15s var(--ce-ease), background-color 0.15s var(--ce-ease);
}
.ce-pw button.ce-pw__cross-item { cursor: pointer; }
.ce-pw button.ce-pw__cross-item:focus-visible { outline: 2px solid var(--ce-primary); outline-offset: 2px; }
@media (hover: hover) {
  .ce-pw button.ce-pw__cross-item:hover {
    border-color: var(--ce-primary); background: var(--ce-accent-soft); color: var(--ce-primary-dark);
  }
}
@media (max-width: 600px) {
  .ce-pw__cross { padding: 12px 13px 13px; }
}

.ce-article__content p.ce-jpp__empty {
  margin: 0 0 20px; padding: 14px 16px;
  background: var(--ce-card); border: 1px solid var(--ce-line); border-radius: var(--ce-radius);
  font-size: calc(12.5px * var(--ce-scale)); color: var(--ce-text-soft);
}

/* 年表。1970年から2028年まで59年あるため、EU版の年グリッドは使わず年代でまとめる。
   全部並べるとPCで約4,900px・スマホで約11,200pxになるため、年代ごとに
   折りたたむ（いまの年代だけ開く）。details なのでJSなしで動く。 */
.ce-jpp__era { margin: 0 0 18px; }
.ce-jpp__era-head {
  margin: 0 0 10px; padding: 0 0 6px;
  border-bottom: 2px solid var(--ce-line);
  font-size: calc(15px * var(--ce-scale)); font-weight: 800; color: var(--ce-ink);
  font-variant-numeric: tabular-nums;
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 8px;
}
.ce-jpp__era-head::-webkit-details-marker { display: none; }
/* 開閉の向きを三角で示す。marker を消しているので自前で描く */
.ce-jpp__era-head::before {
  content: ''; flex: none; width: 0; height: 0;
  border-left: 5px solid var(--ce-primary);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: translateY(-1px); transition: transform 0.15s var(--ce-ease);
}
.ce-jpp__era[open] > .ce-jpp__era-head::before { transform: rotate(90deg) translateX(-1px); }
@media (hover: hover) {
  .ce-jpp__era-head:hover { color: var(--ce-primary); }
}
.ce-jpp__era-n {
  margin-left: auto; font-size: calc(11px * var(--ce-scale)); font-weight: 600;
  color: var(--ce-text-soft);
}
/* 1年代の行が多いときの「残りを表示」 */
.ce-jpp__more { margin: 0; }
.ce-jpp__more > summary {
  cursor: pointer; list-style: none; padding: 9px 0 0;
  font-size: calc(12px * var(--ce-scale)); font-weight: 700; color: var(--ce-primary-dark);
}
.ce-jpp__more > summary::-webkit-details-marker { display: none; }
.ce-jpp__more > summary::before { content: '＋ '; }
.ce-jpp__more[open] > summary::before { content: '－ '; }
@media (hover: hover) {
  .ce-jpp__more > summary:hover { text-decoration: underline; }
}
.ce-pw ol.ce-jpp__chrono { list-style: none; margin: 0; padding: 0; }
/* 子要素は5つ（丸・日付・法令名・内容・種類バッジ）。列数を合わせないと
   あふれた子が2行目の1列目（14px）に落ち、文字が1つずつ縦に並ぶ。
   EU版のダイアログでも同じ失敗をしたので、列数と子の数は必ず揃える。 */
.ce-jpp__chrono-item {
  display: grid; grid-template-columns: 14px 152px auto 1fr auto; gap: 4px 10px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--ce-line);
  font-size: calc(12.5px * var(--ce-scale));
}
/* 法令名のボタンは内容の幅で置く（1fr に入れると横に伸びきってしまう）。
   同じ日に複数の法律が動く行はボタンが複数入るので、まとめ役の span で包む
   （子要素を5つに保つため。直接並べると列数がずれて崩れる） */
.ce-jpp__chrono-item > .ce-jpp__chrono-laws {
  justify-self: start; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%;
}
.ce-jpp__chrono-item:last-child { border-bottom: 0; }
.ce-jpp__chrono-item.is-future { opacity: 0.72; }
.ce-jpp__chrono-item .ce-pw__dot { margin-top: 5px; }
.ce-jpp__chrono-date {
  font-weight: 800; color: var(--ce-ink); font-variant-numeric: tabular-nums;
}
.ce-jpp__wareki {
  display: inline-block; margin-left: 5px;
  font-size: calc(10.5px * var(--ce-scale)); font-weight: 400; color: var(--ce-text-soft);
}
.ce-jpp__chrono-label { line-height: 1.7; }

/* 複数の法律が同じ日に動く行は、内容を上・法律のボタンを下の2段にする。
   1段だとボタンが幅を取って内容の列が細くなり、数文字ずつ折り返してしまう。
   自動配置に任せず、5つの子すべてに列と行を明示する（列数ずれの事故防止）。 */
@media (min-width: 601px) {
  .ce-jpp__chrono-item.is-multi { grid-template-columns: 14px 152px 1fr auto; }
  .ce-jpp__chrono-item.is-multi > .ce-pw__dot          { grid-column: 1; grid-row: 1; }
  .ce-jpp__chrono-item.is-multi > .ce-jpp__chrono-date { grid-column: 2; grid-row: 1; }
  .ce-jpp__chrono-item.is-multi > .ce-jpp__chrono-label{ grid-column: 3; grid-row: 1; }
  .ce-jpp__chrono-item.is-multi > .ce-pw__badge        { grid-column: 4; grid-row: 1; }
  .ce-jpp__chrono-item.is-multi > .ce-jpp__chrono-laws { grid-column: 3 / -1; grid-row: 2; }
}

@media (max-width: 600px) {
  /* 5列は入らないので、丸＋残りの2列にして順に下へ積む。
     grid-column を指定しないと内容が14pxの1列目に入り1文字ずつ改行される。 */
  .ce-jpp__chrono-item { grid-template-columns: 14px 1fr; row-gap: 3px; }
  .ce-jpp__chrono-item > .ce-jpp__chrono-date,
  .ce-jpp__chrono-item > .ce-jpp__chrono-label,
  .ce-jpp__chrono-item > .ce-pw__badge,
  .ce-jpp__chrono-item > .ce-jpp__chrono-laws {
    grid-column: 2 / -1; justify-self: start;
  }
}

/* ---------- 法体系図（経産省の図を起こしたもの） ----------
   個別物品の6法だけが上段に「対策の性格」「費用負担」を持ち、
   複数の法律にまたがる列がある。この対応関係が図の中心なので再現する。
   6列あるため狭い画面では横スクロールにする（模式図なので許容）。 */
.ce-jpp__chartwrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 12px; padding: 2px;
}
.ce-jpp__chart {
  display: grid; grid-template-columns: 132px 1fr;
  gap: 8px; align-items: stretch;
  min-width: 760px;   /* これ未満だと文字が潰れるため横スクロールに任せる */
}
.ce-jpp__chart.is-blurred { filter: blur(5px); pointer-events: none; user-select: none; }

/* 左の層ラベル */
.ce-jpp__chart-rail {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 10px 6px 0; text-align: right;
  font-size: calc(11px * var(--ce-scale)); font-weight: 800;
  color: var(--ce-text-soft); line-height: 1.5;
}

/* 右側のセル群。個別物品は6列、帯は1列 */
.ce-jpp__chart-cells {
  display: grid; grid-template-columns: repeat(var(--jpp-cols, 6), 1fr); gap: 6px;
}
.ce-jpp__chart-cells--bar { grid-template-columns: 1fr; }

/*
 * 対策の性格＋費用負担。
 *
 * ここは法律そのものではなく「下の列をどう括るか」の注記なので、箱にしない。
 * 以前は塗りつぶしの角丸カードだったが、法律の箱と同じ見た目のカードが
 * 3段重なって、意味の違いが伝わらなかった。
 * 下端の罫と両端の爪で「ここからここまで」を示す、図面の括りの形にする。
 */
.ce-jpp__aim {
  grid-column: span var(--span, 1);
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 2px 2px 9px;
}
.ce-jpp__aim::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  border: 1px solid var(--ce-line); border-top: 0;
}
.ce-jpp__aim-text {
  font-size: calc(10.5px * var(--ce-scale)); color: var(--ce-text-soft); line-height: 1.55;
}
.ce-jpp__burden {
  font-size: calc(11px * var(--ce-scale)); font-weight: 800;
  color: var(--ce-ink); line-height: 1.55;
}

/*
 * 法律の箱。
 *
 * 以前は上辺だけ3pxの色付き罫にして経産省所管を示していたが、12法のうち
 * 7法が該当するため区別として読めず、装飾に見えていた（2026-08-30 修正）。
 * 罫は1pxの一色だけにして、所管は文字で書く（.ce-jpp__lawmin）。
 */
.ce-jpp__lawbox,
.ce-jpp__bar {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 11px; border-radius: 3px;
  background: var(--ce-card); border: 1px solid var(--ce-line);
}
/* 所管府省庁。箱の下端に寄せて、法律名から離す。
   府省庁ごとに span を入れて nowrap にする。1つの文字列にすると
   容器包装（5省共管）で「農水」の途中で改行されてしまう */
.ce-jpp__lawmin {
  margin-top: auto; padding-top: 5px;
  font-size: calc(9.5px * var(--ce-scale)); font-weight: 700;
  color: var(--ce-text-soft); letter-spacing: 0.02em; line-height: 1.5;
}
.ce-jpp__lawmin > span { white-space: nowrap; }
/* 全幅の帯は1行に収まるので、法令番号と所管を横に並べる */
.ce-jpp__barmeta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ce-jpp__barmeta .ce-jpp__lawmin { margin-top: 0; padding-top: 0; }
.ce-pw .ce-jpp__lawname {
  appearance: none; background: none; border: 0; padding: 0; text-align: left;
  font-family: var(--ce-font); font-size: calc(12.5px * var(--ce-scale));
  font-weight: 800; color: var(--ce-ink); line-height: 1.5; cursor: pointer;
}
.ce-pw button.ce-jpp__lawname { color: var(--ce-primary-dark); }
@media (hover: hover) {
  .ce-pw button.ce-jpp__lawname:hover { text-decoration: underline; }
}
.ce-jpp__lawdate {
  font-size: calc(10px * var(--ce-scale)); color: var(--ce-text-soft);
  font-variant-numeric: tabular-nums; line-height: 1.5;
}
.ce-jpp__lawtarget {
  font-size: calc(10px * var(--ce-scale)); color: var(--ce-text-soft);
  line-height: 1.5; padding-top: 3px; border-top: 1px dashed var(--ce-line);
}
.ce-article__content p.ce-jpp__legend {
  margin: 0 0 26px;
  font-size: calc(10.5px * var(--ce-scale)); line-height: 1.8; color: var(--ce-text-soft);
}

/* ---------- ツールページ下部の動線（inc/tools-nav.php） ----------
   ツールを見終わった人が行き止まりになっていたため下に付けた
   （2026-08-30 ユーザー要望）。
   本文の外（.ce-container 直下）に出るので、.ce-article__content の
   セレクタは効かない。カード内の文字だけ自分で指定する。 */
.ce-toolnext {
  margin: 38px 0 8px; padding-top: 26px;
  border-top: 1px solid var(--ce-line);
}
.ce-toolnext__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap;
}
.ce-toolnext .ce-toolnext__h {
  margin: 0; padding: 0; border: 0;
  font-size: calc(17px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  color: var(--ce-ink); letter-spacing: 0.01em;
}
.ce-toolnext__all {
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  color: var(--ce-primary-dark); text-decoration: none; white-space: nowrap;
}
.ce-toolnext__all span { margin-left: 4px; }
@media (hover: hover) {
  .ce-toolnext__all:hover { text-decoration: underline; }
}
.ce-toolnext__note {
  margin: 6px 0 0;
  font-size: calc(11.5px * var(--ce-scale)); line-height: 1.7; color: var(--ce-text-soft);
}
.ce-toolnext .ce-grid { margin-top: 18px; }
/* 一覧（/tools/）のカードより小さめにする。ここは「次に行く先」を示すだけで、
   説明を読ませる場所ではないため */
.ce-toolnext .ce-card__title {
  margin: 0; font-size: calc(14.5px * var(--ce-scale)); font-weight: 700; line-height: 1.6;
}
.ce-toolnext .ce-card__title a { color: var(--ce-ink); text-decoration: none; }
@media (hover: hover) {
  .ce-toolnext .ce-card__title a:hover { color: var(--ce-primary-dark); }
}
.ce-toolnext .ce-card__desc {
  margin: 7px 0 0;
  font-size: calc(12.5px * var(--ce-scale)); line-height: 1.75; color: var(--ce-text-soft);
}
@media (max-width: 600px) {
  .ce-toolnext { margin-top: 30px; padding-top: 22px; }
  .ce-toolnext .ce-grid { gap: 14px; }
}

/* ---------- 会員構成の横棒（inc/cps-members.php） ----------
   サーキュラーパートナーズの会員構成。詳細パネルの中に出る。

   色を情報に使っていない。棒はすべて --ce-primary の1色で、長さだけが量を表す。
   分類ごとに色を振ると14色を見分ける話になり、色覚特性や白黒印刷で崩れる。
   「大きいほど濃く」も量を長さと濃さで二重に表すので採らない。
   #0289c9 はライト面 #ffffff・ダーク面 #16222b の双方で 3:1 以上（実測）。

   中身は本物の <table>。棒はセルの背景として重ねているだけなので、CSSが
   効かない環境でも表として読める。 */
.ce-pw__dialog .ce-cps { margin: 0 0 18px; }
.ce-cps__lead { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ce-cps .ce-cps__big {
  font-size: calc(30px * var(--ce-scale)); font-weight: 800; line-height: 1.2;
  color: var(--ce-primary-dark); font-variant-numeric: tabular-nums;
}
.ce-cps__unit { font-size: calc(13px * var(--ce-scale)); font-weight: 700; color: var(--ce-ink); }
.ce-cps__asof { font-size: calc(11.5px * var(--ce-scale)); color: var(--ce-text-soft); }
.ce-pw__dialog p.ce-cps__grew {
  margin: 2px 0 0; font-size: calc(12px * var(--ce-scale)); line-height: 1.7; color: var(--ce-text-soft);
}
.ce-cps .ce-cps__h {
  margin: 20px 0 6px; padding: 0; border: 0;
  font-size: calc(13px * var(--ce-scale)); font-weight: 700; line-height: 1.5; color: var(--ce-ink);
}
.ce-pw__dialog p.ce-cps__note,
.ce-pw__dialog p.ce-cps__src {
  margin: 6px 0 0; font-size: calc(11px * var(--ce-scale)); line-height: 1.7; color: var(--ce-text-soft);
}
.ce-pw__dialog p.ce-cps__src { margin-top: 14px; }

/* 表。読み上げ用に thead を持たせるが、画面では棒と数字で足りるので隠す
   （display:none ではなく位置で飛ばす。読み上げからも消えてしまうため） */
table.ce-cps__bars {
  width: 100%; border-collapse: collapse; margin: 0; table-layout: fixed;
}
.ce-cps__caption,
table.ce-cps__bars thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
table.ce-cps__bars th,
table.ce-cps__bars td {
  padding: 5px 0; border: 0; border-top: 1px solid var(--ce-line);
  vertical-align: middle; text-align: left;
}
table.ce-cps__bars tbody tr:first-child th,
table.ce-cps__bars tbody tr:first-child td { border-top: 0; }
table.ce-cps__bars tbody th {
  width: 52%; padding-right: 10px;
  font-size: calc(11.5px * var(--ce-scale)); font-weight: 400; line-height: 1.5;
  color: var(--ce-text); word-break: break-word;
}
.ce-cps__n {
  width: 3.6em; padding-right: 8px !important; text-align: right !important;
  font-size: calc(11.5px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  color: var(--ce-ink); font-variant-numeric: tabular-nums;
}
.ce-cps__bar-cell { position: relative; }
.ce-cps__bar {
  display: block; height: 9px; border-radius: 0 4px 4px 0;
  background: var(--ce-primary); min-width: 2px;
}
.ce-cps__pct {
  display: block; margin-top: 2px;
  font-size: calc(10px * var(--ce-scale)); line-height: 1.4;
  color: var(--ce-text-soft); font-variant-numeric: tabular-nums;
}

/* 製造業の内訳。表の外に置く（行のあいだに挟むと、次の行が製造業の内訳に
   見えてしまう。2026-08-30 に実際そう見えたので出した）。既定は閉じた状態 */
.ce-cps__subwrap { margin: 4px 0 0; }
details.ce-cps__sub { margin: 2px 0 6px; }
details.ce-cps__sub > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: calc(11px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  color: var(--ce-primary-dark);
}
details.ce-cps__sub > summary::-webkit-details-marker { display: none; }
details.ce-cps__sub > summary::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s var(--ce-ease);
}
details.ce-cps__sub[open] > summary::before { transform: rotate(90deg); }
table.ce-cps__bars--sub {
  margin: 6px 0 4px; padding-left: 12px;
  border-left: 2px solid var(--ce-line);
}
table.ce-cps__bars--sub tbody th { width: 56%; padding-left: 8px; }

/* ダークモードの文字色。--ce-primary-dark（#026a9c）はダーク面 #16222b に対して
   2.73:1 しかなく、大きい数字（3:1必要）も内訳リンク（4.5:1必要）も足りない。
   テーマは --ce-primary 系をダークで再定義していないため、ここで当てる。
   実測: primary #0289c9 = 4.18:1（大はOK・小はNG）／primary-soft #5cc0ec = 7.86:1 */
html[data-ce-theme="dark"] .ce-cps .ce-cps__big { color: var(--ce-primary-soft); }
html[data-ce-theme="dark"] details.ce-cps__sub > summary { color: var(--ce-primary-soft); }
html[data-ce-theme="dark"] .ce-pw__dialog .ce-cps__src a { color: var(--ce-primary-soft); }

/* 幅が狭いと分類名と棒が同じ行に収まらないので、上下に積む */
@media (max-width: 560px) {
  table.ce-cps__bars,
  table.ce-cps__bars thead,
  table.ce-cps__bars tbody,
  table.ce-cps__bars tr,
  table.ce-cps__bars th,
  table.ce-cps__bars td { display: block; width: auto; }
  table.ce-cps__bars thead { position: absolute; }
  table.ce-cps__bars tbody tr {
    padding: 7px 0; border-top: 1px solid var(--ce-line);
  }
  table.ce-cps__bars tbody tr:first-child { border-top: 0; }
  table.ce-cps__bars tbody th { width: auto; padding: 0 0 3px; }
  table.ce-cps__bars tbody td { padding: 0; border-top: 0; }
  .ce-cps__n {
    width: auto; padding-right: 0 !important; text-align: left !important;
    display: inline-block; margin-right: 8px;
  }
  /* 棒と割合を同じ行に置く。上下に積むと1行が4段（名前／件数／棒／割合）に
     なって縦に長くなるため、割合は右端に寄せる（2026-08-30） */
  .ce-cps__bar-cell { display: block; padding-right: 3.6em !important; }
  .ce-cps__pct {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    margin: 0; text-align: right;
  }
  .ce-cps__subwrap { display: block; }
}

/* ==========================================================================
   サーキュラーエコノミー用語集（inc/glossary.php）
   一覧は500語近くあるため、行ごとの節・行から飛ぶ導線・絞り込みを付ける。
   各用語ページはタイトルが見えていなかったので、見える見出しと戻り導線を出す。
   ========================================================================== */
.ce-gloss__head {
  max-width: 980px; margin: 0 auto 22px;
}
.ce-gloss__crumb {
  margin: 0 0 8px; font-size: calc(12.5px * var(--ce-scale)); line-height: 1.5;
}
.ce-gloss__crumb a { color: var(--ce-text-soft); text-decoration: none; }
.ce-gloss__crumb a:hover { color: var(--ce-primary); text-decoration: underline; }
.ce-gloss__title {
  margin: 0; color: var(--ce-ink); font-weight: 700; line-height: 1.35;
  font-size: var(--ce-fs-title-post);
}
.ce-gloss__sub {
  margin: 8px 0 0; color: var(--ce-text-soft);
  font-size: calc(11.5px * var(--ce-scale)); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* --- 一覧ページ --- */
.ce-gloss__lead p:last-child { margin-bottom: 0; }
.ce-gloss__tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 22px 0 14px;
}
.ce-gloss__searchwrap { flex: 1 1 260px; min-width: 0; }
.ce-article__content input.ce-gloss__search {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; border: 1px solid var(--ce-line); border-radius: 999px;
  background: var(--ce-bg); color: var(--ce-text);
  font-family: var(--ce-font); font-size: calc(14.5px * var(--ce-scale));
}
.ce-article__content input.ce-gloss__search:focus {
  outline: 2px solid var(--ce-primary); outline-offset: 1px;
  border-color: var(--ce-primary);
}
.ce-article__content p.ce-gloss__count {
  flex: none; margin: 0; color: var(--ce-text-soft);
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 700;
}

.ce-gloss__jump {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 0 18px; border-bottom: 1px solid var(--ce-line);
}
.ce-article__content a.ce-gloss__jumplink {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-bg);
  color: var(--ce-text); text-decoration: none;
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 700; line-height: 1.4;
}
.ce-article__content a.ce-gloss__jumplink:hover {
  border-color: var(--ce-primary); color: var(--ce-primary);
  background: var(--ce-accent-soft);
}

/* 行の見出し。本文の h2 は左に4pxの縦線が付く作りなので、それをそのまま使う。
   下線も引くと縦線と直角につながらず、崩れて見えた（2026-08-30 ユーザー指摘）。 */
.ce-gloss__sec { margin-top: 34px; }
.ce-article__content h2.ce-gloss__row {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0 0 10px; padding: 0 0 0 12px;
  border-bottom: 0;
  font-size: calc(17px * var(--ce-scale)); line-height: 1.5;
}
.ce-gloss__rowcount {
  flex: none; color: var(--ce-text-soft);
  font-size: calc(11px * var(--ce-scale)); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ce-article__content ul.ce-gloss__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 4px 10px; margin: 0; padding: 0; list-style: none;
}
.ce-article__content ul.ce-gloss__list > li { margin: 0; padding: 0; list-style: none; }
.ce-article__content a.ce-gloss__link {
  display: block; padding: 9px 12px; border-radius: 8px;
  border: 1px solid transparent; color: var(--ce-primary); text-decoration: none;
  font-size: calc(14.5px * var(--ce-scale)); line-height: 1.55;
}
.ce-article__content a.ce-gloss__link:hover,
.ce-article__content a.ce-gloss__link:focus-visible {
  background: var(--ce-accent-soft); border-color: color-mix(in srgb, var(--ce-primary) 30%, transparent);
  text-decoration: underline;
}
.ce-article__content p.ce-gloss__empty {
  margin: 28px 0 0; padding: 22px; border: 1px dashed var(--ce-line);
  border-radius: var(--ce-radius); text-align: center; color: var(--ce-text-soft);
}

/* --- 各用語ページの下部: ほかの用語への動線 ---
   一覧へ戻るリンク1本だと、用語から用語へ移るのに2回の遷移が要る。
   索引の全語を小さく並べて1回で移れるようにする（2026-08-30 ユーザー要望）。
   ツールページ下部の .ce-toolnext と同じ枠組み（本文カードの外・上に区切り線）。 */
.ce-gloss__more {
  max-width: 980px; margin: 30px auto 8px; padding-top: 26px;
  border-top: 1px solid var(--ce-line);
}
.ce-gloss__more-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 18px; flex-wrap: wrap;
}
.ce-gloss__more-h {
  margin: 0; padding: 0; border: 0;
  font-size: calc(17px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  color: var(--ce-ink); letter-spacing: 0.01em;
}
.ce-gloss__more-all {
  font-size: calc(12.5px * var(--ce-scale)); font-weight: 700; line-height: 1.5;
  color: var(--ce-primary-dark); text-decoration: none; white-space: nowrap;
}
.ce-gloss__more-all span { margin-left: 4px; }
@media (hover: hover) {
  .ce-gloss__more-all:hover { text-decoration: underline; }
}
.ce-gloss__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.ce-gloss__chipwrap { margin: 0; padding: 0; list-style: none; min-width: 0; }
.ce-gloss__chip {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--ce-line); background: var(--ce-card);
  color: var(--ce-text); text-decoration: none;
  font-size: calc(12.5px * var(--ce-scale)); line-height: 1.6;
}
@media (hover: hover) {
  .ce-gloss__chip:hover {
    border-color: var(--ce-primary); color: var(--ce-primary-dark);
    background: var(--ce-accent-soft);
  }
}
.ce-gloss__chip--here {
  border-color: var(--ce-primary); background: var(--ce-primary);
  color: #fff; font-weight: 700;
}

/* ダークでは --ce-primary が本文カード（#16222b）に対して 4.18:1 と足りないため、
   語のリンクだけ --ce-primary-soft（7.87:1）にする（2026-08-30 実測） */
html[data-ce-theme="dark"] .ce-article__content a.ce-gloss__link { color: var(--ce-primary-soft); }
html[data-ce-theme="dark"] .ce-article__content a.ce-gloss__jumplink:hover,
html[data-ce-theme="dark"] .ce-gloss__crumb a:hover,
html[data-ce-theme="dark"] .ce-gloss__more-all,
html[data-ce-theme="dark"] .ce-gloss__chip:hover { color: var(--ce-primary-soft); }
/* いま見ている語の印。ダークの --ce-primary（#0289c9）に白文字は 4.0:1 で
   足りないため、面を薄く塗って文字を明るい青にする */
html[data-ce-theme="dark"] .ce-gloss__chip--here {
  background: var(--ce-accent-soft); color: var(--ce-primary-soft);
  border-color: var(--ce-primary-soft);
}

@media (max-width: 600px) {
  .ce-gloss__head { margin-bottom: 16px; }
  .ce-gloss__title { font-size: calc(24px * var(--ce-scale)); }
  .ce-gloss__tools { margin: 18px 0 12px; }
  .ce-article__content ul.ce-gloss__list { gap: 2px; }
  .ce-article__content a.ce-gloss__link { padding: 10px 10px; }
  .ce-gloss__more { margin-top: 24px; padding-top: 22px; }
  /* スマホでは1列に近くなり、107語をそのまま並べると3,200pxほど縦に伸びる。
     枠の中でスクロールさせて、ページの末尾が長くなりすぎないようにする
     （2026-08-30 実測）。overscroll-behavior は既定のままにして、
     下端まで来たらページのスクロールに続くようにしている */
  .ce-gloss__chips {
    gap: 5px; max-height: 60vh; overflow-y: auto;
    margin-top: 14px; padding: 12px; border: 1px solid var(--ce-line);
    border-radius: var(--ce-radius); background: var(--ce-card);
    -webkit-overflow-scrolling: touch;
  }
  .ce-gloss__chip { padding: 5px 10px; }
}