@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.4
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ===================================================================
   ElevenLabs風レイアウト定数（唯一の定義元）
   サイドバー幅・ナビ高さ・管理者バー高さをここで一元管理し、
   他の場所では必ずこの変数を参照する（値のハードコード重複を禁止）。
   これにより「値が食い違ってリサイズ時に挙動がずれる」事故を防ぐ。
   =================================================================== */
:root {
  --di-sidebar-w: 310px;
  --di-nav-h: 50px;
  --di-adminbar-h: 32px;
  --di-adminbar-h-mobile: 46px;
}

/* ===== フォント: Rounded M+（M PLUS Rounded 1c）に統一 ===== */
body,
h1, h2, h3, h4, h5, h6,
input, textarea, select, button,
.article,
.mp-card, .mp-btn {
  font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
}

/* =====================================================================
   ヘッダー（ロゴ・キャッチコピー欄）は非表示。メインメニュー(#navi)だけを
   画面最上部に固定表示する。
   ===================================================================== */
#header { display: none !important; }
#header-container { box-shadow: none !important; }
#header-container-in { padding: 0 !important; }

/* Cocoonのナビ内部要素は独自に高さ・行間を固定している(li:60px等)ため、
   #navi配下すべてを一旦リセットしてから必要な要素だけ再指定する（Cocoon側の値を根こそぎ無効化） */
#navi, #navi *, #navi-in, #navi-in * {
  height: auto !important;
  line-height: normal !important;
  min-height: 0 !important;
}
#navi {
  background: #ffffff !important;
  box-shadow: none !important;
  border-bottom: 1px solid #ececec !important;
  height: var(--di-nav-h) !important;
  box-sizing: border-box;
  /* overflow:hiddenはプルダウンサブメニューを閉じ込めてしまうため使用禁止 */
  overflow: visible;
  /* メインメニュー行は画面上部で固定し、本文はその下を独立してスクロールさせる。
     left:var(--di-sidebar-w)で左固定サイドバーの右側だけに範囲を限定し、サイドバーのロゴに重ならないようにする。 */
  position: fixed !important;
  top: 0;
  left: var(--di-sidebar-w);
  right: 0;
  z-index: 250 !important;
}
/* WordPress管理者バーは#naviよりさらに上のz-indexで画面上部に固定表示される。
   #naviをtop:0のままにすると文字が管理者バーの裏にほぼ埋まって消えたように見えるため、
   ログイン時(body.admin-bar)は管理者バーの高さ分だけ#naviを下にずらす。 */
body.admin-bar #navi {
  top: var(--di-adminbar-h);
}
@media screen and (max-width: 782px) {
  body.admin-bar #navi {
    top: var(--di-adminbar-h-mobile);
  }
}
@media screen and (max-width: 900px) {
  /* この幅ではサイドバー自体が非表示になるため、ナビは全幅に戻す */
  #navi { left: 0; }
}

#navi-in {
  height: var(--di-nav-h) !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  box-sizing: border-box;
  /* Cocoon標準の.wrapクラスがコンテンツ幅設定(管理画面の値)由来の固定px幅を持っており、
     画面幅に追従しない原因になっていた。#naviは可変幅の固定バーなので、常に親いっぱいに広げる。 */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* 右端のアバターアイコンが画面端に張り付かないよう、アイコン1個分(28px)を目安に余白を確保 */
  padding-right: 28px !important;
}
#navi ul.menu-header {
  /* 背景は透明にする。#navi自体が白背景なので不要な上、白で塗ると#naviの下辺の
     1px境界線をメニュー範囲だけ覆い隠して線が途切れて見える原因になっていた。 */
  background: transparent !important;
  height: var(--di-nav-h) !important;
  display: flex !important;
  align-items: center;
  /* ボタン間隔は画面幅に応じて滑らかに伸縮（上限60px・下限8px）。
     幅ごとの個別media queryで詰める方式は「境界をまたぐと急に見た目が変わる」
     モグラ叩きの温床だったため廃止し、この1行に一本化する。 */
  gap: clamp(8px, 4vw, 60px);
  /* Cocoon標準はflex-wrap:wrapのため、幅が足りないと最後の項目(ユーザー表示)が
     2行目に落ちてナビの箱からはみ出す。常に1行に収める。 */
  flex-wrap: nowrap !important;
}
#navi ul.menu-header > li {
  /* Cocoon標準は".navi-in > ul li { width:176px }"と文字数に関係なく固定幅を持っており、
     短い文字でも箱の中に大きな余白が残って間延びして見える原因だった。文字の実寸に合わせる。
     項目間の間隔はgap(clamp)だけで管理するため、個別のmarginは全て打ち消す
     （ユーザーメニューliはログインスニペット側がmargin-left:24pxを持っていた）。 */
  width: auto !important;
  height: var(--di-nav-h) !important;
  display: flex !important;
  align-items: center;
  float: none !important;
  margin: 0 !important;
}
/* liをflex化(align-items:center)したことで、絶対配置のサブメニュー(top未指定=auto)の
   静的位置がflexの中央揃えに引きずられ画面外に飛び出すため、topを明示固定してliの直下に確実に出す。
   left:50%+transform中央寄せで、ボタン自身の中心とプルダウンの中心を揃える。 */
#navi ul.menu-header > li > .sub-menu {
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* 入れ子サブメニュー（例：YT講ザル配下）はCocoon標準でposition:relative; top:-60pxという、
   元の横並びメガメニュー用の値が残っており、縦積みドロップダウンの中では隙間や重なりの原因になる。
   通常のリストとして直下に表示する。
   さらにdisplay:blockで常時表示に固定する：Cocoon標準はホバー時だけ展開するため、
   メニュー全体の高さが伸縮し、最下部項目へ向かう途中でポインタがメニュー外に落ちて
   閉じてしまう不具合（2026-07-05報告）の原因だった。高さ固定で解消。 */
#navi ul.menu-header .sub-menu .sub-menu {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 0 0 14px !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
  min-width: 0 !important;
}
/* #navi-in * のリセットがID特有度でクラス指定に勝ってしまうため、ID修飾して確実に上書きする */
#navi-in .di-user-trigger,
#navi-in .di-btn-outline,
#navi-in .mp-taisen-link {
  height: var(--di-pill-h) !important;
}
/* ===================================================================
   アバター規格（唯一の定義元・2026-07-02指示で一元管理）
   サイト内の全アバター丸（ヘッダー・マイページ・対占ページ）は
   必ずこの変数を参照する。見た目＝黄色地・白文字・正円。
   サイズだけは置き場所ごとに異なる（ヘッダー28px／対占50px／マイページ56px）。
   =================================================================== */
:root {
  --di-avatar-bg: #f9cc1d;
  --di-avatar-color: #ffffff;
}

/* アバターの丸アイコン（di_avatar_html関数がインラインでwidth=height=28pxを指定）は
   #navi-in * のリセットで高さだけ潰されて楕円になっていたため、正方形を強制復元する */
#navi-in .di-avatar {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  background: var(--di-avatar-bg) !important;
  color: var(--di-avatar-color) !important;
}

/* ===== サブメニュー（ドロップダウン）：小さく・軽く・影つきに ===== */
#navi ul.menu-header .sub-menu {
  min-width: 200px;
  padding: 6px 0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) !important;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}
#navi ul.menu-header .sub-menu a {
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 9px 16px !important;
  color: var(--di-text-muted, rgba(0,0,0,.6)) !important;
}
#navi ul.menu-header .sub-menu a:hover {
  background: #e9e9ec !important;  /* #f7f7f8では変化が見えない。サイドメニューのホバーと同じ濃さに統一（2026-07-06指示） */
}
/* アバターのドロップダウン（マイページ／ログアウト）もスニペット由来の#f5f5f5では
   見えないため、同じ濃さに統一（2026-07-06指示・スニペット無改変で外側上書き） */
.di-user-dropdown a:hover {
  background: #e9e9ec !important;
}
/* サブメニュー内の入れ子矢印(.sub-has-sub)もCocoon標準でposition:absolute; top:0; right:6pxの
   まま右上に固定され、向きも横並びメガメニュー用の「右向き」だった。縦積みリストなので、
   テキストのすぐ右・下向き（展開方向）に直す。 */
#navi ul.menu-header .sub-menu .sub-has-sub {
  position: static !important;
  margin-left: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}
#navi ul.menu-header .sub-menu .sub-has-sub .fa-angle-right {
  transform: rotate(90deg);
}

.site-name-text a,
.site-name a {
  color: #111 !important;
  font-weight: 800 !important;
}

/* 中間幅用の個別調整（文字縮小・admin文字の非表示等）は、境界をまたぐ度に
   見た目が急変するモグラ叩きの原因だったため全廃した。
   幅への追従は「ボタン間隔のみ滑らかに伸縮（gap: clamp）」の1方式だけで行い、
   文字・アイコン・admin表示は全幅で常に同じものを出す。 */

/* カード類の影を排除しフラット化（.articleは記事カード用に別途シャドウを指定するため対象外） */
.mp-card, .box-widget, #content-in {
  box-shadow: none !important;
}

/* =====================================================================
   左固定サイドバー（画面最上部〜最下部まで通し）
   ===================================================================== */
#sidebar {
  /* Cocoon標準は"no-mobile-sidebar"時など特定条件でサイドバー(class「nwa」等)を
     display:noneにする独自ルールを持っている。見た目の開閉はtransformで制御する設計にしたため、
     displayは常にblockへ強制的に固定する。 */
  display: block !important;
  position: fixed !important;
  left: 0;
  top: 0;
  width: var(--di-sidebar-w) !important;
  height: 100vh;
  overflow-y: auto;
  background: #ffffff;
  border-right: 1px solid #ececec;
  padding: 20px 14px 80px !important;
  box-sizing: border-box;
  z-index: 400;
  margin: 0 !important;
  float: none !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
/* サイドバーのスクロールバーを視覚的に非表示（スクロール自体は維持） */
#sidebar::-webkit-scrollbar {
  display: none;
}
.di-sidebar-logo {
  font-size: 17px;
  font-weight: 800;
  color: #111;
  padding: 28px 6px 28px;
  letter-spacing: -.01em;
}
.di-sidebar-logo a {
  color: #111 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* サイト名の左にfavicon（丸いDIロゴ）を、ヘッダー右端アバターと同じ28pxで表示。
   画像はルート相対パスにして本番(learn.di-ls.co.jp)でもそのまま効くようにする。 */
.di-sidebar-logo a::before {
  content: "";
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-left: -5px;
  border-radius: 50%;
  background-image: url("/wp-content/uploads/2026/05/cropped-DI_logo_corcle_b-192x192.png");
  background-size: cover;
  background-position: center;
}

#sidebar .widget-sidebar-title.widget-title {
  font-size: 11px;
  color: #9a9aa2;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 4px 4px 12px;
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
#sidebar .widget_custom_html {
  margin-bottom: 4px;
}

/* =====================================================================
   タブレット・スマホ対応：狭幅ではサイドバーを単に消すのではなく、
   ハンバーガーボタンで開閉するオフキャンバスパネルにする。
   （ボタン本体・開閉JSはfunctions.phpのwp_footerフックで挿入）
   ===================================================================== */
.di-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--di-text-default, #333);
  flex-shrink: 0;
}
.di-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 390;
}
@media screen and (max-width: 900px) {
  html body:not(.di-sidebar-open) #sidebar {
    transform: translateX(-100%) !important;
    transition: transform .25s ease;
    box-shadow: 0 0 24px rgba(0,0,0,.15);
  }
  html body.di-sidebar-open #sidebar {
    transform: none !important;
    transition: transform .25s ease;
    box-shadow: 0 0 24px rgba(0,0,0,.15);
  }
  body.di-sidebar-open .di-sidebar-backdrop {
    display: block !important;
  }
  .di-menu-toggle {
    display: inline-flex !important;
  }
}

/* =====================================================================
   本文まわり：Cocoon標準の「sidebar-right」2カラム計算をすべて無効化し、
   サイドバー幅ぶんのオフセットだけを#content-inに一元的に持たせる。
   （#content・#main・#content-inそれぞれに散らばっていた重複指定を統合）
   ===================================================================== */
#container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}
#content {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}
#content-in {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: var(--di-sidebar-w);
  box-sizing: border-box;
}
#main {
  float: none !important;
  width: auto !important;
  max-width: 900px;
  margin: 0 auto !important;
  /* 上余白0：ページタイトルの縦位置をサイドバー「講座メニュー」の高さに
     合わせるため（.articleの上パディングと合算で調整・2026-07-02指示） */
  padding: 0 40px 32px !important;
}
#header-in, #footer-in {
  /* こちらもCocoon標準.wrapの固定px幅を無効化し、常に親いっぱいに広げる */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: var(--di-sidebar-w);
  box-sizing: border-box;
}
@media screen and (max-width: 900px) {
  #content-in, #header-in, #footer-in { padding-left: 0; }
}

/* Cocoon親テーマのbody背景(#f4f5f7)を白に統一（2026-07-06指示：コンテンツ両サイドの
   グレー帯をなくす）。個別ページの背景指定（5285グレー・5173/5278黒）は
   html body.page-id-* のより高い詳細度で勝つためそのまま生きる */
body {
  background-color: #fff !important;
}

/* Cocoon側の内蔵CSS（style末尾の埋め込み<style>）が読み込み順で#mainの幅計算に
   勝ってしまうため、詳細度を最大化した上で最終的に再上書きする。 */
html body #container #content #content-in #main,
html body.sidebar-right #container #content #content-in #main {
  width: 100% !important;
  max-width: 900px !important;
  float: none !important;
  display: block !important;
}

/* #naviをposition:fixedで画面上部に固定した分、本文側の先頭にナビ高さぶんの
   余白を確保する。管理者バー分の余白はWordPress自体が<html>に自動で確保して
   くれているため、ここでナビの高さぶんだけ追加すると二重になり、ヘッダー直下に
   不要なグレーの隙間ができる。ログイン有無を問わずナビ高さ分だけで統一する。 */
html body #content {
  margin-top: var(--di-nav-h) !important;
}

/* ElevenLabs風：Cocoon標準の付帯要素を非表示（フォロー導線・投稿日等） */
.sns-follow,
.sns-follow-buttons,
.sns-follow-message,
.post-date,
.sns-share,
.sns-share-buttons,
/* 投稿フッターの投稿者情報（鉛筆アイコン＋サイト名リンク）も非表示 */
.footer-meta,
.author-info {
  display: none !important;
}

/* パンくずを本文上部でElevenLabs風に軽く。
   上余白36pxは、パンくずの縦位置をサイドバー「講座メニュー」の高さに
   揃えるための値（全体統一・2026-07-02指示） */
#breadcrumb {
  font-size: 12px !important;
  color: #999 !important;
  /* margin-topは親要素と相殺されて効かないため、paddingで下げる */
  padding-top: 20px !important;
  margin-bottom: 12px !important;
}

/* ===== テキスト規格（サイト全体で唯一の定義・2026-07-02 GO確定） =====
   階調：90%＝ページタイトル・強調ボタン ／ 75%＝見出し・メニュー・サイドバー
        65%＝本文 ／ 45%＝補足・メタ情報
   本文サイズ＝0.9em（Cocoon基準18px×0.9≒16.2px。SWELL本番の本文16pxと同じ見た目）
   ページや要素ごとの個別の文字調整は今後行わず、必ずこの規格を変更する。 */
:root {
  --di-text-emphasis: rgba(0,0,0,.9);  /* 90%：ページタイトル・強調ボタンのみ */
  --di-text-default: rgba(0,0,0,.75);  /* 75%：見出し・メインメニュー・サイドバー */
  --di-text-body: rgba(0,0,0,.65);     /* 65%：本文 */
  --di-text-muted: rgba(0,0,0,.45);    /* 補足・キャプション・メタ情報 */
  --di-text-faint: rgba(0,0,0,.3);     /* さらに弱い注記 */
  --di-fz-body: 0.9em;                 /* 本文サイズ（SWELL本番の16px相当） */
}

/* 本文：65%グレー・0.9em（.entry-content起点で一括。入れ子への二重適用を避けるため
   サイズ指定はこの1箇所だけに置く） */
.entry-content {
  font-size: var(--di-fz-body) !important;
}
body, .article, .article p, .entry-content p,
#di-mypage, .mp-card {
  color: var(--di-text-body) !important;
}

/* 見出し・メニュー・サイドバー：75% */
h1, h2, h3, h4, h5, h6,
.mp-name,
#main .article-title, .entry-card-title,
#navi ul.menu-header > li > a,
.course-nav summary,
.di-sidebar-logo, .di-sidebar-logo a {
  color: var(--di-text-default) !important;
}

/* 90%：ページタイトル・強調ボタンのみ */
.mp-page-title,
.mp-btn,
button[type="submit"], input[type="submit"] {
  color: var(--di-text-emphasis) !important;
}

/* 補足・メタ情報は45% */
.mp-label, .mp-sub, .breadcrumb, #breadcrumb,
.course-nav ul li a, small, .mp-msg {
  color: var(--di-text-muted) !important;
}

/* サイドバー内メインメニュー（ElevenLabs風アイコンリスト・現在未使用） */
.di-main-menu { display: none !important; }
.di-sidebar-account { display: none; }

/* フッター：左のロゴを削除、コピーライトを70%サイズで中央に */
.footer-bottom-logo { display: none !important; }
.footer-bottom { justify-content: center !important; }
.footer-bottom-content { width: 100%; text-align: center; }
.footer-bottom .source-org.copyright {
  font-size: 70% !important;
  text-align: center !important;
  width: 100%;
  float: none !important;
}

/* フッター側に移設したキャッチコピー */
.di-footer-tagline {
  text-align: center;
  font-size: 13px;
  color: var(--di-text-muted, #999);
  margin-bottom: 6px;
}

/* マイページ：Cocoon標準のh1見出し（ショートコード側のmp-page-titleと重複）を非表示 */
body.page-id-4970 .entry-title { display: none !important; }

/* 更新日（履歴アイコン）も非表示 */
.post-update { display: none !important; }

/* ===================================================================
   ElevenLabs風 ボタン規格（唯一の定義元・全ボタンがここを参照する）
   角丸は全ボタン共通で12px（ピル型＝半円角丸は廃止済み・2026-07-02指示）。
   ① ナビ規格（--di-pill-*）＝高さ40px。メインメニュー・ユーザー・対占リンクなど「移動用リンク」
   ② CTA規格（--di-cta-*）＝高さ44px。保存する等の「操作を実行するボタン」
   =================================================================== */
:root {
  /* ① ナビ規格 */
  --di-pill-h: 40px;
  --di-pill-radius: 12px;
  --di-pill-px: 18px;
  --di-pill-fs: 14px;
  --di-pill-fw: 500;

  /* ② CTA規格 */
  --di-cta-h: 44px;
  --di-cta-radius: 12px;
  --di-cta-px: 22px;
  --di-cta-fs: 15px;
  --di-cta-fw: 600;

  --di-btn-border: #e0e0e0;
  --di-btn-border-hover: #c9c9cc;
  --di-btn-bg-hover: #fafafa;
}

/* ① ナビ規格ボタン：対占リンク・di-btn-outline（白背景・角丸12px）
   ※メインメニュー・ユーザー表示(admin)はナビゲーション／ステータス表示であってボタンではないため対象外 */
.di-btn-outline,
.mp-taisen-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--di-pill-h) !important;
  box-sizing: border-box;
  padding: 0 var(--di-pill-px) !important;
  border-radius: var(--di-pill-radius) !important;
  font-size: var(--di-pill-fs) !important;
  font-weight: var(--di-pill-fw) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  background: #fff !important;
  border: 1px solid var(--di-btn-border) !important;
  color: var(--di-text-default) !important;
}
.di-btn-outline:hover,
.mp-taisen-link:hover {
  border-color: var(--di-btn-border-hover) !important;
  background: var(--di-btn-bg-hover) !important;
}

/* ユーザー表示（admin）：ボタンではないプレーン表示 */
.di-user-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: var(--di-pill-h) !important;
  box-sizing: border-box;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: var(--di-pill-fs) !important;
  color: var(--di-text-default) !important;
}

/* メインメニュー：プレーンなテキストリンク（枠なし） */
#navi ul.menu-header > li > a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: var(--di-pill-h) !important;
  box-sizing: border-box;
  padding: 0 6px !important;
  border-radius: 8px !important;
  font-size: var(--di-pill-fs) !important;
  font-weight: var(--di-pill-fw) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  color: var(--di-text-default) !important;
  transition: background .15s;
}
#navi ul.menu-header > li > a:hover {
  background: var(--di-btn-bg-hover) !important;
}
/* プルダウン矢印(.top-has-sub)はCocoon標準でposition:absolute; top:0; right:6pxが
   指定されており、文字と無関係な右上に固定されていた。テキストのすぐ右に半角スペース程度の
   間隔を空けて並ぶよう、通常のインライン要素に戻す。 */
#navi ul.menu-header > li > a .top-has-sub {
  position: static !important;
  margin-left: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ② CTAボタン：保存する等の主要アクション・di-btn-solid（黒塗り・角丸12px） */
.di-btn-solid,
.mp-btn,
button[type="submit"],
input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--di-cta-h) !important;
  box-sizing: border-box;
  padding: 0 var(--di-cta-px) !important;
  border-radius: var(--di-cta-radius) !important;
  font-size: var(--di-cta-fs) !important;
  font-weight: var(--di-cta-fw) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s;
  background: #111 !important;
  border: 1px solid #111 !important;
  color: #fff !important;
}
.di-btn-solid:hover,
.mp-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: #2a2a2a !important;
}

/* di-btn-outline はCTA寸法（角丸12px）で白抜き版として使う場合はこちら */
.di-btn-outline {
  height: var(--di-cta-h) !important;
  padding: 0 var(--di-cta-px) !important;
  border-radius: var(--di-cta-radius) !important;
  font-size: var(--di-cta-fs) !important;
  font-weight: var(--di-cta-fw) !important;
}

/* Cocoon標準のモバイル用フローティングボタン（検索・サイドバー開閉・ナビ開閉）は
   独自サイドバー・独自ナビに置き換え済みのため不要。表示崩れの原因になるため非表示にする。
   ※WP管理バー(#wpadminbar)には触れていない。 */
.search-menu-button,
.sidebar-menu-button,
.navi-menu-button,
#search-menu-content,
#sidebar-menu-content,
#navi-menu-content {
  display: none !important;
}

/* WP管理者バーの検索フォームを非表示（管理者バー自体は残すが、検索欄だけ完全除去） */
#wp-admin-bar-search { display: none !important; }

/* =====================================================================
   ログインページ（page-id-77）：スニペット18がサイドバー・ナビを非表示にする
   1カラム構成のため、サイドバー用オフセット(310px)とナビ用の上余白(50px)を
   このページだけ解除する。解除しないと中身が右へ310pxずれてセンターが崩れる。
   ===================================================================== */
body.page-id-77 #content-in,
body.page-id-77 #header-in,
body.page-id-77 #footer-in {
  padding-left: 0 !important;
}
body.page-id-77 #content {
  margin-top: 0 !important;
}
/* 左上のページタイトル「ログイン」を非表示（2026-07-02指示） */
body.page-id-77 .entry-title {
  display: none !important;
}

/* =====================================================================
   スニペット無改変ポリシー対応（2026-07-02確定）
   スニペット22(マイページ)・25(動的ナビ)・26(YT登録者数)は本番原文のまま使い、
   原文が出力する紫系配色・旧デザインを、ここから外側のCSSでグレー系・フラットに
   上書きする。スニペット側の<style>は本文中に出力されhead内CSSより後勝ちになるため、
   競合するプロパティには必ず!importantを付けること。
   ===================================================================== */

/* --- マイページ全体幅（原文は560px） --- */
#di-mypage { max-width: 600px !important; }

/* --- <style>ブロック由来の紫（クラスで上書き） --- */
/* アバターは「アバター規格」（黄色地・白文字）に統一 */
#di-mypage .mp-avatar { background: var(--di-avatar-bg) !important; color: var(--di-avatar-color) !important; }
#di-mypage .mp-rank-list li { background: #cccccc !important; color: #555555 !important; }
#di-mypage .mp-rank-list li.mp-period { background: #cccccc !important; color: #555555 !important; }
#di-mypage .mp-field input:focus { border-color: #333333 !important; }
/* ※.mp-btn / .mp-taisen-link は上の「ボタン規格」セクションで上書き済み */

/* --- インラインstyle由来の紫（style属性の値で対象を特定して上書き） --- */
#di-mypage .mp-card[style*="534AB7"] { border-color: #333333 !important; background: #fafafa !important; }
#di-mypage span[style*="534AB7"] { color: #333333 !important; }
#di-mypage strong[style*="534AB7"] { color: #333333 !important; }
#di-mypage div[style*="background:#eeedfe"] { background: #f0f0f0 !important; color: #333333 !important; }
#di-mypage div[style*="background:#534AB7"] { background: #333333 !important; }
/* YT登録者数バー：達成時の赤(#e74c3c)もグレーに */
#di-mypage div[style*="background:#e74c3c"] { background: #1a1a1a !important; }
/* 「パスワードを設定しておきましょう」案内（青地#f0f4ff・青バー#5865F2）を
   グレー地・赤バーへ。バーは角丸を外して真っ直ぐな縦長長方形に（2026-07-07指示） */
#di-mypage div[style*="border-left:4px solid #5865F2"] {
  background: #f0f0f0 !important;
  border-left-color: #e74c3c !important;
  border-radius: 0 !important;
}
#di-mypage p[style*="color:#e74c3c"] { color: #1a1a1a !important; }

/* --- 対占マッチング(#taisen-app)：紫・黄色系テーマをグレー系に上書き（2026-07-02指示）。
   スニペット7は本番原文のまま（無改変ポリシー）。インラインstyleの色値で対象を特定する。
   ※赤・緑（削除・成功などの意味を持つ状態色）は誤操作防止のため対象外。 --- */
/* 紫背景（STEPインジケーター・ボタン類）→ ダークグレー */
#taisen-app [style*="background:#534AB7"],
#taisen-app [style*="background: #534AB7"],
#taisen-app [style*="background: rgb(83, 74, 183)"] {
  background: #333333 !important;
}
/* 紫文字（アバターの文字・リンク等）→ ダークグレー */
#taisen-app [style*="color:#534AB7"],
#taisen-app [style*="color: rgb(83, 74, 183)"] {
  color: #333333 !important;
}
/* 薄紫背景（使い方ボックス・ヒント・アバター丸）→ ライトグレー */
#taisen-app [style*="background:#eeedfe"] {
  background: #f7f7f8 !important;
}
/* 紫の左線 → ダークグレー */
#taisen-app [style*="border-left:4px solid #534AB7"] {
  border-left-color: #333333 !important;
}
/* 紫の枠線（選択カード2px・マップ表示ボタン1px）→ グレー */
#taisen-app [style*="border:2px solid #534AB7"],
#taisen-app [style*="border:1px solid #534AB7"] {
  border-color: #c9c9cc !important;
}
/* 見出しの紫下線（⑤対占の履歴などJS生成分）→ ダークグレー */
#taisen-app [style*="border-bottom:2px solid #534AB7"] {
  border-bottom-color: #333333 !important;
}
/* JSが選択中カードに動的に付ける紫枠（style.borderColor='#534AB7'は
   rgb表記でstyle属性に入るため、rgb文字列で捕捉）→ ダークグレー */
#taisen-app [style*="border-color: rgb(83, 74, 183)"] {
  border-color: #333333 !important;
}
/* 対占ページのユーザーアバター丸（50px）も「アバター規格」（黄色地・白文字）に統一。
   ※薄紫→グレー化ルールより後に置くこと（後勝ちでアバターだけ黄色にするため） */
#taisen-app [style*="width:50px;height:50px;border-radius:50%"] {
  background: var(--di-avatar-bg) !important;
  color: var(--di-avatar-color) !important;
}
/* 黄色系お知らせ（希望時間なし・時間について）→ グレーのフラットな帯 */
#taisen-app [style*="background:#fff8e5"] {
  background: #f0f0f0 !important;
  border-color: #e0e0e0 !important;
  color: rgba(0,0,0,.65) !important;
}
/* 待機中ボックス（青紫系・JS生成）→ グレーの帯。🟢は絵文字なので色は変わらない */
#taisen-app [style*="background:#eef2ff"] {
  background: #f0f0f0 !important;
  border-color: #e0e0e0 !important;
  color: rgba(0,0,0,.65) !important;
}

/* --- 「テキストの印刷について」ページ(.di-print)：ElevenLabs準拠に上書き（2026-07-05指示）。
   ページ本文内の<style>がベージュ系パレットを変数(--bg等)で定義しているため、
   変数そのものを!importantでグレー規格に差し替える（ページ内容は無改変）。 --- */
.di-print {
  /* マニュアルページの濃淡設計（2026-07-05指示）：
     パネル全体＝薄いグレー地、その上に白いボックス類が浮く構成。
     ベージュ時代の「色地に白カード」の関係をグレーで再現する。 */
  --bg: transparent !important;      /* パネル塗りはやめ、ページ全面のグレー地に任せる */
  --card: #f6f7f8 !important;        /* 流れ図・手順などのカード。純白は浮きすぎるため1段落とす（2026-07-06指示） */
  --soft: #f6f7f8 !important;        /* 「なぜロック…」「はじめに」等も同トーン */
  --line: #dfe2e6 !important;        /* 罫線はグレー地に合わせ少し濃く */
  --ink: rgba(0,0,0,.75) !important;
  --ink2: rgba(0,0,0,.65) !important;
  --ink3: rgba(0,0,0,.55) !important;
  --mute: rgba(0,0,0,.45) !important;
  font-family: inherit !important;   /* サイト共通フォント(Rounded M+)に統一 */
  padding: 0 !important;
  min-height: 0 !important;          /* 原文のmin-height:100vhが下部に巨大な余白を作るため解除 */
}
/* このページだけ白い記事カードを外し、ページ全面をグレー地にする（2026-07-05指示）。
   白ボックス群が背景グレーの上に直接浮かぶ構成になる */
body.page-id-5285 .article {
  background: transparent !important;
  border-radius: 0;
}
/* 原文の .wrap{max-width:760px} が600px列からはみ出すため、列幅に収める */
body.page-id-5285 .di-print .wrap {
  max-width: 100% !important;
}
/* Cocoon側のページタイトルと、本文先頭の見出し（プリンタアイコン付き）が二重に
   出るため、Cocoon側を非表示にして本文側だけ残す（2026-07-05指示） */
body.page-id-5285 .entry-title {
  display: none !important;
}
/* ページ本文の<style>が body:has(.di-print){background:#e8e4db!important} などで
   ページ全体（body背景・サイドバー・.entry-content）に介入しているため、
   より高い詳細度で打ち消してサイト標準レイアウトに戻す */
html body.page-id-5285 {
  /* サイト標準(#f4f5f7)は実質白に見えるため、このページは目に見えるグレーまで濃くする。
     旧デザインのベージュ(#e8e4db)と同じ明度帯のグレー。 */
  background: #e9eaed !important;
}
html body.page-id-5285 #sidebar {
  display: block !important;        /* ページ側が消すサイドバーを復活 */
}
/* コンテンツ領域(#main)が白のままだとbodyのグレーが縁にしか見えない。このページだけ透明化 */
html body.page-id-5285 #main {
  background: transparent !important;
}
html body.page-id-5285 .entry-content {
  background: transparent !important;
  max-width: 600px !important;      /* 全ページ共通の600px中央1列を維持 */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

#taisen-app [style*="background:#fff8e1"] {
  background: #f0f0f0 !important;
  color: rgba(0,0,0,.65) !important;
}
#taisen-app [style*="border-left:4px solid #f39c12"] {
  border-left-color: #999999 !important;
}

/* --- サイドバー講座メニュー(.course-nav)：原文の旧デザインをフラットに上書き --- */
.course-nav, .course-nav * { font-size: 14px !important; line-height: 1.45; }
.course-nav details { margin-bottom: 2px !important; }
.course-nav summary {
  cursor: pointer;
  font-weight: 500 !important;
  padding: 10px 10px !important;
  background: transparent !important;
  list-style: none;
  border-radius: 8px;
  color: #383838 !important;
  display: flex !important;
  align-items: center;
  transition: background .15s;
}
.course-nav summary:hover { background: #e9e9ec !important; }  /* #f6f6f7では変化が見えない（2026-07-06指示で濃く） */
.course-nav summary::-webkit-details-marker { display: none; }
.course-nav summary::before {
  content: "" !important;
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1.5px solid #aaa;
  border-bottom: 1.5px solid #aaa;
  transform: rotate(-45deg);
  margin-right: 10px;
  flex-shrink: 0;
  transition: transform .2s;
}
.course-nav details[open] summary::before {
  content: "" !important;
  transform: rotate(45deg);
}
.course-nav ul { margin: 2px 0 8px !important; padding: 0 0 0 19px !important; list-style: none; }
.course-nav ul li a {
  display: block;
  padding: 8px 10px !important;
  color: #6b6b6b !important;
  font-weight: 400 !important;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 1px;
  transition: background .15s, color .15s;
  font-size: 13px !important;
}
.course-nav ul li a:hover { background: #e9e9ec !important; color: #333 !important; }
.course-nav ul li a.current { background: #f0f0f2 !important; color: #111 !important; font-weight: 600 !important; }

/* Cocoonの「管理者パネル」（画面下部のアクセス数・編集・表示テストのバー。管理者のみ表示）
   は不要のため非表示（2026-07-06指示） */
#admin-panel {
  display: none !important;
}

/* サイドバー「その他」の学習用リンク(.course-nav-top)を白ボタン化。
   下部の「命術計算機」「価値の序列」ボタンと同じ、白背景・角丸12px・薄い枠のボタン。 */
.course-nav-top ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.course-nav-top ul li { list-style: none !important; margin: 0 !important; }
.course-nav-top ul li a {
  display: block;
  padding: 10px 14px;
  background: #fff !important;
  border: 1px solid var(--di-btn-border, #e0e0e0) !important;
  border-radius: 12px;
  color: var(--di-text-default, rgba(0,0,0,.75)) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center;
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
}
.course-nav-top ul li a:hover {
  background: var(--di-btn-bg-hover, #fafafa) !important;
  border-color: var(--di-btn-border-hover, #c9c9cc) !important;
}
/* 「命術計算機」(.meisan-box)・「価値の序列」(.di-value-link)のホバーはウィジェット内の
   独自定義（#f7f7f7・枠#999）でルノルマンボタンと不揃いのため、共通規格に統一（2026-07-06指示） */
#sidebar .meisan-box:hover,
#sidebar .di-value-link:hover {
  background: var(--di-btn-bg-hover, #fafafa) !important;
  border-color: var(--di-btn-border-hover, #c9c9cc) !important;
  color: #333 !important;  /* テーマのリンクホバー色（赤）が漏れて文字が赤くなるのを防ぐ */
}

/* 対占マッチングページの個別指定(0.9em/65%)は、サイト全体のテキスト規格
   （.entry-content 0.9em＋本文65%）に統合したため削除済み（2026-07-02） */

/* =====================================================================
   サイト全体共通デザイン（SWELLを参照して構築）
   参照元は2つ：
   ① 旧SWELL子テーマ（swell_child/style.css.bak-20260610）＝「デザイントークン
      （:rootの変数）＋パーツ単位（見出し・カード・ボタン・入力欄・表・コード等）」
      というサイト全体を一括管理する設計思想。
   ② SWELL親テーマ本体（swell/build/css/main.css）＝実際の数値基準。
      本文サイズ16px、フォントサイズ階級（--swl-fz--xs:.75em / small:.9em /
      normal:1rem / medium:1.1em / large:1.25em / huge:1.6em）、
      カード用ボックスシャドウ（--swl-box_shadow:
      0 2px 4px rgba(0,0,0,.05),0 4px 4px -4px rgba(0,0,0,.1)）を実測して転用。
   色調はSWELL版の紫系ではなく、本サイトで確定済みのグレー系を使う。
   ===================================================================== */
:root {
  --di-radius:    12px;
  --di-radius-sm: 8px;
  --di-border:    #e6e6e6;
  --di-surface:   #ffffff;
  /* SWELL本体 --swl-box_shadow の実値をそのまま使用 */
  --di-shadow-sm: 0 2px 4px rgba(0,0,0,.05), 0 4px 4px -4px rgba(0,0,0,.1);
  --di-accent:    #333333; /* 旧SWELL版の紫(--c-purple)に相当。本サイトではダークグレーに統一 */

  /* SWELL本体のフォントサイズ階級(--swl-fz--*)をそのまま踏襲 */
  --di-fz-xs:     .75em;
  --di-fz-small:  .9em;
  --di-fz-normal: 1rem;
  --di-fz-medium: 1.1em;
  --di-fz-large:  1.25em;
  --di-fz-huge:   1.6em;
}

/* --- 記事本文カード：#mainの中の.articleを白いカードとして独立させる --- */
.article {
  background: var(--di-surface);
  border: none;
  box-shadow: none;
  border-radius: var(--di-radius);
  /* 上18px：ページタイトルの縦位置を「講座メニュー」に合わせる調整の一部 */
  padding: 18px 36px 32px;
  box-sizing: border-box;
}

/* --- コンテンツ幅：全ページ共通。マイページ(#di-mypage=600px・中央寄せ)に準拠し、
   「600pxの中央寄せ1列」に、ページタイトル・画像・本文の全てを入れる。
   これで全要素の左端が常に一致し、マイページとも同じ配置になる。 --- */
.article .article-header,
.entry-content {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.entry-content img,
.eye-catch img {
  /* width:100%の強制はしない。インラインでwidth:100px等を持つ小さい画像
     （例：ログインページのロゴ）まで600pxに引き伸ばす事故になるため、
     max-widthの上限だけ掛けて、大きい画像のみ600pxに縮める。 */
  max-width: 600px !important;
  height: auto !important;
  border-radius: 12px !important;
}
.eye-catch {
  max-width: 600px !important;
  margin: 0 auto 24px !important;
}

/* --- 見出し（記事本文内）：全ページ共通・マイページ準拠（2026-07-02）。
   マイページの見出し（例：「対占の予約状況」）を実測した結果、枠線・背景・角丸を
   一切持たない「太字テキストのみ」だったため、記事側の見出しもこれに合わせる。
   サイズ比率はSWELL本番（.post_content h1〜h4）を踏襲：
   h1=2em / h2=1.4em / h3=1.3em / h4=1.2em（本文サイズ基準の倍率） --- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-weight: 700 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.entry-content h1 { font-size: 2em !important; margin: 2.4em 0 1.2em !important; }
.entry-content h2 { font-size: 1.4em !important; margin: 2.2em 0 1.1em !important; }
.entry-content h3 { font-size: 1.3em !important; margin: 1.8em 0 .9em !important; }
.entry-content h4 { font-size: 1.2em !important; margin: 1.5em 0 .8em !important; }

/* --- フォーム入力欄：全ページ共通（対占・マイページ以外の一般フォームにも適用） --- */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="password"],
.entry-content input[type="search"],
.entry-content input[type="url"],
.entry-content input[type="number"],
.entry-content textarea,
.entry-content select {
  border: 1px solid var(--di-border) !important;
  border-radius: var(--di-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--di-text-default, rgba(0,0,0,.75)) !important;
  background: var(--di-surface) !important;
  box-sizing: border-box;
  transition: border-color .15s;
}
.entry-content input:focus,
.entry-content textarea:focus,
.entry-content select:focus {
  border-color: #999 !important;
  outline: none !important;
}

/* --- 表：全ページ共通 --- */
.entry-content table {
  border-collapse: collapse !important;
  width: 100% !important;
}
.entry-content th, .entry-content td {
  border: 1px solid var(--di-border) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  text-align: left !important;
}
.entry-content th {
  background: #fafafa !important;
  font-weight: 700 !important;
}

/* --- コード：全ページ共通 --- */
.entry-content code, .entry-content pre {
  background: #fafafa !important;
  border: 1px solid var(--di-border) !important;
  border-radius: var(--di-radius-sm) !important;
  font-family: 'JetBrains Mono', 'Fira Code', Monaco, monospace !important;
}
.entry-content code { padding: 2px 6px !important; font-size: 13px !important; }
.entry-content pre   { padding: 16px !important; overflow-x: auto !important; }

/* --- hr：全ページ共通 --- */
.entry-content hr {
  border: none !important;
  border-top: 1px solid var(--di-border) !important;
}


/* ===== 動画ブロックをカードで囲む（di_video・2026-07-07指示・間隔はお手本スクショ実測） ===== */
.di-video-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 40px;
  margin: 0 auto 48px;
}
/* キャプションは動画と同じ495px幅・中央寄せ＝文頭が動画の左端に揃う */
.di-video-card > p {
  max-width: 495px !important;
  margin: 0 auto 12px !important;
}
/* カード内最後の要素の下余白を消し、カードの内側下余白を40pxちょうどにする */
.di-video-card > :last-child {
  margin-bottom: 0 !important;
}
/* 動画の横幅を495pxに統一（インラインの75%指定を上書き・狭い画面は自動縮小） */
.di-video-card > div {
  max-width: 495px !important;
}
/* ===== チャンネル進捗カードを圧縮（縦幅を約2/3に・yt-semi-01_02/03/04共通・2026-07-07指示）
   ページ本文内の<style>より優先させるため全て!important ===== */
#swell-yt-api-container { gap: 10px !important; }
.swell-yt-card { padding: 10px 14px !important; }
.swell-yt-icon { width: 52px !important; height: 52px !important; margin-right: 14px !important; }
.swell-yt-header { margin-bottom: 4px !important; }
.swell-yt-name { font-size: 1em !important; }
.swell-yt-content > div { margin-top: 4px !important; }  /* 達成バーのブロック */
.swell-yt-content p { margin: 3px 0 0 !important; }      /* バー下の残り人数ラベル */
@media (max-width: 600px) {
  .swell-yt-card { padding: 14px 12px !important; }
  .swell-yt-icon { width: 64px !important; height: 64px !important; margin-bottom: 8px !important; }
}
/* ===== サイト全体：プルダウン(select)の矢印を細い山形に統一（2026-07-13指示）
   プラグインCSS(dp-select等)の上書きに勝つため ID/html body で特異度を上げる ===== */
select,
html body select,
#di-sched-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 34px !important;
}

/* =====================================================================
   スマホ対応（2026-07-15）：ヘッダーのメインメニューはモバイルでは表示しない。
   メインメニューはサイドバー内（.di-main-menu）に常設済みのため、900px以下では
   ヘッダー側の ul.menu-header を非表示にする。上の「display:flex !important」が
   Cocoonのモバイル非表示を打ち消し、あふれたメニューが右寄せで左へ突き抜けて
   ☰ボタンごと画面外に押し出していた不具合の修正。 =================== */
@media screen and (max-width: 900px) {
  /* トップメニューのバーは丸ごと非表示（2026-07-15 いこまさん指示）。
     ☰は#navi-inに差し込む方式をやめ、画面左上の固定浮きボタンにする */
  #navi {
    display: none !important;
  }
  html body #content {
    margin-top: 0 !important;
  }
  .di-menu-toggle {
    position: fixed !important;
    top: 10px;
    right: 10px;
    z-index: 500;
    width: 40px !important;
    height: 40px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
  body.admin-bar .di-menu-toggle {
    top: 56px;
  }
  /* ☰は右上の浮きボタンのため、本文の上余白は最小限でよい */
  #main {
    padding-top: 10px !important;
  }
  /* ピル型ボタンの内側左右を詰め、ボタン内での改行を禁止 */
  .di-btn-outline,
  .mp-taisen-link {
    padding: 0 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0;
  }
  /* 移設先：サイドバー内メインメニュー（.di-main-menu・functions.phpが常時描画、
     PCでは515行目で非表示）をモバイルでのみ表示し、サイドバー項目の見た目に揃える */
  .di-main-menu {
    display: block !important;
    border-top: 1px solid #ececec;
    margin-top: 12px;
    padding-top: 12px;
  }
  .di-main-menu .di-main-menu-item {
    display: block;
    padding: 8px 10px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
  }
  .di-main-menu a.di-main-menu-item:hover {
    background: #e9e9ec;
  }
  .di-main-menu .di-main-menu-label {
    color: #9a9aa2;
    font-size: 12px;
    padding-bottom: 2px;
  }
  .di-main-menu .di-main-menu-children {
    padding-left: 14px;
  }
  .di-main-menu .di-main-menu-child {
    display: block;
    padding: 7px 10px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
  }
  .di-main-menu .di-main-menu-child:hover {
    background: #e9e9ec;
  }
  /* デスクトップと鏡写し：URLなし中間項目（YT講ザル等）のラベルと、その配下（孫）のインデント */
  .di-main-menu .di-main-menu-child-label {
    color: #9a9aa2;
    font-size: 12px;
    padding-bottom: 2px;
  }
  .di-main-menu .di-main-menu-child-label:hover {
    background: transparent;
  }
  .di-main-menu .di-main-menu-grandchild {
    padding-left: 24px;
  }
  .di-main-menu .dmi-icon {
    margin-right: 6px;
  }
  /* アバターメニュー相当（名前・マイページ・ログアウト）＝ロゴ直下に移設 */
  .di-sidebar-account {
    display: block;
    border-bottom: 1px solid #ececec;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  .di-sb-account-name {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 8px;
    font-size: 13px;
    color: #999;
  }
  .di-sb-account-link {
    display: block;
    padding: 8px 10px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
  }
  .di-sb-account-link:hover {
    background: #e9e9ec;
  }
  /* 本文の左右余白：PC用の40pxはスマホでは過大（375px幅で80px消える）。14pxへ
     （上余白は☰ボタン回避の58pxを上のルールで指定済み） */
  #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 14px !important;
  }
  /* 本文末尾〜フッターの距離を半分に（積み重なった下余白を圧縮） */
  .entry-content {
    margin-bottom: 1em !important;
  }
  .article {
    margin-bottom: 0 !important;
  }
  #footer {
    margin-top: 8px !important;
  }
}

/* ===== chatgpt-startページ：ぶん太吹き出しをLINE緑に（2026-07-22追記） ===== */
.bunta-line-green {
  --cocoon-custom-background-color: #8de055;
  --cocoon-custom-border-color: #8de055;
}
.bunta-line-green .speech-balloon {
  background-color: #8de055;
  border-color: #8de055;
}

/* ===== chatgpt-startページ：本文画像に薄いグレー枠（2026-07-24追記） ===== */
body.page-id-5382 .wp-block-image img {
  border: 1px solid #c9c9c9;
}

/* ===== 全ページ共通：スマホ幅で画像が600pxのままはみ出す事故の修正（2026-07-24） =====
   子テーマ1143行の .entry-content img/.eye-catch img は max-width:600px のみで
   100%の上限が無いため、375px幅では600pxで描画され横スクロール＆レイアウト崩れになる。 */
@media screen and (max-width: 640px) {
  .eye-catch,
  .eye-catch img,
  .entry-content img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ===== 全ページ共通：アイキャッチ・カード画像上のカテゴリラベルを非表示（2026-08-15追記） ===== */
.cat-label { display: none; }

/* ===== YT伸び率グラフ（折りたたみ・2026-08-18） ===== */
/* ボタンは小型化しカード枠（wrapper）の内側に収納・開閉で表記を変えない（2026-08-18指示） */
.di-yt-cardwrap { display: block; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }
.di-yt-cardwrap .swell-yt-card { border: none !important; }
.di-yt-cardwrap .di-yt-trend { margin: 0; padding: 0 16px 10px; }
.di-yt-trend { margin: 8px 0 0; }
/* 開閉ボタン＝ボタン規格(di-btn-outline)準拠・開閉印はサイト標準部品 fa-angle-down（右端・開くと上向きに回転） */
.di-yt-trend summary { cursor: pointer; list-style: none; display: flex; user-select: none; }
.di-yt-trend summary::-webkit-details-marker { display: none; }
.di-yt-trend summary::marker { content: ""; display: none; }
/* サイズは「小さく」の指示どおり（規格の見た目のまま縮小のみ・2026-08-18） */
.di-yt-trend-btn.di-btn-outline { height: 28px !important; padding: 0 12px !important; font-size: 12px !important; }
.di-yt-trend-btn .fa-angle-down { transition: transform .15s; }
.di-yt-trend[open] .di-yt-trend-btn .fa-angle-down { transform: rotate(180deg); }
.di-yt-trend-body { border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; padding: 10px 12px; margin-top: 6px; text-align: left; }
.di-yt-trend-body svg { display: block; width: 100%; height: 72px; }
.di-yt-trend-range { font-size: 11px; color: #888; margin-top: 4px; }
.di-yt-trend-note { font-size: 12px; color: #888; margin: 0; }
/* チャンネルURL登録フォームの折りたたみ（マイページ・2026-08-18） */
.di-yt-urlform summary { cursor: pointer; list-style: none; display: flex; justify-content: center; user-select: none; }
.di-yt-urlform summary::-webkit-details-marker { display: none; }
.di-yt-urlform summary::marker { content: ""; display: none; }
.di-yt-urlform-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #888; padding: 2px 6px; }
.di-yt-urlform summary:hover .di-yt-urlform-btn { color: #555; }
.di-yt-urlform-btn .fa-angle-down { transition: transform .15s; }
.di-yt-urlform[open] .di-yt-urlform-btn .fa-angle-down { transform: rotate(180deg); }


/* --- ルノルマン・コンビ読みページ(4959)：本文冒頭に同じバナー画像があるため、
   Cocoonが本文上に自動表示するアイキャッチを非表示（重複解消・2026-09-04）。
   アイキャッチ自体はOGP・一覧サムネ用に残す --- */
body.page-id-4959 .eye-catch-wrap,
body.page-id-4959 .eye-catch {
  display: none !important;
}





/* ============================================================
   給与試算ページ（page-id-6128）だけ本文を全幅化（2026-09-24）
   ・共通UI（左サイドバー等）は残す
   ・#mainの900px上限（下の詳細度最大化ルール）をさらに上書き
   ・iframeはヘッダー下いっぱいの高さにして二重スクロールを軽減 */
html body.page-id-6128 #container #content #content-in #main {
  max-width: none !important;
  width: 100% !important;
  padding: 0 24px 24px !important;
}
html body.page-id-6128 .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
}
/* 試算側に大見出しがあるためCocoonのページタイトルは二重になり非表示（5173前例と同じ） */
body.page-id-6128 .entry-title { display: none !important; }
body.page-id-6128 iframe[title="給与試算"] {
  /* 高さはiframe自動追従（snippet側JS）に変更・固定高さ撤去 2026-09-24 */
}
@media screen and (max-width: 900px) {
  html body.page-id-6128 #container #content #content-in #main { padding: 0 8px 16px !important; }
}

/* 給与試算（6128）：text-print（5285）と同じグレー地#e9eaedに白カードを浮かべる（2026-09-24） */
html body.page-id-6128 { background: #e9eaed !important; }
body.page-id-6128 .article { background: transparent !important; border-radius: 0; }
html body.page-id-6128 #main { background: transparent !important; }
html body.page-id-6128 .entry-content { background: transparent !important; }

/* 給与試算（6128）：本文下の記事付属パーツを非表示にし、下部の空白を詰める（2026-09-24） */
body.page-id-6128 .article-footer,
body.page-id-6128 .sns-share,
body.page-id-6128 .sns-follow,
body.page-id-6128 .author-box,
body.page-id-6128 .related-entries,
body.page-id-6128 .related-entry,
body.page-id-6128 .comment-area,
body.page-id-6128 #comments,
body.page-id-6128 .pager-post-navi,
body.page-id-6128 .date-tags,
body.page-id-6128 .post-update,
body.page-id-6128 .ad-area {
  display: none !important;
}
html body.page-id-6128 #container #content #content-in #main {
  padding-bottom: 0 !important;
}
body.page-id-6128 .article {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* ===== 管理者ツールページ群 共通デザイン（di-admin-doc・2026-09-24統一・1元管理の正本） ===== */

/* ============================================================
   管理者ツール 共通デザイン .di-admin-doc（2026-09-24 デザイン統一 段階①）
   見た目の正 = page-id-5285（テキストの印刷について）
   グレー地(#e9eaed)に白カードが浮かぶ構成・角丸14px・淡グレー枠。
   配色はグレー階調＋黒のみ（アクセントカラーは使わない）。
   対象：5173(Discordボット仕様)/5278(対占マッチング仕様)/5779(イベント予約スレッド再生方法)
   ページ側の外枠（body背景・サイドバー等）の調整は別途 delete_ranges.md 参照。
   ============================================================ */

.di-admin-doc {
  --doc-card: #ffffff;
  --doc-soft: #f0f1f3;
  --doc-line: #d9dadd;
  --doc-ink: #2c2c2a;
  --doc-ink2: #444441;
  --doc-ink3: #5d5e62;
  --doc-mute: #85868a;
  --doc-lvl1: #c5c6ca;
  --doc-lvl2: #96979b;
  --doc-lvl3: #6c6d71;
  --doc-lvl4: #2c2c2a;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: var(--doc-ink2);
  line-height: 1.7;
  padding: 20px;
}
.di-admin-doc * { box-sizing: border-box; }
.di-admin-doc strong { color: var(--doc-ink); font-weight: 700; }
.di-admin-doc .doc-wrap { max-width: 1100px; margin: 0 auto; }

/* --- ヘッダー --- */
.di-admin-doc .doc-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--doc-line);
  padding-bottom: 12px; margin-bottom: 20px;
  flex-wrap: wrap; gap: 12px;
}
.di-admin-doc .doc-title { font-size: 22px; font-weight: 700; color: var(--doc-ink); letter-spacing: .02em; }
.di-admin-doc .doc-header-left p { color: var(--doc-ink3); font-size: 14px; margin-top: 4px; }
.di-admin-doc .doc-badge {
  background: var(--doc-soft); border: 1px solid var(--doc-line); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; color: var(--doc-ink3); white-space: nowrap;
}

/* --- 導入ノート --- */
.di-admin-doc .doc-notice { background: var(--doc-soft); border-radius: 14px; padding: 16px 20px; margin-bottom: 20px; }
.di-admin-doc .doc-notice-heading { font-size: 18px; font-weight: 700; color: var(--doc-ink); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.di-admin-doc .doc-notice p { font-size: 15px; color: var(--doc-ink2); line-height: 1.9; margin-bottom: 10px; }
.di-admin-doc .doc-notice p:last-child { margin-bottom: 0; }
.di-admin-doc .doc-notice-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.di-admin-doc .doc-notice-point { background: var(--doc-card); border: 1px solid var(--doc-line); border-radius: 10px; padding: 14px 16px; font-size: 14px; color: var(--doc-ink3); line-height: 1.7; }
.di-admin-doc .doc-point-title { font-weight: 700; color: var(--doc-ink2); margin-bottom: 4px; font-size: 14px; }

/* --- セクション見出し --- */
.di-admin-doc .doc-section { margin-bottom: 24px; }
.di-admin-doc .doc-section-title { font-size: 13px; color: var(--doc-ink3); letter-spacing: .1em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.di-admin-doc .doc-section-title::after { content: ''; flex: 1; height: 1px; background: var(--doc-line); }

/* --- STEPフロー --- */
.di-admin-doc .doc-flow { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.di-admin-doc .doc-step { width: 100%; position: relative; }
.di-admin-doc .doc-step-inner { background: var(--doc-card); border: 1px solid var(--doc-line); border-radius: 12px; padding: 0 0 20px; height: 100%; overflow: hidden; }
.di-admin-doc .doc-step-num { font-size: 12px; color: #ffffff; background: #45464a; padding: 8px 20px; margin-bottom: 14px; font-weight: 700; letter-spacing: .05em; }
.di-admin-doc .doc-step-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--doc-ink); padding: 0 20px; }
.di-admin-doc .doc-step-desc { font-size: 14px; color: var(--doc-ink3); line-height: 1.7; padding: 0 20px; }
.di-admin-doc .doc-arrow { display: flex; align-items: center; justify-content: center; padding: 4px 0; color: var(--doc-mute); font-size: 22px; flex-shrink: 0; transform: rotate(90deg); align-self: center; }

/* --- カード共通（汎用の白カード枠） --- */
.di-admin-doc .doc-card { background: var(--doc-card); border: 1px solid var(--doc-line); border-radius: 14px; padding: 20px; }
.di-admin-doc .doc-card > :last-child { margin-bottom: 0; }

/* --- ブランチ／ルールカード（上帯アクセント付き・4段階グレー） --- */
.di-admin-doc .doc-grid-branch { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 8px; }
.di-admin-doc .doc-grid-rule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.di-admin-doc .doc-card-branch,
.di-admin-doc .doc-card-rule {
  background: var(--doc-card); border: 1px solid var(--doc-line); border-radius: 10px;
  padding: 16px; position: relative; overflow: hidden;
}
.di-admin-doc .doc-card-branch::before,
.di-admin-doc .doc-card-rule::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--doc-line); }
.di-admin-doc .doc-card-branch.doc-lvl1::before, .di-admin-doc .doc-card-rule.doc-lvl1::before { background: var(--doc-lvl1); }
.di-admin-doc .doc-card-branch.doc-lvl2::before, .di-admin-doc .doc-card-rule.doc-lvl2::before { background: var(--doc-lvl2); }
.di-admin-doc .doc-card-branch.doc-lvl3::before, .di-admin-doc .doc-card-rule.doc-lvl3::before { background: var(--doc-lvl3); }
.di-admin-doc .doc-card-branch.doc-lvl4::before, .di-admin-doc .doc-card-rule.doc-lvl4::before { background: var(--doc-lvl4); }
.di-admin-doc .doc-card-branch-num { font-size: 26px; font-weight: 700; color: var(--doc-line); position: absolute; top: 10px; right: 14px; }
.di-admin-doc .doc-card-branch-emoji { font-size: 24px; margin-bottom: 8px; }
.di-admin-doc .doc-card-branch-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--doc-ink); }
.di-admin-doc .doc-card-branch-reply { font-size: 13px; color: var(--doc-ink3); line-height: 1.6; margin-top: 8px; }
.di-admin-doc .doc-card-rule-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--doc-ink); }
.di-admin-doc .doc-card-rule-desc { font-size: 13px; color: var(--doc-ink3); line-height: 1.7; }

/* --- タグ --- */
.di-admin-doc .doc-tag {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px;
  border: 1px solid var(--doc-line); background: var(--doc-soft); color: var(--doc-ink3);
}
.di-admin-doc .doc-tag.doc-lvl2 { background: var(--doc-ink3); color: #fff; border-color: var(--doc-ink3); }
.di-admin-doc .doc-tag.doc-lvl3 { background: transparent; color: var(--doc-ink2); border-color: var(--doc-ink3); }
.di-admin-doc .doc-tag.doc-lvl4 { background: var(--doc-ink); color: #fff; border-color: var(--doc-ink); font-weight: 700; }

/* --- 凡例 --- */
.di-admin-doc .doc-legend { display: flex; gap: 20px; margin-top: 8px; flex-wrap: wrap; }
.di-admin-doc .doc-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--doc-ink3); }
.di-admin-doc .doc-legend-dot { width: 10px; height: 3px; border-radius: 2px; background: var(--doc-line); }
.di-admin-doc .doc-legend-dot.doc-lvl1 { background: var(--doc-lvl1); }
.di-admin-doc .doc-legend-dot.doc-lvl2 { background: var(--doc-lvl2); }
.di-admin-doc .doc-legend-dot.doc-lvl3 { background: var(--doc-lvl3); }
.di-admin-doc .doc-legend-dot.doc-lvl4 { background: var(--doc-lvl4); }

/* --- 2カラムパネル（DM通知内容／AI監視レイヤーなど） --- */
.di-admin-doc .doc-panel {
  background: var(--doc-card); border: 1px solid var(--doc-line); border-radius: 12px;
  padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
.di-admin-doc .doc-panel-heading { font-size: 17px; font-weight: 700; color: var(--doc-ink); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.di-admin-doc .doc-panel-left p { font-size: 14px; color: var(--doc-ink3); line-height: 1.8; }
.di-admin-doc .doc-panel-rows { display: flex; flex-direction: column; gap: 8px; }
.di-admin-doc .doc-panel-row { background: var(--doc-soft); border-radius: 8px; padding: 10px 14px; font-size: 14px; color: var(--doc-ink3); line-height: 1.6; }
.di-admin-doc .doc-panel-row-dot { display: flex; align-items: center; gap: 10px; background: var(--doc-soft); border-radius: 8px; padding: 10px 14px; font-size: 14px; color: var(--doc-ink3); }
.di-admin-doc .doc-panel-row-label { font-size: 12px; margin-bottom: 4px; font-weight: 700; color: var(--doc-ink3); }
.di-admin-doc .doc-panel-row-label.doc-lvl2 { color: var(--doc-ink); }
.di-admin-doc .doc-panel-row-label.doc-lvl3 { color: var(--doc-ink2); }
.di-admin-doc .doc-panel-row-label.doc-lvl4 { color: var(--doc-ink); }
.di-admin-doc .doc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--doc-line); }
.di-admin-doc .doc-dot.doc-lvl1 { background: var(--doc-lvl1); }
.di-admin-doc .doc-dot.doc-lvl4 { background: var(--doc-lvl4); }

/* --- 表 --- */
.di-admin-doc .doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.di-admin-doc .doc-table th { text-align: left; padding: 10px 14px; font-size: 12px; color: #ffffff !important; letter-spacing: .05em; background: #45464a !important; border-bottom: 1px solid var(--doc-line); white-space: nowrap; }
.di-admin-doc .doc-table td { padding: 12px 14px; color: var(--doc-ink3); line-height: 1.7; vertical-align: top; border-bottom: 1px solid var(--doc-line); }
.di-admin-doc .doc-table tr:last-child td { border-bottom: none; }
.di-admin-doc .doc-table td:first-child { color: var(--doc-ink); font-weight: 500; }
.di-admin-doc .doc-table tr { background: var(--doc-card); }
.di-admin-doc .doc-highlight { color: var(--doc-ink); font-weight: 700; }
.di-admin-doc .doc-muted { color: var(--doc-ink3); }
.di-admin-doc .doc-ok { color: var(--doc-ink3); }
.di-admin-doc .doc-ng { color: var(--doc-ink); font-weight: 700; }
.di-admin-doc .doc-emphasis-strong { color: var(--doc-ink); font-weight: 700; }
.di-admin-doc .doc-note { font-size: 13px; color: var(--doc-ink3); line-height: 1.7; margin-top: 8px; }
.di-admin-doc .doc-note-strong { color: var(--doc-ink); font-weight: 700; }

/* --- コールアウト（注意書き枠） --- */
.di-admin-doc .doc-callout {
  background: var(--doc-soft); border: 1px solid var(--doc-line); border-left: 3px solid var(--doc-ink3);
  border-radius: 8px; padding: 14px 18px; font-size: 14px; color: var(--doc-ink3); line-height: 1.8; margin-top: 14px;
}
.di-admin-doc .doc-callout strong { color: var(--doc-ink); }

/* --- 通知カード（2カラムグリッド） --- */
.di-admin-doc .doc-grid-notify { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.di-admin-doc .doc-card-notify { background: var(--doc-card); border: 1px solid var(--doc-line); border-radius: 10px; padding: 18px; }
.di-admin-doc .doc-card-notify-icon { font-size: 22px; margin-bottom: 8px; }
.di-admin-doc .doc-card-notify-title { font-size: 15px; font-weight: 700; color: var(--doc-ink); margin-bottom: 6px; }
.di-admin-doc .doc-card-notify-desc { font-size: 13px; color: var(--doc-ink3); line-height: 1.7; }
.di-admin-doc .doc-code { background: var(--doc-soft); border: 1px solid var(--doc-line); border-radius: 4px; padding: 1px 6px; font-size: 12px; color: var(--doc-ink2); }

/* --- レスポンシブ --- */
@media (max-width: 900px) {
  .di-admin-doc .doc-grid-branch { grid-template-columns: repeat(3, 1fr); }
  .di-admin-doc .doc-notice-points { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .di-admin-doc { padding: 12px 16px; }
  .di-admin-doc .doc-grid-branch { grid-template-columns: repeat(2, 1fr); }
  .di-admin-doc .doc-notice-points,
  .di-admin-doc .doc-grid-rule,
  .di-admin-doc .doc-grid-notify { grid-template-columns: 1fr; }
  .di-admin-doc .doc-panel { grid-template-columns: 1fr; }
  .di-admin-doc .doc-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 400px) {
  .di-admin-doc .doc-grid-branch { grid-template-columns: 1fr; }
}

/* ページ外枠（Cocoon側）：page-id-5285/6128と同じグレー地＋白カード構成に統一（段階③） */
html body.page-id-5173,
html body.page-id-5278,
html body.page-id-5779 {
  background: #e9eaed !important;
}
html body.page-id-5173 #sidebar,
html body.page-id-5278 #sidebar,
html body.page-id-5779 #sidebar {
  display: block !important;
}
html body.page-id-5173 #main,
html body.page-id-5278 #main,
html body.page-id-5779 #main {
  background: transparent !important;
}
body.page-id-5173 .article,
body.page-id-5278 .article,
body.page-id-5779 .article {
  background: transparent !important;
  border-radius: 0;
}
body.page-id-5173 .entry-title,
body.page-id-5278 .entry-title,
body.page-id-5779 .entry-title {
  display: none !important;
}
html body.page-id-5173 .entry-content,
html body.page-id-5278 .entry-content,
html body.page-id-5779 .entry-content {
  background: transparent !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* 375px実測での横はみ出し対策：表はカード内で横スクロール（2026-09-25） */
@media (max-width: 640px) {
  .di-admin-doc .doc-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================================
   対占：予約状況・統計ダッシュボード（page-id-5310・[di_taisen_dashboard]）
   段階② 追加分（2026-09-25）
   スコープ：.di-admin-doc 配下のみ。グレー/黒基調・白カード様式（既存部品を継承）。
   JSが直接触るスタイル（tsdShow/tsdMoreが操作するdisplay等）は
   s29_new.php側でインラインのまま残してあり、ここには含めない。
   ============================================================ */

/* ルート：ダッシュボードは800px幅の読み物コラム（既存.di-admin-docのpadding/文字色を継承） */
.di-admin-doc.doc-dashboard {
  max-width: 800px;
  margin: 0 auto;
}

/* --- 見出し（予約状況／通算マッチング件数など／ブロック状況summary共通） ---
   margin は元のインラインstyleが3パターン（24px/32px/なし＝親detailsのmargin任せ）
   だったため、そのまま3パターンを維持する（base=24px、--topは32pxに上書き、
   summaryはmargin:0で親<details>のmargin:32px 0 12pxに委ねる） */
.di-admin-doc .doc-stat-heading {
  font-size: 1.17em;
  font-weight: bold;
  border-left: 4px solid var(--doc-ink);
  padding-left: 10px;
  margin: 12px 0 6px;
  line-height: 1.4;
}
.di-admin-doc .doc-stat-heading.doc-stat-heading--top {
  margin-top: 16px;
}
/* <summary>用：クリック可能・既定のディスクロージャー三角を消す・margin不要（親detailsが持つ） */
.di-admin-doc .doc-stat-heading.doc-stat-summary {
  margin: 0;
  cursor: pointer;
  list-style: none;
}
#taisen-blockacc summary::-webkit-details-marker { display: none; }
#taisen-blockacc summary::marker { content: ""; }

/* --- 小見出し（期グループ別内訳） --- */
.di-admin-doc .doc-stat-subheading {
  font-size: 0.95em;
  font-weight: bold;
  color: var(--doc-ink2);
  margin-bottom: 8px;
}

/* --- 今後/過去 切り替えボタンの行（ボタン自体の色はJS(tsdShow)がcssTextで
   直接書き換えるため、このクラスはボタンではなく行の並びのみを担当） --- */
.di-admin-doc .doc-stat-toggle-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* --- 予約行／ブロック項目の縦並びコンテナ（共通） --- */
.di-admin-doc .doc-stat-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- 予約1件ぶんのカード行（今後／過去共通。tsd-prowはJSがdisplayのみ操作） --- */
.di-admin-doc .doc-stat-row {
  background: var(--doc-card);
  border: 1px solid var(--doc-line);
  border-radius: 14px;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 85%;
  line-height: 1.5;
}
/* 相手名（name_a × name_b） */
/* → 既存の .doc-muted（var(--doc-ink3)）をそのまま流用（新規クラス不要） */
/* ルーム名など補足 */
.di-admin-doc .doc-stat-meta {
  font-size: 13px;
  color: var(--doc-mute);
}
/* 空状態の案内文（確定済みの対占はありません／過去の対占はまだありません／ブロック設定なし） */
.di-admin-doc .doc-stat-empty {
  color: var(--doc-mute);
}
/* 「さらに30件表示」ボタンの外枠（ボタン自体はJS/$btn_offのインラインのまま） */
.di-admin-doc .doc-stat-more-wrap {
  text-align: center;
  margin-top: 10px;
}

/* --- 通算件数・期グループ別内訳の統計カードグリッド --- */
.di-admin-doc .doc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.di-admin-doc .doc-stat-grid.doc-mb-20 {
  margin-bottom: 10px;
}
.di-admin-doc .doc-stat-card {
  background: var(--doc-card);
  border: 1px solid var(--doc-line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  line-height: 1.4;
}
.di-admin-doc .doc-stat-value {
  font-size: 1.6em;
  font-weight: 700;
  color: var(--doc-ink);
}
.di-admin-doc .doc-stat-label {
  font-size: 0.8em;
  color: var(--doc-mute);
  margin-top: 4px;
}

/* --- ブロック状況（管理者のみ・<details>アコーディオン） --- */
.di-admin-doc .doc-stat-details {
  margin: 16px 0 6px;
}
.di-admin-doc .doc-stat-details-body {
  margin-top: 12px;
}
/* ブロック1件ぶんのカード（予約行と違い横並びではないので .doc-stat-row ではなく専用） */
.di-admin-doc .doc-stat-item {
  background: var(--doc-card);
  border: 1px solid var(--doc-line);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 85%;
  line-height: 1.5;
}

/* ============================================================
   ページ外枠（Cocoon側）：page-id-5173/5278/5779と同じグレー地＋白カード構成に統一
   outer_frame.css と同型（page-id-5310向け）
   ============================================================ */
html body.page-id-5310 {
  background: #e9eaed !important;
}
html body.page-id-5310 #sidebar {
  display: block !important;
}
html body.page-id-5310 #main {
  background: transparent !important;
}
body.page-id-5310 .article {
  background: transparent !important;
  border-radius: 0;
}
body.page-id-5310 .entry-title {
  display: none !important;
}
html body.page-id-5310 .entry-content {
  background: transparent !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* 内容が短いページでもフッターをウィンドウ最下部へ（管理者ツール群・2026-09-25） */
html body.page-id-5173 #container,
html body.page-id-5278 #container,
html body.page-id-5779 #container,
html body.page-id-5310 #container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
html body.page-id-5173 #footer,
html body.page-id-5278 #footer,
html body.page-id-5779 #footer,
html body.page-id-5310 #footer {
  margin-top: auto;
}