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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ==========================================================================
   1. ホームページ（hane-heart.com）共通デザインカスタマイズ
   ========================================================================== */

/* 全体の背景色と基本の文字色 */
body {
    background-color: #FAF6F0 !important; /* 優しいアイボリーベージュ */
    color: #2B2522 !important;            /* 柔らかいダークブラウンの文字色 */
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", Georgia, serif; /* 落ち着いた明朝体系フォント */
}

/* ブログ記事の背景（コンテンツエリア） */
#main {
    background-color: #ffffff !important;  /* 記事本文は見やすいように白に */
    border-radius: 12px;                  /* 角を少し丸くして優しい印象に */
    box-shadow: 0 4px 15px rgba(131, 111, 83, 0.05); /* ほんのり柔らかい影 */
}

/* 見出し（H2）のデザインをホームページ風に */
.article h2 {
    background-color: #FAF6F0 !important; /* 背景を薄いベージュに */
    border-left: 5px solid #836F53 !important; /* 左側にホームページのブラウンの線を */
    color: #2B2522 !important;
    padding: 15px 20px !important;
    border-radius: 0 8px 8px 0;
}

/* サイドバーの見出し（H3） */
.sidebar h3 {
    border-bottom: 2px solid #836F53 !important; /* 下線にブラウンを配置 */
    color: #2B2522 !important;
}

/* ヘッダー部分（ブログのタイトル周り）の調整 */
.header {
    background-color: #FAF6F0 !important;
}
.site-name-text a {
    color: #2B2522 !important;
    font-weight: bold;
}


/* ==========================================================================
   2. 記事本文内のリンク設定
   ========================================================================== */

/* 記事本文内のリンク：最初から下線を表示してわかりやすく */
.entry-content a {
    color: #836F53 !important;      /* キーカラーのブラウン */
    text-decoration: underline !important; /* 最初から下線を引いてリンクだとわかりやすく */
}
.entry-content a:hover {
    color: #bfa785 !important;      /* マウスを乗せたときは少し明るいブラウンに */
    text-decoration: underline !important;
}


/* ==========================================================================
   3. SNSシェアボタンの色をホームページの雰囲気に合わせて淡くする
   ========================================================================== */

/* ボタン全体の背景色を淡いアースカラー（くすみカラー）に一括変更 */
.sns-buttons a {
    text-decoration: none !important;
    border-radius: 6px !important;    /* 角を少し丸く */
    transition: background-color 0.3s ease; /* 色の変化を滑らかに */
}

/* 各ボタンの通常時の色（淡く優しいトーンに） */
.sns-buttons .twitter-button   { background-color: #555555 !important; } /* Xはシックなグレー */
.sns-buttons .facebook-button  { background-color: #7A89A3 !important; } /* くすんだブルー */
.sns-buttons .hatebu-button    { background-color: #7997B5 !important; } /* 淡いブルー */
.sns-buttons .line-button      { background-color: #92AC84 !important; } /* お抹茶のような淡い緑 */
.sns-buttons .pinterest-button { background-color: #A86D6D !important; } /* くすんだ赤 */
.sns-buttons .copy-button      { background-color: #7E7671 !important; } /* 落ち着いたグレー */

/* ボタンの中の文字とアイコンを「白」で統一し、下線を消す */
.sns-buttons a,
.sns-buttons a .social-icon,
.sns-buttons a .button-caption,
.sns-follow a,
.go-to-top,
.go-to-top a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ボタン内のアイコンフォントも白にする */
.sns-share a .social-icon,
.sns-follow a .social-icon {
    color: #ffffff !important;
}

/* マウスを乗せたとき（ホバー時）だけ、少しだけ本来のブランド色を優しく出す設定 */
.sns-buttons .twitter-button:hover   { background-color: #000000 !important; }
.sns-buttons .facebook-button:hover  { background-color: #3b5998 !important; }
.sns-buttons .hatebu-button:hover    { background-color: #00a4de !important; }
.sns-buttons .line-button:hover      { background-color: #06c755 !important; }
.sns-buttons .pinterest-button:hover { background-color: #bd081c !important; }
.sns-buttons .copy-button:hover      { background-color: #555555 !important; }
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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