@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){
  /*必要ならばここにコードを書く*/
}

/* ================================================
   Earn Lab サイト全体デザイン統一
   ================================================ */

/* ヘッダー */
#header-container, .header-container {
  background-color: #F97316 !important;
}
#header, .header.cf {
  background-color: #F97316 !important;
  padding: 14px 18px !important;
}
.logo.logo-header.logo-text {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.logo.logo-header.logo-text .site-name-text {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.logo.logo-header.logo-text .site-description {
  color: #FFE4CC !important;
  font-size: 11px !important;
}
.logo.logo-header.logo-text img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2.5px solid #ffffff !important;
  object-fit: cover !important;
}
#navi, .navi.cf {
  background-color: #F97316 !important;
}

/* 全体背景・コンテンツ */
body {
  background-color: #FFF8F0 !important;
  color: #3D1F00 !important;
}
#content, .content.cf {
  background-color: #FFF8F0 !important;
}
#content-in, .content-in.wrap {
  background-color: #FFF8F0 !important;
}

/* サイドバー */
#sidebar, .sidebar.nwa.cf {
  background-color: #FFF8F0 !important;
}
.widget.widget-sidebar {
  background: #FFF0E0 !important;
  border-radius: 12px !important;
  border: 0.5px solid #F9D0A0 !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

/* フッター */
#footer, .footer.footer-container.nwa {
  background-color: #633806 !important;
}
#footer-in, .footer-in.wrap.cf {
  background-color: #633806 !important;
  color: #F9D0A0 !important;
}
.footer-bottom {
  background-color: #633806 !important;
  color: #F9D0A0 !important;
}

/* 記事H2見出し */
.article h2, .entry-content h2 {
  color: #633806 !important;
  border-left: 5px solid #F97316 !important;
  background: #FFF8F0 !important;
  padding: 12px 16px !important;
  margin: 48px 0 26px !important;
  font-weight: 700 !important;
}

/* 記事H3見出し */
.article h3, .entry-content h3 {
  color: #633806 !important;
  background: #FFF0E0 !important;
  border-left: 4px solid #FBBF24 !important;
  padding: 10px 14px !important;
  margin: 32px 0 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* 記事内リンク */
.entry-content a {
  color: #F97316 !important;
  text-decoration: none !important;
}

/* 記事下著者情報ボックス */
.author-box {
  background: #FFF0E0 !important;
  border-radius: 12px !important;
  border: 0.5px solid #F9D0A0 !important;
  padding: 16px !important;
  margin: 32px 0 !important;
}
.author-box .author-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #633806 !important;
  margin-bottom: 6px !important;
}
.author-box .author-description {
  font-size: 12px !important;
  color: #854F0B !important;
  line-height: 1.7 !important;
}
.author-box img {
  border-radius: 50% !important;
  border: 3px solid #F97316 !important;
  object-fit: cover !important;
}

/* ================================================
   もふろん吹き出しスタイル
   ================================================ */
.mofuron-balloon-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0;
}
.mofuron-balloon-wrap img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #F97316;
  flex-shrink: 0;
  object-fit: cover;
}
.mofuron-balloon-wrap .balloon-text {
  background: #FFF8F0;
  border: 1px solid #FDDCB5;
  border-radius: 0 12px 12px 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: #3D1F00;
  line-height: 1.8;
  position: relative;
}
.mofuron-balloon-wrap .balloon-text::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 14px;
  border-width: 5px 10px 5px 0;
  border-style: solid;
  border-color: transparent #FDDCB5 transparent transparent;
}
.mofuron-balloon-wrap .balloon-text::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 15px;
  border-width: 4px 9px 4px 0;
  border-style: solid;
  border-color: transparent #FFF8F0 transparent transparent;
}