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

/* 2023/12/22 highlighting code block をカスタマイズ START */
/* Darkのみ有効 Lightの場合は太文字になるのかぼやける */
/* VSCode 風 */
.hcb_wrap.hcb_wrap code, .hcb_wrap.hcb_wrap pre { color: #9cdcfe!important; background: #1e1e1e!important;}/* 全体 */
.token.keyword { color: #c586c0!important;}/* 予約語 */
.token.keyword.def { color: #569cd6!important; font-style: initial!important;}/* 予約語def */
.token.string { color: #ce9178!important;}/* 文字列 */
.token.comment { color: #7ba85f!important;}/* コメント */
.token.class-name {color: #38cdae!important;}/* クラス名 */
.token.function { color: #dcdcaa!important;}/* 関数 */
.token.operator, .token.punctuation { color: #c8c8c8!important;}/* 演算子・記号(句読点) */
.token.number { color: #bcd2b0!important;}/* 数字 */
.token.boolean { color: #569cd6!important;}/* ブール */
.token.interpolation .token.punctuation { color: #569cd6!important;}/* リテラル内の記号(句読点) */
.token.builtin { color: #e3e3e3!important; font-style: initial!important;}/* 組み込み */
/* 2023/12/22 highlighting code block をカスタマイズ END */

/* 2024/1/17 サイトをコピペ『サイドバーの目次を記事の位置にあわせて追従させる』をカスタマイズ START */

/* toc====================== */
ol.toc-list {
    max-height: 500px;
    overflow-y: auto;
    width: auto; /* 2024/7/25 貯蓄株を働かせよう！の目次表示がおかしいので260px⇒autoに変更 幅が狭かったので */
    margin: 0 auto; /* 2024/7/25 貯蓄株を働かせよう！の目次表示がおかしいのでこの行を追加 中央へ */
    font-size: 0.9rem; /* 文字サイズを少し小さく */
}

ol.toc-list li {
    margin-left: 20px; /* リストの左側のマージンを調整 */
}

/* h1 */
.toc-list li a.current {
    color: #000; /* 現在のページの文字色を黒に */
    font-weight: bold; /* 現在のページの文字を太字に */
    background-color: transparent !important; /* 現在のページの背景を無色に */
}

/* h2 */
.toc-list ol > li:has(a.current) {
    color: #000; /* 現在のページの文字色を黒に */
    font-weight: bold; /* 現在のページの文字を太字に */
    background-color: transparent !important; /* 現在のページの背景を無色に */
}

.toc-list li a:not(.current) {
    color: #c9c9c9;
}

.toc-list li a:hover {
    background-color: #d0d0d0; /* マウスオーバー時の背景色を少し濃いグレーに */
    color: #000; /* マウスオーバー時の文字色を黒に */
    font-weight: bold; /* マウスオーバー時に文字を太字に */
    transition: color 0.3s, font-weight 0.3s, background-color 0.3s; /* 色変更のトランジション効果 */
}

/* 2024/1/17 『サイドバーの目次を記事の位置にあわせて追従させる』をカスタマイズ END */

/* 2024/8/01　独自に追加 『サイドバーのおすすめサイトの表示をカスタマイズ START */

.recommended-site-card {
    margin-bottom: 20px;
}

.site-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 10px; /* 余白を追加してクリック領域を広げる */
    transition: background-color 0.3s; /* 背景色変更のトランジション効果 */
}

.site-content {
    display: flex;
    width: 100%;
}

.site-image {
    flex: 0 0 30%; /* 画像が全体の30% */
    margin-right: 10px;
}

.site-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.site-text {
    flex: 1; /* テキストが残りの70% */
    font-size: 0.85rem; /* テーマのフォントサイズより少し小さく指定 */
}

.site-text p {
    margin: 0;
    color: #333;
    transition: color 0.3s; /* 色変更のトランジション効果 */
}

.site-link:hover {
    background-color: #f0f0f0; /* マウスオーバー時の背景色 */
}

.site-link:hover .site-text p {
    color: #388e3c ; /* マウスオーバー時の文字色 */
	font-weight: bold; /* マウスオーバー時の文字を太字に */
}

/* 2024/8/01 『サイドバーのおすすめサイトの表示をカスタマイズ END */

/* 2024/8/01 元々あるクラスを上書き修正（後にあるものが優先）『最近の投稿タイトルリンク、カテゴリーリンク、アーカイブリストの表示をカスタマイズ START */

/* 最近の投稿タイトルリンク */
.wp-block-latest-posts__post-title:hover {
    color: #000000; /* マウスオーバー時の文字色 */
    font-weight: bold; /* マウスオーバー時の文字を太字に */
    background-color: #f0f0f0; /* マウスオーバー時の背景色（オプション） */
    transition: color 0.3s, font-weight 0.3s, background-color 0.3s; /* 色変更のトランジション効果 */
}

/* カテゴリーリンク */
.wp-block-categories-list .cat-item a:hover {
    color: #000000; /* マウスオーバー時の文字色 */
    font-weight: bold; /* マウスオーバー時の文字を太字に */
    background-color: #f0f0f0; /* マウスオーバー時の背景色（オプション） */
    transition: color 0.3s, font-weight 0.3s, background-color 0.3s; /* 色変更のトランジション効果 */
}

/* アーカイブリストのリンクマウスオーバー時 */
.wp-block-archives-list a:hover {
    color: #000000; /* マウスオーバー時の文字色 */
    font-weight: bold; /* マウスオーバー時の文字を太字に */
    background-color: #f0f0f0; /* マウスオーバー時の背景色（オプション） */
    transition: color 0.3s, font-weight 0.3s, background-color 0.3s; /* 色変更のトランジション効果 */
}

/* 2024/8/01 『最近の投稿タイトルリンク、カテゴリーリンク、アーカイブリストの表示をカスタマイズ END */

/* 2025/4/04 ダウンロードするボタン START */

a.download_btn_green {
  display: block;
  width: 300px;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #388E3C;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 700;
  font-size: 1.15em;
  text-decoration: none;
  text-align: center;  
}

a.download_btn_green:hover {
  opacity: .7; 
  transition: .3s ease-in-out;
}

a.download_btn_red {
  display: block;
  width: 300px;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #D32F2F;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 700;
  font-size: 1.15em;
  text-decoration: none;
  text-align: center;  
}

a.download_btn_red:hover {
  opacity: .7; 
  transition: .3s ease-in-out;
}

a.download_btn_yellow {
  display: block;
  width: 300px;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #f9c30e;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 700;
  font-size: 1.15em;
  text-decoration: none;
  text-align: center;  
}

a.download_btn_yellow:hover {
  opacity: .7; 
  transition: .3s ease-in-out;
}

/* 2025/4/04 ダウンロードするボタン END */