@charset 'utf-8';

/* --------------
googleカスタム検索の表示仕様が変わった（defaultのcssが大きく変わった模様）ので
既存のレイアウトが保たれるように対応 */

@media all and (min-width: 901px)
{
    .gsc-control-cse {
        /* カスタム検索要素全体を囲む */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    form.gsc-search-box {
        /* 検索ボックス（入力欄とボタン）を囲む */
        margin: 0 !important;
    }
    input.gsc-input {
        /* input内で検索語を実際に入力するエリア */
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        border: 0 !important;
    }
    .gsc-input .gsc-input-box {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .gsc-input-box {
        /* inputが入るtableが入るdiv */
        padding: 0 !important;
        border-top: 2px solid #a99684 !important;
        border-left: 2px solid #a99684 !important;
        border-bottom: 2px solid #a99684 !important;
        border-right: 0 !important;
    }
    .gsib_a {
        /* 検索語入力枠内に眼鏡アイコンを表示 */
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 10px !important;
        background-image: none !important;
    }
    .gsib_b {
        /* 検索boxクリアが入るtd */
        padding: 0 !important;
        height: 31px !important;
        width: 18px;
    }
    .gsst_a {
        padding: 0 !important;
        position: relative;
        top: 7px;
    }
    .gscb_a {
        background: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' fill='%23444746'/></svg>) center no-repeat;
        height: 10px;
        width: 10px; 
    }

    .gsc-search-button {
        display: block !important;
        margin: 0 !important;
        padding: 4px 8px 4px 4px !important;
        padding: 5px 9px 5px 5px !important;
        border: 2px solid #a99684 !important;
        border-radius: 0 4px 4px 0 !important;
        background-color: #a99684 !important;
        width: auto !important;
    }
    @media (hover: hover) {
        .gsc-search-button:hover {
            background-color: #c3b5a9 !important;
            border-color: #c3b5a9 !important;
            /* opacity: .7 !important; */
        }
    }
    .gsc-search-button > button {
        display: inline-block;

        width: 20px !important;
        height: 20px !important;

        margin-left: 3px !important;
        margin-top: 1px !important;
        padding: 0 !important;

        border: none !important;
        border-radius: 0 !important;

        background-image: url('/assets/img/header-icon-search.png');
        background-repeat: no-repeat;
        background-position: left 0 top 0;
        background-size: contain !important;
        background-color: transparent !important;
    }
    .gsc-search-button > button svg {
        display: none;
    }
}

@media all and (max-width: 900px)
{
    .p-header .p-header__search .gsc-control-cse
    {
        padding: 0;

        border: 0;
        background-color: inherit;
    }
    .p-header .p-header__search .gsc-control-cse .gsc-search-box
    {
        margin: 0;
        width: auto !important;

        border-collapse: separate;
    }
    form.gsc-search-box {
        max-width: 870px !important;
    }
    .p-header .p-header__search .gsc-control-cse .gsc-search-box .gsc-input
    {
        padding: 0;

        border: 1px solid #a99684;
        border-radius: 4px 4px 4px 4px !important;
        background-color: #fff;
    }
    .p-header .p-header__search .gsc-control-cse .gsc-search-box .gsc-input .gsc-input-box
    {
        border: none;
    }
    .p-header .p-header__search .gsc-control-cse .gsc-search-box .gsc-input .gsc-input-box .gsc-input
    {
        border: none;
    }
    .p-header .p-header__search .gsc-control-cse .gsc-search-box .gsc-search-button
    {
        display: none !important;
    }
    .p-header .p-header__search .gsc-control-cse .gsc-search-box .gsc-search-button > button
    {
        display: none !important;
    }
    .p-header .p-header__search .gsc-control-cse .gsc-search-box .gsc-search-button > button svg
    {
        display: none;
    }
}