#main{
    width:100%;
}


#selector{
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    margin:0 auto;
}

#selector a{
    margin:1vmin 3vmin;
    color:gray;
    width:10vmin;
    font-size: 2vmin;
    line-height:3vmin;
    text-align: center;
    text-wrap:nowrap;
}

#selector a:before{
    content: "";
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    height:0.2vmin;
    width:100%;
    bottom:0;
    background:gray;
}

#selector a:after{
    content: "";
    position:absolute;
    left:0;
    height:0.2vmin;
    width:0;
    bottom:0;
    background:black;
    transition: width 1s;
}

#selector a:hover{
    color:black;
}

#selector a:hover:after{
    width:100%;
}

.selected{
    font-weight: bold;
    color:black !important;
}

.selected:before{
    background:black !important;
}
.selected:after{
    width:100% !important;
}

#castSearch{
    margin-left: -5vmin;
    left:5vmin;
    width: 5vmin;
    height: 5vmin;
    border-radius: 1vmin;
    background:gray;
    transition:opacity 1s;
}
#castSearch:hover{
    opacity:0.5;
}
#castSearch img{
    width:100%;
}

#castSearch::after{
    content: "検索";
    position:absolute;
    width:100%;
    font-size: 1.5vmin;
    font-weight: bold;
    left:0;
    top:-2.5vmin;
    text-align: center;
    color: gray;
}

.hidden{
    display: none;
}


#search{
    width:fit-content;
    outline: solid black 0.1vmin;
    margin: 2vmin auto;
    border-radius: 2vmin;
    padding: 2vmin;
    overflow: hidden;
}
#search div{
    display:flex;
    margin : 1vmin;
}
#search p{
    line-height: 2vmin;
    margin:1vmin 0;
    width:8vmin;
    text-align: right;
}
#search input[type="text"]{
    line-height: 2vmin;
    margin: 0 0.5;
    padding: 0 0.5vmin;
}
#search label{
    margin:1.5vmin;
    height:1vmin;
    width:1vmin;
    margin-right: 10vmin;
    outline: solid gray 0.3vmin;
}

#search label:before{
    position:absolute;
    top:-1vmin;
    left: 2vmin;
    font-size: 2vmin;
    line-height: 3vmin;
    width:10vmin;
}

#search input:checked+ label::after{
    content: "";
    position:absolute;
    left:0vmin;
    top:-0.7vmin;
    height:1.2vmin;
    width:0.6vmin;
    rotate:45deg;
    background:none !important;
    border :solid black 0.5vmin;
    border-top:none;
    border-left:none;
}

#search input[type="checkbox"]{
    display:none;
}

#tagInput{
    font-size: 1.5vmin;
    width:40vmin;
}

#search input[type="submit"]{
    position: absolute;
    bottom:2vmin;
    right: 2vmin;
    border-radius : 2vmin;
    width:6vmin;
    height: 4vmin;
    padding: 0;
    background:lightgray;
    transition: translate 0.5s, opacity 0.5s;
}

#search input[type="submit"]:hover{
    translate: 0 -0.5vmin;
    opacity:0.5;
}

#createNewItem{
    display:block;
    width:fit-content;
}



#itemList{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width:120vmin;
    margin:2vmin auto;
}
.item{
    height:25vmin;
    width:25vmin;
    color:black;
    transition: opacity 0.5s, translate 0.5s;
    margin:2vmin;
    border-radius:2vmin;
    overflow: hidden;
    box-shadow: 0 1vmin 2vmin rgb(0 0 0 /0.5);
    display: flex;
    flex-flow: column;
}
.item:hover{
    translate: 0 -0.5vmin;
    opacity:0.5;
}
.item::before{
    position:absolute;
    top:2vmin;
    left:1.5vmin;
    line-height:2vmin;
    font-size: 1.5vmin;
    color:white;
    text-shadow: 0 0 0.5vmin black;
    z-index: 1;
}
.item::after{
    position:absolute;
    top:2vmin;
    left:1vmin;
    height:2vmin;
    width:0.2vmin;
}

.item>img{
    flex-basis: auto;
    object-fit: cover;
    width:100%;
    height:0;
    flex-grow: 1;
}

.item>.info{
    flex-basis: max-content;
    box-shadow: 0 0 5vmin;
}
.item p{
    padding:0 1vmin;
}

.item .title{
    line-height:3vmin;
    font-size:2vmin;
    text-align: left;
}

.item .owner{
    margin-left:1vmin;
    display:flex;
}

.item .owner .user_icon{
    height:2vmin;
}

.item .owner .owner_name{
    font-size: 1.5vmin;
    line-height: 2vmin;
}
.item .tags{
    display: flex;
    flex-wrap:  wrap;
    margin-bottom: 1.5vmin;
}
.item .tags *{
    background:lightgray;
    color:black;
    line-height:1.5vmin;
    font-size: 0.8vmin;
    margin-left: 0.5vmin;
    margin-top: 0.5vmin;
    padding: 0 1vmin;
    border-radius: 0.75vmin;
}



.item .date{
    position:absolute;
    bottom:0;
    right:0;
    line-height: 1.5vmin;
    font-size: 1vmin;
    color:lightgray;
}



#pageShift{
    margin:2vmin auto;
    display:flex;
    justify-content: center;
    outline:solid black 0.15vmin;
    width:16vmin;
    padding:1vmin;
    border-radius:2vmin;
}

#pageShift a{
    width:3vmin;
    text-align: center;
    line-height: 2vmin;
    font-size: 2vmin;
    color:lightgray;
}

#pageShift a:any-link{
    color:black;
}

#pageShift p{
    width:10vmin;
    line-height: 2vmin;
}