@charset "utf-8";

@media screen and (min-width:641px){

/* products*/
#products h1 {background: url(../images/products/index/h1.png) left top no-repeat; height: 137px;}
#products h1[data-category='consumer']{background-image: url(../images/products/index/h1-consumer.png);}
#products h1[data-category='arcade']{background-image: url(../images/products/index/h1-arcade.png);}
#products h1[data-category='smartphone']{background-image: url(../images/products/index/h1-smartphone.png);}
#products h1[data-category='browsergame']{background-image: url(../images/products/index/h1-browsergame.png);}
#products h1[data-category='other']{background-image: url(../images/products/index/h1-other.png);}
#products #contents::before{content: ''; width: 100%; height: 100%; background:url(../images/bg2.png) center top no-repeat; position: fixed; left: 0; top: 0; z-index: 0;}
#products article {margin: 0 10px 0; border-bottom:1px solid #0b7fc6; padding-bottom: 40px;}
#products article + article { margin: 0 10px 0; padding-top: 40px; clear: both;}
#products article figure {max-width: 580px;}
#products article figure img {width: 270px; float: left;}
#products article figure figcaption {font-size: 13px; line-height: 24px; zoom:1; overflow: hidden; padding: 0 20px; transform: translate(0,-0.4em);}
#products article header {font-size: 16px; line-height: 26px; width: 470px; float: right; transform: translate(0,-0.3em);}
#products article header h2 {font-size: 15px; color: #0b7fc6; font-weight: bold;}
#products article .link {clear: both; zoom:1; padding: 10px 0 0;}
#products article .link li {display: inline-block; vertical-align: top; margin-right: 10px;}
#products article .link a,
#products article .link span{width: 180px; height: 44px; line-height: 44px; color: #fff; background: #0b7fc6; display: block; font-size: 13px; text-align: center; letter-spacing: 0.1em; transition: 0.3s;}
#products article .link a:hover {filter: brightness(1.2); text-decoration: none;}
#products article .link span {background: #b9b9b9;}

}
@media screen and (min-width:1921px){
}
@media screen and (max-width:640px){

/* products*/
#products h1 {background: url(../images/products/index/h1-sp.png) left top no-repeat; height: 25vw; background-size: auto 100%;}
#products h1[data-category='consumer']{background-image: url(../images/products/index/h1-consumer-sp.png);}
#products h1[data-category='arcade']{background-image: url(../images/products/index/h1-arcade-sp.png);}
#products h1[data-category='smartphone']{background-image: url(../images/products/index/h1-smartphone-sp.png);}
#products h1[data-category='browsergame']{background-image: url(../images/products/index/h1-browsergame-sp.png);}
#products h1[data-category='other']{background-image: url(../images/products/index/h1-other-sp.png);}
#products article {margin: 0 6.25vw 0; padding: 9vw 0 0;}
#products article + article {clear: both; padding-top: 22.2375vw;}
#products article figure {padding: 7.4vw 0 0;}
#products article figure img {width: 65.625vw; position: relative; z-index: 10;}
#products article figure figcaption {font-size: 2.8125vw; line-height: 5.625vw; color: #fff; text-align: left; position: relative; z-index: 0; margin: -8.125vw 0 0; padding: 12.4vw 0 6.8vw;}
#products article figure figcaption::after{content: ''; background: url(../images/products/index/spec.jpg) center bottom no-repeat #949494; width: 100vw; height: 100%; position: absolute; left: -6.25vw; top: 0; z-index: -1;}
#products article header {font-size: 3.125vw; line-height: 5.625vw;}
#products article header h2 {font-size: 4.6875vw; color: #0b7fc6; font-weight: bold; line-height: 6.40625vw;}
#products article header h2 + p {margin-top: 3.8vw;}
#products article .link {clear: both; zoom:1; padding: 5.625vw 0 0; margin: 0 -6.25vw;}
#products article .link li {display: inline-block; vertical-align: top; padding: 0 0.9375vw;}
#products article .link li:nth-child(n+3) {margin-top: 2.5vw;}
#products article .link a,
#products article .link span{width: 44.375vw; height: 10.78125vw; line-height: 10.78125vw; color: #fff; background: #0b7fc6; display: block; font-size: 3.75vw; text-align: center; letter-spacing: 0.1em; transition: 0.3s;}
#products article .link a:hover {filter: brightness(1.2); text-decoration: none;}
#products article .link span {background: #b9b9b9;}


}