/* ---------------------------------------------------------------------- */
/* CSSファイル読み込み */
/* ---------------------------------------------------------------------- */
@import url(../../common/css/base.css);
@import url(../../common/css/advertising.css);
@import url(../../common/css/map.css);

/* ---------------------------------------------------------------------- */
/* CSSカスタムプロパティ */
/* ---------------------------------------------------------------------- */
:root
{
    /* 指定背景色 */
    --bg-c-main: var(--c-blue);  /* メイン背景色(ヘッダー・UI) */
    --bg-c-btn:  var(--c-gray);  /* ボタン用背景色 */
}

/*---------------------------------------------------------------------------*/
/* html */
/*---------------------------------------------------------------------------*/
/* base.cssで定義済 */

/*---------------------------------------------------------------------------*/
/* body, .wrapper, .main-wrapper (基本的な枠組み) */
/*---------------------------------------------------------------------------*/
/* base.cssで定義済 */

/*---------------------------------------------------------------------------*/
/* header */
/*---------------------------------------------------------------------------*/
header.view-header {
    /* visual */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky; /* 固定ヘッダ */
    top: 0;
    left: 0;
    gap: 2.0rem;
    z-index: 555; /* 常に最前面に表示 */
    /* box */
    width: 100%;
    height: auto;
    padding: 1.0rem;
    /* background */
    background-color: var(--c-white);
    /* font, text, color */
    color: var(--c-black);
    font-size: var(--f-medium);
}

.view-header .logo {
    /* box */
    height: 4.0rem;
    width: 60%;
}

.view-header .menu {
    /* box */
    height: 4.0rem;
    border: 1px solid var(--c-navy);
}

.view-header .menu-svg {
    /* mask */
    mask-image: url(../../common/img/system/menu.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    /* visual */
    display: inline-block;
    /* box */
    width: 4.0rem;
    margin: -1px;
    aspect-ratio: 1/1;
    /* background */
    background-color: var(--c-navy);
}

.view-header .tool-button-group
{
    /* visual */
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    /* box */
    width: 40%;
}

.view-header .tool-btn {
    /* box */
    height: 4.0rem;
    margin: 0;
    padding: 0;
    border: none;
    /* background */
    background-color: transparent;
}

.view-header .tool-btn img {
    /* box */
    width: auto;
    height: 100%;
}

.view-header button.condition-btn {
    /* visual */
    /* box */
    width: 100%;
    padding: 5px 10px;
    border: none;
    border-color: var(--c-blue);
    border-radius: 5px;
    /* background */
    background-color: var(--c-blue);
    /* font, text, color */
    color: var(--c-white);
    font-size: var(--f-small);
    font-weight: bold;
}

.view-header select {
    /* visual */
    /* box */
    padding: 5px 3px;
    border: 1px solid var(--c-blue);
    border-radius: 5px;
    /* background */
    background-color: var(--c-white);
    /* font, text, color */
    color: var(--c-black);
    font-size: var(--f-small);
    font-weight: bold;
}

.view-header input[type="text"] {
    /* visual */
    /* box */
    padding: 6px 6px;
    border: 1px solid var(--c-blue);
    border-radius: 5px;
    /* background */
    background-color: var(--c-white);
    /* font, text, color */
    color: var(--c-black);
    font-size: var(--f-small);
    font-weight: bold;
}

/*---------------------------------------------------------------------------*/
/* バスビジョン専用の要素 */
/*---------------------------------------------------------------------------*/
.view-header .busvision-wrapper {
    /* box */
    margin: -1.5rem 0px;
    padding: 0px 7px;
    /* font, text, color */
    font-weight: bold;
}

/*---------------------------------------------------------------------------*/
/* footer */
/*---------------------------------------------------------------------------*/
footer {
    /* visual */
    /* box */
    padding: 10px 20px;
    /* background */
    background-color: var(--c-navy);
    /* color, font, text, color */
    color: var(--c-white);
    font-size: var(--f-footer);
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/* 検索条件選択タブのCSS */
/* ---------------------------------------------------------------------- */
.condition-list-wrapper {
    /* visual */
    position: relative;
    
    /* box */
    width: 100%;
    overflow-y: auto;
}

ul.condition-list {
    /* visual */
    display: inline-flex;
    justify-content: flex-start;
    gap: 1.0rem;
    list-style: none;

    /* box */
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: auto;
    scrollbar-width: none;
}

ul.condition-list li {
    /* box */
    width: fit-content;
    height: auto;
    padding: 0;

    /* font, text, color */
    font-size: var(--f-medium);
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* UI */
    user-select: none;
}


/*---------------------------------------------------------------------------*/
/* レスポンシブ対応*/
@media only screen and (max-width: 900px) {
    
}