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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 見出し（ご挨拶など）を太く、明るいオレンジに変更 */
.entry-content pre, .article h2 {
    background-color: #f7ede2 !important; /* 薄いベージュ背景で目に優しく */
    color: #333 !important; /* 文字は読みやすい濃い色 */
    border-left: 10px solid #f39800 !important; /* オレンジは左の線でアクセントに */
    border-bottom: 2px solid #f39800 !important; /* 下にも線を引いて「板」っぽく */
    padding: 15px 20px !important;
    border-radius: 0 5px 5px 0 !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    box-shadow: none !important; /* 影を消してモダンに */
}

/* 本文内のインスタ見出しをロゴ付きにする */
.insta-heading {
    display: flex !important;
    align-items: center !important;
    font-size: 0 !important; /* 日本語を隠す */
}

.insta-heading::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 24px;
    margin-right: 10px;
    background-image: url('https://www.kk-liaison.com/wp/wp-content/uploads/2026/02/Instagram-Logo-500x281-Photoroom.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.insta-heading::after {
    content: "Instagram";
    font-size: 1.25rem !important;
    color: #333 !important;
    font-weight: bold !important;
}

/* サイト全体の背景を少し温かみのある色に */
body {
    background-color: #fffaf0 !important; /* 優しいクリーム色 */
}

/* サイドバーの「Menu」という見出しも色を合わせる */
.sidebar h3 {
    background-color: #009944 !important; /* 緑はそのまま活かす */
    color: #fff !important;
    padding: 10px !important;
    border-radius: 5px;
    text-align: center;
    font-size: 1.1em;
}

/* 文章全体を少し読みやすくする設定 */
.entry-content p {
    line-height: 1.8; /* 行の間隔を少し広げて読みやすく */
    margin-bottom: 1.5em; /* 段落の間に隙間を作る */
}

/* 重要なキーワード（太字）をオレンジ色にする */
.entry-content b, .entry-content strong {
    color: #f39800;
    border-bottom: 2px dotted #009944; /* 下に緑の点線を引く */
}

/* サイドバーのメニューをボタン風に */
.widget_nav_menu ul li a {
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
}

/* メニューにマウスを乗せた時の色 */
.widget_nav_menu ul li a:hover {
    background-color: #fff4e0;
    border-color: #f39800;
}

/* --- Instagram専用のスタイル（公式ロゴ版） --- */
.widget_nav_menu ul li a[href*="instagram.com"] {
    display: flex !important;
    align-items: center !important;
    padding-left: 10px !important;
    font-weight: bold !important;
}

/* アイコン（公式画像を表示） */
.widget_nav_menu ul li a[href*="instagram.com"]::before {
    content: "";
    display: inline-block;
    width: 35px;  /* 少し横長なので幅を少し広めに調整しました */
    height: 24px; /* 高さは文字に合わせる */
    margin-right: 8px;
    /* ↓教えていただいたURLに修正しました */
    background-image: url('https://www.kk-liaison.com/wp/wp-content/uploads/2026/02/Instagram-Logo-500x281-Photoroom.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 以前のCSSで作った「丸」が出てしまうのを防ぐ */
.widget_nav_menu ul li a[href*="instagram.com"]::after {
    content: none !important;
}

/* マウスを乗せた時の動作を上書き */
.widget_nav_menu ul li a[href*="instagram.com"]:hover {
    background-color: #fff4e0;
    border-color: #f39800;
}
/* LINEバナーをメニューの横幅に完全に一致させる（最終版） */
.widget_scroll_ad .wp-block-image {
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    /* 親要素の余白設定を強制リセット */
    width: 100% !important;
    max-width: none !important;
}

.widget_scroll_ad .wp-block-image img {
    /* 100%に枠線の太さを吸収させる */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    
    /* メニューと同じ枠線と角丸 */
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    
    /* 枠線を内側に含める設定を徹底 */
    box-sizing: border-box !important;
    
    /* メニューと同じような影を少しだけつける（これで右端の馴染みが良くなります） */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* マウスを乗せた時の演出（お好みで） */
.widget_scroll_ad .wp-block-image img:hover {
    background-color: #fff4e0; /* メニューのhover色に合わせる */
    border-color: #f39800;    /* メニューのhover色に合わせる */
    opacity: 0.9;
}




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

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

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