@charset 'euc-jp';

/*↓検索↓*/
.search { padding:8px;}
.search ul {
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
padding:4px;
}
.search li { padding:4px;}
.search select, .search option,
.search input, .search button {
display:block;
overflow:hidden;
box-shadow:0 2px 3px rgb(0,0,0,75%);
border:0; border-radius:0;
}
.search select {
width:calc(8em + 16px);  height:32px;
background:#FFF;
color:#333; font-size:14px;
padding:0 8px;
cursor:pointer;
}
.search option { background:#161923; color:#FFF; font-size:12px;}
.search input[type='text'] {
width:calc(10em + 16px); height:32px;
box-shadow:inset 0 2px 2px rgb(0,0,0,50%);
background:#FFF;
color:#233; font-size:14px;
padding:0 8px;
}
.search input[type='text']::placeholder { color:#BCC;}
.search button {
width:64px; height:32px;
background:#F93;
color:#FFF; font-size:16px; text-shadow:0 1px 1px rgb(0,0,0,75%);
padding:0 8px;
}
/*↑検索↑*/
/*↓ページャ↓*/
.pager {
color:#FFF; text-align:center; text-shadow:0 1px 1px rgb(0,0,0,75%);
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 a,
.pager span {
display:block;
border:1px solid; border-radius:4px;
font-size:14px;
padding:8px;
}
.pager a {
position:relative;
background:linear-gradient(#363943,#060913);
box-shadow:0 2px 2px rgb(0,0,0,50%);
border-color:#9699A3 #666973 #363943;
color:#FFF; text-decoration:none;
}
.pager a:before { position:absolute; left:0; right:0; top:0; bottom:0; background:#FFF; opacity:0; content:'';}
.pager a:hover:before { animation:pager-a 1s forwards;}
@keyframes pager-a { 0% { opacity:1;}}
.pager span {
background:linear-gradient(transparent,#363943);
box-shadow:0 1px 2px rgb(0,0,0,75%) inset;
border-color:#565963;
color:#FFF;
}
@media screen and ( max-width:768px ){
.pager p { font-size:14px;}
.pager a,
.pager span { font-size:12px;}
}
/*↑ページャ↑*/

.result {
max-width:960px; width:100%;
text-shadow:0 1px 1px rgb(0,0,0,75%); list-style-type:none;
margin:0 auto;
}

/*↓結果：該当あり↓*/
.layout_0 {
display:flex; align-items:center;
padding:8px;
}
.layout_0 li:nth-child(1) { width:272px; padding:8px;}/* 画像 */
.layout_0 li:nth-child(2) { width:calc(100% - 272px); padding:4px;}/* 文字 */ 
.layout_0 figure { position:relative; width:256px; height:160px;}

.badge { position:absolute; right:-4px; top:-4px; z-index:2;}/* バッジ */
.badge img { width:48px; height:48px;}

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;}

.layout_0 h3 { font-size:24px; padding:4px;}/* タイトル */
.layout_0 .sale { display:flex; flex-wrap:wrap; align-items:end;}/* 価格＋還元 */
.layout_0 .sale p { display:block; font-size:16px; padding:4px;}
.layout_0 .sale del { color:#899; font-size:24px; text-decoration:none;}/* 定価 */
.layout_0 .sale del:before { content:'\ffe5';}/* ￥ */
.layout_0 .sale del:after { content:'\3092'; font-size:75%; margin-left:4px;}/* を */
.layout_0 .sale span { color:#FFF; font-size:32px;}/* 強調 */
.layout_0 .sale span.yen:before { content:'\ffe5';}/* ￥ */
.layout_0 .tag {display:flex; flex-wrap:wrap; padding:2px;}/* タグ */ 
.layout_0 .tag * {
position:relative;
display:block;
background:linear-gradient(rgb(0,0,0,50%),rgb(0,0,0,25%));
box-shadow:inset 0 2px 2px rgb(0,0,0,50%);
color:#FFF; font-size:14px; text-decoration:none;
padding:0.5em; margin:2px;
}
.layout_0 .tag *:after {
position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px;
content:'';
}
.layout_0 .tag a:hover:after { animation:result-tag-a 0.5s forwards;}
@keyframes result-tag-a { 0% { background:#FFF;}}
.layout_0 .des { color:#BCC; font-size:14px; line-height:1.5; padding:4px;}/* 説明(短) */
@media screen and ( max-width:768px ){
.layout_0 h3 { font-size:20px;}
}
@media screen and ( max-width:640px ){/* 縦並びに変更 */
.layout_0 { flex-direction:column;}
.layout_0 li:nth-child(2) { width:100%; text-align:center;}
.layout_0 .sale,
.layout_0 .tag { justify-content:center;}
}
/*↑検索：該当あり↑*/
/*↓該当なし↓*/
.nohit { font-size:24px; text-align:center; padding:4em 16px;}
@media screen and ( max-width:768px ){
.nohit { font-size:20px;}
}
/*↑該当なし↑*/