@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;
color:#FFF; text-align:center;
}
.search ul {
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
/* list-style-type:none; */
padding:4px;
}
.search li { padding:4px;}
.search select, .search option,
 .search input, .search button {
display:block;
overflow:hidden;
box-shadow:0 2px 3px rgba(0,0,0,0.75);
border:0; border-radius:0;
}
.search select {
width:calc(8em + 16px); height:32px;
background:#FFF;
color:#233; font-size:14px;
padding:0 8px;
cursor:pointer;
}
.search option { background:#161923; color:#FFF; font-size:12px;}
.search .radio { display:flex;}
.search input[type='radio'] { display:none;}
.search input[type='radio'] + p {
display:block;
width:calc(4em + 16px); height:32px;
background:rgba(0,0,0,0.5);
color:#899; font-size:12px; text-shadow:0 1px 1px rgba(0,0,0,0.75);
padding:10px 8px;
cursor:pointer;
}
.search input[type='radio']:checked + p { background:#8FC32F; color:#FFF;}
.search input[type='text'] {
width:calc(10em + 16px); height:32px;
background:#FFF;
box-shadow:0 1px 2px rgba(0,0,0,0.5) inset;
color:#233; font-size:14px;
padding:0 8px;
}
.search input[type='text']::placeholder { color:#BCC;}
.search button {
width:64px; height:32px;
background:#8FC32F;
color:#FFF; font-size:16px; text-shadow:0 1px 1px rgba(0,0,0,0.75);
padding:0 8px;
}
@media screen and ( max-width:768px ){
}
/* search */

/* result */
.result {
width:768px;
text-shadow:0 1px 1px rgba(0,0,0,0.75);
margin:0 auto;
}
.result .item { display:flex; justify-content:center; align-items:center; padding:8px;}
.result figure { max-width:192px; width:100%; padding:8px;}
.result figure img { width:100%;}
.result .item > div { width:100%; padding:4px;}
.result h4 { padding:4px; font-size:14px; color:rgb(255,255,255,75%);}
.result h3 { padding:4px; font-size:24px;}
.result h3 a { display:block;}
.result .data { position:relative; font-size:14px; padding:4px; padding-left:calc(8em + 4px);}
.result .data:empty { display:none;}
.result .data:before { position:absolute; left:4px; top:4px; width:8em; color:rgb(255,255,255,67%); text-align:right; white-space:nowrap;}
.result .data.mak:before { content:'\30e1\30fc\30ab\30fc\ff1a';}
.result .data.art:before { content:'\30a2\30fc\30c6\30a3\30b9\30c8\ff1a'}
.result .cap { color:rgb(255,255,255,80%); font-size:14px; line-height:1.5; padding:4px;}
.result .cap:before {
display:block;
height:2px;
background:rgb(255,255,255,20%);
margin-bottom:8px;
content:'';
}
.result .nohit { text-align:center; padding:64px 16px;}
.result .nohit p { font-size:20px;}
@media screen and ( max-width:768px ){
.result { width:100%; text-align:center;}
.result .item { flex-direction:column;}
.result h4 { font-size:12px;}
.result h3 { font-size:18px;}
.result .data { font-size:12px; padding-left:0;}
.result .cap { font-size:12px;}
.result .data:before {
position:static;
display:block;
width:auto;
text-align:center;
}
.result .nohit p { font-size:16px;}
}
/* result */