@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){
  /*必要ならばここにコードを書く*/
}
/* ------------------------------------------------
 * 読みやすさボックス（注目を集めるオレンジ）
 * ------------------------------------------------ */
.econ-level-box {
    background-color: #ffffff;
    border: 2px solid #ff9800; /* 鮮やかなオレンジ */
    border-radius: 12px;
    padding: 20px;
    margin: 2em 0;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.1); /* オレンジ系の影 */
    max-width: 500px;
}

.econ-level-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    color: #e65100; /* 濃いオレンジ（文字用） */
    margin-bottom: 15px;
}

/* 中身の星などの色を調整 */
.econ-level-stars {
    color: #ffb300; /* 星はゴールドに近いオレンジ */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* ストライプ（偶数行）を非常に薄いオレンジに */
.econ-level-row:nth-child(even) {
    background-color: #fff8e1;
}

/* ------------------------------------------------
 * ヘッダーナビ（メニュー欄）を水色にして縦並びにする
 * ------------------------------------------------ */
#navi .navi-in {
    background-color: #e0f7fa;
}

/* メニューのレイアウト設定（フォントの太さ指定は削除） */
#navi .navi-in a {
    color: #00838f !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    line-height: 1.2;
}

#navi .navi-in a:hover {
    background-color: #b2ebf2;
    color: #006064 !important;
}

/* アイコンの大きさと余白だけ調整 */
#navi .navi-in a i {
    font-size: 1.4em;
    margin-bottom: 5px;
}

/* =================================================
 * 3. サイドバー：見出しと背景のデザイン
 * ================================================= */

/* サイドバーの見出し（タイトル）を水色にする */
.sidebar h3 {
    background-color: #e0f7fa; /* 背景：ヘッダーと同じ薄い水色 */
    color: #00838f;            /* 文字：ヘッダーと同じ濃い水色 */
    border-left: 5px solid #00bcd4; /* 左側にアクセントの線を引く */
    padding: 10px 15px;
    border-radius: 4px;        /* 軽く角を丸める */
    font-weight: bold;
}

/* プロフィールや人気記事などの各ウィジェット間の余白調整 */
.widget {
    margin-bottom: 30px;
}

/* =================================================
 * 4. トップページ専用レイアウト
 * ================================================= */

.top-section {
    padding: 40px 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
}

/* カテゴリーセクションに薄い水色の背景を交互に敷く */
.category-light-blue {
    background-color: #f0fbfc; 
    border-radius: 15px;
}

.top-heading {
    text-align: center;
    color: #00838f;
    font-size: 1.5em;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0f7fa;
    display: inline-block;
    width: 100%;
}

.section-desc {
    text-align: center;
    color: #666;
    margin-bottom: 25px;
}

/* カテゴリー一覧へ飛ぶボタン */
.top-btn-wrapper {
    text-align: center;
    margin-top: 20px;
}

.top-more-btn {
    display: inline-block;
    padding: 10px 30px;
    background-color: #00bcd4; /* 水色 */
    color: #fff !important;
    text-decoration: none;
    border-radius: 50px;       /* カプセル型 */
    font-weight: bold;
    transition: 0.3s;
}

.top-more-btn:hover {
    background-color: #00838f;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* すべてのウィジェットタイトルに適用されるよう補強（上書き） */
.sidebar h3,
.sidebar .widget-title {
    background-color: #e0f7fa;
    color: #00838f;
    border-left: 5px solid #00bcd4;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* サイドバー内のリンク（カテゴリーリストなど）を少しおしゃれに */
.sidebar ul li {
    border-bottom: 1px dashed #e0f7fa; /* 薄い水色の点線で区切る */
}
.sidebar ul li a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 8px 0;
    transition: 0.3s;
}
.sidebar ul li a:hover {
    color: #00838f; /* マウスを乗せたら濃い水色に */
    padding-left: 5px; /* 少し右にスライドするアニメーション */
}

.pagination-next-link {
  display: none;
}

/* =================================================
 * 5. 記事本文の見出し（H2, H3, H4）
 * ================================================= */
/* H2見出し：一番目立つように背景色＋下線＋左線 */
.article h2 {
    background-color: #f0fbfc; /* 極めて薄い水色 */
    color: #00838f;
    border-left: 5px solid #00bcd4;
    border-bottom: 2px solid #00bcd4;
    padding: 15px 20px;
    font-size: 1.4em;
    margin-top: 2.5em;
    margin-bottom: 1.5em;
}

/* H3見出し：シンプルでスタイリッシュに */
.article h3 {
    color: #006064;
    border-bottom: 2px solid #e0f7fa; /* 薄い水色の下線 */
    border-left: 5px solid #80deea; /* H2より少し明るい水色の左線 */
    padding: 10px 15px;
    font-size: 1.25em;
    margin-top: 2em;
}

/* H4見出し：さりげないアクセント */
.article h4 {
    color: #333;
    border-left: 4px solid #b2ebf2;
    padding: 5px 15px;
    font-size: 1.1em;
    background-color: transparent;
    margin-top: 1.5em;
}

/* =================================================
 * 6. 目次（TOC）のデザイン
 * ================================================= */
.toc {
    border: 2px solid #e0f7fa; /* 外枠を水色に */
    border-radius: 8px;
    padding: 0; /* タイトル背景をくっつけるためにゼロに */
    overflow: hidden; /* 角丸をはみ出させない */
    margin-bottom: 2em;
}

.toc-title {
    background-color: #e0f7fa; /* タイトル背景を水色に */
    color: #00838f;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

.toc-content {
    padding: 20px;
    background-color: #f7fdfd; /* さらに白に近い水色 */
}

/* アイコン自体の大きさや、文字とのすき間の調整 */
#navi .navi-in a i {
    font-size: 1.4em;
    margin-bottom: 5px;
}

/* =================================================
 * ページネーション（あらゆるシステムに対応する決定版）
 * ================================================= */

/* 1. 数字ボタンの基本スタイル（真ん丸） */
.pagination .page-numbers,
.wp-pagenavi a.page,
.wp-pagenavi span.current {
    background-color: #ffffff !important;
    color: #00838f !important;
    border: 1px solid #00bcd4 !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    line-height: 43px !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 4px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* 2. 現在開いているページの数字 */
.pagination .current,
.wp-pagenavi span.current {
    background-color: #00838f !important;
    color: #ffffff !important;
    border-color: #00838f !important;
}

/* 3. 「次へ」「前へ」のボタン（水色のカプセル型） */
.pagination .next,
.pagination .prev,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
    background-color: #e0f7fa !important;
    color: #00838f !important;
    border: 1px solid #e0f7fa !important;
    border-radius: 25px !important;
    padding: 0 20px !important;
    width: auto !important;
    height: 45px !important;
    line-height: 43px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* ボタンの中にある文字やアイコンの色 */
.pagination .next *,
.pagination .prev *,
.wp-pagenavi .nextpostslink *,
.wp-pagenavi .previouspostslink * {
    color: #00838f !important;
}

/* =================================================
 * サイドバーのボックスメニュー（完全版：水色＆中央揃え）
 * ================================================= */

/* 1. ボックス全体の背景色と枠線 */
#sidebar .box-menu {
    background-color: #e0f7fa !important; /* 背景：薄い水色 */
    border: 1px solid #00bcd4 !important; /* 枠線：アクセントの水色 */
    margin-bottom: 5px !important;        /* ボックス同士の隙間 */
}

/* 2. アイコンと文字を縦に並べて中央に配置する */
#sidebar .box-menu > a {
    display: flex !important;
    flex-direction: column !important;    /* 縦並びにする */
    align-items: center !important;       /* 左右の中央揃え */
    justify-content: center !important;   /* 上下の中央揃え */
    min-height: 80px !important;          /* ボックスの最低の高さを確保 */
    padding: 15px 5px !important;
    text-decoration: none !important;
    background-color: transparent !important; /* 重複する背景色を消す */
}

/* 3. アイコンの色とサイズ */
#sidebar .box-menu-icon {
    display: block !important;
    color: #00838f !important;            /* 濃い水色 */
    font-size: 24px !important;           /* アイコンを少し大きめに */
    margin-bottom: 5px !important;
}

/* 4. 文字の色と太さ */
#sidebar .box-menu-label {
    color: #00838f !important;            /* 濃い水色 */
    font-weight: bold !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* 5. マウスを乗せた時の色変化 */
#sidebar .box-menu:hover {
    background-color: #b2ebf2 !important;
}