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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 検索ボックスのラベルデザイン */
.wp-search-font-setting {
	font-size: 0.7rem;
}
/* ==================================================
   Google Programmable Search Engine 
   Custom Design - Black Theme with Red & Green Accents
================================================== */

/* 1. 基本構造 & ラベル (::before)
-------------------------------------------------- */
.gsc-control-cse {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important; /* 最大幅に設定 */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 擬似要素による見出しラベル */
.gsc-control-cse::before {
    content: "Googleで検索";
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #009250; /* アクセントカラー：緑 */
    line-height: 1.2;
}

/* 検索結果表示時はラベルを非表示 */
.gsc-results-wrapper-overlay::before {
    content: none !important;
}

/* 2. 検索入力ボックス
-------------------------------------------------- */
form.gsc-search-box, 
table.gsc-search-box {
    width: 96% !important;
    margin-bottom: 0 !important;
}

.gsc-input-box {
    border: 1px solid #ffffff !important;
    border-radius: 4px !important;
    background-color: #1a1a1a !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* フォーカス時の強調：緑 */
.gsc-input-box:focus-within {
    border-color: #009250 !important;
    box-shadow: 0 0 0 2px rgba(0, 146, 80, 0.4) !important;
}

input.gsc-input {
    color: #ffffff !important;
    background-color: transparent !important;
    background-image: none !important; /* Googleアイコン除去 */
}

input.gsc-input::placeholder {
    color: #cccccc !important;
}

/* 3. 検索ボタン & 各種ボタン
-------------------------------------------------- */
/* 検索ボタン本体：赤 */
.gsc-search-button-v2 {
    background-color: #84172f !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 18px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

.gsc-search-button-v2:hover {
    background-color: #a61d3b !important;
}

.gsc-search-button-v2 svg {
    fill: #ffffff !important;
}

/* クリアボタン (×) */
.gsst_a .gscb_a {
    color: #bbbbbb !important;
}

.gsst_a .gscb_a:hover {
    color: #ffffff !important;
}

/* 4. 自動入力候補 (サジェスト)
-------------------------------------------------- */
.gssb_c {
    background-color: #1a1a1a !important;
    border: 1px solid #444444 !important;
    z-index: 999999 !important;
}

.gsc-completion-container .gsc-completion-selected,
.gssb_m td {
    color: #cccccc !important;
    padding: 8px 12px !important;
}

/* 選択中項目のハイライト：赤 */
.gssb_a, .gssb_a td,
.gsc-completion-selected {
    background-color: #84172f !important;
    color: #ffffff !important;
}

.gsc-completion-container span {
    color: #cccccc !important;
}

/* 5. 検索結果表示 (オーバーレイ & カード)
-------------------------------------------------- */
.gsc-results-wrapper-overlay {
    background-color: #000000 !important;
    border: 1px solid #333 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

/* 各検索結果のカードデザイン */
.gsc-webResult.gsc-result {
    background-color: #111111 !important;
    border: 1px solid #222 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.gsc-webResult.gsc-result:hover {
    border-color: #009250 !important; /* ホバー：緑 */
    transform: translateY(-2px);
}

.gs-title, .gs-title b {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 18px !important;
}

.gs-title:hover, .gs-title:hover b {
    color: #84172f !important; /* タイトルホバー：赤 */
}

.gs-snippet {
    color: #cccccc !important;
    line-height: 1.6 !important;
}

.gs-visibleUrl {
    color: #009250 !important; /* URL：緑 */
}

/* ページネーション */
.gsc-cursor-page {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
}

.gsc-cursor-page.gsc-cursor-current-page {
    background-color: #84172f !important;
    border-color: #84172f !important;
}

/* 6. レスポンシブ対応
-------------------------------------------------- */

/* PC・大型タブレット (1023px以下) */
@media screen and (max-width: 1023px) {
    .gsc-results-wrapper-overlay {
        width: 85% !important;
        left: 7.5% !important;
    }
}

/* タブレット (834px以下) */
@media screen and (max-width: 834px) {
    .gsc-results-wrapper-overlay {
        width: 92% !important;
        left: 4% !important;
    }
    .gs-title {
        font-size: 16px !important;
    }
}

/* スマートフォン (480px以下) */
@media screen and (max-width: 480px) {
    .gsc-modal-background-image-visible {
        padding: 0 !important;
    }
    .gsc-results-wrapper-overlay {
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        border-radius: 0 !important;
        padding: 10px !important;
    }
    .gsc-webResult.gsc-result {
        padding: 12px !important;
    }
    .gs-title {
        font-size: 15px !important;
    }
    .gs-snippet {
        font-size: 13px !important;
    }
    .gsc-adBlock {
        display: none !important;
    }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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