/*
Theme Name: Lightning Child Sample
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/* ---------------------------------
 ヘッダーロゴ横に検索窓
---------------------------------*/
/* デザインが崩れるので991.98px以下でform非表示 */
@media (max-width: 991.98px){
    .site-header-container form{
        display: none !important;
    }
}
.site-header-container .search-form{
    position: relative;
}
/*虫眼鏡マーク*/
.site-header-container .search-form:after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin: 0;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:14px 1.5em;
}
/*フィールド*/
.site-header-container .search-field{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) ;
    right: 0px;
}
/*submitボタン非表示*/
.site-header-container .search-submit{
    display: none;
}
/*テキストフィールド*/
.site-header-container form .search-field{
    z-index: 200;
    opacity: 0;
    width: 64px;
    transition: all 0.5s ease-in;
    padding: 1em 0.8em;
    cursor: pointer;
}
/*フォーカス時にテキストフィールド表示*/
.site-header-container form .search-field:focus{
    opacity: 1;
    width:155px;
    transition: all 0.5s ease-in;
    border-width:1px;
    border-radius:var(--vk-size-radius);
}