/* --------------------
Love Disney
Search CSS 2026.02.17
-------------------- */

/* ==========================================
   全デバイス共通：初期リセット
   ========================================== */
.gsc-control-cse {
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
}

/* ロゴのリンクが横に広がりすぎないように制限 */
.site-logo-link {
    display: inline-block !important;
    width: auto !important;
}

/* ==========================================
   スマホ用：タップを最優先 (767px以下)
   ========================================== */
@media screen and (max-width: 767px) {
    .search-box-final {
        position: absolute !important;
        /* ロゴの「E」の右あたりに来るように調整 */
        top: 0px !important;    
        right: 30px !important;
        width: 80px !important; 
        height: 60px !important;
        /* ★重要：ロゴより確実に上に持ってくる */
        z-index: 99999 !important; 
        /* ★重要：これ自体が確実にイベントを受け取るようにする */
        pointer-events: auto !important; 
        overflow: hidden;
        transition: width 0.3s ease;
    }

    .gsib_a {
      width: 60px !important;
    }

    .search-box-final .gsc-input-box {
        border: none !important;
        background-color:transparent !important;
    }

    /* 虫眼鏡アイコン：タップ領域を最大化 */
    button.gsc-search-button-v2 {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        background-color: #fff !important;
        border: 2px solid #d2a106 !important; /* ゴールドの縁取り */
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    /* タップして広がった時 */
    .search-box-final:focus-within {
        width: calc(100% - 30px) !important;
        background: #fff !important;
        border-radius: 25px;
        overflow: visible;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    }
}

/* ==========================================
   PC用：右側に配置 (768px以上)
   ========================================== */
@media screen and (min-width: 768px) {
    .search-box-final {
        position: absolute !important;
        top: 10px;
        right: 15px;
        width: 500px !important;
        z-index: 10000;
    }
    .search-box-final .gsc-input-box {
        border: 1px solid #ccc !important;
        background: #fff !important;
        width: 500px !important;
        border-radius: 4px;
    }
}

/* ==========================================
   フォーカス時の青い枠線を完全に消去
   ========================================== */

/* 1. ブラウザ標準の青いアウトラインを消す */
input.gsc-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Google CSEが独自に付与するフォーカス時の青枠をリセット */
.gsc-input-box-focus {
    border-color: #ccc !important; /* PC版：通常時のグレーの枠線を維持 */
    box-shadow: none !important;
}

.gsc-input .gsc-input-box {
    border-radius: 40px !important;
}