@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){
  /*必要ならばここにコードを書く*/
}
/* モバイルフッターとヘッダーの文字・アイコンを強制調整 */
.footer-mobile-buttons .menu-caption, 
.footer-mobile-buttons .item-label,
.mobile-menu-buttons .menu-caption, 
.mobile-menu-buttons .search-caption {
    font-size: 14px !important;    /* かなり大きくします */
    font-weight: 400 !important;   /* 最大の太さ */
    color: #ffffff !important;     /* 真っ白 */
    display: block !important;
    line-height: 1.2 !important;
}

/* アイコンも大きくして見やすく */
.footer-mobile-buttons i, 
.mobile-menu-buttons i {
    font-size: 20px !important;
    color: #ffffff !important;
}
/* 【サイドバー（スライドメニュー）】内の全ての文字を黒くする */
#sidebar-menu-content,
#sidebar-menu-content *, /* 全ての要素を対象 */
.nwa .widget-title,
.sidebar-menu-content .menu-caption {
    color: #000000 !important; /* 真っ黒 */
    opacity: 1 !important;
    visibility: visible !important;
}

/* アーカイブやカテゴリーのリンク文字も黒く */
#sidebar-menu-content a {
    color: #000000 !important;
}

/* ②【サイドバーの見出し】アーカイブ・カテゴリーの文字を白く */
#sidebar-menu-content .widget-title,
#sidebar-menu-content .caption {
    color: #ffffff !important; /* 見出しの文字を白に */
    font-weight: bold !important;
}
/* サイドバーの「アーカイブ」「カテゴリー」の見出し文字を白くする */
.sidebar .widget-title,
#sidebar-menu-content .widget-title,
.sidebar .caption,
#sidebar-menu-content .caption {
    color: #ffffff !important;   /* 文字色を白に */
    font-weight: bold !important; /* 太字にして読みやすく */
}

/* ついでにアイコンが表示されている場合も白くします */
.sidebar .widget-title i,
#sidebar-menu-content .widget-title i {
    color: #ffffff !important;
}

/* プロフィール画像を丸くして枠をつける */
.author-box .author-thumb img {
    border-radius: 50% !important; /* 丸くする */
    border: 4px solid #99cc99 !important; /* ガマえもんカラーの枠 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; /* 軽い影で立体感を出す */
    padding: 2px !important;
    background: #fff !important;
}

/* ランキングの順位数字を可愛くする */
.widget-entry-cards.ranking-visible .card-thumb::before {
    background-color: #99cc99 !important; /* 数字の背景色 */
    color: #fff !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    left: 5px !important;
    top: 5px !important;
}

/* 1位だけ色を変えて特別感を出す場合 */
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {
    background-color: #f6ad49 !important; /* 金色っぽいオレンジ */
}

/* プロフィールの詳細ボタンを可愛く装飾 */
.author-box .author-content .author-description .author-page-link a {
    display: block;
    background-color: #99cc99 !important; /* ガマえもんカラーの緑 */
    color: #ffffff !important;           /* 文字は白 */
    text-decoration: none !important;
    text-align: center;
    padding: 10px;
    margin-top: 15px;
    border-radius: 25px !important;      /* 角を丸くしてボタンらしく */
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 軽い影をつける */
    transition: 0.3s;
}

/* ボタンを触った（ホバーした）時の動き */
.author-box .author-content .author-description .author-page-link a:hover {
    background-color: #7fb37f !important; /* 少し濃い緑に変化 */
    transform: translateY(-2px);           /* ぴょこっと浮き上がる */
}

/* グローバルメニューに縦線を入れる */
.menu-header .menu-item {
    border-right: 1px solid #fff; /* 右側に白い線を引く */
}

/* 一番左の項目の左側にも線を引く */
.menu-header .menu-item:first-child {
    border-left: 1px solid #fff;
}

/* 文字と線の間の余白を調整 */
.menu-header .menu-item a {
    padding: 0 20px;
}

/* モバイルメニュー（スライドイン）のカスタマイズ */
.slicknav_nav a, 
#slide-in-sidebar .menu-drawer .menu-item a {
    text-align: center; /* 文字を中央寄せ */
    color: #9cd0a9 !important; /* 文字色（薄い緑） */
    padding: 15px 0; /* 上下の余白 */
    border-bottom: 1px dashed #9cd0a9; /* 下側に点線を追加 */
    font-weight: bold; /* 必要に応じて太字に */
    text-decoration: none;
}

/* グローバルナビゲーション（ヘッダーバー）の白文字を非表示にする */
#header-container .navi .navi-in .menu-visible-at-parent #menu-item-29,
#header-container .navi .navi-in .menu-visible-at-parent #menu-item-30,
#header-container .navi .navi-in .menu-visible-at-parent #menu-item-31,
#header-container .navi .navi-in .menu-visible-at-parent #menu-item-32 {
  display: none !important;
}

/* グローバルナビゲーション（ヘッダーバー）の白文字を強力に非表示にする */
#header-container .navi-in > ul > li {
  display: none !important;
}

/* おすすめカードの背景を白くする */
.recommend-cards {
    background-color: #fff; /* 背景を白にする */
    padding: 20px 0;        /* 上下に少し隙間を作る */
    border-radius: 5px;     /* 角を少し丸くする（お好みで） */
}