/*
 * ヘッダー検索ボックス・FAQ位置調整
 * common.css の後に読み込んで上書きする
 *
 * ≧1100px: [ロゴ] [    検索欄    ] [FAQ/お問い合せ]   ← 横並び
 * 768-1099: [ロゴ]              [FAQ/お問い合せ ]   ← 縦並び
 *           [ロゴ] [      検索欄（広い）      ]
 *
 * ロゴ: width:370px, left:0.6% → 右端は約380px
 *
 * ──────────────────────────────────────────
 * common.css の元の値（768px以上・デスクトップ）
 * ──────────────────────────────────────────
 *
 * #global-header .search-box {
 *     display: block;
 *     padding: 0;
 *     border-bottom: none;
 *     background: transparent;
 *     width: 200px;
 *     height: 28px;
 *     position: absolute;
 *     top: -67px;
 *     right: 168px;
 * }
 *
 * #global-header .utility-contact {
 *     border-bottom: none;
 *     color: #333;
 *     position: absolute;
 *     border-right: #e1e1e1 1px solid;
 *     top: -67px;
 *     right: 390px;
 *     display: inline-block;
 *     text-align: right;
 *     padding: 8px 20px 8px 0;
 * }
 *
 * #global-header .utility-contact a {
 *     display: block;
 *     padding: 0 0 0 29px;
 *     color: #333;
 *     font-size: 14px;
 *     line-height: 1.3;
 * }
 *
 * #global-header .utility-contact:before {  ← メールアイコン
 *     background: url(/img_bwh/cmn/ui_sprite.png) no-repeat 0 -451px;
 *     width: 20px; height: 16px;
 *     position: absolute; top: 50%; left: 3%;
 * }
 * ──────────────────────────────────────────
 */

/* === 768px未満：モバイル === */
@media screen and (max-width: 767px) {
    #global-header .search-box {
        padding-top: 10px !important;
        padding-right: 30px;
        padding-left: 0px;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }
    #global-header .search-box > div,
    #global-header .search-box .gsc-control-wrapper-cse,
    #global-header .search-box .gsc-control-cse,
    #global-header .search-box table.gsc-search-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        table-layout: fixed;
    }
}

/* === 768px～920px：縦並び（FAQ上段 + 検索欄下段フル幅） === */
@media print, screen and (min-width: 768px) and (max-width: 920px) {

    /* FAQ → 上段・右寄せ */
    #global-header .utility-contact {
        right: 10px;
        top: -74px;
        border-right: none;
    }

    /* 検索欄 → 下段・ロゴ右端から右端いっぱい */
    #global-header .search-box {
        left: 420px;
        right: 25px;
        width: auto !important;
        top: -50px;
    }
}

/* === 921px～1099px：横並び（検索欄やや小さめ） === */
@media print, screen and (min-width: 921px) and (max-width: 1099px) {

    #global-header .search-box {
        left: 420px;
        right: 200px;
        width: auto !important;
        top: -64px;
    }
    #global-header .utility-contact {
        right: 0;
        top: -67px;
        border-right: none;
    }
}

/* === 1100px以上：横並び（検索欄 + FAQ右横） === */
@media print, screen and (min-width: 1100px) {

    #global-header .search-box {
        top: -64px;
        left: 410px;
        right: 200px;  /* FAQ要素の幅分だけ空ける */
        width: auto !important;
    }

    #global-header .utility-contact {
        top: -67px;
        right: 0;
        border-right: none;
    }
}

/* === Google CSE 内部要素を親(.search-box)いっぱいに広げる ===
   Google CSE の JS がインラインで width を固定するため !important で上書き */
#global-header .search-box > div,
#global-header .search-box .gsc-control-wrapper-cse,
#global-header .search-box .gsc-control-cse,
#global-header .search-box .gsc-search-box-tools,
#global-header .search-box table.gsc-search-box {
    width: 100% !important;
    max-width: 100% !important;
}
/* td.gsc-input は 100% にしない（隣のボタンセルを潰さないため） */


/* ========================================
 * Google CSE 検索ボックス 高さズレ修正
 *
 * 根本原因: Google CSEが内部生成する td.gsib_b
 * （クリアボタン用セル）が 48px × 48px 固定で
 * テーブル行全体を48pxに押し広げていた
 * ======================================== */

/* 1. input-box（見える枠線）の高さを明示 */
.gsc-input-box {
    height: 28px;
    padding: 0 4px;
}

/* 2. 内部テーブルとセルの高さを枠に揃える */
.gsc-input-box table.gstl_50 {
    height: 28px;
}

.gsc-input-box td.gsib_a,
.gsc-input-box td.gsib_b {
    height: 28px;
    vertical-align: middle;
}

/* 3. クリアボタンセルの幅も縮小（48px→28px） */
.gsc-input-box td.gsib_b {
    width: 28px;
}

/* 4. 入力フィールドのネガティブマージンを解除 */
.gsc-input-box td.gsib_a input.gsc-input {
    margin-top: 0;
}

.gscb_a{
    line-height: 50px;
}