@charset "UTF-8";

/* キーワードで検索 */
#keywordsControl {
    position: relative;
    top: auto;
    left: 0;
    width: 100vh;
}

#keywordsControl *,
#searchButtonsDiv * {
    margin: 0;
    padding: 0;
}

#keywordsControl .controlText {
    display: none;
}

#keywordsControl,
#keywordsControl .controlInput {
    width: 100%;
}

#keywordsControl input {
    position: relative;
    top: auto;
    left: 5vw;
    width: 80vw;
    height: 2rem;
    padding: 0.3rem;
    box-sizing: border-box;
}


/* 検索ボタンなど */
#searchButtonsDiv {
    position: relative;
    top: -2rem;
    width: 100vw;
}

#searchButton {
    display: inline-block;
    position: absolute;
    top: auto;
    right: 24vw;
    width: 3rem;
    height: 2rem;
    font-size: 70%;
}

#resetButton {
    display: inline-block;
    position: absolute;
    top: auto;
    right: 3vw;
    width: 20vw;
    height: 2rem;
    font-size: 70%;
}


/* 出品終了日時 */
#exhibitEndDateTimeStartControl,
#exhibitEndDateTimeEndControl {
    width: 100vw;
}

#exhibitEndDateTimeStartControl .controlText,
#exhibitEndDateTimeEndControl .controlText {
    display: inline-block;
    width: 5rem;
    text-align: right;
}

#exhibitEndDateTimeStartControl .controlInput,
#exhibitEndDateTimeEndControl .controlInput {
    display: inline-block;
    width: 11rem;
}

#exhibitEndDateTimeStartControl input,
#exhibitEndDateTimeEndControl input {
    width: 90%;
}

#exhibitEndDateTimeStartControl .controlMessage,
#exhibitEndDateTimeEndControl .controlMessage {
    display: inline-block;
    width: 2rem;
    text-align: left;
    margin: 0.8em 0.3em 0.3em 0.3em;
}


/* グリッド */
#gridContainer {
    margin: 1em 2.5vw 0 2.5vw;
    display: grid;
    grid-template-columns: 95vw;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "areaFilters"
        "areaItemList"
        "areaPageNavi"
        "areaListControl";
}


/* 一覧制御部 */
#listControl {
    grid-area: areaListControl;

    font-size: 70%;

    display: grid;
    grid-template-columns: 30% 30% 40%;
    grid-template-rows: auto;
    grid-template-areas:
        "areaItemCount areaItemsPerPageSelect areaSortOrderSelect";
}

#itemCount {
    grid-area: areaItemCount;
    text-align: center;
    padding: 0.8em 0;
}

#itemsPerPageSelectControl {
    grid-area: areaItemsPerPageSelect;
}

#itemsPerPageSelect {
    min-width: 2em;
}

#sortOrderSelectControl {
    grid-area: areaSortOrderSelect;
}


/* 各部ボーダー */
.itemDiv,
#pageNavi,
#listControl,
#filters {
    border-style: solid;
    border-width: 1px 0 0 0;
    border-color: #003c1e;
}


/* アイテム一覧 */
#itemList {
    grid-area: areaItemList;
}


/* アイテム */
.itemDiv {
    display: grid;
    grid-template-columns: 6em 3.5em 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "areaItemImg areaItemStatus areaItemName"
        "areaItemImg areaCurrentPrice areaCurrentPrice"
        "areaItemImg areaDateTime areaDateTime";

    margin: 0 0 1em 0;
}

.itemDiv .linkMask {
    position: absolute;
    width: 95vw;
    height: 6rem;
    opacity: 0;
    cursor: pointer;
}

.itemDiv .divImg {
    grid-area: areaItemImg;
    padding: 0.5rem;
    box-sizing: border-box;
}

.itemDiv .divImg .itemImg {
    min-width: 5em;
    max-width: 5em;
    min-height: 5em;
    max-height: 5em;
    object-fit: cover;
}

.itemDiv .itemStatus {
    grid-area: areaItemStatus;
    margin: 0.5rem 0 0 0;
    text-align: center;
}

.itemDiv .itemName {
    grid-area: areaItemName;
    margin: 0.5rem 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.itemDiv .currentPrice {
    grid-area: areaCurrentPrice;
    font-size: 125%;
}

.itemDiv .biddingCount {
    display: none;
}

.itemDiv .startAndEndDateTime {
    grid-area: areaDateTime;
    font-size: 70%;
}

.itemDiv .timeRemaining {
    display: none;
}


/* ページナビゲーション */
#pageNavi {
    grid-area: areaPageNavi;

    text-align: center;
}

.pageNaviButton {
    display: inline-block;
    width: 2em;
    height: 1em;
    line-height: 1em;

    font-size: 60%;
    vertical-align: middle;

    margin: 1em 0.5em;
    padding: 0.3em 0;

    color: #ffffff;
    text-align: center;
    text-decoration: none;

    background-color: #003c1e;
    box-shadow: 0 0 0 2px #003c1e;

    border-radius: 4px;
    border: 1px solid #ffffff;
}

a.pageNaviButton,
a:visited.pageNaviButton {
    color: #ffffff;
}

.pageNaviDisabledButton {
    background-color: #003c1e;
    box-shadow: 0 0 0 2px #003c1e;
}

.pageNaviNextButton,
.pageNaviPrevButton {
    font-size: 100%;
    padding: 0 0 0.2em 0;
}


/* フィルター */
#filters {
    grid-area: areaFilters;

    font-size: 50%;
    padding: 1em 0;
}

#filters label {
    display: inline-block;
}