@charset "UTF-8";
/*↑ブラウザでソースを表示する際の文字化け防止対策。ファイルの先頭に書かなければならないためコメントアウトは2行目から書く。*/

#search-wrapper {
    
    width: 100%;
    position: absolute;
    z-index: 9995;
    background-color: #ff6347;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 5px;
    box-shadow: 4px 4px #d6d6d6;

    animation-name: search-visible-effect;
    animation-duration: 0.2s; 
    animation-fill-mode: forwards;
}

@keyframes search-visible-effect{
0% {
    transform: translateY(-50px);
    opacity: 0;
}
80%{opacity: 0.6;

}
100%{
    transform: translateY(0);
    opacity: 1;
}
}

/*Searchボタン*/
.search-button{
    cursor: pointer;
    /*padding: 10px 10px;*/
    width: 50px;
    height: 50px;
    border: 1px solid #ffffff; 
    font-size: 12px;
    color: #ffffff;
    background-color: #ff6347;
    border-radius: 50%;
    /*box-shadow: 4px 4px #efefef;*/
    text-align: center;
    position: absolute;
    left: 60px;
    top: 5px;
}

.search-display{
    width: 100%;
}

.search-button{
    font-size: 15px;
}

.search-close{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 10%;
    text-align: right;
    cursor: pointer;
}

.search-hidden {
  display: none;
}

.search-visible{
    display: grid;
    visibility: visible !important;
    /*opacity: 1 !important;*/
}

#search-wrapper.search-visible{
    max-height: 200px;
}

.gcse-searchbox-only{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: 9995;
    position: absolute !important;
    /*left: 50% !important;
    transform: translateX(-50%) !important;*/
}


/* 全体の枠を消す */
.gsc-control-cse {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 入力欄 */
.gsc-input-box {
  width: 95%;
  border-radius: 24px !important;
  border: 1px solid #ccc !important;
  padding: 0px 15px !important;
}

/* 入力フィールド */
input.gsc-input {
  font-size: 16px !important;
}

/* 検索ボタン */
.gsc-search-button {
  border-radius: 24px !important;
  background: red !important;
  border: none !important;
}