@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.3
*/

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

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

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

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

/*
 Theme Name:  Cocoon Child - mania.romptn.com dark purple
 Description: romptn AI マニアック版サブドメイン用ダーク×紫テーマ（フロントのみ適用）
 Template:    cocoon-master
*/

/* =========================================================
   0. ベース設定（※すべて body:not(.wp-admin) でフロント限定）
   ========================================================= */

/* ページ全体のベース */
body:not(.wp-admin) {
  background: #0b0213 !important; /* ダーク紫黒 */
  color: #ffffff !important;      /* 基本文字色は白 */
}

/* メインコンテナ類の背景は透過（白ベタ対策） */
body:not(.wp-admin) .wrapper,
body:not(.wp-admin) .container,
body:not(.wp-admin) #content,
body:not(.wp-admin) .main,
body:not(.wp-admin) .content {
  background: transparent !important;
}

/* テキスト全般を白に統一 */
body:not(.wp-admin),
body:not(.wp-admin) p,
body:not(.wp-admin) span,
body:not(.wp-admin) div,
body:not(.wp-admin) li,
body:not(.wp-admin) time {
  color: #ffffff !important;
}

/* 見出し（h1〜h6）も白で統一 */
body:not(.wp-admin) h1,
body:not(.wp-admin) h2,
body:not(.wp-admin) h3,
body:not(.wp-admin) h4,
body:not(.wp-admin) h5,
body:not(.wp-admin) h6 {
  color: #ffffff !important;
}

/* リンク色（紫系） */
body:not(.wp-admin) a {
  color: #9b4dff !important;
  text-decoration: none;
}
body:not(.wp-admin) a:hover {
  color: #d2a3ff !important;
  text-decoration: underline;
}

/* =========================================================
   1. ヘッダー / グローバルナビ / 検索
   ========================================================= */

/* ヘッダー背景 */
body:not(.wp-admin) .header-container,
body:not(.wp-admin) #header,
body:not(.wp-admin) #header-container {
  background: #140024 !important;
}

/* グローバルナビ */
body:not(.wp-admin) #navi,
body:not(.wp-admin) .navi-in {
  background: #140024 !important;
}

/* ナビメニュー文字 */
body:not(.wp-admin) #navi a {
  color: #ffffff !important;
}
body:not(.wp-admin) #navi a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(208, 160, 255, 0.8);
}

/* ヘッダー検索フォーム */
body:not(.wp-admin) .search-form,
body:not(.wp-admin) .search-form .search-edit,
body:not(.wp-admin) .search-menu-item {
  background: #1b0031 !important;
  color: #ffffff !important;
  border: 1px solid #35005f !important;
}

/* プレースホルダも見えるように */
body:not(.wp-admin) .search-form .search-edit::placeholder {
  color: #c2a6ff;
}

/* =========================================================
   2. 記事ページ（本文・カード・関連記事・抜粋）
   ========================================================= */

/* 記事まわり一式の背景をダーク化 */
body:not(.wp-admin) main#main.main,
body:not(.wp-admin) .main .article,
body:not(.wp-admin) .article,
body:not(.wp-admin) .article-header,
body:not(.wp-admin) .article-footer,
body:not(.wp-admin) .entry-content,
body:not(.wp-admin) .entry-content.cf {
  background: #0f001a !important;
}

/* 記事カード・一覧カードなど */
body:not(.wp-admin) .entry-card,
body:not(.wp-admin) .article-list-card,
body:not(.wp-admin) .related-entry-card,
body:not(.wp-admin) .rect-entry-card,
body:not(.wp-admin) .index-tab-contents .entry-card {
  background: #150021 !important;
  border: 1px solid #35005f !important;
  box-shadow: 0 0 15px rgba(120, 0, 255, 0.25);
}

/* 記事タイトル（一覧・単一記事） */
body:not(.wp-admin) .entry-card-title,
body:not(.wp-admin) .card-title,
body:not(.wp-admin) .archive-title,
body:not(.wp-admin) .article-title,
body:not(.wp-admin) .article-header .entry-title {
  color: #ffffff !important;
}

/* 記事内のメタ情報（投稿日・カテゴリなど） */
body:not(.wp-admin) .entry-meta,
body:not(.wp-admin) .entry-meta a,
body:not(.wp-admin) .post-date,
body:not(.wp-admin) .post-date a,
body:not(.wp-admin) .cat-link,
body:not(.wp-admin) .cat-link a {
  color: #e0d0ff !important;
}

/* 抜粋文（excerpt）をすべて白に統一 */
body:not(.wp-admin) .entry-card-snippet,
body:not(.wp-admin) .entry-snippet,
body:not(.wp-admin) .entry-summary,
body:not(.wp-admin) .excerpt,
body:not(.wp-admin) .card-snippet,
body:not(.wp-admin) .article-snippet {
  color: #ffffff !important;
}

/* スライダー内の抜粋文 */
body:not(.wp-admin) .carousel-entry-card-snippet {
  color: #ffffff !important;
}

/* 記事下「関連記事」ブロック */
body:not(.wp-admin) .under-entry-content,
body:not(.wp-admin) .under-entry-content .related-entries,
body:not(.wp-admin) .under-entry-content .rect-entry-card,
body:not(.wp-admin) .under-entry-content .related-list {
  background: #0f001a !important;
  border-color: #35005f !important;
}

/* 関連記事の見出し */
body:not(.wp-admin) .related-entry-heading,
body:not(.wp-admin) .related-entry-heading .main-caption {
  color: #ffffff !important;
}

/* ブログ / アーカイブの一覧カード（保険） */
body:not(.wp-admin) .blog .entry-card,
body:not(.wp-admin) .archive .entry-card,
body:not(.wp-admin) .home .entry-card {
  background: #150021 !important;
  border: 1px solid #35005f !important;
}

/* 本文の行間をやや広めに */
body:not(.wp-admin) .entry-content p {
  line-height: 1.8;
}

/* =========================================================
   3. サイドバー / ウィジェット
   ========================================================= */

body:not(.wp-admin) .sidebar,
body:not(.wp-admin) .sidebar .widget {
  background: #12001f !important;
  color: #ffffff !important;
}

body:not(.wp-admin) .sidebar a {
  color: #ffffff !important;
}
body:not(.wp-admin) .sidebar a:hover {
  color: #d2a3ff !important;
}

/* ウィジェットタイトル */
body:not(.wp-admin) .widget-title,
body:not(.wp-admin) .sidebar .widget-title {
  background: #140024 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #4b00a5 !important;
}

/* =========================================================
   4. トップスライダー / インデックス
   ========================================================= */

/* スライダー全体 */
body:not(.wp-admin) .carousel {
  background: #140024 !important;
}

/* スライダー内カード */
body:not(.wp-admin) .carousel .carousel-entry-card {
  background: #190030 !important;
  border: 1px solid #42007b !important;
}

/* スライダータイトル */
body:not(.wp-admin) .carousel-entry-card-title {
  color: #ffffff !important;
}

/* インデックスリストやタブの背景 */
body:not(.wp-admin) .index-tab-wrap,
body:not(.wp-admin) .index-tab-contents {
  background: #0f001a !important;
}

/* =========================================================
   5. パンくず / フッター / 区切り線
   ========================================================= */

/* パンくずリスト */
body:not(.wp-admin) #breadcrumb.breadcrumb,
body:not(.wp-admin) #breadcrumb .breadcrumb-home,
body:not(.wp-admin) #breadcrumb .breadcrumb-item {
  background: #0f001a !important;
  color: #ffffff !important;
  border-top: 1px solid #35005f;
}

/* パンくず内リンク */
body:not(.wp-admin) #breadcrumb a {
  color: #e0d0ff !important;
}
body:not(.wp-admin) #breadcrumb a:hover {
  color: #ffffff !important;
}

/* フッター */
body:not(.wp-admin) .footer,
body:not(.wp-admin) .footer-in {
  background: #12001c !important;
  color: #bbbbbb !important;
}

/* フッターメニュー */
body:not(.wp-admin) .footer a {
  color: #c39bff !important;
}
body:not(.wp-admin) .footer a:hover {
  color: #ffffff !important;
}

/* 区切り線など */
body:not(.wp-admin) hr {
  border-color: #4b00a5 !important;
}

/* =========================================================
   6. ボタン / モバイルフッター
   ========================================================= */

/* ボタン共通 */
body:not(.wp-admin) button,
body:not(.wp-admin) .btn,
body:not(.wp-admin) input[type="submit"],
body:not(.wp-admin) input[type="button"],
body:not(.wp-admin) a.btn,
body:not(.wp-admin) a.button {
  background: #6f1aff !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(111, 26, 255, 0.5);
}

/* ホバー時 */
body:not(.wp-admin) button:hover,
body:not(.wp-admin) .btn:hover,
body:not(.wp-admin) input[type="submit"]:hover,
body:not(.wp-admin) input[type="button"]:hover,
body:not(.wp-admin) a.btn:hover,
body:not(.wp-admin) a.button:hover {
  background: #8c33ff !important;
  color: #ffffff !important;
}

/* スマホフッターボタン（Cocoon 固有） */
body:not(.wp-admin) .mobile-footer-menu,
body:not(.wp-admin) .mobile-footer-button {
  background: #150021 !important;
}

body:not(.wp-admin) .mobile-footer-menu a,
body:not(.wp-admin) .mobile-footer-button a {
  color: #ffffff !important;
}

/* =========================================================
   7. 細かい調整（キャプション / コード / 引用）
   ========================================================= */

body:not(.wp-admin) .wp-caption-text {
  color: #f0e8ff !important;
}

body:not(.wp-admin) pre,
body:not(.wp-admin) code,
body:not(.wp-admin) kbd,
body:not(.wp-admin) samp {
  background: #1c0933 !important;
  color: #ffffff !important;
  border: 1px solid #35005f !important;
}

body:not(.wp-admin) blockquote {
  border-left: 4px solid #9b4dff !important;
  background: #180028 !important;
  color: #ffffff !important;
}

/* ==========================================
   mania見出しデザイン統一（h2 / h3 / h4）
   ※フロントのみ適用（wp-admin除外）
   ========================================== */

/* h2：一番目立つブロック見出し（紫背景＋白文字） */
body:not(.wp-admin) .entry-content h2,
body:not(.wp-admin) .article h2 {
  background: #190030 !important;              /* 濃い紫背景 */
  color: #ffffff !important;                   /* 白文字 */
  padding: 12px 16px !important;               /* 内側余白 */
  border-left: 4px solid #9b4dff !important;   /* 左に太めの紫ライン */
  margin: 24px 0 16px !important;
  border-radius: 4px;
  font-size: 1.4em;
}

/* Cocoonの装飾を消しておく */
body:not(.wp-admin) .entry-content h2::before,
body:not(.wp-admin) .entry-content h2::after,
body:not(.wp-admin) .article h2::before,
body:not(.wp-admin) .article h2::after {
  display: none !important;
  background: none !important;
  border: none !important;
}


/* h3：ライン見出し（左ラインのみ・背景は透過） */
body:not(.wp-admin) .entry-content h3,
body:not(.wp-admin) .article h3 {
  background: transparent !important;
  color: #ffffff !important;
  border-left: 3px solid #9b4dff !important;   /* 紫ラインで階層感 */
  padding: 4px 0 4px 12px !important;
  margin: 20px 0 12px !important;
  font-size: 1.2em;
}

/* Cocoonの余計な装飾をリセット */
body:not(.wp-admin) .entry-content h3::before,
body:not(.wp-admin) .entry-content h3::after,
body:not(.wp-admin) .article h3::before,
body:not(.wp-admin) .article h3::after {
  display: none !important;
  background: none !important;
  border: none !important;
}


/* h4：シンプルな下線付き見出し */
body:not(.wp-admin) .entry-content h4,
body:not(.wp-admin) .article h4 {
  background: transparent !important;
  color: #ffffff !important;
  padding: 2px 0 4px !important;
  margin: 18px 0 8px !important;
  font-size: 1.05em;
  border-bottom: 1px solid #9b4dff !important; /* 紫のアンダーライン */
  display: inline-block;                       /* 下線が文字幅にフィット */
}

/* Cocoonの装飾をリセット */
body:not(.wp-admin) .entry-content h4::before,
body:not(.wp-admin) .entry-content h4::after,
body:not(.wp-admin) .article h4::before,
body:not(.wp-admin) .article h4::after {
  display: none !important;
  background: none !important;
  border: none !important;
}

/* ==========================================
   mania仕様：テーブル（table）の視認性改善
   ========================================== */

/* テーブル全体の枠線 */
body:not(.wp-admin) table,
body:not(.wp-admin) th,
body:not(.wp-admin) td {
  border: 1px solid #4b00a5 !important; /* 明るめ紫で境界線を強調 */
  border-collapse: collapse !important;
}

/* セルの背景色：段差をつけて見やすく */
body:not(.wp-admin) table td,
body:not(.wp-admin) table th {
  background: #140024 !important; /* ヘッダーと相性のいい濃い紫 */
  color: #ffffff !important;
  padding: 10px 12px !important;
}

/* 1行おきに背景を少し変える（読みやすさUP） */
body:not(.wp-admin) table tr:nth-child(even) td {
  background: #1c0033 !important; /* 少し明るい紫 */
}

/* ヘッダー行（1行目）の強調 */
body:not(.wp-admin) table tr:first-child td,
body:not(.wp-admin) table tr:first-child th {
  background: #240040 !important; /* ひとつ濃い紫で見出し感 */
  font-weight: bold !important;
}

/* テーブルの外側に余白 */
body:not(.wp-admin) table {
  margin: 20px 0;
  width: 100%;
}

/* ==========================================
   mania仕様：アンダーラインマーカー（marker-under）
   ========================================== */

/* 通常のアンダーラインマーカー */
body:not(.wp-admin) .marker-under {
  background: none !important;                     /* Cocoonの黄色背景を無効化 */
  color: #ffffff !important;                       /* 白文字を維持 */
  border-bottom: 3px solid #9b4dff !important;     /* ネオン紫ライン */
  padding-bottom: 2px;
  box-shadow: 0 2px 6px rgba(155, 77, 255, 0.4);    /* 下方向に紫の光 */
}

/* ホバー時に少し発光させる */
body:not(.wp-admin) .marker-under:hover {
  border-bottom-color: #d2a3ff !important;
  box-shadow: 0 3px 8px rgba(210,163,255,0.6);
}

/* ==========================================
   mania仕様：内部ブログカード（internal-blogcard）のダーク化
   ========================================== */

body:not(.wp-admin) .blogcard-wrap.internal-blogcard-wrap,
body:not(.wp-admin) .blogcard.internal-blogcard {
  background: #150021 !important;                 /* カード背景：ダーク紫 */
  border: 1px solid #35005f !important;           /* 紫の枠線 */
  box-shadow: 0 0 12px rgba(120, 0, 255, 0.35);   /* ほんのりネオングロー */
  color: #ffffff !important;
}

/* カード全体クリック領域の余白と角丸 */
body:not(.wp-admin) .blogcard.internal-blogcard {
  padding: 10px 12px !important;
  border-radius: 6px;
}

/* サムネイルまわり */
body:not(.wp-admin) .internal-blogcard-thumbnail,
body:not(.wp-admin) .internal-blogcard-thumb-image {
  background: #0f001a !important;
  border-radius: 4px;
}

/* タイトル */
body:not(.wp-admin) .internal-blogcard-title,
body:not(.wp-admin) .blogcard-title {
  color: #ffffff !important;
  font-weight: 600;
}

/* スニペット（抜粋部分） */
body:not(.wp-admin) .internal-blogcard-snippet,
body:not(.wp-admin) .blogcard-snippet,
body:not(.wp-admin) .internal-blogcard-snippet p {
  color: #f0e8ff !important;
}

/* フッター（ドメイン・日付） */
body:not(.wp-admin) .internal-blogcard-footer {
  border-top: 1px solid #35005f !important;
  margin-top: 8px;
  padding-top: 6px;
}

/* ドメイン表示部分 */
body:not(.wp-admin) .internal-blogcard-domain,
body:not(.wp-admin) .blogcard-domain {
  color: #c2a6ff !important;
}

/* 日付部分 */
body:not(.wp-admin) .internal-blogcard-date,
body:not(.wp-admin) .blogcard-post-date {
  color: #e0d0ff !important;
}

/* ホバー時：少しだけ浮かせる */
body:not(.wp-admin) a.blogcard-wrap.internal-blogcard-wrap:hover .blogcard.internal-blogcard {
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(155, 77, 255, 0.6);
  transition: all 0.15s ease-out;
}

/* ==========================================
   mania仕様：ラベルボックス（label-box）
   ・タイトル帯：濃い紫 + 白文字
   ・本文：ダーク紫 + 紫枠
   ・PC/スマホで左右ぴったり揃える
   対象：wp-block-cocoon-blocks-label-box-1
   ========================================== */

/* 親ボックス：Cocoonのデフォ装飾をリセット */
body:not(.wp-admin) .wp-block-cocoon-blocks-label-box-1,
body:not(.wp-admin) .cocoon-block-label-box,
body:not(.wp-admin) .label-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 24px 0 !important;
}

/* タイトル帯（保護者ができること 等） */
body:not(.wp-admin) .wp-block-cocoon-blocks-label-box-1 .label-box-label {
  display: block;
  background: #190030 !important;             /* 濃い紫帯 */
  border: 1px solid #9b4dff !important;       /* 明るめ紫の枠 */
  border-bottom: none !important;             /* 下は本文枠とつなげる */
  padding: 8px 14px !important;
  border-radius: 10px 10px 0 0 !important;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

/* タイトル文字 */
body:not(.wp-admin) .wp-block-cocoon-blocks-label-box-1 .label-box-label-text {
  color: #ffffff !important;
  background: none !important;
  border: none !important;
  text-shadow: none !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 本文エリア（中身の枠） */
body:not(.wp-admin) .wp-block-cocoon-blocks-label-box-1 .label-box-content {
  background: #150021 !important;             /* ダーク紫 */
  border: 1px solid #9b4dff !important;       /* タイトルと同色の枠 */
  border-top: none !important;                /* タイトルとの境界線を重ねない */
  padding: 16px 20px 18px !important;
  border-radius: 0 0 10px 10px !important;
  color: #ffffff !important;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.7;
}

/* リスト・テキストの調整 */
body:not(.wp-admin) .wp-block-cocoon-blocks-label-box-1 .label-box-content ul {
  margin: 0;
  padding-left: 1.3em;
}

body:not(.wp-admin) .wp-block-cocoon-blocks-label-box-1 .label-box-content li {
  color: #ffffff !important;
  margin-bottom: 0.4em;
}

/* スマホでは余白を少しだけコンパクトに */
@media screen and (max-width: 767px) {
  body:not(.wp-admin) .wp-block-cocoon-blocks-label-box-1 .label-box-label {
    padding: 6px 10px !important;
  }
  body:not(.wp-admin) .wp-block-cocoon-blocks-label-box-1 .label-box-content {
    padding: 12px 14px 14px !important;
  }
}

/* ==========================================
   mania仕様：Cocoon アイコンボックス（alert-box 等）
   ・レイアウト崩れを防ぎつつ紫テーマに統一
   ========================================== */

/* 共通レイアウト＆背景 */
body:not(.wp-admin) .common-icon-box.wp-block-cocoon-blocks-icon-box {
  position: relative;
  background: #190030 !important;             /* 紫背景 */
  border: 1px solid #9b4dff !important;       /* 明るめ紫の枠 */
  border-radius: 8px;
  color: #ffffff !important;
  padding: 12px 16px 12px 52px !important;    /* 左にアイコン分の余白 */
  margin: 16px 0 !important;
  box-sizing: border-box;
}

/* 中のテキスト */
body:not(.wp-admin) .common-icon-box.wp-block-cocoon-blocks-icon-box p {
  margin: 0;
  line-height: 1.7;
  color: #ffffff !important;
}

/* アイコン（::before）を丸く整える */
body:not(.wp-admin) .common-icon-box.wp-block-cocoon-blocks-icon-box::before {
  /* content は Cocoon 側の FontAwesome 指定をそのまま使う */
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #9b4dff;                        /* 丸の中を紫に */
  color: #ffffff !important;                  /* アイコンを白に */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: none !important;
  box-shadow: 0 0 6px rgba(155, 77, 255, 0.6);
}

/* alert-box / information-box / memo-box などで背景だけ変えたい場合の雛形
body:not(.wp-admin) .common-icon-box.alert-box.wp-block-cocoon-blocks-icon-box { background: #2a001f !important; }
body:not(.wp-admin) .common-icon-box.information-box.wp-block-cocoon-blocks-icon-box { background: #13002c !important; }
body:not(.wp-admin) .common-icon-box.memo-box.wp-block-cocoon-blocks-icon-box { background: #151525 !important; }
*/

/* =========================================================
   mania仕様：監修者ボックス（supervisor-box）
   PC：左右並び / SP：縦積み
   ========================================================= */

body:not(.wp-admin) .supervisor-box {
  border: 1px solid #9b4dff;          /* 魔ニア紫枠 */
  border-radius: 10px;
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 24px 0;
}

/* 左側：アイコン＋名前 */
body:not(.wp-admin) .supervisor-box-left {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-shrink: 0;
}

/* 顔アイコン */
body:not(.wp-admin) .supervisor-avatar {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}
body:not(.wp-admin) .supervisor-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

/* ラベル・名前周り */
body:not(.wp-admin) .supervisor-label {
  font-size: 11px;
  color: #c2a6ff;           /* 少し薄い紫 */
  margin-bottom: 4px;
}
body:not(.wp-admin) .supervisor-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
body:not(.wp-admin) .supervisor-links {
  margin-top: 8px;
}
body:not(.wp-admin) .supervisor-links img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: block;
}

/* 右側：説明文 */
body:not(.wp-admin) .supervisor-box-right {
  flex: 1;
  min-width: 0;
}
body:not(.wp-admin) .supervisor-description {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* =========================
   スマホ（縦幅が狭い場合）
   ========================= */
@media screen and (max-width: 767px) {
  body:not(.wp-admin) .supervisor-box {
    flex-direction: column;      /* 上下に縦並び */
    padding: 16px 14px;
    gap: 14px;
  }

  body:not(.wp-admin) .supervisor-box-left {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
  }

  body:not(.wp-admin) .supervisor-name {
    font-size: 16px;
  }

  body:not(.wp-admin) .supervisor-description {
    font-size: 13px;
  }
}

/* ==========================================
   mania仕様：Gutenbergグループ(block-group)の横並び復活
   ========================================== */

/* フロント側だけ適用（管理画面には干渉しない） */
body:not(.wp-admin) .entry-content .wp-block-group.is-layout-flex {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

/* is-nowrap が付いている場合は折り返さない（PC想定） */
body:not(.wp-admin) .entry-content .wp-block-group.is-layout-flex.is-nowrap {
  flex-wrap: nowrap;
}

/* 中の画像・動画を横並びでいい感じに分配 */
body:not(.wp-admin) .entry-content .wp-block-group.is-layout-flex > * {
  margin: 0;
  flex: 1 1 0;
  min-width: 0; /* はみ出し防止 */
}

/* スマホでは縦積みに戻す */
@media (max-width: 768px) {
  body:not(.wp-admin) .entry-content .wp-block-group.is-layout-flex {
    flex-direction: column;
  }

  body:not(.wp-admin) .entry-content .wp-block-group.is-layout-flex.is-nowrap {
    flex-wrap: wrap; /* モバイルでは折り返し許可 */
  }
}

/* ================================
   Mania トップカテゴリ（紫ドット × 白文字）
================================ */

.mania-category-nav-section {
  margin: 32px 0 40px;
}

.mania-category-nav {
  margin: 0;
  padding: 0;
}

/* リスト本体 */
.mania-category-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

/* 各項目 */
.mania-category-nav-list > li {
  margin: 0;
}

/* 白文字を最優先で適用（ポイント） */
.mania-category-nav-list > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;

  padding-left: 16px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;

  color: #ffffff !important;   /* <<< これで確実に白文字に */
  text-decoration: none;
  white-space: nowrap;
}

/* 左の紫ドット */
.mania-category-nav-list > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #b06cff;
}

/* hoverは薄紫で */
.mania-category-nav-list > li > a:hover {
  color: #d8b6ff !important;   /* <<< ここも確実に反映 */
}

/* PC：6列 */
@media (min-width: 769px) {
  .mania-category-nav-list > li {
    flex: 0 0 calc(100% / 6 - 32px);
  }
}

/* SP：横スクロール */
@media (max-width: 768px) {
  .mania-category-nav-section {
    margin: 16px -12px 28px;
  }

  .mania-category-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .mania-category-nav-list {
    flex-wrap: nowrap;
    gap: 0 26px;
    padding: 0 16px;
    min-width: max-content;
  }

  .mania-category-nav-list > li {
    flex: 0 0 auto;
  }

  .mania-category-nav-list > li > a {
    font-size: 0.92rem;
  }

  .mania-category-nav::-webkit-scrollbar {
    display: none;
  }
}

/* =========================================
   固定ページ ID=1065（トップページ）専用
   タイトル / 日付 / アイコン / ヘッダー余白を全て非表示
========================================= */

/* ▼ 1. ページタイトル（H1・見出し類）を非表示 */
.page-id-1065 .entry-title,
.page-id-1065 .post-title,
.page-id-1065 h1.entry-title {
  display: none !important;
}

/* ▼ 2. 公開日・更新日・投稿メタを非表示 */
.page-id-1065 .entry-meta,
.page-id-1065 .post-meta,
.page-id-1065 .post-date,
.page-id-1065 .entry-date,
.page-id-1065 .published,
.page-id-1065 .updated,
.page-id-1065 time {
  display: none !important;
}

/* ▼ 3. 時計アイコン(FontAwesome)を非表示 */
.page-id-1065 .fa-clock-o,
.page-id-1065 .fa-clock,
.page-id-1065 .post-date .fa {
  display: none !important;
}

/* ▼ 4. タイトル＋日付を囲っていたヘッダー領域を丸ごと消す */
.page-id-1065 .entry-header,
.page-id-1065 .page-header,
.page-id-1065 .post-header,
.page-id-1065 .c-page-header,
.page-id-1065 .ct-page-hero,
.page-id-1065 header.page-header {
  display: none !important;
}

/* ▼ 5. トップページの最上部の不要余白をゼロに（超重要） */
.page-id-1065 .entry-content,
.page-id-1065 .post-content,
.page-id-1065 .l-entry,
.page-id-1065 .c-content,
.page-id-1065 .ct-main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ▼ 6. 最初のブロック（カテゴリリスト）が上に詰まるように調整 */
.page-id-1065 .entry-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ================================
   新着AIニュース（Maniaダークテーマ版）
================================ */

.mania-ai-news-section {
  margin: 40px 0 56px;
}

/* 左右2カラムのベースレイアウト */
.mania-ai-news-inner {
  display: flex;
  gap: 12px;                /* ← スライダーと右カラムの距離（詰め気味） */
  align-items: flex-start;
}

/* 左：サムネスライダー（やや小さめ） */
.mania-ai-news-left {
  flex: 0 0 44%;            /* ← 右側を広く取りたいので少し細め */
}

.mania-ai-news-slider {
  position: relative;
  overflow: hidden;
  border-radius: 0px;
  background:
    radial-gradient(circle at top left, rgba(176,108,255,0.45), transparent 55%),
    radial-gradient(circle at bottom right, rgba(0,230,255,0.18), transparent 55%),
    #050013;

  /* 縦横比ベースでサイズを決定（ここで“全体の小ささ”を調整） */
  aspect-ratio: 16 / 9;     /* 16:9 で比率固定 */
  max-height: 220px;        /* ★小さくしたい場合は 180px / 160px などに変更 */
}

/* 横並びスライド */
.mania-ai-news-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
}

.mania-ai-news-slide {
  flex: 0 0 100%;
  height: 100%;
}

.mania-ai-news-slide a {
  display: block;
  height: 100%;
}

.mania-ai-news-slide img {
  display: block;
  width: 100%;
  height: 100%;             /* スライダーの高さにフィットさせる */
  object-fit: cover;
  border-radius: 16px;
}

/* ドットインジケーター */
.mania-ai-news-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 14px;
}

.mania-ai-news-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  background: #4b3a7a;
  padding: 0;
  cursor: pointer;
}

.mania-ai-news-dot.is-active {
  width: 11px;
  height: 11px;
  background: #b06cff;
}

/* 右：タイトル＆リスト */
.mania-ai-news-right {
  flex: 1 1 56%;            /* ← 左より少し広めに */
  display: flex;
  flex-direction: column;
}

/* 見出し行（新着AIニュース + more） */
.mania-ai-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 10px;
  padding-bottom: 10px;

  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* タイトルテキスト（ラインなし・シンプル） */
.mania-ai-news-title {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

/* more → リンク */
.mania-ai-news-more {
  font-size: 0.95rem;
  font-weight: 600;
  color: #b06cff;
  text-decoration: none;
  white-space: nowrap;
}

.mania-ai-news-more:hover {
  text-decoration: underline;
}

/* タイトルリスト */
.mania-ai-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mania-ai-news-item {
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mania-ai-news-item:first-child {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.mania-ai-news-item a {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.5;
  color: #e5ddff;
  text-decoration: none;
}

/* スライダーと同期するハイライト */
.mania-ai-news-item.is-active {
  background: radial-gradient(circle at left, rgba(176,108,255,0.4), transparent 65%);
  border-radius: 999px;
  margin: 4px 0;
}

.mania-ai-news-item.is-active a {
  color: #ffffff;
}

.mania-ai-news-item a:hover {
  color: #d8b6ff;
}

/* ================================
   スマホ：縦並び
================================ */
@media (max-width: 768px) {
  .mania-ai-news-inner {
    flex-direction: column;
    gap: 24px;
  }

  .mania-ai-news-left,
  .mania-ai-news-right {
    flex: 0 0 auto;
  }

  .mania-ai-news-section {
    margin: 32px 0 40px;
  }

  .mania-ai-news-title {
    font-size: 1.15rem;
  }

  .mania-ai-news-item {
    padding: 10px 16px;
  }

  /* スマホでもアスペクト比でサイズ管理（必要なら高さ調整） */
  .mania-ai-news-slider {
    max-height: 220px;
  }
}

/* ================================
   新着記事（最新8件グリッド）
================================ */

.mania-latest-section {
  margin: 48px 0 60px;
}

/* タイトル行 */
.mania-latest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mania-latest-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
}

.mania-latest-more {
  font-size: 0.95rem;
  font-weight: 600;
  color: #b06cff;
  text-decoration: none;
}

.mania-latest-more:hover {
  text-decoration: underline;
}

/* グリッド本体 */
.mania-latest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ★ PC: 4列 */
  gap: 16px 14px;
}

/* カード */
.mania-latest-item {
  display: flex;
  flex-direction: column;
}

/* サムネイル */
.mania-latest-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0px;
  background: #111;
}

/* 記事タイトル */
.mania-latest-text {
  display: block;
  margin-top: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #e5ddff;
  text-decoration: none;
  line-height: 1.45;
}

.mania-latest-text:hover {
  color: #ffffff;
}

/* ================================
   スマホ表示
================================ */
@media (max-width: 768px) {
  .mania-latest-grid {
    grid-template-columns: 1fr;  /* ★ スマホは1列 */
    gap: 20px;
  }

  .mania-latest-title {
    font-size: 1.2rem;
  }

  .mania-latest-thumb img {
    border-radius: 12px;
  }
}

/* ================================
   ピックアップ記事 セクション
   （カードは mania-latest- と共通）
================================ */

.mania-pickup-section {
  margin: 48px 0 60px;
}

/* 見出し行（タイトルのみ） */
.mania-pickup-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 22px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mania-pickup-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
}

/* グリッドは新着記事と同じレイアウトを利用
   → .mania-latest-grid ですでに 4列 × 2段 が定義済み */

@media (max-width: 768px) {
  .mania-pickup-title {
    font-size: 1.25rem;
  }
}

/* ================================
   週間アクセスランキング
   （カードは mania-latest-* を流用）
================================ */

.mania-weekly-section {
  margin: 48px 0 60px;
}

/* 見出し行 */
.mania-weekly-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 22px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mania-weekly-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
}

/* グリッドは新着記事と同じ .mania-latest-grid を再利用 */

/* ランキング用カード：バッジを重ねるため相対配置 */
.mania-weekly-item {
  position: relative;
}

/* 順位バッジ（左上） */
.mania-weekly-badge {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;

  min-width: 30px;
  height: 34px;
  padding: 4px 10px 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 0px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(60, 60, 60, 0.88); /* デフォルト（4位以降） */
}

/* 1〜3位だけカラー変化 */
.mania-weekly-badge.rank-1 {
  background: linear-gradient(135deg, #ffb300, #ffde7b); /* ゴールド */
  color: #402500;
}

.mania-weekly-badge.rank-2 {
  background: linear-gradient(135deg, #cfd8dc, #ffffff); /* シルバー */
  color: #37474f;
}

.mania-weekly-badge.rank-3 {
  background: linear-gradient(135deg, #ff8a65, #ffcc80); /* ブロンズ */
  color: #4e2a16;
}

.mania-weekly-badge span {
  line-height: 1;
}

/* スマホ時：見出しとバッジを少し小さく */
@media (max-width: 768px) {
  .mania-weekly-title {
    font-size: 1.25rem;
  }

  .mania-weekly-badge {
    top: 6px;
    left: 6px;
    min-width: 26px;
    height: 30px;
    font-size: 0.8rem;
    padding: 3px 8px 5px;
  }
}

/* ================================
   カテゴリリストの上余白を詰める（全ページ）
   ※ 既存の margin: 32px 0 40px; を上書き
================================ */

/* トップページのカテゴリリスト（ページ最上部） */
body.home .mania-category-nav-section {
  margin-top: 0px !important;   /* ほぼ詰める / もっと詰めたいなら 0px */
}

/* 記事ページ（single post）のカテゴリリスト */
body.single-post .mania-category-nav-section {
  margin-top: 0px !important;
}

/* アーカイブページ（カテゴリ・タグ一覧など）のカテゴリリスト */
body.archive .mania-category-nav-section {
  margin-top: 0px !important;
}

/* ヘッダーロゴを左寄せに強制 */
.site-header,
.header-container,
.logo-header,
.site-title,
.site-title-text {
  text-align: left !important;
}

/* ロゴ画像が inline-block の場合に左寄せ */
.site-header img,
.header-container img,
.logo-header img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ============================================
   【Cocoon 外部ブログカード】ダークテーマ最適化 & 白カバー完全除去
   対象：<a class="blogcard-wrap external-blogcard-wrap a-wrap ...">
============================================ */

/* 外側リンクの背景・フィルタ・オーバーレイ無効化 */
.blogcard-wrap.external-blogcard-wrap,
.blogcard-wrap.external-blogcard-wrap *,
.blogcard-wrap.external-blogcard-wrap::before,
.blogcard-wrap.external-blogcard-wrap::after {
  background: transparent !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* 外側 a-wrap の hover 時の白反転も消す */
a.blogcard-wrap.external-blogcard-wrap:hover {
  background: rgba(255,255,255,0.06) !important;
  filter: none !important;
}

/* Cocoon が生成する白い覆い（a-wrap の ::before/after）を完全無効化 */
a.a-wrap::before,
a.a-wrap::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* --------------------------------------------
   内部カード本体の見た目（ダークテーマに最適化）
-------------------------------------------- */
.blogcard.external-blogcard {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  color: #ffffff !important;
}

/* サムネはそのまま表示 */
.external-blogcard-thumbnail img {
  filter: none !important;
  opacity: 1 !important;
}

/* タイトル / スニペット / ドメインの文字色 */
.external-blogcard-title {
  color: #ffffff !important;
}

.external-blogcard-snippet {
  color: #d8d2ff !important;
}

.external-blogcard-domain {
  color: #b06cff !important;
}

/* hover 時のテキストカラーの崩れ防止 */
.blogcard-wrap.external-blogcard-wrap:hover .external-blogcard-title,
.blogcard-wrap.external-blogcard-wrap:hover .external-blogcard-snippet,
.blogcard-wrap.external-blogcard-wrap:hover .external-blogcard-domain {
  color: inherit !important;
}