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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ============================
   物欲オジの浅堀研究所
   黒 × オレンジ 2色デザイン
   ============================ */





/* ◆リンクカラー（オレンジ） */
a {
  color: #ff6600;
}
a:hover {
  color: #ff3300;
}

/* ◆見出し（H2）をオレンジラインに */
.article h2 {
  border-left: 6px solid #ff6600;
  padding-left: 10px;
}

/* ◆見出し（H3）をオレンジ下線に */
.article h3 {
  border-bottom: 2px solid #ff6600;
  padding-bottom: 5px;
}

/* ◆ボタンをオレンジに（Cocoon標準ボタン） */
.btn,
.button,
.wp-block-button__link {
  background-color: #ff6600 !important;
  color: #fff !important;
}
.btn:hover,
.button:hover,
.wp-block-button__link:hover {
  background-color: #ff3300 !important;
}

/* ◆サイドバーの見出しを黒背景 × オレンジ文字に */
.sidebar h3 {
  background: #000;
  color: #ff6600;
  padding: 8px 12px;
}

/* ◆フッター背景を黒に */
#footer {
  background: #000;
  color: #fff;
}

/* ◆フッターのリンクをオレンジに */
#footer a {
  color: #ff6600;
}
#footer a:hover {
  color: #ff3300;
}

/* ◆記事タイトル下のアイキャッチ枠を黒に */
.eye-catch {
  border: 3px solid #000;
}

/* ◆ページトップボタンをオレンジに */
#page-top {
  background: #ff6600;
  color: #fff;
}
#page-top:hover {
  background: #ff3300;
}

/* ============================
   スマホ最適化（黒 × オレンジ）
   ============================ */


  /* ◆ヘッダーを黒背景にして締める */
 @media screen and (max-width: 599px) {
 #header-container {
    background: #000;
    border-bottom: 2px solid #ff6600;
  }
.site-logo { text-align: right; } .site-logo img { margin-right: 0; margin-left: auto; display: block; width: 80%; /* 必要なら調整 */ height: auto; } }


  /* ◆タイトル文字を少し大きく＆太く */
  #site-title a {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
  }

  /* ◆スマホのメニューアイコンをオレンジに */
  .menu-button {
    color: #ff6600 !important;
  }

  /* ◆記事タイトルを読みやすく＆カッコよく */
  .entry-title {
    font-size: 22px;
    font-weight: 700;
    border-left: 6px solid #ff6600;
    padding-left: 10px;
  }

  /* ◆見出し（H2）をスマホ向けに強調 */
 .article h2 { font-size: 19px; line-height: 1.4; }
  }

  /* ◆見出し（H3）もオレンジライン */
 .article h3 { font-size: 17px; line-height: 1.4; } }

  /* ◆本文の行間を広げて読みやすく */
 .entry-content { font-size: 15.5px; line-height: 1.65; word-break: break-word; } }

  /* ◆スマホのサイドバー（下部）を黒背景に */
  #sidebar {
    background: #111;
    padding: 15px;
  }
  #sidebar h3 {
    color: #ff6600;
    border-bottom: 1px solid #ff6600;
    padding-bottom: 5px;
  }

  /* ◆ページトップボタンをオレンジに（スマホ） */
  #page-top {
    background: #ff6600;
    color: #fff;
    border-radius: 50px;
  }

  /* ◆フッターも黒で締める */
  #footer {
    background: #000;
    color: #fff;
  }
  #footer a {
    color: #ff6600;
  }
}

/* ============================
   リンクカード縮小（物欲オジ用）
   ============================ */
.internal-blogcard,
.blogcard,
.blog-card {
  transform: scale(0.85);
  transform-origin: left top;
  margin: -20px 0;
}

/* ============================
   トップ下の固定ページメニュー
   ============================ */
.index-top-menu a {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 14px;
}

/* ============================
   スマホ本文フォントサイズ調整
   ============================ */
@media screen and (max-width: 599px) {
  body {
    font-size: 17px !important;
    line-height: 1.8 !important;
  }
}

/* ============================
   ポップリンク（小ボタン）
   ============================ */
.poplink {
  display: inline-block;
  background: #ff7f00;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}
.poplink:hover {
  opacity: 0.85;
}

/* ============================
   物欲オジ専用アフィボタン
   ============================ */
.butuoji-btn {
  display: inline-block;
  background: linear-gradient(90deg, #f7f700, #ff5500);
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 120, 0, 0.45);
  border: 2px solid #000;
  letter-spacing: 1px;
  transition: 0.2s ease;
}
.butuoji-btn:hover {
  background: #000;
  color: #fff700;
  box-shadow: 0 0 18px rgba(255, 120, 0, 0.7);
  transform: translateY(-2px);
}


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* 楽天モーションウィジェットの文字を強制的に細くする */ .rakuten-widget * { font-weight: 200 !important; } iframe[src*="rakuten"] * { font-weight: 200 !important; }