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

/* ==================================================
  テック・ガジェットブログ向け初期カスタマイズ (Cocoon Child用)
================================================== */

/* 1. 全体のベースフォントと背景を少し今風にすっきりさせる */
body {
  background-color: #f7f9fa; /* わずかにグレーがかった清潔感のある背景 */
  color: #2c3e50;            /* 柔らかい黒で文字の視認性を上げる */
}

/* 2. 記事内のH2見出しを、テックブログらしい「左側にアクセントカラーの線」が入るデザインにする */
.article h2 {
  font-size: 1.35em;
  padding: 0.4em 0.5em;
  background: #edf2f7;          :
  border-left: 6px solid #3182ce; /* クールな青のアクセント線（後から自由に変更可能） */
  border-bottom: none;
  margin-top: 1.5em;
  margin-bottom: 1em;
  border-radius: 0 4px 4px 0;
}

/* 3. 記事内のH3見出しをすっきりさせる */
.article h3 {
  font-size: 1.15em;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.3em;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}

/* 4. 引用ボックスの見た目をモダンにする */
.article blockquote {
  border-left: 4px solid #cbd5e0;
  background-color: #ffffff;
  padding: 1em;
  color: #4a5568;
}

/* 5. コードブロック（コマンドや設定ファイル例）をダークモード風にしてテック感を出す */
.article pre, .article code {
  background-color: #1a202c !important; /* ダークな背景 */
  color: #e2e8f0 !important;             /* 明るい文字色 */
  border-radius: 6px;
}