@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){
  /*必要ならばここにコードを書く*/
}
/*---------------------------------
カテゴリの行間とフォントを小さくする
--------------------------------*/
.widget_categories ul li a{
	line-height: 0.3;
	font-size: 16px;
}
/************************************
** ■ブログカード抜粋非表示
************************************/
.blogcard-snippet {
display: none;
}
/************************************
** ■カテゴリリストの各アイテムの間に下線をつける
************************************/
.widget_categories ul li {
  border-bottom: 1px solid #ccc; /* 薄いグレーの線 */
  padding: 8px 0; /* 上下の余白調整 */
}

/* 最後のアイテムの下線は消す（お好みで） */
.widget_categories ul li:last-child {
  border-bottom: none;
}
/************************************
段落の下に1行分の余白を作る
************************************/
/* 段落の下に1行分の余白を作る */
p {
    margin-bottom: 1.5em !important;
}

/* 行そのものの間隔を広げる */
body {
    line-height: 1.8 !important;
}
/************************************
インデックスカードの画像に枠線を付ける（細めの黒）
************************************/
.entry-card-thumb img {
    border: 1px solid #000 !important; /* 1pxで細めの黒線を強制適用 */
    background-color: #fff;
    box-sizing: border-box;
}
/************************************
 * スマホヘッダーのサイドバーアイコンを画像に差し替え＋強制高さ調整
************************************/
.mobile-menu-buttons .fa-bars::before {
    content: "" !important;
    display: block;
    width: 26px; 
    height: 26px;
    margin: 0 auto;

    /* ↓これに書き換えました：自由移動モード↓ */
    position: relative;
    top: 2px; /* ★ここを 5px にすれば下がり、-5px にすれば上がります */

    background-image: url("https://kmin.news/wp-content/uploads/2026/06/d815885ac4662c5b2f0d08d02feba18b.jpg") !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/************************************
* 絞り込み検索フォーム全体のグリッド配置 *
************************************/
.grid-search-form {
  width: 100%;
  box-sizing: border-box;
}

.grid-search-container {
  display: grid !important;
  grid-template-columns: 1fr 48px !important; /* 右側ボタン幅 */
  grid-template-rows: 44px 44px !important;   /* 各行の高さ */
  gap: 6px !important;                         /* 要素間の隙間 */
  width: 100% !important;
}

/* 左上：キーワード入力欄 */
.grid-search-input {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  font-size: 15px !important;       /* 文字サイズを大きく */
  font-weight: bold !important;     /* 太字（ハッキリ表示） */
  color: #111111 !important;        /* 濃い黒色 */
  box-sizing: border-box !important;
  background-color: #fff !important;
}

/* 入力欄のプレースホルダー（サイト内を検索）の文字 */
.grid-search-input::placeholder {
  color: #666666 !important;
  font-weight: normal !important;   /* 薄っすら表示（入力文字と区別するため） */
}

/* 左下：カテゴリー選択ボックス */
.grid-search-select {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 3 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 10px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  font-size: 15px !important;       /* 文字サイズを大きく */
  font-weight: bold !important;     /* 太字（ハッキリ表示） */
  color: #111111 !important;        /* 濃い黒色 */
  box-sizing: border-box !important;
  background-color: #fff !important;
}

/* 右側：2段分の高さを確保した独立した検索ボタン */
.grid-search-submit {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #333333 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background-color 0.2s ease !important;
}

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