@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){
  /*必要ならばここにコードを書く*/
}

/************************************
** 2025.1.12 追加
** トップへ戻るボタンに「目次」ラベルを表示
************************************/
.go-to-toc-button {
    flex-direction: column;
}
.go-to-toc-button:after {
    content:'目次';
    font-size: 12px; /* 文字サイズ */
    margin-top: 2px;
}

/************************************
 * 2025.2.13 追加
 * 目次レイアウト編集
 *************************************/
.toc {
  /*border: 2px solid #fe619a; /*全体の枠線の色*/
  font-size: 14px; /*フォントサイズ*/
  line-height: 1.5; /*行の高さ指定*/
  padding: 0;
  margin-top: 3em; /*目次上の空間*/
  margin-bottom: 1em; /*目次下の空間*/
  min-width:65%; /*目次横幅*/
  border-radius: 6px;/*角丸コーナー*/
  /*background: #fff9fc; /*背景カラー*/
  /*box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
@media screen and (max-width: 1030px){
  .toc {
    min-width:100%; /*モバイル時の目次横幅*/
  }
}
/* 目次全体（おでかけレモン風） */
.toc-title {
  background: #FFECA8;        /* 目次タイトル背景カラー（やさしいレモン） */
  color: #5A4A1A;             /* 文字色：こげ茶で読みやすく */
  font-size: 16px;
  text-align: center;
  padding: 6px 16px;
  font-weight: bold;
  border: 1px solid #C9A642;  /* うっすら縁取りでカードっぽく */
  border-radius: 4px 4px 0 0; /* 角丸でやさしい印象 */
}

.toc-title::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f0ca';           /* 目次アイコン（リストアイコン） */
  position: static;
  color: #5A4A1A;             /* タイトル文字と同じ色に統一 */
  margin-right: 0.5em;
  font-weight: 500;
  font-style: normal;
}

.toc-content {
  padding: 6px 12px;
  border: 1px solid #C9A642;     /* タイトルの枠線と揃える */
  border-top: none;              /* タイトルとつなげて1ブロックに見せる */
  border-radius: 0 0 4px 4px;    /* 下側だけ角丸 */
  background: #FFFDF5;           /* ほんのり白クリームで紙っぽく */
}

.toc-content li a:hover {
  text-decoration: none;
  background: #FFF8D9;           /* hover時の淡いクリーム */
  transition: all 0.4s ease;
  border-radius: 2px;
}

.toc ul.toc-list>li,
.toc ol.toc-list>li {
  margin-top: 0.4em;
}

.toc ul.toc-list>li>a,
.toc ol.toc-list>li>a {
  border-bottom: 1px solid #C9A642; /* h2クラスのラインを黄土色に */
  font-weight: bold;
  color: #5A4A1A;                   /* 見出しリンク文字もこげ茶で統一 */
}

.toc ul li a,
.toc ol li a {
  display: block;
  border-bottom: 1px dotted #C9A642; /* 下位階層はドット線 */
  margin-left: -20px;
  padding-left: 20px;
  color: #5A4A1A;                    /* 文字色を揃える */
}
/* 目次ここまで */

/************************************
** 内部ブログカード調整（サムネイルあり／下部情報なし）
************************************/
.internal-blogcard .blogcard-favicon,
.internal-blogcard .blogcard-domain,
.internal-blogcard .blogcard-site-name {
  display: none !important;
}

/* 枠・文字調整（シンプルで読みやすく） */
.internal-blogcard {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.internal-blogcard .blogcard-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.internal-blogcard .blogcard-snippet {
  color: #555;
  font-size: 0.9em;
}

/* サムネイルの見た目を整える（角丸・サイズ） */
.internal-blogcard .blogcard-thumbnail img {
  border-radius: 4px;
  object-fit: cover;
  width: 100%;
  height: auto;
}