/**
 * DHme UI/UX 改善 CSS
 * 270.css（Simple Custom CSS and JS）の後に読み込まれ、オーバーライドする
 *
 * -------------------------------------------------------------------
 * バージョン: ?v=5.1（functions.php の enqueue 側で連動）
 *             v をバンプしないと本番でブラウザキャッシュが効いて反映されない
 * -------------------------------------------------------------------
 *
 * 主要セクション目次（`#N` 番号付きで `============` 区切り）:
 *   #10  コントラスト改善（WCAG AA）
 *        スティッキーフッター
 *   ...  各ページ・コンポーネントの上書きルール
 *   #49  /forum/ + /talkroom/ + #bbpress-forums tomosnote 風スタイル
 *   #52  上記の最終再構築版（v3.0）
 *   #53  bbPress 既定ページのオーバーライド（content-{single,archive}-forum.php 連動）
 *   #54  アンカージャンプ時の scroll-margin-top
 *   #55  X 風 返信先引用ボックス
 *   #56  ツリー線（v5.0 で撤去、セクションコメントのみ残置）
 *   #57  bbPress フォーム GUI 統一
 *
 * 死蔵候補:
 *   - .pd-body / .pd-meta / .reply-body / .reply-hd / .preview-grid / .worry-check
 *     → v9 で `.dhme-thread-*` に置換済。 詳細は DHmeDebug/code-audit-report-2026-05-15.md を参照
 *   - .dhme-mypage-* / .contact-method-* / .forum-card-pinned 等
 *     → 270.css 側の死蔵。本ファイルにはないが、レポート参照。
 */

/* ============================================================
   #10 コントラスト改善 — WCAG AA (4.5:1) 達成
   #999 → #6B6B6B（白#FFF上で5.04:1、#FAFAFA上で4.74:1）
   ============================================================ */
:root {
  --clr-muted: #6B6B6B;
}

/* ============================================================
   スティッキーフッター — コンテンツが短い場合もフッターを最下部に配置
   ============================================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ============================================================
   #11 ボタン視認性向上
   ============================================================ */
.btn-outline {
  color: var(--clr-primary-dark);
  border: 2.5px solid var(--clr-primary-dark);
}
.btn-outline:hover {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}
.hero-actions .btn-outline:hover {
  background: var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
}

/* ============================================================
   #15 ページ遷移ローディングバー
   ============================================================ */
#dhme-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-dark));
  z-index: 99999;
  pointer-events: none;
  transition: none;
}
#dhme-loading-bar.is-loading {
  animation: dhme-load-bar 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes dhme-load-bar {
  0%   { width: 0; opacity: 1; }
  20%  { width: 30%; }
  50%  { width: 60%; }
  80%  { width: 85%; }
  100% { width: 95%; opacity: 1; }
}

/* ============================================================
   .dhme-page-content 内ボタン色修正
   270.css の .dhme-page-content a { color: var(--clr-primary) } が
   .btn-primary の白文字を上書きしてしまう問題を修正
   ============================================================ */
.dhme-page-content a.btn-primary {
  color: #fff;
}
.dhme-page-content a.btn-primary:hover {
  color: #fff;
}
.dhme-page-content a.btn-outline {
  color: var(--clr-primary-dark);
}

/* ============================================================
   FAB重複対策（保険）— 271.js は 2026-05-10 監査で無効化済み。
   sayu さんが admin で 271 エントリを Trash すれば本ルールも不要。
   それまでの保険として残す。
   ============================================================ */
a.fab {
  display: none !important;
}

/* ============================================================
   カテゴリ選択モーダル（FAB用）
   ============================================================ */
.dhme-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
}
.dhme-modal-overlay.is-open {
  display: flex;
}
.dhme-modal {
  background: #fff;
  border-radius: var(--radius-xl);
  width: min(420px, 90vw);
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform .25s;
  overflow: hidden;
}
.dhme-modal-overlay.is-open .dhme-modal {
  transform: translateY(0);
}
.dhme-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--clr-border);
}
.dhme-modal-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--clr-bg);
  cursor: pointer;
  font-size: 15px;
  color: var(--clr-text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.dhme-modal-close:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
}
.dhme-modal-body {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dhme-modal-cat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background .15s;
}
.dhme-modal-cat-item:hover {
  background: var(--clr-primary-pale);
}

/* ============================================================
   UM 登録・ログインフォーム デザイン改善
   ============================================================ */
/* auth-card 内の UM フォームはカード化不要（親がカード） */
.auth-card .um-register.um,
.auth-card .um-login.um {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: none;
}
/* auth-card 外の UM フォームはカード化 */
.um-register.um,
.um-login.um {
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  margin: 0 auto;
}
/* auth-card 内ではUMのボタン行を非表示（テンプレート側にログインリンクあり） */
.auth-card .um .um-col-alt .um-right {
  display: none;
}
/* フィールド間の余白 */
.um .um-row .um-col-1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.um .um-field {
  margin-bottom: 14px;
}
/* ラベル */
.um .um-field-label {
  margin-bottom: 6px;
}
.um .um-field-label label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
}
/* 入力フィールド */
.um .um-form-field {
  padding: 11px 14px !important;
  font-size: 14px !important;
  border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.um .um-form-field:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 4px rgba(192,120,152,.1) !important;
  outline: none !important;
}
/* セレクトボックス */
.um .select2-container .select2-selection--single {
  height: 44px !important;
  border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
}
.um .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding-left: 14px !important;
  font-size: 14px !important;
}
.um .select2-container .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
}
/* 送信ボタン */
.um .um-col-alt .um-left input.um-button {
  width: 100%;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: var(--radius-lg) !important;
  background: var(--clr-primary) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(192,120,152,.35) !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.um .um-col-alt .um-left input.um-button:hover {
  background: var(--clr-primary-dark) !important;
  transform: translateY(-1px) !important;
}
/* ログインリンク */
.um .um-col-alt .um-right a.um-button.um-alt {
  width: 100%;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-lg) !important;
  background: #fff !important;
  border: 2.5px solid var(--clr-primary-dark) !important;
  color: var(--clr-primary-dark) !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: block !important;
}
.um .um-col-alt .um-right a.um-button.um-alt:hover {
  background: var(--clr-primary) !important;
  color: #fff !important;
  border-color: var(--clr-primary) !important;
}
/* ボタン行のレイアウト */
.um .um-col-alt {
  margin-top: 10px;
}
.um .um-col-alt .um-left,
.um .um-col-alt .um-right {
  width: 100% !important;
  float: none !important;
  margin-bottom: 10px;
}
/* テキストエリア */
.um textarea.um-form-field {
  min-height: 80px !important;
  resize: vertical !important;
}
/* スパムフィールド非表示（UM標準） */
.um p.um_request_name {
  display: none !important;
}
/* 年代・勤務状況を横2列 */
.dhme-um-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .dhme-um-two-col {
    grid-template-columns: 1fr;
  }
}
/* セクション区切り見出し（JSで挿入） */
.dhme-um-sec-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 24px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dhme-um-sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--clr-border);
}
.um .um-field:first-child .dhme-um-sec-label {
  margin-top: 0;
}
/* レスポンシブ */
@media (max-width: 767px) {
  .um-register.um,
  .um-login.um {
    padding: 24px 18px;
    border-radius: var(--radius-md);
  }
}

/* ============================================================
   会員一覧ページ（page-members.php）
   270.css のスタイルが適用されない場合の保険
   ============================================================ */
.members-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media(min-width:640px)  { .members-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width:1024px) { .members-grid { grid-template-columns: repeat(4, 1fr); } }
.member-card {
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  transition: all .2s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.member-card:hover {
  border-color: var(--clr-primary-light);
  box-shadow: 0 2px 12px rgba(192,120,152,.12);
  transform: translateY(-2px);
}
.member-card-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.member-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-accent-light));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: var(--clr-primary);
  border: 2px solid var(--clr-border);
}
.member-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--clr-text);
}
.member-meta {
  font-size: 11px;
  color: var(--clr-muted);
  margin-top: 2px;
  line-height: 1.5;
}
.member-desc {
  font-size: 11px;
  color: var(--clr-text-mid);
  margin-top: 4px;
  line-height: 1.6;
}
.member-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--clr-muted);
  margin-top: 8px;
}

/* ============================================================
   フッター可読性改善
   270.css ではハードコード #999 等が使われているためオーバーライド
   ============================================================ */
.dhme-footer {
  font-size: 14px;
}
.dhme-footer-tagline {
  font-size: 13px;
}
.dhme-footer-nav-title {
  font-size: 12px;
}
.dhme-footer-links a {
  font-size: 13px;
  color: #aaa;              /* 暗背景 #1E1E1E 上で約 5.3:1 */
}
.dhme-footer-links a:hover {
  color: #fff;
}
.dhme-footer-copy {
  font-size: 12px;
  color: #888;              /* 暗背景上で約 4.6:1 */
}

/* ============================================================
   #17 検索フォーム
   ============================================================ */
.dhme-search-bar {
  display: flex;
  gap: 8px;
  padding: 0 20px 12px;
  max-width: 1200px;
  margin: 0 auto;
}
.dhme-search-bar .fi {
  flex: 1;
}

/* ============================================================
   #9 モバイルフォントサイズ底上げ
   #12 投稿カード密度削減（モバイル）
   ============================================================ */
@media (max-width: 767px) {

  /* --- #9 本文系 → 15px --- */
  /* DEAD? 2026-05-15: .pd-body / .reply-body は v9 で .dhme-thread-card-body に置換済。
     参照ゼロのため次回削除候補（grep 検出。code-audit-report-2026-05-15.md 参照）。 */
  .pd-body,
  .reply-body,
  .dhme-page-content,
  .dhme-article-body,
  .static-wrap p,
  .static-wrap li        { font-size: 15px; }

  /* --- #9 副文系 → 14px --- */
  .post-ex,
  .sec-desc,
  .notice,
  .forum-desc,
  .trust-desc,
  .step-d,
  .auth-sub,
  .chk-lbl               { font-size: 14px; }

  /* --- #9 タイトル系 --- */
  .post-t                { font-size: 16px; }
  .forum-name            { font-size: 16px; }

  /* --- #9 メタデータ系 → 12px 最低保証 --- */
  /* DEAD? 2026-05-15: .reply-hd / .pd-meta は v9 で .dhme-thread-card-meta に置換済。
     参照ゼロのため次回削除候補（grep 検出。code-audit-report-2026-05-15.md 参照）。 */
  .post-ft,
  .eng-item,
  .reply-hd,
  .pd-meta,
  .breadcrumb,
  .like-cnt,
  .forum-stats,
  .member-meta,
  .member-desc,
  .member-stats,
  .input-hint,
  .cat-cnt               { font-size: 12px; }

  /* --- #9 バッジ・ラベル → 11px 最低保証 --- */
  .badge,
  .stat-lbl,
  .eyebrow               { font-size: 11px; }

  /* --- #12 投稿カード密度削減 --- */
  .post-card             { padding: 14px; }
  .post-ex               { display: none; }
  .pmeta                 { margin-bottom: 4px; }
  .post-ft               { gap: 8px; flex-wrap: wrap; }
}

/* ============================================================
   LP改訂（2026-04-19）
   ヒーローOPENバッジ / 悩み / 橋渡し / プレビュー / 運営者メッセージ
   ============================================================ */

/* --- ヒーローバッジ: OPEN訴求版 --- */
.hero-badge.hero-badge--open {
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-primary) 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(192,120,152,.28);
  border: none;
}

/* --- 悩みセクション --- */
.sec-worry {
  background: linear-gradient(180deg, #fff 0%, var(--clr-primary-pale) 100%);
}
.sec-worry .sec-title {
  font-size: 28px;
  line-height: 1.5;
}
.worry-list {
  list-style: none;
  padding: 0;
  margin: 32px auto 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.worry-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  line-height: 1.7;
  font-size: 15px;
  color: var(--clr-text);
  box-shadow: var(--shadow-xs);
  transition: all .2s;
}
.worry-item:hover {
  border-color: var(--clr-primary-light);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
/* DEAD? 2026-05-15: 本クラスは PHP/JS から参照されていない（grep ヒットゼロ）。
   旧 FV「お悩み溜まり場」の残骸の可能性。次回 sayu さんと相談の上、削除候補。 */
.worry-check {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--clr-primary);
  font-weight: 900;
  margin-top: 1px;
}
.worry-text strong {
  color: var(--clr-primary-dark);
  font-weight: 800;
}
.worry-close {
  text-align: center;
  margin-top: 36px;
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.8;
}

/* --- 橋渡し：お悩み溜まり場 --- */
.sec-bridge {
  background: var(--clr-primary-pale);
  padding-top: 40px;
  padding-bottom: 60px;
}
.bridge-box {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--clr-primary-light);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.bridge-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 16px;
}
.bridge-lead {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 20px;
}
.bridge-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.bridge-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-text);
}
.bridge-mark {
  color: var(--clr-primary);
  font-weight: 900;
  flex-shrink: 0;
}
.bridge-quote {
  font-size: 16px;
  line-height: 1.9;
  color: var(--clr-text-mid);
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px dashed var(--clr-primary-light);
}
.bridge-quote strong {
  color: var(--clr-primary);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .02em;
}

/* --- トークルームプレビュー --- */
.sec-preview .sec-title {
  font-size: 26px;
  line-height: 1.5;
}
/* DEAD? 2026-05-15: 本クラスは PHP/JS から参照されていない（grep ヒットゼロ）。
   旧トークルームプレビューの残骸の可能性。次回 sayu さんと相談の上、削除候補。 */
.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .preview-grid { grid-template-columns: repeat(3, 1fr); }
}
.preview-card {
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-xs);
  transition: all .2s;
  position: relative;
}
.preview-card:hover {
  border-color: var(--clr-primary-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.preview-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.preview-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  border-radius: var(--radius-xs);
  font-weight: 700;
  font-size: 11px;
}
/* サンプル投稿である旨を明示するバッジ（ダミーと誤認されない表示） */
.preview-badge--sample {
  background: #fff6dc;
  color: #9a6b00;
  border: 1px solid #f1d27a;
  letter-spacing: .02em;
}
.preview-card--sample {
  background: linear-gradient(180deg, #fffdf6 0%, #ffffff 60%);
  border-style: dashed;
}
.preview-ymd {
  color: var(--clr-muted);
  font-size: 12px;
}
.preview-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--clr-text);
  font-weight: 500;
  flex: 1;
}
.preview-stats {
  font-size: 12px;
  color: var(--clr-muted);
  font-weight: 600;
  border-top: 1px dashed var(--clr-border);
  padding-top: 10px;
}

/* --- プレビューカルーセル（自動横流しアニメ） --- */
.preview-carousel {
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  /* カード幅と間隔、1周の速度はここで調整 */
  --preview-card-w: 300px;
  --preview-gap: 20px;
  --preview-count: 6;
  --preview-duration: 60s;
}
.preview-track {
  display: flex;
  gap: var(--preview-gap);
  width: max-content;
  will-change: transform;
  animation: preview-scroll var(--preview-duration) linear infinite;
}
.preview-carousel:hover .preview-track,
.preview-carousel:focus-within .preview-track {
  animation-play-state: paused;
}
@keyframes preview-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * (var(--preview-card-w) + var(--preview-gap)) * var(--preview-count)), 0, 0); }
}
.preview-carousel .preview-card {
  flex: 0 0 var(--preview-card-w);
  width: var(--preview-card-w);
  box-sizing: border-box;
}
/* 端のフェードで「まだ続きがある」感を演出 */
.preview-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.preview-edge--left {
  left: 0;
  background: linear-gradient(90deg, var(--clr-bg-soft) 0%, rgba(255,249,251,0) 100%);
}
.preview-edge--right {
  right: 0;
  background: linear-gradient(-90deg, var(--clr-bg-soft) 0%, rgba(255,249,251,0) 100%);
}

/* モバイル：自動アニメ停止＋手動スワイプ（scroll-snap） */
@media (max-width: 767px) {
  .preview-carousel {
    --preview-card-w: 82vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 0 12px;
  }
  .preview-carousel::-webkit-scrollbar { display: none; }
  .preview-track {
    animation: none;
    padding: 0 16px;
  }
  /* 複製カードはモバイルでは非表示（同じ内容が12枚流れるのを防ぐ） */
  .preview-track > [aria-hidden="true"] {
    display: none;
  }
  .preview-carousel .preview-card {
    scroll-snap-align: center;
    max-width: 320px;
  }
  .preview-edge { display: none; }
}

/* アニメ低減設定を尊重：自動スクロール停止＋手動操作にフォールバック */
@media (prefers-reduced-motion: reduce) {
  .preview-track {
    animation: none;
    padding: 0 4px;
  }
  .preview-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .preview-track > [aria-hidden="true"] {
    display: none;
  }
  .preview-carousel .preview-card {
    scroll-snap-align: start;
  }
}
.preview-cta {
  text-align: center;
  margin-top: 36px;
}
.preview-cta-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text-mid);
  margin: 0 0 14px;
}

/* --- 運営者sayuさんメッセージカード --- */
.sec-founder {
  background: #fff;
}
.founder-card {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--clr-primary-pale) 0%, #fff 100%);
  border: 2px solid var(--clr-primary-light);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
  .founder-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 22px;
  }
}
.founder-avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-accent-light));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
}
.founder-content {
  flex: 1;
}
.founder-content .eyebrow {
  margin: 0 0 6px;
}
.founder-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--clr-text);
  margin: 0 0 20px;
}
.founder-body p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--clr-text);
  margin: 0 0 14px;
}
.founder-body p:last-child {
  margin-bottom: 0;
}
.founder-body strong {
  color: var(--clr-primary-dark);
  font-weight: 800;
}
.founder-sig {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--clr-primary-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--clr-text-mid);
  font-weight: 600;
}
@media (max-width: 640px) {
  .founder-sig {
    justify-content: center;
  }
}
.founder-insta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid var(--clr-primary-light);
  border-radius: var(--radius-lg);
  color: var(--clr-primary-dark) !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all .2s;
}
.founder-insta:hover {
  background: var(--clr-primary);
  color: #fff !important;
  border-color: var(--clr-primary);
}

/* =========================================================
   2026-04-19 追加：LP書籍のインサイトに基づくブラッシュアップ
   - 悩み項目にテーマ絵文字（視覚×文字のセット訴求）
   - 3つの安心にプルーフ行
   - 参加の流れに所要時間メタ
   - ヒーロー/CTA直下の安心マイクロコピー
   - FAQアコーディオン
   ========================================================= */

/* --- 悩みリスト：テーマ絵文字アイコン --- */
.worry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  background: var(--clr-primary-pale);
}

/* --- 3つの安心：プルーフ行 --- */
.trust-proof {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--clr-border);
  font-size: 12px;
  color: var(--clr-primary-dark);
  line-height: 1.6;
  letter-spacing: .02em;
}

/* --- 参加の流れ：ステップのメタ情報（所要時間） --- */
.step-meta {
  margin-top: 8px;
}
.step-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--clr-primary-pale);
  color: var(--clr-primary-dark);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* --- CTAブロック・マイクロコピー --- */
.cta-block {
  text-align: center;
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cta-micro,
.hero-micro {
  margin: 0;
  font-size: 12px;
  color: var(--clr-muted, #8a7a80);
  letter-spacing: .02em;
}
.hero-micro {
  margin-top: 12px;
}

/* --- FAQアコーディオン --- */
.sec-faq .faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #fff;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item[open] {
  border-color: var(--clr-primary-light);
  box-shadow: 0 2px 10px rgba(192,120,152,.08);
}
.faq-q {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 52px 16px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #2a1a20;
  cursor: pointer;
  list-style: none;
  line-height: 1.55;
  letter-spacing: .01em;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '＋';
  position: absolute;
  right: 18px;
  top: 18px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary-pale);
  color: var(--clr-primary-dark);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  transition: transform .2s, background .2s;
}
.faq-item[open] .faq-q::after {
  content: '−';
  background: var(--clr-primary);
  color: #fff;
}
.faq-q-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}
.faq-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0;
  margin-top: 1px;
}
.faq-mark--a {
  background: var(--clr-accent, var(--clr-primary-light));
  color: var(--clr-primary-dark);
}
/* 答え（アコーディオン展開時のみ表示） */
.faq-a {
  display: none;
}
.faq-item[open] .faq-a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 22px 22px;
  border-top: 1px dashed var(--clr-border);
  background: #fffafb;
  animation: faq-open .25s ease-out;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-a-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #3f2d33;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* 日本語の禁則処理を強化（対応ブラウザのみ） */
  line-break: strict;
}
.faq-a-body p {
  margin: 0;
}
.faq-a-body p + p {
  margin-top: 12px;
}
.faq-a-body strong {
  color: var(--clr-primary-dark);
  background: linear-gradient(transparent 70%, var(--clr-primary-pale) 70%);
  padding: 0 2px;
}
.faq-a-body a {
  color: var(--clr-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-a-body .faq-note {
  font-size: 12.5px;
  color: var(--clr-muted, #8a7a80);
  line-height: 1.7;
}
/* モバイルだけ改行するヘルパー */
.br-sp { display: none; }
@media (max-width: 520px) {
  .br-sp { display: inline; }
}

/* ============================================================
   マイページ 設定・プライバシータブの UM アカウントフォーム
   ─────────────────────────────────────────────
   症状: 初回表示は accordion（縦並びセクション）だが、リロードすると
        サイドバー＋右カラムの 2 カラムレイアウトに化ける。
   原因: UM の um_responsive()（um-responsive.js）が .um コンテナ幅を
        window.load で測定して uimob500 / 800 など動的クラスを付与する。
        キャッシュの有無で計測値が揺らぎ、ある回は uimob500 が付き
        accordion、別の回は付かず sidebar になる。
   対処: 設定タブ配下の UM アカウント表示は常に accordion レイアウトに
        固定。uimob 系クラスの状態に依存せず、sidebar と top-meta の
        表示可否を強制する。
   ============================================================ */
[data-tab-panel="settings"] .um .um-account-side {
  display: none !important;
}
[data-tab-panel="settings"] .um .um-account-nav {
  display: block !important;
}
[data-tab-panel="settings"] .um .um-account-meta {
  display: block !important;
  text-align: center;
  margin-bottom: 20px;
}
/* UM の uimob800 スコープ CSS で .um-account-meta img が width:100% に
   されるため、アバターがコンテナ幅いっぱいに引き伸ばされる。
   明示的にサイズと丸め形を指定して打ち消す。 */
[data-tab-panel="settings"] .um .um-account-meta-img {
  display: inline-block !important;
  width: auto !important;
}
[data-tab-panel="settings"] .um .um-account-meta img {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: inline-block !important;
}
/* .um-account-heading（タブ本文の見出し）は uimob340/500 配下でだけ
   非表示にされる設計だが、アコーディオン強制時は uimob800 になることが
   あるため、常に非表示にして .um-account-nav（トグル）のラベルだけを残す。 */
[data-tab-panel="settings"] .um .um-account-main .um-account-heading {
  display: none !important;
}
/* 表示名と「プロフィールを表示」リンクはマイページ上部（プロフィール
   ヘッダー）で既に表示されているため、設定タブ内では冗長。
   アバター画像だけ残して、名前ブロックは丸ごと非表示にする。 */
[data-tab-panel="settings"] .um .um-account-name {
  display: none !important;
}
[data-tab-panel="settings"] .um .um-account-main {
  float: none !important;
  width: 100% !important;
  max-width: none !important; /* UM の uimob800 で max-width:450px が付くのを打ち消す */
  padding: 0 !important;
  box-sizing: border-box;
}
/* タブ本文（.um-account-tab 内）の列コンテナも横幅を使い切らせる。
   UM デフォルトは .um-col-1 { width: 100% } だが、uimob800 スコープで
   幅が縮むケースがあるため念のため強制。 */
[data-tab-panel="settings"] .um .um-account-tab,
[data-tab-panel="settings"] .um .um-account-tab .um-col-1,
[data-tab-panel="settings"] .um .um-account-tab .um-row {
  width: 100% !important;
  max-width: none !important;
}
[data-tab-panel="settings"] .um-clear {
  clear: both;
}

/* ============================================================
   マイページ プロフィールヘッダー（上部の会員情報）
   ─────────────────────────────────────────────
   症状: ~396px 以下の狭幅で「編集」ボタンがニックネームに被り
        "coconala_adm" のように末尾が切れる。
   原因: avatar(80) + gap(20) + info(flex:1, min-width:0) +
        gap(20) + 編集ボタン(~70) の横並び。viewport が狭くなると
        info 領域が縮みきり、nowrap の nickname が overflow して
        編集ボタンの下に潜り込む。
   対処: 狭幅時は 編集 ボタンをヘッダー右上に absolute 配置し、
        メインの横並びから外す。これで info 領域が avatar 以外の
        残り全幅を使えるようになる。
   ============================================================ */
@media (max-width: 520px) {
  .dhme-profile-header {
    position: relative;
    gap: 14px !important;
    padding-top: 36px !important; /* 絶対配置した編集ボタンの分を確保 */
  }
  .dhme-profile-edit-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .dhme-profile-header > img {
    width: 64px !important;
    height: 64px !important;
  }
}

/* ============================================================
   プロフィールヘッダー — 統計カードの縦積み（<390px）
   問題: 390px 未満だと「投稿」「いいね獲得」「ベスト回答」の
         3枚が横並びで収まりきらず、flex-wrap で改行されて
         バラついた見た目になる。
   対処: 3枚を縦に積み、各行は「数字 ラベル」の横並びにして
         視線の移動を短くする。
   ============================================================ */
@media (max-width: 389px) {
  .dhme-profile-stats {
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .dhme-profile-stat {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 10px !important;
    text-align: left !important;
  }
  .dhme-profile-stat > div:first-child {
    font-size: 16px !important;
    min-width: 20px;
  }
  .dhme-profile-stat > div:last-child {
    font-size: 11px !important;
  }
}

/* --- モバイル最適化 --- */
@media (max-width: 767px) {
  .sec-worry .sec-title { font-size: 22px; }
  .sec-preview .sec-title { font-size: 22px; }
  .sec-faq .sec-title { font-size: 22px; }
  .worry-item { font-size: 14px; padding: 14px 16px; }
  .worry-icon { width: 28px; height: 28px; font-size: 18px; margin-right: 8px; }
  .bridge-box { padding: 32px 22px; }
  .bridge-icon { font-size: 42px; }
  .bridge-quote { font-size: 15px; }
  .bridge-quote strong { font-size: 17px; }
  .founder-title { font-size: 20px; }
  .founder-body p { font-size: 14px; }
  .trust-proof { font-size: 11.5px; }
  .step-time { font-size: 11px; padding: 2px 8px; }
  .faq-q { font-size: 14px; padding: 14px 44px 14px 14px; gap: 10px; }
  .faq-q::after { right: 14px; top: 14px; width: 22px; height: 22px; font-size: 13px; }
  .faq-item[open] .faq-a { padding: 14px 14px 18px 14px; gap: 10px; }
  .faq-a-body { font-size: 13.5px; line-height: 1.85; }
  .faq-a-body p + p { margin-top: 10px; }
  .faq-a-body .faq-note { font-size: 11.5px; }
  .faq-mark { width: 22px; height: 22px; font-size: 10.5px; }
  .hero-micro, .cta-micro { font-size: 11px; }
}

/* ============================================================
   #48 (MTG 2026-05-10) ヘッダーのログイン／登録ボタンをモバイルでも表示
   270.css は @media (max-width:767px) で .dhme-hdr-actions を display:none
   していたため、モバイル時はハンバーガー内にしか導線が無かった。
   sayu さんとの MTG で「ハンバーガーに閉じ込めず明示する」方針が確定したので、
   モバイルでもコンパクトに表示し直す。
   ============================================================ */
@media (max-width: 767px) {
  /* 親側のフッター宣言 (270.css L641: !important) を打ち消す */
  .dhme-hdr-actions {
    display: flex !important;
    gap: 6px;
    align-items: center;
    margin-left: auto;
    /* ハンバーガーとの間隔 */
    margin-right: 4px;
  }
  /* モバイル用にボタンサイズを 1 段詰める（はみ出し防止） */
  .dhme-hdr-actions .dhme-btn-ghost,
  .dhme-hdr-actions .dhme-btn-primary-sm {
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 9999px;
    line-height: 1;
  }
  /* ロゴ名を少しだけ詰めて 3 つのコンポーネント（ロゴ・CTA・ハンバーガー）を 1 行に収める */
  .dhme-header-logo .site-name {
    font-size: 18px;
  }
}
/* 画面 380px 未満（iPhone SE 1st）ではログインを非表示にして登録のみ残す（タップ可視性優先）。
   ネスト @media は古い Safari/Chrome で効かないため、トップレベルにフラット化している。 */
@media (max-width: 379px) {
  .dhme-hdr-actions .dhme-btn-ghost { display: none !important; }
}

/* デスクトップでもログイン状態でロゴアウト単独だと寂しいので、わずかにマージン調整 */
.dhme-hdr-actions .dhme-btn-ghost,
.dhme-hdr-actions .dhme-btn-primary-sm {
  letter-spacing: 0.02em;
}

/* ============================================================
   #52 (2026-05-10 sayu さんフィードバック) フォーラムデザインを
   tomosnote.com を参考に DHme カラーで再構築。
   配色は DHme ブランドピンク（var(--clr-primary) 系）を保持し、
   レイアウトは tomosnote のカード型・アバター強調・余白広めの
   トーンに寄せる。
   - /forum/        → スレッド一覧（カスタム post-card）
   - /talkroom/     → コミュニティカード（forum-card）
   - /forums/...    → bbPress 既定テンプレート（#bbpress-forums）
   ============================================================ */

/* ----------------------------------------------------------------
   共通：DHme フォーラム系ページのページ枠
   ---------------------------------------------------------------- */
body.page-forum main,
body.page-talkroom main,
.bbpress main,
body.bbpress main {
  background: linear-gradient(180deg, var(--clr-primary-pale, #FFF6F1) 0%, #fff 220px);
}

/* breadcrumb（共通） */
.dhme-breadcrumb,
.bbp-breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 16px 4px;
  font-size: 12px;
  color: #6B6B6B;
}
.dhme-breadcrumb a,
.bbp-breadcrumb a {
  color: var(--clr-primary-dark);
  text-decoration: none;
}
.dhme-breadcrumb a:hover,
.bbp-breadcrumb a:hover {
  text-decoration: underline;
}
.dhme-breadcrumb .sep,
.bbp-breadcrumb .sep {
  margin: 0 6px;
  color: #c7b8b3;
}

/* ----------------------------------------------------------------
   /forum/ — スレッド一覧（DHme カスタム page-forum.php）
   ---------------------------------------------------------------- */

body.page-forum .pl-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px 80px;
}

body.page-forum .filter-bar {
  padding: 18px 0 14px;
  scroll-padding: 0;
  gap: 8px;
}
body.page-forum .filter-bar .chip {
  border-radius: 9999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--clr-primary-light);
  background: #fff;
  color: var(--clr-primary-dark);
  flex-shrink: 0;
  transition: all 0.15s;
}
body.page-forum .filter-bar .chip:hover:not(.on) {
  background: var(--clr-primary-pale);
  border-color: var(--clr-primary);
}
body.page-forum .filter-bar .chip.on {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(192, 120, 152, 0.25);
}

/* 検索バー */
body.page-forum .dhme-search-bar {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 6px 0 14px !important;
}
body.page-forum .dhme-search-bar .fi {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 16px;
  border: 1.5px solid #ECE3E0;
  border-radius: 9999px;
  font-size: 13.5px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.page-forum .dhme-search-bar .fi:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(192, 120, 152, 0.15);
}
body.page-forum .dhme-search-bar .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 件数 + ソート行 */
body.page-forum .pl-list > div:first-child {
  padding: 0 4px 6px;
  font-size: 12.5px;
}

/* スレッドカード — tomosnote スタイル */
body.page-forum .pl-list .post-card {
  display: block;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1.5px solid #ECE3E0;
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  margin-bottom: 14px;
  text-decoration: none;
}
body.page-forum .pl-list .post-card:hover {
  border-color: var(--clr-primary-light);
  box-shadow: 0 8px 20px rgba(192, 120, 152, 0.08);
  transform: translateY(-2px);
}

/* バッジ行（カテゴリ + NEW） */
body.page-forum .pl-list .post-card .pmeta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
body.page-forum .pl-list .post-card .badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  letter-spacing: 0.04em;
}
body.page-forum .pl-list .post-card .badge-p {
  background: var(--clr-primary-pale);
  color: var(--clr-primary-dark);
  border: 1px solid var(--clr-primary-light);
}
body.page-forum .pl-list .post-card .badge-n {
  background: #fff7e0;
  color: #b78300;
  border: 1px solid #f0d68a;
}

/* タイトル — 大きめで視認性高く */
body.page-forum .pl-list .post-card .post-t {
  font-size: 17px;
  line-height: 1.55;
  font-weight: 800;
  color: #2c1f24;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-forum .pl-list .post-card:hover .post-t {
  color: var(--clr-primary-dark);
}

/* 抜粋 */
body.page-forum .pl-list .post-card .post-ex {
  font-size: 13px;
  color: #5a4d52;
  line-height: 1.75;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* メタ行（投稿者 + 時間 + 💬❤️） */
body.page-forum .pl-list .post-card .post-ft {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #6B6B6B;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #F5EDE9;
}
body.page-forum .pl-list .post-card .ava {
  width: 32px;
  height: 32px;
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-primary-dark);
  background: linear-gradient(135deg, var(--clr-primary-pale, #FFF1EC), var(--clr-primary-light, #FFD9CC));
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(192, 120, 152, 0.2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.page-forum .pl-list .post-card .post-ft > span:first-of-type {
  font-weight: 700;
  color: #3a2e34;
}
body.page-forum .pl-list .post-card .engagement {
  margin-left: auto;
  display: flex;
  gap: 14px;
}
body.page-forum .pl-list .post-card .engagement .eng-item {
  font-size: 12px;
  font-weight: 700;
  color: #6B6B6B;
}

/* サイドバー */
body.page-forum .pl-side .s-card {
  background: #fff;
  border: 1.5px solid #ECE3E0;
  border-radius: 16px;
  padding: 22px 22px;
  margin-bottom: 16px;
}
body.page-forum .pl-side .s-title {
  font-size: 13px;
  font-weight: 800;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--clr-primary-light);
  color: var(--clr-primary-dark);
  letter-spacing: 0.04em;
}

/* 「投稿がありません」状態 */
body.page-forum .pl-list .dhme-empty {
  background: #fff;
  border: 2px dashed var(--clr-primary-light);
  border-radius: 16px;
  padding: 56px 16px !important;
  color: #6B6B6B !important;
  text-align: center;
  font-size: 14px !important;
}

/* スマホ調整 */
@media (max-width: 480px) {
  body.page-forum .pl-wrap { padding: 4px 12px 70px; }
  body.page-forum .pl-list .post-card { padding: 18px 18px; border-radius: 14px; }
  body.page-forum .pl-list .post-card .post-t { font-size: 15.5px; }
  body.page-forum .pl-list .post-card .post-ex { font-size: 12.5px; line-height: 1.7; }
  body.page-forum .pl-list .post-card .post-ft { gap: 8px; font-size: 11.5px; }
  body.page-forum .pl-list .post-card .ava { width: 28px; height: 28px; font-size: 12px; }
  body.page-forum .pl-list .post-card .engagement { gap: 10px; }
  body.page-forum .filter-bar .chip { padding: 8px 14px; font-size: 12.5px; }
}

/* ----------------------------------------------------------------
   /talkroom/ — コミュニティ（フォーラム）カード
   ---------------------------------------------------------------- */

body.page-talkroom .forum-grid {
  gap: 16px;
}
body.page-talkroom .forum-card {
  background: #fff;
  border: 1.5px solid #ECE3E0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(192, 120, 152, 0.04);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
body.page-talkroom .forum-card:hover {
  border-color: var(--clr-primary-light);
  box-shadow: 0 8px 22px rgba(192, 120, 152, 0.10);
  transform: translateY(-2px);
}
body.page-talkroom .forum-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 28px;
  flex-shrink: 0;
}
body.page-talkroom .forum-name {
  font-size: 16px;
  font-weight: 800;
  color: #2c1f24;
  margin: 0 0 6px;
  line-height: 1.45;
}
body.page-talkroom .forum-desc {
  font-size: 13px;
  color: #5a4d52;
  line-height: 1.7;
  margin: 0 0 12px;
}
body.page-talkroom .forum-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #6B6B6B;
  font-weight: 600;
}
body.page-talkroom .forum-new {
  background: var(--clr-primary);
  color: #fff;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 9999px;
  margin-left: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (max-width: 480px) {
  body.page-talkroom .forum-card { padding: 18px; gap: 12px; }
  body.page-talkroom .forum-ico { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  body.page-talkroom .forum-name { font-size: 15px; }
  body.page-talkroom .forum-desc { font-size: 12.5px; line-height: 1.65; }
}

/* ----------------------------------------------------------------
   bbPress 既定（/forums/, /forums/{slug}/, /topic/...）
   ---------------------------------------------------------------- */

#bbpress-forums.bbpress-wrapper,
#bbpress-forums {
  font-size: 14px;
  color: #2c1f24;
  margin: 16px auto 80px;
  max-width: 1100px;
  padding: 0 16px;
}

/* ヘッダー行 */
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
  background: var(--clr-primary-pale);
  color: var(--clr-primary-dark);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  border: 1.5px solid var(--clr-primary-light);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}
#bbpress-forums li.bbp-footer {
  border-top: 1px solid var(--clr-primary-light);
  border-bottom: 1.5px solid var(--clr-primary-light);
  border-radius: 0 0 16px 16px;
  margin-top: -1px;
}

/* リスト */
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies {
  border: 1.5px solid #ECE3E0;
  border-radius: 0 0 16px 16px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 28px;
}

/* 各行 */
#bbpress-forums li.bbp-body {
  padding: 18px 20px;
  border-bottom: 1px solid #F5EDE9;
  transition: background 0.15s;
}
#bbpress-forums li.bbp-body:last-child {
  border-bottom: none;
}
#bbpress-forums li.bbp-body:hover {
  background: var(--clr-primary-pale);
}

/* タイトル */
#bbpress-forums li.bbp-forum-info,
#bbpress-forums li.bbp-topic-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}
#bbpress-forums li.bbp-forum-info a,
#bbpress-forums li.bbp-topic-title a,
#bbpress-forums .bbp-topic-permalink {
  color: #2c1f24;
  text-decoration: none;
  transition: color 0.15s;
}
#bbpress-forums li.bbp-forum-info a:hover,
#bbpress-forums li.bbp-topic-title a:hover,
#bbpress-forums .bbp-topic-permalink:hover {
  color: var(--clr-primary);
}

/* 説明 / メタ */
#bbpress-forums .bbp-forum-content,
#bbpress-forums p.bbp-topic-meta {
  font-size: 12.5px;
  color: #6B6B6B;
  line-height: 1.7;
  margin-top: 6px;
}
#bbpress-forums li.bbp-forum-freshness,
#bbpress-forums li.bbp-topic-freshness,
#bbpress-forums li.bbp-forum-topic-count,
#bbpress-forums li.bbp-forum-reply-count,
#bbpress-forums li.bbp-topic-voice-count,
#bbpress-forums li.bbp-topic-reply-count {
  font-size: 12px;
  color: #6B6B6B;
}

/* 入力 */
#bbpress-forums input[type="text"],
#bbpress-forums input[type="email"],
#bbpress-forums input[type="search"],
#bbpress-forums textarea {
  border: 1.5px solid #ECE3E0;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#bbpress-forums input[type="text"]:focus,
#bbpress-forums input[type="email"]:focus,
#bbpress-forums input[type="search"]:focus,
#bbpress-forums textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(192, 120, 152, 0.15);
}

/* ボタン — 2026-05-10 修正: カルーセル矢印 (.dhme-comm-members-arrow) を除外して
   投稿系ボタンのみに適用（矢印が全面ピンクで読めなくなる問題の修正） */
#bbpress-forums button:not(.dhme-comm-members-arrow),
#bbpress-forums input[type="submit"],
#bbpress-forums input[type="button"] {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(192, 120, 152, 0.25);
}
#bbpress-forums button:not(.dhme-comm-members-arrow):hover,
#bbpress-forums input[type="submit"]:hover,
#bbpress-forums input[type="button"]:hover {
  background: var(--clr-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(192, 120, 152, 0.35);
}

/* 投稿フォーム */
#bbpress-forums #new-topic-0,
#bbpress-forums #new-reply-0,
#bbpress-forums div.bbp-the-content-wrapper {
  background: #fff;
  border: 1.5px solid #ECE3E0;
  border-radius: 16px;
  padding: 22px;
  margin-top: 24px;
}

/* 単独 reply / topic */
#bbpress-forums div.bbp-reply-author,
#bbpress-forums div.bbp-topic-author {
  background: var(--clr-primary-pale);
  padding: 14px;
  border-radius: 12px;
  font-size: 12px;
  text-align: center;
}
#bbpress-forums div.bbp-reply-author a img.avatar,
#bbpress-forums div.bbp-topic-author a img.avatar {
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(192, 120, 152, 0.2);
}
#bbpress-forums div.bbp-reply-content,
#bbpress-forums div.bbp-topic-content {
  background: #fff;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid #F5EDE9;
  line-height: 1.85;
  color: #2c1f24;
  font-size: 14px;
}
#bbpress-forums div.bbp-reply-content p,
#bbpress-forums div.bbp-topic-content p {
  margin: 0 0 10px;
}
#bbpress-forums div.bbp-reply-content p:last-child,
#bbpress-forums div.bbp-topic-content p:last-child {
  margin-bottom: 0;
}

/* ページネーション — ピル型 */
body.page-forum .bbp-pagination,
body.page-forum .pagination,
body.page-forum .page-numbers,
#bbpress-forums .bbp-pagination,
#bbpress-forums .page-numbers {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 28px auto 0;
  justify-content: center;
}
body.page-forum .bbp-pagination a,
body.page-forum .bbp-pagination span,
body.page-forum .page-numbers a,
body.page-forum .page-numbers span,
#bbpress-forums .bbp-pagination a,
#bbpress-forums .bbp-pagination span,
#bbpress-forums .page-numbers a,
#bbpress-forums .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid #ECE3E0;
  border-radius: 9999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #2c1f24;
  text-decoration: none;
  transition: all 0.15s;
}
body.page-forum .page-numbers:hover,
body.page-forum .bbp-pagination a:hover,
#bbpress-forums .page-numbers:hover,
#bbpress-forums .bbp-pagination a:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary-dark);
}
body.page-forum .page-numbers.current,
body.page-forum .bbp-pagination .current,
#bbpress-forums .page-numbers.current,
#bbpress-forums .bbp-pagination .current {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
  box-shadow: 0 4px 12px rgba(192, 120, 152, 0.25);
}

/* スマホ */
@media (max-width: 480px) {
  #bbpress-forums {
    font-size: 13.5px;
    padding: 0 12px;
  }
  #bbpress-forums li.bbp-header,
  #bbpress-forums li.bbp-footer {
    font-size: 11.5px;
    padding: 10px 14px;
  }
  #bbpress-forums li.bbp-body {
    padding: 14px 14px;
  }
  #bbpress-forums li.bbp-forum-info,
  #bbpress-forums li.bbp-topic-title {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------------
   single-topic.php（DHme カスタム単独トピック）— tomosnote 風レイアウト
   sayu さんスクショ参考: https://www.tomosnote.com/communities/45/threads/83/comments
   ---------------------------------------------------------------- */

body.single-topic main {
  background: #fff;
}

/* 1. コミュニティ名ヘッダ */
.dhme-thread-head {
  border-bottom: 2px solid var(--clr-primary);
  margin-bottom: 28px;
}
.dhme-thread-head-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dhme-thread-head-icon {
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dhme-thread-head-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.dhme-thread-head-title:hover {
  color: var(--clr-primary);
}

/* ページコンテナ */
.dhme-thread-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

/* パンくず — 控えめに */
.dhme-thread-page > .dhme-breadcrumb {
  padding: 0 4px 14px;
  font-size: 11.5px;
}

/* 2. 中央寄せタイトル */
.dhme-thread-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #2c1f24;
  margin: 12px 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  line-height: 1.4;
}
.dhme-thread-title-icon {
  font-size: 26px;
  color: var(--clr-primary);
}

/* 3. 「スレッドについて」カラウト */
.dhme-thread-about {
  background: var(--clr-primary-pale);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 32px;
}
.dhme-thread-about-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  margin-bottom: 8px;
}
.dhme-thread-about-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  font-family: serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dhme-thread-about-body {
  font-size: 13px;
  color: #5a4d52;
  line-height: 1.7;
}

/* 4. ピーチ背景の投稿フィード */
.dhme-thread-feed {
  background: var(--clr-primary-pale);
  border-radius: 12px;
  padding: 28px 22px;
  margin-bottom: 32px;
}

/* 4-1. 投稿カード共通 */
.dhme-thread-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
}
.dhme-thread-card:last-child {
  margin-bottom: 0;
}

/* 返信カードはわずかに小さく見せる（タイトル違い） */
.dhme-thread-card--reply {
  padding: 20px 22px;
}

/* ベストアンサーの特別表示 */
.dhme-thread-card.is-best {
  border: 2px solid #f0c040;
  box-shadow: 0 4px 14px rgba(240, 192, 64, 0.18);
}
.dhme-thread-best-tag {
  display: inline-block;
  background: #f0c040;
  color: #5a3d00;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 9999px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

/* カード上部メタ（番号: 日時） */
.dhme-thread-card-meta {
  font-size: 11.5px;
  color: #888;
  font-family: 'Courier New', monospace;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

/* 著者行（アバター + 名前 + 属性タグ） */
.dhme-thread-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dhme-thread-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--clr-primary-pale), var(--clr-primary-light));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(192,120,152,0.18);
}
.dhme-thread-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dhme-thread-card-avatar-fallback {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-primary-dark);
}
.dhme-thread-card-name {
  font-size: 14px;
  font-weight: 800;
  color: #2c1f24;
}
.dhme-thread-card-tag {
  font-size: 12px;
  color: #6B6B6B;
  font-weight: 600;
}
.dhme-thread-card-poster {
  background: var(--clr-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

/* 本文 */
.dhme-thread-card-body {
  font-size: 14px;
  line-height: 1.85;
  color: #2c1f24;
  margin-bottom: 16px;
  word-break: break-word;
}
.dhme-thread-card-body p {
  margin: 0 0 1em;
}
.dhme-thread-card-body p:last-child {
  margin-bottom: 0;
}
.dhme-thread-card-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}

/* リアクション（wp_ulike エリア） */
.dhme-thread-card-reactions {
  margin-bottom: 12px;
}
.dhme-thread-card-reactions .wp-ulike,
.dhme-thread-card-reactions .wpulike {
  margin: 0 !important;
}

/* カード底部（リアクション数 + 返信ボタン） */
.dhme-thread-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid #F5EDE9;
  padding-top: 12px;
}
.dhme-thread-card-meta-bottom {
  font-size: 12px;
  color: #6B6B6B;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dhme-thread-card-meta-bottom strong {
  color: var(--clr-primary-dark);
  font-weight: 800;
}
.dhme-thread-card-replybtn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 22px;
  border: 1.5px solid var(--clr-primary);
  border-radius: 9999px;
  background: #fff;
  color: var(--clr-primary);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.dhme-thread-card-replybtn:hover {
  background: var(--clr-primary);
  color: #fff;
}

/* ベスト選択ボタン（DHme-5 機能） */
.dhme-ba-btn {
  background: transparent;
  color: var(--clr-primary);
  border: 1.5px dashed var(--clr-primary);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.dhme-ba-btn:hover {
  background: var(--clr-primary-pale);
}

/* 返信フォーム */
.dhme-thread-replyform-wrap {
  margin-top: 32px;
}
.dhme-thread-replyform-wrap .reply-form {
  background: #fff;
  border: 1.5px solid #ECE3E0;
  border-radius: 14px;
  padding: 24px;
  margin: 0;
}
.dhme-thread-replyform-wrap .reply-form legend {
  font-size: 14px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  padding: 0 6px;
  margin-bottom: 8px;
}

/* スマホ調整 */
@media (max-width: 480px) {
  .dhme-thread-head-inner { padding: 12px 14px; }
  .dhme-thread-head-icon { font-size: 22px; }
  .dhme-thread-head-title { font-size: 14.5px; }
  .dhme-thread-page { padding: 0 12px 70px; }
  .dhme-thread-title { font-size: 18px; gap: 8px; }
  .dhme-thread-title-icon { font-size: 22px; }
  .dhme-thread-about { padding: 14px 16px; }
  .dhme-thread-about-body { font-size: 12.5px; }
  .dhme-thread-feed { padding: 18px 14px; border-radius: 10px; }
  .dhme-thread-card { padding: 18px 18px; margin-bottom: 14px; border-radius: 12px; }
  .dhme-thread-card--reply { padding: 16px 16px; }
  .dhme-thread-card-body { font-size: 13.5px; }
  .dhme-thread-card-replybtn { padding: 7px 16px; font-size: 12px; }
  .dhme-thread-card-author { gap: 8px; }
  .dhme-thread-card-name { font-size: 13.5px; }
  .dhme-thread-card-tag { font-size: 11.5px; }
}

/* 旧 .pd-* / .reply-item 系は 270.css 側からも削除済（2026-05-10 監査）。
   保険ルールも不要のため除去。 */

/* ----------------------------------------------------------------
   bbPress 標準ページのテンプレートオーバーライド対応
   sayu さん 2026-05-10 スクショ参考: tomosnote AYA世代コミュニティページ
   - /forums/{slug}/ → content-single-forum.php（dhme-bbp-community）
   - /forums/        → content-archive-forum.php（dhme-bbp-archive）
   ---------------------------------------------------------------- */

#bbpress-forums.dhme-bbp-community,
#bbpress-forums.dhme-bbp-archive {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px 80px;
  background: #fff;
}

/* 1. コミュニティ名ヘッダ（共通） */
.dhme-comm-head {
  border-bottom: 2px solid var(--clr-primary);
  margin: 0 -16px 28px;
}
.dhme-comm-head-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dhme-comm-head-icon {
  font-size: 24px;
}
.dhme-comm-head-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  letter-spacing: 0.02em;
}

/* 2. 「コミュニティについて」カラウト */
.dhme-comm-about {
  background: var(--clr-primary-pale);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 32px;
}
.dhme-comm-about-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  margin-bottom: 8px;
}
.dhme-comm-about-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-family: serif;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dhme-comm-about-body,
.dhme-comm-about-body p {
  font-size: 13px;
  color: #5a4d52;
  line-height: 1.7;
  margin: 0;
}

/* 3. 「このコミュニティに参加した人たち」— アバターのみ・3件カルーセル
   2026-05-10 sayu さん指示: アイコン画像だけ表示、3件ずつスライダー化 */
.dhme-comm-members {
  margin: 0 0 36px;
  text-align: center;
}
.dhme-comm-members-badge {
  display: inline-block;
  position: relative;
  background: #fff;
  border: 2px solid var(--clr-primary);
  border-radius: 12px;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  margin-bottom: 24px;
}
.dhme-comm-members-badge::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 2px solid var(--clr-primary);
  border-bottom: 2px solid var(--clr-primary);
  rotate: 45deg;
}

/* スライダー本体（矢印 + ビューポート + トラック）
   2026-05-11 修正: flex の循環参照を避けて固定 px 幅で確定。
   - 1 アイテム = 120px（96px アバター + 余白）
   - viewport = 3 アイテム + 2 gap = 120*3 + 16*2 = 392px
   - これで JS の getBoundingClientRect が 120px を確実に返し translateX が機能する */
.dhme-comm-members-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  justify-content: center;
}
.dhme-comm-members-viewport {
  /* 3 アイテム分（120px × 3 + 16px × 2）= 392px */
  flex: 0 0 392px;
  width: 392px;
  max-width: calc(100vw - 100px);
  overflow: hidden;
}
.dhme-comm-members-track {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.dhme-comm-member-item {
  flex: 0 0 120px;   /* 固定幅: avatar 96 + 左右マージン余裕 */
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dhme-comm-member-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--clr-primary-pale), var(--clr-primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(192,120,152,0.18);
}
.dhme-comm-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dhme-comm-member-avatar-fb {
  font-size: 32px;
  font-weight: 800;
  color: var(--clr-primary-dark);
}

/* 矢印ボタン（前/次）— 2026-05-10 ボタン非表示問題修正:
   bbPress 既定ボタン（#bbpress-forums button）と詳細度衝突しないよう、
   `.dhme-comm-members-slider button.dhme-comm-members-arrow` で
   詳細度を 0,2,1 に上げて確実に勝つ。 */
.dhme-comm-members-slider button.dhme-comm-members-arrow,
.dhme-comm-members-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--clr-primary-light);
  color: var(--clr-primary-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s;
  padding: 0;
  font-weight: 700;
  /* 念のため bbPress 既定の transform / box-shadow をリセット */
  box-shadow: 0 2px 6px rgba(192, 120, 152, 0.12);
  letter-spacing: 0;
}
.dhme-comm-members-slider button.dhme-comm-members-arrow:hover:not(:disabled),
.dhme-comm-members-arrow:hover:not(:disabled) {
  background: var(--clr-primary-pale);
  border-color: var(--clr-primary);
  transform: scale(1.08);
  color: var(--clr-primary-dark);
}
.dhme-comm-members-slider button.dhme-comm-members-arrow:disabled,
.dhme-comm-members-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.dhme-comm-members-arrow--prev { padding-right: 2px; }
.dhme-comm-members-arrow--next { padding-left: 2px; }

/* 4. 「話題のスレッド」セクション */
.dhme-comm-threads {
  background: #fff;
  border: 1.5px solid #ECE3E0;
  border-radius: 14px;
  margin-bottom: 32px;
  overflow: hidden;
}
.dhme-comm-threads-hd {
  background: var(--clr-primary);
  color: #fff;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.dhme-comm-threads-icon {
  font-size: 18px;
}
.dhme-comm-threads-body {
  padding: 4px 22px;
}
.dhme-comm-thread {
  padding: 22px 0;
  border-bottom: 1px solid #F5EDE9;
}
.dhme-comm-thread:last-child {
  border-bottom: none;
}
.dhme-comm-thread-date {
  font-size: 11.5px;
  color: #888;
  margin-bottom: 8px;
}
.dhme-comm-thread-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.45;
}
.dhme-comm-thread-title a {
  color: #2c1f24;
  text-decoration: none;
}
.dhme-comm-thread-title a:hover {
  color: var(--clr-primary);
}
.dhme-comm-thread-desc {
  font-size: 13px;
  color: #5a4d52;
  line-height: 1.7;
  margin: 0 0 14px;
}
.dhme-comm-thread-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.dhme-comm-thread-count {
  font-size: 12px;
  color: #6B6B6B;
  font-weight: 600;
}
.dhme-comm-thread-avatars {
  display: inline-flex;
  align-items: center;
}
.dhme-comm-thread-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(192,120,152,0.18);
  margin-left: -8px;
  background: var(--clr-primary-pale);
}
.dhme-comm-thread-avatar:first-child {
  margin-left: 0;
}
.dhme-comm-thread-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 「もっと見る」ペジネーション */
.dhme-comm-threads-foot {
  padding: 16px 22px 22px;
  text-align: center;
}
.dhme-comm-threads-foot .bbp-pagination,
.dhme-comm-threads-foot .pagination {
  justify-content: center;
}

/* 5. サブカテゴリ（ある場合） */
.dhme-comm-subforums {
  margin: 0 0 32px;
  background: #fff;
  border: 1.5px solid #ECE3E0;
  border-radius: 14px;
  padding: 18px 22px;
}
.dhme-comm-subforums-hd {
  font-size: 14px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 6. 新規トピック投稿フォーム */
.dhme-comm-newtopic {
  background: #fff;
  border: 1.5px solid #ECE3E0;
  border-radius: 14px;
  padding: 24px;
  margin-top: 16px;
}
.dhme-comm-newtopic fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.dhme-comm-newtopic legend {
  font-size: 14px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  padding: 0 6px;
  margin-bottom: 12px;
}

/* ---- /forums/ 一覧（archive）専用 ---- */

.dhme-bbp-archive-search {
  margin: 0 0 24px;
}
.dhme-bbp-archive-search .bbp-search-form {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.dhme-bbp-archive-search input[type="search"] {
  flex: 1;
  border: 1.5px solid #ECE3E0;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 13.5px;
}
.dhme-bbp-archive-search input[type="submit"] {
  flex-shrink: 0;
}

.dhme-comm-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dhme-comm-card {
  background: #fff;
  border: 1.5px solid #ECE3E0;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.dhme-comm-card:hover {
  border-color: var(--clr-primary-light);
  box-shadow: 0 8px 22px rgba(192,120,152,0.10);
  transform: translateY(-2px);
}
.dhme-comm-card.is-pinned {
  background: linear-gradient(135deg, var(--clr-primary-pale) 0%, #fff 100%);
  border-color: var(--clr-primary-light);
}
.dhme-comm-card-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.dhme-comm-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dhme-comm-card-name {
  font-size: 16px;
  font-weight: 800;
  color: #2c1f24;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dhme-comm-card-badge {
  background: var(--clr-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
}
.dhme-comm-card-desc {
  font-size: 12.5px;
  color: #5a4d52;
  line-height: 1.7;
}
.dhme-comm-card-stats {
  display: flex;
  gap: 16px;
  font-size: 11.5px;
  color: #6B6B6B;
  font-weight: 600;
  margin-top: 4px;
}

/* スマホ調整 */
@media (max-width: 480px) {
  #bbpress-forums.dhme-bbp-community,
  #bbpress-forums.dhme-bbp-archive { padding: 0 12px 70px; }
  .dhme-comm-head { margin: 0 -12px 24px; }
  .dhme-comm-head-icon { font-size: 22px; }
  .dhme-comm-head-title { font-size: 14.5px; }
  .dhme-comm-about { padding: 14px 16px; }
  /* スマホ: 1 アイテム 92px、viewport = 92*3 + 10*2 = 296px */
  .dhme-comm-members-slider { gap: 4px; }
  .dhme-comm-members-viewport { flex: 0 0 296px; width: 296px; }
  .dhme-comm-members-track { gap: 10px; }
  .dhme-comm-member-item { flex: 0 0 92px; width: 92px; }
  .dhme-comm-member-avatar { width: 72px; height: 72px; border-width: 2px; }
  .dhme-comm-member-avatar-fb { font-size: 26px; }
  .dhme-comm-members-arrow { width: 30px; height: 30px; font-size: 18px; }
  .dhme-comm-threads-hd { font-size: 14px; padding: 12px 16px; }
  .dhme-comm-threads-body { padding: 0 16px; }
  .dhme-comm-thread { padding: 18px 0; }
  .dhme-comm-thread-title { font-size: 15px; }
  .dhme-comm-thread-desc { font-size: 12.5px; }
  .dhme-comm-card { padding: 16px 18px; gap: 12px; }
  .dhme-comm-card-ico { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  .dhme-comm-card-name { font-size: 15px; }
  .dhme-comm-newtopic { padding: 18px; }
}

/* ============================================================
   #54 (2026-05-14) アンカージャンプ時に sticky ヘッダーに隠れない調整
   ──────────────────────────────────────────────────────────
   `.dhme-header` が position: sticky で画面上部に固定されているため、
   `#reply-NNN` / `#topic-NNN` への anchor jump 時にカード上端が
   ヘッダーの裏に隠れる問題への対処。
   scroll-margin-top でアンカージャンプ時のスクロール位置を下にずらす。
   ============================================================ */
.dhme-thread-card[id^="reply-"],
.dhme-thread-card[id^="topic-"] {
  scroll-margin-top: 88px;  /* PC: sticky ヘッダー高さ約 70px + 余白 18px */
}
@media (max-width: 767px) {
  .dhme-thread-card[id^="reply-"],
  .dhme-thread-card[id^="topic-"] {
    scroll-margin-top: 72px;  /* SP: ヘッダー高さに合わせて小さめ */
  }
}

/* スムーススクロール（アンカージャンプ全般に滑らかな動き）*/
html { scroll-behavior: smooth; }

/* ============================================================
   #55 (2026-05-14) X 風 返信先引用ボックス
   ──────────────────────────────────────────────────────────
   bbp_get_reply_to() がある返信カードで、親返信を引用カード形式で表示。
   クリックで親返信 (#reply-N) へスムーズスクロール。
   ============================================================ */
.dhme-thread-quote {
  display: block;
  text-decoration: none;
  color: inherit;
  /* 既存パレットと整合: --clr-primary-pale を主に使い、フォールバックで現状の色味を保証 */
  background: linear-gradient(180deg, var(--clr-primary-pale, #FFF4F4) 0%, #FFF9F7 100%);
  border: 1px solid var(--clr-primary-light, #F2D8DC);
  border-left: 3px solid var(--clr-primary, #C07898);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  cursor: pointer;
}
.dhme-thread-quote:hover {
  background: linear-gradient(180deg, var(--clr-primary-light, #FFEFEF) 0%, var(--clr-primary-pale, #FFF4F0) 100%);
  border-left-color: var(--clr-primary-dark, #A85F7C);
}
.dhme-thread-quote:focus-visible {
  outline: 2px solid var(--clr-primary, #C07898);
  outline-offset: 2px;
}
.dhme-thread-quote:active { transform: translateY(1px); }

.dhme-thread-quote-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.4;
  color: var(--clr-primary-dark, #A85F7C);
  font-weight: 700;
  margin-bottom: 4px;
}
.dhme-thread-quote-icon {
  font-size: 13px;
  opacity: .8;
}
.dhme-thread-quote-avatar {
  display: inline-flex;
  width: 20px; height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0e6e6;
  flex-shrink: 0;
}
.dhme-thread-quote-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dhme-thread-quote-name {
  font-weight: 700;
}
.dhme-thread-quote-num {
  font-size: 11px;
  color: #888;
  font-weight: 500;
  margin-left: auto;
  font-feature-settings: "tnum";
}
.dhme-thread-quote-body {
  font-size: 12.5px;
  line-height: 1.6;
  color: #555;
  /* 1 行までで切って ... 表示 (v5.0: ミニチップ化) */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* スマホ調整 */
@media (max-width: 480px) {
  .dhme-thread-quote { padding: 8px 12px; margin: 0 0 10px; }
  .dhme-thread-quote-head { font-size: 11.5px; gap: 5px; }
  .dhme-thread-quote-avatar { width: 18px; height: 18px; }
  .dhme-thread-quote-body { font-size: 12px; }
  .dhme-thread-quote-num { font-size: 10.5px; }
}

/* ============================================================
   #56 (2026-05-14 v5.0) 階層インデント・ツリー線の撤去（方針転換）
   ──────────────────────────────────────────────────────────
   v4.0-v4.5 で実装したインデント (margin-left) + 縦線 + 横接続線は、
   モダンなフラット表示（A+B 統合方式: ヘッダーチップに本文 40 字プレビュー）
   への方針転換に伴い撤去。階層情報は #55 X 風引用ボックスのみで表現する。
   将来のために履歴コメントとして残置。
   ============================================================ */

/* ============================================================
   #57 (2026-05-14 v5.1) bbPress フォーム GUI を DHme トーンに統一
   ──────────────────────────────────────────────────────────
   対象:
   - 新規トピック投稿フォーム (form-topic.php)
   - 返信投稿フォーム (form-reply.php, .dhme-thread-replyform-wrap 内)
   要素:
   - fieldset: カード風背景 + 角丸 + 軽い影
   - input/textarea: 丸めて focus 時にピンクアクセント
   - button.submit: DHme ピンク + 角丸ピル型
   - quicktags toolbar: ミニマル
   - bbp-template-notice (HTML コンテンツ制限解除のお知らせ): 既存トーン維持
   ============================================================ */

/* フォーム本体: カード風 */
#bbpress-forums fieldset.bbp-form,
.dhme-thread-replyform-wrap fieldset {
  background: #fff;
  border: 1px solid #f0e0e6;
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#bbpress-forums fieldset.bbp-form legend,
.dhme-thread-replyform-wrap fieldset legend {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-primary-dark, #A85F7C);
  background: none;
  padding: 0 8px;
  margin-bottom: 12px;
  width: auto;
}

/* ラベル */
#bbpress-forums .bbp-form label,
.dhme-thread-replyform-wrap label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text, #333);
  margin-bottom: 6px;
}

/* テキスト入力 */
#bbpress-forums .bbp-form input[type="text"],
#bbpress-forums .bbp-form input[type="email"],
#bbpress-forums .bbp-form input[type="url"],
#bbpress-forums .bbp-form input[type="password"],
.dhme-thread-replyform-wrap input[type="text"],
.dhme-thread-replyform-wrap input[type="email"] {
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1.5px solid #ECE3E0;
  border-radius: 10px;
  background: #FFFCFD;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

#bbpress-forums .bbp-form input[type="text"]:focus,
#bbpress-forums .bbp-form input[type="email"]:focus,
.dhme-thread-replyform-wrap input[type="text"]:focus,
.dhme-thread-replyform-wrap input[type="email"]:focus {
  outline: none;
  border-color: var(--clr-primary, #C07898);
  box-shadow: 0 0 0 3px rgba(192, 120, 152, 0.15);
}

/* テキストエリア (トピック本文 / 返信本文) */
#bbpress-forums .bbp-form textarea,
#bbpress-forums textarea#bbp_topic_content,
#bbpress-forums textarea#bbp_reply_content,
.dhme-thread-replyform-wrap textarea {
  width: 100%;
  max-width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.7;
  border: 1.5px solid #ECE3E0;
  border-radius: 0 0 10px 10px;  /* 上は quicktags が乗るので角ばる */
  background: #FFFCFD;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
  resize: vertical;
}

/* textarea 単独 (quicktags が上にないケース) */
.dhme-thread-replyform-wrap textarea:not([id*="content"]),
#bbpress-forums .bbp-form textarea:not([id*="content"]) {
  border-radius: 10px;
}

#bbpress-forums .bbp-form textarea:focus,
.dhme-thread-replyform-wrap textarea:focus {
  outline: none;
  border-color: var(--clr-primary, #C07898);
  box-shadow: 0 0 0 3px rgba(192, 120, 152, 0.15);
}

/* セレクト */
#bbpress-forums .bbp-form select,
.dhme-thread-replyform-wrap select {
  padding: 9px 14px;
  font-size: 14px;
  border: 1.5px solid #ECE3E0;
  border-radius: 10px;
  background: #FFFCFD;
  color: var(--clr-text, #333);
}

/* チェックボックス */
#bbpress-forums .bbp-form input[type="checkbox"],
.dhme-thread-replyform-wrap input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--clr-primary, #C07898);
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* 送信ボタン: DHme ピル型ピンク */
#bbpress-forums .bbp-form button.submit,
#bbpress-forums .bbp-form input[type="submit"],
.dhme-thread-replyform-wrap button.submit,
.dhme-thread-replyform-wrap input[type="submit"] {
  display: inline-block;
  background: var(--clr-primary, #C07898);
  color: #fff !important;
  border: none;
  border-radius: 50px;
  padding: 11px 32px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px rgba(192, 120, 152, 0.25);
  margin-top: 8px;
}

#bbpress-forums .bbp-form button.submit:hover,
.dhme-thread-replyform-wrap button.submit:hover,
#bbpress-forums .bbp-form input[type="submit"]:hover,
.dhme-thread-replyform-wrap input[type="submit"]:hover {
  background: var(--clr-primary-dark, #A85F7C);
  box-shadow: 0 4px 10px rgba(192, 120, 152, 0.35);
}

#bbpress-forums .bbp-form button.submit:active,
.dhme-thread-replyform-wrap button.submit:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(192, 120, 152, 0.25);
}

/* QuickTags ツールバー */
.dhme-thread-replyform-wrap .quicktags-toolbar,
#bbpress-forums .quicktags-toolbar {
  background: #FAF5F2;
  border: 1.5px solid #ECE3E0;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 6px;
}

.dhme-thread-replyform-wrap .quicktags-toolbar input[type="button"],
#bbpress-forums .quicktags-toolbar input[type="button"] {
  border: 1px solid #ECE3E0;
  background: #fff;
  color: var(--clr-text, #333);
  padding: 4px 10px;
  margin: 2px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.dhme-thread-replyform-wrap .quicktags-toolbar input[type="button"]:hover,
#bbpress-forums .quicktags-toolbar input[type="button"]:hover {
  background: var(--clr-primary-pale, #FFF4F4);
  border-color: var(--clr-primary-light, #F2D8DC);
}

/* HTML コンテンツ制限解除のお知らせ (黄色ボックス) */
#bbpress-forums .bbp-template-notice,
.dhme-thread-replyform-wrap .bbp-template-notice {
  background: #FFF8E7;
  border: 1px solid #F2D88B;
  border-radius: 10px;
  padding: 12px 16px 12px 36px;
  font-size: 13px;
  color: #5a4a1a;
  margin: 0 0 16px;
  list-style: disc inside;
}

#bbpress-forums .bbp-template-notice p,
.dhme-thread-replyform-wrap .bbp-template-notice p {
  margin: 0;
}

/* タイトル "「自己紹介」に新規トピックを作成" のヘッダー */
#bbpress-forums .bbp-reply-form h4,
#bbpress-forums .bbp-topic-form h4,
.dhme-thread-replyform-wrap h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-primary-dark, #A85F7C);
  margin: 0 0 12px;
}

/* スマホ */
@media (max-width: 480px) {
  #bbpress-forums fieldset.bbp-form,
  .dhme-thread-replyform-wrap fieldset {
    padding: 16px;
    border-radius: 12px;
  }
  #bbpress-forums .bbp-form textarea,
  .dhme-thread-replyform-wrap textarea {
    min-height: 140px;
  }
  #bbpress-forums .bbp-form button.submit,
  .dhme-thread-replyform-wrap button.submit,
  #bbpress-forums .bbp-form input[type="submit"],
  .dhme-thread-replyform-wrap input[type="submit"] {
    width: 100%;
    text-align: center;
    padding: 12px 24px;
  }
}

/* ============================================================
   #58 (2026-05-15) フォーラム入力フォームをフラット化（両枠削除）
   ──────────────────────────────────────────────────────────
   sayu さん要望 (2026-05-15):
   「外側 1 枠 + 中の 2 枠目 + textarea 枠」と枠が多重で重い印象 →
   外枠と中枠を両方削除し、トークルームページに直接「タイトル → ツールバー →
   textarea → タグ → 送信」が並ぶフラットな UI に。
   textarea 自身の 1 枠だけが残る最小構成。
   ============================================================ */

/* (A) 最外側の `.dhme-comm-newtopic` コンテナ枠を撤去（border / padding / shadow / bg） */
.dhme-comm-newtopic,
#bbpress-forums .dhme-comm-newtopic {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 24px !important;
}

/* (B) bbPress 標準テンプレが描く「2 枠目」 — fieldset.bbp-form / 内側ラッパ系を全部撤去 */
.dhme-comm-newtopic fieldset,
.dhme-comm-newtopic fieldset.bbp-form,
.dhme-comm-newtopic .bbp-the-content-wrapper,
.dhme-comm-newtopic #bbp-the-content-wrapper,
.dhme-comm-newtopic .wp-editor-wrap,
.dhme-comm-newtopic .wp-editor-container,
#bbpress-forums .dhme-comm-newtopic fieldset,
#bbpress-forums .dhme-comm-newtopic fieldset.bbp-form,
#bbpress-forums .dhme-comm-newtopic .bbp-the-content-wrapper,
#bbpress-forums .dhme-comm-newtopic #bbp-the-content-wrapper,
#bbpress-forums .dhme-comm-newtopic .wp-editor-wrap,
#bbpress-forums .dhme-comm-newtopic .wp-editor-container {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* (C) legend（「自己紹介に新規トピックを作成」見出し）はそのままセクション見出しとして残す */
.dhme-comm-newtopic legend,
.dhme-comm-newtopic > fieldset > legend {
  padding: 0 !important;
  margin: 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 14px;
  font-weight: 800;
  color: var(--clr-primary-dark);
  display: block;
}

/* (D) QuickTags ツールバー（太字 / 画像） — 背景帯を撤去し、下罫線 1 本で textarea と地続きに */
.dhme-comm-newtopic .quicktags-toolbar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #ECE3E0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 10px !important;
  margin: 0 0 10px !important;
}

/* (E) textarea / input は「唯一残す枠」として 1px の細枠＋focus でピンクリング */
.dhme-comm-newtopic textarea,
.dhme-comm-newtopic input[type="text"],
.dhme-comm-newtopic input[type="email"],
.dhme-comm-newtopic input[type="url"] {
  border: 1px solid #ECE3E0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: #fff !important;
}
.dhme-comm-newtopic textarea:focus,
.dhme-comm-newtopic input[type="text"]:focus,
.dhme-comm-newtopic input[type="email"]:focus,
.dhme-comm-newtopic input[type="url"]:focus {
  border-color: var(--clr-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(192, 120, 152, 0.12) !important;
  outline: none !important;
}

/* (F) 単独トピック側の返信フォームでも同じ問題が出ていたので、同様に撤去。
       こちらは .dhme-thread-replyform-wrap が元から持っている枠を残して内側だけ消す。 */
.dhme-thread-replyform-wrap fieldset,
.dhme-thread-replyform-wrap fieldset.bbp-form,
.dhme-thread-replyform-wrap .bbp-the-content-wrapper,
.dhme-thread-replyform-wrap #bbp-the-content-wrapper,
.dhme-thread-replyform-wrap .wp-editor-wrap,
.dhme-thread-replyform-wrap .wp-editor-container,
#bbpress-forums .dhme-thread-replyform-wrap fieldset,
#bbpress-forums .dhme-thread-replyform-wrap fieldset.bbp-form,
#bbpress-forums .dhme-thread-replyform-wrap .bbp-the-content-wrapper,
#bbpress-forums .dhme-thread-replyform-wrap #bbp-the-content-wrapper,
#bbpress-forums .dhme-thread-replyform-wrap .wp-editor-wrap,
#bbpress-forums .dhme-thread-replyform-wrap .wp-editor-container {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.dhme-thread-replyform-wrap legend {
  padding: 0 !important;
  margin: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
}

/* ============================================================
   #58-2 (2026-05-15) 入力フォームの横幅統一
   ──────────────────────────────────────────────────────────
   sayu さんスクショで「ツールバー（太字・画像）と絵文字案内は全幅、
   textarea とタグ input が内側に縮んで見える」と報告。
   bbPress 標準ラッパが残しているデフォルト幅とマージンを揃え、
   ツールバー・案内文・textarea・タグ input・送信ボタン領域を
   すべて同じ左右位置で揃える。
   ============================================================ */

/* (A) 新規トピックフォーム — wrap 系を 100% 幅・左右 margin ゼロに揃える */
.dhme-comm-newtopic .wp-editor-wrap,
.dhme-comm-newtopic .wp-editor-container,
.dhme-comm-newtopic .bbp-the-content-wrapper,
.dhme-comm-newtopic #bbp-the-content-wrapper,
.dhme-comm-newtopic .quicktags-toolbar,
.dhme-comm-newtopic .dhme-bbp-emoji-hint,
#bbpress-forums .dhme-comm-newtopic .wp-editor-wrap,
#bbpress-forums .dhme-comm-newtopic .wp-editor-container,
#bbpress-forums .dhme-comm-newtopic .bbp-the-content-wrapper,
#bbpress-forums .dhme-comm-newtopic #bbp-the-content-wrapper,
#bbpress-forums .dhme-comm-newtopic .quicktags-toolbar,
#bbpress-forums .dhme-comm-newtopic .dhme-bbp-emoji-hint {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* (B) textarea / input は 100% 幅で揃える。box-sizing で border 込み計算 */
.dhme-comm-newtopic textarea,
.dhme-comm-newtopic input[type="text"],
.dhme-comm-newtopic input[type="email"],
.dhme-comm-newtopic input[type="url"],
#bbpress-forums .dhme-comm-newtopic textarea,
#bbpress-forums .dhme-comm-newtopic input[type="text"],
#bbpress-forums .dhme-comm-newtopic input[type="email"],
#bbpress-forums .dhme-comm-newtopic input[type="url"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (C) ラベル（「トピックタイトル」「タグ」など）も左端で揃える */
.dhme-comm-newtopic p,
.dhme-comm-newtopic label,
#bbpress-forums .dhme-comm-newtopic p,
#bbpress-forums .dhme-comm-newtopic label {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* (D) 同じ問題が返信フォームでも起きるので、同様にリセット */
.dhme-thread-replyform-wrap .wp-editor-wrap,
.dhme-thread-replyform-wrap .wp-editor-container,
.dhme-thread-replyform-wrap .bbp-the-content-wrapper,
.dhme-thread-replyform-wrap #bbp-the-content-wrapper,
.dhme-thread-replyform-wrap .quicktags-toolbar,
.dhme-thread-replyform-wrap .dhme-bbp-emoji-hint,
.dhme-thread-replyform-wrap textarea,
.dhme-thread-replyform-wrap input[type="text"],
.dhme-thread-replyform-wrap input[type="email"],
.dhme-thread-replyform-wrap input[type="url"],
#bbpress-forums .dhme-thread-replyform-wrap .wp-editor-wrap,
#bbpress-forums .dhme-thread-replyform-wrap .wp-editor-container,
#bbpress-forums .dhme-thread-replyform-wrap .bbp-the-content-wrapper,
#bbpress-forums .dhme-thread-replyform-wrap #bbp-the-content-wrapper,
#bbpress-forums .dhme-thread-replyform-wrap .quicktags-toolbar,
#bbpress-forums .dhme-thread-replyform-wrap .dhme-bbp-emoji-hint,
#bbpress-forums .dhme-thread-replyform-wrap textarea,
#bbpress-forums .dhme-thread-replyform-wrap input[type="text"],
#bbpress-forums .dhme-thread-replyform-wrap input[type="email"],
#bbpress-forums .dhme-thread-replyform-wrap input[type="url"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}