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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

body {
    /* 正しい公開用URLを指定 */
    background-image: url('https://media.cotonoby.com/wp-content/themes/cocoon-child-master/skins/skin-template/images/background_book_2.png');
    background-color: white; /* 画面全体を覆うように表示 */
    background-size: cover; /* 画面全体を覆うように表示 */
    background-position: center center; /* 画像を中央に配置 */
    background-attachment: fixed; /* スクロールしても背景を固定 */
    background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
}

#header-container {
    border-bottom: 1px solid #cccccc; /* 1pxの太さのグレーの実線 */
}

/* 
#main {
/*     border: 1px solid #cccccc; /* 線の太さ、種類、色を指定 */
/*     padding: 20px; /* 枠線と中のコンテンツの間の余白 */
/*     background-color: #ffffff; /* 背景色を白にする（背景画像と区別するため） */
/*     box-sizing: border-box; /* paddingを含めて幅を計算する */
/*}*/

/* スマホ（画面幅480px以下）の時のロゴサイズを調整 */
@media screen and (max-width: 480px) {
  .header-site-logo-image {
    max-width: 50%; /* お好みのサイズに変更してください（例: 70%, 200px など） */
    height: auto;
  }
}

#sidebar h2,
#sidebar h3 {
  background-color: #f9f0e8;
  padding: 12px;
  margin: 16px 0;
  border-radius: var(--cocoon-badge-border-radius);
}


/* 少し大きめのスマホ（画面幅768px以下）の時のロゴサイズを調整したい場合はこちら（必要に応じて） */
/*
@media screen and (max-width: 768px) {
  .header-site-logo-image {
    max-width: 80%; 
    height: auto;
  }
}
*/

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

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

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

/************************************
** 固定ページ微調整
************************************/
/* 固定ページで読む時間の目安を非表示にする */
.page .read-time {
    display: none;
}

/* 固定ページ【本体】の公開日・更新日だけを非表示にする */
.page .article-header .post-date,
.page .article-header .post-update {
    display: none;
}
/* 新着リストで公開日をタイトルの上に配置する */
.widget-entry-card-content {
    display: flex;
    flex-direction: column; /* 要素を縦並びに指定 */
}

.widget-entry-card-date {
    order: 1; /* 日付を1番目に表示 */
    margin-bottom: 3px; /* 日付とタイトルの間に少し余白を作る */
    margin-top: 0;
}

.widget-entry-card-title {
    order: 2; /* タイトルを2番目に表示 */
}
/* トップのリストをPCで2列にする */
.category-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 均等な2列を作成 */
    gap: 20px 40px; /* 縦の余白20px、横の余白40px */
}

/* 中のリストが崩れないようにする調整 */
.category-grid-2col .grid-item {
    min-width: 0;
}

/* スマホ（画面幅768px以下）では1列に戻す */
@media screen and (max-width: 768px) {
    .category-grid-2col {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 30px 0; /* スマホ時の縦の余白 */
    }
}
/* ====================================
   見出し（h2, h3）の可愛いデザイン変更
==================================== */

/* --- h2見出し（年齢別で探す など） --- */
.article h2 {
    background: #fff8f0 !important; /* 温かみのある極薄いオレンジ背景 */
    color: #554236 !important; /* 優しいこげ茶色 */
    border: none !important; /* 元の直角の線を消す */
    border-left: 8px solid #ff9d5c !important; /* 左にオレンジの太線 */
    border-radius: 8px !important; /* 角を丸くする */
    padding: 15px 20px !important;
}

/* --- h3見出し（0歳におすすめ など） --- */
.article h3 {
    background: transparent !important; /* 背景は透明 */
    color: #554236 !important; /* 優しいこげ茶色 */
    border: none !important; /* 元の線を消す */
    border-bottom: 2px dashed #ffceb3 !important; /* 下にオレンジのステッチ（破線） */
    padding: 10px 0 10px 25px !important; /* 左側の丸アイコン用にスペースを空ける */
    position: relative !important;
}

/* h3の左側に水色の丸アイコンを付ける */
.article h3::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #6dc5c2 !important; /* ロゴに合わせた水色 */
    border-radius: 50% !important; /* 完全な丸にする */
}

/* --- 見出し内のリンク色を統一 --- */
/* 「年齢別で探す」などが青文字になるのを防ぐ */
.article h2 a,
.article h3 a {
    color: #554236 !important; /* こげ茶色に統一 */
    text-decoration: none !important; /* リンクの下線を消す */
    transition: 0.3s; /* ふんわり色を変えるアニメーション */
}

/* リンクにマウスを乗せた時は色を少し変える */
.article h2 a:hover,
.article h3 a:hover {
    color: #ff9d5c !important; /* オレンジ色に光る */
}
/* ====================================
   サイドバーデザイン変更
==================================== */
/* --- サイドバーの見出し（h2・h3・ウィジェット共通） --- */
.sidebar h2,
.sidebar h3,
.sidebar .widget-title,
.sidebar .wp-block-heading {
    background: #fff8f0 !important; /* 淡いオレンジ背景 */
    color: #554236 !important; /* 優しいこげ茶色 */
    border: none !important; 
    border-left: 6px solid #ff9d5c !important; /* 左にオレンジの線 */
    border-radius: 6px !important; /* 角を丸く */
    padding: 12px 15px !important;
    margin-bottom: 15px !important;
    font-size: 1.1em !important; 
}

/* --- サイドバーのリスト（リンク）の調整 --- */
.sidebar ul li a {
    color: #554236 !important; /* 文字色を優しいこげ茶に統一 */
    text-decoration: none !important; /* 下線を消す */
    transition: transform 0.3s ease, color 0.3s ease; /* ふんわり変化 */
    display: inline-block; 
}

/* マウスを乗せた時の変化（アニメーション） */
.sidebar ul li a:hover {
    color: #ff9d5c !important; /* オレンジ色に光る */
    transform: translateX(5px); /* 右に少しスライド */
}

/* --- 最近の投稿（クラシック）の日付をタイトルの上にする --- */
.widget_recent_entries ul li {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 15px !important; /* 記事どうしの余白 */
}

/* 日付の指定 */
.widget_recent_entries ul li .post-date {
    order: 1 !important; /* 日付を1番目（上）にする */
    font-size: 0.85em !important; /* 文字を少し小さく */
    color: #888 !important; /* 薄いグレーに */
    margin-bottom: 3px !important; /* タイトルとの間の余白 */
}

/* タイトル（リンク）の指定 */
.widget_recent_entries ul li a {
    order: 2 !important; /* タイトルを2番目（下）にする */
    line-height: 1.4 !important;
}

/* ====================================
   4列フッター
==================================== */

/* --- フッター全体の背景色 --- */
.footer {
    background-color: #fcebd0 !important; /* 温かいベージュ */
    border-top: none !important;
}

/* --- 余計なエリアを消して左エリアを全幅にする --- */
.footer-center,
.footer-right {
    display: none !important;
}
.footer-widgets .footer-widgets-in {
    display: block !important;
}

/* --- フッター左エリアをPCで4列、スマホで2列にする --- */
.footer-left {
    display: grid !important;
    gap: 20px 40px !important;
    width: 100% !important;
}

/* PC幅なら4列 */
@media screen and (min-width: 1024px) {
    .footer-left {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* タブレット・スマホ幅なら2列 */
@media screen and (max-width: 1023px) {
    .footer-left {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* スマホのさらに細い画面なら1列 */
@media screen and (max-width: 480px) {
    .footer-left {
        grid-template-columns: 1fr !important;
    }
}

/* --- フッター各列の見出し（ウィジェットタイトル） --- */
.footer-left h2,
.footer-left h3,
.footer-left .widget-title,
.footer-left .wp-block-heading {
    background: none !important;
    border: none !important;
    border-bottom: 1px dotted #8c7361 !important; /* 茶色の点線 */
    padding: 0 0 5px 0 !important;
    margin-bottom: 15px !important;
    color: #554236 !important;
    font-size: 1.1em !important;
    text-align: left !important;
}

/* --- フッターのリスト装飾 --- */
.footer-left ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.footer-left ul li {
    border: none !important; 
    padding: 3px 0 !important;
    margin-bottom: 5px !important;
}

/* --- リンクテキストの装飾 --- */
.footer-left ul li a {
    color: #554236 !important;
    text-decoration: none !important;
    position: relative !important;
    padding-left: 18px !important; /* 丸アイコンのスペース */
    font-size: 0.9em !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    display: inline-block;
}

/* --- オレンジの丸（●）アイコン --- */
.footer-left ul li a::before {
    content: "●" !important; 
    color: #ef7026 !important; 
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.8em !important;
}

/* --- マウスホバー時の動き --- */
.footer-left ul li a:hover {
    color: #ef7026 !important;
    transform: translateX(5px) !important;
}

/* ====================================
   メインコンテンツとサイドバーの高さ揃え
==================================== */
#sidebar h3 {
  margin: 36px 0;
}

/* ====================================
   サイドバーのナビゲーションメニュー階層デザイン
==================================== */

/* --- メニュー全体の下準備 --- */
.sidebar .widget_nav_menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar .widget_nav_menu li {
    margin-bottom: 5px !important;
    border: none !important; /* 余計な線を消す */
}

/* ====================================
   【1階層目（親）】 年齢別、悩み・知育など
==================================== */
.sidebar .widget_nav_menu ul.menu > li > a {
    display: block !important;
    font-weight: bold !important; /* 太字で強調 */
    color: #554236 !important; /* こげ茶色 */
    font-size: 1.05em !important;
    padding: 8px 0 !important;
    border-bottom: 2px dashed #ffceb3 !important; /* 下に可愛いオレンジのステッチ */
    margin-bottom: 8px !important;
}

/* 1階層目には丸アイコンを出さない */
.sidebar .widget_nav_menu ul.menu > li > a::before {
    display: none !important;
}

/* ====================================
   【2階層目（子）】 0歳向けの絵本、お悩みテーマなど
==================================== */
.sidebar .widget_nav_menu ul.sub-menu {
    padding-left: 8px !important; /* 全体を少し右にずらす */
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}

.sidebar .widget_nav_menu ul.menu > li > ul.sub-menu > li > a {
    display: inline-block !important;
    color: #554236 !important;
    font-size: 0.95em !important;
    font-weight: normal !important;
    padding: 4px 0 4px 20px !important; /* アイコン用の余白 */
    border-bottom: none !important; /* 1階層目の線を打ち消す */
    position: relative !important;
}

/* 2階層目のアイコン（水色の丸） */
.sidebar .widget_nav_menu ul.menu > li > ul.sub-menu > li > a::before {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #6dc5c2 !important; /* ロゴの水色 */
    border-radius: 50% !important; /* 丸くする */
    transition: 0.3s ease !important;
    display: block !important;
}

/* ホバー時（マウスを乗せた時）にアイコンもオレンジ色にする */
.sidebar .widget_nav_menu ul.menu > li > ul.sub-menu > li > a:hover::before {
    background-color: #ff9d5c !important;
}

/* ====================================
   【3階層目（孫）】 トイレ・生活習慣など
==================================== */
.sidebar .widget_nav_menu ul.sub-menu .sub-menu {
    padding-left: 15px !important; /* さらに右にずらす */
    margin-top: 2px !important;
    margin-bottom: 5px !important;
}

.sidebar .widget_nav_menu ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
    font-size: 0.85em !important; /* 文字を少し小さく */
    padding: 3px 0 3px 18px !important;
    color: #6a5548 !important; /* 少し柔らかいこげ茶色 */
}

/* 3階層目のアイコン（小さなこげ茶色の丸） */
.sidebar .widget_nav_menu ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a::before {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 5px !important;
    height: 5px !important;
    background-color: #b09e91 !important; /* 控えめなこげ茶色 */
    border-radius: 50% !important;
    transition: 0.3s ease !important;
    display: block !important;
}

/* ホバー時（マウスを乗せた時）にアイコンもオレンジ色にする */
.sidebar .widget_nav_menu ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover::before {
    background-color: #ff9d5c !important;
}

/* ====================================
   フッターデザインのアップデート（サイトの雰囲気に統一）
==================================== */

/* --- フッター見出しを可愛いステッチと水色アイコンに --- */
.footer-left h2,
.footer-left h3,
.footer-left .widget-title,
.footer-left .wp-block-heading {
    border-bottom: 2px dashed #ffceb3 !important; /* 茶色の点線をオレンジの可愛い破線に上書き */
    padding: 0 0 8px 18px !important; /* アイコンのスペースを空ける */
    position: relative !important;
}

/* 見出しの左側に水色の丸アイコンを付ける */
.footer-left h2::before,
.footer-left h3::before,
.footer-left .widget-title::before,
.footer-left .wp-block-heading::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #6dc5c2 !important; /* ロゴの水色 */
    border-radius: 50% !important; /* 綺麗な丸にする */
}

/* --- リストのアイコンを文字(●)から図形の丸に変更 --- */
.footer-left ul li a {
    padding-left: 15px !important; /* アイコンとの距離を微調整 */
}

.footer-left ul li a::before {
    content: "" !important; /* 文字の●を消す */
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #ff9d5c !important; /* 優しいオレンジの丸 */
    border-radius: 50% !important; /* 綺麗な丸にする */
    transition: background-color 0.3s ease !important;
}

/* ホバー時のリストアイコンの動き */
.footer-left ul li a:hover::before {
    background-color: #6dc5c2 !important; /* マウスを乗せたらアイコンが水色に変わるおまけ */
}

/* --- スマホ・タブレット時にPC用テキストメニューを非表示にする --- */
@media screen and (max-width: 1023px) {
    .navi {
        display: none !important;
    }
}
/* --- スマホ・タブレット時にフッターのテキストメニューを非表示にする --- */
@media screen and (max-width: 1023px) {
    .navi-footer {
        display: none !important;
    }
}
/* ====================================
   グローバルナビゲーション（PC用）の可愛いデザイン
==================================== */
@media screen and (min-width: 1024px) {

    /* --- リンクエリアのサイズとレイアウト調整 --- */
    .navi-in > ul > li > a {
        color: #554236 !important; 
        font-weight: bold !important;
        font-size: 0.85em !important; 
        padding: 12px 5px !important; 
        transition: all 0.3s ease !important;
        position: relative !important;
        background-color: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* --- ホバー時の動き（少し上に浮き、オレンジ色になる） --- */
    .navi-in > ul > li > a:hover {
        color: #ff9d5c !important;
        transform: translateY(-2px) !important;
    }

    /* --- ホバー時に中央から伸びる可愛い下線 --- */
    .navi-in > ul > li > a::after {
        content: "" !important;
        position: absolute !important;
        bottom: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) scaleX(0) !important;
        width: 70% !important;
        height: 3px !important;
        background-color: #ff9d5c !important; 
        border-radius: 3px !important;
        transition: transform 0.3s ease !important;
    }

    .navi-in > ul > li > a:hover::after {
        transform: translateX(-50%) scaleX(1) !important;
    }
}

/* ====================================
   ハンバーガーメニューの中身（スマホ用）の可愛いデザイン
==================================== */
@media screen and (max-width: 1023px) {
    /* メニュー項目のリスト */
    .mobile-menu-content ul li a,
    #navi-menu-content ul li a {
        color: #554236 !important;
        font-weight: bold !important;
        border-bottom: 1px dashed #ffceb3 !important; /* 区切り線をステッチに */
        padding: 15px 20px 15px 25px !important; /* アイコンのスペースを確保 */
        position: relative !important;
    }

    /* 左側に水色の丸アイコンをあしらう */
    .mobile-menu-content ul li a::before,
    #navi-menu-content ul li a::before {
        content: "" !important;
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 6px !important;
        height: 6px !important;
        background-color: #6dc5c2 !important; /* ロゴの水色 */
        border-radius: 50% !important; /* 綺麗な丸に */
    }
}
/* ====================================
   「もっと見る」ボタン（絵本ナビ風）
==================================== */

/* ボタンを中央に配置し、上下に余白を作る */
.more-btn-wrap {
    text-align: center !important;
    margin: -10px 0px 80px 0px !important; /* 上下の余白（適宜調整してください） */
}

/* ボタン本体のデザイン */
.more-btn {
    display: inline-block !important;
    padding: 10px 50px !important; /* ボタンの縦・横のサイズ（横長に） */
    background-color: #ffffff !important; /* 背景は白 */
    color: #554236 !important; /* 文字はこげ茶色 */
    border: 1px solid #d9cbbb !important; /* 枠線（絵本ナビのような少し薄い茶色） */
    border-radius: 30px !important; /* 完全に丸いカプセル型にする */
    font-size: 0.95em !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important; /* アニメーションを滑らかに */
}

/* マウスを乗せた時（ホバー時）の可愛い動き */
.more-btn:hover {
    background-color: #fff8f0 !important; /* 背景をほんのり温かいオレンジに */
    border-color: #ff9d5c !important; /* 枠線をオレンジに */
    color: #ff9d5c !important; /* 文字もオレンジに */
    transform: translateY(-2px) !important; /* 少しだけ上にフワッと浮く */
    box-shadow: 0 3px 6px rgba(0,0,0,0.05) !important; /* 軽い影をつける */
}
/* ====================================
   コトノビー風：可愛いオレンジマーカー
==================================== */

/* --- アンダーラインマーカー（黄）をオレンジの蛍光ペン風に --- */
.marker-under {
    background: linear-gradient(transparent 60%, #ffceb3 60%) !important; /* 下半分だけの優しいオレンジ */
    font-weight: bold !important; /* マーカー部分は自動的に少し太字にして強調 */
    color: #554236 !important; /* 文字色は読みやすいこげ茶に */
}

/* --- マーカー（黄）を全体塗りつぶしのオレンジに --- */
.marker {
    background-color: #fff0e6 !important; /* ほんのり薄いオレンジ背景 */
    font-weight: bold !important;
    color: #554236 !important;
    padding: 2px 4px !important; /* 文字の周りに少しだけ余白を作って読みやすく */
    border-radius: 3px !important; /* 角をほんのり丸くする */
}
/* ====================================
   PR表記エリアの可愛いデザイン
==================================== */
.pr-label {
    background-color: #fffaf6 !important; /* ほんのり温かみのある背景色 */
    border: 2px dashed #ffceb3 !important; /* お馴染みのオレンジステッチ */
    color: #554236 !important; /* 優しいこげ茶色の文字 */
    text-align: center !important;
    font-size: 0.9em !important;
    font-weight: bold !important; /* 文字を少し太字にして読みやすく */
    padding: 12px 15px !important; /* 内側の余白 */
    border-radius: 8px !important; /* 角を可愛く丸める */
    margin: 25px 0 !important; /* 上下の余白を綺麗にとる */
}