@charset 'euc-jp';

/*↓reset↓*/
.search, .search *,
 .pager,  .pager *,
.result, .result * {
box-sizing:border-box;
outline:0;
color:#FFF; line-height:1; font-weight:normal;
padding:0; margin:0;
-webkit-appearance:none; -moz-appearance:none; appearance:none;/* 重要 */
transition:none;
}
/*↑reset↑*/

/*↓検索↓*/
.search {
color:#FFF; font-size:0; text-align:center;
padding:8px;
}
.search h2 {
color:#FFF; font-size:20px; text-shadow:0 1px 1px rgba(0,0,0,0.75);
padding:8px;
}
.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 ){
}
/*↑検索↑*/

/*↓ページャ↓*/
.pager {
text-shadow:0 1px 1px rgba(0,0,0,0.8);
font-size:0; text-align:center;
padding:8px;
}
.pager:before { clear:both; content:'';}
.pager p { font-size:16px; padding:8px;}
.pager ul { display:flex; flex-wrap:wrap; justify-content:center; padding:4px;}
.pager li { padding:4px;}
.pager li > a,
.pager li > span {
display:block;
border:1px solid; border-radius:4px;
font-size:14px; 
padding:8px;
}
.pager li > a {/* 遷移可 */
position:relative;
background:linear-gradient(#363943,#001);
box-shadow:0 2px 3px rgba(0,0,0,0.75);
border-color:#9699A3 #666973 #363943;
color:#FFF !important; text-decoration:none;
transition:none;
}
.pager li > a:before {
position:absolute; left:0; right:0; top:0; bottom:0;
background:#FFF;
opacity:0;
content:'';
}
.pager li > a:hover:before { animation:pager-a 1s forwards;}
@keyframes pager-a { 0% { opacity:1;}}
.pager li > span {
background:linear-gradient(rgba(54,57,67,0),#363943);
box-shadow:0 1px 2px #000 inset;
border-color:#565963;
color:#FFF;
}
@media screen and ( max-width:768px ){
.pager p { font-size:14px;}
.pager li > a,
.pager li > span { font-size:12px;}
}
/*↑ページャ↑*/

/*↓検索結果↓*/
.result {
width:768px;
font-size:0; text-align:left; 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 { color:#CDD; font-size:14px; padding:4px;}
.result h3 { font-size:24px; padding:4px;}
.result .data {
position:relative;
font-size:14px;
padding-left:9em;
}
.result .data.mak { margin-top:0.5em;}
.result .data:empty { display:none;}
.result .data:before {
position:absolute; left:0; top:0;
color:#9AA; text-align:right; white-space:nowrap;
width:9em;
padding:4px;
}
.result .data.mak:before { content:'\3010\30e1\30fc\30ab\30fc\3011';}/*【メーカー】*/
.result .data.art:before { content:'\3010\30a2\30fc\30c6\30a3\30b9\30c8\3011'}/*【アーティスト】*/
.result .data a { display:inline-block; margin:4px;}
.result .data br { display:none;}
.result .cap {
font-size:14px; line-height:1.5;
border-top:solid 1px #344;
padding-top:0.5em; margin-top:1em;
margin:4px;
}
.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 a { 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;}/* 結果が無い */
}
/*↑結果結果↑*/