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

/* ==================================================
   COM≠PASS Wiki Style
   Cocoon Child

   設計ルール：
   - 本文：16px
   - 目次：14px
   - キャラページ：左目次 / 中央本文 / 右プロフィール
   - 固定ページ・トップページ：左目次 / 中央本文
   - プロフィールカードは本文開始位置に揃える
   - absoluteでプロフィールカードを置かない
================================================== */


/* ==================================================
   0. Variables
================================================== */

:root {
  --wiki-text: #202122;
  --wiki-subtext: #54595d;
  --wiki-link: #0645ad;
  --wiki-border: #a2a9b1;
  --wiki-bg: #ffffff;
  --wiki-soft-bg: #f8f9fa;
  --wiki-head-bg: #eaecf0;

  --wiki-container: 1380px;

  --wiki-toc-width: 220px;
  --wiki-toc-gap: 30px;

  --wiki-profile-width: 290px;
  --wiki-profile-gap: 28px;

  --wiki-main-padding-x: 28px;
  --wiki-main-padding-y: 24px;

  --wiki-header-offset: 210px;

  --wiki-body-font-size: 16px;
  --wiki-body-line-height: 1.78;

  --wiki-toc-font-size: 14px;
  --wiki-toc-child-font-size: 13px;

  --wiki-h1-font-size: 30px;
  --wiki-h2-font-size: 22px;
  --wiki-h3-font-size: 17px;

  --wiki-table-font-size: 14px;
  --wiki-infobox-font-size: 13px;
}


/* ==================================================
   1. Base
================================================== */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--wiki-bg);
  color: var(--wiki-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  font-size: var(--wiki-body-font-size);
  line-height: var(--wiki-body-line-height);
}

#container,
#content,
.content,
.content-in,
.main,
.article,
.entry-content {
  background: var(--wiki-bg);
}

a {
  color: var(--wiki-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.main,
.content,
.content-in,
.article,
.entry-content,
.sidebar,
.widget,
.entry-card,
.related-entry-card,
.a-wrap {
  box-shadow: none !important;
  border-radius: 0 !important;
}

.sidebar,
#sidebar {
  display: none !important;
}


/* ==================================================
   2. Hide Blog-like Parts
================================================== */

.date-tags,
.post-date,
.post-update,
.author-info,
.footer-meta,
.sns-share,
.sns-follow,
.sns-share-buttons,
.sns-follow-buttons,
.related-entry-heading,
.related-list,
.pager-post-navi,
.comment-area,
#comment-area,
.cat-link,
.tag-link,
.breadcrumb-caption,
.eye-catch-caption {
  display: none !important;
}


/* ==================================================
   3. Common Article Typography
================================================== */

.article,
.entry-content {
  color: var(--wiki-text);
  font-size: var(--wiki-body-font-size) !important;
  line-height: var(--wiki-body-line-height) !important;
}

.article p,
.entry-content p {
  margin: 0 0 1em !important;
  font-size: var(--wiki-body-font-size) !important;
  line-height: var(--wiki-body-line-height) !important;
}

.article ul,
.article ol,
.entry-content ul,
.entry-content ol {
  margin-top: 0.3em !important;
  margin-bottom: 1em !important;
  padding-left: 1.6em !important;
}

.article li,
.entry-content li {
  margin-bottom: 0.2em !important;
  font-size: var(--wiki-body-font-size) !important;
  line-height: 1.72 !important;
}


/* ==================================================
   4. Common Titles / Headings
================================================== */

.entry-header {
  margin-bottom: 12px !important;
}

.entry-title,
.article h1 {
  background: transparent !important;
  color: var(--wiki-text) !important;
  border: none !important;
  border-bottom: 1px solid var(--wiki-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 0 0 8px !important;
  margin: 0 0 18px !important;

  font-size: var(--wiki-h1-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

.article h2,
.entry-content h2,
.article h2.wp-block-heading,
.entry-content h2.wp-block-heading {
  background: transparent !important;
  color: var(--wiki-text) !important;
  border: none !important;
  border-bottom: 1px solid var(--wiki-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 0 0 4px !important;
  margin: 34px 0 14px !important;

  font-size: var(--wiki-h2-font-size) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.article h2::before,
.article h2::after,
.entry-content h2::before,
.entry-content h2::after,
.article h2.wp-block-heading::before,
.article h2.wp-block-heading::after,
.entry-content h2.wp-block-heading::before,
.entry-content h2.wp-block-heading::after {
  content: none !important;
  display: none !important;
}

.article h3,
.entry-content h3,
.article h3.wp-block-heading,
.entry-content h3.wp-block-heading {
  background: transparent !important;
  color: var(--wiki-text) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 0 !important;
  margin: 24px 0 8px !important;

  font-size: var(--wiki-h3-font-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.article h3::before,
.article h3::after,
.entry-content h3::before,
.entry-content h3::after {
  content: none !important;
  display: none !important;
}

.article h4,
.entry-content h4 {
  background: transparent !important;
  color: var(--wiki-text) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 0 !important;
  margin: 18px 0 6px !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}


/* ==================================================
   5. Common Tables
================================================== */

.article table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 18px 0;
  background: var(--wiki-bg);

  font-size: var(--wiki-table-font-size);
  line-height: 1.55;
}

.article table th,
.article table td,
.entry-content table th,
.entry-content table td {
  border: 1px solid var(--wiki-border);
  padding: 7px 9px;
  vertical-align: top;
}

.article table th,
.entry-content table th {
  background: var(--wiki-head-bg);
  color: var(--wiki-text);
  font-weight: 700;
}


/* ==================================================
   6. Common Images
================================================== */

.eye-catch-wrap {
  margin-bottom: 18px;
}

.eye-catch-wrap img,
.entry-content img,
.article img {
  border-radius: 0;
  box-shadow: none;
}


/* ==================================================
   7. Common TOC Design
   目次の見た目は全ページ共通
================================================== */

.toc,
#toc {
  background: var(--wiki-bg) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding: 0 12px 12px 0 !important;
  margin: 0 !important;

  color: var(--wiki-text) !important;
  font-size: var(--wiki-toc-font-size) !important;
  line-height: 1.5 !important;
}

.toc-title,
.toc .toc-title,
#toc .toc-title {
  display: block !important;

  color: var(--wiki-text) !important;
  font-size: var(--wiki-toc-font-size) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;

  border-bottom: 1px solid var(--wiki-border) !important;
  padding: 0 0 7px !important;
  margin: 0 0 8px !important;

  text-align: left !important;
}

.toc-title::before,
.toc-title::after,
.toc .toc-title::before,
.toc .toc-title::after,
#toc .toc-title::before,
#toc .toc-title::after {
  content: none !important;
  display: none !important;
}

.toc ul,
.toc ol,
#toc ul,
#toc ol,
.toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.toc li,
#toc li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.toc a,
#toc a {
  display: block !important;

  color: var(--wiki-text) !important;
  text-decoration: none !important;

  padding: 4px 4px 4px 10px !important;
  border-left: 2px solid transparent !important;

  font-size: var(--wiki-toc-font-size) !important;
  line-height: 1.5 !important;
}

.toc a:hover,
#toc a:hover {
  color: var(--wiki-link) !important;
  background: var(--wiki-soft-bg) !important;
  border-left-color: var(--wiki-border) !important;
  text-decoration: none !important;
}

.toc ul ul a,
.toc ol ol a,
#toc ul ul a,
#toc ol ol a {
  padding-left: 22px !important;
  font-size: var(--wiki-toc-child-font-size) !important;
  line-height: 1.45 !important;
  color: var(--wiki-subtext) !important;
}

.toc-number {
  color: var(--wiki-subtext) !important;
  margin-right: 4px !important;
}


/* ==================================================
   8. Character Page Layout
   左：目次 / 中央：本文 / 右：プロフィールカード
================================================== */

body.single-character .content-in {
  width: 100% !important;
  max-width: var(--wiki-container) !important;
  margin: 0 auto !important;
  position: relative !important;
  display: block !important;
}

body.single-character .main {
  width: auto !important;
  max-width: none !important;

  margin-left: calc(var(--wiki-toc-width) + var(--wiki-toc-gap)) !important;
  margin-right: 24px !important;

  padding: var(--wiki-main-padding-y) var(--wiki-main-padding-x) 56px !important;

  background: var(--wiki-bg) !important;
  border: none !important;
}

body.single-character .article,
body.single-character .entry-content,
body.single-character .compass-character-body {
  position: static !important;
  color: var(--wiki-text);
  font-size: var(--wiki-body-font-size) !important;
  line-height: var(--wiki-body-line-height) !important;
}

/* キャラページ左目次 */
body.single-character .toc,
body.single-character #toc {
  position: fixed !important;

  top: var(--wiki-header-offset) !important;
  left: max(24px, calc((100vw - var(--wiki-container)) / 2 + 24px)) !important;

  width: var(--wiki-toc-width) !important;
  max-height: calc(100vh - var(--wiki-header-offset) - 40px) !important;
  overflow-y: auto !important;

  z-index: 20 !important;
}

/* タイトルはプロフィールカード側へ伸ばさない */
body.single-character .entry-title,
body.single-character .article h1 {
  max-width: calc(100% - var(--wiki-profile-width) - var(--wiki-profile-gap)) !important;
  margin-right: calc(var(--wiki-profile-width) + var(--wiki-profile-gap)) !important;
}

/* 本文 + 右プロフィールカード */
body.single-character .compass-character-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--wiki-profile-width) !important;
  column-gap: var(--wiki-profile-gap) !important;
  align-items: start !important;
  width: 100% !important;
}

body.single-character .compass-character-body {
  min-width: 0 !important;
}

body.single-character .compass-character-side {
  width: var(--wiki-profile-width) !important;
  align-self: start !important;
}


/* ==================================================
   9. Character Infobox
================================================== */

body.single-character table.wiki-infobox,
body.single-character .entry-content table.wiki-infobox,
body.single-character .article table.wiki-infobox,
body.single-character .compass-character-side table.wiki-infobox {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  float: none !important;
  clear: none !important;

  width: 100% !important;
  margin: 0 !important;
  z-index: auto !important;

  border-collapse: collapse !important;
  border-spacing: 0 !important;

  background: var(--wiki-soft-bg) !important;
  border: 1px solid var(--wiki-border) !important;

  font-size: var(--wiki-infobox-font-size) !important;
  line-height: 1.5 !important;
}

body.single-character table.wiki-infobox th,
body.single-character table.wiki-infobox td {
  border: 1px solid var(--wiki-border) !important;
  padding: 7px 9px !important;
  vertical-align: top !important;

  font-size: var(--wiki-infobox-font-size) !important;
  line-height: 1.5 !important;
}

body.single-character table.wiki-infobox th {
  background: var(--wiki-head-bg) !important;
  color: var(--wiki-text) !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 38% !important;
}

body.single-character table.wiki-infobox th[colspan="2"] {
  background: var(--wiki-head-bg) !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.single-character table.wiki-infobox .wiki-infobox-image {
  background: var(--wiki-bg) !important;
  text-align: center !important;
  padding: 8px !important;
}

body.single-character table.wiki-infobox .wiki-infobox-image img {
  display: block !important;
  width: 100% !important;
  max-width: 260px !important;
  height: auto !important;
  margin: 0 auto !important;

  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* ==================================================
   10. Page / Front Page Layout
   左：目次 / 中央：本文
================================================== */

body.page:not(.single-character) .content-in,
body.home .content-in,
body.front-page .content-in {
  width: 100% !important;
  max-width: var(--wiki-container) !important;
  margin: 0 auto !important;
  position: relative !important;
  display: block !important;
}

/* 固定ページ・トップページも左目次分を確保 */
body.page:not(.single-character) .main,
body.home .main,
body.front-page .main {
  width: auto !important;
  max-width: 900px !important;

  margin-left: calc(var(--wiki-toc-width) + var(--wiki-toc-gap)) !important;
  margin-right: auto !important;

  padding: var(--wiki-main-padding-y) var(--wiki-main-padding-x) 56px !important;

  background: var(--wiki-bg) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 固定ページ・トップページの左目次 */
body.page:not(.single-character) .toc,
body.page:not(.single-character) #toc,
body.home .toc,
body.home #toc,
body.front-page .toc,
body.front-page #toc {
  position: fixed !important;

  top: var(--wiki-header-offset) !important;
  left: max(24px, calc((100vw - var(--wiki-container)) / 2 + 24px)) !important;

  width: var(--wiki-toc-width) !important;
  max-height: calc(100vh - var(--wiki-header-offset) - 40px) !important;
  overflow-y: auto !important;

  z-index: 20 !important;
}

/* 固定ページで目次がない場合も本文幅は保つ */
body.page:not(.single-character) .article,
body.page:not(.single-character) .entry-content,
body.home .article,
body.home .entry-content,
body.front-page .article,
body.front-page .entry-content {
  color: var(--wiki-text) !important;
  font-size: var(--wiki-body-font-size) !important;
  line-height: var(--wiki-body-line-height) !important;
}


/* ==================================================
   11. Archive / List
================================================== */

.archive-title {
  background: transparent !important;
  border-bottom: 1px solid var(--wiki-border) !important;
  padding-bottom: 6px !important;

  font-size: 26px !important;
  font-weight: 400 !important;
}

.entry-card-title {
  font-size: 16px;
  font-weight: 600;
}


/* ==================================================
   12. Responsive
================================================== */

@media screen and (max-width: 1180px) {
  body.single-character .content-in,
  body.page:not(.single-character) .content-in,
  body.home .content-in,
  body.front-page .content-in {
    max-width: none !important;
    margin: 0 !important;
  }

  body.single-character .main,
  body.page:not(.single-character) .main,
  body.home .main,
  body.front-page .main {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 28px 42px !important;
  }

  body.single-character .entry-title,
  body.single-character .article h1 {
    max-width: none !important;
    margin-right: 0 !important;
  }

  body.single-character .toc,
  body.single-character #toc,
  body.page:not(.single-character) .toc,
  body.page:not(.single-character) #toc,
  body.home .toc,
  body.home #toc,
  body.front-page .toc,
  body.front-page #toc {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    width: auto !important;
    max-height: none !important;
    overflow: visible !important;

    background: var(--wiki-soft-bg) !important;
    border: 1px solid var(--wiki-border) !important;

    padding: 12px 14px !important;
    margin: 0 0 22px !important;
  }

  body.single-character .compass-character-layout {
    display: block !important;
  }

  body.single-character .compass-character-side {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  body.single-character table.wiki-infobox {
    width: 100% !important;
    margin: 0 0 20px !important;
  }
}

@media screen and (max-width: 834px) {
  :root {
    --wiki-body-font-size: 15px;
    --wiki-toc-font-size: 14px;
    --wiki-toc-child-font-size: 13px;
    --wiki-h1-font-size: 25px;
    --wiki-h2-font-size: 20px;
    --wiki-h3-font-size: 17px;
  }

  body.single-character .main,
  body.page:not(.single-character) .main,
  body.home .main,
  body.front-page .main {
    padding: 20px 16px 40px !important;
  }

  .entry-title,
  .article h1 {
    margin-bottom: 16px !important;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --wiki-body-font-size: 15px;
    --wiki-h1-font-size: 23px;
    --wiki-h2-font-size: 19px;
    --wiki-h3-font-size: 16px;
    --wiki-table-font-size: 13px;
    --wiki-infobox-font-size: 13px;
  }

  body.single-character .main,
  body.page:not(.single-character) .main,
  body.home .main,
  body.front-page .main {
    padding: 18px 12px 32px !important;
  }

  .article table,
  .entry-content table {
    font-size: var(--wiki-table-font-size) !important;
  }

  .article th,
  .article td,
  .entry-content th,
  .entry-content td {
    padding: 6px 7px !important;
  }
}

.wiki-auto-link {
  color: #0645ad !important;
  text-decoration: none !important;
}

.wiki-auto-link:hover {
  text-decoration: underline !important;
}

/* =========================================================
   キャラクター一覧ページ
   ========================================================= */

.compass-character-list {
  margin-top: 28px;
}

/* 一覧ページだけ本文幅を広げる */
body.page .entry-content:has(.compass-character-list) {
  max-width: 1080px;
}

body.page .article:has(.compass-character-list),
body.page .entry-content:has(.compass-character-list) {
  width: 100%;
}

/* グループ */
.compass-character-list-group {
  margin-bottom: 64px;
}

.compass-character-list-heading {
  margin: 0 0 22px;
  padding-bottom: 7px;
  border-bottom: 1px solid #a2a9b1;
  color: #202122;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.45;
}

/* 一覧グリッド */
.compass-character-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 34px 30px;
}

/* カード本体 */
.compass-character-card {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* リンク全体 */
.compass-character-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 画像 */
.compass-character-card-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid #a2a9b1;
  background: #f8f9fa;
}

.compass-character-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No Image */
.compass-character-card-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #72777d;
  background: #f8f9fa;
  font-size: 13px;
  line-height: 1.4;
}

/* テキスト */
.compass-character-card-body {
  padding: 8px 0 0;
}

/* 名前：Cocoonのh3装飾を打ち消す */
.article .compass-character-card-name,
.compass-character-card-name {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #202122;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

/* 症能は一覧では非表示 */
.compass-character-card-ability {
  display: none;
}

/* hover */
.compass-character-card-link:hover .compass-character-card-name {
  color: #0645ad;
  text-decoration: underline;
}

.compass-character-card-link:hover .compass-character-card-image {
  border-color: #72777d;
}

/* スマホ調整 */
@media screen and (max-width: 834px) {
  .compass-character-list {
    margin-top: 22px;
  }

  .compass-character-list-group {
    margin-bottom: 48px;
  }

  .compass-character-list-heading {
    margin-bottom: 18px;
    font-size: 20px;
  }

  .compass-character-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 26px 18px;
  }

  .article .compass-character-card-name,
  .compass-character-card-name {
    font-size: 13px !important;
  }
}

@media screen and (max-width: 480px) {
  .compass-character-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

/* =========================================================
   キャラクター一覧：横幅拡張・5列対応
   ========================================================= */

/* キャラ一覧がある固定ページだけ、本文エリアを広げる */
body.page .article:has(.compass-character-list),
body.page .entry-content:has(.compass-character-list) {
  max-width: 1180px !important;
  width: 1180px !important;
}

/* Cocoon側の本文中央寄せ・幅制限をゆるめる */
body.page .main:has(.compass-character-list),
body.page .article:has(.compass-character-list) {
  max-width: 1180px !important;
}

/* グリッド：MacBook幅で5枚入る想定 */
.compass-character-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 34px 24px;
}

/* 画像は少しだけコンパクトに */
.compass-character-card-image {
  aspect-ratio: 3 / 4;
}

/* 名前を少し小さく */
.article .compass-character-card-name,
.compass-character-card-name {
  font-size: 12.5px !important;
  line-height: 1.45;
}

/* 画面が狭い時は4列 */
@media screen and (max-width: 1180px) {
  body.page .article:has(.compass-character-list),
  body.page .entry-content:has(.compass-character-list),
  body.page .main:has(.compass-character-list) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .compass-character-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* タブレットは3列 */
@media screen and (max-width: 834px) {
  .compass-character-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 18px;
  }
}

/* スマホは2列 */
@media screen and (max-width: 480px) {
  .compass-character-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

/* =========================================================
   キャラクター一覧ページ：目次ぶんの左余白を解除
   ========================================================= */

/* キャラ一覧ページではCocoon/Wiki用の左余白をリセット */
body.page .main:has(.compass-character-list) {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 1180px !important;
  max-width: 1180px !important;
}

/* 記事本文側も広げる */
body.page .article:has(.compass-character-list),
body.page .entry-content:has(.compass-character-list) {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* キャラ一覧ページでは目次を非表示 */
body.page .article:has(.compass-character-list) .toc,
body.page .main:has(.compass-character-list) .toc,
body.page .entry-content:has(.compass-character-list) .toc {
  display: none !important;
}

/* 5列表示 */
.compass-character-card-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 34px 26px;
}

/* 名前は小さめ */
.article .compass-character-card-name,
.compass-character-card-name {
  font-size: 12px !important;
  line-height: 1.45;
}

/* 1180px未満では横幅を画面に合わせる */
@media screen and (max-width: 1180px) {
  body.page .main:has(.compass-character-list),
  body.page .article:has(.compass-character-list),
  body.page .entry-content:has(.compass-character-list) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .compass-character-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 834px) {
  .compass-character-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 480px) {
  .compass-character-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   ギャラリーページ
   WordPress標準ギャラリー用
   ========================================================= */

/* ギャラリーがある固定ページでは、Wiki用の左目次余白を解除 */
body.page .main:has(.gallery) {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 1180px !important;
  max-width: 1180px !important;
}

/* 記事本文側も広げる */
body.page .article:has(.gallery),
body.page .entry-content:has(.gallery) {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ギャラリーページでは目次を非表示 */
body.page .article:has(.gallery) .toc,
body.page .main:has(.gallery) .toc,
body.page .entry-content:has(.gallery) .toc {
  display: none !important;
}

/* WordPress標準ギャラリーをグリッド化 */
.gallery {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 0 !important;
}

/* Cocoon/WordPress標準のfloatや幅指定を解除 */
.gallery .gallery-item {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gallery .gallery-icon {
  margin: 0 !important;
}

/* リンク */
.gallery .gallery-icon a {
  display: block;
  width: 100%;
}

/* 画像 */
.gallery .gallery-icon img {
  display: block;
  width: 100%;
  height: auto;
  border: none !important;
  box-shadow: none !important;
}

/* キャプションは非表示 */
.gallery .gallery-caption {
  display: none !important;
}

/* 横幅が狭い時 */
@media screen and (max-width: 1180px) {
  body.page .main:has(.gallery),
  body.page .article:has(.gallery),
  body.page .entry-content:has(.gallery) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* タブレット */
@media screen and (max-width: 834px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

/* スマホ */
@media screen and (max-width: 480px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* =========================================================
   キャラクターフレーズ
   ========================================================= */

body.single-character .compass-character-phrases {
  margin: 0 0 28px !important;
  padding: 2px 0 2px 16px !important;
  border-left: 3px solid var(--wiki-border) !important;
  background: transparent !important;
}

body.single-character .compass-character-phrase {
  margin: 0 0 8px !important;
  color: var(--wiki-text) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

body.single-character .compass-character-phrase:last-child {
  margin-bottom: 0 !important;
}