@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){
  /*必要ならばここにコードを書く*/
}
/* ============================================================
   はると先生の英検レッスン｜ブログ用ブランドCSS v4
   ------------------------------------------------------------
   ★貼り付け場所★
   「外観」→「テーマファイルエディター」→ 右上で "Cocoon Child" を選択
   →「style.css」を開く
   → v3で貼った内容をすべて削除し、この中身に丸ごと差し替えて「ファイルを更新」

   ※「外観→カスタマイズ→追加CSS」には貼らないでください。
   ※ LPテンプレートには影響しません。
   ============================================================ */

/* ---------- 1. 下地：白背景・ブランドの文字色 ---------- */
body,
#container,
.main,
.article,
.content,
.content-in {
  background-color: #FFFFFF;
  color: #2B2620;
}

.main,
.article {
  border: none;
  box-shadow: none;
}

/* ---------- 2. 本文の文字 ---------- */
.entry-content {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.entry-content p {
  margin-bottom: 1.6em;
}

/* ---------- 3. 記事タイトル ---------- */
.entry-title,
.article h1.entry-title {
  font-weight: 700;
  color: #2B2620;
  font-size: 1.5rem;
  line-height: 1.55;
  border: none;
  padding: 0;
}

/* ---------- 4. 日付 ---------- */
.date-tags,
.post-date,
.post-update,
.entry-date {
  color: #CC7A3E;
  font-size: 0.8rem;
}

/* ============================================================
   5. SNSシェアボタン：原色をブランドカラーに強制統一
   （Cocoonの色指定が強いため !important が必要）
   ============================================================ */

/* 記事タイトル直下（上部）のシェアボタンは非表示 */
.sns-share.ss-top,
.sns-share-buttons.ss-top {
  display: none !important;
}

/* ボタン本体：白地＋オレンジ枠 */
.sns-share a,
.sns-share .snsbtn,
.sns-share .sns-button,
.sns-share-buttons a,
.sns-share-buttons .snsbtn,
.sns-share ul li a,
.sns-share .twitter-button,
.sns-share .facebook-button,
.sns-share .hatebu-button,
.sns-share .line-button,
.sns-share .pinterest-button,
.sns-share .pocket-button,
.sns-share .linkedin-button,
.sns-share .copy-button {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #E8622A !important;
  border: 1px solid #E7AD7B !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* ボタン内のアイコン・文字も強制的にオレンジへ */
.sns-share a *,
.sns-share .snsbtn *,
.sns-share-buttons a *,
.sns-share .social-icon,
.sns-share .button-caption {
  color: #E8622A !important;
  fill: #E8622A !important;
  text-shadow: none !important;
}

/* ホバー時 */
.sns-share a:hover,
.sns-share .snsbtn:hover,
.sns-share-buttons a:hover {
  background: #FBF3EA !important;
  background-color: #FBF3EA !important;
  color: #C94F1E !important;
  opacity: 1 !important;
}

/* 「シェアする」の文字 */
.sns-share-message,
.sns-share .sns-share-message {
  color: #6B6459 !important;
  background: none !important;
  border: none !important;
  font-size: 0.82rem !important;
}

.sns-share-message::before,
.sns-share-message::after {
  border-color: #EAE3D6 !important;
}

/* フォローボタン欄も同じトーンに */
.sns-follow a,
.sns-follow .snsbtn {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #E8622A !important;
  border: 1px solid #E7AD7B !important;
  border-radius: 3px !important;
}

.sns-follow a * {
  color: #E8622A !important;
  fill: #E8622A !important;
}

/* ---------- 6. カテゴリ・タグのラベル ---------- */
.entry-categories a,
.entry-tags a,
.cat-link,
.tag-link,
.entry-categories-tags a {
  background: #FBF3EA !important;
  background-color: #FBF3EA !important;
  color: #C94F1E !important;
  border: 1px solid #E7AD7B !important;
  border-radius: 3px !important;
  text-shadow: none !important;
}

.entry-categories a:hover,
.entry-tags a:hover {
  background-color: #E8622A !important;
  color: #FFFFFF !important;
}

/* ---------- 7. 本文見出し ---------- */
.article h2 {
  background: #FBF3EA !important;
  background-color: #FBF3EA !important;
  border: none !important;
  border-left: 5px solid #E8622A !important;
  border-radius: 3px !important;
  color: #2B2620 !important;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0.7em 0.9em !important;
  margin-top: 2.4em;
}

.article h3 {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid #E8622A !important;
  color: #2B2620 !important;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.4em 0.1em !important;
  margin-top: 2em;
}

.article h4 {
  background: none !important;
  border: none !important;
  border-left: 3px solid #E7AD7B !important;
  color: #2B2620 !important;
  font-weight: 700;
  font-size: 1rem;
  padding-left: 0.6em !important;
}

/* ---------- 8. リンク・引用・区切り線 ---------- */
.entry-content a {
  color: #E8622A;
}

.entry-content a:hover {
  color: #C94F1E;
}

.article blockquote {
  background-color: #FBF3EA !important;
  border: none !important;
  border-left: 4px solid #E7AD7B !important;
  color: #6B6459;
}

.article hr {
  border-color: #EAE3D6;
}

/* ---------- 9. ヘッダー・ナビ ---------- */
.header,
.header-container,
.header-container-in,
.navi,
.navi-in > ul {
  background-color: #FFFFFF !important;
}

.header-container {
  border-bottom: 1px solid #EAE3D6;
}

.site-name-text {
  color: #2B2620 !important;
  font-weight: 700;
}

.tagline {
  color: #6B6459 !important;
  font-size: 0.72rem;
}

.navi-in a {
  color: #6B6459 !important;
  font-size: 0.86rem;
}

.navi-in a:hover {
  background-color: #FBF3EA !important;
  color: #E8622A !important;
}

/* ============================================================
   10. サイドバー：見出しのグレー背景をブランド色に強制変更
   ============================================================ */
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar .widget-title,
.sidebar .widget h2,
.sidebar .widget h3,
.widget-sidebar h3,
.widget-sidebar-title,
.sidebar-left h3 {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid #E8622A !important;
  border-radius: 0 !important;
  color: #2B2620 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.4em 0.1em !important;
  text-shadow: none !important;
}

.sidebar,
.sidebar .widget {
  background-color: #FFFFFF !important;
}

.sidebar a,
.sidebar li a {
  color: #6B6459 !important;
  text-decoration: none !important;
}

.sidebar a:hover,
.sidebar li a:hover {
  color: #E8622A !important;
}

.sidebar li {
  border-color: #EAE3D6 !important;
}

/* 検索フォーム */
.search-box .search-edit,
.sidebar .search-edit,
input.search-edit {
  border: 1px solid #EAE3D6 !important;
  border-radius: 3px !important;
  background-color: #FFFFFF !important;
  color: #2B2620 !important;
}

.search-box .search-submit,
.sidebar .search-submit,
button.search-submit,
.search-submit {
  background: #E8622A !important;
  background-color: #E8622A !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 3px !important;
}

.search-submit:hover {
  background-color: #C94F1E !important;
}

/* ---------- 11. 記事一覧カード ---------- */
.entry-card-wrap,
.a-wrap {
  background-color: #FFFFFF !important;
  border: 1px solid #EAE3D6 !important;
  border-radius: 3px !important;
}

.a-wrap:hover {
  background-color: #FBF3EA !important;
}

.entry-card-title {
  color: #2B2620 !important;
  font-weight: 700;
}

.entry-card-snippet {
  color: #6B6459 !important;
}

/* ---------- 12. ページ送り・ボタン ---------- */
.pagination a,
.pagination-next-link,
.comment-btn,
.btn {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E8622A !important;
  color: #E8622A !important;
  border-radius: 3px !important;
  font-weight: 700;
  text-shadow: none !important;
}

.pagination a:hover,
.pagination-next-link:hover,
.comment-btn:hover,
.btn:hover {
  background-color: #E8622A !important;
  color: #FFFFFF !important;
}

.pagination .current {
  background-color: #E8622A !important;
  color: #FFFFFF !important;
  border: 1px solid #E8622A !important;
  border-radius: 3px !important;
}

/* ---------- 13. フッター ---------- */
.footer,
.footer-in,
.footer-bottom {
  background-color: #FFFFFF !important;
  border-top: 1px solid #EAE3D6;
  color: #6B6459 !important;
}

.footer a {
  color: #6B6459 !important;
}

.footer a:hover {
  color: #E8622A !important;
}

/* ---------- 14. スマホ表示の微調整 ---------- */
@media screen and (max-width: 834px) {
  .entry-title,
  .article h1.entry-title {
    font-size: 1.28rem;
  }

  .entry-content {
    font-size: 15.5px;
  }

  .article h2 {
    font-size: 1.12rem;
  }

  .article h3 {
    font-size: 1.02rem;
  }

  /* スマホ下部の固定メニュー */
  .mobile-menu-buttons {
    background-color: #FFFFFF !important;
    border-top: 1px solid #EAE3D6 !important;
  }

  .mobile-menu-buttons .menu-icon,
  .mobile-menu-buttons .menu-caption,
  .mobile-menu-buttons a {
    color: #6B6459 !important;
  }
}

/* ============================================================
   【追記用】ヘッダーをLPと同じ見た目に揃えるCSS
   ------------------------------------------------------------
   貼り付け場所：Cocoon Child の style.css の一番下に「追記」
   ※ 今あるCSSは消さずに、この内容を末尾に足してください。
   ============================================================ */

/* ---------- ヘッダーの帯：白背景・薄い下線・余白を詰める ---------- */
.header-container,
.header-container-in,
.header,
.header-in {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

.header-container {
  border-bottom: 1px solid #EAE3D6 !important;
}

.header-in,
.header .header-in {
  min-height: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* ---------- サイト名：左寄せ・丸ゴシック・小さめ ---------- */
.logo-header,
.logo,
.site-name,
.site-name-text-link {
  text-align: left !important;
}

.site-name-text {
  font-family: 'Zen Maru Gothic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #2B2620 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

/* ---------- キャッチフレーズ：サイト名のすぐ下に小さく ---------- */
.tagline {
  display: block !important;
  text-align: left !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 400 !important;
  color: #6B6459 !important;
  letter-spacing: 0.05em !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* ---------- ナビメニュー：1行に収めて右寄せ ---------- */
.navi,
.navi-in,
.navi-in > ul,
.navi-in > ul > li {
  background-color: #FFFFFF !important;
  border: none !important;
}

.navi-in > ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.navi-in > ul > li {
  width: auto !important;
  flex: 0 0 auto !important;
}

.navi-in > ul > li > a {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 0.84rem !important;
  color: #6B6459 !important;
  padding: 0 13px !important;
  height: auto !important;
  line-height: 2.2 !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
}

.navi-in > ul > li > a:hover {
  background-color: transparent !important;
  color: #E8622A !important;
}

.navi-in > ul > li > a::after,
.navi-in > ul > li > a::before {
  display: none !important;
}

/* ---------- 画面が狭いときはメニューを折り返さず縮める ---------- */
@media screen and (max-width: 1100px) {
  .navi-in > ul > li > a {
    font-size: 0.78rem !important;
    padding: 0 9px !important;
  }
}

@media screen and (max-width: 834px) {
  .header-in,
  .header .header-in {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .site-name-text {
    font-size: 1rem !important;
  }
}