@charset 'utf-8';

/*↓共通↓*/
.gm-large a,
.gm-small a { color:#FFF; text-decoration:none;}
/*↑共通↑*/
/*↓大↓*/
.gm-large { position:relative; width:480px;}
.gm-large:before,
.gm-large:after {
position:absolute; top:0; bottom:0; z-index:2;
background:#FFF; width:1px;
content:'';
}
.gm-large:before { left:0;}
.gm-large:after { right:0;}
.gm-large .cap {
position:relative;
display:block;
width:480px; height:300px;
}
.gm-large .cap:hover span:nth-child(2) { transition:opacity 0.5s; opacity:0;}
.gm-large .cap span {
position:absolute; left:0; right:0; top:0; bottom:0;
display:block;
background:#000 no-repeat center center / cover;
}
.gm-large .cap div {
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(transparent, rgb(0,0,0,75%) 8px, #000);
padding:12px;
}
.gm-large .cap div * { padding:4px;}
.gm-large .cap div :empty { display:none;}
.gm-large .cap h3 { font-size:16px;}
.gm-large .cap h4 { font-size:14px;}
.gm-large .cap .des { font-size:12px; line-height:1.25;}
.gm-large .cap .cpr { font-size:10px; color:#BCC;}
.gm-large .tag {
position:absolute; top:6px;
display:flex; flex-wrap:wrap;
}
.gm-large .tag:nth-child(2) { left:6px;}
.gm-large .tag:nth-child(3) { right:6px;}
.gm-large .tag * {
display:block;
border:solid 1px #FFF;
background:rgb(0,0,0,75%);
font-size:14px; color:#FFF; text-decoration:none;
padding:0.5em; margin:2px;
}
.gm-large .tag :hover { animation:new10-tag 0.5s forwards;}
@keyframes new10-tag { 0% { background:#FFF; text-shadow:none;}}
@media screen and ( max-width:768px ){
.gm-large .cap h3 { font-size:14px;}
.gm-large .cap h4 { font-size:12px;}
.gm-large .tag * { font-size:12px;}
}
@media screen and ( max-width:568px ){
.gm-large,
.gm-large .cap { width:calc(100vw - 32px);}
.gm-large .cap { height:calc((100vw - 32px)/16 * 10);}
}
@media screen and ( max-width:400px ){
.gm-large .cap .des { display:none;}
}
/*↑大↑*/
/*↓小↓*/
.gm-small {
position:relative;
overflow:hidden;
width:256px;
padding:8px;
}
.gm-small .cap {
position:relative;
display:block; width:240px; height:150px; overflow:hidden;
background:#000;
color:#FFF;
}
.gm-small .cap.more {/* 遷移先 */
display:flex; justify-content:center; align-items:center;
background:radial-gradient(circle at center 16px,#356 0%,#011 75%);
font-size:12px;
}
.gm-small .cap:after {/* 枠 */
position:absolute; left:0; right:0; top:0; bottom:0;
border:solid 1px #FFF;
content:'';
}
.gm-small .cap > span {/* 画 */
position:absolute; left:0; right:0; top:0; bottom:0;
display:block;
background:no-repeat center center / cover;
}
.gm-small .cap:hover > span:nth-child(2) { transition:opacity 0.5s; opacity:0;}
.gm-small .cap div {
position:absolute; left:0; right:0; bottom:0;
display:flex; justify-content:space-between; align-items:end;
background:linear-gradient(transparent,rgb(0,0,0,75%) 16px);
padding:16px 8px 8px;
}
.gm-small .cap div * { line-height:1;}
.gm-small .cap h3 { font-size:14px; text-align:left;}/* タイトル */
.gm-small .cap h4 { font-size:18px; text-align:right; white-space:nowrap; margin-left:8px;}/* 価格 */
.gm-small .cap h4 span { font-size:75%;}
.gm-small .cap p { /* 順位 */
position:absolute; right:0; top:0;
background:rgb(0,0,0,75%);
border:solid 1px #FFF;
font-size:12px;
padding:0.5em;
}
.gm-small .tag {/* タグ */
position:absolute; top:0; left:0;
display:flex; flex-wrap:wrap;
padding:2px;
}
.gm-small .tag > * {
display:block; overflow:hidden;
background:rgb(0,0,0,75%);
box-shadow:0 2px 2px rgb(0,0,0,50%);
border:solid 1px #FFF;
font-size:12px; white-space:nowrap;
padding:0.5em; margin:2px;
}
.gm-small .tag a { color:#FFF !important;}
.gm-small .tag a:hover { animation:gm-small-tag 0.5s forwards;}
@keyframes gm-small-tag { 0% { background:#FFF; text-shadow:none;}}
.gm-small a.maker {/* メーカー */
display:block; overflow:hidden;
color:#BCC; font-size:12px; white-space:nowrap;
margin-top:8px;
}
.gm-small a.maker:hover { color:#FFF;}
.gm-small > p { font-size:10px; color:#899; margin-top:8px;}/* 商標 */
.gm-small > p:empty { display:none;}
@media screen and ( max-width:768px ){
.gm-small .cap h3 { font-size:12px;}
.gm-small .cap h4 { font-size:14px;}
}
/*↑小↑*/
/*↓小：枠(必須ではない)↓*/
.box-gm-small {
background:rgba(0,0,0,75%);
border-top:solid 2px #FFF;
padding:24px;
}
.box-gm-small > p { font-size:14px; color:#FFF; padding:8px;}
.box-gm-small > p span { color:#6FC;}
.box-gm-small > .inner {
display:flex; flex-wrap:wrap; justify-content:center;
max-width:1280px; width:100%;
margin:0 auto;
opacity:0; visibility:hidden;
animation:box-gm-small-inner 1s 1s forwards;
}
@keyframes box-gm-small-inner { to { opacity:1; visibility:visible;}}
@media screen and ( max-width:768px ){
.box-gm-small { padding:8px;}
.box-gm-small > p { font-size:12px;}
}
/*↑小：枠↑*/