@charset 'utf-8';

/* search */
.search {
background:linear-gradient(rgb(255,255,255,10%) 25%, rgb(0,0,0,10%) 75%);
box-shadow:inset 0 2px 3px rgb(0,0,0,25%);
border-top:solid 2px rgb(0,0,0,60%);
border-bottom:solid 2px rgb(255,255,255,20%);
padding:0 8px;
}
.search.msx {
background:linear-gradient(rgb(0,153,255,40%) 20%, rgb(0,0,0,40%) 80%);
border-bottom:solid 2px rgb(0,153,255,40%);
}
.search ul {
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
padding:4px;
}
.search li { padding:4px;}
.search li > * { filter:drop-shadow(0 2px 2px rgb(0,0,0,50%));}
.search img { display:block; height:40px;}
.search select, .search option,
.search input, .search button {
display:block;
overflow:hidden;
box-shadow:0 2px 3px rgb(0,0,0,75%);
font-size:12px; line-height:normal;
border:0; border-radius:0;
}
.search select {
width:calc(10em + 16px); height:40px;
background:#FFF;
color:#000; text-shadow:0 1px 1px rgb(0,0,0,25%);
padding:0 8px;
cursor:pointer;
}
.search option { background:#161923; color:#FFF; font-size:12px;}
.search input[type='text'] {
width:calc(10em + 20px); height:40px;
box-shadow:inset 0 2px 2px rgb(0,0,0,50%);
background:rgb(0,0,0,25%);
border:solid 2px #FFF;
color:#FFF; font-size:16px;
padding:0 8px;
}
.search input[type='text']::placeholder { opacity:50%;}
.search button {
width:80px; height:40px;
background:#FFF;
color:#000; text-shadow:0 1px 1px rgb(0,0,0,25%);
padding:0 8px;
}
/* search */

/* mode */
.result {
max-width:960px; width:100%;
text-shadow:0 1px 1px rgb(0,0,0,75%); list-style-type:none;
margin:0 auto;
}
.result ul { display:flex; align-items:center; padding:8px;}
.result li:nth-child(1) { width:272px; padding:8px;}
.result li:nth-child(2) { width:calc(100% - 272px); padding:4px;}

.badge { position:absolute; right:-4px; top:-4px; z-index:2;}
.badge:empty { display:none;}
.badge img { width:48px; height:48px;}

figure { position:relative; width:256px; height:160px;}
figure .ss {
position:relative;
display:block; width:100%; height:100%;
box-shadow:0 2px 2px rgb(0,0,0,50%);
}
figure .ss span {
position:absolute; left:0; right:0; top:0; bottom:0;
display:block;
background:#000 no-repeat center center / contain;
opacity:1;
}
figure .ss:hover span:nth-child(2) { opacity:0; transition:opacity 0.5s;}
.result h3 { font-size:24px; padding:4px;}
.result .sale { display:flex; flex-wrap:wrap; align-items:end;}
.result .sale p { display:block; font-size:16px; padding:4px;}
.result .sale del { color:rgb(255,255,255,40%); font-size:24px;}
.result .sale del:before { content:'\ffe5';}
/* .result .sale del:after { content:'\3092'; font-size:75%; margin-left:4px;} */
.result .sale span { color:#FFF; font-size:32px;}
.result .sale span.yen:before { content:'\ffe5';}
.result .tag { display:flex; flex-wrap:wrap; padding:2px;}
.result .tag * {
position:relative;
display:block;
background:linear-gradient(rgb(0,0,0,40%),rgb(0,0,0,20%));
box-shadow:inset 0 2px 2px rgb(0,0,0,60%);
color:#FFF; font-size:14px; text-decoration:none;
padding:0.5em; margin:2px;
}
.result .tag *:after { position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px; content:'';}
.result .tag a:hover:after { animation:result-tag-a 0.5s forwards;}
@keyframes result-tag-a { 0% { background:#FFF;}}
.result .des { color:rgb(255,255,255,80%); font-size:14px; line-height:1.5; padding:4px;}
@media screen and ( max-width:768px ){
.result h3 { font-size:20px;}
}
@media screen and ( max-width:640px ){
.result ul { flex-direction:column;}
.result li:nth-child(2) { width:100%; text-align:center;}
.result .sale,
.result .tag { justify-content:center;}
}
/* mode */

/* nohit*/
.nohit { font-size:24px; text-align:center; padding:4em 16px;}
@media screen and ( max-width:768px ){
.nohit { font-size:20px;}
}
/* nohit */