@charset "utf-8";
/*
************************************************************************
 汎用検索バー
************************************************************************
*/
.search-bar
{
    display: grid;
    grid-template:
    " keyword area date_from space date_to search" auto
    / 1fr     10em 12em      auto  12em    3em;
    
    width:1000px;
    max-width:calc(100vw - 8em);
    
    /*
    display: flex;
    align-items: center;
    align-content: center;
    */

    border-radius: 0.5em;
    border: 3px solid var(--body-icon-color);
    overflow: hidden;
}
.search-bar .keyword   {grid-area: keyword;}
.search-bar .area      {grid-area: area;}
.search-bar .date_from {grid-area: date_from;}
.search-bar .date_to   {grid-area: date_to;}
.search-bar .space     {grid-area: space; }
.search-bar .clear     {grid-area: clear;}
.search-bar .search    {grid-area: search;}

.search-bar .space {
    background-color:#FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.search-bar .clear {
    background-color:#FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.search-bar label
{
    background-color:#FFFFFF;
}
.search-bar button{
}
.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 > select
{
    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.clear
{
    color:#CCCCCC;
}

.search-bar button.search
{
    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.search > i
{
    font-size:2.0em;
    color: var(--accent-icon-color);
}
.search-bar button.search:hover
{
    background-color: var(--body-background-color);
}
.search-bar button.search:hover > i
{
    color: var(--body-icon-color);
}

.search-bar-clear
{
    display: inline-flex;
    align-items: center;
    align-content: center;

    font-size:0.9em;
    margin-top:0.5em;
    line-height:1;

    color:#AAAAAA;

    cursor:pointer;
}
.search-bar-clear .material-icons-round
{
    font-size: 1.2em;
}

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

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
    .search-bar
    {
        display: grid;
        grid-template:
        "keyword keyword keyword" auto
        "area    area    area"    auto
        "date_from space date_to" auto
        "clear   clear   clear"   auto
        "search  search  search"  auto
        / 1fr    auto    1fr ;
        max-width:calc(100vw - 4em);
    }
    .search-bar label
    {
        width: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;
    }
    .search-bar-clear
    {
        margin-top:1.5em;
        color:#CCCCCC;
    }
}