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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* --- Cocoon目次 修正版（中央寄せ・文字くっきり） --- */

/* 目次全体のボックス */
.toc {
  /* 背景を透過 */
  background-color: transparent !important;

  /* 中央寄せ（ボックス自体を画面中央へ） */
  margin: 2em auto !important;
  /* ボックス内の文字も中央寄せ */
  text-align: center;
  /* 横幅をコンテンツに合わせる（広がりすぎないようにする） */
  display: table; 

  /* ネオンカラーの枠線設定（少し輝きを抑制） */
  border: 2px solid #0ff;
  box-shadow: 0 0 4px #0ff,
              inset 0 0 4px #0ff;
  
  border-radius: 8px;
  padding: 20px;
}

/* 目次リストの調整 */
.toc ul, .toc ol {
    /* リストの中身も中央寄せを徹底 */
    text-align: center;
    padding-left: 0; /* 左の余白を消して真ん中に */
    list-style-position: inside; /* 数字や点を内側に入れてズレを防ぐ */
}

/* 「目次」というタイトル文字 */
.toc-title {
  color: #007bff !important;
  /* 発光を半径1pxに抑えてくっきりさせる */
  text-shadow: 0 0 1px #00ffff;
  border-bottom: none;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 目次のリンク文字 */
.toc a {
  color: #007bff !important;
  /* 発光をほぼ無くし、ほんの僅かな縁取り程度にする */
  text-shadow: 0 0 1px #007bff; 
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600; /* 文字を太くして視認性を高める */
}

/* リンクにマウスを乗せた時の効果 */
.toc a:hover {
  color: #0ff !important;
  /* ホバー時だけ少し強く光らせる */
  text-shadow: 0 0 5px #0ff;
}

/* 数字や・の色 */
.toc ul li,
.toc ol li {
    color: #007bff;
    /* リストマークのスタイル調整（中央寄せで見栄えが悪くならないよう） */
    list-style: none; /* いったん点や数字を消す（中央寄せの場合その方が綺麗です） */
}

/* もし数字（1. 2. 3...）を表示させたい場合は以下を有効化してください */
/* .toc ol li { list-style: decimal inside; } 
*/

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

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

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