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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* 1. 検索窓全体のコンテナ（通常時は追従しない） */
.page-search-container {
    background: #ffffff;
    padding: 15px;
    border: 2px solid #a9a9a9; 
    border-radius: 10px;
    margin-bottom: 25px;
    position: relative; /* stickyから変更：その場に留まる */
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: border-color 0.3s ease; /* 色の変化を滑らかに */
}

/* 2. 【追加】検索ヒット時だけ追いかけてくる設定 */
.page-search-container.is-sticky {
    position: sticky;
    top: 10px;
    border-color: #ffb74d; /* 検索中は枠線をオレンジにして目立たせる */
}

/* 3. 入力エリアとボタンの横並び */
.search-input-wrapper {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

#page-search-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

/* 4. 「検索」実行ボタン（ズレ防止対応版） */
.main-search-btn {
    display: inline-flex;  /* 中身を中央に揃える */
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}

/* ボタン内のアイコン画像調整 */
.btn-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* 5. 前へ・次へボタンのエリア */
.search-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.nav-btn {
    padding: 5px 15px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.nav-btn:hover { background: #e0e0e0; }

#search-count {
    font-family: monospace;
    font-weight: bold;
    color: #555;
}

/* 6. ハイライト */
mark.my-highlight { background-color: #fff176; color: #000; }
mark.current { background-color: #ffb74d; border: 1px solid #e65100; }


/* 「検索」実行ボタンのレイアウト調整 */
.main-search-btn {
    display: inline-flex;  /* 中身をフレックスボックスにする */
    align-items: center;   /* 上下中央に揃える */
    justify-content: center; /* 左右中央に揃える */
    gap: 8px;             /* アイコンと文字の間の隙間 */
    
    padding: 10px 20px;    /* 縦のパディングを調整して押しやすく */
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
}

/* アイコン画像自体のサイズ・位置調整 */
.btn-icon {
    width: 18px;   /* 文字の大きさに合わせて調整 */
    height: 18px;  /* 文字の大きさに合わせて調整 */
    object-fit: contain;
    vertical-align: middle; /* 念のための保険 */
}


/* 検索窓の下の注釈 */
.search-reset-note {
    font-size: 12px;
    color: #333;
    margin-top: 10px;
    text-align: right; /* 右側に寄せるとバランスが良いです */
}



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

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

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


	
}