@charset "utf-8";
/*
************************************************************************
 汎用検索バー
************************************************************************
*/
.search-bar
{
    display: flex;
    align-items: center;
    align-content: center;

    border-radius: 0.5em;
    border: 3px solid var(--body-icon-color);
    overflow: hidden;
}
.search-bar label
{
    flex:0 0 auto;
    background-color:#FFFFFF;
}
.search-bar label.size-l
{
    flex:1 0 auto;
}
.search-bar label.size-m
{
    width:15%;
    flex:1 0 15%;
}
.search-bar button{
    flex:0 0 auto;
}
.search-bar label > .name
{
    position:absolute;
    top:0;
    left:0;
    
    display:block;
    line-height:1;
    font-size:0.8em;
    padding:0.5em;
    color:var(--body-icon-color);
}
.search-bar label > input
{
    border: 0px solid transparent;
    background-color: transparent;
    line-height:1.2;
    font-size:16px;
    padding:1.5em 0.5em 0.8em 0.5em;

    width:100%;
}
.search-bar label > input:focus
{
    background-color: var(--body-icon-color-light);
}
.search-bar label.range
{
    display: flex;
    align-items: center;
    align-content: center;
}
.search-bar label.range > input
{
    width:10em;
}
.search-bar button
{
    align-self:stretch;

    display: flex;
    align-items: center;
    align-content: center;

    border: 0px solid transparent;
    background-color: var(--accent-background-color);

    padding:0.8em;
}
.search-bar button > i
{
    font-size:2.0em;
    color: var(--accent-icon-color);
}
.search-bar button:hover
{
    background-color: var(--body-background-color);
}
.search-bar button:hover > i
{
    color: var(--body-icon-color);
}


/* ################################################################################################ */
/* ## TAB						 ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1040px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
    .search-bar
    {
        flex-wrap: wrap;
    }
    .search-bar label
    {
        width:100%;
        flex:0 0 100%;
    }
    .search-bar label.size-l
    {
        width:100%;
        flex:0 0 100%;
    }
    .search-bar label.size-m
    {
        width:50%;
        flex:0 0 50%;
    }
    .search-bar label > input
    {
        font-size:1.2em;
    }
    .search-bar label.range > input
    {
        width:50%;
        flex:0 1 50%;
    }
    .search-bar button
    {
        width: 100%;
        flex:0 0 100%;

        justify-content: center;
        align-items: center;
        align-content: center;
    }
}