@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
*/

/************************************
** YYRP ルールページ 可読性スタイル
** 2026-07-24 追加 / 削除すれば元の見た目に戻ります
************************************/
:root{
  --yy:#49ACED;
  --yy-deep:#1f7fc0;
  --yy-bg:#eef6fd;
  --yy-line:#dfe6ee;
  --yy-ink:#1b2430;
  --yy-sub:#4a5461;
}

/* --- 本文の基本 --- */
.entry-content{ color:var(--yy-ink); line-height:1.95; }
.entry-content p{ margin:0 0 1.1em; }

/* --- 見出し：章(h2) --- */
.entry-content h2.wp-block-heading,
.entry-content > h2{
  background:var(--yy-bg) !important;
  border:none !important;
  border-left:6px solid var(--yy) !important;
  border-radius:0 8px 8px 0 !important;
  padding:14px 18px !important;
  margin:3em 0 1.1em !important;
  font-size:1.3rem !important;
  line-height:1.5 !important;
  color:var(--yy-ink) !important;
  font-weight:700 !important;
}
.entry-content h2.wp-block-heading::before,
.entry-content h2.wp-block-heading::after{ display:none !important; }
.entry-content > *:first-child h2, .entry-content h2:first-child{ margin-top:.4em !important; }

/* --- 見出し：節(h3) --- */
.entry-content h3.wp-block-heading,
.entry-content > h3{
  background:none !important;
  border:none !important;
  border-bottom:2px solid var(--yy-line) !important;
  border-radius:0 !important;
  padding:0 0 8px 14px !important;
  margin:2.4em 0 .9em !important;
  position:relative;
  font-size:1.1rem !important;
  line-height:1.5 !important;
  color:var(--yy-ink) !important;
  font-weight:700 !important;
}
.entry-content h3.wp-block-heading::before{
  content:"" !important; display:block !important;
  position:absolute; left:0; top:.15em; bottom:14px; width:4px;
  background:var(--yy); border-radius:2px;
}
.entry-content h3.wp-block-heading::after{ display:none !important; }

/* --- 見出し：小項目(h4/h5) --- */
.entry-content h4.wp-block-heading, .entry-content > h4,
.entry-content h5.wp-block-heading, .entry-content > h5{
  display:inline-block !important;
  background:#e9eff5 !important;
  border:none !important;
  border-radius:7px !important;
  padding:6px 14px !important;
  margin:2em 0 .8em !important;
  font-size:.98rem !important;
  line-height:1.5 !important;
  color:var(--yy-ink) !important;
  font-weight:700 !important;
}
.entry-content h4.wp-block-heading::before,
.entry-content h5.wp-block-heading::before,
.entry-content h4.wp-block-heading::after,
.entry-content h5.wp-block-heading::after{ display:none !important; }

/* --- 箇条書き：ルールサイトの主役 --- */
.entry-content ul, .entry-content ol{ margin:0 0 1.5em; padding-left:1.6em; }
.entry-content li{ margin:0 0 .55em; line-height:1.95; }
.entry-content ul > li{ list-style:none; position:relative; }
.entry-content ul > li::before{
  content:""; position:absolute; left:-1.05em; top:.72em;
  width:7px; height:7px; border-radius:50%; background:var(--yy);
}
.entry-content ol > li::marker{ color:var(--yy-deep); font-weight:700; }

/* ネストは縦線でインデントを可視化（読み飛ばし防止） */
.entry-content li > ul, .entry-content li > ol{
  margin:.55em 0 .2em; padding-left:1.5em;
  border-left:2px solid var(--yy-line);
}
.entry-content li > ul > li::before{ background:#9fc4de; width:6px; height:6px; }

/* --- 表：比較しやすく --- */
.entry-content table{
  border-collapse:separate; border-spacing:0; width:100%;
  border:1px solid var(--yy-line); border-radius:10px; overflow:hidden;
  margin:1.2em 0 1.8em; font-variant-numeric:tabular-nums;
}
.entry-content table th{
  background:#e8f2fb !important; color:var(--yy-ink) !important;
  text-align:left !important; font-weight:700;
  padding:12px 14px !important; border:none !important;
  border-bottom:2px solid var(--yy) !important;
}
.entry-content table td{
  padding:11px 14px !important; border:none !important;
  border-bottom:1px solid var(--yy-line) !important;
}
.entry-content table tr:last-child td{ border-bottom:none !important; }
.entry-content table tbody tr:nth-child(even) td{ background:#fafcfe; }
.entry-content table tbody tr:hover td{ background:#eef6fd; }

/* --- 目次：長くても圧迫しない --- */
.entry-content .toc, #toc, .toc{
  width:100% !important; max-width:100% !important;
  background:#f7fafc; border:1px solid var(--yy-line) !important;
  border-radius:10px; padding:18px 22px !important;
  margin:0 0 2.4em !important;
}
.toc-title{ font-weight:700; color:var(--yy-ink); }
.toc-list{ columns:2; column-gap:34px; }
.toc-list li{ break-inside:avoid; margin-bottom:.35em; line-height:1.7; }
.toc-list li::before{ display:none !important; }
.toc a{ color:var(--yy-sub); text-decoration:none; }
.toc a:hover{ color:var(--yy-deep); text-decoration:underline; }

/* --- 本文リンクを明示 --- */
.entry-content a{ color:var(--yy-deep); text-decoration:underline; text-underline-offset:3px; }
.entry-content .toc a, .entry-content .toc-list a{ text-decoration:none; color:var(--yy-sub); }
.entry-content .toc a:hover, .entry-content .toc-list a:hover{ text-decoration:underline; color:var(--yy-deep); }
.entry-content a:hover{ color:var(--yy); }

/* --- 強調 --- */
.entry-content strong{ font-weight:700; }

/* --- スマホ --- */
@media screen and (max-width:834px){
  .toc-list{ columns:1; }
  .entry-content h2.wp-block-heading{ font-size:1.18rem !important; padding:12px 14px !important; margin-top:2.2em !important; }
  .entry-content h3.wp-block-heading{ font-size:1.04rem !important; }
  .entry-content table{ font-size:.9rem; }
}

/* --- サイドバー：ルール一覧ナビ --- */
.yy-rulenav{
  background:#fff; border:1px solid var(--yy-line); border-radius:10px;
  padding:16px 16px 14px; font-size:.92rem;
}
.yy-rulenav-t{
  font-weight:700; color:var(--yy-ink); font-size:.95rem;
  padding:0 0 10px 12px; margin:0 0 10px; position:relative;
  border-bottom:2px solid var(--yy-line);
}
.yy-rulenav-t::before{
  content:""; position:absolute; left:0; top:.1em; bottom:12px;
  width:4px; background:var(--yy); border-radius:2px;
}
.yy-rulenav ul{ list-style:none; margin:0; padding:0; }
.yy-rulenav li{ margin:0; padding:0; }
.yy-rulenav li::before{ display:none !important; }
.yy-rulenav a{
  display:block; padding:7px 10px; border-radius:6px;
  color:var(--yy-sub); text-decoration:none; line-height:1.5;
}
.yy-rulenav a:hover{ background:var(--yy-bg); color:var(--yy-deep); }
.yy-rulenav li.yy-sub a{ padding-left:24px; font-size:.88rem; position:relative; }
.yy-rulenav li.yy-sub a::before{
  content:""; position:absolute; left:12px; top:50%; width:6px; height:1px; background:#c3ced9;
}
.yy-rulenav li.yy-cur > a{
  background:var(--yy-bg); color:var(--yy-deep); font-weight:700;
  box-shadow:inset 3px 0 0 var(--yy);
}
.yy-rulenav-n{
  margin:12px 0 0; padding-top:10px; border-top:1px solid var(--yy-line);
  font-size:.78rem; color:#8d97a3; line-height:1.6;
}
/* サイドバーの見出し装飾をナビ内で無効化 */
.yy-rulenav h2, .yy-rulenav h3{ all:unset; }

/* --- 子ページ一覧（page-list / 旧 [subpages]） --- */
.entry-content .wp-block-page-list{
  list-style:none !important; margin:1.2em 0 1.8em !important; padding:0 !important;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;
}
.entry-content .wp-block-page-list li{ margin:0 !important; padding:0 !important; }
.entry-content .wp-block-page-list li::before{ display:none !important; }
.entry-content .wp-block-page-list a{
  display:block; padding:14px 16px;
  background:#fff; border:1px solid var(--yy-line); border-left:4px solid var(--yy);
  border-radius:8px; text-decoration:none !important; color:var(--yy-ink) !important;
  font-weight:700; line-height:1.5;
  transition:background .15s ease, box-shadow .15s ease;
}
.entry-content .wp-block-page-list a:hover{
  background:var(--yy-bg); box-shadow:0 3px 10px rgba(20,35,55,.08);
}
@media screen and (max-width:600px){
  .entry-content .wp-block-page-list{ grid-template-columns:1fr; }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
